@esfaenza/flow-builder 20.0.0

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@esfaenza/flow-builder",
+  "version": "20.0.0",
+  "peerDependencies": {
+    "@angular/common": "^20.3.25",
+    "@angular/core": "^20.3.25",
+    "@foblex/flow": ">=19.0.0",
+    "dagre": "^0.8.5"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "description": "Editor visuale di flow: componente standalone Angular, con tutto il traffico verso il backend dietro un'unica interfaccia.",
+  "module": "fesm2022/esfaenza-flow-builder.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/esfaenza-flow-builder.mjs"
+    }
+  }
+}

package/styles/flow-builder.css

@@ -0,0 +1,483 @@
+/*
+ * Tema del flow builder — da includere negli `styles` dell'applicazione ospite:
+ *
+ *   "styles": [
+ *     "node_modules/@foblex/flow/styles/default.scss",
+ *     "node_modules/@enuma/flow-builder/styles/flow-builder.css",
+ *     "src/styles.css"
+ *   ]
+ *
+ * Contiene due cose che **non possono** stare nel CSS incapsulato dei componenti:
+ *  1. le variabili del tema, così l'app le puo' sovrascrivere per integrarsi nel proprio
+ *     design system senza toccare la libreria;
+ *  2. gli stili degli archi: i path SVG delle connessioni sono creati a runtime da
+ *     @foblex/flow e non portano l'attributo di scope, quindi un selettore scoped non li
+ *     raggiunge mai.
+ */
+
+.fb-builder,
+.fb-theme {
+  /* Superfici e testo */
+  --fb-surface: #ffffff;
+  --fb-surface-alt: #f7f8fa;
+  --fb-surface-sunken: #eef0f4;
+  --fb-canvas-bg: #f4f5f7;
+  --fb-border: #e2e5eb;
+  --fb-border-strong: #cfd4de;
+  --fb-border-subtle: #eef0f4;
+  --fb-text: #1a1c23;
+  --fb-text-muted: #6b7086;
+  --fb-text-subtle: #98a2b3;
+
+  /* Accenti e stati */
+  --fb-accent: #4f6ef7;
+  --fb-accent-strong: #3d59e0;
+  --fb-accent-contrast: #ffffff;
+  --fb-error: #dc2626;
+  --fb-warning: #b7791f;
+  --fb-success: #22a06b;
+
+  /* Archi, per tipo di connettore (§6.4, `kind`) */
+  --fb-edge-next: #98a2b3;
+  --fb-edge-rule: #8b5cf6;
+  --fb-edge-default: #06b6d4;
+  --fb-edge-fault: #dc2626;
+  --fb-edge-timeout: #f59e0b;
+  --fb-edge-loop: #22a06b;
+
+  /* Scala dei raggi e delle ombre: una sola, così i pannelli, la card di un node e la
+     dialog hanno la stessa morbidezza. */
+  --fb-radius-xs: 6px;
+  --fb-radius-sm: 8px;
+  --fb-radius: 10px;
+  --fb-radius-lg: 12px;
+  --fb-shadow-sm: 0 1px 2px rgb(16 24 40 / 6%);
+  --fb-shadow-md: 0 6px 18px rgb(16 24 40 / 10%);
+  --fb-shadow-lg: 0 18px 44px rgb(16 24 40 / 18%);
+  --fb-font: inherit;
+
+  /*
+   * I token di @foblex/flow allineati ai nostri: il canvas, il pattern di sfondo, la
+   * minimappa e lo spessore degli archi sono disegnati dalla libreria, e questo e' il punto
+   * previsto per ritemizzarli — piu' solido che sovrascriverne le regole.
+   */
+  --ff-canvas-background-color: var(--fb-canvas-bg);
+  --ff-flow-background-color: var(--fb-canvas-bg);
+  --ff-background-dot-color: color-mix(in srgb, var(--fb-text-subtle) 40%, transparent);
+  --ff-connection-width: 2px;
+  /*
+   * Le maniglie di riassegnazione dell'arco restano trascinabili ma invisibili: disegnate,
+   * si sovrappongono alla punta della freccia e all'ingresso del node, e nel punto in cui
+   * l'arco arriva si vedeva una macchia in cui non si capiva piu' dove finisse.
+   */
+  --ff-connection-drag-handle-fill: transparent;
+  --ff-connection-drag-handle-stroke: transparent;
+  --ff-connection-content-background-color: var(--fb-surface);
+  --ff-connection-content-border-color: var(--fb-border);
+  --ff-connection-content-color: var(--fb-text-muted);
+  --ff-minimap-background-color: var(--fb-surface);
+  --ff-minimap-border-color: var(--fb-border);
+  --ff-minimap-node-color: var(--fb-border-strong);
+  --ff-minimap-view-color: color-mix(in srgb, var(--fb-accent) 12%, transparent);
+  --ff-minimap-view-border-color: var(--fb-accent);
+}
+
+/* Variante scura: si attiva mettendo `data-fb-theme="dark"` sul contenitore. */
+[data-fb-theme='dark'] {
+  --fb-surface: #151921;
+  --fb-surface-alt: #1c2029;
+  --fb-surface-sunken: #232830;
+  --fb-canvas-bg: #0c0e14;
+  --fb-border: #2d323c;
+  --fb-border-strong: #3b414d;
+  --fb-border-subtle: #232830;
+  --fb-text: #e8eaf0;
+  --fb-text-muted: #8b90a0;
+  --fb-text-subtle: #6b7684;
+  --fb-accent: #818cf8;
+  --fb-accent-strong: #6366f1;
+  --fb-error: #ef6a5f;
+  --fb-warning: #d9a13c;
+  --fb-success: #63b57f;
+  --fb-edge-next: #6b7684;
+  --fb-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
+  --fb-shadow-md: 0 6px 18px rgb(0 0 0 / 45%);
+  --fb-shadow-lg: 0 18px 44px rgb(0 0 0 / 55%);
+}
+
+/* ---------------------------------------------------------------- archi */
+/*
+ * Gli archi si colorano impostando le **custom properties del tema di @foblex/flow**, non
+ * sovrascrivendo le sue regole: `f-flow .f-connection .f-connection-path` ha la stessa
+ * specificita' dei nostri selettori, e chi vince dipenderebbe dall'ordine con cui l'app
+ * ospite carica i due fogli di stile. Le variabili, invece, ereditano dall'elemento della
+ * connessione al path e al marker, e valgono qualunque sia l'ordine.
+ *
+ * `kind` di un arco (§6.4) → colore: un Fault rosso, un Rule etichettato e viola, un
+ * LoopNext verde che rientra.
+ */
+
+.fb-edge {
+  --ff-connection-color: var(--fb-edge-next, #98a2b3);
+  --ff-marker-color: var(--fb-edge-next, #98a2b3);
+  --ff-connection-selected-color: var(--fb-accent, #2f6feb);
+}
+
+.fb-edge--Rule,
+.fb-edge--WaitEvent {
+  --ff-connection-color: var(--fb-edge-rule, #7c5cd6);
+  --ff-marker-color: var(--fb-edge-rule, #7c5cd6);
+}
+
+.fb-edge--Default {
+  --ff-connection-color: var(--fb-edge-default, #0e8a9b);
+  --ff-marker-color: var(--fb-edge-default, #0e8a9b);
+}
+
+/*
+ * Il fault connector non e' un'uscita "di errore" nel senso di eccezione: e' un ramo che
+ * l'autore ha previsto, e un flow che lo percorre finisce Completed. Il rosso lo distingue;
+ * il tratteggio no, perche' non e' un percorso meno reale degli altri.
+ */
+.fb-edge--Fault {
+  --ff-connection-color: var(--fb-edge-fault, #c9372c);
+  --ff-marker-color: var(--fb-edge-fault, #c9372c);
+}
+
+.fb-edge--Timeout,
+.fb-edge--ScheduledPath {
+  --ff-connection-color: var(--fb-edge-timeout, #b7791f);
+  --ff-marker-color: var(--fb-edge-timeout, #b7791f);
+}
+
+.fb-edge--LoopNext,
+.fb-edge--LoopEnd {
+  --ff-connection-color: var(--fb-edge-loop, #3f8f5f);
+  --ff-marker-color: var(--fb-edge-loop, #3f8f5f);
+}
+
+.fb-edge--creating {
+  --ff-connection-color: var(--fb-accent, #2f6feb);
+}
+
+/*
+ * Il tratteggio non e' esprimibile con una variabile del tema, quindi qui serve una regola.
+ * Il prefisso `f-flow` pareggia la specificita' di `f-flow .f-connection .f-connection-path`
+ * e, arrivando dopo nel foglio, vince — ma riguarda solo `stroke-dasharray`, cioe' una
+ * proprieta' che il tema non imposta: nessun conflitto reale da risolvere.
+ */
+f-flow .fb-edge--Default .f-connection-path {
+  stroke-dasharray: 6 4;
+}
+
+f-flow .fb-edge--Timeout .f-connection-path,
+f-flow .fb-edge--ScheduledPath .f-connection-path {
+  stroke-dasharray: 4 4;
+}
+
+f-flow .fb-edge--creating .f-connection-path {
+  stroke-dasharray: 5 4;
+}
+
+/* `isGoTo` e' solo un suggerimento di disegno: l'arco torna indietro nel grafo. */
+f-flow .fb-edge--goto .f-connection-path {
+  stroke-dasharray: 2 5;
+  stroke-linecap: round;
+}
+
+.fb-edge-label {
+  padding: 2px 7px;
+  border: 1px solid var(--fb-border, #e2e5eb);
+  border-radius: 999px;
+  background: var(--fb-surface, #fff);
+  box-shadow: var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--fb-text-muted, #6b7086);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+/* ------------------------------------------------------------- controlli */
+/*
+ * I controlli di form vivono qui, non nel CSS incapsulato dei singoli inspector: sono
+ * venti form che condividono lo stesso aspetto, e l'app ospite deve poterli ritemizzare
+ * in un punto solo.
+ */
+
+.fb-field {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  margin-bottom: 10px;
+}
+
+.fb-field__label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--fb-text-muted, #667085);
+}
+
+.fb-field__label--required::after {
+  content: ' *';
+  color: var(--fb-error, #c9372c);
+}
+
+.fb-field__hint {
+  margin: 0;
+  font-size: 10px;
+  line-height: 1.35;
+  color: var(--fb-text-subtle, #98a2b3);
+}
+
+.fb-field__hint--warn {
+  color: var(--fb-warning, #b7791f);
+}
+
+.fb-field__error {
+  margin: 0;
+  font-size: 10px;
+  color: var(--fb-error, #c9372c);
+}
+
+.fb-field__row {
+  display: flex;
+  gap: 6px;
+  align-items: flex-start;
+}
+
+.fb-field__row > * {
+  min-width: 0;
+}
+
+.fb-input,
+.fb-select,
+.fb-textarea {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid var(--fb-border-strong, #cfd4de);
+  border-radius: var(--fb-radius-xs, 6px);
+  background: var(--fb-surface, #fff);
+  color: var(--fb-text, #1a1c23);
+  font: inherit;
+  font-size: 12px;
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+}
+
+.fb-input:hover:not(:disabled),
+.fb-select:hover:not(:disabled),
+.fb-textarea:hover:not(:disabled) {
+  border-color: var(--fb-text-subtle, #98a2b3);
+}
+
+.fb-textarea {
+  min-height: 56px;
+  resize: vertical;
+}
+
+.fb-input:focus-visible,
+.fb-select:focus-visible,
+.fb-textarea:focus-visible {
+  outline: none;
+  border-color: var(--fb-accent, #4f6ef7);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fb-accent, #4f6ef7) 18%, transparent);
+}
+
+.fb-input:disabled,
+.fb-select:disabled,
+.fb-textarea:disabled {
+  background: var(--fb-surface-alt, #f8f9fb);
+  color: var(--fb-text-muted, #667085);
+}
+
+.fb-input--invalid,
+.fb-select--invalid {
+  border-color: var(--fb-error, #c9372c);
+}
+
+.fb-input--mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.fb-check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--fb-text, #1d2939);
+}
+
+.fb-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 11px;
+  border: 1px solid var(--fb-border-strong, #cfd4de);
+  border-radius: var(--fb-radius-xs, 6px);
+  background: var(--fb-surface, #fff);
+  color: var(--fb-text, #1a1c23);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
+}
+
+.fb-btn:hover:not(:disabled) {
+  background: var(--fb-surface-alt, #f7f8fa);
+  border-color: var(--fb-text-subtle, #98a2b3);
+}
+
+.fb-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.fb-btn:focus-visible {
+  outline: 2px solid var(--fb-accent, #2f6feb);
+  outline-offset: 1px;
+}
+
+.fb-btn--primary {
+  border-color: var(--fb-accent, #4f6ef7);
+  background: var(--fb-accent, #4f6ef7);
+  color: var(--fb-accent-contrast, #fff);
+  box-shadow: var(--fb-shadow-sm, 0 1px 2px rgb(16 24 40 / 6%));
+}
+
+.fb-btn--primary:hover:not(:disabled) {
+  border-color: var(--fb-accent-strong, #3d59e0);
+  background: var(--fb-accent-strong, #3d59e0);
+}
+
+.fb-btn--danger {
+  border-color: color-mix(in srgb, var(--fb-error, #c9372c) 45%, transparent);
+  color: var(--fb-error, #c9372c);
+}
+
+.fb-btn--ghost {
+  border-color: transparent;
+  background: transparent;
+}
+
+.fb-btn--icon {
+  padding: 3px 6px;
+  font-size: 12px;
+  line-height: 1;
+}
+
+.fb-section {
+  margin: 0 0 14px;
+  padding: 0;
+  border: 0;
+}
+
+.fb-section__title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin: 0 0 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--fb-text-subtle, #98a2b3);
+}
+
+.fb-section__note {
+  margin: 0 0 8px;
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--fb-text-muted, #667085);
+}
+
+.fb-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.fb-list__item {
+  padding: 9px 10px;
+  border: 1px solid var(--fb-border, #e2e5eb);
+  border-radius: var(--fb-radius-sm, 8px);
+  background: var(--fb-surface-alt, #f7f8fa);
+}
+
+.fb-list__header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.fb-list__index {
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--fb-border, #d6dae1);
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--fb-text, #1d2939);
+}
+
+.fb-list__spacer {
+  flex: 1;
+}
+
+.fb-empty {
+  margin: 0;
+  padding: 8px;
+  border: 1px dashed var(--fb-border, #d6dae1);
+  border-radius: 6px;
+  font-size: 11px;
+  color: var(--fb-text-muted, #667085);
+}
+
+.fb-callout {
+  margin: 0 0 10px;
+  padding: 7px 9px;
+  border-left: 3px solid var(--fb-accent, #2f6feb);
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--fb-accent, #2f6feb) 7%, transparent);
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--fb-text, #1d2939);
+}
+
+.fb-callout--warn {
+  border-left-color: var(--fb-warning, #b7791f);
+  background: color-mix(in srgb, var(--fb-warning, #b7791f) 10%, transparent);
+}
+
+.fb-callout--error {
+  border-left-color: var(--fb-error, #c9372c);
+  background: color-mix(in srgb, var(--fb-error, #c9372c) 8%, transparent);
+}
+
+.fb-fields-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 2px 8px;
+  max-height: 180px;
+  overflow-y: auto;
+  padding: 6px;
+  border: 1px solid var(--fb-border-subtle, #e6e9ee);
+  border-radius: 6px;
+}
+
+.fb-fields-grid .fb-check {
+  font-size: 11px;
+}
+
+.fb-confirm {
+  padding: 7px 9px;
+  border: 1px solid var(--fb-warning, #b7791f);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--fb-warning, #b7791f) 8%, transparent);
+  font-size: 11px;
+}