@truenas/ui-components 0.2.6 → 0.3.0

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.