@elasticias/ui 1.0.20 → 1.0.22

package/package.json

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

package/styles/_patterns.scss

@@ -1134,22 +1134,6 @@
    lives in the "DETAIL SCREEN PRIMITIVES (Phase 7)" section below. Only the
    sub-element rules (`.left` / `.ref` / `.name` / `.right`) live here. */
 
-.detail-toolbar .left {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex: 1;
-  min-width: 0;
-  flex-wrap: wrap;
-}
-
-
-.detail-toolbar .ref {
-  font-family: var(--font-mono);
-  font-size: 14px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-}
 
 .detail-toolbar .name {
   font-family: var(--font-display);
@@ -1161,121 +1145,99 @@
   letter-spacing: -0.015em;
 }
 
-.detail-toolbar .right {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: wrap;
-  margin-inline-start: auto;
-}
-
 /* ──────────── DETAIL GRID + CARD ───────────────────────────────── */
 
-.detail-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: var(--s-3);
-}
-
 @media (min-width: 1100px) {
   .detail-grid {
     grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
   }
 }
 
-.detail-stack {
-  display: grid;
-  gap: var(--s-3);
-  align-content: start;
-  min-width: 0;
-}
-
-.card {
-  background: var(--paper-alt);
-  border: 1px solid var(--rule);
-  border-radius: var(--r-2xl);
-  overflow: hidden;
-}
-
-.card-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--rule-soft, rgba(15, 17, 21, 0.05));
-  gap: var(--s-3);
-}
-
-.card-head .title {
-  font-family: var(--font-display);
-  font-variation-settings:
-    'opsz' 12,
-    'wght' 700,
-    'wdth' 88;
-  font-size: 14.5px;
-  letter-spacing: -0.01em;
-}
-
-.card-head .meta {
-  font-size: 11.5px;
-  color: var(--text-mute);
-  font-weight: 600;
-}
-
-.card-body {
-  padding: 16px;
-  display: grid;
-  /* minmax(0, 1fr): a grid item's default min-width is auto, so a wide child
-     — a table, a nested data card — sized this column and pushed the card
-     past its own container. Same trap as the content area and the screen
-     host; this is the third place it bites. */
-  grid-template-columns: minmax(0, 1fr);
-  gap: var(--s-3);
-}
-
-.card-foot {
-  padding: 10px 16px;
-  border-top: 1px solid var(--rule-soft, rgba(15, 17, 21, 0.05));
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--s-3);
-  background: var(--paper);
-}
-
 /* ──────────── FORM GRID + FIELD ────────────────────────────────── */
 
-.form-grid {
+/* ──────────────────────────────────────────────────────────────────
+   The 12-column form grid — one definition, two names.
+
+   `.ef-form-grid` is the host class of the <ef-form-grid> primitive;
+   `.form-grid` is the raw-class form written directly in templates.
+   Both are in active use (110 span sites across 13 files), and they
+   were maintained as two separate blocks that had already drifted
+   apart: one supported spans {1,2,3,4,6,12}, the other
+   {2,3,4,6,8,9,12}. A `col-8` inside a `.form-grid` therefore did
+   nothing at all, silently, and so did a `col-1` inside an
+   `.ef-form-grid`. Keeping both names on one rule per span makes the
+   two impossible to drift again.
+
+   Every span collapses to full width at the shell's own mobile
+   breakpoint (767px, the one EfViewportService uses). That single
+   rule is why a field never carries a per-breakpoint span in its
+   template, and why this grid stays mobile-first by default rather
+   than by remembering.
+   ────────────────────────────────────────────────────────────────── */
+.form-grid,
+.ef-form-grid {
   display: grid;
   gap: var(--s-3);
   grid-template-columns: repeat(12, minmax(0, 1fr));
 }
 
-.form-grid > .col-1 {
+.form-grid > .col-1,
+.ef-form-grid > .col-1 {
   grid-column: span 1;
 }
-.form-grid > .col-2 {
+.form-grid > .col-2,
+.ef-form-grid > .col-2 {
   grid-column: span 2;
 }
-.form-grid > .col-3 {
+.form-grid > .col-3,
+.ef-form-grid > .col-3 {
   grid-column: span 3;
 }
-.form-grid > .col-4 {
+.form-grid > .col-4,
+.ef-form-grid > .col-4 {
   grid-column: span 4;
 }
-.form-grid > .col-6 {
+.form-grid > .col-5,
+.ef-form-grid > .col-5 {
+  grid-column: span 5;
+}
+.form-grid > .col-6,
+.ef-form-grid > .col-6 {
   grid-column: span 6;
 }
-.form-grid > .col-12 {
+.form-grid > .col-7,
+.ef-form-grid > .col-7 {
+  grid-column: span 7;
+}
+.form-grid > .col-8,
+.ef-form-grid > .col-8 {
+  grid-column: span 8;
+}
+.form-grid > .col-9,
+.ef-form-grid > .col-9 {
+  grid-column: span 9;
+}
+.form-grid > .col-10,
+.ef-form-grid > .col-10 {
+  grid-column: span 10;
+}
+.form-grid > .col-11,
+.ef-form-grid > .col-11 {
+  grid-column: span 11;
+}
+.form-grid > .col-12,
+.ef-form-grid > .col-12 {
   grid-column: span 12;
 }
 
 @media (max-width: 767px) {
-  .form-grid > [class*='col-'] {
+  .form-grid > [class*='col-'],
+  .ef-form-grid > [class*='col-'] {
     grid-column: span 12;
   }
 }
 
+
 .field {
   display: grid;
   gap: 4px;
@@ -1422,12 +1384,6 @@
 
 /* ──────────── DASHBOARD KPI CARDS ───────────────────────────────── */
 
-.kpi-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: var(--s-3);
-}
-
 .kpi-card {
   background: var(--paper-alt);
   border: 1px solid var(--rule);
@@ -1438,60 +1394,6 @@
   align-content: start;
 }
 
-.kpi-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-}
-
-.kpi-value {
-  font-family: var(--font-display);
-  font-variation-settings:
-    'opsz' 96,
-    'wght' 700,
-    'wdth' 80;
-  font-size: clamp(28px, 4vw, 40px);
-  letter-spacing: -0.03em;
-  line-height: 1;
-  font-feature-settings: 'tnum';
-  color: var(--text);
-}
-
-.kpi-value .unit {
-  font-family: var(--font-mono);
-  font-size: 0.4em;
-  font-weight: 500;
-  color: var(--text-mute);
-  margin-inline-start: 6px;
-  letter-spacing: 0;
-}
-
-.spark {
-  width: 100%;
-  height: 28px;
-  margin-top: 4px;
-}
-
-.delta {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  font-weight: 700;
-  padding: 2px 8px;
-  border-radius: var(--r-pill);
-  letter-spacing: 0;
-}
-
-.delta.up {
-  background: var(--st-delivered-bg);
-  color: var(--st-delivered-fg);
-}
-
-.delta.down {
-  background: var(--st-cancelled-bg);
-  color: var(--st-cancelled-fg);
-}
-
 /* Lower-half dashboard grid (recent activity / pipeline / top lists). */
 
 .dash-grid {
@@ -2953,40 +2855,7 @@
   background: var(--paper);
 }
 
-/* Form grid — 12 cols, collapses to single col under 720px. */
-.ef-form-grid {
-  display: grid;
-  gap: var(--s-3);
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-}
-
-.ef-form-grid > .col-2 {
-  grid-column: span 2;
-}
-.ef-form-grid > .col-3 {
-  grid-column: span 3;
-}
-.ef-form-grid > .col-4 {
-  grid-column: span 4;
-}
-.ef-form-grid > .col-6 {
-  grid-column: span 6;
-}
-.ef-form-grid > .col-8 {
-  grid-column: span 8;
-}
-.ef-form-grid > .col-9 {
-  grid-column: span 9;
-}
-.ef-form-grid > .col-12 {
-  grid-column: span 12;
-}
-
-@media (max-width: 767px) {
-  .ef-form-grid > [class*='col-'] {
-    grid-column: span 12;
-  }
-}
+/* The 12-column form grid lives with `.form-grid` above. */
 
 /* Field row inside a form grid. */
 .ef-field {
@@ -3214,6 +3083,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 8px;
 }
 
 .kpi-value {
@@ -3227,6 +3097,7 @@
   letter-spacing: -0.04em;
   font-feature-settings: 'tnum';
   font-variant-numeric: tabular-nums;
+  color: var(--text);
 }
 
 .kpi-value .unit {
@@ -3242,13 +3113,18 @@
   font-family: var(--font-mono);
   font-size: 11px;
   font-weight: 600;
+  padding: 2px 8px;
+  border-radius: var(--r-pill);
+  letter-spacing: 0;
 }
 
 .delta.up {
   color: var(--st-delivered-fg);
+  background: var(--st-delivered-bg);
 }
 .delta.down {
   color: var(--st-cancelled-fg);
+  background: var(--st-cancelled-bg);
 }
 .delta.flat {
   color: var(--text-mute);
@@ -3259,6 +3135,7 @@
   opacity: 0.9;
   display: block;
   width: 100%;
+  margin-top: 4px;
 }
 
 .kpi-grid {
@@ -4616,4 +4493,46 @@ input.ef-input[type='number'] {
     inline-size: var(--hit-touch);
     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 {
+    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
+   published as a token rather than copied as a magic number: the order
+   builder's totals pill sat at bottom: 20px and covered the
+   Administration tab, taking a primary navigation destination with it.
+   0px above the breakpoint, where no tab bar is rendered. */
+:root {
+  --app-bottom-bar: 0px;
+}
+
+@media (max-width: 767px) {
+  :root {
+    --app-bottom-bar: 64px;
+  }
 }

package/types/elasticias-ui.d.ts

@@ -1,12 +1,12 @@
 import * as _angular_core from '@angular/core';
 import { PipeTransform, OnInit, OnChanges, TemplateRef, EventEmitter, AfterContentInit, OnDestroy, SimpleChanges, InjectionToken, AfterViewInit } from '@angular/core';
+import * as _elasticias_screens from '@elasticias/screens';
+import { EfDataCardColumn, ScreenContext, EfDetailToolbarAction, EfSearchToolbarAction, EfDataCardSort, EfDataCardExportRequest, EfDateRange, EfDatePresetKey } from '@elasticias/screens';
+export { EfDataCardColumn, EfDataCardColumnAlign, EfDataCardColumnMobileRole, EfDataCardColumnType, EfDataCardSort, EfDataCardSortDirection, EfDatePresetKey, EfDateRange, EfDetailToolbarAction, EfSearchToolbarAction } from '@elasticias/screens';
 import { Menu } from 'primeng/menu';
 import * as _elasticias_core from '@elasticias/core';
 import { EfBuildPackage, EfModule, EfNavSection, EfNavItem, EfModuleId, EfToast, EfToastAction, EfThemeConfigService } from '@elasticias/core';
 import * as i1 from 'primeng/tooltip';
-import * as _elasticias_screens from '@elasticias/screens';
-import { ScreenContext, EfDetailToolbarAction, EfSearchToolbarAction, EfDataCardColumn, EfDataCardSort, EfDataCardExportRequest, EfDateRange, EfDatePresetKey } from '@elasticias/screens';
-export { EfDataCardColumn, EfDataCardColumnAlign, EfDataCardColumnMobileRole, EfDataCardColumnType, EfDataCardSort, EfDataCardSortDirection, EfDatePresetKey, EfDateRange, EfDetailToolbarAction, EfSearchToolbarAction } from '@elasticias/screens';
 import { BlockableUI } from 'primeng/api';
 import { SafeResourceUrl } from '@angular/platform-browser';
 import { ChartConfiguration } from 'chart.js';
@@ -435,8 +435,18 @@ declare class EfOrderBuilderComponent implements OnInit {
         id: OrderLineItem["id"];
         field: EditableLineField;
     }>;
-    /** Number of table columns, used for the empty-state colspan. */
-    colCount: _angular_core.Signal<number>;
+    /**
+     * Columns for the lines table.
+     *
+     * Only the article column is elastic: it carries no width and so absorbs
+     * whatever the fixed columns leave. Every other column holds a number whose
+     * magnitude is known in advance, so a fixed track keeps the decimal points
+     * aligned down the table instead of letting the longest product description
+     * shift them. The `mobile` roles decide what `ef-data-card` shows on a
+     * phone before the row is expanded, which is why the article leads and the
+     * subtotal reads as the row's status.
+     */
+    readonly lineColumns: _angular_core.Signal<EfDataCardColumn[]>;
     isEditingCell(item: OrderLineItem, field: EditableLineField): boolean;
     startEditCell(item: OrderLineItem, field: EditableLineField): void;
     stopEditCell(): void;
@@ -448,6 +458,17 @@ declare class EfOrderBuilderComponent implements OnInit {
     recapColumns: _angular_core.Signal<OrderSummaryItem[][]>;
     constructor();
     ngOnInit(): void;
+    /**
+     * Move a line to a new position.
+     *
+     * The order of an order's lines is data the operator owns — it is the order
+     * the picker walks the shelves in and the order the printed document reads
+     * in — so it is reordered by hand rather than derived from a sort.
+     */
+    reorderLine(ev: {
+        from: number;
+        to: number;
+    }): void;
     removeOrderLine(id: string | number | undefined): void;
     onFieldChange(item: OrderLineItem): void;
     calculateSubtotal(item: OrderLineItem): number;
@@ -2460,8 +2481,10 @@ declare class EfCardComponent {
 }
 
 /**
- * 12-column form-grid primitive. Children use `.col-2/3/4/6/8/9/12`
- * to claim spans; on viewports < 720px every span collapses to 12.
+ * 12-column form-grid primitive. Children use `.col-1` through
+ * `.col-12` to claim spans; at 767px and below (the shell's own
+ * mobile breakpoint) every span collapses to the full 12, so a
+ * field never carries a per-breakpoint span of its own.
  *
  * ```html
  * <ef-form-grid>
@@ -4496,6 +4519,40 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
     numberFormat(col: EfDataCardColumn): string;
     /** Which tools panel is open, if any. */
     readonly openTool: _angular_core.WritableSignal<"density" | "columns">;
+    /**
+     * Density this table starts at.
+     *
+     * A viewer's own choice, restored from storage via `tableKey`, still wins;
+     * this only moves the starting point for a table whose rows are meant to be
+     * scanned in bulk (an order's lines, say) rather than read one at a time.
+     */
+    readonly defaultDensity: _angular_core.InputSignal<EfTableDensity>;
+    /**
+     * Let the viewer drag rows into a new order. Off by default: reordering
+     * only means something where the row order is itself data the user owns
+     * (an order's lines), not on a list whose order comes from a sort.
+     *
+     * Adds a leading handle column; the row is only draggable by that handle,
+     * so selecting text in a cell still works.
+     */
+    readonly reorderable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The moved row's original and new index, once the drag settles. */
+    readonly rowReorder: _angular_core.OutputEmitterRef<{
+        from: number;
+        to: number;
+    }>;
+    /** Index being dragged, and the index it would land on. */
+    readonly dragFrom: _angular_core.WritableSignal<number>;
+    readonly dragTo: _angular_core.WritableSignal<number>;
+    onDragPointerDown(index: number, ev: PointerEvent): void;
+    onDragPointerMove(ev: PointerEvent): void;
+    onDragPointerUp(): void;
+    /**
+     * Keyboard equivalent of the drag. A handle that only answers to a pointer
+     * puts the row order out of reach of anyone not using a mouse, so the same
+     * move is on the arrow keys while the handle has focus.
+     */
+    onDragKeydown(index: number, ev: KeyboardEvent): void;
     /** Row density. Applied as a class on `.tbl-wrap`. */
     readonly density: _angular_core.WritableSignal<EfTableDensity>;
     /** Column ids the viewer has hidden. */
@@ -4568,7 +4625,7 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
     trackByRow: (_: number, row: TRow) => unknown;
     trackByColumn: (_: number, col: EfDataCardColumn) => string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfDataCardComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfDataCardComponent<any>, "ef-data-card", never, { "mobileLayout": { "alias": "mobileLayout"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "trackByField": { "alias": "trackByField"; "required": false; "isSignal": true; }; "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; }; "hidePager": { "alias": "hidePager"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "errorMsg"; "required": false; "isSignal": true; }; "loadingKey": { "alias": "loadingKey"; "required": false; "isSignal": true; }; "rowDoubleClickable": { "alias": "rowDoubleClickable"; "required": false; "isSignal": true; }; "hasActionsColumn": { "alias": "hasActionsColumn"; "required": false; "isSignal": true; }; "rowActionsContext": { "alias": "rowActionsContext"; "required": false; "isSignal": true; }; "showViewAction": { "alias": "showViewAction"; "required": false; "isSignal": true; }; "showEditAction": { "alias": "showEditAction"; "required": false; "isSignal": true; }; "showDuplicateAction": { "alias": "showDuplicateAction"; "required": false; "isSignal": true; }; "showDeleteAction": { "alias": "showDeleteAction"; "required": false; "isSignal": true; }; "showDensityControl": { "alias": "showDensityControl"; "required": false; "isSignal": true; }; "showColumnPicker": { "alias": "showColumnPicker"; "required": false; "isSignal": true; }; "showExportControl": { "alias": "showExportControl"; "required": false; "isSignal": true; }; "exporting": { "alias": "exporting"; "required": false; "isSignal": true; }; "screenContext": { "alias": "screenContext"; "required": false; "isSignal": true; }; "searchTerm": { "alias": "searchTerm"; "required": false; "isSignal": true; }; "tableKey": { "alias": "tableKey"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "sortChange": "sortChange"; "rowDoubleClick": "rowDoubleClick"; "rowAction": "rowAction"; "exportRequest": "exportRequest"; "clearSearch": "clearSearch"; }, ["bodyTemplates", "headerTemplates"], ["[tbl-head-info]", "[tbl-head-actions]", "[empty-state-mobile]", "[empty-state]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfDataCardComponent<any>, "ef-data-card", never, { "mobileLayout": { "alias": "mobileLayout"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "trackByField": { "alias": "trackByField"; "required": false; "isSignal": true; }; "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; }; "hidePager": { "alias": "hidePager"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "errorMsg"; "required": false; "isSignal": true; }; "loadingKey": { "alias": "loadingKey"; "required": false; "isSignal": true; }; "rowDoubleClickable": { "alias": "rowDoubleClickable"; "required": false; "isSignal": true; }; "hasActionsColumn": { "alias": "hasActionsColumn"; "required": false; "isSignal": true; }; "rowActionsContext": { "alias": "rowActionsContext"; "required": false; "isSignal": true; }; "showViewAction": { "alias": "showViewAction"; "required": false; "isSignal": true; }; "showEditAction": { "alias": "showEditAction"; "required": false; "isSignal": true; }; "showDuplicateAction": { "alias": "showDuplicateAction"; "required": false; "isSignal": true; }; "showDeleteAction": { "alias": "showDeleteAction"; "required": false; "isSignal": true; }; "showDensityControl": { "alias": "showDensityControl"; "required": false; "isSignal": true; }; "showColumnPicker": { "alias": "showColumnPicker"; "required": false; "isSignal": true; }; "showExportControl": { "alias": "showExportControl"; "required": false; "isSignal": true; }; "exporting": { "alias": "exporting"; "required": false; "isSignal": true; }; "screenContext": { "alias": "screenContext"; "required": false; "isSignal": true; }; "searchTerm": { "alias": "searchTerm"; "required": false; "isSignal": true; }; "tableKey": { "alias": "tableKey"; "required": false; "isSignal": true; }; "defaultDensity": { "alias": "defaultDensity"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "sortChange": "sortChange"; "rowDoubleClick": "rowDoubleClick"; "rowAction": "rowAction"; "exportRequest": "exportRequest"; "clearSearch": "clearSearch"; "rowReorder": "rowReorder"; }, ["bodyTemplates", "headerTemplates"], ["[tbl-head-info]", "[tbl-head-actions]", "[empty-state-mobile]", "[empty-state]"], true, never>;
 }
 
 /**
@@ -4611,6 +4668,42 @@ declare class EfColumnHeaderTemplateDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<EfColumnHeaderTemplateDirective, "[efColumnHeaderTemplate]", never, { "columnId": { "alias": "efColumnHeaderTemplate"; "required": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Feeds a cell's full text to the `ef-tooltip` sitting on the same element,
+ * but only when that text is actually clipped.
+ *
+ * A column wide enough for the longest product description would starve every
+ * other column, so the description ellipsises. The operator is then left with
+ * a row they cannot read and nothing telling them the rest exists. This gives
+ * it back on hover, through the same comptoir-skinned tooltip the rest of the
+ * product uses rather than the browser's unstyled `title` bubble.
+ *
+ * The directive is always attached; what varies is whether it has anything to
+ * say. A cell whose text fits gets its tooltip disabled, so hovering a number
+ * that is fully visible does not pop a bubble repeating it.
+ *
+ * Measuring happens on `mouseenter`/`focusin` rather than from a ResizeObserver
+ * per cell: a 150-line table is a thousand observers for information nobody
+ * needs until a pointer is over one of them, and the tooltip's own show delay
+ * leaves ample time to measure.
+ *
+ * Truncation can happen on the cell or on an element inside it (the order
+ * builder ellipsises an inner `.nm` span, not the `td`), so both are checked.
+ */
+declare class EfOverflowTooltipDirective {
+    private readonly host;
+    /** Provided by the `efTooltip` host directive on the same element. */
+    private readonly tooltip;
+    /** 1px of slack: sub-pixel layout rounding otherwise reads as clipped. */
+    private static readonly SLACK;
+    protected sync(): void;
+    /** The cell itself, or the first descendant whose text is cut off. */
+    private findClipped;
+    private isClipped;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfOverflowTooltipDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<EfOverflowTooltipDirective, "[efOverflowTooltip]", never, {}, {}, never, never, true, never>;
+}
+
 /**
  * Row-actions dropdown — V2 successor to `ef-datatable-actionbar`.
  *
@@ -5677,5 +5770,5 @@ declare class EfEmailMetricsCardComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfEmailMetricsCardComponent, "ef-email-metrics-card", never, { "metrics": { "alias": "metrics"; "required": false; "isSignal": true; }; "recentEvents": { "alias": "recentEvents"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, { "rangeChange": "rangeChange"; }, never, never, true, never>;
 }
 
-export { EF_BADGE_BG_COLORS, EF_BADGE_BG_LIGHT_COLORS, EF_BADGE_BORDER_COLORS, EF_BADGE_DEFAULTS, EF_BADGE_TEXT_COLORS, EF_CHART_PALETTE, EF_DATATABLE_ACTIONS_DEFAULTS, EF_DATATABLE_COLUMN_DEFAULTS, EF_DATATABLE_DEFAULTS, EF_DATA_CARD_MOBILE_LAYOUT, EF_STATUS_COLORS, EF_STATUS_COLOR_ALIASES, EfAboutDialogComponent, EfActivationFilterComponent, EfAppMainComponent, EfAppShellComponent, EfAppShellMobileComponent, EfAppTopComponent, EfBadgeComponent, EfBlockUiComponent, EfBlockableDivComponent, EfBottomSheetComponent, EfBuildStampComponent, EfBulkBarComponent, EfButtonComponent, EfButtonGroupComponent, EfCardComponent, EfChangeHistoryComponent, EfChangePasswordComponent, EfChartComponent, EfCheckboxComponent, EfClearButtonComponent, EfColumnHeaderTemplateDirective, EfColumnTemplateDirective, EfCompactPipe, EfConfirmDialogComponent, EfCurrencyPipe, EfDataCardComponent, EfDatatableActionBarComponent, EfDatatableComponent, EfDatepickerAdvancedComponent, EfDatepickerComponent, EfDetailToolbarComponent, EfDialogComponent, EfEmailMetricsCardComponent, EfEmptyStateComponent, EfFabComponent, EfFieldsetComponent, EfFilterDrawerComponent, EfFilterPillComponent, EfFormGridComponent, EfInputNumberComponent, EfInputTextComponent, EfKpiCardComponent, EfLabelComponent, EfModuleRailComponent, EfModuleSideComponent, EfMultiSelectComponent, EfOrderBuilderComponent, EfOrderSummaryComponent, EfPagerComponent, EfPasswordComponent, EfPdfPreviewComponent, EfPillGroupComponent, EfPresetPillComponent, EfPriceDisplayComponent, EfProductCatalogueComponent, EfProductCatalogueFilterComponent, EfProductTypeaheadComponent, EfProfileChipComponent, EfProfileMenuComponent, EfPulseComponent, EfQuantitySelectorComponent, EfQuantityStepperComponent, EfRankListComponent, EfRowActionsComponent, EfSearchToolbarComponent, EfSelectButtonComponent, EfSelectComponent, EfServerErrorsDirective, EfShortcutsDialogComponent, EfSkeletonComponent, EfSmartBarComponent, EfStatsComponent, EfStatusChipComponent, EfTabPanelDirective, EfTabsComponent, EfTextareaComponent, EfThemeConfiguratorComponent, EfThemeToggleComponent, EfTimelineComponent, EfToastRegionComponent, EfToggleSwitchComponent, EfToolbarComponent, EfTooltipDirective, EfTotalsComponent, OrderEntityHelper, OrderLineItemHelper, TruncatePipe, buildChartConfig, getColumnAlignment, mergeColumnDefaults, resolveEfStatusColor };
+export { EF_BADGE_BG_COLORS, EF_BADGE_BG_LIGHT_COLORS, EF_BADGE_BORDER_COLORS, EF_BADGE_DEFAULTS, EF_BADGE_TEXT_COLORS, EF_CHART_PALETTE, EF_DATATABLE_ACTIONS_DEFAULTS, EF_DATATABLE_COLUMN_DEFAULTS, EF_DATATABLE_DEFAULTS, EF_DATA_CARD_MOBILE_LAYOUT, EF_STATUS_COLORS, EF_STATUS_COLOR_ALIASES, EfAboutDialogComponent, EfActivationFilterComponent, EfAppMainComponent, EfAppShellComponent, EfAppShellMobileComponent, EfAppTopComponent, EfBadgeComponent, EfBlockUiComponent, EfBlockableDivComponent, EfBottomSheetComponent, EfBuildStampComponent, EfBulkBarComponent, EfButtonComponent, EfButtonGroupComponent, EfCardComponent, EfChangeHistoryComponent, EfChangePasswordComponent, EfChartComponent, EfCheckboxComponent, EfClearButtonComponent, EfColumnHeaderTemplateDirective, EfColumnTemplateDirective, EfCompactPipe, EfConfirmDialogComponent, EfCurrencyPipe, EfDataCardComponent, EfDatatableActionBarComponent, EfDatatableComponent, EfDatepickerAdvancedComponent, EfDatepickerComponent, EfDetailToolbarComponent, EfDialogComponent, EfEmailMetricsCardComponent, EfEmptyStateComponent, EfFabComponent, EfFieldsetComponent, EfFilterDrawerComponent, EfFilterPillComponent, EfFormGridComponent, EfInputNumberComponent, EfInputTextComponent, EfKpiCardComponent, EfLabelComponent, EfModuleRailComponent, EfModuleSideComponent, EfMultiSelectComponent, EfOrderBuilderComponent, EfOrderSummaryComponent, EfOverflowTooltipDirective, EfPagerComponent, EfPasswordComponent, EfPdfPreviewComponent, EfPillGroupComponent, EfPresetPillComponent, EfPriceDisplayComponent, EfProductCatalogueComponent, EfProductCatalogueFilterComponent, EfProductTypeaheadComponent, EfProfileChipComponent, EfProfileMenuComponent, EfPulseComponent, EfQuantitySelectorComponent, EfQuantityStepperComponent, EfRankListComponent, EfRowActionsComponent, EfSearchToolbarComponent, EfSelectButtonComponent, EfSelectComponent, EfServerErrorsDirective, EfShortcutsDialogComponent, EfSkeletonComponent, EfSmartBarComponent, EfStatsComponent, EfStatusChipComponent, EfTabPanelDirective, EfTabsComponent, EfTextareaComponent, EfThemeConfiguratorComponent, EfThemeToggleComponent, EfTimelineComponent, EfToastRegionComponent, EfToggleSwitchComponent, EfToolbarComponent, EfTooltipDirective, EfTotalsComponent, OrderEntityHelper, OrderLineItemHelper, TruncatePipe, buildChartConfig, getColumnAlignment, mergeColumnDefaults, resolveEfStatusColor };
 export type { CatalogueProduct, CatalogueProductVariant, CategoryAssignment, CategoryGroup, CategoryItem, DatatableSearchEntity, DocumentConfig, EfAboutServer, EfBadgeColor, EfBadgeConfig, EfBadgeSize, EfBadgeVariant, EfButtonComptoirSeverity, EfButtonPrimeNGSeverity, EfButtonSeverity, EfChangeHistoryEntry, EfChangeHistoryFieldChange, EfChangePasswordSubmit, EfChartSeries, EfChartType, EfDataCardMobileLayout, EfDataCardRowAction, EfDatatableActions, EfDatatableColumn, EfDatatableColumnAlign, EfDatatableColumnType, EfDatatableConfig, EfDateFieldValue, EfDatePreset, EfDialogAction, EfDialogSeverity, EfDialogSize, EfFabPosition, EfKpiDeltaTone, EfKpiSparkline, EfPillItem, EfPresetItem, EfProfileMenuItem, EfRankRow, EfRowAction, EfSkeletonVariant, EfStatsRow, EfStatusColor, EfStatusReferenceItem, EfTabItem, EfTabsModule, EfTabsVariant, EfTimelineItem, EfTimelineState, EfToastRegionPosition, EfTotalsGrand, EfTotalsRow, HighlightSegment, OrderChangeInfo, OrderEntity, OrderLineItem, OrderProductsSummary, OrderSummaryItem, ProductCountGroup, ProductCountGroupLabel, ProductTypeaheadRow, ProductTypeaheadSelection, ProductWithCountGroup, SelectedFilter, ValidationResult };