@elasticias/ui 1.0.48 → 1.0.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elasticias/ui",
-  "version": "1.0.48",
+  "version": "1.0.50",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
@@ -14,6 +14,7 @@
     "@primeng/themes": "^21.0.0",
     "chart.js": "^4.5.0",
     "primeng": "^21.0.0",
+    "rxjs": "~7.8.0",
     "@angular/platform-browser": "21.2"
   },
   "sideEffects": false,

package/styles/_comptoir.scss

@@ -114,6 +114,11 @@
   --hit-base:   40px;  /* standard buttons */
   --hit-touch:  48px;  /* POS / mobile primary actions */
   --hit-pos:    64px;  /* POS number pad, big totals */
+  /* Form fields (inputs, selects, the datepicker trigger). --hit-base with
+     a mouse, --hit-touch on a coarse pointer: see the block at the end of
+     this file. A separate token because --hit-base itself must not move on
+     touch, the top-bar icons and toolbar buttons paint from it. */
+  --hit-field:  var(--hit-base);
 
   /* ── Layers ──────────────────────────────────────────────────── */
   /* Toasts sit above every modal and overlay. PrimeNG numbers its layers
@@ -285,3 +290,15 @@
     transition-duration: 0.01ms !important;
   }
 }
+
+/* -- Touch tier for form fields --------------------------------------
+   A field is a tap target too, so on a coarse pointer (touch phone,
+   tablet, touch laptop) it grows to --hit-touch (48px), like .btn does
+   in _patterns.scss. Keyed on pointer rather than width, as ef-pill-group
+   and ef-file-upload are: a narrow desktop window keeps 40px fields. Last
+   in the file so the base :root declaration does not win. */
+@media (pointer: coarse) {
+  :root {
+    --hit-field: var(--hit-touch);
+  }
+}

package/styles/_patterns.scss

@@ -890,6 +890,8 @@
   font-family: var(--font-mono);
   font-size: 12px;
   font-weight: 700;
+  /* Hyphenated codes (HA-100) break at the hyphen otherwise. */
+  white-space: nowrap;
 }
 
 .tbl .num {
@@ -1221,11 +1223,8 @@
 
 /* ──────────── DETAIL GRID + CARD ───────────────────────────────── */
 
-@media (min-width: 1100px) {
-  .detail-grid {
-    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
-  }
-}
+/* .detail-grid is defined once, with its 1280px split, next to .detail-stack
+   further down. */
 
 /* ──────────── FORM GRID + FIELD ────────────────────────────────── */
 
@@ -1684,12 +1683,26 @@
 }
 
 .row-actions__item[disabled],
+.row-actions__item[aria-disabled='true'],
 .ef-menu__item[disabled] {
   opacity: 0.45;
   cursor: not-allowed;
   background: transparent;
 }
 
+.row-actions__item[aria-disabled='true'] {
+  flex-wrap: wrap;
+}
+
+/* Why an item is disabled: a second line under its label. */
+.row-actions__item .reason {
+  flex: 0 0 100%;
+  padding-inline-start: 28px;
+  font-size: 11.5px;
+  font-weight: 500;
+  color: var(--text-mute);
+}
+
 .row-actions__item .ico,
 .row-actions__item i,
 .ef-menu__item .ico,
@@ -1977,7 +1990,7 @@
   border-radius: var(--r-md);
   padding: 0 14px;
   width: 100%;
-  min-height: var(--hit-base);
+  min-height: var(--hit-field);
   display: inline-flex;
   align-items: center;
   gap: 10px;
@@ -2038,14 +2051,14 @@
 
 /* Inline clear ✕ for the field-mode trigger (single mode only). Overlaid as a
    sibling — not nested in the trigger <button> — just left of the caret,
-   vertically centred on the --hit-base trigger box. */
+   vertically centred on the --hit-field trigger box. */
 .dp .ef-field-control {
   position: relative;
 }
 
 .dp__field-clear {
   position: absolute;
-  top: calc(var(--hit-base) / 2);
+  top: calc(var(--hit-field) / 2);
   inset-inline-end: 30px;
   transform: translateY(-50%);
 }
@@ -2795,11 +2808,17 @@
   flex-wrap: wrap;
 }
 
+/* The identity takes a real basis, not 0: with `flex: 1` it always "fit",
+   so a screen with many actions squeezed it to a sliver and cut its notices
+   ("Prise en charge par ...") to an ellipsis. Now, when the identity and the
+   actions cannot share a row at that width, the actions wrap onto a row of
+   their own and the identity keeps the whole line. A screen may tune the
+   basis with --detail-toolbar-identity-min. */
 .detail-toolbar .left {
   display: flex;
   align-items: center;
   gap: 10px;
-  flex: 1;
+  flex: 1 1 var(--detail-toolbar-identity-min, 22rem);
   min-width: 0;
   flex-wrap: wrap;
 }
@@ -2815,6 +2834,22 @@
   color: var(--text-soft);
 }
 
+/* Keeps its width: removing it would narrow the group and let it unwrap. */
+.detail-toolbar .sep.is-hidden {
+  visibility: hidden;
+}
+
+/* Print … Save travel together with their separator, so a wrap never leaves
+   the "|" at the end of one row and Save alone on the next. The group keeps
+   the far end of its row, like Save on a phone. */
+.detail-toolbar .std {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: nowrap;
+  margin-inline-start: auto;
+}
+
 .detail-toolbar .right {
   display: flex;
   align-items: center;
@@ -2890,14 +2925,15 @@
   }
 }
 
-/* 2/3 + 1/3 column grid that collapses below 1100px. */
+/* 2/3 + 1/3 column grid from the desktop breakpoint (1280px, the one
+   EfViewportService and the shell use); one column below it. */
 .detail-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: var(--s-3);
 }
 
-@media (min-width: 1100px) {
+@media (min-width: 1280px) {
   .detail-grid {
     grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
   }
@@ -3216,6 +3252,17 @@
   color: var(--text);
 }
 
+.kpi-hint {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.35;
+  color: var(--text-mute);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
 .kpi-value .unit {
   font-family: var(--font-mono);
   font-size: 0.32em;
@@ -3314,7 +3361,7 @@
   border-radius: var(--r-md);
   color: var(--text);
   outline: 0;
-  height: var(--hit-base);
+  height: var(--hit-field);
   width: 100%;
   transition:
     border-color var(--t-fast) var(--ease-out),
@@ -3384,6 +3431,19 @@
   color: var(--st-cancelled-fg);
 }
 
+/* Help text under an ef-* control (`hint` / `hintKey`), linked to the
+   control by aria-describedby. Page text: it keeps the page direction
+   (see forms/_field-direction.scss) and aligns to the start edge, so it
+   reads right to left in Arabic. */
+.ef-field-hint {
+  display: block;
+  margin-top: 4px;
+  font-size: 12px;
+  line-height: 1.35;
+  color: var(--text-mute);
+  text-align: start;
+}
+
 /* Native select chevron — replaces the browser default. */
 .ef-select-native,
 .ef-field select {
@@ -3396,6 +3456,13 @@
   cursor: pointer;
 }
 
+/* The chevron is a background image, which has no logical position: in Arabic
+   the reserved padding sits on the left, so the chevron moves there too. */
+[dir='rtl'] .ef-select-native,
+[dir='rtl'] .ef-field select {
+  background-position: left 12px center;
+}
+
 /* Native checkbox — keeps the underlying <input> for native keyboard
    handling, hidden visually; the .ef-checkbox-box gets the visuals. */
 .ef-checkbox-native {
@@ -3485,7 +3552,10 @@
   border: 1px solid var(--rule);
   border-radius: var(--r-md);
   overflow: hidden;
-  min-height: 40px;
+  /* border-box, as .ef-input: the 1px border sits inside --hit-field, so
+     a grouped field (suffix, stepper, currency) matches a bare one. */
+  box-sizing: border-box;
+  min-height: var(--hit-field);
   width: 100%;
   transition:
     border-color var(--t-fast) var(--ease-out),
@@ -3503,6 +3573,10 @@
 }
 
 .ef-input-group input {
+  /* The lib owns the box model and line height of every part of a grouped
+     field, as .ef-input does, so it measures the same whether or not the
+     app loads a CSS reset (ERP loads Tailwind without preflight). */
+  box-sizing: border-box;
   flex: 1;
   border: 0;
   background: transparent;
@@ -3510,11 +3584,13 @@
   padding: 10px 12px;
   font: inherit;
   font-size: 14px;
+  line-height: 1.2;
   color: var(--text);
   min-width: 0;
 }
 
 .ef-input-group .ef-input-addon {
+  box-sizing: border-box;
   background: var(--paper);
   padding: 9px 12px;
   font-family: var(--font-mono);
@@ -3536,7 +3612,16 @@
 /* Stepper buttons (±) sit at either end of the group. They reuse the
    addon base so border weights stay consistent; the button override
    gives them affordance (cursor, hover/active feedback). */
+/* A currency symbol is a word, not a code: the mono face drew the Arabic
+   "د.م." with detached, oversized dots. The interface face renders it
+   as the locale writes it. */
+.ef-input-group .ef-input-addon.is-currency {
+  font-family: inherit;
+  font-size: 13px;
+}
+
 .ef-input-group button.ef-input-addon.is-stepper {
+  box-sizing: border-box;
   appearance: none;
   background: var(--paper);
   border: 0;
@@ -3619,8 +3704,9 @@ input.ef-input[type='number'] {
   background: var(--paper-alt);
   border: 1px solid var(--rule);
   border-radius: var(--r-md);
-  min-height: var(--hit-base);
-  padding: 0 10px 0 14px;
+  min-height: var(--hit-field);
+  padding-block: 0;
+  padding-inline: 14px 10px;
   display: inline-flex;
   align-items: center;
   gap: var(--es-gap);
@@ -3657,7 +3743,7 @@ input.ef-input[type='number'] {
 .es--sm.p-multiselect {
   font-size: 12.5px;
   min-height: 32px;
-  padding: 0 8px 0 12px;
+  padding-inline: 12px 8px;
   border-radius: var(--r-sm);
 }
 
@@ -4278,6 +4364,19 @@ input.ef-input[type='number'] {
   flex: 1;
 }
 
+/* Product picker (ef-product-picker): 720px on a tablet or desktop, between
+   the lg and xl presets; three classes so it beats the size preset. Rows are
+   48px (--hit-touch) at every width, since the whole row is the toggle. */
+.es-dialog.ef-product-picker-dialog.p-dialog {
+  width: 720px;
+  max-width: 92vw;
+}
+
+.ef-product-picker-dialog .tbl tbody td {
+  --tbl-cell-pad-block: 6px;
+  height: var(--hit-touch);
+}
+
 /* ── Header inner structure (rendered via #header content template).
    `flex:1` on the title-block keeps the close right-aligned with or
    without the leading icon. */
@@ -4676,6 +4775,14 @@ input.ef-input[type='number'] {
     margin: calc((var(--hit-touch) - var(--ef-clear-size)) / 2);
   }
 
+  /* Inside a grouped field the clear is a flex item, so its block margin
+     sized the group: 48px plus the group's 1px borders drew a 50px field
+     beside 48px ones. The group's inner height is the whole target here;
+     the margin stops 1px short on each side so the group stays 48px. */
+  .ef-input-group .ef-clear {
+    margin-block: calc((var(--hit-touch) - var(--ef-clear-size)) / 2 - 1px);
+  }
+
   /* The select / multiselect ✕ sits in the trigger's flex row, between the
      label and the caret, 10px (--es-gap) from each. It reserves only the
      inline room its 48px target still lacks after that gap, so the target
@@ -4770,33 +4877,60 @@ input.ef-input[type='number'] {
 
 /* Toolbar buttons collapse to icon-only below 767px, so the blanket
    min-block-size above stretched a 40px-wide button to 48px tall and
-   produced a lozenge four-across in the header. Here the VISUAL stays
-   40px square and the TOUCH TARGET reaches the tier through a hit
-   slop, which is the point of the tier: a thumb needs 48px, an eye
-   does not.
+   produced a lozenge four-across in the header. On a touch phone the
+   button is now a true 48px (--hit-touch) square: the old 40px box with an
+   invisible 48px slop measured 32px to anyone checking the box, and a
+   detail screen keeps at most a few of them inline because
+   ef-detail-toolbar moves the rest into its overflow menu.
 
    Scoped to the same 767px as the rule that hides the label. Keyed on
    pointer type alone it also caught every tablet, which kept its label
    and got a 40px box: "Nouvelle commande" spilled out of the button and
    the detail actions piled into each other. Above 767px a touch screen
-   keeps the labelled button, 48px tall from the generic rule above. */
+   keeps the labelled button, 48px tall from the generic rule above.
+   Desktop (fine pointer) is unchanged. */
 @media (pointer: coarse) and (max-width: 767px) {
   .detail-toolbar .right .btn,
   .search-toolbar .right .btn {
-    position: relative;
-    inline-size: var(--hit-base);
-    block-size: var(--hit-base);
+    inline-size: var(--hit-touch);
+    block-size: var(--hit-touch);
     min-inline-size: 0;
     min-block-size: 0;
     padding: 0;
   }
+}
 
-  .detail-toolbar .right .btn::after,
-  .search-toolbar .right .btn::after {
-    content: '';
-    position: absolute;
-    /* (48 - 40) / 2 outward on every side */
-    inset: calc((var(--hit-touch) - var(--hit-base)) / -2);
+/* A keepInView action is the screen's next step (confirm, prepare, ...): on a
+   phone it keeps its word beside the icon. Icons alone could not tell
+   "Confirmer" (pi-check) from "Livrer" (pi-check-circle). Declared after the
+   two rules above that hide toolbar labels and square the buttons, because
+   a media query adds no specificity. */
+@media (max-width: 767px) {
+  .detail-toolbar .right .btn.btn--keep-label > span {
+    display: inline;
+  }
+
+  .detail-toolbar .right .btn.btn--keep-label {
+    padding: 7px 14px;
+  }
+}
+
+@media (pointer: coarse) and (max-width: 767px) {
+  .detail-toolbar .right .btn.btn--keep-label {
+    inline-size: auto;
+    padding: 0 16px;
+  }
+}
+
+/* The toolbar's overflow trigger is the shared row-actions kebab. Inside
+   the toolbar it is a real 48px target (not the table's overhang trick,
+   which needs a row to reserve the margin), and a flex item that may not
+   shrink. */
+@media (pointer: coarse) {
+  .detail-toolbar .right .row-actions__trigger {
+    --ef-row-trigger-w: var(--hit-touch);
+    --ef-row-trigger-h: var(--hit-touch);
+    margin: 0;
   }
 }
 
@@ -4816,3 +4950,87 @@ input.ef-input[type='number'] {
     --app-bottom-bar: 64px;
   }
 }
+
+/* Product picker on a phone: edge to edge, not the 48px-gutter full preset.
+   The body scrolls between the fixed header and footer. */
+@media (max-width: 767px) {
+  .es-dialog.ef-product-picker-dialog--fullscreen.p-dialog {
+    width: 100vw;
+    max-width: 100vw;
+    height: 100dvh;
+    max-height: 100dvh;
+    margin: 0;
+    border-radius: 0;
+  }
+
+  .ef-product-picker-dialog--fullscreen .p-dialog-content {
+    max-height: none;
+    flex: 1;
+  }
+}
+
+/* ef-file-upload on a touch device: the painted button reaches the 48px touch
+   target. By pointer rather than width, like ef-pill-group, so a touch laptop
+   or tablet gets it too. Last in the file so the base .btn rule does not win. */
+@media (pointer: coarse) {
+  .ef-file-upload .btn {
+    min-height: var(--hit-touch);
+  }
+}
+
+/* -- Order builder: room for its floating total ----------------------
+   ef-order-builder pins its total pill (`.ob-fab`, --ef-order-fab-h tall)
+   20px above the bottom of the viewport's usable area: above the phone
+   tab bar, which is an in-flow row under the scroll area, so the scroll
+   area already ends where the bar begins. The pill shows up to 1279px,
+   and on a wider screen once the builder is collapsed.
+
+   The reserve goes at the end of the scroll area, not in the builder, so
+   it follows whatever the host renders after the builder (a delivery card,
+   say) and nothing but the pill's own footprint is left blank: offset +
+   pill + one grid gap, plus the home indicator where no tab bar already
+   pads it. The tab bar is not added; the scroll area already stops above
+   it.
+
+   `.order-builder .ob-fab` inside :has() rather than the element name, so
+   the selector outranks ef-app-main's own (encapsulated) padding rule.
+   Last in the file, after every rule it overrides. */
+:root {
+  --ef-order-fab-h: 56px;
+}
+
+/* Phone: the tab bar is in flow under the scroll area and already pads the
+   home indicator, so the scroll area ends above it and the reserve does not
+   add env(safe-area-inset-bottom) again (34px of blank space on a notched
+   iPhone otherwise). */
+@media (max-width: 767px) {
+  .ef-app-main__content:has(.order-builder .ob-fab) {
+    padding-block-end: calc(20px + var(--ef-order-fab-h) + var(--s-3));
+  }
+}
+
+/* Tablet and collapsed desktop: no tab bar, so the scroll area reaches the
+   bottom edge and the pill clears the home indicator itself. */
+@media (min-width: 768px) and (max-width: 1279px) {
+  .ef-app-main__content:has(.order-builder .ob-fab) {
+    padding-block-end: calc(env(safe-area-inset-bottom, 0px) + 20px + var(--ef-order-fab-h) + var(--s-3));
+  }
+}
+
+@media (min-width: 1280px) {
+  .ef-app-main__content:has(.order-builder.ob-collapsed) {
+    padding-block-end: calc(env(safe-area-inset-bottom, 0px) + 20px + var(--ef-order-fab-h) + var(--s-3));
+  }
+}
+
+/* .f-more ("More filters") on a touch device: reaches the 48px touch target.
+   By pointer rather than width, like the other touch rules. Last in the file
+   so the base .f-more min-height does not win. The row aligns its items to
+   center, so the pills beside it keep their own height. */
+@media (pointer: coarse) {
+  .f-pill,
+  .f-more,
+  .f-clear {
+    min-height: var(--hit-touch);
+  }
+}