wuic-framework-lib 0.1.0 → 0.2.0

package/fesm2022/{wuic-framework-lib-designer.component-B61jxcjI.mjs → wuic-framework-lib-designer.component-CJj2TAfG.mjs}

@@ -1,41 +1,41 @@
 import * as i0 from '@angular/core';
-import { Pipe, EventEmitter, ElementRef, Renderer2, ChangeDetectorRef, HostListener, Input, Output, Inject, Directive, Component, computed, signal, untracked, inject, NgZone, numberAttribute, DOCUMENT, input, output, isDevMode, InjectionToken, Injector, contentChildren, contentChild, booleanAttribute, effect, HostBinding, ChangeDetectionStrategy, ɵcompileComponent as _compileComponent } from '@angular/core';
-import * as i10 from 'primeng/splitter';
+import { Pipe, EventEmitter, ElementRef, Renderer2, ChangeDetectorRef, HostListener, Input, Output, Inject, Directive, Component, computed, signal, untracked, inject, NgZone, numberAttribute, DOCUMENT, input, output, isDevMode, InjectionToken, Injector, contentChildren, contentChild, booleanAttribute, effect, HostBinding, ChangeDetectionStrategy } from '@angular/core';
+import * as i11 from 'primeng/splitter';
 import { SplitterModule } from 'primeng/splitter';
-import * as i11 from 'primeng/dragdrop';
+import * as i11$1 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 DataSourceComponent, b as DataRepeaterComponent, F as FilterBarComponent, L as LazyParametricDialogComponent, P as PagerComponent, M as MetadataProviderService, c as ParametricDialogComponent, d as MetadatiColonna, e as DataProviderService, U as UserInfoService, T as TranslationManagerService, f as MetadataEditorService, g as WorkflowRuntimeMetadataService, h as FieldEditorComponent, i as MetadataEditorComponent, A as ArchetypeConfiguratorComponent, C as CallbackPipe } from './wuic-framework-lib-wuic-framework-lib-CXpwV2Dc.mjs';
+import { W as WtoolboxService, D as DynamicGenericTemplateComponent, b as DynamicCompilerService, c as DataSourceComponent, d as DataRepeaterComponent, F as FilterBarComponent, L as LazyParametricDialogComponent, P as PagerComponent, e as MetadataProviderService, f as ParametricDialogComponent, M as MetadatiColonna, g as DataProviderService, U as UserInfoService, T as TranslationManagerService, h as MetadataEditorService, i as WorkflowRuntimeMetadataService, j as FieldEditorComponent, k as MetadataEditorComponent, A as ArchetypeConfiguratorComponent } from './wuic-framework-lib-wuic-framework-lib-CXZ0usmZ.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 i5 from 'primeng/select';
+import * as i6 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i2$2 from 'primeng/colorpicker';
+import * as i2$1 from 'primeng/colorpicker';
 import { ColorPickerModule } from 'primeng/colorpicker';
-import * as i2$3 from 'primeng/autocomplete';
+import * as i2$2 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
 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 i9 from 'primeng/contextmenu';
+import * as i13 from 'primeng/contextmenu';
 import { ContextMenuModule } from 'primeng/contextmenu';
-import * as i2$1 from 'primeng/api';
+import * as i2 from 'primeng/api';
 import { TreeDragDropService } from 'primeng/api';
 import { MenubarModule } from 'primeng/menubar';
 import * as i4 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i17 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
-import * as i2 from 'primeng/dialog';
+import * as i12 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
-import * as i9$1 from 'primeng/menu';
+import * as i9 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
-import * as i3 from 'primeng/tree';
+import * as i4$1 from 'primeng/tree';
 import { TreeModule } from 'primeng/tree';
 
 class PropConverterPipe {
@@ -52,10 +52,10 @@ class PropConverterPipe {
         }
         return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PropConverterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: PropConverterPipe, isStandalone: true, name: "propConverter" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PropConverterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: PropConverterPipe, isStandalone: true, name: "propConverter" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PropConverterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: PropConverterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'propConverter',
@@ -1226,10 +1226,10 @@ class NgxDraggableDomDirective {
         // return the bounds checking for this original pass
         return new NgxDraggableDomBoundsCheckEvent(isTopEdgeCollided, isRightEdgeCollided, isBottomEdgeCollided, isLeftEdgeCollided, constrainedElP0, translation, displaceX !== undefined || displaceY !== undefined);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NgxDraggableDomDirective, deps: [{ token: ElementRef }, { token: Renderer2 }, { token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: NgxDraggableDomDirective, isStandalone: true, selector: "[ngxDraggableDom]", inputs: { bounds: "bounds", constrainByBounds: "constrainByBounds", handle: "handle", requireMouseOver: "requireMouseOver", requireMouseOverBounds: "requireMouseOverBounds", ignoreMultiTouchEvents: "ignoreMultiTouchEvents", ngxDraggableDom: "ngxDraggableDom" }, outputs: { started: "started", stopped: "stopped", moved: "moved", edge: "edge" }, host: { listeners: { "mousedown": "onMouseDown($event)", "mouseleave": "onMouseLeave($event)", "touchstart": "onTouchStart($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NgxDraggableDomDirective, deps: [{ token: ElementRef }, { token: Renderer2 }, { token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: NgxDraggableDomDirective, isStandalone: true, selector: "[ngxDraggableDom]", inputs: { bounds: "bounds", constrainByBounds: "constrainByBounds", handle: "handle", requireMouseOver: "requireMouseOver", requireMouseOverBounds: "requireMouseOverBounds", ignoreMultiTouchEvents: "ignoreMultiTouchEvents", ngxDraggableDom: "ngxDraggableDom" }, outputs: { started: "started", stopped: "stopped", moved: "moved", edge: "edge" }, host: { listeners: { "mousedown": "onMouseDown($event)", "mouseleave": "onMouseLeave($event)", "touchstart": "onTouchStart($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NgxDraggableDomDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NgxDraggableDomDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngxDraggableDom]',
@@ -2049,10 +2049,10 @@ class AngularResizableDirective {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AngularResizableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: AngularResizableDirective, isStandalone: true, selector: "[ngResizable]", inputs: { ngResizable: "ngResizable", rzHandles: "rzHandles", rzHandleDoms: "rzHandleDoms", rzAspectRatio: "rzAspectRatio", rzContainment: "rzContainment", rzGrid: "rzGrid", rzMinWidth: "rzMinWidth", rzMinHeight: "rzMinHeight", rzMaxWidth: "rzMaxWidth", rzMaxHeight: "rzMaxHeight", rzScale: "rzScale", preventDefaultEvent: "preventDefaultEvent" }, outputs: { rzStart: "rzStart", rzResizing: "rzResizing", rzStop: "rzStop" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AngularResizableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: AngularResizableDirective, isStandalone: true, selector: "[ngResizable]", inputs: { ngResizable: "ngResizable", rzHandles: "rzHandles", rzHandleDoms: "rzHandleDoms", rzAspectRatio: "rzAspectRatio", rzContainment: "rzContainment", rzGrid: "rzGrid", rzMinWidth: "rzMinWidth", rzMinHeight: "rzMinHeight", rzMaxWidth: "rzMaxWidth", rzMaxHeight: "rzMaxHeight", rzScale: "rzScale", preventDefaultEvent: "preventDefaultEvent" }, outputs: { rzStart: "rzStart", rzResizing: "rzResizing", rzStop: "rzStop" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AngularResizableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AngularResizableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngResizable]',
@@ -2138,10 +2138,10 @@ class DataBoundDirective {
             this.cd.detectChanges();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DataBoundDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: DataBoundDirective, isStandalone: true, selector: "[databound]", inputs: { databound: "databound", bindingFunction: "bindingFunction", clickCallback: "clickCallback", itemTemplate: "itemTemplate", inputs: "inputs" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DataBoundDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: DataBoundDirective, isStandalone: true, selector: "[databound]", inputs: { databound: "databound", bindingFunction: "bindingFunction", clickCallback: "clickCallback", itemTemplate: "itemTemplate", inputs: "inputs" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DataBoundDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DataBoundDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[databound]',
@@ -2164,10 +2164,10 @@ class TabPanelWrapperComponent {
      * Input dal componente padre per selected; usata nella configurazione e nel rendering del componente.
      */
     selected;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TabPanelWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: TabPanelWrapperComponent, isStandalone: true, selector: "p-tabPanel", inputs: { selected: "selected" }, providers: [], ngImport: i0, template: "<div role=\"tabpanel\" class=\"p-tabview-panel\" [attr.aria-hidden]=\"!selected\" data-pc-name=\"tabpanel\"\r\n    [hidden]=\"!selected\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [".p-tabview-panel{height:100%;width:100%}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabPanelWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: TabPanelWrapperComponent, isStandalone: true, selector: "p-tabPanel", inputs: { selected: "selected" }, providers: [], ngImport: i0, template: "<div role=\"tabpanel\" class=\"p-tabview-panel\" [attr.aria-hidden]=\"!selected\" data-pc-name=\"tabpanel\"\r\n    [hidden]=\"!selected\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [".p-tabview-panel{height:100%;width:100%}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TabPanelWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabPanelWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'p-tabPanel', imports: [], providers: [], template: "<div role=\"tabpanel\" class=\"p-tabview-panel\" [attr.aria-hidden]=\"!selected\" data-pc-name=\"tabpanel\"\r\n    [hidden]=\"!selected\">\r\n    <ng-content></ng-content>\r\n</div>", styles: [".p-tabview-panel{height:100%;width:100%}\n"] }]
         }], propDecorators: { selected: [{
@@ -2198,10 +2198,10 @@ class TabViewWrapperComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TabViewWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: TabViewWrapperComponent, isStandalone: true, selector: "p-tabView", inputs: { tabs: "tabs", activeIndex: "activeIndex" }, ngImport: i0, template: "<div data-pc-name=\"tabview\" class=\"p-tabview p-component\">\n  <div class=\"p-tabview-nav-container\">\n    <div class=\"p-tabview-nav-content\" data-pc-section=\"navcontent\">\n      <ul role=\"tablist\" class=\"p-tabview-nav\" data-pc-section=\"nav\">\n        @for (tab of tabs; track tab; let i = $index) {\n          <li role=\"presentation\" data-p-disabled=\"false\"\n            [ngClass]=\"{'p-highlight': activeIndex == i}\">\n            <a role=\"tab\" pripple=\"\" class=\"p-element p-ripple p-tabview-nav-link\" (click)=\"setIndex(i)\"\n              [attr.aria-selected]=\"activeIndex == i\" [attr.tabindex]=\"i\" aria-disabled=\"false\"\n              [attr.data-pc-index]=\"i\" data-pc-section=\"headeraction\">\n              <span class=\"p-tabview-title\">\n                {{tab.inputs.header}}\n              </span>\n            </a>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n  <div class=\"p-tabview-panels\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [".p-tabview.p-component{height:100%}.p-tabview .p-tabview-nav-content{scroll-padding-inline:3rem}.p-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto}.p-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.p-tabview .p-tabview-nav li .p-tabview-nav-link{border-width:0 0 2px 0;padding:1.25rem;font-weight:700;border-top-right-radius:6px;border-top-left-radius:6px;transition:box-shadow .2s;margin:0 0 -2px}.p-tabview-nav-link{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link{border-color:#3b82f6;color:#3b82f6;background-color:transparent}.p-tabview-panels{height:calc(100% - 60px);overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabViewWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TabViewWrapperComponent, isStandalone: true, selector: "p-tabView", inputs: { tabs: "tabs", activeIndex: "activeIndex" }, ngImport: i0, template: "<div data-pc-name=\"tabview\" class=\"p-tabview p-component\">\n  <div class=\"p-tabview-nav-container\">\n    <div class=\"p-tabview-nav-content\" data-pc-section=\"navcontent\">\n      <ul role=\"tablist\" class=\"p-tabview-nav\" data-pc-section=\"nav\">\n        @for (tab of tabs; track tab; let i = $index) {\n          <li role=\"presentation\" data-p-disabled=\"false\"\n            [ngClass]=\"{'p-highlight': activeIndex == i}\">\n            <a role=\"tab\" pripple=\"\" class=\"p-element p-ripple p-tabview-nav-link\" (click)=\"setIndex(i)\"\n              [attr.aria-selected]=\"activeIndex == i\" [attr.tabindex]=\"i\" aria-disabled=\"false\"\n              [attr.data-pc-index]=\"i\" data-pc-section=\"headeraction\">\n              <span class=\"p-tabview-title\">\n                {{tab.inputs.header}}\n              </span>\n            </a>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n  <div class=\"p-tabview-panels\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [".p-tabview.p-component{height:100%}.p-tabview .p-tabview-nav-content{scroll-padding-inline:3rem}.p-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto}.p-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.p-tabview .p-tabview-nav li .p-tabview-nav-link{border-width:0 0 2px 0;padding:1.25rem;font-weight:700;border-top-right-radius:6px;border-top-left-radius:6px;transition:box-shadow .2s;margin:0 0 -2px}.p-tabview-nav-link{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link{border-color:#3b82f6;color:#3b82f6;background-color:transparent}.p-tabview-panels{height:calc(100% - 60px);overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TabViewWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TabViewWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'p-tabView', imports: [NgClass], template: "<div data-pc-name=\"tabview\" class=\"p-tabview p-component\">\n  <div class=\"p-tabview-nav-container\">\n    <div class=\"p-tabview-nav-content\" data-pc-section=\"navcontent\">\n      <ul role=\"tablist\" class=\"p-tabview-nav\" data-pc-section=\"nav\">\n        @for (tab of tabs; track tab; let i = $index) {\n          <li role=\"presentation\" data-p-disabled=\"false\"\n            [ngClass]=\"{'p-highlight': activeIndex == i}\">\n            <a role=\"tab\" pripple=\"\" class=\"p-element p-ripple p-tabview-nav-link\" (click)=\"setIndex(i)\"\n              [attr.aria-selected]=\"activeIndex == i\" [attr.tabindex]=\"i\" aria-disabled=\"false\"\n              [attr.data-pc-index]=\"i\" data-pc-section=\"headeraction\">\n              <span class=\"p-tabview-title\">\n                {{tab.inputs.header}}\n              </span>\n            </a>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n  <div class=\"p-tabview-panels\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [".p-tabview.p-component{height:100%}.p-tabview .p-tabview-nav-content{scroll-padding-inline:3rem}.p-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto}.p-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.p-tabview .p-tabview-nav li .p-tabview-nav-link{border-width:0 0 2px 0;padding:1.25rem;font-weight:700;border-top-right-radius:6px;border-top-left-radius:6px;transition:box-shadow .2s;margin:0 0 -2px}.p-tabview-nav-link{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link{border-color:#3b82f6;color:#3b82f6;background-color:transparent}.p-tabview-panels{height:calc(100% - 60px);overflow:auto}\n"] }]
         }], propDecorators: { tabs: [{
@@ -2347,10 +2347,10 @@ class SplitCustomEventsBehaviorDirective {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SplitCustomEventsBehaviorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: SplitCustomEventsBehaviorDirective, isStandalone: true, selector: "[asSplitCustomEventsBehavior]", inputs: { multiClickThreshold: { classPropertyName: "multiClickThreshold", publicName: "asSplitCustomMultiClickThreshold", isSignal: true, isRequired: true, transformFunction: null }, deltaInPx: { classPropertyName: "deltaInPx", publicName: "asSplitCustomClickDeltaInPx", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { mouseDown: "asSplitCustomMouseDown", click: "asSplitCustomClick", dblClick: "asSplitCustomDblClick", keyDown: "asSplitCustomKeyDown" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SplitCustomEventsBehaviorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: SplitCustomEventsBehaviorDirective, isStandalone: true, selector: "[asSplitCustomEventsBehavior]", inputs: { multiClickThreshold: { classPropertyName: "multiClickThreshold", publicName: "asSplitCustomMultiClickThreshold", isSignal: true, isRequired: true, transformFunction: null }, deltaInPx: { classPropertyName: "deltaInPx", publicName: "asSplitCustomClickDeltaInPx", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { mouseDown: "asSplitCustomMouseDown", click: "asSplitCustomClick", dblClick: "asSplitCustomDblClick", keyDown: "asSplitCustomKeyDown" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SplitCustomEventsBehaviorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SplitCustomEventsBehaviorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[asSplitCustomEventsBehavior]',
@@ -2472,10 +2472,10 @@ class SplitGutterDirective {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SplitGutterDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: SplitGutterDirective, isStandalone: true, selector: "[asSplitGutter]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SplitGutterDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: SplitGutterDirective, isStandalone: true, selector: "[asSplitGutter]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SplitGutterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SplitGutterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[asSplitGutter]',
@@ -2517,10 +2517,10 @@ class SplitGutterDynamicInjectorDirective {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SplitGutterDynamicInjectorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: SplitGutterDynamicInjectorDirective, isStandalone: true, selector: "[asSplitGutterDynamicInjector]", inputs: { gutterNum: ["asSplitGutterDynamicInjector", "gutterNum"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SplitGutterDynamicInjectorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: SplitGutterDynamicInjectorDirective, isStandalone: true, selector: "[asSplitGutterDynamicInjector]", inputs: { gutterNum: ["asSplitGutterDynamicInjector", "gutterNum"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SplitGutterDynamicInjectorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SplitGutterDynamicInjectorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[asSplitGutterDynamicInjector]',
@@ -3114,10 +3114,10 @@ class SplitComponent {
         });
         this.dragProgressSubject.next(this.createDragInteractionEvent(this.draggedGutterIndex()));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SplitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SplitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SplitComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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"] }]
         }], 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: [{
@@ -3298,15 +3298,15 @@ class SplitAreaComponent {
         }
         return boundarySize;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SplitAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SplitAreaComponent, isStandalone: true, selector: "p-splitter-area", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, lockSize: { classPropertyName: "lockSize", publicName: "lockSize", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClassesBinding", "style.grid-column": "this.hostGridColumnStyleBinding", "style.grid-row": "this.hostGridRowStyleBinding", "style.position": "this.hostPositionStyleBinding" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SplitAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SplitAreaComponent, isStandalone: true, selector: "p-splitter-area", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, lockSize: { classPropertyName: "lockSize", publicName: "lockSize", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClassesBinding", "style.grid-column": "this.hostGridColumnStyleBinding", "style.grid-row": "this.hostGridRowStyleBinding", "style.position": "this.hostPositionStyleBinding" } }, providers: [
             {
                 provide: SPLIT_AREA_CONTRACT,
                 useExisting: SplitAreaComponent,
             },
         ], ngImport: i0, template: "<ng-content></ng-content>\n@if (split._isDragging()) {\n  <div class=\"as-iframe-fix\"></div>\n}\n", styles: [":host{overflow-x:hidden;overflow-y:auto}.as-horizontal>:host{height:100%}.as-vertical>:host{width:100%}.as-iframe-fix{position:absolute;top:0;left:0;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SplitAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SplitAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'p-splitter-area', standalone: true, providers: [
                         {
@@ -3329,6 +3329,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             }] } });
 
 class DynamicDashboardTemplateComponent {
+    /**
+     * Timestamp (Date.now()) of the most recent designer drag/resize gesture step.
+     * Set continuously by `onResizing`/`onMoving` while the user manipulates an
+     * element. Read by DesignerComponent.onWindowMouseup/onWindowTouchend to decide
+     * whether the just-ended pointer release closed a designer mutation worth
+     * pushing onto the undo stack. Static so a single global signal works regardless
+     * of which template instance handled the gesture (every dashboard element has
+     * its own DynamicDashboardTemplateComponent instance).
+     *
+     * Why not bind `(rzStop)`/`(stopped)` on every element template? There are 22
+     * generated tag strings in designer.component.ts that would each need both
+     * extra bindings, and the bindings would still need to call into the designer.
+     * The mouseup/touchend hook already exists and runs in the designer — using a
+     * shared timestamp reuses that path with two two-line writes.
+     *
+     * The 0 sentinel means "no pending gesture". The DesignerComponent consumes
+     * the value (resets it to 0) after committing so a follow-up unrelated mouseup
+     * does not trigger a spurious commit.
+     */
+    static lastDesignerGestureTimestamp = 0;
     /**
      * Input dal componente padre per inputs; usata nella configurazione e nel rendering del componente.
      */
@@ -3439,6 +3459,9 @@ class DynamicDashboardTemplateComponent {
         }
         element.inputs.width = event.size.width + 'px';
         element.inputs.height = event.size.height + 'px';
+        // Mark "designer mutation in progress" so the next window:mouseup in
+        // DesignerComponent commits a history snapshot. See the field doc.
+        DynamicDashboardTemplateComponent.lastDesignerGestureTimestamp = Date.now();
     }
     /**
   * Gestisce la logica operativa di `onMoving` in modo coerente con l'implementazione corrente.
@@ -3467,6 +3490,9 @@ class DynamicDashboardTemplateComponent {
             }
         }
         element.inputs.transform = `matrix(${scaleX}, ${skewY}, ${skewX}, ${scaleY}, ${$event.position.x}, ${$event.position.y})`;
+        // Mark "designer mutation in progress" so the next window:mouseup in
+        // DesignerComponent commits a history snapshot. See the field doc.
+        DynamicDashboardTemplateComponent.lastDesignerGestureTimestamp = Date.now();
     }
     /**
   * Gestisce la logica operativa di `onDragEnter` in modo coerente con l'implementazione corrente.
@@ -3599,27 +3625,41 @@ class DynamicDashboardTemplateComponent {
         return hash.includes('/designer');
     }
     /**
-  * Recupera i dati/valori richiesti da `getComponentFromTemplate`.
-  * @param template Parametro utilizzato dal metodo nel flusso elaborativo.
-  * @returns Valore risolto da `getComponentFromTemplate` in base ai criteri implementati.
-  */
+     * Compila un template dashboard dinamico via `DynamicCompilerService`.
+     * Refactor 2026-04-23: API pubblica `Compiler` sostituisce `ɵcompileComponent`
+     * privata. Vedi skills/angular-jit-compiler-migration/SKILL.md.
+     *
+     * Nota: il precedente `styles: ['./dynamic-dashboard-template.component.css']`
+     * era dead: `styles` del decorator `@Component` accetta CSS **inline**
+     * stringhe, non path relativi. Il CSS del componente base e' gia' applicato
+     * via `styleUrl` sulla classe originale; le subclass ereditano il nodo
+     * Shadow DOM/Emulated del componente padre quando usate via NgComponentOutlet.
+     */
     static getComponentFromTemplate(template) {
         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()"');
-        _compileComponent(DynamicDashboardTemplateComponent, {
+        return DynamicCompilerService.compile({
             template: normalizedTemplate,
-            standalone: true,
-            styles: ['./dynamic-dashboard-template.component.css'],
-            imports: [AsyncPipe, JsonPipe, NgFor, NgIf, PropConverterPipe, NgStyle, NgClass, NgxDraggableDomDirective, AngularResizableDirective, JsonPipe, DashboardComponent, DataSourceComponent, DataRepeaterComponent, DataBoundDirective, NgComponentOutlet, TabViewWrapperComponent, TabPanelWrapperComponent, SplitComponent, SplitAreaComponent, CdkAccordionModule, CdkAccordion, CdkAccordionItem, FilterBarComponent, LazyParametricDialogComponent, PagerComponent].concat(MetadataProviderService.customDesignerComponents)
+            baseClass: DynamicDashboardTemplateComponent,
+            imports: [
+                AsyncPipe, JsonPipe, NgFor, NgIf, PropConverterPipe, NgStyle, NgClass,
+                NgxDraggableDomDirective, AngularResizableDirective,
+                DashboardComponent, DataSourceComponent, DataRepeaterComponent,
+                DataBoundDirective, NgComponentOutlet,
+                TabViewWrapperComponent, TabPanelWrapperComponent,
+                SplitComponent, SplitAreaComponent,
+                CdkAccordionModule, CdkAccordion, CdkAccordionItem,
+                FilterBarComponent, LazyParametricDialogComponent, PagerComponent,
+                ...MetadataProviderService.customDesignerComponents,
+            ],
         });
-        return DynamicDashboardTemplateComponent;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DynamicDashboardTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: DynamicDashboardTemplateComponent, isStandalone: false, selector: "wuic-dynamic-dashboard-template", inputs: { inputs: "inputs", inputProps: "inputProps", toolProps: "toolProps", suggestions: "suggestions", toolId: "toolId", componentId: "componentId", uniqueName: "uniqueName", name: "name", tag: "tag", icon: "icon", group: "group", nestedComponents: "nestedComponents", allowedChildren: "allowedChildren", hide: "hide", componentRef: "componentRef", onDrop: "onDrop", ctxItems: "ctxItems", component: "component" }, ngImport: i0, template: '', isInline: true, styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DynamicDashboardTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: DynamicDashboardTemplateComponent, isStandalone: false, selector: "wuic-dynamic-dashboard-template", inputs: { inputs: "inputs", inputProps: "inputProps", toolProps: "toolProps", suggestions: "suggestions", toolId: "toolId", componentId: "componentId", uniqueName: "uniqueName", name: "name", tag: "tag", icon: "icon", group: "group", nestedComponents: "nestedComponents", allowedChildren: "allowedChildren", hide: "hide", componentRef: "componentRef", onDrop: "onDrop", ctxItems: "ctxItems", component: "component" }, ngImport: i0, template: '', isInline: true, styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DynamicDashboardTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DynamicDashboardTemplateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wuic-dynamic-dashboard-template', template: '', standalone: false }]
         }], propDecorators: { inputs: [{
@@ -3716,12 +3756,12 @@ class DashboardComponent {
         debugger;
     }
     ;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DashboardComponent, isStandalone: true, selector: "wuic-dashboard", inputs: { dashboardElements: "dashboardElements" }, ngImport: i0, template: "@for (dashboardElement of dashboardElements; track dashboardElement.uniqueName) {\r\n<ng-container *ngComponentOutlet=\"getComponent(dashboardElement); inputs: getComponentInputs(dashboardElement)\"></ng-container>\r\n}\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DashboardComponent, isStandalone: true, selector: "wuic-dashboard", inputs: { dashboardElements: "dashboardElements" }, ngImport: i0, template: "@for (dashboardElement of dashboardElements; track dashboardElement.uniqueName) {\r\n<ng-container *ngComponentOutlet=\"getComponent(dashboardElement); inputs: getComponentInputs(dashboardElement)\"></ng-container>\r\n}\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DashboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wuic-dashboard', imports: [NgTemplateOutlet, NgComponentOutlet], template: "@for (dashboardElement of dashboardElements; track dashboardElement.uniqueName) {\r\n<ng-container *ngComponentOutlet=\"getComponent(dashboardElement); inputs: getComponentInputs(dashboardElement)\"></ng-container>\r\n}\r\n" }]
+            args: [{ selector: 'wuic-dashboard', imports: [NgComponentOutlet], template: "@for (dashboardElement of dashboardElements; track dashboardElement.uniqueName) {\r\n<ng-container *ngComponentOutlet=\"getComponent(dashboardElement); inputs: getComponentInputs(dashboardElement)\"></ng-container>\r\n}\r\n" }]
         }], ctorParameters: () => [], propDecorators: { dashboardElements: [{
                 type: Input
             }] } });
@@ -3783,10 +3823,21 @@ class CssSheetEditorComponent {
      * Proprieta di stato del componente per new class name, usata dalla logica interna e dal template.
      */
     newClassName = '';
+    alphaValue = 1;
+    valore;
+    pickerValue;
+    ngAfterViewInit() {
+        this.valore = this.pendingStyleValue;
+        if (!this.valore) {
+            this.valore = '#FFFFFF';
+        }
+        this.pickerValue = this.toHsbaModel(this.valore);
+        this.alphaValue = this.clampAlpha(this.pickerValue?.a);
+    }
     /**
- * Gestisce i cambiamenti degli input aggiornando lo stato derivato e le dipendenze del componente.
- * @param changes Parametro in ingresso utilizzato per determinare il flusso operativo del metodo.
- */
+  * Gestisce i cambiamenti degli input aggiornando lo stato derivato e le dipendenze del componente.
+  * @param changes Parametro in ingresso utilizzato per determinare il flusso operativo del metodo.
+  */
     ngOnChanges(changes) {
         const visibleChange = changes['visible'];
         const becameVisible = !!visibleChange && visibleChange.currentValue === true && visibleChange.previousValue !== true;
@@ -3795,8 +3846,8 @@ class CssSheetEditorComponent {
         }
     }
     /**
- * Gestisce la logica operativa di `close` orchestrando le chiamate `emit`.
- */
+  * Gestisce la logica operativa di `close` orchestrando le chiamate `emit`.
+  */
     close() {
         this.selectedSheetPathDraft = '';
         this.selectedClassSelector = '';
@@ -3808,8 +3859,8 @@ class CssSheetEditorComponent {
         this.visibleChange.emit(false);
     }
     /**
- * Gestisce la logica operativa di `addSheet` orchestrando le chiamate `buildAssetSheetPath` e `some`.
- */
+  * Gestisce la logica operativa di `addSheet` orchestrando le chiamate `buildAssetSheetPath` e `some`.
+  */
     addSheet() {
         const path = this.buildAssetSheetPath(this.newSheetName);
         if (!path) {
@@ -3827,8 +3878,8 @@ class CssSheetEditorComponent {
         this.emitChanges();
     }
     /**
- * Esegue operazioni di persistenza/sincronizzazione in `removeSelectedSheet` trasformando e filtrando collezioni dati.
- */
+  * Esegue operazioni di persistenza/sincronizzazione in `removeSelectedSheet` trasformando e filtrando collezioni dati.
+  */
     removeSelectedSheet() {
         const sheet = this.currentSheet;
         if (!sheet) {
@@ -3840,8 +3891,8 @@ class CssSheetEditorComponent {
         this.emitChanges();
     }
     /**
- * Gestisce la logica operativa di `addClassToSelectedSheet` orchestrando le chiamate `replace` e `String`.
- */
+  * Gestisce la logica operativa di `addClassToSelectedSheet` orchestrando le chiamate `replace` e `String`.
+  */
     addClassToSelectedSheet() {
         const sheet = this.currentSheet;
         if (!sheet) {
@@ -3867,8 +3918,8 @@ class CssSheetEditorComponent {
         this.emitChanges();
     }
     /**
- * Esegue operazioni di persistenza/sincronizzazione in `removeSelectedClass` trasformando e filtrando collezioni dati.
- */
+  * Esegue operazioni di persistenza/sincronizzazione in `removeSelectedClass` trasformando e filtrando collezioni dati.
+  */
     removeSelectedClass() {
         const sheet = this.currentSheet;
         const cssClass = this.currentClass;
@@ -3880,8 +3931,8 @@ class CssSheetEditorComponent {
         this.emitChanges();
     }
     /**
- * Gestisce la logica operativa di `addStyleToSelectedClass` orchestrando le chiamate `String` e `defaultValueForProperty`.
- */
+  * Gestisce la logica operativa di `addStyleToSelectedClass` orchestrando le chiamate `String` e `defaultValueForProperty`.
+  */
     addStyleToSelectedClass() {
         const cssClass = this.currentClass;
         if (!cssClass || !this.styleProps?.length) {
@@ -3902,9 +3953,9 @@ class CssSheetEditorComponent {
         this.emitChanges();
     }
     /**
-* Esegue l'operazione di persistenza/sincronizzazione in `removeStyle` aggiornando lo stato locale quando necessario.
-* @param index Parametro utilizzato dal metodo nel flusso elaborativo.
-*/
+  * Esegue l'operazione di persistenza/sincronizzazione in `removeStyle` aggiornando lo stato locale quando necessario.
+  * @param index Parametro utilizzato dal metodo nel flusso elaborativo.
+  */
     removeStyle(index) {
         const cssClass = this.currentClass;
         if (!cssClass) {
@@ -3914,9 +3965,9 @@ class CssSheetEditorComponent {
         this.emitChanges();
     }
     /**
-* Gestisce la logica operativa di `onStyleKeyChanged` in modo coerente con l'implementazione corrente.
-* @param style Parametro utilizzato dal metodo nel flusso elaborativo.
-*/
+  * Gestisce la logica operativa di `onStyleKeyChanged` in modo coerente con l'implementazione corrente.
+  * @param style Parametro utilizzato dal metodo nel flusso elaborativo.
+  */
     onStyleKeyChanged(style) {
         if (!style) {
             return;
@@ -3925,22 +3976,22 @@ class CssSheetEditorComponent {
         this.emitChanges();
     }
     /**
- * Gestisce la logica operativa di `onStyleValueChanged` orchestrando le chiamate `emitChanges`.
- */
+  * Gestisce la logica operativa di `onStyleValueChanged` orchestrando le chiamate `emitChanges`.
+  */
     onStyleValueChanged() {
         this.emitChanges();
     }
     /**
- * Gestisce la logica operativa di `onPendingStyleKeyChanged` orchestrando le chiamate `defaultValueForProperty`.
- */
+  * Gestisce la logica operativa di `onPendingStyleKeyChanged` orchestrando le chiamate `defaultValueForProperty`.
+  */
     onPendingStyleKeyChanged() {
         this.pendingStyleValue = this.defaultValueForProperty(this.pendingStyleKey, this.pendingStyleValue);
     }
     /**
-* Recupera e prepara i dati richiesti dal chiamante normalizzando e trasformando collezioni di record.
-* @param propKey Identificativo tecnico usato per lookup, confronto o aggiornamento mirato.
-* @returns Collezione di tipo `string[]` derivata dalle trasformazioni applicate nel metodo.
-*/
+  * Recupera e prepara i dati richiesti dal chiamante normalizzando e trasformando collezioni di record.
+  * @param propKey Identificativo tecnico usato per lookup, confronto o aggiornamento mirato.
+  * @returns Collezione di tipo `string[]` derivata dalle trasformazioni applicate nel metodo.
+  */
     getPropertyValues(propKey) {
         const prop = this.styleProps.find((p) => p.key === propKey);
         if (!prop || prop.type !== 'dictionary') {
@@ -3971,10 +4022,10 @@ class CssSheetEditorComponent {
         return normalized.includes('color');
     }
     /**
-* Gestisce la logica di `colorPickerValue` orchestrando le chiamate `String` e `test`.
-* @param value Valore in ingresso elaborato o normalizzato dal metodo.
-* @returns Stringa calcolata dal metodo (chiave, etichetta o frammento testuale).
-*/
+  * Gestisce la logica di `colorPickerValue` orchestrando le chiamate `String` e `test`.
+  * @param value Valore in ingresso elaborato o normalizzato dal metodo.
+  * @returns Stringa calcolata dal metodo (chiave, etichetta o frammento testuale).
+  */
     colorPickerValue(value) {
         const raw = String(value || '').trim();
         if (/^#[0-9a-f]{3}$/i.test(raw) || /^#[0-9a-f]{6}$/i.test(raw) || /^#[0-9a-f]{8}$/i.test(raw)) {
@@ -3983,17 +4034,25 @@ class CssSheetEditorComponent {
         return '#000000';
     }
     /**
-* Gestisce la logica di `onPendingColorChanged` orchestrando le chiamate `String`.
-* @param value Valore in ingresso elaborato o normalizzato dal metodo.
-*/
+  * Gestisce la logica di `onPendingColorChanged` orchestrando le chiamate `String`.
+  * @param value Valore in ingresso elaborato o normalizzato dal metodo.
+  */
     onPendingColorChanged(value) {
-        this.pendingStyleValue = String(value || '').trim();
+        const raw = value;
+        const hsba = {
+            ...(raw || {}),
+            a: this.clampAlpha(raw?.a ?? this.alphaValue)
+        };
+        this.alphaValue = this.clampAlpha(hsba?.a);
+        const newValue = this.toPersistedColor(raw);
+        this.pickerValue = raw;
+        this.pendingStyleValue = this.valore = newValue;
     }
     /**
-* Gestisce la logica operativa di `onStyleColorChanged` in modo coerente con l'implementazione corrente.
-* @param style Parametro utilizzato dal metodo nel flusso elaborativo.
-* @param value Valore in ingresso elaborato o normalizzato dal metodo.
-*/
+  * Gestisce la logica operativa di `onStyleColorChanged` in modo coerente con l'implementazione corrente.
+  * @param style Parametro utilizzato dal metodo nel flusso elaborativo.
+  * @param value Valore in ingresso elaborato o normalizzato dal metodo.
+  */
     onStyleColorChanged(style, value) {
         if (!style) {
             return;
@@ -4002,8 +4061,8 @@ class CssSheetEditorComponent {
         this.onStyleValueChanged();
     }
     /**
- * Gestisce la logica operativa di `onSelectedSheetChanged` orchestrando le chiamate `resetPendingStyle` e `emitChanges`.
- */
+  * Gestisce la logica operativa di `onSelectedSheetChanged` orchestrando le chiamate `resetPendingStyle` e `emitChanges`.
+  */
     onSelectedSheetChanged() {
         const firstClass = this.currentSheet?.classes?.[0];
         this.selectedClassSelector = firstClass?.SelectorString || '';
@@ -4011,8 +4070,8 @@ class CssSheetEditorComponent {
         this.emitChanges();
     }
     /**
- * Gestisce la logica operativa di `onSelectedClassChanged` orchestrando le chiamate `resetPendingStyle` e `emitChanges`.
- */
+  * Gestisce la logica operativa di `onSelectedClassChanged` orchestrando le chiamate `resetPendingStyle` e `emitChanges`.
+  */
     onSelectedClassChanged() {
         this.resetPendingStyle();
         this.emitChanges();
@@ -4036,10 +4095,10 @@ class CssSheetEditorComponent {
         this.resetPendingStyle();
     }
     /**
-* Gestisce la logica operativa di `cloneSheets` trasformando e filtrando collezioni dati.
-* @param sheets Collezione di input processata dal metodo.
-* @returns Collezione di tipo `CssSheetRow[]` risultante dalle trasformazioni applicate dal metodo.
-*/
+  * Gestisce la logica operativa di `cloneSheets` trasformando e filtrando collezioni dati.
+  * @param sheets Collezione di input processata dal metodo.
+  * @returns Collezione di tipo `CssSheetRow[]` risultante dalle trasformazioni applicate dal metodo.
+  */
     cloneSheets(sheets) {
         return (sheets || []).map((sheet) => ({
             SheetPath: this.normalizePath(sheet?.SheetPath),
@@ -4055,11 +4114,11 @@ class CssSheetEditorComponent {
         })).filter((sheet) => !!sheet.SheetPath);
     }
     /**
-* Gestisce la logica di `defaultValueForProperty` trasformando e filtrando collezioni dati.
-* @param propKey Identificativo tecnico usato per lookup, match o aggiornamento mirato.
-* @param currentValue Valore in ingresso elaborato o normalizzato dal metodo.
-* @returns Stringa calcolata dal metodo (chiave, etichetta o frammento testuale).
-*/
+  * Gestisce la logica di `defaultValueForProperty` trasformando e filtrando collezioni dati.
+  * @param propKey Identificativo tecnico usato per lookup, match o aggiornamento mirato.
+  * @param currentValue Valore in ingresso elaborato o normalizzato dal metodo.
+  * @returns Stringa calcolata dal metodo (chiave, etichetta o frammento testuale).
+  */
     defaultValueForProperty(propKey, currentValue) {
         const prop = this.styleProps.find((p) => p.key === propKey);
         if (!prop) {
@@ -4082,18 +4141,18 @@ class CssSheetEditorComponent {
         return String(currentValue || '').trim();
     }
     /**
-* Gestisce la logica operativa di `normalizePath` in modo coerente con l'implementazione corrente.
-* @param path Parametro utilizzato dal metodo nel flusso elaborativo.
-* @returns Stringa risultante calcolata da `normalizePath` per chiavi/label o valori testuali.
-*/
+  * Gestisce la logica operativa di `normalizePath` in modo coerente con l'implementazione corrente.
+  * @param path Parametro utilizzato dal metodo nel flusso elaborativo.
+  * @returns Stringa risultante calcolata da `normalizePath` per chiavi/label o valori testuali.
+  */
     normalizePath(path) {
         return String(path || '').trim().replace(/\\/g, '/');
     }
     /**
-* Costruisce il payload/struttura risultante in `buildAssetSheetPath` partendo dai dati correnti.
-* @param fileName Parametro utilizzato dal metodo nel flusso elaborativo.
-* @returns Stringa risultante calcolata da `buildAssetSheetPath` per chiavi/label o valori testuali.
-*/
+  * Costruisce il payload/struttura risultante in `buildAssetSheetPath` partendo dai dati correnti.
+  * @param fileName Parametro utilizzato dal metodo nel flusso elaborativo.
+  * @returns Stringa risultante calcolata da `buildAssetSheetPath` per chiavi/label o valori testuali.
+  */
     buildAssetSheetPath(fileName) {
         let normalizedName = String(fileName || '').trim();
         if (!normalizedName) {
@@ -4114,8 +4173,8 @@ class CssSheetEditorComponent {
         return `assets/${folder}/${normalizedName}`;
     }
     /**
- * Gestisce la logica operativa di `emitChanges` orchestrando le chiamate `emit` e `cloneSheets`.
- */
+  * Gestisce la logica operativa di `emitChanges` orchestrando le chiamate `emit` e `cloneSheets`.
+  */
     emitChanges() {
         this.applyEditor.emit({
             sheets: this.cloneSheets(this.draftSheets),
@@ -4131,17 +4190,17 @@ class CssSheetEditorComponent {
         this.pendingStyleValue = this.defaultValueForProperty(this.pendingStyleKey);
     }
     /**
- * Gestisce la logica operativa di `currentSheet` orchestrando le chiamate `find` e `normalizePath`.
- * @returns Valore calcolato dinamicamente a partire dallo stato corrente del componente.
- */
+  * Gestisce la logica operativa di `currentSheet` orchestrando le chiamate `find` e `normalizePath`.
+  * @returns Valore calcolato dinamicamente a partire dallo stato corrente del componente.
+  */
     get currentSheet() {
         const match = this.draftSheets.find((s) => this.normalizePath(s.SheetPath) === this.normalizePath(this.selectedSheetPathDraft));
         return match || null;
     }
     /**
- * Gestisce la logica operativa di `currentClass` orchestrando le chiamate `find` e `String`.
- * @returns Valore calcolato dinamicamente a partire dallo stato corrente del componente.
- */
+  * Gestisce la logica operativa di `currentClass` orchestrando le chiamate `find` e `String`.
+  * @returns Valore calcolato dinamicamente a partire dallo stato corrente del componente.
+  */
     get currentClass() {
         const sheet = this.currentSheet;
         if (!sheet) {
@@ -4150,12 +4209,172 @@ class CssSheetEditorComponent {
         const found = sheet.classes.find((c) => String(c.SelectorString || '').trim() === String(this.selectedClassSelector || '').trim());
         return found || null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CssSheetEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", 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\n  [header]=\"'CSS Editor'\"\n  [(visible)]=\"visible\"\n  (visibleChange)=\"visibleChange.emit($event)\"\n  [modal]=\"true\"\n  [closable]=\"true\"\n  [style]=\"{ width: '1100px', maxWidth: '98vw' }\"\n>\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\n          [options]=\"draftSheets\"\n          optionLabel=\"SheetPath\"\n          optionValue=\"SheetPath\"\n          [(ngModel)]=\"selectedSheetPathDraft\"\n          (ngModelChange)=\"onSelectedSheetChanged()\"\n          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=\"^[^/\\\\]+$\" [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()\" [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\n          [options]=\"currentSheet?.classes || []\"\n          optionLabel=\"SelectorString\"\n          optionValue=\"SelectorString\"\n          [(ngModel)]=\"selectedClassSelector\"\n          (ngModelChange)=\"onSelectedClassChanged()\"\n          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()\" [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\n        [options]=\"styleProps\"\n        optionLabel=\"key\"\n        optionValue=\"key\"\n        [(ngModel)]=\"pendingStyleKey\"\n        (ngModelChange)=\"onPendingStyleKeyChanged()\"\n        appendTo=\"body\"\n        [style]=\"{ width: '260px' }\">\n      </p-select>\n\n      @if (isPropertyDictionary(pendingStyleKey)) {\n      <p-select\n        [options]=\"getPropertyValues(pendingStyleKey)\"\n        [(ngModel)]=\"pendingStyleValue\"\n        appendTo=\"body\"\n        [style]=\"{ width: '320px' }\">\n      </p-select>\n      } @else if (isPropertyColor(pendingStyleKey)) {\n      <div class=\"css-style-color-input\">\n        <p-colorPicker\n          [ngModel]=\"colorPickerValue(pendingStyleValue)\"\n          (ngModelChange)=\"onPendingColorChanged($event)\"\n          appendTo=\"body\">\n        </p-colorPicker>\n        <input type=\"text\" [(ngModel)]=\"pendingStyleValue\" style=\"width: 252px;\" />\n      </div>\n      } @else {\n      <input type=\"text\" [(ngModel)]=\"pendingStyleValue\" style=\"width: 320px;\" />\n      }\n\n      <p-button label=\"Aggiungi propriet\u00E0 corrente\" (onClick)=\"addStyleToSelectedClass()\" [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>\n", 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}}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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: i2$1.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: i2$2.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"] }] });
+    async onAlphaChange(rawAlpha) {
+        this.alphaValue = this.clampAlpha(rawAlpha);
+        this.pickerValue = {
+            ...(this.pickerValue || {}),
+            a: this.alphaValue
+        };
+        const newValue = this.toPersistedColor(this.pickerValue);
+        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.8", ngImport: i0, type: CssSheetEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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: i12.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: i2.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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CssSheetEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CssSheetEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wuic-css-sheet-editor', imports: [FormsModule, DialogModule, ButtonModule, SelectModule, ColorPickerModule], template: "<p-dialog\n  [header]=\"'CSS Editor'\"\n  [(visible)]=\"visible\"\n  (visibleChange)=\"visibleChange.emit($event)\"\n  [modal]=\"true\"\n  [closable]=\"true\"\n  [style]=\"{ width: '1100px', maxWidth: '98vw' }\"\n>\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\n          [options]=\"draftSheets\"\n          optionLabel=\"SheetPath\"\n          optionValue=\"SheetPath\"\n          [(ngModel)]=\"selectedSheetPathDraft\"\n          (ngModelChange)=\"onSelectedSheetChanged()\"\n          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=\"^[^/\\\\]+$\" [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()\" [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\n          [options]=\"currentSheet?.classes || []\"\n          optionLabel=\"SelectorString\"\n          optionValue=\"SelectorString\"\n          [(ngModel)]=\"selectedClassSelector\"\n          (ngModelChange)=\"onSelectedClassChanged()\"\n          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()\" [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\n        [options]=\"styleProps\"\n        optionLabel=\"key\"\n        optionValue=\"key\"\n        [(ngModel)]=\"pendingStyleKey\"\n        (ngModelChange)=\"onPendingStyleKeyChanged()\"\n        appendTo=\"body\"\n        [style]=\"{ width: '260px' }\">\n      </p-select>\n\n      @if (isPropertyDictionary(pendingStyleKey)) {\n      <p-select\n        [options]=\"getPropertyValues(pendingStyleKey)\"\n        [(ngModel)]=\"pendingStyleValue\"\n        appendTo=\"body\"\n        [style]=\"{ width: '320px' }\">\n      </p-select>\n      } @else if (isPropertyColor(pendingStyleKey)) {\n      <div class=\"css-style-color-input\">\n        <p-colorPicker\n          [ngModel]=\"colorPickerValue(pendingStyleValue)\"\n          (ngModelChange)=\"onPendingColorChanged($event)\"\n          appendTo=\"body\">\n        </p-colorPicker>\n        <input type=\"text\" [(ngModel)]=\"pendingStyleValue\" style=\"width: 252px;\" />\n      </div>\n      } @else {\n      <input type=\"text\" [(ngModel)]=\"pendingStyleValue\" style=\"width: 320px;\" />\n      }\n\n      <p-button label=\"Aggiungi propriet\u00E0 corrente\" (onClick)=\"addStyleToSelectedClass()\" [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>\n", 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}}\n"] }]
+            args: [{ selector: 'wuic-css-sheet-editor', imports: [FormsModule, DialogModule, ButtonModule, SelectModule, ColorPickerModule, NgStyle], 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"] }]
         }], propDecorators: { visible: [{
                 type: Input
             }], visibleChange: [{
@@ -4265,6 +4484,7 @@ class DesignerComponent {
     currentDashboardDescription = '';
     showArchetypeConfigurator = false;
     archetypeConfigTool = null;
+    propFilter;
     popupManagedArchetypes = ['map', 'chart', 'carousel'];
     propertySectionStateByTool = {};
     maxHistoryLength = 100;
@@ -4274,8 +4494,13 @@ class DesignerComponent {
     lastCommittedSnapshot = null;
     pendingColorHistoryBase = null;
     pendingColorHistoryDirty = false;
+    _historyApplyIsRedo = false;
+    _lastHistoryApplyTime = 0;
+    _suppressRedoClear = false;
+    _redoRebindTimer;
     lastKnownHashRoute = '';
     suppressNextHashGuard = false;
+    _routeParamSub;
     footerHoverTargetElements = [];
     footerHoverOverlayElement = null;
     footerHoverTabPanelPreviousSelection = [];
@@ -4304,7 +4529,7 @@ class DesignerComponent {
         this.workflowRuntimeMetadata = workflowRuntimeMetadata;
         this.defaultCtxItems = [
             {
-                label: 'Remove',
+                label: this.t('designer.remove', 'Remove'),
                 icon: 'pi pi-trash',
                 command: (menuItem) => {
                     if (this.ctxElement) {
@@ -4316,14 +4541,14 @@ class DesignerComponent {
         this.ctxItems.next(this.defaultCtxItems);
         this.footerCtxItems = [
             {
-                label: 'Rename',
+                label: this.t('designer.rename', 'Rename'),
                 icon: 'pi pi-pencil',
                 command: () => {
                     this.renameFooterContextItem();
                 }
             },
             {
-                label: 'Remove',
+                label: this.t('designer.remove', 'Remove'),
                 icon: 'pi pi-trash',
                 command: () => {
                     const uniqueName = String(this.footerCtxElement?.uniqueName || '').trim();
@@ -4335,7 +4560,7 @@ class DesignerComponent {
         ];
         this.hierarchyCtxItems = [
             {
-                label: 'Remove',
+                label: this.t('designer.remove', 'Remove'),
                 icon: 'pi pi-trash',
                 command: () => {
                     const uniqueName = String(this.hierarchyCtxElement?.uniqueName || '').trim();
@@ -4347,24 +4572,25 @@ class DesignerComponent {
         ];
         this.htmlStyleString = '[ngClass]="0.cssClass" [ngStyle]="{width: 0.width, maxWidth: 0.maxWidth, height: 0.height, maxHeight: 0.maxHeight, minWidth: 0.minWidth, minHeight: 0.minHeight, position: 0.position, left: 0.left, top: 0.top, float: 0.float, display: 0.display, boxSizing: 0.boxSizing, backgroundColor: 0.backgroundColor, color: 0.color, borderRadius: 0.borderRadius, borderBottomStyle: 0.borderBottomStyle, borderBottomWidth: 0.borderBottomWidth, borderBottomColor: 0.borderBottomColor, borderLeftStyle: 0.borderLeftStyle, borderLeftWidth: 0.borderLeftWidth, borderLeftColor: 0.borderLeftColor, borderRightStyle: 0.borderRightStyle, borderRightWidth: 0.borderRightWidth, borderRightColor: 0.borderRightColor, borderTopStyle: 0.borderTopStyle, borderTopWidth: 0.borderTopWidth, borderTopColor: 0.borderTopColor, paddingTop: 0.paddingTop, paddingRight: 0.paddingRight, paddingBottom: 0.paddingBottom, paddingLeft: 0.paddingLeft, marginTop: 0.marginTop, marginRight: 0.marginRight, marginBottom: 0.marginBottom, marginLeft: 0.marginLeft, fontSize: 0.fontSize, fontFamily: 0.fontFamily, fontWeight: 0.fontWeight, fontStyle: 0.fontStyle, textDecoration: 0.textDecoration, textAlign: 0.textAlign, verticalAlign: 0.verticalAlign, lineHeight: 0.lineHeight, letterSpacing: 0.letterSpacing, wordSpacing: 0.wordSpacing, textTransform: 0.textTransform, textIndent: 0.textIndent, whiteSpace: 0.whiteSpace, wordWrap: 0.wordWrap, wordBreak: 0.wordBreak, overflow: 0.overflow, overflowX: 0.overflowX, overflowY: 0.overflowY, zIndex: 0.zIndex, cursor: 0.cursor, visibility: 0.visibility, opacity: 0.opacity, filter: 0.filter, transform: 0.transform, transformOrigin: 0.transformOrigin, transition: 0.transition, boxShadow: 0.boxShadow, textShadow: 0.textShadow, backgroundPosition: 0.backgroundPosition, backgroundRepeat: 0.backgroundRepeat, backgroundAttachment: 0.backgroundAttachment, backgroundSize: 0.backgroundSize, backgroundImage: 0.backgroundImage, backgroundClip: 0.backgroundClip, backgroundOrigin: 0.backgroundOrigin, backgroundBlendMode: 0.backgroundBlendMode, clip: 0.clip, clipPath: 0.clipPath, clipRule: 0.clipRule, mask: 0.mask, maskType: 0.maskType, maskImage: 0.maskImage, maskMode: 0.maskMode, maskSize: 0.maskSize, maskRepeat: 0.maskRepeat, maskPosition: 0.maskPosition, maskClip: 0.maskClip, maskOrigin: 0.maskOrigin, maskComposite: 0.maskComposite, maskBorder: 0.maskBorder, maskBorderSource: 0.maskBorderSource, maskBorderSlice: 0.maskBorderSlice, maskBorderWidth: 0.maskBorderWidth, maskBorderOutset: 0.maskBorderOutset, maskBorderRepeat: 0.maskBorderRepeat, maskBorderMode: 0.maskBorderMode, maskBorderClip: 0.maskBorderClip, maskBorderOrigin: 0.maskBorderOrigin, maskBorder, tableLayout: 0.tableLayout, borderCollapse: 0.borderCollapse, borderSpacing: 0.borderSpacing, captionSide: 0.captionSide, emptyCells: 0.emptyCells, tableCaption: 0.tableCaption, tableBorder: 0.tableBorder, tableBorderSpacing: 0.tableBorderSpacing, tableBorderCollapse: 0.tableBorderCollapse, listStyle: 0.listStyle}"';
         this.htmlInputProperties = {
-            cssFile: { type: 'dictionary', values: this.availableProjectCssFiles, propertyCaption: 'CSS File' },
-            cssClass: { type: 'dictionary', values: [''], propertyCaption: 'CSS Classes' },
-            width: { type: 'string' },
-            maxWidth: { type: 'string' },
-            height: { type: 'string' },
-            maxHeight: { type: 'string' },
-            minWidth: { type: 'string' },
-            minHeight: { type: 'string' },
-            position: { type: 'dictionary', values: ['', 'relative', 'absolute', 'fixed', 'static', 'sticky', 'inherit'] },
-            transform: { type: 'string' },
-            top: { type: 'string' },
-            left: { type: 'string' },
-            float: { type: 'dictionary', values: ['', 'left', 'right', 'none', 'inherit'] },
-            display: { type: 'dictionary', values: ['', 'block', 'inline', 'inline-block', 'flex', 'none', 'inherit'] },
-            boxSizing: { type: 'dictionary', values: ['', 'content-box', 'border-box', 'inherit', 'initial', 'unset'] },
+            animation: { type: 'string' },
+            animationName: { type: 'string' },
+            animationDuration: { type: 'string' },
+            animationTimingFunction: { type: 'string' },
+            animationDelay: { type: 'string' },
+            animationIterationCount: { type: 'string' },
+            animationDirection: { type: 'dictionary', values: ['', 'normal', 'reverse', 'alternate', 'alternate-reverse', 'inherit'] },
+            animationFillMode: { type: 'dictionary', values: ['', 'none', 'forwards', 'backwards', 'both', 'inherit'] },
+            animationPlayState: { type: 'dictionary', values: ['', 'running', 'paused', 'inherit'] },
+            background: { type: 'string' },
+            backgroundAttachment: { type: 'dictionary', values: ['', 'scroll', 'fixed', 'local', 'inherit'] },
+            backgroundBlendMode: { type: 'dictionary', values: ['', 'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'saturation', 'color', 'luminosity', 'inherit'] },
+            backgroundClip: { type: 'dictionary', values: ['', 'border-box', 'padding-box', 'content-box', 'inherit'] },
             backgroundColor: { type: 'color' },
-            color: { type: 'color' },
-            // border: { type: 'string' },
+            backgroundImage: { type: 'string' },
+            backgroundOrigin: { type: 'dictionary', values: ['', 'padding-box', 'border-box', 'content-box', 'inherit'] },
+            backgroundPosition: { type: 'dictionary', values: ['', 'left top', 'left center', 'left bottom', 'right top', 'right center', 'right bottom', 'center top', 'center center', 'center bottom', 'x% y%', 'xpos ypos', 'inherit'] },
+            backgroundRepeat: { type: 'dictionary', values: ['', 'repeat', 'repeat-x', 'repeat-y', 'no-repeat', 'inherit'] },
+            backgroundSize: { type: 'dictionary', values: ['', 'auto', 'cover', 'contain', 'inherit'] },
             borderRadius: { type: 'string' },
             borderStyle: {
                 type: 'dictionary', values: ['', 'none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge',
@@ -4384,54 +4610,32 @@ class DesignerComponent {
             borderTopStyle: { type: 'dictionary', values: ['', 'none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'inherit'] },
             borderTopWidth: { type: 'string' },
             borderTopColor: { type: 'color' },
-            paddingTop: { type: 'string' },
-            paddingRight: { type: 'string' },
-            paddingBottom: { type: 'string' },
-            paddingLeft: { type: 'string' },
-            marginTop: { type: 'string' },
-            marginRight: { type: 'string' },
-            marginBottom: { type: 'string' },
-            marginLeft: { type: 'string' },
+            boxSizing: { type: 'dictionary', values: ['', 'content-box', 'border-box', 'inherit', 'initial', 'unset'] },
+            boxShadow: { type: 'string' },
+            clip: { type: 'string' },
+            clipPath: { type: 'string' },
+            clipRule: { type: 'dictionary', values: ['', 'nonzero', 'evenodd', 'inherit'] },
+            color: { type: 'color' },
+            cssFile: { type: 'dictionary', values: this.availableProjectCssFiles, propertyCaption: 'CSS File' },
+            cssClass: { type: 'dictionary', values: [], propertyCaption: 'CSS Classes' },
+            cursor: { type: 'dictionary', values: ['', 'auto', 'crosshair', 'default', 'pointer', 'move', 'e-resize', 'ne-resize', 'nw-resize', 'n-resize', 'se-resize', 'sw-resize', 's-resize', 'w-resize', 'text', 'wait', 'help', 'progress', 'inherit'] },
+            display: { type: 'dictionary', values: ['', 'block', 'inline', 'inline-block', 'flex', 'none', 'inherit'] },
+            filter: { type: 'string' },
+            float: { type: 'dictionary', values: ['', 'left', 'right', 'none', 'inherit'] },
+            // border: { type: 'string' },
             fontSize: { type: 'string' },
             fontFamily: { type: 'dictionary', values: ['', 'Arial', 'Verdana', 'Times New Roman', 'Georgia', 'Trebuchet MS', 'Tahoma', 'Courier New', 'Lucida Console', 'Impact', 'Comic Sans MS', 'Palatino Linotype', 'Book Antiqua', 'Lucida Sans Unicode', 'Arial Black', 'Garamond', 'Courier', 'Brush Script MT', 'Arial Narrow', 'Geneva', 'Gill Sans', 'Helvetica', 'sans-serif', 'serif', 'monospace', 'cursive', 'fantasy'] },
             fontWeight: { type: 'dictionary', values: ['', 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'] },
             fontStyle: { type: 'dictionary', values: ['', 'normal', 'italic', 'oblique'] },
-            textDecoration: { type: 'dictionary', values: ['', 'none', 'underline', 'overline', 'line-through', 'blink'] },
-            textAlign: { type: 'dictionary', values: ['', 'left', 'right', 'center', 'justify', 'inherit'] },
-            verticalAlign: { type: 'dictionary', values: ['', 'baseline', 'sub', 'super', 'top', 'text-top', 'middle', 'bottom', 'text-bottom', 'inherit'] },
-            lineHeight: { type: 'string' },
+            height: { type: 'string' },
+            left: { type: 'string' },
             letterSpacing: { type: 'string' },
+            lineHeight: { type: 'string' },
             listStyle: { type: 'dictionary', values: ['', 'none', 'disc', 'circle', 'square', 'decimal', 'decimal-leading-zero', 'lower-roman', 'upper-roman', 'lower-greek', 'lower-latin', 'upper-latin', 'armenian', 'georgian', 'lower-alpha', 'upper-alpha', 'none', 'inherit'] },
-            wordSpacing: { type: 'dictionary', values: ['', 'normal', 'inherit'] },
-            textTransform: { type: 'dictionary', values: ['', 'none', 'capitalize', 'uppercase', 'lowercase', 'inherit'] },
-            textIndent: { type: 'string' },
-            whiteSpace: { type: 'dictionary', values: ['', 'normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'inherit'] },
-            wordWrap: { type: 'dictionary', values: ['', 'normal', 'break-word', 'inherit'] },
-            wordBreak: { type: 'dictionary', values: ['', 'normal', 'break-all', 'keep-all', 'inherit'] },
-            overflow: { type: 'dictionary', values: ['', 'visible', 'hidden', 'scroll', 'auto', 'inherit'] },
-            overflowX: { type: 'dictionary', values: ['', 'visible', 'hidden', 'scroll', 'auto', 'inherit'] },
-            overflowY: { type: 'dictionary', values: ['', 'visible', 'hidden', 'scroll', 'auto', 'inherit'] },
-            zIndex: { type: 'string' },
-            cursor: { type: 'dictionary', values: ['', 'auto', 'crosshair', 'default', 'pointer', 'move', 'e-resize', 'ne-resize', 'nw-resize', 'n-resize', 'se-resize', 'sw-resize', 's-resize', 'w-resize', 'text', 'wait', 'help', 'progress', 'inherit'] },
-            visibility: { type: 'dictionary', values: ['', 'visible', 'hidden', 'collapse', 'inherit'] },
-            opacity: { type: 'string' },
-            filter: { type: 'string' },
-            transformOrigin: { type: 'string' },
-            transition: { type: 'string' },
-            boxShadow: { type: 'string' },
-            textShadow: { type: 'string' },
-            background: { type: 'string' },
-            backgroundPosition: { type: 'dictionary', values: ['', 'left top', 'left center', 'left bottom', 'right top', 'right center', 'right bottom', 'center top', 'center center', 'center bottom', 'x% y%', 'xpos ypos', 'inherit'] },
-            backgroundRepeat: { type: 'dictionary', values: ['', 'repeat', 'repeat-x', 'repeat-y', 'no-repeat', 'inherit'] },
-            backgroundAttachment: { type: 'dictionary', values: ['', 'scroll', 'fixed', 'local', 'inherit'] },
-            backgroundSize: { type: 'dictionary', values: ['', 'auto', 'cover', 'contain', 'inherit'] },
-            backgroundImage: { type: 'string' },
-            backgroundClip: { type: 'dictionary', values: ['', 'border-box', 'padding-box', 'content-box', 'inherit'] },
-            backgroundOrigin: { type: 'dictionary', values: ['', 'padding-box', 'border-box', 'content-box', 'inherit'] },
-            backgroundBlendMode: { type: 'dictionary', values: ['', 'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'saturation', 'color', 'luminosity', 'inherit'] },
-            clip: { type: 'string' },
-            clipPath: { type: 'string' },
-            clipRule: { type: 'dictionary', values: ['', 'nonzero', 'evenodd', 'inherit'] },
+            marginTop: { type: 'string' },
+            marginRight: { type: 'string' },
+            marginBottom: { type: 'string' },
+            marginLeft: { type: 'string' },
             mask: { type: 'string' },
             maskType: { type: 'dictionary', values: ['', 'luminance', 'alpha', 'auto', 'inherit'] },
             maskImage: { type: 'string' },
@@ -4452,19 +4656,40 @@ class DesignerComponent {
             maskBorderClip: { type: 'dictionary', values: ['', 'border-box', 'padding-box', 'content-box', 'inherit'] },
             maskBorderOrigin: { type: 'dictionary', values: ['', 'border-box', 'padding-box', 'content-box', 'inherit'] },
             maskBorderComposite: { type: 'dictionary', values: ['', 'add', 'subtract', 'intersect', 'exclude', 'inherit'] },
+            maxHeight: { type: 'string' },
+            maxWidth: { type: 'string' },
+            minWidth: { type: 'string' },
+            minHeight: { type: 'string' },
+            opacity: { type: 'string' },
+            overflow: { type: 'dictionary', values: ['', 'visible', 'hidden', 'scroll', 'auto', 'inherit'] },
+            overflowX: { type: 'dictionary', values: ['', 'visible', 'hidden', 'scroll', 'auto', 'inherit'] },
+            overflowY: { type: 'dictionary', values: ['', 'visible', 'hidden', 'scroll', 'auto', 'inherit'] },
+            paddingTop: { type: 'string' },
+            paddingRight: { type: 'string' },
+            paddingBottom: { type: 'string' },
+            paddingLeft: { type: 'string' },
+            position: { type: 'dictionary', values: ['', 'relative', 'absolute', 'fixed', 'static', 'sticky', 'inherit'] },
+            textAlign: { type: 'dictionary', values: ['', 'left', 'right', 'center', 'justify', 'inherit'] },
+            textIndent: { type: 'string' },
+            textTransform: { type: 'dictionary', values: ['', 'none', 'capitalize', 'uppercase', 'lowercase', 'inherit'] },
+            textDecoration: { type: 'dictionary', values: ['', 'none', 'underline', 'overline', 'line-through', 'blink'] },
+            textShadow: { type: 'string' },
+            top: { type: 'string' },
+            transformOrigin: { type: 'string' },
+            transform: { type: 'string' },
+            transition: { type: 'string' },
             transitionProperty: { type: 'string' },
             transitionDuration: { type: 'string' },
             transitionTimingFunction: { type: 'string' },
             transitionDelay: { type: 'string' },
-            animation: { type: 'string' },
-            animationName: { type: 'string' },
-            animationDuration: { type: 'string' },
-            animationTimingFunction: { type: 'string' },
-            animationDelay: { type: 'string' },
-            animationIterationCount: { type: 'string' },
-            animationDirection: { type: 'dictionary', values: ['', 'normal', 'reverse', 'alternate', 'alternate-reverse', 'inherit'] },
-            animationFillMode: { type: 'dictionary', values: ['', 'none', 'forwards', 'backwards', 'both', 'inherit'] },
-            animationPlayState: { type: 'dictionary', values: ['', 'running', 'paused', 'inherit'] }
+            verticalAlign: { type: 'dictionary', values: ['', 'baseline', 'sub', 'super', 'top', 'text-top', 'middle', 'bottom', 'text-bottom', 'inherit'] },
+            visibility: { type: 'dictionary', values: ['', 'visible', 'hidden', 'collapse', 'inherit'] },
+            whiteSpace: { type: 'dictionary', values: ['', 'normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'inherit'] },
+            width: { type: 'string' },
+            wordSpacing: { type: 'dictionary', values: ['', 'normal', 'inherit'] },
+            wordWrap: { type: 'dictionary', values: ['', 'normal', 'break-word', 'inherit'] },
+            wordBreak: { type: 'dictionary', values: ['', 'normal', 'break-all', 'keep-all', 'inherit'] },
+            zIndex: { type: 'string' }
         };
         this.tableInputProperties = {
             rows: { type: 'numberToArray', converter: this.converter.bind(this) },
@@ -4480,24 +4705,24 @@ class DesignerComponent {
             tableBorderCollapse: { type: 'dictionary', values: ['', 'separate', 'collapse', 'inherit'] }
         };
         this.htmlInputs = {
-            cssClass: [],
-            cssFile: '',
-            width: '100px',
-            height: '100px',
-            backgroundColor: 'transparent',
-            color: 'inherit',
-            borderBottomStyle: 'solid',
-            borderBottomWidth: '1px',
-            borderBottomColor: 'inherit',
-            borderLeftStyle: 'solid',
-            borderLeftWidth: '1px',
-            borderLeftColor: 'inherit',
-            borderRightStyle: 'solid',
-            borderRightWidth: '1px',
-            borderRightColor: 'inherit',
-            borderTopStyle: 'solid',
-            borderTopWidth: '1px',
-            borderTopColor: 'inherit'
+            cssClass: ['html-input-designer'],
+            cssFile: 'styles.css',
+            // width: '100px',
+            // height: '100px',
+            // backgroundColor: 'transparent',
+            // color: 'inherit',
+            // borderBottomStyle: 'solid',
+            // borderBottomWidth: '1px',
+            // borderBottomColor: 'inherit',
+            // borderLeftStyle: 'solid',
+            // borderLeftWidth: '1px',
+            // borderLeftColor: 'inherit',
+            // borderRightStyle: 'solid',
+            // borderRightWidth: '1px',
+            // borderRightColor: 'inherit',
+            // borderTopStyle: 'solid',
+            // borderTopWidth: '1px',
+            // borderTopColor: 'inherit'
         };
         this.tableInputs = {
             rows: 2, // Array(2).fill(1).map((x, i) => i)
@@ -4590,24 +4815,7 @@ class DesignerComponent {
         };
         Object.assign(this.bindableHtmlInputs, this.htmlInputs);
         Object.assign(this.bindableHtmlInputs, {
-            width: null,
-            display: 'inline-block',
-            height: null,
-            // borderStyle: null,
-            // borderWidth: null,
-            // borderColor: null,
-            borderBottomStyle: null,
-            borderBottomWidth: null,
-            borderBottomColor: null,
-            borderLeftStyle: null,
-            borderLeftWidth: null,
-            borderLeftColor: null,
-            borderRightStyle: null,
-            borderRightWidth: null,
-            borderRightColor: null,
-            borderTopStyle: null,
-            borderTopWidth: null,
-            borderTopColor: null
+            cssClass: ['html-input-bindable-designer']
         });
         this.headerProps = {
             headerType: {
@@ -4675,6 +4883,10 @@ class DesignerComponent {
                     area.inputs.size = event.sizes[i];
                 });
                 cd.detectChanges();
+                // Splitter dragEnd is the gesture-end signal — mutated `area.inputs.size`
+                // values must be persisted in undo history right here. Without this,
+                // resizing splitter areas was not undoable.
+                this.commitHistoryIfChanged();
             }
         };
         Object.assign(this.splitterInputs, this.htmlInputs);
@@ -4690,6 +4902,7 @@ class DesignerComponent {
         Object.assign(this.splitterAreaInputs, this.htmlInputs);
         delete this.splitterAreaInputs['width'];
         delete this.splitterAreaInputs['height'];
+        delete this.splitterAreaInputs['cssClass'];
         this.accordionProps = {
             items: { type: 'numberToArray', converter: this.converterAccordion.bind(this) },
             toggle: { type: 'function', hide: true }
@@ -4721,6 +4934,7 @@ class DesignerComponent {
             items: 2
         };
         Object.assign(this.accordionAreaInputs, this.htmlInputs);
+        delete this.accordionAreaInputs['cssClass'];
         this.accordionAreaInputs['height'] = null;
         this.accordionAreaInputs['display'] = 'block';
         // this.accordionAreaInputs['borderStyle'] = 'none';
@@ -4745,7 +4959,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 1,
                 name: 'TABLE',
-                tag: `<table [attr.id]="uniqueName" [attr.title]="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" [attr.title]="uniqueName + ' - ' + nestedTR.uniqueName" ${this.htmlStyleString.replace(/0/g, 'nestedTR.inputs')}><td *ngFor="let nestedTD of nestedTR.nestedComponents" [attr.id]="nestedTD.uniqueName" [attr.title]="uniqueName + ' - ' + nestedTR.uniqueName + ' - ' + 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.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>`,
                 icon: 'pi pi-table',
                 inputProps: tableProps,
                 inputs: tableFullInputs,
@@ -4760,7 +4974,7 @@ class DesignerComponent {
                 tag: ``,
                 icon: 'pi pi-bars',
                 inputProps: this.htmlInputProperties,
-                inputs: tableFullInputs,
+                inputs: Object.assign({}, tableFullInputs, { cssClass: [] }),
                 nestedComponents: []
             },
             {
@@ -4777,14 +4991,14 @@ class DesignerComponent {
                 inputs: Object.assign({}, tableFullInputs, {
                     colSpan: '',
                     rowSpan: ''
-                }),
+                }, { cssClass: [] }),
                 nestedComponents: []
             },
             {
                 group: 'HTML',
                 toolId: 2,
                 name: 'DIV',
-                tag: `<div [attr.id]="uniqueName" [attr.title]="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.replace(/0/g, 'inputs')}><wuic-dashboard [dashboardElements]="nestedComponents"></wuic-dashboard></div>`,
                 icon: 'pi pi-stop',
                 inputProps: this.htmlInputProperties,
                 inputs: this.htmlInputs,
@@ -4795,7 +5009,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 3,
                 name: 'SPAN',
-                tag: `<span [attr.id]="uniqueName" [attr.title]="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.replace(/0/g, 'inputs')}>{{inputs.innerText}}</span>`,
                 icon: 'pi pi-language',
                 inputProps: this.bindableHtmlProps,
                 inputs: this.bindableHtmlInputs
@@ -4804,7 +5018,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 17,
                 name: 'LABEL',
-                tag: `<label [attr.id]="uniqueName" [attr.title]="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.replace(/0/g, 'inputs')}>{{getLabelDisplayValue(inputs)}}</label>`,
                 icon: 'pi pi-tag',
                 inputProps: Object.assign({}, this.bindableHtmlProps, {
                     displayField: { type: 'dictionary', values: [''], propertyCaption: 'Display Field' },
@@ -4822,7 +5036,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 4,
                 name: 'Hx',
-                tag: `<h1 *ngIf="inputs.headerType == 'h1'" [attr.id]="uniqueName" [attr.title]="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" [attr.title]="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" [attr.title]="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" [attr.title]="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" [attr.title]="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" [attr.title]="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.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>`,
                 icon: 'pi pi-chevron-up',
                 inputProps: this.headerProps,
                 inputs: this.headerInputs
@@ -4831,7 +5045,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 5,
                 name: 'ANCHOR',
-                tag: `<a [attr.id]="uniqueName" [attr.title]="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.replace(/0/g, 'inputs')}>{{inputs.innerText}}</a>`,
                 icon: 'pi pi-link',
                 inputProps: this.anchorProps,
                 inputs: this.anchorInputs
@@ -4840,7 +5054,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 6,
                 name: 'IMG',
-                tag: `<img [attr.id]="uniqueName" [attr.title]="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.replace(/0/g, 'inputs')} />`,
                 icon: 'pi pi-image',
                 inputProps: this.imgProps,
                 inputs: this.imgInputs
@@ -4849,7 +5063,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 18,
                 name: 'IFRAME',
-                tag: `<iframe [attr.id]="uniqueName" [attr.title]="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.replace(/0/g, 'inputs')}></iframe>`,
                 icon: 'pi pi-window-maximize',
                 inputProps: Object.assign({}, this.htmlInputProperties, {
                     src: { type: 'string', propertyCaption: 'Source URL' },
@@ -4868,7 +5082,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 7,
                 name: 'UL',
-                tag: `<ul [attr.id]="uniqueName" [attr.title]="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.replace(/0/g, '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>
@@ -4899,7 +5113,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 8,
                 name: 'BUTTON',
-                tag: `<button [attr.id]="uniqueName" [attr.title]="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.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>`,
                 icon: 'pi pi-arrow-circle-down',
                 inputProps: this.htmlButtonProps,
                 inputs: this.bindableHtmlInputs
@@ -4908,7 +5122,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 9,
                 name: 'INPUT',
-                tag: `<input [attr.id]="uniqueName" [attr.title]="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.replace(/0/g, 'inputs')} />`,
                 icon: 'pi pi-pencil',
                 inputProps: Object.assign({}, this.htmlInputProperties, {
                     inputType: { type: 'dictionary', propertyCaption: 'Type', values: ['text', 'number', 'email', 'password', 'search', 'url'] },
@@ -4930,7 +5144,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 10,
                 name: 'TEXTAREA',
-                tag: `<textarea [attr.id]="uniqueName" [attr.title]="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.replace(/0/g, 'inputs')}></textarea>`,
                 icon: 'pi pi-align-left',
                 inputProps: Object.assign({}, this.htmlInputProperties, {
                     placeholder: { type: 'string', propertyCaption: 'Placeholder' },
@@ -4952,7 +5166,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 11,
                 name: 'CHECKBOX',
-                tag: `<label [attr.id]="uniqueName" [attr.title]="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.replace(/0/g, '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, {
                     label: { type: 'string', propertyCaption: 'Label' },
@@ -4976,7 +5190,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 12,
                 name: 'SEPARATOR',
-                tag: `<hr [attr.id]="uniqueName" [attr.title]="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.replace(/0/g, 'inputs')} />`,
                 icon: 'pi pi-minus',
                 inputProps: this.htmlInputProperties,
                 inputs: Object.assign({}, this.htmlInputs, {
@@ -4995,7 +5209,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 19,
                 name: 'HR',
-                tag: `<hr [attr.id]="uniqueName" [attr.title]="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.replace(/0/g, 'inputs')} />`,
                 icon: 'pi pi-minus',
                 inputProps: this.htmlInputProperties,
                 inputs: Object.assign({}, this.htmlInputs, {
@@ -5014,7 +5228,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 13,
                 name: 'KPI',
-                tag: `<div [attr.id]="uniqueName" [attr.title]="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.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>`,
                 icon: 'pi pi-chart-line',
                 inputProps: Object.assign({}, this.htmlInputProperties, {
                     caption: { type: 'string', propertyCaption: 'Caption' },
@@ -5039,7 +5253,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 14,
                 name: 'DATE',
-                tag: `<input [attr.id]="uniqueName" [attr.title]="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.replace(/0/g, 'inputs')} />`,
                 icon: 'pi pi-calendar',
                 inputProps: Object.assign({}, this.htmlInputProperties, {
                     value: { type: 'string', propertyCaption: 'Value (yyyy-mm-dd)' },
@@ -5058,7 +5272,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 15,
                 name: 'SELECT',
-                tag: `<select [attr.id]="uniqueName" [attr.title]="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.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>`,
                 icon: 'pi pi-list',
                 inputProps: Object.assign({}, this.htmlInputProperties, this.dsProperties, {
                     optionsCsv: { type: 'string', propertyCaption: 'Options CSV' },
@@ -5085,7 +5299,7 @@ class DesignerComponent {
                 group: 'HTML',
                 toolId: 16,
                 name: 'MULTISELECT',
-                tag: `<select [attr.id]="uniqueName" [attr.title]="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.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>`,
                 icon: 'pi pi-check-square',
                 inputProps: Object.assign({}, this.htmlInputProperties, this.dsProperties, {
                     optionsCsv: { type: 'string', propertyCaption: 'Options CSV' },
@@ -5114,7 +5328,7 @@ class DesignerComponent {
                 group: 'DATA',
                 toolId: 100,
                 name: 'DATASOURCE',
-                tag: `<wuic-data-source [attr.id]="uniqueName" [attr.title]="uniqueName" #datasource [autoload]="inputs.autoload" [routeFromRouting]="inputs.routeFromRouting" [route]="inputs.route" [parentRecord]="inputs.selectedItem" [parentMetaInfo]="inputs.parentMetaInfo" [componentRef]="inputs.componentRef"></wuic-data-source>`,
+                tag: `<wuic-data-source [attr.id]="uniqueName"  #datasource [autoload]="inputs.autoload" [routeFromRouting]="inputs.routeFromRouting" [route]="inputs.route" [parentRecord]="inputs.selectedItem" [parentMetaInfo]="inputs.parentMetaInfo" [componentRef]="inputs.componentRef"></wuic-data-source>`,
                 icon: 'pi pi-database',
                 inputProps: {
                     autoload: { type: 'boolean' },
@@ -5160,7 +5374,7 @@ class DesignerComponent {
                 group: 'DATA',
                 toolId: 101,
                 name: 'DATAREPEATER',
-                tag: `<wuic-data-repeater [attr.id]="uniqueName" [attr.title]="uniqueName" [datasource]="inputs.datasource?.component" [action]="inputs.action" [hideToolbar]="inputs.hideToolbar" [rowCustomSelect]="inputs.rowCustomSelect?.bind(inputs)"></wuic-data-repeater>`,
+                tag: `<wuic-data-repeater [attr.id]="uniqueName"  [datasource]="inputs.datasource?.component" [action]="inputs.action" [hideToolbar]="inputs.hideToolbar" [rowCustomSelect]="inputs.rowCustomSelect?.bind(inputs)"></wuic-data-repeater>`,
                 icon: 'pi pi-table',
                 inputProps: this.repeaterProperties,
                 inputs: {
@@ -5181,7 +5395,7 @@ class DesignerComponent {
                 group: 'DATA',
                 toolId: 102,
                 name: 'FILTERBAR',
-                tag: `<wuic-filter-bar [attr.id]="uniqueName" [attr.title]="uniqueName" [datasource]="inputs.datasource?.component"></wuic-filter-bar>`,
+                tag: `<wuic-filter-bar [attr.id]="uniqueName"  [datasource]="inputs.datasource?.component"></wuic-filter-bar>`,
                 icon: 'pi pi-filter',
                 inputProps: Object.assign({}, this.dsProperties),
                 inputs: {
@@ -5193,7 +5407,7 @@ class DesignerComponent {
                 group: 'DATA',
                 toolId: 104,
                 name: 'PAGER',
-                tag: `<wuic-pager [attr.id]="uniqueName" [attr.title]="uniqueName" [datasource]="inputs.datasource?.component" [pageSize]="inputs.pageSize" [currentPage]="inputs.currentPage"></wuic-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, {
                     pageSize: { type: 'string', propertyCaption: 'Page Size' },
@@ -5210,12 +5424,12 @@ class DesignerComponent {
                 group: 'CONTAINER',
                 toolId: 1000,
                 name: 'TABVIEW',
-                tag: `<p-tabView [attr.id]="uniqueName" [attr.title]="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]').replace(/0/g, 'inputs')}>
             <wuic-dashboard [dashboardElements]="nestedComponents"></wuic-dashboard>
         </p-tabView>`,
                 icon: 'pi pi-folder',
                 inputProps: this.htmlInputProperties,
-                inputs: this.htmlInputs,
+                inputs: Object.assign({}, this.htmlInputs, { cssClass: [] }),
                 nestedComponents: [],
                 allowedChildren: ['TABPANEL']
             },
@@ -5223,7 +5437,7 @@ class DesignerComponent {
                 group: 'CONTAINER',
                 toolId: 1001,
                 name: 'TABPANEL',
-                tag: `<p-tabPanel [attr.id]="uniqueName" [attr.title]="uniqueName" [selected]="inputs.selected">
+                tag: `<p-tabPanel [attr.id]="uniqueName"  [selected]="inputs.selected">
                  <wuic-dashboard [dashboardElements]="nestedComponents"></wuic-dashboard>
              </p-tabPanel>`,
                 icon: 'pi pi-tags',
@@ -5238,8 +5452,8 @@ class DesignerComponent {
                 group: 'CONTAINER',
                 toolId: 1002,
                 name: 'SPLITTER',
-                tag: `<p-splitter [attr.id]="uniqueName" [attr.title]="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" [attr.title]="uniqueName + ' - ' + 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.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')}>
                   <wuic-dashboard [dashboardElements]="nestedArea.nestedComponents"></wuic-dashboard>
                 </p-splitter-area>
               </p-splitter>`,
@@ -5266,8 +5480,8 @@ class DesignerComponent {
                 group: 'CONTAINER',
                 toolId: 1004,
                 name: 'ACCORDION',
-                tag: ` <cdk-accordion class="wuic-accordion-tab" [attr.id]="uniqueName" [attr.title]="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')}>
-              <cdk-accordion-item *ngFor="let nestedItem of nestedComponents" [attr.id]="nestedItem.uniqueName" [attr.title]="nestedItem.uniqueName"
+                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')}>
+              <cdk-accordion-item *ngFor="let nestedItem of nestedComponents" [attr.id]="nestedItem.uniqueName" 
                 ${this.htmlStyleString.replace(/0/g, 'nestedItem.inputs')}>
                   <div class="wuic-accordion-header">
                     <a class="wuic-accordion-header-link" (click)="inputs.toggle?.($event, this, nestedItem)">{{nestedItem.inputs.header}}</a>
@@ -5327,7 +5541,7 @@ class DesignerComponent {
                 label: this.trslSrv.instant('load')
             },
             {
-                label: 'CSS',
+                label: this.t('designer.css', 'CSS'),
                 command: () => {
                     this.openCssSheetEditor();
                 }
@@ -5335,23 +5549,58 @@ class DesignerComponent {
         ];
         this.dashMenus = menus;
         this.refreshGraphActionsMenuItems();
-        //verifica se c'è un dashboard da caricare route /datshboard/route-name e fai il loaddashboard di conseguenza
-        var routeDashboard = this.route.snapshot.paramMap.get('route');
-        if (routeDashboard) {
-            this.noEdit = true;
-            this.setDesignerEditModeClass(false);
-            await this.loadDashboard({ board_route: routeDashboard });
-            return;
-        }
-        this.noEdit = false;
-        this.setDesignerEditModeClass(true);
-        this.reloadDashboards();
+        // Subscribe to route param changes so navigating between
+        // /:route/dashboard URLs reloads the dashboard (e.g. sasa/dashboard → master-det/dashboard).
+        // Using paramMap observable instead of snapshot ensures the component reacts
+        // when Angular reuses the same instance for a different :route value.
+        this._routeParamSub = this.route.paramMap.subscribe(async (params) => {
+            const routeDashboard = params.get('route');
+            if (routeDashboard) {
+                this.noEdit = true;
+                this.setDesignerEditModeClass(false);
+                await this.loadDashboard({ board_route: routeDashboard });
+            }
+            else {
+                this.noEdit = false;
+                this.setDesignerEditModeClass(true);
+                this.reloadDashboards();
+            }
+        });
+        // Capture-phase mouseup/touchend listeners for post-gesture history commit.
+        //
+        // Why capture phase instead of the @HostListener('window:mouseup') above?
+        // `NgxDraggableDomDirective` attaches a BUBBLE-phase mouseup listener on
+        // `document` that calls `event.stopImmediatePropagation()` (see
+        // directive/ngx-draggable-dom.directive.ts onMouseUp), which kills every
+        // window-level bubble listener — including our HostListener. So dropping a
+        // dragged div never reached `onWindowMouseup` and the history commit was
+        // skipped.
+        //
+        // A capture-phase listener fires BEFORE the bubble phase, so it runs even
+        // if something downstream stops propagation. We still keep the HostListener
+        // path: the commit helper consumes the timestamp (sets it to 0), so the
+        // listener that fires first commits, and any subsequent call no-ops.
+        this._designerGestureMouseUp = this.commitHistoryAfterDesignerGestureIfNeeded.bind(this);
+        document.addEventListener('mouseup', this._designerGestureMouseUp, true);
+        document.addEventListener('touchend', this._designerGestureMouseUp, true);
     }
     ngOnDestroy() {
+        this._routeParamSub?.unsubscribe();
+        if (this._designerGestureMouseUp) {
+            document.removeEventListener('mouseup', this._designerGestureMouseUp, true);
+            document.removeEventListener('touchend', this._designerGestureMouseUp, true);
+            this._designerGestureMouseUp = undefined;
+        }
         this.clearHierarchyHoverHighlight();
         this.clearFooterHoverHighlight();
         this.setDesignerEditModeClass(false);
     }
+    /**
+     * Handler capture-phase per mouseup/touchend su document. Riferimento
+     * conservato per poter fare `removeEventListener` in `ngOnDestroy` (bind
+     * produce una funzione diversa a ogni chiamata quindi va memorizzata).
+     */
+    _designerGestureMouseUp;
     async onWindowHashChange() {
         const nextHash = String(window?.location?.hash || '');
         const previousHash = this.lastKnownHashRoute;
@@ -5665,7 +5914,8 @@ class DesignerComponent {
                 value: '',
                 required: true
             }
-        ], null, "400px");
+            // height=340px: evita lo scroll interno al dialog con 2 campi + footer.
+        ], null, "400px", "340px");
         if (!resp) {
             WtoolboxService.messageNotificationService.add({
                 severity: 'warn',
@@ -5727,11 +5977,37 @@ class DesignerComponent {
             'blueprint',
             'extraProps'
         ]);
-        this.flattenComponentTree(this.dashboardElements).forEach((element) => {
+        const serializationFlattened = this.flattenComponentTree(this.dashboardElements);
+        serializationFlattened.forEach((element) => {
             if (element.name == 'DATASOURCE') {
                 const componentRef = element?.inputs?.['componentRef']?.value?.component;
                 const metaInfoFromRef = componentRef?.value?.metaInfo ?? componentRef?.metaInfo ?? null;
-                element.inputs['metaInfo'] = metaInfoFromRef;
+                // Only overwrite metaInfo if we got a live reference; otherwise keep the
+                // serialized copy so that undo/redo snapshots preserve the metadata.
+                if (metaInfoFromRef) {
+                    element.inputs['metaInfo'] = metaInfoFromRef;
+                }
+            }
+            // Normalize DATAREPEATER.datasource to a lightweight {uniqueName, component}
+            // before serialization. Ensures uniqueName survives JSON round-trip.
+            if (element.name === 'DATAREPEATER' || element.name === 'SELECT' || element.name === 'MULTISELECT' || element.name === 'UL') {
+                const dsInput = element.inputs?.['datasource'];
+                if (dsInput && typeof dsInput === 'object' && !(dsInput instanceof BehaviorSubject)) {
+                    // Case 1: full DS element (has inputs) — reduce to lightweight ref
+                    if (dsInput.uniqueName && dsInput.inputs) {
+                        element.inputs['datasource'] = {
+                            uniqueName: dsInput.uniqueName,
+                            component: dsInput.component ?? null
+                        };
+                    }
+                    // Case 2: already lightweight but missing uniqueName — recover from tree
+                    if (!dsInput.uniqueName && dsInput.component) {
+                        const firstDs = serializationFlattened.find((e) => e.name === 'DATASOURCE');
+                        if (firstDs?.uniqueName) {
+                            dsInput.uniqueName = firstDs.uniqueName;
+                        }
+                    }
+                }
             }
         });
         return WtoolboxService.safeStringify(this.dashboardElements, function (key, value) {
@@ -5741,6 +6017,16 @@ class DesignerComponent {
             if (key == 'component' && (currentParentProp == 'componentRef' || currentParentProp == 'datasource' || currentParentProp == 'parentDatasource')) {
                 return null;
             }
+            // Also null-out live DataSourceComponent instances nested deeper in the tree
+            // (e.g. DATAREPEATER.inputs.datasource.component) where currentParentProp
+            // tracking loses context due to JSON.stringify's sequential key visitation.
+            // The value may be the component directly OR a BehaviorSubject wrapping it.
+            if (key === 'component' && value && typeof value === 'object') {
+                const inner = (value instanceof BehaviorSubject) ? value.value : value;
+                if (inner && typeof inner === 'object' && ('fetchInfo$' in inner || '__ngContext__' in inner)) {
+                    return null;
+                }
+            }
             currentParentProp = key;
             if (value instanceof BehaviorSubject) {
                 return value.value === undefined ? null : value.value;
@@ -5802,14 +6088,35 @@ class DesignerComponent {
         if (typeof document === 'undefined') {
             return;
         }
-        const normalized = Array.from(new Set((sheetPaths || []).map((x) => this.normalizeSheetPath(x)).filter((x) => !!x)));
+        // Filter out placeholder defaults (`styles.css` bare filename) and any
+        // bare-filename path that isn't anchored to an assets/ folder. These are
+        // defaults set on the tool metadata (see `this.htmlInputs.cssFile =
+        // 'styles.css'` at the top of the component) which the user never
+        // overrode with a real CSS file. Emitting a `<link>` for them 404s on
+        // both the frontend origin and the backend fallback, producing noisy
+        // console errors in dev/E2E without any functional impact.
+        const isPlaceholderPath = (p) => {
+            if (!p)
+                return true;
+            const lower = p.toLowerCase();
+            // Single-segment, no `assets/` prefix → treat as placeholder.
+            const stripped = lower.replace(/^\/+/, '');
+            if (stripped === 'styles.css')
+                return true;
+            if (!stripped.includes('/') && stripped.endsWith('.css'))
+                return true;
+            return false;
+        };
+        const normalized = Array.from(new Set((sheetPaths || [])
+            .map((x) => this.normalizeSheetPath(x))
+            .filter((x) => !!x && !isPlaceholderPath(x))));
         const head = document.head;
         const existingLinks = Array.from(head.querySelectorAll('link[data-wuic-dashboard-sheet="true"]'));
         const keepSet = new Set(normalized.map((x) => x.toLowerCase()));
         const resolveStaticBaseUrl = () => {
             try {
                 // In designer/ng-serve scenarios css assets are served by the current frontend origin.
-                return new URL(document.baseURI || window.location.href).toString();
+                return WtoolboxService.appSettings?.file_path;
             }
             catch {
                 return window.location.origin;
@@ -5817,7 +6124,7 @@ class DesignerComponent {
         };
         const resolveBackendStaticBaseUrl = () => {
             try {
-                const raw = String(WtoolboxService.appSettings?.global_root_url || '').trim();
+                const raw = WtoolboxService.appSettings?.file_path;
                 if (!raw) {
                     return '';
                 }
@@ -6025,35 +6332,94 @@ class DesignerComponent {
      * Ripristina lo snapshot precedente dalla history undo.
      */
     undo() {
+        console.log(`[UNDO-v9] called. undoLen=${this.undoHistory.length} redoLen=${this.redoHistory.length} applyingHistory=${this.applyingHistory}`);
         if (this.applyingHistory || this.undoHistory.length === 0) {
+            console.log(`[UNDO-v9] SKIP`);
             return;
         }
-        const target = this.undoHistory.pop();
-        if (!target) {
-            return;
+        // Cancel any pending redo rebind timer
+        if (this._redoRebindTimer) {
+            clearTimeout(this._redoRebindTimer);
+            this._redoRebindTimer = undefined;
+            console.log(`[UNDO-v9] cancelled redo rebind timer`);
+        }
+        try {
+            const target = this.undoHistory.pop();
+            if (this.lastCommittedSnapshot) {
+                this.redoHistory.push(this.lastCommittedSnapshot);
+            }
+            this.lastCommittedSnapshot = target;
+            console.log(`[UNDO-v9] applying target. undoLen=${this.undoHistory.length} redoLen=${this.redoHistory.length}`);
+            this.applyHistorySnapshot(target, false);
         }
-        if (this.lastCommittedSnapshot) {
-            this.redoHistory.push(this.lastCommittedSnapshot);
+        catch (err) {
         }
-        this.applyHistorySnapshot(target);
-        this.lastCommittedSnapshot = target;
     }
     /**
      * Riapplica lo snapshot successivo dalla history redo.
      */
     redo() {
+        console.log(`[REDO-v9] called. undoLen=${this.undoHistory.length} redoLen=${this.redoHistory.length} applyingHistory=${this.applyingHistory}`);
         if (this.applyingHistory || this.redoHistory.length === 0) {
+            console.log(`[REDO-v9] SKIP`);
             return;
         }
-        const target = this.redoHistory.pop();
-        if (!target) {
-            return;
+        try {
+            const target = this.redoHistory.pop();
+            if (this.lastCommittedSnapshot) {
+                this.undoHistory.push(this.lastCommittedSnapshot);
+            }
+            console.log(`[REDO-v9] applying target. undoLen=${this.undoHistory.length} redoLen=${this.redoHistory.length}`);
+            this.lastCommittedSnapshot = target;
+            this.applyHistorySnapshot(target, true);
+            // Re-bind DATAREPEATER→DATASOURCE after redo.
+            // Cancel any previous pending rebind (e.g. if user does redo then undo quickly).
+            if (this._redoRebindTimer) {
+                clearTimeout(this._redoRebindTimer);
+            }
+            this._redoRebindTimer = setTimeout(() => {
+                this._redoRebindTimer = undefined;
+                console.log(`[REDO-REBIND-v9] timer fired. redoLen=${this.redoHistory.length} applyingHistory=${this.applyingHistory}`);
+                // Skip if user already did undo since the redo
+                if (this.redoHistory.length > 0 || this.applyingHistory) {
+                    console.log(`[REDO-REBIND-v9] SKIP`);
+                    return;
+                }
+                this.applyingHistory = true;
+                try {
+                    const liveFlat = this.flattenedDashboardElements || [];
+                    liveFlat.forEach((el) => {
+                        if (el?.name === 'DATASOURCE') {
+                            const cr = el?.inputs?.['componentRef'];
+                            const crVal = (cr instanceof BehaviorSubject) ? cr.value : cr;
+                            const liveComp = crVal?.component instanceof BehaviorSubject
+                                ? crVal.component.value : crVal?.component;
+                            if (liveComp) {
+                                liveFlat.forEach((dr) => {
+                                    if (dr?.name === 'DATAREPEATER' || dr?.name === 'SELECT' || dr?.name === 'MULTISELECT' || dr?.name === 'UL') {
+                                        const dsRef = dr?.inputs?.['datasource'];
+                                        if (dsRef?.uniqueName === el.uniqueName && dsRef?.component instanceof BehaviorSubject) {
+                                            dsRef.component.next(liveComp);
+                                        }
+                                    }
+                                });
+                                if (liveComp.fetchData) {
+                                    liveComp.fetchData();
+                                }
+                            }
+                        }
+                    });
+                    this.cd.detectChanges();
+                }
+                finally {
+                    this.applyingHistory = false;
+                    this._lastHistoryApplyTime = Date.now();
+                }
+            }, 1000);
         }
-        if (this.lastCommittedSnapshot) {
-            this.undoHistory.push(this.lastCommittedSnapshot);
+        catch (err) {
+            // redo error — ignore
         }
-        this.applyHistorySnapshot(target);
-        this.lastCommittedSnapshot = target;
     }
     /**
      * Gestisce shortcut globali undo/redo (`Ctrl/Cmd+Z`, `Ctrl/Cmd+Shift+Z`, `Ctrl/Cmd+Y`)
@@ -6087,30 +6453,73 @@ class DesignerComponent {
         }
     }
     /**
-     * Chiude transazioni history pendenti da color picker al rilascio mouse.
+     * Chiude transazioni history pendenti da color picker al rilascio mouse e
+     * committa la history se l'utente ha appena terminato un drag/resize di un
+     * elemento del designer.
      */
     onWindowMouseup() {
-        this.finalizePendingColorHistory();
-        this.commitHistoryIfChanged();
+        if (!this.finalizePendingColorHistory()) {
+            // Generic mouseup MUST NOT call commitHistoryIfChanged unconditionally:
+            // mouseup fires BEFORE click, so clicking the Undo/Redo button would
+            // otherwise commit (clearing redoHistory) before the (click) handler runs.
+            //
+            // Drag/resize gestures however are NOT captured by any other commit path
+            // (onResizing/onMoving in DynamicDashboardTemplateComponent only mutate
+            // inputs.width/height/transform without any history hook), so the final
+            // size/position would never make it into undoHistory.
+            //
+            // We resolve the conflict via a "did the user just drag/resize a
+            // designer element?" check: onResizing/onMoving stamp a static timestamp
+            // each time they fire; here we commit only if that timestamp is fresh,
+            // then consume it so unrelated mouseups don't trigger spurious commits.
+            this.commitHistoryAfterDesignerGestureIfNeeded();
+        }
+    }
+    /**
+     * Variante touch: stesso meccanismo di mouseup per supportare drag/resize
+     * via touch su designer.
+     */
+    onWindowTouchend() {
+        if (!this.finalizePendingColorHistory()) {
+            this.commitHistoryAfterDesignerGestureIfNeeded();
+        }
     }
     /**
-     * Variante touch di finalizzazione history pendente.
+     * Se l'utente ha appena terminato un drag/resize di un elemento del designer
+     * (rilevato tramite il timestamp statico aggiornato da `onResizing`/`onMoving`
+     * in `DynamicDashboardTemplateComponent`), committa lo snapshot history e
+     * consuma il timestamp. La finestra di 1000ms tollera lievi ritardi tra
+     * ultimo evento di gesture e mouseup; valori piu bassi rischiavano di
+     * mancare commit su gesture brevi su laptop lenti.
      */
-    onWindowTouchend() {
-        this.finalizePendingColorHistory();
+    commitHistoryAfterDesignerGestureIfNeeded() {
+        const ts = DynamicDashboardTemplateComponent.lastDesignerGestureTimestamp;
+        if (!ts) {
+            return;
+        }
+        const elapsed = Date.now() - ts;
+        if (elapsed > 1000) {
+            // Stale signal (the gesture was much earlier — e.g., the user dragged,
+            // released, then later clicked an unrelated button without dragging).
+            // Reset so we don't keep checking a never-cleared old timestamp.
+            DynamicDashboardTemplateComponent.lastDesignerGestureTimestamp = 0;
+            return;
+        }
+        DynamicDashboardTemplateComponent.lastDesignerGestureTimestamp = 0;
         this.commitHistoryIfChanged();
     }
     /**
      * Esegue commit history su modifiche input concluse da tastiera.
      */
     onWindowKeyup() {
-        this.commitHistoryIfChanged();
     }
     /**
      * Esegue commit history su eventi `change` globali dei controlli.
      */
     onWindowChange() {
-        this.commitHistoryIfChanged();
+        // Removed commitHistoryIfChanged — change events from inputs during
+        // undo/redo rehydration cause spurious commits that clear redoHistory.
+        // Commits are already triggered by setValue, drop, mouseup, etc.
     }
     get currentDashboardTitle() {
         const route = String(this.currentDashboardRoute || '').trim();
@@ -6217,27 +6626,48 @@ class DesignerComponent {
     }
     /**
      * Rigenera il menu azioni rapido del designer (`graphActionsMenuItems`),
-     * collegando le entry ai rispettivi handler toolbar (riapri, nuovo, salva, elimina, CSS).
+     * collegando le entry ai rispettivi handler toolbar (riapri, nuovo, salva,
+     * elimina, CSS). Viene invocato:
+     * - al bootstrap del component;
+     * - ogni volta che l'utente clicca il button "Azioni designer" (handler
+     *   nel template chiama `refreshGraphActionsMenuItems()` PRIMA di
+     *   `graphActionsMenu.toggle($event)`), cosi' i label sono sempre
+     *   ri-tradotti con la lingua corrente — fix 2026-04-23 per il caso in
+     *   cui l'utente cambia lingua mentre il popup non e' mai stato aperto
+     *   in quella lingua: i `this.t(...)` dei label restavano appiccicati
+     *   alla lingua di bootstrap;
+     * - dopo `toggleHideDatasourcesInCanvas()` per aggiornare la label/icon
+     *   della voce show/hide datasource.
+     *
+     * Deve essere `public` perche' il template lo invoca direttamente
+     * (strictTemplates: true in tsconfig).
      */
     refreshGraphActionsMenuItems() {
         this.graphActionsMenuItems = [
             {
-                label: 'Riapri',
+                label: this.t('designer.menu_reopen', 'Riapri'),
                 icon: 'pi pi-folder-open',
                 command: () => this.openReopenDashboardDialog()
             },
             {
-                label: 'Nuovo grafo',
+                label: this.t('designer.menu_new', 'Nuovo grafo'),
                 icon: 'pi pi-file',
                 command: () => this.onToolbarNewDashboard()
             },
             {
-                label: 'Salva grafo',
+                label: this.t('designer.menu_save', 'Salva grafo'),
                 icon: 'pi pi-save',
                 command: () => this.onToolbarSaveDashboard()
             },
             {
-                label: 'Elimina',
+                label: this.t('designer.css', 'CSS'),
+                icon: 'pi pi-palette',
+                command: () => {
+                    this.openCssSheetEditor();
+                }
+            },
+            {
+                label: this.t('designer.menu_delete', 'Elimina'),
                 icon: 'pi pi-trash',
                 disabled: !this.currentDashboardRoute,
                 command: () => this.onToolbarDeleteDashboard()
@@ -6246,7 +6676,9 @@ class DesignerComponent {
                 separator: true
             },
             {
-                label: this.hideDatasourcesInCanvas ? 'Mostra datasource nel canvas' : 'Nascondi datasource nel canvas',
+                label: this.hideDatasourcesInCanvas
+                    ? this.t('designer.menu_show_datasources', 'Mostra datasource nel canvas')
+                    : this.t('designer.menu_hide_datasources', 'Nascondi datasource nel canvas'),
                 icon: this.hideDatasourcesInCanvas ? 'pi pi-eye' : 'pi pi-eye-slash',
                 command: () => this.toggleHideDatasourcesInCanvas()
             }
@@ -7176,7 +7608,7 @@ class DesignerComponent {
     buildFieldEditorContextMenuItems(field, ds) {
         return [
             {
-                label: 'Apri metadato colonna',
+                label: this.t('designer.ctx_open_column_metadata', 'Apri metadato colonna'),
                 icon: 'pi pi-external-link',
                 command: () => {
                     void this.metadataEditorSrv.openMetadataColumnEditorInContext(field, this.metaSrv, ds)
@@ -7184,7 +7616,7 @@ class DesignerComponent {
                 }
             },
             {
-                label: 'Sposta in nuovo Tab',
+                label: this.t('designer.ctx_move_to_new_tab', 'Sposta in nuovo Tab'),
                 icon: 'pi pi-folder-open',
                 command: () => {
                     void this.moveContextFieldToNewTab(field, ds)
@@ -7192,7 +7624,7 @@ class DesignerComponent {
                 }
             },
             {
-                label: 'Sposta in tab esistente',
+                label: this.t('designer.ctx_move_to_existing_tab', 'Sposta in tab esistente'),
                 icon: 'pi pi-list',
                 command: () => {
                     void this.moveContextFieldToExistingTab(field, ds)
@@ -7205,9 +7637,9 @@ class DesignerComponent {
      * Prompt nome tab e aggiorna `mc_edit_associated_tab` della colonna nel datasource designer.
      */
     async moveContextFieldToNewTab(field, ds) {
-        const promptResult = await WtoolboxService.promptDialog('Sposta in nuovo Tab', [{
+        const promptResult = await WtoolboxService.promptDialog(this.t('designer.ctx_move_to_new_tab', 'Sposta in nuovo Tab'), [{
                 name: 'tabName',
-                caption: 'Nome Tab',
+                caption: this.t('designer.tab_name_caption', 'Nome Tab'),
                 type: 'text',
                 required: true,
                 value: this.getAssociatedTabValue(field)
@@ -7685,8 +8117,21 @@ class DesignerComponent {
             if (tool.inputs[toolProp.key] == $event) {
                 return;
             }
-            if (toolProp.value.asyncPath && !($event[toolProp.value.asyncPath] instanceof BehaviorSubject)) {
-                $event[toolProp.value.asyncPath] = new BehaviorSubject($event.inputs.componentRef.value.component);
+            if (toolProp.value.asyncPath) {
+                // For dropped-component-list (e.g. DATAREPEATER.datasource), store a lightweight
+                // reference {uniqueName, component: BS(liveComp)} instead of the full element.
+                // The full element contains circular references and Angular internals that break
+                // JSON serialization and produce snapshots missing the uniqueName.
+                const liveComp = $event?.inputs?.componentRef?.value?.component
+                    ?? $event?.inputs?.componentRef?.component
+                    ?? null;
+                const compBs = ($event[toolProp.value.asyncPath] instanceof BehaviorSubject)
+                    ? $event[toolProp.value.asyncPath]
+                    : new BehaviorSubject(liveComp);
+                $event = {
+                    uniqueName: $event.uniqueName,
+                    [toolProp.value.asyncPath]: compBs
+                };
             }
             tool.inputs[toolProp.key] = $event;
         }
@@ -9030,6 +9475,14 @@ Display formula context:
                     }
                 }
             }
+            if (!destination) {
+                WtoolboxService.messageNotificationService.add({
+                    severity: 'error',
+                    summary: this.t('error', 'Error'),
+                    detail: this.t('designer.invalid_child_component', 'Invalid child component')
+                });
+                return;
+            }
             destination.push(currentTool);
             if (currentTool.onDrop) {
                 currentTool.onDrop(currentTool);
@@ -9053,7 +9506,7 @@ Display formula context:
     filterTool(tool) {
         return !tool.hide;
     }
-    getToolPropertySections(tool) {
+    getToolPropertySections(tool, propFilter) {
         const sectionOrder = ['data', 'content', 'layout', 'style', 'behavior', 'advanced'];
         const labels = {
             data: 'Data',
@@ -9074,7 +9527,7 @@ Display formula context:
         const grouped = {};
         sectionOrder.forEach((key) => grouped[key] = []);
         (tool?.toolProps || [])
-            .filter((tp) => this.filterTool(tp?.value || {}) && !this.shouldHideToolProp(tool, tp))
+            .filter((tp) => this.filterTool(tp?.value || {}) && !this.shouldHideToolProp(tool, tp, propFilter))
             .forEach((tp) => {
             const section = this.getPropertySectionKey(tp?.key, tp?.value);
             grouped[section].push(tp);
@@ -9086,10 +9539,13 @@ Display formula context:
             .map((key) => ({
             key: key,
             label: labels[key],
-            open: savedState[key] !== undefined ? !!savedState[key] : openByDefault[key],
+            open: (propFilter && propFilter.length >= 3 && grouped[key].length) ? true : (savedState[key] !== undefined ? !!savedState[key] : openByDefault[key]),
             props: grouped[key]
         }));
     }
+    clearPropFilter() {
+        this.propFilter = "";
+    }
     /**
      * Persiste lo stato open/close di una sezione pannello proprieta
      * per il tool corrente (chiave per `componentId/uniqueName`).
@@ -9117,7 +9573,7 @@ Display formula context:
      * Determina se una proprieta va nascosta nel pannello:
      * per DATASOURCE nasconde i campi formula master-detail quando manca `parentDatasource`.
      */
-    shouldHideToolProp(tool, toolProp) {
+    shouldHideToolProp(tool, toolProp, propFilter) {
         if (!tool || !toolProp) {
             return false;
         }
@@ -9127,6 +9583,9 @@ Display formula context:
         if (tool.name === 'DATAREPEATER' && (toolProp.key === 'wizardNextConfig' || toolProp.key === 'wizardCompleteConfig' || toolProp.key === 'wizardPrevConfig')) {
             return this.getRepeaterAction(tool) !== 'wizard';
         }
+        if (propFilter && propFilter.length >= 3) {
+            return toolProp.key.toLocaleLowerCase().indexOf(propFilter.toLocaleLowerCase()) < 0;
+        }
         return false;
     }
     /**
@@ -9301,6 +9760,17 @@ Display formula context:
     dragEnd() {
         this.draggedPayload = null;
     }
+    /**
+     * Double-click su un tool nella palette: lo droppa al primo livello (root) del canvas,
+     * senza nesting. Simula il flusso drag+drop ma forza destination = dashboardElements.
+     */
+    dropToolAtRoot(payload) {
+        if (this.noEdit) {
+            return;
+        }
+        this.draggedPayload = payload;
+        this.drop({ toElement: null });
+    }
     /**
      * Salva il dashboard corrente tramite `dataSrv.saveDashboard` -> server `MetaService.saveDashboard`.
      * Mapping persistenza verificato su `Kiara_wuic_new.dbo.dom_board`:
@@ -9356,7 +9826,10 @@ Display formula context:
                 value: '',
                 required: true
             }
-        ], null, "320px");
+            // width=400px, height=340px: con default height=250px il body scrollava perche'
+            // 2 campi text con label + footer OK/Cancel non ci stavano. 340px contiene:
+            // header ~45 + 2 x (label+input) ~140 + footer ~60 + padding ~50 = ~295, margine.
+        ], null, "400px", "340px");
         if (resp) {
             var dashboardName = resp.dashboardName.value;
             var newRoute = resp.route.value;
@@ -9394,7 +9867,7 @@ Display formula context:
      * e ricostruisce lo stato runtime del designer partendo da `dom_board.boardcontent`.
      * Supporta route in forme alias (`board_route`, `boardroute`, `dashRoute`).
      */
-    async loadDashboard(dashboard) {
+    async loadDashboard(dashboard, skipServerFetch = false) {
         const dashRoute = String(dashboard?.board_route ??
             dashboard?.boardroute ??
             dashboard?.boardRoute ??
@@ -9417,14 +9890,17 @@ Display formula context:
         }
         this.currentDashboardRoute = dashRoute;
         this.refreshGraphActionsMenuItems();
-        var payload = {
-            user_id: this.userInfo.getuserInfo().user_id,
-            dashRoute: dashRoute
-        };
-        var result = await this.dataSrv.loadDashboard(payload);
-        const resultRows = Array.isArray(result)
-            ? result
-            : (Array.isArray(result?.results) ? result.results : (result ? [result] : []));
+        let resultRows = [];
+        if (!skipServerFetch) {
+            var payload = {
+                user_id: this.userInfo.getuserInfo().user_id,
+                dashRoute: dashRoute
+            };
+            var result = await this.dataSrv.loadDashboard(payload);
+            resultRows = Array.isArray(result)
+                ? result
+                : (Array.isArray(result?.results) ? result.results : (result ? [result] : []));
+        }
         this.currentDashboardDescription = String(dashboard?.board_des ??
             dashboard?.boarddes ??
             resultRows?.[0]?.board_des ??
@@ -9536,6 +10012,7 @@ Display formula context:
                                                 var dsElement = flattened.find(x => x.uniqueName == v.uniqueName);
                                                 if (dsElement) {
                                                     if (ds.component instanceof BehaviorSubject) {
+                                                        console.log(`[SUBSCRIBE-CHAIN-LOAD-v9] pushing liveComp into DR.datasource.component for ${ds.uniqueName}`);
                                                         ds.component.next(v.component);
                                                         if (dsElement.inputs['parentDatasource'] instanceof BehaviorSubject) {
                                                             var dsParent = (dsElement.inputs['parentDatasource'] instanceof BehaviorSubject) ? dsElement.inputs['parentDatasource'].value : dsElement.inputs['parentDatasource'];
@@ -9553,7 +10030,7 @@ Display formula context:
                                                         if (dsElements.length == dsElementCount) {
                                                             combineLatest(dsSubs).subscribe((infos) => {
                                                                 infos.forEach((info, i) => {
-                                                                    if (info && dsElements[i].inputs['metaInfo']) {
+                                                                    if (info?.metaInfo && dsElements[i].inputs['metaInfo']) {
                                                                         Object.assign(info.metaInfo, dsElements[i].inputs['metaInfo']);
                                                                         dsElements[i].inputs['metaInfo'] = null;
                                                                     }
@@ -9564,6 +10041,11 @@ Display formula context:
                                                                         this.propertyTreeBuilder(ld.inputs['action'].value, ld.inputs);
                                                                     }
                                                                 });
+                                                                // All DataSources loaded — re-capture the history snapshot
+                                                                // so it includes the full metaInfo. Without this, the initial
+                                                                // snapshot captured by resetHistory() has empty metaInfo because
+                                                                // the DS fetch is async.
+                                                                this.lastCommittedSnapshot = this.captureHistorySnapshot();
                                                             });
                                                         }
                                                     }
@@ -9618,6 +10100,11 @@ Display formula context:
         if (this.applyingHistory || this.noEdit) {
             return;
         }
+        // Skip commit right after undo/redo — the rehydration triggers change
+        // events that would create spurious snapshots and clear redoHistory.
+        if (Date.now() - this._lastHistoryApplyTime < 500) {
+            return;
+        }
         const current = this.captureHistorySnapshot();
         const previous = this.lastCommittedSnapshot;
         if (!previous) {
@@ -9632,7 +10119,9 @@ Display formula context:
         if (this.undoHistory.length > this.maxHistoryLength) {
             this.undoHistory.shift();
         }
-        this.redoHistory = [];
+        if (!this._suppressRedoClear) {
+            this.redoHistory = [];
+        }
         this.lastCommittedSnapshot = current;
     }
     /**
@@ -9646,17 +10135,25 @@ Display formula context:
         this.pendingColorHistoryDirty = false;
     }
     /**
-     * Applica uno snapshot storico deserializzando gli elementi e ripristinando la selezione.
+     * Applica uno snapshot storico usando lo stesso codepath di loadDashboard.
+     * Passa il serializedElements come boardcontent finto, preservando la route corrente.
      */
-    applyHistorySnapshot(snapshot) {
+    applyHistorySnapshot(snapshot, isRedo = false) {
         this.applyingHistory = true;
+        // Destroy + recreate synchronously so applyingHistory stays true
+        // through the entire operation and mouseup doesn't clear redoHistory.
         try {
+            this.dashboardElements = [];
+            this.flattenedDashboardElements = [];
+            this.cd.detectChanges();
             this.applySerializedDashboardElements(snapshot?.serializedElements || '[]', snapshot?.selectedUniqueName || null);
         }
         finally {
-            this.applyingHistory = false;
             this.pendingColorHistoryBase = null;
             this.pendingColorHistoryDirty = false;
+            this.lastCommittedSnapshot = snapshot;
+            this.applyingHistory = false;
+            this._lastHistoryApplyTime = Date.now();
         }
     }
     /**
@@ -9664,10 +10161,11 @@ Display formula context:
      */
     finalizePendingColorHistory() {
         if (this.applyingHistory || !this.pendingColorHistoryBase || !this.pendingColorHistoryDirty) {
-            return;
+            return false;
         }
         const current = this.captureHistorySnapshot();
         const base = this.pendingColorHistoryBase;
+        let committed = false;
         if (base.serializedElements !== current.serializedElements) {
             this.undoHistory.push(base);
             if (this.undoHistory.length > this.maxHistoryLength) {
@@ -9675,9 +10173,11 @@ Display formula context:
             }
             this.redoHistory = [];
             this.lastCommittedSnapshot = current;
+            committed = true;
         }
         this.pendingColorHistoryBase = null;
         this.pendingColorHistoryDirty = false;
+        return committed;
     }
     /**
      * Ripristina il designer da JSON serializzato:
@@ -9701,6 +10201,11 @@ Display formula context:
         }
         this.mergeMissingToolPropsRecursive(loadedDashboard);
         this.dashboardComponents = [];
+        // Use the same DS tracking / combineLatest rehydration path as loadDashboard
+        // so that DATASOURCE ↔ DATAREPEATER bindings are fully restored on undo/redo.
+        const dsSubs = [];
+        const dsElements = [];
+        const dsElementCount = (loadedDashboard || []).filter((x) => x?.name === 'DATASOURCE').length;
         const flattened = this.flattenComponentTree(loadedDashboard);
         flattened.forEach((element) => {
             if (element?.inputs && element.inputs['cssClass'] !== undefined) {
@@ -9711,6 +10216,16 @@ Display formula context:
                 if (normalizedAction) {
                     element.inputs['action'] = normalizedAction;
                 }
+                else {
+                    const inferredFromCustom = Object.keys(element?.inputs || {})
+                        .find((k) => k.startsWith('customProps_') && element.inputs[k] != null);
+                    if (inferredFromCustom) {
+                        const inferredAction = this.normalizeArchetypeAction(inferredFromCustom.replace('customProps_', ''));
+                        if (inferredAction) {
+                            element.inputs['action'] = inferredAction;
+                        }
+                    }
+                }
                 this.ensureDataRepeaterTagSupportsHideToolbar(element);
                 this.ensureDataRepeaterHideToolbar(element);
                 this.ensureDataRepeaterRowCustomSelect(element);
@@ -9728,8 +10243,27 @@ Display formula context:
             const customProps = Object.keys(element?.inputs || {}).filter((x) => x.startsWith('customProps_'));
             customProps.forEach((prop) => this.hidrateCustomPropsRecursive(element.inputs[prop]));
             Object.keys(element?.inputProps || {}).forEach((prop) => {
-                if (element.inputProps[prop].async) {
-                    if (element.inputProps[prop].type == 'dropped-component') {
+                const propDef = element.inputProps[prop];
+                // Hydrate dropped-component-list props (e.g. DATAREPEATER.datasource) that have
+                // asyncPath but no async flag. Ensure the inner path (e.g. 'component') is a
+                // BehaviorSubject so the DS→DR binding can be reconnected when Angular creates
+                // the live DataSourceComponent. Do NOT wrap the outer value in a BS — the runtime
+                // expects datasource to remain a plain object {uniqueName, component: BS(...)}.
+                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) : '[]'}`);
+                    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.
+                        if (!(rawValue[path] instanceof BehaviorSubject)) {
+                            rawValue[path] = new BehaviorSubject(rawValue[path] ?? null);
+                            console.log(`[HYDRATE-v9] created BS for ${path}`);
+                        }
+                    }
+                }
+                if (propDef.async) {
+                    if (propDef.type == 'dropped-component') {
                         const currentValue = element.inputs[prop];
                         element.inputs[prop] = new BehaviorSubject({
                             component: currentValue?.component ?? currentValue ?? null,
@@ -9738,8 +10272,8 @@ Display formula context:
                             uniqueName: element.uniqueName
                         });
                     }
-                    else if (element.inputProps[prop].asyncPath) {
-                        const path = element.inputProps[prop].asyncPath;
+                    else if (propDef.asyncPath) {
+                        const path = propDef.asyncPath;
                         const rawValue = element.inputs[prop] ?? {};
                         element.inputs[prop] = new BehaviorSubject({
                             ...rawValue,
@@ -9765,8 +10299,45 @@ Display formula context:
                                     if (dsProp) {
                                         const dsBs = x.inputs[dsProp];
                                         const ds = (dsBs instanceof BehaviorSubject) ? dsBs.value : dsBs;
-                                        if (ds && ds.uniqueName == v.uniqueName && ds.component instanceof BehaviorSubject) {
-                                            ds.component.next(v.component);
+                                        if (ds && ds.uniqueName == v.uniqueName) {
+                                            const dsElement = flattened.find(fe => fe.uniqueName == v.uniqueName);
+                                            if (dsElement) {
+                                                if (ds.component instanceof BehaviorSubject) {
+                                                    console.log(`[SUBSCRIBE-CHAIN-v9] pushing liveComp into DR.datasource.component for ${ds.uniqueName}. applyingHistory=${this.applyingHistory}`);
+                                                    ds.component.next(v.component);
+                                                    if (dsElement.inputs['parentDatasource'] instanceof BehaviorSubject) {
+                                                        const dsParent = (dsElement.inputs['parentDatasource'] instanceof BehaviorSubject) ? dsElement.inputs['parentDatasource'].value : dsElement.inputs['parentDatasource'];
+                                                        if (dsParent?.uniqueName) {
+                                                            const parentElement = flattened.find(fe => fe.uniqueName == dsParent.uniqueName);
+                                                            if (parentElement) {
+                                                                dsParent.component.next(parentElement.inputs['componentRef'] instanceof BehaviorSubject ? parentElement.inputs['componentRef'].value : parentElement.inputs['componentRef']);
+                                                            }
+                                                        }
+                                                    }
+                                                }
+                                                if (!dsElements.find(de => de.uniqueName == v.uniqueName)) {
+                                                    dsSubs.push(v.component.fetchInfo$);
+                                                    dsElements.push(dsElement);
+                                                    if (dsElements.length == dsElementCount) {
+                                                        combineLatest(dsSubs).subscribe((infos) => {
+                                                            infos.forEach((info, i) => {
+                                                                if (info?.metaInfo && dsElements[i].inputs['metaInfo']) {
+                                                                    Object.assign(info.metaInfo, dsElements[i].inputs['metaInfo']);
+                                                                    dsElements[i].inputs['metaInfo'] = null;
+                                                                }
+                                                            });
+                                                            flattened.forEach((ld) => {
+                                                                if (ld.inputs['propertyTree']) {
+                                                                    ld.inputs['propertyTree'] = new BehaviorSubject([]);
+                                                                    this.propertyTreeBuilder(ld.inputs['action'].value, ld.inputs);
+                                                                }
+                                                            });
+                                                            // Re-capture snapshot after DS load (same as loadDashboard path)
+                                                            this.lastCommittedSnapshot = this.captureHistorySnapshot();
+                                                        });
+                                                    }
+                                                }
+                                            }
                                         }
                                     }
                                 });
@@ -9790,6 +10361,59 @@ Display formula context:
             ? (this.flattenedDashboardElements || []).find((x) => x?.uniqueName === selectedUniqueName) || null
             : null;
         this.cd.detectChanges();
+        // After undo/redo, re-bind DATAREPEATER→DATASOURCE and force re-fetch.
+        // This runs after Angular has created the live DataSourceComponent instances.
+        if (this.applyingHistory) {
+            setTimeout(() => {
+                const liveFlat = this.flattenedDashboardElements || [];
+                // Collect live DataSourceComponents by uniqueName
+                const liveDataSources = {};
+                liveFlat.forEach((el) => {
+                    if (el?.name === 'DATASOURCE') {
+                        const cr = el?.inputs?.['componentRef'];
+                        const crVal = (cr instanceof BehaviorSubject) ? cr.value : cr;
+                        const liveComp = crVal?.component instanceof BehaviorSubject
+                            ? crVal.component.value
+                            : crVal?.component;
+                        if (liveComp) {
+                            liveDataSources[el.uniqueName] = liveComp;
+                            if (liveComp.fetchData) {
+                                liveComp.fetchData();
+                            }
+                        }
+                    }
+                });
+                // Re-bind DATAREPEATERs: replicate the same binding that loadDashboard
+                // and setValue do — get the live DataSourceComponent from the DS element's
+                // componentRef and push it into the DATAREPEATER's datasource.component BS.
+                liveFlat.forEach((el) => {
+                    if (el?.name === 'DATAREPEATER' || el?.name === 'SELECT' || el?.name === 'MULTISELECT' || el?.name === 'UL') {
+                        const dsRef = el?.inputs?.['datasource'];
+                        const dsUniqueName = dsRef?.uniqueName;
+                        if (dsUniqueName) {
+                            const dsElement = liveFlat.find((e) => e.uniqueName === dsUniqueName);
+                            if (dsElement) {
+                                // Get the live DataSourceComponent from componentRef — same path as setValue line 4078
+                                const crBs = dsElement.inputs?.['componentRef'];
+                                const crVal = (crBs instanceof BehaviorSubject) ? crBs.value : crBs;
+                                const liveComponent = crVal?.component instanceof BehaviorSubject
+                                    ? crVal.component.value
+                                    : crVal?.component;
+                                if (liveComponent) {
+                                    if (!(dsRef.component instanceof BehaviorSubject)) {
+                                        dsRef.component = new BehaviorSubject(liveComponent);
+                                    }
+                                    else {
+                                        dsRef.component.next(liveComponent);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                });
+                this.cd.detectChanges();
+            }, 300);
+        }
     }
     /**
      * Rileva se il target evento e un controllo di input/editable per evitare shortcut globali indesiderate.
@@ -9999,6 +10623,11 @@ Display formula context:
                 }
             });
             this.cd.detectChanges();
+            // Same rationale as the constructor-scoped splitter resize callback:
+            // dragEnd is the gesture-end signal, so commit immediately. Required
+            // because deserialized elements (loaded from boardcontent) get this
+            // dynamic callback rather than the constructor template default.
+            this.commitHistoryIfChanged();
         };
     }
     /**
@@ -10169,7 +10798,7 @@ Display formula context:
         }
         const base = window.location.href.split('#')[0];
         const url = `${base}#/${encodeURIComponent(route)}/dashboard`;
-        window.open(url, '_blank', 'noopener');
+        window.open(url, '_blank');
     }
     /**
      * Idrata ricorsivamente `customProps` convertendo i valori in `BehaviorSubject`
@@ -10186,12 +10815,12 @@ Display formula context:
         });
         // return customProps;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DesignerComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: DataProviderService }, { token: MetadataProviderService }, { token: UserInfoService }, { token: i0.ChangeDetectorRef }, { token: TranslationManagerService }, { token: MetadataEditorService }, { token: WorkflowRuntimeMetadataService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DesignerComponent, isStandalone: true, selector: "wuic-designer", host: { listeners: { "window:hashchange": "onWindowHashChange()", "window:beforeunload": "onWindowBeforeUnload($event)", "window:keydown": "onWindowKeydown($event)", "window:mouseup": "onWindowMouseup()", "window:touchend": "onWindowTouchend()", "window:keyup": "onWindowKeyup()", "window:change": "onWindowChange()" } }, providers: [TreeDragDropService], ngImport: i0, template: "<!-- <button pButton type=\"button\" (click)=\"loadDashboard()\" class=\"mr-2\">{{'load' | translate}}</button> -->\n@if (!noEdit) {\n<div class=\"designer-layout\">\n  <div class=\"designer-toolbar\">\n    <div class=\"designer-current-dashboard\">{{ currentDashboardTitle }}</div>\n\n    <div class=\"designer-toolbar-spacer\"></div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"undo()\" [disabled]=\"!canUndo\">{{ 'designer.undo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"redo()\" [disabled]=\"!canRedo\">{{ 'designer.redo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"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\">{{ '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                      <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=\"col designer-toolbox\">\n                    @for (section of getToolPropertySections(tool); 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\n                            [ngModel]=\"getDesignerColorPickerHex(tool, toolProp)\"\n                            (ngModelChange)=\"onDesignerColorPickerHexChange($event, tool, toolProp)\" appendTo=\"body\" />\n                          <div class=\"designer-color-alpha-row\">\n                            <label class=\"designer-color-alpha-label\">{{ 'designer.alpha' | translate }}</label>\n                            <input\n                              type=\"range\"\n                              min=\"0\"\n                              max=\"1\"\n                              step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                            <input\n                              type=\"number\"\n                              min=\"0\"\n                              max=\"1\"\n                              step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                          </div>\n                          <input type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'dictionary' && !toolProp.value.async) {\n                          @if (toolProp.key == 'cssFile') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"availableProjectCssFiles\"\n                            [ngModel]=\"tool.inputs[toolProp.key]\" (ngModelChange)=\"onCssFileChanged($event, tool)\" />\n                          } @else if (toolProp.key == 'cssClass') {\n                          <p-multiSelect [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getCssClassOptionsForTool(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"onCssClassChanged($event, tool)\" [filter]=\"true\" [virtualScroll]=\"true\"\n                            [virtualScrollItemSize]=\"38\" scrollHeight=\"260px\" [showToggleAll]=\"false\" display=\"chip\"\n                            [maxSelectedLabels]=\"3\" [selectedItemsLabel]=\"'{0} selected'\">\n                          </p-multiSelect>\n                          } @else if ((tool.name == 'SELECT' || tool.name == 'MULTISELECT' || tool.name == 'UL') &&\n                          (toolProp.key == 'valueField' || toolProp.key == 'textField')) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else if (tool.name == 'LABEL' && toolProp.key == 'displayField') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          }\n                          @if (toolProp.value.type == 'dictionary' && toolProp.value.async) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (tool.name == 'DATAREPEATER' && toolProp.key == 'action' &&\n                          canOpenArchetypeConfigurator(tool)) {\n                          <button style=\"margin-top: 8px;\" (click)=\"openArchetypeConfigurator(tool)\">\n                            {{ 'designer.configure' | translate }} {{ (tool.inputs['action'] | async) || '' }}\n                          </button>\n                          }\n                          @if (toolProp.value.type == 'dropped-component-list') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [placeholder]=\"'select.component' | translate\" [options]=\"elementFilter(toolProp)\"\n                            [ngModel]=\"getDroppedComponentListModel(tool, toolProp)\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" optionLabel=\"uniqueName\"\n                            dataKey=\"uniqueName\" />\n                          }\n                          @if (toolProp.value.type == 'autocomplete') {\n                          <p-autoComplete [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\" [forceSelection]=\"true\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" [suggestions]=\"tool.suggestions\"\n                            [optionLabel]=\"toolProp.value.displayField\" [optionValue]=\"toolProp.value.valueField\"\n                            (completeMethod)=\"search($event, tool, toolProp)\" [dropdown]=\"true\" dropdownMode=\"current\"\n                            [multiple]=\"toolProp.value.multiple\" />\n                          }\n                          @if (toolProp.value.type == 'propertyTree' && shouldShowPropertyTree(tool)) {\n                          <ul>\n                            @for (item of $any(tool.inputs[toolProp.key] | async); track item) {\n                            <li style=\"padding: 0; margin: 0;\">\n                              @if (item.col && tool.inputs['customProps_' + (tool.inputs['action'] | async)])\n                              {\n                              <wuic-field-editor [field]=\"item.col\"\n                                [record]=\"tool.inputs['customProps_' + (tool.inputs['action'] | async)]\"\n                                [metaInfo]=\"tool.inputs['datasource']?.component?.value?.metaInfo\"\n                                [triggerProp]=\"tool.inputs['action']\"></wuic-field-editor>\n                              }\n                            </li>\n                            }\n                          </ul>\n                          }\n                        </li>\n                        }\n                      </ul>\n                    </details>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n              <ng-template pTemplate>\n                <div class=\"hierarchy-panel\">\n                  <div class=\"hierarchy-panel-title\">{{ 'designer.canvas_hierarchy' | translate }}</div>\n                  <div class=\"hierarchy-tree-wrap\">\n                    <p-tree [value]=\"hierarchyTreeNodes\" [draggableNodes]=\"true\" [droppableNodes]=\"true\"\n                      selectionMode=\"single\" [(selection)]=\"hierarchySelection\"\n                      (onNodeSelect)=\"onHierarchyNodeSelect($event)\" draggableScope=\"designer-hierarchy\"\n                      droppableScope=\"designer-hierarchy\" (onNodeDrop)=\"onHierarchyNodeDrop($event)\">\n                      <ng-template let-node pTemplate=\"default\">\n                        <span class=\"hierarchy-node-label\" [class.active]=\"isHierarchyNodeSelected(node)\"\n                          (mouseenter)=\"onHierarchyNodeMouseEnter(node)\" (mouseleave)=\"onHierarchyNodeMouseLeave()\"\n                          (contextmenu)=\"showHierarchyNodeContextMenu($event, node, hierarchyCtxMenu)\">\n                          {{ node.label }}\n                        </span>\n                      </ng-template>\n                    </p-tree>\n                  </div>\n                  <p-contextMenu #hierarchyCtxMenu [model]=\"hierarchyCtxItems\" appendTo=\"body\" />\n                </div>\n              </ng-template>\n            </p-splitter>\n          </ng-template>\n        </p-splitter>\n      </ng-template>\n      <ng-template pTemplate>\n        <div class=\"col dashboard-design\" [class.designer-hide-datasources]=\"hideDatasourcesInCanvas\" pDroppable (onDrop)=\"drop($event)\" #canvas\n          (contextmenu)=\"showCtx($event, this)\">\n          <wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n          <p-contextMenu [target]=\"canvas\" [model]=\"ctxItems | async\" appendTo=\"body\" />\n        </div>\n      </ng-template>\n    </p-splitter>\n  </div>\n  <div class=\"designer-footer\">\n    <div class=\"designer-footer-label\">{{ 'designer.items' | translate }}:</div>\n    <div class=\"designer-footer-list\">\n      @for (item of droppedDashboardItems; track item.uniqueName) {\n      <button type=\"button\" class=\"designer-footer-item\" [class.active]=\"tool?.uniqueName === item?.uniqueName\"\n        [attr.data-designer-unique-name]=\"item?.uniqueName\" (mouseenter)=\"setFooterHoverHighlight(item)\"\n        (mouseleave)=\"clearFooterHoverHighlight()\" (click)=\"selectDashboardItem(item)\"\n        (contextmenu)=\"showFooterContextMenu($event, item, footerCtxMenu)\">\n        {{ getDroppedDashboardItemLabel(item) }}\n      </button>\n      }\n    </div>\n    <p-contextMenu #footerCtxMenu [model]=\"footerCtxItems\" appendTo=\"body\" />\n  </div>\n</div>\n}\n\n@if (noEdit) {\n<wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n}\n\n<wuic-archetype-configurator [visible]=\"showArchetypeConfigurator\"\n  (visibleChange)=\"onArchetypeConfigVisibleChange($event)\" [archetype]=\"getActiveArchetypeConfig()\"\n  [metaInfo]=\"getArchetypeConfigMetaInfoForTool(archetypeConfigTool)\"\n  [value]=\"getArchetypeConfigValueForTool(archetypeConfigTool)\" (applyConfig)=\"onArchetypeConfigApply($event)\">\n</wuic-archetype-configurator>\n\n<wuic-css-sheet-editor [visible]=\"showCssSheetEditor\" (visibleChange)=\"onCssSheetEditorVisibleChange($event)\"\n  [sheets]=\"dashboardCssSheets\" [selectedSheetPath]=\"selectedCssEditorSheetPath\" [assetsFolder]=\"currentDashboardRoute\"\n  [styleProps]=\"getCssEditorStyleProps()\" (applyEditor)=\"onCssSheetEditorApply($event)\">\n</wuic-css-sheet-editor>\n\n<p-dialog [header]=\"'Riapri dashboard'\" [(visible)]=\"reopenDashboardDialogVisible\" [modal]=\"true\" [closable]=\"true\"\n  [draggable]=\"false\" [resizable]=\"false\" [appendTo]=\"'body'\" [style]=\"{ width: '34rem' }\"\n  (onHide)=\"cancelReopenDashboardDialog()\">\n  <div class=\"route-popup-form\">\n    <label for=\"designer-reopen-select\">Dashboard esistenti</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\">Riapri</button>\n    </div>\n  </div>\n</p-dialog>\n", 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}.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}:host ::ng-deep .designer-left-bottom-splitter .p-splitterpanel>.p-splitterpanel-content{height:100%;min-height:0;overflow:hidden}.hierarchy-panel{height:100%;width:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:6px}.hierarchy-panel-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#4b5563;margin:0 0 6px}.hierarchy-tree-wrap{flex:1 1 auto;min-height:0;border:1px solid inherit;border-radius:6px;background:transparent;overflow:auto;padding:4px}:host ::ng-deep .hierarchy-tree-wrap .p-tree{border:none;padding:0;height:100%;background:transparent}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content{border:1px solid transparent;border-radius:4px;background:transparent!important;color:inherit!important;padding:0!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight{border-color:transparent!important;background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content:hover{background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label{display:inline-block;border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label:hover{border-color:#94a3b8}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label.active{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight .hierarchy-node-label{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}.designer-hierarchy-node{cursor:pointer;border:1px solid transparent;border-radius:4px;padding:2px 6px;font-size:.82rem;line-height:1.25rem}.designer-hierarchy-node-label{cursor:pointer;display:inline-block;width:100%}.designer-hierarchy-node.active{border-color:#3b82f6;background:#eff6ff;color:#1d4ed8}.designer-footer-item.designer-tree-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px}.dashboard-design{height:100%;min-height:0;min-width:0;width:100%;overflow:auto;direction:ltr}:host ::ng-deep .dashboard-design.designer-hide-datasources .datasource-descriptor{display:none!important}.current-dashboard-title{font-weight:600;margin-right:12px}.designer-footer{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid inherit;background:transparent;min-height:36px;flex:0 0 auto;width:100%;overflow:auto}.designer-footer-label{font-size:.85rem;font-weight:600;color:inherit;white-space:nowrap}.designer-footer-list{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%}.designer-footer-item{border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer;white-space:nowrap}.designer-footer-item.active{border-color:#3b82f6;background:transparent;color:#1d4ed8}:host ::ng-deep .designer-footer-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px;box-shadow:inset 0 0 0 1px #3b82f6!important}.route-popup-form{display:flex;flex-direction:column;gap:8px}.route-popup-form label{font-size:.85rem;font-weight:600;color:#2f3f58}.route-popup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.route-popup-btn{border:1px solid inherit;background:transparent;color:inherit;border-radius:6px;padding:7px 12px;font-size:.85rem;cursor:pointer}.route-popup-btn-primary{border-color:#2f67d8;background:#2f67d8;color:#fff}.p-colorpicker{border:1px solid black;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i10.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i11.Draggable, selector: "[pDraggable]", inputs: ["pDraggable", "dragEffect", "dragHandle", "pDraggableDisabled"], outputs: ["onDragStart", "onDragEnd", "onDrag"] }, { kind: "directive", type: i11.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: i2$2.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$3.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: i9.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: i17.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: CssSheetEditorComponent, selector: "wuic-css-sheet-editor", inputs: ["visible", "sheets", "selectedSheetPath", "styleProps", "assetsFolder"], outputs: ["visibleChange", "applyEditor"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i9$1.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: i3.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DesignerComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: DataProviderService }, { token: MetadataProviderService }, { token: UserInfoService }, { token: i0.ChangeDetectorRef }, { token: TranslationManagerService }, { token: MetadataEditorService }, { token: WorkflowRuntimeMetadataService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DesignerComponent, isStandalone: true, selector: "wuic-designer", host: { listeners: { "window:hashchange": "onWindowHashChange()", "window:beforeunload": "onWindowBeforeUnload($event)", "window:keydown": "onWindowKeydown($event)", "window:mouseup": "onWindowMouseup()", "window:touchend": "onWindowTouchend()", "window:keyup": "onWindowKeyup()", "window:change": "onWindowChange()" } }, providers: [TreeDragDropService], ngImport: i0, template: "<!-- <button pButton type=\"button\" (click)=\"loadDashboard()\" class=\"mr-2\">{{'load' | translate}}</button> -->\n@if (!noEdit) {\n<div class=\"designer-layout\">\n  <div class=\"designer-toolbar\">\n    <div class=\"designer-current-dashboard\">{{ currentDashboardTitle }}</div>\n\n    <div class=\"designer-toolbar-spacer\"></div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"undo()\" [disabled]=\"!canUndo\">{{ 'designer.undo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"redo()\" [disabled]=\"!canRedo\">{{ 'designer.redo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"refreshGraphActionsMenuItems(); graphActionsMenu.toggle($event)\">{{ 'designer.actions_menu' | translate }}</button>\n      <p-menu #graphActionsMenu [popup]=\"true\" [model]=\"graphActionsMenuItems\" appendTo=\"body\"></p-menu>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"openCurrentDashboardInNewTab()\" [disabled]=\"!currentDashboardRoute\">{{\n        'designer.open_current_dashboard' | translate }}</button>\n    </div>\n  </div>\n  <div class=\"designer-main\">\n    <p-splitter [style]=\"{ height: '100%' }\" [panelSizes]=\"[15, 85]\" styleClass=\"designer-main-splitter\">\n      <ng-template pTemplate>\n        <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[35, 65]\"\n          [minSizes]=\"[20, 30]\" styleClass=\"designer-left-splitter\">\n          <ng-template pTemplate>\n            <div class=\"col flex designer-toolbox palette-panel\">\n              <ul class=\"tool-groups\">\n                @for (toolGroup of availableToolGroups; track toolGroup.group) {\n                <li class=\"tool-group-item\">\n                  <div class=\"tool-group-title\">{{ toolGroup.group }}</div>\n                  <ul class=\"tool-group-list\">\n                    @for (tool of toolGroup.tools; track tool) {\n                    <li pDraggable (onDragStart)=\"dragStart(tool)\" (onDragEnd)=\"dragEnd()\" (onDrag)=\"onDrag($event)\"\n                      (dblclick)=\"dropToolAtRoot(tool)\">\n                      <i [ngClass]=\"tool.icon\" [title]=\"tool.name\"></i>\n                    </li>\n                    }\n                  </ul>\n                </li>\n                }\n              </ul>\n            </div>\n          </ng-template>\n          <ng-template pTemplate>\n            <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[68, 32]\"\n              [minSizes]=\"[35, 20]\" styleClass=\"designer-left-bottom-splitter\">\n              <ng-template pTemplate>\n                <div class=\"properties-panel\">\n                  <p-select [style]=\"{width: '100%'}\" [options]=\"flattenedDashboardElements\" [(ngModel)]=\"tool\"\n                    optionLabel=\"uniqueName\" dataKey=\"componentId\" appendTo=\"body\" />\n                  <div class=\"designer-toolbox\">\n\n                    <span style=\"width: 100%;\">\n                      <input type=\"text\" style=\"width: calc(100% - 30px);\" [(ngModel)]=\"propFilter\"\n                        [placeholder]=\"'prop.filter' | translate\" />\n                      <button style=\"width: 25px\" (click)=\"clearPropFilter()\">X</button>\n                    </span>\n\n                    @for (section of getToolPropertySections(tool, propFilter); track section.key) {\n                    <details class=\"prop-section\" [open]=\"section.open\"\n                      (toggle)=\"onPropertySectionToggle(tool, section.key, $event)\">\n                      <summary class=\"prop-section-title\">{{ section.label }}</summary>\n                      <ul class=\"props\">\n                        @for (toolProp of section.props; track toolProp.key) {\n                        <li>\n                          @if (!toolProp.value.hideCaption) {\n                          <span>{{ toolProp.value?.propertyCaption ||\n                            toolProp.key[0].toUpperCase() + toolProp.key.slice(1)\n                            }}</span>\n                          }\n                          <br />\n                          @if (toolProp.value.type == 'button') {\n                          <p-button (click)=\"toolProp.value.callback(tool.inputs, toolProp.key, null, tool)\"\n                            class=\"k-button\" [style]=\"{width: '100%'}\">\n                            {{toolProp.value.propertyCaption}}\n                          </p-button>\n                          }\n                          @if (toolProp.value.type == 'metaEditor' &&\n                          tool.inputs['componentRef']?.value?.component) {\n                          <wuic-metadata-editor [hardcodedDatasource]=\"tool.inputs['componentRef']?.value?.component\"\n                            [saveCallback]=\"metaEditorSave\"></wuic-metadata-editor>\n                          }\n                          @if (toolProp.value.type == 'boolean') {\n                          <input type=\"checkbox\" [(ngModel)]=\"tool.inputs[toolProp.key]\" />\n                          }\n                          @if (toolProp.value.type == 'numberToArray') {\n                          <input style=\"width: 100%;\" type=\"number\" pInputText [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'txt_area') {\n                          <textarea style=\"width: 100%;\" [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\"></textarea>\n                          }\n                          @if (toolProp.value.type == 'string') {\n                          <input style=\"width: 100%;\" type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'color') {\n                          <p-colorPicker [ngModel]=\"getDesignerColorPickerHex(tool, toolProp)\"\n                            (ngModelChange)=\"onDesignerColorPickerHexChange($event, tool, toolProp)\" appendTo=\"body\" />\n                          <div class=\"designer-color-alpha-row\">\n                            <label class=\"designer-color-alpha-label\">{{ 'designer.alpha' | translate }}</label>\n                            <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                            <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                          </div>\n                          <input type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'dictionary' && !toolProp.value.async) {\n                          @if (toolProp.key == 'cssFile') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"availableProjectCssFiles\"\n                            [ngModel]=\"tool.inputs[toolProp.key]\" (ngModelChange)=\"onCssFileChanged($event, tool)\" />\n                          } @else if (toolProp.key == 'cssClass') {\n                          <p-multiSelect [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getCssClassOptionsForTool(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"onCssClassChanged($event, tool)\" [filter]=\"true\" [virtualScroll]=\"true\"\n                            [virtualScrollItemSize]=\"38\" scrollHeight=\"260px\" [showToggleAll]=\"false\" display=\"chip\"\n                            [maxSelectedLabels]=\"3\" [selectedItemsLabel]=\"'{0} selected'\">\n                          </p-multiSelect>\n                          } @else if ((tool.name == 'SELECT' || tool.name == 'MULTISELECT' || tool.name == 'UL') &&\n                          (toolProp.key == 'valueField' || toolProp.key == 'textField')) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else if (tool.name == 'LABEL' && toolProp.key == 'displayField') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          }\n                          @if (toolProp.value.type == 'dictionary' && toolProp.value.async) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (tool.name == 'DATAREPEATER' && toolProp.key == 'action' &&\n                          canOpenArchetypeConfigurator(tool)) {\n                          <button style=\"margin-top: 8px;\" (click)=\"openArchetypeConfigurator(tool)\">\n                            {{ 'designer.configure' | translate }} {{ (tool.inputs['action'] | async) || '' }}\n                          </button>\n                          }\n                          @if (toolProp.value.type == 'dropped-component-list') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [placeholder]=\"'select.component' | translate\" [options]=\"elementFilter(toolProp)\"\n                            [ngModel]=\"getDroppedComponentListModel(tool, toolProp)\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" optionLabel=\"uniqueName\"\n                            dataKey=\"uniqueName\" />\n                          }\n                          @if (toolProp.value.type == 'autocomplete') {\n                          <p-autoComplete [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\" [forceSelection]=\"true\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" [suggestions]=\"tool.suggestions\"\n                            [optionLabel]=\"toolProp.value.displayField\" [optionValue]=\"toolProp.value.valueField\"\n                            (completeMethod)=\"search($event, tool, toolProp)\" [dropdown]=\"true\" dropdownMode=\"current\"\n                            [multiple]=\"toolProp.value.multiple\" />\n                          }\n                          @if (toolProp.value.type == 'propertyTree' && shouldShowPropertyTree(tool)) {\n                          <ul>\n                            @for (item of $any(tool.inputs[toolProp.key] | async); track item) {\n                            <li style=\"padding: 0; margin: 0;\">\n                              @if (item.col && tool.inputs['customProps_' + (tool.inputs['action'] | async)])\n                              {\n                              <wuic-field-editor [field]=\"item.col\"\n                                [record]=\"tool.inputs['customProps_' + (tool.inputs['action'] | async)]\"\n                                [metaInfo]=\"tool.inputs['datasource']?.component?.value?.metaInfo\"\n                                [triggerProp]=\"tool.inputs['action']\"></wuic-field-editor>\n                              }\n                            </li>\n                            }\n                          </ul>\n                          }\n                        </li>\n                        }\n                      </ul>\n                    </details>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n              <ng-template pTemplate>\n                <div class=\"hierarchy-panel\">\n                  <div class=\"hierarchy-panel-title\">{{ 'designer.canvas_hierarchy' | translate }}</div>\n                  <div class=\"hierarchy-tree-wrap\">\n                    <p-tree [value]=\"hierarchyTreeNodes\" [draggableNodes]=\"true\" [droppableNodes]=\"true\"\n                      selectionMode=\"single\" [(selection)]=\"hierarchySelection\"\n                      (onNodeSelect)=\"onHierarchyNodeSelect($event)\" draggableScope=\"designer-hierarchy\"\n                      droppableScope=\"designer-hierarchy\" (onNodeDrop)=\"onHierarchyNodeDrop($event)\">\n                      <ng-template let-node pTemplate=\"default\">\n                        <span class=\"hierarchy-node-label\" [class.active]=\"isHierarchyNodeSelected(node)\"\n                          (mouseenter)=\"onHierarchyNodeMouseEnter(node)\" (mouseleave)=\"onHierarchyNodeMouseLeave()\"\n                          (contextmenu)=\"showHierarchyNodeContextMenu($event, node, hierarchyCtxMenu)\">\n                          {{ node.label }}\n                        </span>\n                      </ng-template>\n                    </p-tree>\n                  </div>\n                  <p-contextMenu #hierarchyCtxMenu [model]=\"hierarchyCtxItems\" appendTo=\"body\" />\n                </div>\n              </ng-template>\n            </p-splitter>\n          </ng-template>\n        </p-splitter>\n      </ng-template>\n      <ng-template pTemplate>\n        <div class=\"col dashboard-design\" [class.designer-hide-datasources]=\"hideDatasourcesInCanvas\" pDroppable\n          (onDrop)=\"drop($event)\" #canvas (contextmenu)=\"showCtx($event, this)\">\n          <wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n          <p-contextMenu [target]=\"canvas\" [model]=\"ctxItems | async\" appendTo=\"body\" />\n        </div>\n      </ng-template>\n    </p-splitter>\n  </div>\n  <div class=\"designer-footer\">\n    <div class=\"designer-footer-label\">{{ 'designer.items' | translate }}:</div>\n    <div class=\"designer-footer-list\">\n      @for (item of droppedDashboardItems; track item.uniqueName) {\n      <button type=\"button\" class=\"designer-footer-item\" [class.active]=\"tool?.uniqueName === item?.uniqueName\"\n        [attr.data-designer-unique-name]=\"item?.uniqueName\" (mouseenter)=\"setFooterHoverHighlight(item)\"\n        (mouseleave)=\"clearFooterHoverHighlight()\" (click)=\"selectDashboardItem(item)\"\n        (contextmenu)=\"showFooterContextMenu($event, item, footerCtxMenu)\">\n        {{ getDroppedDashboardItemLabel(item) }}\n      </button>\n      }\n    </div>\n    <p-contextMenu #footerCtxMenu [model]=\"footerCtxItems\" appendTo=\"body\" />\n  </div>\n</div>\n}\n\n@if (noEdit) {\n<wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n}\n\n<wuic-archetype-configurator [visible]=\"showArchetypeConfigurator\"\n  (visibleChange)=\"onArchetypeConfigVisibleChange($event)\" [archetype]=\"getActiveArchetypeConfig()\"\n  [metaInfo]=\"getArchetypeConfigMetaInfoForTool(archetypeConfigTool)\"\n  [value]=\"getArchetypeConfigValueForTool(archetypeConfigTool)\" (applyConfig)=\"onArchetypeConfigApply($event)\">\n</wuic-archetype-configurator>\n\n<wuic-css-sheet-editor [visible]=\"showCssSheetEditor\" (visibleChange)=\"onCssSheetEditorVisibleChange($event)\"\n  [sheets]=\"dashboardCssSheets\" [selectedSheetPath]=\"selectedCssEditorSheetPath\" [assetsFolder]=\"currentDashboardRoute\"\n  [styleProps]=\"getCssEditorStyleProps()\" (applyEditor)=\"onCssSheetEditorApply($event)\">\n</wuic-css-sheet-editor>\n\n<p-dialog [header]=\"'designer.reopen_dashboard' | translate\" [(visible)]=\"reopenDashboardDialogVisible\" [modal]=\"true\"\n  [closable]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [appendTo]=\"'body'\" [style]=\"{ width: '34rem' }\"\n  (onHide)=\"cancelReopenDashboardDialog()\">\n  <div class=\"route-popup-form\">\n    <label for=\"designer-reopen-select\">{{ 'designer.existing_dashboards' | translate }}</label>\n    <p-select inputId=\"designer-reopen-select\" [options]=\"savedDashboardOptions\" optionLabel=\"label\" optionValue=\"value\"\n      [(ngModel)]=\"reopenDialogSelectedDashboardRoute\" [filter]=\"true\" [showClear]=\"true\" [style]=\"{ width: '100%' }\"\n      appendTo=\"body\" />\n\n    <div class=\"route-popup-actions\">\n      <button type=\"button\" class=\"route-popup-btn\" (click)=\"cancelReopenDashboardDialog()\">{{ 'cancel' | translate\n        }}</button>\n      <button type=\"button\" class=\"route-popup-btn route-popup-btn-primary\" (click)=\"confirmReopenDashboardDialog()\"\n        [disabled]=\"!reopenDialogSelectedDashboardRoute\">{{ 'designer.reopen' | translate }}</button>\n    </div>\n  </div>\n</p-dialog>", styles: [":host{display:block;width:100%;height:100%;min-width:0}.designer-layout{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;width:100%;min-width:0}.designer-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px solid inherit;border-radius:10px;background:transparent;padding:10px 12px;margin-bottom:8px}.designer-current-dashboard{min-width:220px;font-size:.86rem;font-weight:700;color:inherit}.designer-toolbar-spacer{flex:1 1 auto;min-width:16px}.designer-toolbar-menu-group{display:inline-flex}.designer-toolbar-menu-group button{height:32px;border:1px solid #2f67d8;border-radius:6px;background:#2f67d8;color:#fff;padding:0 10px;font-size:.82rem;cursor:pointer}.designer-toolbar-menu-group button[disabled]{opacity:.6;cursor:not-allowed}.designer-main{min-height:0;min-width:0;width:100%;overflow:hidden;direction:ltr}.designer-main-splitter{height:100%;width:100%;min-width:0;direction:ltr}.designer-toolbox{font-size:3rem}.designer-toolbox ul{list-style-type:none;padding:0;margin:0;width:100%}.designer-toolbox li{float:left;margin-left:5px;margin-top:5px}.designer-toolbox .tool-groups{display:block}.designer-toolbox .tool-group-item{float:none;margin-left:0;margin-top:10px;clear:both}.designer-toolbox .tool-group-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin:0 0 4px 6px}.designer-toolbox .tool-group-list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px}.designer-toolbox .tool-group-list li{float:none;margin-left:0;margin-top:0}.designer-toolbox .props{font-size:1rem}.designer-toolbox .props li{float:none;padding-bottom:15px}.designer-toolbox .prop-section{width:100%;border:1px solid inherit;border-radius:6px;margin-top:8px;background:transparent;padding:6px 8px 2px}.designer-toolbox .prop-section-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;color:inherit;margin-bottom:6px}.palette-panel{height:100%;overflow:auto;width:100%}.designer-color-alpha-row{display:flex;align-items:center;gap:8px;margin-top:6px;margin-bottom:6px}.designer-color-alpha-label{font-size:.8rem;min-width:40px}.designer-color-alpha-row input[type=range]{flex:1 1 auto;min-width:90px}.designer-color-alpha-row input[type=number]{width:72px}.properties-panel{height:100%;overflow:hidden;width:100%;display:flex;flex-direction:column;min-height:0;padding-right:10px;padding-left:10px;padding-top:10px}.properties-panel>.designer-toolbox{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}:host ::ng-deep .designer-left-bottom-splitter .p-splitterpanel{min-height:0!important;overflow:hidden!important}.hierarchy-panel{height:100%;width:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:6px}.hierarchy-panel-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#4b5563;margin:0 0 6px}.hierarchy-tree-wrap{flex:1 1 auto;min-height:0;border:1px solid inherit;border-radius:6px;background:transparent;overflow:auto;padding:4px}:host ::ng-deep .hierarchy-tree-wrap .p-tree{border:none;padding:0;height:100%;background:transparent}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content{border:1px solid transparent;border-radius:4px;background:transparent!important;color:inherit!important;padding:0!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight{border-color:transparent!important;background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content:hover{background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label{display:inline-block;border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label:hover{border-color:#94a3b8}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label.active{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight .hierarchy-node-label{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}.designer-hierarchy-node{cursor:pointer;border:1px solid transparent;border-radius:4px;padding:2px 6px;font-size:.82rem;line-height:1.25rem}.designer-hierarchy-node-label{cursor:pointer;display:inline-block;width:100%}.designer-hierarchy-node.active{border-color:#3b82f6;background:#eff6ff;color:#1d4ed8}.designer-footer-item.designer-tree-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px}.dashboard-design{height:100%;min-height:0;min-width:0;width:100%;overflow:auto;direction:ltr}:host ::ng-deep .dashboard-design.designer-hide-datasources .datasource-descriptor{display:none!important}.current-dashboard-title{font-weight:600;margin-right:12px}.designer-footer{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid inherit;background:transparent;min-height:36px;flex:0 0 auto;width:100%;overflow:auto}.designer-footer-label{font-size:.85rem;font-weight:600;color:inherit;white-space:nowrap}.designer-footer-list{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%}.designer-footer-item{border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer;white-space:nowrap}.designer-footer-item.active{border-color:#3b82f6;background:transparent;color:#1d4ed8}:host ::ng-deep .designer-footer-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px;box-shadow:inset 0 0 0 1px #3b82f6!important}.route-popup-form{display:flex;flex-direction:column;gap:8px}.route-popup-form label{font-size:.85rem;font-weight:600;color:#2f3f58}.route-popup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.route-popup-btn{border:1px solid inherit;background:transparent;color:inherit;border-radius:6px;padding:7px 12px;font-size:.85rem;cursor:pointer}.route-popup-btn-primary{border-color:#2f67d8;background:#2f67d8;color:#fff}.p-colorpicker{border:1px solid black;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i11.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i11$1.Draggable, selector: "[pDraggable]", inputs: ["pDraggable", "dragEffect", "dragHandle", "pDraggableDisabled"], outputs: ["onDragStart", "onDragEnd", "onDrag"] }, { kind: "directive", type: i11$1.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: i13.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: i17.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: CssSheetEditorComponent, selector: "wuic-css-sheet-editor", inputs: ["visible", "sheets", "selectedSheetPath", "styleProps", "assetsFolder"], outputs: ["visibleChange", "applyEditor"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i9.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i12.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.5", ngImport: i0, type: DesignerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DesignerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wuic-designer', imports: [NgClass, TranslateModule, NgTemplateOutlet, NgComponentOutlet, AsyncPipe, FormsModule, SplitterModule, DragDropModule, SelectModule, ColorPickerModule, AutoCompleteModule, DashboardComponent, CallbackPipe, FieldEditorComponent, JsonPipe, ContextMenuModule, MetadataEditorComponent, MenubarModule, ArchetypeConfiguratorComponent, ButtonModule, MultiSelectModule, CssSheetEditorComponent, MenuModule, DialogModule, TreeModule], providers: [TreeDragDropService], template: "<!-- <button pButton type=\"button\" (click)=\"loadDashboard()\" class=\"mr-2\">{{'load' | translate}}</button> -->\n@if (!noEdit) {\n<div class=\"designer-layout\">\n  <div class=\"designer-toolbar\">\n    <div class=\"designer-current-dashboard\">{{ currentDashboardTitle }}</div>\n\n    <div class=\"designer-toolbar-spacer\"></div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"undo()\" [disabled]=\"!canUndo\">{{ 'designer.undo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"redo()\" [disabled]=\"!canRedo\">{{ 'designer.redo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"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\">{{ '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                      <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=\"col designer-toolbox\">\n                    @for (section of getToolPropertySections(tool); 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\n                            [ngModel]=\"getDesignerColorPickerHex(tool, toolProp)\"\n                            (ngModelChange)=\"onDesignerColorPickerHexChange($event, tool, toolProp)\" appendTo=\"body\" />\n                          <div class=\"designer-color-alpha-row\">\n                            <label class=\"designer-color-alpha-label\">{{ 'designer.alpha' | translate }}</label>\n                            <input\n                              type=\"range\"\n                              min=\"0\"\n                              max=\"1\"\n                              step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                            <input\n                              type=\"number\"\n                              min=\"0\"\n                              max=\"1\"\n                              step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                          </div>\n                          <input type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'dictionary' && !toolProp.value.async) {\n                          @if (toolProp.key == 'cssFile') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"availableProjectCssFiles\"\n                            [ngModel]=\"tool.inputs[toolProp.key]\" (ngModelChange)=\"onCssFileChanged($event, tool)\" />\n                          } @else if (toolProp.key == 'cssClass') {\n                          <p-multiSelect [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getCssClassOptionsForTool(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"onCssClassChanged($event, tool)\" [filter]=\"true\" [virtualScroll]=\"true\"\n                            [virtualScrollItemSize]=\"38\" scrollHeight=\"260px\" [showToggleAll]=\"false\" display=\"chip\"\n                            [maxSelectedLabels]=\"3\" [selectedItemsLabel]=\"'{0} selected'\">\n                          </p-multiSelect>\n                          } @else if ((tool.name == 'SELECT' || tool.name == 'MULTISELECT' || tool.name == 'UL') &&\n                          (toolProp.key == 'valueField' || toolProp.key == 'textField')) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else if (tool.name == 'LABEL' && toolProp.key == 'displayField') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          }\n                          @if (toolProp.value.type == 'dictionary' && toolProp.value.async) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (tool.name == 'DATAREPEATER' && toolProp.key == 'action' &&\n                          canOpenArchetypeConfigurator(tool)) {\n                          <button style=\"margin-top: 8px;\" (click)=\"openArchetypeConfigurator(tool)\">\n                            {{ 'designer.configure' | translate }} {{ (tool.inputs['action'] | async) || '' }}\n                          </button>\n                          }\n                          @if (toolProp.value.type == 'dropped-component-list') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [placeholder]=\"'select.component' | translate\" [options]=\"elementFilter(toolProp)\"\n                            [ngModel]=\"getDroppedComponentListModel(tool, toolProp)\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" optionLabel=\"uniqueName\"\n                            dataKey=\"uniqueName\" />\n                          }\n                          @if (toolProp.value.type == 'autocomplete') {\n                          <p-autoComplete [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\" [forceSelection]=\"true\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" [suggestions]=\"tool.suggestions\"\n                            [optionLabel]=\"toolProp.value.displayField\" [optionValue]=\"toolProp.value.valueField\"\n                            (completeMethod)=\"search($event, tool, toolProp)\" [dropdown]=\"true\" dropdownMode=\"current\"\n                            [multiple]=\"toolProp.value.multiple\" />\n                          }\n                          @if (toolProp.value.type == 'propertyTree' && shouldShowPropertyTree(tool)) {\n                          <ul>\n                            @for (item of $any(tool.inputs[toolProp.key] | async); track item) {\n                            <li style=\"padding: 0; margin: 0;\">\n                              @if (item.col && tool.inputs['customProps_' + (tool.inputs['action'] | async)])\n                              {\n                              <wuic-field-editor [field]=\"item.col\"\n                                [record]=\"tool.inputs['customProps_' + (tool.inputs['action'] | async)]\"\n                                [metaInfo]=\"tool.inputs['datasource']?.component?.value?.metaInfo\"\n                                [triggerProp]=\"tool.inputs['action']\"></wuic-field-editor>\n                              }\n                            </li>\n                            }\n                          </ul>\n                          }\n                        </li>\n                        }\n                      </ul>\n                    </details>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n              <ng-template pTemplate>\n                <div class=\"hierarchy-panel\">\n                  <div class=\"hierarchy-panel-title\">{{ 'designer.canvas_hierarchy' | translate }}</div>\n                  <div class=\"hierarchy-tree-wrap\">\n                    <p-tree [value]=\"hierarchyTreeNodes\" [draggableNodes]=\"true\" [droppableNodes]=\"true\"\n                      selectionMode=\"single\" [(selection)]=\"hierarchySelection\"\n                      (onNodeSelect)=\"onHierarchyNodeSelect($event)\" draggableScope=\"designer-hierarchy\"\n                      droppableScope=\"designer-hierarchy\" (onNodeDrop)=\"onHierarchyNodeDrop($event)\">\n                      <ng-template let-node pTemplate=\"default\">\n                        <span class=\"hierarchy-node-label\" [class.active]=\"isHierarchyNodeSelected(node)\"\n                          (mouseenter)=\"onHierarchyNodeMouseEnter(node)\" (mouseleave)=\"onHierarchyNodeMouseLeave()\"\n                          (contextmenu)=\"showHierarchyNodeContextMenu($event, node, hierarchyCtxMenu)\">\n                          {{ node.label }}\n                        </span>\n                      </ng-template>\n                    </p-tree>\n                  </div>\n                  <p-contextMenu #hierarchyCtxMenu [model]=\"hierarchyCtxItems\" appendTo=\"body\" />\n                </div>\n              </ng-template>\n            </p-splitter>\n          </ng-template>\n        </p-splitter>\n      </ng-template>\n      <ng-template pTemplate>\n        <div class=\"col dashboard-design\" [class.designer-hide-datasources]=\"hideDatasourcesInCanvas\" pDroppable (onDrop)=\"drop($event)\" #canvas\n          (contextmenu)=\"showCtx($event, this)\">\n          <wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n          <p-contextMenu [target]=\"canvas\" [model]=\"ctxItems | async\" appendTo=\"body\" />\n        </div>\n      </ng-template>\n    </p-splitter>\n  </div>\n  <div class=\"designer-footer\">\n    <div class=\"designer-footer-label\">{{ 'designer.items' | translate }}:</div>\n    <div class=\"designer-footer-list\">\n      @for (item of droppedDashboardItems; track item.uniqueName) {\n      <button type=\"button\" class=\"designer-footer-item\" [class.active]=\"tool?.uniqueName === item?.uniqueName\"\n        [attr.data-designer-unique-name]=\"item?.uniqueName\" (mouseenter)=\"setFooterHoverHighlight(item)\"\n        (mouseleave)=\"clearFooterHoverHighlight()\" (click)=\"selectDashboardItem(item)\"\n        (contextmenu)=\"showFooterContextMenu($event, item, footerCtxMenu)\">\n        {{ getDroppedDashboardItemLabel(item) }}\n      </button>\n      }\n    </div>\n    <p-contextMenu #footerCtxMenu [model]=\"footerCtxItems\" appendTo=\"body\" />\n  </div>\n</div>\n}\n\n@if (noEdit) {\n<wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n}\n\n<wuic-archetype-configurator [visible]=\"showArchetypeConfigurator\"\n  (visibleChange)=\"onArchetypeConfigVisibleChange($event)\" [archetype]=\"getActiveArchetypeConfig()\"\n  [metaInfo]=\"getArchetypeConfigMetaInfoForTool(archetypeConfigTool)\"\n  [value]=\"getArchetypeConfigValueForTool(archetypeConfigTool)\" (applyConfig)=\"onArchetypeConfigApply($event)\">\n</wuic-archetype-configurator>\n\n<wuic-css-sheet-editor [visible]=\"showCssSheetEditor\" (visibleChange)=\"onCssSheetEditorVisibleChange($event)\"\n  [sheets]=\"dashboardCssSheets\" [selectedSheetPath]=\"selectedCssEditorSheetPath\" [assetsFolder]=\"currentDashboardRoute\"\n  [styleProps]=\"getCssEditorStyleProps()\" (applyEditor)=\"onCssSheetEditorApply($event)\">\n</wuic-css-sheet-editor>\n\n<p-dialog [header]=\"'Riapri dashboard'\" [(visible)]=\"reopenDashboardDialogVisible\" [modal]=\"true\" [closable]=\"true\"\n  [draggable]=\"false\" [resizable]=\"false\" [appendTo]=\"'body'\" [style]=\"{ width: '34rem' }\"\n  (onHide)=\"cancelReopenDashboardDialog()\">\n  <div class=\"route-popup-form\">\n    <label for=\"designer-reopen-select\">Dashboard esistenti</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\">Riapri</button>\n    </div>\n  </div>\n</p-dialog>\n", 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}.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}:host ::ng-deep .designer-left-bottom-splitter .p-splitterpanel>.p-splitterpanel-content{height:100%;min-height:0;overflow:hidden}.hierarchy-panel{height:100%;width:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:6px}.hierarchy-panel-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#4b5563;margin:0 0 6px}.hierarchy-tree-wrap{flex:1 1 auto;min-height:0;border:1px solid inherit;border-radius:6px;background:transparent;overflow:auto;padding:4px}:host ::ng-deep .hierarchy-tree-wrap .p-tree{border:none;padding:0;height:100%;background:transparent}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content{border:1px solid transparent;border-radius:4px;background:transparent!important;color:inherit!important;padding:0!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight{border-color:transparent!important;background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content:hover{background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label{display:inline-block;border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label:hover{border-color:#94a3b8}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label.active{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight .hierarchy-node-label{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}.designer-hierarchy-node{cursor:pointer;border:1px solid transparent;border-radius:4px;padding:2px 6px;font-size:.82rem;line-height:1.25rem}.designer-hierarchy-node-label{cursor:pointer;display:inline-block;width:100%}.designer-hierarchy-node.active{border-color:#3b82f6;background:#eff6ff;color:#1d4ed8}.designer-footer-item.designer-tree-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px}.dashboard-design{height:100%;min-height:0;min-width:0;width:100%;overflow:auto;direction:ltr}:host ::ng-deep .dashboard-design.designer-hide-datasources .datasource-descriptor{display:none!important}.current-dashboard-title{font-weight:600;margin-right:12px}.designer-footer{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid inherit;background:transparent;min-height:36px;flex:0 0 auto;width:100%;overflow:auto}.designer-footer-label{font-size:.85rem;font-weight:600;color:inherit;white-space:nowrap}.designer-footer-list{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%}.designer-footer-item{border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer;white-space:nowrap}.designer-footer-item.active{border-color:#3b82f6;background:transparent;color:#1d4ed8}:host ::ng-deep .designer-footer-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px;box-shadow:inset 0 0 0 1px #3b82f6!important}.route-popup-form{display:flex;flex-direction:column;gap:8px}.route-popup-form label{font-size:.85rem;font-weight:600;color:#2f3f58}.route-popup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.route-popup-btn{border:1px solid inherit;background:transparent;color:inherit;border-radius:6px;padding:7px 12px;font-size:.85rem;cursor:pointer}.route-popup-btn-primary{border-color:#2f67d8;background:#2f67d8;color:#fff}.p-colorpicker{border:1px solid black;border-radius:4px}\n"] }]
+            args: [{ selector: 'wuic-designer', imports: [NgClass, TranslateModule, AsyncPipe, FormsModule, SplitterModule, DragDropModule, SelectModule, ColorPickerModule, AutoCompleteModule, DashboardComponent, FieldEditorComponent, ContextMenuModule, MetadataEditorComponent, MenubarModule, ArchetypeConfiguratorComponent, ButtonModule, MultiSelectModule, CssSheetEditorComponent, MenuModule, DialogModule, TreeModule], providers: [TreeDragDropService], template: "<!-- <button pButton type=\"button\" (click)=\"loadDashboard()\" class=\"mr-2\">{{'load' | translate}}</button> -->\n@if (!noEdit) {\n<div class=\"designer-layout\">\n  <div class=\"designer-toolbar\">\n    <div class=\"designer-current-dashboard\">{{ currentDashboardTitle }}</div>\n\n    <div class=\"designer-toolbar-spacer\"></div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"undo()\" [disabled]=\"!canUndo\">{{ 'designer.undo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"redo()\" [disabled]=\"!canRedo\">{{ 'designer.redo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (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                            <label class=\"designer-color-alpha-label\">{{ 'designer.alpha' | translate }}</label>\n                            <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                            <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                          </div>\n                          <input type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'dictionary' && !toolProp.value.async) {\n                          @if (toolProp.key == 'cssFile') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"availableProjectCssFiles\"\n                            [ngModel]=\"tool.inputs[toolProp.key]\" (ngModelChange)=\"onCssFileChanged($event, tool)\" />\n                          } @else if (toolProp.key == 'cssClass') {\n                          <p-multiSelect [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getCssClassOptionsForTool(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"onCssClassChanged($event, tool)\" [filter]=\"true\" [virtualScroll]=\"true\"\n                            [virtualScrollItemSize]=\"38\" scrollHeight=\"260px\" [showToggleAll]=\"false\" display=\"chip\"\n                            [maxSelectedLabels]=\"3\" [selectedItemsLabel]=\"'{0} selected'\">\n                          </p-multiSelect>\n                          } @else if ((tool.name == 'SELECT' || tool.name == 'MULTISELECT' || tool.name == 'UL') &&\n                          (toolProp.key == 'valueField' || toolProp.key == 'textField')) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else if (tool.name == 'LABEL' && toolProp.key == 'displayField') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          }\n                          @if (toolProp.value.type == 'dictionary' && toolProp.value.async) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (tool.name == 'DATAREPEATER' && toolProp.key == 'action' &&\n                          canOpenArchetypeConfigurator(tool)) {\n                          <button style=\"margin-top: 8px;\" (click)=\"openArchetypeConfigurator(tool)\">\n                            {{ 'designer.configure' | translate }} {{ (tool.inputs['action'] | async) || '' }}\n                          </button>\n                          }\n                          @if (toolProp.value.type == 'dropped-component-list') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [placeholder]=\"'select.component' | translate\" [options]=\"elementFilter(toolProp)\"\n                            [ngModel]=\"getDroppedComponentListModel(tool, toolProp)\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" optionLabel=\"uniqueName\"\n                            dataKey=\"uniqueName\" />\n                          }\n                          @if (toolProp.value.type == 'autocomplete') {\n                          <p-autoComplete [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\" [forceSelection]=\"true\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" [suggestions]=\"tool.suggestions\"\n                            [optionLabel]=\"toolProp.value.displayField\" [optionValue]=\"toolProp.value.valueField\"\n                            (completeMethod)=\"search($event, tool, toolProp)\" [dropdown]=\"true\" dropdownMode=\"current\"\n                            [multiple]=\"toolProp.value.multiple\" />\n                          }\n                          @if (toolProp.value.type == 'propertyTree' && shouldShowPropertyTree(tool)) {\n                          <ul>\n                            @for (item of $any(tool.inputs[toolProp.key] | async); track item) {\n                            <li style=\"padding: 0; margin: 0;\">\n                              @if (item.col && tool.inputs['customProps_' + (tool.inputs['action'] | async)])\n                              {\n                              <wuic-field-editor [field]=\"item.col\"\n                                [record]=\"tool.inputs['customProps_' + (tool.inputs['action'] | async)]\"\n                                [metaInfo]=\"tool.inputs['datasource']?.component?.value?.metaInfo\"\n                                [triggerProp]=\"tool.inputs['action']\"></wuic-field-editor>\n                              }\n                            </li>\n                            }\n                          </ul>\n                          }\n                        </li>\n                        }\n                      </ul>\n                    </details>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n              <ng-template pTemplate>\n                <div class=\"hierarchy-panel\">\n                  <div class=\"hierarchy-panel-title\">{{ 'designer.canvas_hierarchy' | translate }}</div>\n                  <div class=\"hierarchy-tree-wrap\">\n                    <p-tree [value]=\"hierarchyTreeNodes\" [draggableNodes]=\"true\" [droppableNodes]=\"true\"\n                      selectionMode=\"single\" [(selection)]=\"hierarchySelection\"\n                      (onNodeSelect)=\"onHierarchyNodeSelect($event)\" draggableScope=\"designer-hierarchy\"\n                      droppableScope=\"designer-hierarchy\" (onNodeDrop)=\"onHierarchyNodeDrop($event)\">\n                      <ng-template let-node pTemplate=\"default\">\n                        <span class=\"hierarchy-node-label\" [class.active]=\"isHierarchyNodeSelected(node)\"\n                          (mouseenter)=\"onHierarchyNodeMouseEnter(node)\" (mouseleave)=\"onHierarchyNodeMouseLeave()\"\n                          (contextmenu)=\"showHierarchyNodeContextMenu($event, node, hierarchyCtxMenu)\">\n                          {{ node.label }}\n                        </span>\n                      </ng-template>\n                    </p-tree>\n                  </div>\n                  <p-contextMenu #hierarchyCtxMenu [model]=\"hierarchyCtxItems\" appendTo=\"body\" />\n                </div>\n              </ng-template>\n            </p-splitter>\n          </ng-template>\n        </p-splitter>\n      </ng-template>\n      <ng-template pTemplate>\n        <div class=\"col dashboard-design\" [class.designer-hide-datasources]=\"hideDatasourcesInCanvas\" pDroppable\n          (onDrop)=\"drop($event)\" #canvas (contextmenu)=\"showCtx($event, this)\">\n          <wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n          <p-contextMenu [target]=\"canvas\" [model]=\"ctxItems | async\" appendTo=\"body\" />\n        </div>\n      </ng-template>\n    </p-splitter>\n  </div>\n  <div class=\"designer-footer\">\n    <div class=\"designer-footer-label\">{{ 'designer.items' | translate }}:</div>\n    <div class=\"designer-footer-list\">\n      @for (item of droppedDashboardItems; track item.uniqueName) {\n      <button type=\"button\" class=\"designer-footer-item\" [class.active]=\"tool?.uniqueName === item?.uniqueName\"\n        [attr.data-designer-unique-name]=\"item?.uniqueName\" (mouseenter)=\"setFooterHoverHighlight(item)\"\n        (mouseleave)=\"clearFooterHoverHighlight()\" (click)=\"selectDashboardItem(item)\"\n        (contextmenu)=\"showFooterContextMenu($event, item, footerCtxMenu)\">\n        {{ getDroppedDashboardItemLabel(item) }}\n      </button>\n      }\n    </div>\n    <p-contextMenu #footerCtxMenu [model]=\"footerCtxItems\" appendTo=\"body\" />\n  </div>\n</div>\n}\n\n@if (noEdit) {\n<wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n}\n\n<wuic-archetype-configurator [visible]=\"showArchetypeConfigurator\"\n  (visibleChange)=\"onArchetypeConfigVisibleChange($event)\" [archetype]=\"getActiveArchetypeConfig()\"\n  [metaInfo]=\"getArchetypeConfigMetaInfoForTool(archetypeConfigTool)\"\n  [value]=\"getArchetypeConfigValueForTool(archetypeConfigTool)\" (applyConfig)=\"onArchetypeConfigApply($event)\">\n</wuic-archetype-configurator>\n\n<wuic-css-sheet-editor [visible]=\"showCssSheetEditor\" (visibleChange)=\"onCssSheetEditorVisibleChange($event)\"\n  [sheets]=\"dashboardCssSheets\" [selectedSheetPath]=\"selectedCssEditorSheetPath\" [assetsFolder]=\"currentDashboardRoute\"\n  [styleProps]=\"getCssEditorStyleProps()\" (applyEditor)=\"onCssSheetEditorApply($event)\">\n</wuic-css-sheet-editor>\n\n<p-dialog [header]=\"'designer.reopen_dashboard' | translate\" [(visible)]=\"reopenDashboardDialogVisible\" [modal]=\"true\"\n  [closable]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [appendTo]=\"'body'\" [style]=\"{ width: '34rem' }\"\n  (onHide)=\"cancelReopenDashboardDialog()\">\n  <div class=\"route-popup-form\">\n    <label for=\"designer-reopen-select\">{{ 'designer.existing_dashboards' | translate }}</label>\n    <p-select inputId=\"designer-reopen-select\" [options]=\"savedDashboardOptions\" optionLabel=\"label\" optionValue=\"value\"\n      [(ngModel)]=\"reopenDialogSelectedDashboardRoute\" [filter]=\"true\" [showClear]=\"true\" [style]=\"{ width: '100%' }\"\n      appendTo=\"body\" />\n\n    <div class=\"route-popup-actions\">\n      <button type=\"button\" class=\"route-popup-btn\" (click)=\"cancelReopenDashboardDialog()\">{{ 'cancel' | translate\n        }}</button>\n      <button type=\"button\" class=\"route-popup-btn route-popup-btn-primary\" (click)=\"confirmReopenDashboardDialog()\"\n        [disabled]=\"!reopenDialogSelectedDashboardRoute\">{{ 'designer.reopen' | translate }}</button>\n    </div>\n  </div>\n</p-dialog>", styles: [":host{display:block;width:100%;height:100%;min-width:0}.designer-layout{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;width:100%;min-width:0}.designer-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px solid inherit;border-radius:10px;background:transparent;padding:10px 12px;margin-bottom:8px}.designer-current-dashboard{min-width:220px;font-size:.86rem;font-weight:700;color:inherit}.designer-toolbar-spacer{flex:1 1 auto;min-width:16px}.designer-toolbar-menu-group{display:inline-flex}.designer-toolbar-menu-group button{height:32px;border:1px solid #2f67d8;border-radius:6px;background:#2f67d8;color:#fff;padding:0 10px;font-size:.82rem;cursor:pointer}.designer-toolbar-menu-group button[disabled]{opacity:.6;cursor:not-allowed}.designer-main{min-height:0;min-width:0;width:100%;overflow:hidden;direction:ltr}.designer-main-splitter{height:100%;width:100%;min-width:0;direction:ltr}.designer-toolbox{font-size:3rem}.designer-toolbox ul{list-style-type:none;padding:0;margin:0;width:100%}.designer-toolbox li{float:left;margin-left:5px;margin-top:5px}.designer-toolbox .tool-groups{display:block}.designer-toolbox .tool-group-item{float:none;margin-left:0;margin-top:10px;clear:both}.designer-toolbox .tool-group-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin:0 0 4px 6px}.designer-toolbox .tool-group-list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px}.designer-toolbox .tool-group-list li{float:none;margin-left:0;margin-top:0}.designer-toolbox .props{font-size:1rem}.designer-toolbox .props li{float:none;padding-bottom:15px}.designer-toolbox .prop-section{width:100%;border:1px solid inherit;border-radius:6px;margin-top:8px;background:transparent;padding:6px 8px 2px}.designer-toolbox .prop-section-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;color:inherit;margin-bottom:6px}.palette-panel{height:100%;overflow:auto;width:100%}.designer-color-alpha-row{display:flex;align-items:center;gap:8px;margin-top:6px;margin-bottom:6px}.designer-color-alpha-label{font-size:.8rem;min-width:40px}.designer-color-alpha-row input[type=range]{flex:1 1 auto;min-width:90px}.designer-color-alpha-row input[type=number]{width:72px}.properties-panel{height:100%;overflow:hidden;width:100%;display:flex;flex-direction:column;min-height:0;padding-right:10px;padding-left:10px;padding-top:10px}.properties-panel>.designer-toolbox{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}:host ::ng-deep .designer-left-bottom-splitter .p-splitterpanel{min-height:0!important;overflow:hidden!important}.hierarchy-panel{height:100%;width:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:6px}.hierarchy-panel-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#4b5563;margin:0 0 6px}.hierarchy-tree-wrap{flex:1 1 auto;min-height:0;border:1px solid inherit;border-radius:6px;background:transparent;overflow:auto;padding:4px}:host ::ng-deep .hierarchy-tree-wrap .p-tree{border:none;padding:0;height:100%;background:transparent}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content{border:1px solid transparent;border-radius:4px;background:transparent!important;color:inherit!important;padding:0!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight{border-color:transparent!important;background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content:hover{background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label{display:inline-block;border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label:hover{border-color:#94a3b8}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label.active{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight .hierarchy-node-label{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}.designer-hierarchy-node{cursor:pointer;border:1px solid transparent;border-radius:4px;padding:2px 6px;font-size:.82rem;line-height:1.25rem}.designer-hierarchy-node-label{cursor:pointer;display:inline-block;width:100%}.designer-hierarchy-node.active{border-color:#3b82f6;background:#eff6ff;color:#1d4ed8}.designer-footer-item.designer-tree-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px}.dashboard-design{height:100%;min-height:0;min-width:0;width:100%;overflow:auto;direction:ltr}:host ::ng-deep .dashboard-design.designer-hide-datasources .datasource-descriptor{display:none!important}.current-dashboard-title{font-weight:600;margin-right:12px}.designer-footer{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid inherit;background:transparent;min-height:36px;flex:0 0 auto;width:100%;overflow:auto}.designer-footer-label{font-size:.85rem;font-weight:600;color:inherit;white-space:nowrap}.designer-footer-list{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%}.designer-footer-item{border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer;white-space:nowrap}.designer-footer-item.active{border-color:#3b82f6;background:transparent;color:#1d4ed8}:host ::ng-deep .designer-footer-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px;box-shadow:inset 0 0 0 1px #3b82f6!important}.route-popup-form{display:flex;flex-direction:column;gap:8px}.route-popup-form label{font-size:.85rem;font-weight:600;color:#2f3f58}.route-popup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.route-popup-btn{border:1px solid inherit;background:transparent;color:inherit;border-radius:6px;padding:7px 12px;font-size:.85rem;cursor:pointer}.route-popup-btn-primary{border-color:#2f67d8;background:#2f67d8;color:#fff}.p-colorpicker{border:1px solid black;border-radius:4px}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: DataProviderService }, { type: MetadataProviderService }, { type: UserInfoService }, { type: i0.ChangeDetectorRef }, { type: TranslationManagerService }, { type: MetadataEditorService }, { type: WorkflowRuntimeMetadataService }], propDecorators: { onWindowHashChange: [{
                 type: HostListener,
                 args: ['window:hashchange']
@@ -10216,4 +10845,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             }] } });
 
 export { DesignerComponent };
-//# sourceMappingURL=wuic-framework-lib-designer.component-B61jxcjI.mjs.map
+//# sourceMappingURL=wuic-framework-lib-designer.component-CJj2TAfG.mjs.map