@truenas/ui-components 0.3.4 → 0.3.6

package/fesm2022/truenas-ui-components.mjs

@@ -261,13 +261,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tnTestId", required: false }] }], tnTestIdType: [{ type: i0.Input, args: [{ isSignal: true, alias: "tnTestIdType", required: false }] }] } });
 
-let nextId$1 = 0;
+let nextId$2 = 0;
 class TnAutocompleteComponent {
     elementRef = inject(ElementRef);
     overlay = inject(Overlay);
     viewContainerRef = inject(ViewContainerRef);
     /** Unique instance ID for ARIA linkage */
-    uid = `tn-autocomplete-${nextId$1++}`;
+    uid = `tn-autocomplete-${nextId$2++}`;
     /**
      * 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
@@ -3208,7 +3208,7 @@ function unitExponent(unit) {
 // Module-level counter for deterministic, unique instance ids (matches the
 // tn-autocomplete convention). Deterministic ids are SSR/hydration-safe and
 // stable across snapshots, unlike a Math.random() seed.
-let nextId = 0;
+let nextId$1 = 0;
 class TnInputComponent {
     inputEl = viewChild.required('inputEl');
     inputType = input(InputType.PlainText, ...(ngDevMode ? [{ debugName: "inputType" }] : []));
@@ -3372,7 +3372,7 @@ class TnInputComponent {
     // Unique per instance: a hard-coded id produced duplicate ids when multiple
     // tn-inputs share a page (invalid HTML, and it breaks any future label `for=`,
     // aria-describedby, or getElementById targeting this input).
-    id = `tn-input-${nextId++}`;
+    id = `tn-input-${nextId$1++}`;
     // Protected: the display string is owned by the component and driven through the
     // CVA flow (writeValue / onValueChange). External writes would bypass that flow.
     // A signal so the `[value]` binding reflects writeValue reactively — a plain field
@@ -4368,6 +4368,495 @@ class TnChipHarness extends ComponentHarness {
     }
 }
 
+let nextId = 0;
+/**
+ * An editable, multi-value chip input — tokenized entry where typed text
+ * becomes removable `tn-chip`s alongside an inline text field. Text is
+ * 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.
+ *
+ * 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).
+ *
+ * @example
+ * ```html
+ * <tn-form-field label="Tags">
+ *   <tn-chip-input [formControl]="tags" placeholder="Add a tag…" />
+ * </tn-form-field>
+ * ```
+ */
+class TnChipInputComponent {
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    /** Unique instance id for ARIA linkage between the input and its dropdown. */
+    uid = `tn-chip-input-${nextId++}`;
+    /** Placeholder shown in the text field when it is empty. */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Disables the whole control — chips become non-removable and the field read-only. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Keys that commit the current text as a chip, in addition to `Enter`.
+     * Defaults to `Enter` plus comma. A separator key press never inserts its
+     * own character.
+     */
+    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 present in `suggestions` may be committed. Defaults to
+     * `true` — any typed value becomes a chip. Set `false` to restrict the field
+     * to its suggestion list (a "pick from the list" control): a commit only
+     * succeeds when the text matches a suggestion (case-insensitively, committing
+     * the suggestion's canonical casing); unmatched text is discarded. Mirrors
+     * `tn-autocomplete`'s `allowCustomValue`. With no `suggestions`, nothing can be
+     * added.
+     */
+    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.
+     */
+    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)`.
+     */
+    suggestions = input([], ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
+    /** Accessible name for the text field. Leave unset inside a `tn-form-field`. */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /**
+     * Semantic test-id base. The library prepends the `chip-input` element type
+     * (e.g. `testId="tags"` → `chip-input-tags`); each chip and suggestion is
+     * scoped beneath it.
+     */
+    testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
+    /** Emits the committed value whenever a chip is added. */
+    chipAdded = output();
+    /** Emits the removed value whenever a chip is removed. */
+    chipRemoved = output();
+    /**
+     * Emits the current text as the user types (not on programmatic writes or
+     * chip commits). Drive server-side suggestion lookups from this; debounce in
+     * the consumer if the lookup is expensive.
+     */
+    searchChange = output();
+    container = viewChild.required('container');
+    inputEl = viewChild.required('inputEl');
+    dropdownTemplate = viewChild.required('dropdownTemplate');
+    /** Committed chip values — the form model. */
+    values = signal([], ...(ngDevMode ? [{ debugName: "values" }] : []));
+    /** Current text in the field. */
+    inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
+    /** Whether the suggestion dropdown is open. */
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /** Index of the keyboard-highlighted suggestion, or -1. */
+    highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : []));
+    /** Whether the text field currently holds focus — gates async re-opening. */
+    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    /** CVA disabled state pushed by the form. */
+    formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
+    /** Combined disabled state from the input and the form. */
+    isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    /** Whether another chip may still be added under `maxChips`. */
+    canAddMore = computed(() => {
+        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. */
+    filteredSuggestions = computed(() => {
+        const selected = new Set(this.values());
+        const term = this.inputValue().trim().toLowerCase();
+        return this.suggestions().filter((suggestion) => {
+            if (selected.has(suggestion)) {
+                return false;
+            }
+            return term === '' || suggestion.toLowerCase().includes(term);
+        });
+    }, ...(ngDevMode ? [{ debugName: "filteredSuggestions" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    overlayRef;
+    overlaySubs = [];
+    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.
+        effect(() => {
+            const hasMatches = this.filteredSuggestions().length > 0;
+            untracked(() => {
+                const activelySearching = this.focused()
+                    && this.inputValue().trim() !== ''
+                    && this.canAddMore()
+                    && !this.isDisabled();
+                if (hasMatches && activelySearching) {
+                    this.open();
+                }
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.detachOverlay();
+    }
+    // ── ControlValueAccessor ──
+    writeValue(value) {
+        // Reflect the model verbatim — deliberately NOT clamped to maxChips. A form
+        // may legitimately seed more values than the cap; silently dropping them
+        // would lose data. The cap only blocks further user-driven additions.
+        this.values.set(Array.isArray(value) ? [...value] : []);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+        if (isDisabled) {
+            this.close();
+        }
+    }
+    // ── Template handlers ──
+    /** Clicking anywhere in the container focuses the text field. */
+    focusInput() {
+        if (!this.isDisabled()) {
+            this.inputEl().nativeElement.focus();
+        }
+    }
+    onInput(event) {
+        const value = event.target.value;
+        this.inputValue.set(value);
+        this.searchChange.emit(value);
+        this.highlightedIndex.set(-1);
+        this.syncDropdown();
+    }
+    onFocus() {
+        this.focused.set(true);
+        this.syncDropdown();
+    }
+    onBlur() {
+        this.focused.set(false);
+        if (this.addOnBlur()) {
+            this.addChip(this.inputValue());
+        }
+        this.close();
+        this.onTouched();
+    }
+    onKeydown(event) {
+        // Mid-IME-composition (Japanese/Chinese/Korean), the Enter that confirms a
+        // candidate also fires keydown with isComposing=true — committing here would
+        // swallow the confirmation and chip a half-composed value. Let it through.
+        if (event.isComposing) {
+            return;
+        }
+        const suggestions = this.filteredSuggestions();
+        if (event.key === 'ArrowDown') {
+            if (suggestions.length && this.canAddMore()) {
+                event.preventDefault();
+                this.open();
+                this.highlightedIndex.set((this.highlightedIndex() + 1) % suggestions.length);
+                this.scrollToHighlighted();
+            }
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            if (suggestions.length && this.isOpen()) {
+                event.preventDefault();
+                const next = this.highlightedIndex() - 1;
+                this.highlightedIndex.set(next < 0 ? suggestions.length - 1 : next);
+                this.scrollToHighlighted();
+            }
+            return;
+        }
+        if (event.key === 'Escape') {
+            if (this.isOpen()) {
+                event.preventDefault();
+                this.close();
+            }
+            return;
+        }
+        if (this.isCommitKey(event)) {
+            event.preventDefault();
+            const idx = this.highlightedIndex();
+            if (this.isOpen() && idx >= 0 && idx < suggestions.length) {
+                this.addChip(suggestions[idx]);
+            }
+            else {
+                this.addChip(this.inputValue());
+            }
+            return;
+        }
+        // Backspace on an empty field removes the last chip — the standard
+        // chip-input affordance for quick correction.
+        if (event.key === 'Backspace' && this.inputValue() === '' && this.values().length > 0) {
+            event.preventDefault();
+            this.removeChip(this.values().length - 1);
+        }
+    }
+    onSuggestionClick(suggestion) {
+        this.addChip(suggestion);
+        this.inputEl().nativeElement.focus();
+    }
+    /** Prevents the option `mousedown` from blurring the input before the click lands. */
+    onSuggestionMousedown(event) {
+        event.preventDefault();
+    }
+    removeChip(index) {
+        if (this.isDisabled()) {
+            return;
+        }
+        const removed = this.values()[index];
+        if (removed === undefined) {
+            return;
+        }
+        this.values.update((values) => values.filter((_, i) => i !== index));
+        this.onChange(this.values());
+        this.onTouched();
+        this.chipRemoved.emit(removed);
+        // Removing via a chip's close button leaves focus on the (now-destroyed)
+        // button; return it to the field so keyboard users stay oriented. The
+        // Backspace path is already focused here, so this is a harmless no-op there.
+        this.inputEl().nativeElement.focus();
+        this.syncDropdown();
+    }
+    /** Scopes a per-chip test id beneath the component's base. */
+    chipTestId(value) {
+        const base = this.testId();
+        if (base === undefined) {
+            return undefined;
+        }
+        return [...(Array.isArray(base) ? base : [base]), value];
+    }
+    // ── Internal ──
+    isCommitKey(event) {
+        return event.key === 'Enter' || this.separatorKeys().includes(event.key);
+    }
+    addChip(raw) {
+        let value = (raw ?? '').trim();
+        if (!value || this.isDisabled() || !this.canAddMore()) {
+            return;
+        }
+        if (!this.allowCustomValue()) {
+            // Restricted to the suggestion list: commit the canonical suggestion when
+            // the text matches one (case-insensitively), otherwise discard it.
+            const match = this.suggestions().find((suggestion) => suggestion.toLowerCase() === value.toLowerCase());
+            if (!match) {
+                this.clearInput();
+                return;
+            }
+            value = match;
+        }
+        if (!this.allowDuplicates() && this.values().includes(value)) {
+            this.clearInput();
+            return;
+        }
+        this.values.update((values) => [...values, value]);
+        this.onChange(this.values());
+        this.onTouched();
+        this.chipAdded.emit(value);
+        this.clearInput();
+    }
+    clearInput() {
+        this.inputValue.set('');
+        this.inputEl().nativeElement.value = '';
+        this.close();
+    }
+    /**
+     * 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.
+     */
+    syncDropdown() {
+        if (this.filteredSuggestions().length > 0 && this.canAddMore() && !this.isDisabled()) {
+            this.open();
+        }
+        else {
+            this.close();
+        }
+    }
+    /** Keeps the keyboard-highlighted suggestion visible within the scrolling panel. */
+    scrollToHighlighted() {
+        const idx = this.highlightedIndex();
+        const options = this.overlayRef?.overlayElement
+            ?.querySelectorAll('.tn-chip-input__option');
+        options?.[idx]?.scrollIntoView({ block: 'nearest' });
+    }
+    open() {
+        if (this.isOpen() || this.isDisabled()) {
+            return;
+        }
+        this.isOpen.set(true);
+        this.attachOverlay();
+    }
+    close() {
+        this.isOpen.set(false);
+        this.highlightedIndex.set(-1);
+        this.detachOverlay();
+    }
+    attachOverlay() {
+        const anchor = this.container().nativeElement;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(anchor)
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+        ]);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: false,
+            width: anchor.offsetWidth,
+        });
+        this.overlayRef.attach(new TemplatePortal(this.dropdownTemplate(), this.viewContainerRef));
+        this.overlaySubs.push(this.overlayRef.outsidePointerEvents().subscribe((event) => {
+            const target = event.target;
+            if (target && anchor.contains(target)) {
+                return;
+            }
+            this.close();
+        }));
+    }
+    detachOverlay() {
+        this.overlaySubs.forEach((sub) => sub.unsubscribe());
+        this.overlaySubs = [];
+        this.overlayRef?.dispose();
+        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 }, 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 }, 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnChipInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tn-chip-input', standalone: true, imports: [TnChipComponent, TnTestIdDirective], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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 }] }], 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 }] }], 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
+ * chips and drives the text field — adding values (optionally via the
+ * suggestion dropdown) and removing them.
+ *
+ * @example
+ * ```typescript
+ * const tags = await loader.getHarness(TnChipInputHarness.with({ testId: 'chip-input-tags' }));
+ * await tags.addChip('production');
+ * expect(await tags.getChips()).toEqual(['production']);
+ * await tags.removeChip('production');
+ * ```
+ */
+class TnChipInputHarness extends ComponentHarness {
+    static hostSelector = 'tn-chip-input';
+    _input = this.locatorFor('.tn-chip-input__field');
+    getChipHarnesses = this.locatorForAll(TnChipHarness);
+    /** Suggestion options live in a CDK overlay on the document root. */
+    documentRoot = this.documentRootLocatorFactory();
+    static with(options = {}) {
+        return new HarnessPredicate(TnChipInputHarness, options)
+            .addOption('testId', options.testId, async (harness, testId) => (await (await harness._input()).getAttribute('data-testid')) === testId
+            || (await (await harness._input()).getAttribute('data-test')) === testId);
+    }
+    /** Labels of the currently committed chips, in order. */
+    async getChips() {
+        const chips = await this.getChipHarnesses();
+        const labels = [];
+        for (const chip of chips) {
+            labels.push(await chip.getLabel());
+        }
+        return labels;
+    }
+    /** Types `value` into the field and commits it with Enter. */
+    async addChip(value) {
+        const input = await this._input();
+        await input.focus();
+        await input.setInputValue(value);
+        await input.dispatchEvent('input');
+        await input.sendKeys(TestKey.ENTER);
+    }
+    /** Types `value` into the field without committing it. */
+    async typeText(value) {
+        const input = await this._input();
+        await input.focus();
+        await input.setInputValue(value);
+        await input.dispatchEvent('input');
+    }
+    /** Whether the text field currently holds DOM focus. */
+    async isInputFocused() {
+        return (await this._input()).isFocused();
+    }
+    /** Focuses the text field (opens the dropdown when there are suggestions). */
+    async focus() {
+        await (await this._input()).focus();
+    }
+    /** Blurs the text field. */
+    async blur() {
+        await (await this._input()).blur();
+    }
+    /** Sends a key (or `TestKey`) to the focused field — e.g. Backspace, arrows, a separator. */
+    async pressKey(key) {
+        await (await this._input()).sendKeys(key);
+    }
+    /** Types `value`, then commits the matching suggestion from the dropdown. */
+    async selectSuggestion(value) {
+        const input = await this._input();
+        await input.focus();
+        await input.setInputValue(value);
+        await input.dispatchEvent('input');
+        const options = await this.documentRoot.locatorForAll('.tn-chip-input__option')();
+        for (const option of options) {
+            if ((await option.text()).trim() === value) {
+                await option.click();
+                return;
+            }
+        }
+        throw new Error(`No suggestion matching "${value}" was found.`);
+    }
+    /** Removes the chip with the given label via its close button. */
+    async removeChip(value) {
+        const chip = await this.locatorFor(TnChipHarness.with({ label: value }))();
+        await chip.close();
+    }
+    /** Visible suggestion option texts, or `[]` when the dropdown is closed. */
+    async getSuggestions() {
+        const options = await this.documentRoot.locatorForAll('.tn-chip-input__option')();
+        const texts = [];
+        for (const option of options) {
+            texts.push((await option.text()).trim());
+        }
+        return texts;
+    }
+    async isDisabled() {
+        const input = await this._input();
+        return (await input.getProperty('disabled')) === true;
+    }
+}
+
 /**
  * Marks an `<ng-template>` whose content is rendered as the card's footer actions,
  * bottom-right in the footer after any declarative `secondaryAction`/`primaryAction`
@@ -16512,5 +17001,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_FORM_FIELD_ERRORS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, 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, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, 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, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnFormFieldHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioHarness, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, 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