@truenas/ui-components 0.1.26 → 0.1.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenas/ui-components",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "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, AfterViewInit, OnDestroy, AfterContentInit, TemplateRef, Provider, ChangeDetectorRef, PipeTransform, OnInit, ViewContainerRef, AfterViewChecked } from '@angular/core';
+import { ElementRef, OnDestroy, AfterViewInit, AfterContentInit, TemplateRef, Provider, ChangeDetectorRef, PipeTransform, OnInit, ViewContainerRef, AfterViewChecked } 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';
@@ -253,6 +253,139 @@ interface AutocompleteHarnessFilters extends BaseHarnessFilters {
     placeholder?: string;
 }
 
+type TnDrawerMode = 'side' | 'over';
+type TnDrawerPosition = 'start' | 'end';
+declare class TnDrawerComponent implements OnDestroy {
+    private readonly document;
+    /** Whether the drawer sits alongside content ('side') or overlays it ('over') */
+    mode: _angular_core.InputSignal<TnDrawerMode>;
+    /** Whether the drawer is open. Two-way bindable via [(opened)] */
+    opened: _angular_core.ModelSignal<boolean>;
+    /** Prevent closing via backdrop click or Escape */
+    disableClose: _angular_core.InputSignal<boolean>;
+    /** Width of the drawer panel (must be a concrete CSS value for smooth transition) */
+    width: _angular_core.InputSignal<string>;
+    /** Which side the drawer appears on */
+    position: _angular_core.InputSignal<TnDrawerPosition>;
+    /** Accessible label for the drawer panel */
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Fires after the open transition completes */
+    openedComplete: _angular_core.OutputEmitterRef<void>;
+    /** Fires after the close transition completes */
+    closed: _angular_core.OutputEmitterRef<void>;
+    /** Whether the component has rendered (prevents transition flash on load) */
+    protected initialized: _angular_core.WritableSignal<boolean>;
+    /** Reference to the overlay element (portaled to body in over mode) */
+    protected overlayRef: _angular_core.Signal<ElementRef<any> | undefined>;
+    /** Focus trap should be active only in 'over' mode when open */
+    protected trapFocus: _angular_core.Signal<boolean>;
+    /** Role depends on mode: navigation for side, dialog for over */
+    protected panelRole: _angular_core.Signal<"dialog" | "navigation">;
+    /** Whether to show the backdrop */
+    protected showBackdrop: _angular_core.Signal<boolean>;
+    /** CSS classes for the drawer panel */
+    protected drawerClasses: _angular_core.Signal<string[]>;
+    /** Previous focus element for restoration (only captured in over mode) */
+    private previousFocus;
+    constructor();
+    ngOnDestroy(): void;
+    /** Open the drawer */
+    open(): void;
+    /** Close the drawer */
+    close(): void;
+    /** Toggle the drawer open/closed */
+    toggle(): void;
+    /** Handle backdrop click */
+    protected onBackdropClick(): void;
+    /**
+     * Handle Escape key in over mode.
+     * Side mode drawers are persistent navigation — Escape is not expected
+     * to dismiss them. The header toggle button is the intended control.
+     */
+    protected onKeydown(event: KeyboardEvent): void;
+    /** Handle transition end — emit events and restore focus after animation completes */
+    protected onTransitionEnd(event: TransitionEvent): void;
+    private restoreFocus;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnDrawerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnDrawerComponent, "tn-drawer", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "opened": { "alias": "opened"; "required": false; "isSignal": true; }; "disableClose": { "alias": "disableClose"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "opened": "openedChange"; "openedComplete": "openedComplete"; "closed": "closed"; }, never, ["*"], true, never>;
+}
+
+declare class TnDrawerContainerComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnDrawerContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnDrawerContainerComponent, "tn-drawer-container", never, {}, {}, never, ["*"], true, never>;
+}
+
+declare class TnDrawerContentComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnDrawerContentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnDrawerContentComponent, "tn-drawer-content", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Harness for interacting with tn-drawer in tests.
+ *
+ * @example
+ * ```typescript
+ * const drawer = await loader.getHarness(TnDrawerHarness);
+ * expect(await drawer.isOpen()).toBe(false);
+ * ```
+ */
+declare class TnDrawerHarness extends ComponentHarness {
+    static hostSelector: string;
+    private _inlinePanel;
+    /**
+     * Checks whether the drawer panel has the open class.
+     * Checks both inline (side mode) and portaled (over mode) panels.
+     *
+     * @returns Promise resolving to true if the drawer is open.
+     *
+     * @example
+     * ```typescript
+     * const drawer = await loader.getHarness(TnDrawerHarness);
+     * expect(await drawer.isOpen()).toBe(true);
+     * ```
+     */
+    isOpen(): Promise<boolean>;
+    /**
+     * Checks whether the backdrop overlay is visible.
+     *
+     * @returns Promise resolving to true if the backdrop is visible.
+     *
+     * @example
+     * ```typescript
+     * const drawer = await loader.getHarness(TnDrawerHarness);
+     * expect(await drawer.hasBackdrop()).toBe(true);
+     * ```
+     */
+    hasBackdrop(): Promise<boolean>;
+    /**
+     * Clicks the backdrop to close the drawer (only available in 'over' mode).
+     *
+     * @example
+     * ```typescript
+     * const drawer = await loader.getHarness(TnDrawerHarness);
+     * await drawer.clickBackdrop();
+     * expect(await drawer.isOpen()).toBe(false);
+     * ```
+     */
+    clickBackdrop(): Promise<void>;
+}
+/**
+ * Harness for interacting with tn-drawer-container in tests.
+ *
+ * @example
+ * ```typescript
+ * const container = await loader.getHarness(TnDrawerContainerHarness);
+ * const drawer = await container.getDrawer();
+ * ```
+ */
+declare class TnDrawerContainerHarness extends ComponentHarness {
+    static hostSelector: string;
+    /**
+     * Gets the drawer harness within this container.
+     */
+    getDrawer(): Promise<TnDrawerHarness>;
+}
+
 declare enum DiskType {
     Hdd = "HDD",
     Ssd = "SSD"
@@ -1145,7 +1278,7 @@ declare class TnCardComponent {
     title: _angular_core.InputSignal<string | undefined>;
     titleLink: _angular_core.InputSignal<string | undefined>;
     elevation: _angular_core.InputSignal<"none" | "low" | "medium" | "high">;
-    padding: _angular_core.InputSignal<"large" | "medium" | "small">;
+    padding: _angular_core.InputSignal<"small" | "large" | "medium">;
     padContent: _angular_core.InputSignal<boolean>;
     bordered: _angular_core.InputSignal<boolean>;
     background: _angular_core.InputSignal<boolean>;
@@ -1174,12 +1307,12 @@ declare class TnCardComponent {
 declare class TnExpansionPanelComponent {
     title: _angular_core.InputSignal<string | undefined>;
     elevation: _angular_core.InputSignal<"none" | "low" | "medium" | "high">;
-    padding: _angular_core.InputSignal<"large" | "medium" | "small">;
+    padding: _angular_core.InputSignal<"small" | "large" | "medium">;
     bordered: _angular_core.InputSignal<boolean>;
     background: _angular_core.InputSignal<boolean>;
     expanded: _angular_core.InputSignal<boolean>;
     disabled: _angular_core.InputSignal<boolean>;
-    titleStyle: _angular_core.InputSignal<"link" | "header" | "body">;
+    titleStyle: _angular_core.InputSignal<"body" | "header" | "link">;
     expandedChange: _angular_core.OutputEmitterRef<boolean>;
     toggleEvent: _angular_core.OutputEmitterRef<void>;
     private internalExpanded;
@@ -4612,5 +4745,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, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, 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, 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, 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, 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, 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 };