wuic-framework-lib 1.3.0 → 1.5.0

package/fesm2022/{wuic-framework-lib-chart-list.component-C02jeFGy.mjs → wuic-framework-lib-chart-list.component-0J1ghIrS.mjs}

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, ViewChild, Output, Input, Component } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { W as WtoolboxService, k as WuicClientException, l as WuicErrorCodes, G as GlobalHandler, M as MetadataProviderService, T as TranslationManagerService, U as UserInfoService, A as ArchetypeConfiguratorComponent } from './wuic-framework-lib-wuic-framework-lib-Deudd4MY.mjs';
+import { W as WtoolboxService, k as WuicClientException, l as WuicErrorCodes, G as GlobalHandler, M as MetadataProviderService, T as TranslationManagerService, U as UserInfoService, A as ArchetypeConfiguratorComponent } from './wuic-framework-lib-wuic-framework-lib-3TZ-j-yL.mjs';
 import * as i5 from 'primeng/chart';
 import { ChartModule } from 'primeng/chart';
-import * as i8 from '@ngx-translate/core';
+import * as i2 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i1 from '@angular/platform-browser';
 import * as i1$1 from '@angular/router';
@@ -1345,7 +1345,7 @@ 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: i5.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) {\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: i5.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: i2.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartListComponent, decorators: [{
             type: Component,
@@ -1377,4 +1377,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }] } });
 
 export { ChartListComponent };
-//# sourceMappingURL=wuic-framework-lib-chart-list.component-C02jeFGy.mjs.map
+//# sourceMappingURL=wuic-framework-lib-chart-list.component-0J1ghIrS.mjs.map

package/fesm2022/{wuic-framework-lib-code-editor.component-BZNLr0Jj.mjs → wuic-framework-lib-code-editor.component-C21mvjyr.mjs}

@@ -1,22 +1,22 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, SecurityContext, ViewChild, Input, HostBinding, Component } from '@angular/core';
-import * as i1$3 from '@angular/forms';
+import { EventEmitter, Output, Input, Component, inject, ElementRef, SecurityContext, ViewChild, HostBinding } from '@angular/core';
+import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i1 from '@materia-ui/ngx-monaco-editor';
+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, e as MetadatiColonna, m as MetaInfo, U as UserInfoService, f as DataProviderService } from './wuic-framework-lib-wuic-framework-lib-Deudd4MY.mjs';
-import { NgClass, NgStyle } from '@angular/common';
-import * as i14 from 'primeng/contextmenu';
+import { W as WtoolboxService, M as MetadataProviderService, e as MetadatiColonna, m as MetaInfo, U as UserInfoService, f as DataProviderService } from './wuic-framework-lib-wuic-framework-lib-3TZ-j-yL.mjs';
+import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
+import * as i10 from 'primeng/contextmenu';
 import { ContextMenuModule } from 'primeng/contextmenu';
 import * as i4 from 'primeng/tree';
 import { TreeModule } from 'primeng/tree';
-import * as i1$1 from '@angular/common/http';
+import * as i1$2 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import { from, combineLatest } from 'rxjs';
 import { parseFragment } from 'parse5';
-import * as i1$2 from '@angular/platform-browser';
+import * as i1$3 from '@angular/platform-browser';
 import * as i3 from 'primeng/api';
 
 class SqlModel {
@@ -2354,6 +2354,15 @@ class TSProvider {
         let self = this;
         let extraLibs = [];
         let libs = [];
+        // Snippet custom dal chiamante (customEditorConfig.snippets, mappa
+        // label -> testo): si SOMMANO ai base perche' il menu contestuale
+        // "Snippets" e' l'unico canale di inserimento guidato — es. il
+        // workflow-designer inietta voci per-nodo che compilano
+        // `wtoolbox.getWorkflowRouteNodePayload('<nodeId>')` con l'id reale.
+        // Mappa d'istanza (un TSProvider per editor): nessun effetto altrove.
+        if (formFieldOptions?.snippets && typeof formFieldOptions.snippets === 'object') {
+            Object.assign(this.snippets, formFieldOptions.snippets);
+        }
         let contextMenuItems = [
             {
                 label: 'Snippets', icon: 'pi pi-receipt',
@@ -2630,6 +2639,188 @@ class ContextMenuInteractionEmitter extends Emitter {
     }
 }
 
+/**
+ * Property-editor "a struttura" guidato da JSON SCHEMA — vista alternativa
+ * (toggle) del code-editor in modalita' json: aggiunta/rimozione di
+ * nodi/sottonodi TIPIZZATI in base allo schema, senza scrivere JSON a mano.
+ *
+ * Copertura schema v1 (subset pragmatico dei casi usati dagli schemi WUIC,
+ * es. customEditorConfig/props_bag/scene3d shader effect):
+ * - object con `properties` (+`required`): righe per le proprieta' presenti,
+ *   dropdown "aggiungi" per quelle mancanti, rimozione per le non-required;
+ * - string (input testo; color picker se pattern hex #rrggbb; select se enum);
+ * - number/integer (input numerico con min/max dallo schema);
+ * - boolean (checkbox); const (badge readonly);
+ * - array di number a lunghezza fissa (minItems=maxItems, es. direzioni xyz)
+ *   e array generici (item add/remove col tipo di `items`).
+ *
+ * Il valore viene MUTATO su una copia locale e riemesso integralmente a ogni
+ * modifica (`valueChange`): il code-editor lo serializza nel model Monaco e
+ * nel record, cosi' le due viste restano sempre allineate.
+ */
+class JsonSchemaTreeEditorComponent {
+    /** JSON schema radice (draft-07 style: type/properties/required/enum/const/items). */
+    schema = null;
+    /** Valore corrente (oggetto JS gia' parsato). Lavora su una copia profonda. */
+    value = null;
+    /** Emesso a ogni mutazione con l'intero valore aggiornato. */
+    valueChange = new EventEmitter();
+    /** Copia locale mutabile del valore. */
+    model = {};
+    ngOnChanges() {
+        try {
+            this.model = this.value != null ? JSON.parse(JSON.stringify(this.value)) : {};
+        }
+        catch {
+            this.model = {};
+        }
+    }
+    emit() {
+        this.valueChange.emit(JSON.parse(JSON.stringify(this.model)));
+    }
+    // --- Introspezione schema -------------------------------------------------
+    /** Righe (proprieta' PRESENTI nel valore) per un nodo object. */
+    rows(schema, obj) {
+        const props = schema?.properties || {};
+        const required = Array.isArray(schema?.required) ? schema.required : [];
+        return Object.keys(props)
+            .filter((key) => obj != null && Object.prototype.hasOwnProperty.call(obj, key))
+            .map((key) => ({
+            key,
+            schema: props[key],
+            kind: this.kindOf(props[key]),
+            required: required.includes(key)
+        }));
+    }
+    /** Proprieta' dello schema NON ancora presenti nel valore (per il dropdown "aggiungi"). */
+    addable(schema, obj) {
+        const props = schema?.properties || {};
+        return Object.keys(props).filter((key) => !(obj != null && Object.prototype.hasOwnProperty.call(obj, key)));
+    }
+    /** Classifica il tipo di editor per una property schema. */
+    kindOf(propSchema) {
+        if (!propSchema) {
+            return 'text';
+        }
+        if (propSchema.const !== undefined) {
+            return 'const';
+        }
+        if (Array.isArray(propSchema.enum)) {
+            return 'enum';
+        }
+        const type = propSchema.type;
+        if (type === 'boolean') {
+            return 'boolean';
+        }
+        if (type === 'number' || type === 'integer') {
+            return 'number';
+        }
+        if (type === 'object') {
+            return 'object';
+        }
+        if (type === 'array') {
+            const fixed = Number(propSchema.minItems) > 0 && propSchema.minItems === propSchema.maxItems
+                && (propSchema.items?.type === 'number' || propSchema.items?.type === 'integer');
+            return fixed ? 'vector' : 'array';
+        }
+        if (type === 'string' && typeof propSchema.pattern === 'string' && propSchema.pattern.includes('#[0-9a-fA-F]{6}')) {
+            return 'color';
+        }
+        return 'text';
+    }
+    /** Valore di default tipizzato per una property aggiunta dalla struttura. */
+    defaultFor(propSchema) {
+        if (!propSchema) {
+            return '';
+        }
+        if (propSchema.default !== undefined) {
+            return JSON.parse(JSON.stringify(propSchema.default));
+        }
+        if (propSchema.const !== undefined) {
+            return propSchema.const;
+        }
+        if (Array.isArray(propSchema.enum)) {
+            return propSchema.enum[0];
+        }
+        const type = propSchema.type;
+        if (type === 'boolean') {
+            return false;
+        }
+        if (type === 'number' || type === 'integer') {
+            return typeof propSchema.minimum === 'number' ? propSchema.minimum : 0;
+        }
+        if (type === 'array') {
+            const n = Number(propSchema.minItems) || 0;
+            return Array.from({ length: n }, () => this.defaultFor(propSchema.items));
+        }
+        if (type === 'object') {
+            const child = {};
+            const required = Array.isArray(propSchema.required) ? propSchema.required : [];
+            for (const key of required) {
+                child[key] = this.defaultFor(propSchema.properties?.[key]);
+            }
+            return child;
+        }
+        if (this.kindOf(propSchema) === 'color') {
+            return '#ffffff';
+        }
+        return '';
+    }
+    // --- Mutazioni ------------------------------------------------------------
+    setProp(obj, key, value) {
+        obj[key] = value;
+        this.emit();
+    }
+    setNumberProp(obj, key, raw) {
+        const parsed = Number(raw);
+        obj[key] = Number.isFinite(parsed) ? parsed : 0;
+        this.emit();
+    }
+    addProp(obj, key, propSchema, selectEl) {
+        if (!key) {
+            return;
+        }
+        obj[key] = this.defaultFor(propSchema);
+        if (selectEl) {
+            selectEl.value = '';
+        }
+        this.emit();
+    }
+    removeProp(obj, key) {
+        delete obj[key];
+        this.emit();
+    }
+    setVectorItem(arr, index, raw) {
+        const parsed = Number(raw);
+        arr[index] = Number.isFinite(parsed) ? parsed : 0;
+        this.emit();
+    }
+    addArrayItem(arr, itemSchema) {
+        arr.push(this.defaultFor(itemSchema));
+        this.emit();
+    }
+    removeArrayItem(arr, index) {
+        arr.splice(index, 1);
+        this.emit();
+    }
+    /** Etichetta breve per gli hint (description dello schema, troncata). */
+    hint(propSchema) {
+        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"] }] });
+}
+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"] }]
+        }], propDecorators: { schema: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 const WUIC_COMMON_INPUTS = [
     'record',
     'field',
@@ -3303,6 +3494,20 @@ class CodeEditorComponent {
      * Proprieta di stato del componente per editor model value, usata dalla logica interna e dal template.
      */
     editorModelValue = '';
+    /**
+     * Toggle "Struttura" per il json: se true (via @Input o
+     * `customEditorConfig.jsonTreeToggle`) la toolbar espone il passaggio
+     * Codice <-> property-editor treeview guidato dallo schema JSON
+     * ({@link JsonSchemaTreeEditorComponent}). Le due viste restano allineate:
+     * ogni modifica nella struttura riscrive model Monaco e record.
+     */
+    jsonTreeToggle = false;
+    /** true quando e' attiva la vista struttura (Monaco nascosto ma vivo). */
+    treeViewActive = false;
+    /** Schema JSON radice per la vista struttura (primo schema configurato). */
+    jsonTreeSchema = null;
+    /** Valore parsato passato alla vista struttura. */
+    treeValue = null;
     /**
      * Proprieta di stato del componente per sample code, usata dalla logica interna e dal template.
      */
@@ -3578,6 +3783,10 @@ class CodeEditorComponent {
                 await this.tsProvider.registerTSProvider(formFieldOptions, this.field, this.codeContext, this.record, this.metaSrv, this.userInfo);
             }
             else if (this.editorOptions.language === 'json') {
+                // Vista "Struttura" (property-editor treeview da schema): abilitabile
+                // via @Input jsonTreeToggle o `customEditorConfig.jsonTreeToggle`.
+                this.jsonTreeToggle = this.jsonTreeToggle || formFieldOptions.jsonTreeToggle === true;
+                this.jsonTreeSchema = formFieldOptions.schemas?.[0]?.schema || null;
                 // https://json-schema.org/learn/getting-started-step-by-step
                 // string.
                 //   number.
@@ -3772,6 +3981,59 @@ class CodeEditorComponent {
         this.skipNextAutoFormat = true;
         this.editor.getAction('editor.action.formatDocument')?.run().catch(() => undefined);
     }
+    /**
+     * Toggle Codice <-> Struttura (json): attivando la struttura il testo
+     * corrente viene parsato (JSON invalido -> toast e resta il codice);
+     * Monaco resta VIVO ma nascosto, cosi' il rientro e' istantaneo.
+     */
+    toggleJsonTree($event) {
+        $event?.stopPropagation?.();
+        $event?.preventDefault?.();
+        if (!this.isJsonEditor || !this.jsonTreeToggle) {
+            return;
+        }
+        if (this.treeViewActive) {
+            this.treeViewActive = false;
+            this.scheduleEditorLayout();
+            return;
+        }
+        const raw = String(this.editor?.getValue?.() ?? this.editorModelValue ?? '');
+        let parsed = {};
+        if (raw.trim()) {
+            try {
+                parsed = JSON.parse(raw);
+            }
+            catch {
+                WtoolboxService.messageNotificationService.add({
+                    severity: 'error',
+                    summary: 'json_format_error',
+                    detail: this.t('json_format_error_detail', 'JSON non valido: impossibile formattare.')
+                });
+                return;
+            }
+        }
+        if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+            WtoolboxService.messageNotificationService.add({
+                severity: 'warn',
+                summary: 'json_tree_root_object',
+                detail: this.t('json_tree_root_object_detail', 'La vista struttura richiede un oggetto JSON alla radice.')
+            });
+            return;
+        }
+        this.treeValue = parsed;
+        this.treeViewActive = true;
+    }
+    /**
+     * Modifica dalla vista struttura: riscrive il JSON formattato nel model
+     * Monaco e nel record (stesso percorso di formatJsonNow), cosi' le due
+     * viste e il valore persistito restano allineati.
+     */
+    onTreeValueChange(value) {
+        const pretty = JSON.stringify(value ?? {}, null, 2);
+        this.editorModelValue = pretty;
+        this.editor?.setValue(pretty);
+        this.record?.[this.field.mc_nome_colonna]?.next(pretty);
+    }
     /**
      * Gestisce la logica operativa di `formatJsonNow` orchestrando parse/stringify JSON e sync nel model editor.
      * @param $event Evento UI o payload evento che innesca il flusso del metodo.
@@ -3969,13 +4231,13 @@ class CodeEditorComponent {
             children: this.mapToPrimeTreeNodes(node?.items || [])
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CodeEditorComponent, deps: [{ token: i1.MonacoEditorLoaderService }, { token: i1$1.HttpClient }, { token: MetadataProviderService }, { token: UserInfoService }, { token: DataProviderService }, { token: WtoolboxService }, { token: i1$2.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" }, 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    </ul>\n    <div class=\"editor-shell\">\n      <div class=\"editor-pane\" [ngClass]=\"{'editor-pane--with-preview': isHtmlEditor && showHtmlPreview}\">\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 (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}\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%}.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}::-webkit-scrollbar-thumb:hover{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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MonacoEditorModule }, { kind: "component", type: i1.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"] }] });
+    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}::-webkit-scrollbar-thumb:hover{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: i10.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], 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    </ul>\n    <div class=\"editor-shell\">\n      <div class=\"editor-pane\" [ngClass]=\"{'editor-pane--with-preview': isHtmlEditor && showHtmlPreview}\">\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 (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}\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%}.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}::-webkit-scrollbar-thumb:hover{background:#fffc}\n"] }]
-        }], ctorParameters: () => [{ type: i1.MonacoEditorLoaderService }, { type: i1$1.HttpClient }, { type: MetadataProviderService }, { type: UserInfoService }, { type: DataProviderService }, { type: WtoolboxService }, { type: i1$2.DomSanitizer }], propDecorators: { style: [{
+            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}::-webkit-scrollbar-thumb:hover{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']
             }], contextMenuAnchor: [{
@@ -3993,7 +4255,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], ctxs: [{
                 type: ViewChild,
                 args: ['ctxs']
+            }], jsonTreeToggle: [{
+                type: Input
             }] } });
 
 export { CodeEditorComponent };
-//# sourceMappingURL=wuic-framework-lib-code-editor.component-BZNLr0Jj.mjs.map
+//# sourceMappingURL=wuic-framework-lib-code-editor.component-C21mvjyr.mjs.map