@truenas/ui-components 0.7.6 → 0.7.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenas/ui-components",
-  "version": "0.7.6",
+  "version": "0.7.8",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"

package/types/truenas-ui-components.d.ts

@@ -54,8 +54,8 @@ declare function kebabTestSegment(part: string | number): string;
  * re-implemented at each call site.
  *
  * Note this is *base-first*: the suffix trails the base. Fixed chrome whose role
- * should lead (e.g. `tn-dialog-shell`'s `button-close-<base>`) prepends the role
- * manually instead of calling this.
+ * should lead (e.g. `tn-dialog-shell`'s `button-close-<base>` and
+ * `dialog-title-<base>`) prepends the role manually instead of calling this.
  *
  * Falsy segments are preserved here (not filtered) so `composeTestId` can apply
  * its own drop/scoping rules — `scopeTestId(undefined, 'edit')` yields
@@ -1840,6 +1840,16 @@ declare class TnBannerComponent {
     message: _angular_core.InputSignal<string | undefined>;
     type: _angular_core.InputSignal<TnBannerType>;
     bordered: _angular_core.InputSignal<boolean>;
+    /**
+     * Semantic base for the banner's test id, rendered onto the banner root as
+     * `banner-<testId>` through {@link TnTestIdDirective} — so the value follows
+     * the library's own naming and honours `TN_TEST_ATTR`.
+     *
+     * The root, rather than the host element, because that is what carries the
+     * live-region role: the element a test asserts a warning on is the same one
+     * assistive tech announces.
+     */
+    testId: _angular_core.InputSignal<TnTestIdValue>;
     constructor();
     /**
      * Register all MDI icons used by the banner component
@@ -1865,7 +1875,7 @@ declare class TnBannerComponent {
      */
     classes: _angular_core.Signal<string[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnBannerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnBannerComponent, "tn-banner", never, { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; }, {}, ["actionContent"], ["*", "[tnBannerAction]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnBannerComponent, "tn-banner", never, { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, {}, ["actionContent"], ["*", "[tnBannerAction]"], true, never>;
 }
 
 /**
@@ -9713,6 +9723,36 @@ declare class TnTableComponent<T = unknown> implements OnInit {
      * `rowKey = (row: Job) => row.id` on the host.
      */
     expansionKey: _angular_core.InputSignal<((row: T) => unknown) | undefined>;
+    /**
+     * Test id for each ROW, as a function of the row and its index.
+     *
+     * The table writes no id on a `<tr>` of its own, and a cell body is free to be bare
+     * interpolation — `{{ row.username }}` renders no element the consumer can bind to. A list
+     * built that way is unaddressable: an automated suite that has to open, select or delete one
+     * specific row has nothing to select it by but position or cell text, both of which change
+     * under the test. Set this and every row carries `row-<base>` on the `<tr>`, and on its card
+     * in card mode, through the same {@link TnTestIdDirective} as every other id the library
+     * emits — so it honours {@link TN_TEST_ATTR} and is kebab-cased by {@link composeTestId}.
+     *
+     * Pass the base only, not the `row-` prefix, and identify the ROW rather than its position,
+     * the way {@link selectionKey} and {@link expansionKey} do — an index-derived id renames every
+     * row below the one that was deleted. The index is passed for the case where the data genuinely
+     * has nothing unique in it.
+     *
+     * Bind a stable member rather than writing the function in the template, since Angular's
+     * expression grammar has no arrow functions:
+     * `[rowTestId]="rowTestId"` for a `rowTestId = (row: User) => row.username` on the host.
+     *
+     * ```html
+     * <tn-table [dataSource]="users" [rowTestId]="rowTestId" />
+     * <!-- <tr data-testid="row-jane-doe"> -->
+     * ```
+     *
+     * Cells are not covered by this: a suite that has to read one cell of a row still needs an id
+     * on the element that cell renders. Tagging the row is what makes the row itself reachable —
+     * which is the part a consumer cannot add from the outside.
+     */
+    rowTestId: _angular_core.InputSignal<((row: T, index: number) => TnTestIdValue) | undefined>;
     emptyMessage: _angular_core.InputSignal<string>;
     /**
      * Optional second line under `emptyMessage`, for empty states that carry both a headline and an
@@ -9988,6 +10028,16 @@ declare class TnTableComponent<T = unknown> implements OnInit {
     /** True when the layout should keep the table but pin edge columns and scroll. */
     isScrollMode: Signal<boolean>;
     data: Signal<T[]>;
+    /**
+     * The resolved base for each row, by index.
+     *
+     * Computed once per `data()` change rather than called per row per change-detection pass: a
+     * base is usually an array, every call builds a new one, and a new reference restarts the
+     * directive's effect — so binding the call directly would rewrite every row's attribute on
+     * every pass. Recomputing here on the signal the rows are rendered from keeps the value
+     * identical between passes, and correct after a reload hands back new row objects.
+     */
+    protected readonly rowTestIds: Signal<TnTestIdValue[]>;
     effectiveDisplayedColumns: Signal<string[]>;
     /**
      * Every column the table actually renders, including the trailing actions column, which
@@ -10286,7 +10336,7 @@ declare class TnTableComponent<T = unknown> implements OnInit {
     getCardLabel(column: string): string;
     getCellValue(row: T, column: string): unknown;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnTableComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnTableComponent<any>, "tn-table", never, { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "displayedColumns": { "alias": "displayedColumns"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "selectionKey": { "alias": "selectionKey"; "required": false; "isSignal": true; }; "expansionKey": { "alias": "expansionKey"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyDescription": { "alias": "emptyDescription"; "required": false; "isSignal": true; }; "emptyIcon": { "alias": "emptyIcon"; "required": false; "isSignal": true; }; "scrollRegionAriaLabel": { "alias": "scrollRegionAriaLabel"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "isRowExpandable": { "alias": "isRowExpandable"; "required": false; "isSignal": true; }; "activeRow": { "alias": "activeRow"; "required": false; "isSignal": true; }; "activeWhen": { "alias": "activeWhen"; "required": false; "isSignal": true; }; "activeBg": { "alias": "activeBg"; "required": false; "isSignal": true; }; "activeIndicator": { "alias": "activeIndicator"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "expandOnRowClick": { "alias": "expandOnRowClick"; "required": false; "isSignal": true; }; "singleExpand": { "alias": "singleExpand"; "required": false; "isSignal": true; }; "fixedLayout": { "alias": "fixedLayout"; "required": false; "isSignal": true; }; "minColumnWidth": { "alias": "minColumnWidth"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "mobileLayout": { "alias": "mobileLayout"; "required": false; "isSignal": true; }; "cardBreakpoint": { "alias": "cardBreakpoint"; "required": false; "isSignal": true; }; "cardPrimaryCount": { "alias": "cardPrimaryCount"; "required": false; "isSignal": true; }; "sortColumn": { "alias": "sortColumn"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; }, { "sortChange": "sortChange"; "selectionChange": "selectionChange"; "rowClick": "rowClick"; "rowDoubleClick": "rowDoubleClick"; "sortColumn": "sortColumnChange"; "sortDirection": "sortDirectionChange"; }, ["columnDefs", "detailRowDef", "rowActionsDef"], never, true, [{ directive: typeof TnTestIdDirective; inputs: { "tnTestId": "testId"; }; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnTableComponent<any>, "tn-table", never, { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "displayedColumns": { "alias": "displayedColumns"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "selectionKey": { "alias": "selectionKey"; "required": false; "isSignal": true; }; "expansionKey": { "alias": "expansionKey"; "required": false; "isSignal": true; }; "rowTestId": { "alias": "rowTestId"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyDescription": { "alias": "emptyDescription"; "required": false; "isSignal": true; }; "emptyIcon": { "alias": "emptyIcon"; "required": false; "isSignal": true; }; "scrollRegionAriaLabel": { "alias": "scrollRegionAriaLabel"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "isRowExpandable": { "alias": "isRowExpandable"; "required": false; "isSignal": true; }; "activeRow": { "alias": "activeRow"; "required": false; "isSignal": true; }; "activeWhen": { "alias": "activeWhen"; "required": false; "isSignal": true; }; "activeBg": { "alias": "activeBg"; "required": false; "isSignal": true; }; "activeIndicator": { "alias": "activeIndicator"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "expandOnRowClick": { "alias": "expandOnRowClick"; "required": false; "isSignal": true; }; "singleExpand": { "alias": "singleExpand"; "required": false; "isSignal": true; }; "fixedLayout": { "alias": "fixedLayout"; "required": false; "isSignal": true; }; "minColumnWidth": { "alias": "minColumnWidth"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "mobileLayout": { "alias": "mobileLayout"; "required": false; "isSignal": true; }; "cardBreakpoint": { "alias": "cardBreakpoint"; "required": false; "isSignal": true; }; "cardPrimaryCount": { "alias": "cardPrimaryCount"; "required": false; "isSignal": true; }; "sortColumn": { "alias": "sortColumn"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; }, { "sortChange": "sortChange"; "selectionChange": "selectionChange"; "rowClick": "rowClick"; "rowDoubleClick": "rowDoubleClick"; "sortColumn": "sortColumnChange"; "sortDirection": "sortDirectionChange"; }, ["columnDefs", "detailRowDef", "rowActionsDef"], never, true, [{ directive: typeof TnTestIdDirective; inputs: { "tnTestId": "testId"; }; outputs: {}; }]>;
 }
 
 /**
@@ -10491,6 +10541,17 @@ declare class TnTableHarness extends ComponentHarness {
      * @returns Promise resolving to true if the loading overlay is visible.
      */
     isLoading(): Promise<boolean>;
+    /**
+     * Gets the test id written on a data row by `[rowTestId]`.
+     *
+     * Layout-aware, like the rest of the row queries: reads the card in the card layout, which
+     * carries the same id. Reads `data-testid` first and falls through to `data-test`, so it
+     * answers the same either way the consumer configured `TN_TEST_ATTR`.
+     *
+     * @param rowIndex Zero-based index of the data row (or card).
+     * @returns Promise resolving to the row's test id, or null when `[rowTestId]` is unset.
+     */
+    getRowTestId(rowIndex: number): Promise<string | null>;
     /**
      * Checks if a data row is currently marked active.
      *
@@ -14381,9 +14442,10 @@ declare class TnDialogShellComponent implements OnInit {
     /** Hide the actions footer. Same wrapper-case rationale as {@link hideContent}. */
     hideActions: _angular_core.InputSignal<boolean>;
     /**
-     * Optional semantic base that scopes the shell's chrome buttons. The close
-     * and fullscreen buttons emit `button-close` / `button-fullscreen` by default,
-     * or `button-close-<testId>` / `button-fullscreen-<testId>` when a base is
+     * Optional semantic base that scopes the shell's chrome. The close and
+     * fullscreen buttons emit `button-close` / `button-fullscreen` by default, and
+     * the title heading `dialog-title`, or `button-close-<testId>` /
+     * `button-fullscreen-<testId>` / `dialog-title-<testId>` when a base is
      * provided (useful when more than one dialog can be open).
      */
     testId: _angular_core.InputSignal<TnTestIdValue>;
@@ -14422,6 +14484,19 @@ declare class TnDialogShellComponent implements OnInit {
     protected closeTestId: Signal<(string | number | null | undefined)[]>;
     /** Role-first test-id segments for the fullscreen button: `button-fullscreen[-<base>]`. */
     protected fullscreenTestId: Signal<(string | number | null | undefined)[]>;
+    /**
+     * Role-first test-id segments for the title heading: `dialog-title[-<base>]`.
+     *
+     * The heading is fixed chrome like the two buttons, so it follows the same
+     * role-first shape — and a test that knows a dialog's base knows its title's
+     * id without being told separately, which is the point: dialogs raised
+     * through one generic error path are otherwise indistinguishable by id, and
+     * the only remaining handle is a match on their prose.
+     *
+     * There is no id when there is no title: the heading is not rendered at all
+     * (see the template), so nothing is left behind to select.
+     */
+    protected titleTestId: Signal<(string | number | null | undefined)[]>;
     /** Stable id for the title heading, referenced by the dialog's aria-labelledby. */
     readonly titleId: string;
     isFullscreen: _angular_core.WritableSignal<boolean>;