@truenas/ui-components 0.1.61 → 0.1.62

package/fesm2022/truenas-ui-components.mjs

@@ -11,7 +11,7 @@ import { mdiCheckCircle, mdiAlertCircle, mdiAlert, mdiInformation, mdiDotsVertic
 import * as i1$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient } from '@angular/common/http';
-import { firstValueFrom, BehaviorSubject, merge, Subject } from 'rxjs';
+import { firstValueFrom, BehaviorSubject, merge, Subject, take } from 'rxjs';
 import { RouterLink } from '@angular/router';
 import { Overlay, OverlayPositionBuilder, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
@@ -25,6 +25,7 @@ import { CdkTree, CdkTreeModule, CdkTreeNode, CDK_TREE_NODE_OUTLET_NODE, CdkTree
 export { FlatTreeControl } from '@angular/cdk/tree';
 import { map } from 'rxjs/operators';
 import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 
 /**
@@ -12312,6 +12313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 class TnSidePanelComponent {
     iconRegistry = inject(TnIconRegistryService);
     document = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
     overlayRef = viewChild.required('overlay');
     initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
     // Two-way bindable via [(open)]
@@ -12322,6 +12324,14 @@ class TnSidePanelComponent {
     hasBackdrop = input(true, ...(ngDevMode ? [{ debugName: "hasBackdrop" }] : []));
     closeOnBackdropClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : []));
     closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : []));
+    /**
+     * Optional gate evaluated before a user-initiated close (× button, backdrop click,
+     * or Escape). Return an observable resolving to `false` to veto the close — e.g. to
+     * prompt about unsaved changes and keep the panel open if the user cancels. The
+     * observable is expected to emit once. Programmatic `open` changes made by the host
+     * bypass this guard; when unset, the panel closes immediately.
+     */
+    closeGuard = input(undefined, ...(ngDevMode ? [{ debugName: "closeGuard" }] : []));
     /**
      * Test-id applied to the panel's root overlay element. Rendered under whichever attribute
      * name is configured via `TN_TEST_ATTR` (default `data-testid`).
@@ -12358,7 +12368,18 @@ class TnSidePanelComponent {
         this.overlayRef().nativeElement.remove();
     }
     dismiss() {
-        this.open.set(false);
+        const guard = this.closeGuard();
+        if (!guard) {
+            this.open.set(false);
+            return;
+        }
+        guard()
+            .pipe(take(1), takeUntilDestroyed(this.destroyRef))
+            .subscribe((canClose) => {
+            if (canClose) {
+                this.open.set(false);
+            }
+        });
     }
     onBackdropClick() {
         if (this.closeOnBackdropClick()) {
@@ -12405,7 +12426,7 @@ class TnSidePanelComponent {
         });
     }
     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 }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonTestId: { classPropertyName: "closeButtonTestId", publicName: "closeButtonTestId", 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  [tnTestId]=\"testId()\"\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          [testId]=\"closeButtonTestId()\"\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.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "dense", "ariaLabel", "ariaExpanded", "testId", "name", "size", "color", "tooltip", "tooltipPosition", "library", "iconClass"], outputs: ["onClick"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId"] }] });
+    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 }, closeGuard: { classPropertyName: "closeGuard", publicName: "closeGuard", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonTestId: { classPropertyName: "closeButtonTestId", publicName: "closeButtonTestId", 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  [tnTestId]=\"testId()\"\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          [testId]=\"closeButtonTestId()\"\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.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "dense", "ariaLabel", "ariaExpanded", "testId", "name", "size", "color", "tooltip", "tooltipPosition", "library", "iconClass"], outputs: ["onClick"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSidePanelComponent, decorators: [{
             type: Component,
@@ -12413,7 +12434,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         '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  [tnTestId]=\"testId()\"\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          [testId]=\"closeButtonTestId()\"\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 }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], closeButtonTestId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonTestId", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], actionContent: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnSidePanelActionDirective), { isSignal: true }] }] } });
+        }], 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 }] }], closeGuard: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeGuard", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], closeButtonTestId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonTestId", 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.