@cdevhub/ngx-tw 0.2.0 → 0.3.0

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

@@ -9,7 +9,7 @@ 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 { TW_FORM_FIELD, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
 import { NgTemplateOutlet } from '@angular/common';
 
 /**
@@ -23,47 +23,65 @@ class ComboboxOverlayComponent {
     hostElement = inject((ElementRef));
     // ── Config signals pushed by the parent ──
     /** @internal */
-    listboxId = signal('', ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
+    listboxId = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
     /** @internal */
-    labelledBy = signal('', ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    labelledBy = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
     /** @internal */
-    panelMaxHeight = signal(256, ...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : /* istanbul ignore next */ []));
+    panelMaxHeight = signal(256, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : /* istanbul ignore next */ []));
     /** @internal */
-    emptyMessage = signal('No results', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    emptyMessage = signal('No results', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
     /** @internal */
-    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    query = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
     /** @internal */
-    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    loading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     /** @internal */
-    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
     /** @internal */
-    renderedRows = signal([], ...(ngDevMode ? [{ debugName: "renderedRows" }] : /* istanbul ignore next */ []));
+    renderedRows = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderedRows" }] : /* istanbul ignore next */ []));
     /** @internal */
-    isSelected = signal(() => false, ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
+    isSelected = signal(() => false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
     /** @internal */
-    optionIdFn = signal((i) => `option-${i}`, ...(ngDevMode ? [{ debugName: "optionIdFn" }] : /* istanbul ignore next */ []));
+    optionIdFn = signal((i) => `option-${i}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionIdFn" }] : /* istanbul ignore next */ []));
     /** @internal */
-    groupHeaderIdFn = signal((g) => `group-${g}`, ...(ngDevMode ? [{ debugName: "groupHeaderIdFn" }] : /* istanbul ignore next */ []));
+    groupHeaderIdFn = signal((g) => `group-${g}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupHeaderIdFn" }] : /* istanbul ignore next */ []));
     /** @internal */
-    customPanelClass = signal('', ...(ngDevMode ? [{ debugName: "customPanelClass" }] : /* istanbul ignore next */ []));
+    customPanelClass = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customPanelClass" }] : /* istanbul ignore next */ []));
     /** @internal */
-    optionTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
+    optionTemplate = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
     /** @internal */
-    emptyTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
+    emptyTemplate = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
     /** @internal */
-    loadingTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "loadingTemplate" }] : /* istanbul ignore next */ []));
+    loadingTemplate = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingTemplate" }] : /* istanbul ignore next */ []));
     // ── Callbacks pushed by the parent ──
     /** @internal */
-    onOptionPick = signal(() => { }, ...(ngDevMode ? [{ debugName: "onOptionPick" }] : /* istanbul ignore next */ []));
+    onOptionPick = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onOptionPick" }] : /* istanbul ignore next */ []));
     /** @internal */
-    onOptionHover = signal(() => { }, ...(ngDevMode ? [{ debugName: "onOptionHover" }] : /* istanbul ignore next */ []));
+    onOptionHover = signal(() => { }, /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(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';
@@ -119,8 +137,8 @@ class ComboboxOverlayComponent {
             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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ComboboxOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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" />
@@ -177,6 +195,11 @@ class ComboboxOverlayComponent {
               </div>
             </li>
           } @else {
+            <!-- ARIA activedescendant listbox: keyboard navigation lives on the
+                 parent combobox input (via aria-activedescendant). Options are
+                 click-targets only and never receive DOM focus, so neither a
+                 keydown nor a tabindex applies here. -->
+            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
             <li
               role="option"
               [id]="optionIdFn()(row.index)"
@@ -209,7 +232,7 @@ class ComboboxOverlayComponent {
     </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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ComboboxOverlayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-combobox-overlay',
@@ -277,6 +300,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               </div>
             </li>
           } @else {
+            <!-- ARIA activedescendant listbox: keyboard navigation lives on the
+                 parent combobox input (via aria-activedescendant). Options are
+                 click-targets only and never receive DOM focus, so neither a
+                 keydown nor a tabindex applies here. -->
+            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
             <li
               role="option"
               [id]="optionIdFn()(row.index)"
@@ -417,10 +445,10 @@ class ComboboxOptionTemplateDirective {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ComboboxOptionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: ComboboxOptionTemplateDirective, isStandalone: true, selector: "[twComboboxOption]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxOptionTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ComboboxOptionTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[twComboboxOption]' }]
         }] });
@@ -432,10 +460,10 @@ class ComboboxEmptyTemplateDirective {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ComboboxEmptyTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: ComboboxEmptyTemplateDirective, isStandalone: true, selector: "[twComboboxEmpty]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxEmptyTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ComboboxEmptyTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[twComboboxEmpty]' }]
         }] });
@@ -443,19 +471,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ComboboxLoadingTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: ComboboxLoadingTemplateDirective, isStandalone: true, selector: "[twComboboxLoading]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxLoadingTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ComboboxPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ComboboxPrefixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twComboboxPrefix]',
@@ -464,10 +492,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         }] });
 /** 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ComboboxSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ComboboxSuffixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twComboboxSuffix]',
@@ -486,63 +514,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 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 */ []));
+    options = input([], /* @ts-ignore */
+    ...(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 */ []));
+    optionLabel = input(defaultOptionLabel, /* @ts-ignore */
+    ...(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 */ []));
+    optionValue = input(defaultOptionValue, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []));
     /** Accessor returning whether an option is non-interactive. */
-    optionDisabled = input(defaultOptionDisabled, ...(ngDevMode ? [{ debugName: "optionDisabled" }] : /* istanbul ignore next */ []));
+    optionDisabled = input(defaultOptionDisabled, /* @ts-ignore */
+    ...(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 */ []));
+    optionGroup = input(defaultOptionGroup, /* @ts-ignore */
+    ...(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 */ []));
+    optionDescription = input(defaultOptionDescription, /* @ts-ignore */
+    ...(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 */ []));
+    filterFn = input(defaultStartsWithFilter, /* @ts-ignore */
+    ...(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 */ []));
+    strict = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strict" }] : /* istanbul ignore next */ []));
     /** Placeholder shown when the input is empty. */
-    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    placeholder = input(undefined, /* @ts-ignore */
+    ...(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 */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Semantic color for the focus ring. */
-    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    color = input('primary', /* @ts-ignore */
+    ...(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 */ []));
+    showChevron = input(true, /* @ts-ignore */
+    ...(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 */ []));
+    clearable = input(true, /* @ts-ignore */
+    ...(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 */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(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 */ []));
+    queryDebounce = input(150, /* @ts-ignore */
+    ...(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 */ []));
+    minQueryLength = input(0, /* @ts-ignore */
+    ...(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 */ []));
+    openOnFocus = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openOnFocus" }] : /* istanbul ignore next */ []));
     /** Maximum height (px) of the popover scroll region. */
-    panelMaxHeight = input(256, ...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : /* istanbul ignore next */ []));
+    panelMaxHeight = input(256, /* @ts-ignore */
+    ...(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 */ []));
+    panelWidth = input('trigger', /* @ts-ignore */
+    ...(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 */ []));
+    panelClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     /** CDK overlay scroll strategy. */
-    scrollStrategy = input('reposition', ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
+    scrollStrategy = input('reposition', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
     /** Pixel offset between the input and the popover. */
-    offset = input(4, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    offset = input(4, /* @ts-ignore */
+    ...(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 */ []));
+    emptyMessage = input('No results', /* @ts-ignore */
+    ...(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 */ []));
+    compareWith = input(Object.is, /* @ts-ignore */
+    ...(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. */
@@ -550,14 +602,18 @@ class ComboboxComponent {
     /** 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 */ []));
+    errorStateMatcher = input(undefined, /* @ts-ignore */
+    ...(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 */ []));
+    value = model(null, /* @ts-ignore */
+    ...(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 */ []));
+    inputValue = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
     /** Two-way bound open state of the popover. */
-    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    open = model(false, /* @ts-ignore */
+    ...(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();
@@ -569,14 +625,19 @@ class ComboboxComponent {
     openedChange = output();
     // ── Content queries ──
     /** @internal */
-    optionTemplateChild = contentChild(ComboboxOptionTemplateDirective, ...(ngDevMode ? [{ debugName: "optionTemplateChild" }] : /* istanbul ignore next */ []));
+    optionTemplateChild = contentChild(ComboboxOptionTemplateDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionTemplateChild" }] : /* istanbul ignore next */ []));
     /** @internal */
-    emptyTemplateChild = contentChild(ComboboxEmptyTemplateDirective, ...(ngDevMode ? [{ debugName: "emptyTemplateChild" }] : /* istanbul ignore next */ []));
+    emptyTemplateChild = contentChild(ComboboxEmptyTemplateDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyTemplateChild" }] : /* istanbul ignore next */ []));
     /** @internal */
-    loadingTemplateChild = contentChild(ComboboxLoadingTemplateDirective, ...(ngDevMode ? [{ debugName: "loadingTemplateChild" }] : /* istanbul ignore next */ []));
+    loadingTemplateChild = contentChild(ComboboxLoadingTemplateDirective, /* @ts-ignore */
+    ...(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 */ []));
+    inputRef = viewChild('inputEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    triggerSurfaceRef = viewChild('triggerSurface', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerSurfaceRef" }] : /* istanbul ignore next */ []));
     // ── Injected deps ──
     overlayService = inject(Overlay);
     elementRef = inject((ElementRef));
@@ -586,7 +647,7 @@ class ComboboxComponent {
     focusMonitor = inject(FocusMonitor);
     liveAnnouncer = inject(LiveAnnouncer);
     platform = inject(Platform);
-    formField = inject(FormFieldComponent, { optional: true });
+    formField = inject(TW_FORM_FIELD, { optional: true });
     ngControl = inject(NgControl, { optional: true, self: true });
     parentForm = inject(NgForm, { optional: true });
     parentFormGroup = inject(FormGroupDirective, { optional: true });
@@ -603,24 +664,35 @@ class ComboboxComponent {
     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 */ []));
+    composing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "composing" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    focusedSignal = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedSignal" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    _ngControlRev = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
+    _formSubmitRev = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
+    describedByIdsSignal = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    labelledByIdsSignal = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledByIdsSignal" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    lastCommittedLabel = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastCommittedLabel" }] : /* istanbul ignore next */ []));
+    pendingWriteValue = signal(UNRESOLVED, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingWriteValue" }] : /* istanbul ignore next */ []));
+    closingSignal = signal(false, /* @ts-ignore */
+    ...(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 */ []));
+    overlayInstanceSignal = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayInstanceSignal" }] : /* istanbul ignore next */ []));
     closeTimer = null;
     queryDebounceTimer = null;
     announceTimer = null;
@@ -630,9 +702,11 @@ class ComboboxComponent {
     }
     // ── Derived state ──
     /** @internal */
-    isDisabled = computed(() => this.disabledInput() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabledInput() || this.cvaDisabled(), /* @ts-ignore */
+    ...(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 */ []));
+    naked = computed(() => !!this.formField, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "naked" }] : /* istanbul ignore next */ []));
     /** @internal Resolved visible options (after filter, with derived view fields). */
     visibleOptions = computed(() => {
         const opts = this.options();
@@ -652,7 +726,8 @@ class ComboboxComponent {
             group: groupFn(option),
             description: descFn(option),
         }));
-    }, ...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
     /** @internal Rendered rows (group headers + option rows). */
     renderedRows = computed(() => {
         const visible = this.visibleOptions();
@@ -668,7 +743,8 @@ class ComboboxComponent {
             rows.push({ kind: 'option', option: v, index });
         });
         return rows;
-    }, ...(ngDevMode ? [{ debugName: "renderedRows" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(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++) {
@@ -701,20 +777,25 @@ class ComboboxComponent {
         if (idx < 0 || idx >= visible.length)
             return null;
         return visible[idx];
-    }, ...(ngDevMode ? [{ debugName: "activeOption" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []));
     /** @internal */
-    isEmpty = computed(() => this.inputValue().length === 0 && this.value() == null, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    isEmpty = computed(() => this.inputValue().length === 0 && this.value() == null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
     /** @internal */
-    showClearButton = computed(() => this.clearable() && !this.isDisabled() && this.inputValue().length > 0, ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
+    showClearButton = computed(() => this.clearable() && !this.isDisabled() && this.inputValue().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
     /** @internal */
-    showSpinner = computed(() => this.loading(), ...(ngDevMode ? [{ debugName: "showSpinner" }] : /* istanbul ignore next */ []));
+    showSpinner = computed(() => this.loading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSpinner" }] : /* istanbul ignore next */ []));
     /** @internal */
     resolvedDescribedBy = computed(() => {
         const extra = this.describedByIdsSignal();
@@ -723,7 +804,8 @@ class ComboboxComponent {
         if (user)
             merged.push(...user.split(/\s+/).filter(Boolean));
         return merged.length ? merged.join(' ') : '';
-    }, ...(ngDevMode ? [{ debugName: "resolvedDescribedBy" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDescribedBy" }] : /* istanbul ignore next */ []));
     /** @internal */
     resolvedLabelledBy = computed(() => {
         const extra = this.labelledByIdsSignal();
@@ -732,7 +814,8 @@ class ComboboxComponent {
         if (user)
             merged.push(...user.split(/\s+/).filter(Boolean));
         return merged.length ? merged.join(' ') : '';
-    }, ...(ngDevMode ? [{ debugName: "resolvedLabelledBy" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(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();
@@ -741,7 +824,8 @@ class ComboboxComponent {
         const form = this.parentFormGroup ??
             this.parentForm;
         return matcher.isErrorState(this.ngControl?.control ?? null, form);
-    }, ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
     // ── tv() output ──
     variantResult = computed(() => comboboxVariants({
         size: this.size(),
@@ -750,22 +834,30 @@ class ComboboxComponent {
         open: this.open(),
         naked: this.naked(),
         errorState: this.errorState(),
-    }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
     /** @internal */
-    rootClasses = computed(() => this.variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => this.variantResult().root(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    triggerClasses = computed(() => this.variantResult().trigger(), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    triggerClasses = computed(() => this.variantResult().trigger(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    inputClasses = computed(() => this.variantResult().input(), ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
+    inputClasses = computed(() => this.variantResult().input(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    clearButtonClasses = computed(() => this.variantResult().clearButton(), ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : /* istanbul ignore next */ []));
+    clearButtonClasses = computed(() => this.variantResult().clearButton(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    chevronClasses = computed(() => this.variantResult().chevron(), ...(ngDevMode ? [{ debugName: "chevronClasses" }] : /* istanbul ignore next */ []));
+    chevronClasses = computed(() => this.variantResult().chevron(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chevronClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    spinnerClasses = computed(() => this.variantResult().spinner(), ...(ngDevMode ? [{ debugName: "spinnerClasses" }] : /* istanbul ignore next */ []));
+    spinnerClasses = computed(() => this.variantResult().spinner(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spinnerClasses" }] : /* istanbul ignore next */ []));
     // ── FormFieldControl impl ──
     /** @internal */
-    id = computed(() => this.hostId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    id = computed(() => this.hostId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     /** @internal */
     focused = this.focusedSignal.asReadonly();
     /** @internal */
@@ -773,13 +865,16 @@ class ComboboxComponent {
     /** @internal */
     disabled = this.isDisabled;
     /** @internal */
-    required = computed(() => this.requiredInput(), ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    required = computed(() => this.requiredInput(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     /** @internal */
     controlType = 'combobox';
     /** @internal */
-    userAriaDescribedBy = computed(() => this.ariaDescribedby(), ...(ngDevMode ? [{ debugName: "userAriaDescribedBy" }] : /* istanbul ignore next */ []));
+    userAriaDescribedBy = computed(() => this.ariaDescribedby(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userAriaDescribedBy" }] : /* istanbul ignore next */ []));
     /** @internal */
-    userAriaLabelledby = computed(() => this.ariaLabelledby(), ...(ngDevMode ? [{ debugName: "userAriaLabelledby" }] : /* istanbul ignore next */ []));
+    userAriaLabelledby = computed(() => this.ariaLabelledby(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userAriaLabelledby" }] : /* istanbul ignore next */ []));
     // ── Constructor ──
     constructor() {
         // Material-style CVA wiring: declare ourselves as the value accessor on any
@@ -1509,8 +1604,8 @@ class ComboboxComponent {
                 .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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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),
@@ -1606,7 +1701,7 @@ class ComboboxComponent {
     </span>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-combobox',