@truenas/ui-components 0.1.15 → 0.1.17

package/fesm2022/truenas-ui-components.mjs

@@ -1,13 +1,14 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, inject, Injectable, viewChild, signal, effect, computed, ViewEncapsulation, Directive, contentChildren, output, forwardRef, ElementRef, ViewContainerRef, contentChild, ChangeDetectorRef, HostListener, TemplateRef, IterableDiffers, Pipe, model, PLATFORM_ID } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, inject, Injectable, viewChild, signal, effect, computed, ViewEncapsulation, Directive, contentChildren, output, forwardRef, ElementRef, ViewContainerRef, contentChild, ChangeDetectorRef, HostListener, TemplateRef, IterableDiffers, Pipe, model, afterNextRender, PLATFORM_ID } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
-import { mdiCheckCircle, mdiAlertCircle, mdiAlert, mdiInformation, mdiDotsVertical, mdiFolderOpen, mdiLock, mdiLoading, mdiFolderPlus, mdiFolderNetwork, mdiHarddisk, mdiDatabase, mdiFile, mdiFolder } from '@mdi/js';
+import { mdiCheckCircle, mdiAlertCircle, mdiAlert, mdiInformation, mdiDotsVertical, mdiClose, mdiFolderOpen, mdiLock, mdiLoading, mdiFolderPlus, mdiFolderNetwork, mdiHarddisk, mdiDatabase, mdiFile, mdiFolder } from '@mdi/js';
 import * as i1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient } from '@angular/common/http';
 import { firstValueFrom, BehaviorSubject, merge, Subject } from 'rxjs';
 import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+import * as i1$4 from '@angular/cdk/a11y';
 import { FocusMonitor, A11yModule } from '@angular/cdk/a11y';
 import * as i1$3 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
@@ -7712,6 +7713,7 @@ class TnDialog {
         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),
@@ -7805,14 +7807,14 @@ class TnConfirmDialogComponent {
     ref = inject((DialogRef));
     data = inject(DIALOG_DATA);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: TnConfirmDialogComponent, isStandalone: true, selector: "tn-confirm-dialog", host: { properties: { "class.tn-dialog--destructive": "data.destructive" }, classAttribute: "tn-dialog-shell" }, ngImport: i0, template: "<tn-dialog-shell [title]=\"data.title\">\n  <p style=\"padding: var(--content-padding);\">{{ 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", dependencies: [{ kind: "component", type: TnDialogShellComponent, selector: "tn-dialog-shell", inputs: ["title", "showFullscreenButton"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "disabled"], outputs: ["onClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: TnConfirmDialogComponent, isStandalone: true, selector: "tn-confirm-dialog", host: { properties: { "class.tn-dialog--destructive": "data.destructive" }, classAttribute: "tn-dialog-shell" }, ngImport: i0, 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", dependencies: [{ kind: "component", type: TnDialogShellComponent, selector: "tn-dialog-shell", inputs: ["title", "showFullscreenButton"] }, { kind: "component", type: TnButtonComponent, selector: "tn-button", inputs: ["primary", "color", "variant", "backgroundColor", "label", "disabled"], outputs: ["onClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tn-confirm-dialog', standalone: true, imports: [TnDialogShellComponent, TnButtonComponent], host: {
                         'class': 'tn-dialog-shell',
                         '[class.tn-dialog--destructive]': 'data.destructive'
-                    }, template: "<tn-dialog-shell [title]=\"data.title\">\n  <p style=\"padding: var(--content-padding);\">{{ 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" }]
+                    }, 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({
@@ -7820,6 +7822,200 @@ var confirmDialog_component = /*#__PURE__*/Object.freeze({
     TnConfirmDialogComponent: TnConfirmDialogComponent
 });
 
+/**
+ * Directive to mark an element as a side-panel footer action.
+ *
+ * @example
+ * ```html
+ * <tn-side-panel [(open)]="isOpen" title="Edit">
+ *   <tn-button tnSidePanelAction label="Save" />
+ * </tn-side-panel>
+ * ```
+ */
+class TnSidePanelActionDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSidePanelActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TnSidePanelActionDirective, isStandalone: true, selector: "[tnSidePanelAction]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSidePanelActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tnSidePanelAction]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * Directive to mark an element as a side-panel header action.
+ *
+ * @example
+ * ```html
+ * <tn-side-panel [(open)]="isOpen" title="Edit">
+ *   <tn-icon-button tnSidePanelHeaderAction name="fullscreen" />
+ *   Content here
+ * </tn-side-panel>
+ * ```
+ */
+class TnSidePanelHeaderActionDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSidePanelHeaderActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TnSidePanelHeaderActionDirective, isStandalone: true, selector: "[tnSidePanelHeaderAction]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSidePanelHeaderActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tnSidePanelHeaderAction]',
+                    standalone: true,
+                }]
+        }] });
+class TnSidePanelComponent {
+    iconRegistry = inject(TnIconRegistryService);
+    document = inject(DOCUMENT);
+    overlayRef = viewChild.required('overlay');
+    initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
+    // Two-way bindable via [(open)]
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    // Inputs
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    width = input('480px', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    hasBackdrop = input(true, ...(ngDevMode ? [{ debugName: "hasBackdrop" }] : []));
+    closeOnBackdropClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : []));
+    closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : []));
+    // Outputs
+    opened = output();
+    closed = output();
+    // Content projection queries
+    actionContent = contentChildren(TnSidePanelActionDirective, ...(ngDevMode ? [{ debugName: "actionContent" }] : []));
+    hasActions = computed(() => this.actionContent().length > 0, ...(ngDevMode ? [{ debugName: "hasActions" }] : []));
+    // Unique IDs for aria-labelledby and portal correlation
+    panelId = `tn-side-panel-${Math.random().toString(36).substring(2, 9)}`;
+    titleId = `${this.panelId}-title`;
+    // Focus restoration
+    previouslyFocusedElement = null;
+    constructor() {
+        this.registerMdiIcons();
+        effect(() => {
+            if (this.open()) {
+                this.previouslyFocusedElement = this.document.activeElement;
+            }
+        });
+        afterNextRender(() => {
+            this.document.body.appendChild(this.overlayRef().nativeElement);
+            this.initialized.set(true);
+        });
+    }
+    ngOnDestroy() {
+        this.overlayRef().nativeElement.remove();
+    }
+    dismiss() {
+        this.open.set(false);
+    }
+    onBackdropClick() {
+        if (this.closeOnBackdropClick()) {
+            this.dismiss();
+        }
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape' && this.closeOnEscape() && this.open()) {
+            event.stopPropagation();
+            this.dismiss();
+        }
+    }
+    onTransitionEnd(event) {
+        if (event.propertyName !== 'transform' || event.target !== event.currentTarget) {
+            return;
+        }
+        if (this.open()) {
+            this.opened.emit();
+        }
+        else {
+            this.closed.emit();
+            this.restoreFocus();
+        }
+    }
+    restoreFocus() {
+        if (this.previouslyFocusedElement && typeof this.previouslyFocusedElement.focus === 'function') {
+            this.previouslyFocusedElement.focus();
+            this.previouslyFocusedElement = null;
+        }
+    }
+    registerMdiIcons() {
+        const mdiIcons = {
+            'close': mdiClose,
+        };
+        this.iconRegistry.registerLibrary({
+            name: 'mdi',
+            resolver: (iconName) => {
+                const pathData = mdiIcons[iconName];
+                if (!pathData) {
+                    return null;
+                }
+                return `<svg viewBox="0 0 24 24"><path fill="currentColor" d="${pathData}"/></svg>`;
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnSidePanelComponent, isStandalone: true, selector: "tn-side-panel", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { properties: { "attr.data-tn-panel": "panelId" }, classAttribute: "tn-side-panel" }, queries: [{ propertyName: "actionContent", predicate: TnSidePanelActionDirective, isSignal: true }], viewQueries: [{ propertyName: "overlayRef", first: true, predicate: ["overlay"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Overlay wrapper: portaled to document.body -->\n<div\n  #overlay\n  class=\"tn-side-panel__overlay\"\n  role=\"dialog\"\n  [attr.data-tn-panel]=\"panelId\"\n  [class.tn-side-panel__overlay--initialized]=\"initialized()\"\n  [class.tn-side-panel__overlay--open]=\"open()\"\n  [attr.aria-modal]=\"open() ? 'true' : null\"\n  [attr.aria-labelledby]=\"open() ? titleId : null\"\n  [attr.aria-hidden]=\"!open() ? 'true' : null\">\n\n  <!-- Backdrop -->\n  @if (hasBackdrop()) {\n    <div\n      class=\"tn-side-panel__backdrop\"\n      aria-hidden=\"true\"\n      (click)=\"onBackdropClick()\">\n    </div>\n  }\n\n  <!-- Panel -->\n  <div\n    class=\"tn-side-panel__panel\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n    [style.width]=\"width()\"\n    [cdkTrapFocusAutoCapture]=\"open()\"\n    (transitionend)=\"onTransitionEnd($event)\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Header -->\n    <header class=\"tn-side-panel__header\">\n      <h2 class=\"tn-side-panel__title\" [id]=\"titleId\">{{ title() }}</h2>\n      <div class=\"tn-side-panel__header-actions\">\n        <ng-content select=\"[tnSidePanelHeaderAction]\" />\n        <tn-icon-button\n          name=\"close\"\n          library=\"mdi\"\n          size=\"sm\"\n          ariaLabel=\"Dismiss\"\n          (onClick)=\"dismiss()\" />\n      </div>\n    </header>\n\n    <!-- Content -->\n    <section class=\"tn-side-panel__content\">\n      <ng-content />\n    </section>\n\n    <!-- Actions -->\n    @if (hasActions()) {\n      <footer class=\"tn-side-panel__actions\">\n        <ng-content select=\"[tnSidePanelAction]\" />\n      </footer>\n    }\n  </div>\n</div>\n", styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;z-index:1000;pointer-events:none}.tn-side-panel__overlay--open{pointer-events:auto}.tn-side-panel__overlay--open .tn-side-panel__backdrop{opacity:1}.tn-side-panel__overlay--open .tn-side-panel__panel{transform:translate(0)}.tn-side-panel__backdrop{position:absolute;inset:0;background:#00000080;opacity:0}.tn-side-panel__overlay--initialized .tn-side-panel__backdrop{transition:opacity .2s ease}.tn-side-panel__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:100vw;background:var(--tn-bg2, #282828);color:var(--tn-fg1, #ffffff);box-shadow:-4px 0 24px #0000004d;outline:none;transform:translate(100%)}.tn-side-panel__overlay--initialized .tn-side-panel__panel{transition:transform .3s cubic-bezier(.4,0,.2,1)}.tn-side-panel__header{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--tn-lines, #383838)}.tn-side-panel__title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.5;color:var(--tn-fg1, #ffffff);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-side-panel__header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.tn-side-panel__content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--tn-content-padding, 24px);-webkit-overflow-scrolling:touch}.tn-side-panel__actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--tn-lines, #383838)}@media(max-width:640px){.tn-side-panel__panel{width:100vw!important}}@media(prefers-reduced-motion:reduce){.tn-side-panel__panel,.tn-side-panel__backdrop{transition-duration:0ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "ariaLabel", "name", "size", "color", "tooltip", "library"], outputs: ["onClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSidePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tn-side-panel', standalone: true, imports: [CommonModule, A11yModule, TnIconButtonComponent], host: {
+                        'class': 'tn-side-panel',
+                        '[attr.data-tn-panel]': 'panelId',
+                    }, template: "<!-- Overlay wrapper: portaled to document.body -->\n<div\n  #overlay\n  class=\"tn-side-panel__overlay\"\n  role=\"dialog\"\n  [attr.data-tn-panel]=\"panelId\"\n  [class.tn-side-panel__overlay--initialized]=\"initialized()\"\n  [class.tn-side-panel__overlay--open]=\"open()\"\n  [attr.aria-modal]=\"open() ? 'true' : null\"\n  [attr.aria-labelledby]=\"open() ? titleId : null\"\n  [attr.aria-hidden]=\"!open() ? 'true' : null\">\n\n  <!-- Backdrop -->\n  @if (hasBackdrop()) {\n    <div\n      class=\"tn-side-panel__backdrop\"\n      aria-hidden=\"true\"\n      (click)=\"onBackdropClick()\">\n    </div>\n  }\n\n  <!-- Panel -->\n  <div\n    class=\"tn-side-panel__panel\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n    [style.width]=\"width()\"\n    [cdkTrapFocusAutoCapture]=\"open()\"\n    (transitionend)=\"onTransitionEnd($event)\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Header -->\n    <header class=\"tn-side-panel__header\">\n      <h2 class=\"tn-side-panel__title\" [id]=\"titleId\">{{ title() }}</h2>\n      <div class=\"tn-side-panel__header-actions\">\n        <ng-content select=\"[tnSidePanelHeaderAction]\" />\n        <tn-icon-button\n          name=\"close\"\n          library=\"mdi\"\n          size=\"sm\"\n          ariaLabel=\"Dismiss\"\n          (onClick)=\"dismiss()\" />\n      </div>\n    </header>\n\n    <!-- Content -->\n    <section class=\"tn-side-panel__content\">\n      <ng-content />\n    </section>\n\n    <!-- Actions -->\n    @if (hasActions()) {\n      <footer class=\"tn-side-panel__actions\">\n        <ng-content select=\"[tnSidePanelAction]\" />\n      </footer>\n    }\n  </div>\n</div>\n", styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;z-index:1000;pointer-events:none}.tn-side-panel__overlay--open{pointer-events:auto}.tn-side-panel__overlay--open .tn-side-panel__backdrop{opacity:1}.tn-side-panel__overlay--open .tn-side-panel__panel{transform:translate(0)}.tn-side-panel__backdrop{position:absolute;inset:0;background:#00000080;opacity:0}.tn-side-panel__overlay--initialized .tn-side-panel__backdrop{transition:opacity .2s ease}.tn-side-panel__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:100vw;background:var(--tn-bg2, #282828);color:var(--tn-fg1, #ffffff);box-shadow:-4px 0 24px #0000004d;outline:none;transform:translate(100%)}.tn-side-panel__overlay--initialized .tn-side-panel__panel{transition:transform .3s cubic-bezier(.4,0,.2,1)}.tn-side-panel__header{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--tn-lines, #383838)}.tn-side-panel__title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.5;color:var(--tn-fg1, #ffffff);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-side-panel__header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.tn-side-panel__content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--tn-content-padding, 24px);-webkit-overflow-scrolling:touch}.tn-side-panel__actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--tn-lines, #383838)}@media(max-width:640px){.tn-side-panel__panel{width:100vw!important}}@media(prefers-reduced-motion:reduce){.tn-side-panel__panel,.tn-side-panel__backdrop{transition-duration:0ms!important}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { overlayRef: [{ type: i0.ViewChild, args: ['overlay', { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], actionContent: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnSidePanelActionDirective), { isSignal: true }] }] } });
+
+/**
+ * Harness for interacting with `TnSidePanelComponent` in tests.
+ *
+ * @example
+ * ```typescript
+ * const panel = await loader.getHarness(TnSidePanelHarness);
+ * expect(await panel.isOpen()).toBe(true);
+ * expect(await panel.getTitle()).toBe('Edit User');
+ * await panel.dismiss();
+ * ```
+ */
+class TnSidePanelHarness extends ComponentHarness {
+    static hostSelector = 'tn-side-panel';
+    static with(options = {}) {
+        return new HarnessPredicate(TnSidePanelHarness, options)
+            .addOption('title', options.title, (harness, title) => HarnessPredicate.stringMatches(harness.getTitle(), title));
+    }
+    /**
+     * Locate the overlay wrapper, which may be portaled to document.body.
+     * Uses the data-tn-panel attribute to correlate the host with its overlay.
+     */
+    async getOverlay() {
+        const host = await this.host();
+        const panelId = await host.getAttribute('data-tn-panel');
+        return this.documentRootLocatorFactory().locatorFor(`[data-tn-panel="${panelId}"].tn-side-panel__overlay`)();
+    }
+    /** Get the panel title text. */
+    async getTitle() {
+        const host = await this.host();
+        const panelId = await host.getAttribute('data-tn-panel');
+        const titleEl = await this.documentRootLocatorFactory().locatorFor(`[data-tn-panel="${panelId}"] .tn-side-panel__title`)();
+        return (await titleEl.text()).trim();
+    }
+    /** Whether the panel is currently open. */
+    async isOpen() {
+        const overlay = await this.getOverlay();
+        return overlay.hasClass('tn-side-panel__overlay--open');
+    }
+    /** Click the dismiss button to close the panel. */
+    async dismiss() {
+        const host = await this.host();
+        const panelId = await host.getAttribute('data-tn-panel');
+        const button = await this.documentRootLocatorFactory().locatorFor(`[data-tn-panel="${panelId}"] .tn-side-panel__header-actions tn-icon-button`)();
+        await button.click();
+    }
+    /** Get the text content of the scrollable body area. */
+    async getContentText() {
+        const host = await this.host();
+        const panelId = await host.getAttribute('data-tn-panel');
+        const content = await this.documentRootLocatorFactory().locatorFor(`[data-tn-panel="${panelId}"] .tn-side-panel__content`)();
+        return (await content.text()).trim();
+    }
+}
+
 class TnStepComponent {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : []));
@@ -9309,5 +9505,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, 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 { 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, 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