From 0a873d7accd3b6dc78937d9228b46ac7c4c17d81 Mon Sep 17 00:00:00 2001
From: Aleksandr Beliaev <aleksandr.beliaev@nortal.com>
Date: Mon, 26 Feb 2024 19:02:59 +0200
Subject: [PATCH] docs(storybook): try to reproduce a bug in
 cvi-ng-responsive-table with translations using observables

---
 .../table-responsive.component.stories.ts     | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/libs/ui/src/lib/table-responsive/table-responsive.component.stories.ts b/libs/ui/src/lib/table-responsive/table-responsive.component.stories.ts
index d05c465d..dfa30dca 100644
--- a/libs/ui/src/lib/table-responsive/table-responsive.component.stories.ts
+++ b/libs/ui/src/lib/table-responsive/table-responsive.component.stories.ts
@@ -2,6 +2,9 @@ import { Meta, Story } from '@storybook/angular';
 import notes from './table-responsive.component.md';
 import { TableResponsiveComponent } from './table-responsive.component';
 import { StatusBadgeSeverity } from '../status-badge/status-badge';
+import { concatMap, delay, from, of } from 'rxjs';
+
+const withObservableTitlesDelay = 1000;
 
 const statuses: { severity: StatusBadgeSeverity; label: string }[] = [
   {
@@ -162,3 +165,40 @@ WithCustomHeaderAndBodyMobile.parameters = {
     defaultViewport: 'iphone12mini',
   },
 };
+
+const TemplateWithObservables: Story<TableResponsiveComponent> = (
+  args: TableResponsiveComponent
+) => ({
+  props: {
+    ...args,
+    data: [
+      {
+        who: 'Monkey',
+        what: 'see-do',
+      },
+      {
+        who: 'Bear',
+        what: 'drink-drank-drunk',
+      },
+    ],
+    headerLabels$: from([['Lunes', 'Viernes']]).pipe(
+      concatMap((item) => of(item).pipe(delay(withObservableTitlesDelay)))
+    ),
+  },
+  /* template */
+  template: `
+    <cvi-ng-table-responsive [data]="data" [headerLabels]="headerLabels$ | async"></cvi-ng-table-responsive>
+  `,
+});
+
+export const WithObservables = TemplateWithObservables.bind({});
+WithObservables.parameters = {
+  chromatic: { delay: withObservableTitlesDelay + 300 },
+  layout: 'fullscreen',
+  backgrounds: {
+    default: 'light',
+  },
+  viewport: {
+    defaultViewport: 'iphone12mini',
+  },
+};