@siemens/element-ng 49.16.0 → 51.0.0-rc.10

package/fesm2022/siemens-element-ng-select.mjs

@@ -1,7 +1,7 @@
 import * as i1$3 from '@angular/cdk/overlay';
 import { CdkOverlayOrigin, OverlayModule, Overlay } from '@angular/cdk/overlay';
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, input, ChangeDetectionStrategy, Component, booleanAttribute, output, computed, signal, inject, Input, ElementRef, viewChild, contentChild, TemplateRef, NgModule, model, ViewContainerRef, DestroyRef, PLATFORM_ID } from '@angular/core';
+import { InjectionToken, Directive, input, Component, booleanAttribute, output, computed, signal, inject, Input, ElementRef, viewChild, contentChild, TemplateRef, NgModule, model, ViewContainerRef, DestroyRef, PLATFORM_ID } from '@angular/core';
 import { defaultConnectedOverlayScrollStrategy } from '@siemens/element-ng/common';
 import { SI_FORM_ITEM_CONTROL } from '@siemens/element-ng/form';
 import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
@@ -33,7 +33,8 @@ const SI_SELECT_OPTIONS_STRATEGY = new InjectionToken('si-select.options-strateg
  * SPDX-License-Identifier: MIT
  */
 /**
- * The directive allows to template/customize the value option rendering.
+ * The directive allows to template/customize the option rendering in the dropdown.
+ * It is also used for rendering selected values in the input if no input template is provided.
  * This requires using the {@link SiSelectSimpleOptionsDirective} to specify options as input.
  *
  * @example
@@ -48,10 +49,10 @@ class SiSelectOptionTemplateDirective {
     static ngTemplateContextGuard(directive, context) {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectOptionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiSelectOptionTemplateDirective, isStandalone: true, selector: "[siSelectOptionTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectOptionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SiSelectOptionTemplateDirective, isStandalone: true, selector: "[siSelectOptionTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectOptionTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectOptionTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siSelectOptionTemplate]'
@@ -66,17 +67,19 @@ class SiSelectOptionComponent {
     /**
      * Option to render.
      */
-    option = input.required(...(ngDevMode ? [{ debugName: "option" }] : []));
+    option = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
     /**
      * Custom template for rendering the option.
      */
-    optionTemplate = input(...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSelectOptionComponent, isStandalone: true, selector: "si-select-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-flex align-items-center overflow-hidden" }, ngImport: i0, template: "<ng-container\n  [ngTemplateOutlet]=\"optionTemplate() ?? defaultOptionTemplate\"\n  [ngTemplateOutletContext]=\"{ $implicit: option() }\"\n/>\n\n<ng-template #defaultOptionTemplate let-item siSelectOptionTemplate>\n  @if (item.icon) {\n    <i class=\"icon-stack\">\n      <si-icon\n        class=\"icon me-2\"\n        [icon]=\"item.icon\"\n        [class]=\"!item.disabled && item.iconColor ? item.iconColor : ''\"\n      />\n      @if (item.stackedIcon) {\n        <si-icon\n          class=\"icon me-2\"\n          [class]=\"item.stackedIconColor ?? ''\"\n          [icon]=\"item.stackedIcon\"\n        />\n      }\n    </i>\n  }\n  @if (item.label) {\n    <span class=\"text-truncate\">{{ item.label | translate }}</span>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiSelectOptionTemplateDirective, selector: "[siSelectOptionTemplate]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    optionTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiSelectOptionComponent, isStandalone: true, selector: "si-select-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-flex align-items-center overflow-hidden" }, ngImport: i0, template: "<ng-container\n  [ngTemplateOutlet]=\"optionTemplate() ?? defaultOptionTemplate\"\n  [ngTemplateOutletContext]=\"{ $implicit: option() }\"\n/>\n\n<ng-template #defaultOptionTemplate let-item siSelectOptionTemplate>\n  @if (item.icon) {\n    <i class=\"icon-stack\">\n      <si-icon\n        class=\"icon me-2\"\n        [icon]=\"item.icon\"\n        [class]=\"!item.disabled && item.iconColor ? item.iconColor : ''\"\n      />\n      @if (item.stackedIcon) {\n        <si-icon\n          class=\"icon me-2\"\n          [class]=\"item.stackedIconColor ?? ''\"\n          [icon]=\"item.stackedIcon\"\n        />\n      }\n    </i>\n  }\n  @if (item.label) {\n    <span class=\"text-truncate\">{{ item.label | translate }}</span>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiSelectOptionTemplateDirective, selector: "[siSelectOptionTemplate]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-select-option', imports: [NgTemplateOutlet, SiIconComponent, SiTranslatePipe, SiSelectOptionTemplateDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'si-select-option', imports: [NgTemplateOutlet, SiIconComponent, SiTranslatePipe, SiSelectOptionTemplateDirective], host: {
                         class: 'd-flex align-items-center overflow-hidden'
                     }, template: "<ng-container\n  [ngTemplateOutlet]=\"optionTemplate() ?? defaultOptionTemplate\"\n  [ngTemplateOutletContext]=\"{ $implicit: option() }\"\n/>\n\n<ng-template #defaultOptionTemplate let-item siSelectOptionTemplate>\n  @if (item.icon) {\n    <i class=\"icon-stack\">\n      <si-icon\n        class=\"icon me-2\"\n        [icon]=\"item.icon\"\n        [class]=\"!item.disabled && item.iconColor ? item.iconColor : ''\"\n      />\n      @if (item.stackedIcon) {\n        <si-icon\n          class=\"icon me-2\"\n          [class]=\"item.stackedIconColor ?? ''\"\n          [icon]=\"item.stackedIcon\"\n        />\n      }\n    </i>\n  }\n  @if (item.label) {\n    <span class=\"text-truncate\">{{ item.label | translate }}</span>\n  }\n</ng-template>\n" }]
         }], propDecorators: { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: true }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }] } });
@@ -95,7 +98,7 @@ class SiSelectSelectionStrategy {
      * @defaultValue false
      */
     // eslint-disable-next-line @angular-eslint/no-input-rename
-    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled', transform: booleanAttribute });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
     /**
      * The selected value(s).
      */
@@ -108,16 +111,19 @@ class SiSelectSelectionStrategy {
      * Provides the internal value always as an array
      * @internal
      */
-    arrayValue = computed(() => this.selectOptions.selectedRows().map(option => option.value), ...(ngDevMode ? [{ debugName: "arrayValue" }] : []));
+    arrayValue = computed(() => this.selectOptions.selectedRows().map(option => option.value), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "arrayValue" }] : /* istanbul ignore next */ []));
     /**
      * Registered form callback which shall be called on blur.
      * @internal
      */
     onTouched = () => { };
     /** @internal */
-    disabled = computed(() => this.disabledInput() || this.disabledNgControl(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    disabled = computed(() => this.disabledInput() || this.disabledNgControl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     onChange = () => { };
-    disabledNgControl = signal(false, ...(ngDevMode ? [{ debugName: "disabledNgControl" }] : []));
+    disabledNgControl = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledNgControl" }] : /* istanbul ignore next */ []));
     selectOptions = inject(SI_SELECT_OPTIONS_STRATEGY);
     registerOnTouched(fn) {
         this.onTouched = fn;
@@ -144,10 +150,10 @@ class SiSelectSelectionStrategy {
     updateFromInput(values) {
         this.selectOptions.onValueChange(values);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectSelectionStrategy, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiSelectSelectionStrategy, isStandalone: true, inputs: { disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.disabled": "disabled()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectSelectionStrategy, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SiSelectSelectionStrategy, isStandalone: true, inputs: { disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.disabled": "disabled()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectSelectionStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectSelectionStrategy, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -166,43 +172,49 @@ class SiSelectInputComponent {
     /**
      * Base ID used to associate the input with its label.
      */
-    baseId = input.required(...(ngDevMode ? [{ debugName: "baseId" }] : []));
+    baseId = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "baseId" }] : /* istanbul ignore next */ []));
     /**
      * Aria labelledby of the select.
      *
      * @defaultValue null
      */
-    labelledby = input(null, ...(ngDevMode ? [{ debugName: "labelledby" }] : []));
+    labelledby = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledby" }] : /* istanbul ignore next */ []));
     /**
      * Aria label of the select.
      *
      * @defaultValue null
      */
-    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     /**
      * Whether the listbox is open.
      *
      * @defaultValue false
      */
-    open = input(false, { ...(ngDevMode ? { debugName: "open" } : {}), transform: booleanAttribute });
+    open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Text shown when no option is selected.
      */
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /**
      * ID of the associated listbox.
      */
-    controls = input.required(...(ngDevMode ? [{ debugName: "controls" }] : []));
+    controls = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
     /**
      * Custom template for rendering selected options.
      */
-    optionTemplate = input(...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : []));
+    optionTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Whether the input is read-only.
      *
      * @defaultValue false
      */
-    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Emits when the user requests to open the listbox.
      */
@@ -210,7 +222,8 @@ class SiSelectInputComponent {
     selectionStrategy = inject((SiSelectSelectionStrategy));
     selectOptions = inject(SI_SELECT_OPTIONS_STRATEGY);
     selectedRows = this.selectOptions.selectedRows;
-    labeledBy = computed(() => `${this.baseId()}-aria-label ${this.labelledby()}`, ...(ngDevMode ? [{ debugName: "labeledBy" }] : []));
+    labeledBy = computed(() => `${this.baseId()}-aria-label ${this.labelledby()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labeledBy" }] : /* istanbul ignore next */ []));
     icons = addIcons({ elementDown2 });
     blur() {
         if (!this.open()) {
@@ -221,12 +234,12 @@ class SiSelectInputComponent {
         event?.preventDefault();
         this.openListbox.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSelectInputComponent, isStandalone: true, selector: "si-select-input", inputs: { baseId: { classPropertyName: "baseId", publicName: "baseId", isSignal: true, isRequired: true, transformFunction: null }, labelledby: { classPropertyName: "labelledby", publicName: "labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: true, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openListbox: "openListbox" }, host: { attributes: { "aria-autocomplete": "none" }, listeners: { "blur": "blur()", "click": "click($event)", "keydown.arrowDown": "click($event)", "keydown.alt.arrowDown": "click($event)", "keydown.arrowUp": "click($event)", "keydown.enter": "click($event)", "keydown.space": "click($event)" }, properties: { "attr.role": "readonly() ? \"textbox\": \"combobox\"", "attr.aria-haspopup": "readonly() ? undefined : \"listbox\"", "attr.aria-expanded": "readonly() ? undefined : open()", "attr.aria-controls": "readonly() ? undefined : controls()", "attr.aria-readonly": "readonly()", "attr.aria-labelledby": "labeledBy()", "attr.aria-disabled": "selectionStrategy.disabled()", "attr.tabindex": "selectionStrategy.disabled() ? \"-1\" : \"0\"", "class.disabled": "selectionStrategy.disabled()", "class.active": "open()" }, classAttribute: "select focus-none dropdown-toggle d-flex align-items-center ps-4" }, ngImport: i0, template: "@if (ariaLabel()) {\n  <span class=\"visually-hidden\" [id]=\"baseId() + '-aria-label'\">{{ ariaLabel() }}</span>\n}\n<div\n  class=\"d-flex align-items-center flex-fill overflow-hidden\"\n  [id]=\"baseId() + '-content'\"\n  [siAutoCollapsableList]=\"selectionStrategy.allowMultiple && selectedRows().length > 1\"\n>\n  @for (activeOption of selectedRows(); track activeOption) {\n    @if (activeOption) {\n      <si-select-option\n        siAutoCollapsableListItem\n        [option]=\"activeOption\"\n        [optionTemplate]=\"optionTemplate()\"\n        [class.overflow-hidden]=\"!selectionStrategy.allowMultiple || $count === 1\"\n      />\n    }\n  } @empty {\n    <div class=\"text-secondary\">{{ placeholder() | translate }}</div>\n  }\n  @if (selectionStrategy.allowMultiple) {\n    <div #overflowItem=\"siAutoCollapsableListOverflowItem\" siAutoCollapsableListOverflowItem>\n      <div class=\"pill py-0 ms-2\"> {{ overflowItem.hiddenItemCount }}+</div>\n    </div>\n  }\n</div>\n<div class=\"form-control-actions\">\n  <si-icon\n    class=\"dropdown-caret icon flip-rtl ps-0 m-0\"\n    [class.text-muted]=\"readonly()\"\n    [icon]=\"icons.elementDown2\"\n  />\n</div>\n", styles: ["@charset \"UTF-8\";:host{cursor:pointer;font-weight:600;min-inline-size:72px;block-size:100%;color:var(--element-text-primary);padding-block:7px;padding-inline-end:calc(3px + var(--si-feedback-icon-offset, 0px))}:host.disabled{color:var(--element-text-disabled)}:host-context(.form-control) :host{font-weight:400;padding-block:3px;padding-inline-end:var(--si-input-padding-inline-end)}:host-context(.dropdown:not(.form-control)) :host:not(.disabled):hover{background:var(--element-base-1-hover)}:host-context(.dropdown:not(.form-control)) :host:not(.disabled).active{background:var(--element-base-1-selected)}si-select-option+si-select-option:before{content:\",\\a0\"}\n"], dependencies: [{ kind: "ngmodule", type: SiAutoCollapsableListModule }, { kind: "directive", type: i1.SiAutoCollapsableListDirective, selector: "[siAutoCollapsableList]", inputs: ["siAutoCollapsableList", "gap", "siAutoCollapsableListContainerElement"], exportAs: ["siAutoCollapsableList"] }, { kind: "directive", type: i1.SiAutoCollapsableListItemDirective, selector: "[siAutoCollapsableListItem]", inputs: ["forceHide"], exportAs: ["siAutoCollapsableListItem"] }, { kind: "directive", type: i1.SiAutoCollapsableListOverflowItemDirective, selector: "[siAutoCollapsableListOverflowItem]", exportAs: ["siAutoCollapsableListOverflowItem"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiSelectOptionComponent, selector: "si-select-option", inputs: ["option", "optionTemplate"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiSelectInputComponent, isStandalone: true, selector: "si-select-input", inputs: { baseId: { classPropertyName: "baseId", publicName: "baseId", isSignal: true, isRequired: true, transformFunction: null }, labelledby: { classPropertyName: "labelledby", publicName: "labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: true, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openListbox: "openListbox" }, host: { attributes: { "aria-autocomplete": "none" }, listeners: { "blur": "blur()", "click": "click($event)", "keydown.arrowDown": "click($event)", "keydown.alt.arrowDown": "click($event)", "keydown.arrowUp": "click($event)", "keydown.enter": "click($event)", "keydown.space": "click($event)" }, properties: { "attr.role": "readonly() ? \"textbox\": \"combobox\"", "attr.aria-haspopup": "readonly() ? undefined : \"listbox\"", "attr.aria-expanded": "readonly() ? undefined : open()", "attr.aria-controls": "readonly() ? undefined : controls()", "attr.aria-readonly": "readonly()", "attr.aria-labelledby": "labeledBy()", "attr.aria-disabled": "selectionStrategy.disabled()", "attr.tabindex": "selectionStrategy.disabled() ? \"-1\" : \"0\"", "class.disabled": "selectionStrategy.disabled()", "class.active": "open()" }, classAttribute: "select focus-none dropdown-toggle d-flex align-items-center ps-4" }, ngImport: i0, template: "@if (ariaLabel()) {\n  <span class=\"visually-hidden\" [id]=\"baseId() + '-aria-label'\">{{ ariaLabel() }}</span>\n}\n<div\n  class=\"d-flex align-items-center flex-fill overflow-hidden h-100\"\n  [id]=\"baseId() + '-content'\"\n  [siAutoCollapsableList]=\"selectionStrategy.allowMultiple && selectedRows().length > 1\"\n>\n  @for (activeOption of selectedRows(); track activeOption) {\n    @if (activeOption) {\n      <si-select-option\n        class=\"h-100\"\n        siAutoCollapsableListItem\n        [option]=\"activeOption\"\n        [optionTemplate]=\"optionTemplate()\"\n        [class.overflow-hidden]=\"!selectionStrategy.allowMultiple || $count === 1\"\n      />\n    }\n  } @empty {\n    <div class=\"text-secondary\">{{ placeholder() | translate }}</div>\n  }\n  @if (selectionStrategy.allowMultiple) {\n    <div #overflowItem=\"siAutoCollapsableListOverflowItem\" siAutoCollapsableListOverflowItem>\n      <div class=\"pill py-0 ms-2\"> {{ overflowItem.hiddenItemCount }}+</div>\n    </div>\n  }\n</div>\n<div class=\"form-control-actions\">\n  <si-icon\n    class=\"dropdown-caret icon flip-rtl ps-0 m-0\"\n    [class.text-disabled]=\"readonly()\"\n    [icon]=\"icons.elementDown2\"\n  />\n</div>\n", styles: ["@charset \"UTF-8\";:host{cursor:pointer;min-inline-size:72px;block-size:100%;color:var(--si-sys-text-primary);padding-inline-end:calc(var(--si-sys-sizing-spacing-y-20) - 1px + var(--si-feedback-icon-size, 0px))}:host.disabled{color:var(--si-sys-text-disabled)}:host-context(.form-control) :host{padding-block:calc(var(--si-sys-sizing-spacing-y-20) - 1px);padding-inline-end:var(--si-input-padding-inline-end)}si-select-option+si-select-option:before{content:\",\\a0\"}\n"], dependencies: [{ kind: "ngmodule", type: SiAutoCollapsableListModule }, { kind: "directive", type: i1.SiAutoCollapsableListDirective, selector: "[siAutoCollapsableList]", inputs: ["siAutoCollapsableList", "gap", "siAutoCollapsableListContainerElement"], exportAs: ["siAutoCollapsableList"] }, { kind: "directive", type: i1.SiAutoCollapsableListItemDirective, selector: "[siAutoCollapsableListItem]", inputs: ["forceHide"], exportAs: ["siAutoCollapsableListItem"] }, { kind: "directive", type: i1.SiAutoCollapsableListOverflowItemDirective, selector: "[siAutoCollapsableListOverflowItem]", exportAs: ["siAutoCollapsableListOverflowItem"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiSelectOptionComponent, selector: "si-select-option", inputs: ["option", "optionTemplate"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-select-input', imports: [SiAutoCollapsableListModule, SiIconComponent, SiSelectOptionComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'si-select-input', imports: [SiAutoCollapsableListModule, SiIconComponent, SiSelectOptionComponent, SiTranslatePipe], host: {
                         // In readonly mode, the select needs to be announced as a textbox.
                         // Otherwise, screen-reader won't announce the readonly state.
                         class: 'select focus-none dropdown-toggle d-flex align-items-center ps-4',
@@ -248,7 +261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '(keydown.arrowUp)': 'click($event)',
                         '(keydown.enter)': 'click($event)',
                         '(keydown.space)': 'click($event)'
-                    }, template: "@if (ariaLabel()) {\n  <span class=\"visually-hidden\" [id]=\"baseId() + '-aria-label'\">{{ ariaLabel() }}</span>\n}\n<div\n  class=\"d-flex align-items-center flex-fill overflow-hidden\"\n  [id]=\"baseId() + '-content'\"\n  [siAutoCollapsableList]=\"selectionStrategy.allowMultiple && selectedRows().length > 1\"\n>\n  @for (activeOption of selectedRows(); track activeOption) {\n    @if (activeOption) {\n      <si-select-option\n        siAutoCollapsableListItem\n        [option]=\"activeOption\"\n        [optionTemplate]=\"optionTemplate()\"\n        [class.overflow-hidden]=\"!selectionStrategy.allowMultiple || $count === 1\"\n      />\n    }\n  } @empty {\n    <div class=\"text-secondary\">{{ placeholder() | translate }}</div>\n  }\n  @if (selectionStrategy.allowMultiple) {\n    <div #overflowItem=\"siAutoCollapsableListOverflowItem\" siAutoCollapsableListOverflowItem>\n      <div class=\"pill py-0 ms-2\"> {{ overflowItem.hiddenItemCount }}+</div>\n    </div>\n  }\n</div>\n<div class=\"form-control-actions\">\n  <si-icon\n    class=\"dropdown-caret icon flip-rtl ps-0 m-0\"\n    [class.text-muted]=\"readonly()\"\n    [icon]=\"icons.elementDown2\"\n  />\n</div>\n", styles: ["@charset \"UTF-8\";:host{cursor:pointer;font-weight:600;min-inline-size:72px;block-size:100%;color:var(--element-text-primary);padding-block:7px;padding-inline-end:calc(3px + var(--si-feedback-icon-offset, 0px))}:host.disabled{color:var(--element-text-disabled)}:host-context(.form-control) :host{font-weight:400;padding-block:3px;padding-inline-end:var(--si-input-padding-inline-end)}:host-context(.dropdown:not(.form-control)) :host:not(.disabled):hover{background:var(--element-base-1-hover)}:host-context(.dropdown:not(.form-control)) :host:not(.disabled).active{background:var(--element-base-1-selected)}si-select-option+si-select-option:before{content:\",\\a0\"}\n"] }]
+                    }, template: "@if (ariaLabel()) {\n  <span class=\"visually-hidden\" [id]=\"baseId() + '-aria-label'\">{{ ariaLabel() }}</span>\n}\n<div\n  class=\"d-flex align-items-center flex-fill overflow-hidden h-100\"\n  [id]=\"baseId() + '-content'\"\n  [siAutoCollapsableList]=\"selectionStrategy.allowMultiple && selectedRows().length > 1\"\n>\n  @for (activeOption of selectedRows(); track activeOption) {\n    @if (activeOption) {\n      <si-select-option\n        class=\"h-100\"\n        siAutoCollapsableListItem\n        [option]=\"activeOption\"\n        [optionTemplate]=\"optionTemplate()\"\n        [class.overflow-hidden]=\"!selectionStrategy.allowMultiple || $count === 1\"\n      />\n    }\n  } @empty {\n    <div class=\"text-secondary\">{{ placeholder() | translate }}</div>\n  }\n  @if (selectionStrategy.allowMultiple) {\n    <div #overflowItem=\"siAutoCollapsableListOverflowItem\" siAutoCollapsableListOverflowItem>\n      <div class=\"pill py-0 ms-2\"> {{ overflowItem.hiddenItemCount }}+</div>\n    </div>\n  }\n</div>\n<div class=\"form-control-actions\">\n  <si-icon\n    class=\"dropdown-caret icon flip-rtl ps-0 m-0\"\n    [class.text-disabled]=\"readonly()\"\n    [icon]=\"icons.elementDown2\"\n  />\n</div>\n", styles: ["@charset \"UTF-8\";:host{cursor:pointer;min-inline-size:72px;block-size:100%;color:var(--si-sys-text-primary);padding-inline-end:calc(var(--si-sys-sizing-spacing-y-20) - 1px + var(--si-feedback-icon-size, 0px))}:host.disabled{color:var(--si-sys-text-disabled)}:host-context(.form-control) :host{padding-block:calc(var(--si-sys-sizing-spacing-y-20) - 1px);padding-inline-end:var(--si-input-padding-inline-end)}si-select-option+si-select-option:before{content:\",\\a0\"}\n"] }]
         }], propDecorators: { baseId: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseId", required: true }] }], labelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelledby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: true }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], openListbox: [{ type: i0.Output, args: ["openListbox"] }] } });
 
 /**
@@ -259,24 +272,26 @@ class SiSelectOptionRowComponent {
     /**
      * Option displayed by the row.
      */
-    option = input.required(...(ngDevMode ? [{ debugName: "option" }] : []));
+    option = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
     /**
      * Custom template for rendering the option.
      */
-    optionTemplate = input(...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : []));
+    optionTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Whether the option is selected.
      *
      * @defaultValue false
      */
-    selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : {}), transform: booleanAttribute });
+    selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     icons = addIcons({ elementOk });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectOptionRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSelectOptionRowComponent, isStandalone: true, selector: "si-select-option-row", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.disabled": "!!this.option().disabled", "attr.aria-selected": "selected()", "attr.data-id": "this.option().value" }, classAttribute: "dropdown-item focus-none pe-4 gap-4" }, ngImport: i0, template: "<span\n  class=\"form-check-input si-form-checkbox\"\n  [class.checked]=\"selected()\"\n  [class.disabled]=\"option().disabled\"\n></span>\n<si-select-option [option]=\"option()\" [optionTemplate]=\"optionTemplate()\" />\n@if (selected()) {\n  <span class=\"ms-auto selected-marker\" aria-hidden=\"true\">\n    <si-icon class=\"d-block icon\" [icon]=\"icons.elementOk\" />\n  </span>\n}\n", styles: [".selected-marker>span{font-size:1.5rem;margin-inline-end:0}.form-check-input{display:none}:host-context(.si-multi-select) .selected-marker{display:none}:host-context(.si-multi-select) .form-check-input{display:block}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiSelectOptionComponent, selector: "si-select-option", inputs: ["option", "optionTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectOptionRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiSelectOptionRowComponent, isStandalone: true, selector: "si-select-option-row", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.disabled": "!!this.option().disabled", "attr.aria-selected": "selected()", "attr.data-id": "this.option().value" }, classAttribute: "dropdown-item focus-none pe-4 gap-4" }, ngImport: i0, template: "<span\n  class=\"form-check-input si-form-checkbox\"\n  [class.checked]=\"selected()\"\n  [class.disabled]=\"option().disabled\"\n></span>\n<si-select-option [option]=\"option()\" [optionTemplate]=\"optionTemplate()\" />\n@if (selected()) {\n  <span class=\"ms-auto selected-marker\" aria-hidden=\"true\">\n    <si-icon class=\"d-block icon\" [icon]=\"icons.elementOk\" />\n  </span>\n}\n", styles: [".selected-marker>span{font-size:1.5rem;margin-inline-end:0}.form-check-input{display:none}:host-context(.si-multi-select) .selected-marker{display:none}:host-context(.si-multi-select) .form-check-input{display:block}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiSelectOptionComponent, selector: "si-select-option", inputs: ["option", "optionTemplate"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectOptionRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectOptionRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-select-option-row', imports: [SiIconComponent, SiSelectOptionComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'si-select-option-row', imports: [SiIconComponent, SiSelectOptionComponent], host: {
                         class: 'dropdown-item focus-none pe-4 gap-4',
                         '[class.disabled]': '!!this.option().disabled',
                         '[attr.aria-selected]': 'selected()',
@@ -311,10 +326,10 @@ class SiSelectGroupTemplateDirective {
     static ngTemplateContextGuard(directive, context) {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectGroupTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiSelectGroupTemplateDirective, isStandalone: true, selector: "[siSelectGroupTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectGroupTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SiSelectGroupTemplateDirective, isStandalone: true, selector: "[siSelectGroupTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectGroupTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectGroupTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siSelectGroupTemplate]'
@@ -329,10 +344,10 @@ class SiSelectOptionRowTemplateDirective {
     static ngTemplateContextGuard(directive, context) {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectOptionRowTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiSelectOptionRowTemplateDirective, isStandalone: true, selector: "[siSelectOptionRowTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectOptionRowTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SiSelectOptionRowTemplateDirective, isStandalone: true, selector: "[siSelectOptionRowTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectOptionRowTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectOptionRowTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siSelectOptionRowTemplate]'
@@ -347,21 +362,26 @@ class SiSelectListBase {
     /**
      * Base ID used to associate the listbox with its label.
      */
-    baseId = input.required(...(ngDevMode ? [{ debugName: "baseId" }] : []));
+    baseId = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "baseId" }] : /* istanbul ignore next */ []));
     /**
      * Custom template for rendering options.
      */
-    optionTemplate = input(...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : []));
+    optionTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Custom template for rendering option groups.
      */
-    groupTemplate = input(...(ngDevMode ? [undefined, { debugName: "groupTemplate" }] : []));
+    groupTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "groupTemplate" }] : /* istanbul ignore next */ []));
     /** @defaultValue null */
-    labelledby = input(null, ...(ngDevMode ? [{ debugName: "labelledby" }] : []));
+    labelledby = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledby" }] : /* istanbul ignore next */ []));
     /**
      * Custom template for actions displayed below the options.
      */
-    actionsTemplate = input(...(ngDevMode ? [undefined, { debugName: "actionsTemplate" }] : []));
+    actionsTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "actionsTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Emits when the listbox should close.
      */
@@ -393,10 +413,10 @@ class SiSelectListBase {
             this.closeOverlayAlways();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectListBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiSelectListBase, isStandalone: true, inputs: { baseId: { classPropertyName: "baseId", publicName: "baseId", isSignal: true, isRequired: true, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, groupTemplate: { classPropertyName: "groupTemplate", publicName: "groupTemplate", isSignal: true, isRequired: false, transformFunction: null }, labelledby: { classPropertyName: "labelledby", publicName: "labelledby", isSignal: true, isRequired: false, transformFunction: null }, actionsTemplate: { classPropertyName: "actionsTemplate", publicName: "actionsTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeOverlay: "closeOverlay" }, host: { listeners: { "keydown.tab": "keydownTab()" }, properties: { "class.si-multi-select": "multiSelect" }, classAttribute: "dropdown-menu position-static w-100 py-4 d-flex flex-column" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectListBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SiSelectListBase, isStandalone: true, inputs: { baseId: { classPropertyName: "baseId", publicName: "baseId", isSignal: true, isRequired: true, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, groupTemplate: { classPropertyName: "groupTemplate", publicName: "groupTemplate", isSignal: true, isRequired: false, transformFunction: null }, labelledby: { classPropertyName: "labelledby", publicName: "labelledby", isSignal: true, isRequired: false, transformFunction: null }, actionsTemplate: { classPropertyName: "actionsTemplate", publicName: "actionsTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeOverlay: "closeOverlay" }, host: { listeners: { "keydown.tab": "keydownTab()" }, properties: { "class.si-multi-select": "multiSelect" }, classAttribute: "dropdown-menu position-static w-100 py-4 d-flex flex-column" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectListBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectListBase, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -413,12 +433,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  */
 class SiSelectListHasFilterComponent extends SiSelectListBase {
     /** Placeholder for search input field. */
-    filterPlaceholder = input.required(...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : []));
+    filterPlaceholder = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
     /** Label if no item can be found. */
-    noResultsFoundLabel = input.required(...(ngDevMode ? [{ debugName: "noResultsFoundLabel" }] : []));
-    filterInput = viewChild.required('filter');
+    noResultsFoundLabel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "noResultsFoundLabel" }] : /* istanbul ignore next */ []));
+    filterInput = viewChild.required('filter', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterInput" }] : /* istanbul ignore next */ []));
     initIndex;
-    id = computed(() => `${this.baseId()}-listbox`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    id = computed(() => `${this.baseId()}-listbox`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     icons = addIcons({ elementSearch });
     constructor() {
         super();
@@ -427,10 +451,12 @@ class SiSelectListHasFilterComponent extends SiSelectListBase {
         }
         const firstValue = this.selectionStrategy.arrayValue()[0];
         if (firstValue) {
-            this.initIndex = computed(() => this.rows().findIndex(row => row.type === 'option' && row.value === firstValue), ...(ngDevMode ? [{ debugName: "initIndex" }] : []));
+            this.initIndex = computed(() => this.rows().findIndex(row => row.type === 'option' && row.value === firstValue), /* @ts-ignore */
+            ...(ngDevMode ? [{ debugName: "initIndex" }] : /* istanbul ignore next */ []));
         }
         else {
-            this.initIndex = signal(0, ...(ngDevMode ? [{ debugName: "initIndex" }] : []));
+            this.initIndex = signal(0, /* @ts-ignore */
+            ...(ngDevMode ? [{ debugName: "initIndex" }] : /* istanbul ignore next */ []));
         }
     }
     ngOnInit() {
@@ -455,10 +481,10 @@ class SiSelectListHasFilterComponent extends SiSelectListBase {
         }
         this.closeOverlayIfSingle();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectListHasFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSelectListHasFilterComponent, isStandalone: true, selector: "si-select-list-has-filter", inputs: { filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: true, transformFunction: null }, noResultsFoundLabel: { classPropertyName: "noResultsFoundLabel", publicName: "noResultsFoundLabel", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.id": "id()" }, classAttribute: "pt-0" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filter"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"pt-5 pb-5 px-5 top-0\">\n  <div class=\"position-relative\">\n    <input\n      #filter\n      #siAutocomplete=\"siAutocomplete\"\n      siAutocomplete\n      class=\"form-control icon-start border-0 rounded-2 bg-base-0\"\n      [placeholder]=\"filterPlaceholder() | translate\"\n      [id]=\"baseId() + 'filter-input'\"\n      [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n      (input)=\"input()\"\n    />\n    <si-icon\n      class=\"icon text-secondary position-absolute top-0 bottom-0 d-flex align-items-center ps-2\"\n      [icon]=\"icons.elementSearch\"\n    />\n    @if (selectOptions.loading?.()) {\n      <si-loading-spinner class=\"position-absolute end-0 bottom-0 d-flex align-items-center p-2\" />\n    }\n  </div>\n</div>\n<div\n  class=\"si-select-filtered-items\"\n  tabindex=\"-1\"\n  [siAutocompleteListboxFor]=\"siAutocomplete\"\n  [siAutocompleteDefaultIndex]=\"initIndex()\"\n  [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n  (siAutocompleteOptionSubmitted)=\"select($event)\"\n>\n  @for (item of rows(); track item; let index = $index) {\n    @if (item.type === 'group') {\n      <div\n        role=\"group\"\n        class=\"ps-0\"\n        aria-disabled=\"false\"\n        [attr.aria-labelledby]=\"baseId() + '-' + index + '-group-header'\"\n      >\n        <div class=\"dropdown-header\" [id]=\"baseId() + '-' + index + '-group-header'\">\n          <ng-container\n            [ngTemplateOutlet]=\"groupTemplate() ?? defaultGroupTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          />\n        </div>\n        @for (optionRow of item.options; track optionRow) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionRowTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionRow }\"\n          />\n        }\n      </div>\n    }\n    @if (item.type === 'option') {\n      <ng-container\n        [ngTemplateOutlet]=\"optionRowTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      />\n    }\n  } @empty {\n    <div\n      role=\"option\"\n      aria-disabled=\"true\"\n      aria-selected=\"false\"\n      class=\"dropdown-item disabled text-secondary justify-content-center mb-2\"\n    >\n      <span>{{ noResultsFoundLabel() | translate }}</span>\n    </div>\n  }\n\n  <ng-template #optionRowTemplate let-option siSelectOptionRowTemplate>\n    <si-select-option-row\n      [option]=\"option\"\n      [optionTemplate]=\"optionTemplate()\"\n      [siAutocompleteOption]=\"option.value\"\n      [disabled]=\"option.disabled\"\n      [selected]=\"selectionStrategy.arrayValue().includes(option.value)\"\n    />\n  </ng-template>\n</div>\n@if (actionsTemplate()) {\n  <div class=\"dropdown-divider\"></div>\n  <div class=\"d-flex flex-column align-items-start\">\n    <ng-container\n      [ngTemplateOutlet]=\"actionsTemplate()!\"\n      [ngTemplateOutletContext]=\"{\n        searchText: filter.value,\n        visibleOptionsCount: rows().length\n      }\"\n    />\n  </div>\n}\n\n<ng-template #defaultGroupTemplate let-group siSelectGroupTemplate>\n  {{ group.label | translate }}\n</ng-template>\n", styles: [".si-select-filtered-items{max-block-size:min(100vb - 56px,266px);overflow-y:auto}si-loading-spinner{--loading-spinner-size: 1.25rem}.icon-start{padding-inline-start:calc(1.25rem + 12px)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SiAutocompleteDirective, selector: "input[siAutocomplete]", exportAs: ["siAutocomplete"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiSelectGroupTemplateDirective, selector: "[siSelectGroupTemplate]" }, { kind: "component", type: SiSelectOptionRowComponent, selector: "si-select-option-row", inputs: ["option", "optionTemplate", "selected"] }, { kind: "directive", type: SiSelectOptionRowTemplateDirective, selector: "[siSelectOptionRowTemplate]" }, { kind: "ngmodule", type: SiAutocompleteModule }, { kind: "directive", type: i1$1.SiAutocompleteListboxDirective, selector: "[siAutocompleteListboxFor]", inputs: ["id", "siAutocompleteListboxFor", "siAutocompleteDefaultIndex"], outputs: ["siAutocompleteOptionSubmitted"], exportAs: ["siAutocompleteListbox"] }, { kind: "directive", type: i1$1.SiAutocompleteOptionDirective, selector: "[siAutocompleteOption]", inputs: ["id", "disabled", "siAutocompleteOption"], exportAs: ["siAutocompleteOption"] }, { kind: "component", type: SiLoadingSpinnerComponent, selector: "si-loading-spinner", inputs: ["isBlockingSpinner", "isSpinnerOverlay", "ariaLabel"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectListHasFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiSelectListHasFilterComponent, isStandalone: true, selector: "si-select-list-has-filter", inputs: { filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: true, transformFunction: null }, noResultsFoundLabel: { classPropertyName: "noResultsFoundLabel", publicName: "noResultsFoundLabel", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.id": "id()" }, classAttribute: "pt-0" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filter"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"pt-5 pb-5 px-5 top-0\">\n  <div class=\"search-bar variant-background-0\">\n    <input\n      #filter\n      #siAutocomplete=\"siAutocomplete\"\n      siAutocomplete\n      class=\"search-bar-input form-control\"\n      [placeholder]=\"filterPlaceholder() | translate\"\n      [id]=\"baseId() + 'filter-input'\"\n      [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n      (input)=\"input()\"\n    />\n    <si-icon class=\"search-bar-icon\" [icon]=\"icons.elementSearch\" />\n    @if (selectOptions.loading?.()) {\n      <si-loading-spinner class=\"position-absolute end-0 bottom-0 d-flex align-items-center p-2\" />\n    }\n  </div>\n</div>\n<div\n  class=\"si-select-filtered-items\"\n  tabindex=\"-1\"\n  [siAutocompleteListboxFor]=\"siAutocomplete\"\n  [siAutocompleteDefaultIndex]=\"initIndex()\"\n  [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n  (siAutocompleteOptionSubmitted)=\"select($event)\"\n>\n  @for (item of rows(); track item; let index = $index) {\n    @if (item.type === 'group') {\n      <div\n        role=\"group\"\n        class=\"ps-0\"\n        aria-disabled=\"false\"\n        [attr.aria-labelledby]=\"baseId() + '-' + index + '-group-header'\"\n      >\n        <div class=\"dropdown-header\" [id]=\"baseId() + '-' + index + '-group-header'\">\n          <ng-container\n            [ngTemplateOutlet]=\"groupTemplate() ?? defaultGroupTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          />\n        </div>\n        @for (optionRow of item.options; track optionRow) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionRowTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionRow }\"\n          />\n        }\n      </div>\n    }\n    @if (item.type === 'option') {\n      <ng-container\n        [ngTemplateOutlet]=\"optionRowTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      />\n    }\n  } @empty {\n    <div\n      role=\"option\"\n      aria-disabled=\"true\"\n      aria-selected=\"false\"\n      class=\"dropdown-item disabled text-secondary justify-content-center mb-2\"\n    >\n      <span>{{ noResultsFoundLabel() | translate }}</span>\n    </div>\n  }\n\n  <ng-template #optionRowTemplate let-option siSelectOptionRowTemplate>\n    <si-select-option-row\n      [option]=\"option\"\n      [optionTemplate]=\"optionTemplate()\"\n      [siAutocompleteOption]=\"option.value\"\n      [disabled]=\"option.disabled\"\n      [selected]=\"selectionStrategy.arrayValue().includes(option.value)\"\n    />\n  </ng-template>\n</div>\n@if (actionsTemplate()) {\n  <div class=\"dropdown-divider\"></div>\n  <div class=\"d-flex flex-column align-items-start\">\n    <ng-container\n      [ngTemplateOutlet]=\"actionsTemplate()!\"\n      [ngTemplateOutletContext]=\"{\n        searchText: filter.value,\n        visibleOptionsCount: rows().length\n      }\"\n    />\n  </div>\n}\n\n<ng-template #defaultGroupTemplate let-group siSelectGroupTemplate>\n  {{ group.label | translate }}\n</ng-template>\n", styles: [".si-select-filtered-items{max-block-size:min(100vb - 56px,266px);overflow-y:auto}si-loading-spinner{--loading-spinner-size: var(--si-sys-sizing-icon-md)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SiAutocompleteDirective, selector: "input[siAutocomplete]", exportAs: ["siAutocomplete"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiSelectGroupTemplateDirective, selector: "[siSelectGroupTemplate]" }, { kind: "component", type: SiSelectOptionRowComponent, selector: "si-select-option-row", inputs: ["option", "optionTemplate", "selected"] }, { kind: "directive", type: SiSelectOptionRowTemplateDirective, selector: "[siSelectOptionRowTemplate]" }, { kind: "ngmodule", type: SiAutocompleteModule }, { kind: "directive", type: i1$1.SiAutocompleteListboxDirective, selector: "[siAutocompleteListboxFor]", inputs: ["id", "siAutocompleteListboxFor", "siAutocompleteDefaultIndex"], outputs: ["siAutocompleteOptionSubmitted"], exportAs: ["siAutocompleteListbox"] }, { kind: "directive", type: i1$1.SiAutocompleteOptionDirective, selector: "[siAutocompleteOption]", inputs: ["id", "disabled", "siAutocompleteOption"], exportAs: ["siAutocompleteOption"] }, { kind: "component", type: SiLoadingSpinnerComponent, selector: "si-loading-spinner", inputs: ["isBlockingSpinner", "isSpinnerOverlay", "ariaLabel"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectListHasFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectListHasFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-select-list-has-filter', imports: [
                         NgTemplateOutlet,
@@ -470,10 +496,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiTranslatePipe,
                         SiAutocompleteModule,
                         SiLoadingSpinnerComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                    ], host: {
                         class: 'pt-0',
                         '[attr.id]': 'id()'
-                    }, template: "<div class=\"pt-5 pb-5 px-5 top-0\">\n  <div class=\"position-relative\">\n    <input\n      #filter\n      #siAutocomplete=\"siAutocomplete\"\n      siAutocomplete\n      class=\"form-control icon-start border-0 rounded-2 bg-base-0\"\n      [placeholder]=\"filterPlaceholder() | translate\"\n      [id]=\"baseId() + 'filter-input'\"\n      [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n      (input)=\"input()\"\n    />\n    <si-icon\n      class=\"icon text-secondary position-absolute top-0 bottom-0 d-flex align-items-center ps-2\"\n      [icon]=\"icons.elementSearch\"\n    />\n    @if (selectOptions.loading?.()) {\n      <si-loading-spinner class=\"position-absolute end-0 bottom-0 d-flex align-items-center p-2\" />\n    }\n  </div>\n</div>\n<div\n  class=\"si-select-filtered-items\"\n  tabindex=\"-1\"\n  [siAutocompleteListboxFor]=\"siAutocomplete\"\n  [siAutocompleteDefaultIndex]=\"initIndex()\"\n  [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n  (siAutocompleteOptionSubmitted)=\"select($event)\"\n>\n  @for (item of rows(); track item; let index = $index) {\n    @if (item.type === 'group') {\n      <div\n        role=\"group\"\n        class=\"ps-0\"\n        aria-disabled=\"false\"\n        [attr.aria-labelledby]=\"baseId() + '-' + index + '-group-header'\"\n      >\n        <div class=\"dropdown-header\" [id]=\"baseId() + '-' + index + '-group-header'\">\n          <ng-container\n            [ngTemplateOutlet]=\"groupTemplate() ?? defaultGroupTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          />\n        </div>\n        @for (optionRow of item.options; track optionRow) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionRowTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionRow }\"\n          />\n        }\n      </div>\n    }\n    @if (item.type === 'option') {\n      <ng-container\n        [ngTemplateOutlet]=\"optionRowTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      />\n    }\n  } @empty {\n    <div\n      role=\"option\"\n      aria-disabled=\"true\"\n      aria-selected=\"false\"\n      class=\"dropdown-item disabled text-secondary justify-content-center mb-2\"\n    >\n      <span>{{ noResultsFoundLabel() | translate }}</span>\n    </div>\n  }\n\n  <ng-template #optionRowTemplate let-option siSelectOptionRowTemplate>\n    <si-select-option-row\n      [option]=\"option\"\n      [optionTemplate]=\"optionTemplate()\"\n      [siAutocompleteOption]=\"option.value\"\n      [disabled]=\"option.disabled\"\n      [selected]=\"selectionStrategy.arrayValue().includes(option.value)\"\n    />\n  </ng-template>\n</div>\n@if (actionsTemplate()) {\n  <div class=\"dropdown-divider\"></div>\n  <div class=\"d-flex flex-column align-items-start\">\n    <ng-container\n      [ngTemplateOutlet]=\"actionsTemplate()!\"\n      [ngTemplateOutletContext]=\"{\n        searchText: filter.value,\n        visibleOptionsCount: rows().length\n      }\"\n    />\n  </div>\n}\n\n<ng-template #defaultGroupTemplate let-group siSelectGroupTemplate>\n  {{ group.label | translate }}\n</ng-template>\n", styles: [".si-select-filtered-items{max-block-size:min(100vb - 56px,266px);overflow-y:auto}si-loading-spinner{--loading-spinner-size: 1.25rem}.icon-start{padding-inline-start:calc(1.25rem + 12px)}\n"] }]
+                    }, template: "<div class=\"pt-5 pb-5 px-5 top-0\">\n  <div class=\"search-bar variant-background-0\">\n    <input\n      #filter\n      #siAutocomplete=\"siAutocomplete\"\n      siAutocomplete\n      class=\"search-bar-input form-control\"\n      [placeholder]=\"filterPlaceholder() | translate\"\n      [id]=\"baseId() + 'filter-input'\"\n      [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n      (input)=\"input()\"\n    />\n    <si-icon class=\"search-bar-icon\" [icon]=\"icons.elementSearch\" />\n    @if (selectOptions.loading?.()) {\n      <si-loading-spinner class=\"position-absolute end-0 bottom-0 d-flex align-items-center p-2\" />\n    }\n  </div>\n</div>\n<div\n  class=\"si-select-filtered-items\"\n  tabindex=\"-1\"\n  [siAutocompleteListboxFor]=\"siAutocomplete\"\n  [siAutocompleteDefaultIndex]=\"initIndex()\"\n  [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n  (siAutocompleteOptionSubmitted)=\"select($event)\"\n>\n  @for (item of rows(); track item; let index = $index) {\n    @if (item.type === 'group') {\n      <div\n        role=\"group\"\n        class=\"ps-0\"\n        aria-disabled=\"false\"\n        [attr.aria-labelledby]=\"baseId() + '-' + index + '-group-header'\"\n      >\n        <div class=\"dropdown-header\" [id]=\"baseId() + '-' + index + '-group-header'\">\n          <ng-container\n            [ngTemplateOutlet]=\"groupTemplate() ?? defaultGroupTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          />\n        </div>\n        @for (optionRow of item.options; track optionRow) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionRowTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionRow }\"\n          />\n        }\n      </div>\n    }\n    @if (item.type === 'option') {\n      <ng-container\n        [ngTemplateOutlet]=\"optionRowTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      />\n    }\n  } @empty {\n    <div\n      role=\"option\"\n      aria-disabled=\"true\"\n      aria-selected=\"false\"\n      class=\"dropdown-item disabled text-secondary justify-content-center mb-2\"\n    >\n      <span>{{ noResultsFoundLabel() | translate }}</span>\n    </div>\n  }\n\n  <ng-template #optionRowTemplate let-option siSelectOptionRowTemplate>\n    <si-select-option-row\n      [option]=\"option\"\n      [optionTemplate]=\"optionTemplate()\"\n      [siAutocompleteOption]=\"option.value\"\n      [disabled]=\"option.disabled\"\n      [selected]=\"selectionStrategy.arrayValue().includes(option.value)\"\n    />\n  </ng-template>\n</div>\n@if (actionsTemplate()) {\n  <div class=\"dropdown-divider\"></div>\n  <div class=\"d-flex flex-column align-items-start\">\n    <ng-container\n      [ngTemplateOutlet]=\"actionsTemplate()!\"\n      [ngTemplateOutletContext]=\"{\n        searchText: filter.value,\n        visibleOptionsCount: rows().length\n      }\"\n    />\n  </div>\n}\n\n<ng-template #defaultGroupTemplate let-group siSelectGroupTemplate>\n  {{ group.label | translate }}\n</ng-template>\n", styles: [".si-select-filtered-items{max-block-size:min(100vb - 56px,266px);overflow-y:auto}si-loading-spinner{--loading-spinner-size: var(--si-sys-sizing-icon-md)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: true }] }], noResultsFoundLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsFoundLabel", required: true }] }], filterInput: [{ type: i0.ViewChild, args: ['filter', { isSignal: true }] }] } });
 
 /**
@@ -481,9 +507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiSelectListComponent extends SiSelectListBase {
-    listbox = viewChild.required(CdkListbox, {
-        read: ElementRef
-    });
+    listbox = viewChild.required(CdkListbox, { ...(ngDevMode ? { debugName: "listbox" } : /* istanbul ignore next */ {}), read: ElementRef });
     ngOnInit() {
         super.ngOnInit();
         setTimeout(() => this.listbox().nativeElement.focus());
@@ -491,10 +515,10 @@ class SiSelectListComponent extends SiSelectListBase {
     listBoxValueChange(changeEvent) {
         this.selectionStrategy.updateFromUser(changeEvent.value.slice());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSelectListComponent, isStandalone: true, selector: "si-select-list", viewQueries: [{ propertyName: "listbox", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  cdkListbox\n  class=\"dropdown-menu-scroller focus-none\"\n  [id]=\"baseId() + '-listbox'\"\n  [cdkListboxMultiple]=\"selectionStrategy.allowMultiple\"\n  [cdkListboxValue]=\"selectionStrategy.arrayValue()\"\n  [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n  (cdkListboxValueChange)=\"listBoxValueChange($event)\"\n  (click)=\"closeOverlayIfSingle()\"\n  (keydown.enter)=\"closeOverlayIfSingle()\"\n  (keydown.space)=\"closeOverlayIfSingle()\"\n>\n  @for (item of rows(); track item; let index = $index) {\n    @if (item.type === 'group') {\n      <div\n        role=\"group\"\n        class=\"ps-0\"\n        aria-disabled=\"false\"\n        [attr.aria-labelledby]=\"baseId() + '-' + index + '-group-header'\"\n      >\n        <span class=\"dropdown-header\" [id]=\"baseId() + '-' + index + '-group-header'\">\n          <ng-container\n            [ngTemplateOutlet]=\"groupTemplate() ?? defaultGroupTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          />\n        </span>\n        @for (optionRow of item.options; track optionRow) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionRowTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionRow }\"\n          />\n        }\n      </div>\n    }\n    @if (item.type === 'option') {\n      <ng-container\n        [ngTemplateOutlet]=\"optionRowTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      />\n    }\n  }\n  <ng-template #optionRowTemplate let-option siSelectOptionRowTemplate>\n    <si-select-option-row\n      #cdkOption=\"cdkOption\"\n      [option]=\"option\"\n      [optionTemplate]=\"optionTemplate()\"\n      [cdkOption]=\"option.value\"\n      [cdkOptionDisabled]=\"!!option.disabled\"\n      [cdkOptionTypeaheadLabel]=\"(option.typeaheadLabel | translate)!\"\n      [class.active]=\"cdkOption.isActive()\"\n      [selected]=\"cdkOption.isSelected()\"\n    />\n  </ng-template>\n</div>\n@if (actionsTemplate()) {\n  <div class=\"dropdown-divider\"></div>\n  <div class=\"d-flex flex-column align-items-start\">\n    <ng-container [ngTemplateOutlet]=\"actionsTemplate()!\" />\n  </div>\n}\n\n<ng-template #defaultGroupTemplate let-group siSelectGroupTemplate>\n  {{ group.label | translate }}\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: SiSelectOptionRowTemplateDirective, selector: "[siSelectOptionRowTemplate]" }, { kind: "directive", type: SiSelectGroupTemplateDirective, selector: "[siSelectGroupTemplate]" }, { kind: "component", type: SiSelectOptionRowComponent, selector: "si-select-option-row", inputs: ["option", "optionTemplate", "selected"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiSelectListComponent, isStandalone: true, selector: "si-select-list", viewQueries: [{ propertyName: "listbox", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  cdkListbox\n  class=\"dropdown-menu-scroller focus-none\"\n  [id]=\"baseId() + '-listbox'\"\n  [cdkListboxMultiple]=\"selectionStrategy.allowMultiple\"\n  [cdkListboxValue]=\"selectionStrategy.arrayValue()\"\n  [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n  (cdkListboxValueChange)=\"listBoxValueChange($event)\"\n  (click)=\"closeOverlayIfSingle()\"\n  (keydown.enter)=\"closeOverlayIfSingle()\"\n  (keydown.space)=\"closeOverlayIfSingle()\"\n>\n  @for (item of rows(); track item; let index = $index) {\n    @if (item.type === 'group') {\n      <div\n        role=\"group\"\n        class=\"ps-0\"\n        aria-disabled=\"false\"\n        [attr.aria-labelledby]=\"baseId() + '-' + index + '-group-header'\"\n      >\n        <span class=\"dropdown-header\" [id]=\"baseId() + '-' + index + '-group-header'\">\n          <ng-container\n            [ngTemplateOutlet]=\"groupTemplate() ?? defaultGroupTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          />\n        </span>\n        @for (optionRow of item.options; track optionRow) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionRowTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionRow }\"\n          />\n        }\n      </div>\n    }\n    @if (item.type === 'option') {\n      <ng-container\n        [ngTemplateOutlet]=\"optionRowTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      />\n    }\n  }\n  <ng-template #optionRowTemplate let-option siSelectOptionRowTemplate>\n    <si-select-option-row\n      #cdkOption=\"cdkOption\"\n      [option]=\"option\"\n      [optionTemplate]=\"optionTemplate()\"\n      [cdkOption]=\"option.value\"\n      [cdkOptionDisabled]=\"!!option.disabled\"\n      [cdkOptionTypeaheadLabel]=\"(option.typeaheadLabel | translate)!\"\n      [class.active]=\"cdkOption.isActive()\"\n      [selected]=\"cdkOption.isSelected()\"\n    />\n  </ng-template>\n</div>\n@if (actionsTemplate()) {\n  <div class=\"dropdown-divider\"></div>\n  <div class=\"d-flex flex-column align-items-start\">\n    <ng-container [ngTemplateOutlet]=\"actionsTemplate()!\" />\n  </div>\n}\n\n<ng-template #defaultGroupTemplate let-group siSelectGroupTemplate>\n  {{ group.label | translate }}\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: SiSelectOptionRowTemplateDirective, selector: "[siSelectOptionRowTemplate]" }, { kind: "directive", type: SiSelectGroupTemplateDirective, selector: "[siSelectGroupTemplate]" }, { kind: "component", type: SiSelectOptionRowComponent, selector: "si-select-option-row", inputs: ["option", "optionTemplate", "selected"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-select-list', imports: [
                         CommonModule,
@@ -504,7 +528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiSelectOptionRowTemplateDirective,
                         SiSelectGroupTemplateDirective,
                         SiSelectOptionRowComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  cdkListbox\n  class=\"dropdown-menu-scroller focus-none\"\n  [id]=\"baseId() + '-listbox'\"\n  [cdkListboxMultiple]=\"selectionStrategy.allowMultiple\"\n  [cdkListboxValue]=\"selectionStrategy.arrayValue()\"\n  [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n  (cdkListboxValueChange)=\"listBoxValueChange($event)\"\n  (click)=\"closeOverlayIfSingle()\"\n  (keydown.enter)=\"closeOverlayIfSingle()\"\n  (keydown.space)=\"closeOverlayIfSingle()\"\n>\n  @for (item of rows(); track item; let index = $index) {\n    @if (item.type === 'group') {\n      <div\n        role=\"group\"\n        class=\"ps-0\"\n        aria-disabled=\"false\"\n        [attr.aria-labelledby]=\"baseId() + '-' + index + '-group-header'\"\n      >\n        <span class=\"dropdown-header\" [id]=\"baseId() + '-' + index + '-group-header'\">\n          <ng-container\n            [ngTemplateOutlet]=\"groupTemplate() ?? defaultGroupTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          />\n        </span>\n        @for (optionRow of item.options; track optionRow) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionRowTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionRow }\"\n          />\n        }\n      </div>\n    }\n    @if (item.type === 'option') {\n      <ng-container\n        [ngTemplateOutlet]=\"optionRowTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      />\n    }\n  }\n  <ng-template #optionRowTemplate let-option siSelectOptionRowTemplate>\n    <si-select-option-row\n      #cdkOption=\"cdkOption\"\n      [option]=\"option\"\n      [optionTemplate]=\"optionTemplate()\"\n      [cdkOption]=\"option.value\"\n      [cdkOptionDisabled]=\"!!option.disabled\"\n      [cdkOptionTypeaheadLabel]=\"(option.typeaheadLabel | translate)!\"\n      [class.active]=\"cdkOption.isActive()\"\n      [selected]=\"cdkOption.isSelected()\"\n    />\n  </ng-template>\n</div>\n@if (actionsTemplate()) {\n  <div class=\"dropdown-divider\"></div>\n  <div class=\"d-flex flex-column align-items-start\">\n    <ng-container [ngTemplateOutlet]=\"actionsTemplate()!\" />\n  </div>\n}\n\n<ng-template #defaultGroupTemplate let-group siSelectGroupTemplate>\n  {{ group.label | translate }}\n</ng-template>\n" }]
+                    ], template: "<div\n  cdkListbox\n  class=\"dropdown-menu-scroller focus-none\"\n  [id]=\"baseId() + '-listbox'\"\n  [cdkListboxMultiple]=\"selectionStrategy.allowMultiple\"\n  [cdkListboxValue]=\"selectionStrategy.arrayValue()\"\n  [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n  (cdkListboxValueChange)=\"listBoxValueChange($event)\"\n  (click)=\"closeOverlayIfSingle()\"\n  (keydown.enter)=\"closeOverlayIfSingle()\"\n  (keydown.space)=\"closeOverlayIfSingle()\"\n>\n  @for (item of rows(); track item; let index = $index) {\n    @if (item.type === 'group') {\n      <div\n        role=\"group\"\n        class=\"ps-0\"\n        aria-disabled=\"false\"\n        [attr.aria-labelledby]=\"baseId() + '-' + index + '-group-header'\"\n      >\n        <span class=\"dropdown-header\" [id]=\"baseId() + '-' + index + '-group-header'\">\n          <ng-container\n            [ngTemplateOutlet]=\"groupTemplate() ?? defaultGroupTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          />\n        </span>\n        @for (optionRow of item.options; track optionRow) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionRowTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionRow }\"\n          />\n        }\n      </div>\n    }\n    @if (item.type === 'option') {\n      <ng-container\n        [ngTemplateOutlet]=\"optionRowTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      />\n    }\n  }\n  <ng-template #optionRowTemplate let-option siSelectOptionRowTemplate>\n    <si-select-option-row\n      #cdkOption=\"cdkOption\"\n      [option]=\"option\"\n      [optionTemplate]=\"optionTemplate()\"\n      [cdkOption]=\"option.value\"\n      [cdkOptionDisabled]=\"!!option.disabled\"\n      [cdkOptionTypeaheadLabel]=\"(option.typeaheadLabel | translate)!\"\n      [class.active]=\"cdkOption.isActive()\"\n      [selected]=\"cdkOption.isSelected()\"\n    />\n  </ng-template>\n</div>\n@if (actionsTemplate()) {\n  <div class=\"dropdown-divider\"></div>\n  <div class=\"d-flex flex-column align-items-start\">\n    <ng-container [ngTemplateOutlet]=\"actionsTemplate()!\" />\n  </div>\n}\n\n<ng-template #defaultGroupTemplate let-group siSelectGroupTemplate>\n  {{ group.label | translate }}\n</ng-template>\n" }]
         }], propDecorators: { listbox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { ...{
                             read: ElementRef
                         }, isSignal: true }] }] } });
@@ -518,10 +542,10 @@ class SiSelectActionsDirective {
     static ngTemplateContextGuard(directive, context) {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiSelectActionsDirective, isStandalone: true, selector: "[siSelectActions]", exportAs: ["si-select-actions"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SiSelectActionsDirective, isStandalone: true, selector: "[siSelectActions]", exportAs: ["si-select-actions"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siSelectActions]',
@@ -529,6 +553,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 }]
         }] });
 
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * The directive allows to template/customize the selected value rendering in the select input.
+ * This requires using the {@link SiSelectSimpleOptionsDirective} to specify options as input.
+ *
+ * @example
+ * ```html
+ * <si-select [options]="[
+ *   { type: 'option', value: 'good', label: 'Good' },
+ *   { type: 'option', value: 'fair', label: 'Fair' }
+ * ]">
+ *   <ng-template siSelectValueTemplate let-option>{{ option.label }}</ng-template>
+ * </si-select>
+ * ```
+ */
+class SiSelectValueTemplateDirective {
+    /** @internal */
+    static ngTemplateContextGuard(directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectValueTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SiSelectValueTemplateDirective, isStandalone: true, selector: "[siSelectValueTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectValueTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siSelectValueTemplate]'
+                }]
+        }] });
+
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
@@ -543,28 +600,31 @@ class SiSelectComponent {
      * `__si-select-${SiSelectComponent.idCounter++}`
      * ```
      */
-    id = input(`__si-select-${SiSelectComponent.idCounter++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    id = input(`__si-select-${SiSelectComponent.idCounter++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     /**
      * Aria label of the select.
      *
      * @defaultValue null
      */
-    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     /**
      * Aria labelledby of the select.
      * @defaultValue undefined
      */
     // eslint-disable-next-line @angular-eslint/no-input-rename
-    labelledbyInput = input(undefined, { ...(ngDevMode ? { debugName: "labelledbyInput" } : {}), alias: 'labelledby' });
+    labelledbyInput = input(undefined, { ...(ngDevMode ? { debugName: "labelledbyInput" } : /* istanbul ignore next */ {}), alias: 'labelledby' });
     /**
      * Placeholder for search input field.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_SELECT.SEARCH-PLACEHOLDER:Search...`)
+     * t(() => $localize`:@@SI_SELECT.SEARCH-PLACEHOLDER:Search…`)
      * ```
      */
-    filterPlaceholder = input(t(() => $localize `:@@SI_SELECT.SEARCH-PLACEHOLDER:Search...`), ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : []));
+    filterPlaceholder = input(t(() => $localize `:@@SI_SELECT.SEARCH-PLACEHOLDER:Search…`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
     /**
      * Label if no item can be found.
      *
@@ -573,32 +633,36 @@ class SiSelectComponent {
      * t(() => $localize`:@@SI_SELECT.NO-RESULTS-FOUND:No results found`)
      * ```
      */
-    noResultsFoundLabel = input(t(() => $localize `:@@SI_SELECT.NO-RESULTS-FOUND:No results found`), ...(ngDevMode ? [{ debugName: "noResultsFoundLabel" }] : []));
+    noResultsFoundLabel = input(t(() => $localize `:@@SI_SELECT.NO-RESULTS-FOUND:No results found`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "noResultsFoundLabel" }] : /* istanbul ignore next */ []));
     /** Placeholder text to display when no options are selected. */
-    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /**
      * Readonly state. Similar to disabled but with higher contrast *
      *
      * @defaultValue false
      */
-    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Optional CDK scroll strategy used for the select overlay.
      *
      * @defaultValue defaultConnectedOverlayScrollStrategy()
      */
-    scrollStrategy = input(defaultConnectedOverlayScrollStrategy(), ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : []));
+    scrollStrategy = input(defaultConnectedOverlayScrollStrategy(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
     /** Emits when the dropdown open state changes. */
     openChange = output();
-    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-    optionTemplate = contentChild(SiSelectOptionTemplateDirective, { ...(ngDevMode ? { debugName: "optionTemplate" } : {}), read: TemplateRef });
-    groupTemplate = contentChild(SiSelectGroupTemplateDirective, { ...(ngDevMode ? { debugName: "groupTemplate" } : {}), read: TemplateRef });
-    actionsTemplate = contentChild(SiSelectActionsDirective, { ...(ngDevMode ? { debugName: "actionsTemplate" } : {}), read: TemplateRef });
-    trigger = viewChild.required(CdkOverlayOrigin, {
-        read: ElementRef
-    });
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    optionTemplate = contentChild(SiSelectOptionTemplateDirective, { ...(ngDevMode ? { debugName: "optionTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    selectedValueTemplate = contentChild(SiSelectValueTemplateDirective, { ...(ngDevMode ? { debugName: "selectedValueTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    groupTemplate = contentChild(SiSelectGroupTemplateDirective, { ...(ngDevMode ? { debugName: "groupTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    actionsTemplate = contentChild(SiSelectActionsDirective, { ...(ngDevMode ? { debugName: "actionsTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    trigger = viewChild.required(CdkOverlayOrigin, { ...(ngDevMode ? { debugName: "trigger" } : /* istanbul ignore next */ {}), read: ElementRef });
     /** @internal */
-    labelledby = computed(() => this.labelledbyInput() ?? this.id() + '-label', ...(ngDevMode ? [{ debugName: "labelledby" }] : []));
+    labelledby = computed(() => this.labelledbyInput() ?? this.id() + '-label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledby" }] : /* istanbul ignore next */ []));
     /**
      * This ID will be bound to the `aria-describedby` attribute of the select.
      * Use this to reference the element containing the error message(s) for the select.
@@ -609,7 +673,8 @@ class SiSelectComponent {
      * `${this.id()}-errormessage`
      * ```
      */
-    errormessageId = input(`${this.id()}-errormessage`, ...(ngDevMode ? [{ debugName: "errormessageId" }] : []));
+    errormessageId = input(`${this.id()}-errormessage`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errormessageId" }] : /* istanbul ignore next */ []));
     rows = [];
     overlayWidth = 0;
     selectionStrategy = inject((SiSelectSelectionStrategy));
@@ -619,7 +684,7 @@ class SiSelectComponent {
      * @defaultValue false
      * @defaultref {@link SiSelectComponent#_hasFilter}
      */
-    hasFilter = input(false, { ...(ngDevMode ? { debugName: "hasFilter" } : {}), transform: booleanAttribute });
+    hasFilter = input(false, { ...(ngDevMode ? { debugName: "hasFilter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Opens the `si-select`. */
     open() {
         if (this.readonly() || this.selectionStrategy.disabled()) {
@@ -645,23 +710,23 @@ class SiSelectComponent {
         this.backdropClicked = true;
         this.isOpen.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSelectComponent, isStandalone: true, selector: "si-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledbyInput: { classPropertyName: "labelledbyInput", publicName: "labelledby", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsFoundLabel: { classPropertyName: "noResultsFoundLabel", publicName: "noResultsFoundLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, errormessageId: { classPropertyName: "errormessageId", publicName: "errormessageId", isSignal: true, isRequired: false, transformFunction: null }, hasFilter: { classPropertyName: "hasFilter", publicName: "hasFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, host: { properties: { "class.readonly": "readonly()", "class.open": "isOpen()", "class.si-select-has-filter": "hasFilter()" }, classAttribute: "dropdown" }, providers: [{ provide: SI_FORM_ITEM_CONTROL, useExisting: SiSelectComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: SiSelectOptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: SiSelectGroupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "actionsTemplate", first: true, predicate: SiSelectActionsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<si-select-input\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  [baseId]=\"id()\"\n  [labelledby]=\"labelledby()\"\n  [optionTemplate]=\"optionTemplate()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [controls]=\"id() + '-listbox'\"\n  [open]=\"isOpen()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"readonly()\"\n  [attr.aria-describedby]=\"errormessageId()\"\n  (openListbox)=\"open()\"\n/>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayOffsetX]=\"-1\"\n  [cdkConnectedOverlayMinWidth]=\"overlayWidth\"\n  (backdropClick)=\"backdropClick()\"\n  (detach)=\"close()\"\n>\n  @if (!hasFilter()) {\n    <si-select-list\n      [baseId]=\"id()\"\n      [optionTemplate]=\"optionTemplate()\"\n      [groupTemplate]=\"groupTemplate()\"\n      [labelledby]=\"labelledby()\"\n      [actionsTemplate]=\"actionsTemplate()\"\n      (closeOverlay)=\"close()\"\n    />\n  } @else {\n    <si-select-list-has-filter\n      [baseId]=\"id()\"\n      [filterPlaceholder]=\"filterPlaceholder()\"\n      [noResultsFoundLabel]=\"noResultsFoundLabel()\"\n      [optionTemplate]=\"optionTemplate()\"\n      [groupTemplate]=\"groupTemplate()\"\n      [labelledby]=\"labelledby()\"\n      [actionsTemplate]=\"actionsTemplate()\"\n      (closeOverlay)=\"close()\"\n    />\n  }\n</ng-template>\n", styles: [":host{display:inline-block;padding:0;block-size:2rem}:host:focus-within,:host.open:not(.si-select-has-filter){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}:host.readonly,:host.disabled{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: SiSelectInputComponent, selector: "si-select-input", inputs: ["baseId", "labelledby", "ariaLabel", "open", "placeholder", "controls", "optionTemplate", "readonly"], outputs: ["openListbox"] }, { kind: "component", type: SiSelectListComponent, selector: "si-select-list" }, { kind: "component", type: SiSelectListHasFilterComponent, selector: "si-select-list-has-filter", inputs: ["filterPlaceholder", "noResultsFoundLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiSelectComponent, isStandalone: true, selector: "si-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledbyInput: { classPropertyName: "labelledbyInput", publicName: "labelledby", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsFoundLabel: { classPropertyName: "noResultsFoundLabel", publicName: "noResultsFoundLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, errormessageId: { classPropertyName: "errormessageId", publicName: "errormessageId", isSignal: true, isRequired: false, transformFunction: null }, hasFilter: { classPropertyName: "hasFilter", publicName: "hasFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, host: { properties: { "class.readonly": "readonly()", "class.open": "isOpen()", "class.si-select-has-filter": "hasFilter()" }, classAttribute: "dropdown" }, providers: [{ provide: SI_FORM_ITEM_CONTROL, useExisting: SiSelectComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: SiSelectOptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "selectedValueTemplate", first: true, predicate: SiSelectValueTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: SiSelectGroupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "actionsTemplate", first: true, predicate: SiSelectActionsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<si-select-input\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  [baseId]=\"id()\"\n  [labelledby]=\"labelledby()\"\n  [optionTemplate]=\"selectedValueTemplate() ?? optionTemplate()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [controls]=\"id() + '-listbox'\"\n  [open]=\"isOpen()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"readonly()\"\n  [attr.aria-describedby]=\"errormessageId()\"\n  (openListbox)=\"open()\"\n/>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayOffsetX]=\"-1\"\n  [cdkConnectedOverlayMinWidth]=\"overlayWidth\"\n  (backdropClick)=\"backdropClick()\"\n  (detach)=\"close()\"\n>\n  @if (!hasFilter()) {\n    <si-select-list\n      [baseId]=\"id()\"\n      [optionTemplate]=\"optionTemplate()\"\n      [groupTemplate]=\"groupTemplate()\"\n      [labelledby]=\"labelledby()\"\n      [actionsTemplate]=\"actionsTemplate()\"\n      (closeOverlay)=\"close()\"\n    />\n  } @else {\n    <si-select-list-has-filter\n      [baseId]=\"id()\"\n      [filterPlaceholder]=\"filterPlaceholder()\"\n      [noResultsFoundLabel]=\"noResultsFoundLabel()\"\n      [optionTemplate]=\"optionTemplate()\"\n      [groupTemplate]=\"groupTemplate()\"\n      [labelledby]=\"labelledby()\"\n      [actionsTemplate]=\"actionsTemplate()\"\n      (closeOverlay)=\"close()\"\n    />\n  }\n</ng-template>\n", styles: [":host{display:inline-block;padding:0;block-size:2rem}:host:focus-within,:host.open:not(.si-select-has-filter){outline:var(--element-button-focus-width) solid var(--si-sys-effects-focus);outline-offset:var(--element-button-focus-overlay-width)}:host.readonly,:host.disabled{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: SiSelectInputComponent, selector: "si-select-input", inputs: ["baseId", "labelledby", "ariaLabel", "open", "placeholder", "controls", "optionTemplate", "readonly"], outputs: ["openListbox"] }, { kind: "component", type: SiSelectListComponent, selector: "si-select-list" }, { kind: "component", type: SiSelectListHasFilterComponent, selector: "si-select-list-has-filter", inputs: ["filterPlaceholder", "noResultsFoundLabel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-select', imports: [
                         OverlayModule,
                         SiSelectInputComponent,
                         SiSelectListComponent,
                         SiSelectListHasFilterComponent
-                    ], providers: [{ provide: SI_FORM_ITEM_CONTROL, useExisting: SiSelectComponent }], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                    ], providers: [{ provide: SI_FORM_ITEM_CONTROL, useExisting: SiSelectComponent }], host: {
                         class: 'dropdown',
                         '[class.readonly]': 'readonly()',
                         '[class.open]': 'isOpen()',
                         '[class.si-select-has-filter]': 'hasFilter()'
-                    }, template: "<si-select-input\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  [baseId]=\"id()\"\n  [labelledby]=\"labelledby()\"\n  [optionTemplate]=\"optionTemplate()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [controls]=\"id() + '-listbox'\"\n  [open]=\"isOpen()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"readonly()\"\n  [attr.aria-describedby]=\"errormessageId()\"\n  (openListbox)=\"open()\"\n/>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayOffsetX]=\"-1\"\n  [cdkConnectedOverlayMinWidth]=\"overlayWidth\"\n  (backdropClick)=\"backdropClick()\"\n  (detach)=\"close()\"\n>\n  @if (!hasFilter()) {\n    <si-select-list\n      [baseId]=\"id()\"\n      [optionTemplate]=\"optionTemplate()\"\n      [groupTemplate]=\"groupTemplate()\"\n      [labelledby]=\"labelledby()\"\n      [actionsTemplate]=\"actionsTemplate()\"\n      (closeOverlay)=\"close()\"\n    />\n  } @else {\n    <si-select-list-has-filter\n      [baseId]=\"id()\"\n      [filterPlaceholder]=\"filterPlaceholder()\"\n      [noResultsFoundLabel]=\"noResultsFoundLabel()\"\n      [optionTemplate]=\"optionTemplate()\"\n      [groupTemplate]=\"groupTemplate()\"\n      [labelledby]=\"labelledby()\"\n      [actionsTemplate]=\"actionsTemplate()\"\n      (closeOverlay)=\"close()\"\n    />\n  }\n</ng-template>\n", styles: [":host{display:inline-block;padding:0;block-size:2rem}:host:focus-within,:host.open:not(.si-select-has-filter){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}:host.readonly,:host.disabled{pointer-events:none}\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], labelledbyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelledby", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], noResultsFoundLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsFoundLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SiSelectOptionTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SiSelectGroupTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], actionsTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SiSelectActionsDirective), { ...{ read: TemplateRef }, isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { ...{
+                    }, template: "<si-select-input\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  [baseId]=\"id()\"\n  [labelledby]=\"labelledby()\"\n  [optionTemplate]=\"selectedValueTemplate() ?? optionTemplate()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [controls]=\"id() + '-listbox'\"\n  [open]=\"isOpen()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"readonly()\"\n  [attr.aria-describedby]=\"errormessageId()\"\n  (openListbox)=\"open()\"\n/>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayOffsetX]=\"-1\"\n  [cdkConnectedOverlayMinWidth]=\"overlayWidth\"\n  (backdropClick)=\"backdropClick()\"\n  (detach)=\"close()\"\n>\n  @if (!hasFilter()) {\n    <si-select-list\n      [baseId]=\"id()\"\n      [optionTemplate]=\"optionTemplate()\"\n      [groupTemplate]=\"groupTemplate()\"\n      [labelledby]=\"labelledby()\"\n      [actionsTemplate]=\"actionsTemplate()\"\n      (closeOverlay)=\"close()\"\n    />\n  } @else {\n    <si-select-list-has-filter\n      [baseId]=\"id()\"\n      [filterPlaceholder]=\"filterPlaceholder()\"\n      [noResultsFoundLabel]=\"noResultsFoundLabel()\"\n      [optionTemplate]=\"optionTemplate()\"\n      [groupTemplate]=\"groupTemplate()\"\n      [labelledby]=\"labelledby()\"\n      [actionsTemplate]=\"actionsTemplate()\"\n      (closeOverlay)=\"close()\"\n    />\n  }\n</ng-template>\n", styles: [":host{display:inline-block;padding:0;block-size:2rem}:host:focus-within,:host.open:not(.si-select-has-filter){outline:var(--element-button-focus-width) solid var(--si-sys-effects-focus);outline-offset:var(--element-button-focus-overlay-width)}:host.readonly,:host.disabled{pointer-events:none}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], labelledbyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelledby", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], noResultsFoundLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsFoundLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SiSelectOptionTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], selectedValueTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SiSelectValueTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SiSelectGroupTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], actionsTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SiSelectActionsDirective), { ...{ read: TemplateRef }, isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { ...{
                             read: ElementRef
                         }, isSignal: true }] }], errormessageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "errormessageId", required: false }] }], hasFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFilter", required: false }] }] } });
 
@@ -674,22 +739,26 @@ class SiSelectLazyOptionsDirective {
      * {@inheritDoc SiSelectOptionsStrategy#loading}
      * @defaultValue false
      */
-    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    loading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     /**
      * {@inheritDoc SiSelectOptionsStrategy#rows}
      * @defaultValue []
      */
-    rows = signal([], ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    rows = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     /**
      * {@inheritDoc SiSelectOptionsStrategy#selectedRows}
      * @defaultValue []
      */
-    selectedRows = signal([], ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
+    selectedRows = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedRows" }] : /* istanbul ignore next */ []));
     /**
      * Lazy source that resolves selected values and provides the options displayed by the select.
      * Implement `getAllOptions` when the select has no filter, or `getOptionsForSearch` when it has one.
      */
-    optionSource = input.required(...(ngDevMode ? [{ debugName: "optionSource" }] : []));
+    optionSource = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionSource" }] : /* istanbul ignore next */ []));
     valueChange = new Subject();
     filterChange = new Subject();
     constructor() {
@@ -760,10 +829,10 @@ class SiSelectLazyOptionsDirective {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectLazyOptionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiSelectLazyOptionsDirective, isStandalone: true, selector: "si-select[optionSource]", inputs: { optionSource: { classPropertyName: "optionSource", publicName: "optionSource", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: SI_SELECT_OPTIONS_STRATEGY, useExisting: SiSelectLazyOptionsDirective }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectLazyOptionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SiSelectLazyOptionsDirective, isStandalone: true, selector: "si-select[optionSource]", inputs: { optionSource: { classPropertyName: "optionSource", publicName: "optionSource", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: SI_SELECT_OPTIONS_STRATEGY, useExisting: SiSelectLazyOptionsDirective }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectLazyOptionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectLazyOptionsDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -780,8 +849,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * Input options strategy base class, for eagerly fetched options.
  */
 class SiSelectOptionsStrategyBase {
-    value = signal([], ...(ngDevMode ? [{ debugName: "value" }] : []));
-    filterValue = signal('', ...(ngDevMode ? [{ debugName: "filterValue" }] : []));
+    value = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    filterValue = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterValue" }] : /* istanbul ignore next */ []));
     /**
      * Rows that should be shown.
      *
@@ -813,24 +884,26 @@ class SiSelectOptionsStrategyBase {
         else {
             return this.allRows();
         }
-    }, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     selectedRows = computed(() => {
         const values = this.value();
         return this.allRows()
             .map(row => (row.type === 'group' ? row.options : row))
             .flat()
             .filter(option => values.some(value => this.optionsEqual()(value, option.value)));
-    }, ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedRows" }] : /* istanbul ignore next */ []));
     onValueChange(value) {
         this.value.set(value);
     }
     onFilter(filterValue) {
         this.filterValue.set(filterValue ?? '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectOptionsStrategyBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiSelectOptionsStrategyBase, isStandalone: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectOptionsStrategyBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SiSelectOptionsStrategyBase, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectOptionsStrategyBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectOptionsStrategyBase, decorators: [{
             type: Directive
         }] });
 
@@ -849,7 +922,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  */
 class SiSelectSimpleOptionsDirective extends SiSelectOptionsStrategyBase {
     /** Options to be shown in select dropdown */
-    options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
+    options = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
     /**
      * By default, values are check on referential equality. Provide a function to customize the behavior.
      *
@@ -858,14 +932,15 @@ class SiSelectSimpleOptionsDirective extends SiSelectOptionsStrategyBase {
      * (a: T, b: T): boolean => a === b
      * ```
      */
-    optionsEqual = input((a, b) => a === b, { ...(ngDevMode ? { debugName: "optionsEqual" } : {}), 
+    optionsEqual = input((a, b) => a === b, { ...(ngDevMode ? { debugName: "optionsEqual" } : /* istanbul ignore next */ {}), 
         // eslint-disable-next-line @angular-eslint/no-input-rename
         alias: 'optionEqualCheckFn' });
-    allRows = computed(() => this.options() ?? [], ...(ngDevMode ? [{ debugName: "allRows" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectSimpleOptionsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiSelectSimpleOptionsDirective, isStandalone: true, selector: "si-select[options]", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionsEqual: { classPropertyName: "optionsEqual", publicName: "optionEqualCheckFn", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: SI_SELECT_OPTIONS_STRATEGY, useExisting: SiSelectSimpleOptionsDirective }], usesInheritance: true, ngImport: i0 });
+    allRows = computed(() => this.options() ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allRows" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectSimpleOptionsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SiSelectSimpleOptionsDirective, isStandalone: true, selector: "si-select[options]", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionsEqual: { classPropertyName: "optionsEqual", publicName: "optionEqualCheckFn", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: SI_SELECT_OPTIONS_STRATEGY, useExisting: SiSelectSimpleOptionsDirective }], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectSimpleOptionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectSimpleOptionsDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -903,8 +978,8 @@ class SiSelectSingleValueDirective extends SiSelectSelectionStrategy {
     fromArrayValue([value]) {
         return value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectSingleValueDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiSelectSingleValueDirective, isStandalone: true, selector: "si-select:not([multi])", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectSingleValueDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SiSelectSingleValueDirective, isStandalone: true, selector: "si-select:not([multi])", providers: [
             { provide: SiSelectSelectionStrategy, useExisting: SiSelectSingleValueDirective },
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -913,7 +988,7 @@ class SiSelectSingleValueDirective extends SiSelectSelectionStrategy {
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectSingleValueDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectSingleValueDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -958,8 +1033,8 @@ class SiSelectMultiValueDirective extends SiSelectSelectionStrategy {
     toArrayValue(value) {
         return value ?? [];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectMultiValueDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiSelectMultiValueDirective, isStandalone: true, selector: "si-select[multi]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectMultiValueDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SiSelectMultiValueDirective, isStandalone: true, selector: "si-select[multi]", providers: [
             { provide: SiSelectSelectionStrategy, useExisting: SiSelectMultiValueDirective },
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -968,7 +1043,7 @@ class SiSelectMultiValueDirective extends SiSelectSelectionStrategy {
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectMultiValueDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectMultiValueDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -994,16 +1069,16 @@ class SiSelectActionDirective {
      * Close the select drop down on click.
      * @defaultValue false
      */
-    selectActionAutoClose = input(false, { ...(ngDevMode ? { debugName: "selectActionAutoClose" } : {}), transform: booleanAttribute });
+    selectActionAutoClose = input(false, { ...(ngDevMode ? { debugName: "selectActionAutoClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     close() {
         if (this.selectActionAutoClose()) {
             this.select.close();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiSelectActionDirective, isStandalone: true, selector: "[siSelectAction]", inputs: { selectActionAutoClose: { classPropertyName: "selectActionAutoClose", publicName: "selectActionAutoClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "close()" }, classAttribute: "mx-5 my-4" }, exportAs: ["si-select-action"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SiSelectActionDirective, isStandalone: true, selector: "[siSelectAction]", inputs: { selectActionAutoClose: { classPropertyName: "selectActionAutoClose", publicName: "selectActionAutoClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "close()" }, classAttribute: "mx-5 my-4" }, exportAs: ["si-select-action"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectActionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siSelectAction]',
@@ -1020,13 +1095,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiSelectModule, imports: [SiSelectActionDirective,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: SiSelectModule, imports: [SiSelectActionDirective,
             SiSelectActionsDirective,
             SiSelectComponent,
             SiSelectGroupTemplateDirective,
             SiSelectMultiValueDirective,
             SiSelectOptionTemplateDirective,
+            SiSelectValueTemplateDirective,
             SiSelectSimpleOptionsDirective,
             SiSelectSingleValueDirective], exports: [SiSelectActionDirective,
             SiSelectActionsDirective,
@@ -1034,11 +1110,12 @@ class SiSelectModule {
             SiSelectGroupTemplateDirective,
             SiSelectMultiValueDirective,
             SiSelectOptionTemplateDirective,
+            SiSelectValueTemplateDirective,
             SiSelectSimpleOptionsDirective,
             SiSelectSingleValueDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectModule, imports: [SiSelectComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectModule, imports: [SiSelectComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1048,6 +1125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiSelectGroupTemplateDirective,
                         SiSelectMultiValueDirective,
                         SiSelectOptionTemplateDirective,
+                        SiSelectValueTemplateDirective,
                         SiSelectSimpleOptionsDirective,
                         SiSelectSingleValueDirective
                     ],
@@ -1058,6 +1136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiSelectGroupTemplateDirective,
                         SiSelectMultiValueDirective,
                         SiSelectOptionTemplateDirective,
+                        SiSelectValueTemplateDirective,
                         SiSelectSimpleOptionsDirective,
                         SiSelectSingleValueDirective
                     ]
@@ -1118,26 +1197,27 @@ class SiCustomSelectDirective {
      * `__si-custom-select-${SiCustomSelectDirective.idCounter++}`
      * ```
      */
-    id = input(`__si-custom-select-${SiCustomSelectDirective.idCounter++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    id = input(`__si-custom-select-${SiCustomSelectDirective.idCounter++}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     /**
      * Whether the select input is disabled.
      *
      * @defaultValue false
      */
     // eslint-disable-next-line @angular-eslint/no-input-rename
-    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : {}), alias: 'disabled', transform: booleanAttribute });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
     /**
      * Readonly state. Similar to disabled but with higher contrast.
      *
      * @defaultValue false
      */
-    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Optional CDK scroll strategy used for the custom select overlay.
      *
      * @defaultValue defaultConnectedOverlayScrollStrategy()
      */
-    scrollStrategy = input(defaultConnectedOverlayScrollStrategy(), { ...(ngDevMode ? { debugName: "scrollStrategy" } : {}), alias: 'siCustomSelectScrollStrategy' });
+    scrollStrategy = input(defaultConnectedOverlayScrollStrategy(), { ...(ngDevMode ? { debugName: "scrollStrategy" } : /* istanbul ignore next */ {}), alias: 'siCustomSelectScrollStrategy' });
     /** Emits when the dropdown open state changes. */
     openChange = output();
     /**
@@ -1145,26 +1225,32 @@ class SiCustomSelectDirective {
      *
      * @defaultValue undefined
      */
-    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /**
      * Whether the dropdown is currently open.
      *
      * @defaultValue false
      */
-    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     /** @internal */
-    labelledby = computed(() => `${this.id()}-label ${this.id()}-combobox`, ...(ngDevMode ? [{ debugName: "labelledby" }] : []));
+    labelledby = computed(() => `${this.id()}-label ${this.id()}-combobox`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledby" }] : /* istanbul ignore next */ []));
     /** @internal */
-    comboboxLabelId = computed(() => `${this.id()}-combobox`, ...(ngDevMode ? [{ debugName: "comboboxLabelId" }] : []));
+    comboboxLabelId = computed(() => `${this.id()}-combobox`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "comboboxLabelId" }] : /* istanbul ignore next */ []));
     /** @internal */
-    dropdownId = computed(() => this.id() + '-dropdown', ...(ngDevMode ? [{ debugName: "dropdownId" }] : []));
+    dropdownId = computed(() => this.id() + '-dropdown', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropdownId" }] : /* istanbul ignore next */ []));
     /**
      * Value forwarded to the `aria-haspopup` attribute. Reflects the
      * `contentType` input of the registered {@link SiSelectDropdownDirective},
      * defaulting to `'listbox'` until a dropdown template is registered.
      * @internal
      */
-    haspopup = computed(() => this.dropdownDirective()?.contentType() ?? 'listbox', ...(ngDevMode ? [{ debugName: "haspopup" }] : []));
+    haspopup = computed(() => this.dropdownDirective()?.contentType() ?? 'listbox', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "haspopup" }] : /* istanbul ignore next */ []));
     /**
      * This ID will be bound to the `aria-describedby` attribute of the select.
      *
@@ -1173,12 +1259,15 @@ class SiCustomSelectDirective {
      * `${this.id()}-errormessage`
      * ```
      */
-    errormessageId = input(`${this.id()}-errormessage`, ...(ngDevMode ? [{ debugName: "errormessageId" }] : []));
+    errormessageId = input(`${this.id()}-errormessage`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errormessageId" }] : /* istanbul ignore next */ []));
     /** Combined disabled state from input and form control. */
-    disabled = computed(() => this.disabledInput() || this.disabledByForm(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    disabled = computed(() => this.disabledInput() || this.disabledByForm(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     onTouched = () => { };
     onChange = () => { };
-    disabledByForm = signal(false, ...(ngDevMode ? [{ debugName: "disabledByForm" }] : []));
+    disabledByForm = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledByForm" }] : /* istanbul ignore next */ []));
     overlay = inject(Overlay);
     focusTrapFactory = inject(ConfigurableFocusTrapFactory);
     elementRef = inject(ElementRef);
@@ -1188,7 +1277,8 @@ class SiCustomSelectDirective {
     overlayRef;
     focusTrap;
     closeOverlay$ = new Subject();
-    dropdownDirective = signal(undefined, ...(ngDevMode ? [{ debugName: "dropdownDirective" }] : []));
+    dropdownDirective = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropdownDirective" }] : /* istanbul ignore next */ []));
     constructor() {
         this.destroyRef.onDestroy(() => {
             this.disposeOverlay();
@@ -1298,13 +1388,13 @@ class SiCustomSelectDirective {
             this.overlayRef = undefined;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCustomSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiCustomSelectDirective, isStandalone: true, selector: "[siCustomSelect]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "siCustomSelectScrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errormessageId: { classPropertyName: "errormessageId", publicName: "errormessageId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", value: "valueChange" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "none" }, listeners: { "click": "open()", "keydown.enter": "open()", "keydown.space": "open($event)", "keydown.arrowDown": "open($event)", "keydown.arrowUp": "open($event)" }, properties: { "style.--si-action-icon-offset.rem": "1.5", "attr.aria-haspopup": "haspopup()", "attr.aria-labelledby": "labelledby()", "attr.aria-describedby": "errormessageId()", "attr.aria-controls": "isOpen() ? dropdownId() : null", "attr.aria-expanded": "isOpen()", "attr.aria-disabled": "disabled()", "attr.id": "id()", "attr.tabindex": "disabled() ? \"-1\" : \"0\"", "class.disabled": "disabled()", "class.pe-none": "disabled()", "class.readonly": "readonly()", "class.open": "isOpen()", "class.show": "isOpen()" }, classAttribute: "dropdown" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiCustomSelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SiCustomSelectDirective, isStandalone: true, selector: "[siCustomSelect]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "siCustomSelectScrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errormessageId: { classPropertyName: "errormessageId", publicName: "errormessageId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", value: "valueChange" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "none" }, listeners: { "click": "open()", "keydown.enter": "open()", "keydown.space": "open($event)", "keydown.arrowDown": "open($event)", "keydown.arrowUp": "open($event)" }, properties: { "style.--si-action-icon-offset.rem": "1.5", "attr.aria-haspopup": "haspopup()", "attr.aria-labelledby": "labelledby()", "attr.aria-describedby": "errormessageId()", "attr.aria-controls": "isOpen() ? dropdownId() : null", "attr.aria-expanded": "isOpen()", "attr.aria-disabled": "disabled()", "attr.id": "id()", "attr.tabindex": "disabled() ? \"-1\" : \"0\"", "class.disabled": "disabled()", "class.pe-none": "disabled()", "class.readonly": "readonly()", "class.open": "isOpen()", "class.show": "isOpen()" }, classAttribute: "dropdown" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: SiCustomSelectDirective, multi: true },
             { provide: SI_FORM_ITEM_CONTROL, useExisting: SiCustomSelectDirective }
         ], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiCustomSelectDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiCustomSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siCustomSelect]',
@@ -1362,26 +1452,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 class SiSelectComboboxComponent {
     icons = addIcons({ elementDown2 });
     customSelect = inject(SiCustomSelectDirective);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiSelectComboboxComponent, isStandalone: true, selector: "si-select-combobox", host: { properties: { "attr.id": "customSelect.comboboxLabelId()", "class.show": "customSelect.isOpen()" }, classAttribute: "select focus-none dropdown-toggle d-flex align-items-center w-100" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: SiSelectComboboxComponent, isStandalone: true, selector: "si-select-combobox", host: { properties: { "attr.id": "customSelect.comboboxLabelId()", "class.show": "customSelect.isOpen()" }, classAttribute: "select focus-none dropdown-toggle d-flex align-items-center w-100" }, ngImport: i0, template: `
     <ng-content />
     <div class="form-control-actions ms-auto my-n4">
       <si-icon class="dropdown-caret icon flip-rtl p-0 m-0" [icon]="icons.elementDown2" />
     </div>
-  `, isInline: true, styles: [":host-context(.form-control.dropdown) .dropdown-caret{margin-inline-end:calc((var(--si-feedback-icon-offset, 0px) + var(--si-action-icon-offset)) * -1)}.dropdown-caret{transform-origin:center}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host-context(.form-control.dropdown) .dropdown-caret{margin-inline-end:calc((var(--si-feedback-icon-size, 0px) + var(--si-action-icon-offset)) * -1)}.dropdown-caret{transform-origin:center}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectComboboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectComboboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-select-combobox', imports: [SiIconComponent], template: `
     <ng-content />
     <div class="form-control-actions ms-auto my-n4">
       <si-icon class="dropdown-caret icon flip-rtl p-0 m-0" [icon]="icons.elementDown2" />
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+  `, host: {
                         class: 'select focus-none dropdown-toggle d-flex align-items-center w-100',
                         '[attr.id]': 'customSelect.comboboxLabelId()',
                         '[class.show]': 'customSelect.isOpen()'
-                    }, styles: [":host-context(.form-control.dropdown) .dropdown-caret{margin-inline-end:calc((var(--si-feedback-icon-offset, 0px) + var(--si-action-icon-offset)) * -1)}.dropdown-caret{transform-origin:center}\n"] }]
+                    }, styles: [":host-context(.form-control.dropdown) .dropdown-caret{margin-inline-end:calc((var(--si-feedback-icon-size, 0px) + var(--si-action-icon-offset)) * -1)}.dropdown-caret{transform-origin:center}\n"] }]
         }] });
 
 /**
@@ -1415,15 +1505,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  */
 class SiSelectComboboxValueComponent {
     /** An optional icon rendered before the projected content. */
-    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
     /** Optional CSS color class applied to {@link icon}. */
-    iconColor = input(...(ngDevMode ? [undefined, { debugName: "iconColor" }] : []));
+    iconColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "iconColor" }] : /* istanbul ignore next */ []));
     /** Optional secondary icon stacked on top of {@link icon}. */
-    stackedIcon = input(...(ngDevMode ? [undefined, { debugName: "stackedIcon" }] : []));
+    stackedIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "stackedIcon" }] : /* istanbul ignore next */ []));
     /** Optional CSS color class applied to {@link stackedIcon}. */
-    stackedIconColor = input(...(ngDevMode ? [undefined, { debugName: "stackedIconColor" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectComboboxValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSelectComboboxValueComponent, isStandalone: true, selector: "si-select-combobox-value", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, stackedIcon: { classPropertyName: "stackedIcon", publicName: "stackedIcon", isSignal: true, isRequired: false, transformFunction: null }, stackedIconColor: { classPropertyName: "stackedIconColor", publicName: "stackedIconColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "text-nowrap" }, ngImport: i0, template: `
+    stackedIconColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "stackedIconColor" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectComboboxValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiSelectComboboxValueComponent, isStandalone: true, selector: "si-select-combobox-value", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, stackedIcon: { classPropertyName: "stackedIcon", publicName: "stackedIcon", isSignal: true, isRequired: false, transformFunction: null }, stackedIconColor: { classPropertyName: "stackedIconColor", publicName: "stackedIconColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "text-nowrap" }, ngImport: i0, template: `
     @if (icon(); as iconName) {
       <div class="icon-stack icon me-2 my-n4">
         <si-icon [icon]="iconName" [class]="iconColor() ?? ''" />
@@ -1433,9 +1527,9 @@ class SiSelectComboboxValueComponent {
       </div>
     }
     <ng-content />
-  `, isInline: true, styles: ["@charset \"UTF-8\";:host{display:inline-block;max-inline-size:100%}:host(.comma-separated:not(:first-of-type)):before{content:\",\\a0\"}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@charset \"UTF-8\";:host{display:inline-block;max-inline-size:100%}:host(.comma-separated:not(:first-of-type)):before{content:\",\\a0\"}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectComboboxValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectComboboxValueComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-select-combobox-value', imports: [SiIconComponent], template: `
     @if (icon(); as iconName) {
@@ -1447,7 +1541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
       </div>
     }
     <ng-content />
-  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+  `, host: {
                         class: 'text-nowrap'
                     }, styles: ["@charset \"UTF-8\";:host{display:inline-block;max-inline-size:100%}:host(.comma-separated:not(:first-of-type)):before{content:\",\\a0\"}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], stackedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackedIcon", required: false }] }], stackedIconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackedIconColor", required: false }] }] } });
@@ -1478,17 +1572,18 @@ class SiSelectDropdownDirective {
      * forwarded to the `aria-haspopup` attribute of the combobox host of
      * the parent {@link SiCustomSelectDirective}.
      */
-    contentType = input.required(...(ngDevMode ? [{ debugName: "contentType" }] : []));
+    contentType = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentType" }] : /* istanbul ignore next */ []));
     /** @internal */
     templateRef = inject(TemplateRef);
     constructor() {
         const customSelect = inject(SiCustomSelectDirective, { optional: true });
         customSelect?.registerDropdown(this);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiSelectDropdownDirective, isStandalone: true, selector: "[si-select-dropdown]", inputs: { contentType: { classPropertyName: "contentType", publicName: "contentType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SiSelectDropdownDirective, isStandalone: true, selector: "[si-select-dropdown]", inputs: { contentType: { classPropertyName: "contentType", publicName: "contentType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectDropdownDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSelectDropdownDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1505,5 +1600,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SiCustomSelectDirective, SiSelectActionDirective, SiSelectActionsDirective, SiSelectComboboxComponent, SiSelectComboboxValueComponent, SiSelectComponent, SiSelectDropdownDirective, SiSelectGroupTemplateDirective, SiSelectLazyOptionsDirective, SiSelectListHasFilterComponent, SiSelectModule, SiSelectMultiValueDirective, SiSelectOptionTemplateDirective, SiSelectSimpleOptionsDirective, SiSelectSingleValueDirective };
+export { SiCustomSelectDirective, SiSelectActionDirective, SiSelectActionsDirective, SiSelectComboboxComponent, SiSelectComboboxValueComponent, SiSelectComponent, SiSelectDropdownDirective, SiSelectGroupTemplateDirective, SiSelectLazyOptionsDirective, SiSelectListHasFilterComponent, SiSelectModule, SiSelectMultiValueDirective, SiSelectOptionTemplateDirective, SiSelectSimpleOptionsDirective, SiSelectSingleValueDirective, SiSelectValueTemplateDirective };
 //# sourceMappingURL=siemens-element-ng-select.mjs.map