ngwr 7.3.0 → 8.0.0

package/fesm2022/ngwr-segmented.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-segmented.mjs","sources":["../../../projects/lib/segmented/segmented.ts","../../../projects/lib/segmented/segmented.html","../../../projects/lib/segmented/ngwr-segmented.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, afterNextRender, computed, input, model, signal } from '@angular/core';\n\nimport { WrIcon } from 'ngwr/icon';\n\nimport type { WrSegmentedOption } from './interfaces';\n\n/**\n * Single-choice picker rendered as a segmented control. Two-way binds\n * the selected `value`.\n *\n * @example\n * ```html\n * <wr-segmented\n *   [options]=\"[\n *     { value: 'day',  label: 'Day' },\n *     { value: 'week', label: 'Week' },\n *     { value: 'month', label: 'Month' },\n *   ]\"\n *   [(value)]=\"range\"\n * />\n * ```\n *\n * @see https://ngwr.dev/components/segmented\n */\n@Component({\n  selector: 'wr-segmented',\n  templateUrl: './segmented.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()', '[style]': 'thumbStyle()', role: 'group' },\n  imports: [WrIcon],\n})\nexport class WrSegmented<T = unknown> {\n  /** The segments to render. */\n  readonly options = input.required<readonly WrSegmentedOption<T>[]>();\n\n  /** Two-way bindable selected value. */\n  readonly value = model<T | null>(null);\n\n  /** Disable the whole control. @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Index of the selected option, or `-1` when nothing is selected. */\n  protected readonly selectedIndex = computed(() => {\n    const v = this.value();\n    return this.options().findIndex(o => o.value === v);\n  });\n\n  /** Flips true after the first paint so the thumb only animates user-driven changes, not the initial snap. */\n  private readonly mounted = signal(false);\n\n  constructor() {\n    afterNextRender(() => this.mounted.set(true));\n  }\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-segmented'];\n    if (this.disabled()) parts.push('wr-segmented--disabled');\n    if (this.selectedIndex() < 0) parts.push('wr-segmented--unselected');\n    if (this.mounted()) parts.push('wr-segmented--mounted');\n    return parts.join(' ');\n  });\n\n  /** Inline CSS vars driving the sliding thumb position. */\n  protected readonly thumbStyle = computed<Record<string, string>>(() => {\n    const i = Math.max(0, this.selectedIndex());\n    const count = Math.max(1, this.options().length);\n    return {\n      '--wr-segmented-thumb-index': `${i}`,\n      '--wr-segmented-thumb-count': `${count}`,\n    };\n  });\n\n  protected isSelected(option: WrSegmentedOption<T>): boolean {\n    return this.value() === option.value;\n  }\n\n  protected select(option: WrSegmentedOption<T>): void {\n    if (this.disabled() || option.disabled || this.isSelected(option)) return;\n    this.value.set(option.value);\n  }\n\n  protected trackByValue(_: number, option: WrSegmentedOption<T>): unknown {\n    return option.value;\n  }\n}\n","<span class=\"wr-segmented__thumb\" aria-hidden=\"true\"></span>\n\n@for (option of options(); track option.value) {\n  <button\n    type=\"button\"\n    class=\"wr-segmented__option\"\n    [class.wr-segmented__option--selected]=\"isSelected(option)\"\n    [disabled]=\"disabled() || !!option.disabled\"\n    [attr.aria-pressed]=\"isSelected(option)\"\n    (click)=\"select(option)\"\n  >\n    @if (option.icon) {\n      <wr-icon class=\"wr-segmented__icon\" [name]=\"option.icon\" />\n    }\n    @if (option.label) {\n      <span class=\"wr-segmented__label\">{{ option.label }}</span>\n    }\n  </button>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-segmented.mjs","sources":["../../../projects/lib/segmented/segmented.ts","../../../projects/lib/segmented/segmented.html","../../../projects/lib/segmented/ngwr-segmented.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, afterNextRender, computed, input, model, signal } from '@angular/core';\n\nimport { WrIcon } from 'ngwr/icon';\n\nimport type { WrSegmentedOption } from './interfaces';\n\n/**\n * Single-choice picker rendered as a segmented control. Two-way binds\n * the selected `value`.\n *\n * @example\n * ```html\n * <wr-segmented\n *   [options]=\"[\n *     { value: 'day',  label: 'Day' },\n *     { value: 'week', label: 'Week' },\n *     { value: 'month', label: 'Month' },\n *   ]\"\n *   [(value)]=\"range\"\n * />\n * ```\n *\n * @see https://ngwr.dev/components/segmented\n */\nexport type WrSegmentedSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'wr-segmented',\n  templateUrl: './segmented.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()', '[style]': 'thumbStyle()', role: 'group' },\n  imports: [WrIcon],\n})\nexport class WrSegmented<T = unknown> {\n  /** The segments to render. */\n  readonly options = input.required<readonly WrSegmentedOption<T>[]>();\n\n  /** Two-way bindable selected value. */\n  readonly value = model<T | null>(null);\n\n  /** Disable the whole control. @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Control size — shares the `--wr-control-*` contract. @default 'md' */\n  readonly size = input<WrSegmentedSize>('md');\n\n  /** Index of the selected option, or `-1` when nothing is selected. */\n  protected readonly selectedIndex = computed(() => {\n    const v = this.value();\n    return this.options().findIndex(o => o.value === v);\n  });\n\n  /** Flips true after the first paint so the thumb only animates user-driven changes, not the initial snap. */\n  private readonly mounted = signal(false);\n\n  constructor() {\n    afterNextRender(() => this.mounted.set(true));\n  }\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-segmented'];\n    const size = this.size();\n    if (size !== 'md') parts.push(`wr-segmented--${size}`);\n    if (this.disabled()) parts.push('wr-segmented--disabled');\n    if (this.selectedIndex() < 0) parts.push('wr-segmented--unselected');\n    if (this.mounted()) parts.push('wr-segmented--mounted');\n    return parts.join(' ');\n  });\n\n  /** Inline CSS vars driving the sliding thumb position. */\n  protected readonly thumbStyle = computed<Record<string, string>>(() => {\n    const i = Math.max(0, this.selectedIndex());\n    const count = Math.max(1, this.options().length);\n    return {\n      '--wr-segmented-thumb-index': `${i}`,\n      '--wr-segmented-thumb-count': `${count}`,\n    };\n  });\n\n  protected isSelected(option: WrSegmentedOption<T>): boolean {\n    return this.value() === option.value;\n  }\n\n  protected select(option: WrSegmentedOption<T>): void {\n    if (this.disabled() || option.disabled || this.isSelected(option)) return;\n    this.value.set(option.value);\n  }\n\n  protected trackByValue(_: number, option: WrSegmentedOption<T>): unknown {\n    return option.value;\n  }\n}\n","<span class=\"wr-segmented__thumb\" aria-hidden=\"true\"></span>\n\n@for (option of options(); track option.value) {\n  <button\n    type=\"button\"\n    class=\"wr-segmented__option\"\n    [class.wr-segmented__option--selected]=\"isSelected(option)\"\n    [disabled]=\"disabled() || !!option.disabled\"\n    [attr.aria-pressed]=\"isSelected(option)\"\n    (click)=\"select(option)\"\n  >\n    @if (option.icon) {\n      <wr-icon class=\"wr-segmented__icon\" [name]=\"option.icon\" />\n    }\n    @if (option.label) {\n      <span class=\"wr-segmented__label\">{{ option.label }}</span>\n    }\n  </button>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-select.mjs

@@ -120,10 +120,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.0.4", ngImport: i0, type: WrOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", 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.0.4", ngImport: i0, type: WrOption, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-option',
@@ -200,6 +200,9 @@ class WrSelect {
     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
@@ -397,6 +400,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())
@@ -855,7 +861,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,8 +905,8 @@ 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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 }, 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
@@ -905,9 +918,9 @@ class WrSelect {
                 // 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 });
+        ], 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    [class.wr-select-panel--sm]=\"size() === 'sm'\"\n    [class.wr-select-panel--lg]=\"size() === 'lg'\"\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: "22.0.2", ngImport: i0, type: WrSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrSelect, decorators: [{
             type: Component,
             args: [{ selector: 'wr-select', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrOption], providers: [
                         {
@@ -921,8 +934,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                             // 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)=\"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    [class.wr-select-panel--sm]=\"size() === 'sm'\"\n    [class.wr-select-panel--lg]=\"size() === 'lg'\"\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 }] }], 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 }] }], 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
@@ -945,10 +958,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.0.4", ngImport: i0, type: WrOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", 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.0.4", 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 }] }] } });