diff --git a/libs/angular-accelerator/.storybook/preview.ts b/libs/angular-accelerator/.storybook/preview.ts
index 92613aef..dcacfc1d 100644
--- a/libs/angular-accelerator/.storybook/preview.ts
+++ b/libs/angular-accelerator/.storybook/preview.ts
@@ -19,8 +19,14 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    options: {
+      storySort: {
+        method: 'alphabetical',
+        order: ['Components', '*'],
+      },
+    },
   },
-  tags: ['autodocs', 'autodocs', 'autodocs']
+  tags: ['autodocs', 'autodocs', 'autodocs'],
 }
 
 export default preview
diff --git a/libs/angular-accelerator/src/lib/components/custom-group-column-selector/custom-group-column-selector.component.stories.ts b/libs/angular-accelerator/src/lib/components/custom-group-column-selector/custom-group-column-selector.component.stories.ts
index de30c5f8..66d473d5 100644
--- a/libs/angular-accelerator/src/lib/components/custom-group-column-selector/custom-group-column-selector.component.stories.ts
+++ b/libs/angular-accelerator/src/lib/components/custom-group-column-selector/custom-group-column-selector.component.stories.ts
@@ -27,7 +27,7 @@ type CustomGroupColumnSelectorInputs = Pick<
   | 'inactiveColumnsLabel'
 >
 const CustomGroupColumnSelectorComponentSBConfig: Meta<CustomGroupColumnSelectorComponent> = {
-  title: 'CustomGroupColumnSelectorComponent',
+  title: 'Components/CustomGroupColumnSelectorComponent',
   component: CustomGroupColumnSelectorComponent,
   decorators: [
     applicationConfig({
diff --git a/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.stories.ts b/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.stories.ts
index b15ae84b..8c577f69 100644
--- a/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.stories.ts
+++ b/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.stories.ts
@@ -16,7 +16,7 @@ import { TooltipOnOverflowDirective } from '../../directives/tooltipOnOverflow.d
 import { MockAuthModule } from '../../mock-auth/mock-auth.module'
 
 const DataListGridComponentSBConfig: Meta<DataListGridComponent> = {
-  title: 'DataListGridComponent',
+  title: 'Components/DataListGridComponent',
   component: DataListGridComponent,
   decorators: [
     applicationConfig({
@@ -185,9 +185,9 @@ export const ListWithAdditionalActions = {
         id: '1',
         labelKey: 'Additional 1',
         icon: 'pi pi-plus',
-        permission: 'TEST_MGMT#TEST_VIEW'
-      }
-    ]
+        permission: 'TEST_MGMT#TEST_VIEW',
+      },
+    ],
   },
 }
 
@@ -202,9 +202,9 @@ export const ListWithConditionallyEnabledAdditionalActions = {
         labelKey: 'Additional 1',
         icon: 'pi pi-plus',
         permission: 'TEST_MGMT#TEST_VIEW',
-        actionEnabledField: 'available'
-      }
-    ]
+        actionEnabledField: 'available',
+      },
+    ],
   },
 }
 
@@ -219,9 +219,9 @@ export const ListWithConditionallyVisibleAdditionalActions = {
         labelKey: 'Additional 1',
         icon: 'pi pi-plus',
         permission: 'TEST_MGMT#TEST_VIEW',
-        actionVisibleField: 'available'
-      }
-    ]
+        actionVisibleField: 'available',
+      },
+    ],
   },
 }
 
@@ -254,7 +254,7 @@ export const ListWithAdditionalOverflowActions = {
         showAsOverflow: true,
         actionEnabledField: 'available',
       },
-    ]
+    ],
   },
 }
 
@@ -293,7 +293,7 @@ export const ListWithOnlyAdditionalOverflowActions = {
         showAsOverflow: true,
         actionEnabledField: 'available',
       },
-    ]
+    ],
   },
 }
 
@@ -303,7 +303,7 @@ export const ListWithPageSizes = {
   args: {
     ...defaultComponentArgs,
     pageSizes: [2, 15, 25],
-    data: extendedMockData
+    data: extendedMockData,
   },
 }
 
@@ -359,9 +359,9 @@ export const GridWithAdditionalActions = {
         id: '1',
         labelKey: 'Additional 1',
         icon: 'pi pi-plus',
-        permission: 'TEST_MGMT#TEST_VIEW'
-      }
-    ]
+        permission: 'TEST_MGMT#TEST_VIEW',
+      },
+    ],
   },
 }
 
@@ -377,9 +377,9 @@ export const GridWithConditionallyEnabledAdditionalActions = {
         labelKey: 'Additional 1',
         icon: 'pi pi-plus',
         permission: 'TEST_MGMT#TEST_VIEW',
-        actionEnabledField: 'available'
-      }
-    ]
+        actionEnabledField: 'available',
+      },
+    ],
   },
 }
 
@@ -395,9 +395,9 @@ export const GridWithConditionallyVisibleAdditionalActions = {
         labelKey: 'Additional 1',
         icon: 'pi pi-plus',
         permission: 'TEST_MGMT#TEST_VIEW',
-        actionVisibleField: 'available'
-      }
-    ]
+        actionVisibleField: 'available',
+      },
+    ],
   },
 }
 
diff --git a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts
index be4a3eab..134726f6 100644
--- a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts
+++ b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts
@@ -20,7 +20,7 @@ import { FormsModule } from '@angular/forms'
 type DataTableInputTypes = Pick<DataTableComponent, 'rows' | 'columns' | 'emptyResultsMessage' | 'selectedRows'>
 
 const DataTableComponentSBConfig: Meta<DataTableComponent> = {
-  title: 'DataTableComponent',
+  title: 'Components/DataTableComponent',
   component: DataTableComponent,
   decorators: [
     applicationConfig({
diff --git a/libs/angular-accelerator/src/lib/components/diagram/diagram.component.stories.ts b/libs/angular-accelerator/src/lib/components/diagram/diagram.component.stories.ts
index 8fe4f73e..ce2809d6 100644
--- a/libs/angular-accelerator/src/lib/components/diagram/diagram.component.stories.ts
+++ b/libs/angular-accelerator/src/lib/components/diagram/diagram.component.stories.ts
@@ -16,7 +16,7 @@ import { DiagramType } from '../../model/diagram-type'
 import { DiagramData } from '../../model/diagram-data'
 
 export default {
-  title: 'DiagramComponent',
+  title: 'Components/DiagramComponent',
   component: DiagramComponent,
   argTypes: {
     diagramType: {
diff --git a/libs/angular-accelerator/src/lib/components/group-by-count-diagram/group-by-count-diagram.component.stories.ts b/libs/angular-accelerator/src/lib/components/group-by-count-diagram/group-by-count-diagram.component.stories.ts
index 3519f545..20b998ae 100644
--- a/libs/angular-accelerator/src/lib/components/group-by-count-diagram/group-by-count-diagram.component.stories.ts
+++ b/libs/angular-accelerator/src/lib/components/group-by-count-diagram/group-by-count-diagram.component.stories.ts
@@ -16,7 +16,7 @@ import { DiagramComponent } from '../diagram/diagram.component'
 import { ColumnType } from '../../model/column-type.model'
 
 export default {
-  title: 'GroupByCountDiagramComponent',
+  title: 'Components/GroupByCountDiagramComponent',
   component: GroupByCountDiagramComponent,
   argTypes: {
     diagramType: {
diff --git a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view-filter-view.component.stories.ts b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view-filter-view.component.stories.ts
new file mode 100644
index 00000000..88fd91cf
--- /dev/null
+++ b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view-filter-view.component.stories.ts
@@ -0,0 +1,287 @@
+import { Meta, StoryFn } from '@storybook/angular'
+import { InteractiveDataViewComponent } from './interactive-data-view.component'
+import { Filter } from '../../model/filter.model'
+import {
+  defaultInteractiveDataViewArgs,
+  InteractiveDataViewComponentSBConfig,
+  InteractiveDataViewTemplate,
+} from './storybook-config'
+
+const InteractiveDataViewComponentFilterViewSBConfig: Meta<InteractiveDataViewComponent> = {
+  ...InteractiveDataViewComponentSBConfig,
+  title: 'Components/InteractiveDataViewComponent/FilterView',
+}
+
+type InteractiveDataViewFilterViewInputTypes = Pick<
+  InteractiveDataViewComponent,
+  'data' | 'columns' | 'emptyResultsMessage' | 'disableFilterView' | 'filterViewDisplayMode'
+>
+const defaultArgs: InteractiveDataViewFilterViewInputTypes = {
+  ...defaultInteractiveDataViewArgs,
+  disableFilterView: true,
+  filterViewDisplayMode: 'button',
+}
+
+const CustomContentInteractiveDataView: StoryFn<InteractiveDataViewComponent> = (args) => ({
+  props: args,
+  template: `
+    <ocx-interactive-data-view [filterViewDisplayMode]="filterViewDisplayMode" [disableFilterView]="disableFilterView" [emptyResultsMessage]="emptyResultsMessage" [columns]="columns" [data]="data">
+      <ng-template #listItem let-item>
+        <div class="w-full px-4 py-2 card mb-4">
+          <p>{{item.product}}</p>
+          <p-progressBar [value]="item.amount" />
+        </div>
+      </ng-template>
+      <ng-template #gridItem let-item>
+        <div class="w-3 px-4 py-2 card m-0 mr-4">
+          <p>{{item.product}}</p>
+          <p-progressBar [value]="item.amount" />
+        </div>
+    </ng-template>
+    <ng-template #topCenter>
+      <input pInputText placeholder="Custom input injected via template" class="border-round w-18rem p-2" />
+    </ng-template>
+    </ocx-interactive-data-view>`,
+})
+
+export const WithFilterViewChips = {
+  render: CustomContentInteractiveDataView,
+  args: {
+    ...defaultArgs,
+    disableFilterView: false,
+    filterViewDisplayMode: 'chips',
+  },
+}
+
+export const WithFilterViewButton = {
+  render: CustomContentInteractiveDataView,
+  args: {
+    ...defaultArgs,
+    disableFilterView: false,
+    filterViewDisplayMode: 'button',
+  },
+}
+
+const CustomFilterViewChipsInteractiveDataView: StoryFn<InteractiveDataViewComponent> = (args) => ({
+  props: args,
+  template: `
+    <ocx-interactive-data-view [filterViewDisplayMode]="filterViewDisplayMode" [disableFilterView]="disableFilterView" [columns]="columns" [data]="data">
+      <ng-template pTemplate="stringTableCell" let-rowObject="rowObject" let-column="column">
+        <ng-container>STRING: {{ rowObject[column.id] }} </ng-container>
+      </ng-template>
+      <ng-template pTemplate="stringTableFilterCell" let-rowObject="rowObject" let-column="column">
+        <ng-container>STRING FILTER: {{ rowObject[column.id] }} </ng-container>
+      </ng-template>
+      <ng-template pTemplate="stringFilterChipValue" let-rowObject="rowObject" let-column="column">
+        <ng-container>CHIP: {{ rowObject[column.id] }} </ng-container>
+      </ng-template>
+    </ocx-interactive-data-view>`,
+})
+
+export const WithFilterViewCustomChipsTemplates = {
+  render: CustomFilterViewChipsInteractiveDataView,
+  args: {
+    ...defaultArgs,
+    disableFilterView: false,
+    filterViewDisplayMode: 'chips',
+  },
+}
+
+const CustomFilterViewChipsByColumnInteractiveDataView: StoryFn<InteractiveDataViewComponent> = (args) => ({
+  props: args,
+  template: `
+    <ocx-interactive-data-view [filterViewDisplayMode]="filterViewDisplayMode" [disableFilterView]="disableFilterView" [columns]="columns" [data]="data">
+      <ng-template pTemplate="stringTableCell" let-rowObject="rowObject" let-column="column">
+        <ng-container>STRING: {{ rowObject[column.id] }} </ng-container>
+      </ng-template>
+      <ng-template pTemplate="stringTableFilterCell" let-rowObject="rowObject" let-column="column">
+        <ng-container>STRING FILTER: {{ rowObject[column.id] }} </ng-container>
+      </ng-template>
+      <ng-template pTemplate="stringFilterChipValue" let-rowObject="rowObject" let-column="column">
+        <ng-container>CHIP: {{ rowObject[column.id] }} </ng-container>
+      </ng-template>
+      <ng-template pTemplate="productIdTableCell" let-rowObject="rowObject" let-column="column">
+        <ng-container>PRODUCT (ID): {{ rowObject[column.id] }} </ng-container>
+      </ng-template>
+      <ng-template pTemplate="productIdTableFilterCell" let-rowObject="rowObject" let-column="column">
+        <ng-container>PRODUCT FILTER (ID): {{ rowObject[column.id] }} </ng-container>
+      </ng-template>
+      <ng-template pTemplate="productIdFilterChip" let-rowObject="rowObject" let-column="column">
+        <ng-container>PRODUCT CHIP (ID): {{ rowObject[column.id] }} </ng-container>
+      </ng-template>
+    </ocx-interactive-data-view>`,
+})
+
+export const WithFilterViewCustomChipsByColumnTemplates = {
+  render: CustomFilterViewChipsByColumnInteractiveDataView,
+  args: {
+    ...defaultArgs,
+    disableFilterView: false,
+    filterViewDisplayMode: 'chips',
+  },
+}
+
+const CustomFilterViewCellsInteractiveDataView: StoryFn<InteractiveDataViewComponent> = (args) => ({
+  props: args,
+  template: `
+    <ocx-interactive-data-view [filterViewDisplayMode]="filterViewDisplayMode" [disableFilterView]="disableFilterView" [columns]="columns" [data]="data">
+      <ng-template pTemplate="stringTableCell" let-rowObject="rowObject" let-column="column">
+        <ng-container>STRING: {{ rowObject[column.id] }} </ng-container>
+      </ng-template>
+      <ng-template pTemplate="stringTableFilterCell" let-rowObject="rowObject" let-column="column">
+        <ng-container>STRING FILTER: {{ rowObject[column.id] }} </ng-container>
+      </ng-template>
+      <ng-template pTemplate="stringFilterViewCell" let-rowObject="rowObject" let-column="column">
+        <ng-container>STRING FILTER VIEW: {{ rowObject[column.id] }} </ng-container>
+      </ng-template>
+    </ocx-interactive-data-view>`,
+})
+
+export const WithFilterViewCustomCellTemplates = {
+  render: CustomFilterViewCellsInteractiveDataView,
+  args: {
+    ...defaultArgs,
+    disableFilterView: false,
+    filterViewDisplayMode: 'button',
+  },
+}
+
+const CustomFilterViewCellsByColumnInteractiveDataView: StoryFn<InteractiveDataViewComponent> = (args) => ({
+  props: args,
+  template: `
+    <ocx-interactive-data-view [filterViewDisplayMode]="filterViewDisplayMode" [disableFilterView]="disableFilterView" [columns]="columns" [data]="data">
+      <ng-template pTemplate="stringTableCell" let-rowObject="rowObject" let-column="column">
+        <ng-container>STRING: {{ rowObject[column.id] }} </ng-container>
+      </ng-template>
+      <ng-template pTemplate="stringTableFilterCell" let-rowObject="rowObject" let-column="column">
+        <ng-container>STRING FILTER: {{ rowObject[column.id] }} </ng-container>
+      </ng-template>
+      <ng-template pTemplate="stringFilterViewCell" let-rowObject="rowObject" let-column="column">
+        <ng-container>STRING FILTER VIEW: {{ rowObject[column.id] }} </ng-container>
+      </ng-template>
+      <ng-template pTemplate="productIdTableCell" let-rowObject="rowObject" let-column="column">
+        <ng-container>PRODUCT (ID): {{ rowObject[column.id] }} </ng-container>
+      </ng-template>
+      <ng-template pTemplate="productIdTableFilterCell" let-rowObject="rowObject" let-column="column">
+        <ng-container>PRODUCT FILTER (ID): {{ rowObject[column.id] }} </ng-container>
+      </ng-template>
+      <ng-template pTemplate="productIdFilterViewCell" let-rowObject="rowObject" let-column="column">
+        <ng-container>PRODUCT FILTER VIEW (ID): {{ rowObject[column.id] }} </ng-container>
+      </ng-template>
+    </ocx-interactive-data-view>`,
+})
+
+export const WithFilterViewCustomCellByColumnTemplates = {
+  render: CustomFilterViewCellsByColumnInteractiveDataView,
+  args: {
+    ...defaultArgs,
+    disableFilterView: false,
+    filterViewDisplayMode: 'button',
+  },
+}
+
+const CustomFilterViewNoFiltersInteractiveDataView: StoryFn<InteractiveDataViewComponent> = (args) => ({
+  props: args,
+  template: `
+    <ocx-interactive-data-view [filterViewDisplayMode]="filterViewDisplayMode" [disableFilterView]="disableFilterView" [columns]="columns" [data]="data">
+      <ng-template pTemplate="fitlerViewNoSelection">
+        <span>Filter data to display chips</span>
+      </ng-template>
+    </ocx-interactive-data-view>`,
+})
+
+export const WithFilterViewCustomNoFiltersTemplate = {
+  render: CustomFilterViewNoFiltersInteractiveDataView,
+  args: {
+    ...defaultArgs,
+    disableFilterView: false,
+    filterViewDisplayMode: 'chips',
+  },
+}
+
+const CustomFilterViewChipContentInteractiveDataView: StoryFn<InteractiveDataViewComponent> = (args) => ({
+  props: args,
+  template: `
+    <ocx-interactive-data-view [filterViewDisplayMode]="filterViewDisplayMode" [disableFilterView]="disableFilterView" [columns]="columns" [data]="data" filterViewChipStyleClass="pl-0 pr-3">
+      <ng-template pTemplate="filterViewChipContent" let-filter="filter" let-column="column" let-filterValueTemplates="filterValueTemplates" let-truthyTemplate="truthyTemplate" let-filterValueTemplate="filterValueTemplate">
+        <span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">{{(column.nameKey | translate).at(0)}}</span>
+        <span class="p-chip-text">
+          <ng-container *ngIf="filter.filterType === 'TRUTHY'; else myChipValue">
+            {{filter.value ? 'MY_YES' : 'MY_NO'}}
+          </ng-container>
+          <ng-template #myChipValue>
+            <ng-container [ngTemplateOutlet]="filterValueTemplate"
+            [ngTemplateOutletContext]="{
+              templates: filterValueTemplates,
+              filter: filter,
+              column: column
+            }">
+            </ng-container>
+          </ng-template>
+        </span>
+      </ng-template>
+      <ng-template pTemplate="productIdFilterChip" let-rowObject="rowObject" let-column="column">
+        <ng-container>
+          [P]{{ rowObject[column.id] }}
+        </ng-container>
+      </ng-template>
+      <ng-template pTemplate="dateTableCell" let-rowObject="rowObject" let-column="column">
+        <ng-container>D: {{ rowObject[column.id] | date }} </ng-container>
+      </ng-template>
+    </ocx-interactive-data-view>`,
+})
+
+export const WithFilterViewCustomChipContentTemplate = {
+  render: CustomFilterViewChipContentInteractiveDataView,
+  args: {
+    ...defaultArgs,
+    disableFilterView: false,
+    filterViewDisplayMode: 'chips',
+  },
+}
+
+const CustomFilterViewShowMoreChipInteractiveDataView: StoryFn<InteractiveDataViewComponent> = (args) => ({
+  props: args,
+  template: `
+    <ocx-interactive-data-view [filterViewDisplayMode]="filterViewDisplayMode" [disableFilterView]="disableFilterView" [columns]="columns" [data]="data">
+      <ng-template pTemplate="filterViewShowMoreChip" let-value>
+      <span class="p-chip-text flex flex-nowrap align-items-center">
+        <i class="pi pi-plus"></i> {{value}}
+      </span>
+      </ng-template>
+    </ocx-interactive-data-view>`,
+})
+
+export const WithFilterViewCustomShowMoreChipTemplate = {
+  render: CustomFilterViewShowMoreChipInteractiveDataView,
+  args: {
+    ...defaultArgs,
+    disableFilterView: false,
+    filterViewDisplayMode: 'chips',
+  },
+}
+
+export const WithFilterViewCustomChipSelection = {
+  render: InteractiveDataViewTemplate,
+  args: {
+    ...defaultArgs,
+    disableFilterView: false,
+    filterViewDisplayMode: 'chips',
+    selectDisplayedChips: (filters: Filter[]) => {
+      return filters.slice(0, 2).reverse()
+    },
+  },
+}
+
+export const WithFilterViewCustomStyles = {
+  render: InteractiveDataViewTemplate,
+  args: {
+    ...defaultArgs,
+    disableFilterView: false,
+    filterViewDisplayMode: 'button',
+    filterViewTableStyle: { 'max-height': '30vh' },
+    filterViewPanelStyle: { 'max-width': '80%' },
+  },
+}
+
+export default InteractiveDataViewComponentFilterViewSBConfig
diff --git a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.stories.ts b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.stories.ts
index fa0c6a8f..fa4c1066 100644
--- a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.stories.ts
+++ b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.stories.ts
@@ -1,183 +1,19 @@
-import { importProvidersFrom } from '@angular/core'
-import { FormsModule } from '@angular/forms'
-import { BrowserModule } from '@angular/platform-browser'
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
-import { ActivatedRoute } from '@angular/router'
-import { UserService } from '@onecx/angular-integration-interface'
-import { MockUserService } from '@onecx/angular-integration-interface/mocks'
-import { Meta, StoryFn, applicationConfig, moduleMetadata } from '@storybook/angular'
-import { ButtonModule } from 'primeng/button'
-import { DataViewModule } from 'primeng/dataview'
-import { DialogModule } from 'primeng/dialog'
-import { DropdownModule } from 'primeng/dropdown'
-import { InputTextModule } from 'primeng/inputtext'
-import { MenuModule } from 'primeng/menu'
-import { MultiSelectModule } from 'primeng/multiselect'
-import { PickListModule } from 'primeng/picklist'
-import { ProgressBarModule } from 'primeng/progressbar'
-import { SelectButtonModule } from 'primeng/selectbutton'
-import { FloatLabelModule } from 'primeng/floatlabel'
-import { TableModule } from 'primeng/table'
-import { ChipModule } from 'primeng/chip'
-import { OverlayPanelModule } from 'primeng/overlaypanel'
-import { IfPermissionDirective } from '../../directives/if-permission.directive'
-import { IfBreakpointDirective } from '../../directives/if-breakpoint.directive'
-import { MockAuthModule } from '../../mock-auth/mock-auth.module'
-import { ColumnType } from '../../model/column-type.model'
-import { StorybookTranslateModule } from '../../storybook-translate.module'
-import { ColumnGroupSelectionComponent } from '../column-group-selection/column-group-selection.component'
-import { CustomGroupColumnSelectorComponent } from '../custom-group-column-selector/custom-group-column-selector.component'
-import { DataLayoutSelectionComponent } from '../data-layout-selection/data-layout-selection.component'
-import { DataListGridSortingComponent } from '../data-list-grid-sorting/data-list-grid-sorting.component'
-import { DataListGridComponent } from '../data-list-grid/data-list-grid.component'
-import { DataTableComponent } from '../data-table/data-table.component'
-import { DataViewComponent } from '../data-view/data-view.component'
+import { Meta, StoryFn } from '@storybook/angular'
 import { InteractiveDataViewComponent } from './interactive-data-view.component'
-import { SlotService } from '@onecx/angular-remote-components'
-import { of } from 'rxjs'
-import { Filter, FilterType } from '../../model/filter.model'
-import { FilterViewComponent } from '../filter-view/filter-view.component'
-import { FocusTrapModule } from 'primeng/focustrap'
+import {
+  InteractiveDataViewComponentSBConfig,
+  defaultInteractiveDataViewArgs,
+  InteractiveDataViewTemplate,
+} from './storybook-config'
 
-type InteractiveDataViewInputTypes = Pick<
-  InteractiveDataViewComponent,
-  'data' | 'columns' | 'emptyResultsMessage' | 'disableFilterView' | 'filterViewDisplayMode'
->
-const InteractiveDataViewComponentSBConfig: Meta<InteractiveDataViewComponent> = {
-  title: 'InteractiveDataViewComponent',
-  component: InteractiveDataViewComponent,
-  decorators: [
-    applicationConfig({
-      providers: [
-        importProvidersFrom(BrowserModule),
-        importProvidersFrom(BrowserAnimationsModule),
-        { provide: UserService, useClass: MockUserService },
-        {
-          provide: ActivatedRoute,
-          useValue: {
-            snapshot: {
-              paramMap: {
-                get: () => '1',
-              },
-            },
-          },
-        },
-        {
-          provide: SlotService,
-          useValue: {
-            isSomeComponentDefinedForSlot() {
-              return of(false)
-            },
-          },
-        },
-      ],
-    }),
-    moduleMetadata({
-      declarations: [
-        InteractiveDataViewComponent,
-        IfPermissionDirective,
-        IfBreakpointDirective,
-        CustomGroupColumnSelectorComponent,
-        ColumnGroupSelectionComponent,
-        DataViewComponent,
-        DataTableComponent,
-        DataLayoutSelectionComponent,
-        DataListGridComponent,
-        DataListGridSortingComponent,
-        FilterViewComponent,
-      ],
-      imports: [
-        TableModule,
-        ButtonModule,
-        MultiSelectModule,
-        StorybookTranslateModule,
-        MockAuthModule,
-        MenuModule,
-        PickListModule,
-        SelectButtonModule,
-        DialogModule,
-        DataViewModule,
-        DropdownModule,
-        FormsModule,
-        ProgressBarModule,
-        InputTextModule,
-        FloatLabelModule,
-        OverlayPanelModule,
-        FocusTrapModule,
-        ChipModule,
-      ],
-    }),
-  ],
-  argTypes: {
-    selectDisplayedChips: { type: 'function', control: false },
-  },
+const InteractiveDataViewComponentDefaultSBConfig: Meta<InteractiveDataViewComponent> = {
+  ...InteractiveDataViewComponentSBConfig,
+  title: 'Components/InteractiveDataViewComponent',
 }
-const Template: StoryFn = (args) => ({
-  props: args,
-})
+type InteractiveDataViewInputTypes = Pick<InteractiveDataViewComponent, 'data' | 'columns' | 'emptyResultsMessage'>
 
 const defaultComponentArgs: InteractiveDataViewInputTypes = {
-  columns: [
-    {
-      id: 'product',
-      columnType: ColumnType.STRING,
-      nameKey: 'Product',
-      sortable: false,
-      filterable: true,
-      predefinedGroupKeys: ['test'],
-    },
-    {
-      id: 'amount',
-      columnType: ColumnType.NUMBER,
-      nameKey: 'Amount',
-      sortable: true,
-      predefinedGroupKeys: ['test', 'test1'],
-    },
-    {
-      id: 'available',
-      columnType: ColumnType.STRING,
-      nameKey: 'Available',
-      sortable: false,
-      filterable: true,
-      filterType: FilterType.TRUTHY,
-      predefinedGroupKeys: ['test2'],
-    },
-    {
-      id: 'date',
-      columnType: ColumnType.DATE,
-      nameKey: 'Date',
-      sortable: false,
-      filterable: true,
-      predefinedGroupKeys: ['test2'],
-    },
-  ],
-  data: [
-    {
-      id: 1,
-      product: 'Apples',
-      amount: 2,
-      available: false,
-      imagePath: '',
-      date: new Date(2022, 1, 1, 13, 14, 55, 120),
-    },
-    {
-      id: 2,
-      product: 'Bananas',
-      amount: 10,
-      imagePath: '',
-      date: new Date(2022, 1, 1, 13, 14, 55, 120),
-    },
-    {
-      id: 3,
-      product: 'Strawberries',
-      amount: 5,
-      imagePath: '',
-      date: new Date(2022, 1, 3, 13, 14, 55, 120),
-    },
-  ],
-  emptyResultsMessage: 'No results',
-  disableFilterView: true,
-  filterViewDisplayMode: 'button',
+  ...defaultInteractiveDataViewArgs,
 }
 
 export const WithMockData = {
@@ -185,7 +21,7 @@ export const WithMockData = {
     componentStateChanged: { action: 'componentStateChanged' },
     selectionChanged: { action: 'selectionChanged' },
   },
-  render: Template,
+  render: InteractiveDataViewTemplate,
   args: {
     ...defaultComponentArgs,
     selectedRows: [],
@@ -196,7 +32,7 @@ export const WithPageSizes = {
   argTypes: {
     componentStateChanged: { action: 'componentStateChanged' },
   },
-  render: Template,
+  render: InteractiveDataViewTemplate,
   args: {
     ...defaultComponentArgs,
     pageSizes: [2, 15, 25],
@@ -329,244 +165,4 @@ export const WithCustomTableColumnTemplates = {
   },
 }
 
-export const WithFilterViewChips = {
-  render: CustomContentInteractiveDataView,
-  args: {
-    ...defaultComponentArgs,
-    disableFilterView: false,
-    filterViewDisplayMode: 'chips',
-  },
-}
-
-export const WithFilterViewButton = {
-  render: CustomContentInteractiveDataView,
-  args: {
-    ...defaultComponentArgs,
-    disableFilterView: false,
-    filterViewDisplayMode: 'button',
-  },
-}
-
-const CustomFilterViewChipsInteractiveDataView: StoryFn<InteractiveDataViewComponent> = (args) => ({
-  props: args,
-  template: `
-  <ocx-interactive-data-view [filterViewDisplayMode]="filterViewDisplayMode" [disableFilterView]="disableFilterView" [columns]="columns" [data]="data">
-    <ng-template pTemplate="stringTableCell" let-rowObject="rowObject" let-column="column">
-      <ng-container>STRING: {{ rowObject[column.id] }} </ng-container>
-    </ng-template>
-    <ng-template pTemplate="stringTableFilterCell" let-rowObject="rowObject" let-column="column">
-      <ng-container>STRING FILTER: {{ rowObject[column.id] }} </ng-container>
-    </ng-template>
-    <ng-template pTemplate="stringFilterChipValue" let-rowObject="rowObject" let-column="column">
-      <ng-container>CHIP: {{ rowObject[column.id] }} </ng-container>
-    </ng-template>
-  </ocx-interactive-data-view>`,
-})
-
-export const WithFilterViewCustomChipsTemplates = {
-  render: CustomFilterViewChipsInteractiveDataView,
-  args: {
-    ...defaultComponentArgs,
-    disableFilterView: false,
-    filterViewDisplayMode: 'chips',
-  },
-}
-
-const CustomFilterViewChipsByColumnInteractiveDataView: StoryFn<InteractiveDataViewComponent> = (args) => ({
-  props: args,
-  template: `
-  <ocx-interactive-data-view [filterViewDisplayMode]="filterViewDisplayMode" [disableFilterView]="disableFilterView" [columns]="columns" [data]="data">
-    <ng-template pTemplate="stringTableCell" let-rowObject="rowObject" let-column="column">
-      <ng-container>STRING: {{ rowObject[column.id] }} </ng-container>
-    </ng-template>
-    <ng-template pTemplate="stringTableFilterCell" let-rowObject="rowObject" let-column="column">
-      <ng-container>STRING FILTER: {{ rowObject[column.id] }} </ng-container>
-    </ng-template>
-    <ng-template pTemplate="stringFilterChipValue" let-rowObject="rowObject" let-column="column">
-      <ng-container>CHIP: {{ rowObject[column.id] }} </ng-container>
-    </ng-template>
-    <ng-template pTemplate="productIdTableCell" let-rowObject="rowObject" let-column="column">
-      <ng-container>PRODUCT (ID): {{ rowObject[column.id] }} </ng-container>
-    </ng-template>
-    <ng-template pTemplate="productIdTableFilterCell" let-rowObject="rowObject" let-column="column">
-      <ng-container>PRODUCT FILTER (ID): {{ rowObject[column.id] }} </ng-container>
-    </ng-template>
-    <ng-template pTemplate="productIdFilterChip" let-rowObject="rowObject" let-column="column">
-      <ng-container>PRODUCT CHIP (ID): {{ rowObject[column.id] }} </ng-container>
-    </ng-template>
-  </ocx-interactive-data-view>`,
-})
-
-export const WithFilterViewCustomChipsByColumnTemplates = {
-  render: CustomFilterViewChipsByColumnInteractiveDataView,
-  args: {
-    ...defaultComponentArgs,
-    disableFilterView: false,
-    filterViewDisplayMode: 'chips',
-  },
-}
-
-const CustomFilterViewCellsInteractiveDataView: StoryFn<InteractiveDataViewComponent> = (args) => ({
-  props: args,
-  template: `
-  <ocx-interactive-data-view [filterViewDisplayMode]="filterViewDisplayMode" [disableFilterView]="disableFilterView" [columns]="columns" [data]="data">
-    <ng-template pTemplate="stringTableCell" let-rowObject="rowObject" let-column="column">
-      <ng-container>STRING: {{ rowObject[column.id] }} </ng-container>
-    </ng-template>
-    <ng-template pTemplate="stringTableFilterCell" let-rowObject="rowObject" let-column="column">
-      <ng-container>STRING FILTER: {{ rowObject[column.id] }} </ng-container>
-    </ng-template>
-    <ng-template pTemplate="stringFilterViewCell" let-rowObject="rowObject" let-column="column">
-      <ng-container>STRING FILTER VIEW: {{ rowObject[column.id] }} </ng-container>
-    </ng-template>
-  </ocx-interactive-data-view>`,
-})
-
-export const WithFilterViewCustomCellTemplates = {
-  render: CustomFilterViewCellsInteractiveDataView,
-  args: {
-    ...defaultComponentArgs,
-    disableFilterView: false,
-    filterViewDisplayMode: 'button',
-  },
-}
-
-const CustomFilterViewCellsByColumnInteractiveDataView: StoryFn<InteractiveDataViewComponent> = (args) => ({
-  props: args,
-  template: `
-  <ocx-interactive-data-view [filterViewDisplayMode]="filterViewDisplayMode" [disableFilterView]="disableFilterView" [columns]="columns" [data]="data">
-    <ng-template pTemplate="stringTableCell" let-rowObject="rowObject" let-column="column">
-      <ng-container>STRING: {{ rowObject[column.id] }} </ng-container>
-    </ng-template>
-    <ng-template pTemplate="stringTableFilterCell" let-rowObject="rowObject" let-column="column">
-      <ng-container>STRING FILTER: {{ rowObject[column.id] }} </ng-container>
-    </ng-template>
-    <ng-template pTemplate="stringFilterViewCell" let-rowObject="rowObject" let-column="column">
-      <ng-container>STRING FILTER VIEW: {{ rowObject[column.id] }} </ng-container>
-    </ng-template>
-    <ng-template pTemplate="productIdTableCell" let-rowObject="rowObject" let-column="column">
-      <ng-container>PRODUCT (ID): {{ rowObject[column.id] }} </ng-container>
-    </ng-template>
-    <ng-template pTemplate="productIdTableFilterCell" let-rowObject="rowObject" let-column="column">
-      <ng-container>PRODUCT FILTER (ID): {{ rowObject[column.id] }} </ng-container>
-    </ng-template>
-    <ng-template pTemplate="productIdFilterViewCell" let-rowObject="rowObject" let-column="column">
-      <ng-container>PRODUCT FILTER VIEW (ID): {{ rowObject[column.id] }} </ng-container>
-    </ng-template>
-  </ocx-interactive-data-view>`,
-})
-
-export const WithFilterViewCustomCellByColumnTemplates = {
-  render: CustomFilterViewCellsByColumnInteractiveDataView,
-  args: {
-    ...defaultComponentArgs,
-    disableFilterView: false,
-    filterViewDisplayMode: 'button',
-  },
-}
-
-const CustomFilterViewNoFiltersInteractiveDataView: StoryFn<InteractiveDataViewComponent> = (args) => ({
-  props: args,
-  template: `
-  <ocx-interactive-data-view [filterViewDisplayMode]="filterViewDisplayMode" [disableFilterView]="disableFilterView" [columns]="columns" [data]="data">
-    <ng-template pTemplate="fitlerViewNoSelection">
-      <span>Filter data to display chips</span>
-    </ng-template>
-  </ocx-interactive-data-view>`,
-})
-
-export const WithFilterViewCustomNoFiltersTemplate = {
-  render: CustomFilterViewNoFiltersInteractiveDataView,
-  args: {
-    ...defaultComponentArgs,
-    disableFilterView: false,
-    filterViewDisplayMode: 'chips',
-  },
-}
-
-const CustomFilterViewChipContentInteractiveDataView: StoryFn<InteractiveDataViewComponent> = (args) => ({
-  props: args,
-  template: `
-  <ocx-interactive-data-view [filterViewDisplayMode]="filterViewDisplayMode" [disableFilterView]="disableFilterView" [columns]="columns" [data]="data" filterViewChipStyleClass="pl-0 pr-3">
-    <ng-template pTemplate="filterViewChipContent" let-filter="filter" let-column="column" let-filterValueTemplates="filterValueTemplates" let-truthyTemplate="truthyTemplate" let-filterValueTemplate="filterValueTemplate">
-      <span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">{{(column.nameKey | translate).at(0)}}</span>
-      <span class="p-chip-text">
-        <ng-container *ngIf="filter.filterType === 'TRUTHY'; else myChipValue">
-          {{filter.value ? 'MY_YES' : 'MY_NO'}}
-        </ng-container>
-        <ng-template #myChipValue>
-          <ng-container [ngTemplateOutlet]="filterValueTemplate"
-          [ngTemplateOutletContext]="{
-            templates: filterValueTemplates,
-            filter: filter,
-            column: column
-          }">
-          </ng-container>
-        </ng-template>
-      </span>
-    </ng-template>
-    <ng-template pTemplate="productIdFilterChip" let-rowObject="rowObject" let-column="column">
-      <ng-container>
-        [P]{{ rowObject[column.id] }}
-      </ng-container>
-    </ng-template>
-    <ng-template pTemplate="dateTableCell" let-rowObject="rowObject" let-column="column">
-      <ng-container>D: {{ rowObject[column.id] | date }} </ng-container>
-    </ng-template>
-  </ocx-interactive-data-view>`,
-})
-
-export const WithFilterViewCustomChipContentTemplate = {
-  render: CustomFilterViewChipContentInteractiveDataView,
-  args: {
-    ...defaultComponentArgs,
-    disableFilterView: false,
-    filterViewDisplayMode: 'chips',
-  },
-}
-
-const CustomFilterViewShowMoreChipInteractiveDataView: StoryFn<InteractiveDataViewComponent> = (args) => ({
-  props: args,
-  template: `
-  <ocx-interactive-data-view [filterViewDisplayMode]="filterViewDisplayMode" [disableFilterView]="disableFilterView" [columns]="columns" [data]="data">
-    <ng-template pTemplate="filterViewShowMoreChip" let-value>
-    <span class="p-chip-text flex flex-nowrap align-items-center">
-      <i class="pi pi-plus"></i> {{value}}
-    </span>
-    </ng-template>
-  </ocx-interactive-data-view>`,
-})
-
-export const WithFilterViewCustomShowMoreChipTemplate = {
-  render: CustomFilterViewShowMoreChipInteractiveDataView,
-  args: {
-    ...defaultComponentArgs,
-    disableFilterView: false,
-    filterViewDisplayMode: 'chips',
-  },
-}
-
-export const WithFilterViewCustomChipSelection = {
-  render: Template,
-  args: {
-    ...defaultComponentArgs,
-    disableFilterView: false,
-    filterViewDisplayMode: 'chips',
-    selectDisplayedChips: (filters: Filter[]) => {
-      return filters.slice(0, 2).reverse()
-    },
-  },
-}
-
-export const WithFilterViewCustomStyles = {
-  render: Template,
-  args: {
-    ...defaultComponentArgs,
-    disableFilterView: false,
-    filterViewDisplayMode: 'button',
-    filterViewTableStyle: { 'max-height': '30vh' },
-    filterViewPanelStyle: { 'max-width': '80%' },
-  },
-}
-
-export default InteractiveDataViewComponentSBConfig
+export default InteractiveDataViewComponentDefaultSBConfig
diff --git a/libs/angular-accelerator/src/lib/components/interactive-data-view/storybook-config.ts b/libs/angular-accelerator/src/lib/components/interactive-data-view/storybook-config.ts
new file mode 100644
index 00000000..16f8d083
--- /dev/null
+++ b/libs/angular-accelerator/src/lib/components/interactive-data-view/storybook-config.ts
@@ -0,0 +1,175 @@
+import { Meta, StoryFn, applicationConfig, moduleMetadata } from '@storybook/angular'
+import { InteractiveDataViewComponent } from './interactive-data-view.component'
+import { importProvidersFrom } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { MockUserService } from '@onecx/angular-integration-interface/mocks'
+import { UserService } from '@onecx/angular-integration-interface'
+import { ActivatedRoute } from '@angular/router'
+import { SlotService } from '@onecx/angular-remote-components'
+import { of } from 'rxjs'
+import { IfPermissionDirective } from '../../directives/if-permission.directive'
+import { IfBreakpointDirective } from '../../directives/if-breakpoint.directive'
+import { CustomGroupColumnSelectorComponent } from '../custom-group-column-selector/custom-group-column-selector.component'
+import { ColumnGroupSelectionComponent } from '../column-group-selection/column-group-selection.component'
+import { DataViewComponent } from '../data-view/data-view.component'
+import { DataTableComponent } from '../data-table/data-table.component'
+import { DataLayoutSelectionComponent } from '../data-layout-selection/data-layout-selection.component'
+import { DataListGridComponent } from '../data-list-grid/data-list-grid.component'
+import { DataListGridSortingComponent } from '../data-list-grid-sorting/data-list-grid-sorting.component'
+import { FilterViewComponent } from '../filter-view/filter-view.component'
+import { TableModule } from 'primeng/table'
+import { ButtonModule } from 'primeng/button'
+import { MultiSelectModule } from 'primeng/multiselect'
+import { StorybookTranslateModule } from '../../storybook-translate.module'
+import { MockAuthModule } from '../../mock-auth/mock-auth.module'
+import { MenuModule } from 'primeng/menu'
+import { PickListModule } from 'primeng/picklist'
+import { SelectButtonModule } from 'primeng/selectbutton'
+import { DialogModule } from 'primeng/dialog'
+import { DataViewModule } from 'primeng/dataview'
+import { DropdownModule } from 'primeng/dropdown'
+import { FormsModule } from '@angular/forms'
+import { ProgressBarModule } from 'primeng/progressbar'
+import { InputTextModule } from 'primeng/inputtext'
+import { FloatLabelModule } from 'primeng/floatlabel'
+import { OverlayPanelModule } from 'primeng/overlaypanel'
+import { FocusTrapModule } from 'primeng/focustrap'
+import { ChipModule } from 'primeng/chip'
+import { ColumnType } from '../../model/column-type.model'
+import { FilterType } from '../../model/filter.model'
+
+export const InteractiveDataViewComponentSBConfig: Meta<InteractiveDataViewComponent> = {
+  title: 'Components/InteractiveDataViewComponent',
+  component: InteractiveDataViewComponent,
+  decorators: [
+    applicationConfig({
+      providers: [
+        importProvidersFrom(BrowserModule),
+        importProvidersFrom(BrowserAnimationsModule),
+        { provide: UserService, useClass: MockUserService },
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              paramMap: {
+                get: () => '1',
+              },
+            },
+          },
+        },
+        {
+          provide: SlotService,
+          useValue: {
+            isSomeComponentDefinedForSlot() {
+              return of(false)
+            },
+          },
+        },
+      ],
+    }),
+    moduleMetadata({
+      declarations: [
+        InteractiveDataViewComponent,
+        IfPermissionDirective,
+        IfBreakpointDirective,
+        CustomGroupColumnSelectorComponent,
+        ColumnGroupSelectionComponent,
+        DataViewComponent,
+        DataTableComponent,
+        DataLayoutSelectionComponent,
+        DataListGridComponent,
+        DataListGridSortingComponent,
+        FilterViewComponent,
+      ],
+      imports: [
+        TableModule,
+        ButtonModule,
+        MultiSelectModule,
+        StorybookTranslateModule,
+        MockAuthModule,
+        MenuModule,
+        PickListModule,
+        SelectButtonModule,
+        DialogModule,
+        DataViewModule,
+        DropdownModule,
+        FormsModule,
+        ProgressBarModule,
+        InputTextModule,
+        FloatLabelModule,
+        OverlayPanelModule,
+        FocusTrapModule,
+        ChipModule,
+      ],
+    }),
+  ],
+  argTypes: {
+    selectDisplayedChips: { type: 'function', control: false },
+  },
+}
+export const InteractiveDataViewTemplate: StoryFn = (args) => ({
+  props: args,
+})
+
+export const defaultInteractiveDataViewArgs = {
+  columns: [
+    {
+      id: 'product',
+      columnType: ColumnType.STRING,
+      nameKey: 'Product',
+      sortable: false,
+      filterable: true,
+      predefinedGroupKeys: ['test'],
+    },
+    {
+      id: 'amount',
+      columnType: ColumnType.NUMBER,
+      nameKey: 'Amount',
+      sortable: true,
+      predefinedGroupKeys: ['test', 'test1'],
+    },
+    {
+      id: 'available',
+      columnType: ColumnType.STRING,
+      nameKey: 'Available',
+      sortable: false,
+      filterable: true,
+      filterType: FilterType.TRUTHY,
+      predefinedGroupKeys: ['test2'],
+    },
+    {
+      id: 'date',
+      columnType: ColumnType.DATE,
+      nameKey: 'Date',
+      sortable: false,
+      filterable: true,
+      predefinedGroupKeys: ['test2'],
+    },
+  ],
+  data: [
+    {
+      id: 1,
+      product: 'Apples',
+      amount: 2,
+      available: false,
+      imagePath: '',
+      date: new Date(2022, 1, 1, 13, 14, 55, 120),
+    },
+    {
+      id: 2,
+      product: 'Bananas',
+      amount: 10,
+      imagePath: '',
+      date: new Date(2022, 1, 1, 13, 14, 55, 120),
+    },
+    {
+      id: 3,
+      product: 'Strawberries',
+      amount: 5,
+      imagePath: '',
+      date: new Date(2022, 1, 3, 13, 14, 55, 120),
+    },
+  ],
+  emptyResultsMessage: 'No results',
+}
diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts
index 43482eda..98496324 100644
--- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts
+++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.stories.ts
@@ -15,7 +15,7 @@ import { StorybookBreadcrumbModule } from './../../storybook-breadcrumb.module'
 import { Action, ObjectDetailItem, PageHeaderComponent } from './page-header.component'
 
 export default {
-  title: 'PageHeaderComponent',
+  title: 'Components/PageHeaderComponent',
   component: PageHeaderComponent,
   decorators: [
     applicationConfig({
@@ -82,7 +82,7 @@ const demoActions: Action[] = [
     },
     show: 'asOverflow',
     icon: PrimeIcons.ADDRESS_BOOK,
-    title: 'Tooltip for some action'
+    title: 'Tooltip for some action',
   },
   {
     label: 'Other action',
diff --git a/libs/angular-accelerator/src/lib/components/search-header/search-header.stories.ts b/libs/angular-accelerator/src/lib/components/search-header/search-header.stories.ts
index 35e81df6..69071963 100644
--- a/libs/angular-accelerator/src/lib/components/search-header/search-header.stories.ts
+++ b/libs/angular-accelerator/src/lib/components/search-header/search-header.stories.ts
@@ -17,7 +17,7 @@ import { StorybookBreadcrumbModule } from './../../storybook-breadcrumb.module'
 import { SearchHeaderComponent } from './search-header.component'
 
 export default {
-  title: 'SearchHeaderComponent',
+  title: 'Components/SearchHeaderComponent',
   component: SearchHeaderComponent,
   decorators: [
     applicationConfig({