@truenas/ui-components 0.1.57 → 0.1.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenas/ui-components",
-  "version": "0.1.57",
+  "version": "0.1.58",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
@@ -16,6 +16,7 @@
     "@angular/cdk": "^21.0.0",
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
+    "@angular/router": "^21.0.0",
     "@mdi/angular-material": "^7.2.96",
     "@mdi/js": "^7.4.47"
   },

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

@@ -533,14 +533,36 @@ declare class TnButtonComponent {
     label: _angular_core.InputSignal<string>;
     disabled: _angular_core.InputSignal<boolean>;
     /**
-     * Test-id applied to the rendered `<button>` element. Rendered under whichever attribute
+     * Test-id applied to the rendered element. Rendered under whichever attribute
      * name is configured via `TN_TEST_ATTR` (default `data-testid`).
      */
     testId: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Renders the button as an `<a>` with a plain `href` attribute.
+     * Mutually exclusive with `routerLink` — if both are provided, `routerLink` wins.
+     */
+    href: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Renders the button as an `<a>` driven by Angular Router. Accepts the same
+     * shapes as `[routerLink]` (`string | any[]`).
+     */
+    routerLink: _angular_core.InputSignal<string | unknown[] | undefined>;
+    queryParams: _angular_core.InputSignal<Record<string, unknown> | undefined>;
+    fragment: _angular_core.InputSignal<string | undefined>;
+    target: _angular_core.InputSignal<string | undefined>;
+    rel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Accessible label for the rendered element. Mirrors `aria-label`; useful when
+     * the visible label alone is insufficient (e.g. icon-only links).
+     */
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
     onClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    isAnchor: _angular_core.Signal<boolean>;
+    isRouterLink: _angular_core.Signal<boolean>;
     classes: _angular_core.Signal<string[]>;
+    handleAnchorClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnButtonComponent, "tn-button", never, { "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnButtonComponent, "tn-button", never, { "primary": { "alias": "primary"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "queryParams": { "alias": "queryParams"; "required": false; "isSignal": true; }; "fragment": { "alias": "fragment"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "rel": { "alias": "rel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, never, true, never>;
 }
 
 /**
@@ -609,6 +631,18 @@ declare class TnButtonHarness extends ComponentHarness {
      * ```
      */
     isDisabled(): Promise<boolean>;
+    /**
+     * Gets the resolved URL of the rendered element. Returns the `href` for
+     * anchor-mode renders (both plain `href` and `routerLink`) and `null` for
+     * button-mode renders.
+     *
+     * @example
+     * ```typescript
+     * const link = await loader.getHarness(TnButtonHarness.with({ label: 'Audit Settings' }));
+     * expect(await link.getHref()).toContain('/audit/settings');
+     * ```
+     */
+    getHref(): Promise<string | null>;
     /**
      * Clicks the button.
      *
@@ -1294,6 +1328,12 @@ interface TnMenuItem {
     action?: () => void;
     children?: TnMenuItem[];
     shortcut?: string;
+    /**
+     * Marks this item as the currently-chosen option (e.g. the active sort key
+     * or export format). Applies the `tn-menu-item--selected` class and an
+     * `aria-current="true"` attribute. Visually distinct from focus/hover.
+     */
+    selected?: boolean;
 }
 declare class TnMenuComponent {
     items: _angular_core.InputSignal<TnMenuItem[]>;
@@ -1307,6 +1347,8 @@ declare class TnMenuComponent {
     private overlay;
     private viewContainerRef;
     onMenuItemClick(item: TnMenuItem): void;
+    private contentItems;
+    constructor();
     hasChildren: _angular_core.Signal<(item: TnMenuItem) => boolean>;
     onMenuOpen(): void;
     onMenuClose(): void;
@@ -1319,7 +1361,7 @@ declare class TnMenuComponent {
     onContextMenu(event: MouseEvent): void;
     trackByItemId(index: number, item: TnMenuItem): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnMenuComponent, "tn-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "contextMenu": { "alias": "contextMenu"; "required": false; "isSignal": true; }; }, { "menuItemClick": "menuItemClick"; "menuOpen": "menuOpen"; "menuClose": "menuClose"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnMenuComponent, "tn-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "contextMenu": { "alias": "contextMenu"; "required": false; "isSignal": true; }; }, { "menuItemClick": "menuItemClick"; "menuOpen": "menuOpen"; "menuClose": "menuClose"; }, ["contentItems"], ["*", "tn-menu-item, .tn-menu-separator"], true, never>;
 }
 
 declare class TnCardComponent {
@@ -2433,6 +2475,55 @@ interface TabsHarnessFilters extends BaseHarnessFilters {
     hasTab?: string | RegExp;
 }
 
+/**
+ * Projection-based menu item for use inside `<tn-menu>`.
+ *
+ * Two authoring modes:
+ * 1. **Convenience** — set `label` (and optionally `icon`/`shortcut`); the
+ *    default icon + label + shortcut layout renders.
+ * 2. **Custom content** — omit `label`; project arbitrary content via
+ *    `<ng-content>` (badges, two-line layouts, etc.).
+ *
+ * Existing `<tn-menu [items]="...">` consumers don't need this component;
+ * the items-array API continues to work unchanged. Items-array entries and
+ * projected `<tn-menu-item>` children render together inside one `<tn-menu>`.
+ *
+ * Subscribe to either the projected item's own `itemClick` output (preferred,
+ * per-item handlers) or the parent menu's `menuItemClick` (uniform handler).
+ * Trigger-driven menus close automatically on projected-item click.
+ *
+ * **Note on keyboard navigation:** projected items render as `role="menuitem"`
+ * buttons but do not participate in `CdkMenu` arrow-key navigation (CdkMenuItem
+ * requires its parent `CdkMenu` in the same injector tree, which projection
+ * breaks). For menus that depend on arrow-key navigation between options, use
+ * the `items` input form. Tab/Shift+Tab and Enter/Space activation still work.
+ *
+ * @example
+ * ```html
+ * <tn-menu>
+ *   <tn-menu-item label="JSON" [selected]="format === 'json'"
+ *                 (itemClick)="setFormat('json')" />
+ *   <tn-menu-item label="CSV"  [selected]="format === 'csv'"
+ *                 (itemClick)="setFormat('csv')" />
+ * </tn-menu>
+ * ```
+ */
+declare class TnMenuItemComponent {
+    id: _angular_core.InputSignal<string | undefined>;
+    label: _angular_core.InputSignal<string | undefined>;
+    icon: _angular_core.InputSignal<string | undefined>;
+    iconLibrary: _angular_core.InputSignal<"material" | "mdi" | "custom" | "lucide" | undefined>;
+    shortcut: _angular_core.InputSignal<string | undefined>;
+    disabled: _angular_core.InputSignal<boolean>;
+    selected: _angular_core.InputSignal<boolean>;
+    testId: _angular_core.InputSignal<string | undefined>;
+    itemClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    resolvedTestId: _angular_core.Signal<string | undefined>;
+    handleClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnMenuItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnMenuItemComponent, "tn-menu-item", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconLibrary": { "alias": "iconLibrary"; "required": false; "isSignal": true; }; "shortcut": { "alias": "shortcut"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, ["*"], true, never>;
+}
+
 /**
  * Directive that attaches a menu to any element.
  * Usage: <button [tnMenuTriggerFor]="menu">Open Menu</button>
@@ -2555,6 +2646,24 @@ declare class TnMenuHarness extends ComponentHarness {
      * Gets the number of menu items (excluding separators).
      */
     getItemCount(): Promise<number>;
+    /**
+     * Checks whether a menu item is marked as the currently-selected option
+     * (i.e. has `aria-current="true"`).
+     *
+     * @example
+     * ```typescript
+     * const menu = await rootLoader.getHarness(TnMenuHarness);
+     * expect(await menu.isItemSelected({ label: 'JSON' })).toBe(true);
+     * ```
+     */
+    isItemSelected(filter: {
+        label: string | RegExp;
+    }): Promise<boolean>;
+    /**
+     * Gets the label of the currently-selected item, or `null` when no item is
+     * marked as selected.
+     */
+    getSelectedItemLabel(): Promise<string | null>;
 }
 /**
  * A set of criteria that can be used to filter `TnMenuHarness` instances.
@@ -5660,14 +5769,20 @@ declare class TnEmptyComponent {
     description: _angular_core.InputSignal<string | undefined>;
     icon: _angular_core.InputSignal<string | undefined>;
     iconLibrary: _angular_core.InputSignal<IconLibraryType>;
+    /**
+     * Overrides the icon size derived from `size`. Accepts any valid CSS size value
+     * (e.g. `'48px'`, `'3rem'`). Use this when the variant presets are too small for an
+     * empty-state illustration. When unset, the icon falls back to the `size`-based preset.
+     */
+    iconSize: _angular_core.InputSignal<string | undefined>;
     actionText: _angular_core.InputSignal<string | undefined>;
     bordered: _angular_core.InputSignal<boolean>;
     size: _angular_core.InputSignal<TnEmptySize>;
     onAction: _angular_core.OutputEmitterRef<void>;
     protected hasAction: _angular_core.Signal<boolean>;
-    iconSize: _angular_core.Signal<"lg" | "xl">;
+    protected iconSizePreset: _angular_core.Signal<"lg" | "xl">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnEmptyComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnEmptyComponent, "tn-empty", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconLibrary": { "alias": "iconLibrary"; "required": false; "isSignal": true; }; "actionText": { "alias": "actionText"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "onAction": "onAction"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnEmptyComponent, "tn-empty", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconLibrary": { "alias": "iconLibrary"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "actionText": { "alias": "actionText"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "onAction": "onAction"; }, never, never, true, never>;
 }
 
 /**
@@ -6228,5 +6343,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_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardHeaderDirective, 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, TnTestIdDirective, 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 { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardHeaderDirective, 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, TnMenuItemComponent, 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, TnTestIdDirective, 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, SubscriptSizing, TabChangeEvent, TabHarnessFilters, TabPanelHarnessFilters, TabsHarnessFilters, TnBannerType, TnButtonToggleType, TnCardAction, TnCardControl, TnCardFooterLink, TnCardHeaderStatus, TnConfirmDialogData, TnDialogDefaults, TnDialogOpenTarget, TnDrawerMode, TnDrawerPosition, TnEmptySize, TnFlatTreeNode, TnMenuItem, TnSelectOption, TnSelectOptionGroup, TnSelectionChange, TnSortEvent, TnTableDataSource, TnTableHarnessFilters, TnTestAttrName, TnThemeDefinition, TnToastCall, TnToastConfig, TooltipPosition, YearCell };