@esfaenza/flow-builder 20.3.20 → 20.3.21

package/fesm2022/esfaenza-flow-builder.mjs

@@ -1,6 +1,6 @@
 import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, effect, computed, Injectable, DestroyRef, input, output, viewChild, ChangeDetectionStrategy, Component, untracked, ElementRef, Directive, Injector, afterNextRender } from '@angular/core';
+import { InjectionToken, inject, signal, effect, Injectable, computed, DestroyRef, input, output, viewChild, ChangeDetectionStrategy, Component, untracked, ElementRef, Directive, Injector, afterNextRender } from '@angular/core';
 import { firstValueFrom } from 'rxjs';
 import dagre from 'dagre';
 import * as i1 from '@foblex/flow';
@@ -1987,6 +1987,528 @@ function filterReferences(references, filter) {
     return references.filter((entry) => matchesReferenceFilter(entry, filter));
 }
 
+/**
+ * Copia e incolla di **elementi** — la logica pura, senza Angular e senza storage.
+ *
+ * Il gesto e' quello che ci si aspetta da un editor, ma il contratto lo rende meno banale di
+ * un `JSON.parse(JSON.stringify(...))`, e le tre cose che lo complicano sono tutte della §3.3:
+ *
+ *  1. **lo spazio dei nomi e' unico e case-insensitive.** Un elemento incollato non porta solo
+ *     il proprio nome: porta anche quelli dei suoi step di orchestrazione, dei campi di uno
+ *     screen dinamico e delle sue screen action, che sono nomi come gli altri (§5.2, §5.14).
+ *     Un omonimo e' `NAME_DUPLICATED`, quindi tutto cio' che collide va rinominato **prima**
+ *     di entrare nel documento;
+ *  2. **rinominare non aggiorna i riferimenti** e nessuna primitiva lo fa (§13.8). Se il nome
+ *     cambia all'ingresso, i riferimenti interni al blocco vanno riscritti qui: le condizioni
+ *     che guardano un campo, i target dei connector interni, gli output automatici
+ *     (`Leggi_Ordine.Numero`);
+ *  3. **un elemento non e' autosufficiente.** Referenzia risorse — variabili, formule, choice —
+ *     che nel flow di destinazione possono non esistere. Portarsele dietro e' il senso di
+ *     «copiare senza riconfigurare»; inventarle in silenzio no, ed e' per questo che
+ *     {@link planPaste} produce un **piano** che l'interfaccia mostra prima di applicarlo.
+ *
+ * Cio' che di proposito **non** si copia: le uscite che escono dal blocco. Un connector che
+ * punta a un elemento rimasto nell'altro flow sarebbe `CONNECTOR_TARGET_UNKNOWN`, cioe' un
+ * errore che blocca l'attivazione; quelle **interne** al blocco si conservano e si rimappano,
+ * ed e' cio' che rende utile copiare due elementi insieme invece che uno alla volta.
+ */
+/**
+ * I campi il cui valore e' un riferimento a un node o a una risorsa.
+ *
+ * Elenco unico, condiviso con la rinomina: due elenchi che devono restare uguali diventano due
+ * elenchi diversi al primo campo aggiunto, e il campo dimenticato non da' nessun errore —
+ * lascia un riferimento al nome vecchio che si scopre solo alla validazione (§13.8).
+ */
+const FLOW_REFERENCE_FIELDS = new Set([
+    'targetReference',
+    'elementReference',
+    'assignToReference',
+    'leftValueReference',
+    'collectionReference',
+    'assignNextValueToReference',
+    'outputReference',
+    'inputReference',
+    'assignRecordIdToReference',
+    // Nomi di risorse e di cose dichiarate nel flow, che referenziano per nome **senza** chiamarsi
+    // `...Reference`: sono la meta' dell'elenco che si dimentica. `stageReference` punta a uno
+    // stage; le due `choice...` a una `FlowChoice` o a un `FlowDynamicChoiceSet` (§5.2);
+    // `screenActionName` e `triggerFieldName` a un'action e a un campo **della stessa schermata**,
+    // e sono i due che rendono un trigger `SCREEN_ACTION_UNKNOWN` /
+    // `SCREEN_TRIGGER_FIELD_UNKNOWN` quando il nome cambia sotto di loro.
+    'stageReference',
+    'choiceReferences',
+    'defaultSelectedChoiceReference',
+    'screenActionName',
+    'triggerFieldName',
+]);
+/**
+ * Riscrive ogni occorrenza di un nome nei campi che contengono riferimenti.
+ *
+ * Cammina tutto cio' che gli si passa — un documento intero per la rinomina, il solo frammento
+ * copiato per l'incolla — perche' i riferimenti compaiono in una ventina di posti diversi (§4)
+ * e l'elenco dei posti sarebbe la cosa che si dimentica di aggiornare.
+ */
+function rewriteReferences(root, oldName, newName) {
+    if (!oldName || !newName || oldName === newName) {
+        return;
+    }
+    const rewrite = (value) => {
+        if (value === oldName) {
+            return newName;
+        }
+        // Riferimento navigato: `Vecchio.Campo` → `Nuovo.Campo`.
+        if (value.startsWith(`${oldName}.`)) {
+            return `${newName}${value.slice(oldName.length)}`;
+        }
+        return value;
+    };
+    const walk = (value) => {
+        if (Array.isArray(value)) {
+            value.forEach(walk);
+            return;
+        }
+        if (!value || typeof value !== 'object') {
+            return;
+        }
+        const record = value;
+        for (const [key, child] of Object.entries(record)) {
+            if (!FLOW_REFERENCE_FIELDS.has(key)) {
+                walk(child);
+                continue;
+            }
+            if (typeof child === 'string') {
+                record[key] = rewrite(child);
+            }
+            else if (Array.isArray(child) && child.every((item) => typeof item === 'string')) {
+                // `choiceReferences` e' un array di **nomi**: senza questo ramo il walk ci scendeva
+                // dentro e non trovava nessuna stringa da riscrivere, perche' le stringhe erano gli
+                // elementi e non i valori di una chiave.
+                record[key] = child.map(rewrite);
+            }
+            else {
+                walk(child);
+            }
+        }
+    };
+    walk(root);
+}
+// ---------------------------------------------------------------------------
+// Il formato degli appunti
+// ---------------------------------------------------------------------------
+/**
+ * Marcatore del formato. Sta scritto dentro il payload perche' gli appunti viaggiano anche
+ * fuori dall'editor (storage del browser, incolla di un JSON a mano): leggere qualcosa che non
+ * e' nostro deve fallire con un messaggio, non con un documento rovinato.
+ */
+const FLOW_CLIPBOARD_KIND = 'flow-builder/elements';
+const FLOW_CLIPBOARD_VERSION = 1;
+function isClipboardPayload(value) {
+    const payload = value;
+    return (!!payload &&
+        typeof payload === 'object' &&
+        payload.kind === FLOW_CLIPBOARD_KIND &&
+        Array.isArray(payload.nodes) &&
+        payload.nodes.length > 0);
+}
+// ---------------------------------------------------------------------------
+// I nomi che un blocco si porta dietro
+// ---------------------------------------------------------------------------
+/**
+ * I nomi **dichiarati** dentro un node, oltre al suo: step di orchestrazione, campi di screen
+ * dinamico (contenitori compresi) e screen action. Stanno tutti nello stesso spazio dei nomi
+ * del node (§3.3), quindi collidono come lui e vanno rinominati come lui.
+ *
+ * Si cammina la struttura sapendo **dove** stanno, invece di cercare ogni `name` nell'albero:
+ * `inputParameters[].name` e' il nome di un parametro dell'action, non una risorsa del flow, e
+ * rinominarlo perche' per caso coincide con un campo copiato romperebbe la chiamata.
+ */
+function innerNamesOf(node) {
+    const names = [];
+    const pushFields = (fields) => {
+        for (const field of fields ?? []) {
+            if (typeof field['name'] === 'string' && field['name']) {
+                names.push(field['name']);
+            }
+            pushFields(field['fields']);
+        }
+    };
+    pushFields(node['fields']);
+    for (const action of node['actions'] ?? []) {
+        if (typeof action['name'] === 'string' && action['name']) {
+            names.push(action['name']);
+        }
+    }
+    for (const step of node['stageSteps'] ?? []) {
+        if (typeof step['name'] === 'string' && step['name']) {
+            names.push(step['name']);
+        }
+    }
+    return names;
+}
+/** Riscrive un nome dichiarato **dove e' dichiarato**, con le stesse regole di `innerNamesOf`. */
+function renameInnerName(node, oldName, newName) {
+    const visitFields = (fields) => {
+        for (const field of fields ?? []) {
+            if (field['name'] === oldName) {
+                field['name'] = newName;
+            }
+            visitFields(field['fields']);
+        }
+    };
+    visitFields(node['fields']);
+    for (const action of node['actions'] ?? []) {
+        if (action['name'] === oldName) {
+            action['name'] = newName;
+        }
+    }
+    for (const step of node['stageSteps'] ?? []) {
+        if (step['name'] === oldName) {
+            step['name'] = newName;
+        }
+    }
+}
+/**
+ * Le **radici** dei riferimenti presenti in un frammento: di `Leggi_Ordine.Numero` la radice e'
+ * `Leggi_Ordine`, ed e' quella che deve esistere nella destinazione (§6.4 — l'elenco dei
+ * riferimenti porta le radici, non i percorsi).
+ *
+ * I `targetReference` restano fuori: sono i connector, e quelli li tratta il taglio delle
+ * uscite. Contarli come riferimenti farebbe comparire fra le dipendenze l'elemento a valle,
+ * che e' esattamente cio' che copiare un blocco non si porta dietro.
+ */
+function referencedRootsOf(fragment) {
+    const roots = new Set();
+    const walk = (value) => {
+        if (Array.isArray(value)) {
+            value.forEach(walk);
+            return;
+        }
+        if (!value || typeof value !== 'object') {
+            return;
+        }
+        for (const [key, child] of Object.entries(value)) {
+            if (key === 'targetReference' || !FLOW_REFERENCE_FIELDS.has(key)) {
+                walk(child);
+                continue;
+            }
+            // Una stringa o un array di nomi (`choiceReferences`): di ognuno conta la radice.
+            const values = typeof child === 'string' ? [child] : Array.isArray(child) ? child : [];
+            let matched = false;
+            for (const item of values) {
+                if (typeof item !== 'string') {
+                    continue;
+                }
+                matched = true;
+                const root = item.split('.')[0];
+                if (root) {
+                    roots.add(root);
+                }
+            }
+            if (!matched) {
+                walk(child);
+            }
+        }
+    };
+    walk(fragment);
+    return [...roots];
+}
+// ---------------------------------------------------------------------------
+// Copia
+// ---------------------------------------------------------------------------
+function clone$1(value) {
+    return JSON.parse(JSON.stringify(value));
+}
+/**
+ * Costruisce gli appunti a partire dalla selezione.
+ *
+ * Le uscite si tengono **solo** se restano dentro il blocco; le altre si tolgono del tutto e
+ * non si azzerano: un connector dichiarato senza destinazione e' `CONNECTOR_TARGET_MISSING`,
+ * un avviso che l'utente non ha nessun modo di far sparire se non riaprendo il ramo, mentre un
+ * ramo senza connector e' «il percorso finisce qui», che e' cio' che e' davvero successo (§3.5).
+ */
+function buildClipboardPayload(input) {
+    const selected = new Set(input.names);
+    const picked = input.nodes.filter((reference) => selected.has(reference.name));
+    if (!picked.length) {
+        return null;
+    }
+    /** I node del blocco: e' l'insieme che decide quali **uscite** sopravvivono. */
+    const insideNodes = new Set(picked.map((reference) => reference.name));
+    /**
+     * Tutto cio' che il blocco dichiara, node compresi: e' l'insieme che decide quali
+     * **riferimenti** sono interni. Senza i nomi dichiarati — campi di uno screen dinamico,
+     * screen action, step — una schermata risultava referenziare i propri campi dall'esterno, e
+     * la finestra dell'incolla li elencava come «da sistemare».
+     */
+    const insideNames = new Set([
+        ...insideNodes,
+        ...picked.flatMap((reference) => innerNamesOf(reference.node)),
+    ]);
+    const nodes = picked.map((reference) => {
+        const copy = clone$1(reference.node);
+        for (const outlet of outletsOf(reference.type, copy)) {
+            const connector = outlet.read(copy);
+            const target = connector?.targetReference;
+            if (!connector || !target || !insideNodes.has(target)) {
+                outlet.write(copy, undefined);
+            }
+        }
+        return { collection: reference.collection, node: copy };
+    });
+    // Le risorse referenziate dal blocco: si copiano per intero, perche' e' la meta' del lavoro
+    // che «senza riconfigurare» vuol dire.
+    const roots = referencedRootsOf(nodes.map((entry) => entry.node));
+    const resourceByName = new Map(input.resources.map((reference) => [reference.name.toLowerCase(), reference]));
+    const resources = [];
+    const externalReferences = [];
+    for (const root of roots) {
+        if (insideNames.has(root)) {
+            continue;
+        }
+        const resource = resourceByName.get(root.toLowerCase());
+        if (resource) {
+            resources.push({ collection: resource.collection, resource: clone$1(resource.resource) });
+        }
+        else {
+            externalReferences.push(root);
+        }
+    }
+    return {
+        kind: FLOW_CLIPBOARD_KIND,
+        version: FLOW_CLIPBOARD_VERSION,
+        flowName: input.flowName,
+        processType: input.processType,
+        nodes,
+        resources,
+        externalReferences,
+    };
+}
+/**
+ * Decide **prima** di toccare il documento cosa cambierebbe: quali nomi vanno rinominati, quali
+ * risorse nascono e quali si riusano, cosa resta irrisolto. La finestra dell'incolla mostra
+ * questo, e `applyPaste` lo esegue senza deciderne piu' niente.
+ *
+ * Una risorsa il cui nome esiste già nella destinazione si **riusa**: e' quasi sempre la stessa
+ * variabile di prima (stesso flow, altra versione), e crearne una omonima sarebbe comunque
+ * `NAME_DUPLICATED`. Rinominarla d'ufficio sarebbe peggio: i riferimenti del blocco
+ * continuerebbero a puntare a quella esistente pur avendone appena creata una identica.
+ */
+function planPaste(payload, target) {
+    const used = [...target.usedNames];
+    const taken = new Set(used.map((name) => name.toLowerCase()));
+    const renames = [];
+    const reserve = (name, kind) => {
+        if (!taken.has(name.toLowerCase())) {
+            taken.add(name.toLowerCase());
+            used.push(name);
+            return name;
+        }
+        const fresh = uniqueFlowName(`${name}_copia`, used);
+        taken.add(fresh.toLowerCase());
+        used.push(fresh);
+        renames.push({ kind, from: name, to: fresh });
+        return fresh;
+    };
+    for (const entry of payload.nodes) {
+        const name = entry.node.name ?? '';
+        if (name) {
+            reserve(name, 'node');
+        }
+        for (const inner of innerNamesOf(entry.node)) {
+            reserve(inner, 'inner');
+        }
+    }
+    const resources = [];
+    const resourceNames = new Set();
+    for (const entry of payload.resources) {
+        const name = entry.resource['name'] ?? '';
+        if (!name) {
+            continue;
+        }
+        resourceNames.add(name.toLowerCase());
+        // Il confronto e' con i nomi **della destinazione**, non con quelli appena riservati: una
+        // risorsa che esiste già la si riusa, e riservarla la farebbe rinominare.
+        const exists = target.usedNames.some((existing) => existing.toLowerCase() === name.toLowerCase());
+        resources.push({ collection: entry.collection, name, status: exists ? 'reused' : 'new' });
+    }
+    const known = new Set([
+        ...target.usedNames.map((name) => name.toLowerCase()),
+        ...resourceNames,
+    ]);
+    const unresolved = payload.externalReferences.filter((name) => {
+        // Le globali non sono risorse del flow: il loro catalogo e' del backend, e un `$Flow` che
+        // «non esiste» sarebbe un falso allarme (§4.1).
+        if (name.startsWith('$')) {
+            return false;
+        }
+        return !known.has(name.toLowerCase());
+    });
+    return {
+        nodeCount: payload.nodes.length,
+        renames,
+        resources,
+        unresolved,
+        processTypeMismatch: payload.processType && target.processType && payload.processType !== target.processType
+            ? payload.processType
+            : null,
+    };
+}
+// ---------------------------------------------------------------------------
+// Incolla
+// ---------------------------------------------------------------------------
+/**
+ * Applica gli appunti a un documento di lavoro, seguendo il piano.
+ *
+ * L'ordine conta: **prima** si rinomina dentro il frammento — nomi dichiarati e riferimenti —
+ * e **poi** si innesta. Riscrivere dopo l'innesto significherebbe camminare tutto il documento
+ * per ogni nome, e riscrivere anche i riferimenti degli elementi che c'erano già: un elemento
+ * di destinazione che citava `Priorita` finirebbe a citare `Priorita_copia`.
+ */
+function applyPaste(draft, payload, plan, options) {
+    const offset = options.offset ?? { x: 40, y: 40 };
+    const fragment = clone$1(payload.nodes);
+    for (const rename of plan.renames) {
+        for (const entry of fragment) {
+            if (rename.kind === 'node') {
+                if (entry.node.name === rename.from) {
+                    entry.node.name = rename.to;
+                }
+            }
+            else {
+                renameInnerName(entry.node, rename.from, rename.to);
+            }
+        }
+        // I riferimenti si riscrivono sul **frammento**: i connector interni al blocco, le
+        // condizioni che guardano un campo copiato, gli output automatici (§13.8).
+        rewriteReferences(fragment, rename.from, rename.to);
+    }
+    if (options.createMissingResources) {
+        for (const entry of payload.resources) {
+            const name = entry.resource['name'] ?? '';
+            const planned = plan.resources.find((resource) => resource.name === name);
+            if (!name || planned?.status !== 'new') {
+                continue;
+            }
+            const list = draft[entry.collection] ?? [];
+            list.push(clone$1(entry.resource));
+            draft[entry.collection] = list;
+        }
+    }
+    const created = [];
+    for (const entry of fragment) {
+        entry.node.locationX = (entry.node.locationX ?? 0) + offset.x;
+        entry.node.locationY = (entry.node.locationY ?? 0) + offset.y;
+        const list = draft[entry.collection] ?? [];
+        list.push(entry.node);
+        draft[entry.collection] = list;
+        if (entry.node.name) {
+            created.push(entry.node.name);
+        }
+    }
+    return created;
+}
+/** Il tipo dell'elemento a partire dalla collection: serve solo a raccontare il blocco. */
+function typeOfCollection(collection) {
+    return TYPE_BY_COLLECTION[collection] ?? collection;
+}
+
+/**
+ * Gli appunti: dove il blocco copiato aspetta di essere incollato.
+ *
+ * E' l'**unico** servizio dichiarato `providedIn: 'root'`, e la ragione e' la stessa per cui
+ * tutti gli altri non lo sono: gli store del documento sono provider del componente perche' due
+ * builder devono editare due flow indipendenti — ma copiare da un flow e incollare nell'altro
+ * significa, per definizione, un contenitore condiviso fra le due istanze.
+ *
+ * Il canale e' `localStorage`, non la clipboard di sistema. Leggere la clipboard di sistema
+ * richiede un permesso che il browser chiede all'utente e che in un iframe puo' non arrivare
+ * mai: un incolla che a volte non fa niente e non spiega perche' e' peggio di un incolla che
+ * funziona solo dentro questo browser. Effetto collaterale voluto: gli appunti sopravvivono al
+ * ricaricamento della pagina e valgono fra schede diverse, che e' proprio il caso «copio da un
+ * flow, apro l'altro, incollo».
+ *
+ * Su un ambiente senza `localStorage` (SSR, storage negato) si degrada a una copia in memoria:
+ * copiare e incollare nella stessa pagina continua a funzionare, fra schede no.
+ */
+const STORAGE_KEY = 'fb.clipboard.elements';
+class FlowClipboardService {
+    /** La copia in memoria: fonte di verita' quando lo storage non c'e' o rifiuta. */
+    memory = null;
+    _revision = signal(0, ...(ngDevMode ? [{ debugName: "_revision" }] : []));
+    constructor() {
+        // Una copia fatta in un'altra scheda: l'evento arriva solo alle **altre**, ed e' cio' che
+        // accende il comando «Incolla» senza dover ricaricare.
+        if (typeof window !== 'undefined') {
+            window.addEventListener('storage', (event) => {
+                if (event.key === STORAGE_KEY) {
+                    this._revision.update((value) => value + 1);
+                }
+            });
+        }
+    }
+    storage() {
+        try {
+            return typeof localStorage === 'undefined' ? null : localStorage;
+        }
+        catch {
+            // Storage negato dalle impostazioni del browser: non e' un errore da mostrare.
+            return null;
+        }
+    }
+    write(payload) {
+        this.memory = payload;
+        try {
+            this.storage()?.setItem(STORAGE_KEY, JSON.stringify(payload));
+        }
+        catch {
+            // Quota piena o storage negato: resta la copia in memoria.
+        }
+        this._revision.update((value) => value + 1);
+    }
+    read() {
+        const raw = (() => {
+            try {
+                return this.storage()?.getItem(STORAGE_KEY) ?? null;
+            }
+            catch {
+                return null;
+            }
+        })();
+        if (raw) {
+            try {
+                const parsed = JSON.parse(raw);
+                if (isClipboardPayload(parsed)) {
+                    return parsed;
+                }
+            }
+            catch {
+                // Contenuto non nostro o rovinato: vale come «appunti vuoti».
+            }
+        }
+        return this.memory;
+    }
+    /**
+     * C'e' qualcosa da incollare. E' un signal e non un booleano calcolato al momento perche' il
+     * comando «Incolla» sta in una toolbar `OnPush`: senza un segnale che cambia, il pulsante
+     * resterebbe spento fino al successivo giro di change detection.
+     */
+    hasContent = signal(false, ...(ngDevMode ? [{ debugName: "hasContent" }] : []));
+    /** Da chiamare dove serve il valore aggiornato: rilegge lo storage e aggiorna il signal. */
+    refresh() {
+        const has = !!this.read();
+        this.hasContent.set(has);
+        return has;
+    }
+    /** Cambia a ogni scrittura, anche da un'altra scheda: chi vuole reagire osservi questo. */
+    revision = this._revision.asReadonly();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlowClipboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlowClipboardService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlowClipboardService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 /**
  * Lo store del documento in lavorazione.
  *
@@ -2360,67 +2882,59 @@ class FlowDocumentStore {
     }
     /**
      * Riscrive ogni occorrenza di un nome nei campi che contengono riferimenti.
-     * Cammina l'intero documento: e' l'unico modo per non dimenticare un campo, dato che
-     * i riferimenti compaiono in una ventina di posti diversi (§4).
+     *
+     * L'implementazione sta in `core/flow-clipboard.ts` perche' la usa anche l'incolla, sul solo
+     * frammento invece che sul documento: l'elenco dei campi-riferimento deve essere **uno**.
      */
     static rewriteReferences(draft, oldName, newName) {
-        /** Campi il cui valore e' un riferimento a risorsa o a node. */
-        const referenceFields = new Set([
-            'targetReference',
-            'elementReference',
-            'assignToReference',
-            'leftValueReference',
-            'collectionReference',
-            'assignNextValueToReference',
-            'outputReference',
-            'inputReference',
-            'assignRecordIdToReference',
-        ]);
-        const rewrite = (value) => {
-            if (value === oldName) {
-                return newName;
-            }
-            // Riferimento navigato: `Vecchio.Campo` → `Nuovo.Campo`.
-            if (value.startsWith(`${oldName}.`)) {
-                return `${newName}${value.slice(oldName.length)}`;
-            }
-            return value;
-        };
-        const walk = (value) => {
-            if (Array.isArray(value)) {
-                value.forEach(walk);
-                return;
-            }
-            if (!value || typeof value !== 'object') {
-                return;
-            }
-            const record = value;
-            for (const [key, child] of Object.entries(record)) {
-                if (typeof child === 'string' && referenceFields.has(key)) {
-                    record[key] = rewrite(child);
-                }
-                else {
-                    walk(child);
-                }
-            }
-        };
-        walk(draft);
+        rewriteReferences(draft, oldName, newName);
     }
-    /** Duplica un node con un nome nuovo, senza copiarne le uscite. */
-    duplicateNode(name, newName, offset = { x: 40, y: 40 }) {
-        const reference = this.nodeByName().get(name);
-        if (!reference) {
-            return;
-        }
-        const copy = clone(reference.node);
-        copy.name = newName;
-        copy.locationX = (copy.locationX ?? 0) + offset.x;
-        copy.locationY = (copy.locationY ?? 0) + offset.y;
-        // Le uscite non si copiano: duplicherebbero rami che l'utente non ha disegnato.
-        for (const outlet of outletsOf(reference.type, copy)) {
-            outlet.write(copy, undefined);
+    /**
+     * Duplica uno o piu' node, ritornando i nomi creati.
+     *
+     * E' un copia-e-incolla nello stesso documento, e passa dallo stesso motore: e' cio' che gli
+     * fa rinominare **tutto** cio' che collide — non solo il node, ma anche i suoi step, i campi
+     * di uno screen dinamico e le sue screen action, che stanno nello stesso spazio dei nomi
+     * (§3.3) — e riscrivere i riferimenti interni al blocco di conseguenza. Duplicare uno screen
+     * dinamico copiandolo e basta produceva un `NAME_DUPLICATED` per ogni campo.
+     *
+     * Le uscite **verso l'esterno** non si copiano (duplicherebbero rami che l'utente non ha
+     * disegnato); quelle interne al blocco sì, ed e' cio' che rende utile duplicare due elementi
+     * collegati invece che uno alla volta.
+     */
+    duplicateNodes(names, offset = { x: 40, y: 40 }) {
+        const payload = buildClipboardPayload({
+            nodes: this.nodes(),
+            resources: this.resources(),
+            names,
+            flowName: this._document().fullName,
+            processType: this._document().processType,
+        });
+        if (!payload) {
+            return [];
         }
-        this.addNode(reference.collection, copy);
+        const plan = planPaste(payload, {
+            usedNames: this.usedNames(),
+            processType: this._document().processType,
+        });
+        // Le risorse ci sono già per definizione — si duplica dentro il flow che le contiene — e
+        // il piano infatti le segna tutte `reused`: crearle sarebbe un doppione.
+        return this.pasteClipboard(payload, plan, { createMissingResources: false, offset });
+    }
+    /**
+     * Incolla gli appunti seguendo il piano già mostrato all'utente, in **un solo** passo di
+     * storico: un incolla che si annulla in sette volte — un elemento, una variabile, un altro
+     * elemento — non e' il gesto che l'utente ha compiuto.
+     *
+     * Ritorna i nomi creati, che sono cio' che va selezionato dopo: senza, la selezione resterebbe
+     * sull'elemento da cui si e' copiato e il blocco appena incollato non si saprebbe dov'e'.
+     */
+    pasteClipboard(payload, plan, options) {
+        let created = [];
+        this.update((draft) => {
+            created = applyPaste(draft, payload, plan, options);
+        });
+        return created;
     }
     // -------------------------------------------------------------------------
     // Connector
@@ -3906,6 +4420,13 @@ class FlowCanvasComponent {
     sides = EFConnectableSide;
     /** Il nome dell'elemento selezionato, `$start` per lo Start. */
     selectedName = input(null, ...(ngDevMode ? [{ debugName: "selectedName" }] : []));
+    /**
+     * La selezione **intera**, quando ne fa parte piu' di un elemento: la libreria sa selezionare
+     * a rettangolo e con `Ctrl`+`A`, e i comandi che agiscono su un blocco (copia, duplica,
+     * elimina) devono vederli tutti. `selectedName` resta l'elemento «corrente», quello di cui si
+     * apre il form: un inspector che mostrasse cinque elementi insieme non saprebbe cosa mostrare.
+     */
+    selectedNames = input([], ...(ngDevMode ? [{ debugName: "selectedNames" }] : []));
     /**
      * L'outline del backend, quando disponibile: da' la raggiungibilita' autoritativa (§6.4).
      * Assente → si usa il calcolo locale.
@@ -3917,6 +4438,10 @@ class FlowCanvasComponent {
      * perche' il canvas resti montabile da solo.
      */
     isEditable = input(true, ...(ngDevMode ? [{ debugName: "isEditable" }] : []));
+    /**
+     * La selezione dopo il gesto: vuota se si e' cliccato nel vuoto. Il primo nome e' quello
+     * «corrente» — chi ascolta ne fa la selezione singola.
+     */
     selectionChange = output();
     nodeOpened = output();
     nodeRemoveRequested = output();
@@ -4172,8 +4697,10 @@ class FlowCanvasComponent {
         });
     }
     onSelectionChange(event) {
-        const first = event.nodeIds[0];
-        this.selectionChange.emit(first ? parseCanvasNodeId(first) : null);
+        const names = event.nodeIds
+            .map((id) => parseCanvasNodeId(id))
+            .filter((name) => !!name);
+        this.selectionChange.emit(names);
     }
     /** `Delete` sulla selezione: lo Start non e' cancellabile, e' uno per flow (§3.4). */
     onDeleteSelected(event) {
@@ -4226,14 +4753,24 @@ class FlowCanvasComponent {
         event.stopPropagation();
         this.nodeRemoveRequested.emit(name);
     }
+    /** Come ✎ e ×: `stopPropagation` perche' il clic non valga anche come selezione. */
+    onDuplicateClick(event, name) {
+        event.stopPropagation();
+        this.nodeDuplicateRequested.emit(name);
+    }
     connectorIdOf(node, outletKey) {
         return sourceConnectorId(node.name, outletKey);
     }
     targetIdOf(node) {
         return targetConnectorId(node.name);
     }
+    /**
+     * Selezionato = corrente **oppure** parte del blocco selezionato. Senza il secondo caso, un
+     * rettangolo che prende cinque elementi ne evidenziava uno, e i comandi che agiscono su tutti
+     * e cinque sembravano agire su quello.
+     */
     isSelected(node) {
-        return this.selectedName() === node.name;
+        return this.selectedName() === node.name || this.selectedNames().includes(node.name);
     }
     /** Etichette dei rami dichiarati senza destinazione, per il tooltip del badge. */
     danglingLabels(node) {
@@ -4263,12 +4800,12 @@ class FlowCanvasComponent {
         return 'cat-other';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlowCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: FlowCanvasComponent, isStandalone: true, selector: "fb-flow-canvas", inputs: { selectedName: { classPropertyName: "selectedName", publicName: "selectedName", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", nodeOpened: "nodeOpened", nodeRemoveRequested: "nodeRemoveRequested", nodeDuplicateRequested: "nodeDuplicateRequested", elementDropped: "elementDropped" }, providers: [provideFFlow(withA11y())], viewQueries: [{ propertyName: "canvas", first: true, predicate: FCanvasComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  Gerarchia obbligatoria: f-flow > f-canvas > fNode / f-connection.\r\n  I `@for` sono direttamente dentro <f-canvas>: nessun wrapper, quindi non serve\r\n  `ngProjectAs` (che sarebbe indispensabile con blocchi annidati).\r\n-->\r\n<f-flow\r\n  fDraggable\r\n  (fCreateConnection)=\"onCreateConnection($event)\"\r\n  (fReassignConnection)=\"onReassignConnection($event)\"\r\n  (fMoveNodes)=\"onMoveNodes($event)\"\r\n  (fSelectionChange)=\"onSelectionChange($event)\"\r\n  (fDeleteSelected)=\"onDeleteSelected($event)\"\r\n  (fCreateNode)=\"onCreateNode($event)\"\r\n  (fNodesRendered)=\"onNodesRendered()\"\r\n>\r\n  <!--\r\n    `#canvas` + `(fCanvasChange)`: il primo serve per chiamare `fitToScreen()`, il secondo per\r\n    sapere che l'utente ha mosso la vista. `[debounceTime]` non si imposta: l'evento serve solo\r\n    ad accendere un flag, non a ricalcolare niente.\r\n  -->\r\n  <f-canvas fZoom #canvas (fCanvasChange)=\"onCanvasChange()\">\r\n    <f-background>\r\n      <f-circle-pattern />\r\n    </f-background>\r\n\r\n    @for (edge of edges(); track edge.id) {\r\n      <f-connection\r\n        [fConnectionId]=\"edge.id\"\r\n        [fSourceId]=\"edge.sourceId\"\r\n        [fTargetId]=\"edge.targetId\"\r\n        fBehavior=\"floating\"\r\n        [fType]=\"edge.isGoTo ? 'segment' : 'bezier'\"\r\n        [class]=\"'fb-edge fb-edge--' + edge.kind + (edge.isGoTo ? ' fb-edge--goto' : '')\"\r\n      >\r\n        <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n        @if (edge.label) {\r\n          <div fConnectionContent class=\"fb-edge-label\">{{ edge.label }}</div>\r\n        }\r\n      </f-connection>\r\n    }\r\n\r\n    @for (node of nodes(); track node.id) {\r\n      <div\r\n        fNode\r\n        fDragHandle\r\n        [fNodeId]=\"node.id\"\r\n        [fNodePosition]=\"node.position\"\r\n        [class]=\"'fb-node ' + categoryClass(node) + ' ' + node.widthClass\"\r\n        [class.fb-node--start]=\"node.isStart\"\r\n        [class.fb-node--selected]=\"isSelected(node)\"\r\n        [class.fb-node--unreachable]=\"!node.isReachable\"\r\n        [class.fb-node--error]=\"node.severity === 'Error'\"\r\n        [class.fb-node--warning]=\"node.severity === 'Warning'\"\r\n        (dblclick)=\"onNodeDoubleClick(node.name)\"\r\n      >\r\n        <!--\r\n          Lo Start non ha ingresso: e' il punto di partenza (\u00A73.4).\r\n          `fConnectorConnectableSide` e' cio' che fa entrare l'arco dall'alto: senza, foblex\r\n          calcola il lato e un arco che scende dal node sopra potrebbe agganciarsi di fianco.\r\n        -->\r\n        @if (!node.isStart) {\r\n          <div\r\n            fConnector\r\n            fConnectorType=\"target\"\r\n            [fConnectorId]=\"targetIdOf(node)\"\r\n            [fConnectorConnectableSide]=\"sides.TOP\"\r\n            fConnectorMultiple=\"true\"\r\n            class=\"fb-connector fb-connector--in\"\r\n            title=\"Ingresso\"\r\n          ></div>\r\n        }\r\n\r\n        <div class=\"fb-node__head\">\r\n          <span class=\"fb-node__icon\" aria-hidden=\"true\">{{ node.icon }}</span>\r\n          <div class=\"fb-node__text\">\r\n            <span class=\"fb-node__title\" [title]=\"node.description || node.label\">{{ node.label }}</span>\r\n            <span class=\"fb-node__sub\">\r\n              {{ node.typeLabel }}\r\n              @if (node.subtitle) {\r\n                <span class=\"fb-node__sub-dot\">\u00B7</span>{{ node.subtitle }}\r\n              }\r\n            </span>\r\n          </div>\r\n          @if (node.hasAutomaticOutput) {\r\n            <!-- L'elemento espone il proprio risultato sotto il proprio nome (\u00A74.5). -->\r\n            <span class=\"fb-node__auto\" title=\"Espone un output automatico referenziabile come \u00AB{{ node.name }}\u00BB\">\r\n              \u0192\r\n            </span>\r\n          }\r\n          <!--\r\n            `fDragBlocker` impedisce che il pointerdown sul bottone diventi un trascinamento\r\n            del node: senza, aprire il dettaglio sposterebbe l'elemento di qualche pixel.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            fDragBlocker\r\n            class=\"fb-node__edit\"\r\n            [attr.aria-label]=\"'Apri il dettaglio di ' + node.label\"\r\n            title=\"Apri il dettaglio\"\r\n            (click)=\"onEditClick($event, node.name)\"\r\n          >\r\n            \u270E\r\n          </button>\r\n          @if (!node.isStart && isEditable()) {\r\n            <!--\r\n              Si mostra solo sul node **selezionato**, non al passaggio del mouse come \u270E:\r\n              cancellare non e' reversibile con un altro clic, e un comando distruttivo che\r\n              appare sotto il puntatore mentre si attraversa il grafo si preme per sbaglio.\r\n              Lo Start non lo espone: un flow senza ingresso non esisterebbe.\r\n            -->\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-node__remove\"\r\n              [attr.aria-label]=\"'Elimina ' + node.label\"\r\n              title=\"Elimina questo elemento (si annulla con \u21B6)\"\r\n              (click)=\"onRemoveClick($event, node.name)\"\r\n            >\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"fb-node__meta\">\r\n          @if (!node.isStart) {\r\n            <span class=\"fb-node__name\" [title]=\"'Nome tecnico: ' + node.name\">{{ node.name }}</span>\r\n          }\r\n          @if (!node.isReachable) {\r\n            <span class=\"fb-badge fb-badge--unreachable\" title=\"Nessun percorso raggiunge questo elemento dallo Start\">\r\n              scollegato\r\n            </span>\r\n          }\r\n          @if (node.issueCount > 0) {\r\n            <span\r\n              class=\"fb-badge\"\r\n              [class.fb-badge--error]=\"node.severity === 'Error'\"\r\n              [class.fb-badge--warning]=\"node.severity === 'Warning'\"\r\n              [class.fb-badge--info]=\"node.severity === 'Info'\"\r\n              [title]=\"node.issueCount + ' rilievi di validazione'\"\r\n            >\r\n              {{ node.issueCount }}\r\n            </span>\r\n          }\r\n          @if (node.danglingOutlets.length > 0) {\r\n            <span\r\n              class=\"fb-badge fb-badge--dangling\"\r\n              [title]=\"'Rami dichiarati senza destinazione: ' + danglingLabels(node)\"\r\n            >\r\n              ramo incompleto\r\n            </span>\r\n          }\r\n        </div>\r\n\r\n        <!--\r\n          Le uscite stanno sul bordo **inferiore**, una per ramo, nell'ordine in cui il modello\r\n          le dichiara: per una Decision e' l'ordine di valutazione delle regole, che e'\r\n          semantico (\u00A75.4), e da sinistra a destra si legge come la lista nell'inspector.\r\n          L'etichetta si mostra solo quando i rami sono piu' di uno: su un `next` unico\r\n          direbbe soltanto \u00ABSuccessivo\u00BB.\r\n        -->\r\n        <div class=\"fb-node__outlets\" [class.fb-node__outlets--labelled]=\"node.showsOutletLabels\">\r\n          @for (outlet of node.outlets; track outlet.key) {\r\n            <div class=\"fb-outlet\">\r\n              @if (node.showsOutletLabels) {\r\n                <span class=\"fb-outlet__label\" [title]=\"outlet.label\">{{ outlet.label }}</span>\r\n              }\r\n              <div\r\n                fConnector\r\n                fConnectorType=\"source\"\r\n                [fConnectorId]=\"connectorIdOf(node, outlet.key)\"\r\n                [fConnectorConnectableSide]=\"sides.BOTTOM\"\r\n                [class]=\"'fb-connector fb-connector--out fb-connector--' + outlet.kind\"\r\n                [title]=\"outlet.label\"\r\n              ></div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Anteprima dell'arco durante il trascinamento. -->\r\n    <f-connection-for-create fBehavior=\"floating\" fType=\"bezier\" class=\"fb-edge fb-edge--creating\">\r\n      <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n    </f-connection-for-create>\r\n\r\n    <f-selection-area />\r\n  </f-canvas>\r\n\r\n  <!--\r\n    Fuori da <f-canvas> come la minimappa: dentro, la trasformazione del canvas se lo\r\n    porterebbe via insieme ai node. `fDragBlocker` perche' il pointerdown non inizi una\r\n    panoramica invece di premere il bottone.\r\n  -->\r\n  <!--\r\n    Sempre nel DOM, nascosto con una classe e non con `@if`: dentro una proiezione di contenuto\r\n    un blocco di controllo e' una complicazione gratuita, e `visibility: hidden` lo toglie\r\n    anche dall'ordine di tabulazione. Il costo e' un bottone in piu' nel DOM, non un rischio.\r\n  -->\r\n  <button\r\n    type=\"button\"\r\n    fDragBlocker\r\n    class=\"fb-btn fb-viewport-reset\"\r\n    [class.fb-viewport-reset--hidden]=\"!hasMovedViewport()\"\r\n    title=\"Rimetti il flow interamente in vista, al centro\"\r\n    (click)=\"resetViewport()\"\r\n  >\r\n    <span class=\"fb-viewport-reset__icon\" aria-hidden=\"true\">\u2922</span>\r\n    Inquadra il flow\r\n  </button>\r\n\r\n  <f-minimap [fMinSize]=\"1200\" class=\"fb-minimap\" />\r\n</f-flow>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:var(--fb-canvas-bg, #f4f5f7)}f-flow{display:block;width:100%;height:100%}.fb-minimap{position:absolute;right:14px;bottom:14px;width:190px;height:130px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));overflow:hidden}.fb-viewport-reset{position:absolute;right:14px;bottom:152px;z-index:1;border-radius:var(--fb-radius-xs, 6px);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));font-size:11px;transition:opacity .15s ease,visibility .15s ease}.fb-viewport-reset--hidden{opacity:0;visibility:hidden}.fb-viewport-reset__icon{font-size:13px;line-height:1;color:var(--fb-text-muted, #667085)}.fb-node{position:absolute;display:flex;flex-direction:column;box-sizing:border-box;width:240px;padding:0;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-lg, 12px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));font:inherit;cursor:grab;-webkit-user-select:none;user-select:none;transition:box-shadow .12s ease,border-color .12s ease}.fb-node--outlets-3{width:304px}.fb-node--outlets-4{width:380px}.fb-node--outlets-5{width:456px}.fb-node--outlets-6{width:520px}.fb-node:hover{box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%))}.fb-node--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:0 0 0 3px color-mix(in srgb,var(--fb-accent, #4f6ef7) 22%,transparent)}.fb-node--unreachable{border-style:dashed;opacity:.8}.fb-node--error{border-color:var(--fb-error, #c9372c)}.fb-node--warning{border-color:var(--fb-warning, #b7791f)}.fb-node__head{display:flex;align-items:center;gap:8px;padding:10px 10px 6px 12px}.fb-node__icon{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:var(--fb-radius-sm, 8px);background:var(--fb-node-accent, #667085);color:#fff;font-size:14px;line-height:1}.cat-start{--fb-node-accent: #22a06b}.cat-screen{--fb-node-accent: #3b82f6}.cat-logic{--fb-node-accent: #8b5cf6}.cat-data{--fb-node-accent: #06b6d4}.cat-action{--fb-node-accent: #f59e0b}.cat-flow{--fb-node-accent: #14b8a6}.cat-other{--fb-node-accent: #667085}.fb-node__text{flex:1;min-width:0}.fb-node__title{display:block;font-size:13px;font-weight:600;line-height:17px;color:var(--fb-text, #1a1c23);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub{display:block;margin-top:1px;font-size:11px;line-height:14px;color:var(--fb-text-muted, #6b7086);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub-dot{margin:0 4px;color:var(--fb-text-subtle, #98a2b3)}.fb-node__auto{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--fb-accent, #4f6ef7);cursor:help}.fb-node__edit{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:12px;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease}.fb-node:hover .fb-node__edit,.fb-node--selected .fb-node__edit,.fb-node__edit:focus-visible{opacity:1}.fb-node__edit:hover{background:var(--fb-surface-alt, #f7f8fa);color:var(--fb-text, #1a1c23)}.fb-node__remove{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:15px;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease,color .12s ease}.fb-node--selected .fb-node__remove,.fb-node__remove:focus-visible{opacity:1}.fb-node__remove:hover{background:color-mix(in srgb,var(--fb-error, #c9372c) 12%,transparent);color:var(--fb-error, #c9372c)}.fb-node__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:14px;padding:0 12px 6px}.fb-node__name{flex:0 1 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--fb-text-subtle, #98a2b3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-badge{padding:1px 6px;border-radius:10px;background:var(--fb-badge-bg, #eef0f4);font-size:10px;font-weight:600;color:var(--fb-text-muted, #6b7086);white-space:nowrap;cursor:help}.fb-badge--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 14%,transparent);color:var(--fb-error, #c9372c)}.fb-badge--warning{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-badge--info{background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 12%,transparent);color:var(--fb-accent, #4f6ef7)}.fb-badge--unreachable,.fb-badge--dangling{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-node__outlets{display:flex;align-items:flex-end;justify-content:space-evenly;gap:4px;padding:0 8px 4px}.fb-node__outlets--labelled{padding-top:5px;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-outlet{display:flex;flex:1 1 0;flex-direction:column;align-items:center;gap:2px;min-width:0}.fb-outlet__label{max-width:100%;font-size:10px;line-height:13px;color:var(--fb-text-muted, #6b7086);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-connector{box-sizing:border-box;width:12px;height:12px;flex:0 0 auto;border:2px solid var(--fb-surface, #fff);border-radius:50%;background:var(--fb-connector, #98a2b3);cursor:crosshair;transition:transform .12s ease,box-shadow .12s ease}f-flow .fb-connector--out{position:relative;inset:auto;margin-bottom:-12px}.fb-connector--out:hover{transform:scale(1.2)}f-flow .fb-connector--in{position:absolute;inset:-2px auto auto 50%;width:24px;height:4px;border:0;border-radius:2px;transform:translate(-50%);background:var(--fb-border-strong, #cfd4de)}.fb-connector--out{--ff-connector-connected-color: var(--fb-connector, #98a2b3)}.fb-connector--Next,.fb-connector--Start,.fb-connector--LoopNext{--fb-connector: var(--fb-edge-next, #98a2b3)}.fb-connector--Rule,.fb-connector--WaitEvent{--fb-connector: var(--fb-edge-rule, #8b5cf6)}.fb-connector--Default,.fb-connector--LoopEnd{--fb-connector: var(--fb-edge-default, #06b6d4)}.fb-connector--Fault{--fb-connector: var(--fb-edge-fault, #dc2626)}.fb-connector--Timeout,.fb-connector--ScheduledPath{--fb-connector: var(--fb-edge-timeout, #f59e0b)}.fb-connector.f-connector-connectable{box-shadow:0 0 0 4px color-mix(in srgb,var(--fb-accent, #4f6ef7) 28%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: FFlowModule }, { kind: "component", type: i1.FFlowComponent, selector: "f-flow", inputs: ["fFlowId", "fCache"], outputs: ["fNodesRendered", "fFullRendered", "fLoaded"] }, { kind: "component", type: i1.FCanvasComponent, selector: "f-canvas", inputs: ["position", "scale", "debounceTime", "fLayers"], outputs: ["fCanvasChange"] }, { kind: "component", type: i1.FBackgroundComponent, selector: "f-background" }, { kind: "component", type: i1.FCirclePatternComponent, selector: "f-circle-pattern", inputs: ["id", "color", "radius"] }, { kind: "directive", type: i1.FZoomDirective, selector: "f-canvas[fZoom]", inputs: ["fZoom", "fWheelTrigger", "fDblClickTrigger", "fZoomMinimum", "fZoomMaximum", "fZoomStep", "fPinchStep", "fZoomDblClickStep"] }, { kind: "component", type: i1.FSelectionArea, selector: "f-selection-area", inputs: ["fTrigger"] }, { kind: "directive", type: i1.FConnectionContent, selector: "[fConnectionContent]", inputs: ["position", "offset", "align"] }, { kind: "component", type: i1.FConnectionMarkerArrow, selector: "f-connection-marker-arrow", inputs: ["type"] }, { kind: "component", type: i1.FConnectionComponent, selector: "f-connection", inputs: ["fConnectionId", "fSourceId", "fTargetId", "fOutputId", "fInputId", "fRadius", "fOffset", "fBehavior", "fType", "fSelectionDisabled", "fReassignableStart", "fReassignDisabled", "fSourceSide", "fTargetSide", "fInputSide", "fOutputSide"], exportAs: ["fComponent"] }, { kind: "component", type: i1.FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: ["fRadius", "fOffset", "fBehavior", "fType", "fInputSide", "fOutputSide"] }, { kind: "directive", type: i1.FConnectorDirective, selector: "[fConnector]", inputs: ["fConnectorId", "fConnectorType", "fConnectorDisabled", "fConnectorMultiple", "fConnectorCategory", "fConnectorConnectableSide", "fConnectorSelfConnectable", "fCanBeConnectedTo", "fConnectionFromOutlet"], exportAs: ["fConnector"] }, { kind: "component", type: i1.FMinimapComponent, selector: "f-minimap", inputs: ["fMinSize", "fNodeRenderLimit"], exportAs: ["fComponent"] }, { kind: "directive", type: i1.FNodeDirective, selector: "[fNode]", inputs: ["fNodeId", "fNodeParentId", "fNodePosition", "fNodeSize", "fNodeRotate", "fConnectOnNode", "fMinimapClass", "fNodeDraggingDisabled", "fNodeSelectionDisabled", "fIncludePadding", "fAutoExpandOnChildHit", "fAutoSizeToFitChildren"], outputs: ["fNodePositionChange", "fNodeSizeChange", "fNodeRotateChange"], exportAs: ["fComponent"] }, { kind: "directive", type: i1.FDragHandleDirective, selector: "[fDragHandle]" }, { kind: "directive", type: i1.FDragBlockerDirective, selector: "[fDragBlocker]" }, { kind: "directive", type: i1.FDraggableDirective, selector: "f-flow[fDraggable]", inputs: ["fDraggableDisabled", "fDropToGroup", "fMultiSelectTrigger", "fReassignConnectionTrigger", "fCreateConnectionTrigger", "fConnectionWaypointsTrigger", "fMoveControlPointTrigger", "fNodeResizeTrigger", "fNodeRotateTrigger", "fNodeMoveTrigger", "fCanvasMoveTrigger", "fExternalItemTrigger", "fEmitOnNodeIntersect", "vCellSize", "hCellSize", "fCellSizeWhileDragging"], outputs: ["fSelectionChange", "fDeleteSelected", "fNodeIntersectedWithConnections", "fNodeConnectionsIntersection", "fCreateNode", "fMoveNodes", "fReassignConnection", "fCreateConnection", "fConnectionWaypointsChanged", "fDropToGroup", "fDragStarted", "fDragEnded"], exportAs: ["fDraggable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: FlowCanvasComponent, isStandalone: true, selector: "fb-flow-canvas", inputs: { selectedName: { classPropertyName: "selectedName", publicName: "selectedName", isSignal: true, isRequired: false, transformFunction: null }, selectedNames: { classPropertyName: "selectedNames", publicName: "selectedNames", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", nodeOpened: "nodeOpened", nodeRemoveRequested: "nodeRemoveRequested", nodeDuplicateRequested: "nodeDuplicateRequested", elementDropped: "elementDropped" }, providers: [provideFFlow(withA11y())], viewQueries: [{ propertyName: "canvas", first: true, predicate: FCanvasComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  Gerarchia obbligatoria: f-flow > f-canvas > fNode / f-connection.\r\n  I `@for` sono direttamente dentro <f-canvas>: nessun wrapper, quindi non serve\r\n  `ngProjectAs` (che sarebbe indispensabile con blocchi annidati).\r\n-->\r\n<f-flow\r\n  fDraggable\r\n  (fCreateConnection)=\"onCreateConnection($event)\"\r\n  (fReassignConnection)=\"onReassignConnection($event)\"\r\n  (fMoveNodes)=\"onMoveNodes($event)\"\r\n  (fSelectionChange)=\"onSelectionChange($event)\"\r\n  (fDeleteSelected)=\"onDeleteSelected($event)\"\r\n  (fCreateNode)=\"onCreateNode($event)\"\r\n  (fNodesRendered)=\"onNodesRendered()\"\r\n>\r\n  <!--\r\n    `#canvas` + `(fCanvasChange)`: il primo serve per chiamare `fitToScreen()`, il secondo per\r\n    sapere che l'utente ha mosso la vista. `[debounceTime]` non si imposta: l'evento serve solo\r\n    ad accendere un flag, non a ricalcolare niente.\r\n  -->\r\n  <f-canvas fZoom #canvas (fCanvasChange)=\"onCanvasChange()\">\r\n    <f-background>\r\n      <f-circle-pattern />\r\n    </f-background>\r\n\r\n    @for (edge of edges(); track edge.id) {\r\n      <f-connection\r\n        [fConnectionId]=\"edge.id\"\r\n        [fSourceId]=\"edge.sourceId\"\r\n        [fTargetId]=\"edge.targetId\"\r\n        fBehavior=\"floating\"\r\n        [fType]=\"edge.isGoTo ? 'segment' : 'bezier'\"\r\n        [class]=\"'fb-edge fb-edge--' + edge.kind + (edge.isGoTo ? ' fb-edge--goto' : '')\"\r\n      >\r\n        <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n        @if (edge.label) {\r\n          <div fConnectionContent class=\"fb-edge-label\">{{ edge.label }}</div>\r\n        }\r\n      </f-connection>\r\n    }\r\n\r\n    @for (node of nodes(); track node.id) {\r\n      <div\r\n        fNode\r\n        fDragHandle\r\n        [fNodeId]=\"node.id\"\r\n        [fNodePosition]=\"node.position\"\r\n        [class]=\"'fb-node ' + categoryClass(node) + ' ' + node.widthClass\"\r\n        [class.fb-node--start]=\"node.isStart\"\r\n        [class.fb-node--selected]=\"isSelected(node)\"\r\n        [class.fb-node--unreachable]=\"!node.isReachable\"\r\n        [class.fb-node--error]=\"node.severity === 'Error'\"\r\n        [class.fb-node--warning]=\"node.severity === 'Warning'\"\r\n        (dblclick)=\"onNodeDoubleClick(node.name)\"\r\n      >\r\n        <!--\r\n          Lo Start non ha ingresso: e' il punto di partenza (\u00A73.4).\r\n          `fConnectorConnectableSide` e' cio' che fa entrare l'arco dall'alto: senza, foblex\r\n          calcola il lato e un arco che scende dal node sopra potrebbe agganciarsi di fianco.\r\n        -->\r\n        @if (!node.isStart) {\r\n          <div\r\n            fConnector\r\n            fConnectorType=\"target\"\r\n            [fConnectorId]=\"targetIdOf(node)\"\r\n            [fConnectorConnectableSide]=\"sides.TOP\"\r\n            fConnectorMultiple=\"true\"\r\n            class=\"fb-connector fb-connector--in\"\r\n            title=\"Ingresso\"\r\n          ></div>\r\n        }\r\n\r\n        <div class=\"fb-node__head\">\r\n          <span class=\"fb-node__icon\" aria-hidden=\"true\">{{ node.icon }}</span>\r\n          <div class=\"fb-node__text\">\r\n            <span class=\"fb-node__title\" [title]=\"node.description || node.label\">{{ node.label }}</span>\r\n            <span class=\"fb-node__sub\">\r\n              {{ node.typeLabel }}\r\n              @if (node.subtitle) {\r\n                <span class=\"fb-node__sub-dot\">\u00B7</span>{{ node.subtitle }}\r\n              }\r\n            </span>\r\n          </div>\r\n          @if (node.hasAutomaticOutput) {\r\n            <!-- L'elemento espone il proprio risultato sotto il proprio nome (\u00A74.5). -->\r\n            <span class=\"fb-node__auto\" title=\"Espone un output automatico referenziabile come \u00AB{{ node.name }}\u00BB\">\r\n              \u0192\r\n            </span>\r\n          }\r\n          <!--\r\n            `fDragBlocker` impedisce che il pointerdown sul bottone diventi un trascinamento\r\n            del node: senza, aprire il dettaglio sposterebbe l'elemento di qualche pixel.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            fDragBlocker\r\n            class=\"fb-node__edit\"\r\n            [attr.aria-label]=\"'Apri il dettaglio di ' + node.label\"\r\n            title=\"Apri il dettaglio\"\r\n            (click)=\"onEditClick($event, node.name)\"\r\n          >\r\n            \u270E\r\n          </button>\r\n          @if (!node.isStart && isEditable()) {\r\n            <!--\r\n              Duplica: sta accanto a \u270E e non solo nell'inspector perche' e' il gesto con cui si\r\n              riusa un elemento gi\u00E0 configurato, e cercarlo dentro il form dell'elemento da\r\n              copiare e' il posto in cui non lo si cerca. Compare come \u00AB\u00D7\u00BB, sul solo node\r\n              selezionato: aggiunge un elemento al documento, quindi non deve trovarsi sotto il\r\n              puntatore di chi sta solo attraversando il grafo.\r\n            -->\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-node__duplicate\"\r\n              [attr.aria-label]=\"'Duplica ' + node.label\"\r\n              title=\"Duplica questo elemento (Ctrl+D)\"\r\n              (click)=\"onDuplicateClick($event, node.name)\"\r\n            >\r\n              \u29C9\r\n            </button>\r\n            <!--\r\n              Si mostra solo sul node **selezionato**, non al passaggio del mouse come \u270E:\r\n              cancellare non e' reversibile con un altro clic, e un comando distruttivo che\r\n              appare sotto il puntatore mentre si attraversa il grafo si preme per sbaglio.\r\n              Lo Start non lo espone: un flow senza ingresso non esisterebbe.\r\n            -->\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-node__remove\"\r\n              [attr.aria-label]=\"'Elimina ' + node.label\"\r\n              title=\"Elimina questo elemento (si annulla con \u21B6)\"\r\n              (click)=\"onRemoveClick($event, node.name)\"\r\n            >\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"fb-node__meta\">\r\n          @if (!node.isStart) {\r\n            <span class=\"fb-node__name\" [title]=\"'Nome tecnico: ' + node.name\">{{ node.name }}</span>\r\n          }\r\n          @if (!node.isReachable) {\r\n            <span class=\"fb-badge fb-badge--unreachable\" title=\"Nessun percorso raggiunge questo elemento dallo Start\">\r\n              scollegato\r\n            </span>\r\n          }\r\n          @if (node.issueCount > 0) {\r\n            <span\r\n              class=\"fb-badge\"\r\n              [class.fb-badge--error]=\"node.severity === 'Error'\"\r\n              [class.fb-badge--warning]=\"node.severity === 'Warning'\"\r\n              [class.fb-badge--info]=\"node.severity === 'Info'\"\r\n              [title]=\"node.issueCount + ' rilievi di validazione'\"\r\n            >\r\n              {{ node.issueCount }}\r\n            </span>\r\n          }\r\n          @if (node.danglingOutlets.length > 0) {\r\n            <span\r\n              class=\"fb-badge fb-badge--dangling\"\r\n              [title]=\"'Rami dichiarati senza destinazione: ' + danglingLabels(node)\"\r\n            >\r\n              ramo incompleto\r\n            </span>\r\n          }\r\n        </div>\r\n\r\n        <!--\r\n          Le uscite stanno sul bordo **inferiore**, una per ramo, nell'ordine in cui il modello\r\n          le dichiara: per una Decision e' l'ordine di valutazione delle regole, che e'\r\n          semantico (\u00A75.4), e da sinistra a destra si legge come la lista nell'inspector.\r\n          L'etichetta si mostra solo quando i rami sono piu' di uno: su un `next` unico\r\n          direbbe soltanto \u00ABSuccessivo\u00BB.\r\n        -->\r\n        <div class=\"fb-node__outlets\" [class.fb-node__outlets--labelled]=\"node.showsOutletLabels\">\r\n          @for (outlet of node.outlets; track outlet.key) {\r\n            <div class=\"fb-outlet\">\r\n              @if (node.showsOutletLabels) {\r\n                <span class=\"fb-outlet__label\" [title]=\"outlet.label\">{{ outlet.label }}</span>\r\n              }\r\n              <div\r\n                fConnector\r\n                fConnectorType=\"source\"\r\n                [fConnectorId]=\"connectorIdOf(node, outlet.key)\"\r\n                [fConnectorConnectableSide]=\"sides.BOTTOM\"\r\n                [class]=\"'fb-connector fb-connector--out fb-connector--' + outlet.kind\"\r\n                [title]=\"outlet.label\"\r\n              ></div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Anteprima dell'arco durante il trascinamento. -->\r\n    <f-connection-for-create fBehavior=\"floating\" fType=\"bezier\" class=\"fb-edge fb-edge--creating\">\r\n      <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n    </f-connection-for-create>\r\n\r\n    <f-selection-area />\r\n  </f-canvas>\r\n\r\n  <!--\r\n    Fuori da <f-canvas> come la minimappa: dentro, la trasformazione del canvas se lo\r\n    porterebbe via insieme ai node. `fDragBlocker` perche' il pointerdown non inizi una\r\n    panoramica invece di premere il bottone.\r\n  -->\r\n  <!--\r\n    Sempre nel DOM, nascosto con una classe e non con `@if`: dentro una proiezione di contenuto\r\n    un blocco di controllo e' una complicazione gratuita, e `visibility: hidden` lo toglie\r\n    anche dall'ordine di tabulazione. Il costo e' un bottone in piu' nel DOM, non un rischio.\r\n  -->\r\n  <button\r\n    type=\"button\"\r\n    fDragBlocker\r\n    class=\"fb-btn fb-viewport-reset\"\r\n    [class.fb-viewport-reset--hidden]=\"!hasMovedViewport()\"\r\n    title=\"Rimetti il flow interamente in vista, al centro\"\r\n    (click)=\"resetViewport()\"\r\n  >\r\n    <span class=\"fb-viewport-reset__icon\" aria-hidden=\"true\">\u2922</span>\r\n    Inquadra il flow\r\n  </button>\r\n\r\n  <f-minimap [fMinSize]=\"1200\" class=\"fb-minimap\" />\r\n</f-flow>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:var(--fb-canvas-bg, #f4f5f7)}f-flow{display:block;width:100%;height:100%}.fb-minimap{position:absolute;right:14px;bottom:14px;width:190px;height:130px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));overflow:hidden}.fb-viewport-reset{position:absolute;right:14px;bottom:152px;z-index:1;border-radius:var(--fb-radius-xs, 6px);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));font-size:11px;transition:opacity .15s ease,visibility .15s ease}.fb-viewport-reset--hidden{opacity:0;visibility:hidden}.fb-viewport-reset__icon{font-size:13px;line-height:1;color:var(--fb-text-muted, #667085)}.fb-node{position:absolute;display:flex;flex-direction:column;box-sizing:border-box;width:240px;padding:0;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-lg, 12px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));font:inherit;cursor:grab;-webkit-user-select:none;user-select:none;transition:box-shadow .12s ease,border-color .12s ease}.fb-node--outlets-3{width:304px}.fb-node--outlets-4{width:380px}.fb-node--outlets-5{width:456px}.fb-node--outlets-6{width:520px}.fb-node:hover{box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%))}.fb-node--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:0 0 0 3px color-mix(in srgb,var(--fb-accent, #4f6ef7) 22%,transparent)}.fb-node--unreachable{border-style:dashed;opacity:.8}.fb-node--error{border-color:var(--fb-error, #c9372c)}.fb-node--warning{border-color:var(--fb-warning, #b7791f)}.fb-node__head{display:flex;align-items:center;gap:8px;padding:10px 10px 6px 12px}.fb-node__icon{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:var(--fb-radius-sm, 8px);background:var(--fb-node-accent, #667085);color:#fff;font-size:14px;line-height:1}.cat-start{--fb-node-accent: #22a06b}.cat-screen{--fb-node-accent: #3b82f6}.cat-logic{--fb-node-accent: #8b5cf6}.cat-data{--fb-node-accent: #06b6d4}.cat-action{--fb-node-accent: #f59e0b}.cat-flow{--fb-node-accent: #14b8a6}.cat-other{--fb-node-accent: #667085}.fb-node__text{flex:1;min-width:0}.fb-node__title{display:block;font-size:13px;font-weight:600;line-height:17px;color:var(--fb-text, #1a1c23);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub{display:block;margin-top:1px;font-size:11px;line-height:14px;color:var(--fb-text-muted, #6b7086);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub-dot{margin:0 4px;color:var(--fb-text-subtle, #98a2b3)}.fb-node__auto{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--fb-accent, #4f6ef7);cursor:help}.fb-node__edit{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:12px;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease}.fb-node:hover .fb-node__edit,.fb-node--selected .fb-node__edit,.fb-node__edit:focus-visible{opacity:1}.fb-node__edit:hover{background:var(--fb-surface-alt, #f7f8fa);color:var(--fb-text, #1a1c23)}.fb-node__duplicate,.fb-node__remove{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:15px;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease,color .12s ease}.fb-node--selected .fb-node__duplicate,.fb-node--selected .fb-node__remove,.fb-node__duplicate:focus-visible,.fb-node__remove:focus-visible{opacity:1}.fb-node__remove:hover{background:color-mix(in srgb,var(--fb-error, #c9372c) 12%,transparent);color:var(--fb-error, #c9372c)}.fb-node__duplicate:hover{background:color-mix(in srgb,var(--fb-accent, #3b6ef2) 12%,transparent);color:var(--fb-accent, #3b6ef2)}.fb-node__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:14px;padding:0 12px 6px}.fb-node__name{flex:0 1 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--fb-text-subtle, #98a2b3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-badge{padding:1px 6px;border-radius:10px;background:var(--fb-badge-bg, #eef0f4);font-size:10px;font-weight:600;color:var(--fb-text-muted, #6b7086);white-space:nowrap;cursor:help}.fb-badge--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 14%,transparent);color:var(--fb-error, #c9372c)}.fb-badge--warning{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-badge--info{background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 12%,transparent);color:var(--fb-accent, #4f6ef7)}.fb-badge--unreachable,.fb-badge--dangling{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-node__outlets{display:flex;align-items:flex-end;justify-content:space-evenly;gap:4px;padding:0 8px 4px}.fb-node__outlets--labelled{padding-top:5px;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-outlet{display:flex;flex:1 1 0;flex-direction:column;align-items:center;gap:2px;min-width:0}.fb-outlet__label{max-width:100%;font-size:10px;line-height:13px;color:var(--fb-text-muted, #6b7086);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-connector{box-sizing:border-box;width:12px;height:12px;flex:0 0 auto;border:2px solid var(--fb-surface, #fff);border-radius:50%;background:var(--fb-connector, #98a2b3);cursor:crosshair;transition:transform .12s ease,box-shadow .12s ease}f-flow .fb-connector--out{position:relative;inset:auto;margin-bottom:-12px}.fb-connector--out:hover{transform:scale(1.2)}f-flow .fb-connector--in{position:absolute;inset:-2px auto auto 50%;width:24px;height:4px;border:0;border-radius:2px;transform:translate(-50%);background:var(--fb-border-strong, #cfd4de)}.fb-connector--out{--ff-connector-connected-color: var(--fb-connector, #98a2b3)}.fb-connector--Next,.fb-connector--Start,.fb-connector--LoopNext{--fb-connector: var(--fb-edge-next, #98a2b3)}.fb-connector--Rule,.fb-connector--WaitEvent{--fb-connector: var(--fb-edge-rule, #8b5cf6)}.fb-connector--Default,.fb-connector--LoopEnd{--fb-connector: var(--fb-edge-default, #06b6d4)}.fb-connector--Fault{--fb-connector: var(--fb-edge-fault, #dc2626)}.fb-connector--Timeout,.fb-connector--ScheduledPath{--fb-connector: var(--fb-edge-timeout, #f59e0b)}.fb-connector.f-connector-connectable{box-shadow:0 0 0 4px color-mix(in srgb,var(--fb-accent, #4f6ef7) 28%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: FFlowModule }, { kind: "component", type: i1.FFlowComponent, selector: "f-flow", inputs: ["fFlowId", "fCache"], outputs: ["fNodesRendered", "fFullRendered", "fLoaded"] }, { kind: "component", type: i1.FCanvasComponent, selector: "f-canvas", inputs: ["position", "scale", "debounceTime", "fLayers"], outputs: ["fCanvasChange"] }, { kind: "component", type: i1.FBackgroundComponent, selector: "f-background" }, { kind: "component", type: i1.FCirclePatternComponent, selector: "f-circle-pattern", inputs: ["id", "color", "radius"] }, { kind: "directive", type: i1.FZoomDirective, selector: "f-canvas[fZoom]", inputs: ["fZoom", "fWheelTrigger", "fDblClickTrigger", "fZoomMinimum", "fZoomMaximum", "fZoomStep", "fPinchStep", "fZoomDblClickStep"] }, { kind: "component", type: i1.FSelectionArea, selector: "f-selection-area", inputs: ["fTrigger"] }, { kind: "directive", type: i1.FConnectionContent, selector: "[fConnectionContent]", inputs: ["position", "offset", "align"] }, { kind: "component", type: i1.FConnectionMarkerArrow, selector: "f-connection-marker-arrow", inputs: ["type"] }, { kind: "component", type: i1.FConnectionComponent, selector: "f-connection", inputs: ["fConnectionId", "fSourceId", "fTargetId", "fOutputId", "fInputId", "fRadius", "fOffset", "fBehavior", "fType", "fSelectionDisabled", "fReassignableStart", "fReassignDisabled", "fSourceSide", "fTargetSide", "fInputSide", "fOutputSide"], exportAs: ["fComponent"] }, { kind: "component", type: i1.FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: ["fRadius", "fOffset", "fBehavior", "fType", "fInputSide", "fOutputSide"] }, { kind: "directive", type: i1.FConnectorDirective, selector: "[fConnector]", inputs: ["fConnectorId", "fConnectorType", "fConnectorDisabled", "fConnectorMultiple", "fConnectorCategory", "fConnectorConnectableSide", "fConnectorSelfConnectable", "fCanBeConnectedTo", "fConnectionFromOutlet"], exportAs: ["fConnector"] }, { kind: "component", type: i1.FMinimapComponent, selector: "f-minimap", inputs: ["fMinSize", "fNodeRenderLimit"], exportAs: ["fComponent"] }, { kind: "directive", type: i1.FNodeDirective, selector: "[fNode]", inputs: ["fNodeId", "fNodeParentId", "fNodePosition", "fNodeSize", "fNodeRotate", "fConnectOnNode", "fMinimapClass", "fNodeDraggingDisabled", "fNodeSelectionDisabled", "fIncludePadding", "fAutoExpandOnChildHit", "fAutoSizeToFitChildren"], outputs: ["fNodePositionChange", "fNodeSizeChange", "fNodeRotateChange"], exportAs: ["fComponent"] }, { kind: "directive", type: i1.FDragHandleDirective, selector: "[fDragHandle]" }, { kind: "directive", type: i1.FDragBlockerDirective, selector: "[fDragBlocker]" }, { kind: "directive", type: i1.FDraggableDirective, selector: "f-flow[fDraggable]", inputs: ["fDraggableDisabled", "fDropToGroup", "fMultiSelectTrigger", "fReassignConnectionTrigger", "fCreateConnectionTrigger", "fConnectionWaypointsTrigger", "fMoveControlPointTrigger", "fNodeResizeTrigger", "fNodeRotateTrigger", "fNodeMoveTrigger", "fCanvasMoveTrigger", "fExternalItemTrigger", "fEmitOnNodeIntersect", "vCellSize", "hCellSize", "fCellSizeWhileDragging"], outputs: ["fSelectionChange", "fDeleteSelected", "fNodeIntersectedWithConnections", "fNodeConnectionsIntersection", "fCreateNode", "fMoveNodes", "fReassignConnection", "fCreateConnection", "fConnectionWaypointsChanged", "fDropToGroup", "fDragStarted", "fDragEnded"], exportAs: ["fDraggable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlowCanvasComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fb-flow-canvas', standalone: true, imports: [FFlowModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideFFlow(withA11y())], template: "<!--\r\n  Gerarchia obbligatoria: f-flow > f-canvas > fNode / f-connection.\r\n  I `@for` sono direttamente dentro <f-canvas>: nessun wrapper, quindi non serve\r\n  `ngProjectAs` (che sarebbe indispensabile con blocchi annidati).\r\n-->\r\n<f-flow\r\n  fDraggable\r\n  (fCreateConnection)=\"onCreateConnection($event)\"\r\n  (fReassignConnection)=\"onReassignConnection($event)\"\r\n  (fMoveNodes)=\"onMoveNodes($event)\"\r\n  (fSelectionChange)=\"onSelectionChange($event)\"\r\n  (fDeleteSelected)=\"onDeleteSelected($event)\"\r\n  (fCreateNode)=\"onCreateNode($event)\"\r\n  (fNodesRendered)=\"onNodesRendered()\"\r\n>\r\n  <!--\r\n    `#canvas` + `(fCanvasChange)`: il primo serve per chiamare `fitToScreen()`, il secondo per\r\n    sapere che l'utente ha mosso la vista. `[debounceTime]` non si imposta: l'evento serve solo\r\n    ad accendere un flag, non a ricalcolare niente.\r\n  -->\r\n  <f-canvas fZoom #canvas (fCanvasChange)=\"onCanvasChange()\">\r\n    <f-background>\r\n      <f-circle-pattern />\r\n    </f-background>\r\n\r\n    @for (edge of edges(); track edge.id) {\r\n      <f-connection\r\n        [fConnectionId]=\"edge.id\"\r\n        [fSourceId]=\"edge.sourceId\"\r\n        [fTargetId]=\"edge.targetId\"\r\n        fBehavior=\"floating\"\r\n        [fType]=\"edge.isGoTo ? 'segment' : 'bezier'\"\r\n        [class]=\"'fb-edge fb-edge--' + edge.kind + (edge.isGoTo ? ' fb-edge--goto' : '')\"\r\n      >\r\n        <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n        @if (edge.label) {\r\n          <div fConnectionContent class=\"fb-edge-label\">{{ edge.label }}</div>\r\n        }\r\n      </f-connection>\r\n    }\r\n\r\n    @for (node of nodes(); track node.id) {\r\n      <div\r\n        fNode\r\n        fDragHandle\r\n        [fNodeId]=\"node.id\"\r\n        [fNodePosition]=\"node.position\"\r\n        [class]=\"'fb-node ' + categoryClass(node) + ' ' + node.widthClass\"\r\n        [class.fb-node--start]=\"node.isStart\"\r\n        [class.fb-node--selected]=\"isSelected(node)\"\r\n        [class.fb-node--unreachable]=\"!node.isReachable\"\r\n        [class.fb-node--error]=\"node.severity === 'Error'\"\r\n        [class.fb-node--warning]=\"node.severity === 'Warning'\"\r\n        (dblclick)=\"onNodeDoubleClick(node.name)\"\r\n      >\r\n        <!--\r\n          Lo Start non ha ingresso: e' il punto di partenza (\u00A73.4).\r\n          `fConnectorConnectableSide` e' cio' che fa entrare l'arco dall'alto: senza, foblex\r\n          calcola il lato e un arco che scende dal node sopra potrebbe agganciarsi di fianco.\r\n        -->\r\n        @if (!node.isStart) {\r\n          <div\r\n            fConnector\r\n            fConnectorType=\"target\"\r\n            [fConnectorId]=\"targetIdOf(node)\"\r\n            [fConnectorConnectableSide]=\"sides.TOP\"\r\n            fConnectorMultiple=\"true\"\r\n            class=\"fb-connector fb-connector--in\"\r\n            title=\"Ingresso\"\r\n          ></div>\r\n        }\r\n\r\n        <div class=\"fb-node__head\">\r\n          <span class=\"fb-node__icon\" aria-hidden=\"true\">{{ node.icon }}</span>\r\n          <div class=\"fb-node__text\">\r\n            <span class=\"fb-node__title\" [title]=\"node.description || node.label\">{{ node.label }}</span>\r\n            <span class=\"fb-node__sub\">\r\n              {{ node.typeLabel }}\r\n              @if (node.subtitle) {\r\n                <span class=\"fb-node__sub-dot\">\u00B7</span>{{ node.subtitle }}\r\n              }\r\n            </span>\r\n          </div>\r\n          @if (node.hasAutomaticOutput) {\r\n            <!-- L'elemento espone il proprio risultato sotto il proprio nome (\u00A74.5). -->\r\n            <span class=\"fb-node__auto\" title=\"Espone un output automatico referenziabile come \u00AB{{ node.name }}\u00BB\">\r\n              \u0192\r\n            </span>\r\n          }\r\n          <!--\r\n            `fDragBlocker` impedisce che il pointerdown sul bottone diventi un trascinamento\r\n            del node: senza, aprire il dettaglio sposterebbe l'elemento di qualche pixel.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            fDragBlocker\r\n            class=\"fb-node__edit\"\r\n            [attr.aria-label]=\"'Apri il dettaglio di ' + node.label\"\r\n            title=\"Apri il dettaglio\"\r\n            (click)=\"onEditClick($event, node.name)\"\r\n          >\r\n            \u270E\r\n          </button>\r\n          @if (!node.isStart && isEditable()) {\r\n            <!--\r\n              Si mostra solo sul node **selezionato**, non al passaggio del mouse come \u270E:\r\n              cancellare non e' reversibile con un altro clic, e un comando distruttivo che\r\n              appare sotto il puntatore mentre si attraversa il grafo si preme per sbaglio.\r\n              Lo Start non lo espone: un flow senza ingresso non esisterebbe.\r\n            -->\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-node__remove\"\r\n              [attr.aria-label]=\"'Elimina ' + node.label\"\r\n              title=\"Elimina questo elemento (si annulla con \u21B6)\"\r\n              (click)=\"onRemoveClick($event, node.name)\"\r\n            >\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"fb-node__meta\">\r\n          @if (!node.isStart) {\r\n            <span class=\"fb-node__name\" [title]=\"'Nome tecnico: ' + node.name\">{{ node.name }}</span>\r\n          }\r\n          @if (!node.isReachable) {\r\n            <span class=\"fb-badge fb-badge--unreachable\" title=\"Nessun percorso raggiunge questo elemento dallo Start\">\r\n              scollegato\r\n            </span>\r\n          }\r\n          @if (node.issueCount > 0) {\r\n            <span\r\n              class=\"fb-badge\"\r\n              [class.fb-badge--error]=\"node.severity === 'Error'\"\r\n              [class.fb-badge--warning]=\"node.severity === 'Warning'\"\r\n              [class.fb-badge--info]=\"node.severity === 'Info'\"\r\n              [title]=\"node.issueCount + ' rilievi di validazione'\"\r\n            >\r\n              {{ node.issueCount }}\r\n            </span>\r\n          }\r\n          @if (node.danglingOutlets.length > 0) {\r\n            <span\r\n              class=\"fb-badge fb-badge--dangling\"\r\n              [title]=\"'Rami dichiarati senza destinazione: ' + danglingLabels(node)\"\r\n            >\r\n              ramo incompleto\r\n            </span>\r\n          }\r\n        </div>\r\n\r\n        <!--\r\n          Le uscite stanno sul bordo **inferiore**, una per ramo, nell'ordine in cui il modello\r\n          le dichiara: per una Decision e' l'ordine di valutazione delle regole, che e'\r\n          semantico (\u00A75.4), e da sinistra a destra si legge come la lista nell'inspector.\r\n          L'etichetta si mostra solo quando i rami sono piu' di uno: su un `next` unico\r\n          direbbe soltanto \u00ABSuccessivo\u00BB.\r\n        -->\r\n        <div class=\"fb-node__outlets\" [class.fb-node__outlets--labelled]=\"node.showsOutletLabels\">\r\n          @for (outlet of node.outlets; track outlet.key) {\r\n            <div class=\"fb-outlet\">\r\n              @if (node.showsOutletLabels) {\r\n                <span class=\"fb-outlet__label\" [title]=\"outlet.label\">{{ outlet.label }}</span>\r\n              }\r\n              <div\r\n                fConnector\r\n                fConnectorType=\"source\"\r\n                [fConnectorId]=\"connectorIdOf(node, outlet.key)\"\r\n                [fConnectorConnectableSide]=\"sides.BOTTOM\"\r\n                [class]=\"'fb-connector fb-connector--out fb-connector--' + outlet.kind\"\r\n                [title]=\"outlet.label\"\r\n              ></div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Anteprima dell'arco durante il trascinamento. -->\r\n    <f-connection-for-create fBehavior=\"floating\" fType=\"bezier\" class=\"fb-edge fb-edge--creating\">\r\n      <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n    </f-connection-for-create>\r\n\r\n    <f-selection-area />\r\n  </f-canvas>\r\n\r\n  <!--\r\n    Fuori da <f-canvas> come la minimappa: dentro, la trasformazione del canvas se lo\r\n    porterebbe via insieme ai node. `fDragBlocker` perche' il pointerdown non inizi una\r\n    panoramica invece di premere il bottone.\r\n  -->\r\n  <!--\r\n    Sempre nel DOM, nascosto con una classe e non con `@if`: dentro una proiezione di contenuto\r\n    un blocco di controllo e' una complicazione gratuita, e `visibility: hidden` lo toglie\r\n    anche dall'ordine di tabulazione. Il costo e' un bottone in piu' nel DOM, non un rischio.\r\n  -->\r\n  <button\r\n    type=\"button\"\r\n    fDragBlocker\r\n    class=\"fb-btn fb-viewport-reset\"\r\n    [class.fb-viewport-reset--hidden]=\"!hasMovedViewport()\"\r\n    title=\"Rimetti il flow interamente in vista, al centro\"\r\n    (click)=\"resetViewport()\"\r\n  >\r\n    <span class=\"fb-viewport-reset__icon\" aria-hidden=\"true\">\u2922</span>\r\n    Inquadra il flow\r\n  </button>\r\n\r\n  <f-minimap [fMinSize]=\"1200\" class=\"fb-minimap\" />\r\n</f-flow>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:var(--fb-canvas-bg, #f4f5f7)}f-flow{display:block;width:100%;height:100%}.fb-minimap{position:absolute;right:14px;bottom:14px;width:190px;height:130px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));overflow:hidden}.fb-viewport-reset{position:absolute;right:14px;bottom:152px;z-index:1;border-radius:var(--fb-radius-xs, 6px);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));font-size:11px;transition:opacity .15s ease,visibility .15s ease}.fb-viewport-reset--hidden{opacity:0;visibility:hidden}.fb-viewport-reset__icon{font-size:13px;line-height:1;color:var(--fb-text-muted, #667085)}.fb-node{position:absolute;display:flex;flex-direction:column;box-sizing:border-box;width:240px;padding:0;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-lg, 12px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));font:inherit;cursor:grab;-webkit-user-select:none;user-select:none;transition:box-shadow .12s ease,border-color .12s ease}.fb-node--outlets-3{width:304px}.fb-node--outlets-4{width:380px}.fb-node--outlets-5{width:456px}.fb-node--outlets-6{width:520px}.fb-node:hover{box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%))}.fb-node--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:0 0 0 3px color-mix(in srgb,var(--fb-accent, #4f6ef7) 22%,transparent)}.fb-node--unreachable{border-style:dashed;opacity:.8}.fb-node--error{border-color:var(--fb-error, #c9372c)}.fb-node--warning{border-color:var(--fb-warning, #b7791f)}.fb-node__head{display:flex;align-items:center;gap:8px;padding:10px 10px 6px 12px}.fb-node__icon{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:var(--fb-radius-sm, 8px);background:var(--fb-node-accent, #667085);color:#fff;font-size:14px;line-height:1}.cat-start{--fb-node-accent: #22a06b}.cat-screen{--fb-node-accent: #3b82f6}.cat-logic{--fb-node-accent: #8b5cf6}.cat-data{--fb-node-accent: #06b6d4}.cat-action{--fb-node-accent: #f59e0b}.cat-flow{--fb-node-accent: #14b8a6}.cat-other{--fb-node-accent: #667085}.fb-node__text{flex:1;min-width:0}.fb-node__title{display:block;font-size:13px;font-weight:600;line-height:17px;color:var(--fb-text, #1a1c23);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub{display:block;margin-top:1px;font-size:11px;line-height:14px;color:var(--fb-text-muted, #6b7086);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub-dot{margin:0 4px;color:var(--fb-text-subtle, #98a2b3)}.fb-node__auto{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--fb-accent, #4f6ef7);cursor:help}.fb-node__edit{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:12px;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease}.fb-node:hover .fb-node__edit,.fb-node--selected .fb-node__edit,.fb-node__edit:focus-visible{opacity:1}.fb-node__edit:hover{background:var(--fb-surface-alt, #f7f8fa);color:var(--fb-text, #1a1c23)}.fb-node__remove{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:15px;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease,color .12s ease}.fb-node--selected .fb-node__remove,.fb-node__remove:focus-visible{opacity:1}.fb-node__remove:hover{background:color-mix(in srgb,var(--fb-error, #c9372c) 12%,transparent);color:var(--fb-error, #c9372c)}.fb-node__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:14px;padding:0 12px 6px}.fb-node__name{flex:0 1 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--fb-text-subtle, #98a2b3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-badge{padding:1px 6px;border-radius:10px;background:var(--fb-badge-bg, #eef0f4);font-size:10px;font-weight:600;color:var(--fb-text-muted, #6b7086);white-space:nowrap;cursor:help}.fb-badge--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 14%,transparent);color:var(--fb-error, #c9372c)}.fb-badge--warning{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-badge--info{background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 12%,transparent);color:var(--fb-accent, #4f6ef7)}.fb-badge--unreachable,.fb-badge--dangling{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-node__outlets{display:flex;align-items:flex-end;justify-content:space-evenly;gap:4px;padding:0 8px 4px}.fb-node__outlets--labelled{padding-top:5px;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-outlet{display:flex;flex:1 1 0;flex-direction:column;align-items:center;gap:2px;min-width:0}.fb-outlet__label{max-width:100%;font-size:10px;line-height:13px;color:var(--fb-text-muted, #6b7086);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-connector{box-sizing:border-box;width:12px;height:12px;flex:0 0 auto;border:2px solid var(--fb-surface, #fff);border-radius:50%;background:var(--fb-connector, #98a2b3);cursor:crosshair;transition:transform .12s ease,box-shadow .12s ease}f-flow .fb-connector--out{position:relative;inset:auto;margin-bottom:-12px}.fb-connector--out:hover{transform:scale(1.2)}f-flow .fb-connector--in{position:absolute;inset:-2px auto auto 50%;width:24px;height:4px;border:0;border-radius:2px;transform:translate(-50%);background:var(--fb-border-strong, #cfd4de)}.fb-connector--out{--ff-connector-connected-color: var(--fb-connector, #98a2b3)}.fb-connector--Next,.fb-connector--Start,.fb-connector--LoopNext{--fb-connector: var(--fb-edge-next, #98a2b3)}.fb-connector--Rule,.fb-connector--WaitEvent{--fb-connector: var(--fb-edge-rule, #8b5cf6)}.fb-connector--Default,.fb-connector--LoopEnd{--fb-connector: var(--fb-edge-default, #06b6d4)}.fb-connector--Fault{--fb-connector: var(--fb-edge-fault, #dc2626)}.fb-connector--Timeout,.fb-connector--ScheduledPath{--fb-connector: var(--fb-edge-timeout, #f59e0b)}.fb-connector.f-connector-connectable{box-shadow:0 0 0 4px color-mix(in srgb,var(--fb-accent, #4f6ef7) 28%,transparent)}\n"] }]
-        }], propDecorators: { selectedName: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedName", required: false }] }], outline: [{ type: i0.Input, args: [{ isSignal: true, alias: "outline", required: false }] }], isEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditable", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], nodeOpened: [{ type: i0.Output, args: ["nodeOpened"] }], nodeRemoveRequested: [{ type: i0.Output, args: ["nodeRemoveRequested"] }], nodeDuplicateRequested: [{ type: i0.Output, args: ["nodeDuplicateRequested"] }], elementDropped: [{ type: i0.Output, args: ["elementDropped"] }], canvas: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FCanvasComponent), { isSignal: true }] }] } });
+            args: [{ selector: 'fb-flow-canvas', standalone: true, imports: [FFlowModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideFFlow(withA11y())], template: "<!--\r\n  Gerarchia obbligatoria: f-flow > f-canvas > fNode / f-connection.\r\n  I `@for` sono direttamente dentro <f-canvas>: nessun wrapper, quindi non serve\r\n  `ngProjectAs` (che sarebbe indispensabile con blocchi annidati).\r\n-->\r\n<f-flow\r\n  fDraggable\r\n  (fCreateConnection)=\"onCreateConnection($event)\"\r\n  (fReassignConnection)=\"onReassignConnection($event)\"\r\n  (fMoveNodes)=\"onMoveNodes($event)\"\r\n  (fSelectionChange)=\"onSelectionChange($event)\"\r\n  (fDeleteSelected)=\"onDeleteSelected($event)\"\r\n  (fCreateNode)=\"onCreateNode($event)\"\r\n  (fNodesRendered)=\"onNodesRendered()\"\r\n>\r\n  <!--\r\n    `#canvas` + `(fCanvasChange)`: il primo serve per chiamare `fitToScreen()`, il secondo per\r\n    sapere che l'utente ha mosso la vista. `[debounceTime]` non si imposta: l'evento serve solo\r\n    ad accendere un flag, non a ricalcolare niente.\r\n  -->\r\n  <f-canvas fZoom #canvas (fCanvasChange)=\"onCanvasChange()\">\r\n    <f-background>\r\n      <f-circle-pattern />\r\n    </f-background>\r\n\r\n    @for (edge of edges(); track edge.id) {\r\n      <f-connection\r\n        [fConnectionId]=\"edge.id\"\r\n        [fSourceId]=\"edge.sourceId\"\r\n        [fTargetId]=\"edge.targetId\"\r\n        fBehavior=\"floating\"\r\n        [fType]=\"edge.isGoTo ? 'segment' : 'bezier'\"\r\n        [class]=\"'fb-edge fb-edge--' + edge.kind + (edge.isGoTo ? ' fb-edge--goto' : '')\"\r\n      >\r\n        <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n        @if (edge.label) {\r\n          <div fConnectionContent class=\"fb-edge-label\">{{ edge.label }}</div>\r\n        }\r\n      </f-connection>\r\n    }\r\n\r\n    @for (node of nodes(); track node.id) {\r\n      <div\r\n        fNode\r\n        fDragHandle\r\n        [fNodeId]=\"node.id\"\r\n        [fNodePosition]=\"node.position\"\r\n        [class]=\"'fb-node ' + categoryClass(node) + ' ' + node.widthClass\"\r\n        [class.fb-node--start]=\"node.isStart\"\r\n        [class.fb-node--selected]=\"isSelected(node)\"\r\n        [class.fb-node--unreachable]=\"!node.isReachable\"\r\n        [class.fb-node--error]=\"node.severity === 'Error'\"\r\n        [class.fb-node--warning]=\"node.severity === 'Warning'\"\r\n        (dblclick)=\"onNodeDoubleClick(node.name)\"\r\n      >\r\n        <!--\r\n          Lo Start non ha ingresso: e' il punto di partenza (\u00A73.4).\r\n          `fConnectorConnectableSide` e' cio' che fa entrare l'arco dall'alto: senza, foblex\r\n          calcola il lato e un arco che scende dal node sopra potrebbe agganciarsi di fianco.\r\n        -->\r\n        @if (!node.isStart) {\r\n          <div\r\n            fConnector\r\n            fConnectorType=\"target\"\r\n            [fConnectorId]=\"targetIdOf(node)\"\r\n            [fConnectorConnectableSide]=\"sides.TOP\"\r\n            fConnectorMultiple=\"true\"\r\n            class=\"fb-connector fb-connector--in\"\r\n            title=\"Ingresso\"\r\n          ></div>\r\n        }\r\n\r\n        <div class=\"fb-node__head\">\r\n          <span class=\"fb-node__icon\" aria-hidden=\"true\">{{ node.icon }}</span>\r\n          <div class=\"fb-node__text\">\r\n            <span class=\"fb-node__title\" [title]=\"node.description || node.label\">{{ node.label }}</span>\r\n            <span class=\"fb-node__sub\">\r\n              {{ node.typeLabel }}\r\n              @if (node.subtitle) {\r\n                <span class=\"fb-node__sub-dot\">\u00B7</span>{{ node.subtitle }}\r\n              }\r\n            </span>\r\n          </div>\r\n          @if (node.hasAutomaticOutput) {\r\n            <!-- L'elemento espone il proprio risultato sotto il proprio nome (\u00A74.5). -->\r\n            <span class=\"fb-node__auto\" title=\"Espone un output automatico referenziabile come \u00AB{{ node.name }}\u00BB\">\r\n              \u0192\r\n            </span>\r\n          }\r\n          <!--\r\n            `fDragBlocker` impedisce che il pointerdown sul bottone diventi un trascinamento\r\n            del node: senza, aprire il dettaglio sposterebbe l'elemento di qualche pixel.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            fDragBlocker\r\n            class=\"fb-node__edit\"\r\n            [attr.aria-label]=\"'Apri il dettaglio di ' + node.label\"\r\n            title=\"Apri il dettaglio\"\r\n            (click)=\"onEditClick($event, node.name)\"\r\n          >\r\n            \u270E\r\n          </button>\r\n          @if (!node.isStart && isEditable()) {\r\n            <!--\r\n              Duplica: sta accanto a \u270E e non solo nell'inspector perche' e' il gesto con cui si\r\n              riusa un elemento gi\u00E0 configurato, e cercarlo dentro il form dell'elemento da\r\n              copiare e' il posto in cui non lo si cerca. Compare come \u00AB\u00D7\u00BB, sul solo node\r\n              selezionato: aggiunge un elemento al documento, quindi non deve trovarsi sotto il\r\n              puntatore di chi sta solo attraversando il grafo.\r\n            -->\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-node__duplicate\"\r\n              [attr.aria-label]=\"'Duplica ' + node.label\"\r\n              title=\"Duplica questo elemento (Ctrl+D)\"\r\n              (click)=\"onDuplicateClick($event, node.name)\"\r\n            >\r\n              \u29C9\r\n            </button>\r\n            <!--\r\n              Si mostra solo sul node **selezionato**, non al passaggio del mouse come \u270E:\r\n              cancellare non e' reversibile con un altro clic, e un comando distruttivo che\r\n              appare sotto il puntatore mentre si attraversa il grafo si preme per sbaglio.\r\n              Lo Start non lo espone: un flow senza ingresso non esisterebbe.\r\n            -->\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-node__remove\"\r\n              [attr.aria-label]=\"'Elimina ' + node.label\"\r\n              title=\"Elimina questo elemento (si annulla con \u21B6)\"\r\n              (click)=\"onRemoveClick($event, node.name)\"\r\n            >\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"fb-node__meta\">\r\n          @if (!node.isStart) {\r\n            <span class=\"fb-node__name\" [title]=\"'Nome tecnico: ' + node.name\">{{ node.name }}</span>\r\n          }\r\n          @if (!node.isReachable) {\r\n            <span class=\"fb-badge fb-badge--unreachable\" title=\"Nessun percorso raggiunge questo elemento dallo Start\">\r\n              scollegato\r\n            </span>\r\n          }\r\n          @if (node.issueCount > 0) {\r\n            <span\r\n              class=\"fb-badge\"\r\n              [class.fb-badge--error]=\"node.severity === 'Error'\"\r\n              [class.fb-badge--warning]=\"node.severity === 'Warning'\"\r\n              [class.fb-badge--info]=\"node.severity === 'Info'\"\r\n              [title]=\"node.issueCount + ' rilievi di validazione'\"\r\n            >\r\n              {{ node.issueCount }}\r\n            </span>\r\n          }\r\n          @if (node.danglingOutlets.length > 0) {\r\n            <span\r\n              class=\"fb-badge fb-badge--dangling\"\r\n              [title]=\"'Rami dichiarati senza destinazione: ' + danglingLabels(node)\"\r\n            >\r\n              ramo incompleto\r\n            </span>\r\n          }\r\n        </div>\r\n\r\n        <!--\r\n          Le uscite stanno sul bordo **inferiore**, una per ramo, nell'ordine in cui il modello\r\n          le dichiara: per una Decision e' l'ordine di valutazione delle regole, che e'\r\n          semantico (\u00A75.4), e da sinistra a destra si legge come la lista nell'inspector.\r\n          L'etichetta si mostra solo quando i rami sono piu' di uno: su un `next` unico\r\n          direbbe soltanto \u00ABSuccessivo\u00BB.\r\n        -->\r\n        <div class=\"fb-node__outlets\" [class.fb-node__outlets--labelled]=\"node.showsOutletLabels\">\r\n          @for (outlet of node.outlets; track outlet.key) {\r\n            <div class=\"fb-outlet\">\r\n              @if (node.showsOutletLabels) {\r\n                <span class=\"fb-outlet__label\" [title]=\"outlet.label\">{{ outlet.label }}</span>\r\n              }\r\n              <div\r\n                fConnector\r\n                fConnectorType=\"source\"\r\n                [fConnectorId]=\"connectorIdOf(node, outlet.key)\"\r\n                [fConnectorConnectableSide]=\"sides.BOTTOM\"\r\n                [class]=\"'fb-connector fb-connector--out fb-connector--' + outlet.kind\"\r\n                [title]=\"outlet.label\"\r\n              ></div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Anteprima dell'arco durante il trascinamento. -->\r\n    <f-connection-for-create fBehavior=\"floating\" fType=\"bezier\" class=\"fb-edge fb-edge--creating\">\r\n      <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n    </f-connection-for-create>\r\n\r\n    <f-selection-area />\r\n  </f-canvas>\r\n\r\n  <!--\r\n    Fuori da <f-canvas> come la minimappa: dentro, la trasformazione del canvas se lo\r\n    porterebbe via insieme ai node. `fDragBlocker` perche' il pointerdown non inizi una\r\n    panoramica invece di premere il bottone.\r\n  -->\r\n  <!--\r\n    Sempre nel DOM, nascosto con una classe e non con `@if`: dentro una proiezione di contenuto\r\n    un blocco di controllo e' una complicazione gratuita, e `visibility: hidden` lo toglie\r\n    anche dall'ordine di tabulazione. Il costo e' un bottone in piu' nel DOM, non un rischio.\r\n  -->\r\n  <button\r\n    type=\"button\"\r\n    fDragBlocker\r\n    class=\"fb-btn fb-viewport-reset\"\r\n    [class.fb-viewport-reset--hidden]=\"!hasMovedViewport()\"\r\n    title=\"Rimetti il flow interamente in vista, al centro\"\r\n    (click)=\"resetViewport()\"\r\n  >\r\n    <span class=\"fb-viewport-reset__icon\" aria-hidden=\"true\">\u2922</span>\r\n    Inquadra il flow\r\n  </button>\r\n\r\n  <f-minimap [fMinSize]=\"1200\" class=\"fb-minimap\" />\r\n</f-flow>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:var(--fb-canvas-bg, #f4f5f7)}f-flow{display:block;width:100%;height:100%}.fb-minimap{position:absolute;right:14px;bottom:14px;width:190px;height:130px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));overflow:hidden}.fb-viewport-reset{position:absolute;right:14px;bottom:152px;z-index:1;border-radius:var(--fb-radius-xs, 6px);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));font-size:11px;transition:opacity .15s ease,visibility .15s ease}.fb-viewport-reset--hidden{opacity:0;visibility:hidden}.fb-viewport-reset__icon{font-size:13px;line-height:1;color:var(--fb-text-muted, #667085)}.fb-node{position:absolute;display:flex;flex-direction:column;box-sizing:border-box;width:240px;padding:0;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-lg, 12px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));font:inherit;cursor:grab;-webkit-user-select:none;user-select:none;transition:box-shadow .12s ease,border-color .12s ease}.fb-node--outlets-3{width:304px}.fb-node--outlets-4{width:380px}.fb-node--outlets-5{width:456px}.fb-node--outlets-6{width:520px}.fb-node:hover{box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%))}.fb-node--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:0 0 0 3px color-mix(in srgb,var(--fb-accent, #4f6ef7) 22%,transparent)}.fb-node--unreachable{border-style:dashed;opacity:.8}.fb-node--error{border-color:var(--fb-error, #c9372c)}.fb-node--warning{border-color:var(--fb-warning, #b7791f)}.fb-node__head{display:flex;align-items:center;gap:8px;padding:10px 10px 6px 12px}.fb-node__icon{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:var(--fb-radius-sm, 8px);background:var(--fb-node-accent, #667085);color:#fff;font-size:14px;line-height:1}.cat-start{--fb-node-accent: #22a06b}.cat-screen{--fb-node-accent: #3b82f6}.cat-logic{--fb-node-accent: #8b5cf6}.cat-data{--fb-node-accent: #06b6d4}.cat-action{--fb-node-accent: #f59e0b}.cat-flow{--fb-node-accent: #14b8a6}.cat-other{--fb-node-accent: #667085}.fb-node__text{flex:1;min-width:0}.fb-node__title{display:block;font-size:13px;font-weight:600;line-height:17px;color:var(--fb-text, #1a1c23);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub{display:block;margin-top:1px;font-size:11px;line-height:14px;color:var(--fb-text-muted, #6b7086);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub-dot{margin:0 4px;color:var(--fb-text-subtle, #98a2b3)}.fb-node__auto{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--fb-accent, #4f6ef7);cursor:help}.fb-node__edit{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:12px;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease}.fb-node:hover .fb-node__edit,.fb-node--selected .fb-node__edit,.fb-node__edit:focus-visible{opacity:1}.fb-node__edit:hover{background:var(--fb-surface-alt, #f7f8fa);color:var(--fb-text, #1a1c23)}.fb-node__duplicate,.fb-node__remove{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:15px;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease,color .12s ease}.fb-node--selected .fb-node__duplicate,.fb-node--selected .fb-node__remove,.fb-node__duplicate:focus-visible,.fb-node__remove:focus-visible{opacity:1}.fb-node__remove:hover{background:color-mix(in srgb,var(--fb-error, #c9372c) 12%,transparent);color:var(--fb-error, #c9372c)}.fb-node__duplicate:hover{background:color-mix(in srgb,var(--fb-accent, #3b6ef2) 12%,transparent);color:var(--fb-accent, #3b6ef2)}.fb-node__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:14px;padding:0 12px 6px}.fb-node__name{flex:0 1 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--fb-text-subtle, #98a2b3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-badge{padding:1px 6px;border-radius:10px;background:var(--fb-badge-bg, #eef0f4);font-size:10px;font-weight:600;color:var(--fb-text-muted, #6b7086);white-space:nowrap;cursor:help}.fb-badge--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 14%,transparent);color:var(--fb-error, #c9372c)}.fb-badge--warning{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-badge--info{background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 12%,transparent);color:var(--fb-accent, #4f6ef7)}.fb-badge--unreachable,.fb-badge--dangling{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-node__outlets{display:flex;align-items:flex-end;justify-content:space-evenly;gap:4px;padding:0 8px 4px}.fb-node__outlets--labelled{padding-top:5px;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-outlet{display:flex;flex:1 1 0;flex-direction:column;align-items:center;gap:2px;min-width:0}.fb-outlet__label{max-width:100%;font-size:10px;line-height:13px;color:var(--fb-text-muted, #6b7086);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-connector{box-sizing:border-box;width:12px;height:12px;flex:0 0 auto;border:2px solid var(--fb-surface, #fff);border-radius:50%;background:var(--fb-connector, #98a2b3);cursor:crosshair;transition:transform .12s ease,box-shadow .12s ease}f-flow .fb-connector--out{position:relative;inset:auto;margin-bottom:-12px}.fb-connector--out:hover{transform:scale(1.2)}f-flow .fb-connector--in{position:absolute;inset:-2px auto auto 50%;width:24px;height:4px;border:0;border-radius:2px;transform:translate(-50%);background:var(--fb-border-strong, #cfd4de)}.fb-connector--out{--ff-connector-connected-color: var(--fb-connector, #98a2b3)}.fb-connector--Next,.fb-connector--Start,.fb-connector--LoopNext{--fb-connector: var(--fb-edge-next, #98a2b3)}.fb-connector--Rule,.fb-connector--WaitEvent{--fb-connector: var(--fb-edge-rule, #8b5cf6)}.fb-connector--Default,.fb-connector--LoopEnd{--fb-connector: var(--fb-edge-default, #06b6d4)}.fb-connector--Fault{--fb-connector: var(--fb-edge-fault, #dc2626)}.fb-connector--Timeout,.fb-connector--ScheduledPath{--fb-connector: var(--fb-edge-timeout, #f59e0b)}.fb-connector.f-connector-connectable{box-shadow:0 0 0 4px color-mix(in srgb,var(--fb-accent, #4f6ef7) 28%,transparent)}\n"] }]
+        }], propDecorators: { selectedName: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedName", required: false }] }], selectedNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNames", required: false }] }], outline: [{ type: i0.Input, args: [{ isSignal: true, alias: "outline", required: false }] }], isEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditable", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], nodeOpened: [{ type: i0.Output, args: ["nodeOpened"] }], nodeRemoveRequested: [{ type: i0.Output, args: ["nodeRemoveRequested"] }], nodeDuplicateRequested: [{ type: i0.Output, args: ["nodeDuplicateRequested"] }], elementDropped: [{ type: i0.Output, args: ["elementDropped"] }], canvas: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FCanvasComponent), { isSignal: true }] }] } });
 
 /**
  * La palette degli elementi — FRONTEND.md §3.2, §11 ("Aggiungere un elemento").
@@ -9499,7 +10036,7 @@ class DynamicScreenInspectorComponent extends NodeInspectorBase {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DynamicScreenInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: DynamicScreenInspectorComponent, isStandalone: true, selector: "fb-dynamic-screen-inspector", usesInheritance: true, ngImport: i0, template: "<div class=\"fb-scr\">\r\n  <!-- ============================================================ sinistra -->\r\n  <aside class=\"fb-scr__side\" aria-label=\"Componenti e campi\">\r\n    <div class=\"fb-scr__tabs\" role=\"tablist\">\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"fb-scr__tab\"\r\n        [class.fb-scr__tab--active]=\"paletteTab() === 'components'\"\r\n        [attr.aria-selected]=\"paletteTab() === 'components'\"\r\n        (click)=\"setPaletteTab('components')\"\r\n      >\r\n        Componenti\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"fb-scr__tab\"\r\n        [class.fb-scr__tab--active]=\"paletteTab() === 'fields'\"\r\n        [attr.aria-selected]=\"paletteTab() === 'fields'\"\r\n        (click)=\"setPaletteTab('fields')\"\r\n      >\r\n        Campi\r\n      </button>\r\n    </div>\r\n\r\n    @if (paletteTab() === 'components') {\r\n      @if (!dictionary.screenFieldTypes().length) {\r\n        <p class=\"fb-callout fb-callout--warn\">\r\n          Il dizionario <code>screenFieldTypes</code> non e\u2019 disponibile: senza i suoi flag l\u2019editor non\r\n          sa quali campi ammette ciascun tipo, e non li inventa.\r\n        </p>\r\n      }\r\n      <p class=\"fb-scr__side-hint\">Trascina sulla schermata, oppure clicca per aggiungere.</p>\r\n      <ul class=\"fb-scr__palette\">\r\n        @for (entry of dictionary.screenFieldTypes(); track entry.value) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-scr__chip\"\r\n              cdkDrag\r\n              [title]=\"entry.description || entry.label\"\r\n              (cdkDragMoved)=\"onPaletteDragMoved($event)\"\r\n              (cdkDragEnded)=\"onComponentDragEnded($event, entry.value)\"\r\n              (click)=\"addComponentAtSelection(entry.value)\"\r\n            >\r\n              <span class=\"fb-scr__chip-icon\" aria-hidden=\"true\">{{ iconOf(entry.value) }}</span>\r\n              <span class=\"fb-scr__chip-label\">{{ entry.label }}</span>\r\n            </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else {\r\n      <p class=\"fb-scr__side-hint\">\r\n        Un campo dell\u2019entita\u2019 porta con se\u2019 tipo, etichetta, obbligatorieta\u2019 e opzioni: arrivano dallo\r\n        schema dati, qui non si ridichiarano.\r\n      </p>\r\n      <!-- Il catalogo non e' un dizionario chiuso: si sceglie o si scrive, come ovunque si\r\n           indichi un'entita' (vedi `object-picker`). -->\r\n      <fb-object-picker\r\n        [value]=\"fieldsObject()\"\r\n        label=\"Entita\u2019\"\r\n        placeholder=\"Scrivi o scegli un\u2019entita\u2019\"\r\n        (valueChange)=\"setFieldsObject($event)\"\r\n      />\r\n      @if (fieldsObject() && !fieldsOfObject().length) {\r\n        <p class=\"fb-scr__side-empty\">\r\n          Nessun campo dichiarato per questa entita\u2019: il catalogo non li espone, non significa che non\r\n          ci siano.\r\n        </p>\r\n      }\r\n      <ul class=\"fb-scr__palette\">\r\n        @for (field of fieldsOfObject(); track $index) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-scr__chip\"\r\n              cdkDrag\r\n              [title]=\"field.name + (field.dataType ? ' \u00B7 ' + field.dataType : '')\"\r\n              (cdkDragMoved)=\"onPaletteDragMoved($event)\"\r\n              (cdkDragEnded)=\"onObjectFieldDragEnded($event, field)\"\r\n              (click)=\"addObjectFieldAtSelection(field)\"\r\n            >\r\n              <span class=\"fb-scr__chip-icon\" aria-hidden=\"true\">\u2317</span>\r\n              <span class=\"fb-scr__chip-label\">\r\n                {{ field.label || field.name }}\r\n                @if (field.isRequired) {\r\n                  <span class=\"fb-scr__req\">*</span>\r\n                }\r\n                <small>{{ field.dataType }}</small>\r\n              </span>\r\n            </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n  </aside>\r\n\r\n  <!-- ============================================================== centro -->\r\n  <!-- Cliccare fuori da un campo riporta a destra le proprieta' della schermata. -->\r\n  <section class=\"fb-scr__canvas\" aria-label=\"Anteprima della schermata\" (click)=\"selectScreen()\">\r\n    <div class=\"fb-scr__frame\">\r\n      @if (showHeader()) {\r\n        <header class=\"fb-scr__frame-head\">\r\n          {{ $any(node()).label || name() }}\r\n          @if (screen().helpText) {\r\n            <span class=\"fb-scr__help\" [title]=\"screen().helpText || ''\">?</span>\r\n          }\r\n        </header>\r\n      }\r\n\r\n      <div\r\n        class=\"fb-scr__body\"\r\n        [attr.data-drop]=\"''\"\r\n        data-axis=\"column\"\r\n        [class.fb-scr__body--empty]=\"isEmpty()\"\r\n      >\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"listTpl\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: screen().fields || [], parent: [], axis: 'column' }\"\r\n        />\r\n      </div>\r\n\r\n      <!--\r\n        La barra di inserimento e' un **velo** sopra l'anteprima, non un figlio del contenitore di\r\n        rilascio: dentro la griglia occupava una riga intera e spostava in basso proprio la sezione\r\n        che si stava puntando, che allora usciva da sotto il puntatore e il bersaglio oscillava.\r\n      -->\r\n      @if (dropMarker(); as bar) {\r\n        <div\r\n          class=\"fb-scr__marker\"\r\n          [style.left.px]=\"bar.left\"\r\n          [style.top.px]=\"bar.top\"\r\n          [style.width.px]=\"bar.width\"\r\n          [style.height.px]=\"bar.height\"\r\n        ></div>\r\n      }\r\n\r\n      @if (showFooter()) {\r\n        <footer class=\"fb-scr__frame-foot\">\r\n          @if (allowPause()) {\r\n            <span class=\"fb-scr__btn fb-scr__btn--ghost\">{{ screen().pauseButtonLabel || 'Pausa' }}</span>\r\n          }\r\n          <span class=\"fb-scr__spacer\"></span>\r\n          @if (allowBack()) {\r\n            <span class=\"fb-scr__btn fb-scr__btn--ghost\">{{ screen().backButtonLabel || 'Indietro' }}</span>\r\n          }\r\n          <span class=\"fb-scr__btn fb-scr__btn--primary\">\r\n            {{ screen().nextOrFinishButtonLabel || (allowFinish() ? 'Fine' : 'Avanti') }}\r\n          </span>\r\n        </footer>\r\n      }\r\n    </div>\r\n\r\n    @if (isEmpty()) {\r\n      <p class=\"fb-callout fb-callout--warn fb-scr__canvas-note\">\r\n        La schermata non ha campi: non c\u2019e\u2019 niente da mostrare all\u2019utente (SCREEN_WITHOUT_FIELDS).\r\n      </p>\r\n    }\r\n  </section>\r\n\r\n  <!-- ============================================================== destra -->\r\n  <aside class=\"fb-scr__props\" aria-label=\"Proprieta\u2019\">\r\n    @if (!selectedField()) {\r\n      <!-- ------------------------------------------------ proprieta' della schermata -->\r\n      <header class=\"fb-scr__props-head\">\r\n        <h3 class=\"fb-scr__props-title\">Schermata</h3>\r\n      </header>\r\n      <p class=\"fb-scr__side-hint\">Seleziona un campo nell\u2019anteprima per configurarlo.</p>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Testo di aiuto</label>\r\n        <textarea\r\n          class=\"fb-textarea\"\r\n          [value]=\"screen().helpText || ''\"\r\n          (input)=\"setScreenText('helpText', $any($event.target).value)\"\r\n        ></textarea>\r\n      </div>\r\n\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Navigazione</legend>\r\n        <p class=\"fb-section__note\">\r\n          Questi flag sono un\u2019intenzione, non la verita\u2019 finale: a runtime il motore comunica\r\n          <code>canGoBack</code>, <code>canFinish</code> e <code>canPause</code> nella richiesta della\r\n          schermata.\r\n        </p>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"allowBack()\" (change)=\"setScreenFlag('allowBack', $any($event.target).checked)\" />\r\n          Consenti \u00ABindietro\u00BB\r\n        </label>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"allowFinish()\" (change)=\"setScreenFlag('allowFinish', $any($event.target).checked)\" />\r\n          Consenti \u00ABfine\u00BB\r\n        </label>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"allowPause()\" (change)=\"setScreenFlag('allowPause', $any($event.target).checked)\" />\r\n          Consenti \u00ABpausa\u00BB\r\n        </label>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"showHeader()\" (change)=\"setScreenFlag('showHeader', $any($event.target).checked)\" />\r\n          Mostra l\u2019intestazione\r\n        </label>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"showFooter()\" (change)=\"setScreenFlag('showFooter', $any($event.target).checked)\" />\r\n          Mostra il piede\r\n        </label>\r\n\r\n        @if (allowPause()) {\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Testo mostrato alla pausa</label>\r\n            <input\r\n              class=\"fb-input\"\r\n              [value]=\"screen().pausedText || ''\"\r\n              (input)=\"setScreenText('pausedText', $any($event.target).value)\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        @if (isDeadEnd()) {\r\n          <p class=\"fb-callout fb-callout--error\">\r\n            Questa schermata non ha una destinazione e non consente \u00ABfine\u00BB: e\u2019 un vicolo cieco, e\r\n            l\u2019utente resterebbe bloccato (SCREEN_DEAD_END).\r\n          </p>\r\n        }\r\n      </fieldset>\r\n\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Pulsanti</legend>\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">Etichetta \u00ABindietro\u00BB</label>\r\n          <input\r\n            class=\"fb-input\"\r\n            [value]=\"screen().backButtonLabel || ''\"\r\n            (input)=\"setScreenText('backButtonLabel', $any($event.target).value)\"\r\n          />\r\n        </div>\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">Etichetta \u00ABavanti / fine\u00BB</label>\r\n          <input\r\n            class=\"fb-input\"\r\n            [value]=\"screen().nextOrFinishButtonLabel || ''\"\r\n            (input)=\"setScreenText('nextOrFinishButtonLabel', $any($event.target).value)\"\r\n          />\r\n        </div>\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">Etichetta \u00ABpausa\u00BB</label>\r\n          <input\r\n            class=\"fb-input\"\r\n            [value]=\"screen().pauseButtonLabel || ''\"\r\n            (input)=\"setScreenText('pauseButtonLabel', $any($event.target).value)\"\r\n          />\r\n        </div>\r\n      </fieldset>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Stage mostrato nell\u2019avanzamento</label>\r\n        <fb-name-picker\r\n          [value]=\"screen().stageReference\"\r\n          [options]=\"stageOptions()\"\r\n          label=\"Stage\"\r\n          placeholder=\"Scegli uno stage\"\r\n          unknownMessage=\"Questo stage non e\u2019 dichiarato dal flow.\"\r\n          emptyMessage=\"Il flow non dichiara stage: creali nel pannello delle risorse.\"\r\n          (valueChange)=\"setScreenText('stageReference', $event ?? '')\"\r\n        />\r\n      </div>\r\n\r\n      <!--\r\n        Screen action (\u00A75.2). Due elenchi e non uno perche' il contratto li separa: piu' trigger\r\n        possono invocare la stessa action, quindi \u00ABchi la chiama\u00BB non e' una sua proprieta'. Le\r\n        action si aprono una alla volta: i cataloghi dipendono da tipo e nome, e tenerne N in volo\r\n        sarebbe N volte la corsa fra risposte.\r\n      -->\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Azioni della schermata</legend>\r\n        <p class=\"fb-section__note\">\r\n          Un campo che l\u2019utente compila puo\u2019 innescare un\u2019action i cui risultati finiscono negli\r\n          <strong>altri campi di questa schermata</strong>: e\u2019 il caso \u00ABscrivi il codice fiscale e nome\r\n          e cognome compaiono da soli\u00BB. L\u2019alternativa sarebbe spezzare la schermata in due con un\r\n          elemento Action in mezzo.\r\n        </p>\r\n\r\n        <div class=\"fb-list\">\r\n          @for (action of screenActions(); track $index) {\r\n            <div class=\"fb-list__item\">\r\n              <div class=\"fb-list__header\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--ghost\"\r\n                  [attr.aria-expanded]=\"selectedActionIndex() === $index\"\r\n                  (click)=\"selectAction(selectedActionIndex() === $index ? null : $index)\"\r\n                >\r\n                  {{ selectedActionIndex() === $index ? '\u25BE' : '\u25B8' }}\r\n                  {{ action.name || '(senza nome)' }}\r\n                </button>\r\n                <span class=\"fb-list__spacer\"></span>\r\n                <span class=\"fb-scr__side-hint\">{{ action.actionName || 'action non scelta' }}</span>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--ghost fb-btn--icon\"\r\n                  aria-label=\"Rimuovi l\u2019action\"\r\n                  (click)=\"removeScreenAction($index)\"\r\n                >\r\n                  \u00D7\r\n                </button>\r\n              </div>\r\n\r\n              @if (actionLosesResult(action)) {\r\n                <p class=\"fb-callout fb-callout--warn\">\r\n                  Questa action viene invocata ma il suo risultato si perde: aggiungi un parametro di\r\n                  uscita, oppure accendi l\u2019output automatico (SCREEN_ACTION_WITHOUT_OUTPUTS).\r\n                </p>\r\n              }\r\n              @if (actionHasNoTrigger(action)) {\r\n                <p class=\"fb-callout fb-callout--warn\">\r\n                  Nessun trigger la invoca: senza, non girera\u2019 mai.\r\n                </p>\r\n              }\r\n\r\n              @if (selectedActionIndex() === $index) {\r\n                <div class=\"fb-field\">\r\n                  <label class=\"fb-field__label fb-field__label--required\">Nome</label>\r\n                  <input\r\n                    class=\"fb-input fb-input--mono\"\r\n                    [value]=\"action.name || ''\"\r\n                    (change)=\"setActionName($index, $any($event.target).value)\"\r\n                  />\r\n                  @if (actionNameError(action); as error) {\r\n                    <p class=\"fb-field__error\">{{ error }}</p>\r\n                  }\r\n                  <p class=\"fb-field__hint\">\r\n                    E\u2019 il nome con cui la citano i trigger, e vive nello spazio dei nomi del flow. Con\r\n                    l\u2019output automatico e\u2019 anche la radice del riferimento:\r\n                    <code>{{ action.name || 'Cerca' }}.NomeOutput</code>.\r\n                  </p>\r\n                </div>\r\n\r\n                <div class=\"fb-field\">\r\n                  <label class=\"fb-field__label\">Tipo di action</label>\r\n                  <fb-name-picker\r\n                    [value]=\"action.actionType\"\r\n                    [options]=\"actionTypeOptions()\"\r\n                    label=\"Tipo di action\"\r\n                    placeholder=\"Scrivi o scegli un tipo\"\r\n                    [isMono]=\"false\"\r\n                    unknownMessage=\"Questo tipo di action non e\u2019 fra quelli dichiarati dal sistema ospite.\"\r\n                    emptyMessage=\"Catalogo dei tipi di action non disponibile: puoi scrivere il nome a mano.\"\r\n                    (valueChange)=\"setActionType($index, $event ?? '')\"\r\n                  />\r\n                </div>\r\n\r\n                <div class=\"fb-field\">\r\n                  <label class=\"fb-field__label fb-field__label--required\">Action</label>\r\n                  <fb-name-picker\r\n                    [value]=\"action.actionName\"\r\n                    [options]=\"actionOptions()\"\r\n                    label=\"Action\"\r\n                    placeholder=\"Scrivi o scegli un\u2019action\"\r\n                    [isMono]=\"false\"\r\n                    unknownMessage=\"Questa action non esiste nel catalogo del tipo scelto: e\u2019 ACTION_UNKNOWN.\"\r\n                    unknownSeverity=\"error\"\r\n                    emptyMessage=\"Scegli prima il tipo di action, oppure scrivi il nome a mano.\"\r\n                    (valueChange)=\"setActionTarget($index, $event ?? '')\"\r\n                  />\r\n                  @if (!action.actionName) {\r\n                    <p class=\"fb-field__error\">Obbligatoria: senza, ACTION_NAME_MISSING.</p>\r\n                  }\r\n                </div>\r\n\r\n                <label class=\"fb-check\">\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    [checked]=\"action.storeOutputAutomatically === true\"\r\n                    (change)=\"setActionStoreOutput($index, $any($event.target).checked)\"\r\n                  />\r\n                  Output automatico\r\n                </label>\r\n                <p class=\"fb-field__hint\">\r\n                  L\u2019output automatico rende il risultato leggibile come\r\n                  <code>{{ action.name || 'Cerca' }}.NomeOutput</code>, ma\r\n                  <strong>non scrive in nessun campo</strong>: e\u2019 la forma da usare quando il risultato\r\n                  serve a una condizione, non a precompilare.\r\n                </p>\r\n\r\n                <!--\r\n                  L'unico posto in cui un campo di schermata e' una destinazione (\u00A75.2):\r\n                  `POST /flows/references/writable` continua a escluderlo, e un Assignment che ci\r\n                  scrive resta TARGET_NOT_WRITABLE.\r\n                -->\r\n                <fb-parameter-editor\r\n                  [holder]=\"action\"\r\n                  [catalogParameters]=\"actionParameterCatalog()\"\r\n                  [showOutputs]=\"action.storeOutputAutomatically !== true\"\r\n                  outputTitle=\"Campi da riempire\"\r\n                  [extraTargets]=\"screenFieldTargets()\"\r\n                  [outputsDisabledReason]=\"\r\n                    action.storeOutputAutomatically === true\r\n                      ? 'Con l\u2019output automatico il risultato non viene scritto nei campi.'\r\n                      : null\r\n                  \"\r\n                  (changed)=\"onActionParametersChanged($index, $event)\"\r\n                />\r\n              }\r\n            </div>\r\n          } @empty {\r\n            <p class=\"fb-empty\">Nessuna action: i campi di questa schermata li compila solo l\u2019utente.</p>\r\n          }\r\n        </div>\r\n\r\n        <button type=\"button\" class=\"fb-btn\" (click)=\"addScreenAction()\">Aggiungi action</button>\r\n      </fieldset>\r\n\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Trigger</legend>\r\n        <p class=\"fb-section__note\">\r\n          Quale campo invoca quale action. Senza condizioni l\u2019action gira a ogni cambio del campo.\r\n        </p>\r\n\r\n        <div class=\"fb-list\">\r\n          @for (trigger of screenTriggers(); track $index) {\r\n            <div class=\"fb-list__item\">\r\n              <div class=\"fb-list__header\">\r\n                <span class=\"fb-list__index\">{{ $index + 1 }}</span>\r\n                <span class=\"fb-list__spacer\"></span>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--ghost fb-btn--icon\"\r\n                  aria-label=\"Rimuovi il trigger\"\r\n                  (click)=\"removeScreenTrigger($index)\"\r\n                >\r\n                  \u00D7\r\n                </button>\r\n              </div>\r\n\r\n              <div class=\"fb-field\">\r\n                <label class=\"fb-field__label fb-field__label--required\">Action da invocare</label>\r\n                <fb-name-picker\r\n                  [value]=\"trigger.screenActionName\"\r\n                  [options]=\"screenActionOptions()\"\r\n                  label=\"Action della schermata\"\r\n                  placeholder=\"Scegli un\u2019action\"\r\n                  unknownMessage=\"Questa schermata non dichiara un\u2019action con questo nome: e\u2019 SCREEN_ACTION_UNKNOWN.\"\r\n                  unknownSeverity=\"error\"\r\n                  emptyMessage=\"Aggiungi prima un\u2019action qui sopra.\"\r\n                  (valueChange)=\"setTriggerProperty($index, 'screenActionName', $event ?? '')\"\r\n                />\r\n              </div>\r\n\r\n              <div class=\"fb-field\">\r\n                <label class=\"fb-field__label\">Campo che la innesca</label>\r\n                <!-- I campi di **questa** schermata, non i riferimenti in generale (\u00A75.2). -->\r\n                <fb-name-picker\r\n                  [value]=\"trigger.triggerFieldName\"\r\n                  [options]=\"triggerFieldOptions()\"\r\n                  label=\"Campo della schermata\"\r\n                  placeholder=\"Scegli un campo\"\r\n                  unknownMessage=\"Questo non e\u2019 un campo di questa schermata: e\u2019 SCREEN_TRIGGER_FIELD_UNKNOWN.\"\r\n                  unknownSeverity=\"error\"\r\n                  emptyMessage=\"La schermata non ha ancora campi che raccolgono un valore.\"\r\n                  (valueChange)=\"setTriggerProperty($index, 'triggerFieldName', $event ?? '')\"\r\n                />\r\n              </div>\r\n\r\n              <div class=\"fb-field\">\r\n                <label class=\"fb-field__label\">All\u2019arrivo sulla schermata</label>\r\n                <select\r\n                  class=\"fb-select\"\r\n                  [fbValue]=\"trigger.initBehavior || ''\"\r\n                  (change)=\"setTriggerProperty($index, 'initBehavior', $any($event.target).value)\"\r\n                >\r\n                  <option value=\"\">\u2014 non invocare \u2014</option>\r\n                  <option value=\"runOnLoad\">Invoca al caricamento (runOnLoad)</option>\r\n                </select>\r\n                @if (triggerInitIsUnknown(trigger)) {\r\n                  <p class=\"fb-field__error\">\r\n                    \u00AB{{ trigger.initBehavior }}\u00BB non e\u2019 ammesso: l\u2019unico valore e\u2019 <code>runOnLoad</code>\r\n                    (SCREEN_TRIGGER_INIT_BEHAVIOR_UNKNOWN).\r\n                  </p>\r\n                }\r\n              </div>\r\n\r\n              @if (triggerHasNoCause(trigger)) {\r\n                <p class=\"fb-callout fb-callout--warn\">\r\n                  Senza un campo che la innesca e senza l\u2019invocazione al caricamento, questo trigger non\r\n                  scattera\u2019 mai (SCREEN_TRIGGER_WITHOUT_CAUSE).\r\n                </p>\r\n              }\r\n\r\n              <fb-condition-editor\r\n                [holder]=\"triggerConditions(trigger)\"\r\n                title=\"Invoca l\u2019action quando\"\r\n                [allowFormula]=\"false\"\r\n                [issuePath]=\"'triggers[' + $index + ']'\"\r\n                (changed)=\"onTriggerConditionsChanged($index, $event)\"\r\n              />\r\n            </div>\r\n          } @empty {\r\n            <p class=\"fb-empty\">Nessun trigger: le action dichiarate non verranno invocate.</p>\r\n          }\r\n        </div>\r\n\r\n        <button type=\"button\" class=\"fb-btn\" (click)=\"addScreenTrigger()\">Aggiungi trigger</button>\r\n      </fieldset>\r\n    } @else {\r\n      <!-- ---------------------------------------------------- proprieta' del campo -->\r\n      <header class=\"fb-scr__props-head\">\r\n        <h3 class=\"fb-scr__props-title\">{{ captionOf(selectedField()!) }}</h3>\r\n        <div class=\"fb-scr__props-actions\">\r\n          <button type=\"button\" class=\"fb-btn fb-btn--sm\" title=\"Sposta su\" (click)=\"moveSelected(-1)\">\u2191</button>\r\n          <button type=\"button\" class=\"fb-btn fb-btn--sm\" title=\"Sposta giu\u2019\" (click)=\"moveSelected(1)\">\u2193</button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-btn fb-btn--sm\"\r\n            title=\"Porta fuori dal contenitore\"\r\n            [disabled]=\"!canOutdent()\"\r\n            (click)=\"outdentSelected()\"\r\n          >\r\n            \u21E4\r\n          </button>\r\n          <button type=\"button\" class=\"fb-btn fb-btn--sm\" title=\"Duplica\" (click)=\"duplicateSelected()\">\u29C9</button>\r\n          <button type=\"button\" class=\"fb-btn fb-btn--danger fb-btn--sm\" title=\"Elimina\" (click)=\"removeSelected()\">\r\n            \u00D7\r\n          </button>\r\n        </div>\r\n      </header>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label fb-field__label--required\">Tipo</label>\r\n        <select\r\n          class=\"fb-select\"\r\n          [fbValue]=\"selectedField()!.fieldType || ''\"\r\n          (change)=\"setFieldType($any($event.target).value)\"\r\n        >\r\n          <option value=\"\">\u2014 scegli \u2014</option>\r\n          @for (entry of dictionary.screenFieldTypes(); track entry.value) {\r\n            <option [value]=\"entry.value\">{{ entry.label }}</option>\r\n          }\r\n        </select>\r\n        @if (!selectedField()!.fieldType) {\r\n          <p class=\"fb-field__error\">Il tipo e\u2019 obbligatorio: senza, SCREEN_FIELD_TYPE_MISSING.</p>\r\n        } @else if (isUnknownType(selectedField())) {\r\n          <p class=\"fb-field__hint fb-field__hint--warn\">\r\n            Questo tipo non e\u2019 nel dizionario: l\u2019editor non sa quali campi ammetta e mostra solo i comuni.\r\n          </p>\r\n        } @else if (selectedType()?.description) {\r\n          <p class=\"fb-field__hint\">{{ selectedType()?.description }}</p>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Nome</label>\r\n        <!-- Sul `change` e non sull\u2019`input`: la rinomina riscrive i riferimenti nel documento,\r\n             e farlo a ogni tasto significherebbe riscriverlo per ogni lettera. -->\r\n        <input\r\n          class=\"fb-input fb-input--mono\"\r\n          [value]=\"selectedField()!.name || ''\"\r\n          (change)=\"setFieldName($any($event.target).value)\"\r\n        />\r\n        @if (selectedIsResource()) {\r\n          <p class=\"fb-field__hint\">\r\n            Questo campo e\u2019 una <strong>risorsa</strong>: lo referenzi come\r\n            <code>{{ selectedField()!.name || 'Nome' }}</code> in condizioni, formule e parametri. \u00C8 di\r\n            sola lettura per il flow \u2014 un Assignment che ci scrive e\u2019 TARGET_NOT_WRITABLE.\r\n          </p>\r\n        }\r\n      </div>\r\n\r\n      @if (!selectedType()?.isContainer && selectedField()!.fieldType !== 'ComponentInstance') {\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">\r\n            {{ selectedField()!.fieldType === 'DisplayText' ? 'Testo' : 'Etichetta' }}\r\n          </label>\r\n          <textarea\r\n            class=\"fb-textarea\"\r\n            [value]=\"selectedField()!.fieldText || ''\"\r\n            (input)=\"setFieldProperty('fieldText', $any($event.target).value)\"\r\n          ></textarea>\r\n          <p class=\"fb-field__hint\">Supporta i merge field <code>&#123;!Riferimento&#125;</code>.</p>\r\n        </div>\r\n      } @else if (selectedType()?.isContainer) {\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">Intestazione</label>\r\n          <input\r\n            class=\"fb-input\"\r\n            [value]=\"selectedField()!.fieldText || ''\"\r\n            (input)=\"setFieldProperty('fieldText', $any($event.target).value)\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Testo di aiuto</label>\r\n        <input\r\n          class=\"fb-input\"\r\n          [value]=\"selectedField()!.helpText || ''\"\r\n          (input)=\"setFieldProperty('helpText', $any($event.target).value)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Larghezza</label>\r\n        <div class=\"fb-scr__width\">\r\n          <input\r\n            type=\"range\"\r\n            min=\"1\"\r\n            max=\"12\"\r\n            step=\"1\"\r\n            [value]=\"widthOf(selectedField()!)\"\r\n            (input)=\"setNumberProperty('width', $any($event.target).value)\"\r\n          />\r\n          <span class=\"fb-scr__width-value\">{{ widthOf(selectedField()!) }}/12</span>\r\n        </div>\r\n        <p class=\"fb-field__hint\">\r\n          Colonne della griglia della schermata. \u00C8 un\u2019indicazione: il frontend puo\u2019 ignorarla.\r\n        </p>\r\n      </div>\r\n\r\n      <!-- ------------------------------------------------ campi che raccolgono un valore -->\r\n      @if (selectedType()?.storesValue) {\r\n        <fieldset class=\"fb-section\">\r\n          <legend class=\"fb-section__title\">Valore</legend>\r\n\r\n          @if (selectedField()!.fieldType !== 'ObjectProvided') {\r\n            <div class=\"fb-field\">\r\n              <label\r\n                class=\"fb-field__label\"\r\n                [class.fb-field__label--required]=\"!!selectedType()?.requiresDataType\"\r\n              >\r\n                Tipo di dato\r\n              </label>\r\n              <select\r\n                class=\"fb-select\"\r\n                [fbValue]=\"selectedField()!.dataType || ''\"\r\n                (change)=\"setFieldProperty('dataType', $any($event.target).value)\"\r\n              >\r\n                <option value=\"\">\u2014 scegli \u2014</option>\r\n                @for (entry of dictionary.dataTypes(); track entry.value) {\r\n                  <option [value]=\"entry.value\">{{ entry.label }}</option>\r\n                }\r\n              </select>\r\n              @if (selectedType()?.requiresDataType && !selectedField()!.dataType) {\r\n                <p class=\"fb-field__error\">Obbligatorio per questo tipo di campo (DATA_TYPE_MISSING).</p>\r\n              }\r\n              @if (selectedType()?.isCollection) {\r\n                <p class=\"fb-field__hint\">\r\n                  Il valore raccolto e\u2019 una <strong>collection</strong>, non una stringa con i valori\r\n                  separati: nelle condizioni si usano gli operatori di collection.\r\n                </p>\r\n              }\r\n            </div>\r\n\r\n            @if (requiresObjectType()) {\r\n              <div class=\"fb-field\">\r\n                <label class=\"fb-field__label\" [class.fb-field__label--required]=\"objectTypeIsStructure()\">\r\n                  {{\r\n                    objectTypeIsStructure()\r\n                      ? 'Classe'\r\n                      : selectedField()!.dataType === 'Enum'\r\n                        ? 'Tipo di enumerazione'\r\n                        : 'Oggetto'\r\n                  }}\r\n                </label>\r\n                @if (selectedField()!.dataType === 'Enum') {\r\n                  <!-- Dizionario chiuso: si sceglie, non si scrive. -->\r\n                  <select\r\n                    class=\"fb-select\"\r\n                    [fbValue]=\"selectedField()!.objectType || ''\"\r\n                    (change)=\"setFieldProperty('objectType', $any($event.target).value)\"\r\n                  >\r\n                    <option value=\"\">\u2014 scegli \u2014</option>\r\n                    @for (entry of enumOptions(); track entry.name) {\r\n                      <option [value]=\"entry.name\">{{ entry.label || entry.name }}</option>\r\n                    }\r\n                  </select>\r\n                  @if (!selectedField()!.objectType) {\r\n                    <p class=\"fb-field__hint fb-field__hint--warn\">\r\n                      Senza il tipo concreto l\u2019editor non puo\u2019 proporre i valori dell\u2019enumerazione.\r\n                    </p>\r\n                  }\r\n                } @else if (objectTypeIsStructure()) {\r\n                  <fb-structure-picker\r\n                    [value]=\"selectedField()!.objectType\"\r\n                    label=\"Classe\"\r\n                    (valueChange)=\"setFieldProperty('objectType', $event ?? '')\"\r\n                  />\r\n                  @if (!selectedField()!.objectType) {\r\n                    <p class=\"fb-field__error\">\r\n                      La classe e\u2019 obbligatoria: senza, il runtime non ha nulla da istanziare\r\n                      (OBJECT_TYPE_MISSING).\r\n                    </p>\r\n                  }\r\n                } @else {\r\n                  <fb-object-picker\r\n                    [value]=\"selectedField()!.objectType\"\r\n                    label=\"Oggetto\"\r\n                    (valueChange)=\"setFieldProperty('objectType', $event ?? '')\"\r\n                  />\r\n                }\r\n              </div>\r\n            }\r\n          } @else {\r\n            <div class=\"fb-field\">\r\n              <label class=\"fb-field__label fb-field__label--required\">Campo dell\u2019entita\u2019</label>\r\n              <p class=\"fb-field__hint\">\r\n                Tipo, label, obbligatorieta\u2019, scala e \u2014 se il campo e\u2019 una picklist \u2014 le opzioni arrivano\r\n                dallo schema dati: qui non si ridichiarano.\r\n              </p>\r\n              <fb-object-picker\r\n                [value]=\"providedObject() || undefined\"\r\n                label=\"Oggetto\"\r\n                (valueChange)=\"setProvidedObject($event)\"\r\n              />\r\n              <fb-field-picker\r\n                [value]=\"providedField() || undefined\"\r\n                [object]=\"providedObject() || undefined\"\r\n                label=\"Campo\"\r\n                (valueChange)=\"setProvidedField($event)\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          <label class=\"fb-check\">\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"selectedIsRequired()\"\r\n              (change)=\"setRequired($any($event.target).checked)\"\r\n            />\r\n            Obbligatorio\r\n          </label>\r\n          <label class=\"fb-check\">\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"selectedIsEditable()\"\r\n              (change)=\"setEditable($any($event.target).checked)\"\r\n            />\r\n            Modificabile\r\n          </label>\r\n          @if (!selectedIsEditable()) {\r\n            <p class=\"fb-field__hint\">\r\n              A <code>false</code> il runtime <strong>ignora</strong> cio\u2019 che il client rimanda indietro:\r\n              e\u2019 l\u2019unico modo di rendere un campo davvero di sola lettura.\r\n            </p>\r\n          }\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Valore di default</label>\r\n            <fb-value-editor\r\n              [value]=\"selectedField()!.defaultValue\"\r\n              [dataType]=\"selectedField()!.dataType\"\r\n              [objectType]=\"selectedField()!.objectType\"\r\n              [isCollection]=\"selectedType()?.isCollection\"\r\n              label=\"Valore di default\"\r\n              (valueChange)=\"setDefaultValue($event)\"\r\n            />\r\n          </div>\r\n\r\n          @if (scaleApplies()) {\r\n            <div class=\"fb-field\">\r\n              <label class=\"fb-field__label\">Decimali</label>\r\n              <input\r\n                class=\"fb-input\"\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [value]=\"selectedField()!.scale ?? ''\"\r\n                (change)=\"setNumberProperty('scale', $any($event.target).value)\"\r\n              />\r\n            </div>\r\n          } @else if (selectedField()!.scale !== undefined) {\r\n            <p class=\"fb-field__hint fb-field__hint--warn\">\r\n              <code>scale</code> su un campo non numerico e\u2019 SCALE_NOT_APPLICABLE.\r\n            </p>\r\n          }\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Lunghezza massima</label>\r\n            <input\r\n              class=\"fb-input\"\r\n              type=\"number\"\r\n              min=\"1\"\r\n              [value]=\"selectedField()!.maxLength ?? ''\"\r\n              (change)=\"setNumberProperty('maxLength', $any($event.target).value)\"\r\n            />\r\n            <p class=\"fb-field__hint\">Verificata anche dal runtime (TOO_LONG).</p>\r\n          </div>\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Tornando sulla schermata</label>\r\n            <select\r\n              class=\"fb-select\"\r\n              [fbValue]=\"selectedField()!.inputsOnNextNavToAssocScrn || ''\"\r\n              (change)=\"setFieldProperty('inputsOnNextNavToAssocScrn', $any($event.target).value)\"\r\n            >\r\n              <option value=\"\">Predefinito (mantieni i valori)</option>\r\n              @for (entry of dictionary.screenFieldInputsRevisited(); track entry.value) {\r\n                <option [value]=\"entry.value\">{{ entry.label }}</option>\r\n              }\r\n            </select>\r\n          </div>\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Regola di validazione</label>\r\n            <!--\r\n              `commitOn=\"change\"`: qui mutare il documento ridisegna l'anteprima, e riscriverla a\r\n              ogni tasto costa. La verifica parte lo stesso mentre si digita (\u00A76.3).\r\n            -->\r\n            <fb-formula-editor\r\n              [expression]=\"selectedField()!.validationRule?.formulaExpression || ''\"\r\n              usage=\"ValidationRule\"\r\n              expectedDataType=\"Boolean\"\r\n              commitOn=\"change\"\r\n              [rows]=\"2\"\r\n              placeholder=\"Espressione, es. LEN(Nome) > 3\"\r\n              ariaLabel=\"Regola di validazione\"\r\n              (expressionChange)=\"setValidationRule('formulaExpression', $event)\"\r\n            />\r\n            <input\r\n              class=\"fb-input\"\r\n              placeholder=\"Messaggio mostrato quando l\u2019espressione e\u2019 falsa\"\r\n              [value]=\"selectedField()!.validationRule?.errorMessage || ''\"\r\n              (change)=\"setValidationRule('errorMessage', $any($event.target).value)\"\r\n            />\r\n            <p class=\"fb-field__hint\">\r\n              L\u2019espressione la valuta il motore di regole: il backend non la interpreta, la fa\r\n              verificare al motore.\r\n            </p>\r\n          </div>\r\n        </fieldset>\r\n      }\r\n\r\n      <!-- --------------------------------------------------------------- choice -->\r\n      @if (selectedType()?.acceptsChoices) {\r\n        <fieldset class=\"fb-section\">\r\n          <legend class=\"fb-section__title\">Opzioni</legend>\r\n          <p class=\"fb-section__note\">\r\n            Accetta <strong>Choice</strong> e <strong>Dynamic choice set</strong>, nell\u2019ordine in cui le\r\n            opzioni compaiono. Puntare a una variabile e\u2019 SCREEN_FIELD_CHOICE_UNKNOWN.\r\n          </p>\r\n\r\n          @if (!selectedField()!.choiceReferences?.length) {\r\n            @if (selectedField()!.fieldType === 'ObjectProvided') {\r\n              <!-- Le opzioni di una picklist arrivano dallo schema: qui si aggiungono solo se\r\n                   si vuole sostituirle, e non dichiararne nessuna e' il caso normale. -->\r\n              <p class=\"fb-field__hint\">\r\n                Se il campo dello schema e\u2019 una picklist, le opzioni arrivano da l\u00EC: dichiararle qui\r\n                serve solo a sostituirle.\r\n              </p>\r\n            } @else {\r\n              <p class=\"fb-callout fb-callout--warn\">\r\n                Nessuna opzione: il campo non ha niente da mostrare (SCREEN_FIELD_CHOICES_MISSING).\r\n              </p>\r\n            }\r\n          }\r\n\r\n          <div class=\"fb-list\">\r\n            @for (choice of selectedField()!.choiceReferences || []; track $index) {\r\n              <div class=\"fb-list__item\">\r\n                <div class=\"fb-list__header\">\r\n                  <span class=\"fb-list__index\">{{ $index + 1 }}</span>\r\n                  <span class=\"fb-list__title\">{{ choice }}</span>\r\n                  <span class=\"fb-list__spacer\"></span>\r\n                  <button type=\"button\" class=\"fb-btn fb-btn--sm\" (click)=\"moveChoice($index, -1)\">\u2191</button>\r\n                  <button type=\"button\" class=\"fb-btn fb-btn--sm\" (click)=\"moveChoice($index, 1)\">\u2193</button>\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"fb-btn fb-btn--ghost fb-btn--sm\"\r\n                    aria-label=\"Rimuovi\"\r\n                    (click)=\"removeChoice($index)\"\r\n                  >\r\n                    \u00D7\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Aggiungi un\u2019opzione</label>\r\n            <fb-name-picker\r\n              [options]=\"choiceOptions()\"\r\n              label=\"Choice\"\r\n              placeholder=\"Scegli una choice o un choice set\"\r\n              unknownMessage=\"Questo nome non e\u2019 una choice ne\u2019 un choice set: e\u2019 SCREEN_FIELD_CHOICE_UNKNOWN.\"\r\n              unknownSeverity=\"error\"\r\n              emptyMessage=\"Il flow non dichiara nessuna choice: creale nel pannello delle risorse.\"\r\n              (valueChange)=\"addChoice($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Opzione selezionata all\u2019apertura</label>\r\n            <select\r\n              class=\"fb-select\"\r\n              [fbValue]=\"selectedField()!.defaultSelectedChoiceReference || ''\"\r\n              (change)=\"setFieldProperty('defaultSelectedChoiceReference', $any($event.target).value)\"\r\n            >\r\n              <option value=\"\">\u2014 nessuna \u2014</option>\r\n              @for (choice of selectedField()!.choiceReferences || []; track $index) {\r\n                <option [value]=\"choice\">{{ choice }}</option>\r\n              }\r\n            </select>\r\n            @if (defaultChoiceIsForeign()) {\r\n              <p class=\"fb-field__hint fb-field__hint--warn\">\r\n                \u00AB{{ selectedField()!.defaultSelectedChoiceReference }}\u00BB non e\u2019 fra le opzioni elencate qui\r\n                sopra.\r\n              </p>\r\n            }\r\n          </div>\r\n        </fieldset>\r\n      }\r\n\r\n      <!-- ------------------------------------------------------- contenitori -->\r\n      @if (selectedType()?.isContainer) {\r\n        <fieldset class=\"fb-section\">\r\n          <legend class=\"fb-section__title\">Contenitore</legend>\r\n          @if (selectedField()!.fieldType === 'RegionContainer') {\r\n            <div class=\"fb-field\">\r\n              <label class=\"fb-field__label\">Tipo di sezione</label>\r\n              <select\r\n                class=\"fb-select\"\r\n                [fbValue]=\"selectedField()!.regionContainerType || ''\"\r\n                (change)=\"setFieldProperty('regionContainerType', $any($event.target).value)\"\r\n              >\r\n                <option value=\"\">\u2014 predefinito \u2014</option>\r\n                @for (entry of dictionary.regionContainerTypes(); track entry.value) {\r\n                  <option [value]=\"entry.value\">{{ entry.label }}</option>\r\n                }\r\n              </select>\r\n            </div>\r\n          }\r\n          @if (!selectedField()!.fields?.length) {\r\n            <p class=\"fb-callout fb-callout--warn\">\r\n              Il contenitore e\u2019 vuoto: non produce niente sulla schermata (SCREEN_CONTAINER_EMPTY).\r\n            </p>\r\n          }\r\n        </fieldset>\r\n      }\r\n\r\n      <!-- --------------------------------------------------- ComponentInstance -->\r\n      @if (selectedField()!.fieldType === 'ComponentInstance') {\r\n        <fieldset class=\"fb-section\">\r\n          <legend class=\"fb-section__title\">Componente</legend>\r\n          <p class=\"fb-section__note\">\r\n            Componenti e form sono la stessa domanda al frontend \u2014 cosa sa rendere, e con quali parametri\r\n            \u2014 e passano dallo stesso catalogo. Un <code>ComponentInstance</code> non ha un valore proprio:\r\n            lo hanno i suoi output.\r\n          </p>\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label fb-field__label--required\">Componente</label>\r\n            <fb-name-picker\r\n              [value]=\"selectedField()!.extensionName\"\r\n              [options]=\"componentOptions()\"\r\n              [unusableOptions]=\"unusableComponents()\"\r\n              label=\"Componente\"\r\n              placeholder=\"Scrivi o scegli un componente\"\r\n              [isMono]=\"false\"\r\n              unknownMessage=\"Questo componente non esiste nel catalogo: e\u2019 SCREEN_COMPONENT_UNKNOWN.\"\r\n              unknownSeverity=\"error\"\r\n              unusableMessage=\"Questo nome e\u2019 una schermata intera, non un componente montabile qui (FORM_KIND_MISMATCH).\"\r\n              emptyMessage=\"Il catalogo dei componenti non e\u2019 popolato: il nome non viene verificato.\"\r\n              (valueChange)=\"setFieldProperty('extensionName', $event ?? '')\"\r\n            />\r\n            @if (!selectedField()!.extensionName) {\r\n              <p class=\"fb-field__error\">Obbligatorio: senza, SCREEN_COMPONENT_MISSING.</p>\r\n            }\r\n          </div>\r\n\r\n          <label class=\"fb-check\">\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"selectedField()!.storeOutputAutomatically === true\"\r\n              (change)=\"setStoreOutputAutomatically($any($event.target).checked)\"\r\n            />\r\n            Rendi gli output referenziabili automaticamente\r\n          </label>\r\n          @if (selectedField()!.storeOutputAutomatically) {\r\n            <p class=\"fb-field__hint\">\r\n              Gli output si referenziano come\r\n              <code>{{ selectedField()!.name || 'Campo' }}.nomeOutput</code>, senza dichiarare variabili.\r\n            </p>\r\n          }\r\n          @if (hasOutputConflict()) {\r\n            <p class=\"fb-callout fb-callout--error\">\r\n              Output automatici <strong>e</strong> parametri di uscita insieme:\r\n              OUTPUT_CONFIGURATION_CONFLICT.\r\n            </p>\r\n          }\r\n\r\n          <fb-parameter-editor\r\n            [holder]=\"$any(selectedField())\"\r\n            [catalogParameters]=\"componentParameterList()\"\r\n            inputTitle=\"Valori passati al componente\"\r\n            outputTitle=\"Valori raccolti dal componente\"\r\n            [showOutputs]=\"!selectedField()!.storeOutputAutomatically\"\r\n            outputsDisabledReason=\"Gli output sono automatici: disattivalo per assegnarli a variabili.\"\r\n            (changed)=\"onComponentParametersChanged($event)\"\r\n          />\r\n        </fieldset>\r\n      }\r\n\r\n      <!-- ------------------------------------------------------- visibilita' -->\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Visibilita\u2019</legend>\r\n        <p class=\"fb-section__note\">\r\n          Le regole si rivalutano <strong>sui valori appena inviati</strong>: e\u2019 cos\u00EC che un campo compare\r\n          in funzione di un altro campo della stessa schermata. Un campo risultato nascosto viene\r\n          <strong>azzerato</strong> e non viene validato.\r\n        </p>\r\n        <fb-condition-editor\r\n          [holder]=\"visibilityRule()\"\r\n          title=\"Mostra il campo quando\"\r\n          [allowFormula]=\"false\"\r\n          [issuePath]=\"'fields[' + (selectedField()!.name || '') + '].visibilityRule'\"\r\n          (changed)=\"onVisibilityChanged($event)\"\r\n        />\r\n      </fieldset>\r\n    }\r\n  </aside>\r\n</div>\r\n\r\n<fb-connector-editor\r\n  [nodeName]=\"name()\"\r\n  [node]=\"node()\"\r\n  [outlets]=\"outlets()\"\r\n  (connectorChanged)=\"onConnectorChanged($event)\"\r\n/>\r\n\r\n<!--\r\n  ============================================================== l'anteprima\r\n  Due template ricorsivi. `listTpl` disegna i figli di un contenitore, e nient'altro: `data-item`\r\n  marca cio' che conta come fratello nel calcolo del punto di rilascio, e il segnaposto del\r\n  contenitore vuoto ne resta fuori. La barra di inserimento non e' qui \u2014 sta sopra l'anteprima,\r\n  vedi il velo nel frame.\r\n-->\r\n<ng-template #listTpl let-fields let-parent=\"parent\" let-axis=\"axis\">\r\n  @for (child of fields; track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"fieldTpl\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: child, path: childPath(parent, $index), axis: axis }\"\r\n    />\r\n  }\r\n  @if (!fields.length) {\r\n    <p class=\"fb-scr__drop-hint\">Trascina qui un componente</p>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #fieldTpl let-field let-path=\"path\" let-axis=\"axis\">\r\n  <div\r\n    class=\"fb-scr__item\"\r\n    data-item=\"\"\r\n    cdkDrag\r\n    [style.grid-column]=\"'span ' + widthOf(field)\"\r\n    [class.fb-scr__item--selected]=\"isSelected(path)\"\r\n    [class.fb-scr__item--dragging]=\"isDragging(path)\"\r\n    [class.fb-scr__item--container]=\"isContainer(field)\"\r\n    (cdkDragStarted)=\"onFieldDragStarted(path)\"\r\n    (cdkDragMoved)=\"onFieldDragMoved($event)\"\r\n    (cdkDragEnded)=\"onFieldDragEnded($event, path)\"\r\n    (click)=\"select(path); $event.stopPropagation()\"\r\n  >\r\n    <span class=\"fb-scr__grip\" cdkDragHandle title=\"Trascina per spostare\" aria-hidden=\"true\">\u283F</span>\r\n    @if (field.visibilityRule?.conditions?.length) {\r\n      <span class=\"fb-scr__flag\" title=\"Ha una regola di visibilita\u2019\">\u25D0</span>\r\n    }\r\n\r\n    @switch (field.fieldType) {\r\n      @case ('RegionContainer') {\r\n        <div class=\"fb-scr__section\">\r\n          @if (field.regionContainerType !== 'SectionWithoutHeader') {\r\n            <header class=\"fb-scr__section-head\">{{ field.fieldText || field.name }}</header>\r\n          }\r\n          <div class=\"fb-scr__cols\" [attr.data-drop]=\"dropId(path)\" data-axis=\"row\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"listTpl\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: field.fields || [], parent: path, axis: 'row' }\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n      @case ('Region') {\r\n        <div class=\"fb-scr__region\">\r\n          <span class=\"fb-scr__region-tag\">{{ field.name }} \u00B7 {{ widthOf(field) }}/12</span>\r\n          <div class=\"fb-scr__region-body\" [attr.data-drop]=\"dropId(path)\" data-axis=\"column\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"listTpl\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: field.fields || [], parent: path, axis: 'column' }\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n      @case ('DisplayText') {\r\n        <p class=\"fb-scr__display\">{{ field.fieldText || '(testo vuoto)' }}</p>\r\n      }\r\n      @case ('LargeTextArea') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control fb-scr__control--area\">{{ placeholderOf(field) }}</div>\r\n      }\r\n      @case ('PasswordField') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control\">\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022</div>\r\n      }\r\n      @case ('DropdownBox') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control fb-scr__control--select\">\r\n          <span>{{ field.defaultSelectedChoiceReference || choiceLabelsOf(field)[0] || '\u2014 scegli \u2014' }}</span>\r\n          <span aria-hidden=\"true\">\u25BE</span>\r\n        </div>\r\n      }\r\n      @case ('MultiSelectPicklist') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control fb-scr__control--select\">\r\n          <span>{{ choiceLabelsOf(field).join(', ') || '\u2014 scegli \u2014' }}</span>\r\n          <span aria-hidden=\"true\">\u2261</span>\r\n        </div>\r\n      }\r\n      @case ('RadioButtons') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__options\">\r\n          @for (option of choiceLabelsOf(field); track $index) {\r\n            <span class=\"fb-scr__option\">\u25EF {{ option }}</span>\r\n          }\r\n          @if (!choiceLabelsOf(field).length) {\r\n            <span class=\"fb-scr__option fb-scr__option--missing\">Nessuna opzione</span>\r\n          }\r\n        </div>\r\n      }\r\n      @case ('MultiSelectCheckboxes') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__options\">\r\n          @for (option of choiceLabelsOf(field); track $index) {\r\n            <span class=\"fb-scr__option\">\u2610 {{ option }}</span>\r\n          }\r\n          @if (!choiceLabelsOf(field).length) {\r\n            <span class=\"fb-scr__option fb-scr__option--missing\">Nessuna opzione</span>\r\n          }\r\n        </div>\r\n      }\r\n      @case ('ComponentInstance') {\r\n        <div class=\"fb-scr__component\">\r\n          <span aria-hidden=\"true\">\u2B21</span>\r\n          {{ field.extensionName || 'Componente non indicato' }}\r\n        </div>\r\n      }\r\n      @case ('ObjectProvided') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ field.fieldText || field.objectFieldReference || field.name }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control\">{{ placeholderOf(field) }}</div>\r\n        <span class=\"fb-scr__tag\">{{ field.objectFieldReference || 'campo non indicato' }}</span>\r\n      }\r\n      @default {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control\">{{ placeholderOf(field) }}</div>\r\n        @if (isUnknownType(field)) {\r\n          <span class=\"fb-scr__tag fb-scr__tag--warn\">{{ field.fieldType }}: tipo non nel dizionario</span>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".fb-scr{display:grid;grid-template-columns:220px minmax(0,1fr) 340px;gap:12px;align-items:start;margin-bottom:14px}@media(max-width:1100px){.fb-scr{grid-template-columns:minmax(0,1fr)}}.fb-scr__side,.fb-scr__props{min-width:0;padding:10px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-surface-alt, #f7f8fa)}.fb-scr__tabs{display:flex;gap:4px;margin-bottom:8px}.fb-scr__tab{flex:1;padding:5px 8px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff);color:var(--fb-text-muted, #6b7086);font:inherit;font-size:11px;font-weight:600;cursor:pointer}.fb-scr__tab--active{border-color:var(--fb-accent, #4f6ef7);background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 10%,transparent);color:var(--fb-accent-strong, #3d59e0)}.fb-scr__side-hint,.fb-scr__side-empty{margin:6px 0;font-size:11px;color:var(--fb-text-muted, #6b7086)}.fb-scr__palette{display:flex;flex-direction:column;gap:4px;margin:8px 0 0;padding:0;max-height:320px;overflow-y:auto;overscroll-behavior:contain;list-style:none}.fb-scr__chip{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff);color:var(--fb-text, #1a1c23);font:inherit;font-size:12px;text-align:left;cursor:grab}.fb-scr__chip:hover{border-color:var(--fb-accent, #4f6ef7)}.fb-scr__chip-icon{flex:none;width:20px;text-align:center;color:var(--fb-text-muted, #6b7086)}.fb-scr__chip-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-scr__chip-label small{margin-left:4px;color:var(--fb-text-subtle, #98a2b3);font-size:10px}.fb-scr__canvas{min-width:0;padding:14px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-canvas-bg, #f4f5f7)}.fb-scr__frame{position:relative;display:flex;flex-direction:column;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-sm, 8px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));overflow:hidden}.fb-scr__frame-head{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--fb-border-subtle, #eef0f4);font-size:13px;font-weight:600}.fb-scr__help{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--fb-surface-sunken, #eef0f4);color:var(--fb-text-muted, #6b7086);font-size:10px}.fb-scr__body,.fb-scr__region-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-content:start;gap:8px 0;padding:12px;min-height:90px}.fb-scr__region-body{padding:8px;min-height:60px}.fb-scr__cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch;gap:0;padding:8px;min-height:60px}.fb-scr__cols>.fb-scr__item{display:flex;align-self:stretch}.fb-scr__cols>.fb-scr__item>.fb-scr__region{flex:1;min-width:0}.fb-scr__drop-hint{grid-column:1 / -1;margin:0;padding:10px;border:1px dashed var(--fb-border-strong, #cfd4de);border-radius:var(--fb-radius-xs, 6px);color:var(--fb-text-subtle, #98a2b3);font-size:11px;text-align:center}.fb-scr__marker{position:absolute;z-index:2;border-radius:2px;background:var(--fb-accent, #4f6ef7);pointer-events:none}.fb-scr__item{position:relative;box-sizing:border-box;padding:6px 8px;border:1px solid transparent;border-radius:var(--fb-radius-xs, 6px);cursor:pointer}.fb-scr__item:hover{border-color:var(--fb-border-strong, #cfd4de);background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 4%,transparent)}.fb-scr__item--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:inset 0 0 0 1px var(--fb-accent, #4f6ef7)}.fb-scr__item--dragging{opacity:.45;pointer-events:none}.fb-scr__grip{position:absolute;top:2px;left:-2px;padding:0 3px;color:var(--fb-text-subtle, #98a2b3);font-size:11px;line-height:1;opacity:0;cursor:grab}.fb-scr__item:hover>.fb-scr__grip,.fb-scr__item--selected>.fb-scr__grip{opacity:1}.fb-scr__flag{position:absolute;top:2px;right:4px;color:var(--fb-text-muted, #6b7086);font-size:11px}.fb-scr__label{display:block;margin-bottom:3px;font-size:11px;font-weight:600;color:var(--fb-text, #1a1c23)}.fb-scr__req{color:var(--fb-error, #dc2626)}.fb-scr__control{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:26px;padding:4px 8px;border:1px solid var(--fb-border-strong, #cfd4de);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff);color:var(--fb-text-subtle, #98a2b3);font-size:12px;pointer-events:none}.fb-scr__control--area{min-height:54px;align-items:flex-start}.fb-scr__display{margin:0;font-size:12px;color:var(--fb-text, #1a1c23)}.fb-scr__options{display:flex;flex-direction:column;gap:2px;pointer-events:none}.fb-scr__option{font-size:12px;color:var(--fb-text-muted, #6b7086)}.fb-scr__option--missing{color:var(--fb-warning, #b7791f)}.fb-scr__component{display:flex;align-items:center;gap:6px;padding:10px;border:1px dashed var(--fb-accent, #4f6ef7);border-radius:var(--fb-radius-xs, 6px);background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 5%,transparent);font-size:12px;color:var(--fb-text-muted, #6b7086)}.fb-scr__tag{display:inline-block;margin-top:3px;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-scr__tag--warn{color:var(--fb-warning, #b7791f)}.fb-scr__section{border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface-alt, #f7f8fa)}.fb-scr__section-head{padding:5px 10px;border-bottom:1px solid var(--fb-border-subtle, #eef0f4);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--fb-text-muted, #6b7086)}.fb-scr__region{border:1px dashed var(--fb-border-strong, #cfd4de);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff)}.fb-scr__region-tag{display:block;padding:3px 6px 0;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-scr__frame-foot{display:flex;align-items:center;gap:6px;padding:8px 12px;border-top:1px solid var(--fb-border-subtle, #eef0f4);background:var(--fb-surface-alt, #f7f8fa)}.fb-scr__spacer{flex:1}.fb-scr__btn{padding:3px 10px;border:1px solid var(--fb-border-strong, #cfd4de);border-radius:var(--fb-radius-xs, 6px);font-size:11px;color:var(--fb-text-muted, #6b7086)}.fb-scr__btn--primary{border-color:var(--fb-accent, #4f6ef7);background:var(--fb-accent, #4f6ef7);color:var(--fb-accent-contrast, #fff)}.fb-scr__canvas-note{margin-top:10px}.fb-scr__props{background:var(--fb-surface, #fff)}.fb-scr__props-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.fb-scr__props-title{flex:1;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--fb-text-muted, #6b7086)}.fb-scr__props-actions{display:flex;flex-wrap:wrap;gap:3px}.fb-btn--sm{padding:3px 7px;font-size:11px}.fb-scr__width{display:flex;align-items:center;gap:8px}.fb-scr__width input[type=range]{flex:1;min-width:0}.fb-scr__width-value{font-size:11px;color:var(--fb-text-muted, #6b7086)}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: ConditionEditorComponent, selector: "fb-condition-editor", inputs: ["holder", "title", "allowFormula", "allowLogic", "issuePath"], outputs: ["changed"] }, { kind: "component", type: ConnectorEditorComponent, selector: "fb-connector-editor", inputs: ["nodeName", "node", "outlets", "title"], outputs: ["connectorChanged"] }, { kind: "component", type: FieldPickerComponent, selector: "fb-field-picker", inputs: ["value", "object", "usage", "label", "placeholder", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: FormulaEditorComponent, selector: "fb-formula-editor", inputs: ["expression", "usage", "expectedDataType", "scale", "placeholder", "ariaLabel", "disabled", "rows", "commitOn"], outputs: ["expressionChange"] }, { kind: "component", type: NamePickerComponent, selector: "fb-name-picker", inputs: ["value", "options", "label", "placeholder", "disabled", "unknownMessage", "unknownSeverity", "unusableOptions", "unusableMessage", "emptyMessage", "isMono"], outputs: ["valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ObjectPickerComponent, selector: "fb-object-picker", inputs: ["value", "label", "placeholder", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: ParameterEditorComponent, selector: "fb-parameter-editor", inputs: ["holder", "catalogParameters", "inputTitle", "outputTitle", "showInputs", "showOutputs", "outputsDisabledReason", "extraTargets"], outputs: ["changed"] }, { kind: "directive", type: SelectValueDirective, selector: "select[fbValue]", inputs: ["fbValue"] }, { kind: "component", type: StructurePickerComponent, selector: "fb-structure-picker", inputs: ["value", "label", "placeholder", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: ValueEditorComponent, selector: "fb-value-editor", inputs: ["value", "label", "dataType", "objectType", "isCollection", "disabled", "allowFormula"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: DynamicScreenInspectorComponent, isStandalone: true, selector: "fb-dynamic-screen-inspector", usesInheritance: true, ngImport: i0, template: "<div class=\"fb-scr\">\r\n  <!-- ============================================================ sinistra -->\r\n  <aside class=\"fb-scr__side\" aria-label=\"Componenti e campi\">\r\n    <div class=\"fb-scr__tabs\" role=\"tablist\">\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"fb-scr__tab\"\r\n        [class.fb-scr__tab--active]=\"paletteTab() === 'components'\"\r\n        [attr.aria-selected]=\"paletteTab() === 'components'\"\r\n        (click)=\"setPaletteTab('components')\"\r\n      >\r\n        Componenti\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"fb-scr__tab\"\r\n        [class.fb-scr__tab--active]=\"paletteTab() === 'fields'\"\r\n        [attr.aria-selected]=\"paletteTab() === 'fields'\"\r\n        (click)=\"setPaletteTab('fields')\"\r\n      >\r\n        Campi\r\n      </button>\r\n    </div>\r\n\r\n    @if (paletteTab() === 'components') {\r\n      @if (!dictionary.screenFieldTypes().length) {\r\n        <p class=\"fb-callout fb-callout--warn\">\r\n          Il dizionario <code>screenFieldTypes</code> non e\u2019 disponibile: senza i suoi flag l\u2019editor non\r\n          sa quali campi ammette ciascun tipo, e non li inventa.\r\n        </p>\r\n      }\r\n      <p class=\"fb-scr__side-hint\">Trascina sulla schermata, oppure clicca per aggiungere.</p>\r\n      <ul class=\"fb-scr__palette\">\r\n        @for (entry of dictionary.screenFieldTypes(); track entry.value) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-scr__chip\"\r\n              cdkDrag\r\n              [title]=\"entry.description || entry.label\"\r\n              (cdkDragMoved)=\"onPaletteDragMoved($event)\"\r\n              (cdkDragEnded)=\"onComponentDragEnded($event, entry.value)\"\r\n              (click)=\"addComponentAtSelection(entry.value)\"\r\n            >\r\n              <span class=\"fb-scr__chip-icon\" aria-hidden=\"true\">{{ iconOf(entry.value) }}</span>\r\n              <span class=\"fb-scr__chip-label\">{{ entry.label }}</span>\r\n            </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else {\r\n      <p class=\"fb-scr__side-hint\">\r\n        Un campo dell\u2019entita\u2019 porta con se\u2019 tipo, etichetta, obbligatorieta\u2019 e opzioni: arrivano dallo\r\n        schema dati, qui non si ridichiarano.\r\n      </p>\r\n      <!-- Il catalogo non e' un dizionario chiuso: si sceglie o si scrive, come ovunque si\r\n           indichi un'entita' (vedi `object-picker`). -->\r\n      <fb-object-picker\r\n        [value]=\"fieldsObject()\"\r\n        label=\"Entita\u2019\"\r\n        placeholder=\"Scrivi o scegli un\u2019entita\u2019\"\r\n        (valueChange)=\"setFieldsObject($event)\"\r\n      />\r\n      @if (fieldsObject() && !fieldsOfObject().length) {\r\n        <p class=\"fb-scr__side-empty\">\r\n          Nessun campo dichiarato per questa entita\u2019: il catalogo non li espone, non significa che non\r\n          ci siano.\r\n        </p>\r\n      }\r\n      <ul class=\"fb-scr__palette\">\r\n        @for (field of fieldsOfObject(); track $index) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-scr__chip\"\r\n              cdkDrag\r\n              [title]=\"field.name + (field.dataType ? ' \u00B7 ' + field.dataType : '')\"\r\n              (cdkDragMoved)=\"onPaletteDragMoved($event)\"\r\n              (cdkDragEnded)=\"onObjectFieldDragEnded($event, field)\"\r\n              (click)=\"addObjectFieldAtSelection(field)\"\r\n            >\r\n              <span class=\"fb-scr__chip-icon\" aria-hidden=\"true\">\u2317</span>\r\n              <span class=\"fb-scr__chip-label\">\r\n                {{ field.label || field.name }}\r\n                @if (field.isRequired) {\r\n                  <span class=\"fb-scr__req\">*</span>\r\n                }\r\n                <small>{{ field.dataType }}</small>\r\n              </span>\r\n            </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n  </aside>\r\n\r\n  <!-- ============================================================== centro -->\r\n  <!-- Cliccare fuori da un campo riporta a destra le proprieta' della schermata. -->\r\n  <section class=\"fb-scr__canvas\" aria-label=\"Anteprima della schermata\" (click)=\"selectScreen()\">\r\n    <div class=\"fb-scr__frame\">\r\n      @if (showHeader()) {\r\n        <header class=\"fb-scr__frame-head\">\r\n          {{ $any(node()).label || name() }}\r\n          @if (screen().helpText) {\r\n            <span class=\"fb-scr__help\" [title]=\"screen().helpText || ''\">?</span>\r\n          }\r\n        </header>\r\n      }\r\n\r\n      <div\r\n        class=\"fb-scr__body\"\r\n        [attr.data-drop]=\"''\"\r\n        data-axis=\"column\"\r\n        [class.fb-scr__body--empty]=\"isEmpty()\"\r\n      >\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"listTpl\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: screen().fields || [], parent: [], axis: 'column' }\"\r\n        />\r\n      </div>\r\n\r\n      <!--\r\n        La barra di inserimento e' un **velo** sopra l'anteprima, non un figlio del contenitore di\r\n        rilascio: dentro la griglia occupava una riga intera e spostava in basso proprio la sezione\r\n        che si stava puntando, che allora usciva da sotto il puntatore e il bersaglio oscillava.\r\n      -->\r\n      @if (dropMarker(); as bar) {\r\n        <div\r\n          class=\"fb-scr__marker\"\r\n          [style.left.px]=\"bar.left\"\r\n          [style.top.px]=\"bar.top\"\r\n          [style.width.px]=\"bar.width\"\r\n          [style.height.px]=\"bar.height\"\r\n        ></div>\r\n      }\r\n\r\n      @if (showFooter()) {\r\n        <footer class=\"fb-scr__frame-foot\">\r\n          @if (allowPause()) {\r\n            <span class=\"fb-scr__btn fb-scr__btn--ghost\">{{ screen().pauseButtonLabel || 'Pausa' }}</span>\r\n          }\r\n          <span class=\"fb-scr__spacer\"></span>\r\n          @if (allowBack()) {\r\n            <span class=\"fb-scr__btn fb-scr__btn--ghost\">{{ screen().backButtonLabel || 'Indietro' }}</span>\r\n          }\r\n          <span class=\"fb-scr__btn fb-scr__btn--primary\">\r\n            {{ screen().nextOrFinishButtonLabel || (allowFinish() ? 'Fine' : 'Avanti') }}\r\n          </span>\r\n        </footer>\r\n      }\r\n    </div>\r\n\r\n    @if (isEmpty()) {\r\n      <p class=\"fb-callout fb-callout--warn fb-scr__canvas-note\">\r\n        La schermata non ha campi: non c\u2019e\u2019 niente da mostrare all\u2019utente (SCREEN_WITHOUT_FIELDS).\r\n      </p>\r\n    }\r\n  </section>\r\n\r\n  <!-- ============================================================== destra -->\r\n  <aside class=\"fb-scr__props\" aria-label=\"Proprieta\u2019\">\r\n    @if (!selectedField()) {\r\n      <!-- ------------------------------------------------ proprieta' della schermata -->\r\n      <header class=\"fb-scr__props-head\">\r\n        <h3 class=\"fb-scr__props-title\">Schermata</h3>\r\n      </header>\r\n      <p class=\"fb-scr__side-hint\">Seleziona un campo nell\u2019anteprima per configurarlo.</p>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Testo di aiuto</label>\r\n        <textarea\r\n          class=\"fb-textarea\"\r\n          [value]=\"screen().helpText || ''\"\r\n          (input)=\"setScreenText('helpText', $any($event.target).value)\"\r\n        ></textarea>\r\n      </div>\r\n\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Navigazione</legend>\r\n        <p class=\"fb-section__note\">\r\n          Questi flag sono un\u2019intenzione, non la verita\u2019 finale: a runtime il motore comunica\r\n          <code>canGoBack</code>, <code>canFinish</code> e <code>canPause</code> nella richiesta della\r\n          schermata.\r\n        </p>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"allowBack()\" (change)=\"setScreenFlag('allowBack', $any($event.target).checked)\" />\r\n          Consenti \u00ABindietro\u00BB\r\n        </label>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"allowFinish()\" (change)=\"setScreenFlag('allowFinish', $any($event.target).checked)\" />\r\n          Consenti \u00ABfine\u00BB\r\n        </label>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"allowPause()\" (change)=\"setScreenFlag('allowPause', $any($event.target).checked)\" />\r\n          Consenti \u00ABpausa\u00BB\r\n        </label>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"showHeader()\" (change)=\"setScreenFlag('showHeader', $any($event.target).checked)\" />\r\n          Mostra l\u2019intestazione\r\n        </label>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"showFooter()\" (change)=\"setScreenFlag('showFooter', $any($event.target).checked)\" />\r\n          Mostra il piede\r\n        </label>\r\n\r\n        @if (allowPause()) {\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Testo mostrato alla pausa</label>\r\n            <input\r\n              class=\"fb-input\"\r\n              [value]=\"screen().pausedText || ''\"\r\n              (input)=\"setScreenText('pausedText', $any($event.target).value)\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        @if (isDeadEnd()) {\r\n          <p class=\"fb-callout fb-callout--error\">\r\n            Questa schermata non ha una destinazione e non consente \u00ABfine\u00BB: e\u2019 un vicolo cieco, e\r\n            l\u2019utente resterebbe bloccato (SCREEN_DEAD_END).\r\n          </p>\r\n        }\r\n      </fieldset>\r\n\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Pulsanti</legend>\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">Etichetta \u00ABindietro\u00BB</label>\r\n          <input\r\n            class=\"fb-input\"\r\n            [value]=\"screen().backButtonLabel || ''\"\r\n            (input)=\"setScreenText('backButtonLabel', $any($event.target).value)\"\r\n          />\r\n        </div>\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">Etichetta \u00ABavanti / fine\u00BB</label>\r\n          <input\r\n            class=\"fb-input\"\r\n            [value]=\"screen().nextOrFinishButtonLabel || ''\"\r\n            (input)=\"setScreenText('nextOrFinishButtonLabel', $any($event.target).value)\"\r\n          />\r\n        </div>\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">Etichetta \u00ABpausa\u00BB</label>\r\n          <input\r\n            class=\"fb-input\"\r\n            [value]=\"screen().pauseButtonLabel || ''\"\r\n            (input)=\"setScreenText('pauseButtonLabel', $any($event.target).value)\"\r\n          />\r\n        </div>\r\n      </fieldset>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Stage mostrato nell\u2019avanzamento</label>\r\n        <fb-name-picker\r\n          [value]=\"screen().stageReference\"\r\n          [options]=\"stageOptions()\"\r\n          label=\"Stage\"\r\n          placeholder=\"Scegli uno stage\"\r\n          unknownMessage=\"Questo stage non e\u2019 dichiarato dal flow.\"\r\n          emptyMessage=\"Il flow non dichiara stage: creali nel pannello delle risorse.\"\r\n          (valueChange)=\"setScreenText('stageReference', $event ?? '')\"\r\n        />\r\n      </div>\r\n\r\n      <!--\r\n        Screen action (\u00A75.2). Due elenchi e non uno perche' il contratto li separa: piu' trigger\r\n        possono invocare la stessa action, quindi \u00ABchi la chiama\u00BB non e' una sua proprieta'. Le\r\n        action si aprono una alla volta: i cataloghi dipendono da tipo e nome, e tenerne N in volo\r\n        sarebbe N volte la corsa fra risposte.\r\n      -->\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Azioni della schermata</legend>\r\n        <p class=\"fb-section__note\">\r\n          Un campo che l\u2019utente compila puo\u2019 innescare un\u2019action i cui risultati finiscono negli\r\n          <strong>altri campi di questa schermata</strong>: e\u2019 il caso \u00ABscrivi il codice fiscale e nome\r\n          e cognome compaiono da soli\u00BB. L\u2019alternativa sarebbe spezzare la schermata in due con un\r\n          elemento Action in mezzo.\r\n        </p>\r\n\r\n        <div class=\"fb-list\">\r\n          @for (action of screenActions(); track $index) {\r\n            <div class=\"fb-list__item\">\r\n              <div class=\"fb-list__header\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--ghost\"\r\n                  [attr.aria-expanded]=\"selectedActionIndex() === $index\"\r\n                  (click)=\"selectAction(selectedActionIndex() === $index ? null : $index)\"\r\n                >\r\n                  {{ selectedActionIndex() === $index ? '\u25BE' : '\u25B8' }}\r\n                  {{ action.name || '(senza nome)' }}\r\n                </button>\r\n                <span class=\"fb-list__spacer\"></span>\r\n                <span class=\"fb-scr__side-hint\">{{ action.actionName || 'action non scelta' }}</span>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--ghost fb-btn--icon\"\r\n                  aria-label=\"Rimuovi l\u2019action\"\r\n                  (click)=\"removeScreenAction($index)\"\r\n                >\r\n                  \u00D7\r\n                </button>\r\n              </div>\r\n\r\n              @if (actionLosesResult(action)) {\r\n                <p class=\"fb-callout fb-callout--warn\">\r\n                  Questa action viene invocata ma il suo risultato si perde: aggiungi un parametro di\r\n                  uscita, oppure accendi l\u2019output automatico (SCREEN_ACTION_WITHOUT_OUTPUTS).\r\n                </p>\r\n              }\r\n              @if (actionHasNoTrigger(action)) {\r\n                <p class=\"fb-callout fb-callout--warn\">\r\n                  Nessun trigger la invoca: senza, non girera\u2019 mai.\r\n                </p>\r\n              }\r\n\r\n              @if (selectedActionIndex() === $index) {\r\n                <div class=\"fb-field\">\r\n                  <label class=\"fb-field__label fb-field__label--required\">Nome</label>\r\n                  <input\r\n                    class=\"fb-input fb-input--mono\"\r\n                    [value]=\"action.name || ''\"\r\n                    (change)=\"setActionName($index, $any($event.target).value)\"\r\n                  />\r\n                  @if (actionNameError(action); as error) {\r\n                    <p class=\"fb-field__error\">{{ error }}</p>\r\n                  }\r\n                  <p class=\"fb-field__hint\">\r\n                    E\u2019 il nome con cui la citano i trigger, e vive nello spazio dei nomi del flow. Con\r\n                    l\u2019output automatico e\u2019 anche la radice del riferimento:\r\n                    <code>{{ action.name || 'Cerca' }}.NomeOutput</code>.\r\n                  </p>\r\n                </div>\r\n\r\n                <div class=\"fb-field\">\r\n                  <label class=\"fb-field__label\">Tipo di action</label>\r\n                  <fb-name-picker\r\n                    [value]=\"action.actionType\"\r\n                    [options]=\"actionTypeOptions()\"\r\n                    label=\"Tipo di action\"\r\n                    placeholder=\"Scrivi o scegli un tipo\"\r\n                    [isMono]=\"false\"\r\n                    unknownMessage=\"Questo tipo di action non e\u2019 fra quelli dichiarati dal sistema ospite.\"\r\n                    emptyMessage=\"Catalogo dei tipi di action non disponibile: puoi scrivere il nome a mano.\"\r\n                    (valueChange)=\"setActionType($index, $event ?? '')\"\r\n                  />\r\n                </div>\r\n\r\n                <div class=\"fb-field\">\r\n                  <label class=\"fb-field__label fb-field__label--required\">Action</label>\r\n                  <fb-name-picker\r\n                    [value]=\"action.actionName\"\r\n                    [options]=\"actionOptions()\"\r\n                    label=\"Action\"\r\n                    placeholder=\"Scrivi o scegli un\u2019action\"\r\n                    [isMono]=\"false\"\r\n                    unknownMessage=\"Questa action non esiste nel catalogo del tipo scelto: e\u2019 ACTION_UNKNOWN.\"\r\n                    unknownSeverity=\"error\"\r\n                    emptyMessage=\"Scegli prima il tipo di action, oppure scrivi il nome a mano.\"\r\n                    (valueChange)=\"setActionTarget($index, $event ?? '')\"\r\n                  />\r\n                  @if (!action.actionName) {\r\n                    <p class=\"fb-field__error\">Obbligatoria: senza, ACTION_NAME_MISSING.</p>\r\n                  }\r\n                </div>\r\n\r\n                <label class=\"fb-check\">\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    [checked]=\"action.storeOutputAutomatically === true\"\r\n                    (change)=\"setActionStoreOutput($index, $any($event.target).checked)\"\r\n                  />\r\n                  Output automatico\r\n                </label>\r\n                <p class=\"fb-field__hint\">\r\n                  L\u2019output automatico rende il risultato leggibile come\r\n                  <code>{{ action.name || 'Cerca' }}.NomeOutput</code>, ma\r\n                  <strong>non scrive in nessun campo</strong>: e\u2019 la forma da usare quando il risultato\r\n                  serve a una condizione, non a precompilare.\r\n                </p>\r\n\r\n                <!--\r\n                  L'unico posto in cui un campo di schermata e' una destinazione (\u00A75.2):\r\n                  `POST /flows/references/writable` continua a escluderlo, e un Assignment che ci\r\n                  scrive resta TARGET_NOT_WRITABLE.\r\n                -->\r\n                <fb-parameter-editor\r\n                  [holder]=\"action\"\r\n                  [catalogParameters]=\"actionParameterCatalog()\"\r\n                  [showOutputs]=\"action.storeOutputAutomatically !== true\"\r\n                  outputTitle=\"Campi da riempire\"\r\n                  [extraTargets]=\"screenFieldTargets()\"\r\n                  [outputsDisabledReason]=\"\r\n                    action.storeOutputAutomatically === true\r\n                      ? 'Con l\u2019output automatico il risultato non viene scritto nei campi.'\r\n                      : null\r\n                  \"\r\n                  (changed)=\"onActionParametersChanged($index, $event)\"\r\n                />\r\n              }\r\n            </div>\r\n          } @empty {\r\n            <p class=\"fb-empty\">Nessuna action: i campi di questa schermata li compila solo l\u2019utente.</p>\r\n          }\r\n        </div>\r\n\r\n        <button type=\"button\" class=\"fb-btn\" (click)=\"addScreenAction()\">Aggiungi action</button>\r\n      </fieldset>\r\n\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Trigger</legend>\r\n        <p class=\"fb-section__note\">\r\n          Quale campo invoca quale action. Senza condizioni l\u2019action gira a ogni cambio del campo.\r\n        </p>\r\n\r\n        <div class=\"fb-list\">\r\n          @for (trigger of screenTriggers(); track $index) {\r\n            <div class=\"fb-list__item\">\r\n              <div class=\"fb-list__header\">\r\n                <span class=\"fb-list__index\">{{ $index + 1 }}</span>\r\n                <span class=\"fb-list__spacer\"></span>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--ghost fb-btn--icon\"\r\n                  aria-label=\"Rimuovi il trigger\"\r\n                  (click)=\"removeScreenTrigger($index)\"\r\n                >\r\n                  \u00D7\r\n                </button>\r\n              </div>\r\n\r\n              <div class=\"fb-field\">\r\n                <label class=\"fb-field__label fb-field__label--required\">Action da invocare</label>\r\n                <fb-name-picker\r\n                  [value]=\"trigger.screenActionName\"\r\n                  [options]=\"screenActionOptions()\"\r\n                  label=\"Action della schermata\"\r\n                  placeholder=\"Scegli un\u2019action\"\r\n                  unknownMessage=\"Questa schermata non dichiara un\u2019action con questo nome: e\u2019 SCREEN_ACTION_UNKNOWN.\"\r\n                  unknownSeverity=\"error\"\r\n                  emptyMessage=\"Aggiungi prima un\u2019action qui sopra.\"\r\n                  (valueChange)=\"setTriggerProperty($index, 'screenActionName', $event ?? '')\"\r\n                />\r\n              </div>\r\n\r\n              <div class=\"fb-field\">\r\n                <label class=\"fb-field__label\">Campo che la innesca</label>\r\n                <!-- I campi di **questa** schermata, non i riferimenti in generale (\u00A75.2). -->\r\n                <fb-name-picker\r\n                  [value]=\"trigger.triggerFieldName\"\r\n                  [options]=\"triggerFieldOptions()\"\r\n                  label=\"Campo della schermata\"\r\n                  placeholder=\"Scegli un campo\"\r\n                  unknownMessage=\"Questo non e\u2019 un campo di questa schermata: e\u2019 SCREEN_TRIGGER_FIELD_UNKNOWN.\"\r\n                  unknownSeverity=\"error\"\r\n                  emptyMessage=\"La schermata non ha ancora campi che raccolgono un valore.\"\r\n                  (valueChange)=\"setTriggerProperty($index, 'triggerFieldName', $event ?? '')\"\r\n                />\r\n              </div>\r\n\r\n              <div class=\"fb-field\">\r\n                <label class=\"fb-field__label\">All\u2019arrivo sulla schermata</label>\r\n                <select\r\n                  class=\"fb-select\"\r\n                  [fbValue]=\"trigger.initBehavior || ''\"\r\n                  (change)=\"setTriggerProperty($index, 'initBehavior', $any($event.target).value)\"\r\n                >\r\n                  <option value=\"\">\u2014 non invocare \u2014</option>\r\n                  <option value=\"runOnLoad\">Invoca al caricamento (runOnLoad)</option>\r\n                </select>\r\n                @if (triggerInitIsUnknown(trigger)) {\r\n                  <p class=\"fb-field__error\">\r\n                    \u00AB{{ trigger.initBehavior }}\u00BB non e\u2019 ammesso: l\u2019unico valore e\u2019 <code>runOnLoad</code>\r\n                    (SCREEN_TRIGGER_INIT_BEHAVIOR_UNKNOWN).\r\n                  </p>\r\n                }\r\n              </div>\r\n\r\n              @if (triggerHasNoCause(trigger)) {\r\n                <p class=\"fb-callout fb-callout--warn\">\r\n                  Senza un campo che la innesca e senza l\u2019invocazione al caricamento, questo trigger non\r\n                  scattera\u2019 mai (SCREEN_TRIGGER_WITHOUT_CAUSE).\r\n                </p>\r\n              }\r\n\r\n              <fb-condition-editor\r\n                [holder]=\"triggerConditions(trigger)\"\r\n                title=\"Invoca l\u2019action quando\"\r\n                [allowFormula]=\"false\"\r\n                [issuePath]=\"'triggers[' + $index + ']'\"\r\n                (changed)=\"onTriggerConditionsChanged($index, $event)\"\r\n              />\r\n            </div>\r\n          } @empty {\r\n            <p class=\"fb-empty\">Nessun trigger: le action dichiarate non verranno invocate.</p>\r\n          }\r\n        </div>\r\n\r\n        <button type=\"button\" class=\"fb-btn\" (click)=\"addScreenTrigger()\">Aggiungi trigger</button>\r\n      </fieldset>\r\n    } @else {\r\n      <!-- ---------------------------------------------------- proprieta' del campo -->\r\n      <header class=\"fb-scr__props-head\">\r\n        <h3 class=\"fb-scr__props-title\">{{ captionOf(selectedField()!) }}</h3>\r\n        <div class=\"fb-scr__props-actions\">\r\n          <button type=\"button\" class=\"fb-btn fb-btn--sm\" title=\"Sposta su\" (click)=\"moveSelected(-1)\">\u2191</button>\r\n          <button type=\"button\" class=\"fb-btn fb-btn--sm\" title=\"Sposta giu\u2019\" (click)=\"moveSelected(1)\">\u2193</button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-btn fb-btn--sm\"\r\n            title=\"Porta fuori dal contenitore\"\r\n            [disabled]=\"!canOutdent()\"\r\n            (click)=\"outdentSelected()\"\r\n          >\r\n            \u21E4\r\n          </button>\r\n          <button type=\"button\" class=\"fb-btn fb-btn--sm\" title=\"Duplica\" (click)=\"duplicateSelected()\">\u29C9</button>\r\n          <button type=\"button\" class=\"fb-btn fb-btn--danger fb-btn--sm\" title=\"Elimina\" (click)=\"removeSelected()\">\r\n            \u00D7\r\n          </button>\r\n        </div>\r\n      </header>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label fb-field__label--required\">Tipo</label>\r\n        <select\r\n          class=\"fb-select\"\r\n          [fbValue]=\"selectedField()!.fieldType || ''\"\r\n          (change)=\"setFieldType($any($event.target).value)\"\r\n        >\r\n          <option value=\"\">\u2014 scegli \u2014</option>\r\n          @for (entry of dictionary.screenFieldTypes(); track entry.value) {\r\n            <option [value]=\"entry.value\">{{ entry.label }}</option>\r\n          }\r\n        </select>\r\n        @if (!selectedField()!.fieldType) {\r\n          <p class=\"fb-field__error\">Il tipo e\u2019 obbligatorio: senza, SCREEN_FIELD_TYPE_MISSING.</p>\r\n        } @else if (isUnknownType(selectedField())) {\r\n          <p class=\"fb-field__hint fb-field__hint--warn\">\r\n            Questo tipo non e\u2019 nel dizionario: l\u2019editor non sa quali campi ammetta e mostra solo i comuni.\r\n          </p>\r\n        } @else if (selectedType()?.description) {\r\n          <p class=\"fb-field__hint\">{{ selectedType()?.description }}</p>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Nome</label>\r\n        <!-- Sul `change` e non sull\u2019`input`: la rinomina riscrive i riferimenti nel documento,\r\n             e farlo a ogni tasto significherebbe riscriverlo per ogni lettera. -->\r\n        <input\r\n          class=\"fb-input fb-input--mono\"\r\n          [value]=\"selectedField()!.name || ''\"\r\n          (change)=\"setFieldName($any($event.target).value)\"\r\n        />\r\n        @if (selectedIsResource()) {\r\n          <p class=\"fb-field__hint\">\r\n            Questo campo e\u2019 una <strong>risorsa</strong>: lo referenzi come\r\n            <code>{{ selectedField()!.name || 'Nome' }}</code> in condizioni, formule e parametri. \u00C8 di\r\n            sola lettura per il flow \u2014 un Assignment che ci scrive e\u2019 TARGET_NOT_WRITABLE.\r\n          </p>\r\n        }\r\n      </div>\r\n\r\n      @if (!selectedType()?.isContainer) {\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">\r\n            {{ selectedField()!.fieldType === 'DisplayText' ? 'Testo' : 'Etichetta' }}\r\n          </label>\r\n          <textarea\r\n            class=\"fb-textarea\"\r\n            [value]=\"selectedField()!.fieldText || ''\"\r\n            (input)=\"setFieldProperty('fieldText', $any($event.target).value)\"\r\n          ></textarea>\r\n          <p class=\"fb-field__hint\">\r\n            Supporta i merge field <code>&#123;!Riferimento&#125;</code>.\r\n            @if (selectedField()!.fieldType === 'ComponentInstance') {\r\n              <!--\r\n                \u00A75.2 \u2014 su un componente l\u2019etichetta e\u2019 **ammessa** e viene consegnata al frontend\r\n                in `label`, ma la sua assenza non e\u2019 un rilievo: un componente di solito disegna\r\n                la propria intestazione. Nasconderla, come faceva prima l\u2019editor, toglieva un\r\n                campo che il contratto prevede.\r\n              -->\r\n              Facoltativa: un componente di solito disegna la propria intestazione.\r\n            }\r\n          </p>\r\n        </div>\r\n      } @else {\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">Intestazione</label>\r\n          <input\r\n            class=\"fb-input\"\r\n            [value]=\"selectedField()!.fieldText || ''\"\r\n            (input)=\"setFieldProperty('fieldText', $any($event.target).value)\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Testo di aiuto</label>\r\n        <input\r\n          class=\"fb-input\"\r\n          [value]=\"selectedField()!.helpText || ''\"\r\n          (input)=\"setFieldProperty('helpText', $any($event.target).value)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Larghezza</label>\r\n        <div class=\"fb-scr__width\">\r\n          <input\r\n            type=\"range\"\r\n            min=\"1\"\r\n            max=\"12\"\r\n            step=\"1\"\r\n            [value]=\"widthOf(selectedField()!)\"\r\n            (input)=\"setNumberProperty('width', $any($event.target).value)\"\r\n          />\r\n          <span class=\"fb-scr__width-value\">{{ widthOf(selectedField()!) }}/12</span>\r\n        </div>\r\n        <p class=\"fb-field__hint\">\r\n          Colonne della griglia della schermata. \u00C8 un\u2019indicazione: il frontend puo\u2019 ignorarla.\r\n        </p>\r\n      </div>\r\n\r\n      @if (selectedField()!.fieldType === 'ComponentInstance') {\r\n        <!--\r\n          \u00A75.2 \u2014 perche\u2019 qui non c\u2019e\u2019 \u00ABobbligatorio\u00BB. La domanda arriva sempre, e la risposta non\r\n          si indovina guardando l\u2019interfaccia: un componente non ha un valore proprio, ce l\u2019hanno\r\n          i suoi output, che vanno in **variabili** scelte dall\u2019autore. \u00ABObbligatorio\u00BB dovrebbe\r\n          dire *quale output* deve essere valorizzato, e il metadata non ha modo di dirlo \u2014\r\n          dichiararlo qui sarebbe `SCREEN_FIELD_CONFIGURATION_INVALID` e il runtime lo\r\n          ignorerebbe. Le due strade vere stanno nel contratto e sono queste.\r\n        -->\r\n        <p class=\"fb-field__hint\">\r\n          Un componente non raccoglie un valore \u2014 lo fanno i suoi output \u2014 quindi obbligatorieta\u2019, valore\r\n          predefinito e regola di validazione non si applicano: dichiararli e\u2019\r\n          <code>SCREEN_FIELD_CONFIGURATION_INVALID</code> e il runtime li ignora. Per pretendere una\r\n          compilazione: la validazione la fa il componente stesso, oppure si controlla la variabile di\r\n          destinazione con una Decision dopo la schermata.\r\n        </p>\r\n      }\r\n\r\n      <!-- ------------------------------------------------ campi che raccolgono un valore -->\r\n      @if (selectedType()?.storesValue) {\r\n        <fieldset class=\"fb-section\">\r\n          <legend class=\"fb-section__title\">Valore</legend>\r\n\r\n          @if (selectedField()!.fieldType !== 'ObjectProvided') {\r\n            <div class=\"fb-field\">\r\n              <label\r\n                class=\"fb-field__label\"\r\n                [class.fb-field__label--required]=\"!!selectedType()?.requiresDataType\"\r\n              >\r\n                Tipo di dato\r\n              </label>\r\n              <select\r\n                class=\"fb-select\"\r\n                [fbValue]=\"selectedField()!.dataType || ''\"\r\n                (change)=\"setFieldProperty('dataType', $any($event.target).value)\"\r\n              >\r\n                <option value=\"\">\u2014 scegli \u2014</option>\r\n                @for (entry of dictionary.dataTypes(); track entry.value) {\r\n                  <option [value]=\"entry.value\">{{ entry.label }}</option>\r\n                }\r\n              </select>\r\n              @if (selectedType()?.requiresDataType && !selectedField()!.dataType) {\r\n                <p class=\"fb-field__error\">Obbligatorio per questo tipo di campo (DATA_TYPE_MISSING).</p>\r\n              }\r\n              @if (selectedType()?.isCollection) {\r\n                <p class=\"fb-field__hint\">\r\n                  Il valore raccolto e\u2019 una <strong>collection</strong>, non una stringa con i valori\r\n                  separati: nelle condizioni si usano gli operatori di collection.\r\n                </p>\r\n              }\r\n            </div>\r\n\r\n            @if (requiresObjectType()) {\r\n              <div class=\"fb-field\">\r\n                <label class=\"fb-field__label\" [class.fb-field__label--required]=\"objectTypeIsStructure()\">\r\n                  {{\r\n                    objectTypeIsStructure()\r\n                      ? 'Classe'\r\n                      : selectedField()!.dataType === 'Enum'\r\n                        ? 'Tipo di enumerazione'\r\n                        : 'Oggetto'\r\n                  }}\r\n                </label>\r\n                @if (selectedField()!.dataType === 'Enum') {\r\n                  <!-- Dizionario chiuso: si sceglie, non si scrive. -->\r\n                  <select\r\n                    class=\"fb-select\"\r\n                    [fbValue]=\"selectedField()!.objectType || ''\"\r\n                    (change)=\"setFieldProperty('objectType', $any($event.target).value)\"\r\n                  >\r\n                    <option value=\"\">\u2014 scegli \u2014</option>\r\n                    @for (entry of enumOptions(); track entry.name) {\r\n                      <option [value]=\"entry.name\">{{ entry.label || entry.name }}</option>\r\n                    }\r\n                  </select>\r\n                  @if (!selectedField()!.objectType) {\r\n                    <p class=\"fb-field__hint fb-field__hint--warn\">\r\n                      Senza il tipo concreto l\u2019editor non puo\u2019 proporre i valori dell\u2019enumerazione.\r\n                    </p>\r\n                  }\r\n                } @else if (objectTypeIsStructure()) {\r\n                  <fb-structure-picker\r\n                    [value]=\"selectedField()!.objectType\"\r\n                    label=\"Classe\"\r\n                    (valueChange)=\"setFieldProperty('objectType', $event ?? '')\"\r\n                  />\r\n                  @if (!selectedField()!.objectType) {\r\n                    <p class=\"fb-field__error\">\r\n                      La classe e\u2019 obbligatoria: senza, il runtime non ha nulla da istanziare\r\n                      (OBJECT_TYPE_MISSING).\r\n                    </p>\r\n                  }\r\n                } @else {\r\n                  <fb-object-picker\r\n                    [value]=\"selectedField()!.objectType\"\r\n                    label=\"Oggetto\"\r\n                    (valueChange)=\"setFieldProperty('objectType', $event ?? '')\"\r\n                  />\r\n                }\r\n              </div>\r\n            }\r\n          } @else {\r\n            <div class=\"fb-field\">\r\n              <label class=\"fb-field__label fb-field__label--required\">Campo dell\u2019entita\u2019</label>\r\n              <p class=\"fb-field__hint\">\r\n                Tipo, label, obbligatorieta\u2019, scala e \u2014 se il campo e\u2019 una picklist \u2014 le opzioni arrivano\r\n                dallo schema dati: qui non si ridichiarano.\r\n              </p>\r\n              <fb-object-picker\r\n                [value]=\"providedObject() || undefined\"\r\n                label=\"Oggetto\"\r\n                (valueChange)=\"setProvidedObject($event)\"\r\n              />\r\n              <fb-field-picker\r\n                [value]=\"providedField() || undefined\"\r\n                [object]=\"providedObject() || undefined\"\r\n                label=\"Campo\"\r\n                (valueChange)=\"setProvidedField($event)\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          <label class=\"fb-check\">\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"selectedIsRequired()\"\r\n              (change)=\"setRequired($any($event.target).checked)\"\r\n            />\r\n            Obbligatorio\r\n          </label>\r\n          <label class=\"fb-check\">\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"selectedIsEditable()\"\r\n              (change)=\"setEditable($any($event.target).checked)\"\r\n            />\r\n            Modificabile\r\n          </label>\r\n          @if (!selectedIsEditable()) {\r\n            <p class=\"fb-field__hint\">\r\n              A <code>false</code> il runtime <strong>ignora</strong> cio\u2019 che il client rimanda indietro:\r\n              e\u2019 l\u2019unico modo di rendere un campo davvero di sola lettura.\r\n            </p>\r\n          }\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Valore di default</label>\r\n            <fb-value-editor\r\n              [value]=\"selectedField()!.defaultValue\"\r\n              [dataType]=\"selectedField()!.dataType\"\r\n              [objectType]=\"selectedField()!.objectType\"\r\n              [isCollection]=\"selectedType()?.isCollection\"\r\n              label=\"Valore di default\"\r\n              (valueChange)=\"setDefaultValue($event)\"\r\n            />\r\n          </div>\r\n\r\n          @if (scaleApplies()) {\r\n            <div class=\"fb-field\">\r\n              <label class=\"fb-field__label\">Decimali</label>\r\n              <input\r\n                class=\"fb-input\"\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [value]=\"selectedField()!.scale ?? ''\"\r\n                (change)=\"setNumberProperty('scale', $any($event.target).value)\"\r\n              />\r\n            </div>\r\n          } @else if (selectedField()!.scale !== undefined) {\r\n            <p class=\"fb-field__hint fb-field__hint--warn\">\r\n              <code>scale</code> su un campo non numerico e\u2019 SCALE_NOT_APPLICABLE.\r\n            </p>\r\n          }\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Lunghezza massima</label>\r\n            <input\r\n              class=\"fb-input\"\r\n              type=\"number\"\r\n              min=\"1\"\r\n              [value]=\"selectedField()!.maxLength ?? ''\"\r\n              (change)=\"setNumberProperty('maxLength', $any($event.target).value)\"\r\n            />\r\n            <p class=\"fb-field__hint\">Verificata anche dal runtime (TOO_LONG).</p>\r\n          </div>\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Tornando sulla schermata</label>\r\n            <select\r\n              class=\"fb-select\"\r\n              [fbValue]=\"selectedField()!.inputsOnNextNavToAssocScrn || ''\"\r\n              (change)=\"setFieldProperty('inputsOnNextNavToAssocScrn', $any($event.target).value)\"\r\n            >\r\n              <option value=\"\">Predefinito (mantieni i valori)</option>\r\n              @for (entry of dictionary.screenFieldInputsRevisited(); track entry.value) {\r\n                <option [value]=\"entry.value\">{{ entry.label }}</option>\r\n              }\r\n            </select>\r\n          </div>\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Regola di validazione</label>\r\n            <!--\r\n              `commitOn=\"change\"`: qui mutare il documento ridisegna l'anteprima, e riscriverla a\r\n              ogni tasto costa. La verifica parte lo stesso mentre si digita (\u00A76.3).\r\n            -->\r\n            <fb-formula-editor\r\n              [expression]=\"selectedField()!.validationRule?.formulaExpression || ''\"\r\n              usage=\"ValidationRule\"\r\n              expectedDataType=\"Boolean\"\r\n              commitOn=\"change\"\r\n              [rows]=\"2\"\r\n              placeholder=\"Espressione, es. LEN(Nome) > 3\"\r\n              ariaLabel=\"Regola di validazione\"\r\n              (expressionChange)=\"setValidationRule('formulaExpression', $event)\"\r\n            />\r\n            <input\r\n              class=\"fb-input\"\r\n              placeholder=\"Messaggio mostrato quando l\u2019espressione e\u2019 falsa\"\r\n              [value]=\"selectedField()!.validationRule?.errorMessage || ''\"\r\n              (change)=\"setValidationRule('errorMessage', $any($event.target).value)\"\r\n            />\r\n            <p class=\"fb-field__hint\">\r\n              L\u2019espressione la valuta il motore di regole: il backend non la interpreta, la fa\r\n              verificare al motore.\r\n            </p>\r\n          </div>\r\n        </fieldset>\r\n      }\r\n\r\n      <!-- --------------------------------------------------------------- choice -->\r\n      @if (selectedType()?.acceptsChoices) {\r\n        <fieldset class=\"fb-section\">\r\n          <legend class=\"fb-section__title\">Opzioni</legend>\r\n          <p class=\"fb-section__note\">\r\n            Accetta <strong>Choice</strong> e <strong>Dynamic choice set</strong>, nell\u2019ordine in cui le\r\n            opzioni compaiono. Puntare a una variabile e\u2019 SCREEN_FIELD_CHOICE_UNKNOWN.\r\n          </p>\r\n\r\n          @if (!selectedField()!.choiceReferences?.length) {\r\n            @if (selectedField()!.fieldType === 'ObjectProvided') {\r\n              <!-- Le opzioni di una picklist arrivano dallo schema: qui si aggiungono solo se\r\n                   si vuole sostituirle, e non dichiararne nessuna e' il caso normale. -->\r\n              <p class=\"fb-field__hint\">\r\n                Se il campo dello schema e\u2019 una picklist, le opzioni arrivano da l\u00EC: dichiararle qui\r\n                serve solo a sostituirle.\r\n              </p>\r\n            } @else {\r\n              <p class=\"fb-callout fb-callout--warn\">\r\n                Nessuna opzione: il campo non ha niente da mostrare (SCREEN_FIELD_CHOICES_MISSING).\r\n              </p>\r\n            }\r\n          }\r\n\r\n          <div class=\"fb-list\">\r\n            @for (choice of selectedField()!.choiceReferences || []; track $index) {\r\n              <div class=\"fb-list__item\">\r\n                <div class=\"fb-list__header\">\r\n                  <span class=\"fb-list__index\">{{ $index + 1 }}</span>\r\n                  <span class=\"fb-list__title\">{{ choice }}</span>\r\n                  <span class=\"fb-list__spacer\"></span>\r\n                  <button type=\"button\" class=\"fb-btn fb-btn--sm\" (click)=\"moveChoice($index, -1)\">\u2191</button>\r\n                  <button type=\"button\" class=\"fb-btn fb-btn--sm\" (click)=\"moveChoice($index, 1)\">\u2193</button>\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"fb-btn fb-btn--ghost fb-btn--sm\"\r\n                    aria-label=\"Rimuovi\"\r\n                    (click)=\"removeChoice($index)\"\r\n                  >\r\n                    \u00D7\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Aggiungi un\u2019opzione</label>\r\n            <fb-name-picker\r\n              [options]=\"choiceOptions()\"\r\n              label=\"Choice\"\r\n              placeholder=\"Scegli una choice o un choice set\"\r\n              unknownMessage=\"Questo nome non e\u2019 una choice ne\u2019 un choice set: e\u2019 SCREEN_FIELD_CHOICE_UNKNOWN.\"\r\n              unknownSeverity=\"error\"\r\n              emptyMessage=\"Il flow non dichiara nessuna choice: creale nel pannello delle risorse.\"\r\n              (valueChange)=\"addChoice($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Opzione selezionata all\u2019apertura</label>\r\n            <select\r\n              class=\"fb-select\"\r\n              [fbValue]=\"selectedField()!.defaultSelectedChoiceReference || ''\"\r\n              (change)=\"setFieldProperty('defaultSelectedChoiceReference', $any($event.target).value)\"\r\n            >\r\n              <option value=\"\">\u2014 nessuna \u2014</option>\r\n              @for (choice of selectedField()!.choiceReferences || []; track $index) {\r\n                <option [value]=\"choice\">{{ choice }}</option>\r\n              }\r\n            </select>\r\n            @if (defaultChoiceIsForeign()) {\r\n              <p class=\"fb-field__hint fb-field__hint--warn\">\r\n                \u00AB{{ selectedField()!.defaultSelectedChoiceReference }}\u00BB non e\u2019 fra le opzioni elencate qui\r\n                sopra.\r\n              </p>\r\n            }\r\n          </div>\r\n        </fieldset>\r\n      }\r\n\r\n      <!-- ------------------------------------------------------- contenitori -->\r\n      @if (selectedType()?.isContainer) {\r\n        <fieldset class=\"fb-section\">\r\n          <legend class=\"fb-section__title\">Contenitore</legend>\r\n          @if (selectedField()!.fieldType === 'RegionContainer') {\r\n            <div class=\"fb-field\">\r\n              <label class=\"fb-field__label\">Tipo di sezione</label>\r\n              <select\r\n                class=\"fb-select\"\r\n                [fbValue]=\"selectedField()!.regionContainerType || ''\"\r\n                (change)=\"setFieldProperty('regionContainerType', $any($event.target).value)\"\r\n              >\r\n                <option value=\"\">\u2014 predefinito \u2014</option>\r\n                @for (entry of dictionary.regionContainerTypes(); track entry.value) {\r\n                  <option [value]=\"entry.value\">{{ entry.label }}</option>\r\n                }\r\n              </select>\r\n            </div>\r\n          }\r\n          @if (!selectedField()!.fields?.length) {\r\n            <p class=\"fb-callout fb-callout--warn\">\r\n              Il contenitore e\u2019 vuoto: non produce niente sulla schermata (SCREEN_CONTAINER_EMPTY).\r\n            </p>\r\n          }\r\n        </fieldset>\r\n      }\r\n\r\n      <!-- --------------------------------------------------- ComponentInstance -->\r\n      @if (selectedField()!.fieldType === 'ComponentInstance') {\r\n        <fieldset class=\"fb-section\">\r\n          <legend class=\"fb-section__title\">Componente</legend>\r\n          <p class=\"fb-section__note\">\r\n            Componenti e form sono la stessa domanda al frontend \u2014 cosa sa rendere, e con quali parametri\r\n            \u2014 e passano dallo stesso catalogo. Un <code>ComponentInstance</code> non ha un valore proprio:\r\n            lo hanno i suoi output.\r\n          </p>\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label fb-field__label--required\">Componente</label>\r\n            <fb-name-picker\r\n              [value]=\"selectedField()!.extensionName\"\r\n              [options]=\"componentOptions()\"\r\n              [unusableOptions]=\"unusableComponents()\"\r\n              label=\"Componente\"\r\n              placeholder=\"Scrivi o scegli un componente\"\r\n              [isMono]=\"false\"\r\n              unknownMessage=\"Questo componente non esiste nel catalogo: e\u2019 SCREEN_COMPONENT_UNKNOWN.\"\r\n              unknownSeverity=\"error\"\r\n              unusableMessage=\"Questo nome e\u2019 una schermata intera, non un componente montabile qui (FORM_KIND_MISMATCH).\"\r\n              emptyMessage=\"Il catalogo dei componenti non e\u2019 popolato: il nome non viene verificato.\"\r\n              (valueChange)=\"setFieldProperty('extensionName', $event ?? '')\"\r\n            />\r\n            @if (!selectedField()!.extensionName) {\r\n              <p class=\"fb-field__error\">Obbligatorio: senza, SCREEN_COMPONENT_MISSING.</p>\r\n            }\r\n          </div>\r\n\r\n          <label class=\"fb-check\">\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"selectedField()!.storeOutputAutomatically === true\"\r\n              (change)=\"setStoreOutputAutomatically($any($event.target).checked)\"\r\n            />\r\n            Rendi gli output referenziabili automaticamente\r\n          </label>\r\n          @if (selectedField()!.storeOutputAutomatically) {\r\n            <p class=\"fb-field__hint\">\r\n              Gli output si referenziano come\r\n              <code>{{ selectedField()!.name || 'Campo' }}.nomeOutput</code>, senza dichiarare variabili.\r\n            </p>\r\n          }\r\n          @if (hasOutputConflict()) {\r\n            <p class=\"fb-callout fb-callout--error\">\r\n              Output automatici <strong>e</strong> parametri di uscita insieme:\r\n              OUTPUT_CONFIGURATION_CONFLICT.\r\n            </p>\r\n          }\r\n\r\n          <fb-parameter-editor\r\n            [holder]=\"$any(selectedField())\"\r\n            [catalogParameters]=\"componentParameterList()\"\r\n            inputTitle=\"Valori passati al componente\"\r\n            outputTitle=\"Valori raccolti dal componente\"\r\n            [showOutputs]=\"!selectedField()!.storeOutputAutomatically\"\r\n            outputsDisabledReason=\"Gli output sono automatici: disattivalo per assegnarli a variabili.\"\r\n            (changed)=\"onComponentParametersChanged($event)\"\r\n          />\r\n        </fieldset>\r\n      }\r\n\r\n      <!-- ------------------------------------------------------- visibilita' -->\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Visibilita\u2019</legend>\r\n        <p class=\"fb-section__note\">\r\n          Le regole si rivalutano <strong>sui valori appena inviati</strong>: e\u2019 cos\u00EC che un campo compare\r\n          in funzione di un altro campo della stessa schermata. Un campo risultato nascosto viene\r\n          <strong>azzerato</strong> e non viene validato.\r\n        </p>\r\n        <fb-condition-editor\r\n          [holder]=\"visibilityRule()\"\r\n          title=\"Mostra il campo quando\"\r\n          [allowFormula]=\"false\"\r\n          [issuePath]=\"'fields[' + (selectedField()!.name || '') + '].visibilityRule'\"\r\n          (changed)=\"onVisibilityChanged($event)\"\r\n        />\r\n      </fieldset>\r\n    }\r\n  </aside>\r\n</div>\r\n\r\n<fb-connector-editor\r\n  [nodeName]=\"name()\"\r\n  [node]=\"node()\"\r\n  [outlets]=\"outlets()\"\r\n  (connectorChanged)=\"onConnectorChanged($event)\"\r\n/>\r\n\r\n<!--\r\n  ============================================================== l'anteprima\r\n  Due template ricorsivi. `listTpl` disegna i figli di un contenitore, e nient'altro: `data-item`\r\n  marca cio' che conta come fratello nel calcolo del punto di rilascio, e il segnaposto del\r\n  contenitore vuoto ne resta fuori. La barra di inserimento non e' qui \u2014 sta sopra l'anteprima,\r\n  vedi il velo nel frame.\r\n-->\r\n<ng-template #listTpl let-fields let-parent=\"parent\" let-axis=\"axis\">\r\n  @for (child of fields; track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"fieldTpl\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: child, path: childPath(parent, $index), axis: axis }\"\r\n    />\r\n  }\r\n  @if (!fields.length) {\r\n    <p class=\"fb-scr__drop-hint\">Trascina qui un componente</p>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #fieldTpl let-field let-path=\"path\" let-axis=\"axis\">\r\n  <div\r\n    class=\"fb-scr__item\"\r\n    data-item=\"\"\r\n    cdkDrag\r\n    [style.grid-column]=\"'span ' + widthOf(field)\"\r\n    [class.fb-scr__item--selected]=\"isSelected(path)\"\r\n    [class.fb-scr__item--dragging]=\"isDragging(path)\"\r\n    [class.fb-scr__item--container]=\"isContainer(field)\"\r\n    (cdkDragStarted)=\"onFieldDragStarted(path)\"\r\n    (cdkDragMoved)=\"onFieldDragMoved($event)\"\r\n    (cdkDragEnded)=\"onFieldDragEnded($event, path)\"\r\n    (click)=\"select(path); $event.stopPropagation()\"\r\n  >\r\n    <span class=\"fb-scr__grip\" cdkDragHandle title=\"Trascina per spostare\" aria-hidden=\"true\">\u283F</span>\r\n    @if (field.visibilityRule?.conditions?.length) {\r\n      <span class=\"fb-scr__flag\" title=\"Ha una regola di visibilita\u2019\">\u25D0</span>\r\n    }\r\n\r\n    @switch (field.fieldType) {\r\n      @case ('RegionContainer') {\r\n        <div class=\"fb-scr__section\">\r\n          @if (field.regionContainerType !== 'SectionWithoutHeader') {\r\n            <header class=\"fb-scr__section-head\">{{ field.fieldText || field.name }}</header>\r\n          }\r\n          <div class=\"fb-scr__cols\" [attr.data-drop]=\"dropId(path)\" data-axis=\"row\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"listTpl\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: field.fields || [], parent: path, axis: 'row' }\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n      @case ('Region') {\r\n        <div class=\"fb-scr__region\">\r\n          <span class=\"fb-scr__region-tag\">{{ field.name }} \u00B7 {{ widthOf(field) }}/12</span>\r\n          <div class=\"fb-scr__region-body\" [attr.data-drop]=\"dropId(path)\" data-axis=\"column\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"listTpl\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: field.fields || [], parent: path, axis: 'column' }\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n      @case ('DisplayText') {\r\n        <p class=\"fb-scr__display\">{{ field.fieldText || '(testo vuoto)' }}</p>\r\n      }\r\n      @case ('LargeTextArea') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control fb-scr__control--area\">{{ placeholderOf(field) }}</div>\r\n      }\r\n      @case ('PasswordField') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control\">\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022</div>\r\n      }\r\n      @case ('DropdownBox') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control fb-scr__control--select\">\r\n          <span>{{ field.defaultSelectedChoiceReference || choiceLabelsOf(field)[0] || '\u2014 scegli \u2014' }}</span>\r\n          <span aria-hidden=\"true\">\u25BE</span>\r\n        </div>\r\n      }\r\n      @case ('MultiSelectPicklist') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control fb-scr__control--select\">\r\n          <span>{{ choiceLabelsOf(field).join(', ') || '\u2014 scegli \u2014' }}</span>\r\n          <span aria-hidden=\"true\">\u2261</span>\r\n        </div>\r\n      }\r\n      @case ('RadioButtons') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__options\">\r\n          @for (option of choiceLabelsOf(field); track $index) {\r\n            <span class=\"fb-scr__option\">\u25EF {{ option }}</span>\r\n          }\r\n          @if (!choiceLabelsOf(field).length) {\r\n            <span class=\"fb-scr__option fb-scr__option--missing\">Nessuna opzione</span>\r\n          }\r\n        </div>\r\n      }\r\n      @case ('MultiSelectCheckboxes') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__options\">\r\n          @for (option of choiceLabelsOf(field); track $index) {\r\n            <span class=\"fb-scr__option\">\u2610 {{ option }}</span>\r\n          }\r\n          @if (!choiceLabelsOf(field).length) {\r\n            <span class=\"fb-scr__option fb-scr__option--missing\">Nessuna opzione</span>\r\n          }\r\n        </div>\r\n      }\r\n      @case ('ComponentInstance') {\r\n        <!--\r\n          L\u2019etichetta si disegna se c\u2019e\u2019: il runtime la consegna in `label` come per gli altri\r\n          campi (\u00A75.2). Nessun asterisco: un componente non raccoglie un valore, quindi\r\n          \u00ABobbligatorio\u00BB non ha niente su cui applicarsi.\r\n        -->\r\n        @if (field.fieldText) {\r\n          <label class=\"fb-scr__label\">{{ field.fieldText }}</label>\r\n        }\r\n        <div class=\"fb-scr__component\">\r\n          <span aria-hidden=\"true\">\u2B21</span>\r\n          {{ field.extensionName || 'Componente non indicato' }}\r\n        </div>\r\n      }\r\n      @case ('ObjectProvided') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ field.fieldText || field.objectFieldReference || field.name }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control\">{{ placeholderOf(field) }}</div>\r\n        <span class=\"fb-scr__tag\">{{ field.objectFieldReference || 'campo non indicato' }}</span>\r\n      }\r\n      @default {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control\">{{ placeholderOf(field) }}</div>\r\n        @if (isUnknownType(field)) {\r\n          <span class=\"fb-scr__tag fb-scr__tag--warn\">{{ field.fieldType }}: tipo non nel dizionario</span>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".fb-scr{display:grid;grid-template-columns:220px minmax(0,1fr) 340px;gap:12px;align-items:start;margin-bottom:14px}@media(max-width:1100px){.fb-scr{grid-template-columns:minmax(0,1fr)}}.fb-scr__side,.fb-scr__props{min-width:0;padding:10px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-surface-alt, #f7f8fa)}.fb-scr__tabs{display:flex;gap:4px;margin-bottom:8px}.fb-scr__tab{flex:1;padding:5px 8px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff);color:var(--fb-text-muted, #6b7086);font:inherit;font-size:11px;font-weight:600;cursor:pointer}.fb-scr__tab--active{border-color:var(--fb-accent, #4f6ef7);background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 10%,transparent);color:var(--fb-accent-strong, #3d59e0)}.fb-scr__side-hint,.fb-scr__side-empty{margin:6px 0;font-size:11px;color:var(--fb-text-muted, #6b7086)}.fb-scr__palette{display:flex;flex-direction:column;gap:4px;margin:8px 0 0;padding:0;max-height:320px;overflow-y:auto;overscroll-behavior:contain;list-style:none}.fb-scr__chip{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff);color:var(--fb-text, #1a1c23);font:inherit;font-size:12px;text-align:left;cursor:grab}.fb-scr__chip:hover{border-color:var(--fb-accent, #4f6ef7)}.fb-scr__chip-icon{flex:none;width:20px;text-align:center;color:var(--fb-text-muted, #6b7086)}.fb-scr__chip-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-scr__chip-label small{margin-left:4px;color:var(--fb-text-subtle, #98a2b3);font-size:10px}.fb-scr__canvas{min-width:0;padding:14px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-canvas-bg, #f4f5f7)}.fb-scr__frame{position:relative;display:flex;flex-direction:column;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-sm, 8px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));overflow:hidden}.fb-scr__frame-head{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--fb-border-subtle, #eef0f4);font-size:13px;font-weight:600}.fb-scr__help{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--fb-surface-sunken, #eef0f4);color:var(--fb-text-muted, #6b7086);font-size:10px}.fb-scr__body,.fb-scr__region-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-content:start;gap:8px 0;padding:12px;min-height:90px}.fb-scr__region-body{padding:8px;min-height:60px}.fb-scr__cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch;gap:0;padding:8px;min-height:60px}.fb-scr__cols>.fb-scr__item{display:flex;align-self:stretch}.fb-scr__cols>.fb-scr__item>.fb-scr__region{flex:1;min-width:0}.fb-scr__drop-hint{grid-column:1 / -1;margin:0;padding:10px;border:1px dashed var(--fb-border-strong, #cfd4de);border-radius:var(--fb-radius-xs, 6px);color:var(--fb-text-subtle, #98a2b3);font-size:11px;text-align:center}.fb-scr__marker{position:absolute;z-index:2;border-radius:2px;background:var(--fb-accent, #4f6ef7);pointer-events:none}.fb-scr__item{position:relative;box-sizing:border-box;padding:6px 8px;border:1px solid transparent;border-radius:var(--fb-radius-xs, 6px);cursor:pointer}.fb-scr__item:hover{border-color:var(--fb-border-strong, #cfd4de);background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 4%,transparent)}.fb-scr__item--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:inset 0 0 0 1px var(--fb-accent, #4f6ef7)}.fb-scr__item--dragging{opacity:.45;pointer-events:none}.fb-scr__grip{position:absolute;top:2px;left:-2px;padding:0 3px;color:var(--fb-text-subtle, #98a2b3);font-size:11px;line-height:1;opacity:0;cursor:grab}.fb-scr__item:hover>.fb-scr__grip,.fb-scr__item--selected>.fb-scr__grip{opacity:1}.fb-scr__flag{position:absolute;top:2px;right:4px;color:var(--fb-text-muted, #6b7086);font-size:11px}.fb-scr__label{display:block;margin-bottom:3px;font-size:11px;font-weight:600;color:var(--fb-text, #1a1c23)}.fb-scr__req{color:var(--fb-error, #dc2626)}.fb-scr__control{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:26px;padding:4px 8px;border:1px solid var(--fb-border-strong, #cfd4de);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff);color:var(--fb-text-subtle, #98a2b3);font-size:12px;pointer-events:none}.fb-scr__control--area{min-height:54px;align-items:flex-start}.fb-scr__display{margin:0;font-size:12px;color:var(--fb-text, #1a1c23)}.fb-scr__options{display:flex;flex-direction:column;gap:2px;pointer-events:none}.fb-scr__option{font-size:12px;color:var(--fb-text-muted, #6b7086)}.fb-scr__option--missing{color:var(--fb-warning, #b7791f)}.fb-scr__component{display:flex;align-items:center;gap:6px;padding:10px;border:1px dashed var(--fb-accent, #4f6ef7);border-radius:var(--fb-radius-xs, 6px);background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 5%,transparent);font-size:12px;color:var(--fb-text-muted, #6b7086)}.fb-scr__tag{display:inline-block;margin-top:3px;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-scr__tag--warn{color:var(--fb-warning, #b7791f)}.fb-scr__section{border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface-alt, #f7f8fa)}.fb-scr__section-head{padding:5px 10px;border-bottom:1px solid var(--fb-border-subtle, #eef0f4);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--fb-text-muted, #6b7086)}.fb-scr__region{border:1px dashed var(--fb-border-strong, #cfd4de);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff)}.fb-scr__region-tag{display:block;padding:3px 6px 0;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-scr__frame-foot{display:flex;align-items:center;gap:6px;padding:8px 12px;border-top:1px solid var(--fb-border-subtle, #eef0f4);background:var(--fb-surface-alt, #f7f8fa)}.fb-scr__spacer{flex:1}.fb-scr__btn{padding:3px 10px;border:1px solid var(--fb-border-strong, #cfd4de);border-radius:var(--fb-radius-xs, 6px);font-size:11px;color:var(--fb-text-muted, #6b7086)}.fb-scr__btn--primary{border-color:var(--fb-accent, #4f6ef7);background:var(--fb-accent, #4f6ef7);color:var(--fb-accent-contrast, #fff)}.fb-scr__canvas-note{margin-top:10px}.fb-scr__props{background:var(--fb-surface, #fff)}.fb-scr__props-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.fb-scr__props-title{flex:1;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--fb-text-muted, #6b7086)}.fb-scr__props-actions{display:flex;flex-wrap:wrap;gap:3px}.fb-btn--sm{padding:3px 7px;font-size:11px}.fb-scr__width{display:flex;align-items:center;gap:8px}.fb-scr__width input[type=range]{flex:1;min-width:0}.fb-scr__width-value{font-size:11px;color:var(--fb-text-muted, #6b7086)}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: ConditionEditorComponent, selector: "fb-condition-editor", inputs: ["holder", "title", "allowFormula", "allowLogic", "issuePath"], outputs: ["changed"] }, { kind: "component", type: ConnectorEditorComponent, selector: "fb-connector-editor", inputs: ["nodeName", "node", "outlets", "title"], outputs: ["connectorChanged"] }, { kind: "component", type: FieldPickerComponent, selector: "fb-field-picker", inputs: ["value", "object", "usage", "label", "placeholder", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: FormulaEditorComponent, selector: "fb-formula-editor", inputs: ["expression", "usage", "expectedDataType", "scale", "placeholder", "ariaLabel", "disabled", "rows", "commitOn"], outputs: ["expressionChange"] }, { kind: "component", type: NamePickerComponent, selector: "fb-name-picker", inputs: ["value", "options", "label", "placeholder", "disabled", "unknownMessage", "unknownSeverity", "unusableOptions", "unusableMessage", "emptyMessage", "isMono"], outputs: ["valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ObjectPickerComponent, selector: "fb-object-picker", inputs: ["value", "label", "placeholder", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: ParameterEditorComponent, selector: "fb-parameter-editor", inputs: ["holder", "catalogParameters", "inputTitle", "outputTitle", "showInputs", "showOutputs", "outputsDisabledReason", "extraTargets"], outputs: ["changed"] }, { kind: "directive", type: SelectValueDirective, selector: "select[fbValue]", inputs: ["fbValue"] }, { kind: "component", type: StructurePickerComponent, selector: "fb-structure-picker", inputs: ["value", "label", "placeholder", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: ValueEditorComponent, selector: "fb-value-editor", inputs: ["value", "label", "dataType", "objectType", "isCollection", "disabled", "allowFormula"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DynamicScreenInspectorComponent, decorators: [{
             type: Component,
@@ -9517,7 +10054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         SelectValueDirective,
                         StructurePickerComponent,
                         ValueEditorComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-scr\">\r\n  <!-- ============================================================ sinistra -->\r\n  <aside class=\"fb-scr__side\" aria-label=\"Componenti e campi\">\r\n    <div class=\"fb-scr__tabs\" role=\"tablist\">\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"fb-scr__tab\"\r\n        [class.fb-scr__tab--active]=\"paletteTab() === 'components'\"\r\n        [attr.aria-selected]=\"paletteTab() === 'components'\"\r\n        (click)=\"setPaletteTab('components')\"\r\n      >\r\n        Componenti\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"fb-scr__tab\"\r\n        [class.fb-scr__tab--active]=\"paletteTab() === 'fields'\"\r\n        [attr.aria-selected]=\"paletteTab() === 'fields'\"\r\n        (click)=\"setPaletteTab('fields')\"\r\n      >\r\n        Campi\r\n      </button>\r\n    </div>\r\n\r\n    @if (paletteTab() === 'components') {\r\n      @if (!dictionary.screenFieldTypes().length) {\r\n        <p class=\"fb-callout fb-callout--warn\">\r\n          Il dizionario <code>screenFieldTypes</code> non e\u2019 disponibile: senza i suoi flag l\u2019editor non\r\n          sa quali campi ammette ciascun tipo, e non li inventa.\r\n        </p>\r\n      }\r\n      <p class=\"fb-scr__side-hint\">Trascina sulla schermata, oppure clicca per aggiungere.</p>\r\n      <ul class=\"fb-scr__palette\">\r\n        @for (entry of dictionary.screenFieldTypes(); track entry.value) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-scr__chip\"\r\n              cdkDrag\r\n              [title]=\"entry.description || entry.label\"\r\n              (cdkDragMoved)=\"onPaletteDragMoved($event)\"\r\n              (cdkDragEnded)=\"onComponentDragEnded($event, entry.value)\"\r\n              (click)=\"addComponentAtSelection(entry.value)\"\r\n            >\r\n              <span class=\"fb-scr__chip-icon\" aria-hidden=\"true\">{{ iconOf(entry.value) }}</span>\r\n              <span class=\"fb-scr__chip-label\">{{ entry.label }}</span>\r\n            </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else {\r\n      <p class=\"fb-scr__side-hint\">\r\n        Un campo dell\u2019entita\u2019 porta con se\u2019 tipo, etichetta, obbligatorieta\u2019 e opzioni: arrivano dallo\r\n        schema dati, qui non si ridichiarano.\r\n      </p>\r\n      <!-- Il catalogo non e' un dizionario chiuso: si sceglie o si scrive, come ovunque si\r\n           indichi un'entita' (vedi `object-picker`). -->\r\n      <fb-object-picker\r\n        [value]=\"fieldsObject()\"\r\n        label=\"Entita\u2019\"\r\n        placeholder=\"Scrivi o scegli un\u2019entita\u2019\"\r\n        (valueChange)=\"setFieldsObject($event)\"\r\n      />\r\n      @if (fieldsObject() && !fieldsOfObject().length) {\r\n        <p class=\"fb-scr__side-empty\">\r\n          Nessun campo dichiarato per questa entita\u2019: il catalogo non li espone, non significa che non\r\n          ci siano.\r\n        </p>\r\n      }\r\n      <ul class=\"fb-scr__palette\">\r\n        @for (field of fieldsOfObject(); track $index) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-scr__chip\"\r\n              cdkDrag\r\n              [title]=\"field.name + (field.dataType ? ' \u00B7 ' + field.dataType : '')\"\r\n              (cdkDragMoved)=\"onPaletteDragMoved($event)\"\r\n              (cdkDragEnded)=\"onObjectFieldDragEnded($event, field)\"\r\n              (click)=\"addObjectFieldAtSelection(field)\"\r\n            >\r\n              <span class=\"fb-scr__chip-icon\" aria-hidden=\"true\">\u2317</span>\r\n              <span class=\"fb-scr__chip-label\">\r\n                {{ field.label || field.name }}\r\n                @if (field.isRequired) {\r\n                  <span class=\"fb-scr__req\">*</span>\r\n                }\r\n                <small>{{ field.dataType }}</small>\r\n              </span>\r\n            </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n  </aside>\r\n\r\n  <!-- ============================================================== centro -->\r\n  <!-- Cliccare fuori da un campo riporta a destra le proprieta' della schermata. -->\r\n  <section class=\"fb-scr__canvas\" aria-label=\"Anteprima della schermata\" (click)=\"selectScreen()\">\r\n    <div class=\"fb-scr__frame\">\r\n      @if (showHeader()) {\r\n        <header class=\"fb-scr__frame-head\">\r\n          {{ $any(node()).label || name() }}\r\n          @if (screen().helpText) {\r\n            <span class=\"fb-scr__help\" [title]=\"screen().helpText || ''\">?</span>\r\n          }\r\n        </header>\r\n      }\r\n\r\n      <div\r\n        class=\"fb-scr__body\"\r\n        [attr.data-drop]=\"''\"\r\n        data-axis=\"column\"\r\n        [class.fb-scr__body--empty]=\"isEmpty()\"\r\n      >\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"listTpl\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: screen().fields || [], parent: [], axis: 'column' }\"\r\n        />\r\n      </div>\r\n\r\n      <!--\r\n        La barra di inserimento e' un **velo** sopra l'anteprima, non un figlio del contenitore di\r\n        rilascio: dentro la griglia occupava una riga intera e spostava in basso proprio la sezione\r\n        che si stava puntando, che allora usciva da sotto il puntatore e il bersaglio oscillava.\r\n      -->\r\n      @if (dropMarker(); as bar) {\r\n        <div\r\n          class=\"fb-scr__marker\"\r\n          [style.left.px]=\"bar.left\"\r\n          [style.top.px]=\"bar.top\"\r\n          [style.width.px]=\"bar.width\"\r\n          [style.height.px]=\"bar.height\"\r\n        ></div>\r\n      }\r\n\r\n      @if (showFooter()) {\r\n        <footer class=\"fb-scr__frame-foot\">\r\n          @if (allowPause()) {\r\n            <span class=\"fb-scr__btn fb-scr__btn--ghost\">{{ screen().pauseButtonLabel || 'Pausa' }}</span>\r\n          }\r\n          <span class=\"fb-scr__spacer\"></span>\r\n          @if (allowBack()) {\r\n            <span class=\"fb-scr__btn fb-scr__btn--ghost\">{{ screen().backButtonLabel || 'Indietro' }}</span>\r\n          }\r\n          <span class=\"fb-scr__btn fb-scr__btn--primary\">\r\n            {{ screen().nextOrFinishButtonLabel || (allowFinish() ? 'Fine' : 'Avanti') }}\r\n          </span>\r\n        </footer>\r\n      }\r\n    </div>\r\n\r\n    @if (isEmpty()) {\r\n      <p class=\"fb-callout fb-callout--warn fb-scr__canvas-note\">\r\n        La schermata non ha campi: non c\u2019e\u2019 niente da mostrare all\u2019utente (SCREEN_WITHOUT_FIELDS).\r\n      </p>\r\n    }\r\n  </section>\r\n\r\n  <!-- ============================================================== destra -->\r\n  <aside class=\"fb-scr__props\" aria-label=\"Proprieta\u2019\">\r\n    @if (!selectedField()) {\r\n      <!-- ------------------------------------------------ proprieta' della schermata -->\r\n      <header class=\"fb-scr__props-head\">\r\n        <h3 class=\"fb-scr__props-title\">Schermata</h3>\r\n      </header>\r\n      <p class=\"fb-scr__side-hint\">Seleziona un campo nell\u2019anteprima per configurarlo.</p>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Testo di aiuto</label>\r\n        <textarea\r\n          class=\"fb-textarea\"\r\n          [value]=\"screen().helpText || ''\"\r\n          (input)=\"setScreenText('helpText', $any($event.target).value)\"\r\n        ></textarea>\r\n      </div>\r\n\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Navigazione</legend>\r\n        <p class=\"fb-section__note\">\r\n          Questi flag sono un\u2019intenzione, non la verita\u2019 finale: a runtime il motore comunica\r\n          <code>canGoBack</code>, <code>canFinish</code> e <code>canPause</code> nella richiesta della\r\n          schermata.\r\n        </p>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"allowBack()\" (change)=\"setScreenFlag('allowBack', $any($event.target).checked)\" />\r\n          Consenti \u00ABindietro\u00BB\r\n        </label>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"allowFinish()\" (change)=\"setScreenFlag('allowFinish', $any($event.target).checked)\" />\r\n          Consenti \u00ABfine\u00BB\r\n        </label>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"allowPause()\" (change)=\"setScreenFlag('allowPause', $any($event.target).checked)\" />\r\n          Consenti \u00ABpausa\u00BB\r\n        </label>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"showHeader()\" (change)=\"setScreenFlag('showHeader', $any($event.target).checked)\" />\r\n          Mostra l\u2019intestazione\r\n        </label>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"showFooter()\" (change)=\"setScreenFlag('showFooter', $any($event.target).checked)\" />\r\n          Mostra il piede\r\n        </label>\r\n\r\n        @if (allowPause()) {\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Testo mostrato alla pausa</label>\r\n            <input\r\n              class=\"fb-input\"\r\n              [value]=\"screen().pausedText || ''\"\r\n              (input)=\"setScreenText('pausedText', $any($event.target).value)\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        @if (isDeadEnd()) {\r\n          <p class=\"fb-callout fb-callout--error\">\r\n            Questa schermata non ha una destinazione e non consente \u00ABfine\u00BB: e\u2019 un vicolo cieco, e\r\n            l\u2019utente resterebbe bloccato (SCREEN_DEAD_END).\r\n          </p>\r\n        }\r\n      </fieldset>\r\n\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Pulsanti</legend>\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">Etichetta \u00ABindietro\u00BB</label>\r\n          <input\r\n            class=\"fb-input\"\r\n            [value]=\"screen().backButtonLabel || ''\"\r\n            (input)=\"setScreenText('backButtonLabel', $any($event.target).value)\"\r\n          />\r\n        </div>\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">Etichetta \u00ABavanti / fine\u00BB</label>\r\n          <input\r\n            class=\"fb-input\"\r\n            [value]=\"screen().nextOrFinishButtonLabel || ''\"\r\n            (input)=\"setScreenText('nextOrFinishButtonLabel', $any($event.target).value)\"\r\n          />\r\n        </div>\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">Etichetta \u00ABpausa\u00BB</label>\r\n          <input\r\n            class=\"fb-input\"\r\n            [value]=\"screen().pauseButtonLabel || ''\"\r\n            (input)=\"setScreenText('pauseButtonLabel', $any($event.target).value)\"\r\n          />\r\n        </div>\r\n      </fieldset>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Stage mostrato nell\u2019avanzamento</label>\r\n        <fb-name-picker\r\n          [value]=\"screen().stageReference\"\r\n          [options]=\"stageOptions()\"\r\n          label=\"Stage\"\r\n          placeholder=\"Scegli uno stage\"\r\n          unknownMessage=\"Questo stage non e\u2019 dichiarato dal flow.\"\r\n          emptyMessage=\"Il flow non dichiara stage: creali nel pannello delle risorse.\"\r\n          (valueChange)=\"setScreenText('stageReference', $event ?? '')\"\r\n        />\r\n      </div>\r\n\r\n      <!--\r\n        Screen action (\u00A75.2). Due elenchi e non uno perche' il contratto li separa: piu' trigger\r\n        possono invocare la stessa action, quindi \u00ABchi la chiama\u00BB non e' una sua proprieta'. Le\r\n        action si aprono una alla volta: i cataloghi dipendono da tipo e nome, e tenerne N in volo\r\n        sarebbe N volte la corsa fra risposte.\r\n      -->\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Azioni della schermata</legend>\r\n        <p class=\"fb-section__note\">\r\n          Un campo che l\u2019utente compila puo\u2019 innescare un\u2019action i cui risultati finiscono negli\r\n          <strong>altri campi di questa schermata</strong>: e\u2019 il caso \u00ABscrivi il codice fiscale e nome\r\n          e cognome compaiono da soli\u00BB. L\u2019alternativa sarebbe spezzare la schermata in due con un\r\n          elemento Action in mezzo.\r\n        </p>\r\n\r\n        <div class=\"fb-list\">\r\n          @for (action of screenActions(); track $index) {\r\n            <div class=\"fb-list__item\">\r\n              <div class=\"fb-list__header\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--ghost\"\r\n                  [attr.aria-expanded]=\"selectedActionIndex() === $index\"\r\n                  (click)=\"selectAction(selectedActionIndex() === $index ? null : $index)\"\r\n                >\r\n                  {{ selectedActionIndex() === $index ? '\u25BE' : '\u25B8' }}\r\n                  {{ action.name || '(senza nome)' }}\r\n                </button>\r\n                <span class=\"fb-list__spacer\"></span>\r\n                <span class=\"fb-scr__side-hint\">{{ action.actionName || 'action non scelta' }}</span>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--ghost fb-btn--icon\"\r\n                  aria-label=\"Rimuovi l\u2019action\"\r\n                  (click)=\"removeScreenAction($index)\"\r\n                >\r\n                  \u00D7\r\n                </button>\r\n              </div>\r\n\r\n              @if (actionLosesResult(action)) {\r\n                <p class=\"fb-callout fb-callout--warn\">\r\n                  Questa action viene invocata ma il suo risultato si perde: aggiungi un parametro di\r\n                  uscita, oppure accendi l\u2019output automatico (SCREEN_ACTION_WITHOUT_OUTPUTS).\r\n                </p>\r\n              }\r\n              @if (actionHasNoTrigger(action)) {\r\n                <p class=\"fb-callout fb-callout--warn\">\r\n                  Nessun trigger la invoca: senza, non girera\u2019 mai.\r\n                </p>\r\n              }\r\n\r\n              @if (selectedActionIndex() === $index) {\r\n                <div class=\"fb-field\">\r\n                  <label class=\"fb-field__label fb-field__label--required\">Nome</label>\r\n                  <input\r\n                    class=\"fb-input fb-input--mono\"\r\n                    [value]=\"action.name || ''\"\r\n                    (change)=\"setActionName($index, $any($event.target).value)\"\r\n                  />\r\n                  @if (actionNameError(action); as error) {\r\n                    <p class=\"fb-field__error\">{{ error }}</p>\r\n                  }\r\n                  <p class=\"fb-field__hint\">\r\n                    E\u2019 il nome con cui la citano i trigger, e vive nello spazio dei nomi del flow. Con\r\n                    l\u2019output automatico e\u2019 anche la radice del riferimento:\r\n                    <code>{{ action.name || 'Cerca' }}.NomeOutput</code>.\r\n                  </p>\r\n                </div>\r\n\r\n                <div class=\"fb-field\">\r\n                  <label class=\"fb-field__label\">Tipo di action</label>\r\n                  <fb-name-picker\r\n                    [value]=\"action.actionType\"\r\n                    [options]=\"actionTypeOptions()\"\r\n                    label=\"Tipo di action\"\r\n                    placeholder=\"Scrivi o scegli un tipo\"\r\n                    [isMono]=\"false\"\r\n                    unknownMessage=\"Questo tipo di action non e\u2019 fra quelli dichiarati dal sistema ospite.\"\r\n                    emptyMessage=\"Catalogo dei tipi di action non disponibile: puoi scrivere il nome a mano.\"\r\n                    (valueChange)=\"setActionType($index, $event ?? '')\"\r\n                  />\r\n                </div>\r\n\r\n                <div class=\"fb-field\">\r\n                  <label class=\"fb-field__label fb-field__label--required\">Action</label>\r\n                  <fb-name-picker\r\n                    [value]=\"action.actionName\"\r\n                    [options]=\"actionOptions()\"\r\n                    label=\"Action\"\r\n                    placeholder=\"Scrivi o scegli un\u2019action\"\r\n                    [isMono]=\"false\"\r\n                    unknownMessage=\"Questa action non esiste nel catalogo del tipo scelto: e\u2019 ACTION_UNKNOWN.\"\r\n                    unknownSeverity=\"error\"\r\n                    emptyMessage=\"Scegli prima il tipo di action, oppure scrivi il nome a mano.\"\r\n                    (valueChange)=\"setActionTarget($index, $event ?? '')\"\r\n                  />\r\n                  @if (!action.actionName) {\r\n                    <p class=\"fb-field__error\">Obbligatoria: senza, ACTION_NAME_MISSING.</p>\r\n                  }\r\n                </div>\r\n\r\n                <label class=\"fb-check\">\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    [checked]=\"action.storeOutputAutomatically === true\"\r\n                    (change)=\"setActionStoreOutput($index, $any($event.target).checked)\"\r\n                  />\r\n                  Output automatico\r\n                </label>\r\n                <p class=\"fb-field__hint\">\r\n                  L\u2019output automatico rende il risultato leggibile come\r\n                  <code>{{ action.name || 'Cerca' }}.NomeOutput</code>, ma\r\n                  <strong>non scrive in nessun campo</strong>: e\u2019 la forma da usare quando il risultato\r\n                  serve a una condizione, non a precompilare.\r\n                </p>\r\n\r\n                <!--\r\n                  L'unico posto in cui un campo di schermata e' una destinazione (\u00A75.2):\r\n                  `POST /flows/references/writable` continua a escluderlo, e un Assignment che ci\r\n                  scrive resta TARGET_NOT_WRITABLE.\r\n                -->\r\n                <fb-parameter-editor\r\n                  [holder]=\"action\"\r\n                  [catalogParameters]=\"actionParameterCatalog()\"\r\n                  [showOutputs]=\"action.storeOutputAutomatically !== true\"\r\n                  outputTitle=\"Campi da riempire\"\r\n                  [extraTargets]=\"screenFieldTargets()\"\r\n                  [outputsDisabledReason]=\"\r\n                    action.storeOutputAutomatically === true\r\n                      ? 'Con l\u2019output automatico il risultato non viene scritto nei campi.'\r\n                      : null\r\n                  \"\r\n                  (changed)=\"onActionParametersChanged($index, $event)\"\r\n                />\r\n              }\r\n            </div>\r\n          } @empty {\r\n            <p class=\"fb-empty\">Nessuna action: i campi di questa schermata li compila solo l\u2019utente.</p>\r\n          }\r\n        </div>\r\n\r\n        <button type=\"button\" class=\"fb-btn\" (click)=\"addScreenAction()\">Aggiungi action</button>\r\n      </fieldset>\r\n\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Trigger</legend>\r\n        <p class=\"fb-section__note\">\r\n          Quale campo invoca quale action. Senza condizioni l\u2019action gira a ogni cambio del campo.\r\n        </p>\r\n\r\n        <div class=\"fb-list\">\r\n          @for (trigger of screenTriggers(); track $index) {\r\n            <div class=\"fb-list__item\">\r\n              <div class=\"fb-list__header\">\r\n                <span class=\"fb-list__index\">{{ $index + 1 }}</span>\r\n                <span class=\"fb-list__spacer\"></span>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--ghost fb-btn--icon\"\r\n                  aria-label=\"Rimuovi il trigger\"\r\n                  (click)=\"removeScreenTrigger($index)\"\r\n                >\r\n                  \u00D7\r\n                </button>\r\n              </div>\r\n\r\n              <div class=\"fb-field\">\r\n                <label class=\"fb-field__label fb-field__label--required\">Action da invocare</label>\r\n                <fb-name-picker\r\n                  [value]=\"trigger.screenActionName\"\r\n                  [options]=\"screenActionOptions()\"\r\n                  label=\"Action della schermata\"\r\n                  placeholder=\"Scegli un\u2019action\"\r\n                  unknownMessage=\"Questa schermata non dichiara un\u2019action con questo nome: e\u2019 SCREEN_ACTION_UNKNOWN.\"\r\n                  unknownSeverity=\"error\"\r\n                  emptyMessage=\"Aggiungi prima un\u2019action qui sopra.\"\r\n                  (valueChange)=\"setTriggerProperty($index, 'screenActionName', $event ?? '')\"\r\n                />\r\n              </div>\r\n\r\n              <div class=\"fb-field\">\r\n                <label class=\"fb-field__label\">Campo che la innesca</label>\r\n                <!-- I campi di **questa** schermata, non i riferimenti in generale (\u00A75.2). -->\r\n                <fb-name-picker\r\n                  [value]=\"trigger.triggerFieldName\"\r\n                  [options]=\"triggerFieldOptions()\"\r\n                  label=\"Campo della schermata\"\r\n                  placeholder=\"Scegli un campo\"\r\n                  unknownMessage=\"Questo non e\u2019 un campo di questa schermata: e\u2019 SCREEN_TRIGGER_FIELD_UNKNOWN.\"\r\n                  unknownSeverity=\"error\"\r\n                  emptyMessage=\"La schermata non ha ancora campi che raccolgono un valore.\"\r\n                  (valueChange)=\"setTriggerProperty($index, 'triggerFieldName', $event ?? '')\"\r\n                />\r\n              </div>\r\n\r\n              <div class=\"fb-field\">\r\n                <label class=\"fb-field__label\">All\u2019arrivo sulla schermata</label>\r\n                <select\r\n                  class=\"fb-select\"\r\n                  [fbValue]=\"trigger.initBehavior || ''\"\r\n                  (change)=\"setTriggerProperty($index, 'initBehavior', $any($event.target).value)\"\r\n                >\r\n                  <option value=\"\">\u2014 non invocare \u2014</option>\r\n                  <option value=\"runOnLoad\">Invoca al caricamento (runOnLoad)</option>\r\n                </select>\r\n                @if (triggerInitIsUnknown(trigger)) {\r\n                  <p class=\"fb-field__error\">\r\n                    \u00AB{{ trigger.initBehavior }}\u00BB non e\u2019 ammesso: l\u2019unico valore e\u2019 <code>runOnLoad</code>\r\n                    (SCREEN_TRIGGER_INIT_BEHAVIOR_UNKNOWN).\r\n                  </p>\r\n                }\r\n              </div>\r\n\r\n              @if (triggerHasNoCause(trigger)) {\r\n                <p class=\"fb-callout fb-callout--warn\">\r\n                  Senza un campo che la innesca e senza l\u2019invocazione al caricamento, questo trigger non\r\n                  scattera\u2019 mai (SCREEN_TRIGGER_WITHOUT_CAUSE).\r\n                </p>\r\n              }\r\n\r\n              <fb-condition-editor\r\n                [holder]=\"triggerConditions(trigger)\"\r\n                title=\"Invoca l\u2019action quando\"\r\n                [allowFormula]=\"false\"\r\n                [issuePath]=\"'triggers[' + $index + ']'\"\r\n                (changed)=\"onTriggerConditionsChanged($index, $event)\"\r\n              />\r\n            </div>\r\n          } @empty {\r\n            <p class=\"fb-empty\">Nessun trigger: le action dichiarate non verranno invocate.</p>\r\n          }\r\n        </div>\r\n\r\n        <button type=\"button\" class=\"fb-btn\" (click)=\"addScreenTrigger()\">Aggiungi trigger</button>\r\n      </fieldset>\r\n    } @else {\r\n      <!-- ---------------------------------------------------- proprieta' del campo -->\r\n      <header class=\"fb-scr__props-head\">\r\n        <h3 class=\"fb-scr__props-title\">{{ captionOf(selectedField()!) }}</h3>\r\n        <div class=\"fb-scr__props-actions\">\r\n          <button type=\"button\" class=\"fb-btn fb-btn--sm\" title=\"Sposta su\" (click)=\"moveSelected(-1)\">\u2191</button>\r\n          <button type=\"button\" class=\"fb-btn fb-btn--sm\" title=\"Sposta giu\u2019\" (click)=\"moveSelected(1)\">\u2193</button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-btn fb-btn--sm\"\r\n            title=\"Porta fuori dal contenitore\"\r\n            [disabled]=\"!canOutdent()\"\r\n            (click)=\"outdentSelected()\"\r\n          >\r\n            \u21E4\r\n          </button>\r\n          <button type=\"button\" class=\"fb-btn fb-btn--sm\" title=\"Duplica\" (click)=\"duplicateSelected()\">\u29C9</button>\r\n          <button type=\"button\" class=\"fb-btn fb-btn--danger fb-btn--sm\" title=\"Elimina\" (click)=\"removeSelected()\">\r\n            \u00D7\r\n          </button>\r\n        </div>\r\n      </header>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label fb-field__label--required\">Tipo</label>\r\n        <select\r\n          class=\"fb-select\"\r\n          [fbValue]=\"selectedField()!.fieldType || ''\"\r\n          (change)=\"setFieldType($any($event.target).value)\"\r\n        >\r\n          <option value=\"\">\u2014 scegli \u2014</option>\r\n          @for (entry of dictionary.screenFieldTypes(); track entry.value) {\r\n            <option [value]=\"entry.value\">{{ entry.label }}</option>\r\n          }\r\n        </select>\r\n        @if (!selectedField()!.fieldType) {\r\n          <p class=\"fb-field__error\">Il tipo e\u2019 obbligatorio: senza, SCREEN_FIELD_TYPE_MISSING.</p>\r\n        } @else if (isUnknownType(selectedField())) {\r\n          <p class=\"fb-field__hint fb-field__hint--warn\">\r\n            Questo tipo non e\u2019 nel dizionario: l\u2019editor non sa quali campi ammetta e mostra solo i comuni.\r\n          </p>\r\n        } @else if (selectedType()?.description) {\r\n          <p class=\"fb-field__hint\">{{ selectedType()?.description }}</p>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Nome</label>\r\n        <!-- Sul `change` e non sull\u2019`input`: la rinomina riscrive i riferimenti nel documento,\r\n             e farlo a ogni tasto significherebbe riscriverlo per ogni lettera. -->\r\n        <input\r\n          class=\"fb-input fb-input--mono\"\r\n          [value]=\"selectedField()!.name || ''\"\r\n          (change)=\"setFieldName($any($event.target).value)\"\r\n        />\r\n        @if (selectedIsResource()) {\r\n          <p class=\"fb-field__hint\">\r\n            Questo campo e\u2019 una <strong>risorsa</strong>: lo referenzi come\r\n            <code>{{ selectedField()!.name || 'Nome' }}</code> in condizioni, formule e parametri. \u00C8 di\r\n            sola lettura per il flow \u2014 un Assignment che ci scrive e\u2019 TARGET_NOT_WRITABLE.\r\n          </p>\r\n        }\r\n      </div>\r\n\r\n      @if (!selectedType()?.isContainer && selectedField()!.fieldType !== 'ComponentInstance') {\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">\r\n            {{ selectedField()!.fieldType === 'DisplayText' ? 'Testo' : 'Etichetta' }}\r\n          </label>\r\n          <textarea\r\n            class=\"fb-textarea\"\r\n            [value]=\"selectedField()!.fieldText || ''\"\r\n            (input)=\"setFieldProperty('fieldText', $any($event.target).value)\"\r\n          ></textarea>\r\n          <p class=\"fb-field__hint\">Supporta i merge field <code>&#123;!Riferimento&#125;</code>.</p>\r\n        </div>\r\n      } @else if (selectedType()?.isContainer) {\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">Intestazione</label>\r\n          <input\r\n            class=\"fb-input\"\r\n            [value]=\"selectedField()!.fieldText || ''\"\r\n            (input)=\"setFieldProperty('fieldText', $any($event.target).value)\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Testo di aiuto</label>\r\n        <input\r\n          class=\"fb-input\"\r\n          [value]=\"selectedField()!.helpText || ''\"\r\n          (input)=\"setFieldProperty('helpText', $any($event.target).value)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Larghezza</label>\r\n        <div class=\"fb-scr__width\">\r\n          <input\r\n            type=\"range\"\r\n            min=\"1\"\r\n            max=\"12\"\r\n            step=\"1\"\r\n            [value]=\"widthOf(selectedField()!)\"\r\n            (input)=\"setNumberProperty('width', $any($event.target).value)\"\r\n          />\r\n          <span class=\"fb-scr__width-value\">{{ widthOf(selectedField()!) }}/12</span>\r\n        </div>\r\n        <p class=\"fb-field__hint\">\r\n          Colonne della griglia della schermata. \u00C8 un\u2019indicazione: il frontend puo\u2019 ignorarla.\r\n        </p>\r\n      </div>\r\n\r\n      <!-- ------------------------------------------------ campi che raccolgono un valore -->\r\n      @if (selectedType()?.storesValue) {\r\n        <fieldset class=\"fb-section\">\r\n          <legend class=\"fb-section__title\">Valore</legend>\r\n\r\n          @if (selectedField()!.fieldType !== 'ObjectProvided') {\r\n            <div class=\"fb-field\">\r\n              <label\r\n                class=\"fb-field__label\"\r\n                [class.fb-field__label--required]=\"!!selectedType()?.requiresDataType\"\r\n              >\r\n                Tipo di dato\r\n              </label>\r\n              <select\r\n                class=\"fb-select\"\r\n                [fbValue]=\"selectedField()!.dataType || ''\"\r\n                (change)=\"setFieldProperty('dataType', $any($event.target).value)\"\r\n              >\r\n                <option value=\"\">\u2014 scegli \u2014</option>\r\n                @for (entry of dictionary.dataTypes(); track entry.value) {\r\n                  <option [value]=\"entry.value\">{{ entry.label }}</option>\r\n                }\r\n              </select>\r\n              @if (selectedType()?.requiresDataType && !selectedField()!.dataType) {\r\n                <p class=\"fb-field__error\">Obbligatorio per questo tipo di campo (DATA_TYPE_MISSING).</p>\r\n              }\r\n              @if (selectedType()?.isCollection) {\r\n                <p class=\"fb-field__hint\">\r\n                  Il valore raccolto e\u2019 una <strong>collection</strong>, non una stringa con i valori\r\n                  separati: nelle condizioni si usano gli operatori di collection.\r\n                </p>\r\n              }\r\n            </div>\r\n\r\n            @if (requiresObjectType()) {\r\n              <div class=\"fb-field\">\r\n                <label class=\"fb-field__label\" [class.fb-field__label--required]=\"objectTypeIsStructure()\">\r\n                  {{\r\n                    objectTypeIsStructure()\r\n                      ? 'Classe'\r\n                      : selectedField()!.dataType === 'Enum'\r\n                        ? 'Tipo di enumerazione'\r\n                        : 'Oggetto'\r\n                  }}\r\n                </label>\r\n                @if (selectedField()!.dataType === 'Enum') {\r\n                  <!-- Dizionario chiuso: si sceglie, non si scrive. -->\r\n                  <select\r\n                    class=\"fb-select\"\r\n                    [fbValue]=\"selectedField()!.objectType || ''\"\r\n                    (change)=\"setFieldProperty('objectType', $any($event.target).value)\"\r\n                  >\r\n                    <option value=\"\">\u2014 scegli \u2014</option>\r\n                    @for (entry of enumOptions(); track entry.name) {\r\n                      <option [value]=\"entry.name\">{{ entry.label || entry.name }}</option>\r\n                    }\r\n                  </select>\r\n                  @if (!selectedField()!.objectType) {\r\n                    <p class=\"fb-field__hint fb-field__hint--warn\">\r\n                      Senza il tipo concreto l\u2019editor non puo\u2019 proporre i valori dell\u2019enumerazione.\r\n                    </p>\r\n                  }\r\n                } @else if (objectTypeIsStructure()) {\r\n                  <fb-structure-picker\r\n                    [value]=\"selectedField()!.objectType\"\r\n                    label=\"Classe\"\r\n                    (valueChange)=\"setFieldProperty('objectType', $event ?? '')\"\r\n                  />\r\n                  @if (!selectedField()!.objectType) {\r\n                    <p class=\"fb-field__error\">\r\n                      La classe e\u2019 obbligatoria: senza, il runtime non ha nulla da istanziare\r\n                      (OBJECT_TYPE_MISSING).\r\n                    </p>\r\n                  }\r\n                } @else {\r\n                  <fb-object-picker\r\n                    [value]=\"selectedField()!.objectType\"\r\n                    label=\"Oggetto\"\r\n                    (valueChange)=\"setFieldProperty('objectType', $event ?? '')\"\r\n                  />\r\n                }\r\n              </div>\r\n            }\r\n          } @else {\r\n            <div class=\"fb-field\">\r\n              <label class=\"fb-field__label fb-field__label--required\">Campo dell\u2019entita\u2019</label>\r\n              <p class=\"fb-field__hint\">\r\n                Tipo, label, obbligatorieta\u2019, scala e \u2014 se il campo e\u2019 una picklist \u2014 le opzioni arrivano\r\n                dallo schema dati: qui non si ridichiarano.\r\n              </p>\r\n              <fb-object-picker\r\n                [value]=\"providedObject() || undefined\"\r\n                label=\"Oggetto\"\r\n                (valueChange)=\"setProvidedObject($event)\"\r\n              />\r\n              <fb-field-picker\r\n                [value]=\"providedField() || undefined\"\r\n                [object]=\"providedObject() || undefined\"\r\n                label=\"Campo\"\r\n                (valueChange)=\"setProvidedField($event)\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          <label class=\"fb-check\">\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"selectedIsRequired()\"\r\n              (change)=\"setRequired($any($event.target).checked)\"\r\n            />\r\n            Obbligatorio\r\n          </label>\r\n          <label class=\"fb-check\">\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"selectedIsEditable()\"\r\n              (change)=\"setEditable($any($event.target).checked)\"\r\n            />\r\n            Modificabile\r\n          </label>\r\n          @if (!selectedIsEditable()) {\r\n            <p class=\"fb-field__hint\">\r\n              A <code>false</code> il runtime <strong>ignora</strong> cio\u2019 che il client rimanda indietro:\r\n              e\u2019 l\u2019unico modo di rendere un campo davvero di sola lettura.\r\n            </p>\r\n          }\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Valore di default</label>\r\n            <fb-value-editor\r\n              [value]=\"selectedField()!.defaultValue\"\r\n              [dataType]=\"selectedField()!.dataType\"\r\n              [objectType]=\"selectedField()!.objectType\"\r\n              [isCollection]=\"selectedType()?.isCollection\"\r\n              label=\"Valore di default\"\r\n              (valueChange)=\"setDefaultValue($event)\"\r\n            />\r\n          </div>\r\n\r\n          @if (scaleApplies()) {\r\n            <div class=\"fb-field\">\r\n              <label class=\"fb-field__label\">Decimali</label>\r\n              <input\r\n                class=\"fb-input\"\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [value]=\"selectedField()!.scale ?? ''\"\r\n                (change)=\"setNumberProperty('scale', $any($event.target).value)\"\r\n              />\r\n            </div>\r\n          } @else if (selectedField()!.scale !== undefined) {\r\n            <p class=\"fb-field__hint fb-field__hint--warn\">\r\n              <code>scale</code> su un campo non numerico e\u2019 SCALE_NOT_APPLICABLE.\r\n            </p>\r\n          }\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Lunghezza massima</label>\r\n            <input\r\n              class=\"fb-input\"\r\n              type=\"number\"\r\n              min=\"1\"\r\n              [value]=\"selectedField()!.maxLength ?? ''\"\r\n              (change)=\"setNumberProperty('maxLength', $any($event.target).value)\"\r\n            />\r\n            <p class=\"fb-field__hint\">Verificata anche dal runtime (TOO_LONG).</p>\r\n          </div>\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Tornando sulla schermata</label>\r\n            <select\r\n              class=\"fb-select\"\r\n              [fbValue]=\"selectedField()!.inputsOnNextNavToAssocScrn || ''\"\r\n              (change)=\"setFieldProperty('inputsOnNextNavToAssocScrn', $any($event.target).value)\"\r\n            >\r\n              <option value=\"\">Predefinito (mantieni i valori)</option>\r\n              @for (entry of dictionary.screenFieldInputsRevisited(); track entry.value) {\r\n                <option [value]=\"entry.value\">{{ entry.label }}</option>\r\n              }\r\n            </select>\r\n          </div>\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Regola di validazione</label>\r\n            <!--\r\n              `commitOn=\"change\"`: qui mutare il documento ridisegna l'anteprima, e riscriverla a\r\n              ogni tasto costa. La verifica parte lo stesso mentre si digita (\u00A76.3).\r\n            -->\r\n            <fb-formula-editor\r\n              [expression]=\"selectedField()!.validationRule?.formulaExpression || ''\"\r\n              usage=\"ValidationRule\"\r\n              expectedDataType=\"Boolean\"\r\n              commitOn=\"change\"\r\n              [rows]=\"2\"\r\n              placeholder=\"Espressione, es. LEN(Nome) > 3\"\r\n              ariaLabel=\"Regola di validazione\"\r\n              (expressionChange)=\"setValidationRule('formulaExpression', $event)\"\r\n            />\r\n            <input\r\n              class=\"fb-input\"\r\n              placeholder=\"Messaggio mostrato quando l\u2019espressione e\u2019 falsa\"\r\n              [value]=\"selectedField()!.validationRule?.errorMessage || ''\"\r\n              (change)=\"setValidationRule('errorMessage', $any($event.target).value)\"\r\n            />\r\n            <p class=\"fb-field__hint\">\r\n              L\u2019espressione la valuta il motore di regole: il backend non la interpreta, la fa\r\n              verificare al motore.\r\n            </p>\r\n          </div>\r\n        </fieldset>\r\n      }\r\n\r\n      <!-- --------------------------------------------------------------- choice -->\r\n      @if (selectedType()?.acceptsChoices) {\r\n        <fieldset class=\"fb-section\">\r\n          <legend class=\"fb-section__title\">Opzioni</legend>\r\n          <p class=\"fb-section__note\">\r\n            Accetta <strong>Choice</strong> e <strong>Dynamic choice set</strong>, nell\u2019ordine in cui le\r\n            opzioni compaiono. Puntare a una variabile e\u2019 SCREEN_FIELD_CHOICE_UNKNOWN.\r\n          </p>\r\n\r\n          @if (!selectedField()!.choiceReferences?.length) {\r\n            @if (selectedField()!.fieldType === 'ObjectProvided') {\r\n              <!-- Le opzioni di una picklist arrivano dallo schema: qui si aggiungono solo se\r\n                   si vuole sostituirle, e non dichiararne nessuna e' il caso normale. -->\r\n              <p class=\"fb-field__hint\">\r\n                Se il campo dello schema e\u2019 una picklist, le opzioni arrivano da l\u00EC: dichiararle qui\r\n                serve solo a sostituirle.\r\n              </p>\r\n            } @else {\r\n              <p class=\"fb-callout fb-callout--warn\">\r\n                Nessuna opzione: il campo non ha niente da mostrare (SCREEN_FIELD_CHOICES_MISSING).\r\n              </p>\r\n            }\r\n          }\r\n\r\n          <div class=\"fb-list\">\r\n            @for (choice of selectedField()!.choiceReferences || []; track $index) {\r\n              <div class=\"fb-list__item\">\r\n                <div class=\"fb-list__header\">\r\n                  <span class=\"fb-list__index\">{{ $index + 1 }}</span>\r\n                  <span class=\"fb-list__title\">{{ choice }}</span>\r\n                  <span class=\"fb-list__spacer\"></span>\r\n                  <button type=\"button\" class=\"fb-btn fb-btn--sm\" (click)=\"moveChoice($index, -1)\">\u2191</button>\r\n                  <button type=\"button\" class=\"fb-btn fb-btn--sm\" (click)=\"moveChoice($index, 1)\">\u2193</button>\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"fb-btn fb-btn--ghost fb-btn--sm\"\r\n                    aria-label=\"Rimuovi\"\r\n                    (click)=\"removeChoice($index)\"\r\n                  >\r\n                    \u00D7\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Aggiungi un\u2019opzione</label>\r\n            <fb-name-picker\r\n              [options]=\"choiceOptions()\"\r\n              label=\"Choice\"\r\n              placeholder=\"Scegli una choice o un choice set\"\r\n              unknownMessage=\"Questo nome non e\u2019 una choice ne\u2019 un choice set: e\u2019 SCREEN_FIELD_CHOICE_UNKNOWN.\"\r\n              unknownSeverity=\"error\"\r\n              emptyMessage=\"Il flow non dichiara nessuna choice: creale nel pannello delle risorse.\"\r\n              (valueChange)=\"addChoice($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Opzione selezionata all\u2019apertura</label>\r\n            <select\r\n              class=\"fb-select\"\r\n              [fbValue]=\"selectedField()!.defaultSelectedChoiceReference || ''\"\r\n              (change)=\"setFieldProperty('defaultSelectedChoiceReference', $any($event.target).value)\"\r\n            >\r\n              <option value=\"\">\u2014 nessuna \u2014</option>\r\n              @for (choice of selectedField()!.choiceReferences || []; track $index) {\r\n                <option [value]=\"choice\">{{ choice }}</option>\r\n              }\r\n            </select>\r\n            @if (defaultChoiceIsForeign()) {\r\n              <p class=\"fb-field__hint fb-field__hint--warn\">\r\n                \u00AB{{ selectedField()!.defaultSelectedChoiceReference }}\u00BB non e\u2019 fra le opzioni elencate qui\r\n                sopra.\r\n              </p>\r\n            }\r\n          </div>\r\n        </fieldset>\r\n      }\r\n\r\n      <!-- ------------------------------------------------------- contenitori -->\r\n      @if (selectedType()?.isContainer) {\r\n        <fieldset class=\"fb-section\">\r\n          <legend class=\"fb-section__title\">Contenitore</legend>\r\n          @if (selectedField()!.fieldType === 'RegionContainer') {\r\n            <div class=\"fb-field\">\r\n              <label class=\"fb-field__label\">Tipo di sezione</label>\r\n              <select\r\n                class=\"fb-select\"\r\n                [fbValue]=\"selectedField()!.regionContainerType || ''\"\r\n                (change)=\"setFieldProperty('regionContainerType', $any($event.target).value)\"\r\n              >\r\n                <option value=\"\">\u2014 predefinito \u2014</option>\r\n                @for (entry of dictionary.regionContainerTypes(); track entry.value) {\r\n                  <option [value]=\"entry.value\">{{ entry.label }}</option>\r\n                }\r\n              </select>\r\n            </div>\r\n          }\r\n          @if (!selectedField()!.fields?.length) {\r\n            <p class=\"fb-callout fb-callout--warn\">\r\n              Il contenitore e\u2019 vuoto: non produce niente sulla schermata (SCREEN_CONTAINER_EMPTY).\r\n            </p>\r\n          }\r\n        </fieldset>\r\n      }\r\n\r\n      <!-- --------------------------------------------------- ComponentInstance -->\r\n      @if (selectedField()!.fieldType === 'ComponentInstance') {\r\n        <fieldset class=\"fb-section\">\r\n          <legend class=\"fb-section__title\">Componente</legend>\r\n          <p class=\"fb-section__note\">\r\n            Componenti e form sono la stessa domanda al frontend \u2014 cosa sa rendere, e con quali parametri\r\n            \u2014 e passano dallo stesso catalogo. Un <code>ComponentInstance</code> non ha un valore proprio:\r\n            lo hanno i suoi output.\r\n          </p>\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label fb-field__label--required\">Componente</label>\r\n            <fb-name-picker\r\n              [value]=\"selectedField()!.extensionName\"\r\n              [options]=\"componentOptions()\"\r\n              [unusableOptions]=\"unusableComponents()\"\r\n              label=\"Componente\"\r\n              placeholder=\"Scrivi o scegli un componente\"\r\n              [isMono]=\"false\"\r\n              unknownMessage=\"Questo componente non esiste nel catalogo: e\u2019 SCREEN_COMPONENT_UNKNOWN.\"\r\n              unknownSeverity=\"error\"\r\n              unusableMessage=\"Questo nome e\u2019 una schermata intera, non un componente montabile qui (FORM_KIND_MISMATCH).\"\r\n              emptyMessage=\"Il catalogo dei componenti non e\u2019 popolato: il nome non viene verificato.\"\r\n              (valueChange)=\"setFieldProperty('extensionName', $event ?? '')\"\r\n            />\r\n            @if (!selectedField()!.extensionName) {\r\n              <p class=\"fb-field__error\">Obbligatorio: senza, SCREEN_COMPONENT_MISSING.</p>\r\n            }\r\n          </div>\r\n\r\n          <label class=\"fb-check\">\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"selectedField()!.storeOutputAutomatically === true\"\r\n              (change)=\"setStoreOutputAutomatically($any($event.target).checked)\"\r\n            />\r\n            Rendi gli output referenziabili automaticamente\r\n          </label>\r\n          @if (selectedField()!.storeOutputAutomatically) {\r\n            <p class=\"fb-field__hint\">\r\n              Gli output si referenziano come\r\n              <code>{{ selectedField()!.name || 'Campo' }}.nomeOutput</code>, senza dichiarare variabili.\r\n            </p>\r\n          }\r\n          @if (hasOutputConflict()) {\r\n            <p class=\"fb-callout fb-callout--error\">\r\n              Output automatici <strong>e</strong> parametri di uscita insieme:\r\n              OUTPUT_CONFIGURATION_CONFLICT.\r\n            </p>\r\n          }\r\n\r\n          <fb-parameter-editor\r\n            [holder]=\"$any(selectedField())\"\r\n            [catalogParameters]=\"componentParameterList()\"\r\n            inputTitle=\"Valori passati al componente\"\r\n            outputTitle=\"Valori raccolti dal componente\"\r\n            [showOutputs]=\"!selectedField()!.storeOutputAutomatically\"\r\n            outputsDisabledReason=\"Gli output sono automatici: disattivalo per assegnarli a variabili.\"\r\n            (changed)=\"onComponentParametersChanged($event)\"\r\n          />\r\n        </fieldset>\r\n      }\r\n\r\n      <!-- ------------------------------------------------------- visibilita' -->\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Visibilita\u2019</legend>\r\n        <p class=\"fb-section__note\">\r\n          Le regole si rivalutano <strong>sui valori appena inviati</strong>: e\u2019 cos\u00EC che un campo compare\r\n          in funzione di un altro campo della stessa schermata. Un campo risultato nascosto viene\r\n          <strong>azzerato</strong> e non viene validato.\r\n        </p>\r\n        <fb-condition-editor\r\n          [holder]=\"visibilityRule()\"\r\n          title=\"Mostra il campo quando\"\r\n          [allowFormula]=\"false\"\r\n          [issuePath]=\"'fields[' + (selectedField()!.name || '') + '].visibilityRule'\"\r\n          (changed)=\"onVisibilityChanged($event)\"\r\n        />\r\n      </fieldset>\r\n    }\r\n  </aside>\r\n</div>\r\n\r\n<fb-connector-editor\r\n  [nodeName]=\"name()\"\r\n  [node]=\"node()\"\r\n  [outlets]=\"outlets()\"\r\n  (connectorChanged)=\"onConnectorChanged($event)\"\r\n/>\r\n\r\n<!--\r\n  ============================================================== l'anteprima\r\n  Due template ricorsivi. `listTpl` disegna i figli di un contenitore, e nient'altro: `data-item`\r\n  marca cio' che conta come fratello nel calcolo del punto di rilascio, e il segnaposto del\r\n  contenitore vuoto ne resta fuori. La barra di inserimento non e' qui \u2014 sta sopra l'anteprima,\r\n  vedi il velo nel frame.\r\n-->\r\n<ng-template #listTpl let-fields let-parent=\"parent\" let-axis=\"axis\">\r\n  @for (child of fields; track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"fieldTpl\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: child, path: childPath(parent, $index), axis: axis }\"\r\n    />\r\n  }\r\n  @if (!fields.length) {\r\n    <p class=\"fb-scr__drop-hint\">Trascina qui un componente</p>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #fieldTpl let-field let-path=\"path\" let-axis=\"axis\">\r\n  <div\r\n    class=\"fb-scr__item\"\r\n    data-item=\"\"\r\n    cdkDrag\r\n    [style.grid-column]=\"'span ' + widthOf(field)\"\r\n    [class.fb-scr__item--selected]=\"isSelected(path)\"\r\n    [class.fb-scr__item--dragging]=\"isDragging(path)\"\r\n    [class.fb-scr__item--container]=\"isContainer(field)\"\r\n    (cdkDragStarted)=\"onFieldDragStarted(path)\"\r\n    (cdkDragMoved)=\"onFieldDragMoved($event)\"\r\n    (cdkDragEnded)=\"onFieldDragEnded($event, path)\"\r\n    (click)=\"select(path); $event.stopPropagation()\"\r\n  >\r\n    <span class=\"fb-scr__grip\" cdkDragHandle title=\"Trascina per spostare\" aria-hidden=\"true\">\u283F</span>\r\n    @if (field.visibilityRule?.conditions?.length) {\r\n      <span class=\"fb-scr__flag\" title=\"Ha una regola di visibilita\u2019\">\u25D0</span>\r\n    }\r\n\r\n    @switch (field.fieldType) {\r\n      @case ('RegionContainer') {\r\n        <div class=\"fb-scr__section\">\r\n          @if (field.regionContainerType !== 'SectionWithoutHeader') {\r\n            <header class=\"fb-scr__section-head\">{{ field.fieldText || field.name }}</header>\r\n          }\r\n          <div class=\"fb-scr__cols\" [attr.data-drop]=\"dropId(path)\" data-axis=\"row\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"listTpl\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: field.fields || [], parent: path, axis: 'row' }\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n      @case ('Region') {\r\n        <div class=\"fb-scr__region\">\r\n          <span class=\"fb-scr__region-tag\">{{ field.name }} \u00B7 {{ widthOf(field) }}/12</span>\r\n          <div class=\"fb-scr__region-body\" [attr.data-drop]=\"dropId(path)\" data-axis=\"column\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"listTpl\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: field.fields || [], parent: path, axis: 'column' }\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n      @case ('DisplayText') {\r\n        <p class=\"fb-scr__display\">{{ field.fieldText || '(testo vuoto)' }}</p>\r\n      }\r\n      @case ('LargeTextArea') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control fb-scr__control--area\">{{ placeholderOf(field) }}</div>\r\n      }\r\n      @case ('PasswordField') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control\">\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022</div>\r\n      }\r\n      @case ('DropdownBox') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control fb-scr__control--select\">\r\n          <span>{{ field.defaultSelectedChoiceReference || choiceLabelsOf(field)[0] || '\u2014 scegli \u2014' }}</span>\r\n          <span aria-hidden=\"true\">\u25BE</span>\r\n        </div>\r\n      }\r\n      @case ('MultiSelectPicklist') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control fb-scr__control--select\">\r\n          <span>{{ choiceLabelsOf(field).join(', ') || '\u2014 scegli \u2014' }}</span>\r\n          <span aria-hidden=\"true\">\u2261</span>\r\n        </div>\r\n      }\r\n      @case ('RadioButtons') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__options\">\r\n          @for (option of choiceLabelsOf(field); track $index) {\r\n            <span class=\"fb-scr__option\">\u25EF {{ option }}</span>\r\n          }\r\n          @if (!choiceLabelsOf(field).length) {\r\n            <span class=\"fb-scr__option fb-scr__option--missing\">Nessuna opzione</span>\r\n          }\r\n        </div>\r\n      }\r\n      @case ('MultiSelectCheckboxes') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__options\">\r\n          @for (option of choiceLabelsOf(field); track $index) {\r\n            <span class=\"fb-scr__option\">\u2610 {{ option }}</span>\r\n          }\r\n          @if (!choiceLabelsOf(field).length) {\r\n            <span class=\"fb-scr__option fb-scr__option--missing\">Nessuna opzione</span>\r\n          }\r\n        </div>\r\n      }\r\n      @case ('ComponentInstance') {\r\n        <div class=\"fb-scr__component\">\r\n          <span aria-hidden=\"true\">\u2B21</span>\r\n          {{ field.extensionName || 'Componente non indicato' }}\r\n        </div>\r\n      }\r\n      @case ('ObjectProvided') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ field.fieldText || field.objectFieldReference || field.name }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control\">{{ placeholderOf(field) }}</div>\r\n        <span class=\"fb-scr__tag\">{{ field.objectFieldReference || 'campo non indicato' }}</span>\r\n      }\r\n      @default {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control\">{{ placeholderOf(field) }}</div>\r\n        @if (isUnknownType(field)) {\r\n          <span class=\"fb-scr__tag fb-scr__tag--warn\">{{ field.fieldType }}: tipo non nel dizionario</span>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".fb-scr{display:grid;grid-template-columns:220px minmax(0,1fr) 340px;gap:12px;align-items:start;margin-bottom:14px}@media(max-width:1100px){.fb-scr{grid-template-columns:minmax(0,1fr)}}.fb-scr__side,.fb-scr__props{min-width:0;padding:10px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-surface-alt, #f7f8fa)}.fb-scr__tabs{display:flex;gap:4px;margin-bottom:8px}.fb-scr__tab{flex:1;padding:5px 8px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff);color:var(--fb-text-muted, #6b7086);font:inherit;font-size:11px;font-weight:600;cursor:pointer}.fb-scr__tab--active{border-color:var(--fb-accent, #4f6ef7);background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 10%,transparent);color:var(--fb-accent-strong, #3d59e0)}.fb-scr__side-hint,.fb-scr__side-empty{margin:6px 0;font-size:11px;color:var(--fb-text-muted, #6b7086)}.fb-scr__palette{display:flex;flex-direction:column;gap:4px;margin:8px 0 0;padding:0;max-height:320px;overflow-y:auto;overscroll-behavior:contain;list-style:none}.fb-scr__chip{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff);color:var(--fb-text, #1a1c23);font:inherit;font-size:12px;text-align:left;cursor:grab}.fb-scr__chip:hover{border-color:var(--fb-accent, #4f6ef7)}.fb-scr__chip-icon{flex:none;width:20px;text-align:center;color:var(--fb-text-muted, #6b7086)}.fb-scr__chip-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-scr__chip-label small{margin-left:4px;color:var(--fb-text-subtle, #98a2b3);font-size:10px}.fb-scr__canvas{min-width:0;padding:14px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-canvas-bg, #f4f5f7)}.fb-scr__frame{position:relative;display:flex;flex-direction:column;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-sm, 8px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));overflow:hidden}.fb-scr__frame-head{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--fb-border-subtle, #eef0f4);font-size:13px;font-weight:600}.fb-scr__help{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--fb-surface-sunken, #eef0f4);color:var(--fb-text-muted, #6b7086);font-size:10px}.fb-scr__body,.fb-scr__region-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-content:start;gap:8px 0;padding:12px;min-height:90px}.fb-scr__region-body{padding:8px;min-height:60px}.fb-scr__cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch;gap:0;padding:8px;min-height:60px}.fb-scr__cols>.fb-scr__item{display:flex;align-self:stretch}.fb-scr__cols>.fb-scr__item>.fb-scr__region{flex:1;min-width:0}.fb-scr__drop-hint{grid-column:1 / -1;margin:0;padding:10px;border:1px dashed var(--fb-border-strong, #cfd4de);border-radius:var(--fb-radius-xs, 6px);color:var(--fb-text-subtle, #98a2b3);font-size:11px;text-align:center}.fb-scr__marker{position:absolute;z-index:2;border-radius:2px;background:var(--fb-accent, #4f6ef7);pointer-events:none}.fb-scr__item{position:relative;box-sizing:border-box;padding:6px 8px;border:1px solid transparent;border-radius:var(--fb-radius-xs, 6px);cursor:pointer}.fb-scr__item:hover{border-color:var(--fb-border-strong, #cfd4de);background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 4%,transparent)}.fb-scr__item--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:inset 0 0 0 1px var(--fb-accent, #4f6ef7)}.fb-scr__item--dragging{opacity:.45;pointer-events:none}.fb-scr__grip{position:absolute;top:2px;left:-2px;padding:0 3px;color:var(--fb-text-subtle, #98a2b3);font-size:11px;line-height:1;opacity:0;cursor:grab}.fb-scr__item:hover>.fb-scr__grip,.fb-scr__item--selected>.fb-scr__grip{opacity:1}.fb-scr__flag{position:absolute;top:2px;right:4px;color:var(--fb-text-muted, #6b7086);font-size:11px}.fb-scr__label{display:block;margin-bottom:3px;font-size:11px;font-weight:600;color:var(--fb-text, #1a1c23)}.fb-scr__req{color:var(--fb-error, #dc2626)}.fb-scr__control{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:26px;padding:4px 8px;border:1px solid var(--fb-border-strong, #cfd4de);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff);color:var(--fb-text-subtle, #98a2b3);font-size:12px;pointer-events:none}.fb-scr__control--area{min-height:54px;align-items:flex-start}.fb-scr__display{margin:0;font-size:12px;color:var(--fb-text, #1a1c23)}.fb-scr__options{display:flex;flex-direction:column;gap:2px;pointer-events:none}.fb-scr__option{font-size:12px;color:var(--fb-text-muted, #6b7086)}.fb-scr__option--missing{color:var(--fb-warning, #b7791f)}.fb-scr__component{display:flex;align-items:center;gap:6px;padding:10px;border:1px dashed var(--fb-accent, #4f6ef7);border-radius:var(--fb-radius-xs, 6px);background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 5%,transparent);font-size:12px;color:var(--fb-text-muted, #6b7086)}.fb-scr__tag{display:inline-block;margin-top:3px;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-scr__tag--warn{color:var(--fb-warning, #b7791f)}.fb-scr__section{border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface-alt, #f7f8fa)}.fb-scr__section-head{padding:5px 10px;border-bottom:1px solid var(--fb-border-subtle, #eef0f4);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--fb-text-muted, #6b7086)}.fb-scr__region{border:1px dashed var(--fb-border-strong, #cfd4de);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff)}.fb-scr__region-tag{display:block;padding:3px 6px 0;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-scr__frame-foot{display:flex;align-items:center;gap:6px;padding:8px 12px;border-top:1px solid var(--fb-border-subtle, #eef0f4);background:var(--fb-surface-alt, #f7f8fa)}.fb-scr__spacer{flex:1}.fb-scr__btn{padding:3px 10px;border:1px solid var(--fb-border-strong, #cfd4de);border-radius:var(--fb-radius-xs, 6px);font-size:11px;color:var(--fb-text-muted, #6b7086)}.fb-scr__btn--primary{border-color:var(--fb-accent, #4f6ef7);background:var(--fb-accent, #4f6ef7);color:var(--fb-accent-contrast, #fff)}.fb-scr__canvas-note{margin-top:10px}.fb-scr__props{background:var(--fb-surface, #fff)}.fb-scr__props-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.fb-scr__props-title{flex:1;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--fb-text-muted, #6b7086)}.fb-scr__props-actions{display:flex;flex-wrap:wrap;gap:3px}.fb-btn--sm{padding:3px 7px;font-size:11px}.fb-scr__width{display:flex;align-items:center;gap:8px}.fb-scr__width input[type=range]{flex:1;min-width:0}.fb-scr__width-value{font-size:11px;color:var(--fb-text-muted, #6b7086)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-scr\">\r\n  <!-- ============================================================ sinistra -->\r\n  <aside class=\"fb-scr__side\" aria-label=\"Componenti e campi\">\r\n    <div class=\"fb-scr__tabs\" role=\"tablist\">\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"fb-scr__tab\"\r\n        [class.fb-scr__tab--active]=\"paletteTab() === 'components'\"\r\n        [attr.aria-selected]=\"paletteTab() === 'components'\"\r\n        (click)=\"setPaletteTab('components')\"\r\n      >\r\n        Componenti\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        class=\"fb-scr__tab\"\r\n        [class.fb-scr__tab--active]=\"paletteTab() === 'fields'\"\r\n        [attr.aria-selected]=\"paletteTab() === 'fields'\"\r\n        (click)=\"setPaletteTab('fields')\"\r\n      >\r\n        Campi\r\n      </button>\r\n    </div>\r\n\r\n    @if (paletteTab() === 'components') {\r\n      @if (!dictionary.screenFieldTypes().length) {\r\n        <p class=\"fb-callout fb-callout--warn\">\r\n          Il dizionario <code>screenFieldTypes</code> non e\u2019 disponibile: senza i suoi flag l\u2019editor non\r\n          sa quali campi ammette ciascun tipo, e non li inventa.\r\n        </p>\r\n      }\r\n      <p class=\"fb-scr__side-hint\">Trascina sulla schermata, oppure clicca per aggiungere.</p>\r\n      <ul class=\"fb-scr__palette\">\r\n        @for (entry of dictionary.screenFieldTypes(); track entry.value) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-scr__chip\"\r\n              cdkDrag\r\n              [title]=\"entry.description || entry.label\"\r\n              (cdkDragMoved)=\"onPaletteDragMoved($event)\"\r\n              (cdkDragEnded)=\"onComponentDragEnded($event, entry.value)\"\r\n              (click)=\"addComponentAtSelection(entry.value)\"\r\n            >\r\n              <span class=\"fb-scr__chip-icon\" aria-hidden=\"true\">{{ iconOf(entry.value) }}</span>\r\n              <span class=\"fb-scr__chip-label\">{{ entry.label }}</span>\r\n            </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else {\r\n      <p class=\"fb-scr__side-hint\">\r\n        Un campo dell\u2019entita\u2019 porta con se\u2019 tipo, etichetta, obbligatorieta\u2019 e opzioni: arrivano dallo\r\n        schema dati, qui non si ridichiarano.\r\n      </p>\r\n      <!-- Il catalogo non e' un dizionario chiuso: si sceglie o si scrive, come ovunque si\r\n           indichi un'entita' (vedi `object-picker`). -->\r\n      <fb-object-picker\r\n        [value]=\"fieldsObject()\"\r\n        label=\"Entita\u2019\"\r\n        placeholder=\"Scrivi o scegli un\u2019entita\u2019\"\r\n        (valueChange)=\"setFieldsObject($event)\"\r\n      />\r\n      @if (fieldsObject() && !fieldsOfObject().length) {\r\n        <p class=\"fb-scr__side-empty\">\r\n          Nessun campo dichiarato per questa entita\u2019: il catalogo non li espone, non significa che non\r\n          ci siano.\r\n        </p>\r\n      }\r\n      <ul class=\"fb-scr__palette\">\r\n        @for (field of fieldsOfObject(); track $index) {\r\n          <li>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-scr__chip\"\r\n              cdkDrag\r\n              [title]=\"field.name + (field.dataType ? ' \u00B7 ' + field.dataType : '')\"\r\n              (cdkDragMoved)=\"onPaletteDragMoved($event)\"\r\n              (cdkDragEnded)=\"onObjectFieldDragEnded($event, field)\"\r\n              (click)=\"addObjectFieldAtSelection(field)\"\r\n            >\r\n              <span class=\"fb-scr__chip-icon\" aria-hidden=\"true\">\u2317</span>\r\n              <span class=\"fb-scr__chip-label\">\r\n                {{ field.label || field.name }}\r\n                @if (field.isRequired) {\r\n                  <span class=\"fb-scr__req\">*</span>\r\n                }\r\n                <small>{{ field.dataType }}</small>\r\n              </span>\r\n            </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n  </aside>\r\n\r\n  <!-- ============================================================== centro -->\r\n  <!-- Cliccare fuori da un campo riporta a destra le proprieta' della schermata. -->\r\n  <section class=\"fb-scr__canvas\" aria-label=\"Anteprima della schermata\" (click)=\"selectScreen()\">\r\n    <div class=\"fb-scr__frame\">\r\n      @if (showHeader()) {\r\n        <header class=\"fb-scr__frame-head\">\r\n          {{ $any(node()).label || name() }}\r\n          @if (screen().helpText) {\r\n            <span class=\"fb-scr__help\" [title]=\"screen().helpText || ''\">?</span>\r\n          }\r\n        </header>\r\n      }\r\n\r\n      <div\r\n        class=\"fb-scr__body\"\r\n        [attr.data-drop]=\"''\"\r\n        data-axis=\"column\"\r\n        [class.fb-scr__body--empty]=\"isEmpty()\"\r\n      >\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"listTpl\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: screen().fields || [], parent: [], axis: 'column' }\"\r\n        />\r\n      </div>\r\n\r\n      <!--\r\n        La barra di inserimento e' un **velo** sopra l'anteprima, non un figlio del contenitore di\r\n        rilascio: dentro la griglia occupava una riga intera e spostava in basso proprio la sezione\r\n        che si stava puntando, che allora usciva da sotto il puntatore e il bersaglio oscillava.\r\n      -->\r\n      @if (dropMarker(); as bar) {\r\n        <div\r\n          class=\"fb-scr__marker\"\r\n          [style.left.px]=\"bar.left\"\r\n          [style.top.px]=\"bar.top\"\r\n          [style.width.px]=\"bar.width\"\r\n          [style.height.px]=\"bar.height\"\r\n        ></div>\r\n      }\r\n\r\n      @if (showFooter()) {\r\n        <footer class=\"fb-scr__frame-foot\">\r\n          @if (allowPause()) {\r\n            <span class=\"fb-scr__btn fb-scr__btn--ghost\">{{ screen().pauseButtonLabel || 'Pausa' }}</span>\r\n          }\r\n          <span class=\"fb-scr__spacer\"></span>\r\n          @if (allowBack()) {\r\n            <span class=\"fb-scr__btn fb-scr__btn--ghost\">{{ screen().backButtonLabel || 'Indietro' }}</span>\r\n          }\r\n          <span class=\"fb-scr__btn fb-scr__btn--primary\">\r\n            {{ screen().nextOrFinishButtonLabel || (allowFinish() ? 'Fine' : 'Avanti') }}\r\n          </span>\r\n        </footer>\r\n      }\r\n    </div>\r\n\r\n    @if (isEmpty()) {\r\n      <p class=\"fb-callout fb-callout--warn fb-scr__canvas-note\">\r\n        La schermata non ha campi: non c\u2019e\u2019 niente da mostrare all\u2019utente (SCREEN_WITHOUT_FIELDS).\r\n      </p>\r\n    }\r\n  </section>\r\n\r\n  <!-- ============================================================== destra -->\r\n  <aside class=\"fb-scr__props\" aria-label=\"Proprieta\u2019\">\r\n    @if (!selectedField()) {\r\n      <!-- ------------------------------------------------ proprieta' della schermata -->\r\n      <header class=\"fb-scr__props-head\">\r\n        <h3 class=\"fb-scr__props-title\">Schermata</h3>\r\n      </header>\r\n      <p class=\"fb-scr__side-hint\">Seleziona un campo nell\u2019anteprima per configurarlo.</p>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Testo di aiuto</label>\r\n        <textarea\r\n          class=\"fb-textarea\"\r\n          [value]=\"screen().helpText || ''\"\r\n          (input)=\"setScreenText('helpText', $any($event.target).value)\"\r\n        ></textarea>\r\n      </div>\r\n\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Navigazione</legend>\r\n        <p class=\"fb-section__note\">\r\n          Questi flag sono un\u2019intenzione, non la verita\u2019 finale: a runtime il motore comunica\r\n          <code>canGoBack</code>, <code>canFinish</code> e <code>canPause</code> nella richiesta della\r\n          schermata.\r\n        </p>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"allowBack()\" (change)=\"setScreenFlag('allowBack', $any($event.target).checked)\" />\r\n          Consenti \u00ABindietro\u00BB\r\n        </label>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"allowFinish()\" (change)=\"setScreenFlag('allowFinish', $any($event.target).checked)\" />\r\n          Consenti \u00ABfine\u00BB\r\n        </label>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"allowPause()\" (change)=\"setScreenFlag('allowPause', $any($event.target).checked)\" />\r\n          Consenti \u00ABpausa\u00BB\r\n        </label>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"showHeader()\" (change)=\"setScreenFlag('showHeader', $any($event.target).checked)\" />\r\n          Mostra l\u2019intestazione\r\n        </label>\r\n        <label class=\"fb-check\">\r\n          <input type=\"checkbox\" [checked]=\"showFooter()\" (change)=\"setScreenFlag('showFooter', $any($event.target).checked)\" />\r\n          Mostra il piede\r\n        </label>\r\n\r\n        @if (allowPause()) {\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Testo mostrato alla pausa</label>\r\n            <input\r\n              class=\"fb-input\"\r\n              [value]=\"screen().pausedText || ''\"\r\n              (input)=\"setScreenText('pausedText', $any($event.target).value)\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        @if (isDeadEnd()) {\r\n          <p class=\"fb-callout fb-callout--error\">\r\n            Questa schermata non ha una destinazione e non consente \u00ABfine\u00BB: e\u2019 un vicolo cieco, e\r\n            l\u2019utente resterebbe bloccato (SCREEN_DEAD_END).\r\n          </p>\r\n        }\r\n      </fieldset>\r\n\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Pulsanti</legend>\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">Etichetta \u00ABindietro\u00BB</label>\r\n          <input\r\n            class=\"fb-input\"\r\n            [value]=\"screen().backButtonLabel || ''\"\r\n            (input)=\"setScreenText('backButtonLabel', $any($event.target).value)\"\r\n          />\r\n        </div>\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">Etichetta \u00ABavanti / fine\u00BB</label>\r\n          <input\r\n            class=\"fb-input\"\r\n            [value]=\"screen().nextOrFinishButtonLabel || ''\"\r\n            (input)=\"setScreenText('nextOrFinishButtonLabel', $any($event.target).value)\"\r\n          />\r\n        </div>\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">Etichetta \u00ABpausa\u00BB</label>\r\n          <input\r\n            class=\"fb-input\"\r\n            [value]=\"screen().pauseButtonLabel || ''\"\r\n            (input)=\"setScreenText('pauseButtonLabel', $any($event.target).value)\"\r\n          />\r\n        </div>\r\n      </fieldset>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Stage mostrato nell\u2019avanzamento</label>\r\n        <fb-name-picker\r\n          [value]=\"screen().stageReference\"\r\n          [options]=\"stageOptions()\"\r\n          label=\"Stage\"\r\n          placeholder=\"Scegli uno stage\"\r\n          unknownMessage=\"Questo stage non e\u2019 dichiarato dal flow.\"\r\n          emptyMessage=\"Il flow non dichiara stage: creali nel pannello delle risorse.\"\r\n          (valueChange)=\"setScreenText('stageReference', $event ?? '')\"\r\n        />\r\n      </div>\r\n\r\n      <!--\r\n        Screen action (\u00A75.2). Due elenchi e non uno perche' il contratto li separa: piu' trigger\r\n        possono invocare la stessa action, quindi \u00ABchi la chiama\u00BB non e' una sua proprieta'. Le\r\n        action si aprono una alla volta: i cataloghi dipendono da tipo e nome, e tenerne N in volo\r\n        sarebbe N volte la corsa fra risposte.\r\n      -->\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Azioni della schermata</legend>\r\n        <p class=\"fb-section__note\">\r\n          Un campo che l\u2019utente compila puo\u2019 innescare un\u2019action i cui risultati finiscono negli\r\n          <strong>altri campi di questa schermata</strong>: e\u2019 il caso \u00ABscrivi il codice fiscale e nome\r\n          e cognome compaiono da soli\u00BB. L\u2019alternativa sarebbe spezzare la schermata in due con un\r\n          elemento Action in mezzo.\r\n        </p>\r\n\r\n        <div class=\"fb-list\">\r\n          @for (action of screenActions(); track $index) {\r\n            <div class=\"fb-list__item\">\r\n              <div class=\"fb-list__header\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--ghost\"\r\n                  [attr.aria-expanded]=\"selectedActionIndex() === $index\"\r\n                  (click)=\"selectAction(selectedActionIndex() === $index ? null : $index)\"\r\n                >\r\n                  {{ selectedActionIndex() === $index ? '\u25BE' : '\u25B8' }}\r\n                  {{ action.name || '(senza nome)' }}\r\n                </button>\r\n                <span class=\"fb-list__spacer\"></span>\r\n                <span class=\"fb-scr__side-hint\">{{ action.actionName || 'action non scelta' }}</span>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--ghost fb-btn--icon\"\r\n                  aria-label=\"Rimuovi l\u2019action\"\r\n                  (click)=\"removeScreenAction($index)\"\r\n                >\r\n                  \u00D7\r\n                </button>\r\n              </div>\r\n\r\n              @if (actionLosesResult(action)) {\r\n                <p class=\"fb-callout fb-callout--warn\">\r\n                  Questa action viene invocata ma il suo risultato si perde: aggiungi un parametro di\r\n                  uscita, oppure accendi l\u2019output automatico (SCREEN_ACTION_WITHOUT_OUTPUTS).\r\n                </p>\r\n              }\r\n              @if (actionHasNoTrigger(action)) {\r\n                <p class=\"fb-callout fb-callout--warn\">\r\n                  Nessun trigger la invoca: senza, non girera\u2019 mai.\r\n                </p>\r\n              }\r\n\r\n              @if (selectedActionIndex() === $index) {\r\n                <div class=\"fb-field\">\r\n                  <label class=\"fb-field__label fb-field__label--required\">Nome</label>\r\n                  <input\r\n                    class=\"fb-input fb-input--mono\"\r\n                    [value]=\"action.name || ''\"\r\n                    (change)=\"setActionName($index, $any($event.target).value)\"\r\n                  />\r\n                  @if (actionNameError(action); as error) {\r\n                    <p class=\"fb-field__error\">{{ error }}</p>\r\n                  }\r\n                  <p class=\"fb-field__hint\">\r\n                    E\u2019 il nome con cui la citano i trigger, e vive nello spazio dei nomi del flow. Con\r\n                    l\u2019output automatico e\u2019 anche la radice del riferimento:\r\n                    <code>{{ action.name || 'Cerca' }}.NomeOutput</code>.\r\n                  </p>\r\n                </div>\r\n\r\n                <div class=\"fb-field\">\r\n                  <label class=\"fb-field__label\">Tipo di action</label>\r\n                  <fb-name-picker\r\n                    [value]=\"action.actionType\"\r\n                    [options]=\"actionTypeOptions()\"\r\n                    label=\"Tipo di action\"\r\n                    placeholder=\"Scrivi o scegli un tipo\"\r\n                    [isMono]=\"false\"\r\n                    unknownMessage=\"Questo tipo di action non e\u2019 fra quelli dichiarati dal sistema ospite.\"\r\n                    emptyMessage=\"Catalogo dei tipi di action non disponibile: puoi scrivere il nome a mano.\"\r\n                    (valueChange)=\"setActionType($index, $event ?? '')\"\r\n                  />\r\n                </div>\r\n\r\n                <div class=\"fb-field\">\r\n                  <label class=\"fb-field__label fb-field__label--required\">Action</label>\r\n                  <fb-name-picker\r\n                    [value]=\"action.actionName\"\r\n                    [options]=\"actionOptions()\"\r\n                    label=\"Action\"\r\n                    placeholder=\"Scrivi o scegli un\u2019action\"\r\n                    [isMono]=\"false\"\r\n                    unknownMessage=\"Questa action non esiste nel catalogo del tipo scelto: e\u2019 ACTION_UNKNOWN.\"\r\n                    unknownSeverity=\"error\"\r\n                    emptyMessage=\"Scegli prima il tipo di action, oppure scrivi il nome a mano.\"\r\n                    (valueChange)=\"setActionTarget($index, $event ?? '')\"\r\n                  />\r\n                  @if (!action.actionName) {\r\n                    <p class=\"fb-field__error\">Obbligatoria: senza, ACTION_NAME_MISSING.</p>\r\n                  }\r\n                </div>\r\n\r\n                <label class=\"fb-check\">\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    [checked]=\"action.storeOutputAutomatically === true\"\r\n                    (change)=\"setActionStoreOutput($index, $any($event.target).checked)\"\r\n                  />\r\n                  Output automatico\r\n                </label>\r\n                <p class=\"fb-field__hint\">\r\n                  L\u2019output automatico rende il risultato leggibile come\r\n                  <code>{{ action.name || 'Cerca' }}.NomeOutput</code>, ma\r\n                  <strong>non scrive in nessun campo</strong>: e\u2019 la forma da usare quando il risultato\r\n                  serve a una condizione, non a precompilare.\r\n                </p>\r\n\r\n                <!--\r\n                  L'unico posto in cui un campo di schermata e' una destinazione (\u00A75.2):\r\n                  `POST /flows/references/writable` continua a escluderlo, e un Assignment che ci\r\n                  scrive resta TARGET_NOT_WRITABLE.\r\n                -->\r\n                <fb-parameter-editor\r\n                  [holder]=\"action\"\r\n                  [catalogParameters]=\"actionParameterCatalog()\"\r\n                  [showOutputs]=\"action.storeOutputAutomatically !== true\"\r\n                  outputTitle=\"Campi da riempire\"\r\n                  [extraTargets]=\"screenFieldTargets()\"\r\n                  [outputsDisabledReason]=\"\r\n                    action.storeOutputAutomatically === true\r\n                      ? 'Con l\u2019output automatico il risultato non viene scritto nei campi.'\r\n                      : null\r\n                  \"\r\n                  (changed)=\"onActionParametersChanged($index, $event)\"\r\n                />\r\n              }\r\n            </div>\r\n          } @empty {\r\n            <p class=\"fb-empty\">Nessuna action: i campi di questa schermata li compila solo l\u2019utente.</p>\r\n          }\r\n        </div>\r\n\r\n        <button type=\"button\" class=\"fb-btn\" (click)=\"addScreenAction()\">Aggiungi action</button>\r\n      </fieldset>\r\n\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Trigger</legend>\r\n        <p class=\"fb-section__note\">\r\n          Quale campo invoca quale action. Senza condizioni l\u2019action gira a ogni cambio del campo.\r\n        </p>\r\n\r\n        <div class=\"fb-list\">\r\n          @for (trigger of screenTriggers(); track $index) {\r\n            <div class=\"fb-list__item\">\r\n              <div class=\"fb-list__header\">\r\n                <span class=\"fb-list__index\">{{ $index + 1 }}</span>\r\n                <span class=\"fb-list__spacer\"></span>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--ghost fb-btn--icon\"\r\n                  aria-label=\"Rimuovi il trigger\"\r\n                  (click)=\"removeScreenTrigger($index)\"\r\n                >\r\n                  \u00D7\r\n                </button>\r\n              </div>\r\n\r\n              <div class=\"fb-field\">\r\n                <label class=\"fb-field__label fb-field__label--required\">Action da invocare</label>\r\n                <fb-name-picker\r\n                  [value]=\"trigger.screenActionName\"\r\n                  [options]=\"screenActionOptions()\"\r\n                  label=\"Action della schermata\"\r\n                  placeholder=\"Scegli un\u2019action\"\r\n                  unknownMessage=\"Questa schermata non dichiara un\u2019action con questo nome: e\u2019 SCREEN_ACTION_UNKNOWN.\"\r\n                  unknownSeverity=\"error\"\r\n                  emptyMessage=\"Aggiungi prima un\u2019action qui sopra.\"\r\n                  (valueChange)=\"setTriggerProperty($index, 'screenActionName', $event ?? '')\"\r\n                />\r\n              </div>\r\n\r\n              <div class=\"fb-field\">\r\n                <label class=\"fb-field__label\">Campo che la innesca</label>\r\n                <!-- I campi di **questa** schermata, non i riferimenti in generale (\u00A75.2). -->\r\n                <fb-name-picker\r\n                  [value]=\"trigger.triggerFieldName\"\r\n                  [options]=\"triggerFieldOptions()\"\r\n                  label=\"Campo della schermata\"\r\n                  placeholder=\"Scegli un campo\"\r\n                  unknownMessage=\"Questo non e\u2019 un campo di questa schermata: e\u2019 SCREEN_TRIGGER_FIELD_UNKNOWN.\"\r\n                  unknownSeverity=\"error\"\r\n                  emptyMessage=\"La schermata non ha ancora campi che raccolgono un valore.\"\r\n                  (valueChange)=\"setTriggerProperty($index, 'triggerFieldName', $event ?? '')\"\r\n                />\r\n              </div>\r\n\r\n              <div class=\"fb-field\">\r\n                <label class=\"fb-field__label\">All\u2019arrivo sulla schermata</label>\r\n                <select\r\n                  class=\"fb-select\"\r\n                  [fbValue]=\"trigger.initBehavior || ''\"\r\n                  (change)=\"setTriggerProperty($index, 'initBehavior', $any($event.target).value)\"\r\n                >\r\n                  <option value=\"\">\u2014 non invocare \u2014</option>\r\n                  <option value=\"runOnLoad\">Invoca al caricamento (runOnLoad)</option>\r\n                </select>\r\n                @if (triggerInitIsUnknown(trigger)) {\r\n                  <p class=\"fb-field__error\">\r\n                    \u00AB{{ trigger.initBehavior }}\u00BB non e\u2019 ammesso: l\u2019unico valore e\u2019 <code>runOnLoad</code>\r\n                    (SCREEN_TRIGGER_INIT_BEHAVIOR_UNKNOWN).\r\n                  </p>\r\n                }\r\n              </div>\r\n\r\n              @if (triggerHasNoCause(trigger)) {\r\n                <p class=\"fb-callout fb-callout--warn\">\r\n                  Senza un campo che la innesca e senza l\u2019invocazione al caricamento, questo trigger non\r\n                  scattera\u2019 mai (SCREEN_TRIGGER_WITHOUT_CAUSE).\r\n                </p>\r\n              }\r\n\r\n              <fb-condition-editor\r\n                [holder]=\"triggerConditions(trigger)\"\r\n                title=\"Invoca l\u2019action quando\"\r\n                [allowFormula]=\"false\"\r\n                [issuePath]=\"'triggers[' + $index + ']'\"\r\n                (changed)=\"onTriggerConditionsChanged($index, $event)\"\r\n              />\r\n            </div>\r\n          } @empty {\r\n            <p class=\"fb-empty\">Nessun trigger: le action dichiarate non verranno invocate.</p>\r\n          }\r\n        </div>\r\n\r\n        <button type=\"button\" class=\"fb-btn\" (click)=\"addScreenTrigger()\">Aggiungi trigger</button>\r\n      </fieldset>\r\n    } @else {\r\n      <!-- ---------------------------------------------------- proprieta' del campo -->\r\n      <header class=\"fb-scr__props-head\">\r\n        <h3 class=\"fb-scr__props-title\">{{ captionOf(selectedField()!) }}</h3>\r\n        <div class=\"fb-scr__props-actions\">\r\n          <button type=\"button\" class=\"fb-btn fb-btn--sm\" title=\"Sposta su\" (click)=\"moveSelected(-1)\">\u2191</button>\r\n          <button type=\"button\" class=\"fb-btn fb-btn--sm\" title=\"Sposta giu\u2019\" (click)=\"moveSelected(1)\">\u2193</button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-btn fb-btn--sm\"\r\n            title=\"Porta fuori dal contenitore\"\r\n            [disabled]=\"!canOutdent()\"\r\n            (click)=\"outdentSelected()\"\r\n          >\r\n            \u21E4\r\n          </button>\r\n          <button type=\"button\" class=\"fb-btn fb-btn--sm\" title=\"Duplica\" (click)=\"duplicateSelected()\">\u29C9</button>\r\n          <button type=\"button\" class=\"fb-btn fb-btn--danger fb-btn--sm\" title=\"Elimina\" (click)=\"removeSelected()\">\r\n            \u00D7\r\n          </button>\r\n        </div>\r\n      </header>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label fb-field__label--required\">Tipo</label>\r\n        <select\r\n          class=\"fb-select\"\r\n          [fbValue]=\"selectedField()!.fieldType || ''\"\r\n          (change)=\"setFieldType($any($event.target).value)\"\r\n        >\r\n          <option value=\"\">\u2014 scegli \u2014</option>\r\n          @for (entry of dictionary.screenFieldTypes(); track entry.value) {\r\n            <option [value]=\"entry.value\">{{ entry.label }}</option>\r\n          }\r\n        </select>\r\n        @if (!selectedField()!.fieldType) {\r\n          <p class=\"fb-field__error\">Il tipo e\u2019 obbligatorio: senza, SCREEN_FIELD_TYPE_MISSING.</p>\r\n        } @else if (isUnknownType(selectedField())) {\r\n          <p class=\"fb-field__hint fb-field__hint--warn\">\r\n            Questo tipo non e\u2019 nel dizionario: l\u2019editor non sa quali campi ammetta e mostra solo i comuni.\r\n          </p>\r\n        } @else if (selectedType()?.description) {\r\n          <p class=\"fb-field__hint\">{{ selectedType()?.description }}</p>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Nome</label>\r\n        <!-- Sul `change` e non sull\u2019`input`: la rinomina riscrive i riferimenti nel documento,\r\n             e farlo a ogni tasto significherebbe riscriverlo per ogni lettera. -->\r\n        <input\r\n          class=\"fb-input fb-input--mono\"\r\n          [value]=\"selectedField()!.name || ''\"\r\n          (change)=\"setFieldName($any($event.target).value)\"\r\n        />\r\n        @if (selectedIsResource()) {\r\n          <p class=\"fb-field__hint\">\r\n            Questo campo e\u2019 una <strong>risorsa</strong>: lo referenzi come\r\n            <code>{{ selectedField()!.name || 'Nome' }}</code> in condizioni, formule e parametri. \u00C8 di\r\n            sola lettura per il flow \u2014 un Assignment che ci scrive e\u2019 TARGET_NOT_WRITABLE.\r\n          </p>\r\n        }\r\n      </div>\r\n\r\n      @if (!selectedType()?.isContainer) {\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">\r\n            {{ selectedField()!.fieldType === 'DisplayText' ? 'Testo' : 'Etichetta' }}\r\n          </label>\r\n          <textarea\r\n            class=\"fb-textarea\"\r\n            [value]=\"selectedField()!.fieldText || ''\"\r\n            (input)=\"setFieldProperty('fieldText', $any($event.target).value)\"\r\n          ></textarea>\r\n          <p class=\"fb-field__hint\">\r\n            Supporta i merge field <code>&#123;!Riferimento&#125;</code>.\r\n            @if (selectedField()!.fieldType === 'ComponentInstance') {\r\n              <!--\r\n                \u00A75.2 \u2014 su un componente l\u2019etichetta e\u2019 **ammessa** e viene consegnata al frontend\r\n                in `label`, ma la sua assenza non e\u2019 un rilievo: un componente di solito disegna\r\n                la propria intestazione. Nasconderla, come faceva prima l\u2019editor, toglieva un\r\n                campo che il contratto prevede.\r\n              -->\r\n              Facoltativa: un componente di solito disegna la propria intestazione.\r\n            }\r\n          </p>\r\n        </div>\r\n      } @else {\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">Intestazione</label>\r\n          <input\r\n            class=\"fb-input\"\r\n            [value]=\"selectedField()!.fieldText || ''\"\r\n            (input)=\"setFieldProperty('fieldText', $any($event.target).value)\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Testo di aiuto</label>\r\n        <input\r\n          class=\"fb-input\"\r\n          [value]=\"selectedField()!.helpText || ''\"\r\n          (input)=\"setFieldProperty('helpText', $any($event.target).value)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Larghezza</label>\r\n        <div class=\"fb-scr__width\">\r\n          <input\r\n            type=\"range\"\r\n            min=\"1\"\r\n            max=\"12\"\r\n            step=\"1\"\r\n            [value]=\"widthOf(selectedField()!)\"\r\n            (input)=\"setNumberProperty('width', $any($event.target).value)\"\r\n          />\r\n          <span class=\"fb-scr__width-value\">{{ widthOf(selectedField()!) }}/12</span>\r\n        </div>\r\n        <p class=\"fb-field__hint\">\r\n          Colonne della griglia della schermata. \u00C8 un\u2019indicazione: il frontend puo\u2019 ignorarla.\r\n        </p>\r\n      </div>\r\n\r\n      @if (selectedField()!.fieldType === 'ComponentInstance') {\r\n        <!--\r\n          \u00A75.2 \u2014 perche\u2019 qui non c\u2019e\u2019 \u00ABobbligatorio\u00BB. La domanda arriva sempre, e la risposta non\r\n          si indovina guardando l\u2019interfaccia: un componente non ha un valore proprio, ce l\u2019hanno\r\n          i suoi output, che vanno in **variabili** scelte dall\u2019autore. \u00ABObbligatorio\u00BB dovrebbe\r\n          dire *quale output* deve essere valorizzato, e il metadata non ha modo di dirlo \u2014\r\n          dichiararlo qui sarebbe `SCREEN_FIELD_CONFIGURATION_INVALID` e il runtime lo\r\n          ignorerebbe. Le due strade vere stanno nel contratto e sono queste.\r\n        -->\r\n        <p class=\"fb-field__hint\">\r\n          Un componente non raccoglie un valore \u2014 lo fanno i suoi output \u2014 quindi obbligatorieta\u2019, valore\r\n          predefinito e regola di validazione non si applicano: dichiararli e\u2019\r\n          <code>SCREEN_FIELD_CONFIGURATION_INVALID</code> e il runtime li ignora. Per pretendere una\r\n          compilazione: la validazione la fa il componente stesso, oppure si controlla la variabile di\r\n          destinazione con una Decision dopo la schermata.\r\n        </p>\r\n      }\r\n\r\n      <!-- ------------------------------------------------ campi che raccolgono un valore -->\r\n      @if (selectedType()?.storesValue) {\r\n        <fieldset class=\"fb-section\">\r\n          <legend class=\"fb-section__title\">Valore</legend>\r\n\r\n          @if (selectedField()!.fieldType !== 'ObjectProvided') {\r\n            <div class=\"fb-field\">\r\n              <label\r\n                class=\"fb-field__label\"\r\n                [class.fb-field__label--required]=\"!!selectedType()?.requiresDataType\"\r\n              >\r\n                Tipo di dato\r\n              </label>\r\n              <select\r\n                class=\"fb-select\"\r\n                [fbValue]=\"selectedField()!.dataType || ''\"\r\n                (change)=\"setFieldProperty('dataType', $any($event.target).value)\"\r\n              >\r\n                <option value=\"\">\u2014 scegli \u2014</option>\r\n                @for (entry of dictionary.dataTypes(); track entry.value) {\r\n                  <option [value]=\"entry.value\">{{ entry.label }}</option>\r\n                }\r\n              </select>\r\n              @if (selectedType()?.requiresDataType && !selectedField()!.dataType) {\r\n                <p class=\"fb-field__error\">Obbligatorio per questo tipo di campo (DATA_TYPE_MISSING).</p>\r\n              }\r\n              @if (selectedType()?.isCollection) {\r\n                <p class=\"fb-field__hint\">\r\n                  Il valore raccolto e\u2019 una <strong>collection</strong>, non una stringa con i valori\r\n                  separati: nelle condizioni si usano gli operatori di collection.\r\n                </p>\r\n              }\r\n            </div>\r\n\r\n            @if (requiresObjectType()) {\r\n              <div class=\"fb-field\">\r\n                <label class=\"fb-field__label\" [class.fb-field__label--required]=\"objectTypeIsStructure()\">\r\n                  {{\r\n                    objectTypeIsStructure()\r\n                      ? 'Classe'\r\n                      : selectedField()!.dataType === 'Enum'\r\n                        ? 'Tipo di enumerazione'\r\n                        : 'Oggetto'\r\n                  }}\r\n                </label>\r\n                @if (selectedField()!.dataType === 'Enum') {\r\n                  <!-- Dizionario chiuso: si sceglie, non si scrive. -->\r\n                  <select\r\n                    class=\"fb-select\"\r\n                    [fbValue]=\"selectedField()!.objectType || ''\"\r\n                    (change)=\"setFieldProperty('objectType', $any($event.target).value)\"\r\n                  >\r\n                    <option value=\"\">\u2014 scegli \u2014</option>\r\n                    @for (entry of enumOptions(); track entry.name) {\r\n                      <option [value]=\"entry.name\">{{ entry.label || entry.name }}</option>\r\n                    }\r\n                  </select>\r\n                  @if (!selectedField()!.objectType) {\r\n                    <p class=\"fb-field__hint fb-field__hint--warn\">\r\n                      Senza il tipo concreto l\u2019editor non puo\u2019 proporre i valori dell\u2019enumerazione.\r\n                    </p>\r\n                  }\r\n                } @else if (objectTypeIsStructure()) {\r\n                  <fb-structure-picker\r\n                    [value]=\"selectedField()!.objectType\"\r\n                    label=\"Classe\"\r\n                    (valueChange)=\"setFieldProperty('objectType', $event ?? '')\"\r\n                  />\r\n                  @if (!selectedField()!.objectType) {\r\n                    <p class=\"fb-field__error\">\r\n                      La classe e\u2019 obbligatoria: senza, il runtime non ha nulla da istanziare\r\n                      (OBJECT_TYPE_MISSING).\r\n                    </p>\r\n                  }\r\n                } @else {\r\n                  <fb-object-picker\r\n                    [value]=\"selectedField()!.objectType\"\r\n                    label=\"Oggetto\"\r\n                    (valueChange)=\"setFieldProperty('objectType', $event ?? '')\"\r\n                  />\r\n                }\r\n              </div>\r\n            }\r\n          } @else {\r\n            <div class=\"fb-field\">\r\n              <label class=\"fb-field__label fb-field__label--required\">Campo dell\u2019entita\u2019</label>\r\n              <p class=\"fb-field__hint\">\r\n                Tipo, label, obbligatorieta\u2019, scala e \u2014 se il campo e\u2019 una picklist \u2014 le opzioni arrivano\r\n                dallo schema dati: qui non si ridichiarano.\r\n              </p>\r\n              <fb-object-picker\r\n                [value]=\"providedObject() || undefined\"\r\n                label=\"Oggetto\"\r\n                (valueChange)=\"setProvidedObject($event)\"\r\n              />\r\n              <fb-field-picker\r\n                [value]=\"providedField() || undefined\"\r\n                [object]=\"providedObject() || undefined\"\r\n                label=\"Campo\"\r\n                (valueChange)=\"setProvidedField($event)\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          <label class=\"fb-check\">\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"selectedIsRequired()\"\r\n              (change)=\"setRequired($any($event.target).checked)\"\r\n            />\r\n            Obbligatorio\r\n          </label>\r\n          <label class=\"fb-check\">\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"selectedIsEditable()\"\r\n              (change)=\"setEditable($any($event.target).checked)\"\r\n            />\r\n            Modificabile\r\n          </label>\r\n          @if (!selectedIsEditable()) {\r\n            <p class=\"fb-field__hint\">\r\n              A <code>false</code> il runtime <strong>ignora</strong> cio\u2019 che il client rimanda indietro:\r\n              e\u2019 l\u2019unico modo di rendere un campo davvero di sola lettura.\r\n            </p>\r\n          }\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Valore di default</label>\r\n            <fb-value-editor\r\n              [value]=\"selectedField()!.defaultValue\"\r\n              [dataType]=\"selectedField()!.dataType\"\r\n              [objectType]=\"selectedField()!.objectType\"\r\n              [isCollection]=\"selectedType()?.isCollection\"\r\n              label=\"Valore di default\"\r\n              (valueChange)=\"setDefaultValue($event)\"\r\n            />\r\n          </div>\r\n\r\n          @if (scaleApplies()) {\r\n            <div class=\"fb-field\">\r\n              <label class=\"fb-field__label\">Decimali</label>\r\n              <input\r\n                class=\"fb-input\"\r\n                type=\"number\"\r\n                min=\"0\"\r\n                [value]=\"selectedField()!.scale ?? ''\"\r\n                (change)=\"setNumberProperty('scale', $any($event.target).value)\"\r\n              />\r\n            </div>\r\n          } @else if (selectedField()!.scale !== undefined) {\r\n            <p class=\"fb-field__hint fb-field__hint--warn\">\r\n              <code>scale</code> su un campo non numerico e\u2019 SCALE_NOT_APPLICABLE.\r\n            </p>\r\n          }\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Lunghezza massima</label>\r\n            <input\r\n              class=\"fb-input\"\r\n              type=\"number\"\r\n              min=\"1\"\r\n              [value]=\"selectedField()!.maxLength ?? ''\"\r\n              (change)=\"setNumberProperty('maxLength', $any($event.target).value)\"\r\n            />\r\n            <p class=\"fb-field__hint\">Verificata anche dal runtime (TOO_LONG).</p>\r\n          </div>\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Tornando sulla schermata</label>\r\n            <select\r\n              class=\"fb-select\"\r\n              [fbValue]=\"selectedField()!.inputsOnNextNavToAssocScrn || ''\"\r\n              (change)=\"setFieldProperty('inputsOnNextNavToAssocScrn', $any($event.target).value)\"\r\n            >\r\n              <option value=\"\">Predefinito (mantieni i valori)</option>\r\n              @for (entry of dictionary.screenFieldInputsRevisited(); track entry.value) {\r\n                <option [value]=\"entry.value\">{{ entry.label }}</option>\r\n              }\r\n            </select>\r\n          </div>\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Regola di validazione</label>\r\n            <!--\r\n              `commitOn=\"change\"`: qui mutare il documento ridisegna l'anteprima, e riscriverla a\r\n              ogni tasto costa. La verifica parte lo stesso mentre si digita (\u00A76.3).\r\n            -->\r\n            <fb-formula-editor\r\n              [expression]=\"selectedField()!.validationRule?.formulaExpression || ''\"\r\n              usage=\"ValidationRule\"\r\n              expectedDataType=\"Boolean\"\r\n              commitOn=\"change\"\r\n              [rows]=\"2\"\r\n              placeholder=\"Espressione, es. LEN(Nome) > 3\"\r\n              ariaLabel=\"Regola di validazione\"\r\n              (expressionChange)=\"setValidationRule('formulaExpression', $event)\"\r\n            />\r\n            <input\r\n              class=\"fb-input\"\r\n              placeholder=\"Messaggio mostrato quando l\u2019espressione e\u2019 falsa\"\r\n              [value]=\"selectedField()!.validationRule?.errorMessage || ''\"\r\n              (change)=\"setValidationRule('errorMessage', $any($event.target).value)\"\r\n            />\r\n            <p class=\"fb-field__hint\">\r\n              L\u2019espressione la valuta il motore di regole: il backend non la interpreta, la fa\r\n              verificare al motore.\r\n            </p>\r\n          </div>\r\n        </fieldset>\r\n      }\r\n\r\n      <!-- --------------------------------------------------------------- choice -->\r\n      @if (selectedType()?.acceptsChoices) {\r\n        <fieldset class=\"fb-section\">\r\n          <legend class=\"fb-section__title\">Opzioni</legend>\r\n          <p class=\"fb-section__note\">\r\n            Accetta <strong>Choice</strong> e <strong>Dynamic choice set</strong>, nell\u2019ordine in cui le\r\n            opzioni compaiono. Puntare a una variabile e\u2019 SCREEN_FIELD_CHOICE_UNKNOWN.\r\n          </p>\r\n\r\n          @if (!selectedField()!.choiceReferences?.length) {\r\n            @if (selectedField()!.fieldType === 'ObjectProvided') {\r\n              <!-- Le opzioni di una picklist arrivano dallo schema: qui si aggiungono solo se\r\n                   si vuole sostituirle, e non dichiararne nessuna e' il caso normale. -->\r\n              <p class=\"fb-field__hint\">\r\n                Se il campo dello schema e\u2019 una picklist, le opzioni arrivano da l\u00EC: dichiararle qui\r\n                serve solo a sostituirle.\r\n              </p>\r\n            } @else {\r\n              <p class=\"fb-callout fb-callout--warn\">\r\n                Nessuna opzione: il campo non ha niente da mostrare (SCREEN_FIELD_CHOICES_MISSING).\r\n              </p>\r\n            }\r\n          }\r\n\r\n          <div class=\"fb-list\">\r\n            @for (choice of selectedField()!.choiceReferences || []; track $index) {\r\n              <div class=\"fb-list__item\">\r\n                <div class=\"fb-list__header\">\r\n                  <span class=\"fb-list__index\">{{ $index + 1 }}</span>\r\n                  <span class=\"fb-list__title\">{{ choice }}</span>\r\n                  <span class=\"fb-list__spacer\"></span>\r\n                  <button type=\"button\" class=\"fb-btn fb-btn--sm\" (click)=\"moveChoice($index, -1)\">\u2191</button>\r\n                  <button type=\"button\" class=\"fb-btn fb-btn--sm\" (click)=\"moveChoice($index, 1)\">\u2193</button>\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"fb-btn fb-btn--ghost fb-btn--sm\"\r\n                    aria-label=\"Rimuovi\"\r\n                    (click)=\"removeChoice($index)\"\r\n                  >\r\n                    \u00D7\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Aggiungi un\u2019opzione</label>\r\n            <fb-name-picker\r\n              [options]=\"choiceOptions()\"\r\n              label=\"Choice\"\r\n              placeholder=\"Scegli una choice o un choice set\"\r\n              unknownMessage=\"Questo nome non e\u2019 una choice ne\u2019 un choice set: e\u2019 SCREEN_FIELD_CHOICE_UNKNOWN.\"\r\n              unknownSeverity=\"error\"\r\n              emptyMessage=\"Il flow non dichiara nessuna choice: creale nel pannello delle risorse.\"\r\n              (valueChange)=\"addChoice($event)\"\r\n            />\r\n          </div>\r\n\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label\">Opzione selezionata all\u2019apertura</label>\r\n            <select\r\n              class=\"fb-select\"\r\n              [fbValue]=\"selectedField()!.defaultSelectedChoiceReference || ''\"\r\n              (change)=\"setFieldProperty('defaultSelectedChoiceReference', $any($event.target).value)\"\r\n            >\r\n              <option value=\"\">\u2014 nessuna \u2014</option>\r\n              @for (choice of selectedField()!.choiceReferences || []; track $index) {\r\n                <option [value]=\"choice\">{{ choice }}</option>\r\n              }\r\n            </select>\r\n            @if (defaultChoiceIsForeign()) {\r\n              <p class=\"fb-field__hint fb-field__hint--warn\">\r\n                \u00AB{{ selectedField()!.defaultSelectedChoiceReference }}\u00BB non e\u2019 fra le opzioni elencate qui\r\n                sopra.\r\n              </p>\r\n            }\r\n          </div>\r\n        </fieldset>\r\n      }\r\n\r\n      <!-- ------------------------------------------------------- contenitori -->\r\n      @if (selectedType()?.isContainer) {\r\n        <fieldset class=\"fb-section\">\r\n          <legend class=\"fb-section__title\">Contenitore</legend>\r\n          @if (selectedField()!.fieldType === 'RegionContainer') {\r\n            <div class=\"fb-field\">\r\n              <label class=\"fb-field__label\">Tipo di sezione</label>\r\n              <select\r\n                class=\"fb-select\"\r\n                [fbValue]=\"selectedField()!.regionContainerType || ''\"\r\n                (change)=\"setFieldProperty('regionContainerType', $any($event.target).value)\"\r\n              >\r\n                <option value=\"\">\u2014 predefinito \u2014</option>\r\n                @for (entry of dictionary.regionContainerTypes(); track entry.value) {\r\n                  <option [value]=\"entry.value\">{{ entry.label }}</option>\r\n                }\r\n              </select>\r\n            </div>\r\n          }\r\n          @if (!selectedField()!.fields?.length) {\r\n            <p class=\"fb-callout fb-callout--warn\">\r\n              Il contenitore e\u2019 vuoto: non produce niente sulla schermata (SCREEN_CONTAINER_EMPTY).\r\n            </p>\r\n          }\r\n        </fieldset>\r\n      }\r\n\r\n      <!-- --------------------------------------------------- ComponentInstance -->\r\n      @if (selectedField()!.fieldType === 'ComponentInstance') {\r\n        <fieldset class=\"fb-section\">\r\n          <legend class=\"fb-section__title\">Componente</legend>\r\n          <p class=\"fb-section__note\">\r\n            Componenti e form sono la stessa domanda al frontend \u2014 cosa sa rendere, e con quali parametri\r\n            \u2014 e passano dallo stesso catalogo. Un <code>ComponentInstance</code> non ha un valore proprio:\r\n            lo hanno i suoi output.\r\n          </p>\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label fb-field__label--required\">Componente</label>\r\n            <fb-name-picker\r\n              [value]=\"selectedField()!.extensionName\"\r\n              [options]=\"componentOptions()\"\r\n              [unusableOptions]=\"unusableComponents()\"\r\n              label=\"Componente\"\r\n              placeholder=\"Scrivi o scegli un componente\"\r\n              [isMono]=\"false\"\r\n              unknownMessage=\"Questo componente non esiste nel catalogo: e\u2019 SCREEN_COMPONENT_UNKNOWN.\"\r\n              unknownSeverity=\"error\"\r\n              unusableMessage=\"Questo nome e\u2019 una schermata intera, non un componente montabile qui (FORM_KIND_MISMATCH).\"\r\n              emptyMessage=\"Il catalogo dei componenti non e\u2019 popolato: il nome non viene verificato.\"\r\n              (valueChange)=\"setFieldProperty('extensionName', $event ?? '')\"\r\n            />\r\n            @if (!selectedField()!.extensionName) {\r\n              <p class=\"fb-field__error\">Obbligatorio: senza, SCREEN_COMPONENT_MISSING.</p>\r\n            }\r\n          </div>\r\n\r\n          <label class=\"fb-check\">\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"selectedField()!.storeOutputAutomatically === true\"\r\n              (change)=\"setStoreOutputAutomatically($any($event.target).checked)\"\r\n            />\r\n            Rendi gli output referenziabili automaticamente\r\n          </label>\r\n          @if (selectedField()!.storeOutputAutomatically) {\r\n            <p class=\"fb-field__hint\">\r\n              Gli output si referenziano come\r\n              <code>{{ selectedField()!.name || 'Campo' }}.nomeOutput</code>, senza dichiarare variabili.\r\n            </p>\r\n          }\r\n          @if (hasOutputConflict()) {\r\n            <p class=\"fb-callout fb-callout--error\">\r\n              Output automatici <strong>e</strong> parametri di uscita insieme:\r\n              OUTPUT_CONFIGURATION_CONFLICT.\r\n            </p>\r\n          }\r\n\r\n          <fb-parameter-editor\r\n            [holder]=\"$any(selectedField())\"\r\n            [catalogParameters]=\"componentParameterList()\"\r\n            inputTitle=\"Valori passati al componente\"\r\n            outputTitle=\"Valori raccolti dal componente\"\r\n            [showOutputs]=\"!selectedField()!.storeOutputAutomatically\"\r\n            outputsDisabledReason=\"Gli output sono automatici: disattivalo per assegnarli a variabili.\"\r\n            (changed)=\"onComponentParametersChanged($event)\"\r\n          />\r\n        </fieldset>\r\n      }\r\n\r\n      <!-- ------------------------------------------------------- visibilita' -->\r\n      <fieldset class=\"fb-section\">\r\n        <legend class=\"fb-section__title\">Visibilita\u2019</legend>\r\n        <p class=\"fb-section__note\">\r\n          Le regole si rivalutano <strong>sui valori appena inviati</strong>: e\u2019 cos\u00EC che un campo compare\r\n          in funzione di un altro campo della stessa schermata. Un campo risultato nascosto viene\r\n          <strong>azzerato</strong> e non viene validato.\r\n        </p>\r\n        <fb-condition-editor\r\n          [holder]=\"visibilityRule()\"\r\n          title=\"Mostra il campo quando\"\r\n          [allowFormula]=\"false\"\r\n          [issuePath]=\"'fields[' + (selectedField()!.name || '') + '].visibilityRule'\"\r\n          (changed)=\"onVisibilityChanged($event)\"\r\n        />\r\n      </fieldset>\r\n    }\r\n  </aside>\r\n</div>\r\n\r\n<fb-connector-editor\r\n  [nodeName]=\"name()\"\r\n  [node]=\"node()\"\r\n  [outlets]=\"outlets()\"\r\n  (connectorChanged)=\"onConnectorChanged($event)\"\r\n/>\r\n\r\n<!--\r\n  ============================================================== l'anteprima\r\n  Due template ricorsivi. `listTpl` disegna i figli di un contenitore, e nient'altro: `data-item`\r\n  marca cio' che conta come fratello nel calcolo del punto di rilascio, e il segnaposto del\r\n  contenitore vuoto ne resta fuori. La barra di inserimento non e' qui \u2014 sta sopra l'anteprima,\r\n  vedi il velo nel frame.\r\n-->\r\n<ng-template #listTpl let-fields let-parent=\"parent\" let-axis=\"axis\">\r\n  @for (child of fields; track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"fieldTpl\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: child, path: childPath(parent, $index), axis: axis }\"\r\n    />\r\n  }\r\n  @if (!fields.length) {\r\n    <p class=\"fb-scr__drop-hint\">Trascina qui un componente</p>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #fieldTpl let-field let-path=\"path\" let-axis=\"axis\">\r\n  <div\r\n    class=\"fb-scr__item\"\r\n    data-item=\"\"\r\n    cdkDrag\r\n    [style.grid-column]=\"'span ' + widthOf(field)\"\r\n    [class.fb-scr__item--selected]=\"isSelected(path)\"\r\n    [class.fb-scr__item--dragging]=\"isDragging(path)\"\r\n    [class.fb-scr__item--container]=\"isContainer(field)\"\r\n    (cdkDragStarted)=\"onFieldDragStarted(path)\"\r\n    (cdkDragMoved)=\"onFieldDragMoved($event)\"\r\n    (cdkDragEnded)=\"onFieldDragEnded($event, path)\"\r\n    (click)=\"select(path); $event.stopPropagation()\"\r\n  >\r\n    <span class=\"fb-scr__grip\" cdkDragHandle title=\"Trascina per spostare\" aria-hidden=\"true\">\u283F</span>\r\n    @if (field.visibilityRule?.conditions?.length) {\r\n      <span class=\"fb-scr__flag\" title=\"Ha una regola di visibilita\u2019\">\u25D0</span>\r\n    }\r\n\r\n    @switch (field.fieldType) {\r\n      @case ('RegionContainer') {\r\n        <div class=\"fb-scr__section\">\r\n          @if (field.regionContainerType !== 'SectionWithoutHeader') {\r\n            <header class=\"fb-scr__section-head\">{{ field.fieldText || field.name }}</header>\r\n          }\r\n          <div class=\"fb-scr__cols\" [attr.data-drop]=\"dropId(path)\" data-axis=\"row\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"listTpl\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: field.fields || [], parent: path, axis: 'row' }\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n      @case ('Region') {\r\n        <div class=\"fb-scr__region\">\r\n          <span class=\"fb-scr__region-tag\">{{ field.name }} \u00B7 {{ widthOf(field) }}/12</span>\r\n          <div class=\"fb-scr__region-body\" [attr.data-drop]=\"dropId(path)\" data-axis=\"column\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"listTpl\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: field.fields || [], parent: path, axis: 'column' }\"\r\n            />\r\n          </div>\r\n        </div>\r\n      }\r\n      @case ('DisplayText') {\r\n        <p class=\"fb-scr__display\">{{ field.fieldText || '(testo vuoto)' }}</p>\r\n      }\r\n      @case ('LargeTextArea') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control fb-scr__control--area\">{{ placeholderOf(field) }}</div>\r\n      }\r\n      @case ('PasswordField') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control\">\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022</div>\r\n      }\r\n      @case ('DropdownBox') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control fb-scr__control--select\">\r\n          <span>{{ field.defaultSelectedChoiceReference || choiceLabelsOf(field)[0] || '\u2014 scegli \u2014' }}</span>\r\n          <span aria-hidden=\"true\">\u25BE</span>\r\n        </div>\r\n      }\r\n      @case ('MultiSelectPicklist') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control fb-scr__control--select\">\r\n          <span>{{ choiceLabelsOf(field).join(', ') || '\u2014 scegli \u2014' }}</span>\r\n          <span aria-hidden=\"true\">\u2261</span>\r\n        </div>\r\n      }\r\n      @case ('RadioButtons') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__options\">\r\n          @for (option of choiceLabelsOf(field); track $index) {\r\n            <span class=\"fb-scr__option\">\u25EF {{ option }}</span>\r\n          }\r\n          @if (!choiceLabelsOf(field).length) {\r\n            <span class=\"fb-scr__option fb-scr__option--missing\">Nessuna opzione</span>\r\n          }\r\n        </div>\r\n      }\r\n      @case ('MultiSelectCheckboxes') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__options\">\r\n          @for (option of choiceLabelsOf(field); track $index) {\r\n            <span class=\"fb-scr__option\">\u2610 {{ option }}</span>\r\n          }\r\n          @if (!choiceLabelsOf(field).length) {\r\n            <span class=\"fb-scr__option fb-scr__option--missing\">Nessuna opzione</span>\r\n          }\r\n        </div>\r\n      }\r\n      @case ('ComponentInstance') {\r\n        <!--\r\n          L\u2019etichetta si disegna se c\u2019e\u2019: il runtime la consegna in `label` come per gli altri\r\n          campi (\u00A75.2). Nessun asterisco: un componente non raccoglie un valore, quindi\r\n          \u00ABobbligatorio\u00BB non ha niente su cui applicarsi.\r\n        -->\r\n        @if (field.fieldText) {\r\n          <label class=\"fb-scr__label\">{{ field.fieldText }}</label>\r\n        }\r\n        <div class=\"fb-scr__component\">\r\n          <span aria-hidden=\"true\">\u2B21</span>\r\n          {{ field.extensionName || 'Componente non indicato' }}\r\n        </div>\r\n      }\r\n      @case ('ObjectProvided') {\r\n        <label class=\"fb-scr__label\">\r\n          {{ field.fieldText || field.objectFieldReference || field.name }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control\">{{ placeholderOf(field) }}</div>\r\n        <span class=\"fb-scr__tag\">{{ field.objectFieldReference || 'campo non indicato' }}</span>\r\n      }\r\n      @default {\r\n        <label class=\"fb-scr__label\">\r\n          {{ captionOf(field) }}\r\n          @if (field.isRequired) {\r\n            <span class=\"fb-scr__req\">*</span>\r\n          }\r\n        </label>\r\n        <div class=\"fb-scr__control\">{{ placeholderOf(field) }}</div>\r\n        @if (isUnknownType(field)) {\r\n          <span class=\"fb-scr__tag fb-scr__tag--warn\">{{ field.fieldType }}: tipo non nel dizionario</span>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".fb-scr{display:grid;grid-template-columns:220px minmax(0,1fr) 340px;gap:12px;align-items:start;margin-bottom:14px}@media(max-width:1100px){.fb-scr{grid-template-columns:minmax(0,1fr)}}.fb-scr__side,.fb-scr__props{min-width:0;padding:10px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-surface-alt, #f7f8fa)}.fb-scr__tabs{display:flex;gap:4px;margin-bottom:8px}.fb-scr__tab{flex:1;padding:5px 8px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff);color:var(--fb-text-muted, #6b7086);font:inherit;font-size:11px;font-weight:600;cursor:pointer}.fb-scr__tab--active{border-color:var(--fb-accent, #4f6ef7);background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 10%,transparent);color:var(--fb-accent-strong, #3d59e0)}.fb-scr__side-hint,.fb-scr__side-empty{margin:6px 0;font-size:11px;color:var(--fb-text-muted, #6b7086)}.fb-scr__palette{display:flex;flex-direction:column;gap:4px;margin:8px 0 0;padding:0;max-height:320px;overflow-y:auto;overscroll-behavior:contain;list-style:none}.fb-scr__chip{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff);color:var(--fb-text, #1a1c23);font:inherit;font-size:12px;text-align:left;cursor:grab}.fb-scr__chip:hover{border-color:var(--fb-accent, #4f6ef7)}.fb-scr__chip-icon{flex:none;width:20px;text-align:center;color:var(--fb-text-muted, #6b7086)}.fb-scr__chip-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-scr__chip-label small{margin-left:4px;color:var(--fb-text-subtle, #98a2b3);font-size:10px}.fb-scr__canvas{min-width:0;padding:14px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-canvas-bg, #f4f5f7)}.fb-scr__frame{position:relative;display:flex;flex-direction:column;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-sm, 8px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));overflow:hidden}.fb-scr__frame-head{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--fb-border-subtle, #eef0f4);font-size:13px;font-weight:600}.fb-scr__help{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--fb-surface-sunken, #eef0f4);color:var(--fb-text-muted, #6b7086);font-size:10px}.fb-scr__body,.fb-scr__region-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-content:start;gap:8px 0;padding:12px;min-height:90px}.fb-scr__region-body{padding:8px;min-height:60px}.fb-scr__cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch;gap:0;padding:8px;min-height:60px}.fb-scr__cols>.fb-scr__item{display:flex;align-self:stretch}.fb-scr__cols>.fb-scr__item>.fb-scr__region{flex:1;min-width:0}.fb-scr__drop-hint{grid-column:1 / -1;margin:0;padding:10px;border:1px dashed var(--fb-border-strong, #cfd4de);border-radius:var(--fb-radius-xs, 6px);color:var(--fb-text-subtle, #98a2b3);font-size:11px;text-align:center}.fb-scr__marker{position:absolute;z-index:2;border-radius:2px;background:var(--fb-accent, #4f6ef7);pointer-events:none}.fb-scr__item{position:relative;box-sizing:border-box;padding:6px 8px;border:1px solid transparent;border-radius:var(--fb-radius-xs, 6px);cursor:pointer}.fb-scr__item:hover{border-color:var(--fb-border-strong, #cfd4de);background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 4%,transparent)}.fb-scr__item--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:inset 0 0 0 1px var(--fb-accent, #4f6ef7)}.fb-scr__item--dragging{opacity:.45;pointer-events:none}.fb-scr__grip{position:absolute;top:2px;left:-2px;padding:0 3px;color:var(--fb-text-subtle, #98a2b3);font-size:11px;line-height:1;opacity:0;cursor:grab}.fb-scr__item:hover>.fb-scr__grip,.fb-scr__item--selected>.fb-scr__grip{opacity:1}.fb-scr__flag{position:absolute;top:2px;right:4px;color:var(--fb-text-muted, #6b7086);font-size:11px}.fb-scr__label{display:block;margin-bottom:3px;font-size:11px;font-weight:600;color:var(--fb-text, #1a1c23)}.fb-scr__req{color:var(--fb-error, #dc2626)}.fb-scr__control{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:26px;padding:4px 8px;border:1px solid var(--fb-border-strong, #cfd4de);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff);color:var(--fb-text-subtle, #98a2b3);font-size:12px;pointer-events:none}.fb-scr__control--area{min-height:54px;align-items:flex-start}.fb-scr__display{margin:0;font-size:12px;color:var(--fb-text, #1a1c23)}.fb-scr__options{display:flex;flex-direction:column;gap:2px;pointer-events:none}.fb-scr__option{font-size:12px;color:var(--fb-text-muted, #6b7086)}.fb-scr__option--missing{color:var(--fb-warning, #b7791f)}.fb-scr__component{display:flex;align-items:center;gap:6px;padding:10px;border:1px dashed var(--fb-accent, #4f6ef7);border-radius:var(--fb-radius-xs, 6px);background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 5%,transparent);font-size:12px;color:var(--fb-text-muted, #6b7086)}.fb-scr__tag{display:inline-block;margin-top:3px;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-scr__tag--warn{color:var(--fb-warning, #b7791f)}.fb-scr__section{border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface-alt, #f7f8fa)}.fb-scr__section-head{padding:5px 10px;border-bottom:1px solid var(--fb-border-subtle, #eef0f4);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--fb-text-muted, #6b7086)}.fb-scr__region{border:1px dashed var(--fb-border-strong, #cfd4de);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff)}.fb-scr__region-tag{display:block;padding:3px 6px 0;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-scr__frame-foot{display:flex;align-items:center;gap:6px;padding:8px 12px;border-top:1px solid var(--fb-border-subtle, #eef0f4);background:var(--fb-surface-alt, #f7f8fa)}.fb-scr__spacer{flex:1}.fb-scr__btn{padding:3px 10px;border:1px solid var(--fb-border-strong, #cfd4de);border-radius:var(--fb-radius-xs, 6px);font-size:11px;color:var(--fb-text-muted, #6b7086)}.fb-scr__btn--primary{border-color:var(--fb-accent, #4f6ef7);background:var(--fb-accent, #4f6ef7);color:var(--fb-accent-contrast, #fff)}.fb-scr__canvas-note{margin-top:10px}.fb-scr__props{background:var(--fb-surface, #fff)}.fb-scr__props-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.fb-scr__props-title{flex:1;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--fb-text-muted, #6b7086)}.fb-scr__props-actions{display:flex;flex-wrap:wrap;gap:3px}.fb-btn--sm{padding:3px 7px;font-size:11px}.fb-scr__width{display:flex;align-items:center;gap:8px}.fb-scr__width input[type=range]{flex:1;min-width:0}.fb-scr__width-value{font-size:11px;color:var(--fb-text-muted, #6b7086)}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -11465,6 +12002,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
             args: [{ selector: 'fb-element-dialog', standalone: true, imports: [ElementInspectorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\r\n  Il backdrop chiude: e' il gesto che tutti si aspettano. Il pannello ferma la propagazione\r\n  del click, altrimenti configurare un campo chiuderebbe la dialog.\r\n-->\r\n<div class=\"fb-dialog__backdrop\" (click)=\"close()\"></div>\r\n\r\n<div\r\n  #panel\r\n  class=\"fb-dialog__panel\"\r\n  role=\"dialog\"\r\n  aria-modal=\"true\"\r\n  [attr.aria-label]=\"typeLabel() + ': ' + title()\"\r\n  tabindex=\"-1\"\r\n  (click)=\"$event.stopPropagation()\"\r\n  (keydown.escape)=\"close()\"\r\n>\r\n  <header class=\"fb-dialog__head\">\r\n    <div class=\"fb-dialog__identity\">\r\n      <span class=\"fb-dialog__type\">{{ typeLabel() }}</span>\r\n      <h2 class=\"fb-dialog__title\">{{ title() }}</h2>\r\n    </div>\r\n    <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"close()\">\u00D7</button>\r\n  </header>\r\n\r\n  <div class=\"fb-dialog__body\">\r\n    <!-- L'intestazione dell'inspector qui e' quella della dialog: non si ripete. -->\r\n    <fb-element-inspector\r\n      [selectedName]=\"selectedName()\"\r\n      [showHeader]=\"false\"\r\n      (removeRequested)=\"onRemoveRequested($event)\"\r\n      (duplicateRequested)=\"onDuplicateRequested($event)\"\r\n      (renamed)=\"onRenamed($event)\"\r\n      (closed)=\"close()\"\r\n    />\r\n  </div>\r\n\r\n  <footer class=\"fb-dialog__foot\">\r\n    <span class=\"fb-dialog__note\">\r\n      Le modifiche sono gi\u00E0 nel documento: per tornare indietro c\u2019\u00E8 l\u2019annulla dell\u2019editor.\r\n    </span>\r\n    <button type=\"button\" class=\"fb-btn fb-btn--primary\" (click)=\"close()\">Fatto</button>\r\n  </footer>\r\n</div>\r\n", styles: [":host{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:24px}.fb-dialog__backdrop{position:absolute;inset:0;background:#10182852;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.fb-dialog__panel{position:relative;display:flex;flex-direction:column;width:min(var(--fb-dialog-width, 1400px),100%);height:min(var(--fb-dialog-height, 860px),100%);border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-lg, 12px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-lg, 0 18px 44px rgb(16 24 40 / 18%));outline:none;overflow:hidden}.fb-dialog__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--fb-border-subtle, #eef0f4)}.fb-dialog__identity{min-width:0}.fb-dialog__type{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fb-text-subtle, #98a2b3)}.fb-dialog__title{margin:1px 0 0;font-size:15px;font-weight:600;color:var(--fb-text, #1a1c23);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-dialog__body{flex:1;min-height:0;overflow-y:auto;scrollbar-gutter:stable;overscroll-behavior:contain}.fb-dialog__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid var(--fb-border-subtle, #eef0f4);background:var(--fb-surface-alt, #f7f8fa)}.fb-dialog__note{font-size:11px;color:var(--fb-text-muted, #6b7086)}@media(max-height:620px){:host{padding:10px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { selectedName: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedName", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], removeRequested: [{ type: i0.Output, args: ["removeRequested"] }], duplicateRequested: [{ type: i0.Output, args: ["duplicateRequested"] }], renamed: [{ type: i0.Output, args: ["renamed"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
 
+/**
+ * La finestra dell'incolla: cosa sta per entrare nel documento, prima che entri.
+ *
+ * Un incolla silenzioso sarebbe piu' rapido e sbagliato. Incollare un elemento in un altro flow
+ * non e' mai una copia identica: dei nomi possono essere già presi (§3.3), delle risorse
+ * referenziate possono non esistere di la', e dei riferimenti possono restare orfani perche'
+ * puntano a un elemento che e' rimasto nel flow di origine. Tutte e tre le cose si sanno
+ * **prima** — le calcola `planPaste` — e sono esattamente cio' che l'utente vorrebbe sapere
+ * dopo, quando trovasse `Priorita_copia` fra le variabili senza aver chiesto niente.
+ *
+ * L'unica scelta e' la casella delle risorse mancanti: crearle e' cio' che rende «senza
+ * riconfigurare» vero, ma chi sta incollando in un flow che ha già le sue variabili con altri
+ * nomi preferisce ricollegarle a mano.
+ */
+/**
+ * Come si chiama, in italiano, la collection di una risorsa. Il nome tecnico (`variables`) qui
+ * non aiuta: chi legge sta decidendo se creare quella cosa, non sta scrivendo il JSON.
+ */
+const RESOURCE_LABELS = {
+    variables: 'variabile',
+    constants: 'costante',
+    formulas: 'formula',
+    textTemplates: 'text template',
+    choices: 'choice',
+    dynamicChoiceSets: 'dynamic choice set',
+    stages: 'stage',
+};
+class PasteDialogComponent {
+    payload = input.required(...(ngDevMode ? [{ debugName: "payload" }] : []));
+    plan = input.required(...(ngDevMode ? [{ debugName: "plan" }] : []));
+    confirmed = output();
+    cancelled = output();
+    /** Predefinito acceso: e' il motivo per cui si copia un elemento invece di rifarlo. */
+    createMissingResources = signal(true, ...(ngDevMode ? [{ debugName: "createMissingResources" }] : []));
+    elementLabel = computed(() => {
+        const count = this.plan().nodeCount;
+        return `${count} ${count === 1 ? 'elemento' : 'elementi'}`;
+    }, ...(ngDevMode ? [{ debugName: "elementLabel" }] : []));
+    newResources = computed(() => this.plan().resources.filter((entry) => entry.status === 'new'), ...(ngDevMode ? [{ debugName: "newResources" }] : []));
+    reusedResources = computed(() => this.plan().resources.filter((entry) => entry.status === 'reused'), ...(ngDevMode ? [{ debugName: "reusedResources" }] : []));
+    /** I nomi degli elementi che cambiano: si distinguono da quelli interni perche' il rimedio e' diverso. */
+    nodeRenames = computed(() => this.plan().renames.filter((entry) => entry.kind === 'node'), ...(ngDevMode ? [{ debugName: "nodeRenames" }] : []));
+    innerRenames = computed(() => this.plan().renames.filter((entry) => entry.kind === 'inner'), ...(ngDevMode ? [{ debugName: "innerRenames" }] : []));
+    /** Fuori mappa si mostra il nome tecnico: meglio una parola strana che nessuna parola. */
+    resourceLabel(collection) {
+        return RESOURCE_LABELS[collection] ?? collection;
+    }
+    setCreateMissingResources(value) {
+        this.createMissingResources.set(value);
+    }
+    confirm() {
+        this.confirmed.emit({ createMissingResources: this.createMissingResources() });
+    }
+    cancel() {
+        this.cancelled.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PasteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: PasteDialogComponent, isStandalone: true, selector: "fb-paste-dialog", inputs: { payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: true, transformFunction: null }, plan: { classPropertyName: "plan", publicName: "plan", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, ngImport: i0, template: "<div class=\"fb-dialog__backdrop\" (click)=\"cancel()\"></div>\r\n\r\n<div\r\n  class=\"fb-dialog__panel fb-paste\"\r\n  role=\"dialog\"\r\n  aria-modal=\"true\"\r\n  aria-label=\"Incolla elementi\"\r\n  tabindex=\"-1\"\r\n  (click)=\"$event.stopPropagation()\"\r\n  (keydown.escape)=\"cancel()\"\r\n>\r\n  <header class=\"fb-dialog__head\">\r\n    <div class=\"fb-dialog__identity\">\r\n      <span class=\"fb-dialog__type\">Appunti</span>\r\n      <h2 class=\"fb-dialog__title\">Incolla {{ elementLabel() }}</h2>\r\n    </div>\r\n    <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"cancel()\">\u00D7</button>\r\n  </header>\r\n\r\n  <div class=\"fb-dialog__body fb-paste__body\">\r\n    @if (payload().flowName) {\r\n      <p class=\"fb-paste__origin\">Copiati da <strong>{{ payload().flowName }}</strong>.</p>\r\n    }\r\n\r\n    <ul class=\"fb-paste__elements\">\r\n      @for (entry of payload().nodes; track $index) {\r\n        <li>{{ entry.node.label || entry.node.name }} <span class=\"fb-paste__tech\">&nbsp;{{ entry.node.name }}</span></li>\r\n      }\r\n    </ul>\r\n\r\n    @if (plan().processTypeMismatch) {\r\n      <!--\r\n        Le globali dipendono dal `processType` con cui le si chiede: `$Record` non esiste in uno\r\n        screen flow (\u00A74.1). Non blocca \u2014 il documento e' comunque salvabile \u2014 ma un riferimento\r\n        che di la' era valido puo' non esserlo qui, e dirlo prima evita la caccia al rilievo.\r\n      -->\r\n      <p class=\"fb-paste__warn\">\r\n        Il flow di origine e\u2019 di tipo <strong>{{ plan().processTypeMismatch }}</strong>: le variabili globali\r\n        disponibili qui sono altre, e i riferimenti che le usano potrebbero non essere validi.\r\n      </p>\r\n    }\r\n\r\n    @if (nodeRenames().length || innerRenames().length) {\r\n      <section class=\"fb-paste__section\">\r\n        <h3 class=\"fb-paste__title\">Nomi gi\u00E0 usati, quindi cambiati</h3>\r\n        <p class=\"fb-field__hint\">\r\n          Elementi, risorse, step, campi e screen action condividono un unico spazio di nomi: un omonimo\r\n          sarebbe <code>NAME_DUPLICATED</code>. I riferimenti interni al blocco seguono il nome nuovo.\r\n        </p>\r\n        <ul class=\"fb-paste__list\">\r\n          @for (rename of nodeRenames(); track $index) {\r\n            <li><code>{{ rename.from }}</code> \u2192 <code>{{ rename.to }}</code></li>\r\n          }\r\n          @for (rename of innerRenames(); track $index) {\r\n            <li><code>{{ rename.from }}</code> \u2192 <code>{{ rename.to }}</code> <span class=\"fb-paste__tech\">&nbsp;interno</span></li>\r\n          }\r\n        </ul>\r\n      </section>\r\n    }\r\n\r\n    @if (newResources().length) {\r\n      <section class=\"fb-paste__section\">\r\n        <h3 class=\"fb-paste__title\">Risorse che qui non esistono</h3>\r\n        <label class=\"fb-check\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [checked]=\"createMissingResources()\"\r\n            (change)=\"setCreateMissingResources($any($event.target).checked)\"\r\n          />\r\n          <span>Crearle insieme agli elementi</span>\r\n        </label>\r\n        <ul class=\"fb-paste__list\">\r\n          @for (resource of newResources(); track $index) {\r\n            <li><code>{{ resource.name }}</code> <span class=\"fb-paste__tech\">&nbsp;{{ resourceLabel(resource.collection) }}</span></li>\r\n          }\r\n        </ul>\r\n        @if (!createMissingResources()) {\r\n          <p class=\"fb-paste__warn\">\r\n            Senza di esse i riferimenti resteranno da ricollegare: il pannello dei problemi li segnalera\u2019\r\n            come <code>REFERENCE_UNKNOWN</code>.\r\n          </p>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    @if (reusedResources().length) {\r\n      <section class=\"fb-paste__section\">\r\n        <h3 class=\"fb-paste__title\">Risorse gi\u00E0 presenti</h3>\r\n        <p class=\"fb-field__hint\">\r\n          Un nome uguale esiste gi\u00E0 in questo flow: si usa quello, non se ne crea una copia. Controlla che\r\n          sia davvero la stessa cosa \u2014 il confronto e\u2019 sul nome, non sul contenuto.\r\n        </p>\r\n        <ul class=\"fb-paste__list\">\r\n          @for (resource of reusedResources(); track $index) {\r\n            <li><code>{{ resource.name }}</code></li>\r\n          }\r\n        </ul>\r\n      </section>\r\n    }\r\n\r\n    @if (plan().unresolved.length) {\r\n      <section class=\"fb-paste__section\">\r\n        <h3 class=\"fb-paste__title\">Riferimenti che restano da sistemare</h3>\r\n        <p class=\"fb-field__hint\">\r\n          Puntano a qualcosa che in questo flow non c\u2019e\u2019 \u2014 quasi sempre un elemento rimasto nel flow di\r\n          origine. L\u2019incolla non puo\u2019 portarseli dietro: vanno ricollegati a mano.\r\n        </p>\r\n        <ul class=\"fb-paste__list\">\r\n          @for (name of plan().unresolved; track $index) {\r\n            <li><code>{{ name }}</code></li>\r\n          }\r\n        </ul>\r\n      </section>\r\n    }\r\n  </div>\r\n\r\n  <footer class=\"fb-dialog__foot\">\r\n    <span class=\"fb-dialog__note\">Un solo passo di annulla riporta tutto com\u2019era.</span>\r\n    <div class=\"fb-paste__actions\">\r\n      <button type=\"button\" class=\"fb-btn\" (click)=\"cancel()\">Annulla</button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--primary\" (click)=\"confirm()\">Incolla</button>\r\n    </div>\r\n  </footer>\r\n</div>\r\n", styles: [":host{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:24px}.fb-dialog__backdrop{position:absolute;inset:0;background:#10182852;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.fb-dialog__panel{position:relative;display:flex;flex-direction:column;width:min(560px,100%);max-height:min(720px,100%);border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-lg, 12px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-lg, 0 18px 44px rgb(16 24 40 / 18%));outline:none;overflow:hidden}.fb-dialog__head,.fb-dialog__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}.fb-dialog__head{border-bottom:1px solid var(--fb-border-subtle, #eef0f4)}.fb-dialog__foot{border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-dialog__type{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--fb-text-muted, #6b7086)}.fb-dialog__title{margin:0;font-size:15px;font-weight:600}.fb-dialog__note{color:var(--fb-text-muted, #6b7086);font-size:12px}.fb-dialog__body{display:flex;flex-direction:column;gap:14px;padding:14px;overflow:auto}.fb-paste__origin{margin:0;color:var(--fb-text-muted, #6b7086);font-size:12px}.fb-paste__elements,.fb-paste__list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:13px}.fb-paste__section{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-paste__title{margin:0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fb-text-muted, #6b7086)}.fb-paste__tech{color:var(--fb-text-muted, #6b7086);font-size:11px}.fb-paste__warn{margin:0;padding:8px 10px;border-radius:var(--fb-radius-sm, 8px);background:var(--fb-surface-alt, #f7f8fa);color:var(--fb-warning, #b7791f);font-size:12px}.fb-paste__actions{display:flex;gap:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PasteDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fb-paste-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-dialog__backdrop\" (click)=\"cancel()\"></div>\r\n\r\n<div\r\n  class=\"fb-dialog__panel fb-paste\"\r\n  role=\"dialog\"\r\n  aria-modal=\"true\"\r\n  aria-label=\"Incolla elementi\"\r\n  tabindex=\"-1\"\r\n  (click)=\"$event.stopPropagation()\"\r\n  (keydown.escape)=\"cancel()\"\r\n>\r\n  <header class=\"fb-dialog__head\">\r\n    <div class=\"fb-dialog__identity\">\r\n      <span class=\"fb-dialog__type\">Appunti</span>\r\n      <h2 class=\"fb-dialog__title\">Incolla {{ elementLabel() }}</h2>\r\n    </div>\r\n    <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"cancel()\">\u00D7</button>\r\n  </header>\r\n\r\n  <div class=\"fb-dialog__body fb-paste__body\">\r\n    @if (payload().flowName) {\r\n      <p class=\"fb-paste__origin\">Copiati da <strong>{{ payload().flowName }}</strong>.</p>\r\n    }\r\n\r\n    <ul class=\"fb-paste__elements\">\r\n      @for (entry of payload().nodes; track $index) {\r\n        <li>{{ entry.node.label || entry.node.name }} <span class=\"fb-paste__tech\">&nbsp;{{ entry.node.name }}</span></li>\r\n      }\r\n    </ul>\r\n\r\n    @if (plan().processTypeMismatch) {\r\n      <!--\r\n        Le globali dipendono dal `processType` con cui le si chiede: `$Record` non esiste in uno\r\n        screen flow (\u00A74.1). Non blocca \u2014 il documento e' comunque salvabile \u2014 ma un riferimento\r\n        che di la' era valido puo' non esserlo qui, e dirlo prima evita la caccia al rilievo.\r\n      -->\r\n      <p class=\"fb-paste__warn\">\r\n        Il flow di origine e\u2019 di tipo <strong>{{ plan().processTypeMismatch }}</strong>: le variabili globali\r\n        disponibili qui sono altre, e i riferimenti che le usano potrebbero non essere validi.\r\n      </p>\r\n    }\r\n\r\n    @if (nodeRenames().length || innerRenames().length) {\r\n      <section class=\"fb-paste__section\">\r\n        <h3 class=\"fb-paste__title\">Nomi gi\u00E0 usati, quindi cambiati</h3>\r\n        <p class=\"fb-field__hint\">\r\n          Elementi, risorse, step, campi e screen action condividono un unico spazio di nomi: un omonimo\r\n          sarebbe <code>NAME_DUPLICATED</code>. I riferimenti interni al blocco seguono il nome nuovo.\r\n        </p>\r\n        <ul class=\"fb-paste__list\">\r\n          @for (rename of nodeRenames(); track $index) {\r\n            <li><code>{{ rename.from }}</code> \u2192 <code>{{ rename.to }}</code></li>\r\n          }\r\n          @for (rename of innerRenames(); track $index) {\r\n            <li><code>{{ rename.from }}</code> \u2192 <code>{{ rename.to }}</code> <span class=\"fb-paste__tech\">&nbsp;interno</span></li>\r\n          }\r\n        </ul>\r\n      </section>\r\n    }\r\n\r\n    @if (newResources().length) {\r\n      <section class=\"fb-paste__section\">\r\n        <h3 class=\"fb-paste__title\">Risorse che qui non esistono</h3>\r\n        <label class=\"fb-check\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [checked]=\"createMissingResources()\"\r\n            (change)=\"setCreateMissingResources($any($event.target).checked)\"\r\n          />\r\n          <span>Crearle insieme agli elementi</span>\r\n        </label>\r\n        <ul class=\"fb-paste__list\">\r\n          @for (resource of newResources(); track $index) {\r\n            <li><code>{{ resource.name }}</code> <span class=\"fb-paste__tech\">&nbsp;{{ resourceLabel(resource.collection) }}</span></li>\r\n          }\r\n        </ul>\r\n        @if (!createMissingResources()) {\r\n          <p class=\"fb-paste__warn\">\r\n            Senza di esse i riferimenti resteranno da ricollegare: il pannello dei problemi li segnalera\u2019\r\n            come <code>REFERENCE_UNKNOWN</code>.\r\n          </p>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    @if (reusedResources().length) {\r\n      <section class=\"fb-paste__section\">\r\n        <h3 class=\"fb-paste__title\">Risorse gi\u00E0 presenti</h3>\r\n        <p class=\"fb-field__hint\">\r\n          Un nome uguale esiste gi\u00E0 in questo flow: si usa quello, non se ne crea una copia. Controlla che\r\n          sia davvero la stessa cosa \u2014 il confronto e\u2019 sul nome, non sul contenuto.\r\n        </p>\r\n        <ul class=\"fb-paste__list\">\r\n          @for (resource of reusedResources(); track $index) {\r\n            <li><code>{{ resource.name }}</code></li>\r\n          }\r\n        </ul>\r\n      </section>\r\n    }\r\n\r\n    @if (plan().unresolved.length) {\r\n      <section class=\"fb-paste__section\">\r\n        <h3 class=\"fb-paste__title\">Riferimenti che restano da sistemare</h3>\r\n        <p class=\"fb-field__hint\">\r\n          Puntano a qualcosa che in questo flow non c\u2019e\u2019 \u2014 quasi sempre un elemento rimasto nel flow di\r\n          origine. L\u2019incolla non puo\u2019 portarseli dietro: vanno ricollegati a mano.\r\n        </p>\r\n        <ul class=\"fb-paste__list\">\r\n          @for (name of plan().unresolved; track $index) {\r\n            <li><code>{{ name }}</code></li>\r\n          }\r\n        </ul>\r\n      </section>\r\n    }\r\n  </div>\r\n\r\n  <footer class=\"fb-dialog__foot\">\r\n    <span class=\"fb-dialog__note\">Un solo passo di annulla riporta tutto com\u2019era.</span>\r\n    <div class=\"fb-paste__actions\">\r\n      <button type=\"button\" class=\"fb-btn\" (click)=\"cancel()\">Annulla</button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--primary\" (click)=\"confirm()\">Incolla</button>\r\n    </div>\r\n  </footer>\r\n</div>\r\n", styles: [":host{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:24px}.fb-dialog__backdrop{position:absolute;inset:0;background:#10182852;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.fb-dialog__panel{position:relative;display:flex;flex-direction:column;width:min(560px,100%);max-height:min(720px,100%);border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-lg, 12px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-lg, 0 18px 44px rgb(16 24 40 / 18%));outline:none;overflow:hidden}.fb-dialog__head,.fb-dialog__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}.fb-dialog__head{border-bottom:1px solid var(--fb-border-subtle, #eef0f4)}.fb-dialog__foot{border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-dialog__type{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--fb-text-muted, #6b7086)}.fb-dialog__title{margin:0;font-size:15px;font-weight:600}.fb-dialog__note{color:var(--fb-text-muted, #6b7086);font-size:12px}.fb-dialog__body{display:flex;flex-direction:column;gap:14px;padding:14px;overflow:auto}.fb-paste__origin{margin:0;color:var(--fb-text-muted, #6b7086);font-size:12px}.fb-paste__elements,.fb-paste__list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:13px}.fb-paste__section{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-paste__title{margin:0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fb-text-muted, #6b7086)}.fb-paste__tech{color:var(--fb-text-muted, #6b7086);font-size:11px}.fb-paste__warn{margin:0;padding:8px 10px;border-radius:var(--fb-radius-sm, 8px);background:var(--fb-surface-alt, #f7f8fa);color:var(--fb-warning, #b7791f);font-size:12px}.fb-paste__actions{display:flex;gap:8px}\n"] }]
+        }], propDecorators: { payload: [{ type: i0.Input, args: [{ isSignal: true, alias: "payload", required: true }] }], plan: [{ type: i0.Input, args: [{ isSignal: true, alias: "plan", required: true }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
+
 /**
  * Le risorse — FRONTEND.md §4.6.
  *
@@ -12398,6 +12999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class FlowBuilderComponent {
     api = inject(FlowBuilderApi);
+    clipboard = inject(FlowClipboardService);
     destroyRef = inject(DestroyRef);
     /** Serve a `afterNextRender` chiamato fuori dal costruttore. */
     injector = inject(Injector);
@@ -12478,6 +13080,9 @@ class FlowBuilderComponent {
         }
     }, ...(ngDevMode ? [{ debugName: "statusLabel" }] : []));
     constructor() {
+        // Gli appunti sopravvivono al ricaricamento (stanno nello storage): il comando «Incolla»
+        // deve nascere acceso se qualcosa c'e' già, non solo dopo la prima copia di questa sessione.
+        this.clipboard.refresh();
         /**
          * I dizionari si caricano una volta e si tengono in cache, **per `processType`**: le
          * globali dipendono dal tipo di flow — `$Record` non esiste in uno screen flow — e
@@ -12634,7 +13239,9 @@ class FlowBuilderComponent {
      * capita anche solo per spostare un node, e una finestra che si apre a ogni click sarebbe
      * insopportabile. Nel pannello laterale, invece, mostrare subito il form non costa nulla.
      */
-    onSelectionChange(name) {
+    onSelectionChange(names) {
+        this.selectedNames.set(names);
+        const name = names[0] ?? null;
         this.selectedName.set(name);
         if (name && !this.isDialogMode()) {
             this.activePanel.set('inspector');
@@ -12741,6 +13348,7 @@ class FlowBuilderComponent {
         // Rimuove anche i connector che lo referenziavano: un target orfano bloccherebbe
         // l'attivazione con CONNECTOR_TARGET_UNKNOWN.
         this.store.removeNode(name);
+        this.selectedNames.update((names) => names.filter((selected) => selected !== name));
         if (this.selectedName() === name) {
             this.selectedName.set(START_NODE_NAME);
             // L'elemento non c'e' piu': una dialog aperta sul vuoto non ha senso.
@@ -12755,9 +13363,154 @@ class FlowBuilderComponent {
         this.selectedName.set(newName);
     }
     onDuplicateNode(name) {
-        const newName = uniqueFlowName(`${name}_copia`, this.store.usedNames());
-        this.store.duplicateNode(name, newName);
-        this.selectedName.set(newName);
+        this.duplicateNames([name]);
+    }
+    // ------------------------------------------------------------- copia e incolla
+    //
+    // Il gesto vale su un **blocco**: la selezione del canvas puo' contenere piu' elementi
+    // (rettangolo, `Ctrl`+`A`), e i collegamenti interni al blocco si conservano. Lo Start non
+    // entra mai in una copia: e' uno per flow (§3.4), e incollarne un secondo sarebbe un errore
+    // che nessuno ha chiesto.
+    /** La selezione del canvas per intero; `selectedName` resta l'elemento «corrente». */
+    selectedNames = signal([], ...(ngDevMode ? [{ debugName: "selectedNames" }] : []));
+    /** L'anteprima dell'incolla, mentre la finestra e' aperta. */
+    pastePreview = signal(null, ...(ngDevMode ? [{ debugName: "pastePreview" }] : []));
+    /**
+     * I nomi copiabili: la selezione meno lo Start (§3.4) e meno cio' che nel documento non c'e'
+     * piu'. Il secondo filtro non e' teorico: dopo un annulla la selezione resta sul nome di un
+     * elemento appena tolto, e senza il controllo il comando risultava attivo su niente.
+     */
+    copyableNames() {
+        const names = this.selectedNames().length ? this.selectedNames() : [this.selectedName() ?? ''];
+        const known = this.store.nodeByName();
+        return names.filter((name) => !!name && name !== START_NODE_NAME && known.has(name));
+    }
+    canCopy = computed(() => this.copyableNames().length > 0, ...(ngDevMode ? [{ debugName: "canCopy" }] : []));
+    /** Il comando «Incolla» si accende quando negli appunti c'e' qualcosa, anche di un altro flow. */
+    canPaste = computed(() => {
+        // Letto dal signal di revisione: cambia anche quando la copia arriva da un'altra scheda.
+        this.clipboard.revision();
+        return this.clipboard.hasContent();
+    }, ...(ngDevMode ? [{ debugName: "canPaste" }] : []));
+    copySelection() {
+        const names = this.copyableNames();
+        if (!names.length) {
+            return;
+        }
+        const payload = buildClipboardPayload({
+            nodes: this.store.nodes(),
+            resources: this.store.resources(),
+            names,
+            flowName: this.session.flowName() ?? this.store.document().fullName,
+            processType: this.store.document().processType,
+        });
+        if (!payload) {
+            return;
+        }
+        this.clipboard.write(payload);
+        this.clipboard.refresh();
+        const count = payload.nodes.length;
+        const resources = payload.resources.length;
+        this.notice.set({
+            kind: 'info',
+            message: resources
+                ? `Copiati ${count} ${count === 1 ? 'elemento' : 'elementi'} e ${resources} ${resources === 1 ? 'risorsa referenziata' : 'risorse referenziate'}.`
+                : `Copiati ${count} ${count === 1 ? 'elemento' : 'elementi'}.`,
+        });
+    }
+    /**
+     * Prepara l'incolla: calcola il piano e apre la finestra. Non tocca il documento — cosa
+     * cambierebbe si vede prima, ed e' l'unico momento in cui la scelta sulle risorse mancanti ha
+     * ancora senso.
+     */
+    startPaste() {
+        if (!this.isEditable()) {
+            return;
+        }
+        const payload = this.clipboard.read();
+        if (!payload) {
+            this.notice.set({ kind: 'info', message: 'Non c’e’ niente da incollare.' });
+            return;
+        }
+        const plan = planPaste(payload, {
+            usedNames: this.store.usedNames(),
+            processType: this.store.document().processType,
+        });
+        this.pastePreview.set({ payload, plan });
+    }
+    cancelPaste() {
+        this.pastePreview.set(null);
+    }
+    confirmPaste(options) {
+        const preview = this.pastePreview();
+        if (!preview) {
+            return;
+        }
+        const created = this.store.pasteClipboard(preview.payload, preview.plan, {
+            createMissingResources: options.createMissingResources,
+        });
+        this.pastePreview.set(null);
+        this.selectNames(created);
+        const count = created.length;
+        this.notice.set({
+            kind: 'info',
+            message: `Incollati ${count} ${count === 1 ? 'elemento' : 'elementi'}.`,
+        });
+    }
+    /** Duplica in loco, senza passare dagli appunti: stesso motore, nessuna domanda da fare. */
+    duplicateSelection() {
+        this.duplicateNames(this.copyableNames());
+    }
+    duplicateNames(names) {
+        if (!this.isEditable() || !names.length) {
+            return;
+        }
+        const created = this.store.duplicateNodes(names);
+        this.selectNames(created);
+    }
+    /** Porta la selezione sul blocco appena creato: senza, resterebbe su cio' da cui e' nato. */
+    selectNames(names) {
+        if (!names.length) {
+            return;
+        }
+        this.selectedNames.set(names);
+        this.selectedName.set(names[0]);
+    }
+    /**
+     * Le scorciatoie. L'ascoltatore sta sull'**host** del builder e non sul documento: la libreria
+     * si innesta in una pagina che non e' nostra, e `Ctrl`+`C` catturato globalmente ruberebbe la
+     * copia all'applicazione ospite. Per la stessa ragione il gesto si ignora quando il fuoco e'
+     * dentro un campo: lì `Ctrl`+`C` copia il testo, che e' cio' che l'utente si aspetta.
+     */
+    onKeyDown(event) {
+        if (!(event.ctrlKey || event.metaKey) || event.altKey) {
+            return;
+        }
+        const target = event.target;
+        const tag = target?.tagName;
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target?.isContentEditable) {
+            return;
+        }
+        switch (event.key.toLowerCase()) {
+            case 'c':
+                if (this.canCopy()) {
+                    event.preventDefault();
+                    this.copySelection();
+                }
+                return;
+            case 'v':
+                event.preventDefault();
+                this.startPaste();
+                return;
+            case 'd':
+                if (this.canCopy()) {
+                    event.preventDefault();
+                    this.duplicateSelection();
+                }
+                return;
+            default:
+                return;
+        }
     }
     /** Riordina il grafo e **scrive** le coordinate nel documento (§3.5). */
     autoLayout() {
@@ -13064,7 +13817,7 @@ class FlowBuilderComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlowBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: FlowBuilderComponent, isStandalone: true, selector: "fb-flow-builder", inputs: { flowName: { classPropertyName: "flowName", publicName: "flowName", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null }, author: { classPropertyName: "author", publicName: "author", isSignal: true, isRequired: false, transformFunction: null }, defaultProcessType: { classPropertyName: "defaultProcessType", publicName: "defaultProcessType", isSignal: true, isRequired: false, transformFunction: null }, inspectorMode: { classPropertyName: "inspectorMode", publicName: "inspectorMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", activated: "activated", closeRequested: "closeRequested" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: FlowBuilderComponent, isStandalone: true, selector: "fb-flow-builder", inputs: { flowName: { classPropertyName: "flowName", publicName: "flowName", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null }, author: { classPropertyName: "author", publicName: "author", isSignal: true, isRequired: false, transformFunction: null }, defaultProcessType: { classPropertyName: "defaultProcessType", publicName: "defaultProcessType", isSignal: true, isRequired: false, transformFunction: null }, inspectorMode: { classPropertyName: "inspectorMode", publicName: "inspectorMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", activated: "activated", closeRequested: "closeRequested" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, providers: [
             FlowDocumentStore,
             FlowDictionaryStore,
             FlowCatalogStore,
@@ -13072,7 +13825,7 @@ class FlowBuilderComponent {
             FormulaValidationService,
             FlowEditorSession,
             FlowLayoutService,
-        ], viewQueries: [{ propertyName: "copyNameInput", first: true, predicate: ["copyNameInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fb-builder\" [attr.data-fb-theme]=\"null\">\r\n  <header class=\"fb-top\">\r\n    <div class=\"fb-top__identity\">\r\n      <input\r\n        class=\"fb-top__label\"\r\n        [value]=\"document().label || ''\"\r\n        placeholder=\"Nome del flow\"\r\n        aria-label=\"Nome del flow\"\r\n        [disabled]=\"!isEditable()\"\r\n        (input)=\"setLabel($any($event.target).value)\"\r\n      />\r\n      <div class=\"fb-top__meta\">\r\n        <input\r\n          class=\"fb-top__name\"\r\n          [value]=\"document().fullName || ''\"\r\n          placeholder=\"NomeTecnico\"\r\n          aria-label=\"Nome tecnico del flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (input)=\"setFullName($any($event.target).value)\"\r\n        />\r\n        <select\r\n          class=\"fb-top__process\"\r\n          [fbValue]=\"document().processType || ''\"\r\n          aria-label=\"Tipo di flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (change)=\"setProcessType($any($event.target).value)\"\r\n        >\r\n          <!--\r\n            Il segnaposto esiste perche' un `<select>` senza opzione corrispondente non e'\r\n            \u00ABvuoto\u00BB: e' a `selectedIndex = -1`, e mostra una casella bianca. Su un flow nuovo\r\n            (`processType` non ancora scelto) e' questa la riga che si vede, disabilitata\r\n            perche' non e' un valore valido da salvare.\r\n          -->\r\n          @if (!document().processType) {\r\n            <option value=\"\" disabled>\u2014 tipo di flow \u2014</option>\r\n          }\r\n          @for (type of processTypes(); track type.value) {\r\n            <option [value]=\"type.value\">{{ type.label }}</option>\r\n          }\r\n          <!--\r\n            Il tipo del documento che il dizionario non conosce: senza questa opzione la select\r\n            resta bianca su un flow che il backend ha salvato con un `processType` fuori\r\n            catalogo (o quando `processTypes` manca dalla risposta dei dizionari), e sembra che\r\n            l'editor non abbia ricaricato il flow. Va mostrato **senza** riscrivere il\r\n            documento: il valore e' del backend, non nostro da correggere.\r\n          -->\r\n          @if (isProcessTypeOutOfCatalog()) {\r\n            <option [value]=\"document().processType\">{{ document().processType }} (fuori catalogo)</option>\r\n          }\r\n        </select>\r\n        <span class=\"fb-top__status\">{{ statusLabel() }}</span>\r\n        @if (session.version() != null) {\r\n          <span class=\"fb-top__version\">v{{ session.version() }}</span>\r\n        }\r\n        @if (isDirty()) {\r\n          <span class=\"fb-top__dirty\" title=\"Ci sono modifiche non salvate\">modificato</span>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"fb-top__actions\">\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canUndo()\" aria-label=\"Annulla\" (click)=\"undo()\">\u21B6</button>\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canRedo()\" aria-label=\"Ripeti\" (click)=\"redo()\">\u21B7</button>\r\n      <button type=\"button\" class=\"fb-btn\" title=\"Ricalcola le posizioni\" (click)=\"autoLayout()\">Riordina</button>\r\n      @if (isDialogMode()) {\r\n        <!-- Il doppio click sul node fa la stessa cosa, ma non si vede: questo comando s\u00EC. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"!selectedName()\"\r\n          title=\"Apri il dettaglio dell\u2019elemento selezionato\"\r\n          (click)=\"openSelectedElement()\"\r\n        >\r\n          Dettaglio\r\n        </button>\r\n      }\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"isBusy()\" (click)=\"validateNow()\">Valida</button>\r\n\r\n      @switch (primaryCommand()) {\r\n        @case ('newVersion') {\r\n          <!-- Su una versione non modificabile il comando primario e' \"Nuova versione\" (\u00A78.1). -->\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"createNewVersion()\">\r\n            Nuova versione\r\n          </button>\r\n        }\r\n        @case ('create') {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Crea\r\n          </button>\r\n        }\r\n        @default {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Salva\r\n          </button>\r\n        }\r\n      }\r\n\r\n      @if (canDuplicate()) {\r\n        <!-- \u00A76.2 \u00ABDuplica\u00BB: il flow sotto un altro nome, alla versione 1. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"isBusy()\"\r\n          title=\"Salva una copia con un altro nome\"\r\n          (click)=\"startCopy()\"\r\n        >\r\n          Duplica\u2026\r\n        </button>\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"isBusy() || !canActivate()\"\r\n        [title]=\"\r\n          canActivate()\r\n            ? 'Attiva questa versione'\r\n            : 'L\u2019attivazione esige zero errori: correggili nel pannello dei problemi'\r\n        \"\r\n        (click)=\"activate()\"\r\n      >\r\n        Attiva\r\n      </button>\r\n    </div>\r\n  </header>\r\n\r\n  @if (conflict()) {\r\n    <!-- \u00A79.3: qualcun altro ha salvato. Due strade, entrambe offerte. -->\r\n    <div class=\"fb-banner fb-banner--warn\" role=\"alert\">\r\n      <span>\r\n        {{ conflict()?.message }}\r\n        @if (conflict()?.conflictingAuthor) {\r\n          Ha salvato {{ conflict()?.conflictingAuthor }}.\r\n        }\r\n      </span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"reloadAfterConflict()\">Ricarica</button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"saveAsNewVersionAfterConflict()\">\r\n        Salva come nuova versione\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"dismissConflict()\">\u00D7</button>\r\n    </div>\r\n  }\r\n\r\n  @if (isCopyOpen()) {\r\n    <!--\r\n      Il nome si chiede prima di scrivere: e\u2019 l\u2019unico dato che il backend non puo\u2019 inventare, e\r\n      un doppione lo rifiuta con AlreadyExists (\u00A76.2). Invio conferma, Esc annulla.\r\n    -->\r\n    <div class=\"fb-banner fb-copy\" role=\"group\" aria-label=\"Duplica il flow\">\r\n      <label class=\"fb-copy__field\">\r\n        <span class=\"fb-copy__caption\">Nome tecnico della copia</span>\r\n        <input\r\n          #copyNameInput\r\n          class=\"fb-copy__input\"\r\n          [value]=\"copyName()\"\r\n          placeholder=\"NomeTecnico_Copia\"\r\n          (input)=\"setCopyName($any($event.target).value)\"\r\n          (keydown.enter)=\"confirmCopy()\"\r\n          (keydown.escape)=\"cancelCopy()\"\r\n        />\r\n      </label>\r\n      <label class=\"fb-copy__field\">\r\n        <span class=\"fb-copy__caption\">Nome visibile</span>\r\n        <input\r\n          class=\"fb-copy__input\"\r\n          [value]=\"copyLabel()\"\r\n          placeholder=\"(facoltativo)\"\r\n          (input)=\"setCopyLabel($any($event.target).value)\"\r\n          (keydown.enter)=\"confirmCopy()\"\r\n          (keydown.escape)=\"cancelCopy()\"\r\n        />\r\n      </label>\r\n      <span class=\"fb-copy__hint\" [class.fb-copy__hint--error]=\"!!copyNameProblem()\">\r\n        {{ copyNameProblem() || copyHint() }}\r\n      </span>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn fb-btn--primary fb-btn--icon\"\r\n        [disabled]=\"isBusy() || !!copyNameProblem()\"\r\n        (click)=\"confirmCopy()\"\r\n      >\r\n        Duplica\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"cancelCopy()\">Annulla</button>\r\n    </div>\r\n  }\r\n\r\n  @if (notice()) {\r\n    <div\r\n      class=\"fb-banner\"\r\n      [class.fb-banner--error]=\"notice()?.kind === 'error'\"\r\n      role=\"status\"\r\n    >\r\n      <span>{{ notice()?.message }}</span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"dismissNotice()\">\r\n        \u00D7\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (hasScreensInAutoLaunched()) {\r\n    <div class=\"fb-banner fb-banner--error\">\r\n      Un flow AutoLaunched che contiene screen e\u2019 un errore di validazione: non c\u2019e\u2019 nessuno a cui mostrarli.\r\n    </div>\r\n  }\r\n  @if (isOrchestrationWithoutStages()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow Orchestration senza stage di orchestrazione viene segnalato dalla validazione\r\n      (ORCHESTRATION_WITHOUT_STAGES).\r\n    </div>\r\n  }\r\n  @if (hasNoScreensInScreenFlow()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow di tipo Screen senza nessuno screen viene segnalato dalla validazione.\r\n    </div>\r\n  }\r\n  @if (!isEditable()) {\r\n    <div class=\"fb-banner\">\r\n      Questa versione e\u2019 in sola lettura: per modificarla creane una nuova.\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fb-main\">\r\n    <aside class=\"fb-main__palette\">\r\n      <fb-element-palette [processType]=\"document().processType\" (elementPicked)=\"onElementPicked($event)\" />\r\n    </aside>\r\n\r\n    <div class=\"fb-main__center\">\r\n      <fb-flow-canvas\r\n        class=\"fb-main__canvas\"\r\n        [selectedName]=\"selectedName()\"\r\n        [outline]=\"outline()\"\r\n        [isEditable]=\"isEditable()\"\r\n        (selectionChange)=\"onSelectionChange($event)\"\r\n        (nodeOpened)=\"onNodeOpened($event)\"\r\n        (nodeRemoveRequested)=\"onRemoveNode($event)\"\r\n        (nodeDuplicateRequested)=\"onDuplicateNode($event)\"\r\n        (elementDropped)=\"onElementDropped($event)\"\r\n      />\r\n\r\n      @if (showProblems()) {\r\n        <fb-problems-panel\r\n          class=\"fb-main__problems\"\r\n          (elementFocused)=\"focusElement($event)\"\r\n          (closed)=\"toggleProblems()\"\r\n        />\r\n      } @else {\r\n        <button type=\"button\" class=\"fb-main__problems-toggle\" (click)=\"toggleProblems()\">\r\n          Problemi\r\n          @if (errorCount()) {\r\n            <span class=\"fb-main__count fb-main__count--error\">{{ errorCount() }}</span>\r\n          }\r\n          @if (warningCount()) {\r\n            <span class=\"fb-main__count fb-main__count--warn\">{{ warningCount() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <aside class=\"fb-main__side\">\r\n      <nav class=\"fb-side__tabs\" aria-label=\"Pannelli\">\r\n        @if (!isDialogMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-side__tab\"\r\n            [class.fb-side__tab--active]=\"sidePanel() === 'inspector'\"\r\n            (click)=\"setPanel('inspector')\"\r\n          >\r\n            Elemento\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'resources'\"\r\n          (click)=\"setPanel('resources')\"\r\n        >\r\n          Risorse\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'versions'\"\r\n          (click)=\"setPanel('versions')\"\r\n        >\r\n          Versioni\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'debug'\"\r\n          (click)=\"setPanel('debug')\"\r\n        >\r\n          Prova\r\n        </button>\r\n      </nav>\r\n\r\n      <div class=\"fb-side__content\">\r\n        @switch (sidePanel()) {\r\n          @case ('inspector') {\r\n            <fb-element-inspector\r\n              [selectedName]=\"selectedName()\"\r\n              (removeRequested)=\"onRemoveNode($event)\"\r\n              (duplicateRequested)=\"onDuplicateNode($event)\"\r\n              (renamed)=\"onNodeRenamed($event)\"\r\n              (closed)=\"setPanel('resources')\"\r\n            />\r\n          }\r\n          @case ('resources') {\r\n            <fb-resource-panel (closed)=\"setPanel('inspector')\" />\r\n          }\r\n          @case ('versions') {\r\n            <fb-version-panel\r\n              (versionOpened)=\"openVersion($event)\"\r\n              (notice)=\"showNotice($event)\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n          @case ('debug') {\r\n            <!-- Evidenzia sul canvas senza rubare il pannello: l'interview e\u2019 in corso. -->\r\n            <fb-debug-panel (elementFocused)=\"highlightElement($event)\" (closed)=\"setPanel('inspector')\" />\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <footer class=\"fb-side__footer\">\r\n        <label class=\"fb-btn fb-btn--icon\">\r\n          Importa JSON\r\n          <input type=\"file\" accept=\"application/json,.json\" hidden (change)=\"onFileSelected($event)\" />\r\n        </label>\r\n      </footer>\r\n    </aside>\r\n  </div>\r\n\r\n  @if (isDialogMode() && isDialogOpen() && selectedName()) {\r\n    <!-- La dialog sta dentro il builder, non nel body: la libreria e\u2019 innestabile. -->\r\n    <fb-element-dialog\r\n      [selectedName]=\"selectedName()\"\r\n      (closed)=\"closeDialog()\"\r\n      (removeRequested)=\"onRemoveNode($event)\"\r\n      (duplicateRequested)=\"onDuplicateNode($event)\"\r\n      (renamed)=\"onNodeRenamed($event)\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;font:inherit;color:var(--fb-text, #1d2939)}.fb-builder{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--fb-border, #e2e5eb);background:var(--fb-surface, #fff)}.fb-top__identity{min-width:0}.fb-top__label{width:100%;max-width:420px;padding:2px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text, #1d2939);font:inherit;font-size:15px;font-weight:600}.fb-top__label:hover:not(:disabled),.fb-top__label:focus-visible{border-color:var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-top__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}.fb-top__name{width:180px;padding:1px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-top__name:hover:not(:disabled),.fb-top__name:focus-visible{border-color:var(--fb-border, #d6dae1)}.fb-top__process{padding:1px 4px;border:1px solid var(--fb-border-subtle, #e6e9ee);border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font:inherit;font-size:11px}.fb-top__status,.fb-top__version,.fb-top__dirty{padding:2px 7px;border-radius:999px;background:var(--fb-surface-sunken, #eef0f4);color:var(--fb-text-muted, #6b7086);font-size:10px;font-weight:600}.fb-top__version{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.fb-top__dirty{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-top__actions{display:flex;flex-wrap:wrap;gap:4px}.fb-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee);background:color-mix(in srgb,var(--fb-accent, #2f6feb) 7%,transparent);font-size:11px}.fb-banner--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-banner--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 10%,transparent);color:var(--fb-error, #c9372c)}.fb-banner>span{flex:1;min-width:200px}.fb-copy__field{display:flex;align-items:center;gap:6px}.fb-copy__caption{color:var(--fb-text-muted, #667085);white-space:nowrap}.fb-copy__input{width:180px;padding:2px 5px;border:1px solid var(--fb-border, #d6dae1);border-radius:4px;background:var(--fb-surface, #fff);color:var(--fb-text, #1d2939);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-copy__hint{flex:1;min-width:180px;color:var(--fb-text-muted, #667085)}.fb-copy__hint--error{color:var(--fb-error, #c9372c)}.fb-main{display:flex;flex:1;min-height:0}.fb-main__palette{flex:0 0 190px;min-width:0}.fb-main__center{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.fb-main__canvas{flex:1;min-height:0}.fb-main__problems{flex:0 0 auto;height:220px}.fb-main__problems-toggle{display:flex;align-items:center;gap:6px;padding:4px 12px;border:0;border-top:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface-alt, #f8f9fb);color:var(--fb-text-muted, #667085);font:inherit;font-size:11px;cursor:pointer}.fb-main__count{padding:0 5px;border-radius:8px;background:var(--fb-border, #d6dae1);font-size:9px;font-weight:700}.fb-main__count--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 16%,transparent);color:var(--fb-error, #c9372c)}.fb-main__count--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-main__side{display:flex;flex-direction:column;flex:0 0 340px;min-width:0;min-height:0;border-left:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-side__tabs{display:flex;gap:2px;margin:8px 10px;padding:3px;border-radius:var(--fb-radius, 10px);background:var(--fb-surface-sunken, #eef0f4)}.fb-side__tab{flex:1;padding:5px 8px;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-muted, #6b7086);font:inherit;font-size:11px;cursor:pointer;transition:background .12s ease,color .12s ease}.fb-side__tab:hover:not(.fb-side__tab--active){color:var(--fb-text, #1a1c23)}.fb-side__tab--active{background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));color:var(--fb-text, #1a1c23);font-weight:600}.fb-side__content{flex:1;min-height:0;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-side__content>*{height:100%}.fb-side__footer{display:flex;gap:6px;padding:6px 8px;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}@media(max-width:1200px){.fb-main__palette{flex-basis:150px}.fb-main__side{flex-basis:290px}}\n"], dependencies: [{ kind: "component", type: DebugPanelComponent, selector: "fb-debug-panel", outputs: ["closed", "elementFocused"] }, { kind: "component", type: ElementDialogComponent, selector: "fb-element-dialog", inputs: ["selectedName"], outputs: ["closed", "removeRequested", "duplicateRequested", "renamed"] }, { kind: "component", type: ElementInspectorComponent, selector: "fb-element-inspector", inputs: ["selectedName", "showHeader"], outputs: ["closed", "removeRequested", "duplicateRequested", "renamed"] }, { kind: "component", type: ElementPaletteComponent, selector: "fb-element-palette", inputs: ["processType"], outputs: ["elementPicked"] }, { kind: "component", type: FlowCanvasComponent, selector: "fb-flow-canvas", inputs: ["selectedName", "outline", "isEditable"], outputs: ["selectionChange", "nodeOpened", "nodeRemoveRequested", "nodeDuplicateRequested", "elementDropped"] }, { kind: "component", type: ProblemsPanelComponent, selector: "fb-problems-panel", outputs: ["elementFocused", "closed"] }, { kind: "component", type: ResourcePanelComponent, selector: "fb-resource-panel", outputs: ["closed"] }, { kind: "component", type: VersionPanelComponent, selector: "fb-version-panel", outputs: ["closed", "versionOpened", "notice"] }, { kind: "directive", type: SelectValueDirective, selector: "select[fbValue]", inputs: ["fbValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "copyNameInput", first: true, predicate: ["copyNameInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fb-builder\" [attr.data-fb-theme]=\"null\">\r\n  <header class=\"fb-top\">\r\n    <div class=\"fb-top__identity\">\r\n      <input\r\n        class=\"fb-top__label\"\r\n        [value]=\"document().label || ''\"\r\n        placeholder=\"Nome del flow\"\r\n        aria-label=\"Nome del flow\"\r\n        [disabled]=\"!isEditable()\"\r\n        (input)=\"setLabel($any($event.target).value)\"\r\n      />\r\n      <div class=\"fb-top__meta\">\r\n        <input\r\n          class=\"fb-top__name\"\r\n          [value]=\"document().fullName || ''\"\r\n          placeholder=\"NomeTecnico\"\r\n          aria-label=\"Nome tecnico del flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (input)=\"setFullName($any($event.target).value)\"\r\n        />\r\n        <select\r\n          class=\"fb-top__process\"\r\n          [fbValue]=\"document().processType || ''\"\r\n          aria-label=\"Tipo di flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (change)=\"setProcessType($any($event.target).value)\"\r\n        >\r\n          <!--\r\n            Il segnaposto esiste perche' un `<select>` senza opzione corrispondente non e'\r\n            \u00ABvuoto\u00BB: e' a `selectedIndex = -1`, e mostra una casella bianca. Su un flow nuovo\r\n            (`processType` non ancora scelto) e' questa la riga che si vede, disabilitata\r\n            perche' non e' un valore valido da salvare.\r\n          -->\r\n          @if (!document().processType) {\r\n            <option value=\"\" disabled>\u2014 tipo di flow \u2014</option>\r\n          }\r\n          @for (type of processTypes(); track type.value) {\r\n            <option [value]=\"type.value\">{{ type.label }}</option>\r\n          }\r\n          <!--\r\n            Il tipo del documento che il dizionario non conosce: senza questa opzione la select\r\n            resta bianca su un flow che il backend ha salvato con un `processType` fuori\r\n            catalogo (o quando `processTypes` manca dalla risposta dei dizionari), e sembra che\r\n            l'editor non abbia ricaricato il flow. Va mostrato **senza** riscrivere il\r\n            documento: il valore e' del backend, non nostro da correggere.\r\n          -->\r\n          @if (isProcessTypeOutOfCatalog()) {\r\n            <option [value]=\"document().processType\">{{ document().processType }} (fuori catalogo)</option>\r\n          }\r\n        </select>\r\n        <span class=\"fb-top__status\">{{ statusLabel() }}</span>\r\n        @if (session.version() != null) {\r\n          <span class=\"fb-top__version\">v{{ session.version() }}</span>\r\n        }\r\n        @if (isDirty()) {\r\n          <span class=\"fb-top__dirty\" title=\"Ci sono modifiche non salvate\">modificato</span>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"fb-top__actions\">\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canUndo()\" aria-label=\"Annulla\" (click)=\"undo()\">\u21B6</button>\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canRedo()\" aria-label=\"Ripeti\" (click)=\"redo()\">\u21B7</button>\r\n      <button type=\"button\" class=\"fb-btn\" title=\"Ricalcola le posizioni\" (click)=\"autoLayout()\">Riordina</button>\r\n\r\n      <!--\r\n        Copia e incolla stanno **anche** qui e non solo sui tasti: una scorciatoia che nessuno\r\n        annuncia non esiste. Il titolo la dice, cos\u00EC si impara usandola una volta.\r\n        L\u2019incolla e\u2019 acceso anche con la selezione vuota: cio\u2019 che si incolla sta negli appunti,\r\n        e puo\u2019 venire da un altro flow.\r\n      -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canCopy()\"\r\n        title=\"Copia gli elementi selezionati, con le risorse che usano (Ctrl+C)\"\r\n        aria-label=\"Copia gli elementi selezionati\"\r\n        (click)=\"copySelection()\"\r\n      >\r\n        \u29C9\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canPaste() || !isEditable()\"\r\n        title=\"Incolla gli elementi copiati, anche da un altro flow (Ctrl+V)\"\r\n        aria-label=\"Incolla gli elementi copiati\"\r\n        (click)=\"startPaste()\"\r\n      >\r\n        \u2398\r\n      </button>\r\n      @if (isDialogMode()) {\r\n        <!-- Il doppio click sul node fa la stessa cosa, ma non si vede: questo comando s\u00EC. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"!selectedName()\"\r\n          title=\"Apri il dettaglio dell\u2019elemento selezionato\"\r\n          (click)=\"openSelectedElement()\"\r\n        >\r\n          Dettaglio\r\n        </button>\r\n      }\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"isBusy()\" (click)=\"validateNow()\">Valida</button>\r\n\r\n      @switch (primaryCommand()) {\r\n        @case ('newVersion') {\r\n          <!-- Su una versione non modificabile il comando primario e' \"Nuova versione\" (\u00A78.1). -->\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"createNewVersion()\">\r\n            Nuova versione\r\n          </button>\r\n        }\r\n        @case ('create') {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Crea\r\n          </button>\r\n        }\r\n        @default {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Salva\r\n          </button>\r\n        }\r\n      }\r\n\r\n      @if (canDuplicate()) {\r\n        <!-- \u00A76.2 \u00ABDuplica\u00BB: il flow sotto un altro nome, alla versione 1. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"isBusy()\"\r\n          title=\"Salva una copia con un altro nome\"\r\n          (click)=\"startCopy()\"\r\n        >\r\n          Duplica\u2026\r\n        </button>\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"isBusy() || !canActivate()\"\r\n        [title]=\"\r\n          canActivate()\r\n            ? 'Attiva questa versione'\r\n            : 'L\u2019attivazione esige zero errori: correggili nel pannello dei problemi'\r\n        \"\r\n        (click)=\"activate()\"\r\n      >\r\n        Attiva\r\n      </button>\r\n    </div>\r\n  </header>\r\n\r\n  @if (conflict()) {\r\n    <!-- \u00A79.3: qualcun altro ha salvato. Due strade, entrambe offerte. -->\r\n    <div class=\"fb-banner fb-banner--warn\" role=\"alert\">\r\n      <span>\r\n        {{ conflict()?.message }}\r\n        @if (conflict()?.conflictingAuthor) {\r\n          Ha salvato {{ conflict()?.conflictingAuthor }}.\r\n        }\r\n      </span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"reloadAfterConflict()\">Ricarica</button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"saveAsNewVersionAfterConflict()\">\r\n        Salva come nuova versione\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"dismissConflict()\">\u00D7</button>\r\n    </div>\r\n  }\r\n\r\n  @if (isCopyOpen()) {\r\n    <!--\r\n      Il nome si chiede prima di scrivere: e\u2019 l\u2019unico dato che il backend non puo\u2019 inventare, e\r\n      un doppione lo rifiuta con AlreadyExists (\u00A76.2). Invio conferma, Esc annulla.\r\n    -->\r\n    <div class=\"fb-banner fb-copy\" role=\"group\" aria-label=\"Duplica il flow\">\r\n      <label class=\"fb-copy__field\">\r\n        <span class=\"fb-copy__caption\">Nome tecnico della copia</span>\r\n        <input\r\n          #copyNameInput\r\n          class=\"fb-copy__input\"\r\n          [value]=\"copyName()\"\r\n          placeholder=\"NomeTecnico_Copia\"\r\n          (input)=\"setCopyName($any($event.target).value)\"\r\n          (keydown.enter)=\"confirmCopy()\"\r\n          (keydown.escape)=\"cancelCopy()\"\r\n        />\r\n      </label>\r\n      <label class=\"fb-copy__field\">\r\n        <span class=\"fb-copy__caption\">Nome visibile</span>\r\n        <input\r\n          class=\"fb-copy__input\"\r\n          [value]=\"copyLabel()\"\r\n          placeholder=\"(facoltativo)\"\r\n          (input)=\"setCopyLabel($any($event.target).value)\"\r\n          (keydown.enter)=\"confirmCopy()\"\r\n          (keydown.escape)=\"cancelCopy()\"\r\n        />\r\n      </label>\r\n      <span class=\"fb-copy__hint\" [class.fb-copy__hint--error]=\"!!copyNameProblem()\">\r\n        {{ copyNameProblem() || copyHint() }}\r\n      </span>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn fb-btn--primary fb-btn--icon\"\r\n        [disabled]=\"isBusy() || !!copyNameProblem()\"\r\n        (click)=\"confirmCopy()\"\r\n      >\r\n        Duplica\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"cancelCopy()\">Annulla</button>\r\n    </div>\r\n  }\r\n\r\n  @if (notice()) {\r\n    <div\r\n      class=\"fb-banner\"\r\n      [class.fb-banner--error]=\"notice()?.kind === 'error'\"\r\n      role=\"status\"\r\n    >\r\n      <span>{{ notice()?.message }}</span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"dismissNotice()\">\r\n        \u00D7\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (hasScreensInAutoLaunched()) {\r\n    <div class=\"fb-banner fb-banner--error\">\r\n      Un flow AutoLaunched che contiene screen e\u2019 un errore di validazione: non c\u2019e\u2019 nessuno a cui mostrarli.\r\n    </div>\r\n  }\r\n  @if (isOrchestrationWithoutStages()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow Orchestration senza stage di orchestrazione viene segnalato dalla validazione\r\n      (ORCHESTRATION_WITHOUT_STAGES).\r\n    </div>\r\n  }\r\n  @if (hasNoScreensInScreenFlow()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow di tipo Screen senza nessuno screen viene segnalato dalla validazione.\r\n    </div>\r\n  }\r\n  @if (!isEditable()) {\r\n    <div class=\"fb-banner\">\r\n      Questa versione e\u2019 in sola lettura: per modificarla creane una nuova.\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fb-main\">\r\n    <aside class=\"fb-main__palette\">\r\n      <fb-element-palette [processType]=\"document().processType\" (elementPicked)=\"onElementPicked($event)\" />\r\n    </aside>\r\n\r\n    <div class=\"fb-main__center\">\r\n      <fb-flow-canvas\r\n        class=\"fb-main__canvas\"\r\n        [selectedName]=\"selectedName()\"\r\n        [selectedNames]=\"selectedNames()\"\r\n        [outline]=\"outline()\"\r\n        [isEditable]=\"isEditable()\"\r\n        (selectionChange)=\"onSelectionChange($event)\"\r\n        (nodeOpened)=\"onNodeOpened($event)\"\r\n        (nodeRemoveRequested)=\"onRemoveNode($event)\"\r\n        (nodeDuplicateRequested)=\"onDuplicateNode($event)\"\r\n        (elementDropped)=\"onElementDropped($event)\"\r\n      />\r\n\r\n      @if (showProblems()) {\r\n        <fb-problems-panel\r\n          class=\"fb-main__problems\"\r\n          (elementFocused)=\"focusElement($event)\"\r\n          (closed)=\"toggleProblems()\"\r\n        />\r\n      } @else {\r\n        <button type=\"button\" class=\"fb-main__problems-toggle\" (click)=\"toggleProblems()\">\r\n          Problemi\r\n          @if (errorCount()) {\r\n            <span class=\"fb-main__count fb-main__count--error\">{{ errorCount() }}</span>\r\n          }\r\n          @if (warningCount()) {\r\n            <span class=\"fb-main__count fb-main__count--warn\">{{ warningCount() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <aside class=\"fb-main__side\">\r\n      <nav class=\"fb-side__tabs\" aria-label=\"Pannelli\">\r\n        @if (!isDialogMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-side__tab\"\r\n            [class.fb-side__tab--active]=\"sidePanel() === 'inspector'\"\r\n            (click)=\"setPanel('inspector')\"\r\n          >\r\n            Elemento\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'resources'\"\r\n          (click)=\"setPanel('resources')\"\r\n        >\r\n          Risorse\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'versions'\"\r\n          (click)=\"setPanel('versions')\"\r\n        >\r\n          Versioni\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'debug'\"\r\n          (click)=\"setPanel('debug')\"\r\n        >\r\n          Prova\r\n        </button>\r\n      </nav>\r\n\r\n      <div class=\"fb-side__content\">\r\n        @switch (sidePanel()) {\r\n          @case ('inspector') {\r\n            <fb-element-inspector\r\n              [selectedName]=\"selectedName()\"\r\n              (removeRequested)=\"onRemoveNode($event)\"\r\n              (duplicateRequested)=\"onDuplicateNode($event)\"\r\n              (renamed)=\"onNodeRenamed($event)\"\r\n              (closed)=\"setPanel('resources')\"\r\n            />\r\n          }\r\n          @case ('resources') {\r\n            <fb-resource-panel (closed)=\"setPanel('inspector')\" />\r\n          }\r\n          @case ('versions') {\r\n            <fb-version-panel\r\n              (versionOpened)=\"openVersion($event)\"\r\n              (notice)=\"showNotice($event)\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n          @case ('debug') {\r\n            <!-- Evidenzia sul canvas senza rubare il pannello: l'interview e\u2019 in corso. -->\r\n            <fb-debug-panel (elementFocused)=\"highlightElement($event)\" (closed)=\"setPanel('inspector')\" />\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <footer class=\"fb-side__footer\">\r\n        <label class=\"fb-btn fb-btn--icon\">\r\n          Importa JSON\r\n          <input type=\"file\" accept=\"application/json,.json\" hidden (change)=\"onFileSelected($event)\" />\r\n        </label>\r\n      </footer>\r\n    </aside>\r\n  </div>\r\n\r\n  @if (pastePreview(); as preview) {\r\n    <!--\r\n      L\u2019incolla passa da una conferma perche\u2019 non e\u2019 mai una copia identica: nomi gi\u00E0 presi,\r\n      risorse che qui non esistono, riferimenti che restano orfani. Il piano e\u2019 gi\u00E0 calcolato,\r\n      la finestra lo mostra e basta.\r\n    -->\r\n    <fb-paste-dialog\r\n      [payload]=\"preview.payload\"\r\n      [plan]=\"preview.plan\"\r\n      (confirmed)=\"confirmPaste($event)\"\r\n      (cancelled)=\"cancelPaste()\"\r\n    />\r\n  }\r\n\r\n  @if (isDialogMode() && isDialogOpen() && selectedName()) {\r\n    <!-- La dialog sta dentro il builder, non nel body: la libreria e\u2019 innestabile. -->\r\n    <fb-element-dialog\r\n      [selectedName]=\"selectedName()\"\r\n      (closed)=\"closeDialog()\"\r\n      (removeRequested)=\"onRemoveNode($event)\"\r\n      (duplicateRequested)=\"onDuplicateNode($event)\"\r\n      (renamed)=\"onNodeRenamed($event)\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;font:inherit;color:var(--fb-text, #1d2939)}.fb-builder{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--fb-border, #e2e5eb);background:var(--fb-surface, #fff)}.fb-top__identity{min-width:0}.fb-top__label{width:100%;max-width:420px;padding:2px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text, #1d2939);font:inherit;font-size:15px;font-weight:600}.fb-top__label:hover:not(:disabled),.fb-top__label:focus-visible{border-color:var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-top__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}.fb-top__name{width:180px;padding:1px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-top__name:hover:not(:disabled),.fb-top__name:focus-visible{border-color:var(--fb-border, #d6dae1)}.fb-top__process{padding:1px 4px;border:1px solid var(--fb-border-subtle, #e6e9ee);border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font:inherit;font-size:11px}.fb-top__status,.fb-top__version,.fb-top__dirty{padding:2px 7px;border-radius:999px;background:var(--fb-surface-sunken, #eef0f4);color:var(--fb-text-muted, #6b7086);font-size:10px;font-weight:600}.fb-top__version{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.fb-top__dirty{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-top__actions{display:flex;flex-wrap:wrap;gap:4px}.fb-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee);background:color-mix(in srgb,var(--fb-accent, #2f6feb) 7%,transparent);font-size:11px}.fb-banner--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-banner--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 10%,transparent);color:var(--fb-error, #c9372c)}.fb-banner>span{flex:1;min-width:200px}.fb-copy__field{display:flex;align-items:center;gap:6px}.fb-copy__caption{color:var(--fb-text-muted, #667085);white-space:nowrap}.fb-copy__input{width:180px;padding:2px 5px;border:1px solid var(--fb-border, #d6dae1);border-radius:4px;background:var(--fb-surface, #fff);color:var(--fb-text, #1d2939);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-copy__hint{flex:1;min-width:180px;color:var(--fb-text-muted, #667085)}.fb-copy__hint--error{color:var(--fb-error, #c9372c)}.fb-main{display:flex;flex:1;min-height:0}.fb-main__palette{flex:0 0 190px;min-width:0}.fb-main__center{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.fb-main__canvas{flex:1;min-height:0}.fb-main__problems{flex:0 0 auto;height:220px}.fb-main__problems-toggle{display:flex;align-items:center;gap:6px;padding:4px 12px;border:0;border-top:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface-alt, #f8f9fb);color:var(--fb-text-muted, #667085);font:inherit;font-size:11px;cursor:pointer}.fb-main__count{padding:0 5px;border-radius:8px;background:var(--fb-border, #d6dae1);font-size:9px;font-weight:700}.fb-main__count--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 16%,transparent);color:var(--fb-error, #c9372c)}.fb-main__count--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-main__side{display:flex;flex-direction:column;flex:0 0 340px;min-width:0;min-height:0;border-left:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-side__tabs{display:flex;gap:2px;margin:8px 10px;padding:3px;border-radius:var(--fb-radius, 10px);background:var(--fb-surface-sunken, #eef0f4)}.fb-side__tab{flex:1;padding:5px 8px;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-muted, #6b7086);font:inherit;font-size:11px;cursor:pointer;transition:background .12s ease,color .12s ease}.fb-side__tab:hover:not(.fb-side__tab--active){color:var(--fb-text, #1a1c23)}.fb-side__tab--active{background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));color:var(--fb-text, #1a1c23);font-weight:600}.fb-side__content{flex:1;min-height:0;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-side__content>*{height:100%}.fb-side__footer{display:flex;gap:6px;padding:6px 8px;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}@media(max-width:1200px){.fb-main__palette{flex-basis:150px}.fb-main__side{flex-basis:290px}}\n"], dependencies: [{ kind: "component", type: DebugPanelComponent, selector: "fb-debug-panel", outputs: ["closed", "elementFocused"] }, { kind: "component", type: ElementDialogComponent, selector: "fb-element-dialog", inputs: ["selectedName"], outputs: ["closed", "removeRequested", "duplicateRequested", "renamed"] }, { kind: "component", type: ElementInspectorComponent, selector: "fb-element-inspector", inputs: ["selectedName", "showHeader"], outputs: ["closed", "removeRequested", "duplicateRequested", "renamed"] }, { kind: "component", type: ElementPaletteComponent, selector: "fb-element-palette", inputs: ["processType"], outputs: ["elementPicked"] }, { kind: "component", type: FlowCanvasComponent, selector: "fb-flow-canvas", inputs: ["selectedName", "selectedNames", "outline", "isEditable"], outputs: ["selectionChange", "nodeOpened", "nodeRemoveRequested", "nodeDuplicateRequested", "elementDropped"] }, { kind: "component", type: PasteDialogComponent, selector: "fb-paste-dialog", inputs: ["payload", "plan"], outputs: ["confirmed", "cancelled"] }, { kind: "component", type: ProblemsPanelComponent, selector: "fb-problems-panel", outputs: ["elementFocused", "closed"] }, { kind: "component", type: ResourcePanelComponent, selector: "fb-resource-panel", outputs: ["closed"] }, { kind: "component", type: VersionPanelComponent, selector: "fb-version-panel", outputs: ["closed", "versionOpened", "notice"] }, { kind: "directive", type: SelectValueDirective, selector: "select[fbValue]", inputs: ["fbValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlowBuilderComponent, decorators: [{
             type: Component,
@@ -13081,6 +13834,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         ElementInspectorComponent,
                         ElementPaletteComponent,
                         FlowCanvasComponent,
+                        PasteDialogComponent,
                         ProblemsPanelComponent,
                         ResourcePanelComponent,
                         VersionPanelComponent, SelectValueDirective], providers: [
@@ -13091,12 +13845,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         FormulaValidationService,
                         FlowEditorSession,
                         FlowLayoutService,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-builder\" [attr.data-fb-theme]=\"null\">\r\n  <header class=\"fb-top\">\r\n    <div class=\"fb-top__identity\">\r\n      <input\r\n        class=\"fb-top__label\"\r\n        [value]=\"document().label || ''\"\r\n        placeholder=\"Nome del flow\"\r\n        aria-label=\"Nome del flow\"\r\n        [disabled]=\"!isEditable()\"\r\n        (input)=\"setLabel($any($event.target).value)\"\r\n      />\r\n      <div class=\"fb-top__meta\">\r\n        <input\r\n          class=\"fb-top__name\"\r\n          [value]=\"document().fullName || ''\"\r\n          placeholder=\"NomeTecnico\"\r\n          aria-label=\"Nome tecnico del flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (input)=\"setFullName($any($event.target).value)\"\r\n        />\r\n        <select\r\n          class=\"fb-top__process\"\r\n          [fbValue]=\"document().processType || ''\"\r\n          aria-label=\"Tipo di flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (change)=\"setProcessType($any($event.target).value)\"\r\n        >\r\n          <!--\r\n            Il segnaposto esiste perche' un `<select>` senza opzione corrispondente non e'\r\n            \u00ABvuoto\u00BB: e' a `selectedIndex = -1`, e mostra una casella bianca. Su un flow nuovo\r\n            (`processType` non ancora scelto) e' questa la riga che si vede, disabilitata\r\n            perche' non e' un valore valido da salvare.\r\n          -->\r\n          @if (!document().processType) {\r\n            <option value=\"\" disabled>\u2014 tipo di flow \u2014</option>\r\n          }\r\n          @for (type of processTypes(); track type.value) {\r\n            <option [value]=\"type.value\">{{ type.label }}</option>\r\n          }\r\n          <!--\r\n            Il tipo del documento che il dizionario non conosce: senza questa opzione la select\r\n            resta bianca su un flow che il backend ha salvato con un `processType` fuori\r\n            catalogo (o quando `processTypes` manca dalla risposta dei dizionari), e sembra che\r\n            l'editor non abbia ricaricato il flow. Va mostrato **senza** riscrivere il\r\n            documento: il valore e' del backend, non nostro da correggere.\r\n          -->\r\n          @if (isProcessTypeOutOfCatalog()) {\r\n            <option [value]=\"document().processType\">{{ document().processType }} (fuori catalogo)</option>\r\n          }\r\n        </select>\r\n        <span class=\"fb-top__status\">{{ statusLabel() }}</span>\r\n        @if (session.version() != null) {\r\n          <span class=\"fb-top__version\">v{{ session.version() }}</span>\r\n        }\r\n        @if (isDirty()) {\r\n          <span class=\"fb-top__dirty\" title=\"Ci sono modifiche non salvate\">modificato</span>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"fb-top__actions\">\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canUndo()\" aria-label=\"Annulla\" (click)=\"undo()\">\u21B6</button>\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canRedo()\" aria-label=\"Ripeti\" (click)=\"redo()\">\u21B7</button>\r\n      <button type=\"button\" class=\"fb-btn\" title=\"Ricalcola le posizioni\" (click)=\"autoLayout()\">Riordina</button>\r\n      @if (isDialogMode()) {\r\n        <!-- Il doppio click sul node fa la stessa cosa, ma non si vede: questo comando s\u00EC. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"!selectedName()\"\r\n          title=\"Apri il dettaglio dell\u2019elemento selezionato\"\r\n          (click)=\"openSelectedElement()\"\r\n        >\r\n          Dettaglio\r\n        </button>\r\n      }\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"isBusy()\" (click)=\"validateNow()\">Valida</button>\r\n\r\n      @switch (primaryCommand()) {\r\n        @case ('newVersion') {\r\n          <!-- Su una versione non modificabile il comando primario e' \"Nuova versione\" (\u00A78.1). -->\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"createNewVersion()\">\r\n            Nuova versione\r\n          </button>\r\n        }\r\n        @case ('create') {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Crea\r\n          </button>\r\n        }\r\n        @default {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Salva\r\n          </button>\r\n        }\r\n      }\r\n\r\n      @if (canDuplicate()) {\r\n        <!-- \u00A76.2 \u00ABDuplica\u00BB: il flow sotto un altro nome, alla versione 1. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"isBusy()\"\r\n          title=\"Salva una copia con un altro nome\"\r\n          (click)=\"startCopy()\"\r\n        >\r\n          Duplica\u2026\r\n        </button>\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"isBusy() || !canActivate()\"\r\n        [title]=\"\r\n          canActivate()\r\n            ? 'Attiva questa versione'\r\n            : 'L\u2019attivazione esige zero errori: correggili nel pannello dei problemi'\r\n        \"\r\n        (click)=\"activate()\"\r\n      >\r\n        Attiva\r\n      </button>\r\n    </div>\r\n  </header>\r\n\r\n  @if (conflict()) {\r\n    <!-- \u00A79.3: qualcun altro ha salvato. Due strade, entrambe offerte. -->\r\n    <div class=\"fb-banner fb-banner--warn\" role=\"alert\">\r\n      <span>\r\n        {{ conflict()?.message }}\r\n        @if (conflict()?.conflictingAuthor) {\r\n          Ha salvato {{ conflict()?.conflictingAuthor }}.\r\n        }\r\n      </span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"reloadAfterConflict()\">Ricarica</button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"saveAsNewVersionAfterConflict()\">\r\n        Salva come nuova versione\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"dismissConflict()\">\u00D7</button>\r\n    </div>\r\n  }\r\n\r\n  @if (isCopyOpen()) {\r\n    <!--\r\n      Il nome si chiede prima di scrivere: e\u2019 l\u2019unico dato che il backend non puo\u2019 inventare, e\r\n      un doppione lo rifiuta con AlreadyExists (\u00A76.2). Invio conferma, Esc annulla.\r\n    -->\r\n    <div class=\"fb-banner fb-copy\" role=\"group\" aria-label=\"Duplica il flow\">\r\n      <label class=\"fb-copy__field\">\r\n        <span class=\"fb-copy__caption\">Nome tecnico della copia</span>\r\n        <input\r\n          #copyNameInput\r\n          class=\"fb-copy__input\"\r\n          [value]=\"copyName()\"\r\n          placeholder=\"NomeTecnico_Copia\"\r\n          (input)=\"setCopyName($any($event.target).value)\"\r\n          (keydown.enter)=\"confirmCopy()\"\r\n          (keydown.escape)=\"cancelCopy()\"\r\n        />\r\n      </label>\r\n      <label class=\"fb-copy__field\">\r\n        <span class=\"fb-copy__caption\">Nome visibile</span>\r\n        <input\r\n          class=\"fb-copy__input\"\r\n          [value]=\"copyLabel()\"\r\n          placeholder=\"(facoltativo)\"\r\n          (input)=\"setCopyLabel($any($event.target).value)\"\r\n          (keydown.enter)=\"confirmCopy()\"\r\n          (keydown.escape)=\"cancelCopy()\"\r\n        />\r\n      </label>\r\n      <span class=\"fb-copy__hint\" [class.fb-copy__hint--error]=\"!!copyNameProblem()\">\r\n        {{ copyNameProblem() || copyHint() }}\r\n      </span>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn fb-btn--primary fb-btn--icon\"\r\n        [disabled]=\"isBusy() || !!copyNameProblem()\"\r\n        (click)=\"confirmCopy()\"\r\n      >\r\n        Duplica\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"cancelCopy()\">Annulla</button>\r\n    </div>\r\n  }\r\n\r\n  @if (notice()) {\r\n    <div\r\n      class=\"fb-banner\"\r\n      [class.fb-banner--error]=\"notice()?.kind === 'error'\"\r\n      role=\"status\"\r\n    >\r\n      <span>{{ notice()?.message }}</span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"dismissNotice()\">\r\n        \u00D7\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (hasScreensInAutoLaunched()) {\r\n    <div class=\"fb-banner fb-banner--error\">\r\n      Un flow AutoLaunched che contiene screen e\u2019 un errore di validazione: non c\u2019e\u2019 nessuno a cui mostrarli.\r\n    </div>\r\n  }\r\n  @if (isOrchestrationWithoutStages()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow Orchestration senza stage di orchestrazione viene segnalato dalla validazione\r\n      (ORCHESTRATION_WITHOUT_STAGES).\r\n    </div>\r\n  }\r\n  @if (hasNoScreensInScreenFlow()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow di tipo Screen senza nessuno screen viene segnalato dalla validazione.\r\n    </div>\r\n  }\r\n  @if (!isEditable()) {\r\n    <div class=\"fb-banner\">\r\n      Questa versione e\u2019 in sola lettura: per modificarla creane una nuova.\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fb-main\">\r\n    <aside class=\"fb-main__palette\">\r\n      <fb-element-palette [processType]=\"document().processType\" (elementPicked)=\"onElementPicked($event)\" />\r\n    </aside>\r\n\r\n    <div class=\"fb-main__center\">\r\n      <fb-flow-canvas\r\n        class=\"fb-main__canvas\"\r\n        [selectedName]=\"selectedName()\"\r\n        [outline]=\"outline()\"\r\n        [isEditable]=\"isEditable()\"\r\n        (selectionChange)=\"onSelectionChange($event)\"\r\n        (nodeOpened)=\"onNodeOpened($event)\"\r\n        (nodeRemoveRequested)=\"onRemoveNode($event)\"\r\n        (nodeDuplicateRequested)=\"onDuplicateNode($event)\"\r\n        (elementDropped)=\"onElementDropped($event)\"\r\n      />\r\n\r\n      @if (showProblems()) {\r\n        <fb-problems-panel\r\n          class=\"fb-main__problems\"\r\n          (elementFocused)=\"focusElement($event)\"\r\n          (closed)=\"toggleProblems()\"\r\n        />\r\n      } @else {\r\n        <button type=\"button\" class=\"fb-main__problems-toggle\" (click)=\"toggleProblems()\">\r\n          Problemi\r\n          @if (errorCount()) {\r\n            <span class=\"fb-main__count fb-main__count--error\">{{ errorCount() }}</span>\r\n          }\r\n          @if (warningCount()) {\r\n            <span class=\"fb-main__count fb-main__count--warn\">{{ warningCount() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <aside class=\"fb-main__side\">\r\n      <nav class=\"fb-side__tabs\" aria-label=\"Pannelli\">\r\n        @if (!isDialogMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-side__tab\"\r\n            [class.fb-side__tab--active]=\"sidePanel() === 'inspector'\"\r\n            (click)=\"setPanel('inspector')\"\r\n          >\r\n            Elemento\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'resources'\"\r\n          (click)=\"setPanel('resources')\"\r\n        >\r\n          Risorse\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'versions'\"\r\n          (click)=\"setPanel('versions')\"\r\n        >\r\n          Versioni\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'debug'\"\r\n          (click)=\"setPanel('debug')\"\r\n        >\r\n          Prova\r\n        </button>\r\n      </nav>\r\n\r\n      <div class=\"fb-side__content\">\r\n        @switch (sidePanel()) {\r\n          @case ('inspector') {\r\n            <fb-element-inspector\r\n              [selectedName]=\"selectedName()\"\r\n              (removeRequested)=\"onRemoveNode($event)\"\r\n              (duplicateRequested)=\"onDuplicateNode($event)\"\r\n              (renamed)=\"onNodeRenamed($event)\"\r\n              (closed)=\"setPanel('resources')\"\r\n            />\r\n          }\r\n          @case ('resources') {\r\n            <fb-resource-panel (closed)=\"setPanel('inspector')\" />\r\n          }\r\n          @case ('versions') {\r\n            <fb-version-panel\r\n              (versionOpened)=\"openVersion($event)\"\r\n              (notice)=\"showNotice($event)\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n          @case ('debug') {\r\n            <!-- Evidenzia sul canvas senza rubare il pannello: l'interview e\u2019 in corso. -->\r\n            <fb-debug-panel (elementFocused)=\"highlightElement($event)\" (closed)=\"setPanel('inspector')\" />\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <footer class=\"fb-side__footer\">\r\n        <label class=\"fb-btn fb-btn--icon\">\r\n          Importa JSON\r\n          <input type=\"file\" accept=\"application/json,.json\" hidden (change)=\"onFileSelected($event)\" />\r\n        </label>\r\n      </footer>\r\n    </aside>\r\n  </div>\r\n\r\n  @if (isDialogMode() && isDialogOpen() && selectedName()) {\r\n    <!-- La dialog sta dentro il builder, non nel body: la libreria e\u2019 innestabile. -->\r\n    <fb-element-dialog\r\n      [selectedName]=\"selectedName()\"\r\n      (closed)=\"closeDialog()\"\r\n      (removeRequested)=\"onRemoveNode($event)\"\r\n      (duplicateRequested)=\"onDuplicateNode($event)\"\r\n      (renamed)=\"onNodeRenamed($event)\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;font:inherit;color:var(--fb-text, #1d2939)}.fb-builder{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--fb-border, #e2e5eb);background:var(--fb-surface, #fff)}.fb-top__identity{min-width:0}.fb-top__label{width:100%;max-width:420px;padding:2px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text, #1d2939);font:inherit;font-size:15px;font-weight:600}.fb-top__label:hover:not(:disabled),.fb-top__label:focus-visible{border-color:var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-top__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}.fb-top__name{width:180px;padding:1px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-top__name:hover:not(:disabled),.fb-top__name:focus-visible{border-color:var(--fb-border, #d6dae1)}.fb-top__process{padding:1px 4px;border:1px solid var(--fb-border-subtle, #e6e9ee);border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font:inherit;font-size:11px}.fb-top__status,.fb-top__version,.fb-top__dirty{padding:2px 7px;border-radius:999px;background:var(--fb-surface-sunken, #eef0f4);color:var(--fb-text-muted, #6b7086);font-size:10px;font-weight:600}.fb-top__version{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.fb-top__dirty{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-top__actions{display:flex;flex-wrap:wrap;gap:4px}.fb-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee);background:color-mix(in srgb,var(--fb-accent, #2f6feb) 7%,transparent);font-size:11px}.fb-banner--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-banner--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 10%,transparent);color:var(--fb-error, #c9372c)}.fb-banner>span{flex:1;min-width:200px}.fb-copy__field{display:flex;align-items:center;gap:6px}.fb-copy__caption{color:var(--fb-text-muted, #667085);white-space:nowrap}.fb-copy__input{width:180px;padding:2px 5px;border:1px solid var(--fb-border, #d6dae1);border-radius:4px;background:var(--fb-surface, #fff);color:var(--fb-text, #1d2939);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-copy__hint{flex:1;min-width:180px;color:var(--fb-text-muted, #667085)}.fb-copy__hint--error{color:var(--fb-error, #c9372c)}.fb-main{display:flex;flex:1;min-height:0}.fb-main__palette{flex:0 0 190px;min-width:0}.fb-main__center{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.fb-main__canvas{flex:1;min-height:0}.fb-main__problems{flex:0 0 auto;height:220px}.fb-main__problems-toggle{display:flex;align-items:center;gap:6px;padding:4px 12px;border:0;border-top:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface-alt, #f8f9fb);color:var(--fb-text-muted, #667085);font:inherit;font-size:11px;cursor:pointer}.fb-main__count{padding:0 5px;border-radius:8px;background:var(--fb-border, #d6dae1);font-size:9px;font-weight:700}.fb-main__count--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 16%,transparent);color:var(--fb-error, #c9372c)}.fb-main__count--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-main__side{display:flex;flex-direction:column;flex:0 0 340px;min-width:0;min-height:0;border-left:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-side__tabs{display:flex;gap:2px;margin:8px 10px;padding:3px;border-radius:var(--fb-radius, 10px);background:var(--fb-surface-sunken, #eef0f4)}.fb-side__tab{flex:1;padding:5px 8px;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-muted, #6b7086);font:inherit;font-size:11px;cursor:pointer;transition:background .12s ease,color .12s ease}.fb-side__tab:hover:not(.fb-side__tab--active){color:var(--fb-text, #1a1c23)}.fb-side__tab--active{background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));color:var(--fb-text, #1a1c23);font-weight:600}.fb-side__content{flex:1;min-height:0;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-side__content>*{height:100%}.fb-side__footer{display:flex;gap:6px;padding:6px 8px;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}@media(max-width:1200px){.fb-main__palette{flex-basis:150px}.fb-main__side{flex-basis:290px}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { '(keydown)': 'onKeyDown($event)' }, template: "<div class=\"fb-builder\" [attr.data-fb-theme]=\"null\">\r\n  <header class=\"fb-top\">\r\n    <div class=\"fb-top__identity\">\r\n      <input\r\n        class=\"fb-top__label\"\r\n        [value]=\"document().label || ''\"\r\n        placeholder=\"Nome del flow\"\r\n        aria-label=\"Nome del flow\"\r\n        [disabled]=\"!isEditable()\"\r\n        (input)=\"setLabel($any($event.target).value)\"\r\n      />\r\n      <div class=\"fb-top__meta\">\r\n        <input\r\n          class=\"fb-top__name\"\r\n          [value]=\"document().fullName || ''\"\r\n          placeholder=\"NomeTecnico\"\r\n          aria-label=\"Nome tecnico del flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (input)=\"setFullName($any($event.target).value)\"\r\n        />\r\n        <select\r\n          class=\"fb-top__process\"\r\n          [fbValue]=\"document().processType || ''\"\r\n          aria-label=\"Tipo di flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (change)=\"setProcessType($any($event.target).value)\"\r\n        >\r\n          <!--\r\n            Il segnaposto esiste perche' un `<select>` senza opzione corrispondente non e'\r\n            \u00ABvuoto\u00BB: e' a `selectedIndex = -1`, e mostra una casella bianca. Su un flow nuovo\r\n            (`processType` non ancora scelto) e' questa la riga che si vede, disabilitata\r\n            perche' non e' un valore valido da salvare.\r\n          -->\r\n          @if (!document().processType) {\r\n            <option value=\"\" disabled>\u2014 tipo di flow \u2014</option>\r\n          }\r\n          @for (type of processTypes(); track type.value) {\r\n            <option [value]=\"type.value\">{{ type.label }}</option>\r\n          }\r\n          <!--\r\n            Il tipo del documento che il dizionario non conosce: senza questa opzione la select\r\n            resta bianca su un flow che il backend ha salvato con un `processType` fuori\r\n            catalogo (o quando `processTypes` manca dalla risposta dei dizionari), e sembra che\r\n            l'editor non abbia ricaricato il flow. Va mostrato **senza** riscrivere il\r\n            documento: il valore e' del backend, non nostro da correggere.\r\n          -->\r\n          @if (isProcessTypeOutOfCatalog()) {\r\n            <option [value]=\"document().processType\">{{ document().processType }} (fuori catalogo)</option>\r\n          }\r\n        </select>\r\n        <span class=\"fb-top__status\">{{ statusLabel() }}</span>\r\n        @if (session.version() != null) {\r\n          <span class=\"fb-top__version\">v{{ session.version() }}</span>\r\n        }\r\n        @if (isDirty()) {\r\n          <span class=\"fb-top__dirty\" title=\"Ci sono modifiche non salvate\">modificato</span>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"fb-top__actions\">\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canUndo()\" aria-label=\"Annulla\" (click)=\"undo()\">\u21B6</button>\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canRedo()\" aria-label=\"Ripeti\" (click)=\"redo()\">\u21B7</button>\r\n      <button type=\"button\" class=\"fb-btn\" title=\"Ricalcola le posizioni\" (click)=\"autoLayout()\">Riordina</button>\r\n\r\n      <!--\r\n        Copia e incolla stanno **anche** qui e non solo sui tasti: una scorciatoia che nessuno\r\n        annuncia non esiste. Il titolo la dice, cos\u00EC si impara usandola una volta.\r\n        L\u2019incolla e\u2019 acceso anche con la selezione vuota: cio\u2019 che si incolla sta negli appunti,\r\n        e puo\u2019 venire da un altro flow.\r\n      -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canCopy()\"\r\n        title=\"Copia gli elementi selezionati, con le risorse che usano (Ctrl+C)\"\r\n        aria-label=\"Copia gli elementi selezionati\"\r\n        (click)=\"copySelection()\"\r\n      >\r\n        \u29C9\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"!canPaste() || !isEditable()\"\r\n        title=\"Incolla gli elementi copiati, anche da un altro flow (Ctrl+V)\"\r\n        aria-label=\"Incolla gli elementi copiati\"\r\n        (click)=\"startPaste()\"\r\n      >\r\n        \u2398\r\n      </button>\r\n      @if (isDialogMode()) {\r\n        <!-- Il doppio click sul node fa la stessa cosa, ma non si vede: questo comando s\u00EC. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"!selectedName()\"\r\n          title=\"Apri il dettaglio dell\u2019elemento selezionato\"\r\n          (click)=\"openSelectedElement()\"\r\n        >\r\n          Dettaglio\r\n        </button>\r\n      }\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"isBusy()\" (click)=\"validateNow()\">Valida</button>\r\n\r\n      @switch (primaryCommand()) {\r\n        @case ('newVersion') {\r\n          <!-- Su una versione non modificabile il comando primario e' \"Nuova versione\" (\u00A78.1). -->\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"createNewVersion()\">\r\n            Nuova versione\r\n          </button>\r\n        }\r\n        @case ('create') {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Crea\r\n          </button>\r\n        }\r\n        @default {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Salva\r\n          </button>\r\n        }\r\n      }\r\n\r\n      @if (canDuplicate()) {\r\n        <!-- \u00A76.2 \u00ABDuplica\u00BB: il flow sotto un altro nome, alla versione 1. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"isBusy()\"\r\n          title=\"Salva una copia con un altro nome\"\r\n          (click)=\"startCopy()\"\r\n        >\r\n          Duplica\u2026\r\n        </button>\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"isBusy() || !canActivate()\"\r\n        [title]=\"\r\n          canActivate()\r\n            ? 'Attiva questa versione'\r\n            : 'L\u2019attivazione esige zero errori: correggili nel pannello dei problemi'\r\n        \"\r\n        (click)=\"activate()\"\r\n      >\r\n        Attiva\r\n      </button>\r\n    </div>\r\n  </header>\r\n\r\n  @if (conflict()) {\r\n    <!-- \u00A79.3: qualcun altro ha salvato. Due strade, entrambe offerte. -->\r\n    <div class=\"fb-banner fb-banner--warn\" role=\"alert\">\r\n      <span>\r\n        {{ conflict()?.message }}\r\n        @if (conflict()?.conflictingAuthor) {\r\n          Ha salvato {{ conflict()?.conflictingAuthor }}.\r\n        }\r\n      </span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"reloadAfterConflict()\">Ricarica</button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"saveAsNewVersionAfterConflict()\">\r\n        Salva come nuova versione\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"dismissConflict()\">\u00D7</button>\r\n    </div>\r\n  }\r\n\r\n  @if (isCopyOpen()) {\r\n    <!--\r\n      Il nome si chiede prima di scrivere: e\u2019 l\u2019unico dato che il backend non puo\u2019 inventare, e\r\n      un doppione lo rifiuta con AlreadyExists (\u00A76.2). Invio conferma, Esc annulla.\r\n    -->\r\n    <div class=\"fb-banner fb-copy\" role=\"group\" aria-label=\"Duplica il flow\">\r\n      <label class=\"fb-copy__field\">\r\n        <span class=\"fb-copy__caption\">Nome tecnico della copia</span>\r\n        <input\r\n          #copyNameInput\r\n          class=\"fb-copy__input\"\r\n          [value]=\"copyName()\"\r\n          placeholder=\"NomeTecnico_Copia\"\r\n          (input)=\"setCopyName($any($event.target).value)\"\r\n          (keydown.enter)=\"confirmCopy()\"\r\n          (keydown.escape)=\"cancelCopy()\"\r\n        />\r\n      </label>\r\n      <label class=\"fb-copy__field\">\r\n        <span class=\"fb-copy__caption\">Nome visibile</span>\r\n        <input\r\n          class=\"fb-copy__input\"\r\n          [value]=\"copyLabel()\"\r\n          placeholder=\"(facoltativo)\"\r\n          (input)=\"setCopyLabel($any($event.target).value)\"\r\n          (keydown.enter)=\"confirmCopy()\"\r\n          (keydown.escape)=\"cancelCopy()\"\r\n        />\r\n      </label>\r\n      <span class=\"fb-copy__hint\" [class.fb-copy__hint--error]=\"!!copyNameProblem()\">\r\n        {{ copyNameProblem() || copyHint() }}\r\n      </span>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn fb-btn--primary fb-btn--icon\"\r\n        [disabled]=\"isBusy() || !!copyNameProblem()\"\r\n        (click)=\"confirmCopy()\"\r\n      >\r\n        Duplica\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"cancelCopy()\">Annulla</button>\r\n    </div>\r\n  }\r\n\r\n  @if (notice()) {\r\n    <div\r\n      class=\"fb-banner\"\r\n      [class.fb-banner--error]=\"notice()?.kind === 'error'\"\r\n      role=\"status\"\r\n    >\r\n      <span>{{ notice()?.message }}</span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"dismissNotice()\">\r\n        \u00D7\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (hasScreensInAutoLaunched()) {\r\n    <div class=\"fb-banner fb-banner--error\">\r\n      Un flow AutoLaunched che contiene screen e\u2019 un errore di validazione: non c\u2019e\u2019 nessuno a cui mostrarli.\r\n    </div>\r\n  }\r\n  @if (isOrchestrationWithoutStages()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow Orchestration senza stage di orchestrazione viene segnalato dalla validazione\r\n      (ORCHESTRATION_WITHOUT_STAGES).\r\n    </div>\r\n  }\r\n  @if (hasNoScreensInScreenFlow()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow di tipo Screen senza nessuno screen viene segnalato dalla validazione.\r\n    </div>\r\n  }\r\n  @if (!isEditable()) {\r\n    <div class=\"fb-banner\">\r\n      Questa versione e\u2019 in sola lettura: per modificarla creane una nuova.\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fb-main\">\r\n    <aside class=\"fb-main__palette\">\r\n      <fb-element-palette [processType]=\"document().processType\" (elementPicked)=\"onElementPicked($event)\" />\r\n    </aside>\r\n\r\n    <div class=\"fb-main__center\">\r\n      <fb-flow-canvas\r\n        class=\"fb-main__canvas\"\r\n        [selectedName]=\"selectedName()\"\r\n        [selectedNames]=\"selectedNames()\"\r\n        [outline]=\"outline()\"\r\n        [isEditable]=\"isEditable()\"\r\n        (selectionChange)=\"onSelectionChange($event)\"\r\n        (nodeOpened)=\"onNodeOpened($event)\"\r\n        (nodeRemoveRequested)=\"onRemoveNode($event)\"\r\n        (nodeDuplicateRequested)=\"onDuplicateNode($event)\"\r\n        (elementDropped)=\"onElementDropped($event)\"\r\n      />\r\n\r\n      @if (showProblems()) {\r\n        <fb-problems-panel\r\n          class=\"fb-main__problems\"\r\n          (elementFocused)=\"focusElement($event)\"\r\n          (closed)=\"toggleProblems()\"\r\n        />\r\n      } @else {\r\n        <button type=\"button\" class=\"fb-main__problems-toggle\" (click)=\"toggleProblems()\">\r\n          Problemi\r\n          @if (errorCount()) {\r\n            <span class=\"fb-main__count fb-main__count--error\">{{ errorCount() }}</span>\r\n          }\r\n          @if (warningCount()) {\r\n            <span class=\"fb-main__count fb-main__count--warn\">{{ warningCount() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <aside class=\"fb-main__side\">\r\n      <nav class=\"fb-side__tabs\" aria-label=\"Pannelli\">\r\n        @if (!isDialogMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-side__tab\"\r\n            [class.fb-side__tab--active]=\"sidePanel() === 'inspector'\"\r\n            (click)=\"setPanel('inspector')\"\r\n          >\r\n            Elemento\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'resources'\"\r\n          (click)=\"setPanel('resources')\"\r\n        >\r\n          Risorse\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'versions'\"\r\n          (click)=\"setPanel('versions')\"\r\n        >\r\n          Versioni\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'debug'\"\r\n          (click)=\"setPanel('debug')\"\r\n        >\r\n          Prova\r\n        </button>\r\n      </nav>\r\n\r\n      <div class=\"fb-side__content\">\r\n        @switch (sidePanel()) {\r\n          @case ('inspector') {\r\n            <fb-element-inspector\r\n              [selectedName]=\"selectedName()\"\r\n              (removeRequested)=\"onRemoveNode($event)\"\r\n              (duplicateRequested)=\"onDuplicateNode($event)\"\r\n              (renamed)=\"onNodeRenamed($event)\"\r\n              (closed)=\"setPanel('resources')\"\r\n            />\r\n          }\r\n          @case ('resources') {\r\n            <fb-resource-panel (closed)=\"setPanel('inspector')\" />\r\n          }\r\n          @case ('versions') {\r\n            <fb-version-panel\r\n              (versionOpened)=\"openVersion($event)\"\r\n              (notice)=\"showNotice($event)\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n          @case ('debug') {\r\n            <!-- Evidenzia sul canvas senza rubare il pannello: l'interview e\u2019 in corso. -->\r\n            <fb-debug-panel (elementFocused)=\"highlightElement($event)\" (closed)=\"setPanel('inspector')\" />\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <footer class=\"fb-side__footer\">\r\n        <label class=\"fb-btn fb-btn--icon\">\r\n          Importa JSON\r\n          <input type=\"file\" accept=\"application/json,.json\" hidden (change)=\"onFileSelected($event)\" />\r\n        </label>\r\n      </footer>\r\n    </aside>\r\n  </div>\r\n\r\n  @if (pastePreview(); as preview) {\r\n    <!--\r\n      L\u2019incolla passa da una conferma perche\u2019 non e\u2019 mai una copia identica: nomi gi\u00E0 presi,\r\n      risorse che qui non esistono, riferimenti che restano orfani. Il piano e\u2019 gi\u00E0 calcolato,\r\n      la finestra lo mostra e basta.\r\n    -->\r\n    <fb-paste-dialog\r\n      [payload]=\"preview.payload\"\r\n      [plan]=\"preview.plan\"\r\n      (confirmed)=\"confirmPaste($event)\"\r\n      (cancelled)=\"cancelPaste()\"\r\n    />\r\n  }\r\n\r\n  @if (isDialogMode() && isDialogOpen() && selectedName()) {\r\n    <!-- La dialog sta dentro il builder, non nel body: la libreria e\u2019 innestabile. -->\r\n    <fb-element-dialog\r\n      [selectedName]=\"selectedName()\"\r\n      (closed)=\"closeDialog()\"\r\n      (removeRequested)=\"onRemoveNode($event)\"\r\n      (duplicateRequested)=\"onDuplicateNode($event)\"\r\n      (renamed)=\"onNodeRenamed($event)\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;font:inherit;color:var(--fb-text, #1d2939)}.fb-builder{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--fb-border, #e2e5eb);background:var(--fb-surface, #fff)}.fb-top__identity{min-width:0}.fb-top__label{width:100%;max-width:420px;padding:2px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text, #1d2939);font:inherit;font-size:15px;font-weight:600}.fb-top__label:hover:not(:disabled),.fb-top__label:focus-visible{border-color:var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-top__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}.fb-top__name{width:180px;padding:1px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-top__name:hover:not(:disabled),.fb-top__name:focus-visible{border-color:var(--fb-border, #d6dae1)}.fb-top__process{padding:1px 4px;border:1px solid var(--fb-border-subtle, #e6e9ee);border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font:inherit;font-size:11px}.fb-top__status,.fb-top__version,.fb-top__dirty{padding:2px 7px;border-radius:999px;background:var(--fb-surface-sunken, #eef0f4);color:var(--fb-text-muted, #6b7086);font-size:10px;font-weight:600}.fb-top__version{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.fb-top__dirty{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-top__actions{display:flex;flex-wrap:wrap;gap:4px}.fb-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee);background:color-mix(in srgb,var(--fb-accent, #2f6feb) 7%,transparent);font-size:11px}.fb-banner--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-banner--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 10%,transparent);color:var(--fb-error, #c9372c)}.fb-banner>span{flex:1;min-width:200px}.fb-copy__field{display:flex;align-items:center;gap:6px}.fb-copy__caption{color:var(--fb-text-muted, #667085);white-space:nowrap}.fb-copy__input{width:180px;padding:2px 5px;border:1px solid var(--fb-border, #d6dae1);border-radius:4px;background:var(--fb-surface, #fff);color:var(--fb-text, #1d2939);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-copy__hint{flex:1;min-width:180px;color:var(--fb-text-muted, #667085)}.fb-copy__hint--error{color:var(--fb-error, #c9372c)}.fb-main{display:flex;flex:1;min-height:0}.fb-main__palette{flex:0 0 190px;min-width:0}.fb-main__center{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.fb-main__canvas{flex:1;min-height:0}.fb-main__problems{flex:0 0 auto;height:220px}.fb-main__problems-toggle{display:flex;align-items:center;gap:6px;padding:4px 12px;border:0;border-top:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface-alt, #f8f9fb);color:var(--fb-text-muted, #667085);font:inherit;font-size:11px;cursor:pointer}.fb-main__count{padding:0 5px;border-radius:8px;background:var(--fb-border, #d6dae1);font-size:9px;font-weight:700}.fb-main__count--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 16%,transparent);color:var(--fb-error, #c9372c)}.fb-main__count--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-main__side{display:flex;flex-direction:column;flex:0 0 340px;min-width:0;min-height:0;border-left:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-side__tabs{display:flex;gap:2px;margin:8px 10px;padding:3px;border-radius:var(--fb-radius, 10px);background:var(--fb-surface-sunken, #eef0f4)}.fb-side__tab{flex:1;padding:5px 8px;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-muted, #6b7086);font:inherit;font-size:11px;cursor:pointer;transition:background .12s ease,color .12s ease}.fb-side__tab:hover:not(.fb-side__tab--active){color:var(--fb-text, #1a1c23)}.fb-side__tab--active{background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));color:var(--fb-text, #1a1c23);font-weight:600}.fb-side__content{flex:1;min-height:0;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-side__content>*{height:100%}.fb-side__footer{display:flex;gap:6px;padding:6px 8px;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}@media(max-width:1200px){.fb-main__palette{flex-basis:150px}.fb-main__side{flex-basis:290px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { flowName: [{ type: i0.Input, args: [{ isSignal: true, alias: "flowName", required: false }] }], version: [{ type: i0.Input, args: [{ isSignal: true, alias: "version", required: false }] }], author: [{ type: i0.Input, args: [{ isSignal: true, alias: "author", required: false }] }], defaultProcessType: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultProcessType", required: false }] }], inspectorMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inspectorMode", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }], activated: [{ type: i0.Output, args: ["activated"] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }], copyNameInput: [{ type: i0.ViewChild, args: ['copyNameInput', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ConditionEditorComponent, ConnectorEditorComponent, DebugPanelComponent, DynamicScreenInspectorComponent, ElementDialogComponent, ElementInspectorComponent, ElementPaletteComponent, EnumValuePickerComponent, FALLBACK_COLLECTION_BY_TYPE, FALLBACK_TYPE_LABEL, FLOW_BUILDER_HTTP_CONFIG, FLOW_ELEMENT_ICONS, FLOW_ELEMENT_VARIANT_FIELDS, FLOW_ELEMENT_VARIANT_ICONS, FLOW_ERROR_FALLBACK_MESSAGE, FLOW_ERROR_HTTP_STATUS, FLOW_NAME_PATTERN, FLOW_NODE_COLLECTIONS, FLOW_NODE_HEIGHT, FLOW_NODE_WIDTH, FLOW_RESOURCE_COLLECTIONS, FLOW_VALUE_FIELDS, FLOW_VALUE_LITERAL_FIELDS, FieldAssignmentEditorComponent, FieldPickerComponent, FlowApiError, FlowBuilderApi, FlowBuilderComponent, FlowCanvasComponent, FlowCatalogStore, FlowDictionaryStore, FlowDocumentStore, FlowEditorSession, FlowLayoutService, FlowValidationStore, FormulaEditorComponent, FormulaValidationService, HttpFlowBuilderApi, NamePickerComponent, NodeInspectorBase, ORCHESTRATION_CONDITION_OUTPUT, ObjectPickerComponent, OrchestratedStageInspectorComponent, ParameterEditorComponent, ProblemsPanelComponent, RecordFilterEditorComponent, ReferencePickerComponent, ResourcePanelComponent, SEVERITY_BUCKETS, SEVERITY_ICON, SEVERITY_LABEL, START_NODE_NAME, SelectValueDirective, StartInspectorComponent, StructureMemberPickerComponent, StructurePickerComponent, TYPES_WITH_AUTOMATIC_OUTPUT, TYPE_BY_COLLECTION, UNSUPPORTED_TYPES, ValueEditorComponent, VersionPanelComponent, allFieldsOf, areTypesComparable, canvasNodeId, checkConditionLogic, checkFlowName, describePathEntry, duplicateField, elementIcon, emptyFlowDefinition, fieldAt, filterReferences, flattenFields, flowNodeWidth, flowNodeWidthClass, insertField, isCustomConditionLogic, isEmptyReferenceFilter, isFieldResource, isGlobalReference, isNumericType, isPathInside, isTypeCheckedOperator, isValidFlowName, isValued, loadPathLevel, matchesReferenceFilter, moveCondition, moveField, navigatePath, outletByKey, outletsOf, parseCanvasNodeId, parseInvariantNumber, parseSourceConnectorId, parseTargetConnectorId, pathAvailableNames, pathContainerLabel, pathKey, pathNotVerifiableMessage, referenceRoot, remapConditionLogic, removeCondition, removeField, resolvePath, samePath, screenActionNames, screenFieldNames, severityBucket, slugifyFlowName, sourceConnectorId, stageStepNames, stageStepOutputReferenced, stepsOf, targetConnectorId, uniqueFlowName, valuedFieldOf, valuedFieldsOf, variantFieldOf, variantOf, variantPresetOf };
+export { ConditionEditorComponent, ConnectorEditorComponent, DebugPanelComponent, DynamicScreenInspectorComponent, ElementDialogComponent, ElementInspectorComponent, ElementPaletteComponent, EnumValuePickerComponent, FALLBACK_COLLECTION_BY_TYPE, FALLBACK_TYPE_LABEL, FLOW_BUILDER_HTTP_CONFIG, FLOW_CLIPBOARD_KIND, FLOW_CLIPBOARD_VERSION, FLOW_ELEMENT_ICONS, FLOW_ELEMENT_VARIANT_FIELDS, FLOW_ELEMENT_VARIANT_ICONS, FLOW_ERROR_FALLBACK_MESSAGE, FLOW_ERROR_HTTP_STATUS, FLOW_NAME_PATTERN, FLOW_NODE_COLLECTIONS, FLOW_NODE_HEIGHT, FLOW_NODE_WIDTH, FLOW_REFERENCE_FIELDS, FLOW_RESOURCE_COLLECTIONS, FLOW_VALUE_FIELDS, FLOW_VALUE_LITERAL_FIELDS, FieldAssignmentEditorComponent, FieldPickerComponent, FlowApiError, FlowBuilderApi, FlowBuilderComponent, FlowCanvasComponent, FlowCatalogStore, FlowClipboardService, FlowDictionaryStore, FlowDocumentStore, FlowEditorSession, FlowLayoutService, FlowValidationStore, FormulaEditorComponent, FormulaValidationService, HttpFlowBuilderApi, NamePickerComponent, NodeInspectorBase, ORCHESTRATION_CONDITION_OUTPUT, ObjectPickerComponent, OrchestratedStageInspectorComponent, ParameterEditorComponent, PasteDialogComponent, ProblemsPanelComponent, RecordFilterEditorComponent, ReferencePickerComponent, ResourcePanelComponent, SEVERITY_BUCKETS, SEVERITY_ICON, SEVERITY_LABEL, START_NODE_NAME, SelectValueDirective, StartInspectorComponent, StructureMemberPickerComponent, StructurePickerComponent, TYPES_WITH_AUTOMATIC_OUTPUT, TYPE_BY_COLLECTION, UNSUPPORTED_TYPES, ValueEditorComponent, VersionPanelComponent, allFieldsOf, applyPaste, areTypesComparable, buildClipboardPayload, canvasNodeId, checkConditionLogic, checkFlowName, describePathEntry, duplicateField, elementIcon, emptyFlowDefinition, fieldAt, filterReferences, flattenFields, flowNodeWidth, flowNodeWidthClass, innerNamesOf, insertField, isClipboardPayload, isCustomConditionLogic, isEmptyReferenceFilter, isFieldResource, isGlobalReference, isNumericType, isPathInside, isTypeCheckedOperator, isValidFlowName, isValued, loadPathLevel, matchesReferenceFilter, moveCondition, moveField, navigatePath, outletByKey, outletsOf, parseCanvasNodeId, parseInvariantNumber, parseSourceConnectorId, parseTargetConnectorId, pathAvailableNames, pathContainerLabel, pathKey, pathNotVerifiableMessage, planPaste, referenceRoot, referencedRootsOf, remapConditionLogic, removeCondition, removeField, resolvePath, rewriteReferences, samePath, screenActionNames, screenFieldNames, severityBucket, slugifyFlowName, sourceConnectorId, stageStepNames, stageStepOutputReferenced, stepsOf, targetConnectorId, typeOfCollection, uniqueFlowName, valuedFieldOf, valuedFieldsOf, variantFieldOf, variantOf, variantPresetOf };
 //# sourceMappingURL=esfaenza-flow-builder.mjs.map