From 740ac327f77b0abe690e5414d017a38c5e5e5329 Mon Sep 17 00:00:00 2001
From: markuczy <129275100+markuczy@users.noreply.github.com>
Date: Tue, 10 Dec 2024 08:49:55 +0100
Subject: [PATCH] feat: disabled header action buttons can have tooltip (#633)

---
 .../page-header/page-header.component.html    | 27 ++++++++++---------
 .../page-header/page-header.component.ts      |  2 ++
 2 files changed, 17 insertions(+), 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
index 6d1f522b..6cb8ba21 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
@@ -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
index fc0c3f8d..829ef5da 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
@@ -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.