@truenas/ui-components 0.1.4 → 0.1.6

package/fesm2022/truenas-ui-components.mjs

@@ -16,7 +16,6 @@ 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 { jest } from '@jest/globals';
 import { DataSource } from '@angular/cdk/collections';
 import * as i1$2 from '@angular/cdk/tree';
 import { CdkTree, CdkTreeModule, CdkTreeNode, CDK_TREE_NODE_OUTLET_NODE, CdkTreeNodeOutlet, CdkNestedTreeNode } from '@angular/cdk/tree';
@@ -947,6 +946,173 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             args: [{ selector: 'tn-icon-button', standalone: true, imports: [CommonModule, TnIconComponent], template: "<button\n  type=\"button\"\n  [ngClass]=\"classes()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"effectiveAriaLabel()\"\n  [attr.title]=\"tooltip()\"\n  (click)=\"onClick.emit($event)\"\n>\n  <tn-icon\n    [name]=\"name()\"\n    [size]=\"size()\"\n    [color]=\"color()\"\n    [library]=\"library()\"\n    [ariaLabel]=\"effectiveAriaLabel()\" />\n</button>\n", styles: [":host{display:inline-block;width:fit-content}.tn-icon-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:transparent;padding:8px;border-radius:4px;transition:background-color .2s ease,color .2s ease;color:var(--tn-fg2, #6b7280)}.tn-icon-button:hover:not(:disabled){background-color:var(--tn-bg3, #f3f4f6);color:var(--tn-fg1, #1f2937)}.tn-icon-button:active:not(:disabled){background-color:var(--tn-bg3, #e5e7eb)}.tn-icon-button:focus-visible{outline:2px solid var(--tn-primary, #2563eb);outline-offset:2px}.tn-icon-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}\n"] }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], library: [{ type: i0.Input, args: [{ isSignal: true, alias: "library", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
 
+/**
+ * Harness for interacting with tn-icon-button in tests.
+ * Provides filtering by icon properties and methods for querying state and simulating interactions.
+ *
+ * @example
+ * ```typescript
+ * // Find icon button by name
+ * const closeBtn = await loader.getHarness(
+ *   TnIconButtonHarness.with({ name: 'close' })
+ * );
+ *
+ * // Click an icon button
+ * const settingsBtn = await loader.getHarness(
+ *   TnIconButtonHarness.with({ name: 'settings' })
+ * );
+ * await settingsBtn.click();
+ *
+ * // Check if disabled
+ * const deleteBtn = await loader.getHarness(
+ *   TnIconButtonHarness.with({ name: 'delete' })
+ * );
+ * expect(await deleteBtn.isDisabled()).toBe(false);
+ * ```
+ */
+class TnIconButtonHarness extends ComponentHarness {
+    /**
+     * The selector for the host element of a `TnIconButtonComponent` instance.
+     */
+    static hostSelector = 'tn-icon-button';
+    button = this.locatorFor('button');
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for an icon button
+     * with specific attributes.
+     *
+     * @param options Options for filtering which icon button instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * // Find icon button by name
+     * const button = await loader.getHarness(
+     *   TnIconButtonHarness.with({ name: 'menu' })
+     * );
+     *
+     * // Find icon button by library
+     * const customButton = await loader.getHarness(
+     *   TnIconButtonHarness.with({ library: 'mdi' })
+     * );
+     *
+     * // Find icon button with specific size
+     * const largeButton = await loader.getHarness(
+     *   TnIconButtonHarness.with({ size: 'lg' })
+     * );
+     * ```
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnIconButtonHarness, options)
+            .addOption('name', options.name, async (harness, name) => {
+            return (await harness.getName()) === name;
+        })
+            .addOption('library', options.library, async (harness, library) => {
+            return (await harness.getLibrary()) === library;
+        })
+            .addOption('size', options.size, async (harness, size) => {
+            return (await harness.getSize()) === size;
+        });
+    }
+    /**
+     * Gets the icon name.
+     *
+     * @returns Promise resolving to the icon name.
+     *
+     * @example
+     * ```typescript
+     * const button = await loader.getHarness(TnIconButtonHarness);
+     * const name = await button.getName();
+     * expect(name).toBe('settings');
+     * ```
+     */
+    async getName() {
+        const icon = await this.locatorFor('tn-icon')();
+        return icon.getAttribute('name');
+    }
+    /**
+     * Gets the icon library.
+     *
+     * @returns Promise resolving to the icon library.
+     *
+     * @example
+     * ```typescript
+     * const button = await loader.getHarness(TnIconButtonHarness);
+     * const library = await button.getLibrary();
+     * expect(library).toBe('mdi');
+     * ```
+     */
+    async getLibrary() {
+        const icon = await this.locatorFor('tn-icon')();
+        return icon.getAttribute('library');
+    }
+    /**
+     * Gets the icon size.
+     *
+     * @returns Promise resolving to the icon size.
+     *
+     * @example
+     * ```typescript
+     * const button = await loader.getHarness(TnIconButtonHarness);
+     * const size = await button.getSize();
+     * expect(size).toBe('lg');
+     * ```
+     */
+    async getSize() {
+        const icon = await this.locatorFor('tn-icon')();
+        return icon.getAttribute('size');
+    }
+    /**
+     * Gets the icon color.
+     *
+     * @returns Promise resolving to the icon color.
+     *
+     * @example
+     * ```typescript
+     * const button = await loader.getHarness(TnIconButtonHarness);
+     * const color = await button.getColor();
+     * expect(color).toBe('primary');
+     * ```
+     */
+    async getColor() {
+        const icon = await this.locatorFor('tn-icon')();
+        return icon.getAttribute('color');
+    }
+    /**
+     * Checks whether the icon button is disabled.
+     *
+     * @returns Promise resolving to true if the button is disabled.
+     *
+     * @example
+     * ```typescript
+     * const button = await loader.getHarness(
+     *   TnIconButtonHarness.with({ name: 'delete' })
+     * );
+     * expect(await button.isDisabled()).toBe(false);
+     * ```
+     */
+    async isDisabled() {
+        const button = await this.button();
+        return (await button.getProperty('disabled')) ?? false;
+    }
+    /**
+     * Clicks the icon button.
+     *
+     * @returns Promise that resolves when the click action is complete.
+     *
+     * @example
+     * ```typescript
+     * const button = await loader.getHarness(
+     *   TnIconButtonHarness.with({ name: 'close' })
+     * );
+     * await button.click();
+     * ```
+     */
+    async click() {
+        const button = await this.button();
+        return button.click();
+    }
+}
+
 var InputType;
 (function (InputType) {
     InputType["Email"] = "email";
@@ -2417,7 +2583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 
 /**
  * Harness for interacting with tn-icon in tests.
- * Provides filtering by icon name and library for existence checks.
+ * Provides filtering by icon name and library for existence checks, as well as click interaction.
  *
  * @example
  * ```typescript
@@ -2438,6 +2604,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * const hasIcon = await loader.hasHarness(
  *   TnIconHarness.with({ name: 'check' })
  * );
+ *
+ * // Click an icon
+ * const closeIcon = await loader.getHarness(
+ *   TnIconHarness.with({ name: 'close' })
+ * );
+ * await closeIcon.click();
  * ```
  */
 class TnIconHarness extends ComponentHarness {
@@ -2546,6 +2718,21 @@ class TnIconHarness extends ComponentHarness {
         const host = await this.host();
         return host.getAttribute('color');
     }
+    /**
+     * Clicks the icon.
+     *
+     * @returns Promise that resolves when the click action is complete.
+     *
+     * @example
+     * ```typescript
+     * const icon = await loader.getHarness(TnIconHarness.with({ name: 'close' }));
+     * await icon.click();
+     * ```
+     */
+    async click() {
+        const host = await this.host();
+        return host.click();
+    }
 }
 
 /**
@@ -2623,6 +2810,7 @@ function libIconMarker(iconName) {
     return iconName;
 }
 
+/// <reference types="jest" />
 /**
  * Creates default mock implementation of TnSpriteLoaderService.
  * All methods return safe default values.
@@ -8287,5 +8475,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, 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, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, 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 { 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, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, 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 };
 //# sourceMappingURL=truenas-ui-components.mjs.map