@esfaenza/flow-builder 20.3.34 → 20.3.36

package/fesm2022/esfaenza-flow-builder.mjs

@@ -3488,14 +3488,25 @@ class FlowDocumentStore {
      *
      * `silent` per il trascinamento: il chiamante registra un solo passo alla fine.
      */
+    /**
+     * `from` e' l'origine da cui misurare lo spostamento, e serve per i riquadri **auto-dimensionati**
+     * (§3.6): lì il rettangolo disegnato e' l'ingombro dei membri, che dopo che qualcuno ha spostato un
+     * membro non coincide piu' con `locationX`/`locationY`. Misurando dal documento, lo spostamento
+     * della cornice portava i membri di un delta che nessuno aveva chiesto. Chi disegna il rettangolo
+     * lo conosce: e' il canvas, e lo passa. Assente, si misura dal documento come prima.
+     */
     moveGroup(name, x, y, options) {
         const reference = this.groups().find((candidate) => candidate.name === name);
         if (!reference) {
             return;
         }
         const rounded = { x: Math.round(x), y: Math.round(y) };
-        const deltaX = rounded.x - Math.round(reference.group.locationX ?? 0);
-        const deltaY = rounded.y - Math.round(reference.group.locationY ?? 0);
+        const origin = options?.from ?? {
+            x: reference.group.locationX ?? 0,
+            y: reference.group.locationY ?? 0,
+        };
+        const deltaX = rounded.x - Math.round(origin.x);
+        const deltaY = rounded.y - Math.round(origin.y);
         const members = new Set(reference.group.members ?? []);
         this.update((draft) => {
             const group = draft.groups?.[reference.index];
@@ -4961,6 +4972,42 @@ function canvasGroupId(groupName) {
 function parseCanvasGroupId(id) {
     return id.startsWith('group:') ? id.slice(6) : null;
 }
+/**
+ * Il **node segnaposto** di un riquadro chiuso (§3.6).
+ *
+ * Terzo prefisso, accanto a `node:` e `group:`, e per la stessa ragione: gli eventi della libreria
+ * portano tutto nello stesso elenco, e un riquadro chiuso non e' ne' un elemento del documento ne'
+ * una cornice — spostarlo sposta i **membri**, cancellarlo cancella il riquadro.
+ */
+function canvasFoldId(groupName) {
+    return `fold:${groupName}`;
+}
+function parseCanvasFoldId(id) {
+    return id.startsWith('fold:') ? id.slice(5) : null;
+}
+/**
+ * I connettori del segnaposto: uno in ingresso e **uno solo** in uscita.
+ *
+ * Uno solo perche' il segnaposto non ha rami: gli archi che escono dal riquadro appartengono a
+ * elementi diversi che stanno dentro, e disegnarne un connettore per ciascuno rimetterebbe sul
+ * canvas la complessita' che chiudere il riquadro serviva a togliere. L'arco porta nell'etichetta
+ * il nome dell'elemento interno, che e' l'informazione che serve.
+ *
+ * Il nome dietro il prefisso e' quello del **riquadro**, quindi `parseSourceConnectorId` risponde
+ * `fold:<riquadro>`, che non e' il nome di nessun elemento: chi gestisce i gesti degli archi lo
+ * riconosce con {@link isFoldReference} e rifiuta, invece di scrivere un connector su un node che
+ * non esiste.
+ */
+function foldTargetConnectorId(groupName) {
+    return targetConnectorId(canvasFoldId(groupName));
+}
+function foldSourceConnectorId(groupName) {
+    return sourceConnectorId(canvasFoldId(groupName), 'fold');
+}
+/** `true` se il nome estratto da un connettore e' un segnaposto e non un elemento del documento. */
+function isFoldReference(name) {
+    return !!name && name.startsWith('fold:');
+}
 
 /**
  * Il canvas del grafo.
@@ -4985,6 +5032,14 @@ function parseCanvasGroupId(id) {
  */
 const FLOW_NODE_WIDTH = 240;
 const FLOW_NODE_HEIGHT = 116;
+/**
+ * L'ingombro della pastiglia di un riquadro chiuso (§3.6). Gli stessi valori stanno nel CSS
+ * (`.fb-fold`): la misura serve **due volte** — a disegnarla e a stimarla per l'inquadratura — e la
+ * larghezza non puo' essere uno stile inline, perche' @foblex/flow riscrive l'attributo `style` del
+ * node a ogni riposizionamento.
+ */
+const FLOW_FOLD_WIDTH = 260;
+const FLOW_FOLD_HEIGHT = 64;
 /**
  * La larghezza del node per numero di rami: le uscite stanno in fila sul bordo inferiore,
  * quindi una Decision con quattro regole ha bisogno di piu' spazio di un Assignment.
@@ -4996,6 +5051,20 @@ const FLOW_NODE_HEIGHT = 116;
  * restare uguali: la stessa misura serve a disegnare il node e a stimarlo per dagre.
  */
 const OUTLET_WIDTHS = [240, 240, 240, 304, 380, 456, 520];
+/**
+ * La peggiore di due gravita' (§7). Serve al segnaposto di un riquadro chiuso, che riassume i
+ * rilievi di cio' che nasconde: `SEVERITY_BUCKETS` e' ordinato per gravita' decrescente, quindi
+ * vince chi ha l'indice piu' basso.
+ */
+function worstSeverity(left, right) {
+    if (!left) {
+        return right;
+    }
+    if (!right) {
+        return left;
+    }
+    return SEVERITY_BUCKETS.indexOf(left) <= SEVERITY_BUCKETS.indexOf(right) ? left : right;
+}
 /**
  * Margine attorno al flow quando lo si inquadra: senza, i node di bordo toccano il bordo
  * della viewport e sembrano tagliati. In basso a destra ci sono minimappa e pulsante, ma il
@@ -5121,7 +5190,17 @@ class FlowCanvasComponent {
      * Con un solo node (un flow appena creato ha solo lo Start) non si inquadra niente: la
      * vista si spalancherebbe su una card sola.
      */
+    /**
+     * L'elemento su cui andare appena i node sono stati disegnati: lo scrive `bringIntoView` quando
+     * per mostrarlo ha dovuto aprire un riquadro chiuso.
+     */
+    pendingFocus = null;
     onNodesRendered() {
+        const pending = this.pendingFocus;
+        if (pending) {
+            this.pendingFocus = null;
+            this.bringIntoView(pending);
+        }
         if (this.hasFramedOnce || this.nodes().length < 2) {
             return;
         }
@@ -5134,6 +5213,19 @@ class FlowCanvasComponent {
      * 100% non vuole essere rimpicciolito per aver cercato un nome.
      */
     bringIntoView(name) {
+        /**
+         * L'elemento e' dentro un riquadro **chiuso**: non c'e' niente da inquadrare finche' non lo si
+         * apre. Aprirlo e' l'unica cosa sensata — la ricerca e il clic su un problema promettono di
+         * portare *sull'elemento*, e una vista centrata su una pastiglia non mostra cio' che si cercava.
+         * Il centramento aspetta il render: `centerGroupOrNode` non fa niente finche' la libreria non ha
+         * misurato i node, e avviserebbe con FF1009 senza spostare niente.
+         */
+        const folded = this.foldedByMember().get(name);
+        if (folded) {
+            this.pendingFocus = name;
+            this.openGroup(folded);
+            return;
+        }
         /**
          * Anche i **riquadri** (§3.6) sono un bersaglio: un rilievo della loro famiglia porta il
          * nome di un riquadro, e senza questo ramo il clic sul problema selezionava una cornice che
@@ -5287,6 +5379,14 @@ class FlowCanvasComponent {
             right = Math.max(right, node.position.x + flowNodeWidth(node.outlets.length));
             bottom = Math.max(bottom, node.position.y + FLOW_NODE_HEIGHT);
         }
+        // Le pastiglie dei riquadri chiusi sono disegnate come i node: fuori dal conto, un flow tutto
+        // chiuso si inquadrerebbe su cio' che resta aperto.
+        for (const fold of this.folds()) {
+            left = Math.min(left, fold.position.x);
+            top = Math.min(top, fold.position.y);
+            right = Math.max(right, fold.position.x + FLOW_FOLD_WIDTH);
+            bottom = Math.max(bottom, fold.position.y + FLOW_FOLD_HEIGHT);
+        }
         const width = right - left;
         const height = bottom - top;
         if (width <= 0 || height <= 0) {
@@ -5324,7 +5424,12 @@ class FlowCanvasComponent {
             isReachable: true,
             subtitle: this.startSubtitle(),
         }));
+        const hidden = this.foldedByMember();
         for (const reference of this.store.nodes()) {
+            // Membro di un riquadro **chiuso**: al suo posto si disegna la pastiglia del riquadro.
+            if (hidden.has(reference.name)) {
+                continue;
+            }
             result.push(this.toCanvasNode({
                 name: reference.name,
                 type: reference.type,
@@ -5371,21 +5476,75 @@ class FlowCanvasComponent {
             }),
         };
     }
-    /** Gli archi con destinazione: solo questi diventano `<f-connection>`. */
+    /**
+     * Gli archi con destinazione: solo questi diventano `<f-connection>`.
+     *
+     * Un riquadro **chiuso** (§3.6) cambia tre cose, e sono la ragione per cui questo non e' piu' una
+     * `map` sulle uscite del documento. Un arco fra due membri dello stesso riquadro chiuso **non si
+     * disegna**: entrambi i capi sono nascosti, e un arco fra due punti che non ci sono e' un arco che
+     * parte dall'angolo del canvas. Un arco che attraversa il confine si riattacca al **segnaposto**,
+     * che e' l'unico modo di nascondere un node senza rompere l'arco: un connettore con `display:
+     * none` ha geometria 0×0 (regola 4 di @foblex/flow), quindi il node si nasconde solo se l'arco
+     * trova un connettore vero altrove. E due archi che, riattaccati, avrebbero gli stessi capi
+     * diventano **uno**: sarebbero due tratti sovrapposti, indistinguibili e cliccabili a caso.
+     */
     edges = computed(() => {
-        const known = new Set(this.nodes().map((node) => node.name));
-        return this.store
-            .edges()
-            .filter((edge) => !!edge.to && known.has(edge.to))
-            .map((edge) => ({
-            id: edge.id,
-            sourceId: sourceConnectorId(edge.from, edge.outletKey),
-            targetId: targetConnectorId(edge.to),
-            kind: edge.kind,
-            label: edge.label,
-            isGoTo: !!edge.isGoTo,
-        }));
+        const hidden = this.foldedByMember();
+        const visible = new Set(this.nodes().map((node) => node.name));
+        const result = [];
+        const drawn = new Set();
+        for (const edge of this.store.edges()) {
+            const to = edge.to;
+            if (!to) {
+                continue;
+            }
+            const fromFold = hidden.get(edge.from);
+            const toFold = hidden.get(to);
+            if ((!fromFold && !visible.has(edge.from)) || (!toFold && !visible.has(to))) {
+                continue;
+            }
+            if (fromFold && fromFold === toFold) {
+                // Interno al riquadro chiuso: non c'e' niente da disegnare fra due elementi nascosti.
+                continue;
+            }
+            const sourceId = fromFold
+                ? foldSourceConnectorId(fromFold)
+                : sourceConnectorId(edge.from, edge.outletKey);
+            const targetId = toFold ? foldTargetConnectorId(toFold) : targetConnectorId(to);
+            const key = `${sourceId}>${targetId}`;
+            if (drawn.has(key)) {
+                continue;
+            }
+            drawn.add(key);
+            result.push({
+                id: edge.id,
+                sourceId,
+                targetId,
+                kind: edge.kind,
+                label: this.edgeLabel(edge.from, to, edge.label, !!fromFold, !!toFold),
+                isGoTo: !!edge.isGoTo,
+                isFolded: !!fromFold || !!toFold,
+            });
+        }
+        return result;
     }, ...(ngDevMode ? [{ debugName: "edges" }] : []));
+    /**
+     * L'etichetta di un arco. Sugli archi normali e' quella del ramo; su un arco riattaccato a un
+     * segnaposto e' il **nome dell'elemento nascosto**, perche' quella e' l'unica informazione che
+     * chiudere il riquadro ha portato via: «da dove esce» e «dove entra» non si leggono piu' dai capi.
+     */
+    edgeLabel(from, to, label, fromFold, toFold) {
+        if (fromFold && toFold) {
+            return `${from} → ${to}`;
+        }
+        if (fromFold) {
+            return label ? `${from} · ${label}` : from;
+        }
+        if (toFold) {
+            return label ? `${label} · ${to}` : to;
+        }
+        return label ?? null;
+    }
     // -------------------------------------------------------------------------
     // Riquadri di raggruppamento (§3.6)
     // -------------------------------------------------------------------------
@@ -5416,7 +5575,11 @@ class FlowCanvasComponent {
      */
     groups = computed(() => {
         const known = new Set(this.nodeRects().map((entry) => entry.name));
-        return this.store.groups().map((reference) => {
+        return this.store.groups()
+            // Un riquadro chiuso e' disegnato da `folds()`: cornice e pastiglia sono **alternative**,
+            // e disegnarle entrambe metterebbe due titoli nello stesso punto.
+            .filter((reference) => !reference.group.isCollapsed)
+            .map((reference) => {
             const group = reference.group;
             const rect = groupRect(group, this.rectsOf(group.members));
             const members = group.members ?? [];
@@ -5426,18 +5589,87 @@ class FlowCanvasComponent {
                 label: group.label || reference.name || 'Riquadro',
                 description: group.description ?? null,
                 position: { x: rect.x, y: rect.y },
-                // Chiuso = resta la sola barra del titolo. I node **non** si nascondono: un connettore
-                // con `display: none` ha geometria 0×0 e l'arco si attaccherebbe nel punto sbagliato,
-                // quindi chiudere il riquadro toglie di mezzo la cornice, non il contenuto.
-                size: { width: rect.width, height: group.isCollapsed ? GROUP_HEADER_HEIGHT : rect.height },
+                size: { width: rect.width, height: rect.height },
                 colorClass: groupColorClass(group.color),
-                isCollapsed: !!group.isCollapsed,
+                isCollapsed: false,
                 memberCount: members.filter((name) => known.has(name)).length,
                 unknownMembers: members.filter((name) => !known.has(name)),
                 isAutoSized: hasAutoSize(group),
             };
         });
     }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
+    /**
+     * Chi nasconde chi: nome del membro → nome del riquadro chiuso che lo copre.
+     *
+     * Un elemento in **due** riquadri chiusi finisce nel primo in ordine di documento: sarebbe
+     * disegnato due volte, e due pastiglie che si prendono lo stesso arco fanno sparire un arco senza
+     * dire niente. La sovrapposizione e' legittima (i riquadri sono commenti, §3.6), quindi la regola
+     * deve essere deterministica, non impedita.
+     */
+    foldedByMember = computed(() => {
+        const map = new Map();
+        for (const reference of this.store.groups()) {
+            if (!reference.group.isCollapsed) {
+                continue;
+            }
+            for (const member of reference.group.members ?? []) {
+                if (!map.has(member)) {
+                    map.set(member, reference.name);
+                }
+            }
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "foldedByMember" }] : []));
+    /**
+     * I riquadri chiusi, disegnati come node segnaposto.
+     *
+     * La pastiglia sta nell'angolo in alto a sinistra del rettangolo che la cornice occupava: e' il
+     * punto da cui il riquadro si e' chiuso, quindi riaprendolo il contenuto ricompare dove era. Il
+     * rettangolo lo da' `groupRect`, non `width`/`height` del documento: a 0 significano «calcolala
+     * sui membri» (§3.6), e i membri esistono anche mentre sono nascosti.
+     */
+    folds = computed(() => {
+        const known = new Set(this.nodeRects().map((entry) => entry.name));
+        return this.store.groups()
+            .filter((reference) => !!reference.group.isCollapsed)
+            .map((reference) => {
+            const group = reference.group;
+            const rect = groupRect(group, this.rectsOf(group.members));
+            const members = group.members ?? [];
+            const inside = members.filter((name) => known.has(name));
+            // I rilievi degli elementi nascosti, sommati: chiudere un riquadro non deve nascondere un
+            // errore, altrimenti il badge del pannello dei problemi conterebbe cose invisibili.
+            let issueCount = 0;
+            let severity = null;
+            for (const name of inside) {
+                issueCount += (this.validation.issuesByElement().get(name) ?? []).length;
+                severity = worstSeverity(severity, this.validation.severityOf(name));
+            }
+            return {
+                name: reference.name,
+                id: canvasFoldId(reference.name),
+                label: group.label || reference.name || 'Riquadro',
+                description: group.description ?? null,
+                position: { x: rect.x, y: rect.y },
+                colorClass: groupColorClass(group.color),
+                memberCount: inside.length,
+                issueCount,
+                severity,
+                unknownMembers: members.filter((name) => !known.has(name)),
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "folds" }] : []));
+    isFoldSelected(fold) {
+        return this.selectedGroupName() === fold.name;
+    }
+    /** L'angolo da cui il riquadro e' stato disegnato, aperto o chiuso: e' l'origine dello spostamento. */
+    drawnOrigin(name) {
+        const group = this.groups().find((candidate) => candidate.name === name);
+        if (group) {
+            return group.position;
+        }
+        return this.folds().find((candidate) => candidate.name === name)?.position;
+    }
     /**
      * Ricalcola l'appartenenza dai rettangoli: e' il gesto «trascino un node dentro o fuori dal
      * riquadro» della §3.6, regola 2 — la geometria non **e'** l'appartenenza, la **calcola**, e
@@ -5456,6 +5688,15 @@ class FlowCanvasComponent {
         const known = new Set(all.map((entry) => entry.name));
         const movedSet = new Set(moved);
         for (const reference of this.store.groups()) {
+            /**
+             * Un riquadro **chiuso** non cambia i suoi membri per un trascinamento: i suoi elementi non
+             * sono sullo schermo, e il rettangolo che occupava e' coperto dalla pastiglia. Senza questo
+             * salto, trascinare un elemento sopra la pastiglia lo faceva **sparire** — entrava fra i
+             * membri di un riquadro chiuso, e il solo modo di ritrovarlo era riaprirlo.
+             */
+            if (reference.group.isCollapsed) {
+                continue;
+            }
             const auto = hasAutoSize(reference.group);
             const memberNames = (reference.group.members ?? []).filter((name) => !(auto && movedSet.has(name)));
             const rect = groupRect(reference.group, this.rectsOf(memberNames));
@@ -5463,7 +5704,20 @@ class FlowCanvasComponent {
             this.store.setGroupMembers(reference.name, members, { silent: true });
         }
     }
-    /** Apre e chiude il riquadro. Non tocca i membri: chiuso e' un fatto del disegno (§3.6). */
+    /** Apre un riquadro chiuso. Passo di storico normale, come la chiusura a mano: e' la stessa modifica. */
+    openGroup(name) {
+        const reference = this.store.groups().find((candidate) => candidate.name === name);
+        if (!reference?.group.isCollapsed) {
+            return;
+        }
+        this.store.updateGroup(reference.index, (group) => {
+            group.isCollapsed = undefined;
+        });
+    }
+    /**
+     * Apre e chiude il riquadro. Non tocca i membri: chiuso e aperto sono due **disegni** dello
+     * stesso riquadro (§3.6) — chiuso, i membri non si disegnano e al loro posto c'e' la pastiglia.
+     */
     toggleGroupCollapsed(event, name) {
         event.stopPropagation();
         const reference = this.store.groups().find((candidate) => candidate.name === name);
@@ -5575,8 +5829,15 @@ class FlowCanvasComponent {
      */
     _insertionEdgeId = signal(null, ...(ngDevMode ? [{ debugName: "_insertionEdgeId" }] : []));
     insertionEdgeId = this._insertionEdgeId.asReadonly();
-    /** Gli id degli archi disegnati: il hit test accetta solo questi. */
-    edgeIds = computed(() => new Set(this.edges().map((edge) => edge.id)), ...(ngDevMode ? [{ debugName: "edgeIds" }] : []));
+    /**
+     * Gli id degli archi su cui si puo' innestare: il hit test accetta solo questi.
+     *
+     * Gli archi di un riquadro chiuso restano fuori di proposito. Innestare vuol dire mettersi **in
+     * mezzo** a due elementi, e di quell'arco uno dei due non si vede: il flow si ricollegherebbe
+     * attorno a un elemento che non e' sullo schermo, che non e' una scelta ma una sorpresa. Per
+     * innestare lì si apre il riquadro.
+     */
+    edgeIds = computed(() => new Set(this.edges().filter((edge) => !edge.isFolded).map((edge) => edge.id)), ...(ngDevMode ? [{ debugName: "edgeIds" }] : []));
     /** L'ascoltatore attivo solo durante un trascinamento dalla palette. */
     pointerListener = null;
     /**
@@ -5670,6 +5931,14 @@ class FlowCanvasComponent {
             return;
         }
         const target = event.targetId ? parseTargetConnectorId(event.targetId) : null;
+        /**
+         * I connettori di una pastiglia non sono connettori di nessun elemento: dietro ce ne stanno
+         * diversi, e non c'e' modo di sapere quale l'utente intendeva. Il gesto si rifiuta invece di
+         * scrivere sul primo che capita — per collegare un elemento nascosto si apre il riquadro.
+         */
+        if (isFoldReference(source.nodeName) || isFoldReference(target)) {
+            return;
+        }
         if (target === source.nodeName) {
             // `CONNECTOR_SELF_LOOP`: un node che punta a se stesso non e' mai voluto.
             return;
@@ -5682,15 +5951,22 @@ class FlowCanvasComponent {
         if (!previousSource) {
             return;
         }
+        // Un capo su una pastiglia: vedi `onCreateConnection`, dietro non c'e' un solo elemento.
+        if (isFoldReference(previousSource.nodeName)) {
+            return;
+        }
         if (event.endpoint === 'target') {
             const nextTarget = event.nextTargetId ? parseTargetConnectorId(event.nextTargetId) : null;
+            if (isFoldReference(nextTarget)) {
+                return;
+            }
             this.store.setConnector(previousSource.nodeName, previousSource.outletKey, nextTarget ?? undefined);
             return;
         }
         // Capo sorgente spostato: l'arco cambia uscita, la destinazione resta.
         const nextSource = event.nextSourceId ? parseSourceConnectorId(event.nextSourceId) : null;
         const target = parseTargetConnectorId(event.previousTargetId);
-        if (!nextSource || !target) {
+        if (!nextSource || !target || isFoldReference(nextSource.nodeName) || isFoldReference(target)) {
             return;
         }
         this.store.removeConnector(previousSource.nodeName, previousSource.outletKey);
@@ -5716,6 +5992,17 @@ class FlowCanvasComponent {
             const groupName = parseCanvasGroupId(moved.id);
             if (groupName) {
                 moves.push({ name: groupName, position: moved.position, isGroup: true });
+                continue;
+            }
+            /**
+             * La pastiglia di un riquadro chiuso e' un node per la libreria, ma spostarla e' spostare il
+             * **riquadro**: i suoi membri vengono dietro, come con la cornice aperta. Senza questo ramo il
+             * gesto non faceva niente e la pastiglia tornava al suo posto — il riquadro chiuso sarebbe
+             * stato l'unica cosa del canvas che non si puo' spostare.
+             */
+            const foldName = parseCanvasFoldId(moved.id);
+            if (foldName) {
+                moves.push({ name: foldName, position: moved.position, isGroup: true });
             }
         }
         if (!moves.length) {
@@ -5724,8 +6011,16 @@ class FlowCanvasComponent {
         moves.forEach((moved, index) => {
             const options = { silent: index > 0 };
             if (moved.isGroup) {
-                // Il riquadro si porta dietro i suoi membri: e' cio' per cui `members` esiste (§3.6).
-                this.store.moveGroup(moved.name, moved.position.x, moved.position.y, options);
+                /**
+                 * Il riquadro si porta dietro i suoi membri: e' cio' per cui `members` esiste (§3.6).
+                 * L'origine da cui misurare e' quella **disegnata** e non quella del documento: su un
+                 * riquadro auto-dimensionato le due cose divergono appena qualcuno sposta un membro, e
+                 * misurare dal documento spostava i membri di un delta sbagliato.
+                 */
+                this.store.moveGroup(moved.name, moved.position.x, moved.position.y, {
+                    ...options,
+                    from: this.drawnOrigin(moved.name),
+                });
             }
             else {
                 this.store.moveNode(moved.name, moved.position.x, moved.position.y, options);
@@ -5753,7 +6048,7 @@ class FlowCanvasComponent {
          * porterebbe via il form che si stava guardando.
          */
         const groups = event.nodeIds
-            .map((id) => parseCanvasGroupId(id))
+            .map((id) => parseCanvasGroupId(id) ?? parseCanvasFoldId(id))
             .filter((name) => !!name);
         if (groups.length === 1 && !names.length) {
             this.groupSelected.emit(groups[0]);
@@ -5770,8 +6065,9 @@ class FlowCanvasComponent {
                 this.nodeRemoveRequested.emit(name);
                 continue;
             }
-            // Cancellare un riquadro non cancella cio' che contiene: e' un commento (§3.6).
-            const groupName = parseCanvasGroupId(id);
+            // Cancellare un riquadro non cancella cio' che contiene: e' un commento (§3.6). Vale anche
+            // per un riquadro **chiuso**: gli elementi tornano visibili, non spariscono con la pastiglia.
+            const groupName = parseCanvasGroupId(id) ?? parseCanvasFoldId(id);
             if (groupName) {
                 this.groupRemoveRequested.emit(groupName);
             }
@@ -5842,6 +6138,13 @@ class FlowCanvasComponent {
     targetIdOf(node) {
         return targetConnectorId(node.name);
     }
+    /** I connettori della pastiglia di un riquadro chiuso: gli id li costruisce il modello, non il template. */
+    foldTargetIdOf(fold) {
+        return foldTargetConnectorId(fold.name);
+    }
+    foldSourceIdOf(fold) {
+        return foldSourceConnectorId(fold.name);
+    }
     /**
      * Selezionato = corrente **oppure** parte del blocco selezionato. Senza il secondo caso, un
      * rettangolo che prende cinque elementi ne evidenziava uno, e i comandi che agiscono su tutti
@@ -5887,7 +6190,7 @@ class FlowCanvasComponent {
              * esisterebbe. Registrarlo col preset di default non cambia niente di per se'.
              */
             withControlScheme(F_DEFAULT_CONTROL_SCHEME)),
-        ], viewQueries: [{ propertyName: "canvas", first: true, predicate: FCanvasComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  Gerarchia obbligatoria: f-flow > f-canvas > fNode / f-connection.\r\n  I `@for` sono direttamente dentro <f-canvas>: nessun wrapper, quindi non serve\r\n  `ngProjectAs` (che sarebbe indispensabile con blocchi annidati).\r\n-->\r\n<f-flow\r\n  fDraggable\r\n  (fCreateConnection)=\"onCreateConnection($event)\"\r\n  (fReassignConnection)=\"onReassignConnection($event)\"\r\n  (fMoveNodes)=\"onMoveNodes($event)\"\r\n  (fSelectionChange)=\"onSelectionChange($event)\"\r\n  (fDeleteSelected)=\"onDeleteSelected($event)\"\r\n  (fCreateNode)=\"onCreateNode($event)\"\r\n  (fNodesRendered)=\"onNodesRendered()\"\r\n  (fDragStarted)=\"onDragStarted($event)\"\r\n  (fDragEnded)=\"onDragEnded()\"\r\n>\r\n  <!--\r\n    `#canvas` + `(fCanvasChange)`: il primo serve per chiamare `fitToScreen()`, il secondo per\r\n    sapere che l'utente ha mosso la vista. `[debounceTime]` non si imposta: l'evento serve solo\r\n    ad accendere un flag, non a ricalcolare niente.\r\n  -->\r\n  <f-canvas fZoom #canvas (fCanvasChange)=\"onCanvasChange()\">\r\n    <f-background>\r\n      <f-circle-pattern />\r\n    </f-background>\r\n\r\n    <!--\r\n      \u00A73.6 \u2014 i riquadri di raggruppamento. Vanno **sotto** i node, e non c'e' niente da fare per\r\n      ottenerlo: `[fGroup]` viene proiettato nel layer dei gruppi, che nell'ordine della libreria\r\n      sta sotto connessioni e node.\r\n\r\n      Sono commenti: nessun connettore, nessun arco, nessuna raggiungibilita'. Il corpo del\r\n      riquadro ha `pointer-events: none` (nel CSS) e solo la barra del titolo risponde: senza,\r\n      una cornice grande quanto mezzo canvas si mangerebbe i click destinati alla panoramica e\r\n      alla selezione a rettangolo, e i node dentro non si potrebbero piu' prendere.\r\n    -->\r\n    @for (group of groups(); track group.name) {\r\n      <div\r\n        fGroup\r\n        [fGroupId]=\"group.id\"\r\n        [fGroupPosition]=\"group.position\"\r\n        [fGroupSize]=\"group.size\"\r\n        [fGroupDraggingDisabled]=\"!isEditable()\"\r\n        [class]=\"'fb-group ' + group.colorClass\"\r\n        [class.fb-group--collapsed]=\"group.isCollapsed\"\r\n        [class.fb-group--selected]=\"isGroupSelected(group)\"\r\n        (fGroupSizeChange)=\"onGroupResized(group.name, $event)\"\r\n      >\r\n        <!--\r\n          `fDragHandle` sulla sola barra: il riquadro si sposta dal titolo, come una finestra.\r\n          Trascinandolo da dentro si sposterebbe la cornice ogni volta che si prova a prendere\r\n          un node che le sta sopra.\r\n        -->\r\n        <div\r\n          class=\"fb-group__bar\"\r\n          fDragHandle\r\n          [title]=\"group.description || group.label\"\r\n          (click)=\"onGroupClick($event, group.name)\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            fDragBlocker\r\n            class=\"fb-group__fold\"\r\n            [attr.aria-label]=\"group.isCollapsed ? 'Apri il riquadro' : 'Chiudi il riquadro'\"\r\n            [title]=\"\r\n              group.isCollapsed\r\n                ? 'Apri il riquadro'\r\n                : 'Chiudi il riquadro: resta la barra del titolo, gli elementi restano dove sono'\r\n            \"\r\n            (click)=\"toggleGroupCollapsed($event, group.name)\"\r\n          >\r\n            {{ group.isCollapsed ? '\u25B8' : '\u25BE' }}\r\n          </button>\r\n          <span class=\"fb-group__title\">{{ group.label }}</span>\r\n          <span class=\"fb-group__count\" [title]=\"group.memberCount + ' elementi nel riquadro'\">\r\n            {{ group.memberCount }}\r\n          </span>\r\n          @if (group.unknownMembers.length > 0) {\r\n            <!--\r\n              Membri che nominano un elemento che non c'e' piu'. Non e' un difetto (\u00A73.6): e' cio'\r\n              che resta dopo una cancellazione, ed e' un avviso \u2014 l'attivazione non si blocca.\r\n            -->\r\n            <span\r\n              class=\"fb-group__stale\"\r\n              [title]=\"'Elementi non piu\u2019 esistenti: ' + group.unknownMembers.join(', ')\"\r\n            >\r\n              {{ group.unknownMembers.length }} da ripulire\r\n            </span>\r\n          }\r\n          @if (isEditable()) {\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-group__remove\"\r\n              [attr.aria-label]=\"'Elimina il riquadro ' + group.label\"\r\n              title=\"Elimina il riquadro: gli elementi che contiene restano\"\r\n              (click)=\"onGroupRemoveClick($event, group.name)\"\r\n            >\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        @if (!group.isCollapsed && group.description) {\r\n          <p class=\"fb-group__note\">{{ group.description }}</p>\r\n        }\r\n\r\n        @if (isEditable() && !group.isCollapsed) {\r\n          <!--\r\n            Una sola maniglia, in basso a destra: quattro bersagli su una cornice che sta sotto\r\n            i node si prendono per sbaglio. Ridimensionare **dichiara** la geometria, che e' il\r\n            modo di uscire dal \u00ABcalcolala sui membri\u00BB (\u00A73.6).\r\n          -->\r\n          <div\r\n            fResizeHandle\r\n            [fResizeHandleType]=\"resizeHandles.RIGHT_BOTTOM\"\r\n            class=\"fb-group__resize\"\r\n            title=\"Ridimensiona il riquadro\"\r\n          ></div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @for (edge of edges(); track edge.id) {\r\n      <f-connection\r\n        [fConnectionId]=\"edge.id\"\r\n        [fSourceId]=\"edge.sourceId\"\r\n        [fTargetId]=\"edge.targetId\"\r\n        fBehavior=\"floating\"\r\n        [fType]=\"edge.isGoTo ? 'segment' : 'bezier'\"\r\n        [class]=\"'fb-edge fb-edge--' + edge.kind + (edge.isGoTo ? ' fb-edge--goto' : '')\"\r\n        [class.fb-edge--insert]=\"edge.id === insertionEdgeId()\"\r\n      >\r\n        <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n        @if (edge.label) {\r\n          <div fConnectionContent class=\"fb-edge-label\">{{ edge.label }}</div>\r\n        }\r\n      </f-connection>\r\n    }\r\n\r\n    @for (node of nodes(); track node.id) {\r\n      <div\r\n        fNode\r\n        fDragHandle\r\n        [fNodeId]=\"node.id\"\r\n        [fNodePosition]=\"node.position\"\r\n        [class]=\"'fb-node ' + categoryClass(node) + ' ' + node.widthClass\"\r\n        [class.fb-node--start]=\"node.isStart\"\r\n        [class.fb-node--selected]=\"isSelected(node)\"\r\n        [class.fb-node--unreachable]=\"!node.isReachable\"\r\n        [class.fb-node--error]=\"node.severity === 'Error'\"\r\n        [class.fb-node--warning]=\"node.severity === 'Warning'\"\r\n        (dblclick)=\"onNodeDoubleClick(node.name)\"\r\n      >\r\n        <!--\r\n          Lo Start non ha ingresso: e' il punto di partenza (\u00A73.4).\r\n          `fConnectorConnectableSide` e' cio' che fa entrare l'arco dall'alto: senza, foblex\r\n          calcola il lato e un arco che scende dal node sopra potrebbe agganciarsi di fianco.\r\n        -->\r\n        @if (!node.isStart) {\r\n          <div\r\n            fConnector\r\n            fConnectorType=\"target\"\r\n            [fConnectorId]=\"targetIdOf(node)\"\r\n            [fConnectorConnectableSide]=\"sides.TOP\"\r\n            fConnectorMultiple=\"true\"\r\n            class=\"fb-connector fb-connector--in\"\r\n            title=\"Ingresso\"\r\n          ></div>\r\n        }\r\n\r\n        <div class=\"fb-node__head\">\r\n          <span class=\"fb-node__icon\" aria-hidden=\"true\">{{ node.icon }}</span>\r\n          <div class=\"fb-node__text\">\r\n            <span class=\"fb-node__title\" [title]=\"node.description || node.label\">{{ node.label }}</span>\r\n            <span class=\"fb-node__sub\">\r\n              {{ node.typeLabel }}\r\n              @if (node.subtitle) {\r\n                <span class=\"fb-node__sub-dot\">\u00B7</span>{{ node.subtitle }}\r\n              }\r\n            </span>\r\n          </div>\r\n          @if (node.hasAutomaticOutput) {\r\n            <!-- L'elemento espone il proprio risultato sotto il proprio nome (\u00A74.5). -->\r\n            <span class=\"fb-node__auto\" title=\"Espone un output automatico referenziabile come \u00AB{{ node.name }}\u00BB\">\r\n              \u0192\r\n            </span>\r\n          }\r\n          <!--\r\n            `fDragBlocker` impedisce che il pointerdown sul bottone diventi un trascinamento\r\n            del node: senza, aprire il dettaglio sposterebbe l'elemento di qualche pixel.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            fDragBlocker\r\n            class=\"fb-node__edit\"\r\n            [attr.aria-label]=\"'Apri il dettaglio di ' + node.label\"\r\n            title=\"Apri il dettaglio\"\r\n            (click)=\"onEditClick($event, node.name)\"\r\n          >\r\n            \u270E\r\n          </button>\r\n          @if (!node.isStart && isEditable()) {\r\n            <!--\r\n              Duplica: sta accanto a \u270E e non solo nell'inspector perche' e' il gesto con cui si\r\n              riusa un elemento gi\u00E0 configurato, e cercarlo dentro il form dell'elemento da\r\n              copiare e' il posto in cui non lo si cerca. Compare come \u00AB\u00D7\u00BB, sul solo node\r\n              selezionato: aggiunge un elemento al documento, quindi non deve trovarsi sotto il\r\n              puntatore di chi sta solo attraversando il grafo.\r\n            -->\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-node__duplicate\"\r\n              [attr.aria-label]=\"'Duplica ' + node.label\"\r\n              title=\"Duplica questo elemento (Ctrl+D)\"\r\n              (click)=\"onDuplicateClick($event, node.name)\"\r\n            >\r\n              \u29C9\r\n            </button>\r\n            <!--\r\n              Si mostra solo sul node **selezionato**, non al passaggio del mouse come \u270E:\r\n              cancellare non e' reversibile con un altro clic, e un comando distruttivo che\r\n              appare sotto il puntatore mentre si attraversa il grafo si preme per sbaglio.\r\n              Lo Start non lo espone: un flow senza ingresso non esisterebbe.\r\n            -->\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-node__remove\"\r\n              [attr.aria-label]=\"'Elimina ' + node.label\"\r\n              title=\"Elimina questo elemento (si annulla con \u21B6)\"\r\n              (click)=\"onRemoveClick($event, node.name)\"\r\n            >\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"fb-node__meta\">\r\n          @if (!node.isStart) {\r\n            <span class=\"fb-node__name\" [title]=\"'Nome tecnico: ' + node.name\">{{ node.name }}</span>\r\n          }\r\n          @if (!node.isReachable) {\r\n            <span class=\"fb-badge fb-badge--unreachable\" title=\"Nessun percorso raggiunge questo elemento dallo Start\">\r\n              scollegato\r\n            </span>\r\n          }\r\n          @if (node.issueCount > 0) {\r\n            <span\r\n              class=\"fb-badge\"\r\n              [class.fb-badge--error]=\"node.severity === 'Error'\"\r\n              [class.fb-badge--warning]=\"node.severity === 'Warning'\"\r\n              [class.fb-badge--info]=\"node.severity === 'Info'\"\r\n              [title]=\"node.issueCount + ' rilievi di validazione'\"\r\n            >\r\n              {{ node.issueCount }}\r\n            </span>\r\n          }\r\n          @if (node.danglingOutlets.length > 0) {\r\n            <span\r\n              class=\"fb-badge fb-badge--dangling\"\r\n              [title]=\"'Rami dichiarati senza destinazione: ' + danglingLabels(node)\"\r\n            >\r\n              ramo incompleto\r\n            </span>\r\n          }\r\n        </div>\r\n\r\n        <!--\r\n          Le uscite stanno sul bordo **inferiore**, una per ramo, nell'ordine in cui il modello\r\n          le dichiara: per una Decision e' l'ordine di valutazione delle regole, che e'\r\n          semantico (\u00A75.4), e da sinistra a destra si legge come la lista nell'inspector.\r\n          L'etichetta si mostra solo quando i rami sono piu' di uno: su un `next` unico\r\n          direbbe soltanto \u00ABSuccessivo\u00BB.\r\n        -->\r\n        <div class=\"fb-node__outlets\" [class.fb-node__outlets--labelled]=\"node.showsOutletLabels\">\r\n          @for (outlet of node.outlets; track outlet.key) {\r\n            <div class=\"fb-outlet\">\r\n              @if (node.showsOutletLabels) {\r\n                <span class=\"fb-outlet__label\" [title]=\"outlet.label\">{{ outlet.label }}</span>\r\n              }\r\n              <div\r\n                fConnector\r\n                fConnectorType=\"source\"\r\n                [fConnectorId]=\"connectorIdOf(node, outlet.key)\"\r\n                [fConnectorConnectableSide]=\"sides.BOTTOM\"\r\n                [class]=\"'fb-connector fb-connector--out fb-connector--' + outlet.kind\"\r\n                [title]=\"outlet.label\"\r\n              ></div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Anteprima dell'arco durante il trascinamento. -->\r\n    <f-connection-for-create fBehavior=\"floating\" fType=\"bezier\" class=\"fb-edge fb-edge--creating\">\r\n      <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n    </f-connection-for-create>\r\n\r\n    <f-selection-area />\r\n  </f-canvas>\r\n\r\n  <!--\r\n    Fuori da <f-canvas> come la minimappa: dentro, la trasformazione del canvas se lo\r\n    porterebbe via insieme ai node. `fDragBlocker` perche' il pointerdown non inizi una\r\n    panoramica invece di premere il bottone.\r\n  -->\r\n  <!--\r\n    Sempre nel DOM, nascosto con una classe e non con `@if`: dentro una proiezione di contenuto\r\n    un blocco di controllo e' una complicazione gratuita, e `visibility: hidden` lo toglie\r\n    anche dall'ordine di tabulazione. Il costo e' un bottone in piu' nel DOM, non un rischio.\r\n  -->\r\n  <div class=\"fb-viewport\" fDragBlocker role=\"group\" aria-label=\"Vista\">\r\n    <!--\r\n      Lo zoom ha bisogno di **comandi e di un numero**: con la sola rotella si finisce all'8% su\r\n      un flow grande e sembra che il canvas si sia svuotato, senza un modo evidente di tornare.\r\n      Il numero e' un bottone: riporta al 100% sull'elemento corrente.\r\n    -->\r\n    <button type=\"button\" class=\"fb-btn fb-viewport__btn\" title=\"Riduci (rotella indietro)\" (click)=\"zoomOut()\">\r\n      \u2212\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      class=\"fb-btn fb-viewport__level\"\r\n      title=\"Torna al 100% sull\u2019elemento selezionato\"\r\n      (click)=\"zoomToActual()\"\r\n    >\r\n      {{ zoomPercent() }}%\r\n    </button>\r\n    <button type=\"button\" class=\"fb-btn fb-viewport__btn\" title=\"Ingrandisci (rotella avanti)\" (click)=\"zoomIn()\">\r\n      +\r\n    </button>\r\n    <!--\r\n      La modalita\u2019 selezione. Esiste perche\u2019 i due gesti che la libreria offre di serie \u2014\r\n      `Ctrl`+clic per aggiungere, `Shift`+trascina per il rettangolo \u2014 non si vedono: senza un\r\n      interruttore, su un flow grande si finisce a spostare un elemento alla volta. Accesa, il\r\n      trascinamento sul canvas vuoto **seleziona** e la vista si sposta col tasto centrale.\r\n    -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"fb-btn fb-viewport__select\"\r\n      [class.fb-viewport__select--on]=\"isSelecting()\"\r\n      [attr.aria-pressed]=\"isSelecting()\"\r\n      [title]=\"\r\n        isSelecting()\r\n          ? 'Modalita\u2019 selezione attiva: trascina sul canvas per selezionare piu\u2019 elementi. La vista si sposta col tasto centrale del mouse'\r\n          : 'Attiva la selezione a rettangolo: trascinando sul canvas selezioni piu\u2019 elementi invece di spostare la vista (Shift+trascina fa lo stesso, sempre)'\r\n      \"\r\n      (click)=\"toggleSelectionMode()\"\r\n    >\r\n      <span class=\"fb-viewport__icon\" aria-hidden=\"true\">\u25A4</span>\r\n      Seleziona\r\n    </button>\r\n    <!--\r\n      Sempre nel DOM, nascosto con una classe e non con `@if`: dentro una proiezione di contenuto\r\n      un blocco di controllo e' una complicazione gratuita, e `visibility: hidden` lo toglie\r\n      anche dall'ordine di tabulazione. Il costo e' un bottone in piu' nel DOM, non un rischio.\r\n    -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"fb-btn fb-viewport__fit\"\r\n      [class.fb-viewport__fit--hidden]=\"!hasMovedViewport()\"\r\n      title=\"Rimetti il flow in vista. Su un flow molto grande inquadra l\u2019inizio, perche\u2019 l\u2019intero non sarebbe leggibile\"\r\n      (click)=\"resetViewport()\"\r\n    >\r\n      <span class=\"fb-viewport__icon\" aria-hidden=\"true\">\u2922</span>\r\n      Inquadra\r\n    </button>\r\n  </div>\r\n\r\n  @if (selectionCount() > 1) {\r\n    <!--\r\n      Il dato che rende utile la selezione: che si spostano **insieme**. Senza dirlo, dopo aver\r\n      selezionato cinque elementi si continua a trascinarne uno per volta.\r\n    -->\r\n    <p class=\"fb-select-hint\" role=\"status\">\r\n      {{ selectionCount() }} elementi selezionati: trascinane uno per spostarli tutti \u00B7 Ctrl+clic\r\n      aggiunge o toglie \u00B7 Canc li elimina\r\n    </p>\r\n  } @else if (isSelecting()) {\r\n    <p class=\"fb-select-hint\" role=\"status\">\r\n      Trascina sul canvas per selezionare \u00B7 la vista si sposta col tasto centrale\r\n    </p>\r\n  }\r\n\r\n  @if (insertionEdgeId()) {\r\n    <!-- Il rilascio su un arco non e' un gesto che si indovina: mentre e' possibile, si dice. -->\r\n    <p class=\"fb-insert-hint\" role=\"status\">Rilascia qui per inserire l\u2019elemento in questo percorso</p>\r\n  }\r\n\r\n  <f-minimap [fMinSize]=\"1200\" class=\"fb-minimap\" />\r\n</f-flow>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:var(--fb-canvas-bg, #f4f5f7)}f-flow{display:block;width:100%;height:100%}.fb-minimap{position:absolute;right:14px;bottom:14px;width:150px;height:300px;max-height:40%;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));overflow:hidden}.fb-viewport{position:absolute;right:14px;bottom:322px;z-index:1;display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:200px}.fb-viewport__btn,.fb-viewport__level,.fb-viewport__fit{border-radius:var(--fb-radius-xs, 6px);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));font-size:11px}.fb-viewport__btn{width:24px;padding:2px 0;font-size:14px;line-height:1}.fb-viewport__level{min-width:52px;font-variant-numeric:tabular-nums}.fb-viewport__fit--hidden{opacity:0;visibility:hidden}.fb-viewport__fit{transition:opacity .15s ease,visibility .15s ease}.fb-viewport__icon{font-size:13px;line-height:1;color:var(--fb-text-muted, #667085)}.fb-insert-hint{position:absolute;bottom:18px;left:50%;transform:translate(-50%);z-index:1;margin:0;padding:6px 12px;border-radius:999px;background:var(--fb-accent, #2f6feb);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));color:#fff;font-size:11px;font-weight:600;pointer-events:none}.fb-select-hint{position:absolute;bottom:18px;left:50%;transform:translate(-50%);z-index:1;margin:0;padding:6px 12px;border-radius:999px;border:1px solid var(--fb-border, #e2e5eb);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));color:var(--fb-text-muted, #667085);font-size:11px;font-weight:600;pointer-events:none}.fb-viewport__select{border-radius:var(--fb-radius-xs, 6px);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));font-size:11px}.fb-viewport__select--on{border-color:var(--fb-accent, #2f6feb);background:var(--fb-accent, #2f6feb);color:#fff}.fb-node{position:absolute;display:flex;flex-direction:column;box-sizing:border-box;width:240px;padding:0;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-lg, 12px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));font:inherit;cursor:grab;-webkit-user-select:none;user-select:none;transition:box-shadow .12s ease,border-color .12s ease}.fb-node--outlets-3{width:304px}.fb-node--outlets-4{width:380px}.fb-node--outlets-5{width:456px}.fb-node--outlets-6{width:520px}.fb-node:hover{box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%))}.fb-node--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:0 0 0 3px color-mix(in srgb,var(--fb-accent, #4f6ef7) 22%,transparent)}.fb-node--unreachable{border-style:dashed;opacity:.8}.fb-node--error{border-color:var(--fb-error, #c9372c)}.fb-node--warning{border-color:var(--fb-warning, #b7791f)}.fb-node__head{display:flex;align-items:center;gap:8px;padding:10px 10px 6px 12px}.fb-node__icon{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:var(--fb-radius-sm, 8px);background:var(--fb-node-accent, #667085);color:#fff;font-size:14px;line-height:1}.cat-start{--fb-node-accent: #22a06b}.cat-screen{--fb-node-accent: #3b82f6}.cat-logic{--fb-node-accent: #8b5cf6}.cat-data{--fb-node-accent: #06b6d4}.cat-action{--fb-node-accent: #f59e0b}.cat-flow{--fb-node-accent: #14b8a6}.cat-other{--fb-node-accent: #667085}.fb-node__text{flex:1;min-width:0}.fb-node__title{display:block;font-size:13px;font-weight:600;line-height:17px;color:var(--fb-text, #1a1c23);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub{display:block;margin-top:1px;font-size:11px;line-height:14px;color:var(--fb-text-muted, #6b7086);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub-dot{margin:0 4px;color:var(--fb-text-subtle, #98a2b3)}.fb-node__auto{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--fb-accent, #4f6ef7);cursor:help}.fb-node__edit{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:12px;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease}.fb-node:hover .fb-node__edit,.fb-node--selected .fb-node__edit,.fb-node__edit:focus-visible{opacity:1}.fb-node__edit:hover{background:var(--fb-surface-alt, #f7f8fa);color:var(--fb-text, #1a1c23)}.fb-node__duplicate,.fb-node__remove{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:15px;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease,color .12s ease}.fb-node--selected .fb-node__duplicate,.fb-node--selected .fb-node__remove,.fb-node__duplicate:focus-visible,.fb-node__remove:focus-visible{opacity:1}.fb-node__remove:hover{background:color-mix(in srgb,var(--fb-error, #c9372c) 12%,transparent);color:var(--fb-error, #c9372c)}.fb-node__duplicate:hover{background:color-mix(in srgb,var(--fb-accent, #3b6ef2) 12%,transparent);color:var(--fb-accent, #3b6ef2)}.fb-node__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:14px;padding:0 12px 6px}.fb-node__name{flex:0 1 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--fb-text-subtle, #98a2b3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-badge{padding:1px 6px;border-radius:10px;background:var(--fb-badge-bg, #eef0f4);font-size:10px;font-weight:600;color:var(--fb-text-muted, #6b7086);white-space:nowrap;cursor:help}.fb-badge--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 14%,transparent);color:var(--fb-error, #c9372c)}.fb-badge--warning{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-badge--info{background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 12%,transparent);color:var(--fb-accent, #4f6ef7)}.fb-badge--unreachable,.fb-badge--dangling{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-node__outlets{display:flex;align-items:flex-end;justify-content:space-evenly;gap:4px;padding:0 8px 4px}.fb-node__outlets--labelled{padding-top:5px;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-outlet{display:flex;flex:1 1 0;flex-direction:column;align-items:center;gap:2px;min-width:0}.fb-outlet__label{max-width:100%;font-size:10px;line-height:13px;color:var(--fb-text-muted, #6b7086);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-connector{box-sizing:border-box;width:12px;height:12px;flex:0 0 auto;border:2px solid var(--fb-surface, #fff);border-radius:50%;background:var(--fb-connector, #98a2b3);cursor:crosshair;transition:transform .12s ease,box-shadow .12s ease}f-flow .fb-connector--out{position:relative;inset:auto;margin-bottom:-12px}.fb-connector--out:hover{transform:scale(1.2)}f-flow .fb-connector--in{position:absolute;inset:-2px auto auto 50%;width:24px;height:4px;border:0;border-radius:2px;transform:translate(-50%);background:var(--fb-border-strong, #cfd4de)}.fb-connector--out{--ff-connector-connected-color: var(--fb-connector, #98a2b3)}.fb-connector--Next,.fb-connector--Start,.fb-connector--LoopNext{--fb-connector: var(--fb-edge-next, #98a2b3)}.fb-connector--Rule,.fb-connector--WaitEvent{--fb-connector: var(--fb-edge-rule, #8b5cf6)}.fb-connector--Default,.fb-connector--LoopEnd{--fb-connector: var(--fb-edge-default, #06b6d4)}.fb-connector--Fault{--fb-connector: var(--fb-edge-fault, #dc2626)}.fb-connector--Timeout,.fb-connector--ScheduledPath{--fb-connector: var(--fb-edge-timeout, #f59e0b)}.fb-connector.f-connector-connectable{box-shadow:0 0 0 4px color-mix(in srgb,var(--fb-accent, #4f6ef7) 28%,transparent)}.fb-group{position:absolute;box-sizing:border-box;border:1px solid var(--fb-group-border, #d6dae1);border-radius:var(--fb-radius, 10px);background:var(--fb-group-fill, rgb(148 163 184 / 10%));pointer-events:none;overflow:hidden}.fb-group--selected{border-color:var(--fb-accent, #2f6feb);box-shadow:0 0 0 2px color-mix(in srgb,var(--fb-accent, #2f6feb) 25%,transparent)}.fb-group__bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 6px;border-bottom:1px solid var(--fb-group-border, #d6dae1);background:var(--fb-group-bar, rgb(148 163 184 / 22%));color:var(--fb-text, #1d2939);font-size:12px;font-weight:600;pointer-events:auto;cursor:move;-webkit-user-select:none;user-select:none}.fb-group--collapsed .fb-group__bar{border-bottom:none}.fb-group__fold,.fb-group__remove{flex:none;width:18px;height:18px;padding:0;border:none;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:inherit;font:inherit;font-size:12px;line-height:1;cursor:pointer}.fb-group__fold:hover,.fb-group__remove:hover{background:#10182814}.fb-group__remove{margin-left:auto;font-size:14px}.fb-group__title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fb-group__count{flex:none;padding:0 5px;border-radius:8px;background:#10182814;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums}.fb-group__stale{flex:none;padding:0 5px;border-radius:8px;background:color-mix(in srgb,var(--fb-warning, #b7791f) 14%,transparent);color:var(--fb-warning, #b7791f);font-size:10px;font-weight:600}.fb-group__note{margin:6px 8px 0;color:var(--fb-text-muted, #667085);font-size:11px;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.fb-group__resize{position:absolute;right:0;bottom:0;width:14px;height:14px;border-right:2px solid var(--fb-group-border, #d6dae1);border-bottom:2px solid var(--fb-group-border, #d6dae1);border-bottom-right-radius:var(--fb-radius, 10px);pointer-events:auto;cursor:nwse-resize}.fb-group--giallo{--fb-group-border: #e0c26a;--fb-group-fill: rgb(234 179 8 / 10%);--fb-group-bar: rgb(234 179 8 / 24%)}.fb-group--verde{--fb-group-border: #86c79b;--fb-group-fill: rgb(34 160 89 / 10%);--fb-group-bar: rgb(34 160 89 / 22%)}.fb-group--blu{--fb-group-border: #93b4ea;--fb-group-fill: rgb(47 111 235 / 9%);--fb-group-bar: rgb(47 111 235 / 20%)}.fb-group--viola{--fb-group-border: #bda6e6;--fb-group-fill: rgb(139 92 246 / 10%);--fb-group-bar: rgb(139 92 246 / 22%)}.fb-group--rosso{--fb-group-border: #e6a3a3;--fb-group-fill: rgb(214 69 69 / 9%);--fb-group-bar: rgb(214 69 69 / 20%)}.fb-group--grigio,.fb-group--neutro{--fb-group-border: #d6dae1;--fb-group-fill: rgb(148 163 184 / 10%);--fb-group-bar: rgb(148 163 184 / 22%)}\n"], dependencies: [{ kind: "ngmodule", type: FFlowModule }, { kind: "component", type: i1.FFlowComponent, selector: "f-flow", inputs: ["fFlowId", "fCache"], outputs: ["fNodesRendered", "fFullRendered", "fLoaded"] }, { kind: "component", type: i1.FCanvasComponent, selector: "f-canvas", inputs: ["position", "scale", "debounceTime", "fLayers"], outputs: ["fCanvasChange"] }, { kind: "component", type: i1.FBackgroundComponent, selector: "f-background" }, { kind: "component", type: i1.FCirclePatternComponent, selector: "f-circle-pattern", inputs: ["id", "color", "radius"] }, { kind: "directive", type: i1.FZoomDirective, selector: "f-canvas[fZoom]", inputs: ["fZoom", "fWheelTrigger", "fDblClickTrigger", "fZoomMinimum", "fZoomMaximum", "fZoomStep", "fPinchStep", "fZoomDblClickStep"] }, { kind: "component", type: i1.FSelectionArea, selector: "f-selection-area", inputs: ["fTrigger"] }, { kind: "directive", type: i1.FConnectionContent, selector: "[fConnectionContent]", inputs: ["position", "offset", "align"] }, { kind: "component", type: i1.FConnectionMarkerArrow, selector: "f-connection-marker-arrow", inputs: ["type"] }, { kind: "component", type: i1.FConnectionComponent, selector: "f-connection", inputs: ["fConnectionId", "fSourceId", "fTargetId", "fOutputId", "fInputId", "fRadius", "fOffset", "fBehavior", "fType", "fSelectionDisabled", "fReassignableStart", "fReassignDisabled", "fSourceSide", "fTargetSide", "fInputSide", "fOutputSide"], exportAs: ["fComponent"] }, { kind: "component", type: i1.FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: ["fRadius", "fOffset", "fBehavior", "fType", "fInputSide", "fOutputSide"] }, { kind: "directive", type: i1.FConnectorDirective, selector: "[fConnector]", inputs: ["fConnectorId", "fConnectorType", "fConnectorDisabled", "fConnectorMultiple", "fConnectorCategory", "fConnectorConnectableSide", "fConnectorSelfConnectable", "fCanBeConnectedTo", "fConnectionFromOutlet"], exportAs: ["fConnector"] }, { kind: "component", type: i1.FMinimapComponent, selector: "f-minimap", inputs: ["fMinSize", "fNodeRenderLimit"], exportAs: ["fComponent"] }, { kind: "directive", type: i1.FGroupDirective, selector: "[fGroup]", inputs: ["fGroupId", "fGroupParentId", "fGroupPosition", "fGroupSize", "fGroupRotate", "fConnectOnNode", "fMinimapClass", "fGroupDraggingDisabled", "fGroupSelectionDisabled", "fIncludePadding", "fAutoExpandOnChildHit", "fAutoSizeToFitChildren"], outputs: ["fGroupPositionChange", "fGroupSizeChange", "fGroupRotateChange"], exportAs: ["fComponent"] }, { kind: "directive", type: i1.FNodeDirective, selector: "[fNode]", inputs: ["fNodeId", "fNodeParentId", "fNodePosition", "fNodeSize", "fNodeRotate", "fConnectOnNode", "fMinimapClass", "fNodeDraggingDisabled", "fNodeSelectionDisabled", "fIncludePadding", "fAutoExpandOnChildHit", "fAutoSizeToFitChildren"], outputs: ["fNodePositionChange", "fNodeSizeChange", "fNodeRotateChange"], exportAs: ["fComponent"] }, { kind: "directive", type: i1.FDragHandleDirective, selector: "[fDragHandle]" }, { kind: "directive", type: i1.FResizeHandleDirective, selector: "[fResizeHandle]", inputs: ["fResizeHandleType"] }, { kind: "directive", type: i1.FDragBlockerDirective, selector: "[fDragBlocker]" }, { kind: "directive", type: i1.FDraggableDirective, selector: "f-flow[fDraggable]", inputs: ["fDraggableDisabled", "fDropToGroup", "fMultiSelectTrigger", "fReassignConnectionTrigger", "fCreateConnectionTrigger", "fConnectionWaypointsTrigger", "fMoveControlPointTrigger", "fNodeResizeTrigger", "fNodeRotateTrigger", "fNodeMoveTrigger", "fCanvasMoveTrigger", "fExternalItemTrigger", "fEmitOnNodeIntersect", "vCellSize", "hCellSize", "fCellSizeWhileDragging"], outputs: ["fSelectionChange", "fDeleteSelected", "fNodeIntersectedWithConnections", "fNodeConnectionsIntersection", "fCreateNode", "fMoveNodes", "fReassignConnection", "fCreateConnection", "fConnectionWaypointsChanged", "fDropToGroup", "fDragStarted", "fDragEnded"], exportAs: ["fDraggable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "canvas", first: true, predicate: FCanvasComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  Gerarchia obbligatoria: f-flow > f-canvas > fNode / f-connection.\r\n  I `@for` sono direttamente dentro <f-canvas>: nessun wrapper, quindi non serve\r\n  `ngProjectAs` (che sarebbe indispensabile con blocchi annidati).\r\n-->\r\n<f-flow\r\n  fDraggable\r\n  (fCreateConnection)=\"onCreateConnection($event)\"\r\n  (fReassignConnection)=\"onReassignConnection($event)\"\r\n  (fMoveNodes)=\"onMoveNodes($event)\"\r\n  (fSelectionChange)=\"onSelectionChange($event)\"\r\n  (fDeleteSelected)=\"onDeleteSelected($event)\"\r\n  (fCreateNode)=\"onCreateNode($event)\"\r\n  (fNodesRendered)=\"onNodesRendered()\"\r\n  (fDragStarted)=\"onDragStarted($event)\"\r\n  (fDragEnded)=\"onDragEnded()\"\r\n>\r\n  <!--\r\n    `#canvas` + `(fCanvasChange)`: il primo serve per chiamare `fitToScreen()`, il secondo per\r\n    sapere che l'utente ha mosso la vista. `[debounceTime]` non si imposta: l'evento serve solo\r\n    ad accendere un flag, non a ricalcolare niente.\r\n  -->\r\n  <f-canvas fZoom #canvas (fCanvasChange)=\"onCanvasChange()\">\r\n    <f-background>\r\n      <f-circle-pattern />\r\n    </f-background>\r\n\r\n    <!--\r\n      \u00A73.6 \u2014 i riquadri di raggruppamento. Vanno **sotto** i node, e non c'e' niente da fare per\r\n      ottenerlo: `[fGroup]` viene proiettato nel layer dei gruppi, che nell'ordine della libreria\r\n      sta sotto connessioni e node.\r\n\r\n      Sono commenti: nessun connettore, nessun arco, nessuna raggiungibilita'. Il corpo del\r\n      riquadro ha `pointer-events: none` (nel CSS) e solo la barra del titolo risponde: senza,\r\n      una cornice grande quanto mezzo canvas si mangerebbe i click destinati alla panoramica e\r\n      alla selezione a rettangolo, e i node dentro non si potrebbero piu' prendere.\r\n    -->\r\n    @for (group of groups(); track group.name) {\r\n      <div\r\n        fGroup\r\n        [fGroupId]=\"group.id\"\r\n        [fGroupPosition]=\"group.position\"\r\n        [fGroupSize]=\"group.size\"\r\n        [fGroupDraggingDisabled]=\"!isEditable()\"\r\n        [class]=\"'fb-group ' + group.colorClass\"\r\n        [class.fb-group--selected]=\"isGroupSelected(group)\"\r\n        (fGroupSizeChange)=\"onGroupResized(group.name, $event)\"\r\n      >\r\n        <!--\r\n          `fDragHandle` sulla sola barra: il riquadro si sposta dal titolo, come una finestra.\r\n          Trascinandolo da dentro si sposterebbe la cornice ogni volta che si prova a prendere\r\n          un node che le sta sopra.\r\n        -->\r\n        <div\r\n          class=\"fb-group__bar\"\r\n          fDragHandle\r\n          [title]=\"group.description || group.label\"\r\n          (click)=\"onGroupClick($event, group.name)\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            fDragBlocker\r\n            class=\"fb-group__fold\"\r\n            aria-label=\"Chiudi il riquadro\"\r\n            title=\"Chiudi il riquadro: gli elementi si nascondono e gli archi che lo attraversano si attaccano alla pastiglia\"\r\n            (click)=\"toggleGroupCollapsed($event, group.name)\"\r\n          >\r\n            \u25BE\r\n          </button>\r\n          <span class=\"fb-group__title\">{{ group.label }}</span>\r\n          <span class=\"fb-group__count\" [title]=\"group.memberCount + ' elementi nel riquadro'\">\r\n            {{ group.memberCount }}\r\n          </span>\r\n          @if (group.unknownMembers.length > 0) {\r\n            <!--\r\n              Membri che nominano un elemento che non c'e' piu'. Non e' un difetto (\u00A73.6): e' cio'\r\n              che resta dopo una cancellazione, ed e' un avviso \u2014 l'attivazione non si blocca.\r\n            -->\r\n            <span\r\n              class=\"fb-group__stale\"\r\n              [title]=\"'Elementi non piu\u2019 esistenti: ' + group.unknownMembers.join(', ')\"\r\n            >\r\n              {{ group.unknownMembers.length }} da ripulire\r\n            </span>\r\n          }\r\n          @if (isEditable()) {\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-group__remove\"\r\n              [attr.aria-label]=\"'Elimina il riquadro ' + group.label\"\r\n              title=\"Elimina il riquadro: gli elementi che contiene restano\"\r\n              (click)=\"onGroupRemoveClick($event, group.name)\"\r\n            >\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        @if (group.description) {\r\n          <p class=\"fb-group__note\">{{ group.description }}</p>\r\n        }\r\n\r\n        @if (isEditable()) {\r\n          <!--\r\n            Una sola maniglia, in basso a destra: quattro bersagli su una cornice che sta sotto\r\n            i node si prendono per sbaglio. Ridimensionare **dichiara** la geometria, che e' il\r\n            modo di uscire dal \u00ABcalcolala sui membri\u00BB (\u00A73.6).\r\n          -->\r\n          <div\r\n            fResizeHandle\r\n            [fResizeHandleType]=\"resizeHandles.RIGHT_BOTTOM\"\r\n            class=\"fb-group__resize\"\r\n            title=\"Ridimensiona il riquadro\"\r\n          ></div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!--\r\n      \u00A73.6 \u2014 un riquadro **chiuso**: una pastiglia al posto dei suoi elementi.\r\n\r\n      \u00C8 un `fNode` e non un `fGroup` per una ragione sola, ed e' la regola 4 di @foblex/flow: per\r\n      nascondere i node bisogna che gli archi che entravano e uscivano trovino un connettore\r\n      **vero**, altrimenti hanno geometria 0\u00D70 e si attaccano all'angolo del canvas. La pastiglia e'\r\n      quel connettore. Un solo connettore in uscita: dietro ci stanno elementi diversi, e il nome di\r\n      quello che esce sta nell'etichetta dell'arco.\r\n    -->\r\n    @for (fold of folds(); track fold.id) {\r\n      <div\r\n        fNode\r\n        fDragHandle\r\n        [fNodeId]=\"fold.id\"\r\n        [fNodePosition]=\"fold.position\"\r\n        [class]=\"'fb-fold ' + fold.colorClass\"\r\n        [class.fb-fold--selected]=\"isFoldSelected(fold)\"\r\n        [class.fb-fold--error]=\"fold.severity === 'Error'\"\r\n        [class.fb-fold--warning]=\"fold.severity === 'Warning'\"\r\n        (dblclick)=\"toggleGroupCollapsed($event, fold.name)\"\r\n      >\r\n        <div\r\n          fConnector\r\n          fConnectorType=\"target\"\r\n          [fConnectorId]=\"foldTargetIdOf(fold)\"\r\n          [fConnectorConnectableSide]=\"sides.TOP\"\r\n          fConnectorMultiple=\"true\"\r\n          class=\"fb-connector fb-connector--in\"\r\n          title=\"Ingresso del riquadro chiuso\"\r\n        ></div>\r\n\r\n        <div class=\"fb-fold__head\">\r\n          <button\r\n            type=\"button\"\r\n            fDragBlocker\r\n            class=\"fb-fold__open\"\r\n            [attr.aria-label]=\"'Apri il riquadro ' + fold.label\"\r\n            title=\"Apri il riquadro: gli elementi tornano visibili al loro posto\"\r\n            (click)=\"toggleGroupCollapsed($event, fold.name)\"\r\n          >\r\n            \u25B8\r\n          </button>\r\n          <span class=\"fb-fold__title\" [title]=\"fold.description || fold.label\">{{ fold.label }}</span>\r\n          @if (isEditable()) {\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-fold__remove\"\r\n              [attr.aria-label]=\"'Elimina il riquadro ' + fold.label\"\r\n              title=\"Elimina il riquadro: gli elementi che contiene restano\"\r\n              (click)=\"onGroupRemoveClick($event, fold.name)\"\r\n            >\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"fb-fold__meta\">\r\n          <span class=\"fb-fold__count\">\r\n            {{ fold.memberCount }} {{ fold.memberCount === 1 ? 'elemento nascosto' : 'elementi nascosti' }}\r\n          </span>\r\n          @if (fold.issueCount > 0) {\r\n            <!-- I rilievi di cio' che e' nascosto: chiudere un riquadro non nasconde un errore (\u00A77). -->\r\n            <span\r\n              class=\"fb-badge\"\r\n              [class.fb-badge--error]=\"fold.severity === 'Error'\"\r\n              [class.fb-badge--warning]=\"fold.severity === 'Warning'\"\r\n              [class.fb-badge--info]=\"fold.severity === 'Info'\"\r\n              [title]=\"fold.issueCount + ' rilievi negli elementi nascosti'\"\r\n            >\r\n              {{ fold.issueCount }}\r\n            </span>\r\n          }\r\n          @if (fold.unknownMembers.length > 0) {\r\n            <span\r\n              class=\"fb-badge fb-badge--dangling\"\r\n              [title]=\"'Elementi non piu\u2019 esistenti: ' + fold.unknownMembers.join(', ')\"\r\n            >\r\n              {{ fold.unknownMembers.length }} da ripulire\r\n            </span>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"fb-fold__outlets\">\r\n          <div\r\n            fConnector\r\n            fConnectorType=\"source\"\r\n            [fConnectorId]=\"foldSourceIdOf(fold)\"\r\n            [fConnectorConnectableSide]=\"sides.BOTTOM\"\r\n            class=\"fb-connector fb-connector--out fb-connector--Next\"\r\n            title=\"Uscite del riquadro chiuso\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @for (edge of edges(); track edge.id) {\r\n      <f-connection\r\n        [fConnectionId]=\"edge.id\"\r\n        [fSourceId]=\"edge.sourceId\"\r\n        [fTargetId]=\"edge.targetId\"\r\n        fBehavior=\"floating\"\r\n        [fType]=\"edge.isGoTo ? 'segment' : 'bezier'\"\r\n        [class]=\"'fb-edge fb-edge--' + edge.kind + (edge.isGoTo ? ' fb-edge--goto' : '')\"\r\n        [class.fb-edge--insert]=\"edge.id === insertionEdgeId()\"\r\n        [class.fb-edge--folded]=\"edge.isFolded\"\r\n      >\r\n        <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n        @if (edge.label) {\r\n          <div fConnectionContent class=\"fb-edge-label\">{{ edge.label }}</div>\r\n        }\r\n      </f-connection>\r\n    }\r\n\r\n    @for (node of nodes(); track node.id) {\r\n      <div\r\n        fNode\r\n        fDragHandle\r\n        [fNodeId]=\"node.id\"\r\n        [fNodePosition]=\"node.position\"\r\n        [class]=\"'fb-node ' + categoryClass(node) + ' ' + node.widthClass\"\r\n        [class.fb-node--start]=\"node.isStart\"\r\n        [class.fb-node--selected]=\"isSelected(node)\"\r\n        [class.fb-node--unreachable]=\"!node.isReachable\"\r\n        [class.fb-node--error]=\"node.severity === 'Error'\"\r\n        [class.fb-node--warning]=\"node.severity === 'Warning'\"\r\n        (dblclick)=\"onNodeDoubleClick(node.name)\"\r\n      >\r\n        <!--\r\n          Lo Start non ha ingresso: e' il punto di partenza (\u00A73.4).\r\n          `fConnectorConnectableSide` e' cio' che fa entrare l'arco dall'alto: senza, foblex\r\n          calcola il lato e un arco che scende dal node sopra potrebbe agganciarsi di fianco.\r\n        -->\r\n        @if (!node.isStart) {\r\n          <div\r\n            fConnector\r\n            fConnectorType=\"target\"\r\n            [fConnectorId]=\"targetIdOf(node)\"\r\n            [fConnectorConnectableSide]=\"sides.TOP\"\r\n            fConnectorMultiple=\"true\"\r\n            class=\"fb-connector fb-connector--in\"\r\n            title=\"Ingresso\"\r\n          ></div>\r\n        }\r\n\r\n        <div class=\"fb-node__head\">\r\n          <span class=\"fb-node__icon\" aria-hidden=\"true\">{{ node.icon }}</span>\r\n          <div class=\"fb-node__text\">\r\n            <span class=\"fb-node__title\" [title]=\"node.description || node.label\">{{ node.label }}</span>\r\n            <span class=\"fb-node__sub\">\r\n              {{ node.typeLabel }}\r\n              @if (node.subtitle) {\r\n                <span class=\"fb-node__sub-dot\">\u00B7</span>{{ node.subtitle }}\r\n              }\r\n            </span>\r\n          </div>\r\n          @if (node.hasAutomaticOutput) {\r\n            <!-- L'elemento espone il proprio risultato sotto il proprio nome (\u00A74.5). -->\r\n            <span class=\"fb-node__auto\" title=\"Espone un output automatico referenziabile come \u00AB{{ node.name }}\u00BB\">\r\n              \u0192\r\n            </span>\r\n          }\r\n          <!--\r\n            `fDragBlocker` impedisce che il pointerdown sul bottone diventi un trascinamento\r\n            del node: senza, aprire il dettaglio sposterebbe l'elemento di qualche pixel.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            fDragBlocker\r\n            class=\"fb-node__edit\"\r\n            [attr.aria-label]=\"'Apri il dettaglio di ' + node.label\"\r\n            title=\"Apri il dettaglio\"\r\n            (click)=\"onEditClick($event, node.name)\"\r\n          >\r\n            \u270E\r\n          </button>\r\n          @if (!node.isStart && isEditable()) {\r\n            <!--\r\n              Duplica: sta accanto a \u270E e non solo nell'inspector perche' e' il gesto con cui si\r\n              riusa un elemento gi\u00E0 configurato, e cercarlo dentro il form dell'elemento da\r\n              copiare e' il posto in cui non lo si cerca. Compare come \u00AB\u00D7\u00BB, sul solo node\r\n              selezionato: aggiunge un elemento al documento, quindi non deve trovarsi sotto il\r\n              puntatore di chi sta solo attraversando il grafo.\r\n            -->\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-node__duplicate\"\r\n              [attr.aria-label]=\"'Duplica ' + node.label\"\r\n              title=\"Duplica questo elemento (Ctrl+D)\"\r\n              (click)=\"onDuplicateClick($event, node.name)\"\r\n            >\r\n              \u29C9\r\n            </button>\r\n            <!--\r\n              Si mostra solo sul node **selezionato**, non al passaggio del mouse come \u270E:\r\n              cancellare non e' reversibile con un altro clic, e un comando distruttivo che\r\n              appare sotto il puntatore mentre si attraversa il grafo si preme per sbaglio.\r\n              Lo Start non lo espone: un flow senza ingresso non esisterebbe.\r\n            -->\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-node__remove\"\r\n              [attr.aria-label]=\"'Elimina ' + node.label\"\r\n              title=\"Elimina questo elemento (si annulla con \u21B6)\"\r\n              (click)=\"onRemoveClick($event, node.name)\"\r\n            >\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"fb-node__meta\">\r\n          @if (!node.isStart) {\r\n            <span class=\"fb-node__name\" [title]=\"'Nome tecnico: ' + node.name\">{{ node.name }}</span>\r\n          }\r\n          @if (!node.isReachable) {\r\n            <span class=\"fb-badge fb-badge--unreachable\" title=\"Nessun percorso raggiunge questo elemento dallo Start\">\r\n              scollegato\r\n            </span>\r\n          }\r\n          @if (node.issueCount > 0) {\r\n            <span\r\n              class=\"fb-badge\"\r\n              [class.fb-badge--error]=\"node.severity === 'Error'\"\r\n              [class.fb-badge--warning]=\"node.severity === 'Warning'\"\r\n              [class.fb-badge--info]=\"node.severity === 'Info'\"\r\n              [title]=\"node.issueCount + ' rilievi di validazione'\"\r\n            >\r\n              {{ node.issueCount }}\r\n            </span>\r\n          }\r\n          @if (node.danglingOutlets.length > 0) {\r\n            <span\r\n              class=\"fb-badge fb-badge--dangling\"\r\n              [title]=\"'Rami dichiarati senza destinazione: ' + danglingLabels(node)\"\r\n            >\r\n              ramo incompleto\r\n            </span>\r\n          }\r\n        </div>\r\n\r\n        <!--\r\n          Le uscite stanno sul bordo **inferiore**, una per ramo, nell'ordine in cui il modello\r\n          le dichiara: per una Decision e' l'ordine di valutazione delle regole, che e'\r\n          semantico (\u00A75.4), e da sinistra a destra si legge come la lista nell'inspector.\r\n          L'etichetta si mostra solo quando i rami sono piu' di uno: su un `next` unico\r\n          direbbe soltanto \u00ABSuccessivo\u00BB.\r\n        -->\r\n        <div class=\"fb-node__outlets\" [class.fb-node__outlets--labelled]=\"node.showsOutletLabels\">\r\n          @for (outlet of node.outlets; track outlet.key) {\r\n            <div class=\"fb-outlet\">\r\n              @if (node.showsOutletLabels) {\r\n                <span class=\"fb-outlet__label\" [title]=\"outlet.label\">{{ outlet.label }}</span>\r\n              }\r\n              <div\r\n                fConnector\r\n                fConnectorType=\"source\"\r\n                [fConnectorId]=\"connectorIdOf(node, outlet.key)\"\r\n                [fConnectorConnectableSide]=\"sides.BOTTOM\"\r\n                [class]=\"'fb-connector fb-connector--out fb-connector--' + outlet.kind\"\r\n                [title]=\"outlet.label\"\r\n              ></div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Anteprima dell'arco durante il trascinamento. -->\r\n    <f-connection-for-create fBehavior=\"floating\" fType=\"bezier\" class=\"fb-edge fb-edge--creating\">\r\n      <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n    </f-connection-for-create>\r\n\r\n    <f-selection-area />\r\n  </f-canvas>\r\n\r\n  <!--\r\n    Fuori da <f-canvas> come la minimappa: dentro, la trasformazione del canvas se lo\r\n    porterebbe via insieme ai node. `fDragBlocker` perche' il pointerdown non inizi una\r\n    panoramica invece di premere il bottone.\r\n  -->\r\n  <!--\r\n    Sempre nel DOM, nascosto con una classe e non con `@if`: dentro una proiezione di contenuto\r\n    un blocco di controllo e' una complicazione gratuita, e `visibility: hidden` lo toglie\r\n    anche dall'ordine di tabulazione. Il costo e' un bottone in piu' nel DOM, non un rischio.\r\n  -->\r\n  <div class=\"fb-viewport\" fDragBlocker role=\"group\" aria-label=\"Vista\">\r\n    <!--\r\n      Lo zoom ha bisogno di **comandi e di un numero**: con la sola rotella si finisce all'8% su\r\n      un flow grande e sembra che il canvas si sia svuotato, senza un modo evidente di tornare.\r\n      Il numero e' un bottone: riporta al 100% sull'elemento corrente.\r\n    -->\r\n    <button type=\"button\" class=\"fb-btn fb-viewport__btn\" title=\"Riduci (rotella indietro)\" (click)=\"zoomOut()\">\r\n      \u2212\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      class=\"fb-btn fb-viewport__level\"\r\n      title=\"Torna al 100% sull\u2019elemento selezionato\"\r\n      (click)=\"zoomToActual()\"\r\n    >\r\n      {{ zoomPercent() }}%\r\n    </button>\r\n    <button type=\"button\" class=\"fb-btn fb-viewport__btn\" title=\"Ingrandisci (rotella avanti)\" (click)=\"zoomIn()\">\r\n      +\r\n    </button>\r\n    <!--\r\n      La modalita\u2019 selezione. Esiste perche\u2019 i due gesti che la libreria offre di serie \u2014\r\n      `Ctrl`+clic per aggiungere, `Shift`+trascina per il rettangolo \u2014 non si vedono: senza un\r\n      interruttore, su un flow grande si finisce a spostare un elemento alla volta. Accesa, il\r\n      trascinamento sul canvas vuoto **seleziona** e la vista si sposta col tasto centrale.\r\n    -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"fb-btn fb-viewport__select\"\r\n      [class.fb-viewport__select--on]=\"isSelecting()\"\r\n      [attr.aria-pressed]=\"isSelecting()\"\r\n      [title]=\"\r\n        isSelecting()\r\n          ? 'Modalita\u2019 selezione attiva: trascina sul canvas per selezionare piu\u2019 elementi. La vista si sposta col tasto centrale del mouse'\r\n          : 'Attiva la selezione a rettangolo: trascinando sul canvas selezioni piu\u2019 elementi invece di spostare la vista (Shift+trascina fa lo stesso, sempre)'\r\n      \"\r\n      (click)=\"toggleSelectionMode()\"\r\n    >\r\n      <span class=\"fb-viewport__icon\" aria-hidden=\"true\">\u25A4</span>\r\n      Seleziona\r\n    </button>\r\n    <!--\r\n      Sempre nel DOM, nascosto con una classe e non con `@if`: dentro una proiezione di contenuto\r\n      un blocco di controllo e' una complicazione gratuita, e `visibility: hidden` lo toglie\r\n      anche dall'ordine di tabulazione. Il costo e' un bottone in piu' nel DOM, non un rischio.\r\n    -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"fb-btn fb-viewport__fit\"\r\n      [class.fb-viewport__fit--hidden]=\"!hasMovedViewport()\"\r\n      title=\"Rimetti il flow in vista. Su un flow molto grande inquadra l\u2019inizio, perche\u2019 l\u2019intero non sarebbe leggibile\"\r\n      (click)=\"resetViewport()\"\r\n    >\r\n      <span class=\"fb-viewport__icon\" aria-hidden=\"true\">\u2922</span>\r\n      Inquadra\r\n    </button>\r\n  </div>\r\n\r\n  @if (selectionCount() > 1) {\r\n    <!--\r\n      Il dato che rende utile la selezione: che si spostano **insieme**. Senza dirlo, dopo aver\r\n      selezionato cinque elementi si continua a trascinarne uno per volta.\r\n    -->\r\n    <p class=\"fb-select-hint\" role=\"status\">\r\n      {{ selectionCount() }} elementi selezionati: trascinane uno per spostarli tutti \u00B7 Ctrl+clic\r\n      aggiunge o toglie \u00B7 Canc li elimina\r\n    </p>\r\n  } @else if (isSelecting()) {\r\n    <p class=\"fb-select-hint\" role=\"status\">\r\n      Trascina sul canvas per selezionare \u00B7 la vista si sposta col tasto centrale\r\n    </p>\r\n  }\r\n\r\n  @if (insertionEdgeId()) {\r\n    <!-- Il rilascio su un arco non e' un gesto che si indovina: mentre e' possibile, si dice. -->\r\n    <p class=\"fb-insert-hint\" role=\"status\">Rilascia qui per inserire l\u2019elemento in questo percorso</p>\r\n  }\r\n\r\n  <f-minimap [fMinSize]=\"1200\" class=\"fb-minimap\" />\r\n</f-flow>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:var(--fb-canvas-bg, #f4f5f7)}f-flow{display:block;width:100%;height:100%}.fb-minimap{position:absolute;right:14px;bottom:14px;width:150px;height:300px;max-height:40%;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));overflow:hidden}.fb-viewport{position:absolute;right:14px;bottom:322px;z-index:1;display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:200px}.fb-viewport__btn,.fb-viewport__level,.fb-viewport__fit{border-radius:var(--fb-radius-xs, 6px);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));font-size:11px}.fb-viewport__btn{width:24px;padding:2px 0;font-size:14px;line-height:1}.fb-viewport__level{min-width:52px;font-variant-numeric:tabular-nums}.fb-viewport__fit--hidden{opacity:0;visibility:hidden}.fb-viewport__fit{transition:opacity .15s ease,visibility .15s ease}.fb-viewport__icon{font-size:13px;line-height:1;color:var(--fb-text-muted, #667085)}.fb-insert-hint{position:absolute;bottom:18px;left:50%;transform:translate(-50%);z-index:1;margin:0;padding:6px 12px;border-radius:999px;background:var(--fb-accent, #2f6feb);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));color:#fff;font-size:11px;font-weight:600;pointer-events:none}.fb-select-hint{position:absolute;bottom:18px;left:50%;transform:translate(-50%);z-index:1;margin:0;padding:6px 12px;border-radius:999px;border:1px solid var(--fb-border, #e2e5eb);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));color:var(--fb-text-muted, #667085);font-size:11px;font-weight:600;pointer-events:none}.fb-viewport__select{border-radius:var(--fb-radius-xs, 6px);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));font-size:11px}.fb-viewport__select--on{border-color:var(--fb-accent, #2f6feb);background:var(--fb-accent, #2f6feb);color:#fff}.fb-node{position:absolute;display:flex;flex-direction:column;box-sizing:border-box;width:240px;padding:0;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-lg, 12px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));font:inherit;cursor:grab;-webkit-user-select:none;user-select:none;transition:box-shadow .12s ease,border-color .12s ease}.fb-node--outlets-3{width:304px}.fb-node--outlets-4{width:380px}.fb-node--outlets-5{width:456px}.fb-node--outlets-6{width:520px}.fb-node:hover{box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%))}.fb-node--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:0 0 0 3px color-mix(in srgb,var(--fb-accent, #4f6ef7) 22%,transparent)}.fb-node--unreachable{border-style:dashed;opacity:.8}.fb-node--error{border-color:var(--fb-error, #c9372c)}.fb-node--warning{border-color:var(--fb-warning, #b7791f)}.fb-node__head{display:flex;align-items:center;gap:8px;padding:10px 10px 6px 12px}.fb-node__icon{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:var(--fb-radius-sm, 8px);background:var(--fb-node-accent, #667085);color:#fff;font-size:14px;line-height:1}.cat-start{--fb-node-accent: #22a06b}.cat-screen{--fb-node-accent: #3b82f6}.cat-logic{--fb-node-accent: #8b5cf6}.cat-data{--fb-node-accent: #06b6d4}.cat-action{--fb-node-accent: #f59e0b}.cat-flow{--fb-node-accent: #14b8a6}.cat-other{--fb-node-accent: #667085}.fb-node__text{flex:1;min-width:0}.fb-node__title{display:block;font-size:13px;font-weight:600;line-height:17px;color:var(--fb-text, #1a1c23);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub{display:block;margin-top:1px;font-size:11px;line-height:14px;color:var(--fb-text-muted, #6b7086);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub-dot{margin:0 4px;color:var(--fb-text-subtle, #98a2b3)}.fb-node__auto{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--fb-accent, #4f6ef7);cursor:help}.fb-node__edit{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:12px;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease}.fb-node:hover .fb-node__edit,.fb-node--selected .fb-node__edit,.fb-node__edit:focus-visible{opacity:1}.fb-node__edit:hover{background:var(--fb-surface-alt, #f7f8fa);color:var(--fb-text, #1a1c23)}.fb-node__duplicate,.fb-node__remove{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:15px;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease,color .12s ease}.fb-node--selected .fb-node__duplicate,.fb-node--selected .fb-node__remove,.fb-node__duplicate:focus-visible,.fb-node__remove:focus-visible{opacity:1}.fb-node__remove:hover{background:color-mix(in srgb,var(--fb-error, #c9372c) 12%,transparent);color:var(--fb-error, #c9372c)}.fb-node__duplicate:hover{background:color-mix(in srgb,var(--fb-accent, #3b6ef2) 12%,transparent);color:var(--fb-accent, #3b6ef2)}.fb-node__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:14px;padding:0 12px 6px}.fb-node__name{flex:0 1 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--fb-text-subtle, #98a2b3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-badge{padding:1px 6px;border-radius:10px;background:var(--fb-badge-bg, #eef0f4);font-size:10px;font-weight:600;color:var(--fb-text-muted, #6b7086);white-space:nowrap;cursor:help}.fb-badge--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 14%,transparent);color:var(--fb-error, #c9372c)}.fb-badge--warning{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-badge--info{background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 12%,transparent);color:var(--fb-accent, #4f6ef7)}.fb-badge--unreachable,.fb-badge--dangling{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-node__outlets{display:flex;align-items:flex-end;justify-content:space-evenly;gap:4px;padding:0 8px 4px}.fb-node__outlets--labelled{padding-top:5px;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-outlet{display:flex;flex:1 1 0;flex-direction:column;align-items:center;gap:2px;min-width:0}.fb-outlet__label{max-width:100%;font-size:10px;line-height:13px;color:var(--fb-text-muted, #6b7086);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-connector{box-sizing:border-box;width:12px;height:12px;flex:0 0 auto;border:2px solid var(--fb-surface, #fff);border-radius:50%;background:var(--fb-connector, #98a2b3);cursor:crosshair;transition:transform .12s ease,box-shadow .12s ease}f-flow .fb-connector--out{position:relative;inset:auto;margin-bottom:-12px}.fb-connector--out:hover{transform:scale(1.2)}f-flow .fb-connector--in{position:absolute;inset:-2px auto auto 50%;width:24px;height:4px;border:0;border-radius:2px;transform:translate(-50%);background:var(--fb-border-strong, #cfd4de)}.fb-connector--out{--ff-connector-connected-color: var(--fb-connector, #98a2b3)}.fb-connector--Next,.fb-connector--Start,.fb-connector--LoopNext{--fb-connector: var(--fb-edge-next, #98a2b3)}.fb-connector--Rule,.fb-connector--WaitEvent{--fb-connector: var(--fb-edge-rule, #8b5cf6)}.fb-connector--Default,.fb-connector--LoopEnd{--fb-connector: var(--fb-edge-default, #06b6d4)}.fb-connector--Fault{--fb-connector: var(--fb-edge-fault, #dc2626)}.fb-connector--Timeout,.fb-connector--ScheduledPath{--fb-connector: var(--fb-edge-timeout, #f59e0b)}.fb-connector.f-connector-connectable{box-shadow:0 0 0 4px color-mix(in srgb,var(--fb-accent, #4f6ef7) 28%,transparent)}.fb-group{position:absolute;box-sizing:border-box;border:1px solid var(--fb-group-border, #d6dae1);border-radius:var(--fb-radius, 10px);background:var(--fb-group-fill, rgb(148 163 184 / 10%));pointer-events:none;overflow:hidden}.fb-group--selected{border-color:var(--fb-accent, #2f6feb);box-shadow:0 0 0 2px color-mix(in srgb,var(--fb-accent, #2f6feb) 25%,transparent)}.fb-group__bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 6px;border-bottom:1px solid var(--fb-group-border, #d6dae1);background:var(--fb-group-bar, rgb(148 163 184 / 22%));color:var(--fb-text, #1d2939);font-size:12px;font-weight:600;pointer-events:auto;cursor:move;-webkit-user-select:none;user-select:none}.fb-fold{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;width:260px;min-height:64px;padding:6px 8px;border:1px solid var(--fb-group-border, #d6dae1);border-left:4px solid var(--fb-group-border, #d6dae1);border-radius:var(--fb-radius-lg, 12px);background:var(--fb-group-bar, rgb(148 163 184 / 22%));box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));color:var(--fb-text, #1d2939);font:inherit;font-size:12px;cursor:grab;-webkit-user-select:none;user-select:none}.fb-fold:hover{box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%))}.fb-fold--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:0 0 0 3px color-mix(in srgb,var(--fb-accent, #4f6ef7) 22%,transparent)}.fb-fold--error{border-color:var(--fb-error, #c9372c)}.fb-fold--warning{border-color:var(--fb-warning, #b7791f)}.fb-fold__head{display:flex;align-items:center;gap:6px}.fb-fold__title{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600}.fb-fold__open,.fb-fold__remove{flex:none;width:18px;height:18px;padding:0;border:none;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:inherit;font:inherit;font-size:12px;line-height:1;cursor:pointer}.fb-fold__remove{font-size:14px}.fb-fold__open:hover,.fb-fold__remove:hover{background:#10182814}.fb-fold__meta{display:flex;align-items:center;gap:6px;margin-top:2px;color:var(--fb-text-muted, #667085);font-size:11px}.fb-fold__count{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fb-fold__outlets{display:flex;justify-content:center;margin-top:4px}.fb-group__fold,.fb-group__remove{flex:none;width:18px;height:18px;padding:0;border:none;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:inherit;font:inherit;font-size:12px;line-height:1;cursor:pointer}.fb-group__fold:hover,.fb-group__remove:hover{background:#10182814}.fb-group__remove{margin-left:auto;font-size:14px}.fb-group__title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fb-group__count{flex:none;padding:0 5px;border-radius:8px;background:#10182814;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums}.fb-group__stale{flex:none;padding:0 5px;border-radius:8px;background:color-mix(in srgb,var(--fb-warning, #b7791f) 14%,transparent);color:var(--fb-warning, #b7791f);font-size:10px;font-weight:600}.fb-group__note{margin:6px 8px 0;color:var(--fb-text-muted, #667085);font-size:11px;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.fb-group__resize{position:absolute;right:0;bottom:0;width:14px;height:14px;border-right:2px solid var(--fb-group-border, #d6dae1);border-bottom:2px solid var(--fb-group-border, #d6dae1);border-bottom-right-radius:var(--fb-radius, 10px);pointer-events:auto;cursor:nwse-resize}.fb-group--giallo{--fb-group-border: #e0c26a;--fb-group-fill: rgb(234 179 8 / 10%);--fb-group-bar: rgb(234 179 8 / 24%)}.fb-group--verde{--fb-group-border: #86c79b;--fb-group-fill: rgb(34 160 89 / 10%);--fb-group-bar: rgb(34 160 89 / 22%)}.fb-group--blu{--fb-group-border: #93b4ea;--fb-group-fill: rgb(47 111 235 / 9%);--fb-group-bar: rgb(47 111 235 / 20%)}.fb-group--viola{--fb-group-border: #bda6e6;--fb-group-fill: rgb(139 92 246 / 10%);--fb-group-bar: rgb(139 92 246 / 22%)}.fb-group--rosso{--fb-group-border: #e6a3a3;--fb-group-fill: rgb(214 69 69 / 9%);--fb-group-bar: rgb(214 69 69 / 20%)}.fb-group--grigio,.fb-group--neutro{--fb-group-border: #d6dae1;--fb-group-fill: rgb(148 163 184 / 10%);--fb-group-bar: rgb(148 163 184 / 22%)}\n"], dependencies: [{ kind: "ngmodule", type: FFlowModule }, { kind: "component", type: i1.FFlowComponent, selector: "f-flow", inputs: ["fFlowId", "fCache"], outputs: ["fNodesRendered", "fFullRendered", "fLoaded"] }, { kind: "component", type: i1.FCanvasComponent, selector: "f-canvas", inputs: ["position", "scale", "debounceTime", "fLayers"], outputs: ["fCanvasChange"] }, { kind: "component", type: i1.FBackgroundComponent, selector: "f-background" }, { kind: "component", type: i1.FCirclePatternComponent, selector: "f-circle-pattern", inputs: ["id", "color", "radius"] }, { kind: "directive", type: i1.FZoomDirective, selector: "f-canvas[fZoom]", inputs: ["fZoom", "fWheelTrigger", "fDblClickTrigger", "fZoomMinimum", "fZoomMaximum", "fZoomStep", "fPinchStep", "fZoomDblClickStep"] }, { kind: "component", type: i1.FSelectionArea, selector: "f-selection-area", inputs: ["fTrigger"] }, { kind: "directive", type: i1.FConnectionContent, selector: "[fConnectionContent]", inputs: ["position", "offset", "align"] }, { kind: "component", type: i1.FConnectionMarkerArrow, selector: "f-connection-marker-arrow", inputs: ["type"] }, { kind: "component", type: i1.FConnectionComponent, selector: "f-connection", inputs: ["fConnectionId", "fSourceId", "fTargetId", "fOutputId", "fInputId", "fRadius", "fOffset", "fBehavior", "fType", "fSelectionDisabled", "fReassignableStart", "fReassignDisabled", "fSourceSide", "fTargetSide", "fInputSide", "fOutputSide"], exportAs: ["fComponent"] }, { kind: "component", type: i1.FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: ["fRadius", "fOffset", "fBehavior", "fType", "fInputSide", "fOutputSide"] }, { kind: "directive", type: i1.FConnectorDirective, selector: "[fConnector]", inputs: ["fConnectorId", "fConnectorType", "fConnectorDisabled", "fConnectorMultiple", "fConnectorCategory", "fConnectorConnectableSide", "fConnectorSelfConnectable", "fCanBeConnectedTo", "fConnectionFromOutlet"], exportAs: ["fConnector"] }, { kind: "component", type: i1.FMinimapComponent, selector: "f-minimap", inputs: ["fMinSize", "fNodeRenderLimit"], exportAs: ["fComponent"] }, { kind: "directive", type: i1.FGroupDirective, selector: "[fGroup]", inputs: ["fGroupId", "fGroupParentId", "fGroupPosition", "fGroupSize", "fGroupRotate", "fConnectOnNode", "fMinimapClass", "fGroupDraggingDisabled", "fGroupSelectionDisabled", "fIncludePadding", "fAutoExpandOnChildHit", "fAutoSizeToFitChildren"], outputs: ["fGroupPositionChange", "fGroupSizeChange", "fGroupRotateChange"], exportAs: ["fComponent"] }, { kind: "directive", type: i1.FNodeDirective, selector: "[fNode]", inputs: ["fNodeId", "fNodeParentId", "fNodePosition", "fNodeSize", "fNodeRotate", "fConnectOnNode", "fMinimapClass", "fNodeDraggingDisabled", "fNodeSelectionDisabled", "fIncludePadding", "fAutoExpandOnChildHit", "fAutoSizeToFitChildren"], outputs: ["fNodePositionChange", "fNodeSizeChange", "fNodeRotateChange"], exportAs: ["fComponent"] }, { kind: "directive", type: i1.FDragHandleDirective, selector: "[fDragHandle]" }, { kind: "directive", type: i1.FResizeHandleDirective, selector: "[fResizeHandle]", inputs: ["fResizeHandleType"] }, { kind: "directive", type: i1.FDragBlockerDirective, selector: "[fDragBlocker]" }, { kind: "directive", type: i1.FDraggableDirective, selector: "f-flow[fDraggable]", inputs: ["fDraggableDisabled", "fDropToGroup", "fMultiSelectTrigger", "fReassignConnectionTrigger", "fCreateConnectionTrigger", "fConnectionWaypointsTrigger", "fMoveControlPointTrigger", "fNodeResizeTrigger", "fNodeRotateTrigger", "fNodeMoveTrigger", "fCanvasMoveTrigger", "fExternalItemTrigger", "fEmitOnNodeIntersect", "vCellSize", "hCellSize", "fCellSizeWhileDragging"], outputs: ["fSelectionChange", "fDeleteSelected", "fNodeIntersectedWithConnections", "fNodeConnectionsIntersection", "fCreateNode", "fMoveNodes", "fReassignConnection", "fCreateConnection", "fConnectionWaypointsChanged", "fDropToGroup", "fDragStarted", "fDragEnded"], exportAs: ["fDraggable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: FlowCanvasComponent, decorators: [{
             type: Component,
@@ -5900,7 +6203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImpo
                          * esisterebbe. Registrarlo col preset di default non cambia niente di per se'.
                          */
                         withControlScheme(F_DEFAULT_CONTROL_SCHEME)),
-                    ], template: "<!--\r\n  Gerarchia obbligatoria: f-flow > f-canvas > fNode / f-connection.\r\n  I `@for` sono direttamente dentro <f-canvas>: nessun wrapper, quindi non serve\r\n  `ngProjectAs` (che sarebbe indispensabile con blocchi annidati).\r\n-->\r\n<f-flow\r\n  fDraggable\r\n  (fCreateConnection)=\"onCreateConnection($event)\"\r\n  (fReassignConnection)=\"onReassignConnection($event)\"\r\n  (fMoveNodes)=\"onMoveNodes($event)\"\r\n  (fSelectionChange)=\"onSelectionChange($event)\"\r\n  (fDeleteSelected)=\"onDeleteSelected($event)\"\r\n  (fCreateNode)=\"onCreateNode($event)\"\r\n  (fNodesRendered)=\"onNodesRendered()\"\r\n  (fDragStarted)=\"onDragStarted($event)\"\r\n  (fDragEnded)=\"onDragEnded()\"\r\n>\r\n  <!--\r\n    `#canvas` + `(fCanvasChange)`: il primo serve per chiamare `fitToScreen()`, il secondo per\r\n    sapere che l'utente ha mosso la vista. `[debounceTime]` non si imposta: l'evento serve solo\r\n    ad accendere un flag, non a ricalcolare niente.\r\n  -->\r\n  <f-canvas fZoom #canvas (fCanvasChange)=\"onCanvasChange()\">\r\n    <f-background>\r\n      <f-circle-pattern />\r\n    </f-background>\r\n\r\n    <!--\r\n      \u00A73.6 \u2014 i riquadri di raggruppamento. Vanno **sotto** i node, e non c'e' niente da fare per\r\n      ottenerlo: `[fGroup]` viene proiettato nel layer dei gruppi, che nell'ordine della libreria\r\n      sta sotto connessioni e node.\r\n\r\n      Sono commenti: nessun connettore, nessun arco, nessuna raggiungibilita'. Il corpo del\r\n      riquadro ha `pointer-events: none` (nel CSS) e solo la barra del titolo risponde: senza,\r\n      una cornice grande quanto mezzo canvas si mangerebbe i click destinati alla panoramica e\r\n      alla selezione a rettangolo, e i node dentro non si potrebbero piu' prendere.\r\n    -->\r\n    @for (group of groups(); track group.name) {\r\n      <div\r\n        fGroup\r\n        [fGroupId]=\"group.id\"\r\n        [fGroupPosition]=\"group.position\"\r\n        [fGroupSize]=\"group.size\"\r\n        [fGroupDraggingDisabled]=\"!isEditable()\"\r\n        [class]=\"'fb-group ' + group.colorClass\"\r\n        [class.fb-group--collapsed]=\"group.isCollapsed\"\r\n        [class.fb-group--selected]=\"isGroupSelected(group)\"\r\n        (fGroupSizeChange)=\"onGroupResized(group.name, $event)\"\r\n      >\r\n        <!--\r\n          `fDragHandle` sulla sola barra: il riquadro si sposta dal titolo, come una finestra.\r\n          Trascinandolo da dentro si sposterebbe la cornice ogni volta che si prova a prendere\r\n          un node che le sta sopra.\r\n        -->\r\n        <div\r\n          class=\"fb-group__bar\"\r\n          fDragHandle\r\n          [title]=\"group.description || group.label\"\r\n          (click)=\"onGroupClick($event, group.name)\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            fDragBlocker\r\n            class=\"fb-group__fold\"\r\n            [attr.aria-label]=\"group.isCollapsed ? 'Apri il riquadro' : 'Chiudi il riquadro'\"\r\n            [title]=\"\r\n              group.isCollapsed\r\n                ? 'Apri il riquadro'\r\n                : 'Chiudi il riquadro: resta la barra del titolo, gli elementi restano dove sono'\r\n            \"\r\n            (click)=\"toggleGroupCollapsed($event, group.name)\"\r\n          >\r\n            {{ group.isCollapsed ? '\u25B8' : '\u25BE' }}\r\n          </button>\r\n          <span class=\"fb-group__title\">{{ group.label }}</span>\r\n          <span class=\"fb-group__count\" [title]=\"group.memberCount + ' elementi nel riquadro'\">\r\n            {{ group.memberCount }}\r\n          </span>\r\n          @if (group.unknownMembers.length > 0) {\r\n            <!--\r\n              Membri che nominano un elemento che non c'e' piu'. Non e' un difetto (\u00A73.6): e' cio'\r\n              che resta dopo una cancellazione, ed e' un avviso \u2014 l'attivazione non si blocca.\r\n            -->\r\n            <span\r\n              class=\"fb-group__stale\"\r\n              [title]=\"'Elementi non piu\u2019 esistenti: ' + group.unknownMembers.join(', ')\"\r\n            >\r\n              {{ group.unknownMembers.length }} da ripulire\r\n            </span>\r\n          }\r\n          @if (isEditable()) {\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-group__remove\"\r\n              [attr.aria-label]=\"'Elimina il riquadro ' + group.label\"\r\n              title=\"Elimina il riquadro: gli elementi che contiene restano\"\r\n              (click)=\"onGroupRemoveClick($event, group.name)\"\r\n            >\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        @if (!group.isCollapsed && group.description) {\r\n          <p class=\"fb-group__note\">{{ group.description }}</p>\r\n        }\r\n\r\n        @if (isEditable() && !group.isCollapsed) {\r\n          <!--\r\n            Una sola maniglia, in basso a destra: quattro bersagli su una cornice che sta sotto\r\n            i node si prendono per sbaglio. Ridimensionare **dichiara** la geometria, che e' il\r\n            modo di uscire dal \u00ABcalcolala sui membri\u00BB (\u00A73.6).\r\n          -->\r\n          <div\r\n            fResizeHandle\r\n            [fResizeHandleType]=\"resizeHandles.RIGHT_BOTTOM\"\r\n            class=\"fb-group__resize\"\r\n            title=\"Ridimensiona il riquadro\"\r\n          ></div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @for (edge of edges(); track edge.id) {\r\n      <f-connection\r\n        [fConnectionId]=\"edge.id\"\r\n        [fSourceId]=\"edge.sourceId\"\r\n        [fTargetId]=\"edge.targetId\"\r\n        fBehavior=\"floating\"\r\n        [fType]=\"edge.isGoTo ? 'segment' : 'bezier'\"\r\n        [class]=\"'fb-edge fb-edge--' + edge.kind + (edge.isGoTo ? ' fb-edge--goto' : '')\"\r\n        [class.fb-edge--insert]=\"edge.id === insertionEdgeId()\"\r\n      >\r\n        <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n        @if (edge.label) {\r\n          <div fConnectionContent class=\"fb-edge-label\">{{ edge.label }}</div>\r\n        }\r\n      </f-connection>\r\n    }\r\n\r\n    @for (node of nodes(); track node.id) {\r\n      <div\r\n        fNode\r\n        fDragHandle\r\n        [fNodeId]=\"node.id\"\r\n        [fNodePosition]=\"node.position\"\r\n        [class]=\"'fb-node ' + categoryClass(node) + ' ' + node.widthClass\"\r\n        [class.fb-node--start]=\"node.isStart\"\r\n        [class.fb-node--selected]=\"isSelected(node)\"\r\n        [class.fb-node--unreachable]=\"!node.isReachable\"\r\n        [class.fb-node--error]=\"node.severity === 'Error'\"\r\n        [class.fb-node--warning]=\"node.severity === 'Warning'\"\r\n        (dblclick)=\"onNodeDoubleClick(node.name)\"\r\n      >\r\n        <!--\r\n          Lo Start non ha ingresso: e' il punto di partenza (\u00A73.4).\r\n          `fConnectorConnectableSide` e' cio' che fa entrare l'arco dall'alto: senza, foblex\r\n          calcola il lato e un arco che scende dal node sopra potrebbe agganciarsi di fianco.\r\n        -->\r\n        @if (!node.isStart) {\r\n          <div\r\n            fConnector\r\n            fConnectorType=\"target\"\r\n            [fConnectorId]=\"targetIdOf(node)\"\r\n            [fConnectorConnectableSide]=\"sides.TOP\"\r\n            fConnectorMultiple=\"true\"\r\n            class=\"fb-connector fb-connector--in\"\r\n            title=\"Ingresso\"\r\n          ></div>\r\n        }\r\n\r\n        <div class=\"fb-node__head\">\r\n          <span class=\"fb-node__icon\" aria-hidden=\"true\">{{ node.icon }}</span>\r\n          <div class=\"fb-node__text\">\r\n            <span class=\"fb-node__title\" [title]=\"node.description || node.label\">{{ node.label }}</span>\r\n            <span class=\"fb-node__sub\">\r\n              {{ node.typeLabel }}\r\n              @if (node.subtitle) {\r\n                <span class=\"fb-node__sub-dot\">\u00B7</span>{{ node.subtitle }}\r\n              }\r\n            </span>\r\n          </div>\r\n          @if (node.hasAutomaticOutput) {\r\n            <!-- L'elemento espone il proprio risultato sotto il proprio nome (\u00A74.5). -->\r\n            <span class=\"fb-node__auto\" title=\"Espone un output automatico referenziabile come \u00AB{{ node.name }}\u00BB\">\r\n              \u0192\r\n            </span>\r\n          }\r\n          <!--\r\n            `fDragBlocker` impedisce che il pointerdown sul bottone diventi un trascinamento\r\n            del node: senza, aprire il dettaglio sposterebbe l'elemento di qualche pixel.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            fDragBlocker\r\n            class=\"fb-node__edit\"\r\n            [attr.aria-label]=\"'Apri il dettaglio di ' + node.label\"\r\n            title=\"Apri il dettaglio\"\r\n            (click)=\"onEditClick($event, node.name)\"\r\n          >\r\n            \u270E\r\n          </button>\r\n          @if (!node.isStart && isEditable()) {\r\n            <!--\r\n              Duplica: sta accanto a \u270E e non solo nell'inspector perche' e' il gesto con cui si\r\n              riusa un elemento gi\u00E0 configurato, e cercarlo dentro il form dell'elemento da\r\n              copiare e' il posto in cui non lo si cerca. Compare come \u00AB\u00D7\u00BB, sul solo node\r\n              selezionato: aggiunge un elemento al documento, quindi non deve trovarsi sotto il\r\n              puntatore di chi sta solo attraversando il grafo.\r\n            -->\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-node__duplicate\"\r\n              [attr.aria-label]=\"'Duplica ' + node.label\"\r\n              title=\"Duplica questo elemento (Ctrl+D)\"\r\n              (click)=\"onDuplicateClick($event, node.name)\"\r\n            >\r\n              \u29C9\r\n            </button>\r\n            <!--\r\n              Si mostra solo sul node **selezionato**, non al passaggio del mouse come \u270E:\r\n              cancellare non e' reversibile con un altro clic, e un comando distruttivo che\r\n              appare sotto il puntatore mentre si attraversa il grafo si preme per sbaglio.\r\n              Lo Start non lo espone: un flow senza ingresso non esisterebbe.\r\n            -->\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-node__remove\"\r\n              [attr.aria-label]=\"'Elimina ' + node.label\"\r\n              title=\"Elimina questo elemento (si annulla con \u21B6)\"\r\n              (click)=\"onRemoveClick($event, node.name)\"\r\n            >\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"fb-node__meta\">\r\n          @if (!node.isStart) {\r\n            <span class=\"fb-node__name\" [title]=\"'Nome tecnico: ' + node.name\">{{ node.name }}</span>\r\n          }\r\n          @if (!node.isReachable) {\r\n            <span class=\"fb-badge fb-badge--unreachable\" title=\"Nessun percorso raggiunge questo elemento dallo Start\">\r\n              scollegato\r\n            </span>\r\n          }\r\n          @if (node.issueCount > 0) {\r\n            <span\r\n              class=\"fb-badge\"\r\n              [class.fb-badge--error]=\"node.severity === 'Error'\"\r\n              [class.fb-badge--warning]=\"node.severity === 'Warning'\"\r\n              [class.fb-badge--info]=\"node.severity === 'Info'\"\r\n              [title]=\"node.issueCount + ' rilievi di validazione'\"\r\n            >\r\n              {{ node.issueCount }}\r\n            </span>\r\n          }\r\n          @if (node.danglingOutlets.length > 0) {\r\n            <span\r\n              class=\"fb-badge fb-badge--dangling\"\r\n              [title]=\"'Rami dichiarati senza destinazione: ' + danglingLabels(node)\"\r\n            >\r\n              ramo incompleto\r\n            </span>\r\n          }\r\n        </div>\r\n\r\n        <!--\r\n          Le uscite stanno sul bordo **inferiore**, una per ramo, nell'ordine in cui il modello\r\n          le dichiara: per una Decision e' l'ordine di valutazione delle regole, che e'\r\n          semantico (\u00A75.4), e da sinistra a destra si legge come la lista nell'inspector.\r\n          L'etichetta si mostra solo quando i rami sono piu' di uno: su un `next` unico\r\n          direbbe soltanto \u00ABSuccessivo\u00BB.\r\n        -->\r\n        <div class=\"fb-node__outlets\" [class.fb-node__outlets--labelled]=\"node.showsOutletLabels\">\r\n          @for (outlet of node.outlets; track outlet.key) {\r\n            <div class=\"fb-outlet\">\r\n              @if (node.showsOutletLabels) {\r\n                <span class=\"fb-outlet__label\" [title]=\"outlet.label\">{{ outlet.label }}</span>\r\n              }\r\n              <div\r\n                fConnector\r\n                fConnectorType=\"source\"\r\n                [fConnectorId]=\"connectorIdOf(node, outlet.key)\"\r\n                [fConnectorConnectableSide]=\"sides.BOTTOM\"\r\n                [class]=\"'fb-connector fb-connector--out fb-connector--' + outlet.kind\"\r\n                [title]=\"outlet.label\"\r\n              ></div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Anteprima dell'arco durante il trascinamento. -->\r\n    <f-connection-for-create fBehavior=\"floating\" fType=\"bezier\" class=\"fb-edge fb-edge--creating\">\r\n      <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n    </f-connection-for-create>\r\n\r\n    <f-selection-area />\r\n  </f-canvas>\r\n\r\n  <!--\r\n    Fuori da <f-canvas> come la minimappa: dentro, la trasformazione del canvas se lo\r\n    porterebbe via insieme ai node. `fDragBlocker` perche' il pointerdown non inizi una\r\n    panoramica invece di premere il bottone.\r\n  -->\r\n  <!--\r\n    Sempre nel DOM, nascosto con una classe e non con `@if`: dentro una proiezione di contenuto\r\n    un blocco di controllo e' una complicazione gratuita, e `visibility: hidden` lo toglie\r\n    anche dall'ordine di tabulazione. Il costo e' un bottone in piu' nel DOM, non un rischio.\r\n  -->\r\n  <div class=\"fb-viewport\" fDragBlocker role=\"group\" aria-label=\"Vista\">\r\n    <!--\r\n      Lo zoom ha bisogno di **comandi e di un numero**: con la sola rotella si finisce all'8% su\r\n      un flow grande e sembra che il canvas si sia svuotato, senza un modo evidente di tornare.\r\n      Il numero e' un bottone: riporta al 100% sull'elemento corrente.\r\n    -->\r\n    <button type=\"button\" class=\"fb-btn fb-viewport__btn\" title=\"Riduci (rotella indietro)\" (click)=\"zoomOut()\">\r\n      \u2212\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      class=\"fb-btn fb-viewport__level\"\r\n      title=\"Torna al 100% sull\u2019elemento selezionato\"\r\n      (click)=\"zoomToActual()\"\r\n    >\r\n      {{ zoomPercent() }}%\r\n    </button>\r\n    <button type=\"button\" class=\"fb-btn fb-viewport__btn\" title=\"Ingrandisci (rotella avanti)\" (click)=\"zoomIn()\">\r\n      +\r\n    </button>\r\n    <!--\r\n      La modalita\u2019 selezione. Esiste perche\u2019 i due gesti che la libreria offre di serie \u2014\r\n      `Ctrl`+clic per aggiungere, `Shift`+trascina per il rettangolo \u2014 non si vedono: senza un\r\n      interruttore, su un flow grande si finisce a spostare un elemento alla volta. Accesa, il\r\n      trascinamento sul canvas vuoto **seleziona** e la vista si sposta col tasto centrale.\r\n    -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"fb-btn fb-viewport__select\"\r\n      [class.fb-viewport__select--on]=\"isSelecting()\"\r\n      [attr.aria-pressed]=\"isSelecting()\"\r\n      [title]=\"\r\n        isSelecting()\r\n          ? 'Modalita\u2019 selezione attiva: trascina sul canvas per selezionare piu\u2019 elementi. La vista si sposta col tasto centrale del mouse'\r\n          : 'Attiva la selezione a rettangolo: trascinando sul canvas selezioni piu\u2019 elementi invece di spostare la vista (Shift+trascina fa lo stesso, sempre)'\r\n      \"\r\n      (click)=\"toggleSelectionMode()\"\r\n    >\r\n      <span class=\"fb-viewport__icon\" aria-hidden=\"true\">\u25A4</span>\r\n      Seleziona\r\n    </button>\r\n    <!--\r\n      Sempre nel DOM, nascosto con una classe e non con `@if`: dentro una proiezione di contenuto\r\n      un blocco di controllo e' una complicazione gratuita, e `visibility: hidden` lo toglie\r\n      anche dall'ordine di tabulazione. Il costo e' un bottone in piu' nel DOM, non un rischio.\r\n    -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"fb-btn fb-viewport__fit\"\r\n      [class.fb-viewport__fit--hidden]=\"!hasMovedViewport()\"\r\n      title=\"Rimetti il flow in vista. Su un flow molto grande inquadra l\u2019inizio, perche\u2019 l\u2019intero non sarebbe leggibile\"\r\n      (click)=\"resetViewport()\"\r\n    >\r\n      <span class=\"fb-viewport__icon\" aria-hidden=\"true\">\u2922</span>\r\n      Inquadra\r\n    </button>\r\n  </div>\r\n\r\n  @if (selectionCount() > 1) {\r\n    <!--\r\n      Il dato che rende utile la selezione: che si spostano **insieme**. Senza dirlo, dopo aver\r\n      selezionato cinque elementi si continua a trascinarne uno per volta.\r\n    -->\r\n    <p class=\"fb-select-hint\" role=\"status\">\r\n      {{ selectionCount() }} elementi selezionati: trascinane uno per spostarli tutti \u00B7 Ctrl+clic\r\n      aggiunge o toglie \u00B7 Canc li elimina\r\n    </p>\r\n  } @else if (isSelecting()) {\r\n    <p class=\"fb-select-hint\" role=\"status\">\r\n      Trascina sul canvas per selezionare \u00B7 la vista si sposta col tasto centrale\r\n    </p>\r\n  }\r\n\r\n  @if (insertionEdgeId()) {\r\n    <!-- Il rilascio su un arco non e' un gesto che si indovina: mentre e' possibile, si dice. -->\r\n    <p class=\"fb-insert-hint\" role=\"status\">Rilascia qui per inserire l\u2019elemento in questo percorso</p>\r\n  }\r\n\r\n  <f-minimap [fMinSize]=\"1200\" class=\"fb-minimap\" />\r\n</f-flow>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:var(--fb-canvas-bg, #f4f5f7)}f-flow{display:block;width:100%;height:100%}.fb-minimap{position:absolute;right:14px;bottom:14px;width:150px;height:300px;max-height:40%;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));overflow:hidden}.fb-viewport{position:absolute;right:14px;bottom:322px;z-index:1;display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:200px}.fb-viewport__btn,.fb-viewport__level,.fb-viewport__fit{border-radius:var(--fb-radius-xs, 6px);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));font-size:11px}.fb-viewport__btn{width:24px;padding:2px 0;font-size:14px;line-height:1}.fb-viewport__level{min-width:52px;font-variant-numeric:tabular-nums}.fb-viewport__fit--hidden{opacity:0;visibility:hidden}.fb-viewport__fit{transition:opacity .15s ease,visibility .15s ease}.fb-viewport__icon{font-size:13px;line-height:1;color:var(--fb-text-muted, #667085)}.fb-insert-hint{position:absolute;bottom:18px;left:50%;transform:translate(-50%);z-index:1;margin:0;padding:6px 12px;border-radius:999px;background:var(--fb-accent, #2f6feb);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));color:#fff;font-size:11px;font-weight:600;pointer-events:none}.fb-select-hint{position:absolute;bottom:18px;left:50%;transform:translate(-50%);z-index:1;margin:0;padding:6px 12px;border-radius:999px;border:1px solid var(--fb-border, #e2e5eb);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));color:var(--fb-text-muted, #667085);font-size:11px;font-weight:600;pointer-events:none}.fb-viewport__select{border-radius:var(--fb-radius-xs, 6px);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));font-size:11px}.fb-viewport__select--on{border-color:var(--fb-accent, #2f6feb);background:var(--fb-accent, #2f6feb);color:#fff}.fb-node{position:absolute;display:flex;flex-direction:column;box-sizing:border-box;width:240px;padding:0;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-lg, 12px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));font:inherit;cursor:grab;-webkit-user-select:none;user-select:none;transition:box-shadow .12s ease,border-color .12s ease}.fb-node--outlets-3{width:304px}.fb-node--outlets-4{width:380px}.fb-node--outlets-5{width:456px}.fb-node--outlets-6{width:520px}.fb-node:hover{box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%))}.fb-node--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:0 0 0 3px color-mix(in srgb,var(--fb-accent, #4f6ef7) 22%,transparent)}.fb-node--unreachable{border-style:dashed;opacity:.8}.fb-node--error{border-color:var(--fb-error, #c9372c)}.fb-node--warning{border-color:var(--fb-warning, #b7791f)}.fb-node__head{display:flex;align-items:center;gap:8px;padding:10px 10px 6px 12px}.fb-node__icon{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:var(--fb-radius-sm, 8px);background:var(--fb-node-accent, #667085);color:#fff;font-size:14px;line-height:1}.cat-start{--fb-node-accent: #22a06b}.cat-screen{--fb-node-accent: #3b82f6}.cat-logic{--fb-node-accent: #8b5cf6}.cat-data{--fb-node-accent: #06b6d4}.cat-action{--fb-node-accent: #f59e0b}.cat-flow{--fb-node-accent: #14b8a6}.cat-other{--fb-node-accent: #667085}.fb-node__text{flex:1;min-width:0}.fb-node__title{display:block;font-size:13px;font-weight:600;line-height:17px;color:var(--fb-text, #1a1c23);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub{display:block;margin-top:1px;font-size:11px;line-height:14px;color:var(--fb-text-muted, #6b7086);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub-dot{margin:0 4px;color:var(--fb-text-subtle, #98a2b3)}.fb-node__auto{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--fb-accent, #4f6ef7);cursor:help}.fb-node__edit{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:12px;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease}.fb-node:hover .fb-node__edit,.fb-node--selected .fb-node__edit,.fb-node__edit:focus-visible{opacity:1}.fb-node__edit:hover{background:var(--fb-surface-alt, #f7f8fa);color:var(--fb-text, #1a1c23)}.fb-node__duplicate,.fb-node__remove{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:15px;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease,color .12s ease}.fb-node--selected .fb-node__duplicate,.fb-node--selected .fb-node__remove,.fb-node__duplicate:focus-visible,.fb-node__remove:focus-visible{opacity:1}.fb-node__remove:hover{background:color-mix(in srgb,var(--fb-error, #c9372c) 12%,transparent);color:var(--fb-error, #c9372c)}.fb-node__duplicate:hover{background:color-mix(in srgb,var(--fb-accent, #3b6ef2) 12%,transparent);color:var(--fb-accent, #3b6ef2)}.fb-node__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:14px;padding:0 12px 6px}.fb-node__name{flex:0 1 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--fb-text-subtle, #98a2b3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-badge{padding:1px 6px;border-radius:10px;background:var(--fb-badge-bg, #eef0f4);font-size:10px;font-weight:600;color:var(--fb-text-muted, #6b7086);white-space:nowrap;cursor:help}.fb-badge--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 14%,transparent);color:var(--fb-error, #c9372c)}.fb-badge--warning{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-badge--info{background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 12%,transparent);color:var(--fb-accent, #4f6ef7)}.fb-badge--unreachable,.fb-badge--dangling{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-node__outlets{display:flex;align-items:flex-end;justify-content:space-evenly;gap:4px;padding:0 8px 4px}.fb-node__outlets--labelled{padding-top:5px;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-outlet{display:flex;flex:1 1 0;flex-direction:column;align-items:center;gap:2px;min-width:0}.fb-outlet__label{max-width:100%;font-size:10px;line-height:13px;color:var(--fb-text-muted, #6b7086);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-connector{box-sizing:border-box;width:12px;height:12px;flex:0 0 auto;border:2px solid var(--fb-surface, #fff);border-radius:50%;background:var(--fb-connector, #98a2b3);cursor:crosshair;transition:transform .12s ease,box-shadow .12s ease}f-flow .fb-connector--out{position:relative;inset:auto;margin-bottom:-12px}.fb-connector--out:hover{transform:scale(1.2)}f-flow .fb-connector--in{position:absolute;inset:-2px auto auto 50%;width:24px;height:4px;border:0;border-radius:2px;transform:translate(-50%);background:var(--fb-border-strong, #cfd4de)}.fb-connector--out{--ff-connector-connected-color: var(--fb-connector, #98a2b3)}.fb-connector--Next,.fb-connector--Start,.fb-connector--LoopNext{--fb-connector: var(--fb-edge-next, #98a2b3)}.fb-connector--Rule,.fb-connector--WaitEvent{--fb-connector: var(--fb-edge-rule, #8b5cf6)}.fb-connector--Default,.fb-connector--LoopEnd{--fb-connector: var(--fb-edge-default, #06b6d4)}.fb-connector--Fault{--fb-connector: var(--fb-edge-fault, #dc2626)}.fb-connector--Timeout,.fb-connector--ScheduledPath{--fb-connector: var(--fb-edge-timeout, #f59e0b)}.fb-connector.f-connector-connectable{box-shadow:0 0 0 4px color-mix(in srgb,var(--fb-accent, #4f6ef7) 28%,transparent)}.fb-group{position:absolute;box-sizing:border-box;border:1px solid var(--fb-group-border, #d6dae1);border-radius:var(--fb-radius, 10px);background:var(--fb-group-fill, rgb(148 163 184 / 10%));pointer-events:none;overflow:hidden}.fb-group--selected{border-color:var(--fb-accent, #2f6feb);box-shadow:0 0 0 2px color-mix(in srgb,var(--fb-accent, #2f6feb) 25%,transparent)}.fb-group__bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 6px;border-bottom:1px solid var(--fb-group-border, #d6dae1);background:var(--fb-group-bar, rgb(148 163 184 / 22%));color:var(--fb-text, #1d2939);font-size:12px;font-weight:600;pointer-events:auto;cursor:move;-webkit-user-select:none;user-select:none}.fb-group--collapsed .fb-group__bar{border-bottom:none}.fb-group__fold,.fb-group__remove{flex:none;width:18px;height:18px;padding:0;border:none;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:inherit;font:inherit;font-size:12px;line-height:1;cursor:pointer}.fb-group__fold:hover,.fb-group__remove:hover{background:#10182814}.fb-group__remove{margin-left:auto;font-size:14px}.fb-group__title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fb-group__count{flex:none;padding:0 5px;border-radius:8px;background:#10182814;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums}.fb-group__stale{flex:none;padding:0 5px;border-radius:8px;background:color-mix(in srgb,var(--fb-warning, #b7791f) 14%,transparent);color:var(--fb-warning, #b7791f);font-size:10px;font-weight:600}.fb-group__note{margin:6px 8px 0;color:var(--fb-text-muted, #667085);font-size:11px;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.fb-group__resize{position:absolute;right:0;bottom:0;width:14px;height:14px;border-right:2px solid var(--fb-group-border, #d6dae1);border-bottom:2px solid var(--fb-group-border, #d6dae1);border-bottom-right-radius:var(--fb-radius, 10px);pointer-events:auto;cursor:nwse-resize}.fb-group--giallo{--fb-group-border: #e0c26a;--fb-group-fill: rgb(234 179 8 / 10%);--fb-group-bar: rgb(234 179 8 / 24%)}.fb-group--verde{--fb-group-border: #86c79b;--fb-group-fill: rgb(34 160 89 / 10%);--fb-group-bar: rgb(34 160 89 / 22%)}.fb-group--blu{--fb-group-border: #93b4ea;--fb-group-fill: rgb(47 111 235 / 9%);--fb-group-bar: rgb(47 111 235 / 20%)}.fb-group--viola{--fb-group-border: #bda6e6;--fb-group-fill: rgb(139 92 246 / 10%);--fb-group-bar: rgb(139 92 246 / 22%)}.fb-group--rosso{--fb-group-border: #e6a3a3;--fb-group-fill: rgb(214 69 69 / 9%);--fb-group-bar: rgb(214 69 69 / 20%)}.fb-group--grigio,.fb-group--neutro{--fb-group-border: #d6dae1;--fb-group-fill: rgb(148 163 184 / 10%);--fb-group-bar: rgb(148 163 184 / 22%)}\n"] }]
+                    ], template: "<!--\r\n  Gerarchia obbligatoria: f-flow > f-canvas > fNode / f-connection.\r\n  I `@for` sono direttamente dentro <f-canvas>: nessun wrapper, quindi non serve\r\n  `ngProjectAs` (che sarebbe indispensabile con blocchi annidati).\r\n-->\r\n<f-flow\r\n  fDraggable\r\n  (fCreateConnection)=\"onCreateConnection($event)\"\r\n  (fReassignConnection)=\"onReassignConnection($event)\"\r\n  (fMoveNodes)=\"onMoveNodes($event)\"\r\n  (fSelectionChange)=\"onSelectionChange($event)\"\r\n  (fDeleteSelected)=\"onDeleteSelected($event)\"\r\n  (fCreateNode)=\"onCreateNode($event)\"\r\n  (fNodesRendered)=\"onNodesRendered()\"\r\n  (fDragStarted)=\"onDragStarted($event)\"\r\n  (fDragEnded)=\"onDragEnded()\"\r\n>\r\n  <!--\r\n    `#canvas` + `(fCanvasChange)`: il primo serve per chiamare `fitToScreen()`, il secondo per\r\n    sapere che l'utente ha mosso la vista. `[debounceTime]` non si imposta: l'evento serve solo\r\n    ad accendere un flag, non a ricalcolare niente.\r\n  -->\r\n  <f-canvas fZoom #canvas (fCanvasChange)=\"onCanvasChange()\">\r\n    <f-background>\r\n      <f-circle-pattern />\r\n    </f-background>\r\n\r\n    <!--\r\n      \u00A73.6 \u2014 i riquadri di raggruppamento. Vanno **sotto** i node, e non c'e' niente da fare per\r\n      ottenerlo: `[fGroup]` viene proiettato nel layer dei gruppi, che nell'ordine della libreria\r\n      sta sotto connessioni e node.\r\n\r\n      Sono commenti: nessun connettore, nessun arco, nessuna raggiungibilita'. Il corpo del\r\n      riquadro ha `pointer-events: none` (nel CSS) e solo la barra del titolo risponde: senza,\r\n      una cornice grande quanto mezzo canvas si mangerebbe i click destinati alla panoramica e\r\n      alla selezione a rettangolo, e i node dentro non si potrebbero piu' prendere.\r\n    -->\r\n    @for (group of groups(); track group.name) {\r\n      <div\r\n        fGroup\r\n        [fGroupId]=\"group.id\"\r\n        [fGroupPosition]=\"group.position\"\r\n        [fGroupSize]=\"group.size\"\r\n        [fGroupDraggingDisabled]=\"!isEditable()\"\r\n        [class]=\"'fb-group ' + group.colorClass\"\r\n        [class.fb-group--selected]=\"isGroupSelected(group)\"\r\n        (fGroupSizeChange)=\"onGroupResized(group.name, $event)\"\r\n      >\r\n        <!--\r\n          `fDragHandle` sulla sola barra: il riquadro si sposta dal titolo, come una finestra.\r\n          Trascinandolo da dentro si sposterebbe la cornice ogni volta che si prova a prendere\r\n          un node che le sta sopra.\r\n        -->\r\n        <div\r\n          class=\"fb-group__bar\"\r\n          fDragHandle\r\n          [title]=\"group.description || group.label\"\r\n          (click)=\"onGroupClick($event, group.name)\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            fDragBlocker\r\n            class=\"fb-group__fold\"\r\n            aria-label=\"Chiudi il riquadro\"\r\n            title=\"Chiudi il riquadro: gli elementi si nascondono e gli archi che lo attraversano si attaccano alla pastiglia\"\r\n            (click)=\"toggleGroupCollapsed($event, group.name)\"\r\n          >\r\n            \u25BE\r\n          </button>\r\n          <span class=\"fb-group__title\">{{ group.label }}</span>\r\n          <span class=\"fb-group__count\" [title]=\"group.memberCount + ' elementi nel riquadro'\">\r\n            {{ group.memberCount }}\r\n          </span>\r\n          @if (group.unknownMembers.length > 0) {\r\n            <!--\r\n              Membri che nominano un elemento che non c'e' piu'. Non e' un difetto (\u00A73.6): e' cio'\r\n              che resta dopo una cancellazione, ed e' un avviso \u2014 l'attivazione non si blocca.\r\n            -->\r\n            <span\r\n              class=\"fb-group__stale\"\r\n              [title]=\"'Elementi non piu\u2019 esistenti: ' + group.unknownMembers.join(', ')\"\r\n            >\r\n              {{ group.unknownMembers.length }} da ripulire\r\n            </span>\r\n          }\r\n          @if (isEditable()) {\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-group__remove\"\r\n              [attr.aria-label]=\"'Elimina il riquadro ' + group.label\"\r\n              title=\"Elimina il riquadro: gli elementi che contiene restano\"\r\n              (click)=\"onGroupRemoveClick($event, group.name)\"\r\n            >\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        @if (group.description) {\r\n          <p class=\"fb-group__note\">{{ group.description }}</p>\r\n        }\r\n\r\n        @if (isEditable()) {\r\n          <!--\r\n            Una sola maniglia, in basso a destra: quattro bersagli su una cornice che sta sotto\r\n            i node si prendono per sbaglio. Ridimensionare **dichiara** la geometria, che e' il\r\n            modo di uscire dal \u00ABcalcolala sui membri\u00BB (\u00A73.6).\r\n          -->\r\n          <div\r\n            fResizeHandle\r\n            [fResizeHandleType]=\"resizeHandles.RIGHT_BOTTOM\"\r\n            class=\"fb-group__resize\"\r\n            title=\"Ridimensiona il riquadro\"\r\n          ></div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!--\r\n      \u00A73.6 \u2014 un riquadro **chiuso**: una pastiglia al posto dei suoi elementi.\r\n\r\n      \u00C8 un `fNode` e non un `fGroup` per una ragione sola, ed e' la regola 4 di @foblex/flow: per\r\n      nascondere i node bisogna che gli archi che entravano e uscivano trovino un connettore\r\n      **vero**, altrimenti hanno geometria 0\u00D70 e si attaccano all'angolo del canvas. La pastiglia e'\r\n      quel connettore. Un solo connettore in uscita: dietro ci stanno elementi diversi, e il nome di\r\n      quello che esce sta nell'etichetta dell'arco.\r\n    -->\r\n    @for (fold of folds(); track fold.id) {\r\n      <div\r\n        fNode\r\n        fDragHandle\r\n        [fNodeId]=\"fold.id\"\r\n        [fNodePosition]=\"fold.position\"\r\n        [class]=\"'fb-fold ' + fold.colorClass\"\r\n        [class.fb-fold--selected]=\"isFoldSelected(fold)\"\r\n        [class.fb-fold--error]=\"fold.severity === 'Error'\"\r\n        [class.fb-fold--warning]=\"fold.severity === 'Warning'\"\r\n        (dblclick)=\"toggleGroupCollapsed($event, fold.name)\"\r\n      >\r\n        <div\r\n          fConnector\r\n          fConnectorType=\"target\"\r\n          [fConnectorId]=\"foldTargetIdOf(fold)\"\r\n          [fConnectorConnectableSide]=\"sides.TOP\"\r\n          fConnectorMultiple=\"true\"\r\n          class=\"fb-connector fb-connector--in\"\r\n          title=\"Ingresso del riquadro chiuso\"\r\n        ></div>\r\n\r\n        <div class=\"fb-fold__head\">\r\n          <button\r\n            type=\"button\"\r\n            fDragBlocker\r\n            class=\"fb-fold__open\"\r\n            [attr.aria-label]=\"'Apri il riquadro ' + fold.label\"\r\n            title=\"Apri il riquadro: gli elementi tornano visibili al loro posto\"\r\n            (click)=\"toggleGroupCollapsed($event, fold.name)\"\r\n          >\r\n            \u25B8\r\n          </button>\r\n          <span class=\"fb-fold__title\" [title]=\"fold.description || fold.label\">{{ fold.label }}</span>\r\n          @if (isEditable()) {\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-fold__remove\"\r\n              [attr.aria-label]=\"'Elimina il riquadro ' + fold.label\"\r\n              title=\"Elimina il riquadro: gli elementi che contiene restano\"\r\n              (click)=\"onGroupRemoveClick($event, fold.name)\"\r\n            >\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"fb-fold__meta\">\r\n          <span class=\"fb-fold__count\">\r\n            {{ fold.memberCount }} {{ fold.memberCount === 1 ? 'elemento nascosto' : 'elementi nascosti' }}\r\n          </span>\r\n          @if (fold.issueCount > 0) {\r\n            <!-- I rilievi di cio' che e' nascosto: chiudere un riquadro non nasconde un errore (\u00A77). -->\r\n            <span\r\n              class=\"fb-badge\"\r\n              [class.fb-badge--error]=\"fold.severity === 'Error'\"\r\n              [class.fb-badge--warning]=\"fold.severity === 'Warning'\"\r\n              [class.fb-badge--info]=\"fold.severity === 'Info'\"\r\n              [title]=\"fold.issueCount + ' rilievi negli elementi nascosti'\"\r\n            >\r\n              {{ fold.issueCount }}\r\n            </span>\r\n          }\r\n          @if (fold.unknownMembers.length > 0) {\r\n            <span\r\n              class=\"fb-badge fb-badge--dangling\"\r\n              [title]=\"'Elementi non piu\u2019 esistenti: ' + fold.unknownMembers.join(', ')\"\r\n            >\r\n              {{ fold.unknownMembers.length }} da ripulire\r\n            </span>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"fb-fold__outlets\">\r\n          <div\r\n            fConnector\r\n            fConnectorType=\"source\"\r\n            [fConnectorId]=\"foldSourceIdOf(fold)\"\r\n            [fConnectorConnectableSide]=\"sides.BOTTOM\"\r\n            class=\"fb-connector fb-connector--out fb-connector--Next\"\r\n            title=\"Uscite del riquadro chiuso\"\r\n          ></div>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    @for (edge of edges(); track edge.id) {\r\n      <f-connection\r\n        [fConnectionId]=\"edge.id\"\r\n        [fSourceId]=\"edge.sourceId\"\r\n        [fTargetId]=\"edge.targetId\"\r\n        fBehavior=\"floating\"\r\n        [fType]=\"edge.isGoTo ? 'segment' : 'bezier'\"\r\n        [class]=\"'fb-edge fb-edge--' + edge.kind + (edge.isGoTo ? ' fb-edge--goto' : '')\"\r\n        [class.fb-edge--insert]=\"edge.id === insertionEdgeId()\"\r\n        [class.fb-edge--folded]=\"edge.isFolded\"\r\n      >\r\n        <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n        @if (edge.label) {\r\n          <div fConnectionContent class=\"fb-edge-label\">{{ edge.label }}</div>\r\n        }\r\n      </f-connection>\r\n    }\r\n\r\n    @for (node of nodes(); track node.id) {\r\n      <div\r\n        fNode\r\n        fDragHandle\r\n        [fNodeId]=\"node.id\"\r\n        [fNodePosition]=\"node.position\"\r\n        [class]=\"'fb-node ' + categoryClass(node) + ' ' + node.widthClass\"\r\n        [class.fb-node--start]=\"node.isStart\"\r\n        [class.fb-node--selected]=\"isSelected(node)\"\r\n        [class.fb-node--unreachable]=\"!node.isReachable\"\r\n        [class.fb-node--error]=\"node.severity === 'Error'\"\r\n        [class.fb-node--warning]=\"node.severity === 'Warning'\"\r\n        (dblclick)=\"onNodeDoubleClick(node.name)\"\r\n      >\r\n        <!--\r\n          Lo Start non ha ingresso: e' il punto di partenza (\u00A73.4).\r\n          `fConnectorConnectableSide` e' cio' che fa entrare l'arco dall'alto: senza, foblex\r\n          calcola il lato e un arco che scende dal node sopra potrebbe agganciarsi di fianco.\r\n        -->\r\n        @if (!node.isStart) {\r\n          <div\r\n            fConnector\r\n            fConnectorType=\"target\"\r\n            [fConnectorId]=\"targetIdOf(node)\"\r\n            [fConnectorConnectableSide]=\"sides.TOP\"\r\n            fConnectorMultiple=\"true\"\r\n            class=\"fb-connector fb-connector--in\"\r\n            title=\"Ingresso\"\r\n          ></div>\r\n        }\r\n\r\n        <div class=\"fb-node__head\">\r\n          <span class=\"fb-node__icon\" aria-hidden=\"true\">{{ node.icon }}</span>\r\n          <div class=\"fb-node__text\">\r\n            <span class=\"fb-node__title\" [title]=\"node.description || node.label\">{{ node.label }}</span>\r\n            <span class=\"fb-node__sub\">\r\n              {{ node.typeLabel }}\r\n              @if (node.subtitle) {\r\n                <span class=\"fb-node__sub-dot\">\u00B7</span>{{ node.subtitle }}\r\n              }\r\n            </span>\r\n          </div>\r\n          @if (node.hasAutomaticOutput) {\r\n            <!-- L'elemento espone il proprio risultato sotto il proprio nome (\u00A74.5). -->\r\n            <span class=\"fb-node__auto\" title=\"Espone un output automatico referenziabile come \u00AB{{ node.name }}\u00BB\">\r\n              \u0192\r\n            </span>\r\n          }\r\n          <!--\r\n            `fDragBlocker` impedisce che il pointerdown sul bottone diventi un trascinamento\r\n            del node: senza, aprire il dettaglio sposterebbe l'elemento di qualche pixel.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            fDragBlocker\r\n            class=\"fb-node__edit\"\r\n            [attr.aria-label]=\"'Apri il dettaglio di ' + node.label\"\r\n            title=\"Apri il dettaglio\"\r\n            (click)=\"onEditClick($event, node.name)\"\r\n          >\r\n            \u270E\r\n          </button>\r\n          @if (!node.isStart && isEditable()) {\r\n            <!--\r\n              Duplica: sta accanto a \u270E e non solo nell'inspector perche' e' il gesto con cui si\r\n              riusa un elemento gi\u00E0 configurato, e cercarlo dentro il form dell'elemento da\r\n              copiare e' il posto in cui non lo si cerca. Compare come \u00AB\u00D7\u00BB, sul solo node\r\n              selezionato: aggiunge un elemento al documento, quindi non deve trovarsi sotto il\r\n              puntatore di chi sta solo attraversando il grafo.\r\n            -->\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-node__duplicate\"\r\n              [attr.aria-label]=\"'Duplica ' + node.label\"\r\n              title=\"Duplica questo elemento (Ctrl+D)\"\r\n              (click)=\"onDuplicateClick($event, node.name)\"\r\n            >\r\n              \u29C9\r\n            </button>\r\n            <!--\r\n              Si mostra solo sul node **selezionato**, non al passaggio del mouse come \u270E:\r\n              cancellare non e' reversibile con un altro clic, e un comando distruttivo che\r\n              appare sotto il puntatore mentre si attraversa il grafo si preme per sbaglio.\r\n              Lo Start non lo espone: un flow senza ingresso non esisterebbe.\r\n            -->\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-node__remove\"\r\n              [attr.aria-label]=\"'Elimina ' + node.label\"\r\n              title=\"Elimina questo elemento (si annulla con \u21B6)\"\r\n              (click)=\"onRemoveClick($event, node.name)\"\r\n            >\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"fb-node__meta\">\r\n          @if (!node.isStart) {\r\n            <span class=\"fb-node__name\" [title]=\"'Nome tecnico: ' + node.name\">{{ node.name }}</span>\r\n          }\r\n          @if (!node.isReachable) {\r\n            <span class=\"fb-badge fb-badge--unreachable\" title=\"Nessun percorso raggiunge questo elemento dallo Start\">\r\n              scollegato\r\n            </span>\r\n          }\r\n          @if (node.issueCount > 0) {\r\n            <span\r\n              class=\"fb-badge\"\r\n              [class.fb-badge--error]=\"node.severity === 'Error'\"\r\n              [class.fb-badge--warning]=\"node.severity === 'Warning'\"\r\n              [class.fb-badge--info]=\"node.severity === 'Info'\"\r\n              [title]=\"node.issueCount + ' rilievi di validazione'\"\r\n            >\r\n              {{ node.issueCount }}\r\n            </span>\r\n          }\r\n          @if (node.danglingOutlets.length > 0) {\r\n            <span\r\n              class=\"fb-badge fb-badge--dangling\"\r\n              [title]=\"'Rami dichiarati senza destinazione: ' + danglingLabels(node)\"\r\n            >\r\n              ramo incompleto\r\n            </span>\r\n          }\r\n        </div>\r\n\r\n        <!--\r\n          Le uscite stanno sul bordo **inferiore**, una per ramo, nell'ordine in cui il modello\r\n          le dichiara: per una Decision e' l'ordine di valutazione delle regole, che e'\r\n          semantico (\u00A75.4), e da sinistra a destra si legge come la lista nell'inspector.\r\n          L'etichetta si mostra solo quando i rami sono piu' di uno: su un `next` unico\r\n          direbbe soltanto \u00ABSuccessivo\u00BB.\r\n        -->\r\n        <div class=\"fb-node__outlets\" [class.fb-node__outlets--labelled]=\"node.showsOutletLabels\">\r\n          @for (outlet of node.outlets; track outlet.key) {\r\n            <div class=\"fb-outlet\">\r\n              @if (node.showsOutletLabels) {\r\n                <span class=\"fb-outlet__label\" [title]=\"outlet.label\">{{ outlet.label }}</span>\r\n              }\r\n              <div\r\n                fConnector\r\n                fConnectorType=\"source\"\r\n                [fConnectorId]=\"connectorIdOf(node, outlet.key)\"\r\n                [fConnectorConnectableSide]=\"sides.BOTTOM\"\r\n                [class]=\"'fb-connector fb-connector--out fb-connector--' + outlet.kind\"\r\n                [title]=\"outlet.label\"\r\n              ></div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Anteprima dell'arco durante il trascinamento. -->\r\n    <f-connection-for-create fBehavior=\"floating\" fType=\"bezier\" class=\"fb-edge fb-edge--creating\">\r\n      <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n    </f-connection-for-create>\r\n\r\n    <f-selection-area />\r\n  </f-canvas>\r\n\r\n  <!--\r\n    Fuori da <f-canvas> come la minimappa: dentro, la trasformazione del canvas se lo\r\n    porterebbe via insieme ai node. `fDragBlocker` perche' il pointerdown non inizi una\r\n    panoramica invece di premere il bottone.\r\n  -->\r\n  <!--\r\n    Sempre nel DOM, nascosto con una classe e non con `@if`: dentro una proiezione di contenuto\r\n    un blocco di controllo e' una complicazione gratuita, e `visibility: hidden` lo toglie\r\n    anche dall'ordine di tabulazione. Il costo e' un bottone in piu' nel DOM, non un rischio.\r\n  -->\r\n  <div class=\"fb-viewport\" fDragBlocker role=\"group\" aria-label=\"Vista\">\r\n    <!--\r\n      Lo zoom ha bisogno di **comandi e di un numero**: con la sola rotella si finisce all'8% su\r\n      un flow grande e sembra che il canvas si sia svuotato, senza un modo evidente di tornare.\r\n      Il numero e' un bottone: riporta al 100% sull'elemento corrente.\r\n    -->\r\n    <button type=\"button\" class=\"fb-btn fb-viewport__btn\" title=\"Riduci (rotella indietro)\" (click)=\"zoomOut()\">\r\n      \u2212\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      class=\"fb-btn fb-viewport__level\"\r\n      title=\"Torna al 100% sull\u2019elemento selezionato\"\r\n      (click)=\"zoomToActual()\"\r\n    >\r\n      {{ zoomPercent() }}%\r\n    </button>\r\n    <button type=\"button\" class=\"fb-btn fb-viewport__btn\" title=\"Ingrandisci (rotella avanti)\" (click)=\"zoomIn()\">\r\n      +\r\n    </button>\r\n    <!--\r\n      La modalita\u2019 selezione. Esiste perche\u2019 i due gesti che la libreria offre di serie \u2014\r\n      `Ctrl`+clic per aggiungere, `Shift`+trascina per il rettangolo \u2014 non si vedono: senza un\r\n      interruttore, su un flow grande si finisce a spostare un elemento alla volta. Accesa, il\r\n      trascinamento sul canvas vuoto **seleziona** e la vista si sposta col tasto centrale.\r\n    -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"fb-btn fb-viewport__select\"\r\n      [class.fb-viewport__select--on]=\"isSelecting()\"\r\n      [attr.aria-pressed]=\"isSelecting()\"\r\n      [title]=\"\r\n        isSelecting()\r\n          ? 'Modalita\u2019 selezione attiva: trascina sul canvas per selezionare piu\u2019 elementi. La vista si sposta col tasto centrale del mouse'\r\n          : 'Attiva la selezione a rettangolo: trascinando sul canvas selezioni piu\u2019 elementi invece di spostare la vista (Shift+trascina fa lo stesso, sempre)'\r\n      \"\r\n      (click)=\"toggleSelectionMode()\"\r\n    >\r\n      <span class=\"fb-viewport__icon\" aria-hidden=\"true\">\u25A4</span>\r\n      Seleziona\r\n    </button>\r\n    <!--\r\n      Sempre nel DOM, nascosto con una classe e non con `@if`: dentro una proiezione di contenuto\r\n      un blocco di controllo e' una complicazione gratuita, e `visibility: hidden` lo toglie\r\n      anche dall'ordine di tabulazione. Il costo e' un bottone in piu' nel DOM, non un rischio.\r\n    -->\r\n    <button\r\n      type=\"button\"\r\n      class=\"fb-btn fb-viewport__fit\"\r\n      [class.fb-viewport__fit--hidden]=\"!hasMovedViewport()\"\r\n      title=\"Rimetti il flow in vista. Su un flow molto grande inquadra l\u2019inizio, perche\u2019 l\u2019intero non sarebbe leggibile\"\r\n      (click)=\"resetViewport()\"\r\n    >\r\n      <span class=\"fb-viewport__icon\" aria-hidden=\"true\">\u2922</span>\r\n      Inquadra\r\n    </button>\r\n  </div>\r\n\r\n  @if (selectionCount() > 1) {\r\n    <!--\r\n      Il dato che rende utile la selezione: che si spostano **insieme**. Senza dirlo, dopo aver\r\n      selezionato cinque elementi si continua a trascinarne uno per volta.\r\n    -->\r\n    <p class=\"fb-select-hint\" role=\"status\">\r\n      {{ selectionCount() }} elementi selezionati: trascinane uno per spostarli tutti \u00B7 Ctrl+clic\r\n      aggiunge o toglie \u00B7 Canc li elimina\r\n    </p>\r\n  } @else if (isSelecting()) {\r\n    <p class=\"fb-select-hint\" role=\"status\">\r\n      Trascina sul canvas per selezionare \u00B7 la vista si sposta col tasto centrale\r\n    </p>\r\n  }\r\n\r\n  @if (insertionEdgeId()) {\r\n    <!-- Il rilascio su un arco non e' un gesto che si indovina: mentre e' possibile, si dice. -->\r\n    <p class=\"fb-insert-hint\" role=\"status\">Rilascia qui per inserire l\u2019elemento in questo percorso</p>\r\n  }\r\n\r\n  <f-minimap [fMinSize]=\"1200\" class=\"fb-minimap\" />\r\n</f-flow>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:var(--fb-canvas-bg, #f4f5f7)}f-flow{display:block;width:100%;height:100%}.fb-minimap{position:absolute;right:14px;bottom:14px;width:150px;height:300px;max-height:40%;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));overflow:hidden}.fb-viewport{position:absolute;right:14px;bottom:322px;z-index:1;display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:200px}.fb-viewport__btn,.fb-viewport__level,.fb-viewport__fit{border-radius:var(--fb-radius-xs, 6px);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));font-size:11px}.fb-viewport__btn{width:24px;padding:2px 0;font-size:14px;line-height:1}.fb-viewport__level{min-width:52px;font-variant-numeric:tabular-nums}.fb-viewport__fit--hidden{opacity:0;visibility:hidden}.fb-viewport__fit{transition:opacity .15s ease,visibility .15s ease}.fb-viewport__icon{font-size:13px;line-height:1;color:var(--fb-text-muted, #667085)}.fb-insert-hint{position:absolute;bottom:18px;left:50%;transform:translate(-50%);z-index:1;margin:0;padding:6px 12px;border-radius:999px;background:var(--fb-accent, #2f6feb);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));color:#fff;font-size:11px;font-weight:600;pointer-events:none}.fb-select-hint{position:absolute;bottom:18px;left:50%;transform:translate(-50%);z-index:1;margin:0;padding:6px 12px;border-radius:999px;border:1px solid var(--fb-border, #e2e5eb);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));color:var(--fb-text-muted, #667085);font-size:11px;font-weight:600;pointer-events:none}.fb-viewport__select{border-radius:var(--fb-radius-xs, 6px);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));font-size:11px}.fb-viewport__select--on{border-color:var(--fb-accent, #2f6feb);background:var(--fb-accent, #2f6feb);color:#fff}.fb-node{position:absolute;display:flex;flex-direction:column;box-sizing:border-box;width:240px;padding:0;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-lg, 12px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));font:inherit;cursor:grab;-webkit-user-select:none;user-select:none;transition:box-shadow .12s ease,border-color .12s ease}.fb-node--outlets-3{width:304px}.fb-node--outlets-4{width:380px}.fb-node--outlets-5{width:456px}.fb-node--outlets-6{width:520px}.fb-node:hover{box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%))}.fb-node--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:0 0 0 3px color-mix(in srgb,var(--fb-accent, #4f6ef7) 22%,transparent)}.fb-node--unreachable{border-style:dashed;opacity:.8}.fb-node--error{border-color:var(--fb-error, #c9372c)}.fb-node--warning{border-color:var(--fb-warning, #b7791f)}.fb-node__head{display:flex;align-items:center;gap:8px;padding:10px 10px 6px 12px}.fb-node__icon{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:var(--fb-radius-sm, 8px);background:var(--fb-node-accent, #667085);color:#fff;font-size:14px;line-height:1}.cat-start{--fb-node-accent: #22a06b}.cat-screen{--fb-node-accent: #3b82f6}.cat-logic{--fb-node-accent: #8b5cf6}.cat-data{--fb-node-accent: #06b6d4}.cat-action{--fb-node-accent: #f59e0b}.cat-flow{--fb-node-accent: #14b8a6}.cat-other{--fb-node-accent: #667085}.fb-node__text{flex:1;min-width:0}.fb-node__title{display:block;font-size:13px;font-weight:600;line-height:17px;color:var(--fb-text, #1a1c23);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub{display:block;margin-top:1px;font-size:11px;line-height:14px;color:var(--fb-text-muted, #6b7086);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub-dot{margin:0 4px;color:var(--fb-text-subtle, #98a2b3)}.fb-node__auto{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--fb-accent, #4f6ef7);cursor:help}.fb-node__edit{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:12px;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease}.fb-node:hover .fb-node__edit,.fb-node--selected .fb-node__edit,.fb-node__edit:focus-visible{opacity:1}.fb-node__edit:hover{background:var(--fb-surface-alt, #f7f8fa);color:var(--fb-text, #1a1c23)}.fb-node__duplicate,.fb-node__remove{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:15px;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease,color .12s ease}.fb-node--selected .fb-node__duplicate,.fb-node--selected .fb-node__remove,.fb-node__duplicate:focus-visible,.fb-node__remove:focus-visible{opacity:1}.fb-node__remove:hover{background:color-mix(in srgb,var(--fb-error, #c9372c) 12%,transparent);color:var(--fb-error, #c9372c)}.fb-node__duplicate:hover{background:color-mix(in srgb,var(--fb-accent, #3b6ef2) 12%,transparent);color:var(--fb-accent, #3b6ef2)}.fb-node__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:14px;padding:0 12px 6px}.fb-node__name{flex:0 1 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--fb-text-subtle, #98a2b3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-badge{padding:1px 6px;border-radius:10px;background:var(--fb-badge-bg, #eef0f4);font-size:10px;font-weight:600;color:var(--fb-text-muted, #6b7086);white-space:nowrap;cursor:help}.fb-badge--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 14%,transparent);color:var(--fb-error, #c9372c)}.fb-badge--warning{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-badge--info{background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 12%,transparent);color:var(--fb-accent, #4f6ef7)}.fb-badge--unreachable,.fb-badge--dangling{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-node__outlets{display:flex;align-items:flex-end;justify-content:space-evenly;gap:4px;padding:0 8px 4px}.fb-node__outlets--labelled{padding-top:5px;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-outlet{display:flex;flex:1 1 0;flex-direction:column;align-items:center;gap:2px;min-width:0}.fb-outlet__label{max-width:100%;font-size:10px;line-height:13px;color:var(--fb-text-muted, #6b7086);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-connector{box-sizing:border-box;width:12px;height:12px;flex:0 0 auto;border:2px solid var(--fb-surface, #fff);border-radius:50%;background:var(--fb-connector, #98a2b3);cursor:crosshair;transition:transform .12s ease,box-shadow .12s ease}f-flow .fb-connector--out{position:relative;inset:auto;margin-bottom:-12px}.fb-connector--out:hover{transform:scale(1.2)}f-flow .fb-connector--in{position:absolute;inset:-2px auto auto 50%;width:24px;height:4px;border:0;border-radius:2px;transform:translate(-50%);background:var(--fb-border-strong, #cfd4de)}.fb-connector--out{--ff-connector-connected-color: var(--fb-connector, #98a2b3)}.fb-connector--Next,.fb-connector--Start,.fb-connector--LoopNext{--fb-connector: var(--fb-edge-next, #98a2b3)}.fb-connector--Rule,.fb-connector--WaitEvent{--fb-connector: var(--fb-edge-rule, #8b5cf6)}.fb-connector--Default,.fb-connector--LoopEnd{--fb-connector: var(--fb-edge-default, #06b6d4)}.fb-connector--Fault{--fb-connector: var(--fb-edge-fault, #dc2626)}.fb-connector--Timeout,.fb-connector--ScheduledPath{--fb-connector: var(--fb-edge-timeout, #f59e0b)}.fb-connector.f-connector-connectable{box-shadow:0 0 0 4px color-mix(in srgb,var(--fb-accent, #4f6ef7) 28%,transparent)}.fb-group{position:absolute;box-sizing:border-box;border:1px solid var(--fb-group-border, #d6dae1);border-radius:var(--fb-radius, 10px);background:var(--fb-group-fill, rgb(148 163 184 / 10%));pointer-events:none;overflow:hidden}.fb-group--selected{border-color:var(--fb-accent, #2f6feb);box-shadow:0 0 0 2px color-mix(in srgb,var(--fb-accent, #2f6feb) 25%,transparent)}.fb-group__bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 6px;border-bottom:1px solid var(--fb-group-border, #d6dae1);background:var(--fb-group-bar, rgb(148 163 184 / 22%));color:var(--fb-text, #1d2939);font-size:12px;font-weight:600;pointer-events:auto;cursor:move;-webkit-user-select:none;user-select:none}.fb-fold{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;width:260px;min-height:64px;padding:6px 8px;border:1px solid var(--fb-group-border, #d6dae1);border-left:4px solid var(--fb-group-border, #d6dae1);border-radius:var(--fb-radius-lg, 12px);background:var(--fb-group-bar, rgb(148 163 184 / 22%));box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));color:var(--fb-text, #1d2939);font:inherit;font-size:12px;cursor:grab;-webkit-user-select:none;user-select:none}.fb-fold:hover{box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%))}.fb-fold--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:0 0 0 3px color-mix(in srgb,var(--fb-accent, #4f6ef7) 22%,transparent)}.fb-fold--error{border-color:var(--fb-error, #c9372c)}.fb-fold--warning{border-color:var(--fb-warning, #b7791f)}.fb-fold__head{display:flex;align-items:center;gap:6px}.fb-fold__title{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600}.fb-fold__open,.fb-fold__remove{flex:none;width:18px;height:18px;padding:0;border:none;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:inherit;font:inherit;font-size:12px;line-height:1;cursor:pointer}.fb-fold__remove{font-size:14px}.fb-fold__open:hover,.fb-fold__remove:hover{background:#10182814}.fb-fold__meta{display:flex;align-items:center;gap:6px;margin-top:2px;color:var(--fb-text-muted, #667085);font-size:11px}.fb-fold__count{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fb-fold__outlets{display:flex;justify-content:center;margin-top:4px}.fb-group__fold,.fb-group__remove{flex:none;width:18px;height:18px;padding:0;border:none;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:inherit;font:inherit;font-size:12px;line-height:1;cursor:pointer}.fb-group__fold:hover,.fb-group__remove:hover{background:#10182814}.fb-group__remove{margin-left:auto;font-size:14px}.fb-group__title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fb-group__count{flex:none;padding:0 5px;border-radius:8px;background:#10182814;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums}.fb-group__stale{flex:none;padding:0 5px;border-radius:8px;background:color-mix(in srgb,var(--fb-warning, #b7791f) 14%,transparent);color:var(--fb-warning, #b7791f);font-size:10px;font-weight:600}.fb-group__note{margin:6px 8px 0;color:var(--fb-text-muted, #667085);font-size:11px;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.fb-group__resize{position:absolute;right:0;bottom:0;width:14px;height:14px;border-right:2px solid var(--fb-group-border, #d6dae1);border-bottom:2px solid var(--fb-group-border, #d6dae1);border-bottom-right-radius:var(--fb-radius, 10px);pointer-events:auto;cursor:nwse-resize}.fb-group--giallo{--fb-group-border: #e0c26a;--fb-group-fill: rgb(234 179 8 / 10%);--fb-group-bar: rgb(234 179 8 / 24%)}.fb-group--verde{--fb-group-border: #86c79b;--fb-group-fill: rgb(34 160 89 / 10%);--fb-group-bar: rgb(34 160 89 / 22%)}.fb-group--blu{--fb-group-border: #93b4ea;--fb-group-fill: rgb(47 111 235 / 9%);--fb-group-bar: rgb(47 111 235 / 20%)}.fb-group--viola{--fb-group-border: #bda6e6;--fb-group-fill: rgb(139 92 246 / 10%);--fb-group-bar: rgb(139 92 246 / 22%)}.fb-group--rosso{--fb-group-border: #e6a3a3;--fb-group-fill: rgb(214 69 69 / 9%);--fb-group-bar: rgb(214 69 69 / 20%)}.fb-group--grigio,.fb-group--neutro{--fb-group-border: #d6dae1;--fb-group-fill: rgb(148 163 184 / 10%);--fb-group-bar: rgb(148 163 184 / 22%)}\n"] }]
         }], propDecorators: { selectedName: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedName", required: false }] }], selectedGroupName: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedGroupName", required: false }] }], selectedNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNames", required: false }] }], outline: [{ type: i0.Input, args: [{ isSignal: true, alias: "outline", required: false }] }], isEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditable", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], nodeOpened: [{ type: i0.Output, args: ["nodeOpened"] }], nodeRemoveRequested: [{ type: i0.Output, args: ["nodeRemoveRequested"] }], nodeDuplicateRequested: [{ type: i0.Output, args: ["nodeDuplicateRequested"] }], groupSelected: [{ type: i0.Output, args: ["groupSelected"] }], groupRemoveRequested: [{ type: i0.Output, args: ["groupRemoveRequested"] }], elementDropped: [{ type: i0.Output, args: ["elementDropped"] }], canvas: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FCanvasComponent), { isSignal: true }] }] } });
 
 /**
@@ -8515,7 +8818,15 @@ class ValueEditorComponent {
         }
         return String(raw);
     }, ...(ngDevMode ? [{ debugName: "literalText" }] : []));
-    booleanValue = computed(() => this.value()?.booleanValue === true, ...(ngDevMode ? [{ debugName: "booleanValue" }] : []));
+    /**
+     * Il valore booleano come testo per il `<select>` a tre stati: `''` = nessun valore, altrimenti
+     * `'true'` / `'false'`. `isValued` e non `=== true`: `booleanValue: false` **e'** un valore, e
+     * confonderlo con l'assenza e' esattamente il difetto che il tri-stato risolve.
+     */
+    booleanText = computed(() => {
+        const value = this.value()?.booleanValue;
+        return isValued(value) ? String(value) : '';
+    }, ...(ngDevMode ? [{ debugName: "booleanText" }] : []));
     /** Il fuso dichiarato nel valore data: `Z`, un offset, oppure niente = ora locale (§4.2). */
     dateIsUtc = computed(() => ValueEditorComponent.hasZone(this.value()?.dateValue), ...(ngDevMode ? [{ debugName: "dateIsUtc" }] : []));
     static ZONE_PATTERN = /(Z|[+-]\d{2}:?\d{2})$/;
@@ -8550,7 +8861,13 @@ class ValueEditorComponent {
                 this.emit({ elementReference: '' });
                 break;
             case 'literal':
-                this.emit(this.dataType() === 'Boolean' ? { booleanValue: false } : { [this.literalField()]: '' });
+                /**
+                 * Su un `Boolean` non si scrive niente: `false` sarebbe un valore che l'utente non ha
+                 * scelto — sceglierlo e' il gesto successivo, sul tri-stato. Con il modo già dedotto a
+                 * `literal` quando il tipo e' noto, questo bottone serve a **tornare** al letterale da un
+                 * riferimento o da una formula, e allora deve lasciare il campo da compilare, non compilarlo.
+                 */
+                this.emit(this.dataType() === 'Boolean' ? undefined : { [this.literalField()]: '' });
                 break;
             case 'formula':
                 // L'unico caso con due campi: espressione + tipo atteso del risultato.
@@ -8613,8 +8930,9 @@ class ValueEditorComponent {
     onEnumChange(name) {
         this.emit(name?.trim() ? { enumValue: name.trim() } : undefined);
     }
-    onBooleanChange(checked) {
-        this.emit({ booleanValue: checked });
+    /** `''` toglie il campo: «non impostato» e' l'assenza, non un terzo valore da scrivere (§2). */
+    onBooleanTextChange(raw) {
+        this.emit(raw === '' ? undefined : { booleanValue: raw === 'true' });
     }
     withDateZone(local, utc = this.dateIsUtc()) {
         return utc ? `${ValueEditorComponent.stripZone(local)}Z` : ValueEditorComponent.stripZone(local);
@@ -8680,7 +8998,7 @@ class ValueEditorComponent {
     }
     dataTypeOptions = computed(() => this.dictionaries.dataTypes(), ...(ngDevMode ? [{ debugName: "dataTypeOptions" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: ValueEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: ValueEditorComponent, isStandalone: true, selector: "fb-value-editor", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: true, isRequired: false, transformFunction: null }, objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: false, transformFunction: null }, isCollection: { classPropertyName: "isCollection", publicName: "isCollection", isSignal: true, isRequired: false, transformFunction: null }, valueSet: { classPropertyName: "valueSet", publicName: "valueSet", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, allowFormula: { classPropertyName: "allowFormula", publicName: "allowFormula", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"fb-value\">\r\n  <div class=\"fb-value__modes\" role=\"group\" [attr.aria-label]=\"label() + ': modalita\u2019'\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fb-value__mode\"\r\n      [class.fb-value__mode--active]=\"mode() === 'reference'\"\r\n      [disabled]=\"disabled()\"\r\n      title=\"Riferimento a una risorsa o all\u2019output di un elemento\"\r\n      (click)=\"setMode('reference')\"\r\n    >\r\n      Riferimento\r\n    </button>\r\n    @if (literalAllowed()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-value__mode\"\r\n        [class.fb-value__mode--active]=\"mode() === 'literal'\"\r\n        [disabled]=\"disabled()\"\r\n        title=\"Valore letterale del tipo della destinazione\"\r\n        (click)=\"setMode('literal')\"\r\n      >\r\n        Valore\r\n      </button>\r\n    }\r\n    @if (allowFormula()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-value__mode\"\r\n        [class.fb-value__mode--active]=\"mode() === 'formula'\"\r\n        [disabled]=\"disabled()\"\r\n        title=\"Espressione calcolata dal motore di regole\"\r\n        (click)=\"setMode('formula')\"\r\n      >\r\n        Formula\r\n      </button>\r\n    }\r\n    @if (globalConstants().length) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-value__mode\"\r\n        [class.fb-value__mode--active]=\"mode() === 'globalConstant'\"\r\n        [disabled]=\"disabled()\"\r\n        title=\"Costante globale\"\r\n        (click)=\"setMode('globalConstant')\"\r\n      >\r\n        Costante globale\r\n      </button>\r\n    }\r\n    @if (mode() !== 'empty') {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-value__mode fb-value__mode--clear\"\r\n        [disabled]=\"disabled()\"\r\n        title=\"Nessun valore\"\r\n        (click)=\"setMode('empty')\"\r\n      >\r\n        \u00D7\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  @if (isAmbiguous()) {\r\n    <!-- Piu' campi di valore insieme: il comportamento a runtime dipende dall'ordine di lettura. -->\r\n    <p class=\"fb-callout fb-callout--warn\">\r\n      Questo valore ha {{ filledFieldCount() }} campi valorizzati insieme: a runtime conta l\u2019ordine di lettura.\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"normalize()\">\r\n        Tieni solo \u00AB{{ mode() === 'formula' ? 'formula' : mode() === 'literal' ? 'valore' : 'riferimento' }}\u00BB\r\n      </button>\r\n    </p>\r\n  }\r\n\r\n  @switch (mode()) {\r\n    @case ('reference') {\r\n      <fb-reference-picker\r\n        [value]=\"value()?.elementReference\"\r\n        [label]=\"label()\"\r\n        [dataType]=\"dataType()\"\r\n        [isCollection]=\"isCollection()\"\r\n        [objectType]=\"objectType()\"\r\n        [disabled]=\"disabled()\"\r\n        (valueChange)=\"onReferenceChange($event)\"\r\n      />\r\n      @if (isStructureTarget()) {\r\n        <p class=\"fb-field__hint\">\r\n          Un\u2019istanza di classe si passa per riferimento: non esiste un valore letterale con cui scriverla.\r\n        </p>\r\n      }\r\n    }\r\n\r\n    @case ('globalConstant') {\r\n      <select\r\n        class=\"fb-select\"\r\n        [disabled]=\"disabled()\"\r\n        [fbValue]=\"value()?.elementReference || ''\"\r\n        (change)=\"onGlobalConstantChange($any($event.target).value)\"\r\n      >\r\n        @for (constant of globalConstants(); track constant) {\r\n          <option [value]=\"constant\">{{ constant }}</option>\r\n        }\r\n      </select>\r\n    }\r\n\r\n    @case ('literal') {\r\n      @if (dataType() === 'Boolean') {\r\n        <label class=\"fb-check\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [checked]=\"booleanValue()\"\r\n            [disabled]=\"disabled()\"\r\n            (change)=\"onBooleanChange($any($event.target).checked)\"\r\n          />\r\n          {{ booleanValue() ? 'vero' : 'falso' }}\r\n        </label>\r\n      } @else if (dataType() === 'Enum') {\r\n        <!--\r\n          Un enum si scrive **per nome** su un insieme chiuso: i nomi ammessi sono quelli del tipo\r\n          (\u00A74.2, \u00A74.6), e farli digitare e' il modo piu' facile di scriverne uno che il runtime non\r\n          riconosce. Senza `objectType` \u2014 o senza la primitiva \u2014 il picker resta una casella di\r\n          testo, che e' l'unica cosa onesta quando i valori non si sanno.\r\n        -->\r\n        <fb-enum-value-picker\r\n          [value]=\"value()?.enumValue\"\r\n          [enumType]=\"objectType()\"\r\n          [label]=\"label()\"\r\n          [disabled]=\"disabled()\"\r\n          placeholder=\"Nome del valore di enum\"\r\n          (valueChange)=\"onEnumChange($event)\"\r\n        />\r\n      } @else if (hasValueSet()) {\r\n        <!--\r\n          Campo a scelta chiusa (\u00A74.4): i valori ammessi sono della **colonna** e si chiedono con\r\n          `listFieldValues`, non si deducono dal tipo. Farli digitare su un insieme di quattro e' il\r\n          modo piu' facile di scrivere un valore che nessun record ha \u2014 e il filtro non troverebbe\r\n          niente senza nessun errore da nessuna parte.\r\n        -->\r\n        <fb-field-value-picker\r\n          [value]=\"literalText()\"\r\n          [valueSet]=\"valueSet()\"\r\n          [label]=\"label()\"\r\n          [disabled]=\"disabled()\"\r\n          (valueChange)=\"onClosedValueChange($event)\"\r\n        />\r\n      } @else {\r\n        <input\r\n          class=\"fb-input\"\r\n          [type]=\"literalInputType()\"\r\n          [value]=\"literalText()\"\r\n          [disabled]=\"disabled()\"\r\n          [attr.aria-label]=\"label()\"\r\n          (input)=\"onLiteralChange($any($event.target).value)\"\r\n        />\r\n        @if (numericHint()) {\r\n          <p class=\"fb-field__hint\">{{ numericHint() }}</p>\r\n        }\r\n        @if (dataType() === 'Date') {\r\n          <!--\r\n            Il fuso e' una scelta, non un dettaglio: `09:00Z` e `09:00` sono due istanti\r\n            diversi, e il motore converte in UTC prima di ogni confronto (\u00A74.2).\r\n          -->\r\n          <div class=\"fb-value__modes\" role=\"group\" aria-label=\"Fuso del valore data\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-value__mode\"\r\n              [class.fb-value__mode--active]=\"!dateIsUtc()\"\r\n              [disabled]=\"disabled()\"\r\n              title=\"Interpretato nel fuso dell\u2019applicazione\"\r\n              (click)=\"setDateZone(false)\"\r\n            >\r\n              Ora locale\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-value__mode\"\r\n              [class.fb-value__mode--active]=\"dateIsUtc()\"\r\n              [disabled]=\"disabled()\"\r\n              title=\"Scrive il suffisso Z: l\u2019orario e\u2019 in UTC\"\r\n              (click)=\"setDateZone(true)\"\r\n            >\r\n              UTC (Z)\r\n            </button>\r\n          </div>\r\n          <p class=\"fb-field__hint\">\r\n            Data e ora insieme.\r\n            {{\r\n              dateIsUtc()\r\n                ? 'Con \u00ABUTC\u00BB l\u2019orario e\u2019 assoluto.'\r\n                : 'Senza fuso l\u2019orario e\u2019 interpretato nel fuso dell\u2019applicazione, non in UTC.'\r\n            }}\r\n            Cambiare fuso riscrive l\u2019orario, non lo converte.\r\n          </p>\r\n        }\r\n      }\r\n    }\r\n\r\n    @case ('formula') {\r\n      <!--\r\n        Il tipo atteso e' quello **dichiarato sulla formula** (`formulaDataType`), non quello del\r\n        campo: e' cio' che il documento porta, ed e' su quello che il motore va misurato (\u00A76.3).\r\n      -->\r\n      <fb-formula-editor\r\n        [expression]=\"value()?.formulaExpression || ''\"\r\n        usage=\"Value\"\r\n        [expectedDataType]=\"$any(value()?.formulaDataType) || dataType()\"\r\n        [disabled]=\"disabled()\"\r\n        placeholder=\"Importo * 1.22\"\r\n        [ariaLabel]=\"label() + ': espressione'\"\r\n        (expressionChange)=\"onFormulaChange($event)\"\r\n      />\r\n      <div class=\"fb-field__row\">\r\n        <label class=\"fb-field__hint\">Tipo del risultato</label>\r\n        <select\r\n          class=\"fb-select\"\r\n          [fbValue]=\"value()?.formulaDataType || ''\"\r\n          [disabled]=\"disabled()\"\r\n          (change)=\"onFormulaTypeChange($any($event.target).value)\"\r\n        >\r\n          @for (type of dataTypeOptions(); track type.value) {\r\n            <option [value]=\"type.value\">{{ type.label }}</option>\r\n          }\r\n        </select>\r\n      </div>\r\n      <p class=\"fb-field__hint\">\r\n        L\u2019espressione va al motore di regole: la sintassi delle funzioni e\u2019 del motore.\r\n      </p>\r\n    }\r\n\r\n    @case ('empty') {\r\n      <p class=\"fb-field__hint\">Nessun valore.</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.fb-value{display:flex;flex-direction:column;gap:6px}\n"], dependencies: [{ kind: "component", type: EnumValuePickerComponent, selector: "fb-enum-value-picker", inputs: ["value", "enumType", "label", "placeholder", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: FieldValuePickerComponent, selector: "fb-field-value-picker", inputs: ["value", "valueSet", "label", "placeholder", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: FormulaEditorComponent, selector: "fb-formula-editor", inputs: ["expression", "usage", "expectedDataType", "scale", "placeholder", "ariaLabel", "disabled", "rows", "commitOn"], outputs: ["expressionChange"] }, { kind: "component", type: ReferencePickerComponent, selector: "fb-reference-picker", inputs: ["value", "label", "placeholder", "disabled", "dataType", "isCollection", "objectType", "writableOnly", "elementsOnly", "extraReferences"], outputs: ["valueChange"] }, { kind: "directive", type: SelectValueDirective, selector: "select[fbValue]", inputs: ["fbValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: ValueEditorComponent, isStandalone: true, selector: "fb-value-editor", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: true, isRequired: false, transformFunction: null }, objectType: { classPropertyName: "objectType", publicName: "objectType", isSignal: true, isRequired: false, transformFunction: null }, isCollection: { classPropertyName: "isCollection", publicName: "isCollection", isSignal: true, isRequired: false, transformFunction: null }, valueSet: { classPropertyName: "valueSet", publicName: "valueSet", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, allowFormula: { classPropertyName: "allowFormula", publicName: "allowFormula", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"fb-value\">\r\n  <div class=\"fb-value__modes\" role=\"group\" [attr.aria-label]=\"label() + ': modalita\u2019'\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fb-value__mode\"\r\n      [class.fb-value__mode--active]=\"mode() === 'reference'\"\r\n      [disabled]=\"disabled()\"\r\n      title=\"Riferimento a una risorsa o all\u2019output di un elemento\"\r\n      (click)=\"setMode('reference')\"\r\n    >\r\n      Riferimento\r\n    </button>\r\n    @if (literalAllowed()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-value__mode\"\r\n        [class.fb-value__mode--active]=\"mode() === 'literal'\"\r\n        [disabled]=\"disabled()\"\r\n        title=\"Valore letterale del tipo della destinazione\"\r\n        (click)=\"setMode('literal')\"\r\n      >\r\n        Valore\r\n      </button>\r\n    }\r\n    @if (allowFormula()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-value__mode\"\r\n        [class.fb-value__mode--active]=\"mode() === 'formula'\"\r\n        [disabled]=\"disabled()\"\r\n        title=\"Espressione calcolata dal motore di regole\"\r\n        (click)=\"setMode('formula')\"\r\n      >\r\n        Formula\r\n      </button>\r\n    }\r\n    @if (globalConstants().length) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-value__mode\"\r\n        [class.fb-value__mode--active]=\"mode() === 'globalConstant'\"\r\n        [disabled]=\"disabled()\"\r\n        title=\"Costante globale\"\r\n        (click)=\"setMode('globalConstant')\"\r\n      >\r\n        Costante globale\r\n      </button>\r\n    }\r\n    @if (mode() !== 'empty') {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-value__mode fb-value__mode--clear\"\r\n        [disabled]=\"disabled()\"\r\n        title=\"Nessun valore\"\r\n        (click)=\"setMode('empty')\"\r\n      >\r\n        \u00D7\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  @if (isAmbiguous()) {\r\n    <!-- Piu' campi di valore insieme: il comportamento a runtime dipende dall'ordine di lettura. -->\r\n    <p class=\"fb-callout fb-callout--warn\">\r\n      Questo valore ha {{ filledFieldCount() }} campi valorizzati insieme: a runtime conta l\u2019ordine di lettura.\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"normalize()\">\r\n        Tieni solo \u00AB{{ mode() === 'formula' ? 'formula' : mode() === 'literal' ? 'valore' : 'riferimento' }}\u00BB\r\n      </button>\r\n    </p>\r\n  }\r\n\r\n  @switch (mode()) {\r\n    @case ('reference') {\r\n      <fb-reference-picker\r\n        [value]=\"value()?.elementReference\"\r\n        [label]=\"label()\"\r\n        [dataType]=\"dataType()\"\r\n        [isCollection]=\"isCollection()\"\r\n        [objectType]=\"objectType()\"\r\n        [disabled]=\"disabled()\"\r\n        (valueChange)=\"onReferenceChange($event)\"\r\n      />\r\n      @if (isStructureTarget()) {\r\n        <p class=\"fb-field__hint\">\r\n          Un\u2019istanza di classe si passa per riferimento: non esiste un valore letterale con cui scriverla.\r\n        </p>\r\n      }\r\n    }\r\n\r\n    @case ('globalConstant') {\r\n      <select\r\n        class=\"fb-select\"\r\n        [disabled]=\"disabled()\"\r\n        [fbValue]=\"value()?.elementReference || ''\"\r\n        (change)=\"onGlobalConstantChange($any($event.target).value)\"\r\n      >\r\n        @for (constant of globalConstants(); track constant) {\r\n          <option [value]=\"constant\">{{ constant }}</option>\r\n        }\r\n      </select>\r\n    }\r\n\r\n    @case ('literal') {\r\n      @if (dataType() === 'Boolean') {\r\n        <!--\r\n          Tre stati, non due: **assente**, `false` e `true`. Una casella di spunta ne rappresenta\r\n          due, e quella non spuntata finiva per dire \u00ABfalso\u00BB su un valore che nel documento non\r\n          c'era \u2014 chi non la toccava leggeva una scelta che nessuno aveva fatto e che al backend non\r\n          arrivava. `false` e' un valore e si scrive; \u00ABnon impostato\u00BB e' l'assenza del campo (\u00A72,\r\n          \u00A74.2), ed e' l'unica cosa che una spunta non sa dire. Stesso controllo del form di\r\n          \u00ABEsegui\u00BB, dove il problema era gi\u00E0 stato risolto cos\u00EC.\r\n        -->\r\n        <select\r\n          class=\"fb-select\"\r\n          [disabled]=\"disabled()\"\r\n          [fbValue]=\"booleanText()\"\r\n          (change)=\"onBooleanTextChange($any($event.target).value)\"\r\n        >\r\n          <option value=\"\">non impostato</option>\r\n          <option value=\"true\">vero</option>\r\n          <option value=\"false\">falso</option>\r\n        </select>\r\n        @if (!booleanText()) {\r\n          <p class=\"fb-field__hint\">\r\n            Nessun valore nel documento: \u00ABfalso\u00BB e\u2019 una scelta e va detta, perche\u2019 un campo assente\r\n            non e\u2019 <code>false</code>.\r\n          </p>\r\n        }\r\n      } @else if (dataType() === 'Enum') {\r\n        <!--\r\n          Un enum si scrive **per nome** su un insieme chiuso: i nomi ammessi sono quelli del tipo\r\n          (\u00A74.2, \u00A74.6), e farli digitare e' il modo piu' facile di scriverne uno che il runtime non\r\n          riconosce. Senza `objectType` \u2014 o senza la primitiva \u2014 il picker resta una casella di\r\n          testo, che e' l'unica cosa onesta quando i valori non si sanno.\r\n        -->\r\n        <fb-enum-value-picker\r\n          [value]=\"value()?.enumValue\"\r\n          [enumType]=\"objectType()\"\r\n          [label]=\"label()\"\r\n          [disabled]=\"disabled()\"\r\n          placeholder=\"Nome del valore di enum\"\r\n          (valueChange)=\"onEnumChange($event)\"\r\n        />\r\n      } @else if (hasValueSet()) {\r\n        <!--\r\n          Campo a scelta chiusa (\u00A74.4): i valori ammessi sono della **colonna** e si chiedono con\r\n          `listFieldValues`, non si deducono dal tipo. Farli digitare su un insieme di quattro e' il\r\n          modo piu' facile di scrivere un valore che nessun record ha \u2014 e il filtro non troverebbe\r\n          niente senza nessun errore da nessuna parte.\r\n        -->\r\n        <fb-field-value-picker\r\n          [value]=\"literalText()\"\r\n          [valueSet]=\"valueSet()\"\r\n          [label]=\"label()\"\r\n          [disabled]=\"disabled()\"\r\n          (valueChange)=\"onClosedValueChange($event)\"\r\n        />\r\n      } @else {\r\n        <input\r\n          class=\"fb-input\"\r\n          [type]=\"literalInputType()\"\r\n          [value]=\"literalText()\"\r\n          [disabled]=\"disabled()\"\r\n          [attr.aria-label]=\"label()\"\r\n          (input)=\"onLiteralChange($any($event.target).value)\"\r\n        />\r\n        @if (numericHint()) {\r\n          <p class=\"fb-field__hint\">{{ numericHint() }}</p>\r\n        }\r\n        @if (dataType() === 'Date') {\r\n          <!--\r\n            Il fuso e' una scelta, non un dettaglio: `09:00Z` e `09:00` sono due istanti\r\n            diversi, e il motore converte in UTC prima di ogni confronto (\u00A74.2).\r\n          -->\r\n          <div class=\"fb-value__modes\" role=\"group\" aria-label=\"Fuso del valore data\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-value__mode\"\r\n              [class.fb-value__mode--active]=\"!dateIsUtc()\"\r\n              [disabled]=\"disabled()\"\r\n              title=\"Interpretato nel fuso dell\u2019applicazione\"\r\n              (click)=\"setDateZone(false)\"\r\n            >\r\n              Ora locale\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-value__mode\"\r\n              [class.fb-value__mode--active]=\"dateIsUtc()\"\r\n              [disabled]=\"disabled()\"\r\n              title=\"Scrive il suffisso Z: l\u2019orario e\u2019 in UTC\"\r\n              (click)=\"setDateZone(true)\"\r\n            >\r\n              UTC (Z)\r\n            </button>\r\n          </div>\r\n          <p class=\"fb-field__hint\">\r\n            Data e ora insieme.\r\n            {{\r\n              dateIsUtc()\r\n                ? 'Con \u00ABUTC\u00BB l\u2019orario e\u2019 assoluto.'\r\n                : 'Senza fuso l\u2019orario e\u2019 interpretato nel fuso dell\u2019applicazione, non in UTC.'\r\n            }}\r\n            Cambiare fuso riscrive l\u2019orario, non lo converte.\r\n          </p>\r\n        }\r\n      }\r\n    }\r\n\r\n    @case ('formula') {\r\n      <!--\r\n        Il tipo atteso e' quello **dichiarato sulla formula** (`formulaDataType`), non quello del\r\n        campo: e' cio' che il documento porta, ed e' su quello che il motore va misurato (\u00A76.3).\r\n      -->\r\n      <fb-formula-editor\r\n        [expression]=\"value()?.formulaExpression || ''\"\r\n        usage=\"Value\"\r\n        [expectedDataType]=\"$any(value()?.formulaDataType) || dataType()\"\r\n        [disabled]=\"disabled()\"\r\n        placeholder=\"Importo * 1.22\"\r\n        [ariaLabel]=\"label() + ': espressione'\"\r\n        (expressionChange)=\"onFormulaChange($event)\"\r\n      />\r\n      <div class=\"fb-field__row\">\r\n        <label class=\"fb-field__hint\">Tipo del risultato</label>\r\n        <select\r\n          class=\"fb-select\"\r\n          [fbValue]=\"value()?.formulaDataType || ''\"\r\n          [disabled]=\"disabled()\"\r\n          (change)=\"onFormulaTypeChange($any($event.target).value)\"\r\n        >\r\n          @for (type of dataTypeOptions(); track type.value) {\r\n            <option [value]=\"type.value\">{{ type.label }}</option>\r\n          }\r\n        </select>\r\n      </div>\r\n      <p class=\"fb-field__hint\">\r\n        L\u2019espressione va al motore di regole: la sintassi delle funzioni e\u2019 del motore.\r\n      </p>\r\n    }\r\n\r\n    @case ('empty') {\r\n      <p class=\"fb-field__hint\">Nessun valore.</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.fb-value{display:flex;flex-direction:column;gap:6px}\n"], dependencies: [{ kind: "component", type: EnumValuePickerComponent, selector: "fb-enum-value-picker", inputs: ["value", "enumType", "label", "placeholder", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: FieldValuePickerComponent, selector: "fb-field-value-picker", inputs: ["value", "valueSet", "label", "placeholder", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: FormulaEditorComponent, selector: "fb-formula-editor", inputs: ["expression", "usage", "expectedDataType", "scale", "placeholder", "ariaLabel", "disabled", "rows", "commitOn"], outputs: ["expressionChange"] }, { kind: "component", type: ReferencePickerComponent, selector: "fb-reference-picker", inputs: ["value", "label", "placeholder", "disabled", "dataType", "isCollection", "objectType", "writableOnly", "elementsOnly", "extraReferences"], outputs: ["valueChange"] }, { kind: "directive", type: SelectValueDirective, selector: "select[fbValue]", inputs: ["fbValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: ValueEditorComponent, decorators: [{
             type: Component,
@@ -8690,7 +9008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImpo
                         FormulaEditorComponent,
                         ReferencePickerComponent,
                         SelectValueDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-value\">\r\n  <div class=\"fb-value__modes\" role=\"group\" [attr.aria-label]=\"label() + ': modalita\u2019'\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fb-value__mode\"\r\n      [class.fb-value__mode--active]=\"mode() === 'reference'\"\r\n      [disabled]=\"disabled()\"\r\n      title=\"Riferimento a una risorsa o all\u2019output di un elemento\"\r\n      (click)=\"setMode('reference')\"\r\n    >\r\n      Riferimento\r\n    </button>\r\n    @if (literalAllowed()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-value__mode\"\r\n        [class.fb-value__mode--active]=\"mode() === 'literal'\"\r\n        [disabled]=\"disabled()\"\r\n        title=\"Valore letterale del tipo della destinazione\"\r\n        (click)=\"setMode('literal')\"\r\n      >\r\n        Valore\r\n      </button>\r\n    }\r\n    @if (allowFormula()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-value__mode\"\r\n        [class.fb-value__mode--active]=\"mode() === 'formula'\"\r\n        [disabled]=\"disabled()\"\r\n        title=\"Espressione calcolata dal motore di regole\"\r\n        (click)=\"setMode('formula')\"\r\n      >\r\n        Formula\r\n      </button>\r\n    }\r\n    @if (globalConstants().length) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-value__mode\"\r\n        [class.fb-value__mode--active]=\"mode() === 'globalConstant'\"\r\n        [disabled]=\"disabled()\"\r\n        title=\"Costante globale\"\r\n        (click)=\"setMode('globalConstant')\"\r\n      >\r\n        Costante globale\r\n      </button>\r\n    }\r\n    @if (mode() !== 'empty') {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-value__mode fb-value__mode--clear\"\r\n        [disabled]=\"disabled()\"\r\n        title=\"Nessun valore\"\r\n        (click)=\"setMode('empty')\"\r\n      >\r\n        \u00D7\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  @if (isAmbiguous()) {\r\n    <!-- Piu' campi di valore insieme: il comportamento a runtime dipende dall'ordine di lettura. -->\r\n    <p class=\"fb-callout fb-callout--warn\">\r\n      Questo valore ha {{ filledFieldCount() }} campi valorizzati insieme: a runtime conta l\u2019ordine di lettura.\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"normalize()\">\r\n        Tieni solo \u00AB{{ mode() === 'formula' ? 'formula' : mode() === 'literal' ? 'valore' : 'riferimento' }}\u00BB\r\n      </button>\r\n    </p>\r\n  }\r\n\r\n  @switch (mode()) {\r\n    @case ('reference') {\r\n      <fb-reference-picker\r\n        [value]=\"value()?.elementReference\"\r\n        [label]=\"label()\"\r\n        [dataType]=\"dataType()\"\r\n        [isCollection]=\"isCollection()\"\r\n        [objectType]=\"objectType()\"\r\n        [disabled]=\"disabled()\"\r\n        (valueChange)=\"onReferenceChange($event)\"\r\n      />\r\n      @if (isStructureTarget()) {\r\n        <p class=\"fb-field__hint\">\r\n          Un\u2019istanza di classe si passa per riferimento: non esiste un valore letterale con cui scriverla.\r\n        </p>\r\n      }\r\n    }\r\n\r\n    @case ('globalConstant') {\r\n      <select\r\n        class=\"fb-select\"\r\n        [disabled]=\"disabled()\"\r\n        [fbValue]=\"value()?.elementReference || ''\"\r\n        (change)=\"onGlobalConstantChange($any($event.target).value)\"\r\n      >\r\n        @for (constant of globalConstants(); track constant) {\r\n          <option [value]=\"constant\">{{ constant }}</option>\r\n        }\r\n      </select>\r\n    }\r\n\r\n    @case ('literal') {\r\n      @if (dataType() === 'Boolean') {\r\n        <label class=\"fb-check\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [checked]=\"booleanValue()\"\r\n            [disabled]=\"disabled()\"\r\n            (change)=\"onBooleanChange($any($event.target).checked)\"\r\n          />\r\n          {{ booleanValue() ? 'vero' : 'falso' }}\r\n        </label>\r\n      } @else if (dataType() === 'Enum') {\r\n        <!--\r\n          Un enum si scrive **per nome** su un insieme chiuso: i nomi ammessi sono quelli del tipo\r\n          (\u00A74.2, \u00A74.6), e farli digitare e' il modo piu' facile di scriverne uno che il runtime non\r\n          riconosce. Senza `objectType` \u2014 o senza la primitiva \u2014 il picker resta una casella di\r\n          testo, che e' l'unica cosa onesta quando i valori non si sanno.\r\n        -->\r\n        <fb-enum-value-picker\r\n          [value]=\"value()?.enumValue\"\r\n          [enumType]=\"objectType()\"\r\n          [label]=\"label()\"\r\n          [disabled]=\"disabled()\"\r\n          placeholder=\"Nome del valore di enum\"\r\n          (valueChange)=\"onEnumChange($event)\"\r\n        />\r\n      } @else if (hasValueSet()) {\r\n        <!--\r\n          Campo a scelta chiusa (\u00A74.4): i valori ammessi sono della **colonna** e si chiedono con\r\n          `listFieldValues`, non si deducono dal tipo. Farli digitare su un insieme di quattro e' il\r\n          modo piu' facile di scrivere un valore che nessun record ha \u2014 e il filtro non troverebbe\r\n          niente senza nessun errore da nessuna parte.\r\n        -->\r\n        <fb-field-value-picker\r\n          [value]=\"literalText()\"\r\n          [valueSet]=\"valueSet()\"\r\n          [label]=\"label()\"\r\n          [disabled]=\"disabled()\"\r\n          (valueChange)=\"onClosedValueChange($event)\"\r\n        />\r\n      } @else {\r\n        <input\r\n          class=\"fb-input\"\r\n          [type]=\"literalInputType()\"\r\n          [value]=\"literalText()\"\r\n          [disabled]=\"disabled()\"\r\n          [attr.aria-label]=\"label()\"\r\n          (input)=\"onLiteralChange($any($event.target).value)\"\r\n        />\r\n        @if (numericHint()) {\r\n          <p class=\"fb-field__hint\">{{ numericHint() }}</p>\r\n        }\r\n        @if (dataType() === 'Date') {\r\n          <!--\r\n            Il fuso e' una scelta, non un dettaglio: `09:00Z` e `09:00` sono due istanti\r\n            diversi, e il motore converte in UTC prima di ogni confronto (\u00A74.2).\r\n          -->\r\n          <div class=\"fb-value__modes\" role=\"group\" aria-label=\"Fuso del valore data\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-value__mode\"\r\n              [class.fb-value__mode--active]=\"!dateIsUtc()\"\r\n              [disabled]=\"disabled()\"\r\n              title=\"Interpretato nel fuso dell\u2019applicazione\"\r\n              (click)=\"setDateZone(false)\"\r\n            >\r\n              Ora locale\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-value__mode\"\r\n              [class.fb-value__mode--active]=\"dateIsUtc()\"\r\n              [disabled]=\"disabled()\"\r\n              title=\"Scrive il suffisso Z: l\u2019orario e\u2019 in UTC\"\r\n              (click)=\"setDateZone(true)\"\r\n            >\r\n              UTC (Z)\r\n            </button>\r\n          </div>\r\n          <p class=\"fb-field__hint\">\r\n            Data e ora insieme.\r\n            {{\r\n              dateIsUtc()\r\n                ? 'Con \u00ABUTC\u00BB l\u2019orario e\u2019 assoluto.'\r\n                : 'Senza fuso l\u2019orario e\u2019 interpretato nel fuso dell\u2019applicazione, non in UTC.'\r\n            }}\r\n            Cambiare fuso riscrive l\u2019orario, non lo converte.\r\n          </p>\r\n        }\r\n      }\r\n    }\r\n\r\n    @case ('formula') {\r\n      <!--\r\n        Il tipo atteso e' quello **dichiarato sulla formula** (`formulaDataType`), non quello del\r\n        campo: e' cio' che il documento porta, ed e' su quello che il motore va misurato (\u00A76.3).\r\n      -->\r\n      <fb-formula-editor\r\n        [expression]=\"value()?.formulaExpression || ''\"\r\n        usage=\"Value\"\r\n        [expectedDataType]=\"$any(value()?.formulaDataType) || dataType()\"\r\n        [disabled]=\"disabled()\"\r\n        placeholder=\"Importo * 1.22\"\r\n        [ariaLabel]=\"label() + ': espressione'\"\r\n        (expressionChange)=\"onFormulaChange($event)\"\r\n      />\r\n      <div class=\"fb-field__row\">\r\n        <label class=\"fb-field__hint\">Tipo del risultato</label>\r\n        <select\r\n          class=\"fb-select\"\r\n          [fbValue]=\"value()?.formulaDataType || ''\"\r\n          [disabled]=\"disabled()\"\r\n          (change)=\"onFormulaTypeChange($any($event.target).value)\"\r\n        >\r\n          @for (type of dataTypeOptions(); track type.value) {\r\n            <option [value]=\"type.value\">{{ type.label }}</option>\r\n          }\r\n        </select>\r\n      </div>\r\n      <p class=\"fb-field__hint\">\r\n        L\u2019espressione va al motore di regole: la sintassi delle funzioni e\u2019 del motore.\r\n      </p>\r\n    }\r\n\r\n    @case ('empty') {\r\n      <p class=\"fb-field__hint\">Nessun valore.</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.fb-value{display:flex;flex-direction:column;gap:6px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-value\">\r\n  <div class=\"fb-value__modes\" role=\"group\" [attr.aria-label]=\"label() + ': modalita\u2019'\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fb-value__mode\"\r\n      [class.fb-value__mode--active]=\"mode() === 'reference'\"\r\n      [disabled]=\"disabled()\"\r\n      title=\"Riferimento a una risorsa o all\u2019output di un elemento\"\r\n      (click)=\"setMode('reference')\"\r\n    >\r\n      Riferimento\r\n    </button>\r\n    @if (literalAllowed()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-value__mode\"\r\n        [class.fb-value__mode--active]=\"mode() === 'literal'\"\r\n        [disabled]=\"disabled()\"\r\n        title=\"Valore letterale del tipo della destinazione\"\r\n        (click)=\"setMode('literal')\"\r\n      >\r\n        Valore\r\n      </button>\r\n    }\r\n    @if (allowFormula()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-value__mode\"\r\n        [class.fb-value__mode--active]=\"mode() === 'formula'\"\r\n        [disabled]=\"disabled()\"\r\n        title=\"Espressione calcolata dal motore di regole\"\r\n        (click)=\"setMode('formula')\"\r\n      >\r\n        Formula\r\n      </button>\r\n    }\r\n    @if (globalConstants().length) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-value__mode\"\r\n        [class.fb-value__mode--active]=\"mode() === 'globalConstant'\"\r\n        [disabled]=\"disabled()\"\r\n        title=\"Costante globale\"\r\n        (click)=\"setMode('globalConstant')\"\r\n      >\r\n        Costante globale\r\n      </button>\r\n    }\r\n    @if (mode() !== 'empty') {\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-value__mode fb-value__mode--clear\"\r\n        [disabled]=\"disabled()\"\r\n        title=\"Nessun valore\"\r\n        (click)=\"setMode('empty')\"\r\n      >\r\n        \u00D7\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  @if (isAmbiguous()) {\r\n    <!-- Piu' campi di valore insieme: il comportamento a runtime dipende dall'ordine di lettura. -->\r\n    <p class=\"fb-callout fb-callout--warn\">\r\n      Questo valore ha {{ filledFieldCount() }} campi valorizzati insieme: a runtime conta l\u2019ordine di lettura.\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"normalize()\">\r\n        Tieni solo \u00AB{{ mode() === 'formula' ? 'formula' : mode() === 'literal' ? 'valore' : 'riferimento' }}\u00BB\r\n      </button>\r\n    </p>\r\n  }\r\n\r\n  @switch (mode()) {\r\n    @case ('reference') {\r\n      <fb-reference-picker\r\n        [value]=\"value()?.elementReference\"\r\n        [label]=\"label()\"\r\n        [dataType]=\"dataType()\"\r\n        [isCollection]=\"isCollection()\"\r\n        [objectType]=\"objectType()\"\r\n        [disabled]=\"disabled()\"\r\n        (valueChange)=\"onReferenceChange($event)\"\r\n      />\r\n      @if (isStructureTarget()) {\r\n        <p class=\"fb-field__hint\">\r\n          Un\u2019istanza di classe si passa per riferimento: non esiste un valore letterale con cui scriverla.\r\n        </p>\r\n      }\r\n    }\r\n\r\n    @case ('globalConstant') {\r\n      <select\r\n        class=\"fb-select\"\r\n        [disabled]=\"disabled()\"\r\n        [fbValue]=\"value()?.elementReference || ''\"\r\n        (change)=\"onGlobalConstantChange($any($event.target).value)\"\r\n      >\r\n        @for (constant of globalConstants(); track constant) {\r\n          <option [value]=\"constant\">{{ constant }}</option>\r\n        }\r\n      </select>\r\n    }\r\n\r\n    @case ('literal') {\r\n      @if (dataType() === 'Boolean') {\r\n        <!--\r\n          Tre stati, non due: **assente**, `false` e `true`. Una casella di spunta ne rappresenta\r\n          due, e quella non spuntata finiva per dire \u00ABfalso\u00BB su un valore che nel documento non\r\n          c'era \u2014 chi non la toccava leggeva una scelta che nessuno aveva fatto e che al backend non\r\n          arrivava. `false` e' un valore e si scrive; \u00ABnon impostato\u00BB e' l'assenza del campo (\u00A72,\r\n          \u00A74.2), ed e' l'unica cosa che una spunta non sa dire. Stesso controllo del form di\r\n          \u00ABEsegui\u00BB, dove il problema era gi\u00E0 stato risolto cos\u00EC.\r\n        -->\r\n        <select\r\n          class=\"fb-select\"\r\n          [disabled]=\"disabled()\"\r\n          [fbValue]=\"booleanText()\"\r\n          (change)=\"onBooleanTextChange($any($event.target).value)\"\r\n        >\r\n          <option value=\"\">non impostato</option>\r\n          <option value=\"true\">vero</option>\r\n          <option value=\"false\">falso</option>\r\n        </select>\r\n        @if (!booleanText()) {\r\n          <p class=\"fb-field__hint\">\r\n            Nessun valore nel documento: \u00ABfalso\u00BB e\u2019 una scelta e va detta, perche\u2019 un campo assente\r\n            non e\u2019 <code>false</code>.\r\n          </p>\r\n        }\r\n      } @else if (dataType() === 'Enum') {\r\n        <!--\r\n          Un enum si scrive **per nome** su un insieme chiuso: i nomi ammessi sono quelli del tipo\r\n          (\u00A74.2, \u00A74.6), e farli digitare e' il modo piu' facile di scriverne uno che il runtime non\r\n          riconosce. Senza `objectType` \u2014 o senza la primitiva \u2014 il picker resta una casella di\r\n          testo, che e' l'unica cosa onesta quando i valori non si sanno.\r\n        -->\r\n        <fb-enum-value-picker\r\n          [value]=\"value()?.enumValue\"\r\n          [enumType]=\"objectType()\"\r\n          [label]=\"label()\"\r\n          [disabled]=\"disabled()\"\r\n          placeholder=\"Nome del valore di enum\"\r\n          (valueChange)=\"onEnumChange($event)\"\r\n        />\r\n      } @else if (hasValueSet()) {\r\n        <!--\r\n          Campo a scelta chiusa (\u00A74.4): i valori ammessi sono della **colonna** e si chiedono con\r\n          `listFieldValues`, non si deducono dal tipo. Farli digitare su un insieme di quattro e' il\r\n          modo piu' facile di scrivere un valore che nessun record ha \u2014 e il filtro non troverebbe\r\n          niente senza nessun errore da nessuna parte.\r\n        -->\r\n        <fb-field-value-picker\r\n          [value]=\"literalText()\"\r\n          [valueSet]=\"valueSet()\"\r\n          [label]=\"label()\"\r\n          [disabled]=\"disabled()\"\r\n          (valueChange)=\"onClosedValueChange($event)\"\r\n        />\r\n      } @else {\r\n        <input\r\n          class=\"fb-input\"\r\n          [type]=\"literalInputType()\"\r\n          [value]=\"literalText()\"\r\n          [disabled]=\"disabled()\"\r\n          [attr.aria-label]=\"label()\"\r\n          (input)=\"onLiteralChange($any($event.target).value)\"\r\n        />\r\n        @if (numericHint()) {\r\n          <p class=\"fb-field__hint\">{{ numericHint() }}</p>\r\n        }\r\n        @if (dataType() === 'Date') {\r\n          <!--\r\n            Il fuso e' una scelta, non un dettaglio: `09:00Z` e `09:00` sono due istanti\r\n            diversi, e il motore converte in UTC prima di ogni confronto (\u00A74.2).\r\n          -->\r\n          <div class=\"fb-value__modes\" role=\"group\" aria-label=\"Fuso del valore data\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-value__mode\"\r\n              [class.fb-value__mode--active]=\"!dateIsUtc()\"\r\n              [disabled]=\"disabled()\"\r\n              title=\"Interpretato nel fuso dell\u2019applicazione\"\r\n              (click)=\"setDateZone(false)\"\r\n            >\r\n              Ora locale\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-value__mode\"\r\n              [class.fb-value__mode--active]=\"dateIsUtc()\"\r\n              [disabled]=\"disabled()\"\r\n              title=\"Scrive il suffisso Z: l\u2019orario e\u2019 in UTC\"\r\n              (click)=\"setDateZone(true)\"\r\n            >\r\n              UTC (Z)\r\n            </button>\r\n          </div>\r\n          <p class=\"fb-field__hint\">\r\n            Data e ora insieme.\r\n            {{\r\n              dateIsUtc()\r\n                ? 'Con \u00ABUTC\u00BB l\u2019orario e\u2019 assoluto.'\r\n                : 'Senza fuso l\u2019orario e\u2019 interpretato nel fuso dell\u2019applicazione, non in UTC.'\r\n            }}\r\n            Cambiare fuso riscrive l\u2019orario, non lo converte.\r\n          </p>\r\n        }\r\n      }\r\n    }\r\n\r\n    @case ('formula') {\r\n      <!--\r\n        Il tipo atteso e' quello **dichiarato sulla formula** (`formulaDataType`), non quello del\r\n        campo: e' cio' che il documento porta, ed e' su quello che il motore va misurato (\u00A76.3).\r\n      -->\r\n      <fb-formula-editor\r\n        [expression]=\"value()?.formulaExpression || ''\"\r\n        usage=\"Value\"\r\n        [expectedDataType]=\"$any(value()?.formulaDataType) || dataType()\"\r\n        [disabled]=\"disabled()\"\r\n        placeholder=\"Importo * 1.22\"\r\n        [ariaLabel]=\"label() + ': espressione'\"\r\n        (expressionChange)=\"onFormulaChange($event)\"\r\n      />\r\n      <div class=\"fb-field__row\">\r\n        <label class=\"fb-field__hint\">Tipo del risultato</label>\r\n        <select\r\n          class=\"fb-select\"\r\n          [fbValue]=\"value()?.formulaDataType || ''\"\r\n          [disabled]=\"disabled()\"\r\n          (change)=\"onFormulaTypeChange($any($event.target).value)\"\r\n        >\r\n          @for (type of dataTypeOptions(); track type.value) {\r\n            <option [value]=\"type.value\">{{ type.label }}</option>\r\n          }\r\n        </select>\r\n      </div>\r\n      <p class=\"fb-field__hint\">\r\n        L\u2019espressione va al motore di regole: la sintassi delle funzioni e\u2019 del motore.\r\n      </p>\r\n    }\r\n\r\n    @case ('empty') {\r\n      <p class=\"fb-field__hint\">Nessun valore.</p>\r\n    }\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.fb-value{display:flex;flex-direction:column;gap:6px}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], dataType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataType", required: false }] }], objectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectType", required: false }] }], isCollection: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollection", required: false }] }], valueSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueSet", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], allowFormula: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFormula", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 /**
@@ -10623,7 +10941,9 @@ class DynamicScreenInspectorComponent extends NodeInspectorBase {
             value.integerValue ??
             value.dateValue ??
             value.enumValue ??
-            (value.booleanValue === undefined ? undefined : String(value.booleanValue));
+            // `isValued` e non `!== undefined`: `false` e' un valore da mostrare, `null` e' un'assenza che
+            // un backend che serializza tutto manda comunque — e stamparlo darebbe «null» nel controllo.
+            (isValued(value.booleanValue) ? String(value.booleanValue) : undefined);
         return literal === undefined ? '' : String(literal);
     }
     // -------------------------------------------------------------------------
@@ -12938,80 +13258,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImpo
  * l'input `aggregationValues`; `Sum` anche `aggregationField`. Il form li gestisce come
  * campi propri, invece di lasciare all'utente il compito di indovinare i nomi dei parametri.
  *
+ * **Non e' un form: e' una mappatura**, a tre pannelli come il compositore dello screen dinamico
+ * (§5.2) e come il Transform delle ultime versioni di Salesforce. A sinistra le **sorgenti**
+ * (i riferimenti del flow, navigabili dentro record e classi), al centro la **destinazione** —
+ * una riga per ogni campo o membro che si puo' scrivere, mappato o no — a destra il **dettaglio**
+ * della riga scelta. Si mappa trascinando una sorgente su una riga, oppure selezionando la riga e
+ * cliccando la sorgente.
+ *
+ * Perche' l'elenco delle righe non e' l'elenco delle azioni: un elenco di azioni dice cio' che
+ * **e' già** mappato e tace su cio' che manca, e su una classe di dieci membri «cosa resta da
+ * riempire» era una domanda a cui si rispondeva contando a mano. Le righe vengono quindi dal
+ * **catalogo della destinazione** (i membri di una classe, §4.7.1; i campi di un'entita', §4.4) e
+ * l'azione e' cio' che una riga porta, non cio' che la fa esistere. Dove il catalogo non c'e' —
+ * destinazione scalare, oppure una classe che non dichiara i membri — le righe restano quelle
+ * delle azioni: si digita il nome, come prima, e nessuno accusa nulla.
+ *
  * Il target puo' anche essere una **classe** (`dataType: 'Structure'`): in quel caso
  * `outputFieldApiName` porta il nome del **membro** invece del nome del campo (§4.7), ed e' il
- * modo di comporre un'istanza intera in un elemento solo invece di un Assignment per membro. Il
- * form propone allora i membri scrivibili, non un campo di testo: un membro calcolato si legge
- * ma assegnarlo e' `TARGET_NOT_WRITABLE`.
+ * modo di comporre un'istanza intera in un elemento solo invece di un Assignment per membro. Un
+ * membro calcolato si legge ma assegnarlo e' `TARGET_NOT_WRITABLE`: qui non compare fra le righe.
  *
  * Nota: `connector` qui e' un **array** — la mappa delle uscite lo nasconde al resto.
  */
 /** I nomi dei parametri che le aggregazioni richiedono, fissati dal modello. */
 const AGGREGATION_VALUES = 'aggregationValues';
 const AGGREGATION_FIELD = 'aggregationField';
+/** Il glifo di un'operazione. È presentazione: l'elenco autoritativo resta il dizionario. */
+const OPERATION_ICONS = {
+    Map: '→',
+    Sum: 'Σ',
+    Count: '#',
+};
 class TransformInspectorComponent extends NodeInspectorBase {
+    api = inject(FlowBuilderApi);
     catalog = inject(FlowCatalogStore);
+    document = inject(DOCUMENT);
     elementType = 'Transform';
     transform = computed(() => this.node(), ...(ngDevMode ? [{ debugName: "transform" }] : []));
     transformTypes = computed(() => this.dictionaries.transformTypes(), ...(ngDevMode ? [{ debugName: "transformTypes" }] : []));
     dataTypes = computed(() => this.dictionaries.dataTypes(), ...(ngDevMode ? [{ debugName: "dataTypes" }] : []));
     enumTypes = signal([], ...(ngDevMode ? [{ debugName: "enumTypes" }] : []));
-    /**
-     * §4.7 — i membri della classe di destinazione: servono a sapere **il tipo** di cio' che ogni
-     * `Map` scrive, che e' quello che guida l'editor del valore. Su un membro `Enum` e' la sola
-     * strada per proporre i valori del tipo invece di farli digitare (§4.6).
-     */
-    members = signal([], ...(ngDevMode ? [{ debugName: "members" }] : []));
     constructor() {
         super();
         void this.catalog.listEnumTypes().then((list) => this.enumTypes.set(list ?? []));
-        effect(() => {
-            const className = this.isStructureTarget() ? this.transform().objectType : undefined;
-            if (!className) {
-                if (untracked(this.members).length) {
-                    this.members.set([]);
-                }
-                return;
-            }
-            void this.catalog
-                .listStructureMembers(className)
-                .then((list) => this.members.set(list ?? []))
-                // Catalogo assente: il tipo del membro resta ignoto e il valore resta generico.
-                .catch(() => this.members.set([]));
-        });
-    }
-    /**
-     * Il tipo di cio' che una `Map` scrive: il **membro** su un target `Structure`, il target stesso
-     * altrove. Membro non in catalogo — o percorso annidato — il tipo resta ignoto: si digita.
-     */
-    memberOf(action) {
-        const name = action.outputFieldApiName;
-        return name ? this.members().find((member) => member.name === name) : undefined;
-    }
-    mapDataType(action) {
-        if (this.isStructureTarget()) {
-            return this.memberOf(action)?.dataType ?? undefined;
-        }
-        return this.transform().dataType ?? undefined;
-    }
-    mapObjectType(action) {
-        if (this.isStructureTarget()) {
-            return this.memberOf(action)?.objectType ?? undefined;
-        }
-        return this.transform().objectType ?? undefined;
+        this.loadReferences();
+        this.loadTargetLevel();
     }
+    // ------------------------------------------------------------------ il risultato
     enumOptions = computed(() => this.enumTypes(), ...(ngDevMode ? [{ debugName: "enumOptions" }] : []));
     requiresObjectType = computed(() => this.dictionaries.requiresObjectType(this.transform().dataType), ...(ngDevMode ? [{ debugName: "requiresObjectType" }] : []));
     /** §4.7 — con un target `Structure` la destinazione di ogni azione e' un **membro**. */
     isStructureTarget = computed(() => this.dictionaries.isStructure(this.transform().dataType), ...(ngDevMode ? [{ debugName: "isStructureTarget" }] : []));
     /** Su una `Structure` la classe mancante e' un errore, non un avviso (§4.7). */
     missingObjectType = computed(() => this.isStructureTarget() && !this.transform().objectType, ...(ngDevMode ? [{ debugName: "missingObjectType" }] : []));
-    /** Il modello prevede una lista di liste; l'editor lavora sulla prima, che e' il caso d'uso. */
-    actions = computed(() => this.transform().transformValues?.[0]?.transformValueActions ?? [], ...(ngDevMode ? [{ debugName: "actions" }] : []));
     setDataType(dataType) {
         this.patch((node) => {
             const transform = node;
-            transform.dataType = dataType || undefined;
+            transform.dataType = (dataType || undefined);
             if (!this.dictionaries.requiresObjectType(dataType)) {
                 delete transform.objectType;
             }
@@ -13031,7 +13334,356 @@ class TransformInspectorComponent extends NodeInspectorBase {
             }
         });
     }
+    // ------------------------------------------------------------------ le sorgenti
+    /**
+     * I riferimenti del flow: la stessa fonte del reference picker (§6.4). Serve **sia** per la
+     * colonna delle sorgenti **sia** per riconoscere la radice di un percorso quando si entra in un
+     * record o in una classe.
+     */
+    references = signal([], ...(ngDevMode ? [{ debugName: "references" }] : []));
+    referencesPending = signal(false, ...(ngDevMode ? [{ debugName: "referencesPending" }] : []));
+    referencesError = signal(null, ...(ngDevMode ? [{ debugName: "referencesError" }] : []));
+    /** Dove si sta guardando: vuoto = le radici, altrimenti il percorso in cui si e' entrati. */
+    sourcePath = signal('', ...(ngDevMode ? [{ debugName: "sourcePath" }] : []));
+    sourceQuery = signal('', ...(ngDevMode ? [{ debugName: "sourceQuery" }] : []));
+    /**
+     * Il punto in cui navigare, scritto **col punto in fondo**: e' la stessa convenzione del
+     * reference picker — un percorso che finisce col punto ha come ultimo segmento il vuoto, e la
+     * navigazione risponde con cio' che c'e' **dentro** invece di verificare un nome.
+     */
+    sourceRoot = computed(() => {
+        const path = this.sourcePath();
+        if (!path) {
+            return undefined;
+        }
+        return navigableRootOf(this.references(), `${path}.`, (dataType) => this.dictionaries.isStructure(dataType), {
+            // Gli output automatici si **propongono** e non si giudicano (§4.5): senza questo, entrare in
+            // `Leggi_Ordine` sarebbe impossibile pur essendo `Leggi_Ordine.Numero` un riferimento valido.
+            proposeOnly: true,
+        });
+    }, ...(ngDevMode ? [{ debugName: "sourceRoot" }] : []));
+    sourceNavigation = navigatePath(this.catalog, () => {
+        const root = this.sourceRoot();
+        return root ? { root: root.container, path: root.path } : null;
+    });
+    sourcePending = computed(() => this.referencesPending() || this.sourceNavigation.isPending(), ...(ngDevMode ? [{ debugName: "sourcePending" }] : []));
+    sourceError = computed(() => this.referencesError(), ...(ngDevMode ? [{ debugName: "sourceError" }] : []));
+    /** Le briciole di pane: «Tutte» piu' un livello per segmento del percorso in cui si e' entrati. */
+    sourceCrumbs = computed(() => {
+        const path = this.sourcePath();
+        if (!path) {
+            return [];
+        }
+        const segments = path.split('.');
+        return segments.map((segment, index) => ({
+            label: segment,
+            path: segments.slice(0, index + 1).join('.'),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "sourceCrumbs" }] : []));
+    /** Cio' che si sta guardando: le radici, oppure i campi o i membri della tappa. */
+    sourceItems = computed(() => {
+        const path = this.sourcePath();
+        if (!path) {
+            return this.references().map((reference) => ({
+                path: reference.name,
+                label: reference.label || reference.name,
+                detail: this.describeReference(reference),
+                isCollection: reference.isCollection === true,
+                canEnter: !!navigableRootOf(this.references(), reference.name, (dataType) => this.dictionaries.isStructure(dataType), { proposeOnly: true }),
+            }));
+        }
+        const tail = this.sourceNavigation.resolution()?.tail;
+        if (!tail) {
+            return [];
+        }
+        return tail.level.entries.map((entry) => ({
+            path: `${path}.${entry.name}`,
+            label: entry.label || entry.name,
+            detail: this.describeEntry(entry),
+            isCollection: entry.isCollection === true,
+            // Dentro una collection non si naviga: il percorso designa l'insieme, non un elemento (§4.4).
+            canEnter: !!entry.next && !entry.isCollection,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "sourceItems" }] : []));
+    /** Il filtro e' locale: la ricerca serve su venti variabili, non su tre. */
+    sources = computed(() => {
+        const query = this.sourceQuery().trim().toLowerCase();
+        const items = this.sourceItems();
+        if (!query) {
+            return items;
+        }
+        return items.filter((item) => item.path.toLowerCase().includes(query) || item.label.toLowerCase().includes(query));
+    }, ...(ngDevMode ? [{ debugName: "sources" }] : []));
+    /**
+     * La tappa in cui si e' entrati non dichiara campi ne' membri: e' un "non lo so" del catalogo
+     * (§4.7.1), non «qui non c'e' niente», e i due meritano parole diverse.
+     */
+    sourceUndeclared = computed(() => {
+        const status = this.sourceNavigation.resolution()?.tail?.level.status;
+        return !!this.sourcePath() && !!status && status !== 'declared';
+    }, ...(ngDevMode ? [{ debugName: "sourceUndeclared" }] : []));
+    enterSource(path) {
+        this.sourcePath.set(path);
+        this.sourceQuery.set('');
+    }
+    leaveSource() {
+        const segments = this.sourcePath().split('.');
+        segments.pop();
+        this.enterSource(segments.join('.'));
+    }
+    describeReference(reference) {
+        const parts = [];
+        if (reference.dataType) {
+            parts.push(reference.isCollection ? `${reference.dataType}[]` : reference.dataType);
+        }
+        if (reference.objectType) {
+            parts.push(reference.objectType);
+        }
+        return parts.join(' · ');
+    }
+    describeEntry(entry) {
+        const parts = [];
+        if (entry.dataType) {
+            parts.push(entry.isCollection ? `${entry.dataType}[]` : entry.dataType);
+        }
+        if (entry.objectType) {
+            parts.push(entry.objectType);
+        }
+        return parts.join(' · ');
+    }
+    loadReferences() {
+        let sequence = 0;
+        effect(() => {
+            const definition = this.store.document();
+            const token = ++sequence;
+            this.referencesPending.set(true);
+            this.referencesError.set(null);
+            void this.api
+                .getReferences(definition)
+                .then((list) => {
+                if (token !== sequence) {
+                    return;
+                }
+                this.references.set(list ?? []);
+                this.referencesPending.set(false);
+            })
+                .catch(() => {
+                if (token !== sequence) {
+                    return;
+                }
+                // Senza l'elenco si scrive a mano nel dettaglio: la colonna lo dice invece di restare vuota.
+                this.references.set([]);
+                this.referencesError.set('I riferimenti del flow non sono disponibili.');
+                this.referencesPending.set(false);
+            });
+        });
+    }
+    // ------------------------------------------------------------------ la destinazione
+    /**
+     * Il catalogo della destinazione: i membri di una classe o i campi di un'entita', a seconda del
+     * tipo del risultato. `loadPathLevel` copre entrambi i casi e porta con se' lo **stato** — solo
+     * `declared` autorizza a dire che un nome non esiste (§4.7.1).
+     */
+    targetLevel = signal(null, ...(ngDevMode ? [{ debugName: "targetLevel" }] : []));
+    targetContainer = computed(() => {
+        const transform = this.transform();
+        if (!transform.objectType) {
+            return null;
+        }
+        if (this.isStructureTarget()) {
+            return { kind: 'structure', name: transform.objectType };
+        }
+        return transform.dataType === 'Object' ? { kind: 'object', name: transform.objectType } : null;
+    }, ...(ngDevMode ? [{ debugName: "targetContainer" }] : []));
+    loadTargetLevel() {
+        let sequence = 0;
+        effect(() => {
+            const container = this.targetContainer();
+            const token = ++sequence;
+            if (!container) {
+                this.targetLevel.set(null);
+                return;
+            }
+            void loadPathLevel(this.catalog, container).then((level) => {
+                if (token === sequence) {
+                    this.targetLevel.set(level);
+                }
+            });
+        });
+    }
+    /**
+     * L'entita' del risultato, quando il risultato e' un record: le destinazioni sono i suoi campi,
+     * ed e' cio' che rende la casella del nome un elenco.
+     */
+    targetObject = computed(() => this.transform().dataType === 'Object' ? this.transform().objectType : undefined, ...(ngDevMode ? [{ debugName: "targetObject" }] : []));
+    /**
+     * La destinazione ha una forma **dichiarata**: c'e' un catalogo da cui prendere le righe. Il caso
+     * opposto non e' un difetto — un risultato scalare non ha campi — ed e' per questo che le due
+     * domande sono separate da {@link targetUndeclared}.
+     */
+    hasTargetCatalog = computed(() => !!this.targetContainer(), ...(ngDevMode ? [{ debugName: "hasTargetCatalog" }] : []));
+    /**
+     * Tappa valida di cui campi o membri non sono dichiarati (§4.7.1): si **digita** il nome, e non
+     * si accusa nessuno. Dirlo evita di cercare un difetto dove c'e' un catalogo incompleto.
+     */
+    targetUndeclared = computed(() => this.hasTargetCatalog() && !this.targetIsDeclared(), ...(ngDevMode ? [{ debugName: "targetUndeclared" }] : []));
+    /** Il catalogo e' autorevole: solo allora un nome fuori elenco e' un nome sbagliato. */
+    targetIsDeclared = computed(() => this.targetLevel()?.status === 'declared', ...(ngDevMode ? [{ debugName: "targetIsDeclared" }] : []));
+    /**
+     * Le destinazioni proponibili. Un membro calcolato non c'e': assegnarlo e' `TARGET_NOT_WRITABLE`
+     * (§4.7). Su un'entita' `isWritable` e' già `createable || updateable` (§5.8).
+     */
+    targetSlots = computed(() => (this.targetLevel()?.entries ?? []).filter((entry) => entry.isWritable), ...(ngDevMode ? [{ debugName: "targetSlots" }] : []));
+    /** Il modello prevede una lista di liste; l'editor lavora sulla prima, che e' il caso d'uso. */
+    actions = computed(() => this.transform().transformValues?.[0]?.transformValueActions ?? [], ...(ngDevMode ? [{ debugName: "actions" }] : []));
+    /**
+     * Le righe della destinazione: prima il catalogo — mappato o no — poi le azioni che nominano
+     * qualcosa che il catalogo non ha. L'ordine e' quello, e non quello delle azioni, perche' la
+     * colonna dice **la forma del risultato**: un elenco che si riordina a ogni mappatura non si
+     * legge.
+     */
+    targets = computed(() => {
+        const actions = this.actions();
+        const taken = new Set();
+        const rows = [];
+        for (const slot of this.targetSlots()) {
+            const index = actions.findIndex((action, position) => !taken.has(position) && action.outputFieldApiName === slot.name);
+            if (index >= 0) {
+                taken.add(index);
+            }
+            rows.push({
+                key: `slot:${slot.name}`,
+                field: slot.name,
+                label: slot.label || slot.name,
+                dataType: slot.dataType,
+                objectType: slot.objectType ?? undefined,
+                isCollection: slot.isCollection,
+                index,
+                action: index >= 0 ? actions[index] : undefined,
+                isUnknown: false,
+            });
+        }
+        actions.forEach((action, index) => {
+            if (taken.has(index)) {
+                return;
+            }
+            const transform = this.transform();
+            rows.push({
+                key: `action:${index}`,
+                field: action.outputFieldApiName ?? '',
+                label: action.outputFieldApiName || '(destinazione da indicare)',
+                // Senza catalogo il tipo di cio' che si scrive e' quello del risultato: e' quanto si sa.
+                dataType: this.targetContainer() ? undefined : transform.dataType,
+                objectType: this.targetContainer() ? undefined : transform.objectType,
+                isCollection: this.targetContainer() ? undefined : transform.isCollection,
+                index,
+                action,
+                isUnknown: this.targetIsDeclared() && !!action.outputFieldApiName,
+            });
+        });
+        return rows;
+    }, ...(ngDevMode ? [{ debugName: "targets" }] : []));
+    mappedCount = computed(() => this.targets().filter((row) => row.index >= 0).length, ...(ngDevMode ? [{ debugName: "mappedCount" }] : []));
+    /** Quante destinazioni il catalogo dichiara: senza catalogo non c'e' un totale da mostrare. */
+    slotCount = computed(() => (this.targetIsDeclared() ? this.targetSlots().length : 0), ...(ngDevMode ? [{ debugName: "slotCount" }] : []));
+    selectedKey = signal(null, ...(ngDevMode ? [{ debugName: "selectedKey" }] : []));
+    /**
+     * La riga aperta nel dettaglio. Il ripiego sulla prima non e' cosmetico: la colonna di destra
+     * altrimenti resta vuota all'apertura, e il primo gesto sarebbe un click che non modifica niente.
+     */
+    selected = computed(() => {
+        const rows = this.targets();
+        const key = this.selectedKey();
+        return rows.find((row) => row.key === key) ?? rows[0] ?? null;
+    }, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    select(key) {
+        this.selectedKey.set(key);
+    }
+    isSelected(row) {
+        return this.selected()?.key === row.key;
+    }
+    /** I rilievi ancorati all'azione di una riga (§7): la riga li mostra, il dettaglio li spiega. */
+    issuesOf(row) {
+        return row.index >= 0 ? this.issuesAt(`transformValues[0].transformValueActions[${row.index}]`) : [];
+    }
+    // ------------------------------------------------------------------ le azioni
+    operationOf(row) {
+        return row.action?.transformType ?? 'Map';
+    }
+    operationIcon(row) {
+        const type = this.operationOf(row);
+        return OPERATION_ICONS[type] ?? '·';
+    }
+    operationLabel(type) {
+        return this.transformTypes().find((entry) => entry.value === type)?.label ?? type;
+    }
+    /**
+     * Cosa la riga scrive, in una riga di testo. È il solo modo di leggere una mappatura senza
+     * aprirla: la colonna centrale mostra questo, il dettaglio i controlli.
+     */
+    sourceSummary(row) {
+        const action = row.action;
+        if (!action) {
+            return '';
+        }
+        const type = action.transformType ?? 'Map';
+        if (type === 'Map') {
+            return this.describeValue(action.value);
+        }
+        const collection = this.aggregationCollection(action) ?? '';
+        if (type === 'Sum') {
+            const field = this.aggregationField(action);
+            return collection && field ? `${collection} · ${field}` : collection;
+        }
+        return collection;
+    }
+    describeValue(value) {
+        const field = valuedFieldOf(value);
+        if (!value || !field) {
+            return '';
+        }
+        if (field === 'formulaExpression') {
+            return `ƒ ${value.formulaExpression}`;
+        }
+        if (field === 'elementReference') {
+            return value.elementReference ?? '';
+        }
+        return String(value[field]);
+    }
+    mutateAction(index, mutate) {
+        this.patch((node) => {
+            const action = node.transformValues?.[0]?.transformValueActions?.[index];
+            if (action) {
+                mutate(action);
+            }
+        });
+    }
+    /**
+     * L'indice dell'azione della riga, creandola se non c'e'. È la conseguenza del «le righe vengono
+     * dal catalogo»: una riga esiste anche prima di essere mappata, e la prima modifica e' cio' che
+     * la fa diventare un'azione del documento.
+     */
+    ensureAction(row) {
+        if (row.index >= 0) {
+            return row.index;
+        }
+        const index = this.actions().length;
+        this.patch((node) => {
+            const transform = node;
+            transform.transformValues ??= [{}];
+            const first = transform.transformValues[0];
+            first.transformValueActions ??= [];
+            first.transformValueActions.push({
+                transformType: 'Map',
+                outputFieldApiName: row.field || undefined,
+            });
+        });
+        this.selectedKey.set(row.key);
+        return index;
+    }
+    /** Una destinazione fuori catalogo: l'unico modo di scrivere un nome che il catalogo non ha. */
     addAction() {
+        const index = this.actions().length;
         this.patch((node) => {
             const transform = node;
             transform.transformValues ??= [{}];
@@ -13039,26 +13691,26 @@ class TransformInspectorComponent extends NodeInspectorBase {
             first.transformValueActions ??= [];
             first.transformValueActions.push({ transformType: 'Map' });
         });
+        this.selectedKey.set(`action:${index}`);
     }
-    removeAction(index) {
+    removeAction(row) {
+        if (row.index < 0) {
+            return;
+        }
         this.patch((node) => {
             const transform = node;
             const actions = transform.transformValues?.[0]?.transformValueActions;
-            actions?.splice(index, 1);
+            actions?.splice(row.index, 1);
             if (actions?.length === 0) {
                 delete transform.transformValues;
             }
         });
+        // La riga resta (viene dal catalogo) o sparisce (era un'azione): in entrambi i casi la
+        // selezione per chiave ritrova cio' che c'e', o ripiega sulla prima.
+        this.selectedKey.set(row.key);
     }
-    mutateAction(index, mutate) {
-        this.patch((node) => {
-            const action = node.transformValues?.[0]?.transformValueActions?.[index];
-            if (action) {
-                mutate(action);
-            }
-        });
-    }
-    setActionType(index, transformType) {
+    setOperation(row, transformType) {
+        const index = this.ensureAction(row);
         this.mutateAction(index, (action) => {
             action.transformType = transformType;
             // Map usa `value`, Sum e Count usano `inputParameters`: tenere entrambi renderebbe
@@ -13078,24 +13730,38 @@ class TransformInspectorComponent extends NodeInspectorBase {
             }
         });
     }
-    setOutputField(index, field) {
+    setOutputField(row, field) {
+        const index = this.ensureAction(row);
         this.mutateAction(index, (action) => {
             action.outputFieldApiName = field || undefined;
         });
+        /**
+         * La chiave di una riga contiene il nome della destinazione, quindi cambiando nome la riga
+         * selezionata **e' un'altra**: la si ritrova per indice dell'azione. Ricomporre la chiave a
+         * mano (`slot:<nome>`) sbagliava proprio nel caso interessante — un nome fuori catalogo non ha
+         * nessuno `slot:`, la selezione ripiegava sulla prima riga e la casella perdeva il focus a
+         * ogni battuta.
+         */
+        const moved = this.targets().find((candidate) => candidate.index === index);
+        if (moved) {
+            this.selectedKey.set(moved.key);
+        }
     }
-    setMapValue(index, value) {
+    setMapValue(row, value) {
+        const index = this.ensureAction(row);
         this.mutateAction(index, (action) => {
             action.value = value;
         });
     }
     aggregationCollection(action) {
-        return action.inputParameters?.find((parameter) => parameter.name === AGGREGATION_VALUES)?.value
+        return action?.inputParameters?.find((parameter) => parameter.name === AGGREGATION_VALUES)?.value
             ?.elementReference;
     }
     aggregationField(action) {
-        return (action.inputParameters?.find((parameter) => parameter.name === AGGREGATION_FIELD)?.value?.stringValue ?? '');
+        return (action?.inputParameters?.find((parameter) => parameter.name === AGGREGATION_FIELD)?.value?.stringValue ?? '');
     }
-    setAggregationCollection(index, reference) {
+    setAggregationCollection(row, reference) {
+        const index = this.ensureAction(row);
         this.mutateAction(index, (action) => {
             action.inputParameters ??= [];
             const existing = action.inputParameters.find((parameter) => parameter.name === AGGREGATION_VALUES);
@@ -13110,7 +13776,8 @@ class TransformInspectorComponent extends NodeInspectorBase {
             }
         });
     }
-    setAggregationField(index, field) {
+    setAggregationField(row, field) {
+        const index = this.ensureAction(row);
         this.mutateAction(index, (action) => {
             action.inputParameters ??= [];
             const existing = action.inputParameters.find((parameter) => parameter.name === AGGREGATION_FIELD);
@@ -13125,29 +13792,136 @@ class TransformInspectorComponent extends NodeInspectorBase {
             }
         });
     }
-    isMap(action) {
-        return (action.transformType ?? 'Map') === 'Map';
+    isMap(row) {
+        return this.operationOf(row) === 'Map';
     }
-    needsAggregationField(action) {
-        return action.transformType === 'Sum';
+    needsAggregationField(row) {
+        return this.operationOf(row) === 'Sum';
     }
-    needsAggregationValues(action) {
-        return action.transformType === 'Sum' || action.transformType === 'Count';
+    needsAggregationValues(row) {
+        const type = this.operationOf(row);
+        return type === 'Sum' || type === 'Count';
+    }
+    // ------------------------------------------------------------------ tipi dedotti
+    /**
+     * Il tipo dell'elemento della collection aggregata: e' cio' che rende `aggregationField` un
+     * elenco di campi invece di una casella di testo. Il valore nel documento resta il **nome** del
+     * campo (`stringValue`), come vuole la §5.13.
+     */
+    aggregationTypes = referenceTypes(this.catalog, (dataType) => this.dictionaries.isStructure(dataType), () => ({
+        references: this.references(),
+        values: this.actions().map((action) => this.aggregationCollection(action)),
+    }));
+    /** L'entita' degli elementi della collection aggregata, se e' una collection di record. */
+    aggregationObject(row) {
+        const path = this.aggregationCollection(row.action);
+        const type = this.aggregationTypes.typeOf(path);
+        return type?.dataType === 'Object' ? (type.objectType ?? undefined) : undefined;
+    }
+    /** La classe degli elementi della collection aggregata, se e' una collection di istanze (§4.7). */
+    aggregationClass(row) {
+        const path = this.aggregationCollection(row.action);
+        const type = this.aggregationTypes.typeOf(path);
+        return this.dictionaries.isStructure(type?.dataType) ? (type?.objectType ?? undefined) : undefined;
+    }
+    /**
+     * Il tipo di cio' che una `Map` scrive: il campo o il membro quando il catalogo lo dichiara, il
+     * risultato stesso altrove. Su un `Enum` e' la sola strada per proporre i valori del tipo invece
+     * di farli digitare (§4.6).
+     */
+    mapDataType(row) {
+        return row.dataType ?? undefined;
+    }
+    mapObjectType(row) {
+        return row.objectType ?? undefined;
+    }
+    // ------------------------------------------------------------------ mappatura a gesti
+    /** La riga sotto il puntatore durante il trascinamento: solo evidenziazione, niente geometria. */
+    dropKey = signal(null, ...(ngDevMode ? [{ debugName: "dropKey" }] : []));
+    draggingPath = signal(null, ...(ngDevMode ? [{ debugName: "draggingPath" }] : []));
+    onSourceDragStarted(source) {
+        this.draggingPath.set(source.path);
+    }
+    onSourceDragMoved(event) {
+        this.dropKey.set(this.hitTest(event.pointerPosition.x, event.pointerPosition.y));
+    }
+    onSourceDragEnded(event, source) {
+        // Un trascinamento non deve valere anche come click: la stessa sorgente porta i due gesti, e il
+        // click — che mappa sulla riga **selezionata** — arriverebbe dopo il rilascio, scrivendo due
+        // righe con un solo gesto. Il flag lo esclude fino al task successivo.
+        this.dragged = true;
+        setTimeout(() => (this.dragged = false));
+        const key = this.dropKey();
+        this.dropKey.set(null);
+        this.draggingPath.set(null);
+        // A spostare qualcosa e' il documento: senza `reset()` resterebbe la trasformazione del
+        // trascinamento sulla riga della palette, che Angular riusa per un'altra sorgente.
+        event.source.reset();
+        const row = this.targets().find((candidate) => candidate.key === key);
+        if (!row) {
+            return;
+        }
+        // Il documento si muta **dopo** il gesto: mutarlo qui ridisegna le due colonne mentre il CDK
+        // sta ancora chiudendo il trascinamento sull'elemento che sta rilasciando.
+        setTimeout(() => this.applySource(row, source));
+    }
+    /**
+     * Fuori dai signal di proposito: e' la coda di un gesto, non uno stato da cui ridisegnare.
+     */
+    dragged = false;
+    /** Il gesto alternativo: riga selezionata, click sulla sorgente. Un click e' sempre riproducibile. */
+    mapToSelected(source) {
+        if (this.dragged) {
+            return;
+        }
+        const row = this.selected();
+        if (row) {
+            this.applySource(row, source);
+        }
+    }
+    /**
+     * Dove finisce la sorgente rilasciata: nel valore di una `Map`, nella collection di un `Sum` o di
+     * un `Count`. Non si cambia l'operazione da soli: chi ha scelto `Sum` non si aspetta che
+     * trascinare una collection lo riporti a `Map`.
+     */
+    applySource(row, source) {
+        this.selectedKey.set(row.key);
+        if (this.needsAggregationValues(row)) {
+            this.setAggregationCollection(row, source.path);
+            return;
+        }
+        this.setMapValue(row, { elementReference: source.path });
+    }
+    /**
+     * La riga bersaglio, dal **DOM**. Si scorre tutto lo stack e non il solo primo elemento perche'
+     * sopra al puntatore c'e' l'anteprima del trascinamento, che e' cio' che `elementFromPoint`
+     * trova per prima.
+     */
+    hitTest(x, y) {
+        for (const element of this.document.elementsFromPoint(x, y)) {
+            const row = element.closest?.('[data-fb-slot]');
+            if (row) {
+                return row.getAttribute('data-fb-slot');
+            }
+        }
+        return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: TransformInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: TransformInspectorComponent, isStandalone: true, selector: "fb-transform-inspector", usesInheritance: true, ngImport: i0, template: "<div class=\"fb-field\">\r\n  <label class=\"fb-field__label fb-field__label--required\">Tipo del risultato</label>\r\n  <select class=\"fb-select\" [fbValue]=\"transform().dataType || ''\" (change)=\"setDataType($any($event.target).value)\">\r\n    <option value=\"\">\u2014 scegli \u2014</option>\r\n    @for (type of dataTypes(); track type.value) {\r\n      <option [value]=\"type.value\">{{ type.label }}</option>\r\n    }\r\n  </select>\r\n  @if (!transform().dataType) {\r\n    <p class=\"fb-field__error\">Obbligatorio (TRANSFORM_DATA_TYPE_MISSING).</p>\r\n  }\r\n</div>\r\n\r\n@if (requiresObjectType()) {\r\n  <div class=\"fb-field\">\r\n    <label class=\"fb-field__label fb-field__label--required\">\r\n      {{ isStructureTarget() ? 'Classe del risultato' : 'Tipo dell\u2019oggetto' }}\r\n    </label>\r\n    @if (isStructureTarget()) {\r\n      <!-- \u00A74.7: una classe del backend. Le destinazioni delle azioni sono i suoi membri. -->\r\n      <fb-structure-picker\r\n        [value]=\"transform().objectType\"\r\n        label=\"Classe del risultato\"\r\n        (valueChange)=\"setObjectType($event ?? '')\"\r\n      />\r\n      @if (missingObjectType()) {\r\n        <p class=\"fb-field__error\">\r\n          La classe e\u2019 obbligatoria: senza, l\u2019attivazione e\u2019 bloccata (OBJECT_TYPE_MISSING).\r\n        </p>\r\n      } @else {\r\n        <p class=\"fb-field__hint\">\r\n          Componi l\u2019istanza intera qui: ogni trasformazione scrive un <strong>membro</strong> della classe,\r\n          invece di un Assignment per membro.\r\n        </p>\r\n      }\r\n    } @else if (transform().dataType === 'Enum') {\r\n      <!-- Le enumerazioni sono un dizionario chiuso: non c'e' scrittura libera da concedere. -->\r\n      <select\r\n        class=\"fb-select\"\r\n        [fbValue]=\"transform().objectType || ''\"\r\n        (change)=\"setObjectType($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    } @else {\r\n      <fb-object-picker\r\n        [value]=\"transform().objectType\"\r\n        label=\"Tipo dell\u2019oggetto\"\r\n        placeholder=\"Scrivi o scegli un oggetto\"\r\n        (valueChange)=\"setObjectType($event ?? '')\"\r\n      />\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]=\"transform().isCollection === true\"\r\n    (change)=\"setIsCollection($any($event.target).checked)\"\r\n  />\r\n  Il risultato e\u2019 una collection\r\n</label>\r\n\r\n<p class=\"fb-callout\">\r\n  Il risultato e\u2019 l\u2019<strong>output automatico</strong> dell\u2019elemento: si referenzia con\r\n  <code>{{ name() }}</code>.\r\n</p>\r\n\r\n<fieldset class=\"fb-section\">\r\n  <legend class=\"fb-section__title\">Trasformazioni</legend>\r\n\r\n  <div class=\"fb-list\">\r\n    @for (action of actions(); track $index) {\r\n      <div class=\"fb-list__item\">\r\n        <div class=\"fb-list__header\">\r\n          <span class=\"fb-list__index\">{{ $index + 1 }}</span>\r\n          <span class=\"fb-list__spacer\"></span>\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-btn fb-btn--ghost fb-btn--icon\"\r\n            aria-label=\"Rimuovi\"\r\n            (click)=\"removeAction($index)\"\r\n          >\r\n            \u00D7\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Operazione, destinazione e sorgente sono una frase sola: si leggono in riga. -->\r\n        <div class=\"fb-fields-row\">\r\n          <div class=\"fb-field fb-field--compact\">\r\n            <label class=\"fb-field__label\">Operazione</label>\r\n            <select\r\n              class=\"fb-select\"\r\n              [fbValue]=\"action.transformType || 'Map'\"\r\n              (change)=\"setActionType($index, $any($event.target).value)\"\r\n            >\r\n              @for (type of transformTypes(); track type.value) {\r\n                <option [value]=\"type.value\">{{ type.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 fb-field__label--required\">\r\n              {{ isStructureTarget() ? 'Membro di destinazione' : 'Campo di destinazione' }}\r\n            </label>\r\n            @if (isStructureTarget()) {\r\n              <!-- Solo i membri scrivibili: un membro calcolato e' TARGET_NOT_WRITABLE (\u00A74.7). -->\r\n              <fb-structure-member-picker\r\n                [value]=\"action.outputFieldApiName\"\r\n                [className]=\"transform().objectType\"\r\n                usage=\"writable\"\r\n                label=\"Membro di destinazione\"\r\n                (valueChange)=\"setOutputField($index, $event ?? '')\"\r\n              />\r\n            } @else {\r\n              <input\r\n                class=\"fb-input\"\r\n                [value]=\"action.outputFieldApiName || ''\"\r\n                placeholder=\"Totale\"\r\n                (input)=\"setOutputField($index, $any($event.target).value)\"\r\n              />\r\n            }\r\n          </div>\r\n\r\n          @if (isMap(action)) {\r\n            <div class=\"fb-field\">\r\n              <label class=\"fb-field__label\">Valore</label>\r\n              <!--\r\n                Il tipo di cio' che si scrive guida il controllo: su un membro Enum i valori\r\n                proponibili sono quelli del suo tipo (\u00A74.6).\r\n              -->\r\n              <fb-value-editor\r\n                [value]=\"action.value\"\r\n                label=\"Valore\"\r\n                [dataType]=\"$any(mapDataType(action))\"\r\n                [objectType]=\"mapObjectType(action)\"\r\n                (valueChange)=\"setMapValue($index, $event)\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          @if (needsAggregationValues(action)) {\r\n            <div class=\"fb-field\">\r\n              <label class=\"fb-field__label fb-field__label--required\">Collection su cui aggregare</label>\r\n              <fb-reference-picker\r\n                [value]=\"aggregationCollection(action)\"\r\n                [isCollection]=\"true\"\r\n                placeholder=\"Scegli una collection\"\r\n                (valueChange)=\"setAggregationCollection($index, $event)\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          @if (needsAggregationField(action)) {\r\n            <div class=\"fb-field\">\r\n              <label class=\"fb-field__label fb-field__label--required\">Campo da sommare</label>\r\n              <input\r\n                class=\"fb-input\"\r\n                [value]=\"aggregationField(action)\"\r\n                placeholder=\"Importo\"\r\n                (input)=\"setAggregationField($index, $any($event.target).value)\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    } @empty {\r\n      <p class=\"fb-empty\">Nessuna trasformazione: l\u2019elemento non produce nulla (TRANSFORM_WITHOUT_VALUES).</p>\r\n    }\r\n  </div>\r\n\r\n  <button type=\"button\" class=\"fb-btn\" (click)=\"addAction()\">Aggiungi trasformazione</button>\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", dependencies: [{ kind: "component", type: ConnectorEditorComponent, selector: "fb-connector-editor", inputs: ["nodeName", "node", "outlets", "title"], outputs: ["connectorChanged"] }, { kind: "component", type: ObjectPickerComponent, selector: "fb-object-picker", inputs: ["value", "label", "placeholder", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: ReferencePickerComponent, selector: "fb-reference-picker", inputs: ["value", "label", "placeholder", "disabled", "dataType", "isCollection", "objectType", "writableOnly", "elementsOnly", "extraReferences"], outputs: ["valueChange"] }, { kind: "component", type: StructureMemberPickerComponent, selector: "fb-structure-member-picker", inputs: ["value", "className", "usage", "label", "placeholder", "disabled"], outputs: ["valueChange"] }, { 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", "valueSet", "disabled", "allowFormula"], outputs: ["valueChange"] }, { kind: "directive", type: SelectValueDirective, selector: "select[fbValue]", inputs: ["fbValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: TransformInspectorComponent, isStandalone: true, selector: "fb-transform-inspector", usesInheritance: true, ngImport: i0, template: "<div class=\"fb-tr\">\r\n  <!-- ============================================================ sorgenti -->\r\n  <aside class=\"fb-tr__panel\" aria-label=\"Sorgenti\">\r\n    <h3 class=\"fb-tr__panel-title\">Sorgenti</h3>\r\n\r\n    <input\r\n      class=\"fb-input fb-tr__search\"\r\n      type=\"search\"\r\n      placeholder=\"Cerca una sorgente\"\r\n      aria-label=\"Cerca una sorgente\"\r\n      [value]=\"sourceQuery()\"\r\n      (input)=\"sourceQuery.set($any($event.target).value)\"\r\n    />\r\n\r\n    @if (sourceCrumbs().length) {\r\n      <nav class=\"fb-tr__crumbs\" aria-label=\"Percorso della sorgente\">\r\n        <button type=\"button\" class=\"fb-tr__crumb\" (click)=\"enterSource('')\">Tutte</button>\r\n        @for (crumb of sourceCrumbs(); track crumb.path) {\r\n          <span class=\"fb-tr__crumb-sep\" aria-hidden=\"true\">\u203A</span>\r\n          <button type=\"button\" class=\"fb-tr__crumb\" (click)=\"enterSource(crumb.path)\">{{ crumb.label }}</button>\r\n        }\r\n      </nav>\r\n    }\r\n\r\n    <p class=\"fb-tr__hint\">\r\n      Trascina su una destinazione, oppure clicca per mapparla su quella selezionata.\r\n    </p>\r\n\r\n    @if (sourceError()) {\r\n      <p class=\"fb-callout fb-callout--warn\">\r\n        {{ sourceError() }} Le sorgenti si scrivono a mano nel dettaglio: l\u2019elenco non c\u2019e\u2019, i\r\n        riferimenti s\u00EC.\r\n      </p>\r\n    }\r\n\r\n    <ul class=\"fb-tr__list\">\r\n      @for (source of sources(); track source.path) {\r\n        <li class=\"fb-tr__source-row\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-tr__source\"\r\n            cdkDrag\r\n            [class.fb-tr__source--dragging]=\"draggingPath() === source.path\"\r\n            [title]=\"source.path + (source.detail ? ' \u00B7 ' + source.detail : '')\"\r\n            (cdkDragStarted)=\"onSourceDragStarted(source)\"\r\n            (cdkDragMoved)=\"onSourceDragMoved($event)\"\r\n            (cdkDragEnded)=\"onSourceDragEnded($event, source)\"\r\n            (click)=\"mapToSelected(source)\"\r\n          >\r\n            <span class=\"fb-tr__source-name\">\r\n              {{ source.label }}\r\n              @if (source.isCollection) {\r\n                <span class=\"fb-tr__badge\" aria-label=\"collection\">[ ]</span>\r\n              }\r\n            </span>\r\n            @if (source.detail) {\r\n              <span class=\"fb-tr__source-detail\">{{ source.detail }}</span>\r\n            }\r\n          </button>\r\n          @if (source.canEnter) {\r\n            <!-- Entrare e mappare sono due gesti diversi: un record intero e' una sorgente valida. -->\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-btn fb-btn--ghost fb-btn--icon fb-tr__enter\"\r\n              [attr.aria-label]=\"'Entra in ' + source.label\"\r\n              (click)=\"enterSource(source.path)\"\r\n            >\r\n              \u203A\r\n            </button>\r\n          }\r\n        </li>\r\n      } @empty {\r\n        @if (sourcePending()) {\r\n          <li class=\"fb-tr__empty\">Caricamento\u2026</li>\r\n        } @else if (sourceUndeclared()) {\r\n          <li class=\"fb-tr__empty\">\r\n            Il catalogo non dichiara cosa c\u2019e\u2019 qui dentro: non significa che non ci sia niente. Il\r\n            percorso si scrive a mano nel dettaglio.\r\n          </li>\r\n        } @else {\r\n          <li class=\"fb-tr__empty\">Nessuna sorgente con questo nome.</li>\r\n        }\r\n      }\r\n    </ul>\r\n  </aside>\r\n\r\n  <!-- ========================================================= destinazione -->\r\n  <section class=\"fb-tr__panel fb-tr__map\" aria-label=\"Destinazione\">\r\n    <h3 class=\"fb-tr__panel-title\">\r\n      Destinazione\r\n      @if (slotCount()) {\r\n        <span class=\"fb-tr__count\">{{ mappedCount() }} di {{ slotCount() }} mappate</span>\r\n      } @else if (mappedCount()) {\r\n        <span class=\"fb-tr__count\">{{ mappedCount() }} mappate</span>\r\n      }\r\n    </h3>\r\n\r\n    <!-- Il tipo del risultato e' la forma della colonna: sta in cima, non in fondo. -->\r\n    <div class=\"fb-tr__result\">\r\n      <div class=\"fb-fields-row\">\r\n        <div class=\"fb-field fb-field--compact\">\r\n          <label class=\"fb-field__label fb-field__label--required\">Tipo del risultato</label>\r\n          <select\r\n            class=\"fb-select\"\r\n            [fbValue]=\"transform().dataType || ''\"\r\n            (change)=\"setDataType($any($event.target).value)\"\r\n          >\r\n            <option value=\"\">\u2014 scegli \u2014</option>\r\n            @for (type of dataTypes(); track type.value) {\r\n              <option [value]=\"type.value\">{{ type.label }}</option>\r\n            }\r\n          </select>\r\n        </div>\r\n\r\n        @if (requiresObjectType()) {\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label fb-field__label--required\">\r\n              {{ isStructureTarget() ? 'Classe del risultato' : 'Tipo dell\u2019oggetto' }}\r\n            </label>\r\n            @if (isStructureTarget()) {\r\n              <!-- \u00A74.7: una classe del backend. Le destinazioni delle azioni sono i suoi membri. -->\r\n              <fb-structure-picker\r\n                [value]=\"transform().objectType\"\r\n                label=\"Classe del risultato\"\r\n                (valueChange)=\"setObjectType($event ?? '')\"\r\n              />\r\n            } @else if (transform().dataType === 'Enum') {\r\n              <!-- Le enumerazioni sono un dizionario chiuso: non c'e' scrittura libera da concedere. -->\r\n              <select\r\n                class=\"fb-select\"\r\n                [fbValue]=\"transform().objectType || ''\"\r\n                (change)=\"setObjectType($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            } @else {\r\n              <fb-object-picker\r\n                [value]=\"transform().objectType\"\r\n                label=\"Tipo dell\u2019oggetto\"\r\n                placeholder=\"Scrivi o scegli un oggetto\"\r\n                (valueChange)=\"setObjectType($event ?? '')\"\r\n              />\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <label class=\"fb-check fb-tr__collection\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [checked]=\"transform().isCollection === true\"\r\n            (change)=\"setIsCollection($any($event.target).checked)\"\r\n          />\r\n          Collection\r\n        </label>\r\n      </div>\r\n\r\n      @if (!transform().dataType) {\r\n        <p class=\"fb-field__error\">Obbligatorio (TRANSFORM_DATA_TYPE_MISSING).</p>\r\n      }\r\n      @if (missingObjectType()) {\r\n        <p class=\"fb-field__error\">\r\n          La classe e\u2019 obbligatoria: senza, l\u2019attivazione e\u2019 bloccata (OBJECT_TYPE_MISSING).\r\n        </p>\r\n      }\r\n      @if (targetUndeclared()) {\r\n        <p class=\"fb-callout fb-callout--warn\">\r\n          Il catalogo non dichiara i {{ isStructureTarget() ? 'membri' : 'campi' }} di\r\n          <code>{{ transform().objectType }}</code>: le destinazioni si scrivono a mano, e nessuna di\r\n          esse viene accusata di non esistere.\r\n        </p>\r\n      }\r\n    </div>\r\n\r\n    <ul class=\"fb-tr__list fb-tr__rows\">\r\n      @for (row of targets(); track row.key) {\r\n        <!--\r\n          `data-fb-slot` e' cio' che il rilascio cerca: il bersaglio lo calcola `hitTest` dal DOM,\r\n          non una drop list del CDK.\r\n        -->\r\n        <li\r\n          class=\"fb-tr__row\"\r\n          [attr.data-fb-slot]=\"row.key\"\r\n          [class.fb-tr__row--selected]=\"isSelected(row)\"\r\n          [class.fb-tr__row--drop]=\"dropKey() === row.key\"\r\n          [class.fb-tr__row--empty]=\"row.index < 0\"\r\n        >\r\n          <button type=\"button\" class=\"fb-tr__row-main\" (click)=\"select(row.key)\">\r\n            <span class=\"fb-tr__op\" [attr.title]=\"operationLabel(operationOf(row))\" aria-hidden=\"true\">\r\n              {{ operationIcon(row) }}\r\n            </span>\r\n            <span class=\"fb-tr__row-text\">\r\n              <span class=\"fb-tr__row-name\">\r\n                {{ row.label }}\r\n                @if (row.isCollection) {\r\n                  <span class=\"fb-tr__badge\" aria-label=\"collection\">[ ]</span>\r\n                }\r\n                @if (row.isUnknown) {\r\n                  <span class=\"fb-tr__badge fb-tr__badge--warn\">fuori catalogo</span>\r\n                }\r\n              </span>\r\n              @if (row.index < 0) {\r\n                <span class=\"fb-tr__row-src fb-tr__row-src--empty\">non mappata</span>\r\n              } @else if (sourceSummary(row)) {\r\n                <span class=\"fb-tr__row-src\">\u2190 {{ sourceSummary(row) }}</span>\r\n              } @else {\r\n                <span class=\"fb-tr__row-src fb-tr__row-src--empty\">sorgente da indicare</span>\r\n              }\r\n            </span>\r\n            @if (row.dataType) {\r\n              <span class=\"fb-tr__row-type\">{{ row.dataType }}</span>\r\n            }\r\n            @if (issuesOf(row).length) {\r\n              <span class=\"fb-tr__row-issue\" [attr.title]=\"issuesOf(row)[0].message\">!</span>\r\n            }\r\n          </button>\r\n          @if (row.index >= 0) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-btn fb-btn--ghost fb-btn--icon\"\r\n              [attr.aria-label]=\"'Togli la mappatura di ' + row.label\"\r\n              (click)=\"removeAction(row)\"\r\n            >\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </li>\r\n      } @empty {\r\n        <li class=\"fb-empty\">\r\n          Nessuna trasformazione: l\u2019elemento non produce nulla (TRANSFORM_WITHOUT_VALUES).\r\n        </li>\r\n      }\r\n    </ul>\r\n\r\n    <button type=\"button\" class=\"fb-btn\" (click)=\"addAction()\">\r\n      {{ hasTargetCatalog() ? 'Aggiungi una destinazione fuori catalogo' : 'Aggiungi trasformazione' }}\r\n    </button>\r\n\r\n    <p class=\"fb-callout\">\r\n      Il risultato e\u2019 l\u2019<strong>output automatico</strong> dell\u2019elemento: si referenzia con\r\n      <code>{{ name() }}</code>.\r\n    </p>\r\n  </section>\r\n\r\n  <!-- ============================================================ dettaglio -->\r\n  <aside class=\"fb-tr__panel fb-tr__detail\" aria-label=\"Dettaglio della mappatura\">\r\n    @if (selected(); as row) {\r\n      <h3 class=\"fb-tr__panel-title\">{{ row.label }}</h3>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Operazione</label>\r\n        <div class=\"fb-tr__modes\" role=\"group\" aria-label=\"Operazione\">\r\n          @for (type of transformTypes(); track type.value) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-tr__mode\"\r\n              [class.fb-tr__mode--active]=\"operationOf(row) === type.value\"\r\n              (click)=\"setOperation(row, type.value)\"\r\n            >\r\n              {{ type.label }}\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label fb-field__label--required\">\r\n          {{ isStructureTarget() ? 'Membro di destinazione' : 'Campo di destinazione' }}\r\n        </label>\r\n        @if (isStructureTarget()) {\r\n          <!-- Solo i membri scrivibili: un membro calcolato e' TARGET_NOT_WRITABLE (\u00A74.7). -->\r\n          <fb-structure-member-picker\r\n            [value]=\"row.field\"\r\n            [className]=\"transform().objectType\"\r\n            usage=\"writable\"\r\n            label=\"Membro di destinazione\"\r\n            (valueChange)=\"setOutputField(row, $event ?? '')\"\r\n          />\r\n        } @else if (targetObject()) {\r\n          <!-- Il risultato e' un record: le destinazioni sono i campi della sua entita' (\u00A74.4). -->\r\n          <fb-field-picker\r\n            [value]=\"row.field\"\r\n            [object]=\"targetObject()\"\r\n            label=\"Campo di destinazione\"\r\n            (valueChange)=\"setOutputField(row, $event ?? '')\"\r\n          />\r\n        } @else {\r\n          <input\r\n            class=\"fb-input\"\r\n            [value]=\"row.field\"\r\n            placeholder=\"Totale\"\r\n            (input)=\"setOutputField(row, $any($event.target).value)\"\r\n          />\r\n        }\r\n      </div>\r\n\r\n      @if (isMap(row)) {\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">Valore</label>\r\n          <!--\r\n            Il tipo di cio' che si scrive guida il controllo: su un campo o un membro Enum i valori\r\n            proponibili sono quelli del suo tipo (\u00A74.6).\r\n          -->\r\n          <fb-value-editor\r\n            [value]=\"row.action?.value ?? undefined\"\r\n            label=\"Valore\"\r\n            [dataType]=\"mapDataType(row)\"\r\n            [objectType]=\"mapObjectType(row)\"\r\n            (valueChange)=\"setMapValue(row, $event)\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      @if (needsAggregationValues(row)) {\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label fb-field__label--required\">Collection su cui aggregare</label>\r\n          <fb-reference-picker\r\n            [value]=\"aggregationCollection(row.action)\"\r\n            [isCollection]=\"true\"\r\n            placeholder=\"Scegli una collection\"\r\n            (valueChange)=\"setAggregationCollection(row, $event)\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      @if (needsAggregationField(row)) {\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label fb-field__label--required\">Campo da sommare</label>\r\n          <!--\r\n            Nel documento va il **nome** del campo (`stringValue`, \u00A75.13); dove il tipo della\r\n            collection e' noto, il nome lo si sceglie da un elenco invece di ricordarlo.\r\n          -->\r\n          @if (aggregationObject(row); as object) {\r\n            <fb-field-picker\r\n              [value]=\"aggregationField(row.action)\"\r\n              [object]=\"object\"\r\n              label=\"Campo da sommare\"\r\n              (valueChange)=\"setAggregationField(row, $event ?? '')\"\r\n            />\r\n          } @else if (aggregationClass(row); as className) {\r\n            <fb-structure-member-picker\r\n              [value]=\"aggregationField(row.action)\"\r\n              [className]=\"className\"\r\n              label=\"Membro da sommare\"\r\n              (valueChange)=\"setAggregationField(row, $event ?? '')\"\r\n            />\r\n          } @else {\r\n            <input\r\n              class=\"fb-input\"\r\n              [value]=\"aggregationField(row.action)\"\r\n              placeholder=\"Importo\"\r\n              (input)=\"setAggregationField(row, $any($event.target).value)\"\r\n            />\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @for (issue of issuesOf(row); track $index) {\r\n        <p class=\"fb-callout fb-callout--error\">{{ issue.message }} ({{ issue.code }})</p>\r\n      }\r\n    } @else {\r\n      <p class=\"fb-tr__hint\">\r\n        Scegli il tipo del risultato: le destinazioni compaiono da l\u00EC, e la mappatura si fa\r\n        trascinando una sorgente su una di esse.\r\n      </p>\r\n    }\r\n  </aside>\r\n</div>\r\n\r\n<fb-connector-editor\r\n  [nodeName]=\"name()\"\r\n  [node]=\"node()\"\r\n  [outlets]=\"outlets()\"\r\n  (connectorChanged)=\"onConnectorChanged($event)\"\r\n/>\r\n", styles: [":host{display:block;container-type:inline-size}.fb-tr{display:grid;grid-template-columns:240px minmax(0,1fr) 320px;gap:12px;align-items:start;margin-bottom:14px}@container (max-width: 1040px){.fb-tr{grid-template-columns:minmax(0,1fr)}}.fb-tr__panel{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-tr__map{background:var(--fb-surface, #fff)}.fb-tr__panel-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fb-text-subtle, #98a2b3);overflow-wrap:anywhere}.fb-tr__count{font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--fb-text-muted, #6b7086)}.fb-tr__hint{margin:6px 0;font-size:11px;line-height:1.45;color:var(--fb-text-muted, #6b7086)}.fb-tr__search{margin-bottom:6px}.fb-tr__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin-bottom:6px}.fb-tr__crumb{padding:2px 4px;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-accent, #4f6ef7);font:inherit;font-size:11px;cursor:pointer}.fb-tr__crumb:hover{background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 10%,transparent)}.fb-tr__crumb-sep{color:var(--fb-text-subtle, #98a2b3);font-size:11px}.fb-tr__list{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;max-height:340px;overflow-y:auto;overscroll-behavior:contain;list-style:none}.fb-tr__empty{padding:8px;border:1px dashed var(--fb-border, #d6dae1);border-radius:var(--fb-radius-xs, 6px);font-size:11px;line-height:1.45;color:var(--fb-text-muted, #667085)}.fb-tr__source-row{display:flex;align-items:stretch;gap:2px}.fb-tr__source{display:flex;flex:1;flex-direction:column;gap:1px;min-width:0;padding:5px 8px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff);color:var(--fb-text, #1a1c23);font:inherit;font-size:12px;text-align:left;cursor:grab}.fb-tr__source:hover{border-color:var(--fb-accent, #4f6ef7)}.fb-tr__source--dragging{opacity:.6}.fb-tr__source-name,.fb-tr__source-detail{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-tr__source-detail{font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-tr__enter{flex:none}.fb-tr__badge{margin-left:4px;padding:0 4px;border-radius:4px;background:var(--fb-surface-sunken, #eef0f4);font-size:9px;font-weight:700;color:var(--fb-text-muted, #6b7086)}.fb-tr__badge--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-tr__result{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--fb-border-subtle, #eef0f4)}.fb-tr__collection{align-self:end;padding-bottom:6px;white-space:nowrap}.fb-tr__rows{max-height:420px;margin-bottom:8px}.fb-tr__row{display:flex;align-items:stretch;gap:2px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff)}.fb-tr__row--empty{border-style:dashed;background:var(--fb-surface-alt, #f7f8fa)}.fb-tr__row--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:0 0 0 1px var(--fb-accent, #4f6ef7) inset}.fb-tr__row--drop{border-color:var(--fb-accent, #4f6ef7);border-style:solid;background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 12%,transparent)}.fb-tr__row-main{display:flex;flex:1;align-items:center;gap:8px;min-width:0;padding:6px 8px;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text, #1a1c23);font:inherit;text-align:left;cursor:pointer}.fb-tr__op{display:grid;flex:none;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--fb-surface-sunken, #eef0f4);font-size:11px;font-weight:700;color:var(--fb-text-muted, #6b7086)}.fb-tr__row-text{display:flex;flex:1;flex-direction:column;gap:1px;min-width:0}.fb-tr__row-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600}.fb-tr__row-src{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:var(--fb-text-muted, #6b7086)}.fb-tr__row-src--empty{color:var(--fb-text-subtle, #98a2b3);font-style:italic}.fb-tr__row-type{flex:none;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-tr__row-issue{display:grid;flex:none;place-items:center;width:16px;height:16px;border-radius:50%;background:color-mix(in srgb,var(--fb-error, #dc2626) 14%,transparent);font-size:10px;font-weight:700;color:var(--fb-error, #dc2626)}.fb-tr__modes{margin-top:2px}\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: "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: ObjectPickerComponent, selector: "fb-object-picker", inputs: ["value", "label", "placeholder", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: ReferencePickerComponent, selector: "fb-reference-picker", inputs: ["value", "label", "placeholder", "disabled", "dataType", "isCollection", "objectType", "writableOnly", "elementsOnly", "extraReferences"], outputs: ["valueChange"] }, { kind: "component", type: StructureMemberPickerComponent, selector: "fb-structure-member-picker", inputs: ["value", "className", "usage", "label", "placeholder", "disabled"], outputs: ["valueChange"] }, { 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", "valueSet", "disabled", "allowFormula"], outputs: ["valueChange"] }, { kind: "directive", type: SelectValueDirective, selector: "select[fbValue]", inputs: ["fbValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: TransformInspectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fb-transform-inspector', standalone: true, imports: [
+                        CdkDrag,
                         ConnectorEditorComponent,
+                        FieldPickerComponent,
                         ObjectPickerComponent,
                         ReferencePickerComponent,
                         StructureMemberPickerComponent,
                         StructurePickerComponent,
                         ValueEditorComponent,
                         SelectValueDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-field\">\r\n  <label class=\"fb-field__label fb-field__label--required\">Tipo del risultato</label>\r\n  <select class=\"fb-select\" [fbValue]=\"transform().dataType || ''\" (change)=\"setDataType($any($event.target).value)\">\r\n    <option value=\"\">\u2014 scegli \u2014</option>\r\n    @for (type of dataTypes(); track type.value) {\r\n      <option [value]=\"type.value\">{{ type.label }}</option>\r\n    }\r\n  </select>\r\n  @if (!transform().dataType) {\r\n    <p class=\"fb-field__error\">Obbligatorio (TRANSFORM_DATA_TYPE_MISSING).</p>\r\n  }\r\n</div>\r\n\r\n@if (requiresObjectType()) {\r\n  <div class=\"fb-field\">\r\n    <label class=\"fb-field__label fb-field__label--required\">\r\n      {{ isStructureTarget() ? 'Classe del risultato' : 'Tipo dell\u2019oggetto' }}\r\n    </label>\r\n    @if (isStructureTarget()) {\r\n      <!-- \u00A74.7: una classe del backend. Le destinazioni delle azioni sono i suoi membri. -->\r\n      <fb-structure-picker\r\n        [value]=\"transform().objectType\"\r\n        label=\"Classe del risultato\"\r\n        (valueChange)=\"setObjectType($event ?? '')\"\r\n      />\r\n      @if (missingObjectType()) {\r\n        <p class=\"fb-field__error\">\r\n          La classe e\u2019 obbligatoria: senza, l\u2019attivazione e\u2019 bloccata (OBJECT_TYPE_MISSING).\r\n        </p>\r\n      } @else {\r\n        <p class=\"fb-field__hint\">\r\n          Componi l\u2019istanza intera qui: ogni trasformazione scrive un <strong>membro</strong> della classe,\r\n          invece di un Assignment per membro.\r\n        </p>\r\n      }\r\n    } @else if (transform().dataType === 'Enum') {\r\n      <!-- Le enumerazioni sono un dizionario chiuso: non c'e' scrittura libera da concedere. -->\r\n      <select\r\n        class=\"fb-select\"\r\n        [fbValue]=\"transform().objectType || ''\"\r\n        (change)=\"setObjectType($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    } @else {\r\n      <fb-object-picker\r\n        [value]=\"transform().objectType\"\r\n        label=\"Tipo dell\u2019oggetto\"\r\n        placeholder=\"Scrivi o scegli un oggetto\"\r\n        (valueChange)=\"setObjectType($event ?? '')\"\r\n      />\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]=\"transform().isCollection === true\"\r\n    (change)=\"setIsCollection($any($event.target).checked)\"\r\n  />\r\n  Il risultato e\u2019 una collection\r\n</label>\r\n\r\n<p class=\"fb-callout\">\r\n  Il risultato e\u2019 l\u2019<strong>output automatico</strong> dell\u2019elemento: si referenzia con\r\n  <code>{{ name() }}</code>.\r\n</p>\r\n\r\n<fieldset class=\"fb-section\">\r\n  <legend class=\"fb-section__title\">Trasformazioni</legend>\r\n\r\n  <div class=\"fb-list\">\r\n    @for (action of actions(); track $index) {\r\n      <div class=\"fb-list__item\">\r\n        <div class=\"fb-list__header\">\r\n          <span class=\"fb-list__index\">{{ $index + 1 }}</span>\r\n          <span class=\"fb-list__spacer\"></span>\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-btn fb-btn--ghost fb-btn--icon\"\r\n            aria-label=\"Rimuovi\"\r\n            (click)=\"removeAction($index)\"\r\n          >\r\n            \u00D7\r\n          </button>\r\n        </div>\r\n\r\n        <!-- Operazione, destinazione e sorgente sono una frase sola: si leggono in riga. -->\r\n        <div class=\"fb-fields-row\">\r\n          <div class=\"fb-field fb-field--compact\">\r\n            <label class=\"fb-field__label\">Operazione</label>\r\n            <select\r\n              class=\"fb-select\"\r\n              [fbValue]=\"action.transformType || 'Map'\"\r\n              (change)=\"setActionType($index, $any($event.target).value)\"\r\n            >\r\n              @for (type of transformTypes(); track type.value) {\r\n                <option [value]=\"type.value\">{{ type.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 fb-field__label--required\">\r\n              {{ isStructureTarget() ? 'Membro di destinazione' : 'Campo di destinazione' }}\r\n            </label>\r\n            @if (isStructureTarget()) {\r\n              <!-- Solo i membri scrivibili: un membro calcolato e' TARGET_NOT_WRITABLE (\u00A74.7). -->\r\n              <fb-structure-member-picker\r\n                [value]=\"action.outputFieldApiName\"\r\n                [className]=\"transform().objectType\"\r\n                usage=\"writable\"\r\n                label=\"Membro di destinazione\"\r\n                (valueChange)=\"setOutputField($index, $event ?? '')\"\r\n              />\r\n            } @else {\r\n              <input\r\n                class=\"fb-input\"\r\n                [value]=\"action.outputFieldApiName || ''\"\r\n                placeholder=\"Totale\"\r\n                (input)=\"setOutputField($index, $any($event.target).value)\"\r\n              />\r\n            }\r\n          </div>\r\n\r\n          @if (isMap(action)) {\r\n            <div class=\"fb-field\">\r\n              <label class=\"fb-field__label\">Valore</label>\r\n              <!--\r\n                Il tipo di cio' che si scrive guida il controllo: su un membro Enum i valori\r\n                proponibili sono quelli del suo tipo (\u00A74.6).\r\n              -->\r\n              <fb-value-editor\r\n                [value]=\"action.value\"\r\n                label=\"Valore\"\r\n                [dataType]=\"$any(mapDataType(action))\"\r\n                [objectType]=\"mapObjectType(action)\"\r\n                (valueChange)=\"setMapValue($index, $event)\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          @if (needsAggregationValues(action)) {\r\n            <div class=\"fb-field\">\r\n              <label class=\"fb-field__label fb-field__label--required\">Collection su cui aggregare</label>\r\n              <fb-reference-picker\r\n                [value]=\"aggregationCollection(action)\"\r\n                [isCollection]=\"true\"\r\n                placeholder=\"Scegli una collection\"\r\n                (valueChange)=\"setAggregationCollection($index, $event)\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          @if (needsAggregationField(action)) {\r\n            <div class=\"fb-field\">\r\n              <label class=\"fb-field__label fb-field__label--required\">Campo da sommare</label>\r\n              <input\r\n                class=\"fb-input\"\r\n                [value]=\"aggregationField(action)\"\r\n                placeholder=\"Importo\"\r\n                (input)=\"setAggregationField($index, $any($event.target).value)\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    } @empty {\r\n      <p class=\"fb-empty\">Nessuna trasformazione: l\u2019elemento non produce nulla (TRANSFORM_WITHOUT_VALUES).</p>\r\n    }\r\n  </div>\r\n\r\n  <button type=\"button\" class=\"fb-btn\" (click)=\"addAction()\">Aggiungi trasformazione</button>\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" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-tr\">\r\n  <!-- ============================================================ sorgenti -->\r\n  <aside class=\"fb-tr__panel\" aria-label=\"Sorgenti\">\r\n    <h3 class=\"fb-tr__panel-title\">Sorgenti</h3>\r\n\r\n    <input\r\n      class=\"fb-input fb-tr__search\"\r\n      type=\"search\"\r\n      placeholder=\"Cerca una sorgente\"\r\n      aria-label=\"Cerca una sorgente\"\r\n      [value]=\"sourceQuery()\"\r\n      (input)=\"sourceQuery.set($any($event.target).value)\"\r\n    />\r\n\r\n    @if (sourceCrumbs().length) {\r\n      <nav class=\"fb-tr__crumbs\" aria-label=\"Percorso della sorgente\">\r\n        <button type=\"button\" class=\"fb-tr__crumb\" (click)=\"enterSource('')\">Tutte</button>\r\n        @for (crumb of sourceCrumbs(); track crumb.path) {\r\n          <span class=\"fb-tr__crumb-sep\" aria-hidden=\"true\">\u203A</span>\r\n          <button type=\"button\" class=\"fb-tr__crumb\" (click)=\"enterSource(crumb.path)\">{{ crumb.label }}</button>\r\n        }\r\n      </nav>\r\n    }\r\n\r\n    <p class=\"fb-tr__hint\">\r\n      Trascina su una destinazione, oppure clicca per mapparla su quella selezionata.\r\n    </p>\r\n\r\n    @if (sourceError()) {\r\n      <p class=\"fb-callout fb-callout--warn\">\r\n        {{ sourceError() }} Le sorgenti si scrivono a mano nel dettaglio: l\u2019elenco non c\u2019e\u2019, i\r\n        riferimenti s\u00EC.\r\n      </p>\r\n    }\r\n\r\n    <ul class=\"fb-tr__list\">\r\n      @for (source of sources(); track source.path) {\r\n        <li class=\"fb-tr__source-row\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-tr__source\"\r\n            cdkDrag\r\n            [class.fb-tr__source--dragging]=\"draggingPath() === source.path\"\r\n            [title]=\"source.path + (source.detail ? ' \u00B7 ' + source.detail : '')\"\r\n            (cdkDragStarted)=\"onSourceDragStarted(source)\"\r\n            (cdkDragMoved)=\"onSourceDragMoved($event)\"\r\n            (cdkDragEnded)=\"onSourceDragEnded($event, source)\"\r\n            (click)=\"mapToSelected(source)\"\r\n          >\r\n            <span class=\"fb-tr__source-name\">\r\n              {{ source.label }}\r\n              @if (source.isCollection) {\r\n                <span class=\"fb-tr__badge\" aria-label=\"collection\">[ ]</span>\r\n              }\r\n            </span>\r\n            @if (source.detail) {\r\n              <span class=\"fb-tr__source-detail\">{{ source.detail }}</span>\r\n            }\r\n          </button>\r\n          @if (source.canEnter) {\r\n            <!-- Entrare e mappare sono due gesti diversi: un record intero e' una sorgente valida. -->\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-btn fb-btn--ghost fb-btn--icon fb-tr__enter\"\r\n              [attr.aria-label]=\"'Entra in ' + source.label\"\r\n              (click)=\"enterSource(source.path)\"\r\n            >\r\n              \u203A\r\n            </button>\r\n          }\r\n        </li>\r\n      } @empty {\r\n        @if (sourcePending()) {\r\n          <li class=\"fb-tr__empty\">Caricamento\u2026</li>\r\n        } @else if (sourceUndeclared()) {\r\n          <li class=\"fb-tr__empty\">\r\n            Il catalogo non dichiara cosa c\u2019e\u2019 qui dentro: non significa che non ci sia niente. Il\r\n            percorso si scrive a mano nel dettaglio.\r\n          </li>\r\n        } @else {\r\n          <li class=\"fb-tr__empty\">Nessuna sorgente con questo nome.</li>\r\n        }\r\n      }\r\n    </ul>\r\n  </aside>\r\n\r\n  <!-- ========================================================= destinazione -->\r\n  <section class=\"fb-tr__panel fb-tr__map\" aria-label=\"Destinazione\">\r\n    <h3 class=\"fb-tr__panel-title\">\r\n      Destinazione\r\n      @if (slotCount()) {\r\n        <span class=\"fb-tr__count\">{{ mappedCount() }} di {{ slotCount() }} mappate</span>\r\n      } @else if (mappedCount()) {\r\n        <span class=\"fb-tr__count\">{{ mappedCount() }} mappate</span>\r\n      }\r\n    </h3>\r\n\r\n    <!-- Il tipo del risultato e' la forma della colonna: sta in cima, non in fondo. -->\r\n    <div class=\"fb-tr__result\">\r\n      <div class=\"fb-fields-row\">\r\n        <div class=\"fb-field fb-field--compact\">\r\n          <label class=\"fb-field__label fb-field__label--required\">Tipo del risultato</label>\r\n          <select\r\n            class=\"fb-select\"\r\n            [fbValue]=\"transform().dataType || ''\"\r\n            (change)=\"setDataType($any($event.target).value)\"\r\n          >\r\n            <option value=\"\">\u2014 scegli \u2014</option>\r\n            @for (type of dataTypes(); track type.value) {\r\n              <option [value]=\"type.value\">{{ type.label }}</option>\r\n            }\r\n          </select>\r\n        </div>\r\n\r\n        @if (requiresObjectType()) {\r\n          <div class=\"fb-field\">\r\n            <label class=\"fb-field__label fb-field__label--required\">\r\n              {{ isStructureTarget() ? 'Classe del risultato' : 'Tipo dell\u2019oggetto' }}\r\n            </label>\r\n            @if (isStructureTarget()) {\r\n              <!-- \u00A74.7: una classe del backend. Le destinazioni delle azioni sono i suoi membri. -->\r\n              <fb-structure-picker\r\n                [value]=\"transform().objectType\"\r\n                label=\"Classe del risultato\"\r\n                (valueChange)=\"setObjectType($event ?? '')\"\r\n              />\r\n            } @else if (transform().dataType === 'Enum') {\r\n              <!-- Le enumerazioni sono un dizionario chiuso: non c'e' scrittura libera da concedere. -->\r\n              <select\r\n                class=\"fb-select\"\r\n                [fbValue]=\"transform().objectType || ''\"\r\n                (change)=\"setObjectType($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            } @else {\r\n              <fb-object-picker\r\n                [value]=\"transform().objectType\"\r\n                label=\"Tipo dell\u2019oggetto\"\r\n                placeholder=\"Scrivi o scegli un oggetto\"\r\n                (valueChange)=\"setObjectType($event ?? '')\"\r\n              />\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <label class=\"fb-check fb-tr__collection\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [checked]=\"transform().isCollection === true\"\r\n            (change)=\"setIsCollection($any($event.target).checked)\"\r\n          />\r\n          Collection\r\n        </label>\r\n      </div>\r\n\r\n      @if (!transform().dataType) {\r\n        <p class=\"fb-field__error\">Obbligatorio (TRANSFORM_DATA_TYPE_MISSING).</p>\r\n      }\r\n      @if (missingObjectType()) {\r\n        <p class=\"fb-field__error\">\r\n          La classe e\u2019 obbligatoria: senza, l\u2019attivazione e\u2019 bloccata (OBJECT_TYPE_MISSING).\r\n        </p>\r\n      }\r\n      @if (targetUndeclared()) {\r\n        <p class=\"fb-callout fb-callout--warn\">\r\n          Il catalogo non dichiara i {{ isStructureTarget() ? 'membri' : 'campi' }} di\r\n          <code>{{ transform().objectType }}</code>: le destinazioni si scrivono a mano, e nessuna di\r\n          esse viene accusata di non esistere.\r\n        </p>\r\n      }\r\n    </div>\r\n\r\n    <ul class=\"fb-tr__list fb-tr__rows\">\r\n      @for (row of targets(); track row.key) {\r\n        <!--\r\n          `data-fb-slot` e' cio' che il rilascio cerca: il bersaglio lo calcola `hitTest` dal DOM,\r\n          non una drop list del CDK.\r\n        -->\r\n        <li\r\n          class=\"fb-tr__row\"\r\n          [attr.data-fb-slot]=\"row.key\"\r\n          [class.fb-tr__row--selected]=\"isSelected(row)\"\r\n          [class.fb-tr__row--drop]=\"dropKey() === row.key\"\r\n          [class.fb-tr__row--empty]=\"row.index < 0\"\r\n        >\r\n          <button type=\"button\" class=\"fb-tr__row-main\" (click)=\"select(row.key)\">\r\n            <span class=\"fb-tr__op\" [attr.title]=\"operationLabel(operationOf(row))\" aria-hidden=\"true\">\r\n              {{ operationIcon(row) }}\r\n            </span>\r\n            <span class=\"fb-tr__row-text\">\r\n              <span class=\"fb-tr__row-name\">\r\n                {{ row.label }}\r\n                @if (row.isCollection) {\r\n                  <span class=\"fb-tr__badge\" aria-label=\"collection\">[ ]</span>\r\n                }\r\n                @if (row.isUnknown) {\r\n                  <span class=\"fb-tr__badge fb-tr__badge--warn\">fuori catalogo</span>\r\n                }\r\n              </span>\r\n              @if (row.index < 0) {\r\n                <span class=\"fb-tr__row-src fb-tr__row-src--empty\">non mappata</span>\r\n              } @else if (sourceSummary(row)) {\r\n                <span class=\"fb-tr__row-src\">\u2190 {{ sourceSummary(row) }}</span>\r\n              } @else {\r\n                <span class=\"fb-tr__row-src fb-tr__row-src--empty\">sorgente da indicare</span>\r\n              }\r\n            </span>\r\n            @if (row.dataType) {\r\n              <span class=\"fb-tr__row-type\">{{ row.dataType }}</span>\r\n            }\r\n            @if (issuesOf(row).length) {\r\n              <span class=\"fb-tr__row-issue\" [attr.title]=\"issuesOf(row)[0].message\">!</span>\r\n            }\r\n          </button>\r\n          @if (row.index >= 0) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-btn fb-btn--ghost fb-btn--icon\"\r\n              [attr.aria-label]=\"'Togli la mappatura di ' + row.label\"\r\n              (click)=\"removeAction(row)\"\r\n            >\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </li>\r\n      } @empty {\r\n        <li class=\"fb-empty\">\r\n          Nessuna trasformazione: l\u2019elemento non produce nulla (TRANSFORM_WITHOUT_VALUES).\r\n        </li>\r\n      }\r\n    </ul>\r\n\r\n    <button type=\"button\" class=\"fb-btn\" (click)=\"addAction()\">\r\n      {{ hasTargetCatalog() ? 'Aggiungi una destinazione fuori catalogo' : 'Aggiungi trasformazione' }}\r\n    </button>\r\n\r\n    <p class=\"fb-callout\">\r\n      Il risultato e\u2019 l\u2019<strong>output automatico</strong> dell\u2019elemento: si referenzia con\r\n      <code>{{ name() }}</code>.\r\n    </p>\r\n  </section>\r\n\r\n  <!-- ============================================================ dettaglio -->\r\n  <aside class=\"fb-tr__panel fb-tr__detail\" aria-label=\"Dettaglio della mappatura\">\r\n    @if (selected(); as row) {\r\n      <h3 class=\"fb-tr__panel-title\">{{ row.label }}</h3>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label\">Operazione</label>\r\n        <div class=\"fb-tr__modes\" role=\"group\" aria-label=\"Operazione\">\r\n          @for (type of transformTypes(); track type.value) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"fb-tr__mode\"\r\n              [class.fb-tr__mode--active]=\"operationOf(row) === type.value\"\r\n              (click)=\"setOperation(row, type.value)\"\r\n            >\r\n              {{ type.label }}\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"fb-field\">\r\n        <label class=\"fb-field__label fb-field__label--required\">\r\n          {{ isStructureTarget() ? 'Membro di destinazione' : 'Campo di destinazione' }}\r\n        </label>\r\n        @if (isStructureTarget()) {\r\n          <!-- Solo i membri scrivibili: un membro calcolato e' TARGET_NOT_WRITABLE (\u00A74.7). -->\r\n          <fb-structure-member-picker\r\n            [value]=\"row.field\"\r\n            [className]=\"transform().objectType\"\r\n            usage=\"writable\"\r\n            label=\"Membro di destinazione\"\r\n            (valueChange)=\"setOutputField(row, $event ?? '')\"\r\n          />\r\n        } @else if (targetObject()) {\r\n          <!-- Il risultato e' un record: le destinazioni sono i campi della sua entita' (\u00A74.4). -->\r\n          <fb-field-picker\r\n            [value]=\"row.field\"\r\n            [object]=\"targetObject()\"\r\n            label=\"Campo di destinazione\"\r\n            (valueChange)=\"setOutputField(row, $event ?? '')\"\r\n          />\r\n        } @else {\r\n          <input\r\n            class=\"fb-input\"\r\n            [value]=\"row.field\"\r\n            placeholder=\"Totale\"\r\n            (input)=\"setOutputField(row, $any($event.target).value)\"\r\n          />\r\n        }\r\n      </div>\r\n\r\n      @if (isMap(row)) {\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label\">Valore</label>\r\n          <!--\r\n            Il tipo di cio' che si scrive guida il controllo: su un campo o un membro Enum i valori\r\n            proponibili sono quelli del suo tipo (\u00A74.6).\r\n          -->\r\n          <fb-value-editor\r\n            [value]=\"row.action?.value ?? undefined\"\r\n            label=\"Valore\"\r\n            [dataType]=\"mapDataType(row)\"\r\n            [objectType]=\"mapObjectType(row)\"\r\n            (valueChange)=\"setMapValue(row, $event)\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      @if (needsAggregationValues(row)) {\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label fb-field__label--required\">Collection su cui aggregare</label>\r\n          <fb-reference-picker\r\n            [value]=\"aggregationCollection(row.action)\"\r\n            [isCollection]=\"true\"\r\n            placeholder=\"Scegli una collection\"\r\n            (valueChange)=\"setAggregationCollection(row, $event)\"\r\n          />\r\n        </div>\r\n      }\r\n\r\n      @if (needsAggregationField(row)) {\r\n        <div class=\"fb-field\">\r\n          <label class=\"fb-field__label fb-field__label--required\">Campo da sommare</label>\r\n          <!--\r\n            Nel documento va il **nome** del campo (`stringValue`, \u00A75.13); dove il tipo della\r\n            collection e' noto, il nome lo si sceglie da un elenco invece di ricordarlo.\r\n          -->\r\n          @if (aggregationObject(row); as object) {\r\n            <fb-field-picker\r\n              [value]=\"aggregationField(row.action)\"\r\n              [object]=\"object\"\r\n              label=\"Campo da sommare\"\r\n              (valueChange)=\"setAggregationField(row, $event ?? '')\"\r\n            />\r\n          } @else if (aggregationClass(row); as className) {\r\n            <fb-structure-member-picker\r\n              [value]=\"aggregationField(row.action)\"\r\n              [className]=\"className\"\r\n              label=\"Membro da sommare\"\r\n              (valueChange)=\"setAggregationField(row, $event ?? '')\"\r\n            />\r\n          } @else {\r\n            <input\r\n              class=\"fb-input\"\r\n              [value]=\"aggregationField(row.action)\"\r\n              placeholder=\"Importo\"\r\n              (input)=\"setAggregationField(row, $any($event.target).value)\"\r\n            />\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @for (issue of issuesOf(row); track $index) {\r\n        <p class=\"fb-callout fb-callout--error\">{{ issue.message }} ({{ issue.code }})</p>\r\n      }\r\n    } @else {\r\n      <p class=\"fb-tr__hint\">\r\n        Scegli il tipo del risultato: le destinazioni compaiono da l\u00EC, e la mappatura si fa\r\n        trascinando una sorgente su una di esse.\r\n      </p>\r\n    }\r\n  </aside>\r\n</div>\r\n\r\n<fb-connector-editor\r\n  [nodeName]=\"name()\"\r\n  [node]=\"node()\"\r\n  [outlets]=\"outlets()\"\r\n  (connectorChanged)=\"onConnectorChanged($event)\"\r\n/>\r\n", styles: [":host{display:block;container-type:inline-size}.fb-tr{display:grid;grid-template-columns:240px minmax(0,1fr) 320px;gap:12px;align-items:start;margin-bottom:14px}@container (max-width: 1040px){.fb-tr{grid-template-columns:minmax(0,1fr)}}.fb-tr__panel{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-tr__map{background:var(--fb-surface, #fff)}.fb-tr__panel-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fb-text-subtle, #98a2b3);overflow-wrap:anywhere}.fb-tr__count{font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--fb-text-muted, #6b7086)}.fb-tr__hint{margin:6px 0;font-size:11px;line-height:1.45;color:var(--fb-text-muted, #6b7086)}.fb-tr__search{margin-bottom:6px}.fb-tr__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin-bottom:6px}.fb-tr__crumb{padding:2px 4px;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-accent, #4f6ef7);font:inherit;font-size:11px;cursor:pointer}.fb-tr__crumb:hover{background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 10%,transparent)}.fb-tr__crumb-sep{color:var(--fb-text-subtle, #98a2b3);font-size:11px}.fb-tr__list{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;max-height:340px;overflow-y:auto;overscroll-behavior:contain;list-style:none}.fb-tr__empty{padding:8px;border:1px dashed var(--fb-border, #d6dae1);border-radius:var(--fb-radius-xs, 6px);font-size:11px;line-height:1.45;color:var(--fb-text-muted, #667085)}.fb-tr__source-row{display:flex;align-items:stretch;gap:2px}.fb-tr__source{display:flex;flex:1;flex-direction:column;gap:1px;min-width:0;padding:5px 8px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff);color:var(--fb-text, #1a1c23);font:inherit;font-size:12px;text-align:left;cursor:grab}.fb-tr__source:hover{border-color:var(--fb-accent, #4f6ef7)}.fb-tr__source--dragging{opacity:.6}.fb-tr__source-name,.fb-tr__source-detail{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-tr__source-detail{font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-tr__enter{flex:none}.fb-tr__badge{margin-left:4px;padding:0 4px;border-radius:4px;background:var(--fb-surface-sunken, #eef0f4);font-size:9px;font-weight:700;color:var(--fb-text-muted, #6b7086)}.fb-tr__badge--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-tr__result{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--fb-border-subtle, #eef0f4)}.fb-tr__collection{align-self:end;padding-bottom:6px;white-space:nowrap}.fb-tr__rows{max-height:420px;margin-bottom:8px}.fb-tr__row{display:flex;align-items:stretch;gap:2px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-xs, 6px);background:var(--fb-surface, #fff)}.fb-tr__row--empty{border-style:dashed;background:var(--fb-surface-alt, #f7f8fa)}.fb-tr__row--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:0 0 0 1px var(--fb-accent, #4f6ef7) inset}.fb-tr__row--drop{border-color:var(--fb-accent, #4f6ef7);border-style:solid;background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 12%,transparent)}.fb-tr__row-main{display:flex;flex:1;align-items:center;gap:8px;min-width:0;padding:6px 8px;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text, #1a1c23);font:inherit;text-align:left;cursor:pointer}.fb-tr__op{display:grid;flex:none;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--fb-surface-sunken, #eef0f4);font-size:11px;font-weight:700;color:var(--fb-text-muted, #6b7086)}.fb-tr__row-text{display:flex;flex:1;flex-direction:column;gap:1px;min-width:0}.fb-tr__row-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600}.fb-tr__row-src{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:var(--fb-text-muted, #6b7086)}.fb-tr__row-src--empty{color:var(--fb-text-subtle, #98a2b3);font-style:italic}.fb-tr__row-type{flex:none;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}.fb-tr__row-issue{display:grid;flex:none;place-items:center;width:16px;height:16px;border-radius:50%;background:color-mix(in srgb,var(--fb-error, #dc2626) 14%,transparent);font-size:10px;font-weight:700;color:var(--fb-error, #dc2626)}.fb-tr__modes{margin-top:2px}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -14346,11 +15120,11 @@ class GroupPanelComponent {
         this.createRequested.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: GroupPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: GroupPanelComponent, isStandalone: true, selector: "fb-group-panel", inputs: { isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null }, selectedNodeNames: { classPropertyName: "selectedNodeNames", publicName: "selectedNodeNames", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", createRequested: "createRequested", memberFocused: "memberFocused" }, ngImport: i0, template: "<header class=\"fb-grp__header\">\r\n  <h2 class=\"fb-grp__title\">Riquadri</h2>\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-btn fb-btn--icon\"\r\n    [disabled]=\"!isEditable()\"\r\n    title=\"Crea un riquadro attorno agli elementi selezionati\"\r\n    (click)=\"create()\"\r\n  >\r\n    Nuovo\r\n  </button>\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-grp__body\">\r\n  <p class=\"fb-section__note\">\r\n    Un riquadro documenta un pezzo di flow e non ne cambia il comportamento: il runtime non lo\r\n    legge mai, non ha collegamenti e i suoi rilievi sono tutti avvisi. Il nome sta in uno spazio\r\n    dei nomi a parte, quindi puo\u2019 coincidere con quello di una variabile.\r\n  </p>\r\n\r\n  @if (!groups().length) {\r\n    <p class=\"fb-empty\">\r\n      Nessun riquadro. Seleziona gli elementi sul canvas e premi \u00ABNuovo\u00BB: il riquadro nasce\r\n      attorno a loro.\r\n    </p>\r\n  }\r\n\r\n  <div class=\"fb-list\">\r\n    @for (item of groups(); track $index) {\r\n      <div class=\"fb-list__item\">\r\n        <div class=\"fb-list__header\">\r\n          <button type=\"button\" class=\"fb-grp__name\" (click)=\"toggleOpen(item.name)\">\r\n            <span class=\"fb-list__title\">{{ item.group.label || item.name || '(senza nome)' }}</span>\r\n            <span class=\"fb-grp__meta\">\r\n              {{ membersOf($index).length }}\r\n              {{ membersOf($index).length === 1 ? 'elemento' : 'elementi' }}\r\n              @if (item.group.isCollapsed) {\r\n                \u00B7 chiuso\r\n              }\r\n              @if (isAutoSized($index)) {\r\n                \u00B7 misura sui membri\r\n              }\r\n            </span>\r\n          </button>\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            [disabled]=\"!isEditable()\"\r\n            aria-label=\"Elimina il riquadro\"\r\n            title=\"Elimina il riquadro: gli elementi che contiene restano\"\r\n            (click)=\"remove($index)\"\r\n          >\r\n            \u00D7\r\n          </button>\r\n        </div>\r\n\r\n        @if (nameProblem($index)) {\r\n          <!-- Avviso, non errore: nessun rilievo su un riquadro blocca l\u2019attivazione (\u00A73.6). -->\r\n          <p class=\"fb-field__hint fb-field__hint--warn\">{{ nameProblem($index) }}</p>\r\n        }\r\n\r\n        @if (isOpen(item.name)) {\r\n          <div class=\"fb-fields-row\">\r\n            <label class=\"fb-field\">\r\n              <span class=\"fb-field__label\">Intestazione</span>\r\n              <input\r\n                [value]=\"item.group.label || ''\"\r\n                placeholder=\"Preparazione dell\u2019ordine\"\r\n                [disabled]=\"!isEditable()\"\r\n                (input)=\"setLabel($index, $any($event.target).value)\"\r\n              />\r\n            </label>\r\n            <label class=\"fb-field\">\r\n              <span class=\"fb-field__label\">Nome tecnico</span>\r\n              <input\r\n                [value]=\"item.name\"\r\n                placeholder=\"Riquadro_Preparazione\"\r\n                [disabled]=\"!isEditable()\"\r\n                (input)=\"setName($index, $any($event.target).value)\"\r\n              />\r\n            </label>\r\n          </div>\r\n\r\n          <label class=\"fb-field\">\r\n            <span class=\"fb-field__label\">Commento</span>\r\n            <textarea\r\n              rows=\"3\"\r\n              [value]=\"item.group.description || ''\"\r\n              placeholder=\"Cosa fa questo pezzo di flow, e perche\u2019.\"\r\n              [disabled]=\"!isEditable()\"\r\n              (input)=\"setDescription($index, $any($event.target).value)\"\r\n            ></textarea>\r\n            <span class=\"fb-field__hint\">\r\n              Sul canvas ne compaiono le prime righe; per intero sta qui e nel titolo della barra.\r\n            </span>\r\n          </label>\r\n\r\n          <div class=\"fb-fields-row\">\r\n            <label class=\"fb-field fb-field--compact\">\r\n              <span class=\"fb-field__label\">Colore</span>\r\n              <select\r\n                [fbValue]=\"colorOf($index)\"\r\n                [disabled]=\"!isEditable()\"\r\n                (change)=\"setColor($index, $any($event.target).value)\"\r\n              >\r\n                <option value=\"\">(nessuno)</option>\r\n                @for (color of colors; track color.value) {\r\n                  <option [value]=\"color.value\">{{ color.label }}</option>\r\n                }\r\n                <!--\r\n                  `color` e\u2019 un token concordato fra editor e backend (\u00A73.6): un valore che non\r\n                  proponiamo non e\u2019 sbagliato, e senza questa opzione la select resterebbe bianca\r\n                  su un riquadro scritto altrove.\r\n                -->\r\n                @if (isColorOutOfList($index)) {\r\n                  <option [value]=\"colorOf($index)\">{{ colorOf($index) }} (fuori elenco)</option>\r\n                }\r\n              </select>\r\n            </label>\r\n            <label class=\"fb-field fb-field--compact fb-grp__check\">\r\n              <span class=\"fb-field__label\">Chiuso</span>\r\n              <input\r\n                type=\"checkbox\"\r\n                [checked]=\"!!item.group.isCollapsed\"\r\n                [disabled]=\"!isEditable()\"\r\n                (change)=\"setCollapsed($index, $any($event.target).checked)\"\r\n              />\r\n            </label>\r\n          </div>\r\n\r\n          <div class=\"fb-grp__members\">\r\n            <div class=\"fb-list__header\">\r\n              <span class=\"fb-field__label\">Elementi nel riquadro</span>\r\n              <span class=\"fb-list__spacer\"></span>\r\n              <button\r\n                type=\"button\"\r\n                class=\"fb-btn fb-btn--icon\"\r\n                [disabled]=\"!isEditable() || !canAddSelection()\"\r\n                [title]=\"\r\n                  canAddSelection()\r\n                    ? 'Aggiungi gli elementi selezionati sul canvas'\r\n                    : 'Seleziona degli elementi sul canvas, poi aggiungili qui'\r\n                \"\r\n                (click)=\"addSelection($index)\"\r\n              >\r\n                Aggiungi la selezione\r\n              </button>\r\n            </div>\r\n\r\n            @if (!membersOf($index).length) {\r\n              <p class=\"fb-empty\">\r\n                Vuoto. Trascina un elemento dentro la cornice sul canvas, oppure selezionalo e usa\r\n                \u00ABAggiungi la selezione\u00BB.\r\n              </p>\r\n            }\r\n\r\n            @for (member of membersOf($index); track $index) {\r\n              <div class=\"fb-grp__member\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-grp__member-name\"\r\n                  [class.fb-grp__member-name--stale]=\"!isKnownMember(member)\"\r\n                  [title]=\"isKnownMember(member) ? 'Porta la vista su questo elemento' : 'Questo elemento non esiste piu\u2019'\"\r\n                  [disabled]=\"!isKnownMember(member)\"\r\n                  (click)=\"memberFocused.emit(member)\"\r\n                >\r\n                  {{ member }}\r\n                </button>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--ghost fb-btn--icon\"\r\n                  [disabled]=\"!isEditable()\"\r\n                  aria-label=\"Togli dal riquadro\"\r\n                  title=\"Togli dal riquadro: l\u2019elemento resta nel flow\"\r\n                  (click)=\"removeMember($index, member)\"\r\n                >\r\n                  \u00D7\r\n                </button>\r\n              </div>\r\n            }\r\n\r\n            @if (staleMembersOf($index).length) {\r\n              <p class=\"fb-callout fb-callout--warn\">\r\n                <span>\r\n                  {{ staleMembersOf($index).length }}\r\n                  {{ staleMembersOf($index).length === 1 ? 'membro nomina un elemento' : 'membri nominano elementi' }}\r\n                  che non esiste piu\u2019 (GROUP_MEMBER_UNKNOWN). E\u2019 un avviso: non blocca\r\n                  l\u2019attivazione, e la ripulitura la fa l\u2019editor.\r\n                </span>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--icon\"\r\n                  [disabled]=\"!isEditable()\"\r\n                  (click)=\"cleanStale($index)\"\r\n                >\r\n                  Ripulisci\r\n                </button>\r\n              </p>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-grp__header{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-grp__title{margin:0;flex:1;font-size:14px;font-weight:600;color:var(--fb-text, #1d2939)}.fb-grp__body{flex:1;min-height:0;padding:10px 12px 16px;overflow-y:auto}.fb-grp__name{display:flex;flex-direction:column;gap:2px;padding:0;border:none;background:transparent;font:inherit;text-align:left;cursor:pointer}.fb-grp__meta{font-size:10px;color:var(--fb-text-muted, #667085)}.fb-grp__check{flex-direction:row;align-items:center;gap:6px}.fb-grp__members{margin-top:4px;padding-top:6px;border-top:1px dashed var(--fb-border, #d6dae1)}.fb-grp__member{display:flex;align-items:center;gap:4px}.fb-grp__member-name{flex:1;min-width:0;padding:3px 4px;border:none;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text, #1d2939);font:inherit;font-size:12px;text-align:left;overflow-wrap:anywhere;cursor:pointer}.fb-grp__member-name:hover:not(:disabled){background:var(--fb-surface-alt, #f7f8fa)}.fb-grp__member-name--stale{color:var(--fb-warning, #b7791f);text-decoration:line-through;cursor:default}\n"], dependencies: [{ kind: "directive", type: SelectValueDirective, selector: "select[fbValue]", inputs: ["fbValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: GroupPanelComponent, isStandalone: true, selector: "fb-group-panel", inputs: { isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null }, selectedNodeNames: { classPropertyName: "selectedNodeNames", publicName: "selectedNodeNames", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", createRequested: "createRequested", memberFocused: "memberFocused" }, ngImport: i0, template: "<header class=\"fb-grp__header\">\r\n  <h2 class=\"fb-grp__title\">Riquadri</h2>\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-btn fb-btn--icon\"\r\n    [disabled]=\"!isEditable()\"\r\n    title=\"Crea un riquadro attorno agli elementi selezionati\"\r\n    (click)=\"create()\"\r\n  >\r\n    Nuovo\r\n  </button>\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-grp__body\">\r\n  <p class=\"fb-section__note\">\r\n    Un riquadro documenta un pezzo di flow e non ne cambia il comportamento: il runtime non lo\r\n    legge mai, non ha collegamenti e i suoi rilievi sono tutti avvisi. Il nome sta in uno spazio\r\n    dei nomi a parte, quindi puo\u2019 coincidere con quello di una variabile.\r\n  </p>\r\n\r\n  @if (!groups().length) {\r\n    <p class=\"fb-empty\">\r\n      Nessun riquadro. Seleziona gli elementi sul canvas e premi \u00ABNuovo\u00BB: il riquadro nasce\r\n      attorno a loro.\r\n    </p>\r\n  }\r\n\r\n  <div class=\"fb-list\">\r\n    @for (item of groups(); track $index) {\r\n      <div class=\"fb-list__item\">\r\n        <div class=\"fb-list__header\">\r\n          <button type=\"button\" class=\"fb-grp__name\" (click)=\"toggleOpen(item.name)\">\r\n            <span class=\"fb-list__title\">{{ item.group.label || item.name || '(senza nome)' }}</span>\r\n            <span class=\"fb-grp__meta\">\r\n              {{ membersOf($index).length }}\r\n              {{ membersOf($index).length === 1 ? 'elemento' : 'elementi' }}\r\n              @if (item.group.isCollapsed) {\r\n                \u00B7 chiuso: nascosti sul canvas\r\n              }\r\n              @if (isAutoSized($index)) {\r\n                \u00B7 misura sui membri\r\n              }\r\n            </span>\r\n          </button>\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            [disabled]=\"!isEditable()\"\r\n            aria-label=\"Elimina il riquadro\"\r\n            title=\"Elimina il riquadro: gli elementi che contiene restano\"\r\n            (click)=\"remove($index)\"\r\n          >\r\n            \u00D7\r\n          </button>\r\n        </div>\r\n\r\n        @if (nameProblem($index)) {\r\n          <!-- Avviso, non errore: nessun rilievo su un riquadro blocca l\u2019attivazione (\u00A73.6). -->\r\n          <p class=\"fb-field__hint fb-field__hint--warn\">{{ nameProblem($index) }}</p>\r\n        }\r\n\r\n        @if (isOpen(item.name)) {\r\n          <div class=\"fb-fields-row\">\r\n            <label class=\"fb-field\">\r\n              <span class=\"fb-field__label\">Intestazione</span>\r\n              <input\r\n                [value]=\"item.group.label || ''\"\r\n                placeholder=\"Preparazione dell\u2019ordine\"\r\n                [disabled]=\"!isEditable()\"\r\n                (input)=\"setLabel($index, $any($event.target).value)\"\r\n              />\r\n            </label>\r\n            <label class=\"fb-field\">\r\n              <span class=\"fb-field__label\">Nome tecnico</span>\r\n              <input\r\n                [value]=\"item.name\"\r\n                placeholder=\"Riquadro_Preparazione\"\r\n                [disabled]=\"!isEditable()\"\r\n                (input)=\"setName($index, $any($event.target).value)\"\r\n              />\r\n            </label>\r\n          </div>\r\n\r\n          <label class=\"fb-field\">\r\n            <span class=\"fb-field__label\">Commento</span>\r\n            <textarea\r\n              rows=\"3\"\r\n              [value]=\"item.group.description || ''\"\r\n              placeholder=\"Cosa fa questo pezzo di flow, e perche\u2019.\"\r\n              [disabled]=\"!isEditable()\"\r\n              (input)=\"setDescription($index, $any($event.target).value)\"\r\n            ></textarea>\r\n            <span class=\"fb-field__hint\">\r\n              Sul canvas ne compaiono le prime righe; per intero sta qui e nel titolo della barra.\r\n            </span>\r\n          </label>\r\n\r\n          <div class=\"fb-fields-row\">\r\n            <label class=\"fb-field fb-field--compact\">\r\n              <span class=\"fb-field__label\">Colore</span>\r\n              <select\r\n                [fbValue]=\"colorOf($index)\"\r\n                [disabled]=\"!isEditable()\"\r\n                (change)=\"setColor($index, $any($event.target).value)\"\r\n              >\r\n                <option value=\"\">(nessuno)</option>\r\n                @for (color of colors; track color.value) {\r\n                  <option [value]=\"color.value\">{{ color.label }}</option>\r\n                }\r\n                <!--\r\n                  `color` e\u2019 un token concordato fra editor e backend (\u00A73.6): un valore che non\r\n                  proponiamo non e\u2019 sbagliato, e senza questa opzione la select resterebbe bianca\r\n                  su un riquadro scritto altrove.\r\n                -->\r\n                @if (isColorOutOfList($index)) {\r\n                  <option [value]=\"colorOf($index)\">{{ colorOf($index) }} (fuori elenco)</option>\r\n                }\r\n              </select>\r\n            </label>\r\n            <!--\r\n              Chiuso non e' un dettaglio grafico: sul canvas gli elementi del riquadro **non si\r\n              disegnano piu'** e al loro posto compare una pastiglia, a cui si attaccano gli archi\r\n              che entrano nel riquadro o ne escono. Il documento non cambia: e' un modo di guardarlo.\r\n            -->\r\n            <label class=\"fb-field fb-field--compact fb-grp__check\">\r\n              <span class=\"fb-field__label\" title=\"Nasconde gli elementi del riquadro dietro una pastiglia\">\r\n                Chiuso\r\n              </span>\r\n              <input\r\n                type=\"checkbox\"\r\n                [checked]=\"!!item.group.isCollapsed\"\r\n                [disabled]=\"!isEditable()\"\r\n                (change)=\"setCollapsed($index, $any($event.target).checked)\"\r\n              />\r\n            </label>\r\n          </div>\r\n\r\n          <div class=\"fb-grp__members\">\r\n            <div class=\"fb-list__header\">\r\n              <span class=\"fb-field__label\">Elementi nel riquadro</span>\r\n              <span class=\"fb-list__spacer\"></span>\r\n              <button\r\n                type=\"button\"\r\n                class=\"fb-btn fb-btn--icon\"\r\n                [disabled]=\"!isEditable() || !canAddSelection()\"\r\n                [title]=\"\r\n                  canAddSelection()\r\n                    ? 'Aggiungi gli elementi selezionati sul canvas'\r\n                    : 'Seleziona degli elementi sul canvas, poi aggiungili qui'\r\n                \"\r\n                (click)=\"addSelection($index)\"\r\n              >\r\n                Aggiungi la selezione\r\n              </button>\r\n            </div>\r\n\r\n            @if (!membersOf($index).length) {\r\n              <p class=\"fb-empty\">\r\n                Vuoto. Trascina un elemento dentro la cornice sul canvas, oppure selezionalo e usa\r\n                \u00ABAggiungi la selezione\u00BB.\r\n              </p>\r\n            }\r\n\r\n            @for (member of membersOf($index); track $index) {\r\n              <div class=\"fb-grp__member\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-grp__member-name\"\r\n                  [class.fb-grp__member-name--stale]=\"!isKnownMember(member)\"\r\n                  [title]=\"isKnownMember(member) ? 'Porta la vista su questo elemento' : 'Questo elemento non esiste piu\u2019'\"\r\n                  [disabled]=\"!isKnownMember(member)\"\r\n                  (click)=\"memberFocused.emit(member)\"\r\n                >\r\n                  {{ member }}\r\n                </button>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--ghost fb-btn--icon\"\r\n                  [disabled]=\"!isEditable()\"\r\n                  aria-label=\"Togli dal riquadro\"\r\n                  title=\"Togli dal riquadro: l\u2019elemento resta nel flow\"\r\n                  (click)=\"removeMember($index, member)\"\r\n                >\r\n                  \u00D7\r\n                </button>\r\n              </div>\r\n            }\r\n\r\n            @if (staleMembersOf($index).length) {\r\n              <p class=\"fb-callout fb-callout--warn\">\r\n                <span>\r\n                  {{ staleMembersOf($index).length }}\r\n                  {{ staleMembersOf($index).length === 1 ? 'membro nomina un elemento' : 'membri nominano elementi' }}\r\n                  che non esiste piu\u2019 (GROUP_MEMBER_UNKNOWN). E\u2019 un avviso: non blocca\r\n                  l\u2019attivazione, e la ripulitura la fa l\u2019editor.\r\n                </span>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--icon\"\r\n                  [disabled]=\"!isEditable()\"\r\n                  (click)=\"cleanStale($index)\"\r\n                >\r\n                  Ripulisci\r\n                </button>\r\n              </p>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-grp__header{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-grp__title{margin:0;flex:1;font-size:14px;font-weight:600;color:var(--fb-text, #1d2939)}.fb-grp__body{flex:1;min-height:0;padding:10px 12px 16px;overflow-y:auto}.fb-grp__name{display:flex;flex-direction:column;gap:2px;padding:0;border:none;background:transparent;font:inherit;text-align:left;cursor:pointer}.fb-grp__meta{font-size:10px;color:var(--fb-text-muted, #667085)}.fb-grp__check{flex-direction:row;align-items:center;gap:6px}.fb-grp__members{margin-top:4px;padding-top:6px;border-top:1px dashed var(--fb-border, #d6dae1)}.fb-grp__member{display:flex;align-items:center;gap:4px}.fb-grp__member-name{flex:1;min-width:0;padding:3px 4px;border:none;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text, #1d2939);font:inherit;font-size:12px;text-align:left;overflow-wrap:anywhere;cursor:pointer}.fb-grp__member-name:hover:not(:disabled){background:var(--fb-surface-alt, #f7f8fa)}.fb-grp__member-name--stale{color:var(--fb-warning, #b7791f);text-decoration:line-through;cursor:default}\n"], dependencies: [{ kind: "directive", type: SelectValueDirective, selector: "select[fbValue]", inputs: ["fbValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: GroupPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fb-group-panel', standalone: true, imports: [SelectValueDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"fb-grp__header\">\r\n  <h2 class=\"fb-grp__title\">Riquadri</h2>\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-btn fb-btn--icon\"\r\n    [disabled]=\"!isEditable()\"\r\n    title=\"Crea un riquadro attorno agli elementi selezionati\"\r\n    (click)=\"create()\"\r\n  >\r\n    Nuovo\r\n  </button>\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-grp__body\">\r\n  <p class=\"fb-section__note\">\r\n    Un riquadro documenta un pezzo di flow e non ne cambia il comportamento: il runtime non lo\r\n    legge mai, non ha collegamenti e i suoi rilievi sono tutti avvisi. Il nome sta in uno spazio\r\n    dei nomi a parte, quindi puo\u2019 coincidere con quello di una variabile.\r\n  </p>\r\n\r\n  @if (!groups().length) {\r\n    <p class=\"fb-empty\">\r\n      Nessun riquadro. Seleziona gli elementi sul canvas e premi \u00ABNuovo\u00BB: il riquadro nasce\r\n      attorno a loro.\r\n    </p>\r\n  }\r\n\r\n  <div class=\"fb-list\">\r\n    @for (item of groups(); track $index) {\r\n      <div class=\"fb-list__item\">\r\n        <div class=\"fb-list__header\">\r\n          <button type=\"button\" class=\"fb-grp__name\" (click)=\"toggleOpen(item.name)\">\r\n            <span class=\"fb-list__title\">{{ item.group.label || item.name || '(senza nome)' }}</span>\r\n            <span class=\"fb-grp__meta\">\r\n              {{ membersOf($index).length }}\r\n              {{ membersOf($index).length === 1 ? 'elemento' : 'elementi' }}\r\n              @if (item.group.isCollapsed) {\r\n                \u00B7 chiuso\r\n              }\r\n              @if (isAutoSized($index)) {\r\n                \u00B7 misura sui membri\r\n              }\r\n            </span>\r\n          </button>\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            [disabled]=\"!isEditable()\"\r\n            aria-label=\"Elimina il riquadro\"\r\n            title=\"Elimina il riquadro: gli elementi che contiene restano\"\r\n            (click)=\"remove($index)\"\r\n          >\r\n            \u00D7\r\n          </button>\r\n        </div>\r\n\r\n        @if (nameProblem($index)) {\r\n          <!-- Avviso, non errore: nessun rilievo su un riquadro blocca l\u2019attivazione (\u00A73.6). -->\r\n          <p class=\"fb-field__hint fb-field__hint--warn\">{{ nameProblem($index) }}</p>\r\n        }\r\n\r\n        @if (isOpen(item.name)) {\r\n          <div class=\"fb-fields-row\">\r\n            <label class=\"fb-field\">\r\n              <span class=\"fb-field__label\">Intestazione</span>\r\n              <input\r\n                [value]=\"item.group.label || ''\"\r\n                placeholder=\"Preparazione dell\u2019ordine\"\r\n                [disabled]=\"!isEditable()\"\r\n                (input)=\"setLabel($index, $any($event.target).value)\"\r\n              />\r\n            </label>\r\n            <label class=\"fb-field\">\r\n              <span class=\"fb-field__label\">Nome tecnico</span>\r\n              <input\r\n                [value]=\"item.name\"\r\n                placeholder=\"Riquadro_Preparazione\"\r\n                [disabled]=\"!isEditable()\"\r\n                (input)=\"setName($index, $any($event.target).value)\"\r\n              />\r\n            </label>\r\n          </div>\r\n\r\n          <label class=\"fb-field\">\r\n            <span class=\"fb-field__label\">Commento</span>\r\n            <textarea\r\n              rows=\"3\"\r\n              [value]=\"item.group.description || ''\"\r\n              placeholder=\"Cosa fa questo pezzo di flow, e perche\u2019.\"\r\n              [disabled]=\"!isEditable()\"\r\n              (input)=\"setDescription($index, $any($event.target).value)\"\r\n            ></textarea>\r\n            <span class=\"fb-field__hint\">\r\n              Sul canvas ne compaiono le prime righe; per intero sta qui e nel titolo della barra.\r\n            </span>\r\n          </label>\r\n\r\n          <div class=\"fb-fields-row\">\r\n            <label class=\"fb-field fb-field--compact\">\r\n              <span class=\"fb-field__label\">Colore</span>\r\n              <select\r\n                [fbValue]=\"colorOf($index)\"\r\n                [disabled]=\"!isEditable()\"\r\n                (change)=\"setColor($index, $any($event.target).value)\"\r\n              >\r\n                <option value=\"\">(nessuno)</option>\r\n                @for (color of colors; track color.value) {\r\n                  <option [value]=\"color.value\">{{ color.label }}</option>\r\n                }\r\n                <!--\r\n                  `color` e\u2019 un token concordato fra editor e backend (\u00A73.6): un valore che non\r\n                  proponiamo non e\u2019 sbagliato, e senza questa opzione la select resterebbe bianca\r\n                  su un riquadro scritto altrove.\r\n                -->\r\n                @if (isColorOutOfList($index)) {\r\n                  <option [value]=\"colorOf($index)\">{{ colorOf($index) }} (fuori elenco)</option>\r\n                }\r\n              </select>\r\n            </label>\r\n            <label class=\"fb-field fb-field--compact fb-grp__check\">\r\n              <span class=\"fb-field__label\">Chiuso</span>\r\n              <input\r\n                type=\"checkbox\"\r\n                [checked]=\"!!item.group.isCollapsed\"\r\n                [disabled]=\"!isEditable()\"\r\n                (change)=\"setCollapsed($index, $any($event.target).checked)\"\r\n              />\r\n            </label>\r\n          </div>\r\n\r\n          <div class=\"fb-grp__members\">\r\n            <div class=\"fb-list__header\">\r\n              <span class=\"fb-field__label\">Elementi nel riquadro</span>\r\n              <span class=\"fb-list__spacer\"></span>\r\n              <button\r\n                type=\"button\"\r\n                class=\"fb-btn fb-btn--icon\"\r\n                [disabled]=\"!isEditable() || !canAddSelection()\"\r\n                [title]=\"\r\n                  canAddSelection()\r\n                    ? 'Aggiungi gli elementi selezionati sul canvas'\r\n                    : 'Seleziona degli elementi sul canvas, poi aggiungili qui'\r\n                \"\r\n                (click)=\"addSelection($index)\"\r\n              >\r\n                Aggiungi la selezione\r\n              </button>\r\n            </div>\r\n\r\n            @if (!membersOf($index).length) {\r\n              <p class=\"fb-empty\">\r\n                Vuoto. Trascina un elemento dentro la cornice sul canvas, oppure selezionalo e usa\r\n                \u00ABAggiungi la selezione\u00BB.\r\n              </p>\r\n            }\r\n\r\n            @for (member of membersOf($index); track $index) {\r\n              <div class=\"fb-grp__member\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-grp__member-name\"\r\n                  [class.fb-grp__member-name--stale]=\"!isKnownMember(member)\"\r\n                  [title]=\"isKnownMember(member) ? 'Porta la vista su questo elemento' : 'Questo elemento non esiste piu\u2019'\"\r\n                  [disabled]=\"!isKnownMember(member)\"\r\n                  (click)=\"memberFocused.emit(member)\"\r\n                >\r\n                  {{ member }}\r\n                </button>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--ghost fb-btn--icon\"\r\n                  [disabled]=\"!isEditable()\"\r\n                  aria-label=\"Togli dal riquadro\"\r\n                  title=\"Togli dal riquadro: l\u2019elemento resta nel flow\"\r\n                  (click)=\"removeMember($index, member)\"\r\n                >\r\n                  \u00D7\r\n                </button>\r\n              </div>\r\n            }\r\n\r\n            @if (staleMembersOf($index).length) {\r\n              <p class=\"fb-callout fb-callout--warn\">\r\n                <span>\r\n                  {{ staleMembersOf($index).length }}\r\n                  {{ staleMembersOf($index).length === 1 ? 'membro nomina un elemento' : 'membri nominano elementi' }}\r\n                  che non esiste piu\u2019 (GROUP_MEMBER_UNKNOWN). E\u2019 un avviso: non blocca\r\n                  l\u2019attivazione, e la ripulitura la fa l\u2019editor.\r\n                </span>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--icon\"\r\n                  [disabled]=\"!isEditable()\"\r\n                  (click)=\"cleanStale($index)\"\r\n                >\r\n                  Ripulisci\r\n                </button>\r\n              </p>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-grp__header{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-grp__title{margin:0;flex:1;font-size:14px;font-weight:600;color:var(--fb-text, #1d2939)}.fb-grp__body{flex:1;min-height:0;padding:10px 12px 16px;overflow-y:auto}.fb-grp__name{display:flex;flex-direction:column;gap:2px;padding:0;border:none;background:transparent;font:inherit;text-align:left;cursor:pointer}.fb-grp__meta{font-size:10px;color:var(--fb-text-muted, #667085)}.fb-grp__check{flex-direction:row;align-items:center;gap:6px}.fb-grp__members{margin-top:4px;padding-top:6px;border-top:1px dashed var(--fb-border, #d6dae1)}.fb-grp__member{display:flex;align-items:center;gap:4px}.fb-grp__member-name{flex:1;min-width:0;padding:3px 4px;border:none;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text, #1d2939);font:inherit;font-size:12px;text-align:left;overflow-wrap:anywhere;cursor:pointer}.fb-grp__member-name:hover:not(:disabled){background:var(--fb-surface-alt, #f7f8fa)}.fb-grp__member-name--stale{color:var(--fb-warning, #b7791f);text-decoration:line-through;cursor:default}\n"] }]
+            args: [{ selector: 'fb-group-panel', standalone: true, imports: [SelectValueDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"fb-grp__header\">\r\n  <h2 class=\"fb-grp__title\">Riquadri</h2>\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-btn fb-btn--icon\"\r\n    [disabled]=\"!isEditable()\"\r\n    title=\"Crea un riquadro attorno agli elementi selezionati\"\r\n    (click)=\"create()\"\r\n  >\r\n    Nuovo\r\n  </button>\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-grp__body\">\r\n  <p class=\"fb-section__note\">\r\n    Un riquadro documenta un pezzo di flow e non ne cambia il comportamento: il runtime non lo\r\n    legge mai, non ha collegamenti e i suoi rilievi sono tutti avvisi. Il nome sta in uno spazio\r\n    dei nomi a parte, quindi puo\u2019 coincidere con quello di una variabile.\r\n  </p>\r\n\r\n  @if (!groups().length) {\r\n    <p class=\"fb-empty\">\r\n      Nessun riquadro. Seleziona gli elementi sul canvas e premi \u00ABNuovo\u00BB: il riquadro nasce\r\n      attorno a loro.\r\n    </p>\r\n  }\r\n\r\n  <div class=\"fb-list\">\r\n    @for (item of groups(); track $index) {\r\n      <div class=\"fb-list__item\">\r\n        <div class=\"fb-list__header\">\r\n          <button type=\"button\" class=\"fb-grp__name\" (click)=\"toggleOpen(item.name)\">\r\n            <span class=\"fb-list__title\">{{ item.group.label || item.name || '(senza nome)' }}</span>\r\n            <span class=\"fb-grp__meta\">\r\n              {{ membersOf($index).length }}\r\n              {{ membersOf($index).length === 1 ? 'elemento' : 'elementi' }}\r\n              @if (item.group.isCollapsed) {\r\n                \u00B7 chiuso: nascosti sul canvas\r\n              }\r\n              @if (isAutoSized($index)) {\r\n                \u00B7 misura sui membri\r\n              }\r\n            </span>\r\n          </button>\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            [disabled]=\"!isEditable()\"\r\n            aria-label=\"Elimina il riquadro\"\r\n            title=\"Elimina il riquadro: gli elementi che contiene restano\"\r\n            (click)=\"remove($index)\"\r\n          >\r\n            \u00D7\r\n          </button>\r\n        </div>\r\n\r\n        @if (nameProblem($index)) {\r\n          <!-- Avviso, non errore: nessun rilievo su un riquadro blocca l\u2019attivazione (\u00A73.6). -->\r\n          <p class=\"fb-field__hint fb-field__hint--warn\">{{ nameProblem($index) }}</p>\r\n        }\r\n\r\n        @if (isOpen(item.name)) {\r\n          <div class=\"fb-fields-row\">\r\n            <label class=\"fb-field\">\r\n              <span class=\"fb-field__label\">Intestazione</span>\r\n              <input\r\n                [value]=\"item.group.label || ''\"\r\n                placeholder=\"Preparazione dell\u2019ordine\"\r\n                [disabled]=\"!isEditable()\"\r\n                (input)=\"setLabel($index, $any($event.target).value)\"\r\n              />\r\n            </label>\r\n            <label class=\"fb-field\">\r\n              <span class=\"fb-field__label\">Nome tecnico</span>\r\n              <input\r\n                [value]=\"item.name\"\r\n                placeholder=\"Riquadro_Preparazione\"\r\n                [disabled]=\"!isEditable()\"\r\n                (input)=\"setName($index, $any($event.target).value)\"\r\n              />\r\n            </label>\r\n          </div>\r\n\r\n          <label class=\"fb-field\">\r\n            <span class=\"fb-field__label\">Commento</span>\r\n            <textarea\r\n              rows=\"3\"\r\n              [value]=\"item.group.description || ''\"\r\n              placeholder=\"Cosa fa questo pezzo di flow, e perche\u2019.\"\r\n              [disabled]=\"!isEditable()\"\r\n              (input)=\"setDescription($index, $any($event.target).value)\"\r\n            ></textarea>\r\n            <span class=\"fb-field__hint\">\r\n              Sul canvas ne compaiono le prime righe; per intero sta qui e nel titolo della barra.\r\n            </span>\r\n          </label>\r\n\r\n          <div class=\"fb-fields-row\">\r\n            <label class=\"fb-field fb-field--compact\">\r\n              <span class=\"fb-field__label\">Colore</span>\r\n              <select\r\n                [fbValue]=\"colorOf($index)\"\r\n                [disabled]=\"!isEditable()\"\r\n                (change)=\"setColor($index, $any($event.target).value)\"\r\n              >\r\n                <option value=\"\">(nessuno)</option>\r\n                @for (color of colors; track color.value) {\r\n                  <option [value]=\"color.value\">{{ color.label }}</option>\r\n                }\r\n                <!--\r\n                  `color` e\u2019 un token concordato fra editor e backend (\u00A73.6): un valore che non\r\n                  proponiamo non e\u2019 sbagliato, e senza questa opzione la select resterebbe bianca\r\n                  su un riquadro scritto altrove.\r\n                -->\r\n                @if (isColorOutOfList($index)) {\r\n                  <option [value]=\"colorOf($index)\">{{ colorOf($index) }} (fuori elenco)</option>\r\n                }\r\n              </select>\r\n            </label>\r\n            <!--\r\n              Chiuso non e' un dettaglio grafico: sul canvas gli elementi del riquadro **non si\r\n              disegnano piu'** e al loro posto compare una pastiglia, a cui si attaccano gli archi\r\n              che entrano nel riquadro o ne escono. Il documento non cambia: e' un modo di guardarlo.\r\n            -->\r\n            <label class=\"fb-field fb-field--compact fb-grp__check\">\r\n              <span class=\"fb-field__label\" title=\"Nasconde gli elementi del riquadro dietro una pastiglia\">\r\n                Chiuso\r\n              </span>\r\n              <input\r\n                type=\"checkbox\"\r\n                [checked]=\"!!item.group.isCollapsed\"\r\n                [disabled]=\"!isEditable()\"\r\n                (change)=\"setCollapsed($index, $any($event.target).checked)\"\r\n              />\r\n            </label>\r\n          </div>\r\n\r\n          <div class=\"fb-grp__members\">\r\n            <div class=\"fb-list__header\">\r\n              <span class=\"fb-field__label\">Elementi nel riquadro</span>\r\n              <span class=\"fb-list__spacer\"></span>\r\n              <button\r\n                type=\"button\"\r\n                class=\"fb-btn fb-btn--icon\"\r\n                [disabled]=\"!isEditable() || !canAddSelection()\"\r\n                [title]=\"\r\n                  canAddSelection()\r\n                    ? 'Aggiungi gli elementi selezionati sul canvas'\r\n                    : 'Seleziona degli elementi sul canvas, poi aggiungili qui'\r\n                \"\r\n                (click)=\"addSelection($index)\"\r\n              >\r\n                Aggiungi la selezione\r\n              </button>\r\n            </div>\r\n\r\n            @if (!membersOf($index).length) {\r\n              <p class=\"fb-empty\">\r\n                Vuoto. Trascina un elemento dentro la cornice sul canvas, oppure selezionalo e usa\r\n                \u00ABAggiungi la selezione\u00BB.\r\n              </p>\r\n            }\r\n\r\n            @for (member of membersOf($index); track $index) {\r\n              <div class=\"fb-grp__member\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-grp__member-name\"\r\n                  [class.fb-grp__member-name--stale]=\"!isKnownMember(member)\"\r\n                  [title]=\"isKnownMember(member) ? 'Porta la vista su questo elemento' : 'Questo elemento non esiste piu\u2019'\"\r\n                  [disabled]=\"!isKnownMember(member)\"\r\n                  (click)=\"memberFocused.emit(member)\"\r\n                >\r\n                  {{ member }}\r\n                </button>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--ghost fb-btn--icon\"\r\n                  [disabled]=\"!isEditable()\"\r\n                  aria-label=\"Togli dal riquadro\"\r\n                  title=\"Togli dal riquadro: l\u2019elemento resta nel flow\"\r\n                  (click)=\"removeMember($index, member)\"\r\n                >\r\n                  \u00D7\r\n                </button>\r\n              </div>\r\n            }\r\n\r\n            @if (staleMembersOf($index).length) {\r\n              <p class=\"fb-callout fb-callout--warn\">\r\n                <span>\r\n                  {{ staleMembersOf($index).length }}\r\n                  {{ staleMembersOf($index).length === 1 ? 'membro nomina un elemento' : 'membri nominano elementi' }}\r\n                  che non esiste piu\u2019 (GROUP_MEMBER_UNKNOWN). E\u2019 un avviso: non blocca\r\n                  l\u2019attivazione, e la ripulitura la fa l\u2019editor.\r\n                </span>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-btn fb-btn--icon\"\r\n                  [disabled]=\"!isEditable()\"\r\n                  (click)=\"cleanStale($index)\"\r\n                >\r\n                  Ripulisci\r\n                </button>\r\n              </p>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-grp__header{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-grp__title{margin:0;flex:1;font-size:14px;font-weight:600;color:var(--fb-text, #1d2939)}.fb-grp__body{flex:1;min-height:0;padding:10px 12px 16px;overflow-y:auto}.fb-grp__name{display:flex;flex-direction:column;gap:2px;padding:0;border:none;background:transparent;font:inherit;text-align:left;cursor:pointer}.fb-grp__meta{font-size:10px;color:var(--fb-text-muted, #667085)}.fb-grp__check{flex-direction:row;align-items:center;gap:6px}.fb-grp__members{margin-top:4px;padding-top:6px;border-top:1px dashed var(--fb-border, #d6dae1)}.fb-grp__member{display:flex;align-items:center;gap:4px}.fb-grp__member-name{flex:1;min-width:0;padding:3px 4px;border:none;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text, #1d2939);font:inherit;font-size:12px;text-align:left;overflow-wrap:anywhere;cursor:pointer}.fb-grp__member-name:hover:not(:disabled){background:var(--fb-surface-alt, #f7f8fa)}.fb-grp__member-name--stale{color:var(--fb-warning, #b7791f);text-decoration:line-through;cursor:default}\n"] }]
         }], ctorParameters: () => [], propDecorators: { isEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditable", required: false }] }], selectedNodeNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNodeNames", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], createRequested: [{ type: i0.Output, args: ["createRequested"] }], memberFocused: [{ type: i0.Output, args: ["memberFocused"] }] } });
 
 /**
@@ -16506,5 +17280,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ConditionEditorComponent, ConnectorEditorComponent, DebugPanelComponent, DynamicScreenInspectorComponent, ENUM_CHOICE_SET_DEFAULT_DISPLAY_FIELD, ENUM_CHOICE_SET_DEFAULT_VALUE_FIELD, ENUM_CHOICE_SET_FIELDS, ElementDialogComponent, ElementInspectorComponent, ElementPaletteComponent, EnumValuePickerComponent, FALLBACK_COLLECTION_BY_TYPE, FALLBACK_TYPE_LABEL, FLOW_BUILDER_HTTP_CONFIG, FLOW_CLIPBOARD_KIND, FLOW_CLIPBOARD_VERSION, FLOW_ELEMENT_ICONS, FLOW_ELEMENT_VARIANT_FIELDS, FLOW_ELEMENT_VARIANT_ICONS, FLOW_ERROR_FALLBACK_MESSAGE, FLOW_ERROR_HTTP_STATUS, FLOW_GROUP_COLORS, FLOW_NAME_PATTERN, FLOW_NODE_COLLECTIONS, FLOW_NODE_HEIGHT, FLOW_NODE_WIDTH, FLOW_REFERENCE_FIELDS, FLOW_RESOURCE_COLLECTIONS, FLOW_VALUE_FIELDS, FLOW_VALUE_LITERAL_FIELDS, FieldAssignmentEditorComponent, FieldPickerComponent, FieldValuePickerComponent, FlowApiError, FlowBuilderApi, FlowBuilderComponent, FlowCanvasComponent, FlowCatalogStore, FlowClipboardService, FlowDictionaryStore, FlowDocumentStore, FlowEditorSession, FlowLayoutService, FlowValidationStore, FormulaEditorComponent, FormulaValidationService, GROUP_HEADER_HEIGHT, GROUP_MIN_HEIGHT, GROUP_MIN_WIDTH, GROUP_PADDING, GroupPanelComponent, HttpFlowBuilderApi, NamePickerComponent, NodeInspectorBase, ORCHESTRATION_CONDITION_OUTPUT, ObjectPickerComponent, OrchestratedStageInspectorComponent, ParameterEditorComponent, PasteDialogComponent, ProblemsPanelComponent, RecordFilterEditorComponent, ReferencePickerComponent, ResourcePanelComponent, RunDialogComponent, SEVERITY_BUCKETS, SEVERITY_ICON, SEVERITY_LABEL, START_NODE_NAME, SelectValueDirective, StartInspectorComponent, StructureMemberPickerComponent, StructurePickerComponent, TYPES_WITH_AUTOMATIC_OUTPUT, TYPE_BY_COLLECTION, UNSUPPORTED_TYPES, ValueEditorComponent, VersionPanelComponent, allFieldsOf, applyPaste, areTypesComparable, boundsAround, buildClipboardPayload, canvasGroupId, canvasNodeId, checkConditionLogic, checkFlowName, choiceSetSourceOf, declaredChoiceSetSources, describeFieldPath, describePathEntry, duplicateField, elementIcon, emptyFlowDefinition, enumChoiceSetFieldType, fieldAt, filterReferences, flattenFields, flowNodeWidth, flowNodeWidthClass, groupColorClass, groupRect, hasAutoSize, innerNamesOf, insertField, isClipboardPayload, isCustomConditionLogic, isEmptyReferenceFilter, isFieldResource, isGlobalReference, isNumericType, isPathInside, isTypeCheckedOperator, isUnknownEnumChoiceSetField, isValidFlowName, isValued, loadPathLevel, matchesReferenceFilter, membersInside, moveCondition, moveField, navigatePath, otherSourceFieldsOf, outletByKey, outletsOf, parseCanvasGroupId, parseCanvasNodeId, parseFieldPath, parseInvariantNumber, parseSourceConnectorId, parseTargetConnectorId, pathAvailableNames, pathContainerLabel, pathKey, pathNotVerifiableMessage, planPaste, recomputeMembers, referenceRoot, referencedRootsOf, remapConditionLogic, removeCondition, removeField, resolvePath, rewriteReferences, sameMembers, samePath, screenActionNames, screenFieldNames, severityBucket, slugifyFlowName, sourceConnectorId, stageStepNames, stageStepOutputReferenced, stepsOf, targetConnectorId, typeOfCollection, uniqueFlowName, valuedFieldOf, valuedFieldsOf, variantFieldOf, variantOf, variantPresetOf };
+export { ConditionEditorComponent, ConnectorEditorComponent, DebugPanelComponent, DynamicScreenInspectorComponent, ENUM_CHOICE_SET_DEFAULT_DISPLAY_FIELD, ENUM_CHOICE_SET_DEFAULT_VALUE_FIELD, ENUM_CHOICE_SET_FIELDS, ElementDialogComponent, ElementInspectorComponent, ElementPaletteComponent, EnumValuePickerComponent, FALLBACK_COLLECTION_BY_TYPE, FALLBACK_TYPE_LABEL, FLOW_BUILDER_HTTP_CONFIG, FLOW_CLIPBOARD_KIND, FLOW_CLIPBOARD_VERSION, FLOW_ELEMENT_ICONS, FLOW_ELEMENT_VARIANT_FIELDS, FLOW_ELEMENT_VARIANT_ICONS, FLOW_ERROR_FALLBACK_MESSAGE, FLOW_ERROR_HTTP_STATUS, FLOW_FOLD_HEIGHT, FLOW_FOLD_WIDTH, FLOW_GROUP_COLORS, FLOW_NAME_PATTERN, FLOW_NODE_COLLECTIONS, FLOW_NODE_HEIGHT, FLOW_NODE_WIDTH, FLOW_REFERENCE_FIELDS, FLOW_RESOURCE_COLLECTIONS, FLOW_VALUE_FIELDS, FLOW_VALUE_LITERAL_FIELDS, FieldAssignmentEditorComponent, FieldPickerComponent, FieldValuePickerComponent, FlowApiError, FlowBuilderApi, FlowBuilderComponent, FlowCanvasComponent, FlowCatalogStore, FlowClipboardService, FlowDictionaryStore, FlowDocumentStore, FlowEditorSession, FlowLayoutService, FlowValidationStore, FormulaEditorComponent, FormulaValidationService, GROUP_HEADER_HEIGHT, GROUP_MIN_HEIGHT, GROUP_MIN_WIDTH, GROUP_PADDING, GroupPanelComponent, HttpFlowBuilderApi, NamePickerComponent, NodeInspectorBase, ORCHESTRATION_CONDITION_OUTPUT, ObjectPickerComponent, OrchestratedStageInspectorComponent, ParameterEditorComponent, PasteDialogComponent, ProblemsPanelComponent, RecordFilterEditorComponent, ReferencePickerComponent, ResourcePanelComponent, RunDialogComponent, SEVERITY_BUCKETS, SEVERITY_ICON, SEVERITY_LABEL, START_NODE_NAME, SelectValueDirective, StartInspectorComponent, StructureMemberPickerComponent, StructurePickerComponent, TYPES_WITH_AUTOMATIC_OUTPUT, TYPE_BY_COLLECTION, UNSUPPORTED_TYPES, ValueEditorComponent, VersionPanelComponent, allFieldsOf, applyPaste, areTypesComparable, boundsAround, buildClipboardPayload, canvasFoldId, canvasGroupId, canvasNodeId, checkConditionLogic, checkFlowName, choiceSetSourceOf, declaredChoiceSetSources, describeFieldPath, describePathEntry, duplicateField, elementIcon, emptyFlowDefinition, enumChoiceSetFieldType, fieldAt, filterReferences, flattenFields, flowNodeWidth, flowNodeWidthClass, foldSourceConnectorId, foldTargetConnectorId, groupColorClass, groupRect, hasAutoSize, innerNamesOf, insertField, isClipboardPayload, isCustomConditionLogic, isEmptyReferenceFilter, isFieldResource, isFoldReference, isGlobalReference, isNumericType, isPathInside, isTypeCheckedOperator, isUnknownEnumChoiceSetField, isValidFlowName, isValued, loadPathLevel, matchesReferenceFilter, membersInside, moveCondition, moveField, navigatePath, otherSourceFieldsOf, outletByKey, outletsOf, parseCanvasFoldId, parseCanvasGroupId, parseCanvasNodeId, parseFieldPath, parseInvariantNumber, parseSourceConnectorId, parseTargetConnectorId, pathAvailableNames, pathContainerLabel, pathKey, pathNotVerifiableMessage, planPaste, recomputeMembers, referenceRoot, referencedRootsOf, remapConditionLogic, removeCondition, removeField, resolvePath, rewriteReferences, sameMembers, samePath, screenActionNames, screenFieldNames, severityBucket, slugifyFlowName, sourceConnectorId, stageStepNames, stageStepOutputReferenced, stepsOf, targetConnectorId, typeOfCollection, uniqueFlowName, valuedFieldOf, valuedFieldsOf, variantFieldOf, variantOf, variantPresetOf };
 //# sourceMappingURL=esfaenza-flow-builder.mjs.map