@esfaenza/flow-builder 20.3.14 → 20.3.15

package/fesm2022/esfaenza-flow-builder.mjs

@@ -5,6 +5,7 @@ import { firstValueFrom } from 'rxjs';
 import dagre from 'dagre';
 import * as i1 from '@foblex/flow';
 import { EFMarkerType, EFConnectableSide, FCanvasComponent, FFlowModule, provideFFlow, withA11y } from '@foblex/flow';
+import { CdkDrag, CdkDragHandle, CdkDropList } from '@angular/cdk/drag-drop';
 
 /**
  * Modello del documento Flow — FRONTEND.md §3, §4, §5.
@@ -22,6 +23,7 @@ import { EFMarkerType, EFConnectableSide, FCanvasComponent, FFlowModule, provide
 /** Le collection di node: `metadataProperty` del dizionario `elementTypes` (§3.2). */
 const FLOW_NODE_COLLECTIONS = [
     'screens',
+    'dynamicScreens',
     'assignments',
     'decisions',
     'loops',
@@ -712,6 +714,7 @@ function outletsOf(type, node) {
         case 'CustomError':
             return [];
         case 'Screen':
+        case 'DynamicScreen':
         case 'Assignment':
         case 'CollectionProcessor':
         case 'RecordRollback':
@@ -733,6 +736,7 @@ function outletByKey(type, node, key) {
  */
 const FALLBACK_COLLECTION_BY_TYPE = {
     Screen: 'screens',
+    DynamicScreen: 'dynamicScreens',
     Assignment: 'assignments',
     Decision: 'decisions',
     Loop: 'loops',
@@ -757,6 +761,7 @@ const TYPE_BY_COLLECTION = Object.fromEntries(Object.entries(FALLBACK_COLLECTION
 /** Etichette di fallback, se il dizionario non e' caricato. */
 const FALLBACK_TYPE_LABEL = {
     Screen: 'Screen',
+    DynamicScreen: 'Screen dinamico',
     Assignment: 'Assegnazione',
     Decision: 'Decisione',
     Loop: 'Ciclo',
@@ -799,6 +804,9 @@ const TYPES_WITH_AUTOMATIC_OUTPUT = new Set([
 const FLOW_ELEMENT_ICONS = {
     Start: '▶',
     Screen: '▤',
+    // Diverso da quello dello Screen a form: sul canvas i due elementi devono distinguersi
+    // a colpo d'occhio, perche' chi decide il layout e' l'unica differenza fra loro (§5.2).
+    DynamicScreen: '▦',
     Decision: '◆',
     Assignment: '=',
     Loop: '↻',
@@ -1315,6 +1323,198 @@ function stageStepOutputReferenced(reference, steps) {
  */
 const ORCHESTRATION_CONDITION_OUTPUT = 'isOrchestrationConditionMet';
 
+/**
+ * L'albero dei campi di uno screen dinamico — FRONTEND.md §5.2.
+ *
+ * Un campo puo' contenerne altri (`Region` dentro `RegionContainer`), quindi «il campo
+ * selezionato» non e' un indice ma un **percorso di indici**: `[1, 0, 2]` e' il terzo campo
+ * della prima colonna della seconda sezione. Tutto cio' che cammina l'albero sta qui, perche'
+ * inspector, store e outline lo fanno con la stessa regola e sbagliarne una copia significa
+ * scrivere in un campo diverso da quello che l'utente vede selezionato.
+ *
+ * L'altra ragione per cui questo file esiste: **i campi che raccolgono un valore sono risorse
+ * del flow** (§5.2). I loro nomi vivono nello stesso spazio dei nomi di node e risorse (§3.3),
+ * quindi `usedNames` dello store deve comprenderli — un campo omonimo di una variabile e'
+ * `NAME_DUPLICATED`, non una stranezza tollerata.
+ */
+/** Uguaglianza fra percorsi: due array diversi con gli stessi indici sono lo stesso campo. */
+function samePath(a, b) {
+    if (!a || !b || a.length !== b.length) {
+        return false;
+    }
+    return a.every((value, index) => value === b[index]);
+}
+/** `true` se `parent` e' un antenato di `path` (o lo stesso campo). */
+function isPathInside(parent, path) {
+    return parent.length <= path.length && parent.every((value, index) => value === path[index]);
+}
+/** Chiave stabile di un percorso: serve al `track` e agli id delle liste di trascinamento. */
+function pathKey(path) {
+    return path.join('.');
+}
+/** Il campo a un percorso, o `undefined` se il percorso non esiste piu'. */
+function fieldAt(fields, path) {
+    let list = fields;
+    let field;
+    for (const index of path) {
+        field = list?.[index];
+        if (!field) {
+            return undefined;
+        }
+        list = field.fields;
+    }
+    return field;
+}
+/** La lista che **contiene** un percorso, creandola se serve: serve a inserire e rimuovere. */
+function listOf(screen, parentPath, create) {
+    if (parentPath.length === 0) {
+        if (create) {
+            screen.fields ??= [];
+        }
+        return screen.fields;
+    }
+    const parent = fieldAt(screen.fields, parentPath);
+    if (!parent) {
+        return undefined;
+    }
+    if (create) {
+        parent.fields ??= [];
+    }
+    return parent.fields;
+}
+/** L'albero appiattito in ordine di visita, con profondita': e' l'elenco che si disegna. */
+function flattenFields(fields, parentPath = []) {
+    const result = [];
+    (fields ?? []).forEach((field, index) => {
+        const path = [...parentPath, index];
+        result.push({ field, path, depth: parentPath.length });
+        if (field.fields?.length) {
+            result.push(...flattenFields(field.fields, path));
+        }
+    });
+    return result;
+}
+/** Tutti i campi di uno screen, in ordine di visita. */
+function allFieldsOf(screen) {
+    return flattenFields(screen?.fields).map((node) => node.field);
+}
+/**
+ * I nomi dei campi di tutti gli screen dinamici del documento.
+ *
+ * Contenitori compresi: un `Region` non e' una risorsa — non raccoglie un valore — ma il suo
+ * nome resta un nome, e due campi omonimi nella stessa schermata sono comunque un problema.
+ * Chi vuole i **soli** riferimenti proponibili usa `isFieldResource`.
+ */
+function screenFieldNames(definition) {
+    const names = [];
+    for (const screen of definition?.dynamicScreens ?? []) {
+        for (const field of allFieldsOf(screen)) {
+            if (field.name) {
+                names.push(field.name);
+            }
+        }
+    }
+    return names;
+}
+/**
+ * §5.2 — il campo e' una risorsa del flow (`kind: "ScreenField"`), quindi referenziabile
+ * per nome ovunque e **di sola lettura**.
+ *
+ * Un `ComponentInstance` non lo e' pur essendo un campo: non ha un valore proprio, ce l'hanno
+ * i suoi output. Il flag `storesValue` arriva dal dizionario, che e' l'unica fonte autoritativa:
+ * senza la voce del dizionario si risponde `false`, cioe' "non lo so" — proporre un riferimento
+ * che il backend non conosce e' peggio che non proporlo.
+ */
+function isFieldResource(field, entry) {
+    return !!field?.name && entry?.storesValue === true;
+}
+// ---------------------------------------------------------------------------
+// Mutazioni (lavorano sulla copia di lavoro dello store)
+// ---------------------------------------------------------------------------
+/** Inserisce un campo dentro `parentPath` alla posizione indicata (in fondo se assente). */
+function insertField(screen, parentPath, field, index) {
+    const list = listOf(screen, parentPath, true);
+    if (!list) {
+        return undefined;
+    }
+    const position = index === undefined || index > list.length ? list.length : Math.max(0, index);
+    list.splice(position, 0, field);
+    return [...parentPath, position];
+}
+/** Rimuove il campo a un percorso, e con esso tutto cio' che conteneva. */
+function removeField(screen, path) {
+    if (path.length === 0) {
+        return;
+    }
+    const parentPath = path.slice(0, -1);
+    const list = listOf(screen, parentPath, false);
+    const index = path[path.length - 1];
+    list?.splice(index, 1);
+    if (list && list.length === 0) {
+        // Liste vuote omesse, non scritte come `[]` (§2).
+        if (parentPath.length === 0) {
+            delete screen.fields;
+        }
+        else {
+            delete fieldAt(screen.fields, parentPath)?.fields;
+        }
+    }
+}
+/**
+ * Sposta un campo dentro un'altra lista, a una posizione precisa.
+ *
+ * `toIndex` e' l'indice **dopo** l'estrazione, cioe' la stessa convenzione di
+ * `moveItemInArray` del CDK: e' l'indice che il drop del trascinamento consegna, e riallinearlo
+ * qui sposterebbe di uno ogni trascinamento verso il basso nella stessa lista.
+ *
+ * Uno spostamento dentro se stesso e' rifiutato: sposterebbe un contenitore dentro il proprio
+ * sottoalbero, e il sottoalbero sparirebbe con lui.
+ */
+function moveField(screen, from, toParent, toIndex) {
+    if (from.length === 0 || isPathInside(from, toParent)) {
+        return undefined;
+    }
+    const field = fieldAt(screen.fields, from);
+    if (!field) {
+        return undefined;
+    }
+    removeField(screen, from);
+    return insertField(screen, shiftAfterRemoval(from, toParent), field, toIndex);
+}
+/**
+ * Il percorso della destinazione **dopo** aver estratto il campo di partenza.
+ *
+ * Estrarre `[0]` fa scalare di uno i fratelli che seguivano: la sezione che era `[1]` ora e'
+ * `[0]`, e reinserire nel percorso vecchio significa scrivere dentro un contenitore diverso da
+ * quello su cui l'utente ha rilasciato. Riguarda solo i percorsi che **passano** dalla lista da
+ * cui si estrae, e solo gli indici successivi a quello estratto.
+ */
+function shiftAfterRemoval(from, toParent) {
+    const fromParent = from.slice(0, -1);
+    const fromIndex = from[from.length - 1];
+    if (toParent.length <= fromParent.length || !samePath(fromParent, toParent.slice(0, fromParent.length))) {
+        return toParent;
+    }
+    const shifted = [...toParent];
+    if (shifted[fromParent.length] > fromIndex) {
+        shifted[fromParent.length] -= 1;
+    }
+    return shifted;
+}
+/** Duplica un campo accanto all'originale, rinominandolo: i nomi restano unici (§3.3). */
+function duplicateField(screen, path, newName) {
+    const field = fieldAt(screen.fields, path);
+    if (!field) {
+        return undefined;
+    }
+    const copy = JSON.parse(JSON.stringify(field));
+    copy.name = newName;
+    // I figli non si rinominano: sarebbero nomi duplicati. Copiare un contenitore e' quindi un
+    // gesto da completare a mano, e l'editor lo dice invece di inventare dieci nomi.
+    delete copy.fields;
+    return insertField(screen, path.slice(0, -1), copy, path[path.length - 1] + 1);
+}
+
 /**
  * La gravita' di un rilievo, ridotta a tre secchi — FRONTEND.md §7.
  *
@@ -1811,15 +2011,18 @@ class FlowDocumentStore {
         return result;
     }, ...(ngDevMode ? [{ debugName: "resources" }] : []));
     /**
-     * §3.3 — l'insieme dei nomi già usati: node, risorse **e** step di orchestrazione, un unico
-     * spazio di nomi. Il controllo di unicita' che guarda solo le variabili lascia passare una
-     * variabile omonima di un node (§13.5); quello che dimentica gli step lascia passare uno
-     * step omonimo di una variabile, che e' `NAME_DUPLICATED` allo stesso modo (§5.13).
+     * §3.3 — l'insieme dei nomi già usati: node, risorse, step di orchestrazione **e campi di
+     * screen dinamico**, un unico spazio di nomi. Il controllo di unicita' che guarda solo le
+     * variabili lascia passare una variabile omonima di un node (§13.5); quello che dimentica gli
+     * step lascia passare uno step omonimo di una variabile (§5.13); quello che dimentica i campi
+     * lascia passare un campo omonimo di una variabile, che e' `NAME_DUPLICATED` come gli altri
+     * — e lì il danno e' peggiore, perche' un campo **e' un riferimento** (§5.2).
      */
     usedNames = computed(() => [
         ...this.nodes().map((reference) => reference.name),
         ...this.resources().map((reference) => reference.name),
         ...stageStepNames(this._document()),
+        ...screenFieldNames(this._document()),
     ], ...(ngDevMode ? [{ debugName: "usedNames" }] : []));
     /** Gli archi derivati dal documento, Start incluso. */
     edges = computed(() => {
@@ -2051,6 +2254,37 @@ class FlowDocumentStore {
             FlowDocumentStore.rewriteReferences(draft, oldName, newName);
         });
     }
+    /**
+     * §5.2 — rinomina un campo di screen dinamico riscrivendo i riferimenti che lo usano.
+     *
+     * Un campo che raccoglie un valore **e' una risorsa** referenziabile per nome: rinominarlo
+     * senza riscrivere le condizioni e le assegnazioni che lo citano lascia dei
+     * `REFERENCE_UNKNOWN` che si scoprono solo alla validazione. Vale la stessa regola dei node
+     * (§13.8): nessuna primitiva del backend lo fa, lo fa l'editor.
+     */
+    renameScreenField(nodeName, path, newName) {
+        const reference = this.nodeByName().get(nodeName);
+        if (!reference || !newName) {
+            return;
+        }
+        // Una sola `update`, non `updateNode` piu' una riscrittura: annidare due update farebbe
+        // ripartire la seconda dal documento **precedente**, buttando via la rinomina.
+        this.update((draft) => {
+            const list = draft[reference.collection];
+            const screen = list?.[reference.index];
+            const field = fieldAt(screen?.fields, path);
+            if (!field || field.name === newName) {
+                return;
+            }
+            const oldName = field.name;
+            field.name = newName;
+            if (oldName) {
+                // La riscrittura cammina l'intero documento: il campo puo' essere referenziato da
+                // qualunque elemento successivo, non solo da questo screen.
+                FlowDocumentStore.rewriteReferences(draft, oldName, newName);
+            }
+        });
+    }
     /** Rinomina una risorsa, riscrivendo i riferimenti che la usano. */
     renameResource(collection, index, newName) {
         this.update((draft) => {
@@ -2286,6 +2520,42 @@ class FlowDictionaryStore {
     stageStepTypes = computed(() => this._dictionaries().stageStepTypes ?? [], ...(ngDevMode ? [{ debugName: "stageStepTypes" }] : []));
     assigneeTypes = computed(() => this._dictionaries().assigneeTypes ?? [], ...(ngDevMode ? [{ debugName: "assigneeTypes" }] : []));
     conditionLogicModes = computed(() => this._dictionaries().conditionLogicModes ?? [], ...(ngDevMode ? [{ debugName: "conditionLogicModes" }] : []));
+    regionContainerTypes = computed(() => this._dictionaries().regionContainerTypes ?? [], ...(ngDevMode ? [{ debugName: "regionContainerTypes" }] : []));
+    screenFieldInputsRevisited = computed(() => this._dictionaries().screenFieldInputsRevisited ?? [], ...(ngDevMode ? [{ debugName: "screenFieldInputsRevisited" }] : []));
+    /** §5.2 — i tipi di campo di uno screen dinamico, con i flag che guidano il form. */
+    screenFieldTypes = computed(() => this._dictionaries().screenFieldTypes ?? [], ...(ngDevMode ? [{ debugName: "screenFieldTypes" }] : []));
+    /**
+     * La voce di un tipo di campo. **Non c'e' un fallback cablato**, di proposito: i flag sono gli
+     * stessi che applica il runtime (§5.2, §6.4), e indovinarli qui vorrebbe dire proporre una
+     * configurazione che il motore rifiuta. Voce assente = nessun flag, cioe' il form mostra i soli
+     * campi comuni e lascia decidere al backend.
+     */
+    screenFieldType(value) {
+        if (!value) {
+            return undefined;
+        }
+        return this.screenFieldTypes().find((entry) => entry.value === value);
+    }
+    /** §5.2 — il campo raccoglie un valore: e' una risorsa, e vuole tipo, default, … */
+    screenFieldStoresValue(value) {
+        return this.screenFieldType(value)?.storesValue ?? false;
+    }
+    /** §5.2 — il campo contiene altri campi: `Region`, `RegionContainer`. */
+    screenFieldIsContainer(value) {
+        return this.screenFieldType(value)?.isContainer ?? false;
+    }
+    /** §5.2 — il campo si configura con `choiceReferences`. */
+    screenFieldAcceptsChoices(value) {
+        return this.screenFieldType(value)?.acceptsChoices ?? false;
+    }
+    /** §5.2 — `dataType` obbligatorio: senza, `DATA_TYPE_MISSING`. */
+    screenFieldRequiresDataType(value) {
+        return this.screenFieldType(value)?.requiresDataType ?? false;
+    }
+    /** §5.2 — il valore raccolto e' una collection: contano gli operatori di collection. */
+    screenFieldIsCollection(value) {
+        return this.screenFieldType(value)?.isCollection ?? false;
+    }
     elementTypes = computed(() => this._dictionaries().elementTypes ?? [], ...(ngDevMode ? [{ debugName: "elementTypes" }] : []));
     /**
      * I tipi mostrabili nella palette: `isSupported: false` va nascosto (§3.2, §13.9).
@@ -3781,9 +4051,14 @@ class ElementPaletteComponent {
     pick(item) {
         this.elementPicked.emit(item.data);
     }
-    /** Uno screen in un flow che non mostra nulla: si segnala, non si nasconde (§3.1). */
+    /**
+     * Uno screen in un flow che non mostra nulla: si segnala, non si nasconde (§3.1). Vale per
+     * entrambi i tipi di screen — quello a form e quello dinamico sono la stessa interazione con
+     * l'utente, e in un flow `AutoLaunched` non c'e' nessuno a cui mostrarli.
+     */
     isIncompatible(item) {
-        return item.entry.value === 'Screen' && this.processType() === 'AutoLaunched';
+        const isScreen = item.entry.value === 'Screen' || item.entry.value === 'DynamicScreen';
+        return isScreen && this.processType() === 'AutoLaunched';
     }
     /**
      * Il testo del tooltip. Su una voce che nasce da una variante ci va anche il nome del tipo:
@@ -4375,6 +4650,9 @@ class ReferencePickerComponent {
                 return 'Dynamic choice set';
             case 'Stage':
                 return 'Stage';
+            // §5.2 — nasce dichiarando un campo di screen dinamico, non da una collection di risorse.
+            case 'ScreenField':
+                return 'Campi di schermata';
             case 'ElementOutput':
                 return 'Output di elementi';
             case 'StructureMember':
@@ -7239,6 +7517,585 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
             args: [{ selector: 'fb-decision-inspector', standalone: true, imports: [ConditionEditorComponent, ConnectorEditorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p class=\"fb-callout\">\r\n  Le regole sono valutate <strong>dall\u2019alto verso il basso</strong> e si ferma alla prima vera. L\u2019ordine e\u2019\r\n  parte del significato del flow: usa le frecce per cambiarlo.\r\n</p>\r\n\r\n<div class=\"fb-list\">\r\n  @for (rule of rules(); track $index) {\r\n    <div class=\"fb-list__item\">\r\n      <div class=\"fb-list__header\">\r\n        <span class=\"fb-list__index\" [title]=\"'Valutata per ' + ($index + 1) + '\u00AA'\">{{ $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=\"Valuta prima\"\r\n          [disabled]=\"$first\"\r\n          (click)=\"moveRule($index, -1)\"\r\n        >\r\n          \u2191\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn fb-btn--ghost fb-btn--icon\"\r\n          aria-label=\"Valuta dopo\"\r\n          [disabled]=\"$last\"\r\n          (click)=\"moveRule($index, 1)\"\r\n        >\r\n          \u2193\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn fb-btn--ghost fb-btn--icon\"\r\n          aria-label=\"Rimuovi la regola\"\r\n          (click)=\"removeRule($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\">Etichetta del ramo</label>\r\n        <input\r\n          class=\"fb-input\"\r\n          [value]=\"rule.label || ''\"\r\n          placeholder=\"Approvato\"\r\n          (input)=\"setRuleLabel($index, $any($event.target).value)\"\r\n        />\r\n        @if (!rule.label) {\r\n          <p class=\"fb-field__hint\">Senza etichetta l\u2019arco resta senza nome sul canvas.</p>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label fb-field__label--required\">Nome tecnico</label>\r\n        <input\r\n          class=\"fb-input fb-input--mono\"\r\n          [class.fb-input--invalid]=\"!!ruleNameError($index)\"\r\n          [value]=\"rule.name || ''\"\r\n          (input)=\"setRuleName($index, $any($event.target).value)\"\r\n        />\r\n        @if (ruleNameError($index)) {\r\n          <p class=\"fb-field__error\">{{ ruleNameError($index) }}</p>\r\n        }\r\n      </div>\r\n\r\n      <fb-condition-editor\r\n        [holder]=\"rule\"\r\n        title=\"Quando prendere questo ramo\"\r\n        [issuePath]=\"'rules[' + (rule.name || $index) + ']'\"\r\n        (changed)=\"onRuleConditionsChanged($index, $event)\"\r\n      />\r\n    </div>\r\n  } @empty {\r\n    <p class=\"fb-empty\">\r\n      Nessuna regola: una Decision senza regole prende sempre il ramo di default\r\n      (DECISION_WITHOUT_RULES).\r\n    </p>\r\n  }\r\n</div>\r\n\r\n<button type=\"button\" class=\"fb-btn\" (click)=\"addRule()\">Aggiungi regola</button>\r\n\r\n<fieldset class=\"fb-section\">\r\n  <legend class=\"fb-section__title\">Se nessuna regola e\u2019 vera</legend>\r\n  <div class=\"fb-field\">\r\n    <label class=\"fb-field__label\">Etichetta del ramo di default</label>\r\n    <input\r\n      class=\"fb-input\"\r\n      [value]=\"defaultLabel()\"\r\n      placeholder=\"Rifiutato\"\r\n      (input)=\"setDefaultLabel($any($event.target).value)\"\r\n    />\r\n  </div>\r\n  @if (!hasDefaultTarget()) {\r\n    <p class=\"fb-field__hint\">\r\n      Nessuna destinazione di default: se nessuna regola e\u2019 vera l\u2019esecuzione finisce qui.\r\n    </p>\r\n  }\r\n</fieldset>\r\n\r\n<fb-connector-editor\r\n  [nodeName]=\"name()\"\r\n  [node]=\"node()\"\r\n  [outlets]=\"outlets()\"\r\n  title=\"Rami\"\r\n  (connectorChanged)=\"onConnectorChanged($event)\"\r\n/>\r\n" }]
         }] });
 
+/**
+ * Screen dinamico — FRONTEND.md §5.2.
+ *
+ * A differenza dello Screen a form (§5.1), qui la schermata **la compone il flow**: l'inspector
+ * e' quindi un compositore, non un form di quattro campi. Due pannelli: a sinistra l'albero dei
+ * campi con la griglia, a destra le proprieta' del campo selezionato.
+ *
+ * Le cose che questo componente fa di proposito, e che un editor piu' ingenuo sbaglia:
+ *
+ *  1. **Quali campi mostrare lo decide il dizionario, non il codice.** `screenFieldTypes` porta
+ *     `storesValue`, `isCollection`, `acceptsChoices`, `isContainer`, `requiresDataType` (§6.4),
+ *     e sono gli **stessi** flag che applica il runtime: reimplementarli qui vorrebbe dire
+ *     proporre configurazioni che il motore rifiuta.
+ *  2. **Un campo che raccoglie un valore e' una risorsa del flow** (§5.2): il suo nome vive
+ *     nello spazio dei nomi comune (§3.3) e rinominarlo riscrive i riferimenti — se ne occupa
+ *     `FlowDocumentStore.renameScreenField`, perche' nessuna primitiva del backend lo fa (§13.8).
+ *     Per questo il nome si applica sul `change` (uscita dal campo), non a ogni tasto: una
+ *     riscrittura per lettera digitata sarebbe una riscrittura del documento per lettera.
+ *  3. **I campi sono di sola lettura per il flow**: non si offre nessuna destinazione su di
+ *     essi, e il default e' un valore, non un'assegnazione.
+ *  4. **`choiceReferences` accetta solo `Choice` e `DynamicChoiceSet`** (§5.2): puntare a una
+ *     variabile e' `SCREEN_FIELD_CHOICE_UNKNOWN`, quindi l'elenco proposto e' filtrato sulle due
+ *     collection e non sui riferimenti in generale.
+ *  5. **Il trascinamento e' del CDK.** L'annidamento previsto e' sezione → colonne → campi, e
+ *     lo spostamento dentro il proprio sottoalbero e' rifiutato da `moveField`: un contenitore
+ *     trascinato dentro se stesso porterebbe via tutto quello che contiene.
+ */
+class DynamicScreenInspectorComponent extends NodeInspectorBase {
+    catalog = inject(FlowCatalogStore);
+    dictionary = inject(FlowDictionaryStore);
+    elementType = 'DynamicScreen';
+    screen = computed(() => this.node(), ...(ngDevMode ? [{ debugName: "screen" }] : []));
+    /** Il percorso del campo selezionato: `null` = nessuno, e il pannello destro lo dice. */
+    selection = signal(null, ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    /** L'albero appiattito: e' anche cio' che serve per capire quali percorsi esistono ancora. */
+    tree = computed(() => flattenFields(this.screen().fields), ...(ngDevMode ? [{ debugName: "tree" }] : []));
+    selectedPath = computed(() => {
+        const path = this.selection();
+        if (!path) {
+            return null;
+        }
+        // Il campo puo' essere sparito (annulla, eliminazione altrove): una selezione che punta a
+        // un percorso inesistente mostrerebbe le proprieta' di un altro campo.
+        return fieldAt(this.screen().fields, path) ? path : null;
+    }, ...(ngDevMode ? [{ debugName: "selectedPath" }] : []));
+    selectedField = computed(() => {
+        const path = this.selectedPath();
+        return path ? fieldAt(this.screen().fields, path) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "selectedField" }] : []));
+    /** La voce di dizionario del campo selezionato: e' lei a decidere il form di destra. */
+    selectedType = computed(() => this.dictionary.screenFieldType(this.selectedField()?.fieldType), ...(ngDevMode ? [{ debugName: "selectedType" }] : []));
+    // -------------------------------------------------------------------------
+    // Cataloghi
+    // -------------------------------------------------------------------------
+    /** Componenti e form sono la stessa domanda al frontend, e lo stesso catalogo (§5.2). */
+    components = signal([], ...(ngDevMode ? [{ debugName: "components" }] : []));
+    componentParameters = signal([], ...(ngDevMode ? [{ debugName: "componentParameters" }] : []));
+    /** I tipi di enumerazione: dizionario chiuso, quindi `<select>` e non combo (§4.6). */
+    enumTypes = signal([], ...(ngDevMode ? [{ debugName: "enumTypes" }] : []));
+    constructor() {
+        super();
+        void this.catalog
+            .listForms()
+            .then((list) => this.components.set(list ?? []))
+            .catch(() => this.components.set([]));
+        void this.catalog
+            .listEnumTypes()
+            .then((list) => this.enumTypes.set(list ?? []))
+            .catch(() => this.enumTypes.set([]));
+        effect(() => {
+            const extensionName = this.selectedField()?.extensionName;
+            if (!extensionName) {
+                this.componentParameters.set([]);
+                return;
+            }
+            void this.catalog
+                .listFormParameters(extensionName)
+                .then((list) => this.componentParameters.set(list ?? []))
+                .catch(() => this.componentParameters.set([]));
+        });
+    }
+    componentOptions = computed(() => this.components(), ...(ngDevMode ? [{ debugName: "componentOptions" }] : []));
+    enumOptions = computed(() => this.enumTypes(), ...(ngDevMode ? [{ debugName: "enumOptions" }] : []));
+    componentParameterList = computed(() => this.componentParameters(), ...(ngDevMode ? [{ debugName: "componentParameterList" }] : []));
+    /**
+     * Le choice proponibili: **solo** `choices` e `dynamicChoiceSets` (§5.2). Un elenco costruito
+     * dai riferimenti in generale farebbe scegliere una variabile, che e'
+     * `SCREEN_FIELD_CHOICE_UNKNOWN`.
+     */
+    choiceOptions = computed(() => {
+        const document = this.store.document();
+        const options = [];
+        for (const choice of document.choices ?? []) {
+            options.push({ name: choice.name ?? '', label: choice.choiceText ?? null, description: 'Choice' });
+        }
+        for (const set of document.dynamicChoiceSets ?? []) {
+            options.push({
+                name: set.name ?? '',
+                label: set.object ? `da ${set.object}` : null,
+                description: 'Dynamic choice set',
+            });
+        }
+        return options.filter((option) => option.name);
+    }, ...(ngDevMode ? [{ debugName: "choiceOptions" }] : []));
+    /** Gli stage dichiarati: `stageReference` alimenta l'indicatore di avanzamento (§5.2). */
+    stageOptions = computed(() => (this.store.document().stages ?? [])
+        .filter((stage) => stage.name)
+        .map((stage) => ({ name: stage.name, label: stage.label ?? null })), ...(ngDevMode ? [{ debugName: "stageOptions" }] : []));
+    // -------------------------------------------------------------------------
+    // Lettura dell'albero
+    // -------------------------------------------------------------------------
+    icon = elementIcon('DynamicScreen');
+    isSelected(path) {
+        return samePath(this.selectedPath(), path);
+    }
+    isContainer(field) {
+        return this.dictionary.screenFieldIsContainer(field?.fieldType);
+    }
+    /** L'etichetta mostrata nell'albero: `fieldText`, poi il nome, poi un segnaposto. */
+    captionOf(field) {
+        return field.fieldText || field.name || '(senza nome)';
+    }
+    typeLabelOf(field) {
+        return this.dictionary.screenFieldType(field.fieldType)?.label ?? field.fieldType ?? '—';
+    }
+    /** La larghezza in dodicesimi: assente = tutta la riga, che e' il comportamento di default. */
+    widthOf(field) {
+        return field.width ?? 12;
+    }
+    /** `true` dove il tipo non e' nel dizionario: il form di destra lo dice invece di indovinare. */
+    isUnknownType(field) {
+        return !!field?.fieldType && !this.dictionary.screenFieldType(field.fieldType);
+    }
+    /** Il campo raccoglie un valore, quindi e' referenziabile per nome nel resto del flow (§5.2). */
+    selectedIsResource = computed(() => this.selectedType()?.storesValue === true, ...(ngDevMode ? [{ debugName: "selectedIsResource" }] : []));
+    /**
+     * §5.2 — uno screen senza campi non ha niente da mostrare (`SCREEN_WITHOUT_FIELDS`), e uno
+     * senza destinazione che non consente «fine» e' un vicolo cieco (`SCREEN_DEAD_END`). Si dicono
+     * qui prima che lo dica la validazione.
+     */
+    isEmpty = computed(() => !this.screen().fields?.length, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
+    isDeadEnd = computed(() => {
+        const screen = this.screen();
+        return !screen.connector?.targetReference && screen.allowFinish === false;
+    }, ...(ngDevMode ? [{ debugName: "isDeadEnd" }] : []));
+    allowBack = computed(() => this.screen().allowBack !== false, ...(ngDevMode ? [{ debugName: "allowBack" }] : []));
+    allowFinish = computed(() => this.screen().allowFinish !== false, ...(ngDevMode ? [{ debugName: "allowFinish" }] : []));
+    allowPause = computed(() => this.screen().allowPause !== false, ...(ngDevMode ? [{ debugName: "allowPause" }] : []));
+    showHeader = computed(() => this.screen().showHeader !== false, ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
+    showFooter = computed(() => this.screen().showFooter !== false, ...(ngDevMode ? [{ debugName: "showFooter" }] : []));
+    /** §5.2 — `isEditable` ha default `true`: a `false` il runtime ignora cio' che torna. */
+    selectedIsEditable = computed(() => this.selectedField()?.isEditable !== false, ...(ngDevMode ? [{ debugName: "selectedIsEditable" }] : []));
+    selectedIsRequired = computed(() => this.selectedField()?.isRequired === true, ...(ngDevMode ? [{ debugName: "selectedIsRequired" }] : []));
+    /**
+     * §5.2 — `storeOutputAutomatically` **insieme** a `outputParameters` e'
+     * `OUTPUT_CONFIGURATION_CONFLICT`: la coppia si mostra come esclusiva, non come due caselle.
+     */
+    hasOutputConflict = computed(() => {
+        const field = this.selectedField();
+        return field?.storeOutputAutomatically === true && (field.outputParameters?.length ?? 0) > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasOutputConflict" }] : []));
+    /** §5.2 — la choice di default fuori dall'elenco e' un avviso, non un errore. */
+    defaultChoiceIsForeign = computed(() => {
+        const field = this.selectedField();
+        const value = field?.defaultSelectedChoiceReference;
+        return !!value && !(field?.choiceReferences ?? []).includes(value);
+    }, ...(ngDevMode ? [{ debugName: "defaultChoiceIsForeign" }] : []));
+    /** §5.2 — `scale` su un campo non numerico e' `SCALE_NOT_APPLICABLE`. */
+    scaleApplies = computed(() => this.dictionary.supportsScale(this.selectedField()?.dataType), ...(ngDevMode ? [{ debugName: "scaleApplies" }] : []));
+    requiresObjectType = computed(() => this.dictionary.requiresObjectType(this.selectedField()?.dataType), ...(ngDevMode ? [{ debugName: "requiresObjectType" }] : []));
+    objectTypeIsStructure = computed(() => this.dictionary.isStructure(this.selectedField()?.dataType), ...(ngDevMode ? [{ debugName: "objectTypeIsStructure" }] : []));
+    /** L'oggetto di un `ObjectProvided`, cioe' la parte prima del punto (§5.2). */
+    providedObject = computed(() => {
+        const reference = this.selectedField()?.objectFieldReference ?? '';
+        const dot = reference.indexOf('.');
+        return dot < 0 ? reference : reference.slice(0, dot);
+    }, ...(ngDevMode ? [{ debugName: "providedObject" }] : []));
+    providedField = computed(() => {
+        const reference = this.selectedField()?.objectFieldReference ?? '';
+        const dot = reference.indexOf('.');
+        return dot < 0 ? '' : reference.slice(dot + 1);
+    }, ...(ngDevMode ? [{ debugName: "providedField" }] : []));
+    // -------------------------------------------------------------------------
+    // Mutazioni sull'albero
+    // -------------------------------------------------------------------------
+    select(path) {
+        this.selection.set([...path]);
+    }
+    /** Aggiunge un campo dentro il contenitore selezionato, o in fondo alla schermata. */
+    addField(type) {
+        const parent = this.parentForNewField();
+        const base = this.dictionary.screenFieldType(type)?.label ?? type;
+        const name = uniqueFlowName(base, this.store.usedNames());
+        const field = { name, fieldType: type };
+        if (this.dictionary.screenFieldStoresValue(type) && this.dictionary.screenFieldRequiresDataType(type)) {
+            // Il tipo e' obbligatorio (`DATA_TYPE_MISSING`): nascere con `String` evita di
+            // presentare come completo un campo che non lo e'. Resta cambiabile.
+            field.dataType = 'String';
+        }
+        if (!this.dictionary.screenFieldIsContainer(type)) {
+            field.fieldText = base;
+        }
+        let created;
+        this.patch((node) => {
+            created = insertField(node, parent, field);
+        });
+        if (created) {
+            this.selection.set(created);
+        }
+    }
+    /**
+     * Dove finisce un campo nuovo: dentro il contenitore selezionato (o dentro il contenitore
+     * che contiene il campo selezionato), altrimenti in fondo alla schermata. È il gesto che
+     * l'utente si aspetta dopo aver cliccato una colonna.
+     */
+    parentForNewField() {
+        const path = this.selectedPath();
+        if (!path) {
+            return [];
+        }
+        return this.isContainer(this.selectedField()) ? path : path.slice(0, -1);
+    }
+    removeSelected() {
+        const path = this.selectedPath();
+        if (!path) {
+            return;
+        }
+        this.patch((node) => removeField(node, path));
+        this.selection.set(null);
+    }
+    duplicateSelected() {
+        const path = this.selectedPath();
+        const field = this.selectedField();
+        if (!path || !field) {
+            return;
+        }
+        const name = uniqueFlowName(field.name || 'Campo', this.store.usedNames());
+        let created;
+        this.patch((node) => {
+            created = duplicateField(node, path, name);
+        });
+        if (created) {
+            this.selection.set(created);
+        }
+    }
+    /**
+     * Spostamento con i tasti: la stessa operazione del trascinamento, per chi non trascina e per
+     * i casi in cui la lista e' piu' alta del pannello.
+     */
+    moveSelected(direction) {
+        const path = this.selectedPath();
+        if (!path) {
+            return;
+        }
+        const parent = path.slice(0, -1);
+        const index = path[path.length - 1];
+        const siblings = parent.length
+            ? (fieldAt(this.screen().fields, parent)?.fields ?? [])
+            : (this.screen().fields ?? []);
+        const target = index + direction;
+        if (target < 0 || target >= siblings.length) {
+            return;
+        }
+        this.applyMove(path, parent, target);
+    }
+    /**
+     * Sposta il campo dentro il contenitore che lo precede. È la controparte esplicita del
+     * trascinamento: dove l'albero e' lungo, mirare la riga giusta costa piu' di un clic.
+     */
+    indentSelected() {
+        const target = this.indentTarget();
+        const path = this.selectedPath();
+        if (!path || !target) {
+            return;
+        }
+        this.applyMove(path, target, (fieldAt(this.screen().fields, target)?.fields?.length ?? 0));
+    }
+    /** Il contenitore in cui «porta dentro» metterebbe il campo, o `null` se non ce n'e' uno. */
+    indentTarget = computed(() => {
+        const path = this.selectedPath();
+        if (!path || path[path.length - 1] === 0) {
+            // Primo della sua lista: non ha un fratello precedente in cui entrare.
+            return null;
+        }
+        const previous = [...path.slice(0, -1), path[path.length - 1] - 1];
+        return this.isContainer(fieldAt(this.screen().fields, previous)) ? previous : null;
+    }, ...(ngDevMode ? [{ debugName: "indentTarget" }] : []));
+    /** Estrae il campo dal proprio contenitore e lo mette subito dopo di esso. */
+    outdentSelected() {
+        const path = this.selectedPath();
+        if (!path || path.length < 2) {
+            return;
+        }
+        const grandParent = path.slice(0, -2);
+        const parentIndex = path[path.length - 2];
+        this.applyMove(path, grandParent, parentIndex + 1);
+    }
+    /**
+     * Rilascio del trascinamento sulla lista **piatta**.
+     *
+     * Il contenitore di arrivo non lo dice il CDK — c'e' una sola lista — ma si deduce dalla riga
+     * che **precede** il punto di rilascio, che e' anche cio' che l'utente vede: rilasciare subito
+     * sotto una sezione o una colonna significa «mettilo dentro»; rilasciare sotto un campo
+     * normale significa «mettilo accanto». Sono le due sole intenzioni possibili.
+     */
+    onDrop(event) {
+        const nodes = this.tree();
+        const dragged = nodes[event.previousIndex];
+        if (!dragged) {
+            return;
+        }
+        const from = dragged.path;
+        // L'elenco come lo vede il CDK al momento del rilascio: senza la riga trascinata.
+        const withoutDragged = nodes.filter((_, index) => index !== event.previousIndex);
+        let before;
+        for (let index = event.currentIndex - 1; index >= 0; index -= 1) {
+            const candidate = withoutDragged[index];
+            // Le righe del proprio sottoalbero non sono un ancoraggio valido: e' lì che il campo
+            // finirebbe dentro se stesso.
+            if (candidate && !isPathInside(from, candidate.path)) {
+                before = candidate;
+                break;
+            }
+        }
+        if (!before) {
+            // Rilasciato in cima: primo campo della schermata.
+            this.applyMove(from, [], 0, true);
+            return;
+        }
+        if (this.isContainer(before.field)) {
+            this.applyMove(from, before.path, 0, true);
+            return;
+        }
+        this.applyMove(from, before.path.slice(0, -1), before.path[before.path.length - 1] + 1, true);
+    }
+    /**
+     * `preRemoval` distingue le due convenzioni sull'indice di arrivo: i comandi (su, giu',
+     * porta fuori) ragionano sulla lista **dopo** l'estrazione, il rilascio ragiona su cio' che
+     * si vedeva **prima**. Confonderle sposta di uno ogni trascinamento verso il basso.
+     */
+    applyMove(from, toParent, toIndex, preRemoval = false) {
+        const fromParent = from.slice(0, -1);
+        const target = preRemoval && samePath(fromParent, toParent) && from[from.length - 1] < toIndex
+            ? toIndex - 1
+            : toIndex;
+        let moved;
+        this.patch((node) => {
+            moved = moveField(node, from, toParent, target);
+        });
+        if (moved) {
+            this.selection.set(moved);
+        }
+    }
+    // -------------------------------------------------------------------------
+    // Mutazioni sul campo selezionato
+    // -------------------------------------------------------------------------
+    /** Scrive una proprieta' del campo selezionato; valore vuoto → chiave omessa (§2). */
+    patchField(mutate) {
+        const path = this.selectedPath();
+        if (!path) {
+            return;
+        }
+        this.patch((node) => {
+            const field = fieldAt(node.fields, path);
+            if (field) {
+                mutate(field);
+            }
+        });
+    }
+    setFieldProperty(property, value) {
+        this.patchField((field) => {
+            if (value === undefined || value === null || value === '') {
+                delete field[property];
+            }
+            else {
+                field[property] = value;
+            }
+        });
+    }
+    /**
+     * Il nome si applica sull'uscita dal campo e passa da `renameScreenField`: il campo e' una
+     * risorsa, quindi la rinomina deve riscrivere i riferimenti che lo citano (§5.2, §13.8).
+     */
+    setFieldName(value) {
+        const path = this.selectedPath();
+        const trimmed = value.trim();
+        if (!path || !trimmed || trimmed === this.selectedField()?.name) {
+            return;
+        }
+        this.store.renameScreenField(this.name(), path, trimmed);
+    }
+    /**
+     * Cambiare tipo **ripulisce** cio' che il tipo nuovo non prevede: choice su una textarea o un
+     * `dataType` su un `DisplayText` sono `SCREEN_FIELD_CONFIGURATION_INVALID`, e lasciarli nel
+     * documento significa lasciare un errore invisibile nell'editor.
+     */
+    setFieldType(type) {
+        const entry = this.dictionary.screenFieldType(type);
+        this.patchField((field) => {
+            field.fieldType = type;
+            if (!entry?.storesValue) {
+                delete field.dataType;
+                delete field.objectType;
+                delete field.isRequired;
+                delete field.isEditable;
+                delete field.defaultValue;
+                delete field.scale;
+                delete field.maxLength;
+                delete field.validationRule;
+                delete field.inputsOnNextNavToAssocScrn;
+            }
+            if (!entry?.acceptsChoices) {
+                delete field.choiceReferences;
+                delete field.defaultSelectedChoiceReference;
+            }
+            if (!entry?.isContainer) {
+                delete field.fields;
+                delete field.regionContainerType;
+            }
+            if (type !== 'ComponentInstance') {
+                delete field.extensionName;
+                delete field.inputParameters;
+                delete field.outputParameters;
+                delete field.storeOutputAutomatically;
+            }
+            if (type !== 'ObjectProvided') {
+                delete field.objectFieldReference;
+            }
+        });
+    }
+    setDefaultValue(value) {
+        this.patchField((field) => {
+            field.defaultValue = value;
+        });
+    }
+    setNumberProperty(property, raw) {
+        const parsed = Number(raw);
+        this.setFieldProperty(property, raw === '' || Number.isNaN(parsed) ? undefined : parsed);
+    }
+    /** `isRequired` si scrive solo quando e' vero: il default e' facoltativo. */
+    setRequired(value) {
+        this.patchField((field) => {
+            if (value) {
+                field.isRequired = true;
+            }
+            else {
+                delete field.isRequired;
+            }
+        });
+    }
+    /** `isEditable` ha default `true`: si scrive solo il `false`, che e' la scelta significativa. */
+    setEditable(value) {
+        this.patchField((field) => {
+            if (value) {
+                delete field.isEditable;
+            }
+            else {
+                field.isEditable = false;
+            }
+        });
+    }
+    addChoice(name) {
+        if (!name) {
+            return;
+        }
+        this.patchField((field) => {
+            field.choiceReferences ??= [];
+            if (!field.choiceReferences.includes(name)) {
+                // L'ordine e' quello di presentazione delle opzioni (§5.2): si aggiunge in fondo.
+                field.choiceReferences.push(name);
+            }
+        });
+    }
+    removeChoice(index) {
+        this.patchField((field) => {
+            field.choiceReferences?.splice(index, 1);
+            if (!field.choiceReferences?.length) {
+                delete field.choiceReferences;
+            }
+        });
+    }
+    moveChoice(index, direction) {
+        const target = index + direction;
+        this.patchField((field) => {
+            const list = field.choiceReferences;
+            if (!list || target < 0 || target >= list.length) {
+                return;
+            }
+            const [entry] = list.splice(index, 1);
+            list.splice(target, 0, entry);
+        });
+    }
+    setValidationRule(part, value) {
+        this.patchField((field) => {
+            const rule = { ...(field.validationRule ?? {}), [part]: value || undefined };
+            if (!rule.formulaExpression && !rule.errorMessage) {
+                delete field.validationRule;
+            }
+            else {
+                field.validationRule = rule;
+            }
+        });
+    }
+    /** La regola di visibilita' e' un blocco condizioni come quello di una Decision (§5.2). */
+    onVisibilityChanged(mutate) {
+        this.patchField((field) => {
+            field.visibilityRule ??= {};
+            mutate(field.visibilityRule);
+            if (!field.visibilityRule.conditions?.length && !field.visibilityRule.formula) {
+                // Nessuna condizione = campo sempre visibile: meglio omettere la regola che scrivere
+                // un contenitore vuoto (§2).
+                delete field.visibilityRule;
+            }
+        });
+    }
+    /** Il blocco passato all'editor delle condizioni: mai `undefined`, altrimenti non si apre. */
+    visibilityRule = computed(() => this.selectedField()?.visibilityRule ?? {}, ...(ngDevMode ? [{ debugName: "visibilityRule" }] : []));
+    onComponentParametersChanged(mutate) {
+        this.patchField((field) => mutate(field));
+    }
+    setStoreOutputAutomatically(value) {
+        this.patchField((field) => {
+            if (value) {
+                field.storeOutputAutomatically = true;
+                // Esclusivo con gli output espliciti (§5.2): scriverli entrambi e'
+                // `OUTPUT_CONFIGURATION_CONFLICT`, quindi la scelta ne cancella l'altra.
+                delete field.outputParameters;
+            }
+            else {
+                delete field.storeOutputAutomatically;
+            }
+        });
+    }
+    /** `ObjectProvided`: oggetto e campo si scrivono in un unico `<Oggetto>.<Campo>` (§5.2). */
+    setProvidedObject(value) {
+        this.setFieldProperty('objectFieldReference', value ? `${value}.${this.providedField()}` : undefined);
+    }
+    setProvidedField(value) {
+        const object = this.providedObject();
+        this.setFieldProperty('objectFieldReference', object && value ? `${object}.${value}` : object || undefined);
+    }
+    // -------------------------------------------------------------------------
+    // Schermata
+    // -------------------------------------------------------------------------
+    setScreenText(property, value) {
+        this.setField(property, value);
+    }
+    /** I flag con default `true` si scrivono solo quando si nega, per non sporcare il diff. */
+    setScreenFlag(flag, value) {
+        this.patch((node) => {
+            if (value) {
+                delete node[flag];
+            }
+            else {
+                node[flag] = false;
+            }
+        });
+    }
+    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: "<p class=\"fb-callout\">\r\n  Lo screen dinamico <strong>descrive i propri campi</strong>: la schermata la compone il flow, non un\r\n  componente scritto a mano. Un campo che raccoglie un valore diventa una <strong>risorsa</strong> del flow,\r\n  referenziabile per nome ovunque e di sola lettura.\r\n</p>\r\n\r\n<div class=\"fb-dyn\">\r\n  <!-- ------------------------------------------------------------- albero -->\r\n  <section class=\"fb-dyn__pane fb-dyn__pane--tree\" aria-label=\"Campi della schermata\">\r\n    <header class=\"fb-dyn__pane-head\">\r\n      <h3 class=\"fb-dyn__pane-title\">Campi</h3>\r\n      <div class=\"fb-dyn__add\">\r\n        <select class=\"fb-select fb-select--sm\" #newType [disabled]=\"!dictionary.screenFieldTypes().length\">\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        <button\r\n          type=\"button\"\r\n          class=\"fb-btn fb-btn--primary fb-btn--sm\"\r\n          [disabled]=\"!dictionary.screenFieldTypes().length\"\r\n          (click)=\"addField(newType.value)\"\r\n        >\r\n          Aggiungi\r\n        </button>\r\n      </div>\r\n    </header>\r\n\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 sa\r\n        quali campi ammette ciascun tipo, e non li inventa.\r\n      </p>\r\n    }\r\n\r\n    <p class=\"fb-dyn__hint\">\r\n      Trascina per riordinare e per spostare un campo dentro una sezione o una colonna. L\u2019annidamento\r\n      previsto e\u2019 <strong>sezione \u2192 colonne \u2192 campi</strong>.\r\n    </p>\r\n\r\n    <!--\r\n      **Una sola** lista di rilascio sull'albero appiattito, non una per contenitore.\r\n      Le drop list annidate del CDK sono ambigue proprio qui: il rettangolo di una sezione\r\n      contiene quello delle sue colonne, e chi riceve il rilascio e' la lista registrata per\r\n      prima \u2014 cioe' sempre la radice. Con la lista piatta il contenitore di arrivo si deduce\r\n      dalla riga che precede il punto di rilascio, che e' anche cio' che si vede.\r\n    -->\r\n    <div\r\n      cdkDropList\r\n      class=\"fb-dyn__tree\"\r\n      [cdkDropListData]=\"tree()\"\r\n      (cdkDropListDropped)=\"onDrop($event)\"\r\n    >\r\n      @for (item of tree(); track $index) {\r\n        <div cdkDrag class=\"fb-dyn__item\" [style.margin-left.px]=\"item.depth * 16\">\r\n          <div\r\n            class=\"fb-dyn__row\"\r\n            [class.fb-dyn__row--selected]=\"isSelected(item.path)\"\r\n            [class.fb-dyn__row--container]=\"isContainer(item.field)\"\r\n            role=\"button\"\r\n            tabindex=\"0\"\r\n            (click)=\"select(item.path)\"\r\n            (keydown.enter)=\"select(item.path)\"\r\n            (keydown.space)=\"select(item.path)\"\r\n          >\r\n            <span class=\"fb-dyn__grip\" cdkDragHandle aria-hidden=\"true\">\u283F</span>\r\n            <span class=\"fb-dyn__caption\">{{ captionOf(item.field) }}</span>\r\n            <span class=\"fb-dyn__type\">{{ typeLabelOf(item.field) }}</span>\r\n            @if (item.field.isRequired) {\r\n              <span class=\"fb-dyn__badge fb-dyn__badge--required\" title=\"Obbligatorio\">*</span>\r\n            }\r\n            @if (item.field.visibilityRule?.conditions?.length) {\r\n              <span class=\"fb-dyn__badge\" title=\"Ha una regola di visibilita\u2019\">\u25D0</span>\r\n            }\r\n            @if (!isContainer(item.field)) {\r\n              <!-- La larghezza in dodicesimi, disegnata: e' l'unica parte di layout che il\r\n                   documento porta, e leggerla come numero non dice niente. -->\r\n              <span class=\"fb-dyn__width\" [title]=\"widthOf(item.field) + '/12'\">\r\n                <span class=\"fb-dyn__width-fill\" [style.width.%]=\"(widthOf(item.field) / 12) * 100\"></span>\r\n              </span>\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (isEmpty()) {\r\n      <p class=\"fb-callout fb-callout--warn\">\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  <!-- --------------------------------------------------------- proprieta' -->\r\n  <section class=\"fb-dyn__pane fb-dyn__pane--props\" aria-label=\"Proprieta\u2019 del campo\">\r\n    @if (!selectedField()) {\r\n      <p class=\"fb-empty\">Seleziona un campo a sinistra per configurarlo.</p>\r\n    } @else {\r\n      <header class=\"fb-dyn__pane-head\">\r\n        <h3 class=\"fb-dyn__pane-title\">{{ captionOf(selectedField()!) }}</h3>\r\n        <div class=\"fb-dyn__pane-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 dentro il contenitore precedente\"\r\n            [disabled]=\"!indentTarget()\"\r\n            (click)=\"indentSelected()\"\r\n          >\r\n            \u21E5\r\n          </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]=\"(selectedPath()?.length || 0) < 2\"\r\n            (click)=\"outdentSelected()\"\r\n          >\r\n            \u21E4\r\n          </button>\r\n          <button type=\"button\" class=\"fb-btn fb-btn--sm\" (click)=\"duplicateSelected()\">Duplica</button>\r\n          <button type=\"button\" class=\"fb-btn fb-btn--danger fb-btn--sm\" (click)=\"removeSelected()\">Elimina</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 sola\r\n            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      }\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-dyn__width-editor\">\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-dyn__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\r\n                  class=\"fb-field__label\"\r\n                  [class.fb-field__label--required]=\"objectTypeIsStructure()\"\r\n                >\r\n                  {{ objectTypeIsStructure() ? 'Classe' : selectedField()!.dataType === 'Enum' ? 'Tipo di enumerazione' : 'Oggetto' }}\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          <div class=\"fb-dyn__grid\">\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            <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          </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            <input\r\n              class=\"fb-input fb-input--mono\"\r\n              placeholder=\"Espressione, es. LEN(Nome) > 3\"\r\n              [value]=\"selectedField()!.validationRule?.formulaExpression || ''\"\r\n              (change)=\"setValidationRule('formulaExpression', $any($event.target).value)\"\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 e non la verifica.\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            <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          <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 \u2014\r\n            e passano dallo stesso catalogo. Un <code>ComponentInstance</code> non ha un valore proprio: lo\r\n            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              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              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 in\r\n          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  </section>\r\n</div>\r\n\r\n<!-- --------------------------------------------------------------- schermata -->\r\n<fieldset class=\"fb-section\">\r\n  <legend class=\"fb-section__title\">Schermata</legend>\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  <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 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  <div class=\"fb-dyn__grid\">\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  </div>\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  @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 l\u2019utente\r\n      resterebbe bloccato (SCREEN_DEAD_END).\r\n    </p>\r\n  }\r\n</fieldset>\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", styles: [".fb-dyn{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:14px;align-items:start;margin-bottom:14px}@media(max-width:900px){.fb-dyn{grid-template-columns:minmax(0,1fr)}}.fb-dyn__pane{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-dyn__pane--tree{position:sticky;top:0}.fb-dyn__pane--props{background:var(--fb-surface, #fff)}.fb-dyn__pane-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.fb-dyn__pane-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-dyn__pane-actions,.fb-dyn__add{display:flex;flex-wrap:wrap;gap:4px}.fb-dyn__add .fb-select--sm{width:auto;max-width:150px}.fb-btn--sm{padding:3px 7px;font-size:11px}.fb-select--sm{padding:3px 6px;font-size:11px}.fb-dyn__hint{margin:0 0 8px;font-size:11px;color:var(--fb-text-muted, #6b7086)}.fb-dyn__tree{max-height:420px;overflow-y:auto;overscroll-behavior:contain}.fb-dyn__item{background:transparent}.fb-dyn__row{display:flex;align-items:center;gap:6px;padding:4px 6px;margin-bottom:3px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff);cursor:pointer}.fb-dyn__row:hover{border-color:var(--fb-border-strong, #cfd4de)}.fb-dyn__row--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:inset 0 0 0 1px var(--fb-accent, #4f6ef7)}.fb-dyn__row--container{background:var(--fb-surface-sunken, #eef0f4);font-weight:600}.fb-dyn__grip{color:var(--fb-text-subtle, #98a2b3);cursor:grab}.fb-dyn__caption{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--fb-text, #1a1c23)}.fb-dyn__type{font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-dyn__badge{font-size:11px;color:var(--fb-text-muted, #6b7086)}.fb-dyn__badge--required{color:var(--fb-error, #dc2626);font-weight:700}.fb-dyn__width{flex:none;width:34px;height:6px;border-radius:3px;background:var(--fb-surface-sunken, #eef0f4);overflow:hidden}.fb-dyn__width-fill{display:block;height:100%;background:var(--fb-accent, #4f6ef7)}.fb-dyn__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0 10px}.fb-dyn__width-editor{display:flex;align-items:center;gap:8px}.fb-dyn__width-editor input[type=range]{flex:1;min-width:0}.fb-dyn__width-value{font-size:11px;color:var(--fb-text-muted, #6b7086)}.fb-dyn__item.cdk-drag-placeholder{opacity:.4}.fb-dyn__tree.cdk-drop-list-dragging .fb-dyn__row{transition:transform .12s cubic-bezier(0,0,.2,1)}\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: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { 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: NamePickerComponent, selector: "fb-name-picker", inputs: ["value", "options", "label", "placeholder", "disabled", "unknownMessage", "unknownSeverity", "emptyMessage", "isMono"], outputs: ["valueChange"] }, { 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"], 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,
+            args: [{ selector: 'fb-dynamic-screen-inspector', standalone: true, imports: [
+                        CdkDrag,
+                        CdkDragHandle,
+                        CdkDropList,
+                        ConditionEditorComponent,
+                        ConnectorEditorComponent,
+                        FieldPickerComponent,
+                        NamePickerComponent,
+                        ObjectPickerComponent,
+                        ParameterEditorComponent,
+                        SelectValueDirective,
+                        StructurePickerComponent,
+                        ValueEditorComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p class=\"fb-callout\">\r\n  Lo screen dinamico <strong>descrive i propri campi</strong>: la schermata la compone il flow, non un\r\n  componente scritto a mano. Un campo che raccoglie un valore diventa una <strong>risorsa</strong> del flow,\r\n  referenziabile per nome ovunque e di sola lettura.\r\n</p>\r\n\r\n<div class=\"fb-dyn\">\r\n  <!-- ------------------------------------------------------------- albero -->\r\n  <section class=\"fb-dyn__pane fb-dyn__pane--tree\" aria-label=\"Campi della schermata\">\r\n    <header class=\"fb-dyn__pane-head\">\r\n      <h3 class=\"fb-dyn__pane-title\">Campi</h3>\r\n      <div class=\"fb-dyn__add\">\r\n        <select class=\"fb-select fb-select--sm\" #newType [disabled]=\"!dictionary.screenFieldTypes().length\">\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        <button\r\n          type=\"button\"\r\n          class=\"fb-btn fb-btn--primary fb-btn--sm\"\r\n          [disabled]=\"!dictionary.screenFieldTypes().length\"\r\n          (click)=\"addField(newType.value)\"\r\n        >\r\n          Aggiungi\r\n        </button>\r\n      </div>\r\n    </header>\r\n\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 sa\r\n        quali campi ammette ciascun tipo, e non li inventa.\r\n      </p>\r\n    }\r\n\r\n    <p class=\"fb-dyn__hint\">\r\n      Trascina per riordinare e per spostare un campo dentro una sezione o una colonna. L\u2019annidamento\r\n      previsto e\u2019 <strong>sezione \u2192 colonne \u2192 campi</strong>.\r\n    </p>\r\n\r\n    <!--\r\n      **Una sola** lista di rilascio sull'albero appiattito, non una per contenitore.\r\n      Le drop list annidate del CDK sono ambigue proprio qui: il rettangolo di una sezione\r\n      contiene quello delle sue colonne, e chi riceve il rilascio e' la lista registrata per\r\n      prima \u2014 cioe' sempre la radice. Con la lista piatta il contenitore di arrivo si deduce\r\n      dalla riga che precede il punto di rilascio, che e' anche cio' che si vede.\r\n    -->\r\n    <div\r\n      cdkDropList\r\n      class=\"fb-dyn__tree\"\r\n      [cdkDropListData]=\"tree()\"\r\n      (cdkDropListDropped)=\"onDrop($event)\"\r\n    >\r\n      @for (item of tree(); track $index) {\r\n        <div cdkDrag class=\"fb-dyn__item\" [style.margin-left.px]=\"item.depth * 16\">\r\n          <div\r\n            class=\"fb-dyn__row\"\r\n            [class.fb-dyn__row--selected]=\"isSelected(item.path)\"\r\n            [class.fb-dyn__row--container]=\"isContainer(item.field)\"\r\n            role=\"button\"\r\n            tabindex=\"0\"\r\n            (click)=\"select(item.path)\"\r\n            (keydown.enter)=\"select(item.path)\"\r\n            (keydown.space)=\"select(item.path)\"\r\n          >\r\n            <span class=\"fb-dyn__grip\" cdkDragHandle aria-hidden=\"true\">\u283F</span>\r\n            <span class=\"fb-dyn__caption\">{{ captionOf(item.field) }}</span>\r\n            <span class=\"fb-dyn__type\">{{ typeLabelOf(item.field) }}</span>\r\n            @if (item.field.isRequired) {\r\n              <span class=\"fb-dyn__badge fb-dyn__badge--required\" title=\"Obbligatorio\">*</span>\r\n            }\r\n            @if (item.field.visibilityRule?.conditions?.length) {\r\n              <span class=\"fb-dyn__badge\" title=\"Ha una regola di visibilita\u2019\">\u25D0</span>\r\n            }\r\n            @if (!isContainer(item.field)) {\r\n              <!-- La larghezza in dodicesimi, disegnata: e' l'unica parte di layout che il\r\n                   documento porta, e leggerla come numero non dice niente. -->\r\n              <span class=\"fb-dyn__width\" [title]=\"widthOf(item.field) + '/12'\">\r\n                <span class=\"fb-dyn__width-fill\" [style.width.%]=\"(widthOf(item.field) / 12) * 100\"></span>\r\n              </span>\r\n            }\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    @if (isEmpty()) {\r\n      <p class=\"fb-callout fb-callout--warn\">\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  <!-- --------------------------------------------------------- proprieta' -->\r\n  <section class=\"fb-dyn__pane fb-dyn__pane--props\" aria-label=\"Proprieta\u2019 del campo\">\r\n    @if (!selectedField()) {\r\n      <p class=\"fb-empty\">Seleziona un campo a sinistra per configurarlo.</p>\r\n    } @else {\r\n      <header class=\"fb-dyn__pane-head\">\r\n        <h3 class=\"fb-dyn__pane-title\">{{ captionOf(selectedField()!) }}</h3>\r\n        <div class=\"fb-dyn__pane-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 dentro il contenitore precedente\"\r\n            [disabled]=\"!indentTarget()\"\r\n            (click)=\"indentSelected()\"\r\n          >\r\n            \u21E5\r\n          </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]=\"(selectedPath()?.length || 0) < 2\"\r\n            (click)=\"outdentSelected()\"\r\n          >\r\n            \u21E4\r\n          </button>\r\n          <button type=\"button\" class=\"fb-btn fb-btn--sm\" (click)=\"duplicateSelected()\">Duplica</button>\r\n          <button type=\"button\" class=\"fb-btn fb-btn--danger fb-btn--sm\" (click)=\"removeSelected()\">Elimina</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 sola\r\n            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      }\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-dyn__width-editor\">\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-dyn__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\r\n                  class=\"fb-field__label\"\r\n                  [class.fb-field__label--required]=\"objectTypeIsStructure()\"\r\n                >\r\n                  {{ objectTypeIsStructure() ? 'Classe' : selectedField()!.dataType === 'Enum' ? 'Tipo di enumerazione' : 'Oggetto' }}\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          <div class=\"fb-dyn__grid\">\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            <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          </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            <input\r\n              class=\"fb-input fb-input--mono\"\r\n              placeholder=\"Espressione, es. LEN(Nome) > 3\"\r\n              [value]=\"selectedField()!.validationRule?.formulaExpression || ''\"\r\n              (change)=\"setValidationRule('formulaExpression', $any($event.target).value)\"\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 e non la verifica.\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            <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          <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 \u2014\r\n            e passano dallo stesso catalogo. Un <code>ComponentInstance</code> non ha un valore proprio: lo\r\n            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              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              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 in\r\n          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  </section>\r\n</div>\r\n\r\n<!-- --------------------------------------------------------------- schermata -->\r\n<fieldset class=\"fb-section\">\r\n  <legend class=\"fb-section__title\">Schermata</legend>\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  <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 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  <div class=\"fb-dyn__grid\">\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  </div>\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  @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 l\u2019utente\r\n      resterebbe bloccato (SCREEN_DEAD_END).\r\n    </p>\r\n  }\r\n</fieldset>\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", styles: [".fb-dyn{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:14px;align-items:start;margin-bottom:14px}@media(max-width:900px){.fb-dyn{grid-template-columns:minmax(0,1fr)}}.fb-dyn__pane{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-dyn__pane--tree{position:sticky;top:0}.fb-dyn__pane--props{background:var(--fb-surface, #fff)}.fb-dyn__pane-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.fb-dyn__pane-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-dyn__pane-actions,.fb-dyn__add{display:flex;flex-wrap:wrap;gap:4px}.fb-dyn__add .fb-select--sm{width:auto;max-width:150px}.fb-btn--sm{padding:3px 7px;font-size:11px}.fb-select--sm{padding:3px 6px;font-size:11px}.fb-dyn__hint{margin:0 0 8px;font-size:11px;color:var(--fb-text-muted, #6b7086)}.fb-dyn__tree{max-height:420px;overflow-y:auto;overscroll-behavior:contain}.fb-dyn__item{background:transparent}.fb-dyn__row{display:flex;align-items:center;gap:6px;padding:4px 6px;margin-bottom:3px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff);cursor:pointer}.fb-dyn__row:hover{border-color:var(--fb-border-strong, #cfd4de)}.fb-dyn__row--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:inset 0 0 0 1px var(--fb-accent, #4f6ef7)}.fb-dyn__row--container{background:var(--fb-surface-sunken, #eef0f4);font-weight:600}.fb-dyn__grip{color:var(--fb-text-subtle, #98a2b3);cursor:grab}.fb-dyn__caption{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--fb-text, #1a1c23)}.fb-dyn__type{font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-dyn__badge{font-size:11px;color:var(--fb-text-muted, #6b7086)}.fb-dyn__badge--required{color:var(--fb-error, #dc2626);font-weight:700}.fb-dyn__width{flex:none;width:34px;height:6px;border-radius:3px;background:var(--fb-surface-sunken, #eef0f4);overflow:hidden}.fb-dyn__width-fill{display:block;height:100%;background:var(--fb-accent, #4f6ef7)}.fb-dyn__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0 10px}.fb-dyn__width-editor{display:flex;align-items:center;gap:8px}.fb-dyn__width-editor input[type=range]{flex:1;min-width:0}.fb-dyn__width-value{font-size:11px;color:var(--fb-text-muted, #6b7086)}.fb-dyn__item.cdk-drag-placeholder{opacity:.4}.fb-dyn__tree.cdk-drop-list-dragging .fb-dyn__row{transition:transform .12s cubic-bezier(0,0,.2,1)}\n"] }]
+        }], ctorParameters: () => [] });
+
 /**
  * Loop — FRONTEND.md §5.4.
  *
@@ -9057,7 +9914,7 @@ class ElementInspectorComponent {
         return { x: node?.locationX ?? 0, y: node?.locationY ?? 0 };
     }, ...(ngDevMode ? [{ debugName: "position" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ElementInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: ElementInspectorComponent, isStandalone: true, selector: "fb-element-inspector", inputs: { selectedName: { classPropertyName: "selectedName", publicName: "selectedName", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", removeRequested: "removeRequested", duplicateRequested: "duplicateRequested" }, ngImport: i0, template: "@if (!selectedName()) {\r\n  <p class=\"fb-inspector__empty\">\r\n    Seleziona un elemento sul canvas per modificarlo, oppure trascina un elemento dalla palette.\r\n  </p>\r\n} @else {\r\n  @if (showHeader()) {\r\n    <header class=\"fb-inspector__header\">\r\n      <div>\r\n        <span class=\"fb-inspector__type\">{{ typeLabel() }}</span>\r\n        <h2 class=\"fb-inspector__title\">\r\n          {{ isStart() ? 'Avvio del flow' : node()?.label || selectedName() }}\r\n        </h2>\r\n      </div>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"close()\">\r\n        \u00D7\r\n      </button>\r\n    </header>\r\n  }\r\n\r\n  <div class=\"fb-inspector__body\">\r\n    @if (issues().length) {\r\n      <ul class=\"fb-inspector__issues\">\r\n        <!-- `$index`: due rilievi con lo stesso codice e lo stesso path sono possibili. -->\r\n        @for (issue of issues(); track $index) {\r\n          <li\r\n            class=\"fb-inspector__issue\"\r\n            [class.fb-inspector__issue--error]=\"issue.severity === 'Error'\"\r\n            [class.fb-inspector__issue--warning]=\"issue.severity === 'Warning'\"\r\n          >\r\n            <span class=\"fb-inspector__issue-code\">{{ issue.code }}</span>\r\n            {{ issue.message }}\r\n            @if (issue.path) {\r\n              <span class=\"fb-inspector__issue-path\">{{ issue.path }}</span>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n\r\n    @if (isUnsupported()) {\r\n      <p class=\"fb-callout fb-callout--error\">\r\n        Questo tipo di elemento non e\u2019 supportato dal motore: il flow che lo contiene non parte\r\n        (ELEMENT_NOT_SUPPORTED). Non e\u2019 creabile dalla palette; se e\u2019 arrivato da un documento importato,\r\n        va rimosso.\r\n      </p>\r\n    }\r\n\r\n    @if (!isStart()) {\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Etichetta</label>\r\n        <input\r\n          class=\"fb-input\"\r\n          [value]=\"$any(node()?.label) || ''\"\r\n          placeholder=\"Nome mostrato sul canvas\"\r\n          (input)=\"setLabel($any($event.target).value)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Nome tecnico</label>\r\n        @if (pendingName() === null) {\r\n          <div class=\"fb-field__row\">\r\n            <input class=\"fb-input fb-input--mono\" [value]=\"selectedName() || ''\" readonly />\r\n            <button type=\"button\" class=\"fb-btn\" (click)=\"startRename()\">Rinomina</button>\r\n          </div>\r\n          <p class=\"fb-field__hint\">\r\n            \u00C8 l\u2019identificatore con cui i riferimenti raggiungono questo elemento.\r\n            @if (referenceCount() > 1) {\r\n              Compare {{ referenceCount() }} volte nel documento.\r\n            }\r\n          </p>\r\n        } @else {\r\n          <input\r\n            class=\"fb-input fb-input--mono\"\r\n            [class.fb-input--invalid]=\"!!nameError()\"\r\n            [value]=\"pendingName() || ''\"\r\n            (input)=\"onPendingNameInput($any($event.target).value)\"\r\n          />\r\n          @if (nameError()) {\r\n            <p class=\"fb-field__error\">{{ nameError() }}</p>\r\n          } @else {\r\n            <p class=\"fb-field__hint fb-field__hint--warn\">\r\n              La rinomina riscrive tutti i riferimenti che puntano a questo elemento\r\n              ({{ referenceCount() }} occorrenze): nessuna primitiva del backend lo fa, lo fa l\u2019editor.\r\n            </p>\r\n          }\r\n          <div class=\"fb-field__row\">\r\n            <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"!canRename()\" (click)=\"applyRename()\">\r\n              Applica\r\n            </button>\r\n            <button type=\"button\" class=\"fb-btn\" (click)=\"suggestNameFromLabel()\">Genera dalla label</button>\r\n            <button type=\"button\" class=\"fb-btn fb-btn--ghost\" (click)=\"cancelRename()\">Annulla</button>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Descrizione</label>\r\n        <textarea\r\n          class=\"fb-textarea\"\r\n          [value]=\"$any(node()?.description) || ''\"\r\n          (input)=\"setDescription($any($event.target).value)\"\r\n        ></textarea>\r\n      </div>\r\n    }\r\n\r\n    <p class=\"fb-inspector__position\">\r\n      Posizione sul canvas: {{ position().x }}, {{ position().y }}\r\n    </p>\r\n\r\n    <hr class=\"fb-inspector__divider\" />\r\n\r\n    @if (isStart()) {\r\n      <fb-start-inspector />\r\n    } @else if (node()) {\r\n      @switch (type()) {\r\n        @case ('Screen') {\r\n          <fb-screen-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Assignment') {\r\n          <fb-assignment-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Decision') {\r\n          <fb-decision-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Loop') {\r\n          <fb-loop-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('CollectionProcessor') {\r\n          <fb-collection-processor-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('CustomError') {\r\n          <fb-custom-error-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Wait') {\r\n          <fb-wait-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('RecordLookup') {\r\n          <fb-record-lookup-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('RecordCreate') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordCreate\" />\r\n        }\r\n        @case ('RecordUpdate') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordUpdate\" />\r\n        }\r\n        @case ('RecordDelete') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordDelete\" />\r\n        }\r\n        @case ('RecordRollback') {\r\n          <fb-record-rollback-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('ActionCall') {\r\n          <fb-action-call-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('ScriptCall') {\r\n          <fb-script-call-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Subflow') {\r\n          <fb-subflow-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Transform') {\r\n          <fb-transform-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('OrchestratedStage') {\r\n          <fb-orchestrated-stage-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @default {\r\n          <p class=\"fb-callout fb-callout--warn\">\r\n            Nessun form specifico per il tipo \u00AB{{ type() }}\u00BB: i campi comuni sono modificabili qui sopra.\r\n          </p>\r\n        }\r\n      }\r\n    }\r\n\r\n    @if (!isStart()) {\r\n      <hr class=\"fb-inspector__divider\" />\r\n      <div class=\"fb-field__row\">\r\n        <button type=\"button\" class=\"fb-btn\" (click)=\"requestDuplicate()\">Duplica</button>\r\n        <button type=\"button\" class=\"fb-btn fb-btn--danger\" (click)=\"requestRemove()\">Elimina</button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-inspector__empty{margin:16px 12px;font-size:12px;line-height:1.5;color:var(--fb-text-muted, #667085)}.fb-inspector__header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-inspector__type{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__title{margin:2px 0 0;font-size:14px;font-weight:600;color:var(--fb-text, #1d2939)}.fb-inspector__body{flex:1;min-height:0;overflow-y:auto;padding:14px}.fb-inspector__issues{margin:0 0 12px;padding:0;list-style:none}.fb-inspector__issue{margin-bottom:4px;padding:6px 8px;border-left:3px solid var(--fb-text-subtle, #98a2b3);border-radius:3px;background:var(--fb-surface-alt, #f8f9fb);font-size:11px;line-height:1.4;color:var(--fb-text, #1d2939)}.fb-inspector__issue--error{border-left-color:var(--fb-error, #c9372c)}.fb-inspector__issue--warning{border-left-color:var(--fb-warning, #b7791f)}.fb-inspector__issue-code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__issue-path{display:block;margin-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:var(--fb-text-muted, #667085)}.fb-inspector__position{margin:0;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__divider{margin:12px 0;border:0;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}\n"], dependencies: [{ kind: "component", type: ActionCallInspectorComponent, selector: "fb-action-call-inspector" }, { kind: "component", type: AssignmentInspectorComponent, selector: "fb-assignment-inspector" }, { kind: "component", type: CollectionProcessorInspectorComponent, selector: "fb-collection-processor-inspector" }, { kind: "component", type: CustomErrorInspectorComponent, selector: "fb-custom-error-inspector" }, { kind: "component", type: DecisionInspectorComponent, selector: "fb-decision-inspector" }, { kind: "component", type: LoopInspectorComponent, selector: "fb-loop-inspector" }, { kind: "component", type: OrchestratedStageInspectorComponent, selector: "fb-orchestrated-stage-inspector" }, { kind: "component", type: RecordLookupInspectorComponent, selector: "fb-record-lookup-inspector" }, { kind: "component", type: RecordRollbackInspectorComponent, selector: "fb-record-rollback-inspector" }, { kind: "component", type: RecordWriteInspectorComponent, selector: "fb-record-write-inspector", inputs: ["type"] }, { kind: "component", type: ScreenInspectorComponent, selector: "fb-screen-inspector" }, { kind: "component", type: ScriptCallInspectorComponent, selector: "fb-script-call-inspector" }, { kind: "component", type: StartInspectorComponent, selector: "fb-start-inspector" }, { kind: "component", type: SubflowInspectorComponent, selector: "fb-subflow-inspector" }, { kind: "component", type: TransformInspectorComponent, selector: "fb-transform-inspector" }, { kind: "component", type: WaitInspectorComponent, selector: "fb-wait-inspector" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: ElementInspectorComponent, isStandalone: true, selector: "fb-element-inspector", inputs: { selectedName: { classPropertyName: "selectedName", publicName: "selectedName", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", removeRequested: "removeRequested", duplicateRequested: "duplicateRequested" }, ngImport: i0, template: "@if (!selectedName()) {\r\n  <p class=\"fb-inspector__empty\">\r\n    Seleziona un elemento sul canvas per modificarlo, oppure trascina un elemento dalla palette.\r\n  </p>\r\n} @else {\r\n  @if (showHeader()) {\r\n    <header class=\"fb-inspector__header\">\r\n      <div>\r\n        <span class=\"fb-inspector__type\">{{ typeLabel() }}</span>\r\n        <h2 class=\"fb-inspector__title\">\r\n          {{ isStart() ? 'Avvio del flow' : node()?.label || selectedName() }}\r\n        </h2>\r\n      </div>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"close()\">\r\n        \u00D7\r\n      </button>\r\n    </header>\r\n  }\r\n\r\n  <div class=\"fb-inspector__body\">\r\n    @if (issues().length) {\r\n      <ul class=\"fb-inspector__issues\">\r\n        <!-- `$index`: due rilievi con lo stesso codice e lo stesso path sono possibili. -->\r\n        @for (issue of issues(); track $index) {\r\n          <li\r\n            class=\"fb-inspector__issue\"\r\n            [class.fb-inspector__issue--error]=\"issue.severity === 'Error'\"\r\n            [class.fb-inspector__issue--warning]=\"issue.severity === 'Warning'\"\r\n          >\r\n            <span class=\"fb-inspector__issue-code\">{{ issue.code }}</span>\r\n            {{ issue.message }}\r\n            @if (issue.path) {\r\n              <span class=\"fb-inspector__issue-path\">{{ issue.path }}</span>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n\r\n    @if (isUnsupported()) {\r\n      <p class=\"fb-callout fb-callout--error\">\r\n        Questo tipo di elemento non e\u2019 supportato dal motore: il flow che lo contiene non parte\r\n        (ELEMENT_NOT_SUPPORTED). Non e\u2019 creabile dalla palette; se e\u2019 arrivato da un documento importato,\r\n        va rimosso.\r\n      </p>\r\n    }\r\n\r\n    @if (!isStart()) {\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Etichetta</label>\r\n        <input\r\n          class=\"fb-input\"\r\n          [value]=\"$any(node()?.label) || ''\"\r\n          placeholder=\"Nome mostrato sul canvas\"\r\n          (input)=\"setLabel($any($event.target).value)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Nome tecnico</label>\r\n        @if (pendingName() === null) {\r\n          <div class=\"fb-field__row\">\r\n            <input class=\"fb-input fb-input--mono\" [value]=\"selectedName() || ''\" readonly />\r\n            <button type=\"button\" class=\"fb-btn\" (click)=\"startRename()\">Rinomina</button>\r\n          </div>\r\n          <p class=\"fb-field__hint\">\r\n            \u00C8 l\u2019identificatore con cui i riferimenti raggiungono questo elemento.\r\n            @if (referenceCount() > 1) {\r\n              Compare {{ referenceCount() }} volte nel documento.\r\n            }\r\n          </p>\r\n        } @else {\r\n          <input\r\n            class=\"fb-input fb-input--mono\"\r\n            [class.fb-input--invalid]=\"!!nameError()\"\r\n            [value]=\"pendingName() || ''\"\r\n            (input)=\"onPendingNameInput($any($event.target).value)\"\r\n          />\r\n          @if (nameError()) {\r\n            <p class=\"fb-field__error\">{{ nameError() }}</p>\r\n          } @else {\r\n            <p class=\"fb-field__hint fb-field__hint--warn\">\r\n              La rinomina riscrive tutti i riferimenti che puntano a questo elemento\r\n              ({{ referenceCount() }} occorrenze): nessuna primitiva del backend lo fa, lo fa l\u2019editor.\r\n            </p>\r\n          }\r\n          <div class=\"fb-field__row\">\r\n            <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"!canRename()\" (click)=\"applyRename()\">\r\n              Applica\r\n            </button>\r\n            <button type=\"button\" class=\"fb-btn\" (click)=\"suggestNameFromLabel()\">Genera dalla label</button>\r\n            <button type=\"button\" class=\"fb-btn fb-btn--ghost\" (click)=\"cancelRename()\">Annulla</button>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Descrizione</label>\r\n        <textarea\r\n          class=\"fb-textarea\"\r\n          [value]=\"$any(node()?.description) || ''\"\r\n          (input)=\"setDescription($any($event.target).value)\"\r\n        ></textarea>\r\n      </div>\r\n    }\r\n\r\n    <p class=\"fb-inspector__position\">\r\n      Posizione sul canvas: {{ position().x }}, {{ position().y }}\r\n    </p>\r\n\r\n    <hr class=\"fb-inspector__divider\" />\r\n\r\n    @if (isStart()) {\r\n      <fb-start-inspector />\r\n    } @else if (node()) {\r\n      @switch (type()) {\r\n        @case ('Screen') {\r\n          <fb-screen-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('DynamicScreen') {\r\n          <fb-dynamic-screen-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Assignment') {\r\n          <fb-assignment-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Decision') {\r\n          <fb-decision-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Loop') {\r\n          <fb-loop-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('CollectionProcessor') {\r\n          <fb-collection-processor-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('CustomError') {\r\n          <fb-custom-error-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Wait') {\r\n          <fb-wait-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('RecordLookup') {\r\n          <fb-record-lookup-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('RecordCreate') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordCreate\" />\r\n        }\r\n        @case ('RecordUpdate') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordUpdate\" />\r\n        }\r\n        @case ('RecordDelete') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordDelete\" />\r\n        }\r\n        @case ('RecordRollback') {\r\n          <fb-record-rollback-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('ActionCall') {\r\n          <fb-action-call-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('ScriptCall') {\r\n          <fb-script-call-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Subflow') {\r\n          <fb-subflow-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Transform') {\r\n          <fb-transform-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('OrchestratedStage') {\r\n          <fb-orchestrated-stage-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @default {\r\n          <p class=\"fb-callout fb-callout--warn\">\r\n            Nessun form specifico per il tipo \u00AB{{ type() }}\u00BB: i campi comuni sono modificabili qui sopra.\r\n          </p>\r\n        }\r\n      }\r\n    }\r\n\r\n    @if (!isStart()) {\r\n      <hr class=\"fb-inspector__divider\" />\r\n      <div class=\"fb-field__row\">\r\n        <button type=\"button\" class=\"fb-btn\" (click)=\"requestDuplicate()\">Duplica</button>\r\n        <button type=\"button\" class=\"fb-btn fb-btn--danger\" (click)=\"requestRemove()\">Elimina</button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-inspector__empty{margin:16px 12px;font-size:12px;line-height:1.5;color:var(--fb-text-muted, #667085)}.fb-inspector__header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-inspector__type{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__title{margin:2px 0 0;font-size:14px;font-weight:600;color:var(--fb-text, #1d2939)}.fb-inspector__body{flex:1;min-height:0;overflow-y:auto;padding:14px}.fb-inspector__issues{margin:0 0 12px;padding:0;list-style:none}.fb-inspector__issue{margin-bottom:4px;padding:6px 8px;border-left:3px solid var(--fb-text-subtle, #98a2b3);border-radius:3px;background:var(--fb-surface-alt, #f8f9fb);font-size:11px;line-height:1.4;color:var(--fb-text, #1d2939)}.fb-inspector__issue--error{border-left-color:var(--fb-error, #c9372c)}.fb-inspector__issue--warning{border-left-color:var(--fb-warning, #b7791f)}.fb-inspector__issue-code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__issue-path{display:block;margin-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:var(--fb-text-muted, #667085)}.fb-inspector__position{margin:0;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__divider{margin:12px 0;border:0;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}\n"], dependencies: [{ kind: "component", type: ActionCallInspectorComponent, selector: "fb-action-call-inspector" }, { kind: "component", type: AssignmentInspectorComponent, selector: "fb-assignment-inspector" }, { kind: "component", type: CollectionProcessorInspectorComponent, selector: "fb-collection-processor-inspector" }, { kind: "component", type: CustomErrorInspectorComponent, selector: "fb-custom-error-inspector" }, { kind: "component", type: DecisionInspectorComponent, selector: "fb-decision-inspector" }, { kind: "component", type: DynamicScreenInspectorComponent, selector: "fb-dynamic-screen-inspector" }, { kind: "component", type: LoopInspectorComponent, selector: "fb-loop-inspector" }, { kind: "component", type: OrchestratedStageInspectorComponent, selector: "fb-orchestrated-stage-inspector" }, { kind: "component", type: RecordLookupInspectorComponent, selector: "fb-record-lookup-inspector" }, { kind: "component", type: RecordRollbackInspectorComponent, selector: "fb-record-rollback-inspector" }, { kind: "component", type: RecordWriteInspectorComponent, selector: "fb-record-write-inspector", inputs: ["type"] }, { kind: "component", type: ScreenInspectorComponent, selector: "fb-screen-inspector" }, { kind: "component", type: ScriptCallInspectorComponent, selector: "fb-script-call-inspector" }, { kind: "component", type: StartInspectorComponent, selector: "fb-start-inspector" }, { kind: "component", type: SubflowInspectorComponent, selector: "fb-subflow-inspector" }, { kind: "component", type: TransformInspectorComponent, selector: "fb-transform-inspector" }, { kind: "component", type: WaitInspectorComponent, selector: "fb-wait-inspector" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ElementInspectorComponent, decorators: [{
             type: Component,
@@ -9067,6 +9924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         CollectionProcessorInspectorComponent,
                         CustomErrorInspectorComponent,
                         DecisionInspectorComponent,
+                        DynamicScreenInspectorComponent,
                         LoopInspectorComponent,
                         OrchestratedStageInspectorComponent,
                         RecordLookupInspectorComponent,
@@ -9078,7 +9936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         SubflowInspectorComponent,
                         TransformInspectorComponent,
                         WaitInspectorComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!selectedName()) {\r\n  <p class=\"fb-inspector__empty\">\r\n    Seleziona un elemento sul canvas per modificarlo, oppure trascina un elemento dalla palette.\r\n  </p>\r\n} @else {\r\n  @if (showHeader()) {\r\n    <header class=\"fb-inspector__header\">\r\n      <div>\r\n        <span class=\"fb-inspector__type\">{{ typeLabel() }}</span>\r\n        <h2 class=\"fb-inspector__title\">\r\n          {{ isStart() ? 'Avvio del flow' : node()?.label || selectedName() }}\r\n        </h2>\r\n      </div>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"close()\">\r\n        \u00D7\r\n      </button>\r\n    </header>\r\n  }\r\n\r\n  <div class=\"fb-inspector__body\">\r\n    @if (issues().length) {\r\n      <ul class=\"fb-inspector__issues\">\r\n        <!-- `$index`: due rilievi con lo stesso codice e lo stesso path sono possibili. -->\r\n        @for (issue of issues(); track $index) {\r\n          <li\r\n            class=\"fb-inspector__issue\"\r\n            [class.fb-inspector__issue--error]=\"issue.severity === 'Error'\"\r\n            [class.fb-inspector__issue--warning]=\"issue.severity === 'Warning'\"\r\n          >\r\n            <span class=\"fb-inspector__issue-code\">{{ issue.code }}</span>\r\n            {{ issue.message }}\r\n            @if (issue.path) {\r\n              <span class=\"fb-inspector__issue-path\">{{ issue.path }}</span>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n\r\n    @if (isUnsupported()) {\r\n      <p class=\"fb-callout fb-callout--error\">\r\n        Questo tipo di elemento non e\u2019 supportato dal motore: il flow che lo contiene non parte\r\n        (ELEMENT_NOT_SUPPORTED). Non e\u2019 creabile dalla palette; se e\u2019 arrivato da un documento importato,\r\n        va rimosso.\r\n      </p>\r\n    }\r\n\r\n    @if (!isStart()) {\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Etichetta</label>\r\n        <input\r\n          class=\"fb-input\"\r\n          [value]=\"$any(node()?.label) || ''\"\r\n          placeholder=\"Nome mostrato sul canvas\"\r\n          (input)=\"setLabel($any($event.target).value)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Nome tecnico</label>\r\n        @if (pendingName() === null) {\r\n          <div class=\"fb-field__row\">\r\n            <input class=\"fb-input fb-input--mono\" [value]=\"selectedName() || ''\" readonly />\r\n            <button type=\"button\" class=\"fb-btn\" (click)=\"startRename()\">Rinomina</button>\r\n          </div>\r\n          <p class=\"fb-field__hint\">\r\n            \u00C8 l\u2019identificatore con cui i riferimenti raggiungono questo elemento.\r\n            @if (referenceCount() > 1) {\r\n              Compare {{ referenceCount() }} volte nel documento.\r\n            }\r\n          </p>\r\n        } @else {\r\n          <input\r\n            class=\"fb-input fb-input--mono\"\r\n            [class.fb-input--invalid]=\"!!nameError()\"\r\n            [value]=\"pendingName() || ''\"\r\n            (input)=\"onPendingNameInput($any($event.target).value)\"\r\n          />\r\n          @if (nameError()) {\r\n            <p class=\"fb-field__error\">{{ nameError() }}</p>\r\n          } @else {\r\n            <p class=\"fb-field__hint fb-field__hint--warn\">\r\n              La rinomina riscrive tutti i riferimenti che puntano a questo elemento\r\n              ({{ referenceCount() }} occorrenze): nessuna primitiva del backend lo fa, lo fa l\u2019editor.\r\n            </p>\r\n          }\r\n          <div class=\"fb-field__row\">\r\n            <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"!canRename()\" (click)=\"applyRename()\">\r\n              Applica\r\n            </button>\r\n            <button type=\"button\" class=\"fb-btn\" (click)=\"suggestNameFromLabel()\">Genera dalla label</button>\r\n            <button type=\"button\" class=\"fb-btn fb-btn--ghost\" (click)=\"cancelRename()\">Annulla</button>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Descrizione</label>\r\n        <textarea\r\n          class=\"fb-textarea\"\r\n          [value]=\"$any(node()?.description) || ''\"\r\n          (input)=\"setDescription($any($event.target).value)\"\r\n        ></textarea>\r\n      </div>\r\n    }\r\n\r\n    <p class=\"fb-inspector__position\">\r\n      Posizione sul canvas: {{ position().x }}, {{ position().y }}\r\n    </p>\r\n\r\n    <hr class=\"fb-inspector__divider\" />\r\n\r\n    @if (isStart()) {\r\n      <fb-start-inspector />\r\n    } @else if (node()) {\r\n      @switch (type()) {\r\n        @case ('Screen') {\r\n          <fb-screen-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Assignment') {\r\n          <fb-assignment-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Decision') {\r\n          <fb-decision-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Loop') {\r\n          <fb-loop-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('CollectionProcessor') {\r\n          <fb-collection-processor-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('CustomError') {\r\n          <fb-custom-error-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Wait') {\r\n          <fb-wait-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('RecordLookup') {\r\n          <fb-record-lookup-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('RecordCreate') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordCreate\" />\r\n        }\r\n        @case ('RecordUpdate') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordUpdate\" />\r\n        }\r\n        @case ('RecordDelete') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordDelete\" />\r\n        }\r\n        @case ('RecordRollback') {\r\n          <fb-record-rollback-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('ActionCall') {\r\n          <fb-action-call-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('ScriptCall') {\r\n          <fb-script-call-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Subflow') {\r\n          <fb-subflow-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Transform') {\r\n          <fb-transform-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('OrchestratedStage') {\r\n          <fb-orchestrated-stage-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @default {\r\n          <p class=\"fb-callout fb-callout--warn\">\r\n            Nessun form specifico per il tipo \u00AB{{ type() }}\u00BB: i campi comuni sono modificabili qui sopra.\r\n          </p>\r\n        }\r\n      }\r\n    }\r\n\r\n    @if (!isStart()) {\r\n      <hr class=\"fb-inspector__divider\" />\r\n      <div class=\"fb-field__row\">\r\n        <button type=\"button\" class=\"fb-btn\" (click)=\"requestDuplicate()\">Duplica</button>\r\n        <button type=\"button\" class=\"fb-btn fb-btn--danger\" (click)=\"requestRemove()\">Elimina</button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-inspector__empty{margin:16px 12px;font-size:12px;line-height:1.5;color:var(--fb-text-muted, #667085)}.fb-inspector__header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-inspector__type{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__title{margin:2px 0 0;font-size:14px;font-weight:600;color:var(--fb-text, #1d2939)}.fb-inspector__body{flex:1;min-height:0;overflow-y:auto;padding:14px}.fb-inspector__issues{margin:0 0 12px;padding:0;list-style:none}.fb-inspector__issue{margin-bottom:4px;padding:6px 8px;border-left:3px solid var(--fb-text-subtle, #98a2b3);border-radius:3px;background:var(--fb-surface-alt, #f8f9fb);font-size:11px;line-height:1.4;color:var(--fb-text, #1d2939)}.fb-inspector__issue--error{border-left-color:var(--fb-error, #c9372c)}.fb-inspector__issue--warning{border-left-color:var(--fb-warning, #b7791f)}.fb-inspector__issue-code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__issue-path{display:block;margin-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:var(--fb-text-muted, #667085)}.fb-inspector__position{margin:0;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__divider{margin:12px 0;border:0;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!selectedName()) {\r\n  <p class=\"fb-inspector__empty\">\r\n    Seleziona un elemento sul canvas per modificarlo, oppure trascina un elemento dalla palette.\r\n  </p>\r\n} @else {\r\n  @if (showHeader()) {\r\n    <header class=\"fb-inspector__header\">\r\n      <div>\r\n        <span class=\"fb-inspector__type\">{{ typeLabel() }}</span>\r\n        <h2 class=\"fb-inspector__title\">\r\n          {{ isStart() ? 'Avvio del flow' : node()?.label || selectedName() }}\r\n        </h2>\r\n      </div>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"close()\">\r\n        \u00D7\r\n      </button>\r\n    </header>\r\n  }\r\n\r\n  <div class=\"fb-inspector__body\">\r\n    @if (issues().length) {\r\n      <ul class=\"fb-inspector__issues\">\r\n        <!-- `$index`: due rilievi con lo stesso codice e lo stesso path sono possibili. -->\r\n        @for (issue of issues(); track $index) {\r\n          <li\r\n            class=\"fb-inspector__issue\"\r\n            [class.fb-inspector__issue--error]=\"issue.severity === 'Error'\"\r\n            [class.fb-inspector__issue--warning]=\"issue.severity === 'Warning'\"\r\n          >\r\n            <span class=\"fb-inspector__issue-code\">{{ issue.code }}</span>\r\n            {{ issue.message }}\r\n            @if (issue.path) {\r\n              <span class=\"fb-inspector__issue-path\">{{ issue.path }}</span>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n\r\n    @if (isUnsupported()) {\r\n      <p class=\"fb-callout fb-callout--error\">\r\n        Questo tipo di elemento non e\u2019 supportato dal motore: il flow che lo contiene non parte\r\n        (ELEMENT_NOT_SUPPORTED). Non e\u2019 creabile dalla palette; se e\u2019 arrivato da un documento importato,\r\n        va rimosso.\r\n      </p>\r\n    }\r\n\r\n    @if (!isStart()) {\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Etichetta</label>\r\n        <input\r\n          class=\"fb-input\"\r\n          [value]=\"$any(node()?.label) || ''\"\r\n          placeholder=\"Nome mostrato sul canvas\"\r\n          (input)=\"setLabel($any($event.target).value)\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Nome tecnico</label>\r\n        @if (pendingName() === null) {\r\n          <div class=\"fb-field__row\">\r\n            <input class=\"fb-input fb-input--mono\" [value]=\"selectedName() || ''\" readonly />\r\n            <button type=\"button\" class=\"fb-btn\" (click)=\"startRename()\">Rinomina</button>\r\n          </div>\r\n          <p class=\"fb-field__hint\">\r\n            \u00C8 l\u2019identificatore con cui i riferimenti raggiungono questo elemento.\r\n            @if (referenceCount() > 1) {\r\n              Compare {{ referenceCount() }} volte nel documento.\r\n            }\r\n          </p>\r\n        } @else {\r\n          <input\r\n            class=\"fb-input fb-input--mono\"\r\n            [class.fb-input--invalid]=\"!!nameError()\"\r\n            [value]=\"pendingName() || ''\"\r\n            (input)=\"onPendingNameInput($any($event.target).value)\"\r\n          />\r\n          @if (nameError()) {\r\n            <p class=\"fb-field__error\">{{ nameError() }}</p>\r\n          } @else {\r\n            <p class=\"fb-field__hint fb-field__hint--warn\">\r\n              La rinomina riscrive tutti i riferimenti che puntano a questo elemento\r\n              ({{ referenceCount() }} occorrenze): nessuna primitiva del backend lo fa, lo fa l\u2019editor.\r\n            </p>\r\n          }\r\n          <div class=\"fb-field__row\">\r\n            <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"!canRename()\" (click)=\"applyRename()\">\r\n              Applica\r\n            </button>\r\n            <button type=\"button\" class=\"fb-btn\" (click)=\"suggestNameFromLabel()\">Genera dalla label</button>\r\n            <button type=\"button\" class=\"fb-btn fb-btn--ghost\" (click)=\"cancelRename()\">Annulla</button>\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Descrizione</label>\r\n        <textarea\r\n          class=\"fb-textarea\"\r\n          [value]=\"$any(node()?.description) || ''\"\r\n          (input)=\"setDescription($any($event.target).value)\"\r\n        ></textarea>\r\n      </div>\r\n    }\r\n\r\n    <p class=\"fb-inspector__position\">\r\n      Posizione sul canvas: {{ position().x }}, {{ position().y }}\r\n    </p>\r\n\r\n    <hr class=\"fb-inspector__divider\" />\r\n\r\n    @if (isStart()) {\r\n      <fb-start-inspector />\r\n    } @else if (node()) {\r\n      @switch (type()) {\r\n        @case ('Screen') {\r\n          <fb-screen-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('DynamicScreen') {\r\n          <fb-dynamic-screen-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Assignment') {\r\n          <fb-assignment-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Decision') {\r\n          <fb-decision-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Loop') {\r\n          <fb-loop-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('CollectionProcessor') {\r\n          <fb-collection-processor-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('CustomError') {\r\n          <fb-custom-error-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Wait') {\r\n          <fb-wait-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('RecordLookup') {\r\n          <fb-record-lookup-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('RecordCreate') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordCreate\" />\r\n        }\r\n        @case ('RecordUpdate') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordUpdate\" />\r\n        }\r\n        @case ('RecordDelete') {\r\n          <fb-record-write-inspector [name]=\"selectedName()!\" [node]=\"node()!\" type=\"RecordDelete\" />\r\n        }\r\n        @case ('RecordRollback') {\r\n          <fb-record-rollback-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('ActionCall') {\r\n          <fb-action-call-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('ScriptCall') {\r\n          <fb-script-call-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Subflow') {\r\n          <fb-subflow-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('Transform') {\r\n          <fb-transform-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @case ('OrchestratedStage') {\r\n          <fb-orchestrated-stage-inspector [name]=\"selectedName()!\" [node]=\"node()!\" />\r\n        }\r\n        @default {\r\n          <p class=\"fb-callout fb-callout--warn\">\r\n            Nessun form specifico per il tipo \u00AB{{ type() }}\u00BB: i campi comuni sono modificabili qui sopra.\r\n          </p>\r\n        }\r\n      }\r\n    }\r\n\r\n    @if (!isStart()) {\r\n      <hr class=\"fb-inspector__divider\" />\r\n      <div class=\"fb-field__row\">\r\n        <button type=\"button\" class=\"fb-btn\" (click)=\"requestDuplicate()\">Duplica</button>\r\n        <button type=\"button\" class=\"fb-btn fb-btn--danger\" (click)=\"requestRemove()\">Elimina</button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-inspector__empty{margin:16px 12px;font-size:12px;line-height:1.5;color:var(--fb-text-muted, #667085)}.fb-inspector__header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-inspector__type{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__title{margin:2px 0 0;font-size:14px;font-weight:600;color:var(--fb-text, #1d2939)}.fb-inspector__body{flex:1;min-height:0;overflow-y:auto;padding:14px}.fb-inspector__issues{margin:0 0 12px;padding:0;list-style:none}.fb-inspector__issue{margin-bottom:4px;padding:6px 8px;border-left:3px solid var(--fb-text-subtle, #98a2b3);border-radius:3px;background:var(--fb-surface-alt, #f8f9fb);font-size:11px;line-height:1.4;color:var(--fb-text, #1d2939)}.fb-inspector__issue--error{border-left-color:var(--fb-error, #c9372c)}.fb-inspector__issue--warning{border-left-color:var(--fb-warning, #b7791f)}.fb-inspector__issue-code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__issue-path{display:block;margin-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:var(--fb-text-muted, #667085)}.fb-inspector__position{margin:0;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-inspector__divider{margin:12px 0;border:0;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}\n"] }]
         }], propDecorators: { selectedName: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedName", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], removeRequested: [{ type: i0.Output, args: ["removeRequested"] }], duplicateRequested: [{ type: i0.Output, args: ["duplicateRequested"] }] } });
 
 /**
@@ -9142,11 +10000,11 @@ class ElementDialogComponent {
         this.duplicateRequested.emit(name);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ElementDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.27", type: ElementDialogComponent, isStandalone: true, selector: "fb-element-dialog", inputs: { selectedName: { classPropertyName: "selectedName", publicName: "selectedName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", removeRequested: "removeRequested", duplicateRequested: "duplicateRequested" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, 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      (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(760px,100%);max-height: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;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"], dependencies: [{ kind: "component", type: ElementInspectorComponent, selector: "fb-element-inspector", inputs: ["selectedName", "showHeader"], outputs: ["closed", "removeRequested", "duplicateRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.27", type: ElementDialogComponent, isStandalone: true, selector: "fb-element-dialog", inputs: { selectedName: { classPropertyName: "selectedName", publicName: "selectedName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", removeRequested: "removeRequested", duplicateRequested: "duplicateRequested" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, 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      (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;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"], dependencies: [{ kind: "component", type: ElementInspectorComponent, selector: "fb-element-inspector", inputs: ["selectedName", "showHeader"], outputs: ["closed", "removeRequested", "duplicateRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ElementDialogComponent, decorators: [{
             type: Component,
-            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      (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(760px,100%);max-height: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;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"] }]
+            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      (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;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"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
 
 /**
@@ -10265,11 +11123,19 @@ class FlowBuilderComponent {
         const current = this.store.document().processType;
         return !!current && !this.processTypes().some((type) => type.value === current);
     }, ...(ngDevMode ? [{ debugName: "isProcessTypeOutOfCatalog" }] : []));
+    /**
+     * Quante schermate ha il flow. **Entrambi** i tipi di screen contano: quello a form e quello
+     * dinamico sono la stessa interazione con l'utente, e contarne uno solo faceva comparire
+     * «questo flow Screen non ha screen» su un flow fatto di soli screen dinamici (§5.2).
+     */
+    screenCount = computed(() => {
+        const document = this.store.document();
+        return (document.screens?.length ?? 0) + (document.dynamicScreens?.length ?? 0);
+    }, ...(ngDevMode ? [{ debugName: "screenCount" }] : []));
     /** `AutoLaunched` + screen e' un errore di validazione: si segnala subito (§13.6). */
-    hasScreensInAutoLaunched = computed(() => this.store.document().processType === 'AutoLaunched' &&
-        (this.store.document().screens?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "hasScreensInAutoLaunched" }] : []));
+    hasScreensInAutoLaunched = computed(() => this.store.document().processType === 'AutoLaunched' && this.screenCount() > 0, ...(ngDevMode ? [{ debugName: "hasScreensInAutoLaunched" }] : []));
     /** Un flow `Screen` senza screen e' `SCREEN_FLOW_WITHOUT_SCREENS`. */
-    hasNoScreensInScreenFlow = computed(() => this.store.document().processType === 'Screen' && (this.store.document().screens?.length ?? 0) === 0, ...(ngDevMode ? [{ debugName: "hasNoScreensInScreenFlow" }] : []));
+    hasNoScreensInScreenFlow = computed(() => this.store.document().processType === 'Screen' && this.screenCount() === 0, ...(ngDevMode ? [{ debugName: "hasNoScreensInScreenFlow" }] : []));
     /**
      * Un flow `Orchestration` senza stage di orchestrazione e' un **avviso**
      * (`ORCHESTRATION_WITHOUT_STAGES`): il tipo dichiara un'orchestrazione che non c'e' (§3.1).
@@ -10632,5 +11498,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ConditionEditorComponent, ConnectorEditorComponent, DebugPanelComponent, 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, 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, areTypesComparable, canvasNodeId, checkConditionLogic, checkFlowName, describePathEntry, elementIcon, emptyFlowDefinition, filterReferences, flowNodeWidth, flowNodeWidthClass, isCustomConditionLogic, isEmptyReferenceFilter, isGlobalReference, isNumericType, isTypeCheckedOperator, isValidFlowName, isValued, loadPathLevel, matchesReferenceFilter, moveCondition, navigatePath, outletByKey, outletsOf, parseCanvasNodeId, parseInvariantNumber, parseSourceConnectorId, parseTargetConnectorId, pathAvailableNames, pathContainerLabel, pathNotVerifiableMessage, referenceRoot, remapConditionLogic, removeCondition, resolvePath, 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_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, 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, screenFieldNames, severityBucket, slugifyFlowName, sourceConnectorId, stageStepNames, stageStepOutputReferenced, stepsOf, targetConnectorId, uniqueFlowName, valuedFieldOf, valuedFieldsOf, variantFieldOf, variantOf, variantPresetOf };
 //# sourceMappingURL=esfaenza-flow-builder.mjs.map