wuic-framework-lib 1.7.1 → 1.7.3

package/fesm2022/{wuic-framework-lib-chart-list.component-Dq9IEKsY.mjs → wuic-framework-lib-chart-list.component-B7d2AQ3G.mjs}

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, ViewChild, Output, Input, Component } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { W as WtoolboxService, m as WuicClientException, n as WuicErrorCodes, G as GlobalHandler, M as MetadataProviderService, T as TranslationManagerService, U as UserInfoService, A as ArchetypeConfiguratorComponent } from './wuic-framework-lib-wuic-framework-lib-BZZwta8b.mjs';
+import { W as WtoolboxService, m as WuicClientException, n as WuicErrorCodes, G as GlobalHandler, M as MetadataProviderService, T as TranslationManagerService, U as UserInfoService, A as ArchetypeConfiguratorComponent } from './wuic-framework-lib-wuic-framework-lib-54sySY_p.mjs';
 import * as i4 from 'primeng/chart';
 import { ChartModule } from 'primeng/chart';
 import * as i8 from '@ngx-translate/core';
@@ -1357,11 +1357,11 @@ class ChartListComponent {
         this.parentResizeObserver = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartListComponent, deps: [{ token: i1.Title }, { token: i0.ChangeDetectorRef }, { token: i1$1.ActivatedRoute }, { token: TranslationManagerService }, { token: UserInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ChartListComponent, isStandalone: true, selector: "wuic-chart-list", inputs: { hardcodedRoute: "hardcodedRoute", parentRecord: "parentRecord", parentMetaInfo: "parentMetaInfo", datasource: "datasource", hardcodedDatasource: "hardcodedDatasource", hideToolbar: "hideToolbar" }, outputs: { onChartDataSelect: "onChartDataSelect", onChartDrillDown: "onChartDrillDown", onChartDataBound: "onChartDataBound" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chartRef"], descendants: true }, { propertyName: "chartHostRef", first: true, predicate: ["chartHostRef"], descendants: true }], ngImport: i0, template: "@if (chartOptions) {\n  <div class=\"chart-list-root\">\n    @if (!hideToolbar) {\n    <div class=\"chart-list-toolbar\">\n      @if (isAdmin) {\n      <button class=\"p-element p-button p-component\" (click)=\"openConfigPopup()\">{{'chart.settings' | translate}}</button>\n      }\n      <button class=\"p-element p-button p-component\" (click)=\"exportChart()\">{{'chart.export' | translate}}</button>\n      @if (isAdmin) {\n      <button class=\"p-element p-button p-component\" (click)=\"saveChartMetadataPropsBag()\">{{ 'metadata.save_table' | translate }}</button>\n      }\n    </div>\n    }\n\n    <div class=\"chart-list-chart-host\" #chartHostRef [style.height.px]=\"chartHostHeightPx\" [style.max-height.px]=\"chartHostHeightPx\">\n      <p-chart #chartRef [type]=\"chartOptions.type\" [data]=\"data\" [options]=\"chartOptions\" width=\"100%\"\n        height=\"100%\" [responsive]=\"true\" (onDataSelect)=\"drillDown($event)\" />\n    </div>\n  </div>\n\n  <wuic-archetype-configurator\n    [visible]=\"showConfigPopup\"\n    (visibleChange)=\"showConfigPopup = $event\"\n    [archetype]=\"'chart'\"\n    [metaInfo]=\"metaInfo\"\n    [value]=\"getChartConfigValue()\"\n    (applyConfig)=\"onArchetypeConfigApply($event)\">\n  </wuic-archetype-configurator>\n}\n", styles: [":host{display:block;height:100%;min-height:0;overflow:hidden}.chart-list-root{display:flex;flex-direction:column;height:100%;width:100%;min-height:0;overflow:hidden}.chart-list-cutoff{flex:0 0 auto;padding:.5rem 0}.chart-list-toolbar{flex:0 0 auto;padding:.5rem 0;display:flex;gap:.5rem;flex-wrap:wrap}.chart-list-config{flex:0 0 auto;padding:.5rem 0}.chart-list-modal-backdrop{position:fixed;inset:0;background:#0006;z-index:1200;display:flex;align-items:center;justify-content:center;padding:1rem}.chart-list-modal{width:min(900px,100%);max-height:85vh;overflow:auto;background:#fff;color:#111827;border-radius:8px;box-shadow:0 10px 32px #00000040;padding:1rem}.chart-list-modal-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.chart-list-modal-header h4{margin:0}.chart-list-config-row{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.5rem}.chart-list-inline{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.chart-list-inline label{display:inline-flex;align-items:center;gap:.35rem}.chart-list-type-select,.chart-list-inline select,.chart-list-input,.chart-list-input-sm{background:#fff;color:#111827;border:1px solid #d1d5db;border-radius:6px;padding:.35rem .45rem}.chart-list-config-label{font-weight:600;font-size:.9rem}.chart-list-type-select,.chart-list-input,.chart-list-input-sm{width:100%;box-sizing:border-box}.chart-list-input-sm{width:8rem}:host-context(.theme-dark) .chart-list-modal-backdrop{background:#000000a6}:host-context(.theme-dark) .chart-list-modal{background:#111827;color:#e5e7eb;box-shadow:0 10px 32px #0000008c}:host-context(.theme-dark) .chart-list-config-label,:host-context(.theme-dark) .chart-list-inline label{color:#e5e7eb}:host-context(.theme-dark) .chart-list-type-select,:host-context(.theme-dark) .chart-list-inline select,:host-context(.theme-dark) .chart-list-input,:host-context(.theme-dark) .chart-list-input-sm{background:#0f172a;color:#e5e7eb;border-color:#374151}:host-context(.theme-dark) .chart-list-type-select:focus,:host-context(.theme-dark) .chart-list-inline select:focus,:host-context(.theme-dark) .chart-list-input:focus,:host-context(.theme-dark) .chart-list-input-sm:focus{outline:1px solid #60a5fa;outline-offset:0}.chart-list-cutoff-label{display:block;font-weight:600}.chart-list-cutoff-slider{width:100%}.chart-list-chart-host{flex:1 1 auto;min-height:0;overflow:hidden}.chart-list-chart-host p-chart{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: ChartModule }, { kind: "component", type: i4.UIChart, selector: "p-chart", inputs: ["type", "plugins", "width", "height", "responsive", "ariaLabel", "ariaLabelledBy", "data", "options"], outputs: ["onDataSelect"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ArchetypeConfiguratorComponent, selector: "wuic-archetype-configurator", inputs: ["visible", "archetype", "metaInfo", "value"], outputs: ["visibleChange", "applyConfig"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ChartListComponent, isStandalone: true, selector: "wuic-chart-list", inputs: { hardcodedRoute: "hardcodedRoute", parentRecord: "parentRecord", parentMetaInfo: "parentMetaInfo", datasource: "datasource", hardcodedDatasource: "hardcodedDatasource", hideToolbar: "hideToolbar" }, outputs: { onChartDataSelect: "onChartDataSelect", onChartDrillDown: "onChartDrillDown", onChartDataBound: "onChartDataBound" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chartRef"], descendants: true }, { propertyName: "chartHostRef", first: true, predicate: ["chartHostRef"], descendants: true }], ngImport: i0, template: "@if (chartOptions) {\r\n  <div class=\"chart-list-root\">\r\n    @if (!hideToolbar) {\r\n    <div class=\"chart-list-toolbar\">\r\n      @if (isAdmin) {\r\n      <button class=\"p-element p-button p-component\" (click)=\"openConfigPopup()\">{{'chart.settings' | translate}}</button>\r\n      }\r\n      <button class=\"p-element p-button p-component\" (click)=\"exportChart()\">{{'chart.export' | translate}}</button>\r\n      @if (isAdmin) {\r\n      <button class=\"p-element p-button p-component\" (click)=\"saveChartMetadataPropsBag()\">{{ 'metadata.save_table' | translate }}</button>\r\n      }\r\n    </div>\r\n    }\r\n\r\n    <div class=\"chart-list-chart-host\" #chartHostRef [style.height.px]=\"chartHostHeightPx\" [style.max-height.px]=\"chartHostHeightPx\">\r\n      <p-chart #chartRef [type]=\"chartOptions.type\" [data]=\"data\" [options]=\"chartOptions\" width=\"100%\"\r\n        height=\"100%\" [responsive]=\"true\" (onDataSelect)=\"drillDown($event)\" />\r\n    </div>\r\n  </div>\r\n\r\n  <wuic-archetype-configurator\r\n    [visible]=\"showConfigPopup\"\r\n    (visibleChange)=\"showConfigPopup = $event\"\r\n    [archetype]=\"'chart'\"\r\n    [metaInfo]=\"metaInfo\"\r\n    [value]=\"getChartConfigValue()\"\r\n    (applyConfig)=\"onArchetypeConfigApply($event)\">\r\n  </wuic-archetype-configurator>\r\n}\r\n", styles: [":host{display:block;height:100%;min-height:0;overflow:hidden}.chart-list-root{display:flex;flex-direction:column;height:100%;width:100%;min-height:0;overflow:hidden}.chart-list-cutoff{flex:0 0 auto;padding:.5rem 0}.chart-list-toolbar{flex:0 0 auto;padding:.5rem 0;display:flex;gap:.5rem;flex-wrap:wrap}.chart-list-config{flex:0 0 auto;padding:.5rem 0}.chart-list-modal-backdrop{position:fixed;inset:0;background:#0006;z-index:1200;display:flex;align-items:center;justify-content:center;padding:1rem}.chart-list-modal{width:min(900px,100%);max-height:85vh;overflow:auto;background:#fff;color:#111827;border-radius:8px;box-shadow:0 10px 32px #00000040;padding:1rem}.chart-list-modal-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.chart-list-modal-header h4{margin:0}.chart-list-config-row{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.5rem}.chart-list-inline{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.chart-list-inline label{display:inline-flex;align-items:center;gap:.35rem}.chart-list-type-select,.chart-list-inline select,.chart-list-input,.chart-list-input-sm{background:#fff;color:#111827;border:1px solid #d1d5db;border-radius:6px;padding:.35rem .45rem}.chart-list-config-label{font-weight:600;font-size:.9rem}.chart-list-type-select,.chart-list-input,.chart-list-input-sm{width:100%;box-sizing:border-box}.chart-list-input-sm{width:8rem}:host-context(.theme-dark) .chart-list-modal-backdrop{background:#000000a6}:host-context(.theme-dark) .chart-list-modal{background:#111827;color:#e5e7eb;box-shadow:0 10px 32px #0000008c}:host-context(.theme-dark) .chart-list-config-label,:host-context(.theme-dark) .chart-list-inline label{color:#e5e7eb}:host-context(.theme-dark) .chart-list-type-select,:host-context(.theme-dark) .chart-list-inline select,:host-context(.theme-dark) .chart-list-input,:host-context(.theme-dark) .chart-list-input-sm{background:#0f172a;color:#e5e7eb;border-color:#374151}:host-context(.theme-dark) .chart-list-type-select:focus,:host-context(.theme-dark) .chart-list-inline select:focus,:host-context(.theme-dark) .chart-list-input:focus,:host-context(.theme-dark) .chart-list-input-sm:focus{outline:1px solid #60a5fa;outline-offset:0}.chart-list-cutoff-label{display:block;font-weight:600}.chart-list-cutoff-slider{width:100%}.chart-list-chart-host{flex:1 1 auto;min-height:0;overflow:hidden}.chart-list-chart-host p-chart{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: ChartModule }, { kind: "component", type: i4.UIChart, selector: "p-chart", inputs: ["type", "plugins", "width", "height", "responsive", "ariaLabel", "ariaLabelledBy", "data", "options"], outputs: ["onDataSelect"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ArchetypeConfiguratorComponent, selector: "wuic-archetype-configurator", inputs: ["visible", "archetype", "metaInfo", "value"], outputs: ["visibleChange", "applyConfig"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wuic-chart-list', imports: [ChartModule, TranslateModule, ArchetypeConfiguratorComponent], template: "@if (chartOptions) {\n  <div class=\"chart-list-root\">\n    @if (!hideToolbar) {\n    <div class=\"chart-list-toolbar\">\n      @if (isAdmin) {\n      <button class=\"p-element p-button p-component\" (click)=\"openConfigPopup()\">{{'chart.settings' | translate}}</button>\n      }\n      <button class=\"p-element p-button p-component\" (click)=\"exportChart()\">{{'chart.export' | translate}}</button>\n      @if (isAdmin) {\n      <button class=\"p-element p-button p-component\" (click)=\"saveChartMetadataPropsBag()\">{{ 'metadata.save_table' | translate }}</button>\n      }\n    </div>\n    }\n\n    <div class=\"chart-list-chart-host\" #chartHostRef [style.height.px]=\"chartHostHeightPx\" [style.max-height.px]=\"chartHostHeightPx\">\n      <p-chart #chartRef [type]=\"chartOptions.type\" [data]=\"data\" [options]=\"chartOptions\" width=\"100%\"\n        height=\"100%\" [responsive]=\"true\" (onDataSelect)=\"drillDown($event)\" />\n    </div>\n  </div>\n\n  <wuic-archetype-configurator\n    [visible]=\"showConfigPopup\"\n    (visibleChange)=\"showConfigPopup = $event\"\n    [archetype]=\"'chart'\"\n    [metaInfo]=\"metaInfo\"\n    [value]=\"getChartConfigValue()\"\n    (applyConfig)=\"onArchetypeConfigApply($event)\">\n  </wuic-archetype-configurator>\n}\n", styles: [":host{display:block;height:100%;min-height:0;overflow:hidden}.chart-list-root{display:flex;flex-direction:column;height:100%;width:100%;min-height:0;overflow:hidden}.chart-list-cutoff{flex:0 0 auto;padding:.5rem 0}.chart-list-toolbar{flex:0 0 auto;padding:.5rem 0;display:flex;gap:.5rem;flex-wrap:wrap}.chart-list-config{flex:0 0 auto;padding:.5rem 0}.chart-list-modal-backdrop{position:fixed;inset:0;background:#0006;z-index:1200;display:flex;align-items:center;justify-content:center;padding:1rem}.chart-list-modal{width:min(900px,100%);max-height:85vh;overflow:auto;background:#fff;color:#111827;border-radius:8px;box-shadow:0 10px 32px #00000040;padding:1rem}.chart-list-modal-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.chart-list-modal-header h4{margin:0}.chart-list-config-row{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.5rem}.chart-list-inline{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.chart-list-inline label{display:inline-flex;align-items:center;gap:.35rem}.chart-list-type-select,.chart-list-inline select,.chart-list-input,.chart-list-input-sm{background:#fff;color:#111827;border:1px solid #d1d5db;border-radius:6px;padding:.35rem .45rem}.chart-list-config-label{font-weight:600;font-size:.9rem}.chart-list-type-select,.chart-list-input,.chart-list-input-sm{width:100%;box-sizing:border-box}.chart-list-input-sm{width:8rem}:host-context(.theme-dark) .chart-list-modal-backdrop{background:#000000a6}:host-context(.theme-dark) .chart-list-modal{background:#111827;color:#e5e7eb;box-shadow:0 10px 32px #0000008c}:host-context(.theme-dark) .chart-list-config-label,:host-context(.theme-dark) .chart-list-inline label{color:#e5e7eb}:host-context(.theme-dark) .chart-list-type-select,:host-context(.theme-dark) .chart-list-inline select,:host-context(.theme-dark) .chart-list-input,:host-context(.theme-dark) .chart-list-input-sm{background:#0f172a;color:#e5e7eb;border-color:#374151}:host-context(.theme-dark) .chart-list-type-select:focus,:host-context(.theme-dark) .chart-list-inline select:focus,:host-context(.theme-dark) .chart-list-input:focus,:host-context(.theme-dark) .chart-list-input-sm:focus{outline:1px solid #60a5fa;outline-offset:0}.chart-list-cutoff-label{display:block;font-weight:600}.chart-list-cutoff-slider{width:100%}.chart-list-chart-host{flex:1 1 auto;min-height:0;overflow:hidden}.chart-list-chart-host p-chart{display:block;height:100%}\n"] }]
+            args: [{ selector: 'wuic-chart-list', imports: [ChartModule, TranslateModule, ArchetypeConfiguratorComponent], template: "@if (chartOptions) {\r\n  <div class=\"chart-list-root\">\r\n    @if (!hideToolbar) {\r\n    <div class=\"chart-list-toolbar\">\r\n      @if (isAdmin) {\r\n      <button class=\"p-element p-button p-component\" (click)=\"openConfigPopup()\">{{'chart.settings' | translate}}</button>\r\n      }\r\n      <button class=\"p-element p-button p-component\" (click)=\"exportChart()\">{{'chart.export' | translate}}</button>\r\n      @if (isAdmin) {\r\n      <button class=\"p-element p-button p-component\" (click)=\"saveChartMetadataPropsBag()\">{{ 'metadata.save_table' | translate }}</button>\r\n      }\r\n    </div>\r\n    }\r\n\r\n    <div class=\"chart-list-chart-host\" #chartHostRef [style.height.px]=\"chartHostHeightPx\" [style.max-height.px]=\"chartHostHeightPx\">\r\n      <p-chart #chartRef [type]=\"chartOptions.type\" [data]=\"data\" [options]=\"chartOptions\" width=\"100%\"\r\n        height=\"100%\" [responsive]=\"true\" (onDataSelect)=\"drillDown($event)\" />\r\n    </div>\r\n  </div>\r\n\r\n  <wuic-archetype-configurator\r\n    [visible]=\"showConfigPopup\"\r\n    (visibleChange)=\"showConfigPopup = $event\"\r\n    [archetype]=\"'chart'\"\r\n    [metaInfo]=\"metaInfo\"\r\n    [value]=\"getChartConfigValue()\"\r\n    (applyConfig)=\"onArchetypeConfigApply($event)\">\r\n  </wuic-archetype-configurator>\r\n}\r\n", styles: [":host{display:block;height:100%;min-height:0;overflow:hidden}.chart-list-root{display:flex;flex-direction:column;height:100%;width:100%;min-height:0;overflow:hidden}.chart-list-cutoff{flex:0 0 auto;padding:.5rem 0}.chart-list-toolbar{flex:0 0 auto;padding:.5rem 0;display:flex;gap:.5rem;flex-wrap:wrap}.chart-list-config{flex:0 0 auto;padding:.5rem 0}.chart-list-modal-backdrop{position:fixed;inset:0;background:#0006;z-index:1200;display:flex;align-items:center;justify-content:center;padding:1rem}.chart-list-modal{width:min(900px,100%);max-height:85vh;overflow:auto;background:#fff;color:#111827;border-radius:8px;box-shadow:0 10px 32px #00000040;padding:1rem}.chart-list-modal-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.chart-list-modal-header h4{margin:0}.chart-list-config-row{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.5rem}.chart-list-inline{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.chart-list-inline label{display:inline-flex;align-items:center;gap:.35rem}.chart-list-type-select,.chart-list-inline select,.chart-list-input,.chart-list-input-sm{background:#fff;color:#111827;border:1px solid #d1d5db;border-radius:6px;padding:.35rem .45rem}.chart-list-config-label{font-weight:600;font-size:.9rem}.chart-list-type-select,.chart-list-input,.chart-list-input-sm{width:100%;box-sizing:border-box}.chart-list-input-sm{width:8rem}:host-context(.theme-dark) .chart-list-modal-backdrop{background:#000000a6}:host-context(.theme-dark) .chart-list-modal{background:#111827;color:#e5e7eb;box-shadow:0 10px 32px #0000008c}:host-context(.theme-dark) .chart-list-config-label,:host-context(.theme-dark) .chart-list-inline label{color:#e5e7eb}:host-context(.theme-dark) .chart-list-type-select,:host-context(.theme-dark) .chart-list-inline select,:host-context(.theme-dark) .chart-list-input,:host-context(.theme-dark) .chart-list-input-sm{background:#0f172a;color:#e5e7eb;border-color:#374151}:host-context(.theme-dark) .chart-list-type-select:focus,:host-context(.theme-dark) .chart-list-inline select:focus,:host-context(.theme-dark) .chart-list-input:focus,:host-context(.theme-dark) .chart-list-input-sm:focus{outline:1px solid #60a5fa;outline-offset:0}.chart-list-cutoff-label{display:block;font-weight:600}.chart-list-cutoff-slider{width:100%}.chart-list-chart-host{flex:1 1 auto;min-height:0;overflow:hidden}.chart-list-chart-host p-chart{display:block;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1.Title }, { type: i0.ChangeDetectorRef }, { type: i1$1.ActivatedRoute }, { type: TranslationManagerService }, { type: UserInfoService }], propDecorators: { hardcodedRoute: [{
                 type: Input
             }], parentRecord: [{
@@ -1389,4 +1389,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }] } });
 
 export { ChartListComponent };
-//# sourceMappingURL=wuic-framework-lib-chart-list.component-Dq9IEKsY.mjs.map
+//# sourceMappingURL=wuic-framework-lib-chart-list.component-B7d2AQ3G.mjs.map

package/fesm2022/{wuic-framework-lib-code-editor.component-B6IpTSo8.mjs → wuic-framework-lib-code-editor.component-Bx_fV1X1.mjs}

@@ -6,7 +6,7 @@ import * as i1$1 from '@materia-ui/ngx-monaco-editor';
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
 import { filter, take } from 'rxjs/operators';
 import { Emitter } from 'monaco-editor/esm/vs/base/common/event';
-import { W as WtoolboxService, M as MetadataProviderService, g as MetadatiColonna, o as MetaInfo, U as UserInfoService, h as DataProviderService } from './wuic-framework-lib-wuic-framework-lib-BZZwta8b.mjs';
+import { W as WtoolboxService, M as MetadataProviderService, g as MetadatiColonna, o as MetaInfo, U as UserInfoService, h as DataProviderService } from './wuic-framework-lib-wuic-framework-lib-54sySY_p.mjs';
 import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
 import * as i14 from 'primeng/contextmenu';
 import { ContextMenuModule } from 'primeng/contextmenu';
@@ -2698,11 +2698,11 @@ class JsonSchemaTreeEditorComponent {
         return String(propSchema?.description || '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: JsonSchemaTreeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: JsonSchemaTreeEditorComponent, isStandalone: true, selector: "wuic-json-schema-tree-editor", inputs: { schema: "schema", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- Editor \"a struttura\": ricorsione via ng-template (nessun self-import). -->\n<ng-template #objectEditor let-ctx>\n  @for (row of rows(ctx.schema, ctx.obj); track row.key) {\n    <div class=\"jste-row\" [class.jste-row-object]=\"row.kind === 'object'\">\n      <div class=\"jste-row-head\">\n        <span class=\"jste-key\" [title]=\"hint(row.schema)\">{{ row.key }}</span>\n\n        @switch (row.kind) {\n          @case ('const') {\n            <span class=\"jste-const\">{{ ctx.obj[row.key] }}</span>\n          }\n          @case ('enum') {\n            <select class=\"jste-input\" [ngModel]=\"ctx.obj[row.key]\"\n              (ngModelChange)=\"setProp(ctx.obj, row.key, $event)\">\n              @for (opt of row.schema.enum; track opt) {\n                <option [ngValue]=\"opt\">{{ opt }}</option>\n              }\n            </select>\n          }\n          @case ('boolean') {\n            <input type=\"checkbox\" [ngModel]=\"ctx.obj[row.key]\"\n              (ngModelChange)=\"setProp(ctx.obj, row.key, $event)\" />\n          }\n          @case ('number') {\n            <input class=\"jste-input jste-number\" type=\"number\" step=\"any\"\n              [min]=\"row.schema.minimum\" [max]=\"row.schema.maximum\"\n              [ngModel]=\"ctx.obj[row.key]\"\n              (ngModelChange)=\"setNumberProp(ctx.obj, row.key, $event)\" />\n          }\n          @case ('color') {\n            <input class=\"jste-color\" type=\"color\" [ngModel]=\"ctx.obj[row.key]\"\n              (ngModelChange)=\"setProp(ctx.obj, row.key, $event)\" />\n            <span class=\"jste-const\">{{ ctx.obj[row.key] }}</span>\n          }\n          @case ('vector') {\n            <span class=\"jste-vector\">\n              @for (component of ctx.obj[row.key]; track $index) {\n                <input class=\"jste-input jste-number\" type=\"number\" step=\"any\"\n                  [ngModel]=\"ctx.obj[row.key][$index]\"\n                  (ngModelChange)=\"setVectorItem(ctx.obj[row.key], $index, $event)\" />\n              }\n            </span>\n          }\n          @case ('text') {\n            <input class=\"jste-input\" type=\"text\" [ngModel]=\"ctx.obj[row.key]\"\n              (ngModelChange)=\"setProp(ctx.obj, row.key, $event)\" />\n          }\n        }\n\n        @if (!row.required) {\n          <button type=\"button\" class=\"jste-btn jste-remove\" (click)=\"removeProp(ctx.obj, row.key)\"\n            title=\"Rimuovi\">\n            <i class=\"pi pi-times\"></i>\n          </button>\n        }\n      </div>\n\n      @if (row.kind === 'object') {\n        <div class=\"jste-children\">\n          <ng-container *ngTemplateOutlet=\"objectEditor; context: { $implicit: { schema: row.schema, obj: ctx.obj[row.key] } }\"></ng-container>\n        </div>\n      }\n      @if (row.kind === 'array') {\n        <div class=\"jste-children\">\n          @for (item of ctx.obj[row.key]; track $index) {\n            <div class=\"jste-row-head\">\n              <span class=\"jste-key\">[{{ $index }}]</span>\n              @if (row.schema.items?.type === 'object') {\n                <ng-container *ngTemplateOutlet=\"objectEditor; context: { $implicit: { schema: row.schema.items, obj: ctx.obj[row.key][$index] } }\"></ng-container>\n              } @else if (row.schema.items?.type === 'number' || row.schema.items?.type === 'integer') {\n                <input class=\"jste-input jste-number\" type=\"number\" step=\"any\"\n                  [ngModel]=\"ctx.obj[row.key][$index]\"\n                  (ngModelChange)=\"setVectorItem(ctx.obj[row.key], $index, $event)\" />\n              } @else {\n                <input class=\"jste-input\" type=\"text\" [ngModel]=\"ctx.obj[row.key][$index]\"\n                  (ngModelChange)=\"setProp(ctx.obj[row.key], $index, $event)\" />\n              }\n              <button type=\"button\" class=\"jste-btn jste-remove\" (click)=\"removeArrayItem(ctx.obj[row.key], $index)\">\n                <i class=\"pi pi-times\"></i>\n              </button>\n            </div>\n          }\n          <button type=\"button\" class=\"jste-btn jste-add-item\" (click)=\"addArrayItem(ctx.obj[row.key], row.schema.items)\">\n            <i class=\"pi pi-plus\"></i>\n          </button>\n        </div>\n      }\n      @if (hint(row.schema)) {\n        <div class=\"jste-hint\">{{ hint(row.schema) }}</div>\n      }\n    </div>\n  }\n\n  @if (addable(ctx.schema, ctx.obj).length) {\n    <div class=\"jste-add-row\">\n      <select #addSelect class=\"jste-input jste-add-select\"\n        (change)=\"addProp(ctx.obj, addSelect.value, ctx.schema.properties[addSelect.value], addSelect)\">\n        <option value=\"\" disabled selected>+ proprieta'...</option>\n        @for (key of addable(ctx.schema, ctx.obj); track key) {\n          <option [value]=\"key\" [title]=\"hint(ctx.schema.properties[key])\">{{ key }}</option>\n        }\n      </select>\n    </div>\n  }\n</ng-template>\n\n<div class=\"jste-root\">\n  <ng-container *ngTemplateOutlet=\"objectEditor; context: { $implicit: { schema: schema, obj: model } }\"></ng-container>\n</div>\n", styles: [".jste-root{height:100%;overflow:auto;padding:8px 10px;background:#1e1e1e;color:#d4d4d4;font-size:12.5px;font-family:Consolas,Courier New,monospace}.jste-row{margin:2px 0}.jste-row-head{display:flex;align-items:center;gap:8px;min-height:26px}.jste-key{color:#9cdcfe;min-width:110px}.jste-const{color:#b5cea8}.jste-input{background:#2a2a31;color:#d4d4d4;border:1px solid #3c3c46;border-radius:4px;padding:3px 6px;font-size:12.5px;font-family:inherit;min-width:0}.jste-number{width:84px}.jste-color{width:34px;height:24px;padding:0;border:1px solid #3c3c46;background:transparent}.jste-vector{display:inline-flex;gap:4px}.jste-btn{border:none;background:none;color:#8a8a95;cursor:pointer;padding:2px 4px;border-radius:4px}.jste-btn:hover{color:#e0e0e6;background:#34343c}.jste-remove i{font-size:11px}.jste-children{margin-left:18px;padding-left:10px;border-left:1px solid #34343c}.jste-row-object>.jste-row-head .jste-key{color:#dcdcaa;font-weight:600}.jste-hint{margin-left:118px;color:#6f6f7a;font-size:11px;line-height:1.3;max-width:460px}.jste-add-row{margin:4px 0 2px}.jste-add-select{color:#8fd18f}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: JsonSchemaTreeEditorComponent, isStandalone: true, selector: "wuic-json-schema-tree-editor", inputs: { schema: "schema", value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- Editor \"a struttura\": ricorsione via ng-template (nessun self-import). -->\r\n<ng-template #objectEditor let-ctx>\r\n  @for (row of rows(ctx.schema, ctx.obj); track row.key) {\r\n    <div class=\"jste-row\" [class.jste-row-object]=\"row.kind === 'object'\">\r\n      <div class=\"jste-row-head\">\r\n        <span class=\"jste-key\" [title]=\"hint(row.schema)\">{{ row.key }}</span>\r\n\r\n        @switch (row.kind) {\r\n          @case ('const') {\r\n            <span class=\"jste-const\">{{ ctx.obj[row.key] }}</span>\r\n          }\r\n          @case ('enum') {\r\n            <select class=\"jste-input\" [ngModel]=\"ctx.obj[row.key]\"\r\n              (ngModelChange)=\"setProp(ctx.obj, row.key, $event)\">\r\n              @for (opt of row.schema.enum; track opt) {\r\n                <option [ngValue]=\"opt\">{{ opt }}</option>\r\n              }\r\n            </select>\r\n          }\r\n          @case ('boolean') {\r\n            <input type=\"checkbox\" [ngModel]=\"ctx.obj[row.key]\"\r\n              (ngModelChange)=\"setProp(ctx.obj, row.key, $event)\" />\r\n          }\r\n          @case ('number') {\r\n            <input class=\"jste-input jste-number\" type=\"number\" step=\"any\"\r\n              [min]=\"row.schema.minimum\" [max]=\"row.schema.maximum\"\r\n              [ngModel]=\"ctx.obj[row.key]\"\r\n              (ngModelChange)=\"setNumberProp(ctx.obj, row.key, $event)\" />\r\n          }\r\n          @case ('color') {\r\n            <input class=\"jste-color\" type=\"color\" [ngModel]=\"ctx.obj[row.key]\"\r\n              (ngModelChange)=\"setProp(ctx.obj, row.key, $event)\" />\r\n            <span class=\"jste-const\">{{ ctx.obj[row.key] }}</span>\r\n          }\r\n          @case ('vector') {\r\n            <span class=\"jste-vector\">\r\n              @for (component of ctx.obj[row.key]; track $index) {\r\n                <input class=\"jste-input jste-number\" type=\"number\" step=\"any\"\r\n                  [ngModel]=\"ctx.obj[row.key][$index]\"\r\n                  (ngModelChange)=\"setVectorItem(ctx.obj[row.key], $index, $event)\" />\r\n              }\r\n            </span>\r\n          }\r\n          @case ('text') {\r\n            <input class=\"jste-input\" type=\"text\" [ngModel]=\"ctx.obj[row.key]\"\r\n              (ngModelChange)=\"setProp(ctx.obj, row.key, $event)\" />\r\n          }\r\n        }\r\n\r\n        @if (!row.required) {\r\n          <button type=\"button\" class=\"jste-btn jste-remove\" (click)=\"removeProp(ctx.obj, row.key)\"\r\n            title=\"Rimuovi\">\r\n            <i class=\"pi pi-times\"></i>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      @if (row.kind === 'object') {\r\n        <div class=\"jste-children\">\r\n          <ng-container *ngTemplateOutlet=\"objectEditor; context: { $implicit: { schema: row.schema, obj: ctx.obj[row.key] } }\"></ng-container>\r\n        </div>\r\n      }\r\n      @if (row.kind === 'array') {\r\n        <div class=\"jste-children\">\r\n          @for (item of ctx.obj[row.key]; track $index) {\r\n            <div class=\"jste-row-head\">\r\n              <span class=\"jste-key\">[{{ $index }}]</span>\r\n              @if (row.schema.items?.type === 'object') {\r\n                <ng-container *ngTemplateOutlet=\"objectEditor; context: { $implicit: { schema: row.schema.items, obj: ctx.obj[row.key][$index] } }\"></ng-container>\r\n              } @else if (row.schema.items?.type === 'number' || row.schema.items?.type === 'integer') {\r\n                <input class=\"jste-input jste-number\" type=\"number\" step=\"any\"\r\n                  [ngModel]=\"ctx.obj[row.key][$index]\"\r\n                  (ngModelChange)=\"setVectorItem(ctx.obj[row.key], $index, $event)\" />\r\n              } @else {\r\n                <input class=\"jste-input\" type=\"text\" [ngModel]=\"ctx.obj[row.key][$index]\"\r\n                  (ngModelChange)=\"setProp(ctx.obj[row.key], $index, $event)\" />\r\n              }\r\n              <button type=\"button\" class=\"jste-btn jste-remove\" (click)=\"removeArrayItem(ctx.obj[row.key], $index)\">\r\n                <i class=\"pi pi-times\"></i>\r\n              </button>\r\n            </div>\r\n          }\r\n          <button type=\"button\" class=\"jste-btn jste-add-item\" (click)=\"addArrayItem(ctx.obj[row.key], row.schema.items)\">\r\n            <i class=\"pi pi-plus\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (hint(row.schema)) {\r\n        <div class=\"jste-hint\">{{ hint(row.schema) }}</div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (addable(ctx.schema, ctx.obj).length) {\r\n    <div class=\"jste-add-row\">\r\n      <select #addSelect class=\"jste-input jste-add-select\"\r\n        (change)=\"addProp(ctx.obj, addSelect.value, ctx.schema.properties[addSelect.value], addSelect)\">\r\n        <option value=\"\" disabled selected>+ proprieta'...</option>\r\n        @for (key of addable(ctx.schema, ctx.obj); track key) {\r\n          <option [value]=\"key\" [title]=\"hint(ctx.schema.properties[key])\">{{ key }}</option>\r\n        }\r\n      </select>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<div class=\"jste-root\">\r\n  <ng-container *ngTemplateOutlet=\"objectEditor; context: { $implicit: { schema: schema, obj: model } }\"></ng-container>\r\n</div>\r\n", styles: [".jste-root{height:100%;overflow:auto;padding:8px 10px;background:#1e1e1e;color:#d4d4d4;font-size:12.5px;font-family:Consolas,Courier New,monospace}.jste-row{margin:2px 0}.jste-row-head{display:flex;align-items:center;gap:8px;min-height:26px}.jste-key{color:#9cdcfe;min-width:110px}.jste-const{color:#b5cea8}.jste-input{background:#2a2a31;color:#d4d4d4;border:1px solid #3c3c46;border-radius:4px;padding:3px 6px;font-size:12.5px;font-family:inherit;min-width:0}.jste-number{width:84px}.jste-color{width:34px;height:24px;padding:0;border:1px solid #3c3c46;background:transparent}.jste-vector{display:inline-flex;gap:4px}.jste-btn{border:none;background:none;color:#8a8a95;cursor:pointer;padding:2px 4px;border-radius:4px}.jste-btn:hover{color:#e0e0e6;background:#34343c}.jste-remove i{font-size:11px}.jste-children{margin-left:18px;padding-left:10px;border-left:1px solid #34343c}.jste-row-object>.jste-row-head .jste-key{color:#dcdcaa;font-weight:600}.jste-hint{margin-left:118px;color:#6f6f7a;font-size:11px;line-height:1.3;max-width:460px}.jste-add-row{margin:4px 0 2px}.jste-add-select{color:#8fd18f}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: JsonSchemaTreeEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wuic-json-schema-tree-editor', standalone: true, imports: [FormsModule, NgTemplateOutlet], template: "<!-- Editor \"a struttura\": ricorsione via ng-template (nessun self-import). -->\n<ng-template #objectEditor let-ctx>\n  @for (row of rows(ctx.schema, ctx.obj); track row.key) {\n    <div class=\"jste-row\" [class.jste-row-object]=\"row.kind === 'object'\">\n      <div class=\"jste-row-head\">\n        <span class=\"jste-key\" [title]=\"hint(row.schema)\">{{ row.key }}</span>\n\n        @switch (row.kind) {\n          @case ('const') {\n            <span class=\"jste-const\">{{ ctx.obj[row.key] }}</span>\n          }\n          @case ('enum') {\n            <select class=\"jste-input\" [ngModel]=\"ctx.obj[row.key]\"\n              (ngModelChange)=\"setProp(ctx.obj, row.key, $event)\">\n              @for (opt of row.schema.enum; track opt) {\n                <option [ngValue]=\"opt\">{{ opt }}</option>\n              }\n            </select>\n          }\n          @case ('boolean') {\n            <input type=\"checkbox\" [ngModel]=\"ctx.obj[row.key]\"\n              (ngModelChange)=\"setProp(ctx.obj, row.key, $event)\" />\n          }\n          @case ('number') {\n            <input class=\"jste-input jste-number\" type=\"number\" step=\"any\"\n              [min]=\"row.schema.minimum\" [max]=\"row.schema.maximum\"\n              [ngModel]=\"ctx.obj[row.key]\"\n              (ngModelChange)=\"setNumberProp(ctx.obj, row.key, $event)\" />\n          }\n          @case ('color') {\n            <input class=\"jste-color\" type=\"color\" [ngModel]=\"ctx.obj[row.key]\"\n              (ngModelChange)=\"setProp(ctx.obj, row.key, $event)\" />\n            <span class=\"jste-const\">{{ ctx.obj[row.key] }}</span>\n          }\n          @case ('vector') {\n            <span class=\"jste-vector\">\n              @for (component of ctx.obj[row.key]; track $index) {\n                <input class=\"jste-input jste-number\" type=\"number\" step=\"any\"\n                  [ngModel]=\"ctx.obj[row.key][$index]\"\n                  (ngModelChange)=\"setVectorItem(ctx.obj[row.key], $index, $event)\" />\n              }\n            </span>\n          }\n          @case ('text') {\n            <input class=\"jste-input\" type=\"text\" [ngModel]=\"ctx.obj[row.key]\"\n              (ngModelChange)=\"setProp(ctx.obj, row.key, $event)\" />\n          }\n        }\n\n        @if (!row.required) {\n          <button type=\"button\" class=\"jste-btn jste-remove\" (click)=\"removeProp(ctx.obj, row.key)\"\n            title=\"Rimuovi\">\n            <i class=\"pi pi-times\"></i>\n          </button>\n        }\n      </div>\n\n      @if (row.kind === 'object') {\n        <div class=\"jste-children\">\n          <ng-container *ngTemplateOutlet=\"objectEditor; context: { $implicit: { schema: row.schema, obj: ctx.obj[row.key] } }\"></ng-container>\n        </div>\n      }\n      @if (row.kind === 'array') {\n        <div class=\"jste-children\">\n          @for (item of ctx.obj[row.key]; track $index) {\n            <div class=\"jste-row-head\">\n              <span class=\"jste-key\">[{{ $index }}]</span>\n              @if (row.schema.items?.type === 'object') {\n                <ng-container *ngTemplateOutlet=\"objectEditor; context: { $implicit: { schema: row.schema.items, obj: ctx.obj[row.key][$index] } }\"></ng-container>\n              } @else if (row.schema.items?.type === 'number' || row.schema.items?.type === 'integer') {\n                <input class=\"jste-input jste-number\" type=\"number\" step=\"any\"\n                  [ngModel]=\"ctx.obj[row.key][$index]\"\n                  (ngModelChange)=\"setVectorItem(ctx.obj[row.key], $index, $event)\" />\n              } @else {\n                <input class=\"jste-input\" type=\"text\" [ngModel]=\"ctx.obj[row.key][$index]\"\n                  (ngModelChange)=\"setProp(ctx.obj[row.key], $index, $event)\" />\n              }\n              <button type=\"button\" class=\"jste-btn jste-remove\" (click)=\"removeArrayItem(ctx.obj[row.key], $index)\">\n                <i class=\"pi pi-times\"></i>\n              </button>\n            </div>\n          }\n          <button type=\"button\" class=\"jste-btn jste-add-item\" (click)=\"addArrayItem(ctx.obj[row.key], row.schema.items)\">\n            <i class=\"pi pi-plus\"></i>\n          </button>\n        </div>\n      }\n      @if (hint(row.schema)) {\n        <div class=\"jste-hint\">{{ hint(row.schema) }}</div>\n      }\n    </div>\n  }\n\n  @if (addable(ctx.schema, ctx.obj).length) {\n    <div class=\"jste-add-row\">\n      <select #addSelect class=\"jste-input jste-add-select\"\n        (change)=\"addProp(ctx.obj, addSelect.value, ctx.schema.properties[addSelect.value], addSelect)\">\n        <option value=\"\" disabled selected>+ proprieta'...</option>\n        @for (key of addable(ctx.schema, ctx.obj); track key) {\n          <option [value]=\"key\" [title]=\"hint(ctx.schema.properties[key])\">{{ key }}</option>\n        }\n      </select>\n    </div>\n  }\n</ng-template>\n\n<div class=\"jste-root\">\n  <ng-container *ngTemplateOutlet=\"objectEditor; context: { $implicit: { schema: schema, obj: model } }\"></ng-container>\n</div>\n", styles: [".jste-root{height:100%;overflow:auto;padding:8px 10px;background:#1e1e1e;color:#d4d4d4;font-size:12.5px;font-family:Consolas,Courier New,monospace}.jste-row{margin:2px 0}.jste-row-head{display:flex;align-items:center;gap:8px;min-height:26px}.jste-key{color:#9cdcfe;min-width:110px}.jste-const{color:#b5cea8}.jste-input{background:#2a2a31;color:#d4d4d4;border:1px solid #3c3c46;border-radius:4px;padding:3px 6px;font-size:12.5px;font-family:inherit;min-width:0}.jste-number{width:84px}.jste-color{width:34px;height:24px;padding:0;border:1px solid #3c3c46;background:transparent}.jste-vector{display:inline-flex;gap:4px}.jste-btn{border:none;background:none;color:#8a8a95;cursor:pointer;padding:2px 4px;border-radius:4px}.jste-btn:hover{color:#e0e0e6;background:#34343c}.jste-remove i{font-size:11px}.jste-children{margin-left:18px;padding-left:10px;border-left:1px solid #34343c}.jste-row-object>.jste-row-head .jste-key{color:#dcdcaa;font-weight:600}.jste-hint{margin-left:118px;color:#6f6f7a;font-size:11px;line-height:1.3;max-width:460px}.jste-add-row{margin:4px 0 2px}.jste-add-select{color:#8fd18f}\n"] }]
+            args: [{ selector: 'wuic-json-schema-tree-editor', standalone: true, imports: [FormsModule, NgTemplateOutlet], template: "<!-- Editor \"a struttura\": ricorsione via ng-template (nessun self-import). -->\r\n<ng-template #objectEditor let-ctx>\r\n  @for (row of rows(ctx.schema, ctx.obj); track row.key) {\r\n    <div class=\"jste-row\" [class.jste-row-object]=\"row.kind === 'object'\">\r\n      <div class=\"jste-row-head\">\r\n        <span class=\"jste-key\" [title]=\"hint(row.schema)\">{{ row.key }}</span>\r\n\r\n        @switch (row.kind) {\r\n          @case ('const') {\r\n            <span class=\"jste-const\">{{ ctx.obj[row.key] }}</span>\r\n          }\r\n          @case ('enum') {\r\n            <select class=\"jste-input\" [ngModel]=\"ctx.obj[row.key]\"\r\n              (ngModelChange)=\"setProp(ctx.obj, row.key, $event)\">\r\n              @for (opt of row.schema.enum; track opt) {\r\n                <option [ngValue]=\"opt\">{{ opt }}</option>\r\n              }\r\n            </select>\r\n          }\r\n          @case ('boolean') {\r\n            <input type=\"checkbox\" [ngModel]=\"ctx.obj[row.key]\"\r\n              (ngModelChange)=\"setProp(ctx.obj, row.key, $event)\" />\r\n          }\r\n          @case ('number') {\r\n            <input class=\"jste-input jste-number\" type=\"number\" step=\"any\"\r\n              [min]=\"row.schema.minimum\" [max]=\"row.schema.maximum\"\r\n              [ngModel]=\"ctx.obj[row.key]\"\r\n              (ngModelChange)=\"setNumberProp(ctx.obj, row.key, $event)\" />\r\n          }\r\n          @case ('color') {\r\n            <input class=\"jste-color\" type=\"color\" [ngModel]=\"ctx.obj[row.key]\"\r\n              (ngModelChange)=\"setProp(ctx.obj, row.key, $event)\" />\r\n            <span class=\"jste-const\">{{ ctx.obj[row.key] }}</span>\r\n          }\r\n          @case ('vector') {\r\n            <span class=\"jste-vector\">\r\n              @for (component of ctx.obj[row.key]; track $index) {\r\n                <input class=\"jste-input jste-number\" type=\"number\" step=\"any\"\r\n                  [ngModel]=\"ctx.obj[row.key][$index]\"\r\n                  (ngModelChange)=\"setVectorItem(ctx.obj[row.key], $index, $event)\" />\r\n              }\r\n            </span>\r\n          }\r\n          @case ('text') {\r\n            <input class=\"jste-input\" type=\"text\" [ngModel]=\"ctx.obj[row.key]\"\r\n              (ngModelChange)=\"setProp(ctx.obj, row.key, $event)\" />\r\n          }\r\n        }\r\n\r\n        @if (!row.required) {\r\n          <button type=\"button\" class=\"jste-btn jste-remove\" (click)=\"removeProp(ctx.obj, row.key)\"\r\n            title=\"Rimuovi\">\r\n            <i class=\"pi pi-times\"></i>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      @if (row.kind === 'object') {\r\n        <div class=\"jste-children\">\r\n          <ng-container *ngTemplateOutlet=\"objectEditor; context: { $implicit: { schema: row.schema, obj: ctx.obj[row.key] } }\"></ng-container>\r\n        </div>\r\n      }\r\n      @if (row.kind === 'array') {\r\n        <div class=\"jste-children\">\r\n          @for (item of ctx.obj[row.key]; track $index) {\r\n            <div class=\"jste-row-head\">\r\n              <span class=\"jste-key\">[{{ $index }}]</span>\r\n              @if (row.schema.items?.type === 'object') {\r\n                <ng-container *ngTemplateOutlet=\"objectEditor; context: { $implicit: { schema: row.schema.items, obj: ctx.obj[row.key][$index] } }\"></ng-container>\r\n              } @else if (row.schema.items?.type === 'number' || row.schema.items?.type === 'integer') {\r\n                <input class=\"jste-input jste-number\" type=\"number\" step=\"any\"\r\n                  [ngModel]=\"ctx.obj[row.key][$index]\"\r\n                  (ngModelChange)=\"setVectorItem(ctx.obj[row.key], $index, $event)\" />\r\n              } @else {\r\n                <input class=\"jste-input\" type=\"text\" [ngModel]=\"ctx.obj[row.key][$index]\"\r\n                  (ngModelChange)=\"setProp(ctx.obj[row.key], $index, $event)\" />\r\n              }\r\n              <button type=\"button\" class=\"jste-btn jste-remove\" (click)=\"removeArrayItem(ctx.obj[row.key], $index)\">\r\n                <i class=\"pi pi-times\"></i>\r\n              </button>\r\n            </div>\r\n          }\r\n          <button type=\"button\" class=\"jste-btn jste-add-item\" (click)=\"addArrayItem(ctx.obj[row.key], row.schema.items)\">\r\n            <i class=\"pi pi-plus\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (hint(row.schema)) {\r\n        <div class=\"jste-hint\">{{ hint(row.schema) }}</div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (addable(ctx.schema, ctx.obj).length) {\r\n    <div class=\"jste-add-row\">\r\n      <select #addSelect class=\"jste-input jste-add-select\"\r\n        (change)=\"addProp(ctx.obj, addSelect.value, ctx.schema.properties[addSelect.value], addSelect)\">\r\n        <option value=\"\" disabled selected>+ proprieta'...</option>\r\n        @for (key of addable(ctx.schema, ctx.obj); track key) {\r\n          <option [value]=\"key\" [title]=\"hint(ctx.schema.properties[key])\">{{ key }}</option>\r\n        }\r\n      </select>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<div class=\"jste-root\">\r\n  <ng-container *ngTemplateOutlet=\"objectEditor; context: { $implicit: { schema: schema, obj: model } }\"></ng-container>\r\n</div>\r\n", styles: [".jste-root{height:100%;overflow:auto;padding:8px 10px;background:#1e1e1e;color:#d4d4d4;font-size:12.5px;font-family:Consolas,Courier New,monospace}.jste-row{margin:2px 0}.jste-row-head{display:flex;align-items:center;gap:8px;min-height:26px}.jste-key{color:#9cdcfe;min-width:110px}.jste-const{color:#b5cea8}.jste-input{background:#2a2a31;color:#d4d4d4;border:1px solid #3c3c46;border-radius:4px;padding:3px 6px;font-size:12.5px;font-family:inherit;min-width:0}.jste-number{width:84px}.jste-color{width:34px;height:24px;padding:0;border:1px solid #3c3c46;background:transparent}.jste-vector{display:inline-flex;gap:4px}.jste-btn{border:none;background:none;color:#8a8a95;cursor:pointer;padding:2px 4px;border-radius:4px}.jste-btn:hover{color:#e0e0e6;background:#34343c}.jste-remove i{font-size:11px}.jste-children{margin-left:18px;padding-left:10px;border-left:1px solid #34343c}.jste-row-object>.jste-row-head .jste-key{color:#dcdcaa;font-weight:600}.jste-hint{margin-left:118px;color:#6f6f7a;font-size:11px;line-height:1.3;max-width:460px}.jste-add-row{margin:4px 0 2px}.jste-add-select{color:#8fd18f}\n"] }]
         }], propDecorators: { schema: [{
                 type: Input
             }], value: [{
@@ -4132,11 +4132,11 @@ class CodeEditorComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CodeEditorComponent, deps: [{ token: i1$1.MonacoEditorLoaderService }, { token: i1$2.HttpClient }, { token: MetadataProviderService }, { token: UserInfoService }, { token: DataProviderService }, { token: WtoolboxService }, { token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CodeEditorComponent, isStandalone: true, selector: "wuic-code-editor", inputs: { field: "field", record: "record", metaInfo: "metaInfo", jsonTreeToggle: "jsonTreeToggle" }, host: { properties: { "style": "this.style" } }, viewQueries: [{ propertyName: "contextMenuAnchor", first: true, predicate: ["contextMenuAnchor"], descendants: true }, { propertyName: "editorRef", first: true, predicate: ["editorRef"], descendants: true }, { propertyName: "ctxs", first: true, predicate: ["ctxs"], descendants: true }], ngImport: i0, template: "@if (render) {\n<div [ngClass]=\"{'fullscreen': fullscreen, 'no-full-screen': !fullscreen }\">\n  <div\n    [ngStyle]=\"{width: sqlObjView ? '22%' : null, display: sqlObjView ? null : 'none', position: fullscreen ? 'absolute' : null, 'left': fullscreen ? '0px' : null, 'top': fullscreen ? '0px' : null }\"\n    style=\"float: left; height: 100%; overflow: auto; background-color: #1e1e1e; z-index: 2000;\">\n    <p-tree [value]=\"primeTreeNodes\">\n      <ng-template let-node pTemplate=\"default\">\n        <span style=\"-webkit-user-select: none; -ms-user-select: none;  user-select: none;\" draggable=\"true\"\n          (dragstart)=\"onTreeNodeDragStart($event, node.data)\" (click)=\"editorOptions.onNodeClick($event, node.data)\"\n          (dragend)=\"onTreeNodeDragEnd($event, node.data)\">\n          <span>\n            {{ node.label }}\n          </span>\n        </span>\n      </ng-template>\n    </p-tree>\n  </div>\n  <div [ngStyle]=\"{width: sqlObjView ? '78%' : '100%', 'left': fullscreen ? (!sqlObjView ? '0px' : '22%') : null }\"\n    style=\"height: 100%; float: left;\">\n    <ul class=\"editor-btn\">\n      <li>\n        <div (click)=\"setFullScreen($event, this)\">\n          <i\n            [ngClass]=\"{'pi': true, 'pi-window-maximize': fullscreen == false, 'pi-window-minimize': fullscreen == true}\"></i>\n        </div>\n      </li>\n      @if (editorOptions.language == 'sql') {\n      <li>\n        <div (click)=\"toggleSqlObjView($event, this)\">\n          <i [ngClass]=\"{'pi': true, 'pi-server': true}\"></i>\n        </div>\n      </li>\n      }\n      @if (editorOptions.language == 'sql') {\n      <li>\n        <div (click)=\"testSql($event, this)\">\n          <i [ngClass]=\"{'pi': true, 'pi-verified': true}\"></i>\n        </div>\n      </li>\n      }\n      @if (field.mc_suggest_value_callback) {\n      <li>\n        <div (click)=\"suggest($event, this)\">\n          <i [ngClass]=\"{'pi': true, 'pi-question': true}\"></i>\n        </div>\n      </li>\n      }\n      @if (isHtmlEditor) {\n      <li>\n        <div (click)=\"formatHtmlNow($event)\" title=\"Format HTML\">\n          <i [ngClass]=\"{'pi': true, 'pi-align-left': true}\"></i>\n        </div>\n      </li>\n      <li>\n        <div (click)=\"toggleHtmlPreview($event)\" title=\"Toggle HTML preview\">\n          <i [ngClass]=\"{'pi': true, 'pi-eye': showHtmlPreview, 'pi-eye-slash': !showHtmlPreview}\"></i>\n        </div>\n      </li>\n      }\n      @if (isJsonEditor) {\n      <li>\n        <div (click)=\"formatJsonNow($event)\" title=\"Format JSON\">\n          <i [ngClass]=\"{'pi': true, 'pi-code': true}\"></i>\n        </div>\n      </li>\n      }\n      @if (isJsonEditor && jsonTreeToggle) {\n      <li>\n        <div (click)=\"toggleJsonTree($event)\" [title]=\"treeViewActive ? 'Codice' : 'Struttura'\">\n          <i [ngClass]=\"{'pi': true, 'pi-sitemap': !treeViewActive, 'pi-pencil': treeViewActive}\"></i>\n        </div>\n      </li>\n      }\n    </ul>\n    <div class=\"editor-shell\">\n      <!-- Monaco resta VIVO anche in vista struttura (solo nascosto): il model\n           e il record vengono riscritti a ogni modifica della struttura. -->\n      <div class=\"editor-pane\" [ngClass]=\"{'editor-pane--with-preview': isHtmlEditor && showHtmlPreview}\"\n        [style.display]=\"treeViewActive ? 'none' : null\">\n        <ngx-monaco-editor #editorRef [options]=\"editorOptions\" [ngModel]=\"editorModelValue\"\n          (ngModelChange)=\"onEditorModelChange($event)\"\n          [ngModelOptions]=\"{standalone: true}\"\n          [ngStyle]=\"{'left': fullscreen ? (!sqlObjView ? '0px' : '22%') : null, width: '100%' }\"\n          style=\"width: 100%; height: 100%;\"\n          (onDropIntoEditor)=\"editorOptions.onDropIntoEditor($event)\"></ngx-monaco-editor>\n      </div>\n      @if (treeViewActive) {\n      <div class=\"editor-pane\">\n        <wuic-json-schema-tree-editor\n          [schema]=\"jsonTreeSchema\"\n          [value]=\"treeValue\"\n          (valueChange)=\"onTreeValueChange($event)\" />\n      </div>\n      }\n      @if (isHtmlEditor && showHtmlPreview) {\n      <div class=\"html-preview-pane\">\n        <div class=\"html-preview-pane__header\">HTML Pseudo-Preview (sanitized)</div>\n        <div class=\"html-preview-pane__body\" [innerHTML]=\"sanitizedHtmlPreview\"></div>\n      </div>\n      }\n    </div>\n  </div>\n</div>\n} @else {\n  <!-- Monaco viene inizializzato in modo asincrono (loader + registrazione\n       language provider) DOPO che il @defer del code-area-editor ha gia'\n       terminato il fetch del chunk: senza questo placeholder la sezione\n       collasserebbe a nulla in quel gap. Riserva l'altezza dell'editor\n       (200px, come .no-full-screen) per evitare il salto di layout. -->\n  <div class=\"code-editor-monaco-loading\">\n    <i class=\"pi pi-spin pi-spinner\"></i> Inizializzazione editor\u2026\n  </div>\n}\n\n@if (editorRef?.editorContent?.nativeElement) {\n<p-contextMenu [target]=\"editorRef?.editorContent?.nativeElement\" [model]=\"editorOptions.contextMenuItems\"\n  appendTo=\"body\" />\n}\n", styles: [".editor-btn{color:#fff;list-style-type:none;z-index:2001;visibility:visible;position:absolute;right:10px;top:10px;display:flex;gap:8px;margin:0;padding:0}.editor-btn li{list-style:none}.editor-btn li div{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid #334155;border-radius:4px;background:#0f172ad9;cursor:pointer}.fullscreen{position:fixed;inset:16px;z-index:3000;background:#1e1e1e;width:auto;height:auto}.fullscreen .editor-shell{position:absolute;inset:44px 0 0;height:auto}.fullscreen .editor-pane ngx-monaco-editor{position:relative;height:auto!important}.no-full-screen{width:100%;height:200px;position:relative}.editor-container{overflow:visible!important}.editor-shell{display:flex;width:100%;height:100%;min-height:0}.editor-pane{flex:1 1 auto;min-width:0;height:100%}.editor-pane--with-preview{flex:0 0 62%}.code-editor-monaco-loading{display:flex;align-items:center;justify-content:center;gap:8px;height:200px;color:#64748b;font-size:.9rem;background:#f1f5f9;border:1px dashed #cbd5e1;border-radius:6px}.code-editor-monaco-loading .pi-spinner{font-size:1rem}.html-preview-pane{flex:0 0 38%;min-width:260px;border-left:1px solid #404040;background:#111827;color:#e5e7eb;display:flex;flex-direction:column}.html-preview-pane__header{font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid #374151;color:#9ca3af}.html-preview-pane__body{flex:1 1 auto;overflow:auto;padding:12px;background:#fff;color:#111827}:host ::ng-deep .html-preview-pane__body .wuic-preview-component{border:1px solid #cbd5e1;border-left:4px solid #2563eb;border-radius:6px;padding:8px 10px;margin-bottom:10px;background:#f8fafc}:host ::ng-deep .html-preview-pane__body .wuic-preview-component__title{font-weight:600;color:#0f172a;margin-bottom:4px}:host ::ng-deep .html-preview-pane__body .wuic-preview-component__content{margin-top:8px}:host ::ng-deep .html-preview-pane__body .wuic-preview-field__label{display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px}:host ::ng-deep .html-preview-pane__body .wuic-preview-field__input{display:block;width:100%;border:1px solid #3b82f6;border-radius:4px;min-height:36px;box-sizing:border-box;background:#fff}:host ::ng-deep .monaco-editor .suggest-widget,:host ::ng-deep .monaco-editor .parameter-hints-widget,:host ::ng-deep .monaco-editor .monaco-hover{z-index:4000!important}:host ::ng-deep .monaco-editor .suggest-widget{height:220px!important;margin-top:-30px!important}:host ::ng-deep .monaco-editor .suggest-widget .tree,:host ::ng-deep .monaco-editor .suggest-widget .monaco-list,:host ::ng-deep .monaco-editor .suggest-widget .monaco-list-rows,:host ::ng-deep .monaco-editor .suggest-widget .monaco-scrollable-element{height:186px!important;max-height:186px!important}:host ::ng-deep .monaco-editor .suggest-widget .monaco-list-rows{box-sizing:border-box;padding-bottom:20px!important}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:10px}::-webkit-scrollbar-thumb{background:#ffffff80;border-radius:10px;visibility:hidden}::-webkit-scrollbar-thumb:hover{visibility:visible;background:#fffc}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MonacoEditorModule }, { kind: "component", type: i1$1.MonacoEditorComponent, selector: "ngx-monaco-editor", inputs: ["options", "uri"], outputs: ["init"] }, { 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: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i4.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: "component", type: JsonSchemaTreeEditorComponent, selector: "wuic-json-schema-tree-editor", inputs: ["schema", "value"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CodeEditorComponent, isStandalone: true, selector: "wuic-code-editor", inputs: { field: "field", record: "record", metaInfo: "metaInfo", jsonTreeToggle: "jsonTreeToggle" }, host: { properties: { "style": "this.style" } }, viewQueries: [{ propertyName: "contextMenuAnchor", first: true, predicate: ["contextMenuAnchor"], descendants: true }, { propertyName: "editorRef", first: true, predicate: ["editorRef"], descendants: true }, { propertyName: "ctxs", first: true, predicate: ["ctxs"], descendants: true }], ngImport: i0, template: "@if (render) {\r\n<div [ngClass]=\"{'fullscreen': fullscreen, 'no-full-screen': !fullscreen }\">\r\n  <div\r\n    [ngStyle]=\"{width: sqlObjView ? '22%' : null, display: sqlObjView ? null : 'none', position: fullscreen ? 'absolute' : null, 'left': fullscreen ? '0px' : null, 'top': fullscreen ? '0px' : null }\"\r\n    style=\"float: left; height: 100%; overflow: auto; background-color: #1e1e1e; z-index: 2000;\">\r\n    <p-tree [value]=\"primeTreeNodes\">\r\n      <ng-template let-node pTemplate=\"default\">\r\n        <span style=\"-webkit-user-select: none; -ms-user-select: none;  user-select: none;\" draggable=\"true\"\r\n          (dragstart)=\"onTreeNodeDragStart($event, node.data)\" (click)=\"editorOptions.onNodeClick($event, node.data)\"\r\n          (dragend)=\"onTreeNodeDragEnd($event, node.data)\">\r\n          <span>\r\n            {{ node.label }}\r\n          </span>\r\n        </span>\r\n      </ng-template>\r\n    </p-tree>\r\n  </div>\r\n  <div [ngStyle]=\"{width: sqlObjView ? '78%' : '100%', 'left': fullscreen ? (!sqlObjView ? '0px' : '22%') : null }\"\r\n    style=\"height: 100%; float: left;\">\r\n    <ul class=\"editor-btn\">\r\n      <li>\r\n        <div (click)=\"setFullScreen($event, this)\">\r\n          <i\r\n            [ngClass]=\"{'pi': true, 'pi-window-maximize': fullscreen == false, 'pi-window-minimize': fullscreen == true}\"></i>\r\n        </div>\r\n      </li>\r\n      @if (editorOptions.language == 'sql') {\r\n      <li>\r\n        <div (click)=\"toggleSqlObjView($event, this)\">\r\n          <i [ngClass]=\"{'pi': true, 'pi-server': true}\"></i>\r\n        </div>\r\n      </li>\r\n      }\r\n      @if (editorOptions.language == 'sql') {\r\n      <li>\r\n        <div (click)=\"testSql($event, this)\">\r\n          <i [ngClass]=\"{'pi': true, 'pi-verified': true}\"></i>\r\n        </div>\r\n      </li>\r\n      }\r\n      @if (field.mc_suggest_value_callback) {\r\n      <li>\r\n        <div (click)=\"suggest($event, this)\">\r\n          <i [ngClass]=\"{'pi': true, 'pi-question': true}\"></i>\r\n        </div>\r\n      </li>\r\n      }\r\n      @if (isHtmlEditor) {\r\n      <li>\r\n        <div (click)=\"formatHtmlNow($event)\" title=\"Format HTML\">\r\n          <i [ngClass]=\"{'pi': true, 'pi-align-left': true}\"></i>\r\n        </div>\r\n      </li>\r\n      <li>\r\n        <div (click)=\"toggleHtmlPreview($event)\" title=\"Toggle HTML preview\">\r\n          <i [ngClass]=\"{'pi': true, 'pi-eye': showHtmlPreview, 'pi-eye-slash': !showHtmlPreview}\"></i>\r\n        </div>\r\n      </li>\r\n      }\r\n      @if (isJsonEditor) {\r\n      <li>\r\n        <div (click)=\"formatJsonNow($event)\" title=\"Format JSON\">\r\n          <i [ngClass]=\"{'pi': true, 'pi-code': true}\"></i>\r\n        </div>\r\n      </li>\r\n      }\r\n      @if (isJsonEditor && jsonTreeToggle) {\r\n      <li>\r\n        <div (click)=\"toggleJsonTree($event)\" [title]=\"treeViewActive ? 'Codice' : 'Struttura'\">\r\n          <i [ngClass]=\"{'pi': true, 'pi-sitemap': !treeViewActive, 'pi-pencil': treeViewActive}\"></i>\r\n        </div>\r\n      </li>\r\n      }\r\n    </ul>\r\n    <div class=\"editor-shell\">\r\n      <!-- Monaco resta VIVO anche in vista struttura (solo nascosto): il model\r\n           e il record vengono riscritti a ogni modifica della struttura. -->\r\n      <div class=\"editor-pane\" [ngClass]=\"{'editor-pane--with-preview': isHtmlEditor && showHtmlPreview}\"\r\n        [style.display]=\"treeViewActive ? 'none' : null\">\r\n        <ngx-monaco-editor #editorRef [options]=\"editorOptions\" [ngModel]=\"editorModelValue\"\r\n          (ngModelChange)=\"onEditorModelChange($event)\"\r\n          [ngModelOptions]=\"{standalone: true}\"\r\n          [ngStyle]=\"{'left': fullscreen ? (!sqlObjView ? '0px' : '22%') : null, width: '100%' }\"\r\n          style=\"width: 100%; height: 100%;\"\r\n          (onDropIntoEditor)=\"editorOptions.onDropIntoEditor($event)\"></ngx-monaco-editor>\r\n      </div>\r\n      @if (treeViewActive) {\r\n      <div class=\"editor-pane\">\r\n        <wuic-json-schema-tree-editor\r\n          [schema]=\"jsonTreeSchema\"\r\n          [value]=\"treeValue\"\r\n          (valueChange)=\"onTreeValueChange($event)\" />\r\n      </div>\r\n      }\r\n      @if (isHtmlEditor && showHtmlPreview) {\r\n      <div class=\"html-preview-pane\">\r\n        <div class=\"html-preview-pane__header\">HTML Pseudo-Preview (sanitized)</div>\r\n        <div class=\"html-preview-pane__body\" [innerHTML]=\"sanitizedHtmlPreview\"></div>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n} @else {\r\n  <!-- Monaco viene inizializzato in modo asincrono (loader + registrazione\r\n       language provider) DOPO che il @defer del code-area-editor ha gia'\r\n       terminato il fetch del chunk: senza questo placeholder la sezione\r\n       collasserebbe a nulla in quel gap. Riserva l'altezza dell'editor\r\n       (200px, come .no-full-screen) per evitare il salto di layout. -->\r\n  <div class=\"code-editor-monaco-loading\">\r\n    <i class=\"pi pi-spin pi-spinner\"></i> Inizializzazione editor\u2026\r\n  </div>\r\n}\r\n\r\n@if (editorRef?.editorContent?.nativeElement) {\r\n<p-contextMenu [target]=\"editorRef?.editorContent?.nativeElement\" [model]=\"editorOptions.contextMenuItems\"\r\n  appendTo=\"body\" />\r\n}\r\n", styles: [".editor-btn{color:#fff;list-style-type:none;z-index:2001;visibility:visible;position:absolute;right:10px;top:10px;display:flex;gap:8px;margin:0;padding:0}.editor-btn li{list-style:none}.editor-btn li div{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid #334155;border-radius:4px;background:#0f172ad9;cursor:pointer}.fullscreen{position:fixed;inset:16px;z-index:3000;background:#1e1e1e;width:auto;height:auto}.fullscreen .editor-shell{position:absolute;inset:44px 0 0;height:auto}.fullscreen .editor-pane ngx-monaco-editor{position:relative;height:auto!important}.no-full-screen{width:100%;height:200px;position:relative}.editor-container{overflow:visible!important}.editor-shell{display:flex;width:100%;height:100%;min-height:0}.editor-pane{flex:1 1 auto;min-width:0;height:100%}.editor-pane--with-preview{flex:0 0 62%}.code-editor-monaco-loading{display:flex;align-items:center;justify-content:center;gap:8px;height:200px;color:#64748b;font-size:.9rem;background:#f1f5f9;border:1px dashed #cbd5e1;border-radius:6px}.code-editor-monaco-loading .pi-spinner{font-size:1rem}.html-preview-pane{flex:0 0 38%;min-width:260px;border-left:1px solid #404040;background:#111827;color:#e5e7eb;display:flex;flex-direction:column}.html-preview-pane__header{font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid #374151;color:#9ca3af}.html-preview-pane__body{flex:1 1 auto;overflow:auto;padding:12px;background:#fff;color:#111827}:host ::ng-deep .html-preview-pane__body .wuic-preview-component{border:1px solid #cbd5e1;border-left:4px solid #2563eb;border-radius:6px;padding:8px 10px;margin-bottom:10px;background:#f8fafc}:host ::ng-deep .html-preview-pane__body .wuic-preview-component__title{font-weight:600;color:#0f172a;margin-bottom:4px}:host ::ng-deep .html-preview-pane__body .wuic-preview-component__content{margin-top:8px}:host ::ng-deep .html-preview-pane__body .wuic-preview-field__label{display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px}:host ::ng-deep .html-preview-pane__body .wuic-preview-field__input{display:block;width:100%;border:1px solid #3b82f6;border-radius:4px;min-height:36px;box-sizing:border-box;background:#fff}:host ::ng-deep .monaco-editor .suggest-widget,:host ::ng-deep .monaco-editor .parameter-hints-widget,:host ::ng-deep .monaco-editor .monaco-hover{z-index:4000!important}:host ::ng-deep .monaco-editor .suggest-widget{height:220px!important;margin-top:-30px!important}:host ::ng-deep .monaco-editor .suggest-widget .tree,:host ::ng-deep .monaco-editor .suggest-widget .monaco-list,:host ::ng-deep .monaco-editor .suggest-widget .monaco-list-rows,:host ::ng-deep .monaco-editor .suggest-widget .monaco-scrollable-element{height:186px!important;max-height:186px!important}:host ::ng-deep .monaco-editor .suggest-widget .monaco-list-rows{box-sizing:border-box;padding-bottom:20px!important}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:10px}::-webkit-scrollbar-thumb{background:#ffffff80;border-radius:10px;visibility:hidden}::-webkit-scrollbar-thumb:hover{visibility:visible;background:#fffc}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MonacoEditorModule }, { kind: "component", type: i1$1.MonacoEditorComponent, selector: "ngx-monaco-editor", inputs: ["options", "uri"], outputs: ["init"] }, { 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: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i4.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: "component", type: JsonSchemaTreeEditorComponent, selector: "wuic-json-schema-tree-editor", inputs: ["schema", "value"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CodeEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wuic-code-editor', imports: [NgClass, NgStyle, FormsModule, MonacoEditorModule, ContextMenuModule, TreeModule, JsonSchemaTreeEditorComponent], template: "@if (render) {\n<div [ngClass]=\"{'fullscreen': fullscreen, 'no-full-screen': !fullscreen }\">\n  <div\n    [ngStyle]=\"{width: sqlObjView ? '22%' : null, display: sqlObjView ? null : 'none', position: fullscreen ? 'absolute' : null, 'left': fullscreen ? '0px' : null, 'top': fullscreen ? '0px' : null }\"\n    style=\"float: left; height: 100%; overflow: auto; background-color: #1e1e1e; z-index: 2000;\">\n    <p-tree [value]=\"primeTreeNodes\">\n      <ng-template let-node pTemplate=\"default\">\n        <span style=\"-webkit-user-select: none; -ms-user-select: none;  user-select: none;\" draggable=\"true\"\n          (dragstart)=\"onTreeNodeDragStart($event, node.data)\" (click)=\"editorOptions.onNodeClick($event, node.data)\"\n          (dragend)=\"onTreeNodeDragEnd($event, node.data)\">\n          <span>\n            {{ node.label }}\n          </span>\n        </span>\n      </ng-template>\n    </p-tree>\n  </div>\n  <div [ngStyle]=\"{width: sqlObjView ? '78%' : '100%', 'left': fullscreen ? (!sqlObjView ? '0px' : '22%') : null }\"\n    style=\"height: 100%; float: left;\">\n    <ul class=\"editor-btn\">\n      <li>\n        <div (click)=\"setFullScreen($event, this)\">\n          <i\n            [ngClass]=\"{'pi': true, 'pi-window-maximize': fullscreen == false, 'pi-window-minimize': fullscreen == true}\"></i>\n        </div>\n      </li>\n      @if (editorOptions.language == 'sql') {\n      <li>\n        <div (click)=\"toggleSqlObjView($event, this)\">\n          <i [ngClass]=\"{'pi': true, 'pi-server': true}\"></i>\n        </div>\n      </li>\n      }\n      @if (editorOptions.language == 'sql') {\n      <li>\n        <div (click)=\"testSql($event, this)\">\n          <i [ngClass]=\"{'pi': true, 'pi-verified': true}\"></i>\n        </div>\n      </li>\n      }\n      @if (field.mc_suggest_value_callback) {\n      <li>\n        <div (click)=\"suggest($event, this)\">\n          <i [ngClass]=\"{'pi': true, 'pi-question': true}\"></i>\n        </div>\n      </li>\n      }\n      @if (isHtmlEditor) {\n      <li>\n        <div (click)=\"formatHtmlNow($event)\" title=\"Format HTML\">\n          <i [ngClass]=\"{'pi': true, 'pi-align-left': true}\"></i>\n        </div>\n      </li>\n      <li>\n        <div (click)=\"toggleHtmlPreview($event)\" title=\"Toggle HTML preview\">\n          <i [ngClass]=\"{'pi': true, 'pi-eye': showHtmlPreview, 'pi-eye-slash': !showHtmlPreview}\"></i>\n        </div>\n      </li>\n      }\n      @if (isJsonEditor) {\n      <li>\n        <div (click)=\"formatJsonNow($event)\" title=\"Format JSON\">\n          <i [ngClass]=\"{'pi': true, 'pi-code': true}\"></i>\n        </div>\n      </li>\n      }\n      @if (isJsonEditor && jsonTreeToggle) {\n      <li>\n        <div (click)=\"toggleJsonTree($event)\" [title]=\"treeViewActive ? 'Codice' : 'Struttura'\">\n          <i [ngClass]=\"{'pi': true, 'pi-sitemap': !treeViewActive, 'pi-pencil': treeViewActive}\"></i>\n        </div>\n      </li>\n      }\n    </ul>\n    <div class=\"editor-shell\">\n      <!-- Monaco resta VIVO anche in vista struttura (solo nascosto): il model\n           e il record vengono riscritti a ogni modifica della struttura. -->\n      <div class=\"editor-pane\" [ngClass]=\"{'editor-pane--with-preview': isHtmlEditor && showHtmlPreview}\"\n        [style.display]=\"treeViewActive ? 'none' : null\">\n        <ngx-monaco-editor #editorRef [options]=\"editorOptions\" [ngModel]=\"editorModelValue\"\n          (ngModelChange)=\"onEditorModelChange($event)\"\n          [ngModelOptions]=\"{standalone: true}\"\n          [ngStyle]=\"{'left': fullscreen ? (!sqlObjView ? '0px' : '22%') : null, width: '100%' }\"\n          style=\"width: 100%; height: 100%;\"\n          (onDropIntoEditor)=\"editorOptions.onDropIntoEditor($event)\"></ngx-monaco-editor>\n      </div>\n      @if (treeViewActive) {\n      <div class=\"editor-pane\">\n        <wuic-json-schema-tree-editor\n          [schema]=\"jsonTreeSchema\"\n          [value]=\"treeValue\"\n          (valueChange)=\"onTreeValueChange($event)\" />\n      </div>\n      }\n      @if (isHtmlEditor && showHtmlPreview) {\n      <div class=\"html-preview-pane\">\n        <div class=\"html-preview-pane__header\">HTML Pseudo-Preview (sanitized)</div>\n        <div class=\"html-preview-pane__body\" [innerHTML]=\"sanitizedHtmlPreview\"></div>\n      </div>\n      }\n    </div>\n  </div>\n</div>\n} @else {\n  <!-- Monaco viene inizializzato in modo asincrono (loader + registrazione\n       language provider) DOPO che il @defer del code-area-editor ha gia'\n       terminato il fetch del chunk: senza questo placeholder la sezione\n       collasserebbe a nulla in quel gap. Riserva l'altezza dell'editor\n       (200px, come .no-full-screen) per evitare il salto di layout. -->\n  <div class=\"code-editor-monaco-loading\">\n    <i class=\"pi pi-spin pi-spinner\"></i> Inizializzazione editor\u2026\n  </div>\n}\n\n@if (editorRef?.editorContent?.nativeElement) {\n<p-contextMenu [target]=\"editorRef?.editorContent?.nativeElement\" [model]=\"editorOptions.contextMenuItems\"\n  appendTo=\"body\" />\n}\n", styles: [".editor-btn{color:#fff;list-style-type:none;z-index:2001;visibility:visible;position:absolute;right:10px;top:10px;display:flex;gap:8px;margin:0;padding:0}.editor-btn li{list-style:none}.editor-btn li div{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid #334155;border-radius:4px;background:#0f172ad9;cursor:pointer}.fullscreen{position:fixed;inset:16px;z-index:3000;background:#1e1e1e;width:auto;height:auto}.fullscreen .editor-shell{position:absolute;inset:44px 0 0;height:auto}.fullscreen .editor-pane ngx-monaco-editor{position:relative;height:auto!important}.no-full-screen{width:100%;height:200px;position:relative}.editor-container{overflow:visible!important}.editor-shell{display:flex;width:100%;height:100%;min-height:0}.editor-pane{flex:1 1 auto;min-width:0;height:100%}.editor-pane--with-preview{flex:0 0 62%}.code-editor-monaco-loading{display:flex;align-items:center;justify-content:center;gap:8px;height:200px;color:#64748b;font-size:.9rem;background:#f1f5f9;border:1px dashed #cbd5e1;border-radius:6px}.code-editor-monaco-loading .pi-spinner{font-size:1rem}.html-preview-pane{flex:0 0 38%;min-width:260px;border-left:1px solid #404040;background:#111827;color:#e5e7eb;display:flex;flex-direction:column}.html-preview-pane__header{font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid #374151;color:#9ca3af}.html-preview-pane__body{flex:1 1 auto;overflow:auto;padding:12px;background:#fff;color:#111827}:host ::ng-deep .html-preview-pane__body .wuic-preview-component{border:1px solid #cbd5e1;border-left:4px solid #2563eb;border-radius:6px;padding:8px 10px;margin-bottom:10px;background:#f8fafc}:host ::ng-deep .html-preview-pane__body .wuic-preview-component__title{font-weight:600;color:#0f172a;margin-bottom:4px}:host ::ng-deep .html-preview-pane__body .wuic-preview-component__content{margin-top:8px}:host ::ng-deep .html-preview-pane__body .wuic-preview-field__label{display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px}:host ::ng-deep .html-preview-pane__body .wuic-preview-field__input{display:block;width:100%;border:1px solid #3b82f6;border-radius:4px;min-height:36px;box-sizing:border-box;background:#fff}:host ::ng-deep .monaco-editor .suggest-widget,:host ::ng-deep .monaco-editor .parameter-hints-widget,:host ::ng-deep .monaco-editor .monaco-hover{z-index:4000!important}:host ::ng-deep .monaco-editor .suggest-widget{height:220px!important;margin-top:-30px!important}:host ::ng-deep .monaco-editor .suggest-widget .tree,:host ::ng-deep .monaco-editor .suggest-widget .monaco-list,:host ::ng-deep .monaco-editor .suggest-widget .monaco-list-rows,:host ::ng-deep .monaco-editor .suggest-widget .monaco-scrollable-element{height:186px!important;max-height:186px!important}:host ::ng-deep .monaco-editor .suggest-widget .monaco-list-rows{box-sizing:border-box;padding-bottom:20px!important}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:10px}::-webkit-scrollbar-thumb{background:#ffffff80;border-radius:10px;visibility:hidden}::-webkit-scrollbar-thumb:hover{visibility:visible;background:#fffc}\n"] }]
+            args: [{ selector: 'wuic-code-editor', imports: [NgClass, NgStyle, FormsModule, MonacoEditorModule, ContextMenuModule, TreeModule, JsonSchemaTreeEditorComponent], template: "@if (render) {\r\n<div [ngClass]=\"{'fullscreen': fullscreen, 'no-full-screen': !fullscreen }\">\r\n  <div\r\n    [ngStyle]=\"{width: sqlObjView ? '22%' : null, display: sqlObjView ? null : 'none', position: fullscreen ? 'absolute' : null, 'left': fullscreen ? '0px' : null, 'top': fullscreen ? '0px' : null }\"\r\n    style=\"float: left; height: 100%; overflow: auto; background-color: #1e1e1e; z-index: 2000;\">\r\n    <p-tree [value]=\"primeTreeNodes\">\r\n      <ng-template let-node pTemplate=\"default\">\r\n        <span style=\"-webkit-user-select: none; -ms-user-select: none;  user-select: none;\" draggable=\"true\"\r\n          (dragstart)=\"onTreeNodeDragStart($event, node.data)\" (click)=\"editorOptions.onNodeClick($event, node.data)\"\r\n          (dragend)=\"onTreeNodeDragEnd($event, node.data)\">\r\n          <span>\r\n            {{ node.label }}\r\n          </span>\r\n        </span>\r\n      </ng-template>\r\n    </p-tree>\r\n  </div>\r\n  <div [ngStyle]=\"{width: sqlObjView ? '78%' : '100%', 'left': fullscreen ? (!sqlObjView ? '0px' : '22%') : null }\"\r\n    style=\"height: 100%; float: left;\">\r\n    <ul class=\"editor-btn\">\r\n      <li>\r\n        <div (click)=\"setFullScreen($event, this)\">\r\n          <i\r\n            [ngClass]=\"{'pi': true, 'pi-window-maximize': fullscreen == false, 'pi-window-minimize': fullscreen == true}\"></i>\r\n        </div>\r\n      </li>\r\n      @if (editorOptions.language == 'sql') {\r\n      <li>\r\n        <div (click)=\"toggleSqlObjView($event, this)\">\r\n          <i [ngClass]=\"{'pi': true, 'pi-server': true}\"></i>\r\n        </div>\r\n      </li>\r\n      }\r\n      @if (editorOptions.language == 'sql') {\r\n      <li>\r\n        <div (click)=\"testSql($event, this)\">\r\n          <i [ngClass]=\"{'pi': true, 'pi-verified': true}\"></i>\r\n        </div>\r\n      </li>\r\n      }\r\n      @if (field.mc_suggest_value_callback) {\r\n      <li>\r\n        <div (click)=\"suggest($event, this)\">\r\n          <i [ngClass]=\"{'pi': true, 'pi-question': true}\"></i>\r\n        </div>\r\n      </li>\r\n      }\r\n      @if (isHtmlEditor) {\r\n      <li>\r\n        <div (click)=\"formatHtmlNow($event)\" title=\"Format HTML\">\r\n          <i [ngClass]=\"{'pi': true, 'pi-align-left': true}\"></i>\r\n        </div>\r\n      </li>\r\n      <li>\r\n        <div (click)=\"toggleHtmlPreview($event)\" title=\"Toggle HTML preview\">\r\n          <i [ngClass]=\"{'pi': true, 'pi-eye': showHtmlPreview, 'pi-eye-slash': !showHtmlPreview}\"></i>\r\n        </div>\r\n      </li>\r\n      }\r\n      @if (isJsonEditor) {\r\n      <li>\r\n        <div (click)=\"formatJsonNow($event)\" title=\"Format JSON\">\r\n          <i [ngClass]=\"{'pi': true, 'pi-code': true}\"></i>\r\n        </div>\r\n      </li>\r\n      }\r\n      @if (isJsonEditor && jsonTreeToggle) {\r\n      <li>\r\n        <div (click)=\"toggleJsonTree($event)\" [title]=\"treeViewActive ? 'Codice' : 'Struttura'\">\r\n          <i [ngClass]=\"{'pi': true, 'pi-sitemap': !treeViewActive, 'pi-pencil': treeViewActive}\"></i>\r\n        </div>\r\n      </li>\r\n      }\r\n    </ul>\r\n    <div class=\"editor-shell\">\r\n      <!-- Monaco resta VIVO anche in vista struttura (solo nascosto): il model\r\n           e il record vengono riscritti a ogni modifica della struttura. -->\r\n      <div class=\"editor-pane\" [ngClass]=\"{'editor-pane--with-preview': isHtmlEditor && showHtmlPreview}\"\r\n        [style.display]=\"treeViewActive ? 'none' : null\">\r\n        <ngx-monaco-editor #editorRef [options]=\"editorOptions\" [ngModel]=\"editorModelValue\"\r\n          (ngModelChange)=\"onEditorModelChange($event)\"\r\n          [ngModelOptions]=\"{standalone: true}\"\r\n          [ngStyle]=\"{'left': fullscreen ? (!sqlObjView ? '0px' : '22%') : null, width: '100%' }\"\r\n          style=\"width: 100%; height: 100%;\"\r\n          (onDropIntoEditor)=\"editorOptions.onDropIntoEditor($event)\"></ngx-monaco-editor>\r\n      </div>\r\n      @if (treeViewActive) {\r\n      <div class=\"editor-pane\">\r\n        <wuic-json-schema-tree-editor\r\n          [schema]=\"jsonTreeSchema\"\r\n          [value]=\"treeValue\"\r\n          (valueChange)=\"onTreeValueChange($event)\" />\r\n      </div>\r\n      }\r\n      @if (isHtmlEditor && showHtmlPreview) {\r\n      <div class=\"html-preview-pane\">\r\n        <div class=\"html-preview-pane__header\">HTML Pseudo-Preview (sanitized)</div>\r\n        <div class=\"html-preview-pane__body\" [innerHTML]=\"sanitizedHtmlPreview\"></div>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n} @else {\r\n  <!-- Monaco viene inizializzato in modo asincrono (loader + registrazione\r\n       language provider) DOPO che il @defer del code-area-editor ha gia'\r\n       terminato il fetch del chunk: senza questo placeholder la sezione\r\n       collasserebbe a nulla in quel gap. Riserva l'altezza dell'editor\r\n       (200px, come .no-full-screen) per evitare il salto di layout. -->\r\n  <div class=\"code-editor-monaco-loading\">\r\n    <i class=\"pi pi-spin pi-spinner\"></i> Inizializzazione editor\u2026\r\n  </div>\r\n}\r\n\r\n@if (editorRef?.editorContent?.nativeElement) {\r\n<p-contextMenu [target]=\"editorRef?.editorContent?.nativeElement\" [model]=\"editorOptions.contextMenuItems\"\r\n  appendTo=\"body\" />\r\n}\r\n", styles: [".editor-btn{color:#fff;list-style-type:none;z-index:2001;visibility:visible;position:absolute;right:10px;top:10px;display:flex;gap:8px;margin:0;padding:0}.editor-btn li{list-style:none}.editor-btn li div{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid #334155;border-radius:4px;background:#0f172ad9;cursor:pointer}.fullscreen{position:fixed;inset:16px;z-index:3000;background:#1e1e1e;width:auto;height:auto}.fullscreen .editor-shell{position:absolute;inset:44px 0 0;height:auto}.fullscreen .editor-pane ngx-monaco-editor{position:relative;height:auto!important}.no-full-screen{width:100%;height:200px;position:relative}.editor-container{overflow:visible!important}.editor-shell{display:flex;width:100%;height:100%;min-height:0}.editor-pane{flex:1 1 auto;min-width:0;height:100%}.editor-pane--with-preview{flex:0 0 62%}.code-editor-monaco-loading{display:flex;align-items:center;justify-content:center;gap:8px;height:200px;color:#64748b;font-size:.9rem;background:#f1f5f9;border:1px dashed #cbd5e1;border-radius:6px}.code-editor-monaco-loading .pi-spinner{font-size:1rem}.html-preview-pane{flex:0 0 38%;min-width:260px;border-left:1px solid #404040;background:#111827;color:#e5e7eb;display:flex;flex-direction:column}.html-preview-pane__header{font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid #374151;color:#9ca3af}.html-preview-pane__body{flex:1 1 auto;overflow:auto;padding:12px;background:#fff;color:#111827}:host ::ng-deep .html-preview-pane__body .wuic-preview-component{border:1px solid #cbd5e1;border-left:4px solid #2563eb;border-radius:6px;padding:8px 10px;margin-bottom:10px;background:#f8fafc}:host ::ng-deep .html-preview-pane__body .wuic-preview-component__title{font-weight:600;color:#0f172a;margin-bottom:4px}:host ::ng-deep .html-preview-pane__body .wuic-preview-component__content{margin-top:8px}:host ::ng-deep .html-preview-pane__body .wuic-preview-field__label{display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px}:host ::ng-deep .html-preview-pane__body .wuic-preview-field__input{display:block;width:100%;border:1px solid #3b82f6;border-radius:4px;min-height:36px;box-sizing:border-box;background:#fff}:host ::ng-deep .monaco-editor .suggest-widget,:host ::ng-deep .monaco-editor .parameter-hints-widget,:host ::ng-deep .monaco-editor .monaco-hover{z-index:4000!important}:host ::ng-deep .monaco-editor .suggest-widget{height:220px!important;margin-top:-30px!important}:host ::ng-deep .monaco-editor .suggest-widget .tree,:host ::ng-deep .monaco-editor .suggest-widget .monaco-list,:host ::ng-deep .monaco-editor .suggest-widget .monaco-list-rows,:host ::ng-deep .monaco-editor .suggest-widget .monaco-scrollable-element{height:186px!important;max-height:186px!important}:host ::ng-deep .monaco-editor .suggest-widget .monaco-list-rows{box-sizing:border-box;padding-bottom:20px!important}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:10px}::-webkit-scrollbar-thumb{background:#ffffff80;border-radius:10px;visibility:hidden}::-webkit-scrollbar-thumb:hover{visibility:visible;background:#fffc}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MonacoEditorLoaderService }, { type: i1$2.HttpClient }, { type: MetadataProviderService }, { type: UserInfoService }, { type: DataProviderService }, { type: WtoolboxService }, { type: i1$3.DomSanitizer }], propDecorators: { style: [{
                 type: HostBinding,
                 args: ['style']
@@ -4160,4 +4160,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }] } });
 
 export { CodeEditorComponent };
-//# sourceMappingURL=wuic-framework-lib-code-editor.component-B6IpTSo8.mjs.map
+//# sourceMappingURL=wuic-framework-lib-code-editor.component-Bx_fV1X1.mjs.map