@truenas/ui-components 0.4.8 → 0.4.10

package/package.json

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

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

@@ -4711,6 +4711,11 @@ declare class TnMenuTriggerDirective implements OnDestroy {
     tnMenuPosition: _angular_core.InputSignal<"below" | "above" | "before" | "after">;
     private overlayRef?;
     private isMenuOpen;
+    /**
+     * Whether the menu is currently open. Exposed (with `exportAs: 'tnMenuTrigger'`) so a template
+     * can reflect the state — e.g. keeping a row's action button visible while its menu is open.
+     */
+    readonly isOpen: _angular_core.Signal<boolean>;
     private itemClickSub?;
     /**
      * RxJS subscriptions for the current overlay's `backdropClick()` and
@@ -6324,6 +6329,12 @@ declare class TnTableComponent<T = unknown> implements OnInit {
     displayedColumns: _angular_core.InputSignal<string[]>;
     trackBy: _angular_core.InputSignal<((index: number, item: T) => unknown) | undefined>;
     emptyMessage: _angular_core.InputSignal<string>;
+    /**
+     * Optional second line under `emptyMessage`, for empty states that carry both a headline and an
+     * explanation (e.g. "No search results" plus what to try instead). Omitted when empty, so tables
+     * with a single-line empty state are unaffected.
+     */
+    emptyDescription: _angular_core.InputSignal<string>;
     emptyIcon: _angular_core.InputSignal<string>;
     selectable: _angular_core.InputSignal<boolean>;
     expandable: _angular_core.InputSignal<boolean>;
@@ -6389,6 +6400,47 @@ declare class TnTableComponent<T = unknown> implements OnInit {
      * details" patterns. Independent of `selectable` (checkbox) and `expandable`.
      */
     clickable: _angular_core.InputSignal<boolean>;
+    /**
+     * When true, activating a row (click or Enter/Space) toggles its expansion, in addition to the
+     * chevron. Requires `clickable` — that is what makes rows activatable at all — and `expandable`;
+     * rows the `isRowExpandable` predicate rejects are unaffected, since `toggleRowExpansion` gates
+     * on it. `rowClick` still emits, so a consumer can both expand and react to the click.
+     */
+    expandOnRowClick: _angular_core.InputSignal<boolean>;
+    /**
+     * When true, expanding a row collapses whichever row was expanded before, so at most one detail
+     * row is open at a time. Default (false) allows any number.
+     */
+    singleExpand: _angular_core.InputSignal<boolean>;
+    /**
+     * Lays the table out `fixed` at full width, so every column without an explicit `[width]` gets
+     * an equal share and none can grow to dominate the row.
+     *
+     * Cells wrap regardless of this (that is the table's default), so reach for it only when equal
+     * columns are actually wanted: it gives up the `auto` layout's content-proportional sizing,
+     * which a table with one long text column among short ones usually wants to keep.
+     */
+    fixedLayout: _angular_core.InputSignal<boolean>;
+    /**
+     * Smallest width a column is allowed to shrink to before the host scrolls horizontally instead.
+     * Any CSS length.
+     *
+     * `fixedLayout` makes the table fit its container exactly — so without a floor a narrow viewport
+     * just keeps shrinking the columns, wrapping every cell to a couple of characters per line:
+     * technically visible, unreadable, and never scrollable. The floor is derived as this times the
+     * column count, so it scales with the table rather than needing a hand-picked number per page.
+     *
+     * Only applies with `fixedLayout`. Without it the table lays out `auto`, sizing to its content
+     * and overflowing the host — which scrolls on its own.
+     */
+    minColumnWidth: _angular_core.InputSignal<string>;
+    /**
+     * Explicit width floor, overriding the {@link minColumnWidth} derivation. Any CSS length. Reach
+     * for this only when a specific table needs a floor its column count doesn't imply.
+     */
+    minWidth: _angular_core.InputSignal<string>;
+    /** The floor actually applied to the table — explicit if given, else derived. */
+    protected readonly resolvedMinWidth: _angular_core.Signal<string | null>;
     sortChange: _angular_core.OutputEmitterRef<TnSortEvent>;
     selectionChange: _angular_core.OutputEmitterRef<T[]>;
     /** Emits the row when a clickable row is activated (click or Enter/Space). */
@@ -6402,8 +6454,13 @@ declare class TnTableComponent<T = unknown> implements OnInit {
     rowDoubleClick: _angular_core.OutputEmitterRef<T>;
     columnDefs: _angular_core.Signal<readonly TnTableColumnDirective[]>;
     detailRowDef: _angular_core.Signal<TnDetailRowDefDirective | undefined>;
-    sortColumn: _angular_core.WritableSignal<string>;
-    sortDirection: _angular_core.WritableSignal<"" | "desc" | "asc">;
+    /**
+     * Sorted column and direction. Two-way bindable (`[(sortColumn)]`), so a consumer that owns the
+     * sort — a data provider, a table destroyed and rebuilt when its list empties out — can restore
+     * the header's arrow instead of reaching in and setting the signal from an effect.
+     */
+    sortColumn: _angular_core.ModelSignal<string>;
+    sortDirection: _angular_core.ModelSignal<"" | "desc" | "asc">;
     /**
      * Set of currently expanded row references.
      * Note: uses object identity. If the consumer replaces the data array
@@ -6434,6 +6491,14 @@ declare class TnTableComponent<T = unknown> implements OnInit {
     canExpandRow(row: T): boolean;
     toggleRowExpansion(row: T): void;
     isRowExpanded(row: T): boolean;
+    /**
+     * Whether the row element itself acts as the expand/collapse control, which is what makes an
+     * `aria-expanded` on it meaningful: a screen-reader user who focuses the row and presses Enter
+     * otherwise gets no announcement that anything expanded, since only the chevron carries the
+     * state. Also requires `clickable` — without it the row isn't activatable and
+     * {@link onRowClick} returns before toggling anything.
+     */
+    isRowExpandTrigger(row: T): boolean;
     isRowActive(row: T): boolean;
     onRowClick(row: T): void;
     onRowDoubleClick(row: T): void;
@@ -6444,7 +6509,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; }; "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; }; }, { "sortChange": "sortChange"; "selectionChange": "selectionChange"; "rowClick": "rowClick"; "rowDoubleClick": "rowDoubleClick"; }, ["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; }; "emptyDescription": { "alias": "emptyDescription"; "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; }; "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; }; "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"], never, true, [{ directive: typeof TnTestIdDirective; inputs: { "tnTestId": "testId"; }; outputs: {}; }]>;
 }
 
 /**
@@ -9832,6 +9897,12 @@ declare class TnSidePanelComponent implements OnDestroy {
      * Test-id applied to the panel's close (×) button.
      */
     closeButtonTestId: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Accessible name for the close button. Defaults to "Dismiss"; override to translate it, or to
+     * name what is being closed ("Close Add Dataset form") — a screen-reader user tabbing to it out
+     * of context otherwise hears only "Dismiss".
+     */
+    closeButtonAriaLabel: _angular_core.InputSignal<string>;
     opened: _angular_core.OutputEmitterRef<void>;
     closed: _angular_core.OutputEmitterRef<void>;
     private actionContent;
@@ -9848,7 +9919,7 @@ declare class TnSidePanelComponent implements OnDestroy {
     private restoreFocus;
     private registerMdiIcons;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnSidePanelComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnSidePanelComponent, "tn-side-panel", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeGuard": { "alias": "closeGuard"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "closeButtonTestId": { "alias": "closeButtonTestId"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "opened": "opened"; "closed": "closed"; }, ["actionContent"], ["[tnSidePanelHeaderAction]", "*", "[tnSidePanelAction]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnSidePanelComponent, "tn-side-panel", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeGuard": { "alias": "closeGuard"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "closeButtonTestId": { "alias": "closeButtonTestId"; "required": false; "isSignal": true; }; "closeButtonAriaLabel": { "alias": "closeButtonAriaLabel"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "opened": "opened"; "closed": "closed"; }, ["actionContent"], ["[tnSidePanelHeaderAction]", "*", "[tnSidePanelAction]"], true, never>;
 }
 
 interface SidePanelHarnessFilters extends BaseHarnessFilters {