@elasticias/ui 1.0.42 → 1.0.43

package/package.json

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

package/styles/_patterns.scss

@@ -765,12 +765,24 @@
 /* ──────────── RESULTS BAR + TABLE WRAPPER ──────────────────────── */
 
 .tbl-wrap {
+  min-width: 0;
   background: var(--paper-alt);
   border: 1px solid var(--rule);
   border-radius: var(--r-2xl);
   overflow: hidden;
 }
 
+/* The table's own horizontal scroller, inside the clipping shell. A table
+   wider than its column (a tablet, or a desktop with the side panel open)
+   pans here rather than being cut off by .tbl-wrap or widening the page.
+   overscroll-behavior keeps a sideways drag that hits the end from
+   panning the page behind it. */
+.tbl-scroll {
+  min-width: 0;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+}
+
 .tbl-head {
   display: flex;
   justify-content: space-between;
@@ -971,49 +983,66 @@
 }
 
 /* ──────────── APP-BAR ICON ACTIONS ──────────────────────────────
-   The theme switch and sign-out sit at the trailing edge of
-   ef-app-top. They borrow the row-actions trigger's shape rather
-   than inventing a third kind of icon button. */
+   The theme switch, sign-out and any app action (`.ef-app-top__action`)
+   at the trailing edge of ef-app-top, and the theme switch in the login
+   header. Plain icons in the treatment of the phone's menu button
+   (`.ef-app-shell__menu`): no fill, no border, a 40px box, an 18px glyph.
+
+   They used to borrow the row-actions trigger's bordered pill, and the
+   touch tier grew that painted pill to 48px, so a tablet's top bar was a
+   row of big circles. The touch target now grows invisibly instead (see
+   the `pointer: coarse` block below): a thumb needs 48px, an eye does not.
+   The slot gap is 8px, so two 48px targets meet edge to edge and never
+   overlap.
+
+   Each carries an aria-label and a pTooltip (hover and focus), not a
+   `title`: a title never shows on touch and doubles PrimeNG's tooltip on
+   a desktop. */
 
 .ef-theme-toggle,
 .ef-app-top__logout,
 .ef-app-top__action {
   appearance: none;
-  background: var(--paper-alt);
-  border: 1px solid var(--rule);
-  width: var(--hit);
-  height: var(--hit);
-  border-radius: var(--r-pill);
+  position: relative;
+  flex: 0 0 auto;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  width: var(--hit-base);
+  height: var(--hit-base);
+  border-radius: var(--r-md);
   display: inline-grid;
   place-items: center;
   color: var(--text-mute);
   cursor: pointer;
   transition:
     background var(--t-fast) var(--ease-out),
-    border-color var(--t-fast) var(--ease-out),
     color var(--t-fast) var(--ease-out);
 }
 
-.ef-theme-toggle:hover,
-.ef-app-top__logout:hover,
-.ef-app-top__action:hover {
-  color: var(--text);
-  border-color: var(--rule-hover);
+/* Only where hover is real: iOS keeps :hover on the last element tapped,
+   so the fill would stay on that icon until the next tap elsewhere. */
+@media (hover: hover) {
+  .ef-theme-toggle:hover,
+  .ef-app-top__logout:hover,
+  .ef-app-top__action:hover {
+    background: color-mix(in srgb, var(--text) 8%, transparent);
+    color: var(--text);
+  }
 }
 
 .ef-theme-toggle:focus-visible,
 .ef-app-top__logout:focus-visible,
 .ef-app-top__action:focus-visible {
-  outline: 0;
-  border-color: var(--tenant-400);
-  box-shadow: 0 0 0 4px var(--tenant-100);
+  outline: 2px solid var(--tenant-400);
+  outline-offset: 2px;
   color: var(--text);
 }
 
 .ef-theme-toggle i,
 .ef-app-top__logout i,
 .ef-app-top__action i {
-  font-size: 14px;
+  font-size: 18px;
   line-height: 1;
 }
 
@@ -1554,6 +1583,18 @@
   inset-inline-start: 0;
 }
 
+/* Placed by ef-row-actions from the trigger's rect (inline top / right /
+   bottom / left), so no scrolling or clipping ancestor can cut it off. */
+.row-actions__menu.is-floating {
+  position: fixed;
+  /* max-height is set inline from the room on the menu's side; border-box
+     so the padding and border count inside it and a capped menu stays on
+     screen. */
+  box-sizing: border-box;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
 /* Not enough room below the trigger — flip above it, and reverse the
    entry slide so the menu still moves away from its trigger. */
 .row-actions__menu.up {
@@ -1795,9 +1836,12 @@
   min-width: 0;
 }
 
-/* When a row-actions menu is open inside a data card, the table-wrap
-   should let the popover escape its overflow. The data-card binds
-   .has-open-menu when any descendant trigger is in `.open` state. */
+/* While the density or columns menu (in .tbl-head) is open, the
+   table-wrap lets it escape its rounded clip; the data-card binds
+   .has-open-menu for those two only. Row menus never need it: they are
+   fixed to the viewport, because .tbl-scroll must keep its own overflow
+   (lifting it would reset the reader's scroll position and spill the
+   table across the page). */
 .tbl-wrap.has-open-menu {
   overflow: visible;
 }
@@ -4541,9 +4585,6 @@ input.ef-input[type='number'] {
     min-inline-size: var(--hit-touch);
   }
 
-  .ef-app-top__action,
-  .ef-theme-toggle,
-  .ef-app-top__logout,
   .row-actions__trigger,
   .ef-clear,
   .pg {
@@ -4551,30 +4592,28 @@ input.ef-input[type='number'] {
     block-size: var(--hit-touch);
   }
 
-  /* 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. */
-  .detail-toolbar .right .btn,
-  .search-toolbar .right .btn {
-    position: relative;
-    inline-size: var(--hit-base);
-    block-size: var(--hit-base);
-    min-inline-size: 0;
-    min-block-size: 0;
-    padding: 0;
-  }
-
-  .detail-toolbar .right .btn::after,
-  .search-toolbar .right .btn::after {
+  /* The top-bar icons keep their 40px painted box and reach the 48px
+     tier through an invisible overhang, 4px each side. The 8px slot gap
+     means neighbouring overhangs meet and never overlap, so a tap always
+     lands on the control nearest it. */
+  .ef-app-top__action::after,
+  .ef-theme-toggle::after,
+  .ef-app-top__logout::after {
     content: '';
     position: absolute;
-    /* (48 - 40) / 2 outward on every side */
     inset: calc((var(--hit-touch) - var(--hit-base)) / -2);
   }
 
+  /* Where the lib's controls meet whatever the app projects into the
+     actions slot, the gap is 12px rather than 8. An app control can carry
+     a wider overhang than ours: the phone avatar paints 32px inside a
+     48px target, 8px each side. 8 + 4 needs 12px between the painted
+     boxes, or the theme switch takes the avatar's trailing edge. */
+  ef-app-top .ef-app-top__slot--actions > * + ef-theme-toggle,
+  ef-app-top .ef-app-top__slot--actions > :not(ef-theme-toggle) + .ef-app-top__logout {
+    margin-inline-start: 4px;
+  }
+
   /* The switch draws at its theme size (Aura: 40x24) and its click
      target is PrimeNG's invisible input, sized to exactly that box. In a
      list row a tap that lands just outside it did nothing, because the
@@ -4599,6 +4638,38 @@ 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.
+
+   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. */
+@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);
+    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);
+  }
+}
+
 /* ── MOBILE BOTTOM BAR ──────────────────────────────────────────────
    The phone shell renders a 64px tab bar fixed to the bottom edge.
    Anything else pinned down there has to clear it, so the height is

package/types/elasticias-ui.d.ts

@@ -980,6 +980,9 @@ declare class EfConfirmDialogComponent {
  * The icon shows the theme you would move to, not the one you are in, which
  * is what makes a single-button toggle readable: a moon means "go dark".
  *
+ * Named by `aria-label` and a pTooltip that opens on hover and on
+ * keyboard focus (not `title`, which never shows on touch).
+ *
  * ```html
  * <ef-theme-toggle />
  * ```
@@ -990,13 +993,18 @@ declare class EfThemeToggleComponent {
     readonly darkIcon: _angular_core.InputSignal<string>;
     /** Icon shown while dark is active (i.e. "switch to light"). */
     readonly lightIcon: _angular_core.InputSignal<string>;
-    /** Translation key for the accessible name. */
+    /**
+     * Where the tooltip opens. Below suits a top bar (the app bar, the
+     * login header); a toggle placed low on a page can open it above.
+     */
+    readonly tooltipPosition: _angular_core.InputSignal<"top" | "left" | "bottom" | "right">;
+    /** Translation key for the accessible name (also the tooltip text). */
     readonly ariaLabelKey: _angular_core.InputSignal<string>;
     readonly isDark: _angular_core.Signal<boolean>;
     protected readonly labelKey: _angular_core.Signal<string>;
     toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfThemeToggleComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfThemeToggleComponent, "ef-theme-toggle", never, { "darkIcon": { "alias": "darkIcon"; "required": false; "isSignal": true; }; "lightIcon": { "alias": "lightIcon"; "required": false; "isSignal": true; }; "ariaLabelKey": { "alias": "ariaLabelKey"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfThemeToggleComponent, "ef-theme-toggle", never, { "darkIcon": { "alias": "darkIcon"; "required": false; "isSignal": true; }; "lightIcon": { "alias": "lightIcon"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "ariaLabelKey": { "alias": "ariaLabelKey"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -1579,7 +1587,8 @@ declare class EfToolbarComponent {
  *
  * **Desktop / tablet:** rail (64px) + side (240px) + (top + main). The
  * side folds away from a toggle at the foot of the rail (or mod+B); the
- * rail never does.
+ * rail never does. A tablet starts with it folded unless the viewer has
+ * a stored choice (`EF_SIDE_COLLAPSED_KEY`).
  * **Mobile:** delegates to `<ef-app-shell-mobile>` — top bar + scrollable
  * body + 5-tab bottom bar + FAB slot.
  *
@@ -1601,7 +1610,20 @@ declare class EfAppShellComponent {
     readonly isMobile: _angular_core.Signal<boolean>;
     readonly showSide: _angular_core.Signal<boolean>;
     private readonly prefs;
-    readonly sideCollapsed: _angular_core.WritableSignal<boolean>;
+    /** The viewer's explicit choice ('1' folded, '0' open), or null when they never made one. */
+    private readonly storedSide;
+    /**
+     * Folded or open. An explicit choice always wins. Without one, a
+     * tablet starts folded: at 768-1279px the 240px panel left a
+     * phone-width column for a desktop table, so the right-hand columns
+     * were cut off. A desktop keeps it open and a phone never renders it.
+     *
+     * The default is derived, never written: storing it would turn it
+     * into a choice the viewer did not make, pin it when they rotate or
+     * resize across the breakpoint, and with a server-backed store send
+     * a request on every page load.
+     */
+    readonly sideCollapsed: _angular_core.Signal<boolean>;
     /** Shown in the toggle's tooltip: the button is far from the content, the shortcut is not. */
     readonly shortcutHint: string;
     toggleSide(): void;
@@ -1727,6 +1749,21 @@ declare class EfAppTopComponent {
     /** Present only when the app provides `EF_SESSION`. */
     protected readonly session: _elasticias_core.EfSession;
     protected signOut(): void;
+    /** A touch or pen press at least this long is a hold, not a tap. */
+    static readonly HOLD_MS = 500;
+    /** True on a screen whose primary pointer cannot hover (a phone, a tablet). */
+    protected readonly touchOnly: _angular_core.WritableSignal<boolean>;
+    private pressStart;
+    constructor();
+    protected onSignOutPointerDown(event: PointerEvent): void;
+    /**
+     * A cancelled press (the browser took the gesture) must not judge a
+     * later click. Not on pointerleave: on touch it fires after pointerup
+     * and before the synthesised click, so clearing there would erase
+     * every long press just before the guard reads it.
+     */
+    protected forgetSignOutPress(): void;
+    protected onSignOutClick(event: MouseEvent): void;
     private readonly active;
     readonly module: _angular_core.Signal<_elasticias_core.EfModule>;
     readonly navItem: _angular_core.Signal<_elasticias_core.EfNavItem>;
@@ -4826,11 +4863,6 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
     private storageKey;
     private loadPreferences;
     private savePreferences;
-    /** Tracks how many `ef-row-actions` are currently open inside this
-     *  card. When > 0, `.tbl-wrap` lifts its `overflow: hidden` so the
-     *  popup can escape its rounded edges. */
-    readonly openMenuCount: _angular_core.WritableSignal<number>;
-    onRowActionsToggle(event: Event): void;
     /**
      * Children that own their own click. Opening the row on top of them would
      * run two things from one gesture.
@@ -5003,6 +5035,9 @@ declare class EfOverflowTooltipDirective {
  * - Click the trigger to toggle. Trigger gets `.open` (ink-active) while the menu is open.
  * - Only one row menu is open at a time — opening one closes the last.
  * - The menu flips above the trigger when there isn't room below it.
+ * - The menu is fixed to the viewport, placed from the trigger's rect, so a
+ *   table's horizontal scroller cannot clip it. Scrolling any ancestor or
+ *   resizing the window closes it, rather than leaving it behind its row.
  * - Click outside or press `Escape` to close.
  * - Clicking an item runs its `command` then closes the menu.
  * - dblclick on the trigger or menu does NOT propagate, so the data-card's
@@ -5077,14 +5112,54 @@ declare class EfRowActionsComponent {
      * below wins, which is where it has always been.
      */
     private shouldDropUp;
+    /** Gap between the trigger and the menu. Matches the CSS `calc(100% + 8px)`. */
+    private static readonly MENU_GAP;
+    /**
+     * Where the fixed menu sits, as physical offsets from the viewport
+     * edges. The four values are always set, so they override the CSS
+     * `top` / `bottom` / `inset-inline-*` an absolute menu uses.
+     */
+    readonly menuPosition: _angular_core.WritableSignal<{
+        top: string;
+        right: string;
+        bottom: string;
+        left: string;
+        maxHeight: string;
+    }>;
+    /**
+     * Fixed rather than absolute: inside ef-data-card the table sits in a
+     * horizontal scroller, and `overflow-x: auto` makes the block axis clip
+     * too, so an absolute menu was cut off at the scroller's edge. Lifting
+     * the scroller's overflow while a menu is open would reset its
+     * scrollLeft and spill the table across the page, exactly when the
+     * reader has scrolled across to reach the actions column.
+     */
+    private place;
+    /**
+     * An ancestor with a transform, filter or containment becomes the fixed
+     * menu's containing block (a dialog mid-animation, for one), and the
+     * viewport offsets land in the wrong place. Measure where the menu
+     * actually is against where the trigger says it should be, and shift
+     * by the difference. Also nudges it back inside the viewport.
+     */
+    private correctOffset;
+    /** The nearest `dir` wins (the app sets it on <html>); computed style covers a page without one. */
+    private isRtl;
+    private triggerRect;
+    /** The fixed containing block: the viewport without its scrollbars. */
+    private static viewportWidth;
+    private static viewportHeight;
+    private displacementListener;
+    private listenForDisplacement;
+    private stopListeningForDisplacement;
     /** Rough height before the menu exists: item padding + line box, with
      *  dividers and the menu's own padding and border. */
     private estimateMenuHeight;
     /** Re-decide against the rendered height — item labels wrap, and the
      *  estimate can't know that. */
     private correctPlacementAfterRender;
-    /** Bubbling DOM event so ancestors (e.g. ef-data-card) can react —
-     *  see `.tbl-wrap.has-open-menu { overflow: visible }`. */
+    /** Bubbling DOM event so ancestors can react to a row menu opening or
+     *  closing. ef-data-card no longer needs it (the menu is fixed). */
     private dispatchToggle;
     /** Outside click — closes the menu. */
     onDocumentClick(event: MouseEvent): void;