@truenas/ui-components 0.1.14 → 0.1.16

package/package.json

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

package/src/styles/themes.css

@@ -47,7 +47,13 @@
   --tn-icon-xl: 32px;
 
   /* Dialog content padding */
-  --tn-content-padding: 24px;
+  --tn-content-padding: 16px;
+}
+
+@media (min-width: 768px) {
+  :root {
+    --tn-content-padding: 24px;
+  }
 }
 
 
@@ -530,6 +536,7 @@ tn-dialog-shell {
   overflow-y: auto;
   overflow-x: hidden;
   box-sizing: border-box;
+  padding: var(--tn-content-padding, 16px);
 }
 
 /* Dialog actions */

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

@@ -1039,6 +1039,7 @@ declare class TnTabComponent implements AfterContentInit {
     isActive: _angular_core.WritableSignal<boolean>;
     tabsComponent?: {
         onKeydown: (event: KeyboardEvent, index: number) => void;
+        selectTab: (index: number) => void;
     };
     elementRef: ElementRef<any>;
     protected hasIconContent: _angular_core.WritableSignal<boolean>;
@@ -1108,6 +1109,364 @@ declare class TnTabsComponent implements AfterContentInit, AfterViewInit, OnDest
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnTabsComponent, "tn-tabs", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "highlightPosition": { "alias": "highlightPosition"; "required": false; "isSignal": true; }; }, { "selectedIndexChange": "selectedIndexChange"; "tabChange": "tabChange"; }, ["tabs", "panels"], ["tn-tab", "tn-tab-panel"], true, never>;
 }
 
+/**
+ * Harness for interacting with tn-tab in tests.
+ * Provides methods for querying individual tab state and simulating selection.
+ *
+ * @example
+ * ```typescript
+ * // Find a tab by label
+ * const tab = await loader.getHarness(TnTabHarness.with({ label: 'Settings' }));
+ *
+ * // Check if active
+ * expect(await tab.isSelected()).toBe(false);
+ *
+ * // Select it
+ * await tab.select();
+ * expect(await tab.isSelected()).toBe(true);
+ * ```
+ */
+declare class TnTabHarness extends ComponentHarness {
+    /**
+     * The selector for the host element of a `TnTabComponent` instance.
+     */
+    static hostSelector: string;
+    private _button;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a tab
+     * with specific attributes.
+     *
+     * @param options Options for filtering which tab instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * // Find tab by exact label
+     * const tab = await loader.getHarness(TnTabHarness.with({ label: 'Overview' }));
+     *
+     * // Find tab by regex
+     * const tab = await loader.getHarness(TnTabHarness.with({ label: /settings/i }));
+     * ```
+     */
+    static with(options?: TabHarnessFilters): HarnessPredicate<TnTabHarness>;
+    /**
+     * Gets the tab's label text.
+     *
+     * @returns Promise resolving to the tab's label string.
+     *
+     * @example
+     * ```typescript
+     * const tab = await loader.getHarness(TnTabHarness);
+     * expect(await tab.getLabel()).toBe('Overview');
+     * ```
+     */
+    getLabel(): Promise<string>;
+    /**
+     * Checks whether the tab is currently selected (active).
+     *
+     * @returns Promise resolving to true if the tab is selected.
+     *
+     * @example
+     * ```typescript
+     * const tab = await loader.getHarness(TnTabHarness.with({ label: 'Overview' }));
+     * expect(await tab.isSelected()).toBe(true);
+     * ```
+     */
+    isSelected(): Promise<boolean>;
+    /**
+     * Checks whether the tab is disabled.
+     *
+     * @returns Promise resolving to true if the tab is disabled.
+     *
+     * @example
+     * ```typescript
+     * const tab = await loader.getHarness(TnTabHarness.with({ label: 'Disabled Tab' }));
+     * expect(await tab.isDisabled()).toBe(true);
+     * ```
+     */
+    isDisabled(): Promise<boolean>;
+    /**
+     * Selects the tab by clicking it.
+     *
+     * @returns Promise that resolves when the tab has been clicked.
+     *
+     * @example
+     * ```typescript
+     * const tab = await loader.getHarness(TnTabHarness.with({ label: 'Settings' }));
+     * await tab.select();
+     * ```
+     */
+    select(): Promise<void>;
+    /**
+     * Gets the tab's testId attribute value.
+     *
+     * @returns Promise resolving to the data-testid value, or null if not set.
+     *
+     * @example
+     * ```typescript
+     * const tab = await loader.getHarness(TnTabHarness);
+     * expect(await tab.getTestId()).toBe('my-tab');
+     * ```
+     */
+    getTestId(): Promise<string | null>;
+}
+/**
+ * A set of criteria that can be used to filter a list of `TnTabHarness` instances.
+ */
+interface TabHarnessFilters extends BaseHarnessFilters {
+    /** Filters by tab label text. Supports string or regex matching. */
+    label?: string | RegExp;
+}
+
+/**
+ * Harness for interacting with tn-tab-panel in tests.
+ * Provides methods for querying panel visibility and content.
+ *
+ * @example
+ * ```typescript
+ * // Get all panels
+ * const panels = await loader.getAllHarnesses(TnTabPanelHarness);
+ *
+ * // Check which panel is active
+ * for (const panel of panels) {
+ *   if (await panel.isActive()) {
+ *     const text = await panel.getTextContent();
+ *     expect(text).toContain('Overview');
+ *   }
+ * }
+ * ```
+ */
+declare class TnTabPanelHarness extends ComponentHarness {
+    /**
+     * The selector for the host element of a `TnTabPanelComponent` instance.
+     */
+    static hostSelector: string;
+    private _panel;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a tab panel
+     * with specific attributes.
+     *
+     * @param options Options for filtering which panel instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * const panel = await loader.getHarness(
+     *   TnTabPanelHarness.with({ textContains: 'Overview' })
+     * );
+     * ```
+     */
+    static with(options?: TabPanelHarnessFilters): HarnessPredicate<TnTabPanelHarness>;
+    /**
+     * Checks whether the panel is currently active (visible).
+     *
+     * @returns Promise resolving to true if the panel is active.
+     *
+     * @example
+     * ```typescript
+     * const panel = await loader.getHarness(TnTabPanelHarness);
+     * expect(await panel.isActive()).toBe(true);
+     * ```
+     */
+    isActive(): Promise<boolean>;
+    /**
+     * Gets the text content of the panel.
+     *
+     * @returns Promise resolving to the panel's text content.
+     *
+     * @example
+     * ```typescript
+     * const panel = await loader.getHarness(TnTabPanelHarness);
+     * expect(await panel.getTextContent()).toContain('Overview');
+     * ```
+     */
+    getTextContent(): Promise<string>;
+    /**
+     * Gets the panel's testId attribute value.
+     *
+     * @returns Promise resolving to the data-testid value, or null if not set.
+     *
+     * @example
+     * ```typescript
+     * const panel = await loader.getHarness(TnTabPanelHarness);
+     * expect(await panel.getTestId()).toBe('my-panel');
+     * ```
+     */
+    getTestId(): Promise<string | null>;
+}
+/**
+ * A set of criteria that can be used to filter a list of `TnTabPanelHarness` instances.
+ */
+interface TabPanelHarnessFilters extends BaseHarnessFilters {
+    /** Filters by text content within panel. Supports string or regex matching. */
+    textContains?: string | RegExp;
+}
+
+/**
+ * Harness for interacting with tn-tabs in tests.
+ * Provides methods for querying tab state, selecting tabs, and inspecting panels.
+ *
+ * @example
+ * ```typescript
+ * // Get the tabs harness
+ * const tabs = await loader.getHarness(TnTabsHarness);
+ *
+ * // Select a tab by label
+ * await tabs.selectTab({ label: 'Settings' });
+ *
+ * // Get the selected tab label
+ * const selected = await tabs.getSelectedTab();
+ * expect(await selected.getLabel()).toBe('Settings');
+ *
+ * // Get all tab labels
+ * const labels = await tabs.getTabLabels();
+ * expect(labels).toEqual(['Overview', 'Details', 'Settings']);
+ * ```
+ */
+declare class TnTabsHarness extends ComponentHarness {
+    /**
+     * The selector for the host element of a `TnTabsComponent` instance.
+     */
+    static hostSelector: string;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for tabs
+     * with specific attributes.
+     *
+     * @param options Options for filtering which tabs instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * // Find by orientation
+     * const tabs = await loader.getHarness(TnTabsHarness.with({ orientation: 'vertical' }));
+     *
+     * // Find the tab group containing a "Settings" tab
+     * const tabs = await loader.getHarness(TnTabsHarness.with({ hasTab: 'Settings' }));
+     *
+     * // Find by regex
+     * const tabs = await loader.getHarness(TnTabsHarness.with({ hasTab: /settings/i }));
+     * ```
+     */
+    static with(options?: TabsHarnessFilters): HarnessPredicate<TnTabsHarness>;
+    /**
+     * Gets all tab harnesses within this tab group.
+     *
+     * @returns Promise resolving to an array of `TnTabHarness` instances.
+     *
+     * @example
+     * ```typescript
+     * const tabs = await loader.getHarness(TnTabsHarness);
+     * const allTabs = await tabs.getTabs();
+     * expect(allTabs.length).toBe(3);
+     * ```
+     */
+    getTabs(): Promise<TnTabHarness[]>;
+    /**
+     * Gets a specific tab by filter criteria.
+     *
+     * @param filter Optional filter to match a specific tab.
+     * @returns Promise resolving to the matching `TnTabHarness`.
+     *
+     * @example
+     * ```typescript
+     * const tabs = await loader.getHarness(TnTabsHarness);
+     * const settingsTab = await tabs.getTab({ label: 'Settings' });
+     * ```
+     */
+    getTab(filter?: TabHarnessFilters): Promise<TnTabHarness>;
+    /**
+     * Gets all panel harnesses within this tab group.
+     *
+     * @returns Promise resolving to an array of `TnTabPanelHarness` instances.
+     *
+     * @example
+     * ```typescript
+     * const tabs = await loader.getHarness(TnTabsHarness);
+     * const panels = await tabs.getPanels();
+     * expect(panels.length).toBe(3);
+     * ```
+     */
+    getPanels(): Promise<TnTabPanelHarness[]>;
+    /**
+     * Gets all tab labels as strings.
+     *
+     * @returns Promise resolving to an array of tab label strings.
+     *
+     * @example
+     * ```typescript
+     * const tabs = await loader.getHarness(TnTabsHarness);
+     * const labels = await tabs.getTabLabels();
+     * expect(labels).toEqual(['Overview', 'Details', 'Settings']);
+     * ```
+     */
+    getTabLabels(): Promise<string[]>;
+    /**
+     * Gets the currently selected (active) tab.
+     *
+     * @returns Promise resolving to the active `TnTabHarness`.
+     * @throws If no active tab is found.
+     *
+     * @example
+     * ```typescript
+     * const tabs = await loader.getHarness(TnTabsHarness);
+     * const selected = await tabs.getSelectedTab();
+     * expect(await selected.getLabel()).toBe('Overview');
+     * ```
+     */
+    getSelectedTab(): Promise<TnTabHarness>;
+    /**
+     * Selects a tab by filter criteria. Clicks the matching tab button.
+     *
+     * @param filter Filter to identify which tab to select.
+     * @returns Promise that resolves when the tab has been selected.
+     *
+     * @example
+     * ```typescript
+     * const tabs = await loader.getHarness(TnTabsHarness);
+     *
+     * // Select by label
+     * await tabs.selectTab({ label: 'Settings' });
+     *
+     * // Select by regex
+     * await tabs.selectTab({ label: /detail/i });
+     * ```
+     */
+    selectTab(filter: TabHarnessFilters): Promise<void>;
+    /**
+     * Gets the orientation of the tab group.
+     *
+     * @returns Promise resolving to 'horizontal' or 'vertical'.
+     *
+     * @example
+     * ```typescript
+     * const tabs = await loader.getHarness(TnTabsHarness);
+     * expect(await tabs.getOrientation()).toBe('horizontal');
+     * ```
+     */
+    getOrientation(): Promise<string>;
+    /**
+     * Gets the number of tabs.
+     *
+     * @returns Promise resolving to the tab count.
+     *
+     * @example
+     * ```typescript
+     * const tabs = await loader.getHarness(TnTabsHarness);
+     * expect(await tabs.getTabCount()).toBe(3);
+     * ```
+     */
+    getTabCount(): Promise<number>;
+}
+/**
+ * A set of criteria that can be used to filter a list of `TnTabsHarness` instances.
+ */
+interface TabsHarnessFilters extends BaseHarnessFilters {
+    /** Filters by tab group orientation. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Filters by the presence of a tab with a matching label. Supports string or regex. */
+    hasTab?: string | RegExp;
+}
+
 /**
  * Directive that attaches a menu to any element.
  * Usage: <button [tnMenuTriggerFor]="menu">Open Menu</button>
@@ -3378,5 +3737,5 @@ declare const TN_THEME_DEFINITIONS: readonly TnThemeDefinition[];
  */
 declare const THEME_MAP: Map<TnTheme, TnThemeDefinition>;
 
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogShellComponent, TnDividerComponent, TnDividerDirective, 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, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabPanelComponent, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTheme, TnThemeService, TnTimeInputComponent, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
-export type { BannerHarnessFilters, ButtonHarnessFilters, CalendarCell, ChipColor, CreateFolderEvent, DateRange, FilePickerCallbacks, FilePickerError, FilePickerMode, FileSystemItem, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelType, LucideIconOptions, MockIconRegistry, MockSpriteLoader, PathSegment, PlatformType, ProgressBarMode, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SlideToggleColor, SpinnerMode, SpriteConfig, TabChangeEvent, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnFlatTreeNode, TnMenuItem, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnTableDataSource, TnThemeDefinition, TooltipPosition, YearCell };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogShellComponent, TnDividerComponent, TnDividerDirective, 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, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, 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 { BannerHarnessFilters, ButtonHarnessFilters, CalendarCell, ChipColor, CreateFolderEvent, DateRange, FilePickerCallbacks, FilePickerError, FilePickerMode, FileSystemItem, IconButtonHarnessFilters, IconHarnessFilters, IconLibrary, IconLibraryType, IconResult, IconSize, IconSource, IconTestingMockOverrides, InputHarnessFilters, KeyCombination, LabelType, LucideIconOptions, MockIconRegistry, MockSpriteLoader, PathSegment, PlatformType, ProgressBarMode, ResolvedIcon, SelectHarnessFilters, ShortcutHandler, SlideToggleColor, SpinnerMode, SpriteConfig, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnFlatTreeNode, TnMenuItem, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnTableDataSource, TnThemeDefinition, TooltipPosition, YearCell };