@truenas/ui-components 0.1.30 → 0.1.32

package/package.json

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

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { ElementRef, OnDestroy, AfterViewInit, AfterContentInit, TemplateRef, Provider, ChangeDetectorRef, PipeTransform, OnInit, ViewContainerRef, AfterViewChecked } from '@angular/core';
+import { ElementRef, OnDestroy, AfterViewInit, AfterContentInit, TemplateRef, Provider, ChangeDetectorRef, PipeTransform, OnInit, 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';
@@ -7,6 +7,7 @@ import { 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';
+import * as rxjs from 'rxjs';
 import { Observable } from 'rxjs';
 import { Overlay } from '@angular/cdk/overlay';
 import { DialogConfig, DialogRef } from '@angular/cdk/dialog';
@@ -2284,9 +2285,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;
@@ -2294,22 +2300,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>;
 }
 
 /**
@@ -4596,6 +4603,159 @@ interface EmptyHarnessFilters extends BaseHarnessFilters {
     title?: string | RegExp;
 }
 
+declare enum TnToastType {
+    Info = "info",
+    Success = "success",
+    Warning = "warning",
+    Error = "error"
+}
+declare enum TnToastPosition {
+    Top = "top",
+    Bottom = "bottom"
+}
+interface TnToastConfig {
+    /** Auto-dismiss duration in milliseconds. Default: 4000. Set to 0 to disable. */
+    duration?: number;
+    /** Visual style of the toast. Default: TnToastType.Info. */
+    type?: TnToastType;
+    /** Vertical position. Default: TnToastPosition.Bottom. */
+    position?: TnToastPosition;
+}
+
+declare class TnToastComponent {
+    message: _angular_core.WritableSignal<string>;
+    action: _angular_core.WritableSignal<string | null>;
+    type: _angular_core.WritableSignal<TnToastType>;
+    position: _angular_core.WritableSignal<TnToastPosition>;
+    visible: _angular_core.WritableSignal<boolean>;
+    icon: _angular_core.Signal<string>;
+    onAction: () => void;
+    onDismiss: () => void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnToastComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnToastComponent, "tn-toast", never, {}, {}, never, never, true, never>;
+}
+
+declare class TnToastRef {
+    private readonly _onAction;
+    private readonly _afterDismissed;
+    private _dismissed;
+    /** @internal */
+    _componentRef?: ComponentRef<TnToastComponent>;
+    /** Observable that emits when the action button is clicked. */
+    onAction(): rxjs.Observable<void>;
+    /** Observable that emits when the toast is dismissed (by action, duration, or programmatically). */
+    afterDismissed(): rxjs.Observable<void>;
+    /** Programmatically dismiss the toast. */
+    dismiss(): void;
+    /** @internal */
+    _triggerAction(): void;
+}
+declare class TnToastService {
+    private appRef;
+    private injector;
+    private activeRef;
+    /**
+     * Opens a toast notification.
+     *
+     * @param message The message to display.
+     * @param actionOrConfig Optional action button text, or config object.
+     * @param config Optional config when action is provided as second arg.
+     * @returns A TnToastRef that can be used to dismiss the toast or listen for events.
+     *
+     * @example
+     * ```typescript
+     * // Simple notification
+     * this.toast.open('Changes saved');
+     *
+     * // With action button
+     * const ref = this.toast.open('Item deleted', 'Undo');
+     * ref.onAction().subscribe(() => this.undoDelete());
+     *
+     * // With config
+     * this.toast.open('Error occurred', { type: 'error', duration: 6000 });
+     *
+     * // Action + config
+     * this.toast.open('Failed to save', 'Retry', { type: 'error' });
+     * ```
+     */
+    open(message: string, actionOrConfig?: string | TnToastConfig, config?: TnToastConfig): TnToastRef;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnToastService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<TnToastService>;
+}
+
+/**
+ * A recorded toast call for test assertions.
+ */
+interface TnToastCall {
+    message: string;
+    action?: string;
+    config: TnToastConfig;
+    ref: TnToastRef;
+}
+/**
+ * A mock implementation of TnToastService for unit testing.
+ *
+ * Records all `open()` calls so tests can assert on toast messages,
+ * types, and actions without rendering actual toast components.
+ *
+ * @example
+ * ```typescript
+ * import { TnToastTesting } from '@truenas/ui-components';
+ *
+ * let toastMock: TnToastMock;
+ *
+ * beforeEach(() => {
+ *   toastMock = new TnToastMock();
+ *   TestBed.configureTestingModule({
+ *     providers: [TnToastTesting.providers(toastMock)],
+ *   });
+ * });
+ *
+ * it('should show success toast', () => {
+ *   // ... trigger action that opens a toast
+ *   expect(toastMock.calls.length).toBe(1);
+ *   expect(toastMock.lastCall?.message).toBe('Saved successfully');
+ *   expect(toastMock.lastCall?.config.type).toBe(TnToastType.Success);
+ * });
+ *
+ * it('should handle action click', () => {
+ *   // ... trigger action that opens a toast with action
+ *   toastMock.lastCall?.ref._triggerAction();
+ *   // ... assert retry behavior
+ * });
+ * ```
+ */
+declare class TnToastMock {
+    /** All recorded toast open() calls. */
+    calls: TnToastCall[];
+    /** The most recent toast call, or undefined if none. */
+    get lastCall(): TnToastCall | undefined;
+    /** Clears all recorded calls. */
+    reset(): void;
+    open(message: string, actionOrConfig?: string | TnToastConfig, config?: TnToastConfig): TnToastRef;
+}
+/**
+ * Test utilities for TnToastService.
+ *
+ * Provides a mock that records toast calls without rendering components,
+ * making tests fast and deterministic.
+ *
+ * @example
+ * ```typescript
+ * const toastMock = new TnToastMock();
+ *
+ * TestBed.configureTestingModule({
+ *   providers: [TnToastTesting.providers(toastMock)],
+ * });
+ * ```
+ */
+declare class TnToastTesting {
+    /**
+     * Returns providers that replace TnToastService with the given mock.
+     */
+    static providers(mock: TnToastMock): Provider[];
+}
+
 interface KeyCombination {
     ctrlKey: boolean;
     altKey: boolean;
@@ -4879,5 +5039,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, 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, 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, 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 };