@cdevhub/ngx-tw 0.2.0

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

@@ -0,0 +1,1722 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, signal, viewChild, computed, ChangeDetectionStrategy, Component, TemplateRef, Directive, input, model, output, contentChild, ViewContainerRef, Injector, DestroyRef, linkedSignal, effect, untracked, afterNextRender, isDevMode, forwardRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { NgControl, NgForm, FormGroupDirective } from '@angular/forms';
+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 { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subscription, merge } from 'rxjs';
+import { tv } from 'tailwind-variants';
+import { TW_ERROR_STATE_MATCHER, buildSelectLikePositions, resolveSelectScrollStrategy, consumeOverlayEscape } from '@cdevhub/ngx-tw/core';
+import { FormFieldComponent, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
+
+/**
+ * Internal overlay panel for `tw-select`. Renders the header/search/listbox/empty/footer
+ * regions and dispatches interaction callbacks back to the parent `SelectComponent`.
+ * Not exported from the public API.
+ */
+class SelectOverlayComponent {
+    elementRef = inject((ElementRef));
+    // ── Config signals set by the parent component ──
+    /** @internal */
+    size = signal('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    color = signal('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    multiple = signal(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    searchable = signal(false, ...(ngDevMode ? [{ debugName: "searchable" }] : /* 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 */
+    search = signal('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    renderedRows = signal([], ...(ngDevMode ? [{ debugName: "renderedRows" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    visibleOptions = signal([], ...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    optionTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    emptyTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    headerTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    footerTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    optionLabelFn = signal(() => '', ...(ngDevMode ? [{ debugName: "optionLabelFn" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    selectedChecker = signal(() => false, ...(ngDevMode ? [{ debugName: "selectedChecker" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    computeOptionClass = signal(() => '', ...(ngDevMode ? [{ debugName: "computeOptionClass" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    checkmarkColorClass = signal('', ...(ngDevMode ? [{ debugName: "checkmarkColorClass" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    panelClassValue = signal('', ...(ngDevMode ? [{ debugName: "panelClassValue" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    listboxId = signal('', ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    searchInputId = signal('', ...(ngDevMode ? [{ debugName: "searchInputId" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    optionIdFn = signal((i) => `option-${i}`, ...(ngDevMode ? [{ debugName: "optionIdFn" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    leaving = signal(false, ...(ngDevMode ? [{ debugName: "leaving" }] : /* istanbul ignore next */ []));
+    // ── Callbacks set by the parent component ──
+    /** @internal */
+    onSearchInput = signal(() => { }, ...(ngDevMode ? [{ debugName: "onSearchInput" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    onOptionSelect = signal(() => { }, ...(ngDevMode ? [{ debugName: "onOptionSelect" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    onOptionActivate = signal(() => { }, ...(ngDevMode ? [{ debugName: "onOptionActivate" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    onPanelKeydown = signal(() => { }, ...(ngDevMode ? [{ debugName: "onPanelKeydown" }] : /* istanbul ignore next */ []));
+    // ── View refs ──
+    searchInputRef = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInputRef" }] : /* istanbul ignore next */ []));
+    // ── Computed classes ──
+    /** @internal */
+    panelClasses = computed(() => {
+        const base = 'block w-full bg-surface-overlay border border-border rounded-lg shadow-md overflow-hidden flex flex-col';
+        const custom = this.panelClassValue();
+        return custom ? `${base} ${custom}` : base;
+    }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    checkmarkClasses = computed(() => {
+        // xs/sm densities use `size-3.5` (14px) for the checkmark — the half-step
+        // is the only icon size that aligns with the surrounding text-xs metric.
+        const size = this.size() === 'xs' || this.size() === 'sm' ? 'size-3.5' : 'size-4';
+        return `${size} shrink-0 ml-auto ${this.checkmarkColorClass()}`;
+    }, ...(ngDevMode ? [{ debugName: "checkmarkClasses" }] : /* istanbul ignore next */ []));
+    // ── Template helpers ──
+    /** @internal */
+    isOptionDisabled(visibleIndex) {
+        const vis = this.visibleOptions();
+        if (visibleIndex < 0 || visibleIndex >= vis.length)
+            return false;
+        return vis[visibleIndex].disabled;
+    }
+    /** @internal */
+    buildOptionContext(visibleIndex, option) {
+        const v = this.visibleOptions()[visibleIndex];
+        return {
+            $implicit: option,
+            label: v?.label ?? '',
+            value: v?.value,
+            selected: this.selectedChecker()(visibleIndex),
+            active: this.activeIndex() === visibleIndex,
+            disabled: v?.disabled ?? false,
+            index: visibleIndex,
+        };
+    }
+    /** @internal track function for @for. */
+    trackRow(_index, row) {
+        if (row.kind === 'group-label')
+            return `g:${row.group}`;
+        return `o:${row.index}`;
+    }
+    // ── Interactions ──
+    /** @internal */
+    onSearchInputEvent(event) {
+        const target = event.target;
+        this.onSearchInput()(target.value);
+    }
+    /** @internal */
+    onSearchKeydown(event) {
+        this.onPanelKeydown()(event);
+    }
+    /** @internal */
+    onOptionClick(visibleIndex, event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.onOptionSelect()(visibleIndex);
+    }
+    /** @internal */
+    onOptionMouseEnter(visibleIndex) {
+        if (this.isOptionDisabled(visibleIndex))
+            return;
+        this.onOptionActivate()(visibleIndex);
+    }
+    /** @internal */
+    focusSearchInput() {
+        const el = this.searchInputRef()?.nativeElement;
+        el?.focus();
+    }
+    /** @internal Exposes the root overlay element for tests. */
+    getElement() {
+        return this.elementRef.nativeElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SelectOverlayComponent, isStandalone: true, selector: "tw-select-overlay", host: { properties: { "class": "panelClasses()", "animate.enter": "\"scale-in\"", "animate.leave": "\"scale-out\"" } }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (headerTemplate(); as tpl) {
+      <div class="border-b border-border p-2">
+        <ng-container *ngTemplateOutlet="tpl.templateRef" />
+      </div>
+    }
+
+    @if (searchable()) {
+      <div class="p-2 border-b border-border">
+        <input
+          #searchInput
+          type="search"
+          [id]="searchInputId()"
+          [attr.aria-label]="'Search'"
+          [attr.aria-controls]="listboxId()"
+          [value]="search()"
+          class="w-full px-3 py-1.5 rounded-md border border-border bg-surface text-fg placeholder:text-fg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 transition-colors duration-normal motion-reduce:transition-none text-sm"
+          placeholder="Search…"
+          (input)="onSearchInputEvent($event)"
+          (keydown)="onSearchKeydown($event)"
+        />
+      </div>
+    }
+
+    <div
+      #listboxEl
+      role="listbox"
+      tabindex="-1"
+      [id]="listboxId()"
+      [attr.aria-multiselectable]="multiple() ? 'true' : null"
+      [style.maxHeight.px]="panelMaxHeight()"
+      class="flex-1 min-h-0 overflow-y-auto py-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500"
+    >
+      @if (visibleOptions().length === 0) {
+        @if (emptyTemplate(); as tpl) {
+          <ng-container *ngTemplateOutlet="tpl.templateRef; context: { $implicit: search() }" />
+        } @else {
+          <div class="p-4 text-center text-sm text-fg-muted">{{ emptyMessage() }}</div>
+        }
+      } @else {
+        @for (row of renderedRows(); track trackRow($index, row)) {
+          @if (row.kind === 'group-label') {
+            <div role="group" [attr.aria-label]="row.group">
+              <div class="px-3 py-1 text-xs font-semibold uppercase tracking-wide text-fg-subtle">
+                {{ row.group }}
+              </div>
+            </div>
+          } @else {
+            <div
+              role="option"
+              [id]="optionIdFn()(row.index)"
+              [attr.aria-selected]="selectedChecker()(row.index) ? 'true' : 'false'"
+              [attr.aria-disabled]="isOptionDisabled(row.index) || null"
+              [class]="
+                computeOptionClass()(
+                  selectedChecker()(row.index),
+                  activeIndex() === row.index,
+                  isOptionDisabled(row.index)
+                )
+              "
+              (click)="onOptionClick(row.index, $event)"
+              (mouseenter)="onOptionMouseEnter(row.index)"
+            >
+              @if (optionTemplate(); as tpl) {
+                <ng-container
+                  *ngTemplateOutlet="
+                    tpl.templateRef;
+                    context: buildOptionContext(row.index, row.option)
+                  "
+                />
+              } @else {
+                <span class="flex-1 min-w-0 truncate">{{ optionLabelFn()(row.option) }}</span>
+                @if (selectedChecker()(row.index)) {
+                  <svg
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    [class]="checkmarkClasses()"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M16.704 5.29a1 1 0 0 1 .006 1.414l-7.2 7.3a1 1 0 0 1-1.42.007L3.29 9.296a1 1 0 0 1 1.42-1.41l3.794 3.82 6.79-6.886a1 1 0 0 1 1.41-.07Z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                }
+              }
+            </div>
+          }
+        }
+      }
+    </div>
+
+    @if (footerTemplate(); as tpl) {
+      <div class="border-t border-border p-2">
+        <ng-container *ngTemplateOutlet="tpl.templateRef" />
+      </div>
+    }
+  `, 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: SelectOverlayComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-select-overlay',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet],
+                    host: {
+                        '[class]': 'panelClasses()',
+                        '[animate.enter]': '"scale-in"',
+                        '[animate.leave]': '"scale-out"',
+                    },
+                    template: `
+    @if (headerTemplate(); as tpl) {
+      <div class="border-b border-border p-2">
+        <ng-container *ngTemplateOutlet="tpl.templateRef" />
+      </div>
+    }
+
+    @if (searchable()) {
+      <div class="p-2 border-b border-border">
+        <input
+          #searchInput
+          type="search"
+          [id]="searchInputId()"
+          [attr.aria-label]="'Search'"
+          [attr.aria-controls]="listboxId()"
+          [value]="search()"
+          class="w-full px-3 py-1.5 rounded-md border border-border bg-surface text-fg placeholder:text-fg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 transition-colors duration-normal motion-reduce:transition-none text-sm"
+          placeholder="Search…"
+          (input)="onSearchInputEvent($event)"
+          (keydown)="onSearchKeydown($event)"
+        />
+      </div>
+    }
+
+    <div
+      #listboxEl
+      role="listbox"
+      tabindex="-1"
+      [id]="listboxId()"
+      [attr.aria-multiselectable]="multiple() ? 'true' : null"
+      [style.maxHeight.px]="panelMaxHeight()"
+      class="flex-1 min-h-0 overflow-y-auto py-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500"
+    >
+      @if (visibleOptions().length === 0) {
+        @if (emptyTemplate(); as tpl) {
+          <ng-container *ngTemplateOutlet="tpl.templateRef; context: { $implicit: search() }" />
+        } @else {
+          <div class="p-4 text-center text-sm text-fg-muted">{{ emptyMessage() }}</div>
+        }
+      } @else {
+        @for (row of renderedRows(); track trackRow($index, row)) {
+          @if (row.kind === 'group-label') {
+            <div role="group" [attr.aria-label]="row.group">
+              <div class="px-3 py-1 text-xs font-semibold uppercase tracking-wide text-fg-subtle">
+                {{ row.group }}
+              </div>
+            </div>
+          } @else {
+            <div
+              role="option"
+              [id]="optionIdFn()(row.index)"
+              [attr.aria-selected]="selectedChecker()(row.index) ? 'true' : 'false'"
+              [attr.aria-disabled]="isOptionDisabled(row.index) || null"
+              [class]="
+                computeOptionClass()(
+                  selectedChecker()(row.index),
+                  activeIndex() === row.index,
+                  isOptionDisabled(row.index)
+                )
+              "
+              (click)="onOptionClick(row.index, $event)"
+              (mouseenter)="onOptionMouseEnter(row.index)"
+            >
+              @if (optionTemplate(); as tpl) {
+                <ng-container
+                  *ngTemplateOutlet="
+                    tpl.templateRef;
+                    context: buildOptionContext(row.index, row.option)
+                  "
+                />
+              } @else {
+                <span class="flex-1 min-w-0 truncate">{{ optionLabelFn()(row.option) }}</span>
+                @if (selectedChecker()(row.index)) {
+                  <svg
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    [class]="checkmarkClasses()"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M16.704 5.29a1 1 0 0 1 .006 1.414l-7.2 7.3a1 1 0 0 1-1.42.007L3.29 9.296a1 1 0 0 1 1.42-1.41l3.794 3.82 6.79-6.886a1 1 0 0 1 1.41-.07Z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                }
+              }
+            </div>
+          }
+        }
+      }
+    </div>
+
+    @if (footerTemplate(); as tpl) {
+      <div class="border-t border-border p-2">
+        <ng-container *ngTemplateOutlet="tpl.templateRef" />
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
+
+// Duration for leave animation — matches theme/_base.css scale-out/fade-out.
+const ANIMATION_DURATION = 120;
+// ── tv() config ───────────────────────────────────────────────────
+const selectVariants = tv({
+    slots: {
+        root: 'relative inline-block w-full',
+        trigger: 'w-full inline-flex items-center gap-2 text-fg cursor-pointer transition-[color,border-color,background-color,box-shadow] duration-normal motion-reduce:transition-none',
+        valueText: 'flex-1 min-w-0 text-left truncate',
+        placeholderText: 'flex-1 min-w-0 text-left truncate text-fg-subtle',
+        chevron: 'shrink-0 text-fg-muted transition-transform duration-normal motion-reduce:transition-none',
+        clearButton: 'inline-flex items-center justify-center shrink-0 rounded-md text-fg-muted hover:text-fg hover:bg-surface-muted transition-colors duration-normal motion-reduce:transition-none size-5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+    },
+    variants: {
+        size: {
+            // xs density: chevron uses `size-3.5` (14px) — half-step that lines up
+            // with text-xs inside the compact trigger.
+            xs: { trigger: 'px-2 py-1 text-xs', chevron: 'size-3.5' },
+            sm: { trigger: 'px-3 py-1.5 text-sm', chevron: 'size-4' },
+            md: { trigger: 'px-4 py-2 text-sm', chevron: 'size-4' },
+            lg: { trigger: 'px-5 py-2.5 text-base', chevron: 'size-5' },
+            xl: { trigger: 'px-6 py-3 text-base', chevron: 'size-5' },
+        },
+        variant: {
+            default: {
+                trigger: 'border border-border bg-surface rounded-md hover:border-border-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+            },
+            naked: {
+                trigger: 'bg-transparent border-0 rounded-none p-0 focus-visible:outline-none',
+            },
+        },
+        open: {
+            true: { chevron: 'rotate-180' },
+            false: { chevron: 'rotate-0' },
+        },
+        disabled: {
+            true: { root: 'opacity-50 pointer-events-none cursor-not-allowed' },
+            false: { root: '' },
+        },
+        focused: { true: {}, false: {} },
+        color: {
+            primary: {},
+            secondary: {},
+            accent: {},
+            neutral: {},
+            info: {},
+            success: {},
+            warning: {},
+            error: {},
+        },
+    },
+    compoundVariants: [
+        { variant: 'default', focused: true, color: 'primary', class: { trigger: 'border-primary-500' } },
+        { variant: 'default', focused: true, color: 'secondary', class: { trigger: 'border-secondary-500' } },
+        { variant: 'default', focused: true, color: 'accent', class: { trigger: 'border-accent-500' } },
+        { variant: 'default', focused: true, color: 'neutral', class: { trigger: 'border-border-strong' } },
+        { variant: 'default', focused: true, color: 'info', class: { trigger: 'border-info-500' } },
+        { variant: 'default', focused: true, color: 'success', class: { trigger: 'border-success-500' } },
+        { variant: 'default', focused: true, color: 'warning', class: { trigger: 'border-warning-500' } },
+        { variant: 'default', focused: true, color: 'error', class: { trigger: 'border-error-500' } },
+    ],
+    defaultVariants: {
+        size: 'md',
+        variant: 'default',
+        open: false,
+        disabled: false,
+        focused: false,
+        color: 'primary',
+    },
+}, { twMerge: true });
+// ── Option-state color lookups ──
+// Slot tokens own light/dark contrast — no `dark:`, no shade picks.
+const OPTION_SELECTED_BG = {
+    primary: 'bg-primary-soft',
+    secondary: 'bg-secondary-soft',
+    accent: 'bg-accent-soft',
+    neutral: 'bg-neutral-soft',
+    info: 'bg-info-soft',
+    success: 'bg-success-soft',
+    warning: 'bg-warning-soft',
+    error: 'bg-error-soft',
+};
+const OPTION_CHECKMARK_COLOR = {
+    primary: 'text-primary-icon',
+    secondary: 'text-secondary-icon',
+    accent: 'text-accent-icon',
+    neutral: 'text-fg',
+    info: 'text-info-icon',
+    success: 'text-success-icon',
+    warning: 'text-warning-icon',
+    error: 'text-error-icon',
+};
+// ── Template directives (content-projected slots) ─────────────────
+/** Structural directive projecting a custom template for each option in the panel. */
+class SelectOptionTemplateDirective {
+    /** @internal */
+    templateRef = inject((TemplateRef));
+    /** @internal Enables strict typing of `let-` bindings in the template. */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectOptionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: SelectOptionTemplateDirective, isStandalone: true, selector: "[twSelectOption]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectOptionTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[twSelectOption]' }]
+        }] });
+/** Structural directive projecting a custom template for the select's trigger content. */
+class SelectTriggerTemplateDirective {
+    /** @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: SelectTriggerTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: SelectTriggerTemplateDirective, isStandalone: true, selector: "[twSelectTrigger]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectTriggerTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[twSelectTrigger]' }]
+        }] });
+/** Structural directive projecting a custom template for the panel's empty state. */
+class SelectEmptyTemplateDirective {
+    /** @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: SelectEmptyTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: SelectEmptyTemplateDirective, isStandalone: true, selector: "[twSelectEmpty]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectEmptyTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[twSelectEmpty]' }]
+        }] });
+/** Structural directive projecting a custom header at the top of the panel. */
+class SelectHeaderTemplateDirective {
+    /** @internal */
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: SelectHeaderTemplateDirective, isStandalone: true, selector: "[twSelectHeader]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[twSelectHeader]' }]
+        }] });
+/** Structural directive projecting a custom footer at the bottom of the panel. */
+class SelectFooterTemplateDirective {
+    /** @internal */
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: SelectFooterTemplateDirective, isStandalone: true, selector: "[twSelectFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectFooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[twSelectFooter]' }]
+        }] });
+// ── ID generator ──
+let nextSelectId = 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;
+}
+// ── SelectComponent ──
+/**
+ * ARIA combobox with listbox popup. Supports single/multi selection, in-panel
+ * search filtering, custom option/trigger templates, and full integration with
+ * Angular forms (reactive, template-driven, signal-forms) plus `tw-form-field`.
+ */
+class SelectComponent {
+    /** Array of options to render in the panel. Accepts either `TwSelectOption<T>` objects or arbitrary records read via the accessor inputs. Defaults to an empty array. */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Accessor returning the visible label for an option. Override when passing arbitrary objects. */
+    optionLabel = input(defaultOptionLabel, ...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
+    /** Accessor returning the value for an option. The result is what `value` / `valueChange` emit. */
+    optionValue = input(defaultOptionValue, ...(ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []));
+    /** Accessor returning the disabled state for an option. Defaults to reading `.disabled`. */
+    optionDisabled = input(defaultOptionDisabled, ...(ngDevMode ? [{ debugName: "optionDisabled" }] : /* istanbul ignore next */ []));
+    /** Accessor returning the group name for an option. Options sharing a group render under a labelled `role="group"` region. */
+    optionGroup = input(defaultOptionGroup, ...(ngDevMode ? [{ debugName: "optionGroup" }] : /* istanbul ignore next */ []));
+    /** When true, enables multi-selection. The `value` model becomes a `T[]` and the panel renders checkable options. Defaults to `false`. */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    /** When true, renders a search input at the top of the panel that filters options using `filterPredicate`. Defaults to `false`. */
+    searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    /** Custom filter function for the search input. Defaults to a case-insensitive substring match on the option label. */
+    filterPredicate = input((option, search) => {
+        const label = this.optionLabel()(option);
+        return label.toLowerCase().includes(search.toLowerCase());
+    }, ...(ngDevMode ? [{ debugName: "filterPredicate" }] : /* istanbul ignore next */ []));
+    /** Placeholder text shown in the trigger when no value is selected. */
+    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** When true, the trigger cannot be activated and the panel cannot open. Defaults to `false`. */
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
+    /** When true, exposes `aria-required="true"` on the trigger. Defaults to `false`. */
+    requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required' });
+    /** Controls trigger padding, font size, and panel option density. Defaults to `'md'`. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Semantic color for focused trigger border, active-option background, and checkmarks. Defaults to `'primary'`. */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Visual style of the trigger. When inside a `tw-form-field` and left unset, auto-resolves to `'naked'`. Otherwise defaults to `'default'`. */
+    variant = input(undefined, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Overlay panel width. `'trigger'` matches the trigger's measured width; `'auto'` lets content decide; a number is applied as pixels; a string is passed through as a CSS length. Defaults to `'trigger'`. */
+    panelWidth = input('trigger', ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
+    /** Extra class(es) applied to the overlay panel element. */
+    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    /** Maximum height of the listbox scroll region in pixels. Defaults to `256`. */
+    panelMaxHeight = input(256, ...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : /* istanbul ignore next */ []));
+    /** Whether the panel closes after a selection is made. When unset, resolves to `true` for single-select and `false` for multi-select. */
+    closeOnSelect = input(undefined, ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []));
+    /** CDK scroll strategy for the overlay. Defaults to `'reposition'`. */
+    scrollStrategy = input('reposition', ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
+    /** Pixel distance between trigger and panel. Defaults to `4`. */
+    offset = input(4, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    /** Fallback message rendered when the filter yields no options and no `*twSelectEmpty` template is provided. */
+    emptyMessage = input('No results', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the combobox trigger. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** ID of an external element that labels the combobox. */
+    ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    /** ID of an external element that describes the combobox. */
+    ariaDescribedby = input(undefined, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, the select uses the `TW_ERROR_STATE_MATCHER` token's value. */
+    errorStateMatcher = input(undefined, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+    /** Equality comparator for option values. Defaults to `Object.is`. */
+    compareWith = input(Object.is, ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    // ── Models (two-way) ──
+    /** Two-way bound selected value(s). Single-select: `T | null`. Multi-select: `T[]`. */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Two-way bound open state of the panel. */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    // ── Outputs ──
+    /** Fires when the panel's visibility finishes changing. */
+    openedChange = output();
+    /** Fires after any selection change, with `added`, `removed`, `previousValue`, and a `source` discriminator. */
+    selectionChange = output();
+    /** Fires whenever the search input changes (only when `searchable` is true). */
+    searchChange = output();
+    // ── Content queries ──
+    /** @internal */
+    triggerTemplateChild = contentChild(SelectTriggerTemplateDirective, ...(ngDevMode ? [{ debugName: "triggerTemplateChild" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    optionTemplateChild = contentChild(SelectOptionTemplateDirective, ...(ngDevMode ? [{ debugName: "optionTemplateChild" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    emptyTemplateChild = contentChild(SelectEmptyTemplateDirective, ...(ngDevMode ? [{ debugName: "emptyTemplateChild" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    headerTemplateChild = contentChild(SelectHeaderTemplateDirective, ...(ngDevMode ? [{ debugName: "headerTemplateChild" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    footerTemplateChild = contentChild(SelectFooterTemplateDirective, ...(ngDevMode ? [{ debugName: "footerTemplateChild" }] : /* 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 = nextSelectId++;
+    /** @internal */
+    hostId = `tw-select-${this.uid}`;
+    /** @internal */
+    listboxId = `${this.hostId}-listbox`;
+    /** @internal */
+    searchInputId = `${this.hostId}-search`;
+    /** @internal */
+    optionId = (index) => `${this.hostId}-option-${index}`;
+    // ── Internal state signals ──
+    /** @internal */
+    internalValue = linkedSignal(() => this.value(), ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    search = signal('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* 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 */ []));
+    closingSignal = signal(false, ...(ngDevMode ? [{ debugName: "closingSignal" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    overlayRef = null;
+    overlayInstanceSignal = signal(null, ...(ngDevMode ? [{ debugName: "overlayInstanceSignal" }] : /* istanbul ignore next */ []));
+    perOpenSubs = null;
+    closeTimer = null;
+    resizeObserver = null;
+    get overlayInstance() {
+        return this.overlayInstanceSignal();
+    }
+    // ── Derived state ──
+    /** @internal */
+    isDisabled = computed(() => this.disabledInput() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** @internal Effective variant — auto-naked when wrapped in tw-form-field. */
+    resolvedVariant = computed(() => this.variant() ?? (this.formField ? 'naked' : 'default'), ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    isEmpty = computed(() => {
+        const v = this.internalValue();
+        if (this.multiple())
+            return !Array.isArray(v) || v.length === 0;
+        return v === null || v === undefined;
+    }, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    /** @internal Visible (filtered) options with resolved view data. */
+    visibleOptions = computed(() => {
+        const opts = this.options();
+        const labelFn = this.optionLabel();
+        const valueFn = this.optionValue();
+        const disabledFn = this.optionDisabled();
+        const groupFn = this.optionGroup();
+        const s = this.search().trim();
+        const predicate = this.filterPredicate();
+        const filtered = s && this.searchable() ? opts.filter((o) => predicate(o, s)) : opts;
+        return filtered.map((option) => ({
+            option,
+            label: labelFn(option),
+            value: valueFn(option),
+            disabled: disabledFn(option),
+            group: groupFn(option),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
+    /** @internal Rows rendered in the panel (group labels + options). */
+    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-label', group: v.group });
+                }
+                currentGroup = v.group;
+            }
+            rows.push({ kind: 'option', option: v.option, index, group: v.group });
+        });
+        return rows;
+    }, ...(ngDevMode ? [{ debugName: "renderedRows" }] : /* istanbul ignore next */ []));
+    /** @internal Resolved option objects that match the current value. */
+    selectedOptions = computed(() => {
+        const v = this.internalValue();
+        if (v === null || v === undefined)
+            return [];
+        const cmp = this.compareWith();
+        const valueFn = this.optionValue();
+        const opts = this.options();
+        if (this.multiple()) {
+            const arr = Array.isArray(v) ? v : [];
+            return opts.filter((o) => arr.some((x) => cmp(valueFn(o), x)));
+        }
+        return opts.filter((o) => cmp(valueFn(o), v));
+    }, ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    defaultTriggerText = computed(() => {
+        const opts = this.selectedOptions();
+        const labelFn = this.optionLabel();
+        if (opts.length === 0)
+            return '';
+        return opts.map((o) => labelFn(o)).join(', ');
+    }, ...(ngDevMode ? [{ debugName: "defaultTriggerText" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    showClearButton = computed(() => !this.isDisabled() && !this.isEmpty(), ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    activeDescendantId = computed(() => {
+        if (!this.open())
+            return null;
+        const idx = this.activeIndex();
+        if (idx < 0 || idx >= this.visibleOptions().length)
+            return null;
+        return this.optionId(idx);
+    }, ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    describedBy = 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: "describedBy" }] : /* istanbul ignore next */ []));
+    /** @internal Merged `aria-labelledby`: form-field-pushed label ids + consumer-supplied `aria-labelledby`. */
+    labelledBy = 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: "labelledBy" }] : /* istanbul ignore next */ []));
+    /** @internal Resolved close-on-select behaviour. */
+    resolvedCloseOnSelect = computed(() => {
+        const explicit = this.closeOnSelect();
+        if (explicit !== undefined)
+            return explicit;
+        return !this.multiple();
+    }, ...(ngDevMode ? [{ debugName: "resolvedCloseOnSelect" }] : /* istanbul ignore next */ []));
+    // ── tv() output ──
+    variantResult = computed(() => selectVariants({
+        size: this.size(),
+        variant: this.resolvedVariant(),
+        open: this.open(),
+        disabled: this.isDisabled(),
+        focused: this.focusedSignal(),
+        color: this.color(),
+    }), ...(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 */
+    valueTextClasses = computed(() => this.variantResult().valueText(), ...(ngDevMode ? [{ debugName: "valueTextClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    placeholderTextClasses = computed(() => this.variantResult().placeholderText(), ...(ngDevMode ? [{ debugName: "placeholderTextClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    chevronClasses = computed(() => this.variantResult().chevron(), ...(ngDevMode ? [{ debugName: "chevronClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    clearButtonClasses = computed(() => this.variantResult().clearButton(), ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    optionSizeClass = computed(() => {
+        switch (this.size()) {
+            case 'xs':
+                return 'px-2 py-1 text-xs gap-1.5';
+            case 'sm':
+                return 'px-3 py-1.5 text-sm';
+            case 'md':
+                return 'px-3 py-2 text-sm';
+            case 'lg':
+                return 'px-4 py-2.5 text-base';
+            case 'xl':
+                return 'px-4 py-3 text-base';
+        }
+    }, ...(ngDevMode ? [{ debugName: "optionSizeClass" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    checkmarkColorClass = computed(() => OPTION_CHECKMARK_COLOR[this.color()], ...(ngDevMode ? [{ debugName: "checkmarkColorClass" }] : /* istanbul ignore next */ []));
+    /** @internal Class string applied to each option row. */
+    computeOptionClass = (selected, active, disabled) => {
+        const sizeClass = this.optionSizeClass();
+        const color = this.color();
+        const base = 'relative flex items-center cursor-pointer select-none text-fg gap-2 transition-colors duration-normal motion-reduce:transition-none';
+        const parts = [base, sizeClass];
+        if (disabled) {
+            parts.push('opacity-50 pointer-events-none');
+        }
+        if (selected) {
+            parts.push(OPTION_SELECTED_BG[color]);
+        }
+        else if (active) {
+            parts.push('bg-surface-muted');
+        }
+        else {
+            parts.push('hover:bg-surface-muted');
+        }
+        return parts.join(' ');
+    };
+    // ── FormFieldControl impl (readonly signals) ──
+    /** @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 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 */ []));
+    /** @internal */
+    controlType = 'select';
+    /** @internal */
+    userAriaDescribedBy = computed(() => this.ariaDescribedby(), ...(ngDevMode ? [{ debugName: "userAriaDescribedBy" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    userAriaLabelledby = computed(() => this.ariaLabelledby(), ...(ngDevMode ? [{ debugName: "userAriaLabelledby" }] : /* istanbul ignore next */ []));
+    /** @internal Public read-only view of the current value for FormFieldControl. */
+    // Overriding `value` typing from the model by using an explicit computed that matches the abstract signature.
+    // (The model `value` property is a WritableSignal<T | readonly T[] | null>; FormFieldControl needs a Signal<T | readonly T[] | null>.
+    // A WritableSignal is assignable to Signal, so we just cast once.)
+    // ── 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();
+                return;
+            }
+            if (shouldOpen && !this.overlayInstance && !disabled && !this.closingSignal()) {
+                this.openOverlay();
+            }
+            else if (!shouldOpen && this.overlayInstance && !this.closingSignal()) {
+                this.closeOverlay();
+            }
+        });
+        // Push state into overlay component whenever anything relevant changes.
+        // Reads happen in the tracked phase; writes to the overlay instance are
+        // wrapped in `untracked()` so they never feed back into this effect.
+        effect(() => {
+            const instance = this.overlayInstance;
+            if (!instance)
+                return;
+            const size = this.size();
+            const color = this.color();
+            const multiple = this.multiple();
+            const searchable = this.searchable();
+            const panelMaxHeight = this.panelMaxHeight();
+            const emptyMessage = this.emptyMessage();
+            const search = this.search();
+            const activeIndex = this.activeIndex();
+            const renderedRows = this.renderedRows();
+            const visibleOptions = this.visibleOptions();
+            const optionTemplate = this.optionTemplateChild();
+            const emptyTemplate = this.emptyTemplateChild();
+            const headerTemplate = this.headerTemplateChild();
+            const footerTemplate = this.footerTemplateChild();
+            const optionLabelFn = this.optionLabel();
+            const checkmarkColorClass = this.checkmarkColorClass();
+            const panelClassValue = this.resolvePanelClass();
+            untracked(() => {
+                instance.size.set(size);
+                instance.color.set(color);
+                instance.multiple.set(multiple);
+                instance.searchable.set(searchable);
+                instance.panelMaxHeight.set(panelMaxHeight);
+                instance.emptyMessage.set(emptyMessage);
+                instance.search.set(search);
+                instance.activeIndex.set(activeIndex);
+                instance.renderedRows.set(renderedRows);
+                instance.visibleOptions.set(visibleOptions);
+                instance.optionTemplate.set(optionTemplate);
+                instance.emptyTemplate.set(emptyTemplate);
+                instance.headerTemplate.set(headerTemplate);
+                instance.footerTemplate.set(footerTemplate);
+                instance.optionLabelFn.set(optionLabelFn);
+                instance.selectedChecker.set((index) => this.isVisibleOptionSelected(index));
+                instance.computeOptionClass.set(this.computeOptionClass);
+                instance.checkmarkColorClass.set(checkmarkColorClass);
+                instance.panelClassValue.set(panelClassValue);
+                instance.listboxId.set(this.listboxId);
+                instance.searchInputId.set(this.searchInputId);
+                instance.optionIdFn.set(this.optionId);
+            });
+        });
+        // Emit searchChange whenever the user types.
+        effect(() => {
+            const s = this.search();
+            const count = this.visibleOptions().length;
+            untracked(() => {
+                if (this.overlayInstance) {
+                    this.searchChange.emit({ search: s, visibleCount: count });
+                }
+            });
+        });
+        // Dev-mode accessible-name warning.
+        afterNextRender(() => {
+            if (!isDevMode())
+                return;
+            const hasLabel = !!this.ariaLabel() ||
+                !!this.ariaLabelledby() ||
+                !!this.formField?.labelChild() ||
+                !!this.triggerTemplateChild();
+            if (!hasLabel) {
+                console.warn('[tw-select] The select has no accessible name. Set aria-label, aria-labelledby, wrap in <tw-form-field> with a <label twLabel>, or project a *twSelectTrigger template.');
+            }
+        });
+        // Monitor focus on the trigger (and descendant overlay) for focused state.
+        const monitorSub = this.focusMonitor
+            .monitor(this.elementRef, true)
+            .subscribe((origin) => {
+            const wasFocused = this.focusedSignal();
+            this.focusedSignal.set(!!origin);
+            if (!origin) {
+                this.onTouched();
+                if (wasFocused) {
+                    // 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.perOpenSubs?.unsubscribe();
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = null;
+            this.overlayRef?.dispose();
+            this.overlayRef = null;
+            this.overlayInstanceSignal.set(null);
+        });
+    }
+    // ── Public methods ──
+    /** Opens the overlay panel. No-op when disabled or already open. */
+    openPanel() {
+        if (this.isDisabled() || this.open())
+            return;
+        this.open.set(true);
+    }
+    /** Closes the overlay panel. No-op when already closed. */
+    closePanel() {
+        if (!this.open())
+            return;
+        this.open.set(false);
+    }
+    /** Toggles the panel's open state. */
+    toggle() {
+        if (this.open()) {
+            this.closePanel();
+        }
+        else {
+            this.openPanel();
+        }
+    }
+    /** Clears the current selection and emits `selectionChange` with `source: 'reset'`. */
+    clear() {
+        const previous = this.internalValue();
+        const removed = this.selectedOptions().map((o) => this.optionValue()(o));
+        const next = this.multiple() ? [] : null;
+        this.internalValue.set(next);
+        this.value.set(next);
+        this.onChange(next);
+        this.selectionChange.emit({
+            value: next,
+            previousValue: previous,
+            added: [],
+            removed,
+            source: 'reset',
+        });
+    }
+    /** @internal Whether a visible-option index is currently selected. */
+    isVisibleOptionSelected(index) {
+        const visible = this.visibleOptions();
+        if (index < 0 || index >= visible.length)
+            return false;
+        return this.isValueSelected(visible[index].value);
+    }
+    /** @internal */
+    isValueSelected(value) {
+        const current = this.internalValue();
+        if (current === null || current === undefined)
+            return false;
+        const cmp = this.compareWith();
+        if (this.multiple()) {
+            const arr = Array.isArray(current) ? current : [];
+            return arr.some((x) => cmp(x, value));
+        }
+        return cmp(current, value);
+    }
+    /** @internal */
+    selectByVisibleIndex(index, source = 'user') {
+        const visible = this.visibleOptions();
+        if (index < 0 || index >= visible.length)
+            return;
+        const target = visible[index];
+        if (target.disabled)
+            return;
+        this.commitSelection(target.value, target.label, source);
+    }
+    // ── Trigger interactions ──
+    /** @internal */
+    onTriggerClick() {
+        if (this.isDisabled())
+            return;
+        this.toggle();
+    }
+    /** @internal */
+    onClearClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.clear();
+    }
+    /** @internal */
+    onClearKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.clear();
+        }
+    }
+    /** @internal */
+    onTriggerKeydown(event) {
+        if (this.isDisabled())
+            return;
+        this.handleKeydown(event);
+    }
+    /** @internal Handles keyboard events from the trigger AND the search input inside the overlay. */
+    handleKeydown(event) {
+        const key = event.key;
+        const isOpen = this.open();
+        const searchMode = this.searchable() && isOpen;
+        if (event.altKey && (key === 'ArrowDown' || key === 'ArrowUp')) {
+            event.preventDefault();
+            if (key === 'ArrowDown' && !isOpen)
+                this.openPanel();
+            else if (key === 'ArrowUp' && isOpen)
+                this.closePanel();
+            return;
+        }
+        switch (key) {
+            case 'Enter': {
+                if (!isOpen) {
+                    event.preventDefault();
+                    this.openPanel();
+                    return;
+                }
+                event.preventDefault();
+                const idx = this.activeIndex();
+                if (idx >= 0) {
+                    this.selectByVisibleIndex(idx, 'user');
+                }
+                return;
+            }
+            case ' ':
+            case 'Spacebar': {
+                if (searchMode)
+                    return;
+                event.preventDefault();
+                if (!isOpen) {
+                    this.openPanel();
+                    return;
+                }
+                const idx = this.activeIndex();
+                if (idx >= 0) {
+                    this.selectByVisibleIndex(idx, 'user');
+                }
+                return;
+            }
+            case 'ArrowDown': {
+                event.preventDefault();
+                if (!isOpen) {
+                    this.openPanel();
+                }
+                else {
+                    this.moveActive(1);
+                }
+                return;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                if (!isOpen) {
+                    this.openPanel();
+                    this.moveActiveTo(this.visibleOptions().length - 1, -1);
+                }
+                else {
+                    this.moveActive(-1);
+                }
+                return;
+            }
+            case 'Home': {
+                if (searchMode)
+                    return;
+                event.preventDefault();
+                if (!isOpen)
+                    this.openPanel();
+                this.moveActiveTo(0, 1);
+                return;
+            }
+            case 'End': {
+                if (searchMode)
+                    return;
+                event.preventDefault();
+                if (!isOpen)
+                    this.openPanel();
+                this.moveActiveTo(this.visibleOptions().length - 1, -1);
+                return;
+            }
+            case 'PageDown': {
+                if (!isOpen)
+                    return;
+                event.preventDefault();
+                this.moveActive(10);
+                return;
+            }
+            case 'PageUp': {
+                if (!isOpen)
+                    return;
+                event.preventDefault();
+                this.moveActive(-10);
+                return;
+            }
+            case 'Escape': {
+                if (isOpen) {
+                    event.preventDefault();
+                    this.closePanel();
+                }
+                return;
+            }
+            case 'Tab': {
+                if (isOpen) {
+                    this.closePanel();
+                }
+                return;
+            }
+            default:
+                if (!searchMode && key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                    this.applyTypeAhead(key);
+                }
+                return;
+        }
+    }
+    // ── Type-ahead (non-search mode) ──
+    typeAheadBuffer = '';
+    typeAheadTimer = null;
+    applyTypeAhead(char) {
+        if (this.typeAheadTimer !== null)
+            clearTimeout(this.typeAheadTimer);
+        this.typeAheadBuffer += char.toLowerCase();
+        const labelFn = this.optionLabel();
+        const visible = this.visibleOptions();
+        const match = visible.findIndex((o) => labelFn(o.option).toLowerCase().startsWith(this.typeAheadBuffer));
+        if (match >= 0) {
+            if (!this.open())
+                this.openPanel();
+            this.activeIndex.set(match);
+            this.scrollActiveIntoView();
+        }
+        this.typeAheadTimer = setTimeout(() => {
+            this.typeAheadBuffer = '';
+            this.typeAheadTimer = null;
+        }, 400);
+    }
+    // ── Active-index navigation ──
+    moveActive(delta) {
+        const visible = this.visibleOptions();
+        if (visible.length === 0) {
+            this.activeIndex.set(-1);
+            return;
+        }
+        const start = this.activeIndex();
+        const direction = delta > 0 ? 1 : -1;
+        const steps = Math.abs(delta);
+        let current = start;
+        for (let i = 0; i < steps; i++) {
+            const next = this.findEnabledFrom(current + direction, direction);
+            if (next === -1)
+                break;
+            current = next;
+        }
+        if (current !== start && current >= 0) {
+            this.activeIndex.set(current);
+            this.scrollActiveIntoView();
+        }
+    }
+    moveActiveTo(startIndex, direction) {
+        const next = this.findEnabledFrom(startIndex, direction);
+        if (next >= 0) {
+            this.activeIndex.set(next);
+            this.scrollActiveIntoView();
+        }
+    }
+    findEnabledFrom(start, direction) {
+        const visible = this.visibleOptions();
+        let i = start;
+        while (i >= 0 && i < visible.length) {
+            if (!visible[i].disabled)
+                return i;
+            i += direction;
+        }
+        return -1;
+    }
+    /** @internal */
+    initActiveIndexOnOpen() {
+        const visible = this.visibleOptions();
+        if (visible.length === 0) {
+            this.activeIndex.set(-1);
+            return;
+        }
+        const selectedIdx = visible.findIndex((v) => this.isValueSelected(v.value));
+        if (selectedIdx >= 0 && !visible[selectedIdx].disabled) {
+            this.activeIndex.set(selectedIdx);
+        }
+        else {
+            this.activeIndex.set(this.findEnabledFrom(0, 1));
+        }
+        this.scrollActiveIntoView();
+    }
+    scrollActiveIntoView() {
+        if (!this.platform.isBrowser)
+            return;
+        queueMicrotask(() => {
+            const id = this.activeDescendantId();
+            if (!id)
+                return;
+            const el = document.getElementById(id);
+            if (el && typeof el.scrollIntoView === 'function') {
+                el.scrollIntoView({ block: 'nearest', behavior: 'auto' });
+            }
+        });
+    }
+    // ── Selection commit ──
+    commitSelection(value, label, source) {
+        const previous = this.internalValue();
+        if (this.multiple()) {
+            const cmp = this.compareWith();
+            const currentArr = Array.isArray(previous) ? [...previous] : [];
+            const existingIdx = currentArr.findIndex((x) => cmp(x, value));
+            let added = [];
+            let removed = [];
+            if (existingIdx >= 0) {
+                removed = [currentArr[existingIdx]];
+                currentArr.splice(existingIdx, 1);
+            }
+            else {
+                added = [value];
+                currentArr.push(value);
+            }
+            this.internalValue.set(currentArr);
+            this.value.set(currentArr);
+            if (source === 'user') {
+                this.onChange(currentArr);
+                this.liveAnnouncer.announce(`${label} ${added.length ? 'selected' : 'deselected'}`, 'polite');
+            }
+            this.selectionChange.emit({
+                value: currentArr,
+                previousValue: previous,
+                added,
+                removed,
+                source,
+            });
+        }
+        else {
+            const cmp = this.compareWith();
+            const prevSingle = previous;
+            if (prevSingle !== null && prevSingle !== undefined && cmp(prevSingle, value)) {
+                if (this.resolvedCloseOnSelect())
+                    this.closePanel();
+                return;
+            }
+            this.internalValue.set(value);
+            this.value.set(value);
+            if (source === 'user')
+                this.onChange(value);
+            this.selectionChange.emit({
+                value,
+                previousValue: previous,
+                added: [value],
+                removed: prevSingle !== null && prevSingle !== undefined ? [prevSingle] : [],
+                source,
+            });
+            if (this.resolvedCloseOnSelect())
+                this.closePanel();
+        }
+    }
+    // ── Overlay lifecycle ──
+    openOverlay() {
+        this.ensureOverlay();
+        this.attachOverlayComponent();
+        this.subscribePerOpen();
+        this.search.set('');
+        this.initActiveIndexOnOpen();
+        queueMicrotask(() => {
+            if (this.searchable()) {
+                this.overlayInstance?.focusSearchInput();
+            }
+        });
+        this.openedChange.emit({ open: true, trigger: this.elementRef.nativeElement });
+    }
+    closeOverlay() {
+        if (this.closingSignal() || !this.overlayInstance)
+            return;
+        this.closingSignal.set(true);
+        this.overlayInstance.leaving.set(true);
+        this.elementRef.nativeElement.querySelector('button')?.focus();
+        this.closeTimer = setTimeout(() => {
+            this.closeTimer = null;
+            if (this.overlayRef?.hasAttached()) {
+                this.overlayRef.detach();
+            }
+            this.perOpenSubs?.unsubscribe();
+            this.perOpenSubs = null;
+            this.overlayInstanceSignal.set(null);
+            this.search.set('');
+            this.activeIndex.set(-1);
+            untracked(() => this.open.set(false));
+            this.closingSignal.set(false);
+            this.openedChange.emit({ open: false, trigger: this.elementRef.nativeElement });
+        }, ANIMATION_DURATION);
+    }
+    ensureOverlay() {
+        if (this.overlayRef) {
+            this.updateOverlaySize();
+            return;
+        }
+        const positionStrategy = this.overlayService
+            .position()
+            .flexibleConnectedTo(this.elementRef)
+            .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-select-panel',
+        });
+        this.installResizeObserver();
+        this.updateOverlaySize();
+    }
+    installResizeObserver() {
+        if (!this.platform.isBrowser || typeof ResizeObserver === 'undefined')
+            return;
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = new ResizeObserver(() => this.updateOverlaySize());
+        this.resizeObserver.observe(this.elementRef.nativeElement);
+    }
+    updateOverlaySize() {
+        if (!this.overlayRef)
+            return;
+        const width = this.panelWidth();
+        if (width === 'trigger') {
+            const button = this.elementRef.nativeElement.querySelector('button');
+            const rect = (button ?? this.elementRef.nativeElement).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(SelectOverlayComponent, this.viewContainerRef, this.injector);
+        const ref = this.overlayRef.attach(portal);
+        const instance = ref.instance;
+        instance.onSearchInput.set((v) => this.search.set(v));
+        instance.onOptionSelect.set((i) => this.selectByVisibleIndex(i, 'user'));
+        instance.onOptionActivate.set((i) => this.activeIndex.set(i));
+        instance.onPanelKeydown.set((e) => this.handleKeydown(e));
+        this.overlayInstanceSignal.set(instance);
+    }
+    subscribePerOpen() {
+        this.perOpenSubs?.unsubscribe();
+        this.perOpenSubs = new Subscription();
+        if (!this.overlayRef)
+            return;
+        this.perOpenSubs.add(this.overlayRef
+            .backdropClick()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.closePanel()));
+        const teardownEscape = consumeOverlayEscape(this.overlayRef, (event) => {
+            event.preventDefault();
+            this.closePanel();
+        });
+        this.perOpenSubs.add(() => teardownEscape());
+    }
+    resolvePanelClass() {
+        const raw = this.panelClass();
+        return Array.isArray(raw) ? raw.join(' ') : raw;
+    }
+    clearCloseTimer() {
+        if (this.closeTimer !== null) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = null;
+        }
+    }
+    /** @internal */
+    buildTriggerContext() {
+        return {
+            $implicit: this.internalValue(),
+            open: this.open(),
+            empty: this.isEmpty(),
+            selectedOptions: this.selectedOptions(),
+        };
+    }
+    // ── ControlValueAccessor ──
+    writeValue(value) {
+        const previous = this.internalValue();
+        let normalised;
+        if (this.multiple()) {
+            if (Array.isArray(value))
+                normalised = value;
+            else if (value === null || value === undefined)
+                normalised = [];
+            else
+                normalised = [value];
+        }
+        else {
+            if (Array.isArray(value))
+                normalised = value.length ? value[0] : null;
+            else
+                normalised = value ?? null;
+        }
+        this.internalValue.set(normalised);
+        this.value.set(normalised);
+        this.selectionChange.emit({
+            value: normalised,
+            previousValue: previous,
+            added: [],
+            removed: [],
+            source: 'programmatic',
+        });
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // ── FormFieldControl methods ──
+    /** @internal */
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set([...ids]);
+    }
+    /** @internal Receives the merged `aria-labelledby` ids from the wrapping form-field. The trigger needs explicit labelledby because it's a non-native combobox button — `<label for>` does not reach it. */
+    setLabelledByIds(ids) {
+        this.labelledByIdsSignal.set([...ids]);
+    }
+    /** @internal */
+    onContainerClick(event) {
+        if (this.isDisabled())
+            return;
+        const btn = this.elementRef.nativeElement.querySelector('button');
+        btn?.focus();
+        if (!event.defaultPrevented) {
+            this.openPanel();
+        }
+    }
+    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: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SelectComponent, isStandalone: true, selector: "tw-select", 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 }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", 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 }, variant: { classPropertyName: "variant", publicName: "variant", 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 }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", 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 }, 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 }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", open: "openChange", openedChange: "openedChange", selectionChange: "selectionChange", searchChange: "searchChange" }, host: { properties: { "class": "rootClasses()" } }, providers: [
+            {
+                provide: TW_FORM_FIELD_CONTROL,
+                useExisting: forwardRef(() => SelectComponent),
+            },
+        ], queries: [{ propertyName: "triggerTemplateChild", first: true, predicate: SelectTriggerTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optionTemplateChild", first: true, predicate: SelectOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "emptyTemplateChild", first: true, predicate: SelectEmptyTemplateDirective, descendants: true, isSignal: true }, { propertyName: "headerTemplateChild", first: true, predicate: SelectHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "footerTemplateChild", first: true, predicate: SelectFooterTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <button
+      #triggerButton
+      type="button"
+      [id]="hostId"
+      [class]="triggerClasses()"
+      [attr.role]="'combobox'"
+      [attr.aria-haspopup]="'listbox'"
+      [attr.aria-expanded]="open() ? 'true' : 'false'"
+      [attr.aria-controls]="listboxId"
+      [attr.aria-activedescendant]="activeDescendantId() || null"
+      [attr.aria-autocomplete]="searchable() ? 'list' : 'none'"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-labelledby]="labelledBy() || null"
+      [attr.aria-describedby]="describedBy() || null"
+      [attr.aria-required]="requiredInput() || null"
+      [attr.aria-invalid]="errorState() || null"
+      [attr.aria-disabled]="isDisabled() || null"
+      [disabled]="isDisabled()"
+      [attr.data-variant]="resolvedVariant()"
+      (click)="onTriggerClick()"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      @if (triggerTemplateChild(); as tpl) {
+        <span [class]="valueTextClasses()">
+          <ng-container
+            *ngTemplateOutlet="tpl.templateRef; context: buildTriggerContext()"
+          />
+        </span>
+      } @else if (isEmpty()) {
+        <span [class]="placeholderTextClasses()">{{ placeholder() || '\u00A0' }}</span>
+      } @else {
+        <span [class]="valueTextClasses()">{{ defaultTriggerText() }}</span>
+      }
+
+      @if (showClearButton()) {
+        <span
+          role="button"
+          tabindex="-1"
+          [class]="clearButtonClasses()"
+          [attr.aria-label]="'Clear selection'"
+          (click)="onClearClick($event)"
+          (keydown)="onClearKeydown($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>
+        </span>
+      }
+
+      <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>
+    </button>
+
+    <span hidden>
+      <ng-content />
+    </span>
+  `, 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: SelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-select',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet],
+                    providers: [
+                        {
+                            provide: TW_FORM_FIELD_CONTROL,
+                            useExisting: forwardRef(() => SelectComponent),
+                        },
+                    ],
+                    template: `
+    <button
+      #triggerButton
+      type="button"
+      [id]="hostId"
+      [class]="triggerClasses()"
+      [attr.role]="'combobox'"
+      [attr.aria-haspopup]="'listbox'"
+      [attr.aria-expanded]="open() ? 'true' : 'false'"
+      [attr.aria-controls]="listboxId"
+      [attr.aria-activedescendant]="activeDescendantId() || null"
+      [attr.aria-autocomplete]="searchable() ? 'list' : 'none'"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-labelledby]="labelledBy() || null"
+      [attr.aria-describedby]="describedBy() || null"
+      [attr.aria-required]="requiredInput() || null"
+      [attr.aria-invalid]="errorState() || null"
+      [attr.aria-disabled]="isDisabled() || null"
+      [disabled]="isDisabled()"
+      [attr.data-variant]="resolvedVariant()"
+      (click)="onTriggerClick()"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      @if (triggerTemplateChild(); as tpl) {
+        <span [class]="valueTextClasses()">
+          <ng-container
+            *ngTemplateOutlet="tpl.templateRef; context: buildTriggerContext()"
+          />
+        </span>
+      } @else if (isEmpty()) {
+        <span [class]="placeholderTextClasses()">{{ placeholder() || '\u00A0' }}</span>
+      } @else {
+        <span [class]="valueTextClasses()">{{ defaultTriggerText() }}</span>
+      }
+
+      @if (showClearButton()) {
+        <span
+          role="button"
+          tabindex="-1"
+          [class]="clearButtonClasses()"
+          [attr.aria-label]="'Clear selection'"
+          (click)="onClearClick($event)"
+          (keydown)="onClearKeydown($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>
+        </span>
+      }
+
+      <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>
+    </button>
+
+    <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 }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], filterPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPredicate", 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 }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", 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 }] }], 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 }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], triggerTemplateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectTriggerTemplateDirective), { isSignal: true }] }], optionTemplateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectOptionTemplateDirective), { isSignal: true }] }], emptyTemplateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectEmptyTemplateDirective), { isSignal: true }] }], headerTemplateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectHeaderTemplateDirective), { isSignal: true }] }], footerTemplateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectFooterTemplateDirective), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SelectComponent, SelectEmptyTemplateDirective, SelectFooterTemplateDirective, SelectHeaderTemplateDirective, SelectOptionTemplateDirective, SelectTriggerTemplateDirective };
+//# sourceMappingURL=cdevhub-ngx-tw-select.mjs.map