@siemens/element-ng 49.8.0 → 49.9.0

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

@@ -1,7 +1,7 @@
 import * as i1$3 from '@angular/cdk/overlay';
-import { CdkOverlayOrigin, OverlayModule } 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, HostListener, ElementRef, HostBinding, viewChild, contentChild, TemplateRef, NgModule } 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 { SI_FORM_ITEM_CONTROL } from '@siemens/element-ng/form';
 import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
 import { elementDown2, elementOk, elementSearch } from '@siemens/element-icons';
@@ -9,15 +9,17 @@ import * as i1 from '@siemens/element-ng/auto-collapsable-list';
 import { SiAutoCollapsableListModule } from '@siemens/element-ng/auto-collapsable-list';
 import { SiIconComponent, addIcons } from '@siemens/element-ng/icon';
 import * as i1$2 from '@angular/common';
-import { NgTemplateOutlet, CommonModule } from '@angular/common';
+import { NgTemplateOutlet, CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i1$1 from '@siemens/element-ng/autocomplete';
 import { SiAutocompleteDirective, SiAutocompleteModule } from '@siemens/element-ng/autocomplete';
 import { SiLoadingSpinnerComponent } from '@siemens/element-ng/loading-spinner';
 import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
 import { CdkListbox, CdkOption } from '@angular/cdk/listbox';
-import { Subject, switchMap, of } from 'rxjs';
+import { Subject, switchMap, of, merge, filter, takeUntil as takeUntil$1 } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -190,7 +192,7 @@ class SiSelectInputComponent {
         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()", "keydown.arrowDown": "click($event)", "keydown.alt.arrowDown": "click($event)", "keydown.arrowUp": "click($event)", "keydown.enter": "click()", "keydown.space": "click()" }, 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=\"overflow-item\"> {{ 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\"}.overflow-item{border-radius:var(--element-radius-3);background:var(--element-base-0);margin-inline-start:4px;padding-inline:8px}\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 ɵ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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectInputComponent, decorators: [{
             type: Component,
@@ -208,30 +210,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[attr.aria-disabled]': 'selectionStrategy.disabled()',
                         '[attr.tabindex]': 'selectionStrategy.disabled() ? "-1" : "0"',
                         '[class.disabled]': 'selectionStrategy.disabled()',
-                        '[class.active]': 'open()'
-                    }, 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=\"overflow-item\"> {{ 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\"}.overflow-item{border-radius:var(--element-radius-3);background:var(--element-base-0);margin-inline-start:4px;padding-inline:8px}\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"] }], blur: [{
-                type: HostListener,
-                args: ['blur']
-            }], click: [{
-                type: HostListener,
-                args: ['click']
-            }, {
-                type: HostListener,
-                args: ['keydown.arrowDown', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.alt.arrowDown', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.arrowUp', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.enter']
-            }, {
-                type: HostListener,
-                args: ['keydown.space']
-            }] } });
+                        '[class.active]': 'open()',
+                        '(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)'
+                    }, 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"] }]
+        }], 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"] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -351,22 +339,18 @@ class SiSelectListBase {
         }
     }
     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": "this.multiSelect" }, classAttribute: "dropdown-menu position-static w-100 py-4 d-flex flex-column" }, ngImport: i0 });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectListBase, decorators: [{
             type: Directive,
             args: [{
                     host: {
-                        class: 'dropdown-menu position-static w-100 py-4 d-flex flex-column'
+                        class: 'dropdown-menu position-static w-100 py-4 d-flex flex-column',
+                        '[class.si-multi-select]': 'multiSelect',
+                        '(keydown.tab)': 'keydownTab()'
                     }
                 }]
-        }], propDecorators: { baseId: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseId", required: true }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], groupTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTemplate", required: false }] }], labelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelledby", required: false }] }], actionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsTemplate", required: false }] }], closeOverlay: [{ type: i0.Output, args: ["closeOverlay"] }], multiSelect: [{
-                type: HostBinding,
-                args: ['class.si-multi-select']
-            }], keydownTab: [{
-                type: HostListener,
-                args: ['keydown.tab']
-            }] } });
+        }], propDecorators: { baseId: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseId", required: true }] }], optionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionTemplate", required: false }] }], groupTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTemplate", required: false }] }], labelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelledby", required: false }] }], actionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsTemplate", required: false }] }], closeOverlay: [{ type: i0.Output, args: ["closeOverlay"] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -417,7 +401,7 @@ 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 ps-9 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(100vh - 56px,266px);overflow-y:auto}si-loading-spinner{--loading-spinner-size: 1.25rem}\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 ɵ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(100vh - 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectListHasFilterComponent, decorators: [{
             type: Component,
@@ -434,7 +418,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, 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 ps-9 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(100vh - 56px,266px);overflow-y:auto}si-loading-spinner{--loading-spinner-size: 1.25rem}\n"] }]
+                    }, 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(100vh - 56px,266px);overflow-y:auto}si-loading-spinner{--loading-spinner-size: 1.25rem}.icon-start{padding-inline-start:calc(1.25rem + 12px)}\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 }] }] } });
 
 /**
@@ -453,7 +437,7 @@ class SiSelectListComponent extends SiSelectListBase {
         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=\"si-select-filtered-items 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", styles: [".si-select-filtered-items{max-block-size:min(100vh,266px);overflow-y:auto}\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 ɵ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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectListComponent, decorators: [{
             type: Component,
@@ -465,7 +449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiSelectOptionRowTemplateDirective,
                         SiSelectGroupTemplateDirective,
                         SiSelectOptionRowComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  cdkListbox\n  class=\"si-select-filtered-items 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", styles: [".si-select-filtered-items{max-block-size:min(100vh,266px);overflow-y:auto}\n"] }]
+                    ], 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" }]
         }], propDecorators: { listbox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { ...{
                             read: ElementRef
                         }, isSignal: true }] }] } });
@@ -959,14 +943,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
             args: [{
                     selector: '[siSelectAction]',
                     host: {
-                        class: 'mx-5 my-4'
+                        class: 'mx-5 my-4',
+                        '(click)': 'close()'
                     },
                     exportAs: 'si-select-action'
                 }]
-        }], propDecorators: { selectActionAutoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectActionAutoClose", required: false }] }], close: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
+        }], propDecorators: { selectActionAutoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectActionAutoClose", required: false }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -1017,6 +999,431 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 }]
         }] });
 
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Host directive for building custom selects.
+ *
+ * Add this as a `hostDirective` on your component and expose the inputs/outputs you need.
+ * The directive handles:
+ * - {@link ControlValueAccessor} integration (`formControl`, `ngModel`, `[(value)]`)
+ * - Disabled / readonly state management
+ * - Overlay lifecycle for the dropdown (open/close)
+ * - Focus management and focus trapping in the dropdown
+ * - Opening the dropdown on click, Enter, Space, ArrowDown, ArrowUp
+ * - {@link SiFormItemControl} integration
+ *
+ * Use {@link SiSelectDropdownDirective} to mark the dropdown template in your component,
+ * and call {@link open}, {@link close}, {@link updateValue} from your component logic.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   selector: 'app-my-select',
+ *   hostDirectives: [{
+ *     directive: SiCustomSelectDirective,
+ *     inputs: ['disabled', 'readonly', 'value'],
+ *     outputs: ['valueChange']
+ *   }],
+ *   template: `
+ *     <si-select-combobox>
+ *       {{ select.value() }}
+ *     </si-select-combobox>
+ *     <ng-template si-select-dropdown contentType="listbox">
+ *       <button (click)="select.updateValue('new'); select.close()">Pick</button>
+ *     </ng-template>
+ *   `
+ * })
+ * export class MySelectComponent {
+ *   readonly select = inject(SiCustomSelectDirective);
+ * }
+ * ```
+ *
+ * @experimental
+ */
+class SiCustomSelectDirective {
+    static idCounter = 0;
+    /**
+     * Unique identifier.
+     *
+     * @defaultValue
+     * ```
+     * `__si-custom-select-${SiCustomSelectDirective.idCounter++}`
+     * ```
+     */
+    id = input(`__si-custom-select-${SiCustomSelectDirective.idCounter++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    /**
+     * 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 });
+    /**
+     * Readonly state. Similar to disabled but with higher contrast.
+     *
+     * @defaultValue false
+     */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    /** Emits when the dropdown open state changes. */
+    openChange = output();
+    /**
+     * The current value, supports two-way binding via `[(value)]`.
+     *
+     * @defaultValue undefined
+     */
+    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /**
+     * Whether the dropdown is currently open.
+     *
+     * @defaultValue false
+     */
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /** @internal */
+    labelledby = computed(() => `${this.id()}-label ${this.id()}-combobox`, ...(ngDevMode ? [{ debugName: "labelledby" }] : []));
+    /** @internal */
+    comboboxLabelId = computed(() => `${this.id()}-combobox`, ...(ngDevMode ? [{ debugName: "comboboxLabelId" }] : []));
+    /** @internal */
+    dropdownId = computed(() => this.id() + '-dropdown', ...(ngDevMode ? [{ debugName: "dropdownId" }] : []));
+    /**
+     * 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" }] : []));
+    /**
+     * This ID will be bound to the `aria-describedby` attribute of the select.
+     *
+     * @defaultValue
+     * ```
+     * `${this.id()}-errormessage`
+     * ```
+     */
+    errormessageId = input(`${this.id()}-errormessage`, ...(ngDevMode ? [{ debugName: "errormessageId" }] : []));
+    /** Combined disabled state from input and form control. */
+    disabled = computed(() => this.disabledInput() || this.disabledByForm(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    onTouched = () => { };
+    onChange = () => { };
+    disabledByForm = signal(false, ...(ngDevMode ? [{ debugName: "disabledByForm" }] : []));
+    overlay = inject(Overlay);
+    focusTrapFactory = inject(ConfigurableFocusTrapFactory);
+    elementRef = inject(ElementRef);
+    viewContainerRef = inject(ViewContainerRef);
+    destroyRef = inject(DestroyRef);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    overlayRef;
+    focusTrap;
+    closeOverlay$ = new Subject();
+    dropdownDirective = signal(undefined, ...(ngDevMode ? [{ debugName: "dropdownDirective" }] : []));
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.disposeOverlay();
+            this.closeOverlay$.complete();
+        });
+    }
+    /**
+     * Registers the dropdown directive. Called by
+     * {@link SiSelectDropdownDirective} when it is initialized.
+     * @internal
+     */
+    registerDropdown(directive) {
+        this.dropdownDirective.set(directive);
+    }
+    /**
+     * Updates the value programmatically.
+     * Call this from your dropdown template to set the new value.
+     */
+    updateValue(value) {
+        this.value.set(value);
+        this.onChange(value);
+    }
+    /** Opens the dropdown overlay. */
+    open(event) {
+        if (this.disabled() || this.readonly() || this.isOpen() || !this.isBrowser) {
+            return;
+        }
+        if (!this.dropdownDirective()) {
+            return;
+        }
+        // Prevent default scrolling behavior for Space / ArrowUp / ArrowDown.
+        event?.preventDefault();
+        const width = this.elementRef.nativeElement.getBoundingClientRect().width;
+        this.overlayRef = this.overlay.create({
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(this.elementRef)
+                .withPositions([
+                // Preferred: below, aligned to the start edge of the trigger.
+                { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+                // Below, aligned to the end edge (trigger near the end of the viewport).
+                { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
+                // Above, aligned to the start edge (no space below).
+                { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+                // Above, aligned to the end edge (no space below, trigger near the end).
+                { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
+                // Below, centered (small screens, trigger in the middle).
+                { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' },
+                // Above, centered.
+                { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' }
+            ])
+                .withFlexibleDimensions(true)
+                .withPush(true),
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            panelClass: ['dropdown-menu', 'show'],
+            minWidth: width + 2
+        });
+        const portal = new TemplatePortal(this.dropdownDirective().templateRef, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        this.overlayRef.overlayElement.id = this.dropdownId();
+        this.focusTrap = this.focusTrapFactory.create(this.overlayRef.overlayElement);
+        this.focusTrap.focusFirstTabbableElementWhenReady();
+        this.isOpen.set(true);
+        this.openChange.emit(true);
+        merge(this.overlayRef.backdropClick(), this.overlayRef.keydownEvents().pipe(filter(e => e.key === 'Escape')))
+            .pipe(takeUntil$1(this.closeOverlay$), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.close());
+    }
+    /** Closes the dropdown overlay and restores focus. */
+    close() {
+        if (!this.isOpen()) {
+            return;
+        }
+        this.isOpen.set(false);
+        this.disposeOverlay();
+        this.openChange.emit(false);
+        this.onTouched();
+        if (this.isBrowser) {
+            this.elementRef.nativeElement.focus();
+        }
+    }
+    /** @internal */
+    writeValue(obj) {
+        this.value.set(obj ?? undefined);
+    }
+    /** @internal */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /** @internal */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /** @internal */
+    setDisabledState(isDisabled) {
+        this.disabledByForm.set(isDisabled);
+    }
+    disposeOverlay() {
+        if (this.overlayRef) {
+            this.closeOverlay$.next();
+            this.focusTrap?.destroy();
+            this.focusTrap = undefined;
+            this.overlayRef.detach();
+            this.overlayRef.dispose();
+            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 }, 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: [{
+            type: Directive,
+            args: [{
+                    selector: '[siCustomSelect]',
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: SiCustomSelectDirective, multi: true },
+                        { provide: SI_FORM_ITEM_CONTROL, useExisting: SiCustomSelectDirective }
+                    ],
+                    host: {
+                        class: 'dropdown',
+                        '[style.--si-action-icon-offset.rem]': '1.5',
+                        role: 'combobox',
+                        'aria-autocomplete': 'none',
+                        '[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()',
+                        '(click)': 'open()',
+                        '(keydown.enter)': 'open()',
+                        '(keydown.space)': 'open($event)',
+                        '(keydown.arrowDown)': 'open($event)',
+                        '(keydown.arrowUp)': 'open($event)'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], errormessageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "errormessageId", required: false }] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Visual trigger element for custom selects built with {@link SiCustomSelectDirective}.
+ * Renders the projected content and a dropdown caret icon.
+ *
+ * The ARIA role, focus handling, and state attributes live on the host component
+ * via {@link SiCustomSelectDirective} — this component is purely visual.
+ *
+ * @example
+ * ```html
+ * <si-select-combobox>
+ *   {{ select.value() }}
+ * </si-select-combobox>
+ * ```
+ *
+ * @experimental
+ */
+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: `
+    <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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.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: {
+                        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"] }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Represents a single selected value inside an {@link SiSelectComboboxComponent}.
+ *
+ * Project one `<si-select-combobox-value>` per selected entry. Optional
+ * `icon`, `iconColor`, `stackedIcon` and `stackedIconColor` inputs mirror the
+ * icon API of {@link SelectOption} and render an icon (with optional stacked
+ * overlay) before the projected content.
+ *
+ * Add the `comma-separated` CSS class to render a comma between adjacent
+ * values. Omit it when using chips, custom separators, or a single value.
+ *
+ * @example
+ * ```html
+ * <si-select-combobox>
+ *   <si-select-combobox-value
+ *     icon="element-face-happy"
+ *     iconColor="status-success"
+ *   >
+ *     {{ select.value() }}
+ *   </si-select-combobox-value>
+ * </si-select-combobox>
+ * ```
+ *
+ * @experimental
+ */
+class SiSelectComboboxValueComponent {
+    /** An optional icon rendered before the projected content. */
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    /** Optional CSS color class applied to {@link icon}. */
+    iconColor = input(...(ngDevMode ? [undefined, { debugName: "iconColor" }] : []));
+    /** Optional secondary icon stacked on top of {@link icon}. */
+    stackedIcon = input(...(ngDevMode ? [undefined, { debugName: "stackedIcon" }] : []));
+    /** 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: `
+    @if (icon(); as iconName) {
+      <div class="icon-stack icon me-2 my-n4">
+        <si-icon [icon]="iconName" [class]="iconColor() ?? ''" />
+        @if (stackedIcon(); as stackedIconName) {
+          <si-icon [icon]="stackedIconName" [class]="stackedIconColor() ?? ''" />
+        }
+      </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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectComboboxValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-select-combobox-value', imports: [SiIconComponent], template: `
+    @if (icon(); as iconName) {
+      <div class="icon-stack icon me-2 my-n4">
+        <si-icon [icon]="iconName" [class]="iconColor() ?? ''" />
+        @if (stackedIcon(); as stackedIconName) {
+          <si-icon [icon]="stackedIconName" [class]="stackedIconColor() ?? ''" />
+        }
+      </div>
+    }
+    <ng-content />
+  `, changeDetection: ChangeDetectionStrategy.OnPush, 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 }] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Structural directive marking the dropdown template for custom selects
+ * built with {@link SiCustomSelectDirective}.
+ *
+ * When placed on an `<ng-template>`, it automatically registers the template
+ * with the parent {@link SiCustomSelectDirective}.
+ *
+ * @example
+ * ```html
+ * <ng-template si-select-dropdown contentType="listbox">
+ *   <!-- custom dropdown content -->
+ * </ng-template>
+ * ```
+ *
+ * @experimental
+ */
+class SiSelectDropdownDirective {
+    /**
+     * Describes the kind of content rendered by the dropdown. The value is
+     * forwarded to the `aria-haspopup` attribute of the combobox host of
+     * the parent {@link SiCustomSelectDirective}.
+     */
+    contentType = input.required(...(ngDevMode ? [{ debugName: "contentType" }] : []));
+    /** @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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectDropdownDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[si-select-dropdown]'
+                }]
+        }], ctorParameters: () => [], propDecorators: { contentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentType", required: true }] }] } });
+
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
@@ -1026,5 +1433,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SiSelectActionDirective, SiSelectActionsDirective, SiSelectComponent, SiSelectGroupTemplateDirective, SiSelectLazyOptionsDirective, SiSelectListHasFilterComponent, SiSelectModule, SiSelectMultiValueDirective, SiSelectOptionTemplateDirective, SiSelectSimpleOptionsDirective, SiSelectSingleValueDirective };
+export { SiCustomSelectDirective, SiSelectActionDirective, SiSelectActionsDirective, SiSelectComboboxComponent, SiSelectComboboxValueComponent, SiSelectComponent, SiSelectDropdownDirective, SiSelectGroupTemplateDirective, SiSelectLazyOptionsDirective, SiSelectListHasFilterComponent, SiSelectModule, SiSelectMultiValueDirective, SiSelectOptionTemplateDirective, SiSelectSimpleOptionsDirective, SiSelectSingleValueDirective };
 //# sourceMappingURL=siemens-element-ng-select.mjs.map