From bbedb8797b6234e3bf0ef146dd8b48e277e9cdeb Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Fri, 7 Mar 2025 11:09:39 +0200
Subject: [PATCH 1/5] UI: Widget header button action

---
 .../widget-action-dialog.component.html       | 74 +++++++++++++++--
 .../action/widget-action-dialog.component.ts  | 44 ++++++++++
 .../widget/widget-container.component.html    | 81 +++++++++++++++++--
 .../widget/widget-container.component.scss    |  2 +-
 .../widget/widget-container.component.ts      |  5 +-
 .../components/widget/widget.component.ts     |  6 ++
 .../home/models/widget-component.models.ts    |  7 ++
 ui-ngx/src/app/shared/models/widget.models.ts | 41 ++++++++++
 .../assets/locale/locale.constant-en_US.json  | 16 ++++
 9 files changed, 260 insertions(+), 16 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
index ec1b165401..3e9bc581e1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
@@ -88,12 +88,74 @@
             </mat-icon>
           </mat-form-field>
         </div>
-        <div class="tb-form-row space-between">
-          <div>{{'widget-config.icon' | translate}}</div>
-          <tb-material-icon-select asBoxInput
-                                   formControlName="icon">
-          </tb-material-icon-select>
-        </div>
+        @if (widgetActionFormGroup.get('actionSourceId').value === 'headerButton') {
+          <div class="tb-form-panel stroked">
+            <div class="tb-form-panel-title" translate>widget-config.header-button.button-settings</div>
+            <div class="tb-form-row">
+              <div class="fixed-title-width" translate>widget-config.header-button.button-type</div>
+              <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
+                <mat-select required formControlName="buttonType" placeholder="{{ 'widget-config.set' | translate }}">
+                  <mat-option *ngFor="let button of widgetHeaderActionButtonTypes" [value]="button">
+                    {{ widgetHeaderActionButtonTypeTranslationMap.get(widgetHeaderActionButtonType[button]) | translate }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+            </div>
+            <div class="tb-form-row space-between">
+              <div class="flex flex-row items-center justify-start gap-2">
+                <mat-slide-toggle class="mat-slide" formControlName="showIcon">
+                </mat-slide-toggle>
+                <div translate>widget-config.icon</div>
+              </div>
+              <tb-material-icon-select asBoxInput
+                                       formControlName="icon">
+              </tb-material-icon-select>
+            </div>
+            <div class="tb-form-row space-between column-xs">
+              <div class="fixed-title-width">{{ 'widget-config.header-button.colors' | translate }}</div>
+              <div class="flex flex-row items-center justify-start gap-2">
+                <div class="tb-small-label" translate>widget-config.header-button.color</div>
+                <tb-color-input asBoxInput
+                                formControlName="buttonColor">
+                </tb-color-input>
+                <mat-divider vertical></mat-divider>
+                <div class="tb-small-label" translate>widget-config.header-button.background</div>
+                <tb-color-input asBoxInput
+                                formControlName="buttonFillColor">
+                </tb-color-input>
+                <mat-divider vertical></mat-divider>
+                <div class="tb-small-label" translate>widget-config.header-button.border</div>
+                <tb-color-input asBoxInput
+                                formControlName="buttonBorderColor">
+                </tb-color-input>
+              </div>
+            </div>
+            <div class="tb-form-panel stroked">
+              <mat-expansion-panel class="tb-settings">
+                <mat-expansion-panel-header>
+                  <mat-panel-description class="flex items-stretch justify-start" translate>
+                    widget-config.header-button.advanced-button-style
+                  </mat-panel-description>
+                </mat-expansion-panel-header>
+                <ng-template matExpansionPanelContent>
+                  <tb-json-object-edit
+                    [editorStyle]="{minHeight: '100px'}"
+                    label="{{ 'widget-config.header-button.button-style' | translate }}"
+                    formControlName="customButtonStyle"
+                  ></tb-json-object-edit>
+                </ng-template>
+              </mat-expansion-panel>
+            </div>
+          </div>
+        } @else {
+          <div class="tb-form-row space-between">
+            <div>{{'widget-config.icon' | translate}}</div>
+            <tb-material-icon-select asBoxInput
+                                     formControlName="icon">
+            </tb-material-icon-select>
+          </div>
+        }
+
         <div class="tb-form-panel stroked tb-slide-toggle" *ngIf="displayShowWidgetActionForm()">
           <mat-expansion-panel class="tb-settings" [expanded]="widgetActionFormGroup.get('useShowWidgetActionFunction').value"
                                [disabled]="!widgetActionFormGroup.get('useShowWidgetActionFunction').value">
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
index df8df4a882..a04609b241 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
@@ -43,6 +43,10 @@ import {
   CellClickColumnInfo,
   defaultWidgetAction,
   WidgetActionSource,
+  WidgetHeaderActionButtonType,
+  widgetHeaderActionButtonTypeMap,
+  WidgetHeaderActionButtonTypes,
+  widgetHeaderActionButtonTypeTranslationMap,
   widgetType
 } from '@shared/models/widget.models';
 import { takeUntil } from 'rxjs/operators';
@@ -85,6 +89,11 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
   configuredColumns: Array<CellClickColumnInfo> = [];
   usedCellClickColumns: Array<number> = [];
 
+  widgetHeaderActionButtonType = WidgetHeaderActionButtonType
+  widgetHeaderActionButtonTypes = WidgetHeaderActionButtonTypes;
+  widgetHeaderActionButtonTypeTranslationMap = widgetHeaderActionButtonTypeTranslationMap;
+  widgetHeaderActionButtonTypeMap = widgetHeaderActionButtonTypeMap;
+
   @ViewChild('columnIndexSelect') columnIndexSelect: MatSelect;
   columnIndexPlaceholderText = this.translate.instant('widget-config.select-column-index');
 
@@ -120,12 +129,19 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
       actionSourceId: [this.action.actionSourceId, Validators.required],
       columnIndex: [{value: this.checkColumnIndex(this.action.columnIndex), disabled: true}, Validators.required],
       name: [this.action.name, [this.validateActionName(), Validators.required]],
+      buttonType: [isDefinedAndNotNull(this.action.buttonType) ? this.action.buttonType : WidgetHeaderActionButtonType.icon, []],
+      showIcon: [isDefinedAndNotNull(this.action.showIcon) ? this.action.showIcon : true, []],
       icon: [this.action.icon, Validators.required],
+      buttonColor: [isDefinedAndNotNull(this.action.buttonColor) ? this.action.buttonColor : 'rgba(0, 0, 0, 0.87)', []],
+      buttonFillColor: [isDefinedAndNotNull(this.action.buttonFillColor) ? this.action.buttonFillColor : '#3F52DD', []],
+      buttonBorderColor: [isDefinedAndNotNull(this.action.buttonBorderColor) ? this.action.buttonBorderColor : '#3F52DD', []],
+      customButtonStyle: [isDefinedAndNotNull(this.action.customButtonStyle) ? this.action.customButtonStyle : '', []],
       useShowWidgetActionFunction: [this.action.useShowWidgetActionFunction],
       showWidgetActionFunction: [this.action.showWidgetActionFunction || 'return true;'],
       widgetAction: [actionDescriptorToAction(toWidgetActionDescriptor(this.action)), Validators.required]
     });
     this.updateShowWidgetActionForm();
+    this.widgetHeaderButtonValidators();
     this.widgetActionFormGroup.get('actionSourceId').valueChanges.pipe(
       takeUntil(this.destroy$)
     ).subscribe((value) => {
@@ -143,6 +159,9 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
     ).subscribe(() => {
       this.updateShowWidgetActionForm();
     });
+    this.widgetActionFormGroup.get('buttonType').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(() => this.widgetHeaderButtonValidators());
     setTimeout(() => {
       if (this.action?.actionSourceId === 'cellClick') {
         this.widgetActionFormGroup.get('columnIndex').enable();
@@ -160,6 +179,31 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
     super.ngOnDestroy();
   }
 
+  widgetHeaderButtonValidators() {
+    const buttonType = this.widgetActionFormGroup.get('buttonType').value;
+    this.widgetActionFormGroup.get('showIcon').disable({emitEvent: false});
+    this.widgetActionFormGroup.get('buttonFillColor').disable({emitEvent: false});
+    this.widgetActionFormGroup.get('buttonBorderColor').disable({emitEvent: false});
+    switch (buttonType) {
+      case WidgetHeaderActionButtonType.basic:
+        this.widgetActionFormGroup.get('showIcon').enable({emitEvent: false});
+        break;
+      case WidgetHeaderActionButtonType.raised:
+        this.widgetActionFormGroup.get('showIcon').enable({emitEvent: false});
+        this.widgetActionFormGroup.get('buttonFillColor').enable({emitEvent: false});
+        break;
+      case WidgetHeaderActionButtonType.stroked:
+      case WidgetHeaderActionButtonType.flat:
+        this.widgetActionFormGroup.get('showIcon').enable({emitEvent: false});
+        this.widgetActionFormGroup.get('buttonFillColor').enable({emitEvent: false});
+        this.widgetActionFormGroup.get('buttonBorderColor').enable({emitEvent: false});
+        break;
+      case WidgetHeaderActionButtonType.miniFab:
+        this.widgetActionFormGroup.get('buttonFillColor').enable({emitEvent: false});
+        break;
+    }
+  }
+
   displayShowWidgetActionForm(): boolean {
     return !!this.data.actionsData.actionSources[this.widgetActionFormGroup.get('actionSourceId').value]?.hasShowCondition;
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
index 40b618dc88..7a4fd83660 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
@@ -37,14 +37,79 @@
          class="tb-widget-actions"
          [class]="{'tb-widget-actions-absolute': !(widget.showWidgetTitlePanel && !widgetComponent.widgetContext?.embedTitlePanel && (widget.showTitle||widget.hasAggregation))}"
          (mousedown)="$event.stopPropagation()">
-      <button mat-icon-button *ngFor="let action of widget.customHeaderActions"
-              type="button"
-              [class.!hidden]="isEdit"
-              (click)="action.onAction($event)"
-              matTooltip="{{ action.displayName }}"
-              matTooltipPosition="above">
-        <tb-icon>{{ action.icon }}</tb-icon>
-      </button>
+      <div class="flex items-center gap-2">
+        <ng-container *ngFor="let action of widget.customHeaderActions">
+          @switch (action.buttonType) {
+            @case (widgetHeaderActionButtonType.icon) {
+              <button mat-icon-button
+                      [style]="action.customButtonStyle"
+                      [class.!hidden]="isEdit"
+                      (click)="action.onAction($event)"
+                      matTooltip="{{ action.displayName }}"
+                      matTooltipPosition="above">
+                <tb-icon [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+              </button>
+            }
+            @case (widgetHeaderActionButtonType.miniFab) {
+              <button mat-mini-fab
+                      [style]="action.customButtonStyle"
+                      [class.!hidden]="isEdit"
+                      [style.background-color]="action.buttonFillColor"
+                      (click)="action.onAction($event)"
+                      matTooltip="{{ action.displayName }}"
+                      matTooltipPosition="above">
+                <tb-icon [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+              </button>
+            }
+            @case (widgetHeaderActionButtonType.basic) {
+              <button [class.!hidden]="isEdit" mat-button
+                      [style]="action.customButtonStyle"
+                      (click)="action.onAction($event)"
+                      matTooltip="{{ action.displayName }}"
+                      matTooltipPosition="above">
+                <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+                <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+              </button>
+            }
+            @case (widgetHeaderActionButtonType.raised) {
+              <button [class.!hidden]="isEdit" mat-raised-button
+                      [style]="action.customButtonStyle"
+                      [style.background-color]="action.buttonFillColor"
+                      (click)="action.onAction($event)"
+                      matTooltip="{{ action.displayName }}"
+                      matTooltipPosition="above">
+                <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+                <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+              </button>
+            }
+            @case (widgetHeaderActionButtonType.stroked) {
+              <button [class.!hidden]="isEdit" mat-stroked-button
+                      [style]="action.customButtonStyle"
+                      [style.border-color]="action.buttonBorderColor"
+                      [style.background-color]="action.buttonFillColor"
+                      (click)="action.onAction($event)"
+                      matTooltip="{{ action.displayName }}"
+                      matTooltipPosition="above">
+                <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+                <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+              </button>
+            }
+            @case (widgetHeaderActionButtonType.flat) {
+              <button [class.!hidden]="isEdit" mat-flat-button
+                      [style]="action.customButtonStyle"
+                      [style.background-color]="action.buttonFillColor"
+                      [style.border-color]="action.buttonBorderColor"
+                      (click)="action.onAction($event)"
+                      matTooltip="{{ action.displayName }}"
+                      matTooltipPosition="above">
+                <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+                <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+              </button>
+            }
+          }
+        </ng-container>
+      </div>
+
       <button mat-icon-button *ngFor="let action of widget.widgetActions"
               type="button"
               [class.!hidden]="isEdit || !action.show"
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.scss b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.scss
index 0894da25f7..d763c11c9e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.scss
@@ -87,7 +87,7 @@ div.tb-widget {
     place-content: center flex-start;
     align-items: center;
     z-index: 19;
-    margin: 5px 0 0;
+    margin: 5px 0 5px;
 
     &-absolute {
       position: absolute;
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
index 80afff855f..5c20266d4d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts
@@ -44,8 +44,9 @@ import { GridsterItemComponent } from 'angular-gridster2';
 import { UtilsService } from '@core/services/utils.service';
 import { from } from 'rxjs';
 import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
-import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance;
 import { TbContextMenuEvent } from '@shared/models/jquery-event.models';
+import { WidgetHeaderActionButtonType } from '@shared/models/widget.models';
+import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance;
 
 export enum WidgetComponentActionType {
   MOUSE_DOWN,
@@ -130,6 +131,8 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
     return (this.isEditActionEnabled || this.isRemoveActionEnabled || this.isExportActionEnabled) && !this.widget?.isFullscreen;
   }
 
+  widgetHeaderActionButtonType = WidgetHeaderActionButtonType;
+
   private cssClass: string;
 
   private editWidgetActionsTooltip: ITooltipsterInstance;
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
index f4b2cd7e06..ee937b0897 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
@@ -295,7 +295,13 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
           const headerAction: WidgetHeaderAction = {
             name: descriptor.name,
             displayName: descriptor.displayName,
+            buttonType: descriptor.buttonType,
+            showIcon: descriptor.showIcon,
             icon: descriptor.icon,
+            buttonColor: descriptor.buttonColor,
+            buttonFillColor: descriptor.buttonFillColor,
+            buttonBorderColor: descriptor.buttonBorderColor,
+            customButtonStyle: descriptor.customButtonStyle,
             descriptor,
             useShowWidgetHeaderActionFunction,
             showWidgetHeaderActionFunction,
diff --git a/ui-ngx/src/app/modules/home/models/widget-component.models.ts b/ui-ngx/src/app/modules/home/models/widget-component.models.ts
index b55ec2fd54..0c78b11b56 100644
--- a/ui-ngx/src/app/modules/home/models/widget-component.models.ts
+++ b/ui-ngx/src/app/modules/home/models/widget-component.models.ts
@@ -26,6 +26,7 @@ import {
   WidgetActionSource,
   WidgetConfig,
   WidgetControllerDescriptor,
+  WidgetHeaderActionButtonType,
   WidgetType,
   widgetType,
   WidgetTypeDescriptor,
@@ -118,6 +119,12 @@ export type ShowWidgetHeaderActionFunction = (ctx: WidgetContext, data: Formatte
 export interface WidgetHeaderAction extends IWidgetAction {
   displayName: string;
   descriptor: WidgetActionDescriptor;
+  buttonType?: WidgetHeaderActionButtonType;
+  showIcon?:boolean;
+  buttonColor?: string;
+  buttonFillColor?: string;
+  buttonBorderColor?: string;
+  customButtonStyle?: string;
   useShowWidgetHeaderActionFunction: boolean;
   showWidgetHeaderActionFunction: CompiledTbFunction<ShowWidgetHeaderActionFunction>;
 }
diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts
index c7f3327f68..54023d26e8 100644
--- a/ui-ngx/src/app/shared/models/widget.models.ts
+++ b/ui-ngx/src/app/shared/models/widget.models.ts
@@ -567,6 +567,35 @@ export interface LegendData {
   data: Array<LegendKeyData>;
 }
 
+export enum WidgetHeaderActionButtonType {
+  basic = 'basic',
+  raised = 'raised',
+  stroked = 'stroked',
+  flat = 'flat',
+  icon = 'icon',
+  miniFab = 'miniFab'
+}
+
+export const WidgetHeaderActionButtonTypes = Object.keys(WidgetHeaderActionButtonType) as WidgetHeaderActionButtonType[];
+
+export const widgetHeaderActionButtonTypeTranslationMap = new Map<WidgetHeaderActionButtonType, string>([
+  [WidgetHeaderActionButtonType.basic, 'widget-config.header-button.button-type-basic'],
+  [WidgetHeaderActionButtonType.raised, 'widget-config.header-button.button-type-raised'],
+  [WidgetHeaderActionButtonType.stroked, 'widget-config.header-button.button-type-stroked'],
+  [WidgetHeaderActionButtonType.flat, 'widget-config.header-button.button-type-flat'],
+  [WidgetHeaderActionButtonType.icon, 'widget-config.header-button.button-type-icon'],
+  [WidgetHeaderActionButtonType.miniFab, 'widget-config.header-button.button-type-mini-fab']
+]);
+
+export const widgetHeaderActionButtonTypeMap = new Map<WidgetHeaderActionButtonType, string>([
+  [WidgetHeaderActionButtonType.basic, 'mat-button'],
+  [WidgetHeaderActionButtonType.raised, 'mat-raised-button'],
+  [WidgetHeaderActionButtonType.stroked, 'mat-stroked-button'],
+  [WidgetHeaderActionButtonType.flat, 'mat-flat-button'],
+  [WidgetHeaderActionButtonType.icon, 'mat-icon-button'],
+  [WidgetHeaderActionButtonType.miniFab, 'mat-mini-fab']
+]);
+
 export enum WidgetActionType {
   doNothing = 'doNothing',
   openDashboardState = 'openDashboardState',
@@ -718,7 +747,13 @@ export interface WidgetAction extends CustomActionDescriptor {
 export interface WidgetActionDescriptor extends WidgetAction {
   id: string;
   name: string;
+  buttonType?: WidgetHeaderActionButtonType;
+  showIcon?: boolean;
   icon: string;
+  buttonColor?: string;
+  buttonFillColor?: string;
+  buttonBorderColor?: string;
+  customButtonStyle?: string;
   displayName?: string;
   useShowWidgetActionFunction?: boolean;
   showWidgetActionFunction?: TbFunction;
@@ -729,7 +764,13 @@ export const actionDescriptorToAction = (descriptor: WidgetActionDescriptor): Wi
   const result: WidgetActionDescriptor = {...descriptor};
   delete result.id;
   delete result.name;
+  delete result.buttonType;
+  delete result.showIcon;
   delete result.icon;
+  delete result.buttonColor;
+  delete result.buttonFillColor;
+  delete result.buttonBorderColor;
+  delete result.customButtonStyle;
   delete result.displayName;
   delete result.useShowWidgetActionFunction;
   delete result.showWidgetActionFunction;
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index de97184f5a..64f0f33f71 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -6537,6 +6537,22 @@
         "action-name-required": "Action name is required.",
         "action-name-not-unique": "Another action with the same name already exists.\nAction name should be unique within the same action source.",
         "action-icon": "Icon",
+        "header-button": {
+            "button-settings": "Button settings",
+            "button-type": "Button type",
+            "button-type-basic": "Basic",
+            "button-type-raised": "Raised",
+            "button-type-stroked": "Stroked",
+            "button-type-flat": "Flat",
+            "button-type-icon": "Icon",
+            "button-type-mini-fab": "FAB",
+            "colors": "Colors",
+            "color": "Color",
+            "background": "Background",
+            "border": "Border",
+            "advanced-button-style": "Advanced button style",
+            "button-style": "Button style"
+        },
         "show-hide-action-using-function": "Show/hide action using function",
         "show-action-function": "Show action function",
         "action-type": "Type",

From 2b8766fc6cad680a65a21ced1204f93ea9a6f0b5 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Fri, 7 Mar 2025 11:11:46 +0200
Subject: [PATCH 2/5] UI: Refactoring

---
 .../components/widget/action/widget-action-dialog.component.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
index a04609b241..6b78e579cf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
@@ -135,7 +135,7 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
       buttonColor: [isDefinedAndNotNull(this.action.buttonColor) ? this.action.buttonColor : 'rgba(0, 0, 0, 0.87)', []],
       buttonFillColor: [isDefinedAndNotNull(this.action.buttonFillColor) ? this.action.buttonFillColor : '#3F52DD', []],
       buttonBorderColor: [isDefinedAndNotNull(this.action.buttonBorderColor) ? this.action.buttonBorderColor : '#3F52DD', []],
-      customButtonStyle: [isDefinedAndNotNull(this.action.customButtonStyle) ? this.action.customButtonStyle : '', []],
+      customButtonStyle: [isDefinedAndNotNull(this.action.customButtonStyle) ? this.action.customButtonStyle : null, []],
       useShowWidgetActionFunction: [this.action.useShowWidgetActionFunction],
       showWidgetActionFunction: [this.action.showWidgetActionFunction || 'return true;'],
       widgetAction: [actionDescriptorToAction(toWidgetActionDescriptor(this.action)), Validators.required]

From 1c80a41580496fea1c106a1d96641e2863ae557f Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Fri, 7 Mar 2025 11:23:40 +0200
Subject: [PATCH 3/5] UI: Refactoring

---
 .../widget/action/widget-action-dialog.component.ts      | 2 --
 ui-ngx/src/app/shared/models/widget.models.ts            | 9 ---------
 2 files changed, 11 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
index 6b78e579cf..66480c8218 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
@@ -44,7 +44,6 @@ import {
   defaultWidgetAction,
   WidgetActionSource,
   WidgetHeaderActionButtonType,
-  widgetHeaderActionButtonTypeMap,
   WidgetHeaderActionButtonTypes,
   widgetHeaderActionButtonTypeTranslationMap,
   widgetType
@@ -92,7 +91,6 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
   widgetHeaderActionButtonType = WidgetHeaderActionButtonType
   widgetHeaderActionButtonTypes = WidgetHeaderActionButtonTypes;
   widgetHeaderActionButtonTypeTranslationMap = widgetHeaderActionButtonTypeTranslationMap;
-  widgetHeaderActionButtonTypeMap = widgetHeaderActionButtonTypeMap;
 
   @ViewChild('columnIndexSelect') columnIndexSelect: MatSelect;
   columnIndexPlaceholderText = this.translate.instant('widget-config.select-column-index');
diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts
index 54023d26e8..271318838b 100644
--- a/ui-ngx/src/app/shared/models/widget.models.ts
+++ b/ui-ngx/src/app/shared/models/widget.models.ts
@@ -587,15 +587,6 @@ export const widgetHeaderActionButtonTypeTranslationMap = new Map<WidgetHeaderAc
   [WidgetHeaderActionButtonType.miniFab, 'widget-config.header-button.button-type-mini-fab']
 ]);
 
-export const widgetHeaderActionButtonTypeMap = new Map<WidgetHeaderActionButtonType, string>([
-  [WidgetHeaderActionButtonType.basic, 'mat-button'],
-  [WidgetHeaderActionButtonType.raised, 'mat-raised-button'],
-  [WidgetHeaderActionButtonType.stroked, 'mat-stroked-button'],
-  [WidgetHeaderActionButtonType.flat, 'mat-flat-button'],
-  [WidgetHeaderActionButtonType.icon, 'mat-icon-button'],
-  [WidgetHeaderActionButtonType.miniFab, 'mat-mini-fab']
-]);
-
 export enum WidgetActionType {
   doNothing = 'doNothing',
   openDashboardState = 'openDashboardState',

From fd8d3fbf622a5809600c5ad59571bf5aabdf0a4b Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Fri, 7 Mar 2025 13:26:21 +0200
Subject: [PATCH 4/5] UI: Refactoring

---
 .../action/widget-action-dialog.component.ts  |  18 +--
 .../widget/widget-container.component.html    | 151 ++++++++++--------
 .../widget/widget-container.component.scss    |   4 +-
 3 files changed, 89 insertions(+), 84 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
index 66480c8218..b921c89c52 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, OnDestroy, OnInit, SkipSelf, ViewChild } from '@angular/core';
+import { Component, DestroyRef, Inject, OnDestroy, OnInit, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
@@ -28,7 +28,6 @@ import {
   ValidatorFn,
   Validators
 } from '@angular/forms';
-import { Subject } from 'rxjs';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import {
@@ -48,12 +47,12 @@ import {
   widgetHeaderActionButtonTypeTranslationMap,
   widgetType
 } from '@shared/models/widget.models';
-import { takeUntil } from 'rxjs/operators';
 import { CustomActionEditorCompleter } from '@home/components/widget/lib/settings/common/action/custom-action.models';
 import { WidgetService } from '@core/http/widget.service';
 import { isDefinedAndNotNull, isNotEmptyStr } from '@core/utils';
 import { MatSelect } from '@angular/material/select';
 import { TranslateService } from '@ngx-translate/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export interface WidgetActionDialogData {
   isAdd: boolean;
@@ -72,8 +71,6 @@ export interface WidgetActionDialogData {
 export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDialogComponent,
                                                  WidgetActionDescriptorInfo> implements OnInit, OnDestroy, ErrorStateMatcher {
 
-  private destroy$ = new Subject<void>();
-
   widgetActionFormGroup: FormGroup;
 
   isAdd: boolean;
@@ -103,7 +100,8 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<WidgetActionDialogComponent, WidgetActionDescriptorInfo>,
               public fb: FormBuilder,
-              private translate: TranslateService) {
+              private translate: TranslateService,
+              private destroyRef: DestroyRef) {
     super(store, router, dialogRef);
     this.isAdd = data.isAdd;
     if (this.isAdd) {
@@ -141,7 +139,7 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
     this.updateShowWidgetActionForm();
     this.widgetHeaderButtonValidators();
     this.widgetActionFormGroup.get('actionSourceId').valueChanges.pipe(
-      takeUntil(this.destroy$)
+      takeUntilDestroyed(this.destroyRef)
     ).subscribe((value) => {
       this.widgetActionFormGroup.get('name').updateValueAndValidity();
       this.updateShowWidgetActionForm();
@@ -153,12 +151,12 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
       }
     });
     this.widgetActionFormGroup.get('useShowWidgetActionFunction').valueChanges.pipe(
-      takeUntil(this.destroy$)
+      takeUntilDestroyed(this.destroyRef)
     ).subscribe(() => {
       this.updateShowWidgetActionForm();
     });
     this.widgetActionFormGroup.get('buttonType').valueChanges.pipe(
-      takeUntil(this.destroy$)
+      takeUntilDestroyed(this.destroyRef)
     ).subscribe(() => this.widgetHeaderButtonValidators());
     setTimeout(() => {
       if (this.action?.actionSourceId === 'cellClick') {
@@ -172,8 +170,6 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
   }
 
   ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
     super.ngOnDestroy();
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
index 7a4fd83660..67664beb84 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
@@ -37,77 +37,10 @@
          class="tb-widget-actions"
          [class]="{'tb-widget-actions-absolute': !(widget.showWidgetTitlePanel && !widgetComponent.widgetContext?.embedTitlePanel && (widget.showTitle||widget.hasAggregation))}"
          (mousedown)="$event.stopPropagation()">
-      <div class="flex items-center gap-2">
-        <ng-container *ngFor="let action of widget.customHeaderActions">
-          @switch (action.buttonType) {
-            @case (widgetHeaderActionButtonType.icon) {
-              <button mat-icon-button
-                      [style]="action.customButtonStyle"
-                      [class.!hidden]="isEdit"
-                      (click)="action.onAction($event)"
-                      matTooltip="{{ action.displayName }}"
-                      matTooltipPosition="above">
-                <tb-icon [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
-              </button>
-            }
-            @case (widgetHeaderActionButtonType.miniFab) {
-              <button mat-mini-fab
-                      [style]="action.customButtonStyle"
-                      [class.!hidden]="isEdit"
-                      [style.background-color]="action.buttonFillColor"
-                      (click)="action.onAction($event)"
-                      matTooltip="{{ action.displayName }}"
-                      matTooltipPosition="above">
-                <tb-icon [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
-              </button>
-            }
-            @case (widgetHeaderActionButtonType.basic) {
-              <button [class.!hidden]="isEdit" mat-button
-                      [style]="action.customButtonStyle"
-                      (click)="action.onAction($event)"
-                      matTooltip="{{ action.displayName }}"
-                      matTooltipPosition="above">
-                <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
-                <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
-              </button>
-            }
-            @case (widgetHeaderActionButtonType.raised) {
-              <button [class.!hidden]="isEdit" mat-raised-button
-                      [style]="action.customButtonStyle"
-                      [style.background-color]="action.buttonFillColor"
-                      (click)="action.onAction($event)"
-                      matTooltip="{{ action.displayName }}"
-                      matTooltipPosition="above">
-                <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
-                <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
-              </button>
-            }
-            @case (widgetHeaderActionButtonType.stroked) {
-              <button [class.!hidden]="isEdit" mat-stroked-button
-                      [style]="action.customButtonStyle"
-                      [style.border-color]="action.buttonBorderColor"
-                      [style.background-color]="action.buttonFillColor"
-                      (click)="action.onAction($event)"
-                      matTooltip="{{ action.displayName }}"
-                      matTooltipPosition="above">
-                <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
-                <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
-              </button>
-            }
-            @case (widgetHeaderActionButtonType.flat) {
-              <button [class.!hidden]="isEdit" mat-flat-button
-                      [style]="action.customButtonStyle"
-                      [style.background-color]="action.buttonFillColor"
-                      [style.border-color]="action.buttonBorderColor"
-                      (click)="action.onAction($event)"
-                      matTooltip="{{ action.displayName }}"
-                      matTooltipPosition="above">
-                <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
-                <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
-              </button>
-            }
-          }
-        </ng-container>
+      <div class="flex items-center">
+        @for (action of widget.customHeaderActions; track action.name; let last = $last) {
+          <ng-container *ngTemplateOutlet="widgetHeaderActionButton; context:{ action, last }"></ng-container>
+        }
       </div>
 
       <button mat-icon-button *ngFor="let action of widget.widgetActions"
@@ -168,3 +101,79 @@
     </tb-timewindow>
   </div>
 </ng-template>
+
+<ng-template #widgetHeaderActionButton let-action="action" let-last="last">
+@switch (action.buttonType) {
+  @case (widgetHeaderActionButtonType.icon) {
+    <button mat-icon-button
+            [style]="action.customButtonStyle"
+            [class.!hidden]="isEdit"
+            (click)="action.onAction($event)"
+            matTooltip="{{ action.displayName }}"
+            matTooltipPosition="above">
+      <tb-icon [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+    </button>
+  }
+  @case (widgetHeaderActionButtonType.miniFab) {
+    <button mat-mini-fab
+            [style]="action.customButtonStyle"
+            [class.!hidden]="isEdit"
+            [class.mr-2]="!last"
+            [style.background-color]="action.buttonFillColor"
+            (click)="action.onAction($event)"
+            matTooltip="{{ action.displayName }}"
+            matTooltipPosition="above">
+      <tb-icon [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+    </button>
+  }
+  @case (widgetHeaderActionButtonType.basic) {
+    <button [class.!hidden]="isEdit" mat-button
+            [class.mr-2]="!last"
+            [style]="action.customButtonStyle"
+            (click)="action.onAction($event)"
+            matTooltip="{{ action.displayName }}"
+            matTooltipPosition="above">
+      <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+    </button>
+  }
+  @case (widgetHeaderActionButtonType.raised) {
+    <button [class.!hidden]="isEdit" mat-raised-button
+            [class.mr-2]="!last"
+            [style]="action.customButtonStyle"
+            [style.background-color]="action.buttonFillColor"
+            (click)="action.onAction($event)"
+            matTooltip="{{ action.displayName }}"
+            matTooltipPosition="above">
+      <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+    </button>
+  }
+  @case (widgetHeaderActionButtonType.stroked) {
+    <button [class.!hidden]="isEdit" mat-stroked-button
+            [class.mr-2]="!last"
+            [style]="action.customButtonStyle"
+            [style.border-color]="action.buttonBorderColor"
+            [style.background-color]="action.buttonFillColor"
+            (click)="action.onAction($event)"
+            matTooltip="{{ action.displayName }}"
+            matTooltipPosition="above">
+      <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+    </button>
+  }
+  @case (widgetHeaderActionButtonType.flat) {
+    <button [class.!hidden]="isEdit" mat-flat-button
+            [class.mr-2]="!last"
+            [style]="action.customButtonStyle"
+            [style.background-color]="action.buttonFillColor"
+            [style.border-color]="action.buttonBorderColor"
+            (click)="action.onAction($event)"
+            matTooltip="{{ action.displayName }}"
+            matTooltipPosition="above">
+      <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+    </button>
+  }
+}
+</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.scss b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.scss
index d763c11c9e..b246bc1662 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.scss
@@ -86,8 +86,8 @@ div.tb-widget {
     flex-direction: row;
     place-content: center flex-start;
     align-items: center;
-    z-index: 19;
-    margin: 5px 0 5px;
+    z-index: 101;
+    margin: 5px 0 0;
 
     &-absolute {
       position: absolute;

From 04c7160e73223e64897b2d93c19f98393ad0d3ab Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Fri, 7 Mar 2025 15:01:40 +0200
Subject: [PATCH 5/5] UI: Refactoring

---
 .../widget/action/widget-action-dialog.component.ts       | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
index b921c89c52..b439a5771f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, DestroyRef, Inject, OnDestroy, OnInit, SkipSelf, ViewChild } from '@angular/core';
+import { Component, DestroyRef, Inject, OnInit, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
@@ -69,7 +69,7 @@ export interface WidgetActionDialogData {
   styleUrls: []
 })
 export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDialogComponent,
-                                                 WidgetActionDescriptorInfo> implements OnInit, OnDestroy, ErrorStateMatcher {
+                                                 WidgetActionDescriptorInfo> implements OnInit, ErrorStateMatcher {
 
   widgetActionFormGroup: FormGroup;
 
@@ -169,10 +169,6 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
     });
   }
 
-  ngOnDestroy() {
-    super.ngOnDestroy();
-  }
-
   widgetHeaderButtonValidators() {
     const buttonType = this.widgetActionFormGroup.get('buttonType').value;
     this.widgetActionFormGroup.get('showIcon').disable({emitEvent: false});