@truenas/ui-components 0.3.9 → 0.3.11

package/package.json

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

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

@@ -1054,6 +1054,17 @@ declare class TnButtonComponent implements AfterViewInit {
     variant: _angular_core.InputSignal<"filled" | "outline">;
     backgroundColor: _angular_core.InputSignal<string | undefined>;
     label: _angular_core.InputSignal<string>;
+    /**
+     * Optional icon rendered alongside the label. Accepts any name resolvable by
+     * `tn-icon` (sprite/registry/library). Use `iconPosition` to place it before
+     * or after the label.
+     */
+    icon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Side of the label the `icon` sits on. `left` (default) renders the icon
+     * before the label; `right` renders it after. No effect when `icon` is unset.
+     */
+    iconPosition: _angular_core.InputSignal<"left" | "right">;
     disabled: _angular_core.InputSignal<boolean>;
     /**
      * Native `type` of the rendered `<button>`. Defaults to `button` so stray
@@ -1099,7 +1110,7 @@ declare class TnButtonComponent implements AfterViewInit {
     private innerRef;
     ngAfterViewInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnButtonComponent, "tn-button", never, { "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "queryParams": { "alias": "queryParams"; "required": false; "isSignal": true; }; "fragment": { "alias": "fragment"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "rel": { "alias": "rel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnButtonComponent, "tn-button", never, { "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "queryParams": { "alias": "queryParams"; "required": false; "isSignal": true; }; "fragment": { "alias": "fragment"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "rel": { "alias": "rel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, never, true, never>;
 }
 
 /**
@@ -1126,6 +1137,8 @@ declare class TnButtonHarness extends ComponentHarness {
      */
     static hostSelector: string;
     private _button;
+    private _label;
+    private _icon;
     /**
      * Gets a `HarnessPredicate` that can be used to search for a button
      * with specific attributes.
@@ -1156,6 +1169,27 @@ declare class TnButtonHarness extends ComponentHarness {
      * ```
      */
     getLabel(): Promise<string>;
+    /**
+     * Gets the `name` of the icon rendered inside the button, or `null` when the
+     * button has no icon.
+     *
+     * @example
+     * ```typescript
+     * const saveBtn = await loader.getHarness(TnButtonHarness.with({ label: 'Save' }));
+     * expect(await saveBtn.getIconName()).toBe('check');
+     * ```
+     */
+    getIconName(): Promise<string | null>;
+    /**
+     * Reports whether the button renders an icon.
+     *
+     * @example
+     * ```typescript
+     * const saveBtn = await loader.getHarness(TnButtonHarness.with({ label: 'Save' }));
+     * expect(await saveBtn.hasIcon()).toBe(true);
+     * ```
+     */
+    hasIcon(): Promise<boolean>;
     /**
      * Checks whether the button is disabled.
      *
@@ -2756,6 +2790,17 @@ declare class TnCardComponent {
     protected footerActions: _angular_core.Signal<TemplateRef<any> | undefined>;
     title: _angular_core.InputSignal<string | undefined>;
     titleLink: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Angular router commands for a title that navigates within the app. When set,
+     * the title renders as an `<a [routerLink]>` so it participates in client-side
+     * (SPA) routing — unlike `titleLink`, which performs a full-page
+     * `window.location` navigation. Same accepted shapes as `[routerLink]`
+     * (`string | unknown[]`). Takes precedence over `titleLink`.
+     */
+    titleRouterLink: _angular_core.InputSignal<string | unknown[] | undefined>;
+    titleQueryParams: _angular_core.InputSignal<Record<string, unknown> | undefined>;
+    /** Help/hover text shown on the title via the tooltip directive. */
+    titleTooltip: _angular_core.InputSignal<string | undefined>;
     elevation: _angular_core.InputSignal<"none" | "low" | "medium" | "high">;
     padding: _angular_core.InputSignal<"small" | "large" | "medium">;
     padContent: _angular_core.InputSignal<boolean>;
@@ -2782,12 +2827,13 @@ declare class TnCardComponent {
     hasHeader: _angular_core.Signal<boolean>;
     hasHeaderRight: _angular_core.Signal<boolean>;
     hasFooter: _angular_core.Signal<boolean>;
+    isTitleRouterLink: _angular_core.Signal<boolean>;
     onTitleClick(): void;
     onControlChange(checked: boolean): void;
     onHeaderMenuItemClick(_item: TnMenuItem): void;
     getStatusClass(type?: string): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnCardComponent, "tn-card", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "titleLink": { "alias": "titleLink"; "required": false; "isSignal": true; }; "elevation": { "alias": "elevation"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "padContent": { "alias": "padContent"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; "headerStatus": { "alias": "headerStatus"; "required": false; "isSignal": true; }; "headerControl": { "alias": "headerControl"; "required": false; "isSignal": true; }; "headerMenu": { "alias": "headerMenu"; "required": false; "isSignal": true; }; "headerMenuTriggerTestId": { "alias": "headerMenuTriggerTestId"; "required": false; "isSignal": true; }; "primaryAction": { "alias": "primaryAction"; "required": false; "isSignal": true; }; "secondaryAction": { "alias": "secondaryAction"; "required": false; "isSignal": true; }; "footerLink": { "alias": "footerLink"; "required": false; "isSignal": true; }; }, {}, ["projectedHeader", "headerActions", "footerActions"], ["[tnCardHeader]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnCardComponent, "tn-card", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "titleLink": { "alias": "titleLink"; "required": false; "isSignal": true; }; "titleRouterLink": { "alias": "titleRouterLink"; "required": false; "isSignal": true; }; "titleQueryParams": { "alias": "titleQueryParams"; "required": false; "isSignal": true; }; "titleTooltip": { "alias": "titleTooltip"; "required": false; "isSignal": true; }; "elevation": { "alias": "elevation"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "padContent": { "alias": "padContent"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; "headerStatus": { "alias": "headerStatus"; "required": false; "isSignal": true; }; "headerControl": { "alias": "headerControl"; "required": false; "isSignal": true; }; "headerMenu": { "alias": "headerMenu"; "required": false; "isSignal": true; }; "headerMenuTriggerTestId": { "alias": "headerMenuTriggerTestId"; "required": false; "isSignal": true; }; "primaryAction": { "alias": "primaryAction"; "required": false; "isSignal": true; }; "secondaryAction": { "alias": "secondaryAction"; "required": false; "isSignal": true; }; "footerLink": { "alias": "footerLink"; "required": false; "isSignal": true; }; }, {}, ["projectedHeader", "headerActions", "footerActions"], ["[tnCardHeader]", "*"], true, never>;
 }
 
 /**
@@ -5368,6 +5414,19 @@ declare class TnTableComponent<T = unknown> implements OnInit {
     selectable: _angular_core.InputSignal<boolean>;
     expandable: _angular_core.InputSignal<boolean>;
     bordered: _angular_core.InputSignal<boolean>;
+    /**
+     * Optional per-row predicate deciding whether an individual row can expand.
+     * When omitted, every row is expandable (provided `expandable` is true and a
+     * `tnDetailRowDef` is present). Rows for which it returns `false` render no
+     * expand control, cannot be toggled, and never render a detail row. Has no
+     * effect unless `expandable` is true. Re-evaluated on each change detection,
+     * so it may depend on signals — keep it cheap and pure.
+     *
+     * If the predicate stops allowing an already-expanded row (e.g. it is driven
+     * by dynamic row state), that row is pruned from the expanded set, so it will
+     * not silently reappear expanded should the predicate allow it again later.
+     */
+    isRowExpandable: _angular_core.InputSignal<((row: T) => boolean) | undefined>;
     /**
      * Marks a single row as "active" — adds the `tn-table__row--active` class
      * and a left-side indicator bar. Set to `null` (default) to clear.
@@ -5434,9 +5493,15 @@ declare class TnTableComponent<T = unknown> implements OnInit {
     isIndeterminate: _angular_core.Signal<boolean>;
     trackByFn: _angular_core.Signal<(index: number, item: T) => unknown>;
     onSortClick(column: string): void;
-    getSortIcon(column: string): string;
-    getExpandIcon(row: T): string;
     isSorted(column: string): boolean;
+    /**
+     * Whether a specific row may currently be expanded. True when `expandable` is
+     * set and — when an `isRowExpandable` predicate is provided — that predicate
+     * returns true for the row. Drives the expand control's visibility and gates
+     * every expansion entry point (chevron, row click, keyboard). The `__expand`
+     * column and the detail row are additionally gated on `detailRowDef()`.
+     */
+    canExpandRow(row: T): boolean;
     toggleRowExpansion(row: T): void;
     isRowExpanded(row: T): boolean;
     isRowActive(row: T): boolean;
@@ -5448,7 +5513,7 @@ declare class TnTableComponent<T = unknown> implements OnInit {
     getColumnDef(columnName: string): TnTableColumnDirective | undefined;
     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; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyIcon": { "alias": "emptyIcon"; "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; }; "activeRow": { "alias": "activeRow"; "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; }; }, { "sortChange": "sortChange"; "selectionChange": "selectionChange"; "rowClick": "rowClick"; }, ["columnDefs", "detailRowDef"], 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; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyIcon": { "alias": "emptyIcon"; "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; }; "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; }; }, { "sortChange": "sortChange"; "selectionChange": "selectionChange"; "rowClick": "rowClick"; }, ["columnDefs", "detailRowDef"], never, true, [{ directive: typeof TnTestIdDirective; inputs: { "tnTestId": "testId"; }; outputs: {}; }]>;
 }
 
 /**
@@ -5566,6 +5631,14 @@ declare class TnTableHarness extends ComponentHarness {
      * @returns Promise resolving to true if the row has the expanded class.
      */
     isRowExpanded(rowIndex: number): Promise<boolean>;
+    /**
+     * Checks whether a row exposes an expand control. Returns false for rows made
+     * non-expandable via the table's `isRowExpandable` predicate.
+     *
+     * @param rowIndex Zero-based index of the data row.
+     * @returns Promise resolving to true if the row has an expand button.
+     */
+    hasExpandControl(rowIndex: number): Promise<boolean>;
     /**
      * Clicks a row (for tables with `clickable` enabled).
      *