wuic-framework-lib 1.5.0 → 1.7.0

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

@@ -5,24 +5,24 @@ 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-3TZ-j-yL.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 i2$3 from '@ngx-translate/core';
+import * as i8 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i1$1 from '@angular/router';
 import { UrlSegmentGroup, UrlTree, ActivatedRouteSnapshot, RouterStateSnapshot, RouterState, ActivatedRoute } from '@angular/router';
 import { SafeSubscriber } from 'rxjs/internal/Subscriber';
-import * as i10$1 from 'primeng/contextmenu';
+import * as i14 from 'primeng/contextmenu';
 import { ContextMenuModule } from 'primeng/contextmenu';
 import * as i3 from 'primeng/api';
 import { TreeDragDropService } from 'primeng/api';
@@ -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
@@ -527,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));
     }
     /**
@@ -536,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) {
@@ -552,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) {
@@ -654,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
@@ -749,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.
@@ -764,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;
@@ -852,7 +847,7 @@ 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;
             }
@@ -868,7 +863,7 @@ class NgxDraggableDomDirective {
             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;
@@ -915,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' ||
@@ -954,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];
@@ -963,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;
@@ -1021,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
@@ -1143,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);
@@ -1168,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);
@@ -1196,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);
@@ -1221,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);
@@ -1345,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;
@@ -1379,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);
                 }
             }
         }
@@ -1395,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;
         }
@@ -1455,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;
         }
@@ -1506,7 +1501,7 @@ class HelperBlock {
     }
     remove() {
         if (this.parent && this._added) {
-            this.parent.removeChild(this._helper);
+            this._helper.remove();
             this._added = false;
         }
     }
@@ -1693,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 */
@@ -1725,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.
@@ -1752,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;
         }
@@ -1786,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()));
         }
@@ -1862,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:
@@ -2029,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;
@@ -2059,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;
@@ -2137,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;
@@ -2158,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();
@@ -2251,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;
@@ -3145,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']
@@ -3221,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.
      */
@@ -3487,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;
                 }
@@ -3506,10 +3501,6 @@ class DynamicDashboardTemplateComponent {
   * @param parentElement Parametro utilizzato dal metodo nel flusso elaborativo.
   */
     onResizing(event, element, parentElement) {
-        if (parentElement) {
-        }
-        else {
-        }
         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
@@ -3522,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];
             }
@@ -3679,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');
     }
     /**
@@ -3695,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,
@@ -3779,6 +3766,18 @@ 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`).
@@ -3828,13 +3827,18 @@ 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" }, host: { properties: { "class.wuic-dashboard-absolute-layout": "this.hasAbsoluteLayout" } }, ngImport: i0, template: "@for (dashboardElement of dashboardElements; track dashboardElement.uniqueName) {\r\n<ng-container *ngComponentOutlet=\"getComponent(dashboardElement); inputs: getComponentInputs(dashboardElement)\"></ng-container>\r\n}\r\n", styles: [":host(.wuic-dashboard-absolute-layout){position:relative;display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
+    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", styles: [":host(.wuic-dashboard-absolute-layout){position:relative;display:block;width:100%;height:100%}\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']
@@ -3905,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.
@@ -4114,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;
     }
@@ -4220,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.
@@ -4236,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 '';
         }
@@ -4284,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,
@@ -4555,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;
@@ -4917,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];
                 });
@@ -4976,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,
@@ -5013,7 +4856,7 @@ class DesignerComponent {
                 tag: ``,
                 icon: 'pi pi-bars',
                 inputProps: this.htmlInputProperties,
-                inputs: Object.assign({}, tableFullInputs, { cssClass: [] }),
+                inputs: { ...tableFullInputs, cssClass: [] },
                 nestedComponents: []
             },
             {
@@ -5023,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,
@@ -5048,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
@@ -5057,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
@@ -5084,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
@@ -5093,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
@@ -5102,47 +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.replace(/0/g, 'inputs')}></wuic-image-wrapper-lazy>`,
+                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: Object.assign({}, this.htmlInputProperties, {
+                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: Object.assign({}, this.htmlInputs, {
+                },
+                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>
@@ -5152,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
@@ -5182,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,
@@ -5244,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',
@@ -5263,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',
@@ -5282,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',
@@ -5307,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',
@@ -5353,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' },
@@ -5369,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',
@@ -5382,7 +5254,7 @@ class DesignerComponent {
                     disabled: false,
                     width: '200px',
                     height: '96px'
-                })
+                }
             },
             {
                 group: 'DATA',
@@ -5457,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
@@ -5469,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,
@@ -5484,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']
             },
@@ -5515,8 +5388,8 @@ class DesignerComponent {
                 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>`,
@@ -5543,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>
@@ -5584,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)
@@ -5735,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)
@@ -5764,7 +5640,7 @@ class DesignerComponent {
                     // risolvibile dentro DATASOURCE__6" e i DATAREPEATER restano 0/3. Cosi'
                     // tutti i nodi di un layout multi-cella risolvono contro lo stesso container.
                     const PLACEHOLDER_CONTAINERS = ['TABLE', 'SPLITTER', 'ACCORDION', 'TABVIEW'];
-                    if (PLACEHOLDER_CONTAINERS.indexOf(String(node.tool_name || '').toUpperCase()) >= 0) {
+                    if (PLACEHOLDER_CONTAINERS.includes(String(node.tool_name || '').toUpperCase())) {
                         lastTopLevelInjected = this.findLastInjectedNode(String(node.tool_name || ''), topParent) || lastTopLevelInjected;
                     }
                 }
@@ -5812,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).
@@ -5835,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;
@@ -6074,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
@@ -6290,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];
                     }
                 }
@@ -6320,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') {
@@ -6328,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;
                 }
             }
         }
@@ -6347,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)
@@ -6358,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('>'))
@@ -6425,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
                 };
@@ -6439,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);
@@ -6487,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)
@@ -6523,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;
@@ -6535,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]
@@ -6550,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];
@@ -6563,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;
@@ -6623,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 || [])
@@ -6668,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;
@@ -6687,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) {
@@ -6801,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;
@@ -7123,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)
@@ -7185,7 +7078,7 @@ class DesignerComponent {
                 return WtoolboxService.appSettings?.file_path;
             }
             catch {
-                return window.location.origin;
+                return globalThis.location.origin;
             }
         };
         const resolveBackendStaticBaseUrl = () => {
@@ -7194,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('/')) {
@@ -7207,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/')) {
@@ -7419,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).
         }
     }
     /**
@@ -7567,8 +7462,8 @@ class DesignerComponent {
         }
         if (key === 'c') {
             // Non intercettare Ctrl+C se l'utente sta copiando una selezione di testo.
-            const textSelection = (typeof window !== 'undefined' && window.getSelection)
-                ? String(window.getSelection() || '')
+            const textSelection = (globalThis.window !== undefined && globalThis.getSelection)
+                ? String(globalThis.getSelection() || '')
                 : '';
             if (textSelection) {
                 return;
@@ -7610,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
@@ -7885,9 +7778,11 @@ class DesignerComponent {
      */
     getDropPositionRelativeTo(event, refEl) {
         const rect = refEl ? refEl.getBoundingClientRect() : null;
-        const oe = (event && event.originalEvent) ? event.originalEvent : event;
-        const cx = (typeof oe?.clientX === 'number') ? oe.clientX : (typeof event?.clientX === 'number' ? event.clientX : null);
-        const cy = (typeof oe?.clientY === 'number') ? oe.clientY : (typeof event?.clientY === 'number' ? event.clientY : null);
+        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 };
         }
@@ -7957,8 +7852,8 @@ class DesignerComponent {
         let sx = 1, sy = 0, kx = 0, ky = 1, tx = 0, ty = 0;
         const m = String(tool.inputs['transform'] || '').match(/matrix\(([^)]+)\)/);
         if (m) {
-            const p = m[1].split(',').map((x) => parseFloat(x));
-            if (p.length >= 6 && p.every((n) => !isNaN(n))) {
+            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;
             }
         }
@@ -7981,10 +7876,10 @@ class DesignerComponent {
         }
         let scaleX = 1, skewY = 0, skewX = 0, scaleY = 1, tx = 0, ty = 0;
         const cur = String(el.inputs['transform'] || '');
-        const m = cur.match(/matrix\(([^)]+)\)/);
+        const m = /matrix\(([^)]+)\)/.exec(cur);
         if (m) {
-            const parts = m[1].split(',').map((x) => parseFloat(x));
-            if (parts.length >= 6 && parts.every((n) => !isNaN(n))) {
+            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;
             }
         }
@@ -8141,7 +8036,7 @@ class DesignerComponent {
             return undefined;
         };
         const res = walk(this.dashboardElements || []);
-        return res === undefined ? null : res;
+        return res ?? null;
     }
     /**
      * Copia l'elemento selezionato (o `ctxElement`) nel clipboard interno.
@@ -8248,8 +8143,8 @@ class DesignerComponent {
             }
             catch { /* keep raw */ }
             const routeSlug = String(this.currentDashboardRoute || 'dashboard')
-                .replace(/[^a-zA-Z0-9._-]+/g, '_')
-                .replace(/^_+|_+$/g, '') || '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);
@@ -8258,7 +8153,7 @@ class DesignerComponent {
             anchor.download = fileName;
             document.body.appendChild(anchor);
             anchor.click();
-            document.body.removeChild(anchor);
+            anchor.remove();
             setTimeout(() => URL.revokeObjectURL(url), 0);
             WtoolboxService.messageNotificationService.add({
                 severity: 'success',
@@ -8285,8 +8180,8 @@ class DesignerComponent {
         input.accept = 'application/json,.json';
         input.style.display = 'none';
         input.addEventListener('change', () => {
-            const file = input.files && input.files[0];
-            document.body.removeChild(input);
+            const file = input.files?.[0];
+            input.remove();
             if (!file) {
                 return;
             }
@@ -8325,11 +8220,9 @@ class DesignerComponent {
             return;
         }
         // Accetta sia l'array di elementi top-level sia il wrapper {elements|dashboardElements}
-        const elements = Array.isArray(parsed)
-            ? parsed
-            : (Array.isArray(parsed?.elements)
-                ? parsed.elements
-                : (Array.isArray(parsed?.dashboardElements) ? parsed.dashboardElements : null));
+        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',
@@ -8436,8 +8329,8 @@ class DesignerComponent {
         this.rubber = { startClientX: event.clientX, startClientY: event.clientY };
         this.rubberBandVisible = true;
         this.updateRubberBandStyle(event.clientX, event.clientY);
-        window.addEventListener('mousemove', this.boundRubberMove);
-        window.addEventListener('mouseup', this.boundRubberUp);
+        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 '__'). */
@@ -8445,7 +8338,7 @@ class DesignerComponent {
         let node = target;
         while (node && node !== canvasEl) {
             const id = node.getAttribute ? (node.getAttribute('id') || '') : '';
-            if (id.indexOf('__') > -1) {
+            if (id.includes('__')) {
                 return false;
             }
             node = node.parentElement;
@@ -8477,8 +8370,8 @@ class DesignerComponent {
         };
     }
     onRubberUp(event) {
-        window.removeEventListener('mousemove', this.boundRubberMove);
-        window.removeEventListener('mouseup', this.boundRubberUp);
+        globalThis.removeEventListener('mousemove', this.boundRubberMove);
+        globalThis.removeEventListener('mouseup', this.boundRubberUp);
         const rubber = this.rubber;
         this.rubber = null;
         this.rubberBandVisible = false;
@@ -8542,8 +8435,8 @@ class DesignerComponent {
             let scaleX = 1, skewY = 0, skewX = 0, scaleY = 1, tx = 0, ty = 0;
             const m = String(el.inputs['transform'] || '').match(/matrix\(([^)]+)\)/);
             if (m) {
-                const p = m[1].split(',').map((x) => parseFloat(x));
-                if (p.length >= 6 && p.every((n) => !isNaN(n))) {
+                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;
                 }
             }
@@ -8816,7 +8709,9 @@ class DesignerComponent {
         let boardcontent = null;
         try {
             const result = await this.dataSrv.loadDashboard({ user_id: this.userInfo.getuserInfo().user_id, dashRoute: route });
-            const rows = Array.isArray(result) ? result : (Array.isArray(result?.results) ? result.results : (result ? [result] : []));
+            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 {
@@ -8861,8 +8756,15 @@ class DesignerComponent {
             imported = null;
         }
         if (!Array.isArray(imported)) {
-            imported = Array.isArray(imported?.dashboardElements) ? imported.dashboardElements
-                : Array.isArray(imported?.elements) ? imported.elements : [];
+            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') });
@@ -8891,7 +8793,7 @@ class DesignerComponent {
             if (oldName) {
                 nameMap.set(oldName, newName);
             }
-            if (!isNaN(oldId)) {
+            if (!Number.isNaN(Number(oldId))) {
                 idMap.set(oldId, newId);
             }
             el.componentId = newId;
@@ -9285,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)) {
@@ -9349,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;
@@ -9362,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;
         };
@@ -9397,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) !== '') {
@@ -9422,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;
                 }
@@ -9450,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;
                 }
@@ -9490,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 === '') {
@@ -9553,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]);
                     }
                 });
@@ -9770,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;
@@ -9807,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;
             }
@@ -10507,9 +10411,9 @@ class DesignerComponent {
         // 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);
+        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;
@@ -10523,15 +10427,15 @@ 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;
+            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);
         }
@@ -10540,11 +10444,11 @@ class DesignerComponent {
         // 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).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 (Array.isArray((nextConfig).aggregates)) {
+                ds.aggregationInfo = (nextConfig).aggregates.map((x) => ({ field: x?.field, aggregate: x?.aggregate }));
             }
         }
         if (ds?.fetchData) {
@@ -10613,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]),
@@ -10622,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]),
@@ -10634,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;
@@ -10664,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))})`;
@@ -10764,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';
@@ -10772,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.
@@ -10959,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);
     }
@@ -11015,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: {
@@ -11049,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', [
             {
@@ -11086,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
@@ -11134,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';
@@ -11226,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;
     }
     /**
@@ -11263,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;
     }
     /**
@@ -11279,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;
@@ -11290,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 {
@@ -11433,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) {
@@ -11495,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;
@@ -11532,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;
@@ -11553,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;
@@ -11701,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;
@@ -11748,10 +11642,9 @@ 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)) {
@@ -11887,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 = "";
@@ -11935,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;
     }
@@ -12051,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;
         }
@@ -12077,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]);
                     }
                 });
@@ -12328,9 +12224,9 @@ Display formula context:
                 dashRoute: dashRoute
             };
             result = await this.dataSrv.loadDashboard(payload);
-            resultRows = Array.isArray(result)
-                ? result
-                : (Array.isArray(result?.results) ? result.results : (result ? [result] : []));
+            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 ??
@@ -12352,11 +12248,24 @@ 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);
             if (!insertTarget) {
@@ -12414,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) {
@@ -12459,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) {
@@ -12644,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 = [];
@@ -12703,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.
@@ -12766,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) {
@@ -13267,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');
     }
@@ -13290,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], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<!-- <button pButton type=\"button\" (click)=\"loadDashboard()\" class=\"mr-2\">{{'load' | translate}}</button> -->\n@if (!noEdit) {\n<div class=\"designer-layout\">\n  <div class=\"designer-toolbar\">\n    <div class=\"designer-current-dashboard\">{{ currentDashboardTitle }}</div>\n\n    <div class=\"designer-toolbar-spacer\"></div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"undo()\" [disabled]=\"!canUndo\">{{ 'designer.undo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"redo()\" [disabled]=\"!canRedo\">{{ 'designer.redo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" data-testid=\"designer-actions-menu-btn\" (click)=\"refreshGraphActionsMenuItems(); graphActionsMenu.toggle($event)\">{{ 'designer.actions_menu' | translate }}</button>\n      <p-menu #graphActionsMenu [popup]=\"true\" [model]=\"graphActionsMenuItems\" appendTo=\"body\"></p-menu>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"openCurrentDashboardInNewTab()\" [disabled]=\"!currentDashboardRoute\">{{\n        'designer.open_current_dashboard' | translate }}</button>\n    </div>\n  </div>\n  <div class=\"designer-main\">\n    <p-splitter [style]=\"{ height: '100%' }\" [panelSizes]=\"[15, 85]\" styleClass=\"designer-main-splitter\">\n      <ng-template pTemplate>\n        <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[35, 65]\"\n          [minSizes]=\"[20, 30]\" styleClass=\"designer-left-splitter\">\n          <ng-template pTemplate>\n            <div class=\"col flex designer-toolbox palette-panel\">\n              <ul class=\"tool-groups\">\n                @for (toolGroup of availableToolGroups; track toolGroup.group) {\n                <li class=\"tool-group-item\">\n                  <div class=\"tool-group-title\">{{ toolGroup.group }}</div>\n                  <ul class=\"tool-group-list\">\n                    @for (tool of toolGroup.tools; track tool) {\n                    <li pDraggable (onDragStart)=\"dragStart(tool)\" (onDragEnd)=\"dragEnd()\" (onDrag)=\"onDrag($event)\"\n                      (dblclick)=\"dropToolAtRoot(tool)\">\n                      <i [ngClass]=\"tool.icon\" [title]=\"tool.name\"></i>\n                    </li>\n                    }\n                  </ul>\n                </li>\n                }\n              </ul>\n            </div>\n          </ng-template>\n          <ng-template pTemplate>\n            <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[68, 32]\"\n              [minSizes]=\"[35, 20]\" styleClass=\"designer-left-bottom-splitter\">\n              <ng-template pTemplate>\n                <div class=\"properties-panel\">\n                  <p-select [style]=\"{width: '100%'}\" [options]=\"flattenedDashboardElements\" [(ngModel)]=\"tool\"\n                    optionLabel=\"uniqueName\" dataKey=\"componentId\" appendTo=\"body\" />\n                  <div class=\"designer-toolbox\">\n\n                    <span style=\"width: 100%;\">\n                      <input type=\"text\" style=\"width: calc(100% - 30px);\" [(ngModel)]=\"propFilter\"\n                        [placeholder]=\"'prop.filter' | translate\" />\n                      <button style=\"width: 25px\" (click)=\"clearPropFilter()\">X</button>\n                    </span>\n\n                    @for (section of getToolPropertySections(tool, propFilter); track section.key) {\n                    <details class=\"prop-section\" [open]=\"section.open\"\n                      (toggle)=\"onPropertySectionToggle(tool, section.key, $event)\">\n                      <summary class=\"prop-section-title\">{{ section.label }}</summary>\n                      <ul class=\"props\">\n                        @for (toolProp of section.props; track toolProp.key) {\n                        <li>\n                          @if (!toolProp.value.hideCaption) {\n                          <span>{{ toolProp.value?.propertyCaption ||\n                            toolProp.key[0].toUpperCase() + toolProp.key.slice(1)\n                            }}</span>\n                          }\n                          <br />\n                          @if (toolProp.value.type == 'button') {\n                          <p-button (click)=\"toolProp.value.callback(tool.inputs, toolProp.key, null, tool)\"\n                            class=\"k-button\" [style]=\"{width: '100%'}\">\n                            {{toolProp.value.propertyCaption}}\n                          </p-button>\n                          }\n                          @if (toolProp.value.type == 'metaEditor' &&\n                          tool.inputs['componentRef']?.value?.component) {\n                          <wuic-metadata-editor [hardcodedDatasource]=\"tool.inputs['componentRef']?.value?.component\"\n                            [saveCallback]=\"metaEditorSave\"></wuic-metadata-editor>\n                          }\n                          @if (toolProp.value.type == 'boolean') {\n                          <input type=\"checkbox\" [(ngModel)]=\"tool.inputs[toolProp.key]\" />\n                          }\n                          @if (toolProp.value.type == 'numberToArray') {\n                          <input style=\"width: 100%;\" type=\"number\" pInputText [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'txt_area') {\n                          <textarea style=\"width: 100%;\" [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\"></textarea>\n                          }\n                          @if (toolProp.value.type == 'string') {\n                          <input style=\"width: 100%;\" type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'color') {\n                          <p-colorPicker [ngModel]=\"getDesignerColorPickerHex(tool, toolProp)\"\n                            (ngModelChange)=\"onDesignerColorPickerHexChange($event, tool, toolProp)\" appendTo=\"body\" />\n                          <div class=\"designer-color-alpha-row\">\n                            <span class=\"designer-color-alpha-label\">{{ 'designer.alpha' | translate }}</span>\n                            <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                            <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                          </div>\n                          <input type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'dictionary' && !toolProp.value.async) {\n                          @if (toolProp.key == 'cssFile') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"availableProjectCssFiles\"\n                            [ngModel]=\"tool.inputs[toolProp.key]\" (ngModelChange)=\"onCssFileChanged($event, tool)\" />\n                          } @else if (toolProp.key == 'cssClass') {\n                          <p-multiSelect [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getCssClassOptionsForTool(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"onCssClassChanged($event, tool)\" [filter]=\"true\" [virtualScroll]=\"true\"\n                            [virtualScrollItemSize]=\"38\" scrollHeight=\"260px\" [showToggleAll]=\"false\" display=\"chip\"\n                            [maxSelectedLabels]=\"3\" [selectedItemsLabel]=\"'{0} selected'\">\n                          </p-multiSelect>\n                          } @else if ((tool.name == 'SELECT' || tool.name == 'MULTISELECT' || tool.name == 'UL') &&\n                          (toolProp.key == 'valueField' || toolProp.key == 'textField')) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else if (tool.name == 'LABEL' && toolProp.key == 'displayField') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          }\n                          @if (toolProp.value.type == 'dictionary' && toolProp.value.async) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (tool.name == 'DATAREPEATER' && toolProp.key == 'action' &&\n                          canOpenArchetypeConfigurator(tool)) {\n                          <button style=\"margin-top: 8px;\" (click)=\"openArchetypeConfigurator(tool)\">\n                            {{ 'designer.configure' | translate }} {{ (tool.inputs['action'] | async) || '' }}\n                          </button>\n                          }\n                          @if (toolProp.value.type == 'dropped-component-list') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [placeholder]=\"'select.component' | translate\" [options]=\"elementFilter(toolProp)\"\n                            [ngModel]=\"getDroppedComponentListModel(tool, toolProp)\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" optionLabel=\"uniqueName\"\n                            dataKey=\"uniqueName\" />\n                          }\n                          @if (toolProp.value.type == 'autocomplete') {\n                          <p-autoComplete [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\" [forceSelection]=\"true\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" [suggestions]=\"tool.suggestions\"\n                            [optionLabel]=\"toolProp.value.displayField\" [optionValue]=\"toolProp.value.valueField\"\n                            (completeMethod)=\"search($event, tool, toolProp)\" [dropdown]=\"true\" dropdownMode=\"current\"\n                            [multiple]=\"toolProp.value.multiple\" />\n                          }\n                          @if (toolProp.value.type == 'propertyTree' && shouldShowPropertyTree(tool)) {\n                          <ul>\n                            @for (item of $any(tool.inputs[toolProp.key] | async); track item) {\n                            <li style=\"padding: 0; margin: 0;\">\n                              @if (item.col && tool.inputs['customProps_' + (tool.inputs['action'] | async)])\n                              {\n                              <wuic-field-editor [field]=\"item.col\"\n                                [record]=\"tool.inputs['customProps_' + (tool.inputs['action'] | async)]\"\n                                [metaInfo]=\"tool.inputs['datasource']?.component?.value?.metaInfo\"\n                                [triggerProp]=\"tool.inputs['action']\"></wuic-field-editor>\n                              }\n                            </li>\n                            }\n                          </ul>\n                          }\n                        </li>\n                        }\n                      </ul>\n                    </details>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n              <ng-template pTemplate>\n                <div class=\"hierarchy-panel\">\n                  <div class=\"hierarchy-panel-title\">{{ 'designer.canvas_hierarchy' | translate }}</div>\n                  <div class=\"hierarchy-tree-wrap\">\n                    <p-tree [value]=\"hierarchyTreeNodes\" [draggableNodes]=\"true\" [droppableNodes]=\"true\"\n                      selectionMode=\"single\" [(selection)]=\"hierarchySelection\"\n                      (onNodeSelect)=\"onHierarchyNodeSelect($event)\" draggableScope=\"designer-hierarchy\"\n                      droppableScope=\"designer-hierarchy\" (onNodeDrop)=\"onHierarchyNodeDrop($event)\">\n                      <ng-template let-node pTemplate=\"default\">\n                        <span class=\"hierarchy-node-label\" [class.active]=\"isHierarchyNodeSelected(node)\"\n                          (mouseenter)=\"onHierarchyNodeMouseEnter(node)\" (mouseleave)=\"onHierarchyNodeMouseLeave()\"\n                          (contextmenu)=\"showHierarchyNodeContextMenu($event, node, hierarchyCtxMenu)\">\n                          {{ node.label }}\n                        </span>\n                      </ng-template>\n                    </p-tree>\n                  </div>\n                  <p-contextMenu #hierarchyCtxMenu [model]=\"hierarchyCtxItems\" appendTo=\"body\" />\n                </div>\n              </ng-template>\n            </p-splitter>\n          </ng-template>\n        </p-splitter>\n      </ng-template>\n      <ng-template pTemplate>\n        <div class=\"col dashboard-design\" [class.designer-hide-datasources]=\"hideDatasourcesInCanvas\"\n          [class.designer-snap-grid]=\"snapToGridEnabled\" [style.--wuic-grid-size.px]=\"gridSize\" pDroppable\n          (onDrop)=\"drop($event)\" #canvas (mousedown)=\"onCanvasMouseDown($event)\"\n          (contextmenu)=\"showCtx($event, this)\">\n          <wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n          @if (rubberBandVisible) {\n          <div class=\"designer-selection-rect\" [style.left]=\"rubberBandStyle.left\" [style.top]=\"rubberBandStyle.top\"\n            [style.width]=\"rubberBandStyle.width\" [style.height]=\"rubberBandStyle.height\"></div>\n          }\n          <p-contextMenu [target]=\"canvas\" [model]=\"ctxItems | async\" appendTo=\"body\" />\n        </div>\n      </ng-template>\n    </p-splitter>\n  </div>\n  <div class=\"designer-footer\">\n    <div class=\"designer-footer-label\">{{ 'designer.items' | translate }}:</div>\n    <div class=\"designer-footer-list\">\n      @for (item of droppedDashboardItems; track item.uniqueName) {\n      <button type=\"button\" class=\"designer-footer-item\" [class.active]=\"tool?.uniqueName === item?.uniqueName\"\n        [attr.data-designer-unique-name]=\"item?.uniqueName\" (mouseenter)=\"setFooterHoverHighlight(item)\"\n        (mouseleave)=\"clearFooterHoverHighlight()\" (click)=\"selectDashboardItem(item)\"\n        (contextmenu)=\"showFooterContextMenu($event, item, footerCtxMenu)\">\n        {{ getDroppedDashboardItemLabel(item) }}\n      </button>\n      }\n    </div>\n    <p-contextMenu #footerCtxMenu [model]=\"footerCtxItems\" appendTo=\"body\" />\n  </div>\n</div>\n}\n\n@if (noEdit) {\n<wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n}\n\n<wuic-archetype-configurator [visible]=\"showArchetypeConfigurator\"\n  (visibleChange)=\"onArchetypeConfigVisibleChange($event)\" [archetype]=\"getActiveArchetypeConfig()\"\n  [metaInfo]=\"getArchetypeConfigMetaInfoForTool(archetypeConfigTool)\"\n  [value]=\"getArchetypeConfigValueForTool(archetypeConfigTool)\" (applyConfig)=\"onArchetypeConfigApply($event)\">\n</wuic-archetype-configurator>\n\n<wuic-css-sheet-editor [visible]=\"showCssSheetEditor\" (visibleChange)=\"onCssSheetEditorVisibleChange($event)\"\n  [sheets]=\"dashboardCssSheets\" [selectedSheetPath]=\"selectedCssEditorSheetPath\" [assetsFolder]=\"currentDashboardRoute\"\n  [styleProps]=\"getCssEditorStyleProps()\" (applyEditor)=\"onCssSheetEditorApply($event)\">\n</wuic-css-sheet-editor>\n\n<p-dialog [header]=\"'designer.reopen_dashboard' | translate\" [(visible)]=\"reopenDashboardDialogVisible\" [modal]=\"true\"\n  [closable]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [appendTo]=\"'body'\" [style]=\"{ width: '34rem' }\"\n  (onHide)=\"cancelReopenDashboardDialog()\">\n  <div class=\"route-popup-form\">\n    <label for=\"designer-reopen-select\">{{ 'designer.existing_dashboards' | translate }}</label>\n    <p-select inputId=\"designer-reopen-select\" [options]=\"savedDashboardOptions\" optionLabel=\"label\" optionValue=\"value\"\n      [(ngModel)]=\"reopenDialogSelectedDashboardRoute\" [filter]=\"true\" [showClear]=\"true\" [style]=\"{ width: '100%' }\"\n      appendTo=\"body\" />\n\n    <div class=\"route-popup-actions\">\n      <button type=\"button\" class=\"route-popup-btn\" (click)=\"cancelReopenDashboardDialog()\">{{ 'cancel' | translate\n        }}</button>\n      <button type=\"button\" class=\"route-popup-btn route-popup-btn-primary\" (click)=\"confirmReopenDashboardDialog()\"\n        [disabled]=\"!reopenDialogSelectedDashboardRoute\">{{ 'designer.reopen' | translate }}</button>\n    </div>\n  </div>\n</p-dialog>", styles: [":host{display:block;width:100%;height:100%;min-width:0}.designer-layout{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;width:100%;min-width:0}.designer-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px solid inherit;border-radius:10px;background:transparent;padding:10px 12px;margin-bottom:8px}.designer-current-dashboard{min-width:220px;font-size:.86rem;font-weight:700;color:inherit}.designer-toolbar-spacer{flex:1 1 auto;min-width:16px}.designer-toolbar-menu-group{display:inline-flex}.designer-toolbar-menu-group button{height:32px;border:1px solid #2f67d8;border-radius:6px;background:#2f67d8;color:#fff;padding:0 10px;font-size:.82rem;cursor:pointer}.designer-toolbar-menu-group button[disabled]{opacity:.6;cursor:not-allowed}.designer-main{min-height:0;min-width:0;width:100%;overflow:hidden;direction:ltr}.designer-main-splitter{height:100%;width:100%;min-width:0;direction:ltr}.designer-toolbox{font-size:3rem}.designer-toolbox ul{list-style-type:none;padding:0;margin:0;width:100%}.designer-toolbox li{float:left;margin-left:5px;margin-top:5px}.designer-toolbox .tool-groups{display:block}.designer-toolbox .tool-group-item{float:none;margin-left:0;margin-top:10px;clear:both}.designer-toolbox .tool-group-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin:0 0 4px 6px}.designer-toolbox .tool-group-list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px}.designer-toolbox .tool-group-list li{float:none;margin-left:0;margin-top:0}.designer-toolbox .props{font-size:1rem}.designer-toolbox .props li{float:none;padding-bottom:15px}.designer-toolbox .prop-section{width:100%;border:1px solid inherit;border-radius:6px;margin-top:8px;background:transparent;padding:6px 8px 2px}.designer-toolbox .prop-section-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;color:inherit;margin-bottom:6px}.palette-panel{height:100%;overflow:auto;width:100%}.designer-color-alpha-row{display:flex;align-items:center;gap:8px;margin-top:6px;margin-bottom:6px}.designer-color-alpha-label{font-size:.8rem;min-width:40px}.designer-color-alpha-row input[type=range]{flex:1 1 auto;min-width:90px}.designer-color-alpha-row input[type=number]{width:72px}.properties-panel{height:100%;overflow:hidden;width:100%;display:flex;flex-direction:column;min-height:0;padding-right:10px;padding-left:10px;padding-top:10px}.properties-panel>.designer-toolbox{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}:host ::ng-deep .designer-left-bottom-splitter .p-splitterpanel{min-height:0!important;overflow:hidden!important}.hierarchy-panel{height:100%;width:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:6px}.hierarchy-panel-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#4b5563;margin:0 0 6px}.hierarchy-tree-wrap{flex:1 1 auto;min-height:0;border:1px solid inherit;border-radius:6px;background:transparent;overflow:auto;padding:4px}:host ::ng-deep .hierarchy-tree-wrap .p-tree{border:none;padding:0;height:100%;background:transparent}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content{border:1px solid transparent;border-radius:4px;background:transparent!important;color:inherit!important;padding:0!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight{border-color:transparent!important;background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content:hover{background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label{display:inline-block;border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label:hover{border-color:#94a3b8}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label.active{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight .hierarchy-node-label{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}.designer-hierarchy-node{cursor:pointer;border:1px solid transparent;border-radius:4px;padding:2px 6px;font-size:.82rem;line-height:1.25rem}.designer-hierarchy-node-label{cursor:pointer;display:inline-block;width:100%}.designer-hierarchy-node.active{border-color:#3b82f6;background:#eff6ff;color:#1d4ed8}.designer-footer-item.designer-tree-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px}.dashboard-design{height:100%;min-height:0;min-width:0;width:100%;overflow:auto;direction:ltr;position:relative}.designer-selection-rect{position:absolute;border:1px dashed #3b82f6;background:#3b82f61f;pointer-events:none;z-index:10000}:host ::ng-deep .designer-multi-selected{outline:2px solid #3b82f6!important;outline-offset:1px}:host ::ng-deep .dashboard-design.designer-hide-datasources .datasource-descriptor{display:none!important}.current-dashboard-title{font-weight:600;margin-right:12px}.designer-footer{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid inherit;background:transparent;min-height:36px;flex:0 0 auto;width:100%;overflow:auto}.designer-footer-label{font-size:.85rem;font-weight:600;color:inherit;white-space:nowrap}.designer-footer-list{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%}.designer-footer-item{border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer;white-space:nowrap}.designer-footer-item.active{border-color:#3b82f6;background:transparent;color:#1d4ed8}:host ::ng-deep .designer-footer-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px;box-shadow:inset 0 0 0 1px #3b82f6!important}.route-popup-form{display:flex;flex-direction:column;gap:8px}.route-popup-form label{font-size:.85rem;font-weight:600;color:#2f3f58}.route-popup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.route-popup-btn{border:1px solid inherit;background:transparent;color:inherit;border-radius:6px;padding:7px 12px;font-size:.85rem;cursor:pointer}.route-popup-btn-primary{border-color:#2f67d8;background:#2f67d8;color:#fff}.p-colorpicker{border:1px solid black;border-radius:4px}.dashboard-design.designer-snap-grid{background-image:linear-gradient(to right,rgba(128,128,128,.16) 1px,transparent 1px),linear-gradient(to bottom,rgba(128,128,128,.16) 1px,transparent 1px);background-size:var(--wuic-grid-size, 10px) var(--wuic-grid-size, 10px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i10.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i12.Draggable, selector: "[pDraggable]", inputs: ["pDraggable", "dragEffect", "dragHandle", "pDraggableDisabled"], outputs: ["onDragStart", "onDragEnd", "onDrag"] }, { kind: "directive", type: i12.Droppable, selector: "[pDroppable]", inputs: ["pDroppable", "pDroppableDisabled", "dropEffect"], outputs: ["onDragEnter", "onDragLeave", "onDrop"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i2$1.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "showTransitionOptions", "hideTransitionOptions", "inline", "format", "tabindex", "inputId", "autoZIndex", "autofocus", "defaultColor", "appendTo", "overlayOptions", "motionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i2$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: DashboardComponent, selector: "wuic-dashboard", inputs: ["dashboardElements"] }, { kind: "component", type: FieldEditorComponent, selector: "wuic-field-editor", inputs: ["datasource", "record", "field", "metaInfo", "readOnly", "isFilter", "hideLabel", "forceShowLabel", "operator", "nestedIndex", "triggerProp", "tabIndex", "onInlineCellValueChange"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i10$1.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: MetadataEditorComponent, selector: "wuic-metadata-editor", inputs: ["datasource", "hardcodedDatasource", "saveCallback", "hideReports", "hideRelatedTableActions", "hideRelatedColumnActions"] }, { kind: "ngmodule", type: MenubarModule }, { kind: "component", type: ArchetypeConfiguratorComponent, selector: "wuic-archetype-configurator", inputs: ["visible", "archetype", "metaInfo", "value"], outputs: ["visibleChange", "applyConfig"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i18.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: CssSheetEditorComponent, selector: "wuic-css-sheet-editor", inputs: ["visible", "sheets", "selectedSheetPath", "styleProps", "assetsFolder"], outputs: ["visibleChange", "applyEditor"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i7.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i4$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "pipe", type: i2$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    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\" data-testid=\"designer-actions-menu-btn\" (click)=\"refreshGraphActionsMenuItems(); graphActionsMenu.toggle($event)\">{{ 'designer.actions_menu' | translate }}</button>\n      <p-menu #graphActionsMenu [popup]=\"true\" [model]=\"graphActionsMenuItems\" appendTo=\"body\"></p-menu>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"openCurrentDashboardInNewTab()\" [disabled]=\"!currentDashboardRoute\">{{\n        'designer.open_current_dashboard' | translate }}</button>\n    </div>\n  </div>\n  <div class=\"designer-main\">\n    <p-splitter [style]=\"{ height: '100%' }\" [panelSizes]=\"[15, 85]\" styleClass=\"designer-main-splitter\">\n      <ng-template pTemplate>\n        <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[35, 65]\"\n          [minSizes]=\"[20, 30]\" styleClass=\"designer-left-splitter\">\n          <ng-template pTemplate>\n            <div class=\"col flex designer-toolbox palette-panel\">\n              <ul class=\"tool-groups\">\n                @for (toolGroup of availableToolGroups; track toolGroup.group) {\n                <li class=\"tool-group-item\">\n                  <div class=\"tool-group-title\">{{ toolGroup.group }}</div>\n                  <ul class=\"tool-group-list\">\n                    @for (tool of toolGroup.tools; track tool) {\n                    <li pDraggable (onDragStart)=\"dragStart(tool)\" (onDragEnd)=\"dragEnd()\" (onDrag)=\"onDrag($event)\"\n                      (dblclick)=\"dropToolAtRoot(tool)\">\n                      <i [ngClass]=\"tool.icon\" [title]=\"tool.name\"></i>\n                    </li>\n                    }\n                  </ul>\n                </li>\n                }\n              </ul>\n            </div>\n          </ng-template>\n          <ng-template pTemplate>\n            <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[68, 32]\"\n              [minSizes]=\"[35, 20]\" styleClass=\"designer-left-bottom-splitter\">\n              <ng-template pTemplate>\n                <div class=\"properties-panel\">\n                  <p-select [style]=\"{width: '100%'}\" [options]=\"flattenedDashboardElements\" [(ngModel)]=\"tool\"\n                    optionLabel=\"uniqueName\" dataKey=\"componentId\" appendTo=\"body\" />\n                  <div class=\"designer-toolbox\">\n\n                    <span style=\"width: 100%;\">\n                      <input type=\"text\" style=\"width: calc(100% - 30px);\" [(ngModel)]=\"propFilter\"\n                        [placeholder]=\"'prop.filter' | translate\" />\n                      <button style=\"width: 25px\" (click)=\"clearPropFilter()\">X</button>\n                    </span>\n\n                    @for (section of getToolPropertySections(tool, propFilter); track section.key) {\n                    <details class=\"prop-section\" [open]=\"section.open\"\n                      (toggle)=\"onPropertySectionToggle(tool, section.key, $event)\">\n                      <summary class=\"prop-section-title\">{{ section.label }}</summary>\n                      <ul class=\"props\">\n                        @for (toolProp of section.props; track toolProp.key) {\n                        <li>\n                          @if (!toolProp.value.hideCaption) {\n                          <span>{{ toolProp.value?.propertyCaption ||\n                            toolProp.key[0].toUpperCase() + toolProp.key.slice(1)\n                            }}</span>\n                          }\n                          <br />\n                          @if (toolProp.value.type == 'button') {\n                          <p-button (click)=\"toolProp.value.callback(tool.inputs, toolProp.key, null, tool)\"\n                            class=\"k-button\" [style]=\"{width: '100%'}\">\n                            {{toolProp.value.propertyCaption}}\n                          </p-button>\n                          }\n                          @if (toolProp.value.type == 'metaEditor' &&\n                          tool.inputs['componentRef']?.value?.component) {\n                          <wuic-metadata-editor [hardcodedDatasource]=\"tool.inputs['componentRef']?.value?.component\"\n                            [saveCallback]=\"metaEditorSave\"></wuic-metadata-editor>\n                          }\n                          @if (toolProp.value.type == 'boolean') {\n                          <input type=\"checkbox\" [(ngModel)]=\"tool.inputs[toolProp.key]\" />\n                          }\n                          @if (toolProp.value.type == 'numberToArray') {\n                          <input style=\"width: 100%;\" type=\"number\" pInputText [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'txt_area') {\n                          <textarea style=\"width: 100%;\" [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\"></textarea>\n                          }\n                          @if (toolProp.value.type == 'string') {\n                          <input style=\"width: 100%;\" type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'color') {\n                          <p-colorPicker [ngModel]=\"getDesignerColorPickerHex(tool, toolProp)\"\n                            (ngModelChange)=\"onDesignerColorPickerHexChange($event, tool, toolProp)\" appendTo=\"body\" />\n                          <div class=\"designer-color-alpha-row\">\n                            <span class=\"designer-color-alpha-label\">{{ 'designer.alpha' | translate }}</span>\n                            <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                            <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                          </div>\n                          <input type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'dictionary' && !toolProp.value.async) {\n                          @if (toolProp.key == 'cssFile') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"availableProjectCssFiles\"\n                            [ngModel]=\"tool.inputs[toolProp.key]\" (ngModelChange)=\"onCssFileChanged($event, tool)\" />\n                          } @else if (toolProp.key == 'cssClass') {\n                          <p-multiSelect [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getCssClassOptionsForTool(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"onCssClassChanged($event, tool)\" [filter]=\"true\" [virtualScroll]=\"true\"\n                            [virtualScrollItemSize]=\"38\" scrollHeight=\"260px\" [showToggleAll]=\"false\" display=\"chip\"\n                            [maxSelectedLabels]=\"3\" [selectedItemsLabel]=\"'{0} selected'\">\n                          </p-multiSelect>\n                          } @else if ((tool.name == 'SELECT' || tool.name == 'MULTISELECT' || tool.name == 'UL') &&\n                          (toolProp.key == 'valueField' || toolProp.key == 'textField')) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else if (tool.name == 'LABEL' && toolProp.key == 'displayField') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          }\n                          @if (toolProp.value.type == 'dictionary' && toolProp.value.async) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (tool.name == 'DATAREPEATER' && toolProp.key == 'action' &&\n                          canOpenArchetypeConfigurator(tool)) {\n                          <button style=\"margin-top: 8px;\" (click)=\"openArchetypeConfigurator(tool)\">\n                            {{ 'designer.configure' | translate }} {{ (tool.inputs['action'] | async) || '' }}\n                          </button>\n                          }\n                          @if (toolProp.value.type == 'dropped-component-list') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [placeholder]=\"'select.component' | translate\" [options]=\"elementFilter(toolProp)\"\n                            [ngModel]=\"getDroppedComponentListModel(tool, toolProp)\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" optionLabel=\"uniqueName\"\n                            dataKey=\"uniqueName\" />\n                          }\n                          @if (toolProp.value.type == 'autocomplete') {\n                          <p-autoComplete [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\" [forceSelection]=\"true\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" [suggestions]=\"tool.suggestions\"\n                            [optionLabel]=\"toolProp.value.displayField\" [optionValue]=\"toolProp.value.valueField\"\n                            (completeMethod)=\"search($event, tool, toolProp)\" [dropdown]=\"true\" dropdownMode=\"current\"\n                            [multiple]=\"toolProp.value.multiple\" />\n                          }\n                          @if (toolProp.value.type == 'propertyTree' && shouldShowPropertyTree(tool)) {\n                          <ul>\n                            @for (item of $any(tool.inputs[toolProp.key] | async); track item) {\n                            <li style=\"padding: 0; margin: 0;\">\n                              @if (item.col && tool.inputs['customProps_' + (tool.inputs['action'] | async)])\n                              {\n                              <wuic-field-editor [field]=\"item.col\"\n                                [record]=\"tool.inputs['customProps_' + (tool.inputs['action'] | async)]\"\n                                [metaInfo]=\"tool.inputs['datasource']?.component?.value?.metaInfo\"\n                                [triggerProp]=\"tool.inputs['action']\"></wuic-field-editor>\n                              }\n                            </li>\n                            }\n                          </ul>\n                          }\n                        </li>\n                        }\n                      </ul>\n                    </details>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n              <ng-template pTemplate>\n                <div class=\"hierarchy-panel\">\n                  <div class=\"hierarchy-panel-title\">{{ 'designer.canvas_hierarchy' | translate }}</div>\n                  <div class=\"hierarchy-tree-wrap\">\n                    <p-tree [value]=\"hierarchyTreeNodes\" [draggableNodes]=\"true\" [droppableNodes]=\"true\"\n                      selectionMode=\"single\" [(selection)]=\"hierarchySelection\"\n                      (onNodeSelect)=\"onHierarchyNodeSelect($event)\" draggableScope=\"designer-hierarchy\"\n                      droppableScope=\"designer-hierarchy\" (onNodeDrop)=\"onHierarchyNodeDrop($event)\">\n                      <ng-template let-node pTemplate=\"default\">\n                        <span class=\"hierarchy-node-label\" [class.active]=\"isHierarchyNodeSelected(node)\"\n                          (mouseenter)=\"onHierarchyNodeMouseEnter(node)\" (mouseleave)=\"onHierarchyNodeMouseLeave()\"\n                          (contextmenu)=\"showHierarchyNodeContextMenu($event, node, hierarchyCtxMenu)\">\n                          {{ node.label }}\n                        </span>\n                      </ng-template>\n                    </p-tree>\n                  </div>\n                  <p-contextMenu #hierarchyCtxMenu [model]=\"hierarchyCtxItems\" appendTo=\"body\" />\n                </div>\n              </ng-template>\n            </p-splitter>\n          </ng-template>\n        </p-splitter>\n      </ng-template>\n      <ng-template pTemplate>\n        <div class=\"col dashboard-design\" [class.designer-hide-datasources]=\"hideDatasourcesInCanvas\"\n          [class.designer-snap-grid]=\"snapToGridEnabled\" [style.--wuic-grid-size.px]=\"gridSize\" pDroppable\n          (onDrop)=\"drop($event)\" #canvas (mousedown)=\"onCanvasMouseDown($event)\"\n          (contextmenu)=\"showCtx($event, this)\">\n          <wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n          @if (rubberBandVisible) {\n          <div class=\"designer-selection-rect\" [style.left]=\"rubberBandStyle.left\" [style.top]=\"rubberBandStyle.top\"\n            [style.width]=\"rubberBandStyle.width\" [style.height]=\"rubberBandStyle.height\"></div>\n          }\n          <p-contextMenu [target]=\"canvas\" [model]=\"ctxItems | async\" appendTo=\"body\" />\n        </div>\n      </ng-template>\n    </p-splitter>\n  </div>\n  <div class=\"designer-footer\">\n    <div class=\"designer-footer-label\">{{ 'designer.items' | translate }}:</div>\n    <div class=\"designer-footer-list\">\n      @for (item of droppedDashboardItems; track item.uniqueName) {\n      <button type=\"button\" class=\"designer-footer-item\" [class.active]=\"tool?.uniqueName === item?.uniqueName\"\n        [attr.data-designer-unique-name]=\"item?.uniqueName\" (mouseenter)=\"setFooterHoverHighlight(item)\"\n        (mouseleave)=\"clearFooterHoverHighlight()\" (click)=\"selectDashboardItem(item)\"\n        (contextmenu)=\"showFooterContextMenu($event, item, footerCtxMenu)\">\n        {{ getDroppedDashboardItemLabel(item) }}\n      </button>\n      }\n    </div>\n    <p-contextMenu #footerCtxMenu [model]=\"footerCtxItems\" appendTo=\"body\" />\n  </div>\n</div>\n}\n\n@if (noEdit) {\n<wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n}\n\n<wuic-archetype-configurator [visible]=\"showArchetypeConfigurator\"\n  (visibleChange)=\"onArchetypeConfigVisibleChange($event)\" [archetype]=\"getActiveArchetypeConfig()\"\n  [metaInfo]=\"getArchetypeConfigMetaInfoForTool(archetypeConfigTool)\"\n  [value]=\"getArchetypeConfigValueForTool(archetypeConfigTool)\" (applyConfig)=\"onArchetypeConfigApply($event)\">\n</wuic-archetype-configurator>\n\n<wuic-css-sheet-editor [visible]=\"showCssSheetEditor\" (visibleChange)=\"onCssSheetEditorVisibleChange($event)\"\n  [sheets]=\"dashboardCssSheets\" [selectedSheetPath]=\"selectedCssEditorSheetPath\" [assetsFolder]=\"currentDashboardRoute\"\n  [styleProps]=\"getCssEditorStyleProps()\" (applyEditor)=\"onCssSheetEditorApply($event)\">\n</wuic-css-sheet-editor>\n\n<p-dialog [header]=\"'designer.reopen_dashboard' | translate\" [(visible)]=\"reopenDashboardDialogVisible\" [modal]=\"true\"\n  [closable]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [appendTo]=\"'body'\" [style]=\"{ width: '34rem' }\"\n  (onHide)=\"cancelReopenDashboardDialog()\">\n  <div class=\"route-popup-form\">\n    <label for=\"designer-reopen-select\">{{ 'designer.existing_dashboards' | translate }}</label>\n    <p-select inputId=\"designer-reopen-select\" [options]=\"savedDashboardOptions\" optionLabel=\"label\" optionValue=\"value\"\n      [(ngModel)]=\"reopenDialogSelectedDashboardRoute\" [filter]=\"true\" [showClear]=\"true\" [style]=\"{ width: '100%' }\"\n      appendTo=\"body\" />\n\n    <div class=\"route-popup-actions\">\n      <button type=\"button\" class=\"route-popup-btn\" (click)=\"cancelReopenDashboardDialog()\">{{ 'cancel' | translate\n        }}</button>\n      <button type=\"button\" class=\"route-popup-btn route-popup-btn-primary\" (click)=\"confirmReopenDashboardDialog()\"\n        [disabled]=\"!reopenDialogSelectedDashboardRoute\">{{ 'designer.reopen' | translate }}</button>\n    </div>\n  </div>\n</p-dialog>", styles: [":host{display:block;width:100%;height:100%;min-width:0}.designer-layout{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;width:100%;min-width:0}.designer-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px solid inherit;border-radius:10px;background:transparent;padding:10px 12px;margin-bottom:8px}.designer-current-dashboard{min-width:220px;font-size:.86rem;font-weight:700;color:inherit}.designer-toolbar-spacer{flex:1 1 auto;min-width:16px}.designer-toolbar-menu-group{display:inline-flex}.designer-toolbar-menu-group button{height:32px;border:1px solid #2f67d8;border-radius:6px;background:#2f67d8;color:#fff;padding:0 10px;font-size:.82rem;cursor:pointer}.designer-toolbar-menu-group button[disabled]{opacity:.6;cursor:not-allowed}.designer-main{min-height:0;min-width:0;width:100%;overflow:hidden;direction:ltr}.designer-main-splitter{height:100%;width:100%;min-width:0;direction:ltr}.designer-toolbox{font-size:3rem}.designer-toolbox ul{list-style-type:none;padding:0;margin:0;width:100%}.designer-toolbox li{float:left;margin-left:5px;margin-top:5px}.designer-toolbox .tool-groups{display:block}.designer-toolbox .tool-group-item{float:none;margin-left:0;margin-top:10px;clear:both}.designer-toolbox .tool-group-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin:0 0 4px 6px}.designer-toolbox .tool-group-list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px}.designer-toolbox .tool-group-list li{float:none;margin-left:0;margin-top:0}.designer-toolbox .props{font-size:1rem}.designer-toolbox .props li{float:none;padding-bottom:15px}.designer-toolbox .prop-section{width:100%;border:1px solid inherit;border-radius:6px;margin-top:8px;background:transparent;padding:6px 8px 2px}.designer-toolbox .prop-section-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;color:inherit;margin-bottom:6px}.palette-panel{height:100%;overflow:auto;width:100%}.designer-color-alpha-row{display:flex;align-items:center;gap:8px;margin-top:6px;margin-bottom:6px}.designer-color-alpha-label{font-size:.8rem;min-width:40px}.designer-color-alpha-row input[type=range]{flex:1 1 auto;min-width:90px}.designer-color-alpha-row input[type=number]{width:72px}.properties-panel{height:100%;overflow:hidden;width:100%;display:flex;flex-direction:column;min-height:0;padding-right:10px;padding-left:10px;padding-top:10px}.properties-panel>.designer-toolbox{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}:host ::ng-deep .designer-left-bottom-splitter .p-splitterpanel{min-height:0!important;overflow:hidden!important}.hierarchy-panel{height:100%;width:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:6px}.hierarchy-panel-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#4b5563;margin:0 0 6px}.hierarchy-tree-wrap{flex:1 1 auto;min-height:0;border:1px solid inherit;border-radius:6px;background:transparent;overflow:auto;padding:4px}:host ::ng-deep .hierarchy-tree-wrap .p-tree{border:none;padding:0;height:100%;background:transparent}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content{border:1px solid transparent;border-radius:4px;background:transparent!important;color:inherit!important;padding:0!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight{border-color:transparent!important;background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content:hover{background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label{display:inline-block;border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label:hover{border-color:#94a3b8}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label.active{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight .hierarchy-node-label{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}.designer-hierarchy-node{cursor:pointer;border:1px solid transparent;border-radius:4px;padding:2px 6px;font-size:.82rem;line-height:1.25rem}.designer-hierarchy-node-label{cursor:pointer;display:inline-block;width:100%}.designer-hierarchy-node.active{border-color:#3b82f6;background:#eff6ff;color:#1d4ed8}.designer-footer-item.designer-tree-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px}.dashboard-design{height:100%;min-height:0;min-width:0;width:100%;overflow:auto;direction:ltr;position:relative}.designer-selection-rect{position:absolute;border:1px dashed #3b82f6;background:#3b82f61f;pointer-events:none;z-index:10000}:host ::ng-deep .designer-multi-selected{outline:2px solid #3b82f6!important;outline-offset:1px}:host ::ng-deep .dashboard-design.designer-hide-datasources .datasource-descriptor{display:none!important}.current-dashboard-title{font-weight:600;margin-right:12px}.designer-footer{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid inherit;background:transparent;min-height:36px;flex:0 0 auto;width:100%;overflow:auto}.designer-footer-label{font-size:.85rem;font-weight:600;color:inherit;white-space:nowrap}.designer-footer-list{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%}.designer-footer-item{border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer;white-space:nowrap}.designer-footer-item.active{border-color:#3b82f6;background:transparent;color:#1d4ed8}:host ::ng-deep .designer-footer-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px;box-shadow:inset 0 0 0 1px #3b82f6!important}.route-popup-form{display:flex;flex-direction:column;gap:8px}.route-popup-form label{font-size:.85rem;font-weight:600;color:#2f3f58}.route-popup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.route-popup-btn{border:1px solid inherit;background:transparent;color:inherit;border-radius:6px;padding:7px 12px;font-size:.85rem;cursor:pointer}.route-popup-btn-primary{border-color:#2f67d8;background:#2f67d8;color:#fff}.p-colorpicker{border:1px solid black;border-radius:4px}.dashboard-design.designer-snap-grid{background-image:linear-gradient(to right,rgba(128,128,128,.16) 1px,transparent 1px),linear-gradient(to bottom,rgba(128,128,128,.16) 1px,transparent 1px);background-size:var(--wuic-grid-size, 10px) var(--wuic-grid-size, 10px)}\n"] }]
+            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']
@@ -13322,4 +13240,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }] } });
 
 export { DesignerComponent };
-//# sourceMappingURL=wuic-framework-lib-designer.component-x10ZzUEy.mjs.map
+//# sourceMappingURL=wuic-framework-lib-designer.component-Bd2fwl6H.mjs.map