@truenas/ui-components 0.2.6 → 0.3.1

package/fesm2022/truenas-ui-components.mjs

@@ -268,10 +268,20 @@ class TnAutocompleteComponent {
     viewContainerRef = inject(ViewContainerRef);
     /** Unique instance ID for ARIA linkage */
     uid = `tn-autocomplete-${nextId$1++}`;
-    /** All available options */
+    /**
+     * All available options. The `label` is displayed; the `value` is committed
+     * to the form control. A written value is resolved back to its option's
+     * label for display — falling back to `String(value)` until the matching
+     * option is available, and upgraded once an async option load lands.
+     */
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
-    /** Transform a value to its display string */
-    displayWith = input((v) => String(v), ...(ngDevMode ? [{ debugName: "displayWith" }] : []));
+    /**
+     * Custom comparator for matching a written control value against option
+     * values during display resolution. Defaults to identity (`===`), which is
+     * right for primitive values; provide this when option values are objects.
+     * Mirrors `tn-select`'s `compareWith`.
+     */
+    compareWith = input(undefined, ...(ngDevMode ? [{ debugName: "compareWith" }] : []));
     /** Placeholder text for the input */
     placeholder = input('Type to search...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     /** Whether the input is disabled */
@@ -293,7 +303,7 @@ class TnAutocompleteComponent {
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     /** Text shown next to the spinner while `loading` is set. */
     loadingText = input('Loading...', ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
-    /** Custom filter function. Defaults to case-insensitive includes on displayWith text */
+    /** Custom filter function. Defaults to case-insensitive includes on the option label */
     filterFn = input(undefined, ...(ngDevMode ? [{ debugName: "filterFn" }] : []));
     /** Text shown when no options match the search */
     noResultsText = input('No results found', ...(ngDevMode ? [{ debugName: "noResultsText" }] : []));
@@ -314,7 +324,7 @@ class TnAutocompleteComponent {
     panelMaxHeight = input('320px', ...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : []));
     /** Test ID attribute */
     testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
-    /** Emits when an option is selected */
+    /** Emits the full option (label + value) when one is selected */
     optionSelected = output();
     /**
      * Emits the search term as the user types (not on programmatic writes or
@@ -354,7 +364,7 @@ class TnAutocompleteComponent {
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     /** Index of the currently highlighted option for keyboard nav */
     highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : []));
-    /** The currently selected value */
+    /** The currently committed value (an option's `value`, or a custom-typed one) */
     selectedValue = signal(null, ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
     /** CVA disabled state from the form */
     formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
@@ -365,7 +375,6 @@ class TnAutocompleteComponent {
         const term = this.searchTerm();
         const all = this.options();
         const customFilter = this.filterFn();
-        const display = this.displayWith();
         const max = this.maxResults();
         if (!term) {
             return all.slice(0, max);
@@ -373,7 +382,7 @@ class TnAutocompleteComponent {
         const lowerTerm = term.toLowerCase();
         const filtered = customFilter
             ? all.filter((opt) => customFilter(opt, term))
-            : all.filter((opt) => display(opt).toLowerCase().includes(lowerTerm));
+            : all.filter((opt) => opt.label.toLowerCase().includes(lowerTerm));
         return filtered.slice(0, max);
     }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
     /** Whether there are any results to show */
@@ -392,7 +401,32 @@ class TnAutocompleteComponent {
     lastOptionsCount = null;
     /** Scroll distance (px) from the panel bottom that triggers `loadMore`. */
     static loadMoreThresholdPx = 48;
+    /** Guards the object-without-compareWith warning so it fires only once. */
+    warnedAboutObjectCompare = false;
     constructor() {
+        // A value written before its option loaded displays as the raw fallback —
+        // once options arrive (or are relabeled, e.g. a locale change), upgrade
+        // the text to the option's label. UPGRADE-ONLY: when no option matches
+        // (e.g. a server-search picker replaced `options` after a selection), the
+        // current text is left alone rather than downgraded back to the raw
+        // value. Skipped while the panel is open so active typing isn't clobbered.
+        effect(() => {
+            this.options();
+            this.compareWith();
+            untracked(() => {
+                if (this.isOpen()) {
+                    return;
+                }
+                const value = this.selectedValue();
+                if (value === null || value === undefined) {
+                    return;
+                }
+                const match = this.options().find((opt) => this.valueMatches(opt.value, value));
+                if (match) {
+                    this.searchTerm.set(match.label);
+                }
+            });
+        });
         // A changed options COUNT means the consumer answered the last loadMore
         // (or a new result set landed) — re-arm the emitter and request another
         // page if the rows still don't fill the panel. Re-arming on length (not
@@ -440,7 +474,7 @@ class TnAutocompleteComponent {
     writeValue(value) {
         this.selectedValue.set(value);
         if (value !== null && value !== undefined) {
-            this.searchTerm.set(this.displayWith()(value));
+            this.searchTerm.set(this.displayValue(value));
         }
         else {
             this.searchTerm.set('');
@@ -459,7 +493,6 @@ class TnAutocompleteComponent {
     onInput(event) {
         const value = event.target.value;
         this.searchTerm.set(value);
-        this.highlightedIndex.set(-1);
         // A new term is a new pagination context — don't hold back its first page.
         this.loadMorePending = false;
         this.searchChange.emit(value);
@@ -471,6 +504,9 @@ class TnAutocompleteComponent {
             // anchored position so it stays attached to the input.
             this.overlayRef?.updatePosition();
         }
+        // Typing is a fresh search, not navigation — no row is pre-highlighted.
+        // Set after open() so it overrides the committed-option seed below.
+        this.highlightedIndex.set(-1);
     }
     onFocus() {
         if (!this.isDisabled()) {
@@ -486,8 +522,7 @@ class TnAutocompleteComponent {
         }
         if (this.requireSelection()) {
             const term = this.searchTerm();
-            const display = this.displayWith();
-            const match = this.options().find((opt) => display(opt).toLowerCase() === term.toLowerCase());
+            const match = this.options().find((opt) => !opt.disabled && opt.label.toLowerCase() === term.toLowerCase());
             if (match) {
                 this.selectOption(match);
             }
@@ -495,7 +530,7 @@ class TnAutocompleteComponent {
                 // Revert to last valid selection or clear
                 const current = this.selectedValue();
                 if (current !== null && current !== undefined) {
-                    this.searchTerm.set(display(current));
+                    this.searchTerm.set(this.displayValue(current));
                 }
                 else {
                     this.searchTerm.set('');
@@ -507,6 +542,9 @@ class TnAutocompleteComponent {
         this.onTouched();
     }
     onOptionClick(option) {
+        if (option.disabled) {
+            return;
+        }
         this.selectOption(option);
     }
     onKeydown(event) {
@@ -518,21 +556,27 @@ class TnAutocompleteComponent {
                     this.open();
                 }
                 else {
-                    this.highlightedIndex.update((i) => i < options.length - 1 ? i + 1 : 0);
-                    this.scrollToHighlighted();
+                    const next = this.nextEnabledIndex(this.highlightedIndex(), 1);
+                    if (next >= 0) {
+                        this.highlightedIndex.set(next);
+                        this.scrollToHighlighted();
+                    }
                 }
                 break;
             case 'ArrowUp':
                 event.preventDefault();
                 if (this.isOpen()) {
-                    this.highlightedIndex.update((i) => i > 0 ? i - 1 : options.length - 1);
-                    this.scrollToHighlighted();
+                    const prev = this.nextEnabledIndex(this.highlightedIndex(), -1);
+                    if (prev >= 0) {
+                        this.highlightedIndex.set(prev);
+                        this.scrollToHighlighted();
+                    }
                 }
                 break;
             case 'Enter': {
                 event.preventDefault();
                 const idx = this.highlightedIndex();
-                if (this.isOpen() && idx >= 0 && idx < options.length) {
+                if (this.isOpen() && idx >= 0 && idx < options.length && !options[idx].disabled) {
                     this.selectOption(options[idx]);
                 }
                 else if (this.allowCustomValue()) {
@@ -547,7 +591,7 @@ class TnAutocompleteComponent {
                     // Escape means "cancel the draft": revert to the committed value's
                     // text so the upcoming blur doesn't commit the abandoned term.
                     const current = this.selectedValue();
-                    this.searchTerm.set(current !== null && current !== undefined ? this.displayWith()(current) : '');
+                    this.searchTerm.set(current !== null && current !== undefined ? this.displayValue(current) : '');
                 }
                 this.close();
                 break;
@@ -596,7 +640,52 @@ class TnAutocompleteComponent {
             this.loadMore.emit();
         }
     }
+    /**
+     * Whether `option` carries the committed value — drives `aria-selected` so
+     * assistive tech announces the current choice independently of the keyboard
+     * cursor (which is conveyed via `aria-activedescendant`).
+     */
+    isOptionSelected(option) {
+        const value = this.selectedValue();
+        if (value === null || value === undefined) {
+            return false;
+        }
+        return this.valueMatches(option.value, value);
+    }
     // ── Internal ──
+    /**
+     * Index of the committed value's option in the visible list, or -1 when
+     * nothing is committed or the match is absent/disabled. Used to seed the
+     * keyboard cursor when the panel opens.
+     */
+    selectedOptionIndex() {
+        const value = this.selectedValue();
+        if (value === null || value === undefined) {
+            return -1;
+        }
+        return this.filteredOptions().findIndex((opt) => !opt.disabled && this.valueMatches(opt.value, value));
+    }
+    /**
+     * Next selectable option index from `from` in `direction` (+1 down, -1 up),
+     * skipping disabled rows and wrapping around. `from` of -1 ("nothing
+     * highlighted") lands on the first row going down, the last going up.
+     * Returns -1 when every visible option is disabled.
+     */
+    nextEnabledIndex(from, direction) {
+        const options = this.filteredOptions();
+        const count = options.length;
+        if (count === 0) {
+            return -1;
+        }
+        const start = from < 0 ? (direction === 1 ? -1 : 0) : from;
+        for (let step = 1; step <= count; step++) {
+            const idx = (((start + direction * step) % count) + count) % count;
+            if (!options[idx].disabled) {
+                return idx;
+            }
+        }
+        return -1;
+    }
     /**
      * Commit the current search term as the value (allowCustomValue mode). A
      * display match (case-insensitive, same as the requireSelection path)
@@ -605,25 +694,61 @@ class TnAutocompleteComponent {
      */
     commitCustomValue() {
         const term = this.searchTerm();
-        const display = this.displayWith();
         const lowerTerm = term.toLowerCase();
-        const match = this.options().find((opt) => display(opt).toLowerCase() === lowerTerm);
+        const match = this.options().find((opt) => !opt.disabled && opt.label.toLowerCase() === lowerTerm);
         if (match) {
             this.selectOption(match);
             return;
         }
-        if (isDevMode() && term !== '' && this.options().some((opt) => typeof opt !== 'string')) {
-            console.warn('[tn-autocomplete] allowCustomValue committed free text into a control whose options are '
-                + 'not strings — custom values are only sound for string-valued autocompletes.');
+        // Best-effort guard: silent when options haven't loaded yet (the common
+        // async + allowCustomValue case), where the value type can't be known.
+        if (isDevMode() && term !== '' && this.options().some((opt) => typeof opt.value !== 'string')) {
+            console.warn('[tn-autocomplete] allowCustomValue committed free text into a control whose option '
+                + 'values are not strings — custom values are only sound for string-valued autocompletes.');
         }
         const value = term === '' ? null : term;
         this.selectedValue.set(value);
         this.onChange(value);
     }
+    /**
+     * Resolves a committed value back to its option's display label, falling
+     * back to the raw value's string until the matching option is available.
+     */
+    displayValue(value) {
+        const match = this.options().find((opt) => this.valueMatches(opt.value, value));
+        return match ? match.label : String(value);
+    }
+    /**
+     * Compares option values, honoring `compareWith` when provided. Without one,
+     * falls back to identity (`===`) — which never matches structurally-equal
+     * objects from different references, so display resolution and selection
+     * silently fail. Warn once on that misuse (unconditional, like `tn-select`,
+     * so prod monitoring catches it) and return `false` to make it loud.
+     */
+    valueMatches(a, b) {
+        const comparator = this.compareWith();
+        if (comparator) {
+            return comparator(a, b);
+        }
+        if (a === b) {
+            return true;
+        }
+        if (typeof a === 'object' && typeof b === 'object' && a !== null && b !== null) {
+            if (!this.warnedAboutObjectCompare) {
+                this.warnedAboutObjectCompare = true;
+                console.warn('[tn-autocomplete] Comparing object option values without a `compareWith` input. ' +
+                    'Identity comparison will not match structurally-equal objects from different ' +
+                    'references, so the committed value will not resolve to its label. ' +
+                    'Provide `[compareWith]="(a, b) => a?.id === b?.id"` (or similar).');
+            }
+            return false;
+        }
+        return false;
+    }
     selectOption(option) {
-        this.selectedValue.set(option);
-        this.searchTerm.set(this.displayWith()(option));
-        this.onChange(option);
+        this.selectedValue.set(option.value);
+        this.searchTerm.set(option.label);
+        this.onChange(option.value);
         this.optionSelected.emit(option);
         this.close();
     }
@@ -632,7 +757,13 @@ class TnAutocompleteComponent {
             return;
         }
         this.isOpen.set(true);
+        // Seed the keyboard cursor on the committed option so ArrowDown resumes
+        // from the current value (and it scrolls into view). -1 when nothing is
+        // committed or the value has no visible, enabled option — e.g. a custom
+        // free-text value, or a value whose option hasn't loaded yet.
+        this.highlightedIndex.set(this.selectedOptionIndex());
         this.attachOverlay();
+        this.scrollToHighlighted();
         this.opened.emit();
     }
     close() {
@@ -697,13 +828,13 @@ class TnAutocompleteComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnAutocompleteComponent, isStandalone: true, selector: "tn-autocomplete", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requireSelection: { classPropertyName: "requireSelection", publicName: "requireSelection", isSignal: true, isRequired: false, transformFunction: null }, allowCustomValue: { classPropertyName: "allowCustomValue", publicName: "allowCustomValue", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", searchChange: "searchChange", loadMore: "loadMore", opened: "opened" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnAutocompleteComponent, isStandalone: true, selector: "tn-autocomplete", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requireSelection: { classPropertyName: "requireSelection", publicName: "requireSelection", isSignal: true, isRequired: false, transformFunction: null }, allowCustomValue: { classPropertyName: "allowCustomValue", publicName: "allowCustomValue", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", searchChange: "searchChange", loadMore: "loadMore", opened: "opened" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TnAutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-autocomplete\">\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-autocomplete__input\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    tnTestIdType=\"autocomplete\"\n    autocomplete=\"off\"\n    [tnTestId]=\"testId()\"\n    [class.open]=\"isOpen()\"\n    [class.disabled]=\"isDisabled()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"searchTerm()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-owns]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\" />\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. Attach/detach (driven by open()/close()) controls\n     visibility; the input keeps DOM focus throughout. -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-autocomplete__dropdown\"\n    [style.--tn-autocomplete-panel-max-height]=\"panelMaxHeightValue()\"\n    (scroll)=\"onPanelScroll($event)\">\n\n    <!-- Per ARIA, a listbox may only contain option/group children, so the\n         loading and no-results rows live OUTSIDE it as live-region siblings.\n         The listbox itself stays rendered (possibly empty) the whole time the\n         panel is open, so the input's aria-controls always points at a real\n         element \u2014 including the loading-with-no-results-yet state. -->\n    <div role=\"listbox\" [attr.id]=\"uid + '-dropdown'\" [attr.aria-busy]=\"loading() ? true : null\">\n      @if (hasResults()) {\n        @for (option of filteredOptions(); track $index) {\n          <div\n            class=\"tn-autocomplete__option\"\n            role=\"option\"\n            tabindex=\"-1\"\n            [class.highlighted]=\"highlightedIndex() === $index\"\n            [attr.id]=\"uid + '-option-' + $index\"\n            [attr.aria-selected]=\"highlightedIndex() === $index\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(option)\"\n            (keydown.enter)=\"onOptionClick(option)\">\n            {{ displayWith()(option) }}\n          </div>\n        }\n      }\n    </div>\n\n    <div role=\"status\">\n      @if (loading()) {\n        <div class=\"tn-autocomplete__loading\">\n          <tn-spinner [diameter]=\"16\" [strokeWidth]=\"2\" [ariaLabel]=\"loadingText()\" />\n          <span>{{ loadingText() }}</span>\n        </div>\n      } @else if (!hasResults()) {\n        <div class=\"tn-autocomplete__no-results\">\n          {{ noResultsText() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-autocomplete{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-autocomplete__input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;color:var(--tn-fg1, #212529);font-size:1rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-autocomplete__input::placeholder{color:var(--tn-alt-fg1, #999)}.tn-autocomplete__input:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-autocomplete__input:focus-visible,.tn-autocomplete__input.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-autocomplete__input.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__dropdown{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-autocomplete-panel-max-height, 320px);overflow-y:auto;padding:.25rem 0}.tn-autocomplete__option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out}.tn-autocomplete__option:hover{background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-autocomplete__option.highlighted{background-color:var(--tn-alt-bg1, #f8f9fa)}.tn-autocomplete__no-results{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}@media(prefers-reduced-motion:reduce){.tn-autocomplete__input,.tn-autocomplete__option{transition:none}}.tn-autocomplete__loading{align-items:center;color:var(--tn-fg2, #6c757d);display:flex;font-size:.875rem;gap:.5rem;padding:.5rem .75rem}\n"], dependencies: [{ kind: "component", type: TnSpinnerComponent, selector: "tn-spinner", inputs: ["mode", "value", "diameter", "strokeWidth", "ariaLabel", "ariaLabelledby"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-autocomplete\">\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-autocomplete__input\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    tnTestIdType=\"autocomplete\"\n    autocomplete=\"off\"\n    [tnTestId]=\"testId()\"\n    [class.open]=\"isOpen()\"\n    [class.disabled]=\"isDisabled()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"searchTerm()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-owns]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\" />\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. Attach/detach (driven by open()/close()) controls\n     visibility; the input keeps DOM focus throughout. -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-autocomplete__dropdown\"\n    [style.--tn-autocomplete-panel-max-height]=\"panelMaxHeightValue()\"\n    (scroll)=\"onPanelScroll($event)\">\n\n    <!-- Per ARIA, a listbox may only contain option/group children, so the\n         loading and no-results rows live OUTSIDE it as live-region siblings.\n         The listbox itself stays rendered (possibly empty) the whole time the\n         panel is open, so the input's aria-controls always points at a real\n         element \u2014 including the loading-with-no-results-yet state. -->\n    <div role=\"listbox\" [attr.id]=\"uid + '-dropdown'\" [attr.aria-busy]=\"loading() ? true : null\">\n      @if (hasResults()) {\n        @for (option of filteredOptions(); track $index) {\n          <div\n            class=\"tn-autocomplete__option\"\n            role=\"option\"\n            tabindex=\"-1\"\n            [class.highlighted]=\"highlightedIndex() === $index\"\n            [class.disabled]=\"option.disabled\"\n            [attr.id]=\"uid + '-option-' + $index\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled ? true : null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(option)\"\n            (keydown.enter)=\"onOptionClick(option)\">\n            {{ option.label }}\n          </div>\n        }\n      }\n    </div>\n\n    <div role=\"status\">\n      @if (loading()) {\n        <div class=\"tn-autocomplete__loading\">\n          <tn-spinner [diameter]=\"16\" [strokeWidth]=\"2\" [ariaLabel]=\"loadingText()\" />\n          <span>{{ loadingText() }}</span>\n        </div>\n      } @else if (!hasResults()) {\n        <div class=\"tn-autocomplete__no-results\">\n          {{ noResultsText() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-autocomplete{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-autocomplete__input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;color:var(--tn-fg1, #212529);font-size:1rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-autocomplete__input::placeholder{color:var(--tn-alt-fg1, #999)}.tn-autocomplete__input:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-autocomplete__input:focus-visible,.tn-autocomplete__input.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-autocomplete__input.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__dropdown{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-autocomplete-panel-max-height, 320px);overflow-y:auto;padding:.25rem 0}.tn-autocomplete__option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out}.tn-autocomplete__option:hover:not(.disabled){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-autocomplete__option.highlighted{background-color:var(--tn-alt-bg1, #f8f9fa)}.tn-autocomplete__option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__no-results{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}@media(prefers-reduced-motion:reduce){.tn-autocomplete__input,.tn-autocomplete__option{transition:none}}.tn-autocomplete__loading{align-items:center;color:var(--tn-fg2, #6c757d);display:flex;font-size:.875rem;gap:.5rem;padding:.5rem .75rem}\n"], dependencies: [{ kind: "component", type: TnSpinnerComponent, selector: "tn-spinner", inputs: ["mode", "value", "diameter", "strokeWidth", "ariaLabel", "ariaLabelledby"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnAutocompleteComponent, decorators: [{
             type: Component,
@@ -713,8 +844,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                             useExisting: forwardRef(() => TnAutocompleteComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"tn-autocomplete\">\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-autocomplete__input\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    tnTestIdType=\"autocomplete\"\n    autocomplete=\"off\"\n    [tnTestId]=\"testId()\"\n    [class.open]=\"isOpen()\"\n    [class.disabled]=\"isDisabled()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"searchTerm()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-owns]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\" />\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. Attach/detach (driven by open()/close()) controls\n     visibility; the input keeps DOM focus throughout. -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-autocomplete__dropdown\"\n    [style.--tn-autocomplete-panel-max-height]=\"panelMaxHeightValue()\"\n    (scroll)=\"onPanelScroll($event)\">\n\n    <!-- Per ARIA, a listbox may only contain option/group children, so the\n         loading and no-results rows live OUTSIDE it as live-region siblings.\n         The listbox itself stays rendered (possibly empty) the whole time the\n         panel is open, so the input's aria-controls always points at a real\n         element \u2014 including the loading-with-no-results-yet state. -->\n    <div role=\"listbox\" [attr.id]=\"uid + '-dropdown'\" [attr.aria-busy]=\"loading() ? true : null\">\n      @if (hasResults()) {\n        @for (option of filteredOptions(); track $index) {\n          <div\n            class=\"tn-autocomplete__option\"\n            role=\"option\"\n            tabindex=\"-1\"\n            [class.highlighted]=\"highlightedIndex() === $index\"\n            [attr.id]=\"uid + '-option-' + $index\"\n            [attr.aria-selected]=\"highlightedIndex() === $index\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(option)\"\n            (keydown.enter)=\"onOptionClick(option)\">\n            {{ displayWith()(option) }}\n          </div>\n        }\n      }\n    </div>\n\n    <div role=\"status\">\n      @if (loading()) {\n        <div class=\"tn-autocomplete__loading\">\n          <tn-spinner [diameter]=\"16\" [strokeWidth]=\"2\" [ariaLabel]=\"loadingText()\" />\n          <span>{{ loadingText() }}</span>\n        </div>\n      } @else if (!hasResults()) {\n        <div class=\"tn-autocomplete__no-results\">\n          {{ noResultsText() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-autocomplete{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-autocomplete__input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;color:var(--tn-fg1, #212529);font-size:1rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-autocomplete__input::placeholder{color:var(--tn-alt-fg1, #999)}.tn-autocomplete__input:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-autocomplete__input:focus-visible,.tn-autocomplete__input.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-autocomplete__input.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__dropdown{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-autocomplete-panel-max-height, 320px);overflow-y:auto;padding:.25rem 0}.tn-autocomplete__option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out}.tn-autocomplete__option:hover{background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-autocomplete__option.highlighted{background-color:var(--tn-alt-bg1, #f8f9fa)}.tn-autocomplete__no-results{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}@media(prefers-reduced-motion:reduce){.tn-autocomplete__input,.tn-autocomplete__option{transition:none}}.tn-autocomplete__loading{align-items:center;color:var(--tn-fg2, #6c757d);display:flex;font-size:.875rem;gap:.5rem;padding:.5rem .75rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requireSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireSelection", required: false }] }], allowCustomValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomValue", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], opened: [{ type: i0.Output, args: ["opened"] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }] } });
+                    ], template: "<div class=\"tn-autocomplete\">\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-autocomplete__input\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    tnTestIdType=\"autocomplete\"\n    autocomplete=\"off\"\n    [tnTestId]=\"testId()\"\n    [class.open]=\"isOpen()\"\n    [class.disabled]=\"isDisabled()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [value]=\"searchTerm()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-owns]=\"isOpen() ? uid + '-dropdown' : null\"\n    [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? uid + '-option-' + highlightedIndex() : null\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\" />\n</div>\n\n<!-- Dropdown panel \u2014 portaled via CDK Overlay so it escapes parent\n     overflow/clipping. Attach/detach (driven by open()/close()) controls\n     visibility; the input keeps DOM focus throughout. -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-autocomplete__dropdown\"\n    [style.--tn-autocomplete-panel-max-height]=\"panelMaxHeightValue()\"\n    (scroll)=\"onPanelScroll($event)\">\n\n    <!-- Per ARIA, a listbox may only contain option/group children, so the\n         loading and no-results rows live OUTSIDE it as live-region siblings.\n         The listbox itself stays rendered (possibly empty) the whole time the\n         panel is open, so the input's aria-controls always points at a real\n         element \u2014 including the loading-with-no-results-yet state. -->\n    <div role=\"listbox\" [attr.id]=\"uid + '-dropdown'\" [attr.aria-busy]=\"loading() ? true : null\">\n      @if (hasResults()) {\n        @for (option of filteredOptions(); track $index) {\n          <div\n            class=\"tn-autocomplete__option\"\n            role=\"option\"\n            tabindex=\"-1\"\n            [class.highlighted]=\"highlightedIndex() === $index\"\n            [class.disabled]=\"option.disabled\"\n            [attr.id]=\"uid + '-option-' + $index\"\n            [attr.aria-selected]=\"isOptionSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled ? true : null\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onOptionClick(option)\"\n            (keydown.enter)=\"onOptionClick(option)\">\n            {{ option.label }}\n          </div>\n        }\n      }\n    </div>\n\n    <div role=\"status\">\n      @if (loading()) {\n        <div class=\"tn-autocomplete__loading\">\n          <tn-spinner [diameter]=\"16\" [strokeWidth]=\"2\" [ariaLabel]=\"loadingText()\" />\n          <span>{{ loadingText() }}</span>\n        </div>\n      } @else if (!hasResults()) {\n        <div class=\"tn-autocomplete__no-results\">\n          {{ noResultsText() }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".tn-autocomplete{position:relative;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif}.tn-autocomplete__input{display:block;width:100%;min-height:2.5rem;padding:.5rem .75rem;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;color:var(--tn-fg1, #212529);font-size:1rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-autocomplete__input::placeholder{color:var(--tn-alt-fg1, #999)}.tn-autocomplete__input:hover:not(.disabled){border-color:var(--tn-primary, #007bff)}.tn-autocomplete__input:focus-visible,.tn-autocomplete__input.open{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-autocomplete__input.disabled{background-color:var(--tn-alt-bg1, #f8f9fa);color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__dropdown{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-autocomplete-panel-max-height, 320px);overflow-y:auto;padding:.25rem 0}.tn-autocomplete__option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;color:var(--tn-fg1, #212529);transition:background-color .15s ease-in-out}.tn-autocomplete__option:hover:not(.disabled){background-color:var(--tn-alt-bg2, #f8f9fa)}.tn-autocomplete__option.highlighted{background-color:var(--tn-alt-bg1, #f8f9fa)}.tn-autocomplete__option.disabled{color:var(--tn-fg2, #6c757d);cursor:not-allowed;opacity:.6}.tn-autocomplete__no-results{padding:1rem .75rem;text-align:center;color:var(--tn-fg2, #6c757d);font-style:italic}@media(prefers-reduced-motion:reduce){.tn-autocomplete__input,.tn-autocomplete__option{transition:none}}.tn-autocomplete__loading{align-items:center;color:var(--tn-fg2, #6c757d);display:flex;font-size:.875rem;gap:.5rem;padding:.5rem .75rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requireSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireSelection", required: false }] }], allowCustomValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomValue", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], opened: [{ type: i0.Output, args: ["opened"] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }] } });
 
 /**
  * Harness for interacting with tn-autocomplete in tests.
@@ -4076,6 +4207,164 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             args: [{ selector: 'tn-chip', standalone: true, imports: [CommonModule, A11yModule, TnIconComponent, TnTestIdDirective, LabelMarkupPipe, LabelTextPipe], template: "<div\n  #chipEl\n  role=\"button\"\n  tnTestIdType=\"chip\"\n  [ngClass]=\"classes()\"\n  [tnTestId]=\"testId()\"\n  [attr.aria-label]=\"label() | tnLabelText\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n  (click)=\"handleClick($event)\"\n  (keydown)=\"handleKeyDown($event)\"\n>\n  @if (icon()) {\n    <tn-icon class=\"tn-chip__icon\" size=\"sm\" [name]=\"icon()!\" />\n  }\n  <span class=\"tn-chip__label\" [innerHTML]=\"label() | tnLabelMarkup\"></span>\n  @if (closable()) {\n    <button\n      type=\"button\"\n      class=\"tn-chip__close\"\n      [attr.aria-label]=\"'Remove ' + (label() | tnLabelText)\"\n      [disabled]=\"disabled()\"\n      (click)=\"handleClose($event)\"\n    >\n      <span class=\"tn-chip__close-icon\">\u00D7</span>\n    </button>\n  }\n</div>", styles: [".tn-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:16px;font-family:var(--tn-font-family-body);font-size:14px;font-weight:500;line-height:1.2;cursor:pointer;transition:all .2s ease-in-out;border:1px solid transparent;outline:none;-webkit-user-select:none;user-select:none}.tn-chip:focus-visible{outline:2px solid var(--tn-primary);outline-offset:2px}.tn-chip:hover:not(.tn-chip--disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.tn-chip--primary{background-color:var(--tn-primary);color:var(--tn-primary-txt);border-color:var(--tn-primary)}.tn-chip--primary:hover:not(.tn-chip--disabled){background-color:var(--tn-blue);border-color:var(--tn-blue)}.tn-chip--secondary{background-color:var(--tn-alt-bg1);color:var(--tn-alt-fg2);border-color:var(--tn-alt-bg2)}.tn-chip--secondary:hover:not(.tn-chip--disabled){background-color:var(--tn-alt-bg2);border-color:var(--tn-accent)}.tn-chip--accent{background-color:var(--tn-accent);color:var(--tn-fg1);border-color:var(--tn-accent)}.tn-chip--accent:hover:not(.tn-chip--disabled){background-color:var(--tn-alt-bg2);border-color:var(--tn-alt-bg2)}.tn-chip--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.tn-chip--closable{padding-right:8px}.tn-chip__icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:12px}.tn-chip__label ::ng-deep code{font-family:var(--tn-font-family-monospace, monospace);font-size:.875em;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ccc);border-radius:4px;padding:.125em .45em}.tn-chip__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.tn-chip__close{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;margin:0;border:none;border-radius:50%;background-color:#fff3;color:inherit;cursor:pointer;transition:background-color .2s ease-in-out;outline:none}.tn-chip__close:hover:not(:disabled){background-color:#ffffff4d}.tn-chip__close:focus-visible{outline:1px solid currentColor;outline-offset:1px}.tn-chip__close:disabled{cursor:not-allowed;opacity:.5}.tn-chip__close-icon{font-size:14px;font-weight:700;line-height:1}.tn-dark .tn-chip--secondary .tn-chip__close{background-color:#0003}.tn-dark .tn-chip--secondary .tn-chip__close:hover:not(:disabled){background-color:#0000004d}.high-contrast .tn-chip{border-width:2px}.high-contrast .tn-chip:focus-visible{outline-width:3px}\n"] }]
         }], propDecorators: { chipEl: [{ type: i0.ViewChild, args: ['chipEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
 
+/**
+ * Harness for interacting with tn-chip in tests.
+ * Provides methods for reading chip state and simulating user interactions
+ * (selecting the chip and dismissing a closable chip).
+ *
+ * @example
+ * ```typescript
+ * // Find a chip by label and click it
+ * const chip = await loader.getHarness(TnChipHarness.with({ label: 'Active' }));
+ * await chip.click();
+ *
+ * // Dismiss a closable chip
+ * const filter = await loader.getHarness(TnChipHarness.with({ label: 'Has SSH Access' }));
+ * if (await filter.isClosable()) {
+ *   await filter.close();
+ * }
+ * ```
+ */
+class TnChipHarness extends ComponentHarness {
+    /**
+     * The selector for the host element of a `TnChipComponent` instance.
+     */
+    static hostSelector = 'tn-chip';
+    _chip = this.locatorFor('.tn-chip');
+    _label = this.locatorFor('.tn-chip__label');
+    _icon = this.locatorForOptional('.tn-chip__icon');
+    _closeButton = this.locatorForOptional('.tn-chip__close');
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a chip
+     * with specific attributes.
+     *
+     * @param options Options for filtering which chip instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * // Find chip by exact label
+     * const chip = await loader.getHarness(TnChipHarness.with({ label: 'Production' }));
+     *
+     * // Find chip with regex pattern
+     * const chip = await loader.getHarness(TnChipHarness.with({ label: /access/i }));
+     * ```
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnChipHarness, options)
+            .addOption('label', options.label, (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label));
+    }
+    /**
+     * Gets the chip's label text.
+     *
+     * @returns Promise resolving to the chip's text content.
+     *
+     * @example
+     * ```typescript
+     * const chip = await loader.getHarness(TnChipHarness);
+     * expect(await chip.getLabel()).toBe('Active');
+     * ```
+     */
+    async getLabel() {
+        const label = await this._label();
+        return (await label.text()).trim();
+    }
+    /**
+     * Gets the chip's color variant (`primary`, `secondary`, or `accent`).
+     *
+     * @returns Promise resolving to the chip's color.
+     *
+     * @example
+     * ```typescript
+     * const chip = await loader.getHarness(TnChipHarness);
+     * expect(await chip.getColor()).toBe('primary');
+     * ```
+     */
+    async getColor() {
+        const chip = await this._chip();
+        const classAttr = (await chip.getAttribute('class')) ?? '';
+        const match = classAttr.match(/tn-chip--(primary|secondary|accent)/);
+        return match?.[1] ?? 'primary';
+    }
+    /**
+     * Checks whether the chip is disabled.
+     *
+     * @returns Promise resolving to true if the chip is disabled.
+     *
+     * @example
+     * ```typescript
+     * const chip = await loader.getHarness(TnChipHarness);
+     * expect(await chip.isDisabled()).toBe(false);
+     * ```
+     */
+    async isDisabled() {
+        const chip = await this._chip();
+        return (await chip.getAttribute('aria-disabled')) === 'true';
+    }
+    /**
+     * Checks whether the chip renders a close (dismiss) button.
+     *
+     * @returns Promise resolving to true if the chip is closable.
+     *
+     * @example
+     * ```typescript
+     * const chip = await loader.getHarness(TnChipHarness);
+     * expect(await chip.isClosable()).toBe(true);
+     * ```
+     */
+    async isClosable() {
+        return (await this._closeButton()) !== null;
+    }
+    /**
+     * Checks whether the chip renders a leading icon.
+     *
+     * @returns Promise resolving to true if the chip has an icon.
+     *
+     * @example
+     * ```typescript
+     * const chip = await loader.getHarness(TnChipHarness);
+     * expect(await chip.hasIcon()).toBe(true);
+     * ```
+     */
+    async hasIcon() {
+        return (await this._icon()) !== null;
+    }
+    /**
+     * Clicks the chip body, triggering its `onClick` output.
+     *
+     * @returns Promise that resolves when the click action is complete.
+     *
+     * @example
+     * ```typescript
+     * const chip = await loader.getHarness(TnChipHarness.with({ label: 'Active' }));
+     * await chip.click();
+     * ```
+     */
+    async click() {
+        const chip = await this._chip();
+        return chip.click();
+    }
+    /**
+     * Clicks the chip's close button, triggering its `onClose` output.
+     * Throws if the chip is not closable.
+     *
+     * @returns Promise that resolves when the close action is complete.
+     *
+     * @example
+     * ```typescript
+     * const chip = await loader.getHarness(TnChipHarness.with({ label: 'Has SSH Access' }));
+     * await chip.close();
+     * ```
+     */
+    async close() {
+        const closeButton = await this._closeButton();
+        if (!closeButton) {
+            throw new Error('Cannot close a chip that is not closable (no close button rendered).');
+        }
+        return closeButton.click();
+    }
+}
+
 class TnCardHeaderDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TnCardHeaderDirective, isStandalone: true, selector: "[tnCardHeader]", ngImport: i0 });
@@ -16066,5 +16355,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, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, 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, 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, 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, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, 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, 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, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, formatSize, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, parseLabelMarkup, parseSize, registerLucideIcons, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
 //# sourceMappingURL=truenas-ui-components.mjs.map