@truenas/ui-components 0.1.31 → 0.1.33

package/package.json

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

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

@@ -3,6 +3,7 @@ import { ElementRef, OnDestroy, AfterViewInit, AfterContentInit, TemplateRef, Pr
 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 * as i1 from '@angular/cdk/tree';
 import { CdkTree, FlatTreeControl, CdkTreeNode, CdkNestedTreeNode } from '@angular/cdk/tree';
@@ -12,7 +13,6 @@ import { Observable } from 'rxjs';
 import { Overlay } from '@angular/cdk/overlay';
 import { DialogConfig, DialogRef } from '@angular/cdk/dialog';
 import { ComponentType } from '@angular/cdk/portal';
-import { ComponentFixture } from '@angular/core/testing';
 
 declare class TnAutocompleteComponent<T = unknown> implements ControlValueAccessor {
     private readonly elementRef;
@@ -2075,6 +2075,141 @@ declare class TnMenuTriggerDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TnMenuTriggerDirective, "[tnMenuTriggerFor]", ["tnMenuTrigger"], { "menu": { "alias": "tnMenuTriggerFor"; "required": true; "isSignal": true; }; "tnMenuPosition": { "alias": "tnMenuPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Harness for interacting with `tn-menu` in tests.
+ *
+ * Menus render in a CDK overlay **outside** the component tree, so a regular
+ * `TestbedHarnessEnvironment.loader(fixture)` won't find them. Use
+ * `TnMenuTesting.rootLoader(fixture)` instead — it searches the entire document.
+ *
+ * ## Test Setup
+ *
+ * ```typescript
+ * import {
+ *   TnMenuHarness,
+ *   TnMenuTesting,
+ *   TnIconButtonHarness,
+ * } from '@truenas/ui-components';
+ *
+ * let loader: HarnessLoader;   // for components
+ * let rootLoader: HarnessLoader; // for overlays (menus, dialogs)
+ *
+ * beforeEach(() => {
+ *   spectator = createComponent();
+ *   loader = TestbedHarnessEnvironment.loader(spectator.fixture);
+ *   rootLoader = TnMenuTesting.rootLoader(spectator.fixture);
+ * });
+ * ```
+ *
+ * ## Opening a Menu
+ *
+ * Click the trigger element to open the menu before querying it:
+ *
+ * ```typescript
+ * // Via harness (if trigger is a tn-icon-button)
+ * const trigger = await loader.getHarness(
+ *   TnIconButtonHarness.with({ name: 'more_vert' })
+ * );
+ * await trigger.click();
+ *
+ * // Or via DOM
+ * spectator.click('[tnMenuTriggerFor]');
+ * ```
+ *
+ * ## Querying and Clicking Items
+ *
+ * ```typescript
+ * const menu = await rootLoader.getHarness(TnMenuHarness);
+ * expect(await menu.getItemLabels()).toEqual(['Edit', 'Delete']);
+ * await menu.clickItem({ label: 'Edit' });
+ * await menu.clickItem({ label: /del/i }); // regex match
+ * expect(await menu.isItemDisabled({ label: 'Delete' })).toBe(false);
+ * ```
+ */
+declare class TnMenuHarness extends ComponentHarness {
+    static hostSelector: string;
+    private _items;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a menu.
+     */
+    static with(options?: MenuHarnessFilters): HarnessPredicate<TnMenuHarness>;
+    /**
+     * Gets the labels of all menu items.
+     *
+     * @example
+     * ```typescript
+     * const menu = await rootLoader.getHarness(TnMenuHarness);
+     * expect(await menu.getItemLabels()).toEqual(['Edit', 'Delete']);
+     * ```
+     */
+    getItemLabels(): Promise<string[]>;
+    /**
+     * Clicks a menu item by its label text.
+     *
+     * @param filter Object with `label` to match (string or RegExp).
+     *
+     * @example
+     * ```typescript
+     * const menu = await rootLoader.getHarness(TnMenuHarness);
+     * await menu.clickItem({ label: 'Delete' });
+     * ```
+     */
+    clickItem(filter: {
+        label: string | RegExp;
+    }): Promise<void>;
+    /**
+     * Checks if a menu item is disabled.
+     *
+     * @param filter Object with `label` to match (string or RegExp).
+     * @returns Promise resolving to true if the item is disabled.
+     *
+     * @example
+     * ```typescript
+     * const menu = await rootLoader.getHarness(TnMenuHarness);
+     * expect(await menu.isItemDisabled({ label: 'Delete' })).toBe(true);
+     * ```
+     */
+    isItemDisabled(filter: {
+        label: string | RegExp;
+    }): Promise<boolean>;
+    /**
+     * Gets the number of menu items (excluding separators).
+     */
+    getItemCount(): Promise<number>;
+}
+/**
+ * A set of criteria that can be used to filter `TnMenuHarness` instances.
+ */
+interface MenuHarnessFilters extends BaseHarnessFilters {
+}
+
+/**
+ * Test utilities for TnMenu.
+ *
+ * Provides a document-root `HarnessLoader` that can find menus rendered
+ * in CDK overlays. Use this alongside `TnDialogTesting.rootLoader()` if
+ * your tests also open dialogs.
+ *
+ * @example
+ * ```typescript
+ * import { TnMenuTesting, TnMenuHarness } from '@truenas/ui-components';
+ *
+ * const rootLoader = TnMenuTesting.rootLoader(spectator.fixture);
+ *
+ * // Open the menu trigger, then query the overlay
+ * spectator.click('[tnMenuTriggerFor]');
+ * const menu = await rootLoader.getHarness(TnMenuHarness);
+ * await menu.clickItem({ label: 'Edit' });
+ * ```
+ */
+declare class TnMenuTesting {
+    /**
+     * Creates a `HarnessLoader` that searches the entire document,
+     * including CDK overlays where menus are rendered.
+     */
+    static rootLoader(fixture: ComponentFixture<unknown>): HarnessLoader;
+}
+
 declare enum ModifierKeys {
     COMMAND = "\u2318",
     CMD = "\u2318",
@@ -2285,9 +2420,14 @@ declare class TnSelectComponent<T = unknown> implements ControlValueAccessor {
     placeholder: _angular_core.InputSignal<string>;
     disabled: _angular_core.InputSignal<boolean>;
     testId: _angular_core.InputSignal<string>;
+    multiple: _angular_core.InputSignal<boolean>;
+    compareWith: _angular_core.InputSignal<((a: T | null, b: T | null) => boolean) | undefined>;
     selectionChange: _angular_core.OutputEmitterRef<T>;
+    /** Emits the full array of selected values after each toggle in multiple mode. */
+    multiSelectionChange: _angular_core.OutputEmitterRef<T[]>;
     protected isOpen: _angular_core.WritableSignal<boolean>;
     protected selectedValue: _angular_core.WritableSignal<T | null>;
+    protected selectedValues: _angular_core.WritableSignal<T[]>;
     private formDisabled;
     isDisabled: _angular_core.Signal<boolean>;
     private onChange;
@@ -2295,22 +2435,23 @@ declare class TnSelectComponent<T = unknown> implements ControlValueAccessor {
     private elementRef;
     private cdr;
     constructor();
-    writeValue(value: T | null): void;
-    registerOnChange(fn: (value: T | null) => void): void;
+    writeValue(value: T | T[] | null): void;
+    registerOnChange(fn: (value: T | T[] | null) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     toggleDropdown(): void;
     closeDropdown(): void;
-    onOptionClick(option: TnSelectOption<T>): void;
+    onOptionClick(option: TnSelectOption<T>, groupDisabled?: boolean): void;
     selectOption(option: TnSelectOption<T>): void;
-    isSelected: _angular_core.Signal<(option: TnSelectOption<T>) => boolean>;
-    getDisplayText: _angular_core.Signal<string | (T & {})>;
+    private toggleOption;
+    isOptionSelected(option: TnSelectOption<T>): boolean;
+    getDisplayText: _angular_core.Signal<string>;
     private findOptionByValue;
     hasAnyOptions: _angular_core.Signal<boolean>;
     private compareValues;
     onKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnSelectComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnSelectComponent<any>, "tn-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionGroups": { "alias": "optionGroups"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnSelectComponent<any>, "tn-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionGroups": { "alias": "optionGroups"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "multiSelectionChange": "multiSelectionChange"; }, never, never, true, never>;
 }
 
 /**
@@ -5033,5 +5174,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, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, 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, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, 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, CalendarCell, CheckboxHarnessFilters, ChipColor, CreateFolderEvent, DateRange, DialogHarnessFilters, EmptyHarnessFilters, FilePickerCallbacks, FilePickerError, FilePickerMode, FileSystemItem, FormFieldHarnessFilters, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelType, LucideIconOptions, MockIconRegistry, MockSpriteLoader, PathSegment, PlatformType, ProgressBarMode, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SlideToggleColor, 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, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, 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, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, 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, CalendarCell, CheckboxHarnessFilters, ChipColor, CreateFolderEvent, DateRange, DialogHarnessFilters, EmptyHarnessFilters, FilePickerCallbacks, FilePickerError, FilePickerMode, FileSystemItem, FormFieldHarnessFilters, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelType, LucideIconOptions, MenuHarnessFilters, MockIconRegistry, MockSpriteLoader, PathSegment, PlatformType, ProgressBarMode, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SidePanelHarnessFilters, SlideToggleColor, 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 };