@elasticias/ui 1.0.15 → 1.0.17

package/types/elasticias-ui.d.ts

@@ -5,7 +5,7 @@ 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, 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';
@@ -1764,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. */
@@ -3906,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;
@@ -4354,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
@@ -4370,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;
@@ -4422,6 +4494,29 @@ 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 what it needs to write the file: the columns
+     * the viewer can actually see, in the order they see them, plus a
+     * resolver for their values. `select` and `actions` are chrome, never
+     * data, so they are dropped.
+     *
+     * The on-screen rows are deliberately not sent. They were, as a
+     * "fallback for hosts that do not fetch", and no host ever read them
+     * — a published contract carrying a field nobody consumes is a
+     * promise to keep supporting it.
+     */
+    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;
@@ -4440,11 +4535,24 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
     /** Fires `rowDoubleClick` unless the dblclick originated on an
      *  interactive child (checkbox, button, link, form control). */
     onRowDoubleClick(row: TRow, event: MouseEvent): void;
+    /**
+     * `aria-sort` for the header cell: the only thing that tells a screen
+     * reader which column is ordered and which way. The arrow glyph is
+     * decorative and marked aria-hidden, so without this the sort state
+     * was invisible to assistive technology.
+     */
+    ariaSort(col: EfDataCardColumn): 'ascending' | 'descending' | 'none' | null;
+    /**
+     * Open a row from the keyboard. Desktop opening is a double-click,
+     * which no keyboard can produce, so Enter on a focused row was the
+     * only missing half of the interaction.
+     */
+    onRowKeydown(row: TRow, event: Event): void;
     onHeaderClick(col: EfDataCardColumn): void;
     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>;
 }
 
 /**
@@ -4755,6 +4863,7 @@ declare class EfEmptyStateComponent {
  */
 declare class EfSmartBarComponent {
     private readonly shortcuts;
+    private readonly translate;
     /** Distinguishes this instance's registration from any other
      *  ef-smart-bar on screen, the same convention ef-row-actions uses. */
     private static nextInstanceId;
@@ -4775,6 +4884,13 @@ declare class EfSmartBarComponent {
      *  (a screen with two smart bars registers the binding on only one
      *  of them). Defaults to `'mod+k'`. */
     readonly shortcut: _angular_core.InputSignal<string>;
+    /**
+     * Accessible name for the search field: the placeholder text, which
+     * already says what this box searches ("Search by order N, customer,
+     * product, employee"). Falls back to a generic label when a screen
+     * supplies no placeholder.
+     */
+    protected readonly accessibleLabel: _angular_core.Signal<any>;
     protected readonly kbdLabel: _angular_core.Signal<string>;
     readonly search: _angular_core.OutputEmitterRef<string>;
     readonly clear: _angular_core.OutputEmitterRef<void>;