UI: Ref after review

application/src/main/data/json/system/widget_types/image_map.json

@@ -9,9 +9,9 @@
     "sizeX": 8.5,
     "sizeY": 6,
     "resources": [],
-    "templateHtml": "<tb-map-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-map-widget>",
+    "templateHtml": "<tb-map-widget \n    [ctx]=\"ctx\">\n</tb-map-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.mapWidget.onInit();\n};\n\nself.typeParameters = function() {\n    return {\n        hideDataTab: true,\n        hideDataSettings: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        datasourcesOptional: true,\n        additionalWidgetActionTypes: ['placeMapItem']\n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.mapWidget.onInit();\n};\n\nself.typeParameters = function() {\n    return {\n        hideDataTab: true,\n        hideDataSettings: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        datasourcesOptional: true,\n        additionalWidgetActionTypes: ['placeMapItem']\n    };\n}\n",
     "settingsForm": [],
     "dataKeySettingsForm": [],
     "settingsDirective": "tb-map-widget-settings",

application/src/main/data/json/system/widget_types/map.json

@@ -9,9 +9,9 @@
     "sizeX": 8.5,
     "sizeY": 6,
     "resources": [],
-    "templateHtml": "<tb-map-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-map-widget>",
+    "templateHtml": "<tb-map-widget \n    [ctx]=\"ctx\">\n</tb-map-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.mapWidget.onInit();\n};\n\nself.typeParameters = function() {\n    return {\n        hideDataTab: true,\n        hideDataSettings: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        datasourcesOptional: true,\n        additionalWidgetActionTypes: ['placeMapItem']\n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.mapWidget.onInit();\n};\n\nself.typeParameters = function() {\n    return {\n        hideDataTab: true,\n        hideDataSettings: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        datasourcesOptional: true,\n        additionalWidgetActionTypes: ['placeMapItem']\n    };\n}\n",
     "settingsForm": [],
     "dataKeySettingsForm": [],
     "settingsDirective": "tb-map-widget-settings",

application/src/main/data/json/system/widget_types/route_map.json

@@ -9,9 +9,9 @@
     "sizeX": 8.5,
     "sizeY": 6,
     "resources": [],
-    "templateHtml": "<tb-map-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-map-widget>",
+    "templateHtml": "<tb-map-widget \n    [ctx]=\"ctx\">\n</tb-map-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.mapWidget.onInit();\n};\n\nself.typeParameters = function() {\n    return {\n        trip: true,\n        hideDataTab: true,\n        hideDataSettings: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        datasourcesOptional: true,\n        additionalWidgetActionTypes: ['placeMapItem']\n    };\n}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.mapWidget.onInit();\n};\n\nself.typeParameters = function() {\n    return {\n        trip: true,\n        hideDataTab: true,\n        hideDataSettings: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        datasourcesOptional: true,\n        additionalWidgetActionTypes: ['placeMapItem']\n    };\n}",
     "settingsForm": [],
     "dataKeySettingsForm": [],
     "latestDataKeySettingsForm": [],

application/src/main/data/json/system/widget_types/trip_map.json

@@ -9,9 +9,9 @@
     "sizeX": 8.5,
     "sizeY": 6,
     "resources": [],
-    "templateHtml": "<tb-map-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-map-widget>",
+    "templateHtml": "<tb-map-widget \n    [ctx]=\"ctx\">\n</tb-map-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.mapWidget.onInit();\n};\n\nself.typeParameters = function() {\n    return {\n        trip: true,\n        hideDataTab: true,\n        hideDataSettings: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        datasourcesOptional: true,\n        additionalWidgetActionTypes: ['placeMapItem']\n    };\n}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.mapWidget.onInit();\n};\n\nself.typeParameters = function() {\n    return {\n        trip: true,\n        hideDataTab: true,\n        hideDataSettings: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        datasourcesOptional: true,\n        additionalWidgetActionTypes: ['placeMapItem']\n    };\n}",
     "settingsForm": [],
     "dataKeySettingsForm": [],
     "latestDataKeySettingsForm": [],

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, widgetHeaderButtonActionToken,
+  widgetErrorMessagesToken,
   widgetTitlePanelToken
 } from '@home/models/widget-component.models';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
@@ -72,7 +72,6 @@ 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,10 +17,14 @@
 -->
 <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 *ngTemplateOutlet="widgetTitlePanel"></ng-container>
-    </ng-container>
-    <ng-container *ngTemplateOutlet="widgetHeaderButtonAction"></ng-container>
+    @if (widgetComponent.dashboardWidget.showWidgetTitlePanel) {
+      <div class="tb-widget-title-row flex justify-between">
+        <ng-container *ngTemplateOutlet="widgetComponent.widgetTitlePanel"></ng-container>
+        <ng-container *ngTemplateOutlet="widgetComponent.widgetHeaderActionsPanel"></ng-container>
+      </div>
+    } @else {
+      <ng-container class="tb-widget-actions-absolute" *ngTemplateOutlet="widgetComponent.widgetHeaderActionsPanel; context: {absolute: true}"></ng-container>
+    }
   <div #mapElement>
   </div>
 </div>

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

@@ -34,6 +34,9 @@
   div.tb-widget-title {
     padding: 0;
   }
+  .tb-widget-title-row .tb-widget-actions {
+    margin: 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,14 +15,12 @@
 ///
 
 import {
-  AfterViewInit,
   ChangeDetectorRef,
   Component,
   ElementRef,
   Input,
   OnDestroy,
   OnInit,
-  TemplateRef,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
@@ -46,7 +44,7 @@ import { DomSanitizer } from '@angular/platform-browser';
   styleUrls: ['./map-widget.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
-export class MapWidgetComponent implements OnInit, OnDestroy, AfterViewInit {
+export class MapWidgetComponent implements OnInit, OnDestroy {
 
   @ViewChild('mapElement', {static: false})
   mapElement: ElementRef<HTMLElement>;
@@ -56,12 +54,6 @@ export class MapWidgetComponent implements OnInit, OnDestroy, AfterViewInit {
   @Input()
   ctx: WidgetContext;
 
-  @Input()
-  widgetTitlePanel: TemplateRef<any>;
-
-  @Input()
-  widgetHeaderButtonAction: TemplateRef<any>;
-
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
   padding: string;
@@ -83,14 +75,6 @@ export class MapWidgetComponent implements OnInit, OnDestroy, AfterViewInit {
     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-component.service.ts

@@ -631,6 +631,9 @@ export class WidgetComponentService {
         if (isUndefined(result.typeParameters.embedTitlePanel)) {
           result.typeParameters.embedTitlePanel = false;
         }
+        if (isUndefined(result.typeParameters.embedActionsPanel)) {
+          result.typeParameters.embedActionsPanel = false;
+        }
         if (isUndefined(result.typeParameters.overflowVisible)) {
           result.typeParameters.overflowVisible = false;
         }

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

@@ -33,8 +33,8 @@
     <ng-container *ngIf="!widgetComponent.widgetContext?.embedTitlePanel">
       <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
     </ng-container>
-    <ng-container *ngIf="!widgetComponent.widgetContext?.embedTitlePanel">
-      <ng-container *ngTemplateOutlet="widgetHeaderButtonAction"></ng-container>
+    <ng-container *ngIf="!widgetComponent.widgetContext?.embedActionsPanel">
+      <ng-container *ngTemplateOutlet="widgetHeaderActionsPanel"></ng-container>
     </ng-container>
   </div>
   <div class="tb-widget-content" [class.tb-no-interaction]="disableWidgetInteraction">
@@ -45,7 +45,7 @@
                [isPreview]="isPreview"
                [isMobile]="isMobile"
                [widgetTitlePanel]="widgetTitlePanel"
-               [widgetHeaderButtonAction]="widgetHeaderButtonAction">
+               [widgetHeaderActionsPanel]="widgetHeaderActionsPanel">
     </tb-widget>
   </div>
 </div>
@@ -79,10 +79,10 @@
   </div>
 </ng-template>
 
-<ng-template #widgetHeaderButtonAction>
+<ng-template #widgetHeaderActionsPanel let-absolute="absolute">
   <div *ngIf="widget.showWidgetActions"
        class="tb-widget-actions"
-       [class]="{'tb-widget-actions-absolute': !(widget.showWidgetTitlePanel && !widgetComponent.widgetContext?.embedTitlePanel && (widget.showTitle||widget.hasAggregation))}"
+       [class.tb-widget-actions-absolute]="widgetActionAbsolute(widgetComponent, absolute)"
        (mousedown)="$event.stopPropagation()">
     <div class="flex items-center">
       @for (action of widget.customHeaderActions; track action.name; let last = $last) {

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

@@ -48,6 +48,7 @@ import { TbContextMenuEvent } from '@shared/models/jquery-event.models';
 import { WidgetHeaderActionButtonType } from '@shared/models/widget.models';
 import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance;
 import ITooltipsterGeoHelper = JQueryTooltipster.ITooltipsterGeoHelper;
+import { WidgetComponent } from '@home/components/widget/widget.component';
 
 export enum WidgetComponentActionType {
   MOUSE_DOWN,
@@ -216,6 +217,12 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
     });
   }
 
+  widgetActionAbsolute(widgetComponent: WidgetComponent, absolute = false) {
+    return absolute ? true :
+      !(this.widget.showWidgetTitlePanel && !widgetComponent.widgetContext?.embedTitlePanel &&
+        (this.widget.showTitle||this.widget.hasAggregation)) && !widgetComponent.widgetContext?.embedActionsPanel;
+  }
+
   onClicked(event: MouseEvent): void {
     if (event && this.isEdit) {
       event.stopPropagation();

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

@@ -75,7 +75,6 @@ import {
   widgetContextToken,
   widgetErrorMessagesToken,
   WidgetHeaderAction,
-  widgetHeaderButtonActionToken,
   WidgetInfo,
   widgetTitlePanelToken,
   WidgetTypeInstance
@@ -141,7 +140,7 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
   widgetTitlePanel: TemplateRef<any>;
 
   @Input()
-  widgetHeaderButtonAction: TemplateRef<any>;
+  widgetHeaderActionsPanel: TemplateRef<any>;
 
   @Input()
   isEdit: boolean;
@@ -487,6 +486,7 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
     this.widgetType = this.widgetInfo.widgetTypeFunction;
     this.typeParameters = this.widgetInfo.typeParameters;
     this.widgetContext.embedTitlePanel = this.typeParameters.embedTitlePanel;
+    this.widgetContext.embedActionsPanel = this.typeParameters.embedActionsPanel;
     this.widgetContext.overflowVisible = this.typeParameters.overflowVisible;
 
     if (!this.widgetType) {
@@ -821,10 +821,6 @@ 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

@@ -312,6 +312,7 @@ export class WidgetContext {
   timeWindow?: WidgetTimewindow;
 
   embedTitlePanel?: boolean;
+  embedActionsPanel?: boolean;
   overflowVisible?: boolean;
 
   hideTitlePanel = false;
@@ -559,7 +560,6 @@ 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;

ui-ngx/src/app/shared/models/widget.models.ts

@@ -185,6 +185,7 @@ export interface WidgetTypeParameters {
   previewWidth?: string;
   previewHeight?: string;
   embedTitlePanel?: boolean;
+  embedActionsPanel?: boolean;
   overflowVisible?: boolean;
   hideDataTab?: boolean;
   hideDataSettings?: boolean;