From c9c8cdfbc2071d65e21d3f809d97355e1201e079 Mon Sep 17 00:00:00 2001
From: Bastian Jakobi <55296998+bastianjakobi@users.noreply.github.com>
Date: Wed, 28 Feb 2024 14:02:41 +0100
Subject: [PATCH 1/3] feat: lifecycle component (#153)

* feat: create necessary files

* feat: finished first implementation

* feat: change marker color based on active stepper step

* test: test lifecycle component
---
 libs/portal-integration-angular/src/index.ts  |  1 +
 .../lifecycle/lifecycle.component.html        | 13 ++++
 .../lifecycle/lifecycle.component.spec.ts     | 76 +++++++++++++++++++
 .../lifecycle/lifecycle.component.stories.ts  | 57 ++++++++++++++
 .../lifecycle/lifecycle.component.ts          | 16 ++++
 .../src/lib/core/portal-core.module.ts        |  3 +
 .../src/lib/core/primeng.module.ts            |  3 +
 .../testing/index.ts                          |  1 +
 .../testing/lifecycle.harness.ts              |  8 ++
 9 files changed, 178 insertions(+)
 create mode 100644 libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.html
 create mode 100644 libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.spec.ts
 create mode 100644 libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.stories.ts
 create mode 100644 libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.ts
 create mode 100644 libs/portal-integration-angular/testing/lifecycle.harness.ts

diff --git a/libs/portal-integration-angular/src/index.ts b/libs/portal-integration-angular/src/index.ts
index e4189909..939d6229 100644
--- a/libs/portal-integration-angular/src/index.ts
+++ b/libs/portal-integration-angular/src/index.ts
@@ -57,6 +57,7 @@ export * from './lib/core/components/loading-indicator/loading-indicator.compone
 export * from './lib/core/components/content-container/content-container.component'
 export * from './lib/core/components/content/content.component'
 export * from './lib/core/components/create-or-edit-search-config-dialog/create-or-edit-search-config-dialog.component'
+export * from './lib/core/components/lifecycle/lifecycle.component'
 
 // services
 export * from './lib/services/app.menu.service'
diff --git a/libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.html b/libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.html
new file mode 100644
index 00000000..0d3daff1
--- /dev/null
+++ b/libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.html
@@ -0,0 +1,13 @@
+<p-timeline [value]="steps">
+  <ng-template pTemplate="marker" let-step>
+    <span class="p-timeline-event-marker" [ngClass]="activeStepId && activeStepId === step.id ? 'bg-primary' : ''"></span>
+</ng-template>
+  <ng-template pTemplate="content" let-step>
+    <div class="pb-4 h-full">
+        <div class="card h-full" [ngClass]="activeStepId && activeStepId === step.id ? 'bg-primary' : ''">
+            <p class="font-bold text-xl" [ngClass]="step.details ? 'mb-2' : ''">{{ step.title }}</p>
+            <p *ngIf="step.details" [ngClass]="activeStepId && activeStepId === step.id ? '' : 'text-color-secondary'">{{ step.details }}</p>
+        </div>
+    </div>
+  </ng-template>
+</p-timeline>
diff --git a/libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.spec.ts b/libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.spec.ts
new file mode 100644
index 00000000..02c84468
--- /dev/null
+++ b/libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.spec.ts
@@ -0,0 +1,76 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { LifecycleComponent, LifecycleStep } from './lifecycle.component'
+import { TimelineModule } from 'primeng/timeline'
+import { LifecycleHarness, TestbedHarnessEnvironment } from '../../../../../testing'
+import { PrimeNgModule } from '../../primeng.module'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { PortalCoreModule } from '../../portal-core.module'
+
+const mockSteps: LifecycleStep[] = [
+  {
+    id: 'test1',
+    title: 'Test 1',
+  },
+  {
+    id: 'test2',
+    title: 'Test 2',
+    details: 'Test 2 description',
+  },
+  {
+    id: 'test3',
+    title: 'Test 3',
+  },
+]
+
+describe('LifecycleComponent', () => {
+  let component: LifecycleComponent
+  let fixture: ComponentFixture<LifecycleComponent>
+  let lifecycle: LifecycleHarness
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LifecycleComponent],
+      imports: [TimelineModule, PrimeNgModule, BrowserAnimationsModule, PortalCoreModule],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(LifecycleComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+    lifecycle = await TestbedHarnessEnvironment.harnessForFixture(fixture, LifecycleHarness)
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+    expect(lifecycle).toBeTruthy()
+  })
+
+  it('should not render any initial lifecycle steps', async () => {
+    const steps = await lifecycle.getSteps()
+    expect(steps.length).toBe(0)
+  })
+
+  it('should render given lifecycle steps', async () => {
+    component.steps = mockSteps
+    const steps = await lifecycle.getSteps()
+    const highlightedSteps = await lifecycle.getHighlightedSteps()
+    expect(steps.length).toBe(3)
+    expect(highlightedSteps.length).toBe(0)
+    mockSteps.forEach(async (step, index) => {
+      expect(await steps[index].text()).toEqual(step.title + (step.details ?? ''))
+    })
+  })
+
+  it('should highlight a given lifecycle step', async () => {
+    component.steps = mockSteps
+    component.activeStepId = 'test2'
+    const steps = await lifecycle.getSteps()
+    const highlightedSteps = await lifecycle.getHighlightedSteps()
+    mockSteps.forEach(async (step, index) => {
+      if(step.id == component.activeStepId) {
+        expect(await steps[index].hasClass('bg-primary')).toEqual(true)
+      }
+    })
+    expect(steps.length).toBe(3)
+    expect(highlightedSteps.length).toBe(1) 
+  })
+})
diff --git a/libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.stories.ts b/libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.stories.ts
new file mode 100644
index 00000000..f28ac41e
--- /dev/null
+++ b/libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.stories.ts
@@ -0,0 +1,57 @@
+import { importProvidersFrom } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { Meta, StoryFn, applicationConfig, moduleMetadata } from '@storybook/angular'
+import { StorybookTranslateModule } from '../../storybook-translate.module'
+import { LifecycleComponent, LifecycleStep } from './lifecycle.component'
+import { TimelineModule } from 'primeng/timeline'
+import { CardModule } from 'primeng/card'
+
+export default {
+  title: 'LifecycleComponent',
+  component: LifecycleComponent,
+  decorators: [
+    applicationConfig({
+      providers: [importProvidersFrom(BrowserModule), importProvidersFrom(BrowserAnimationsModule)],
+    }),
+    moduleMetadata({
+      declarations: [LifecycleComponent],
+      imports: [StorybookTranslateModule, TimelineModule, CardModule],
+    }),
+  ],
+} as Meta<LifecycleComponent>
+
+const Template: StoryFn<LifecycleComponent> = (args: LifecycleComponent) => ({
+  props: args,
+})
+
+const mockData: LifecycleStep[] = [
+    {
+        id: "todo",
+        title: "ToDo"
+    },
+    {
+        id: "in_progress",
+        title: "In Progress",
+        details: "This event is currently in progress"
+    },
+    {
+        id: "done",
+        title: "Done"
+    }
+]
+
+export const WithoutHighlightedStep = {
+  render: Template,
+  args: {
+    steps: mockData
+  }
+}
+
+export const WithHighlightedStep = {
+    render: Template,
+    args: {
+      steps: mockData,
+      activeStepId: 'in_progress'
+    }
+  }
\ No newline at end of file
diff --git a/libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.ts b/libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.ts
new file mode 100644
index 00000000..cfdb33be
--- /dev/null
+++ b/libs/portal-integration-angular/src/lib/core/components/lifecycle/lifecycle.component.ts
@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core'
+
+export interface LifecycleStep {
+  id: string
+  title: string,
+  details?: string,
+}
+
+@Component({
+  selector: 'ocx-lifecycle',
+  templateUrl: './lifecycle.component.html',
+})
+export class LifecycleComponent {
+  @Input() steps: LifecycleStep[] = []
+  @Input() activeStepId: string | undefined
+}
diff --git a/libs/portal-integration-angular/src/lib/core/portal-core.module.ts b/libs/portal-integration-angular/src/lib/core/portal-core.module.ts
index 393b6a49..059227d8 100644
--- a/libs/portal-integration-angular/src/lib/core/portal-core.module.ts
+++ b/libs/portal-integration-angular/src/lib/core/portal-core.module.ts
@@ -87,6 +87,7 @@ import { createTranslateLoader } from './utils/create-translate-loader.utils'
 import { MessageService } from 'primeng/api'
 import { TranslationCacheService } from '../services/translation-cache.service'
 import { CreateOrEditSearchConfigDialogComponent } from './components/create-or-edit-search-config-dialog/create-or-edit-search-config-dialog.component'
+import { LifecycleComponent } from './components/lifecycle/lifecycle.component'
 
 export class PortalMissingTranslationHandler implements MissingTranslationHandler {
   handle(params: MissingTranslationHandlerParams) {
@@ -169,6 +170,7 @@ export class PortalMissingTranslationHandler implements MissingTranslationHandle
     OcxContentContainerComponent,
     SearchConfigComponent,
     CreateOrEditSearchConfigDialogComponent,
+    LifecycleComponent,
   ],
   providers: [
     {
@@ -240,6 +242,7 @@ export class PortalMissingTranslationHandler implements MissingTranslationHandle
     OcxContentContainerComponent,
     SearchConfigComponent,
     CreateOrEditSearchConfigDialogComponent,
+    LifecycleComponent
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   entryComponents: [ColumnTogglerComponent],
diff --git a/libs/portal-integration-angular/src/lib/core/primeng.module.ts b/libs/portal-integration-angular/src/lib/core/primeng.module.ts
index ec99f0a7..3983fe84 100644
--- a/libs/portal-integration-angular/src/lib/core/primeng.module.ts
+++ b/libs/portal-integration-angular/src/lib/core/primeng.module.ts
@@ -23,6 +23,7 @@ import { InputSwitchModule } from 'primeng/inputswitch'
 import { DataViewModule } from 'primeng/dataview'
 import { ChartModule } from 'primeng/chart'
 import { CheckboxModule } from 'primeng/checkbox'
+import { TimelineModule } from 'primeng/timeline'
 
 @NgModule({
   imports: [
@@ -51,6 +52,7 @@ import { CheckboxModule } from 'primeng/checkbox'
     ChartModule,
     MessageModule,
     CheckboxModule,
+    TimelineModule,
   ],
   exports: [
     BadgeModule,
@@ -78,6 +80,7 @@ import { CheckboxModule } from 'primeng/checkbox'
     ChartModule,
     MessageModule,
     CheckboxModule,
+    TimelineModule,
   ],
 })
 export class PrimeNgModule {}
diff --git a/libs/portal-integration-angular/testing/index.ts b/libs/portal-integration-angular/testing/index.ts
index d2744661..ecd99352 100644
--- a/libs/portal-integration-angular/testing/index.ts
+++ b/libs/portal-integration-angular/testing/index.ts
@@ -35,6 +35,7 @@ export * from './span.harness'
 export * from './page-header.harness'
 export * from './p-tableCheckbox.harness'
 export * from './create-or-edit-search-config-dialog.harness'
+export * from './lifecycle.harness'
 
 export * from '@angular/cdk/testing'
 export * from '@angular/cdk/testing/testbed'
diff --git a/libs/portal-integration-angular/testing/lifecycle.harness.ts b/libs/portal-integration-angular/testing/lifecycle.harness.ts
new file mode 100644
index 00000000..4365e479
--- /dev/null
+++ b/libs/portal-integration-angular/testing/lifecycle.harness.ts
@@ -0,0 +1,8 @@
+import { ContentContainerComponentHarness } from "@angular/cdk/testing"
+
+export class LifecycleHarness extends ContentContainerComponentHarness {
+    static hostSelector = 'ocx-lifecycle'
+
+    getSteps = this.locatorForAll('.p-timeline-event-content .card')
+    getHighlightedSteps = this.locatorForAll('.p-timeline-event-content .card.bg-primary')
+}
\ No newline at end of file

From 56e09acc4d312b9006da378817fa944f3f1eec59 Mon Sep 17 00:00:00 2001
From: Annika Nowak <139357202+anninowak@users.noreply.github.com>
Date: Wed, 28 Feb 2024 14:55:58 +0100
Subject: [PATCH 2/3] fix: adapt SearchConfig interface and use the type
 PrimeIcon for icons (#152)

* fix: adapt SearchConfig interface and use the type PrimeIcon for icons
---
 libs/portal-integration-angular/src/index.ts  |  1 +
 .../button-dialog.component.html              | 48 +++++++-------
 .../data-layout-selection.component.ts        |  5 +-
 .../data-view-controls.component.ts           | 13 +++-
 .../components/diagram/diagram.component.ts   | 19 ++++--
 .../page-header/page-header.component.spec.ts | 64 +++++++------------
 .../page-header/page-header.component.ts      |  3 +-
 .../search-config.component.spec.ts           |  8 +--
 .../src/lib/core/utils/primeicon.utils.ts     |  5 ++
 .../src/lib/model/button-dialog.ts            |  4 +-
 .../src/lib/model/search-config.ts            |  4 +-
 .../src/lib/services/portal-dialog.service.ts |  4 +-
 .../testing/data-layout-selection.harness.ts  |  3 +-
 .../testing/index.ts                          |  2 +
 .../testing/utils/primeicon.utils.ts          |  3 +
 package-lock.json                             |  4 +-
 16 files changed, 102 insertions(+), 88 deletions(-)
 create mode 100644 libs/portal-integration-angular/src/lib/core/utils/primeicon.utils.ts
 create mode 100644 libs/portal-integration-angular/testing/utils/primeicon.utils.ts

diff --git a/libs/portal-integration-angular/src/index.ts b/libs/portal-integration-angular/src/index.ts
index 939d6229..55151a9f 100644
--- a/libs/portal-integration-angular/src/index.ts
+++ b/libs/portal-integration-angular/src/index.ts
@@ -128,3 +128,4 @@ export * from './lib/core/utils/add-initialize-module-guard.utils'
 export * from './lib/core/utils/translate-service-initializer.utils'
 export * from './lib/core/utils/portal-api-configuration.utils'
 export * from './lib/core/utils/caching-translate-loader.utils'
+export * from './lib/core/utils/primeicon.utils'
diff --git a/libs/portal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.html b/libs/portal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.html
index d5e3ce3b..0f8b1934 100644
--- a/libs/portal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.html
+++ b/libs/portal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.html
@@ -1,25 +1,25 @@
 <div>
-    <ng-container #container></ng-container>
-    <ng-content></ng-content>
-    <div class="w-full flex justify-content-end mb-3">
-        <button
-            id="buttonDialogSecondaryButton"
-            pButton 
-            *ngIf="dialogData.config.secondaryButtonIncluded"
-            class="mx-2"
-            [icon]="dialogData.config.secondaryButtonDetails!.icon !== undefined ? dialogData.config.secondaryButtonDetails!.icon : ''"
-            (click)="secondaryButtonAction()"
-            [label]="dialogData.config.secondaryButtonDetails!.key | translate:dialogData.config.secondaryButtonDetails?.parameters"
-            [disabled]="secondaryButtonDisabled$ | async"
-        ></button>
-        <button 
-            id="buttonDialogPrimaryButton"
-            pButton
-            class="mx-2"
-            [icon]="dialogData.config.primaryButtonDetails!.icon !== undefined ? dialogData.config.primaryButtonDetails!.icon : ''"
-            (click)="primaryButtonAction()"
-            [label]="dialogData.config.primaryButtonDetails!.key | translate:dialogData.config.primaryButtonDetails?.parameters"
-            [disabled]="primaryButtonDisabled$ | async"
-        ></button>
-    </div>
-</div>
\ No newline at end of file
+  <ng-container #container></ng-container>
+  <ng-content></ng-content>
+  <div class="w-full flex justify-content-end mb-3">
+    <button
+      id="buttonDialogSecondaryButton"
+      pButton
+      *ngIf="dialogData.config.secondaryButtonIncluded"
+      class="mx-2"
+      [icon]="dialogData.config.secondaryButtonDetails!.icon !== undefined ? dialogData.config.secondaryButtonDetails!.icon : ''"
+      (click)="secondaryButtonAction()"
+      [label]="dialogData.config.secondaryButtonDetails!.key | translate:dialogData.config.secondaryButtonDetails?.parameters"
+      [disabled]="secondaryButtonDisabled$ | async"
+    ></button>
+    <button
+      id="buttonDialogPrimaryButton"
+      pButton
+      class="mx-2"
+      [icon]="dialogData.config.primaryButtonDetails!.icon !== undefined ? dialogData.config.primaryButtonDetails!.icon : ''"
+      (click)="primaryButtonAction()"
+      [label]="dialogData.config.primaryButtonDetails!.key | translate:dialogData.config.primaryButtonDetails?.parameters"
+      [disabled]="primaryButtonDisabled$ | async"
+    ></button>
+  </div>
+</div>
diff --git a/libs/portal-integration-angular/src/lib/core/components/data-layout-selection/data-layout-selection.component.ts b/libs/portal-integration-angular/src/lib/core/components/data-layout-selection/data-layout-selection.component.ts
index 1c2cf7e7..c706e006 100644
--- a/libs/portal-integration-angular/src/lib/core/components/data-layout-selection/data-layout-selection.component.ts
+++ b/libs/portal-integration-angular/src/lib/core/components/data-layout-selection/data-layout-selection.component.ts
@@ -1,8 +1,9 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { PrimeIcons } from 'primeng/api'
+import { PrimeIcon } from '../../utils/primeicon.utils'
 
 interface ViewingLayouts {
-  icon: PrimeIcons
+  icon: PrimeIcon
   layout: 'grid' | 'list' | 'table'
   title?: string
   titleKey: string
@@ -39,7 +40,7 @@ export class DataLayoutSelectionComponent implements OnInit {
     this.layout = 'table'
   }
 
-  onDataViewLayoutChange(event: { icon: PrimeIcons; layout: 'grid' | 'list' | 'table' }): void {
+  onDataViewLayoutChange(event: { icon: PrimeIcon; layout: 'grid' | 'list' | 'table' }): void {
     this.dataViewLayoutChange.emit(event.layout)
   }
 }
diff --git a/libs/portal-integration-angular/src/lib/core/components/data-view-controls/data-view-controls.component.ts b/libs/portal-integration-angular/src/lib/core/components/data-view-controls/data-view-controls.component.ts
index c9f6e7ca..3ced3701 100644
--- a/libs/portal-integration-angular/src/lib/core/components/data-view-controls/data-view-controls.component.ts
+++ b/libs/portal-integration-angular/src/lib/core/components/data-view-controls/data-view-controls.component.ts
@@ -6,15 +6,22 @@ import { ColumnViewTemplate } from '../../../model/column-view-template'
 import { ColumnTogglerComponent } from './column-toggler-component/column-toggler.component'
 import { ViewTemplatePickerComponent } from './view-template-picker/view-template-picker.component'
 import { PrimeIcons } from 'primeng/api'
+import { PrimeIcon } from '../../utils/primeicon.utils'
 
 interface ViewingModes {
-  icon: PrimeIcons
+  icon: PrimeIcon
   mode: string
   title?: string
   titleKey?: string
 }
 
-const ALL_VIEW_MODES = [
+type ViewMode = {
+  icon: PrimeIcon
+  mode: string
+  titleKey: string
+}
+
+const ALL_VIEW_MODES: ViewMode[] = [
   { icon: PrimeIcons.LIST, mode: 'list', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.LIST' },
   { icon: PrimeIcons.TH_LARGE, mode: 'grid', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.GRID' },
   { icon: PrimeIcons.TABLE, mode: 'table', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.TABLE' },
@@ -249,7 +256,7 @@ export class DataViewControlsComponent implements OnInit, OnChanges {
       })
   }
 
-  viewModeChange(event: { icon: PrimeIcons; mode: string }): void {
+  viewModeChange(event: { icon: PrimeIcon; mode: string }): void {
     this.dataViewChange.emit(event.mode)
     this.enableToggleColumnButton(event.mode)
   }
diff --git a/libs/portal-integration-angular/src/lib/core/components/diagram/diagram.component.ts b/libs/portal-integration-angular/src/lib/core/components/diagram/diagram.component.ts
index 4d8c873f..f050e15c 100644
--- a/libs/portal-integration-angular/src/lib/core/components/diagram/diagram.component.ts
+++ b/libs/portal-integration-angular/src/lib/core/components/diagram/diagram.component.ts
@@ -6,9 +6,10 @@ import { PrimeIcons } from 'primeng/api'
 import { DiagramData } from '../../../model/diagram-data'
 import { DiagramType } from '../../../model/diagram-type'
 import { ColorUtils } from '../../utils/colorutils'
+import { PrimeIcon } from '../../utils/primeicon.utils'
 
 export interface DiagramLayouts {
-  icon: PrimeIcons
+  icon: PrimeIcon
   layout: DiagramType
   title?: string
   titleKey: string
@@ -16,14 +17,22 @@ export interface DiagramLayouts {
 
 const allDiagramTypes: DiagramLayouts[] = [
   { icon: PrimeIcons.CHART_PIE, layout: DiagramType.PIE, titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.PIE' },
-  { icon: PrimeIcons.BARS, layout: DiagramType.HORIZONTAL_BAR, titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.HORIZONTAL_BAR' },
-  { icon: PrimeIcons.CHART_BAR, layout: DiagramType.VERTICAL_BAR, titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.VERTICAL_BAR' },
+  {
+    icon: PrimeIcons.BARS,
+    layout: DiagramType.HORIZONTAL_BAR,
+    titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.HORIZONTAL_BAR',
+  },
+  {
+    icon: PrimeIcons.CHART_BAR,
+    layout: DiagramType.VERTICAL_BAR,
+    titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.VERTICAL_BAR',
+  },
 ]
 
 @Component({
   selector: 'ocx-diagram',
   templateUrl: './diagram.component.html',
-  styleUrls: ['./diagram.component.scss']
+  styleUrls: ['./diagram.component.scss'],
 })
 export class DiagramComponent implements OnInit, OnChanges {
   @Input() data: DiagramData[] | undefined
@@ -41,7 +50,7 @@ export class DiagramComponent implements OnInit, OnChanges {
     this.chartType = this.diagramTypeToChartType(value)
   }
   private _supportedDiagramTypes: DiagramType[] = []
-  @Input() 
+  @Input()
   get supportedDiagramTypes(): DiagramType[] {
     return this._supportedDiagramTypes
   }
diff --git a/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.spec.ts b/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.spec.ts
index ebb3f250..90345b46 100644
--- a/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.spec.ts
+++ b/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed, getTestBed } from '@angular/core/testing'
-import { Action, PageHeaderComponent } from './page-header.component'
+import { Action, ObjectDetailItem, PageHeaderComponent } from './page-header.component'
 import { RouterTestingModule } from '@angular/router/testing'
 import { ConfigurationService } from '../../../services/configuration.service'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
@@ -115,22 +115,14 @@ describe('PageHeaderComponent', () => {
   })
 
   it('should check permissions and render buttons accordingly', async () => {
-    expect(
-      await pageHeaderHarness.getInlineActionButtons()
-    ).toHaveLength(0)
-    expect(
-      await pageHeaderHarness.getOverflowActionButtons()
-    ).toHaveLength(0)
+    expect(await pageHeaderHarness.getInlineActionButtons()).toHaveLength(0)
+    expect(await pageHeaderHarness.getOverflowActionButtons()).toHaveLength(0)
 
     component.actions = mockActions
 
-    expect(
-      await pageHeaderHarness.getInlineActionButtons()
-    ).toHaveLength(1)
+    expect(await pageHeaderHarness.getInlineActionButtons()).toHaveLength(1)
     expect(await pageHeaderHarness.getElementByTitle('My Test Action')).toBeTruthy()
-    expect(
-      await pageHeaderHarness.getOverflowActionButtons()
-    ).toHaveLength(1)
+    expect(await pageHeaderHarness.getOverflowActionButtons()).toHaveLength(1)
     expect(await pageHeaderHarness.getElementByTitle('More actions')).toBeTruthy()
     expect(userServiceSpy).toHaveBeenCalledTimes(3)
   })
@@ -140,27 +132,19 @@ describe('PageHeaderComponent', () => {
 
     userServiceSpy.mockReturnValue(false)
 
-    expect(
-      await pageHeaderHarness.getInlineActionButtons()
-    ).toHaveLength(0)
-    expect(
-      await pageHeaderHarness.getOverflowActionButtons()
-    ).toHaveLength(0)
+    expect(await pageHeaderHarness.getInlineActionButtons()).toHaveLength(0)
+    expect(await pageHeaderHarness.getOverflowActionButtons()).toHaveLength(0)
 
     component.actions = mockActions
 
-    expect(
-      await pageHeaderHarness.getInlineActionButtons()
-    ).toHaveLength(0)
+    expect(await pageHeaderHarness.getInlineActionButtons()).toHaveLength(0)
     expect(await pageHeaderHarness.getElementByTitle('My Test Action')).toBeFalsy()
-    expect(
-      await pageHeaderHarness.getOverflowActionButtons()
-    ).toHaveLength(0)
+    expect(await pageHeaderHarness.getOverflowActionButtons()).toHaveLength(0)
     expect(await pageHeaderHarness.getElementByTitle('More actions')).toBeFalsy()
     expect(userServiceSpy).toHaveBeenCalledTimes(3)
   })
 
-  it("should render objectDetails as object info in the page header", async () => {
+  it('should render objectDetails as object info in the page header', async () => {
     const objectDetailsWithoutIcons = [
       {
         label: 'Venue',
@@ -174,7 +158,7 @@ describe('PageHeaderComponent', () => {
     expect((await pageHeaderHarness.getObjectInfos()).length).toEqual(0)
 
     component.objectDetails = objectDetailsWithoutIcons
-    
+
     expect((await pageHeaderHarness.getObjectInfos()).length).toEqual(2)
     const objectDetailLabels = await pageHeaderHarness.getObjectDetailLabels()
     const objectDetailValues = await pageHeaderHarness.getObjectDetailValues()
@@ -192,8 +176,8 @@ describe('PageHeaderComponent', () => {
     })
   })
 
-  it("should render objectDetails with icons as object info in the page header", async () => {
-    const objectDetailsWithIcons = [
+  it('should render objectDetails with icons as object info in the page header', async () => {
+    const objectDetailsWithIcons: ObjectDetailItem[] = [
       {
         label: 'Venue',
         value: 'AIE Munich',
@@ -201,20 +185,20 @@ describe('PageHeaderComponent', () => {
       {
         label: 'Status',
         value: 'Confirmed',
-        icon: PrimeIcons.CHECK
+        icon: PrimeIcons.CHECK,
       },
       {
         label: 'Done?',
-        icon: PrimeIcons.EXCLAMATION_CIRCLE
+        icon: PrimeIcons.EXCLAMATION_CIRCLE,
       },
       {
-        label: 'Empty'
-      }
+        label: 'Empty',
+      },
     ]
     expect((await pageHeaderHarness.getObjectInfos()).length).toEqual(0)
 
     component.objectDetails = objectDetailsWithIcons
-    
+
     expect((await pageHeaderHarness.getObjectInfos()).length).toEqual(4)
     const objectDetailLabels = await pageHeaderHarness.getObjectDetailLabels()
     const objectDetailValues = await pageHeaderHarness.getObjectDetailValues()
@@ -228,7 +212,7 @@ describe('PageHeaderComponent', () => {
     })
 
     objectDetailValues.forEach(async (value, i) => {
-      if(objectDetailsWithIcons[i].value) {
+      if (objectDetailsWithIcons[i].value) {
         expect(await value.text()).toEqual(objectDetailsWithIcons[i].value)
       }
     })
@@ -248,8 +232,8 @@ describe('PageHeaderComponent', () => {
 
     const menuItems = await pageHeaderHarness.getOverFlowMenuItems()
     expect(menuItems.length).toBe(2)
-    expect(await menuItems[0].getText()).toBe("My Test Overflow Action")
-    expect(await menuItems[1].getText()).toBe("My Test Overflow Disabled Action")
+    expect(await menuItems[0].getText()).toBe('My Test Overflow Action')
+    expect(await menuItems[1].getText()).toBe('My Test Overflow Disabled Action')
   })
 
   it('should use provided action callback on overflow button click', async () => {
@@ -258,7 +242,7 @@ describe('PageHeaderComponent', () => {
     component.actions = mockActions
 
     const menuOverflowButtons = await pageHeaderHarness.getOverflowActionButtons()
-    
+
     expect(menuOverflowButtons).toBeTruthy()
     expect(menuOverflowButtons.length).toBe(1)
     await menuOverflowButtons[0].click()
@@ -266,7 +250,7 @@ describe('PageHeaderComponent', () => {
     const menuItems = await pageHeaderHarness.getOverFlowMenuItems()
     expect(menuItems.length).toBe(2)
     const enabledActionElement = await menuItems[0].host()
-    expect(await(enabledActionElement.hasClass('p-disabled'))).toBe(false)
+    expect(await enabledActionElement.hasClass('p-disabled')).toBe(false)
     await enabledActionElement.click()
     expect(console.log).toHaveBeenCalledTimes(1)
   })
@@ -283,7 +267,7 @@ describe('PageHeaderComponent', () => {
 
     const overFlowMenuItems = await pageHeaderHarness.getOverFlowMenuItems()
     const disabledActionElement = overFlowMenuItems[1]
-    
+
     expect(overFlowMenuItems).toBeTruthy()
     expect(overFlowMenuItems?.length).toBe(2)
     expect(disabledActionElement).toBeTruthy()
diff --git a/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.ts b/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.ts
index 59e480f9..859d5ca4 100644
--- a/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.ts
+++ b/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.ts
@@ -17,6 +17,7 @@ import { BreadcrumbService } from '../../../services/breadcrumb.service'
 import { TranslateService } from '@ngx-translate/core'
 import { AppStateService } from '../../../services/app-state.service'
 import { UserService } from '../../../services/user.service'
+import { PrimeIcon } from '../../utils/primeicon.utils'
 
 /**
  * Action definition.
@@ -46,7 +47,7 @@ export interface ObjectDetailItem {
   label: string
   value?: string
   tooltip?: string
-  icon?: PrimeIcons
+  icon?: PrimeIcon
   labelPipe?: Type<any>
   valuePipe?: Type<any>
   valuePipeArgs?: string
diff --git a/libs/portal-integration-angular/src/lib/core/components/search-config/search-config.component.spec.ts b/libs/portal-integration-angular/src/lib/core/components/search-config/search-config.component.spec.ts
index 50de2329..7f7789b9 100644
--- a/libs/portal-integration-angular/src/lib/core/components/search-config/search-config.component.spec.ts
+++ b/libs/portal-integration-angular/src/lib/core/components/search-config/search-config.component.spec.ts
@@ -34,16 +34,16 @@ describe('SearchConfigComponent', () => {
     {
       id: '01',
       name: 'Basic search config',
-      version: 1,
-      readonly: true,
+      fieldListVersion: 1,
+      isReadonly: true,
       isAdvanced: true,
       values: searchConfigurations[0],
     },
     {
       id: '02',
       name: 'Adapted search config',
-      version: 1,
-      readonly: true,
+      fieldListVersion: 1,
+      isReadonly: true,
       isAdvanced: true,
       values: searchConfigurations[1],
     },
diff --git a/libs/portal-integration-angular/src/lib/core/utils/primeicon.utils.ts b/libs/portal-integration-angular/src/lib/core/utils/primeicon.utils.ts
new file mode 100644
index 00000000..f8fa2c41
--- /dev/null
+++ b/libs/portal-integration-angular/src/lib/core/utils/primeicon.utils.ts
@@ -0,0 +1,5 @@
+import { PrimeIcons } from 'primeng/api'
+/**
+ * @example let myIcon : PrimeIcon = PrimeIcons.myIcon
+ */
+export type PrimeIcon = (typeof PrimeIcons)[keyof Omit<typeof PrimeIcons, 'prototype'>]
diff --git a/libs/portal-integration-angular/src/lib/model/button-dialog.ts b/libs/portal-integration-angular/src/lib/model/button-dialog.ts
index ee383173..2e5edaae 100644
--- a/libs/portal-integration-angular/src/lib/model/button-dialog.ts
+++ b/libs/portal-integration-angular/src/lib/model/button-dialog.ts
@@ -1,5 +1,5 @@
 import { Type } from '@angular/core'
-import { PrimeIcons } from 'primeng/api'
+import { PrimeIcon } from '../core/utils/primeicon.utils'
 
 /**
  * Object describing details for button rendering containing key for translation, optional icon and optional parameters for translation
@@ -22,7 +22,7 @@ import { PrimeIcons } from 'primeng/api'
  */
 export interface ButtonDialogButtonDetails {
   key: string
-  icon?: PrimeIcons
+  icon?: PrimeIcon
   parameters?: Record<string, unknown>
 }
 
diff --git a/libs/portal-integration-angular/src/lib/model/search-config.ts b/libs/portal-integration-angular/src/lib/model/search-config.ts
index a88a91a5..95c35bb3 100644
--- a/libs/portal-integration-angular/src/lib/model/search-config.ts
+++ b/libs/portal-integration-angular/src/lib/model/search-config.ts
@@ -2,8 +2,8 @@ export type SearchConfigPrimitive = string | number | bigint | boolean | Date |
 export interface SearchConfig {
   id: string
   name: string
-  version: number
-  readonly: boolean
+  fieldListVersion: number
+  isReadonly: boolean
   isAdvanced: boolean
   values: Record<string, SearchConfigPrimitive>
 }
diff --git a/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts b/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts
index d072dcdb..86c87b61 100644
--- a/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts
+++ b/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts
@@ -6,7 +6,7 @@ import { DialogService, DynamicDialogConfig, DynamicDialogRef } from 'primeng/dy
 import { ButtonDialogComponent } from '../core/components/button-dialog/button-dialog.component'
 import { ButtonDialogButtonDetails, ButtonDialogData } from '../model/button-dialog'
 import { DialogMessageContentComponent } from '../core/components/button-dialog/dialog-message-content/dialog-message-content.component'
-import { PrimeIcons } from 'primeng/api'
+import { PrimeIcon } from '../core/utils/primeicon.utils'
 
 /**
  * Object containing key for translation with parameters object for translation
@@ -62,7 +62,7 @@ type TranslationKey = string | TranslationKeyWithParameters
  * }
  * ```
  */
-type DialogMessage = { message: TranslationKey; icon: PrimeIcons }
+type DialogMessage = { message: TranslationKey; icon: PrimeIcon }
 
 /**
  * Implement via component class to be displayed by {@link PortalDialogService.openDialog}
diff --git a/libs/portal-integration-angular/testing/data-layout-selection.harness.ts b/libs/portal-integration-angular/testing/data-layout-selection.harness.ts
index dd179eb7..3e7da442 100644
--- a/libs/portal-integration-angular/testing/data-layout-selection.harness.ts
+++ b/libs/portal-integration-angular/testing/data-layout-selection.harness.ts
@@ -1,6 +1,7 @@
 import { ContentContainerComponentHarness, TestElement } from '@angular/cdk/testing'
 import { PSelectButtonHarness } from './primeng/p-selectButton.harness'
 import { PrimeIcons } from 'primeng/api'
+import { PrimeIcon } from './utils/primeicon.utils'
 
 export class DataLayoutSelectionHarness extends ContentContainerComponentHarness {
   static hostSelector = 'ocx-data-layout-selection'
@@ -29,7 +30,7 @@ export class DataLayoutSelectionHarness extends ContentContainerComponentHarness
     await (await this.getListLayoutSelectionButton())?.click()
   }
 
-  private async isDesiredButton(value: TestElement[], icon: PrimeIcons) {
+  private async isDesiredButton(value: TestElement[], icon: PrimeIcon) {
     for (let index = 0; index < value.length; index++) {
       if ((await value[index].getAttribute('aria-labelledby')) === icon) {
         return value[index]
diff --git a/libs/portal-integration-angular/testing/index.ts b/libs/portal-integration-angular/testing/index.ts
index ecd99352..4dc030a1 100644
--- a/libs/portal-integration-angular/testing/index.ts
+++ b/libs/portal-integration-angular/testing/index.ts
@@ -37,5 +37,7 @@ export * from './p-tableCheckbox.harness'
 export * from './create-or-edit-search-config-dialog.harness'
 export * from './lifecycle.harness'
 
+export * from './utils/primeicon.utils'
+
 export * from '@angular/cdk/testing'
 export * from '@angular/cdk/testing/testbed'
diff --git a/libs/portal-integration-angular/testing/utils/primeicon.utils.ts b/libs/portal-integration-angular/testing/utils/primeicon.utils.ts
new file mode 100644
index 00000000..6386a7d2
--- /dev/null
+++ b/libs/portal-integration-angular/testing/utils/primeicon.utils.ts
@@ -0,0 +1,3 @@
+import { PrimeIcons } from 'primeng/api'
+
+export type PrimeIcon = (typeof PrimeIcons)[keyof Omit<typeof PrimeIcons, 'prototype'>]
diff --git a/package-lock.json b/package-lock.json
index 337af6ef..2e0e611a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@onecx/onecx-portal-ui-libs",
-  "version": "4.5.0",
+  "version": "4.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@onecx/onecx-portal-ui-libs",
-      "version": "4.5.0",
+      "version": "4.8.0",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {

From f2e760665cb4313385b7a4850dde9d71eca637ac Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Wed, 28 Feb 2024 14:07:22 +0000
Subject: [PATCH 3/3] chore(release): -v4.9.0 [skip ci]

## [4.9.0](https://github.com/onecx/onecx-portal-ui-libs/compare/v4.8.0...v4.9.0) (2024-02-28)

### Features

* column group floating label displayed ([#148](https://github.com/onecx/onecx-portal-ui-libs/issues/148)) ([70cf90e](https://github.com/onecx/onecx-portal-ui-libs/commit/70cf90ed8f906d640ea7280ec850a377b6b7f785))
* lifecycle component ([#153](https://github.com/onecx/onecx-portal-ui-libs/issues/153)) ([c9c8cdf](https://github.com/onecx/onecx-portal-ui-libs/commit/c9c8cdfbc2071d65e21d3f809d97355e1201e079))
* search header allows to provide subheader now ([#147](https://github.com/onecx/onecx-portal-ui-libs/issues/147)) ([d4bf6c5](https://github.com/onecx/onecx-portal-ui-libs/commit/d4bf6c5edb15f49f293290ddd2fdd4639e44fcd8))

### Bug Fixes

* adapt SearchConfig interface and use the type PrimeIcon for icons ([#152](https://github.com/onecx/onecx-portal-ui-libs/issues/152)) ([56e09ac](https://github.com/onecx/onecx-portal-ui-libs/commit/56e09acc4d312b9006da378817fa944f3f1eec59))

### Refactoring

* migrate icons in TS to PrimeIcons ([#151](https://github.com/onecx/onecx-portal-ui-libs/issues/151)) ([186fae8](https://github.com/onecx/onecx-portal-ui-libs/commit/186fae874a752f734b87c45d35a9c4c5c0e79bc2))
---
 CHANGELOG.md                                 | 19 +++++++++++++++++++
 libs/accelerator/package.json                |  2 +-
 libs/integration-interface/package.json      |  2 +-
 libs/keycloak-auth/package.json              |  2 +-
 libs/portal-integration-angular/package.json |  2 +-
 libs/portal-layout-styles/package.json       |  2 +-
 package.json                                 |  2 +-
 7 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0adb7f44..5949d81a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,22 @@
+## [4.9.0](https://github.com/onecx/onecx-portal-ui-libs/compare/v4.8.0...v4.9.0) (2024-02-28)
+
+
+### Features
+
+* column group floating label displayed ([#148](https://github.com/onecx/onecx-portal-ui-libs/issues/148)) ([70cf90e](https://github.com/onecx/onecx-portal-ui-libs/commit/70cf90ed8f906d640ea7280ec850a377b6b7f785))
+* lifecycle component ([#153](https://github.com/onecx/onecx-portal-ui-libs/issues/153)) ([c9c8cdf](https://github.com/onecx/onecx-portal-ui-libs/commit/c9c8cdfbc2071d65e21d3f809d97355e1201e079))
+* search header allows to provide subheader now ([#147](https://github.com/onecx/onecx-portal-ui-libs/issues/147)) ([d4bf6c5](https://github.com/onecx/onecx-portal-ui-libs/commit/d4bf6c5edb15f49f293290ddd2fdd4639e44fcd8))
+
+
+### Bug Fixes
+
+* adapt SearchConfig interface and use the type PrimeIcon for icons ([#152](https://github.com/onecx/onecx-portal-ui-libs/issues/152)) ([56e09ac](https://github.com/onecx/onecx-portal-ui-libs/commit/56e09acc4d312b9006da378817fa944f3f1eec59))
+
+
+### Refactoring
+
+* migrate icons in TS to PrimeIcons ([#151](https://github.com/onecx/onecx-portal-ui-libs/issues/151)) ([186fae8](https://github.com/onecx/onecx-portal-ui-libs/commit/186fae874a752f734b87c45d35a9c4c5c0e79bc2))
+
 ## [4.8.0](https://github.com/onecx/onecx-portal-ui-libs/compare/v4.7.0...v4.8.0) (2024-02-26)
 
 
diff --git a/libs/accelerator/package.json b/libs/accelerator/package.json
index caf7e084..0eef28af 100644
--- a/libs/accelerator/package.json
+++ b/libs/accelerator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@onecx/accelerator",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "peerDependencies": {
     "tslib": "^2.3.0",
     "rxjs": "7.8.1"
diff --git a/libs/integration-interface/package.json b/libs/integration-interface/package.json
index e6718c07..e4845eee 100644
--- a/libs/integration-interface/package.json
+++ b/libs/integration-interface/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@onecx/integration-interface",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "peerDependencies": {
     "tslib": "^2.3.0",
     "rxjs": "7.8.1",
diff --git a/libs/keycloak-auth/package.json b/libs/keycloak-auth/package.json
index c6fda510..908f9533 100644
--- a/libs/keycloak-auth/package.json
+++ b/libs/keycloak-auth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@onecx/keycloak-auth",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "peerDependencies": {
     "@angular/common": ">=15.2.7",
     "@angular/core": ">=15.2.7",
diff --git a/libs/portal-integration-angular/package.json b/libs/portal-integration-angular/package.json
index 634c9706..e573df42 100644
--- a/libs/portal-integration-angular/package.json
+++ b/libs/portal-integration-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@onecx/portal-integration-angular",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "peerDependencies": {
     "@angular-architects/module-federation": "15.0.0",
     "@angular/common": "^15.2.7",
diff --git a/libs/portal-layout-styles/package.json b/libs/portal-layout-styles/package.json
index 46676cce..d5d0f5e1 100644
--- a/libs/portal-layout-styles/package.json
+++ b/libs/portal-layout-styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@onecx/portal-layout-styles",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "peerDependencies": {
     "tslib": "^2.5.0"
   },
diff --git a/package.json b/package.json
index 72fa6f79..412efc60 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@onecx/onecx-portal-ui-libs",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "license": "Apache-2.0",
   "scripts": {
     "sass": "npx sass libs/portal-integration-angular/assets/styles.scss libs/portal-integration-angular/assets/output.css",