wuic-framework-lib 1.2.0 → 1.3.0

package/fesm2022/{wuic-framework-lib-designer.component-pW1YK-oY.mjs → wuic-framework-lib-designer.component-N_CfbGnr.mjs}

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { Pipe, EventEmitter, ElementRef, Renderer2, ChangeDetectorRef, HostListener, Input, Output, Inject, Directive, Component, computed, signal, untracked, inject, NgZone, numberAttribute, DOCUMENT, input, output, isDevMode, InjectionToken, Injector, contentChildren, contentChild, booleanAttribute, effect, HostBinding, ChangeDetectionStrategy } from '@angular/core';
-import * as i9 from 'primeng/splitter';
+import * as i10 from 'primeng/splitter';
 import { SplitterModule } from 'primeng/splitter';
-import * as i11 from 'primeng/dragdrop';
+import * as i12 from 'primeng/dragdrop';
 import { DragDropModule } from 'primeng/dragdrop';
 import { NgClass, NgStyle, NgTemplateOutlet, AsyncPipe, JsonPipe, NgFor, NgIf, NgComponentOutlet } from '@angular/common';
-import { W as WtoolboxService, D as DynamicGenericTemplateComponent, a as DynamicCompilerService, b as DataSourceComponent, c as DataRepeaterComponent, F as FilterBarComponent, L as LazyParametricDialogComponent, P as PagerComponent, M as MetadataProviderService, d as ParametricDialogComponent, e as MetadatiColonna, f as DataProviderService, U as UserInfoService, T as TranslationManagerService, g as MetadataEditorService, h as WorkflowRuntimeMetadataService, i as FieldEditorComponent, j as MetadataEditorComponent, A as ArchetypeConfiguratorComponent } from './wuic-framework-lib-wuic-framework-lib-BSyGhpM1.mjs';
+import { W as WtoolboxService, D as DynamicGenericTemplateComponent, a as DynamicCompilerService, b as DataSourceComponent, c as DataRepeaterComponent, F as FilterBarComponent, L as LazyParametricDialogComponent, P as PagerComponent, M as MetadataProviderService, d as ParametricDialogComponent, e as MetadatiColonna, f as DataProviderService, U as UserInfoService, T as TranslationManagerService, g as MetadataEditorService, C as ChatbotHostRegistryService, h as WorkflowRuntimeMetadataService, i as FieldEditorComponent, j as MetadataEditorComponent, A as ArchetypeConfiguratorComponent } from './wuic-framework-lib-wuic-framework-lib-Deudd4MY.mjs';
 import { fromEvent, BehaviorSubject, merge, filter, Observable, switchMap, take, map, takeUntil, tap, timeInterval, scan, mergeMap, of, delay, repeat, Subject, startWith, pairwise, skipWhile, combineLatest } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CdkAccordionModule, CdkAccordion, CdkAccordionItem } from '@angular/cdk/accordion';
@@ -29,11 +29,11 @@ import { TreeDragDropService } from 'primeng/api';
 import { MenubarModule } from 'primeng/menubar';
 import * as i4 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i17 from 'primeng/multiselect';
+import * as i18 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import * as i2 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
-import * as i9$1 from 'primeng/menu';
+import * as i9 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
 import * as i4$1 from 'primeng/tree';
 import { TreeModule } from 'primeng/tree';
@@ -4415,6 +4415,7 @@ class DesignerComponent {
     cd;
     trslSrv;
     metadataEditorSrv;
+    chatbotHostRegistry;
     workflowRuntimeMetadata;
     draggedPayload;
     selected;
@@ -4516,7 +4517,7 @@ class DesignerComponent {
      * e binding ai converter/callback usati dall'editor proprieta.
      * Non carica dati remoti: il bootstrap runtime avviene in `ngOnInit`.
      */
-    constructor(route, dataSrv, metaSrv, userInfo, cd, trslSrv, metadataEditorSrv, workflowRuntimeMetadata = {}) {
+    constructor(route, dataSrv, metaSrv, userInfo, cd, trslSrv, metadataEditorSrv, chatbotHostRegistry, workflowRuntimeMetadata = {}) {
         this.route = route;
         this.dataSrv = dataSrv;
         this.metaSrv = metaSrv;
@@ -4524,6 +4525,7 @@ class DesignerComponent {
         this.cd = cd;
         this.trslSrv = trslSrv;
         this.metadataEditorSrv = metadataEditorSrv;
+        this.chatbotHostRegistry = chatbotHostRegistry;
         this.workflowRuntimeMetadata = workflowRuntimeMetadata;
         this.defaultCtxItems = [
             {
@@ -5551,6 +5553,21 @@ class DesignerComponent {
     async ngOnInit() {
         this.lastKnownHashRoute = String(window?.location?.hash || '');
         this.refreshAvailableProjectCssClasses();
+        // Registra handler chatbot per kind 'designer_inject': il chatbot
+        // popover (globale, vedi rag-chatbot.component.ts onApplyAction)
+        // intercetta il kind e delega a questo handler invece di chiamare
+        // /api/Rag/ApplyAction. unregister in ngOnDestroy per evitare retain.
+        this.chatbotHostRegistry.register('designer_inject', (action) => this.onChatbotProposedDesignerAction(action));
+        // Registra state provider: il chatbot (in buildRouteContext) chiama
+        // questo provider per ottenere uno snapshot compatto del canvas e
+        // iniettarlo nel system prompt del LLM. Cosi' il LLM puo' proporre
+        // set_property / remove referenziando uniqueName reali (TD__126 ecc.).
+        this.chatbotHostRegistry.registerStateProvider('designer_inject', () => this.buildCompactDashboardStateDump());
+        // NB: il fetch della lista route disponibili NON va fatto qui (al mount
+        // del designer). Sarebbe una chiamata HTTP per ogni apertura del designer
+        // anche quando l'utente non usa mai il chatbot. Lo facciamo LAZY dentro
+        // `buildCompactDashboardStateDump` al primo prompt del chatbot
+        // (state provider invocato solo quando il chatbot prepara il route_context).
         let menus = [];
         menus = [
             {
@@ -5622,6 +5639,922 @@ class DesignerComponent {
         this.clearHierarchyHoverHighlight();
         this.clearFooterHoverHighlight();
         this.setDesignerEditModeClass(false);
+        // Deregistra handler chatbot: il prossimo mount (es. navigation
+        // back-and-forth a /designer) registrera' una nuova istanza.
+        try {
+            this.chatbotHostRegistry.unregister('designer_inject');
+        }
+        catch { /* ignore */ }
+        try {
+            this.chatbotHostRegistry.unregisterStateProvider('designer_inject');
+        }
+        catch { /* ignore */ }
+    }
+    // ===========================================================================
+    // CHATBOT HOST HANDLER: kind 'designer_inject' (client-only)
+    // ===========================================================================
+    //
+    // Riceve un payload `propose_designer_inject` dal LLM, lo deserializza e
+    // simula drag&drop iterativo sui `dashboardElements` usando le API
+    // canoniche `dropToolAtRoot()` / `drop()` esistenti.
+    //
+    // Per i nodi nested (`children[]`): dopo aver iniettato il parent, leggiamo
+    // l'`uniqueName` generato dal sistema (TOOL__<componentId>) e lo passiamo
+    // come parent_unique_name ai figli. Il `drop()` risolve il parent via
+    // `flattenedDashboardElements.find(componentId)`.
+    //
+    // Per TABLE/SPLITTER/ACCORDION (custom onDrop): il framework crea
+    // automaticamente i nodi figli TR/TD / SPLITTER-AREA / ACCORDION-AREA
+    // basandosi su inputs.rows/cols/areas/items. Il LLM NON deve includerli
+    // nel children[] (vedi docs/pages/_internal/designer-tool-catalog.md
+    // constraint #2).
+    //
+    // Per TABVIEW: il LLM deve invece includere espliciti TABPANEL nel
+    // children[] (allowedChildren) - non sono auto-create.
+    //
+    // commitHistoryIfChanged() viene gia' invocato da drop() -> undo/redo
+    // gratis. Nessun side-effect su backend metadata (kind client-only).
+    async onChatbotProposedDesignerAction(action) {
+        if (this.noEdit) {
+            return { ok: false, message: 'Designer in modalita read-only' };
+        }
+        // Discrimina su action_type. Backward-compat: se assente, assume 'inject'
+        // (lo schema precedente non aveva action_type).
+        const actionType = String(action?.['action_type'] || 'inject').toLowerCase();
+        try {
+            if (actionType === 'inject') {
+                const layout = Array.isArray(action?.['layout']) ? action['layout'] : [];
+                if (!layout.length)
+                    return { ok: false, message: 'Layout vuoto: nessun tool proposto dal LLM' };
+                let totalInjected = 0;
+                // Top-level: il LLM puo' specificare `parent_unique_name` per innestare
+                // dentro un componente gia' presente nel canvas. Tre casi:
+                //   1) uniqueName reale gia' presente (es. "TD__126") => pass-through;
+                //   2) placeholder semantico (es. "<TD-0>") riferito al nodo top-level
+                //      iniettato POCO PRIMA in questo stesso layout: resolve dentro
+                //      l'ultimo top-level injected (necessario quando il LLM
+                //      preferisce mettere TABLE + LABEL come 2 top-level sibling,
+                //      con LABEL.parent_unique_name="<TD-0>" puntando alla TABLE
+                //      appena create);
+                //   3) null/missing: va al ROOT (dashboardElements).
+                let lastTopLevelInjected = null;
+                for (const node of layout) {
+                    let topParent = null;
+                    const declared = (node && typeof node.parent_unique_name === 'string') ? node.parent_unique_name.trim() : '';
+                    if (declared) {
+                        if (declared.startsWith('<') && declared.endsWith('>')) {
+                            if (lastTopLevelInjected) {
+                                const resolved = this.resolveLayoutPlaceholder(declared, lastTopLevelInjected);
+                                if (resolved)
+                                    topParent = resolved;
+                                else
+                                    throw new Error(`Placeholder '${declared}' non risolvibile dentro ${lastTopLevelInjected?.uniqueName} (verifica struttura: rows/cols/areas/items match)`);
+                            }
+                            else {
+                                throw new Error(`Placeholder '${declared}' per nodo top-level senza nodo precedente da cui risolvere (deve esserci un TABLE/SPLITTER/ACCORDION/TABVIEW iniettato prima)`);
+                            }
+                        }
+                        else {
+                            topParent = declared; // uniqueName reale, pass-through al drop()
+                        }
+                    }
+                    totalInjected += await this.injectLayoutNode(node, topParent);
+                    // Aggiorna il last top-level per i prossimi placeholder. NB: usiamo
+                    // findLastInjectedNode per pescare l'istanza vera (con onDrop appena
+                    // eseguito = TR/TD/AREA gia' popolati), non il template clonato.
+                    lastTopLevelInjected = this.findLastInjectedNode(String(node.tool_name || ''), topParent) || lastTopLevelInjected;
+                }
+                const rationale = (action?.['rationale'] || '').toString().slice(0, 100);
+                return { ok: true, message: `Iniettati ${totalInjected} elementi nel designer${rationale ? ': ' + rationale : ''}.` };
+            }
+            if (actionType === 'set_property') {
+                return this.applySetPropertyAction(action);
+            }
+            if (actionType === 'remove') {
+                return this.applyRemoveAction(action);
+            }
+            return { ok: false, message: `action_type sconosciuto: '${actionType}' (atteso 'inject', 'set_property' o 'remove')` };
+        }
+        catch (err) {
+            return { ok: false, message: err?.message || String(err) };
+        }
+    }
+    /**
+     * Applica `set_property`: modifica UN valore di proprieta' su un componente
+     * gia' presente nel canvas. Lookup via uniqueName in flattenedDashboardElements,
+     * assign del valore (BehaviorSubject .next() per async, plain assign per sync),
+     * commitHistoryIfChanged() per undo/redo.
+     *
+     * NB: per coerenza con il property panel runtime, simuliamo il flow di
+     * setValue() canonico (riga 4306) quando possibile: usiamo la toolProp
+     * dell'inputProps target per propagare converter/conditional, in modo che
+     * effetti collaterali (es. borderColor che setta border-{top,right,bottom,left}-color)
+     * siano applicati correttamente.
+     */
+    applySetPropertyAction(action) {
+        const targetName = String(action?.['target_unique_name'] || '').trim();
+        const propName = String(action?.['prop_name'] || '').trim();
+        const newValue = action?.['value'];
+        if (!targetName)
+            return { ok: false, message: "set_property: 'target_unique_name' mancante" };
+        if (!propName)
+            return { ok: false, message: "set_property: 'prop_name' mancante" };
+        const target = (this.flattenedDashboardElements || []).find((n) => n?.uniqueName === targetName);
+        if (!target)
+            return { ok: false, message: `set_property: componente '${targetName}' non trovato nel canvas. Verifica DESIGNER STATE.` };
+        // La prop deve essere esposta in `inputProps` (schema delle proprieta'
+        // editabili del tool, dichiarate al boot). NON controllare `inputs`:
+        // gli inputs partono spesso vuoti/parziali e si popolano solo on-edit
+        // (es. backgroundColor non e' in inputs di default ma e' in
+        // htmlInputProperties -> inputProps). Coerente col property panel
+        // che legge inputProps per costruire l'UI.
+        if (!target.inputProps || !Object.prototype.hasOwnProperty.call(target.inputProps, propName)) {
+            return { ok: false, message: `set_property: proprieta' '${propName}' non esposta su ${target.name} (${targetName})` };
+        }
+        // Inizializza inputs[propName] se non esiste, cosi' setValue() canonico
+        // (o l'assign fallback) lo trova.
+        if (target.inputs && !Object.prototype.hasOwnProperty.call(target.inputs, propName)) {
+            target.inputs[propName] = undefined;
+        }
+        // Trova la toolProp matching (chiave 'key' === propName) per delegare a setValue
+        // canonico - applica converter, conditional, hooks specifici (datasource/select).
+        const toolProp = Array.isArray(target.toolProps)
+            ? target.toolProps.find((tp) => tp?.key === propName)
+            : null;
+        try {
+            if (toolProp) {
+                // Path canonico: setValue() applica converter (es. borderColor -> 4
+                // border-*-color), conditional, e gestisce BehaviorSubject.
+                this.setValue(newValue, target, toolProp);
+            }
+            else {
+                // Fallback: la prop non e' nelle toolProps (raro - inputProps inconsistenti).
+                // Assign diretto su inputs[prop], distinguendo BehaviorSubject vs primitivo.
+                const cur = target.inputs[propName];
+                if (cur && typeof cur.next === 'function' && typeof cur.subscribe === 'function') {
+                    cur.next(newValue);
+                }
+                else {
+                    target.inputs[propName] = newValue;
+                }
+                this.commitHistoryIfChanged();
+            }
+            const rationale = (action?.['rationale'] || '').toString().slice(0, 100);
+            return { ok: true, message: `Aggiornato ${target.name}.${propName} = ${this.formatPropValueForToast(newValue)}${rationale ? ': ' + rationale : ''}` };
+        }
+        catch (err) {
+            return { ok: false, message: `set_property fallito: ${err?.message || String(err)}` };
+        }
+    }
+    /**
+     * Applica `remove`: rimuove un nodo dal tree dashboardElements (e tutti i
+     * suoi nestedComponents per via della rimozione dal parent).
+     *
+     * Strategia: walk ricorsivo dei dashboardElements + ogni nestedComponents[]
+     * cercando l'array che contiene un elemento con uniqueName==target. splice.
+     * Poi rebuilda flatten + commitHistoryIfChanged.
+     */
+    applyRemoveAction(action) {
+        const targetName = String(action?.['target_unique_name'] || '').trim();
+        if (!targetName)
+            return { ok: false, message: "remove: 'target_unique_name' mancante" };
+        const removed = this.removeNodeByUniqueName(this.dashboardElements, targetName);
+        if (!removed) {
+            return { ok: false, message: `remove: componente '${targetName}' non trovato nel canvas` };
+        }
+        try {
+            this.flattenedDashboardElements = this.flattenComponentTree(this.dashboardElements);
+        }
+        catch { /* best-effort */ }
+        try {
+            this.commitHistoryIfChanged();
+        }
+        catch { /* best-effort */ }
+        const rationale = (action?.['rationale'] || '').toString().slice(0, 100);
+        return { ok: true, message: `Rimosso ${targetName}${rationale ? ': ' + rationale : ''}` };
+    }
+    /** Walk ricorsivo: rimuove la prima occorrenza del nodo con uniqueName==target. */
+    removeNodeByUniqueName(scope, targetName) {
+        if (!Array.isArray(scope))
+            return false;
+        for (let i = 0; i < scope.length; i++) {
+            const node = scope[i];
+            if (node?.uniqueName === targetName) {
+                scope.splice(i, 1);
+                return true;
+            }
+            if (Array.isArray(node?.nestedComponents)) {
+                if (this.removeNodeByUniqueName(node.nestedComponents, targetName))
+                    return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Best-effort format del value per il toast (max 40 char).
+     * Solo per UX feedback - non per persistenza.
+     */
+    formatPropValueForToast(v) {
+        try {
+            if (v === null || v === undefined)
+                return String(v);
+            if (typeof v === 'string')
+                return v.length > 40 ? v.slice(0, 37) + '...' : v;
+            if (typeof v === 'number' || typeof v === 'boolean')
+                return String(v);
+            const json = JSON.stringify(v);
+            return json.length > 40 ? json.slice(0, 37) + '...' : json;
+        }
+        catch {
+            return '?';
+        }
+    }
+    /**
+     * Dump compatto dello state del designer per iniezione nel system prompt
+     * del LLM (via ChatbotHostRegistryService state provider, vedi
+     * rag-chatbot.component.ts buildHostStateContext()).
+     *
+     * Formato tree indentato con uniqueName + nome + inputs significativi
+     * (skippa CSS standard ereditate da htmlInputProperties per non gonfiare
+     * il context). Max ~50 nodi (canvas tipico) per stare entro un budget di
+     * ~2-3K token.
+     *
+     * Esempio output:
+     *   TABLE__123 (rows=2, cols=2)
+     *     TR__124
+     *       TD__125
+     *       TD__126
+     *     TR__127
+     *       TD__128
+     *       TD__129
+     *   DATASOURCE__130 (route="cities", autoload=true)
+     *   DATAREPEATER__131 (action="list", datasource=DATASOURCE__130)
+     *
+     * Ritorna null se il canvas e' vuoto.
+     */
+    buildCompactDashboardStateDump() {
+        // Sezione 1: stato canvas designer (tree compatto dei dashboardElements).
+        const root = this.dashboardElements || [];
+        const canvasLines = [];
+        const MAX_NODES = 60;
+        let count = 0;
+        const walk = (nodes, depth) => {
+            if (!Array.isArray(nodes))
+                return;
+            for (const n of nodes) {
+                if (count >= MAX_NODES)
+                    return;
+                count++;
+                const indent = '  '.repeat(depth);
+                const uname = String(n?.uniqueName || '?');
+                const inputsSummary = this.summarizeInputsForDump(n);
+                canvasLines.push(`${indent}${uname}${inputsSummary ? ' (' + inputsSummary + ')' : ''}`);
+                if (Array.isArray(n?.nestedComponents) && n.nestedComponents.length > 0) {
+                    walk(n.nestedComponents, depth + 1);
+                }
+            }
+        };
+        walk(root, 0);
+        if (count >= MAX_NODES) {
+            canvasLines.push(`... (canvas con ${this.flattenedDashboardElements?.length || '?'} nodi totali, mostrati i primi ${MAX_NODES})`);
+        }
+        // Sezione 2: whitelist route metadata disponibili.
+        //
+        // Lazy-fetch: la prima volta che il chatbot invoca lo state provider
+        // (= primo prompt utente al chatbot dopo apertura designer), triggera
+        // il fetch fire-and-forget. La cache viene popolata in background; al
+        // SECONDO prompt sara' disponibile. Al PRIMO prompt il LLM vede
+        // 'caricamento in corso' e risponde "riprova tra un secondo".
+        //
+        // Questo approccio evita la chiamata HTTP al mount del designer
+        // (sprecata se l'utente non usa mai il chatbot) e isola eventuali
+        // errori (es. 404, utente non admin) dall'apertura del designer.
+        const metaSrvCtor = this.metaSrv?.constructor;
+        const routesCache = metaSrvCtor?._availableRoutesCache;
+        const fetchInflight = metaSrvCtor?._availableRoutesInflight;
+        if (routesCache === null && !fetchInflight) {
+            // Trigger fire-and-forget: non aspettiamo, la promise popolera' la
+            // cache; questo dump corrente restituira' 'caricamento' al LLM.
+            try {
+                void this.metaSrv.getAvailableRoutesAsync();
+            }
+            catch { /* ignore */ }
+        }
+        let routesSection;
+        if (Array.isArray(routesCache) && routesCache.length > 0) {
+            // Compatta: <route_name> (<display_string>) per ogni route. Limit
+            // 300 entries per evitare context overflow su install con molte route.
+            const MAX_ROUTES = 300;
+            const slice = routesCache.slice(0, MAX_ROUTES);
+            const routeLines = slice
+                .map(r => `  - ${r.md_route_name}${r.md_display_string ? ' ("' + r.md_display_string + '")' : ''}`)
+                .join('\n');
+            const trunc = routesCache.length > MAX_ROUTES
+                ? `\n  ... (${routesCache.length - MAX_ROUTES} altre route non mostrate)` : '';
+            routesSection = `\n\nROUTE METADATA DISPONIBILI (per DATASOURCE.inputs.route):\n${routeLines}${trunc}\n`
+                + `REGOLA: in DATASOURCE.inputs.route usa ESCLUSIVAMENTE uno dei valori `
+                + `md_route_name sopra (la prima colonna, non il display string). Se `
+                + `l'utente menziona un termine non esatto (es. "provincie" invece di `
+                + `"provinces", "fornitori" invece di "suppliers"), scegli il FUZZY `
+                + `MATCH semantico piu' probabile dalla whitelist. Se NESSUN match e' `
+                + `ragionevole (la route non esiste proprio), NON inventare: rispondi `
+                + `con un messaggio testuale (senza tool_use) che chiede all'utente di `
+                + `scegliere tra 2-3 candidati piu' vicini dalla whitelist.`;
+        }
+        else if (Array.isArray(routesCache) && routesCache.length === 0) {
+            // Cache popolata ma vuota (utente non admin, o nessuna route non-system).
+            routesSection = `\n\nROUTE METADATA DISPONIBILI: nessuna (utente senza `
+                + `accesso o nessuna route business). NON proporre DATASOURCE con `
+                + `inputs.route valorizzato finche' l'utente non specifica esplicitamente.`;
+        }
+        else {
+            // Cache ancora in caricamento (race con primo prompt subito dopo mount).
+            routesSection = `\n\nROUTE METADATA DISPONIBILI: <caricamento in corso>. `
+                + `Se l'utente menziona una route specifica, NON proporre il DATASOURCE `
+                + `con quella route alla cieca; rispondi che la whitelist sta caricando `
+                + `e chiedi di riprovare tra un secondo.`;
+        }
+        if (canvasLines.length === 0 && !routesCache)
+            return null;
+        const canvasSection = canvasLines.length > 0
+            ? canvasLines.join('\n')
+            : '(canvas vuoto)';
+        return canvasSection + routesSection;
+    }
+    /**
+     * Compatta i `inputs` di un nodo per il dump. Skip:
+     *   - proprieta' CSS standard (htmlInputProperties: backgroundColor,
+     *     fontSize, ecc.) per evitare di gonfiare il context con
+     *     proprieta' che il LLM puo' inferire dal tool_name + catalog.
+     *   - BehaviorSubject/oggetti complessi: solo serializzazione minima
+     *     (uniqueName se e' un dropped-component).
+     *   - undefined/null/stringhe vuote.
+     *
+     * Mostra solo le proprieta' "semantiche": rows/cols/areas/items per
+     * container, route/action per datasource, caption/value/innerText per
+     * leaf, header per tab/accordion area.
+     */
+    summarizeInputsForDump(node) {
+        if (!node?.inputs)
+            return '';
+        // Strategia: confronta ogni inputs[key] del nodo con il DEFAULT del template
+        // (availableTools.find(t.name === node.name).inputs[key]). Se uguale, skip.
+        // Cosi' il dump espone SOLO le proprieta' esplicitamente modificate
+        // dall'utente (manualmente nel property panel o via set_property RAG),
+        // dando al LLM un focus chirurgico sui "tratti distintivi" del componente
+        // per riferimenti deittici ("riquadro blu", "kpi grande", "testo rosso").
+        //
+        // Skip aggiuntivi:
+        //  - chiavi tecniche runtime (componentId/uniqueName/toolProps/onDrop/ctxItems...)
+        //  - BehaviorSubject del datasource: estrai solo uniqueName interno
+        //  - oggetti complessi non-datasource (callback bound, props bag): json
+        //    troncato a 40 char per non gonfiare
+        //  - inputs[propName] = undefined a default (es. width/height resettati
+        //    da dropTable per TR/TD)
+        const tplDefaults = this.getTemplateDefaultsFor(node?.name);
+        const technicalKeys = new Set([
+            'componentId', 'uniqueName', 'toolProps', 'onDrop', 'ctxItems',
+            'componentRef', 'parentRecord', 'parentMetaInfo', 'metaEditor',
+        ]);
+        const parts = [];
+        for (const key of Object.keys(node.inputs)) {
+            if (technicalKeys.has(key))
+                continue;
+            const v = node.inputs[key];
+            const def = tplDefaults ? tplDefaults[key] : undefined;
+            if (v === null || v === undefined || v === '') {
+                if (def === null || def === undefined || def === '')
+                    continue;
+                // L'utente ha esplicitamente cancellato un valore non-default
+                parts.push(`${key}=null`);
+                continue;
+            }
+            // BehaviorSubject: per datasource estrai uniqueName dell'oggetto wrappato
+            if (v && typeof v.subscribe === 'function') {
+                const inner = v.value;
+                const wrappedName = inner?.uniqueName || inner?.component?.uniqueName;
+                if (wrappedName)
+                    parts.push(`${key}=${wrappedName}`);
+                continue;
+            }
+            // Oggetto datasource (dropped-component-list, sync)
+            if (v && typeof v === 'object' && v.uniqueName) {
+                parts.push(`${key}=${v.uniqueName}`);
+                continue;
+            }
+            // Primitivi: includi solo se DIVERSI dal default del template
+            if (typeof v === 'boolean' || typeof v === 'number') {
+                if (v === def)
+                    continue;
+                parts.push(`${key}=${v}`);
+                continue;
+            }
+            if (typeof v === 'string') {
+                if (v === def)
+                    continue;
+                const trimmed = v.length > 40 ? v.slice(0, 37) + '...' : v;
+                parts.push(`${key}="${trimmed}"`);
+                continue;
+            }
+            // Funzioni: skip silenzioso (sono callback bound, non utili al LLM)
+            if (typeof v === 'function')
+                continue;
+            // Altri oggetti: serializza compatto (es. {a:1,b:2}) e diff vs default
+            try {
+                const json = JSON.stringify(v);
+                const defJson = def !== undefined ? JSON.stringify(def) : undefined;
+                if (json === defJson)
+                    continue;
+                const trimmed = json.length > 40 ? json.slice(0, 37) + '...' : json;
+                parts.push(`${key}=${trimmed}`);
+            }
+            catch { /* ignore */ }
+        }
+        return parts.join(', ');
+    }
+    /**
+     * Best-effort lookup dei defaults dell'inputs di un tool dal `availableTools`
+     * catalog. Usato dal dump per fare diff vs defaults. Ritorna `undefined` se
+     * tool name non trovato (compaiono solo i tool custom registrati via
+     * MetadataProviderService.customDesignerTools).
+     */
+    getTemplateDefaultsFor(toolName) {
+        if (!toolName)
+            return undefined;
+        const tpl = (this.availableTools || []).find(t => t?.name === toolName);
+        return tpl?.inputs;
+    }
+    /**
+     * Inietta UN nodo del layout proposto. Ricorsivo per children[].
+     *
+     * Pattern: clona template da availableTools, override inputs, simula drop
+     * (programmatico via this.drop({toElement: fakeEl con id=parentUniqueName})).
+     *
+     * Ritorna il numero di elementi creati (1 + somma dei children).
+     */
+    async injectLayoutNode(node, parentUniqueName) {
+        const toolName = String(node?.tool_name || '').trim();
+        if (!toolName)
+            throw new Error('Nodo senza tool_name');
+        const template = this.availableTools.find(t => t.name === toolName);
+        if (!template) {
+            throw new Error(`Tool '${toolName}' non trovato in availableTools (controlla docs/pages/_internal/designer-tool-catalog.md)`);
+        }
+        if (template.hide) {
+            throw new Error(`Tool '${toolName}' ha hide=true: non puo' essere proposto come top-level. Sara' creato automaticamente dal parent (es. TABLE -> TR/TD).`);
+        }
+        // CRITICAL: il drop() canonico (riga 5847+) recovera le function references
+        // (onDrop, ctxItems, inputProps[*].conditional/converter/callback) leggendole
+        // da `this.draggedPayload`. Se passiamo un clone via JSON.parse(JSON.stringify)
+        // tutte le function vengono perse -> dropTable/dropSplitter/dropAccordion NON
+        // vengono mai chiamati -> niente TR/TD auto-generati per TABLE/SPLITTER/ACCORDION.
+        //
+        // Pattern corretto: usare il template ORIGINALE (con function vive) come
+        // draggedPayload. Override temporaneo degli inputs + restore in finally,
+        // cosi' inject ripetuti non inquinano i defaults della palette.
+        const inputsBackup = template.inputs ? { ...template.inputs } : {};
+        // Override degli inputs SCALARI (string/number/boolean/array) PRIMA
+        // del drop(). I binding di tipo `dropped-component-list` /
+        // `dropped-component` vanno invece applicati POST-drop sull'istanza
+        // appena iniettata, perche':
+        //   1. il drop() canonico fa `JSON.parse(JSON.stringify(template))`
+        //      sul currentTool -> qualsiasi BehaviorSubject infilato in
+        //      template.inputs verrebbe serializzato come `{}` (perde valore
+        //      e prototype) -> hydration distrutta;
+        //   2. pre-drop l'oggetto target potrebbe non esistere ancora
+        //      (es. caso edge in cui il LLM riferisce un componente che
+        //      verra' creato in un nodo successivo del layout - non
+        //      supportato, ma diagnosticabile post-drop con messaggio chiaro).
+        //
+        // Estraiamo qui le keys "drop-binding" (per applicarle dopo) e teniamo
+        // SOLO gli scalari per il pre-drop Object.assign.
+        const droppedBindingKeys = [];
+        if (node.inputs && typeof node.inputs === 'object' && template.inputProps) {
+            for (const key of Object.keys(node.inputs)) {
+                const propDef = template.inputProps[key];
+                if (propDef && (propDef.type === 'dropped-component-list' || propDef.type === 'dropped-component')) {
+                    droppedBindingKeys.push(key);
+                }
+            }
+        }
+        if (node.inputs && typeof node.inputs === 'object' && template.inputs) {
+            for (const key of Object.keys(node.inputs)) {
+                if (droppedBindingKeys.includes(key))
+                    continue;
+                template.inputs[key] = node.inputs[key];
+            }
+        }
+        // DEFAULTS auto: se il tool e' un CONTAINER block-level (TABLE/DIV/
+        // SPLITTER/ACCORDION/TABVIEW/TABPANEL) e l'utente non ha specificato
+        // width/height in node.inputs, settali a '100%' cosi' riempie lo slot
+        // ospitante (TD/SPLITTER-AREA/canvas). Coerente con l'aspettativa
+        // utente: "crea TABLE 2x2" -> occupa il canvas, non un quadratino.
+        //
+        // ESCLUSI (inline-level / fit-content tools): LABEL/SPAN/Hx/ANCHOR/
+        // INPUT/BUTTON/CHECKBOX/DATE/SELECT/MULTISELECT/IMG/IFRAME/UL/KPI/
+        // SEPARATOR/HR/TEXTAREA. Forzando width:100% su questi tool si
+        // rompe il layout del parent (es. LABEL width:100% dentro un TD
+        // costringe il browser a espandere il TD perche' table-layout:auto
+        // non sa la dimensione finale -> squilibrio colonne).
+        //
+        // Sono OUT anche per def:
+        //   - tool senza width/height in inputProps (DATASOURCE, DATAREPEATER,
+        //     FILTERBAR, PAGER, TR, TD, SPLITTER-AREA, ACCORDION-AREA).
+        //   - tool dove l'utente ha specificato esplicitamente width/height.
+        const BLOCK_CONTAINER_TOOLS = new Set([
+            'TABLE', 'DIV', 'SPLITTER', 'ACCORDION', 'TABVIEW', 'TABPANEL'
+        ]);
+        const explicitInputs = node.inputs || {};
+        if (template.inputs && template.inputProps && BLOCK_CONTAINER_TOOLS.has(toolName)) {
+            if ('width' in template.inputProps && !('width' in explicitInputs)) {
+                template.inputs['width'] = '100%';
+            }
+            if ('height' in template.inputProps && !('height' in explicitInputs)) {
+                template.inputs['height'] = '100%';
+            }
+        }
+        // DEFAULT B: per TABLE forziamo `table-layout: fixed` se non specificato
+        // dall'utente. In modalita' fixed le colonne sono equipartite a priori
+        // (cols * (width / cols)) e NON dipendono dal contenuto. Cosi' iniettare
+        // contenuti di dimensioni diverse nelle celle (LABEL "ciao" + altro)
+        // non causa squilibrio. Default storico del framework era 'auto' ma per
+        // le table create dal RAG-chatbot 'fixed' e' molto piu' robusto.
+        if (toolName === 'TABLE' && template.inputs
+            && template.inputProps && 'tableLayout' in template.inputProps
+            && !('tableLayout' in explicitInputs)) {
+            template.inputs['tableLayout'] = 'fixed';
+        }
+        try {
+            // Stash il template ORIGINALE (preserva function references).
+            // Il drop() interno fara' un JSON.parse(JSON.stringify(draggedPayload))
+            // per il currentTool, e poi ripristinera' currentTool.onDrop =
+            // draggedPayload.onDrop dalla nostra istanza viva.
+            this.draggedPayload = template;
+            const fakeEvent = { toElement: null };
+            if (parentUniqueName) {
+                const fakeEl = document.createElement('div');
+                fakeEl.setAttribute('id', parentUniqueName);
+                fakeEvent.toElement = fakeEl;
+            }
+            this.drop(fakeEvent);
+        }
+        finally {
+            // Restore SEMPRE, anche su exception in drop(), cosi' il template della
+            // palette torna ai defaults originali (rows=2, cols=2, route=null, ecc.)
+            if (template.inputs) {
+                // Rimuovi le chiavi che node.inputs aveva aggiunto e non c'erano nel backup
+                for (const k of Object.keys(template.inputs)) {
+                    if (!Object.prototype.hasOwnProperty.call(inputsBackup, k)) {
+                        delete template.inputs[k];
+                    }
+                }
+                // Ripristina i valori delle chiavi originali
+                Object.assign(template.inputs, inputsBackup);
+            }
+        }
+        // L'ultimo nodo pushed e' quello appena iniettato. Recuperalo dal flatten
+        // tree (aggiornato da drop()) per ottenere l'uniqueName generato.
+        const justInjected = this.findLastInjectedNode(toolName, parentUniqueName);
+        const injectedUniqueName = justInjected?.uniqueName;
+        // EQUIPARTITION VERTICALE per TABLE/SPLITTER/ACCORDION iniettati via RAG.
+        // `table-layout: fixed` equipartisce solo le colonne (asse orizzontale);
+        // le righe TR (senza height esplicita) restano content-driven -> una
+        // riga con contenuto alto si espande, schiacciando le altre.
+        //
+        // Fix: dopo dropTable/dropSplitter/dropAccordion settiamo height/size
+        // percentuale equa sui figli auto-create.
+        //   - TABLE: ogni TR riceve height = 100/rows %
+        //   - SPLITTER: ogni SPLITTER-AREA riceve size = 100/areas
+        //     (gia' fatto da dropSplitter con size=50 hardcoded, qui rigiamo
+        //     per essere coerenti con N != 2)
+        //   - ACCORDION: items non hanno height (sono collassabili), skip
+        if (justInjected && Array.isArray(justInjected.nestedComponents) && justInjected.nestedComponents.length > 0) {
+            const childCount = justInjected.nestedComponents.length;
+            if (toolName === 'TABLE') {
+                const rowPct = `${Math.floor(10000 / childCount) / 100}%`;
+                for (const tr of justInjected.nestedComponents) {
+                    if (tr?.inputs)
+                        tr.inputs['height'] = rowPct;
+                }
+            }
+            else if (toolName === 'SPLITTER') {
+                // SPLITTER-AREA.size e' un number (% o px in base a inputs.unit)
+                const sizePct = Math.floor(10000 / childCount) / 100;
+                for (const area of justInjected.nestedComponents) {
+                    if (area?.inputs)
+                        area.inputs['size'] = sizePct;
+                }
+            }
+        }
+        // HYDRATION POST-DROP dei binding `dropped-component-list` /
+        // `dropped-component`. Il LLM passa una STRINGA (uniqueName diretto
+        // o placeholder `<DATASOURCE-N>`); il template runtime aspetta un
+        // OGGETTO `{uniqueName, [asyncPath]: BehaviorSubject(liveComp)}`
+        // (stessa shape costruita da setValue() canonico riga ~4972).
+        //
+        // Senza hydration: `inputs.datasource = "DATASOURCE__15"` (stringa),
+        // il tag `[datasource]="inputs.datasource?.component"` legge undefined,
+        // DATAREPEATER renderizza vuoto = grid senza dati e senza colonne.
+        //
+        // POST-drop perche':
+        //   1. `drop()` clona via JSON un eventuale BehaviorSubject pre-drop;
+        //   2. il target referenziato (es. DATASOURCE_15) deve esistere gia'
+        //      in flattenedDashboardElements (= iniettato in nodo precedente
+        //      del layout o gia' nel canvas).
+        if (justInjected && justInjected.inputs && droppedBindingKeys.length > 0 && node.inputs) {
+            for (const key of droppedBindingKeys) {
+                const propDef = template.inputProps?.[key];
+                if (!propDef)
+                    continue;
+                const raw = node.inputs[key];
+                if (raw === null || raw === undefined)
+                    continue;
+                // Se gia' oggetto (LLM mandasse direttamente {uniqueName,component})
+                // o BehaviorSubject -> pass-through. Solo stringhe vengono risolte.
+                if (typeof raw !== 'string') {
+                    justInjected.inputs[key] = raw;
+                    continue;
+                }
+                const resolved = (raw.startsWith('<') && raw.endsWith('>'))
+                    ? this.resolveCrossTreePlaceholder(raw)
+                    : raw.trim();
+                if (!resolved) {
+                    throw new Error(`Binding '${toolName}.${key}': placeholder '${raw}' non risolvibile. `
+                        + `Pattern atteso: '<DATASOURCE-N>' (N=indice 0-based del DATASOURCE iniettato). `
+                        + `Assicurati che il componente target sia stato iniettato PRIMA nel layout[].`);
+                }
+                const refElement = (this.flattenedDashboardElements || []).find((n) => n?.uniqueName === resolved);
+                if (!refElement) {
+                    throw new Error(`Binding '${toolName}.${key}': componente '${resolved}' non presente nel canvas`);
+                }
+                const filter = propDef.filter;
+                if (filter && refElement.name && String(refElement.name).toUpperCase() !== String(filter).toUpperCase()) {
+                    throw new Error(`Binding '${toolName}.${key}': atteso ${filter}, trovato ${refElement.name} (${resolved})`);
+                }
+                // Estrai snapshot del liveComp dal componentRef del DATASOURCE
+                // referenziato. Stessa logica di setValue() canonico riga 4977-4982.
+                //
+                // CRITICAL ASYNC: in scenario "inject programmatico" (chatbot RAG),
+                // il DATASOURCE e il DATAREPEATER vengono droppati nello stesso
+                // tick. Il componente Angular <wuic-data-source> NON e' ancora
+                // materializzato (ngAfterViewInit non e' partito) -> il suo
+                // `componentRef.next({component: this, ...})` (riga 838 di
+                // data-source.component.ts) succede SOLO al prossimo CD tick.
+                //
+                // Quindi al momento dell'hydration `compRef.value?.component` e' null.
+                // Se ci fermassimo a snapshot, creeremmo `BehaviorSubject(null)` e
+                // il DATAREPEATER resterebbe vuoto FOREVER (il BS interno del repeater
+                // non sa che deve ri-leggere quando il DATASOURCE finisce l'init).
+                //
+                // Fix: subscribe al compRef BS originale del DATASOURCE e propagare
+                // al compBs locale del repeater quando emette. Cosi' appena il
+                // DataSourceComponent si materializza, il binding si chiude e la
+                // grid renderizza i dati.
+                const compRef = refElement.inputs?.componentRef;
+                const liveComp = (compRef instanceof BehaviorSubject)
+                    ? (compRef.value?.component ?? compRef.value)
+                    : (compRef?.value?.component ?? compRef?.component ?? compRef ?? null);
+                const asyncPath = propDef.asyncPath || 'component';
+                const compBs = new BehaviorSubject(liveComp);
+                if (compRef instanceof BehaviorSubject) {
+                    // Subscribe sul compRef del DATASOURCE: ogni volta che il payload
+                    // viene emesso (es. quando il componente Angular fa next con
+                    // {component: this} in ngAfterViewInit), propaghiamo al BS del
+                    // repeater. La sottoscrizione vive finche' il designer e' aperto;
+                    // viene cleaned-up via `this.subs.add(...)` se la subs collection
+                    // esiste, altrimenti scope al componente lifecycle.
+                    const sub = compRef.subscribe((emitted) => {
+                        const newComp = (emitted && typeof emitted === 'object')
+                            ? (emitted.component ?? emitted)
+                            : null;
+                        if (newComp && newComp !== compBs.value) {
+                            compBs.next(newComp);
+                        }
+                    });
+                    try {
+                        const selfAny = this;
+                        if (selfAny.subs && typeof selfAny.subs.add === 'function') {
+                            selfAny.subs.add(sub);
+                        }
+                    }
+                    catch { /* subs collection non disponibile, sub continuera' a vivere col designer */ }
+                }
+                justInjected.inputs[key] = {
+                    uniqueName: refElement.uniqueName,
+                    [asyncPath]: compBs
+                };
+            }
+        }
+        // SIDE-EFFECT DATAREPEATER: dopo l'inject e l'hydration di
+        // `inputs.datasource`, il property panel canonico (setValue riga ~4997)
+        // chiama `propertyTreeBuilder(action, inputs)` per popolare la lista
+        // colonne del repeater (action='list' -> grid). Replichiamo qui per
+        // chiudere il binding end-to-end: senza questo, l'archetipo 'list'
+        // non sa quali colonne mostrare e la grid resta vuota anche con
+        // datasource bindato correttamente.
+        if (justInjected && toolName === 'DATAREPEATER' && justInjected.inputs) {
+            const ds = justInjected.inputs['datasource'];
+            const action = this.getRepeaterAction(justInjected) || justInjected.inputs['action'] || 'list';
+            if (ds) {
+                try {
+                    this.propertyTreeBuilder(action, justInjected.inputs);
+                }
+                catch (err) {
+                    try {
+                        console.warn('[injectLayoutNode] propertyTreeBuilder failed for DATAREPEATER', err);
+                    }
+                    catch { /* ignore */ }
+                }
+            }
+        }
+        let count = 1;
+        // Recursion sui children. Tre casi per il parent del child:
+        //   1. `ch.parent_unique_name` e' un uniqueName REALE (es. "TD__126")
+        //      => usalo direttamente, il drop() lo risolvera' via componentId.
+        //   2. `ch.parent_unique_name` e' un PLACEHOLDER semantico (es. "<TD-0>",
+        //      "<SPLITTER-AREA-1>") => risolvilo dentro `justInjected.nestedComponents`
+        //      (i nodi auto-create da dropTable/dropSplitter/dropAccordion).
+        //   3. Manca o null => default = il parent appena iniettato (LABEL dentro
+        //      DIV, TABPANEL dentro TABVIEW, ecc.).
+        const children = Array.isArray(node.children) ? node.children : [];
+        if (children.length && injectedUniqueName) {
+            for (const ch of children) {
+                let childParent = injectedUniqueName;
+                const declared = (ch && typeof ch.parent_unique_name === 'string') ? ch.parent_unique_name.trim() : '';
+                if (declared) {
+                    if (declared.startsWith('<') && declared.endsWith('>')) {
+                        // Placeholder semantico: risolvi dentro justInjected
+                        const resolved = this.resolveLayoutPlaceholder(declared, justInjected);
+                        if (resolved)
+                            childParent = resolved;
+                        else
+                            throw new Error(`Placeholder '${declared}' non risolvibile dentro ${justInjected?.uniqueName} (verifica struttura: rows/cols/areas/items match)`);
+                    }
+                    else {
+                        // uniqueName reale (es. TD__126): pass-through al drop()
+                        childParent = declared;
+                    }
+                }
+                count += await this.injectLayoutNode(ch, childParent);
+            }
+        }
+        return count;
+    }
+    /**
+     * Risolve i placeholder semantici che il LLM usa per riferirsi a nodi
+     * auto-generati dai custom onDrop (TABLE crea TR/TD, SPLITTER crea
+     * SPLITTER-AREA, ACCORDION crea ACCORDION-AREA). Lookup dentro il parent
+     * appena iniettato.
+     *
+     * Pattern supportati (case-insensitive sui tag):
+     *   - `<TD-N>`           - N-esima cella in row-major order (TR[0].TD[0],
+     *                          TR[0].TD[1], ..., TR[1].TD[0], ...). N zero-based.
+     *   - `<TD-R-C>`         - cella a riga R colonna C (zero-based).
+     *   - `<TR-N>`           - N-esima riga.
+     *   - `<SPLITTER-AREA-N>` - N-esima area dello splitter.
+     *   - `<ACCORDION-AREA-N>` - N-esimo item dell'accordion.
+     *   - `<TABPANEL-N>`     - N-esimo tab del tabview.
+     *
+     * Ritorna l'uniqueName del nodo risolto, o `null` se il pattern non matcha
+     * o l'index e' out-of-bounds (es. <TD-3> in tabella 2x2).
+     */
+    resolveLayoutPlaceholder(placeholder, parentNode) {
+        if (!placeholder || !parentNode)
+            return null;
+        const inner = placeholder.replace(/^<|>$/g, '').trim();
+        const parts = inner.split('-');
+        if (parts.length < 2)
+            return null;
+        const tag = parts[0].toUpperCase();
+        const nested = parentNode.nestedComponents || [];
+        if (tag === 'TD') {
+            // <TD-N> singolo index OR <TD-R-C> riga/colonna
+            if (parts.length === 2) {
+                const n = parseInt(parts[1], 10);
+                if (!Number.isFinite(n))
+                    return null;
+                // Row-major lookup: TR[i].TD[j]
+                let idx = 0;
+                for (const tr of nested) {
+                    for (const td of (tr.nestedComponents || [])) {
+                        if (idx === n)
+                            return td.uniqueName || null;
+                        idx++;
+                    }
+                }
+                return null;
+            }
+            if (parts.length === 3) {
+                const r = parseInt(parts[1], 10);
+                const c = parseInt(parts[2], 10);
+                if (!Number.isFinite(r) || !Number.isFinite(c))
+                    return null;
+                const tr = nested[r];
+                if (!tr)
+                    return null;
+                const td = (tr.nestedComponents || [])[c];
+                return td?.uniqueName || null;
+            }
+            return null;
+        }
+        if (tag === 'TR') {
+            const n = parseInt(parts[1], 10);
+            if (!Number.isFinite(n))
+                return null;
+            return nested[n]?.uniqueName || null;
+        }
+        if (tag === 'SPLITTER' && parts[1].toUpperCase() === 'AREA') {
+            const n = parseInt(parts[2], 10);
+            if (!Number.isFinite(n))
+                return null;
+            return nested[n]?.uniqueName || null;
+        }
+        if (tag === 'ACCORDION' && parts[1].toUpperCase() === 'AREA') {
+            const n = parseInt(parts[2], 10);
+            if (!Number.isFinite(n))
+                return null;
+            return nested[n]?.uniqueName || null;
+        }
+        if (tag === 'TABPANEL') {
+            const n = parseInt(parts[1], 10);
+            if (!Number.isFinite(n))
+                return null;
+            return nested[n]?.uniqueName || null;
+        }
+        return null;
+    }
+    /**
+     * Risolve placeholder CROSS-TREE per binding di tipo `dropped-component-list`
+     * (es. DATAREPEATER.inputs.datasource = "<DATASOURCE-0>" -> "DATASOURCE__15").
+     *
+     * Diversamente da `resolveLayoutPlaceholder` (lookup dentro
+     * nestedComponents del parent), qui cerchiamo nel `flattenedDashboardElements`
+     * globale, perche' il LLM puo' riferirsi a componenti che vivono in tutto
+     * il canvas (es. DATASOURCE in un TD, DATAREPEATER in un TD diverso).
+     *
+     * Pattern supportato: `<NAME-N>` dove `NAME` matcha `tool.name`
+     * (DATASOURCE, DATAREPEATER, FILTERBAR, PAGER, ...) e `N` e' l'index
+     * 0-based dei tool con quel nome nell'ordine in cui appaiono in
+     * `flattenedDashboardElements` (= ordine di inject).
+     *
+     * Ritorna l'uniqueName risolto, o `null` se non trova match.
+     *
+     * Esempi:
+     *   - "<DATASOURCE-0>"    -> primo DATASOURCE iniettato (es. "DATASOURCE__3")
+     *   - "<DATASOURCE-1>"    -> secondo DATASOURCE (master-detail)
+     *   - "<DATAREPEATER-0>"  -> primo DATAREPEATER
+     *
+     * Casi degeneri:
+     *   - placeholder non riconosciuto -> null
+     *   - N out-of-bounds (es. <DATASOURCE-3> con solo 2 DS) -> null
+     *
+     * Usato in `injectLayoutNode` per risolvere binding del tipo
+     * `inputs.datasource = "<DATASOURCE-0>"` PRIMA di costruire l'oggetto
+     * wrapper `{uniqueName, component: BS}`.
+     */
+    resolveCrossTreePlaceholder(placeholder) {
+        if (!placeholder || typeof placeholder !== 'string')
+            return null;
+        const trim = placeholder.trim();
+        if (!trim.startsWith('<') || !trim.endsWith('>'))
+            return null;
+        const inner = trim.replace(/^<|>$/g, '').trim();
+        const m = inner.match(/^([A-Za-z][A-Za-z0-9_-]*)-(\d+)$/);
+        if (!m)
+            return null;
+        const targetName = m[1].toUpperCase();
+        const targetIdx = parseInt(m[2], 10);
+        if (!Number.isFinite(targetIdx) || targetIdx < 0)
+            return null;
+        const matching = (this.flattenedDashboardElements || [])
+            .filter((n) => n?.name && String(n.name).toUpperCase() === targetName);
+        if (targetIdx >= matching.length)
+            return null;
+        return matching[targetIdx]?.uniqueName || null;
+    }
+    /**
+     * Best-effort lookup dell'ultimo nodo iniettato. Strategia:
+     *   - se parentUniqueName fornito: cerca dentro il nestedComponents del
+     *     parent il piu' recente con quel toolName;
+     *   - altrimenti (root): cerca in dashboardElements il piu' recente con
+     *     quel toolName.
+     *
+     * "piu' recente" = ultimo elemento dell'array (drop() fa push() in append).
+     */
+    findLastInjectedNode(toolName, parentUniqueName) {
+        let scope;
+        if (parentUniqueName) {
+            const parent = (this.flattenedDashboardElements || []).find((n) => n?.uniqueName === parentUniqueName);
+            scope = parent?.nestedComponents || [];
+        }
+        else {
+            scope = this.dashboardElements || [];
+        }
+        for (let i = scope.length - 1; i >= 0; i--) {
+            if (scope[i]?.name === toolName)
+                return scope[i];
+        }
+        return undefined;
     }
     /**
      * Handler capture-phase per mouseup/touchend su document. Riferimento
@@ -8795,8 +9728,24 @@ class DesignerComponent {
         const detailColumnsHint = detailColumns.length
             ? detailColumns.map((col) => `// - ${col}`).join('\n')
             : '// - (no detail columns available yet)';
-        const defaultFormula = detailColumns.length
-            ? `// Detail columns (use one as first argument of setFilter):\n${detailColumnsHint}\nsetFilter('${detailColumns[0].replace(/'/g, "\\'")}', ${masterPkValueExpression}, 'eq');`
+        // Risoluzione FK del detail verso il master (allineata a
+        // `injectMasterDetailLookupFilter` runtime — cosi' la formula proposta
+        // produce lo stesso risultato del fallback automatico).
+        // Cascata:
+        //   1) FK lookup canonica via metadata (mc_ui_lookup_entity_name == masterRoute);
+        //   2) colonna del detail che ha lo stesso nome della PK del master
+        //      (convention WUIC: `cities.StateProvinceID` punta a `stateprovinces.StateProvinceID`);
+        //   3) backward-compat: prima colonna del detail (vecchio comportamento,
+        //      produce filtro sbagliato ma evita undefined).
+        const fkFromLookup = detailDatasource
+            ? this.findDetailFkColumnToMasterRoute(detailDatasource, masterRoute)
+            : null;
+        const fkFromNameMatch = !fkFromLookup && masterPrimaryKey && detailColumns.includes(masterPrimaryKey)
+            ? masterPrimaryKey
+            : null;
+        const detailFkField = fkFromLookup || fkFromNameMatch || (detailColumns.length ? detailColumns[0] : '');
+        const defaultFormula = detailFkField
+            ? `// Detail columns (use one as first argument of setFilter):\n${detailColumnsHint}\nsetFilter('${detailFkField.replace(/'/g, "\\'")}', ${masterPkValueExpression}, 'eq');`
             : `// Detail columns (use one as first argument of setFilter):\n${detailColumnsHint}\n// Example:\n// setFilter('detail_fk', ${masterPkValueExpression}, 'eq');`;
         const result = await WtoolboxService.promptDialog('Master-Detail Filter Formula', [
             {
@@ -10791,12 +11740,25 @@ Display formula context:
         return true;
     }
     /**
-     * Fallback master-detail basato su colonne lookup: applica filtro `eq` sulla colonna che punta alla route master.
-     */
-    injectMasterDetailLookupFilter(detailDatasource, masterRoute, masterRowId) {
+     * Helper condiviso: trova nella metadata del DETAIL la colonna lookup che
+     * punta alla route MASTER. Usato sia da `injectMasterDetailLookupFilter`
+     * (runtime fallback) sia da `openMasterDetailFilterFormulaEditor` (default
+     * formula in UI editor) — cosi' i 2 path producono lo stesso risultato e
+     * non c'e' drift tra "filtro automatico" e "formula proposta nel dialog".
+     *
+     * Logica:
+     * 1) cerca una colonna `mc_ui_column_type=='lookupbyid'` con
+     *    `mc_ui_lookup_entity_name==<masterRoute>` OPPURE `mc_ui_grid_route==<masterRoute>`.
+     *    Questo e' il match canonico WUIC (FK lookup definita nei metadata).
+     * 2) ritorna `null` se non c'e' match (il chiamante decide il fallback —
+     *    `injectMasterDetailLookupFilter` ritorna `false`,
+     *    `openMasterDetailFilterFormulaEditor` cade su `detailColumns[0]` per
+     *    backward-compat).
+     */
+    findDetailFkColumnToMasterRoute(detailDatasource, masterRoute) {
         const normalizedMasterRoute = String(masterRoute || '').trim().toLowerCase();
         if (!normalizedMasterRoute || !detailDatasource?.metaInfo?.columnMetadata?.length) {
-            return false;
+            return null;
         }
         const lookupColumn = detailDatasource.metaInfo.columnMetadata.find((column) => {
             if (!column || String(column.mc_ui_column_type || '').toLowerCase() !== 'lookupbyid') {
@@ -10806,7 +11768,14 @@ Display formula context:
             const gridRoute = String(column.mc_ui_grid_route || '').trim().toLowerCase();
             return lookupRoute === normalizedMasterRoute || gridRoute === normalizedMasterRoute;
         });
-        const lookupField = lookupColumn?.mc_nome_colonna;
+        const lookupField = String(lookupColumn?.mc_nome_colonna || '').trim();
+        return lookupField || null;
+    }
+    /**
+     * Fallback master-detail basato su colonne lookup: applica filtro `eq` sulla colonna che punta alla route master.
+     */
+    injectMasterDetailLookupFilter(detailDatasource, masterRoute, masterRowId) {
+        const lookupField = this.findDetailFkColumnToMasterRoute(detailDatasource, masterRoute);
         if (!lookupField) {
             return false;
         }
@@ -10858,13 +11827,13 @@ Display formula context:
         });
         // return customProps;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DesignerComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: DataProviderService }, { token: MetadataProviderService }, { token: UserInfoService }, { token: i0.ChangeDetectorRef }, { token: TranslationManagerService }, { token: MetadataEditorService }, { token: WorkflowRuntimeMetadataService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DesignerComponent, isStandalone: true, selector: "wuic-designer", host: { listeners: { "window:hashchange": "onWindowHashChange()", "window:beforeunload": "onWindowBeforeUnload($event)", "window:keydown": "onWindowKeydown($event)", "window:mouseup": "onWindowMouseup()", "window:touchend": "onWindowTouchend()", "window:keyup": "onWindowKeyup()", "window:change": "onWindowChange()" } }, providers: [TreeDragDropService], ngImport: i0, template: "<!-- <button pButton type=\"button\" (click)=\"loadDashboard()\" class=\"mr-2\">{{'load' | translate}}</button> -->\n@if (!noEdit) {\n<div class=\"designer-layout\">\n  <div class=\"designer-toolbar\">\n    <div class=\"designer-current-dashboard\">{{ currentDashboardTitle }}</div>\n\n    <div class=\"designer-toolbar-spacer\"></div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"undo()\" [disabled]=\"!canUndo\">{{ 'designer.undo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"redo()\" [disabled]=\"!canRedo\">{{ 'designer.redo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"refreshGraphActionsMenuItems(); graphActionsMenu.toggle($event)\">{{ 'designer.actions_menu' | translate }}</button>\n      <p-menu #graphActionsMenu [popup]=\"true\" [model]=\"graphActionsMenuItems\" appendTo=\"body\"></p-menu>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"openCurrentDashboardInNewTab()\" [disabled]=\"!currentDashboardRoute\">{{\n        'designer.open_current_dashboard' | translate }}</button>\n    </div>\n  </div>\n  <div class=\"designer-main\">\n    <p-splitter [style]=\"{ height: '100%' }\" [panelSizes]=\"[15, 85]\" styleClass=\"designer-main-splitter\">\n      <ng-template pTemplate>\n        <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[35, 65]\"\n          [minSizes]=\"[20, 30]\" styleClass=\"designer-left-splitter\">\n          <ng-template pTemplate>\n            <div class=\"col flex designer-toolbox palette-panel\">\n              <ul class=\"tool-groups\">\n                @for (toolGroup of availableToolGroups; track toolGroup.group) {\n                <li class=\"tool-group-item\">\n                  <div class=\"tool-group-title\">{{ toolGroup.group }}</div>\n                  <ul class=\"tool-group-list\">\n                    @for (tool of toolGroup.tools; track tool) {\n                    <li pDraggable (onDragStart)=\"dragStart(tool)\" (onDragEnd)=\"dragEnd()\" (onDrag)=\"onDrag($event)\"\n                      (dblclick)=\"dropToolAtRoot(tool)\">\n                      <i [ngClass]=\"tool.icon\" [title]=\"tool.name\"></i>\n                    </li>\n                    }\n                  </ul>\n                </li>\n                }\n              </ul>\n            </div>\n          </ng-template>\n          <ng-template pTemplate>\n            <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[68, 32]\"\n              [minSizes]=\"[35, 20]\" styleClass=\"designer-left-bottom-splitter\">\n              <ng-template pTemplate>\n                <div class=\"properties-panel\">\n                  <p-select [style]=\"{width: '100%'}\" [options]=\"flattenedDashboardElements\" [(ngModel)]=\"tool\"\n                    optionLabel=\"uniqueName\" dataKey=\"componentId\" appendTo=\"body\" />\n                  <div class=\"designer-toolbox\">\n\n                    <span style=\"width: 100%;\">\n                      <input type=\"text\" style=\"width: calc(100% - 30px);\" [(ngModel)]=\"propFilter\"\n                        [placeholder]=\"'prop.filter' | translate\" />\n                      <button style=\"width: 25px\" (click)=\"clearPropFilter()\">X</button>\n                    </span>\n\n                    @for (section of getToolPropertySections(tool, propFilter); track section.key) {\n                    <details class=\"prop-section\" [open]=\"section.open\"\n                      (toggle)=\"onPropertySectionToggle(tool, section.key, $event)\">\n                      <summary class=\"prop-section-title\">{{ section.label }}</summary>\n                      <ul class=\"props\">\n                        @for (toolProp of section.props; track toolProp.key) {\n                        <li>\n                          @if (!toolProp.value.hideCaption) {\n                          <span>{{ toolProp.value?.propertyCaption ||\n                            toolProp.key[0].toUpperCase() + toolProp.key.slice(1)\n                            }}</span>\n                          }\n                          <br />\n                          @if (toolProp.value.type == 'button') {\n                          <p-button (click)=\"toolProp.value.callback(tool.inputs, toolProp.key, null, tool)\"\n                            class=\"k-button\" [style]=\"{width: '100%'}\">\n                            {{toolProp.value.propertyCaption}}\n                          </p-button>\n                          }\n                          @if (toolProp.value.type == 'metaEditor' &&\n                          tool.inputs['componentRef']?.value?.component) {\n                          <wuic-metadata-editor [hardcodedDatasource]=\"tool.inputs['componentRef']?.value?.component\"\n                            [saveCallback]=\"metaEditorSave\"></wuic-metadata-editor>\n                          }\n                          @if (toolProp.value.type == 'boolean') {\n                          <input type=\"checkbox\" [(ngModel)]=\"tool.inputs[toolProp.key]\" />\n                          }\n                          @if (toolProp.value.type == 'numberToArray') {\n                          <input style=\"width: 100%;\" type=\"number\" pInputText [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'txt_area') {\n                          <textarea style=\"width: 100%;\" [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\"></textarea>\n                          }\n                          @if (toolProp.value.type == 'string') {\n                          <input style=\"width: 100%;\" type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'color') {\n                          <p-colorPicker [ngModel]=\"getDesignerColorPickerHex(tool, toolProp)\"\n                            (ngModelChange)=\"onDesignerColorPickerHexChange($event, tool, toolProp)\" appendTo=\"body\" />\n                          <div class=\"designer-color-alpha-row\">\n                            <span class=\"designer-color-alpha-label\">{{ 'designer.alpha' | translate }}</span>\n                            <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                            <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                          </div>\n                          <input type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'dictionary' && !toolProp.value.async) {\n                          @if (toolProp.key == 'cssFile') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"availableProjectCssFiles\"\n                            [ngModel]=\"tool.inputs[toolProp.key]\" (ngModelChange)=\"onCssFileChanged($event, tool)\" />\n                          } @else if (toolProp.key == 'cssClass') {\n                          <p-multiSelect [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getCssClassOptionsForTool(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"onCssClassChanged($event, tool)\" [filter]=\"true\" [virtualScroll]=\"true\"\n                            [virtualScrollItemSize]=\"38\" scrollHeight=\"260px\" [showToggleAll]=\"false\" display=\"chip\"\n                            [maxSelectedLabels]=\"3\" [selectedItemsLabel]=\"'{0} selected'\">\n                          </p-multiSelect>\n                          } @else if ((tool.name == 'SELECT' || tool.name == 'MULTISELECT' || tool.name == 'UL') &&\n                          (toolProp.key == 'valueField' || toolProp.key == 'textField')) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else if (tool.name == 'LABEL' && toolProp.key == 'displayField') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          }\n                          @if (toolProp.value.type == 'dictionary' && toolProp.value.async) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (tool.name == 'DATAREPEATER' && toolProp.key == 'action' &&\n                          canOpenArchetypeConfigurator(tool)) {\n                          <button style=\"margin-top: 8px;\" (click)=\"openArchetypeConfigurator(tool)\">\n                            {{ 'designer.configure' | translate }} {{ (tool.inputs['action'] | async) || '' }}\n                          </button>\n                          }\n                          @if (toolProp.value.type == 'dropped-component-list') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [placeholder]=\"'select.component' | translate\" [options]=\"elementFilter(toolProp)\"\n                            [ngModel]=\"getDroppedComponentListModel(tool, toolProp)\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" optionLabel=\"uniqueName\"\n                            dataKey=\"uniqueName\" />\n                          }\n                          @if (toolProp.value.type == 'autocomplete') {\n                          <p-autoComplete [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\" [forceSelection]=\"true\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" [suggestions]=\"tool.suggestions\"\n                            [optionLabel]=\"toolProp.value.displayField\" [optionValue]=\"toolProp.value.valueField\"\n                            (completeMethod)=\"search($event, tool, toolProp)\" [dropdown]=\"true\" dropdownMode=\"current\"\n                            [multiple]=\"toolProp.value.multiple\" />\n                          }\n                          @if (toolProp.value.type == 'propertyTree' && shouldShowPropertyTree(tool)) {\n                          <ul>\n                            @for (item of $any(tool.inputs[toolProp.key] | async); track item) {\n                            <li style=\"padding: 0; margin: 0;\">\n                              @if (item.col && tool.inputs['customProps_' + (tool.inputs['action'] | async)])\n                              {\n                              <wuic-field-editor [field]=\"item.col\"\n                                [record]=\"tool.inputs['customProps_' + (tool.inputs['action'] | async)]\"\n                                [metaInfo]=\"tool.inputs['datasource']?.component?.value?.metaInfo\"\n                                [triggerProp]=\"tool.inputs['action']\"></wuic-field-editor>\n                              }\n                            </li>\n                            }\n                          </ul>\n                          }\n                        </li>\n                        }\n                      </ul>\n                    </details>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n              <ng-template pTemplate>\n                <div class=\"hierarchy-panel\">\n                  <div class=\"hierarchy-panel-title\">{{ 'designer.canvas_hierarchy' | translate }}</div>\n                  <div class=\"hierarchy-tree-wrap\">\n                    <p-tree [value]=\"hierarchyTreeNodes\" [draggableNodes]=\"true\" [droppableNodes]=\"true\"\n                      selectionMode=\"single\" [(selection)]=\"hierarchySelection\"\n                      (onNodeSelect)=\"onHierarchyNodeSelect($event)\" draggableScope=\"designer-hierarchy\"\n                      droppableScope=\"designer-hierarchy\" (onNodeDrop)=\"onHierarchyNodeDrop($event)\">\n                      <ng-template let-node pTemplate=\"default\">\n                        <span class=\"hierarchy-node-label\" [class.active]=\"isHierarchyNodeSelected(node)\"\n                          (mouseenter)=\"onHierarchyNodeMouseEnter(node)\" (mouseleave)=\"onHierarchyNodeMouseLeave()\"\n                          (contextmenu)=\"showHierarchyNodeContextMenu($event, node, hierarchyCtxMenu)\">\n                          {{ node.label }}\n                        </span>\n                      </ng-template>\n                    </p-tree>\n                  </div>\n                  <p-contextMenu #hierarchyCtxMenu [model]=\"hierarchyCtxItems\" appendTo=\"body\" />\n                </div>\n              </ng-template>\n            </p-splitter>\n          </ng-template>\n        </p-splitter>\n      </ng-template>\n      <ng-template pTemplate>\n        <div class=\"col dashboard-design\" [class.designer-hide-datasources]=\"hideDatasourcesInCanvas\" pDroppable\n          (onDrop)=\"drop($event)\" #canvas (contextmenu)=\"showCtx($event, this)\">\n          <wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n          <p-contextMenu [target]=\"canvas\" [model]=\"ctxItems | async\" appendTo=\"body\" />\n        </div>\n      </ng-template>\n    </p-splitter>\n  </div>\n  <div class=\"designer-footer\">\n    <div class=\"designer-footer-label\">{{ 'designer.items' | translate }}:</div>\n    <div class=\"designer-footer-list\">\n      @for (item of droppedDashboardItems; track item.uniqueName) {\n      <button type=\"button\" class=\"designer-footer-item\" [class.active]=\"tool?.uniqueName === item?.uniqueName\"\n        [attr.data-designer-unique-name]=\"item?.uniqueName\" (mouseenter)=\"setFooterHoverHighlight(item)\"\n        (mouseleave)=\"clearFooterHoverHighlight()\" (click)=\"selectDashboardItem(item)\"\n        (contextmenu)=\"showFooterContextMenu($event, item, footerCtxMenu)\">\n        {{ getDroppedDashboardItemLabel(item) }}\n      </button>\n      }\n    </div>\n    <p-contextMenu #footerCtxMenu [model]=\"footerCtxItems\" appendTo=\"body\" />\n  </div>\n</div>\n}\n\n@if (noEdit) {\n<wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n}\n\n<wuic-archetype-configurator [visible]=\"showArchetypeConfigurator\"\n  (visibleChange)=\"onArchetypeConfigVisibleChange($event)\" [archetype]=\"getActiveArchetypeConfig()\"\n  [metaInfo]=\"getArchetypeConfigMetaInfoForTool(archetypeConfigTool)\"\n  [value]=\"getArchetypeConfigValueForTool(archetypeConfigTool)\" (applyConfig)=\"onArchetypeConfigApply($event)\">\n</wuic-archetype-configurator>\n\n<wuic-css-sheet-editor [visible]=\"showCssSheetEditor\" (visibleChange)=\"onCssSheetEditorVisibleChange($event)\"\n  [sheets]=\"dashboardCssSheets\" [selectedSheetPath]=\"selectedCssEditorSheetPath\" [assetsFolder]=\"currentDashboardRoute\"\n  [styleProps]=\"getCssEditorStyleProps()\" (applyEditor)=\"onCssSheetEditorApply($event)\">\n</wuic-css-sheet-editor>\n\n<p-dialog [header]=\"'designer.reopen_dashboard' | translate\" [(visible)]=\"reopenDashboardDialogVisible\" [modal]=\"true\"\n  [closable]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [appendTo]=\"'body'\" [style]=\"{ width: '34rem' }\"\n  (onHide)=\"cancelReopenDashboardDialog()\">\n  <div class=\"route-popup-form\">\n    <label for=\"designer-reopen-select\">{{ 'designer.existing_dashboards' | translate }}</label>\n    <p-select inputId=\"designer-reopen-select\" [options]=\"savedDashboardOptions\" optionLabel=\"label\" optionValue=\"value\"\n      [(ngModel)]=\"reopenDialogSelectedDashboardRoute\" [filter]=\"true\" [showClear]=\"true\" [style]=\"{ width: '100%' }\"\n      appendTo=\"body\" />\n\n    <div class=\"route-popup-actions\">\n      <button type=\"button\" class=\"route-popup-btn\" (click)=\"cancelReopenDashboardDialog()\">{{ 'cancel' | translate\n        }}</button>\n      <button type=\"button\" class=\"route-popup-btn route-popup-btn-primary\" (click)=\"confirmReopenDashboardDialog()\"\n        [disabled]=\"!reopenDialogSelectedDashboardRoute\">{{ 'designer.reopen' | translate }}</button>\n    </div>\n  </div>\n</p-dialog>", styles: [":host{display:block;width:100%;height:100%;min-width:0}.designer-layout{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;width:100%;min-width:0}.designer-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px solid inherit;border-radius:10px;background:transparent;padding:10px 12px;margin-bottom:8px}.designer-current-dashboard{min-width:220px;font-size:.86rem;font-weight:700;color:inherit}.designer-toolbar-spacer{flex:1 1 auto;min-width:16px}.designer-toolbar-menu-group{display:inline-flex}.designer-toolbar-menu-group button{height:32px;border:1px solid #2f67d8;border-radius:6px;background:#2f67d8;color:#fff;padding:0 10px;font-size:.82rem;cursor:pointer}.designer-toolbar-menu-group button[disabled]{opacity:.6;cursor:not-allowed}.designer-main{min-height:0;min-width:0;width:100%;overflow:hidden;direction:ltr}.designer-main-splitter{height:100%;width:100%;min-width:0;direction:ltr}.designer-toolbox{font-size:3rem}.designer-toolbox ul{list-style-type:none;padding:0;margin:0;width:100%}.designer-toolbox li{float:left;margin-left:5px;margin-top:5px}.designer-toolbox .tool-groups{display:block}.designer-toolbox .tool-group-item{float:none;margin-left:0;margin-top:10px;clear:both}.designer-toolbox .tool-group-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin:0 0 4px 6px}.designer-toolbox .tool-group-list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px}.designer-toolbox .tool-group-list li{float:none;margin-left:0;margin-top:0}.designer-toolbox .props{font-size:1rem}.designer-toolbox .props li{float:none;padding-bottom:15px}.designer-toolbox .prop-section{width:100%;border:1px solid inherit;border-radius:6px;margin-top:8px;background:transparent;padding:6px 8px 2px}.designer-toolbox .prop-section-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;color:inherit;margin-bottom:6px}.palette-panel{height:100%;overflow:auto;width:100%}.designer-color-alpha-row{display:flex;align-items:center;gap:8px;margin-top:6px;margin-bottom:6px}.designer-color-alpha-label{font-size:.8rem;min-width:40px}.designer-color-alpha-row input[type=range]{flex:1 1 auto;min-width:90px}.designer-color-alpha-row input[type=number]{width:72px}.properties-panel{height:100%;overflow:hidden;width:100%;display:flex;flex-direction:column;min-height:0;padding-right:10px;padding-left:10px;padding-top:10px}.properties-panel>.designer-toolbox{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}:host ::ng-deep .designer-left-bottom-splitter .p-splitterpanel{min-height:0!important;overflow:hidden!important}.hierarchy-panel{height:100%;width:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:6px}.hierarchy-panel-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#4b5563;margin:0 0 6px}.hierarchy-tree-wrap{flex:1 1 auto;min-height:0;border:1px solid inherit;border-radius:6px;background:transparent;overflow:auto;padding:4px}:host ::ng-deep .hierarchy-tree-wrap .p-tree{border:none;padding:0;height:100%;background:transparent}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content{border:1px solid transparent;border-radius:4px;background:transparent!important;color:inherit!important;padding:0!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight{border-color:transparent!important;background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content:hover{background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label{display:inline-block;border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label:hover{border-color:#94a3b8}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label.active{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight .hierarchy-node-label{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}.designer-hierarchy-node{cursor:pointer;border:1px solid transparent;border-radius:4px;padding:2px 6px;font-size:.82rem;line-height:1.25rem}.designer-hierarchy-node-label{cursor:pointer;display:inline-block;width:100%}.designer-hierarchy-node.active{border-color:#3b82f6;background:#eff6ff;color:#1d4ed8}.designer-footer-item.designer-tree-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px}.dashboard-design{height:100%;min-height:0;min-width:0;width:100%;overflow:auto;direction:ltr}:host ::ng-deep .dashboard-design.designer-hide-datasources .datasource-descriptor{display:none!important}.current-dashboard-title{font-weight:600;margin-right:12px}.designer-footer{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid inherit;background:transparent;min-height:36px;flex:0 0 auto;width:100%;overflow:auto}.designer-footer-label{font-size:.85rem;font-weight:600;color:inherit;white-space:nowrap}.designer-footer-list{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%}.designer-footer-item{border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer;white-space:nowrap}.designer-footer-item.active{border-color:#3b82f6;background:transparent;color:#1d4ed8}:host ::ng-deep .designer-footer-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px;box-shadow:inset 0 0 0 1px #3b82f6!important}.route-popup-form{display:flex;flex-direction:column;gap:8px}.route-popup-form label{font-size:.85rem;font-weight:600;color:#2f3f58}.route-popup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.route-popup-btn{border:1px solid inherit;background:transparent;color:inherit;border-radius:6px;padding:7px 12px;font-size:.85rem;cursor:pointer}.route-popup-btn-primary{border-color:#2f67d8;background:#2f67d8;color:#fff}.p-colorpicker{border:1px solid black;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i9.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i11.Draggable, selector: "[pDraggable]", inputs: ["pDraggable", "dragEffect", "dragHandle", "pDraggableDisabled"], outputs: ["onDragStart", "onDragEnd", "onDrag"] }, { kind: "directive", type: i11.Droppable, selector: "[pDroppable]", inputs: ["pDroppable", "pDroppableDisabled", "dropEffect"], outputs: ["onDragEnter", "onDragLeave", "onDrop"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i2$1.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "showTransitionOptions", "hideTransitionOptions", "inline", "format", "tabindex", "inputId", "autoZIndex", "autofocus", "defaultColor", "appendTo", "overlayOptions", "motionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i2$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: DashboardComponent, selector: "wuic-dashboard", inputs: ["dashboardElements"] }, { kind: "component", type: FieldEditorComponent, selector: "wuic-field-editor", inputs: ["datasource", "record", "field", "metaInfo", "readOnly", "isFilter", "hideLabel", "forceShowLabel", "operator", "nestedIndex", "triggerProp", "tabIndex", "onInlineCellValueChange"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i14.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: MetadataEditorComponent, selector: "wuic-metadata-editor", inputs: ["datasource", "hardcodedDatasource", "saveCallback", "hideReports", "hideRelatedTableActions", "hideRelatedColumnActions"] }, { kind: "ngmodule", type: MenubarModule }, { kind: "component", type: ArchetypeConfiguratorComponent, selector: "wuic-archetype-configurator", inputs: ["visible", "archetype", "metaInfo", "value"], outputs: ["visibleChange", "applyConfig"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i17.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: CssSheetEditorComponent, selector: "wuic-css-sheet-editor", inputs: ["visible", "sheets", "selectedSheetPath", "styleProps", "assetsFolder"], outputs: ["visibleChange", "applyEditor"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i9$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i4$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DesignerComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: DataProviderService }, { token: MetadataProviderService }, { token: UserInfoService }, { token: i0.ChangeDetectorRef }, { token: TranslationManagerService }, { token: MetadataEditorService }, { token: ChatbotHostRegistryService }, { token: WorkflowRuntimeMetadataService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DesignerComponent, isStandalone: true, selector: "wuic-designer", host: { listeners: { "window:hashchange": "onWindowHashChange()", "window:beforeunload": "onWindowBeforeUnload($event)", "window:keydown": "onWindowKeydown($event)", "window:mouseup": "onWindowMouseup()", "window:touchend": "onWindowTouchend()", "window:keyup": "onWindowKeyup()", "window:change": "onWindowChange()" } }, providers: [TreeDragDropService], ngImport: i0, template: "<!-- <button pButton type=\"button\" (click)=\"loadDashboard()\" class=\"mr-2\">{{'load' | translate}}</button> -->\n@if (!noEdit) {\n<div class=\"designer-layout\">\n  <div class=\"designer-toolbar\">\n    <div class=\"designer-current-dashboard\">{{ currentDashboardTitle }}</div>\n\n    <div class=\"designer-toolbar-spacer\"></div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"undo()\" [disabled]=\"!canUndo\">{{ 'designer.undo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"redo()\" [disabled]=\"!canRedo\">{{ 'designer.redo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"refreshGraphActionsMenuItems(); graphActionsMenu.toggle($event)\">{{ 'designer.actions_menu' | translate }}</button>\n      <p-menu #graphActionsMenu [popup]=\"true\" [model]=\"graphActionsMenuItems\" appendTo=\"body\"></p-menu>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"openCurrentDashboardInNewTab()\" [disabled]=\"!currentDashboardRoute\">{{\n        'designer.open_current_dashboard' | translate }}</button>\n    </div>\n  </div>\n  <div class=\"designer-main\">\n    <p-splitter [style]=\"{ height: '100%' }\" [panelSizes]=\"[15, 85]\" styleClass=\"designer-main-splitter\">\n      <ng-template pTemplate>\n        <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[35, 65]\"\n          [minSizes]=\"[20, 30]\" styleClass=\"designer-left-splitter\">\n          <ng-template pTemplate>\n            <div class=\"col flex designer-toolbox palette-panel\">\n              <ul class=\"tool-groups\">\n                @for (toolGroup of availableToolGroups; track toolGroup.group) {\n                <li class=\"tool-group-item\">\n                  <div class=\"tool-group-title\">{{ toolGroup.group }}</div>\n                  <ul class=\"tool-group-list\">\n                    @for (tool of toolGroup.tools; track tool) {\n                    <li pDraggable (onDragStart)=\"dragStart(tool)\" (onDragEnd)=\"dragEnd()\" (onDrag)=\"onDrag($event)\"\n                      (dblclick)=\"dropToolAtRoot(tool)\">\n                      <i [ngClass]=\"tool.icon\" [title]=\"tool.name\"></i>\n                    </li>\n                    }\n                  </ul>\n                </li>\n                }\n              </ul>\n            </div>\n          </ng-template>\n          <ng-template pTemplate>\n            <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[68, 32]\"\n              [minSizes]=\"[35, 20]\" styleClass=\"designer-left-bottom-splitter\">\n              <ng-template pTemplate>\n                <div class=\"properties-panel\">\n                  <p-select [style]=\"{width: '100%'}\" [options]=\"flattenedDashboardElements\" [(ngModel)]=\"tool\"\n                    optionLabel=\"uniqueName\" dataKey=\"componentId\" appendTo=\"body\" />\n                  <div class=\"designer-toolbox\">\n\n                    <span style=\"width: 100%;\">\n                      <input type=\"text\" style=\"width: calc(100% - 30px);\" [(ngModel)]=\"propFilter\"\n                        [placeholder]=\"'prop.filter' | translate\" />\n                      <button style=\"width: 25px\" (click)=\"clearPropFilter()\">X</button>\n                    </span>\n\n                    @for (section of getToolPropertySections(tool, propFilter); track section.key) {\n                    <details class=\"prop-section\" [open]=\"section.open\"\n                      (toggle)=\"onPropertySectionToggle(tool, section.key, $event)\">\n                      <summary class=\"prop-section-title\">{{ section.label }}</summary>\n                      <ul class=\"props\">\n                        @for (toolProp of section.props; track toolProp.key) {\n                        <li>\n                          @if (!toolProp.value.hideCaption) {\n                          <span>{{ toolProp.value?.propertyCaption ||\n                            toolProp.key[0].toUpperCase() + toolProp.key.slice(1)\n                            }}</span>\n                          }\n                          <br />\n                          @if (toolProp.value.type == 'button') {\n                          <p-button (click)=\"toolProp.value.callback(tool.inputs, toolProp.key, null, tool)\"\n                            class=\"k-button\" [style]=\"{width: '100%'}\">\n                            {{toolProp.value.propertyCaption}}\n                          </p-button>\n                          }\n                          @if (toolProp.value.type == 'metaEditor' &&\n                          tool.inputs['componentRef']?.value?.component) {\n                          <wuic-metadata-editor [hardcodedDatasource]=\"tool.inputs['componentRef']?.value?.component\"\n                            [saveCallback]=\"metaEditorSave\"></wuic-metadata-editor>\n                          }\n                          @if (toolProp.value.type == 'boolean') {\n                          <input type=\"checkbox\" [(ngModel)]=\"tool.inputs[toolProp.key]\" />\n                          }\n                          @if (toolProp.value.type == 'numberToArray') {\n                          <input style=\"width: 100%;\" type=\"number\" pInputText [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'txt_area') {\n                          <textarea style=\"width: 100%;\" [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\"></textarea>\n                          }\n                          @if (toolProp.value.type == 'string') {\n                          <input style=\"width: 100%;\" type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'color') {\n                          <p-colorPicker [ngModel]=\"getDesignerColorPickerHex(tool, toolProp)\"\n                            (ngModelChange)=\"onDesignerColorPickerHexChange($event, tool, toolProp)\" appendTo=\"body\" />\n                          <div class=\"designer-color-alpha-row\">\n                            <span class=\"designer-color-alpha-label\">{{ 'designer.alpha' | translate }}</span>\n                            <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                            <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                          </div>\n                          <input type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'dictionary' && !toolProp.value.async) {\n                          @if (toolProp.key == 'cssFile') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"availableProjectCssFiles\"\n                            [ngModel]=\"tool.inputs[toolProp.key]\" (ngModelChange)=\"onCssFileChanged($event, tool)\" />\n                          } @else if (toolProp.key == 'cssClass') {\n                          <p-multiSelect [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getCssClassOptionsForTool(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"onCssClassChanged($event, tool)\" [filter]=\"true\" [virtualScroll]=\"true\"\n                            [virtualScrollItemSize]=\"38\" scrollHeight=\"260px\" [showToggleAll]=\"false\" display=\"chip\"\n                            [maxSelectedLabels]=\"3\" [selectedItemsLabel]=\"'{0} selected'\">\n                          </p-multiSelect>\n                          } @else if ((tool.name == 'SELECT' || tool.name == 'MULTISELECT' || tool.name == 'UL') &&\n                          (toolProp.key == 'valueField' || toolProp.key == 'textField')) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else if (tool.name == 'LABEL' && toolProp.key == 'displayField') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          }\n                          @if (toolProp.value.type == 'dictionary' && toolProp.value.async) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (tool.name == 'DATAREPEATER' && toolProp.key == 'action' &&\n                          canOpenArchetypeConfigurator(tool)) {\n                          <button style=\"margin-top: 8px;\" (click)=\"openArchetypeConfigurator(tool)\">\n                            {{ 'designer.configure' | translate }} {{ (tool.inputs['action'] | async) || '' }}\n                          </button>\n                          }\n                          @if (toolProp.value.type == 'dropped-component-list') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [placeholder]=\"'select.component' | translate\" [options]=\"elementFilter(toolProp)\"\n                            [ngModel]=\"getDroppedComponentListModel(tool, toolProp)\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" optionLabel=\"uniqueName\"\n                            dataKey=\"uniqueName\" />\n                          }\n                          @if (toolProp.value.type == 'autocomplete') {\n                          <p-autoComplete [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\" [forceSelection]=\"true\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" [suggestions]=\"tool.suggestions\"\n                            [optionLabel]=\"toolProp.value.displayField\" [optionValue]=\"toolProp.value.valueField\"\n                            (completeMethod)=\"search($event, tool, toolProp)\" [dropdown]=\"true\" dropdownMode=\"current\"\n                            [multiple]=\"toolProp.value.multiple\" />\n                          }\n                          @if (toolProp.value.type == 'propertyTree' && shouldShowPropertyTree(tool)) {\n                          <ul>\n                            @for (item of $any(tool.inputs[toolProp.key] | async); track item) {\n                            <li style=\"padding: 0; margin: 0;\">\n                              @if (item.col && tool.inputs['customProps_' + (tool.inputs['action'] | async)])\n                              {\n                              <wuic-field-editor [field]=\"item.col\"\n                                [record]=\"tool.inputs['customProps_' + (tool.inputs['action'] | async)]\"\n                                [metaInfo]=\"tool.inputs['datasource']?.component?.value?.metaInfo\"\n                                [triggerProp]=\"tool.inputs['action']\"></wuic-field-editor>\n                              }\n                            </li>\n                            }\n                          </ul>\n                          }\n                        </li>\n                        }\n                      </ul>\n                    </details>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n              <ng-template pTemplate>\n                <div class=\"hierarchy-panel\">\n                  <div class=\"hierarchy-panel-title\">{{ 'designer.canvas_hierarchy' | translate }}</div>\n                  <div class=\"hierarchy-tree-wrap\">\n                    <p-tree [value]=\"hierarchyTreeNodes\" [draggableNodes]=\"true\" [droppableNodes]=\"true\"\n                      selectionMode=\"single\" [(selection)]=\"hierarchySelection\"\n                      (onNodeSelect)=\"onHierarchyNodeSelect($event)\" draggableScope=\"designer-hierarchy\"\n                      droppableScope=\"designer-hierarchy\" (onNodeDrop)=\"onHierarchyNodeDrop($event)\">\n                      <ng-template let-node pTemplate=\"default\">\n                        <span class=\"hierarchy-node-label\" [class.active]=\"isHierarchyNodeSelected(node)\"\n                          (mouseenter)=\"onHierarchyNodeMouseEnter(node)\" (mouseleave)=\"onHierarchyNodeMouseLeave()\"\n                          (contextmenu)=\"showHierarchyNodeContextMenu($event, node, hierarchyCtxMenu)\">\n                          {{ node.label }}\n                        </span>\n                      </ng-template>\n                    </p-tree>\n                  </div>\n                  <p-contextMenu #hierarchyCtxMenu [model]=\"hierarchyCtxItems\" appendTo=\"body\" />\n                </div>\n              </ng-template>\n            </p-splitter>\n          </ng-template>\n        </p-splitter>\n      </ng-template>\n      <ng-template pTemplate>\n        <div class=\"col dashboard-design\" [class.designer-hide-datasources]=\"hideDatasourcesInCanvas\" pDroppable\n          (onDrop)=\"drop($event)\" #canvas (contextmenu)=\"showCtx($event, this)\">\n          <wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n          <p-contextMenu [target]=\"canvas\" [model]=\"ctxItems | async\" appendTo=\"body\" />\n        </div>\n      </ng-template>\n    </p-splitter>\n  </div>\n  <div class=\"designer-footer\">\n    <div class=\"designer-footer-label\">{{ 'designer.items' | translate }}:</div>\n    <div class=\"designer-footer-list\">\n      @for (item of droppedDashboardItems; track item.uniqueName) {\n      <button type=\"button\" class=\"designer-footer-item\" [class.active]=\"tool?.uniqueName === item?.uniqueName\"\n        [attr.data-designer-unique-name]=\"item?.uniqueName\" (mouseenter)=\"setFooterHoverHighlight(item)\"\n        (mouseleave)=\"clearFooterHoverHighlight()\" (click)=\"selectDashboardItem(item)\"\n        (contextmenu)=\"showFooterContextMenu($event, item, footerCtxMenu)\">\n        {{ getDroppedDashboardItemLabel(item) }}\n      </button>\n      }\n    </div>\n    <p-contextMenu #footerCtxMenu [model]=\"footerCtxItems\" appendTo=\"body\" />\n  </div>\n</div>\n}\n\n@if (noEdit) {\n<wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n}\n\n<wuic-archetype-configurator [visible]=\"showArchetypeConfigurator\"\n  (visibleChange)=\"onArchetypeConfigVisibleChange($event)\" [archetype]=\"getActiveArchetypeConfig()\"\n  [metaInfo]=\"getArchetypeConfigMetaInfoForTool(archetypeConfigTool)\"\n  [value]=\"getArchetypeConfigValueForTool(archetypeConfigTool)\" (applyConfig)=\"onArchetypeConfigApply($event)\">\n</wuic-archetype-configurator>\n\n<wuic-css-sheet-editor [visible]=\"showCssSheetEditor\" (visibleChange)=\"onCssSheetEditorVisibleChange($event)\"\n  [sheets]=\"dashboardCssSheets\" [selectedSheetPath]=\"selectedCssEditorSheetPath\" [assetsFolder]=\"currentDashboardRoute\"\n  [styleProps]=\"getCssEditorStyleProps()\" (applyEditor)=\"onCssSheetEditorApply($event)\">\n</wuic-css-sheet-editor>\n\n<p-dialog [header]=\"'designer.reopen_dashboard' | translate\" [(visible)]=\"reopenDashboardDialogVisible\" [modal]=\"true\"\n  [closable]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [appendTo]=\"'body'\" [style]=\"{ width: '34rem' }\"\n  (onHide)=\"cancelReopenDashboardDialog()\">\n  <div class=\"route-popup-form\">\n    <label for=\"designer-reopen-select\">{{ 'designer.existing_dashboards' | translate }}</label>\n    <p-select inputId=\"designer-reopen-select\" [options]=\"savedDashboardOptions\" optionLabel=\"label\" optionValue=\"value\"\n      [(ngModel)]=\"reopenDialogSelectedDashboardRoute\" [filter]=\"true\" [showClear]=\"true\" [style]=\"{ width: '100%' }\"\n      appendTo=\"body\" />\n\n    <div class=\"route-popup-actions\">\n      <button type=\"button\" class=\"route-popup-btn\" (click)=\"cancelReopenDashboardDialog()\">{{ 'cancel' | translate\n        }}</button>\n      <button type=\"button\" class=\"route-popup-btn route-popup-btn-primary\" (click)=\"confirmReopenDashboardDialog()\"\n        [disabled]=\"!reopenDialogSelectedDashboardRoute\">{{ 'designer.reopen' | translate }}</button>\n    </div>\n  </div>\n</p-dialog>", styles: [":host{display:block;width:100%;height:100%;min-width:0}.designer-layout{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;width:100%;min-width:0}.designer-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px solid inherit;border-radius:10px;background:transparent;padding:10px 12px;margin-bottom:8px}.designer-current-dashboard{min-width:220px;font-size:.86rem;font-weight:700;color:inherit}.designer-toolbar-spacer{flex:1 1 auto;min-width:16px}.designer-toolbar-menu-group{display:inline-flex}.designer-toolbar-menu-group button{height:32px;border:1px solid #2f67d8;border-radius:6px;background:#2f67d8;color:#fff;padding:0 10px;font-size:.82rem;cursor:pointer}.designer-toolbar-menu-group button[disabled]{opacity:.6;cursor:not-allowed}.designer-main{min-height:0;min-width:0;width:100%;overflow:hidden;direction:ltr}.designer-main-splitter{height:100%;width:100%;min-width:0;direction:ltr}.designer-toolbox{font-size:3rem}.designer-toolbox ul{list-style-type:none;padding:0;margin:0;width:100%}.designer-toolbox li{float:left;margin-left:5px;margin-top:5px}.designer-toolbox .tool-groups{display:block}.designer-toolbox .tool-group-item{float:none;margin-left:0;margin-top:10px;clear:both}.designer-toolbox .tool-group-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin:0 0 4px 6px}.designer-toolbox .tool-group-list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px}.designer-toolbox .tool-group-list li{float:none;margin-left:0;margin-top:0}.designer-toolbox .props{font-size:1rem}.designer-toolbox .props li{float:none;padding-bottom:15px}.designer-toolbox .prop-section{width:100%;border:1px solid inherit;border-radius:6px;margin-top:8px;background:transparent;padding:6px 8px 2px}.designer-toolbox .prop-section-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;color:inherit;margin-bottom:6px}.palette-panel{height:100%;overflow:auto;width:100%}.designer-color-alpha-row{display:flex;align-items:center;gap:8px;margin-top:6px;margin-bottom:6px}.designer-color-alpha-label{font-size:.8rem;min-width:40px}.designer-color-alpha-row input[type=range]{flex:1 1 auto;min-width:90px}.designer-color-alpha-row input[type=number]{width:72px}.properties-panel{height:100%;overflow:hidden;width:100%;display:flex;flex-direction:column;min-height:0;padding-right:10px;padding-left:10px;padding-top:10px}.properties-panel>.designer-toolbox{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}:host ::ng-deep .designer-left-bottom-splitter .p-splitterpanel{min-height:0!important;overflow:hidden!important}.hierarchy-panel{height:100%;width:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:6px}.hierarchy-panel-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#4b5563;margin:0 0 6px}.hierarchy-tree-wrap{flex:1 1 auto;min-height:0;border:1px solid inherit;border-radius:6px;background:transparent;overflow:auto;padding:4px}:host ::ng-deep .hierarchy-tree-wrap .p-tree{border:none;padding:0;height:100%;background:transparent}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content{border:1px solid transparent;border-radius:4px;background:transparent!important;color:inherit!important;padding:0!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight{border-color:transparent!important;background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content:hover{background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label{display:inline-block;border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label:hover{border-color:#94a3b8}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label.active{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight .hierarchy-node-label{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}.designer-hierarchy-node{cursor:pointer;border:1px solid transparent;border-radius:4px;padding:2px 6px;font-size:.82rem;line-height:1.25rem}.designer-hierarchy-node-label{cursor:pointer;display:inline-block;width:100%}.designer-hierarchy-node.active{border-color:#3b82f6;background:#eff6ff;color:#1d4ed8}.designer-footer-item.designer-tree-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px}.dashboard-design{height:100%;min-height:0;min-width:0;width:100%;overflow:auto;direction:ltr}:host ::ng-deep .dashboard-design.designer-hide-datasources .datasource-descriptor{display:none!important}.current-dashboard-title{font-weight:600;margin-right:12px}.designer-footer{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid inherit;background:transparent;min-height:36px;flex:0 0 auto;width:100%;overflow:auto}.designer-footer-label{font-size:.85rem;font-weight:600;color:inherit;white-space:nowrap}.designer-footer-list{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%}.designer-footer-item{border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer;white-space:nowrap}.designer-footer-item.active{border-color:#3b82f6;background:transparent;color:#1d4ed8}:host ::ng-deep .designer-footer-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px;box-shadow:inset 0 0 0 1px #3b82f6!important}.route-popup-form{display:flex;flex-direction:column;gap:8px}.route-popup-form label{font-size:.85rem;font-weight:600;color:#2f3f58}.route-popup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.route-popup-btn{border:1px solid inherit;background:transparent;color:inherit;border-radius:6px;padding:7px 12px;font-size:.85rem;cursor:pointer}.route-popup-btn-primary{border-color:#2f67d8;background:#2f67d8;color:#fff}.p-colorpicker{border:1px solid black;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i10.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i12.Draggable, selector: "[pDraggable]", inputs: ["pDraggable", "dragEffect", "dragHandle", "pDraggableDisabled"], outputs: ["onDragStart", "onDragEnd", "onDrag"] }, { kind: "directive", type: i12.Droppable, selector: "[pDroppable]", inputs: ["pDroppable", "pDroppableDisabled", "dropEffect"], outputs: ["onDragEnter", "onDragLeave", "onDrop"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ColorPickerModule }, { kind: "component", type: i2$1.ColorPicker, selector: "p-colorPicker, p-colorpicker, p-color-picker", inputs: ["styleClass", "showTransitionOptions", "hideTransitionOptions", "inline", "format", "tabindex", "inputId", "autoZIndex", "autofocus", "defaultColor", "appendTo", "overlayOptions", "motionOptions"], outputs: ["onChange", "onShow", "onHide"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i2$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: DashboardComponent, selector: "wuic-dashboard", inputs: ["dashboardElements"] }, { kind: "component", type: FieldEditorComponent, selector: "wuic-field-editor", inputs: ["datasource", "record", "field", "metaInfo", "readOnly", "isFilter", "hideLabel", "forceShowLabel", "operator", "nestedIndex", "triggerProp", "tabIndex", "onInlineCellValueChange"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i14.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: MetadataEditorComponent, selector: "wuic-metadata-editor", inputs: ["datasource", "hardcodedDatasource", "saveCallback", "hideReports", "hideRelatedTableActions", "hideRelatedColumnActions"] }, { kind: "ngmodule", type: MenubarModule }, { kind: "component", type: ArchetypeConfiguratorComponent, selector: "wuic-archetype-configurator", inputs: ["visible", "archetype", "metaInfo", "value"], outputs: ["visibleChange", "applyConfig"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i18.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: CssSheetEditorComponent, selector: "wuic-css-sheet-editor", inputs: ["visible", "sheets", "selectedSheetPath", "styleProps", "assetsFolder"], outputs: ["visibleChange", "applyEditor"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i9.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i4$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DesignerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wuic-designer', imports: [NgClass, TranslateModule, AsyncPipe, FormsModule, SplitterModule, DragDropModule, SelectModule, ColorPickerModule, AutoCompleteModule, DashboardComponent, FieldEditorComponent, ContextMenuModule, MetadataEditorComponent, MenubarModule, ArchetypeConfiguratorComponent, ButtonModule, MultiSelectModule, CssSheetEditorComponent, MenuModule, DialogModule, TreeModule], providers: [TreeDragDropService], template: "<!-- <button pButton type=\"button\" (click)=\"loadDashboard()\" class=\"mr-2\">{{'load' | translate}}</button> -->\n@if (!noEdit) {\n<div class=\"designer-layout\">\n  <div class=\"designer-toolbar\">\n    <div class=\"designer-current-dashboard\">{{ currentDashboardTitle }}</div>\n\n    <div class=\"designer-toolbar-spacer\"></div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"undo()\" [disabled]=\"!canUndo\">{{ 'designer.undo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"redo()\" [disabled]=\"!canRedo\">{{ 'designer.redo' | translate }}</button>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"refreshGraphActionsMenuItems(); graphActionsMenu.toggle($event)\">{{ 'designer.actions_menu' | translate }}</button>\n      <p-menu #graphActionsMenu [popup]=\"true\" [model]=\"graphActionsMenuItems\" appendTo=\"body\"></p-menu>\n    </div>\n\n    <div class=\"designer-toolbar-menu-group\">\n      <button type=\"button\" (click)=\"openCurrentDashboardInNewTab()\" [disabled]=\"!currentDashboardRoute\">{{\n        'designer.open_current_dashboard' | translate }}</button>\n    </div>\n  </div>\n  <div class=\"designer-main\">\n    <p-splitter [style]=\"{ height: '100%' }\" [panelSizes]=\"[15, 85]\" styleClass=\"designer-main-splitter\">\n      <ng-template pTemplate>\n        <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[35, 65]\"\n          [minSizes]=\"[20, 30]\" styleClass=\"designer-left-splitter\">\n          <ng-template pTemplate>\n            <div class=\"col flex designer-toolbox palette-panel\">\n              <ul class=\"tool-groups\">\n                @for (toolGroup of availableToolGroups; track toolGroup.group) {\n                <li class=\"tool-group-item\">\n                  <div class=\"tool-group-title\">{{ toolGroup.group }}</div>\n                  <ul class=\"tool-group-list\">\n                    @for (tool of toolGroup.tools; track tool) {\n                    <li pDraggable (onDragStart)=\"dragStart(tool)\" (onDragEnd)=\"dragEnd()\" (onDrag)=\"onDrag($event)\"\n                      (dblclick)=\"dropToolAtRoot(tool)\">\n                      <i [ngClass]=\"tool.icon\" [title]=\"tool.name\"></i>\n                    </li>\n                    }\n                  </ul>\n                </li>\n                }\n              </ul>\n            </div>\n          </ng-template>\n          <ng-template pTemplate>\n            <p-splitter layout=\"vertical\" [style]=\"{ height: '100%', width: '100%' }\" [panelSizes]=\"[68, 32]\"\n              [minSizes]=\"[35, 20]\" styleClass=\"designer-left-bottom-splitter\">\n              <ng-template pTemplate>\n                <div class=\"properties-panel\">\n                  <p-select [style]=\"{width: '100%'}\" [options]=\"flattenedDashboardElements\" [(ngModel)]=\"tool\"\n                    optionLabel=\"uniqueName\" dataKey=\"componentId\" appendTo=\"body\" />\n                  <div class=\"designer-toolbox\">\n\n                    <span style=\"width: 100%;\">\n                      <input type=\"text\" style=\"width: calc(100% - 30px);\" [(ngModel)]=\"propFilter\"\n                        [placeholder]=\"'prop.filter' | translate\" />\n                      <button style=\"width: 25px\" (click)=\"clearPropFilter()\">X</button>\n                    </span>\n\n                    @for (section of getToolPropertySections(tool, propFilter); track section.key) {\n                    <details class=\"prop-section\" [open]=\"section.open\"\n                      (toggle)=\"onPropertySectionToggle(tool, section.key, $event)\">\n                      <summary class=\"prop-section-title\">{{ section.label }}</summary>\n                      <ul class=\"props\">\n                        @for (toolProp of section.props; track toolProp.key) {\n                        <li>\n                          @if (!toolProp.value.hideCaption) {\n                          <span>{{ toolProp.value?.propertyCaption ||\n                            toolProp.key[0].toUpperCase() + toolProp.key.slice(1)\n                            }}</span>\n                          }\n                          <br />\n                          @if (toolProp.value.type == 'button') {\n                          <p-button (click)=\"toolProp.value.callback(tool.inputs, toolProp.key, null, tool)\"\n                            class=\"k-button\" [style]=\"{width: '100%'}\">\n                            {{toolProp.value.propertyCaption}}\n                          </p-button>\n                          }\n                          @if (toolProp.value.type == 'metaEditor' &&\n                          tool.inputs['componentRef']?.value?.component) {\n                          <wuic-metadata-editor [hardcodedDatasource]=\"tool.inputs['componentRef']?.value?.component\"\n                            [saveCallback]=\"metaEditorSave\"></wuic-metadata-editor>\n                          }\n                          @if (toolProp.value.type == 'boolean') {\n                          <input type=\"checkbox\" [(ngModel)]=\"tool.inputs[toolProp.key]\" />\n                          }\n                          @if (toolProp.value.type == 'numberToArray') {\n                          <input style=\"width: 100%;\" type=\"number\" pInputText [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'txt_area') {\n                          <textarea style=\"width: 100%;\" [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            [ngModelOptions]=\"{ updateOn: 'blur' }\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\"></textarea>\n                          }\n                          @if (toolProp.value.type == 'string') {\n                          <input style=\"width: 100%;\" type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'color') {\n                          <p-colorPicker [ngModel]=\"getDesignerColorPickerHex(tool, toolProp)\"\n                            (ngModelChange)=\"onDesignerColorPickerHexChange($event, tool, toolProp)\" appendTo=\"body\" />\n                          <div class=\"designer-color-alpha-row\">\n                            <span class=\"designer-color-alpha-label\">{{ 'designer.alpha' | translate }}</span>\n                            <input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                            <input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\"\n                              [ngModel]=\"getDesignerColorAlpha(tool, toolProp)\"\n                              (ngModelChange)=\"onDesignerColorAlphaChange($event, tool, toolProp)\" />\n                          </div>\n                          <input type=\"text\" pInputText [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (toolProp.value.type == 'dictionary' && !toolProp.value.async) {\n                          @if (toolProp.key == 'cssFile') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"availableProjectCssFiles\"\n                            [ngModel]=\"tool.inputs[toolProp.key]\" (ngModelChange)=\"onCssFileChanged($event, tool)\" />\n                          } @else if (toolProp.key == 'cssClass') {\n                          <p-multiSelect [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getCssClassOptionsForTool(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"onCssClassChanged($event, tool)\" [filter]=\"true\" [virtualScroll]=\"true\"\n                            [virtualScrollItemSize]=\"38\" scrollHeight=\"260px\" [showToggleAll]=\"false\" display=\"chip\"\n                            [maxSelectedLabels]=\"3\" [selectedItemsLabel]=\"'{0} selected'\">\n                          </p-multiSelect>\n                          } @else if ((tool.name == 'SELECT' || tool.name == 'MULTISELECT' || tool.name == 'UL') &&\n                          (toolProp.key == 'valueField' || toolProp.key == 'textField')) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else if (tool.name == 'LABEL' && toolProp.key == 'displayField') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [options]=\"getDatasourceColumnOptions(tool)\" [ngModel]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          } @else {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [(ngModel)]=\"tool.inputs[toolProp.key]\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          }\n                          @if (toolProp.value.type == 'dictionary' && toolProp.value.async) {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\" [options]=\"toolProp.value.values\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" />\n                          }\n                          @if (tool.name == 'DATAREPEATER' && toolProp.key == 'action' &&\n                          canOpenArchetypeConfigurator(tool)) {\n                          <button style=\"margin-top: 8px;\" (click)=\"openArchetypeConfigurator(tool)\">\n                            {{ 'designer.configure' | translate }} {{ (tool.inputs['action'] | async) || '' }}\n                          </button>\n                          }\n                          @if (toolProp.value.type == 'dropped-component-list') {\n                          <p-select [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [placeholder]=\"'select.component' | translate\" [options]=\"elementFilter(toolProp)\"\n                            [ngModel]=\"getDroppedComponentListModel(tool, toolProp)\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" optionLabel=\"uniqueName\"\n                            dataKey=\"uniqueName\" />\n                          }\n                          @if (toolProp.value.type == 'autocomplete') {\n                          <p-autoComplete [style]=\"{width: '100%'}\" appendTo=\"body\"\n                            [ngModel]=\"tool.inputs[toolProp.key] | async\" [forceSelection]=\"true\"\n                            (ngModelChange)=\"setValue($event, tool, toolProp)\" [suggestions]=\"tool.suggestions\"\n                            [optionLabel]=\"toolProp.value.displayField\" [optionValue]=\"toolProp.value.valueField\"\n                            (completeMethod)=\"search($event, tool, toolProp)\" [dropdown]=\"true\" dropdownMode=\"current\"\n                            [multiple]=\"toolProp.value.multiple\" />\n                          }\n                          @if (toolProp.value.type == 'propertyTree' && shouldShowPropertyTree(tool)) {\n                          <ul>\n                            @for (item of $any(tool.inputs[toolProp.key] | async); track item) {\n                            <li style=\"padding: 0; margin: 0;\">\n                              @if (item.col && tool.inputs['customProps_' + (tool.inputs['action'] | async)])\n                              {\n                              <wuic-field-editor [field]=\"item.col\"\n                                [record]=\"tool.inputs['customProps_' + (tool.inputs['action'] | async)]\"\n                                [metaInfo]=\"tool.inputs['datasource']?.component?.value?.metaInfo\"\n                                [triggerProp]=\"tool.inputs['action']\"></wuic-field-editor>\n                              }\n                            </li>\n                            }\n                          </ul>\n                          }\n                        </li>\n                        }\n                      </ul>\n                    </details>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n              <ng-template pTemplate>\n                <div class=\"hierarchy-panel\">\n                  <div class=\"hierarchy-panel-title\">{{ 'designer.canvas_hierarchy' | translate }}</div>\n                  <div class=\"hierarchy-tree-wrap\">\n                    <p-tree [value]=\"hierarchyTreeNodes\" [draggableNodes]=\"true\" [droppableNodes]=\"true\"\n                      selectionMode=\"single\" [(selection)]=\"hierarchySelection\"\n                      (onNodeSelect)=\"onHierarchyNodeSelect($event)\" draggableScope=\"designer-hierarchy\"\n                      droppableScope=\"designer-hierarchy\" (onNodeDrop)=\"onHierarchyNodeDrop($event)\">\n                      <ng-template let-node pTemplate=\"default\">\n                        <span class=\"hierarchy-node-label\" [class.active]=\"isHierarchyNodeSelected(node)\"\n                          (mouseenter)=\"onHierarchyNodeMouseEnter(node)\" (mouseleave)=\"onHierarchyNodeMouseLeave()\"\n                          (contextmenu)=\"showHierarchyNodeContextMenu($event, node, hierarchyCtxMenu)\">\n                          {{ node.label }}\n                        </span>\n                      </ng-template>\n                    </p-tree>\n                  </div>\n                  <p-contextMenu #hierarchyCtxMenu [model]=\"hierarchyCtxItems\" appendTo=\"body\" />\n                </div>\n              </ng-template>\n            </p-splitter>\n          </ng-template>\n        </p-splitter>\n      </ng-template>\n      <ng-template pTemplate>\n        <div class=\"col dashboard-design\" [class.designer-hide-datasources]=\"hideDatasourcesInCanvas\" pDroppable\n          (onDrop)=\"drop($event)\" #canvas (contextmenu)=\"showCtx($event, this)\">\n          <wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n          <p-contextMenu [target]=\"canvas\" [model]=\"ctxItems | async\" appendTo=\"body\" />\n        </div>\n      </ng-template>\n    </p-splitter>\n  </div>\n  <div class=\"designer-footer\">\n    <div class=\"designer-footer-label\">{{ 'designer.items' | translate }}:</div>\n    <div class=\"designer-footer-list\">\n      @for (item of droppedDashboardItems; track item.uniqueName) {\n      <button type=\"button\" class=\"designer-footer-item\" [class.active]=\"tool?.uniqueName === item?.uniqueName\"\n        [attr.data-designer-unique-name]=\"item?.uniqueName\" (mouseenter)=\"setFooterHoverHighlight(item)\"\n        (mouseleave)=\"clearFooterHoverHighlight()\" (click)=\"selectDashboardItem(item)\"\n        (contextmenu)=\"showFooterContextMenu($event, item, footerCtxMenu)\">\n        {{ getDroppedDashboardItemLabel(item) }}\n      </button>\n      }\n    </div>\n    <p-contextMenu #footerCtxMenu [model]=\"footerCtxItems\" appendTo=\"body\" />\n  </div>\n</div>\n}\n\n@if (noEdit) {\n<wuic-dashboard [dashboardElements]=\"dashboardElements\"></wuic-dashboard>\n}\n\n<wuic-archetype-configurator [visible]=\"showArchetypeConfigurator\"\n  (visibleChange)=\"onArchetypeConfigVisibleChange($event)\" [archetype]=\"getActiveArchetypeConfig()\"\n  [metaInfo]=\"getArchetypeConfigMetaInfoForTool(archetypeConfigTool)\"\n  [value]=\"getArchetypeConfigValueForTool(archetypeConfigTool)\" (applyConfig)=\"onArchetypeConfigApply($event)\">\n</wuic-archetype-configurator>\n\n<wuic-css-sheet-editor [visible]=\"showCssSheetEditor\" (visibleChange)=\"onCssSheetEditorVisibleChange($event)\"\n  [sheets]=\"dashboardCssSheets\" [selectedSheetPath]=\"selectedCssEditorSheetPath\" [assetsFolder]=\"currentDashboardRoute\"\n  [styleProps]=\"getCssEditorStyleProps()\" (applyEditor)=\"onCssSheetEditorApply($event)\">\n</wuic-css-sheet-editor>\n\n<p-dialog [header]=\"'designer.reopen_dashboard' | translate\" [(visible)]=\"reopenDashboardDialogVisible\" [modal]=\"true\"\n  [closable]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [appendTo]=\"'body'\" [style]=\"{ width: '34rem' }\"\n  (onHide)=\"cancelReopenDashboardDialog()\">\n  <div class=\"route-popup-form\">\n    <label for=\"designer-reopen-select\">{{ 'designer.existing_dashboards' | translate }}</label>\n    <p-select inputId=\"designer-reopen-select\" [options]=\"savedDashboardOptions\" optionLabel=\"label\" optionValue=\"value\"\n      [(ngModel)]=\"reopenDialogSelectedDashboardRoute\" [filter]=\"true\" [showClear]=\"true\" [style]=\"{ width: '100%' }\"\n      appendTo=\"body\" />\n\n    <div class=\"route-popup-actions\">\n      <button type=\"button\" class=\"route-popup-btn\" (click)=\"cancelReopenDashboardDialog()\">{{ 'cancel' | translate\n        }}</button>\n      <button type=\"button\" class=\"route-popup-btn route-popup-btn-primary\" (click)=\"confirmReopenDashboardDialog()\"\n        [disabled]=\"!reopenDialogSelectedDashboardRoute\">{{ 'designer.reopen' | translate }}</button>\n    </div>\n  </div>\n</p-dialog>", styles: [":host{display:block;width:100%;height:100%;min-width:0}.designer-layout{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;width:100%;min-width:0}.designer-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px solid inherit;border-radius:10px;background:transparent;padding:10px 12px;margin-bottom:8px}.designer-current-dashboard{min-width:220px;font-size:.86rem;font-weight:700;color:inherit}.designer-toolbar-spacer{flex:1 1 auto;min-width:16px}.designer-toolbar-menu-group{display:inline-flex}.designer-toolbar-menu-group button{height:32px;border:1px solid #2f67d8;border-radius:6px;background:#2f67d8;color:#fff;padding:0 10px;font-size:.82rem;cursor:pointer}.designer-toolbar-menu-group button[disabled]{opacity:.6;cursor:not-allowed}.designer-main{min-height:0;min-width:0;width:100%;overflow:hidden;direction:ltr}.designer-main-splitter{height:100%;width:100%;min-width:0;direction:ltr}.designer-toolbox{font-size:3rem}.designer-toolbox ul{list-style-type:none;padding:0;margin:0;width:100%}.designer-toolbox li{float:left;margin-left:5px;margin-top:5px}.designer-toolbox .tool-groups{display:block}.designer-toolbox .tool-group-item{float:none;margin-left:0;margin-top:10px;clear:both}.designer-toolbox .tool-group-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin:0 0 4px 6px}.designer-toolbox .tool-group-list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px}.designer-toolbox .tool-group-list li{float:none;margin-left:0;margin-top:0}.designer-toolbox .props{font-size:1rem}.designer-toolbox .props li{float:none;padding-bottom:15px}.designer-toolbox .prop-section{width:100%;border:1px solid inherit;border-radius:6px;margin-top:8px;background:transparent;padding:6px 8px 2px}.designer-toolbox .prop-section-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;color:inherit;margin-bottom:6px}.palette-panel{height:100%;overflow:auto;width:100%}.designer-color-alpha-row{display:flex;align-items:center;gap:8px;margin-top:6px;margin-bottom:6px}.designer-color-alpha-label{font-size:.8rem;min-width:40px}.designer-color-alpha-row input[type=range]{flex:1 1 auto;min-width:90px}.designer-color-alpha-row input[type=number]{width:72px}.properties-panel{height:100%;overflow:hidden;width:100%;display:flex;flex-direction:column;min-height:0;padding-right:10px;padding-left:10px;padding-top:10px}.properties-panel>.designer-toolbox{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}:host ::ng-deep .designer-left-bottom-splitter .p-splitterpanel{min-height:0!important;overflow:hidden!important}.hierarchy-panel{height:100%;width:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:6px}.hierarchy-panel-title{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#4b5563;margin:0 0 6px}.hierarchy-tree-wrap{flex:1 1 auto;min-height:0;border:1px solid inherit;border-radius:6px;background:transparent;overflow:auto;padding:4px}:host ::ng-deep .hierarchy-tree-wrap .p-tree{border:none;padding:0;height:100%;background:transparent}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content{border:1px solid transparent;border-radius:4px;background:transparent!important;color:inherit!important;padding:0!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight{border-color:transparent!important;background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content:hover{background:transparent!important;color:inherit!important}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label{display:inline-block;border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label:hover{border-color:#94a3b8}:host ::ng-deep .hierarchy-tree-wrap .hierarchy-node-label.active{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}:host ::ng-deep .hierarchy-tree-wrap .p-tree-node-content.p-highlight .hierarchy-node-label{border-color:#3b82f6!important;background:#eff6ff!important;color:#1d4ed8!important}.designer-hierarchy-node{cursor:pointer;border:1px solid transparent;border-radius:4px;padding:2px 6px;font-size:.82rem;line-height:1.25rem}.designer-hierarchy-node-label{cursor:pointer;display:inline-block;width:100%}.designer-hierarchy-node.active{border-color:#3b82f6;background:#eff6ff;color:#1d4ed8}.designer-footer-item.designer-tree-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px}.dashboard-design{height:100%;min-height:0;min-width:0;width:100%;overflow:auto;direction:ltr}:host ::ng-deep .dashboard-design.designer-hide-datasources .datasource-descriptor{display:none!important}.current-dashboard-title{font-weight:600;margin-right:12px}.designer-footer{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid inherit;background:transparent;min-height:36px;flex:0 0 auto;width:100%;overflow:auto}.designer-footer-label{font-size:.85rem;font-weight:600;color:inherit;white-space:nowrap}.designer-footer-list{display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;width:100%}.designer-footer-item{border:1px solid inherit;background:transparent;color:inherit;border-radius:4px;padding:2px 8px;font-size:.8rem;line-height:1.25rem;cursor:pointer;white-space:nowrap}.designer-footer-item.active{border-color:#3b82f6;background:transparent;color:#1d4ed8}:host ::ng-deep .designer-footer-hover-target{border-color:#3b82f6!important;outline:1px solid #3b82f6!important;outline-offset:-1px;box-shadow:inset 0 0 0 1px #3b82f6!important}.route-popup-form{display:flex;flex-direction:column;gap:8px}.route-popup-form label{font-size:.85rem;font-weight:600;color:#2f3f58}.route-popup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.route-popup-btn{border:1px solid inherit;background:transparent;color:inherit;border-radius:6px;padding:7px 12px;font-size:.85rem;cursor:pointer}.route-popup-btn-primary{border-color:#2f67d8;background:#2f67d8;color:#fff}.p-colorpicker{border:1px solid black;border-radius:4px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: DataProviderService }, { type: MetadataProviderService }, { type: UserInfoService }, { type: i0.ChangeDetectorRef }, { type: TranslationManagerService }, { type: MetadataEditorService }, { type: WorkflowRuntimeMetadataService }], propDecorators: { onWindowHashChange: [{
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: DataProviderService }, { type: MetadataProviderService }, { type: UserInfoService }, { type: i0.ChangeDetectorRef }, { type: TranslationManagerService }, { type: MetadataEditorService }, { type: ChatbotHostRegistryService }, { type: WorkflowRuntimeMetadataService }], propDecorators: { onWindowHashChange: [{
                 type: HostListener,
                 args: ['window:hashchange']
             }], onWindowBeforeUnload: [{
@@ -10888,4 +11857,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }] } });
 
 export { DesignerComponent };
-//# sourceMappingURL=wuic-framework-lib-designer.component-pW1YK-oY.mjs.map
+//# sourceMappingURL=wuic-framework-lib-designer.component-N_CfbGnr.mjs.map