wuic-framework-lib 1.3.2 → 1.7.0

package/fesm2022/{wuic-framework-lib-code-editor.component-CLMDvOWs.mjs → wuic-framework-lib-code-editor.component-N6HMl2mf.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, NgZone, ChangeDetectorRef, 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-BRujEwpR.mjs';
-import { NgClass, NgStyle } from '@angular/common';
+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-dfLTqam5.mjs';
+import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
 import * as i14 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 {
@@ -92,9 +92,6 @@ class Statement {
     }
 }
 
-// import { editor } from 'monaco-editor';
-// import { LinkedList } from 'monaco-editor/esm/vs/base/common/linkedList';
-// import { MenuId, MenuRegistry } from 'monaco-editor/esm/vs/platform/actions/common/actions';
 class SqlProvider {
     http;
     currents;
@@ -124,8 +121,6 @@ class SqlProvider {
         this.editor = editor;
         this.editor['_onDropIntoEditor'] = this.editor['_register'](new DragDropInteractionEmitter$1(this.editor['_contributions'], this.editor['_deliveryQueue'], this.editor, this));
         this.editor['onDropIntoEditor'] = this.editor['_onDropIntoEditor'].event;
-        // this._onContextMenu = this._register(new InteractionEmitter(this._contributions, this._deliveryQueue));
-        // this.onContextMenu = this._onContextMenu.event;
         this.editor['_onContextMenu'] = this.editor['_register'](new ContextMenuInteractionEmitter$1(this.editor['_contributions'], this.editor['_deliveryQueue'], this.editor, this));
         this.editor['onContextMenu'] = this.editor['_onContextMenu'].event;
     }
@@ -196,10 +191,8 @@ class SqlProvider {
             }
         });
         this.editorOptions.onNodeClick = (event, dataItem) => {
-            // debugger;
         };
         this.editorOptions.onInit = (editor) => {
-            // debugger;
             this.editor = editor;
         };
         this.editorOptions.onNodeDragStart = (event, dataItem) => {
@@ -208,50 +201,11 @@ class SqlProvider {
             event.dataTransfer.setData("text/plain", JSON.stringify(dataItem));
         };
         this.editorOptions.onNodeDragEnd = (event, dataItem) => {
-            // debugger;
         };
         // monaco.languages.registerSignatureHelpProvider('sql', {
         //     signatureHelpTriggerCharacters: ['(', ','],
         //     provideSignatureHelp: (model: monaco.editor.ITextModel, position: monaco.Position, token: any, context: any) => {
-        //         var lastWord = model.getWordUntilPosition(position); //getWordUntilPosition //getWordAtPosition
-        //         var originalText = model.getValueInRange(model.getFullModelRange());
-        //         var fullText = this.sanitize(originalText);
-        //         var range: IRange = {
-        //             startLineNumber: position.lineNumber,
-        //             endLineNumber: position.lineNumber,
-        //             startColumn: lastWord.startColumn,
-        //             endColumn: lastWord.endColumn,
-        //         };
-        //         var contextInfo = this.getContextInfo(originalText, position);
-        //         this.parseStatements();
-        //         var currentStatement = this.currents.statements.find(x => x.index == contextInfo.currentStmntIndex);
-        //         if (currentStatement && currentStatement.words.length > 0
-        //             && currentStatement.words[0].toUpperCase() == 'INSERT INTO') {
         //         } else {
-        //             return {
-        //                 dispose: () => { },
-        //                 value: {
-        //                     activeParameter: 0,
-        //                     activeSignature: 0,
-        //                     signatures: [{
-        //                         label: 'string substr(string $string, int $start [, int $length])',
-        //                         parameters: [
-        //                             {
-        //                                 label: 'string $string',
-        //                                 documentation: 'The input string. Must be one character or longer.'
-        //                             },
-        //                             {
-        //                                 label: 'int $start',
-        //                                 documentation: "If "
-        //                             },
-        //                             {
-        //                                 label: 'int $length',
-        //                                 documentation: 'If '
-        //                             }
-        //                         ]
-        //                     }]
-        //                 }
-        //             };
         //         }
         //     }
         // });
@@ -387,7 +341,7 @@ class SqlProvider {
      * @returns SQL sanificato in singola linea.
      */
     sanitize(str) {
-        return str.replace(/(\r\n|\n|\r|\t)/gm, " ").replace(/ +(?= )/g, '');
+        return str.replaceAll(/(\r\n|\n|\r|\t)/gm, " ").replaceAll(/ +(?= )/g, '');
     }
     normalizeStatement(previousWords) {
         let skipNext = false;
@@ -567,8 +521,8 @@ class SqlProvider {
         if (!levelBlock && position.column == 1 && position.lineNumber > 1) {
             let levelLineBlock = parsedText.filter(y => y.find(z => z.lineNumber == position.lineNumber - 1));
             if (levelLineBlock.length > 0) {
-                levelBlock = levelLineBlock[levelLineBlock.length - 1];
-                charToken = levelBlock[levelBlock.length - 1];
+                levelBlock = levelLineBlock.at(-1);
+                charToken = levelBlock.at(-1);
             }
         }
         else {
@@ -576,7 +530,7 @@ class SqlProvider {
         }
         if (!levelBlock) {
             // Fallback: pick last parsed row block so autocomplete can continue safely.
-            levelBlock = parsedText[parsedText.length - 1];
+            levelBlock = parsedText.at(-1);
         }
         if (!charToken) {
             charToken = levelBlock?.[levelBlock.length - 1];
@@ -634,7 +588,8 @@ class SqlProvider {
         let statementIndex = 1;
         let txtLines = originalText.split('\r\n');
         let nestedStatements = this.getNestedStatements(originalText);
-        let parsedInput = this.processText(originalText, position);
+        let parsedInput;
+        this.processText(originalText, position);
         let adjacentChars = '';
         let x = txtLines[position.lineNumber - 1];
         if (x.length >= position.column - 1) {
@@ -661,7 +616,7 @@ class SqlProvider {
                     absolutePosition = endPosition;
                     previousWords = previousWords.concat(line.split(' ').filter(x => x.length > 0).map(x => x.trim().toUpperCase()).map(x => { return { word: x, statementIndx: statementIndex }; }));
                     if (cleanString != line) {
-                        previousNonNestedWords = previousNonNestedWords.concat(cleanString.substring(0, Math.min(position.column, line.length)).split(' ').filter(x => x.length > 0).map(x => x.trim().toUpperCase()).map(x => { return { word: x.replace(/§/g, ''), statementIndx: statementIndex }; }));
+                        previousNonNestedWords = previousNonNestedWords.concat(cleanString.substring(0, Math.min(position.column, line.length)).split(' ').filter(x => x.length > 0).map(x => x.trim().toUpperCase()).map(x => { return { word: x.replaceAll('§', ''), statementIndx: statementIndex }; }));
                     }
                     else {
                         previousNonNestedWords = previousNonNestedWords.concat(previousWords);
@@ -679,7 +634,7 @@ class SqlProvider {
                     absolutePosition = endPosition;
                     previousWords = previousWords.concat(line.substring(0, Math.min(position.column, line.length)).split(' ').filter(x => x.length > 0).map(x => x.trim().toUpperCase()).map(x => { return { word: x, statementIndx: statementIndex }; }));
                     if (cleanString != line) {
-                        previousNonNestedWords = previousNonNestedWords.concat(cleanString.substring(0, Math.min(position.column, line.length)).split(' ').filter(x => x.length > 0).map(x => x.trim().toUpperCase()).map(x => { return { word: x.replace(/§/g, ''), statementIndx: statementIndex }; }));
+                        previousNonNestedWords = previousNonNestedWords.concat(cleanString.substring(0, Math.min(position.column, line.length)).split(' ').filter(x => x.length > 0).map(x => x.trim().toUpperCase()).map(x => { return { word: x.replaceAll('§', ''), statementIndx: statementIndex }; }));
                     }
                     else {
                         previousNonNestedWords = previousNonNestedWords.concat(previousWords);
@@ -734,8 +689,8 @@ class SqlProvider {
         let normalized = this.normalizeStatement(contextWords.map((x, indx) => { return { token: x.word, tokenIndx: indx }; }));
         currentStatementWords = normalized.map(x => x.token.replace("(", ""));
         let keywordIndx = -1;
-        let matchingKeyWords = currentStatementWords.filter(x => sqlKeywords.indexOf(x.toUpperCase()) >= 0);
-        let matchingKeyWord = matchingKeyWords.length > 0 ? matchingKeyWords[matchingKeyWords.length - 1] : '';
+        let matchingKeyWords = currentStatementWords.filter(x => sqlKeywords.includes(x.toUpperCase()));
+        let matchingKeyWord = matchingKeyWords.length > 0 ? matchingKeyWords.at(-1) : '';
         if (matchingKeyWord) {
             keywordIndx = sqlKeywords.indexOf(matchingKeyWord.toUpperCase());
         }
@@ -765,7 +720,7 @@ class SqlProvider {
                     let currentSubStmntWords = subStmnt.statement.words;
                     switch (subStmnt.key) {
                         case 'DECLARE':
-                            if (currentSubStmntWords[currentSubStmntWords.length - 1].token.indexOf('@') < 0) {
+                            if (!currentSubStmntWords[currentSubStmntWords.length - 1].token.includes('@')) {
                                 return autocompleteContext.declaration;
                             }
                             else {
@@ -786,37 +741,38 @@ class SqlProvider {
                                 console.log('table!!!');
                                 return autocompleteContext.table;
                             });
-                        case 'SELECT':
+                        case 'SELECT': {
                             let previousWord;
                             let nextWord;
                             let previousWords = currentSubStmntWords.filter(x => x.tokenIndx < contextInfo.position.column - 1);
                             if (previousWords.length > 0) {
-                                previousWord = previousWords[previousWords.length - 1];
+                                previousWord = previousWords.at(-1);
                             }
                             let nextWords = currentSubStmntWords.filter(x => x.tokenIndx >= contextInfo.position.column - 1);
                             if (nextWords.length > 0) {
                                 nextWord = nextWords[0];
                             }
-                            let selectLastToken = (currentSubStmntWords[currentSubStmntWords.length - 1]?.token || '').trim();
-                            if (selectLastToken.indexOf('.') >= 0) {
+                            let selectLastToken = (currentSubStmntWords.at(-1)?.token || '').trim();
+                            if (selectLastToken.includes('.')) {
                                 // Alias-qualified column completion (e.g. AppCit. or AppCit.Sta)
                                 return autocompleteContext.columnWhereRestricted;
                             }
                             if (contextInfo.adjacentChars == '()' || (previousWord && nextWord && previousWord.token[previousWord.token.length - 1] == '(' && nextWord.token[0] == ')')) {
                                 return autocompleteContext.columnSelect;
                             }
-                            else if (currentSubStmntWords[currentSubStmntWords.length - 1].token.indexOf(',') >= 0 || currentSubStmntWords[currentSubStmntWords.length - 1].token.toUpperCase() == 'SELECT') {
+                            else if (currentSubStmntWords.at(-1).token.includes(',') || currentSubStmntWords.at(-1).token.toUpperCase() == 'SELECT') {
                                 return autocompleteContext.columnSelect;
                             }
                             else {
                                 return autocompleteContext.statementFrom;
                             }
+                        }
                         case 'FROM':
                             // After at least one table in FROM, allow partial clause prefixes
                             // (e.g. "I" => "INNER JOIN") while keeping schema suggestions otherwise.
                             return this.evaluateAutocompleteContext(contextInfo, subStmnt.statement, false, subStmnt.statement.sqlTables.length > 0 ? autocompleteContext.statementWhereJoin : null);
                         case 'AS':
-                            if (matchingKeyWords.length > 1 && matchingKeyWords[matchingKeyWords.length - 2] == 'WITH') {
+                            if (matchingKeyWords.length > 1 && matchingKeyWords.at(-2) == 'WITH') {
                                 return autocompleteContext.statementSelect;
                             }
                             else {
@@ -832,16 +788,18 @@ class SqlProvider {
                                 if (schemaTableAliasToken) {
                                     let schemaAndTableOrAlias = schemaTableAliasToken.token.split('.').filter(x => x.length > 0);
                                     if (schemaAndTableOrAlias.length > 0) {
+                                        // intentionally empty: schema part already typed, fall through to next token checks
                                     }
                                     else {
                                         return autocompleteContext.schema;
                                     }
                                     if (schemaAndTableOrAlias.length >= 1) {
+                                        // intentionally empty: table part already typed, fall through to join context checks
                                     }
                                     else {
                                         return autocompleteContext.table;
                                     }
-                                    if (currentSubStmntWords[currentSubStmntWords.length - 1].token.toUpperCase() == subStmnt.key.toUpperCase()) {
+                                    if (currentSubStmntWords.at(-1).token.toUpperCase() == subStmnt.key.toUpperCase()) {
                                         return autocompleteContext.schemaJoin;
                                     }
                                     else {
@@ -862,28 +820,24 @@ class SqlProvider {
                         case 'GROUP BY':
                             return autocompleteContext.columnGroupBy;
                         case 'SET':
-                            if (currentSubStmntWords[currentSubStmntWords.length - 1].token.trim().toUpperCase() == 'SET') {
+                            if (currentSubStmntWords.at(-1).token.trim().toUpperCase() == 'SET') {
                                 let updtStmnt = currentStmnt.subStatements.find(x => x.key == 'UPDATE');
                                 if (updtStmnt && updtStmnt.statement.words.length > 1) {
-                                    // this.currents.table = updtStmnt.statement.sqlTables[updtStmnt.statement.sqlTables.length - 1];
                                     return autocompleteContext.columnWhere;
                                 }
                                 else {
                                     return autocompleteContext.variable;
                                 }
                             }
+                            else if (currentSubStmntWords.at(-1).token.trim().endsWith(',')) {
+                                return autocompleteContext.columnWhere;
+                            }
+                            else if (currentSubStmntWords.at(-1).token.trim() == '=') {
+                                return autocompleteContext.columnWhereAndVariables;
+                            }
                             else {
-                                if (currentSubStmntWords[currentSubStmntWords.length - 1].token.trim().endsWith(',')) {
-                                    return autocompleteContext.columnWhere;
-                                }
-                                else if (currentSubStmntWords[currentSubStmntWords.length - 1].token.trim() == '=') {
-                                    return autocompleteContext.columnWhereAndVariables;
-                                }
-                                else {
-                                    return autocompleteContext.assignmentOperator;
-                                }
+                                return autocompleteContext.assignmentOperator;
                             }
-                            break;
                     }
                 }
             }
@@ -892,7 +846,7 @@ class SqlProvider {
     }
     evaluateAutocompleteContext(contextInfo, statement, skipAs = false, defaultAutoCtx = null, contextDelegate = null) {
         const lastToken = statement?.words?.length
-            ? (statement.words[statement.words.length - 1].token || '').trim()
+            ? (statement.words.at(-1).token || '').trim()
             : '';
         const lastDotIndex = lastToken.lastIndexOf('.');
         if (lastDotIndex >= 0) {
@@ -907,18 +861,14 @@ class SqlProvider {
                     return defaultAutoCtx;
                 }
             }
+            else if (statement.sqlTables.length > 0) {
+                return autocompleteContext.columnWhereRestricted;
+            }
+            else if (!skipAs) {
+                return autocompleteContext.table;
+            }
             else {
-                if (statement.sqlTables.length > 0) {
-                    return autocompleteContext.columnWhereRestricted;
-                }
-                else {
-                    if (!skipAs) {
-                        return autocompleteContext.table;
-                    }
-                    else {
-                        return autocompleteContext.tableNoAs;
-                    }
-                }
+                return autocompleteContext.tableNoAs;
             }
         }
         else {
@@ -957,7 +907,7 @@ class SqlProvider {
      * @returns Context specifico WHERE.
      */
     evaluateAutocompleteWhereContext(currents, currentStatementWords, whereSubStatemnt) {
-        let lastToken = currentStatementWords[currentStatementWords.length - 1].trim().toUpperCase();
+        let lastToken = currentStatementWords.at(-1).trim().toUpperCase();
         if (lastToken == 'AND' || lastToken == 'WHERE') {
             return autocompleteContext.columnWhere;
         }
@@ -1003,7 +953,6 @@ class SqlProvider {
         }
         let subStatement;
         let nestedStatements = this.getNestedStatements(statement);
-        let z = nestedStatements[0];
         statementObj.statement = this.removeNestedStatements(statement, nestedStatements);
         let previousWords = statement.split(' ').filter(x => x.length > 0).map((x, splitIndx) => {
             return {
@@ -1023,8 +972,7 @@ class SqlProvider {
             const elementObj = sanitizedPreviousWords[indx];
             let element = elementObj.token;
             let indxOffset = 0;
-            for (let nestedIndex = 0; nestedIndex < nestedStatements.length; nestedIndex++) {
-                nested = nestedStatements[nestedIndex];
+            for (nested of nestedStatements) {
                 if (nested.length > 1 && elementObj.tokenIndx >= nested.index && elementObj.tokenIndx <= nested.index + nested[1].length) {
                     this.parseStatementRecursive(nested[1], indx, subStatement);
                     let firstWordOutsideNested = sanitizedPreviousWords.find(x => x.tokenIndx > nested.index + nested[1].length);
@@ -1035,7 +983,7 @@ class SqlProvider {
                 indx = indxOffset;
                 continue;
             }
-            if (sqlKeywords.indexOf(element.toUpperCase()) >= 0) {
+            if (sqlKeywords.includes(element.toUpperCase())) {
                 currentStatementTag = element;
                 subStatement = new Statement(element, Object.keys(statementObj.subStatements).length + 1);
                 subStatement.words.push(elementObj);
@@ -1102,7 +1050,7 @@ class SqlProvider {
                 }
                 return col;
             });
-            if (!this.currents.globalTables.find(x => x.table.toUpperCase() == table.table.toUpperCase())) {
+            if (!this.currents.globalTables.some(x => x.table.toUpperCase() == table.table.toUpperCase())) {
                 this.currents.globalTables.push(table);
             }
             return true;
@@ -1116,12 +1064,12 @@ class SqlProvider {
      * @returns `true` se e stata aggiunta una dichiarazione.
      */
     populateDeclarations(statement, found) {
-        if (statement.indexOf('@') >= 0) {
+        if (statement.includes('@')) {
             let decStr = statement.trim().toUpperCase().split(' ');
             if (decStr.length >= 3) {
                 let dec = { paramName: decStr[1], paramtype: decStr[2], usertype: null };
                 let type;
-                if (decStr[2].indexOf('.') >= 0) {
+                if (decStr[2].includes('.')) {
                     type = this.userDefTypes.find(x => x.table.toUpperCase() == decStr[2].split('.')[1] && x.schema.toUpperCase() == decStr[2].split('.')[0]);
                 }
                 else {
@@ -1130,7 +1078,7 @@ class SqlProvider {
                 if (type) {
                     dec.usertype = type;
                 }
-                if (!this.currents.declarations.find(x => x.paramName.toUpperCase() == dec.paramName.toUpperCase())) {
+                if (!this.currents.declarations.some(x => x.paramName.toUpperCase() == dec.paramName.toUpperCase())) {
                     this.currents.declarations.push(dec);
                 }
                 found = true;
@@ -1148,12 +1096,12 @@ class SqlProvider {
     populateCurrentColumns(element, stmntIndx, statementObj, subStatement) {
         let selStmnt = statementObj.subStatements.find(x => x.key == 'SELECT');
         if (selStmnt) {
-            let columns = selStmnt.statement.statement.replace('SELECT', '').trim().toUpperCase().split(',').filter(x => x).map(x => {
+            let columns = selStmnt.statement.statement.replace('SELECT', '').trim().toUpperCase().split(',').filter(Boolean).map(x => {
                 let col = null;
                 x = x.trim();
                 let ownerTbl;
                 let isAlias = false;
-                if (x.indexOf('.') >= 0) {
+                if (x.includes('.')) {
                     let schema = x.split('.')[0].replace('[', '').replace(']', '').replace('(', '').replace(')', '').toUpperCase();
                     let ownerSchema = this.schemas.find(s => s.schema.toUpperCase() === schema);
                     if (!ownerSchema) {
@@ -1205,19 +1153,19 @@ class SqlProvider {
                     }
                 }
                 return col;
-            }).filter(x => x);
+            }).filter(Boolean);
             columns.forEach(x => {
                 let normalizedColumn = x?.column?.column?.toUpperCase();
                 if (!normalizedColumn) {
                     return;
                 }
                 if (statementObj) {
-                    if (!statementObj.sqlColumns.find(c => c?.column?.column?.toUpperCase() == normalizedColumn)) {
+                    if (!statementObj.sqlColumns.some(c => c?.column?.column?.toUpperCase() == normalizedColumn)) {
                         statementObj.sqlColumns.push(x);
                     }
                 }
                 if (subStatement) {
-                    if (!subStatement.sqlColumns.find(c => c?.column?.column?.toUpperCase() == normalizedColumn)) {
+                    if (!subStatement.sqlColumns.some(c => c?.column?.column?.toUpperCase() == normalizedColumn)) {
                         subStatement.sqlColumns.push(x);
                     }
                 }
@@ -1279,7 +1227,7 @@ class SqlProvider {
     populateCurrentSchemaTables(element, stmntIndx, found, statementObj, subStatement) {
         let tblStr = element.trim().toUpperCase().split(' ');
         if (tblStr.length > 0 && tblStr[0].split('.').length > 1) {
-            let identifierParts = tblStr[0].replace('[', '').replace(']', '').split('.').filter(x => x);
+            let identifierParts = tblStr[0].replace('[', '').replace(']', '').split('.').filter(Boolean);
             let schemaName = '';
             let tableName = '';
             let dbName = '';
@@ -1331,11 +1279,11 @@ class SqlProvider {
                 let aliasCandidate = identifierParts[0] || '';
                 let matchTbl = statementObj.sqlTables.find(x => x.usedAlias.toUpperCase() === aliasCandidate.toUpperCase());
                 if (matchTbl) {
-                    if (!subStatement.sqlTables.find(x => x.table.table.toUpperCase() == matchTbl.table.table.toUpperCase() && x.table.schema.toUpperCase() == matchTbl.table.schema.toUpperCase())) {
+                    if (!subStatement.sqlTables.some(x => x.table.table.toUpperCase() == matchTbl.table.table.toUpperCase() && x.table.schema.toUpperCase() == matchTbl.table.schema.toUpperCase())) {
                         subStatement.sqlTables.push({ table: matchTbl.table, usedAlias: matchTbl.usedAlias });
                     }
                     let matchSchema = statementObj.sqlModels.find(x => matchTbl.table.schema.toUpperCase() === x.schema.toUpperCase());
-                    if (matchSchema && !subStatement.sqlModels.find(x => matchTbl.table.schema.toUpperCase() === x.schema.toUpperCase())) {
+                    if (matchSchema && !subStatement.sqlModels.some(x => matchTbl.table.schema.toUpperCase() === x.schema.toUpperCase())) {
                         subStatement.sqlModels.push(matchSchema);
                     }
                 }
@@ -1465,7 +1413,7 @@ class SqlProvider {
                     }
                 ].filter(x => {
                     if (currentStatement) {
-                        if (currentStatement.subStatements.find(s => x.label.indexOf('JOIN') < 0 && x.label == s.key.toUpperCase())) {
+                        if (currentStatement.subStatements.some(s => !x.label.includes('JOIN') && x.label == s.key.toUpperCase())) {
                             return false;
                         }
                     }
@@ -1502,7 +1450,7 @@ class SqlProvider {
                     });
                 }
                 ci = ci.concat(selectFields.filter(x => {
-                    if (context == autocompleteContext.columnSelect && currentStatement.sqlColumns.find(c => c?.column?.column?.toUpperCase() == x.column.toUpperCase())) {
+                    if (context == autocompleteContext.columnSelect && currentStatement.sqlColumns.some(c => c?.column?.column?.toUpperCase() == x.column.toUpperCase())) {
                         return false;
                     }
                     return true;
@@ -1515,7 +1463,7 @@ class SqlProvider {
                             .replace('(', '')
                             .replace(')', '')
                             .split('.')
-                            .filter(y => y)
+                            .filter(Boolean)
                             .map(y => y.trim().toUpperCase());
                         if (!scaffoldedOnly && restrictedParts.length >= 3) {
                             let dbFilter = restrictedParts[0];
@@ -1526,7 +1474,7 @@ class SqlProvider {
                                 && x.table.toUpperCase() === tableFilter
                                 && (!dbFilter || colDb === dbFilter);
                         }
-                        if (restrictedParts.length >= 1 && restrictedToken.indexOf('.') >= 0) {
+                        if (restrictedParts.length >= 1 && restrictedToken.includes('.')) {
                             let aliasFilter = restrictedParts[0];
                             return (x.tableAlias || '').toUpperCase() === aliasFilter;
                         }
@@ -1538,8 +1486,8 @@ class SqlProvider {
                     return true;
                 }).map(x => {
                     let restrictedToken = (currentSubStatement?.words?.[currentSubStatement.words.length - 1]?.token || '').trim();
-                    let isAliasQualifiedCompletion = context == autocompleteContext.columnWhereRestricted && restrictedToken.indexOf('.') >= 0;
-                    let aliasStmnts = currentStatement.subStatements.filter(s => s.key == 'FROM' || s.key.indexOf('JOIN') >= 0 || s.key == 'ON');
+                    let isAliasQualifiedCompletion = context == autocompleteContext.columnWhereRestricted && restrictedToken.includes('.');
+                    let aliasStmnts = currentStatement.subStatements.filter(s => s.key == 'FROM' || s.key.includes('JOIN') || s.key == 'ON');
                     let aliasStmnt = aliasStmnts.find(y => y.statement.sqlTables.length > 0 &&
                         y.statement.sqlTables[0].table.schema.toUpperCase() == x.schema.toUpperCase() &&
                         y.statement.sqlTables[0].table.table.toUpperCase() == x.table.toUpperCase());
@@ -1554,11 +1502,13 @@ class SqlProvider {
                     else if (aliasStmnt) {
                         str = `${aliasStmnt.statement.sqlTables[0].usedAlias}.${x.column}`;
                     }
-                    let longDescr = `${x.column} (${x.type}, ${x.isNullable ? 'null' : 'not null'})${x.columnDescription ? ` - ${x.columnDescription}` : ''}`;
+                    const columnDescriptionSuffix = x.columnDescription ? ` - ${x.columnDescription}` : '';
+                    let longDescr = `${x.column} (${x.type}, ${x.isNullable ? 'null' : 'not null'})${columnDescriptionSuffix}`;
+                    let nonPkeyKind = (x.parentRelation) ? monaco.languages.CompletionItemKind.Reference : monaco.languages.CompletionItemKind.Field;
                     return {
                         documentation: longDescr,
                         insertText: str,
-                        kind: x.isPkey ? monaco.languages.CompletionItemKind.Keyword : (x.parentRelation) ? monaco.languages.CompletionItemKind.Reference : monaco.languages.CompletionItemKind.Field,
+                        kind: x.isPkey ? monaco.languages.CompletionItemKind.Keyword : nonPkeyKind,
                         label: longDescr,
                         range: range
                     };
@@ -1587,21 +1537,6 @@ class SqlProvider {
                 break;
             case autocompleteContext.comparisonOperator:
                 ci = comparisonOperators.filter(x => {
-                    // if (this.currents.column && this.currents.column.type) {
-                    //     var sqlType = sqlTypes.find(x => x.name.toUpperCase() == this.currents.column.type.toUpperCase());
-                    //     if (sqlType) {
-                    //         switch (true) {
-                    //             case sqlType.isString:
-                    //                 return ['=', '<>', '!=', '!', 'NOT', 'LIKE', 'IN', 'IS', 'IS NOT NULL'].indexOf(x) >= 0;
-                    //             case sqlType.isNumber:
-                    //                 return ['=', '<>', '<', '<=', '>', '>=', '!=', '!', 'NOT', 'BETWEEN', 'IN', 'IS', 'IS NOT NULL'].indexOf(x) >= 0;
-                    //             case sqlType.isBool:
-                    //                 return ['=', '<>', '!=', '!', 'NOT', 'IS', 'IS NOT NULL'].indexOf(x) >= 0;
-                    //             default:
-                    //                 return true;
-                    //         }
-                    //     }
-                    // }
                     return true;
                 }).map(x => {
                     return {
@@ -1659,17 +1594,17 @@ class SqlProvider {
                 break;
             case autocompleteContext.table:
             case autocompleteContext.tableNoAs:
-            case autocompleteContext.tableJoin:
+            case autocompleteContext.tableJoin: {
                 let rawScopedToken = (currentSubStatement?.words?.[currentSubStatement.words.length - 1]?.token || '').trim();
-                let currentSchema = currentStatement.sqlModels[currentStatement.sqlModels.length - 1]?.schema;
+                let currentSchema = currentStatement.sqlModels.at(-1)?.schema;
                 let scopedParts = rawScopedToken
                     .replace('[', '')
                     .replace(']', '')
                     .replace('(', '')
                     .replace(')', '')
                     .split('.')
-                    .filter(x => x);
-                let isDbScopedSchema = !scaffoldedOnly && rawScopedToken.indexOf('.') >= 0;
+                    .filter(Boolean);
+                let isDbScopedSchema = !scaffoldedOnly && rawScopedToken.includes('.');
                 if (context == autocompleteContext.tableJoin) {
                     currentStatement.sqlTables.forEach(tbl => {
                         this.parseTblRelations(currentStatement, tbl, ci, range, currentSchema);
@@ -1739,13 +1674,10 @@ class SqlProvider {
                             let txtLine = originalText.split('\n')[range.startLineNumber - 1];
                             let qualifiedSchema = scopedModel ? this.getModelSchemaName(scopedModel) : x.schema;
                             let startCol = txtLine.toUpperCase().indexOf(`${qualifiedSchema.toUpperCase()}.`);
-                            let tokenHasQualifier = rawScopedToken.indexOf('.') >= 0;
-                            let insertTxt = (!x.alias || context == autocompleteContext.tableNoAs) ?
-                                (tokenHasQualifier
-                                    ? x.table
-                                    : `${context != autocompleteContext.tableNoAs ? `${qualifiedSchema}.` : ''}${x.table}`)
-                                :
-                                    ``;
+                            let tokenHasQualifier = rawScopedToken.includes('.');
+                            let schemaPrefix = context != autocompleteContext.tableNoAs ? `${qualifiedSchema}.` : '';
+                            let qualifiedInsert = tokenHasQualifier ? x.table : `${schemaPrefix}${x.table}`;
+                            let insertTxt = (!x.alias || context == autocompleteContext.tableNoAs) ? qualifiedInsert : ``;
                             return {
                                 documentation: x.table,
                                 insertText: insertTxt,
@@ -1764,16 +1696,19 @@ class SqlProvider {
                             };
                         }
                         catch (error) {
+                            // Malformed table suggestion entry — skip this completion item
+                            // (return null) instead of breaking the whole autocomplete list.
                             debugger;
                             return null;
                         }
                     });
                 }
                 break;
-            case autocompleteContext.declaration:
+            }
+            case autocompleteContext.declaration: {
                 let paramName = '@Param';
                 let paramIndx = 1;
-                while (this.currents.declarations.find(x => x.paramName.toUpperCase() === `${paramName}${paramIndx.toString()}`.toUpperCase())) {
+                while (this.currents.declarations.some(x => x.paramName.toUpperCase() === `${paramName}${paramIndx.toString()}`.toUpperCase())) {
                     paramIndx++;
                 }
                 paramName = `@Param${paramIndx}`;
@@ -1787,13 +1722,19 @@ class SqlProvider {
                     }
                 ];
                 break;
+            }
             case autocompleteContext.sqlType:
                 ci = sqlTypes.map(x => {
+                    let sizeHint = '';
+                    if (x.isString && x.name.toUpperCase().includes("VAR")) {
+                        sizeHint = '(100)';
+                    }
+                    else if (x.isNumber && x.name.toUpperCase() == "DECIMAL") {
+                        sizeHint = '(18, 2)';
+                    }
                     return {
                         documentation: x.name,
-                        insertText: `${x.name} ${x.isString && x.name.toUpperCase().indexOf("VAR") >= 0 ? '(100)' :
-                            x.isNumber && x.name.toUpperCase() == "DECIMAL" ? '(18, 2)' :
-                                ''}= null;\n`,
+                        insertText: `${x.name} ${sizeHint}= null;\n`,
                         kind: monaco.languages.CompletionItemKind.TypeParameter,
                         label: x.name,
                         range: range
@@ -1843,7 +1784,7 @@ class SqlProvider {
             return modelAny.database;
         }
         let schema = model.schema || '';
-        if (schema.indexOf('.') >= 0) {
+        if (schema.includes('.')) {
             return schema.split('.')[0];
         }
         return null;
@@ -1858,7 +1799,7 @@ class SqlProvider {
             return '';
         }
         let schema = model.schema || '';
-        if (schema.indexOf('.') >= 0) {
+        if (schema.includes('.')) {
             return schema.split('.').slice(1).join('.');
         }
         return schema;
@@ -1907,7 +1848,7 @@ class SqlProvider {
             if (rel) {
                 relations.push(rel);
             }
-            if (col.parentRelation && col.parentRelation.tableFK.toUpperCase() == tbl.table.table.toUpperCase() && col.parentRelation.schemaFK.toUpperCase() == tbl.table.schema.toUpperCase() && (!schemaFilter || col.parentRelation.schemaPK.toUpperCase() == schemaFilter.toUpperCase())) {
+            if (col.parentRelation?.tableFK.toUpperCase() == tbl.table.table.toUpperCase() && col.parentRelation.schemaFK.toUpperCase() == tbl.table.schema.toUpperCase() && (!schemaFilter || col.parentRelation.schemaPK.toUpperCase() == schemaFilter.toUpperCase())) {
                 relations.push(col.parentRelation);
             }
         });
@@ -1919,19 +1860,21 @@ class SqlProvider {
             let aliasTblFK;
             if (rel.schemaFK == tbl.table.schema && rel.tableFK == tbl.table.table) {
                 aliasTblPK = tblPK.alias ? tblPK.alias : `${tblPK.schema}.${tblPK.table}`;
-                aliasTblFK = tbl.usedAlias ? tbl.usedAlias : (tblFK.alias ? tblFK.alias : `${tblFK.schema}.${tblFK.table}`);
+                const fkFallbackAlias = tblFK.alias ? tblFK.alias : `${tblFK.schema}.${tblFK.table}`;
+                aliasTblFK = tbl.usedAlias ? tbl.usedAlias : fkFallbackAlias;
                 joinSuggestion = `\t${rel.schemaPK}.${rel.tablePK} AS ${aliasTblPK} ON \n\t${aliasTblFK}.${rel.columnFK} = \n\t${aliasTblPK}.${rel.columnPK}`;
             }
             else {
-                aliasTblPK = tbl.usedAlias ? tbl.usedAlias : (tblPK.alias ? tblPK.alias : `${tblPK.schema}.${tblPK.table}`);
+                const pkFallbackAlias = tblPK.alias ? tblPK.alias : `${tblPK.schema}.${tblPK.table}`;
+                aliasTblPK = tbl.usedAlias ? tbl.usedAlias : pkFallbackAlias;
                 aliasTblFK = tblFK.alias ? tblFK.alias : `${tblFK.schema}.${tblFK.table}`;
                 joinSuggestion = `\t${rel.schemaFK}.${rel.tableFK} AS ${aliasTblFK} ON \n\t${aliasTblPK}.${rel.columnPK} = \n\t${aliasTblFK}.${rel.columnFK}`;
             }
             ci.push({
-                documentation: joinSuggestion.replace(/(\r\n|\n|\r|\t)/gm, ' '),
+                documentation: joinSuggestion.replaceAll(/(\r\n|\n|\r|\t)/gm, ' '),
                 insertText: `\n${joinSuggestion}`,
                 kind: monaco.languages.CompletionItemKind.Reference,
-                label: joinSuggestion.replace(/(\r\n|\n|\r|\t)/gm, ' '),
+                label: joinSuggestion.replaceAll(/(\r\n|\n|\r|\t)/gm, ' '),
                 range: range
             });
         });
@@ -1946,10 +1889,9 @@ class SqlProvider {
         let tbl;
         this.schemas.forEach(schema => {
             schema.tables.forEach(table => {
-                if (table.alias && table.alias.toUpperCase() === alias.toUpperCase()) {
+                if (table.alias?.toUpperCase() === alias.toUpperCase()) {
                     tbl = table;
                     tbl.schemaObj = schema;
-                    return;
                 }
             });
             if (tbl) {
@@ -1991,12 +1933,12 @@ let DragDropInteractionEmitter$1 = class DragDropInteractionEmitter extends Emit
                                     let getDbPrefixFor = (schemaName, tableName, preferredDbName) => {
                                         let owner = providerSchemas.find(m => {
                                             if (preferredDbName) {
-                                                let mDb = (m.database || ((m.schema || '').indexOf('.') >= 0 ? (m.schema || '').split('.')[0] : '') || '').toUpperCase();
+                                                let mDb = (m.database || ((m.schema || '').includes('.') ? (m.schema || '').split('.')[0] : '') || '').toUpperCase();
                                                 if (mDb !== preferredDbName.toUpperCase()) {
                                                     return false;
                                                 }
                                             }
-                                            let mSchema = (m.schema || '').indexOf('.') >= 0 ? (m.schema || '').split('.').slice(1).join('.') : (m.schema || '');
+                                            let mSchema = (m.schema || '').includes('.') ? (m.schema || '').split('.').slice(1).join('.') : (m.schema || '');
                                             let schemaMatch = mSchema.toUpperCase() === (schemaName || '').toUpperCase();
                                             if (!schemaMatch) {
                                                 return false;
@@ -2009,13 +1951,13 @@ let DragDropInteractionEmitter$1 = class DragDropInteractionEmitter extends Emit
                                         if (!owner) {
                                             return '';
                                         }
-                                        let db = owner.database || ((owner.schema || '').indexOf('.') >= 0 ? (owner.schema || '').split('.')[0] : '');
+                                        let db = owner.database || ((owner.schema || '').includes('.') ? (owner.schema || '').split('.')[0] : '');
                                         return db ? `${db}.` : '';
                                     };
                                     if (dataItem.sqlModel) {
                                         let modelAny = dataItem.sqlModel;
-                                        let modelDb = modelAny.database || ((dataItem.sqlModel.schema || '').indexOf('.') >= 0 ? (dataItem.sqlModel.schema || '').split('.')[0] : '');
-                                        let modelSchema = (dataItem.sqlModel.schema || '').indexOf('.') >= 0
+                                        let modelDb = modelAny.database || ((dataItem.sqlModel.schema || '').includes('.') ? (dataItem.sqlModel.schema || '').split('.')[0] : '');
+                                        let modelSchema = (dataItem.sqlModel.schema || '').includes('.')
                                             ? (dataItem.sqlModel.schema || '').split('.').slice(1).join('.')
                                             : (dataItem.sqlModel.schema || '');
                                         callback(modelDb ? `${modelDb}.${modelSchema}.` : `${modelSchema}.`);
@@ -2037,7 +1979,7 @@ let DragDropInteractionEmitter$1 = class DragDropInteractionEmitter extends Emit
                                     }
                                     else if (dataItem.sqlColumn) {
                                         let suggestions = self.sqlProvider.getAutocompleteSuggestions(self.editor.getValue(), self.position);
-                                        let colSugg = suggestions.suggestions.find(x => x.insertText.indexOf(dataItem.sqlColumn.column) >= 0);
+                                        let colSugg = suggestions.suggestions.find(x => x.insertText.includes(dataItem.sqlColumn.column));
                                         if (colSugg) {
                                             callback(colSugg.insertText);
                                         }
@@ -2049,8 +1991,8 @@ let DragDropInteractionEmitter$1 = class DragDropInteractionEmitter extends Emit
                                     }
                                     else if (dataItem.sqlRelation) {
                                         let suggestions = self.sqlProvider.getAutocompleteSuggestions(self.editor.getValue(), self.position);
-                                        if (suggestions && suggestions.suggestions) {
-                                            let relSugg = suggestions.suggestions.find(x => x.insertText.indexOf(`${dataItem.sqlRelation.schemaPK}.${dataItem.sqlRelation.tablePK}`) >= 0);
+                                        if (suggestions?.suggestions) {
+                                            let relSugg = suggestions.suggestions.find(x => x.insertText.includes(`${dataItem.sqlRelation.schemaPK}.${dataItem.sqlRelation.tablePK}`));
                                             if (relSugg) {
                                                 callback(relSugg.insertText);
                                             }
@@ -2070,10 +2012,6 @@ let DragDropInteractionEmitter$1 = class DragDropInteractionEmitter extends Emit
             },
             position: event.position
         };
-        // IMMUTABLE !!!!
-        // event.event.dataTransfer.clearData();
-        // event.event.dataTransfer.items.clear();
-        // event.event.dataTransfer.setData('text/plain', 'pippo');
         this.editor._contributions.onBeforeInteractionEvent();
         super.fire(de);
     }
@@ -2090,9 +2028,6 @@ let ContextMenuInteractionEmitter$1 = class ContextMenuInteractionEmitter extend
     fire(event) {
         event.event.preventDefault();
         debugger;
-        // event.event.stopPropagation();
-        // this.editor._contributions.onBeforeInteractionEvent();
-        // super.fire(event);
     }
 };
 class ContextInfo {
@@ -2253,9 +2188,6 @@ class EditorOptions {
     }
 }
 
-// import { editor } from 'monaco-editor';
-// import { LinkedList } from 'monaco-editor/esm/vs/base/common/linkedList';
-// import { MenuId, MenuRegistry } from 'monaco-editor/esm/vs/platform/actions/common/actions';
 /**
  * Stub ambient delle classi rxjs core iniettato in Monaco come extra-lib.
  *
@@ -2335,8 +2267,6 @@ class TSProvider {
         this.editor = editor;
         this.editor['_onDropIntoEditor'] = this.editor['_register'](new DragDropInteractionEmitter(this.editor['_contributions'], this.editor['_deliveryQueue'], this.editor, this));
         this.editor['onDropIntoEditor'] = this.editor['_onDropIntoEditor'].event;
-        // this._onContextMenu = this._register(new InteractionEmitter(this._contributions, this._deliveryQueue));
-        // this.onContextMenu = this._onContextMenu.event;
         this.editor['_onContextMenu'] = this.editor['_register'](new ContextMenuInteractionEmitter(this.editor['_contributions'], this.editor['_deliveryQueue'], this.editor, this));
         this.editor['onContextMenu'] = this.editor['_onContextMenu'].event;
     }
@@ -2354,6 +2284,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',
@@ -2370,10 +2309,8 @@ class TSProvider {
         });
         this.editorOptions.contextMenuItems = contextMenuItems;
         this.editorOptions.onNodeClick = (event, dataItem) => {
-            // debugger;
         };
         this.editorOptions.onInit = (editor) => {
-            // debugger;
             this.editor = editor;
         };
         this.editorOptions.onNodeDragStart = (event, dataItem) => {
@@ -2382,7 +2319,6 @@ class TSProvider {
             event.dataTransfer.setData("text/plain", JSON.stringify(dataItem));
         };
         this.editorOptions.onNodeDragEnd = (event, dataItem) => {
-            // debugger;
         };
         let compilerOptions = {
             target: monaco.languages.typescript.ScriptTarget.ES2016,
@@ -2414,16 +2350,6 @@ class TSProvider {
             noSyntaxValidation: false,
             diagnosticCodesToIgnore: [1108, 1375, 1378],
         });
-        // //esportare i tipi usando angular.json (riduci i file esportati alle cartelle ...)
-        // // "assets": [
-        // //   ....
-        // //   {
-        // //     "glob": "**/*",
-        // //     "input": "node_modules/@skylab/easygrid/lib",
-        // //     "output": "assets/"
-        // //   },
-        // //   ....
-        // libs.push(this.http.get("assets/models/easygrid.server.d.ts", { responseType: 'text' }));
         let headers = new HttpHeaders({
             'Cache-Control': 'no-cache, no-store, must-revalidate, post-check=0, pre- check=0',
             'Pragma': 'no-cache',
@@ -2432,7 +2358,7 @@ class TSProvider {
         libs = MetadataProviderService.baseLibs.map(lib => {
             return this.http.get(lib, { headers: headers, responseType: 'text' });
         });
-        if (formFieldOptions.extraLibs && formFieldOptions.extraLibs.length) {
+        if (formFieldOptions.extraLibs?.length) {
             libs.concat(formFieldOptions.extraLibs.map(lib => {
                 return this.http.get(lib, { headers: headers, responseType: 'text' });
             }));
@@ -2441,15 +2367,15 @@ class TSProvider {
         if (codeContext) {
             let routeIdContextField = field.extras.customEditorConfig?.routeContextField;
             let columnContextField = field.extras.customEditorConfig?.columnContextField;
-            if (codeContext.indexOf('record: ') >= 0 && routeIdContextField) {
-                let routeId = record[routeIdContextField]?.value; // this.metaInfo.tableMetadata.md_route_name.replaceAll(' ', '_');
+            if (codeContext.includes('record: ') && routeIdContextField) {
+                let routeId = record[routeIdContextField]?.value;
                 if (routeId) {
                     let metas = await metaSrv.getMetadatiById(routeId);
                     let currentColumnMeta = null;
                     if (columnContextField) {
                         currentColumnMeta = metas.find(m => m.mc_id == record[columnContextField].value);
                     }
-                    if (metas && metas.length) {
+                    if (metas?.length) {
                         let routeName = metas[0]._Metadati_Tabelle.md_route_name.replaceAll(' ', '_');
                         let classProperties = '';
                         let classPropsArray = [];
@@ -2464,7 +2390,7 @@ class TSProvider {
                                     let lookupMetas = await metaSrv.getMetadati(lookupRoute);
                                     let nestedClassProperties = '';
                                     let nestedClassPropsArray = [];
-                                    if (lookupMetas && lookupMetas.length) {
+                                    if (lookupMetas?.length) {
                                         lookupRoute = lookupRoute.replaceAll(' ', '_');
                                         for (let cLookup of lookupMetas) {
                                             nestedClassPropsArray.push(`${cLookup.mc_nome_colonna}: ${MetadataProviderService.getTSTypeFromMetaColumn(cLookup)};`);
@@ -2481,7 +2407,7 @@ class TSProvider {
                             }
                             // recursive function to get the type of the nested lookup objects
                             // ...
-                            if (codeContext.indexOf('record: any') >= 0) {
+                            if (codeContext.includes('record: any')) {
                                 classPropsArray.push(`${c.mc_nome_colonna}: ${MetadataProviderService.getTSTypeFromMetaColumn(c)};`);
                             }
                             else {
@@ -2498,13 +2424,13 @@ class TSProvider {
                             };
                             constructor();`);
                         })));
-                        if (codeContext.indexOf('record: any') >= 0) {
+                        if (codeContext.includes('record: any')) {
                             codeContext = codeContext.replace('record: any', `record: ${routeName}`);
                         }
                         else {
                             codeContext = codeContext.replace('record: {[key: string]: BehaviorSubject<any>}', `record: {${compositeTypeDef}}`);
                         }
-                        if (currentColumnMeta && currentColumnMeta.mc_ui_column_type == 'lookupByID' && codeContext.indexOf('let newValue: any;') >= 0) {
+                        if (currentColumnMeta?.mc_ui_column_type == 'lookupByID' && codeContext.includes('let newValue: any;')) {
                             codeContext = codeContext.replace('let newValue: any;', `let newValue: ${currentColumnMeta.mc_ui_lookup_entity_name};`);
                         }
                     }
@@ -2519,7 +2445,7 @@ class TSProvider {
                     let lines = data.split('\n');
                     // da migliorare con regex !!!
                     let parsedLines = lines.filter(x => {
-                        return x.indexOf('import ') < 0; // && x.indexOf('export interface ') < 0
+                        return !x.includes('import '); // && x.indexOf('export interface ') < 0
                     }).map((line) => {
                         return line.replace('export declare', 'declare').replace('export interface', 'declare interface').replace('export class', 'declare class');
                     });
@@ -2568,33 +2494,13 @@ class DragDropInteractionEmitter extends Emitter {
                                         callback(`${dataItem.sqlTable.schema}.${dataItem.sqlTable.table}`);
                                     }
                                     if (dataItem.parentTable) {
-                                        // let suggestions = self.sqlProvider.getAutocompleteSuggestions(self.editor.getValue(), self.position);
-                                        // let colSugg = suggestions.suggestions.find(x => x.label == '<All columns>');
-                                        // if (colSugg) {
-                                        //     callback(colSugg.insertText);
-                                        // } else {
-                                        //     callback(dataItem.parentTable.columns.map(x => x.column).join(','));
-                                        // }
+                                        // intentionally empty: parentTable drops have no plain-text representation
                                     }
                                     if (dataItem.sqlColumn) {
-                                        // let suggestions = self.sqlProvider.getAutocompleteSuggestions(self.editor.getValue(), self.position);
-                                        // let colSugg = suggestions.suggestions.find(x => x.insertText.indexOf(dataItem.sqlColumn.column) >= 0);
-                                        // if (colSugg) {
-                                        //     callback(colSugg.insertText);
-                                        // } else {
-                                        //     callback(`${dataItem.sqlColumn.schema}.${dataItem.sqlColumn.table}.${dataItem.sqlColumn.column}`);
-                                        // }
+                                        // intentionally empty: sqlColumn drops have no plain-text representation
                                     }
                                     if (dataItem.sqlRelation) {
-                                        // let suggestions = self.sqlProvider.getAutocompleteSuggestions(self.editor.getValue(), self.position);
-                                        // if (suggestions && suggestions.suggestions) {
-                                        //     let relSugg = suggestions.suggestions.find(x => x.insertText.indexOf(`${dataItem.sqlRelation.schemaPK}.${dataItem.sqlRelation.tablePK}`) >= 0);
-                                        //     if (relSugg) {
-                                        //         callback(relSugg.insertText);
-                                        //     } else {
-                                        //         callback(`${dataItem.sqlRelation.schemaPK}.${dataItem.sqlRelation.tablePK} ON ${dataItem.sqlRelation.schemaFK}.${dataItem.sqlRelation.tableFK}.${dataItem.sqlRelation.columnFK} = ${dataItem.sqlRelation.schemaPK}.${dataItem.sqlRelation.tablePK}.${dataItem.sqlRelation.columnPK}`);
-                                        //     }
-                                        // }
+                                        // intentionally empty: sqlRelation drops have no plain-text representation
                                     }
                                 }
                             }
@@ -2604,10 +2510,6 @@ class DragDropInteractionEmitter extends Emitter {
             },
             position: event.position
         };
-        // IMMUTABLE !!!!
-        // event.event.dataTransfer.clearData();
-        // event.event.dataTransfer.items.clear();
-        // event.event.dataTransfer.setData('text/plain', 'pippo');
         this.editor._contributions.onBeforeInteractionEvent();
         super.fire(de);
     }
@@ -2624,12 +2526,191 @@ class ContextMenuInteractionEmitter extends Emitter {
     fire(event) {
         event.event.preventDefault();
         this.tsProvider.contextMenuEvent = event;
-        // event.event.stopPropagation();
-        // this.editor._contributions.onBeforeInteractionEvent();
-        // super.fire(event);
     }
 }
 
+/**
+ * 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.hasOwn(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.hasOwn(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',
@@ -2718,11 +2799,11 @@ class HtmlProvider {
         { label: 'div', snippet: '<div>$0</div>', documentation: 'Container element' },
         { label: 'section', snippet: '<section>$0</section>', documentation: 'Sectioning content' },
         { label: 'article', snippet: '<article>$0</article>', documentation: 'Independent content block' },
-        { label: 'a', snippet: '<a href=\"$1\">$0</a>', documentation: 'Anchor link' },
-        { label: 'img', snippet: '<img src=\"$1\" alt=\"$2\" />', documentation: 'Image with alt text' },
+        { label: 'a', snippet: '<a href="$1">$0</a>', documentation: 'Anchor link' },
+        { label: 'img', snippet: '<img src="$1" alt="$2" />', documentation: 'Image with alt text' },
         { label: 'table', snippet: '<table>\\n  <thead>\\n    <tr><th>$1</th></tr>\\n  </thead>\\n  <tbody>\\n    <tr><td>$0</td></tr>\\n  </tbody>\\n</table>', documentation: 'Basic table template' },
         { label: 'ul', snippet: '<ul>\\n  <li>$0</li>\\n</ul>', documentation: 'Unordered list' },
-        { label: 'form', snippet: '<form>\\n  <label for=\"$1\">$2</label>\\n  <input id=\"$1\" name=\"$1\" />\\n</form>', documentation: 'Simple form template' }
+        { label: 'form', snippet: '<form>\\n  <label for="$1">$2</label>\\n  <input id="$1" name="$1" />\\n</form>', documentation: 'Simple form template' }
     ];
     constructor(editorOptions, componentSelectors = [], componentBindings = {}) {
         this.editorOptions = editorOptions;
@@ -2836,7 +2917,7 @@ class HtmlProvider {
                     message: `Possible malformed tag '${firstToken}': missing '<' at start.`
                 });
             }
-            const inlineEventMatch = line.match(/\son[a-z]+\s*=/i);
+            const inlineEventMatch = /\son[a-z]+\s*=/i.exec(line);
             if (inlineEventMatch?.index != null) {
                 const startColumn = inlineEventMatch.index + 2;
                 markers.push({
@@ -2848,7 +2929,7 @@ class HtmlProvider {
                     message: 'Inline on* event handler detected.'
                 });
             }
-            const jsUrlMatch = line.match(/\b(?:href|src)\s*=\s*["']?\s*javascript:/i);
+            const jsUrlMatch = /\b(?:href|src)\s*=\s*["']?\s*javascript:/i.exec(line);
             if (jsUrlMatch?.index != null) {
                 const startColumn = jsUrlMatch.index + 1;
                 markers.push({
@@ -2882,7 +2963,6 @@ class HtmlProvider {
         while ((match = tagRegex.exec(content)) !== null) {
             const full = match[0];
             const tag = (match[1] || '').toLowerCase();
-            const attrs = match[2] || '';
             const isClosing = full.startsWith('</');
             const isSelfClosing = /\/\s*>$/.test(full) || voidTags.has(tag);
             if (!isClosing && !isSelfClosing) {
@@ -2890,8 +2970,8 @@ class HtmlProvider {
                 continue;
             }
             if (isClosing) {
-                const last = stack[stack.length - 1];
-                if (last && last.tag === tag) {
+                const last = stack.at(-1);
+                if (last?.tag === tag) {
                     stack.pop();
                 }
                 else {
@@ -2982,12 +3062,12 @@ class HtmlProvider {
                 pushMarker(tagOffset + 1 + bad.index, bad[0].length, monaco.MarkerSeverity.Error, 'Malformed Angular property binding. Use [prop]="...".');
             }
             // Broken event binding: (event=...
-            const malformedEvent = /\([^\)\s=><"'`]*\s*=/g;
+            const malformedEvent = /\([^)\s=><"'`]*\s*=/g;
             while ((bad = malformedEvent.exec(attrs)) !== null) {
                 pushMarker(tagOffset + 1 + bad.index, bad[0].length, monaco.MarkerSeverity.Error, 'Malformed Angular event binding. Use (event)="...".');
             }
             // Broken two-way binding: [(model=...
-            const malformedTwoWay = /\[\([^\)\]]+\s*=/g;
+            const malformedTwoWay = /\[\([^)\]]+\s*=/g;
             while ((bad = malformedTwoWay.exec(attrs)) !== null) {
                 pushMarker(tagOffset + 1 + bad.index, bad[0].length, monaco.MarkerSeverity.Error, 'Malformed Angular two-way binding. Use [(prop)]="...".');
             }
@@ -3065,7 +3145,7 @@ class HtmlProvider {
                     }));
                     suggestions.unshift(...wuicSuggestions);
                 }
-                if (openTagContext && openTagContext.tagName.startsWith('wuic-')) {
+                if (openTagContext?.tagName.startsWith('wuic-')) {
                     const bindingSuggestions = this.buildAngularBindingSuggestions(openTagContext.tagName, range);
                     suggestions.unshift(...bindingSuggestions);
                 }
@@ -3074,7 +3154,7 @@ class HtmlProvider {
         });
     }
     getOpenTagContext(linePrefix) {
-        const match = linePrefix.match(/<([\w-]+)\b([^<>]*)$/);
+        const match = /<([\w-]+)\b([^<>]*)$/.exec(linePrefix);
         if (!match) {
             return null;
         }
@@ -3165,13 +3245,13 @@ class HtmlProvider {
             return '';
         }
         const normalized = input
-            .replace(/>\s+</g, '><')
-            .replace(/\r\n/g, '\n')
+            .replaceAll(/>\s+</g, '><')
+            .replaceAll('\r\n', '\n')
             .trim();
         const withLineBreaks = normalized
-            .replace(/></g, '>\n<')
-            .replace(/(<\/(div|section|article|main|aside|header|footer|nav|ul|ol|li|table|thead|tbody|tfoot|tr|td|th|form|fieldset|p|h[1-6]|pre|blockquote)>)/gi, '$1\n')
-            .replace(/(<(div|section|article|main|aside|header|footer|nav|ul|ol|li|table|thead|tbody|tfoot|tr|td|th|form|fieldset|p|h[1-6]|pre|blockquote)(\s[^>]*)?>)/gi, '\n$1')
+            .replaceAll('><', '>\n<')
+            .replaceAll(/(<\/(div|section|article|main|aside|header|footer|nav|ul|ol|li|table|thead|tbody|tfoot|tr|td|th|form|fieldset|p|h[1-6]|pre|blockquote)>)/gi, '$1\n')
+            .replaceAll(/(<(div|section|article|main|aside|header|footer|nav|ul|ol|li|table|thead|tbody|tfoot|tr|td|th|form|fieldset|p|h[1-6]|pre|blockquote)(\s[^>]*)?>)/gi, '\n$1')
             .split('\n')
             .map((line) => line.trim())
             .filter((line) => line.length > 0);
@@ -3183,12 +3263,12 @@ class HtmlProvider {
         const voidTags = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
         for (const rawLine of withLineBreaks) {
             const line = rawLine.trim();
-            const closeMatch = line.match(closingTag);
+            const closeMatch = closingTag.exec(line);
             if (closeMatch) {
                 indentLevel = Math.max(0, indentLevel - 1);
             }
             lines.push(`${'  '.repeat(indentLevel)}${line}`);
-            const openMatch = line.match(openingTag);
+            const openMatch = openingTag.exec(line);
             const isSelf = selfClosing.test(line);
             if (openMatch && !isSelf && !voidTags.has(openMatch[1].toLowerCase()) && !line.includes(`</${openMatch[1]}>`)) {
                 indentLevel += 1;
@@ -3251,7 +3331,6 @@ const WUIC_COMPONENT_SELECTORS = [
     'wuic-workflow-runner'
 ];
 
-// import { TreeItemDragStartEvent, TreeItemDragEvent, TreeItemDropEvent, DropPosition, TreeItemAddRemoveArgs, TreeItem, NodeClickEvent } from '@progress/kendo-angular-treeview';
 class CodeEditorComponent {
     monacoLoaderService;
     http;
@@ -3303,11 +3382,24 @@ 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.
      */
     sampleCode = '';
-    // originalCode = 'function x() { // TODO }';
     /**
      * Flag di stato che governa il comportamento UI/logico relativo a fullscreen.
      */
@@ -3420,6 +3512,16 @@ class CodeEditorComponent {
      * (che e' tree-shaken nei build prod).
      */
     hostElementRef = inject(ElementRef, { optional: true });
+    /**
+     * NgZone + ChangeDetectorRef via `inject()` (stesso idioma di hostElementRef,
+     * per non toccare il costruttore a 7 argomenti posizionali). Servono al
+     * subscribe di `isMonacoLoaded$`: il loader ngx-monaco emette dal callback di
+     * script-load (FUORI da NgZone) e la continuation async del subscribe resta
+     * fuori zona → `this.render = true` non triggera change detection e il
+     * template `<ngx-monaco-editor>` non monta mai (editor mai creato).
+     */
+    ngZone = inject(NgZone);
+    cdRef = inject(ChangeDetectorRef);
     t(resource, fallback) {
         const translated = WtoolboxService.translationService?.instant?.(resource);
         return translated && translated !== resource ? translated : fallback;
@@ -3496,8 +3598,6 @@ class CodeEditorComponent {
     async suggest($event, ctx) {
         $event.stopPropagation();
         $event.preventDefault();
-        // var resp = await WtoolboxService.promptDialog('Suggest', [{ name: 'prompt', caption: 'prompt', type: 'text' }]);
-        // debugger;
         const nextValue = String(this.field.mc_suggest_value_callback__fn(this.record, this.field, this.metaInfo, WtoolboxService) ?? '');
         this.editorModelValue = nextValue;
         this.record[this.field.mc_nome_colonna].next(nextValue);
@@ -3524,11 +3624,13 @@ class CodeEditorComponent {
         // component instance on host element for tests that need direct access
         // (toggle-monaco contract check, etc.).
         try {
-            (this.hostElementRef?.nativeElement).__wuicCmp = this;
+            if (this.hostElementRef?.nativeElement) {
+                this.hostElementRef.nativeElement.__wuicCmp = this;
+            }
         }
         catch { /* defensive */ }
         let formFieldOptions = {};
-        if (this.field && this.field.extras.customEditorConfig) {
+        if (this.field?.extras.customEditorConfig) {
             try {
                 formFieldOptions = this.field.extras.customEditorConfig;
             }
@@ -3536,7 +3638,7 @@ class CodeEditorComponent {
                 console.error(`customEditorConfig for field ${this.field.mc_nome_colonna} error: ${e}`);
             }
         }
-        this.editorOptions = { ...this.editorOptions, ...(formFieldOptions.editorOptions || {}) };
+        this.editorOptions = { ...this.editorOptions, ...(formFieldOptions.editorOptions) };
         const configuredLanguage = String(formFieldOptions.editorOptions?.language || '').trim().toLowerCase();
         if (configuredLanguage === 'json' || configuredLanguage === 'typescript' || configuredLanguage === 'sql' || configuredLanguage === 'csharp' || configuredLanguage === 'html') {
             this.editorOptions.language = configuredLanguage;
@@ -3547,7 +3649,7 @@ class CodeEditorComponent {
         this.editorOptions.wordWrap = this.editorOptions.wordWrap || 'on';
         this.editorOptions.wrappingIndent = this.editorOptions.wrappingIndent || 'same';
         this.editorOptions.suggest = {
-            ...(this.editorOptions.suggest || {}),
+            ...(this.editorOptions.suggest),
             showStatusBar: false,
             preview: false,
             previewMode: 'subwordSmart',
@@ -3559,14 +3661,6 @@ class CodeEditorComponent {
         }
         this.bindRecordValue();
         this.refreshHtmlPreview();
-        // if (this.editorOptions.language === 'sql') {
-        //   this.sampleCode = '';
-        // } else if (this.editorOptions.language === 'typescript') {
-        //   this.sampleCode = 'function x() {\nconsole.log("Hello world!");\n}';
-        // } else if (this.editorOptions.language === 'json') {
-        //   this.sampleCode = '{\n\n}';
-        // }
-        // this.sampleCode = formFieldOptions.sampleCode || this.sampleCode;
         this.monacoLoaderService.isMonacoLoaded$.pipe(filter(isLoaded => isLoaded), take(1)).subscribe(async () => {
             if (this.editorOptions.language === 'sql') {
                 this.sqlProvider = new SqlProvider(this.http, this.editorOptions);
@@ -3578,6 +3672,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.
@@ -3612,7 +3710,16 @@ class CodeEditorComponent {
                 this.htmlProvider = new HtmlProvider(this.editorOptions, WUIC_COMPONENT_SELECTORS, WUIC_COMPONENT_BINDINGS);
                 this.htmlProvider.registerHtmlProvider();
             }
-            this.render = true;
+            // FIX (2026-07-22): rientra in NgZone e forza CD. La emit di
+            // isMonacoLoaded$ arriva dal callback script-load di ngx-monaco (fuori
+            // zona) e gli `await` sopra mantengono la continuation fuori zona:
+            // senza run()+detectChanges il flag non rirenderizza il template e
+            // Monaco non viene mai istanziato (test toggle-monaco: render=false /
+            // ngxCount=0 deterministico).
+            this.ngZone.run(() => {
+                this.render = true;
+                this.cdRef.detectChanges();
+            });
         });
     }
     /**
@@ -3631,7 +3738,7 @@ class CodeEditorComponent {
                 wordWrap: this.editorOptions.wordWrap || 'on',
                 wrappingIndent: this.editorOptions.wrappingIndent || 'same',
                 suggest: {
-                    ...(this.editorOptions.suggest || {}),
+                    ...(this.editorOptions.suggest),
                     showStatusBar: false,
                     preview: false,
                     previewMode: 'subwordSmart',
@@ -3660,7 +3767,9 @@ class CodeEditorComponent {
      */
     ngOnDestroy() {
         try {
-            delete (this.hostElementRef?.nativeElement).__wuicCmp;
+            if (this.hostElementRef?.nativeElement) {
+                delete this.hostElementRef.nativeElement.__wuicCmp;
+            }
         }
         catch { /* defensive */ }
         if (this.layoutRaf !== null) {
@@ -3701,7 +3810,7 @@ class CodeEditorComponent {
         const hosts = [];
         let current = start?.parentElement || null;
         while (current) {
-            const style = window.getComputedStyle(current);
+            const style = globalThis.getComputedStyle(current);
             const overflowY = style.overflowY || '';
             const isScrollableY = (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay')
                 && current.scrollHeight > current.clientHeight;
@@ -3772,6 +3881,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.
@@ -3873,7 +4035,7 @@ class CodeEditorComponent {
                 const replacement = doc.createElement('div');
                 const ngIfAttr = node.getAttribute('*ngif') || node.getAttribute('*ngIf') || '';
                 const captionMatch = /getMetaColumn\(\s*['"]([^'"]+)['"]\s*\)/i.exec(ngIfAttr);
-                if (captionMatch && captionMatch[1]) {
+                if (captionMatch?.[1]) {
                     replacement.setAttribute('data-wuic-caption', captionMatch[1]);
                 }
                 Array.from(node.attributes).forEach((attr) => replacement.setAttribute(attr.name, attr.value));
@@ -3947,7 +4109,7 @@ class CodeEditorComponent {
             }
             const ngIfAttr = current.getAttribute('*ngif') || current.getAttribute('*ngIf') || '';
             const match = /getMetaColumn\(\s*['"]([^'"]+)['"]\s*\)/i.exec(ngIfAttr);
-            if (match && match[1]) {
+            if (match?.[1]) {
                 return match[1];
             }
             current = current.parentElement;
@@ -3969,13 +4131,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;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], 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;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 +4155,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-CLMDvOWs.mjs.map
+//# sourceMappingURL=wuic-framework-lib-code-editor.component-N6HMl2mf.mjs.map