@truenas/ui-components 0.1.18 → 0.1.19

package/fesm2022/truenas-ui-components.mjs

@@ -22,7 +22,8 @@ import * as i1$2 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 { Dialog, DialogRef, DIALOG_DATA } from '@angular/cdk/dialog';
+import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 
 var DiskType;
@@ -7657,78 +7658,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 
-const defaults = {
-    panelClass: ['tn-dialog-panel'],
-    maxWidth: '90vw',
-    maxHeight: '90vh',
-    role: 'dialog',
-};
-class TnDialog {
-    dialog = inject(Dialog);
-    /**
-     * Open a dialog with the given component or template.
-     * Applies default configuration for panel class, max dimensions, and focus behavior.
-     */
-    open(target, config) {
-        const merged = {
-            ...defaults,
-            ...config,
-            panelClass: [
-                ...defaults.panelClass,
-                ...(Array.isArray(config?.panelClass) ? config.panelClass : config?.panelClass ? [config.panelClass] : [])
-            ],
-            autoFocus: config?.autoFocus ?? true,
-            restoreFocus: config?.restoreFocus ?? true,
-        };
-        return this.dialog.open(target, merged);
-    }
-    /**
-     * Open a fullscreen dialog that takes over the entire viewport.
-     * Automatically applies fullscreen styling and dimensions.
-     */
-    openFullscreen(target, config) {
-        const merged = {
-            ...defaults,
-            ...config,
-            maxWidth: '100vw',
-            maxHeight: '100vh',
-            width: '100vw',
-            height: '100vh',
-            panelClass: [
-                ...defaults.panelClass,
-                ...(Array.isArray(config?.panelClass) ? config.panelClass : config?.panelClass ? [config.panelClass] : []),
-                'tn-dialog--fullscreen'
-            ],
-            autoFocus: config?.autoFocus ?? true,
-            restoreFocus: config?.restoreFocus ?? true,
-        };
-        return this.dialog.open(target, merged);
-    }
-    /**
-     * Open a confirmation dialog with customizable title, message, and button labels.
-     * Returns a promise that resolves to an Observable of the user's choice.
-     */
-    confirm(opts) {
-        // Import the confirm dialog component dynamically to avoid circular dependencies
-        return Promise.resolve().then(function () { return confirmDialog_component; }).then(m => {
-            const dialogRef = this.open(m.TnConfirmDialogComponent, {
-                data: opts,
-                width: '488px',
-                role: 'alertdialog',
-                disableClose: true,
-                panelClass: [opts.destructive ? 'tn-dialog--destructive' : ''].filter(Boolean),
-            });
-            return dialogRef.closed;
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnDialog, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnDialog, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 class TnDialogShellComponent {
     title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
     showFullscreenButton = input(false, ...(ngDevMode ? [{ debugName: "showFullscreenButton" }] : []));
@@ -7817,10 +7746,281 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     }, template: "<tn-dialog-shell [title]=\"data.title\">\n  <p style=\"margin: 0;\">{{ data.message }}</p>\n  <div tnDialogAction>\n    <tn-button\n      type=\"button\"\n      variant=\"outline\"\n      [label]=\"data.cancelText || 'Cancel'\"\n      (click)=\"ref.close(false)\" />\n    <tn-button\n      type=\"button\"\n      [color]=\"data.destructive ? 'warn' : 'primary'\"\n      [label]=\"data.confirmText || 'OK'\"\n      (click)=\"ref.close(true)\" />\n  </div>\n</tn-dialog-shell>\n" }]
         }] });
 
-var confirmDialog_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    TnConfirmDialogComponent: TnConfirmDialogComponent
-});
+const defaults = {
+    panelClass: ['tn-dialog-panel'],
+    maxWidth: '90vw',
+    maxHeight: '90vh',
+    role: 'dialog',
+};
+class TnDialog {
+    dialog = inject(Dialog);
+    /**
+     * Open a dialog with the given component or template.
+     * Applies default configuration for panel class, max dimensions, and focus behavior.
+     */
+    open(target, config) {
+        const merged = {
+            ...defaults,
+            ...config,
+            panelClass: [
+                ...defaults.panelClass,
+                ...(Array.isArray(config?.panelClass) ? config.panelClass : config?.panelClass ? [config.panelClass] : [])
+            ],
+            autoFocus: config?.autoFocus ?? true,
+            restoreFocus: config?.restoreFocus ?? true,
+        };
+        return this.dialog.open(target, merged);
+    }
+    /**
+     * Open a fullscreen dialog that takes over the entire viewport.
+     * Automatically applies fullscreen styling and dimensions.
+     */
+    openFullscreen(target, config) {
+        const merged = {
+            ...defaults,
+            ...config,
+            maxWidth: '100vw',
+            maxHeight: '100vh',
+            width: '100vw',
+            height: '100vh',
+            panelClass: [
+                ...defaults.panelClass,
+                ...(Array.isArray(config?.panelClass) ? config.panelClass : config?.panelClass ? [config.panelClass] : []),
+                'tn-dialog--fullscreen'
+            ],
+            autoFocus: config?.autoFocus ?? true,
+            restoreFocus: config?.restoreFocus ?? true,
+        };
+        return this.dialog.open(target, merged);
+    }
+    /**
+     * Open a confirmation dialog. Resolves to true if confirmed, false otherwise.
+     */
+    async confirm(opts) {
+        const dialogRef = this.open(TnConfirmDialogComponent, {
+            data: opts,
+            width: '488px',
+            role: 'alertdialog',
+            disableClose: true,
+            panelClass: [opts.destructive ? 'tn-dialog--destructive' : ''].filter(Boolean),
+        });
+        const result = await firstValueFrom(dialogRef.closed);
+        return !!result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnDialog, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnDialog, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Harness for interacting with `tn-dialog-shell` in tests.
+ *
+ * Dialogs are portaled into the CDK overlay outside the component tree.
+ * Use `TnDialogTesting.rootLoader(fixture)` to get a loader that can find them.
+ *
+ * @example
+ * ```typescript
+ * const dialogLoader = TnDialogTesting.rootLoader(fixture);
+ *
+ * // Find dialog by title
+ * const dialog = await dialogLoader.getHarness(
+ *   TnDialogHarness.with({ title: 'Delete Dataset?' })
+ * );
+ *
+ * // Click an action button and close
+ * await dialog.clickActionButton('Delete');
+ * ```
+ */
+class TnDialogHarness extends ComponentHarness {
+    /**
+     * The selector for the host element of a dialog shell instance.
+     */
+    static hostSelector = 'tn-dialog-shell';
+    _title = this.locatorFor('.tn-dialog__title');
+    _closeButton = this.locatorFor('.tn-dialog__close');
+    _fullscreenButton = this.locatorForOptional('.tn-dialog__fullscreen');
+    _content = this.locatorFor('.tn-dialog__content');
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a dialog
+     * with specific attributes.
+     *
+     * @param options Options for filtering which dialog instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * const dialog = await dialogLoader.getHarness(
+     *   TnDialogHarness.with({ title: 'Edit User' })
+     * );
+     *
+     * // With regex
+     * const dialog = await dialogLoader.getHarness(
+     *   TnDialogHarness.with({ title: /delete/i })
+     * );
+     * ```
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnDialogHarness, options)
+            .addOption('title', options.title, (harness, title) => HarnessPredicate.stringMatches(harness.getTitle(), title));
+    }
+    /**
+     * Gets the dialog's title text.
+     *
+     * @returns Promise resolving to the dialog title.
+     *
+     * @example
+     * ```typescript
+     * const dialog = await dialogLoader.getHarness(TnDialogHarness);
+     * expect(await dialog.getTitle()).toBe('Edit User');
+     * ```
+     */
+    async getTitle() {
+        const title = await this._title();
+        return (await title.text()).trim();
+    }
+    /**
+     * Gets the text content of the dialog's scrollable content area.
+     *
+     * @returns Promise resolving to the content text.
+     *
+     * @example
+     * ```typescript
+     * const dialog = await dialogLoader.getHarness(TnDialogHarness);
+     * expect(await dialog.getContentText()).toContain('Are you sure?');
+     * ```
+     */
+    async getContentText() {
+        const content = await this._content();
+        return (await content.text()).trim();
+    }
+    /**
+     * Clicks the close button (X) in the dialog header.
+     *
+     * @returns Promise that resolves when the click action is complete.
+     *
+     * @example
+     * ```typescript
+     * const dialog = await dialogLoader.getHarness(TnDialogHarness);
+     * await dialog.close();
+     * ```
+     */
+    async close() {
+        const closeBtn = await this._closeButton();
+        await closeBtn.click();
+    }
+    /**
+     * Clicks an action button in the dialog footer by its label.
+     * Only matches buttons inside the `tnDialogAction` footer area, not buttons in content.
+     *
+     * @param label The button label to match. Supports string or regex.
+     * @throws Error if no matching button is found in the actions area.
+     *
+     * @example
+     * ```typescript
+     * const dialog = await dialogLoader.getHarness(TnDialogHarness);
+     * await dialog.clickActionButton('Save');
+     * await dialog.clickActionButton(/cancel/i);
+     * ```
+     */
+    async clickActionButton(label) {
+        const buttons = await this.locatorForAll(TnButtonHarness.with({ label, ancestor: '.tn-dialog__actions' }))();
+        if (buttons.length === 0) {
+            throw new Error(`No action button found with label matching: ${label}`);
+        }
+        await buttons[0].click();
+    }
+    /**
+     * Gets all action button harnesses in the dialog footer.
+     *
+     * @returns Promise resolving to an array of `TnButtonHarness` instances.
+     *
+     * @example
+     * ```typescript
+     * const dialog = await dialogLoader.getHarness(TnDialogHarness);
+     * const buttons = await dialog.getActionButtons();
+     * expect(buttons).toHaveLength(2);
+     * ```
+     */
+    async getActionButtons() {
+        return this.locatorForAll(TnButtonHarness.with({ ancestor: '.tn-dialog__actions' }))();
+    }
+    /**
+     * Whether the dialog has a fullscreen toggle button.
+     *
+     * @returns Promise resolving to true if the fullscreen button is present.
+     */
+    async hasFullscreenButton() {
+        return (await this._fullscreenButton()) !== null;
+    }
+    /**
+     * Clicks the fullscreen toggle button.
+     *
+     * @throws Error if the dialog does not have a fullscreen button.
+     */
+    async toggleFullscreen() {
+        const btn = await this._fullscreenButton();
+        if (!btn) {
+            throw new Error('Dialog does not have a fullscreen button');
+        }
+        await btn.click();
+    }
+    /**
+     * Whether the dialog is currently in fullscreen mode.
+     * Checks the aria-label of the fullscreen button.
+     *
+     * @returns Promise resolving to true if fullscreen, false if not or if no fullscreen button.
+     */
+    async isFullscreen() {
+        const btn = await this._fullscreenButton();
+        if (!btn) {
+            return false;
+        }
+        const ariaLabel = await btn.getAttribute('aria-label');
+        return ariaLabel === 'Exit fullscreen';
+    }
+}
+
+/**
+ * Test utilities for working with `TnDialogHarness`.
+ *
+ * Dialogs are portaled into the CDK overlay outside the component tree,
+ * so a regular `TestbedHarnessEnvironment.loader()` won't find them.
+ * Use `TnDialogTesting.rootLoader()` to get a loader that can.
+ *
+ * @example
+ * ```typescript
+ * import { TnDialogTesting, TnDialogHarness } from '@truenas/ui-components';
+ *
+ * let dialogLoader: HarnessLoader;
+ *
+ * beforeEach(() => {
+ *   fixture = TestBed.createComponent(TestHostComponent);
+ *   dialogLoader = TnDialogTesting.rootLoader(fixture);
+ * });
+ *
+ * it('should open a confirm dialog', async () => {
+ *   const dialog = await dialogLoader.getHarness(
+ *     TnDialogHarness.with({ title: 'Delete?' })
+ *   );
+ *   await dialog.clickActionButton('Delete');
+ * });
+ * ```
+ */
+class TnDialogTesting {
+    /**
+     * Creates a `HarnessLoader` that searches the entire document,
+     * including the CDK overlay where dialogs are rendered.
+     *
+     * @param fixture The component fixture for the test.
+     * @returns A `HarnessLoader` capable of finding dialog harnesses.
+     */
+    static rootLoader(fixture) {
+        return TestbedHarnessEnvironment.documentRootLoader(fixture);
+    }
+}
 
 /**
  * Directive to mark an element as a side-panel footer action.
@@ -9633,5 +9833,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, 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, 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 { 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, 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, 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 };
 //# sourceMappingURL=truenas-ui-components.mjs.map