@akcelik/strct 5.18.0 → 5.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "5.18.0",
+  "version": "5.20.0",
   "description": "UIStruct — a standalone Angular component library with a tokenised, multi-palette theme system, built for datacenter / infrastructure management UIs.",
   "author": "Serkan Akcelik <serkan.akcelik@gmail.com>",
   "license": "MIT",

package/types/akcelik-strct.d.ts

@@ -1028,7 +1028,7 @@ declare class StrctTag {
     readonly activated: _angular_core.OutputEmitterRef<void>;
     protected onActivate(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctTag, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctTag, "strct-tag", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "activateLabel": { "alias": "activateLabel"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "mono": { "alias": "mono"; "required": false; "isSignal": true; }; }, { "removed": "removed"; "activated": "activated"; }, never, ["[strctTagLeading]", "*", "[strctTagLeading]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctTag, "strct-tag", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "activateLabel": { "alias": "activateLabel"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "mono": { "alias": "mono"; "required": false; "isSignal": true; }; }, { "removed": "removed"; "activated": "activated"; }, never, ["[strctTagLeading]", "*"], true, never>;
 }
 
 /** Avatar size variants. */
@@ -3084,6 +3084,12 @@ declare class StrctCheckbox implements ControlValueAccessor {
      * the name. `[strctControlDescription]` projects one with markup in it.
      */
     readonly description: _angular_core.InputSignal<string>;
+    /**
+     * Takes the box out of the tab order (`-1`) where something around it owns
+     * the keyboard — a datagrid in grid mode roves its rows and reaches the box
+     * with the arrows. `null` leaves the native order alone.
+     */
+    readonly tabIndex: _angular_core.InputSignal<number | null>;
     private readonly n;
     protected readonly descId: string;
     protected readonly labelId: string;
@@ -3105,7 +3111,7 @@ declare class StrctCheckbox implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctCheckbox, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCheckbox, "strct-checkbox", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, ["projected"], ["[strctControlDescription]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCheckbox, "strct-checkbox", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, ["projected"], ["[strctControlDescription]", "*"], true, never>;
 }
 
 /** On/off switch. Works with `[(ngModel)]` / reactive forms. */
@@ -4194,6 +4200,15 @@ interface StrctDatagridLabels {
      * reorders every row, a page replaces them, a filter hides most of them —
      * none of it is visible to someone who cannot see the table.
      */
+    /** The two empty states, and the way out of the filtered one. */
+    noMatches: string;
+    noMatchesFor: (query: string) => string;
+    clearFilters: string;
+    /** The bulk-selection escape: the page is selected, everything is not. */
+    pageSelected: (shown: number) => string;
+    selectAllCount: (total: number) => string;
+    allSelected: (total: number) => string;
+    clearSelection: string;
     sortedAscending: (column: string) => string;
     sortedDescending: (column: string) => string;
     sortCleared: string;
@@ -4530,6 +4545,13 @@ declare class StrctDatagrid {
         quickFilter: string;
         loadMore: string;
         showing: (shown: number, total?: number) => string;
+        noMatches: string;
+        noMatchesFor: (query: string) => string;
+        clearFilters: string;
+        pageSelected: (shown: number) => string;
+        selectAllCount: (total: number) => string;
+        allSelected: (total: number) => string;
+        clearSelection: string;
         sortedAscending: (column: string) => string;
         sortedDescending: (column: string) => string;
         sortCleared: string;
@@ -4633,6 +4655,29 @@ declare class StrctDatagrid {
      * Tab walks the interactive elements inside each row as usual.
      */
     readonly childrenKey: _angular_core.InputSignal<string | null>;
+    /**
+     * `'table'` (the default) is what the grid has always been: a table whose
+     * controls each take a tab stop. `'grid'` is the APG grid: the table claims
+     * `role="grid"`, the rows carry a roving tabindex so the whole grid is **one**
+     * tab stop, ↑/↓ move the cursor, Home/End jump, →/← step through the focused
+     * row's own controls and Escape comes back out, Space picks and Enter
+     * activates. It also makes a selected row say so — `aria-selected` on a row
+     * reaches no screen reader outside a grid.
+     *
+     * Opt-in, because it changes what Tab does inside the table.
+     */
+    readonly interactionMode: _angular_core.InputSignal<"grid" | "table">;
+    /**
+     * `'none'` hides the tick / radio column while selection keeps working — a
+     * file list selects by clicking the row, not a control in it. The row is
+     * then the control, so pair it with `interactionMode="grid"`.
+     */
+    readonly selectionColumn: _angular_core.InputSignal<"none" | "auto">;
+    /**
+     * The row was opened: a double-click, or Enter on the focused row in grid
+     * mode. Selection is "which rows do I mean"; activation is "go".
+     */
+    readonly rowActivate: _angular_core.OutputEmitterRef<StrctRow>;
     /** Emitted when the selection changes. */
     readonly selectionChange: _angular_core.OutputEmitterRef<StrctRow[]>;
     /** Emitted when the refresh button is clicked. */
@@ -4731,6 +4776,25 @@ declare class StrctDatagrid {
     protected setTextFilter(key: string, value: string): void;
     protected optionChecked(key: string, opt: unknown): boolean;
     protected toggleFilterOption(key: string, opt: unknown): void;
+    /**
+     * The escape every bulk workflow needs: the header tick selects the page,
+     * and nothing says the other pages exist. Offered only when the grid holds
+     * the rows — in `lazy` mode it cannot name rows the server has not sent,
+     * and selecting them would be a lie.
+     */
+    protected readonly bulkHint: _angular_core.Signal<{
+        text: string;
+        action: string;
+        run: () => void;
+    } | null>;
+    /** Select every row the filter allows, not only the page. */
+    selectAllFiltered(): void;
+    /** Rows exist, but nothing the filter allows — the undoable empty. */
+    protected readonly filteredAway: _angular_core.Signal<boolean>;
+    protected readonly anyFilter: _angular_core.Signal<boolean>;
+    protected noMatchesDescription(): string;
+    /** The way back out of the filtered empty state. */
+    protected clearAllFilters(): void;
     protected clearFilter(key: string): void;
     protected onDocClickOverlays(event: MouseEvent): void;
     /** Escape closes the topmost transient surface and hands focus back to its
@@ -4752,6 +4816,20 @@ declare class StrctDatagrid {
     private readonly activeTreeRow;
     protected treeRowTabindex(row: StrctRow): number;
     protected onTreeRowKeydown(row: StrctRow, event: KeyboardEvent): void;
+    /** The row the grid's single tab stop is on. */
+    private readonly cursorRow;
+    protected gridRowTabindex(row: StrctRow): number;
+    /** The focused row's own controls, in the order the arrows visit them. */
+    private rowControls;
+    protected onGridRowKeydown(row: StrctRow, event: KeyboardEvent): void;
+    /** Move the cursor to the row at `idx` and focus it once it has rendered. */
+    private focusGridRow;
+    /**
+     * "Go": a double-click, or Enter on the focused row. It opens the detail
+     * pane where there is one — a row click that shows the row is what every
+     * console does — and always tells the consumer.
+     */
+    protected onRowActivate(row: StrctRow): void;
     /** Move the roving tabindex to the row at `idx` and focus its element once
      *  the new tabindex has rendered. */
     private focusTreeRow;
@@ -4881,6 +4959,13 @@ declare class StrctDatagrid {
     /** `selectionMode` wins; `selectable` is the pre-4.8 spelling of 'multiple'. */
     protected readonly mode: _angular_core.Signal<"none" | "multiple" | "single">;
     protected readonly hasSelectionColumn: _angular_core.Signal<boolean>;
+    /** The grid interaction model, opt-in. */
+    protected readonly gridMode: _angular_core.Signal<boolean>;
+    /**
+     * In grid mode the row is the tab stop and its controls are reached with the
+     * arrows, so they leave the tab order; in table mode nothing changes.
+     */
+    protected ctlTabindex(): number | null;
     /** One radio group per grid instance. */
     protected readonly radioName: string;
     /**
@@ -5019,7 +5104,7 @@ declare class StrctDatagrid {
     private compareRows;
     private compare;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctDatagrid, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctDatagrid, "strct-datagrid", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "detailPane": { "alias": "detailPane"; "required": false; "isSignal": true; }; "paneListWidth": { "alias": "paneListWidth"; "required": false; "isSignal": true; }; "paneTakeoverWidth": { "alias": "paneTakeoverWidth"; "required": false; "isSignal": true; }; "activeRowId": { "alias": "activeRowId"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "singleLine": { "alias": "singleLine"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "columnChooser": { "alias": "columnChooser"; "required": false; "isSignal": true; }; "sync": { "alias": "sync"; "required": false; "isSignal": true; }; "footerActionsDisabled": { "alias": "footerActionsDisabled"; "required": false; "isSignal": true; }; "rowId": { "alias": "rowId"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selectedId": { "alias": "selectedId"; "required": false; "isSignal": true; }; "rowSelectable": { "alias": "rowSelectable"; "required": false; "isSignal": true; }; "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "paging": { "alias": "paging"; "required": false; "isSignal": true; }; "hasMore": { "alias": "hasMore"; "required": false; "isSignal": true; }; "loadingMore": { "alias": "loadingMore"; "required": false; "isSignal": true; }; "moreTotal": { "alias": "moreTotal"; "required": false; "isSignal": true; }; "groupSelect": { "alias": "groupSelect"; "required": false; "isSignal": true; }; "rowActions": { "alias": "rowActions"; "required": false; "isSignal": true; }; "initialSelection": { "alias": "initialSelection"; "required": false; "isSignal": true; }; "selectedIds": { "alias": "selectedIds"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "virtual": { "alias": "virtual"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "editHint": { "alias": "editHint"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "stateKey": { "alias": "stateKey"; "required": false; "isSignal": true; }; "columnState": { "alias": "columnState"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "groups": { "alias": "groups"; "required": false; "isSignal": true; }; "showEmptyGroups": { "alias": "showEmptyGroups"; "required": false; "isSignal": true; }; "collapsedGroups": { "alias": "collapsedGroups"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "quickFilter": { "alias": "quickFilter"; "required": false; "isSignal": true; }; "quickFilterFields": { "alias": "quickFilterFields"; "required": false; "isSignal": true; }; "quickFilterable": { "alias": "quickFilterable"; "required": false; "isSignal": true; }; "quickFilterAlign": { "alias": "quickFilterAlign"; "required": false; "isSignal": true; }; "childrenKey": { "alias": "childrenKey"; "required": false; "isSignal": true; }; }, { "activeRowId": "activeRowIdChange"; "selectedId": "selectedIdChange"; "loadMore": "loadMore"; "selectedIds": "selectedIdsChange"; "columnState": "columnStateChange"; "collapsedGroups": "collapsedGroupsChange"; "filters": "filtersChange"; "quickFilter": "quickFilterChange"; "selectionChange": "selectionChange"; "syncChange": "syncChange"; "rowAction": "rowAction"; "lazyLoad": "lazyLoad"; "cellEdit": "cellEdit"; }, ["detailDef", "groupHeaderDef", "paneTitleDef", "actionBarDef", "actionBarCaptionDef", "cellDefs"], ["[strctDatagridActionBarCaption]", "[strctDatagridActionBar]", "[strctDetailPaneTitle]", "[strctDetailPaneMeta]", "[strctDetailPaneActions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctDatagrid, "strct-datagrid", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "detailPane": { "alias": "detailPane"; "required": false; "isSignal": true; }; "paneListWidth": { "alias": "paneListWidth"; "required": false; "isSignal": true; }; "paneTakeoverWidth": { "alias": "paneTakeoverWidth"; "required": false; "isSignal": true; }; "activeRowId": { "alias": "activeRowId"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "singleLine": { "alias": "singleLine"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "columnChooser": { "alias": "columnChooser"; "required": false; "isSignal": true; }; "sync": { "alias": "sync"; "required": false; "isSignal": true; }; "footerActionsDisabled": { "alias": "footerActionsDisabled"; "required": false; "isSignal": true; }; "rowId": { "alias": "rowId"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selectedId": { "alias": "selectedId"; "required": false; "isSignal": true; }; "rowSelectable": { "alias": "rowSelectable"; "required": false; "isSignal": true; }; "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "paging": { "alias": "paging"; "required": false; "isSignal": true; }; "hasMore": { "alias": "hasMore"; "required": false; "isSignal": true; }; "loadingMore": { "alias": "loadingMore"; "required": false; "isSignal": true; }; "moreTotal": { "alias": "moreTotal"; "required": false; "isSignal": true; }; "groupSelect": { "alias": "groupSelect"; "required": false; "isSignal": true; }; "rowActions": { "alias": "rowActions"; "required": false; "isSignal": true; }; "initialSelection": { "alias": "initialSelection"; "required": false; "isSignal": true; }; "selectedIds": { "alias": "selectedIds"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "virtual": { "alias": "virtual"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "editHint": { "alias": "editHint"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "stateKey": { "alias": "stateKey"; "required": false; "isSignal": true; }; "columnState": { "alias": "columnState"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "groups": { "alias": "groups"; "required": false; "isSignal": true; }; "showEmptyGroups": { "alias": "showEmptyGroups"; "required": false; "isSignal": true; }; "collapsedGroups": { "alias": "collapsedGroups"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "quickFilter": { "alias": "quickFilter"; "required": false; "isSignal": true; }; "quickFilterFields": { "alias": "quickFilterFields"; "required": false; "isSignal": true; }; "quickFilterable": { "alias": "quickFilterable"; "required": false; "isSignal": true; }; "quickFilterAlign": { "alias": "quickFilterAlign"; "required": false; "isSignal": true; }; "childrenKey": { "alias": "childrenKey"; "required": false; "isSignal": true; }; "interactionMode": { "alias": "interactionMode"; "required": false; "isSignal": true; }; "selectionColumn": { "alias": "selectionColumn"; "required": false; "isSignal": true; }; }, { "activeRowId": "activeRowIdChange"; "selectedId": "selectedIdChange"; "loadMore": "loadMore"; "selectedIds": "selectedIdsChange"; "columnState": "columnStateChange"; "collapsedGroups": "collapsedGroupsChange"; "filters": "filtersChange"; "quickFilter": "quickFilterChange"; "rowActivate": "rowActivate"; "selectionChange": "selectionChange"; "syncChange": "syncChange"; "rowAction": "rowAction"; "lazyLoad": "lazyLoad"; "cellEdit": "cellEdit"; }, ["detailDef", "groupHeaderDef", "paneTitleDef", "actionBarDef", "actionBarCaptionDef", "cellDefs"], ["[strctDatagridActionBarCaption]", "[strctDatagridActionBar]", "[strctDetailPaneTitle]", "[strctDetailPaneMeta]", "[strctDetailPaneActions]"], true, never>;
 }
 
 /** Timeline node state colors. */