@elasticias/ui 1.0.43 → 1.0.45

package/package.json

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

package/styles/_comptoir.scss

@@ -115,6 +115,15 @@
   --hit-touch:  48px;  /* POS / mobile primary actions */
   --hit-pos:    64px;  /* POS number pad, big totals */
 
+  /* ── Layers ──────────────────────────────────────────────────── */
+  /* Toasts sit above every modal and overlay. PrimeNG numbers its layers
+     at runtime (ZIndexUtils): each new layer takes the last one's value
+     plus 1, plus the base of its own kind when the kind changes (modal
+     1100, overlay 1000). A dialog is 1101, a select opened inside it
+     2102, a dialog opened over that 3203, so no value near PrimeNG's
+     bases stays on top. 100000 is about ninety mixed layers away. */
+  --z-toast:    100000;
+
   /* ── Motion ──────────────────────────────────────────────────── */
   --t-fast: 140ms;
   --t-base: 260ms;

package/styles/_patterns.scss

@@ -1048,11 +1048,20 @@
 
 /* ──────────── PAGER ─────────────────────────────────────────────── */
 
+/* Both halves wrap and can shrink. A row of controls has an intrinsic
+   min-content width, so a pager that cannot wrap is as wide as its
+   lines-per-page block plus every page button, and the card clips the
+   rest: on a 390px phone, or in a narrow card on a tablet with the side
+   panel open, "next" and the last page were cut off. When the two halves
+   no longer fit on one line the page buttons take their own line, still
+   at the end. */
 .pager {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: var(--s-3);
+  min-width: 0;
   padding: var(--s-3) var(--s-5);
   border-top: 1px solid var(--rule);
   background: var(--paper-alt);
@@ -1060,8 +1069,21 @@
 
 .pager .pages {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 4px;
+  min-width: 0;
+  margin-inline-start: auto;
+}
+
+/* The phone pager's "5 sur 20", between previous and next. */
+.pager .pg-status {
+  padding: 0 8px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
 
 .pager .pg {
@@ -1090,7 +1112,9 @@
 
 .pager .size {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
+  min-width: 0;
   gap: 8px;
   font-size: 12.5px;
   color: var(--text-mute);
@@ -1515,11 +1539,17 @@
 }
 
 .row-actions__trigger {
+  /* Read again by the touch tier, which reserves the 48px footprint
+     around this box. */
+  --ef-row-trigger-w: 34px;
+  --ef-row-trigger-h: 28px;
   appearance: none;
   background: var(--paper-alt);
   border: 1px solid var(--rule);
-  width: 34px;
-  height: 28px;
+  box-sizing: border-box;
+  width: var(--ef-row-trigger-w);
+  height: var(--ef-row-trigger-h);
+  flex-shrink: 0;
   border-radius: var(--r-pill);
   display: inline-grid;
   place-items: center;
@@ -2219,6 +2249,15 @@
   line-height: 1;
 }
 
+/* The back and month arrows are icon-font glyphs, which bidi never
+   mirrors. In Arabic the header runs right to left, so "previous" sits on
+   the right and must point right. (Text arrows such as the pager's
+   ‹ › « » are Bidi_Mirrored and already flip on their own.) */
+[dir='rtl'] .dp__back i,
+[dir='rtl'] .dp__cal-nav i {
+  transform: scaleX(-1);
+}
+
 .dp__cal-title {
   display: inline-flex;
   align-items: center;
@@ -2495,7 +2534,10 @@
   position: fixed;
   top: var(--s-4);
   inset-inline-end: var(--s-4);
-  z-index: 1000;
+  /* Above every PrimeNG modal mask and overlay, so an error raised by a
+     dialog's save is readable and its ✕ clickable while the dialog is
+     open. The token explains the number. */
+  z-index: var(--z-toast);
   display: grid;
   gap: var(--s-2);
   align-content: start;
@@ -3569,6 +3611,9 @@ input.ef-input[type='number'] {
 
 .es.p-select,
 .es.p-multiselect {
+  /* The gap between label, clear ✕ and caret. The touch tier reads it to
+     keep the ✕'s 48px target between the label and the caret. */
+  --es-gap: 10px;
   width: 100%;
   min-width: 200px;
   background: var(--paper-alt);
@@ -3578,7 +3623,7 @@ input.ef-input[type='number'] {
   padding: 0 10px 0 14px;
   display: inline-flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--es-gap);
   color: var(--text);
   font-size: 14px;
   cursor: pointer;
@@ -3662,11 +3707,14 @@ input.ef-input[type='number'] {
    clearable control (input, number, select, typeahead) is identical. */
 .ef-clear,
 .es .es-clear {
+  /* One size, read again by the touch tier below to size the target and
+     the space it reserves, so the two cannot drift apart. */
+  --ef-clear-size: 22px;
   display: inline-grid;
   place-items: center;
   box-sizing: border-box;
-  width: 22px;
-  height: 22px;
+  width: var(--ef-clear-size);
+  height: var(--ef-clear-size);
   border: 0;
   padding: 0;
   background: transparent;
@@ -4585,10 +4633,75 @@ input.ef-input[type='number'] {
     min-inline-size: var(--hit-touch);
   }
 
+  /* The row ⋯ trigger and the clear ✕ draw at their desktop size (34x28
+     pill, 22px circle) and reach the 48px tier through an invisible
+     overhang, like the top-bar icons. Growing the painted box instead
+     turned every row's ⋯ into a 48px bordered circle.
+
+     The margin reserves the same 48x48 the old rule laid out, so rows,
+     cards and inputs keep their height and spacing, and the overhang
+     never leaves that box: two triggers in adjacent compact rows cannot
+     overlap, because each target is the footprint its own row already
+     made room for. The trigger's overhang adds its 1px border, since an
+     absolute box is measured from the padding edge. */
   .row-actions__trigger,
   .ef-clear,
-  .pg {
-    inline-size: var(--hit-touch);
+  .es .es-clear {
+    position: relative;
+  }
+
+  .row-actions__trigger {
+    margin-block: calc((var(--hit-touch) - var(--ef-row-trigger-h)) / 2);
+    margin-inline: calc((var(--hit-touch) - var(--ef-row-trigger-w)) / 2);
+  }
+
+  .ef-clear {
+    margin: calc((var(--hit-touch) - var(--ef-clear-size)) / 2);
+  }
+
+  /* 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
+     ends exactly at the label's edge and at the caret's, and a tap on the
+     caret opens the panel instead of clearing the value. No block margin:
+     the trigger is 40px whether it holds a value or not, and the target's
+     extra 4px above and below overhangs the trigger the way the input ✕
+     does. */
+  .es .es-clear {
+    margin-inline: calc((var(--hit-touch) - var(--ef-clear-size)) / 2 - var(--es-gap));
+  }
+
+  .row-actions__trigger::after,
+  .ef-clear::after,
+  .es .es-clear::after {
+    content: '';
+    position: absolute;
+  }
+
+  /* A fixed 48px box centred on the trigger, not an inset derived from
+     its size. The inset version measured from the padding edge and from
+     whatever size the row laid the trigger out at, and a phone row drew a
+     47.75px-wide target. The centred box is 48x48 whatever the painted
+     size, border or sub-pixel layout. */
+  .row-actions__trigger::after {
+    top: 50%;
+    left: 50%;
+    width: max(var(--hit-touch), 100%);
+    height: max(var(--hit-touch), 100%);
+    transform: translate(-50%, -50%);
+  }
+
+  .ef-clear::after,
+  .es .es-clear::after {
+    inset: calc((var(--hit-touch) - var(--ef-clear-size)) / -2);
+  }
+
+  /* Written as `.pager .pg` to match the base rule's specificity: a bare
+     `.pg` lost to its `height: 32px`, so page buttons drew 48px wide but
+     32px tall on every touch screen. A floor rather than a fixed width,
+     so a four-digit page number is not squeezed. */
+  .pager .pg {
+    min-inline-size: var(--hit-touch);
     block-size: var(--hit-touch);
   }
 

package/types/elasticias-ui.d.ts

@@ -5194,6 +5194,13 @@ interface PageBtn {
  *
  * Renders a windowed page list (first / current ±1 / last with
  * ellipsis) for total > 7 pages. Below 7 pages all buttons show.
+ *
+ * On a phone (`EfViewportService.isMobile`) the window becomes
+ * first · previous · "5 of 20" · next · last. The window is up to nine
+ * 48px touch targets (about 464px) and a 390px phone has about 316px
+ * inside a card, so it ran off the edge. The compact set still reaches
+ * every page the window offered: its numbered neighbours are one step
+ * away, and the first and the last page are one tap.
  */
 declare class EfPagerComponent {
     readonly pageNumber: _angular_core.InputSignal<number>;
@@ -5205,10 +5212,14 @@ declare class EfPagerComponent {
     readonly ofLabelKey: _angular_core.InputSignal<string>;
     readonly prevLabelKey: _angular_core.InputSignal<string>;
     readonly nextLabelKey: _angular_core.InputSignal<string>;
+    readonly firstLabelKey: _angular_core.InputSignal<string>;
+    readonly lastLabelKey: _angular_core.InputSignal<string>;
     /** Hide the lines-per-page selector + range when only paging is wanted. */
     readonly hideSize: _angular_core.InputSignal<boolean>;
     readonly pageChange: _angular_core.OutputEmitterRef<number>;
     readonly pageSizeChange: _angular_core.OutputEmitterRef<number>;
+    /** Phone layout: first · prev · "n of N" · next · last. */
+    readonly compact: _angular_core.Signal<boolean>;
     /** Falls back to the first configured option if the value ever goes empty. */
     private get defaultSize();
     /** `pageSizeOptions` shaped for `ef-select`, which reads a label and a
@@ -5228,7 +5239,7 @@ declare class EfPagerComponent {
     onSizeChange(value: number | string | null): void;
     trackBtn(index: number, btn: PageBtn): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfPagerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfPagerComponent, "ef-pager", never, { "pageNumber": { "alias": "pageNumber"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "totalCount": { "alias": "totalCount"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "linesPerPageLabelKey": { "alias": "linesPerPageLabelKey"; "required": false; "isSignal": true; }; "ofLabelKey": { "alias": "ofLabelKey"; "required": false; "isSignal": true; }; "prevLabelKey": { "alias": "prevLabelKey"; "required": false; "isSignal": true; }; "nextLabelKey": { "alias": "nextLabelKey"; "required": false; "isSignal": true; }; "hideSize": { "alias": "hideSize"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfPagerComponent, "ef-pager", never, { "pageNumber": { "alias": "pageNumber"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "totalCount": { "alias": "totalCount"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "linesPerPageLabelKey": { "alias": "linesPerPageLabelKey"; "required": false; "isSignal": true; }; "ofLabelKey": { "alias": "ofLabelKey"; "required": false; "isSignal": true; }; "prevLabelKey": { "alias": "prevLabelKey"; "required": false; "isSignal": true; }; "nextLabelKey": { "alias": "nextLabelKey"; "required": false; "isSignal": true; }; "firstLabelKey": { "alias": "firstLabelKey"; "required": false; "isSignal": true; }; "lastLabelKey": { "alias": "lastLabelKey"; "required": false; "isSignal": true; }; "hideSize": { "alias": "hideSize"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; }, never, never, true, never>;
 }
 
 /**