@siemens/element-ng 49.14.0 → 49.15.0

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

@@ -2,6 +2,7 @@ import * as i1$3 from '@angular/cdk/overlay';
 import { CdkOverlayOrigin, OverlayModule, Overlay } from '@angular/cdk/overlay';
 import * as i0 from '@angular/core';
 import { InjectionToken, Directive, input, ChangeDetectionStrategy, Component, booleanAttribute, output, computed, signal, inject, Input, ElementRef, viewChild, contentChild, TemplateRef, NgModule, model, ViewContainerRef, DestroyRef, PLATFORM_ID } from '@angular/core';
+import { defaultConnectedOverlayScrollStrategy } from '@siemens/element-ng/common';
 import { SI_FORM_ITEM_CONTROL } from '@siemens/element-ng/form';
 import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
 import { elementDown2, elementOk, elementSearch } from '@siemens/element-icons';
@@ -62,7 +63,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiSelectOptionComponent {
+    /**
+     * Option to render.
+     */
     option = input.required(...(ngDevMode ? [{ debugName: "option" }] : []));
+    /**
+     * Custom template for rendering the option.
+     */
     optionTemplate = input(...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSelectOptionComponent, isStandalone: true, selector: "si-select-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-flex align-items-center overflow-hidden" }, ngImport: i0, template: "<ng-container\n  [ngTemplateOutlet]=\"optionTemplate() ?? defaultOptionTemplate\"\n  [ngTemplateOutletContext]=\"{ $implicit: option() }\"\n/>\n\n<ng-template #defaultOptionTemplate let-item siSelectOptionTemplate>\n  @if (item.icon) {\n    <i class=\"icon-stack\">\n      <si-icon\n        class=\"icon me-2\"\n        [icon]=\"item.icon\"\n        [class]=\"!item.disabled && item.iconColor ? item.iconColor : ''\"\n      />\n      @if (item.stackedIcon) {\n        <si-icon\n          class=\"icon me-2\"\n          [class]=\"item.stackedIconColor ?? ''\"\n          [icon]=\"item.stackedIcon\"\n        />\n      }\n    </i>\n  }\n  @if (item.label) {\n    <span class=\"text-truncate\">{{ item.label | translate }}</span>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiSelectOptionTemplateDirective, selector: "[siSelectOptionTemplate]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -156,6 +163,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiSelectInputComponent {
+    /**
+     * Base ID used to associate the input with its label.
+     */
     baseId = input.required(...(ngDevMode ? [{ debugName: "baseId" }] : []));
     /**
      * Aria labelledby of the select.
@@ -169,13 +179,33 @@ class SiSelectInputComponent {
      * @defaultValue null
      */
     ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
-    /** @defaultValue false */
+    /**
+     * Whether the listbox is open.
+     *
+     * @defaultValue false
+     */
     open = input(false, { ...(ngDevMode ? { debugName: "open" } : {}), transform: booleanAttribute });
+    /**
+     * Text shown when no option is selected.
+     */
     placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+    /**
+     * ID of the associated listbox.
+     */
     controls = input.required(...(ngDevMode ? [{ debugName: "controls" }] : []));
+    /**
+     * Custom template for rendering selected options.
+     */
     optionTemplate = input(...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : []));
-    /** @defaultValue false */
+    /**
+     * Whether the input is read-only.
+     *
+     * @defaultValue false
+     */
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    /**
+     * Emits when the user requests to open the listbox.
+     */
     openListbox = output();
     selectionStrategy = inject((SiSelectSelectionStrategy));
     selectOptions = inject(SI_SELECT_OPTIONS_STRATEGY);
@@ -226,9 +256,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiSelectOptionRowComponent {
+    /**
+     * Option displayed by the row.
+     */
     option = input.required(...(ngDevMode ? [{ debugName: "option" }] : []));
+    /**
+     * Custom template for rendering the option.
+     */
     optionTemplate = input(...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : []));
-    /** @defaultValue false */
+    /**
+     * Whether the option is selected.
+     *
+     * @defaultValue false
+     */
     selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : {}), transform: booleanAttribute });
     icons = addIcons({ elementOk });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectOptionRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -304,12 +344,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiSelectListBase {
+    /**
+     * Base ID used to associate the listbox with its label.
+     */
     baseId = input.required(...(ngDevMode ? [{ debugName: "baseId" }] : []));
+    /**
+     * Custom template for rendering options.
+     */
     optionTemplate = input(...(ngDevMode ? [undefined, { debugName: "optionTemplate" }] : []));
+    /**
+     * Custom template for rendering option groups.
+     */
     groupTemplate = input(...(ngDevMode ? [undefined, { debugName: "groupTemplate" }] : []));
     /** @defaultValue null */
     labelledby = input(null, ...(ngDevMode ? [{ debugName: "labelledby" }] : []));
+    /**
+     * Custom template for actions displayed below the options.
+     */
     actionsTemplate = input(...(ngDevMode ? [undefined, { debugName: "actionsTemplate" }] : []));
+    /**
+     * Emits when the listbox should close.
+     */
     closeOverlay = output();
     selectionStrategy = inject(SiSelectSelectionStrategy);
     selectOptions = inject(SI_SELECT_OPTIONS_STRATEGY);
@@ -527,6 +582,12 @@ class SiSelectComponent {
      * @defaultValue false
      */
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    /**
+     * Optional CDK scroll strategy used for the select overlay.
+     *
+     * @defaultValue defaultConnectedOverlayScrollStrategy()
+     */
+    scrollStrategy = input(defaultConnectedOverlayScrollStrategy(), ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : []));
     /** Emits when the dropdown open state changes. */
     openChange = output();
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
@@ -585,7 +646,7 @@ class SiSelectComponent {
         this.isOpen.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSelectComponent, isStandalone: true, selector: "si-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledbyInput: { classPropertyName: "labelledbyInput", publicName: "labelledby", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsFoundLabel: { classPropertyName: "noResultsFoundLabel", publicName: "noResultsFoundLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, errormessageId: { classPropertyName: "errormessageId", publicName: "errormessageId", isSignal: true, isRequired: false, transformFunction: null }, hasFilter: { classPropertyName: "hasFilter", publicName: "hasFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, host: { properties: { "class.readonly": "readonly()", "class.open": "isOpen()", "class.si-select-has-filter": "hasFilter()" }, classAttribute: "dropdown" }, providers: [{ provide: SI_FORM_ITEM_CONTROL, useExisting: SiSelectComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: SiSelectOptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: SiSelectGroupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "actionsTemplate", first: true, predicate: SiSelectActionsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<si-select-input\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  [baseId]=\"id()\"\n  [labelledby]=\"labelledby()\"\n  [optionTemplate]=\"optionTemplate()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [controls]=\"id() + '-listbox'\"\n  [open]=\"isOpen()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"readonly()\"\n  [attr.aria-describedby]=\"errormessageId()\"\n  (openListbox)=\"open()\"\n/>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayOffsetX]=\"-1\"\n  [cdkConnectedOverlayMinWidth]=\"overlayWidth\"\n  (backdropClick)=\"backdropClick()\"\n  (detach)=\"close()\"\n>\n  @if (!hasFilter()) {\n    <si-select-list\n      [baseId]=\"id()\"\n      [optionTemplate]=\"optionTemplate()\"\n      [groupTemplate]=\"groupTemplate()\"\n      [labelledby]=\"labelledby()\"\n      [actionsTemplate]=\"actionsTemplate()\"\n      (closeOverlay)=\"close()\"\n    />\n  } @else {\n    <si-select-list-has-filter\n      [baseId]=\"id()\"\n      [filterPlaceholder]=\"filterPlaceholder()\"\n      [noResultsFoundLabel]=\"noResultsFoundLabel()\"\n      [optionTemplate]=\"optionTemplate()\"\n      [groupTemplate]=\"groupTemplate()\"\n      [labelledby]=\"labelledby()\"\n      [actionsTemplate]=\"actionsTemplate()\"\n      (closeOverlay)=\"close()\"\n    />\n  }\n</ng-template>\n", styles: [":host{display:inline-block;padding:0;block-size:2rem}:host:focus-within,:host.open:not(.si-select-has-filter){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}:host.readonly,:host.disabled{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: SiSelectInputComponent, selector: "si-select-input", inputs: ["baseId", "labelledby", "ariaLabel", "open", "placeholder", "controls", "optionTemplate", "readonly"], outputs: ["openListbox"] }, { kind: "component", type: SiSelectListComponent, selector: "si-select-list" }, { kind: "component", type: SiSelectListHasFilterComponent, selector: "si-select-list-has-filter", inputs: ["filterPlaceholder", "noResultsFoundLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSelectComponent, isStandalone: true, selector: "si-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledbyInput: { classPropertyName: "labelledbyInput", publicName: "labelledby", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsFoundLabel: { classPropertyName: "noResultsFoundLabel", publicName: "noResultsFoundLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, errormessageId: { classPropertyName: "errormessageId", publicName: "errormessageId", isSignal: true, isRequired: false, transformFunction: null }, hasFilter: { classPropertyName: "hasFilter", publicName: "hasFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, host: { properties: { "class.readonly": "readonly()", "class.open": "isOpen()", "class.si-select-has-filter": "hasFilter()" }, classAttribute: "dropdown" }, providers: [{ provide: SI_FORM_ITEM_CONTROL, useExisting: SiSelectComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: SiSelectOptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: SiSelectGroupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "actionsTemplate", first: true, predicate: SiSelectActionsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<si-select-input\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  [baseId]=\"id()\"\n  [labelledby]=\"labelledby()\"\n  [optionTemplate]=\"optionTemplate()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [controls]=\"id() + '-listbox'\"\n  [open]=\"isOpen()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"readonly()\"\n  [attr.aria-describedby]=\"errormessageId()\"\n  (openListbox)=\"open()\"\n/>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayOffsetX]=\"-1\"\n  [cdkConnectedOverlayMinWidth]=\"overlayWidth\"\n  (backdropClick)=\"backdropClick()\"\n  (detach)=\"close()\"\n>\n  @if (!hasFilter()) {\n    <si-select-list\n      [baseId]=\"id()\"\n      [optionTemplate]=\"optionTemplate()\"\n      [groupTemplate]=\"groupTemplate()\"\n      [labelledby]=\"labelledby()\"\n      [actionsTemplate]=\"actionsTemplate()\"\n      (closeOverlay)=\"close()\"\n    />\n  } @else {\n    <si-select-list-has-filter\n      [baseId]=\"id()\"\n      [filterPlaceholder]=\"filterPlaceholder()\"\n      [noResultsFoundLabel]=\"noResultsFoundLabel()\"\n      [optionTemplate]=\"optionTemplate()\"\n      [groupTemplate]=\"groupTemplate()\"\n      [labelledby]=\"labelledby()\"\n      [actionsTemplate]=\"actionsTemplate()\"\n      (closeOverlay)=\"close()\"\n    />\n  }\n</ng-template>\n", styles: [":host{display:inline-block;padding:0;block-size:2rem}:host:focus-within,:host.open:not(.si-select-has-filter){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}:host.readonly,:host.disabled{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: SiSelectInputComponent, selector: "si-select-input", inputs: ["baseId", "labelledby", "ariaLabel", "open", "placeholder", "controls", "optionTemplate", "readonly"], outputs: ["openListbox"] }, { kind: "component", type: SiSelectListComponent, selector: "si-select-list" }, { kind: "component", type: SiSelectListHasFilterComponent, selector: "si-select-list-has-filter", inputs: ["filterPlaceholder", "noResultsFoundLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectComponent, decorators: [{
             type: Component,
@@ -599,8 +660,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[class.readonly]': 'readonly()',
                         '[class.open]': 'isOpen()',
                         '[class.si-select-has-filter]': 'hasFilter()'
-                    }, template: "<si-select-input\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  [baseId]=\"id()\"\n  [labelledby]=\"labelledby()\"\n  [optionTemplate]=\"optionTemplate()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [controls]=\"id() + '-listbox'\"\n  [open]=\"isOpen()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"readonly()\"\n  [attr.aria-describedby]=\"errormessageId()\"\n  (openListbox)=\"open()\"\n/>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayOffsetX]=\"-1\"\n  [cdkConnectedOverlayMinWidth]=\"overlayWidth\"\n  (backdropClick)=\"backdropClick()\"\n  (detach)=\"close()\"\n>\n  @if (!hasFilter()) {\n    <si-select-list\n      [baseId]=\"id()\"\n      [optionTemplate]=\"optionTemplate()\"\n      [groupTemplate]=\"groupTemplate()\"\n      [labelledby]=\"labelledby()\"\n      [actionsTemplate]=\"actionsTemplate()\"\n      (closeOverlay)=\"close()\"\n    />\n  } @else {\n    <si-select-list-has-filter\n      [baseId]=\"id()\"\n      [filterPlaceholder]=\"filterPlaceholder()\"\n      [noResultsFoundLabel]=\"noResultsFoundLabel()\"\n      [optionTemplate]=\"optionTemplate()\"\n      [groupTemplate]=\"groupTemplate()\"\n      [labelledby]=\"labelledby()\"\n      [actionsTemplate]=\"actionsTemplate()\"\n      (closeOverlay)=\"close()\"\n    />\n  }\n</ng-template>\n", styles: [":host{display:inline-block;padding:0;block-size:2rem}:host:focus-within,:host.open:not(.si-select-has-filter){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}:host.readonly,:host.disabled{pointer-events:none}\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], labelledbyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelledby", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], noResultsFoundLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsFoundLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SiSelectOptionTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SiSelectGroupTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], actionsTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SiSelectActionsDirective), { ...{ read: TemplateRef }, isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { ...{
+                    }, template: "<si-select-input\n  #trigger=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  [baseId]=\"id()\"\n  [labelledby]=\"labelledby()\"\n  [optionTemplate]=\"optionTemplate()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [controls]=\"id() + '-listbox'\"\n  [open]=\"isOpen()\"\n  [placeholder]=\"placeholder()\"\n  [readonly]=\"readonly()\"\n  [attr.aria-describedby]=\"errormessageId()\"\n  (openListbox)=\"open()\"\n/>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  [cdkConnectedOverlayOffsetX]=\"-1\"\n  [cdkConnectedOverlayMinWidth]=\"overlayWidth\"\n  (backdropClick)=\"backdropClick()\"\n  (detach)=\"close()\"\n>\n  @if (!hasFilter()) {\n    <si-select-list\n      [baseId]=\"id()\"\n      [optionTemplate]=\"optionTemplate()\"\n      [groupTemplate]=\"groupTemplate()\"\n      [labelledby]=\"labelledby()\"\n      [actionsTemplate]=\"actionsTemplate()\"\n      (closeOverlay)=\"close()\"\n    />\n  } @else {\n    <si-select-list-has-filter\n      [baseId]=\"id()\"\n      [filterPlaceholder]=\"filterPlaceholder()\"\n      [noResultsFoundLabel]=\"noResultsFoundLabel()\"\n      [optionTemplate]=\"optionTemplate()\"\n      [groupTemplate]=\"groupTemplate()\"\n      [labelledby]=\"labelledby()\"\n      [actionsTemplate]=\"actionsTemplate()\"\n      (closeOverlay)=\"close()\"\n    />\n  }\n</ng-template>\n", styles: [":host{display:inline-block;padding:0;block-size:2rem}:host:focus-within,:host.open:not(.si-select-has-filter){outline:var(--element-button-focus-width) solid var(--element-focus-default);outline-offset:var(--element-button-focus-overlay-width)}:host.readonly,:host.disabled{pointer-events:none}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], labelledbyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelledby", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], noResultsFoundLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsFoundLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SiSelectOptionTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SiSelectGroupTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], actionsTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SiSelectActionsDirective), { ...{ read: TemplateRef }, isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { ...{
                             read: ElementRef
                         }, isSignal: true }] }], errormessageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "errormessageId", required: false }] }], hasFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFilter", required: false }] }] } });
 
@@ -624,6 +685,10 @@ class SiSelectLazyOptionsDirective {
      * @defaultValue []
      */
     selectedRows = signal([], ...(ngDevMode ? [{ debugName: "selectedRows" }] : []));
+    /**
+     * Lazy source that resolves selected values and provides the options displayed by the select.
+     * Implement `getAllOptions` when the select has no filter, or `getOptionsForSearch` when it has one.
+     */
     optionSource = input.required(...(ngDevMode ? [{ debugName: "optionSource" }] : []));
     valueChange = new Subject();
     filterChange = new Subject();
@@ -1067,6 +1132,12 @@ class SiCustomSelectDirective {
      * @defaultValue false
      */
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    /**
+     * Optional CDK scroll strategy used for the custom select overlay.
+     *
+     * @defaultValue defaultConnectedOverlayScrollStrategy()
+     */
+    scrollStrategy = input(defaultConnectedOverlayScrollStrategy(), { ...(ngDevMode ? { debugName: "scrollStrategy" } : {}), alias: 'siCustomSelectScrollStrategy' });
     /** Emits when the dropdown open state changes. */
     openChange = output();
     /**
@@ -1172,6 +1243,7 @@ class SiCustomSelectDirective {
                 .withFlexibleDimensions(true)
                 .withPush(true),
             hasBackdrop: true,
+            scrollStrategy: this.scrollStrategy(),
             backdropClass: 'cdk-overlay-transparent-backdrop',
             panelClass: ['dropdown-menu', 'show'],
             minWidth: width + 2
@@ -1227,7 +1299,7 @@ class SiCustomSelectDirective {
         }
     }
     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: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiCustomSelectDirective, isStandalone: true, selector: "[siCustomSelect]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "siCustomSelectScrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errormessageId: { classPropertyName: "errormessageId", publicName: "errormessageId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", value: "valueChange" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "none" }, listeners: { "click": "open()", "keydown.enter": "open()", "keydown.space": "open($event)", "keydown.arrowDown": "open($event)", "keydown.arrowUp": "open($event)" }, properties: { "style.--si-action-icon-offset.rem": "1.5", "attr.aria-haspopup": "haspopup()", "attr.aria-labelledby": "labelledby()", "attr.aria-describedby": "errormessageId()", "attr.aria-controls": "isOpen() ? dropdownId() : null", "attr.aria-expanded": "isOpen()", "attr.aria-disabled": "disabled()", "attr.id": "id()", "attr.tabindex": "disabled() ? \"-1\" : \"0\"", "class.disabled": "disabled()", "class.pe-none": "disabled()", "class.readonly": "readonly()", "class.open": "isOpen()", "class.show": "isOpen()" }, classAttribute: "dropdown" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: SiCustomSelectDirective, multi: true },
             { provide: SI_FORM_ITEM_CONTROL, useExisting: SiCustomSelectDirective }
         ], ngImport: i0 });
@@ -1265,7 +1337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '(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 }] }] } });
+        }], 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 }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "siCustomSelectScrollStrategy", 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