ngwr 7.3.0 → 9.0.0

package/fesm2022/ngwr-select.mjs

@@ -1,14 +1,13 @@
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
+import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, input, inject, ElementRef, computed, effect, DestroyRef, ViewEncapsulation, Component, signal, viewChild, TemplateRef, ViewContainerRef, forwardRef } from '@angular/core';
+import { InjectionToken, input, inject, ElementRef, computed, effect, DestroyRef, ViewEncapsulation, Component, signal, model, output, contentChildren, viewChild, TemplateRef, ViewContainerRef, PLATFORM_ID, forwardRef } from '@angular/core';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { debounceTime, switchMap, of, isObservable, from, finalize } from 'rxjs';
 import { useI18nText, useI18nFormatter } from 'ngwr/i18n';
 import { WR_OVERLAY, WR_RESPONSIVE_OVERLAYS, wrPresentAsSheet } from 'ngwr/overlay';
-import { noop } from 'ngwr/utils';
 
 /**
  * @license
@@ -120,10 +119,10 @@ class WrOption {
             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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", 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: "22.0.2", ngImport: i0, type: WrOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrOption, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-option',
@@ -161,20 +160,22 @@ let listboxUid = 0;
  * - `'tag'` — free-text + chips with `[separators]` / `[validate]` /
  *   `[allowDuplicates]`. Replaces `<wr-chips-input>`.
  *
- * Implements `ControlValueAccessor` — usable with `[(ngModel)]`,
- * `formControl`, or `formControlName`.
+ * A signal-forms native control: it implements `FormValueControl<unknown>`, so
+ * `[formField]` binds straight to its `value` model — no
+ * `ControlValueAccessor` in between. `[(value)]` works standalone, and classic
+ * `[(ngModel)]` / reactive forms keep working through Angular's bridge.
  *
  * @example
  * ```html
- * <!-- Single -->
- * <wr-select placeholder="Pick a size" [(ngModel)]="size">
+ * <!-- Single (signal forms) -->
+ * <wr-select placeholder="Pick a size" [formField]="form.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">
+ * <!-- Multi (standalone two-way binding) -->
+ * <wr-select mode="multi" placeholder="Pick tags" [(value)]="tags">
  *   <wr-option value="ts">TypeScript</wr-option>
  *   <wr-option value="ng">Angular</wr-option>
  * </wr-select>
@@ -183,7 +184,7 @@ let listboxUid = 0;
  * 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
+ * @see https://ngwr.dev/reference/components/select
  */
 class WrSelect {
     /** Placeholder shown when no option is selected. Falls back to `select.placeholder`. */
@@ -196,10 +197,18 @@ class WrSelect {
     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`. */
+    /**
+     * Disable the select. Bound automatically from the field's disabled state
+     * when used with `[formField]`.
+     *
+     * @default false
+     */
     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 });
+    /** Control size — shares the `--wr-control-*` contract. @default 'md' */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /**
      * Present the option panel as a full-width bottom-sheet on small
      * viewports instead of an anchored dropdown. `undefined` follows the
@@ -274,6 +283,29 @@ class WrSelect {
      * 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: window the option panel so thousands of `[options]` keep only
+     * ~one viewport of rows in the DOM. Opt-in and OFF by default. Engages ONLY on
+     * the pure data-array search tier — it silently falls back to the full render
+     * when static `<wr-option>` children are projected or the filtered list is
+     * empty. While on, rows are plain `role="option"` elements (no `<wr-option>`),
+     * navigated via `aria-activedescendant`, selected by value. @default false
+     */
+    virtualScroll = input(false, { ...(ngDevMode ? { debugName: "virtualScroll" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Search mode: uniform option-row height in px for the virtual window. `0`
+     * (default) measures the first rendered row once and reuses it, so it adapts
+     * to the control size. Read only when `virtualScroll` engages. @default 0
+     */
+    rowHeight = input(0, { ...(ngDevMode ? { debugName: "rowHeight" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, coerceNumberProperty(v, 0)) });
+    /**
+     * Search mode: height of the virtual scroll viewport — a number (px) or any
+     * CSS length. @default 256
+     */
+    viewportHeight = input(256, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
+    /** Search mode: extra rows kept above/below the virtual viewport. @default 6 */
+    overscan = input(6, { ...(ngDevMode ? { debugName: "overscan" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, coerceNumberProperty(v, 6)) });
     /** 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 */ []));
@@ -323,13 +355,14 @@ class WrSelect {
      */
     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
+     * Unified value. Single mode holds a scalar (or `null`); multi / tag
+     * mode holds `readonly unknown[]`. Bound by `[formField]`, or two-way
+     * via `[(value)]`.
      */
-    value = signal(null, /* @ts-ignore */
+    value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emitted on blur / commit so a bound field can mark itself touched. */
+    touch = output();
     /** 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. */
@@ -341,6 +374,13 @@ class WrSelect {
     /** Id of the active option (for `aria-activedescendant`). */
     activeOptionId = computed(() => {
         const idx = this.activeIndex();
+        if (this.virtualActive()) {
+            // Virtual rows aren't registered; the active id is derived from the index,
+            // and returned only while the row is inside the rendered window so
+            // `aria-activedescendant` never dangles at a recycled element.
+            const { start, end } = this.virtualWindow();
+            return idx >= start && idx < end ? this.virtualRowId(idx) : null;
+        }
         const list = this.registry();
         return idx >= 0 && idx < list.length ? list[idx].id : null;
     }, /* @ts-ignore */
@@ -386,10 +426,8 @@ class WrSelect {
         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 */
+    /** Effective disabled state. Part of {@link WrSelectContext} for child options. */
+    isDisabled = computed(() => this.disabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
         const parts = ['wr-select'];
@@ -397,6 +435,9 @@ class WrSelect {
             parts.push('wr-select--open');
         if (this.rounded())
             parts.push('wr-select--rounded');
+        const size = this.size();
+        if (size !== 'md')
+            parts.push(`wr-select--${size}`);
         if (this.isMulti())
             parts.push('wr-select--multi');
         if (this.isTag())
@@ -415,11 +456,117 @@ class WrSelect {
      */
     dynamicOptions = computed(() => this.loader() ? this.loadedOptions() : this.options(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dynamicOptions" }] : /* istanbul ignore next */ []));
+    // --- Virtual scroll (search mode, data-array path) ------------------------
+    static FALLBACK_ROW_PX = 34;
+    static FALLBACK_VIEWPORT_PX = 256;
+    /** Consumer-projected `<wr-option>` children only (NOT the `@for`-rendered ones). */
+    projectedOptions = contentChildren(WrOption, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projectedOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * `dynamicOptions()` narrowed to the current search query. `dynamicOptions()`
+     * is intentionally UNFILTERED (projected `<wr-option>` self-hide via CSS), so
+     * the virtual path — which renders plain rows that can't self-hide — filters
+     * here. Loader results are already query-scoped upstream.
+     */
+    filteredDynamicOptions = computed(() => {
+        const items = this.dynamicOptions();
+        if (this.loader())
+            return items;
+        const q = this.searchQuery().trim().toLowerCase();
+        if (!q)
+            return items;
+        const label = this.displayWith();
+        return items.filter(it => label(it).toLowerCase().includes(q));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredDynamicOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Virtualization engaged: opt-in, search mode, a non-empty filtered array, and
+     * NO projected `<wr-option>` children (those keep the full-render registry path
+     * so their DOM-derived labels / selection still work).
+     */
+    virtualActive = computed(() => this.virtualScroll() &&
+        this.isSearch() &&
+        this.projectedOptions().length === 0 &&
+        this.filteredDynamicOptions().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualActive" }] : /* istanbul ignore next */ []));
+    scrollTop = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
+    viewportPx = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportPx" }] : /* istanbul ignore next */ []));
+    measuredRowPx = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measuredRowPx" }] : /* istanbul ignore next */ []));
+    /** Effective uniform row height (px). */
+    effRowH = computed(() => this.rowHeight() > 0 ? this.rowHeight() : this.measuredRowPx() || WrSelect.FALLBACK_ROW_PX, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effRowH" }] : /* istanbul ignore next */ []));
+    fallbackViewportPx = computed(() => {
+        const h = this.viewportHeight();
+        if (typeof h === 'number')
+            return h;
+        return /^\d+$/.test(h) ? Number(h) : WrSelect.FALLBACK_VIEWPORT_PX;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fallbackViewportPx" }] : /* istanbul ignore next */ []));
+    /** `viewportHeight` as a CSS length for the inline max-height (bare number → px). */
+    resolvedViewportHeight = computed(() => {
+        const h = this.viewportHeight();
+        return typeof h === 'number' || /^\d+$/.test(h) ? `${h}px` : h;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedViewportHeight" }] : /* istanbul ignore next */ []));
+    /** Rendered window [start,end) + spacer pads (px). */
+    virtualWindow = computed(() => {
+        const total = this.filteredDynamicOptions().length;
+        if (!this.virtualActive() || total === 0)
+            return { start: 0, end: total, padTop: 0, padBottom: 0 };
+        const h = this.effRowH();
+        const vp = this.viewportPx() || this.fallbackViewportPx();
+        const over = this.overscan();
+        const first = Math.min(Math.floor(this.scrollTop() / h), total - 1);
+        const count = Math.ceil(vp / h) + 1;
+        const start = Math.max(0, first - over);
+        const end = Math.min(total, first + count + over);
+        return { start, end, padTop: start * h, padBottom: (total - end) * h };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualWindow" }] : /* istanbul ignore next */ []));
+    /** The windowed slice of options, each carrying its absolute index. */
+    windowOptions = computed(() => {
+        const { start, end } = this.virtualWindow();
+        return this.filteredDynamicOptions()
+            .slice(start, end)
+            .map((item, k) => ({ item, index: start + k }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "windowOptions" }] : /* istanbul ignore next */ []));
+    /** Stable id for a virtual option row at filtered index `i`. */
+    virtualRowId(i) {
+        return `${this.listboxId}-vopt-${i}`;
+    }
+    /** The virtual scroll container inside the overlay panel, if attached. */
+    get vlistElement() {
+        return this.overlayRef?.overlayElement.querySelector('.wr-select-panel__vlist') ?? null;
+    }
+    /** Scroll filtered index `i` just into view (sets the `scrollTop` signal synchronously). */
+    ensureVisible(i) {
+        if (!this.virtualActive() || i < 0)
+            return;
+        const h = this.effRowH();
+        const vp = this.viewportPx() || this.fallbackViewportPx();
+        const top = i * h;
+        const cur = this.scrollTop();
+        let next = cur;
+        if (top < cur)
+            next = top;
+        else if (top + h > cur + vp)
+            next = top + h - vp;
+        if (next !== cur) {
+            this.scrollTop.set(next);
+            this.vlistElement?.scrollTo({ top: 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(() => {
+        if (this.virtualActive())
+            return this.filteredDynamicOptions().length;
         const list = this.registry();
         if (!this.isSearch())
             return list.length;
@@ -452,7 +599,7 @@ class WrSelect {
             return false;
         return !label.toLowerCase().includes(q);
     }
-    panelTpl = viewChild.required('panelTpl', { read: TemplateRef });
+    panelTpl = viewChild.required('panelTpl', { ...(ngDevMode ? { debugName: "panelTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
     /** Tag-mode inline input. Present only when `mode="tag"`. @internal */
     tagInputEl = viewChild('tagInput', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tagInputEl" }] : /* istanbul ignore next */ []));
@@ -473,6 +620,13 @@ class WrSelect {
         this.searchQuery.set(value);
         if (!this.open())
             this.open.set(true);
+        // A new filter re-tops the virtual window and cursor (the filtered array
+        // — hence every index — just changed under `activeIndex`).
+        if (this.virtualActive()) {
+            this.scrollTop.set(0);
+            this.activeIndex.set(this.firstEnabled());
+            this.vlistElement?.scrollTo({ top: 0 });
+        }
     }
     onSearchFocus() {
         if (this.isDisabled())
@@ -490,12 +644,13 @@ class WrSelect {
             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());
+            const hasActive = this.virtualActive()
+                ? idx >= 0 && idx < this.filteredDynamicOptions().length
+                : idx >= 0 && idx < list.length && !list[idx].disabled && !this.isOptionHidden(list[idx].getLabel());
             if (!hasActive && q) {
                 event.preventDefault();
                 this.value.set(q);
-                this.onChange(q);
-                this.onTouched();
+                this.touch.emit();
                 this.open.set(false);
                 return;
             }
@@ -520,9 +675,8 @@ class WrSelect {
     vcr = inject(ViewContainerRef);
     scrollStrategies = inject(ScrollStrategyOptions);
     destroyRef = inject(DestroyRef);
+    platformId = inject(PLATFORM_ID);
     overlayRef = null;
-    onChange = noop;
-    onTouched = noop;
     constructor() {
         effect(() => {
             if (this.open()) {
@@ -562,7 +716,70 @@ class WrSelect {
                 return;
             }
             const match = list.find(o => o.value === v);
-            this.selectedLabel.set(match ? match.getLabel() : null);
+            if (match) {
+                this.selectedLabel.set(match.getLabel());
+                return;
+            }
+            // Search mode: a value picked from a virtualized (or since-unmounted) row
+            // has no registered `<wr-option>`, so derive its label from `displayWith`
+            // — the same function that rendered the row.
+            this.selectedLabel.set(v != null && this.isSearch() ? this.displayWith()(v) : null);
+        });
+        // Wire the virtual scroll listener + viewport/row measurement while the panel
+        // is open and virtualized. Re-runs when the panel opens/closes or the virtual
+        // list mounts/unmounts; the microtask defers the DOM read until the overlay
+        // portal is attached. Browser-only — the panel never prerenders (overlay).
+        effect(onCleanup => {
+            if (!isPlatformBrowser(this.platformId))
+                return;
+            if (!this.open() || !this.virtualActive())
+                return;
+            let raf = 0;
+            let ro = null;
+            let el = null;
+            const onScroll = () => {
+                if (raf)
+                    return;
+                raf = requestAnimationFrame(() => {
+                    raf = 0;
+                    if (el)
+                        this.scrollTop.set(el.scrollTop);
+                });
+            };
+            queueMicrotask(() => {
+                el = this.vlistElement;
+                if (!el)
+                    return;
+                this.viewportPx.set(el.clientHeight);
+                if (this.rowHeight() === 0) {
+                    const h = el.querySelector('.wr-option')?.offsetHeight ?? 0;
+                    if (h > 0)
+                        this.measuredRowPx.set(h);
+                }
+                // Re-seed the scroll with the now-measured row height + real viewport so
+                // a deep pre-selected active row lands correctly on first open (the seed
+                // before open used the fallback height). No-op when it's already in view.
+                this.ensureVisible(this.activeIndex());
+                // Sync the freshly-attached element to the retained signal — seeds the
+                // scroll to the active option and avoids a blank panel on reopen.
+                if (el.scrollTop !== this.scrollTop())
+                    el.scrollTop = this.scrollTop();
+                el.addEventListener('scroll', onScroll, { passive: true });
+                if (typeof ResizeObserver !== 'undefined') {
+                    ro = new ResizeObserver(() => {
+                        if (el)
+                            this.viewportPx.set(el.clientHeight);
+                    });
+                    ro.observe(el);
+                }
+            });
+            onCleanup(() => {
+                if (raf)
+                    cancelAnimationFrame(raf);
+                if (el)
+                    el.removeEventListener('scroll', onScroll);
+                ro?.disconnect();
+            });
         });
     }
     // WrSelectContext
@@ -586,14 +803,12 @@ class WrSelect {
                 next = [...current, value];
             }
             this.value.set(next);
-            this.onChange(next);
-            this.onTouched();
+            this.touch.emit();
             // Keep the panel open in multi mode so the user can keep picking.
             return;
         }
         this.value.set(value);
-        this.onChange(value);
-        this.onTouched();
+        this.touch.emit();
         this.open.set(false);
     }
     registerOption(reg) {
@@ -608,8 +823,7 @@ class WrSelect {
             return;
         const next = this.asArray(this.value()).filter(v => v !== value);
         this.value.set(next);
-        this.onChange(next);
-        this.onTouched();
+        this.touch.emit();
     }
     /** Clear every selection (× button). Multi/tag → empty array; search → null. */
     clearAll(event) {
@@ -618,17 +832,15 @@ class WrSelect {
             return;
         if (this.hasChips()) {
             this.value.set([]);
-            this.onChange([]);
         }
         else if (this.isSearch()) {
             this.value.set(null);
-            this.onChange(null);
             this.searchQuery.set('');
         }
         else {
             return;
         }
-        this.onTouched();
+        this.touch.emit();
     }
     // Tag-mode draft handlers
     /** Capacity check used by tag mode to refuse the next add. */
@@ -677,7 +889,7 @@ class WrSelect {
     onTagBlur() {
         if (this.draft().trim())
             this.commitDraft();
-        this.onTouched();
+        this.touch.emit();
     }
     commitDraft() {
         const v = this.draft().trim();
@@ -699,28 +911,7 @@ class WrSelect {
             return;
         const next = [...existing, value];
         this.value.set(next);
-        this.onChange(next);
-        this.onTouched();
-    }
-    // ControlValueAccessor
-    writeValue(value) {
-        if (this.hasChips()) {
-            this.value.set(Array.isArray(value) ? value : []);
-        }
-        else {
-            this.value.set(value);
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabledFromCva.set(coerceBooleanProperty(isDisabled));
-        if (isDisabled)
-            this.open.set(false);
+        this.touch.emit();
     }
     // Template handlers
     onTriggerClick() {
@@ -766,15 +957,24 @@ class WrSelect {
             case 'Home':
                 event.preventDefault();
                 this.activeIndex.set(this.firstEnabled());
+                this.ensureVisible(this.activeIndex());
                 break;
             case 'End':
                 event.preventDefault();
                 this.activeIndex.set(this.lastEnabled());
+                this.ensureVisible(this.activeIndex());
                 break;
             case 'Enter':
             case ' ': {
                 event.preventDefault();
                 const idx = this.activeIndex();
+                if (this.virtualActive()) {
+                    // Virtual rows aren't in the DOM to click — select the value directly.
+                    const list = this.filteredDynamicOptions();
+                    if (idx >= 0 && idx < list.length)
+                        this.selectOption(list[idx]);
+                    break;
+                }
                 const list = this.registry();
                 if (idx >= 0 && idx < list.length && !list[idx].disabled) {
                     const id = list[idx].id;
@@ -788,6 +988,13 @@ class WrSelect {
         }
     }
     seedActiveIndex() {
+        if (this.virtualActive()) {
+            const list = this.filteredDynamicOptions();
+            const idx = list.findIndex(it => this.isSelected(it));
+            this.activeIndex.set(idx >= 0 ? idx : this.firstEnabled());
+            this.ensureVisible(this.activeIndex());
+            return;
+        }
         const list = this.registry();
         let selectedIdx = -1;
         if (this.isMulti()) {
@@ -801,6 +1008,17 @@ class WrSelect {
         this.activeIndex.set(selectedIdx >= 0 ? selectedIdx : this.firstEnabled());
     }
     moveActive(delta) {
+        // Virtual rows are never disabled or hidden (the list is already filtered),
+        // so navigation is a plain wrap plus a scroll-into-view.
+        if (this.virtualActive()) {
+            const len = this.filteredDynamicOptions().length;
+            if (len === 0)
+                return;
+            const i = (this.activeIndex() + delta + len) % len;
+            this.activeIndex.set(i);
+            this.ensureVisible(i);
+            return;
+        }
         const list = this.registry();
         if (list.length === 0)
             return;
@@ -816,9 +1034,13 @@ class WrSelect {
         }
     }
     firstEnabled() {
+        if (this.virtualActive())
+            return this.filteredDynamicOptions().length > 0 ? 0 : -1;
         return this.registry().findIndex(o => !o.disabled && !this.isOptionHidden(o.getLabel()));
     }
     lastEnabled() {
+        if (this.virtualActive())
+            return this.filteredDynamicOptions().length - 1;
         const list = this.registry();
         let found = -1;
         list.forEach((o, i) => {
@@ -827,7 +1049,7 @@ class WrSelect {
         });
         return found;
     }
-    /** Coerce the multi-mode value signal into an array (handles writeValue from non-array). */
+    /** Coerce the multi-mode value into an array (tolerates a scalar or null write). */
     asArray(value) {
         if (Array.isArray(value))
             return value;
@@ -855,7 +1077,14 @@ class WrSelect {
         this.overlayRef = this.overlay.create({
             positionStrategy,
             scrollStrategy: asSheet ? this.scrollStrategies.block() : this.scrollStrategies.reposition(),
-            width: asSheet ? '100%' : this.host.nativeElement.getBoundingClientRect().width,
+            // Floor the panel at the trigger width (it can still grow for long
+            // options) instead of pinning it. The panel fills this via `width: 100%`,
+            // so the flex overlay pane has no transparent gutter beside a
+            // content-narrow panel — that gutter would otherwise sit "inside" the
+            // overlay and swallow outside-clicks, leaving the panel open. Mirrors how
+            // mat-select sizes its overlay.
+            width: asSheet ? '100%' : undefined,
+            minWidth: asSheet ? undefined : this.host.nativeElement.getBoundingClientRect().width,
             hasBackdrop: asSheet,
             backdropClass: asSheet ? 'wr-select-backdrop' : undefined,
             panelClass: asSheet ? ['wr-select-overlay', 'wr-overlay-sheet'] : 'wr-select-overlay',
@@ -892,37 +1121,25 @@ class WrSelect {
         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 }, responsive: { classPropertyName: "responsive", publicName: "responsive", 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(() => WrSelect),
-                multi: true,
-            },
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", 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 }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, providers: [
             {
                 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 });
+        ], queries: [{ propertyName: "projectedOptions", predicate: WrOption, isSignal: true }], 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)=\"touch.emit()\"\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)=\"touch.emit()\"\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    [class.wr-select-panel--sm]=\"size() === 'sm'\"\n    [class.wr-select-panel--lg]=\"size() === 'lg'\"\n    [class.wr-select-panel--virtual]=\"virtualActive()\"\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    @if (virtualActive()) {\n      <!-- Windowed data-array rows: plain role=\"option\" elements (not <wr-option>),\n           navigated via the input's aria-activedescendant, selected by value. -->\n      <div class=\"wr-select-panel__vlist\" [style.max-height]=\"resolvedViewportHeight()\">\n        @if (virtualWindow().padTop > 0) {\n          <div class=\"wr-select-panel__vspacer\" aria-hidden=\"true\" [style.height.px]=\"virtualWindow().padTop\"></div>\n        }\n        @for (entry of windowOptions(); track entry.index) {\n          <!-- Keyboard handled by the search input via aria-activedescendant; the\n               row is a pointer target only. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <div\n            role=\"option\"\n            class=\"wr-option\"\n            [id]=\"virtualRowId(entry.index)\"\n            [class.wr-option--active]=\"entry.index === activeIndex()\"\n            [class.wr-option--selected]=\"isSelected(entry.item)\"\n            [attr.aria-selected]=\"isSelected(entry.item)\"\n            [attr.aria-setsize]=\"filteredDynamicOptions().length\"\n            [attr.aria-posinset]=\"entry.index + 1\"\n            (click)=\"selectOption(entry.item)\"\n          >\n            {{ displayWith()(entry.item) }}\n          </div>\n        }\n        @if (virtualWindow().padBottom > 0) {\n          <div class=\"wr-select-panel__vspacer\" aria-hidden=\"true\" [style.height.px]=\"virtualWindow().padBottom\"></div>\n        }\n      </div>\n    } @else {\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\n    <!-- Projected static options \u2014 always present (a conditional `<ng-content>`\n         would drop projected content). Empty whenever `virtualActive`. -->\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: "22.0.2", ngImport: i0, type: WrSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrSelect, decorators: [{
             type: Component,
             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(() => WrSelect),
-                            multi: true,
-                        },
                         {
                             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 }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", 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 }] }] } });
+                    ], 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)=\"touch.emit()\"\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)=\"touch.emit()\"\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    [class.wr-select-panel--sm]=\"size() === 'sm'\"\n    [class.wr-select-panel--lg]=\"size() === 'lg'\"\n    [class.wr-select-panel--virtual]=\"virtualActive()\"\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    @if (virtualActive()) {\n      <!-- Windowed data-array rows: plain role=\"option\" elements (not <wr-option>),\n           navigated via the input's aria-activedescendant, selected by value. -->\n      <div class=\"wr-select-panel__vlist\" [style.max-height]=\"resolvedViewportHeight()\">\n        @if (virtualWindow().padTop > 0) {\n          <div class=\"wr-select-panel__vspacer\" aria-hidden=\"true\" [style.height.px]=\"virtualWindow().padTop\"></div>\n        }\n        @for (entry of windowOptions(); track entry.index) {\n          <!-- Keyboard handled by the search input via aria-activedescendant; the\n               row is a pointer target only. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <div\n            role=\"option\"\n            class=\"wr-option\"\n            [id]=\"virtualRowId(entry.index)\"\n            [class.wr-option--active]=\"entry.index === activeIndex()\"\n            [class.wr-option--selected]=\"isSelected(entry.item)\"\n            [attr.aria-selected]=\"isSelected(entry.item)\"\n            [attr.aria-setsize]=\"filteredDynamicOptions().length\"\n            [attr.aria-posinset]=\"entry.index + 1\"\n            (click)=\"selectOption(entry.item)\"\n          >\n            {{ displayWith()(entry.item) }}\n          </div>\n        }\n        @if (virtualWindow().padBottom > 0) {\n          <div class=\"wr-select-panel__vspacer\" aria-hidden=\"true\" [style.height.px]=\"virtualWindow().padBottom\"></div>\n        }\n      </div>\n    } @else {\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\n    <!-- Projected static options \u2014 always present (a conditional `<ng-content>`\n         would drop projected content). Empty whenever `virtualActive`. -->\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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", 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 }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], viewportHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], projectedOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WrOption), { isSignal: true }] }], 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
@@ -945,10 +1162,10 @@ 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", 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 }] }] } });