@elasticias/ui 1.0.27 → 1.0.29

package/package.json

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

package/types/elasticias-ui.d.ts

@@ -4407,6 +4407,15 @@ type EfTableDensity = 'compact' | 'default' | 'comfortable';
  * 2. **`tbl-head-info` / `tbl-head-actions` slots**: still projected
  *    so the consumer can render the count text + density / columns /
  *    view-toggle buttons next to the table header.
+ * 3. **`[loading]` is not optional.** Bind the screen's own loading
+ *    signal: without it the card can't tell "still fetching" from
+ *    "nothing to fetch" and greets a waiting user with the empty
+ *    state. While loading with no rows yet it shimmers `ef-skeleton`
+ *    rows (table and mobile list alike) and flags `aria-busy`.
+ * 4. **Bind `(retry)` wherever you bind `[errorMsg]`.** An empty result
+ *    set that came from a failed request renders the error state, not
+ *    the empty one, and its "try again" button is the way out. The card
+ *    doesn't know the query, so the screen re-runs it.
  *
  * ```html
  * <ef-data-card
@@ -4499,10 +4508,48 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
     readonly hidePager: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Currently active sort. Header click toggles asc / desc. */
     readonly sort: _angular_core.InputSignal<EfDataCardSort>;
+    /**
+     * First load and every refresh. While true with no rows yet, the body
+     * shimmers `ef-skeleton` placeholders instead of the empty state — a
+     * list that is still loading must never say "nothing here yet". A
+     * refresh that already has rows (paging, sorting, filtering) keeps
+     * them on screen rather than blanking the table; either way the row
+     * container is flagged `aria-busy`, as `ef-card` does.
+     */
     readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Empty string = no error. Non-empty triggers an error chip in tbl-head. */
+    /**
+     * Empty string = no error. Non-empty triggers the error chip in
+     * `tbl-head` and, when the request came back with nothing, the error
+     * state in the body.
+     *
+     * It is the *trigger*, not the copy: screens set it from
+     * `err?.message`, which is whatever the HTTP layer threw. The body
+     * state words itself from translated keys instead, so a failed list
+     * never shows an operator a status line or an exception string.
+     */
     readonly errorMsg: _angular_core.InputSignal<string>;
     readonly loadingKey: _angular_core.InputSignal<string>;
+    /**
+     * Placeholder rows drawn while the first load is in flight. The page
+     * size is what the operator is about to get, so it sets the height —
+     * clamped so a 100-per-page list doesn't shimmer a full screen of
+     * bars, and a 5-per-page one still reads as a list.
+     */
+    readonly skeletonLines: _angular_core.Signal<number[]>;
+    /** First load: nothing to show yet, so the rows are placeholders. */
+    readonly showSkeleton: _angular_core.Signal<boolean>;
+    /**
+     * The request failed and brought nothing back. Without this the body
+     * falls through to the empty state and tells the operator, calmly and
+     * in the product's own voice, that they have no clients — a false
+     * statement about their data that they may go on to act on.
+     *
+     * Third in the chain, after the skeleton and before the empty state:
+     * a retry that is already in flight shows progress, not the error it
+     * is busy clearing. Rows already on screen stay there and keep the
+     * head chip as the failure signal, the way a failed refresh should.
+     */
+    readonly showError: _angular_core.Signal<boolean>;
     /**
      * When `true`, double-clicking anywhere on a `<tr>` emits the row
      * via `rowDoubleClick` and the body rows render with
@@ -4580,6 +4627,13 @@ declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
     readonly exportRequest: _angular_core.OutputEmitterRef<EfDataCardExportRequest>;
     /** Raised by the empty state's "clear search" action. */
     readonly clearSearch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Raised by the error state's "try again" button. The card knows the
+     * request failed but not what the request was, so the screen re-runs
+     * it — typically `(retry)="search()"` on a list screen. Unbound, the
+     * button is a dead control, so bind it wherever `[errorMsg]` is bound.
+     */
+    readonly retry: _angular_core.OutputEmitterRef<void>;
     private readonly bodyTemplates;
     private readonly headerTemplates;
     private readonly bodyTemplateMap;
@@ -4739,7 +4793,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; }; "defaultDensity": { "alias": "defaultDensity"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "fixedLayout": { "alias": "fixedLayout"; "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>;
+    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; }; "fixedLayout": { "alias": "fixedLayout"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "sortChange": "sortChange"; "rowDoubleClick": "rowDoubleClick"; "rowAction": "rowAction"; "exportRequest": "exportRequest"; "clearSearch": "clearSearch"; "retry": "retry"; "rowReorder": "rowReorder"; }, ["bodyTemplates", "headerTemplates"], ["[tbl-head-info]", "[tbl-head-actions]", "[empty-state-mobile]", "[empty-state]"], true, never>;
 }
 
 /**