wuic-framework-lib 1.3.0 → 1.5.0

package/fesm2022/{wuic-framework-lib-designer.component-N_CfbGnr.mjs → wuic-framework-lib-designer.component-x10ZzUEy.mjs}

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Pipe, EventEmitter, ElementRef, Renderer2, ChangeDetectorRef, HostListener, Input, Output, Inject, Directive, Component, computed, signal, untracked, inject, NgZone, numberAttribute, DOCUMENT, input, output, isDevMode, InjectionToken, Injector, contentChildren, contentChild, booleanAttribute, effect, HostBinding, ChangeDetectionStrategy } from '@angular/core';
+import { Pipe, EventEmitter, ElementRef, Renderer2, ChangeDetectorRef, HostListener, Input, Output, Inject, Directive, Component, computed, signal, untracked, inject, NgZone, numberAttribute, DOCUMENT, input, output, isDevMode, InjectionToken, Injector, contentChildren, contentChild, booleanAttribute, effect, HostBinding, ChangeDetectionStrategy, ViewChild } from '@angular/core';
 import * as i10 from 'primeng/splitter';
 import { SplitterModule } from 'primeng/splitter';
 import * as i12 from 'primeng/dragdrop';
 import { DragDropModule } from 'primeng/dragdrop';
 import { NgClass, NgStyle, NgTemplateOutlet, AsyncPipe, JsonPipe, NgFor, NgIf, NgComponentOutlet } from '@angular/common';
-import { W as WtoolboxService, D as DynamicGenericTemplateComponent, a as DynamicCompilerService, b as DataSourceComponent, c as DataRepeaterComponent, F as FilterBarComponent, L as LazyParametricDialogComponent, P as PagerComponent, M as MetadataProviderService, d as ParametricDialogComponent, e as MetadatiColonna, f as DataProviderService, U as UserInfoService, T as TranslationManagerService, g as MetadataEditorService, C as ChatbotHostRegistryService, h as WorkflowRuntimeMetadataService, i as FieldEditorComponent, j as MetadataEditorComponent, A as ArchetypeConfiguratorComponent } from './wuic-framework-lib-wuic-framework-lib-Deudd4MY.mjs';
+import { W as WtoolboxService, D as DynamicGenericTemplateComponent, a as DynamicCompilerService, b as DataSourceComponent, c as DataRepeaterComponent, F as FilterBarComponent, L as LazyParametricDialogComponent, P as PagerComponent, M as MetadataProviderService, d as ParametricDialogComponent, e as MetadatiColonna, f as DataProviderService, U as UserInfoService, T as TranslationManagerService, g as MetadataEditorService, C as ChatbotHostRegistryService, h as WorkflowRuntimeMetadataService, i as FieldEditorComponent, j as MetadataEditorComponent, A as ArchetypeConfiguratorComponent } from './wuic-framework-lib-wuic-framework-lib-3TZ-j-yL.mjs';
 import { fromEvent, BehaviorSubject, merge, filter, Observable, switchMap, take, map, takeUntil, tap, timeInterval, scan, mergeMap, of, delay, repeat, Subject, startWith, pairwise, skipWhile, combineLatest } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CdkAccordionModule, CdkAccordion, CdkAccordionItem } from '@angular/cdk/accordion';
@@ -17,12 +17,12 @@ import * as i2$1 from 'primeng/colorpicker';
 import { ColorPickerModule } from 'primeng/colorpicker';
 import * as i2$2 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
-import * as i8 from '@ngx-translate/core';
+import * as i2$3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i1$1 from '@angular/router';
 import { UrlSegmentGroup, UrlTree, ActivatedRouteSnapshot, RouterStateSnapshot, RouterState, ActivatedRoute } from '@angular/router';
 import { SafeSubscriber } from 'rxjs/internal/Subscriber';
-import * as i14 from 'primeng/contextmenu';
+import * as i10$1 from 'primeng/contextmenu';
 import { ContextMenuModule } from 'primeng/contextmenu';
 import * as i3 from 'primeng/api';
 import { TreeDragDropService } from 'primeng/api';
@@ -33,7 +33,7 @@ import * as i18 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import * as i2 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
-import * as i9 from 'primeng/menu';
+import * as i7 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
 import * as i4$1 from 'primeng/tree';
 import { TreeModule } from 'primeng/tree';
@@ -439,6 +439,23 @@ class NgxDraggableDomUtilities {
     }
 }
 
+/**
+ * Stato condiviso dello snap-to-grid del designer.
+ *
+ * Sorgente di verita' NEUTRA (nessun import Angular) letta dalle direttive di
+ * drag (`NgxDraggableDomDirective`) e resize (`AngularResizableDirective`) e
+ * scritta da `DesignerComponent.toggleSnapToGrid`. Serve perche' quelle
+ * direttive sono applicate agli elementi via TEMPLATE DINAMICO generato
+ * (`DynamicDashboardTemplateComponent` riscrive `ngxDraggableDom="true"`), dove
+ * non e' pratico bindare un `[snapGridSize]` per-elemento. Un modulo neutro
+ * evita anche l'import circolare direttiva <-> componente.
+ *
+ * `gridSize` = passo in px quando lo snap e' attivo, 0 = snap off.
+ */
+const DesignerSnapState = {
+    gridSize: 0,
+};
+
 class NgxDraggableDomDirective {
     el;
     renderer;
@@ -840,6 +857,16 @@ class NgxDraggableDomDirective {
                 translation = boundsCheck.translation;
             }
         }
+        // Designer snap-to-grid: arrotonda la posizione ASSOLUTA dell'elemento al
+        // multiplo di griglia, poi riporta il delta nel translation. `offsetLeft`/
+        // `offsetTop` NON includono il transform, quindi (offset + translation) e' la
+        // posizione visiva reale sul canvas (offsetParent). No-op se snap off.
+        const _snapGrid = DesignerSnapState.gridSize;
+        if (_snapGrid && _snapGrid > 0) {
+            const _dragEl = this.el.nativeElement;
+            translation.x = Math.round((_dragEl.offsetLeft + translation.x) / _snapGrid) * _snapGrid - _dragEl.offsetLeft;
+            translation.y = Math.round((_dragEl.offsetTop + translation.y) / _snapGrid) * _snapGrid - _dragEl.offsetTop;
+        }
         // if it is possible, get the transform from the computed style and modify the matrix to maintain transform properties
         if (window) {
             // update the x and y values as part of the matrix
@@ -2048,6 +2075,12 @@ class AngularResizableDirective {
                 this._gridSize = { x: this.rzGrid[0], y: this.rzGrid[1] };
             }
         }
+        else if (DesignerSnapState.gridSize && DesignerSnapState.gridSize > 0) {
+            // Designer snap-to-grid (stato condiviso): usa il passo griglia quando lo
+            // snap e' attivo e nessun `rzGrid` esplicito e' bindato (il designer
+            // applica la direttiva via template dinamico, senza binding per-elemento).
+            this._gridSize = { x: DesignerSnapState.gridSize, y: DesignerSnapState.gridSize };
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AngularResizableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: AngularResizableDirective, isStandalone: true, selector: "[ngResizable]", inputs: { ngResizable: "ngResizable", rzHandles: "rzHandles", rzHandleDoms: "rzHandleDoms", rzAspectRatio: "rzAspectRatio", rzContainment: "rzContainment", rzGrid: "rzGrid", rzMinWidth: "rzMinWidth", rzMinHeight: "rzMinHeight", rzMaxWidth: "rzMaxWidth", rzMaxHeight: "rzMaxHeight", rzScale: "rzScale", preventDefaultEvent: "preventDefaultEvent" }, outputs: { rzStart: "rzStart", rzResizing: "rzResizing", rzStop: "rzStop" }, usesOnChanges: true, ngImport: i0 });
@@ -2202,11 +2235,11 @@ class TabViewWrapperComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TabViewWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TabViewWrapperComponent, isStandalone: true, selector: "p-tabView", inputs: { tabs: "tabs", activeIndex: "activeIndex" }, ngImport: i0, template: "<div data-pc-name=\"tabview\" class=\"p-tabview p-component\">\n  <div class=\"p-tabview-nav-container\">\n    <div class=\"p-tabview-nav-content\" data-pc-section=\"navcontent\">\n      <ul role=\"tablist\" class=\"p-tabview-nav\" data-pc-section=\"nav\">\n        @for (tab of tabs; track tab; let i = $index) {\n          <li role=\"presentation\" data-p-disabled=\"false\"\n            [ngClass]=\"{'p-highlight': activeIndex == i}\">\n            <button type=\"button\" role=\"tab\" pripple=\"\" class=\"p-element p-ripple p-tabview-nav-link\" (click)=\"setIndex(i)\"\n              [attr.aria-selected]=\"activeIndex == i\" [attr.tabindex]=\"i\" aria-disabled=\"false\"\n              [attr.data-pc-index]=\"i\" data-pc-section=\"headeraction\">\n              <span class=\"p-tabview-title\">\n                {{tab.inputs.header}}\n              </span>\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n  <div class=\"p-tabview-panels\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [".p-tabview.p-component{height:100%}.p-tabview .p-tabview-nav-content{scroll-padding-inline:3rem}.p-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto}.p-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.p-tabview .p-tabview-nav li .p-tabview-nav-link{border-width:0 0 2px 0;padding:1.25rem;font-weight:700;border-top-right-radius:6px;border-top-left-radius:6px;transition:box-shadow .2s;margin:0 0 -2px}.p-tabview-nav-link{appearance:none;background:transparent;border:none;font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden;width:100%}.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link{border-color:var(--p-primary-color, #3B82F6);color:var(--p-primary-color, #3B82F6);background-color:transparent}.p-tabview-panels{height:calc(100% - 60px);overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TabViewWrapperComponent, isStandalone: true, selector: "p-tabView", inputs: { tabs: "tabs", activeIndex: "activeIndex" }, ngImport: i0, template: "<div data-pc-name=\"tabview\" class=\"p-tabview p-component\">\n  <div class=\"p-tabview-nav-container\">\n    <div class=\"p-tabview-nav-content\" data-pc-section=\"navcontent\">\n      <ul role=\"tablist\" class=\"p-tabview-nav\" data-pc-section=\"nav\">\n        @for (tab of tabs; track tab; let i = $index) {\n          <li role=\"presentation\" data-p-disabled=\"false\"\n            [ngClass]=\"{'p-highlight': tab.inputs?.selected}\">\n            <button type=\"button\" role=\"tab\" pripple=\"\" class=\"p-element p-ripple p-tabview-nav-link\" (click)=\"setIndex(i)\"\n              [attr.aria-selected]=\"tab.inputs?.selected\" [attr.tabindex]=\"i\" aria-disabled=\"false\"\n              [attr.data-pc-index]=\"i\" data-pc-section=\"headeraction\">\n              <span class=\"p-tabview-title\">\n                {{tab.inputs.header}}\n              </span>\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n  <div class=\"p-tabview-panels\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [".p-tabview.p-component{height:100%}.p-tabview .p-tabview-nav-content{scroll-padding-inline:3rem}.p-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto}.p-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.p-tabview .p-tabview-nav li .p-tabview-nav-link{border-width:0 0 2px 0;padding:1.25rem;font-weight:700;border-top-right-radius:6px;border-top-left-radius:6px;transition:box-shadow .2s;margin:0 0 -2px}.p-tabview-nav-link{appearance:none;background:transparent;border:none;font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden;width:100%}.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link{border-color:var(--p-primary-color, #3B82F6);color:var(--p-primary-color, #3B82F6);background-color:transparent}.p-tabview-panels{height:calc(100% - 60px);overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TabViewWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'p-tabView', imports: [NgClass], template: "<div data-pc-name=\"tabview\" class=\"p-tabview p-component\">\n  <div class=\"p-tabview-nav-container\">\n    <div class=\"p-tabview-nav-content\" data-pc-section=\"navcontent\">\n      <ul role=\"tablist\" class=\"p-tabview-nav\" data-pc-section=\"nav\">\n        @for (tab of tabs; track tab; let i = $index) {\n          <li role=\"presentation\" data-p-disabled=\"false\"\n            [ngClass]=\"{'p-highlight': activeIndex == i}\">\n            <button type=\"button\" role=\"tab\" pripple=\"\" class=\"p-element p-ripple p-tabview-nav-link\" (click)=\"setIndex(i)\"\n              [attr.aria-selected]=\"activeIndex == i\" [attr.tabindex]=\"i\" aria-disabled=\"false\"\n              [attr.data-pc-index]=\"i\" data-pc-section=\"headeraction\">\n              <span class=\"p-tabview-title\">\n                {{tab.inputs.header}}\n              </span>\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n  <div class=\"p-tabview-panels\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [".p-tabview.p-component{height:100%}.p-tabview .p-tabview-nav-content{scroll-padding-inline:3rem}.p-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto}.p-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.p-tabview .p-tabview-nav li .p-tabview-nav-link{border-width:0 0 2px 0;padding:1.25rem;font-weight:700;border-top-right-radius:6px;border-top-left-radius:6px;transition:box-shadow .2s;margin:0 0 -2px}.p-tabview-nav-link{appearance:none;background:transparent;border:none;font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden;width:100%}.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link{border-color:var(--p-primary-color, #3B82F6);color:var(--p-primary-color, #3B82F6);background-color:transparent}.p-tabview-panels{height:calc(100% - 60px);overflow:auto}\n"] }]
+            args: [{ selector: 'p-tabView', imports: [NgClass], template: "<div data-pc-name=\"tabview\" class=\"p-tabview p-component\">\n  <div class=\"p-tabview-nav-container\">\n    <div class=\"p-tabview-nav-content\" data-pc-section=\"navcontent\">\n      <ul role=\"tablist\" class=\"p-tabview-nav\" data-pc-section=\"nav\">\n        @for (tab of tabs; track tab; let i = $index) {\n          <li role=\"presentation\" data-p-disabled=\"false\"\n            [ngClass]=\"{'p-highlight': tab.inputs?.selected}\">\n            <button type=\"button\" role=\"tab\" pripple=\"\" class=\"p-element p-ripple p-tabview-nav-link\" (click)=\"setIndex(i)\"\n              [attr.aria-selected]=\"tab.inputs?.selected\" [attr.tabindex]=\"i\" aria-disabled=\"false\"\n              [attr.data-pc-index]=\"i\" data-pc-section=\"headeraction\">\n              <span class=\"p-tabview-title\">\n                {{tab.inputs.header}}\n              </span>\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n  <div class=\"p-tabview-panels\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [".p-tabview.p-component{height:100%}.p-tabview .p-tabview-nav-content{scroll-padding-inline:3rem}.p-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto}.p-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.p-tabview .p-tabview-nav li .p-tabview-nav-link{border-width:0 0 2px 0;padding:1.25rem;font-weight:700;border-top-right-radius:6px;border-top-left-radius:6px;transition:box-shadow .2s;margin:0 0 -2px}.p-tabview-nav-link{appearance:none;background:transparent;border:none;font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden;width:100%}.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link{border-color:var(--p-primary-color, #3B82F6);color:var(--p-primary-color, #3B82F6);background-color:transparent}.p-tabview-panels{height:calc(100% - 60px);overflow:auto}\n"] }]
         }], propDecorators: { tabs: [{
                 type: Input
             }], activeIndex: [{
@@ -3352,6 +3385,23 @@ class DynamicDashboardTemplateComponent {
      * does not trigger a spurious commit.
      */
     static lastDesignerGestureTimestamp = 0;
+    /**
+     * Dimensione della griglia di snap (px) per drag/resize nel designer.
+     * 0 = snap disattivato (comportamento libero, default). Impostato staticamente
+     * da DesignerComponent quando l'utente attiva "snap alla griglia": statico per
+     * lo stesso motivo di lastDesignerGestureTimestamp (ogni elemento ha la propria
+     * istanza di template). onMoving/onResizing arrotondano posizione/dimensione al
+     * multiplo piu' vicino quando > 0.
+     */
+    static snapGridSize = 0;
+    /** Arrotonda un valore al multiplo di `snapGridSize` (no-op se snap off). */
+    static snap(value) {
+        const g = DynamicDashboardTemplateComponent.snapGridSize;
+        if (!g || g <= 0) {
+            return value;
+        }
+        return Math.round(value / g) * g;
+    }
     /**
      * Input dal componente padre per inputs; usata nella configurazione e nel rendering del componente.
      */
@@ -3460,8 +3510,8 @@ class DynamicDashboardTemplateComponent {
         }
         else {
         }
-        element.inputs.width = event.size.width + 'px';
-        element.inputs.height = event.size.height + 'px';
+        element.inputs.width = DynamicDashboardTemplateComponent.snap(event.size.width) + 'px';
+        element.inputs.height = DynamicDashboardTemplateComponent.snap(event.size.height) + 'px';
         // Mark "designer mutation in progress" so the next window:mouseup in
         // DesignerComponent commits a history snapshot. See the field doc.
         DynamicDashboardTemplateComponent.lastDesignerGestureTimestamp = Date.now();
@@ -3492,6 +3542,11 @@ class DynamicDashboardTemplateComponent {
                 scaleY = matrix[3];
             }
         }
+        // La direttiva ngx-draggable-dom snappa gia' la traslazione alla griglia
+        // ASSOLUTA (offsetLeft/Top + delta), quindi $event.position e' gia' allineato.
+        // NON ri-snappare con DynamicDashboardTemplateComponent.snap(): e' un
+        // arrotondamento grid-STEP che, applicato a una traslazione gia' assoluta,
+        // la disallineava (l'offset visto sui box trascinati).
         element.inputs.transform = `matrix(${scaleX}, ${skewY}, ${skewX}, ${scaleY}, ${$event.position.x}, ${$event.position.y})`;
         // Mark "designer mutation in progress" so the next window:mouseup in
         // DesignerComponent commits a history snapshot. See the field doc.
@@ -3724,6 +3779,24 @@ class DashboardComponent {
      * Input dal componente padre per dashboard elements; usata nella configurazione e nel rendering del componente.
      */
     dashboardElements;
+    /**
+     * Layout assoluto vs flusso normale: il "modo" con cui la dashboard e' stata
+     * SALVATA e' codificato per-elemento nel boardcontent (`inputs.position`).
+     * Se almeno un figlio diretto e' `absolute`/`fixed`, questo host deve diventare
+     * il contesto di posizionamento dei figli (altrimenti risalgono al viewport e
+     * finiscono sopra il menu fixed). In flusso normale la classe NON viene
+     * applicata -> nessun cambiamento di layout, retrocompatibile.
+     *
+     * Vale sia top-level (host = area dashboard sotto il menu) sia annidato
+     * (host = dentro il container `position:relative` gia' salvato dal designer):
+     * in entrambi i casi il figlio absolute risolve left/top rispetto a questo box.
+     */
+    get hasAbsoluteLayout() {
+        return (this.dashboardElements || []).some((el) => {
+            const pos = String(el?.inputs?.position || '').trim().toLowerCase();
+            return pos === 'absolute' || pos === 'fixed';
+        });
+    }
     /**
    * function Object() { [native code] }
    */
@@ -3755,13 +3828,16 @@ class DashboardComponent {
     }
     ;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DashboardComponent, isStandalone: true, selector: "wuic-dashboard", inputs: { dashboardElements: "dashboardElements" }, ngImport: i0, template: "@for (dashboardElement of dashboardElements; track dashboardElement.uniqueName) {\r\n<ng-container *ngComponentOutlet=\"getComponent(dashboardElement); inputs: getComponentInputs(dashboardElement)\"></ng-container>\r\n}\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DashboardComponent, isStandalone: true, selector: "wuic-dashboard", inputs: { dashboardElements: "dashboardElements" }, host: { properties: { "class.wuic-dashboard-absolute-layout": "this.hasAbsoluteLayout" } }, ngImport: i0, template: "@for (dashboardElement of dashboardElements; track dashboardElement.uniqueName) {\r\n<ng-container *ngComponentOutlet=\"getComponent(dashboardElement); inputs: getComponentInputs(dashboardElement)\"></ng-container>\r\n}\r\n", styles: [":host(.wuic-dashboard-absolute-layout){position:relative;display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wuic-dashboard', imports: [NgComponentOutlet], template: "@for (dashboardElement of dashboardElements; track dashboardElement.uniqueName) {\r\n<ng-container *ngComponentOutlet=\"getComponent(dashboardElement); inputs: getComponentInputs(dashboardElement)\"></ng-container>\r\n}\r\n" }]
+            args: [{ selector: 'wuic-dashboard', imports: [NgComponentOutlet], template: "@for (dashboardElement of dashboardElements; track dashboardElement.uniqueName) {\r\n<ng-container *ngComponentOutlet=\"getComponent(dashboardElement); inputs: getComponentInputs(dashboardElement)\"></ng-container>\r\n}\r\n", styles: [":host(.wuic-dashboard-absolute-layout){position:relative;display:block;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dashboardElements: [{
                 type: Input
+            }], hasAbsoluteLayout: [{
+                type: HostBinding,
+                args: ['class.wuic-dashboard-absolute-layout']
             }] } });
 
 class CssSheetEditorComponent {
@@ -4527,79 +4603,12 @@ class DesignerComponent {
         this.metadataEditorSrv = metadataEditorSrv;
         this.chatbotHostRegistry = chatbotHostRegistry;
         this.workflowRuntimeMetadata = workflowRuntimeMetadata;
-        this.defaultCtxItems = [
-            {
-                label: this.t('designer.edit_properties', 'Edit properties'),
-                icon: 'pi pi-cog',
-                command: () => {
-                    if (this.ctxElement) {
-                        this.selectDashboardItem(this.ctxElement);
-                        this.cd.detectChanges();
-                    }
-                }
-            },
-            {
-                label: this.t('designer.remove', 'Remove'),
-                icon: 'pi pi-trash',
-                command: (menuItem) => {
-                    if (this.ctxElement) {
-                        this.removeElementByName(this.ctxElement.uniqueName);
-                    }
-                }
-            }
-        ];
+        // Context menu elemento: UNICA sorgente per tutti e tre i punti di accesso
+        // (canvas / gerarchia / footer breadcrumb) -> `buildElementContextMenuItems`.
+        // I tre handler `show*ContextMenu` ripopolano il rispettivo array con
+        // l'elemento risolto al click, cosi' le voci sono sempre identiche.
+        this.defaultCtxItems = this.buildElementContextMenuItems(null);
         this.ctxItems.next(this.defaultCtxItems);
-        this.footerCtxItems = [
-            {
-                label: this.t('designer.edit_properties', 'Edit properties'),
-                icon: 'pi pi-cog',
-                command: () => {
-                    if (this.footerCtxElement) {
-                        this.selectDashboardItem(this.footerCtxElement);
-                        this.cd.detectChanges();
-                    }
-                }
-            },
-            {
-                label: this.t('designer.rename', 'Rename'),
-                icon: 'pi pi-pencil',
-                command: () => {
-                    this.renameFooterContextItem();
-                }
-            },
-            {
-                label: this.t('designer.remove', 'Remove'),
-                icon: 'pi pi-trash',
-                command: () => {
-                    const uniqueName = String(this.footerCtxElement?.uniqueName || '').trim();
-                    if (uniqueName) {
-                        this.removeElementByName(uniqueName);
-                    }
-                }
-            }
-        ];
-        this.hierarchyCtxItems = [
-            {
-                label: this.t('designer.edit_properties', 'Edit properties'),
-                icon: 'pi pi-cog',
-                command: () => {
-                    if (this.hierarchyCtxElement) {
-                        this.selectDashboardItem(this.hierarchyCtxElement);
-                        this.cd.detectChanges();
-                    }
-                }
-            },
-            {
-                label: this.t('designer.remove', 'Remove'),
-                icon: 'pi pi-trash',
-                command: () => {
-                    const uniqueName = String(this.hierarchyCtxElement?.uniqueName || '').trim();
-                    if (uniqueName) {
-                        this.removeElementByName(uniqueName);
-                    }
-                }
-            }
-        ];
         this.htmlStyleString = '[ngClass]="0.cssClass" [ngStyle]="{width: 0.width, maxWidth: 0.maxWidth, height: 0.height, maxHeight: 0.maxHeight, minWidth: 0.minWidth, minHeight: 0.minHeight, position: 0.position, left: 0.left, top: 0.top, float: 0.float, display: 0.display, boxSizing: 0.boxSizing, backgroundColor: 0.backgroundColor, color: 0.color, borderRadius: 0.borderRadius, borderBottomStyle: 0.borderBottomStyle, borderBottomWidth: 0.borderBottomWidth, borderBottomColor: 0.borderBottomColor, borderLeftStyle: 0.borderLeftStyle, borderLeftWidth: 0.borderLeftWidth, borderLeftColor: 0.borderLeftColor, borderRightStyle: 0.borderRightStyle, borderRightWidth: 0.borderRightWidth, borderRightColor: 0.borderRightColor, borderTopStyle: 0.borderTopStyle, borderTopWidth: 0.borderTopWidth, borderTopColor: 0.borderTopColor, paddingTop: 0.paddingTop, paddingRight: 0.paddingRight, paddingBottom: 0.paddingBottom, paddingLeft: 0.paddingLeft, marginTop: 0.marginTop, marginRight: 0.marginRight, marginBottom: 0.marginBottom, marginLeft: 0.marginLeft, fontSize: 0.fontSize, fontFamily: 0.fontFamily, fontWeight: 0.fontWeight, fontStyle: 0.fontStyle, textDecoration: 0.textDecoration, textAlign: 0.textAlign, verticalAlign: 0.verticalAlign, lineHeight: 0.lineHeight, letterSpacing: 0.letterSpacing, wordSpacing: 0.wordSpacing, textTransform: 0.textTransform, textIndent: 0.textIndent, whiteSpace: 0.whiteSpace, wordWrap: 0.wordWrap, wordBreak: 0.wordBreak, overflow: 0.overflow, overflowX: 0.overflowX, overflowY: 0.overflowY, zIndex: 0.zIndex, cursor: 0.cursor, visibility: 0.visibility, opacity: 0.opacity, filter: 0.filter, transform: 0.transform, transformOrigin: 0.transformOrigin, transition: 0.transition, boxShadow: 0.boxShadow, textShadow: 0.textShadow, backgroundPosition: 0.backgroundPosition, backgroundRepeat: 0.backgroundRepeat, backgroundAttachment: 0.backgroundAttachment, backgroundSize: 0.backgroundSize, backgroundImage: 0.backgroundImage, backgroundClip: 0.backgroundClip, backgroundOrigin: 0.backgroundOrigin, backgroundBlendMode: 0.backgroundBlendMode, clip: 0.clip, clipPath: 0.clipPath, clipRule: 0.clipRule, mask: 0.mask, maskType: 0.maskType, maskImage: 0.maskImage, maskMode: 0.maskMode, maskSize: 0.maskSize, maskRepeat: 0.maskRepeat, maskPosition: 0.maskPosition, maskClip: 0.maskClip, maskOrigin: 0.maskOrigin, maskComposite: 0.maskComposite, maskBorder: 0.maskBorder, maskBorderSource: 0.maskBorderSource, maskBorderSlice: 0.maskBorderSlice, maskBorderWidth: 0.maskBorderWidth, maskBorderOutset: 0.maskBorderOutset, maskBorderRepeat: 0.maskBorderRepeat, maskBorderMode: 0.maskBorderMode, maskBorderClip: 0.maskBorderClip, maskBorderOrigin: 0.maskBorderOrigin, maskBorder, tableLayout: 0.tableLayout, borderCollapse: 0.borderCollapse, borderSpacing: 0.borderSpacing, captionSide: 0.captionSide, emptyCells: 0.emptyCells, tableCaption: 0.tableCaption, tableBorder: 0.tableBorder, tableBorderSpacing: 0.tableBorderSpacing, tableBorderCollapse: 0.tableBorderCollapse, listStyle: 0.listStyle}"';
         this.htmlInputProperties = {
             animation: { type: 'string' },
@@ -5108,6 +5117,27 @@ class DesignerComponent {
                     height: '280px'
                 })
             },
+            {
+                group: 'HTML',
+                toolId: 130,
+                name: 'IMAGE',
+                tag: `<wuic-image-wrapper-lazy [attr.id]="uniqueName"  [src]="inputs.src" [alt]="inputs.alt" [preview]="inputs.preview" [previewImageSrc]="inputs.previewImageSrc" [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'se'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}></wuic-image-wrapper-lazy>`,
+                icon: 'pi pi-images',
+                inputProps: Object.assign({}, this.htmlInputProperties, {
+                    src: { type: 'string', propertyCaption: 'Source URL' },
+                    previewImageSrc: { type: 'string', propertyCaption: 'Preview (full-size) URL' },
+                    alt: { type: 'string', propertyCaption: 'Alt text' },
+                    preview: { type: 'boolean', propertyCaption: 'Enable lightbox preview' }
+                }),
+                inputs: Object.assign({}, this.htmlInputs, {
+                    src: '',
+                    previewImageSrc: '',
+                    alt: '',
+                    preview: true,
+                    width: '240px',
+                    height: '160px'
+                })
+            },
             {
                 group: 'HTML',
                 toolId: 7,
@@ -5476,7 +5506,10 @@ class DesignerComponent {
                     selected: { type: 'boolean', propertyCaption: 'Selected', hide: true }
                 },
                 inputs: { header: '<header>' },
-                nestedComponents: []
+                nestedComponents: [],
+                // Appena droppato dentro un TABVIEW il tab deve diventare quello attivo,
+                // altrimenti la sua area non e' visibile e non ci si possono droppare figli.
+                onDrop: this.dropTabPanel.bind(this)
             },
             {
                 group: 'CONTAINER',
@@ -5722,7 +5755,18 @@ class DesignerComponent {
                     // Aggiorna il last top-level per i prossimi placeholder. NB: usiamo
                     // findLastInjectedNode per pescare l'istanza vera (con onDrop appena
                     // eseguito = TR/TD/AREA gia' popolati), non il template clonato.
-                    lastTopLevelInjected = this.findLastInjectedNode(String(node.tool_name || ''), topParent) || lastTopLevelInjected;
+                    // FIX 2026-06-21 (designer-canvas-verify [2], layout 3-colonne): aggiorna
+                    // SOLO se il nodo iniettato e' un CONTAINER che auto-crea celle/aree
+                    // referenziabili via placeholder (TABLE/SPLITTER/ACCORDION/TABVIEW). I
+                    // leaf (DATASOURCE/DATAREPEATER/LABEL/...) NON devono sostituirlo: altrimenti
+                    // i placeholder <TD-N>/<AREA-N> dei nodi SUCCESSIVI risolverebbero contro
+                    // il leaf invece del container -> errore "Placeholder '<TD-0>' non
+                    // risolvibile dentro DATASOURCE__6" e i DATAREPEATER restano 0/3. Cosi'
+                    // tutti i nodi di un layout multi-cella risolvono contro lo stesso container.
+                    const PLACEHOLDER_CONTAINERS = ['TABLE', 'SPLITTER', 'ACCORDION', 'TABVIEW'];
+                    if (PLACEHOLDER_CONTAINERS.indexOf(String(node.tool_name || '').toUpperCase()) >= 0) {
+                        lastTopLevelInjected = this.findLastInjectedNode(String(node.tool_name || ''), topParent) || lastTopLevelInjected;
+                    }
                 }
                 const rationale = (action?.['rationale'] || '').toString().slice(0, 100);
                 return { ok: true, message: `Iniettati ${totalInjected} elementi nel designer${rationale ? ': ' + rationale : ''}.` };
@@ -6092,6 +6136,48 @@ class DesignerComponent {
      *
      * Ritorna il numero di elementi creati (1 + somma dei children).
      */
+    /**
+     * Inietta la config di archetipo (`md_props_bag.archetypes.<action>`) nel
+     * `metaInfo.tableMetadata` del DATASOURCE bindato a un DATAREPEATER appena
+     * droppato. NESSUNA chiamata server: muta solo lo stato in-memory del
+     * datasource (md_props_bag + extraProps.archetypes) e ri-emette `fetchInfo$`
+     * cosi' il DATAREPEATER reagisce e renderizza l'archetipo configurato. La
+     * config viene poi serializzata insieme al datasource quando l'utente salva
+     * la dashboard (boardcontent), coerente con AGENTS regola 7 (md_props_bag e'
+     * la fonte di verita', extraProps e' la proiezione runtime).
+     * @param dsBinding il binding gia' idratato (`{uniqueName, component: BehaviorSubject<DataSourceComponent>}`)
+     * @param action    l'archetipo (chart/map/scheduler/kanban/tree/carousel/spreadsheet/...)
+     * @param config    oggetto config = contenuto di archetypes.<action>
+     */
+    /**
+     * Applica `archetype_config` (dal nodo designer_inject) a un DATAREPEATER tool
+     * APPENA droppato, posticipando finche' il DataSourceComponent bindato e'
+     * materializzato (`fetchData` disponibile). Poi delega ad
+     * {@link applyArchetypeConfigToTool} — il path proven del configuratore.
+     */
+    deferApplyArchetypeConfig(tool, action, config) {
+        if (!tool || !action || !config || typeof config !== 'object')
+            return;
+        let tries = 0;
+        const attempt = () => {
+            const ds = tool.inputs?.['datasource']?.component?.value;
+            if (ds && typeof ds.fetchData === 'function') {
+                try {
+                    this.applyArchetypeConfigToTool(tool, action, config);
+                }
+                catch (e) {
+                    try {
+                        console.warn('[deferApplyArchetypeConfig] apply failed', e);
+                    }
+                    catch { /* */ }
+                }
+                return;
+            }
+            if (tries++ < 60)
+                setTimeout(attempt, 200); // ~12s max per la materializzazione del ds
+        };
+        attempt();
+    }
     async injectLayoutNode(node, parentUniqueName) {
         const toolName = String(node?.tool_name || '').trim();
         if (!toolName)
@@ -6365,6 +6451,25 @@ class DesignerComponent {
                     }
                     catch { /* ignore */ }
                 }
+                // CONFIG ARCHETIPO INLINE: il nodo puo' portare `archetype_config`
+                // (= md_props_bag.archetypes.<action> JSON, es. chart {type,options,
+                // dataOptions}, map {zoom,center,...}, scheduler {fromField,...},
+                // kanban {statusField,statusColumns,...}). NESSUNA chiamata server: la
+                // config viene scritta nel metaInfo.tableMetadata del DATASOURCE bindato
+                // (md_props_bag + extraProps.archetypes); il DATAREPEATER reagisce via
+                // fetchInfo$ e renderizza l'archetipo configurato. Persiste alla
+                // serializzazione del datasource quando si salva la dashboard.
+                const archCfg = (node && (node.archetype_config || node.archetypeConfig))
+                    || (node?.inputs && (node.inputs.archetype_config || node.inputs.archetypeConfig))
+                    || null;
+                if (archCfg && typeof archCfg === 'object') {
+                    // Defer: il DataSourceComponent bindato (e l'archetipo renderizzato) si
+                    // materializzano async dopo il drop. Aspetta che il ds sia pronto
+                    // (fetchData disponibile), poi applica via il path PROVEN del configuratore
+                    // (`applyArchetypeConfigToTool`: customProps_<action> + metaInfo + ds.fetchData
+                    // + propertyTreeBuilder) — lo STESSO usato da "Configura chart".
+                    this.deferApplyArchetypeConfig(justInjected, String(action), archCfg);
+                }
             }
         }
         let count = 1;
@@ -7393,11 +7498,53 @@ class DesignerComponent {
         if (this.isTypingTarget(event.target)) {
             return;
         }
+        const rawKey = String(event.key || '');
         const ctrlOrMeta = !!event.ctrlKey || !!event.metaKey;
+        // ---- Scorciatoie SENZA modificatore (feature B) ----
         if (!ctrlOrMeta) {
+            // Delete/Backspace: rimuove l'elemento selezionato (o TUTTI i multi-selezionati).
+            if (rawKey === 'Delete' || rawKey === 'Backspace') {
+                if (this.selectedTools.length > 1) {
+                    event.preventDefault();
+                    const names = this.selectedTools.map((t) => t.uniqueName);
+                    this.clearMultiSelection();
+                    names.forEach((n) => this.removeElementByName(n));
+                    this.commitHistoryIfChanged();
+                    return;
+                }
+                if (this.tool?.uniqueName) {
+                    event.preventDefault();
+                    this.removeElementByName(this.tool.uniqueName);
+                    this.commitHistoryIfChanged();
+                    return;
+                }
+            }
+            // Frecce: nudge di posizione dell'elemento selezionato (passo = gridSize se
+            // snap attivo, altrimenti 1px; con Shift un passo piu' grande).
+            const nudges = {
+                ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1]
+            };
+            if (nudges[rawKey] && (this.tool || this.selectedTools.length > 1)) {
+                event.preventDefault();
+                const step = (this.snapToGridEnabled ? this.gridSize : 1) * (event.shiftKey ? 5 : 1);
+                const ux = nudges[rawKey][0] * step, uy = nudges[rawKey][1] * step;
+                if (this.selectedTools.length > 1) {
+                    this.nudgeElements(this.selectedTools, ux, uy);
+                }
+                else {
+                    this.nudgeSelectedElement(ux, uy);
+                }
+                return;
+            }
+            return;
+        }
+        const key = rawKey.toLowerCase();
+        // Ctrl/Cmd+S: salva (previene il dialog di salvataggio del browser).
+        if (key === 's') {
+            event.preventDefault();
+            void this.saveDashboard();
             return;
         }
-        const key = String(event.key || '').toLowerCase();
         if (key === 'z' && event.shiftKey) {
             event.preventDefault();
             this.redo();
@@ -7411,6 +7558,28 @@ class DesignerComponent {
         if (key === 'y') {
             event.preventDefault();
             this.redo();
+            return;
+        }
+        if (key === 'd') {
+            event.preventDefault();
+            void this.duplicateDesignerElement(this.tool);
+            return;
+        }
+        if (key === 'c') {
+            // Non intercettare Ctrl+C se l'utente sta copiando una selezione di testo.
+            const textSelection = (typeof window !== 'undefined' && window.getSelection)
+                ? String(window.getSelection() || '')
+                : '';
+            if (textSelection) {
+                return;
+            }
+            event.preventDefault();
+            this.copyDesignerElement(this.tool);
+            return;
+        }
+        if (key === 'v') {
+            event.preventDefault();
+            void this.pasteDesignerElement();
         }
     }
     /**
@@ -7636,12 +7805,49 @@ class DesignerComponent {
             {
                 separator: true
             },
+            {
+                label: this.t('designer.menu_export_json', 'Esporta JSON'),
+                icon: 'pi pi-download',
+                command: () => this.exportDashboardJson()
+            },
+            {
+                label: this.t('designer.menu_import_json', 'Importa JSON'),
+                icon: 'pi pi-upload',
+                command: () => this.importDashboardJson()
+            },
+            {
+                label: this.t('designer.menu_save_preset', 'Salva come preset'),
+                icon: 'pi pi-bookmark',
+                command: () => this.saveDashboardAsPreset()
+            },
+            {
+                label: this.t('designer.menu_apply_preset', 'Applica preset'),
+                icon: 'pi pi-bookmark-fill',
+                command: () => this.applyDashboardPreset()
+            },
+            {
+                separator: true
+            },
             {
                 label: this.hideDatasourcesInCanvas
                     ? this.t('designer.menu_show_datasources', 'Mostra datasource nel canvas')
                     : this.t('designer.menu_hide_datasources', 'Nascondi datasource nel canvas'),
                 icon: this.hideDatasourcesInCanvas ? 'pi pi-eye' : 'pi pi-eye-slash',
                 command: () => this.toggleHideDatasourcesInCanvas()
+            },
+            {
+                label: this.snapToGridEnabled
+                    ? this.t('designer.menu_snap_off', 'Disattiva snap alla griglia')
+                    : this.t('designer.menu_snap_on', 'Attiva snap alla griglia'),
+                icon: this.snapToGridEnabled ? 'pi pi-th-large' : 'pi pi-table',
+                command: () => this.toggleSnapToGrid()
+            },
+            {
+                label: this.absoluteFlowEnabled
+                    ? this.t('designer.menu_absflow_off', 'Disattiva flusso assoluto')
+                    : this.t('designer.menu_absflow_on', 'Attiva flusso assoluto'),
+                icon: 'pi pi-arrows-alt',
+                command: () => this.toggleAbsoluteFlow()
             }
         ];
     }
@@ -7649,99 +7855,1151 @@ class DesignerComponent {
         this.hideDatasourcesInCanvas = !this.hideDatasourcesInCanvas;
         this.refreshGraphActionsMenuItems();
     }
-    get droppedDashboardItems() {
-        return (this.flattenedDashboardElements || []).filter((item) => !!item?.uniqueName);
-    }
-    get hierarchyTreeNodes() {
-        return this.hierarchyTreeNodesState;
+    /**
+     * Flusso "assoluto" (default OFF = flusso normale come sempre). Quando ON, ogni
+     * elemento droppato nasce `position: absolute` con `left/top` dalla posizione
+     * del drop -> non partecipa al flusso, quindi ridimensionarne uno NON sposta gli
+     * altri. E' per-elemento (chi nasce con position:absolute segue il nuovo modello,
+     * gli elementi salvati senza restano a flusso) -> retrocompatibile senza flag globale.
+     */
+    absoluteFlowEnabled = false;
+    toggleAbsoluteFlow() {
+        const turningOn = !this.absoluteFlowEnabled;
+        // Se attivo il flusso assoluto con elementi gia' nel canvas, quelli restano a
+        // flusso: notifico che vanno riposizionati manualmente.
+        if (turningOn && (this.dashboardElements?.length || 0) > 0) {
+            WtoolboxService.messageNotificationService.add({
+                severity: 'warn',
+                summary: this.t('designer.absflow.title', 'Flusso assoluto'),
+                detail: this.t('designer.absflow.existing_manual', 'Gli elementi gia\' presenti restano nel flusso attuale: vanno riposizionati a mano (position/left/top) per adottare il layout assoluto.')
+            });
+        }
+        this.absoluteFlowEnabled = turningOn;
+        this.refreshGraphActionsMenuItems();
+        this.cd.detectChanges();
     }
-    get canUndo() {
-        return this.undoHistory.length > 0;
+    /**
+     * Posizione del drop relativa a un elemento di riferimento (il canvas per i drop
+     * top-level, oppure il container quando droppo dentro un contenitore), snappata
+     * alla griglia se lo snap e' attivo.
+     */
+    getDropPositionRelativeTo(event, refEl) {
+        const rect = refEl ? refEl.getBoundingClientRect() : null;
+        const oe = (event && event.originalEvent) ? event.originalEvent : event;
+        const cx = (typeof oe?.clientX === 'number') ? oe.clientX : (typeof event?.clientX === 'number' ? event.clientX : null);
+        const cy = (typeof oe?.clientY === 'number') ? oe.clientY : (typeof event?.clientY === 'number' ? event.clientY : null);
+        if (!rect || cx === null || cy === null) {
+            return { left: 0, top: 0 };
+        }
+        // Coordinate del cursore relative al box del riferimento (client rect gia'
+        // include l'eventuale bordo/scroll del riferimento: sottraggo il suo scroll).
+        let left = cx - rect.left + (refEl ? refEl.scrollLeft : 0);
+        let top = cy - rect.top + (refEl ? refEl.scrollTop : 0);
+        const g = DesignerSnapState.gridSize;
+        if (g && g > 0) {
+            left = Math.round(left / g) * g;
+            top = Math.round(top / g) * g;
+        }
+        return { left: Math.max(0, Math.round(left)), top: Math.max(0, Math.round(top)) };
+    }
+    /** Snap alla griglia per drag/resize (feature B). Off di default. */
+    snapToGridEnabled = false;
+    /** Passo della griglia di snap in px. */
+    gridSize = 10;
+    /**
+     * Attiva/disattiva lo snap alla griglia: propaga la dimensione griglia alle
+     * istanze DynamicDashboardTemplateComponent (che arrotondano posizione/dimensione
+     * in onMoving/onResizing) e mostra un overlay griglia sul canvas.
+     */
+    toggleSnapToGrid() {
+        this.snapToGridEnabled = !this.snapToGridEnabled;
+        DynamicDashboardTemplateComponent.snapGridSize = this.snapToGridEnabled ? this.gridSize : 0;
+        // Alimenta lo stato condiviso letto dalle direttive drag/resize (lo snap
+        // effettivo su move/resize avviene li', non solo nel bookkeeping onMoving).
+        DesignerSnapState.gridSize = this.snapToGridEnabled ? this.gridSize : 0;
+        // Attivando lo snap, allinea SUBITO alla griglia anche gli elementi gia'
+        // presenti (droppati/spostati prima di attivarlo).
+        if (this.snapToGridEnabled) {
+            this.snapAllExistingElementsToGrid();
+        }
+        this.refreshGraphActionsMenuItems();
+        this.cd.detectChanges();
     }
-    get canRedo() {
-        return this.redoHistory.length > 0;
+    /** Snappa alla griglia la posizione assoluta di tutti gli elementi top-level presenti. */
+    snapAllExistingElementsToGrid() {
+        const g = DesignerSnapState.gridSize;
+        if (!g || g <= 0) {
+            return;
+        }
+        setTimeout(() => {
+            let changed = false;
+            for (const tool of (this.dashboardElements || [])) {
+                if (this.snapElementAbsoluteToGrid(tool, g)) {
+                    changed = true;
+                }
+            }
+            if (changed) {
+                this.commitHistoryIfChanged();
+                this.cd.detectChanges();
+            }
+        }, 0);
     }
     /**
-     * Calcola la label visualizzata per un elemento nel pannello "dropped items".
+     * Allinea la posizione VISIVA assoluta di un elemento al multiplo di griglia
+     * agendo sulla traslazione del suo `transform` (offsetLeft/Top escludono il
+     * transform -> assoluto = offset + traslazione). Ritorna true se ha modificato.
      */
-    getDroppedDashboardItemLabel(item) {
-        const displayName = String(item?.displayName || '').trim();
-        if (displayName) {
-            return displayName;
+    snapElementAbsoluteToGrid(tool, g) {
+        const dom = tool?.uniqueName ? document.getElementById(tool.uniqueName) : null;
+        if (!dom || !tool.inputs) {
+            return false;
         }
-        const uniqueName = String(item?.uniqueName || '').trim();
-        const name = String(item?.name || '').trim();
-        if (!uniqueName) {
-            return name;
+        let sx = 1, sy = 0, kx = 0, ky = 1, tx = 0, ty = 0;
+        const m = String(tool.inputs['transform'] || '').match(/matrix\(([^)]+)\)/);
+        if (m) {
+            const p = m[1].split(',').map((x) => parseFloat(x));
+            if (p.length >= 6 && p.every((n) => !isNaN(n))) {
+                [sx, sy, kx, ky, tx, ty] = p;
+            }
         }
-        return name ? `${uniqueName} (${name})` : uniqueName;
+        const newTx = Math.round((dom.offsetLeft + tx) / g) * g - dom.offsetLeft;
+        const newTy = Math.round((dom.offsetTop + ty) / g) * g - dom.offsetTop;
+        if (newTx === tx && newTy === ty) {
+            return false;
+        }
+        tool.inputs['transform'] = `matrix(${sx}, ${sy}, ${kx}, ${ky}, ${newTx}, ${newTy})`;
+        return true;
     }
     /**
-     * Imposta come selezionato l'elemento cliccato nella lista elementi.
+     * Sposta l'elemento selezionato di (dx, dy) px agendo sulla translation della
+     * matrice `transform` (stesso campo che usa onMoving). Usato dalle frecce.
      */
-    selectDashboardItem(item) {
-        if (!item) {
+    nudgeSelectedElement(dx, dy) {
+        const el = this.tool;
+        if (!el?.inputs) {
             return;
         }
-        this.tool = item;
-        this.syncHierarchySelectionToCurrentTool();
-    }
-    showHierarchyNodeContextMenu(event, node, menu) {
-        event.preventDefault();
-        event.stopPropagation();
-        const uniqueName = String(node?.key || '').trim();
-        this.hierarchyCtxElement = uniqueName ? this.getElementByName(uniqueName) : null;
-        menu.show(event);
+        let scaleX = 1, skewY = 0, skewX = 0, scaleY = 1, tx = 0, ty = 0;
+        const cur = String(el.inputs['transform'] || '');
+        const m = cur.match(/matrix\(([^)]+)\)/);
+        if (m) {
+            const parts = m[1].split(',').map((x) => parseFloat(x));
+            if (parts.length >= 6 && parts.every((n) => !isNaN(n))) {
+                [scaleX, skewY, skewX, scaleY, tx, ty] = parts;
+            }
+        }
+        el.inputs['transform'] = `matrix(${scaleX}, ${skewY}, ${skewX}, ${scaleY}, ${tx + dx}, ${ty + dy})`;
+        this.commitHistoryIfChanged();
+        this.cd.detectChanges();
     }
-    onHierarchyNodeSelect(event) {
-        const node = event?.node;
-        if (!node) {
-            return;
+    // ===================== Feature F: preset/template riusabili =====================
+    // Libreria di preset lato client (localStorage): mappa nome -> boardcontent JSON.
+    // Riusa buildSerializedDashboardElements (salva) e loadDashboard (applica), gli
+    // stessi choke-point di save/import. Nessuno schema change.
+    static PRESETS_STORAGE_KEY = 'wuic.designer.presets';
+    readDesignerPresets() {
+        try {
+            const raw = localStorage.getItem(DesignerComponent.PRESETS_STORAGE_KEY);
+            const parsed = raw ? JSON.parse(raw) : {};
+            return (parsed && typeof parsed === 'object') ? parsed : {};
         }
-        const uniqueName = String(node?.key || '').trim();
-        if (!uniqueName) {
-            return;
+        catch {
+            return {};
         }
-        const item = this.getElementByName(uniqueName);
-        if (!item) {
-            return;
+    }
+    writeDesignerPresets(presets) {
+        try {
+            localStorage.setItem(DesignerComponent.PRESETS_STORAGE_KEY, JSON.stringify(presets));
         }
-        this.selectDashboardItem(item);
-        this.cd.detectChanges();
+        catch { /* quota / storage disabilitato */ }
     }
-    onHierarchyNodeMouseEnter(node) {
-        const uniqueName = String(node?.key || '').trim();
-        if (!uniqueName) {
+    /** Salva il layout corrente come preset nominato nella libreria locale. */
+    async saveDashboardAsPreset() {
+        const resp = await WtoolboxService.promptDialog(this.t('designer.preset.save_title', 'Salva come preset'), [{ name: 'presetName', caption: this.t('designer.preset.name_caption', 'Nome preset'), type: 'string', value: '', required: true }], null, '400px', '230px');
+        const name = String(resp?.presetName?.value || '').trim();
+        if (!name) {
             return;
         }
-        this.setHierarchyHoverHighlightByKey(uniqueName);
-    }
-    onHierarchyNodeMouseLeave() {
-        this.clearHierarchyHoverHighlight();
-    }
-    isHierarchyNodeSelected(node) {
-        const nodeKey = String(node?.key || '').trim();
-        const selectedKey = String(this.hierarchySelection?.key || '').trim();
-        return !!nodeKey && nodeKey === selectedKey;
+        const presets = this.readDesignerPresets();
+        presets[name] = this.buildSerializedDashboardElements();
+        this.writeDesignerPresets(presets);
+        WtoolboxService.messageNotificationService.add({
+            severity: 'success',
+            summary: this.t('success', 'Success'),
+            detail: this.t('designer.preset.saved', 'Preset salvato')
+        });
     }
-    setHierarchyHoverHighlightByKey(uniqueName) {
-        const key = String(uniqueName || '').trim();
-        this.clearHierarchyHoverHighlight();
-        if (!key) {
+    /** Applica un preset della libreria al canvas (sostituisce il layout corrente). */
+    async applyDashboardPreset() {
+        const presets = this.readDesignerPresets();
+        const names = Object.keys(presets);
+        if (names.length === 0) {
+            WtoolboxService.messageNotificationService.add({
+                severity: 'info',
+                summary: this.t('info', 'Info'),
+                detail: this.t('designer.preset.none', 'Nessun preset salvato')
+            });
             return;
         }
-        const item = this.getElementByName(key);
-        if (!item) {
+        const resp = await WtoolboxService.promptDialog(this.t('designer.preset.apply_title', 'Applica preset'), [{
+                name: 'preset',
+                caption: this.t('designer.preset.pick_caption', 'Preset'),
+                type: 'dictionary',
+                required: true,
+                dictionaryData: names.map((n) => ({ label: n, value: n }))
+            }], null, '400px', '230px');
+        const chosen = String(resp?.preset?.value || '').trim();
+        if (!chosen || !presets[chosen]) {
             return;
         }
-        this.setFooterHoverHighlight(item);
-        if (typeof document === 'undefined') {
-            return;
+        if ((this.flattenedDashboardElements || []).length > 0) {
+            const ok = await WtoolboxService.confirm({
+                header: this.t('warning', 'Warning'),
+                message: this.t('designer.preset.apply_confirm', 'Applicare il preset sostituira\' il canvas corrente. Continuare?'),
+                acceptLabel: this.t('confirm', 'Confirm'),
+                rejectLabel: this.t('cancel', 'Cancel')
+            });
+            if (!ok) {
+                return;
+            }
         }
-        const footerElement = document.querySelector(`.designer-footer-item[data-designer-unique-name="${key}"]`);
-        if (footerElement) {
-            footerElement.classList.add('designer-tree-hover-target');
-            this.hierarchyHoverFooterElement = footerElement;
+        try {
+            await this.loadDashboard({
+                boardcontent: presets[chosen],
+                board_route: this.currentDashboardRoute || '',
+                board_des: this.currentDashboardDescription || ''
+            }, true);
+            WtoolboxService.messageNotificationService.add({
+                severity: 'success',
+                summary: this.t('success', 'Success'),
+                detail: this.t('designer.preset.applied', 'Preset applicato')
+            });
+        }
+        catch (error) {
+            console.error('Failed to apply designer preset', error);
+            WtoolboxService.errorHandler?.handleError?.(error);
+        }
+    }
+    /** Clipboard interno per copy/paste di elementi del designer (inject-node). */
+    designerClipboard = null;
+    /**
+     * Converte un elemento del canvas nella shape `node` accettata da
+     * {@link injectLayoutNode} (`{ tool_name, inputs }`), estraendo i soli input
+     * SCALARI (string/number/boolean/array) + i binding datasource (ridotti al
+     * loro `uniqueName`, che il path canonico ri-idrata post-drop). Function e
+     * oggetti complessi vengono scartati: verranno ricostruiti dal template della
+     * palette al drop. Ritorna null se l'elemento non e' copiabile.
+     */
+    buildInjectNodeFromElement(el) {
+        const name = String(el?.name || '').trim();
+        if (!name) {
+            return null;
+        }
+        const inputs = {};
+        const rawInputs = el?.inputs || {};
+        for (const key of Object.keys(rawInputs)) {
+            let v = rawInputs[key];
+            if (v instanceof BehaviorSubject) {
+                v = v.value;
+            }
+            if (typeof v === 'function') {
+                continue;
+            }
+            // Binding datasource (dropped-component): passa il solo uniqueName stringa
+            if (v && typeof v === 'object' && !Array.isArray(v) && 'uniqueName' in v && 'component' in v) {
+                const un = String(v.uniqueName || '').trim();
+                if (un) {
+                    inputs[key] = un;
+                }
+                continue;
+            }
+            // Scarta gli altri oggetti complessi non serializzabili come scalari
+            if (v !== null && typeof v === 'object' && !Array.isArray(v)) {
+                continue;
+            }
+            inputs[key] = v;
+        }
+        return { tool_name: name, inputs };
+    }
+    /** Trova l'uniqueName del parent di un elemento nel tree, o null se e' a root. */
+    findParentUniqueName(target) {
+        const targetUn = String(target?.uniqueName || '').trim();
+        if (!targetUn) {
+            return null;
+        }
+        const walk = (nodes) => {
+            for (const n of nodes || []) {
+                const kids = n?.nestedComponents || [];
+                if (kids.some((k) => String(k?.uniqueName || '') === targetUn)) {
+                    return String(n?.uniqueName || '') || null;
+                }
+                const deeper = walk(kids);
+                if (deeper !== undefined) {
+                    return deeper;
+                }
+            }
+            return undefined;
+        };
+        const res = walk(this.dashboardElements || []);
+        return res === undefined ? null : res;
+    }
+    /**
+     * Copia l'elemento selezionato (o `ctxElement`) nel clipboard interno.
+     * I contenitori con figli non sono ancora supportati (richiedono il mapping
+     * dei placeholder strutturali): mostra un avviso e non copia.
+     */
+    copyDesignerElement(el) {
+        const target = el || this.tool || this.ctxElement;
+        if (!target) {
+            return;
+        }
+        if (Array.isArray(target.nestedComponents) && target.nestedComponents.length > 0) {
+            WtoolboxService.messageNotificationService.add({
+                severity: 'info',
+                summary: this.t('info', 'Info'),
+                detail: this.t('designer.clipboard.container_unsupported', 'La copia di contenitori con figli non e\' ancora supportata')
+            });
+            return;
+        }
+        // Gli elementi con binding datasource "live" + rendering per-riga
+        // (DATAREPEATER/SELECT/MULTISELECT/UL) non si duplicano ancora in modo
+        // affidabile: il clone via injectLayoutNode ricrea un list-grid il cui
+        // selection model non e' inizializzato ad array -> IsSelectedRowPipe fallisce
+        // (`items.find is not a function`). Fino a quando la re-idratazione del
+        // binding non e' gestita, escludiamo questi tipi con un avviso chiaro.
+        const DATASOURCE_BOUND = new Set(['DATAREPEATER', 'SELECT', 'MULTISELECT', 'UL']);
+        if (DATASOURCE_BOUND.has(String(target.name || ''))) {
+            WtoolboxService.messageNotificationService.add({
+                severity: 'info',
+                summary: this.t('info', 'Info'),
+                detail: this.t('designer.clipboard.datasource_bound_unsupported', 'La duplicazione di componenti legati a un datasource non e\' ancora supportata')
+            });
+            return;
+        }
+        const node = this.buildInjectNodeFromElement(target);
+        if (!node) {
+            return;
+        }
+        this.designerClipboard = node;
+        WtoolboxService.messageNotificationService.add({
+            severity: 'success',
+            summary: this.t('success', 'Success'),
+            detail: this.t('designer.clipboard.copied', 'Elemento copiato')
+        });
+    }
+    /**
+     * Incolla l'elemento dal clipboard. Se `parentUniqueName` e' passato (usato da
+     * `duplicateDesignerElement` per creare un sibling) inietta li'; altrimenti
+     * dentro l'elemento selezionato se e' un contenitore, altrimenti a root.
+     * Riusa il path canonico {@link injectLayoutNode} (drop() reale) per garantire
+     * uniqueName freschi, hydration e history coerenti.
+     */
+    async pasteDesignerElement(parentUniqueName) {
+        if (!this.designerClipboard) {
+            return;
+        }
+        let parent = parentUniqueName ?? null;
+        if (parent === null && this.tool && Array.isArray(this.tool.nestedComponents)) {
+            parent = String(this.tool.uniqueName || '') || null;
+        }
+        try {
+            await this.injectLayoutNode(JSON.parse(JSON.stringify(this.designerClipboard)), parent);
+            this.cd.detectChanges();
+            WtoolboxService.messageNotificationService.add({
+                severity: 'success',
+                summary: this.t('success', 'Success'),
+                detail: this.t('designer.clipboard.pasted', 'Elemento incollato')
+            });
+        }
+        catch (error) {
+            console.error('Failed to paste designer element', error);
+            WtoolboxService.errorHandler?.handleError?.(error);
+        }
+    }
+    /**
+     * Duplica un elemento: lo copia e lo incolla come sibling (stesso parent).
+     */
+    async duplicateDesignerElement(el) {
+        const target = el || this.tool || this.ctxElement;
+        if (!target) {
+            return;
+        }
+        this.copyDesignerElement(target);
+        if (!this.designerClipboard) {
+            // caso contenitore: copyDesignerElement ha gia' avvisato
+            return;
+        }
+        const parentUn = this.findParentUniqueName(target);
+        await this.pasteDesignerElement(parentUn);
+    }
+    /**
+     * Esporta il boardcontent della dashboard corrente come file JSON scaricabile.
+     * Riusa lo stesso choke-point di serializzazione del salvataggio
+     * (`buildSerializedDashboardElements`), quindi il file prodotto e' identico al
+     * `boardcontent` persistito su `dom_board` ed e' re-importabile qui o su un
+     * altro ambiente (import/export tra ambienti).
+     */
+    exportDashboardJson() {
+        try {
+            const raw = this.buildSerializedDashboardElements();
+            let pretty = raw;
+            try {
+                pretty = JSON.stringify(JSON.parse(raw), null, 2);
+            }
+            catch { /* keep raw */ }
+            const routeSlug = String(this.currentDashboardRoute || 'dashboard')
+                .replace(/[^a-zA-Z0-9._-]+/g, '_')
+                .replace(/^_+|_+$/g, '') || 'dashboard';
+            const fileName = `${routeSlug}.dashboard.json`;
+            const blob = new Blob([pretty], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const anchor = document.createElement('a');
+            anchor.href = url;
+            anchor.download = fileName;
+            document.body.appendChild(anchor);
+            anchor.click();
+            document.body.removeChild(anchor);
+            setTimeout(() => URL.revokeObjectURL(url), 0);
+            WtoolboxService.messageNotificationService.add({
+                severity: 'success',
+                summary: this.t('success', 'Success'),
+                detail: this.t('designer.export_json_success', 'Dashboard JSON exported')
+            });
+        }
+        catch (error) {
+            console.error('Failed to export dashboard JSON', error);
+            WtoolboxService.errorHandler?.handleError?.(error);
+        }
+    }
+    /**
+     * Importa un boardcontent da un file JSON precedentemente esportato.
+     * Apre un file picker nativo (input[type=file] creato al volo, nessun prompt
+     * nativo del browser), valida il JSON, chiede conferma di sovrascrittura del
+     * canvas corrente e infine ricostruisce la dashboard riusando `loadDashboard`
+     * (con `skipServerFetch=true`), lo stesso path usato per aprire una dashboard
+     * salvata — cosi' l'import passa da idratazione/backfill/rebind canonici.
+     */
+    importDashboardJson() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'application/json,.json';
+        input.style.display = 'none';
+        input.addEventListener('change', () => {
+            const file = input.files && input.files[0];
+            document.body.removeChild(input);
+            if (!file) {
+                return;
+            }
+            const reader = new FileReader();
+            reader.onload = () => {
+                const text = String(reader.result || '');
+                void this.applyImportedDashboardJson(text);
+            };
+            reader.onerror = () => {
+                WtoolboxService.messageNotificationService.add({
+                    severity: 'error',
+                    summary: this.t('error', 'Error'),
+                    detail: this.t('designer.import_json_read_error', 'Could not read the selected file')
+                });
+            };
+            reader.readAsText(file);
+        });
+        document.body.appendChild(input);
+        input.click();
+    }
+    /**
+     * Valida e applica un boardcontent importato. Estratta da `importDashboardJson`
+     * per essere riusabile (es. incolla da clipboard / test) e testabile.
+     */
+    async applyImportedDashboardJson(text) {
+        let parsed;
+        try {
+            parsed = JSON.parse(text);
+        }
+        catch {
+            WtoolboxService.messageNotificationService.add({
+                severity: 'error',
+                summary: this.t('error', 'Error'),
+                detail: this.t('designer.import_json_invalid', 'The file does not contain valid JSON')
+            });
+            return;
+        }
+        // Accetta sia l'array di elementi top-level sia il wrapper {elements|dashboardElements}
+        const elements = Array.isArray(parsed)
+            ? parsed
+            : (Array.isArray(parsed?.elements)
+                ? parsed.elements
+                : (Array.isArray(parsed?.dashboardElements) ? parsed.dashboardElements : null));
+        if (!elements) {
+            WtoolboxService.messageNotificationService.add({
+                severity: 'error',
+                summary: this.t('error', 'Error'),
+                detail: this.t('designer.import_json_unrecognized', 'The JSON is not a recognizable dashboard layout')
+            });
+            return;
+        }
+        if ((this.flattenedDashboardElements || []).length > 0) {
+            const ok = await WtoolboxService.confirm({
+                header: this.t('warning', 'Warning'),
+                message: this.t('designer.import_json_confirm', 'Importing will replace the current canvas. Continue?'),
+                acceptLabel: this.t('confirm', 'Confirm'),
+                rejectLabel: this.t('cancel', 'Cancel')
+            });
+            if (!ok) {
+                return;
+            }
+        }
+        try {
+            await this.loadDashboard({
+                boardcontent: JSON.stringify(elements),
+                board_route: this.currentDashboardRoute || '',
+                board_des: this.currentDashboardDescription || ''
+            }, true);
+            WtoolboxService.messageNotificationService.add({
+                severity: 'success',
+                summary: this.t('success', 'Success'),
+                detail: this.t('designer.import_json_success', 'Dashboard JSON imported')
+            });
+        }
+        catch (error) {
+            console.error('Failed to import dashboard JSON', error);
+            WtoolboxService.errorHandler?.handleError?.(error);
+        }
+    }
+    get droppedDashboardItems() {
+        return (this.flattenedDashboardElements || []).filter((item) => !!item?.uniqueName);
+    }
+    get hierarchyTreeNodes() {
+        return this.hierarchyTreeNodesState;
+    }
+    get canUndo() {
+        return this.undoHistory.length > 0;
+    }
+    get canRedo() {
+        return this.redoHistory.length > 0;
+    }
+    /**
+     * Calcola la label visualizzata per un elemento nel pannello "dropped items".
+     */
+    getDroppedDashboardItemLabel(item) {
+        const displayName = String(item?.displayName || '').trim();
+        if (displayName) {
+            return displayName;
+        }
+        const uniqueName = String(item?.uniqueName || '').trim();
+        const name = String(item?.name || '').trim();
+        if (!uniqueName) {
+            return name;
+        }
+        return name ? `${uniqueName} (${name})` : uniqueName;
+    }
+    /**
+     * Imposta come selezionato l'elemento cliccato nella lista elementi.
+     */
+    selectDashboardItem(item) {
+        if (!item) {
+            return;
+        }
+        this.tool = item;
+        this.syncHierarchySelectionToCurrentTool();
+    }
+    // ===================== Multi-selezione (rubber-band) =====================
+    /** Canvas host (per le coordinate del rettangolo di selezione). */
+    canvasRef;
+    /** Elementi top-level multi-selezionati. `tool` (attivo nel property panel) e' null quando != 1. */
+    selectedTools = [];
+    /** Overlay del rettangolo di selezione (rubber-band). */
+    rubberBandVisible = false;
+    rubberBandStyle = { left: '0px', top: '0px', width: '0px', height: '0px' };
+    rubber = null;
+    canvasRectAtStart = null;
+    boundRubberMove = (e) => this.onRubberMove(e);
+    boundRubberUp = (e) => this.onRubberUp(e);
+    /**
+     * Mousedown sul canvas: avvia la selezione a rettangolo SOLO se parte da area
+     * vuota (nessun elemento sotto il puntatore). Sugli elementi il mousedown e'
+     * consumato dalla direttiva di drag (`stopImmediatePropagation`), quindi qui
+     * arriva solo il click su spazio libero — coerente col vincolo richiesto.
+     */
+    onCanvasMouseDown(event) {
+        if (this.noEdit || !event || event.button !== 0) {
+            return;
+        }
+        const canvasEl = this.canvasRef?.nativeElement;
+        if (!canvasEl || !this.isEmptyCanvasTarget(event.target, canvasEl)) {
+            return;
+        }
+        event.preventDefault();
+        this.clearMultiSelection();
+        this.tool = null;
+        this.canvasRectAtStart = canvasEl.getBoundingClientRect();
+        this.rubber = { startClientX: event.clientX, startClientY: event.clientY };
+        this.rubberBandVisible = true;
+        this.updateRubberBandStyle(event.clientX, event.clientY);
+        window.addEventListener('mousemove', this.boundRubberMove);
+        window.addEventListener('mouseup', this.boundRubberUp);
+        this.cd.detectChanges();
+    }
+    /** true se il target risale fino al canvas senza attraversare un elemento designer (id con '__'). */
+    isEmptyCanvasTarget(target, canvasEl) {
+        let node = target;
+        while (node && node !== canvasEl) {
+            const id = node.getAttribute ? (node.getAttribute('id') || '') : '';
+            if (id.indexOf('__') > -1) {
+                return false;
+            }
+            node = node.parentElement;
+        }
+        return node === canvasEl;
+    }
+    onRubberMove(event) {
+        if (!this.rubber) {
+            return;
+        }
+        this.updateRubberBandStyle(event.clientX, event.clientY);
+        this.cd.detectChanges();
+    }
+    updateRubberBandStyle(curX, curY) {
+        if (!this.rubber || !this.canvasRectAtStart) {
+            return;
+        }
+        const canvasEl = this.canvasRef?.nativeElement;
+        const r = this.canvasRectAtStart;
+        const sL = canvasEl ? canvasEl.scrollLeft : 0;
+        const sT = canvasEl ? canvasEl.scrollTop : 0;
+        const x1 = Math.min(this.rubber.startClientX, curX), x2 = Math.max(this.rubber.startClientX, curX);
+        const y1 = Math.min(this.rubber.startClientY, curY), y2 = Math.max(this.rubber.startClientY, curY);
+        this.rubberBandStyle = {
+            left: (x1 - r.left + sL) + 'px',
+            top: (y1 - r.top + sT) + 'px',
+            width: (x2 - x1) + 'px',
+            height: (y2 - y1) + 'px',
+        };
+    }
+    onRubberUp(event) {
+        window.removeEventListener('mousemove', this.boundRubberMove);
+        window.removeEventListener('mouseup', this.boundRubberUp);
+        const rubber = this.rubber;
+        this.rubber = null;
+        this.rubberBandVisible = false;
+        if (!rubber) {
+            this.cd.detectChanges();
+            return;
+        }
+        const x1 = Math.min(rubber.startClientX, event.clientX), x2 = Math.max(rubber.startClientX, event.clientX);
+        const y1 = Math.min(rubber.startClientY, event.clientY), y2 = Math.max(rubber.startClientY, event.clientY);
+        const selected = [];
+        // Ignora i "click" (rettangolo minuscolo): niente selezione, solo deselect.
+        if (Math.abs(x2 - x1) >= 3 && Math.abs(y2 - y1) >= 3) {
+            // Hit-test dei soli elementi TOP-LEVEL (spostare/eliminare un top-level porta i figli).
+            for (const el of (this.dashboardElements || [])) {
+                const dom = el?.uniqueName ? document.getElementById(el.uniqueName) : null;
+                if (!dom) {
+                    continue;
+                }
+                const b = dom.getBoundingClientRect();
+                if (b.left < x2 && b.right > x1 && b.top < y2 && b.bottom > y1) {
+                    selected.push(el);
+                }
+            }
+        }
+        this.setMultiSelection(selected);
+        this.cd.detectChanges();
+    }
+    /** Imposta la multi-selezione: `tool` resta valorizzato solo con esattamente 1 elemento. */
+    setMultiSelection(selected) {
+        this.clearHighlight();
+        this.selectedTools = selected || [];
+        this.tool = this.selectedTools.length === 1 ? this.selectedTools[0] : null;
+        this.applyHighlight();
+    }
+    clearMultiSelection() {
+        this.clearHighlight();
+        this.selectedTools = [];
+    }
+    applyHighlight() {
+        for (const el of (this.selectedTools || [])) {
+            const dom = el?.uniqueName ? document.getElementById(el.uniqueName) : null;
+            if (dom) {
+                dom.classList.add('designer-multi-selected');
+            }
+        }
+    }
+    clearHighlight() {
+        for (const el of (this.selectedTools || [])) {
+            const dom = el?.uniqueName ? document.getElementById(el.uniqueName) : null;
+            if (dom) {
+                dom.classList.remove('designer-multi-selected');
+            }
+        }
+    }
+    /** Applica un delta di traslazione (px) a un insieme di elementi (multi-move via frecce). */
+    nudgeElements(tools, dx, dy) {
+        for (const el of (tools || [])) {
+            if (!el?.inputs) {
+                continue;
+            }
+            let scaleX = 1, skewY = 0, skewX = 0, scaleY = 1, tx = 0, ty = 0;
+            const m = String(el.inputs['transform'] || '').match(/matrix\(([^)]+)\)/);
+            if (m) {
+                const p = m[1].split(',').map((x) => parseFloat(x));
+                if (p.length >= 6 && p.every((n) => !isNaN(n))) {
+                    [scaleX, skewY, skewX, scaleY, tx, ty] = p;
+                }
+            }
+            el.inputs['transform'] = `matrix(${scaleX}, ${skewY}, ${skewX}, ${scaleY}, ${tx + dx}, ${ty + dy})`;
+        }
+        this.commitHistoryIfChanged();
+        this.cd.detectChanges();
+    }
+    // ============ Import dashboard/preset DENTRO un elemento (context menu) ============
+    /** true se il tool e' un container che accetta figli arbitrari (nestedComponents + nessun allowedChildren). */
+    isFreeContainer(tool) {
+        return !!tool && Array.isArray(tool.nestedComponents) && !(tool.allowedChildren);
+    }
+    /** Voci di context menu per importare dashboard/preset dentro un container. */
+    buildImportContextItems(el) {
+        return [
+            { separator: true },
+            { label: this.t('designer.ctx_import_dashboard', 'Importa dashboard qui'), icon: 'pi pi-download', command: () => this.importDashboardIntoElement(el) },
+            { label: this.t('designer.ctx_import_preset', 'Importa preset qui'), icon: 'pi pi-bookmark', command: () => this.importPresetIntoElement(el) },
+        ];
+    }
+    /**
+     * UNICA sorgente del context menu di un elemento, condivisa dai tre punti di
+     * accesso (canvas `showCtx`, gerarchia `showHierarchyNodeContextMenu`, footer
+     * breadcrumb `showFooterContextMenu`). Le `command` operano sull'elemento
+     * passato (risolto al click), non su una variabile globale, quindi il menu si
+     * ricostruisce per-elemento con voci identiche ovunque. Il caller canvas
+     * antepone eventuali voci field-editor (specifiche del click su un campo).
+     */
+    buildElementContextMenuItems(el) {
+        const items = [
+            {
+                label: this.t('designer.edit_properties', 'Edit properties'),
+                icon: 'pi pi-cog',
+                command: () => { if (el) {
+                    this.selectDashboardItem(el);
+                    this.cd.detectChanges();
+                } }
+            },
+            {
+                label: this.t('designer.duplicate', 'Duplica'),
+                icon: 'pi pi-clone',
+                command: () => { if (el) {
+                    void this.duplicateDesignerElement(el);
+                } }
+            },
+            {
+                label: this.t('designer.rename', 'Rename'),
+                icon: 'pi pi-pencil',
+                command: () => { if (el) {
+                    void this.renameDesignerElement(el);
+                } }
+            },
+            {
+                label: this.t('designer.remove', 'Remove'),
+                icon: 'pi pi-trash',
+                command: () => { const n = String(el?.uniqueName || '').trim(); if (n) {
+                    this.removeElementByName(n);
+                } }
+            }
+        ];
+        // Sposta in nuovo Tab: SOLO se l'elemento e' dentro un TABPANEL di un TABVIEW
+        // (migrazione elemento -> nuovo TABPANEL del TABVIEW padre).
+        if (this.isInsideTabPanel(el)) {
+            items.push({
+                label: this.t('designer.ctx_move_to_new_tab', 'Sposta in nuovo Tab'),
+                icon: 'pi pi-folder-open',
+                command: () => { void this.moveElementToNewTab(el); }
+            });
+            // Sposta in altro tab: solo se il TABVIEW ha piu' di un tab (scelta esclusa il corrente).
+            if (this.hasOtherTabs(el)) {
+                items.push({
+                    label: this.t('designer.ctx_move_to_existing_tab_element', 'Sposta in altro tab'),
+                    icon: 'pi pi-arrow-right-arrow-left',
+                    command: () => { void this.moveElementToExistingTab(el); }
+                });
+            }
+        }
+        // Import dashboard/preset: solo per container liberi (nestedComponents senza allowedChildren).
+        if (this.isFreeContainer(el)) {
+            items.push(...this.buildImportContextItems(el));
+        }
+        return items;
+    }
+    /**
+     * Risolve il contesto tab di un elemento: il TABPANEL che lo contiene e il
+     * TABVIEW che contiene quel pannello. null se l'elemento non e' dentro un tab.
+     */
+    resolveTabContext(el) {
+        if (!el) {
+            return null;
+        }
+        const panelUn = this.findParentUniqueName(el);
+        const panel = panelUn ? this.getElementByName(panelUn) : null;
+        if (!panel || String(panel.name || '').toUpperCase() !== 'TABPANEL') {
+            return null;
+        }
+        const tabViewUn = this.findParentUniqueName(panel);
+        const tabView = tabViewUn ? this.getElementByName(tabViewUn) : null;
+        if (!tabView || String(tabView.name || '').toUpperCase() !== 'TABVIEW') {
+            return null;
+        }
+        return { panel, tabView };
+    }
+    /** true se l'elemento e' dentro un TABPANEL di un TABVIEW (eleggibile a "Sposta in nuovo Tab"). */
+    isInsideTabPanel(el) {
+        return !!this.resolveTabContext(el);
+    }
+    /** true se il TABVIEW che contiene l'elemento ha piu' di un tab (eleggibile a "Sposta in altro tab"). */
+    hasOtherTabs(el) {
+        const ctx = this.resolveTabContext(el);
+        return !!ctx && (ctx.tabView.nestedComponents?.length || 0) > 1;
+    }
+    /**
+     * Sposta l'elemento in un NUOVO tab (TABPANEL) del TABVIEW che lo contiene:
+     * crea un TABPANEL fresco (clonando il template di palette, uniqueName/componentId
+     * nuovi), rimuove l'elemento dal tab corrente e ci mette lo STESSO oggetto (move,
+     * non clone -> binding datasource/stato preservati), poi seleziona il nuovo tab.
+     */
+    async moveElementToNewTab(el) {
+        if (!el) {
+            return;
+        }
+        const ctx = this.resolveTabContext(el);
+        if (!ctx) {
+            return;
+        }
+        const { panel, tabView } = ctx;
+        // Nome del nuovo tab (default: displayName/name dell'elemento).
+        const resp = await WtoolboxService.promptDialog(this.t('designer.ctx_move_to_new_tab', 'Sposta in nuovo Tab'), [{
+                name: 'tabName',
+                caption: this.t('designer.tab_name_caption', 'Nome Tab'),
+                type: 'text',
+                required: true,
+                value: String(el.displayName || el.name || 'Tab').trim()
+            }], '440px', '320px');
+        if (!resp) {
+            return;
+        }
+        const tabName = String(resp?.tabName?.value || '').trim();
+        if (!tabName) {
+            return;
+        }
+        // Nuovo TABPANEL dalla stessa shape del drop (template + id freschi).
+        const template = (this.availableTools || []).find((t) => String(t?.name || '').toUpperCase() === 'TABPANEL');
+        if (!template) {
+            return;
+        }
+        const newPanel = JSON.parse(JSON.stringify(template));
+        newPanel.componentId = this.getNewID();
+        newPanel.uniqueName = newPanel.name + '__' + newPanel.componentId;
+        newPanel.inputs = newPanel.inputs || {};
+        newPanel.inputs['header'] = tabName;
+        newPanel.nestedComponents = [];
+        // Move: rimuovi dall'attuale tab e inserisci lo stesso oggetto nel nuovo.
+        panel.nestedComponents = (panel.nestedComponents || []).filter((k) => String(k?.uniqueName || '') !== String(el.uniqueName || ''));
+        newPanel.nestedComponents.push(el);
+        // Aggancia il nuovo tab al TABVIEW e selezionalo (deseleziona gli altri).
+        tabView.nestedComponents = tabView.nestedComponents || [];
+        tabView.nestedComponents.push(newPanel);
+        this.selectTabPanelExclusive(newPanel);
+        this.flattenedDashboardElements = this.flattenComponentTree(this.dashboardElements);
+        this.commitHistoryIfChanged();
+        this.cd.detectChanges();
+        WtoolboxService.messageNotificationService.add({
+            severity: 'success',
+            summary: this.t('success', 'Success'),
+            detail: this.t('designer.moved_to_new_tab', 'Elemento spostato nel nuovo tab')
+        });
+    }
+    /**
+     * Sposta l'elemento in un ALTRO tab (TABPANEL) gia' esistente dello stesso
+     * TABVIEW: picker dei tab escluso il corrente, poi move dello STESSO oggetto
+     * (binding/stato preservati) nel tab scelto, che viene selezionato.
+     */
+    async moveElementToExistingTab(el) {
+        if (!el) {
+            return;
+        }
+        const ctx = this.resolveTabContext(el);
+        if (!ctx) {
+            return;
+        }
+        const { panel, tabView } = ctx;
+        // Tab candidati: tutti i TABPANEL del TABVIEW tranne quello corrente.
+        const others = (tabView.nestedComponents || []).filter((p) => String(p?.uniqueName || '') !== String(panel.uniqueName || ''));
+        if (!others.length) {
+            return;
+        }
+        const choices = others.map((p, idx) => {
+            const label = String(p?.inputs?.header || p?.displayName || p?.uniqueName || '').trim() || ('Tab ' + (idx + 1));
+            return { label, value: String(p?.uniqueName || '') };
+        });
+        const resp = await WtoolboxService.promptDialog(this.t('designer.ctx_move_to_existing_tab_element', 'Sposta in altro tab'), [{
+                name: 'targetTab',
+                caption: this.t('designer.target_tab_caption', 'Tab di destinazione'),
+                type: 'dictionary',
+                required: true,
+                value: choices[0].value,
+                dictionaryData: choices
+            }], '440px', '320px');
+        if (!resp) {
+            return;
+        }
+        const targetUn = String(resp?.targetTab?.value || '').trim();
+        if (!targetUn) {
+            return;
+        }
+        const targetPanel = (tabView.nestedComponents || []).find((p) => String(p?.uniqueName || '') === targetUn);
+        if (!targetPanel) {
+            return;
+        }
+        // Move: rimuovi dal tab corrente e inserisci lo stesso oggetto nel target.
+        panel.nestedComponents = (panel.nestedComponents || []).filter((k) => String(k?.uniqueName || '') !== String(el.uniqueName || ''));
+        targetPanel.nestedComponents = Array.isArray(targetPanel.nestedComponents) ? targetPanel.nestedComponents : [];
+        targetPanel.nestedComponents.push(el);
+        // Seleziona il tab di destinazione.
+        this.selectTabPanelExclusive(targetPanel);
+        this.flattenedDashboardElements = this.flattenComponentTree(this.dashboardElements);
+        this.commitHistoryIfChanged();
+        this.cd.detectChanges();
+        WtoolboxService.messageNotificationService.add({
+            severity: 'success',
+            summary: this.t('success', 'Success'),
+            detail: this.t('designer.moved_to_tab', 'Elemento spostato nel tab')
+        });
+    }
+    /**
+     * onDrop del TABPANEL: appena droppato dentro un TABVIEW lo rende il tab attivo,
+     * cosi' la sua area diventa visibile e droppabile. Il pannello a questo punto e'
+     * gia' stato inserito in `tabView.nestedComponents` dal drop() (push prima di onDrop).
+     */
+    dropTabPanel(currentTool) {
+        this.selectTabPanelExclusive(currentTool);
+        this.cd.detectChanges();
+    }
+    /**
+     * Seleziona in modo esclusivo un TABPANEL nel TABVIEW che lo contiene
+     * (`inputs.selected = true` sul pannello, `false` sugli altri). No-op se il
+     * parent non e' un TABVIEW. Stesso meccanismo usato da `activateTabPanelForHover`.
+     */
+    selectTabPanelExclusive(panel) {
+        const tabViewUn = this.findParentUniqueName(panel);
+        const tabView = tabViewUn ? this.getElementByName(tabViewUn) : null;
+        if (!tabView || String(tabView.name || '').toUpperCase() !== 'TABVIEW' || !Array.isArray(tabView.nestedComponents)) {
+            return;
+        }
+        tabView.nestedComponents.forEach((p) => {
+            if (!p?.inputs) {
+                p.inputs = {};
+            }
+            p.inputs.selected = String(p?.uniqueName || '') === String(panel?.uniqueName || '');
+        });
+    }
+    /** Importa una dashboard salvata DENTRO l'elemento (nei suoi nestedComponents). */
+    async importDashboardIntoElement(target) {
+        if (!this.isFreeContainer(target)) {
+            return;
+        }
+        const options = (this.savedDashboardOptions || []).map((o) => ({ label: o.label, value: o.value }));
+        if (!options.length) {
+            WtoolboxService.messageNotificationService.add({ severity: 'info', summary: this.t('designer.import.title', 'Import'), detail: this.t('designer.import.no_dashboards', 'Nessuna dashboard salvata') });
+            return;
+        }
+        const resp = await WtoolboxService.promptDialog(this.t('designer.import.pick_dashboard', 'Importa dashboard qui'), [{ name: 'dash', caption: this.t('designer.import.dashboard', 'Dashboard'), type: 'dictionary', dictionaryData: options, value: '', required: true }], null, '440px', '230px');
+        const route = String(resp?.dash?.value ?? '').trim();
+        if (!route) {
+            return;
+        }
+        let boardcontent = null;
+        try {
+            const result = await this.dataSrv.loadDashboard({ user_id: this.userInfo.getuserInfo().user_id, dashRoute: route });
+            const rows = Array.isArray(result) ? result : (Array.isArray(result?.results) ? result.results : (result ? [result] : []));
+            boardcontent = rows?.[0]?.boardcontent ?? null;
+        }
+        catch {
+            boardcontent = null;
+        }
+        await this.importBoardcontentIntoElement(target, boardcontent);
+    }
+    /** Importa un PRESET locale DENTRO l'elemento (nei suoi nestedComponents). */
+    async importPresetIntoElement(target) {
+        if (!this.isFreeContainer(target)) {
+            return;
+        }
+        const presets = this.readDesignerPresets();
+        const names = Object.keys(presets || {});
+        if (!names.length) {
+            WtoolboxService.messageNotificationService.add({ severity: 'info', summary: this.t('designer.import.title', 'Import'), detail: this.t('designer.import.no_presets', 'Nessun preset salvato') });
+            return;
+        }
+        const resp = await WtoolboxService.promptDialog(this.t('designer.import.pick_preset', 'Importa preset qui'), [{ name: 'preset', caption: this.t('designer.import.preset', 'Preset'), type: 'dictionary', dictionaryData: names.map((n) => ({ label: n, value: n })), value: '', required: true }], null, '440px', '230px');
+        const name = String(resp?.preset?.value ?? '').trim();
+        if (!name || !presets[name]) {
+            return;
+        }
+        await this.importBoardcontentIntoElement(target, presets[name]);
+    }
+    /**
+     * Importa un boardcontent (dashboard salvata o preset) DENTRO un container:
+     * rimappa uniqueName/componentId con id freschi (niente collisioni) e i riferimenti
+     * che li puntano (datasource, parentDatasource, dropped-component...), poi riusa la
+     * rehydration completa di loadDashboard (datasource inclusi) in modalita' insert-target.
+     */
+    async importBoardcontentIntoElement(target, boardContentRaw) {
+        if (!target || !boardContentRaw) {
+            WtoolboxService.messageNotificationService.add({ severity: 'warn', summary: this.t('designer.import.title', 'Import'), detail: this.t('designer.import.empty', 'Contenuto vuoto o non valido') });
+            return;
+        }
+        let imported;
+        try {
+            imported = JSON.parse(boardContentRaw);
+        }
+        catch {
+            imported = null;
+        }
+        if (!Array.isArray(imported)) {
+            imported = Array.isArray(imported?.dashboardElements) ? imported.dashboardElements
+                : Array.isArray(imported?.elements) ? imported.elements : [];
+        }
+        if (!imported.length) {
+            WtoolboxService.messageNotificationService.add({ severity: 'warn', summary: this.t('designer.import.title', 'Import'), detail: this.t('designer.import.empty', 'Contenuto vuoto o non valido') });
+            return;
+        }
+        // 1. Rimappa gli ID con id freschi (getNewID -> uniqueName = name__id) e traccia old->new.
+        const nameMap = new Map();
+        const idMap = new Map();
+        this.remapImportedIds(imported, nameMap, idMap);
+        // 2. Aggiorna i riferimenti agli elementi (datasource ecc.) coi nuovi uniqueName/id.
+        this.remapImportedReferences(imported, nameMap, idMap);
+        // 3. Riusa la rehydration completa di loadDashboard in modalita' insert-target.
+        await this.loadDashboard({ boardcontent: JSON.stringify(imported), board_route: '' }, true, target);
+        WtoolboxService.messageNotificationService.add({ severity: 'success', summary: this.t('designer.import.title', 'Import'), detail: this.t('designer.import.done', 'Contenuto importato nell\'elemento') });
+    }
+    /** Rimappa ricorsivamente componentId/uniqueName degli elementi importati con id freschi. */
+    remapImportedIds(nodes, nameMap, idMap) {
+        for (const el of (nodes || [])) {
+            if (!el || typeof el !== 'object') {
+                continue;
+            }
+            const oldName = String(el.uniqueName || '');
+            const oldId = Number(el.componentId);
+            const newId = this.getNewID();
+            const newName = String(el.name || 'ITEM') + '__' + newId;
+            if (oldName) {
+                nameMap.set(oldName, newName);
+            }
+            if (!isNaN(oldId)) {
+                idMap.set(oldId, newId);
+            }
+            el.componentId = newId;
+            el.uniqueName = newName;
+            if (Array.isArray(el.nestedComponents)) {
+                this.remapImportedIds(el.nestedComponents, nameMap, idMap);
+            }
+        }
+    }
+    /** Aggiorna i riferimenti (oggetti con uniqueName/id) dentro gli inputs, coi nuovi valori. */
+    remapImportedReferences(nodes, nameMap, idMap) {
+        const SKIP = new Set(['nestedComponents', 'inputProps', 'toolProps', 'metaInfo', 'componentRef', 'propertyTree']);
+        const remap = (v, depth) => {
+            if (!v || typeof v !== 'object' || depth > 6) {
+                return;
+            }
+            if (Array.isArray(v)) {
+                for (const it of v) {
+                    remap(it, depth + 1);
+                }
+                return;
+            }
+            if (typeof v.uniqueName === 'string' && nameMap.has(v.uniqueName)) {
+                v.uniqueName = nameMap.get(v.uniqueName);
+                if (typeof v.id === 'number' && idMap.has(v.id)) {
+                    v.id = idMap.get(v.id);
+                }
+                if (typeof v.componentId === 'number' && idMap.has(v.componentId)) {
+                    v.componentId = idMap.get(v.componentId);
+                }
+            }
+            for (const k of Object.keys(v)) {
+                if (SKIP.has(k)) {
+                    continue;
+                }
+                remap(v[k], depth + 1);
+            }
+        };
+        const walk = (list) => {
+            for (const el of (list || [])) {
+                if (!el) {
+                    continue;
+                }
+                remap(el.inputs, 0);
+                if (Array.isArray(el.nestedComponents)) {
+                    walk(el.nestedComponents);
+                }
+            }
+        };
+        walk(nodes);
+    }
+    showHierarchyNodeContextMenu(event, node, menu) {
+        event.preventDefault();
+        event.stopPropagation();
+        const uniqueName = String(node?.key || '').trim();
+        this.hierarchyCtxElement = uniqueName ? this.getElementByName(uniqueName) : null;
+        this.hierarchyCtxItems = this.buildElementContextMenuItems(this.hierarchyCtxElement);
+        menu.show(event);
+    }
+    onHierarchyNodeSelect(event) {
+        const node = event?.node;
+        if (!node) {
+            return;
+        }
+        const uniqueName = String(node?.key || '').trim();
+        if (!uniqueName) {
+            return;
+        }
+        const item = this.getElementByName(uniqueName);
+        if (!item) {
+            return;
+        }
+        this.selectDashboardItem(item);
+        this.cd.detectChanges();
+    }
+    onHierarchyNodeMouseEnter(node) {
+        const uniqueName = String(node?.key || '').trim();
+        if (!uniqueName) {
+            return;
+        }
+        this.setHierarchyHoverHighlightByKey(uniqueName);
+    }
+    onHierarchyNodeMouseLeave() {
+        this.clearHierarchyHoverHighlight();
+    }
+    isHierarchyNodeSelected(node) {
+        const nodeKey = String(node?.key || '').trim();
+        const selectedKey = String(this.hierarchySelection?.key || '').trim();
+        return !!nodeKey && nodeKey === selectedKey;
+    }
+    setHierarchyHoverHighlightByKey(uniqueName) {
+        const key = String(uniqueName || '').trim();
+        this.clearHierarchyHoverHighlight();
+        if (!key) {
+            return;
+        }
+        const item = this.getElementByName(key);
+        if (!item) {
+            return;
+        }
+        this.setFooterHoverHighlight(item);
+        if (typeof document === 'undefined') {
+            return;
+        }
+        const footerElement = document.querySelector(`.designer-footer-item[data-designer-unique-name="${key}"]`);
+        if (footerElement) {
+            footerElement.classList.add('designer-tree-hover-target');
+            this.hierarchyHoverFooterElement = footerElement;
         }
     }
     clearHierarchyHoverHighlight() {
@@ -7946,13 +9204,14 @@ class DesignerComponent {
         event.preventDefault();
         event.stopPropagation();
         this.footerCtxElement = item;
+        this.footerCtxItems = this.buildElementContextMenuItems(item);
         menu.show(event);
     }
     /**
-     * Rinomina l'elemento selezionato nel footer context menu aggiornando `displayName`.
+     * Rinomina un elemento aggiornando `displayName`. Usato dal context menu
+     * unificato (canvas/gerarchia/footer) via `buildElementContextMenuItems`.
      */
-    async renameFooterContextItem() {
-        const item = this.footerCtxElement;
+    async renameDesignerElement(item) {
         if (!item) {
             return;
         }
@@ -8428,12 +9687,9 @@ class DesignerComponent {
             const fieldCtxItems = (contextField && contextDs)
                 ? this.buildFieldEditorContextMenuItems(contextField, contextDs)
                 : [];
-            if (el && el.ctxItems) {
-                this.ctxItems.next([...fieldCtxItems, ...el.ctxItems]);
-            }
-            else {
-                this.ctxItems.next([...fieldCtxItems, ...this.defaultCtxItems]);
-            }
+            // Menu elemento dalla sorgente unificata (edit/duplica/rinomina/rimuovi +
+            // import per i container); il canvas antepone le voci field-editor.
+            this.ctxItems.next([...fieldCtxItems, ...this.buildElementContextMenuItems(el)]);
             if (el) {
                 this.ctxElement = el;
             }
@@ -9230,6 +10486,36 @@ class DesignerComponent {
             this.closeArchetypeConfigurator();
             return;
         }
+        this.applyArchetypeConfigToTool(tool, action, nextConfig);
+        this.closeArchetypeConfigurator();
+    }
+    /**
+     * Core riusabile di {@link onArchetypeConfigApply}: applica la config di
+     * archetipo a un DATAREPEATER tool. Scrive `customProps_<action>` sulle
+     * proprietà del tool (= ciò che il chatbot designer_inject persiste e l'archetipo
+     * legge), aggiorna `metaInfo.tableMetadata.extraProps`+`md_props_bag`, e RIGENERA
+     * il render chiamando `ds.fetchData()` (re-emit `fetchInfo$` → l'archetipo
+     * ri-legge type/opzioni) + `propertyTreeBuilder`. NESSUNA chiamata server.
+     * Usato sia dal configuratore UI ("Configura chart") sia dall'injection del
+     * chatbot (drop di un DATAREPEATER con `archetype_config`).
+     */
+    applyArchetypeConfigToTool(tool, action, nextConfig) {
+        if (!tool || !action || !nextConfig)
+            return;
+        // Chart AGGREGATO: con groupInfo/aggregates il backend ritorna il valore per-gruppo nella
+        // colonna `<field>_<AGG>` (es. LatestRecordedPopulation_AVG), NON nel campo grezzo (null nelle
+        // righe gruppo). Il modello/configuratore emette il campo grezzo come dataField + l'aggregato in
+        // `aggregates`: qui colleghiamo i due riscrivendo il dataField dei datasets sul nome aggregato,
+        // cosi' il chart plotta i valori per gruppo (suffix uppercase, coerente con _Metadati_methods).
+        if (Array.isArray(nextConfig.aggregates) && nextConfig.aggregates.length && nextConfig.dataOptions?.datasets) {
+            for (const dset of nextConfig.dataOptions.datasets) {
+                const agg = nextConfig.aggregates.find((a) => a?.field === dset?.dataField);
+                const sfx = agg?.aggregate ? '_' + String(agg.aggregate).toUpperCase() : '';
+                if (sfx && dset?.dataField && !String(dset.dataField).toUpperCase().endsWith(sfx)) {
+                    dset.dataField = dset.dataField + sfx;
+                }
+            }
+        }
         const customKey = 'customProps_' + action;
         tool.inputs[customKey] = this.toBehaviorSubjectsObject(nextConfig);
         const metaInfo = this.getDesignerDatasourceMetaInfo(tool);
@@ -9238,15 +10524,33 @@ class DesignerComponent {
             extraProps.archetypes = extraProps.archetypes || {};
             const currentArchetype = extraProps.archetypes[action] || {};
             extraProps.archetypes[action] = Object.assign({}, currentArchetype, nextConfig);
+            // AGGREGAZIONE chart: groupInfo/aggregates sono config DATASOURCE-level (extraProps
+            // top-level, lette in data-source.component initMetadata:1914), non archetype-level. Se
+            // l'archetype_config li porta (es. chart 'popolazione media per provincia'), sollevali a
+            // extraProps top-level cosi' il datasource raggruppa/aggrega lato server nel fetch.
+            if (Array.isArray(nextConfig.groupInfo))
+                extraProps.groupInfo = nextConfig.groupInfo;
+            if (Array.isArray(nextConfig.aggregates))
+                extraProps.aggregates = nextConfig.aggregates;
             metaInfo.tableMetadata.extraProps = extraProps;
             metaInfo.tableMetadata.md_props_bag = JSON.stringify(extraProps);
         }
         const ds = tool.inputs?.['datasource']?.component?.value;
+        // Il datasource parsa extraProps.groupInfo/aggregates SOLO all'init metadata: qui (config
+        // applicato a runtime dall'injection/configuratore) li settiamo a mano sull'istanza PRIMA
+        // del fetch, cosi' la fetchData successiva raggruppa/aggrega lato server (un punto per gruppo).
+        if (ds) {
+            if (Array.isArray(nextConfig.groupInfo)) {
+                ds.groupInfo = nextConfig.groupInfo.map((x) => ({ field: x?.field, groupFormula: x?.groupFormula, dir: x?.dir, groupCount: x?.groupCount }));
+            }
+            if (Array.isArray(nextConfig.aggregates)) {
+                ds.aggregationInfo = nextConfig.aggregates.map((x) => ({ field: x?.field, aggregate: x?.aggregate }));
+            }
+        }
         if (ds?.fetchData) {
             ds.fetchData();
         }
         this.propertyTreeBuilder(action, tool.inputs);
-        this.closeArchetypeConfigurator();
     }
     /**
      * Espone i metadati datasource al popup configuratore archetype.
@@ -10436,6 +11740,7 @@ Display formula context:
                 });
             }
             let destination = this.dashboardElements;
+            let parentContainerTool = null;
             if (event.toElement) {
                 let id = event.toElement.getAttribute("id");
                 let parentEl = event.toElement.parentElement;
@@ -10451,6 +11756,7 @@ Display formula context:
                     if (match) {
                         if (!match.allowedChildren || match.allowedChildren.includes(currentTool.name)) {
                             destination = match?.nestedComponents;
+                            parentContainerTool = match;
                         }
                         else {
                             WtoolboxService.messageNotificationService.add({
@@ -10476,11 +11782,68 @@ Display formula context:
                 currentTool.onDrop(currentTool);
             }
             this.tool = currentTool;
+            // Flusso assoluto (feature, default OFF): l'elemento droppato nasce
+            // position:absolute con left/top dalla posizione del drop -> fuori dal flusso,
+            // quindi ridimensionarne uno non sposta gli altri.
+            if (this.absoluteFlowEnabled) {
+                // Riferimento di posizionamento: il container se droppo dentro uno, altrimenti il canvas.
+                let refEl = this.canvasRef?.nativeElement || null;
+                if (parentContainerTool) {
+                    const containerDom = document.getElementById(parentContainerTool.uniqueName);
+                    if (containerDom) {
+                        refEl = containerDom;
+                        // Il container diventa il contesto di posizionamento del figlio absolute
+                        // (se non e' gia' posizionato): cosi' left/top del figlio sono relativi a lui.
+                        const curPos = String(parentContainerTool.inputs?.['position'] || '').trim();
+                        if (!curPos || curPos === 'static') {
+                            parentContainerTool.inputs['position'] = 'relative';
+                        }
+                    }
+                }
+                const pos = this.getDropPositionRelativeTo(event, refEl);
+                currentTool.inputs['position'] = 'absolute';
+                currentTool.inputs['left'] = pos.left + 'px';
+                currentTool.inputs['top'] = pos.top + 'px';
+            }
             this.flattenedDashboardElements = this.flattenComponentTree(this.dashboardElements);
+            // Snap-on-drop SOLO in flusso normale: in modalita' assoluta la posizione e'
+            // gia' settata (left/top) e snappata sopra.
+            if (!this.absoluteFlowEnabled) {
+                this.snapDroppedElementToGrid(currentTool);
+            }
             this.commitHistoryIfChanged();
             this.draggedPayload = null;
         }
     }
+    /**
+     * Snap-on-drop: se lo snap alla griglia e' attivo, allinea la posizione
+     * dell'elemento appena droppato al multiplo di griglia scrivendo un
+     * `inputs.transform` di traslazione (stessa proprieta' usata da `onMoving`,
+     * quindi persiste su save/reload). Deferred perche' l'elemento deve essere
+     * nel DOM per leggere `offsetLeft/offsetTop` (posizione di flusso, senza
+     * transform). No-op se snap off o gia' allineato.
+     */
+    snapDroppedElementToGrid(tool) {
+        const g = DesignerSnapState.gridSize;
+        if (!g || g <= 0 || !tool?.uniqueName) {
+            return;
+        }
+        setTimeout(() => {
+            const el = document.getElementById(tool.uniqueName);
+            if (!el) {
+                return;
+            }
+            const dx = Math.round(el.offsetLeft / g) * g - el.offsetLeft;
+            const dy = Math.round(el.offsetTop / g) * g - el.offsetTop;
+            if (dx === 0 && dy === 0) {
+                return;
+            }
+            tool.inputs = tool.inputs || {};
+            tool.inputs['transform'] = `matrix(1, 0, 0, 1, ${dx}, ${dy})`;
+            this.cd.detectChanges();
+            this.commitHistoryIfChanged();
+        }, 0);
+    }
     /**
      * Genera un nuovo identificativo incrementale per `componentId`.
      */
@@ -10769,7 +12132,80 @@ Display formula context:
      * - `elements` (JSON) -> `boardcontent` (TEXT)
      * e aggiorna anche i fogli collegati in `dom_board_sheet`.
      */
+    /**
+     * Lint pre-save del boardcontent: individua problemi di configurazione che
+     * altrimenti emergerebbero solo a runtime. Metodo puro (nessun side-effect),
+     * riusabile e testabile. Rileva:
+     *  - uniqueName duplicati (rompono selezione/rimozione/hierarchy tree, key=uniqueName);
+     *  - binding datasource orfani (DATAREPEATER/SELECT/MULTISELECT/UL che puntano a
+     *    un DATASOURCE.uniqueName inesistente nel layout);
+     *  - DATASOURCE senza route impostata.
+     */
+    computeDashboardLintIssues() {
+        const issues = [];
+        const flat = this.flattenComponentTree(this.dashboardElements) || [];
+        // 1. uniqueName duplicati
+        const seen = new Set();
+        const dup = new Set();
+        for (const el of flat) {
+            const un = String(el?.uniqueName || '').trim();
+            if (!un) {
+                continue;
+            }
+            if (seen.has(un)) {
+                dup.add(un);
+            }
+            seen.add(un);
+        }
+        for (const un of dup) {
+            issues.push(this.trslSrv.format(this.t('designer.lint.duplicate_unique_name', "Nome elemento duplicato: '{0}'"), un));
+        }
+        // 2. uniqueName dei DATASOURCE disponibili
+        const dsNames = new Set();
+        for (const el of flat) {
+            if (el?.name === 'DATASOURCE') {
+                const un = String(el?.uniqueName || '').trim();
+                if (un) {
+                    dsNames.add(un);
+                }
+            }
+        }
+        // 3. binding orfani + DATASOURCE senza route
+        for (const el of flat) {
+            const name = String(el?.name || '');
+            if (name === 'DATAREPEATER' || name === 'SELECT' || name === 'MULTISELECT' || name === 'UL') {
+                const ds = el?.inputs?.['datasource'];
+                const dsUn = ds && typeof ds === 'object' ? String(ds.uniqueName || '').trim() : '';
+                if (dsUn && !dsNames.has(dsUn)) {
+                    issues.push(this.trslSrv.format(this.t('designer.lint.orphan_datasource_binding', "Il componente '{0}' punta a un datasource inesistente ('{1}')"), String(el?.uniqueName || el?.name || ''), dsUn));
+                }
+            }
+            if (name === 'DATASOURCE') {
+                const routeVal = el?.inputs?.['route'];
+                const routeStr = routeVal instanceof BehaviorSubject ? routeVal.value : routeVal;
+                if (!String(routeStr || '').trim()) {
+                    issues.push(this.trslSrv.format(this.t('designer.lint.datasource_without_route', "Il datasource '{0}' non ha una route impostata"), String(el?.uniqueName || 'DATASOURCE')));
+                }
+            }
+        }
+        return issues;
+    }
     async saveDashboard() {
+        // Lint pre-save non bloccante: se ci sono problemi, elencali e chiedi conferma.
+        const lintIssues = this.computeDashboardLintIssues();
+        if (lintIssues.length > 0) {
+            const proceed = await WtoolboxService.confirm({
+                header: this.t('designer.lint.title', 'Problemi nel layout'),
+                message: this.t('designer.lint.intro', 'Il layout presenta alcuni problemi:')
+                    + ' ' + lintIssues.map((i) => '• ' + i).join('  ')
+                    + ' — ' + this.t('designer.lint.confirm_save_anyway', 'Salvare comunque?'),
+                acceptLabel: this.t('confirm', 'Confirm'),
+                rejectLabel: this.t('cancel', 'Cancel')
+            });
+            if (!proceed) {
+                return;
+            }
+        }
         const route = String(this.currentDashboardRoute || '').trim();
         if (route) {
             const payload = {
@@ -10855,14 +12291,18 @@ Display formula context:
      * e ricostruisce lo stato runtime del designer partendo da `dom_board.boardcontent`.
      * Supporta route in forme alias (`board_route`, `boardroute`, `dashRoute`).
      */
-    async loadDashboard(dashboard, skipServerFetch = false) {
+    async loadDashboard(dashboard, skipServerFetch = false, insertTarget = null) {
         const dashRoute = String(dashboard?.board_route ??
             dashboard?.boardroute ??
             dashboard?.boardRoute ??
             dashboard?.dashRoute ??
             dashboard ??
             '').trim();
-        if (!dashRoute) {
+        // Import/preset (feature C/F) passano boardcontent con route eventualmente
+        // vuota (board non ancora salvata). NON fare reset in quel caso: il reset va
+        // fatto solo quando NON c'e' ne' route ne' contenuto (nuovo grafo / clear).
+        const providedBoardcontent = dashboard?.boardcontent ?? dashboard?.boardContent ?? null;
+        if (!dashRoute && !providedBoardcontent) {
             this.dashboardElements = [];
             this.flattenedDashboardElements = [];
             this.currentDashboardRoute = '';
@@ -10876,8 +12316,10 @@ Display formula context:
             this.cd.detectChanges();
             return;
         }
-        this.currentDashboardRoute = dashRoute;
-        this.refreshGraphActionsMenuItems();
+        if (!insertTarget) {
+            this.currentDashboardRoute = dashRoute;
+            this.refreshGraphActionsMenuItems();
+        }
         let resultRows = [];
         let result = null;
         if (!skipServerFetch) {
@@ -10890,14 +12332,16 @@ Display formula context:
                 ? result
                 : (Array.isArray(result?.results) ? result.results : (result ? [result] : []));
         }
-        this.currentDashboardDescription = String(dashboard?.board_des ??
-            dashboard?.boarddes ??
-            resultRows?.[0]?.board_des ??
-            resultRows?.[0]?.boarddes ??
-            this.currentDashboardDescription ??
-            dashRoute).trim();
-        const boardSheetPaths = this.extractDashboardSheetPaths(resultRows, dashboard);
-        await this.loadDashboardCssSheets(boardSheetPaths);
+        if (!insertTarget) {
+            this.currentDashboardDescription = String(dashboard?.board_des ??
+                dashboard?.boarddes ??
+                resultRows?.[0]?.board_des ??
+                resultRows?.[0]?.boarddes ??
+                this.currentDashboardDescription ??
+                dashRoute).trim();
+            const boardSheetPaths = this.extractDashboardSheetPaths(resultRows, dashboard);
+            await this.loadDashboardCssSheets(boardSheetPaths);
+        }
         const boardContentRaw = resultRows?.[0]?.boardcontent ?? dashboard?.boardcontent ?? dashboard?.boardContent ?? null;
         if (boardContentRaw) {
             let loadedDashboard = [];
@@ -10915,7 +12359,9 @@ Display formula context:
                         : [];
             }
             this.mergeMissingToolPropsRecursive(loadedDashboard);
-            this.dashboardComponents = [];
+            if (!insertTarget) {
+                this.dashboardComponents = [];
+            }
             let dsSubs = [];
             let dsElements = [];
             let dsElementCount = (loadedDashboard || []).filter(x => x?.name == 'DATASOURCE').length;
@@ -11057,18 +12503,34 @@ Display formula context:
             });
             // Ensure a new reference for template control-flow and force refresh when
             // async loading happens outside Angular zone.
-            this.dashboardElements = Array.isArray(loadedDashboard) ? [...loadedDashboard] : [];
-            this.flattenedDashboardElements = flattened;
+            if (insertTarget) {
+                // Import IN-elemento: inserisci gli elementi importati nei nestedComponents
+                // del target invece di sostituire l'intero canvas.
+                insertTarget.nestedComponents = Array.isArray(insertTarget.nestedComponents) ? insertTarget.nestedComponents : [];
+                insertTarget.nestedComponents.push(...(Array.isArray(loadedDashboard) ? loadedDashboard : []));
+                this.dashboardElements = Array.isArray(this.dashboardElements) ? [...this.dashboardElements] : [];
+                this.flattenedDashboardElements = this.flattenComponentTree(this.dashboardElements);
+            }
+            else {
+                this.dashboardElements = Array.isArray(loadedDashboard) ? [...loadedDashboard] : [];
+                this.flattenedDashboardElements = flattened;
+            }
             this.cd.detectChanges();
         }
-        else {
+        else if (!insertTarget) {
             this.dashboardElements = [];
             this.flattenedDashboardElements = [];
             this.currentDashboardRoute = '';
             this.cd.detectChanges();
             console.warn('[Designer] No dashboard content found for route:', dashRoute, result);
         }
-        this.resetHistory();
+        if (insertTarget) {
+            // Import in-elemento: NON resettare la history (stiamo aggiungendo), committa.
+            this.commitHistoryIfChanged();
+        }
+        else {
+            this.resetHistory();
+        }
         this.refreshGraphActionsMenuItems();
         this.maxId = (this.flattenedDashboardElements || []).reduce((max, item) => Math.max(max, Number(item?.componentId || 0)), 0);
     }
@@ -11828,11 +13290,11 @@ Display formula context:
         // return customProps;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DesignerComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: DataProviderService }, { token: MetadataProviderService }, { token: UserInfoService }, { token: i0.ChangeDetectorRef }, { token: TranslationManagerService }, { token: MetadataEditorService }, { token: ChatbotHostRegistryService }, { token: WorkflowRuntimeMetadataService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DesignerComponent, isStandalone: true, selector: "wuic-designer", host: { listeners: { "window:hashchange": "onWindowHashChange()", "window:beforeunload": "onWindowBeforeUnload($event)", "window:keydown": "onWindowKeydown($event)", "window:mouseup": "onWindowMouseup()", "window:touchend": "onWindowTouchend()", "window:keyup": "onWindowKeyup()", "window:change": "onWindowChange()" } }, providers: [TreeDragDropService], ngImport: i0, template: "<!-- <button pButton type=\"button\" (click)=\"loadDashboard()\" class=\"mr-2\">{{'load' | translate}}</button> -->\n@if (!noEdit) {\n<div class=\"designer-layout\">\n  <div class=\"designer-toolbar\">\n    <div class=\"designer-current-dashboard\">{{ currentDashboardTitle }}</div>\n\n    <div class=\"designer-toolbar-spacer\"></div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"undo()\" [disabled]=\"!canUndo\">{{ 'designer.undo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"redo()\" [disabled]=\"!canRedo\">{{ 'designer.redo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"refreshGraphActionsMenuItems(); graphActionsMenu.toggle($event)\">{{ 'designer.actions_menu' | translate }}</button>\n      <p-menu #graphActionsMenu [popup]=\"true\" [model]=\"graphActionsMenuItems\" appendTo=\"body\"></p-menu>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"openCurrentDashboardInNewTab()\" [disabled]=\"!currentDashboardRoute\">{{\n        'designer.open_current_dashboard' | translate }}</button>\n    </div>\n  </div>\n  <div class=\"designer-main\">\n    <p-splitter [style]=\"{ height: '100%' }\" [panelSizes]=\"[15, 85]\" styleClass=\"designer-main-splitter\">\n      <ng-template pTemplate>\n        <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[35, 65]\"\n          [minSizes]=\"[20, 30]\" styleClass=\"designer-left-splitter\">\n          <ng-template pTemplate>\n            <div class=\"col flex designer-toolbox palette-panel\">\n              <ul class=\"tool-groups\">\n                @for (toolGroup of availableToolGroups; track toolGroup.group) {\n                <li class=\"tool-group-item\">\n                  <div class=\"tool-group-title\">{{ toolGroup.group }}</div>\n                  <ul class=\"tool-group-list\">\n                    @for (tool of toolGroup.tools; track tool) {\n                    <li pDraggable (onDragStart)=\"dragStart(tool)\" (onDragEnd)=\"dragEnd()\" (onDrag)=\"onDrag($event)\"\n                      (dblclick)=\"dropToolAtRoot(tool)\">\n                      <i [ngClass]=\"tool.icon\" [title]=\"tool.name\"></i>\n                    </li>\n                    }\n                  </ul>\n                </li>\n                }\n              </ul>\n            </div>\n          </ng-template>\n          <ng-template pTemplate>\n            <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[68, 32]\"\n              [minSizes]=\"[35, 20]\" styleClass=\"designer-left-bottom-splitter\">\n              <ng-template pTemplate>\n                <div class=\"properties-panel\">\n                  <p-select [style]=\"{width: '100%'}\" [options]=\"flattenedDashboardElements\" [(ngModel)]=\"tool\"\n                    optionLabel=\"uniqueName\" dataKey=\"componentId\" appendTo=\"body\" />\n                  <div class=\"designer-toolbox\">\n\n                    <span style=\"width: 100%;\">\n                      <input type=\"text\" style=\"width: calc(100% - 30px);\" [(ngModel)]=\"propFilter\"\n                        [placeholder]=\"'prop.filter' | translate\" />\n                      <button style=\"width: 25px\" (click)=\"clearPropFilter()\">X</button>\n                    </span>\n\n                    @for (section of getToolPropertySections(tool, propFilter); track section.key) {\n                    <details class=\"prop-section\" [open]=\"section.open\"\n                      (toggle)=\"onPropertySectionToggle(tool, section.key, $event)\">\n                      <summary class=\"prop-section-title\">{{ section.label }}</summary>\n                      <ul class=\"props\">\n                        @for (toolProp of section.props; track toolProp.key) {\n                        <li>\n                          @if (!toolProp.value.hideCaption) {\n                          <span>{{ toolProp.value?.propertyCaption ||\n                            toolProp.key[0].toUpperCase() + toolProp.key.slice(1)\n                            }}</span>\n                          }\n                          <br />\n                          @if (toolProp.value.type == 'button') {\n                          <p-button (click)=\"toolProp.value.callback(tool.inputs, toolProp.key, null, tool)\"\n                            class=\"k-button\" [style]=\"{width: '100%'}\">\n                            {{toolProp.value.propertyCaption}}\n                          </p-button>\n                          }\n                          @if (toolProp.value.type == 'metaEditor' &&\n                          tool.inputs['componentRef']?.value?.component) {\n                          <wuic-metadata-editor [hardcodedDatasource]=\"tool.inputs['componentRef']?.value?.component\"\n                            [saveCallback]=\"metaEditorSave\"></wuic-metadata-editor>\n                          }\n                          @if (toolProp.value.type == 'boolean') {\n                          <input type=\"checkbox\" [(ngModel)]=\"tool.inputs[toolProp.key]\" />\n                          }\n                          @if (toolProp.value.type == 'numberToArray') {\n                          <input style=\"width: 100%;\" type=\"number\" pInputText [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'txt_area') {\n                          <textarea style=\"width: 100%;\" [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\"></textarea>\n                          }\n                          @if (toolProp.value.type == 'string') {\n                          <input style=\"width: 100%;\" type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'color') {\n                          <p-colorPicker [ngModel]=\"getDesignerColorPickerHex(tool, toolProp)\"\n                            (ngModelChange)=\"onDesignerColorPickerHexChange($event, tool, toolProp)\" appendTo=\"body\" />\n                          <div class=\"designer-color-alpha-row\">\n                            <span class=\"designer-color-alpha-label\">{{ 'designer.alpha' | translate }}</span>\n                            <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                            <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                          </div>\n                          <input type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'dictionary' && !toolProp.value.async) {\n                          @if (toolProp.key == 'cssFile') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"availableProjectCssFiles\"\n                            [ngModel]=\"tool.inputs[toolProp.key]\" (ngModelChange)=\"onCssFileChanged($event, tool)\" />\n                          } @else if (toolProp.key == 'cssClass') {\n                          <p-multiSelect [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getCssClassOptionsForTool(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"onCssClassChanged($event, tool)\" [filter]=\"true\" [virtualScroll]=\"true\"\n                            [virtualScrollItemSize]=\"38\" scrollHeight=\"260px\" [showToggleAll]=\"false\" display=\"chip\"\n                            [maxSelectedLabels]=\"3\" [selectedItemsLabel]=\"'{0} selected'\">\n                          </p-multiSelect>\n                          } @else if ((tool.name == 'SELECT' || tool.name == 'MULTISELECT' || tool.name == 'UL') &&\n                          (toolProp.key == 'valueField' || toolProp.key == 'textField')) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else if (tool.name == 'LABEL' && toolProp.key == 'displayField') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          }\n                          @if (toolProp.value.type == 'dictionary' && toolProp.value.async) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (tool.name == 'DATAREPEATER' && toolProp.key == 'action' &&\n                          canOpenArchetypeConfigurator(tool)) {\n                          <button style=\"margin-top: 8px;\" (click)=\"openArchetypeConfigurator(tool)\">\n                            {{ 'designer.configure' | translate }} {{ (tool.inputs['action'] | async) || '' }}\n                          </button>\n                          }\n                          @if (toolProp.value.type == 'dropped-component-list') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [placeholder]=\"'select.component' | translate\" [options]=\"elementFilter(toolProp)\"\n                            [ngModel]=\"getDroppedComponentListModel(tool, toolProp)\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" optionLabel=\"uniqueName\"\n                            dataKey=\"uniqueName\" />\n                          }\n                          @if (toolProp.value.type == 'autocomplete') {\n                          <p-autoComplete [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\" [forceSelection]=\"true\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" [suggestions]=\"tool.suggestions\"\n                            [optionLabel]=\"toolProp.value.displayField\" [optionValue]=\"toolProp.value.valueField\"\n                            (completeMethod)=\"search($event, tool, toolProp)\" [dropdown]=\"true\" dropdownMode=\"current\"\n                            [multiple]=\"toolProp.value.multiple\" />\n                          }\n                          @if (toolProp.value.type == 'propertyTree' && shouldShowPropertyTree(tool)) {\n                          <ul>\n                            @for (item of $any(tool.inputs[toolProp.key] | async); track item) {\n                            <li style=\"padding: 0; margin: 0;\">\n                              @if (item.col && tool.inputs['customProps_' + (tool.inputs['action'] | async)])\n                              {\n                              <wuic-field-editor [field]=\"item.col\"\n                                [record]=\"tool.inputs['customProps_' + (tool.inputs['action'] | async)]\"\n                                [metaInfo]=\"tool.inputs['datasource']?.component?.value?.metaInfo\"\n                                [triggerProp]=\"tool.inputs['action']\"></wuic-field-editor>\n                              }\n                            </li>\n                            }\n                          </ul>\n                          }\n                        </li>\n                        }\n                      </ul>\n                    </details>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n              <ng-template pTemplate>\n                <div class=\"hierarchy-panel\">\n                  <div class=\"hierarchy-panel-title\">{{ 'designer.canvas_hierarchy' | translate }}</div>\n                  <div class=\"hierarchy-tree-wrap\">\n                    <p-tree [value]=\"hierarchyTreeNodes\" [draggableNodes]=\"true\" [droppableNodes]=\"true\"\n                      selectionMode=\"single\" [(selection)]=\"hierarchySelection\"\n                      (onNodeSelect)=\"onHierarchyNodeSelect($event)\" draggableScope=\"designer-hierarchy\"\n                      droppableScope=\"designer-hierarchy\" (onNodeDrop)=\"onHierarchyNodeDrop($event)\">\n                      <ng-template let-node pTemplate=\"default\">\n                        <span class=\"hierarchy-node-label\" [class.active]=\"isHierarchyNodeSelected(node)\"\n                          (mouseenter)=\"onHierarchyNodeMouseEnter(node)\" (mouseleave)=\"onHierarchyNodeMouseLeave()\"\n                          (contextmenu)=\"showHierarchyNodeContextMenu($event, node, hierarchyCtxMenu)\">\n                          {{ node.label }}\n                        </span>\n                      </ng-template>\n                    </p-tree>\n                  </div>\n                  <p-contextMenu #hierarchyCtxMenu [model]=\"hierarchyCtxItems\" appendTo=\"body\" />\n                </div>\n              </ng-template>\n            </p-splitter>\n          </ng-template>\n        </p-splitter>\n      </ng-template>\n      <ng-template pTemplate>\n        <div class=\"col dashboard-design\" [class.designer-hide-datasources]=\"hideDatasourcesInCanvas\" pDroppable\n          (onDrop)=\"drop($event)\" #canvas (contextmenu)=\"showCtx($event, this)\">\n          <wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n          <p-contextMenu [target]=\"canvas\" [model]=\"ctxItems | async\" appendTo=\"body\" />\n        </div>\n      </ng-template>\n    </p-splitter>\n  </div>\n  <div class=\"designer-footer\">\n    <div class=\"designer-footer-label\">{{ 'designer.items' | translate }}:</div>\n    <div class=\"designer-footer-list\">\n      @for (item of droppedDashboardItems; track item.uniqueName) {\n      <button type=\"button\" class=\"designer-footer-item\" [class.active]=\"tool?.uniqueName === item?.uniqueName\"\n        [attr.data-designer-unique-name]=\"item?.uniqueName\" (mouseenter)=\"setFooterHoverHighlight(item)\"\n        (mouseleave)=\"clearFooterHoverHighlight()\" (click)=\"selectDashboardItem(item)\"\n        (contextmenu)=\"showFooterContextMenu($event, item, footerCtxMenu)\">\n        {{ getDroppedDashboardItemLabel(item) }}\n      </button>\n      }\n    </div>\n    <p-contextMenu #footerCtxMenu [model]=\"footerCtxItems\" appendTo=\"body\" />\n  </div>\n</div>\n}\n\n@if (noEdit) {\n<wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n}\n\n<wuic-archetype-configurator [visible]=\"showArchetypeConfigurator\"\n  (visibleChange)=\"onArchetypeConfigVisibleChange($event)\" [archetype]=\"getActiveArchetypeConfig()\"\n  [metaInfo]=\"getArchetypeConfigMetaInfoForTool(archetypeConfigTool)\"\n  [value]=\"getArchetypeConfigValueForTool(archetypeConfigTool)\" (applyConfig)=\"onArchetypeConfigApply($event)\">\n</wuic-archetype-configurator>\n\n<wuic-css-sheet-editor [visible]=\"showCssSheetEditor\" (visibleChange)=\"onCssSheetEditorVisibleChange($event)\"\n  [sheets]=\"dashboardCssSheets\" [selectedSheetPath]=\"selectedCssEditorSheetPath\" [assetsFolder]=\"currentDashboardRoute\"\n  [styleProps]=\"getCssEditorStyleProps()\" (applyEditor)=\"onCssSheetEditorApply($event)\">\n</wuic-css-sheet-editor>\n\n<p-dialog [header]=\"'designer.reopen_dashboard' | translate\" [(visible)]=\"reopenDashboardDialogVisible\" [modal]=\"true\"\n  [closable]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [appendTo]=\"'body'\" [style]=\"{ width: '34rem' }\"\n  (onHide)=\"cancelReopenDashboardDialog()\">\n  <div class=\"route-popup-form\">\n    <label for=\"designer-reopen-select\">{{ 'designer.existing_dashboards' | translate }}</label>\n    <p-select inputId=\"designer-reopen-select\" [options]=\"savedDashboardOptions\" optionLabel=\"label\" optionValue=\"value\"\n      [(ngModel)]=\"reopenDialogSelectedDashboardRoute\" [filter]=\"true\" [showClear]=\"true\" [style]=\"{ width: '100%' }\"\n      appendTo=\"body\" />\n\n    <div class=\"route-popup-actions\">\n      <button type=\"button\" class=\"route-popup-btn\" (click)=\"cancelReopenDashboardDialog()\">{{ 'cancel' | translate\n        }}</button>\n      <button type=\"button\" class=\"route-popup-btn route-popup-btn-primary\" (click)=\"confirmReopenDashboardDialog()\"\n        [disabled]=\"!reopenDialogSelectedDashboardRoute\">{{ 'designer.reopen' | translate }}</button>\n    </div>\n  </div>\n</p-dialog>", styles: [":host{display:block;width:100%;height:100%;min-width:0}.designer-layout{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;width:100%;min-width:0}.designer-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px solid inherit;border-radius:10px;background:transparent;padding:10px 12px;margin-bottom:8px}.designer-current-dashboard{min-width:220px;font-size:.86rem;font-weight:700;color:inherit}.designer-toolbar-spacer{flex:1 1 auto;min-width:16px}.designer-toolbar-menu-group{display:inline-flex}.designer-toolbar-menu-group button{height:32px;border:1px solid #2f67d8;border-radius:6px;background:#2f67d8;color:#fff;padding:0 10px;font-size:.82rem;cursor:pointer}.designer-toolbar-menu-group button[disabled]{opacity:.6;cursor:not-allowed}.designer-main{min-height:0;min-width:0;width:100%;overflow:hidden;direction:ltr}.designer-main-splitter{height:100%;width:100%;min-width:0;direction:ltr}.designer-toolbox{font-size:3rem}.designer-toolbox ul{list-style-type:none;padding:0;margin:0;width:100%}.designer-toolbox li{float:left;margin-left:5px;margin-top:5px}.designer-toolbox .tool-groups{display:block}.designer-toolbox .tool-group-item{float:none;margin-left:0;margin-top:10px;clear:both}.designer-toolbox .tool-group-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin:0 0 4px 6px}.designer-toolbox .tool-group-list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px}.designer-toolbox .tool-group-list li{float:none;margin-left:0;margin-top:0}.designer-toolbox .props{font-size:1rem}.designer-toolbox .props li{float:none;padding-bottom:15px}.designer-toolbox .prop-section{width:100%;border:1px solid inherit;border-radius:6px;margin-top:8px;background:transparent;padding:6px 8px 2px}.designer-toolbox .prop-section-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;color:inherit;margin-bottom:6px}.palette-panel{height:100%;overflow:auto;width:100%}.designer-color-alpha-row{display:flex;align-items:center;gap:8px;margin-top:6px;margin-bottom:6px}.designer-color-alpha-label{font-size:.8rem;min-width:40px}.designer-color-alpha-row input[type=range]{flex:1 1 auto;min-width:90px}.designer-color-alpha-row input[type=number]{width:72px}.properties-panel{height:100%;overflow:hidden;width:100%;display:flex;flex-direction:column;min-height:0;padding-right:10px;padding-left:10px;padding-top:10px}.properties-panel>.designer-toolbox{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}:host ::ng-deep .designer-left-bottom-splitter .p-splitterpanel{min-height:0!important;overflow:hidden!important}.hierarchy-panel{height:100%;width:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:6px}.hierarchy-panel-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#4b5563;margin:0 0 6px}.hierarchy-tree-wrap{flex:1 1 auto;min-height:0;border:1px solid inherit;border-radius:6px;background:transparent;overflow:auto;padding:4px}:host ::ng-deep .hierarchy-tree-wrap .p-tree{border:none;padding:0;height:100%;background:transparent}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content{border:1px solid transparent;border-radius:4px;background:transparent!important;color:inherit!important;padding:0!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight{border-color:transparent!important;background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content:hover{background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label{display:inline-block;border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label:hover{border-color:#94a3b8}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label.active{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight .hierarchy-node-label{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}.designer-hierarchy-node{cursor:pointer;border:1px solid transparent;border-radius:4px;padding:2px 6px;font-size:.82rem;line-height:1.25rem}.designer-hierarchy-node-label{cursor:pointer;display:inline-block;width:100%}.designer-hierarchy-node.active{border-color:#3b82f6;background:#eff6ff;color:#1d4ed8}.designer-footer-item.designer-tree-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px}.dashboard-design{height:100%;min-height:0;min-width:0;width:100%;overflow:auto;direction:ltr}:host ::ng-deep .dashboard-design.designer-hide-datasources .datasource-descriptor{display:none!important}.current-dashboard-title{font-weight:600;margin-right:12px}.designer-footer{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid inherit;background:transparent;min-height:36px;flex:0 0 auto;width:100%;overflow:auto}.designer-footer-label{font-size:.85rem;font-weight:600;color:inherit;white-space:nowrap}.designer-footer-list{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%}.designer-footer-item{border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer;white-space:nowrap}.designer-footer-item.active{border-color:#3b82f6;background:transparent;color:#1d4ed8}:host ::ng-deep .designer-footer-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px;box-shadow:inset 0 0 0 1px #3b82f6!important}.route-popup-form{display:flex;flex-direction:column;gap:8px}.route-popup-form label{font-size:.85rem;font-weight:600;color:#2f3f58}.route-popup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.route-popup-btn{border:1px solid inherit;background:transparent;color:inherit;border-radius:6px;padding:7px 12px;font-size:.85rem;cursor:pointer}.route-popup-btn-primary{border-color:#2f67d8;background:#2f67d8;color:#fff}.p-colorpicker{border:1px solid black;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i10.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i12.Draggable, selector: "[pDraggable]", inputs: ["pDraggable", "dragEffect", "dragHandle", "pDraggableDisabled"], outputs: ["onDragStart", "onDragEnd", "onDrag"] }, { kind: "directive", type: i12.Droppable, selector: "[pDroppable]", inputs: ["pDroppable", "pDroppableDisabled", "dropEffect"], outputs: ["onDragEnter", "onDragLeave", "onDrop"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i2$1.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "showTransitionOptions", "hideTransitionOptions", "inline", "format", "tabindex", "inputId", "autoZIndex", "autofocus", "defaultColor", "appendTo", "overlayOptions", "motionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i2$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: DashboardComponent, selector: "wuic-dashboard", inputs: ["dashboardElements"] }, { kind: "component", type: FieldEditorComponent, selector: "wuic-field-editor", inputs: ["datasource", "record", "field", "metaInfo", "readOnly", "isFilter", "hideLabel", "forceShowLabel", "operator", "nestedIndex", "triggerProp", "tabIndex", "onInlineCellValueChange"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i14.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: MetadataEditorComponent, selector: "wuic-metadata-editor", inputs: ["datasource", "hardcodedDatasource", "saveCallback", "hideReports", "hideRelatedTableActions", "hideRelatedColumnActions"] }, { kind: "ngmodule", type: MenubarModule }, { kind: "component", type: ArchetypeConfiguratorComponent, selector: "wuic-archetype-configurator", inputs: ["visible", "archetype", "metaInfo", "value"], outputs: ["visibleChange", "applyConfig"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i18.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: CssSheetEditorComponent, selector: "wuic-css-sheet-editor", inputs: ["visible", "sheets", "selectedSheetPath", "styleProps", "assetsFolder"], outputs: ["visibleChange", "applyEditor"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i9.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i4$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DesignerComponent, isStandalone: true, selector: "wuic-designer", host: { listeners: { "window:hashchange": "onWindowHashChange()", "window:beforeunload": "onWindowBeforeUnload($event)", "window:keydown": "onWindowKeydown($event)", "window:mouseup": "onWindowMouseup()", "window:touchend": "onWindowTouchend()", "window:keyup": "onWindowKeyup()", "window:change": "onWindowChange()" } }, providers: [TreeDragDropService], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<!-- <button pButton type=\"button\" (click)=\"loadDashboard()\" class=\"mr-2\">{{'load' | translate}}</button> -->\n@if (!noEdit) {\n<div class=\"designer-layout\">\n  <div class=\"designer-toolbar\">\n    <div class=\"designer-current-dashboard\">{{ currentDashboardTitle }}</div>\n\n    <div class=\"designer-toolbar-spacer\"></div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"undo()\" [disabled]=\"!canUndo\">{{ 'designer.undo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"redo()\" [disabled]=\"!canRedo\">{{ 'designer.redo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" data-testid=\"designer-actions-menu-btn\" (click)=\"refreshGraphActionsMenuItems(); graphActionsMenu.toggle($event)\">{{ 'designer.actions_menu' | translate }}</button>\n      <p-menu #graphActionsMenu [popup]=\"true\" [model]=\"graphActionsMenuItems\" appendTo=\"body\"></p-menu>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"openCurrentDashboardInNewTab()\" [disabled]=\"!currentDashboardRoute\">{{\n        'designer.open_current_dashboard' | translate }}</button>\n    </div>\n  </div>\n  <div class=\"designer-main\">\n    <p-splitter [style]=\"{ height: '100%' }\" [panelSizes]=\"[15, 85]\" styleClass=\"designer-main-splitter\">\n      <ng-template pTemplate>\n        <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[35, 65]\"\n          [minSizes]=\"[20, 30]\" styleClass=\"designer-left-splitter\">\n          <ng-template pTemplate>\n            <div class=\"col flex designer-toolbox palette-panel\">\n              <ul class=\"tool-groups\">\n                @for (toolGroup of availableToolGroups; track toolGroup.group) {\n                <li class=\"tool-group-item\">\n                  <div class=\"tool-group-title\">{{ toolGroup.group }}</div>\n                  <ul class=\"tool-group-list\">\n                    @for (tool of toolGroup.tools; track tool) {\n                    <li pDraggable (onDragStart)=\"dragStart(tool)\" (onDragEnd)=\"dragEnd()\" (onDrag)=\"onDrag($event)\"\n                      (dblclick)=\"dropToolAtRoot(tool)\">\n                      <i [ngClass]=\"tool.icon\" [title]=\"tool.name\"></i>\n                    </li>\n                    }\n                  </ul>\n                </li>\n                }\n              </ul>\n            </div>\n          </ng-template>\n          <ng-template pTemplate>\n            <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[68, 32]\"\n              [minSizes]=\"[35, 20]\" styleClass=\"designer-left-bottom-splitter\">\n              <ng-template pTemplate>\n                <div class=\"properties-panel\">\n                  <p-select [style]=\"{width: '100%'}\" [options]=\"flattenedDashboardElements\" [(ngModel)]=\"tool\"\n                    optionLabel=\"uniqueName\" dataKey=\"componentId\" appendTo=\"body\" />\n                  <div class=\"designer-toolbox\">\n\n                    <span style=\"width: 100%;\">\n                      <input type=\"text\" style=\"width: calc(100% - 30px);\" [(ngModel)]=\"propFilter\"\n                        [placeholder]=\"'prop.filter' | translate\" />\n                      <button style=\"width: 25px\" (click)=\"clearPropFilter()\">X</button>\n                    </span>\n\n                    @for (section of getToolPropertySections(tool, propFilter); track section.key) {\n                    <details class=\"prop-section\" [open]=\"section.open\"\n                      (toggle)=\"onPropertySectionToggle(tool, section.key, $event)\">\n                      <summary class=\"prop-section-title\">{{ section.label }}</summary>\n                      <ul class=\"props\">\n                        @for (toolProp of section.props; track toolProp.key) {\n                        <li>\n                          @if (!toolProp.value.hideCaption) {\n                          <span>{{ toolProp.value?.propertyCaption ||\n                            toolProp.key[0].toUpperCase() + toolProp.key.slice(1)\n                            }}</span>\n                          }\n                          <br />\n                          @if (toolProp.value.type == 'button') {\n                          <p-button (click)=\"toolProp.value.callback(tool.inputs, toolProp.key, null, tool)\"\n                            class=\"k-button\" [style]=\"{width: '100%'}\">\n                            {{toolProp.value.propertyCaption}}\n                          </p-button>\n                          }\n                          @if (toolProp.value.type == 'metaEditor' &&\n                          tool.inputs['componentRef']?.value?.component) {\n                          <wuic-metadata-editor [hardcodedDatasource]=\"tool.inputs['componentRef']?.value?.component\"\n                            [saveCallback]=\"metaEditorSave\"></wuic-metadata-editor>\n                          }\n                          @if (toolProp.value.type == 'boolean') {\n                          <input type=\"checkbox\" [(ngModel)]=\"tool.inputs[toolProp.key]\" />\n                          }\n                          @if (toolProp.value.type == 'numberToArray') {\n                          <input style=\"width: 100%;\" type=\"number\" pInputText [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'txt_area') {\n                          <textarea style=\"width: 100%;\" [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\"></textarea>\n                          }\n                          @if (toolProp.value.type == 'string') {\n                          <input style=\"width: 100%;\" type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'color') {\n                          <p-colorPicker [ngModel]=\"getDesignerColorPickerHex(tool, toolProp)\"\n                            (ngModelChange)=\"onDesignerColorPickerHexChange($event, tool, toolProp)\" appendTo=\"body\" />\n                          <div class=\"designer-color-alpha-row\">\n                            <span class=\"designer-color-alpha-label\">{{ 'designer.alpha' | translate }}</span>\n                            <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                            <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                          </div>\n                          <input type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'dictionary' && !toolProp.value.async) {\n                          @if (toolProp.key == 'cssFile') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"availableProjectCssFiles\"\n                            [ngModel]=\"tool.inputs[toolProp.key]\" (ngModelChange)=\"onCssFileChanged($event, tool)\" />\n                          } @else if (toolProp.key == 'cssClass') {\n                          <p-multiSelect [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getCssClassOptionsForTool(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"onCssClassChanged($event, tool)\" [filter]=\"true\" [virtualScroll]=\"true\"\n                            [virtualScrollItemSize]=\"38\" scrollHeight=\"260px\" [showToggleAll]=\"false\" display=\"chip\"\n                            [maxSelectedLabels]=\"3\" [selectedItemsLabel]=\"'{0} selected'\">\n                          </p-multiSelect>\n                          } @else if ((tool.name == 'SELECT' || tool.name == 'MULTISELECT' || tool.name == 'UL') &&\n                          (toolProp.key == 'valueField' || toolProp.key == 'textField')) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else if (tool.name == 'LABEL' && toolProp.key == 'displayField') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          }\n                          @if (toolProp.value.type == 'dictionary' && toolProp.value.async) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (tool.name == 'DATAREPEATER' && toolProp.key == 'action' &&\n                          canOpenArchetypeConfigurator(tool)) {\n                          <button style=\"margin-top: 8px;\" (click)=\"openArchetypeConfigurator(tool)\">\n                            {{ 'designer.configure' | translate }} {{ (tool.inputs['action'] | async) || '' }}\n                          </button>\n                          }\n                          @if (toolProp.value.type == 'dropped-component-list') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [placeholder]=\"'select.component' | translate\" [options]=\"elementFilter(toolProp)\"\n                            [ngModel]=\"getDroppedComponentListModel(tool, toolProp)\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" optionLabel=\"uniqueName\"\n                            dataKey=\"uniqueName\" />\n                          }\n                          @if (toolProp.value.type == 'autocomplete') {\n                          <p-autoComplete [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\" [forceSelection]=\"true\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" [suggestions]=\"tool.suggestions\"\n                            [optionLabel]=\"toolProp.value.displayField\" [optionValue]=\"toolProp.value.valueField\"\n                            (completeMethod)=\"search($event, tool, toolProp)\" [dropdown]=\"true\" dropdownMode=\"current\"\n                            [multiple]=\"toolProp.value.multiple\" />\n                          }\n                          @if (toolProp.value.type == 'propertyTree' && shouldShowPropertyTree(tool)) {\n                          <ul>\n                            @for (item of $any(tool.inputs[toolProp.key] | async); track item) {\n                            <li style=\"padding: 0; margin: 0;\">\n                              @if (item.col && tool.inputs['customProps_' + (tool.inputs['action'] | async)])\n                              {\n                              <wuic-field-editor [field]=\"item.col\"\n                                [record]=\"tool.inputs['customProps_' + (tool.inputs['action'] | async)]\"\n                                [metaInfo]=\"tool.inputs['datasource']?.component?.value?.metaInfo\"\n                                [triggerProp]=\"tool.inputs['action']\"></wuic-field-editor>\n                              }\n                            </li>\n                            }\n                          </ul>\n                          }\n                        </li>\n                        }\n                      </ul>\n                    </details>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n              <ng-template pTemplate>\n                <div class=\"hierarchy-panel\">\n                  <div class=\"hierarchy-panel-title\">{{ 'designer.canvas_hierarchy' | translate }}</div>\n                  <div class=\"hierarchy-tree-wrap\">\n                    <p-tree [value]=\"hierarchyTreeNodes\" [draggableNodes]=\"true\" [droppableNodes]=\"true\"\n                      selectionMode=\"single\" [(selection)]=\"hierarchySelection\"\n                      (onNodeSelect)=\"onHierarchyNodeSelect($event)\" draggableScope=\"designer-hierarchy\"\n                      droppableScope=\"designer-hierarchy\" (onNodeDrop)=\"onHierarchyNodeDrop($event)\">\n                      <ng-template let-node pTemplate=\"default\">\n                        <span class=\"hierarchy-node-label\" [class.active]=\"isHierarchyNodeSelected(node)\"\n                          (mouseenter)=\"onHierarchyNodeMouseEnter(node)\" (mouseleave)=\"onHierarchyNodeMouseLeave()\"\n                          (contextmenu)=\"showHierarchyNodeContextMenu($event, node, hierarchyCtxMenu)\">\n                          {{ node.label }}\n                        </span>\n                      </ng-template>\n                    </p-tree>\n                  </div>\n                  <p-contextMenu #hierarchyCtxMenu [model]=\"hierarchyCtxItems\" appendTo=\"body\" />\n                </div>\n              </ng-template>\n            </p-splitter>\n          </ng-template>\n        </p-splitter>\n      </ng-template>\n      <ng-template pTemplate>\n        <div class=\"col dashboard-design\" [class.designer-hide-datasources]=\"hideDatasourcesInCanvas\"\n          [class.designer-snap-grid]=\"snapToGridEnabled\" [style.--wuic-grid-size.px]=\"gridSize\" pDroppable\n          (onDrop)=\"drop($event)\" #canvas (mousedown)=\"onCanvasMouseDown($event)\"\n          (contextmenu)=\"showCtx($event, this)\">\n          <wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n          @if (rubberBandVisible) {\n          <div class=\"designer-selection-rect\" [style.left]=\"rubberBandStyle.left\" [style.top]=\"rubberBandStyle.top\"\n            [style.width]=\"rubberBandStyle.width\" [style.height]=\"rubberBandStyle.height\"></div>\n          }\n          <p-contextMenu [target]=\"canvas\" [model]=\"ctxItems | async\" appendTo=\"body\" />\n        </div>\n      </ng-template>\n    </p-splitter>\n  </div>\n  <div class=\"designer-footer\">\n    <div class=\"designer-footer-label\">{{ 'designer.items' | translate }}:</div>\n    <div class=\"designer-footer-list\">\n      @for (item of droppedDashboardItems; track item.uniqueName) {\n      <button type=\"button\" class=\"designer-footer-item\" [class.active]=\"tool?.uniqueName === item?.uniqueName\"\n        [attr.data-designer-unique-name]=\"item?.uniqueName\" (mouseenter)=\"setFooterHoverHighlight(item)\"\n        (mouseleave)=\"clearFooterHoverHighlight()\" (click)=\"selectDashboardItem(item)\"\n        (contextmenu)=\"showFooterContextMenu($event, item, footerCtxMenu)\">\n        {{ getDroppedDashboardItemLabel(item) }}\n      </button>\n      }\n    </div>\n    <p-contextMenu #footerCtxMenu [model]=\"footerCtxItems\" appendTo=\"body\" />\n  </div>\n</div>\n}\n\n@if (noEdit) {\n<wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n}\n\n<wuic-archetype-configurator [visible]=\"showArchetypeConfigurator\"\n  (visibleChange)=\"onArchetypeConfigVisibleChange($event)\" [archetype]=\"getActiveArchetypeConfig()\"\n  [metaInfo]=\"getArchetypeConfigMetaInfoForTool(archetypeConfigTool)\"\n  [value]=\"getArchetypeConfigValueForTool(archetypeConfigTool)\" (applyConfig)=\"onArchetypeConfigApply($event)\">\n</wuic-archetype-configurator>\n\n<wuic-css-sheet-editor [visible]=\"showCssSheetEditor\" (visibleChange)=\"onCssSheetEditorVisibleChange($event)\"\n  [sheets]=\"dashboardCssSheets\" [selectedSheetPath]=\"selectedCssEditorSheetPath\" [assetsFolder]=\"currentDashboardRoute\"\n  [styleProps]=\"getCssEditorStyleProps()\" (applyEditor)=\"onCssSheetEditorApply($event)\">\n</wuic-css-sheet-editor>\n\n<p-dialog [header]=\"'designer.reopen_dashboard' | translate\" [(visible)]=\"reopenDashboardDialogVisible\" [modal]=\"true\"\n  [closable]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [appendTo]=\"'body'\" [style]=\"{ width: '34rem' }\"\n  (onHide)=\"cancelReopenDashboardDialog()\">\n  <div class=\"route-popup-form\">\n    <label for=\"designer-reopen-select\">{{ 'designer.existing_dashboards' | translate }}</label>\n    <p-select inputId=\"designer-reopen-select\" [options]=\"savedDashboardOptions\" optionLabel=\"label\" optionValue=\"value\"\n      [(ngModel)]=\"reopenDialogSelectedDashboardRoute\" [filter]=\"true\" [showClear]=\"true\" [style]=\"{ width: '100%' }\"\n      appendTo=\"body\" />\n\n    <div class=\"route-popup-actions\">\n      <button type=\"button\" class=\"route-popup-btn\" (click)=\"cancelReopenDashboardDialog()\">{{ 'cancel' | translate\n        }}</button>\n      <button type=\"button\" class=\"route-popup-btn route-popup-btn-primary\" (click)=\"confirmReopenDashboardDialog()\"\n        [disabled]=\"!reopenDialogSelectedDashboardRoute\">{{ 'designer.reopen' | translate }}</button>\n    </div>\n  </div>\n</p-dialog>", styles: [":host{display:block;width:100%;height:100%;min-width:0}.designer-layout{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;width:100%;min-width:0}.designer-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px solid inherit;border-radius:10px;background:transparent;padding:10px 12px;margin-bottom:8px}.designer-current-dashboard{min-width:220px;font-size:.86rem;font-weight:700;color:inherit}.designer-toolbar-spacer{flex:1 1 auto;min-width:16px}.designer-toolbar-menu-group{display:inline-flex}.designer-toolbar-menu-group button{height:32px;border:1px solid #2f67d8;border-radius:6px;background:#2f67d8;color:#fff;padding:0 10px;font-size:.82rem;cursor:pointer}.designer-toolbar-menu-group button[disabled]{opacity:.6;cursor:not-allowed}.designer-main{min-height:0;min-width:0;width:100%;overflow:hidden;direction:ltr}.designer-main-splitter{height:100%;width:100%;min-width:0;direction:ltr}.designer-toolbox{font-size:3rem}.designer-toolbox ul{list-style-type:none;padding:0;margin:0;width:100%}.designer-toolbox li{float:left;margin-left:5px;margin-top:5px}.designer-toolbox .tool-groups{display:block}.designer-toolbox .tool-group-item{float:none;margin-left:0;margin-top:10px;clear:both}.designer-toolbox .tool-group-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin:0 0 4px 6px}.designer-toolbox .tool-group-list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px}.designer-toolbox .tool-group-list li{float:none;margin-left:0;margin-top:0}.designer-toolbox .props{font-size:1rem}.designer-toolbox .props li{float:none;padding-bottom:15px}.designer-toolbox .prop-section{width:100%;border:1px solid inherit;border-radius:6px;margin-top:8px;background:transparent;padding:6px 8px 2px}.designer-toolbox .prop-section-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;color:inherit;margin-bottom:6px}.palette-panel{height:100%;overflow:auto;width:100%}.designer-color-alpha-row{display:flex;align-items:center;gap:8px;margin-top:6px;margin-bottom:6px}.designer-color-alpha-label{font-size:.8rem;min-width:40px}.designer-color-alpha-row input[type=range]{flex:1 1 auto;min-width:90px}.designer-color-alpha-row input[type=number]{width:72px}.properties-panel{height:100%;overflow:hidden;width:100%;display:flex;flex-direction:column;min-height:0;padding-right:10px;padding-left:10px;padding-top:10px}.properties-panel>.designer-toolbox{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}:host ::ng-deep .designer-left-bottom-splitter .p-splitterpanel{min-height:0!important;overflow:hidden!important}.hierarchy-panel{height:100%;width:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:6px}.hierarchy-panel-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#4b5563;margin:0 0 6px}.hierarchy-tree-wrap{flex:1 1 auto;min-height:0;border:1px solid inherit;border-radius:6px;background:transparent;overflow:auto;padding:4px}:host ::ng-deep .hierarchy-tree-wrap .p-tree{border:none;padding:0;height:100%;background:transparent}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content{border:1px solid transparent;border-radius:4px;background:transparent!important;color:inherit!important;padding:0!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight{border-color:transparent!important;background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content:hover{background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label{display:inline-block;border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label:hover{border-color:#94a3b8}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label.active{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight .hierarchy-node-label{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}.designer-hierarchy-node{cursor:pointer;border:1px solid transparent;border-radius:4px;padding:2px 6px;font-size:.82rem;line-height:1.25rem}.designer-hierarchy-node-label{cursor:pointer;display:inline-block;width:100%}.designer-hierarchy-node.active{border-color:#3b82f6;background:#eff6ff;color:#1d4ed8}.designer-footer-item.designer-tree-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px}.dashboard-design{height:100%;min-height:0;min-width:0;width:100%;overflow:auto;direction:ltr;position:relative}.designer-selection-rect{position:absolute;border:1px dashed #3b82f6;background:#3b82f61f;pointer-events:none;z-index:10000}:host ::ng-deep .designer-multi-selected{outline:2px solid #3b82f6!important;outline-offset:1px}:host ::ng-deep .dashboard-design.designer-hide-datasources .datasource-descriptor{display:none!important}.current-dashboard-title{font-weight:600;margin-right:12px}.designer-footer{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid inherit;background:transparent;min-height:36px;flex:0 0 auto;width:100%;overflow:auto}.designer-footer-label{font-size:.85rem;font-weight:600;color:inherit;white-space:nowrap}.designer-footer-list{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%}.designer-footer-item{border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer;white-space:nowrap}.designer-footer-item.active{border-color:#3b82f6;background:transparent;color:#1d4ed8}:host ::ng-deep .designer-footer-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px;box-shadow:inset 0 0 0 1px #3b82f6!important}.route-popup-form{display:flex;flex-direction:column;gap:8px}.route-popup-form label{font-size:.85rem;font-weight:600;color:#2f3f58}.route-popup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.route-popup-btn{border:1px solid inherit;background:transparent;color:inherit;border-radius:6px;padding:7px 12px;font-size:.85rem;cursor:pointer}.route-popup-btn-primary{border-color:#2f67d8;background:#2f67d8;color:#fff}.p-colorpicker{border:1px solid black;border-radius:4px}.dashboard-design.designer-snap-grid{background-image:linear-gradient(to right,rgba(128,128,128,.16) 1px,transparent 1px),linear-gradient(to bottom,rgba(128,128,128,.16) 1px,transparent 1px);background-size:var(--wuic-grid-size, 10px) var(--wuic-grid-size, 10px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i10.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i12.Draggable, selector: "[pDraggable]", inputs: ["pDraggable", "dragEffect", "dragHandle", "pDraggableDisabled"], outputs: ["onDragStart", "onDragEnd", "onDrag"] }, { kind: "directive", type: i12.Droppable, selector: "[pDroppable]", inputs: ["pDroppable", "pDroppableDisabled", "dropEffect"], outputs: ["onDragEnter", "onDragLeave", "onDrop"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i2$1.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "showTransitionOptions", "hideTransitionOptions", "inline", "format", "tabindex", "inputId", "autoZIndex", "autofocus", "defaultColor", "appendTo", "overlayOptions", "motionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i2$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: DashboardComponent, selector: "wuic-dashboard", inputs: ["dashboardElements"] }, { kind: "component", type: FieldEditorComponent, selector: "wuic-field-editor", inputs: ["datasource", "record", "field", "metaInfo", "readOnly", "isFilter", "hideLabel", "forceShowLabel", "operator", "nestedIndex", "triggerProp", "tabIndex", "onInlineCellValueChange"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i10$1.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: MetadataEditorComponent, selector: "wuic-metadata-editor", inputs: ["datasource", "hardcodedDatasource", "saveCallback", "hideReports", "hideRelatedTableActions", "hideRelatedColumnActions"] }, { kind: "ngmodule", type: MenubarModule }, { kind: "component", type: ArchetypeConfiguratorComponent, selector: "wuic-archetype-configurator", inputs: ["visible", "archetype", "metaInfo", "value"], outputs: ["visibleChange", "applyConfig"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i18.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: CssSheetEditorComponent, selector: "wuic-css-sheet-editor", inputs: ["visible", "sheets", "selectedSheetPath", "styleProps", "assetsFolder"], outputs: ["visibleChange", "applyEditor"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i7.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i4$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "pipe", type: i2$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DesignerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wuic-designer', imports: [NgClass, TranslateModule, AsyncPipe, FormsModule, SplitterModule, DragDropModule, SelectModule, ColorPickerModule, AutoCompleteModule, DashboardComponent, FieldEditorComponent, ContextMenuModule, MetadataEditorComponent, MenubarModule, ArchetypeConfiguratorComponent, ButtonModule, MultiSelectModule, CssSheetEditorComponent, MenuModule, DialogModule, TreeModule], providers: [TreeDragDropService], template: "<!-- <button pButton type=\"button\" (click)=\"loadDashboard()\" class=\"mr-2\">{{'load' | translate}}</button> -->\n@if (!noEdit) {\n<div class=\"designer-layout\">\n  <div class=\"designer-toolbar\">\n    <div class=\"designer-current-dashboard\">{{ currentDashboardTitle }}</div>\n\n    <div class=\"designer-toolbar-spacer\"></div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"undo()\" [disabled]=\"!canUndo\">{{ 'designer.undo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"redo()\" [disabled]=\"!canRedo\">{{ 'designer.redo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"refreshGraphActionsMenuItems(); graphActionsMenu.toggle($event)\">{{ 'designer.actions_menu' | translate }}</button>\n      <p-menu #graphActionsMenu [popup]=\"true\" [model]=\"graphActionsMenuItems\" appendTo=\"body\"></p-menu>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"openCurrentDashboardInNewTab()\" [disabled]=\"!currentDashboardRoute\">{{\n        'designer.open_current_dashboard' | translate }}</button>\n    </div>\n  </div>\n  <div class=\"designer-main\">\n    <p-splitter [style]=\"{ height: '100%' }\" [panelSizes]=\"[15, 85]\" styleClass=\"designer-main-splitter\">\n      <ng-template pTemplate>\n        <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[35, 65]\"\n          [minSizes]=\"[20, 30]\" styleClass=\"designer-left-splitter\">\n          <ng-template pTemplate>\n            <div class=\"col flex designer-toolbox palette-panel\">\n              <ul class=\"tool-groups\">\n                @for (toolGroup of availableToolGroups; track toolGroup.group) {\n                <li class=\"tool-group-item\">\n                  <div class=\"tool-group-title\">{{ toolGroup.group }}</div>\n                  <ul class=\"tool-group-list\">\n                    @for (tool of toolGroup.tools; track tool) {\n                    <li pDraggable (onDragStart)=\"dragStart(tool)\" (onDragEnd)=\"dragEnd()\" (onDrag)=\"onDrag($event)\"\n                      (dblclick)=\"dropToolAtRoot(tool)\">\n                      <i [ngClass]=\"tool.icon\" [title]=\"tool.name\"></i>\n                    </li>\n                    }\n                  </ul>\n                </li>\n                }\n              </ul>\n            </div>\n          </ng-template>\n          <ng-template pTemplate>\n            <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[68, 32]\"\n              [minSizes]=\"[35, 20]\" styleClass=\"designer-left-bottom-splitter\">\n              <ng-template pTemplate>\n                <div class=\"properties-panel\">\n                  <p-select [style]=\"{width: '100%'}\" [options]=\"flattenedDashboardElements\" [(ngModel)]=\"tool\"\n                    optionLabel=\"uniqueName\" dataKey=\"componentId\" appendTo=\"body\" />\n                  <div class=\"designer-toolbox\">\n\n                    <span style=\"width: 100%;\">\n                      <input type=\"text\" style=\"width: calc(100% - 30px);\" [(ngModel)]=\"propFilter\"\n                        [placeholder]=\"'prop.filter' | translate\" />\n                      <button style=\"width: 25px\" (click)=\"clearPropFilter()\">X</button>\n                    </span>\n\n                    @for (section of getToolPropertySections(tool, propFilter); track section.key) {\n                    <details class=\"prop-section\" [open]=\"section.open\"\n                      (toggle)=\"onPropertySectionToggle(tool, section.key, $event)\">\n                      <summary class=\"prop-section-title\">{{ section.label }}</summary>\n                      <ul class=\"props\">\n                        @for (toolProp of section.props; track toolProp.key) {\n                        <li>\n                          @if (!toolProp.value.hideCaption) {\n                          <span>{{ toolProp.value?.propertyCaption ||\n                            toolProp.key[0].toUpperCase() + toolProp.key.slice(1)\n                            }}</span>\n                          }\n                          <br />\n                          @if (toolProp.value.type == 'button') {\n                          <p-button (click)=\"toolProp.value.callback(tool.inputs, toolProp.key, null, tool)\"\n                            class=\"k-button\" [style]=\"{width: '100%'}\">\n                            {{toolProp.value.propertyCaption}}\n                          </p-button>\n                          }\n                          @if (toolProp.value.type == 'metaEditor' &&\n                          tool.inputs['componentRef']?.value?.component) {\n                          <wuic-metadata-editor [hardcodedDatasource]=\"tool.inputs['componentRef']?.value?.component\"\n                            [saveCallback]=\"metaEditorSave\"></wuic-metadata-editor>\n                          }\n                          @if (toolProp.value.type == 'boolean') {\n                          <input type=\"checkbox\" [(ngModel)]=\"tool.inputs[toolProp.key]\" />\n                          }\n                          @if (toolProp.value.type == 'numberToArray') {\n                          <input style=\"width: 100%;\" type=\"number\" pInputText [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'txt_area') {\n                          <textarea style=\"width: 100%;\" [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\"></textarea>\n                          }\n                          @if (toolProp.value.type == 'string') {\n                          <input style=\"width: 100%;\" type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'color') {\n                          <p-colorPicker [ngModel]=\"getDesignerColorPickerHex(tool, toolProp)\"\n                            (ngModelChange)=\"onDesignerColorPickerHexChange($event, tool, toolProp)\" appendTo=\"body\" />\n                          <div class=\"designer-color-alpha-row\">\n                            <span class=\"designer-color-alpha-label\">{{ 'designer.alpha' | translate }}</span>\n                            <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                            <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                          </div>\n                          <input type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'dictionary' && !toolProp.value.async) {\n                          @if (toolProp.key == 'cssFile') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"availableProjectCssFiles\"\n                            [ngModel]=\"tool.inputs[toolProp.key]\" (ngModelChange)=\"onCssFileChanged($event, tool)\" />\n                          } @else if (toolProp.key == 'cssClass') {\n                          <p-multiSelect [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getCssClassOptionsForTool(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"onCssClassChanged($event, tool)\" [filter]=\"true\" [virtualScroll]=\"true\"\n                            [virtualScrollItemSize]=\"38\" scrollHeight=\"260px\" [showToggleAll]=\"false\" display=\"chip\"\n                            [maxSelectedLabels]=\"3\" [selectedItemsLabel]=\"'{0} selected'\">\n                          </p-multiSelect>\n                          } @else if ((tool.name == 'SELECT' || tool.name == 'MULTISELECT' || tool.name == 'UL') &&\n                          (toolProp.key == 'valueField' || toolProp.key == 'textField')) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else if (tool.name == 'LABEL' && toolProp.key == 'displayField') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          }\n                          @if (toolProp.value.type == 'dictionary' && toolProp.value.async) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (tool.name == 'DATAREPEATER' && toolProp.key == 'action' &&\n                          canOpenArchetypeConfigurator(tool)) {\n                          <button style=\"margin-top: 8px;\" (click)=\"openArchetypeConfigurator(tool)\">\n                            {{ 'designer.configure' | translate }} {{ (tool.inputs['action'] | async) || '' }}\n                          </button>\n                          }\n                          @if (toolProp.value.type == 'dropped-component-list') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [placeholder]=\"'select.component' | translate\" [options]=\"elementFilter(toolProp)\"\n                            [ngModel]=\"getDroppedComponentListModel(tool, toolProp)\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" optionLabel=\"uniqueName\"\n                            dataKey=\"uniqueName\" />\n                          }\n                          @if (toolProp.value.type == 'autocomplete') {\n                          <p-autoComplete [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\" [forceSelection]=\"true\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" [suggestions]=\"tool.suggestions\"\n                            [optionLabel]=\"toolProp.value.displayField\" [optionValue]=\"toolProp.value.valueField\"\n                            (completeMethod)=\"search($event, tool, toolProp)\" [dropdown]=\"true\" dropdownMode=\"current\"\n                            [multiple]=\"toolProp.value.multiple\" />\n                          }\n                          @if (toolProp.value.type == 'propertyTree' && shouldShowPropertyTree(tool)) {\n                          <ul>\n                            @for (item of $any(tool.inputs[toolProp.key] | async); track item) {\n                            <li style=\"padding: 0; margin: 0;\">\n                              @if (item.col && tool.inputs['customProps_' + (tool.inputs['action'] | async)])\n                              {\n                              <wuic-field-editor [field]=\"item.col\"\n                                [record]=\"tool.inputs['customProps_' + (tool.inputs['action'] | async)]\"\n                                [metaInfo]=\"tool.inputs['datasource']?.component?.value?.metaInfo\"\n                                [triggerProp]=\"tool.inputs['action']\"></wuic-field-editor>\n                              }\n                            </li>\n                            }\n                          </ul>\n                          }\n                        </li>\n                        }\n                      </ul>\n                    </details>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n              <ng-template pTemplate>\n                <div class=\"hierarchy-panel\">\n                  <div class=\"hierarchy-panel-title\">{{ 'designer.canvas_hierarchy' | translate }}</div>\n                  <div class=\"hierarchy-tree-wrap\">\n                    <p-tree [value]=\"hierarchyTreeNodes\" [draggableNodes]=\"true\" [droppableNodes]=\"true\"\n                      selectionMode=\"single\" [(selection)]=\"hierarchySelection\"\n                      (onNodeSelect)=\"onHierarchyNodeSelect($event)\" draggableScope=\"designer-hierarchy\"\n                      droppableScope=\"designer-hierarchy\" (onNodeDrop)=\"onHierarchyNodeDrop($event)\">\n                      <ng-template let-node pTemplate=\"default\">\n                        <span class=\"hierarchy-node-label\" [class.active]=\"isHierarchyNodeSelected(node)\"\n                          (mouseenter)=\"onHierarchyNodeMouseEnter(node)\" (mouseleave)=\"onHierarchyNodeMouseLeave()\"\n                          (contextmenu)=\"showHierarchyNodeContextMenu($event, node, hierarchyCtxMenu)\">\n                          {{ node.label }}\n                        </span>\n                      </ng-template>\n                    </p-tree>\n                  </div>\n                  <p-contextMenu #hierarchyCtxMenu [model]=\"hierarchyCtxItems\" appendTo=\"body\" />\n                </div>\n              </ng-template>\n            </p-splitter>\n          </ng-template>\n        </p-splitter>\n      </ng-template>\n      <ng-template pTemplate>\n        <div class=\"col dashboard-design\" [class.designer-hide-datasources]=\"hideDatasourcesInCanvas\" pDroppable\n          (onDrop)=\"drop($event)\" #canvas (contextmenu)=\"showCtx($event, this)\">\n          <wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n          <p-contextMenu [target]=\"canvas\" [model]=\"ctxItems | async\" appendTo=\"body\" />\n        </div>\n      </ng-template>\n    </p-splitter>\n  </div>\n  <div class=\"designer-footer\">\n    <div class=\"designer-footer-label\">{{ 'designer.items' | translate }}:</div>\n    <div class=\"designer-footer-list\">\n      @for (item of droppedDashboardItems; track item.uniqueName) {\n      <button type=\"button\" class=\"designer-footer-item\" [class.active]=\"tool?.uniqueName === item?.uniqueName\"\n        [attr.data-designer-unique-name]=\"item?.uniqueName\" (mouseenter)=\"setFooterHoverHighlight(item)\"\n        (mouseleave)=\"clearFooterHoverHighlight()\" (click)=\"selectDashboardItem(item)\"\n        (contextmenu)=\"showFooterContextMenu($event, item, footerCtxMenu)\">\n        {{ getDroppedDashboardItemLabel(item) }}\n      </button>\n      }\n    </div>\n    <p-contextMenu #footerCtxMenu [model]=\"footerCtxItems\" appendTo=\"body\" />\n  </div>\n</div>\n}\n\n@if (noEdit) {\n<wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n}\n\n<wuic-archetype-configurator [visible]=\"showArchetypeConfigurator\"\n  (visibleChange)=\"onArchetypeConfigVisibleChange($event)\" [archetype]=\"getActiveArchetypeConfig()\"\n  [metaInfo]=\"getArchetypeConfigMetaInfoForTool(archetypeConfigTool)\"\n  [value]=\"getArchetypeConfigValueForTool(archetypeConfigTool)\" (applyConfig)=\"onArchetypeConfigApply($event)\">\n</wuic-archetype-configurator>\n\n<wuic-css-sheet-editor [visible]=\"showCssSheetEditor\" (visibleChange)=\"onCssSheetEditorVisibleChange($event)\"\n  [sheets]=\"dashboardCssSheets\" [selectedSheetPath]=\"selectedCssEditorSheetPath\" [assetsFolder]=\"currentDashboardRoute\"\n  [styleProps]=\"getCssEditorStyleProps()\" (applyEditor)=\"onCssSheetEditorApply($event)\">\n</wuic-css-sheet-editor>\n\n<p-dialog [header]=\"'designer.reopen_dashboard' | translate\" [(visible)]=\"reopenDashboardDialogVisible\" [modal]=\"true\"\n  [closable]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [appendTo]=\"'body'\" [style]=\"{ width: '34rem' }\"\n  (onHide)=\"cancelReopenDashboardDialog()\">\n  <div class=\"route-popup-form\">\n    <label for=\"designer-reopen-select\">{{ 'designer.existing_dashboards' | translate }}</label>\n    <p-select inputId=\"designer-reopen-select\" [options]=\"savedDashboardOptions\" optionLabel=\"label\" optionValue=\"value\"\n      [(ngModel)]=\"reopenDialogSelectedDashboardRoute\" [filter]=\"true\" [showClear]=\"true\" [style]=\"{ width: '100%' }\"\n      appendTo=\"body\" />\n\n    <div class=\"route-popup-actions\">\n      <button type=\"button\" class=\"route-popup-btn\" (click)=\"cancelReopenDashboardDialog()\">{{ 'cancel' | translate\n        }}</button>\n      <button type=\"button\" class=\"route-popup-btn route-popup-btn-primary\" (click)=\"confirmReopenDashboardDialog()\"\n        [disabled]=\"!reopenDialogSelectedDashboardRoute\">{{ 'designer.reopen' | translate }}</button>\n    </div>\n  </div>\n</p-dialog>", styles: [":host{display:block;width:100%;height:100%;min-width:0}.designer-layout{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;width:100%;min-width:0}.designer-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px solid inherit;border-radius:10px;background:transparent;padding:10px 12px;margin-bottom:8px}.designer-current-dashboard{min-width:220px;font-size:.86rem;font-weight:700;color:inherit}.designer-toolbar-spacer{flex:1 1 auto;min-width:16px}.designer-toolbar-menu-group{display:inline-flex}.designer-toolbar-menu-group button{height:32px;border:1px solid #2f67d8;border-radius:6px;background:#2f67d8;color:#fff;padding:0 10px;font-size:.82rem;cursor:pointer}.designer-toolbar-menu-group button[disabled]{opacity:.6;cursor:not-allowed}.designer-main{min-height:0;min-width:0;width:100%;overflow:hidden;direction:ltr}.designer-main-splitter{height:100%;width:100%;min-width:0;direction:ltr}.designer-toolbox{font-size:3rem}.designer-toolbox ul{list-style-type:none;padding:0;margin:0;width:100%}.designer-toolbox li{float:left;margin-left:5px;margin-top:5px}.designer-toolbox .tool-groups{display:block}.designer-toolbox .tool-group-item{float:none;margin-left:0;margin-top:10px;clear:both}.designer-toolbox .tool-group-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin:0 0 4px 6px}.designer-toolbox .tool-group-list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px}.designer-toolbox .tool-group-list li{float:none;margin-left:0;margin-top:0}.designer-toolbox .props{font-size:1rem}.designer-toolbox .props li{float:none;padding-bottom:15px}.designer-toolbox .prop-section{width:100%;border:1px solid inherit;border-radius:6px;margin-top:8px;background:transparent;padding:6px 8px 2px}.designer-toolbox .prop-section-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;color:inherit;margin-bottom:6px}.palette-panel{height:100%;overflow:auto;width:100%}.designer-color-alpha-row{display:flex;align-items:center;gap:8px;margin-top:6px;margin-bottom:6px}.designer-color-alpha-label{font-size:.8rem;min-width:40px}.designer-color-alpha-row input[type=range]{flex:1 1 auto;min-width:90px}.designer-color-alpha-row input[type=number]{width:72px}.properties-panel{height:100%;overflow:hidden;width:100%;display:flex;flex-direction:column;min-height:0;padding-right:10px;padding-left:10px;padding-top:10px}.properties-panel>.designer-toolbox{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}:host ::ng-deep .designer-left-bottom-splitter .p-splitterpanel{min-height:0!important;overflow:hidden!important}.hierarchy-panel{height:100%;width:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:6px}.hierarchy-panel-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#4b5563;margin:0 0 6px}.hierarchy-tree-wrap{flex:1 1 auto;min-height:0;border:1px solid inherit;border-radius:6px;background:transparent;overflow:auto;padding:4px}:host ::ng-deep .hierarchy-tree-wrap .p-tree{border:none;padding:0;height:100%;background:transparent}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content{border:1px solid transparent;border-radius:4px;background:transparent!important;color:inherit!important;padding:0!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight{border-color:transparent!important;background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content:hover{background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label{display:inline-block;border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label:hover{border-color:#94a3b8}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label.active{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight .hierarchy-node-label{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}.designer-hierarchy-node{cursor:pointer;border:1px solid transparent;border-radius:4px;padding:2px 6px;font-size:.82rem;line-height:1.25rem}.designer-hierarchy-node-label{cursor:pointer;display:inline-block;width:100%}.designer-hierarchy-node.active{border-color:#3b82f6;background:#eff6ff;color:#1d4ed8}.designer-footer-item.designer-tree-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px}.dashboard-design{height:100%;min-height:0;min-width:0;width:100%;overflow:auto;direction:ltr}:host ::ng-deep .dashboard-design.designer-hide-datasources .datasource-descriptor{display:none!important}.current-dashboard-title{font-weight:600;margin-right:12px}.designer-footer{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid inherit;background:transparent;min-height:36px;flex:0 0 auto;width:100%;overflow:auto}.designer-footer-label{font-size:.85rem;font-weight:600;color:inherit;white-space:nowrap}.designer-footer-list{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%}.designer-footer-item{border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer;white-space:nowrap}.designer-footer-item.active{border-color:#3b82f6;background:transparent;color:#1d4ed8}:host ::ng-deep .designer-footer-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px;box-shadow:inset 0 0 0 1px #3b82f6!important}.route-popup-form{display:flex;flex-direction:column;gap:8px}.route-popup-form label{font-size:.85rem;font-weight:600;color:#2f3f58}.route-popup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.route-popup-btn{border:1px solid inherit;background:transparent;color:inherit;border-radius:6px;padding:7px 12px;font-size:.85rem;cursor:pointer}.route-popup-btn-primary{border-color:#2f67d8;background:#2f67d8;color:#fff}.p-colorpicker{border:1px solid black;border-radius:4px}\n"] }]
+            args: [{ selector: 'wuic-designer', imports: [NgClass, TranslateModule, AsyncPipe, FormsModule, SplitterModule, DragDropModule, SelectModule, ColorPickerModule, AutoCompleteModule, DashboardComponent, FieldEditorComponent, ContextMenuModule, MetadataEditorComponent, MenubarModule, ArchetypeConfiguratorComponent, ButtonModule, MultiSelectModule, CssSheetEditorComponent, MenuModule, DialogModule, TreeModule], providers: [TreeDragDropService], template: "<!-- <button pButton type=\"button\" (click)=\"loadDashboard()\" class=\"mr-2\">{{'load' | translate}}</button> -->\n@if (!noEdit) {\n<div class=\"designer-layout\">\n  <div class=\"designer-toolbar\">\n    <div class=\"designer-current-dashboard\">{{ currentDashboardTitle }}</div>\n\n    <div class=\"designer-toolbar-spacer\"></div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"undo()\" [disabled]=\"!canUndo\">{{ 'designer.undo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"redo()\" [disabled]=\"!canRedo\">{{ 'designer.redo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" data-testid=\"designer-actions-menu-btn\" (click)=\"refreshGraphActionsMenuItems(); graphActionsMenu.toggle($event)\">{{ 'designer.actions_menu' | translate }}</button>\n      <p-menu #graphActionsMenu [popup]=\"true\" [model]=\"graphActionsMenuItems\" appendTo=\"body\"></p-menu>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"openCurrentDashboardInNewTab()\" [disabled]=\"!currentDashboardRoute\">{{\n        'designer.open_current_dashboard' | translate }}</button>\n    </div>\n  </div>\n  <div class=\"designer-main\">\n    <p-splitter [style]=\"{ height: '100%' }\" [panelSizes]=\"[15, 85]\" styleClass=\"designer-main-splitter\">\n      <ng-template pTemplate>\n        <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[35, 65]\"\n          [minSizes]=\"[20, 30]\" styleClass=\"designer-left-splitter\">\n          <ng-template pTemplate>\n            <div class=\"col flex designer-toolbox palette-panel\">\n              <ul class=\"tool-groups\">\n                @for (toolGroup of availableToolGroups; track toolGroup.group) {\n                <li class=\"tool-group-item\">\n                  <div class=\"tool-group-title\">{{ toolGroup.group }}</div>\n                  <ul class=\"tool-group-list\">\n                    @for (tool of toolGroup.tools; track tool) {\n                    <li pDraggable (onDragStart)=\"dragStart(tool)\" (onDragEnd)=\"dragEnd()\" (onDrag)=\"onDrag($event)\"\n                      (dblclick)=\"dropToolAtRoot(tool)\">\n                      <i [ngClass]=\"tool.icon\" [title]=\"tool.name\"></i>\n                    </li>\n                    }\n                  </ul>\n                </li>\n                }\n              </ul>\n            </div>\n          </ng-template>\n          <ng-template pTemplate>\n            <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[68, 32]\"\n              [minSizes]=\"[35, 20]\" styleClass=\"designer-left-bottom-splitter\">\n              <ng-template pTemplate>\n                <div class=\"properties-panel\">\n                  <p-select [style]=\"{width: '100%'}\" [options]=\"flattenedDashboardElements\" [(ngModel)]=\"tool\"\n                    optionLabel=\"uniqueName\" dataKey=\"componentId\" appendTo=\"body\" />\n                  <div class=\"designer-toolbox\">\n\n                    <span style=\"width: 100%;\">\n                      <input type=\"text\" style=\"width: calc(100% - 30px);\" [(ngModel)]=\"propFilter\"\n                        [placeholder]=\"'prop.filter' | translate\" />\n                      <button style=\"width: 25px\" (click)=\"clearPropFilter()\">X</button>\n                    </span>\n\n                    @for (section of getToolPropertySections(tool, propFilter); track section.key) {\n                    <details class=\"prop-section\" [open]=\"section.open\"\n                      (toggle)=\"onPropertySectionToggle(tool, section.key, $event)\">\n                      <summary class=\"prop-section-title\">{{ section.label }}</summary>\n                      <ul class=\"props\">\n                        @for (toolProp of section.props; track toolProp.key) {\n                        <li>\n                          @if (!toolProp.value.hideCaption) {\n                          <span>{{ toolProp.value?.propertyCaption ||\n                            toolProp.key[0].toUpperCase() + toolProp.key.slice(1)\n                            }}</span>\n                          }\n                          <br />\n                          @if (toolProp.value.type == 'button') {\n                          <p-button (click)=\"toolProp.value.callback(tool.inputs, toolProp.key, null, tool)\"\n                            class=\"k-button\" [style]=\"{width: '100%'}\">\n                            {{toolProp.value.propertyCaption}}\n                          </p-button>\n                          }\n                          @if (toolProp.value.type == 'metaEditor' &&\n                          tool.inputs['componentRef']?.value?.component) {\n                          <wuic-metadata-editor [hardcodedDatasource]=\"tool.inputs['componentRef']?.value?.component\"\n                            [saveCallback]=\"metaEditorSave\"></wuic-metadata-editor>\n                          }\n                          @if (toolProp.value.type == 'boolean') {\n                          <input type=\"checkbox\" [(ngModel)]=\"tool.inputs[toolProp.key]\" />\n                          }\n                          @if (toolProp.value.type == 'numberToArray') {\n                          <input style=\"width: 100%;\" type=\"number\" pInputText [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'txt_area') {\n                          <textarea style=\"width: 100%;\" [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\"></textarea>\n                          }\n                          @if (toolProp.value.type == 'string') {\n                          <input style=\"width: 100%;\" type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'color') {\n                          <p-colorPicker [ngModel]=\"getDesignerColorPickerHex(tool, toolProp)\"\n                            (ngModelChange)=\"onDesignerColorPickerHexChange($event, tool, toolProp)\" appendTo=\"body\" />\n                          <div class=\"designer-color-alpha-row\">\n                            <span class=\"designer-color-alpha-label\">{{ 'designer.alpha' | translate }}</span>\n                            <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                            <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                          </div>\n                          <input type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'dictionary' && !toolProp.value.async) {\n                          @if (toolProp.key == 'cssFile') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"availableProjectCssFiles\"\n                            [ngModel]=\"tool.inputs[toolProp.key]\" (ngModelChange)=\"onCssFileChanged($event, tool)\" />\n                          } @else if (toolProp.key == 'cssClass') {\n                          <p-multiSelect [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getCssClassOptionsForTool(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"onCssClassChanged($event, tool)\" [filter]=\"true\" [virtualScroll]=\"true\"\n                            [virtualScrollItemSize]=\"38\" scrollHeight=\"260px\" [showToggleAll]=\"false\" display=\"chip\"\n                            [maxSelectedLabels]=\"3\" [selectedItemsLabel]=\"'{0} selected'\">\n                          </p-multiSelect>\n                          } @else if ((tool.name == 'SELECT' || tool.name == 'MULTISELECT' || tool.name == 'UL') &&\n                          (toolProp.key == 'valueField' || toolProp.key == 'textField')) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else if (tool.name == 'LABEL' && toolProp.key == 'displayField') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          }\n                          @if (toolProp.value.type == 'dictionary' && toolProp.value.async) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (tool.name == 'DATAREPEATER' && toolProp.key == 'action' &&\n                          canOpenArchetypeConfigurator(tool)) {\n                          <button style=\"margin-top: 8px;\" (click)=\"openArchetypeConfigurator(tool)\">\n                            {{ 'designer.configure' | translate }} {{ (tool.inputs['action'] | async) || '' }}\n                          </button>\n                          }\n                          @if (toolProp.value.type == 'dropped-component-list') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [placeholder]=\"'select.component' | translate\" [options]=\"elementFilter(toolProp)\"\n                            [ngModel]=\"getDroppedComponentListModel(tool, toolProp)\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" optionLabel=\"uniqueName\"\n                            dataKey=\"uniqueName\" />\n                          }\n                          @if (toolProp.value.type == 'autocomplete') {\n                          <p-autoComplete [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\" [forceSelection]=\"true\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" [suggestions]=\"tool.suggestions\"\n                            [optionLabel]=\"toolProp.value.displayField\" [optionValue]=\"toolProp.value.valueField\"\n                            (completeMethod)=\"search($event, tool, toolProp)\" [dropdown]=\"true\" dropdownMode=\"current\"\n                            [multiple]=\"toolProp.value.multiple\" />\n                          }\n                          @if (toolProp.value.type == 'propertyTree' && shouldShowPropertyTree(tool)) {\n                          <ul>\n                            @for (item of $any(tool.inputs[toolProp.key] | async); track item) {\n                            <li style=\"padding: 0; margin: 0;\">\n                              @if (item.col && tool.inputs['customProps_' + (tool.inputs['action'] | async)])\n                              {\n                              <wuic-field-editor [field]=\"item.col\"\n                                [record]=\"tool.inputs['customProps_' + (tool.inputs['action'] | async)]\"\n                                [metaInfo]=\"tool.inputs['datasource']?.component?.value?.metaInfo\"\n                                [triggerProp]=\"tool.inputs['action']\"></wuic-field-editor>\n                              }\n                            </li>\n                            }\n                          </ul>\n                          }\n                        </li>\n                        }\n                      </ul>\n                    </details>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n              <ng-template pTemplate>\n                <div class=\"hierarchy-panel\">\n                  <div class=\"hierarchy-panel-title\">{{ 'designer.canvas_hierarchy' | translate }}</div>\n                  <div class=\"hierarchy-tree-wrap\">\n                    <p-tree [value]=\"hierarchyTreeNodes\" [draggableNodes]=\"true\" [droppableNodes]=\"true\"\n                      selectionMode=\"single\" [(selection)]=\"hierarchySelection\"\n                      (onNodeSelect)=\"onHierarchyNodeSelect($event)\" draggableScope=\"designer-hierarchy\"\n                      droppableScope=\"designer-hierarchy\" (onNodeDrop)=\"onHierarchyNodeDrop($event)\">\n                      <ng-template let-node pTemplate=\"default\">\n                        <span class=\"hierarchy-node-label\" [class.active]=\"isHierarchyNodeSelected(node)\"\n                          (mouseenter)=\"onHierarchyNodeMouseEnter(node)\" (mouseleave)=\"onHierarchyNodeMouseLeave()\"\n                          (contextmenu)=\"showHierarchyNodeContextMenu($event, node, hierarchyCtxMenu)\">\n                          {{ node.label }}\n                        </span>\n                      </ng-template>\n                    </p-tree>\n                  </div>\n                  <p-contextMenu #hierarchyCtxMenu [model]=\"hierarchyCtxItems\" appendTo=\"body\" />\n                </div>\n              </ng-template>\n            </p-splitter>\n          </ng-template>\n        </p-splitter>\n      </ng-template>\n      <ng-template pTemplate>\n        <div class=\"col dashboard-design\" [class.designer-hide-datasources]=\"hideDatasourcesInCanvas\"\n          [class.designer-snap-grid]=\"snapToGridEnabled\" [style.--wuic-grid-size.px]=\"gridSize\" pDroppable\n          (onDrop)=\"drop($event)\" #canvas (mousedown)=\"onCanvasMouseDown($event)\"\n          (contextmenu)=\"showCtx($event, this)\">\n          <wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n          @if (rubberBandVisible) {\n          <div class=\"designer-selection-rect\" [style.left]=\"rubberBandStyle.left\" [style.top]=\"rubberBandStyle.top\"\n            [style.width]=\"rubberBandStyle.width\" [style.height]=\"rubberBandStyle.height\"></div>\n          }\n          <p-contextMenu [target]=\"canvas\" [model]=\"ctxItems | async\" appendTo=\"body\" />\n        </div>\n      </ng-template>\n    </p-splitter>\n  </div>\n  <div class=\"designer-footer\">\n    <div class=\"designer-footer-label\">{{ 'designer.items' | translate }}:</div>\n    <div class=\"designer-footer-list\">\n      @for (item of droppedDashboardItems; track item.uniqueName) {\n      <button type=\"button\" class=\"designer-footer-item\" [class.active]=\"tool?.uniqueName === item?.uniqueName\"\n        [attr.data-designer-unique-name]=\"item?.uniqueName\" (mouseenter)=\"setFooterHoverHighlight(item)\"\n        (mouseleave)=\"clearFooterHoverHighlight()\" (click)=\"selectDashboardItem(item)\"\n        (contextmenu)=\"showFooterContextMenu($event, item, footerCtxMenu)\">\n        {{ getDroppedDashboardItemLabel(item) }}\n      </button>\n      }\n    </div>\n    <p-contextMenu #footerCtxMenu [model]=\"footerCtxItems\" appendTo=\"body\" />\n  </div>\n</div>\n}\n\n@if (noEdit) {\n<wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n}\n\n<wuic-archetype-configurator [visible]=\"showArchetypeConfigurator\"\n  (visibleChange)=\"onArchetypeConfigVisibleChange($event)\" [archetype]=\"getActiveArchetypeConfig()\"\n  [metaInfo]=\"getArchetypeConfigMetaInfoForTool(archetypeConfigTool)\"\n  [value]=\"getArchetypeConfigValueForTool(archetypeConfigTool)\" (applyConfig)=\"onArchetypeConfigApply($event)\">\n</wuic-archetype-configurator>\n\n<wuic-css-sheet-editor [visible]=\"showCssSheetEditor\" (visibleChange)=\"onCssSheetEditorVisibleChange($event)\"\n  [sheets]=\"dashboardCssSheets\" [selectedSheetPath]=\"selectedCssEditorSheetPath\" [assetsFolder]=\"currentDashboardRoute\"\n  [styleProps]=\"getCssEditorStyleProps()\" (applyEditor)=\"onCssSheetEditorApply($event)\">\n</wuic-css-sheet-editor>\n\n<p-dialog [header]=\"'designer.reopen_dashboard' | translate\" [(visible)]=\"reopenDashboardDialogVisible\" [modal]=\"true\"\n  [closable]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [appendTo]=\"'body'\" [style]=\"{ width: '34rem' }\"\n  (onHide)=\"cancelReopenDashboardDialog()\">\n  <div class=\"route-popup-form\">\n    <label for=\"designer-reopen-select\">{{ 'designer.existing_dashboards' | translate }}</label>\n    <p-select inputId=\"designer-reopen-select\" [options]=\"savedDashboardOptions\" optionLabel=\"label\" optionValue=\"value\"\n      [(ngModel)]=\"reopenDialogSelectedDashboardRoute\" [filter]=\"true\" [showClear]=\"true\" [style]=\"{ width: '100%' }\"\n      appendTo=\"body\" />\n\n    <div class=\"route-popup-actions\">\n      <button type=\"button\" class=\"route-popup-btn\" (click)=\"cancelReopenDashboardDialog()\">{{ 'cancel' | translate\n        }}</button>\n      <button type=\"button\" class=\"route-popup-btn route-popup-btn-primary\" (click)=\"confirmReopenDashboardDialog()\"\n        [disabled]=\"!reopenDialogSelectedDashboardRoute\">{{ 'designer.reopen' | translate }}</button>\n    </div>\n  </div>\n</p-dialog>", styles: [":host{display:block;width:100%;height:100%;min-width:0}.designer-layout{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;width:100%;min-width:0}.designer-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px solid inherit;border-radius:10px;background:transparent;padding:10px 12px;margin-bottom:8px}.designer-current-dashboard{min-width:220px;font-size:.86rem;font-weight:700;color:inherit}.designer-toolbar-spacer{flex:1 1 auto;min-width:16px}.designer-toolbar-menu-group{display:inline-flex}.designer-toolbar-menu-group button{height:32px;border:1px solid #2f67d8;border-radius:6px;background:#2f67d8;color:#fff;padding:0 10px;font-size:.82rem;cursor:pointer}.designer-toolbar-menu-group button[disabled]{opacity:.6;cursor:not-allowed}.designer-main{min-height:0;min-width:0;width:100%;overflow:hidden;direction:ltr}.designer-main-splitter{height:100%;width:100%;min-width:0;direction:ltr}.designer-toolbox{font-size:3rem}.designer-toolbox ul{list-style-type:none;padding:0;margin:0;width:100%}.designer-toolbox li{float:left;margin-left:5px;margin-top:5px}.designer-toolbox .tool-groups{display:block}.designer-toolbox .tool-group-item{float:none;margin-left:0;margin-top:10px;clear:both}.designer-toolbox .tool-group-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin:0 0 4px 6px}.designer-toolbox .tool-group-list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px}.designer-toolbox .tool-group-list li{float:none;margin-left:0;margin-top:0}.designer-toolbox .props{font-size:1rem}.designer-toolbox .props li{float:none;padding-bottom:15px}.designer-toolbox .prop-section{width:100%;border:1px solid inherit;border-radius:6px;margin-top:8px;background:transparent;padding:6px 8px 2px}.designer-toolbox .prop-section-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;color:inherit;margin-bottom:6px}.palette-panel{height:100%;overflow:auto;width:100%}.designer-color-alpha-row{display:flex;align-items:center;gap:8px;margin-top:6px;margin-bottom:6px}.designer-color-alpha-label{font-size:.8rem;min-width:40px}.designer-color-alpha-row input[type=range]{flex:1 1 auto;min-width:90px}.designer-color-alpha-row input[type=number]{width:72px}.properties-panel{height:100%;overflow:hidden;width:100%;display:flex;flex-direction:column;min-height:0;padding-right:10px;padding-left:10px;padding-top:10px}.properties-panel>.designer-toolbox{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}:host ::ng-deep .designer-left-bottom-splitter .p-splitterpanel{min-height:0!important;overflow:hidden!important}.hierarchy-panel{height:100%;width:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:6px}.hierarchy-panel-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#4b5563;margin:0 0 6px}.hierarchy-tree-wrap{flex:1 1 auto;min-height:0;border:1px solid inherit;border-radius:6px;background:transparent;overflow:auto;padding:4px}:host ::ng-deep .hierarchy-tree-wrap .p-tree{border:none;padding:0;height:100%;background:transparent}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content{border:1px solid transparent;border-radius:4px;background:transparent!important;color:inherit!important;padding:0!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight{border-color:transparent!important;background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content:hover{background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label{display:inline-block;border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label:hover{border-color:#94a3b8}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label.active{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight .hierarchy-node-label{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}.designer-hierarchy-node{cursor:pointer;border:1px solid transparent;border-radius:4px;padding:2px 6px;font-size:.82rem;line-height:1.25rem}.designer-hierarchy-node-label{cursor:pointer;display:inline-block;width:100%}.designer-hierarchy-node.active{border-color:#3b82f6;background:#eff6ff;color:#1d4ed8}.designer-footer-item.designer-tree-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px}.dashboard-design{height:100%;min-height:0;min-width:0;width:100%;overflow:auto;direction:ltr;position:relative}.designer-selection-rect{position:absolute;border:1px dashed #3b82f6;background:#3b82f61f;pointer-events:none;z-index:10000}:host ::ng-deep .designer-multi-selected{outline:2px solid #3b82f6!important;outline-offset:1px}:host ::ng-deep .dashboard-design.designer-hide-datasources .datasource-descriptor{display:none!important}.current-dashboard-title{font-weight:600;margin-right:12px}.designer-footer{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid inherit;background:transparent;min-height:36px;flex:0 0 auto;width:100%;overflow:auto}.designer-footer-label{font-size:.85rem;font-weight:600;color:inherit;white-space:nowrap}.designer-footer-list{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%}.designer-footer-item{border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer;white-space:nowrap}.designer-footer-item.active{border-color:#3b82f6;background:transparent;color:#1d4ed8}:host ::ng-deep .designer-footer-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px;box-shadow:inset 0 0 0 1px #3b82f6!important}.route-popup-form{display:flex;flex-direction:column;gap:8px}.route-popup-form label{font-size:.85rem;font-weight:600;color:#2f3f58}.route-popup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.route-popup-btn{border:1px solid inherit;background:transparent;color:inherit;border-radius:6px;padding:7px 12px;font-size:.85rem;cursor:pointer}.route-popup-btn-primary{border-color:#2f67d8;background:#2f67d8;color:#fff}.p-colorpicker{border:1px solid black;border-radius:4px}.dashboard-design.designer-snap-grid{background-image:linear-gradient(to right,rgba(128,128,128,.16) 1px,transparent 1px),linear-gradient(to bottom,rgba(128,128,128,.16) 1px,transparent 1px);background-size:var(--wuic-grid-size, 10px) var(--wuic-grid-size, 10px)}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: DataProviderService }, { type: MetadataProviderService }, { type: UserInfoService }, { type: i0.ChangeDetectorRef }, { type: TranslationManagerService }, { type: MetadataEditorService }, { type: ChatbotHostRegistryService }, { type: WorkflowRuntimeMetadataService }], propDecorators: { onWindowHashChange: [{
                 type: HostListener,
                 args: ['window:hashchange']
@@ -11854,7 +13316,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], onWindowChange: [{
                 type: HostListener,
                 args: ['window:change']
+            }], canvasRef: [{
+                type: ViewChild,
+                args: ['canvas']
             }] } });
 
 export { DesignerComponent };
-//# sourceMappingURL=wuic-framework-lib-designer.component-N_CfbGnr.mjs.map
+//# sourceMappingURL=wuic-framework-lib-designer.component-x10ZzUEy.mjs.map