From c8854de387d38712642a2efd040c898f6c5b12ac Mon Sep 17 00:00:00 2001
From: markuczy <martin.kuczynski@capgemini.com>
Date: Tue, 28 May 2024 10:38:43 +0200
Subject: [PATCH 1/2] feat: object details for page header can be styled

---
 .../lib/components/page-header/page-header.component.html | 2 +-
 .../page-header/page-header.component.stories.ts          | 6 ++++++
 .../lib/components/page-header/page-header.component.ts   | 8 ++++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
index 0ccefa05..5adad452 100644
--- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
+++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.html
@@ -91,7 +91,7 @@ <h2 id='page-subheader' *ngIf="!!subheader">{{ subheader }}</h2>
         <span
           *ngIf="item.icon || item.value"
           class="flex text-900 mt-2"
-          [ngClass]="item.icon ? 'gap-1 align-items-center' : null"
+          [ngClass]="generateItemStyle(item)"
           [title]="item.tooltip || ''"
           name="object-detail-value"
         >
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 d5a91c90..c600fb8e 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
@@ -323,6 +323,12 @@ const objectDetailsWithIcons: ObjectDetailItem[] = [
   {
     label: 'I have no value',
   },
+  {
+    label: 'Status with style',
+    value: 'Completed',
+    icon: PrimeIcons.CHECK_SQUARE,
+    valueCssClass: 'bg-green-400 text-white border-round-sm p-1',
+  },
 ]
 
 export const WithObjectDetailsAndIcons = {
diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts
index 7682cf51..d5e4e27d 100644
--- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts
+++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.ts
@@ -51,6 +51,7 @@ export interface ObjectDetailItem {
   labelPipe?: Type<any>
   valuePipe?: Type<any>
   valuePipeArgs?: string
+  valueCssClass?: string
 }
 
 export interface HomeItem {
@@ -172,6 +173,13 @@ export class PageHeaderComponent implements OnInit, OnChanges {
     }
   }
 
+  public generateItemStyle(item: ObjectDetailItem): string {
+    let style = ''
+    if (item.icon) style = style.concat(style, ' ', 'gap-1 align-items-center')
+    if (item.valueCssClass) style = style.concat(style, ' ', item.valueCssClass)
+    return style
+  }
+
   /**
    * Generates a list of actions that should be rendered in an overflow menu
    */

From 2006ee0b2527f62e353f61ed44edf16be9427762 Mon Sep 17 00:00:00 2001
From: markuczy <martin.kuczynski@capgemini.com>
Date: Tue, 28 May 2024 10:57:22 +0200
Subject: [PATCH 2/2] feat: object detail styles test

---
 .../page-header/page-header.component.spec.ts | 19 +++++++++++++++++++
 .../testing/page-header.harness.ts            |  4 ++++
 2 files changed, 23 insertions(+)

diff --git a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.spec.ts b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.spec.ts
index 8abc869e..25595fe6 100644
--- a/libs/angular-accelerator/src/lib/components/page-header/page-header.component.spec.ts
+++ b/libs/angular-accelerator/src/lib/components/page-header/page-header.component.spec.ts
@@ -214,6 +214,25 @@ describe('PageHeaderComponent', () => {
     expect(await fourthDetail?.getIcon()).toBeUndefined()
   })
 
+  it('should use styles to render objectDetails in the page header', async () => {
+    const objectDetailsWithIcons: ObjectDetailItem[] = [
+      {
+        label: 'Venue',
+        value: 'AIE Munich',
+        valueCssClass: 'bg-green-400 text-white',
+      },
+    ]
+    expect((await pageHeaderHarness.getObjectInfos()).length).toEqual(0)
+
+    component.objectDetails = objectDetailsWithIcons
+
+    expect((await pageHeaderHarness.getObjectInfos()).length).toEqual(1)
+    const firstDetail = await pageHeaderHarness.getObjectInfoByLabel('Venue')
+    const firstDetailStyles = await firstDetail?.getValueStyles()
+    expect(firstDetailStyles?.includes('bg-green-400')).toBeTruthy()
+    expect(firstDetailStyles?.includes('text-white')).toBeTruthy()
+  })
+
   it('should show overflow actions when menu overflow button clicked', async () => {
     component.actions = mockActions
 
diff --git a/libs/angular-accelerator/testing/page-header.harness.ts b/libs/angular-accelerator/testing/page-header.harness.ts
index 9938bb51..5926eac1 100644
--- a/libs/angular-accelerator/testing/page-header.harness.ts
+++ b/libs/angular-accelerator/testing/page-header.harness.ts
@@ -98,6 +98,10 @@ class ObjectDetailItemHarness extends ComponentHarness {
     return (await this.getValueElement())?.text()
   }
 
+  async getValueStyles() {
+    return (await this.getValueElement())?.getAttribute('class')
+  }
+
   async getIcon() {
     return (await this.getIconElement())?.getAttribute('class')
   }