feat: disabled header action buttons can have tooltip (#633)

onecx · Dec 10, 2024 · 740ac32 · 740ac32
1 parent 8656a47
commit 740ac32
Show file tree

Hide file tree

Showing 2 changed files with 17 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
@@ -51,20 +51,23 @@ <h2 id="page-subheader" *ngIf="!!subheader">{{ subheader }}</h2>
       <ng-container *ngIf="!loading; else skeletonActions">
         <div *ngIf="inlineActions && inlineActions.length > 0" class="toolbar flex flex-wrap gap-1 sm:gap-2">
           <ng-container *ngFor="let action of inlineActions">
-            <p-button
-              id="{{ action.id }}"
-              [icon]="action.icon ?? ''"
-              type="button"
-              class="action-button"
-              [label]="action.labelKey ? (action.labelKey | translate) : action.label"
-              (onClick)="action.actionCallback()"
-              [pTooltip]="(action.titleKey ? (action.titleKey | translate) : action.title)"
+            <span
+              [pTooltip]="action.disabled ? (action.disabledTooltipKey ? (action.disabledTooltipKey | translate) : action.disabledTooltip) : (action.titleKey ? (action.titleKey | translate) : action.title)"
               tooltipPosition="top"
               tooltipEvent="hover"
-              [disabled]="action.disabled ? action.disabled : false"
-              [attr.name]="action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'"
-              [ariaLabel]=" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)"
-            ></p-button>
+            >
+              <p-button
+                id="{{ action.id }}"
+                [icon]="action.icon ?? ''"
+                type="button"
+                class="action-button"
+                [label]="action.labelKey ? (action.labelKey | translate) : action.label"
+                (onClick)="action.actionCallback()"
+                [disabled]="action.disabled ? action.disabled : false"
+                [attr.name]="action.icon ? 'ocx-page-header-inline-action-icon-button' : 'ocx-page-header-inline-action-button'"
+                [ariaLabel]=" (action.ariaLabelKey ? (action.ariaLabelKey | translate) : action.ariaLabel) || (action.titleKey ? (action.titleKey | translate) : action.title) || (action.labelKey ? (action.labelKey | translate) : action.label)"
+              ></p-button>
+            </span>
           </ng-container>
         </div>
         <ng-content select="[toolbarItems]"></ng-content>

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
@@ -38,6 +38,8 @@ export interface Action {
   btnClass?: string
   actionCallback(): void
   disabled?: boolean
+  disabledTooltip?: string
+  disabledTooltipKey?: string
   show?: 'always' | 'asOverflow'
   conditional?: boolean
   // Note: This currently doesn't work with dynamic values, since a passed in Action is just a copy of the original object.