wuic-framework-lib 1.7.1 → 1.7.3

package/fesm2022/{wuic-framework-lib-designer.component-D6cbqNFg.mjs → wuic-framework-lib-designer.component-CohHkalb.mjs}

@@ -5,7 +5,7 @@ import { SplitterModule } from 'primeng/splitter';
 import * as i12 from 'primeng/dragdrop';
 import { DragDropModule } from 'primeng/dragdrop';
 import { NgClass, NgStyle, NgTemplateOutlet, AsyncPipe, JsonPipe, NgFor, NgIf, NgComponentOutlet } from '@angular/common';
-import { W as WtoolboxService, D as DynamicGenericTemplateComponent, a as DynamicCompilerService, b as DataSourceComponent, c as DataRepeaterComponent, F as FilterBarComponent, L as LazyParametricDialogComponent, P as PagerComponent, M as MetadataProviderService, t as toHsbaModel, d as clampAlpha, e as toPersistedColor, f as ParametricDialogComponent, g as MetadatiColonna, h as DataProviderService, U as UserInfoService, T as TranslationManagerService, i as MetadataEditorService, C as ChatbotHostRegistryService, j as WorkflowRuntimeMetadataService, k as FieldEditorComponent, l as MetadataEditorComponent, A as ArchetypeConfiguratorComponent } from './wuic-framework-lib-wuic-framework-lib-BZZwta8b.mjs';
+import { W as WtoolboxService, D as DynamicGenericTemplateComponent, a as DynamicCompilerService, b as DataSourceComponent, c as DataRepeaterComponent, F as FilterBarComponent, L as LazyParametricDialogComponent, P as PagerComponent, M as MetadataProviderService, t as toHsbaModel, d as clampAlpha, e as toPersistedColor, f as ParametricDialogComponent, g as MetadatiColonna, h as DataProviderService, U as UserInfoService, T as TranslationManagerService, i as MetadataEditorService, C as ChatbotHostRegistryService, j as WorkflowRuntimeMetadataService, k as FieldEditorComponent, l as MetadataEditorComponent, A as ArchetypeConfiguratorComponent } from './wuic-framework-lib-wuic-framework-lib-54sySY_p.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';
@@ -2230,11 +2230,11 @@ class TabViewWrapperComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TabViewWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TabViewWrapperComponent, isStandalone: true, selector: "p-tabView", inputs: { tabs: "tabs", activeIndex: "activeIndex" }, ngImport: i0, template: "<div data-pc-name=\"tabview\" class=\"p-tabview p-component\">\n  <div class=\"p-tabview-nav-container\">\n    <div class=\"p-tabview-nav-content\" data-pc-section=\"navcontent\">\n      <ul role=\"tablist\" class=\"p-tabview-nav\" data-pc-section=\"nav\">\n        @for (tab of tabs; track tab; let i = $index) {\n          <li role=\"presentation\" data-p-disabled=\"false\"\n            [ngClass]=\"{'p-highlight': tab.inputs?.selected}\">\n            <button type=\"button\" role=\"tab\" pripple=\"\" class=\"p-element p-ripple p-tabview-nav-link\" (click)=\"setIndex(i)\"\n              [attr.aria-selected]=\"tab.inputs?.selected\" [attr.tabindex]=\"i\" aria-disabled=\"false\"\n              [attr.data-pc-index]=\"i\" data-pc-section=\"headeraction\">\n              <span class=\"p-tabview-title\">\n                {{tab.inputs.header}}\n              </span>\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n  <div class=\"p-tabview-panels\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [".p-tabview.p-component{height:100%}.p-tabview .p-tabview-nav-content{scroll-padding-inline:3rem}.p-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto}.p-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.p-tabview .p-tabview-nav li .p-tabview-nav-link{border-width:0 0 2px 0;padding:1.25rem;font-weight:700;border-top-right-radius:6px;border-top-left-radius:6px;transition:box-shadow .2s;margin:0 0 -2px}.p-tabview-nav-link{appearance:none;background:transparent;border:none;font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden;width:100%}.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link{border-color:var(--p-primary-color, #3B82F6);color:var(--p-primary-color, #3B82F6);background-color:transparent}.p-tabview-panels{height:calc(100% - 60px);overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TabViewWrapperComponent, isStandalone: true, selector: "p-tabView", inputs: { tabs: "tabs", activeIndex: "activeIndex" }, ngImport: i0, template: "<div data-pc-name=\"tabview\" class=\"p-tabview p-component\">\r\n  <div class=\"p-tabview-nav-container\">\r\n    <div class=\"p-tabview-nav-content\" data-pc-section=\"navcontent\">\r\n      <ul role=\"tablist\" class=\"p-tabview-nav\" data-pc-section=\"nav\">\r\n        @for (tab of tabs; track tab; let i = $index) {\r\n          <li role=\"presentation\" data-p-disabled=\"false\"\r\n            [ngClass]=\"{'p-highlight': tab.inputs?.selected}\">\r\n            <button type=\"button\" role=\"tab\" pripple=\"\" class=\"p-element p-ripple p-tabview-nav-link\" (click)=\"setIndex(i)\"\r\n              [attr.aria-selected]=\"tab.inputs?.selected\" [attr.tabindex]=\"i\" aria-disabled=\"false\"\r\n              [attr.data-pc-index]=\"i\" data-pc-section=\"headeraction\">\r\n              <span class=\"p-tabview-title\">\r\n                {{tab.inputs.header}}\r\n              </span>\r\n            </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n    </div>\r\n  </div>\r\n  <div class=\"p-tabview-panels\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>", styles: [".p-tabview.p-component{height:100%}.p-tabview .p-tabview-nav-content{scroll-padding-inline:3rem}.p-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto}.p-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.p-tabview .p-tabview-nav li .p-tabview-nav-link{border-width:0 0 2px 0;padding:1.25rem;font-weight:700;border-top-right-radius:6px;border-top-left-radius:6px;transition:box-shadow .2s;margin:0 0 -2px}.p-tabview-nav-link{appearance:none;background:transparent;border:none;font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden;width:100%}.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link{border-color:var(--p-primary-color, #3B82F6);color:var(--p-primary-color, #3B82F6);background-color:transparent}.p-tabview-panels{height:calc(100% - 60px);overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TabViewWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'p-tabView', imports: [NgClass], template: "<div data-pc-name=\"tabview\" class=\"p-tabview p-component\">\n  <div class=\"p-tabview-nav-container\">\n    <div class=\"p-tabview-nav-content\" data-pc-section=\"navcontent\">\n      <ul role=\"tablist\" class=\"p-tabview-nav\" data-pc-section=\"nav\">\n        @for (tab of tabs; track tab; let i = $index) {\n          <li role=\"presentation\" data-p-disabled=\"false\"\n            [ngClass]=\"{'p-highlight': tab.inputs?.selected}\">\n            <button type=\"button\" role=\"tab\" pripple=\"\" class=\"p-element p-ripple p-tabview-nav-link\" (click)=\"setIndex(i)\"\n              [attr.aria-selected]=\"tab.inputs?.selected\" [attr.tabindex]=\"i\" aria-disabled=\"false\"\n              [attr.data-pc-index]=\"i\" data-pc-section=\"headeraction\">\n              <span class=\"p-tabview-title\">\n                {{tab.inputs.header}}\n              </span>\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n  <div class=\"p-tabview-panels\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [".p-tabview.p-component{height:100%}.p-tabview .p-tabview-nav-content{scroll-padding-inline:3rem}.p-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto}.p-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.p-tabview .p-tabview-nav li .p-tabview-nav-link{border-width:0 0 2px 0;padding:1.25rem;font-weight:700;border-top-right-radius:6px;border-top-left-radius:6px;transition:box-shadow .2s;margin:0 0 -2px}.p-tabview-nav-link{appearance:none;background:transparent;border:none;font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden;width:100%}.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link{border-color:var(--p-primary-color, #3B82F6);color:var(--p-primary-color, #3B82F6);background-color:transparent}.p-tabview-panels{height:calc(100% - 60px);overflow:auto}\n"] }]
+            args: [{ selector: 'p-tabView', imports: [NgClass], template: "<div data-pc-name=\"tabview\" class=\"p-tabview p-component\">\r\n  <div class=\"p-tabview-nav-container\">\r\n    <div class=\"p-tabview-nav-content\" data-pc-section=\"navcontent\">\r\n      <ul role=\"tablist\" class=\"p-tabview-nav\" data-pc-section=\"nav\">\r\n        @for (tab of tabs; track tab; let i = $index) {\r\n          <li role=\"presentation\" data-p-disabled=\"false\"\r\n            [ngClass]=\"{'p-highlight': tab.inputs?.selected}\">\r\n            <button type=\"button\" role=\"tab\" pripple=\"\" class=\"p-element p-ripple p-tabview-nav-link\" (click)=\"setIndex(i)\"\r\n              [attr.aria-selected]=\"tab.inputs?.selected\" [attr.tabindex]=\"i\" aria-disabled=\"false\"\r\n              [attr.data-pc-index]=\"i\" data-pc-section=\"headeraction\">\r\n              <span class=\"p-tabview-title\">\r\n                {{tab.inputs.header}}\r\n              </span>\r\n            </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n    </div>\r\n  </div>\r\n  <div class=\"p-tabview-panels\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>", styles: [".p-tabview.p-component{height:100%}.p-tabview .p-tabview-nav-content{scroll-padding-inline:3rem}.p-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto}.p-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.p-tabview .p-tabview-nav li .p-tabview-nav-link{border-width:0 0 2px 0;padding:1.25rem;font-weight:700;border-top-right-radius:6px;border-top-left-radius:6px;transition:box-shadow .2s;margin:0 0 -2px}.p-tabview-nav-link{appearance:none;background:transparent;border:none;font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden;width:100%}.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link{border-color:var(--p-primary-color, #3B82F6);color:var(--p-primary-color, #3B82F6);background-color:transparent}.p-tabview-panels{height:calc(100% - 60px);overflow:auto}\n"] }]
         }], propDecorators: { tabs: [{
                 type: Input
             }], activeIndex: [{
@@ -3146,11 +3146,11 @@ class SplitComponent {
         this.dragProgressSubject.next(this.createDragInteractionEvent(this.draggedGutterIndex()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SplitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SplitComponent, isStandalone: true, selector: "p-splitter", inputs: { gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, gutterStep: { classPropertyName: "gutterStep", publicName: "gutterStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, gutterClickDeltaPx: { classPropertyName: "gutterClickDeltaPx", publicName: "gutterClickDeltaPx", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, gutterAriaLabel: { classPropertyName: "gutterAriaLabel", publicName: "gutterAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, restrictMove: { classPropertyName: "restrictMove", publicName: "restrictMove", isSignal: true, isRequired: false, transformFunction: null }, useTransition: { classPropertyName: "useTransition", publicName: "useTransition", isSignal: true, isRequired: false, transformFunction: null }, gutterDblClickDuration: { classPropertyName: "gutterDblClickDuration", publicName: "gutterDblClickDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gutterClick: "gutterClick", gutterDblClick: "gutterDblClick", dragStart: "dragStart", dragEnd: "dragEnd", transitionEnd: "transitionEnd" }, host: { properties: { "class": "this.hostClassesBinding", "dir": "this.hostDirBinding" } }, queries: [{ propertyName: "_areas", predicate: SPLIT_AREA_CONTRACT, isSignal: true }, { propertyName: "customGutter", first: true, predicate: SplitGutterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n@for (area of _areas(); track area) {\n  @if (!$last) {\n    <div\n      #gutter\n      class=\"as-split-gutter\"\n      role=\"separator\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"gutterAriaLabel()\"\n      [attr.aria-orientation]=\"direction()\"\n      [attr.aria-valuemin]=\"getAriaValue(area.minSize())\"\n      [attr.aria-valuemax]=\"getAriaValue(area.maxSize())\"\n      [attr.aria-valuenow]=\"getAriaValue(area._internalSize())\"\n      [attr.aria-valuetext]=\"getAriaAreaSizeText(area)\"\n      [ngStyle]=\"getGutterGridStyle($index + 1)\"\n      [class.as-dragged]=\"draggedGutterIndex() === $index\"\n      asSplitCustomEventsBehavior\n      [asSplitCustomMultiClickThreshold]=\"gutterDblClickDuration()\"\n      [asSplitCustomClickDeltaInPx]=\"gutterClickDeltaPx()\"\n      (asSplitCustomClick)=\"gutterClicked($index)\"\n      (asSplitCustomDblClick)=\"gutterDoubleClicked($index)\"\n      (asSplitCustomMouseDown)=\"gutterMouseDown($event, gutter, $index, $index, $index + 1)\"\n      (asSplitCustomKeyDown)=\"gutterKeyDown($event, $index, $index, $index + 1)\"\n    >\n      @if (customGutter()?.template) {\n        <ng-container *asSplitGutterDynamicInjector=\"$index + 1; let injector\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              customGutter().template;\n              context: {\n                areaBefore: area,\n                areaAfter: _areas()[$index + 1],\n                gutterNum: $index + 1,\n                first: $first,\n                last: $index === _areas().length - 2,\n                isDragged: draggedGutterIndex() === $index\n              };\n              injector: injector\n            \"\n          ></ng-container>\n        </ng-container>\n      } @else {\n        <div class=\"as-split-gutter-icon\"></div>\n      }\n    </div>\n  }\n}\n", styles: ["@property --as-gutter-background-color{syntax: \"<color>\"; inherits: true; initial-value: #eeeeee;}@property --as-gutter-icon-horizontal{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);}@property --as-gutter-icon-vertical{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC);}@property --as-gutter-icon-disabled{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);}@property --as-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .3s;}@property --as-gutter-disabled-cursor{syntax: \"*\"; inherits: true; initial-value: default;}:host{--_as-gutter-background-color: var(--as-gutter-background-color, #eeeeee);--_as-gutter-icon-horizontal: var(--as-gutter-icon-horizontal, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==));--_as-gutter-icon-vertical: var(--as-gutter-icon-vertical, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC));--_as-gutter-icon-disabled: var(--as-gutter-icon-disabled, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==));--_as-transition-duration: var(--as-transition-duration, .3s);--_as-gutter-disabled-cursor: var(--as-gutter-disabled-cursor, default);display:grid;overflow:hidden;height:100%;width:100%}:host(.as-transition){transition:grid-template var(--_as-transition-duration)}.as-split-gutter{background-color:var(--_as-gutter-background-color);display:flex;align-items:center;justify-content:center;touch-action:none}:host(.as-horizontal)>.as-split-gutter{cursor:col-resize;height:100%}:host(.as-vertical)>.as-split-gutter{cursor:row-resize;width:100%}:host(.as-disabled)>.as-split-gutter{cursor:var(--_as-gutter-disabled-cursor)}.as-split-gutter-icon{width:100%;height:100%;background-position:center center;background-repeat:no-repeat}:host(.as-horizontal)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-horizontal)}:host(.as-vertical)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-vertical)}:host(.as-disabled)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-disabled)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: SplitCustomEventsBehaviorDirective, selector: "[asSplitCustomEventsBehavior]", inputs: ["asSplitCustomMultiClickThreshold", "asSplitCustomClickDeltaInPx"], outputs: ["asSplitCustomMouseDown", "asSplitCustomClick", "asSplitCustomDblClick", "asSplitCustomKeyDown"] }, { kind: "directive", type: SplitGutterDynamicInjectorDirective, selector: "[asSplitGutterDynamicInjector]", inputs: ["asSplitGutterDynamicInjector"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SplitComponent, isStandalone: true, selector: "p-splitter", inputs: { gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, gutterStep: { classPropertyName: "gutterStep", publicName: "gutterStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, gutterClickDeltaPx: { classPropertyName: "gutterClickDeltaPx", publicName: "gutterClickDeltaPx", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, gutterAriaLabel: { classPropertyName: "gutterAriaLabel", publicName: "gutterAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, restrictMove: { classPropertyName: "restrictMove", publicName: "restrictMove", isSignal: true, isRequired: false, transformFunction: null }, useTransition: { classPropertyName: "useTransition", publicName: "useTransition", isSignal: true, isRequired: false, transformFunction: null }, gutterDblClickDuration: { classPropertyName: "gutterDblClickDuration", publicName: "gutterDblClickDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gutterClick: "gutterClick", gutterDblClick: "gutterDblClick", dragStart: "dragStart", dragEnd: "dragEnd", transitionEnd: "transitionEnd" }, host: { properties: { "class": "this.hostClassesBinding", "dir": "this.hostDirBinding" } }, queries: [{ propertyName: "_areas", predicate: SPLIT_AREA_CONTRACT, isSignal: true }, { propertyName: "customGutter", first: true, predicate: SplitGutterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\r\n@for (area of _areas(); track area) {\r\n  @if (!$last) {\r\n    <div\r\n      #gutter\r\n      class=\"as-split-gutter\"\r\n      role=\"separator\"\r\n      tabindex=\"0\"\r\n      [attr.aria-label]=\"gutterAriaLabel()\"\r\n      [attr.aria-orientation]=\"direction()\"\r\n      [attr.aria-valuemin]=\"getAriaValue(area.minSize())\"\r\n      [attr.aria-valuemax]=\"getAriaValue(area.maxSize())\"\r\n      [attr.aria-valuenow]=\"getAriaValue(area._internalSize())\"\r\n      [attr.aria-valuetext]=\"getAriaAreaSizeText(area)\"\r\n      [ngStyle]=\"getGutterGridStyle($index + 1)\"\r\n      [class.as-dragged]=\"draggedGutterIndex() === $index\"\r\n      asSplitCustomEventsBehavior\r\n      [asSplitCustomMultiClickThreshold]=\"gutterDblClickDuration()\"\r\n      [asSplitCustomClickDeltaInPx]=\"gutterClickDeltaPx()\"\r\n      (asSplitCustomClick)=\"gutterClicked($index)\"\r\n      (asSplitCustomDblClick)=\"gutterDoubleClicked($index)\"\r\n      (asSplitCustomMouseDown)=\"gutterMouseDown($event, gutter, $index, $index, $index + 1)\"\r\n      (asSplitCustomKeyDown)=\"gutterKeyDown($event, $index, $index, $index + 1)\"\r\n    >\r\n      @if (customGutter()?.template) {\r\n        <ng-container *asSplitGutterDynamicInjector=\"$index + 1; let injector\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              customGutter().template;\r\n              context: {\r\n                areaBefore: area,\r\n                areaAfter: _areas()[$index + 1],\r\n                gutterNum: $index + 1,\r\n                first: $first,\r\n                last: $index === _areas().length - 2,\r\n                isDragged: draggedGutterIndex() === $index\r\n              };\r\n              injector: injector\r\n            \"\r\n          ></ng-container>\r\n        </ng-container>\r\n      } @else {\r\n        <div class=\"as-split-gutter-icon\"></div>\r\n      }\r\n    </div>\r\n  }\r\n}\r\n", styles: ["@property --as-gutter-background-color{syntax: \"<color>\"; inherits: true; initial-value: #eeeeee;}@property --as-gutter-icon-horizontal{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);}@property --as-gutter-icon-vertical{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC);}@property --as-gutter-icon-disabled{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);}@property --as-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .3s;}@property --as-gutter-disabled-cursor{syntax: \"*\"; inherits: true; initial-value: default;}:host{--_as-gutter-background-color: var(--as-gutter-background-color, #eeeeee);--_as-gutter-icon-horizontal: var(--as-gutter-icon-horizontal, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==));--_as-gutter-icon-vertical: var(--as-gutter-icon-vertical, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC));--_as-gutter-icon-disabled: var(--as-gutter-icon-disabled, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==));--_as-transition-duration: var(--as-transition-duration, .3s);--_as-gutter-disabled-cursor: var(--as-gutter-disabled-cursor, default);display:grid;overflow:hidden;height:100%;width:100%}:host(.as-transition){transition:grid-template var(--_as-transition-duration)}.as-split-gutter{background-color:var(--_as-gutter-background-color);display:flex;align-items:center;justify-content:center;touch-action:none}:host(.as-horizontal)>.as-split-gutter{cursor:col-resize;height:100%}:host(.as-vertical)>.as-split-gutter{cursor:row-resize;width:100%}:host(.as-disabled)>.as-split-gutter{cursor:var(--_as-gutter-disabled-cursor)}.as-split-gutter-icon{width:100%;height:100%;background-position:center center;background-repeat:no-repeat}:host(.as-horizontal)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-horizontal)}:host(.as-vertical)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-vertical)}:host(.as-disabled)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-disabled)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: SplitCustomEventsBehaviorDirective, selector: "[asSplitCustomEventsBehavior]", inputs: ["asSplitCustomMultiClickThreshold", "asSplitCustomClickDeltaInPx"], outputs: ["asSplitCustomMouseDown", "asSplitCustomClick", "asSplitCustomDblClick", "asSplitCustomKeyDown"] }, { kind: "directive", type: SplitGutterDynamicInjectorDirective, selector: "[asSplitGutterDynamicInjector]", inputs: ["asSplitGutterDynamicInjector"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SplitComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'p-splitter', imports: [NgStyle, SplitCustomEventsBehaviorDirective, SplitGutterDynamicInjectorDirective, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n@for (area of _areas(); track area) {\n  @if (!$last) {\n    <div\n      #gutter\n      class=\"as-split-gutter\"\n      role=\"separator\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"gutterAriaLabel()\"\n      [attr.aria-orientation]=\"direction()\"\n      [attr.aria-valuemin]=\"getAriaValue(area.minSize())\"\n      [attr.aria-valuemax]=\"getAriaValue(area.maxSize())\"\n      [attr.aria-valuenow]=\"getAriaValue(area._internalSize())\"\n      [attr.aria-valuetext]=\"getAriaAreaSizeText(area)\"\n      [ngStyle]=\"getGutterGridStyle($index + 1)\"\n      [class.as-dragged]=\"draggedGutterIndex() === $index\"\n      asSplitCustomEventsBehavior\n      [asSplitCustomMultiClickThreshold]=\"gutterDblClickDuration()\"\n      [asSplitCustomClickDeltaInPx]=\"gutterClickDeltaPx()\"\n      (asSplitCustomClick)=\"gutterClicked($index)\"\n      (asSplitCustomDblClick)=\"gutterDoubleClicked($index)\"\n      (asSplitCustomMouseDown)=\"gutterMouseDown($event, gutter, $index, $index, $index + 1)\"\n      (asSplitCustomKeyDown)=\"gutterKeyDown($event, $index, $index, $index + 1)\"\n    >\n      @if (customGutter()?.template) {\n        <ng-container *asSplitGutterDynamicInjector=\"$index + 1; let injector\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              customGutter().template;\n              context: {\n                areaBefore: area,\n                areaAfter: _areas()[$index + 1],\n                gutterNum: $index + 1,\n                first: $first,\n                last: $index === _areas().length - 2,\n                isDragged: draggedGutterIndex() === $index\n              };\n              injector: injector\n            \"\n          ></ng-container>\n        </ng-container>\n      } @else {\n        <div class=\"as-split-gutter-icon\"></div>\n      }\n    </div>\n  }\n}\n", styles: ["@property --as-gutter-background-color{syntax: \"<color>\"; inherits: true; initial-value: #eeeeee;}@property --as-gutter-icon-horizontal{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);}@property --as-gutter-icon-vertical{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC);}@property --as-gutter-icon-disabled{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);}@property --as-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .3s;}@property --as-gutter-disabled-cursor{syntax: \"*\"; inherits: true; initial-value: default;}:host{--_as-gutter-background-color: var(--as-gutter-background-color, #eeeeee);--_as-gutter-icon-horizontal: var(--as-gutter-icon-horizontal, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==));--_as-gutter-icon-vertical: var(--as-gutter-icon-vertical, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC));--_as-gutter-icon-disabled: var(--as-gutter-icon-disabled, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==));--_as-transition-duration: var(--as-transition-duration, .3s);--_as-gutter-disabled-cursor: var(--as-gutter-disabled-cursor, default);display:grid;overflow:hidden;height:100%;width:100%}:host(.as-transition){transition:grid-template var(--_as-transition-duration)}.as-split-gutter{background-color:var(--_as-gutter-background-color);display:flex;align-items:center;justify-content:center;touch-action:none}:host(.as-horizontal)>.as-split-gutter{cursor:col-resize;height:100%}:host(.as-vertical)>.as-split-gutter{cursor:row-resize;width:100%}:host(.as-disabled)>.as-split-gutter{cursor:var(--_as-gutter-disabled-cursor)}.as-split-gutter-icon{width:100%;height:100%;background-position:center center;background-repeat:no-repeat}:host(.as-horizontal)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-horizontal)}:host(.as-vertical)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-vertical)}:host(.as-disabled)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-disabled)}\n"] }]
+            args: [{ selector: 'p-splitter', imports: [NgStyle, SplitCustomEventsBehaviorDirective, SplitGutterDynamicInjectorDirective, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\r\n@for (area of _areas(); track area) {\r\n  @if (!$last) {\r\n    <div\r\n      #gutter\r\n      class=\"as-split-gutter\"\r\n      role=\"separator\"\r\n      tabindex=\"0\"\r\n      [attr.aria-label]=\"gutterAriaLabel()\"\r\n      [attr.aria-orientation]=\"direction()\"\r\n      [attr.aria-valuemin]=\"getAriaValue(area.minSize())\"\r\n      [attr.aria-valuemax]=\"getAriaValue(area.maxSize())\"\r\n      [attr.aria-valuenow]=\"getAriaValue(area._internalSize())\"\r\n      [attr.aria-valuetext]=\"getAriaAreaSizeText(area)\"\r\n      [ngStyle]=\"getGutterGridStyle($index + 1)\"\r\n      [class.as-dragged]=\"draggedGutterIndex() === $index\"\r\n      asSplitCustomEventsBehavior\r\n      [asSplitCustomMultiClickThreshold]=\"gutterDblClickDuration()\"\r\n      [asSplitCustomClickDeltaInPx]=\"gutterClickDeltaPx()\"\r\n      (asSplitCustomClick)=\"gutterClicked($index)\"\r\n      (asSplitCustomDblClick)=\"gutterDoubleClicked($index)\"\r\n      (asSplitCustomMouseDown)=\"gutterMouseDown($event, gutter, $index, $index, $index + 1)\"\r\n      (asSplitCustomKeyDown)=\"gutterKeyDown($event, $index, $index, $index + 1)\"\r\n    >\r\n      @if (customGutter()?.template) {\r\n        <ng-container *asSplitGutterDynamicInjector=\"$index + 1; let injector\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              customGutter().template;\r\n              context: {\r\n                areaBefore: area,\r\n                areaAfter: _areas()[$index + 1],\r\n                gutterNum: $index + 1,\r\n                first: $first,\r\n                last: $index === _areas().length - 2,\r\n                isDragged: draggedGutterIndex() === $index\r\n              };\r\n              injector: injector\r\n            \"\r\n          ></ng-container>\r\n        </ng-container>\r\n      } @else {\r\n        <div class=\"as-split-gutter-icon\"></div>\r\n      }\r\n    </div>\r\n  }\r\n}\r\n", styles: ["@property --as-gutter-background-color{syntax: \"<color>\"; inherits: true; initial-value: #eeeeee;}@property --as-gutter-icon-horizontal{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);}@property --as-gutter-icon-vertical{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC);}@property --as-gutter-icon-disabled{syntax: \"<url>\"; inherits: true; initial-value: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);}@property --as-transition-duration{syntax: \"<time>\"; inherits: true; initial-value: .3s;}@property --as-gutter-disabled-cursor{syntax: \"*\"; inherits: true; initial-value: default;}:host{--_as-gutter-background-color: var(--as-gutter-background-color, #eeeeee);--_as-gutter-icon-horizontal: var(--as-gutter-icon-horizontal, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==));--_as-gutter-icon-vertical: var(--as-gutter-icon-vertical, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC));--_as-gutter-icon-disabled: var(--as-gutter-icon-disabled, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==));--_as-transition-duration: var(--as-transition-duration, .3s);--_as-gutter-disabled-cursor: var(--as-gutter-disabled-cursor, default);display:grid;overflow:hidden;height:100%;width:100%}:host(.as-transition){transition:grid-template var(--_as-transition-duration)}.as-split-gutter{background-color:var(--_as-gutter-background-color);display:flex;align-items:center;justify-content:center;touch-action:none}:host(.as-horizontal)>.as-split-gutter{cursor:col-resize;height:100%}:host(.as-vertical)>.as-split-gutter{cursor:row-resize;width:100%}:host(.as-disabled)>.as-split-gutter{cursor:var(--_as-gutter-disabled-cursor)}.as-split-gutter-icon{width:100%;height:100%;background-position:center center;background-repeat:no-repeat}:host(.as-horizontal)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-horizontal)}:host(.as-vertical)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-vertical)}:host(.as-disabled)>.as-split-gutter>.as-split-gutter-icon{background-image:var(--_as-gutter-icon-disabled)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _areas: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SPLIT_AREA_CONTRACT), { isSignal: true }] }], customGutter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitGutterDirective), { isSignal: true }] }], gutterSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterSize", required: false }] }], gutterStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterStep", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], gutterClickDeltaPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterClickDeltaPx", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], gutterAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterAriaLabel", required: false }] }], restrictMove: [{ type: i0.Input, args: [{ isSignal: true, alias: "restrictMove", required: false }] }], useTransition: [{ type: i0.Input, args: [{ isSignal: true, alias: "useTransition", required: false }] }], gutterDblClickDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterDblClickDuration", required: false }] }], gutterClick: [{ type: i0.Output, args: ["gutterClick"] }], gutterDblClick: [{ type: i0.Output, args: ["gutterDblClick"] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], transitionEnd: [{ type: i0.Output, args: ["transitionEnd"] }], hostClassesBinding: [{
                 type: HostBinding,
                 args: ['class']
@@ -3335,7 +3335,7 @@ class SplitAreaComponent {
                 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 });
+        ], ngImport: i0, template: "<ng-content></ng-content>\r\n@if (split._isDragging()) {\r\n  <div class=\"as-iframe-fix\"></div>\r\n}\r\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.9", ngImport: i0, type: SplitAreaComponent, decorators: [{
             type: Component,
@@ -3344,7 +3344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             provide: SPLIT_AREA_CONTRACT,
                             useExisting: SplitAreaComponent,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\r\n@if (split._isDragging()) {\r\n  <div class=\"as-iframe-fix\"></div>\r\n}\r\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"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], lockSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockSize", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], hostClassesBinding: [{
                 type: HostBinding,
                 args: ['class']
@@ -4297,11 +4297,11 @@ class CssSheetEditorComponent {
         this.pendingStyleValue = this.valore = newValue;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CssSheetEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CssSheetEditorComponent, isStandalone: true, selector: "wuic-css-sheet-editor", inputs: { visible: "visible", sheets: "sheets", selectedSheetPath: "selectedSheetPath", styleProps: "styleProps", assetsFolder: "assetsFolder" }, outputs: { visibleChange: "visibleChange", applyEditor: "applyEditor" }, usesOnChanges: true, ngImport: i0, template: "<p-dialog [header]=\"'CSS Editor'\" [(visible)]=\"visible\" (visibleChange)=\"visibleChange.emit($event)\" [modal]=\"true\"\n  [closable]=\"true\" [style]=\"{ width: '1100px', maxWidth: '98vw' }\">\n  <div class=\"css-editor-layout\">\n    <div class=\"css-editor-col\">\n      <div class=\"css-editor-row\">\n        <label>File CSS</label>\n        <p-select [options]=\"draftSheets\" optionLabel=\"SheetPath\" optionValue=\"SheetPath\"\n          [(ngModel)]=\"selectedSheetPathDraft\" (ngModelChange)=\"onSelectedSheetChanged()\" appendTo=\"body\"\n          [style]=\"{ width: '100%' }\">\n        </p-select>\n      </div>\n      <div class=\"css-editor-row css-editor-inline\">\n        <input type=\"text\" [(ngModel)]=\"newSheetName\" pattern=\"^[^/\\\\]+$\"\n          [placeholder]=\"'Nuovo file in assets/' + (assetsFolder || '<dash_route>') + ' (solo nome, es. dashboard-custom.css)'\" />\n        <p-button label=\"Crea file\" (onClick)=\"addSheet()\" [disabled]=\"!assetsFolder\"></p-button>\n      </div>\n      @if (!assetsFolder) {\n      <div class=\"css-editor-row\">\n        <small>Salva prima la dashboard per definire il folder (dash_route).</small>\n      </div>\n      }\n      <div class=\"css-editor-row\">\n        <p-button severity=\"danger\" label=\"Rimuovi file selezionato\" (onClick)=\"removeSelectedSheet()\"\n          [disabled]=\"!currentSheet\"></p-button>\n      </div>\n    </div>\n\n    @if (currentSheet) {\n    <div class=\"css-editor-col\">\n      <div class=\"css-editor-row\">\n        <label>Classi</label>\n        <p-select [options]=\"currentSheet?.classes || []\" optionLabel=\"SelectorString\" optionValue=\"SelectorString\"\n          [(ngModel)]=\"selectedClassSelector\" (ngModelChange)=\"onSelectedClassChanged()\" appendTo=\"body\"\n          [style]=\"{ width: '100%' }\">\n        </p-select>\n      </div>\n      <div class=\"css-editor-row css-editor-inline\">\n        <input type=\"text\" [(ngModel)]=\"newClassName\" placeholder=\"Nuova classe (es. card-title)\" />\n        <p-button label=\"Crea classe\" (onClick)=\"addClassToSelectedSheet()\" [disabled]=\"!currentSheet\"></p-button>\n      </div>\n      <div class=\"css-editor-row\">\n        <p-button severity=\"danger\" label=\"Rimuovi classe selezionata\" (onClick)=\"removeSelectedClass()\"\n          [disabled]=\"!currentClass\"></p-button>\n      </div>\n    </div>\n    }\n  </div>\n\n  @if (currentClass) {\n  <div class=\"css-editor-styles\">\n    <div class=\"css-editor-row css-style-row\" style=\"margin-bottom: 8px;\">\n      <p-select [options]=\"styleProps\" optionLabel=\"key\" optionValue=\"key\" [(ngModel)]=\"pendingStyleKey\"\n        (ngModelChange)=\"onPendingStyleKeyChanged()\" appendTo=\"body\" [style]=\"{ width: '260px' }\">\n      </p-select>\n\n      @if (isPropertyDictionary(pendingStyleKey)) {\n      <p-select [options]=\"getPropertyValues(pendingStyleKey)\" [(ngModel)]=\"pendingStyleValue\" appendTo=\"body\"\n        [style]=\"{ width: '320px' }\">\n      </p-select>\n      } @else if (isPropertyColor(pendingStyleKey)) {\n\n      <div class=\"css-style-color-input\">\n        <div class=\"color-editor-root\" [ngStyle]=\"{ '--wuic-color-editor-preview': valore || 'transparent' }\">\n          <p-colorPicker format=\"hsb\" [ngModel]=\"pickerValue\" (ngModelChange)=\"onPendingColorChanged($event)\"\n            appendTo=\"body\">\n          </p-colorPicker>\n        </div>\n        <input type=\"text\" [(ngModel)]=\"pendingStyleValue\" style=\"width: 252px;\" />\n      </div>\n      <div class=\"color-editor-alpha-row\">\n        <label class=\"color-editor-alpha-label\">Alpha</label>\n        <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" [ngModel]=\"alphaValue\"\n          (ngModelChange)=\"onAlphaChange($event)\" />\n        <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\" [ngModel]=\"alphaValue\"\n          (ngModelChange)=\"onAlphaChange($event)\" />\n      </div>\n\n      } @else {\n      <input type=\"text\" [(ngModel)]=\"pendingStyleValue\" style=\"width: 320px;\" />\n      }\n\n      <p-button label=\"Aggiungi propriet\u00E0 corrente\" (onClick)=\"addStyleToSelectedClass()\"\n        [disabled]=\"!currentClass || !pendingStyleKey\"></p-button>\n    </div>\n\n    @for (style of currentClass.Styles; track style; let i = $index) {\n    <div class=\"css-style-row\">\n      <div class=\"css-style-readonly-key\">{{ style.Key }}</div>\n      <div class=\"css-style-readonly-value\">{{ style.Value }}</div>\n\n      <p-button icon=\"pi pi-trash\" severity=\"danger\" [text]=\"true\" (onClick)=\"removeStyle(i)\"></p-button>\n    </div>\n    }\n  </div>\n  }\n\n  <ng-template pTemplate=\"footer\">\n    <p-button label=\"Chiudi\" severity=\"secondary\" (onClick)=\"close()\"></p-button>\n  </ng-template>\n</p-dialog>", styles: [".css-editor-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.css-editor-col{border:1px solid #d0d0d0;border-radius:6px;padding:12px}.css-editor-row{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}.css-editor-inline{flex-direction:row;align-items:center}.css-editor-inline input{flex:1}.css-editor-styles{border:1px solid #d0d0d0;border-radius:6px;padding:12px;max-height:420px;overflow:auto}.css-style-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.css-style-readonly-key{width:260px;min-height:32px;display:flex;align-items:center;padding:0 8px;border:1px solid #d0d0d0;border-radius:4px;background:#f9f9f9;font-family:monospace}.css-style-readonly-value{width:320px;min-height:32px;display:flex;align-items:center;padding:0 8px;border:1px solid #d0d0d0;border-radius:4px;background:#f9f9f9;font-family:monospace}.css-style-color-input{display:flex;align-items:center;gap:8px;width:320px}@media(max-width:1024px){.css-editor-layout{grid-template-columns:1fr}.css-style-row{flex-wrap:wrap}}.color-editor-root{--wuic-color-editor-preview: transparent;border:solid 1px}:host ::ng-deep .color-editor-root .p-colorpicker-preview{background-image:linear-gradient(var(--wuic-color-editor-preview),var(--wuic-color-editor-preview)),linear-gradient(45deg,#d5d9e2 25%,transparent 25%),linear-gradient(-45deg,#d5d9e2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d5d9e2 75%),linear-gradient(-45deg,transparent 75%,#d5d9e2 75%)!important;background-size:10px 10px!important;background-position:0 0,0 5px,5px -5px,-5px 0!important;background-color:transparent!important}.color-editor-alpha-row{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}.color-editor-alpha-label{min-width:2.8rem;font-size:.85rem}.color-editor-alpha-row input[type=range]{flex:1 1 auto}.color-editor-alpha-row input[type=number]{width:4.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i6.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "showTransitionOptions", "hideTransitionOptions", "inline", "format", "tabindex", "inputId", "autoZIndex", "autofocus", "defaultColor", "appendTo", "overlayOptions", "motionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CssSheetEditorComponent, isStandalone: true, selector: "wuic-css-sheet-editor", inputs: { visible: "visible", sheets: "sheets", selectedSheetPath: "selectedSheetPath", styleProps: "styleProps", assetsFolder: "assetsFolder" }, outputs: { visibleChange: "visibleChange", applyEditor: "applyEditor" }, usesOnChanges: true, ngImport: i0, template: "<p-dialog [header]=\"'CSS Editor'\" [(visible)]=\"visible\" (visibleChange)=\"visibleChange.emit($event)\" [modal]=\"true\"\r\n  [closable]=\"true\" [style]=\"{ width: '1100px', maxWidth: '98vw' }\">\r\n  <div class=\"css-editor-layout\">\r\n    <div class=\"css-editor-col\">\r\n      <div class=\"css-editor-row\">\r\n        <label>File CSS</label>\r\n        <p-select [options]=\"draftSheets\" optionLabel=\"SheetPath\" optionValue=\"SheetPath\"\r\n          [(ngModel)]=\"selectedSheetPathDraft\" (ngModelChange)=\"onSelectedSheetChanged()\" appendTo=\"body\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-select>\r\n      </div>\r\n      <div class=\"css-editor-row css-editor-inline\">\r\n        <input type=\"text\" [(ngModel)]=\"newSheetName\" pattern=\"^[^/\\\\]+$\"\r\n          [placeholder]=\"'Nuovo file in assets/' + (assetsFolder || '<dash_route>') + ' (solo nome, es. dashboard-custom.css)'\" />\r\n        <p-button label=\"Crea file\" (onClick)=\"addSheet()\" [disabled]=\"!assetsFolder\"></p-button>\r\n      </div>\r\n      @if (!assetsFolder) {\r\n      <div class=\"css-editor-row\">\r\n        <small>Salva prima la dashboard per definire il folder (dash_route).</small>\r\n      </div>\r\n      }\r\n      <div class=\"css-editor-row\">\r\n        <p-button severity=\"danger\" label=\"Rimuovi file selezionato\" (onClick)=\"removeSelectedSheet()\"\r\n          [disabled]=\"!currentSheet\"></p-button>\r\n      </div>\r\n    </div>\r\n\r\n    @if (currentSheet) {\r\n    <div class=\"css-editor-col\">\r\n      <div class=\"css-editor-row\">\r\n        <label>Classi</label>\r\n        <p-select [options]=\"currentSheet?.classes || []\" optionLabel=\"SelectorString\" optionValue=\"SelectorString\"\r\n          [(ngModel)]=\"selectedClassSelector\" (ngModelChange)=\"onSelectedClassChanged()\" appendTo=\"body\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-select>\r\n      </div>\r\n      <div class=\"css-editor-row css-editor-inline\">\r\n        <input type=\"text\" [(ngModel)]=\"newClassName\" placeholder=\"Nuova classe (es. card-title)\" />\r\n        <p-button label=\"Crea classe\" (onClick)=\"addClassToSelectedSheet()\" [disabled]=\"!currentSheet\"></p-button>\r\n      </div>\r\n      <div class=\"css-editor-row\">\r\n        <p-button severity=\"danger\" label=\"Rimuovi classe selezionata\" (onClick)=\"removeSelectedClass()\"\r\n          [disabled]=\"!currentClass\"></p-button>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  @if (currentClass) {\r\n  <div class=\"css-editor-styles\">\r\n    <div class=\"css-editor-row css-style-row\" style=\"margin-bottom: 8px;\">\r\n      <p-select [options]=\"styleProps\" optionLabel=\"key\" optionValue=\"key\" [(ngModel)]=\"pendingStyleKey\"\r\n        (ngModelChange)=\"onPendingStyleKeyChanged()\" appendTo=\"body\" [style]=\"{ width: '260px' }\">\r\n      </p-select>\r\n\r\n      @if (isPropertyDictionary(pendingStyleKey)) {\r\n      <p-select [options]=\"getPropertyValues(pendingStyleKey)\" [(ngModel)]=\"pendingStyleValue\" appendTo=\"body\"\r\n        [style]=\"{ width: '320px' }\">\r\n      </p-select>\r\n      } @else if (isPropertyColor(pendingStyleKey)) {\r\n\r\n      <div class=\"css-style-color-input\">\r\n        <div class=\"color-editor-root\" [ngStyle]=\"{ '--wuic-color-editor-preview': valore || 'transparent' }\">\r\n          <p-colorPicker format=\"hsb\" [ngModel]=\"pickerValue\" (ngModelChange)=\"onPendingColorChanged($event)\"\r\n            appendTo=\"body\">\r\n          </p-colorPicker>\r\n        </div>\r\n        <input type=\"text\" [(ngModel)]=\"pendingStyleValue\" style=\"width: 252px;\" />\r\n      </div>\r\n      <div class=\"color-editor-alpha-row\">\r\n        <label class=\"color-editor-alpha-label\">Alpha</label>\r\n        <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" [ngModel]=\"alphaValue\"\r\n          (ngModelChange)=\"onAlphaChange($event)\" />\r\n        <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\" [ngModel]=\"alphaValue\"\r\n          (ngModelChange)=\"onAlphaChange($event)\" />\r\n      </div>\r\n\r\n      } @else {\r\n      <input type=\"text\" [(ngModel)]=\"pendingStyleValue\" style=\"width: 320px;\" />\r\n      }\r\n\r\n      <p-button label=\"Aggiungi propriet\u00E0 corrente\" (onClick)=\"addStyleToSelectedClass()\"\r\n        [disabled]=\"!currentClass || !pendingStyleKey\"></p-button>\r\n    </div>\r\n\r\n    @for (style of currentClass.Styles; track style; let i = $index) {\r\n    <div class=\"css-style-row\">\r\n      <div class=\"css-style-readonly-key\">{{ style.Key }}</div>\r\n      <div class=\"css-style-readonly-value\">{{ style.Value }}</div>\r\n\r\n      <p-button icon=\"pi pi-trash\" severity=\"danger\" [text]=\"true\" (onClick)=\"removeStyle(i)\"></p-button>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n\r\n  <ng-template pTemplate=\"footer\">\r\n    <p-button label=\"Chiudi\" severity=\"secondary\" (onClick)=\"close()\"></p-button>\r\n  </ng-template>\r\n</p-dialog>", styles: [".css-editor-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.css-editor-col{border:1px solid #d0d0d0;border-radius:6px;padding:12px}.css-editor-row{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}.css-editor-inline{flex-direction:row;align-items:center}.css-editor-inline input{flex:1}.css-editor-styles{border:1px solid #d0d0d0;border-radius:6px;padding:12px;max-height:420px;overflow:auto}.css-style-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.css-style-readonly-key{width:260px;min-height:32px;display:flex;align-items:center;padding:0 8px;border:1px solid #d0d0d0;border-radius:4px;background:#f9f9f9;font-family:monospace}.css-style-readonly-value{width:320px;min-height:32px;display:flex;align-items:center;padding:0 8px;border:1px solid #d0d0d0;border-radius:4px;background:#f9f9f9;font-family:monospace}.css-style-color-input{display:flex;align-items:center;gap:8px;width:320px}@media(max-width:1024px){.css-editor-layout{grid-template-columns:1fr}.css-style-row{flex-wrap:wrap}}.color-editor-root{--wuic-color-editor-preview: transparent;border:solid 1px}:host ::ng-deep .color-editor-root .p-colorpicker-preview{background-image:linear-gradient(var(--wuic-color-editor-preview),var(--wuic-color-editor-preview)),linear-gradient(45deg,#d5d9e2 25%,transparent 25%),linear-gradient(-45deg,#d5d9e2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d5d9e2 75%),linear-gradient(-45deg,transparent 75%,#d5d9e2 75%)!important;background-size:10px 10px!important;background-position:0 0,0 5px,5px -5px,-5px 0!important;background-color:transparent!important}.color-editor-alpha-row{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}.color-editor-alpha-label{min-width:2.8rem;font-size:.85rem}.color-editor-alpha-row input[type=range]{flex:1 1 auto}.color-editor-alpha-row input[type=number]{width:4.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i6.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "showTransitionOptions", "hideTransitionOptions", "inline", "format", "tabindex", "inputId", "autoZIndex", "autofocus", "defaultColor", "appendTo", "overlayOptions", "motionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CssSheetEditorComponent, decorators: [{
             type: Component,
-            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"] }]
+            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\"\r\n  [closable]=\"true\" [style]=\"{ width: '1100px', maxWidth: '98vw' }\">\r\n  <div class=\"css-editor-layout\">\r\n    <div class=\"css-editor-col\">\r\n      <div class=\"css-editor-row\">\r\n        <label>File CSS</label>\r\n        <p-select [options]=\"draftSheets\" optionLabel=\"SheetPath\" optionValue=\"SheetPath\"\r\n          [(ngModel)]=\"selectedSheetPathDraft\" (ngModelChange)=\"onSelectedSheetChanged()\" appendTo=\"body\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-select>\r\n      </div>\r\n      <div class=\"css-editor-row css-editor-inline\">\r\n        <input type=\"text\" [(ngModel)]=\"newSheetName\" pattern=\"^[^/\\\\]+$\"\r\n          [placeholder]=\"'Nuovo file in assets/' + (assetsFolder || '<dash_route>') + ' (solo nome, es. dashboard-custom.css)'\" />\r\n        <p-button label=\"Crea file\" (onClick)=\"addSheet()\" [disabled]=\"!assetsFolder\"></p-button>\r\n      </div>\r\n      @if (!assetsFolder) {\r\n      <div class=\"css-editor-row\">\r\n        <small>Salva prima la dashboard per definire il folder (dash_route).</small>\r\n      </div>\r\n      }\r\n      <div class=\"css-editor-row\">\r\n        <p-button severity=\"danger\" label=\"Rimuovi file selezionato\" (onClick)=\"removeSelectedSheet()\"\r\n          [disabled]=\"!currentSheet\"></p-button>\r\n      </div>\r\n    </div>\r\n\r\n    @if (currentSheet) {\r\n    <div class=\"css-editor-col\">\r\n      <div class=\"css-editor-row\">\r\n        <label>Classi</label>\r\n        <p-select [options]=\"currentSheet?.classes || []\" optionLabel=\"SelectorString\" optionValue=\"SelectorString\"\r\n          [(ngModel)]=\"selectedClassSelector\" (ngModelChange)=\"onSelectedClassChanged()\" appendTo=\"body\"\r\n          [style]=\"{ width: '100%' }\">\r\n        </p-select>\r\n      </div>\r\n      <div class=\"css-editor-row css-editor-inline\">\r\n        <input type=\"text\" [(ngModel)]=\"newClassName\" placeholder=\"Nuova classe (es. card-title)\" />\r\n        <p-button label=\"Crea classe\" (onClick)=\"addClassToSelectedSheet()\" [disabled]=\"!currentSheet\"></p-button>\r\n      </div>\r\n      <div class=\"css-editor-row\">\r\n        <p-button severity=\"danger\" label=\"Rimuovi classe selezionata\" (onClick)=\"removeSelectedClass()\"\r\n          [disabled]=\"!currentClass\"></p-button>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  @if (currentClass) {\r\n  <div class=\"css-editor-styles\">\r\n    <div class=\"css-editor-row css-style-row\" style=\"margin-bottom: 8px;\">\r\n      <p-select [options]=\"styleProps\" optionLabel=\"key\" optionValue=\"key\" [(ngModel)]=\"pendingStyleKey\"\r\n        (ngModelChange)=\"onPendingStyleKeyChanged()\" appendTo=\"body\" [style]=\"{ width: '260px' }\">\r\n      </p-select>\r\n\r\n      @if (isPropertyDictionary(pendingStyleKey)) {\r\n      <p-select [options]=\"getPropertyValues(pendingStyleKey)\" [(ngModel)]=\"pendingStyleValue\" appendTo=\"body\"\r\n        [style]=\"{ width: '320px' }\">\r\n      </p-select>\r\n      } @else if (isPropertyColor(pendingStyleKey)) {\r\n\r\n      <div class=\"css-style-color-input\">\r\n        <div class=\"color-editor-root\" [ngStyle]=\"{ '--wuic-color-editor-preview': valore || 'transparent' }\">\r\n          <p-colorPicker format=\"hsb\" [ngModel]=\"pickerValue\" (ngModelChange)=\"onPendingColorChanged($event)\"\r\n            appendTo=\"body\">\r\n          </p-colorPicker>\r\n        </div>\r\n        <input type=\"text\" [(ngModel)]=\"pendingStyleValue\" style=\"width: 252px;\" />\r\n      </div>\r\n      <div class=\"color-editor-alpha-row\">\r\n        <label class=\"color-editor-alpha-label\">Alpha</label>\r\n        <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" [ngModel]=\"alphaValue\"\r\n          (ngModelChange)=\"onAlphaChange($event)\" />\r\n        <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\" [ngModel]=\"alphaValue\"\r\n          (ngModelChange)=\"onAlphaChange($event)\" />\r\n      </div>\r\n\r\n      } @else {\r\n      <input type=\"text\" [(ngModel)]=\"pendingStyleValue\" style=\"width: 320px;\" />\r\n      }\r\n\r\n      <p-button label=\"Aggiungi propriet\u00E0 corrente\" (onClick)=\"addStyleToSelectedClass()\"\r\n        [disabled]=\"!currentClass || !pendingStyleKey\"></p-button>\r\n    </div>\r\n\r\n    @for (style of currentClass.Styles; track style; let i = $index) {\r\n    <div class=\"css-style-row\">\r\n      <div class=\"css-style-readonly-key\">{{ style.Key }}</div>\r\n      <div class=\"css-style-readonly-value\">{{ style.Value }}</div>\r\n\r\n      <p-button icon=\"pi pi-trash\" severity=\"danger\" [text]=\"true\" (onClick)=\"removeStyle(i)\"></p-button>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n\r\n  <ng-template pTemplate=\"footer\">\r\n    <p-button label=\"Chiudi\" severity=\"secondary\" (onClick)=\"close()\"></p-button>\r\n  </ng-template>\r\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: [{
@@ -13208,11 +13208,11 @@ Display formula context:
         // return customProps;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DesignerComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: DataProviderService }, { token: MetadataProviderService }, { token: UserInfoService }, { token: i0.ChangeDetectorRef }, { token: TranslationManagerService }, { token: MetadataEditorService }, { token: ChatbotHostRegistryService }, { token: WorkflowRuntimeMetadataService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DesignerComponent, isStandalone: true, selector: "wuic-designer", host: { listeners: { "window:hashchange": "onWindowHashChange()", "window:beforeunload": "onWindowBeforeUnload($event)", "window:keydown": "onWindowKeydown($event)", "window:mouseup": "onWindowMouseup()", "window:touchend": "onWindowTouchend()", "window:keyup": "onWindowKeyup()", "window:change": "onWindowChange()" } }, providers: [TreeDragDropService], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "@if (!noEdit) {\n<div class=\"designer-layout\">\n  <div class=\"designer-toolbar\">\n    <div class=\"designer-current-dashboard\">{{ currentDashboardTitle }}</div>\n\n    <div class=\"designer-toolbar-spacer\"></div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"undo()\" [disabled]=\"!canUndo\">{{ 'designer.undo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"redo()\" [disabled]=\"!canRedo\">{{ 'designer.redo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" data-testid=\"designer-actions-menu-btn\" (click)=\"refreshGraphActionsMenuItems(); graphActionsMenu.toggle($event)\">{{ 'designer.actions_menu' | translate }}</button>\n      <p-menu #graphActionsMenu [popup]=\"true\" [model]=\"graphActionsMenuItems\" appendTo=\"body\"></p-menu>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"openCurrentDashboardInNewTab()\" [disabled]=\"!currentDashboardRoute\">{{\n        'designer.open_current_dashboard' | translate }}</button>\n    </div>\n  </div>\n  <div class=\"designer-main\">\n    <p-splitter [style]=\"{ height: '100%' }\" [panelSizes]=\"[15, 85]\" styleClass=\"designer-main-splitter\">\n      <ng-template pTemplate>\n        <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[35, 65]\"\n          [minSizes]=\"[20, 30]\" styleClass=\"designer-left-splitter\">\n          <ng-template pTemplate>\n            <div class=\"col flex designer-toolbox palette-panel\">\n              <ul class=\"tool-groups\">\n                @for (toolGroup of availableToolGroups; track toolGroup.group) {\n                <li class=\"tool-group-item\">\n                  <div class=\"tool-group-title\">{{ toolGroup.group }}</div>\n                  <ul class=\"tool-group-list\">\n                    @for (tool of toolGroup.tools; track tool) {\n                    <li pDraggable (onDragStart)=\"dragStart(tool)\" (onDragEnd)=\"dragEnd()\" (onDrag)=\"onDrag($event)\"\n                      (dblclick)=\"dropToolAtRoot(tool)\">\n                      <i [ngClass]=\"tool.icon\" [title]=\"tool.name\"></i>\n                    </li>\n                    }\n                  </ul>\n                </li>\n                }\n              </ul>\n            </div>\n          </ng-template>\n          <ng-template pTemplate>\n            <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[68, 32]\"\n              [minSizes]=\"[35, 20]\" styleClass=\"designer-left-bottom-splitter\">\n              <ng-template pTemplate>\n                <div class=\"properties-panel\">\n                  <p-select [style]=\"{width: '100%'}\" [options]=\"flattenedDashboardElements\" [(ngModel)]=\"tool\"\n                    optionLabel=\"uniqueName\" dataKey=\"componentId\" appendTo=\"body\" />\n                  <div class=\"designer-toolbox\">\n\n                    <span style=\"width: 100%;\">\n                      <input type=\"text\" style=\"width: calc(100% - 30px);\" [(ngModel)]=\"propFilter\"\n                        [placeholder]=\"'prop.filter' | translate\" />\n                      <button style=\"width: 25px\" (click)=\"clearPropFilter()\">X</button>\n                    </span>\n\n                    @for (section of getToolPropertySections(tool, propFilter); track section.key) {\n                    <details class=\"prop-section\" [open]=\"section.open\"\n                      (toggle)=\"onPropertySectionToggle(tool, section.key, $event)\">\n                      <summary class=\"prop-section-title\">{{ section.label }}</summary>\n                      <ul class=\"props\">\n                        @for (toolProp of section.props; track toolProp.key) {\n                        <li>\n                          @if (!toolProp.value.hideCaption) {\n                          <span>{{ toolProp.value?.propertyCaption ||\n                            toolProp.key[0].toUpperCase() + toolProp.key.slice(1)\n                            }}</span>\n                          }\n                          <br />\n                          @if (toolProp.value.type == 'button') {\n                          <p-button (click)=\"toolProp.value.callback(tool.inputs, toolProp.key, null, tool)\"\n                            class=\"k-button\" [style]=\"{width: '100%'}\">\n                            {{toolProp.value.propertyCaption}}\n                          </p-button>\n                          }\n                          @if (toolProp.value.type == 'metaEditor' &&\n                          tool.inputs['componentRef']?.value?.component) {\n                          <wuic-metadata-editor [hardcodedDatasource]=\"tool.inputs['componentRef']?.value?.component\"\n                            [saveCallback]=\"metaEditorSave\"></wuic-metadata-editor>\n                          }\n                          @if (toolProp.value.type == 'boolean') {\n                          <input type=\"checkbox\" [(ngModel)]=\"tool.inputs[toolProp.key]\" />\n                          }\n                          @if (toolProp.value.type == 'numberToArray') {\n                          <input style=\"width: 100%;\" type=\"number\" pInputText [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'txt_area') {\n                          <textarea style=\"width: 100%;\" [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\"></textarea>\n                          }\n                          @if (toolProp.value.type == 'string') {\n                          <!-- updateOn:blur come il txt_area sopra: senza, setValue() scatta\n                               A OGNI CARATTERE e buildSerializedDashboardElements ri-serializza\n                               l'intero tree (history da centinaia di KB per tasto, P-D1). -->\n                          <input style=\"width: 100%;\" type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'color') {\n                          <p-colorPicker [ngModel]=\"getDesignerColorPickerHex(tool, toolProp)\"\n                            (ngModelChange)=\"onDesignerColorPickerHexChange($event, tool, toolProp)\" appendTo=\"body\" />\n                          <div class=\"designer-color-alpha-row\">\n                            <span class=\"designer-color-alpha-label\">{{ 'designer.alpha' | translate }}</span>\n                            <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                            <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                          </div>\n                          <input type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'dictionary' && !toolProp.value.async) {\n                          @if (toolProp.key == 'cssFile') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"availableProjectCssFiles\"\n                            [ngModel]=\"tool.inputs[toolProp.key]\" (ngModelChange)=\"onCssFileChanged($event, tool)\" />\n                          } @else if (toolProp.key == 'cssClass') {\n                          <p-multiSelect [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getCssClassOptionsForTool(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"onCssClassChanged($event, tool)\" [filter]=\"true\" [virtualScroll]=\"true\"\n                            [virtualScrollItemSize]=\"38\" scrollHeight=\"260px\" [showToggleAll]=\"false\" display=\"chip\"\n                            [maxSelectedLabels]=\"3\" [selectedItemsLabel]=\"'{0} selected'\">\n                          </p-multiSelect>\n                          } @else if ((tool.name == 'SELECT' || tool.name == 'MULTISELECT' || tool.name == 'UL') &&\n                          (toolProp.key == 'valueField' || toolProp.key == 'textField')) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else if (tool.name == 'LABEL' && toolProp.key == 'displayField') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          }\n                          @if (toolProp.value.type == 'dictionary' && toolProp.value.async) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (tool.name == 'DATAREPEATER' && toolProp.key == 'action' &&\n                          canOpenArchetypeConfigurator(tool)) {\n                          <button style=\"margin-top: 8px;\" (click)=\"openArchetypeConfigurator(tool)\">\n                            {{ 'designer.configure' | translate }} {{ (tool.inputs['action'] | async) || '' }}\n                          </button>\n                          }\n                          @if (toolProp.value.type == 'dropped-component-list') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [placeholder]=\"'select.component' | translate\" [options]=\"elementFilter(toolProp)\"\n                            [ngModel]=\"getDroppedComponentListModel(tool, toolProp)\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" optionLabel=\"uniqueName\"\n                            dataKey=\"uniqueName\" />\n                          }\n                          @if (toolProp.value.type == 'autocomplete') {\n                          <p-autoComplete [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\" [forceSelection]=\"true\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" [suggestions]=\"tool.suggestions\"\n                            [optionLabel]=\"toolProp.value.displayField\" [optionValue]=\"toolProp.value.valueField\"\n                            (completeMethod)=\"search($event, tool, toolProp)\" [dropdown]=\"true\" dropdownMode=\"current\"\n                            [multiple]=\"toolProp.value.multiple\" />\n                          }\n                          @if (toolProp.value.type == 'propertyTree' && shouldShowPropertyTree(tool)) {\n                          <ul>\n                            @for (item of $any(tool.inputs[toolProp.key] | async); track item) {\n                            <li style=\"padding: 0; margin: 0;\">\n                              @if (item.col && tool.inputs['customProps_' + (tool.inputs['action'] | async)])\n                              {\n                              <wuic-field-editor [field]=\"item.col\"\n                                [record]=\"tool.inputs['customProps_' + (tool.inputs['action'] | async)]\"\n                                [metaInfo]=\"tool.inputs['datasource']?.component?.value?.metaInfo\"\n                                [triggerProp]=\"tool.inputs['action']\"></wuic-field-editor>\n                              }\n                            </li>\n                            }\n                          </ul>\n                          }\n                        </li>\n                        }\n                      </ul>\n                    </details>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n              <ng-template pTemplate>\n                <div class=\"hierarchy-panel\">\n                  <div class=\"hierarchy-panel-title\">{{ 'designer.canvas_hierarchy' | translate }}</div>\n                  <div class=\"hierarchy-tree-wrap\">\n                    <p-tree [value]=\"hierarchyTreeNodes\" [draggableNodes]=\"true\" [droppableNodes]=\"true\"\n                      selectionMode=\"single\" [(selection)]=\"hierarchySelection\"\n                      (onNodeSelect)=\"onHierarchyNodeSelect($event)\" draggableScope=\"designer-hierarchy\"\n                      droppableScope=\"designer-hierarchy\" (onNodeDrop)=\"onHierarchyNodeDrop($event)\">\n                      <ng-template let-node pTemplate=\"default\">\n                        <span class=\"hierarchy-node-label\" [class.active]=\"isHierarchyNodeSelected(node)\"\n                          (mouseenter)=\"onHierarchyNodeMouseEnter(node)\" (mouseleave)=\"onHierarchyNodeMouseLeave()\"\n                          (contextmenu)=\"showHierarchyNodeContextMenu($event, node, hierarchyCtxMenu)\">\n                          {{ node.label }}\n                        </span>\n                      </ng-template>\n                    </p-tree>\n                  </div>\n                  <p-contextMenu #hierarchyCtxMenu [model]=\"hierarchyCtxItems\" appendTo=\"body\" />\n                </div>\n              </ng-template>\n            </p-splitter>\n          </ng-template>\n        </p-splitter>\n      </ng-template>\n      <ng-template pTemplate>\n        <div class=\"col dashboard-design\" [class.designer-hide-datasources]=\"hideDatasourcesInCanvas\"\n          [class.designer-snap-grid]=\"snapToGridEnabled\" [style.--wuic-grid-size.px]=\"gridSize\" pDroppable\n          (onDrop)=\"drop($event)\" #canvas (mousedown)=\"onCanvasMouseDown($event)\"\n          (contextmenu)=\"showCtx($event, this)\">\n          <wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n          @if (rubberBandVisible) {\n          <div class=\"designer-selection-rect\" [style.left]=\"rubberBandStyle.left\" [style.top]=\"rubberBandStyle.top\"\n            [style.width]=\"rubberBandStyle.width\" [style.height]=\"rubberBandStyle.height\"></div>\n          }\n          <p-contextMenu [target]=\"canvas\" [model]=\"ctxItems | async\" appendTo=\"body\" />\n        </div>\n      </ng-template>\n    </p-splitter>\n  </div>\n  <div class=\"designer-footer\">\n    <div class=\"designer-footer-label\">{{ 'designer.items' | translate }}:</div>\n    <div class=\"designer-footer-list\">\n      @for (item of droppedDashboardItems; track item.uniqueName) {\n      <button type=\"button\" class=\"designer-footer-item\" [class.active]=\"tool?.uniqueName === item?.uniqueName\"\n        [attr.data-designer-unique-name]=\"item?.uniqueName\" (mouseenter)=\"setFooterHoverHighlight(item)\"\n        (mouseleave)=\"clearFooterHoverHighlight()\" (click)=\"selectDashboardItem(item)\"\n        (contextmenu)=\"showFooterContextMenu($event, item, footerCtxMenu)\">\n        {{ getDroppedDashboardItemLabel(item) }}\n      </button>\n      }\n    </div>\n    <p-contextMenu #footerCtxMenu [model]=\"footerCtxItems\" appendTo=\"body\" />\n  </div>\n</div>\n}\n\n@if (noEdit) {\n<wuic-dashboard [dashboardElements]=\"dashboardElements\" [widgetChrome]=\"dashboardWidgetChrome\"></wuic-dashboard>\n}\n\n<wuic-archetype-configurator [visible]=\"showArchetypeConfigurator\"\n  (visibleChange)=\"onArchetypeConfigVisibleChange($event)\" [archetype]=\"getActiveArchetypeConfig()\"\n  [metaInfo]=\"getArchetypeConfigMetaInfoForTool(archetypeConfigTool)\"\n  [value]=\"getArchetypeConfigValueForTool(archetypeConfigTool)\" (applyConfig)=\"onArchetypeConfigApply($event)\">\n</wuic-archetype-configurator>\n\n<wuic-css-sheet-editor [visible]=\"showCssSheetEditor\" (visibleChange)=\"onCssSheetEditorVisibleChange($event)\"\n  [sheets]=\"dashboardCssSheets\" [selectedSheetPath]=\"selectedCssEditorSheetPath\" [assetsFolder]=\"currentDashboardRoute\"\n  [styleProps]=\"getCssEditorStyleProps()\" (applyEditor)=\"onCssSheetEditorApply($event)\">\n</wuic-css-sheet-editor>\n\n<p-dialog [header]=\"'designer.reopen_dashboard' | translate\" [(visible)]=\"reopenDashboardDialogVisible\" [modal]=\"true\"\n  [closable]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [appendTo]=\"'body'\" [style]=\"{ width: '34rem' }\"\n  (onHide)=\"cancelReopenDashboardDialog()\">\n  <div class=\"route-popup-form\">\n    <label for=\"designer-reopen-select\">{{ 'designer.existing_dashboards' | translate }}</label>\n    <p-select inputId=\"designer-reopen-select\" [options]=\"savedDashboardOptions\" optionLabel=\"label\" optionValue=\"value\"\n      [(ngModel)]=\"reopenDialogSelectedDashboardRoute\" [filter]=\"true\" [showClear]=\"true\" [style]=\"{ width: '100%' }\"\n      appendTo=\"body\" />\n\n    <div class=\"route-popup-actions\">\n      <button type=\"button\" class=\"route-popup-btn\" (click)=\"cancelReopenDashboardDialog()\">{{ 'cancel' | translate\n        }}</button>\n      <button type=\"button\" class=\"route-popup-btn route-popup-btn-primary\" (click)=\"confirmReopenDashboardDialog()\"\n        [disabled]=\"!reopenDialogSelectedDashboardRoute\">{{ 'designer.reopen' | translate }}</button>\n    </div>\n  </div>\n</p-dialog>", styles: [":host{display:block;width:100%;height:100%;min-width:0}.designer-layout{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;width:100%;min-width:0}.designer-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px solid inherit;border-radius:10px;background:transparent;padding:10px 12px;margin-bottom:8px}.designer-current-dashboard{min-width:220px;font-size:.86rem;font-weight:700;color:inherit}.designer-toolbar-spacer{flex:1 1 auto;min-width:16px}.designer-toolbar-menu-group{display:inline-flex}.designer-toolbar-menu-group button{height:32px;border:1px solid #2f67d8;border-radius:6px;background:#2f67d8;color:#fff;padding:0 10px;font-size:.82rem;cursor:pointer}.designer-toolbar-menu-group button[disabled]{opacity:.6;cursor:not-allowed}.designer-main{min-height:0;min-width:0;width:100%;overflow:hidden;direction:ltr}.designer-main-splitter{height:100%;width:100%;min-width:0;direction:ltr}.designer-toolbox{font-size:3rem}.designer-toolbox ul{list-style-type:none;padding:0;margin:0;width:100%}.designer-toolbox li{float:left;margin-left:5px;margin-top:5px}.designer-toolbox .tool-groups{display:block}.designer-toolbox .tool-group-item{float:none;margin-left:0;margin-top:10px;clear:both}.designer-toolbox .tool-group-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin:0 0 4px 6px}.designer-toolbox .tool-group-list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px}.designer-toolbox .tool-group-list li{float:none;margin-left:0;margin-top:0}.designer-toolbox .props{font-size:1rem}.designer-toolbox .props li{float:none;padding-bottom:15px}.designer-toolbox .prop-section{width:100%;border:1px solid inherit;border-radius:6px;margin-top:8px;background:transparent;padding:6px 8px 2px}.designer-toolbox .prop-section-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;color:inherit;margin-bottom:6px}.palette-panel{height:100%;overflow:auto;width:100%}.designer-color-alpha-row{display:flex;align-items:center;gap:8px;margin-top:6px;margin-bottom:6px}.designer-color-alpha-label{font-size:.8rem;min-width:40px}.designer-color-alpha-row input[type=range]{flex:1 1 auto;min-width:90px}.designer-color-alpha-row input[type=number]{width:72px}.properties-panel{height:100%;overflow:hidden;width:100%;display:flex;flex-direction:column;min-height:0;padding-right:10px;padding-left:10px;padding-top:10px}.properties-panel>.designer-toolbox{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}:host ::ng-deep .designer-left-bottom-splitter .p-splitterpanel{min-height:0!important;overflow:hidden!important}.hierarchy-panel{height:100%;width:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:6px}.hierarchy-panel-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#4b5563;margin:0 0 6px}.hierarchy-tree-wrap{flex:1 1 auto;min-height:0;border:1px solid inherit;border-radius:6px;background:transparent;overflow:auto;padding:4px}:host ::ng-deep .hierarchy-tree-wrap .p-tree{border:none;padding:0;height:100%;background:transparent}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content{border:1px solid transparent;border-radius:4px;background:transparent!important;color:inherit!important;padding:0!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight{border-color:transparent!important;background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content:hover{background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label{display:inline-block;border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label:hover{border-color:#94a3b8}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label.active{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight .hierarchy-node-label{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}.designer-hierarchy-node{cursor:pointer;border:1px solid transparent;border-radius:4px;padding:2px 6px;font-size:.82rem;line-height:1.25rem}.designer-hierarchy-node-label{cursor:pointer;display:inline-block;width:100%}.designer-hierarchy-node.active{border-color:#3b82f6;background:#eff6ff;color:#1d4ed8}.designer-footer-item.designer-tree-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px}.dashboard-design{height:100%;min-height:0;min-width:0;width:100%;overflow:auto;direction:ltr;position:relative}.designer-selection-rect{position:absolute;border:1px dashed #3b82f6;background:#3b82f61f;pointer-events:none;z-index:10000}:host ::ng-deep .designer-multi-selected{outline:2px solid #3b82f6!important;outline-offset:1px}:host ::ng-deep .dashboard-design.designer-hide-datasources .datasource-descriptor{display:none!important}.current-dashboard-title{font-weight:600;margin-right:12px}.designer-footer{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid inherit;background:transparent;min-height:36px;flex:0 0 auto;width:100%;overflow:auto}.designer-footer-label{font-size:.85rem;font-weight:600;color:inherit;white-space:nowrap}.designer-footer-list{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%}.designer-footer-item{border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer;white-space:nowrap}.designer-footer-item.active{border-color:#3b82f6;background:transparent;color:#1d4ed8}:host ::ng-deep .designer-footer-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px;box-shadow:inset 0 0 0 1px #3b82f6!important}.route-popup-form{display:flex;flex-direction:column;gap:8px}.route-popup-form label{font-size:.85rem;font-weight:600;color:#2f3f58}.route-popup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.route-popup-btn{border:1px solid inherit;background:transparent;color:inherit;border-radius:6px;padding:7px 12px;font-size:.85rem;cursor:pointer}.route-popup-btn-primary{border-color:#2f67d8;background:#2f67d8;color:#fff}.p-colorpicker{border:1px solid black;border-radius:4px}.dashboard-design.designer-snap-grid{background-image:linear-gradient(to right,rgba(128,128,128,.16) 1px,transparent 1px),linear-gradient(to bottom,rgba(128,128,128,.16) 1px,transparent 1px);background-size:var(--wuic-grid-size, 10px) var(--wuic-grid-size, 10px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i10.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i12.Draggable, selector: "[pDraggable]", inputs: ["pDraggable", "dragEffect", "dragHandle", "pDraggableDisabled"], outputs: ["onDragStart", "onDragEnd", "onDrag"] }, { kind: "directive", type: i12.Droppable, selector: "[pDroppable]", inputs: ["pDroppable", "pDroppableDisabled", "dropEffect"], outputs: ["onDragEnter", "onDragLeave", "onDrop"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i6.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "showTransitionOptions", "hideTransitionOptions", "inline", "format", "tabindex", "inputId", "autoZIndex", "autofocus", "defaultColor", "appendTo", "overlayOptions", "motionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i2$1.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: DashboardComponent, selector: "wuic-dashboard", inputs: ["dashboardElements", "widgetChrome"] }, { kind: "component", type: FieldEditorComponent, selector: "wuic-field-editor", inputs: ["datasource", "record", "field", "metaInfo", "readOnly", "isFilter", "hideLabel", "forceShowLabel", "operator", "nestedIndex", "triggerProp", "tabIndex", "onInlineCellValueChange"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i14.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: MetadataEditorComponent, selector: "wuic-metadata-editor", inputs: ["datasource", "hardcodedDatasource", "saveCallback", "hideReports", "hideRelatedTableActions", "hideRelatedColumnActions"] }, { kind: "ngmodule", type: MenubarModule }, { kind: "component", type: ArchetypeConfiguratorComponent, selector: "wuic-archetype-configurator", inputs: ["visible", "archetype", "metaInfo", "value"], outputs: ["visibleChange", "applyConfig"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i18.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: CssSheetEditorComponent, selector: "wuic-css-sheet-editor", inputs: ["visible", "sheets", "selectedSheetPath", "styleProps", "assetsFolder"], outputs: ["visibleChange", "applyEditor"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i7.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i4$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DesignerComponent, isStandalone: true, selector: "wuic-designer", host: { listeners: { "window:hashchange": "onWindowHashChange()", "window:beforeunload": "onWindowBeforeUnload($event)", "window:keydown": "onWindowKeydown($event)", "window:mouseup": "onWindowMouseup()", "window:touchend": "onWindowTouchend()", "window:keyup": "onWindowKeyup()", "window:change": "onWindowChange()" } }, providers: [TreeDragDropService], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "@if (!noEdit) {\r\n<div class=\"designer-layout\">\r\n  <div class=\"designer-toolbar\">\r\n    <div class=\"designer-current-dashboard\">{{ currentDashboardTitle }}</div>\r\n\r\n    <div class=\"designer-toolbar-spacer\"></div>\r\n\r\n    <div class=\"designer-toolbar-menu-group\">\r\n      <button type=\"button\" (click)=\"undo()\" [disabled]=\"!canUndo\">{{ 'designer.undo' | translate }}</button>\r\n    </div>\r\n\r\n    <div class=\"designer-toolbar-menu-group\">\r\n      <button type=\"button\" (click)=\"redo()\" [disabled]=\"!canRedo\">{{ 'designer.redo' | translate }}</button>\r\n    </div>\r\n\r\n    <div class=\"designer-toolbar-menu-group\">\r\n      <button type=\"button\" data-testid=\"designer-actions-menu-btn\" (click)=\"refreshGraphActionsMenuItems(); graphActionsMenu.toggle($event)\">{{ 'designer.actions_menu' | translate }}</button>\r\n      <p-menu #graphActionsMenu [popup]=\"true\" [model]=\"graphActionsMenuItems\" appendTo=\"body\"></p-menu>\r\n    </div>\r\n\r\n    <div class=\"designer-toolbar-menu-group\">\r\n      <button type=\"button\" (click)=\"openCurrentDashboardInNewTab()\" [disabled]=\"!currentDashboardRoute\">{{\r\n        'designer.open_current_dashboard' | translate }}</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"designer-main\">\r\n    <p-splitter [style]=\"{ height: '100%' }\" [panelSizes]=\"[15, 85]\" styleClass=\"designer-main-splitter\">\r\n      <ng-template pTemplate>\r\n        <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[35, 65]\"\r\n          [minSizes]=\"[20, 30]\" styleClass=\"designer-left-splitter\">\r\n          <ng-template pTemplate>\r\n            <div class=\"col flex designer-toolbox palette-panel\">\r\n              <ul class=\"tool-groups\">\r\n                @for (toolGroup of availableToolGroups; track toolGroup.group) {\r\n                <li class=\"tool-group-item\">\r\n                  <div class=\"tool-group-title\">{{ toolGroup.group }}</div>\r\n                  <ul class=\"tool-group-list\">\r\n                    @for (tool of toolGroup.tools; track tool) {\r\n                    <li pDraggable (onDragStart)=\"dragStart(tool)\" (onDragEnd)=\"dragEnd()\" (onDrag)=\"onDrag($event)\"\r\n                      (dblclick)=\"dropToolAtRoot(tool)\">\r\n                      <i [ngClass]=\"tool.icon\" [title]=\"tool.name\"></i>\r\n                    </li>\r\n                    }\r\n                  </ul>\r\n                </li>\r\n                }\r\n              </ul>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate>\r\n            <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[68, 32]\"\r\n              [minSizes]=\"[35, 20]\" styleClass=\"designer-left-bottom-splitter\">\r\n              <ng-template pTemplate>\r\n                <div class=\"properties-panel\">\r\n                  <p-select [style]=\"{width: '100%'}\" [options]=\"flattenedDashboardElements\" [(ngModel)]=\"tool\"\r\n                    optionLabel=\"uniqueName\" dataKey=\"componentId\" appendTo=\"body\" />\r\n                  <div class=\"designer-toolbox\">\r\n\r\n                    <span style=\"width: 100%;\">\r\n                      <input type=\"text\" style=\"width: calc(100% - 30px);\" [(ngModel)]=\"propFilter\"\r\n                        [placeholder]=\"'prop.filter' | translate\" />\r\n                      <button style=\"width: 25px\" (click)=\"clearPropFilter()\">X</button>\r\n                    </span>\r\n\r\n                    @for (section of getToolPropertySections(tool, propFilter); track section.key) {\r\n                    <details class=\"prop-section\" [open]=\"section.open\"\r\n                      (toggle)=\"onPropertySectionToggle(tool, section.key, $event)\">\r\n                      <summary class=\"prop-section-title\">{{ section.label }}</summary>\r\n                      <ul class=\"props\">\r\n                        @for (toolProp of section.props; track toolProp.key) {\r\n                        <li>\r\n                          @if (!toolProp.value.hideCaption) {\r\n                          <span>{{ toolProp.value?.propertyCaption ||\r\n                            toolProp.key[0].toUpperCase() + toolProp.key.slice(1)\r\n                            }}</span>\r\n                          }\r\n                          <br />\r\n                          @if (toolProp.value.type == 'button') {\r\n                          <p-button (click)=\"toolProp.value.callback(tool.inputs, toolProp.key, null, tool)\"\r\n                            class=\"k-button\" [style]=\"{width: '100%'}\">\r\n                            {{toolProp.value.propertyCaption}}\r\n                          </p-button>\r\n                          }\r\n                          @if (toolProp.value.type == 'metaEditor' &&\r\n                          tool.inputs['componentRef']?.value?.component) {\r\n                          <wuic-metadata-editor [hardcodedDatasource]=\"tool.inputs['componentRef']?.value?.component\"\r\n                            [saveCallback]=\"metaEditorSave\"></wuic-metadata-editor>\r\n                          }\r\n                          @if (toolProp.value.type == 'boolean') {\r\n                          <input type=\"checkbox\" [(ngModel)]=\"tool.inputs[toolProp.key]\" />\r\n                          }\r\n                          @if (toolProp.value.type == 'numberToArray') {\r\n                          <input style=\"width: 100%;\" type=\"number\" pInputText [ngModel]=\"tool.inputs[toolProp.key]\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\r\n                          }\r\n                          @if (toolProp.value.type == 'txt_area') {\r\n                          <textarea style=\"width: 100%;\" [(ngModel)]=\"tool.inputs[toolProp.key]\"\r\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\"></textarea>\r\n                          }\r\n                          @if (toolProp.value.type == 'string') {\r\n                          <!-- updateOn:blur come il txt_area sopra: senza, setValue() scatta\r\n                               A OGNI CARATTERE e buildSerializedDashboardElements ri-serializza\r\n                               l'intero tree (history da centinaia di KB per tasto, P-D1). -->\r\n                          <input style=\"width: 100%;\" type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\r\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\r\n                          }\r\n                          @if (toolProp.value.type == 'color') {\r\n                          <p-colorPicker [ngModel]=\"getDesignerColorPickerHex(tool, toolProp)\"\r\n                            (ngModelChange)=\"onDesignerColorPickerHexChange($event, tool, toolProp)\" appendTo=\"body\" />\r\n                          <div class=\"designer-color-alpha-row\">\r\n                            <span class=\"designer-color-alpha-label\">{{ 'designer.alpha' | translate }}</span>\r\n                            <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\"\r\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\r\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\r\n                            <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\"\r\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\r\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\r\n                          </div>\r\n                          <input type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\r\n                          }\r\n                          @if (toolProp.value.type == 'dictionary' && !toolProp.value.async) {\r\n                          @if (toolProp.key == 'cssFile') {\r\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"availableProjectCssFiles\"\r\n                            [ngModel]=\"tool.inputs[toolProp.key]\" (ngModelChange)=\"onCssFileChanged($event, tool)\" />\r\n                          } @else if (toolProp.key == 'cssClass') {\r\n                          <p-multiSelect [style]=\"{width: '100%'}\" appendTo=\"body\"\r\n                            [options]=\"getCssClassOptionsForTool(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\r\n                            (ngModelChange)=\"onCssClassChanged($event, tool)\" [filter]=\"true\" [virtualScroll]=\"true\"\r\n                            [virtualScrollItemSize]=\"38\" scrollHeight=\"260px\" [showToggleAll]=\"false\" display=\"chip\"\r\n                            [maxSelectedLabels]=\"3\" [selectedItemsLabel]=\"'{0} selected'\">\r\n                          </p-multiSelect>\r\n                          } @else if ((tool.name == 'SELECT' || tool.name == 'MULTISELECT' || tool.name == 'UL') &&\r\n                          (toolProp.key == 'valueField' || toolProp.key == 'textField')) {\r\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\r\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\r\n                          } @else if (tool.name == 'LABEL' && toolProp.key == 'displayField') {\r\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\r\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\r\n                          } @else {\r\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\r\n                            [(ngModel)]=\"tool.inputs[toolProp.key]\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\r\n                          }\r\n                          }\r\n                          @if (toolProp.value.type == 'dictionary' && toolProp.value.async) {\r\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\r\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\r\n                          }\r\n                          @if (tool.name == 'DATAREPEATER' && toolProp.key == 'action' &&\r\n                          canOpenArchetypeConfigurator(tool)) {\r\n                          <button style=\"margin-top: 8px;\" (click)=\"openArchetypeConfigurator(tool)\">\r\n                            {{ 'designer.configure' | translate }} {{ (tool.inputs['action'] | async) || '' }}\r\n                          </button>\r\n                          }\r\n                          @if (toolProp.value.type == 'dropped-component-list') {\r\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\r\n                            [placeholder]=\"'select.component' | translate\" [options]=\"elementFilter(toolProp)\"\r\n                            [ngModel]=\"getDroppedComponentListModel(tool, toolProp)\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" optionLabel=\"uniqueName\"\r\n                            dataKey=\"uniqueName\" />\r\n                          }\r\n                          @if (toolProp.value.type == 'autocomplete') {\r\n                          <p-autoComplete [style]=\"{width: '100%'}\" appendTo=\"body\"\r\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\" [forceSelection]=\"true\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" [suggestions]=\"tool.suggestions\"\r\n                            [optionLabel]=\"toolProp.value.displayField\" [optionValue]=\"toolProp.value.valueField\"\r\n                            (completeMethod)=\"search($event, tool, toolProp)\" [dropdown]=\"true\" dropdownMode=\"current\"\r\n                            [multiple]=\"toolProp.value.multiple\" />\r\n                          }\r\n                          @if (toolProp.value.type == 'propertyTree' && shouldShowPropertyTree(tool)) {\r\n                          <ul>\r\n                            @for (item of $any(tool.inputs[toolProp.key] | async); track item) {\r\n                            <li style=\"padding: 0; margin: 0;\">\r\n                              @if (item.col && tool.inputs['customProps_' + (tool.inputs['action'] | async)])\r\n                              {\r\n                              <wuic-field-editor [field]=\"item.col\"\r\n                                [record]=\"tool.inputs['customProps_' + (tool.inputs['action'] | async)]\"\r\n                                [metaInfo]=\"tool.inputs['datasource']?.component?.value?.metaInfo\"\r\n                                [triggerProp]=\"tool.inputs['action']\"></wuic-field-editor>\r\n                              }\r\n                            </li>\r\n                            }\r\n                          </ul>\r\n                          }\r\n                        </li>\r\n                        }\r\n                      </ul>\r\n                    </details>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </ng-template>\r\n              <ng-template pTemplate>\r\n                <div class=\"hierarchy-panel\">\r\n                  <div class=\"hierarchy-panel-title\">{{ 'designer.canvas_hierarchy' | translate }}</div>\r\n                  <div class=\"hierarchy-tree-wrap\">\r\n                    <p-tree [value]=\"hierarchyTreeNodes\" [draggableNodes]=\"true\" [droppableNodes]=\"true\"\r\n                      selectionMode=\"single\" [(selection)]=\"hierarchySelection\"\r\n                      (onNodeSelect)=\"onHierarchyNodeSelect($event)\" draggableScope=\"designer-hierarchy\"\r\n                      droppableScope=\"designer-hierarchy\" (onNodeDrop)=\"onHierarchyNodeDrop($event)\">\r\n                      <ng-template let-node pTemplate=\"default\">\r\n                        <span class=\"hierarchy-node-label\" [class.active]=\"isHierarchyNodeSelected(node)\"\r\n                          (mouseenter)=\"onHierarchyNodeMouseEnter(node)\" (mouseleave)=\"onHierarchyNodeMouseLeave()\"\r\n                          (contextmenu)=\"showHierarchyNodeContextMenu($event, node, hierarchyCtxMenu)\">\r\n                          {{ node.label }}\r\n                        </span>\r\n                      </ng-template>\r\n                    </p-tree>\r\n                  </div>\r\n                  <p-contextMenu #hierarchyCtxMenu [model]=\"hierarchyCtxItems\" appendTo=\"body\" />\r\n                </div>\r\n              </ng-template>\r\n            </p-splitter>\r\n          </ng-template>\r\n        </p-splitter>\r\n      </ng-template>\r\n      <ng-template pTemplate>\r\n        <div class=\"col dashboard-design\" [class.designer-hide-datasources]=\"hideDatasourcesInCanvas\"\r\n          [class.designer-snap-grid]=\"snapToGridEnabled\" [style.--wuic-grid-size.px]=\"gridSize\" pDroppable\r\n          (onDrop)=\"drop($event)\" #canvas (mousedown)=\"onCanvasMouseDown($event)\"\r\n          (contextmenu)=\"showCtx($event, this)\">\r\n          <wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\r\n          @if (rubberBandVisible) {\r\n          <div class=\"designer-selection-rect\" [style.left]=\"rubberBandStyle.left\" [style.top]=\"rubberBandStyle.top\"\r\n            [style.width]=\"rubberBandStyle.width\" [style.height]=\"rubberBandStyle.height\"></div>\r\n          }\r\n          <p-contextMenu [target]=\"canvas\" [model]=\"ctxItems | async\" appendTo=\"body\" />\r\n        </div>\r\n      </ng-template>\r\n    </p-splitter>\r\n  </div>\r\n  <div class=\"designer-footer\">\r\n    <div class=\"designer-footer-label\">{{ 'designer.items' | translate }}:</div>\r\n    <div class=\"designer-footer-list\">\r\n      @for (item of droppedDashboardItems; track item.uniqueName) {\r\n      <button type=\"button\" class=\"designer-footer-item\" [class.active]=\"tool?.uniqueName === item?.uniqueName\"\r\n        [attr.data-designer-unique-name]=\"item?.uniqueName\" (mouseenter)=\"setFooterHoverHighlight(item)\"\r\n        (mouseleave)=\"clearFooterHoverHighlight()\" (click)=\"selectDashboardItem(item)\"\r\n        (contextmenu)=\"showFooterContextMenu($event, item, footerCtxMenu)\">\r\n        {{ getDroppedDashboardItemLabel(item) }}\r\n      </button>\r\n      }\r\n    </div>\r\n    <p-contextMenu #footerCtxMenu [model]=\"footerCtxItems\" appendTo=\"body\" />\r\n  </div>\r\n</div>\r\n}\r\n\r\n@if (noEdit) {\r\n<wuic-dashboard [dashboardElements]=\"dashboardElements\" [widgetChrome]=\"dashboardWidgetChrome\"></wuic-dashboard>\r\n}\r\n\r\n<wuic-archetype-configurator [visible]=\"showArchetypeConfigurator\"\r\n  (visibleChange)=\"onArchetypeConfigVisibleChange($event)\" [archetype]=\"getActiveArchetypeConfig()\"\r\n  [metaInfo]=\"getArchetypeConfigMetaInfoForTool(archetypeConfigTool)\"\r\n  [value]=\"getArchetypeConfigValueForTool(archetypeConfigTool)\" (applyConfig)=\"onArchetypeConfigApply($event)\">\r\n</wuic-archetype-configurator>\r\n\r\n<wuic-css-sheet-editor [visible]=\"showCssSheetEditor\" (visibleChange)=\"onCssSheetEditorVisibleChange($event)\"\r\n  [sheets]=\"dashboardCssSheets\" [selectedSheetPath]=\"selectedCssEditorSheetPath\" [assetsFolder]=\"currentDashboardRoute\"\r\n  [styleProps]=\"getCssEditorStyleProps()\" (applyEditor)=\"onCssSheetEditorApply($event)\">\r\n</wuic-css-sheet-editor>\r\n\r\n<p-dialog [header]=\"'designer.reopen_dashboard' | translate\" [(visible)]=\"reopenDashboardDialogVisible\" [modal]=\"true\"\r\n  [closable]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [appendTo]=\"'body'\" [style]=\"{ width: '34rem' }\"\r\n  (onHide)=\"cancelReopenDashboardDialog()\">\r\n  <div class=\"route-popup-form\">\r\n    <label for=\"designer-reopen-select\">{{ 'designer.existing_dashboards' | translate }}</label>\r\n    <p-select inputId=\"designer-reopen-select\" [options]=\"savedDashboardOptions\" optionLabel=\"label\" optionValue=\"value\"\r\n      [(ngModel)]=\"reopenDialogSelectedDashboardRoute\" [filter]=\"true\" [showClear]=\"true\" [style]=\"{ width: '100%' }\"\r\n      appendTo=\"body\" />\r\n\r\n    <div class=\"route-popup-actions\">\r\n      <button type=\"button\" class=\"route-popup-btn\" (click)=\"cancelReopenDashboardDialog()\">{{ 'cancel' | translate\r\n        }}</button>\r\n      <button type=\"button\" class=\"route-popup-btn route-popup-btn-primary\" (click)=\"confirmReopenDashboardDialog()\"\r\n        [disabled]=\"!reopenDialogSelectedDashboardRoute\">{{ 'designer.reopen' | translate }}</button>\r\n    </div>\r\n  </div>\r\n</p-dialog>", styles: [":host{display:block;width:100%;height:100%;min-width:0}.designer-layout{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;width:100%;min-width:0}.designer-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px solid inherit;border-radius:10px;background:transparent;padding:10px 12px;margin-bottom:8px}.designer-current-dashboard{min-width:220px;font-size:.86rem;font-weight:700;color:inherit}.designer-toolbar-spacer{flex:1 1 auto;min-width:16px}.designer-toolbar-menu-group{display:inline-flex}.designer-toolbar-menu-group button{height:32px;border:1px solid #2f67d8;border-radius:6px;background:#2f67d8;color:#fff;padding:0 10px;font-size:.82rem;cursor:pointer}.designer-toolbar-menu-group button[disabled]{opacity:.6;cursor:not-allowed}.designer-main{min-height:0;min-width:0;width:100%;overflow:hidden;direction:ltr}.designer-main-splitter{height:100%;width:100%;min-width:0;direction:ltr}.designer-toolbox{font-size:3rem}.designer-toolbox ul{list-style-type:none;padding:0;margin:0;width:100%}.designer-toolbox li{float:left;margin-left:5px;margin-top:5px}.designer-toolbox .tool-groups{display:block}.designer-toolbox .tool-group-item{float:none;margin-left:0;margin-top:10px;clear:both}.designer-toolbox .tool-group-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin:0 0 4px 6px}.designer-toolbox .tool-group-list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px}.designer-toolbox .tool-group-list li{float:none;margin-left:0;margin-top:0}.designer-toolbox .props{font-size:1rem}.designer-toolbox .props li{float:none;padding-bottom:15px}.designer-toolbox .prop-section{width:100%;border:1px solid inherit;border-radius:6px;margin-top:8px;background:transparent;padding:6px 8px 2px}.designer-toolbox .prop-section-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;color:inherit;margin-bottom:6px}.palette-panel{height:100%;overflow:auto;width:100%}.designer-color-alpha-row{display:flex;align-items:center;gap:8px;margin-top:6px;margin-bottom:6px}.designer-color-alpha-label{font-size:.8rem;min-width:40px}.designer-color-alpha-row input[type=range]{flex:1 1 auto;min-width:90px}.designer-color-alpha-row input[type=number]{width:72px}.properties-panel{height:100%;overflow:hidden;width:100%;display:flex;flex-direction:column;min-height:0;padding-right:10px;padding-left:10px;padding-top:10px}.properties-panel>.designer-toolbox{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}:host ::ng-deep .designer-left-bottom-splitter .p-splitterpanel{min-height:0!important;overflow:hidden!important}.hierarchy-panel{height:100%;width:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:6px}.hierarchy-panel-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#4b5563;margin:0 0 6px}.hierarchy-tree-wrap{flex:1 1 auto;min-height:0;border:1px solid inherit;border-radius:6px;background:transparent;overflow:auto;padding:4px}:host ::ng-deep .hierarchy-tree-wrap .p-tree{border:none;padding:0;height:100%;background:transparent}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content{border:1px solid transparent;border-radius:4px;background:transparent!important;color:inherit!important;padding:0!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight{border-color:transparent!important;background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content:hover{background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label{display:inline-block;border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label:hover{border-color:#94a3b8}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label.active{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight .hierarchy-node-label{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}.designer-hierarchy-node{cursor:pointer;border:1px solid transparent;border-radius:4px;padding:2px 6px;font-size:.82rem;line-height:1.25rem}.designer-hierarchy-node-label{cursor:pointer;display:inline-block;width:100%}.designer-hierarchy-node.active{border-color:#3b82f6;background:#eff6ff;color:#1d4ed8}.designer-footer-item.designer-tree-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px}.dashboard-design{height:100%;min-height:0;min-width:0;width:100%;overflow:auto;direction:ltr;position:relative}.designer-selection-rect{position:absolute;border:1px dashed #3b82f6;background:#3b82f61f;pointer-events:none;z-index:10000}:host ::ng-deep .designer-multi-selected{outline:2px solid #3b82f6!important;outline-offset:1px}:host ::ng-deep .dashboard-design.designer-hide-datasources .datasource-descriptor{display:none!important}.current-dashboard-title{font-weight:600;margin-right:12px}.designer-footer{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid inherit;background:transparent;min-height:36px;flex:0 0 auto;width:100%;overflow:auto}.designer-footer-label{font-size:.85rem;font-weight:600;color:inherit;white-space:nowrap}.designer-footer-list{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%}.designer-footer-item{border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer;white-space:nowrap}.designer-footer-item.active{border-color:#3b82f6;background:transparent;color:#1d4ed8}:host ::ng-deep .designer-footer-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px;box-shadow:inset 0 0 0 1px #3b82f6!important}.route-popup-form{display:flex;flex-direction:column;gap:8px}.route-popup-form label{font-size:.85rem;font-weight:600;color:#2f3f58}.route-popup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.route-popup-btn{border:1px solid inherit;background:transparent;color:inherit;border-radius:6px;padding:7px 12px;font-size:.85rem;cursor:pointer}.route-popup-btn-primary{border-color:#2f67d8;background:#2f67d8;color:#fff}.p-colorpicker{border:1px solid black;border-radius:4px}.dashboard-design.designer-snap-grid{background-image:linear-gradient(to right,rgba(128,128,128,.16) 1px,transparent 1px),linear-gradient(to bottom,rgba(128,128,128,.16) 1px,transparent 1px);background-size:var(--wuic-grid-size, 10px) var(--wuic-grid-size, 10px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i10.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i12.Draggable, selector: "[pDraggable]", inputs: ["pDraggable", "dragEffect", "dragHandle", "pDraggableDisabled"], outputs: ["onDragStart", "onDragEnd", "onDrag"] }, { kind: "directive", type: i12.Droppable, selector: "[pDroppable]", inputs: ["pDroppable", "pDroppableDisabled", "dropEffect"], outputs: ["onDragEnter", "onDragLeave", "onDrop"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i6.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "showTransitionOptions", "hideTransitionOptions", "inline", "format", "tabindex", "inputId", "autoZIndex", "autofocus", "defaultColor", "appendTo", "overlayOptions", "motionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i2$1.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: DashboardComponent, selector: "wuic-dashboard", inputs: ["dashboardElements", "widgetChrome"] }, { kind: "component", type: FieldEditorComponent, selector: "wuic-field-editor", inputs: ["datasource", "record", "field", "metaInfo", "readOnly", "isFilter", "hideLabel", "forceShowLabel", "operator", "nestedIndex", "triggerProp", "tabIndex", "onInlineCellValueChange"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i14.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: MetadataEditorComponent, selector: "wuic-metadata-editor", inputs: ["datasource", "hardcodedDatasource", "saveCallback", "hideReports", "hideRelatedTableActions", "hideRelatedColumnActions"] }, { kind: "ngmodule", type: MenubarModule }, { kind: "component", type: ArchetypeConfiguratorComponent, selector: "wuic-archetype-configurator", inputs: ["visible", "archetype", "metaInfo", "value"], outputs: ["visibleChange", "applyConfig"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i18.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: CssSheetEditorComponent, selector: "wuic-css-sheet-editor", inputs: ["visible", "sheets", "selectedSheetPath", "styleProps", "assetsFolder"], outputs: ["visibleChange", "applyEditor"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i7.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i4$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DesignerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wuic-designer', imports: [NgClass, TranslateModule, AsyncPipe, FormsModule, SplitterModule, DragDropModule, SelectModule, ColorPickerModule, AutoCompleteModule, DashboardComponent, FieldEditorComponent, ContextMenuModule, MetadataEditorComponent, MenubarModule, ArchetypeConfiguratorComponent, ButtonModule, MultiSelectModule, CssSheetEditorComponent, MenuModule, DialogModule, TreeModule], providers: [TreeDragDropService], template: "@if (!noEdit) {\n<div class=\"designer-layout\">\n  <div class=\"designer-toolbar\">\n    <div class=\"designer-current-dashboard\">{{ currentDashboardTitle }}</div>\n\n    <div class=\"designer-toolbar-spacer\"></div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"undo()\" [disabled]=\"!canUndo\">{{ 'designer.undo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"redo()\" [disabled]=\"!canRedo\">{{ 'designer.redo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" data-testid=\"designer-actions-menu-btn\" (click)=\"refreshGraphActionsMenuItems(); graphActionsMenu.toggle($event)\">{{ 'designer.actions_menu' | translate }}</button>\n      <p-menu #graphActionsMenu [popup]=\"true\" [model]=\"graphActionsMenuItems\" appendTo=\"body\"></p-menu>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"openCurrentDashboardInNewTab()\" [disabled]=\"!currentDashboardRoute\">{{\n        'designer.open_current_dashboard' | translate }}</button>\n    </div>\n  </div>\n  <div class=\"designer-main\">\n    <p-splitter [style]=\"{ height: '100%' }\" [panelSizes]=\"[15, 85]\" styleClass=\"designer-main-splitter\">\n      <ng-template pTemplate>\n        <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[35, 65]\"\n          [minSizes]=\"[20, 30]\" styleClass=\"designer-left-splitter\">\n          <ng-template pTemplate>\n            <div class=\"col flex designer-toolbox palette-panel\">\n              <ul class=\"tool-groups\">\n                @for (toolGroup of availableToolGroups; track toolGroup.group) {\n                <li class=\"tool-group-item\">\n                  <div class=\"tool-group-title\">{{ toolGroup.group }}</div>\n                  <ul class=\"tool-group-list\">\n                    @for (tool of toolGroup.tools; track tool) {\n                    <li pDraggable (onDragStart)=\"dragStart(tool)\" (onDragEnd)=\"dragEnd()\" (onDrag)=\"onDrag($event)\"\n                      (dblclick)=\"dropToolAtRoot(tool)\">\n                      <i [ngClass]=\"tool.icon\" [title]=\"tool.name\"></i>\n                    </li>\n                    }\n                  </ul>\n                </li>\n                }\n              </ul>\n            </div>\n          </ng-template>\n          <ng-template pTemplate>\n            <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[68, 32]\"\n              [minSizes]=\"[35, 20]\" styleClass=\"designer-left-bottom-splitter\">\n              <ng-template pTemplate>\n                <div class=\"properties-panel\">\n                  <p-select [style]=\"{width: '100%'}\" [options]=\"flattenedDashboardElements\" [(ngModel)]=\"tool\"\n                    optionLabel=\"uniqueName\" dataKey=\"componentId\" appendTo=\"body\" />\n                  <div class=\"designer-toolbox\">\n\n                    <span style=\"width: 100%;\">\n                      <input type=\"text\" style=\"width: calc(100% - 30px);\" [(ngModel)]=\"propFilter\"\n                        [placeholder]=\"'prop.filter' | translate\" />\n                      <button style=\"width: 25px\" (click)=\"clearPropFilter()\">X</button>\n                    </span>\n\n                    @for (section of getToolPropertySections(tool, propFilter); track section.key) {\n                    <details class=\"prop-section\" [open]=\"section.open\"\n                      (toggle)=\"onPropertySectionToggle(tool, section.key, $event)\">\n                      <summary class=\"prop-section-title\">{{ section.label }}</summary>\n                      <ul class=\"props\">\n                        @for (toolProp of section.props; track toolProp.key) {\n                        <li>\n                          @if (!toolProp.value.hideCaption) {\n                          <span>{{ toolProp.value?.propertyCaption ||\n                            toolProp.key[0].toUpperCase() + toolProp.key.slice(1)\n                            }}</span>\n                          }\n                          <br />\n                          @if (toolProp.value.type == 'button') {\n                          <p-button (click)=\"toolProp.value.callback(tool.inputs, toolProp.key, null, tool)\"\n                            class=\"k-button\" [style]=\"{width: '100%'}\">\n                            {{toolProp.value.propertyCaption}}\n                          </p-button>\n                          }\n                          @if (toolProp.value.type == 'metaEditor' &&\n                          tool.inputs['componentRef']?.value?.component) {\n                          <wuic-metadata-editor [hardcodedDatasource]=\"tool.inputs['componentRef']?.value?.component\"\n                            [saveCallback]=\"metaEditorSave\"></wuic-metadata-editor>\n                          }\n                          @if (toolProp.value.type == 'boolean') {\n                          <input type=\"checkbox\" [(ngModel)]=\"tool.inputs[toolProp.key]\" />\n                          }\n                          @if (toolProp.value.type == 'numberToArray') {\n                          <input style=\"width: 100%;\" type=\"number\" pInputText [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'txt_area') {\n                          <textarea style=\"width: 100%;\" [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\"></textarea>\n                          }\n                          @if (toolProp.value.type == 'string') {\n                          <!-- updateOn:blur come il txt_area sopra: senza, setValue() scatta\n                               A OGNI CARATTERE e buildSerializedDashboardElements ri-serializza\n                               l'intero tree (history da centinaia di KB per tasto, P-D1). -->\n                          <input style=\"width: 100%;\" type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'color') {\n                          <p-colorPicker [ngModel]=\"getDesignerColorPickerHex(tool, toolProp)\"\n                            (ngModelChange)=\"onDesignerColorPickerHexChange($event, tool, toolProp)\" appendTo=\"body\" />\n                          <div class=\"designer-color-alpha-row\">\n                            <span class=\"designer-color-alpha-label\">{{ 'designer.alpha' | translate }}</span>\n                            <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                            <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                          </div>\n                          <input type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'dictionary' && !toolProp.value.async) {\n                          @if (toolProp.key == 'cssFile') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"availableProjectCssFiles\"\n                            [ngModel]=\"tool.inputs[toolProp.key]\" (ngModelChange)=\"onCssFileChanged($event, tool)\" />\n                          } @else if (toolProp.key == 'cssClass') {\n                          <p-multiSelect [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getCssClassOptionsForTool(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"onCssClassChanged($event, tool)\" [filter]=\"true\" [virtualScroll]=\"true\"\n                            [virtualScrollItemSize]=\"38\" scrollHeight=\"260px\" [showToggleAll]=\"false\" display=\"chip\"\n                            [maxSelectedLabels]=\"3\" [selectedItemsLabel]=\"'{0} selected'\">\n                          </p-multiSelect>\n                          } @else if ((tool.name == 'SELECT' || tool.name == 'MULTISELECT' || tool.name == 'UL') &&\n                          (toolProp.key == 'valueField' || toolProp.key == 'textField')) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else if (tool.name == 'LABEL' && toolProp.key == 'displayField') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          }\n                          @if (toolProp.value.type == 'dictionary' && toolProp.value.async) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (tool.name == 'DATAREPEATER' && toolProp.key == 'action' &&\n                          canOpenArchetypeConfigurator(tool)) {\n                          <button style=\"margin-top: 8px;\" (click)=\"openArchetypeConfigurator(tool)\">\n                            {{ 'designer.configure' | translate }} {{ (tool.inputs['action'] | async) || '' }}\n                          </button>\n                          }\n                          @if (toolProp.value.type == 'dropped-component-list') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [placeholder]=\"'select.component' | translate\" [options]=\"elementFilter(toolProp)\"\n                            [ngModel]=\"getDroppedComponentListModel(tool, toolProp)\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" optionLabel=\"uniqueName\"\n                            dataKey=\"uniqueName\" />\n                          }\n                          @if (toolProp.value.type == 'autocomplete') {\n                          <p-autoComplete [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\" [forceSelection]=\"true\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" [suggestions]=\"tool.suggestions\"\n                            [optionLabel]=\"toolProp.value.displayField\" [optionValue]=\"toolProp.value.valueField\"\n                            (completeMethod)=\"search($event, tool, toolProp)\" [dropdown]=\"true\" dropdownMode=\"current\"\n                            [multiple]=\"toolProp.value.multiple\" />\n                          }\n                          @if (toolProp.value.type == 'propertyTree' && shouldShowPropertyTree(tool)) {\n                          <ul>\n                            @for (item of $any(tool.inputs[toolProp.key] | async); track item) {\n                            <li style=\"padding: 0; margin: 0;\">\n                              @if (item.col && tool.inputs['customProps_' + (tool.inputs['action'] | async)])\n                              {\n                              <wuic-field-editor [field]=\"item.col\"\n                                [record]=\"tool.inputs['customProps_' + (tool.inputs['action'] | async)]\"\n                                [metaInfo]=\"tool.inputs['datasource']?.component?.value?.metaInfo\"\n                                [triggerProp]=\"tool.inputs['action']\"></wuic-field-editor>\n                              }\n                            </li>\n                            }\n                          </ul>\n                          }\n                        </li>\n                        }\n                      </ul>\n                    </details>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n              <ng-template pTemplate>\n                <div class=\"hierarchy-panel\">\n                  <div class=\"hierarchy-panel-title\">{{ 'designer.canvas_hierarchy' | translate }}</div>\n                  <div class=\"hierarchy-tree-wrap\">\n                    <p-tree [value]=\"hierarchyTreeNodes\" [draggableNodes]=\"true\" [droppableNodes]=\"true\"\n                      selectionMode=\"single\" [(selection)]=\"hierarchySelection\"\n                      (onNodeSelect)=\"onHierarchyNodeSelect($event)\" draggableScope=\"designer-hierarchy\"\n                      droppableScope=\"designer-hierarchy\" (onNodeDrop)=\"onHierarchyNodeDrop($event)\">\n                      <ng-template let-node pTemplate=\"default\">\n                        <span class=\"hierarchy-node-label\" [class.active]=\"isHierarchyNodeSelected(node)\"\n                          (mouseenter)=\"onHierarchyNodeMouseEnter(node)\" (mouseleave)=\"onHierarchyNodeMouseLeave()\"\n                          (contextmenu)=\"showHierarchyNodeContextMenu($event, node, hierarchyCtxMenu)\">\n                          {{ node.label }}\n                        </span>\n                      </ng-template>\n                    </p-tree>\n                  </div>\n                  <p-contextMenu #hierarchyCtxMenu [model]=\"hierarchyCtxItems\" appendTo=\"body\" />\n                </div>\n              </ng-template>\n            </p-splitter>\n          </ng-template>\n        </p-splitter>\n      </ng-template>\n      <ng-template pTemplate>\n        <div class=\"col dashboard-design\" [class.designer-hide-datasources]=\"hideDatasourcesInCanvas\"\n          [class.designer-snap-grid]=\"snapToGridEnabled\" [style.--wuic-grid-size.px]=\"gridSize\" pDroppable\n          (onDrop)=\"drop($event)\" #canvas (mousedown)=\"onCanvasMouseDown($event)\"\n          (contextmenu)=\"showCtx($event, this)\">\n          <wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n          @if (rubberBandVisible) {\n          <div class=\"designer-selection-rect\" [style.left]=\"rubberBandStyle.left\" [style.top]=\"rubberBandStyle.top\"\n            [style.width]=\"rubberBandStyle.width\" [style.height]=\"rubberBandStyle.height\"></div>\n          }\n          <p-contextMenu [target]=\"canvas\" [model]=\"ctxItems | async\" appendTo=\"body\" />\n        </div>\n      </ng-template>\n    </p-splitter>\n  </div>\n  <div class=\"designer-footer\">\n    <div class=\"designer-footer-label\">{{ 'designer.items' | translate }}:</div>\n    <div class=\"designer-footer-list\">\n      @for (item of droppedDashboardItems; track item.uniqueName) {\n      <button type=\"button\" class=\"designer-footer-item\" [class.active]=\"tool?.uniqueName === item?.uniqueName\"\n        [attr.data-designer-unique-name]=\"item?.uniqueName\" (mouseenter)=\"setFooterHoverHighlight(item)\"\n        (mouseleave)=\"clearFooterHoverHighlight()\" (click)=\"selectDashboardItem(item)\"\n        (contextmenu)=\"showFooterContextMenu($event, item, footerCtxMenu)\">\n        {{ getDroppedDashboardItemLabel(item) }}\n      </button>\n      }\n    </div>\n    <p-contextMenu #footerCtxMenu [model]=\"footerCtxItems\" appendTo=\"body\" />\n  </div>\n</div>\n}\n\n@if (noEdit) {\n<wuic-dashboard [dashboardElements]=\"dashboardElements\" [widgetChrome]=\"dashboardWidgetChrome\"></wuic-dashboard>\n}\n\n<wuic-archetype-configurator [visible]=\"showArchetypeConfigurator\"\n  (visibleChange)=\"onArchetypeConfigVisibleChange($event)\" [archetype]=\"getActiveArchetypeConfig()\"\n  [metaInfo]=\"getArchetypeConfigMetaInfoForTool(archetypeConfigTool)\"\n  [value]=\"getArchetypeConfigValueForTool(archetypeConfigTool)\" (applyConfig)=\"onArchetypeConfigApply($event)\">\n</wuic-archetype-configurator>\n\n<wuic-css-sheet-editor [visible]=\"showCssSheetEditor\" (visibleChange)=\"onCssSheetEditorVisibleChange($event)\"\n  [sheets]=\"dashboardCssSheets\" [selectedSheetPath]=\"selectedCssEditorSheetPath\" [assetsFolder]=\"currentDashboardRoute\"\n  [styleProps]=\"getCssEditorStyleProps()\" (applyEditor)=\"onCssSheetEditorApply($event)\">\n</wuic-css-sheet-editor>\n\n<p-dialog [header]=\"'designer.reopen_dashboard' | translate\" [(visible)]=\"reopenDashboardDialogVisible\" [modal]=\"true\"\n  [closable]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [appendTo]=\"'body'\" [style]=\"{ width: '34rem' }\"\n  (onHide)=\"cancelReopenDashboardDialog()\">\n  <div class=\"route-popup-form\">\n    <label for=\"designer-reopen-select\">{{ 'designer.existing_dashboards' | translate }}</label>\n    <p-select inputId=\"designer-reopen-select\" [options]=\"savedDashboardOptions\" optionLabel=\"label\" optionValue=\"value\"\n      [(ngModel)]=\"reopenDialogSelectedDashboardRoute\" [filter]=\"true\" [showClear]=\"true\" [style]=\"{ width: '100%' }\"\n      appendTo=\"body\" />\n\n    <div class=\"route-popup-actions\">\n      <button type=\"button\" class=\"route-popup-btn\" (click)=\"cancelReopenDashboardDialog()\">{{ 'cancel' | translate\n        }}</button>\n      <button type=\"button\" class=\"route-popup-btn route-popup-btn-primary\" (click)=\"confirmReopenDashboardDialog()\"\n        [disabled]=\"!reopenDialogSelectedDashboardRoute\">{{ 'designer.reopen' | translate }}</button>\n    </div>\n  </div>\n</p-dialog>", styles: [":host{display:block;width:100%;height:100%;min-width:0}.designer-layout{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;width:100%;min-width:0}.designer-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px solid inherit;border-radius:10px;background:transparent;padding:10px 12px;margin-bottom:8px}.designer-current-dashboard{min-width:220px;font-size:.86rem;font-weight:700;color:inherit}.designer-toolbar-spacer{flex:1 1 auto;min-width:16px}.designer-toolbar-menu-group{display:inline-flex}.designer-toolbar-menu-group button{height:32px;border:1px solid #2f67d8;border-radius:6px;background:#2f67d8;color:#fff;padding:0 10px;font-size:.82rem;cursor:pointer}.designer-toolbar-menu-group button[disabled]{opacity:.6;cursor:not-allowed}.designer-main{min-height:0;min-width:0;width:100%;overflow:hidden;direction:ltr}.designer-main-splitter{height:100%;width:100%;min-width:0;direction:ltr}.designer-toolbox{font-size:3rem}.designer-toolbox ul{list-style-type:none;padding:0;margin:0;width:100%}.designer-toolbox li{float:left;margin-left:5px;margin-top:5px}.designer-toolbox .tool-groups{display:block}.designer-toolbox .tool-group-item{float:none;margin-left:0;margin-top:10px;clear:both}.designer-toolbox .tool-group-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin:0 0 4px 6px}.designer-toolbox .tool-group-list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px}.designer-toolbox .tool-group-list li{float:none;margin-left:0;margin-top:0}.designer-toolbox .props{font-size:1rem}.designer-toolbox .props li{float:none;padding-bottom:15px}.designer-toolbox .prop-section{width:100%;border:1px solid inherit;border-radius:6px;margin-top:8px;background:transparent;padding:6px 8px 2px}.designer-toolbox .prop-section-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;color:inherit;margin-bottom:6px}.palette-panel{height:100%;overflow:auto;width:100%}.designer-color-alpha-row{display:flex;align-items:center;gap:8px;margin-top:6px;margin-bottom:6px}.designer-color-alpha-label{font-size:.8rem;min-width:40px}.designer-color-alpha-row input[type=range]{flex:1 1 auto;min-width:90px}.designer-color-alpha-row input[type=number]{width:72px}.properties-panel{height:100%;overflow:hidden;width:100%;display:flex;flex-direction:column;min-height:0;padding-right:10px;padding-left:10px;padding-top:10px}.properties-panel>.designer-toolbox{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}:host ::ng-deep .designer-left-bottom-splitter .p-splitterpanel{min-height:0!important;overflow:hidden!important}.hierarchy-panel{height:100%;width:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:6px}.hierarchy-panel-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#4b5563;margin:0 0 6px}.hierarchy-tree-wrap{flex:1 1 auto;min-height:0;border:1px solid inherit;border-radius:6px;background:transparent;overflow:auto;padding:4px}:host ::ng-deep .hierarchy-tree-wrap .p-tree{border:none;padding:0;height:100%;background:transparent}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content{border:1px solid transparent;border-radius:4px;background:transparent!important;color:inherit!important;padding:0!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight{border-color:transparent!important;background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content:hover{background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label{display:inline-block;border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label:hover{border-color:#94a3b8}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label.active{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight .hierarchy-node-label{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}.designer-hierarchy-node{cursor:pointer;border:1px solid transparent;border-radius:4px;padding:2px 6px;font-size:.82rem;line-height:1.25rem}.designer-hierarchy-node-label{cursor:pointer;display:inline-block;width:100%}.designer-hierarchy-node.active{border-color:#3b82f6;background:#eff6ff;color:#1d4ed8}.designer-footer-item.designer-tree-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px}.dashboard-design{height:100%;min-height:0;min-width:0;width:100%;overflow:auto;direction:ltr;position:relative}.designer-selection-rect{position:absolute;border:1px dashed #3b82f6;background:#3b82f61f;pointer-events:none;z-index:10000}:host ::ng-deep .designer-multi-selected{outline:2px solid #3b82f6!important;outline-offset:1px}:host ::ng-deep .dashboard-design.designer-hide-datasources .datasource-descriptor{display:none!important}.current-dashboard-title{font-weight:600;margin-right:12px}.designer-footer{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid inherit;background:transparent;min-height:36px;flex:0 0 auto;width:100%;overflow:auto}.designer-footer-label{font-size:.85rem;font-weight:600;color:inherit;white-space:nowrap}.designer-footer-list{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%}.designer-footer-item{border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer;white-space:nowrap}.designer-footer-item.active{border-color:#3b82f6;background:transparent;color:#1d4ed8}:host ::ng-deep .designer-footer-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px;box-shadow:inset 0 0 0 1px #3b82f6!important}.route-popup-form{display:flex;flex-direction:column;gap:8px}.route-popup-form label{font-size:.85rem;font-weight:600;color:#2f3f58}.route-popup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.route-popup-btn{border:1px solid inherit;background:transparent;color:inherit;border-radius:6px;padding:7px 12px;font-size:.85rem;cursor:pointer}.route-popup-btn-primary{border-color:#2f67d8;background:#2f67d8;color:#fff}.p-colorpicker{border:1px solid black;border-radius:4px}.dashboard-design.designer-snap-grid{background-image:linear-gradient(to right,rgba(128,128,128,.16) 1px,transparent 1px),linear-gradient(to bottom,rgba(128,128,128,.16) 1px,transparent 1px);background-size:var(--wuic-grid-size, 10px) var(--wuic-grid-size, 10px)}\n"] }]
+            args: [{ selector: 'wuic-designer', imports: [NgClass, TranslateModule, AsyncPipe, FormsModule, SplitterModule, DragDropModule, SelectModule, ColorPickerModule, AutoCompleteModule, DashboardComponent, FieldEditorComponent, ContextMenuModule, MetadataEditorComponent, MenubarModule, ArchetypeConfiguratorComponent, ButtonModule, MultiSelectModule, CssSheetEditorComponent, MenuModule, DialogModule, TreeModule], providers: [TreeDragDropService], template: "@if (!noEdit) {\r\n<div class=\"designer-layout\">\r\n  <div class=\"designer-toolbar\">\r\n    <div class=\"designer-current-dashboard\">{{ currentDashboardTitle }}</div>\r\n\r\n    <div class=\"designer-toolbar-spacer\"></div>\r\n\r\n    <div class=\"designer-toolbar-menu-group\">\r\n      <button type=\"button\" (click)=\"undo()\" [disabled]=\"!canUndo\">{{ 'designer.undo' | translate }}</button>\r\n    </div>\r\n\r\n    <div class=\"designer-toolbar-menu-group\">\r\n      <button type=\"button\" (click)=\"redo()\" [disabled]=\"!canRedo\">{{ 'designer.redo' | translate }}</button>\r\n    </div>\r\n\r\n    <div class=\"designer-toolbar-menu-group\">\r\n      <button type=\"button\" data-testid=\"designer-actions-menu-btn\" (click)=\"refreshGraphActionsMenuItems(); graphActionsMenu.toggle($event)\">{{ 'designer.actions_menu' | translate }}</button>\r\n      <p-menu #graphActionsMenu [popup]=\"true\" [model]=\"graphActionsMenuItems\" appendTo=\"body\"></p-menu>\r\n    </div>\r\n\r\n    <div class=\"designer-toolbar-menu-group\">\r\n      <button type=\"button\" (click)=\"openCurrentDashboardInNewTab()\" [disabled]=\"!currentDashboardRoute\">{{\r\n        'designer.open_current_dashboard' | translate }}</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"designer-main\">\r\n    <p-splitter [style]=\"{ height: '100%' }\" [panelSizes]=\"[15, 85]\" styleClass=\"designer-main-splitter\">\r\n      <ng-template pTemplate>\r\n        <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[35, 65]\"\r\n          [minSizes]=\"[20, 30]\" styleClass=\"designer-left-splitter\">\r\n          <ng-template pTemplate>\r\n            <div class=\"col flex designer-toolbox palette-panel\">\r\n              <ul class=\"tool-groups\">\r\n                @for (toolGroup of availableToolGroups; track toolGroup.group) {\r\n                <li class=\"tool-group-item\">\r\n                  <div class=\"tool-group-title\">{{ toolGroup.group }}</div>\r\n                  <ul class=\"tool-group-list\">\r\n                    @for (tool of toolGroup.tools; track tool) {\r\n                    <li pDraggable (onDragStart)=\"dragStart(tool)\" (onDragEnd)=\"dragEnd()\" (onDrag)=\"onDrag($event)\"\r\n                      (dblclick)=\"dropToolAtRoot(tool)\">\r\n                      <i [ngClass]=\"tool.icon\" [title]=\"tool.name\"></i>\r\n                    </li>\r\n                    }\r\n                  </ul>\r\n                </li>\r\n                }\r\n              </ul>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate>\r\n            <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[68, 32]\"\r\n              [minSizes]=\"[35, 20]\" styleClass=\"designer-left-bottom-splitter\">\r\n              <ng-template pTemplate>\r\n                <div class=\"properties-panel\">\r\n                  <p-select [style]=\"{width: '100%'}\" [options]=\"flattenedDashboardElements\" [(ngModel)]=\"tool\"\r\n                    optionLabel=\"uniqueName\" dataKey=\"componentId\" appendTo=\"body\" />\r\n                  <div class=\"designer-toolbox\">\r\n\r\n                    <span style=\"width: 100%;\">\r\n                      <input type=\"text\" style=\"width: calc(100% - 30px);\" [(ngModel)]=\"propFilter\"\r\n                        [placeholder]=\"'prop.filter' | translate\" />\r\n                      <button style=\"width: 25px\" (click)=\"clearPropFilter()\">X</button>\r\n                    </span>\r\n\r\n                    @for (section of getToolPropertySections(tool, propFilter); track section.key) {\r\n                    <details class=\"prop-section\" [open]=\"section.open\"\r\n                      (toggle)=\"onPropertySectionToggle(tool, section.key, $event)\">\r\n                      <summary class=\"prop-section-title\">{{ section.label }}</summary>\r\n                      <ul class=\"props\">\r\n                        @for (toolProp of section.props; track toolProp.key) {\r\n                        <li>\r\n                          @if (!toolProp.value.hideCaption) {\r\n                          <span>{{ toolProp.value?.propertyCaption ||\r\n                            toolProp.key[0].toUpperCase() + toolProp.key.slice(1)\r\n                            }}</span>\r\n                          }\r\n                          <br />\r\n                          @if (toolProp.value.type == 'button') {\r\n                          <p-button (click)=\"toolProp.value.callback(tool.inputs, toolProp.key, null, tool)\"\r\n                            class=\"k-button\" [style]=\"{width: '100%'}\">\r\n                            {{toolProp.value.propertyCaption}}\r\n                          </p-button>\r\n                          }\r\n                          @if (toolProp.value.type == 'metaEditor' &&\r\n                          tool.inputs['componentRef']?.value?.component) {\r\n                          <wuic-metadata-editor [hardcodedDatasource]=\"tool.inputs['componentRef']?.value?.component\"\r\n                            [saveCallback]=\"metaEditorSave\"></wuic-metadata-editor>\r\n                          }\r\n                          @if (toolProp.value.type == 'boolean') {\r\n                          <input type=\"checkbox\" [(ngModel)]=\"tool.inputs[toolProp.key]\" />\r\n                          }\r\n                          @if (toolProp.value.type == 'numberToArray') {\r\n                          <input style=\"width: 100%;\" type=\"number\" pInputText [ngModel]=\"tool.inputs[toolProp.key]\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\r\n                          }\r\n                          @if (toolProp.value.type == 'txt_area') {\r\n                          <textarea style=\"width: 100%;\" [(ngModel)]=\"tool.inputs[toolProp.key]\"\r\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\"></textarea>\r\n                          }\r\n                          @if (toolProp.value.type == 'string') {\r\n                          <!-- updateOn:blur come il txt_area sopra: senza, setValue() scatta\r\n                               A OGNI CARATTERE e buildSerializedDashboardElements ri-serializza\r\n                               l'intero tree (history da centinaia di KB per tasto, P-D1). -->\r\n                          <input style=\"width: 100%;\" type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\r\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\r\n                          }\r\n                          @if (toolProp.value.type == 'color') {\r\n                          <p-colorPicker [ngModel]=\"getDesignerColorPickerHex(tool, toolProp)\"\r\n                            (ngModelChange)=\"onDesignerColorPickerHexChange($event, tool, toolProp)\" appendTo=\"body\" />\r\n                          <div class=\"designer-color-alpha-row\">\r\n                            <span class=\"designer-color-alpha-label\">{{ 'designer.alpha' | translate }}</span>\r\n                            <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\"\r\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\r\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\r\n                            <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\"\r\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\r\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\r\n                          </div>\r\n                          <input type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\r\n                          }\r\n                          @if (toolProp.value.type == 'dictionary' && !toolProp.value.async) {\r\n                          @if (toolProp.key == 'cssFile') {\r\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"availableProjectCssFiles\"\r\n                            [ngModel]=\"tool.inputs[toolProp.key]\" (ngModelChange)=\"onCssFileChanged($event, tool)\" />\r\n                          } @else if (toolProp.key == 'cssClass') {\r\n                          <p-multiSelect [style]=\"{width: '100%'}\" appendTo=\"body\"\r\n                            [options]=\"getCssClassOptionsForTool(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\r\n                            (ngModelChange)=\"onCssClassChanged($event, tool)\" [filter]=\"true\" [virtualScroll]=\"true\"\r\n                            [virtualScrollItemSize]=\"38\" scrollHeight=\"260px\" [showToggleAll]=\"false\" display=\"chip\"\r\n                            [maxSelectedLabels]=\"3\" [selectedItemsLabel]=\"'{0} selected'\">\r\n                          </p-multiSelect>\r\n                          } @else if ((tool.name == 'SELECT' || tool.name == 'MULTISELECT' || tool.name == 'UL') &&\r\n                          (toolProp.key == 'valueField' || toolProp.key == 'textField')) {\r\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\r\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\r\n                          } @else if (tool.name == 'LABEL' && toolProp.key == 'displayField') {\r\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\r\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\r\n                          } @else {\r\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\r\n                            [(ngModel)]=\"tool.inputs[toolProp.key]\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\r\n                          }\r\n                          }\r\n                          @if (toolProp.value.type == 'dictionary' && toolProp.value.async) {\r\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\r\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\r\n                          }\r\n                          @if (tool.name == 'DATAREPEATER' && toolProp.key == 'action' &&\r\n                          canOpenArchetypeConfigurator(tool)) {\r\n                          <button style=\"margin-top: 8px;\" (click)=\"openArchetypeConfigurator(tool)\">\r\n                            {{ 'designer.configure' | translate }} {{ (tool.inputs['action'] | async) || '' }}\r\n                          </button>\r\n                          }\r\n                          @if (toolProp.value.type == 'dropped-component-list') {\r\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\r\n                            [placeholder]=\"'select.component' | translate\" [options]=\"elementFilter(toolProp)\"\r\n                            [ngModel]=\"getDroppedComponentListModel(tool, toolProp)\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" optionLabel=\"uniqueName\"\r\n                            dataKey=\"uniqueName\" />\r\n                          }\r\n                          @if (toolProp.value.type == 'autocomplete') {\r\n                          <p-autoComplete [style]=\"{width: '100%'}\" appendTo=\"body\"\r\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\" [forceSelection]=\"true\"\r\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" [suggestions]=\"tool.suggestions\"\r\n                            [optionLabel]=\"toolProp.value.displayField\" [optionValue]=\"toolProp.value.valueField\"\r\n                            (completeMethod)=\"search($event, tool, toolProp)\" [dropdown]=\"true\" dropdownMode=\"current\"\r\n                            [multiple]=\"toolProp.value.multiple\" />\r\n                          }\r\n                          @if (toolProp.value.type == 'propertyTree' && shouldShowPropertyTree(tool)) {\r\n                          <ul>\r\n                            @for (item of $any(tool.inputs[toolProp.key] | async); track item) {\r\n                            <li style=\"padding: 0; margin: 0;\">\r\n                              @if (item.col && tool.inputs['customProps_' + (tool.inputs['action'] | async)])\r\n                              {\r\n                              <wuic-field-editor [field]=\"item.col\"\r\n                                [record]=\"tool.inputs['customProps_' + (tool.inputs['action'] | async)]\"\r\n                                [metaInfo]=\"tool.inputs['datasource']?.component?.value?.metaInfo\"\r\n                                [triggerProp]=\"tool.inputs['action']\"></wuic-field-editor>\r\n                              }\r\n                            </li>\r\n                            }\r\n                          </ul>\r\n                          }\r\n                        </li>\r\n                        }\r\n                      </ul>\r\n                    </details>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              </ng-template>\r\n              <ng-template pTemplate>\r\n                <div class=\"hierarchy-panel\">\r\n                  <div class=\"hierarchy-panel-title\">{{ 'designer.canvas_hierarchy' | translate }}</div>\r\n                  <div class=\"hierarchy-tree-wrap\">\r\n                    <p-tree [value]=\"hierarchyTreeNodes\" [draggableNodes]=\"true\" [droppableNodes]=\"true\"\r\n                      selectionMode=\"single\" [(selection)]=\"hierarchySelection\"\r\n                      (onNodeSelect)=\"onHierarchyNodeSelect($event)\" draggableScope=\"designer-hierarchy\"\r\n                      droppableScope=\"designer-hierarchy\" (onNodeDrop)=\"onHierarchyNodeDrop($event)\">\r\n                      <ng-template let-node pTemplate=\"default\">\r\n                        <span class=\"hierarchy-node-label\" [class.active]=\"isHierarchyNodeSelected(node)\"\r\n                          (mouseenter)=\"onHierarchyNodeMouseEnter(node)\" (mouseleave)=\"onHierarchyNodeMouseLeave()\"\r\n                          (contextmenu)=\"showHierarchyNodeContextMenu($event, node, hierarchyCtxMenu)\">\r\n                          {{ node.label }}\r\n                        </span>\r\n                      </ng-template>\r\n                    </p-tree>\r\n                  </div>\r\n                  <p-contextMenu #hierarchyCtxMenu [model]=\"hierarchyCtxItems\" appendTo=\"body\" />\r\n                </div>\r\n              </ng-template>\r\n            </p-splitter>\r\n          </ng-template>\r\n        </p-splitter>\r\n      </ng-template>\r\n      <ng-template pTemplate>\r\n        <div class=\"col dashboard-design\" [class.designer-hide-datasources]=\"hideDatasourcesInCanvas\"\r\n          [class.designer-snap-grid]=\"snapToGridEnabled\" [style.--wuic-grid-size.px]=\"gridSize\" pDroppable\r\n          (onDrop)=\"drop($event)\" #canvas (mousedown)=\"onCanvasMouseDown($event)\"\r\n          (contextmenu)=\"showCtx($event, this)\">\r\n          <wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\r\n          @if (rubberBandVisible) {\r\n          <div class=\"designer-selection-rect\" [style.left]=\"rubberBandStyle.left\" [style.top]=\"rubberBandStyle.top\"\r\n            [style.width]=\"rubberBandStyle.width\" [style.height]=\"rubberBandStyle.height\"></div>\r\n          }\r\n          <p-contextMenu [target]=\"canvas\" [model]=\"ctxItems | async\" appendTo=\"body\" />\r\n        </div>\r\n      </ng-template>\r\n    </p-splitter>\r\n  </div>\r\n  <div class=\"designer-footer\">\r\n    <div class=\"designer-footer-label\">{{ 'designer.items' | translate }}:</div>\r\n    <div class=\"designer-footer-list\">\r\n      @for (item of droppedDashboardItems; track item.uniqueName) {\r\n      <button type=\"button\" class=\"designer-footer-item\" [class.active]=\"tool?.uniqueName === item?.uniqueName\"\r\n        [attr.data-designer-unique-name]=\"item?.uniqueName\" (mouseenter)=\"setFooterHoverHighlight(item)\"\r\n        (mouseleave)=\"clearFooterHoverHighlight()\" (click)=\"selectDashboardItem(item)\"\r\n        (contextmenu)=\"showFooterContextMenu($event, item, footerCtxMenu)\">\r\n        {{ getDroppedDashboardItemLabel(item) }}\r\n      </button>\r\n      }\r\n    </div>\r\n    <p-contextMenu #footerCtxMenu [model]=\"footerCtxItems\" appendTo=\"body\" />\r\n  </div>\r\n</div>\r\n}\r\n\r\n@if (noEdit) {\r\n<wuic-dashboard [dashboardElements]=\"dashboardElements\" [widgetChrome]=\"dashboardWidgetChrome\"></wuic-dashboard>\r\n}\r\n\r\n<wuic-archetype-configurator [visible]=\"showArchetypeConfigurator\"\r\n  (visibleChange)=\"onArchetypeConfigVisibleChange($event)\" [archetype]=\"getActiveArchetypeConfig()\"\r\n  [metaInfo]=\"getArchetypeConfigMetaInfoForTool(archetypeConfigTool)\"\r\n  [value]=\"getArchetypeConfigValueForTool(archetypeConfigTool)\" (applyConfig)=\"onArchetypeConfigApply($event)\">\r\n</wuic-archetype-configurator>\r\n\r\n<wuic-css-sheet-editor [visible]=\"showCssSheetEditor\" (visibleChange)=\"onCssSheetEditorVisibleChange($event)\"\r\n  [sheets]=\"dashboardCssSheets\" [selectedSheetPath]=\"selectedCssEditorSheetPath\" [assetsFolder]=\"currentDashboardRoute\"\r\n  [styleProps]=\"getCssEditorStyleProps()\" (applyEditor)=\"onCssSheetEditorApply($event)\">\r\n</wuic-css-sheet-editor>\r\n\r\n<p-dialog [header]=\"'designer.reopen_dashboard' | translate\" [(visible)]=\"reopenDashboardDialogVisible\" [modal]=\"true\"\r\n  [closable]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [appendTo]=\"'body'\" [style]=\"{ width: '34rem' }\"\r\n  (onHide)=\"cancelReopenDashboardDialog()\">\r\n  <div class=\"route-popup-form\">\r\n    <label for=\"designer-reopen-select\">{{ 'designer.existing_dashboards' | translate }}</label>\r\n    <p-select inputId=\"designer-reopen-select\" [options]=\"savedDashboardOptions\" optionLabel=\"label\" optionValue=\"value\"\r\n      [(ngModel)]=\"reopenDialogSelectedDashboardRoute\" [filter]=\"true\" [showClear]=\"true\" [style]=\"{ width: '100%' }\"\r\n      appendTo=\"body\" />\r\n\r\n    <div class=\"route-popup-actions\">\r\n      <button type=\"button\" class=\"route-popup-btn\" (click)=\"cancelReopenDashboardDialog()\">{{ 'cancel' | translate\r\n        }}</button>\r\n      <button type=\"button\" class=\"route-popup-btn route-popup-btn-primary\" (click)=\"confirmReopenDashboardDialog()\"\r\n        [disabled]=\"!reopenDialogSelectedDashboardRoute\">{{ 'designer.reopen' | translate }}</button>\r\n    </div>\r\n  </div>\r\n</p-dialog>", styles: [":host{display:block;width:100%;height:100%;min-width:0}.designer-layout{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;width:100%;min-width:0}.designer-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px solid inherit;border-radius:10px;background:transparent;padding:10px 12px;margin-bottom:8px}.designer-current-dashboard{min-width:220px;font-size:.86rem;font-weight:700;color:inherit}.designer-toolbar-spacer{flex:1 1 auto;min-width:16px}.designer-toolbar-menu-group{display:inline-flex}.designer-toolbar-menu-group button{height:32px;border:1px solid #2f67d8;border-radius:6px;background:#2f67d8;color:#fff;padding:0 10px;font-size:.82rem;cursor:pointer}.designer-toolbar-menu-group button[disabled]{opacity:.6;cursor:not-allowed}.designer-main{min-height:0;min-width:0;width:100%;overflow:hidden;direction:ltr}.designer-main-splitter{height:100%;width:100%;min-width:0;direction:ltr}.designer-toolbox{font-size:3rem}.designer-toolbox ul{list-style-type:none;padding:0;margin:0;width:100%}.designer-toolbox li{float:left;margin-left:5px;margin-top:5px}.designer-toolbox .tool-groups{display:block}.designer-toolbox .tool-group-item{float:none;margin-left:0;margin-top:10px;clear:both}.designer-toolbox .tool-group-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin:0 0 4px 6px}.designer-toolbox .tool-group-list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px}.designer-toolbox .tool-group-list li{float:none;margin-left:0;margin-top:0}.designer-toolbox .props{font-size:1rem}.designer-toolbox .props li{float:none;padding-bottom:15px}.designer-toolbox .prop-section{width:100%;border:1px solid inherit;border-radius:6px;margin-top:8px;background:transparent;padding:6px 8px 2px}.designer-toolbox .prop-section-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;color:inherit;margin-bottom:6px}.palette-panel{height:100%;overflow:auto;width:100%}.designer-color-alpha-row{display:flex;align-items:center;gap:8px;margin-top:6px;margin-bottom:6px}.designer-color-alpha-label{font-size:.8rem;min-width:40px}.designer-color-alpha-row input[type=range]{flex:1 1 auto;min-width:90px}.designer-color-alpha-row input[type=number]{width:72px}.properties-panel{height:100%;overflow:hidden;width:100%;display:flex;flex-direction:column;min-height:0;padding-right:10px;padding-left:10px;padding-top:10px}.properties-panel>.designer-toolbox{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}:host ::ng-deep .designer-left-bottom-splitter .p-splitterpanel{min-height:0!important;overflow:hidden!important}.hierarchy-panel{height:100%;width:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:6px}.hierarchy-panel-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#4b5563;margin:0 0 6px}.hierarchy-tree-wrap{flex:1 1 auto;min-height:0;border:1px solid inherit;border-radius:6px;background:transparent;overflow:auto;padding:4px}:host ::ng-deep .hierarchy-tree-wrap .p-tree{border:none;padding:0;height:100%;background:transparent}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content{border:1px solid transparent;border-radius:4px;background:transparent!important;color:inherit!important;padding:0!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight{border-color:transparent!important;background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content:hover{background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label{display:inline-block;border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label:hover{border-color:#94a3b8}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label.active{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight .hierarchy-node-label{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}.designer-hierarchy-node{cursor:pointer;border:1px solid transparent;border-radius:4px;padding:2px 6px;font-size:.82rem;line-height:1.25rem}.designer-hierarchy-node-label{cursor:pointer;display:inline-block;width:100%}.designer-hierarchy-node.active{border-color:#3b82f6;background:#eff6ff;color:#1d4ed8}.designer-footer-item.designer-tree-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px}.dashboard-design{height:100%;min-height:0;min-width:0;width:100%;overflow:auto;direction:ltr;position:relative}.designer-selection-rect{position:absolute;border:1px dashed #3b82f6;background:#3b82f61f;pointer-events:none;z-index:10000}:host ::ng-deep .designer-multi-selected{outline:2px solid #3b82f6!important;outline-offset:1px}:host ::ng-deep .dashboard-design.designer-hide-datasources .datasource-descriptor{display:none!important}.current-dashboard-title{font-weight:600;margin-right:12px}.designer-footer{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid inherit;background:transparent;min-height:36px;flex:0 0 auto;width:100%;overflow:auto}.designer-footer-label{font-size:.85rem;font-weight:600;color:inherit;white-space:nowrap}.designer-footer-list{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%}.designer-footer-item{border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer;white-space:nowrap}.designer-footer-item.active{border-color:#3b82f6;background:transparent;color:#1d4ed8}:host ::ng-deep .designer-footer-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px;box-shadow:inset 0 0 0 1px #3b82f6!important}.route-popup-form{display:flex;flex-direction:column;gap:8px}.route-popup-form label{font-size:.85rem;font-weight:600;color:#2f3f58}.route-popup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.route-popup-btn{border:1px solid inherit;background:transparent;color:inherit;border-radius:6px;padding:7px 12px;font-size:.85rem;cursor:pointer}.route-popup-btn-primary{border-color:#2f67d8;background:#2f67d8;color:#fff}.p-colorpicker{border:1px solid black;border-radius:4px}.dashboard-design.designer-snap-grid{background-image:linear-gradient(to right,rgba(128,128,128,.16) 1px,transparent 1px),linear-gradient(to bottom,rgba(128,128,128,.16) 1px,transparent 1px);background-size:var(--wuic-grid-size, 10px) var(--wuic-grid-size, 10px)}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: DataProviderService }, { type: MetadataProviderService }, { type: UserInfoService }, { type: i0.ChangeDetectorRef }, { type: TranslationManagerService }, { type: MetadataEditorService }, { type: ChatbotHostRegistryService }, { type: WorkflowRuntimeMetadataService }], propDecorators: { onWindowHashChange: [{
                 type: HostListener,
                 args: ['window:hashchange']
@@ -13240,4 +13240,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }] } });
 
 export { DesignerComponent };
-//# sourceMappingURL=wuic-framework-lib-designer.component-D6cbqNFg.mjs.map
+//# sourceMappingURL=wuic-framework-lib-designer.component-CohHkalb.mjs.map