@elasticias/ui 1.0.14 → 1.0.16

package/package.json

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

package/types/elasticias-ui.d.ts

@@ -2,10 +2,10 @@ import * as _angular_core from '@angular/core';
 import { PipeTransform, OnInit, OnChanges, TemplateRef, EventEmitter, AfterContentInit, OnDestroy, SimpleChanges, InjectionToken, AfterViewInit } from '@angular/core';
 import { Menu } from 'primeng/menu';
 import * as _elasticias_core from '@elasticias/core';
-import { EfBuildPackage, EfShortcutGroup, EfModule, EfNavSection, EfNavItem, EfModuleId, EfToast, EfToastAction, EfThemeConfigService } 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, EfDateRange, EfDatePresetKey } 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';
@@ -1079,6 +1079,24 @@ declare class EfTooltipDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<EfTooltipDirective, "[efTooltip]", never, {}, {}, never, never, true, [{ directive: typeof i1.Tooltip; inputs: { "pTooltip": "efTooltip"; "tooltipPosition": "efTooltipPosition"; "tooltipDisabled": "efTooltipDisabled"; "tooltipStyleClass": "efTooltipStyleClass"; "tooltipEvent": "efTooltipEvent"; "showDelay": "efTooltipShowDelay"; "hideDelay": "efTooltipHideDelay"; "appendTo": "efTooltipAppendTo"; "autoHide": "efTooltipAutoHide"; "escape": "efTooltipEscape"; "life": "efTooltipLife"; }; outputs: {}; }]>;
 }
 
+/**
+ * The three tiers a shortcut can belong to, outer to inner: a Global
+ * shortcut works anywhere in the app, a Screen shortcut works anywhere on
+ * the current screen, a Row shortcut only while a row's menu is open.
+ * `list()` returns groups in registration order, which is really "whatever
+ * happened to construct first." This fixes the section order so it
+ * always reads outer to inner regardless of what rendered when.
+ */
+/** One action and every key bound to it, which is what a reader wants: the
+ *  action once, its bindings beside it. */
+interface ShortcutActionView {
+    labelKey: string;
+    keys: string[];
+}
+interface ShortcutGroupView {
+    group: string;
+    actions: ShortcutActionView[];
+}
 /**
  * The keyboard-shortcuts reference: every registration currently sitting
  * in `EfShortcutService`, grouped and rendered with the same `.kbd` chip
@@ -1098,14 +1116,16 @@ declare class EfShortcutsDialogComponent {
     private readonly shortcutService;
     /** Two-way open state. */
     readonly visible: _angular_core.ModelSignal<boolean>;
-    /** `list()`, reordered Global → Screen → Row. An unrecognised group
-     *  (a future tier this component doesn't know about yet) sorts last
-     *  rather than being dropped. */
-    protected readonly groups: _angular_core.Signal<EfShortcutGroup[]>;
-    /** Only macOS shows every chip already resolved to its own glyphs.
-     *  Everyone else gets a line saying the chips already match their
-     *  system, since nothing here prints a Mac glyph for them to decode. */
-    protected readonly isMacPlatform: boolean;
+    /** `list()`, reordered Global → Screen → Row, with the bindings for one
+     *  action collapsed onto a single row.
+     *
+     *  An action can be reachable by more than one key: opening this dialog
+     *  answers to both `?` and `mod+/`. Listing registrations verbatim
+     *  printed that action's name twice, once per binding, which reads as a
+     *  duplicate rather than as a choice. An unrecognised group (a future
+     *  tier this component does not know about) sorts last rather than
+     *  being dropped. */
+    protected readonly groups: _angular_core.Signal<ShortcutGroupView[]>;
     protected readonly closeAction: EfDialogAction[];
     protected formatKeys(keys: string): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfShortcutsDialogComponent, never>;
@@ -1744,41 +1764,67 @@ declare class EfFabComponent {
 }
 
 interface EfPillItem<T = string> {
+    /** Value emitted when the pill is picked. */
     value: T;
-    /** Direct label (no translation). */
-    label?: string;
-    /** Translation key — takes priority over label. */
-    labelKey?: string;
+    /**
+     * Translation key for the pill's label. Required, like every other
+     * `ef-*` control: the component translates, the caller never does.
+     *
+     * A value that is not a known key falls through to itself, which is
+     * what lets a label already resolved from reference data (a seeded
+     * status name, say) render correctly until that data carries keys of
+     * its own.
+     */
+    labelKey: string;
     /** Optional count rendered after a thin separator. */
     count?: number;
 }
 /**
- * Segmented pill filter. Used for tab-like selectors over a small
- * set of options — "Toutes · 87 / À approuver · 14 / En retard · 3".
+ * Segmented pill filter — "Toutes · 87 / À approuver · 14 / En retard · 3".
  *
  * ```html
  * <ef-pill-group
- *   [items]="filters"
- *   [(value)]="activeFilter"
- *   (valueChange)="onFilterChange($event)"
+ *   [items]="statusBuckets()"
+ *   [(value)]="statusFilter"
+ *   ariaLabelKey="sales_orders_status_aria"
  * />
  * ```
  *
- * The active pill picks up a contrast fill (`--ink-active`); inactive
- * pills sit on transparent ground with muted text. Heights map to
- * `--hit` (32px) so it stacks naturally next to compact action buttons.
+ * The active pill takes a contrast fill (`--ink-active`); inactive pills
+ * sit on transparent ground with muted text.
+ *
+ * **It scrolls rather than clipping.** Nine status filters with French
+ * labels are roughly 676px wide, and the hand-rolled `.pill-group` this
+ * replaces was `inline-flex` with no wrap and no scroller — so on a
+ * 390px phone the last five filters could not be reached at all. The row
+ * now scrolls inside itself, fades at whichever edge has more content,
+ * and keeps the selected pill in view. Pills never squeeze: a pill
+ * radius on a box that has wrapped to two lines is not a pill.
  */
 declare class EfPillGroupComponent<T = string> {
-    items: ReadonlyArray<EfPillItem<T>>;
-    value: T | null;
-    ariaLabel: string;
+    readonly items: _angular_core.InputSignal<readonly EfPillItem<T>[]>;
+    /** Two-way bound selection. */
+    readonly value: _angular_core.ModelSignal<T>;
+    /** Translation key for the group's accessible name. */
+    readonly ariaLabelKey: _angular_core.InputSignal<string>;
     /** Hide counts even when items provide them. */
-    hideCounts: boolean;
-    readonly valueChange: EventEmitter<T>;
-    select(item: EfPillItem<T>): void;
-    trackValue(_: number, item: EfPillItem<T>): T;
+    readonly hideCounts: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly scroller;
+    /** Whether content is hidden past each edge, which drives the fades. */
+    private readonly overflowStart;
+    private readonly overflowEnd;
+    protected readonly fadeClass: _angular_core.Signal<{
+        'has-fade-start': boolean;
+        'has-fade-end': boolean;
+    }>;
+    constructor();
+    protected select(item: EfPillItem<T>): void;
+    protected onScroll(): void;
+    protected trackValue: (_: number, item: EfPillItem<T>) => T;
+    private measure;
+    private scrollActiveIntoView;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfPillGroupComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfPillGroupComponent<any>, "ef-pill-group", never, { "items": { "alias": "items"; "required": true; }; "value": { "alias": "value"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "hideCounts": { "alias": "hideCounts"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfPillGroupComponent<any>, "ef-pill-group", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabelKey": { "alias": "ariaLabelKey"; "required": false; "isSignal": true; }; "hideCounts": { "alias": "hideCounts"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 /** Visual treatment of the tabset. `'pill'` is the default. */
@@ -3886,7 +3932,13 @@ interface EfDatatableConfig {
     styleClass?: string;
     /** Inline table styles */
     tableStyle?: Record<string, string>;
-    /** Message when no data (default: 'Aucune entree trouvee') */
+    /**
+     * Translation key for the no-data message. Prefer this over
+     * `emptyMessage`: the old default was a hardcoded, unaccented French
+     * string that rendered in every language.
+     */
+    emptyMessageKey?: string;
+    /** @deprecated Untranslatable. Use `emptyMessageKey`. */
     emptyMessage?: string;
     /** Pagination report template */
     currentPageReportTemplate?: string;
@@ -4334,6 +4386,39 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
     readonly showDensityControl: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Render the Columns picker in the head row. */
     readonly showColumnPicker: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Render the Export control beside Density and Columns. It sits here
+     * rather than in the page toolbar because it acts on the result set,
+     * the way density and the column picker do -- the toolbar is for
+     * page-level actions like creating a record.
+     */
+    readonly showExportControl: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * True while the host is assembling the file. A full export pages the
+     * server and can run for seconds, so the control has to say it is
+     * working rather than look idle and ignore further clicks.
+     */
+    readonly exporting: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Screen context used to gate Export. Falls back to
+     * `rowActionsContext`, which every list screen already supplies, so
+     * moving Export out of `ef-search-toolbar` does not quietly drop the
+     * permission check that lived there.
+     */
+    readonly screenContext: _angular_core.InputSignal<ScreenContext>;
+    /**
+     * Mirrors `ef-search-toolbar`'s rule exactly: hidden unless asked for,
+     * and with a context present it obeys `hasExportPermission`. No
+     * context means no permission model is in play, so it renders.
+     */
+    readonly canExport: _angular_core.Signal<boolean>;
+    /**
+     * The active free-text query, used only to word the empty state. When
+     * this is set, zero rows means "nothing matched what you typed" and the
+     * user is offered a way back; when it is empty, zero rows means the
+     * collection itself is empty, which is a different message.
+     */
+    readonly searchTerm: _angular_core.InputSignal<string>;
     /**
      * Stable key used to remember density and hidden columns for this
      * table. Preferences are a per-viewer convenience, so they live in
@@ -4350,6 +4435,13 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
         action: EfDataCardRowAction;
         row: TRow;
     }>;
+    /**
+     * Export the current result set. The card holds the columns but not the
+     * query, so the host screen fetches the rows and writes the file.
+     */
+    readonly exportRequest: _angular_core.OutputEmitterRef<EfDataCardExportRequest>;
+    /** Raised by the empty state's "clear search" action. */
+    readonly clearSearch: _angular_core.OutputEmitterRef<void>;
     private readonly bodyTemplates;
     private readonly headerTemplates;
     private readonly bodyTemplateMap;
@@ -4402,6 +4494,24 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
      *  the bulk bar and the per-row menu with no way back. */
     readonly hideableColumns: _angular_core.Signal<EfDataCardColumn[]>;
     toggleTool(tool: 'density' | 'columns'): void;
+    /**
+     * Hand the host screen everything it needs to write the file: the
+     * columns the viewer can actually see, in the order they see them, and
+     * the rows already on screen as a fallback for hosts that do not fetch.
+     * `select` and `actions` are chrome, never data, so they are dropped.
+     */
+    requestExport(): void;
+    /**
+     * Cell value as it belongs in a file rather than on screen.
+     *
+     * Numbers and dates stay raw, because a spreadsheet wants a number it
+     * can total and a date it can sort. Reference and status columns do
+     * not: their stored value is an id or a code, and a column of
+     * `71d4431cd16141338ffcf635` tells the reader nothing. Those resolve
+     * through the same lookup the table renders with, so the file says
+     * what the screen said.
+     */
+    private exportCellValue;
     setDensity(value: EfTableDensity): void;
     isColumnHidden(id: string): boolean;
     toggleColumn(id: string): void;
@@ -4424,7 +4534,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; }; "tableKey": { "alias": "tableKey"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "sortChange": "sortChange"; "rowDoubleClick": "rowDoubleClick"; "rowAction": "rowAction"; }, ["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; }; }, { "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>;
 }
 
 /**