@esfaenza/flow-builder 20.3.14 → 20.3.16

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@esfaenza/flow-builder",
-  "version": "20.3.14",
+  "version": "20.3.16",
   "peerDependencies": {
+    "@angular/cdk": "^20.2.14",
     "@angular/common": "^20.3.25",
     "@angular/core": "^20.3.25",
     "@foblex/flow": ">=19.0.0",

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 {