@cdevhub/ngx-tw 0.2.0

package/fesm2022/cdevhub-ngx-tw-combobox.mjs

@@ -0,0 +1,1721 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, signal, computed, ChangeDetectionStrategy, Component, TemplateRef, Directive, input, model, output, contentChild, viewChild, ViewContainerRef, Injector, DestroyRef, linkedSignal, effect, untracked, forwardRef } from '@angular/core';
+import { NgControl, NgForm, FormGroupDirective } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { merge } from 'rxjs';
+import { TW_ERROR_STATE_MATCHER, buildSelectLikePositions, resolveSelectScrollStrategy, consumeOverlayEscape } from '@cdevhub/ngx-tw/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Platform } from '@angular/cdk/platform';
+import { FocusMonitor, LiveAnnouncer } from '@angular/cdk/a11y';
+import { tv } from 'tailwind-variants';
+import { FormFieldComponent, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
+import { NgTemplateOutlet } from '@angular/common';
+
+/**
+ * Internal overlay panel for `tw-combobox`. Renders the listbox region with
+ * grouped/flat option rows, the loading slot, and the empty fallback. Not
+ * exported from the public API — instances are attached via `ComponentPortal`
+ * by the parent `ComboboxComponent`.
+ */
+class ComboboxOverlayComponent {
+    /** @internal */
+    hostElement = inject((ElementRef));
+    // ── Config signals pushed by the parent ──
+    /** @internal */
+    listboxId = signal('', ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    labelledBy = signal('', ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    panelMaxHeight = signal(256, ...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    emptyMessage = signal('No results', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    renderedRows = signal([], ...(ngDevMode ? [{ debugName: "renderedRows" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    isSelected = signal(() => false, ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    optionIdFn = signal((i) => `option-${i}`, ...(ngDevMode ? [{ debugName: "optionIdFn" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    groupHeaderIdFn = signal((g) => `group-${g}`, ...(ngDevMode ? [{ debugName: "groupHeaderIdFn" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    customPanelClass = signal('', ...(ngDevMode ? [{ debugName: "customPanelClass" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    optionTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    emptyTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    loadingTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "loadingTemplate" }] : /* istanbul ignore next */ []));
+    // ── Callbacks pushed by the parent ──
+    /** @internal */
+    onOptionPick = signal(() => { }, ...(ngDevMode ? [{ debugName: "onOptionPick" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    onOptionHover = signal(() => { }, ...(ngDevMode ? [{ debugName: "onOptionHover" }] : /* istanbul ignore next */ []));
+    // ── Computed classes ──
+    /** @internal */
+    panelClasses = computed(() => {
+        const base = 'block w-full bg-surface-overlay border border-border rounded-md shadow-md overflow-hidden';
+        const custom = this.customPanelClass();
+        return custom ? `${base} ${custom}` : base;
+    }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    optionClass(index, disabled) {
+        const base = 'flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-fg select-none transition-colors duration-normal motion-reduce:transition-none';
+        const parts = [base];
+        if (disabled) {
+            parts.push('opacity-50 pointer-events-none cursor-default');
+        }
+        else if (this.activeIndex() === index) {
+            parts.push('bg-surface-muted');
+        }
+        else {
+            parts.push('hover:bg-surface-muted');
+        }
+        return parts.join(' ');
+    }
+    /** @internal */
+    groupHeaderId(group) {
+        return this.groupHeaderIdFn()(group);
+    }
+    /** @internal */
+    buildOptionContext(index, option) {
+        return {
+            $implicit: option.option,
+            option: option.option,
+            label: option.label,
+            value: option.value,
+            selected: this.isSelected()(index),
+            active: this.activeIndex() === index,
+            disabled: option.disabled,
+            index,
+        };
+    }
+    /** @internal track function for `@for`. */
+    trackRow(_index, row) {
+        if (row.kind === 'group')
+            return `g:${row.group}`;
+        return `o:${row.index}`;
+    }
+    // ── Interactions ──
+    /** @internal — `preventDefault` on mousedown keeps DOM focus on the input. */
+    onOptionMousedown(event, _index) {
+        event.preventDefault();
+    }
+    /** @internal */
+    onOptionClick(event, index) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.onOptionPick()(index);
+    }
+    /** @internal */
+    onOptionMouseEnter(index, disabled) {
+        if (disabled)
+            return;
+        this.onOptionHover()(index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ComboboxOverlayComponent, isStandalone: true, selector: "tw-combobox-overlay", host: { properties: { "class": "panelClasses()", "animate.enter": "\"scale-in\"", "animate.leave": "\"scale-out\"" } }, ngImport: i0, template: `
+    @if (loading()) {
+      @if (loadingTemplate(); as tpl) {
+        <ng-container *ngTemplateOutlet="tpl" />
+      } @else {
+        <div class="flex items-center justify-center gap-2 px-4 py-6 text-sm text-fg-muted">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            aria-hidden="true"
+            class="size-4 animate-spin"
+          >
+            <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" opacity="0.25" />
+            <path
+              d="M21 12a9 9 0 0 0-9-9"
+              stroke="currentColor"
+              stroke-width="3"
+              stroke-linecap="round"
+            />
+          </svg>
+          <span>Loading…</span>
+        </div>
+      }
+    }
+
+    <ul
+      [id]="listboxId()"
+      role="listbox"
+      [attr.aria-labelledby]="labelledBy() || null"
+      aria-multiselectable="false"
+      [style.maxHeight.px]="panelMaxHeight()"
+      class="list-none m-0 p-0 overflow-y-auto py-1"
+    >
+      @if (renderedRows().length === 0 && !loading()) {
+        @if (emptyTemplate(); as tpl) {
+          <ng-container *ngTemplateOutlet="tpl; context: { $implicit: query() }" />
+        } @else {
+          <li class="px-4 py-10 text-center text-sm text-fg-muted list-none">
+            {{ emptyMessage() }}
+          </li>
+        }
+      } @else {
+        @for (row of renderedRows(); track trackRow($index, row)) {
+          @if (row.kind === 'group') {
+            <li
+              role="group"
+              [attr.aria-labelledby]="groupHeaderId(row.group)"
+              class="list-none"
+            >
+              <div
+                [id]="groupHeaderId(row.group)"
+                class="px-3 py-1 text-2xs uppercase tracking-wide text-fg-subtle font-semibold"
+              >
+                {{ row.group }}
+              </div>
+            </li>
+          } @else {
+            <li
+              role="option"
+              [id]="optionIdFn()(row.index)"
+              [attr.aria-selected]="isSelected()(row.index) ? 'true' : 'false'"
+              [attr.aria-disabled]="row.option.disabled ? 'true' : null"
+              [class]="optionClass(row.index, row.option.disabled)"
+              (mousedown)="onOptionMousedown($event, row.index)"
+              (click)="onOptionClick($event, row.index)"
+              (mouseenter)="onOptionMouseEnter(row.index, row.option.disabled)"
+            >
+              @if (optionTemplate(); as tpl) {
+                <ng-container
+                  *ngTemplateOutlet="
+                    tpl;
+                    context: buildOptionContext(row.index, row.option)
+                  "
+                />
+              } @else {
+                <span class="flex-1 min-w-0">
+                  <span class="block truncate">{{ row.option.label }}</span>
+                  @if (row.option.description) {
+                    <span class="block text-xs text-fg-muted truncate">{{ row.option.description }}</span>
+                  }
+                </span>
+              }
+            </li>
+          }
+        }
+      }
+    </ul>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxOverlayComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-combobox-overlay',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet],
+                    host: {
+                        '[class]': 'panelClasses()',
+                        '[animate.enter]': '"scale-in"',
+                        '[animate.leave]': '"scale-out"',
+                    },
+                    template: `
+    @if (loading()) {
+      @if (loadingTemplate(); as tpl) {
+        <ng-container *ngTemplateOutlet="tpl" />
+      } @else {
+        <div class="flex items-center justify-center gap-2 px-4 py-6 text-sm text-fg-muted">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            aria-hidden="true"
+            class="size-4 animate-spin"
+          >
+            <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" opacity="0.25" />
+            <path
+              d="M21 12a9 9 0 0 0-9-9"
+              stroke="currentColor"
+              stroke-width="3"
+              stroke-linecap="round"
+            />
+          </svg>
+          <span>Loading…</span>
+        </div>
+      }
+    }
+
+    <ul
+      [id]="listboxId()"
+      role="listbox"
+      [attr.aria-labelledby]="labelledBy() || null"
+      aria-multiselectable="false"
+      [style.maxHeight.px]="panelMaxHeight()"
+      class="list-none m-0 p-0 overflow-y-auto py-1"
+    >
+      @if (renderedRows().length === 0 && !loading()) {
+        @if (emptyTemplate(); as tpl) {
+          <ng-container *ngTemplateOutlet="tpl; context: { $implicit: query() }" />
+        } @else {
+          <li class="px-4 py-10 text-center text-sm text-fg-muted list-none">
+            {{ emptyMessage() }}
+          </li>
+        }
+      } @else {
+        @for (row of renderedRows(); track trackRow($index, row)) {
+          @if (row.kind === 'group') {
+            <li
+              role="group"
+              [attr.aria-labelledby]="groupHeaderId(row.group)"
+              class="list-none"
+            >
+              <div
+                [id]="groupHeaderId(row.group)"
+                class="px-3 py-1 text-2xs uppercase tracking-wide text-fg-subtle font-semibold"
+              >
+                {{ row.group }}
+              </div>
+            </li>
+          } @else {
+            <li
+              role="option"
+              [id]="optionIdFn()(row.index)"
+              [attr.aria-selected]="isSelected()(row.index) ? 'true' : 'false'"
+              [attr.aria-disabled]="row.option.disabled ? 'true' : null"
+              [class]="optionClass(row.index, row.option.disabled)"
+              (mousedown)="onOptionMousedown($event, row.index)"
+              (click)="onOptionClick($event, row.index)"
+              (mouseenter)="onOptionMouseEnter(row.index, row.option.disabled)"
+            >
+              @if (optionTemplate(); as tpl) {
+                <ng-container
+                  *ngTemplateOutlet="
+                    tpl;
+                    context: buildOptionContext(row.index, row.option)
+                  "
+                />
+              } @else {
+                <span class="flex-1 min-w-0">
+                  <span class="block truncate">{{ row.option.label }}</span>
+                  @if (row.option.description) {
+                    <span class="block text-xs text-fg-muted truncate">{{ row.option.description }}</span>
+                  }
+                </span>
+              }
+            </li>
+          }
+        }
+      }
+    </ul>
+  `,
+                }]
+        }] });
+
+// ── Constants ──
+/** Duration of leave animation (ms) — matches scale-out/fade-out in theme/_base.css. */
+const ANIMATION_DURATION = 120;
+/** Debounce window (ms) for LiveAnnouncer result announcements while typing. */
+const ANNOUNCE_DEBOUNCE = 200;
+/** Sentinel for an unresolved write-value awaiting late-arriving options. */
+const UNRESOLVED = Symbol('combobox-unresolved');
+let nextComboboxId = 0;
+// ── Accessor defaults ──
+function defaultOptionLabel(o) {
+    const opt = o;
+    if (typeof opt.label === 'string')
+        return opt.label;
+    return String(opt.value ?? '');
+}
+function defaultOptionValue(o) {
+    return o.value;
+}
+function defaultOptionDisabled(o) {
+    return !!o.disabled;
+}
+function defaultOptionGroup(o) {
+    return o.group;
+}
+function defaultOptionDescription(o) {
+    return o.description;
+}
+function defaultStartsWithFilter(option, query) {
+    const trimmed = query.trim().toLowerCase();
+    if (!trimmed)
+        return true;
+    const label = defaultOptionLabel(option).toLowerCase();
+    return label.startsWith(trimmed);
+}
+// ── tv() config ──
+const comboboxVariants = tv({
+    slots: {
+        root: 'relative inline-block w-full',
+        // container-focus indicator — the `<input>` clears its own outline
+        // (`outline-none` in the input slot below) so the surrounding trigger
+        // surface owns the visible ring via `focus-within:`. The color/width
+        // variants below paint this ring per the `color`/`errorState` axis.
+        trigger: 'flex w-full items-center gap-1.5 rounded-md border border-border bg-surface text-fg transition-colors duration-normal motion-reduce:transition-none hover:border-border-strong focus-within:outline-2 focus-within:outline-offset-2',
+        input: 'flex-1 min-w-0 bg-transparent outline-none placeholder:text-fg-subtle disabled:cursor-not-allowed',
+        clearButton: 'inline-flex items-center justify-center shrink-0 size-5 rounded-md text-fg-muted hover:text-fg hover:bg-surface-muted transition-colors duration-normal motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+        chevron: 'shrink-0 text-fg-muted transition-transform duration-normal motion-reduce:transition-none',
+        spinner: 'shrink-0 text-fg-muted animate-spin',
+    },
+    variants: {
+        size: {
+            // xs density: chevron and spinner use `size-3.5` (14px) — the codified
+            // half-step between size-3 and size-4 that lines up with text-xs metric
+            // inside a 28px trigger.
+            xs: { trigger: 'px-2 py-1 text-xs', chevron: 'size-3.5', clearButton: 'size-4', spinner: 'size-3.5' },
+            sm: { trigger: 'px-3 py-1.5 text-sm', chevron: 'size-4', spinner: 'size-4' },
+            md: { trigger: 'px-4 py-2 text-sm', chevron: 'size-4', spinner: 'size-4' },
+            lg: { trigger: 'px-5 py-2.5 text-base', chevron: 'size-5', spinner: 'size-5' },
+            xl: { trigger: 'px-6 py-3 text-base', chevron: 'size-5', spinner: 'size-5' },
+        },
+        color: {
+            primary: { trigger: 'focus-within:outline-primary-500' },
+            secondary: { trigger: 'focus-within:outline-secondary-500' },
+            accent: { trigger: 'focus-within:outline-accent-500' },
+            neutral: { trigger: 'focus-within:outline-border-strong' },
+            info: { trigger: 'focus-within:outline-info-500' },
+            success: { trigger: 'focus-within:outline-success-500' },
+            warning: { trigger: 'focus-within:outline-warning-500' },
+            error: { trigger: 'focus-within:outline-error-500' },
+        },
+        disabled: {
+            true: { root: 'opacity-50 pointer-events-none cursor-not-allowed' },
+            false: {},
+        },
+        open: {
+            true: { chevron: 'rotate-180' },
+            false: {},
+        },
+        naked: {
+            true: {
+                trigger: 'border-0 bg-transparent rounded-none px-0 py-0 hover:border-0 focus-within:outline-0 focus-within:outline-offset-0',
+            },
+            false: {},
+        },
+        errorState: {
+            true: { trigger: 'focus-within:outline-error-500' },
+            false: {},
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        color: 'primary',
+        disabled: false,
+        open: false,
+        naked: false,
+        errorState: false,
+    },
+}, { twMerge: true });
+// ── Slot directives ──
+/** Structural directive projecting a custom template for each option row. Context: `TwComboboxOptionContext<T>`. */
+class ComboboxOptionTemplateDirective {
+    /** @internal */
+    templateRef = inject((TemplateRef));
+    /** @internal */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxOptionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: ComboboxOptionTemplateDirective, isStandalone: true, selector: "[twComboboxOption]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxOptionTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[twComboboxOption]' }]
+        }] });
+/** Structural directive projecting a custom template for the empty-results state. Context: `{ $implicit: query }`. */
+class ComboboxEmptyTemplateDirective {
+    /** @internal */
+    templateRef = inject((TemplateRef));
+    /** @internal */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxEmptyTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: ComboboxEmptyTemplateDirective, isStandalone: true, selector: "[twComboboxEmpty]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxEmptyTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[twComboboxEmpty]' }]
+        }] });
+/** Structural directive projecting a custom template above the list while `loading=true`. */
+class ComboboxLoadingTemplateDirective {
+    /** @internal */
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxLoadingTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: ComboboxLoadingTemplateDirective, isStandalone: true, selector: "[twComboboxLoading]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxLoadingTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[twComboboxLoading]' }]
+        }] });
+/** Attribute directive marking a leading adornment projected inside the input row. */
+class ComboboxPrefixDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: ComboboxPrefixDirective, isStandalone: true, selector: "[twComboboxPrefix]", host: { classAttribute: "flex items-center shrink-0 text-fg-muted" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxPrefixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twComboboxPrefix]',
+                    host: { class: 'flex items-center shrink-0 text-fg-muted' },
+                }]
+        }] });
+/** Attribute directive marking a trailing adornment projected inside the input row, before the clear button. */
+class ComboboxSuffixDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: ComboboxSuffixDirective, isStandalone: true, selector: "[twComboboxSuffix]", host: { classAttribute: "flex items-center shrink-0 text-fg-muted" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxSuffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twComboboxSuffix]',
+                    host: { class: 'flex items-center shrink-0 text-fg-muted' },
+                }]
+        }] });
+// ── Component ──
+/**
+ * Editable single-select typeahead form control. Follows the WAI-ARIA 1.2
+ * combobox + listbox pattern with `aria-activedescendant` (DOM focus stays
+ * on the `<input>`). Supports local filtering, async result streams via
+ * `queryChange`, grouped options, strict and free-text modes, and full
+ * integration with template-driven, reactive, and signal forms plus
+ * `tw-form-field`.
+ */
+class ComboboxComponent {
+    // ── Inputs ──
+    /** Array of options to render in the popover. Accepts plain records or `TwComboboxOption<T>`. */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Accessor returning the visible label for an option. Used by the default filter and the trigger label resolver. */
+    optionLabel = input(defaultOptionLabel, ...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
+    /** Accessor returning the value emitted via `valueCommit` when this option is picked. */
+    optionValue = input(defaultOptionValue, ...(ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []));
+    /** Accessor returning whether an option is non-interactive. */
+    optionDisabled = input(defaultOptionDisabled, ...(ngDevMode ? [{ debugName: "optionDisabled" }] : /* istanbul ignore next */ []));
+    /** Accessor returning a group label. Options sharing a group render under a labelled `role="group"` region. */
+    optionGroup = input(defaultOptionGroup, ...(ngDevMode ? [{ debugName: "optionGroup" }] : /* istanbul ignore next */ []));
+    /** Accessor returning an optional secondary description rendered under the label in the default option row. */
+    optionDescription = input(defaultOptionDescription, ...(ngDevMode ? [{ debugName: "optionDescription" }] : /* istanbul ignore next */ []));
+    /** Filter function applied client-side whenever `inputValue` changes. Pass `null` to disable client filtering (async mode). Defaults to case-insensitive `startsWith` on the label. */
+    filterFn = input(defaultStartsWithFilter, ...(ngDevMode ? [{ debugName: "filterFn" }] : /* istanbul ignore next */ []));
+    /** When `true`, free-text commits are rejected — the input reverts to the last committed label on blur. */
+    strict = input(false, ...(ngDevMode ? [{ debugName: "strict" }] : /* istanbul ignore next */ []));
+    /** Placeholder shown when the input is empty. */
+    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Disables the input and prevents the popover from opening. */
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
+    /** Sets `aria-required="true"` on the input. */
+    requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required' });
+    /** Controls trigger padding and font size per the inline padding scale. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Semantic color for the focus ring. */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Whether the trailing chevron affordance is rendered. */
+    // TRUE-default: the chevron signals the dropdown affordance; without it the
+    // combobox reads as a plain input. Opt-out is for inline search inputs.
+    showChevron = input(true, ...(ngDevMode ? [{ debugName: "showChevron" }] : /* istanbul ignore next */ []));
+    /** Whether the inline clear (×) button appears while `inputValue` is non-empty. */
+    // TRUE-default: the clear affordance is the expected combobox UX once a value
+    // is set; opt-out is for required-only flows.
+    clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    /** When `true`, shows an in-popover spinner and an inline spinner in the trigger while the popover is open. */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Debounce window (ms) before `queryChange` emits. Local filtering is not debounced. */
+    queryDebounce = input(150, ...(ngDevMode ? [{ debugName: "queryDebounce" }] : /* istanbul ignore next */ []));
+    /** Minimum query length before the popover opens automatically. `0` opens on focus. */
+    minQueryLength = input(0, ...(ngDevMode ? [{ debugName: "minQueryLength" }] : /* istanbul ignore next */ []));
+    /** Whether the popover opens automatically when the input receives focus. */
+    // TRUE-default: clicking into a combobox opens the dropdown — standard select-
+    // like UX. Opt-out is for command-palette-style flows triggered only by typing.
+    openOnFocus = input(true, ...(ngDevMode ? [{ debugName: "openOnFocus" }] : /* istanbul ignore next */ []));
+    /** Maximum height (px) of the popover scroll region. */
+    panelMaxHeight = input(256, ...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : /* istanbul ignore next */ []));
+    /** Overlay width strategy. `'trigger'` matches input width; `'auto'` lets content decide; a number is applied as px; a string is passed as a CSS length. */
+    panelWidth = input('trigger', ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
+    /** Extra class(es) appended to the overlay panel for consumer customization. */
+    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    /** CDK overlay scroll strategy. */
+    scrollStrategy = input('reposition', ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
+    /** Pixel offset between the input and the popover. */
+    offset = input(4, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    /** Fallback empty-state message when no `*twComboboxEmpty` template is projected. */
+    emptyMessage = input('No results', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    /** Equality comparator used to reconcile `value` with options during `writeValue`. */
+    compareWith = input(Object.is, ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the combobox input. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** ID of an external label element. */
+    ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    /** ID of an external descriptor element. */
+    ariaDescribedby = input(undefined, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, the combobox uses the `TW_ERROR_STATE_MATCHER` token's value. */
+    errorStateMatcher = input(undefined, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+    // ── Models ──
+    /** Two-way bound committed value. May be an option's value (`T`), a typed string (free-text mode), or `null`. */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Two-way bound visible text in the input. Bound separately from `value` so async consumers can drive the query. */
+    inputValue = model('', ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
+    /** Two-way bound open state of the popover. */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    // ── Outputs ──
+    /** Fires after the query text changes, debounced by `queryDebounce`. Async-mode consumers subscribe to this to fetch results. */
+    queryChange = output();
+    /** Fires when the user picks an option from the list (not on free-text commit). */
+    optionSelected = output();
+    /** Fires whenever `value` changes, with a `source` discriminator distinguishing option / free-text / reset / programmatic origin. */
+    valueCommit = output();
+    /** Fires when the popover opens or closes. */
+    openedChange = output();
+    // ── Content queries ──
+    /** @internal */
+    optionTemplateChild = contentChild(ComboboxOptionTemplateDirective, ...(ngDevMode ? [{ debugName: "optionTemplateChild" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    emptyTemplateChild = contentChild(ComboboxEmptyTemplateDirective, ...(ngDevMode ? [{ debugName: "emptyTemplateChild" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    loadingTemplateChild = contentChild(ComboboxLoadingTemplateDirective, ...(ngDevMode ? [{ debugName: "loadingTemplateChild" }] : /* istanbul ignore next */ []));
+    // ── View queries ──
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    triggerSurfaceRef = viewChild('triggerSurface', ...(ngDevMode ? [{ debugName: "triggerSurfaceRef" }] : /* istanbul ignore next */ []));
+    // ── Injected deps ──
+    overlayService = inject(Overlay);
+    elementRef = inject((ElementRef));
+    viewContainerRef = inject(ViewContainerRef);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    focusMonitor = inject(FocusMonitor);
+    liveAnnouncer = inject(LiveAnnouncer);
+    platform = inject(Platform);
+    formField = inject(FormFieldComponent, { optional: true });
+    ngControl = inject(NgControl, { optional: true, self: true });
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
+    defaultMatcher = inject(TW_ERROR_STATE_MATCHER);
+    // ── Identity ──
+    uid = nextComboboxId++;
+    /** @internal */
+    hostId = `tw-combobox-${this.uid}`;
+    /** @internal */
+    listboxId = `${this.hostId}-listbox`;
+    /** @internal */
+    optionId = (index) => `${this.hostId}-option-${index}`;
+    /** @internal */
+    groupHeaderId = (group) => `${this.hostId}-group-${group.replace(/\s+/g, '-').toLowerCase()}`;
+    // ── Internal state signals ──
+    /** @internal */
+    composing = signal(false, ...(ngDevMode ? [{ debugName: "composing" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    focusedSignal = signal(false, ...(ngDevMode ? [{ debugName: "focusedSignal" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    _ngControlRev = signal(0, ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
+    _formSubmitRev = signal(0, ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    labelledByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "labelledByIdsSignal" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    lastCommittedLabel = signal('', ...(ngDevMode ? [{ debugName: "lastCommittedLabel" }] : /* istanbul ignore next */ []));
+    pendingWriteValue = signal(UNRESOLVED, ...(ngDevMode ? [{ debugName: "pendingWriteValue" }] : /* istanbul ignore next */ []));
+    closingSignal = signal(false, ...(ngDevMode ? [{ debugName: "closingSignal" }] : /* istanbul ignore next */ []));
+    /** Re-runs the input handler once after IME composition ends. */
+    composingPendingValue = null;
+    onChange = () => { };
+    onTouched = () => { };
+    overlayRef = null;
+    overlayInstanceSignal = signal(null, ...(ngDevMode ? [{ debugName: "overlayInstanceSignal" }] : /* istanbul ignore next */ []));
+    closeTimer = null;
+    queryDebounceTimer = null;
+    announceTimer = null;
+    resizeObserver = null;
+    get overlayInstance() {
+        return this.overlayInstanceSignal();
+    }
+    // ── Derived state ──
+    /** @internal */
+    isDisabled = computed(() => this.disabledInput() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** @internal Auto-naked when wrapped in tw-form-field. */
+    naked = computed(() => !!this.formField, ...(ngDevMode ? [{ debugName: "naked" }] : /* istanbul ignore next */ []));
+    /** @internal Resolved visible options (after filter, with derived view fields). */
+    visibleOptions = computed(() => {
+        const opts = this.options();
+        const labelFn = this.optionLabel();
+        const valueFn = this.optionValue();
+        const disabledFn = this.optionDisabled();
+        const groupFn = this.optionGroup();
+        const descFn = this.optionDescription();
+        const filter = this.filterFn();
+        const query = this.inputValue();
+        const filtered = filter === null ? opts : opts.filter((o) => filter(o, query));
+        return filtered.map((option) => ({
+            option,
+            label: labelFn(option),
+            value: valueFn(option),
+            disabled: disabledFn(option),
+            group: groupFn(option),
+            description: descFn(option),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
+    /** @internal Rendered rows (group headers + option rows). */
+    renderedRows = computed(() => {
+        const visible = this.visibleOptions();
+        const rows = [];
+        let currentGroup;
+        visible.forEach((v, index) => {
+            if (v.group !== currentGroup) {
+                if (v.group !== undefined) {
+                    rows.push({ kind: 'group', group: v.group });
+                }
+                currentGroup = v.group;
+            }
+            rows.push({ kind: 'option', option: v, index });
+        });
+        return rows;
+    }, ...(ngDevMode ? [{ debugName: "renderedRows" }] : /* istanbul ignore next */ []));
+    /** Returns the index of the first enabled option, or -1 when none. */
+    firstEnabledIndex(visible = this.visibleOptions()) {
+        for (let i = 0; i < visible.length; i++) {
+            if (!visible[i].disabled)
+                return i;
+        }
+        return -1;
+    }
+    /** Returns the index of the last enabled option, or -1 when none. */
+    lastEnabledIndex(visible = this.visibleOptions()) {
+        for (let i = visible.length - 1; i >= 0; i--) {
+            if (!visible[i].disabled)
+                return i;
+        }
+        return -1;
+    }
+    /** @internal Active descendant index, resets to the first enabled when the visible list changes. */
+    activeIndex = linkedSignal({ ...(ngDevMode ? { debugName: "activeIndex" } : /* istanbul ignore next */ {}), source: () => this.visibleOptions(),
+        computation: (visible) => {
+            for (let i = 0; i < visible.length; i++) {
+                if (!visible[i].disabled)
+                    return i;
+            }
+            return -1;
+        } });
+    /** @internal */
+    activeOption = computed(() => {
+        const idx = this.activeIndex();
+        const visible = this.visibleOptions();
+        if (idx < 0 || idx >= visible.length)
+            return null;
+        return visible[idx];
+    }, ...(ngDevMode ? [{ debugName: "activeOption" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    activeOptionId = computed(() => {
+        const idx = this.activeIndex();
+        if (idx < 0 || idx >= this.visibleOptions().length)
+            return null;
+        return this.optionId(idx);
+    }, ...(ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    isEmpty = computed(() => this.inputValue().length === 0 && this.value() == null, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    showClearButton = computed(() => this.clearable() && !this.isDisabled() && this.inputValue().length > 0, ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    showSpinner = computed(() => this.loading(), ...(ngDevMode ? [{ debugName: "showSpinner" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    resolvedDescribedBy = computed(() => {
+        const extra = this.describedByIdsSignal();
+        const user = this.ariaDescribedby();
+        const merged = [...extra];
+        if (user)
+            merged.push(...user.split(/\s+/).filter(Boolean));
+        return merged.length ? merged.join(' ') : '';
+    }, ...(ngDevMode ? [{ debugName: "resolvedDescribedBy" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    resolvedLabelledBy = computed(() => {
+        const extra = this.labelledByIdsSignal();
+        const user = this.ariaLabelledby();
+        const merged = [...extra];
+        if (user)
+            merged.push(...user.split(/\s+/).filter(Boolean));
+        return merged.length ? merged.join(' ') : '';
+    }, ...(ngDevMode ? [{ debugName: "resolvedLabelledBy" }] : /* istanbul ignore next */ []));
+    /** @internal Error-state per the configured `ErrorStateMatcher`. Reads the bound `NgControl.invalid` through the matcher. */
+    errorState = computed(() => {
+        this._ngControlRev();
+        this._formSubmitRev();
+        const matcher = this.errorStateMatcher() ?? this.defaultMatcher;
+        const form = this.parentFormGroup ??
+            this.parentForm;
+        return matcher.isErrorState(this.ngControl?.control ?? null, form);
+    }, ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    // ── tv() output ──
+    variantResult = computed(() => comboboxVariants({
+        size: this.size(),
+        color: this.color(),
+        disabled: this.isDisabled(),
+        open: this.open(),
+        naked: this.naked(),
+        errorState: this.errorState(),
+    }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    rootClasses = computed(() => this.variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    triggerClasses = computed(() => this.variantResult().trigger(), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    inputClasses = computed(() => this.variantResult().input(), ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    clearButtonClasses = computed(() => this.variantResult().clearButton(), ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    chevronClasses = computed(() => this.variantResult().chevron(), ...(ngDevMode ? [{ debugName: "chevronClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    spinnerClasses = computed(() => this.variantResult().spinner(), ...(ngDevMode ? [{ debugName: "spinnerClasses" }] : /* istanbul ignore next */ []));
+    // ── FormFieldControl impl ──
+    /** @internal */
+    id = computed(() => this.hostId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    focused = this.focusedSignal.asReadonly();
+    /** @internal */
+    empty = this.isEmpty;
+    /** @internal */
+    disabled = this.isDisabled;
+    /** @internal */
+    required = computed(() => this.requiredInput(), ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    controlType = 'combobox';
+    /** @internal */
+    userAriaDescribedBy = computed(() => this.ariaDescribedby(), ...(ngDevMode ? [{ debugName: "userAriaDescribedBy" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    userAriaLabelledby = computed(() => this.ariaLabelledby(), ...(ngDevMode ? [{ debugName: "userAriaLabelledby" }] : /* istanbul ignore next */ []));
+    // ── Constructor ──
+    constructor() {
+        // Material-style CVA wiring: declare ourselves as the value accessor on any
+        // host-level `NgControl` (FormControlDirective, NgModel, etc.). This avoids
+        // the circular-DI that a static `NG_VALUE_ACCESSOR` provider would create
+        // because `NgControl` is injected with `self: true` on the same element.
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        // Mirror parent `open` model into overlay lifecycle.
+        effect(() => {
+            const shouldOpen = this.open();
+            const disabled = this.isDisabled();
+            if (disabled && this.overlayInstance) {
+                this.closeOverlay({ silent: false });
+                return;
+            }
+            if (shouldOpen && !this.overlayInstance && !disabled && !this.closingSignal()) {
+                this.openOverlay();
+            }
+            else if (!shouldOpen && this.overlayInstance && !this.closingSignal()) {
+                this.closeOverlay({ silent: false });
+            }
+        });
+        // Push state into overlay component whenever anything relevant changes.
+        // While the panel is animating out, freeze content updates so list mutations
+        // (e.g. the input filtering down after commitOption) don't visually flicker
+        // the panel during the leave animation.
+        effect(() => {
+            const instance = this.overlayInstance;
+            if (!instance)
+                return;
+            if (this.closingSignal())
+                return;
+            const renderedRows = this.renderedRows();
+            const activeIndex = this.activeIndex();
+            const panelMaxHeight = this.panelMaxHeight();
+            const emptyMessage = this.emptyMessage();
+            const query = this.inputValue();
+            const loading = this.loading();
+            const labelledBy = this.resolvedLabelledBy();
+            const optionTemplate = this.optionTemplateChild()?.templateRef;
+            const emptyTemplate = this.emptyTemplateChild()?.templateRef;
+            const loadingTemplate = this.loadingTemplateChild()?.templateRef;
+            const customPanelClass = this.resolvePanelClass();
+            untracked(() => {
+                instance.renderedRows.set(renderedRows);
+                instance.activeIndex.set(activeIndex);
+                instance.panelMaxHeight.set(panelMaxHeight);
+                instance.emptyMessage.set(emptyMessage);
+                instance.query.set(query);
+                instance.loading.set(loading);
+                instance.labelledBy.set(labelledBy);
+                instance.optionTemplate.set(optionTemplate);
+                instance.emptyTemplate.set(emptyTemplate);
+                instance.loadingTemplate.set(loadingTemplate);
+                instance.customPanelClass.set(customPanelClass);
+                instance.listboxId.set(this.listboxId);
+                instance.optionIdFn.set(this.optionId);
+                instance.groupHeaderIdFn.set(this.groupHeaderId);
+                instance.isSelected.set((index) => this.isVisibleOptionSelected(index));
+            });
+        });
+        // Late-arriving options reconciler for the async writeValue race.
+        effect(() => {
+            const opts = this.options();
+            const pending = untracked(this.pendingWriteValue);
+            if (pending === UNRESOLVED)
+                return;
+            if (opts.length === 0)
+                return;
+            const cmp = this.compareWith();
+            const valueFn = this.optionValue();
+            const labelFn = this.optionLabel();
+            const match = opts.find((o) => {
+                try {
+                    return cmp(valueFn(o), pending);
+                }
+                catch {
+                    return false;
+                }
+            });
+            untracked(() => {
+                if (match) {
+                    this.inputValue.set(labelFn(match));
+                    this.lastCommittedLabel.set(labelFn(match));
+                }
+                // Always clear the sentinel — subsequent options changes won't re-resolve.
+                this.pendingWriteValue.set(UNRESOLVED);
+            });
+        });
+        // Debounced LiveAnnouncer result-count announcements.
+        effect(() => {
+            const visible = this.visibleOptions();
+            const query = this.inputValue();
+            const isOpen = this.open();
+            untracked(() => {
+                if (!isOpen)
+                    return;
+                this.clearAnnounceTimer();
+                this.announceTimer = setTimeout(() => {
+                    const count = visible.length;
+                    const message = count === 0
+                        ? `No results for ${query}`
+                        : count === 1
+                            ? '1 result'
+                            : `${count} results`;
+                    this.liveAnnouncer.announce(message, 'polite');
+                }, ANNOUNCE_DEBOUNCE);
+            });
+        });
+        // FocusMonitor for blur → onTouched + focused state.
+        const monitorSub = this.focusMonitor
+            .monitor(this.elementRef, true)
+            .subscribe((origin) => {
+            const wasFocused = this.focusedSignal();
+            this.focusedSignal.set(!!origin);
+            if (!origin && wasFocused) {
+                this.onTouched();
+                // Blur often flips `touched` on the bound `NgControl`; bump the
+                // revision so `errorState` recomputes.
+                this._ngControlRev.update((n) => n + 1);
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            monitorSub.unsubscribe();
+            this.focusMonitor.stopMonitoring(this.elementRef);
+            this.clearCloseTimer();
+            this.clearQueryDebounceTimer();
+            this.clearAnnounceTimer();
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = null;
+            this.overlayRef?.dispose();
+            this.overlayRef = null;
+            this.overlayInstanceSignal.set(null);
+        });
+    }
+    // ── Public methods ──
+    /** Opens the popover. No-op when disabled or already open. */
+    openPanel() {
+        if (this.isDisabled() || this.open())
+            return;
+        this.open.set(true);
+    }
+    /** Closes the popover. No-op when already closed. */
+    closePanel() {
+        if (!this.open())
+            return;
+        this.open.set(false);
+    }
+    /** Programmatically focuses the input. */
+    focus() {
+        this.inputRef()?.nativeElement.focus();
+    }
+    // ── Visible-option helpers ──
+    /** @internal */
+    isVisibleOptionSelected(index) {
+        const visible = this.visibleOptions();
+        if (index < 0 || index >= visible.length)
+            return false;
+        const current = this.value();
+        if (current === null || current === undefined)
+            return false;
+        const cmp = this.compareWith();
+        try {
+            return cmp(visible[index].value, current);
+        }
+        catch {
+            return false;
+        }
+    }
+    // ── Input event handlers ──
+    /** @internal */
+    onInput(event) {
+        if (this.composing()) {
+            // Defer; we'll re-run with the final value on compositionend.
+            this.composingPendingValue = event.target.value;
+            return;
+        }
+        const target = event.target;
+        const value = target.value;
+        this.inputValue.set(value);
+        this.scheduleQueryEmit(value);
+        // Open if not blocked by minQueryLength and not disabled.
+        if (!this.isDisabled() && value.length >= this.minQueryLength()) {
+            if (!this.open()) {
+                this.open.set(true);
+            }
+        }
+        else if (value.length < this.minQueryLength() && this.open()) {
+            this.open.set(false);
+        }
+    }
+    /** @internal */
+    onCompositionStart() {
+        this.composing.set(true);
+    }
+    /** @internal */
+    onCompositionEnd(event) {
+        this.composing.set(false);
+        const target = event.target;
+        const value = target.value || this.composingPendingValue || '';
+        this.composingPendingValue = null;
+        // Re-run the input handler logic once with the resolved value.
+        this.inputValue.set(value);
+        this.scheduleQueryEmit(value);
+        if (!this.isDisabled() && value.length >= this.minQueryLength() && !this.open()) {
+            this.open.set(true);
+        }
+    }
+    /** @internal */
+    onFocus() {
+        if (this.isDisabled())
+            return;
+        if (this.openOnFocus() && this.inputValue().length >= this.minQueryLength() && !this.open()) {
+            this.open.set(true);
+        }
+    }
+    /** @internal */
+    onBlur() {
+        if (this.composing())
+            return;
+        // Don't commit while the user is interacting with the overlay (option mousedown
+        // calls preventDefault to keep focus on the input, so blur here means real focus loss).
+        if (this.isDisabled())
+            return;
+        this.commit('blur');
+    }
+    /** @internal */
+    onKeydown(event) {
+        if (this.composing())
+            return;
+        if (this.isDisabled())
+            return;
+        const key = event.key;
+        // Alt+Arrow combos
+        if (event.altKey && key === 'ArrowDown') {
+            event.preventDefault();
+            this.openPanel();
+            return;
+        }
+        if (event.altKey && key === 'ArrowUp') {
+            event.preventDefault();
+            this.closePanel();
+            return;
+        }
+        switch (key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                if (!this.open()) {
+                    this.openPanel();
+                    this.moveActiveTo(this.firstEnabledIndex(), 1);
+                }
+                else {
+                    this.moveActive(1);
+                }
+                return;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                if (!this.open()) {
+                    this.openPanel();
+                    this.moveActiveTo(this.lastEnabledIndex(), -1);
+                }
+                else {
+                    this.moveActive(-1);
+                }
+                return;
+            }
+            case 'Home': {
+                if (this.inputValue().length === 0 || event.altKey) {
+                    event.preventDefault();
+                    if (!this.open())
+                        this.openPanel();
+                    this.moveActiveTo(0, 1);
+                }
+                return;
+            }
+            case 'End': {
+                if (this.inputValue().length === 0 || event.altKey) {
+                    event.preventDefault();
+                    if (!this.open())
+                        this.openPanel();
+                    this.moveActiveTo(this.visibleOptions().length - 1, -1);
+                }
+                return;
+            }
+            case 'Enter': {
+                const active = this.activeOption();
+                if (this.open() && active && !active.disabled) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.commitOption(active, 'option');
+                    return;
+                }
+                // Form-submit passthrough: do NOT call preventDefault.
+                return;
+            }
+            case 'Escape': {
+                if (this.open()) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.inputValue.set(this.lastCommittedLabel());
+                    this.closePanel();
+                }
+                else if (this.clearable() && this.inputValue().length > 0) {
+                    event.preventDefault();
+                    this.clear();
+                }
+                return;
+            }
+            case 'Tab': {
+                // Commit (no preventDefault) so focus moves naturally.
+                this.commit('tab');
+                return;
+            }
+            case 'Backspace': {
+                // Explicit no-op on empty input — do not close the popover.
+                if (this.inputValue().length === 0) {
+                    event.preventDefault();
+                }
+                return;
+            }
+            default:
+                return;
+        }
+    }
+    // ── Clear button ──
+    /** @internal — preventDefault to keep DOM focus on the input. */
+    onClearMousedown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    /** @internal */
+    onClearClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.clear();
+        this.inputRef()?.nativeElement.focus();
+    }
+    /** Clears the input and committed value, emitting `valueCommit({ source: 'reset' })`. */
+    clear() {
+        if (this.isDisabled())
+            return;
+        this.value.set(null);
+        this.inputValue.set('');
+        this.lastCommittedLabel.set('');
+        this.valueCommit.emit({ value: null, source: 'reset' });
+        this.onChange(null);
+        this.closePanel();
+    }
+    // ── Active-index navigation ──
+    moveActive(delta) {
+        const visible = this.visibleOptions();
+        if (visible.length === 0) {
+            this.activeIndex.set(-1);
+            return;
+        }
+        const n = visible.length;
+        let idx = this.activeIndex();
+        if (idx < 0)
+            idx = delta > 0 ? -1 : n;
+        for (let i = 0; i < n; i++) {
+            idx = (idx + delta + n) % n;
+            if (!visible[idx].disabled) {
+                this.activeIndex.set(idx);
+                this.scrollActiveIntoView();
+                return;
+            }
+        }
+    }
+    moveActiveTo(startIndex, direction) {
+        const visible = this.visibleOptions();
+        if (visible.length === 0) {
+            this.activeIndex.set(-1);
+            return;
+        }
+        let i = Math.max(0, Math.min(startIndex, visible.length - 1));
+        const max = visible.length;
+        for (let n = 0; n < max; n++) {
+            if (!visible[i].disabled) {
+                this.activeIndex.set(i);
+                this.scrollActiveIntoView();
+                return;
+            }
+            i += direction;
+            if (i < 0 || i >= visible.length)
+                return;
+        }
+    }
+    scrollActiveIntoView() {
+        if (!this.platform.isBrowser)
+            return;
+        queueMicrotask(() => {
+            const id = this.activeOptionId();
+            if (!id)
+                return;
+            const el = document.getElementById(id);
+            if (el && typeof el.scrollIntoView === 'function') {
+                el.scrollIntoView({ block: 'nearest', behavior: 'auto' });
+            }
+        });
+    }
+    // ── Commit resolver ──
+    /** @internal */
+    commit(source) {
+        if (this.isDisabled() || this.composing())
+            return;
+        const rawText = this.inputValue();
+        const text = rawText.trim();
+        const active = this.activeOption();
+        const labelFn = this.optionLabel();
+        const disabledFn = this.optionDisabled();
+        // 1. Active option wins.
+        if (active && !active.disabled) {
+            this.commitOption(active, 'option');
+            return;
+        }
+        // 2. Exact label match auto-resolves.
+        const exact = this.options().find((o) => !disabledFn(o) && labelFn(o).trim() === text && text.length > 0);
+        if (exact) {
+            const valueFn = this.optionValue();
+            const groupFn = this.optionGroup();
+            const descFn = this.optionDescription();
+            this.commitOption({
+                option: exact,
+                label: labelFn(exact),
+                value: valueFn(exact),
+                disabled: false,
+                group: groupFn(exact),
+                description: descFn(exact),
+            }, 'option');
+            return;
+        }
+        // 3. Empty text → null.
+        if (text === '') {
+            const wasNonNull = this.value() !== null || this.inputValue() !== '';
+            this.value.set(null);
+            this.inputValue.set('');
+            this.lastCommittedLabel.set('');
+            if (wasNonNull) {
+                this.valueCommit.emit({ value: null, source: 'reset' });
+                this.onChange(null);
+            }
+            this.closePanel();
+            return;
+        }
+        // 4. No match.
+        if (this.strict()) {
+            this.inputValue.set(this.lastCommittedLabel());
+            if (source !== 'enter') {
+                this.closePanel();
+            }
+            else if (this.visibleOptions().length === 0) {
+                this.closePanel();
+            }
+            return;
+        }
+        // Free-text commit.
+        this.value.set(text);
+        this.inputValue.set(text);
+        this.lastCommittedLabel.set(text);
+        this.valueCommit.emit({ value: text, source: 'free-text' });
+        this.onChange(text);
+        this.closePanel();
+    }
+    /** @internal */
+    commitOption(option, source) {
+        const value = option.value;
+        const label = option.label;
+        this.value.set(value);
+        this.inputValue.set(label);
+        this.lastCommittedLabel.set(label);
+        this.optionSelected.emit({ option: option.option, value, label });
+        this.valueCommit.emit({ value, source });
+        this.onChange(value);
+        this.liveAnnouncer.announce(`${label} selected`, 'polite');
+        this.closePanel();
+    }
+    // ── Query debounce ──
+    scheduleQueryEmit(value) {
+        this.clearQueryDebounceTimer();
+        const delay = this.queryDebounce();
+        this.queryDebounceTimer = setTimeout(() => {
+            this.queryDebounceTimer = null;
+            this.queryChange.emit(value);
+        }, delay);
+    }
+    clearQueryDebounceTimer() {
+        if (this.queryDebounceTimer !== null) {
+            clearTimeout(this.queryDebounceTimer);
+            this.queryDebounceTimer = null;
+        }
+    }
+    clearAnnounceTimer() {
+        if (this.announceTimer !== null) {
+            clearTimeout(this.announceTimer);
+            this.announceTimer = null;
+        }
+    }
+    // ── Overlay lifecycle ──
+    openOverlay() {
+        this.ensureOverlay();
+        this.attachOverlayComponent();
+        this.subscribeBackdrop();
+        this.subscribeOverlayEscape();
+        // Reset active to first enabled when opening.
+        this.activeIndex.set(this.firstEnabledIndex());
+        this.liveAnnouncer.announce(`${this.visibleOptions().length} suggestions available`, 'polite');
+        this.openedChange.emit({
+            open: true,
+            trigger: this.inputRef()?.nativeElement ?? this.elementRef.nativeElement,
+        });
+    }
+    closeOverlay(_opts) {
+        if (this.closingSignal() || !this.overlayInstance)
+            return;
+        this.closingSignal.set(true);
+        this.clearAnnounceTimer();
+        this.closeTimer = setTimeout(() => {
+            this.closeTimer = null;
+            if (this.overlayRef?.hasAttached()) {
+                this.overlayRef.detach();
+            }
+            this.overlayInstanceSignal.set(null);
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = null;
+            untracked(() => this.open.set(false));
+            this.closingSignal.set(false);
+            this.openedChange.emit({
+                open: false,
+                trigger: this.inputRef()?.nativeElement ?? this.elementRef.nativeElement,
+            });
+        }, ANIMATION_DURATION);
+    }
+    ensureOverlay() {
+        if (this.overlayRef) {
+            this.updateOverlaySize();
+            return;
+        }
+        const positionStrategy = this.overlayService
+            .position()
+            .flexibleConnectedTo(this.triggerSurfaceRef()?.nativeElement ?? this.elementRef.nativeElement)
+            .withPositions(buildSelectLikePositions(this.offset()))
+            .withFlexibleDimensions(false)
+            .withPush(false)
+            .withViewportMargin(8);
+        this.overlayRef = this.overlayService.create({
+            positionStrategy,
+            scrollStrategy: resolveSelectScrollStrategy(this.scrollStrategy(), this.overlayService),
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            panelClass: 'tw-combobox-panel',
+        });
+        this.installResizeObserver();
+        this.updateOverlaySize();
+    }
+    installResizeObserver() {
+        if (!this.platform.isBrowser || typeof ResizeObserver === 'undefined')
+            return;
+        const target = this.elementRef.nativeElement;
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = new ResizeObserver(() => this.updateOverlaySize());
+        this.resizeObserver.observe(target);
+    }
+    updateOverlaySize() {
+        if (!this.overlayRef)
+            return;
+        const width = this.panelWidth();
+        if (width === 'trigger') {
+            const anchor = this.triggerSurfaceRef()?.nativeElement ?? this.elementRef.nativeElement;
+            const rect = anchor.getBoundingClientRect();
+            this.overlayRef.updateSize({ width: rect.width });
+        }
+        else if (width === 'auto') {
+            this.overlayRef.updateSize({ width: undefined, minWidth: undefined });
+        }
+        else if (typeof width === 'number') {
+            this.overlayRef.updateSize({ width });
+        }
+        else {
+            this.overlayRef.updateSize({ width });
+        }
+    }
+    attachOverlayComponent() {
+        if (!this.overlayRef)
+            return;
+        const portal = new ComponentPortal(ComboboxOverlayComponent, this.viewContainerRef, this.injector);
+        const ref = this.overlayRef.attach(portal);
+        const instance = ref.instance;
+        instance.onOptionPick.set((index) => {
+            const visible = this.visibleOptions();
+            if (index < 0 || index >= visible.length)
+                return;
+            const opt = visible[index];
+            if (opt.disabled)
+                return;
+            this.commitOption(opt, 'option');
+        });
+        instance.onOptionHover.set((index) => {
+            const visible = this.visibleOptions();
+            if (index < 0 || index >= visible.length)
+                return;
+            if (visible[index].disabled)
+                return;
+            this.activeIndex.set(index);
+        });
+        this.overlayInstanceSignal.set(instance);
+    }
+    subscribeBackdrop() {
+        if (!this.overlayRef)
+            return;
+        const sub = this.overlayRef.backdropClick().subscribe(() => {
+            this.closePanel();
+        });
+        this.destroyRef.onDestroy(() => sub.unsubscribe());
+    }
+    /**
+     * Listens for `Escape` on the overlay's `keydownEvents()`. Mirrors
+     * `SelectComponent` so focus inside the overlay panel (e.g., if the user
+     * tabs into projected loading/empty templates) still dismisses cleanly.
+     * The combobox's own `<input>` keydown handler already short-circuits
+     * Escape when focus is on the input; this layer is the safety net for
+     * panel-internal focus.
+     */
+    subscribeOverlayEscape() {
+        if (!this.overlayRef)
+            return;
+        const teardown = consumeOverlayEscape(this.overlayRef, (event) => {
+            event.preventDefault();
+            this.inputValue.set(this.lastCommittedLabel());
+            this.closePanel();
+        });
+        this.destroyRef.onDestroy(() => teardown());
+    }
+    resolvePanelClass() {
+        const raw = this.panelClass();
+        return Array.isArray(raw) ? raw.join(' ') : raw;
+    }
+    clearCloseTimer() {
+        if (this.closeTimer !== null) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = null;
+        }
+    }
+    // ── ControlValueAccessor ──
+    writeValue(value) {
+        if (value === null || value === undefined) {
+            this.value.set(null);
+            this.inputValue.set('');
+            this.lastCommittedLabel.set('');
+            this.pendingWriteValue.set(UNRESOLVED);
+            this.valueCommit.emit({ value: null, source: 'programmatic' });
+            return;
+        }
+        // Store verbatim.
+        this.value.set(value);
+        const cmp = this.compareWith();
+        const valueFn = this.optionValue();
+        const labelFn = this.optionLabel();
+        const match = this.options().find((o) => {
+            try {
+                return cmp(valueFn(o), value);
+            }
+            catch {
+                return false;
+            }
+        });
+        if (match) {
+            const label = labelFn(match);
+            this.inputValue.set(label);
+            this.lastCommittedLabel.set(label);
+            this.pendingWriteValue.set(UNRESOLVED);
+        }
+        else {
+            const label = String(value);
+            this.inputValue.set(label);
+            this.lastCommittedLabel.set(label);
+            this.pendingWriteValue.set(value);
+        }
+        this.valueCommit.emit({ value, source: 'programmatic' });
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+        if (isDisabled && this.open()) {
+            this.closePanel();
+        }
+    }
+    // ── FormFieldControl methods ──
+    /** @internal */
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set([...ids]);
+    }
+    /** @internal */
+    setLabelledByIds(ids) {
+        this.labelledByIdsSignal.set([...ids]);
+    }
+    /** @internal */
+    onContainerClick(_event) {
+        if (this.isDisabled())
+            return;
+        this.inputRef()?.nativeElement.focus();
+    }
+    ngOnInit() {
+        // NgControl's `control` is set by the parent FormControl* directive before
+        // children's `ngOnInit`. Subscribe here so errorState reacts to status/value
+        // changes on the bound control.
+        const ctrl = this.ngControl?.control;
+        if (ctrl) {
+            const streams = [ctrl.statusChanges, ctrl.valueChanges].filter((s) => !!s);
+            if (streams.length) {
+                merge(...streams)
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe(() => this._ngControlRev.update((n) => n + 1));
+            }
+        }
+        const submit = this.parentFormGroup?.ngSubmit ?? this.parentForm?.ngSubmit;
+        if (submit) {
+            submit
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this._formSubmitRev.update((n) => n + 1));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ComboboxComponent, isStandalone: true, selector: "tw-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, optionGroup: { classPropertyName: "optionGroup", publicName: "optionGroup", isSignal: true, isRequired: false, transformFunction: null }, optionDescription: { classPropertyName: "optionDescription", publicName: "optionDescription", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, strict: { classPropertyName: "strict", publicName: "strict", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, queryDebounce: { classPropertyName: "queryDebounce", publicName: "queryDebounce", isSignal: true, isRequired: false, transformFunction: null }, minQueryLength: { classPropertyName: "minQueryLength", publicName: "minQueryLength", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "openOnFocus", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", inputValue: "inputValueChange", open: "openChange", queryChange: "queryChange", optionSelected: "optionSelected", valueCommit: "valueCommit", openedChange: "openedChange" }, host: { properties: { "class": "rootClasses()" } }, providers: [
+            {
+                provide: TW_FORM_FIELD_CONTROL,
+                useExisting: forwardRef(() => ComboboxComponent),
+            },
+        ], queries: [{ propertyName: "optionTemplateChild", first: true, predicate: ComboboxOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "emptyTemplateChild", first: true, predicate: ComboboxEmptyTemplateDirective, descendants: true, isSignal: true }, { propertyName: "loadingTemplateChild", first: true, predicate: ComboboxLoadingTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "triggerSurfaceRef", first: true, predicate: ["triggerSurface"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div #triggerSurface [class]="triggerClasses()">
+      <ng-content select="[twComboboxPrefix]" />
+
+      <input
+        #inputEl
+        type="text"
+        [id]="hostId"
+        [class]="inputClasses()"
+        role="combobox"
+        aria-autocomplete="list"
+        aria-haspopup="listbox"
+        [attr.aria-expanded]="open() ? 'true' : 'false'"
+        [attr.aria-controls]="open() ? listboxId : null"
+        [attr.aria-activedescendant]="open() ? (activeOptionId() || null) : null"
+        [attr.aria-required]="requiredInput() ? 'true' : null"
+        [attr.aria-invalid]="errorState() ? 'true' : null"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-labelledby]="resolvedLabelledBy() || null"
+        [attr.aria-describedby]="resolvedDescribedBy() || null"
+        [attr.aria-disabled]="isDisabled() ? 'true' : null"
+        [disabled]="isDisabled()"
+        [placeholder]="placeholder() ?? null"
+        [value]="inputValue()"
+        (input)="onInput($event)"
+        (keydown)="onKeydown($event)"
+        (compositionstart)="onCompositionStart()"
+        (compositionend)="onCompositionEnd($event)"
+        (focus)="onFocus()"
+        (blur)="onBlur()"
+      />
+
+      <ng-content select="[twComboboxSuffix]" />
+
+      @if (showSpinner()) {
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+          [class]="spinnerClasses()"
+        >
+          <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" opacity="0.25" />
+          <path
+            d="M21 12a9 9 0 0 0-9-9"
+            stroke="currentColor"
+            stroke-width="3"
+            stroke-linecap="round"
+          />
+        </svg>
+      }
+
+      @if (showClearButton()) {
+        <button
+          type="button"
+          tabindex="-1"
+          [class]="clearButtonClasses()"
+          aria-label="Clear"
+          (mousedown)="onClearMousedown($event)"
+          (click)="onClearClick($event)"
+        >
+          <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-3">
+            <path
+              fill-rule="evenodd"
+              d="M10 8.586 4.707 3.293a1 1 0 0 0-1.414 1.414L8.586 10l-5.293 5.293a1 1 0 1 0 1.414 1.414L10 11.414l5.293 5.293a1 1 0 0 0 1.414-1.414L11.414 10l5.293-5.293a1 1 0 0 0-1.414-1.414L10 8.586Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+      }
+
+      @if (showChevron()) {
+        <svg
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          [class]="chevronClasses()"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.06l3.71-3.83a.75.75 0 1 1 1.08 1.04l-4.25 4.39a.75.75 0 0 1-1.08 0L5.21 8.27a.75.75 0 0 1 .02-1.06Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      }
+    </div>
+
+    <span hidden>
+      <ng-content />
+    </span>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-combobox',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: TW_FORM_FIELD_CONTROL,
+                            useExisting: forwardRef(() => ComboboxComponent),
+                        },
+                    ],
+                    template: `
+    <div #triggerSurface [class]="triggerClasses()">
+      <ng-content select="[twComboboxPrefix]" />
+
+      <input
+        #inputEl
+        type="text"
+        [id]="hostId"
+        [class]="inputClasses()"
+        role="combobox"
+        aria-autocomplete="list"
+        aria-haspopup="listbox"
+        [attr.aria-expanded]="open() ? 'true' : 'false'"
+        [attr.aria-controls]="open() ? listboxId : null"
+        [attr.aria-activedescendant]="open() ? (activeOptionId() || null) : null"
+        [attr.aria-required]="requiredInput() ? 'true' : null"
+        [attr.aria-invalid]="errorState() ? 'true' : null"
+        [attr.aria-label]="ariaLabel() || null"
+        [attr.aria-labelledby]="resolvedLabelledBy() || null"
+        [attr.aria-describedby]="resolvedDescribedBy() || null"
+        [attr.aria-disabled]="isDisabled() ? 'true' : null"
+        [disabled]="isDisabled()"
+        [placeholder]="placeholder() ?? null"
+        [value]="inputValue()"
+        (input)="onInput($event)"
+        (keydown)="onKeydown($event)"
+        (compositionstart)="onCompositionStart()"
+        (compositionend)="onCompositionEnd($event)"
+        (focus)="onFocus()"
+        (blur)="onBlur()"
+      />
+
+      <ng-content select="[twComboboxSuffix]" />
+
+      @if (showSpinner()) {
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+          [class]="spinnerClasses()"
+        >
+          <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" opacity="0.25" />
+          <path
+            d="M21 12a9 9 0 0 0-9-9"
+            stroke="currentColor"
+            stroke-width="3"
+            stroke-linecap="round"
+          />
+        </svg>
+      }
+
+      @if (showClearButton()) {
+        <button
+          type="button"
+          tabindex="-1"
+          [class]="clearButtonClasses()"
+          aria-label="Clear"
+          (mousedown)="onClearMousedown($event)"
+          (click)="onClearClick($event)"
+        >
+          <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-3">
+            <path
+              fill-rule="evenodd"
+              d="M10 8.586 4.707 3.293a1 1 0 0 0-1.414 1.414L8.586 10l-5.293 5.293a1 1 0 1 0 1.414 1.414L10 11.414l5.293 5.293a1 1 0 0 0 1.414-1.414L11.414 10l5.293-5.293a1 1 0 0 0-1.414-1.414L10 8.586Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+      }
+
+      @if (showChevron()) {
+        <svg
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+          [class]="chevronClasses()"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.06l3.71-3.83a.75.75 0 1 1 1.08 1.04l-4.25 4.39a.75.75 0 0 1-1.08 0L5.21 8.27a.75.75 0 0 1 .02-1.06Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      }
+    </div>
+
+    <span hidden>
+      <ng-content />
+    </span>
+  `,
+                    host: {
+                        '[class]': 'rootClasses()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], optionGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroup", required: false }] }], optionDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDescription", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], strict: [{ type: i0.Input, args: [{ isSignal: true, alias: "strict", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], queryDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryDebounce", required: false }] }], minQueryLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minQueryLength", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnFocus", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValue", required: false }] }, { type: i0.Output, args: ["inputValueChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], queryChange: [{ type: i0.Output, args: ["queryChange"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], valueCommit: [{ type: i0.Output, args: ["valueCommit"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], optionTemplateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComboboxOptionTemplateDirective), { isSignal: true }] }], emptyTemplateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComboboxEmptyTemplateDirective), { isSignal: true }] }], loadingTemplateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComboboxLoadingTemplateDirective), { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], triggerSurfaceRef: [{ type: i0.ViewChild, args: ['triggerSurface', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComboboxComponent, ComboboxEmptyTemplateDirective, ComboboxLoadingTemplateDirective, ComboboxOptionTemplateDirective, ComboboxPrefixDirective, ComboboxSuffixDirective };
+//# sourceMappingURL=cdevhub-ngx-tw-combobox.mjs.map