wuic-framework-lib 1.3.2 → 1.7.0

package/fesm2022/{wuic-framework-lib-designer.component-DA7abiLW.mjs → wuic-framework-lib-designer.component-Bd2fwl6H.mjs}

@@ -1,21 +1,21 @@
 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-BRujEwpR.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, t as toHsbaModel, d as clampAlpha, e as toPersistedColor, f as ParametricDialogComponent, g as MetadatiColonna, h as DataProviderService, U as UserInfoService, T as TranslationManagerService, i as MetadataEditorService, C as ChatbotHostRegistryService, j as WorkflowRuntimeMetadataService, k as FieldEditorComponent, l as MetadataEditorComponent, A as ArchetypeConfiguratorComponent } from './wuic-framework-lib-wuic-framework-lib-dfLTqam5.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';
-import * as i6 from 'primeng/select';
+import * as i5 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i2$1 from 'primeng/colorpicker';
+import * as i6 from 'primeng/colorpicker';
 import { ColorPickerModule } from 'primeng/colorpicker';
-import * as i2$2 from 'primeng/autocomplete';
+import * as i2$1 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
 import * as i8 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -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';
@@ -43,7 +43,7 @@ class PropConverterPipe {
         if (value) {
             if (args.length > 0) {
                 if (args[0] === 'toArray') {
-                    return Array(parseInt(value.toString())).fill(1).map((x, i) => i);
+                    return new Array(Number.parseInt(value.toString())).fill(1).map((x, i) => i);
                 }
                 if (args[0] === 'fromArray') {
                     return value.length;
@@ -68,8 +68,8 @@ class NgxDraggablePoint {
     x;
     y;
     constructor(x, y) {
-        this.x = (!!x) ? x : 0;
-        this.y = (!!y) ? y : 0;
+        this.x = x || 0;
+        this.y = y || 0;
     }
 }
 
@@ -136,10 +136,10 @@ class NgxDraggableRect {
         };
     }
     constructor(x, y, width, height) {
-        this.x = (!!x) ? x : 0;
-        this.y = (!!y) ? y : 0;
-        this.width = (!!width) ? width : 0;
-        this.height = (!!height) ? height : 0;
+        this.x = x || 0;
+        this.y = y || 0;
+        this.width = width || 0;
+        this.height = height || 0;
     }
 }
 
@@ -175,15 +175,15 @@ class NgxDraggableDomBoundsCheckEvent {
      * @param isConstrained Whether the element should be constrained or not.
      */
     constructor(top, right, bottom, left, elP0, translation, isConstrained) {
-        this.top = (!!top) ? top : false;
-        this.right = (!!right) ? right : false;
-        this.bottom = (!!bottom) ? bottom : false;
-        this.left = (!!left) ? left : false;
-        if (!!elP0) {
+        this.top = top ?? false;
+        this.right = right ?? false;
+        this.bottom = bottom ?? false;
+        this.left = left ?? false;
+        if (elP0) {
             this.constrainedCenter = elP0;
         }
-        this.translation = (!!translation) ? translation : new NgxDraggablePoint(0, 0);
-        this.isConstrained = (!!isConstrained) ? isConstrained : false;
+        this.translation = translation ?? new NgxDraggablePoint(0, 0);
+        this.isConstrained = isConstrained ?? false;
     }
 }
 
@@ -217,8 +217,8 @@ class NgxDraggableDomMoveEvent {
      * @param position The position of the target HTMLElement.
      */
     constructor(target, position) {
-        this._target = (!!target) ? target : undefined;
-        this._position = (!!position) ? position : undefined;
+        this._target = target || undefined;
+        this._position = position || undefined;
     }
 }
 
@@ -386,11 +386,11 @@ class NgxDraggableDomUtilities {
     static getTransformMatrixForElement(el) {
         // create the numerical matrix we will use
         const matrix = [1, 0, 0, 1, 0, 0];
-        if (window) {
+        if (globalThis) {
             // get the computed transform style
-            let transform = window.getComputedStyle(el, null).getPropertyValue('transform');
+            let transform = globalThis.getComputedStyle(el, null).getPropertyValue('transform');
             // strip non matrix values from the string
-            transform = transform.replace(/matrix/g, '').replace(/\(/g, '').replace(/\)/g, '').replace(/ /g, '');
+            transform = transform.replaceAll('matrix', '').replaceAll('(', '').replaceAll(')', '').replaceAll(' ', '');
             // if we have a transform set, convert the string matrix to a numerical one
             if (transform !== 'none') {
                 // split the string based on commas
@@ -427,7 +427,7 @@ class NgxDraggableDomUtilities {
      */
     static getTotalRotationForElement(node, rotation = 0) {
         // if we can't calculate the computed style or we have no node to analyze, return the current calculated rotation
-        if (!node || !window) {
+        if (!node || !globalThis) {
             return rotation;
         }
         // if we have reached the body, stop processing beyond here
@@ -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;
@@ -510,7 +527,7 @@ class NgxDraggableDomDirective {
             return null;
         }
         // get the bounding box of the element
-        const boundsBounds = this.bounds.getBoundingClientRect();
+        const boundsBounds = (this.bounds).getBoundingClientRect();
         return new NgxDraggablePoint(this.scrollLeft + boundsBounds.left + (boundsBounds.width / 2), this.scrollTop + boundsBounds.top + (boundsBounds.height / 2));
     }
     /**
@@ -519,7 +536,7 @@ class NgxDraggableDomDirective {
      * @return The current scroll position of the document in the x direction.
      */
     get scrollLeft() {
-        if (!!window) {
+        if (globalThis) {
             return window.pageXOffset;
         }
         else if (!!document && !!document.documentElement) {
@@ -535,7 +552,7 @@ class NgxDraggableDomDirective {
      * @return The current scroll position of the document in the y direction.
      */
     get scrollTop() {
-        if (!!window) {
+        if (globalThis) {
             return window.pageYOffset;
         }
         else if (!!document && !!document.documentElement) {
@@ -637,7 +654,7 @@ class NgxDraggableDomDirective {
      */
     onTouchStart(event) {
         // block multiTouch events if we are configured to do so
-        if (this.ignoreMultiTouchEvents && event && event.touches && event.touches.length > 1) {
+        if (this.ignoreMultiTouchEvents && event?.touches && event.touches.length > 1) {
             return;
         }
         // stop all default behavior and propagation of the event so it is fully consumed by us
@@ -732,13 +749,8 @@ class NgxDraggableDomDirective {
      * @param event The touch event to handle as a TouchEvent (or any solely for working around issues with Safari).
      */
     onTouchEnd(event) {
-        // stop all default behavior and propagation of the event so it is fully consumed by us
-        event.stopImmediatePropagation();
-        // prevent the default mouse behavior on images so that browser image dragging is disabled
-        if (event.target instanceof HTMLImageElement) {
-            event.preventDefault();
-        }
-        this.putBack();
+        // same consume-and-put-back behavior as the mouse release handler
+        this.onMouseUp(event);
     }
     /**
      * Event handler for when the element is moved via a touch event.
@@ -747,7 +759,7 @@ class NgxDraggableDomDirective {
      */
     onTouchMove(event) {
         // block multiTouch events if we are configured to do so
-        if (this.ignoreMultiTouchEvents && event && event.touches && event.touches.length > 1) {
+        if (this.ignoreMultiTouchEvents && event?.touches && event.touches.length > 1) {
             // ensure any element that is being dragged is put back
             this.putBack(false);
             return;
@@ -835,13 +847,23 @@ class NgxDraggableDomDirective {
             // check the bounds based on the element position
             boundsCheck = this.boundsCheck(new NgxDraggablePoint(dragPosition.x, dragPosition.y));
             // hold the element in position if we are requested to be constrained
-            if (boundsCheck && boundsCheck.isConstrained) {
+            if (boundsCheck?.isConstrained) {
                 // update the translation using the constrained center point and bounds center
                 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) {
+        if (globalThis) {
             // update the x and y values as part of the matrix
             matrix[4] = translation.x;
             matrix[5] = translation.y;
@@ -888,9 +910,9 @@ class NgxDraggableDomDirective {
         this.oldZIndex = this.el.nativeElement.style.zIndex ? this.el.nativeElement.style.zIndex : '';
         this.oldPosition = this.el.nativeElement.style.position ? this.el.nativeElement.style.position : '';
         // fetch the old z-index and position from computing the style applied to the element
-        if (window) {
-            this.oldZIndex = window.getComputedStyle(this.el.nativeElement, null).getPropertyValue('z-index');
-            this.oldPosition = window.getComputedStyle(this.el.nativeElement, null).getPropertyValue('position');
+        if (globalThis) {
+            this.oldZIndex = globalThis.getComputedStyle(this.el.nativeElement, null).getPropertyValue('z-index');
+            this.oldPosition = globalThis.getComputedStyle(this.el.nativeElement, null).getPropertyValue('position');
         }
         // check if old position is draggable
         if (this.oldPosition && (this.oldPosition === 'absolute' ||
@@ -927,7 +949,7 @@ class NgxDraggableDomDirective {
             // compute the current rotation of all parent nodes
             this.computedRotation = NgxDraggableDomUtilities.getTotalRotationForElement(this.el.nativeElement.parentElement);
             // normalize the start position for the rotation
-            this.startPosition = NgxDraggableMath.rotatePoint(this.startPosition, (!!boundsCenter) ? boundsCenter : new NgxDraggablePoint(0, 0), -this.computedRotation);
+            this.startPosition = NgxDraggableMath.rotatePoint(this.startPosition, boundsCenter ?? new NgxDraggablePoint(0, 0), -this.computedRotation);
             // get the current transformation matrix and extract the current translation
             matrix = NgxDraggableDomUtilities.getTransformMatrixForElement(this.el.nativeElement);
             translation.x = matrix[4];
@@ -936,7 +958,7 @@ class NgxDraggableDomDirective {
             this.startPosition.x -= translation.x;
             this.startPosition.y -= translation.y;
             // reapply the rotation to the start position
-            this.startPosition = NgxDraggableMath.rotatePoint(this.startPosition, (!!boundsCenter) ? boundsCenter : new NgxDraggablePoint(0, 0), this.computedRotation);
+            this.startPosition = NgxDraggableMath.rotatePoint(this.startPosition, boundsCenter ?? new NgxDraggablePoint(0, 0), this.computedRotation);
             // determine the clientX and clientY position based on the event type
             const clientX = (event instanceof MouseEvent) ? event.clientX : event.changedTouches[0]?.clientX;
             const clientY = (event instanceof MouseEvent) ? event.clientY : event.changedTouches[0]?.clientY;
@@ -994,7 +1016,7 @@ class NgxDraggableDomDirective {
             if (this.bounds) {
                 // get the current center point of the element
                 const elCenter = this.elCenter;
-                if (!!elCenter) {
+                if (elCenter) {
                     // check the bounds based on the element position
                     const boundsCheck = this.boundsCheck(elCenter);
                     // emit the edge event so consumers know the current state of the position
@@ -1116,7 +1138,7 @@ class NgxDraggableDomDirective {
                     if (isBLOutside && elBL.x >= (checkBounds.left + checkBounds.width) &&
                         NgxDraggableMath.getDistanceBetweenPoints(elBL, boundsP0) > greatestConstrainDistance) {
                         constrainPoint = new NgxDraggablePoint(elBL.x, elBL.y);
-                        greatestConstrainDistance = NgxDraggableMath.getDistanceBetweenPoints(elBL, boundsP0);
+                        NgxDraggableMath.getDistanceBetweenPoints(elBL, boundsP0);
                     }
                     // calculate the displacement
                     displaceX = checkBounds.left + checkBounds.width - (constrainPoint ? constrainPoint.x : 0);
@@ -1141,7 +1163,7 @@ class NgxDraggableDomDirective {
                     if (isBLOutside && elBL.x <= checkBounds.left &&
                         NgxDraggableMath.getDistanceBetweenPoints(elBL, boundsP0) > greatestConstrainDistance) {
                         constrainPoint = new NgxDraggablePoint(elBL.x, elBL.y);
-                        greatestConstrainDistance = NgxDraggableMath.getDistanceBetweenPoints(elBL, boundsP0);
+                        NgxDraggableMath.getDistanceBetweenPoints(elBL, boundsP0);
                     }
                     // calculate the displacement
                     displaceX = checkBounds.left - (constrainPoint ? constrainPoint.x : 0);
@@ -1169,7 +1191,7 @@ class NgxDraggableDomDirective {
                     if (isBLOutside && elBL.y >= (checkBounds.top + checkBounds.height) &&
                         NgxDraggableMath.getDistanceBetweenPoints(elBL, boundsP0) > greatestConstrainDistance) {
                         constrainPoint = new NgxDraggablePoint(elBL.x, elBL.y);
-                        greatestConstrainDistance = NgxDraggableMath.getDistanceBetweenPoints(elBL, boundsP0);
+                        NgxDraggableMath.getDistanceBetweenPoints(elBL, boundsP0);
                     }
                     // calculate the displacement
                     displaceY = checkBounds.top + checkBounds.height - (constrainPoint ? constrainPoint.y : 0);
@@ -1194,7 +1216,7 @@ class NgxDraggableDomDirective {
                     if (isBLOutside && elBL.y <= checkBounds.top &&
                         NgxDraggableMath.getDistanceBetweenPoints(elBL, boundsP0) > greatestConstrainDistance) {
                         constrainPoint = new NgxDraggablePoint(elBL.x, elBL.y);
-                        greatestConstrainDistance = NgxDraggableMath.getDistanceBetweenPoints(elBL, boundsP0);
+                        NgxDraggableMath.getDistanceBetweenPoints(elBL, boundsP0);
                     }
                     // calculate the displacement
                     displaceY = checkBounds.top - (constrainPoint ? constrainPoint.y : 0);
@@ -1318,7 +1340,7 @@ class ResizeHandle {
         this._handle.removeEventListener('mousedown', this._onResize);
         this._handle.removeEventListener('touchstart', this._onResize);
         if (this.parent && !this.existHandle) {
-            this.parent.removeChild(this._handle);
+            this._handle.remove();
         }
         this._handle = null;
         this._onResize = null;
@@ -1352,9 +1374,9 @@ class Position {
              * Fix issue: Multiple phone draggables at the same time
              * https://github.com/xieziyu/angular2-draggable/issues/128
              */
-            for (let i = 0; i < e.changedTouches.length; i++) {
-                if (e.changedTouches[i].target === el) {
-                    return new Position(e.changedTouches[i].clientX, e.changedTouches[i].clientY);
+            for (const touch of e.changedTouches) {
+                if (touch.target === el) {
+                    return new Position(touch.clientX, touch.clientY);
                 }
             }
         }
@@ -1368,13 +1390,13 @@ class Position {
     }
     static getCurrent(el) {
         let pos = new Position(0, 0);
-        if (window) {
-            const computed = window.getComputedStyle(el);
+        if (globalThis) {
+            const computed = globalThis.getComputedStyle(el);
             if (computed) {
-                let x = parseInt(computed.getPropertyValue('left'), 10);
-                let y = parseInt(computed.getPropertyValue('top'), 10);
-                pos.x = isNaN(x) ? 0 : x;
-                pos.y = isNaN(y) ? 0 : y;
+                let x = Number.parseInt(computed.getPropertyValue('left'), 10);
+                let y = Number.parseInt(computed.getPropertyValue('top'), 10);
+                pos.x = Number.isNaN(Number(x)) ? 0 : x;
+                pos.y = Number.isNaN(Number(y)) ? 0 : y;
             }
             return pos;
         }
@@ -1428,11 +1450,11 @@ class Size {
     }
     static getCurrent(el) {
         let size = new Size(0, 0);
-        if (window) {
-            const computed = window.getComputedStyle(el);
+        if (globalThis) {
+            const computed = globalThis.getComputedStyle(el);
             if (computed) {
-                size.width = parseInt(computed.getPropertyValue('width'), 10);
-                size.height = parseInt(computed.getPropertyValue('height'), 10);
+                size.width = Number.parseInt(computed.getPropertyValue('width'), 10);
+                size.height = Number.parseInt(computed.getPropertyValue('height'), 10);
             }
             return size;
         }
@@ -1479,7 +1501,7 @@ class HelperBlock {
     }
     remove() {
         if (this.parent && this._added) {
-            this.parent.removeChild(this._helper);
+            this._helper.remove();
             this._added = false;
         }
     }
@@ -1666,7 +1688,7 @@ class AngularResizableDirective {
         }
         else {
             let r = Number(this.rzAspectRatio);
-            this._aspectRatio = isNaN(r) ? 0 : r;
+            this._aspectRatio = Number.isNaN(Number(r)) ? 0 : r;
         }
     }
     /** Use it to update containment */
@@ -1698,7 +1720,7 @@ class AngularResizableDirective {
                 tmpHandleTypes = ['n', 'e', 's', 'w', 'ne', 'se', 'nw', 'sw'];
             }
             else {
-                tmpHandleTypes = this.rzHandles.replace(/ /g, '').toLowerCase().split(',');
+                tmpHandleTypes = this.rzHandles.replaceAll(' ', '').toLowerCase().split(',');
             }
             for (let type of tmpHandleTypes) {
                 // default handle theme: ng-resizable-$type.
@@ -1725,7 +1747,7 @@ class AngularResizableDirective {
     createHandleByType(type, css) {
         const _el = this.el.nativeElement;
         const _h = this.rzHandleDoms[type] ? this.rzHandleDoms[type].nativeElement : null;
-        if (!type.match(/^(se|sw|ne|nw|n|e|s|w)$/)) {
+        if (!/^(se|sw|ne|nw|n|e|s|w)$/.exec(type)) {
             console.error('Invalid handle type:', type);
             return null;
         }
@@ -1759,7 +1781,7 @@ class AngularResizableDirective {
         this.draggingSub.add(fromEvent(document, 'touchmove', { passive: false }).subscribe(event => this.onMouseMove(event)));
         this.draggingSub.add(fromEvent(document, 'mouseup', { passive: false }).subscribe(() => this.onMouseLeave()));
         // fix for issue #164
-        let isIEOrEdge = /msie\s|trident\//i.test(window.navigator.userAgent);
+        let isIEOrEdge = /msie\s|trident\//i.test(globalThis.navigator.userAgent);
         if (!isIEOrEdge) {
             this.draggingSub.add(fromEvent(document, 'mouseleave', { passive: false }).subscribe(() => this.onMouseLeave()));
         }
@@ -1835,10 +1857,10 @@ class AngularResizableDirective {
     }
     updateDirection() {
         this._direction = {
-            n: !!this._handleResizing.type.match(/n/),
-            s: !!this._handleResizing.type.match(/s/),
-            w: !!this._handleResizing.type.match(/w/),
-            e: !!this._handleResizing.type.match(/e/),
+            n: /n/.test(this._handleResizing.type),
+            s: /s/.test(this._handleResizing.type),
+            w: /w/.test(this._handleResizing.type),
+            e: /e/.test(this._handleResizing.type),
         };
         this._directionChanged = { ...this._direction };
         // if aspect ration should be preserved:
@@ -2002,24 +2024,24 @@ class AngularResizableDirective {
     }
     getBounding() {
         const el = this._containment;
-        const computed = window.getComputedStyle(el);
+        const computed = globalThis.getComputedStyle(el);
         if (computed) {
             let p = computed.getPropertyValue('position');
-            const nativeEl = window.getComputedStyle(this.el.nativeElement);
+            const nativeEl = globalThis.getComputedStyle(this.el.nativeElement);
             let transforms = nativeEl
                 .getPropertyValue('transform')
-                .replace(/[^-\d,]/g, '')
+                .replaceAll(/[^-\d,]/g, '')
                 .split(',');
             this._bounding = {};
             this._bounding.width = el.clientWidth;
             this._bounding.height = el.clientHeight;
-            this._bounding.pr = parseInt(computed.getPropertyValue('padding-right'), 10);
-            this._bounding.pb = parseInt(computed.getPropertyValue('padding-bottom'), 10);
+            this._bounding.pr = Number.parseInt(computed.getPropertyValue('padding-right'), 10);
+            this._bounding.pb = Number.parseInt(computed.getPropertyValue('padding-bottom'), 10);
             this._bounding.deltaL = this.el.nativeElement.offsetLeft - this._currPos.x;
             this._bounding.deltaT = this.el.nativeElement.offsetTop - this._currPos.y;
             if (transforms.length >= 6) {
-                this._bounding.translateX = parseInt(transforms[4], 10);
-                this._bounding.translateY = parseInt(transforms[5], 10);
+                this._bounding.translateX = Number.parseInt(transforms[4], 10);
+                this._bounding.translateY = Number.parseInt(transforms[5], 10);
             }
             else {
                 this._bounding.translateX = 0;
@@ -2032,7 +2054,7 @@ class AngularResizableDirective {
         }
     }
     resetBounding() {
-        if (this._bounding && this._bounding.position === 'static') {
+        if (this._bounding?.position === 'static') {
             this.renderer.setStyle(this._containment, 'position', 'relative');
         }
         this._bounding = null;
@@ -2048,6 +2070,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 });
@@ -2104,7 +2132,7 @@ class DataBoundDirective {
         this.cd = cd;
     }
     async ngOnChanges(changes) {
-        if (changes['databound'] && changes['databound'].currentValue) {
+        if (changes['databound']?.currentValue) {
             const source = changes['databound'].currentValue;
             if (!(source instanceof BehaviorSubject)) {
                 return;
@@ -2125,17 +2153,17 @@ class DataBoundDirective {
                 });
             });
         }
-        else if (changes['bindingFunction'] && changes['bindingFunction'].currentValue && this.ds) {
+        else if (changes['bindingFunction']?.currentValue && this.ds) {
             new Function('resultInfo, metaInfo, inputs, wtoolbox', this.bindingFunction)(this.ds.resultInfo, this.ds.metaInfo, this.inputs, WtoolboxService);
             this.cd.detectChanges();
         }
-        else if (changes['itemTemplate'] && changes['itemTemplate'].currentValue && changes['itemTemplate'].previousValue != changes['itemTemplate'].currentValue) {
+        else if (changes['itemTemplate']?.currentValue && changes['itemTemplate'].previousValue != changes['itemTemplate'].currentValue) {
             this.inputs.itemTemplateComponent = DynamicGenericTemplateComponent.getComponentFromTemplate(this.inputs.itemTemplate || '', '[data-bound] itemTemplate (host-supplied)', String(this.ds?.metaInfo?.tableMetadata?.md_route_name || ''));
             if (this.ds) {
                 await this.ds.fetchData();
             }
         }
-        else if (changes['clickCallback'] && changes['clickCallback'].currentValue) {
+        else if (changes['clickCallback']?.currentValue) {
             this.inputs._wtoolbox = WtoolboxService;
             this.inputs.clickCallback__fn = new Function('resultInfo, metaInfo, inputs, event, wtoolbox', this.clickCallback);
             this.cd.detectChanges();
@@ -2202,11 +2230,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: [{
@@ -2218,7 +2246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  */
 function getPointFromEvent(event) {
     // NOTE: In firefox TouchEvent is only defined for touch capable devices
-    const isTouchEvent = (e) => window.TouchEvent && event instanceof TouchEvent;
+    const isTouchEvent = (e) => globalThis.TouchEvent && event instanceof TouchEvent;
     if (isTouchEvent(event)) {
         if (event.changedTouches.length === 0) {
             return undefined;
@@ -3112,17 +3140,17 @@ class SplitComponent {
             else {
                 const percentSize = (tempAreasPixelSizes[index] / dragStartContext.totalAreasPixelSize) * 100;
                 // Fix javascript only working with float numbers which are inaccurate compared to decimals
-                area._internalSize.set(parseFloat(percentSize.toFixed(10)));
+                area._internalSize.set(Number.parseFloat(percentSize.toFixed(10)));
             }
         });
         this.dragProgressSubject.next(this.createDragInteractionEvent(this.draggedGutterIndex()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SplitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SplitComponent, isStandalone: true, selector: "p-splitter", inputs: { gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, gutterStep: { classPropertyName: "gutterStep", publicName: "gutterStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, gutterClickDeltaPx: { classPropertyName: "gutterClickDeltaPx", publicName: "gutterClickDeltaPx", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, gutterAriaLabel: { classPropertyName: "gutterAriaLabel", publicName: "gutterAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, restrictMove: { classPropertyName: "restrictMove", publicName: "restrictMove", isSignal: true, isRequired: false, transformFunction: null }, useTransition: { classPropertyName: "useTransition", publicName: "useTransition", isSignal: true, isRequired: false, transformFunction: null }, gutterDblClickDuration: { classPropertyName: "gutterDblClickDuration", publicName: "gutterDblClickDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gutterClick: "gutterClick", gutterDblClick: "gutterDblClick", dragStart: "dragStart", dragEnd: "dragEnd", transitionEnd: "transitionEnd" }, host: { properties: { "class": "this.hostClassesBinding", "dir": "this.hostDirBinding" } }, queries: [{ propertyName: "_areas", predicate: SPLIT_AREA_CONTRACT, isSignal: true }, { propertyName: "customGutter", first: true, predicate: SplitGutterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n@for (area of _areas(); track area) {\n  @if (!$last) {\n    <div\n      #gutter\n      class=\"as-split-gutter\"\n      role=\"separator\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"gutterAriaLabel()\"\n      [attr.aria-orientation]=\"direction()\"\n      [attr.aria-valuemin]=\"getAriaValue(area.minSize())\"\n      [attr.aria-valuemax]=\"getAriaValue(area.maxSize())\"\n      [attr.aria-valuenow]=\"getAriaValue(area._internalSize())\"\n      [attr.aria-valuetext]=\"getAriaAreaSizeText(area)\"\n      [ngStyle]=\"getGutterGridStyle($index + 1)\"\n      [class.as-dragged]=\"draggedGutterIndex() === $index\"\n      asSplitCustomEventsBehavior\n      [asSplitCustomMultiClickThreshold]=\"gutterDblClickDuration()\"\n      [asSplitCustomClickDeltaInPx]=\"gutterClickDeltaPx()\"\n      (asSplitCustomClick)=\"gutterClicked($index)\"\n      (asSplitCustomDblClick)=\"gutterDoubleClicked($index)\"\n      (asSplitCustomMouseDown)=\"gutterMouseDown($event, gutter, $index, $index, $index + 1)\"\n      (asSplitCustomKeyDown)=\"gutterKeyDown($event, $index, $index, $index + 1)\"\n    >\n      @if (customGutter()?.template) {\n        <ng-container *asSplitGutterDynamicInjector=\"$index + 1; let injector\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              customGutter().template;\n              context: {\n                areaBefore: area,\n                areaAfter: _areas()[$index + 1],\n                gutterNum: $index + 1,\n                first: $first,\n                last: $index === _areas().length - 2,\n                isDragged: draggedGutterIndex() === $index\n              };\n              injector: injector\n            \"\n          ></ng-container>\n        </ng-container>\n      } @else {\n        <div class=\"as-split-gutter-icon\"></div>\n      }\n    </div>\n  }\n}\n", styles: ["@property --as-gutter-background-color{syntax: \"<color>\"; inherits: true; initial-value: #eeeeee;}@property --as-gutter-icon-horizontal{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);}@property --as-gutter-icon-vertical{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC);}@property --as-gutter-icon-disabled{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);}@property --as-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .3s;}@property --as-gutter-disabled-cursor{syntax: \"*\"; inherits: true; initial-value: default;}:host{--_as-gutter-background-color: var(--as-gutter-background-color, #eeeeee);--_as-gutter-icon-horizontal: var(--as-gutter-icon-horizontal, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==));--_as-gutter-icon-vertical: var(--as-gutter-icon-vertical, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC));--_as-gutter-icon-disabled: var(--as-gutter-icon-disabled, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==));--_as-transition-duration: var(--as-transition-duration, .3s);--_as-gutter-disabled-cursor: var(--as-gutter-disabled-cursor, default)}:host{display:grid;overflow:hidden;height:100%;width:100%}:host(.as-transition){transition:grid-template var(--_as-transition-duration)}.as-split-gutter{background-color:var(--_as-gutter-background-color);display:flex;align-items:center;justify-content:center;touch-action:none}:host(.as-horizontal)>.as-split-gutter{cursor:col-resize;height:100%}:host(.as-vertical)>.as-split-gutter{cursor:row-resize;width:100%}:host(.as-disabled)>.as-split-gutter{cursor:var(--_as-gutter-disabled-cursor)}.as-split-gutter-icon{width:100%;height:100%;background-position:center center;background-repeat:no-repeat}:host(.as-horizontal)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-horizontal)}:host(.as-vertical)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-vertical)}:host(.as-disabled)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-disabled)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: SplitCustomEventsBehaviorDirective, selector: "[asSplitCustomEventsBehavior]", inputs: ["asSplitCustomMultiClickThreshold", "asSplitCustomClickDeltaInPx"], outputs: ["asSplitCustomMouseDown", "asSplitCustomClick", "asSplitCustomDblClick", "asSplitCustomKeyDown"] }, { kind: "directive", type: SplitGutterDynamicInjectorDirective, selector: "[asSplitGutterDynamicInjector]", inputs: ["asSplitGutterDynamicInjector"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SplitComponent, isStandalone: true, selector: "p-splitter", inputs: { gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, gutterStep: { classPropertyName: "gutterStep", publicName: "gutterStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, gutterClickDeltaPx: { classPropertyName: "gutterClickDeltaPx", publicName: "gutterClickDeltaPx", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, gutterAriaLabel: { classPropertyName: "gutterAriaLabel", publicName: "gutterAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, restrictMove: { classPropertyName: "restrictMove", publicName: "restrictMove", isSignal: true, isRequired: false, transformFunction: null }, useTransition: { classPropertyName: "useTransition", publicName: "useTransition", isSignal: true, isRequired: false, transformFunction: null }, gutterDblClickDuration: { classPropertyName: "gutterDblClickDuration", publicName: "gutterDblClickDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gutterClick: "gutterClick", gutterDblClick: "gutterDblClick", dragStart: "dragStart", dragEnd: "dragEnd", transitionEnd: "transitionEnd" }, host: { properties: { "class": "this.hostClassesBinding", "dir": "this.hostDirBinding" } }, queries: [{ propertyName: "_areas", predicate: SPLIT_AREA_CONTRACT, isSignal: true }, { propertyName: "customGutter", first: true, predicate: SplitGutterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n@for (area of _areas(); track area) {\n  @if (!$last) {\n    <div\n      #gutter\n      class=\"as-split-gutter\"\n      role=\"separator\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"gutterAriaLabel()\"\n      [attr.aria-orientation]=\"direction()\"\n      [attr.aria-valuemin]=\"getAriaValue(area.minSize())\"\n      [attr.aria-valuemax]=\"getAriaValue(area.maxSize())\"\n      [attr.aria-valuenow]=\"getAriaValue(area._internalSize())\"\n      [attr.aria-valuetext]=\"getAriaAreaSizeText(area)\"\n      [ngStyle]=\"getGutterGridStyle($index + 1)\"\n      [class.as-dragged]=\"draggedGutterIndex() === $index\"\n      asSplitCustomEventsBehavior\n      [asSplitCustomMultiClickThreshold]=\"gutterDblClickDuration()\"\n      [asSplitCustomClickDeltaInPx]=\"gutterClickDeltaPx()\"\n      (asSplitCustomClick)=\"gutterClicked($index)\"\n      (asSplitCustomDblClick)=\"gutterDoubleClicked($index)\"\n      (asSplitCustomMouseDown)=\"gutterMouseDown($event, gutter, $index, $index, $index + 1)\"\n      (asSplitCustomKeyDown)=\"gutterKeyDown($event, $index, $index, $index + 1)\"\n    >\n      @if (customGutter()?.template) {\n        <ng-container *asSplitGutterDynamicInjector=\"$index + 1; let injector\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              customGutter().template;\n              context: {\n                areaBefore: area,\n                areaAfter: _areas()[$index + 1],\n                gutterNum: $index + 1,\n                first: $first,\n                last: $index === _areas().length - 2,\n                isDragged: draggedGutterIndex() === $index\n              };\n              injector: injector\n            \"\n          ></ng-container>\n        </ng-container>\n      } @else {\n        <div class=\"as-split-gutter-icon\"></div>\n      }\n    </div>\n  }\n}\n", styles: ["@property --as-gutter-background-color{syntax: \"<color>\"; inherits: true; initial-value: #eeeeee;}@property --as-gutter-icon-horizontal{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);}@property --as-gutter-icon-vertical{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC);}@property --as-gutter-icon-disabled{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);}@property --as-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .3s;}@property --as-gutter-disabled-cursor{syntax: \"*\"; inherits: true; initial-value: default;}:host{--_as-gutter-background-color: var(--as-gutter-background-color, #eeeeee);--_as-gutter-icon-horizontal: var(--as-gutter-icon-horizontal, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==));--_as-gutter-icon-vertical: var(--as-gutter-icon-vertical, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC));--_as-gutter-icon-disabled: var(--as-gutter-icon-disabled, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==));--_as-transition-duration: var(--as-transition-duration, .3s);--_as-gutter-disabled-cursor: var(--as-gutter-disabled-cursor, default);display:grid;overflow:hidden;height:100%;width:100%}:host(.as-transition){transition:grid-template var(--_as-transition-duration)}.as-split-gutter{background-color:var(--_as-gutter-background-color);display:flex;align-items:center;justify-content:center;touch-action:none}:host(.as-horizontal)>.as-split-gutter{cursor:col-resize;height:100%}:host(.as-vertical)>.as-split-gutter{cursor:row-resize;width:100%}:host(.as-disabled)>.as-split-gutter{cursor:var(--_as-gutter-disabled-cursor)}.as-split-gutter-icon{width:100%;height:100%;background-position:center center;background-repeat:no-repeat}:host(.as-horizontal)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-horizontal)}:host(.as-vertical)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-vertical)}:host(.as-disabled)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-disabled)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: SplitCustomEventsBehaviorDirective, selector: "[asSplitCustomEventsBehavior]", inputs: ["asSplitCustomMultiClickThreshold", "asSplitCustomClickDeltaInPx"], outputs: ["asSplitCustomMouseDown", "asSplitCustomClick", "asSplitCustomDblClick", "asSplitCustomKeyDown"] }, { kind: "directive", type: SplitGutterDynamicInjectorDirective, selector: "[asSplitGutterDynamicInjector]", inputs: ["asSplitGutterDynamicInjector"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SplitComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'p-splitter', imports: [NgStyle, SplitCustomEventsBehaviorDirective, SplitGutterDynamicInjectorDirective, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n@for (area of _areas(); track area) {\n  @if (!$last) {\n    <div\n      #gutter\n      class=\"as-split-gutter\"\n      role=\"separator\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"gutterAriaLabel()\"\n      [attr.aria-orientation]=\"direction()\"\n      [attr.aria-valuemin]=\"getAriaValue(area.minSize())\"\n      [attr.aria-valuemax]=\"getAriaValue(area.maxSize())\"\n      [attr.aria-valuenow]=\"getAriaValue(area._internalSize())\"\n      [attr.aria-valuetext]=\"getAriaAreaSizeText(area)\"\n      [ngStyle]=\"getGutterGridStyle($index + 1)\"\n      [class.as-dragged]=\"draggedGutterIndex() === $index\"\n      asSplitCustomEventsBehavior\n      [asSplitCustomMultiClickThreshold]=\"gutterDblClickDuration()\"\n      [asSplitCustomClickDeltaInPx]=\"gutterClickDeltaPx()\"\n      (asSplitCustomClick)=\"gutterClicked($index)\"\n      (asSplitCustomDblClick)=\"gutterDoubleClicked($index)\"\n      (asSplitCustomMouseDown)=\"gutterMouseDown($event, gutter, $index, $index, $index + 1)\"\n      (asSplitCustomKeyDown)=\"gutterKeyDown($event, $index, $index, $index + 1)\"\n    >\n      @if (customGutter()?.template) {\n        <ng-container *asSplitGutterDynamicInjector=\"$index + 1; let injector\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              customGutter().template;\n              context: {\n                areaBefore: area,\n                areaAfter: _areas()[$index + 1],\n                gutterNum: $index + 1,\n                first: $first,\n                last: $index === _areas().length - 2,\n                isDragged: draggedGutterIndex() === $index\n              };\n              injector: injector\n            \"\n          ></ng-container>\n        </ng-container>\n      } @else {\n        <div class=\"as-split-gutter-icon\"></div>\n      }\n    </div>\n  }\n}\n", styles: ["@property --as-gutter-background-color{syntax: \"<color>\"; inherits: true; initial-value: #eeeeee;}@property --as-gutter-icon-horizontal{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);}@property --as-gutter-icon-vertical{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC);}@property --as-gutter-icon-disabled{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);}@property --as-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .3s;}@property --as-gutter-disabled-cursor{syntax: \"*\"; inherits: true; initial-value: default;}:host{--_as-gutter-background-color: var(--as-gutter-background-color, #eeeeee);--_as-gutter-icon-horizontal: var(--as-gutter-icon-horizontal, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==));--_as-gutter-icon-vertical: var(--as-gutter-icon-vertical, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC));--_as-gutter-icon-disabled: var(--as-gutter-icon-disabled, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==));--_as-transition-duration: var(--as-transition-duration, .3s);--_as-gutter-disabled-cursor: var(--as-gutter-disabled-cursor, default)}:host{display:grid;overflow:hidden;height:100%;width:100%}:host(.as-transition){transition:grid-template var(--_as-transition-duration)}.as-split-gutter{background-color:var(--_as-gutter-background-color);display:flex;align-items:center;justify-content:center;touch-action:none}:host(.as-horizontal)>.as-split-gutter{cursor:col-resize;height:100%}:host(.as-vertical)>.as-split-gutter{cursor:row-resize;width:100%}:host(.as-disabled)>.as-split-gutter{cursor:var(--_as-gutter-disabled-cursor)}.as-split-gutter-icon{width:100%;height:100%;background-position:center center;background-repeat:no-repeat}:host(.as-horizontal)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-horizontal)}:host(.as-vertical)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-vertical)}:host(.as-disabled)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-disabled)}\n"] }]
+            args: [{ selector: 'p-splitter', imports: [NgStyle, SplitCustomEventsBehaviorDirective, SplitGutterDynamicInjectorDirective, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n@for (area of _areas(); track area) {\n  @if (!$last) {\n    <div\n      #gutter\n      class=\"as-split-gutter\"\n      role=\"separator\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"gutterAriaLabel()\"\n      [attr.aria-orientation]=\"direction()\"\n      [attr.aria-valuemin]=\"getAriaValue(area.minSize())\"\n      [attr.aria-valuemax]=\"getAriaValue(area.maxSize())\"\n      [attr.aria-valuenow]=\"getAriaValue(area._internalSize())\"\n      [attr.aria-valuetext]=\"getAriaAreaSizeText(area)\"\n      [ngStyle]=\"getGutterGridStyle($index + 1)\"\n      [class.as-dragged]=\"draggedGutterIndex() === $index\"\n      asSplitCustomEventsBehavior\n      [asSplitCustomMultiClickThreshold]=\"gutterDblClickDuration()\"\n      [asSplitCustomClickDeltaInPx]=\"gutterClickDeltaPx()\"\n      (asSplitCustomClick)=\"gutterClicked($index)\"\n      (asSplitCustomDblClick)=\"gutterDoubleClicked($index)\"\n      (asSplitCustomMouseDown)=\"gutterMouseDown($event, gutter, $index, $index, $index + 1)\"\n      (asSplitCustomKeyDown)=\"gutterKeyDown($event, $index, $index, $index + 1)\"\n    >\n      @if (customGutter()?.template) {\n        <ng-container *asSplitGutterDynamicInjector=\"$index + 1; let injector\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              customGutter().template;\n              context: {\n                areaBefore: area,\n                areaAfter: _areas()[$index + 1],\n                gutterNum: $index + 1,\n                first: $first,\n                last: $index === _areas().length - 2,\n                isDragged: draggedGutterIndex() === $index\n              };\n              injector: injector\n            \"\n          ></ng-container>\n        </ng-container>\n      } @else {\n        <div class=\"as-split-gutter-icon\"></div>\n      }\n    </div>\n  }\n}\n", styles: ["@property --as-gutter-background-color{syntax: \"<color>\"; inherits: true; initial-value: #eeeeee;}@property --as-gutter-icon-horizontal{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);}@property --as-gutter-icon-vertical{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC);}@property --as-gutter-icon-disabled{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);}@property --as-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .3s;}@property --as-gutter-disabled-cursor{syntax: \"*\"; inherits: true; initial-value: default;}:host{--_as-gutter-background-color: var(--as-gutter-background-color, #eeeeee);--_as-gutter-icon-horizontal: var(--as-gutter-icon-horizontal, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==));--_as-gutter-icon-vertical: var(--as-gutter-icon-vertical, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC));--_as-gutter-icon-disabled: var(--as-gutter-icon-disabled, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==));--_as-transition-duration: var(--as-transition-duration, .3s);--_as-gutter-disabled-cursor: var(--as-gutter-disabled-cursor, default);display:grid;overflow:hidden;height:100%;width:100%}:host(.as-transition){transition:grid-template var(--_as-transition-duration)}.as-split-gutter{background-color:var(--_as-gutter-background-color);display:flex;align-items:center;justify-content:center;touch-action:none}:host(.as-horizontal)>.as-split-gutter{cursor:col-resize;height:100%}:host(.as-vertical)>.as-split-gutter{cursor:row-resize;width:100%}:host(.as-disabled)>.as-split-gutter{cursor:var(--_as-gutter-disabled-cursor)}.as-split-gutter-icon{width:100%;height:100%;background-position:center center;background-repeat:no-repeat}:host(.as-horizontal)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-horizontal)}:host(.as-vertical)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-vertical)}:host(.as-disabled)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-disabled)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _areas: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SPLIT_AREA_CONTRACT), { isSignal: true }] }], customGutter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitGutterDirective), { isSignal: true }] }], gutterSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterSize", required: false }] }], gutterStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterStep", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], gutterClickDeltaPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterClickDeltaPx", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], gutterAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterAriaLabel", required: false }] }], restrictMove: [{ type: i0.Input, args: [{ isSignal: true, alias: "restrictMove", required: false }] }], useTransition: [{ type: i0.Input, args: [{ isSignal: true, alias: "useTransition", required: false }] }], gutterDblClickDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterDblClickDuration", required: false }] }], gutterClick: [{ type: i0.Output, args: ["gutterClick"] }], gutterDblClick: [{ type: i0.Output, args: ["gutterDblClick"] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], transitionEnd: [{ type: i0.Output, args: ["transitionEnd"] }], hostClassesBinding: [{
                 type: HostBinding,
                 args: ['class']
@@ -3188,7 +3216,7 @@ class SplitAreaComponent {
     /**
      * Indice corrente per index, usato per posizionamento o navigazione nel componente.
      */
-    index = computed(() => this.split._areas().findIndex((area) => area === this), ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    index = computed(() => this.split._areas().indexOf(this), ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
     /**
      * Proprieta di stato del componente per grid area num, usata dalla logica interna e dal template.
      */
@@ -3352,6 +3380,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.
      */
@@ -3437,7 +3482,7 @@ class DynamicDashboardTemplateComponent {
         let cache = [];
         let str = JSON.stringify(obj, function (key, value) {
             if (typeof value === "object" && value !== null) {
-                if (cache.indexOf(value) !== -1) {
+                if (cache.includes(value)) {
                     // Circular reference found, discard key
                     return;
                 }
@@ -3456,12 +3501,8 @@ class DynamicDashboardTemplateComponent {
   * @param parentElement Parametro utilizzato dal metodo nel flusso elaborativo.
   */
     onResizing(event, element, parentElement) {
-        if (parentElement) {
-        }
-        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();
@@ -3472,13 +3513,9 @@ class DynamicDashboardTemplateComponent {
   * @param element Parametro utilizzato dal metodo nel flusso elaborativo.
   */
     onMoving($event, element) {
-        // debugger;
-        // element.inputs.left = $event.position.x + 'px';
-        // element.inputs.top = $event.position.y + 'px';
-        // element.inputs.position = 'absolute';
         let scaleX = 1, skewY = 0, skewX = 0, scaleY = 1;
         if (element.inputs.transform) {
-            let matrix = element.inputs.transform.replace('matrix(', '').replace(')', '').split(',').map(x => parseFloat(x));
+            let matrix = element.inputs.transform.replace('matrix(', '').replace(')', '').split(',').map(x => Number.parseFloat(x));
             if (matrix.length >= 1) {
                 scaleX = matrix[0];
             }
@@ -3492,6 +3529,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.
@@ -3624,7 +3666,7 @@ class DynamicDashboardTemplateComponent {
      * Abilita drag/drop solo in contesto designer.
      */
     isDesignerMode() {
-        const hash = String(window?.location?.hash || '').toLowerCase();
+        const hash = String(globalThis?.location?.hash || '').toLowerCase();
         return hash.includes('/designer');
     }
     /**
@@ -3640,9 +3682,9 @@ class DynamicDashboardTemplateComponent {
      */
     static getComponentFromTemplate(template, route, templateField) {
         const normalizedTemplate = String(template || '')
-            .replace(/wuic-parametric-dialog(?!-lazy)/g, 'wuic-parametric-dialog-lazy')
-            .replace(/ngxDraggableDom\s*=\s*\"true\"/g, '[ngxDraggableDom]="isDesignerMode()"')
-            .replace(/ngxDraggableDom\s*=\s*\'true\'/g, '[ngxDraggableDom]="isDesignerMode()"');
+            .replaceAll(/wuic-parametric-dialog(?!-lazy)/g, 'wuic-parametric-dialog-lazy')
+            .replaceAll(/ngxDraggableDom\s*=\s*"true"/g, '[ngxDraggableDom]="isDesignerMode()"')
+            .replaceAll(/ngxDraggableDom\s*=\s*'true'/g, '[ngxDraggableDom]="isDesignerMode()"');
         return DynamicCompilerService.compile({
             template: normalizedTemplate,
             baseClass: DynamicDashboardTemplateComponent,
@@ -3724,6 +3766,36 @@ class DashboardComponent {
      * Input dal componente padre per dashboard elements; usata nella configurazione e nel rendering del componente.
      */
     dashboardElements;
+    /**
+     * Chrome "card" opzionale per i widget top-level (surface + bordo + radius
+     * + shadow dai token --wuic-*). Opt-in dal boardcontent wrapper-object
+     * (`{"widgetChrome": true, "dashboardElements": [...]}`): default false per
+     * non alterare l'aspetto delle dashboard esistenti. Parser tollerante
+     * boolean-like come le altre config archetype.
+     */
+    widgetChrome = false;
+    get hasWidgetChrome() {
+        const v = this.widgetChrome;
+        return v === true || v === 1 || String(v).trim().toLowerCase() === 'true' || String(v).trim() === '1';
+    }
+    /**
+     * 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 +3827,21 @@ 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", widgetChrome: "widgetChrome" }, host: { properties: { "class.wuic-dashboard-widget-chrome": "this.hasWidgetChrome", "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%}:host(.wuic-dashboard-widget-chrome){display:block;padding:var(--wuic-space-3, 16px)}:host(.wuic-dashboard-widget-chrome)>:not(wuic-data-source):not(.datasource-descriptor){display:block;background:var(--wuic-surface, #ffffff);border:1px solid var(--wuic-border-soft, #e6ebf2);border-radius:var(--wuic-radius-lg, 10px);box-shadow:var(--wuic-shadow-1, 0 1px 3px rgba(15, 23, 42, .08));padding:var(--wuic-space-3, 16px);margin-bottom:var(--wuic-space-3, 16px)}\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%}:host(.wuic-dashboard-widget-chrome){display:block;padding:var(--wuic-space-3, 16px)}:host(.wuic-dashboard-widget-chrome)>:not(wuic-data-source):not(.datasource-descriptor){display:block;background:var(--wuic-surface, #ffffff);border:1px solid var(--wuic-border-soft, #e6ebf2);border-radius:var(--wuic-radius-lg, 10px);box-shadow:var(--wuic-shadow-1, 0 1px 3px rgba(15, 23, 42, .08));padding:var(--wuic-space-3, 16px);margin-bottom:var(--wuic-space-3, 16px)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dashboardElements: [{
                 type: Input
+            }], widgetChrome: [{
+                type: Input
+            }], hasWidgetChrome: [{
+                type: HostBinding,
+                args: ['class.wuic-dashboard-widget-chrome']
+            }], hasAbsoluteLayout: [{
+                type: HostBinding,
+                args: ['class.wuic-dashboard-absolute-layout']
             }] } });
 
 class CssSheetEditorComponent {
@@ -3829,8 +3909,8 @@ class CssSheetEditorComponent {
         if (!this.valore) {
             this.valore = '#FFFFFF';
         }
-        this.pickerValue = this.toHsbaModel(this.valore);
-        this.alphaValue = this.clampAlpha(this.pickerValue?.a);
+        this.pickerValue = toHsbaModel(this.valore);
+        this.alphaValue = clampAlpha(this.pickerValue?.a);
     }
     /**
   * Gestisce i cambiamenti degli input aggiornando lo stato derivato e le dipendenze del componente.
@@ -4038,11 +4118,11 @@ class CssSheetEditorComponent {
     onPendingColorChanged(value) {
         const raw = value;
         const hsba = {
-            ...(raw || {}),
-            a: this.clampAlpha(raw?.a ?? this.alphaValue)
+            ...(raw),
+            a: clampAlpha(raw?.a ?? this.alphaValue)
         };
-        this.alphaValue = this.clampAlpha(hsba?.a);
-        const newValue = this.toPersistedColor(raw);
+        this.alphaValue = clampAlpha(hsba?.a);
+        const newValue = toPersistedColor(raw, this.alphaValue);
         this.pickerValue = raw;
         this.pendingStyleValue = this.valore = newValue;
     }
@@ -4144,7 +4224,7 @@ class CssSheetEditorComponent {
   * @returns Stringa risultante calcolata da `normalizePath` per chiavi/label o valori testuali.
   */
     normalizePath(path) {
-        return String(path || '').trim().replace(/\\/g, '/');
+        return String(path || '').trim().replaceAll('\\', '/');
     }
     /**
   * Costruisce il payload/struttura risultante in `buildAssetSheetPath` partendo dai dati correnti.
@@ -4160,11 +4240,11 @@ class CssSheetEditorComponent {
         if (normalizedName.includes('/') || normalizedName.includes('\\')) {
             return '';
         }
-        normalizedName = normalizedName.replace(/\s+/g, '-');
+        normalizedName = normalizedName.replaceAll(/\s+/g, '-');
         if (!normalizedName.toLowerCase().endsWith('.css')) {
             normalizedName += '.css';
         }
-        const folder = String(this.assetsFolder || '').trim().replace(/\\/g, '/').replace(/^\/+|\/+$/g, '');
+        const folder = String(this.assetsFolder || '').trim().replaceAll('\\', '/').replaceAll(/^\/+|\/+$/g, '');
         if (!folder) {
             return '';
         }
@@ -4208,167 +4288,16 @@ class CssSheetEditorComponent {
         return found || null;
     }
     async onAlphaChange(rawAlpha) {
-        this.alphaValue = this.clampAlpha(rawAlpha);
+        this.alphaValue = clampAlpha(rawAlpha);
         this.pickerValue = {
-            ...(this.pickerValue || {}),
+            ...(this.pickerValue),
             a: this.alphaValue
         };
-        const newValue = this.toPersistedColor(this.pickerValue);
+        const newValue = toPersistedColor(this.pickerValue, this.alphaValue);
         this.pendingStyleValue = this.valore = newValue;
     }
-    toPersistedColor(raw) {
-        if (raw === undefined || raw === null) {
-            return '';
-        }
-        if (typeof raw === 'string') {
-            return raw.trim();
-        }
-        const h = Number(raw?.h);
-        const s = Number(raw?.s);
-        const b = Number(raw?.b);
-        let a = Number(raw?.a);
-        if (!Number.isFinite(h) || !Number.isFinite(s) || !Number.isFinite(b)) {
-            return String(raw);
-        }
-        if (!Number.isFinite(a)) {
-            a = this.alphaValue;
-        }
-        a = this.clampAlpha(a);
-        return this.hsbaToRgbaString(h, s, b, a);
-    }
-    toHsbaModel(value) {
-        const fallback = { h: 0, s: 0, b: 100, a: 1 };
-        if (value === undefined || value === null) {
-            return fallback;
-        }
-        if (typeof value === 'object' && value?.h !== undefined && value?.s !== undefined && value?.b !== undefined) {
-            return {
-                h: Number(value.h) || 0,
-                s: Number(value.s) || 0,
-                b: Number(value.b) || 0,
-                a: Number.isFinite(Number(value.a)) ? Number(value.a) : 1
-            };
-        }
-        const str = String(value).trim();
-        if (!str) {
-            return fallback;
-        }
-        const rgbMatch = str.match(/^rgba?\(([^)]+)\)$/i);
-        if (rgbMatch) {
-            const parts = rgbMatch[1].split(',').map((x) => x.trim());
-            const r = Number(parts[0]);
-            const g = Number(parts[1]);
-            const b = Number(parts[2]);
-            const a = parts.length > 3 ? Number(parts[3]) : 1;
-            if (Number.isFinite(r) && Number.isFinite(g) && Number.isFinite(b)) {
-                return this.rgbaToHsbaModel(r, g, b, Number.isFinite(a) ? a : 1);
-            }
-            return fallback;
-        }
-        const hex = str.replace('#', '');
-        if (/^[0-9a-f]{3,8}$/i.test(hex)) {
-            const normalized = hex.length === 3
-                ? hex.split('').map((x) => `${x}${x}`).join('') + 'ff'
-                : hex.length === 4
-                    ? hex.split('').map((x) => `${x}${x}`).join('')
-                    : hex.length === 6
-                        ? `${hex}ff`
-                        : hex;
-            const r = parseInt(normalized.slice(0, 2), 16);
-            const g = parseInt(normalized.slice(2, 4), 16);
-            const b = parseInt(normalized.slice(4, 6), 16);
-            const a = parseInt(normalized.slice(6, 8), 16) / 255;
-            return this.rgbaToHsbaModel(r, g, b, a);
-        }
-        return fallback;
-    }
-    rgbaToHsbaModel(rRaw, gRaw, bRaw, aRaw) {
-        const r = Math.max(0, Math.min(255, rRaw)) / 255;
-        const g = Math.max(0, Math.min(255, gRaw)) / 255;
-        const b = Math.max(0, Math.min(255, bRaw)) / 255;
-        const a = Math.max(0, Math.min(1, aRaw));
-        const max = Math.max(r, g, b);
-        const min = Math.min(r, g, b);
-        const delta = max - min;
-        let h = 0;
-        if (delta !== 0) {
-            if (max === r) {
-                h = 60 * (((g - b) / delta) % 6);
-            }
-            else if (max === g) {
-                h = 60 * (((b - r) / delta) + 2);
-            }
-            else {
-                h = 60 * (((r - g) / delta) + 4);
-            }
-        }
-        if (h < 0) {
-            h += 360;
-        }
-        const s = max === 0 ? 0 : (delta / max) * 100;
-        const v = max * 100;
-        return {
-            h: Math.round(h),
-            s: Math.round(s),
-            b: Math.round(v),
-            a: Number(a.toFixed(3))
-        };
-    }
-    hsbaToRgbaString(hRaw, sRaw, bRaw, aRaw) {
-        const h = ((hRaw % 360) + 360) % 360;
-        const s = Math.max(0, Math.min(100, sRaw)) / 100;
-        const v = Math.max(0, Math.min(100, bRaw)) / 100;
-        const a = Math.max(0, Math.min(1, aRaw));
-        const c = v * s;
-        const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
-        const m = v - c;
-        let r1 = 0;
-        let g1 = 0;
-        let b1 = 0;
-        if (h < 60) {
-            r1 = c;
-            g1 = x;
-            b1 = 0;
-        }
-        else if (h < 120) {
-            r1 = x;
-            g1 = c;
-            b1 = 0;
-        }
-        else if (h < 180) {
-            r1 = 0;
-            g1 = c;
-            b1 = x;
-        }
-        else if (h < 240) {
-            r1 = 0;
-            g1 = x;
-            b1 = c;
-        }
-        else if (h < 300) {
-            r1 = x;
-            g1 = 0;
-            b1 = c;
-        }
-        else {
-            r1 = c;
-            g1 = 0;
-            b1 = x;
-        }
-        const r = Math.round((r1 + m) * 255);
-        const g = Math.round((g1 + m) * 255);
-        const b = Math.round((b1 + m) * 255);
-        return `rgba(${r}, ${g}, ${b}, ${Number(a.toFixed(3))})`;
-    }
-    clampAlpha(value) {
-        const parsed = Number(value);
-        if (!Number.isFinite(parsed)) {
-            return 1;
-        }
-        return Math.max(0, Math.min(1, parsed));
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CssSheetEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CssSheetEditorComponent, isStandalone: true, selector: "wuic-css-sheet-editor", inputs: { visible: "visible", sheets: "sheets", selectedSheetPath: "selectedSheetPath", styleProps: "styleProps", assetsFolder: "assetsFolder" }, outputs: { visibleChange: "visibleChange", applyEditor: "applyEditor" }, usesOnChanges: true, ngImport: i0, template: "<p-dialog [header]=\"'CSS Editor'\" [(visible)]=\"visible\" (visibleChange)=\"visibleChange.emit($event)\" [modal]=\"true\"\n  [closable]=\"true\" [style]=\"{ width: '1100px', maxWidth: '98vw' }\">\n  <div class=\"css-editor-layout\">\n    <div class=\"css-editor-col\">\n      <div class=\"css-editor-row\">\n        <label>File CSS</label>\n        <p-select [options]=\"draftSheets\" optionLabel=\"SheetPath\" optionValue=\"SheetPath\"\n          [(ngModel)]=\"selectedSheetPathDraft\" (ngModelChange)=\"onSelectedSheetChanged()\" appendTo=\"body\"\n          [style]=\"{ width: '100%' }\">\n        </p-select>\n      </div>\n      <div class=\"css-editor-row css-editor-inline\">\n        <input type=\"text\" [(ngModel)]=\"newSheetName\" pattern=\"^[^/\\\\]+$\"\n          [placeholder]=\"'Nuovo file in assets/' + (assetsFolder || '<dash_route>') + ' (solo nome, es. dashboard-custom.css)'\" />\n        <p-button label=\"Crea file\" (onClick)=\"addSheet()\" [disabled]=\"!assetsFolder\"></p-button>\n      </div>\n      @if (!assetsFolder) {\n      <div class=\"css-editor-row\">\n        <small>Salva prima la dashboard per definire il folder (dash_route).</small>\n      </div>\n      }\n      <div class=\"css-editor-row\">\n        <p-button severity=\"danger\" label=\"Rimuovi file selezionato\" (onClick)=\"removeSelectedSheet()\"\n          [disabled]=\"!currentSheet\"></p-button>\n      </div>\n    </div>\n\n    @if (currentSheet) {\n    <div class=\"css-editor-col\">\n      <div class=\"css-editor-row\">\n        <label>Classi</label>\n        <p-select [options]=\"currentSheet?.classes || []\" optionLabel=\"SelectorString\" optionValue=\"SelectorString\"\n          [(ngModel)]=\"selectedClassSelector\" (ngModelChange)=\"onSelectedClassChanged()\" appendTo=\"body\"\n          [style]=\"{ width: '100%' }\">\n        </p-select>\n      </div>\n      <div class=\"css-editor-row css-editor-inline\">\n        <input type=\"text\" [(ngModel)]=\"newClassName\" placeholder=\"Nuova classe (es. card-title)\" />\n        <p-button label=\"Crea classe\" (onClick)=\"addClassToSelectedSheet()\" [disabled]=\"!currentSheet\"></p-button>\n      </div>\n      <div class=\"css-editor-row\">\n        <p-button severity=\"danger\" label=\"Rimuovi classe selezionata\" (onClick)=\"removeSelectedClass()\"\n          [disabled]=\"!currentClass\"></p-button>\n      </div>\n    </div>\n    }\n  </div>\n\n  @if (currentClass) {\n  <div class=\"css-editor-styles\">\n    <div class=\"css-editor-row css-style-row\" style=\"margin-bottom: 8px;\">\n      <p-select [options]=\"styleProps\" optionLabel=\"key\" optionValue=\"key\" [(ngModel)]=\"pendingStyleKey\"\n        (ngModelChange)=\"onPendingStyleKeyChanged()\" appendTo=\"body\" [style]=\"{ width: '260px' }\">\n      </p-select>\n\n      @if (isPropertyDictionary(pendingStyleKey)) {\n      <p-select [options]=\"getPropertyValues(pendingStyleKey)\" [(ngModel)]=\"pendingStyleValue\" appendTo=\"body\"\n        [style]=\"{ width: '320px' }\">\n      </p-select>\n      } @else if (isPropertyColor(pendingStyleKey)) {\n\n      <div class=\"css-style-color-input\">\n        <div class=\"color-editor-root\" [ngStyle]=\"{ '--wuic-color-editor-preview': valore || 'transparent' }\">\n          <p-colorPicker format=\"hsb\" [ngModel]=\"pickerValue\" (ngModelChange)=\"onPendingColorChanged($event)\"\n            appendTo=\"body\">\n          </p-colorPicker>\n        </div>\n        <input type=\"text\" [(ngModel)]=\"pendingStyleValue\" style=\"width: 252px;\" />\n      </div>\n      <div class=\"color-editor-alpha-row\">\n        <label class=\"color-editor-alpha-label\">Alpha</label>\n        <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" [ngModel]=\"alphaValue\"\n          (ngModelChange)=\"onAlphaChange($event)\" />\n        <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\" [ngModel]=\"alphaValue\"\n          (ngModelChange)=\"onAlphaChange($event)\" />\n      </div>\n\n      } @else {\n      <input type=\"text\" [(ngModel)]=\"pendingStyleValue\" style=\"width: 320px;\" />\n      }\n\n      <p-button label=\"Aggiungi propriet\u00E0 corrente\" (onClick)=\"addStyleToSelectedClass()\"\n        [disabled]=\"!currentClass || !pendingStyleKey\"></p-button>\n    </div>\n\n    @for (style of currentClass.Styles; track style; let i = $index) {\n    <div class=\"css-style-row\">\n      <div class=\"css-style-readonly-key\">{{ style.Key }}</div>\n      <div class=\"css-style-readonly-value\">{{ style.Value }}</div>\n\n      <p-button icon=\"pi pi-trash\" severity=\"danger\" [text]=\"true\" (onClick)=\"removeStyle(i)\"></p-button>\n    </div>\n    }\n  </div>\n  }\n\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Chiudi\" severity=\"secondary\" (onClick)=\"close()\"></p-button>\n  </ng-template>\n</p-dialog>", styles: [".css-editor-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.css-editor-col{border:1px solid #d0d0d0;border-radius:6px;padding:12px}.css-editor-row{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}.css-editor-inline{flex-direction:row;align-items:center}.css-editor-inline input{flex:1}.css-editor-styles{border:1px solid #d0d0d0;border-radius:6px;padding:12px;max-height:420px;overflow:auto}.css-style-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.css-style-readonly-key{width:260px;min-height:32px;display:flex;align-items:center;padding:0 8px;border:1px solid #d0d0d0;border-radius:4px;background:#f9f9f9;font-family:monospace}.css-style-readonly-value{width:320px;min-height:32px;display:flex;align-items:center;padding:0 8px;border:1px solid #d0d0d0;border-radius:4px;background:#f9f9f9;font-family:monospace}.css-style-color-input{display:flex;align-items:center;gap:8px;width:320px}@media(max-width:1024px){.css-editor-layout{grid-template-columns:1fr}.css-style-row{flex-wrap:wrap}}.color-editor-root{--wuic-color-editor-preview: transparent;border:solid 1px}:host ::ng-deep .color-editor-root .p-colorpicker-preview{background-image:linear-gradient(var(--wuic-color-editor-preview),var(--wuic-color-editor-preview)),linear-gradient(45deg,#d5d9e2 25%,transparent 25%),linear-gradient(-45deg,#d5d9e2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d5d9e2 75%),linear-gradient(-45deg,transparent 75%,#d5d9e2 75%)!important;background-size:10px 10px!important;background-position:0 0,0 5px,5px -5px,-5px 0!important;background-color:transparent!important}.color-editor-alpha-row{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}.color-editor-alpha-label{min-width:2.8rem;font-size:.85rem}.color-editor-alpha-row input[type=range]{flex:1 1 auto}.color-editor-alpha-row input[type=number]{width:4.5rem}\n"], dependencies: [{ 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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: 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: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: 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: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CssSheetEditorComponent, isStandalone: true, selector: "wuic-css-sheet-editor", inputs: { visible: "visible", sheets: "sheets", selectedSheetPath: "selectedSheetPath", styleProps: "styleProps", assetsFolder: "assetsFolder" }, outputs: { visibleChange: "visibleChange", applyEditor: "applyEditor" }, usesOnChanges: true, ngImport: i0, template: "<p-dialog [header]=\"'CSS Editor'\" [(visible)]=\"visible\" (visibleChange)=\"visibleChange.emit($event)\" [modal]=\"true\"\n  [closable]=\"true\" [style]=\"{ width: '1100px', maxWidth: '98vw' }\">\n  <div class=\"css-editor-layout\">\n    <div class=\"css-editor-col\">\n      <div class=\"css-editor-row\">\n        <label>File CSS</label>\n        <p-select [options]=\"draftSheets\" optionLabel=\"SheetPath\" optionValue=\"SheetPath\"\n          [(ngModel)]=\"selectedSheetPathDraft\" (ngModelChange)=\"onSelectedSheetChanged()\" appendTo=\"body\"\n          [style]=\"{ width: '100%' }\">\n        </p-select>\n      </div>\n      <div class=\"css-editor-row css-editor-inline\">\n        <input type=\"text\" [(ngModel)]=\"newSheetName\" pattern=\"^[^/\\\\]+$\"\n          [placeholder]=\"'Nuovo file in assets/' + (assetsFolder || '<dash_route>') + ' (solo nome, es. dashboard-custom.css)'\" />\n        <p-button label=\"Crea file\" (onClick)=\"addSheet()\" [disabled]=\"!assetsFolder\"></p-button>\n      </div>\n      @if (!assetsFolder) {\n      <div class=\"css-editor-row\">\n        <small>Salva prima la dashboard per definire il folder (dash_route).</small>\n      </div>\n      }\n      <div class=\"css-editor-row\">\n        <p-button severity=\"danger\" label=\"Rimuovi file selezionato\" (onClick)=\"removeSelectedSheet()\"\n          [disabled]=\"!currentSheet\"></p-button>\n      </div>\n    </div>\n\n    @if (currentSheet) {\n    <div class=\"css-editor-col\">\n      <div class=\"css-editor-row\">\n        <label>Classi</label>\n        <p-select [options]=\"currentSheet?.classes || []\" optionLabel=\"SelectorString\" optionValue=\"SelectorString\"\n          [(ngModel)]=\"selectedClassSelector\" (ngModelChange)=\"onSelectedClassChanged()\" appendTo=\"body\"\n          [style]=\"{ width: '100%' }\">\n        </p-select>\n      </div>\n      <div class=\"css-editor-row css-editor-inline\">\n        <input type=\"text\" [(ngModel)]=\"newClassName\" placeholder=\"Nuova classe (es. card-title)\" />\n        <p-button label=\"Crea classe\" (onClick)=\"addClassToSelectedSheet()\" [disabled]=\"!currentSheet\"></p-button>\n      </div>\n      <div class=\"css-editor-row\">\n        <p-button severity=\"danger\" label=\"Rimuovi classe selezionata\" (onClick)=\"removeSelectedClass()\"\n          [disabled]=\"!currentClass\"></p-button>\n      </div>\n    </div>\n    }\n  </div>\n\n  @if (currentClass) {\n  <div class=\"css-editor-styles\">\n    <div class=\"css-editor-row css-style-row\" style=\"margin-bottom: 8px;\">\n      <p-select [options]=\"styleProps\" optionLabel=\"key\" optionValue=\"key\" [(ngModel)]=\"pendingStyleKey\"\n        (ngModelChange)=\"onPendingStyleKeyChanged()\" appendTo=\"body\" [style]=\"{ width: '260px' }\">\n      </p-select>\n\n      @if (isPropertyDictionary(pendingStyleKey)) {\n      <p-select [options]=\"getPropertyValues(pendingStyleKey)\" [(ngModel)]=\"pendingStyleValue\" appendTo=\"body\"\n        [style]=\"{ width: '320px' }\">\n      </p-select>\n      } @else if (isPropertyColor(pendingStyleKey)) {\n\n      <div class=\"css-style-color-input\">\n        <div class=\"color-editor-root\" [ngStyle]=\"{ '--wuic-color-editor-preview': valore || 'transparent' }\">\n          <p-colorPicker format=\"hsb\" [ngModel]=\"pickerValue\" (ngModelChange)=\"onPendingColorChanged($event)\"\n            appendTo=\"body\">\n          </p-colorPicker>\n        </div>\n        <input type=\"text\" [(ngModel)]=\"pendingStyleValue\" style=\"width: 252px;\" />\n      </div>\n      <div class=\"color-editor-alpha-row\">\n        <label class=\"color-editor-alpha-label\">Alpha</label>\n        <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" [ngModel]=\"alphaValue\"\n          (ngModelChange)=\"onAlphaChange($event)\" />\n        <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\" [ngModel]=\"alphaValue\"\n          (ngModelChange)=\"onAlphaChange($event)\" />\n      </div>\n\n      } @else {\n      <input type=\"text\" [(ngModel)]=\"pendingStyleValue\" style=\"width: 320px;\" />\n      }\n\n      <p-button label=\"Aggiungi propriet\u00E0 corrente\" (onClick)=\"addStyleToSelectedClass()\"\n        [disabled]=\"!currentClass || !pendingStyleKey\"></p-button>\n    </div>\n\n    @for (style of currentClass.Styles; track style; let i = $index) {\n    <div class=\"css-style-row\">\n      <div class=\"css-style-readonly-key\">{{ style.Key }}</div>\n      <div class=\"css-style-readonly-value\">{{ style.Value }}</div>\n\n      <p-button icon=\"pi pi-trash\" severity=\"danger\" [text]=\"true\" (onClick)=\"removeStyle(i)\"></p-button>\n    </div>\n    }\n  </div>\n  }\n\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Chiudi\" severity=\"secondary\" (onClick)=\"close()\"></p-button>\n  </ng-template>\n</p-dialog>", styles: [".css-editor-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.css-editor-col{border:1px solid #d0d0d0;border-radius:6px;padding:12px}.css-editor-row{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}.css-editor-inline{flex-direction:row;align-items:center}.css-editor-inline input{flex:1}.css-editor-styles{border:1px solid #d0d0d0;border-radius:6px;padding:12px;max-height:420px;overflow:auto}.css-style-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.css-style-readonly-key{width:260px;min-height:32px;display:flex;align-items:center;padding:0 8px;border:1px solid #d0d0d0;border-radius:4px;background:#f9f9f9;font-family:monospace}.css-style-readonly-value{width:320px;min-height:32px;display:flex;align-items:center;padding:0 8px;border:1px solid #d0d0d0;border-radius:4px;background:#f9f9f9;font-family:monospace}.css-style-color-input{display:flex;align-items:center;gap:8px;width:320px}@media(max-width:1024px){.css-editor-layout{grid-template-columns:1fr}.css-style-row{flex-wrap:wrap}}.color-editor-root{--wuic-color-editor-preview: transparent;border:solid 1px}:host ::ng-deep .color-editor-root .p-colorpicker-preview{background-image:linear-gradient(var(--wuic-color-editor-preview),var(--wuic-color-editor-preview)),linear-gradient(45deg,#d5d9e2 25%,transparent 25%),linear-gradient(-45deg,#d5d9e2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d5d9e2 75%),linear-gradient(-45deg,transparent 75%,#d5d9e2 75%)!important;background-size:10px 10px!important;background-position:0 0,0 5px,5px -5px,-5px 0!important;background-color:transparent!important}.color-editor-alpha-row{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}.color-editor-alpha-label{min-width:2.8rem;font-size:.85rem}.color-editor-alpha-row input[type=range]{flex:1 1 auto}.color-editor-alpha-row input[type=number]{width:4.5rem}\n"], dependencies: [{ 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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: 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: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: SelectModule }, { kind: "component", type: i5.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: i6.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: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CssSheetEditorComponent, decorators: [{
             type: Component,
@@ -4479,6 +4408,8 @@ class DesignerComponent {
     reopenDashboardDialogVisible = false;
     reopenDialogSelectedDashboardRoute = null;
     noEdit;
+    /** Chrome card dei widget top-level (flag board-level dal boardcontent wrapper-object). */
+    dashboardWidgetChrome = false;
     currentDashboardRoute = '';
     currentDashboardDescription = '';
     showArchetypeConfigurator = false;
@@ -4527,79 +4458,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' },
@@ -4908,7 +4772,6 @@ class DesignerComponent {
             size: 50,
             areas: 2,
             resize: (event, splitter) => {
-                // let indx = event.gutterNum;
                 splitter.nestedComponents.forEach((area, i) => {
                     area.inputs.size = event.sizes[i];
                 });
@@ -4967,29 +4830,18 @@ class DesignerComponent {
         delete this.accordionAreaInputs['cssClass'];
         this.accordionAreaInputs['height'] = null;
         this.accordionAreaInputs['display'] = 'block';
-        // this.accordionAreaInputs['borderStyle'] = 'none';
         this.accordionAreaInputs['borderTopStyle'] = 'none';
         this.accordionAreaInputs['borderLeftStyle'] = 'none';
         this.accordionAreaInputs['borderRightStyle'] = 'none';
         this.accordionAreaInputs['borderBottomStyle'] = 'solid';
         this.accordionAreaInputs['borderBottomWidth'] = '1px';
         this.accordionAreaInputs['borderBottomColor'] = '#e2e8f0';
-        // let divCtx = [
-        //   {
-        //     label: 'Add DIV',
-        //     icon: 'pi pi-plus',
-        //     command: (menuItem) => {
-        //       debugger;
-        //     }
-        //   } as any
-        // ];
-        // divCtx.push(...this.defaultCtxItems);
         this.availableTools = [
             {
                 group: 'HTML',
                 toolId: 1,
                 name: 'TABLE',
-                tag: `<table [attr.id]="uniqueName"  ngxDraggableDom="true" (moved)="onMoving($event, this)" ngResizable [rzHandles] = "'se'" (rzResizing)="onResizing($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}><tr *ngFor="let nestedTR of nestedComponents" [attr.id]="nestedTR.uniqueName" ${this.htmlStyleString.replace(/0/g, 'nestedTR.inputs')}><td *ngFor="let nestedTD of nestedTR.nestedComponents" [attr.id]="nestedTD.uniqueName" [attr.colspan]="nestedTD.inputs?.colSpan || null" [attr.rowspan]="nestedTD.inputs?.rowSpan || null" ngResizable [rzHandles] = "'se'" (rzResizing)="onResizing($event, nestedTD)" ${this.htmlStyleString.replace(/0/g, 'nestedTD.inputs')}><wuic-dashboard [dashboardElements]="nestedTD.nestedComponents"></wuic-dashboard></td></tr></table>`,
+                tag: `<table [attr.id]="uniqueName"  ngxDraggableDom="true" (moved)="onMoving($event, this)" ngResizable [rzHandles] = "'se'" (rzResizing)="onResizing($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}><tr *ngFor="let nestedTR of nestedComponents" [attr.id]="nestedTR.uniqueName" ${this.htmlStyleString.replaceAll('0', 'nestedTR.inputs')}><td *ngFor="let nestedTD of nestedTR.nestedComponents" [attr.id]="nestedTD.uniqueName" [attr.colspan]="nestedTD.inputs?.colSpan || null" [attr.rowspan]="nestedTD.inputs?.rowSpan || null" ngResizable [rzHandles] = "'se'" (rzResizing)="onResizing($event, nestedTD)" ${this.htmlStyleString.replaceAll('0', 'nestedTD.inputs')}><wuic-dashboard [dashboardElements]="nestedTD.nestedComponents"></wuic-dashboard></td></tr></table>`,
                 icon: 'pi pi-table',
                 inputProps: tableProps,
                 inputs: tableFullInputs,
@@ -5004,7 +4856,7 @@ class DesignerComponent {
                 tag: ``,
                 icon: 'pi pi-bars',
                 inputProps: this.htmlInputProperties,
-                inputs: Object.assign({}, tableFullInputs, { cssClass: [] }),
+                inputs: { ...tableFullInputs, cssClass: [] },
                 nestedComponents: []
             },
             {
@@ -5014,21 +4866,24 @@ class DesignerComponent {
                 name: 'TD',
                 tag: ``,
                 icon: 'pi pi-bars',
-                inputProps: Object.assign({}, this.htmlInputProperties, {
+                inputProps: {
+                    ...this.htmlInputProperties,
                     colSpan: { type: 'string', propertyCaption: 'Col span' },
                     rowSpan: { type: 'string', propertyCaption: 'Row span' }
-                }),
-                inputs: Object.assign({}, tableFullInputs, {
+                },
+                inputs: {
+                    ...tableFullInputs,
                     colSpan: '',
-                    rowSpan: ''
-                }, { cssClass: [] }),
+                    rowSpan: '',
+                    cssClass: []
+                },
                 nestedComponents: []
             },
             {
                 group: 'HTML',
                 toolId: 2,
                 name: 'DIV',
-                tag: `<div [attr.id]="uniqueName" ngxDraggableDom="true" ngResizable [rzHandles] = "'se'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}><wuic-dashboard [dashboardElements]="nestedComponents"></wuic-dashboard></div>`,
+                tag: `<div [attr.id]="uniqueName" ngxDraggableDom="true" ngResizable [rzHandles] = "'se'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}><wuic-dashboard [dashboardElements]="nestedComponents"></wuic-dashboard></div>`,
                 icon: 'pi pi-stop',
                 inputProps: this.htmlInputProperties,
                 inputs: this.htmlInputs,
@@ -5039,7 +4894,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 3,
                 name: 'SPAN',
-                tag: `<span [attr.id]="uniqueName"  [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}>{{inputs.innerText}}</span>`,
+                tag: `<span [attr.id]="uniqueName"  [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}>{{inputs.innerText}}</span>`,
                 icon: 'pi pi-language',
                 inputProps: this.bindableHtmlProps,
                 inputs: this.bindableHtmlInputs
@@ -5048,25 +4903,27 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 17,
                 name: 'LABEL',
-                tag: `<label [attr.id]="uniqueName"  [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles]="'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}>{{getLabelDisplayValue(inputs)}}</label>`,
+                tag: `<label [attr.id]="uniqueName"  [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles]="'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}>{{getLabelDisplayValue(inputs)}}</label>`,
                 icon: 'pi pi-tag',
-                inputProps: Object.assign({}, this.bindableHtmlProps, {
+                inputProps: {
+                    ...this.bindableHtmlProps,
                     displayField: { type: 'dictionary', values: [''], propertyCaption: 'Display Field' },
                     displayFormula: { type: 'button', propertyCaption: 'Display Formula', hideCaption: true, callback: this.openLabelDisplayFormulaEditor.bind(this) }
-                }),
-                inputs: Object.assign({}, this.bindableHtmlInputs, {
+                },
+                inputs: {
+                    ...this.bindableHtmlInputs,
                     datasource: null,
                     componentRef: null,
                     innerText: 'Label',
                     displayField: '',
                     displayFormula: ''
-                })
+                }
             },
             {
                 group: 'HTML',
                 toolId: 4,
                 name: 'Hx',
-                tag: `<h1 *ngIf="inputs.headerType == 'h1'" [attr.id]="uniqueName"  [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}>{{inputs.innerText}}</h1><h2 *ngIf="inputs.headerType == 'h2'" [attr.id]="uniqueName"  [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}>{{inputs.innerText}}</h2><h3 *ngIf="inputs.headerType == 'h3'" [attr.id]="uniqueName"  [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}>{{inputs.innerText}}</h3><h4 *ngIf="inputs.headerType == 'h4'" [attr.id]="uniqueName"  [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}>{{inputs.innerText}}</h4><h5 *ngIf="inputs.headerType == 'h5'" [attr.id]="uniqueName"  [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}>{{inputs.innerText}}</h5><h6 *ngIf="inputs.headerType == 'h6'" [attr.id]="uniqueName"  [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}>{{inputs.innerText}}</h6>`,
+                tag: `<h1 *ngIf="inputs.headerType == 'h1'" [attr.id]="uniqueName"  [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}>{{inputs.innerText}}</h1><h2 *ngIf="inputs.headerType == 'h2'" [attr.id]="uniqueName"  [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}>{{inputs.innerText}}</h2><h3 *ngIf="inputs.headerType == 'h3'" [attr.id]="uniqueName"  [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}>{{inputs.innerText}}</h3><h4 *ngIf="inputs.headerType == 'h4'" [attr.id]="uniqueName"  [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}>{{inputs.innerText}}</h4><h5 *ngIf="inputs.headerType == 'h5'" [attr.id]="uniqueName"  [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}>{{inputs.innerText}}</h5><h6 *ngIf="inputs.headerType == 'h6'" [attr.id]="uniqueName"  [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}>{{inputs.innerText}}</h6>`,
                 icon: 'pi pi-chevron-up',
                 inputProps: this.headerProps,
                 inputs: this.headerInputs
@@ -5075,7 +4932,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 5,
                 name: 'ANCHOR',
-                tag: `<a [attr.id]="uniqueName"  [href]="inputs.href" [target]="inputs.target" [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}>{{inputs.innerText}}</a>`,
+                tag: `<a [attr.id]="uniqueName"  [href]="inputs.href" [target]="inputs.target" [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}>{{inputs.innerText}}</a>`,
                 icon: 'pi pi-link',
                 inputProps: this.anchorProps,
                 inputs: this.anchorInputs
@@ -5084,7 +4941,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 6,
                 name: 'IMG',
-                tag: `<img [attr.id]="uniqueName"  [src]="inputs.src" [alt]="inputs.alt" [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')} />`,
+                tag: `<img [attr.id]="uniqueName"  [src]="inputs.src" [alt]="inputs.alt" [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'se'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')} />`,
                 icon: 'pi pi-image',
                 inputProps: this.imgProps,
                 inputs: this.imgInputs
@@ -5093,26 +4950,51 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 18,
                 name: 'IFRAME',
-                tag: `<iframe [attr.id]="uniqueName"  [attr.src]="inputs.src" [attr.frameborder]="inputs.frameBorder" [attr.allowfullscreen]="inputs.allowFullscreen ? '' : null" ngxDraggableDom="true" ngResizable [rzHandles]="'se'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}></iframe>`,
+                tag: `<iframe [attr.id]="uniqueName"  [attr.src]="inputs.src" [attr.frameborder]="inputs.frameBorder" [attr.allowfullscreen]="inputs.allowFullscreen ? '' : null" ngxDraggableDom="true" ngResizable [rzHandles]="'se'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}></iframe>`,
                 icon: 'pi pi-window-maximize',
-                inputProps: Object.assign({}, this.htmlInputProperties, {
+                inputProps: {
+                    ...this.htmlInputProperties,
                     src: { type: 'string', propertyCaption: 'Source URL' },
                     frameBorder: { type: 'dictionary', values: ['0', '1'], propertyCaption: 'Frame Border' },
                     allowFullscreen: { type: 'boolean', propertyCaption: 'Allow Fullscreen' }
-                }),
-                inputs: Object.assign({}, this.htmlInputs, {
+                },
+                inputs: {
+                    ...this.htmlInputs,
                     src: '',
                     frameBorder: '0',
                     allowFullscreen: false,
                     width: '480px',
                     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.replaceAll('0', 'inputs')}></wuic-image-wrapper-lazy>`,
+                icon: 'pi pi-images',
+                inputProps: {
+                    ...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: {
+                    ...this.htmlInputs,
+                    src: '',
+                    previewImageSrc: '',
+                    alt: '',
+                    preview: true,
+                    width: '240px',
+                    height: '160px'
+                }
             },
             {
                 group: 'HTML',
                 toolId: 7,
                 name: 'UL',
-                tag: `<ul [attr.id]="uniqueName"  [databound]="inputs.datasource?.component" [itemTemplate]="inputs.itemTemplate" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'se'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}>
+                tag: `<ul [attr.id]="uniqueName"  [databound]="inputs.datasource?.component" [itemTemplate]="inputs.itemTemplate" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'se'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}>
           <li *ngFor="let li of (inputs.datasource?.component?.value?.resultInfo?.dato || (inputs.optionsCsv || '').split(','))">
             <ng-container *ngIf="inputs.displayFormula; else ulItemTemplate">{{getUlItemDisplayValue(inputs, li)}}</ng-container>
             <ng-template #ulItemTemplate>
@@ -5122,28 +5004,30 @@ class DesignerComponent {
         </ul>`,
                 icon: 'pi pi-list',
                 inputProps: (() => {
-                    const ulProps = Object.assign({}, this.htmlItemTemplateProps, {
+                    const ulProps = {
+                        ...this.htmlItemTemplateProps,
                         optionsCsv: { type: 'string', propertyCaption: 'Options CSV' },
                         valueField: { type: 'dictionary', values: [''], propertyCaption: 'Value Field' },
                         textField: { type: 'dictionary', values: [''], propertyCaption: 'Text Field' },
                         displayFormula: { type: 'button', propertyCaption: 'Display Formula', hideCaption: true, callback: this.openUlDisplayFormulaEditor.bind(this) }
-                    });
+                    };
                     delete ulProps['bindingFunction'];
                     return ulProps;
                 })(),
-                inputs: Object.assign({}, this.bindableHtmlInputs, {
+                inputs: {
+                    ...this.bindableHtmlInputs,
                     optionsCsv: 'Item 1,Item 2,Item 3',
                     valueField: '',
                     textField: '',
                     displayFormula: ''
-                }),
+                },
                 nestedComponents: []
             },
             {
                 group: 'HTML',
                 toolId: 8,
                 name: 'BUTTON',
-                tag: `<button [attr.id]="uniqueName"  (click)="inputs.clickCallback__fn(inputs.datasource?.component?.value?.resultInfo, inputs.datasource?.component?.value?.metaInfo, inputs, $event, inputs._wtoolbox)" [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [itemTemplate]="inputs.itemTemplate" [clickCallback]="inputs.clickCallback" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'se'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}><ng-container *ngComponentOutlet="inputs.itemTemplateComponent; inputs: { rowData: inputs.templateData, metaInfo: inputs.datasource?.component?.value?.metaInfo, datasource: inputs.datasource?.component?.value }"></ng-container></button>`,
+                tag: `<button [attr.id]="uniqueName"  (click)="inputs.clickCallback__fn(inputs.datasource?.component?.value?.resultInfo, inputs.datasource?.component?.value?.metaInfo, inputs, $event, inputs._wtoolbox)" [databound]="inputs.datasource?.component" [bindingFunction]="inputs.bindingFunction" [itemTemplate]="inputs.itemTemplate" [clickCallback]="inputs.clickCallback" [inputs]="inputs" ngxDraggableDom="true" ngResizable [rzHandles] = "'se'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}><ng-container *ngComponentOutlet="inputs.itemTemplateComponent; inputs: { rowData: inputs.templateData, metaInfo: inputs.datasource?.component?.value?.metaInfo, datasource: inputs.datasource?.component?.value }"></ng-container></button>`,
                 icon: 'pi pi-arrow-circle-down',
                 inputProps: this.htmlButtonProps,
                 inputs: this.bindableHtmlInputs
@@ -5152,58 +5036,64 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 9,
                 name: 'INPUT',
-                tag: `<input [attr.id]="uniqueName"  [type]="inputs.inputType || 'text'" [placeholder]="inputs.placeholder" [readonly]="inputs.readonly" [disabled]="inputs.disabled" [value]="inputs.value" (input)="inputs.value=$any($event.target).value" ngxDraggableDom="true" ngResizable [rzHandles]="'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')} />`,
+                tag: `<input [attr.id]="uniqueName"  [type]="inputs.inputType || 'text'" [placeholder]="inputs.placeholder" [readonly]="inputs.readonly" [disabled]="inputs.disabled" [value]="inputs.value" (input)="inputs.value=$any($event.target).value" ngxDraggableDom="true" ngResizable [rzHandles]="'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')} />`,
                 icon: 'pi pi-pencil',
-                inputProps: Object.assign({}, this.htmlInputProperties, {
+                inputProps: {
+                    ...this.htmlInputProperties,
                     inputType: { type: 'dictionary', propertyCaption: 'Type', values: ['text', 'number', 'email', 'password', 'search', 'url'] },
                     placeholder: { type: 'string', propertyCaption: 'Placeholder' },
                     value: { type: 'string', propertyCaption: 'Value' },
                     readonly: { type: 'boolean', propertyCaption: 'Readonly' },
                     disabled: { type: 'boolean', propertyCaption: 'Disabled' }
-                }),
-                inputs: Object.assign({}, this.htmlInputs, {
+                },
+                inputs: {
+                    ...this.htmlInputs,
                     inputType: 'text',
                     placeholder: '',
                     value: '',
                     readonly: false,
                     disabled: false,
                     height: '32px'
-                })
+                }
             },
             {
                 group: 'HTML',
                 toolId: 10,
                 name: 'TEXTAREA',
-                tag: `<textarea [attr.id]="uniqueName"  [placeholder]="inputs.placeholder" [readonly]="inputs.readonly" [disabled]="inputs.disabled" [rows]="inputs.rows" [value]="inputs.value" (input)="inputs.value=$any($event.target).value" ngxDraggableDom="true" ngResizable [rzHandles]="'se'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}></textarea>`,
+                tag: `<textarea [attr.id]="uniqueName"  [placeholder]="inputs.placeholder" [readonly]="inputs.readonly" [disabled]="inputs.disabled" [rows]="inputs.rows" [value]="inputs.value" (input)="inputs.value=$any($event.target).value" ngxDraggableDom="true" ngResizable [rzHandles]="'se'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}></textarea>`,
                 icon: 'pi pi-align-left',
-                inputProps: Object.assign({}, this.htmlInputProperties, {
+                inputProps: {
+                    ...this.htmlInputProperties,
                     placeholder: { type: 'string', propertyCaption: 'Placeholder' },
                     value: { type: 'txt_area', propertyCaption: 'Value' },
                     rows: { type: 'string', propertyCaption: 'Rows' },
                     readonly: { type: 'boolean', propertyCaption: 'Readonly' },
                     disabled: { type: 'boolean', propertyCaption: 'Disabled' }
-                }),
-                inputs: Object.assign({}, this.htmlInputs, {
+                },
+                inputs: {
+                    ...this.htmlInputs,
                     placeholder: '',
                     value: '',
                     rows: '4',
                     readonly: false,
                     disabled: false,
                     height: '96px'
-                })
+                }
             },
             {
                 group: 'HTML',
                 toolId: 11,
                 name: 'CHECKBOX',
-                tag: `<label [attr.id]="uniqueName"  ngxDraggableDom="true" ngResizable [rzHandles]="'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}><input type="checkbox" [checked]="inputs.checked" (change)="inputs.checked=$any($event.target).checked" [disabled]="inputs.disabled" /> {{inputs.label}}</label>`,
+                tag: `<label [attr.id]="uniqueName"  ngxDraggableDom="true" ngResizable [rzHandles]="'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}><input type="checkbox" [checked]="inputs.checked" (change)="inputs.checked=$any($event.target).checked" [disabled]="inputs.disabled" /> {{inputs.label}}</label>`,
                 icon: 'pi pi-check-square',
-                inputProps: Object.assign({}, this.htmlInputProperties, {
+                inputProps: {
+                    ...this.htmlInputProperties,
                     label: { type: 'string', propertyCaption: 'Label' },
                     checked: { type: 'boolean', propertyCaption: 'Checked' },
                     disabled: { type: 'boolean', propertyCaption: 'Disabled' }
-                }),
-                inputs: Object.assign({}, this.htmlInputs, {
+                },
+                inputs: {
+                    ...this.htmlInputs,
                     label: 'Checkbox',
                     checked: false,
                     disabled: false,
@@ -5214,16 +5104,17 @@ class DesignerComponent {
                     borderRightStyle: 'none',
                     borderBottomStyle: 'none',
                     borderLeftStyle: 'none'
-                })
+                }
             },
             {
                 group: 'HTML',
                 toolId: 12,
                 name: 'SEPARATOR',
-                tag: `<hr [attr.id]="uniqueName"  ngxDraggableDom="true" ngResizable [rzHandles]="'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')} />`,
+                tag: `<hr [attr.id]="uniqueName"  ngxDraggableDom="true" ngResizable [rzHandles]="'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')} />`,
                 icon: 'pi pi-minus',
                 inputProps: this.htmlInputProperties,
-                inputs: Object.assign({}, this.htmlInputs, {
+                inputs: {
+                    ...this.htmlInputs,
                     width: '100%',
                     height: '2px',
                     // borderStyle: 'none',
@@ -5233,16 +5124,17 @@ class DesignerComponent {
                     borderRightStyle: 'none',
                     borderBottomStyle: 'none',
                     borderLeftStyle: 'none'
-                })
+                }
             },
             {
                 group: 'HTML',
                 toolId: 19,
                 name: 'HR',
-                tag: `<hr [attr.id]="uniqueName"  ngxDraggableDom="true" ngResizable [rzHandles]="'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')} />`,
+                tag: `<hr [attr.id]="uniqueName"  ngxDraggableDom="true" ngResizable [rzHandles]="'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')} />`,
                 icon: 'pi pi-minus',
                 inputProps: this.htmlInputProperties,
-                inputs: Object.assign({}, this.htmlInputs, {
+                inputs: {
+                    ...this.htmlInputs,
                     width: '100%',
                     height: '2px',
                     // borderStyle: 'none',
@@ -5252,19 +5144,21 @@ class DesignerComponent {
                     borderRightStyle: 'none',
                     borderBottomStyle: 'none',
                     borderLeftStyle: 'none'
-                })
+                }
             },
             {
                 group: 'HTML',
                 toolId: 13,
                 name: 'KPI',
-                tag: `<div [attr.id]="uniqueName"  ngxDraggableDom="true" ngResizable [rzHandles]="'se'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}><div style="font-size:12px; opacity:.75;">{{inputs.caption}}</div><div style="font-size:28px; font-weight:700; line-height:1.2;">{{inputs.value}}</div></div>`,
+                tag: `<div [attr.id]="uniqueName"  ngxDraggableDom="true" ngResizable [rzHandles]="'se'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}><div style="font-size:12px; opacity:.75;">{{inputs.caption}}</div><div style="font-size:28px; font-weight:700; line-height:1.2;">{{inputs.value}}</div></div>`,
                 icon: 'pi pi-chart-line',
-                inputProps: Object.assign({}, this.htmlInputProperties, {
+                inputProps: {
+                    ...this.htmlInputProperties,
                     caption: { type: 'string', propertyCaption: 'Caption' },
                     value: { type: 'string', propertyCaption: 'Value' }
-                }),
-                inputs: Object.assign({}, this.htmlInputs, {
+                },
+                inputs: {
+                    ...this.htmlInputs,
                     caption: 'KPI',
                     value: '0',
                     width: '180px',
@@ -5277,42 +5171,47 @@ class DesignerComponent {
                     // borderStyle: 'solid',
                     // borderWidth: '1px',
                     // borderColor: '#d1d5db'
-                })
+                }
             },
             {
                 group: 'HTML',
                 toolId: 14,
                 name: 'DATE',
-                tag: `<input [attr.id]="uniqueName"  type="date" [readonly]="inputs.readonly" [disabled]="inputs.disabled" [value]="inputs.value" (input)="inputs.value=$any($event.target).value" ngxDraggableDom="true" ngResizable [rzHandles]="'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')} />`,
+                tag: `<input [attr.id]="uniqueName"  type="date" [readonly]="inputs.readonly" [disabled]="inputs.disabled" [value]="inputs.value" (input)="inputs.value=$any($event.target).value" ngxDraggableDom="true" ngResizable [rzHandles]="'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')} />`,
                 icon: 'pi pi-calendar',
-                inputProps: Object.assign({}, this.htmlInputProperties, {
+                inputProps: {
+                    ...this.htmlInputProperties,
                     value: { type: 'string', propertyCaption: 'Value (yyyy-mm-dd)' },
                     readonly: { type: 'boolean', propertyCaption: 'Readonly' },
                     disabled: { type: 'boolean', propertyCaption: 'Disabled' }
-                }),
-                inputs: Object.assign({}, this.htmlInputs, {
+                },
+                inputs: {
+                    ...this.htmlInputs,
                     value: '',
                     readonly: false,
                     disabled: false,
                     width: '180px',
                     height: '32px'
-                })
+                }
             },
             {
                 group: 'HTML',
                 toolId: 15,
                 name: 'SELECT',
-                tag: `<select [attr.id]="uniqueName"  [disabled]="inputs.disabled" [value]="inputs.value" (change)="inputs.value=$any($event.target).value" ngxDraggableDom="true" ngResizable [rzHandles]="'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}><option *ngFor="let opt of (inputs.datasource?.component?.value?.resultInfo?.dato || (inputs.optionsCsv || '').split(','))" [value]="inputs.datasource?.component?.value?.resultInfo?.dato ? (opt?.[inputs.valueField] ?? '') : opt.trim()">{{getSelectOptionLabel(inputs, opt)}}</option></select>`,
+                tag: `<select [attr.id]="uniqueName"  [disabled]="inputs.disabled" [value]="inputs.value" (change)="inputs.value=$any($event.target).value" ngxDraggableDom="true" ngResizable [rzHandles]="'e'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}><option *ngFor="let opt of (inputs.datasource?.component?.value?.resultInfo?.dato || (inputs.optionsCsv || '').split(','))" [value]="inputs.datasource?.component?.value?.resultInfo?.dato ? (opt?.[inputs.valueField] ?? '') : opt.trim()">{{getSelectOptionLabel(inputs, opt)}}</option></select>`,
                 icon: 'pi pi-list',
-                inputProps: Object.assign({}, this.htmlInputProperties, this.dsProperties, {
+                inputProps: {
+                    ...this.htmlInputProperties,
+                    ...this.dsProperties,
                     optionsCsv: { type: 'string', propertyCaption: 'Options CSV' },
                     valueField: { type: 'dictionary', values: [''], propertyCaption: 'Value Field' },
                     textField: { type: 'dictionary', values: [''], propertyCaption: 'Text Field' },
                     displayFormula: { type: 'button', propertyCaption: 'Display Formula', hideCaption: true, callback: this.openSelectDisplayFormulaEditor.bind(this) },
                     value: { type: 'string', propertyCaption: 'Selected Value' },
                     disabled: { type: 'boolean', propertyCaption: 'Disabled' }
-                }),
-                inputs: Object.assign({}, this.htmlInputs, {
+                },
+                inputs: {
+                    ...this.htmlInputs,
                     datasource: null,
                     componentRef: null,
                     optionsCsv: 'Option 1,Option 2,Option 3',
@@ -5323,15 +5222,17 @@ class DesignerComponent {
                     disabled: false,
                     width: '180px',
                     height: '32px'
-                })
+                }
             },
             {
                 group: 'HTML',
                 toolId: 16,
                 name: 'MULTISELECT',
-                tag: `<select [attr.id]="uniqueName"  multiple="true" [disabled]="inputs.disabled" [size]="inputs.size || 4" (change)="inputs.values = [].slice.call($any($event.target).selectedOptions || []).map(x => x.value)" ngxDraggableDom="true" ngResizable [rzHandles]="'se'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}><option *ngFor="let opt of (inputs.datasource?.component?.value?.resultInfo?.dato || (inputs.optionsCsv || '').split(','))" [value]="inputs.datasource?.component?.value?.resultInfo?.dato ? (opt?.[inputs.valueField] ?? '') : opt.trim()" [selected]="(inputs.values || []).includes((inputs.datasource?.component?.value?.resultInfo?.dato ? (opt?.[inputs.valueField] ?? '') : opt.trim()) + '')">{{getSelectOptionLabel(inputs, opt)}}</option></select>`,
+                tag: `<select [attr.id]="uniqueName"  multiple="true" [disabled]="inputs.disabled" [size]="inputs.size || 4" (change)="inputs.values = [].slice.call($any($event.target).selectedOptions || []).map(x => x.value)" ngxDraggableDom="true" ngResizable [rzHandles]="'se'" (rzResizing)="onResizing($event, this)" (moved)="onMoving($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}><option *ngFor="let opt of (inputs.datasource?.component?.value?.resultInfo?.dato || (inputs.optionsCsv || '').split(','))" [value]="inputs.datasource?.component?.value?.resultInfo?.dato ? (opt?.[inputs.valueField] ?? '') : opt.trim()" [selected]="(inputs.values || []).includes((inputs.datasource?.component?.value?.resultInfo?.dato ? (opt?.[inputs.valueField] ?? '') : opt.trim()) + '')">{{getSelectOptionLabel(inputs, opt)}}</option></select>`,
                 icon: 'pi pi-check-square',
-                inputProps: Object.assign({}, this.htmlInputProperties, this.dsProperties, {
+                inputProps: {
+                    ...this.htmlInputProperties,
+                    ...this.dsProperties,
                     optionsCsv: { type: 'string', propertyCaption: 'Options CSV' },
                     valueField: { type: 'dictionary', values: [''], propertyCaption: 'Value Field' },
                     textField: { type: 'dictionary', values: [''], propertyCaption: 'Text Field' },
@@ -5339,8 +5240,9 @@ class DesignerComponent {
                     values: { type: 'txt_area', propertyCaption: 'Selected Values (array)' },
                     size: { type: 'string', propertyCaption: 'Visible Rows' },
                     disabled: { type: 'boolean', propertyCaption: 'Disabled' }
-                }),
-                inputs: Object.assign({}, this.htmlInputs, {
+                },
+                inputs: {
+                    ...this.htmlInputs,
                     datasource: null,
                     componentRef: null,
                     optionsCsv: 'Option 1,Option 2,Option 3',
@@ -5352,7 +5254,7 @@ class DesignerComponent {
                     disabled: false,
                     width: '200px',
                     height: '96px'
-                })
+                }
             },
             {
                 group: 'DATA',
@@ -5427,7 +5329,7 @@ class DesignerComponent {
                 name: 'FILTERBAR',
                 tag: `<wuic-filter-bar [attr.id]="uniqueName"  [datasource]="inputs.datasource?.component"></wuic-filter-bar>`,
                 icon: 'pi pi-filter',
-                inputProps: Object.assign({}, this.dsProperties),
+                inputProps: { ...this.dsProperties },
                 inputs: {
                     datasource: null,
                     componentRef: null
@@ -5439,10 +5341,11 @@ class DesignerComponent {
                 name: 'PAGER',
                 tag: `<wuic-pager [attr.id]="uniqueName"  [datasource]="inputs.datasource?.component" [pageSize]="inputs.pageSize" [currentPage]="inputs.currentPage"></wuic-pager>`,
                 icon: 'pi pi-angle-double-right',
-                inputProps: Object.assign({}, this.dsProperties, {
+                inputProps: {
+                    ...this.dsProperties,
                     pageSize: { type: 'string', propertyCaption: 'Page Size' },
                     currentPage: { type: 'string', propertyCaption: 'Current Page' }
-                }),
+                },
                 inputs: {
                     datasource: null,
                     componentRef: null,
@@ -5454,12 +5357,12 @@ class DesignerComponent {
                 group: 'CONTAINER',
                 toolId: 1000,
                 name: 'TABVIEW',
-                tag: `<p-tabView [attr.id]="uniqueName"  [tabs]="nestedComponents" ngxDraggableDom="true" (moved)="onMoving($event, this)" ngResizable [rzHandles]="'se'" (rzResizing)="onResizing($event, this)" ${this.htmlStyleString.replace('[ngStyle]', '[style]').replace(/0/g, 'inputs')}>
+                tag: `<p-tabView [attr.id]="uniqueName"  [tabs]="nestedComponents" ngxDraggableDom="true" (moved)="onMoving($event, this)" ngResizable [rzHandles]="'se'" (rzResizing)="onResizing($event, this)" ${this.htmlStyleString.replace('[ngStyle]', '[style]').replaceAll('0', 'inputs')}>
             <wuic-dashboard [dashboardElements]="nestedComponents"></wuic-dashboard>
         </p-tabView>`,
                 icon: 'pi pi-folder',
                 inputProps: this.htmlInputProperties,
-                inputs: Object.assign({}, this.htmlInputs, { cssClass: [] }),
+                inputs: { ...this.htmlInputs, cssClass: [] },
                 nestedComponents: [],
                 allowedChildren: ['TABPANEL']
             },
@@ -5476,14 +5379,17 @@ 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',
                 toolId: 1002,
                 name: 'SPLITTER',
-                tag: `<p-splitter [attr.id]="uniqueName"  [direction]="inputs.direction" (dragEnd)="inputs.resize?.($event, this)" ngxDraggableDom="true" (moved)="onMoving($event, this)" ngResizable [rzHandles]="'se'" (rzResizing)="onResizing($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}>
-                 <p-splitter-area *ngFor="let nestedArea of nestedComponents" [attr.id]="nestedArea.uniqueName" [size]="nestedArea.inputs.size" ${this.htmlStyleString.replace(/0/g, 'nestedArea.inputs')}>
+                tag: `<p-splitter [attr.id]="uniqueName"  [direction]="inputs.direction" (dragEnd)="inputs.resize?.($event, this)" ngxDraggableDom="true" (moved)="onMoving($event, this)" ngResizable [rzHandles]="'se'" (rzResizing)="onResizing($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}>
+                 <p-splitter-area *ngFor="let nestedArea of nestedComponents" [attr.id]="nestedArea.uniqueName" [size]="nestedArea.inputs.size" ${this.htmlStyleString.replaceAll('0', 'nestedArea.inputs')}>
                   <wuic-dashboard [dashboardElements]="nestedArea.nestedComponents"></wuic-dashboard>
                 </p-splitter-area>
               </p-splitter>`,
@@ -5510,9 +5416,9 @@ class DesignerComponent {
                 group: 'CONTAINER',
                 toolId: 1004,
                 name: 'ACCORDION',
-                tag: ` <cdk-accordion class="wuic-accordion-tab" [attr.id]="uniqueName"  (dragEnd)="inputs.resize?.($event, this)" ngxDraggableDom="true" (moved)="onMoving($event, this)" ngResizable [rzHandles]="'se'" (rzResizing)="onResizing($event, this)" ${this.htmlStyleString.replace(/0/g, 'inputs')}>
+                tag: ` <cdk-accordion class="wuic-accordion-tab" [attr.id]="uniqueName"  (dragEnd)="inputs.resize?.($event, this)" ngxDraggableDom="true" (moved)="onMoving($event, this)" ngResizable [rzHandles]="'se'" (rzResizing)="onResizing($event, this)" ${this.htmlStyleString.replaceAll('0', 'inputs')}>
               <cdk-accordion-item *ngFor="let nestedItem of nestedComponents" [attr.id]="nestedItem.uniqueName" 
-                ${this.htmlStyleString.replace(/0/g, 'nestedItem.inputs')}>
+                ${this.htmlStyleString.replaceAll('0', 'nestedItem.inputs')}>
                   <div class="wuic-accordion-header">
                     <a class="wuic-accordion-header-link" (click)="inputs.toggle?.($event, this, nestedItem)">{{nestedItem.inputs.header}}</a>
                   </div>
@@ -5551,7 +5457,7 @@ class DesignerComponent {
      * oppure ricarica la lista dashboard salvate.
      */
     async ngOnInit() {
-        this.lastKnownHashRoute = String(window?.location?.hash || '');
+        this.lastKnownHashRoute = String(globalThis?.location?.hash || '');
         this.refreshAvailableProjectCssClasses();
         // Registra handler chatbot per kind 'designer_inject': il chatbot
         // popover (globale, vedi rag-chatbot.component.ts onApplyAction)
@@ -5702,7 +5608,10 @@ class DesignerComponent {
                     let topParent = null;
                     const declared = (node && typeof node.parent_unique_name === 'string') ? node.parent_unique_name.trim() : '';
                     if (declared) {
-                        if (declared.startsWith('<') && declared.endsWith('>')) {
+                        if (this.isRootPlaceholder(declared)) {
+                            topParent = null; // alias esplicito del caso 3: va al ROOT
+                        }
+                        else if (declared.startsWith('<') && declared.endsWith('>')) {
                             if (lastTopLevelInjected) {
                                 const resolved = this.resolveLayoutPlaceholder(declared, lastTopLevelInjected);
                                 if (resolved)
@@ -5722,7 +5631,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.includes(String(node.tool_name || '').toUpperCase())) {
+                        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 : ''}.` };
@@ -5768,13 +5688,13 @@ class DesignerComponent {
         // (es. backgroundColor non e' in inputs di default ma e' in
         // htmlInputProperties -> inputProps). Coerente col property panel
         // che legge inputProps per costruire l'UI.
-        if (!target.inputProps || !Object.prototype.hasOwnProperty.call(target.inputProps, propName)) {
+        if (!target.inputProps || !Object.hasOwn(target.inputProps, propName)) {
             return { ok: false, message: `set_property: proprieta' '${propName}' non esposta su ${target.name} (${targetName})` };
         }
         // Inizializza inputs[propName] se non esiste, cosi' setValue() canonico
         // (o l'assign fallback) lo trova.
-        if (target.inputs && !Object.prototype.hasOwnProperty.call(target.inputs, propName)) {
-            target.inputs[propName] = undefined;
+        if (target.inputs && !Object.hasOwn(target.inputs, propName)) {
+            (target.inputs)[propName] = undefined;
         }
         // Trova la toolProp matching (chiave 'key' === propName) per delegare a setValue
         // canonico - applica converter, conditional, hooks specifici (datasource/select).
@@ -5791,8 +5711,8 @@ class DesignerComponent {
                 // Fallback: la prop non e' nelle toolProps (raro - inputProps inconsistenti).
                 // Assign diretto su inputs[prop], distinguendo BehaviorSubject vs primitivo.
                 const cur = target.inputs[propName];
-                if (cur && typeof cur.next === 'function' && typeof cur.subscribe === 'function') {
-                    cur.next(newValue);
+                if (cur && typeof (cur).next === 'function' && typeof (cur).subscribe === 'function') {
+                    (cur).next(newValue);
                 }
                 else {
                     target.inputs[propName] = newValue;
@@ -6030,16 +5950,16 @@ class DesignerComponent {
                 continue;
             }
             // BehaviorSubject: per datasource estrai uniqueName dell'oggetto wrappato
-            if (v && typeof v.subscribe === 'function') {
-                const inner = v.value;
+            if (v && typeof (v).subscribe === 'function') {
+                const inner = (v).value;
                 const wrappedName = inner?.uniqueName || inner?.component?.uniqueName;
                 if (wrappedName)
                     parts.push(`${key}=${wrappedName}`);
                 continue;
             }
             // Oggetto datasource (dropped-component-list, sync)
-            if (v && typeof v === 'object' && v.uniqueName) {
-                parts.push(`${key}=${v.uniqueName}`);
+            if (v && typeof v === 'object' && (v).uniqueName) {
+                parts.push(`${key}=${(v).uniqueName}`);
                 continue;
             }
             // Primitivi: includi solo se DIVERSI dal default del template
@@ -6246,7 +6166,7 @@ class DesignerComponent {
             if (template.inputs) {
                 // Rimuovi le chiavi che node.inputs aveva aggiunto e non c'erano nel backup
                 for (const k of Object.keys(template.inputs)) {
-                    if (!Object.prototype.hasOwnProperty.call(inputsBackup, k)) {
+                    if (!Object.hasOwn(inputsBackup, k)) {
                         delete template.inputs[k];
                     }
                 }
@@ -6276,7 +6196,7 @@ class DesignerComponent {
                 const rowPct = `${Math.floor(10000 / childCount) / 100}%`;
                 for (const tr of justInjected.nestedComponents) {
                     if (tr?.inputs)
-                        tr.inputs['height'] = rowPct;
+                        (tr.inputs)['height'] = rowPct;
                 }
             }
             else if (toolName === 'SPLITTER') {
@@ -6284,7 +6204,7 @@ class DesignerComponent {
                 const sizePct = Math.floor(10000 / childCount) / 100;
                 for (const area of justInjected.nestedComponents) {
                     if (area?.inputs)
-                        area.inputs['size'] = sizePct;
+                        (area.inputs)['size'] = sizePct;
                 }
             }
         }
@@ -6303,7 +6223,7 @@ class DesignerComponent {
         //   2. il target referenziato (es. DATASOURCE_15) deve esistere gia'
         //      in flattenedDashboardElements (= iniettato in nodo precedente
         //      del layout o gia' nel canvas).
-        if (justInjected && justInjected.inputs && droppedBindingKeys.length > 0 && node.inputs) {
+        if (justInjected?.inputs && droppedBindingKeys.length > 0 && node.inputs) {
             for (const key of droppedBindingKeys) {
                 const propDef = template.inputProps?.[key];
                 if (!propDef)
@@ -6314,7 +6234,7 @@ class DesignerComponent {
                 // Se gia' oggetto (LLM mandasse direttamente {uniqueName,component})
                 // o BehaviorSubject -> pass-through. Solo stringhe vengono risolte.
                 if (typeof raw !== 'string') {
-                    justInjected.inputs[key] = raw;
+                    (justInjected.inputs)[key] = raw;
                     continue;
                 }
                 const resolved = (raw.startsWith('<') && raw.endsWith('>'))
@@ -6381,7 +6301,7 @@ class DesignerComponent {
                     }
                     catch { /* subs collection non disponibile, sub continuera' a vivere col designer */ }
                 }
-                justInjected.inputs[key] = {
+                (justInjected.inputs)[key] = {
                     uniqueName: refElement.uniqueName,
                     [asyncPath]: compBs
                 };
@@ -6395,8 +6315,8 @@ class DesignerComponent {
         // non sa quali colonne mostrare e la grid resta vuota anche con
         // datasource bindato correttamente.
         if (justInjected && toolName === 'DATAREPEATER' && justInjected.inputs) {
-            const ds = justInjected.inputs['datasource'];
-            const action = this.getRepeaterAction(justInjected) || justInjected.inputs['action'] || 'list';
+            const ds = (justInjected.inputs)['datasource'];
+            const action = this.getRepeaterAction(justInjected) || (justInjected.inputs)['action'] || 'list';
             if (ds) {
                 try {
                     this.propertyTreeBuilder(action, justInjected.inputs);
@@ -6443,7 +6363,10 @@ class DesignerComponent {
                 let childParent = injectedUniqueName;
                 const declared = (ch && typeof ch.parent_unique_name === 'string') ? ch.parent_unique_name.trim() : '';
                 if (declared) {
-                    if (declared.startsWith('<') && declared.endsWith('>')) {
+                    if (this.isRootPlaceholder(declared)) {
+                        childParent = null; // alias esplicito del ROOT anche in ricorsione
+                    }
+                    else if (declared.startsWith('<') && declared.endsWith('>')) {
                         // Placeholder semantico: risolvi dentro justInjected
                         const resolved = this.resolveLayoutPlaceholder(declared, justInjected);
                         if (resolved)
@@ -6479,10 +6402,24 @@ class DesignerComponent {
      * Ritorna l'uniqueName del nodo risolto, o `null` se il pattern non matcha
      * o l'index e' out-of-bounds (es. <TD-3> in tabella 2x2).
      */
+    /**
+     * `<ROOT>` e' l'alias ESPLICITO del caso 3 ("null/missing: va al ROOT"), non un
+     * placeholder container-relative. Senza questo riconoscimento finiva nel ramo
+     * angle-bracket e `resolveLayoutPlaceholder` lo scartava (`'ROOT'.split('-')`
+     * da un solo elemento -> `null`), quindi era IRRISOLVIBILE anche con un
+     * container iniettato prima: un `<ROOT>` faceva abortire l'intero inject.
+     * Caso reale: "aggiungi un bottone Esporta nel canvas" su canvas vuoto.
+     * Nota: se il token arrivasse fino a `drop()` il nodo verrebbe piazzato
+     * correttamente al root (destination = dashboardElements), quindi non e' un
+     * vincolo del canvas — era solo questo ramo a trasformarlo in un rifiuto.
+     */
+    isRootPlaceholder(declared) {
+        return /^<\s*ROOT\s*>$/i.test((declared || '').trim());
+    }
     resolveLayoutPlaceholder(placeholder, parentNode) {
         if (!placeholder || !parentNode)
             return null;
-        const inner = placeholder.replace(/^<|>$/g, '').trim();
+        const inner = placeholder.replaceAll(/^<|>$/g, '').trim();
         const parts = inner.split('-');
         if (parts.length < 2)
             return null;
@@ -6491,7 +6428,7 @@ class DesignerComponent {
         if (tag === 'TD') {
             // <TD-N> singolo index OR <TD-R-C> riga/colonna
             if (parts.length === 2) {
-                const n = parseInt(parts[1], 10);
+                const n = Number.parseInt(parts[1], 10);
                 if (!Number.isFinite(n))
                     return null;
                 // Row-major lookup: TR[i].TD[j]
@@ -6506,8 +6443,8 @@ class DesignerComponent {
                 return null;
             }
             if (parts.length === 3) {
-                const r = parseInt(parts[1], 10);
-                const c = parseInt(parts[2], 10);
+                const r = Number.parseInt(parts[1], 10);
+                const c = Number.parseInt(parts[2], 10);
                 if (!Number.isFinite(r) || !Number.isFinite(c))
                     return null;
                 const tr = nested[r];
@@ -6519,25 +6456,25 @@ class DesignerComponent {
             return null;
         }
         if (tag === 'TR') {
-            const n = parseInt(parts[1], 10);
+            const n = Number.parseInt(parts[1], 10);
             if (!Number.isFinite(n))
                 return null;
             return nested[n]?.uniqueName || null;
         }
         if (tag === 'SPLITTER' && parts[1].toUpperCase() === 'AREA') {
-            const n = parseInt(parts[2], 10);
+            const n = Number.parseInt(parts[2], 10);
             if (!Number.isFinite(n))
                 return null;
             return nested[n]?.uniqueName || null;
         }
         if (tag === 'ACCORDION' && parts[1].toUpperCase() === 'AREA') {
-            const n = parseInt(parts[2], 10);
+            const n = Number.parseInt(parts[2], 10);
             if (!Number.isFinite(n))
                 return null;
             return nested[n]?.uniqueName || null;
         }
         if (tag === 'TABPANEL') {
-            const n = parseInt(parts[1], 10);
+            const n = Number.parseInt(parts[1], 10);
             if (!Number.isFinite(n))
                 return null;
             return nested[n]?.uniqueName || null;
@@ -6579,12 +6516,12 @@ class DesignerComponent {
         const trim = placeholder.trim();
         if (!trim.startsWith('<') || !trim.endsWith('>'))
             return null;
-        const inner = trim.replace(/^<|>$/g, '').trim();
-        const m = inner.match(/^([A-Za-z][A-Za-z0-9_-]*)-(\d+)$/);
+        const inner = trim.replaceAll(/^<|>$/g, '').trim();
+        const m = /^([A-Za-z][A-Za-z0-9_-]*)-(\d+)$/.exec(inner);
         if (!m)
             return null;
         const targetName = m[1].toUpperCase();
-        const targetIdx = parseInt(m[2], 10);
+        const targetIdx = Number.parseInt(m[2], 10);
         if (!Number.isFinite(targetIdx) || targetIdx < 0)
             return null;
         const matching = (this.flattenedDashboardElements || [])
@@ -6624,7 +6561,7 @@ class DesignerComponent {
      */
     _designerGestureMouseUp;
     async onWindowHashChange() {
-        const nextHash = String(window?.location?.hash || '');
+        const nextHash = String(globalThis?.location?.hash || '');
         const previousHash = this.lastKnownHashRoute;
         if (this.suppressNextHashGuard) {
             this.lastKnownHashRoute = nextHash;
@@ -6643,10 +6580,10 @@ class DesignerComponent {
             return;
         }
         this.suppressNextHashGuard = true;
-        window.location.hash = previousHash || '#/';
+        globalThis.location.hash = previousHash || '#/';
         setTimeout(() => {
             this.suppressNextHashGuard = false;
-            this.lastKnownHashRoute = String(window?.location?.hash || '');
+            this.lastKnownHashRoute = String(globalThis?.location?.hash || '');
         }, 0);
     }
     onWindowBeforeUnload(event) {
@@ -6757,14 +6694,14 @@ class DesignerComponent {
             }
             try {
                 const urlObj = new URL(href, document.baseURI);
-                const cleanedPath = String(urlObj.pathname || '').replace(/\\/g, '/');
+                const cleanedPath = String(urlObj.pathname || '').replaceAll('\\', '/');
                 const assetsIdx = cleanedPath.toLowerCase().indexOf('/assets/');
                 if (assetsIdx >= 0) {
                     // Keep relative assets path (e.g. assets/my-dash/file.css) to avoid collisions.
                     return cleanedPath.substring(assetsIdx + 1);
                 }
                 const parts = cleanedPath.split('/');
-                return parts[parts.length - 1] || cleanedPath;
+                return parts.at(-1) || cleanedPath;
             }
             catch {
                 return href;
@@ -7079,7 +7016,7 @@ class DesignerComponent {
      * Normalizza un path CSS in formato slash `/` e trim.
      */
     normalizeSheetPath(path) {
-        return String(path || '').trim().replace(/\\/g, '/');
+        return String(path || '').trim().replaceAll('\\', '/');
     }
     /**
      * Normalizza il payload foglio CSS (path, selector, class names, key/value style)
@@ -7141,7 +7078,7 @@ class DesignerComponent {
                 return WtoolboxService.appSettings?.file_path;
             }
             catch {
-                return window.location.origin;
+                return globalThis.location.origin;
             }
         };
         const resolveBackendStaticBaseUrl = () => {
@@ -7150,7 +7087,7 @@ class DesignerComponent {
                 if (!raw) {
                     return '';
                 }
-                const url = new URL(raw, window.location.origin);
+                const url = new URL(raw, globalThis.location.origin);
                 const apiIndex = url.pathname.toLowerCase().indexOf('/api/');
                 let staticPath = apiIndex >= 0 ? url.pathname.substring(0, apiIndex) : url.pathname;
                 if (!staticPath.endsWith('/')) {
@@ -7163,7 +7100,7 @@ class DesignerComponent {
             }
         };
         const buildCssHref = (baseUrl, relativePath) => {
-            const baseUrlObj = new URL(baseUrl || window.location.origin, window.location.origin);
+            const baseUrlObj = new URL(baseUrl || globalThis.location.origin, globalThis.location.origin);
             const basePath = baseUrlObj.pathname.toLowerCase();
             let resolvedRelativePath = relativePath;
             if (basePath.endsWith('/assets/') && resolvedRelativePath.toLowerCase().startsWith('assets/')) {
@@ -7375,6 +7312,8 @@ class DesignerComponent {
             this.applyHistorySnapshot(target, false);
         }
         catch (err) {
+            // Snapshot apply failed — best-effort: keep the designer alive, the
+            // history stacks are already consistent (target popped, previous pushed).
         }
     }
     /**
@@ -7454,11 +7393,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();
@@ -7472,6 +7453,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 = (globalThis.window !== undefined && globalThis.getSelection)
+                ? String(globalThis.getSelection() || '')
+                : '';
+            if (textSelection) {
+                return;
+            }
+            event.preventDefault();
+            this.copyDesignerElement(this.tool);
+            return;
+        }
+        if (key === 'v') {
+            event.preventDefault();
+            void this.pasteDesignerElement();
         }
     }
     /**
@@ -7502,9 +7505,7 @@ class DesignerComponent {
      * via touch su designer.
      */
     onWindowTouchend() {
-        if (!this.finalizePendingColorHistory()) {
-            this.commitHistoryAfterDesignerGestureIfNeeded();
-        }
+        this.onWindowMouseup();
     }
     /**
      * Se l'utente ha appena terminato un drag/resize di un elemento del designer
@@ -7697,12 +7698,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()
             }
         ];
     }
@@ -7710,10 +7748,521 @@ class DesignerComponent {
         this.hideDatasourcesInCanvas = !this.hideDatasourcesInCanvas;
         this.refreshGraphActionsMenuItems();
     }
-    get droppedDashboardItems() {
-        return (this.flattenedDashboardElements || []).filter((item) => !!item?.uniqueName);
+    /**
+     * 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 hierarchyTreeNodes() {
+    /**
+     * 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?.originalEvent) ? event.originalEvent : event;
+        const fallbackCx = (typeof event?.clientX === 'number') ? event.clientX : null;
+        const fallbackCy = (typeof event?.clientY === 'number') ? event.clientY : null;
+        const cx = (typeof oe?.clientX === 'number') ? oe.clientX : fallbackCx;
+        const cy = (typeof oe?.clientY === 'number') ? oe.clientY : fallbackCy;
+        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();
+    }
+    /** 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);
+    }
+    /**
+     * 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.
+     */
+    snapElementAbsoluteToGrid(tool, g) {
+        const dom = tool?.uniqueName ? document.getElementById(tool.uniqueName) : null;
+        if (!dom || !tool.inputs) {
+            return false;
+        }
+        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) => Number.parseFloat(x));
+            if (p.length >= 6 && p.every((n) => !Number.isNaN(Number(n)))) {
+                [sx, sy, kx, ky, tx, ty] = p;
+            }
+        }
+        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;
+    }
+    /**
+     * Sposta l'elemento selezionato di (dx, dy) px agendo sulla translation della
+     * matrice `transform` (stesso campo che usa onMoving). Usato dalle frecce.
+     */
+    nudgeSelectedElement(dx, dy) {
+        const el = this.tool;
+        if (!el?.inputs) {
+            return;
+        }
+        let scaleX = 1, skewY = 0, skewX = 0, scaleY = 1, tx = 0, ty = 0;
+        const cur = String(el.inputs['transform'] || '');
+        const m = /matrix\(([^)]+)\)/.exec(cur);
+        if (m) {
+            const parts = m[1].split(',').map((x) => Number.parseFloat(x));
+            if (parts.length >= 6 && parts.every((n) => !Number.isNaN(Number(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();
+    }
+    // ===================== 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 : {};
+        }
+        catch {
+            return {};
+        }
+    }
+    writeDesignerPresets(presets) {
+        try {
+            localStorage.setItem(DesignerComponent.PRESETS_STORAGE_KEY, JSON.stringify(presets));
+        }
+        catch { /* quota / storage disabilitato */ }
+    }
+    /** 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;
+        }
+        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')
+        });
+    }
+    /** 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 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;
+        }
+        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;
+            }
+        }
+        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 ?? null;
+    }
+    /**
+     * 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')
+                .replaceAll(/[^a-zA-Z0-9._-]+/g, '_')
+                .replaceAll(/^_+|_+$/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();
+            anchor.remove();
+            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?.[0];
+            input.remove();
+            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 dashboardElements = Array.isArray(parsed?.dashboardElements) ? parsed.dashboardElements : null;
+        const wrappedElements = Array.isArray(parsed?.elements) ? parsed.elements : dashboardElements;
+        const elements = Array.isArray(parsed) ? parsed : wrappedElements;
+        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() {
@@ -7747,11 +8296,561 @@ class DesignerComponent {
         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);
+        globalThis.addEventListener('mousemove', this.boundRubberMove);
+        globalThis.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.includes('__')) {
+                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) {
+        globalThis.removeEventListener('mousemove', this.boundRubberMove);
+        globalThis.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) => Number.parseFloat(x));
+                if (p.length >= 6 && p.every((n) => !Number.isNaN(Number(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 fallbackRows = result ? [result] : [];
+            const resultRows = Array.isArray(result?.results) ? result.results : fallbackRows;
+            const rows = Array.isArray(result) ? result : resultRows;
+            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)) {
+            if (Array.isArray(imported?.dashboardElements)) {
+                imported = imported.dashboardElements;
+            }
+            else if (Array.isArray(imported?.elements)) {
+                imported = imported.elements;
+            }
+            else {
+                imported = [];
+            }
+        }
+        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 (!Number.isNaN(Number(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) {
@@ -8007,13 +9106,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;
         }
@@ -8087,7 +9187,7 @@ class DesignerComponent {
             if (value instanceof BehaviorSubject) {
                 return unwrapEntry(value.value);
             }
-            if (value && typeof value === 'object' && Object.prototype.hasOwnProperty.call(value, 'value')) {
+            if (value && typeof value === 'object' && Object.hasOwn(value, 'value')) {
                 return unwrapEntry(value.value);
             }
             if (Array.isArray(value)) {
@@ -8151,7 +9251,7 @@ class DesignerComponent {
             if (idValue === undefined || idValue === null || idValue === '') {
                 if (!isDeleted && allowMissingIdInsert) {
                     const temporaryId = nextTemporaryNumericId(nextList, idKey);
-                    const rowWithId = Object.assign({}, originalRow || {}, row, { [idKey]: temporaryId });
+                    const rowWithId = { ...originalRow, ...row, [idKey]: temporaryId };
                     nextList.push(rowWithId);
                 }
                 return nextList;
@@ -8164,10 +9264,10 @@ class DesignerComponent {
                 return nextList;
             }
             if (idx >= 0) {
-                nextList[idx] = Object.assign({}, nextList[idx], row);
+                nextList[idx] = { ...nextList[idx], ...row };
             }
             else {
-                nextList.push(Object.assign({}, originalRow || {}, row));
+                nextList.push({ ...originalRow, ...row });
             }
             return nextList;
         };
@@ -8199,7 +9299,7 @@ class DesignerComponent {
         else if (normalizedEditorKey === 'CG_Id') {
             const tableMetadata = hostDatasource?.metaInfo?.tableMetadata;
             if (tableMetadata) {
-                const normalizedConditionGroup = Object.assign({}, normalizedOriginal || {}, normalizedData || {});
+                const normalizedConditionGroup = { ...normalizedOriginal, ...normalizedData };
                 if (normalizedConditionGroup.CG_Id === undefined || normalizedConditionGroup.CG_Id === null || normalizedConditionGroup.CG_Id === '') {
                     const fallbackGroupId = normalizedConditionGroup.__guid ?? normalizedOriginal?.__guid;
                     if (fallbackGroupId !== undefined && fallbackGroupId !== null && String(fallbackGroupId) !== '') {
@@ -8224,7 +9324,11 @@ class DesignerComponent {
                 const linkedGroup = hasGroupId
                     ? conditionGroups.find((row) => String(row?.CG_Id ?? row?.FK_CG_Id ?? row?.__guid ?? '') === String(rawGroupId))
                     : null;
-                const normalizedConditionItem = Object.assign({}, linkedGroup || {}, normalizedOriginal || {}, normalizedData || {});
+                const normalizedConditionItem = {
+                    ...(linkedGroup || {}),
+                    ...(normalizedOriginal || {}),
+                    ...(normalizedData || {})
+                };
                 if (hasGroupId) {
                     normalizedConditionItem.CG_Id = rawGroupId;
                 }
@@ -8252,7 +9356,7 @@ class DesignerComponent {
                     WtoolboxService.errorHandler?.handleError(new Error('FK_CG_Id obbligatorio: impossibile salvare Condition Action Group senza gruppo condizione.'));
                     return;
                 }
-                const normalizedActionGroup = Object.assign({}, normalizedOriginal || {}, normalizedData || {});
+                const normalizedActionGroup = { ...normalizedOriginal, ...normalizedData };
                 if (hasGroupId) {
                     normalizedActionGroup.FK_CG_Id = rawGroupId;
                 }
@@ -8292,7 +9396,7 @@ class DesignerComponent {
                     WtoolboxService.errorHandler?.handleError(new Error('FK_CAG_Id obbligatorio: impossibile salvare Condition Action Item senza gruppo azione condizione.'));
                     return;
                 }
-                const normalizedActionItem = Object.assign({}, normalizedOriginal || {}, normalizedData || {});
+                const normalizedActionItem = { ...normalizedOriginal, ...normalizedData };
                 if (hasActionGroupId) {
                     normalizedActionItem.FK_CAG_Id = rawActionGroupId;
                     if (normalizedActionItem.CAG_Id === undefined || normalizedActionItem.CAG_Id === null || normalizedActionItem.CAG_Id === '') {
@@ -8355,7 +9459,7 @@ class DesignerComponent {
             publishDatasource(this['datasourceTabelle']);
             if (hostDatasource?.resultInfo?.current) {
                 Object.keys(hostDatasource.resultInfo.current).forEach((field) => {
-                    if (hostTableMetadata && Object.prototype.hasOwnProperty.call(hostTableMetadata, field) && hostDatasource.resultInfo.current[field]?.next) {
+                    if (hostTableMetadata && Object.hasOwn(hostTableMetadata, field) && hostDatasource.resultInfo.current[field]?.next) {
                         hostDatasource.resultInfo.current[field].next(hostTableMetadata[field]);
                     }
                 });
@@ -8489,12 +9593,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;
             }
@@ -8575,18 +9676,21 @@ class DesignerComponent {
         if (!fieldEditorHost) {
             return null;
         }
-        const normalize = (v) => String(v || '')
-            .replace('*', '')
-            .replace(/\s+/g, ' ')
-            .trim()
-            .toLowerCase();
         return {
             dataFieldId: Number(fieldEditorHost.getAttribute('data-field-id') || 0),
             dataFieldName: String(fieldEditorHost.getAttribute('data-field-name') || '').trim(),
             forAttr: String(fieldEditorHost.querySelector('label.caption')?.getAttribute('for') || '').trim(),
-            labelText: normalize(fieldEditorHost.querySelector('label.caption')?.textContent || '')
+            labelText: this.normalizeFieldEditorLabel(fieldEditorHost.querySelector('label.caption')?.textContent || '')
         };
     }
+    /** Normalizzazione condivisa delle label field-editor (no asterisco, spazi collassati, lowercase). */
+    normalizeFieldEditorLabel(v) {
+        return String(v || '')
+            .replace('*', '')
+            .replaceAll(/\s+/g, ' ')
+            .trim()
+            .toLowerCase();
+    }
     matchContextFieldColumn(cols, hints) {
         if (!Array.isArray(cols) || !hints) {
             return null;
@@ -8612,12 +9716,7 @@ class DesignerComponent {
             }
         }
         if (hints.labelText) {
-            const normalize = (v) => String(v || '')
-                .replace('*', '')
-                .replace(/\s+/g, ' ')
-                .trim()
-                .toLowerCase();
-            const byLabel = cols.find((c) => normalize(c?.mc_display_string_in_edit) === hints.labelText);
+            const byLabel = cols.find((c) => this.normalizeFieldEditorLabel(c?.mc_display_string_in_edit) === hints.labelText);
             if (byLabel) {
                 return byLabel;
             }
@@ -9307,6 +10406,20 @@ class DesignerComponent {
     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);
@@ -9314,11 +10427,30 @@ class DesignerComponent {
             const extraProps = this.ensureMergedExtraProps(metaInfo);
             extraProps.archetypes = extraProps.archetypes || {};
             const currentArchetype = extraProps.archetypes[action] || {};
-            extraProps.archetypes[action] = Object.assign({}, currentArchetype, nextConfig);
+            extraProps.archetypes[action] = { ...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();
         }
@@ -9385,7 +10517,7 @@ class DesignerComponent {
         if (!raw) {
             return null;
         }
-        const rgbaMatch = raw.match(/^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([0-9]*\.?[0-9]+)\s*\)$/i);
+        const rgbaMatch = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d*\.?\d+)\s*\)$/i.exec(raw);
         if (rgbaMatch) {
             return {
                 r: this.clampRgbChannel(rgbaMatch[1]),
@@ -9394,7 +10526,7 @@ class DesignerComponent {
                 a: this.clampColorAlpha(rgbaMatch[4])
             };
         }
-        const rgbMatch = raw.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i);
+        const rgbMatch = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(raw);
         if (rgbMatch) {
             return {
                 r: this.clampRgbChannel(rgbMatch[1]),
@@ -9406,26 +10538,26 @@ class DesignerComponent {
         const hex = raw.replace('#', '');
         if (/^[0-9a-f]{3}$/i.test(hex)) {
             return {
-                r: parseInt(hex[0] + hex[0], 16),
-                g: parseInt(hex[1] + hex[1], 16),
-                b: parseInt(hex[2] + hex[2], 16),
+                r: Number.parseInt(hex[0] + hex[0], 16),
+                g: Number.parseInt(hex[1] + hex[1], 16),
+                b: Number.parseInt(hex[2] + hex[2], 16),
                 a: 1
             };
         }
         if (/^[0-9a-f]{6}$/i.test(hex)) {
             return {
-                r: parseInt(hex.slice(0, 2), 16),
-                g: parseInt(hex.slice(2, 4), 16),
-                b: parseInt(hex.slice(4, 6), 16),
+                r: Number.parseInt(hex.slice(0, 2), 16),
+                g: Number.parseInt(hex.slice(2, 4), 16),
+                b: Number.parseInt(hex.slice(4, 6), 16),
                 a: 1
             };
         }
         if (/^[0-9a-f]{8}$/i.test(hex)) {
             return {
-                r: parseInt(hex.slice(0, 2), 16),
-                g: parseInt(hex.slice(2, 4), 16),
-                b: parseInt(hex.slice(4, 6), 16),
-                a: this.clampColorAlpha(parseInt(hex.slice(6, 8), 16) / 255)
+                r: Number.parseInt(hex.slice(0, 2), 16),
+                g: Number.parseInt(hex.slice(2, 4), 16),
+                b: Number.parseInt(hex.slice(4, 6), 16),
+                a: this.clampColorAlpha(Number.parseInt(hex.slice(6, 8), 16) / 255)
             };
         }
         return null;
@@ -9436,14 +10568,14 @@ class DesignerComponent {
         let g = 255;
         let b = 255;
         if (/^[0-9a-f]{3}$/i.test(hex)) {
-            r = parseInt(hex[0] + hex[0], 16);
-            g = parseInt(hex[1] + hex[1], 16);
-            b = parseInt(hex[2] + hex[2], 16);
+            r = Number.parseInt(hex[0] + hex[0], 16);
+            g = Number.parseInt(hex[1] + hex[1], 16);
+            b = Number.parseInt(hex[2] + hex[2], 16);
         }
         else if (/^[0-9a-f]{6}$/i.test(hex)) {
-            r = parseInt(hex.slice(0, 2), 16);
-            g = parseInt(hex.slice(2, 4), 16);
-            b = parseInt(hex.slice(4, 6), 16);
+            r = Number.parseInt(hex.slice(0, 2), 16);
+            g = Number.parseInt(hex.slice(2, 4), 16);
+            b = Number.parseInt(hex.slice(4, 6), 16);
         }
         const alpha = this.clampColorAlpha(alphaRaw);
         return `rgba(${r}, ${g}, ${b}, ${Number(alpha.toFixed(2))})`;
@@ -9536,7 +10668,6 @@ class DesignerComponent {
         }
         if (!prevAction) {
             prevAction = createAction(prevActionCaption, prevActionCallback, prevActiondisableCallback, 'wizard-prev-btn', 1);
-            needPublish = true;
         }
         else {
             prevAction.button_image = 'wizard-prev-btn';
@@ -9544,20 +10675,25 @@ class DesignerComponent {
         }
         if (!nextAction) {
             nextAction = createAction(nextActionCaption, nextActionCallback, nextActiondisableCallback, 'wizard-next-btn', 3);
-            needPublish = true;
         }
         else {
             nextAction.button_image = 'wizard-next-btn';
             nextAction.ordine = 3;
         }
-        // if (needPublish) {
         this.publishDesignerDatasourceState(hostDatasource);
         this.commitHistoryIfChanged();
         // }
         if (!nextAction) {
             return;
         }
-        await this.openTableActionEditorDialog(target === 'end' ? completeAction : target === 'prev' ? prevAction : nextAction, hostDatasource);
+        let actionToEdit = nextAction;
+        if (target === 'end') {
+            actionToEdit = completeAction;
+        }
+        else if (target === 'prev') {
+            actionToEdit = prevAction;
+        }
+        await this.openTableActionEditorDialog(actionToEdit, hostDatasource);
     }
     /**
      * Restituisce un Id temporaneo negativo non usato per nuove table action in-memory.
@@ -9731,7 +10867,7 @@ class DesignerComponent {
     async openLabelDisplayFormulaEditor(inputs, tool) {
         const displayField = String(inputs?.displayField || '').trim();
         const defaultFormula = displayField
-            ? `return dataItem?.['${displayField.replace(/'/g, "\\'")}'] ?? '';`
+            ? `return dataItem?.['${displayField.replaceAll('\'', "\\'")}'] ?? '';`
             : "return dataItem?.[inputs?.displayField] ?? '';";
         await this.openSelectDisplayFormulaEditor(inputs, tool, defaultFormula);
     }
@@ -9787,11 +10923,10 @@ class DesignerComponent {
         const masterRoute = this.getDatasourceRouteName(masterDatasource || {});
         const detailRoute = this.getDatasourceRouteName(detailDatasource || {});
         const masterPrimaryKey = this.getDatasourcePrimaryKey(masterDatasource || {});
-        const masterPkValueExpression = masterPrimaryKey
-            ? (/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(masterPrimaryKey)
-                ? `dataItem?.${masterPrimaryKey}`
-                : 'dataItem?.id')
+        const masterPkExpression = /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(masterPrimaryKey || '')
+            ? `dataItem?.${masterPrimaryKey}`
             : 'dataItem?.id';
+        const masterPkValueExpression = masterPrimaryKey ? masterPkExpression : 'dataItem?.id';
         const propsBag = {
             customEditorConfig: {
                 editorOptions: {
@@ -9821,7 +10956,7 @@ class DesignerComponent {
             : null;
         const detailFkField = fkFromLookup || fkFromNameMatch || (detailColumns.length ? detailColumns[0] : '');
         const defaultFormula = detailFkField
-            ? `// Detail columns (use one as first argument of setFilter):\n${detailColumnsHint}\nsetFilter('${detailFkField.replace(/'/g, "\\'")}', ${masterPkValueExpression}, 'eq');`
+            ? `// Detail columns (use one as first argument of setFilter):\n${detailColumnsHint}\nsetFilter('${detailFkField.replaceAll('\'', "\\'")}', ${masterPkValueExpression}, 'eq');`
             : `// Detail columns (use one as first argument of setFilter):\n${detailColumnsHint}\n// Example:\n// setFilter('detail_fk', ${masterPkValueExpression}, 'eq');`;
         const result = await WtoolboxService.promptDialog('Master-Detail Filter Formula', [
             {
@@ -9858,7 +10993,7 @@ class DesignerComponent {
                 if (/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(col)) {
                     return `  ${col}: any;`;
                 }
-                return `  '${col.replace(/'/g, "\\'")}': any;`;
+                return `  '${col.replaceAll('\'', "\\'")}': any;`;
             }).join('\n');
         };
         const detailCommentRows = detailColumns.length
@@ -9906,7 +11041,7 @@ ${detailCommentRows}
                 if (/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(key)) {
                     return `  ${key}: any;`;
                 }
-                return `  '${key.replace(/'/g, "\\'")}': any;`;
+                return `  '${key.replaceAll('\'', "\\'")}': any;`;
             }).join('\n')
             : '  [key: string]: any;';
         const routeComment = routeName ? `route: ${routeName}` : 'route: n/a';
@@ -9998,8 +11133,8 @@ Display formula context:
             propsFromBag = {};
         }
         const current = metaInfo?.tableMetadata?.extraProps || {};
-        const merged = Object.assign({}, propsFromBag, current);
-        merged.archetypes = Object.assign({}, propsFromBag?.archetypes || {}, current?.archetypes || {});
+        const merged = { ...propsFromBag, ...current };
+        merged.archetypes = { ...propsFromBag?.archetypes, ...current?.archetypes };
         return merged;
     }
     /**
@@ -10035,8 +11170,8 @@ Display formula context:
             propsFromBag = {};
         }
         const current = tableMetadata.extraProps || {};
-        const merged = Object.assign({}, propsFromBag, current);
-        merged.archetypes = Object.assign({}, propsFromBag?.archetypes || {}, current?.archetypes || {});
+        const merged = { ...propsFromBag, ...current };
+        merged.archetypes = { ...propsFromBag?.archetypes, ...current?.archetypes };
         tableMetadata.extraProps = merged;
     }
     /**
@@ -10051,8 +11186,8 @@ Display formula context:
         const AsyncFunction = Object.getPrototypeOf(async function () { }).constructor;
         const normalizeDynamicScript = (source) => String(source || '')
             .replace(/^\uFEFF/, '')
-            .replace(/\u0000/g, '')
-            .replace(/\u2028|\u2029/g, '\n');
+            .replaceAll(/\u0000/g, '')
+            .replaceAll(/[\u2028\u2029]/g, '\n');
         actions.forEach((action) => {
             if (!action || typeof action !== 'object') {
                 return;
@@ -10062,7 +11197,7 @@ Display formula context:
                 try {
                     const body = WtoolboxService.buildAsyncBody(actionScript);
                     action.action_callback__fn = actionScript
-                        ? new AsyncFunction('datasource, metaInfo, record, event, wtoolbox', body)
+                        ? (new AsyncFunction('datasource, metaInfo, record, event, wtoolbox', body))
                         : async () => { };
                 }
                 catch {
@@ -10205,10 +11340,6 @@ Display formula context:
             }
         }
         else if (deltaRows < 0) {
-            for (let i = tool.nestedComponents.length; i >= Math.abs(deltaRows); i--) {
-                let trTool = tool.nestedComponents[i - 1];
-                // trTool.nestedComponents = [];
-            }
             tool.nestedComponents.splice(deltaRows, Math.abs(deltaRows));
         }
         else if (deltaCols > 0) {
@@ -10267,14 +11398,10 @@ Display formula context:
             }
         }
         else if (deltaAreas < 0) {
-            for (let i = tool.nestedComponents.length; i >= Math.abs(deltaAreas); i--) {
-                let trTool = tool.nestedComponents[i - 1];
-                // trTool.nestedComponents = [];
-            }
             tool.nestedComponents.splice(deltaAreas, Math.abs(deltaAreas));
         }
-        for (let i = 0; i < tool.nestedComponents.length; i++) {
-            tool.nestedComponents[i].inputs['size'] = 100 / tool.nestedComponents.length;
+        for (const nestedComponent of tool.nestedComponents) {
+            nestedComponent.inputs['size'] = 100 / tool.nestedComponents.length;
         }
         this.flattenedDashboardElements = this.flattenComponentTree(this.dashboardElements);
         obj[prop] = newValue;
@@ -10304,14 +11431,10 @@ Display formula context:
             }
         }
         else if (deltaItems < 0) {
-            for (let i = tool.nestedComponents.length; i >= Math.abs(deltaItems); i--) {
-                let trTool = tool.nestedComponents[i - 1];
-                // trTool.nestedComponents = [];
-            }
             tool.nestedComponents.splice(deltaItems, Math.abs(deltaItems));
         }
-        for (let i = 0; i < tool.nestedComponents.length; i++) {
-            tool.nestedComponents[i].inputs['size'] = 100 / tool.nestedComponents.length;
+        for (const nestedComponent of tool.nestedComponents) {
+            nestedComponent.inputs['size'] = 100 / tool.nestedComponents.length;
         }
         this.flattenedDashboardElements = this.flattenComponentTree(this.dashboardElements);
         obj[prop] = newValue;
@@ -10325,7 +11448,8 @@ Display formula context:
         if (currentTool.name == 'TABLE') {
             let tr = this.availableTools.find(x => x.name == 'TR');
             let td = this.availableTools.find(x => x.name == 'TD');
-            let table = this.availableTools.find(x => x.name == 'TABLE');
+            let table;
+            this.availableTools.find(x => x.name == 'TABLE');
             for (let i = 1; i <= currentTool.inputs['rows']; i++) {
                 let tr1 = JSON.parse(JSON.stringify(tr));
                 tr1.inputs.width = undefined;
@@ -10473,16 +11597,14 @@ Display formula context:
                         }
                     });
                 }
+                else if (currentTool.inputProps[prop].type == 'dropped-component') {
+                    currentTool.inputs[prop] = { component: new BehaviorSubject(currentTool.inputs[prop]), id: currentTool.componentId, name: currentTool.name, uniqueName: currentTool.uniqueName };
+                }
+                else if (currentTool.inputProps[prop].type == 'function') {
+                    currentTool.inputs[prop] = this.draggedPayload.inputs[prop].bind(currentTool.inputs);
+                }
                 else {
-                    if (currentTool.inputProps[prop].type == 'dropped-component') {
-                        currentTool.inputs[prop] = { component: new BehaviorSubject(currentTool.inputs[prop]), id: currentTool.componentId, name: currentTool.name, uniqueName: currentTool.uniqueName };
-                    }
-                    else if (currentTool.inputProps[prop].type == 'function') {
-                        currentTool.inputs[prop] = this.draggedPayload.inputs[prop].bind(currentTool.inputs);
-                    }
-                    else {
-                        currentTool.inputs[prop] = currentTool.inputs[prop];
-                    }
+                    currentTool.inputs[prop] = currentTool.inputs[prop];
                 }
                 if (this.draggedPayload.inputProps[prop].conditional) {
                     currentTool.inputProps[prop].conditional = this.draggedPayload.inputProps[prop].conditional;
@@ -10512,6 +11634,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;
@@ -10519,14 +11642,14 @@ Display formula context:
                     id = parentEl.getAttribute("id");
                     parentEl = parentEl.parentElement;
                 }
-                if (id && id.indexOf("__") > -1) {
-                    let componentId = parseInt(id.split("__")[1]);
+                if (id?.includes("__")) {
+                    let componentId = Number.parseInt(id.split("__")[1]);
                     let match = null;
-                    // let parent = this.dashboardElements;
                     match = (this.flattenedDashboardElements || []).find(x => x.componentId == componentId);
                     if (match) {
                         if (!match.allowedChildren || match.allowedChildren.includes(currentTool.name)) {
                             destination = match?.nestedComponents;
+                            parentContainerTool = match;
                         }
                         else {
                             WtoolboxService.messageNotificationService.add({
@@ -10552,11 +11675,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`.
      */
@@ -10600,12 +11780,15 @@ Display formula context:
         const savedState = this.propertySectionStateByTool[toolKey] || {};
         return sectionOrder
             .filter((key) => grouped[key].length > 0)
-            .map((key) => ({
-            key: key,
-            label: labels[key],
-            open: (propFilter && propFilter.length >= 3 && grouped[key].length) ? true : (savedState[key] !== undefined ? !!savedState[key] : openByDefault[key]),
-            props: grouped[key]
-        }));
+            .map((key) => {
+            const savedOpen = savedState[key] !== undefined ? !!savedState[key] : openByDefault[key];
+            return {
+                key: key,
+                label: labels[key],
+                open: (propFilter && propFilter.length >= 3 && grouped[key].length) ? true : savedOpen,
+                props: grouped[key]
+            };
+        });
     }
     clearPropFilter() {
         this.propFilter = "";
@@ -10648,7 +11831,7 @@ Display formula context:
             return this.getRepeaterAction(tool) !== 'wizard';
         }
         if (propFilter && propFilter.length >= 3) {
-            return toolProp.key.toLocaleLowerCase().indexOf(propFilter.toLocaleLowerCase()) < 0;
+            return !toolProp.key.toLocaleLowerCase().includes(propFilter.toLocaleLowerCase());
         }
         return false;
     }
@@ -10764,7 +11947,7 @@ Display formula context:
         return value;
     }
     mergeToolPropDefinition(baseDef, currentDef) {
-        const merged = { ...(baseDef || {}), ...(currentDef || {}) };
+        const merged = { ...(baseDef), ...(currentDef) };
         if (!merged.converter && baseDef?.converter) {
             merged.converter = baseDef.converter;
         }
@@ -10790,7 +11973,7 @@ Display formula context:
             if (template?.inputProps) {
                 Object.keys(template.inputProps).forEach((key) => {
                     element.inputProps[key] = this.mergeToolPropDefinition(template.inputProps[key], element.inputProps[key]);
-                    if (element.inputs[key] === undefined && template.inputs && template.inputs[key] !== undefined) {
+                    if (element.inputs[key] === undefined && template.inputs?.[key] !== undefined) {
                         element.inputs[key] = this.cloneInputDefaultValue(template.inputs[key]);
                     }
                 });
@@ -10845,7 +12028,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 = {
@@ -10931,14 +12187,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 = '';
@@ -10952,8 +12212,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) {
@@ -10962,18 +12224,20 @@ Display formula context:
                 dashRoute: dashRoute
             };
             result = await this.dataSrv.loadDashboard(payload);
-            resultRows = Array.isArray(result)
-                ? 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);
+            const singleRows = result ? [result] : [];
+            const wrappedRows = Array.isArray((result)?.results) ? (result).results : singleRows;
+            resultRows = Array.isArray(result) ? result : wrappedRows;
+        }
+        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 = [];
@@ -10984,14 +12248,29 @@ Display formula context:
                 loadedDashboard = [];
             }
             if (!Array.isArray(loadedDashboard)) {
-                loadedDashboard = Array.isArray(loadedDashboard?.dashboardElements)
-                    ? loadedDashboard.dashboardElements
-                    : Array.isArray(loadedDashboard?.elements)
-                        ? loadedDashboard.elements
-                        : [];
+                // Forma wrapper-object: puo' trasportare flag board-level come
+                // `widgetChrome` (chrome card dei widget, vedi <wuic-dashboard>).
+                if (!insertTarget) {
+                    const chrome = loadedDashboard?.widgetChrome;
+                    this.dashboardWidgetChrome = chrome === true || String(chrome ?? '').trim().toLowerCase() === 'true' || String(chrome ?? '').trim() === '1';
+                }
+                if (Array.isArray(loadedDashboard?.dashboardElements)) {
+                    loadedDashboard = loadedDashboard.dashboardElements;
+                }
+                else if (Array.isArray(loadedDashboard?.elements)) {
+                    loadedDashboard = loadedDashboard.elements;
+                }
+                else {
+                    loadedDashboard = [];
+                }
+            }
+            else if (!insertTarget) {
+                this.dashboardWidgetChrome = false;
             }
             this.mergeMissingToolPropsRecursive(loadedDashboard);
-            this.dashboardComponents = [];
+            if (!insertTarget) {
+                this.dashboardComponents = [];
+            }
             let dsSubs = [];
             let dsElements = [];
             let dsElementCount = (loadedDashboard || []).filter(x => x?.name == 'DATASOURCE').length;
@@ -11044,18 +12323,16 @@ Display formula context:
                                 uniqueName: element.uniqueName
                             });
                         }
+                        else if (element.inputProps[prop].asyncPath) {
+                            const path = element.inputProps[prop].asyncPath;
+                            const rawValue = element.inputs[prop] ?? {};
+                            element.inputs[prop] = new BehaviorSubject({
+                                ...rawValue,
+                                [path]: new BehaviorSubject(rawValue?.[path] ?? null)
+                            });
+                        }
                         else {
-                            if (element.inputProps[prop].asyncPath) {
-                                const path = element.inputProps[prop].asyncPath;
-                                const rawValue = element.inputs[prop] ?? {};
-                                element.inputs[prop] = new BehaviorSubject({
-                                    ...rawValue,
-                                    [path]: new BehaviorSubject(rawValue?.[path] ?? null)
-                                });
-                            }
-                            else {
-                                element.inputs[prop] = new BehaviorSubject(element.inputs[prop]);
-                            }
+                            element.inputs[prop] = new BehaviorSubject(element.inputs[prop]);
                         }
                         element.inputs[prop].subscribe((v) => {
                             if (v?.component) {
@@ -11089,7 +12366,7 @@ Display formula context:
                                                             }
                                                         }
                                                     }
-                                                    if (!dsElements.find(x => x.uniqueName == v.uniqueName)) {
+                                                    if (!dsElements.some(x => x.uniqueName == v.uniqueName)) {
                                                         dsSubs.push(v.component.fetchInfo$);
                                                         dsElements.push(dsElement);
                                                         if (dsElements.length == dsElementCount) {
@@ -11133,18 +12410,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);
     }
@@ -11258,11 +12551,15 @@ Display formula context:
             loadedDashboard = [];
         }
         if (!Array.isArray(loadedDashboard)) {
-            loadedDashboard = Array.isArray(loadedDashboard?.dashboardElements)
-                ? loadedDashboard.dashboardElements
-                : Array.isArray(loadedDashboard?.elements)
-                    ? loadedDashboard.elements
-                    : [];
+            if (Array.isArray(loadedDashboard?.dashboardElements)) {
+                loadedDashboard = loadedDashboard.dashboardElements;
+            }
+            else if (Array.isArray(loadedDashboard?.elements)) {
+                loadedDashboard = loadedDashboard.elements;
+            }
+            else {
+                loadedDashboard = [];
+            }
         }
         this.mergeMissingToolPropsRecursive(loadedDashboard);
         this.dashboardComponents = [];
@@ -11317,7 +12614,14 @@ Display formula context:
                 if (!propDef.async && propDef.asyncPath && (propDef.type === 'dropped-component-list' || propDef.type === 'dropped-component')) {
                     const path = propDef.asyncPath;
                     const rawValue = element.inputs[prop];
-                    console.log(`[HYDRATE-v9] ${element.name}.${prop}: rawValue=${rawValue === null ? 'NULL' : rawValue === undefined ? 'UNDEF' : 'object'} uniqueName=${rawValue?.uniqueName} keys=${rawValue ? Object.keys(rawValue) : '[]'}`);
+                    let rawValueKind = 'object';
+                    if (rawValue === null) {
+                        rawValueKind = 'NULL';
+                    }
+                    else if (rawValue === undefined) {
+                        rawValueKind = 'UNDEF';
+                    }
+                    console.log(`[HYDRATE-v9] ${element.name}.${prop}: rawValue=${rawValueKind} uniqueName=${rawValue?.uniqueName} keys=${rawValue ? Object.keys(rawValue) : '[]'}`);
                     if (rawValue && typeof rawValue === 'object' && !(rawValue instanceof BehaviorSubject)) {
                         // Only hydrate the component BS — do NOT invent a uniqueName if the
                         // snapshot didn't have one. That would create a false binding on undo.
@@ -11380,7 +12684,7 @@ Display formula context:
                                                         }
                                                     }
                                                 }
-                                                if (!dsElements.find(de => de.uniqueName == v.uniqueName)) {
+                                                if (!dsElements.some(de => de.uniqueName == v.uniqueName)) {
                                                     dsSubs.push(v.component.fetchInfo$);
                                                     dsElements.push(dsElement);
                                                     if (dsElements.length == dsElementCount) {
@@ -11881,10 +13185,10 @@ Display formula context:
      */
     openCurrentDashboardInNewTab() {
         const route = String(this.currentDashboardRoute || '').trim();
-        if (!route || typeof window === 'undefined') {
+        if (!route || globalThis.window === undefined) {
             return;
         }
-        const base = window.location.href.split('#')[0];
+        const base = globalThis.location.href.split('#')[0];
         const url = `${base}#/${encodeURIComponent(route)}/dashboard`;
         window.open(url, '_blank');
     }
@@ -11904,11 +13208,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: "@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                          <!-- updateOn:blur come il txt_area sopra: senza, setValue() scatta\n                               A OGNI CARATTERE e buildSerializedDashboardElements ri-serializza\n                               l'intero tree (history da centinaia di KB per tasto, P-D1). -->\n                          <input style=\"width: 100%;\" type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\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\" [widgetChrome]=\"dashboardWidgetChrome\"></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: i5.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: i6.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$1.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", "widgetChrome"] }, { 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: 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: i8.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: "@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                          <!-- updateOn:blur come il txt_area sopra: senza, setValue() scatta\n                               A OGNI CARATTERE e buildSerializedDashboardElements ri-serializza\n                               l'intero tree (history da centinaia di KB per tasto, P-D1). -->\n                          <input style=\"width: 100%;\" type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\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\" [widgetChrome]=\"dashboardWidgetChrome\"></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']
@@ -11930,7 +13234,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-DA7abiLW.mjs.map
+//# sourceMappingURL=wuic-framework-lib-designer.component-Bd2fwl6H.mjs.map