@akcelik/strct 5.18.0 → 5.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "5.18.0",
+  "version": "5.19.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

@@ -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. */
@@ -4633,6 +4639,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. */
@@ -4752,6 +4781,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 +4924,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 +5069,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. */