@truenas/ui-components 0.3.19 → 0.3.21

package/fesm2022/truenas-ui-components.mjs

@@ -1,19 +1,19 @@
 import { Overlay, OverlayPositionBuilder, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, Injector, InjectionToken, Renderer2, ElementRef, effect, Directive, ViewContainerRef, output, viewChild, signal, untracked, isDevMode, forwardRef, model, afterNextRender, Injectable, contentChildren, Pipe, HostListener, linkedSignal, contentChild, TemplateRef, ChangeDetectorRef, DestroyRef, isSignal, IterableDiffers, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, Injector, InjectionToken, Renderer2, ElementRef, effect, Directive, ViewContainerRef, output, viewChild, signal, untracked, isDevMode, forwardRef, model, afterNextRender, Injectable, contentChildren, Pipe, HostListener, linkedSignal, contentChild, TemplateRef, ChangeDetectorRef, DestroyRef, isSignal, IterableDiffers, booleanAttribute, ApplicationRef, EnvironmentInjector, createComponent, PLATFORM_ID } from '@angular/core';
 import * as i1$3 from '@angular/forms';
 import { NgControl, NG_VALUE_ACCESSOR, FormsModule, Validators } from '@angular/forms';
 import { ComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';
 import * as i1 from '@angular/cdk/a11y';
 import { A11yModule, FocusMonitor } from '@angular/cdk/a11y';
 import * as i1$2 from '@angular/common';
-import { DOCUMENT, NgTemplateOutlet, CommonModule, isPlatformBrowser } from '@angular/common';
+import { DOCUMENT, NgTemplateOutlet, CommonModule, AsyncPipe, isPlatformBrowser } from '@angular/common';
 import { mdiCheckCircle, mdiAlertCircle, mdiAlert, mdiInformation, mdiOpenInNew, mdiHelpCircle, mdiDotsVertical, mdiClose, mdiFolderOpen, mdiLock, mdiLoading, mdiFolderPlus, mdiFolderNetwork, mdiHarddisk, mdiDatabase, mdiFile, mdiFolder } from '@mdi/js';
 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, take } from 'rxjs';
+import { firstValueFrom, BehaviorSubject, merge, animationFrameScheduler, asapScheduler, Subject, take } from 'rxjs';
 import { RouterLink } from '@angular/router';
 import { filesize } from 'filesize';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
@@ -23,11 +23,11 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { SelectionModel, DataSource } from '@angular/cdk/collections';
 import * as i2 from '@angular/cdk/tree';
-import { CdkTree, CdkTreeModule, CdkTreeNode, CDK_TREE_NODE_OUTLET_NODE, CdkTreeNodeOutlet, CdkNestedTreeNode } from '@angular/cdk/tree';
+import { CdkTree, CdkTreeModule, CdkTreeNode, CDK_TREE_NODE_OUTLET_NODE, CdkTreeNodeOutlet, CdkNestedTreeNode, CdkTreeNodeOutletContext } from '@angular/cdk/tree';
 export { FlatTreeControl } from '@angular/cdk/tree';
-import { map } from 'rxjs/operators';
+import { map, auditTime } from 'rxjs/operators';
+import { CdkVirtualScrollViewport, CdkVirtualScrollableWindow, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
 import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
-import { ScrollingModule } from '@angular/cdk/scrolling';
 
 class TnSpinnerComponent {
     mode = input('indeterminate', ...(ngDevMode ? [{ debugName: "mode" }] : []));
@@ -2199,7 +2199,11 @@ class TnBannerHarness extends ComponentHarness {
      */
     static with(options = {}) {
         return new HarnessPredicate(TnBannerHarness, options)
-            .addOption('textContains', options.textContains, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text));
+            .addOption('textContains', options.textContains, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), 
+        // strings trigger exact matching in `stringMatches`, but since we call the option
+        // `textContains`, this would be misleading. here, we convert strings to a Regex
+        // to trigger partial matching behavior on `stringMatches`.
+        typeof text === 'string' ? new RegExp(helperEscapeRegex(text)) : text));
     }
     /**
      * Gets all text content from the banner (heading + message combined).
@@ -2218,6 +2222,15 @@ class TnBannerHarness extends ComponentHarness {
         return (await host.text()).trim();
     }
 }
+/**
+ * helper function to stand-in for `RegExp.escape`, since that doesn't
+ * exist in our deployment target of ES2023.
+ * @param text a string to escape.
+ * @returns an escaped string, safe for using in the `RegExp` constructor.
+ */
+function helperEscapeRegex(text) {
+    return text.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');
+}
 
 const escapableChars = new Set(['*', '`', '\\']);
 function isWhitespace(char) {
@@ -8716,6 +8729,16 @@ class TnSelectComponent {
     /** Label of the empty option rendered when `allowEmpty` is set. */
     emptyLabel = input('--', ...(ngDevMode ? [{ debugName: "emptyLabel" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * When `true` (multiple mode only), renders a "select all" row at the top of
+     * the dropdown that toggles every selectable (non-disabled) option on/off in
+     * one click. Mirrors webui ix-select's `[showSelectAll]`. Ignored in single
+     * mode. Its checkbox reflects the aggregate state: checked when all are
+     * selected, indeterminate when only some are.
+     */
+    showSelectAll = input(false, ...(ngDevMode ? [{ debugName: "showSelectAll" }] : []));
+    /** Label of the select-all row rendered when `showSelectAll` is set. */
+    selectAllLabel = input('Select All', ...(ngDevMode ? [{ debugName: "selectAllLabel" }] : []));
     testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
     /** Test-id base, falling back to the bound control name when `testId` is unset. */
     resolvedTestId = controlTestId(this.testId);
@@ -8803,18 +8826,23 @@ class TnSelectComponent {
      */
     navigableOptions = computed(() => {
         const result = [];
+        // The select-all row is the first navigable entry when shown, so
+        // ArrowDown from the closed trigger lands on it before the options.
+        if (this.showSelectAllRow()) {
+            result.push({ kind: 'select-all', id: this.selectAllId() });
+        }
         const baseId = `tn-select-opt-${this.idNamespace()}`;
         let i = 0;
         for (const opt of this.displayOptions()) {
             if (!opt.disabled) {
-                result.push({ option: opt, id: `${baseId}-${i}` });
+                result.push({ kind: 'option', option: opt, id: `${baseId}-${i}` });
             }
             i++;
         }
         for (const group of this.optionGroups()) {
             for (const opt of group.options) {
                 if (!opt.disabled && !group.disabled) {
-                    result.push({ option: opt, id: `${baseId}-${i}` });
+                    result.push({ kind: 'option', option: opt, id: `${baseId}-${i}` });
                 }
                 i++;
             }
@@ -8829,14 +8857,15 @@ class TnSelectComponent {
     }, ...(ngDevMode ? [{ debugName: "focusedOptionId" }] : []));
     /** Stable DOM id for an option; matches what navigableOptions() assigns. */
     optionId(option) {
-        const entry = this.navigableOptions().find((x) => x.option === option);
+        const entry = this.navigableOptions().find((x) => x.kind === 'option' && x.option === option);
         return entry?.id ?? null;
     }
     /** Whether `option` is the keyboard-highlighted item. */
     isOptionFocused(option) {
         const idx = this.focusedIndex();
         const nav = this.navigableOptions();
-        return idx >= 0 && idx < nav.length && nav[idx].option === option;
+        const entry = idx >= 0 && idx < nav.length ? nav[idx] : null;
+        return entry?.kind === 'option' && entry.option === option;
     }
     /**
      * Test-id segments for an option row, consumed by `[tnTestId]` with
@@ -8921,7 +8950,7 @@ class TnSelectComponent {
         // otherwise leave it unset so the next ArrowDown lands on the first item.
         const selected = this.selectedValue();
         if (selected !== null && selected !== undefined) {
-            const idx = this.navigableOptions().findIndex((x) => this.compareValues(x.option.value, selected));
+            const idx = this.navigableOptions().findIndex((x) => x.kind === 'option' && this.compareValues(x.option.value, selected));
             this.focusedIndex.set(idx);
         }
         else if (this.emptyOption()) {
@@ -9118,6 +9147,92 @@ class TnSelectComponent {
     hasAnyOptions = computed(() => {
         return this.options().length > 0 || this.optionGroups().length > 0;
     }, ...(ngDevMode ? [{ debugName: "hasAnyOptions" }] : []));
+    /**
+     * Values of every selectable (non-disabled) option, across ungrouped options
+     * and enabled groups. This is the set the select-all row operates on —
+     * disabled options and options in disabled groups are excluded because they
+     * can't be toggled individually either.
+     *
+     * Values are deduped with `compareValues` so a value that appears both
+     * ungrouped and inside a group isn't pushed twice — that would make
+     * select-all diverge from `toggleOption()`, which never produces duplicates.
+     */
+    selectableValues = computed(() => {
+        const values = [];
+        const push = (value) => {
+            if (!values.some((v) => this.compareValues(v, value))) {
+                values.push(value);
+            }
+        };
+        for (const opt of this.options()) {
+            if (!opt.disabled) {
+                push(opt.value);
+            }
+        }
+        for (const group of this.optionGroups()) {
+            if (group.disabled) {
+                continue;
+            }
+            for (const opt of group.options) {
+                if (!opt.disabled) {
+                    push(opt.value);
+                }
+            }
+        }
+        return values;
+    }, ...(ngDevMode ? [{ debugName: "selectableValues" }] : []));
+    /** Whether the select-all row is shown (multiple mode, opted in, with options). */
+    showSelectAllRow = computed(() => this.multiple() && this.showSelectAll() && this.selectableValues().length > 0, ...(ngDevMode ? [{ debugName: "showSelectAllRow" }] : []));
+    /** Stable DOM id of the select-all row, for aria-activedescendant. */
+    selectAllId = computed(() => `tn-select-selectall-${this.idNamespace()}`, ...(ngDevMode ? [{ debugName: "selectAllId" }] : []));
+    /** True when every selectable option is currently selected. */
+    allSelected = computed(() => {
+        const selectable = this.selectableValues();
+        if (selectable.length === 0) {
+            return false;
+        }
+        const selected = this.selectedValues();
+        return selectable.every((v) => selected.some((s) => this.compareValues(s, v)));
+    }, ...(ngDevMode ? [{ debugName: "allSelected" }] : []));
+    /** True when some — but not all — selectable options are selected. */
+    selectAllIndeterminate = computed(() => {
+        if (this.allSelected()) {
+            return false;
+        }
+        const selected = this.selectedValues();
+        return this.selectableValues().some((v) => selected.some((s) => this.compareValues(s, v)));
+    }, ...(ngDevMode ? [{ debugName: "selectAllIndeterminate" }] : []));
+    /** Test-id segments for the select-all row; mirrors ix-select's `[name, 'select-all']`. */
+    selectAllTestIdParts() {
+        return scopeTestId(this.resolvedTestId(), 'select-all');
+    }
+    /**
+     * Toggles every selectable option: clears them all when they're all already
+     * selected, otherwise selects them all. Preserves the multi-select "open"
+     * behaviour — the dropdown stays open so the user can keep adjusting.
+     *
+     * Disabled-but-selected values (e.g. a disabled option pre-selected via
+     * `writeValue`) are preserved on both paths: the user can't toggle those
+     * rows individually, so select-all must not silently discard them either.
+     */
+    toggleSelectAll() {
+        if (this.isDisabled()) {
+            return;
+        }
+        const selectable = this.selectableValues();
+        const preserved = this.selectedValues().filter((v) => !selectable.some((s) => this.compareValues(s, v)));
+        const updated = this.allSelected() ? preserved : [...preserved, ...selectable];
+        this.selectedValues.set(updated);
+        this.onChange(updated);
+        this.multiSelectionChange.emit(updated);
+        this.cdr.markForCheck();
+    }
+    /** Whether the select-all row is the keyboard-highlighted item. */
+    isSelectAllFocused() {
+        const idx = this.focusedIndex();
+        const nav = this.navigableOptions();
+        return idx >= 0 && idx < nav.length && nav[idx].kind === 'select-all';
+    }
     /** One-shot guard so the object-compare warning fires at most once per instance. */
     warnedAboutObjectCompare = false;
     /**
@@ -9261,7 +9376,13 @@ class TnSelectComponent {
         if (idx < 0 || idx >= nav.length) {
             return;
         }
-        this.onOptionClick(nav[idx].option);
+        const entry = nav[idx];
+        if (entry.kind === 'select-all') {
+            this.toggleSelectAll();
+        }
+        else {
+            this.onOptionClick(entry.option);
+        }
     }
     scrollFocusedIntoView() {
         const id = this.focusedOptionId();
@@ -9284,13 +9405,13 @@ class TnSelectComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnSelectComponent, isStandalone: true, selector: "tn-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionGroups: { classPropertyName: "optionGroups", publicName: "optionGroups", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, noOptionsLabel: { classPropertyName: "noOptionsLabel", publicName: "noOptionsLabel", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, optionTestIdKey: { classPropertyName: "optionTestIdKey", publicName: "optionTestIdKey", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", multiSelectionChange: "multiSelectionChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnSelectComponent, isStandalone: true, selector: "tn-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionGroups: { classPropertyName: "optionGroups", publicName: "optionGroups", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, noOptionsLabel: { classPropertyName: "noOptionsLabel", publicName: "noOptionsLabel", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, optionTestIdKey: { classPropertyName: "optionTestIdKey", publicName: "optionTestIdKey", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", multiSelectionChange: "multiSelectionChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TnSelectComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-select-container\">\n  <!-- Select Trigger -->\n  <div\n    #triggerEl\n    class=\"tn-select-trigger\"\n    role=\"combobox\"\n    tnTestIdType=\"select\"\n    [tnTestId]=\"resolvedTestId()\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [class.disabled]=\"isDisabled()\"\n    [class.open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"isOpen() ? 'tn-select-dropdown-' + idNamespace() : null\"\n    [attr.aria-label]=\"ariaLabel() ?? placeholder()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-activedescendant]=\"isOpen() ? focusedOptionId() : null\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Display Text -->\n    <span\n      class=\"tn-select-text\"\n      [class.placeholder]=\"multiple() ? selectedValues().length === 0 : (selectedValue() === null || selectedValue() === undefined)\">\n      {{ displayText() }}\n    </span>\n\n    <!-- Dropdown Arrow -->\n    <div class=\"tn-select-arrow\" [class.open]=\"isOpen()\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <polyline points=\"6,9 12,15 18,9\" />\n      </svg>\n    </div>\n  </div>\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. The trigger keeps DOM focus throughout (combobox\n     pattern); options use aria-activedescendant for virtual focus. -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-select-dropdown\"\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"multiple()\"\n    [attr.id]=\"'tn-select-dropdown-' + idNamespace()\">\n\n    <!-- Options List -->\n    <div class=\"tn-select-options\">\n      <!-- Regular Options (preceded by the synthetic empty option when allowEmpty is set) -->\n      @for (option of displayOptions(); track $index) {\n        <!-- Option activation lives on the trigger via aria-activedescendant; options have tabindex=\"-1\" and never receive DOM focus. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n        <div\n          class=\"tn-select-option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          tnTestIdType=\"option\"\n          [class.tn-select-empty-option]=\"isEmptyOption(option)\"\n          [tnTestId]=\"optionTestIdParts(option)\"\n          [attr.id]=\"optionId(option)\"\n          [class.selected]=\"isOptionSelected(option)\"\n          [class.focused]=\"isOptionFocused(option)\"\n          [class.disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"isOptionSelected(option)\"\n          [attr.aria-disabled]=\"option.disabled\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onOptionClick(option)\">\n          @if (multiple()) {\n            <tn-checkbox\n              class=\"tn-select-check\"\n              label=\"\"\n              [checked]=\"isOptionSelected(option)\"\n              [disabled]=\"true\"\n              [hideLabel]=\"true\" />\n          }\n          {{ option.label }}\n        </div>\n      }\n\n      <!-- Option Groups -->\n      @for (group of optionGroups(); track $index; let isFirst = $first) {\n        <!-- Group Separator (not shown before first group if we have regular options) -->\n        @if (!isFirst || displayOptions().length > 0) {\n          <div\n            class=\"tn-select-separator\"\n            role=\"separator\">\n          </div>\n        }\n\n        <div role=\"group\" [attr.aria-labelledby]=\"'tn-select-group-' + idNamespace() + '-' + $index\">\n          <!-- Group Label -->\n          <div\n            class=\"tn-select-group-label\"\n            [attr.id]=\"'tn-select-group-' + idNamespace() + '-' + $index\"\n            [class.disabled]=\"group.disabled\">\n            {{ group.label }}\n          </div>\n\n          <!-- Group Options -->\n          @for (option of group.options; track $index) {\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n            <div\n              class=\"tn-select-option\"\n              role=\"option\"\n              tabindex=\"-1\"\n              tnTestIdType=\"option\"\n              [tnTestId]=\"optionTestIdParts(option)\"\n              [attr.id]=\"optionId(option)\"\n              [class.selected]=\"isOptionSelected(option)\"\n              [class.focused]=\"isOptionFocused(option)\"\n              [class.disabled]=\"option.disabled || group.disabled\"\n              [attr.aria-selected]=\"isOptionSelected(option)\"\n              [attr.aria-disabled]=\"option.disabled || group.disabled\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onOptionClick(option, !!group.disabled)\">\n              @if (multiple()) {\n                <tn-checkbox\n                  class=\"tn-select-check\"\n                  label=\"\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"true\"\n                  [hideLabel]=\"true\" />\n              }\n              {{ option.label }}\n            </div>\n          }\n        </div>\n      }\n\n      <!-- No Options Message -->\n      @if (!hasAnyOptions()) {\n        <div class=\"tn-select-no-options\">\n          {{ noOptionsLabel() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-select-container{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-select-label{display:block;margin-bottom:.5rem;font-size:1rem;font-weight:500;color:var(--tn-fg1, #333);line-height:1.4}.tn-select-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-select-trigger{position:relative;display:flex;align-items:center;min-height:2.5rem;padding:.5rem 2.5rem .5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:pointer;transition:all .15s ease-in-out;outline:none;box-sizing:border-box}.tn-select-trigger:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-select-trigger:focus-visible{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-select-trigger.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-select-trigger.error{border-color:var(--tn-error, #dc3545)}.tn-select-trigger.error:focus-visible,.tn-select-trigger.error.open{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-error, #dc3545) 25%,transparent)}.tn-select-trigger.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tn-fg1, #212529)}.tn-select-text.placeholder{color:var(--tn-alt-fg1, #999)}.tn-select-arrow{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--tn-fg2, #6c757d);transition:transform .15s ease-in-out;pointer-events:none}.tn-select-arrow.open{transform:translateY(-50%) rotate(180deg)}.tn-select-arrow svg{display:block}.tn-select-dropdown{--tn-select-dropdown-max-height: 350px;background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:var(--tn-select-dropdown-max-height)}.tn-select-options{overflow-y:auto;padding:.25rem 0;max-height:var(--tn-select-dropdown-max-height)}.tn-select-option{display:flex;align-items:center;padding:.5rem .75rem;overflow-wrap:anywhere;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out;pointer-events:auto;position:relative;z-index:1001}.tn-select-option.selected{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg1, #212529)}.tn-select-option:hover:not(.disabled):not(.focused){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-select-option.focused{background-color:var(--tn-alt-bg2, #e8f4fd);box-shadow:inset 2px 0 0 var(--tn-primary, #007bff)}.tn-select-option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-option.tn-select-empty-option{color:var(--tn-fg2, #6c757d)}.tn-select-check{margin-right:.5rem;flex-shrink:0;pointer-events:none}.tn-select-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:.25rem 0}.tn-select-group-label{padding:.375rem .75rem;font-size:.75rem;font-weight:600;color:var(--tn-alt-fg1, #9ca3af);text-transform:uppercase;letter-spacing:.05em;cursor:default;-webkit-user-select:none;user-select:none}.tn-select-group-label.disabled{opacity:.6}.tn-select-no-options{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}.tn-select-error{margin-top:.25rem;font-size:.75rem;color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-select-trigger,.tn-select-option,.tn-select-arrow{transition:none}}@media(prefers-contrast:high){.tn-select-trigger{border-width:2px}.tn-select-option.selected{outline:2px solid var(--tn-fg1, #000);outline-offset:-2px}}\n"], dependencies: [{ kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-select-container\">\n  <!-- Select Trigger -->\n  <div\n    #triggerEl\n    class=\"tn-select-trigger\"\n    role=\"combobox\"\n    tnTestIdType=\"select\"\n    [tnTestId]=\"resolvedTestId()\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [class.disabled]=\"isDisabled()\"\n    [class.open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"isOpen() ? 'tn-select-dropdown-' + idNamespace() : null\"\n    [attr.aria-label]=\"ariaLabel() ?? placeholder()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-activedescendant]=\"isOpen() ? focusedOptionId() : null\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Display Text -->\n    <span\n      class=\"tn-select-text\"\n      [class.placeholder]=\"multiple() ? selectedValues().length === 0 : (selectedValue() === null || selectedValue() === undefined)\">\n      {{ displayText() }}\n    </span>\n\n    <!-- Dropdown Arrow -->\n    <div class=\"tn-select-arrow\" [class.open]=\"isOpen()\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <polyline points=\"6,9 12,15 18,9\" />\n      </svg>\n    </div>\n  </div>\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. The trigger keeps DOM focus throughout (combobox\n     pattern); options use aria-activedescendant for virtual focus. -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-select-dropdown\"\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"multiple()\"\n    [attr.id]=\"'tn-select-dropdown-' + idNamespace()\">\n\n    <!-- Options List -->\n    <div class=\"tn-select-options\">\n      <!-- Select-all row (multiple mode with showSelectAll). Toggles every\n           selectable option; its checkbox reflects all/some/none. -->\n      @if (showSelectAllRow()) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n        <div\n          class=\"tn-select-option tn-select-select-all\"\n          role=\"option\"\n          tabindex=\"-1\"\n          tnTestIdType=\"option\"\n          [tnTestId]=\"selectAllTestIdParts()\"\n          [attr.id]=\"selectAllId()\"\n          [class.selected]=\"allSelected()\"\n          [class.focused]=\"isSelectAllFocused()\"\n          [attr.aria-selected]=\"allSelected()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"toggleSelectAll()\">\n          <tn-checkbox\n            class=\"tn-select-check\"\n            label=\"\"\n            [checked]=\"allSelected()\"\n            [indeterminate]=\"selectAllIndeterminate()\"\n            [disabled]=\"true\"\n            [hideLabel]=\"true\" />\n          {{ selectAllLabel() }}\n        </div>\n        <div class=\"tn-select-separator\" role=\"separator\"></div>\n      }\n\n      <!-- Regular Options (preceded by the synthetic empty option when allowEmpty is set) -->\n      @for (option of displayOptions(); track $index) {\n        <!-- Option activation lives on the trigger via aria-activedescendant; options have tabindex=\"-1\" and never receive DOM focus. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n        <div\n          class=\"tn-select-option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          tnTestIdType=\"option\"\n          [class.tn-select-empty-option]=\"isEmptyOption(option)\"\n          [tnTestId]=\"optionTestIdParts(option)\"\n          [attr.id]=\"optionId(option)\"\n          [class.selected]=\"isOptionSelected(option)\"\n          [class.focused]=\"isOptionFocused(option)\"\n          [class.disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"isOptionSelected(option)\"\n          [attr.aria-disabled]=\"option.disabled\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onOptionClick(option)\">\n          @if (multiple()) {\n            <tn-checkbox\n              class=\"tn-select-check\"\n              label=\"\"\n              [checked]=\"isOptionSelected(option)\"\n              [disabled]=\"true\"\n              [hideLabel]=\"true\" />\n          }\n          {{ option.label }}\n        </div>\n      }\n\n      <!-- Option Groups -->\n      @for (group of optionGroups(); track $index; let isFirst = $first) {\n        <!-- Group Separator (not shown before first group if we have regular options) -->\n        @if (!isFirst || displayOptions().length > 0) {\n          <div\n            class=\"tn-select-separator\"\n            role=\"separator\">\n          </div>\n        }\n\n        <div role=\"group\" [attr.aria-labelledby]=\"'tn-select-group-' + idNamespace() + '-' + $index\">\n          <!-- Group Label -->\n          <div\n            class=\"tn-select-group-label\"\n            [attr.id]=\"'tn-select-group-' + idNamespace() + '-' + $index\"\n            [class.disabled]=\"group.disabled\">\n            {{ group.label }}\n          </div>\n\n          <!-- Group Options -->\n          @for (option of group.options; track $index) {\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n            <div\n              class=\"tn-select-option\"\n              role=\"option\"\n              tabindex=\"-1\"\n              tnTestIdType=\"option\"\n              [tnTestId]=\"optionTestIdParts(option)\"\n              [attr.id]=\"optionId(option)\"\n              [class.selected]=\"isOptionSelected(option)\"\n              [class.focused]=\"isOptionFocused(option)\"\n              [class.disabled]=\"option.disabled || group.disabled\"\n              [attr.aria-selected]=\"isOptionSelected(option)\"\n              [attr.aria-disabled]=\"option.disabled || group.disabled\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onOptionClick(option, !!group.disabled)\">\n              @if (multiple()) {\n                <tn-checkbox\n                  class=\"tn-select-check\"\n                  label=\"\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"true\"\n                  [hideLabel]=\"true\" />\n              }\n              {{ option.label }}\n            </div>\n          }\n        </div>\n      }\n\n      <!-- No Options Message -->\n      @if (!hasAnyOptions()) {\n        <div class=\"tn-select-no-options\">\n          {{ noOptionsLabel() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-select-container{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-select-label{display:block;margin-bottom:.5rem;font-size:1rem;font-weight:500;color:var(--tn-fg1, #333);line-height:1.4}.tn-select-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-select-trigger{position:relative;display:flex;align-items:center;min-height:2.5rem;padding:.5rem 2.5rem .5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:pointer;transition:all .15s ease-in-out;outline:none;box-sizing:border-box}.tn-select-trigger:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-select-trigger:focus-visible{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-select-trigger.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-select-trigger.error{border-color:var(--tn-error, #dc3545)}.tn-select-trigger.error:focus-visible,.tn-select-trigger.error.open{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-error, #dc3545) 25%,transparent)}.tn-select-trigger.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tn-fg1, #212529)}.tn-select-text.placeholder{color:var(--tn-alt-fg1, #999)}.tn-select-arrow{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--tn-fg2, #6c757d);transition:transform .15s ease-in-out;pointer-events:none}.tn-select-arrow.open{transform:translateY(-50%) rotate(180deg)}.tn-select-arrow svg{display:block}.tn-select-dropdown{--tn-select-dropdown-max-height: 350px;background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:var(--tn-select-dropdown-max-height)}.tn-select-options{overflow-y:auto;padding:.25rem 0;max-height:var(--tn-select-dropdown-max-height)}.tn-select-option{display:flex;align-items:center;padding:.5rem .75rem;overflow-wrap:anywhere;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out;pointer-events:auto;position:relative;z-index:1001}.tn-select-option.selected{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg1, #212529)}.tn-select-option:hover:not(.disabled):not(.focused){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-select-option.focused{background-color:var(--tn-alt-bg2, #e8f4fd);box-shadow:inset 2px 0 0 var(--tn-primary, #007bff)}.tn-select-option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-option.tn-select-empty-option{color:var(--tn-fg2, #6c757d)}.tn-select-select-all{font-weight:600}.tn-select-check{margin-right:.5rem;flex-shrink:0;pointer-events:none}.tn-select-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:.25rem 0}.tn-select-group-label{padding:.375rem .75rem;font-size:.75rem;font-weight:600;color:var(--tn-alt-fg1, #9ca3af);text-transform:uppercase;letter-spacing:.05em;cursor:default;-webkit-user-select:none;user-select:none}.tn-select-group-label.disabled{opacity:.6}.tn-select-no-options{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}.tn-select-error{margin-top:.25rem;font-size:.75rem;color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-select-trigger,.tn-select-option,.tn-select-arrow{transition:none}}@media(prefers-contrast:high){.tn-select-trigger{border-width:2px}.tn-select-option.selected{outline:2px solid var(--tn-fg1, #000);outline-offset:-2px}}\n"], dependencies: [{ kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSelectComponent, decorators: [{
             type: Component,
@@ -9300,8 +9421,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                             useExisting: forwardRef(() => TnSelectComponent),
                             multi: true
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tn-select-container\">\n  <!-- Select Trigger -->\n  <div\n    #triggerEl\n    class=\"tn-select-trigger\"\n    role=\"combobox\"\n    tnTestIdType=\"select\"\n    [tnTestId]=\"resolvedTestId()\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [class.disabled]=\"isDisabled()\"\n    [class.open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"isOpen() ? 'tn-select-dropdown-' + idNamespace() : null\"\n    [attr.aria-label]=\"ariaLabel() ?? placeholder()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-activedescendant]=\"isOpen() ? focusedOptionId() : null\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Display Text -->\n    <span\n      class=\"tn-select-text\"\n      [class.placeholder]=\"multiple() ? selectedValues().length === 0 : (selectedValue() === null || selectedValue() === undefined)\">\n      {{ displayText() }}\n    </span>\n\n    <!-- Dropdown Arrow -->\n    <div class=\"tn-select-arrow\" [class.open]=\"isOpen()\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <polyline points=\"6,9 12,15 18,9\" />\n      </svg>\n    </div>\n  </div>\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. The trigger keeps DOM focus throughout (combobox\n     pattern); options use aria-activedescendant for virtual focus. -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-select-dropdown\"\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"multiple()\"\n    [attr.id]=\"'tn-select-dropdown-' + idNamespace()\">\n\n    <!-- Options List -->\n    <div class=\"tn-select-options\">\n      <!-- Regular Options (preceded by the synthetic empty option when allowEmpty is set) -->\n      @for (option of displayOptions(); track $index) {\n        <!-- Option activation lives on the trigger via aria-activedescendant; options have tabindex=\"-1\" and never receive DOM focus. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n        <div\n          class=\"tn-select-option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          tnTestIdType=\"option\"\n          [class.tn-select-empty-option]=\"isEmptyOption(option)\"\n          [tnTestId]=\"optionTestIdParts(option)\"\n          [attr.id]=\"optionId(option)\"\n          [class.selected]=\"isOptionSelected(option)\"\n          [class.focused]=\"isOptionFocused(option)\"\n          [class.disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"isOptionSelected(option)\"\n          [attr.aria-disabled]=\"option.disabled\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onOptionClick(option)\">\n          @if (multiple()) {\n            <tn-checkbox\n              class=\"tn-select-check\"\n              label=\"\"\n              [checked]=\"isOptionSelected(option)\"\n              [disabled]=\"true\"\n              [hideLabel]=\"true\" />\n          }\n          {{ option.label }}\n        </div>\n      }\n\n      <!-- Option Groups -->\n      @for (group of optionGroups(); track $index; let isFirst = $first) {\n        <!-- Group Separator (not shown before first group if we have regular options) -->\n        @if (!isFirst || displayOptions().length > 0) {\n          <div\n            class=\"tn-select-separator\"\n            role=\"separator\">\n          </div>\n        }\n\n        <div role=\"group\" [attr.aria-labelledby]=\"'tn-select-group-' + idNamespace() + '-' + $index\">\n          <!-- Group Label -->\n          <div\n            class=\"tn-select-group-label\"\n            [attr.id]=\"'tn-select-group-' + idNamespace() + '-' + $index\"\n            [class.disabled]=\"group.disabled\">\n            {{ group.label }}\n          </div>\n\n          <!-- Group Options -->\n          @for (option of group.options; track $index) {\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n            <div\n              class=\"tn-select-option\"\n              role=\"option\"\n              tabindex=\"-1\"\n              tnTestIdType=\"option\"\n              [tnTestId]=\"optionTestIdParts(option)\"\n              [attr.id]=\"optionId(option)\"\n              [class.selected]=\"isOptionSelected(option)\"\n              [class.focused]=\"isOptionFocused(option)\"\n              [class.disabled]=\"option.disabled || group.disabled\"\n              [attr.aria-selected]=\"isOptionSelected(option)\"\n              [attr.aria-disabled]=\"option.disabled || group.disabled\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onOptionClick(option, !!group.disabled)\">\n              @if (multiple()) {\n                <tn-checkbox\n                  class=\"tn-select-check\"\n                  label=\"\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"true\"\n                  [hideLabel]=\"true\" />\n              }\n              {{ option.label }}\n            </div>\n          }\n        </div>\n      }\n\n      <!-- No Options Message -->\n      @if (!hasAnyOptions()) {\n        <div class=\"tn-select-no-options\">\n          {{ noOptionsLabel() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-select-container{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-select-label{display:block;margin-bottom:.5rem;font-size:1rem;font-weight:500;color:var(--tn-fg1, #333);line-height:1.4}.tn-select-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-select-trigger{position:relative;display:flex;align-items:center;min-height:2.5rem;padding:.5rem 2.5rem .5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:pointer;transition:all .15s ease-in-out;outline:none;box-sizing:border-box}.tn-select-trigger:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-select-trigger:focus-visible{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-select-trigger.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-select-trigger.error{border-color:var(--tn-error, #dc3545)}.tn-select-trigger.error:focus-visible,.tn-select-trigger.error.open{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-error, #dc3545) 25%,transparent)}.tn-select-trigger.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tn-fg1, #212529)}.tn-select-text.placeholder{color:var(--tn-alt-fg1, #999)}.tn-select-arrow{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--tn-fg2, #6c757d);transition:transform .15s ease-in-out;pointer-events:none}.tn-select-arrow.open{transform:translateY(-50%) rotate(180deg)}.tn-select-arrow svg{display:block}.tn-select-dropdown{--tn-select-dropdown-max-height: 350px;background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:var(--tn-select-dropdown-max-height)}.tn-select-options{overflow-y:auto;padding:.25rem 0;max-height:var(--tn-select-dropdown-max-height)}.tn-select-option{display:flex;align-items:center;padding:.5rem .75rem;overflow-wrap:anywhere;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out;pointer-events:auto;position:relative;z-index:1001}.tn-select-option.selected{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg1, #212529)}.tn-select-option:hover:not(.disabled):not(.focused){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-select-option.focused{background-color:var(--tn-alt-bg2, #e8f4fd);box-shadow:inset 2px 0 0 var(--tn-primary, #007bff)}.tn-select-option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-option.tn-select-empty-option{color:var(--tn-fg2, #6c757d)}.tn-select-check{margin-right:.5rem;flex-shrink:0;pointer-events:none}.tn-select-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:.25rem 0}.tn-select-group-label{padding:.375rem .75rem;font-size:.75rem;font-weight:600;color:var(--tn-alt-fg1, #9ca3af);text-transform:uppercase;letter-spacing:.05em;cursor:default;-webkit-user-select:none;user-select:none}.tn-select-group-label.disabled{opacity:.6}.tn-select-no-options{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}.tn-select-error{margin-top:.25rem;font-size:.75rem;color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-select-trigger,.tn-select-option,.tn-select-arrow{transition:none}}@media(prefers-contrast:high){.tn-select-trigger{border-width:2px}.tn-select-option.selected{outline:2px solid var(--tn-fg1, #000);outline-offset:-2px}}\n"] }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroups", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], noOptionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsLabel", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], optionTestIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTestIdKey", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], multiSelectionChange: [{ type: i0.Output, args: ["multiSelectionChange"] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tn-select-container\">\n  <!-- Select Trigger -->\n  <div\n    #triggerEl\n    class=\"tn-select-trigger\"\n    role=\"combobox\"\n    tnTestIdType=\"select\"\n    [tnTestId]=\"resolvedTestId()\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [class.disabled]=\"isDisabled()\"\n    [class.open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"isOpen() ? 'tn-select-dropdown-' + idNamespace() : null\"\n    [attr.aria-label]=\"ariaLabel() ?? placeholder()\"\n    [attr.aria-disabled]=\"isDisabled()\"\n    [attr.aria-activedescendant]=\"isOpen() ? focusedOptionId() : null\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n\n    <!-- Display Text -->\n    <span\n      class=\"tn-select-text\"\n      [class.placeholder]=\"multiple() ? selectedValues().length === 0 : (selectedValue() === null || selectedValue() === undefined)\">\n      {{ displayText() }}\n    </span>\n\n    <!-- Dropdown Arrow -->\n    <div class=\"tn-select-arrow\" [class.open]=\"isOpen()\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <polyline points=\"6,9 12,15 18,9\" />\n      </svg>\n    </div>\n  </div>\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. The trigger keeps DOM focus throughout (combobox\n     pattern); options use aria-activedescendant for virtual focus. -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-select-dropdown\"\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"multiple()\"\n    [attr.id]=\"'tn-select-dropdown-' + idNamespace()\">\n\n    <!-- Options List -->\n    <div class=\"tn-select-options\">\n      <!-- Select-all row (multiple mode with showSelectAll). Toggles every\n           selectable option; its checkbox reflects all/some/none. -->\n      @if (showSelectAllRow()) {\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n        <div\n          class=\"tn-select-option tn-select-select-all\"\n          role=\"option\"\n          tabindex=\"-1\"\n          tnTestIdType=\"option\"\n          [tnTestId]=\"selectAllTestIdParts()\"\n          [attr.id]=\"selectAllId()\"\n          [class.selected]=\"allSelected()\"\n          [class.focused]=\"isSelectAllFocused()\"\n          [attr.aria-selected]=\"allSelected()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"toggleSelectAll()\">\n          <tn-checkbox\n            class=\"tn-select-check\"\n            label=\"\"\n            [checked]=\"allSelected()\"\n            [indeterminate]=\"selectAllIndeterminate()\"\n            [disabled]=\"true\"\n            [hideLabel]=\"true\" />\n          {{ selectAllLabel() }}\n        </div>\n        <div class=\"tn-select-separator\" role=\"separator\"></div>\n      }\n\n      <!-- Regular Options (preceded by the synthetic empty option when allowEmpty is set) -->\n      @for (option of displayOptions(); track $index) {\n        <!-- Option activation lives on the trigger via aria-activedescendant; options have tabindex=\"-1\" and never receive DOM focus. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n        <div\n          class=\"tn-select-option\"\n          role=\"option\"\n          tabindex=\"-1\"\n          tnTestIdType=\"option\"\n          [class.tn-select-empty-option]=\"isEmptyOption(option)\"\n          [tnTestId]=\"optionTestIdParts(option)\"\n          [attr.id]=\"optionId(option)\"\n          [class.selected]=\"isOptionSelected(option)\"\n          [class.focused]=\"isOptionFocused(option)\"\n          [class.disabled]=\"option.disabled\"\n          [attr.aria-selected]=\"isOptionSelected(option)\"\n          [attr.aria-disabled]=\"option.disabled\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onOptionClick(option)\">\n          @if (multiple()) {\n            <tn-checkbox\n              class=\"tn-select-check\"\n              label=\"\"\n              [checked]=\"isOptionSelected(option)\"\n              [disabled]=\"true\"\n              [hideLabel]=\"true\" />\n          }\n          {{ option.label }}\n        </div>\n      }\n\n      <!-- Option Groups -->\n      @for (group of optionGroups(); track $index; let isFirst = $first) {\n        <!-- Group Separator (not shown before first group if we have regular options) -->\n        @if (!isFirst || displayOptions().length > 0) {\n          <div\n            class=\"tn-select-separator\"\n            role=\"separator\">\n          </div>\n        }\n\n        <div role=\"group\" [attr.aria-labelledby]=\"'tn-select-group-' + idNamespace() + '-' + $index\">\n          <!-- Group Label -->\n          <div\n            class=\"tn-select-group-label\"\n            [attr.id]=\"'tn-select-group-' + idNamespace() + '-' + $index\"\n            [class.disabled]=\"group.disabled\">\n            {{ group.label }}\n          </div>\n\n          <!-- Group Options -->\n          @for (option of group.options; track $index) {\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n            <div\n              class=\"tn-select-option\"\n              role=\"option\"\n              tabindex=\"-1\"\n              tnTestIdType=\"option\"\n              [tnTestId]=\"optionTestIdParts(option)\"\n              [attr.id]=\"optionId(option)\"\n              [class.selected]=\"isOptionSelected(option)\"\n              [class.focused]=\"isOptionFocused(option)\"\n              [class.disabled]=\"option.disabled || group.disabled\"\n              [attr.aria-selected]=\"isOptionSelected(option)\"\n              [attr.aria-disabled]=\"option.disabled || group.disabled\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onOptionClick(option, !!group.disabled)\">\n              @if (multiple()) {\n                <tn-checkbox\n                  class=\"tn-select-check\"\n                  label=\"\"\n                  [checked]=\"isOptionSelected(option)\"\n                  [disabled]=\"true\"\n                  [hideLabel]=\"true\" />\n              }\n              {{ option.label }}\n            </div>\n          }\n        </div>\n      }\n\n      <!-- No Options Message -->\n      @if (!hasAnyOptions()) {\n        <div class=\"tn-select-no-options\">\n          {{ noOptionsLabel() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-select-container{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-select-label{display:block;margin-bottom:.5rem;font-size:1rem;font-weight:500;color:var(--tn-fg1, #333);line-height:1.4}.tn-select-label.required .required-asterisk{color:var(--tn-error, #dc3545);margin-left:.25rem}.tn-select-trigger{position:relative;display:flex;align-items:center;min-height:2.5rem;padding:.5rem 2.5rem .5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:pointer;transition:all .15s ease-in-out;outline:none;box-sizing:border-box}.tn-select-trigger:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-select-trigger:focus-visible{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-select-trigger.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-select-trigger.error{border-color:var(--tn-error, #dc3545)}.tn-select-trigger.error:focus-visible,.tn-select-trigger.error.open{border-color:var(--tn-error, #dc3545);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-error, #dc3545) 25%,transparent)}.tn-select-trigger.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tn-fg1, #212529)}.tn-select-text.placeholder{color:var(--tn-alt-fg1, #999)}.tn-select-arrow{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--tn-fg2, #6c757d);transition:transform .15s ease-in-out;pointer-events:none}.tn-select-arrow.open{transform:translateY(-50%) rotate(180deg)}.tn-select-arrow svg{display:block}.tn-select-dropdown{--tn-select-dropdown-max-height: 350px;background-color:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:var(--tn-select-dropdown-max-height)}.tn-select-options{overflow-y:auto;padding:.25rem 0;max-height:var(--tn-select-dropdown-max-height)}.tn-select-option{display:flex;align-items:center;padding:.5rem .75rem;overflow-wrap:anywhere;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out;pointer-events:auto;position:relative;z-index:1001}.tn-select-option.selected{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg1, #212529)}.tn-select-option:hover:not(.disabled):not(.focused){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-select-option.focused{background-color:var(--tn-alt-bg2, #e8f4fd);box-shadow:inset 2px 0 0 var(--tn-primary, #007bff)}.tn-select-option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-select-option.tn-select-empty-option{color:var(--tn-fg2, #6c757d)}.tn-select-select-all{font-weight:600}.tn-select-check{margin-right:.5rem;flex-shrink:0;pointer-events:none}.tn-select-separator{height:1px;background:var(--tn-lines, #e0e0e0);margin:.25rem 0}.tn-select-group-label{padding:.375rem .75rem;font-size:.75rem;font-weight:600;color:var(--tn-alt-fg1, #9ca3af);text-transform:uppercase;letter-spacing:.05em;cursor:default;-webkit-user-select:none;user-select:none}.tn-select-group-label.disabled{opacity:.6}.tn-select-no-options{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}.tn-select-error{margin-top:.25rem;font-size:.75rem;color:var(--tn-error, #dc3545)}@media(prefers-reduced-motion:reduce){.tn-select-trigger,.tn-select-option,.tn-select-arrow{transition:none}}@media(prefers-contrast:high){.tn-select-trigger{border-width:2px}.tn-select-option.selected{outline:2px solid var(--tn-fg1, #000);outline-offset:-2px}}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroups", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], noOptionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsLabel", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], optionTestIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTestIdKey", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], multiSelectionChange: [{ type: i0.Output, args: ["multiSelectionChange"] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }] } });
 
 /**
  * Harness for interacting with tn-select in tests.
@@ -9459,7 +9580,10 @@ class TnSelectHarness extends ComponentHarness {
         await this.open();
         // Dropdown panel is rendered in a CDK overlay (outside the host element),
         // so we search the document root rather than the harness-local subtree.
-        const options = await this.documentRootLocatorFactory().locatorForAll('.tn-select-option')();
+        // Exclude the select-all row (`.tn-select-select-all`) — it's a bulk
+        // action, not a choice; use `toggleSelectAll()` for it.
+        const options = await this.documentRootLocatorFactory()
+            .locatorForAll('.tn-select-option:not(.tn-select-select-all)')();
         for (const option of options) {
             const text = (await option.text()).trim();
             const matches = filter instanceof RegExp
@@ -9519,13 +9643,55 @@ class TnSelectHarness extends ComponentHarness {
         await this.open();
         // Dropdown panel is rendered in a CDK overlay (outside the host element),
         // so we search the document root rather than the harness-local subtree.
-        const options = await this.documentRootLocatorFactory().locatorForAll('.tn-select-option')();
+        // The select-all row is excluded — it's a bulk action, not an option.
+        const options = await this.documentRootLocatorFactory()
+            .locatorForAll('.tn-select-option:not(.tn-select-select-all)')();
         const labels = [];
         for (const option of options) {
             labels.push((await option.text()).trim());
         }
         return labels;
     }
+    /**
+     * Toggles the select-all row (multiple mode with `showSelectAll`). Opens the
+     * dropdown if needed. Throws when the select-all row isn't present.
+     *
+     * @returns Promise that resolves once the row has been clicked.
+     *
+     * @example
+     * ```typescript
+     * const select = await loader.getHarness(TnSelectHarness);
+     * await select.toggleSelectAll(); // selects every option
+     * await select.toggleSelectAll(); // clears them again
+     * ```
+     */
+    async toggleSelectAll() {
+        await this.open();
+        // Rendered in the CDK overlay, outside the host subtree.
+        const row = await this.documentRootLocatorFactory()
+            .locatorForOptional('.tn-select-select-all')();
+        if (!row) {
+            await this.close();
+            throw new Error('Select has no select-all row — set `multiple` and `showSelectAll`.');
+        }
+        await row.click();
+    }
+    /**
+     * Whether the select-all checkbox reads as fully checked (all options
+     * selected). Opens the dropdown if needed. Throws when the row isn't present.
+     *
+     * @returns Promise resolving to true when every option is selected.
+     */
+    async isSelectAllChecked() {
+        await this.open();
+        const row = await this.documentRootLocatorFactory()
+            .locatorForOptional('.tn-select-select-all')();
+        if (!row) {
+            await this.close();
+            throw new Error('Select has no select-all row — set `multiple` and `showSelectAll`.');
+        }
+        return row.hasClass('selected');
+    }
 }
 
 /// <reference types="jest" />
@@ -11238,7 +11404,7 @@ class TnTablePagerComponent {
         provider.setPagination(pagination);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTablePagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTablePagerComponent, isStandalone: true, selector: "tn-table-pager", inputs: { testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, ofLabel: { classPropertyName: "ofLabel", publicName: "ofLabel", isSignal: true, isRequired: false, transformFunction: null }, firstPageLabel: { classPropertyName: "firstPageLabel", publicName: "firstPageLabel", isSignal: true, isRequired: false, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: false, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: false, transformFunction: null }, lastPageLabel: { classPropertyName: "lastPageLabel", publicName: "lastPageLabel", isSignal: true, isRequired: false, transformFunction: null }, tablePaginationLabel: { classPropertyName: "tablePaginationLabel", publicName: "tablePaginationLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedTablePaginationLabel()" }, classAttribute: "tn-table-pager" }, ngImport: i0, template: "<div class=\"tn-table-pager__page-size\">\n  <span class=\"tn-table-pager__label\">{{ resolvedItemsPerPageLabel() }}:</span>\n  <tn-select\n    class=\"tn-table-pager__size-select\"\n    [testId]=\"childTestId('page-size')\"\n    [options]=\"pageSizeSelectOptions()\"\n    [ariaLabel]=\"resolvedItemsPerPageLabel()\"\n    [ngModel]=\"pageSize()\"\n    (ngModelChange)=\"onPageSizeChange($event)\" />\n</div>\n\n<span class=\"tn-table-pager__range\">\n  @if (effectiveTotalItems() === 0) {\n    0 {{ resolvedOfLabel() }} 0\n  } @else if (lastItemOnPage() > firstItemOnPage()) {\n    {{ firstItemOnPage() }} \u2013 {{ lastItemOnPage() }} {{ resolvedOfLabel() }} {{ effectiveTotalItems() }}\n  } @else {\n    {{ lastItemOnPage() }} {{ resolvedOfLabel() }} {{ effectiveTotalItems() }}\n  }\n</span>\n\n<div class=\"tn-table-pager__buttons\">\n  <tn-icon-button\n    name=\"page-first\"\n    library=\"mdi\"\n    [testId]=\"childTestId('first-page')\"\n    [ariaLabel]=\"resolvedFirstPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"goToPage(1)\" />\n  <tn-icon-button\n    name=\"chevron-left\"\n    library=\"mdi\"\n    [testId]=\"childTestId('previous-page')\"\n    [ariaLabel]=\"resolvedPreviousPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"previousPage()\" />\n  <tn-icon-button\n    name=\"chevron-right\"\n    library=\"mdi\"\n    [testId]=\"childTestId('next-page')\"\n    [ariaLabel]=\"resolvedNextPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"nextPage()\" />\n  <tn-icon-button\n    name=\"page-last\"\n    library=\"mdi\"\n    [testId]=\"childTestId('last-page')\"\n    [ariaLabel]=\"resolvedLastPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"goToPage(totalPages())\" />\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:10px;background-color:var(--tn-bg2);border:1px solid var(--tn-lines);color:var(--tn-fg2)}.tn-table-pager__page-size{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.tn-table-pager__label{white-space:nowrap}.tn-table-pager__size-select{min-width:84px}.tn-table-pager__range{white-space:nowrap}.tn-table-pager__buttons{display:flex;align-items:center;gap:4px}@media(max-width:600px){:host{gap:8px}.tn-table-pager__page-size{gap:4px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "dense", "ariaLabel", "ariaExpanded", "testId", "name", "size", "color", "tooltip", "tooltipPosition", "library", "iconClass"], outputs: ["onClick"] }, { kind: "component", type: TnSelectComponent, selector: "tn-select", inputs: ["options", "optionGroups", "placeholder", "ariaLabel", "noOptionsLabel", "allowEmpty", "emptyLabel", "disabled", "testId", "multiple", "optionTestIdKey", "compareWith"], outputs: ["selectionChange", "multiSelectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTablePagerComponent, isStandalone: true, selector: "tn-table-pager", inputs: { testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageLabel: { classPropertyName: "itemsPerPageLabel", publicName: "itemsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, ofLabel: { classPropertyName: "ofLabel", publicName: "ofLabel", isSignal: true, isRequired: false, transformFunction: null }, firstPageLabel: { classPropertyName: "firstPageLabel", publicName: "firstPageLabel", isSignal: true, isRequired: false, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: false, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: false, transformFunction: null }, lastPageLabel: { classPropertyName: "lastPageLabel", publicName: "lastPageLabel", isSignal: true, isRequired: false, transformFunction: null }, tablePaginationLabel: { classPropertyName: "tablePaginationLabel", publicName: "tablePaginationLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "resolvedTablePaginationLabel()" }, classAttribute: "tn-table-pager" }, ngImport: i0, template: "<div class=\"tn-table-pager__page-size\">\n  <span class=\"tn-table-pager__label\">{{ resolvedItemsPerPageLabel() }}:</span>\n  <tn-select\n    class=\"tn-table-pager__size-select\"\n    [testId]=\"childTestId('page-size')\"\n    [options]=\"pageSizeSelectOptions()\"\n    [ariaLabel]=\"resolvedItemsPerPageLabel()\"\n    [ngModel]=\"pageSize()\"\n    (ngModelChange)=\"onPageSizeChange($event)\" />\n</div>\n\n<span class=\"tn-table-pager__range\">\n  @if (effectiveTotalItems() === 0) {\n    0 {{ resolvedOfLabel() }} 0\n  } @else if (lastItemOnPage() > firstItemOnPage()) {\n    {{ firstItemOnPage() }} \u2013 {{ lastItemOnPage() }} {{ resolvedOfLabel() }} {{ effectiveTotalItems() }}\n  } @else {\n    {{ lastItemOnPage() }} {{ resolvedOfLabel() }} {{ effectiveTotalItems() }}\n  }\n</span>\n\n<div class=\"tn-table-pager__buttons\">\n  <tn-icon-button\n    name=\"page-first\"\n    library=\"mdi\"\n    [testId]=\"childTestId('first-page')\"\n    [ariaLabel]=\"resolvedFirstPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"goToPage(1)\" />\n  <tn-icon-button\n    name=\"chevron-left\"\n    library=\"mdi\"\n    [testId]=\"childTestId('previous-page')\"\n    [ariaLabel]=\"resolvedPreviousPageLabel()\"\n    [disabled]=\"isFirstPageDisabled()\"\n    (onClick)=\"previousPage()\" />\n  <tn-icon-button\n    name=\"chevron-right\"\n    library=\"mdi\"\n    [testId]=\"childTestId('next-page')\"\n    [ariaLabel]=\"resolvedNextPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"nextPage()\" />\n  <tn-icon-button\n    name=\"page-last\"\n    library=\"mdi\"\n    [testId]=\"childTestId('last-page')\"\n    [ariaLabel]=\"resolvedLastPageLabel()\"\n    [disabled]=\"isLastPageDisabled()\"\n    (onClick)=\"goToPage(totalPages())\" />\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:10px;background-color:var(--tn-bg2);border:1px solid var(--tn-lines);color:var(--tn-fg2)}.tn-table-pager__page-size{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.tn-table-pager__label{white-space:nowrap}.tn-table-pager__size-select{min-width:84px}.tn-table-pager__range{white-space:nowrap}.tn-table-pager__buttons{display:flex;align-items:center;gap:4px}@media(max-width:600px){:host{gap:8px}.tn-table-pager__page-size{gap:4px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "dense", "ariaLabel", "ariaExpanded", "testId", "name", "size", "color", "tooltip", "tooltipPosition", "library", "iconClass"], outputs: ["onClick"] }, { kind: "component", type: TnSelectComponent, selector: "tn-select", inputs: ["options", "optionGroups", "placeholder", "ariaLabel", "noOptionsLabel", "allowEmpty", "emptyLabel", "disabled", "showSelectAll", "selectAllLabel", "testId", "multiple", "optionTestIdKey", "compareWith"], outputs: ["selectionChange", "multiSelectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTablePagerComponent, decorators: [{
             type: Component,
@@ -11433,7 +11599,7 @@ class TnTreeNodeComponent extends CdkTreeNode {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTreeNodeComponent, isStandalone: true, selector: "tn-tree-node", host: { attributes: { "role": "treeitem" }, properties: { "attr.aria-level": "level + 1", "attr.aria-expanded": "isExpandable ? isExpanded : null" }, classAttribute: "tn-tree-node-wrapper" }, providers: [
             { provide: CdkTreeNode, useExisting: TnTreeNodeComponent }
-        ], exportAs: ["tnTreeNode"], usesInheritance: true, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<div class=\"tn-tree-node\"\n     cdkTreeNodeToggle\n     role=\"treeitem\"\n     [class.tn-tree-node--expandable]=\"isExpandable\"\n     [attr.aria-level]=\"level + 1\"\n     [attr.aria-expanded]=\"isExpandable ? isExpanded : null\"\n     [attr.aria-selected]=\"false\"\n     [style.cursor]=\"isExpandable ? 'pointer' : 'default'\">\n  \n  <div class=\"tn-tree-node__content\">\n    <!-- Arrow icon for expandable nodes -->\n    @if (isExpandable) {\n      <div\n        class=\"tn-tree-node__toggle\"\n        [class.tn-tree-node__toggle--expanded]=\"isExpanded\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"sm\"\n          style=\"transition: transform 0.2s ease;\"\n          [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n      </div>\n    }\n\n    <!-- Spacer for non-expandable nodes -->\n    @if (!isExpandable) {\n      <div class=\"tn-tree-node__spacer\"></div>\n    }\n    \n    <!-- Node content -->\n    <div class=\"tn-tree-node__text\">\n      <ng-content />\n    </div>\n  </div>\n</div>", styles: [":host{display:block}.tn-tree-node{border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-tree-node:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node:last-child{border-bottom:none}.tn-tree-node--expandable{cursor:pointer}.tn-tree-node--expandable:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node--expandable:active{background-color:var(--tn-alt-bg1)}.tn-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px}.tn-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;color:var(--tn-fg2);cursor:pointer;border-radius:3px;transition:all .2s ease;flex-shrink:0}.tn-tree-node__toggle:hover{background-color:var(--tn-alt-bg2);color:var(--tn-fg1)}.tn-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:1px}.tn-tree-node__toggle svg{transition:transform .2s ease;transform:rotate(0)}.tn-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-tree-node__text{flex:1;min-width:0;color:var(--tn-fg1)}.tn-tree-node__children{padding-left:24px}.tn-tree-invisible{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], exportAs: ["tnTreeNode"], usesInheritance: true, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<!-- The `role=\"treeitem\"` (plus aria-level/aria-expanded) lives on the host\n     `.tn-tree-node-wrapper`, so this inner div is a presentational container \u2014\n     no role or aria-* here, to avoid exposing a second, nested treeitem to AT. -->\n<div class=\"tn-tree-node\"\n     cdkTreeNodeToggle\n     [class.tn-tree-node--expandable]=\"isExpandable\"\n     [style.cursor]=\"isExpandable ? 'pointer' : 'default'\">\n  \n  <div class=\"tn-tree-node__content\">\n    <!-- Arrow icon for expandable nodes -->\n    @if (isExpandable) {\n      <div\n        class=\"tn-tree-node__toggle\"\n        [class.tn-tree-node__toggle--expanded]=\"isExpanded\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"sm\"\n          style=\"transition: transform 0.2s ease;\"\n          [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n      </div>\n    }\n\n    <!-- Spacer for non-expandable nodes -->\n    @if (!isExpandable) {\n      <div class=\"tn-tree-node__spacer\"></div>\n    }\n    \n    <!-- Node content -->\n    <div class=\"tn-tree-node__text\">\n      <ng-content />\n    </div>\n  </div>\n</div>", styles: [":host{display:block}.tn-tree-node{border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-tree-node:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node:last-child{border-bottom:none}.tn-tree-node--expandable{cursor:pointer}.tn-tree-node--expandable:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node--expandable:active{background-color:var(--tn-alt-bg1)}.tn-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px}.tn-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;color:var(--tn-fg2);cursor:pointer;border-radius:3px;transition:all .2s ease;flex-shrink:0}.tn-tree-node__toggle:hover{background-color:var(--tn-alt-bg2);color:var(--tn-fg1)}.tn-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:1px}.tn-tree-node__toggle svg{transition:transform .2s ease;transform:rotate(0)}.tn-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-tree-node__text{flex:1;min-width:0;color:var(--tn-fg1)}.tn-tree-node__children{padding-left:24px}.tn-tree-invisible{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: TnIconComponent, selector: "tn-icon", inputs: ["name", "size", "color", "tooltip", "ariaLabel", "library", "testId", "fullSize", "customSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeNodeComponent, decorators: [{
             type: Component,
@@ -11444,7 +11610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         '[attr.aria-level]': 'level + 1',
                         '[attr.aria-expanded]': 'isExpandable ? isExpanded : null',
                         'role': 'treeitem'
-                    }, encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tn-tree-node\"\n     cdkTreeNodeToggle\n     role=\"treeitem\"\n     [class.tn-tree-node--expandable]=\"isExpandable\"\n     [attr.aria-level]=\"level + 1\"\n     [attr.aria-expanded]=\"isExpandable ? isExpanded : null\"\n     [attr.aria-selected]=\"false\"\n     [style.cursor]=\"isExpandable ? 'pointer' : 'default'\">\n  \n  <div class=\"tn-tree-node__content\">\n    <!-- Arrow icon for expandable nodes -->\n    @if (isExpandable) {\n      <div\n        class=\"tn-tree-node__toggle\"\n        [class.tn-tree-node__toggle--expanded]=\"isExpanded\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"sm\"\n          style=\"transition: transform 0.2s ease;\"\n          [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n      </div>\n    }\n\n    <!-- Spacer for non-expandable nodes -->\n    @if (!isExpandable) {\n      <div class=\"tn-tree-node__spacer\"></div>\n    }\n    \n    <!-- Node content -->\n    <div class=\"tn-tree-node__text\">\n      <ng-content />\n    </div>\n  </div>\n</div>", styles: [":host{display:block}.tn-tree-node{border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-tree-node:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node:last-child{border-bottom:none}.tn-tree-node--expandable{cursor:pointer}.tn-tree-node--expandable:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node--expandable:active{background-color:var(--tn-alt-bg1)}.tn-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px}.tn-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;color:var(--tn-fg2);cursor:pointer;border-radius:3px;transition:all .2s ease;flex-shrink:0}.tn-tree-node__toggle:hover{background-color:var(--tn-alt-bg2);color:var(--tn-fg1)}.tn-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:1px}.tn-tree-node__toggle svg{transition:transform .2s ease;transform:rotate(0)}.tn-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-tree-node__text{flex:1;min-width:0;color:var(--tn-fg1)}.tn-tree-node__children{padding-left:24px}.tn-tree-invisible{display:none}\n"] }]
+                    }, encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- The `role=\"treeitem\"` (plus aria-level/aria-expanded) lives on the host\n     `.tn-tree-node-wrapper`, so this inner div is a presentational container \u2014\n     no role or aria-* here, to avoid exposing a second, nested treeitem to AT. -->\n<div class=\"tn-tree-node\"\n     cdkTreeNodeToggle\n     [class.tn-tree-node--expandable]=\"isExpandable\"\n     [style.cursor]=\"isExpandable ? 'pointer' : 'default'\">\n  \n  <div class=\"tn-tree-node__content\">\n    <!-- Arrow icon for expandable nodes -->\n    @if (isExpandable) {\n      <div\n        class=\"tn-tree-node__toggle\"\n        [class.tn-tree-node__toggle--expanded]=\"isExpanded\">\n        <tn-icon\n          library=\"mdi\"\n          size=\"sm\"\n          style=\"transition: transform 0.2s ease;\"\n          [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n      </div>\n    }\n\n    <!-- Spacer for non-expandable nodes -->\n    @if (!isExpandable) {\n      <div class=\"tn-tree-node__spacer\"></div>\n    }\n    \n    <!-- Node content -->\n    <div class=\"tn-tree-node__text\">\n      <ng-content />\n    </div>\n  </div>\n</div>", styles: [":host{display:block}.tn-tree-node{border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-tree-node:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node:last-child{border-bottom:none}.tn-tree-node--expandable{cursor:pointer}.tn-tree-node--expandable:hover{background-color:var(--tn-alt-bg2)}.tn-tree-node--expandable:active{background-color:var(--tn-alt-bg1)}.tn-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px}.tn-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;color:var(--tn-fg2);cursor:pointer;border-radius:3px;transition:all .2s ease;flex-shrink:0}.tn-tree-node__toggle:hover{background-color:var(--tn-alt-bg2);color:var(--tn-fg1)}.tn-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:1px}.tn-tree-node__toggle svg{transition:transform .2s ease;transform:rotate(0)}.tn-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-tree-node__text{flex:1;min-width:0;color:var(--tn-fg1)}.tn-tree-node__children{padding-left:24px}.tn-tree-invisible{display:none}\n"] }]
         }], ctorParameters: () => [] });
 
 class TnTreeNodeOutletDirective {
@@ -11529,6 +11695,679 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     }, encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tn-nested-tree-node__content\">\n  <!-- Toggle button for expandable nodes (provided by component) -->\n  @if (isExpandable) {\n    <button\n      class=\"tn-nested-tree-node__toggle\"\n      cdkTreeNodeToggle\n      type=\"button\"\n      [class.tn-nested-tree-node__toggle--expanded]=\"isExpanded\"\n      [attr.aria-label]=\"'Toggle node'\">\n      <tn-icon\n        library=\"mdi\"\n        size=\"sm\"\n        style=\"transition: transform 0.2s ease;\"\n        [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" />\n    </button>\n  }\n\n  <!-- Spacer for non-expandable nodes to maintain alignment -->\n  @if (!isExpandable) {\n    <div class=\"tn-nested-tree-node__spacer\"></div>\n  }\n\n  <!-- Consumer content -->\n  <ng-content />\n</div>\n\n<!-- Children container -->\n@if (isExpandable) {\n  <div class=\"tn-nested-tree-node-container\" role=\"group\" [class.tn-tree-invisible]=\"!isExpanded\">\n    <ng-content select=\"[slot=children]\" />\n  </div>\n}", styles: [".tn-nested-tree-node-wrapper{display:block;width:100%}.tn-nested-tree-node{display:block;width:100%;font-family:var(--tn-font-family-body);font-size:1rem;line-height:1.4;color:var(--tn-fg1)}.tn-nested-tree-node--expandable .tn-nested-tree-node__content{cursor:pointer}.tn-nested-tree-node__content{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 16px;border-bottom:1px solid var(--tn-lines);transition:background-color .2s ease}.tn-nested-tree-node__content:hover{background-color:var(--tn-alt-bg2)}.tn-nested-tree-node__content:focus-within{background-color:var(--tn-alt-bg2);outline:2px solid var(--tn-primary);outline-offset:-2px}.tn-tree-invisible{display:none}.tn-nested-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:8px;padding:0;border:none;background:transparent;border-radius:4px;cursor:pointer;color:var(--tn-fg2);transition:background-color .2s ease,color .2s ease}.tn-nested-tree-node__toggle:hover{background-color:var(--tn-bg3);color:var(--tn-fg1)}.tn-nested-tree-node__toggle:focus{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-nested-tree-node__toggle svg{transition:transform .2s ease}.tn-nested-tree-node__toggle--expanded svg{transform:rotate(90deg)}.tn-nested-tree-node__spacer{width:24px;height:24px;flex-shrink:0}.tn-nested-tree-node__text{flex:1;display:flex;align-items:center;gap:8px;min-width:0;color:var(--tn-fg1)}div.tn-nested-tree-node-container{padding-left:40px}@media(prefers-reduced-motion:reduce){.tn-nested-tree-node__toggle svg,.tn-nested-tree-node__content,.tn-nested-tree-node__children{transition:none}}@media(prefers-contrast:high){.tn-nested-tree-node__content{border:1px solid transparent}.tn-nested-tree-node__content:hover,.tn-nested-tree-node__content:focus-within{border-color:var(--tn-fg1)}.tn-nested-tree-node__toggle{border:1px solid var(--tn-fg2)}.tn-nested-tree-node__toggle:hover,.tn-nested-tree-node__toggle:focus{border-color:var(--tn-fg1)}}\n"] }]
         }], ctorParameters: () => [] });
 
+/**
+ * Renders a single virtual tree row.
+ *
+ * `cdk-virtual-scroll-viewport` materialises this outlet for each row that scrolls
+ * into view; the outlet instantiates the node's template with its context and
+ * (re)binds `CdkTreeNode.mostRecentTreeNode.data`, so the row behaves exactly as a
+ * node rendered directly by the CDK tree. When the same DOM view is recycled for a
+ * different node (virtual scrolling reuses views), only the context is patched.
+ */
+class TnTreeVirtualScrollNodeOutletDirective {
+    _viewContainerRef = inject(ViewContainerRef);
+    _viewRef = null;
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    /**
+     * Re-assert the row's aria position every check. The viewport's recycling view
+     * repeater can swap the underlying DOM view for a different row without our
+     * `ngOnChanges` writing the new `aria-setsize`/`aria-posinset` in a way that
+     * survives the swap, so we reconcile the current element against the current data
+     * on each change-detection pass (two cheap attribute writes) — self-healing.
+     */
+    ngDoCheck() {
+        this.applyAriaPosition();
+        this.applyKeyboardAffordance();
+    }
+    ngOnChanges(changes) {
+        const dataChange = changes['data'];
+        const recreateView = dataChange ? this.shouldRecreateView(dataChange) : false;
+        if (recreateView) {
+            const viewContainerRef = this._viewContainerRef;
+            if (this._viewRef) {
+                viewContainerRef.remove(viewContainerRef.indexOf(this._viewRef));
+            }
+            this._viewRef = this.data()
+                ? viewContainerRef.createEmbeddedView(this.data().nodeDef.template, this.data().context)
+                : null;
+            // Bind the freshly-created CdkTreeNode to this row's data. `mostRecentTreeNode`
+            // is a global CDK static (verified against @angular/cdk 21.x) set synchronously
+            // while `createEmbeddedView` above instantiates the node template. This mirrors
+            // CDK's own internal wiring and assumes the node def's template contains exactly
+            // one CdkTreeNode; it is fragile under view recycling, hence the shape check that
+            // gates recreation. A CDK upgrade that changes this static would stop rows from
+            // binding their data — covered by the outlet's rendering tests.
+            if (CdkTreeNode.mostRecentTreeNode && this._viewRef) {
+                CdkTreeNode.mostRecentTreeNode.data = this.data().data;
+            }
+        }
+        else if (this._viewRef && this.data().context) {
+            this.updateExistingContext(this.data().context);
+        }
+    }
+    /**
+     * Whether the row must be re-instantiated (vs. patched in place). Every wrapper
+     * carries the same fixed key set (`data`/`context`/`nodeDef`/`posInSet`/`setSize`),
+     * so recreation comes down to whether the raw data node is a different reference —
+     * that is what marks a genuinely different row (a missing wrapper also recreates).
+     */
+    shouldRecreateView(dataChange) {
+        const prevValue = dataChange.previousValue;
+        const currValue = dataChange.currentValue;
+        return prevValue?.data !== currValue?.data;
+    }
+    /**
+     * Reflect posinset/setsize onto the row element so screen readers can announce
+     * "item N of M". Runs on every `ngDoCheck` (the hot CD path), so only write when the
+     * attribute actually differs — skipping the redundant `setAttribute` on the common
+     * pass where nothing changed.
+     */
+    applyAriaPosition() {
+        const root = this._viewRef?.rootNodes?.[0];
+        const data = this.data();
+        if (!root?.setAttribute || !data) {
+            return;
+        }
+        const setSize = String(data.setSize);
+        const posInSet = String(data.posInSet);
+        if (root.getAttribute('aria-setsize') !== setSize) {
+            root.setAttribute('aria-setsize', setSize);
+        }
+        if (root.getAttribute('aria-posinset') !== posInSet) {
+            root.setAttribute('aria-posinset', posInSet);
+        }
+    }
+    /**
+     * Make expandable rows keyboard-focusable so a user can Tab to a pool/branch and
+     * expand it with Enter/Space (the host `TnTreeVirtualScrollViewComponent` handles the
+     * key). The virtual viewport recycles a row's view between expandable and leaf nodes,
+     * so this reconciles every check; leaf rows are left to the consumer's own interactive
+     * content (e.g. a `routerLink` anchor). Expandability is read from `aria-expanded`,
+     * which `tn-tree-node` sets only on expandable nodes. Only touch the DOM on change —
+     * this runs on the hot CD path.
+     */
+    applyKeyboardAffordance() {
+        const root = this._viewRef?.rootNodes?.[0];
+        if (!root?.setAttribute) {
+            return;
+        }
+        const expandable = root.hasAttribute('aria-expanded');
+        if (expandable) {
+            if (root.getAttribute('tabindex') !== '0') {
+                root.setAttribute('tabindex', '0');
+            }
+        }
+        else if (root.getAttribute('tabindex') === '0') {
+            root.removeAttribute('tabindex');
+        }
+    }
+    updateExistingContext(ctx) {
+        if (!this._viewRef) {
+            return;
+        }
+        for (const propName of Object.keys(ctx)) {
+            this._viewRef.context[propName]
+                = this.data().context[propName];
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeVirtualScrollNodeOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: TnTreeVirtualScrollNodeOutletDirective, isStandalone: true, selector: "[tnTreeVirtualScrollNodeOutlet]", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeVirtualScrollNodeOutletDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tnTreeVirtualScrollNodeOutlet]',
+                    standalone: true,
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
+
+/** Default fixed row height (px) used by the virtual scroll viewport. */
+const defaultTreeItemSize = 48;
+/**
+ * Row counts for the default buffer sizes (how many extra rows of content the viewport
+ * renders past the visible area) and for the distance the user must scroll before the
+ * scroll-to-top button appears. Expressed in rows and multiplied by `itemSize()` at
+ * runtime (see resolvedMin/MaxBufferPx) so the defaults scale with a custom row height.
+ */
+const defaultMinBufferRows = 4;
+const defaultBufferRows = 8;
+const scrollToTopThresholdRows = 8;
+const scrollFrameScheduler = typeof requestAnimationFrame !== 'undefined' ? animationFrameScheduler : asapScheduler;
+/**
+ * A `tn-tree` that renders through a `cdk-virtual-scroll-viewport`, so only the
+ * rows currently in view are materialised in the DOM. Drop-in for large trees
+ * (thousands of nodes) where the plain `tn-tree` would render every node.
+ *
+ * Usage mirrors `tn-tree`: provide a `TnTreeFlatDataSource` + `FlatTreeControl`
+ * and one `*cdkTreeNodeDef` template. Rows are a fixed height (`itemSize`).
+ *
+ * ```html
+ * <tn-tree-virtual-scroll-view [dataSource]="dataSource" [treeControl]="treeControl" [itemSize]="52">
+ *   <tn-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding [routerLink]="...">
+ *     {{ node.name }}
+ *   </tn-tree-node>
+ * </tn-tree-virtual-scroll-view>
+ * ```
+ *
+ * Accessibility: rows are exposed with `role="treeitem"` plus `aria-level`,
+ * `aria-posinset` and `aria-setsize` (the latter two relative to the node's
+ * siblings — nodes sharing the same parent/level — per the WAI-ARIA tree
+ * pattern, not the flattened list of all visible rows), and the virtual-scroll
+ * wrappers are marked `role="presentation"` so assistive tech still sees the
+ * items as children of the `role="tree"` host.
+ *
+ * Keyboard: expandable rows are focusable and expand/collapse with Enter/Space (see
+ * {@link onTreeKeydown}), so a keyboard/AT user can operate the `aria-expanded` that
+ * each expandable `treeitem` advertises. Roving arrow-key / Home / End navigation
+ * BETWEEN nodes is NOT supported here, though — because rows are materialised (and
+ * recycled) by the virtual scroll viewport rather than registered with CdkTree's node
+ * outlet, the CDK `TreeKeyManager` has no stable node set to drive. Use Tab to move
+ * between rows, or the non-virtual `tn-tree` when full roving navigation is required.
+ */
+class TnTreeVirtualScrollViewComponent extends CdkTree {
+    destroyRef = inject(DestroyRef);
+    cdr = inject(ChangeDetectorRef);
+    virtualScrollViewport = viewChild.required(CdkVirtualScrollViewport);
+    /** Fixed row height in px. Must match the actual rendered node height. */
+    itemSize = input(defaultTreeItemSize, ...(ngDevMode ? [{ debugName: "itemSize" }] : []));
+    /**
+     * Viewport buffer sizes (px). Leave at 0 (the default) to derive them from `itemSize()`
+     * — {@link defaultMinBufferRows} / {@link defaultBufferRows} rows — so the buffers scale
+     * with a custom row height; pass an explicit px value to override. (A fixed px default
+     * would under-buffer a tall `itemSize`, even failing to buffer a single row when
+     * `itemSize > maxBufferPx`.)
+     */
+    minBufferPx = input(0, ...(ngDevMode ? [{ debugName: "minBufferPx" }] : []));
+    maxBufferPx = input(0, ...(ngDevMode ? [{ debugName: "maxBufferPx" }] : []));
+    /** `minBufferPx` resolved to px, falling back to a row-count default that tracks `itemSize()`. */
+    resolvedMinBufferPx = computed(() => this.minBufferPx() || this.itemSize() * defaultMinBufferRows, ...(ngDevMode ? [{ debugName: "resolvedMinBufferPx" }] : []));
+    /** `maxBufferPx` resolved to px, falling back to a row-count default that tracks `itemSize()`. */
+    resolvedMaxBufferPx = computed(() => this.maxBufferPx() || this.itemSize() * defaultBufferRows, ...(ngDevMode ? [{ debugName: "resolvedMaxBufferPx" }] : []));
+    /**
+     * When true the viewport scrolls with the window instead of an internal scroll area.
+     * `booleanAttribute` so the bare presence form (`<... scrollWindow>`) coerces to `true`
+     * rather than the empty-string (falsy) an un-transformed input would receive.
+     *
+     * Set once at initialisation — NOT reactive. The scroll listener, presentational roles
+     * and ResizeObserver are wired in `ngAfterViewInit` against the viewport that this input
+     * selected; toggling it later re-renders the viewport but does not re-run that wiring.
+     */
+    scrollWindow = input(false, { ...(ngDevMode ? { debugName: "scrollWindow" } : {}), transform: booleanAttribute });
+    /** Whether to show the floating "scroll to top" button once scrolled down. */
+    showScrollToTop = input(true, { ...(ngDevMode ? { debugName: "showScrollToTop" } : {}), transform: booleanAttribute });
+    /** Accessible label / tooltip for the scroll-to-top button (i18n is the consumer's job). */
+    scrollToTopLabel = input('Scroll to top', ...(ngDevMode ? [{ debugName: "scrollToTopLabel" }] : []));
+    /**
+     * Per-row trackBy over the ORIGINAL data node (not the internal wrapper). Strongly
+     * recommended: without it rows track by index, so the recycling viewport reuses a
+     * detached view for whatever node lands at that index on data changes. Pass a stable
+     * key (e.g. `(_, node) => node.id`) as the stories do.
+     */
+    nodeTrackBy = input(...(ngDevMode ? [undefined, { debugName: "nodeTrackBy" }] : []));
+    /** Emits the viewport's horizontal `scrollLeft` (used to sync a sticky column header). */
+    viewportScrolled = output();
+    /**
+     * Emits the observed content size whenever it changes (used to size a sticky header).
+     * `width` is the full rendered content width — including horizontal overflow past the
+     * viewport — which is what a horizontally-synced header needs. `height` is the observed
+     * content wrapper's height: the visible viewport height in internal-scroll mode, but the
+     * FULL content height (row count × `itemSize`) in `scrollWindow` mode, where the wrapper
+     * grows with the document. Consumers wanting the visible viewport height should not rely
+     * on this field in window mode.
+     */
+    viewportResized = output();
+    /** Last `scrollLeft` emitted via {@link viewportScrolled}; used to skip redundant emits. */
+    lastEmittedScrollLeft = 0;
+    nodes$ = new BehaviorSubject([]);
+    innerTrackBy = computed(() => {
+        const fn = this.nodeTrackBy();
+        return fn
+            ? (index, node) => fn(index, node.data)
+            : (index) => index;
+    }, ...(ngDevMode ? [{ debugName: "innerTrackBy" }] : []));
+    renderNodeChanges$ = new BehaviorSubject([]);
+    resizeObserver = null;
+    scrollViewportElement = null;
+    scrollFrameSubscription = null;
+    constructor() {
+        super(inject(IterableDiffers), inject(ChangeDetectorRef), inject(ViewContainerRef));
+        this.listenForNodeChanges();
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit?.();
+        const element = this.virtualScrollViewport().elementRef.nativeElement;
+        const scrollable = this.virtualScrollViewport().scrollable;
+        // `getElementRef()` resolves to the viewport in the self-scrolling case and to the
+        // external scroll element otherwise — in scrollWindow mode that is
+        // `document.documentElement`, which is what we read `scrollLeft` from below.
+        this.scrollViewportElement = scrollable.getElementRef().nativeElement;
+        // React to scrolls via the scrollable's own stream rather than addEventListener on
+        // that element ref. In scrollWindow mode the scroll EVENTS fire on `document` while
+        // the element ref is `document.documentElement`, so a raw listener on the element
+        // would never fire and the scroll-to-top button / `viewportScrolled` could not react.
+        // `elementScrolled()` is wired to the correct target for both internal and window modes.
+        scrollable.elementScrolled()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(this.onViewportScroll);
+        // Observe the rendered CONTENT wrapper rather than the viewport itself, so
+        // `viewportResized` reports the full (possibly horizontally-overflowing) content
+        // width — that is what a sticky column header needs to stay aligned with the rows.
+        // Falls back to the viewport element if the wrapper is not present.
+        const contentWrapper = element.querySelector('.cdk-virtual-scroll-content-wrapper');
+        const observed = contentWrapper ?? element;
+        // The CDK viewport + content wrapper sit between the host `role="tree"` and the
+        // `role="treeitem"` rows. Mark them presentational so assistive tech collapses
+        // them and still sees the rows as direct tree items (ARIA requires treeitems to
+        // be children of the tree, optionally through a presentational container).
+        element.setAttribute('role', 'presentation');
+        contentWrapper?.setAttribute('role', 'presentation');
+        // Guarded for non-browser environments (SSR, jsdom-based unit tests) where
+        // ResizeObserver is absent; the resize output simply does not emit there.
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                const rect = entries[0]?.contentRect;
+                if (rect) {
+                    this.viewportResized.emit({ width: rect.width, height: rect.height });
+                }
+            });
+            this.resizeObserver.observe(observed);
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        // The scroll subscription is torn down by takeUntilDestroyed; just drop refs here.
+        this.scrollViewportElement = null;
+        this.scrollFrameSubscription?.unsubscribe();
+        this.scrollFrameSubscription = null;
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
+    /**
+     * Cached visibility of the scroll-to-top button. Recomputed only on scroll (see
+     * {@link onViewportScroll}) rather than read as a getter every change-detection
+     * pass, so `measureScrollOffset` — a layout-forcing read — is not called each cycle.
+     */
+    isScrollTopButtonVisible = false;
+    scrollToTop() {
+        // Use scrollToOffset (which delegates to the viewport's scrollable) rather than
+        // scrollTo (which scrolls the viewport element directly) so this also scrolls an
+        // external scroll container back to the top.
+        this.virtualScrollViewport().scrollToOffset(0, 'smooth');
+        this.cdr.markForCheck();
+    }
+    /**
+     * Enter/Space on a focused expandable row toggles its expansion. The virtual viewport
+     * recycles rows so CDK's `TreeKeyManager` can't drive them (see class docs); this keeps
+     * the expand/collapse that each `aria-expanded` row advertises keyboard-operable, via
+     * event delegation on the `role="tree"` host that reuses the row's `cdkTreeNodeToggle`
+     * click handler. Ignored when focus is on an inner control (e.g. a `routerLink` anchor)
+     * so that element keeps its own Enter/Space behaviour.
+     */
+    onTreeKeydown(event) {
+        if (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'Spacebar') {
+            return;
+        }
+        const target = event.target;
+        const row = target?.closest?.('.tn-tree-node-wrapper[role="treeitem"]');
+        if (!row || row !== target || !row.hasAttribute('aria-expanded')) {
+            return;
+        }
+        const toggle = row.querySelector('[cdkTreeNodeToggle]');
+        if (toggle) {
+            // Prevent Space from scrolling the page; reuse the toggle's existing click handler.
+            event.preventDefault();
+            toggle.click();
+        }
+    }
+    updateScrollTopButtonVisibility() {
+        const visible = this.showScrollToTop()
+            && this.virtualScrollViewport().measureScrollOffset('top') > this.itemSize() * scrollToTopThresholdRows;
+        if (visible !== this.isScrollTopButtonVisible) {
+            this.isScrollTopButtonVisible = visible;
+            this.cdr.markForCheck();
+        }
+    }
+    // CdkTree calls this with the full set of currently-visible nodes. Instead of
+    // rendering them into the outlet, feed them to the virtual scroll pipeline.
+    renderNodeChanges(data) {
+        this.renderNodeChanges$.next(data);
+    }
+    getNodeLevel(nodeData) {
+        return this.treeControl?.getLevel ? this.treeControl.getLevel(nodeData) : 0;
+    }
+    /**
+     * Compute per-row `aria-posinset` / `aria-setsize` scoped to each node's SIBLINGS
+     * (same parent / same level), as the WAI-ARIA tree pattern requires — not the flat
+     * list of all visible rows. The flat node set is depth-first ordered and each node
+     * carries a level, so siblings at level L are the consecutive level-L nodes bounded
+     * by any shallower node (level < L = a parent boundary); deeper nodes in between are
+     * descendants of an earlier sibling and don't split the group. One pass, tracking the
+     * open sibling group at each level.
+     */
+    computeAriaPositions(levels) {
+        const posInSet = new Array(levels.length);
+        const setSize = new Array(levels.length);
+        // groups[level] = indices of the currently-open sibling group at that depth.
+        const groups = [];
+        // Close (and stamp setSize on) every group deeper than `level`, because reaching a
+        // node at `level` ends any sibling groups nested under the previous sibling.
+        const finalizeDeeperThan = (level) => {
+            for (let l = groups.length - 1; l > level; l--) {
+                const group = groups[l];
+                if (group?.length) {
+                    for (const idx of group) {
+                        setSize[idx] = group.length;
+                    }
+                }
+            }
+            groups.length = level + 1;
+        };
+        for (let i = 0; i < levels.length; i++) {
+            const level = levels[i];
+            finalizeDeeperThan(level);
+            (groups[level] ??= []).push(i);
+            posInSet[i] = groups[level].length;
+        }
+        // Close the groups still open at the end of the list.
+        finalizeDeeperThan(-1);
+        return levels.map((_, i) => ({ posInSet: posInSet[i], setSize: setSize[i] }));
+    }
+    createNode(nodeData, index, level, posInSet, setSize) {
+        // `_getNodeDef` is a private CdkTree API (verified against @angular/cdk 21.x). Assert
+        // it resolves so a CDK upgrade that renames/removes it fails loudly here rather than
+        // silently rendering a blank tree at runtime.
+        const nodeDef = this._getNodeDef(nodeData, index);
+        if (!nodeDef) {
+            throw new Error('TnTreeVirtualScrollView: CdkTree._getNodeDef returned no node definition. '
+                + 'This private @angular/cdk API (expected ^21.1.0) may have changed — verify tree compatibility.');
+        }
+        const context = new CdkTreeNodeOutletContext(nodeData);
+        context.level = level;
+        // posInSet/setSize let a screen reader announce "item N of M" even though only a
+        // slice of rows exists in the DOM at any time. They are scoped to this node's
+        // siblings (see computeAriaPositions), per the WAI-ARIA tree pattern.
+        return {
+            data: nodeData, context, nodeDef, posInSet, setSize,
+        };
+    }
+    buildVirtualNodes(data) {
+        const levels = data.map((node) => this.getNodeLevel(node));
+        const positions = this.computeAriaPositions(levels);
+        return data.map((node, index) => this.createNode(node, index, levels[index], positions[index].posInSet, positions[index].setSize));
+    }
+    listenForNodeChanges() {
+        this.renderNodeChanges$.pipe(auditTime(0, scrollFrameScheduler), map((data) => this.buildVirtualNodes(data)), takeUntilDestroyed(this.destroyRef)).subscribe((nodes) => {
+            this.nodes$.next(nodes);
+            this.cdr.markForCheck();
+            // The viewport's recycling repeater may swap a row's DOM view during the render
+            // triggered above, leaving the outlet's aria-posinset/aria-setsize written to a
+            // now-detached element. Schedule one more check so the outlet's ngDoCheck
+            // reconciles the aria attributes onto the settled elements.
+            queueMicrotask(() => this.cdr.markForCheck());
+            // The visible node set just changed (e.g. a large branch was collapsed), which can
+            // shrink the scrollable content and clamp the scroll offset without firing a scroll
+            // event. Re-evaluate the scroll-to-top button after layout settles so it can't linger
+            // over content that is no longer scrollable. Guarded by the live element ref so a
+            // frame scheduled just before destroy doesn't measure a torn-down viewport.
+            scrollFrameScheduler.schedule(() => {
+                if (this.scrollViewportElement) {
+                    this.updateScrollTopButtonVisibility();
+                }
+            });
+        });
+    }
+    onViewportScroll = () => {
+        // Scroll events can fire several times per frame. Coalesce the work — a
+        // horizontal-offset emit and `measureScrollOffset` (a layout-forcing read) — into a
+        // single animation frame so fast scrolls don't trigger repeated forced reflows.
+        if (this.scrollFrameSubscription) {
+            return;
+        }
+        this.scrollFrameSubscription = scrollFrameScheduler.schedule(() => {
+            this.scrollFrameSubscription = null;
+            // Read scrollLeft from the actual scroll source, not the viewport element: in
+            // scrollWindow mode the viewport itself does not scroll (the window/external
+            // element does), so the viewport's own scrollLeft would always be 0. Only emit when
+            // it actually changed — this fires on vertical scrolls too, where scrollLeft is
+            // unchanged, and a consumer syncing a sticky header would otherwise re-apply the
+            // same translateX on every vertical scroll frame of a large tree.
+            const left = this.scrollViewportElement?.scrollLeft ?? 0;
+            if (left !== this.lastEmittedScrollLeft) {
+                this.lastEmittedScrollLeft = left;
+                this.viewportScrolled.emit(left);
+            }
+            // Re-evaluate the scroll-to-top button on every scroll (the scroll source may be an
+            // external, OnPush-detached container, so nothing else marks this view dirty).
+            this.updateScrollTopButtonVisibility();
+        });
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeVirtualScrollViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnTreeVirtualScrollViewComponent, isStandalone: true, selector: "tn-tree-virtual-scroll-view", inputs: { itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, minBufferPx: { classPropertyName: "minBufferPx", publicName: "minBufferPx", isSignal: true, isRequired: false, transformFunction: null }, maxBufferPx: { classPropertyName: "maxBufferPx", publicName: "maxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, scrollWindow: { classPropertyName: "scrollWindow", publicName: "scrollWindow", isSignal: true, isRequired: false, transformFunction: null }, showScrollToTop: { classPropertyName: "showScrollToTop", publicName: "showScrollToTop", isSignal: true, isRequired: false, transformFunction: null }, scrollToTopLabel: { classPropertyName: "scrollToTopLabel", publicName: "scrollToTopLabel", isSignal: true, isRequired: false, transformFunction: null }, nodeTrackBy: { classPropertyName: "nodeTrackBy", publicName: "nodeTrackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewportScrolled: "viewportScrolled", viewportResized: "viewportResized" }, host: { attributes: { "role": "tree" }, listeners: { "keydown": "onTreeKeydown($event)" }, properties: { "style.--tn-tree-item-size.px": "itemSize()" }, classAttribute: "tn-tree tn-tree-virtual-scroll-view" }, providers: [
+            { provide: CdkTree, useExisting: TnTreeVirtualScrollViewComponent },
+        ], viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], exportAs: ["tnTreeVirtualScrollView"], usesInheritance: true, hostDirectives: [{ directive: TnTestIdDirective, inputs: ["tnTestId", "testId"] }], ngImport: i0, template: "<!-- The two branches are intentionally near-identical: `scrollWindow` is a structural\n     directive (CdkVirtualScrollableWindow) selected by the bare attribute's presence, so\n     it can't be toggled via a property binding on a single viewport. Don't DRY this into\n     one element \u2014 dropping the attribute selection breaks window-scroll mode. -->\n@if (scrollWindow()) {\n  <cdk-virtual-scroll-viewport\n    scrollWindow\n    [itemSize]=\"itemSize()\"\n    [minBufferPx]=\"resolvedMinBufferPx()\"\n    [maxBufferPx]=\"resolvedMaxBufferPx()\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of nodes$ | async; trackBy: innerTrackBy()\">\n      <ng-template tnTreeVirtualScrollNodeOutlet [data]=\"item\" />\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n} @else {\n  <cdk-virtual-scroll-viewport\n    class=\"tn-tree-virtual-scroll-view__viewport\"\n    [itemSize]=\"itemSize()\"\n    [minBufferPx]=\"resolvedMinBufferPx()\"\n    [maxBufferPx]=\"resolvedMaxBufferPx()\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of nodes$ | async; trackBy: innerTrackBy()\">\n      <ng-template tnTreeVirtualScrollNodeOutlet [data]=\"item\" />\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n}\n\n<!-- Required so CdkTree finds a node outlet during init, but intentionally left\n     empty: rows are rendered through the virtual scroll viewport above, not here. -->\n<ng-container cdkTreeNodeOutlet />\n\n@if (isScrollTopButtonVisible) {\n  <tn-icon-button\n    name=\"arrow-up\"\n    library=\"mdi\"\n    class=\"tn-tree-virtual-scroll-view__scroll-top\"\n    testId=\"scroll-to-top\"\n    [class.tn-tree-virtual-scroll-view__scroll-top--fixed]=\"scrollWindow()\"\n    [ariaLabel]=\"scrollToTopLabel()\"\n    [tooltip]=\"scrollToTopLabel()\"\n    (onClick)=\"scrollToTop()\"\n  />\n}\n", styles: [".tn-tree-virtual-scroll-view__viewport{height:100%;width:100%}.tn-tree-virtual-scroll-view{display:block;position:relative;width:100%;height:100%;--tn-tree-item-size: 48px}.tn-tree-virtual-scroll-view .tn-tree-node__content{height:var(--tn-tree-item-size);min-height:var(--tn-tree-item-size);padding-top:0;padding-bottom:0;box-sizing:border-box}.tn-tree-virtual-scroll-view__scroll-top{position:absolute;right:16px;bottom:16px;z-index:2}.tn-tree-virtual-scroll-view__scroll-top--fixed{position:fixed}\n"], dependencies: [{ kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkVirtualScrollableWindow, selector: "cdk-virtual-scroll-viewport[scrollWindow]" }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: TnTreeVirtualScrollNodeOutletDirective, selector: "[tnTreeVirtualScrollNodeOutlet]", inputs: ["data"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "dense", "ariaLabel", "ariaExpanded", "testId", "name", "size", "color", "tooltip", "tooltipPosition", "library", "iconClass"], outputs: ["onClick"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTreeVirtualScrollViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tn-tree-virtual-scroll-view', standalone: true, exportAs: 'tnTreeVirtualScrollView', providers: [
+                        { provide: CdkTree, useExisting: TnTreeVirtualScrollViewComponent },
+                    ], imports: [
+                        CdkTreeModule,
+                        CdkVirtualScrollViewport,
+                        CdkVirtualScrollableWindow,
+                        CdkFixedSizeVirtualScroll,
+                        CdkVirtualForOf,
+                        TnTreeVirtualScrollNodeOutletDirective,
+                        TnIconButtonComponent,
+                        AsyncPipe,
+                    ], hostDirectives: [{ directive: TnTestIdDirective, inputs: ['tnTestId: testId'] }], host: {
+                        'class': 'tn-tree tn-tree-virtual-scroll-view',
+                        'role': 'tree',
+                        // Expose itemSize to CSS so each row can be pinned to exactly this height
+                        // (see the .scss) — virtual scrolling needs the painted row height to match
+                        // the height the viewport assumes per item, otherwise hover/selection
+                        // backgrounds bleed across neighbouring rows.
+                        '[style.--tn-tree-item-size.px]': 'itemSize()',
+                        '(keydown)': 'onTreeKeydown($event)',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- The two branches are intentionally near-identical: `scrollWindow` is a structural\n     directive (CdkVirtualScrollableWindow) selected by the bare attribute's presence, so\n     it can't be toggled via a property binding on a single viewport. Don't DRY this into\n     one element \u2014 dropping the attribute selection breaks window-scroll mode. -->\n@if (scrollWindow()) {\n  <cdk-virtual-scroll-viewport\n    scrollWindow\n    [itemSize]=\"itemSize()\"\n    [minBufferPx]=\"resolvedMinBufferPx()\"\n    [maxBufferPx]=\"resolvedMaxBufferPx()\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of nodes$ | async; trackBy: innerTrackBy()\">\n      <ng-template tnTreeVirtualScrollNodeOutlet [data]=\"item\" />\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n} @else {\n  <cdk-virtual-scroll-viewport\n    class=\"tn-tree-virtual-scroll-view__viewport\"\n    [itemSize]=\"itemSize()\"\n    [minBufferPx]=\"resolvedMinBufferPx()\"\n    [maxBufferPx]=\"resolvedMaxBufferPx()\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of nodes$ | async; trackBy: innerTrackBy()\">\n      <ng-template tnTreeVirtualScrollNodeOutlet [data]=\"item\" />\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n}\n\n<!-- Required so CdkTree finds a node outlet during init, but intentionally left\n     empty: rows are rendered through the virtual scroll viewport above, not here. -->\n<ng-container cdkTreeNodeOutlet />\n\n@if (isScrollTopButtonVisible) {\n  <tn-icon-button\n    name=\"arrow-up\"\n    library=\"mdi\"\n    class=\"tn-tree-virtual-scroll-view__scroll-top\"\n    testId=\"scroll-to-top\"\n    [class.tn-tree-virtual-scroll-view__scroll-top--fixed]=\"scrollWindow()\"\n    [ariaLabel]=\"scrollToTopLabel()\"\n    [tooltip]=\"scrollToTopLabel()\"\n    (onClick)=\"scrollToTop()\"\n  />\n}\n", styles: [".tn-tree-virtual-scroll-view__viewport{height:100%;width:100%}.tn-tree-virtual-scroll-view{display:block;position:relative;width:100%;height:100%;--tn-tree-item-size: 48px}.tn-tree-virtual-scroll-view .tn-tree-node__content{height:var(--tn-tree-item-size);min-height:var(--tn-tree-item-size);padding-top:0;padding-bottom:0;box-sizing:border-box}.tn-tree-virtual-scroll-view__scroll-top{position:absolute;right:16px;bottom:16px;z-index:2}.tn-tree-virtual-scroll-view__scroll-top--fixed{position:fixed}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { virtualScrollViewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], minBufferPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "minBufferPx", required: false }] }], maxBufferPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxBufferPx", required: false }] }], scrollWindow: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollWindow", required: false }] }], showScrollToTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showScrollToTop", required: false }] }], scrollToTopLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollToTopLabel", required: false }] }], nodeTrackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTrackBy", required: false }] }], viewportScrolled: [{ type: i0.Output, args: ["viewportScrolled"] }], viewportResized: [{ type: i0.Output, args: ["viewportResized"] }] } });
+
+/**
+ * Harness for interacting with `tn-tree-virtual-scroll-view` in tests.
+ *
+ * Because the component virtualises its rows, every query below operates over the
+ * currently-MATERIALISED (visible + buffered) rows only — nodes scrolled far out of view
+ * are not in the DOM. Indexes are positions within that visible set, not the full data.
+ *
+ * @example
+ * ```typescript
+ * const tree = await loader.getHarness(TnTreeVirtualScrollViewHarness);
+ * expect(await tree.getRowTexts()).toEqual(['pool', 'other']);
+ *
+ * await tree.expand(0);
+ * expect(await tree.isExpanded(0)).toBe(true);
+ * expect(await tree.getAriaLevel(1)).toBe(2);
+ * ```
+ */
+class TnTreeVirtualScrollViewHarness extends ComponentHarness {
+    static hostSelector = 'tn-tree-virtual-scroll-view';
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a virtual-scroll tree
+     * with specific attributes.
+     *
+     * @param options Options for filtering which instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnTreeVirtualScrollViewHarness, options);
+    }
+    rows = this.locatorForAll('.tn-tree-node-wrapper[role="treeitem"]');
+    scrollTopButton = this.locatorForOptional('.tn-tree-virtual-scroll-view__scroll-top');
+    // --- Row queries ---
+    /**
+     * Gets the number of currently-materialised tree rows.
+     *
+     * @returns Promise resolving to the visible row count.
+     */
+    async getRowCount() {
+        return (await this.rows()).length;
+    }
+    /**
+     * Gets the text label of every materialised row (the node's text cell only, excluding
+     * the expand chevron glyph).
+     *
+     * @returns Promise resolving to an array of row label strings.
+     */
+    async getRowTexts() {
+        const cells = await this.locatorForAll('.tn-tree-node-wrapper[role="treeitem"] .tn-tree-node__text')();
+        const texts = [];
+        for (const cell of cells) {
+            texts.push((await cell.text()).trim());
+        }
+        return texts;
+    }
+    /**
+     * Gets the text label of a single materialised row.
+     *
+     * @param index Zero-based index within the visible rows.
+     * @returns Promise resolving to the row's label.
+     */
+    async getRowText(index) {
+        const cell = await this.locatorFor(`.tn-tree-node-wrapper[role="treeitem"]:nth-of-type(${index + 1}) .tn-tree-node__text`)();
+        return (await cell.text()).trim();
+    }
+    /**
+     * Gets the 1-based `aria-level` of a row (root nodes are 1).
+     *
+     * @param index Zero-based index within the visible rows.
+     * @returns Promise resolving to the aria-level, or null if unset.
+     */
+    async getAriaLevel(index) {
+        return this.getRowNumberAttribute(index, 'aria-level');
+    }
+    /**
+     * Gets a row's `aria-posinset` — its 1-based position within its SIBLING set.
+     *
+     * @param index Zero-based index within the visible rows.
+     * @returns Promise resolving to the aria-posinset, or null if unset.
+     */
+    async getAriaPosInSet(index) {
+        return this.getRowNumberAttribute(index, 'aria-posinset');
+    }
+    /**
+     * Gets a row's `aria-setsize` — the size of its SIBLING set.
+     *
+     * @param index Zero-based index within the visible rows.
+     * @returns Promise resolving to the aria-setsize, or null if unset.
+     */
+    async getAriaSetSize(index) {
+        return this.getRowNumberAttribute(index, 'aria-setsize');
+    }
+    /**
+     * Whether a row is expandable (advertises `aria-expanded`).
+     *
+     * @param index Zero-based index within the visible rows.
+     * @returns Promise resolving to true if the row is expandable.
+     */
+    async isExpandable(index) {
+        const row = await this.getRow(index);
+        return (await row.getAttribute('aria-expanded')) !== null;
+    }
+    /**
+     * Whether an expandable row is currently expanded.
+     *
+     * @param index Zero-based index within the visible rows.
+     * @returns Promise resolving to true if `aria-expanded="true"`.
+     */
+    async isExpanded(index) {
+        const row = await this.getRow(index);
+        return (await row.getAttribute('aria-expanded')) === 'true';
+    }
+    /**
+     * Whether a row is keyboard tab-focusable (`tabindex="0"`). Only expandable rows are.
+     *
+     * @param index Zero-based index within the visible rows.
+     * @returns Promise resolving to true if the row is tab-focusable.
+     */
+    async isFocusable(index) {
+        const row = await this.getRow(index);
+        return (await row.getAttribute('tabindex')) === '0';
+    }
+    // --- Expansion ---
+    /**
+     * Toggles a row's expansion by clicking its toggle. No-op semantics are the tree's
+     * (clicking a leaf does nothing).
+     *
+     * @param index Zero-based index within the visible rows.
+     */
+    async toggle(index) {
+        const toggle = await this.locatorFor(`.tn-tree-node-wrapper[role="treeitem"]:nth-of-type(${index + 1}) .tn-tree-node`)();
+        await toggle.click();
+    }
+    /**
+     * Expands a row if it is expandable and currently collapsed.
+     *
+     * @param index Zero-based index within the visible rows.
+     */
+    async expand(index) {
+        if ((await this.isExpandable(index)) && !(await this.isExpanded(index))) {
+            await this.toggle(index);
+        }
+    }
+    /**
+     * Collapses a row if it is currently expanded.
+     *
+     * @param index Zero-based index within the visible rows.
+     */
+    async collapse(index) {
+        if (await this.isExpanded(index)) {
+            await this.toggle(index);
+        }
+    }
+    /**
+     * Focuses a row and presses a key on it (Enter/Space toggle an expandable row).
+     *
+     * @param index Zero-based index within the visible rows.
+     * @param key Which key to press — Enter or Space.
+     */
+    async pressKeyOnRow(index, key) {
+        const row = await this.getRow(index);
+        await row.focus();
+        await row.sendKeys(key === 'enter' ? TestKey.ENTER : ' ');
+    }
+    // --- Scroll-to-top button ---
+    /**
+     * Whether the floating scroll-to-top button is currently visible.
+     *
+     * @returns Promise resolving to true if the button is rendered.
+     */
+    async isScrollToTopVisible() {
+        return (await this.scrollTopButton()) !== null;
+    }
+    /**
+     * Clicks the scroll-to-top button. Throws if it is not currently visible.
+     */
+    async clickScrollToTop() {
+        const button = await this.scrollTopButton();
+        if (!button) {
+            throw new Error('Scroll-to-top button is not currently visible');
+        }
+        await button.click();
+    }
+    // --- Internal helpers ---
+    async getRow(index) {
+        const rows = await this.rows();
+        if (index >= rows.length) {
+            throw new Error(`Row index ${index} out of bounds (${rows.length} materialised rows)`);
+        }
+        return rows[index];
+    }
+    async getRowNumberAttribute(index, attr) {
+        const row = await this.getRow(index);
+        const value = await row.getAttribute(attr);
+        return value === null ? null : Number(value);
+    }
+}
+
 var ModifierKeys;
 (function (ModifierKeys) {
     ModifierKeys["COMMAND"] = "\u2318";
@@ -14015,7 +14854,7 @@ class TnTimeInputComponent {
                 useExisting: forwardRef(() => TnTimeInputComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<tn-select\n  [options]=\"timeSelectOptions()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [testId]=\"testId()\"\n  [ngModel]=\"_value\"\n  (selectionChange)=\"onSelectionChange($event)\" />\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TnSelectComponent, selector: "tn-select", inputs: ["options", "optionGroups", "placeholder", "ariaLabel", "noOptionsLabel", "allowEmpty", "emptyLabel", "disabled", "testId", "multiple", "optionTestIdKey", "compareWith"], outputs: ["selectionChange", "multiSelectionChange"] }] });
+        ], ngImport: i0, template: "<tn-select\n  [options]=\"timeSelectOptions()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [testId]=\"testId()\"\n  [ngModel]=\"_value\"\n  (selectionChange)=\"onSelectionChange($event)\" />\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TnSelectComponent, selector: "tn-select", inputs: ["options", "optionGroups", "placeholder", "ariaLabel", "noOptionsLabel", "allowEmpty", "emptyLabel", "disabled", "showSelectAll", "selectAllLabel", "testId", "multiple", "optionTestIdKey", "compareWith"], outputs: ["selectionChange", "multiSelectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnTimeInputComponent, decorators: [{
             type: Component,
@@ -17859,5 +18698,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, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_FORM_FIELD_ERRORS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnFormSectionComponent, TnFormSectionHarness, 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, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, composeTestId, controlTestId, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, formatSize, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_FORM_FIELD_ERRORS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnFormSectionComponent, TnFormSectionHarness, 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, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, composeTestId, controlTestId, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
 //# sourceMappingURL=truenas-ui-components.mjs.map