UI: Dynamic title height for widget title

ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts

@@ -19,7 +19,7 @@ import { Directive, inject, Injector, OnDestroy, OnInit } from '@angular/core';
 import {
   IDynamicWidgetComponent,
   widgetContextToken,
-  widgetErrorMessagesToken,
+  widgetErrorMessagesToken, widgetHeaderButtonActionToken,
   widgetTitlePanelToken
 } from '@home/models/widget-component.models';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
@@ -72,6 +72,7 @@ export class DynamicWidgetComponent extends PageComponent implements IDynamicWid
   public readonly ctx = inject(widgetContextToken);
   public readonly errorMessages = inject(widgetErrorMessagesToken);
   public readonly widgetTitlePanel = inject(widgetTitlePanelToken);
+  public readonly widgetHeaderButtonAction = inject(widgetHeaderButtonActionToken);
 
   constructor() {
     super();

ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.html

@@ -17,9 +17,10 @@
 -->
 <div class="tb-map-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-map-overlay" [style]="overlayStyle"></div>
-  <ng-container *ngIf="widgetComponent.dashboardWidget.showWidgetTitlePanel">
+    <ng-container *ngIf="widgetComponent.dashboardWidget.showWidgetTitlePanel">
-    <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
+      <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
-  </ng-container>
+    </ng-container>
+    <ng-container *ngTemplateOutlet="widgetHeaderButtonAction"></ng-container>
   <div #mapElement>
   </div>
 </div>

ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.scss

@@ -34,4 +34,7 @@
   div.tb-widget-title {
     padding: 0;
   }
+  .tb-widget-actions.tb-widget-actions-absolute {
+    z-index: 2;
+  }
 }

ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.ts

@@ -15,6 +15,7 @@
 ///
 
 import {
+  AfterViewInit,
   ChangeDetectorRef,
   Component,
   ElementRef,
@@ -45,7 +46,7 @@ import { DomSanitizer } from '@angular/platform-browser';
   styleUrls: ['./map-widget.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
-export class MapWidgetComponent implements OnInit, OnDestroy {
+export class MapWidgetComponent implements OnInit, OnDestroy, AfterViewInit {
 
   @ViewChild('mapElement', {static: false})
   mapElement: ElementRef<HTMLElement>;
@@ -58,6 +59,9 @@ export class MapWidgetComponent implements OnInit, OnDestroy {
   @Input()
   widgetTitlePanel: TemplateRef<any>;
 
+  @Input()
+  widgetHeaderButtonAction: TemplateRef<any>;
+
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
   padding: string;
@@ -79,6 +83,14 @@ export class MapWidgetComponent implements OnInit, OnDestroy {
     this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
   }
 
+  ngAfterViewInit() {
+    if (this.widgetComponent.dashboardWidget.showWidgetTitlePanel && !!this.widgetHeaderButtonAction) {
+      const tbWidgetTitle = $(".tb-widget-title")[0];
+      if (getComputedStyle(tbWidgetTitle).getPropertyValue('min-height') === 'auto')
+        tbWidgetTitle.style.minHeight = $(".tb-widget-actions")[0].offsetHeight + 'px';
+    }
+  }
+
   ngOnDestroy() {
     if (this.map) {
       this.map.destroy();

ui-ngx/src/app/modules/home/components/widget/widget-container.component.html

@@ -33,33 +33,9 @@
     <ng-container *ngIf="!widgetComponent.widgetContext?.embedTitlePanel">
       <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
     </ng-container>
-    <div *ngIf="widget.showWidgetActions"
+    <ng-container *ngIf="!widgetComponent.widgetContext?.embedTitlePanel">
-         class="tb-widget-actions"
+      <ng-container *ngTemplateOutlet="widgetHeaderButtonAction"></ng-container>
-         [class]="{'tb-widget-actions-absolute': !(widget.showWidgetTitlePanel && !widgetComponent.widgetContext?.embedTitlePanel && (widget.showTitle||widget.hasAggregation))}"
+    </ng-container>
-         (mousedown)="$event.stopPropagation()">
-      <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"
-              type="button"
-              [class.!hidden]="isEdit || !action.show"
-              (click)="action.onAction($event)"
-              matTooltip="{{ action.name | translate }}"
-              matTooltipPosition="above">
-        <tb-icon>{{ action.icon }}</tb-icon>
-      </button>
-      <button mat-icon-button
-              type="button"
-              [class.!hidden]="isEdit || !widget.enableFullscreen"
-              (click)="$event.stopPropagation(); widget.isFullscreen = !widget.isFullscreen; updateEditWidgetActionsTooltipState()"
-              matTooltip="{{(widget.isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
-              matTooltipPosition="above">
-        <tb-icon>{{ widget.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</tb-icon>
-      </button>
-    </div>
   </div>
   <div class="tb-widget-content" [class.tb-no-interaction]="disableWidgetInteraction">
     <tb-widget #widgetComponent
@@ -68,7 +44,8 @@
                [isEdit]="isEdit"
                [isPreview]="isPreview"
                [isMobile]="isMobile"
-               [widgetTitlePanel]="widgetTitlePanel">
+               [widgetTitlePanel]="widgetTitlePanel"
+               [widgetHeaderButtonAction]="widgetHeaderButtonAction">
     </tb-widget>
   </div>
 </div>
@@ -102,6 +79,36 @@
   </div>
 </ng-template>
 
+<ng-template #widgetHeaderButtonAction>
+  <div *ngIf="widget.showWidgetActions"
+       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">
+      @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"
+            type="button"
+            [class.!hidden]="isEdit || !action.show"
+            (click)="action.onAction($event)"
+            matTooltip="{{ action.name | translate }}"
+            matTooltipPosition="above">
+      <tb-icon>{{ action.icon }}</tb-icon>
+    </button>
+    <button mat-icon-button
+            type="button"
+            [class.!hidden]="isEdit || !widget.enableFullscreen"
+            (click)="$event.stopPropagation(); widget.isFullscreen = !widget.isFullscreen; updateEditWidgetActionsTooltipState()"
+            matTooltip="{{(widget.isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
+            matTooltipPosition="above">
+      <tb-icon>{{ widget.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</tb-icon>
+    </button>
+  </div>
+</ng-template>
+
 <ng-template #widgetHeaderActionButton let-action="action" let-last="last">
 @switch (action.buttonType) {
   @case (widgetHeaderActionButtonType.miniFab) {

ui-ngx/src/app/modules/home/components/widget/widget.component.ts

@@ -75,6 +75,7 @@ import {
   widgetContextToken,
   widgetErrorMessagesToken,
   WidgetHeaderAction,
+  widgetHeaderButtonActionToken,
   WidgetInfo,
   widgetTitlePanelToken,
   WidgetTypeInstance
@@ -139,6 +140,9 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
   @Input()
   widgetTitlePanel: TemplateRef<any>;
 
+  @Input()
+  widgetHeaderButtonAction: TemplateRef<any>;
+
   @Input()
   isEdit: boolean;
 
@@ -817,6 +821,10 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
             {
               provide: widgetTitlePanelToken,
               useValue: this.widgetTitlePanel
+            },
+            {
+              provide: widgetHeaderButtonActionToken,
+              useValue: this.widgetHeaderButtonAction
             }
           ],
           parent: this.injector

ui-ngx/src/app/modules/home/models/widget-component.models.ts

@@ -559,6 +559,7 @@ export class LabelVariablePattern {
 export const widgetContextToken = new InjectionToken<WidgetContext>('widgetContext');
 export const widgetErrorMessagesToken = new InjectionToken<string[]>('errorMessages');
 export const widgetTitlePanelToken = new InjectionToken<TemplateRef<any>>('widgetTitlePanel');
+export const widgetHeaderButtonActionToken = new InjectionToken<TemplateRef<any>>('widgetHeaderButtonAction');
 
 export interface IDynamicWidgetComponent {
   readonly ctx: WidgetContext;