feat: object details in page header can be styled

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"
         >

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
 

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 = {

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
    */

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')
   }