@esfaenza/flow-builder 20.3.4 → 20.3.5

package/fesm2022/esfaenza-flow-builder.mjs

@@ -1,10 +1,10 @@
 import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, computed, Injectable, DestroyRef, input, output, ChangeDetectionStrategy, Component, effect, untracked, ElementRef, Directive, viewChild } from '@angular/core';
+import { InjectionToken, inject, signal, computed, Injectable, DestroyRef, input, output, viewChild, ChangeDetectionStrategy, Component, effect, untracked, ElementRef, Directive } from '@angular/core';
 import { firstValueFrom } from 'rxjs';
 import dagre from 'dagre';
 import * as i1 from '@foblex/flow';
-import { EFMarkerType, EFConnectableSide, FFlowModule } from '@foblex/flow';
+import { EFMarkerType, EFConnectableSide, FCanvasComponent, FFlowModule, provideFFlow, withA11y } from '@foblex/flow';
 
 /**
  * Modello del documento Flow — FRONTEND.md §3, §4, §5.
@@ -1218,6 +1218,73 @@ function stageStepOutputReferenced(reference, steps) {
  */
 const ORCHESTRATION_CONDITION_OUTPUT = 'isOrchestrationConditionMet';
 
+/**
+ * La gravita' di un rilievo, ridotta a tre secchi — FRONTEND.md §7.
+ *
+ * Perche' esiste: `FlowIssueSeverity` e' un tipo **aperto** (`'Error' | 'Warning' | 'Info' |
+ * string`) perche' il backend puo' aggiungere livelli senza toccare il frontend (§13.11). La
+ * conseguenza e' che confrontare la stringa cosi' com'e' e' un fallimento silenzioso: un
+ * `error` minuscolo, un `WARN`, un `Log` non corrispondono a niente, e allora il filtro del
+ * pannello non seleziona nulla, il conteggio resta a zero e il node sul canvas non si colora —
+ * senza un errore da nessuna parte. Era il difetto dei filtri della §7.
+ *
+ * Da qui in avanti si confronta il **secchio**, non la stringa. I livelli che non conosciamo
+ * cadono in `Info`: sono note, non problemi, e restano visibili invece di sparire.
+ */
+/**
+ * Sinonimi visti o plausibili. Il confronto e' minuscolo e senza spazi, quindi qui bastano
+ * le forme canoniche: `Fatal`, `FATAL` e ` fatal ` finiscono tutte sulla stessa chiave.
+ */
+const BUCKET_BY_NAME = new Map([
+    ['error', 'Error'],
+    ['errore', 'Error'],
+    ['errors', 'Error'],
+    ['fatal', 'Error'],
+    ['critical', 'Error'],
+    ['severe', 'Error'],
+    ['blocker', 'Error'],
+    ['warning', 'Warning'],
+    ['warn', 'Warning'],
+    ['warnings', 'Warning'],
+    ['avviso', 'Warning'],
+    ['caution', 'Warning'],
+    ['info', 'Info'],
+    ['information', 'Info'],
+    ['informational', 'Info'],
+    ['note', 'Info'],
+    ['nota', 'Info'],
+    ['hint', 'Info'],
+    ['log', 'Info'],
+    ['debug', 'Info'],
+    ['trace', 'Info'],
+    ['verbose', 'Info'],
+]);
+/** Un livello sconosciuto e' una nota: si mostra, non si nasconde. */
+function severityBucket(severity) {
+    if (!severity) {
+        return 'Info';
+    }
+    return BUCKET_BY_NAME.get(severity.trim().toLowerCase()) ?? 'Info';
+}
+/** L'ordine in cui si presentano: prima cio' che blocca l'attivazione. */
+const SEVERITY_BUCKETS = ['Error', 'Warning', 'Info'];
+const SEVERITY_LABEL = {
+    Error: 'Errore',
+    Warning: 'Avviso',
+    Info: 'Nota',
+};
+/**
+ * Caratteri Unicode, non icone: la libreria non porta asset e non dipende dal font di icone
+ * dell'applicazione ospite — la stessa scelta di `element-icons.ts`. Sono glifi che rendono
+ * bene dentro un pastiglia colorata a 14px e non hanno un fallback emoji che cambia forma da
+ * un sistema all'altro.
+ */
+const SEVERITY_ICON = {
+    Error: '✕',
+    Warning: '!',
+    Info: 'i',
+};
+
 /**
  * Lo store del documento in lavorazione.
  *
@@ -2124,7 +2191,22 @@ class FlowValidationStore {
     issues = computed(() => this._result()?.issues ?? [], ...(ngDevMode ? [{ debugName: "issues" }] : []));
     errorCount = computed(() => this._result()?.errorCount ?? 0, ...(ngDevMode ? [{ debugName: "errorCount" }] : []));
     warningCount = computed(() => this._result()?.warningCount ?? 0, ...(ngDevMode ? [{ debugName: "warningCount" }] : []));
-    infoCount = computed(() => this.issues().filter((issue) => issue.severity === 'Info').length, ...(ngDevMode ? [{ debugName: "infoCount" }] : []));
+    /**
+     * I conteggi per gravita' **ricavati dai rilievi**, non quelli del risultato.
+     *
+     * Servono a etichettare i filtri del pannello, e un'etichetta di filtro deve contare
+     * esattamente cio' che il filtro mostrera': `errorCount` del backend e' l'unica verita' per
+     * l'attivazione (§8.3) ma non e' allineato ai secchi, quindi usarlo sul chip produrrebbe un
+     * «Errori 3» che apre una lista di due. Il livello si normalizza (`severityBucket`) perche'
+     * la stringa e' aperta.
+     */
+    issueCounts = computed(() => {
+        const counts = { Error: 0, Warning: 0, Info: 0 };
+        for (const issue of this.issues()) {
+            counts[severityBucket(issue.severity)] += 1;
+        }
+        return counts;
+    }, ...(ngDevMode ? [{ debugName: "issueCounts" }] : []));
     /**
      * `false` finche' non e' arrivata una validazione: non presentare l'assenza di rilievi
      * come garanzia di correttezza (§7, ultimo capoverso).
@@ -2154,13 +2236,9 @@ class FlowValidationStore {
         if (!issues?.length) {
             return null;
         }
-        if (issues.some((issue) => issue.severity === 'Error')) {
-            return 'Error';
-        }
-        if (issues.some((issue) => issue.severity === 'Warning')) {
-            return 'Warning';
-        }
-        return 'Info';
+        const buckets = new Set(issues.map((issue) => severityBucket(issue.severity)));
+        // `SEVERITY_BUCKETS` e' ordinato per gravita' decrescente: il primo che c'e' vince.
+        return SEVERITY_BUCKETS.find((bucket) => buckets.has(bucket)) ?? 'Info';
     }
     /**
      * I rilievi che riguardano un campo dentro un elemento.
@@ -2762,6 +2840,12 @@ 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];
+/**
+ * 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
+ * padding e' simmetrico: sbilanciarlo sposta il flow fuori centro.
+ */
+const FIT_PADDING = { x: 120, y: 120 };
 /** Oltre questo numero di rami il node non cresce piu': le etichette si troncano. */
 const MAX_OUTLET_BUCKET = OUTLET_WIDTHS.length - 1;
 function outletBucket(outletCount) {
@@ -2797,12 +2881,56 @@ class FlowCanvasComponent {
      * Assente → si usa il calcolo locale.
      */
     outline = input(null, ...(ngDevMode ? [{ debugName: "outline" }] : []));
+    /**
+     * Lo decide il backend, non il client (§8): su una versione non modificabile i comandi che
+     * mutano il documento non si offrono. Arriva come input invece di leggere la sessione,
+     * perche' il canvas resti montabile da solo.
+     */
+    isEditable = input(true, ...(ngDevMode ? [{ debugName: "isEditable" }] : []));
     selectionChange = output();
     nodeOpened = output();
     nodeRemoveRequested = output();
     nodeDuplicateRequested = output();
     /** Rilascio di un elemento dalla palette: tipo + punto nel sistema del canvas. */
     elementDropped = output();
+    // -------------------------------------------------------------------------
+    // Viewport
+    // -------------------------------------------------------------------------
+    canvas = viewChild.required(FCanvasComponent);
+    _hasMovedViewport = signal(false, ...(ngDevMode ? [{ debugName: "_hasMovedViewport" }] : []));
+    /** L'utente ha zoomato o spostato la vista: il comando per rimetterla a posto ha senso. */
+    hasMovedViewport = this._hasMovedViewport.asReadonly();
+    /** Il primo `fNodesRendered` inquadra, i successivi no: rifarlo combatterebbe con l'utente. */
+    hasFramedOnce = false;
+    /**
+     * `fitToScreen` va chiamato **dopo** che i node sono stati renderizzati: prima, la libreria
+     * non conosce ancora le loro dimensioni e inquadra la vista sbagliata (FF1009).
+     *
+     * Con un solo node (un flow appena creato ha solo lo Start) non si inquadra niente: la
+     * vista si spalancherebbe su una card sola.
+     */
+    onNodesRendered() {
+        if (this.hasFramedOnce || this.nodes().length < 2) {
+            return;
+        }
+        this.hasFramedOnce = true;
+        this.frameFlow(false);
+    }
+    /**
+     * Qualunque zoom o panoramica accende il pulsante. `frameFlow` passa
+     * `emitCanvasChange: false`, quindi il ritorno alla vista iniziale non rientra da qui e il
+     * pulsante si spegne invece di restare acceso per sempre.
+     */
+    onCanvasChange() {
+        this._hasMovedViewport.set(true);
+    }
+    resetViewport() {
+        this.frameFlow(true);
+        this._hasMovedViewport.set(false);
+    }
+    frameFlow(animated) {
+        this.canvas().fitToScreen(FIT_PADDING, animated, false);
+    }
     /** Raggiungibilita': backend se c'e', locale altrimenti. */
     reachability = computed(() => {
         const outline = this.outline();
@@ -3018,6 +3146,9 @@ class FlowCanvasComponent {
     }
     /** `Delete` sulla selezione: lo Start non e' cancellabile, e' uno per flow (§3.4). */
     onDeleteSelected(event) {
+        if (!this.isEditable()) {
+            return;
+        }
         for (const id of event.nodeIds) {
             const name = parseCanvasNodeId(id);
             if (name && name !== START_NODE_NAME) {
@@ -3055,6 +3186,15 @@ class FlowCanvasComponent {
         event.stopPropagation();
         this.nodeOpened.emit(name);
     }
+    /**
+     * `stopPropagation` come per ✎: senza, il clic arriva anche al node e la selezione cambia
+     * mentre l'elemento sta sparendo. La rimozione la esegue il documento, non il canvas:
+     * `removeNode` toglie anche i connector che lo puntavano.
+     */
+    onRemoveClick(event, name) {
+        event.stopPropagation();
+        this.nodeRemoveRequested.emit(name);
+    }
     connectorIdOf(node, outletKey) {
         return sourceConnectorId(node.name, outletKey);
     }
@@ -3092,12 +3232,12 @@ class FlowCanvasComponent {
         return 'cat-other';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlowCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: FlowCanvasComponent, isStandalone: true, selector: "fb-flow-canvas", inputs: { selectedName: { classPropertyName: "selectedName", publicName: "selectedName", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", nodeOpened: "nodeOpened", nodeRemoveRequested: "nodeRemoveRequested", nodeDuplicateRequested: "nodeDuplicateRequested", elementDropped: "elementDropped" }, 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>\r\n  <f-canvas fZoom>\r\n    <f-background>\r\n      <f-circle-pattern />\r\n    </f-background>\r\n\r\n    @for (edge of edges(); track edge.id) {\r\n      <f-connection\r\n        [fConnectionId]=\"edge.id\"\r\n        [fSourceId]=\"edge.sourceId\"\r\n        [fTargetId]=\"edge.targetId\"\r\n        fBehavior=\"floating\"\r\n        [fType]=\"edge.isGoTo ? 'segment' : 'bezier'\"\r\n        [class]=\"'fb-edge fb-edge--' + edge.kind + (edge.isGoTo ? ' fb-edge--goto' : '')\"\r\n      >\r\n        <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n        @if (edge.label) {\r\n          <div fConnectionContent class=\"fb-edge-label\">{{ edge.label }}</div>\r\n        }\r\n      </f-connection>\r\n    }\r\n\r\n    @for (node of nodes(); track node.id) {\r\n      <div\r\n        fNode\r\n        fDragHandle\r\n        [fNodeId]=\"node.id\"\r\n        [fNodePosition]=\"node.position\"\r\n        [class]=\"'fb-node ' + categoryClass(node) + ' ' + node.widthClass\"\r\n        [class.fb-node--start]=\"node.isStart\"\r\n        [class.fb-node--selected]=\"isSelected(node)\"\r\n        [class.fb-node--unreachable]=\"!node.isReachable\"\r\n        [class.fb-node--error]=\"node.severity === 'Error'\"\r\n        [class.fb-node--warning]=\"node.severity === 'Warning'\"\r\n        (dblclick)=\"onNodeDoubleClick(node.name)\"\r\n      >\r\n        <!--\r\n          Lo Start non ha ingresso: e' il punto di partenza (\u00A73.4).\r\n          `fConnectorConnectableSide` e' cio' che fa entrare l'arco dall'alto: senza, foblex\r\n          calcola il lato e un arco che scende dal node sopra potrebbe agganciarsi di fianco.\r\n        -->\r\n        @if (!node.isStart) {\r\n          <div\r\n            fConnector\r\n            fConnectorType=\"target\"\r\n            [fConnectorId]=\"targetIdOf(node)\"\r\n            [fConnectorConnectableSide]=\"sides.TOP\"\r\n            fConnectorMultiple=\"true\"\r\n            class=\"fb-connector fb-connector--in\"\r\n            title=\"Ingresso\"\r\n          ></div>\r\n        }\r\n\r\n        <div class=\"fb-node__head\">\r\n          <span class=\"fb-node__icon\" aria-hidden=\"true\">{{ node.icon }}</span>\r\n          <div class=\"fb-node__text\">\r\n            <span class=\"fb-node__title\" [title]=\"node.description || node.label\">{{ node.label }}</span>\r\n            <span class=\"fb-node__sub\">\r\n              {{ node.typeLabel }}\r\n              @if (node.subtitle) {\r\n                <span class=\"fb-node__sub-dot\">\u00B7</span>{{ node.subtitle }}\r\n              }\r\n            </span>\r\n          </div>\r\n          @if (node.hasAutomaticOutput) {\r\n            <!-- L'elemento espone il proprio risultato sotto il proprio nome (\u00A74.5). -->\r\n            <span class=\"fb-node__auto\" title=\"Espone un output automatico referenziabile come \u00AB{{ node.name }}\u00BB\">\r\n              \u0192\r\n            </span>\r\n          }\r\n          <!--\r\n            `fDragBlocker` impedisce che il pointerdown sul bottone diventi un trascinamento\r\n            del node: senza, aprire il dettaglio sposterebbe l'elemento di qualche pixel.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            fDragBlocker\r\n            class=\"fb-node__edit\"\r\n            [attr.aria-label]=\"'Apri il dettaglio di ' + node.label\"\r\n            title=\"Apri il dettaglio\"\r\n            (click)=\"onEditClick($event, node.name)\"\r\n          >\r\n            \u270E\r\n          </button>\r\n        </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.3), 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  <f-minimap [fMinSize]=\"1200\" class=\"fb-minimap\" />\r\n</f-flow>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:var(--fb-canvas-bg, #f4f5f7)}f-flow{display:block;width:100%;height:100%}.fb-minimap{position:absolute;right:14px;bottom:14px;width:190px;height:130px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));overflow:hidden}.fb-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__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:14px;padding:0 12px 6px}.fb-node__name{flex:0 1 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--fb-text-subtle, #98a2b3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-badge{padding:1px 6px;border-radius:10px;background:var(--fb-badge-bg, #eef0f4);font-size:10px;font-weight:600;color:var(--fb-text-muted, #6b7086);white-space:nowrap;cursor:help}.fb-badge--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 14%,transparent);color:var(--fb-error, #c9372c)}.fb-badge--warning{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-badge--info{background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 12%,transparent);color:var(--fb-accent, #4f6ef7)}.fb-badge--unreachable,.fb-badge--dangling{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-node__outlets{display:flex;align-items:flex-end;justify-content:space-evenly;gap:4px;padding:0 8px 4px}.fb-node__outlets--labelled{padding-top:5px;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-outlet{display:flex;flex:1 1 0;flex-direction:column;align-items:center;gap:2px;min-width:0}.fb-outlet__label{max-width:100%;font-size:10px;line-height:13px;color:var(--fb-text-muted, #6b7086);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-connector{box-sizing:border-box;width:12px;height:12px;flex:0 0 auto;border:2px solid var(--fb-surface, #fff);border-radius:50%;background:var(--fb-connector, #98a2b3);cursor:crosshair;transition:transform .12s ease,box-shadow .12s ease}f-flow .fb-connector--out{position:relative;inset:auto;margin-bottom:-12px}.fb-connector--out:hover{transform:scale(1.2)}f-flow .fb-connector--in{position:absolute;inset:-2px auto auto 50%;width:24px;height:4px;border:0;border-radius:2px;transform:translate(-50%);background:var(--fb-border-strong, #cfd4de)}.fb-connector--out{--ff-connector-connected-color: var(--fb-connector, #98a2b3)}.fb-connector--Next,.fb-connector--Start,.fb-connector--LoopNext{--fb-connector: var(--fb-edge-next, #98a2b3)}.fb-connector--Rule,.fb-connector--WaitEvent{--fb-connector: var(--fb-edge-rule, #8b5cf6)}.fb-connector--Default,.fb-connector--LoopEnd{--fb-connector: var(--fb-edge-default, #06b6d4)}.fb-connector--Fault{--fb-connector: var(--fb-edge-fault, #dc2626)}.fb-connector--Timeout,.fb-connector--ScheduledPath{--fb-connector: var(--fb-edge-timeout, #f59e0b)}.fb-connector.f-connector-connectable{box-shadow:0 0 0 4px color-mix(in srgb,var(--fb-accent, #4f6ef7) 28%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: FFlowModule }, { kind: "component", type: i1.FFlowComponent, selector: "f-flow", inputs: ["fFlowId", "fCache"], outputs: ["fNodesRendered", "fFullRendered", "fLoaded"] }, { kind: "component", type: i1.FCanvasComponent, selector: "f-canvas", inputs: ["position", "scale", "debounceTime", "fLayers"], outputs: ["fCanvasChange"] }, { kind: "component", type: i1.FBackgroundComponent, selector: "f-background" }, { kind: "component", type: i1.FCirclePatternComponent, selector: "f-circle-pattern", inputs: ["id", "color", "radius"] }, { kind: "directive", type: i1.FZoomDirective, selector: "f-canvas[fZoom]", inputs: ["fZoom", "fWheelTrigger", "fDblClickTrigger", "fZoomMinimum", "fZoomMaximum", "fZoomStep", "fPinchStep", "fZoomDblClickStep"] }, { kind: "component", type: i1.FSelectionArea, selector: "f-selection-area", inputs: ["fTrigger"] }, { kind: "directive", type: i1.FConnectionContent, selector: "[fConnectionContent]", inputs: ["position", "offset", "align"] }, { kind: "component", type: i1.FConnectionMarkerArrow, selector: "f-connection-marker-arrow", inputs: ["type"] }, { kind: "component", type: i1.FConnectionComponent, selector: "f-connection", inputs: ["fConnectionId", "fSourceId", "fTargetId", "fOutputId", "fInputId", "fRadius", "fOffset", "fBehavior", "fType", "fSelectionDisabled", "fReassignableStart", "fReassignDisabled", "fSourceSide", "fTargetSide", "fInputSide", "fOutputSide"], exportAs: ["fComponent"] }, { kind: "component", type: i1.FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: ["fRadius", "fOffset", "fBehavior", "fType", "fInputSide", "fOutputSide"] }, { kind: "directive", type: i1.FConnectorDirective, selector: "[fConnector]", inputs: ["fConnectorId", "fConnectorType", "fConnectorDisabled", "fConnectorMultiple", "fConnectorCategory", "fConnectorConnectableSide", "fConnectorSelfConnectable", "fCanBeConnectedTo", "fConnectionFromOutlet"], exportAs: ["fConnector"] }, { kind: "component", type: i1.FMinimapComponent, selector: "f-minimap", inputs: ["fMinSize", "fNodeRenderLimit"], exportAs: ["fComponent"] }, { kind: "directive", type: i1.FNodeDirective, selector: "[fNode]", inputs: ["fNodeId", "fNodeParentId", "fNodePosition", "fNodeSize", "fNodeRotate", "fConnectOnNode", "fMinimapClass", "fNodeDraggingDisabled", "fNodeSelectionDisabled", "fIncludePadding", "fAutoExpandOnChildHit", "fAutoSizeToFitChildren"], outputs: ["fNodePositionChange", "fNodeSizeChange", "fNodeRotateChange"], exportAs: ["fComponent"] }, { kind: "directive", type: i1.FDragHandleDirective, selector: "[fDragHandle]" }, { kind: "directive", type: i1.FDragBlockerDirective, selector: "[fDragBlocker]" }, { kind: "directive", type: i1.FDraggableDirective, selector: "f-flow[fDraggable]", inputs: ["fDraggableDisabled", "fDropToGroup", "fMultiSelectTrigger", "fReassignConnectionTrigger", "fCreateConnectionTrigger", "fConnectionWaypointsTrigger", "fMoveControlPointTrigger", "fNodeResizeTrigger", "fNodeRotateTrigger", "fNodeMoveTrigger", "fCanvasMoveTrigger", "fExternalItemTrigger", "fEmitOnNodeIntersect", "vCellSize", "hCellSize", "fCellSizeWhileDragging"], outputs: ["fSelectionChange", "fDeleteSelected", "fNodeIntersectedWithConnections", "fNodeConnectionsIntersection", "fCreateNode", "fMoveNodes", "fReassignConnection", "fCreateConnection", "fConnectionWaypointsChanged", "fDropToGroup", "fDragStarted", "fDragEnded"], exportAs: ["fDraggable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: FlowCanvasComponent, isStandalone: true, selector: "fb-flow-canvas", inputs: { selectedName: { classPropertyName: "selectedName", publicName: "selectedName", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, isEditable: { classPropertyName: "isEditable", publicName: "isEditable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", nodeOpened: "nodeOpened", nodeRemoveRequested: "nodeRemoveRequested", nodeDuplicateRequested: "nodeDuplicateRequested", elementDropped: "elementDropped" }, providers: [provideFFlow(withA11y())], viewQueries: [{ propertyName: "canvas", first: true, predicate: FCanvasComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\r\n  Gerarchia obbligatoria: f-flow > f-canvas > fNode / f-connection.\r\n  I `@for` sono direttamente dentro <f-canvas>: nessun wrapper, quindi non serve\r\n  `ngProjectAs` (che sarebbe indispensabile con blocchi annidati).\r\n-->\r\n<f-flow\r\n  fDraggable\r\n  (fCreateConnection)=\"onCreateConnection($event)\"\r\n  (fReassignConnection)=\"onReassignConnection($event)\"\r\n  (fMoveNodes)=\"onMoveNodes($event)\"\r\n  (fSelectionChange)=\"onSelectionChange($event)\"\r\n  (fDeleteSelected)=\"onDeleteSelected($event)\"\r\n  (fCreateNode)=\"onCreateNode($event)\"\r\n  (fNodesRendered)=\"onNodesRendered()\"\r\n>\r\n  <!--\r\n    `#canvas` + `(fCanvasChange)`: il primo serve per chiamare `fitToScreen()`, il secondo per\r\n    sapere che l'utente ha mosso la vista. `[debounceTime]` non si imposta: l'evento serve solo\r\n    ad accendere un flag, non a ricalcolare niente.\r\n  -->\r\n  <f-canvas fZoom #canvas (fCanvasChange)=\"onCanvasChange()\">\r\n    <f-background>\r\n      <f-circle-pattern />\r\n    </f-background>\r\n\r\n    @for (edge of edges(); track edge.id) {\r\n      <f-connection\r\n        [fConnectionId]=\"edge.id\"\r\n        [fSourceId]=\"edge.sourceId\"\r\n        [fTargetId]=\"edge.targetId\"\r\n        fBehavior=\"floating\"\r\n        [fType]=\"edge.isGoTo ? 'segment' : 'bezier'\"\r\n        [class]=\"'fb-edge fb-edge--' + edge.kind + (edge.isGoTo ? ' fb-edge--goto' : '')\"\r\n      >\r\n        <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n        @if (edge.label) {\r\n          <div fConnectionContent class=\"fb-edge-label\">{{ edge.label }}</div>\r\n        }\r\n      </f-connection>\r\n    }\r\n\r\n    @for (node of nodes(); track node.id) {\r\n      <div\r\n        fNode\r\n        fDragHandle\r\n        [fNodeId]=\"node.id\"\r\n        [fNodePosition]=\"node.position\"\r\n        [class]=\"'fb-node ' + categoryClass(node) + ' ' + node.widthClass\"\r\n        [class.fb-node--start]=\"node.isStart\"\r\n        [class.fb-node--selected]=\"isSelected(node)\"\r\n        [class.fb-node--unreachable]=\"!node.isReachable\"\r\n        [class.fb-node--error]=\"node.severity === 'Error'\"\r\n        [class.fb-node--warning]=\"node.severity === 'Warning'\"\r\n        (dblclick)=\"onNodeDoubleClick(node.name)\"\r\n      >\r\n        <!--\r\n          Lo Start non ha ingresso: e' il punto di partenza (\u00A73.4).\r\n          `fConnectorConnectableSide` e' cio' che fa entrare l'arco dall'alto: senza, foblex\r\n          calcola il lato e un arco che scende dal node sopra potrebbe agganciarsi di fianco.\r\n        -->\r\n        @if (!node.isStart) {\r\n          <div\r\n            fConnector\r\n            fConnectorType=\"target\"\r\n            [fConnectorId]=\"targetIdOf(node)\"\r\n            [fConnectorConnectableSide]=\"sides.TOP\"\r\n            fConnectorMultiple=\"true\"\r\n            class=\"fb-connector fb-connector--in\"\r\n            title=\"Ingresso\"\r\n          ></div>\r\n        }\r\n\r\n        <div class=\"fb-node__head\">\r\n          <span class=\"fb-node__icon\" aria-hidden=\"true\">{{ node.icon }}</span>\r\n          <div class=\"fb-node__text\">\r\n            <span class=\"fb-node__title\" [title]=\"node.description || node.label\">{{ node.label }}</span>\r\n            <span class=\"fb-node__sub\">\r\n              {{ node.typeLabel }}\r\n              @if (node.subtitle) {\r\n                <span class=\"fb-node__sub-dot\">\u00B7</span>{{ node.subtitle }}\r\n              }\r\n            </span>\r\n          </div>\r\n          @if (node.hasAutomaticOutput) {\r\n            <!-- L'elemento espone il proprio risultato sotto il proprio nome (\u00A74.5). -->\r\n            <span class=\"fb-node__auto\" title=\"Espone un output automatico referenziabile come \u00AB{{ node.name }}\u00BB\">\r\n              \u0192\r\n            </span>\r\n          }\r\n          <!--\r\n            `fDragBlocker` impedisce che il pointerdown sul bottone diventi un trascinamento\r\n            del node: senza, aprire il dettaglio sposterebbe l'elemento di qualche pixel.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            fDragBlocker\r\n            class=\"fb-node__edit\"\r\n            [attr.aria-label]=\"'Apri il dettaglio di ' + node.label\"\r\n            title=\"Apri il dettaglio\"\r\n            (click)=\"onEditClick($event, node.name)\"\r\n          >\r\n            \u270E\r\n          </button>\r\n          @if (!node.isStart && isEditable()) {\r\n            <!--\r\n              Si mostra solo sul node **selezionato**, non al passaggio del mouse come \u270E:\r\n              cancellare non e' reversibile con un altro clic, e un comando distruttivo che\r\n              appare sotto il puntatore mentre si attraversa il grafo si preme per sbaglio.\r\n              Lo Start non lo espone: un flow senza ingresso non esisterebbe.\r\n            -->\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-node__remove\"\r\n              [attr.aria-label]=\"'Elimina ' + node.label\"\r\n              title=\"Elimina questo elemento (si annulla con \u21B6)\"\r\n              (click)=\"onRemoveClick($event, node.name)\"\r\n            >\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"fb-node__meta\">\r\n          @if (!node.isStart) {\r\n            <span class=\"fb-node__name\" [title]=\"'Nome tecnico: ' + node.name\">{{ node.name }}</span>\r\n          }\r\n          @if (!node.isReachable) {\r\n            <span class=\"fb-badge fb-badge--unreachable\" title=\"Nessun percorso raggiunge questo elemento dallo Start\">\r\n              scollegato\r\n            </span>\r\n          }\r\n          @if (node.issueCount > 0) {\r\n            <span\r\n              class=\"fb-badge\"\r\n              [class.fb-badge--error]=\"node.severity === 'Error'\"\r\n              [class.fb-badge--warning]=\"node.severity === 'Warning'\"\r\n              [class.fb-badge--info]=\"node.severity === 'Info'\"\r\n              [title]=\"node.issueCount + ' rilievi di validazione'\"\r\n            >\r\n              {{ node.issueCount }}\r\n            </span>\r\n          }\r\n          @if (node.danglingOutlets.length > 0) {\r\n            <span\r\n              class=\"fb-badge fb-badge--dangling\"\r\n              [title]=\"'Rami dichiarati senza destinazione: ' + danglingLabels(node)\"\r\n            >\r\n              ramo incompleto\r\n            </span>\r\n          }\r\n        </div>\r\n\r\n        <!--\r\n          Le uscite stanno sul bordo **inferiore**, una per ramo, nell'ordine in cui il modello\r\n          le dichiara: per una Decision e' l'ordine di valutazione delle regole, che e'\r\n          semantico (\u00A75.3), e da sinistra a destra si legge come la lista nell'inspector.\r\n          L'etichetta si mostra solo quando i rami sono piu' di uno: su un `next` unico\r\n          direbbe soltanto \u00ABSuccessivo\u00BB.\r\n        -->\r\n        <div class=\"fb-node__outlets\" [class.fb-node__outlets--labelled]=\"node.showsOutletLabels\">\r\n          @for (outlet of node.outlets; track outlet.key) {\r\n            <div class=\"fb-outlet\">\r\n              @if (node.showsOutletLabels) {\r\n                <span class=\"fb-outlet__label\" [title]=\"outlet.label\">{{ outlet.label }}</span>\r\n              }\r\n              <div\r\n                fConnector\r\n                fConnectorType=\"source\"\r\n                [fConnectorId]=\"connectorIdOf(node, outlet.key)\"\r\n                [fConnectorConnectableSide]=\"sides.BOTTOM\"\r\n                [class]=\"'fb-connector fb-connector--out fb-connector--' + outlet.kind\"\r\n                [title]=\"outlet.label\"\r\n              ></div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Anteprima dell'arco durante il trascinamento. -->\r\n    <f-connection-for-create fBehavior=\"floating\" fType=\"bezier\" class=\"fb-edge fb-edge--creating\">\r\n      <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n    </f-connection-for-create>\r\n\r\n    <f-selection-area />\r\n  </f-canvas>\r\n\r\n  <!--\r\n    Fuori da <f-canvas> come la minimappa: dentro, la trasformazione del canvas se lo\r\n    porterebbe via insieme ai node. `fDragBlocker` perche' il pointerdown non inizi una\r\n    panoramica invece di premere il bottone.\r\n  -->\r\n  <!--\r\n    Sempre nel DOM, nascosto con una classe e non con `@if`: dentro una proiezione di contenuto\r\n    un blocco di controllo e' una complicazione gratuita, e `visibility: hidden` lo toglie\r\n    anche dall'ordine di tabulazione. Il costo e' un bottone in piu' nel DOM, non un rischio.\r\n  -->\r\n  <button\r\n    type=\"button\"\r\n    fDragBlocker\r\n    class=\"fb-btn fb-viewport-reset\"\r\n    [class.fb-viewport-reset--hidden]=\"!hasMovedViewport()\"\r\n    title=\"Rimetti il flow interamente in vista, al centro\"\r\n    (click)=\"resetViewport()\"\r\n  >\r\n    <span class=\"fb-viewport-reset__icon\" aria-hidden=\"true\">\u2922</span>\r\n    Inquadra il flow\r\n  </button>\r\n\r\n  <f-minimap [fMinSize]=\"1200\" class=\"fb-minimap\" />\r\n</f-flow>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:var(--fb-canvas-bg, #f4f5f7)}f-flow{display:block;width:100%;height:100%}.fb-minimap{position:absolute;right:14px;bottom:14px;width:190px;height:130px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));overflow:hidden}.fb-viewport-reset{position:absolute;right:14px;bottom:152px;z-index:1;border-radius:var(--fb-radius-xs, 6px);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));font-size:11px;transition:opacity .15s ease,visibility .15s ease}.fb-viewport-reset--hidden{opacity:0;visibility:hidden}.fb-viewport-reset__icon{font-size:13px;line-height:1;color:var(--fb-text-muted, #667085)}.fb-node{position:absolute;display:flex;flex-direction:column;box-sizing:border-box;width:240px;padding:0;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-lg, 12px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));font:inherit;cursor:grab;-webkit-user-select:none;user-select:none;transition:box-shadow .12s ease,border-color .12s ease}.fb-node--outlets-3{width:304px}.fb-node--outlets-4{width:380px}.fb-node--outlets-5{width:456px}.fb-node--outlets-6{width:520px}.fb-node:hover{box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%))}.fb-node--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:0 0 0 3px color-mix(in srgb,var(--fb-accent, #4f6ef7) 22%,transparent)}.fb-node--unreachable{border-style:dashed;opacity:.8}.fb-node--error{border-color:var(--fb-error, #c9372c)}.fb-node--warning{border-color:var(--fb-warning, #b7791f)}.fb-node__head{display:flex;align-items:center;gap:8px;padding:10px 10px 6px 12px}.fb-node__icon{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:var(--fb-radius-sm, 8px);background:var(--fb-node-accent, #667085);color:#fff;font-size:14px;line-height:1}.cat-start{--fb-node-accent: #22a06b}.cat-screen{--fb-node-accent: #3b82f6}.cat-logic{--fb-node-accent: #8b5cf6}.cat-data{--fb-node-accent: #06b6d4}.cat-action{--fb-node-accent: #f59e0b}.cat-flow{--fb-node-accent: #14b8a6}.cat-other{--fb-node-accent: #667085}.fb-node__text{flex:1;min-width:0}.fb-node__title{display:block;font-size:13px;font-weight:600;line-height:17px;color:var(--fb-text, #1a1c23);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub{display:block;margin-top:1px;font-size:11px;line-height:14px;color:var(--fb-text-muted, #6b7086);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub-dot{margin:0 4px;color:var(--fb-text-subtle, #98a2b3)}.fb-node__auto{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--fb-accent, #4f6ef7);cursor:help}.fb-node__edit{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:12px;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease}.fb-node:hover .fb-node__edit,.fb-node--selected .fb-node__edit,.fb-node__edit:focus-visible{opacity:1}.fb-node__edit:hover{background:var(--fb-surface-alt, #f7f8fa);color:var(--fb-text, #1a1c23)}.fb-node__remove{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:15px;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease,color .12s ease}.fb-node--selected .fb-node__remove,.fb-node__remove:focus-visible{opacity:1}.fb-node__remove:hover{background:color-mix(in srgb,var(--fb-error, #c9372c) 12%,transparent);color:var(--fb-error, #c9372c)}.fb-node__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:14px;padding:0 12px 6px}.fb-node__name{flex:0 1 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--fb-text-subtle, #98a2b3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-badge{padding:1px 6px;border-radius:10px;background:var(--fb-badge-bg, #eef0f4);font-size:10px;font-weight:600;color:var(--fb-text-muted, #6b7086);white-space:nowrap;cursor:help}.fb-badge--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 14%,transparent);color:var(--fb-error, #c9372c)}.fb-badge--warning{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-badge--info{background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 12%,transparent);color:var(--fb-accent, #4f6ef7)}.fb-badge--unreachable,.fb-badge--dangling{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-node__outlets{display:flex;align-items:flex-end;justify-content:space-evenly;gap:4px;padding:0 8px 4px}.fb-node__outlets--labelled{padding-top:5px;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-outlet{display:flex;flex:1 1 0;flex-direction:column;align-items:center;gap:2px;min-width:0}.fb-outlet__label{max-width:100%;font-size:10px;line-height:13px;color:var(--fb-text-muted, #6b7086);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-connector{box-sizing:border-box;width:12px;height:12px;flex:0 0 auto;border:2px solid var(--fb-surface, #fff);border-radius:50%;background:var(--fb-connector, #98a2b3);cursor:crosshair;transition:transform .12s ease,box-shadow .12s ease}f-flow .fb-connector--out{position:relative;inset:auto;margin-bottom:-12px}.fb-connector--out:hover{transform:scale(1.2)}f-flow .fb-connector--in{position:absolute;inset:-2px auto auto 50%;width:24px;height:4px;border:0;border-radius:2px;transform:translate(-50%);background:var(--fb-border-strong, #cfd4de)}.fb-connector--out{--ff-connector-connected-color: var(--fb-connector, #98a2b3)}.fb-connector--Next,.fb-connector--Start,.fb-connector--LoopNext{--fb-connector: var(--fb-edge-next, #98a2b3)}.fb-connector--Rule,.fb-connector--WaitEvent{--fb-connector: var(--fb-edge-rule, #8b5cf6)}.fb-connector--Default,.fb-connector--LoopEnd{--fb-connector: var(--fb-edge-default, #06b6d4)}.fb-connector--Fault{--fb-connector: var(--fb-edge-fault, #dc2626)}.fb-connector--Timeout,.fb-connector--ScheduledPath{--fb-connector: var(--fb-edge-timeout, #f59e0b)}.fb-connector.f-connector-connectable{box-shadow:0 0 0 4px color-mix(in srgb,var(--fb-accent, #4f6ef7) 28%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: FFlowModule }, { kind: "component", type: i1.FFlowComponent, selector: "f-flow", inputs: ["fFlowId", "fCache"], outputs: ["fNodesRendered", "fFullRendered", "fLoaded"] }, { kind: "component", type: i1.FCanvasComponent, selector: "f-canvas", inputs: ["position", "scale", "debounceTime", "fLayers"], outputs: ["fCanvasChange"] }, { kind: "component", type: i1.FBackgroundComponent, selector: "f-background" }, { kind: "component", type: i1.FCirclePatternComponent, selector: "f-circle-pattern", inputs: ["id", "color", "radius"] }, { kind: "directive", type: i1.FZoomDirective, selector: "f-canvas[fZoom]", inputs: ["fZoom", "fWheelTrigger", "fDblClickTrigger", "fZoomMinimum", "fZoomMaximum", "fZoomStep", "fPinchStep", "fZoomDblClickStep"] }, { kind: "component", type: i1.FSelectionArea, selector: "f-selection-area", inputs: ["fTrigger"] }, { kind: "directive", type: i1.FConnectionContent, selector: "[fConnectionContent]", inputs: ["position", "offset", "align"] }, { kind: "component", type: i1.FConnectionMarkerArrow, selector: "f-connection-marker-arrow", inputs: ["type"] }, { kind: "component", type: i1.FConnectionComponent, selector: "f-connection", inputs: ["fConnectionId", "fSourceId", "fTargetId", "fOutputId", "fInputId", "fRadius", "fOffset", "fBehavior", "fType", "fSelectionDisabled", "fReassignableStart", "fReassignDisabled", "fSourceSide", "fTargetSide", "fInputSide", "fOutputSide"], exportAs: ["fComponent"] }, { kind: "component", type: i1.FConnectionForCreateComponent, selector: "f-connection-for-create", inputs: ["fRadius", "fOffset", "fBehavior", "fType", "fInputSide", "fOutputSide"] }, { kind: "directive", type: i1.FConnectorDirective, selector: "[fConnector]", inputs: ["fConnectorId", "fConnectorType", "fConnectorDisabled", "fConnectorMultiple", "fConnectorCategory", "fConnectorConnectableSide", "fConnectorSelfConnectable", "fCanBeConnectedTo", "fConnectionFromOutlet"], exportAs: ["fConnector"] }, { kind: "component", type: i1.FMinimapComponent, selector: "f-minimap", inputs: ["fMinSize", "fNodeRenderLimit"], exportAs: ["fComponent"] }, { kind: "directive", type: i1.FNodeDirective, selector: "[fNode]", inputs: ["fNodeId", "fNodeParentId", "fNodePosition", "fNodeSize", "fNodeRotate", "fConnectOnNode", "fMinimapClass", "fNodeDraggingDisabled", "fNodeSelectionDisabled", "fIncludePadding", "fAutoExpandOnChildHit", "fAutoSizeToFitChildren"], outputs: ["fNodePositionChange", "fNodeSizeChange", "fNodeRotateChange"], exportAs: ["fComponent"] }, { kind: "directive", type: i1.FDragHandleDirective, selector: "[fDragHandle]" }, { kind: "directive", type: i1.FDragBlockerDirective, selector: "[fDragBlocker]" }, { kind: "directive", type: i1.FDraggableDirective, selector: "f-flow[fDraggable]", inputs: ["fDraggableDisabled", "fDropToGroup", "fMultiSelectTrigger", "fReassignConnectionTrigger", "fCreateConnectionTrigger", "fConnectionWaypointsTrigger", "fMoveControlPointTrigger", "fNodeResizeTrigger", "fNodeRotateTrigger", "fNodeMoveTrigger", "fCanvasMoveTrigger", "fExternalItemTrigger", "fEmitOnNodeIntersect", "vCellSize", "hCellSize", "fCellSizeWhileDragging"], outputs: ["fSelectionChange", "fDeleteSelected", "fNodeIntersectedWithConnections", "fNodeConnectionsIntersection", "fCreateNode", "fMoveNodes", "fReassignConnection", "fCreateConnection", "fConnectionWaypointsChanged", "fDropToGroup", "fDragStarted", "fDragEnded"], exportAs: ["fDraggable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlowCanvasComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fb-flow-canvas', standalone: true, imports: [FFlowModule], changeDetection: ChangeDetectionStrategy.OnPush, 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>\r\n  <f-canvas fZoom>\r\n    <f-background>\r\n      <f-circle-pattern />\r\n    </f-background>\r\n\r\n    @for (edge of edges(); track edge.id) {\r\n      <f-connection\r\n        [fConnectionId]=\"edge.id\"\r\n        [fSourceId]=\"edge.sourceId\"\r\n        [fTargetId]=\"edge.targetId\"\r\n        fBehavior=\"floating\"\r\n        [fType]=\"edge.isGoTo ? 'segment' : 'bezier'\"\r\n        [class]=\"'fb-edge fb-edge--' + edge.kind + (edge.isGoTo ? ' fb-edge--goto' : '')\"\r\n      >\r\n        <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n        @if (edge.label) {\r\n          <div fConnectionContent class=\"fb-edge-label\">{{ edge.label }}</div>\r\n        }\r\n      </f-connection>\r\n    }\r\n\r\n    @for (node of nodes(); track node.id) {\r\n      <div\r\n        fNode\r\n        fDragHandle\r\n        [fNodeId]=\"node.id\"\r\n        [fNodePosition]=\"node.position\"\r\n        [class]=\"'fb-node ' + categoryClass(node) + ' ' + node.widthClass\"\r\n        [class.fb-node--start]=\"node.isStart\"\r\n        [class.fb-node--selected]=\"isSelected(node)\"\r\n        [class.fb-node--unreachable]=\"!node.isReachable\"\r\n        [class.fb-node--error]=\"node.severity === 'Error'\"\r\n        [class.fb-node--warning]=\"node.severity === 'Warning'\"\r\n        (dblclick)=\"onNodeDoubleClick(node.name)\"\r\n      >\r\n        <!--\r\n          Lo Start non ha ingresso: e' il punto di partenza (\u00A73.4).\r\n          `fConnectorConnectableSide` e' cio' che fa entrare l'arco dall'alto: senza, foblex\r\n          calcola il lato e un arco che scende dal node sopra potrebbe agganciarsi di fianco.\r\n        -->\r\n        @if (!node.isStart) {\r\n          <div\r\n            fConnector\r\n            fConnectorType=\"target\"\r\n            [fConnectorId]=\"targetIdOf(node)\"\r\n            [fConnectorConnectableSide]=\"sides.TOP\"\r\n            fConnectorMultiple=\"true\"\r\n            class=\"fb-connector fb-connector--in\"\r\n            title=\"Ingresso\"\r\n          ></div>\r\n        }\r\n\r\n        <div class=\"fb-node__head\">\r\n          <span class=\"fb-node__icon\" aria-hidden=\"true\">{{ node.icon }}</span>\r\n          <div class=\"fb-node__text\">\r\n            <span class=\"fb-node__title\" [title]=\"node.description || node.label\">{{ node.label }}</span>\r\n            <span class=\"fb-node__sub\">\r\n              {{ node.typeLabel }}\r\n              @if (node.subtitle) {\r\n                <span class=\"fb-node__sub-dot\">\u00B7</span>{{ node.subtitle }}\r\n              }\r\n            </span>\r\n          </div>\r\n          @if (node.hasAutomaticOutput) {\r\n            <!-- L'elemento espone il proprio risultato sotto il proprio nome (\u00A74.5). -->\r\n            <span class=\"fb-node__auto\" title=\"Espone un output automatico referenziabile come \u00AB{{ node.name }}\u00BB\">\r\n              \u0192\r\n            </span>\r\n          }\r\n          <!--\r\n            `fDragBlocker` impedisce che il pointerdown sul bottone diventi un trascinamento\r\n            del node: senza, aprire il dettaglio sposterebbe l'elemento di qualche pixel.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            fDragBlocker\r\n            class=\"fb-node__edit\"\r\n            [attr.aria-label]=\"'Apri il dettaglio di ' + node.label\"\r\n            title=\"Apri il dettaglio\"\r\n            (click)=\"onEditClick($event, node.name)\"\r\n          >\r\n            \u270E\r\n          </button>\r\n        </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.3), 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  <f-minimap [fMinSize]=\"1200\" class=\"fb-minimap\" />\r\n</f-flow>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:var(--fb-canvas-bg, #f4f5f7)}f-flow{display:block;width:100%;height:100%}.fb-minimap{position:absolute;right:14px;bottom:14px;width:190px;height:130px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));overflow:hidden}.fb-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__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:14px;padding:0 12px 6px}.fb-node__name{flex:0 1 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--fb-text-subtle, #98a2b3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-badge{padding:1px 6px;border-radius:10px;background:var(--fb-badge-bg, #eef0f4);font-size:10px;font-weight:600;color:var(--fb-text-muted, #6b7086);white-space:nowrap;cursor:help}.fb-badge--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 14%,transparent);color:var(--fb-error, #c9372c)}.fb-badge--warning{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-badge--info{background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 12%,transparent);color:var(--fb-accent, #4f6ef7)}.fb-badge--unreachable,.fb-badge--dangling{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-node__outlets{display:flex;align-items:flex-end;justify-content:space-evenly;gap:4px;padding:0 8px 4px}.fb-node__outlets--labelled{padding-top:5px;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-outlet{display:flex;flex:1 1 0;flex-direction:column;align-items:center;gap:2px;min-width:0}.fb-outlet__label{max-width:100%;font-size:10px;line-height:13px;color:var(--fb-text-muted, #6b7086);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-connector{box-sizing:border-box;width:12px;height:12px;flex:0 0 auto;border:2px solid var(--fb-surface, #fff);border-radius:50%;background:var(--fb-connector, #98a2b3);cursor:crosshair;transition:transform .12s ease,box-shadow .12s ease}f-flow .fb-connector--out{position:relative;inset:auto;margin-bottom:-12px}.fb-connector--out:hover{transform:scale(1.2)}f-flow .fb-connector--in{position:absolute;inset:-2px auto auto 50%;width:24px;height:4px;border:0;border-radius:2px;transform:translate(-50%);background:var(--fb-border-strong, #cfd4de)}.fb-connector--out{--ff-connector-connected-color: var(--fb-connector, #98a2b3)}.fb-connector--Next,.fb-connector--Start,.fb-connector--LoopNext{--fb-connector: var(--fb-edge-next, #98a2b3)}.fb-connector--Rule,.fb-connector--WaitEvent{--fb-connector: var(--fb-edge-rule, #8b5cf6)}.fb-connector--Default,.fb-connector--LoopEnd{--fb-connector: var(--fb-edge-default, #06b6d4)}.fb-connector--Fault{--fb-connector: var(--fb-edge-fault, #dc2626)}.fb-connector--Timeout,.fb-connector--ScheduledPath{--fb-connector: var(--fb-edge-timeout, #f59e0b)}.fb-connector.f-connector-connectable{box-shadow:0 0 0 4px color-mix(in srgb,var(--fb-accent, #4f6ef7) 28%,transparent)}\n"] }]
-        }], propDecorators: { selectedName: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedName", required: false }] }], outline: [{ type: i0.Input, args: [{ isSignal: true, alias: "outline", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], nodeOpened: [{ type: i0.Output, args: ["nodeOpened"] }], nodeRemoveRequested: [{ type: i0.Output, args: ["nodeRemoveRequested"] }], nodeDuplicateRequested: [{ type: i0.Output, args: ["nodeDuplicateRequested"] }], elementDropped: [{ type: i0.Output, args: ["elementDropped"] }] } });
+            args: [{ selector: 'fb-flow-canvas', standalone: true, imports: [FFlowModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideFFlow(withA11y())], template: "<!--\r\n  Gerarchia obbligatoria: f-flow > f-canvas > fNode / f-connection.\r\n  I `@for` sono direttamente dentro <f-canvas>: nessun wrapper, quindi non serve\r\n  `ngProjectAs` (che sarebbe indispensabile con blocchi annidati).\r\n-->\r\n<f-flow\r\n  fDraggable\r\n  (fCreateConnection)=\"onCreateConnection($event)\"\r\n  (fReassignConnection)=\"onReassignConnection($event)\"\r\n  (fMoveNodes)=\"onMoveNodes($event)\"\r\n  (fSelectionChange)=\"onSelectionChange($event)\"\r\n  (fDeleteSelected)=\"onDeleteSelected($event)\"\r\n  (fCreateNode)=\"onCreateNode($event)\"\r\n  (fNodesRendered)=\"onNodesRendered()\"\r\n>\r\n  <!--\r\n    `#canvas` + `(fCanvasChange)`: il primo serve per chiamare `fitToScreen()`, il secondo per\r\n    sapere che l'utente ha mosso la vista. `[debounceTime]` non si imposta: l'evento serve solo\r\n    ad accendere un flag, non a ricalcolare niente.\r\n  -->\r\n  <f-canvas fZoom #canvas (fCanvasChange)=\"onCanvasChange()\">\r\n    <f-background>\r\n      <f-circle-pattern />\r\n    </f-background>\r\n\r\n    @for (edge of edges(); track edge.id) {\r\n      <f-connection\r\n        [fConnectionId]=\"edge.id\"\r\n        [fSourceId]=\"edge.sourceId\"\r\n        [fTargetId]=\"edge.targetId\"\r\n        fBehavior=\"floating\"\r\n        [fType]=\"edge.isGoTo ? 'segment' : 'bezier'\"\r\n        [class]=\"'fb-edge fb-edge--' + edge.kind + (edge.isGoTo ? ' fb-edge--goto' : '')\"\r\n      >\r\n        <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n        @if (edge.label) {\r\n          <div fConnectionContent class=\"fb-edge-label\">{{ edge.label }}</div>\r\n        }\r\n      </f-connection>\r\n    }\r\n\r\n    @for (node of nodes(); track node.id) {\r\n      <div\r\n        fNode\r\n        fDragHandle\r\n        [fNodeId]=\"node.id\"\r\n        [fNodePosition]=\"node.position\"\r\n        [class]=\"'fb-node ' + categoryClass(node) + ' ' + node.widthClass\"\r\n        [class.fb-node--start]=\"node.isStart\"\r\n        [class.fb-node--selected]=\"isSelected(node)\"\r\n        [class.fb-node--unreachable]=\"!node.isReachable\"\r\n        [class.fb-node--error]=\"node.severity === 'Error'\"\r\n        [class.fb-node--warning]=\"node.severity === 'Warning'\"\r\n        (dblclick)=\"onNodeDoubleClick(node.name)\"\r\n      >\r\n        <!--\r\n          Lo Start non ha ingresso: e' il punto di partenza (\u00A73.4).\r\n          `fConnectorConnectableSide` e' cio' che fa entrare l'arco dall'alto: senza, foblex\r\n          calcola il lato e un arco che scende dal node sopra potrebbe agganciarsi di fianco.\r\n        -->\r\n        @if (!node.isStart) {\r\n          <div\r\n            fConnector\r\n            fConnectorType=\"target\"\r\n            [fConnectorId]=\"targetIdOf(node)\"\r\n            [fConnectorConnectableSide]=\"sides.TOP\"\r\n            fConnectorMultiple=\"true\"\r\n            class=\"fb-connector fb-connector--in\"\r\n            title=\"Ingresso\"\r\n          ></div>\r\n        }\r\n\r\n        <div class=\"fb-node__head\">\r\n          <span class=\"fb-node__icon\" aria-hidden=\"true\">{{ node.icon }}</span>\r\n          <div class=\"fb-node__text\">\r\n            <span class=\"fb-node__title\" [title]=\"node.description || node.label\">{{ node.label }}</span>\r\n            <span class=\"fb-node__sub\">\r\n              {{ node.typeLabel }}\r\n              @if (node.subtitle) {\r\n                <span class=\"fb-node__sub-dot\">\u00B7</span>{{ node.subtitle }}\r\n              }\r\n            </span>\r\n          </div>\r\n          @if (node.hasAutomaticOutput) {\r\n            <!-- L'elemento espone il proprio risultato sotto il proprio nome (\u00A74.5). -->\r\n            <span class=\"fb-node__auto\" title=\"Espone un output automatico referenziabile come \u00AB{{ node.name }}\u00BB\">\r\n              \u0192\r\n            </span>\r\n          }\r\n          <!--\r\n            `fDragBlocker` impedisce che il pointerdown sul bottone diventi un trascinamento\r\n            del node: senza, aprire il dettaglio sposterebbe l'elemento di qualche pixel.\r\n          -->\r\n          <button\r\n            type=\"button\"\r\n            fDragBlocker\r\n            class=\"fb-node__edit\"\r\n            [attr.aria-label]=\"'Apri il dettaglio di ' + node.label\"\r\n            title=\"Apri il dettaglio\"\r\n            (click)=\"onEditClick($event, node.name)\"\r\n          >\r\n            \u270E\r\n          </button>\r\n          @if (!node.isStart && isEditable()) {\r\n            <!--\r\n              Si mostra solo sul node **selezionato**, non al passaggio del mouse come \u270E:\r\n              cancellare non e' reversibile con un altro clic, e un comando distruttivo che\r\n              appare sotto il puntatore mentre si attraversa il grafo si preme per sbaglio.\r\n              Lo Start non lo espone: un flow senza ingresso non esisterebbe.\r\n            -->\r\n            <button\r\n              type=\"button\"\r\n              fDragBlocker\r\n              class=\"fb-node__remove\"\r\n              [attr.aria-label]=\"'Elimina ' + node.label\"\r\n              title=\"Elimina questo elemento (si annulla con \u21B6)\"\r\n              (click)=\"onRemoveClick($event, node.name)\"\r\n            >\r\n              \u00D7\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"fb-node__meta\">\r\n          @if (!node.isStart) {\r\n            <span class=\"fb-node__name\" [title]=\"'Nome tecnico: ' + node.name\">{{ node.name }}</span>\r\n          }\r\n          @if (!node.isReachable) {\r\n            <span class=\"fb-badge fb-badge--unreachable\" title=\"Nessun percorso raggiunge questo elemento dallo Start\">\r\n              scollegato\r\n            </span>\r\n          }\r\n          @if (node.issueCount > 0) {\r\n            <span\r\n              class=\"fb-badge\"\r\n              [class.fb-badge--error]=\"node.severity === 'Error'\"\r\n              [class.fb-badge--warning]=\"node.severity === 'Warning'\"\r\n              [class.fb-badge--info]=\"node.severity === 'Info'\"\r\n              [title]=\"node.issueCount + ' rilievi di validazione'\"\r\n            >\r\n              {{ node.issueCount }}\r\n            </span>\r\n          }\r\n          @if (node.danglingOutlets.length > 0) {\r\n            <span\r\n              class=\"fb-badge fb-badge--dangling\"\r\n              [title]=\"'Rami dichiarati senza destinazione: ' + danglingLabels(node)\"\r\n            >\r\n              ramo incompleto\r\n            </span>\r\n          }\r\n        </div>\r\n\r\n        <!--\r\n          Le uscite stanno sul bordo **inferiore**, una per ramo, nell'ordine in cui il modello\r\n          le dichiara: per una Decision e' l'ordine di valutazione delle regole, che e'\r\n          semantico (\u00A75.3), e da sinistra a destra si legge come la lista nell'inspector.\r\n          L'etichetta si mostra solo quando i rami sono piu' di uno: su un `next` unico\r\n          direbbe soltanto \u00ABSuccessivo\u00BB.\r\n        -->\r\n        <div class=\"fb-node__outlets\" [class.fb-node__outlets--labelled]=\"node.showsOutletLabels\">\r\n          @for (outlet of node.outlets; track outlet.key) {\r\n            <div class=\"fb-outlet\">\r\n              @if (node.showsOutletLabels) {\r\n                <span class=\"fb-outlet__label\" [title]=\"outlet.label\">{{ outlet.label }}</span>\r\n              }\r\n              <div\r\n                fConnector\r\n                fConnectorType=\"source\"\r\n                [fConnectorId]=\"connectorIdOf(node, outlet.key)\"\r\n                [fConnectorConnectableSide]=\"sides.BOTTOM\"\r\n                [class]=\"'fb-connector fb-connector--out fb-connector--' + outlet.kind\"\r\n                [title]=\"outlet.label\"\r\n              ></div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- Anteprima dell'arco durante il trascinamento. -->\r\n    <f-connection-for-create fBehavior=\"floating\" fType=\"bezier\" class=\"fb-edge fb-edge--creating\">\r\n      <f-connection-marker-arrow [type]=\"markerEnd\" />\r\n    </f-connection-for-create>\r\n\r\n    <f-selection-area />\r\n  </f-canvas>\r\n\r\n  <!--\r\n    Fuori da <f-canvas> come la minimappa: dentro, la trasformazione del canvas se lo\r\n    porterebbe via insieme ai node. `fDragBlocker` perche' il pointerdown non inizi una\r\n    panoramica invece di premere il bottone.\r\n  -->\r\n  <!--\r\n    Sempre nel DOM, nascosto con una classe e non con `@if`: dentro una proiezione di contenuto\r\n    un blocco di controllo e' una complicazione gratuita, e `visibility: hidden` lo toglie\r\n    anche dall'ordine di tabulazione. Il costo e' un bottone in piu' nel DOM, non un rischio.\r\n  -->\r\n  <button\r\n    type=\"button\"\r\n    fDragBlocker\r\n    class=\"fb-btn fb-viewport-reset\"\r\n    [class.fb-viewport-reset--hidden]=\"!hasMovedViewport()\"\r\n    title=\"Rimetti il flow interamente in vista, al centro\"\r\n    (click)=\"resetViewport()\"\r\n  >\r\n    <span class=\"fb-viewport-reset__icon\" aria-hidden=\"true\">\u2922</span>\r\n    Inquadra il flow\r\n  </button>\r\n\r\n  <f-minimap [fMinSize]=\"1200\" class=\"fb-minimap\" />\r\n</f-flow>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:var(--fb-canvas-bg, #f4f5f7)}f-flow{display:block;width:100%;height:100%}.fb-minimap{position:absolute;right:14px;bottom:14px;width:190px;height:130px;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius, 10px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));overflow:hidden}.fb-viewport-reset{position:absolute;right:14px;bottom:152px;z-index:1;border-radius:var(--fb-radius-xs, 6px);box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));font-size:11px;transition:opacity .15s ease,visibility .15s ease}.fb-viewport-reset--hidden{opacity:0;visibility:hidden}.fb-viewport-reset__icon{font-size:13px;line-height:1;color:var(--fb-text-muted, #667085)}.fb-node{position:absolute;display:flex;flex-direction:column;box-sizing:border-box;width:240px;padding:0;border:1px solid var(--fb-border, #e2e5eb);border-radius:var(--fb-radius-lg, 12px);background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));font:inherit;cursor:grab;-webkit-user-select:none;user-select:none;transition:box-shadow .12s ease,border-color .12s ease}.fb-node--outlets-3{width:304px}.fb-node--outlets-4{width:380px}.fb-node--outlets-5{width:456px}.fb-node--outlets-6{width:520px}.fb-node:hover{box-shadow:var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%))}.fb-node--selected{border-color:var(--fb-accent, #4f6ef7);box-shadow:0 0 0 3px color-mix(in srgb,var(--fb-accent, #4f6ef7) 22%,transparent)}.fb-node--unreachable{border-style:dashed;opacity:.8}.fb-node--error{border-color:var(--fb-error, #c9372c)}.fb-node--warning{border-color:var(--fb-warning, #b7791f)}.fb-node__head{display:flex;align-items:center;gap:8px;padding:10px 10px 6px 12px}.fb-node__icon{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:var(--fb-radius-sm, 8px);background:var(--fb-node-accent, #667085);color:#fff;font-size:14px;line-height:1}.cat-start{--fb-node-accent: #22a06b}.cat-screen{--fb-node-accent: #3b82f6}.cat-logic{--fb-node-accent: #8b5cf6}.cat-data{--fb-node-accent: #06b6d4}.cat-action{--fb-node-accent: #f59e0b}.cat-flow{--fb-node-accent: #14b8a6}.cat-other{--fb-node-accent: #667085}.fb-node__text{flex:1;min-width:0}.fb-node__title{display:block;font-size:13px;font-weight:600;line-height:17px;color:var(--fb-text, #1a1c23);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub{display:block;margin-top:1px;font-size:11px;line-height:14px;color:var(--fb-text-muted, #6b7086);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-node__sub-dot{margin:0 4px;color:var(--fb-text-subtle, #98a2b3)}.fb-node__auto{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--fb-accent, #4f6ef7);cursor:help}.fb-node__edit{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:12px;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease}.fb-node:hover .fb-node__edit,.fb-node--selected .fb-node__edit,.fb-node__edit:focus-visible{opacity:1}.fb-node__edit:hover{background:var(--fb-surface-alt, #f7f8fa);color:var(--fb-text, #1a1c23)}.fb-node__remove{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;padding:0;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-subtle, #98a2b3);font:inherit;font-size:15px;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease,color .12s ease}.fb-node--selected .fb-node__remove,.fb-node__remove:focus-visible{opacity:1}.fb-node__remove:hover{background:color-mix(in srgb,var(--fb-error, #c9372c) 12%,transparent);color:var(--fb-error, #c9372c)}.fb-node__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:14px;padding:0 12px 6px}.fb-node__name{flex:0 1 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--fb-text-subtle, #98a2b3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-badge{padding:1px 6px;border-radius:10px;background:var(--fb-badge-bg, #eef0f4);font-size:10px;font-weight:600;color:var(--fb-text-muted, #6b7086);white-space:nowrap;cursor:help}.fb-badge--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 14%,transparent);color:var(--fb-error, #c9372c)}.fb-badge--warning{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-badge--info{background:color-mix(in srgb,var(--fb-accent, #4f6ef7) 12%,transparent);color:var(--fb-accent, #4f6ef7)}.fb-badge--unreachable,.fb-badge--dangling{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-node__outlets{display:flex;align-items:flex-end;justify-content:space-evenly;gap:4px;padding:0 8px 4px}.fb-node__outlets--labelled{padding-top:5px;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-outlet{display:flex;flex:1 1 0;flex-direction:column;align-items:center;gap:2px;min-width:0}.fb-outlet__label{max-width:100%;font-size:10px;line-height:13px;color:var(--fb-text-muted, #6b7086);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fb-connector{box-sizing:border-box;width:12px;height:12px;flex:0 0 auto;border:2px solid var(--fb-surface, #fff);border-radius:50%;background:var(--fb-connector, #98a2b3);cursor:crosshair;transition:transform .12s ease,box-shadow .12s ease}f-flow .fb-connector--out{position:relative;inset:auto;margin-bottom:-12px}.fb-connector--out:hover{transform:scale(1.2)}f-flow .fb-connector--in{position:absolute;inset:-2px auto auto 50%;width:24px;height:4px;border:0;border-radius:2px;transform:translate(-50%);background:var(--fb-border-strong, #cfd4de)}.fb-connector--out{--ff-connector-connected-color: var(--fb-connector, #98a2b3)}.fb-connector--Next,.fb-connector--Start,.fb-connector--LoopNext{--fb-connector: var(--fb-edge-next, #98a2b3)}.fb-connector--Rule,.fb-connector--WaitEvent{--fb-connector: var(--fb-edge-rule, #8b5cf6)}.fb-connector--Default,.fb-connector--LoopEnd{--fb-connector: var(--fb-edge-default, #06b6d4)}.fb-connector--Fault{--fb-connector: var(--fb-edge-fault, #dc2626)}.fb-connector--Timeout,.fb-connector--ScheduledPath{--fb-connector: var(--fb-edge-timeout, #f59e0b)}.fb-connector.f-connector-connectable{box-shadow:0 0 0 4px color-mix(in srgb,var(--fb-accent, #4f6ef7) 28%,transparent)}\n"] }]
+        }], propDecorators: { selectedName: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedName", required: false }] }], outline: [{ type: i0.Input, args: [{ isSignal: true, alias: "outline", required: false }] }], isEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditable", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], nodeOpened: [{ type: i0.Output, args: ["nodeOpened"] }], nodeRemoveRequested: [{ type: i0.Output, args: ["nodeRemoveRequested"] }], nodeDuplicateRequested: [{ type: i0.Output, args: ["nodeDuplicateRequested"] }], elementDropped: [{ type: i0.Output, args: ["elementDropped"] }], canvas: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FCanvasComponent), { isSignal: true }] }] } });
 
 /**
  * La palette degli elementi — FRONTEND.md §3.2, §11 ("Aggiungere un elemento").
@@ -8118,17 +8258,44 @@ class ProblemsPanelComponent {
     isRunning = computed(() => this.validation.isRunning(), ...(ngDevMode ? [{ debugName: "isRunning" }] : []));
     hasResult = computed(() => this.validation.hasResult(), ...(ngDevMode ? [{ debugName: "hasResult" }] : []));
     lastError = computed(() => this.validation.lastError(), ...(ngDevMode ? [{ debugName: "lastError" }] : []));
-    errorCount = computed(() => this.validation.errorCount(), ...(ngDevMode ? [{ debugName: "errorCount" }] : []));
-    warningCount = computed(() => this.validation.warningCount(), ...(ngDevMode ? [{ debugName: "warningCount" }] : []));
-    infoCount = computed(() => this.validation.infoCount(), ...(ngDevMode ? [{ debugName: "infoCount" }] : []));
+    /**
+     * I conteggi dei chip vengono dai rilievi, non dal risultato: il numero sul filtro deve
+     * essere quello che il filtro apre (vedi `FlowValidationStore.issueCounts`).
+     */
+    counts = computed(() => this.validation.issueCounts(), ...(ngDevMode ? [{ debugName: "counts" }] : []));
+    errorCount = computed(() => this.counts().Error, ...(ngDevMode ? [{ debugName: "errorCount" }] : []));
+    warningCount = computed(() => this.counts().Warning, ...(ngDevMode ? [{ debugName: "warningCount" }] : []));
+    infoCount = computed(() => this.counts().Info, ...(ngDevMode ? [{ debugName: "infoCount" }] : []));
+    totalCount = computed(() => this.validation.issues().length, ...(ngDevMode ? [{ debugName: "totalCount" }] : []));
     issues = computed(() => {
         const filter = this.filter();
         const issues = this.validation.issues();
-        return filter === 'all' ? issues : issues.filter((issue) => issue.severity === filter);
+        if (filter === 'all') {
+            return issues;
+        }
+        // Il secchio, non la stringa: `severity` e' un tipo aperto e un `error` minuscolo o un
+        // `Log` non corrisponderebbero a niente, svuotando la lista senza dire perche'.
+        return issues.filter((issue) => severityBucket(issue.severity) === filter);
     }, ...(ngDevMode ? [{ debugName: "issues" }] : []));
-    isClean = computed(() => this.hasResult() && this.validation.issues().length === 0, ...(ngDevMode ? [{ debugName: "isClean" }] : []));
+    isClean = computed(() => this.hasResult() && this.totalCount() === 0, ...(ngDevMode ? [{ debugName: "isClean" }] : []));
+    /** Ci sono rilievi, ma il filtro attivo non ne mostra nessuno: va detto, non lasciato in bianco. */
+    isFilteredEmpty = computed(() => this.totalCount() > 0 && this.issues().length === 0, ...(ngDevMode ? [{ debugName: "isFilteredEmpty" }] : []));
+    activeFilterLabel = computed(() => {
+        const filter = this.filter();
+        return filter === 'all' ? '' : SEVERITY_LABEL[filter];
+    }, ...(ngDevMode ? [{ debugName: "activeFilterLabel" }] : []));
+    /** Un secondo clic sul filtro attivo torna a «Tutti»: e' l'unico modo per uscirne col mouse dov'e'. */
     setFilter(filter) {
-        this.filter.set(filter);
+        this.filter.set(this.filter() === filter ? 'all' : filter);
+    }
+    bucketOf(issue) {
+        return severityBucket(issue.severity);
+    }
+    iconText(bucket) {
+        return SEVERITY_ICON[bucket];
+    }
+    labelText(bucket) {
+        return SEVERITY_LABEL[bucket];
     }
     focus(issue) {
         // Un rilievo senza `elementName` riguarda il documento: l'ancora piu' vicina e' lo Start.
@@ -8138,11 +8305,11 @@ class ProblemsPanelComponent {
         this.closed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ProblemsPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: ProblemsPanelComponent, isStandalone: true, selector: "fb-problems-panel", outputs: { elementFocused: "elementFocused", closed: "closed" }, ngImport: i0, template: "<header class=\"fb-prob__header\">\r\n  <h2 class=\"fb-prob__title\">\r\n    Problemi\r\n    @if (isRunning()) {\r\n      <span class=\"fb-prob__running\">validazione in corso\u2026</span>\r\n    }\r\n  </h2>\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<nav class=\"fb-prob__filters\" aria-label=\"Filtra per gravita\u2019\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-prob__filter\"\r\n    [class.fb-prob__filter--active]=\"filter() === 'all'\"\r\n    (click)=\"setFilter('all')\"\r\n  >\r\n    Tutti\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-prob__filter fb-prob__filter--error\"\r\n    [class.fb-prob__filter--active]=\"filter() === 'Error'\"\r\n    (click)=\"setFilter('Error')\"\r\n  >\r\n    Errori <span class=\"fb-prob__count\">{{ errorCount() }}</span>\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-prob__filter fb-prob__filter--warning\"\r\n    [class.fb-prob__filter--active]=\"filter() === 'Warning'\"\r\n    (click)=\"setFilter('Warning')\"\r\n  >\r\n    Avvisi <span class=\"fb-prob__count\">{{ warningCount() }}</span>\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-prob__filter\"\r\n    [class.fb-prob__filter--active]=\"filter() === 'Info'\"\r\n    (click)=\"setFilter('Info')\"\r\n  >\r\n    Note <span class=\"fb-prob__count\">{{ infoCount() }}</span>\r\n  </button>\r\n</nav>\r\n\r\n<div class=\"fb-prob__body\">\r\n  @if (lastError()) {\r\n    <p class=\"fb-callout fb-callout--warn\">\r\n      Non e\u2019 stato possibile validare: {{ lastError() }}\r\n    </p>\r\n  }\r\n\r\n  @if (!hasResult() && !isRunning()) {\r\n    <p class=\"fb-empty\">La validazione non e\u2019 ancora stata eseguita.</p>\r\n  }\r\n\r\n  @if (isClean()) {\r\n    <p class=\"fb-empty\">\r\n      Nessun rilievo. Attenzione: non e\u2019 una garanzia di correttezza \u2014 la validazione non verifica i percorsi\r\n      di relazione nei campi, la sintassi delle formule, ne\u2019 action, form e parametri quando il catalogo\r\n      corrispondente non e\u2019 popolato.\r\n    </p>\r\n  }\r\n\r\n  <ul class=\"fb-prob__list\">\r\n    <!-- `$index`: due rilievi possono avere codice, elemento e path identici (due condizioni\r\n         incomplete nella stessa regola), e una chiave duplicata e' un errore di Angular. -->\r\n    @for (issue of issues(); track $index) {\r\n      <li\r\n        class=\"fb-prob__item\"\r\n        [class.fb-prob__item--error]=\"issue.severity === 'Error'\"\r\n        [class.fb-prob__item--warning]=\"issue.severity === 'Warning'\"\r\n      >\r\n        <button type=\"button\" class=\"fb-prob__link\" (click)=\"focus(issue)\">\r\n          <span class=\"fb-prob__message\">{{ issue.message }}</span>\r\n          <span class=\"fb-prob__meta\">\r\n            <code>{{ issue.code }}</code>\r\n            @if (issue.elementName) {\r\n              \u00B7 {{ issue.elementName }}\r\n            }\r\n            @if (issue.path) {\r\n              \u00B7 {{ issue.path }}\r\n            }\r\n          </span>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n\r\n  @if (errorCount() > 0) {\r\n    <p class=\"fb-prob__note\">\r\n      Gli errori bloccano l\u2019<strong>attivazione</strong>, non il salvataggio: puoi interrompere il lavoro a\r\n      met\u00E0 e riprenderlo.\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--fb-surface, #fff);border-top:1px solid var(--fb-border, #d6dae1)}.fb-prob__header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-prob__title{display:flex;align-items:baseline;gap:8px;margin:0;font-size:13px;font-weight:600;color:var(--fb-text, #1d2939)}.fb-prob__running{font-size:10px;font-weight:400;color:var(--fb-text-subtle, #98a2b3)}.fb-prob__filters{display:flex;gap:3px;padding:5px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-prob__filter{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border:1px solid var(--fb-border-subtle, #e6e9ee);border-radius:12px;background:transparent;color:var(--fb-text-muted, #667085);font:inherit;font-size:11px;cursor:pointer}.fb-prob__filter--active{border-color:var(--fb-accent, #2f6feb);background:color-mix(in srgb,var(--fb-accent, #2f6feb) 10%,transparent);color:var(--fb-accent, #2f6feb);font-weight:600}.fb-prob__filter--error.fb-prob__filter--active{border-color:var(--fb-error, #c9372c);background:color-mix(in srgb,var(--fb-error, #c9372c) 10%,transparent);color:var(--fb-error, #c9372c)}.fb-prob__filter--warning.fb-prob__filter--active{border-color:var(--fb-warning, #b7791f);background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-prob__count{padding:0 4px;border-radius:6px;background:var(--fb-border, #d6dae1);font-size:9px;color:var(--fb-text, #1d2939)}.fb-prob__body{flex:1;min-height:0;overflow-y:auto;padding:8px 12px}.fb-prob__list{margin:0;padding:0;list-style:none}.fb-prob__item{border-left:3px solid var(--fb-text-subtle, #98a2b3);margin-bottom:3px;border-radius:3px;background:var(--fb-surface-alt, #f8f9fb)}.fb-prob__item--error{border-left-color:var(--fb-error, #c9372c)}.fb-prob__item--warning{border-left-color:var(--fb-warning, #b7791f)}.fb-prob__link{display:flex;flex-direction:column;width:100%;padding:5px 8px;border:0;background:transparent;color:var(--fb-text, #1d2939);font:inherit;text-align:left;cursor:pointer}.fb-prob__link:hover{background:color-mix(in srgb,var(--fb-accent, #2f6feb) 6%,transparent)}.fb-prob__message{font-size:12px;line-height:1.4}.fb-prob__meta{font-size:10px;color:var(--fb-text-muted, #667085)}.fb-prob__note{margin:8px 0 0;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: ProblemsPanelComponent, isStandalone: true, selector: "fb-problems-panel", outputs: { elementFocused: "elementFocused", closed: "closed" }, ngImport: i0, template: "<header class=\"fb-prob__header\">\r\n  <h2 class=\"fb-prob__title\">\r\n    Problemi\r\n    @if (isRunning()) {\r\n      <span class=\"fb-prob__running\">validazione in corso\u2026</span>\r\n    }\r\n  </h2>\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<nav class=\"fb-prob__filters\" aria-label=\"Filtra per gravita\u2019\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-prob__filter\"\r\n    [class.fb-prob__filter--active]=\"filter() === 'all'\"\r\n    (click)=\"setFilter('all')\"\r\n  >\r\n    Tutti <span class=\"fb-prob__count\">{{ totalCount() }}</span>\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-prob__filter fb-prob__filter--error\"\r\n    [class.fb-prob__filter--active]=\"filter() === 'Error'\"\r\n    [attr.aria-pressed]=\"filter() === 'Error'\"\r\n    (click)=\"setFilter('Error')\"\r\n  >\r\n    <span class=\"fb-prob__icon fb-prob__icon--error\" aria-hidden=\"true\">\u2715</span>\r\n    Errori <span class=\"fb-prob__count\">{{ errorCount() }}</span>\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-prob__filter fb-prob__filter--warning\"\r\n    [class.fb-prob__filter--active]=\"filter() === 'Warning'\"\r\n    [attr.aria-pressed]=\"filter() === 'Warning'\"\r\n    (click)=\"setFilter('Warning')\"\r\n  >\r\n    <span class=\"fb-prob__icon fb-prob__icon--warning\" aria-hidden=\"true\">!</span>\r\n    Avvisi <span class=\"fb-prob__count\">{{ warningCount() }}</span>\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-prob__filter fb-prob__filter--info\"\r\n    [class.fb-prob__filter--active]=\"filter() === 'Info'\"\r\n    [attr.aria-pressed]=\"filter() === 'Info'\"\r\n    (click)=\"setFilter('Info')\"\r\n  >\r\n    <span class=\"fb-prob__icon fb-prob__icon--info\" aria-hidden=\"true\">i</span>\r\n    Note <span class=\"fb-prob__count\">{{ infoCount() }}</span>\r\n  </button>\r\n</nav>\r\n\r\n<div class=\"fb-prob__body\">\r\n  @if (lastError()) {\r\n    <p class=\"fb-callout fb-callout--warn\">\r\n      Non e\u2019 stato possibile validare: {{ lastError() }}\r\n    </p>\r\n  }\r\n\r\n  @if (!hasResult() && !isRunning()) {\r\n    <p class=\"fb-empty\">La validazione non e\u2019 ancora stata eseguita.</p>\r\n  }\r\n\r\n  @if (isClean()) {\r\n    <p class=\"fb-empty\">\r\n      Nessun rilievo. Attenzione: non e\u2019 una garanzia di correttezza \u2014 la validazione non verifica i percorsi\r\n      di relazione nei campi, la sintassi delle formule, ne\u2019 action, form e parametri quando il catalogo\r\n      corrispondente non e\u2019 popolato.\r\n    </p>\r\n  }\r\n\r\n  @if (isFilteredEmpty()) {\r\n    <p class=\"fb-empty\">\r\n      Nessun rilievo di tipo \u00AB{{ activeFilterLabel() }}\u00BB. Ce ne sono altri: scegli\r\n      <button type=\"button\" class=\"fb-prob__inline-link\" (click)=\"setFilter('all')\">Tutti</button>.\r\n    </p>\r\n  }\r\n\r\n  <ul class=\"fb-prob__list\">\r\n    <!-- `$index`: due rilievi possono avere codice, elemento e path identici (due condizioni\r\n         incomplete nella stessa regola), e una chiave duplicata e' un errore di Angular. -->\r\n    @for (issue of issues(); track $index) {\r\n      <!-- Il secchio si calcola una volta: `severity` e' una stringa aperta e serve\r\n           normalizzata a classe, icona ed etichetta. -->\r\n      @let bucket = bucketOf(issue);\r\n      <li\r\n        class=\"fb-prob__item\"\r\n        [class.fb-prob__item--error]=\"bucket === 'Error'\"\r\n        [class.fb-prob__item--warning]=\"bucket === 'Warning'\"\r\n        [class.fb-prob__item--info]=\"bucket === 'Info'\"\r\n      >\r\n        <button type=\"button\" class=\"fb-prob__link\" (click)=\"focus(issue)\">\r\n          <!-- Il glifo porta il colore: `role=\"img\"` + `aria-label` perche' la gravita\u2019 non\r\n               sia leggibile solo a vista. -->\r\n          <span\r\n            class=\"fb-prob__icon\"\r\n            [class.fb-prob__icon--error]=\"bucket === 'Error'\"\r\n            [class.fb-prob__icon--warning]=\"bucket === 'Warning'\"\r\n            [class.fb-prob__icon--info]=\"bucket === 'Info'\"\r\n            role=\"img\"\r\n            [attr.aria-label]=\"labelText(bucket)\"\r\n            [title]=\"labelText(bucket)\"\r\n            >{{ iconText(bucket) }}</span\r\n          >\r\n          <span class=\"fb-prob__message\">{{ issue.message }}</span>\r\n          <span class=\"fb-prob__meta\">\r\n            <code>{{ issue.code }}</code>\r\n            @if (issue.elementName) {\r\n              \u00B7 {{ issue.elementName }}\r\n            }\r\n            @if (issue.path) {\r\n              \u00B7 {{ issue.path }}\r\n            }\r\n          </span>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n\r\n  @if (errorCount() > 0) {\r\n    <p class=\"fb-prob__note\">\r\n      Gli errori bloccano l\u2019<strong>attivazione</strong>, non il salvataggio: puoi interrompere il lavoro a\r\n      met\u00E0 e riprenderlo.\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--fb-surface, #fff);border-top:1px solid var(--fb-border, #d6dae1)}.fb-prob__header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-prob__title{display:flex;align-items:baseline;gap:8px;margin:0;font-size:13px;font-weight:600;color:var(--fb-text, #1d2939)}.fb-prob__running{font-size:10px;font-weight:400;color:var(--fb-text-subtle, #98a2b3)}.fb-prob__filters{display:flex;gap:3px;padding:5px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-prob__filter{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border:1px solid var(--fb-border-subtle, #e6e9ee);border-radius:12px;background:transparent;color:var(--fb-text-muted, #667085);font:inherit;font-size:11px;cursor:pointer}.fb-prob__filter--active{border-color:var(--fb-accent, #2f6feb);background:color-mix(in srgb,var(--fb-accent, #2f6feb) 10%,transparent);color:var(--fb-accent, #2f6feb);font-weight:600}.fb-prob__filter--error.fb-prob__filter--active{border-color:var(--fb-error, #c9372c);background:color-mix(in srgb,var(--fb-error, #c9372c) 10%,transparent);color:var(--fb-error, #c9372c)}.fb-prob__filter--warning.fb-prob__filter--active{border-color:var(--fb-warning, #b7791f);background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-prob__icon{display:inline-grid;place-items:center;flex:0 0 auto;width:13px;height:13px;border-radius:50%;background:var(--fb-text-subtle, #98a2b3);color:var(--fb-surface, #fff);font-size:9px;font-weight:700;line-height:1}.fb-prob__icon--error{background:var(--fb-error, #c9372c)}.fb-prob__icon--warning{background:var(--fb-warning, #b7791f)}.fb-prob__icon--info{background:var(--fb-accent, #2f6feb)}.fb-prob__count{padding:0 4px;border-radius:6px;background:var(--fb-border, #d6dae1);font-size:9px;color:var(--fb-text, #1d2939)}.fb-prob__body{flex:1;min-height:0;overflow-y:auto;padding:8px 12px}.fb-prob__list{margin:0;padding:0;list-style:none}.fb-prob__item{border-left:3px solid var(--fb-text-subtle, #98a2b3);margin-bottom:3px;border-radius:3px;background:var(--fb-surface-alt, #f8f9fb)}.fb-prob__item--error{border-left-color:var(--fb-error, #c9372c)}.fb-prob__item--warning{border-left-color:var(--fb-warning, #b7791f)}.fb-prob__item--info{border-left-color:var(--fb-accent, #2f6feb)}.fb-prob__link{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:7px;align-items:start;width:100%;padding:5px 8px;border:0;background:transparent;color:var(--fb-text, #1d2939);font:inherit;text-align:left;cursor:pointer}.fb-prob__link:hover{background:color-mix(in srgb,var(--fb-accent, #2f6feb) 6%,transparent)}.fb-prob__link>.fb-prob__icon{grid-column:1;grid-row:1 / span 2;margin-top:2px}.fb-prob__message{grid-column:2;grid-row:1;font-size:12px;line-height:1.4}.fb-prob__meta{grid-column:2;grid-row:2;font-size:10px;color:var(--fb-text-muted, #667085)}.fb-prob__inline-link{padding:0;border:0;background:transparent;color:var(--fb-accent, #2f6feb);font:inherit;text-decoration:underline;cursor:pointer}.fb-prob__note{margin:8px 0 0;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ProblemsPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fb-problems-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"fb-prob__header\">\r\n  <h2 class=\"fb-prob__title\">\r\n    Problemi\r\n    @if (isRunning()) {\r\n      <span class=\"fb-prob__running\">validazione in corso\u2026</span>\r\n    }\r\n  </h2>\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<nav class=\"fb-prob__filters\" aria-label=\"Filtra per gravita\u2019\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-prob__filter\"\r\n    [class.fb-prob__filter--active]=\"filter() === 'all'\"\r\n    (click)=\"setFilter('all')\"\r\n  >\r\n    Tutti\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-prob__filter fb-prob__filter--error\"\r\n    [class.fb-prob__filter--active]=\"filter() === 'Error'\"\r\n    (click)=\"setFilter('Error')\"\r\n  >\r\n    Errori <span class=\"fb-prob__count\">{{ errorCount() }}</span>\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-prob__filter fb-prob__filter--warning\"\r\n    [class.fb-prob__filter--active]=\"filter() === 'Warning'\"\r\n    (click)=\"setFilter('Warning')\"\r\n  >\r\n    Avvisi <span class=\"fb-prob__count\">{{ warningCount() }}</span>\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-prob__filter\"\r\n    [class.fb-prob__filter--active]=\"filter() === 'Info'\"\r\n    (click)=\"setFilter('Info')\"\r\n  >\r\n    Note <span class=\"fb-prob__count\">{{ infoCount() }}</span>\r\n  </button>\r\n</nav>\r\n\r\n<div class=\"fb-prob__body\">\r\n  @if (lastError()) {\r\n    <p class=\"fb-callout fb-callout--warn\">\r\n      Non e\u2019 stato possibile validare: {{ lastError() }}\r\n    </p>\r\n  }\r\n\r\n  @if (!hasResult() && !isRunning()) {\r\n    <p class=\"fb-empty\">La validazione non e\u2019 ancora stata eseguita.</p>\r\n  }\r\n\r\n  @if (isClean()) {\r\n    <p class=\"fb-empty\">\r\n      Nessun rilievo. Attenzione: non e\u2019 una garanzia di correttezza \u2014 la validazione non verifica i percorsi\r\n      di relazione nei campi, la sintassi delle formule, ne\u2019 action, form e parametri quando il catalogo\r\n      corrispondente non e\u2019 popolato.\r\n    </p>\r\n  }\r\n\r\n  <ul class=\"fb-prob__list\">\r\n    <!-- `$index`: due rilievi possono avere codice, elemento e path identici (due condizioni\r\n         incomplete nella stessa regola), e una chiave duplicata e' un errore di Angular. -->\r\n    @for (issue of issues(); track $index) {\r\n      <li\r\n        class=\"fb-prob__item\"\r\n        [class.fb-prob__item--error]=\"issue.severity === 'Error'\"\r\n        [class.fb-prob__item--warning]=\"issue.severity === 'Warning'\"\r\n      >\r\n        <button type=\"button\" class=\"fb-prob__link\" (click)=\"focus(issue)\">\r\n          <span class=\"fb-prob__message\">{{ issue.message }}</span>\r\n          <span class=\"fb-prob__meta\">\r\n            <code>{{ issue.code }}</code>\r\n            @if (issue.elementName) {\r\n              \u00B7 {{ issue.elementName }}\r\n            }\r\n            @if (issue.path) {\r\n              \u00B7 {{ issue.path }}\r\n            }\r\n          </span>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n\r\n  @if (errorCount() > 0) {\r\n    <p class=\"fb-prob__note\">\r\n      Gli errori bloccano l\u2019<strong>attivazione</strong>, non il salvataggio: puoi interrompere il lavoro a\r\n      met\u00E0 e riprenderlo.\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--fb-surface, #fff);border-top:1px solid var(--fb-border, #d6dae1)}.fb-prob__header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-prob__title{display:flex;align-items:baseline;gap:8px;margin:0;font-size:13px;font-weight:600;color:var(--fb-text, #1d2939)}.fb-prob__running{font-size:10px;font-weight:400;color:var(--fb-text-subtle, #98a2b3)}.fb-prob__filters{display:flex;gap:3px;padding:5px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-prob__filter{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border:1px solid var(--fb-border-subtle, #e6e9ee);border-radius:12px;background:transparent;color:var(--fb-text-muted, #667085);font:inherit;font-size:11px;cursor:pointer}.fb-prob__filter--active{border-color:var(--fb-accent, #2f6feb);background:color-mix(in srgb,var(--fb-accent, #2f6feb) 10%,transparent);color:var(--fb-accent, #2f6feb);font-weight:600}.fb-prob__filter--error.fb-prob__filter--active{border-color:var(--fb-error, #c9372c);background:color-mix(in srgb,var(--fb-error, #c9372c) 10%,transparent);color:var(--fb-error, #c9372c)}.fb-prob__filter--warning.fb-prob__filter--active{border-color:var(--fb-warning, #b7791f);background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-prob__count{padding:0 4px;border-radius:6px;background:var(--fb-border, #d6dae1);font-size:9px;color:var(--fb-text, #1d2939)}.fb-prob__body{flex:1;min-height:0;overflow-y:auto;padding:8px 12px}.fb-prob__list{margin:0;padding:0;list-style:none}.fb-prob__item{border-left:3px solid var(--fb-text-subtle, #98a2b3);margin-bottom:3px;border-radius:3px;background:var(--fb-surface-alt, #f8f9fb)}.fb-prob__item--error{border-left-color:var(--fb-error, #c9372c)}.fb-prob__item--warning{border-left-color:var(--fb-warning, #b7791f)}.fb-prob__link{display:flex;flex-direction:column;width:100%;padding:5px 8px;border:0;background:transparent;color:var(--fb-text, #1d2939);font:inherit;text-align:left;cursor:pointer}.fb-prob__link:hover{background:color-mix(in srgb,var(--fb-accent, #2f6feb) 6%,transparent)}.fb-prob__message{font-size:12px;line-height:1.4}.fb-prob__meta{font-size:10px;color:var(--fb-text-muted, #667085)}.fb-prob__note{margin:8px 0 0;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}\n"] }]
+            args: [{ selector: 'fb-problems-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"fb-prob__header\">\r\n  <h2 class=\"fb-prob__title\">\r\n    Problemi\r\n    @if (isRunning()) {\r\n      <span class=\"fb-prob__running\">validazione in corso\u2026</span>\r\n    }\r\n  </h2>\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<nav class=\"fb-prob__filters\" aria-label=\"Filtra per gravita\u2019\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-prob__filter\"\r\n    [class.fb-prob__filter--active]=\"filter() === 'all'\"\r\n    (click)=\"setFilter('all')\"\r\n  >\r\n    Tutti <span class=\"fb-prob__count\">{{ totalCount() }}</span>\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-prob__filter fb-prob__filter--error\"\r\n    [class.fb-prob__filter--active]=\"filter() === 'Error'\"\r\n    [attr.aria-pressed]=\"filter() === 'Error'\"\r\n    (click)=\"setFilter('Error')\"\r\n  >\r\n    <span class=\"fb-prob__icon fb-prob__icon--error\" aria-hidden=\"true\">\u2715</span>\r\n    Errori <span class=\"fb-prob__count\">{{ errorCount() }}</span>\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-prob__filter fb-prob__filter--warning\"\r\n    [class.fb-prob__filter--active]=\"filter() === 'Warning'\"\r\n    [attr.aria-pressed]=\"filter() === 'Warning'\"\r\n    (click)=\"setFilter('Warning')\"\r\n  >\r\n    <span class=\"fb-prob__icon fb-prob__icon--warning\" aria-hidden=\"true\">!</span>\r\n    Avvisi <span class=\"fb-prob__count\">{{ warningCount() }}</span>\r\n  </button>\r\n  <button\r\n    type=\"button\"\r\n    class=\"fb-prob__filter fb-prob__filter--info\"\r\n    [class.fb-prob__filter--active]=\"filter() === 'Info'\"\r\n    [attr.aria-pressed]=\"filter() === 'Info'\"\r\n    (click)=\"setFilter('Info')\"\r\n  >\r\n    <span class=\"fb-prob__icon fb-prob__icon--info\" aria-hidden=\"true\">i</span>\r\n    Note <span class=\"fb-prob__count\">{{ infoCount() }}</span>\r\n  </button>\r\n</nav>\r\n\r\n<div class=\"fb-prob__body\">\r\n  @if (lastError()) {\r\n    <p class=\"fb-callout fb-callout--warn\">\r\n      Non e\u2019 stato possibile validare: {{ lastError() }}\r\n    </p>\r\n  }\r\n\r\n  @if (!hasResult() && !isRunning()) {\r\n    <p class=\"fb-empty\">La validazione non e\u2019 ancora stata eseguita.</p>\r\n  }\r\n\r\n  @if (isClean()) {\r\n    <p class=\"fb-empty\">\r\n      Nessun rilievo. Attenzione: non e\u2019 una garanzia di correttezza \u2014 la validazione non verifica i percorsi\r\n      di relazione nei campi, la sintassi delle formule, ne\u2019 action, form e parametri quando il catalogo\r\n      corrispondente non e\u2019 popolato.\r\n    </p>\r\n  }\r\n\r\n  @if (isFilteredEmpty()) {\r\n    <p class=\"fb-empty\">\r\n      Nessun rilievo di tipo \u00AB{{ activeFilterLabel() }}\u00BB. Ce ne sono altri: scegli\r\n      <button type=\"button\" class=\"fb-prob__inline-link\" (click)=\"setFilter('all')\">Tutti</button>.\r\n    </p>\r\n  }\r\n\r\n  <ul class=\"fb-prob__list\">\r\n    <!-- `$index`: due rilievi possono avere codice, elemento e path identici (due condizioni\r\n         incomplete nella stessa regola), e una chiave duplicata e' un errore di Angular. -->\r\n    @for (issue of issues(); track $index) {\r\n      <!-- Il secchio si calcola una volta: `severity` e' una stringa aperta e serve\r\n           normalizzata a classe, icona ed etichetta. -->\r\n      @let bucket = bucketOf(issue);\r\n      <li\r\n        class=\"fb-prob__item\"\r\n        [class.fb-prob__item--error]=\"bucket === 'Error'\"\r\n        [class.fb-prob__item--warning]=\"bucket === 'Warning'\"\r\n        [class.fb-prob__item--info]=\"bucket === 'Info'\"\r\n      >\r\n        <button type=\"button\" class=\"fb-prob__link\" (click)=\"focus(issue)\">\r\n          <!-- Il glifo porta il colore: `role=\"img\"` + `aria-label` perche' la gravita\u2019 non\r\n               sia leggibile solo a vista. -->\r\n          <span\r\n            class=\"fb-prob__icon\"\r\n            [class.fb-prob__icon--error]=\"bucket === 'Error'\"\r\n            [class.fb-prob__icon--warning]=\"bucket === 'Warning'\"\r\n            [class.fb-prob__icon--info]=\"bucket === 'Info'\"\r\n            role=\"img\"\r\n            [attr.aria-label]=\"labelText(bucket)\"\r\n            [title]=\"labelText(bucket)\"\r\n            >{{ iconText(bucket) }}</span\r\n          >\r\n          <span class=\"fb-prob__message\">{{ issue.message }}</span>\r\n          <span class=\"fb-prob__meta\">\r\n            <code>{{ issue.code }}</code>\r\n            @if (issue.elementName) {\r\n              \u00B7 {{ issue.elementName }}\r\n            }\r\n            @if (issue.path) {\r\n              \u00B7 {{ issue.path }}\r\n            }\r\n          </span>\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n\r\n  @if (errorCount() > 0) {\r\n    <p class=\"fb-prob__note\">\r\n      Gli errori bloccano l\u2019<strong>attivazione</strong>, non il salvataggio: puoi interrompere il lavoro a\r\n      met\u00E0 e riprenderlo.\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--fb-surface, #fff);border-top:1px solid var(--fb-border, #d6dae1)}.fb-prob__header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-prob__title{display:flex;align-items:baseline;gap:8px;margin:0;font-size:13px;font-weight:600;color:var(--fb-text, #1d2939)}.fb-prob__running{font-size:10px;font-weight:400;color:var(--fb-text-subtle, #98a2b3)}.fb-prob__filters{display:flex;gap:3px;padding:5px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee)}.fb-prob__filter{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border:1px solid var(--fb-border-subtle, #e6e9ee);border-radius:12px;background:transparent;color:var(--fb-text-muted, #667085);font:inherit;font-size:11px;cursor:pointer}.fb-prob__filter--active{border-color:var(--fb-accent, #2f6feb);background:color-mix(in srgb,var(--fb-accent, #2f6feb) 10%,transparent);color:var(--fb-accent, #2f6feb);font-weight:600}.fb-prob__filter--error.fb-prob__filter--active{border-color:var(--fb-error, #c9372c);background:color-mix(in srgb,var(--fb-error, #c9372c) 10%,transparent);color:var(--fb-error, #c9372c)}.fb-prob__filter--warning.fb-prob__filter--active{border-color:var(--fb-warning, #b7791f);background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-prob__icon{display:inline-grid;place-items:center;flex:0 0 auto;width:13px;height:13px;border-radius:50%;background:var(--fb-text-subtle, #98a2b3);color:var(--fb-surface, #fff);font-size:9px;font-weight:700;line-height:1}.fb-prob__icon--error{background:var(--fb-error, #c9372c)}.fb-prob__icon--warning{background:var(--fb-warning, #b7791f)}.fb-prob__icon--info{background:var(--fb-accent, #2f6feb)}.fb-prob__count{padding:0 4px;border-radius:6px;background:var(--fb-border, #d6dae1);font-size:9px;color:var(--fb-text, #1d2939)}.fb-prob__body{flex:1;min-height:0;overflow-y:auto;padding:8px 12px}.fb-prob__list{margin:0;padding:0;list-style:none}.fb-prob__item{border-left:3px solid var(--fb-text-subtle, #98a2b3);margin-bottom:3px;border-radius:3px;background:var(--fb-surface-alt, #f8f9fb)}.fb-prob__item--error{border-left-color:var(--fb-error, #c9372c)}.fb-prob__item--warning{border-left-color:var(--fb-warning, #b7791f)}.fb-prob__item--info{border-left-color:var(--fb-accent, #2f6feb)}.fb-prob__link{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:7px;align-items:start;width:100%;padding:5px 8px;border:0;background:transparent;color:var(--fb-text, #1d2939);font:inherit;text-align:left;cursor:pointer}.fb-prob__link:hover{background:color-mix(in srgb,var(--fb-accent, #2f6feb) 6%,transparent)}.fb-prob__link>.fb-prob__icon{grid-column:1;grid-row:1 / span 2;margin-top:2px}.fb-prob__message{grid-column:2;grid-row:1;font-size:12px;line-height:1.4}.fb-prob__meta{grid-column:2;grid-row:2;font-size:10px;color:var(--fb-text-muted, #667085)}.fb-prob__inline-link{padding:0;border:0;background:transparent;color:var(--fb-accent, #2f6feb);font:inherit;text-decoration:underline;cursor:pointer}.fb-prob__note{margin:8px 0 0;font-size:10px;color:var(--fb-text-subtle, #98a2b3)}\n"] }]
         }], propDecorators: { elementFocused: [{ type: i0.Output, args: ["elementFocused"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**
@@ -8877,6 +9044,17 @@ class FlowBuilderComponent {
         });
     }
     processTypes = computed(() => this.dictionaries.processTypes(), ...(ngDevMode ? [{ debugName: "processTypes" }] : []));
+    /**
+     * Il `processType` del documento non e' fra quelli del dizionario. Non e' un caso di scuola:
+     * basta che il dizionario arrivi senza `processTypes`, o che il backend salvi una scrittura
+     * diversa da quella che elenca, e la select — che non ha un'opzione corrispondente — si
+     * presenta bianca su un flow che invece ha il suo tipo. Il template aggiunge l'opzione
+     * mancante; qui si decide solo se serve.
+     */
+    isProcessTypeOutOfCatalog = computed(() => {
+        const current = this.store.document().processType;
+        return !!current && !this.processTypes().some((type) => type.value === current);
+    }, ...(ngDevMode ? [{ debugName: "isProcessTypeOutOfCatalog" }] : []));
     /** `AutoLaunched` + screen e' un errore di validazione: si segnala subito (§13.6). */
     hasScreensInAutoLaunched = computed(() => this.store.document().processType === 'AutoLaunched' &&
         (this.store.document().screens?.length ?? 0) > 0, ...(ngDevMode ? [{ debugName: "hasScreensInAutoLaunched" }] : []));
@@ -9219,7 +9397,7 @@ class FlowBuilderComponent {
             FlowValidationStore,
             FlowEditorSession,
             FlowLayoutService,
-        ], ngImport: i0, template: "<div class=\"fb-builder\" [attr.data-fb-theme]=\"null\">\r\n  <header class=\"fb-top\">\r\n    <div class=\"fb-top__identity\">\r\n      <input\r\n        class=\"fb-top__label\"\r\n        [value]=\"document().label || ''\"\r\n        placeholder=\"Nome del flow\"\r\n        aria-label=\"Nome del flow\"\r\n        [disabled]=\"!isEditable()\"\r\n        (input)=\"setLabel($any($event.target).value)\"\r\n      />\r\n      <div class=\"fb-top__meta\">\r\n        <input\r\n          class=\"fb-top__name\"\r\n          [value]=\"document().fullName || ''\"\r\n          placeholder=\"NomeTecnico\"\r\n          aria-label=\"Nome tecnico del flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (input)=\"setFullName($any($event.target).value)\"\r\n        />\r\n        <select\r\n          class=\"fb-top__process\"\r\n          [fbValue]=\"document().processType || ''\"\r\n          aria-label=\"Tipo di flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (change)=\"setProcessType($any($event.target).value)\"\r\n        >\r\n          @for (type of processTypes(); track type.value) {\r\n            <option [value]=\"type.value\">{{ type.label }}</option>\r\n          }\r\n        </select>\r\n        <span class=\"fb-top__status\">{{ statusLabel() }}</span>\r\n        @if (session.version() !== null) {\r\n          <span class=\"fb-top__version\">v{{ session.version() }}</span>\r\n        }\r\n        @if (isDirty()) {\r\n          <span class=\"fb-top__dirty\" title=\"Ci sono modifiche non salvate\">modificato</span>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"fb-top__actions\">\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canUndo()\" aria-label=\"Annulla\" (click)=\"undo()\">\u21B6</button>\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canRedo()\" aria-label=\"Ripeti\" (click)=\"redo()\">\u21B7</button>\r\n      <button type=\"button\" class=\"fb-btn\" title=\"Ricalcola le posizioni\" (click)=\"autoLayout()\">Riordina</button>\r\n      @if (isDialogMode()) {\r\n        <!-- Il doppio click sul node fa la stessa cosa, ma non si vede: questo comando s\u00EC. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"!selectedName()\"\r\n          title=\"Apri il dettaglio dell\u2019elemento selezionato\"\r\n          (click)=\"openSelectedElement()\"\r\n        >\r\n          Dettaglio\r\n        </button>\r\n      }\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"isBusy()\" (click)=\"validateNow()\">Valida</button>\r\n\r\n      @switch (primaryCommand()) {\r\n        @case ('newVersion') {\r\n          <!-- Su una versione non modificabile il comando primario e' \"Nuova versione\" (\u00A78.1). -->\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"createNewVersion()\">\r\n            Nuova versione\r\n          </button>\r\n        }\r\n        @case ('create') {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Crea\r\n          </button>\r\n        }\r\n        @default {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Salva\r\n          </button>\r\n        }\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"isBusy() || !canActivate()\"\r\n        [title]=\"\r\n          canActivate()\r\n            ? 'Attiva questa versione'\r\n            : 'L\u2019attivazione esige zero errori: correggili nel pannello dei problemi'\r\n        \"\r\n        (click)=\"activate()\"\r\n      >\r\n        Attiva\r\n      </button>\r\n    </div>\r\n  </header>\r\n\r\n  @if (conflict()) {\r\n    <!-- \u00A79.3: qualcun altro ha salvato. Due strade, entrambe offerte. -->\r\n    <div class=\"fb-banner fb-banner--warn\" role=\"alert\">\r\n      <span>\r\n        {{ conflict()?.message }}\r\n        @if (conflict()?.conflictingAuthor) {\r\n          Ha salvato {{ conflict()?.conflictingAuthor }}.\r\n        }\r\n      </span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"reloadAfterConflict()\">Ricarica</button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"saveAsNewVersionAfterConflict()\">\r\n        Salva come nuova versione\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"dismissConflict()\">\u00D7</button>\r\n    </div>\r\n  }\r\n\r\n  @if (notice()) {\r\n    <div\r\n      class=\"fb-banner\"\r\n      [class.fb-banner--error]=\"notice()?.kind === 'error'\"\r\n      role=\"status\"\r\n    >\r\n      <span>{{ notice()?.message }}</span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"dismissNotice()\">\r\n        \u00D7\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (hasScreensInAutoLaunched()) {\r\n    <div class=\"fb-banner fb-banner--error\">\r\n      Un flow AutoLaunched che contiene screen e\u2019 un errore di validazione: non c\u2019e\u2019 nessuno a cui mostrarli.\r\n    </div>\r\n  }\r\n  @if (isOrchestrationWithoutStages()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow Orchestration senza stage di orchestrazione viene segnalato dalla validazione\r\n      (ORCHESTRATION_WITHOUT_STAGES).\r\n    </div>\r\n  }\r\n  @if (hasNoScreensInScreenFlow()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow di tipo Screen senza nessuno screen viene segnalato dalla validazione.\r\n    </div>\r\n  }\r\n  @if (!isEditable()) {\r\n    <div class=\"fb-banner\">\r\n      Questa versione e\u2019 in sola lettura: per modificarla creane una nuova.\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fb-main\">\r\n    <aside class=\"fb-main__palette\">\r\n      <fb-element-palette [processType]=\"document().processType\" (elementPicked)=\"onElementPicked($event)\" />\r\n    </aside>\r\n\r\n    <div class=\"fb-main__center\">\r\n      <fb-flow-canvas\r\n        class=\"fb-main__canvas\"\r\n        [selectedName]=\"selectedName()\"\r\n        [outline]=\"outline()\"\r\n        (selectionChange)=\"onSelectionChange($event)\"\r\n        (nodeOpened)=\"onNodeOpened($event)\"\r\n        (nodeRemoveRequested)=\"onRemoveNode($event)\"\r\n        (nodeDuplicateRequested)=\"onDuplicateNode($event)\"\r\n        (elementDropped)=\"onElementDropped($event)\"\r\n      />\r\n\r\n      @if (showProblems()) {\r\n        <fb-problems-panel\r\n          class=\"fb-main__problems\"\r\n          (elementFocused)=\"focusElement($event)\"\r\n          (closed)=\"toggleProblems()\"\r\n        />\r\n      } @else {\r\n        <button type=\"button\" class=\"fb-main__problems-toggle\" (click)=\"toggleProblems()\">\r\n          Problemi\r\n          @if (errorCount()) {\r\n            <span class=\"fb-main__count fb-main__count--error\">{{ errorCount() }}</span>\r\n          }\r\n          @if (warningCount()) {\r\n            <span class=\"fb-main__count fb-main__count--warn\">{{ warningCount() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <aside class=\"fb-main__side\">\r\n      <nav class=\"fb-side__tabs\" aria-label=\"Pannelli\">\r\n        @if (!isDialogMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-side__tab\"\r\n            [class.fb-side__tab--active]=\"sidePanel() === 'inspector'\"\r\n            (click)=\"setPanel('inspector')\"\r\n          >\r\n            Elemento\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'resources'\"\r\n          (click)=\"setPanel('resources')\"\r\n        >\r\n          Risorse\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'versions'\"\r\n          (click)=\"setPanel('versions')\"\r\n        >\r\n          Versioni\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'debug'\"\r\n          (click)=\"setPanel('debug')\"\r\n        >\r\n          Prova\r\n        </button>\r\n      </nav>\r\n\r\n      <div class=\"fb-side__content\">\r\n        @switch (sidePanel()) {\r\n          @case ('inspector') {\r\n            <fb-element-inspector\r\n              [selectedName]=\"selectedName()\"\r\n              (removeRequested)=\"onRemoveNode($event)\"\r\n              (duplicateRequested)=\"onDuplicateNode($event)\"\r\n              (closed)=\"setPanel('resources')\"\r\n            />\r\n          }\r\n          @case ('resources') {\r\n            <fb-resource-panel (closed)=\"setPanel('inspector')\" />\r\n          }\r\n          @case ('versions') {\r\n            <fb-version-panel\r\n              (versionOpened)=\"openVersion($event)\"\r\n              (notice)=\"showNotice($event)\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n          @case ('debug') {\r\n            <!-- Evidenzia sul canvas senza rubare il pannello: l'interview e\u2019 in corso. -->\r\n            <fb-debug-panel (elementFocused)=\"highlightElement($event)\" (closed)=\"setPanel('inspector')\" />\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <footer class=\"fb-side__footer\">\r\n        <label class=\"fb-btn fb-btn--icon\">\r\n          Importa JSON\r\n          <input type=\"file\" accept=\"application/json,.json\" hidden (change)=\"onFileSelected($event)\" />\r\n        </label>\r\n      </footer>\r\n    </aside>\r\n  </div>\r\n\r\n  @if (isDialogMode() && isDialogOpen() && selectedName()) {\r\n    <!-- La dialog sta dentro il builder, non nel body: la libreria e\u2019 innestabile. -->\r\n    <fb-element-dialog\r\n      [selectedName]=\"selectedName()\"\r\n      (closed)=\"closeDialog()\"\r\n      (removeRequested)=\"onRemoveNode($event)\"\r\n      (duplicateRequested)=\"onDuplicateNode($event)\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;font:inherit;color:var(--fb-text, #1d2939)}.fb-builder{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--fb-border, #e2e5eb);background:var(--fb-surface, #fff)}.fb-top__identity{min-width:0}.fb-top__label{width:100%;max-width:420px;padding:2px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text, #1d2939);font:inherit;font-size:15px;font-weight:600}.fb-top__label:hover:not(:disabled),.fb-top__label:focus-visible{border-color:var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-top__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}.fb-top__name{width:180px;padding:1px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-top__name:hover:not(:disabled),.fb-top__name:focus-visible{border-color:var(--fb-border, #d6dae1)}.fb-top__process{padding:1px 4px;border:1px solid var(--fb-border-subtle, #e6e9ee);border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font:inherit;font-size:11px}.fb-top__status,.fb-top__version,.fb-top__dirty{padding:2px 7px;border-radius:999px;background:var(--fb-surface-sunken, #eef0f4);color:var(--fb-text-muted, #6b7086);font-size:10px;font-weight:600}.fb-top__version{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.fb-top__dirty{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-top__actions{display:flex;flex-wrap:wrap;gap:4px}.fb-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee);background:color-mix(in srgb,var(--fb-accent, #2f6feb) 7%,transparent);font-size:11px}.fb-banner--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-banner--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 10%,transparent);color:var(--fb-error, #c9372c)}.fb-banner>span{flex:1;min-width:200px}.fb-main{display:flex;flex:1;min-height:0}.fb-main__palette{flex:0 0 190px;min-width:0}.fb-main__center{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.fb-main__canvas{flex:1;min-height:0}.fb-main__problems{flex:0 0 auto;height:220px}.fb-main__problems-toggle{display:flex;align-items:center;gap:6px;padding:4px 12px;border:0;border-top:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface-alt, #f8f9fb);color:var(--fb-text-muted, #667085);font:inherit;font-size:11px;cursor:pointer}.fb-main__count{padding:0 5px;border-radius:8px;background:var(--fb-border, #d6dae1);font-size:9px;font-weight:700}.fb-main__count--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 16%,transparent);color:var(--fb-error, #c9372c)}.fb-main__count--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-main__side{display:flex;flex-direction:column;flex:0 0 340px;min-width:0;min-height:0;border-left:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-side__tabs{display:flex;gap:2px;margin:8px 10px;padding:3px;border-radius:var(--fb-radius, 10px);background:var(--fb-surface-sunken, #eef0f4)}.fb-side__tab{flex:1;padding:5px 8px;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-muted, #6b7086);font:inherit;font-size:11px;cursor:pointer;transition:background .12s ease,color .12s ease}.fb-side__tab:hover:not(.fb-side__tab--active){color:var(--fb-text, #1a1c23)}.fb-side__tab--active{background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));color:var(--fb-text, #1a1c23);font-weight:600}.fb-side__content{flex:1;min-height:0;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-side__content>*{height:100%}.fb-side__footer{display:flex;gap:6px;padding:6px 8px;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}@media(max-width:1200px){.fb-main__palette{flex-basis:150px}.fb-main__side{flex-basis:290px}}\n"], dependencies: [{ kind: "component", type: DebugPanelComponent, selector: "fb-debug-panel", outputs: ["closed", "elementFocused"] }, { kind: "component", type: ElementDialogComponent, selector: "fb-element-dialog", inputs: ["selectedName"], outputs: ["closed", "removeRequested", "duplicateRequested"] }, { kind: "component", type: ElementInspectorComponent, selector: "fb-element-inspector", inputs: ["selectedName", "showHeader"], outputs: ["closed", "removeRequested", "duplicateRequested"] }, { kind: "component", type: ElementPaletteComponent, selector: "fb-element-palette", inputs: ["processType"], outputs: ["elementPicked"] }, { kind: "component", type: FlowCanvasComponent, selector: "fb-flow-canvas", inputs: ["selectedName", "outline"], outputs: ["selectionChange", "nodeOpened", "nodeRemoveRequested", "nodeDuplicateRequested", "elementDropped"] }, { kind: "component", type: ProblemsPanelComponent, selector: "fb-problems-panel", outputs: ["elementFocused", "closed"] }, { kind: "component", type: ResourcePanelComponent, selector: "fb-resource-panel", outputs: ["closed"] }, { kind: "component", type: VersionPanelComponent, selector: "fb-version-panel", outputs: ["closed", "versionOpened", "notice"] }, { kind: "directive", type: SelectValueDirective, selector: "select[fbValue]", inputs: ["fbValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"fb-builder\" [attr.data-fb-theme]=\"null\">\r\n  <header class=\"fb-top\">\r\n    <div class=\"fb-top__identity\">\r\n      <input\r\n        class=\"fb-top__label\"\r\n        [value]=\"document().label || ''\"\r\n        placeholder=\"Nome del flow\"\r\n        aria-label=\"Nome del flow\"\r\n        [disabled]=\"!isEditable()\"\r\n        (input)=\"setLabel($any($event.target).value)\"\r\n      />\r\n      <div class=\"fb-top__meta\">\r\n        <input\r\n          class=\"fb-top__name\"\r\n          [value]=\"document().fullName || ''\"\r\n          placeholder=\"NomeTecnico\"\r\n          aria-label=\"Nome tecnico del flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (input)=\"setFullName($any($event.target).value)\"\r\n        />\r\n        <select\r\n          class=\"fb-top__process\"\r\n          [fbValue]=\"document().processType || ''\"\r\n          aria-label=\"Tipo di flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (change)=\"setProcessType($any($event.target).value)\"\r\n        >\r\n          <!--\r\n            Il segnaposto esiste perche' un `<select>` senza opzione corrispondente non e'\r\n            \u00ABvuoto\u00BB: e' a `selectedIndex = -1`, e mostra una casella bianca. Su un flow nuovo\r\n            (`processType` non ancora scelto) e' questa la riga che si vede, disabilitata\r\n            perche' non e' un valore valido da salvare.\r\n          -->\r\n          @if (!document().processType) {\r\n            <option value=\"\" disabled>\u2014 tipo di flow \u2014</option>\r\n          }\r\n          @for (type of processTypes(); track type.value) {\r\n            <option [value]=\"type.value\">{{ type.label }}</option>\r\n          }\r\n          <!--\r\n            Il tipo del documento che il dizionario non conosce: senza questa opzione la select\r\n            resta bianca su un flow che il backend ha salvato con un `processType` fuori\r\n            catalogo (o quando `processTypes` manca dalla risposta dei dizionari), e sembra che\r\n            l'editor non abbia ricaricato il flow. Va mostrato **senza** riscrivere il\r\n            documento: il valore e' del backend, non nostro da correggere.\r\n          -->\r\n          @if (isProcessTypeOutOfCatalog()) {\r\n            <option [value]=\"document().processType\">{{ document().processType }} (fuori catalogo)</option>\r\n          }\r\n        </select>\r\n        <span class=\"fb-top__status\">{{ statusLabel() }}</span>\r\n        @if (session.version() !== null) {\r\n          <span class=\"fb-top__version\">v{{ session.version() }}</span>\r\n        }\r\n        @if (isDirty()) {\r\n          <span class=\"fb-top__dirty\" title=\"Ci sono modifiche non salvate\">modificato</span>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"fb-top__actions\">\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canUndo()\" aria-label=\"Annulla\" (click)=\"undo()\">\u21B6</button>\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canRedo()\" aria-label=\"Ripeti\" (click)=\"redo()\">\u21B7</button>\r\n      <button type=\"button\" class=\"fb-btn\" title=\"Ricalcola le posizioni\" (click)=\"autoLayout()\">Riordina</button>\r\n      @if (isDialogMode()) {\r\n        <!-- Il doppio click sul node fa la stessa cosa, ma non si vede: questo comando s\u00EC. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"!selectedName()\"\r\n          title=\"Apri il dettaglio dell\u2019elemento selezionato\"\r\n          (click)=\"openSelectedElement()\"\r\n        >\r\n          Dettaglio\r\n        </button>\r\n      }\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"isBusy()\" (click)=\"validateNow()\">Valida</button>\r\n\r\n      @switch (primaryCommand()) {\r\n        @case ('newVersion') {\r\n          <!-- Su una versione non modificabile il comando primario e' \"Nuova versione\" (\u00A78.1). -->\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"createNewVersion()\">\r\n            Nuova versione\r\n          </button>\r\n        }\r\n        @case ('create') {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Crea\r\n          </button>\r\n        }\r\n        @default {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Salva\r\n          </button>\r\n        }\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"isBusy() || !canActivate()\"\r\n        [title]=\"\r\n          canActivate()\r\n            ? 'Attiva questa versione'\r\n            : 'L\u2019attivazione esige zero errori: correggili nel pannello dei problemi'\r\n        \"\r\n        (click)=\"activate()\"\r\n      >\r\n        Attiva\r\n      </button>\r\n    </div>\r\n  </header>\r\n\r\n  @if (conflict()) {\r\n    <!-- \u00A79.3: qualcun altro ha salvato. Due strade, entrambe offerte. -->\r\n    <div class=\"fb-banner fb-banner--warn\" role=\"alert\">\r\n      <span>\r\n        {{ conflict()?.message }}\r\n        @if (conflict()?.conflictingAuthor) {\r\n          Ha salvato {{ conflict()?.conflictingAuthor }}.\r\n        }\r\n      </span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"reloadAfterConflict()\">Ricarica</button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"saveAsNewVersionAfterConflict()\">\r\n        Salva come nuova versione\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"dismissConflict()\">\u00D7</button>\r\n    </div>\r\n  }\r\n\r\n  @if (notice()) {\r\n    <div\r\n      class=\"fb-banner\"\r\n      [class.fb-banner--error]=\"notice()?.kind === 'error'\"\r\n      role=\"status\"\r\n    >\r\n      <span>{{ notice()?.message }}</span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"dismissNotice()\">\r\n        \u00D7\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (hasScreensInAutoLaunched()) {\r\n    <div class=\"fb-banner fb-banner--error\">\r\n      Un flow AutoLaunched che contiene screen e\u2019 un errore di validazione: non c\u2019e\u2019 nessuno a cui mostrarli.\r\n    </div>\r\n  }\r\n  @if (isOrchestrationWithoutStages()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow Orchestration senza stage di orchestrazione viene segnalato dalla validazione\r\n      (ORCHESTRATION_WITHOUT_STAGES).\r\n    </div>\r\n  }\r\n  @if (hasNoScreensInScreenFlow()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow di tipo Screen senza nessuno screen viene segnalato dalla validazione.\r\n    </div>\r\n  }\r\n  @if (!isEditable()) {\r\n    <div class=\"fb-banner\">\r\n      Questa versione e\u2019 in sola lettura: per modificarla creane una nuova.\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fb-main\">\r\n    <aside class=\"fb-main__palette\">\r\n      <fb-element-palette [processType]=\"document().processType\" (elementPicked)=\"onElementPicked($event)\" />\r\n    </aside>\r\n\r\n    <div class=\"fb-main__center\">\r\n      <fb-flow-canvas\r\n        class=\"fb-main__canvas\"\r\n        [selectedName]=\"selectedName()\"\r\n        [outline]=\"outline()\"\r\n        [isEditable]=\"isEditable()\"\r\n        (selectionChange)=\"onSelectionChange($event)\"\r\n        (nodeOpened)=\"onNodeOpened($event)\"\r\n        (nodeRemoveRequested)=\"onRemoveNode($event)\"\r\n        (nodeDuplicateRequested)=\"onDuplicateNode($event)\"\r\n        (elementDropped)=\"onElementDropped($event)\"\r\n      />\r\n\r\n      @if (showProblems()) {\r\n        <fb-problems-panel\r\n          class=\"fb-main__problems\"\r\n          (elementFocused)=\"focusElement($event)\"\r\n          (closed)=\"toggleProblems()\"\r\n        />\r\n      } @else {\r\n        <button type=\"button\" class=\"fb-main__problems-toggle\" (click)=\"toggleProblems()\">\r\n          Problemi\r\n          @if (errorCount()) {\r\n            <span class=\"fb-main__count fb-main__count--error\">{{ errorCount() }}</span>\r\n          }\r\n          @if (warningCount()) {\r\n            <span class=\"fb-main__count fb-main__count--warn\">{{ warningCount() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <aside class=\"fb-main__side\">\r\n      <nav class=\"fb-side__tabs\" aria-label=\"Pannelli\">\r\n        @if (!isDialogMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-side__tab\"\r\n            [class.fb-side__tab--active]=\"sidePanel() === 'inspector'\"\r\n            (click)=\"setPanel('inspector')\"\r\n          >\r\n            Elemento\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'resources'\"\r\n          (click)=\"setPanel('resources')\"\r\n        >\r\n          Risorse\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'versions'\"\r\n          (click)=\"setPanel('versions')\"\r\n        >\r\n          Versioni\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'debug'\"\r\n          (click)=\"setPanel('debug')\"\r\n        >\r\n          Prova\r\n        </button>\r\n      </nav>\r\n\r\n      <div class=\"fb-side__content\">\r\n        @switch (sidePanel()) {\r\n          @case ('inspector') {\r\n            <fb-element-inspector\r\n              [selectedName]=\"selectedName()\"\r\n              (removeRequested)=\"onRemoveNode($event)\"\r\n              (duplicateRequested)=\"onDuplicateNode($event)\"\r\n              (closed)=\"setPanel('resources')\"\r\n            />\r\n          }\r\n          @case ('resources') {\r\n            <fb-resource-panel (closed)=\"setPanel('inspector')\" />\r\n          }\r\n          @case ('versions') {\r\n            <fb-version-panel\r\n              (versionOpened)=\"openVersion($event)\"\r\n              (notice)=\"showNotice($event)\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n          @case ('debug') {\r\n            <!-- Evidenzia sul canvas senza rubare il pannello: l'interview e\u2019 in corso. -->\r\n            <fb-debug-panel (elementFocused)=\"highlightElement($event)\" (closed)=\"setPanel('inspector')\" />\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <footer class=\"fb-side__footer\">\r\n        <label class=\"fb-btn fb-btn--icon\">\r\n          Importa JSON\r\n          <input type=\"file\" accept=\"application/json,.json\" hidden (change)=\"onFileSelected($event)\" />\r\n        </label>\r\n      </footer>\r\n    </aside>\r\n  </div>\r\n\r\n  @if (isDialogMode() && isDialogOpen() && selectedName()) {\r\n    <!-- La dialog sta dentro il builder, non nel body: la libreria e\u2019 innestabile. -->\r\n    <fb-element-dialog\r\n      [selectedName]=\"selectedName()\"\r\n      (closed)=\"closeDialog()\"\r\n      (removeRequested)=\"onRemoveNode($event)\"\r\n      (duplicateRequested)=\"onDuplicateNode($event)\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;font:inherit;color:var(--fb-text, #1d2939)}.fb-builder{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--fb-border, #e2e5eb);background:var(--fb-surface, #fff)}.fb-top__identity{min-width:0}.fb-top__label{width:100%;max-width:420px;padding:2px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text, #1d2939);font:inherit;font-size:15px;font-weight:600}.fb-top__label:hover:not(:disabled),.fb-top__label:focus-visible{border-color:var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-top__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}.fb-top__name{width:180px;padding:1px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-top__name:hover:not(:disabled),.fb-top__name:focus-visible{border-color:var(--fb-border, #d6dae1)}.fb-top__process{padding:1px 4px;border:1px solid var(--fb-border-subtle, #e6e9ee);border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font:inherit;font-size:11px}.fb-top__status,.fb-top__version,.fb-top__dirty{padding:2px 7px;border-radius:999px;background:var(--fb-surface-sunken, #eef0f4);color:var(--fb-text-muted, #6b7086);font-size:10px;font-weight:600}.fb-top__version{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.fb-top__dirty{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-top__actions{display:flex;flex-wrap:wrap;gap:4px}.fb-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee);background:color-mix(in srgb,var(--fb-accent, #2f6feb) 7%,transparent);font-size:11px}.fb-banner--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-banner--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 10%,transparent);color:var(--fb-error, #c9372c)}.fb-banner>span{flex:1;min-width:200px}.fb-main{display:flex;flex:1;min-height:0}.fb-main__palette{flex:0 0 190px;min-width:0}.fb-main__center{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.fb-main__canvas{flex:1;min-height:0}.fb-main__problems{flex:0 0 auto;height:220px}.fb-main__problems-toggle{display:flex;align-items:center;gap:6px;padding:4px 12px;border:0;border-top:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface-alt, #f8f9fb);color:var(--fb-text-muted, #667085);font:inherit;font-size:11px;cursor:pointer}.fb-main__count{padding:0 5px;border-radius:8px;background:var(--fb-border, #d6dae1);font-size:9px;font-weight:700}.fb-main__count--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 16%,transparent);color:var(--fb-error, #c9372c)}.fb-main__count--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-main__side{display:flex;flex-direction:column;flex:0 0 340px;min-width:0;min-height:0;border-left:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-side__tabs{display:flex;gap:2px;margin:8px 10px;padding:3px;border-radius:var(--fb-radius, 10px);background:var(--fb-surface-sunken, #eef0f4)}.fb-side__tab{flex:1;padding:5px 8px;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-muted, #6b7086);font:inherit;font-size:11px;cursor:pointer;transition:background .12s ease,color .12s ease}.fb-side__tab:hover:not(.fb-side__tab--active){color:var(--fb-text, #1a1c23)}.fb-side__tab--active{background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));color:var(--fb-text, #1a1c23);font-weight:600}.fb-side__content{flex:1;min-height:0;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-side__content>*{height:100%}.fb-side__footer{display:flex;gap:6px;padding:6px 8px;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}@media(max-width:1200px){.fb-main__palette{flex-basis:150px}.fb-main__side{flex-basis:290px}}\n"], dependencies: [{ kind: "component", type: DebugPanelComponent, selector: "fb-debug-panel", outputs: ["closed", "elementFocused"] }, { kind: "component", type: ElementDialogComponent, selector: "fb-element-dialog", inputs: ["selectedName"], outputs: ["closed", "removeRequested", "duplicateRequested"] }, { kind: "component", type: ElementInspectorComponent, selector: "fb-element-inspector", inputs: ["selectedName", "showHeader"], outputs: ["closed", "removeRequested", "duplicateRequested"] }, { kind: "component", type: ElementPaletteComponent, selector: "fb-element-palette", inputs: ["processType"], outputs: ["elementPicked"] }, { kind: "component", type: FlowCanvasComponent, selector: "fb-flow-canvas", inputs: ["selectedName", "outline", "isEditable"], outputs: ["selectionChange", "nodeOpened", "nodeRemoveRequested", "nodeDuplicateRequested", "elementDropped"] }, { kind: "component", type: ProblemsPanelComponent, selector: "fb-problems-panel", outputs: ["elementFocused", "closed"] }, { kind: "component", type: ResourcePanelComponent, selector: "fb-resource-panel", outputs: ["closed"] }, { kind: "component", type: VersionPanelComponent, selector: "fb-version-panel", outputs: ["closed", "versionOpened", "notice"] }, { kind: "directive", type: SelectValueDirective, selector: "select[fbValue]", inputs: ["fbValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: FlowBuilderComponent, decorators: [{
             type: Component,
@@ -9237,12 +9415,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         FlowValidationStore,
                         FlowEditorSession,
                         FlowLayoutService,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-builder\" [attr.data-fb-theme]=\"null\">\r\n  <header class=\"fb-top\">\r\n    <div class=\"fb-top__identity\">\r\n      <input\r\n        class=\"fb-top__label\"\r\n        [value]=\"document().label || ''\"\r\n        placeholder=\"Nome del flow\"\r\n        aria-label=\"Nome del flow\"\r\n        [disabled]=\"!isEditable()\"\r\n        (input)=\"setLabel($any($event.target).value)\"\r\n      />\r\n      <div class=\"fb-top__meta\">\r\n        <input\r\n          class=\"fb-top__name\"\r\n          [value]=\"document().fullName || ''\"\r\n          placeholder=\"NomeTecnico\"\r\n          aria-label=\"Nome tecnico del flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (input)=\"setFullName($any($event.target).value)\"\r\n        />\r\n        <select\r\n          class=\"fb-top__process\"\r\n          [fbValue]=\"document().processType || ''\"\r\n          aria-label=\"Tipo di flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (change)=\"setProcessType($any($event.target).value)\"\r\n        >\r\n          @for (type of processTypes(); track type.value) {\r\n            <option [value]=\"type.value\">{{ type.label }}</option>\r\n          }\r\n        </select>\r\n        <span class=\"fb-top__status\">{{ statusLabel() }}</span>\r\n        @if (session.version() !== null) {\r\n          <span class=\"fb-top__version\">v{{ session.version() }}</span>\r\n        }\r\n        @if (isDirty()) {\r\n          <span class=\"fb-top__dirty\" title=\"Ci sono modifiche non salvate\">modificato</span>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"fb-top__actions\">\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canUndo()\" aria-label=\"Annulla\" (click)=\"undo()\">\u21B6</button>\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canRedo()\" aria-label=\"Ripeti\" (click)=\"redo()\">\u21B7</button>\r\n      <button type=\"button\" class=\"fb-btn\" title=\"Ricalcola le posizioni\" (click)=\"autoLayout()\">Riordina</button>\r\n      @if (isDialogMode()) {\r\n        <!-- Il doppio click sul node fa la stessa cosa, ma non si vede: questo comando s\u00EC. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"!selectedName()\"\r\n          title=\"Apri il dettaglio dell\u2019elemento selezionato\"\r\n          (click)=\"openSelectedElement()\"\r\n        >\r\n          Dettaglio\r\n        </button>\r\n      }\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"isBusy()\" (click)=\"validateNow()\">Valida</button>\r\n\r\n      @switch (primaryCommand()) {\r\n        @case ('newVersion') {\r\n          <!-- Su una versione non modificabile il comando primario e' \"Nuova versione\" (\u00A78.1). -->\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"createNewVersion()\">\r\n            Nuova versione\r\n          </button>\r\n        }\r\n        @case ('create') {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Crea\r\n          </button>\r\n        }\r\n        @default {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Salva\r\n          </button>\r\n        }\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"isBusy() || !canActivate()\"\r\n        [title]=\"\r\n          canActivate()\r\n            ? 'Attiva questa versione'\r\n            : 'L\u2019attivazione esige zero errori: correggili nel pannello dei problemi'\r\n        \"\r\n        (click)=\"activate()\"\r\n      >\r\n        Attiva\r\n      </button>\r\n    </div>\r\n  </header>\r\n\r\n  @if (conflict()) {\r\n    <!-- \u00A79.3: qualcun altro ha salvato. Due strade, entrambe offerte. -->\r\n    <div class=\"fb-banner fb-banner--warn\" role=\"alert\">\r\n      <span>\r\n        {{ conflict()?.message }}\r\n        @if (conflict()?.conflictingAuthor) {\r\n          Ha salvato {{ conflict()?.conflictingAuthor }}.\r\n        }\r\n      </span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"reloadAfterConflict()\">Ricarica</button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"saveAsNewVersionAfterConflict()\">\r\n        Salva come nuova versione\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"dismissConflict()\">\u00D7</button>\r\n    </div>\r\n  }\r\n\r\n  @if (notice()) {\r\n    <div\r\n      class=\"fb-banner\"\r\n      [class.fb-banner--error]=\"notice()?.kind === 'error'\"\r\n      role=\"status\"\r\n    >\r\n      <span>{{ notice()?.message }}</span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"dismissNotice()\">\r\n        \u00D7\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (hasScreensInAutoLaunched()) {\r\n    <div class=\"fb-banner fb-banner--error\">\r\n      Un flow AutoLaunched che contiene screen e\u2019 un errore di validazione: non c\u2019e\u2019 nessuno a cui mostrarli.\r\n    </div>\r\n  }\r\n  @if (isOrchestrationWithoutStages()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow Orchestration senza stage di orchestrazione viene segnalato dalla validazione\r\n      (ORCHESTRATION_WITHOUT_STAGES).\r\n    </div>\r\n  }\r\n  @if (hasNoScreensInScreenFlow()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow di tipo Screen senza nessuno screen viene segnalato dalla validazione.\r\n    </div>\r\n  }\r\n  @if (!isEditable()) {\r\n    <div class=\"fb-banner\">\r\n      Questa versione e\u2019 in sola lettura: per modificarla creane una nuova.\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fb-main\">\r\n    <aside class=\"fb-main__palette\">\r\n      <fb-element-palette [processType]=\"document().processType\" (elementPicked)=\"onElementPicked($event)\" />\r\n    </aside>\r\n\r\n    <div class=\"fb-main__center\">\r\n      <fb-flow-canvas\r\n        class=\"fb-main__canvas\"\r\n        [selectedName]=\"selectedName()\"\r\n        [outline]=\"outline()\"\r\n        (selectionChange)=\"onSelectionChange($event)\"\r\n        (nodeOpened)=\"onNodeOpened($event)\"\r\n        (nodeRemoveRequested)=\"onRemoveNode($event)\"\r\n        (nodeDuplicateRequested)=\"onDuplicateNode($event)\"\r\n        (elementDropped)=\"onElementDropped($event)\"\r\n      />\r\n\r\n      @if (showProblems()) {\r\n        <fb-problems-panel\r\n          class=\"fb-main__problems\"\r\n          (elementFocused)=\"focusElement($event)\"\r\n          (closed)=\"toggleProblems()\"\r\n        />\r\n      } @else {\r\n        <button type=\"button\" class=\"fb-main__problems-toggle\" (click)=\"toggleProblems()\">\r\n          Problemi\r\n          @if (errorCount()) {\r\n            <span class=\"fb-main__count fb-main__count--error\">{{ errorCount() }}</span>\r\n          }\r\n          @if (warningCount()) {\r\n            <span class=\"fb-main__count fb-main__count--warn\">{{ warningCount() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <aside class=\"fb-main__side\">\r\n      <nav class=\"fb-side__tabs\" aria-label=\"Pannelli\">\r\n        @if (!isDialogMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-side__tab\"\r\n            [class.fb-side__tab--active]=\"sidePanel() === 'inspector'\"\r\n            (click)=\"setPanel('inspector')\"\r\n          >\r\n            Elemento\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'resources'\"\r\n          (click)=\"setPanel('resources')\"\r\n        >\r\n          Risorse\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'versions'\"\r\n          (click)=\"setPanel('versions')\"\r\n        >\r\n          Versioni\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'debug'\"\r\n          (click)=\"setPanel('debug')\"\r\n        >\r\n          Prova\r\n        </button>\r\n      </nav>\r\n\r\n      <div class=\"fb-side__content\">\r\n        @switch (sidePanel()) {\r\n          @case ('inspector') {\r\n            <fb-element-inspector\r\n              [selectedName]=\"selectedName()\"\r\n              (removeRequested)=\"onRemoveNode($event)\"\r\n              (duplicateRequested)=\"onDuplicateNode($event)\"\r\n              (closed)=\"setPanel('resources')\"\r\n            />\r\n          }\r\n          @case ('resources') {\r\n            <fb-resource-panel (closed)=\"setPanel('inspector')\" />\r\n          }\r\n          @case ('versions') {\r\n            <fb-version-panel\r\n              (versionOpened)=\"openVersion($event)\"\r\n              (notice)=\"showNotice($event)\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n          @case ('debug') {\r\n            <!-- Evidenzia sul canvas senza rubare il pannello: l'interview e\u2019 in corso. -->\r\n            <fb-debug-panel (elementFocused)=\"highlightElement($event)\" (closed)=\"setPanel('inspector')\" />\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <footer class=\"fb-side__footer\">\r\n        <label class=\"fb-btn fb-btn--icon\">\r\n          Importa JSON\r\n          <input type=\"file\" accept=\"application/json,.json\" hidden (change)=\"onFileSelected($event)\" />\r\n        </label>\r\n      </footer>\r\n    </aside>\r\n  </div>\r\n\r\n  @if (isDialogMode() && isDialogOpen() && selectedName()) {\r\n    <!-- La dialog sta dentro il builder, non nel body: la libreria e\u2019 innestabile. -->\r\n    <fb-element-dialog\r\n      [selectedName]=\"selectedName()\"\r\n      (closed)=\"closeDialog()\"\r\n      (removeRequested)=\"onRemoveNode($event)\"\r\n      (duplicateRequested)=\"onDuplicateNode($event)\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;font:inherit;color:var(--fb-text, #1d2939)}.fb-builder{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--fb-border, #e2e5eb);background:var(--fb-surface, #fff)}.fb-top__identity{min-width:0}.fb-top__label{width:100%;max-width:420px;padding:2px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text, #1d2939);font:inherit;font-size:15px;font-weight:600}.fb-top__label:hover:not(:disabled),.fb-top__label:focus-visible{border-color:var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-top__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}.fb-top__name{width:180px;padding:1px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-top__name:hover:not(:disabled),.fb-top__name:focus-visible{border-color:var(--fb-border, #d6dae1)}.fb-top__process{padding:1px 4px;border:1px solid var(--fb-border-subtle, #e6e9ee);border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font:inherit;font-size:11px}.fb-top__status,.fb-top__version,.fb-top__dirty{padding:2px 7px;border-radius:999px;background:var(--fb-surface-sunken, #eef0f4);color:var(--fb-text-muted, #6b7086);font-size:10px;font-weight:600}.fb-top__version{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.fb-top__dirty{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-top__actions{display:flex;flex-wrap:wrap;gap:4px}.fb-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee);background:color-mix(in srgb,var(--fb-accent, #2f6feb) 7%,transparent);font-size:11px}.fb-banner--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-banner--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 10%,transparent);color:var(--fb-error, #c9372c)}.fb-banner>span{flex:1;min-width:200px}.fb-main{display:flex;flex:1;min-height:0}.fb-main__palette{flex:0 0 190px;min-width:0}.fb-main__center{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.fb-main__canvas{flex:1;min-height:0}.fb-main__problems{flex:0 0 auto;height:220px}.fb-main__problems-toggle{display:flex;align-items:center;gap:6px;padding:4px 12px;border:0;border-top:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface-alt, #f8f9fb);color:var(--fb-text-muted, #667085);font:inherit;font-size:11px;cursor:pointer}.fb-main__count{padding:0 5px;border-radius:8px;background:var(--fb-border, #d6dae1);font-size:9px;font-weight:700}.fb-main__count--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 16%,transparent);color:var(--fb-error, #c9372c)}.fb-main__count--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-main__side{display:flex;flex-direction:column;flex:0 0 340px;min-width:0;min-height:0;border-left:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-side__tabs{display:flex;gap:2px;margin:8px 10px;padding:3px;border-radius:var(--fb-radius, 10px);background:var(--fb-surface-sunken, #eef0f4)}.fb-side__tab{flex:1;padding:5px 8px;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-muted, #6b7086);font:inherit;font-size:11px;cursor:pointer;transition:background .12s ease,color .12s ease}.fb-side__tab:hover:not(.fb-side__tab--active){color:var(--fb-text, #1a1c23)}.fb-side__tab--active{background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));color:var(--fb-text, #1a1c23);font-weight:600}.fb-side__content{flex:1;min-height:0;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-side__content>*{height:100%}.fb-side__footer{display:flex;gap:6px;padding:6px 8px;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}@media(max-width:1200px){.fb-main__palette{flex-basis:150px}.fb-main__side{flex-basis:290px}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-builder\" [attr.data-fb-theme]=\"null\">\r\n  <header class=\"fb-top\">\r\n    <div class=\"fb-top__identity\">\r\n      <input\r\n        class=\"fb-top__label\"\r\n        [value]=\"document().label || ''\"\r\n        placeholder=\"Nome del flow\"\r\n        aria-label=\"Nome del flow\"\r\n        [disabled]=\"!isEditable()\"\r\n        (input)=\"setLabel($any($event.target).value)\"\r\n      />\r\n      <div class=\"fb-top__meta\">\r\n        <input\r\n          class=\"fb-top__name\"\r\n          [value]=\"document().fullName || ''\"\r\n          placeholder=\"NomeTecnico\"\r\n          aria-label=\"Nome tecnico del flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (input)=\"setFullName($any($event.target).value)\"\r\n        />\r\n        <select\r\n          class=\"fb-top__process\"\r\n          [fbValue]=\"document().processType || ''\"\r\n          aria-label=\"Tipo di flow\"\r\n          [disabled]=\"!isEditable()\"\r\n          (change)=\"setProcessType($any($event.target).value)\"\r\n        >\r\n          <!--\r\n            Il segnaposto esiste perche' un `<select>` senza opzione corrispondente non e'\r\n            \u00ABvuoto\u00BB: e' a `selectedIndex = -1`, e mostra una casella bianca. Su un flow nuovo\r\n            (`processType` non ancora scelto) e' questa la riga che si vede, disabilitata\r\n            perche' non e' un valore valido da salvare.\r\n          -->\r\n          @if (!document().processType) {\r\n            <option value=\"\" disabled>\u2014 tipo di flow \u2014</option>\r\n          }\r\n          @for (type of processTypes(); track type.value) {\r\n            <option [value]=\"type.value\">{{ type.label }}</option>\r\n          }\r\n          <!--\r\n            Il tipo del documento che il dizionario non conosce: senza questa opzione la select\r\n            resta bianca su un flow che il backend ha salvato con un `processType` fuori\r\n            catalogo (o quando `processTypes` manca dalla risposta dei dizionari), e sembra che\r\n            l'editor non abbia ricaricato il flow. Va mostrato **senza** riscrivere il\r\n            documento: il valore e' del backend, non nostro da correggere.\r\n          -->\r\n          @if (isProcessTypeOutOfCatalog()) {\r\n            <option [value]=\"document().processType\">{{ document().processType }} (fuori catalogo)</option>\r\n          }\r\n        </select>\r\n        <span class=\"fb-top__status\">{{ statusLabel() }}</span>\r\n        @if (session.version() !== null) {\r\n          <span class=\"fb-top__version\">v{{ session.version() }}</span>\r\n        }\r\n        @if (isDirty()) {\r\n          <span class=\"fb-top__dirty\" title=\"Ci sono modifiche non salvate\">modificato</span>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"fb-top__actions\">\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canUndo()\" aria-label=\"Annulla\" (click)=\"undo()\">\u21B6</button>\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"!canRedo()\" aria-label=\"Ripeti\" (click)=\"redo()\">\u21B7</button>\r\n      <button type=\"button\" class=\"fb-btn\" title=\"Ricalcola le posizioni\" (click)=\"autoLayout()\">Riordina</button>\r\n      @if (isDialogMode()) {\r\n        <!-- Il doppio click sul node fa la stessa cosa, ma non si vede: questo comando s\u00EC. -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-btn\"\r\n          [disabled]=\"!selectedName()\"\r\n          title=\"Apri il dettaglio dell\u2019elemento selezionato\"\r\n          (click)=\"openSelectedElement()\"\r\n        >\r\n          Dettaglio\r\n        </button>\r\n      }\r\n      <button type=\"button\" class=\"fb-btn\" [disabled]=\"isBusy()\" (click)=\"validateNow()\">Valida</button>\r\n\r\n      @switch (primaryCommand()) {\r\n        @case ('newVersion') {\r\n          <!-- Su una versione non modificabile il comando primario e' \"Nuova versione\" (\u00A78.1). -->\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"createNewVersion()\">\r\n            Nuova versione\r\n          </button>\r\n        }\r\n        @case ('create') {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Crea\r\n          </button>\r\n        }\r\n        @default {\r\n          <button type=\"button\" class=\"fb-btn fb-btn--primary\" [disabled]=\"isBusy()\" (click)=\"save()\">\r\n            Salva\r\n          </button>\r\n        }\r\n      }\r\n\r\n      <button\r\n        type=\"button\"\r\n        class=\"fb-btn\"\r\n        [disabled]=\"isBusy() || !canActivate()\"\r\n        [title]=\"\r\n          canActivate()\r\n            ? 'Attiva questa versione'\r\n            : 'L\u2019attivazione esige zero errori: correggili nel pannello dei problemi'\r\n        \"\r\n        (click)=\"activate()\"\r\n      >\r\n        Attiva\r\n      </button>\r\n    </div>\r\n  </header>\r\n\r\n  @if (conflict()) {\r\n    <!-- \u00A79.3: qualcun altro ha salvato. Due strade, entrambe offerte. -->\r\n    <div class=\"fb-banner fb-banner--warn\" role=\"alert\">\r\n      <span>\r\n        {{ conflict()?.message }}\r\n        @if (conflict()?.conflictingAuthor) {\r\n          Ha salvato {{ conflict()?.conflictingAuthor }}.\r\n        }\r\n      </span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"reloadAfterConflict()\">Ricarica</button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--icon\" (click)=\"saveAsNewVersionAfterConflict()\">\r\n        Salva come nuova versione\r\n      </button>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" (click)=\"dismissConflict()\">\u00D7</button>\r\n    </div>\r\n  }\r\n\r\n  @if (notice()) {\r\n    <div\r\n      class=\"fb-banner\"\r\n      [class.fb-banner--error]=\"notice()?.kind === 'error'\"\r\n      role=\"status\"\r\n    >\r\n      <span>{{ notice()?.message }}</span>\r\n      <button type=\"button\" class=\"fb-btn fb-btn--ghost fb-btn--icon\" aria-label=\"Chiudi\" (click)=\"dismissNotice()\">\r\n        \u00D7\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (hasScreensInAutoLaunched()) {\r\n    <div class=\"fb-banner fb-banner--error\">\r\n      Un flow AutoLaunched che contiene screen e\u2019 un errore di validazione: non c\u2019e\u2019 nessuno a cui mostrarli.\r\n    </div>\r\n  }\r\n  @if (isOrchestrationWithoutStages()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow Orchestration senza stage di orchestrazione viene segnalato dalla validazione\r\n      (ORCHESTRATION_WITHOUT_STAGES).\r\n    </div>\r\n  }\r\n  @if (hasNoScreensInScreenFlow()) {\r\n    <div class=\"fb-banner fb-banner--warn\">\r\n      Un flow di tipo Screen senza nessuno screen viene segnalato dalla validazione.\r\n    </div>\r\n  }\r\n  @if (!isEditable()) {\r\n    <div class=\"fb-banner\">\r\n      Questa versione e\u2019 in sola lettura: per modificarla creane una nuova.\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fb-main\">\r\n    <aside class=\"fb-main__palette\">\r\n      <fb-element-palette [processType]=\"document().processType\" (elementPicked)=\"onElementPicked($event)\" />\r\n    </aside>\r\n\r\n    <div class=\"fb-main__center\">\r\n      <fb-flow-canvas\r\n        class=\"fb-main__canvas\"\r\n        [selectedName]=\"selectedName()\"\r\n        [outline]=\"outline()\"\r\n        [isEditable]=\"isEditable()\"\r\n        (selectionChange)=\"onSelectionChange($event)\"\r\n        (nodeOpened)=\"onNodeOpened($event)\"\r\n        (nodeRemoveRequested)=\"onRemoveNode($event)\"\r\n        (nodeDuplicateRequested)=\"onDuplicateNode($event)\"\r\n        (elementDropped)=\"onElementDropped($event)\"\r\n      />\r\n\r\n      @if (showProblems()) {\r\n        <fb-problems-panel\r\n          class=\"fb-main__problems\"\r\n          (elementFocused)=\"focusElement($event)\"\r\n          (closed)=\"toggleProblems()\"\r\n        />\r\n      } @else {\r\n        <button type=\"button\" class=\"fb-main__problems-toggle\" (click)=\"toggleProblems()\">\r\n          Problemi\r\n          @if (errorCount()) {\r\n            <span class=\"fb-main__count fb-main__count--error\">{{ errorCount() }}</span>\r\n          }\r\n          @if (warningCount()) {\r\n            <span class=\"fb-main__count fb-main__count--warn\">{{ warningCount() }}</span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <aside class=\"fb-main__side\">\r\n      <nav class=\"fb-side__tabs\" aria-label=\"Pannelli\">\r\n        @if (!isDialogMode()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fb-side__tab\"\r\n            [class.fb-side__tab--active]=\"sidePanel() === 'inspector'\"\r\n            (click)=\"setPanel('inspector')\"\r\n          >\r\n            Elemento\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'resources'\"\r\n          (click)=\"setPanel('resources')\"\r\n        >\r\n          Risorse\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'versions'\"\r\n          (click)=\"setPanel('versions')\"\r\n        >\r\n          Versioni\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fb-side__tab\"\r\n          [class.fb-side__tab--active]=\"sidePanel() === 'debug'\"\r\n          (click)=\"setPanel('debug')\"\r\n        >\r\n          Prova\r\n        </button>\r\n      </nav>\r\n\r\n      <div class=\"fb-side__content\">\r\n        @switch (sidePanel()) {\r\n          @case ('inspector') {\r\n            <fb-element-inspector\r\n              [selectedName]=\"selectedName()\"\r\n              (removeRequested)=\"onRemoveNode($event)\"\r\n              (duplicateRequested)=\"onDuplicateNode($event)\"\r\n              (closed)=\"setPanel('resources')\"\r\n            />\r\n          }\r\n          @case ('resources') {\r\n            <fb-resource-panel (closed)=\"setPanel('inspector')\" />\r\n          }\r\n          @case ('versions') {\r\n            <fb-version-panel\r\n              (versionOpened)=\"openVersion($event)\"\r\n              (notice)=\"showNotice($event)\"\r\n              (closed)=\"setPanel('inspector')\"\r\n            />\r\n          }\r\n          @case ('debug') {\r\n            <!-- Evidenzia sul canvas senza rubare il pannello: l'interview e\u2019 in corso. -->\r\n            <fb-debug-panel (elementFocused)=\"highlightElement($event)\" (closed)=\"setPanel('inspector')\" />\r\n          }\r\n        }\r\n      </div>\r\n\r\n      <footer class=\"fb-side__footer\">\r\n        <label class=\"fb-btn fb-btn--icon\">\r\n          Importa JSON\r\n          <input type=\"file\" accept=\"application/json,.json\" hidden (change)=\"onFileSelected($event)\" />\r\n        </label>\r\n      </footer>\r\n    </aside>\r\n  </div>\r\n\r\n  @if (isDialogMode() && isDialogOpen() && selectedName()) {\r\n    <!-- La dialog sta dentro il builder, non nel body: la libreria e\u2019 innestabile. -->\r\n    <fb-element-dialog\r\n      [selectedName]=\"selectedName()\"\r\n      (closed)=\"closeDialog()\"\r\n      (removeRequested)=\"onRemoveNode($event)\"\r\n      (duplicateRequested)=\"onDuplicateNode($event)\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%;min-height:0;font:inherit;color:var(--fb-text, #1d2939)}.fb-builder{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:var(--fb-surface, #fff)}.fb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid var(--fb-border, #e2e5eb);background:var(--fb-surface, #fff)}.fb-top__identity{min-width:0}.fb-top__label{width:100%;max-width:420px;padding:2px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text, #1d2939);font:inherit;font-size:15px;font-weight:600}.fb-top__label:hover:not(:disabled),.fb-top__label:focus-visible{border-color:var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-top__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}.fb-top__name{width:180px;padding:1px 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.fb-top__name:hover:not(:disabled),.fb-top__name:focus-visible{border-color:var(--fb-border, #d6dae1)}.fb-top__process{padding:1px 4px;border:1px solid var(--fb-border-subtle, #e6e9ee);border-radius:4px;background:transparent;color:var(--fb-text-muted, #667085);font:inherit;font-size:11px}.fb-top__status,.fb-top__version,.fb-top__dirty{padding:2px 7px;border-radius:999px;background:var(--fb-surface-sunken, #eef0f4);color:var(--fb-text-muted, #6b7086);font-size:10px;font-weight:600}.fb-top__version{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.fb-top__dirty{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-top__actions{display:flex;flex-wrap:wrap;gap:4px}.fb-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--fb-border-subtle, #e6e9ee);background:color-mix(in srgb,var(--fb-accent, #2f6feb) 7%,transparent);font-size:11px}.fb-banner--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 12%,transparent);color:var(--fb-warning, #b7791f)}.fb-banner--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 10%,transparent);color:var(--fb-error, #c9372c)}.fb-banner>span{flex:1;min-width:200px}.fb-main{display:flex;flex:1;min-height:0}.fb-main__palette{flex:0 0 190px;min-width:0}.fb-main__center{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.fb-main__canvas{flex:1;min-height:0}.fb-main__problems{flex:0 0 auto;height:220px}.fb-main__problems-toggle{display:flex;align-items:center;gap:6px;padding:4px 12px;border:0;border-top:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface-alt, #f8f9fb);color:var(--fb-text-muted, #667085);font:inherit;font-size:11px;cursor:pointer}.fb-main__count{padding:0 5px;border-radius:8px;background:var(--fb-border, #d6dae1);font-size:9px;font-weight:700}.fb-main__count--error{background:color-mix(in srgb,var(--fb-error, #c9372c) 16%,transparent);color:var(--fb-error, #c9372c)}.fb-main__count--warn{background:color-mix(in srgb,var(--fb-warning, #b7791f) 16%,transparent);color:var(--fb-warning, #b7791f)}.fb-main__side{display:flex;flex-direction:column;flex:0 0 340px;min-width:0;min-height:0;border-left:1px solid var(--fb-border, #d6dae1);background:var(--fb-surface, #fff)}.fb-side__tabs{display:flex;gap:2px;margin:8px 10px;padding:3px;border-radius:var(--fb-radius, 10px);background:var(--fb-surface-sunken, #eef0f4)}.fb-side__tab{flex:1;padding:5px 8px;border:0;border-radius:var(--fb-radius-xs, 6px);background:transparent;color:var(--fb-text-muted, #6b7086);font:inherit;font-size:11px;cursor:pointer;transition:background .12s ease,color .12s ease}.fb-side__tab:hover:not(.fb-side__tab--active){color:var(--fb-text, #1a1c23)}.fb-side__tab--active{background:var(--fb-surface, #fff);box-shadow:var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));color:var(--fb-text, #1a1c23);font-weight:600}.fb-side__content{flex:1;min-height:0;border-top:1px solid var(--fb-border-subtle, #eef0f4)}.fb-side__content>*{height:100%}.fb-side__footer{display:flex;gap:6px;padding:6px 8px;border-top:1px solid var(--fb-border-subtle, #e6e9ee)}@media(max-width:1200px){.fb-main__palette{flex-basis:150px}.fb-main__side{flex-basis:290px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { flowName: [{ type: i0.Input, args: [{ isSignal: true, alias: "flowName", required: false }] }], version: [{ type: i0.Input, args: [{ isSignal: true, alias: "version", required: false }] }], author: [{ type: i0.Input, args: [{ isSignal: true, alias: "author", required: false }] }], defaultProcessType: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultProcessType", required: false }] }], inspectorMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inspectorMode", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }], activated: [{ type: i0.Output, args: ["activated"] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ConditionEditorComponent, ConnectorEditorComponent, DebugPanelComponent, ElementDialogComponent, ElementInspectorComponent, ElementPaletteComponent, FALLBACK_COLLECTION_BY_TYPE, FALLBACK_TYPE_LABEL, FLOW_BUILDER_HTTP_CONFIG, FLOW_ELEMENT_ICONS, FLOW_ELEMENT_VARIANT_FIELDS, FLOW_ELEMENT_VARIANT_ICONS, FLOW_ERROR_FALLBACK_MESSAGE, FLOW_ERROR_HTTP_STATUS, FLOW_NAME_PATTERN, FLOW_NODE_COLLECTIONS, FLOW_NODE_HEIGHT, FLOW_NODE_WIDTH, FLOW_RESOURCE_COLLECTIONS, FieldAssignmentEditorComponent, FieldPickerComponent, FlowApiError, FlowBuilderApi, FlowBuilderComponent, FlowCanvasComponent, FlowCatalogStore, FlowDictionaryStore, FlowDocumentStore, FlowEditorSession, FlowLayoutService, FlowValidationStore, HttpFlowBuilderApi, NamePickerComponent, NodeInspectorBase, ORCHESTRATION_CONDITION_OUTPUT, ObjectPickerComponent, OrchestratedStageInspectorComponent, ParameterEditorComponent, ProblemsPanelComponent, RecordFilterEditorComponent, ReferencePickerComponent, ResourcePanelComponent, START_NODE_NAME, SelectValueDirective, StartInspectorComponent, StructureMemberPickerComponent, StructurePickerComponent, TYPES_WITH_AUTOMATIC_OUTPUT, TYPE_BY_COLLECTION, UNSUPPORTED_TYPES, ValueEditorComponent, VersionPanelComponent, areTypesComparable, canvasNodeId, checkConditionLogic, checkFlowName, elementIcon, emptyFlowDefinition, flowNodeWidth, flowNodeWidthClass, isCustomConditionLogic, isGlobalReference, isNumericType, isTypeCheckedOperator, isValidFlowName, moveCondition, outletByKey, outletsOf, parseCanvasNodeId, parseInvariantNumber, parseSourceConnectorId, parseTargetConnectorId, referenceRoot, remapConditionLogic, removeCondition, slugifyFlowName, sourceConnectorId, stageStepNames, stageStepOutputReferenced, stepsOf, targetConnectorId, uniqueFlowName, variantFieldOf, variantOf, variantPresetOf };
+export { ConditionEditorComponent, ConnectorEditorComponent, DebugPanelComponent, ElementDialogComponent, ElementInspectorComponent, ElementPaletteComponent, FALLBACK_COLLECTION_BY_TYPE, FALLBACK_TYPE_LABEL, FLOW_BUILDER_HTTP_CONFIG, FLOW_ELEMENT_ICONS, FLOW_ELEMENT_VARIANT_FIELDS, FLOW_ELEMENT_VARIANT_ICONS, FLOW_ERROR_FALLBACK_MESSAGE, FLOW_ERROR_HTTP_STATUS, FLOW_NAME_PATTERN, FLOW_NODE_COLLECTIONS, FLOW_NODE_HEIGHT, FLOW_NODE_WIDTH, FLOW_RESOURCE_COLLECTIONS, FieldAssignmentEditorComponent, FieldPickerComponent, FlowApiError, FlowBuilderApi, FlowBuilderComponent, FlowCanvasComponent, FlowCatalogStore, FlowDictionaryStore, FlowDocumentStore, FlowEditorSession, FlowLayoutService, FlowValidationStore, HttpFlowBuilderApi, NamePickerComponent, NodeInspectorBase, ORCHESTRATION_CONDITION_OUTPUT, ObjectPickerComponent, OrchestratedStageInspectorComponent, ParameterEditorComponent, ProblemsPanelComponent, RecordFilterEditorComponent, ReferencePickerComponent, ResourcePanelComponent, SEVERITY_BUCKETS, SEVERITY_ICON, SEVERITY_LABEL, START_NODE_NAME, SelectValueDirective, StartInspectorComponent, StructureMemberPickerComponent, StructurePickerComponent, TYPES_WITH_AUTOMATIC_OUTPUT, TYPE_BY_COLLECTION, UNSUPPORTED_TYPES, ValueEditorComponent, VersionPanelComponent, areTypesComparable, canvasNodeId, checkConditionLogic, checkFlowName, elementIcon, emptyFlowDefinition, flowNodeWidth, flowNodeWidthClass, isCustomConditionLogic, isGlobalReference, isNumericType, isTypeCheckedOperator, isValidFlowName, moveCondition, outletByKey, outletsOf, parseCanvasNodeId, parseInvariantNumber, parseSourceConnectorId, parseTargetConnectorId, referenceRoot, remapConditionLogic, removeCondition, severityBucket, slugifyFlowName, sourceConnectorId, stageStepNames, stageStepOutputReferenced, stepsOf, targetConnectorId, uniqueFlowName, variantFieldOf, variantOf, variantPresetOf };
 //# sourceMappingURL=esfaenza-flow-builder.mjs.map