feat: fix styling issues for page header detail values + add ability …

…to specify icon styles (#294) * fix: fix layout + styling issues for page header detail values * fix: fix broken tests * feat: add ability to add styleclasses to objectDetail icons
onecx · Jun 27, 2024 · 08d79c3 · 08d79c3
1 parent 990ef71
commit 08d79c3
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 12 deletions.
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
@@ -105,20 +105,24 @@ <h2 id="page-subheader" *ngIf="!!subheader">{{ subheader }}</h2>
         >
         <span
           *ngIf="item.icon || item.value"
-          class="flex text-900 align-items-center gap-2 object-info-grid-value"
-          [ngClass]="generateItemStyle(item)"
+          class="object-info-grid-value"
           [title]="item.valueTooltip || item.tooltip || ''"
-          name="object-detail-value"
         >
-          <i *ngIf="item.icon" class="{{item.icon}}" name="object-detail-icon"></i>
-          {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}
-          <p-button
-            *ngIf="item.actionItemIcon && item.actionItemCallback"
-            [icon]="item.actionItemIcon"
-            styleClass="p-button-text p-0 w-full"
-            [title]="item.actionItemTooltip || ''"
-            (onClick)="item.actionItemCallback()"
-          ></p-button>
+          <span
+            class="flex text-900 align-items-center gap-2 w-max"
+            [ngClass]="generateItemStyle(item)"
+            name="object-detail-value"
+          >
+            <i *ngIf="item.icon" class='{{item.icon + " " + (item.iconStyleClass || "")}}' name="object-detail-icon"></i>
+            {{ item.value | dynamicPipe:item.valuePipe:item.valuePipeArgs}}
+            <p-button
+              *ngIf="item.actionItemIcon && item.actionItemCallback"
+              [icon]="item.actionItemIcon"
+              styleClass="p-button-text p-0 w-full"
+              [title]="item.actionItemTooltip || ''"
+              (onClick)="item.actionItemCallback()"
+            ></p-button>
+          </span>
         </span>
       </div>
     </ng-container>

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
@@ -349,6 +349,26 @@ export const WithObjectDetailsAndIcons = {
   },
 }
 
+export const WithObjectDetailsAndStyledIcons = {
+  render: Template,
+
+  args: {
+    header: 'My title',
+    subheader: 'My subtitle',
+    loading: false,
+    objectDetails: [
+      ...demoFields,
+      {
+        label: 'Styled Icon',
+        value: 'Confirmed',
+        icon: PrimeIcons.CHECK_CIRCLE,
+        iconStyleClass: 'text-red-400 fadein animation-duration-1000 animation-iteration-infinite'
+      }
+    ],
+    showBreadcrumbs: false,
+  },
+}
+
 export const DefaultLayout = {
   render: Template,
 

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
@@ -53,6 +53,7 @@ export interface ObjectDetailItem {
   labelTooltip?: string
   valueTooltip?: string
   icon?: PrimeIcon
+  iconStyleClass?: string
   labelPipe?: Type<any>
   valuePipe?: Type<any>
   valuePipeArgs?: string