@truenas/ui-components 0.1.41 → 0.1.43

package/package.json

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

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

@@ -1,10 +1,10 @@
 import * as _angular_core from '@angular/core';
-import { ElementRef, OnDestroy, AfterViewInit, AfterContentInit, TemplateRef, Provider, ChangeDetectorRef, PipeTransform, OnInit, ViewContainerRef, AfterViewChecked, ComponentRef } from '@angular/core';
+import { ElementRef, OnDestroy, AfterViewInit, AfterContentInit, TemplateRef, Provider, ChangeDetectorRef, OnInit, PipeTransform, ViewContainerRef, AfterViewChecked, ComponentRef } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { ComponentHarness, BaseHarnessFilters, HarnessPredicate, HarnessLoader } from '@angular/cdk/testing';
 import { SafeHtml, SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
 import { ComponentFixture } from '@angular/core/testing';
-import { DataSource } from '@angular/cdk/collections';
+import { SelectionModel, DataSource } from '@angular/cdk/collections';
 import * as i1 from '@angular/cdk/tree';
 import { CdkTree, FlatTreeControl, CdkTreeNode, CdkNestedTreeNode } from '@angular/cdk/tree';
 export { FlatTreeControl } from '@angular/cdk/tree';
@@ -3490,10 +3490,31 @@ declare class TnCellDefDirective {
 }
 declare class TnTableColumnDirective {
     name: _angular_core.InputSignal<string>;
+    sortable: _angular_core.InputSignal<boolean>;
+    width: _angular_core.InputSignal<string | undefined>;
     headerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     cellTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnTableColumnDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnTableColumnDirective, "[tnColumnDef]", ["tnColumnDef"], { "name": { "alias": "tnColumnDef"; "required": true; "isSignal": true; }; }, {}, ["headerTemplate", "cellTemplate"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnTableColumnDirective, "[tnColumnDef]", ["tnColumnDef"], { "name": { "alias": "tnColumnDef"; "required": true; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, {}, ["headerTemplate", "cellTemplate"], never, true, never>;
+}
+/**
+ * Directive to define the expandable detail row template.
+ * Place inside `tn-table` to provide expanded content for each row.
+ *
+ * @example
+ * ```html
+ * <tn-table [dataSource]="data" [displayedColumns]="columns" [expandable]="true">
+ *   ...column defs...
+ *   <ng-template tnDetailRowDef let-row>
+ *     <p>Details for {{ row.name }}</p>
+ *   </ng-template>
+ * </tn-table>
+ * ```
+ */
+declare class TnDetailRowDefDirective {
+    template: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnDetailRowDefDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnDetailRowDefDirective, "[tnDetailRowDef]", never, {}, {}, never, never, true, never>;
 }
 
 interface TnTableDataSource<T = unknown> {
@@ -3501,20 +3522,192 @@ interface TnTableDataSource<T = unknown> {
     connect?(): T[];
     disconnect?(): void;
 }
-declare class TnTableComponent<T = unknown> {
+interface TnSortEvent {
+    column: string;
+    direction: 'asc' | 'desc' | '';
+}
+declare class TnTableComponent<T = unknown> implements OnInit {
+    private destroyRef;
     dataSource: _angular_core.InputSignal<TnTableDataSource<T> | T[]>;
     displayedColumns: _angular_core.InputSignal<string[]>;
+    trackBy: _angular_core.InputSignal<((index: number, item: T) => unknown) | undefined>;
+    emptyMessage: _angular_core.InputSignal<string>;
+    emptyIcon: _angular_core.InputSignal<string>;
+    selectable: _angular_core.InputSignal<boolean>;
+    expandable: _angular_core.InputSignal<boolean>;
+    sortChange: _angular_core.OutputEmitterRef<TnSortEvent>;
+    selectionChange: _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">;
+    /**
+     * Set of currently expanded row references.
+     * Note: uses object identity. If the consumer replaces the data array
+     * (e.g. after sorting), expanded state is lost. A future key-based
+     * approach could address this.
+     */
+    expandedRows: _angular_core.WritableSignal<Set<unknown>>;
+    selection: SelectionModel<T>;
+    private selectionCount;
+    private initialized;
     private columnDefMap;
-    private cdr;
     constructor();
-    private processColumnDefs;
+    ngOnInit(): void;
     data: _angular_core.Signal<T[]>;
+    effectiveDisplayedColumns: _angular_core.Signal<string[]>;
+    isAllSelected: _angular_core.Signal<boolean>;
+    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;
+    toggleRowExpansion(row: T): void;
+    isRowExpanded(row: T): boolean;
+    toggleSelectAll(): void;
+    toggleRowSelection(row: T): void;
+    isRowSelected(row: T): boolean;
     getColumnDef(columnName: string): TnTableColumnDirective | undefined;
-    trackByIndex(index: number): number;
     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; }; }, {}, ["columnDefs"], never, true, 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; }; }, { "sortChange": "sortChange"; "selectionChange": "selectionChange"; }, ["columnDefs", "detailRowDef"], never, true, never>;
+}
+
+/**
+ * Harness for interacting with `tn-table` in tests.
+ * Provides methods for querying rows/cells, sorting, selecting, and expanding.
+ *
+ * @example
+ * ```typescript
+ * const table = await loader.getHarness(TnTableHarness);
+ * expect(await table.getRowCount()).toBe(5);
+ *
+ * await table.clickSortHeader('name');
+ * expect(await table.getSortDirection('name')).toBe('ascending');
+ *
+ * await table.toggleRowExpansion(0);
+ * expect(await table.isRowExpanded(0)).toBe(true);
+ * ```
+ */
+declare class TnTableHarness extends ComponentHarness {
+    static hostSelector: string;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a table
+     * with specific attributes.
+     *
+     * @param options Options for filtering which instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     */
+    static with(options?: TnTableHarnessFilters): HarnessPredicate<TnTableHarness>;
+    /**
+     * Gets the number of data rows (excludes header and detail rows).
+     *
+     * @returns Promise resolving to the row count.
+     */
+    getRowCount(): Promise<number>;
+    /**
+     * Gets the text content of header cells (excludes sort icons).
+     *
+     * @returns Promise resolving to an array of header text strings.
+     */
+    getHeaderTexts(): Promise<string[]>;
+    /**
+     * Gets the text of all data-column cells in a specific row.
+     *
+     * @param rowIndex Zero-based index of the data row.
+     * @returns Promise resolving to an array of cell text strings.
+     */
+    getRowTexts(rowIndex: number): Promise<string[]>;
+    /**
+     * Gets the text of a specific cell by row and column.
+     *
+     * @param rowIndex Zero-based index of the data row.
+     * @param columnName The column's data-column attribute value.
+     * @returns Promise resolving to the cell text.
+     */
+    getCellText(rowIndex: number, columnName: string): Promise<string>;
+    /**
+     * Gets all row texts as a 2D string array (data-column cells only).
+     *
+     * @returns Promise resolving to an array of row text arrays.
+     */
+    getAllRowTexts(): Promise<string[][]>;
+    /**
+     * Clicks a sortable column header to cycle sort direction.
+     *
+     * @param columnName The column's data-column attribute value.
+     */
+    clickSortHeader(columnName: string): Promise<void>;
+    /**
+     * Checks whether a column header has the sortable class.
+     *
+     * @param columnName The column's data-column attribute value.
+     * @returns Promise resolving to true if the column is sortable.
+     */
+    isSortable(columnName: string): Promise<boolean>;
+    /**
+     * Gets the current sort direction for a column via aria-sort.
+     *
+     * @param columnName The column's data-column attribute value.
+     * @returns Promise resolving to 'ascending', 'descending', or null.
+     */
+    getSortDirection(columnName: string): Promise<string | null>;
+    /**
+     * Clicks the select-all checkbox in the header.
+     */
+    toggleSelectAll(): Promise<void>;
+    /**
+     * Toggles selection for a specific row by clicking its checkbox cell.
+     *
+     * @param rowIndex Zero-based index of the data row.
+     */
+    toggleRowSelection(rowIndex: number): Promise<void>;
+    /**
+     * Checks if a specific row's checkbox is checked.
+     *
+     * @param rowIndex Zero-based index of the data row.
+     * @returns Promise resolving to true if the row's checkbox is checked.
+     */
+    isRowSelected(rowIndex: number): Promise<boolean>;
+    /**
+     * Gets the count of currently selected rows.
+     *
+     * @returns Promise resolving to the number of checked row checkboxes.
+     */
+    getSelectedRowCount(): Promise<number>;
+    /**
+     * Clicks the expand button for a specific row.
+     *
+     * @param rowIndex Zero-based index of the data row.
+     */
+    toggleRowExpansion(rowIndex: number): Promise<void>;
+    /**
+     * Checks if a data row is currently expanded.
+     *
+     * @param rowIndex Zero-based index of the data row.
+     * @returns Promise resolving to true if the row has the expanded class.
+     */
+    isRowExpanded(rowIndex: number): Promise<boolean>;
+    /**
+     * Gets the text content of an expanded detail row.
+     *
+     * @param detailIndex Zero-based index among currently visible detail rows.
+     * @returns Promise resolving to the detail row text.
+     */
+    getDetailRowContent(detailIndex: number): Promise<string>;
+    /**
+     * Gets the count of currently expanded detail rows.
+     *
+     * @returns Promise resolving to the number of visible detail rows.
+     */
+    getExpandedRowCount(): Promise<number>;
+    private assertRowExists;
+}
+/**
+ * Filters for finding `TnTableHarness` instances.
+ */
+interface TnTableHarnessFilters extends BaseHarnessFilters {
 }
 
 /** Flat node with expandable and level information */
@@ -5840,5 +6033,5 @@ declare const TN_THEME_DEFINITIONS: readonly TnThemeDefinition[];
  */
 declare const THEME_MAP: Map<TnTheme, TnThemeDefinition>;
 
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTabsHarness, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
-export type { AutocompleteHarnessFilters, BannerHarnessFilters, ButtonHarnessFilters, ButtonToggleHarnessFilters, CalendarCell, CheckboxHarnessFilters, ChipColor, CreateFolderEvent, DateInputHarnessFilters, DateRange, DateRangeInputHarnessFilters, DialogHarnessFilters, EmptyHarnessFilters, ExpansionPanelHarnessFilters, FilePickerCallbacks, FilePickerError, FilePickerMode, FileSystemItem, FormFieldHarnessFilters, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelType, LucideIconOptions, MenuHarnessFilters, MockIconRegistry, MockSpriteLoader, PathSegment, PlatformType, ProgressBarMode, RadioHarnessFilters, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SlideToggleColor, SlideToggleHarnessFilters, SpinnerMode, SpriteConfig, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnDrawerMode, TnDrawerPosition, TnEmptySize, TnFlatTreeNode, TnMenuItem, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnTableDataSource, TnThemeDefinition, TnToastCall, TnToastConfig, TooltipPosition, YearCell };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTabsComponent, TnTabsHarness, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
+export type { AutocompleteHarnessFilters, BannerHarnessFilters, ButtonHarnessFilters, ButtonToggleHarnessFilters, CalendarCell, CheckboxHarnessFilters, ChipColor, CreateFolderEvent, DateInputHarnessFilters, DateRange, DateRangeInputHarnessFilters, DialogHarnessFilters, EmptyHarnessFilters, ExpansionPanelHarnessFilters, FilePickerCallbacks, FilePickerError, FilePickerMode, FileSystemItem, FormFieldHarnessFilters, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelType, LucideIconOptions, MenuHarnessFilters, MockIconRegistry, MockSpriteLoader, PathSegment, PlatformType, ProgressBarMode, RadioHarnessFilters, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SlideToggleColor, SlideToggleHarnessFilters, SpinnerMode, SpriteConfig, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnDrawerMode, TnDrawerPosition, TnEmptySize, TnFlatTreeNode, TnMenuItem, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnSortEvent, TnTableDataSource, TnTableHarnessFilters, TnThemeDefinition, TnToastCall, TnToastConfig, TooltipPosition, YearCell };