@truenas/ui-components 0.3.5 → 0.3.7

package/fesm2022/truenas-ui-components.mjs

@@ -4375,20 +4375,37 @@ let nextId = 0;
  * committed to a chip on Enter (or a configurable separator key); Backspace on
  * an empty field removes the last chip.
  *
- * It is a `ControlValueAccessor` over `string[]`, so it drops into a reactive
- * or template-driven form (`[formControl]`, `[(ngModel)]`) and slots into a
- * `tn-form-field` as a real projected control — the field's required/error
- * inference reads this control directly.
+ * It is a `ControlValueAccessor` over `T[]` (defaulting to `string[]`), so it
+ * drops into a reactive or template-driven form (`[formControl]`, `[(ngModel)]`)
+ * and slots into a `tn-form-field` as a real projected control — the field's
+ * required/error inference reads this control directly.
  *
- * Suggestions are optional: pass `[suggestions]` for a static list, or drive
- * them asynchronously by listening to `(searchChange)` and updating
- * `[suggestions]` as results arrive. The dropdown is portaled through a CDK
- * overlay so it escapes any ancestor `overflow: hidden` (cards, side panels).
+ * **String mode (default).** Pass `[suggestions]` (a `string[]`) for typeahead;
+ * the typed/picked string is the value. Set `allowCustomValue=false` to restrict
+ * commits to the suggestion list.
+ *
+ * **Value mode.** Pass `[options]` (`{ label, value }[]`) to display labels while
+ * committing values — the model becomes `T[]`. A written value resolves to its
+ * option's label (falling back to `String(value)` until the option is
+ * available). Provide `[compareWith]` when the values are objects. Committing a
+ * typed string matches an option by label (case-insensitive); free text that
+ * matches no option is only accepted when `allowCustomValue` is `true` (which is
+ * only sound for string-valued inputs).
+ *
+ * Either source can be driven asynchronously by listening to `(searchChange)`
+ * and updating `[suggestions]`/`[options]` as results arrive. The dropdown is
+ * portaled through a CDK overlay so it escapes any ancestor `overflow: hidden`.
  *
  * @example
  * ```html
+ * <!-- string mode -->
  * <tn-form-field label="Tags">
- *   <tn-chip-input [formControl]="tags" placeholder="Add a tag…" />
+ *   <tn-chip-input [formControl]="tags" [suggestions]="tagSuggestions" />
+ * </tn-form-field>
+ *
+ * <!-- value mode: shows names, commits ids -->
+ * <tn-form-field label="Groups">
+ *   <tn-chip-input [formControl]="groupIds" [options]="groupOptions" [allowCustomValue]="false" />
  * </tn-form-field>
  * ```
  */
@@ -4409,21 +4426,43 @@ class TnChipInputComponent {
     separatorKeys = input(['Enter', ','], ...(ngDevMode ? [{ debugName: "separatorKeys" }] : []));
     /** Commit a pending (non-empty) text value as a chip when the field loses focus. */
     addOnBlur = input(false, ...(ngDevMode ? [{ debugName: "addOnBlur" }] : []));
+    /**
+     * Whether free text not matching any option/suggestion may be committed.
+     * Defaults to `true` — any typed value becomes a chip. Set `false` to restrict
+     * the field to its list (a "pick from the list" control): a commit only
+     * succeeds when the text matches an option/suggestion label (case-insensitive,
+     * committing the canonical entry); unmatched text is discarded. Mirrors
+     * `tn-autocomplete`'s `allowCustomValue`. In value mode, leave this `false` —
+     * fabricating a typed string as a non-string value is unsound.
+     */
+    allowCustomValue = input(true, ...(ngDevMode ? [{ debugName: "allowCustomValue" }] : []));
     /**
      * Allow the same value to be added more than once. Off by default.
-     * Duplicate detection is exact-match (case-sensitive), so with this off
-     * `Angular` and `angular` are still distinct values — only suggestion
-     * *filtering* is case-insensitive.
+     * Duplicate detection uses `compareWith` (or identity); string-mode matching
+     * is exact (case-sensitive), so `Angular` and `angular` are distinct — only
+     * the *filtering* of suggestions is case-insensitive.
      */
     allowDuplicates = input(false, ...(ngDevMode ? [{ debugName: "allowDuplicates" }] : []));
     /** Hard cap on the number of chips; `undefined` means no limit. */
     maxChips = input(undefined, ...(ngDevMode ? [{ debugName: "maxChips" }] : []));
     /**
-     * Optional suggestion list. When non-empty, a dropdown offers entries that
-     * match the typed text and are not already selected. For async sources,
-     * update this in response to `(searchChange)`.
+     * String-mode suggestion list. When non-empty, a dropdown offers entries that
+     * match the typed text and are not already selected. Ignored when `options`
+     * is provided. For async sources, update this in response to `(searchChange)`.
      */
     suggestions = input([], ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
+    /**
+     * Value-mode option list (`{ label, value }`). When non-empty, chips display
+     * the resolved `label` while the form model holds `value`s. Takes precedence
+     * over `suggestions`. For async sources, update in response to `(searchChange)`.
+     */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /**
+     * Comparator for value equality — used for de-duplication, display resolution
+     * and the selected-set. Defaults to identity (`===`), correct for primitives;
+     * provide this when values are objects (e.g. `(a, b) => a?.id === b?.id`).
+     */
+    compareWith = input(undefined, ...(ngDevMode ? [{ debugName: "compareWith" }] : []));
     /** Accessible name for the text field. Leave unset inside a `tn-form-field`. */
     ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     /**
@@ -4464,15 +4503,25 @@ class TnChipInputComponent {
         const max = this.maxChips();
         return max === undefined || this.values().length < max;
     }, ...(ngDevMode ? [{ debugName: "canAddMore" }] : []));
-    /** Suggestions that match the typed text and are not already selected. */
+    /**
+     * Unified option list. Value-mode `options` win; otherwise string-mode
+     * `suggestions` are lifted into `{ label: s, value: s }`.
+     */
+    optionList = computed(() => {
+        const opts = this.options();
+        if (opts.length) {
+            return opts;
+        }
+        return this.suggestions().map((suggestion) => ({ label: suggestion, value: suggestion }));
+    }, ...(ngDevMode ? [{ debugName: "optionList" }] : []));
+    /** Options matching the typed text and not already selected. */
     filteredSuggestions = computed(() => {
-        const selected = new Set(this.values());
         const term = this.inputValue().trim().toLowerCase();
-        return this.suggestions().filter((suggestion) => {
-            if (selected.has(suggestion)) {
+        return this.optionList().filter((option) => {
+            if (this.valuesIncludes(option.value)) {
                 return false;
             }
-            return term === '' || suggestion.toLowerCase().includes(term);
+            return term === '' || option.label.toLowerCase().includes(term);
         });
     }, ...(ngDevMode ? [{ debugName: "filteredSuggestions" }] : []));
     onChange = () => { };
@@ -4482,10 +4531,10 @@ class TnChipInputComponent {
     constructor() {
         // Async suggestions: when the user types, onInput runs syncDropdown()
         // against the still-stale list and leaves the panel closed; results land a
-        // tick later via [suggestions]. Re-open the panel once fresh matches arrive
-        // while the field is focused and actively searching. This only ever opens
-        // (never closes), so it doesn't fight Escape, blur, or the post-commit close
-        // — those stay shut until the suggestion set next changes.
+        // tick later via [suggestions]/[options]. Re-open the panel once fresh
+        // matches arrive while the field is focused and actively searching. This
+        // only ever opens (never closes), so it doesn't fight Escape, blur, or the
+        // post-commit close — those stay shut until the option set next changes.
         effect(() => {
             const hasMatches = this.filteredSuggestions().length > 0;
             untracked(() => {
@@ -4542,7 +4591,7 @@ class TnChipInputComponent {
     onBlur() {
         this.focused.set(false);
         if (this.addOnBlur()) {
-            this.addChip(this.inputValue());
+            this.commitText(this.inputValue());
         }
         this.close();
         this.onTouched();
@@ -4584,10 +4633,10 @@ class TnChipInputComponent {
             event.preventDefault();
             const idx = this.highlightedIndex();
             if (this.isOpen() && idx >= 0 && idx < suggestions.length) {
-                this.addChip(suggestions[idx]);
+                this.commitValue(suggestions[idx].value);
             }
             else {
-                this.addChip(this.inputValue());
+                this.commitText(this.inputValue());
             }
             return;
         }
@@ -4598,8 +4647,8 @@ class TnChipInputComponent {
             this.removeChip(this.values().length - 1);
         }
     }
-    onSuggestionClick(suggestion) {
-        this.addChip(suggestion);
+    onSuggestionClick(option) {
+        this.commitValue(option.value);
         this.inputEl().nativeElement.focus();
     }
     /** Prevents the option `mousedown` from blurring the input before the click lands. */
@@ -4611,7 +4660,7 @@ class TnChipInputComponent {
             return;
         }
         const removed = this.values()[index];
-        if (removed === undefined) {
+        if (index < 0 || index >= this.values().length) {
             return;
         }
         this.values.update((values) => values.filter((_, i) => i !== index));
@@ -4624,6 +4673,11 @@ class TnChipInputComponent {
         this.inputEl().nativeElement.focus();
         this.syncDropdown();
     }
+    /** The label shown on a chip for a committed value. */
+    displayLabel(value) {
+        const match = this.optionList().find((option) => this.valueMatches(option.value, value));
+        return match ? match.label : String(value);
+    }
     /** Scopes a per-chip test id beneath the component's base. */
     chipTestId(value) {
         const base = this.testId();
@@ -4636,12 +4690,29 @@ class TnChipInputComponent {
     isCommitKey(event) {
         return event.key === 'Enter' || this.separatorKeys().includes(event.key);
     }
-    addChip(raw) {
-        const value = (raw ?? '').trim();
-        if (!value || this.isDisabled() || !this.canAddMore()) {
+    /** Commits typed text: resolve it to an option's value, else accept as custom. */
+    commitText(raw) {
+        const text = (raw ?? '').trim();
+        if (!text) {
+            return;
+        }
+        const match = this.optionList().find((option) => option.label.toLowerCase() === text.toLowerCase());
+        if (match) {
+            this.commitValue(match.value);
+            return;
+        }
+        if (this.allowCustomValue()) {
+            this.commitValue(text);
+            return;
+        }
+        this.clearInput();
+    }
+    /** Commits a resolved value, honouring duplicate and cap rules. */
+    commitValue(value) {
+        if (this.isDisabled() || !this.canAddMore()) {
             return;
         }
-        if (!this.allowDuplicates() && this.values().includes(value)) {
+        if (!this.allowDuplicates() && this.valuesIncludes(value)) {
             this.clearInput();
             return;
         }
@@ -4651,6 +4722,13 @@ class TnChipInputComponent {
         this.chipAdded.emit(value);
         this.clearInput();
     }
+    valuesIncludes(value) {
+        return this.values().some((existing) => this.valueMatches(existing, value));
+    }
+    valueMatches(a, b) {
+        const comparator = this.compareWith();
+        return comparator ? comparator(a, b) : a === b;
+    }
     clearInput() {
         this.inputValue.set('');
         this.inputEl().nativeElement.value = '';
@@ -4659,7 +4737,7 @@ class TnChipInputComponent {
     /**
      * Opens the dropdown when there is something to show, closes it otherwise.
      * Stays closed once the chip cap is reached — suggesting rows that
-     * `addChip()` would reject is misleading.
+     * `commitValue()` would reject is misleading.
      */
     syncDropdown() {
         if (this.filteredSuggestions().length > 0 && this.canAddMore() && !this.isDisabled()) {
@@ -4719,13 +4797,13 @@ class TnChipInputComponent {
         this.overlayRef = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnChipInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnChipInputComponent, isStandalone: true, selector: "tn-chip-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, separatorKeys: { classPropertyName: "separatorKeys", publicName: "separatorKeys", isSignal: true, isRequired: false, transformFunction: null }, addOnBlur: { classPropertyName: "addOnBlur", publicName: "addOnBlur", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, maxChips: { classPropertyName: "maxChips", publicName: "maxChips", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chipAdded: "chipAdded", chipRemoved: "chipRemoved", searchChange: "searchChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnChipInputComponent, isStandalone: true, selector: "tn-chip-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, separatorKeys: { classPropertyName: "separatorKeys", publicName: "separatorKeys", isSignal: true, isRequired: false, transformFunction: null }, addOnBlur: { classPropertyName: "addOnBlur", publicName: "addOnBlur", isSignal: true, isRequired: false, transformFunction: null }, allowCustomValue: { classPropertyName: "allowCustomValue", publicName: "allowCustomValue", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, maxChips: { classPropertyName: "maxChips", publicName: "maxChips", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chipAdded: "chipAdded", chipRemoved: "chipRemoved", searchChange: "searchChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TnChipInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Click-to-focus is a pointer affordance only; keyboard users Tab straight to\n     the real <input> inside, so the container itself is not a focus target. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  #container\n  class=\"tn-chip-input\"\n  [class.tn-chip-input--disabled]=\"isDisabled()\"\n  (click)=\"focusInput()\"\n>\n  @for (value of values(); track $index) {\n    <tn-chip\n      class=\"tn-chip-input__chip\"\n      color=\"secondary\"\n      [label]=\"value\"\n      [closable]=\"!isDisabled()\"\n      [disabled]=\"isDisabled()\"\n      [testId]=\"chipTestId(value)\"\n      (onClose)=\"removeChip($index)\"\n    />\n  }\n\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-chip-input__field\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    tnTestIdType=\"chip-input\"\n    [tnTestId]=\"testId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-listbox' : 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  />\n</div>\n\n<!-- Suggestion dropdown \u2014 portaled via CDK overlay so it escapes ancestor\n     overflow/clipping. Attach/detach is driven by open()/close(). -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-chip-input__dropdown\"\n    role=\"listbox\"\n    [attr.id]=\"uid + '-listbox'\"\n  >\n    @for (suggestion of filteredSuggestions(); track suggestion) {\n      <!-- Options are tabindex=\"-1\" and never focused: keyboard selection goes\n           through the input's aria-activedescendant + the Enter branch in\n           onKeydown, so a key handler here would be dead code. Click is a\n           pointer-only affordance. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n      <div\n        class=\"tn-chip-input__option\"\n        role=\"option\"\n        tabindex=\"-1\"\n        tnTestIdType=\"option\"\n        [tnTestId]=\"chipTestId(suggestion)\"\n        [class.highlighted]=\"highlightedIndex() === $index\"\n        [attr.id]=\"uid + '-option-' + $index\"\n        [attr.aria-selected]=\"highlightedIndex() === $index\"\n        (mousedown)=\"onSuggestionMousedown($event)\"\n        (click)=\"onSuggestionClick(suggestion)\"\n      >\n        {{ suggestion }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".tn-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;min-height:2.5rem;padding:.375rem .5rem;box-sizing:border-box;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:text;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-chip-input:focus-within{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-chip-input--disabled{background-color:var(--tn-alt-bg1, #f8f9fa);opacity:.6;cursor:not-allowed}.tn-chip-input__chip{flex-shrink:0}.tn-chip-input__field{flex:1;min-width:120px;padding:.25rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background:transparent;border:none;outline:none}.tn-chip-input__field::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-chip-input__field:disabled{cursor:not-allowed}.tn-chip-input__dropdown{max-height:var(--tn-chip-input-panel-max-height, 320px);overflow-y:auto;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.tn-chip-input__option{padding:.5rem .75rem;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;font-size:1rem;color:var(--tn-fg1, #212529);cursor:pointer}.tn-chip-input__option:hover,.tn-chip-input__option.highlighted{background-color:var(--tn-bg3, #f3f4f6)}@media(prefers-reduced-motion:reduce){.tn-chip-input{transition:none}}@media(prefers-contrast:high){.tn-chip-input{border-width:2px}}\n"], dependencies: [{ kind: "component", type: TnChipComponent, selector: "tn-chip", inputs: ["label", "icon", "closable", "disabled", "color", "testId"], outputs: ["onClose", "onClick"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
+        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Click-to-focus is a pointer affordance only; keyboard users Tab straight to\n     the real <input> inside, so the container itself is not a focus target. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  #container\n  class=\"tn-chip-input\"\n  [class.tn-chip-input--disabled]=\"isDisabled()\"\n  (click)=\"focusInput()\"\n>\n  @for (value of values(); track $index) {\n    <tn-chip\n      class=\"tn-chip-input__chip\"\n      color=\"secondary\"\n      [label]=\"displayLabel(value)\"\n      [closable]=\"!isDisabled()\"\n      [disabled]=\"isDisabled()\"\n      [testId]=\"chipTestId(value)\"\n      (onClose)=\"removeChip($index)\"\n    />\n  }\n\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-chip-input__field\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    tnTestIdType=\"chip-input\"\n    [tnTestId]=\"testId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-listbox' : 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  />\n</div>\n\n<!-- Suggestion dropdown \u2014 portaled via CDK overlay so it escapes ancestor\n     overflow/clipping. Attach/detach is driven by open()/close(). -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-chip-input__dropdown\"\n    role=\"listbox\"\n    [attr.id]=\"uid + '-listbox'\"\n  >\n    @for (suggestion of filteredSuggestions(); track $index) {\n      <!-- Options are tabindex=\"-1\" and never focused: keyboard selection goes\n           through the input's aria-activedescendant + the Enter branch in\n           onKeydown, so a key handler here would be dead code. Click is a\n           pointer-only affordance. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n      <div\n        class=\"tn-chip-input__option\"\n        role=\"option\"\n        tabindex=\"-1\"\n        tnTestIdType=\"option\"\n        [tnTestId]=\"chipTestId(suggestion.value)\"\n        [class.highlighted]=\"highlightedIndex() === $index\"\n        [attr.id]=\"uid + '-option-' + $index\"\n        [attr.aria-selected]=\"highlightedIndex() === $index\"\n        (mousedown)=\"onSuggestionMousedown($event)\"\n        (click)=\"onSuggestionClick(suggestion)\"\n      >\n        {{ suggestion.label }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".tn-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;min-height:2.5rem;padding:.375rem .5rem;box-sizing:border-box;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:text;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-chip-input:focus-within{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-chip-input--disabled{background-color:var(--tn-alt-bg1, #f8f9fa);opacity:.6;cursor:not-allowed}.tn-chip-input__chip{flex-shrink:0}.tn-chip-input__field{flex:1;min-width:120px;padding:.25rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background:transparent;border:none;outline:none}.tn-chip-input__field::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-chip-input__field:disabled{cursor:not-allowed}.tn-chip-input__dropdown{max-height:var(--tn-chip-input-panel-max-height, 320px);overflow-y:auto;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.tn-chip-input__option{padding:.5rem .75rem;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;font-size:1rem;color:var(--tn-fg1, #212529);cursor:pointer}.tn-chip-input__option:hover,.tn-chip-input__option.highlighted{background-color:var(--tn-bg3, #f3f4f6)}@media(prefers-reduced-motion:reduce){.tn-chip-input{transition:none}}@media(prefers-contrast:high){.tn-chip-input{border-width:2px}}\n"], dependencies: [{ kind: "component", type: TnChipComponent, selector: "tn-chip", inputs: ["label", "icon", "closable", "disabled", "color", "testId"], outputs: ["onClose", "onClick"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnChipInputComponent, decorators: [{
             type: Component,
@@ -4735,8 +4813,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                             useExisting: forwardRef(() => TnChipInputComponent),
                             multi: true,
                         },
-                    ], template: "<!-- Click-to-focus is a pointer affordance only; keyboard users Tab straight to\n     the real <input> inside, so the container itself is not a focus target. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  #container\n  class=\"tn-chip-input\"\n  [class.tn-chip-input--disabled]=\"isDisabled()\"\n  (click)=\"focusInput()\"\n>\n  @for (value of values(); track $index) {\n    <tn-chip\n      class=\"tn-chip-input__chip\"\n      color=\"secondary\"\n      [label]=\"value\"\n      [closable]=\"!isDisabled()\"\n      [disabled]=\"isDisabled()\"\n      [testId]=\"chipTestId(value)\"\n      (onClose)=\"removeChip($index)\"\n    />\n  }\n\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-chip-input__field\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    tnTestIdType=\"chip-input\"\n    [tnTestId]=\"testId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-listbox' : 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  />\n</div>\n\n<!-- Suggestion dropdown \u2014 portaled via CDK overlay so it escapes ancestor\n     overflow/clipping. Attach/detach is driven by open()/close(). -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-chip-input__dropdown\"\n    role=\"listbox\"\n    [attr.id]=\"uid + '-listbox'\"\n  >\n    @for (suggestion of filteredSuggestions(); track suggestion) {\n      <!-- Options are tabindex=\"-1\" and never focused: keyboard selection goes\n           through the input's aria-activedescendant + the Enter branch in\n           onKeydown, so a key handler here would be dead code. Click is a\n           pointer-only affordance. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n      <div\n        class=\"tn-chip-input__option\"\n        role=\"option\"\n        tabindex=\"-1\"\n        tnTestIdType=\"option\"\n        [tnTestId]=\"chipTestId(suggestion)\"\n        [class.highlighted]=\"highlightedIndex() === $index\"\n        [attr.id]=\"uid + '-option-' + $index\"\n        [attr.aria-selected]=\"highlightedIndex() === $index\"\n        (mousedown)=\"onSuggestionMousedown($event)\"\n        (click)=\"onSuggestionClick(suggestion)\"\n      >\n        {{ suggestion }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".tn-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;min-height:2.5rem;padding:.375rem .5rem;box-sizing:border-box;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:text;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-chip-input:focus-within{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-chip-input--disabled{background-color:var(--tn-alt-bg1, #f8f9fa);opacity:.6;cursor:not-allowed}.tn-chip-input__chip{flex-shrink:0}.tn-chip-input__field{flex:1;min-width:120px;padding:.25rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background:transparent;border:none;outline:none}.tn-chip-input__field::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-chip-input__field:disabled{cursor:not-allowed}.tn-chip-input__dropdown{max-height:var(--tn-chip-input-panel-max-height, 320px);overflow-y:auto;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.tn-chip-input__option{padding:.5rem .75rem;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;font-size:1rem;color:var(--tn-fg1, #212529);cursor:pointer}.tn-chip-input__option:hover,.tn-chip-input__option.highlighted{background-color:var(--tn-bg3, #f3f4f6)}@media(prefers-reduced-motion:reduce){.tn-chip-input{transition:none}}@media(prefers-contrast:high){.tn-chip-input{border-width:2px}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], separatorKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorKeys", required: false }] }], addOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnBlur", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], maxChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxChips", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], chipAdded: [{ type: i0.Output, args: ["chipAdded"] }], chipRemoved: [{ type: i0.Output, args: ["chipRemoved"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }] } });
+                    ], template: "<!-- Click-to-focus is a pointer affordance only; keyboard users Tab straight to\n     the real <input> inside, so the container itself is not a focus target. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  #container\n  class=\"tn-chip-input\"\n  [class.tn-chip-input--disabled]=\"isDisabled()\"\n  (click)=\"focusInput()\"\n>\n  @for (value of values(); track $index) {\n    <tn-chip\n      class=\"tn-chip-input__chip\"\n      color=\"secondary\"\n      [label]=\"displayLabel(value)\"\n      [closable]=\"!isDisabled()\"\n      [disabled]=\"isDisabled()\"\n      [testId]=\"chipTestId(value)\"\n      (onClose)=\"removeChip($index)\"\n    />\n  }\n\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"tn-chip-input__field\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    tnTestIdType=\"chip-input\"\n    [tnTestId]=\"testId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"isOpen() ? uid + '-listbox' : 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  />\n</div>\n\n<!-- Suggestion dropdown \u2014 portaled via CDK overlay so it escapes ancestor\n     overflow/clipping. Attach/detach is driven by open()/close(). -->\n<ng-template #dropdownTemplate>\n  <div\n    class=\"tn-chip-input__dropdown\"\n    role=\"listbox\"\n    [attr.id]=\"uid + '-listbox'\"\n  >\n    @for (suggestion of filteredSuggestions(); track $index) {\n      <!-- Options are tabindex=\"-1\" and never focused: keyboard selection goes\n           through the input's aria-activedescendant + the Enter branch in\n           onKeydown, so a key handler here would be dead code. Click is a\n           pointer-only affordance. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n      <div\n        class=\"tn-chip-input__option\"\n        role=\"option\"\n        tabindex=\"-1\"\n        tnTestIdType=\"option\"\n        [tnTestId]=\"chipTestId(suggestion.value)\"\n        [class.highlighted]=\"highlightedIndex() === $index\"\n        [attr.id]=\"uid + '-option-' + $index\"\n        [attr.aria-selected]=\"highlightedIndex() === $index\"\n        (mousedown)=\"onSuggestionMousedown($event)\"\n        (click)=\"onSuggestionClick(suggestion)\"\n      >\n        {{ suggestion.label }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".tn-chip-input{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;min-height:2.5rem;padding:.375rem .5rem;box-sizing:border-box;width:100%;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;cursor:text;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tn-chip-input:focus-within{border-color:var(--tn-primary, #007bff);box-shadow:0 0 0 2px color-mix(in srgb,var(--tn-primary, #007bff) 25%,transparent)}.tn-chip-input--disabled{background-color:var(--tn-alt-bg1, #f8f9fa);opacity:.6;cursor:not-allowed}.tn-chip-input__chip{flex-shrink:0}.tn-chip-input__field{flex:1;min-width:120px;padding:.25rem;font-size:1rem;line-height:1.5;color:var(--tn-fg1, #212529);background:transparent;border:none;outline:none}.tn-chip-input__field::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-chip-input__field:disabled{cursor:not-allowed}.tn-chip-input__dropdown{max-height:var(--tn-chip-input-panel-max-height, 320px);overflow-y:auto;background-color:var(--tn-bg1, #ffffff);border:1px solid var(--tn-lines, #d1d5db);border-radius:.375rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.tn-chip-input__option{padding:.5rem .75rem;font-family:var(--tn-font-family-body, \"Inter\"),sans-serif;font-size:1rem;color:var(--tn-fg1, #212529);cursor:pointer}.tn-chip-input__option:hover,.tn-chip-input__option.highlighted{background-color:var(--tn-bg3, #f3f4f6)}@media(prefers-reduced-motion:reduce){.tn-chip-input{transition:none}}@media(prefers-contrast:high){.tn-chip-input{border-width:2px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], separatorKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorKeys", required: false }] }], addOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnBlur", required: false }] }], allowCustomValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomValue", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], maxChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxChips", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], chipAdded: [{ type: i0.Output, args: ["chipAdded"] }], chipRemoved: [{ type: i0.Output, args: ["chipRemoved"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }] } });
 
 /**
  * Harness for interacting with `tn-chip-input` in tests. Reads the committed