ngwr 6.1.1 → 7.1.0

package/fesm2022/ngwr-select.mjs

@@ -1,12 +1,14 @@
-import { NgTemplateOutlet } from '@angular/common';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { ScrollStrategyOptions } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { inject, booleanAttribute, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChild, HostBinding, ContentChildren, signal, computed, ElementRef, ChangeDetectorRef, numberAttribute, forwardRef, ViewChild, HostListener } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { InjectionToken, input, inject, ElementRef, computed, effect, DestroyRef, ViewEncapsulation, Component, signal, viewChild, TemplateRef, ViewContainerRef, forwardRef } from '@angular/core';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { noop } from 'rxjs';
-import { WrAbstractBase } from 'ngwr/cdk';
-import { provideWrIcons, chevronDown, close, WrIconComponent } from 'ngwr/icon';
-import { WrTagComponent } from 'ngwr/tag';
+import { debounceTime, switchMap, of, isObservable, from, finalize } from 'rxjs';
+import { useI18nText, useI18nFormatter } from 'ngwr/i18n';
+import { WR_OVERLAY } from 'ngwr/overlay';
+import { noop } from 'ngwr/utils';
 
 /**
  * @license
@@ -14,64 +16,13 @@ import { WrTagComponent } from 'ngwr/tag';
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
-class WrOptionComponent {
-    constructor() {
-        this.disabled = false;
-        this.context = {
-            $implicit: this,
-            option: this,
-        };
-        this.selectComponent = inject(WrSelectComponent);
-    }
-    get hostClasses() {
-        return {
-            'wr-option': true,
-            'wr-option--selected': this.isSelected,
-            'wr-option--disabled': this.disabled,
-            'wr-option--highlighted': this.isHighlighted,
-            'wr-option--filtered': this.isFiltered,
-        };
-    }
-    get isSelected() {
-        const currentValue = this.selectComponent.currentValue;
-        if (this.selectComponent.isMultiple) {
-            return Array.isArray(currentValue) && currentValue.includes(this.value);
-        }
-        return currentValue === this.value;
-    }
-    get isHighlighted() {
-        return this.selectComponent.isHighlightedOption(this);
-    }
-    get isFiltered() {
-        return this.selectComponent.isFilteredOption(this);
-    }
-    select() {
-        if (!this.disabled) {
-            this.selectComponent.onOptionSelect(this);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: WrOptionComponent, isStandalone: true, selector: "wr-option", inputs: { value: "value", label: "label", disabled: ["disabled", "disabled", booleanAttribute] }, host: { listeners: { "click": "select()" }, properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "customTemplate", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<div class=\"wr-option__content\">\n  @if (customTemplate) {\n    <ng-container *ngTemplateOutlet=\"customTemplate; context: context\"> </ng-container>\n  } @else {\n    {{ label }}\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrOptionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wr-option', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        '(click)': 'select()',
-                    }, imports: [NgTemplateOutlet], template: "<div class=\"wr-option__content\">\n  @if (customTemplate) {\n    <ng-container *ngTemplateOutlet=\"customTemplate; context: context\"> </ng-container>\n  } @else {\n    {{ label }}\n  }\n</div>\n" }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], customTemplate: [{
-                type: ContentChild,
-                args: [TemplateRef]
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+/**
+ * Token a `<wr-option>` injects to register itself with and notify its
+ * parent `<wr-select>`.
+ *
+ * @internal
+ */
+const WR_SELECT = new InjectionToken('WR_SELECT');
 
 /**
  * @license
@@ -79,40 +30,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
-class WrOptionGroupComponent {
+let uid = 0;
+/**
+ * Single option inside a `<wr-select>`.
+ *
+ * The option's display label is taken from its projected text content;
+ * the form value is its `value` input.
+ *
+ * @example
+ * ```html
+ * <wr-option value="sm">Small</wr-option>
+ * <wr-option [value]="42">Forty-two</wr-option>
+ * ```
+ */
+class WrOption {
+    /** The value contributed when this option is chosen. Required. */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Disable this option. @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Stable id used for `aria-activedescendant`. */
+    id = `wr-option-${++uid}`;
+    host = inject(ElementRef);
+    parent = inject(WR_SELECT, { optional: true });
+    /**
+     * @internal — true when this option is currently selected. Works for
+     * both single and multi-select parents via `WrSelectContext.isSelected`.
+     */
+    selected = computed(() => {
+        const parent = this.parent;
+        if (!parent)
+            return false;
+        // Re-read parent's value signal so the computed recomputes on change.
+        parent.value();
+        return parent.isSelected(this.value());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /** @internal — true when this option is the keyboard cursor target. */
+    active = computed(() => this.parent?.activeOptionId() === this.id, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal — search mode only. True when the parent has a query that
+     * the option's text content does not match (case-insensitive substring).
+     * Hidden options stay in the DOM so registration order survives but
+     * collapse via CSS.
+     */
+    hidden = computed(() => {
+        const parent = this.parent;
+        if (!parent?.isSearch())
+            return false;
+        const q = parent.searchQuery().trim().toLowerCase();
+        if (!q)
+            return false;
+        const label = (this.host.nativeElement.textContent ?? '').trim().toLowerCase();
+        return !label.includes(q);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const parts = ['wr-option'];
+        if (this.selected())
+            parts.push('wr-option--selected');
+        if (this.active())
+            parts.push('wr-option--active');
+        if (this.disabled())
+            parts.push('wr-option--disabled');
+        if (this.hidden())
+            parts.push('wr-option--hidden');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     constructor() {
-        this.label = '';
-        this.disabled = false;
-    }
-    get hostClasses() {
-        return {
-            'wr-select-group': true,
-            'wr-select-group--disabled': this.disabled,
-        };
-    }
-    ngAfterContentInit() {
-        if (this.disabled) {
-            this.options.forEach(option => (option.disabled = true));
+        if (this.parent) {
+            const parent = this.parent;
+            // Re-register when disabled or value changes so the parent has fresh metadata.
+            effect(onCleanup => {
+                const unreg = parent.registerOption({
+                    id: this.id,
+                    value: this.value(),
+                    disabled: this.disabled(),
+                    getLabel: () => this.host.nativeElement.textContent?.trim() ?? '',
+                });
+                onCleanup(() => unreg());
+            });
+            inject(DestroyRef);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrOptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.10", type: WrOptionGroupComponent, isStandalone: true, selector: "wr-option-group", inputs: { label: "label", disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "options", predicate: WrOptionComponent }], ngImport: i0, template: "<div class=\"wr-select-group__label\">{{ label }}</div>\n<div class=\"wr-select-group__content\">\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    onClick() {
+        if (this.disabled() || !this.parent)
+            return;
+        this.parent.selectOption(this.value());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: WrOption, isStandalone: true, selector: "wr-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "click": "onClick()" }, properties: { "attr.id": "id", "class": "classes()", "attr.aria-selected": "selected()", "attr.aria-disabled": "disabled() ? true : null" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrOptionGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrOption, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-option-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"wr-select-group__label\">{{ label }}</div>\n<div class=\"wr-select-group__content\">\n  <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], options: [{
-                type: ContentChildren,
-                args: [WrOptionComponent]
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+            args: [{
+                    selector: 'wr-option',
+                    template: '<ng-content />',
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        role: 'option',
+                        '[attr.id]': 'id',
+                        '[class]': 'classes()',
+                        '[attr.aria-selected]': 'selected()',
+                        '[attr.aria-disabled]': 'disabled() ? true : null',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**
  * @license
@@ -120,275 +146,762 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
+let listboxUid = 0;
 /**
- * NGWR select component.
+ * Combobox primitive. Renders a button that opens a CDK overlay
+ * containing the projected `<wr-option>` (and optionally
+ * `<wr-option-group>`) children. Every shape is the same component
+ * with a different `[mode]`:
+ *
+ * - `'single'` (default) — one value, no input. Classic dropdown.
+ * - `'multi'` — array value, chips on the trigger; clicking an option
+ *   toggles instead of closing, Backspace removes the last chip.
+ * - `'search'` — type-ahead with sync `[options]` filter or async
+ *   `[loader]`. Replaces the standalone `<wr-autocomplete>`.
+ * - `'tag'` — free-text + chips with `[separators]` / `[validate]` /
+ *   `[allowDuplicates]`. Replaces `<wr-chips-input>`.
  *
- * {@tutorial} [How to use wr-select]{@link http://ngwr.dev/docs/components/select}
+ * Implements `ControlValueAccessor` — usable with `[(ngModel)]`,
+ * `formControl`, or `formControlName`.
+ *
+ * @example
+ * ```html
+ * <!-- Single -->
+ * <wr-select placeholder="Pick a size" [(ngModel)]="size">
+ *   <wr-option value="sm">Small</wr-option>
+ *   <wr-option value="md">Medium</wr-option>
+ *   <wr-option value="lg">Large</wr-option>
+ * </wr-select>
+ *
+ * <!-- Multi -->
+ * <wr-select mode="multi" placeholder="Pick tags" [(ngModel)]="tags">
+ *   <wr-option value="ts">TypeScript</wr-option>
+ *   <wr-option value="ng">Angular</wr-option>
+ * </wr-select>
+ * ```
+ *
+ * The legacy `[multi]="true"` boolean is still accepted but is now an
+ * alias for `[mode]="'multi'"` — prefer the explicit mode.
+ *
+ * @see https://ngwr.dev/components/select
  */
-class WrSelectComponent extends WrAbstractBase {
-    constructor() {
-        super(...arguments);
-        this.placeholder = '';
-        this.noItemsLabel = 'No Items';
-        this.multiple = false;
-        this.searchable = false;
-        this.clearable = false;
-        this.value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
-        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-        this.isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
-        this.isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-        this.searchValue = signal('', ...(ngDevMode ? [{ debugName: "searchValue" }] : []));
-        this.highlightedOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedOptionIndex" }] : []));
-        this.selectedOptions = computed(() => {
-            const currentValue = this.value();
-            const optionsArray = this.options?.toArray() || [];
-            if (this.multiple) {
-                return optionsArray.filter(option => Array.isArray(currentValue) && currentValue.includes(option.value));
-            }
-            return optionsArray.filter(option => option.value === currentValue);
-        }, ...(ngDevMode ? [{ debugName: "selectedOptions" }] : []));
-        this.selectedLabel = computed(() => {
-            const selected = this.selectedOptions();
-            return selected.length ? selected[0].label || selected[0].value : '';
-        }, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : []));
-        this.filteredOptions = computed(() => {
-            const search = this.searchValue().toLowerCase();
-            const optionsArray = this.options?.toArray() || [];
-            let filteredArray = optionsArray;
-            if (this.multiple) {
-                const currentValue = this.value();
-                filteredArray = optionsArray.filter(option => !Array.isArray(currentValue) || !currentValue.includes(option.value));
-            }
-            if (!search) {
-                return filteredArray;
-            }
-            return filteredArray.filter(option => (option.label || option.value.toString()).toLowerCase().includes(search));
-        }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
-        this.elementRef = inject(ElementRef);
-        this.cdr = inject(ChangeDetectorRef);
-        this.onChange = noop;
-        this.onTouch = noop;
-    }
-    set disabled(value) {
-        this.isDisabled.set(value);
-    }
-    get disabled() {
-        return this.isDisabled();
-    }
-    get hostClasses() {
-        return {
-            'wr-select': true,
-            'wr-select--open': this.isOpen(),
-            'wr-select--multiple': this.multiple,
-            'wr-select--disabled': this.isDisabled(),
-            'wr-select--focused': this.isFocused(),
-        };
-    }
-    onKeyDown(event) {
-        if (!this.isOpen()) {
+class WrSelect {
+    /** Placeholder shown when no option is selected. Falls back to `select.placeholder`. */
+    placeholder = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Clear-selection (×) button aria-label. Falls back to `select.clearSelection`. */
+    clearLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
+    resolvedPlaceholder = useI18nText(this.placeholder, 'select.placeholder', '');
+    resolvedClear = useI18nText(this.clearLabel, 'select.clearSelection', 'Clear selection');
+    /** Per-chip ARIA label — interpolates `{{label}}`. @internal */
+    chipRemoveLabel = useI18nFormatter('select.removeItem', 'Remove {{label}}');
+    /** Disable the select. Also set by Angular forms via `setDisabledState`. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Pill-shaped corners on the trigger. @default false */
+    rounded = input(false, { ...(ngDevMode ? { debugName: "rounded" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Behavior mode. `<wr-select>` is the unified combobox primitive —
+     * pick the shape via `[mode]`:
+     *
+     * - `'single'` (default) — one value, no input. Classic dropdown.
+     * - `'multi'` — array value, chips on the trigger.
+     * - `'search'` *(planned)* — type-ahead with sync filter or async loader.
+     * - `'tag'` *(planned)* — free-text + chips with optional `allowCreate`.
+     *
+     */
+    mode = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Resolved mode — `'single'` unless `[mode]` says otherwise. */
+    effectiveMode = computed(() => this.mode() ?? 'single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveMode" }] : /* istanbul ignore next */ []));
+    /** Convenience — `effectiveMode() === 'multi'`. */
+    isMulti = computed(() => this.effectiveMode() === 'multi', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMulti" }] : /* istanbul ignore next */ []));
+    /** Convenience — `effectiveMode() === 'tag'`. */
+    isTag = computed(() => this.effectiveMode() === 'tag', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTag" }] : /* istanbul ignore next */ []));
+    /** Convenience — `effectiveMode() === 'search'`. Exposed via context for options. */
+    isSearch = computed(() => this.effectiveMode() === 'search', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSearch" }] : /* istanbul ignore next */ []));
+    /** WrSelectContext — resolved multi-selection flag for child options. */
+    multi = computed(() => this.effectiveMode() === 'multi' || this.effectiveMode() === 'tag', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
+    /** Both multi and tag render chips on the trigger. */
+    hasChips = computed(() => {
+        const m = this.effectiveMode();
+        return m === 'multi' || m === 'tag';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasChips" }] : /* istanbul ignore next */ []));
+    /**
+     * Search-mode query. Empty string = no filter. Exposed via context so
+     * each `<wr-option>` can self-hide non-matching rows.
+     */
+    searchQuery = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    // Search-mode-only inputs (ignored in other modes)
+    /**
+     * Search mode: dynamic option array. Each item is rendered as a
+     * `<wr-option>` whose label comes from `[displayWith]`. Works
+     * alongside projected `<wr-option>` children — both lists are
+     * filtered by the search query.
+     */
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Search mode: map a dynamic option item to its display label. @default String */
+    displayWith = input((item) => String(item), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayWith" }] : /* istanbul ignore next */ []));
+    /**
+     * Search mode: async loader. When set, the loader is called on every
+     * (debounced) keystroke and its result replaces `[options]`. Supports
+     * Observables, Promises, and plain arrays.
+     */
+    loader = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loader" }] : /* istanbul ignore next */ []));
+    /** Search mode: debounce (ms) applied to the loader. @default 250 */
+    debounceMs = input(250, { ...(ngDevMode ? { debugName: "debounceMs" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, Number(v) || 0) });
+    /** Search mode: minimum query length before the panel opens / loader fires. @default 0 */
+    minChars = input(0, { ...(ngDevMode ? { debugName: "minChars" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, Number(v) || 0) });
+    /**
+     * Search mode: allow values not in the options list. Enter on an
+     * unmatched query commits the raw text as the form value. @default false
+     */
+    freeText = input(false, { ...(ngDevMode ? { debugName: "freeText" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Search mode: text shown when the filter / loader returns nothing. Falls back to `select.noResults`. */
+    noResultsText = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "noResultsText" }] : /* istanbul ignore next */ []));
+    /** Search mode: text shown while the async loader is in flight. Falls back to `select.loading`. */
+    loadingText = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
+    resolvedNoResults = useI18nText(this.noResultsText, 'select.noResults', 'No results');
+    resolvedLoading = useI18nText(this.loadingText, 'select.loading', 'Loading…');
+    /** Search mode: results returned by the async loader. @internal */
+    loadedOptions = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadedOptions" }] : /* istanbul ignore next */ []));
+    /** Search mode: true while the loader is in flight. @internal */
+    loading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    // Tag-mode-only inputs (ignored in other modes)
+    /**
+     * Tag mode: keys / characters that commit the current draft into a chip.
+     * `'Enter'` is the key name; everything else is a literal character watched
+     * in keypresses and pastes. @default ['Enter', ',']
+     */
+    separators = input(['Enter', ','], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separators" }] : /* istanbul ignore next */ []));
+    /** Tag mode: allow the same value to appear more than once. @default false */
+    allowDuplicates = input(false, { ...(ngDevMode ? { debugName: "allowDuplicates" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Tag mode: custom validator — return `true` to accept the value, `false`
+     * to silently reject. Receives the trimmed draft + the existing chips.
+     */
+    validate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "validate" }] : /* istanbul ignore next */ []));
+    /** Tag-mode draft (text currently typed in the inline input). @internal */
+    draft = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    /**
+     * Show a clear-all (×) button at the end of the chip row when at
+     * least one option is selected (multi mode only). @default true
+     */
+    clearable = input(true, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Cap on selected items (multi mode). `0` = unlimited. Once reached,
+     * additional clicks on unselected options are ignored. @default 0
+     */
+    maxItems = input(0, { ...(ngDevMode ? { debugName: "maxItems" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, Number(v) || 0) });
+    /**
+     * Maximum number of chips rendered before collapsing the rest into a
+     * `+N more` indicator. `0` = render every chip. @default 0
+     */
+    maxTagCount = input(0, { ...(ngDevMode ? { debugName: "maxTagCount" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, Number(v) || 0) });
+    /**
+     * Unified value signal. Single mode holds `T | null`; multi mode
+     * holds `readonly T[]`. Internal — consumers go through `[(ngModel)]`
+     * or `[formControl]` via CVA.
+     * @internal
+     */
+    value = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Listbox id used by the trigger's `aria-controls`. */
+    listboxId = `wr-select-listbox-${++listboxUid}`;
+    /** Registered options (insertion order). Internal — distinct from the public `[options]` input. */
+    registry = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "registry" }] : /* istanbul ignore next */ []));
+    /** Keyboard cursor index into `options`. -1 = none. */
+    activeIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /** Id of the active option (for `aria-activedescendant`). */
+    activeOptionId = computed(() => {
+        const idx = this.activeIndex();
+        const list = this.registry();
+        return idx >= 0 && idx < list.length ? list[idx].id : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    selectedLabel = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Selected chips (multi + tag modes). Multi reads labels from the
+     * registered `<wr-option>` children; tag uses each raw string as
+     * both value and label.
+     */
+    selectedChips = computed(() => {
+        if (!this.hasChips())
+            return [];
+        const arr = this.asArray(this.value());
+        if (this.isTag()) {
+            return arr.map(v => ({ value: v, label: String(v) }));
+        }
+        const list = this.registry();
+        return arr.map(v => {
+            const found = list.find(o => o.value === v);
+            return { value: v, label: found?.getLabel() ?? String(v) };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedChips" }] : /* istanbul ignore next */ []));
+    visibleChips = computed(() => {
+        const cap = this.maxTagCount();
+        const chips = this.selectedChips();
+        return cap > 0 && chips.length > cap ? chips.slice(0, cap) : chips;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleChips" }] : /* istanbul ignore next */ []));
+    hiddenChipCount = computed(() => {
+        const cap = this.maxTagCount();
+        const total = this.selectedChips().length;
+        return cap > 0 && total > cap ? total - cap : 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hiddenChipCount" }] : /* istanbul ignore next */ []));
+    hasSelection = computed(() => {
+        if (this.hasChips())
+            return this.selectedChips().length > 0;
+        return this.value() != null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []));
+    disabledFromCva = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledFromCva" }] : /* istanbul ignore next */ []));
+    /** Effective disabled state — input wins, CVA second. */
+    isDisabled = computed(() => this.disabled() || this.disabledFromCva(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const parts = ['wr-select'];
+        if (this.open())
+            parts.push('wr-select--open');
+        if (this.rounded())
+            parts.push('wr-select--rounded');
+        if (this.isMulti())
+            parts.push('wr-select--multi');
+        if (this.isTag())
+            parts.push('wr-select--tag');
+        if (this.isSearch())
+            parts.push('wr-select--search');
+        if (this.isDisabled())
+            parts.push('wr-select--disabled');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    /**
+     * Search-mode dynamic options. Loader results win when the loader is
+     * set; otherwise the static `[options]` array. Each item is rendered
+     * as an internal `<wr-option>` in the panel.
+     */
+    dynamicOptions = computed(() => this.loader() ? this.loadedOptions() : this.options(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dynamicOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Count of registered options that pass the current search filter.
+     * Hides the noResults state when the panel has at least one visible row.
+     */
+    visibleCount = computed(() => {
+        const list = this.registry();
+        if (!this.isSearch())
+            return list.length;
+        const q = this.searchQuery().trim().toLowerCase();
+        if (!q)
+            return list.length;
+        let count = 0;
+        for (const o of list) {
+            if (o.getLabel().toLowerCase().includes(q))
+                count++;
+        }
+        return count;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleCount" }] : /* istanbul ignore next */ []));
+    /** Search mode: show "no results" when the panel has nothing to offer. */
+    hasNoResults = computed(() => {
+        if (!this.isSearch() || !this.open() || this.loading())
+            return false;
+        if (this.searchQuery().trim().length < this.minChars())
+            return false;
+        return this.visibleCount() === 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasNoResults" }] : /* istanbul ignore next */ []));
+    /** Search mode: is this option hidden by the current query? @internal */
+    isOptionHidden(label) {
+        if (!this.isSearch())
+            return false;
+        const q = this.searchQuery().trim().toLowerCase();
+        if (!q)
+            return false;
+        return !label.toLowerCase().includes(q);
+    }
+    panelTpl = viewChild.required('panelTpl', { read: TemplateRef });
+    /** Tag-mode inline input. Present only when `mode="tag"`. @internal */
+    tagInputEl = viewChild('tagInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tagInputEl" }] : /* istanbul ignore next */ []));
+    /** Search-mode inline input. Present only when `mode="search"`. @internal */
+    searchInputEl = viewChild('searchInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchInputEl" }] : /* istanbul ignore next */ []));
+    focusTagInput() {
+        this.tagInputEl()?.nativeElement.focus();
+    }
+    focusSearchInput() {
+        this.searchInputEl()?.nativeElement.focus();
+    }
+    // Search-mode handlers
+    onSearchInput(event) {
+        if (this.isDisabled())
+            return;
+        const value = event.target.value;
+        this.searchQuery.set(value);
+        if (!this.open())
+            this.open.set(true);
+    }
+    onSearchFocus() {
+        if (this.isDisabled())
             return;
+        if (!this.open()) {
+            this.seedActiveIndex();
+            this.open.set(true);
         }
-        const filteredOpts = this.filteredOptions();
-        const currentIndex = this.highlightedOptionIndex();
-        switch (event.key) {
-            case 'ArrowDown':
-                event.preventDefault();
-                this.highlightedOptionIndex.set(currentIndex < filteredOpts.length - 1 ? currentIndex + 1 : 0);
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                this.highlightedOptionIndex.set(currentIndex > 0 ? currentIndex - 1 : filteredOpts.length - 1);
-                break;
-            case 'Enter':
-                event.preventDefault();
-                if (currentIndex >= 0 && filteredOpts[currentIndex]) {
-                    this.onOptionSelect(filteredOpts[currentIndex]);
-                }
-                break;
-            case 'Backspace':
-                if (this.multiple && !this.searchValue() && this.selectedOptions().length) {
-                    const selectedOptionsArray = this.selectedOptions();
-                    const lastSelected = selectedOptionsArray[selectedOptionsArray.length - 1];
-                    this.onOptionSelect(lastSelected);
-                }
-                break;
-            case 'Escape':
+    }
+    onSearchKey(event) {
+        // freeText: Enter on an unmatched query commits the typed string
+        // as the value. Skips when an active option is highlighted (the
+        // normal Enter-selects behaviour wins).
+        if (event.key === 'Enter' && this.freeText() && this.open()) {
+            const q = this.searchQuery().trim();
+            const idx = this.activeIndex();
+            const list = this.registry();
+            const hasActive = idx >= 0 && idx < list.length && !list[idx].disabled && !this.isOptionHidden(list[idx].getLabel());
+            if (!hasActive && q) {
                 event.preventDefault();
-                this.close();
-                break;
+                this.value.set(q);
+                this.onChange(q);
+                this.onTouched();
+                this.open.set(false);
+                return;
+            }
         }
+        // Otherwise route through the same keyboard plumbing as the button trigger.
+        this.onTriggerKey(event);
     }
-    onClickOutside(event) {
-        if (!this.elementRef.nativeElement.contains(event.target)) {
-            this.close();
-        }
+    /**
+     * Display text for the search input. Shows the selected option's
+     * label when collapsed, or the live query while typing / panel open.
+     * @internal
+     */
+    searchDisplay = computed(() => {
+        if (this.open())
+            return this.searchQuery();
+        return this.selectedLabel() ?? '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchDisplay" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    overlay = inject(WR_OVERLAY);
+    vcr = inject(ViewContainerRef);
+    scrollStrategies = inject(ScrollStrategyOptions);
+    destroyRef = inject(DestroyRef);
+    overlayRef = null;
+    onChange = noop;
+    onTouched = noop;
+    constructor() {
+        effect(() => {
+            if (this.open()) {
+                this.openOverlay();
+            }
+            else {
+                this.closeOverlay();
+                // Reset the search query when the panel closes so a re-open
+                // doesn't carry a stale filter.
+                if (this.isSearch())
+                    this.searchQuery.set('');
+            }
+        });
+        // Async loader pipeline (search mode only). `switchMap` cancels
+        // in-flight requests when a new keystroke arrives.
+        toObservable(this.searchQuery)
+            .pipe(debounceTime(this.debounceMs()), switchMap(query => {
+            const loader = this.loader();
+            if (!loader || !this.isSearch() || query.length < this.minChars()) {
+                this.loading.set(false);
+                return of([]);
+            }
+            this.loading.set(true);
+            const result = loader(query);
+            const source = isObservable(result) ? result : from(Promise.resolve(result));
+            return source.pipe(finalize(() => this.loading.set(false)));
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe(items => this.loadedOptions.set(items));
+        // Resolve the single-mode trigger label whenever the value or
+        // options change. Multi mode reads `selectedChips` instead and
+        // doesn't need this.
+        effect(() => {
+            const v = this.value();
+            const list = this.registry();
+            if (this.isMulti()) {
+                this.selectedLabel.set(null);
+                return;
+            }
+            const match = list.find(o => o.value === v);
+            this.selectedLabel.set(match ? match.getLabel() : null);
+        });
     }
-    get currentValue() {
-        return this.value();
+    // WrSelectContext
+    isSelected(value) {
+        if (this.isMulti())
+            return this.asArray(this.value()).includes(value);
+        return this.value() === value;
     }
-    get isMultiple() {
-        return this.multiple;
+    selectOption(value) {
+        if (this.isMulti()) {
+            const current = this.asArray(this.value());
+            const idx = current.indexOf(value);
+            let next;
+            if (idx >= 0) {
+                next = [...current.slice(0, idx), ...current.slice(idx + 1)];
+            }
+            else {
+                const cap = this.maxItems();
+                if (cap > 0 && current.length >= cap)
+                    return;
+                next = [...current, value];
+            }
+            this.value.set(next);
+            this.onChange(next);
+            this.onTouched();
+            // Keep the panel open in multi mode so the user can keep picking.
+            return;
+        }
+        this.value.set(value);
+        this.onChange(value);
+        this.onTouched();
+        this.open.set(false);
     }
-    ngAfterContentInit() {
-        this.options.changes.pipe(takeUntilDestroyed(this.destroyRef$)).subscribe(() => {
-            this.cdr.markForCheck();
-        });
+    registerOption(reg) {
+        this.registry.update(list => [...list, reg]);
+        return () => this.registry.update(list => list.filter(o => o.id !== reg.id));
+    }
+    // Chip handlers (multi + tag)
+    /** Remove one selection (chip × button). Works for multi and tag modes. */
+    removeChip(value, event) {
+        event.stopPropagation();
+        if (this.isDisabled() || !this.hasChips())
+            return;
+        const next = this.asArray(this.value()).filter(v => v !== value);
+        this.value.set(next);
+        this.onChange(next);
+        this.onTouched();
     }
-    onOptionSelect(option) {
+    /** Clear every selection (× button). Multi/tag → empty array; search → null. */
+    clearAll(event) {
+        event.stopPropagation();
         if (this.isDisabled())
             return;
-        if (this.multiple) {
-            const currentValue = Array.isArray(this.value()) ? this.value() : [];
-            if (this.maxMultipleCount && !this.isSelectedOption(option) && currentValue.length >= this.maxMultipleCount) {
-                return;
-            }
-            const newValue = this.isSelectedOption(option)
-                ? currentValue.filter((v) => v !== option.value)
-                : [...currentValue, option.value];
-            this.writeValue(newValue);
-            this.searchValue.set('');
+        if (this.hasChips()) {
+            this.value.set([]);
+            this.onChange([]);
+        }
+        else if (this.isSearch()) {
+            this.value.set(null);
+            this.onChange(null);
+            this.searchQuery.set('');
         }
         else {
-            this.writeValue(option.value);
-            this.close();
+            return;
         }
+        this.onTouched();
     }
-    onSearch(event) {
-        const value = event.target.value;
-        this.searchValue.set(value);
+    // Tag-mode draft handlers
+    /** Capacity check used by tag mode to refuse the next add. */
+    atCapacity = computed(() => {
+        const cap = this.maxItems();
+        return cap > 0 && this.asArray(this.value()).length >= cap;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atCapacity" }] : /* istanbul ignore next */ []));
+    onTagInput(event) {
+        if (this.isDisabled())
+            return;
+        this.draft.set(event.target.value);
     }
-    isHighlightedOption(option) {
-        if (this.highlightedOptionIndex() === -1) {
-            return false;
+    onTagKeydown(event) {
+        if (this.isDisabled())
+            return;
+        const seps = this.separators();
+        if (seps.includes(event.key)) {
+            event.preventDefault();
+            this.commitDraft();
+            return;
         }
-        const filteredOpts = this.filteredOptions();
-        const optionIndex = filteredOpts.findIndex(item => item.value === option.value);
-        return optionIndex !== -1 && optionIndex === this.highlightedOptionIndex();
-    }
-    isFilteredOption(option) {
-        if (this.multiple) {
-            const currentValue = this.value();
-            if (Array.isArray(currentValue) && currentValue.includes(option.value)) {
-                return true;
+        if (event.key === 'Backspace' && this.draft() === '') {
+            const chips = this.selectedChips();
+            if (chips.length > 0) {
+                event.preventDefault();
+                this.removeChip(chips[chips.length - 1].value, event);
             }
         }
-        const search = this.searchValue().toLowerCase();
-        if (search) {
-            return !(option.label || option.value.toString()).toLowerCase().includes(search);
-        }
-        return false;
     }
+    onTagPaste(event) {
+        if (this.isDisabled())
+            return;
+        const text = event.clipboardData?.getData('text') ?? '';
+        if (!text)
+            return;
+        const seps = this.separators().filter(s => s !== 'Enter');
+        if (seps.length === 0)
+            return;
+        event.preventDefault();
+        const escaped = seps.map(s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('');
+        const splitRegex = new RegExp(`[${escaped}\\n]+`);
+        for (const part of text.split(splitRegex))
+            this.tryAddTag(part);
+    }
+    onTagBlur() {
+        if (this.draft().trim())
+            this.commitDraft();
+        this.onTouched();
+    }
+    commitDraft() {
+        const v = this.draft().trim();
+        this.draft.set('');
+        if (v)
+            this.tryAddTag(v);
+    }
+    tryAddTag(raw) {
+        if (!this.isTag() || this.atCapacity())
+            return;
+        const value = raw.trim();
+        if (!value)
+            return;
+        const existing = this.asArray(this.value()).map(String);
+        if (!this.allowDuplicates() && existing.includes(value))
+            return;
+        const validator = this.validate();
+        if (validator && !validator(value, existing))
+            return;
+        const next = [...existing, value];
+        this.value.set(next);
+        this.onChange(next);
+        this.onTouched();
+    }
+    // ControlValueAccessor
     writeValue(value) {
-        this.value.set(value);
-        this.onChange(value);
-        this.cdr.markForCheck();
+        if (this.hasChips()) {
+            this.value.set(Array.isArray(value) ? value : []);
+        }
+        else {
+            this.value.set(value);
+        }
     }
     registerOnChange(fn) {
         this.onChange = fn;
     }
     registerOnTouched(fn) {
-        this.onTouch = fn;
+        this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.isDisabled.set(isDisabled);
+        this.disabledFromCva.set(coerceBooleanProperty(isDisabled));
+        if (isDisabled)
+            this.open.set(false);
     }
-    clear(event) {
-        event.stopPropagation();
+    // Template handlers
+    onTriggerClick() {
         if (this.isDisabled())
             return;
-        if (this.multiple) {
-            this.writeValue([]);
+        // Tag mode has no panel — clicks should land on the inline input,
+        // not toggle an overlay that's never created.
+        if (this.isTag())
+            return;
+        this.open.update(v => !v);
+    }
+    onTriggerKey(event) {
+        if (this.isDisabled())
+            return;
+        if (!this.open()) {
+            if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                event.preventDefault();
+                this.seedActiveIndex();
+                this.open.set(true);
+                return;
+            }
+            // Multi mode: Backspace on closed trigger removes last chip. Tag
+            // mode has its own input handler — never reaches this branch.
+            if (event.key === 'Backspace' && this.isMulti() && this.hasSelection()) {
+                event.preventDefault();
+                const chips = this.selectedChips();
+                const last = chips[chips.length - 1];
+                if (last)
+                    this.removeChip(last.value, event);
+            }
+            return;
+        }
+        // Open — navigation/selection.
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.moveActive(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.moveActive(-1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.activeIndex.set(this.firstEnabled());
+                break;
+            case 'End':
+                event.preventDefault();
+                this.activeIndex.set(this.lastEnabled());
+                break;
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                const idx = this.activeIndex();
+                const list = this.registry();
+                if (idx >= 0 && idx < list.length && !list[idx].disabled) {
+                    const id = list[idx].id;
+                    const el = this.overlayRef?.overlayElement.querySelector(`#${CSS.escape(id)}`);
+                    el?.click();
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    }
+    seedActiveIndex() {
+        const list = this.registry();
+        let selectedIdx = -1;
+        if (this.isMulti()) {
+            const arr = this.asArray(this.value());
+            if (arr.length > 0)
+                selectedIdx = list.findIndex(o => o.value === arr[0]);
         }
         else {
-            this.writeValue(null);
+            selectedIdx = list.findIndex(o => o.value === this.value());
         }
+        this.activeIndex.set(selectedIdx >= 0 ? selectedIdx : this.firstEnabled());
     }
-    toggle() {
-        if (this.isDisabled()) {
+    moveActive(delta) {
+        const list = this.registry();
+        if (list.length === 0)
             return;
-        }
-        this.isOpen.update(value => !value);
-        this.isFocused.update(value => !value);
-        if (this.isOpen() && this.searchable) {
-            // TODO Разобраться с этим хаком
-            setTimeout(() => {
-                this.searchInput?.nativeElement.focus();
-            }, 10);
+        let i = this.activeIndex();
+        let attempts = list.length;
+        while (attempts-- > 0) {
+            i = (i + delta + list.length) % list.length;
+            const o = list[i];
+            if (!o.disabled && !this.isOptionHidden(o.getLabel())) {
+                this.activeIndex.set(i);
+                return;
+            }
         }
     }
-    close() {
-        this.isOpen.set(false);
-        this.isFocused.set(false);
-        this.searchValue.set('');
-        this.highlightedOptionIndex.set(-1);
+    firstEnabled() {
+        return this.registry().findIndex(o => !o.disabled && !this.isOptionHidden(o.getLabel()));
     }
-    isSelectedOption(option) {
-        const currentValue = this.value();
-        if (this.multiple) {
-            return Array.isArray(currentValue) && currentValue.includes(option.value);
-        }
-        return currentValue === option.value;
+    lastEnabled() {
+        const list = this.registry();
+        let found = -1;
+        list.forEach((o, i) => {
+            if (!o.disabled && !this.isOptionHidden(o.getLabel()))
+                found = i;
+        });
+        return found;
+    }
+    /** Coerce the multi-mode value signal into an array (handles writeValue from non-array). */
+    asArray(value) {
+        if (Array.isArray(value))
+            return value;
+        if (value == null)
+            return [];
+        return [value];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: WrSelectComponent, isStandalone: true, selector: "wr-select", inputs: { placeholder: "placeholder", noItemsLabel: "noItemsLabel", multiple: ["multiple", "multiple", booleanAttribute], searchable: ["searchable", "searchable", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], maxMultipleCount: ["maxMultipleCount", "maxMultipleCount", numberAttribute], disabled: ["disabled", "disabled", booleanAttribute] }, host: { listeners: { "document:keydown": "onKeyDown($event)", "document:click": "onClickOutside($event)" }, properties: { "class": "this.hostClasses" } }, providers: [
-            provideWrIcons([chevronDown, close]),
+    // Overlay
+    openOverlay() {
+        if (this.overlayRef)
+            return;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.host)
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+        ])
+            .withPush(true);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.scrollStrategies.reposition(),
+            width: this.host.nativeElement.getBoundingClientRect().width,
+            panelClass: 'wr-select-overlay',
+        });
+        const portal = new TemplatePortal(this.panelTpl(), this.vcr);
+        this.overlayRef.attach(portal);
+        this.overlayRef
+            .outsidePointerEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(event => {
+            if (this.host.nativeElement.contains(event.target))
+                return;
+            this.open.set(false);
+        });
+        this.overlayRef
+            .keydownEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(event => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.open.set(false);
+            }
+        });
+    }
+    closeOverlay() {
+        if (!this.overlayRef)
+            return;
+        this.overlayRef.dispose();
+        this.overlayRef = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrSelect, isStandalone: true, selector: "wr-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, loader: { classPropertyName: "loader", publicName: "loader", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, freeText: { classPropertyName: "freeText", publicName: "freeText", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, maxTagCount: { classPropertyName: "maxTagCount", publicName: "maxTagCount", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 // eslint-disable-next-line @angular-eslint/no-forward-ref
-                useExisting: forwardRef(() => WrSelectComponent),
+                useExisting: forwardRef(() => WrSelect),
                 multi: true,
             },
-        ], queries: [{ propertyName: "options", predicate: WrOptionComponent, descendants: true }, { propertyName: "optionGroups", predicate: WrOptionGroupComponent }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #searchTemplate let-placeholder=\"placeholder\">\n  <input\n    #searchInput\n    class=\"wr-select__search\"\n    [value]=\"searchValue()\"\n    (input)=\"onSearch($event)\"\n    (click)=\"$event.stopPropagation()\"\n    [placeholder]=\"placeholder || ''\"\n  />\n</ng-template>\n\n<ng-template #selectedOptionsTemplate>\n  @for (option of selectedOptions(); track option.value) {\n    <wr-tag [hoverable]=\"true\" color=\"light\" (click)=\"onOptionSelect(option); $event.stopPropagation()\">\n      {{ option.label || option.value }}\n      <button class=\"wr-select__tag-remove\">\u00D7</button>\n    </wr-tag>\n  }\n</ng-template>\n\n<div class=\"wr-select__trigger\" (click)=\"toggle()\">\n  <div class=\"wr-select__value\">\n    @if (multiple) {\n      <div class=\"wr-select__tags\">\n        <div class=\"wr-select__tags-container\">\n          <ng-container *ngTemplateOutlet=\"selectedOptionsTemplate\"></ng-container>\n        </div>\n\n        @if (searchable && isOpen()) {\n          <ng-container *ngTemplateOutlet=\"searchTemplate\"></ng-container>\n        }\n\n        @if (maxMultipleCount) {\n          <div class=\"wr-select__counter\">{{ selectedOptions().length }}/{{ maxMultipleCount }}</div>\n        }\n      </div>\n    } @else {\n      @if (searchable && isOpen()) {\n        <ng-container\n          *ngTemplateOutlet=\"searchTemplate; context: { placeholder: selectedLabel() || placeholder }\"\n        ></ng-container>\n      } @else {\n        {{ selectedLabel() || placeholder }}\n      }\n    }\n  </div>\n\n  @if (clearable && selectedOptions().length) {\n    <button class=\"wr-select__clear\" (click)=\"clear($event)\" [class.wr-select__clear--multiple]=\"multiple\">\n      <wr-icon name=\"close\" />\n    </button>\n  }\n  <wr-icon class=\"wr-select__arrow\" name=\"chevron-down\" />\n</div>\n\n<div class=\"wr-select__dropdown\" [class.wr-select__dropdown--open]=\"isOpen()\">\n  <div class=\"wr-select__dropdown-content\">\n    @if (!filteredOptions().length) {\n      <div class=\"wr-select__no-data\">{{ noItemsLabel }}</div>\n    } @else {\n      <ng-content></ng-content>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: WrIconComponent, selector: "wr-icon", inputs: ["name"] }, { kind: "component", type: WrTagComponent, selector: "wr-tag", inputs: ["color", "icon", "iconPosition", "outlined", "rounded", "transparent", "hoverable", "loading"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+            {
+                provide: WR_SELECT,
+                // eslint-disable-next-line @angular-eslint/no-forward-ref
+                useExisting: forwardRef(() => WrSelect),
+            },
+        ], viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "tagInputEl", first: true, predicate: ["tagInput"], descendants: true, isSignal: true }, { propertyName: "searchInputEl", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isSearch()) {\n  <!-- Search mode: a real text input drives a filtered overlay panel.\n       The wrapper isn't itself focusable \u2014 the input is the tabstop. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"wr-select__trigger wr-select__trigger--search\" (click)=\"focusSearchInput()\">\n    <input\n      #searchInput\n      type=\"text\"\n      role=\"combobox\"\n      class=\"wr-select__search-input\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"listboxId\"\n      [attr.aria-activedescendant]=\"open() ? activeOptionId() || null : null\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"searchDisplay()\"\n      (input)=\"onSearchInput($event)\"\n      (focus)=\"onSearchFocus()\"\n      (keydown)=\"onSearchKey($event)\"\n      (blur)=\"onTouched()\"\n    />\n    @if (clearable() && hasSelection() && !isDisabled()) {\n      <span\n        class=\"wr-select__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"resolvedClear()\"\n        tabindex=\"-1\"\n        (click)=\"clearAll($event)\"\n        (keydown.enter)=\"clearAll($event)\"\n        (keydown.space)=\"clearAll($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n    <svg\n      class=\"wr-icon__svg wr-select__chevron\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </div>\n} @else if (isTag()) {\n  <!-- Tag mode: a focusable input lives inside, so the wrapper itself\n       only exists to host chips and forward whitespace clicks to the\n       input. Keyboard users tab straight into the input \u2014 no need for a\n       separate role. The click handler is a mouse-only convenience. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div\n    class=\"wr-select__trigger wr-select__trigger--tag\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    (click)=\"focusTagInput()\"\n  >\n    <span class=\"wr-select__chips\">\n      @for (chip of visibleChips(); track $index) {\n        <span class=\"wr-select__chip\">\n          <span class=\"wr-select__chip-label\">{{ chip.label }}</span>\n          <span\n            class=\"wr-select__chip-remove\"\n            role=\"button\"\n            [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n            tabindex=\"-1\"\n            (click)=\"removeChip(chip.value, $event)\"\n            (keydown.enter)=\"removeChip(chip.value, $event)\"\n            (keydown.space)=\"removeChip(chip.value, $event)\"\n          >\n            <svg\n              class=\"wr-icon__svg\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M18 6 6 18\" />\n              <path d=\"m6 6 12 12\" />\n            </svg>\n          </span>\n        </span>\n      }\n      @if (hiddenChipCount(); as extra) {\n        <span class=\"wr-select__chip wr-select__chip--more\">+{{ extra }} more</span>\n      }\n      <input\n        #tagInput\n        type=\"text\"\n        class=\"wr-select__tag-input\"\n        [value]=\"draft()\"\n        [disabled]=\"isDisabled() || atCapacity()\"\n        [placeholder]=\"hasSelection() ? '' : resolvedPlaceholder()\"\n        (input)=\"onTagInput($event)\"\n        (keydown)=\"onTagKeydown($event)\"\n        (paste)=\"onTagPaste($event)\"\n        (blur)=\"onTagBlur()\"\n      />\n    </span>\n\n    @if (clearable() && hasSelection() && !isDisabled()) {\n      <span\n        class=\"wr-select__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"resolvedClear()\"\n        tabindex=\"-1\"\n        (click)=\"clearAll($event)\"\n        (keydown.enter)=\"clearAll($event)\"\n        (keydown.space)=\"clearAll($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n  </div>\n} @else {\n  <button\n    type=\"button\"\n    class=\"wr-select__trigger\"\n    role=\"combobox\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listboxId\"\n    [attr.aria-multiselectable]=\"isMulti() ? 'true' : null\"\n    [attr.aria-activedescendant]=\"open() ? activeOptionId() || null : null\"\n    (click)=\"onTriggerClick()\"\n    (keydown)=\"onTriggerKey($event)\"\n    (blur)=\"onTouched()\"\n  >\n    @if (isMulti()) {\n      @if (hasSelection()) {\n        <span class=\"wr-select__chips\">\n          @for (chip of visibleChips(); track $index) {\n            <span class=\"wr-select__chip\">\n              <span class=\"wr-select__chip-label\">{{ chip.label }}</span>\n              <span\n                class=\"wr-select__chip-remove\"\n                role=\"button\"\n                [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n                tabindex=\"-1\"\n                (click)=\"removeChip(chip.value, $event)\"\n                (keydown.enter)=\"removeChip(chip.value, $event)\"\n                (keydown.space)=\"removeChip(chip.value, $event)\"\n              >\n                <svg\n                  class=\"wr-icon__svg\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  aria-hidden=\"true\"\n                >\n                  <path d=\"M18 6 6 18\" />\n                  <path d=\"m6 6 12 12\" />\n                </svg>\n              </span>\n            </span>\n          }\n          @if (hiddenChipCount(); as extra) {\n            <span class=\"wr-select__chip wr-select__chip--more\">+{{ extra }} more</span>\n          }\n        </span>\n      } @else {\n        <span class=\"wr-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    } @else {\n      @if (selectedLabel(); as label) {\n        <span class=\"wr-select__value\">{{ label }}</span>\n      } @else {\n        <span class=\"wr-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    }\n\n    @if (isMulti() && clearable() && hasSelection() && !isDisabled()) {\n      <span\n        class=\"wr-select__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"resolvedClear()\"\n        tabindex=\"-1\"\n        (click)=\"clearAll($event)\"\n        (keydown.enter)=\"clearAll($event)\"\n        (keydown.space)=\"clearAll($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n\n    <svg\n      class=\"wr-icon__svg wr-select__chevron\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n}\n\n<ng-template #panelTpl>\n  <div\n    class=\"wr-select-panel\"\n    role=\"listbox\"\n    [attr.id]=\"listboxId\"\n    [attr.aria-multiselectable]=\"isMulti() ? 'true' : null\"\n  >\n    @if (loading()) {\n      <div class=\"wr-select-panel__loading\" aria-busy=\"true\">{{ resolvedLoading() }}</div>\n    }\n\n    <!-- Dynamic options from [options] or async [loader] (search mode).\n         Rendered as wr-option so the standard registration / filter\n         pipeline applies uniformly. -->\n    @for (item of dynamicOptions(); track $index) {\n      <wr-option [value]=\"item\">{{ displayWith()(item) }}</wr-option>\n    }\n\n    <!-- Projected static options. -->\n    <ng-content />\n\n    @if (hasNoResults()) {\n      <div class=\"wr-select-panel__empty\">{{ resolvedNoResults() }}</div>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: WrOption, selector: "wr-option", inputs: ["value", "disabled"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: WrSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
-                        provideWrIcons([chevronDown, close]),
+            args: [{ selector: 'wr-select', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrOption], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             // eslint-disable-next-line @angular-eslint/no-forward-ref
-                            useExisting: forwardRef(() => WrSelectComponent),
+                            useExisting: forwardRef(() => WrSelect),
                             multi: true,
                         },
-                    ], imports: [WrIconComponent, WrTagComponent, NgTemplateOutlet], template: "<ng-template #searchTemplate let-placeholder=\"placeholder\">\n  <input\n    #searchInput\n    class=\"wr-select__search\"\n    [value]=\"searchValue()\"\n    (input)=\"onSearch($event)\"\n    (click)=\"$event.stopPropagation()\"\n    [placeholder]=\"placeholder || ''\"\n  />\n</ng-template>\n\n<ng-template #selectedOptionsTemplate>\n  @for (option of selectedOptions(); track option.value) {\n    <wr-tag [hoverable]=\"true\" color=\"light\" (click)=\"onOptionSelect(option); $event.stopPropagation()\">\n      {{ option.label || option.value }}\n      <button class=\"wr-select__tag-remove\">\u00D7</button>\n    </wr-tag>\n  }\n</ng-template>\n\n<div class=\"wr-select__trigger\" (click)=\"toggle()\">\n  <div class=\"wr-select__value\">\n    @if (multiple) {\n      <div class=\"wr-select__tags\">\n        <div class=\"wr-select__tags-container\">\n          <ng-container *ngTemplateOutlet=\"selectedOptionsTemplate\"></ng-container>\n        </div>\n\n        @if (searchable && isOpen()) {\n          <ng-container *ngTemplateOutlet=\"searchTemplate\"></ng-container>\n        }\n\n        @if (maxMultipleCount) {\n          <div class=\"wr-select__counter\">{{ selectedOptions().length }}/{{ maxMultipleCount }}</div>\n        }\n      </div>\n    } @else {\n      @if (searchable && isOpen()) {\n        <ng-container\n          *ngTemplateOutlet=\"searchTemplate; context: { placeholder: selectedLabel() || placeholder }\"\n        ></ng-container>\n      } @else {\n        {{ selectedLabel() || placeholder }}\n      }\n    }\n  </div>\n\n  @if (clearable && selectedOptions().length) {\n    <button class=\"wr-select__clear\" (click)=\"clear($event)\" [class.wr-select__clear--multiple]=\"multiple\">\n      <wr-icon name=\"close\" />\n    </button>\n  }\n  <wr-icon class=\"wr-select__arrow\" name=\"chevron-down\" />\n</div>\n\n<div class=\"wr-select__dropdown\" [class.wr-select__dropdown--open]=\"isOpen()\">\n  <div class=\"wr-select__dropdown-content\">\n    @if (!filteredOptions().length) {\n      <div class=\"wr-select__no-data\">{{ noItemsLabel }}</div>\n    } @else {\n      <ng-content></ng-content>\n    }\n  </div>\n</div>\n" }]
-        }], propDecorators: { placeholder: [{
-                type: Input
-            }], noItemsLabel: [{
-                type: Input
-            }], multiple: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], searchable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], clearable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], maxMultipleCount: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], searchInput: [{
-                type: ViewChild,
-                args: ['searchInput']
-            }], options: [{
-                type: ContentChildren,
-                args: [WrOptionComponent, { descendants: true }]
-            }], optionGroups: [{
-                type: ContentChildren,
-                args: [WrOptionGroupComponent]
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ['document:keydown', ['$event']]
-            }], onClickOutside: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
+                        {
+                            provide: WR_SELECT,
+                            // eslint-disable-next-line @angular-eslint/no-forward-ref
+                            useExisting: forwardRef(() => WrSelect),
+                        },
+                    ], template: "@if (isSearch()) {\n  <!-- Search mode: a real text input drives a filtered overlay panel.\n       The wrapper isn't itself focusable \u2014 the input is the tabstop. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"wr-select__trigger wr-select__trigger--search\" (click)=\"focusSearchInput()\">\n    <input\n      #searchInput\n      type=\"text\"\n      role=\"combobox\"\n      class=\"wr-select__search-input\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"listboxId\"\n      [attr.aria-activedescendant]=\"open() ? activeOptionId() || null : null\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"searchDisplay()\"\n      (input)=\"onSearchInput($event)\"\n      (focus)=\"onSearchFocus()\"\n      (keydown)=\"onSearchKey($event)\"\n      (blur)=\"onTouched()\"\n    />\n    @if (clearable() && hasSelection() && !isDisabled()) {\n      <span\n        class=\"wr-select__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"resolvedClear()\"\n        tabindex=\"-1\"\n        (click)=\"clearAll($event)\"\n        (keydown.enter)=\"clearAll($event)\"\n        (keydown.space)=\"clearAll($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n    <svg\n      class=\"wr-icon__svg wr-select__chevron\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </div>\n} @else if (isTag()) {\n  <!-- Tag mode: a focusable input lives inside, so the wrapper itself\n       only exists to host chips and forward whitespace clicks to the\n       input. Keyboard users tab straight into the input \u2014 no need for a\n       separate role. The click handler is a mouse-only convenience. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div\n    class=\"wr-select__trigger wr-select__trigger--tag\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    (click)=\"focusTagInput()\"\n  >\n    <span class=\"wr-select__chips\">\n      @for (chip of visibleChips(); track $index) {\n        <span class=\"wr-select__chip\">\n          <span class=\"wr-select__chip-label\">{{ chip.label }}</span>\n          <span\n            class=\"wr-select__chip-remove\"\n            role=\"button\"\n            [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n            tabindex=\"-1\"\n            (click)=\"removeChip(chip.value, $event)\"\n            (keydown.enter)=\"removeChip(chip.value, $event)\"\n            (keydown.space)=\"removeChip(chip.value, $event)\"\n          >\n            <svg\n              class=\"wr-icon__svg\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M18 6 6 18\" />\n              <path d=\"m6 6 12 12\" />\n            </svg>\n          </span>\n        </span>\n      }\n      @if (hiddenChipCount(); as extra) {\n        <span class=\"wr-select__chip wr-select__chip--more\">+{{ extra }} more</span>\n      }\n      <input\n        #tagInput\n        type=\"text\"\n        class=\"wr-select__tag-input\"\n        [value]=\"draft()\"\n        [disabled]=\"isDisabled() || atCapacity()\"\n        [placeholder]=\"hasSelection() ? '' : resolvedPlaceholder()\"\n        (input)=\"onTagInput($event)\"\n        (keydown)=\"onTagKeydown($event)\"\n        (paste)=\"onTagPaste($event)\"\n        (blur)=\"onTagBlur()\"\n      />\n    </span>\n\n    @if (clearable() && hasSelection() && !isDisabled()) {\n      <span\n        class=\"wr-select__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"resolvedClear()\"\n        tabindex=\"-1\"\n        (click)=\"clearAll($event)\"\n        (keydown.enter)=\"clearAll($event)\"\n        (keydown.space)=\"clearAll($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n  </div>\n} @else {\n  <button\n    type=\"button\"\n    class=\"wr-select__trigger\"\n    role=\"combobox\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listboxId\"\n    [attr.aria-multiselectable]=\"isMulti() ? 'true' : null\"\n    [attr.aria-activedescendant]=\"open() ? activeOptionId() || null : null\"\n    (click)=\"onTriggerClick()\"\n    (keydown)=\"onTriggerKey($event)\"\n    (blur)=\"onTouched()\"\n  >\n    @if (isMulti()) {\n      @if (hasSelection()) {\n        <span class=\"wr-select__chips\">\n          @for (chip of visibleChips(); track $index) {\n            <span class=\"wr-select__chip\">\n              <span class=\"wr-select__chip-label\">{{ chip.label }}</span>\n              <span\n                class=\"wr-select__chip-remove\"\n                role=\"button\"\n                [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n                tabindex=\"-1\"\n                (click)=\"removeChip(chip.value, $event)\"\n                (keydown.enter)=\"removeChip(chip.value, $event)\"\n                (keydown.space)=\"removeChip(chip.value, $event)\"\n              >\n                <svg\n                  class=\"wr-icon__svg\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  aria-hidden=\"true\"\n                >\n                  <path d=\"M18 6 6 18\" />\n                  <path d=\"m6 6 12 12\" />\n                </svg>\n              </span>\n            </span>\n          }\n          @if (hiddenChipCount(); as extra) {\n            <span class=\"wr-select__chip wr-select__chip--more\">+{{ extra }} more</span>\n          }\n        </span>\n      } @else {\n        <span class=\"wr-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    } @else {\n      @if (selectedLabel(); as label) {\n        <span class=\"wr-select__value\">{{ label }}</span>\n      } @else {\n        <span class=\"wr-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    }\n\n    @if (isMulti() && clearable() && hasSelection() && !isDisabled()) {\n      <span\n        class=\"wr-select__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"resolvedClear()\"\n        tabindex=\"-1\"\n        (click)=\"clearAll($event)\"\n        (keydown.enter)=\"clearAll($event)\"\n        (keydown.space)=\"clearAll($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n\n    <svg\n      class=\"wr-icon__svg wr-select__chevron\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n}\n\n<ng-template #panelTpl>\n  <div\n    class=\"wr-select-panel\"\n    role=\"listbox\"\n    [attr.id]=\"listboxId\"\n    [attr.aria-multiselectable]=\"isMulti() ? 'true' : null\"\n  >\n    @if (loading()) {\n      <div class=\"wr-select-panel__loading\" aria-busy=\"true\">{{ resolvedLoading() }}</div>\n    }\n\n    <!-- Dynamic options from [options] or async [loader] (search mode).\n         Rendered as wr-option so the standard registration / filter\n         pipeline applies uniformly. -->\n    @for (item of dynamicOptions(); track $index) {\n      <wr-option [value]=\"item\">{{ displayWith()(item) }}</wr-option>\n    }\n\n    <!-- Projected static options. -->\n    <ng-content />\n\n    @if (hasNoResults()) {\n      <div class=\"wr-select-panel__empty\">{{ resolvedNoResults() }}</div>\n    }\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], loader: [{ type: i0.Input, args: [{ isSignal: true, alias: "loader", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], freeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeText", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], separators: [{ type: i0.Input, args: [{ isSignal: true, alias: "separators", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], validate: [{ type: i0.Input, args: [{ isSignal: true, alias: "validate", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], maxTagCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTagCount", required: false }] }], panelTpl: [{ type: i0.ViewChild, args: ['panelTpl', { ...{ read: TemplateRef }, isSignal: true }] }], tagInputEl: [{ type: i0.ViewChild, args: ['tagInput', { isSignal: true }] }], searchInputEl: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
 
 /**
  * @license
@@ -396,10 +909,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
+/**
+ * Visually groups options under a label inside a `<wr-select>`.
+ *
+ * @example
+ * ```html
+ * <wr-option-group label="Sizes">
+ *   <wr-option value="sm">Small</wr-option>
+ *   <wr-option value="md">Medium</wr-option>
+ * </wr-option-group>
+ * ```
+ */
+class WrOptionGroup {
+    /** Section heading shown above the options. */
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: WrOptionGroup, isStandalone: true, selector: "wr-option-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "group" }, classAttribute: "wr-option-group" }, ngImport: i0, template: "<div class=\"wr-option-group__label\">{{ label() }}</div>\n<ng-content />\n", encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrOptionGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-option-group', encapsulation: ViewEncapsulation.None, host: { class: 'wr-option-group', role: 'group' }, template: "<div class=\"wr-option-group__label\">{{ label() }}</div>\n<ng-content />\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { WrOptionComponent, WrOptionGroupComponent, WrSelectComponent };
+export { WR_SELECT, WrOption, WrOptionGroup, WrSelect };
 //# sourceMappingURL=ngwr-select.mjs.map