@esfaenza/flow-builder 20.3.15 → 20.3.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esfaenza/flow-builder",
-  "version": "20.3.15",
+  "version": "20.3.17",
   "peerDependencies": {
     "@angular/cdk": "^20.2.14",
     "@angular/common": "^20.3.25",

package/styles/flow-builder.css

@@ -250,6 +250,41 @@ f-flow .fb-edge--goto .f-connection-path {
   min-width: 0;
 }
 
+/**
+ * I tre campi di un'assegnazione — destinazione, operazione, valore — su una riga sola.
+ * Incolonnati, una singola operazione era alta mezza dialog e per vederne due si scorreva.
+ *
+ * Il rientro a capo lo decide il flex dalla larghezza disponibile, non una media query: lo
+ * stesso inspector vive nel pannello laterale (420px, dove si incolonna) e nella dialog
+ * (1400px, dove sta in riga), e sul viewport non c'e' modo di distinguerli.
+ */
+.fb-fields-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  column-gap: 8px;
+}
+
+/* Il `margin-bottom` della `.fb-field` fa da distanza fra le righe quando vanno a capo. */
+.fb-fields-row > .fb-field {
+  flex: 1 1 200px;
+  min-width: 0;
+}
+
+/* L'operatore e' un `select` di due parole: puo' stringersi, non deve allargarsi. */
+.fb-fields-row > .fb-field--compact {
+  flex: 0 1 220px;
+}
+
+/*
+ * Il bottone in coda alla riga (rimozione): il margine lo allinea al controllo, non
+ * all'etichetta che gli sta sopra.
+ */
+.fb-fields-row > .fb-fields-row__action {
+  flex: 0 0 auto;
+  margin-top: 17px;
+}
+
 .fb-input,
 .fb-select,
 .fb-textarea {
@@ -506,36 +541,3 @@ f-flow .fb-edge--goto .f-connection-path {
   background: color-mix(in srgb, var(--fb-warning, #b7791f) 8%, transparent);
   font-size: 11px;
 }
-
-/* ------------------------------------------------ trascinamento (CDK) */
-/*
- * L'anteprima del trascinamento e' l'unico pezzo di UI che il CDK sposta **fuori** dal
- * componente: la aggancia a `body` (o al piu' vicino contenitore con overlay), dove il CSS
- * incapsulato dell'inspector non arriva. Senza queste regole il campo trascinato si vede
- * come testo nudo senza sfondo — lo stesso motivo per cui gli archi stanno qui.
- */
-.cdk-drag-preview {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  box-sizing: border-box;
-  padding: 4px 6px;
-  border: 1px solid var(--fb-accent, #4f6ef7);
-  border-radius: var(--fb-radius-xs, 6px);
-  background: var(--fb-surface, #fff);
-  box-shadow: var(--fb-shadow-md, 0 6px 18px rgb(16 24 40 / 10%));
-  font-size: 12px;
-  color: var(--fb-text, #1a1c23);
-}
-
-/* L'anteprima resta essenziale: il tipo e la barra della larghezza sono contorno, e in un
-   riquadro che segue il puntatore rubano l'attenzione al punto di rilascio. */
-.cdk-drag-preview .fb-dyn__type,
-.cdk-drag-preview .fb-dyn__width {
-  display: none;
-}
-
-.cdk-drag-animating,
-.cdk-drop-list-dragging .cdk-drag {
-  transition: transform 180ms cubic-bezier(0, 0, 0.2, 1);
-}