@elasticias/ui 1.0.50 → 1.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elasticias/ui",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",

package/styles/_patterns.scss

@@ -2073,16 +2073,27 @@
 }
 
 .dp__panel {
-  position: absolute;
-  top: calc(100% + 8px);
-  inset-inline-start: 0;
-  min-width: 320px;
+  /* Portaled to <body> and fixed to the viewport; the component writes all
+     four physical sides and max-height from the trigger's rect
+     (placeDpPanel). No logical inset here: in RTL it would fight the
+     computed left. The z-index is a fallback; PrimeNG's ZIndexUtils sets
+     the live layer. */
+  position: fixed;
+  box-sizing: border-box;
+  /* The preset list sizes to its rows; the calendar view (.wide) has a set
+     width. It used to take the date inputs' intrinsic width (about 450px),
+     which is what pushed it past the card and the viewport. */
+  inline-size: max-content;
+  min-inline-size: 320px;
+  max-inline-size: calc(100vw - 16px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
   background: var(--paper-alt);
   border: 1px solid var(--rule);
   border-radius: var(--r-xl);
   box-shadow: var(--shadow-3);
   padding: 6px;
-  z-index: 40;
+  z-index: 1000;
   display: none;
   animation: row-actions-menu-in var(--t-base) var(--ease-spring);
 }
@@ -2092,7 +2103,7 @@
   gap: 2px;
 }
 .dp__panel.wide {
-  min-width: 340px;
+  inline-size: 340px;
 }
 
 .dp__view {
@@ -2367,7 +2378,7 @@
 
 .dp__cal-grid {
   display: grid;
-  grid-template-columns: repeat(7, 1fr);
+  grid-template-columns: repeat(7, minmax(0, 1fr));
   gap: 2px 0;
   padding: 0 2px;
 }
@@ -2462,20 +2473,24 @@
 
 .dp__inputs {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  /* A label that wraps (the panel has a set width now) must not push its
+     input below its neighbour's. */
+  align-items: end;
   gap: var(--s-2);
   padding: var(--s-2) var(--s-3) 0;
 }
 
 /* Single-date field mode — one full-width input instead of Du / Au. */
 .dp__inputs--single {
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 1fr);
   padding-bottom: var(--s-3);
 }
 
 .dp__field {
   display: grid;
   gap: 4px;
+  min-width: 0;
 }
 
 .dp__field label {
@@ -2488,6 +2503,9 @@
 }
 
 .dp__field input {
+  /* Border-box here, not left to an app's reset: with content-box the
+     100% width plus padding pushed the time input past its column. */
+  box-sizing: border-box;
   font: inherit;
   font-family: var(--font-mono);
   font-size: 12.5px;
@@ -3859,6 +3877,22 @@ input.ef-input[type='number'] {
   transform: translateY(-50%);
 }
 
+/* The clear sits at the wrapper's trailing edge, but the input can carry its
+   own direction (`dir` on ef-input-text: an LTR phone or IBAN on an Arabic
+   screen), and `padding-inline-end` follows the input, so the room it reserved
+   landed on the opposite side and the value ran under the ✕. Reserve the room
+   by the wrapper's direction instead. Physical sides on purpose: the two
+   directions are named so the side tracks the clear, not the input. */
+.ef-input-wrap:dir(ltr) .ef-input.has-clear {
+  padding-left: 12px;
+  padding-right: 36px;
+}
+
+.ef-input-wrap:dir(rtl) .ef-input.has-clear {
+  padding-left: 36px;
+  padding-right: 12px;
+}
+
 /* The same centring, for the clear that PrimeNG owns rather than we do.
    PrimeNG centres both password icons with `top: 50%; margin-top: -8px`, which
    is exact for the 16px mask toggle it draws itself and wrong for anything
@@ -4726,6 +4760,74 @@ input.ef-input[type='number'] {
   }
 }
 
+/* The date picker's phone layout: a full-width bottom sheet over a backdrop.
+   EfViewportService's mobile (<= 767px) toggles the class, so there is no
+   media query here and no band where the two disagree. Every target is
+   --hit-touch (48px). Declared after the base .dp__* rules so it wins. */
+.dp__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: color-mix(in oklab, var(--ink-950) 35%, transparent);
+}
+
+.dp__panel.dp__panel--sheet {
+  inset: auto 0 0 0;
+  inline-size: 100%;
+  max-inline-size: none;
+  min-inline-size: 0;
+  max-height: 85vh;
+  max-height: 85dvh;
+  border-radius: var(--r-xl) var(--r-xl) 0 0;
+  border-bottom: 0;
+  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
+  animation: dp-sheet-in var(--t-base) var(--ease-spring);
+}
+
+@keyframes dp-sheet-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.dp__panel--sheet .dp__cal-day {
+  height: var(--hit-touch);
+}
+
+.dp__panel--sheet .dp__cal-day .day-num {
+  width: 40px;
+  height: 40px;
+  font-size: 15px;
+}
+
+.dp__panel--sheet .dp__cal-nav,
+.dp__panel--sheet .dp__back {
+  width: var(--hit-touch);
+  height: var(--hit-touch);
+}
+
+.dp__panel--sheet .dp__cal-pick,
+.dp__panel--sheet .dp__cal-cell,
+.dp__panel--sheet .dp__preset,
+.dp__panel--sheet .dp__actions .btn {
+  min-height: var(--hit-touch);
+}
+
+/* 16px stops iOS Safari zooming the page when the input takes focus. */
+.dp__panel--sheet .dp__field input {
+  min-height: var(--hit-touch);
+  font-size: 16px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dp__panel.dp__panel--sheet {
+    animation: none;
+  }
+}
+
 /* ── TOUCH TARGET TIER ──────────────────────────────────────────────
    The design system documents three tiers: --hit-base 40px for forms,
    --hit-touch 48px for touch, --hit-pos 64px for the till. Until now
@@ -5034,3 +5136,133 @@ input.ef-input[type='number'] {
     min-height: var(--hit-touch);
   }
 }
+
+/* ── Touch tier, wave 2 (QA D2, D4, D7) ──────────────────────────────
+   A thumb needs 48px; these four controls were left at their desktop
+   height. By pointer, like the rules above, so a mouse keeps the dense
+   layout. Last in the file so the base rules do not win. */
+@media (pointer: coarse) {
+  /* The ⋮ overflow menu and the shared row-actions menu: 36px items. */
+  .row-actions__item,
+  .ef-menu__item {
+    min-height: var(--hit-touch);
+  }
+
+  /* Confirm dialog actions ("Annuler" / "Recharger"): 40px. */
+  .es-confirm .p-confirmdialog-accept-button,
+  .es-confirm .p-confirmdialog-reject-button {
+    min-height: var(--hit-touch);
+  }
+
+  /* Dialog header close: a 32px ghost circle. */
+  .es-dialog .p-dialog-header-icon,
+  .es-dialog .p-dialog-close-button,
+  .es-dialog .es-dialog__close {
+    width: var(--hit-touch);
+    height: var(--hit-touch);
+  }
+}
+
+/* ef-pdf-preview footer on a phone: five actions in one row clipped every
+   label. Let them wrap to two rows of equal-width buttons; Close, which
+   pushed itself to the leading edge on a wide footer, joins the grid.
+   Breakpoint is the shell's 767px (EfViewportService). */
+@media (max-width: 767px) {
+  .es-dialog.ef-pdf-preview-dialog .p-dialog-footer {
+    flex-wrap: wrap;
+  }
+
+  .es-dialog.ef-pdf-preview-dialog .p-dialog-footer .btn {
+    flex: 1 1 calc(50% - var(--s-2));
+    min-width: 0;
+    justify-content: center;
+  }
+
+  .es-dialog.ef-pdf-preview-dialog .p-dialog-footer .btn-dialog-leading {
+    margin-inline-end: 0;
+  }
+}
+
+/* A Latin code (order reference, SKU) inside RTL text keeps its own
+   left-to-right order and is not reordered by its neighbours. Without it
+   the card's reference clipped at the wrong end in Arabic. The isolate is
+   a no-op in LTR. */
+.tbl .ref,
+.mrow__primary .ref {
+  direction: ltr;
+  unicode-bidi: isolate;
+}
+
+.mrow__primary .ref {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+}
+
+/* ──────────── EF-PASSWORD — COMPTOIR VARIANT ────────────────────────
+   `<ef-password variant="comptoir">` puts `.ef-password--comptoir` on the
+   p-password root. Same box as `.ef-input` (--hit-field: 40px, 48px on a
+   coarse pointer), and the show/hide toggle is a --hit-field square. */
+.ef-password--comptoir.p-password {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.ef-password--comptoir.p-password .p-password-input {
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.2;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--hit-field);
+  padding-block: 0;
+  padding-inline: 12px;
+  background: var(--paper-alt);
+  border: 1px solid var(--rule);
+  border-radius: var(--r-md);
+  color: var(--text);
+  box-shadow: none;
+  outline: 0;
+  transition:
+    border-color var(--t-fast) var(--ease-out),
+    box-shadow var(--t-fast) var(--ease-out);
+}
+
+.ef-password--comptoir.p-password .p-password-input:focus {
+  border-color: var(--tenant-400);
+  box-shadow: 0 0 0 4px var(--tenant-100);
+}
+
+.ef-password--comptoir.p-password .p-password-input:disabled {
+  background: var(--paper);
+  color: var(--text-mute);
+  cursor: not-allowed;
+}
+
+.ef-password--comptoir.p-password.ng-invalid.ng-touched .p-password-input {
+  border-color: var(--st-cancelled-fg);
+  box-shadow: 0 0 0 3px var(--st-cancelled-bg);
+}
+
+/* Room for the toggle, on whichever side the text ends. */
+.ef-password--comptoir.p-password:has(.p-password-toggle-mask-icon) .p-password-input {
+  padding-inline-end: var(--hit-field);
+}
+
+/* The 16px glyph sits in a --hit-field square (padding grows the target,
+   not the glyph) pinned to the input's end edge. */
+.ef-password--comptoir.p-password .p-password-toggle-mask-icon {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  margin: 0;
+  box-sizing: border-box;
+  width: var(--hit-field);
+  height: var(--hit-field);
+  padding: calc((var(--hit-field) - 16px) / 2);
+  color: var(--text-mute);
+  cursor: pointer;
+}