@truenas/ui-components 0.1.32 → 0.1.34

package/fesm2022/truenas-ui-components.mjs

@@ -17,13 +17,13 @@ import { TemplatePortal, PortalModule, ComponentPortal } from '@angular/cdk/port
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { SPACE, ENTER, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW } from '@angular/cdk/keycodes';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { DataSource } from '@angular/cdk/collections';
 import * as i1$3 from '@angular/cdk/tree';
 import { CdkTree, CdkTreeModule, CdkTreeNode, CDK_TREE_NODE_OUTLET_NODE, CdkTreeNodeOutlet, CdkNestedTreeNode } from '@angular/cdk/tree';
 export { FlatTreeControl } from '@angular/cdk/tree';
 import { map } from 'rxjs/operators';
 import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 
 let nextId = 0;
@@ -3242,6 +3242,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     ], template: "<div [ngClass]=\"classes()\">\n  <label class=\"tn-radio__label\" [for]=\"id\">\n    <input\n      #radioEl\n      type=\"radio\"\n      class=\"tn-radio__input\"\n      [id]=\"id\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [checked]=\"checked\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.data-testid]=\"testId()\"\n      [attr.aria-describedby]=\"error() ? id + '-error' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      (change)=\"onRadioChange($event)\"\n    />\n    <span class=\"tn-radio__checkmark\"></span>\n    <span class=\"tn-radio__text\">{{ label() }}</span>\n  </label>\n\n  @if (error()) {\n    <div\n      class=\"tn-radio__error\"\n      role=\"alert\"\n      aria-live=\"polite\"\n      [id]=\"id + '-error'\"\n    >\n      {{ error() }}\n    </div>\n  }\n</div>", styles: [".tn-radio{display:inline-block;margin-bottom:.5rem}.tn-radio__label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:.5rem}.tn-radio__label:hover .tn-radio__checkmark{border-color:var(--tn-primary, #007cba)}.tn-radio__input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.tn-radio__input:focus+.tn-radio__checkmark{outline:2px solid var(--tn-primary, #007cba);outline-offset:2px}.tn-radio__input:checked+.tn-radio__checkmark{border-color:var(--tn-primary, #007cba);background-color:var(--tn-primary, #007cba)}.tn-radio__input:checked+.tn-radio__checkmark:after{display:block}.tn-radio__input:disabled+.tn-radio__checkmark{border-color:var(--tn-lines, #e5e7eb);background-color:var(--tn-alt-bg1, #f8f9fa);cursor:not-allowed}.tn-radio__checkmark{position:relative;height:18px;width:18px;border:2px solid var(--tn-lines, #e5e7eb);border-radius:50%;background-color:transparent;transition:all .2s ease;flex-shrink:0}.tn-radio__checkmark:after{content:\"\";position:absolute;display:none;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background-color:#fff;transform:translate(-50%,-50%)}.tn-radio__text{color:var(--tn-fg1, #000000);font-size:14px;line-height:1.4}.tn-radio__error{margin-top:.25rem;font-size:12px;color:var(--tn-red, #dc3545)}.tn-radio--disabled .tn-radio__label{cursor:not-allowed;opacity:.6}.tn-radio--disabled .tn-radio__text{color:var(--tn-fg2, #6c757d)}.tn-radio--error .tn-radio__checkmark{border-color:var(--tn-red, #dc3545)}\n"] }]
         }], propDecorators: { radioEl: [{ type: i0.ViewChild, args: ['radioEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
 
+/**
+ * Harness for interacting with `tn-slide-toggle` in tests.
+ *
+ * @example
+ * ```typescript
+ * const toggle = await loader.getHarness(
+ *   TnSlideToggleHarness.with({ label: 'Enable notifications' })
+ * );
+ * await toggle.toggle();
+ * expect(await toggle.isChecked()).toBe(true);
+ * ```
+ */
+class TnSlideToggleHarness extends ComponentHarness {
+    static hostSelector = 'tn-slide-toggle';
+    _input = this.locatorFor('.tn-slide-toggle__input');
+    _label = this.locatorForOptional('.tn-slide-toggle__label-text');
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a slide toggle
+     * with specific attributes.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnSlideToggleHarness, options)
+            .addOption('label', options.label, (harness, label) => HarnessPredicate.stringMatches(harness.getLabelText(), label))
+            .addOption('testId', options.testId, async (harness, testId) => {
+            return (await harness.getTestId()) === testId;
+        });
+    }
+    /**
+     * Gets the label text of the slide toggle.
+     *
+     * @example
+     * ```typescript
+     * expect(await toggle.getLabelText()).toBe('Enable notifications');
+     * ```
+     */
+    async getLabelText() {
+        const label = await this._label();
+        return label ? (await label.text()).trim() : '';
+    }
+    /**
+     * Checks whether the slide toggle is currently checked.
+     *
+     * @example
+     * ```typescript
+     * expect(await toggle.isChecked()).toBe(false);
+     * ```
+     */
+    async isChecked() {
+        const input = await this._input();
+        return (await input.getProperty('checked')) ?? false;
+    }
+    /**
+     * Checks whether the slide toggle is disabled.
+     */
+    async isDisabled() {
+        const input = await this._input();
+        return (await input.getProperty('disabled')) ?? false;
+    }
+    /**
+     * Checks whether the slide toggle is required.
+     */
+    async isRequired() {
+        const input = await this._input();
+        return (await input.getProperty('required')) ?? false;
+    }
+    /**
+     * Gets the test ID attribute value.
+     */
+    async getTestId() {
+        const root = await this.locatorFor('.tn-slide-toggle')();
+        return root.getAttribute('data-testid');
+    }
+    /**
+     * Toggles the slide toggle by clicking the input element.
+     *
+     * @example
+     * ```typescript
+     * await toggle.toggle();
+     * ```
+     */
+    async toggle() {
+        const input = await this._input();
+        await input.click();
+    }
+    /**
+     * Checks the slide toggle. No-op if already checked.
+     */
+    async check() {
+        if (!(await this.isChecked())) {
+            await this.toggle();
+        }
+    }
+    /**
+     * Unchecks the slide toggle. No-op if already unchecked.
+     */
+    async uncheck() {
+        if (await this.isChecked()) {
+            await this.toggle();
+        }
+    }
+}
+
 class TnTabComponent {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
@@ -4010,6 +4112,190 @@ class TnTabsHarness extends ComponentHarness {
     }
 }
 
+/**
+ * Harness for a single menu item (`button.tn-menu-item`).
+ * @internal Used by TnMenuHarness to interact with individual items.
+ */
+class TnMenuItemHarness extends ComponentHarness {
+    static hostSelector = '.tn-menu-item';
+    _label = this.locatorFor('.tn-menu-item-label');
+    /** Gets the label text of this menu item. */
+    async getLabel() {
+        const label = await this._label();
+        return (await label.text()).trim();
+    }
+    /** Checks whether this menu item is disabled via the native `disabled` attribute. */
+    async isDisabled() {
+        const host = await this.host();
+        const disabled = await host.getProperty('disabled');
+        return !!disabled;
+    }
+    /** Clicks this menu item. */
+    async click() {
+        const host = await this.host();
+        await host.click();
+    }
+}
+/**
+ * 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);
+ * ```
+ */
+class TnMenuHarness extends ComponentHarness {
+    static hostSelector = '.tn-menu';
+    _items = this.locatorForAll(TnMenuItemHarness);
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a menu.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnMenuHarness, options);
+    }
+    /**
+     * Gets the labels of all menu items.
+     *
+     * @example
+     * ```typescript
+     * const menu = await rootLoader.getHarness(TnMenuHarness);
+     * expect(await menu.getItemLabels()).toEqual(['Edit', 'Delete']);
+     * ```
+     */
+    async getItemLabels() {
+        const items = await this._items();
+        return Promise.all(items.map(item => item.getLabel()));
+    }
+    /**
+     * 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' });
+     * ```
+     */
+    async clickItem(filter) {
+        const items = await this._items();
+        for (const item of items) {
+            const text = await item.getLabel();
+            const matches = filter.label instanceof RegExp
+                ? filter.label.test(text)
+                : text === filter.label;
+            if (matches) {
+                await item.click();
+                return;
+            }
+        }
+        throw new Error(`Could not find menu item matching label "${String(filter.label)}"`);
+    }
+    /**
+     * 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);
+     * ```
+     */
+    async isItemDisabled(filter) {
+        const items = await this._items();
+        for (const item of items) {
+            const text = await item.getLabel();
+            const matches = filter.label instanceof RegExp
+                ? filter.label.test(text)
+                : text === filter.label;
+            if (matches) {
+                return item.isDisabled();
+            }
+        }
+        throw new Error(`Could not find menu item with label "${String(filter.label)}"`);
+    }
+    /**
+     * Gets the number of menu items (excluding separators).
+     */
+    async getItemCount() {
+        return (await this._items()).length;
+    }
+}
+
+/**
+ * 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' });
+ * ```
+ */
+class TnMenuTesting {
+    /**
+     * Creates a `HarnessLoader` that searches the entire document,
+     * including CDK overlays where menus are rendered.
+     */
+    static rootLoader(fixture) {
+        return TestbedHarnessEnvironment.documentRootLoader(fixture);
+    }
+}
+
 class TnKeyboardShortcutComponent {
     shortcut = input('', ...(ngDevMode ? [{ debugName: "shortcut" }] : []));
     platform = input('auto', ...(ngDevMode ? [{ debugName: "platform" }] : []));
@@ -11361,5 +11647,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 { 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, TnSlideToggleHarness, 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 };
 //# sourceMappingURL=truenas-ui-components.mjs.map