@siemens/element-ng 47.2.0 → 47.4.0

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

@@ -0,0 +1,1166 @@
+import * as i1$3 from '@angular/cdk/overlay';
+import { CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
+import * as i0 from '@angular/core';
+import { InjectionToken, signal, computed, Directive, input, ChangeDetectionStrategy, Component, booleanAttribute, output, inject, Input, HostListener, ElementRef, HostBinding, viewChild, contentChild, TemplateRef, NgModule } from '@angular/core';
+import { SI_FORM_ITEM_CONTROL } from '@siemens/element-ng/form';
+import { buildTrackByIdentity } from '@siemens/element-ng/common';
+import * as i1$1 from '@siemens/element-ng/auto-collapsable-list';
+import { SiAutoCollapsableListModule } from '@siemens/element-ng/auto-collapsable-list';
+import { SiIconNextComponent, addIcons, elementDown2, elementOk, elementSearch } from '@siemens/element-ng/icon';
+import * as i1 from '@siemens/element-translate-ng/translate';
+import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
+import * as i1$2 from '@angular/common';
+import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
+import * as i2 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 { debounceTime, takeUntil } from 'rxjs/operators';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+const SI_SELECT_OPTIONS_STRATEGY = new InjectionToken('si-select.options-strategy');
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Input options strategy base class, for eagerly fetched options.
+ */
+class SiSelectOptionsStrategyBase {
+    /**
+     * Rows that should be shown.
+     *
+     * @defaultValue []
+     */
+    rows = signal([]);
+    value = signal([]);
+    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)));
+    });
+    onValueChange(value) {
+        this.value.set(value);
+    }
+    onFilter(filterValue) {
+        if (filterValue) {
+            const filterValueLC = filterValue.toLowerCase();
+            const checkRow = (row) => (row.typeaheadLabel ?? row.label).toLowerCase().includes(filterValueLC);
+            this.rows.set(this.allRows().reduce((rows, row) => {
+                if (row.type === 'option' && checkRow(row)) {
+                    rows.push(row);
+                }
+                else if (row.type === 'group') {
+                    if (row.label.toLowerCase().includes(filterValueLC)) {
+                        rows.push(row);
+                    }
+                    else {
+                        const options = row.options.filter(checkRow);
+                        if (options.length) {
+                            rows.push({ ...row, options });
+                        }
+                    }
+                }
+                return rows;
+            }, []));
+        }
+        else {
+            this.rows.set(this.allRows());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectOptionsStrategyBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiSelectOptionsStrategyBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectOptionsStrategyBase, decorators: [{
+            type: Directive
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * The directive allows passing custom options.
+ * Otherwise, use the {@link SiSelectSimpleOptionsDirective} directive.
+ *
+ * @deprecated Use {@link SiSelectSimpleOptionsDirective} instead.
+ *
+ * @example
+ * ```html
+ * <si-select [complexOptions]="['v1', 'v2', 'v3']"></si-select>
+ * <si-select [complexOptions]="{ g1: ['g1.i1', 'g1.i2'], g2: ['g2.i1']}"></si-select>
+ * ```
+ */
+class SiSelectComplexOptionsDirective extends SiSelectOptionsStrategyBase {
+    /** Options to be shown in select dropdown. */
+    complexOptions = input();
+    /**
+     * @deprecated Property has no effect and can be removed.
+     *
+     * @defaultValue
+     * ```
+     * buildTrackByIdentity<T>()
+     * ```
+     */
+    trackBy = input(buildTrackByIdentity());
+    /**
+     * By default, values are check on equality by reference. Override to customize the behavior.
+     *
+     * @defaultValue
+     * ```
+     * (a: T, b: T): boolean => a === b
+     * ```
+     */
+    optionsEqual = input((a, b) => a === b, {
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        alias: 'optionEqualCheckFn'
+    });
+    /**
+     * The valueProvider is used to extract the display text of a value.
+     */
+    valueProvider = input();
+    /**
+     * Provides Value for the display text of the dropdown group
+     *
+     * @defaultValue
+     * ```
+     * () => undefined
+     * ```
+     */
+    groupProvider = input(() => undefined);
+    /**
+     * The disabledProvider is used to display menu items as disabled.
+     *
+     * @defaultValue
+     * ```
+     * () => false
+     * ```
+     */
+    disabledProvider = input(() => false);
+    allRows = computed(() => {
+        const complexOptions = this.complexOptions();
+        if (complexOptions instanceof Array) {
+            return this.convertOptionsArray(complexOptions);
+        }
+        else if (complexOptions) {
+            const groupProvider = this.groupProvider();
+            return Object.entries(complexOptions).map(([key, value]) => ({
+                type: 'group',
+                key,
+                label: groupProvider(key) ?? key,
+                options: this.convertOptionsArray(value)
+            }));
+        }
+        else {
+            return [];
+        }
+    });
+    ngOnChanges() {
+        this.onFilter();
+    }
+    convertOptionsArray(options) {
+        const provide = this.valueProvider();
+        return options.map(option => {
+            return {
+                type: 'option',
+                value: option,
+                label: (provide ? provide(option) : undefined) ?? option + '',
+                typeaheadLabel: provide ? provide(option) : undefined,
+                disabled: this.disabledProvider()(option)
+            };
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectComplexOptionsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: SiSelectComplexOptionsDirective, isStandalone: true, selector: "si-select[complexOptions]", inputs: { complexOptions: { classPropertyName: "complexOptions", publicName: "complexOptions", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, optionsEqual: { classPropertyName: "optionsEqual", publicName: "optionEqualCheckFn", isSignal: true, isRequired: false, transformFunction: null }, valueProvider: { classPropertyName: "valueProvider", publicName: "valueProvider", isSignal: true, isRequired: false, transformFunction: null }, groupProvider: { classPropertyName: "groupProvider", publicName: "groupProvider", isSignal: true, isRequired: false, transformFunction: null }, disabledProvider: { classPropertyName: "disabledProvider", publicName: "disabledProvider", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: SI_SELECT_OPTIONS_STRATEGY, useExisting: SiSelectComplexOptionsDirective }], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectComplexOptionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'si-select[complexOptions]',
+                    providers: [{ provide: SI_SELECT_OPTIONS_STRATEGY, useExisting: SiSelectComplexOptionsDirective }]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * The directive allows to template/customize the value option rendering.
+ * This requires using the {@link SiSelectComplexOptionsDirective} to specify complex options as input.
+ *
+ * @example
+ * ```html
+ * <si-select [options]="[{ id: 'good', title: 'Good' }, { id: 'fair', title: 'Fair' }, { id: 'bad', title: 'Bad' }]" >
+ *   <ng-template siSelectOptionTemplate let-option>{{ option.value | uppercase }}</ng-template>
+ * </si-select>
+ * ```
+ */
+class SiSelectOptionTemplateDirective {
+    /** @internal */
+    static ngTemplateContextGuard(directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectOptionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiSelectOptionTemplateDirective, isStandalone: true, selector: "[siSelectOptionTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectOptionTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siSelectOptionTemplate]'
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSelectOptionComponent {
+    option = input.required();
+    optionTemplate = input();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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-next\n        class=\"icon me-2\"\n        [icon]=\"item.icon\"\n        [ngClass]=\"[(!item.disabled && item.iconColor) || '']\"\n      />\n      @if (item.stackedIcon) {\n        <si-icon-next\n          class=\"icon me-2\"\n          [icon]=\"item.stackedIcon\"\n          [ngClass]=\"item.stackedIconColor\"\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }, { kind: "directive", type: SiSelectOptionTemplateDirective, selector: "[siSelectOptionTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-select-option', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgClass,
+                        NgTemplateOutlet,
+                        SiIconNextComponent,
+                        SiTranslateModule,
+                        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-next\n        class=\"icon me-2\"\n        [icon]=\"item.icon\"\n        [ngClass]=\"[(!item.disabled && item.iconColor) || '']\"\n      />\n      @if (item.stackedIcon) {\n        <si-icon-next\n          class=\"icon me-2\"\n          [icon]=\"item.stackedIcon\"\n          [ngClass]=\"item.stackedIconColor\"\n        />\n      }\n    </i>\n  }\n  @if (item.label) {\n    <span class=\"text-truncate\">{{ item.label | translate }}</span>\n  }\n</ng-template>\n" }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Selection strategy base class.
+ */
+class SiSelectSelectionStrategy {
+    /**
+     * Whether the select input is disabled.
+     *
+     * @defaultValue false
+     */
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });
+    /**
+     * The selected value(s).
+     */
+    set value(value) {
+        this.updateFromInput(this.toArrayValue(value));
+    }
+    /** Emitted when the selection is changed */
+    valueChange = output();
+    /**
+     * Provides the internal value always as an array
+     * @internal
+     */
+    arrayValue = computed(() => this.selectOptions.selectedRows().map(option => option.value));
+    /**
+     * Registered form callback which shall be called on blur.
+     * @internal
+     */
+    onTouched = () => { };
+    /** @internal */
+    disabled = computed(() => this.disabledInput() || this.disabledNgControl());
+    onChange = () => { };
+    disabledNgControl = signal(false);
+    selectOptions = inject(SI_SELECT_OPTIONS_STRATEGY);
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * CDK Listbox value changed handler.
+     * @internal
+     */
+    updateFromUser(values) {
+        const parsedValue = this.fromArrayValue(values);
+        this.onChange(parsedValue);
+        this.valueChange.emit(parsedValue);
+        this.selectOptions.onValueChange(values);
+    }
+    setDisabledState(isDisabled) {
+        this.disabledNgControl.set(isDisabled);
+    }
+    writeValue(obj) {
+        this.updateFromInput(this.toArrayValue(obj));
+    }
+    updateFromInput(values) {
+        this.selectOptions.onValueChange(values);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectSelectionStrategy, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", 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: "19.0.6", ngImport: i0, type: SiSelectSelectionStrategy, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[class.disabled]': 'disabled()'
+                    }
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSelectInputComponent {
+    baseId = input.required();
+    /**
+     * Aria labelledby of the select.
+     *
+     * @defaultValue null
+     */
+    labelledby = input(null);
+    /**
+     * Aria label of the select.
+     *
+     * @defaultValue null
+     */
+    ariaLabel = input(null);
+    /** @defaultValue false */
+    open = input(false, { transform: booleanAttribute });
+    placeholder = input();
+    controls = input.required();
+    optionTemplate = input();
+    /** @defaultValue false */
+    readonly = input(false, { transform: booleanAttribute });
+    openListbox = output();
+    selectionStrategy = inject((SiSelectSelectionStrategy));
+    selectOptions = inject(SI_SELECT_OPTIONS_STRATEGY);
+    selectedRows = this.selectOptions.selectedRows;
+    labeledBy = computed(() => `${this.baseId()}-aria-label ${this.labelledby()}`);
+    icons = addIcons({ elementDown2 });
+    blur() {
+        if (!this.open()) {
+            this.selectionStrategy.onTouched();
+        }
+    }
+    click(event) {
+        event?.preventDefault();
+        this.openListbox.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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: { "role": "combobox", "aria-autocomplete": "none", "aria-haspopup": "listbox" }, 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.aria-expanded": "open()", "attr.aria-readonly": "readonly()", "attr.aria-controls": "controls()", "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-grow-1\"\n  [class.overflow-hidden]=\"!selectionStrategy.allowMultiple\"\n  [id]=\"baseId() + '-content'\"\n  [siAutoCollapsableList]=\"selectionStrategy.allowMultiple\"\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\"\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<si-icon-next\n  class=\"dropdown-caret icon flip-rtl\"\n  [class.text-muted]=\"readonly()\"\n  [icon]=\"icons.elementDown2\"\n/>\n", styles: ["@charset \"UTF-8\";:host{cursor:pointer;font-weight:700;min-inline-size:72px;block-size:100%;color:var(--element-text-primary);padding-block:4px;padding-inline-end:calc(12px + var(--si-feedback-icon-offset, 0px))}:host.disabled{color:var(--element-text-disabled)}:host-context(.form-control) :host{font-weight:400;padding-block:3px}: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}.dropdown-caret{transform:translate(var(--si-feedback-icon-offset, 0))}\n"], dependencies: [{ kind: "ngmodule", type: SiAutoCollapsableListModule }, { kind: "directive", type: i1$1.SiAutoCollapsableListDirective, selector: "[siAutoCollapsableList]", inputs: ["siAutoCollapsableList", "gap", "siAutoCollapsableListContainerElement"], exportAs: ["siAutoCollapsableList"] }, { kind: "directive", type: i1$1.SiAutoCollapsableListItemDirective, selector: "[siAutoCollapsableListItem]", inputs: ["forceHide"], exportAs: ["siAutoCollapsableListItem"] }, { kind: "directive", type: i1$1.SiAutoCollapsableListOverflowItemDirective, selector: "[siAutoCollapsableListOverflowItem]", exportAs: ["siAutoCollapsableListOverflowItem"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "component", type: SiSelectOptionComponent, selector: "si-select-option", inputs: ["option", "optionTemplate"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-select-input', imports: [
+                        SiAutoCollapsableListModule,
+                        SiIconNextComponent,
+                        SiSelectOptionComponent,
+                        SiTranslateModule
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        role: 'combobox',
+                        class: 'select focus-none dropdown-toggle d-flex align-items-center ps-4',
+                        'aria-autocomplete': 'none',
+                        'aria-haspopup': 'listbox',
+                        '[attr.aria-expanded]': 'open()',
+                        '[attr.aria-readonly]': 'readonly()',
+                        '[attr.aria-controls]': 'controls()',
+                        '[attr.aria-labelledby]': 'labeledBy()',
+                        '[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-grow-1\"\n  [class.overflow-hidden]=\"!selectionStrategy.allowMultiple\"\n  [id]=\"baseId() + '-content'\"\n  [siAutoCollapsableList]=\"selectionStrategy.allowMultiple\"\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\"\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<si-icon-next\n  class=\"dropdown-caret icon flip-rtl\"\n  [class.text-muted]=\"readonly()\"\n  [icon]=\"icons.elementDown2\"\n/>\n", styles: ["@charset \"UTF-8\";:host{cursor:pointer;font-weight:700;min-inline-size:72px;block-size:100%;color:var(--element-text-primary);padding-block:4px;padding-inline-end:calc(12px + var(--si-feedback-icon-offset, 0px))}:host.disabled{color:var(--element-text-disabled)}:host-context(.form-control) :host{font-weight:400;padding-block:3px}: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}.dropdown-caret{transform:translate(var(--si-feedback-icon-offset, 0))}\n"] }]
+        }], propDecorators: { 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']
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSelectOptionRowComponent {
+    option = input.required();
+    optionTemplate = input();
+    /** @defaultValue false */
+    selected = input(false, { transform: booleanAttribute });
+    icons = addIcons({ elementOk });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectOptionRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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-next [icon]=\"icons.elementOk\" />\n  </span>\n}\n", styles: [".selected-marker>span{font-size:1.5rem;margin-inline-end:-.25rem}.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: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "component", type: SiSelectOptionComponent, selector: "si-select-option", inputs: ["option", "optionTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectOptionRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-select-option-row', imports: [SiIconNextComponent, SiSelectOptionComponent], host: {
+                        class: 'dropdown-item focus-none pe-4 gap-4',
+                        '[class.disabled]': '!!this.option().disabled',
+                        '[attr.aria-selected]': 'selected()',
+                        '[attr.data-id]': 'this.option().value'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, 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-next [icon]=\"icons.elementOk\" />\n  </span>\n}\n", styles: [".selected-marker>span{font-size:1.5rem;margin-inline-end:-.25rem}.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"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * The directive allows to template/customize the group option rendering.
+ * This requires using the {@link SiSelectComplexOptionsDirective} to specify complex options as input.
+ *
+ * @example
+ * ```html
+ * <si-select [complexOptions]="{ g1: ['g1.i1', 'g1.i2'], g2: ['g2.i1'] }" >
+ *   <ng-template siSelectGroupTemplate let-group>{{ group.key | uppercase }}</ng-template>
+ * </si-select>
+ * ```
+ */
+class SiSelectGroupTemplateDirective {
+    static ngTemplateContextGuard(directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectGroupTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiSelectGroupTemplateDirective, isStandalone: true, selector: "[siSelectGroupTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectGroupTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siSelectGroupTemplate]'
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSelectOptionRowTemplateDirective {
+    static ngTemplateContextGuard(directive, context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectOptionRowTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiSelectOptionRowTemplateDirective, isStandalone: true, selector: "[siSelectOptionRowTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectOptionRowTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siSelectOptionRowTemplate]'
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSelectListBase {
+    baseId = input.required();
+    optionTemplate = input();
+    groupTemplate = input();
+    /** @defaultValue null */
+    labelledby = input(null);
+    actionsTemplate = input();
+    closeOverlay = output();
+    selectionStrategy = inject(SiSelectSelectionStrategy);
+    selectOptions = inject(SI_SELECT_OPTIONS_STRATEGY);
+    focusTrapFactory = inject(ConfigurableFocusTrapFactory);
+    elementRef = inject(ElementRef);
+    rows = this.selectOptions.rows;
+    focusTrap;
+    multiSelect = this.selectionStrategy.allowMultiple;
+    ngOnInit() {
+        this.focusTrap = this.focusTrapFactory.create(this.elementRef.nativeElement);
+    }
+    ngOnDestroy() {
+        this.focusTrap.destroy();
+    }
+    keydownTab() {
+        // Ignore tab key if actions are displayed.
+        if (!this.actionsTemplate()) {
+            this.closeOverlayAlways();
+        }
+    }
+    closeOverlayAlways() {
+        this.closeOverlay.emit();
+    }
+    closeOverlayIfSingle() {
+        if (!this.selectionStrategy.allowMultiple) {
+            this.closeOverlayAlways();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectListBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectListBase, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        class: 'dropdown-menu position-static w-100 py-4 d-flex flex-column'
+                    }
+                }]
+        }], propDecorators: { multiSelect: [{
+                type: HostBinding,
+                args: ['class.si-multi-select']
+            }], keydownTab: [{
+                type: HostListener,
+                args: ['keydown.tab']
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSelectListHasFilterComponent extends SiSelectListBase {
+    /** Placeholder for search input field. */
+    filterPlaceholder = input.required();
+    /** Label if no item can be found. */
+    noResultsFoundLabel = input.required();
+    filterInput = viewChild.required('filter');
+    initIndex;
+    id = computed(() => `${this.baseId()}-listbox`);
+    icons = addIcons({ elementSearch });
+    constructor() {
+        super();
+        if (!this.selectOptions.onFilter) {
+            console.error('Missing implementation for `onFilter`');
+        }
+        const firstValue = this.selectionStrategy.arrayValue()[0];
+        if (firstValue) {
+            this.initIndex = computed(() => this.rows().findIndex(row => row.type === 'option' && row.value === firstValue));
+        }
+        else {
+            this.initIndex = signal(0);
+        }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.selectOptions.onFilter();
+        setTimeout(() => this.filterInput().nativeElement.focus());
+    }
+    input() {
+        this.selectOptions.onFilter(this.filterInput().nativeElement.value);
+    }
+    select(newValue) {
+        if (this.selectionStrategy.allowMultiple) {
+            if (this.selectionStrategy.arrayValue().includes(newValue)) {
+                this.selectionStrategy.updateFromUser(this.selectionStrategy.arrayValue().filter(value => value !== newValue));
+            }
+            else {
+                this.selectionStrategy.updateFromUser([...this.selectionStrategy.arrayValue(), newValue]);
+            }
+        }
+        else {
+            this.selectionStrategy.updateFromUser([newValue]);
+        }
+        this.closeOverlayIfSingle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectListHasFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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-next\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  @if (!rows().length) {\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  @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  }\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.5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SiAutocompleteDirective, selector: "input[siAutocomplete]", exportAs: ["siAutocomplete"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", 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: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }, { kind: "ngmodule", type: SiAutocompleteModule }, { kind: "directive", type: i2.SiAutocompleteListboxDirective, selector: "[siAutocompleteListboxFor]", inputs: ["id", "siAutocompleteListboxFor", "siAutocompleteDefaultIndex"], outputs: ["siAutocompleteOptionSubmitted"], exportAs: ["siAutocompleteListbox"] }, { kind: "directive", type: i2.SiAutocompleteOptionDirective, selector: "[siAutocompleteOption]", inputs: ["id", "disabled", "siAutocompleteOption"], exportAs: ["siAutocompleteOption"] }, { kind: "component", type: SiLoadingSpinnerComponent, selector: "si-loading-spinner", inputs: ["isBlockingSpinner", "isSpinnerOverlay", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectListHasFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-select-list-has-filter', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
+                        SiAutocompleteDirective,
+                        SiIconNextComponent,
+                        SiSelectGroupTemplateDirective,
+                        SiSelectOptionRowComponent,
+                        SiSelectOptionRowTemplateDirective,
+                        SiTranslateModule,
+                        SiAutocompleteModule,
+                        SiLoadingSpinnerComponent
+                    ], 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-next\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  @if (!rows().length) {\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  @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  }\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.5rem}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSelectListComponent extends SiSelectListBase {
+    listbox = viewChild.required(CdkListbox, {
+        read: ElementRef
+    });
+    ngOnInit() {
+        super.ngOnInit();
+        setTimeout(() => this.listbox().nativeElement.focus());
+    }
+    listBoxValueChange(changeEvent) {
+        this.selectionStrategy.updateFromUser(changeEvent.value.slice());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-select-list', imports: [
+                        CommonModule,
+                        CdkListbox,
+                        SiTranslateModule,
+                        CdkOption,
+                        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"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSelectActionsDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiSelectActionsDirective, isStandalone: true, selector: "[siSelectActions]", exportAs: ["si-select-actions"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siSelectActions]',
+                    exportAs: 'si-select-actions'
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSelectComponent {
+    static idCounter = 0;
+    /**
+     * Unique identifier.
+     *
+     * @defaultValue
+     * ```
+     * `__si-select-${SiSelectComponent.idCounter++}`
+     * ```
+     */
+    id = input(`__si-select-${SiSelectComponent.idCounter++}`);
+    /**
+     * Aria label of the select.
+     *
+     * @defaultValue null
+     */
+    ariaLabel = input(null);
+    /**
+     * Aria labelledby of the select.
+     * @defaultValue undefined
+     */
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    labelledbyInput = input(undefined, { alias: 'labelledby' });
+    /**
+     * Placeholder for search input field.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_SELECT.SEARCH-PLACEHOLDER:Search...`
+     * ```
+     */
+    filterPlaceholder = input($localize `:@@SI_SELECT.SEARCH-PLACEHOLDER:Search...`);
+    /**
+     * Label if no item can be found.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_SELECT.NO-RESULTS-FOUND:No results found`
+     * ```
+     */
+    noResultsFoundLabel = input($localize `:@@SI_SELECT.NO-RESULTS-FOUND:No results found`);
+    /** Placeholder text to display when no options are selected. */
+    placeholder = input();
+    /**
+     * Readonly state. Similar to disabled but with higher contrast *
+     *
+     * @defaultValue false
+     */
+    readonly = input(false, { transform: booleanAttribute });
+    /**
+     * Emits on selection dropdown close.
+     * @deprecated Use {@link openChange} instead.
+     */
+    dropdownClose = output();
+    /** Emits when the dropdown open state changes. */
+    openChange = output();
+    isOpen = signal(false);
+    optionTemplate = contentChild(SiSelectOptionTemplateDirective, { read: TemplateRef });
+    groupTemplate = contentChild(SiSelectGroupTemplateDirective, { read: TemplateRef });
+    actionsTemplate = contentChild(SiSelectActionsDirective, { read: TemplateRef });
+    trigger = viewChild.required(CdkOverlayOrigin, {
+        read: ElementRef
+    });
+    /** @internal */
+    labelledby = computed(() => this.labelledbyInput() ?? this.id() + '-label');
+    /** @internal */
+    errormessageId = `${this.id()}-errormessage`;
+    rows = [];
+    overlayWidth = 0;
+    selectionStrategy = inject((SiSelectSelectionStrategy));
+    backdropClicked = false;
+    selectOptions = inject(SI_SELECT_OPTIONS_STRATEGY);
+    /**
+     * Enables the filter input
+     * @defaultValue false
+     * @defaultref {@link SiSelectComponent#_hasFilter}
+     */
+    hasFilter = input(false, { transform: booleanAttribute });
+    ngOnChanges(changes) {
+        if (changes.hasFilter && this.hasFilter()) {
+            this.verifyValueProvider();
+        }
+    }
+    ngAfterContentInit() {
+        this.verifyValueProvider();
+    }
+    /** Opens the `si-select`. */
+    open() {
+        if (this.readonly() || this.selectionStrategy.disabled()) {
+            return;
+        }
+        this.overlayWidth = this.trigger().nativeElement.getBoundingClientRect().width + 2; // 2px border
+        this.isOpen.set(true);
+        this.openChange.emit(true);
+    }
+    /** Closes the `si-select`. */
+    close() {
+        this.isOpen.set(false);
+        if (!this.backdropClicked) {
+            this.trigger().nativeElement.focus();
+        }
+        else {
+            this.backdropClicked = false;
+            this.selectionStrategy.onTouched();
+        }
+        this.dropdownClose.emit();
+        this.openChange.emit(false);
+    }
+    backdropClick() {
+        this.backdropClicked = true;
+        this.isOpen.set(false);
+    }
+    verifyValueProvider() {
+        if (this.hasFilter() &&
+            this.optionTemplate() &&
+            this.selectOptions instanceof SiSelectComplexOptionsDirective &&
+            !this.selectOptions.valueProvider()) {
+            console.error('A valueProvider is required when [hasFilter]="true" and having custom option template on si-select');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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 }, hasFilter: { classPropertyName: "hasFilter", publicName: "hasFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdownClose: "dropdownClose", 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 }], usesOnChanges: 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  [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;--si-action-icon-offset: 20px}: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"], 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        OverlayModule,
+                        SiSelectInputComponent,
+                        SiSelectListComponent,
+                        SiSelectListHasFilterComponent
+                    ], host: {
+                        class: 'dropdown',
+                        '[class.readonly]': 'readonly()',
+                        '[class.open]': 'isOpen()',
+                        '[class.si-select-has-filter]': 'hasFilter()'
+                    }, providers: [{ provide: SI_FORM_ITEM_CONTROL, useExisting: SiSelectComponent }], 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  [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;--si-action-icon-offset: 20px}: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"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSelectLazyOptionsDirective {
+    /**
+     * {@inheritDoc SiSelectOptionsStrategy#loading}
+     * @defaultValue false
+     */
+    loading = signal(false);
+    /**
+     * {@inheritDoc SiSelectOptionsStrategy#rows}
+     * @defaultValue []
+     */
+    rows = signal([]);
+    /**
+     * {@inheritDoc SiSelectOptionsStrategy#selectedRows}
+     * @defaultValue []
+     */
+    selectedRows = signal([]);
+    optionSource = input.required();
+    valueChange = new Subject();
+    filterChange = new Subject();
+    constructor() {
+        this.filterChange
+            .pipe(debounceTime(100), switchMap(filterInput => {
+            if (filterInput) {
+                return this.optionSource().getOptionsForSearch(filterInput);
+            }
+            else {
+                const optionSource = this.optionSource();
+                if (optionSource.getAllOptions) {
+                    return optionSource.getAllOptions();
+                }
+                else {
+                    return of(this.selectedRows());
+                }
+            }
+        }))
+            .subscribe(rows => {
+            this.loading.set(false);
+            this.rows.set(rows);
+        });
+    }
+    ngOnDestroy() {
+        this.valueChange.next();
+        this.valueChange.complete();
+        this.filterChange.complete();
+    }
+    /** {@inheritDoc SiSelectOptionsStrategy.onValueChange} */
+    onValueChange(value) {
+        this.valueChange.next();
+        // To prevent flickering, we need to check if we already got all the requested options.
+        // This should always be the case if the user selects one
+        const knownSelectedOptions = value
+            .map(valueEntry => this.selectedRows().find(selected => this.valueEqual(selected.value, valueEntry)) ??
+            this.rows().find(selected => selected.type === 'option' && this.valueEqual(selected.value, valueEntry)))
+            .filter(v => !!v);
+        const optionSource = this.optionSource();
+        if (knownSelectedOptions.length === value.length) {
+            if (optionSource.compareOptions) {
+                knownSelectedOptions.sort(optionSource.compareOptions);
+            }
+            this.selectedRows.set(knownSelectedOptions);
+        }
+        else {
+            // We don't have all options, so we need to fetch them.
+            optionSource
+                .getOptionsForValues(value)
+                .pipe(takeUntil(this.valueChange))
+                .subscribe(selectedOptions => this.selectedRows.set(selectedOptions));
+        }
+    }
+    /** {@inheritDoc SiSelectOptionsStrategy.onFilter} */
+    onFilter(filterInput) {
+        this.filterChange.next(filterInput);
+        this.loading.set(true);
+    }
+    valueEqual(a, b) {
+        if (a === b) {
+            return true;
+        }
+        if (!a || !b) {
+            return false;
+        }
+        const optionSource = this.optionSource();
+        if (optionSource.valuesEqual) {
+            return optionSource.valuesEqual(a, b);
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectLazyOptionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", 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: "19.0.6", ngImport: i0, type: SiSelectLazyOptionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'si-select[optionSource]',
+                    providers: [{ provide: SI_SELECT_OPTIONS_STRATEGY, useExisting: SiSelectLazyOptionsDirective }]
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * This directive allows passing {@link SelectItem} to the {@link SiSelectComponent}.
+ *
+ * @example
+ * ```html
+ * <si-select [options]="[{ type: 'option', value: 'one', label: 'One' }, { type: 'option', value: 'two', label: 'Two' }]"></si-select>
+ * <si-select [options]="[{ type: 'group', label: 'Group', options [{ type: 'option', value: 1, label: 'One' }, { type: 'option', value: 2, label: 'Two' }] }]"></si-select>
+ * ```
+ */
+class SiSelectSimpleOptionsDirective extends SiSelectOptionsStrategyBase {
+    /** Options to be shown in select dropdown */
+    options = input();
+    /**
+     * By default, values are check on referential equality. Provide a function to customize the behavior.
+     *
+     * @defaultValue
+     * ```
+     * (a: T, b: T): boolean => a === b
+     * ```
+     */
+    optionsEqual = input((a, b) => a === b, {
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        alias: 'optionEqualCheckFn'
+    });
+    allRows = computed(() => {
+        const options = this.options();
+        if (options) {
+            return options?.map(option => option.type
+                ? option
+                : {
+                    type: 'option',
+                    value: option.id,
+                    label: option.title,
+                    iconColor: option.color,
+                    icon: option.icon,
+                    disabled: option.disabled
+                });
+        }
+        else {
+            return [];
+        }
+    });
+    ngOnChanges() {
+        this.onFilter();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectSimpleOptionsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", 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, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectSimpleOptionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'si-select[options]',
+                    providers: [{ provide: SI_SELECT_OPTIONS_STRATEGY, useExisting: SiSelectSimpleOptionsDirective }]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * The directive enables the single-select behavior.
+ * Otherwise, use the {@link SiSelectMultiValueDirective} directive.
+ *
+ * @example
+ * ```html
+ * <si-select [(value)]="selectedValue" [options]="[
+ *  { id: 'good', title: 'Good' },
+ *  { id: 'average', title: 'Average' },
+ *  { id: 'poor', title: 'Poor' }
+ * ]"></si-select>
+ * ```
+ */
+class SiSelectSingleValueDirective extends SiSelectSelectionStrategy {
+    /**
+     * {@inheritDoc SiSelectSelectionStrategy#allowMultiple}
+     * @defaultValue false
+     */
+    allowMultiple = false;
+    toArrayValue(value) {
+        return value !== undefined ? [value] : [];
+    }
+    fromArrayValue([value]) {
+        return value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectSingleValueDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiSelectSingleValueDirective, isStandalone: true, selector: "si-select:not([multi])", providers: [
+            { provide: SiSelectSelectionStrategy, useExisting: SiSelectSingleValueDirective },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: SiSelectSingleValueDirective,
+                multi: true
+            }
+        ], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectSingleValueDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'si-select:not([multi])',
+                    providers: [
+                        { provide: SiSelectSelectionStrategy, useExisting: SiSelectSingleValueDirective },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: SiSelectSingleValueDirective,
+                            multi: true
+                        }
+                    ]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * The directive enables the multi-select behavior.
+ * Otherwise, use the {@link SiSelectSingleValueDirective} directive.
+ *
+ * @example
+ * ```html
+ * <si-select multi [(value)]="multiValue" [options]="[
+ *  { id: 'good', title: 'Good' },
+ *  { id: 'average', title: 'Average' },
+ *  { id: 'poor', title: 'Poor' }
+ * ]"></si-select>
+ * ```
+ */
+class SiSelectMultiValueDirective extends SiSelectSelectionStrategy {
+    /**
+     * {@inheritDoc SiSelectSelectionStrategy#allowMultiple}
+     * @defaultValue true
+     */
+    allowMultiple = true;
+    fromArrayValue(value) {
+        return value;
+    }
+    toArrayValue(value) {
+        return value ?? [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectMultiValueDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiSelectMultiValueDirective, isStandalone: true, selector: "si-select[multi]", providers: [
+            { provide: SiSelectSelectionStrategy, useExisting: SiSelectMultiValueDirective },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: SiSelectMultiValueDirective,
+                multi: true
+            }
+        ], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectMultiValueDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'si-select[multi]',
+                    providers: [
+                        { provide: SiSelectSelectionStrategy, useExisting: SiSelectMultiValueDirective },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: SiSelectMultiValueDirective,
+                            multi: true
+                        }
+                    ]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSelectActionDirective {
+    select = inject(SiSelectComponent);
+    /**
+     * Close the select drop down on click.
+     * @defaultValue false
+     */
+    selectActionAutoClose = input(false, { transform: booleanAttribute });
+    close() {
+        if (this.selectActionAutoClose()) {
+            this.select.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", 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: "19.0.6", ngImport: i0, type: SiSelectActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siSelectAction]',
+                    exportAs: 'si-select-action',
+                    host: {
+                        class: 'mx-5 my-4'
+                    }
+                }]
+        }], propDecorators: { close: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSelectModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiSelectModule, imports: [SiSelectActionDirective,
+            SiSelectActionsDirective,
+            SiSelectComplexOptionsDirective,
+            SiSelectComponent,
+            SiSelectGroupTemplateDirective,
+            SiSelectMultiValueDirective,
+            SiSelectOptionTemplateDirective,
+            SiSelectSimpleOptionsDirective,
+            SiSelectSingleValueDirective], exports: [SiSelectActionDirective,
+            SiSelectActionsDirective,
+            SiSelectComplexOptionsDirective,
+            SiSelectComponent,
+            SiSelectGroupTemplateDirective,
+            SiSelectMultiValueDirective,
+            SiSelectOptionTemplateDirective,
+            SiSelectSimpleOptionsDirective,
+            SiSelectSingleValueDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectModule, imports: [SiSelectComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        SiSelectActionDirective,
+                        SiSelectActionsDirective,
+                        SiSelectComplexOptionsDirective,
+                        SiSelectComponent,
+                        SiSelectGroupTemplateDirective,
+                        SiSelectMultiValueDirective,
+                        SiSelectOptionTemplateDirective,
+                        SiSelectSimpleOptionsDirective,
+                        SiSelectSingleValueDirective
+                    ],
+                    exports: [
+                        SiSelectActionDirective,
+                        SiSelectActionsDirective,
+                        SiSelectComplexOptionsDirective,
+                        SiSelectComponent,
+                        SiSelectGroupTemplateDirective,
+                        SiSelectMultiValueDirective,
+                        SiSelectOptionTemplateDirective,
+                        SiSelectSimpleOptionsDirective,
+                        SiSelectSingleValueDirective
+                    ]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiSelectActionDirective, SiSelectActionsDirective, SiSelectComplexOptionsDirective, SiSelectComponent, SiSelectGroupTemplateDirective, SiSelectLazyOptionsDirective, SiSelectListHasFilterComponent, SiSelectModule, SiSelectMultiValueDirective, SiSelectOptionTemplateDirective, SiSelectSimpleOptionsDirective, SiSelectSingleValueDirective };
+//# sourceMappingURL=siemens-element-ng-select.mjs.map