@fundamental-ngx/core 0.39.2 → 0.40.0-rc.0

package/fesm2020/fundamental-ngx-core-segmented-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-segmented-button.mjs","sources":["../../../../libs/core/src/lib/segmented-button/segmented-button.component.ts","../../../../libs/core/src/lib/segmented-button/segmented-button.component.html","../../../../libs/core/src/lib/segmented-button/segmented-button.module.ts","../../../../libs/core/src/lib/segmented-button/fundamental-ngx-core-segmented-button.ts"],"sourcesContent":["import {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    forwardRef,\n    HostBinding,\n    Input,\n    QueryList,\n    ViewEncapsulation\n} from '@angular/core';\nimport { ButtonComponent, FD_BUTTON_COMPONENT } from '@fundamental-ngx/core/button';\nimport { filter, startWith, takeUntil, tap } from 'rxjs/operators';\nimport { Subject, merge, fromEvent } from 'rxjs';\nimport { DestroyedService, KeyUtil } from '@fundamental-ngx/cdk/utils';\nimport { ENTER, SPACE } from '@angular/cdk/keycodes';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport const isSelectedClass = 'fd-button--toggled';\nexport const isDisabledClass = 'is-disabled';\n\nexport type SegmentedButtonValue = string | (string | null)[] | null;\n\n/**\n * Container for grouped buttons.\n *\n * ```html\n * <fd-segmented-button [(ngModel)]=\"value\">\n *     <button fd-button value=\"first\">Button</button>\n *     <button fd-button value=\"second\">Button</button>\n *     <button fd-button value=\"third\">Button</button>\n * </fd-segmented-button>\n * ```\n */\n@Component({\n    selector: 'fd-segmented-button',\n    templateUrl: './segmented-button.component.html',\n    styleUrls: ['./segmented-button.component.scss'],\n    host: {\n        role: 'group',\n        '(click)': '_click($event)'\n    },\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => SegmentedButtonComponent),\n            multi: true\n        },\n        DestroyedService\n    ]\n})\nexport class SegmentedButtonComponent implements AfterContentInit, ControlValueAccessor {\n    /** Whether segmented button is on toggle mode, which allows to toggle more than 1 button */\n    @Input()\n    toggle = false;\n\n    /** @hidden */\n    @HostBinding('class.fd-segmented-button')\n    _fdSegmentedButtonClass = true;\n\n    /** @hidden */\n    @ContentChildren(FD_BUTTON_COMPONENT)\n    _buttons: QueryList<ButtonComponent>;\n\n    /**\n     * Value of segmented button can have 2 types:\n     * - string, when there is no toggle mode and only 1 value can be chosen.\n     * - array of strings, when there is toggle mode and more than 1 value can be chosen.\n     */\n    private _currentValue: SegmentedButtonValue;\n\n    /** @hidden */\n    private _isDisabled = false;\n\n    /** An RxJS Subject that will kill the data stream upon queryList changes (for unsubscribing)  */\n    private readonly _onRefresh$: Subject<void> = new Subject<void>();\n\n    /** @hidden */\n    onChange: (value: SegmentedButtonValue) => void = () => {};\n\n    /** @hidden */\n    onTouched = (): void => {};\n\n    /** @hidden */\n    constructor(\n        private readonly _changeDetRef: ChangeDetectorRef,\n        private readonly _elementRef: ElementRef,\n        private readonly _onDestroy$: DestroyedService\n    ) {}\n\n    /** @hidden */\n    ngAfterContentInit(): void {\n        this._listenToButtonChanges();\n        this._setInitialState();\n    }\n\n    /** @hidden */\n    writeValue(values: string[] | string): void {\n        this._currentValue = values;\n        this._pickButtonsByValues(values);\n    }\n\n    /**\n     * @hidden\n     * @param fn User defined function that handles the *onChange* event of the SegmentedButtons.\n     */\n    registerOnChange(fn: (value: SegmentedButtonValue) => void): void {\n        this.onChange = fn;\n    }\n\n    /**\n     * @hidden\n     * @param fn User defined function that handles the *onTouch* event of the SegmentedButtons.\n     */\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    /**\n     * @hidden\n     * @param isDisabled Sets the value of the *disabled* property of the SegmentedButtons.\n     */\n    setDisabledState(isDisabled: boolean): void {\n        this._isDisabled = isDisabled;\n        this._toggleDisableButtons(isDisabled);\n        this._changeDetRef.detectChanges();\n    }\n\n    /** @hidden */\n    private _click(event: MouseEvent): void {\n        if (!this._elementRef.nativeElement.contains(event.relatedTarget)) {\n            this.onTouched();\n        }\n    }\n\n    /** @hidden */\n    private _setInitialState(): void {\n        this._toggleDisableButtons(this._isDisabled);\n        this._pickButtonsByValues(this._currentValue);\n    }\n\n    /** @hidden */\n    private _listenToButtonChanges(): void {\n        this._buttons.changes.pipe(startWith(1)).subscribe(() => {\n            this._onRefresh$.next();\n            this._buttons.forEach((button) => this._listenToTriggerEvents(button));\n        });\n    }\n\n    /** @hidden */\n    private _listenToTriggerEvents(buttonComponent: ButtonComponent): void {\n        const htmlElement = buttonComponent.elementRef().nativeElement;\n\n        const refresh$ = merge(this._onDestroy$, this._onRefresh$);\n\n        const triggerEvents$ = merge(\n            fromEvent(htmlElement, 'click'),\n            fromEvent<KeyboardEvent>(htmlElement, 'keydown').pipe(\n                filter((event) => KeyUtil.isKeyCode(event, [ENTER, SPACE])),\n                tap((event) => {\n                    event.preventDefault();\n                    this.onTouched();\n                })\n            )\n        );\n\n        triggerEvents$.pipe(takeUntil(refresh$)).subscribe(() => this._handleTriggerOnButton(buttonComponent));\n    }\n\n    /** @hidden */\n    private _handleTriggerOnButton(buttonComponent: ButtonComponent): void {\n        if (!this._isButtonDisabled(buttonComponent)) {\n            if (!this._isButtonSelected(buttonComponent) && !this.toggle) {\n                this._buttons.forEach((button) => this._deselectButton(button));\n                this._selectButton(buttonComponent);\n                this._propagateChange();\n                this._detectChanges();\n            }\n\n            if (this.toggle) {\n                this._toggleButton(buttonComponent);\n                this._propagateChange();\n                this._detectChanges();\n            }\n        }\n    }\n\n    /** @hidden */\n    private _propagateChange(): void {\n        this.onChange(this._getValuesBySelected());\n        this._currentValue = this._getValuesBySelected();\n    }\n\n    /** @hidden */\n    private _detectChanges(): void {\n        this._buttons.forEach((button) => button.detectChanges());\n        this._changeDetRef.detectChanges();\n    }\n\n    /** @hidden */\n    private _toggleButton(buttonComponent: ButtonComponent): void {\n        if (this._isButtonSelected(buttonComponent)) {\n            this._deselectButton(buttonComponent);\n        } else {\n            this._selectButton(buttonComponent);\n        }\n    }\n\n    /** @hidden */\n    private _pickButtonsByValues(values: SegmentedButtonValue): void {\n        if (!this._buttons) {\n            return;\n        }\n        this._buttons.forEach((button) => this._deselectButton(button));\n        this._getButtonsByValues(values).forEach((button) => this._selectButton(button));\n    }\n\n    /** @hidden */\n    private _getButtonsByValues(values: SegmentedButtonValue): ButtonComponent[] {\n        if (!values) {\n            return [];\n        }\n\n        if (Array.isArray(values)) {\n            return this._buttons.filter((button) => !!values.find((value) => this._getButtonValue(button) === value));\n        } else {\n            return this._buttons.filter((button) => this._getButtonValue(button) === values);\n        }\n    }\n\n    /** @hidden */\n    private _selectButton(buttonComponent: ButtonComponent): void {\n        const button = buttonComponent.elementRef().nativeElement;\n        button.classList.add(isSelectedClass);\n        button.setAttribute('aria-pressed', 'true');\n        this._changeDetRef.detectChanges();\n    }\n\n    /** @hidden */\n    private _deselectButton(buttonComponent: ButtonComponent): void {\n        const button = buttonComponent.elementRef().nativeElement;\n        button.classList.remove(isSelectedClass);\n        button.setAttribute('aria-pressed', 'false');\n        this._changeDetRef.detectChanges();\n    }\n\n    /** @hidden */\n    private _isButtonSelected(buttonComponent: ButtonComponent): boolean {\n        return buttonComponent.elementRef().nativeElement.classList.contains(isSelectedClass);\n    }\n\n    /** @hidden */\n    private _isButtonDisabled(buttonComponent: ButtonComponent): boolean {\n        return buttonComponent.elementRef().nativeElement.classList.contains(isDisabledClass);\n    }\n\n    /** @hidden */\n    private _toggleDisableButtons(disable: boolean): void {\n        if (!this._buttons) {\n            return;\n        }\n\n        this._buttons.forEach((button) => (button.disabled = disable));\n        if (disable) {\n            this._buttons.forEach((button) => button.elementRef().nativeElement.setAttribute('disabled', 'true'));\n        }\n        this._detectChanges();\n    }\n\n    /** @hidden */\n    private _getButtonValue(buttonComponent: ButtonComponent): string | null {\n        const element = buttonComponent.elementRef().nativeElement;\n        if (element instanceof HTMLButtonElement) {\n            return element.value;\n        }\n        return element.getAttribute('value');\n    }\n\n    /** @hidden\n     * Returns values depending on selected state of buttons\n     */\n    private _getValuesBySelected(): SegmentedButtonValue {\n        if (!this._buttons) {\n            return [];\n        }\n\n        const resButtons = this._buttons\n            .filter((button) => this._isButtonSelected(button))\n            .map((button) => this._getButtonValue(button));\n        if (!this.toggle) {\n            return resButtons.length === 1 ? resButtons[0] : null;\n        } else {\n            return resButtons;\n        }\n    }\n}\n","<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { SegmentedButtonComponent } from './segmented-button.component';\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [SegmentedButtonComponent],\n    declarations: [SegmentedButtonComponent]\n})\nexport class SegmentedButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-core-segmented-button.mjs","sources":["../../../../libs/core/src/lib/segmented-button/segmented-button.component.ts","../../../../libs/core/src/lib/segmented-button/segmented-button.component.html","../../../../libs/core/src/lib/segmented-button/segmented-button.module.ts","../../../../libs/core/src/lib/segmented-button/fundamental-ngx-core-segmented-button.ts"],"sourcesContent":["import {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    forwardRef,\n    HostBinding,\n    HostListener,\n    Input,\n    QueryList,\n    ViewEncapsulation\n} from '@angular/core';\nimport { ButtonComponent, FD_BUTTON_COMPONENT } from '@fundamental-ngx/core/button';\nimport { filter, startWith, takeUntil, tap } from 'rxjs/operators';\nimport { Subject, merge, fromEvent } from 'rxjs';\nimport { DestroyedService, KeyUtil } from '@fundamental-ngx/cdk/utils';\nimport { ENTER, SPACE } from '@angular/cdk/keycodes';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport const isDisabledClass = 'is-disabled';\n\nexport type SegmentedButtonValue = string | (string | null)[] | null;\n\n/**\n * Container for grouped buttons.\n *\n * ```html\n * <fd-segmented-button [(ngModel)]=\"value\">\n *     <button fd-button value=\"first\">Button</button>\n *     <button fd-button value=\"second\">Button</button>\n *     <button fd-button value=\"third\">Button</button>\n * </fd-segmented-button>\n * ```\n */\n@Component({\n    selector: 'fd-segmented-button',\n    templateUrl: './segmented-button.component.html',\n    styleUrls: ['./segmented-button.component.scss'],\n    host: {\n        role: 'group'\n    },\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => SegmentedButtonComponent),\n            multi: true\n        },\n        DestroyedService\n    ]\n})\nexport class SegmentedButtonComponent implements AfterContentInit, ControlValueAccessor {\n    /** Whether segmented button is on toggle mode, which allows to toggle more than 1 button */\n    @Input()\n    toggle = false;\n\n    /** @hidden */\n    @HostBinding('class.fd-segmented-button')\n    _fdSegmentedButtonClass = true;\n\n    /** @hidden */\n    @ContentChildren(FD_BUTTON_COMPONENT)\n    _buttons: QueryList<ButtonComponent>;\n\n    /**\n     * Value of segmented button can have 2 types:\n     * - string, when there is no toggle mode and only 1 value can be chosen.\n     * - array of strings, when there is toggle mode and more than 1 value can be chosen.\n     */\n    private _currentValue: SegmentedButtonValue;\n\n    /** @hidden */\n    private _isDisabled = false;\n\n    /** An RxJS Subject that will kill the data stream upon queryList changes (for unsubscribing)  */\n    private readonly _onRefresh$: Subject<void> = new Subject<void>();\n\n    /** @hidden */\n    onChange: (value: SegmentedButtonValue) => void = () => {};\n\n    /** @hidden */\n    onTouched = (): void => {};\n\n    /** @hidden */\n    constructor(\n        private readonly _changeDetRef: ChangeDetectorRef,\n        private readonly _elementRef: ElementRef,\n        private readonly _onDestroy$: DestroyedService\n    ) {}\n\n    /** @hidden */\n    ngAfterContentInit(): void {\n        this._listenToButtonChanges();\n        this._setInitialState();\n    }\n\n    /** @hidden */\n    writeValue(values: string[] | string): void {\n        this._currentValue = values;\n        this._pickButtonsByValues(values);\n    }\n\n    /**\n     * @hidden\n     * @param fn User defined function that handles the *onChange* event of the SegmentedButtons.\n     */\n    registerOnChange(fn: (value: SegmentedButtonValue) => void): void {\n        this.onChange = fn;\n    }\n\n    /**\n     * @hidden\n     * @param fn User defined function that handles the *onTouch* event of the SegmentedButtons.\n     */\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    /**\n     * @hidden\n     * @param isDisabled Sets the value of the *disabled* property of the SegmentedButtons.\n     */\n    setDisabledState(isDisabled: boolean): void {\n        this._isDisabled = isDisabled;\n        this._toggleDisableButtons(isDisabled);\n        this._changeDetRef.detectChanges();\n    }\n\n    /** @hidden */\n    @HostListener('click', ['$event'])\n    private _click(event: MouseEvent): void {\n        if (!this._elementRef.nativeElement.contains(event.relatedTarget)) {\n            this.onTouched();\n        }\n    }\n\n    /** @hidden */\n    private _setInitialState(): void {\n        this._toggleDisableButtons(this._isDisabled);\n        this._pickButtonsByValues(this._currentValue);\n    }\n\n    /** @hidden */\n    private _listenToButtonChanges(): void {\n        this._buttons.changes.pipe(startWith(1)).subscribe(() => {\n            this._onRefresh$.next();\n            this._buttons.forEach((button) => this._listenToTriggerEvents(button));\n        });\n    }\n\n    /** @hidden */\n    private _listenToTriggerEvents(buttonComponent: ButtonComponent): void {\n        const htmlElement = buttonComponent.elementRef().nativeElement;\n\n        const refresh$ = merge(this._onDestroy$, this._onRefresh$);\n\n        const triggerEvents$ = merge(\n            fromEvent(htmlElement, 'click'),\n            fromEvent<KeyboardEvent>(htmlElement, 'keydown').pipe(\n                filter((event) => KeyUtil.isKeyCode(event, [ENTER, SPACE])),\n                tap((event) => {\n                    event.preventDefault();\n                    this.onTouched();\n                })\n            )\n        );\n\n        triggerEvents$.pipe(takeUntil(refresh$)).subscribe(() => this._handleTriggerOnButton(buttonComponent));\n    }\n\n    /** @hidden */\n    private _handleTriggerOnButton(buttonComponent: ButtonComponent): void {\n        if (!this._isButtonDisabled(buttonComponent)) {\n            if (!this._isButtonSelected(buttonComponent) && !this.toggle) {\n                this._buttons.forEach((button) => this._deselectButton(button));\n                this._selectButton(buttonComponent);\n                this._propagateChange();\n                this._detectChanges();\n            }\n\n            if (this.toggle) {\n                this._toggleButton(buttonComponent);\n                this._propagateChange();\n                this._detectChanges();\n            }\n        }\n    }\n\n    /** @hidden */\n    private _propagateChange(): void {\n        this.onChange(this._getValuesBySelected());\n        this._currentValue = this._getValuesBySelected();\n    }\n\n    /** @hidden */\n    private _detectChanges(): void {\n        this._buttons.forEach((button) => button.detectChanges());\n        this._changeDetRef.detectChanges();\n    }\n\n    /** @hidden */\n    private _toggleButton(buttonComponent: ButtonComponent): void {\n        if (this._isButtonSelected(buttonComponent)) {\n            this._deselectButton(buttonComponent);\n        } else {\n            this._selectButton(buttonComponent);\n        }\n    }\n\n    /** @hidden */\n    private _pickButtonsByValues(values: SegmentedButtonValue): void {\n        if (!this._buttons) {\n            return;\n        }\n        this._buttons.forEach((button) => this._deselectButton(button));\n        this._getButtonsByValues(values).forEach((button) => this._selectButton(button));\n        this._changeDetRef.detectChanges();\n    }\n\n    /** @hidden */\n    private _getButtonsByValues(values: SegmentedButtonValue): ButtonComponent[] {\n        if (!values) {\n            return [];\n        }\n\n        if (Array.isArray(values)) {\n            return this._buttons.filter((button) => !!values.find((value) => this._getButtonValue(button) === value));\n        } else {\n            return this._buttons.filter((button) => this._getButtonValue(button) === values);\n        }\n    }\n\n    /** @hidden */\n    private _selectButton(buttonComponent: ButtonComponent): void {\n        buttonComponent.toggled = true;\n    }\n\n    /** @hidden */\n    private _deselectButton(buttonComponent: ButtonComponent): void {\n        buttonComponent.toggled = false;\n    }\n\n    /** @hidden */\n    private _isButtonSelected(buttonComponent: ButtonComponent): boolean {\n        return buttonComponent.toggled;\n    }\n\n    /** @hidden */\n    private _isButtonDisabled(buttonComponent: ButtonComponent): boolean {\n        return buttonComponent._disabled || buttonComponent.ariaDisabled;\n    }\n\n    /** @hidden */\n    private _toggleDisableButtons(disable: boolean): void {\n        if (!this._buttons) {\n            return;\n        }\n\n        this._buttons.forEach((button) => (button.disabled = disable));\n        if (disable) {\n            this._buttons.forEach((button) => button.elementRef().nativeElement.setAttribute('disabled', 'true'));\n        }\n        this._detectChanges();\n    }\n\n    /** @hidden */\n    private _getButtonValue(buttonComponent: ButtonComponent): string | null {\n        const element = buttonComponent.elementRef().nativeElement;\n        if (element instanceof HTMLButtonElement) {\n            return element.value;\n        }\n        return element.getAttribute('value');\n    }\n\n    /** @hidden\n     * Returns values depending on selected state of buttons\n     */\n    private _getValuesBySelected(): SegmentedButtonValue {\n        if (!this._buttons) {\n            return [];\n        }\n\n        const resButtons = this._buttons\n            .filter((button) => this._isButtonSelected(button))\n            .map((button) => this._getButtonValue(button));\n        if (!this.toggle) {\n            return resButtons.length === 1 ? resButtons[0] : null;\n        } else {\n            return resButtons;\n        }\n    }\n}\n","<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { SegmentedButtonComponent } from './segmented-button.component';\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [SegmentedButtonComponent],\n    declarations: [SegmentedButtonComponent]\n})\nexport class SegmentedButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2020/fundamental-ngx-core-select.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, HostBinding, Inject, Optional, ViewChild, HostListener, NgModule, isDevMode, Injector, ElementRef, Attribute, Self, ContentChildren, forwardRef, Directive } from '@angular/core';
-import * as i2 from '@angular/common';
+import { InjectionToken, Injectable, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, HostBinding, ContentChildren, Inject, Optional, ViewChild, HostListener, NgModule, isDevMode, Injector, ElementRef, Attribute, Self, forwardRef, Directive } from '@angular/core';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i6 from '@fundamental-ngx/core/popover';
 import { PopoverModule } from '@fundamental-ngx/core/popover';
@@ -9,7 +9,7 @@ import { ButtonModule } from '@fundamental-ngx/core/button';
 import { IconModule } from '@fundamental-ngx/core/icon';
 import { BusyIndicatorModule } from '@fundamental-ngx/core/busy-indicator';
 import * as i8 from '@fundamental-ngx/core/list';
-import { ListModule } from '@fundamental-ngx/core/list';
+import { ListTitleDirective, ListModule } from '@fundamental-ngx/core/list';
 import * as i9 from '@fundamental-ngx/i18n';
 import { I18nModule } from '@fundamental-ngx/i18n';
 import * as i4$1 from '@fundamental-ngx/core/content-density';
@@ -19,12 +19,12 @@ import { CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { SelectionModel } from '@angular/cdk/collections';
 import { Subject, Subscription, defer, merge } from 'rxjs';
 import { takeUntil, startWith, switchMap } from 'rxjs/operators';
-import * as i1$1 from '@fundamental-ngx/cdk/utils';
+import * as i1$2 from '@fundamental-ngx/cdk/utils';
 import { KeyUtil, DynamicComponentService } from '@fundamental-ngx/cdk/utils';
 import { registerFormItemControl } from '@fundamental-ngx/core/form';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { ENTER, SPACE, hasModifierKey, HOME, END, UP_ARROW, DOWN_ARROW, ESCAPE, TAB } from '@angular/cdk/keycodes';
-import * as i1 from '@fundamental-ngx/core/dialog';
+import * as i1$1 from '@fundamental-ngx/core/dialog';
 import { DialogModule } from '@fundamental-ngx/core/dialog';
 import { MobileModeBase, MobileModeControl, MOBILE_MODE_CONFIG } from '@fundamental-ngx/core/mobile-mode';
 import * as i3 from '@fundamental-ngx/core/bar';
@@ -193,12 +193,22 @@ class OptionComponent {
         /** @hidden */
         this.selected = false;
         /** @hidden */
+        this._renderer = 'title';
+        /** @hidden */
         this._stateChanges = new Subject();
         /** @hidden */
         this._mostRecentViewValue = '';
         /** @hidden */
         this._active = false;
     }
+    /** @Hidden */
+    ngAfterViewInit() {
+        this._listTitleDirectives?.changes.pipe(startWith(null)).subscribe(() => {
+            const directivesLength = this._listTitleDirectives?.length ?? 0;
+            this._renderer = directivesLength > 0 ? 'plain' : 'title';
+            this._changeDetectorRef.detectChanges();
+        });
+    }
     /**
      * @hidden
      * Since select components could be using the option's label to display the selected values
@@ -300,7 +310,7 @@ class OptionComponent {
     }
 }
 OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: OptionComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: OptionComponent, selector: "[fd-option], fd-option", inputs: { id: "id", value: "value", disabled: "disabled" }, outputs: { selectionChange: "selectionChange" }, host: { attributes: { "role": "option" }, listeners: { "click": "_selectViaInteraction()", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-disabled": "disabled", "attr.aria-selected": "selected", "class.is-focus": "active", "attr.id": "id", "tabindex": "-1", "class.is-selected": "this.selected" }, classAttribute: "fd-list__item" }, ngImport: i0, template: "<span fd-list-title>\n    <ng-content></ng-content>\n</span>\n<ng-content select=\"[secondary]\"></ng-content>\n", styles: [".fd-list__item[aria-disabled=true],.fd-list__item.is-disabled,.fd-list__item:disabled{opacity:.4;cursor:not-allowed}.fd-list__item:disabled:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: i8.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: OptionComponent, selector: "[fd-option], fd-option", inputs: { id: "id", value: "value", disabled: "disabled" }, outputs: { selectionChange: "selectionChange" }, host: { attributes: { "role": "option" }, listeners: { "click": "_selectViaInteraction()", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-disabled": "disabled", "attr.aria-selected": "selected", "class.is-focus": "active", "attr.id": "id", "tabindex": "-1", "class.is-selected": "this.selected" }, classAttribute: "fd-list__item" }, queries: [{ propertyName: "_listTitleDirectives", predicate: ListTitleDirective }], ngImport: i0, template: "<span fd-list-title *ngIf=\"_renderer === 'title'; else plainRenderer\">\n    <ng-template *ngTemplateOutlet=\"plainRenderer\"></ng-template>\n</span>\n<ng-template #plainRenderer>\n    <ng-content></ng-content>\n</ng-template>\n<ng-content select=\"[secondary]\"></ng-content>\n", styles: [".fd-list__item[aria-disabled=true],.fd-list__item.is-disabled,.fd-list__item:disabled{opacity:.4;cursor:not-allowed}.fd-list__item:disabled:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i8.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
             args: [{ selector: '[fd-option], fd-option', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
@@ -313,7 +323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
                         role: 'option',
                         '(click)': '_selectViaInteraction()',
                         '(keydown)': '_handleKeydown($event)'
-                    }, template: "<span fd-list-title>\n    <ng-content></ng-content>\n</span>\n<ng-content select=\"[secondary]\"></ng-content>\n", styles: [".fd-list__item[aria-disabled=true],.fd-list__item.is-disabled,.fd-list__item:disabled{opacity:.4;cursor:not-allowed}.fd-list__item:disabled:focus{outline:none}\n"] }]
+                    }, template: "<span fd-list-title *ngIf=\"_renderer === 'title'; else plainRenderer\">\n    <ng-template *ngTemplateOutlet=\"plainRenderer\"></ng-template>\n</span>\n<ng-template #plainRenderer>\n    <ng-content></ng-content>\n</ng-template>\n<ng-content select=\"[secondary]\"></ng-content>\n", styles: [".fd-list__item[aria-disabled=true],.fd-list__item.is-disabled,.fd-list__item:disabled{opacity:.4;cursor:not-allowed}.fd-list__item:disabled:focus{outline:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
                 type: Input
             }], value: [{
@@ -325,6 +335,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
             }], selected: [{
                 type: HostBinding,
                 args: ['class.is-selected']
+            }], _listTitleDirectives: [{
+                type: ContentChildren,
+                args: [ListTitleDirective]
             }] } });
 
 /**
@@ -394,12 +407,12 @@ class SelectMobileComponent extends MobileModeBase {
         });
     }
 }
-SelectMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: SelectMobileComponent, deps: [{ token: i0.ElementRef }, { token: i1.DialogService }, { token: SELECT_COMPONENT }, { token: MOBILE_MODE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SelectMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: SelectMobileComponent, selector: "fd-select-mobile", host: { listeners: { "keydown": "onItemKeydown($event)" } }, viewQueries: [{ propertyName: "_dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog tabindex=\"-1\" [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 id=\"fd-dialog-header\" *ngIf=\"mobileConfig.title\" fd-title>{{ mobileConfig.title }}</h1>\n            <button\n                role=\"button\"\n                *ngIf=\"mobileConfig.hasCloseButton\"\n                aria-label=\"close\"\n                fd-dialog-close-button\n                [mobile]=\"true\"\n                (click)=\"_cancel()\"\n            ></button>\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container *ngTemplateOutlet=\"childContent\"></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer *ngIf=\"mobileConfig.approveButtonText || mobileConfig.cancelButtonText\">\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"_approve()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.cancelButtonText\"\n                [label]=\"mobileConfig.cancelButtonText!\"\n                (click)=\"_cancel()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i4.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SelectMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: SelectMobileComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.DialogService }, { token: SELECT_COMPONENT }, { token: MOBILE_MODE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SelectMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: SelectMobileComponent, selector: "fd-select-mobile", host: { listeners: { "keydown": "onItemKeydown($event)" } }, viewQueries: [{ propertyName: "_dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog tabindex=\"-1\" [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 id=\"fd-dialog-header\" *ngIf=\"mobileConfig.title\" fd-title>{{ mobileConfig.title }}</h1>\n            <button\n                role=\"button\"\n                *ngIf=\"mobileConfig.hasCloseButton\"\n                aria-label=\"close\"\n                fd-dialog-close-button\n                [mobile]=\"true\"\n                (click)=\"_cancel()\"\n            ></button>\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container *ngTemplateOutlet=\"childContent\"></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer *ngIf=\"mobileConfig.approveButtonText || mobileConfig.cancelButtonText\">\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"_approve()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.cancelButtonText\"\n                [label]=\"mobileConfig.cancelButtonText!\"\n                (click)=\"_cancel()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1$1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1$1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "component", type: i3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i4.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: SelectMobileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-select-mobile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog tabindex=\"-1\" [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 id=\"fd-dialog-header\" *ngIf=\"mobileConfig.title\" fd-title>{{ mobileConfig.title }}</h1>\n            <button\n                role=\"button\"\n                *ngIf=\"mobileConfig.hasCloseButton\"\n                aria-label=\"close\"\n                fd-dialog-close-button\n                [mobile]=\"true\"\n                (click)=\"_cancel()\"\n            ></button>\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container *ngTemplateOutlet=\"childContent\"></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer *ngIf=\"mobileConfig.approveButtonText || mobileConfig.cancelButtonText\">\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"_approve()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.cancelButtonText\"\n                [label]=\"mobileConfig.cancelButtonText!\"\n                (click)=\"_cancel()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.DialogService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.DialogService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SELECT_COMPONENT]
                 }] }, { type: undefined, decorators: [{
@@ -921,7 +934,7 @@ class SelectComponent {
         await this._dynamicComponentService.createDynamicModule(this.selectOptionsListTemplate, SelectMobileModule, SelectMobileComponent, this._viewContainerRef, injector);
     }
 }
-SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: SelectComponent, deps: [{ token: 'tabindex', attribute: true }, { token: i1$1.RtlService, optional: true }, { token: SelectKeyManagerService }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1$1.DynamicComponentService, optional: true }, { token: i3$1.NgControl, optional: true, self: true }, { token: i0.Injector, optional: true }, { token: i4$1.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component });
+SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: SelectComponent, deps: [{ token: 'tabindex', attribute: true }, { token: i1$2.RtlService, optional: true }, { token: SelectKeyManagerService }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1$2.DynamicComponentService, optional: true }, { token: i3$1.NgControl, optional: true, self: true }, { token: i0.Injector, optional: true }, { token: i4$1.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component });
 SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: SelectComponent, selector: "fd-select", inputs: { controlId: "controlId", state: "state", mobile: "mobile", stateMessage: "stateMessage", disabled: "disabled", required: "required", readonly: "readonly", placeholder: "placeholder", value: "value", extendedBodyTemplate: "extendedBodyTemplate", maxHeight: "maxHeight", glyph: "glyph", closeOnOutsideClick: "closeOnOutsideClick", fillControlMode: "fillControlMode", controlTemplate: "controlTemplate", appendTo: "appendTo", unselectMissingOption: "unselectMissingOption", typeaheadDebounceInterval: "typeaheadDebounceInterval", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", mobileConfig: "mobileConfig", inline: "inline", selectControlClass: "selectControlClass", selectDropdownButtonClass: "selectDropdownButtonClass", compareWith: "compareWith" }, outputs: { isOpenChange: "isOpenChange", valueChange: "valueChange" }, host: { listeners: { "window:resize": "_resizeScrollHandler()", "click": "toggle()", "keydown": "_handleKeydown($event)" }, properties: { "class.fd-select--inline": "inline", "class.fd-select--compact": "_contentDensityObserver.isCompact", "class.fd-select-custom-class": "inline", "class.fd-select-custom-class--mobile": "mobile" }, classAttribute: "fd-select" }, providers: [
         {
             provide: SELECT_COMPONENT,
@@ -930,7 +943,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         registerFormItemControl(SelectComponent),
         SelectKeyManagerService,
         contentDensityObserverProviders()
-    ], queries: [{ propertyName: "_options", predicate: OptionComponent, descendants: true }], viewQueries: [{ propertyName: "_controlElementRef", first: true, predicate: ["selectControl"], descendants: true }, { propertyName: "selectOptionsListTemplate", first: true, predicate: ["selectOptionsListTemplate"], descendants: true }, { propertyName: "_dialogContainerElementRef", first: true, predicate: ["dialogContainer"], descendants: true }, { propertyName: "_overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "_optionPanel", first: true, predicate: ["optionPanel"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n    <!-- @deprecated leaving class fd-popover-custom-list to support backwards compatibility-->\n    <fd-popover\n        additionalBodyClass=\"fd-select-dropdown fd-popover-custom-list\"\n        [isOpen]=\"_isOpen\"\n        [triggers]=\"[]\"\n        [focusTrapped]=\"true\"\n        [disabled]=\"disabled || readonly\"\n        [appendTo]=\"appendTo\"\n        [closeOnEscapeKey]=\"true\"\n        [fillControlMode]=\"fillControlMode\"\n        [maxWidth]=\"600\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n    >\n        <fd-popover-control>\n            <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n        </fd-popover-control>\n\n        <!-- @deprecated leaving class fd-popover-custom-select-body to support backwards compatibility-->\n        <fd-popover-body class=\"fd-popover-custom-select-body\">\n            <ng-container [ngTemplateOutlet]=\"selectOptionsListTemplate\"></ng-container>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #selectInputControlTemplate>\n    <div\n        class=\"fd-select__control\"\n        role=\"list\"\n        #selectControl\n        [class]=\"_selectControlClass\"\n        [class.is-active]=\"_isOpen\"\n        [class.is-expanded]=\"_isOpen\"\n        [class.is-disabled]=\"disabled\"\n        [class.is-readonly]=\"readonly\"\n        [attr.tabindex]=\"_tabIndex\"\n        [attr.id]=\"controlId\"\n        [attr.aria-active]=\"_isOpen\"\n        aria-live=\"polite\"\n        [attr.aria-selected]=\"selected ? selected.selected : null\"\n        [attr.aria-expanded]=\"_isOpen\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-controls]=\"controlId + '-list-box'\"\n        [attr.aria-haspopup]=\"!(this.readonly || this.disabled)\"\n        [attr.aria-required]=\"required\"\n        [attr.title]=\"triggerValue\"\n        [attr.aria-label]=\"ariaLabel || ('platformSelect.selectOptionLabel' | fdTranslate)\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [attr.aria-activedescendant]=\"_getAriaActiveDescendant()\"\n        (focus)=\"_onFocus()\"\n        (blur)=\"_onBlur()\"\n    >\n        <div role=\"listitem\" class=\"fd-select__text-content\" [attr.aria-label]=\"triggerValue\">\n            <ng-container\n                [ngTemplateOutlet]=\"controlTemplate ? controlTemplate : defaultSelectContent\"\n                [ngTemplateOutletContext]=\"{ $implicit: triggerValue, selected: selected }\"\n            >\n            </ng-container>\n\n            <ng-template #defaultSelectContent>\n                {{ triggerValue }}\n            </ng-template>\n        </div>\n        <button\n            fd-button\n            tabindex=\"-1\"\n            class=\"fd-button--transparent fd-select__button {{ selectDropdownButtonClass }}\"\n            *ngIf=\"!readonly\"\n            [disabled]=\"disabled\"\n            [glyph]=\"glyph\"\n        ></button>\n    </div>\n</ng-template>\n\n<ng-template #selectOptionsListTemplate>\n    <ul\n        #optionPanel\n        fd-list\n        class=\"fd-select-options\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        [mobileMode]=\"mobile\"\n        [dropdownMode]=\"true\"\n        [hasMessage]=\"!!stateMessage\"\n        [attr.id]=\"controlId + '-list-box'\"\n        [style.max-height]=\"maxHeight || calculatedMaxHeight + 'px'\"\n        [attr.tooltip]=\"triggerValue\"\n    >\n        <li\n            *ngIf=\"stateMessage\"\n            [attr.aria-label]=\"stateMessage\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n            [innerHtml]=\"stateMessage\"\n        ></li>\n\n        <ng-content></ng-content>\n    </ul>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n\n    <div #dialogContainer></div>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.27.1\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-select{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.25rem 0;padding:0;text-shadow:var(--fdSelect_Text_Shadow)}.fd-select:after,.fd-select:before{box-sizing:inherit;font-size:inherit}.fd-select__control{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;appearance:none;background:var(--fdSelect_Background, var(--sapField_BackgroundStyle));background-color:var(--fdSelect_Background_Color, var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;justify-content:center;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;min-height:2.25rem;min-width:var(--fdSelect_Min_Width, 2.75rem);outline:none;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-select__control:after,.fd-select__control:before{box-sizing:inherit;font-size:inherit}.fd-select__control::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control[dir=rtl]::placeholder,[dir=rtl] .fd-select__control::placeholder{text-indent:.125rem}.fd-select__control::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-select__control::-ms-clear{display:none}.fd-select__control.is-hover,.fd-select__control:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--fdSelect_Hover_Background, var(--sapField_Hover_BackgroundStyle));background-color:var(--fdSelect_Hover_Background_Color, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-focus,.fd-select__control:focus{-webkit-box-shadow:none;background:var(--fdSelect_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-select__control.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-select__control.is-success.is-hover,.fd-select__control.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-select__control.is-success.is-focus.is-hover,.fd-select__control.is-success.is-focus:hover,.fd-select__control.is-success:focus.is-hover,.fd-select__control.is-success:focus:hover{box-shadow:none}.fd-select__control.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-select__control.is-error.is-hover,.fd-select__control.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-select__control.is-error.is-focus.is-hover,.fd-select__control.is-error.is-focus:hover,.fd-select__control.is-error:focus.is-hover,.fd-select__control.is-error:focus:hover{box-shadow:none}.fd-select__control.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-warning.is-hover,.fd-select__control.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-warning.is-focus.is-hover,.fd-select__control.is-warning.is-focus:hover,.fd-select__control.is-warning:focus.is-hover,.fd-select__control.is-warning:focus:hover{box-shadow:none}.fd-select__control.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-alert.is-hover,.fd-select__control.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-alert.is-focus.is-hover,.fd-select__control.is-alert.is-focus:hover,.fd-select__control.is-alert:focus.is-hover,.fd-select__control.is-alert:focus:hover{box-shadow:none}.fd-select__control.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-select__control.is-information.is-hover,.fd-select__control.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-select__control.is-information.is-focus.is-hover,.fd-select__control.is-information.is-focus:hover,.fd-select__control.is-information:focus.is-hover,.fd-select__control.is-information:focus:hover{box-shadow:none}.fd-select__control.is-alert,.fd-select__control.is-error,.fd-select__control.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::placeholder,.fd-select__control.is-error::placeholder,.fd-select__control.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus,.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus,.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus,.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-select__control.is-error::placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-select__control.is-disabled::placeholder,.fd-select__control:disabled::placeholder,.fd-select__control[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius)}.fd-select__control.is-readonly::placeholder,.fd-select__control[aria-readonly=true]::placeholder,.fd-select__control[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-select__control.is-readonly.is-hover,.fd-select__control.is-readonly:hover,.fd-select__control[aria-readonly=true].is-hover,.fd-select__control[aria-readonly=true]:hover,.fd-select__control[readonly].is-hover,.fd-select__control[readonly]:hover{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);box-shadow:none}.fd-select__control.is-readonly.is-focus,.fd-select__control.is-readonly:focus,.fd-select__control[aria-readonly=true].is-focus,.fd-select__control[aria-readonly=true]:focus,.fd-select__control[readonly].is-focus,.fd-select__control[readonly]:focus{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);z-index:5}.fd-select__control .fd-select__button:first-child{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button:first-child[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:first-child{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right:none}.fd-select__control .fd-select__button:first-child.is-hover,.fd-select__control .fd-select__button:first-child:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:first-child.is-hover[dir=rtl],.fd-select__control .fd-select__button:first-child:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:first-child.is-hover,[dir=rtl] .fd-select__control .fd-select__button:first-child:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right:none}.fd-select__control .fd-select__button:first-child.is-active,.fd-select__control .fd-select__button:first-child:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:first-child.is-active[dir=rtl],.fd-select__control .fd-select__button:first-child:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:first-child.is-active,[dir=rtl] .fd-select__control .fd-select__button:first-child:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right:none}.fd-select__control .fd-select__button:not(:first-child){border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button:not(:first-child)[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:not(:first-child){border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button:not(:first-child).is-hover,.fd-select__control .fd-select__button:not(:first-child):hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:not(:first-child).is-hover[dir=rtl],.fd-select__control .fd-select__button:not(:first-child):hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:not(:first-child).is-hover,[dir=rtl] .fd-select__control .fd-select__button:not(:first-child):hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:not(:first-child).is-active,.fd-select__control .fd-select__button:not(:first-child):active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:not(:first-child).is-active[dir=rtl],.fd-select__control .fd-select__button:not(:first-child):active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:not(:first-child).is-active,[dir=rtl] .fd-select__control .fd-select__button:not(:first-child):active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:first-child .fd-select__button{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__addon:first-child .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right:none}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-hover,.fd-select__control .fd-select__addon:first-child .fd-select__button:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__addon:first-child .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right:none}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-active,.fd-select__control .fd-select__addon:first-child .fd-select__button:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__addon:first-child .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right:none}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button{border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-hover,.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-active,.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);border:none;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-select__control .fd-select__button.is-active,.fd-select__control .fd-select__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button.is-hover,.fd-select__control.is-success .fd-select__button:active,.fd-select__control.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button.is-hover,.fd-select__control.is-error .fd-select__button:active,.fd-select__control.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button.is-hover,.fd-select__control.is-warning .fd-select__button:active,.fd-select__control.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button.is-hover,.fd-select__control.is-alert .fd-select__button:active,.fd-select__control.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button.is-hover,.fd-select__control.is-information .fd-select__button:active,.fd-select__control.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{pointer-events:none}.fd-select__control .fd-select__button{height:100%;margin-left:.25rem}.fd-select__control .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button{margin-left:0;margin-right:.25rem}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{cursor:text}.fd-select__control.is-readonly .fd-select__text-content,.fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select__control[readonly] .fd-select__text-content{--fdSelect_Min_Width:5rem;padding-left:.625rem;padding-right:.625rem}.fd-select__control.is-expanded,.fd-select__control[aria-expanded=true]{box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-expanded .fd-select__button,.fd-select__control[aria-expanded=true] .fd-select__button{--fdInput_Group_Button_Text_Color:var(--sapButton_Active_TextColor);--fdInput_Group_Button_Background:var(--sapField_BackgroundStyle);-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.fd-select__control.is-expanded[dir=rtl] .fd-select__button,.fd-select__control[aria-expanded=true][dir=rtl] .fd-select__button,[dir=rtl] .fd-select__control.is-expanded .fd-select__button,[dir=rtl] .fd-select__control[aria-expanded=true] .fd-select__button{border-left-color:transparent;border-right-color:var(--fdSelect_Expanded_Button_Border_Left_Color)}.fd-select__control.is-expanded.is-focus,.fd-select__control.is-expanded:focus,.fd-select__control[aria-expanded=true].is-focus,.fd-select__control[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-expanded.is-hover .fd-select__button,.fd-select__control.is-expanded:hover .fd-select__button,.fd-select__control[aria-expanded=true].is-hover .fd-select__button,.fd-select__control[aria-expanded=true]:hover .fd-select__button{--fdInput_Group_Button_Text_Color:var(--sapButton_Active_TextColor);--fdInput_Group_Button_Background:var(--sapField_BackgroundStyle);-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background-color:var(--sapButton_Selected_Hover_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color_Hover);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.fd-select__control.is-expanded.is-hover[dir=rtl] .fd-select__button,.fd-select__control.is-expanded:hover[dir=rtl] .fd-select__button,.fd-select__control[aria-expanded=true].is-hover[dir=rtl] .fd-select__button,.fd-select__control[aria-expanded=true]:hover[dir=rtl] .fd-select__button,[dir=rtl] .fd-select__control.is-expanded.is-hover .fd-select__button,[dir=rtl] .fd-select__control.is-expanded:hover .fd-select__button,[dir=rtl] .fd-select__control[aria-expanded=true].is-hover .fd-select__button,[dir=rtl] .fd-select__control[aria-expanded=true]:hover .fd-select__button{border-left-color:transparent;border-right-color:var(--fdSelect_Expanded_Button_Border_Left_Color_Hover)}.fd-select__control.is-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-expanded .fd-select__button,.fd-select__control.is-success[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Success_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-expanded[dir=rtl] .fd-select__button,.fd-select__control.is-success[aria-expanded=true][dir=rtl] .fd-select__button,[dir=rtl] .fd-select__control.is-success.is-expanded .fd-select__button,[dir=rtl] .fd-select__control.is-success[aria-expanded=true] .fd-select__button{border-left-color:transparent;border-right-color:var(--fdSelect_Expanded_Button_Border_Left_Color)}.fd-select__control.is-success.is-expanded.is-focus,.fd-select__control.is-success.is-expanded:focus,.fd-select__control.is-success[aria-expanded=true].is-focus,.fd-select__control.is-success[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-expanded .fd-select__button,.fd-select__control.is-error[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Error_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-expanded[dir=rtl] .fd-select__button,.fd-select__control.is-error[aria-expanded=true][dir=rtl] .fd-select__button,[dir=rtl] .fd-select__control.is-error.is-expanded .fd-select__button,[dir=rtl] .fd-select__control.is-error[aria-expanded=true] .fd-select__button{border-left-color:transparent;border-right-color:var(--fdSelect_Expanded_Button_Border_Left_Color)}.fd-select__control.is-error.is-expanded.is-focus,.fd-select__control.is-error.is-expanded:focus,.fd-select__control.is-error[aria-expanded=true].is-focus,.fd-select__control.is-error[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-expanded .fd-select__button,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-expanded[dir=rtl] .fd-select__button,.fd-select__control.is-warning[aria-expanded=true][dir=rtl] .fd-select__button,[dir=rtl] .fd-select__control.is-warning.is-expanded .fd-select__button,[dir=rtl] .fd-select__control.is-warning[aria-expanded=true] .fd-select__button{border-left-color:transparent;border-right-color:var(--fdSelect_Expanded_Button_Border_Left_Color)}.fd-select__control.is-warning.is-expanded.is-focus,.fd-select__control.is-warning.is-expanded:focus,.fd-select__control.is-warning[aria-expanded=true].is-focus,.fd-select__control.is-warning[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-expanded .fd-select__button,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-expanded[dir=rtl] .fd-select__button,.fd-select__control.is-alert[aria-expanded=true][dir=rtl] .fd-select__button,[dir=rtl] .fd-select__control.is-alert.is-expanded .fd-select__button,[dir=rtl] .fd-select__control.is-alert[aria-expanded=true] .fd-select__button{border-left-color:transparent;border-right-color:var(--fdSelect_Expanded_Button_Border_Left_Color)}.fd-select__control.is-alert.is-expanded.is-focus,.fd-select__control.is-alert.is-expanded:focus,.fd-select__control.is-alert[aria-expanded=true].is-focus,.fd-select__control.is-alert[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-expanded .fd-select__button,.fd-select__control.is-information[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Information_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-expanded[dir=rtl] .fd-select__button,.fd-select__control.is-information[aria-expanded=true][dir=rtl] .fd-select__button,[dir=rtl] .fd-select__control.is-information.is-expanded .fd-select__button,[dir=rtl] .fd-select__control.is-information[aria-expanded=true] .fd-select__button{border-left-color:transparent;border-right-color:var(--fdSelect_Expanded_Button_Border_Left_Color)}.fd-select__control.is-information.is-expanded.is-focus,.fd-select__control.is-information.is-expanded:focus,.fd-select__control.is-information[aria-expanded=true].is-focus,.fd-select__control.is-information[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__text-content{-webkit-box-sizing:border-box;--fdSelect_Min_Width:2.5rem;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdSelect_Text_Content_Color, var(--sapTextColor));cursor:pointer;display:var(--fdSelect_Text_Content_Display, inline-block);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-width:calc(var(--fdSelect_Min_Width) - var(--sapField_BorderWidth) * 2);overflow:hidden;padding:0 0 0 .625rem;text-overflow:ellipsis;white-space:nowrap}.fd-select__text-content:after,.fd-select__text-content:before{box-sizing:inherit;font-size:inherit}.fd-select__text-content[dir=rtl],[dir=rtl] .fd-select__text-content{padding-left:0;padding-right:.625rem}.fd-select--compact{margin:.1875rem 0}.fd-select--compact .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select--compact .fd-select__control .fd-select__text-content{--fdSelect_Min_Width:2.75rem;padding-left:.5rem}.fd-select--compact .fd-select__control .fd-select__text-content[dir=rtl],[dir=rtl] .fd-select--compact .fd-select__control .fd-select__text-content{padding-left:0;padding-right:.5rem}.fd-select--compact .fd-select__control.is-readonly .fd-select__text-content,.fd-select--compact .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select--compact .fd-select__control[readonly] .fd-select__text-content{padding-left:.5rem;padding-right:.5rem}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-select{display:block;max-width:100%}.fd-select .fd-popover-custom{min-width:100%}.fd-select--inline{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i6.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "directive", type: i8.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "pipe", type: i9.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "_options", predicate: OptionComponent, descendants: true }], viewQueries: [{ propertyName: "_controlElementRef", first: true, predicate: ["selectControl"], descendants: true }, { propertyName: "selectOptionsListTemplate", first: true, predicate: ["selectOptionsListTemplate"], descendants: true }, { propertyName: "_dialogContainerElementRef", first: true, predicate: ["dialogContainer"], descendants: true }, { propertyName: "_overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "_optionPanel", first: true, predicate: ["optionPanel"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n    <!-- @deprecated leaving class fd-popover-custom-list to support backwards compatibility-->\n    <fd-popover\n        additionalBodyClass=\"fd-select-dropdown fd-popover-custom-list\"\n        [isOpen]=\"_isOpen\"\n        [triggers]=\"[]\"\n        [focusTrapped]=\"true\"\n        [disabled]=\"disabled || readonly\"\n        [appendTo]=\"appendTo\"\n        [closeOnEscapeKey]=\"true\"\n        [fillControlMode]=\"fillControlMode\"\n        [maxWidth]=\"600\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n    >\n        <fd-popover-control>\n            <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n        </fd-popover-control>\n\n        <!-- @deprecated leaving class fd-popover-custom-select-body to support backwards compatibility-->\n        <fd-popover-body class=\"fd-popover-custom-select-body\">\n            <ng-container [ngTemplateOutlet]=\"selectOptionsListTemplate\"></ng-container>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #selectInputControlTemplate>\n    <div\n        class=\"fd-select__control\"\n        role=\"list\"\n        #selectControl\n        [class]=\"_selectControlClass\"\n        [class.is-active]=\"_isOpen\"\n        [class.is-expanded]=\"_isOpen\"\n        [class.is-disabled]=\"disabled\"\n        [class.is-readonly]=\"readonly\"\n        [attr.tabindex]=\"_tabIndex\"\n        [attr.id]=\"controlId\"\n        [attr.aria-active]=\"_isOpen\"\n        aria-live=\"polite\"\n        [attr.aria-selected]=\"selected ? selected.selected : null\"\n        [attr.aria-expanded]=\"_isOpen\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-controls]=\"controlId + '-list-box'\"\n        [attr.aria-haspopup]=\"!(this.readonly || this.disabled)\"\n        [attr.aria-required]=\"required\"\n        [attr.title]=\"triggerValue\"\n        [attr.aria-label]=\"ariaLabel || ('platformSelect.selectOptionLabel' | fdTranslate)\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [attr.aria-activedescendant]=\"_getAriaActiveDescendant()\"\n        (focus)=\"_onFocus()\"\n        (blur)=\"_onBlur()\"\n    >\n        <div role=\"listitem\" class=\"fd-select__text-content\" [attr.aria-label]=\"triggerValue\">\n            <ng-container\n                [ngTemplateOutlet]=\"controlTemplate ? controlTemplate : defaultSelectContent\"\n                [ngTemplateOutletContext]=\"{ $implicit: triggerValue, selected: selected }\"\n            >\n            </ng-container>\n\n            <ng-template #defaultSelectContent>\n                {{ triggerValue }}\n            </ng-template>\n        </div>\n        <button\n            fd-button\n            tabindex=\"-1\"\n            class=\"fd-button--transparent fd-select__button {{ selectDropdownButtonClass }}\"\n            *ngIf=\"!readonly\"\n            [disabled]=\"disabled\"\n            [glyph]=\"glyph\"\n        ></button>\n    </div>\n</ng-template>\n\n<ng-template #selectOptionsListTemplate>\n    <ul\n        #optionPanel\n        fd-list\n        class=\"fd-select-options\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        [mobileMode]=\"mobile\"\n        [dropdownMode]=\"true\"\n        [hasMessage]=\"!!stateMessage\"\n        [attr.id]=\"controlId + '-list-box'\"\n        [style.max-height]=\"maxHeight || calculatedMaxHeight + 'px'\"\n        [attr.tooltip]=\"triggerValue\"\n    >\n        <li\n            *ngIf=\"stateMessage\"\n            [attr.aria-label]=\"stateMessage\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n            [innerHtml]=\"stateMessage\"\n        ></li>\n\n        <ng-content></ng-content>\n    </ul>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n\n    <div #dialogContainer></div>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.27.1\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-select{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.25rem 0;padding:0;text-shadow:var(--fdSelect_Text_Shadow)}.fd-select:after,.fd-select:before{box-sizing:inherit;font-size:inherit}.fd-select__control{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;appearance:none;background:var(--fdSelect_Background, var(--sapField_BackgroundStyle));background-color:var(--fdSelect_Background_Color, var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;justify-content:center;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;min-height:2.25rem;min-width:var(--fdSelect_Min_Width, 2.75rem);outline:none;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-select__control:after,.fd-select__control:before{box-sizing:inherit;font-size:inherit}.fd-select__control::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control[dir=rtl]::placeholder,[dir=rtl] .fd-select__control::placeholder{text-indent:.125rem}.fd-select__control::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-select__control::-ms-clear{display:none}.fd-select__control.is-hover,.fd-select__control:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--fdSelect_Hover_Background, var(--sapField_Hover_BackgroundStyle));background-color:var(--fdSelect_Hover_Background_Color, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-focus,.fd-select__control:focus{-webkit-box-shadow:none;background:var(--fdSelect_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-select__control.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-select__control.is-success.is-hover,.fd-select__control.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-select__control.is-success.is-focus.is-hover,.fd-select__control.is-success.is-focus:hover,.fd-select__control.is-success:focus.is-hover,.fd-select__control.is-success:focus:hover{box-shadow:none}.fd-select__control.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-select__control.is-error.is-hover,.fd-select__control.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-select__control.is-error.is-focus.is-hover,.fd-select__control.is-error.is-focus:hover,.fd-select__control.is-error:focus.is-hover,.fd-select__control.is-error:focus:hover{box-shadow:none}.fd-select__control.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-warning.is-hover,.fd-select__control.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-warning.is-focus.is-hover,.fd-select__control.is-warning.is-focus:hover,.fd-select__control.is-warning:focus.is-hover,.fd-select__control.is-warning:focus:hover{box-shadow:none}.fd-select__control.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-alert.is-hover,.fd-select__control.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-alert.is-focus.is-hover,.fd-select__control.is-alert.is-focus:hover,.fd-select__control.is-alert:focus.is-hover,.fd-select__control.is-alert:focus:hover{box-shadow:none}.fd-select__control.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-select__control.is-information.is-hover,.fd-select__control.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-select__control.is-information.is-focus.is-hover,.fd-select__control.is-information.is-focus:hover,.fd-select__control.is-information:focus.is-hover,.fd-select__control.is-information:focus:hover{box-shadow:none}.fd-select__control.is-alert,.fd-select__control.is-error,.fd-select__control.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::placeholder,.fd-select__control.is-error::placeholder,.fd-select__control.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus,.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus,.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus,.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-select__control.is-error::placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-select__control.is-disabled::placeholder,.fd-select__control:disabled::placeholder,.fd-select__control[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius)}.fd-select__control.is-readonly::placeholder,.fd-select__control[aria-readonly=true]::placeholder,.fd-select__control[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-select__control.is-readonly.is-hover,.fd-select__control.is-readonly:hover,.fd-select__control[aria-readonly=true].is-hover,.fd-select__control[aria-readonly=true]:hover,.fd-select__control[readonly].is-hover,.fd-select__control[readonly]:hover{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);box-shadow:none}.fd-select__control.is-readonly.is-focus,.fd-select__control.is-readonly:focus,.fd-select__control[aria-readonly=true].is-focus,.fd-select__control[aria-readonly=true]:focus,.fd-select__control[readonly].is-focus,.fd-select__control[readonly]:focus{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);z-index:5}.fd-select__control .fd-select__button:first-child{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button:first-child[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:first-child{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right:none}.fd-select__control .fd-select__button:first-child.is-hover,.fd-select__control .fd-select__button:first-child:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:first-child.is-hover[dir=rtl],.fd-select__control .fd-select__button:first-child:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:first-child.is-hover,[dir=rtl] .fd-select__control .fd-select__button:first-child:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right:none}.fd-select__control .fd-select__button:first-child.is-active,.fd-select__control .fd-select__button:first-child:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:first-child.is-active[dir=rtl],.fd-select__control .fd-select__button:first-child:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:first-child.is-active,[dir=rtl] .fd-select__control .fd-select__button:first-child:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right:none}.fd-select__control .fd-select__button:not(:first-child){border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button:not(:first-child)[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:not(:first-child){border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button:not(:first-child).is-hover,.fd-select__control .fd-select__button:not(:first-child):hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:not(:first-child).is-hover[dir=rtl],.fd-select__control .fd-select__button:not(:first-child):hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:not(:first-child).is-hover,[dir=rtl] .fd-select__control .fd-select__button:not(:first-child):hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:not(:first-child).is-active,.fd-select__control .fd-select__button:not(:first-child):active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button:not(:first-child).is-active[dir=rtl],.fd-select__control .fd-select__button:not(:first-child):active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button:not(:first-child).is-active,[dir=rtl] .fd-select__control .fd-select__button:not(:first-child):active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:first-child .fd-select__button{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__addon:first-child .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right:none}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-hover,.fd-select__control .fd-select__addon:first-child .fd-select__button:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__addon:first-child .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right:none}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-active,.fd-select__control .fd-select__addon:first-child .fd-select__button:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:first-child .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__addon:first-child .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__addon:first-child .fd-select__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right:none}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button{border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-hover,.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-active,.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__addon:not(:first-child) .fd-select__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);border:none;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-select__control .fd-select__button.is-active,.fd-select__control .fd-select__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button.is-hover,.fd-select__control.is-success .fd-select__button:active,.fd-select__control.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button.is-hover,.fd-select__control.is-error .fd-select__button:active,.fd-select__control.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button.is-hover,.fd-select__control.is-warning .fd-select__button:active,.fd-select__control.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button.is-hover,.fd-select__control.is-alert .fd-select__button:active,.fd-select__control.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button.is-hover,.fd-select__control.is-information .fd-select__button:active,.fd-select__control.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{pointer-events:none}.fd-select__control .fd-select__button{height:100%;margin-left:.25rem}.fd-select__control .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button{margin-left:0;margin-right:.25rem}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{cursor:text}.fd-select__control.is-readonly .fd-select__text-content,.fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select__control[readonly] .fd-select__text-content{--fdSelect_Min_Width:5rem;padding-left:.625rem;padding-right:.625rem}.fd-select__control.is-expanded,.fd-select__control[aria-expanded=true]{box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-expanded .fd-select__button,.fd-select__control[aria-expanded=true] .fd-select__button{--fdInput_Group_Button_Text_Color:var(--sapButton_Active_TextColor);--fdInput_Group_Button_Background:var(--sapField_BackgroundStyle);-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.fd-select__control.is-expanded[dir=rtl] .fd-select__button,.fd-select__control[aria-expanded=true][dir=rtl] .fd-select__button,[dir=rtl] .fd-select__control.is-expanded .fd-select__button,[dir=rtl] .fd-select__control[aria-expanded=true] .fd-select__button{border-left-color:transparent;border-right-color:var(--fdSelect_Expanded_Button_Border_Left_Color)}.fd-select__control.is-expanded.is-focus,.fd-select__control.is-expanded:focus,.fd-select__control[aria-expanded=true].is-focus,.fd-select__control[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-expanded.is-hover .fd-select__button,.fd-select__control.is-expanded:hover .fd-select__button,.fd-select__control[aria-expanded=true].is-hover .fd-select__button,.fd-select__control[aria-expanded=true]:hover .fd-select__button{--fdInput_Group_Button_Text_Color:var(--sapButton_Active_TextColor);--fdInput_Group_Button_Background:var(--sapField_BackgroundStyle);-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background-color:var(--sapButton_Selected_Hover_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color_Hover);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.fd-select__control.is-expanded.is-hover[dir=rtl] .fd-select__button,.fd-select__control.is-expanded:hover[dir=rtl] .fd-select__button,.fd-select__control[aria-expanded=true].is-hover[dir=rtl] .fd-select__button,.fd-select__control[aria-expanded=true]:hover[dir=rtl] .fd-select__button,[dir=rtl] .fd-select__control.is-expanded.is-hover .fd-select__button,[dir=rtl] .fd-select__control.is-expanded:hover .fd-select__button,[dir=rtl] .fd-select__control[aria-expanded=true].is-hover .fd-select__button,[dir=rtl] .fd-select__control[aria-expanded=true]:hover .fd-select__button{border-left-color:transparent;border-right-color:var(--fdSelect_Expanded_Button_Border_Left_Color_Hover)}.fd-select__control.is-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-expanded .fd-select__button,.fd-select__control.is-success[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Success_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-expanded[dir=rtl] .fd-select__button,.fd-select__control.is-success[aria-expanded=true][dir=rtl] .fd-select__button,[dir=rtl] .fd-select__control.is-success.is-expanded .fd-select__button,[dir=rtl] .fd-select__control.is-success[aria-expanded=true] .fd-select__button{border-left-color:transparent;border-right-color:var(--fdSelect_Expanded_Button_Border_Left_Color)}.fd-select__control.is-success.is-expanded.is-focus,.fd-select__control.is-success.is-expanded:focus,.fd-select__control.is-success[aria-expanded=true].is-focus,.fd-select__control.is-success[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-expanded .fd-select__button,.fd-select__control.is-error[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Error_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-expanded[dir=rtl] .fd-select__button,.fd-select__control.is-error[aria-expanded=true][dir=rtl] .fd-select__button,[dir=rtl] .fd-select__control.is-error.is-expanded .fd-select__button,[dir=rtl] .fd-select__control.is-error[aria-expanded=true] .fd-select__button{border-left-color:transparent;border-right-color:var(--fdSelect_Expanded_Button_Border_Left_Color)}.fd-select__control.is-error.is-expanded.is-focus,.fd-select__control.is-error.is-expanded:focus,.fd-select__control.is-error[aria-expanded=true].is-focus,.fd-select__control.is-error[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-expanded .fd-select__button,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-expanded[dir=rtl] .fd-select__button,.fd-select__control.is-warning[aria-expanded=true][dir=rtl] .fd-select__button,[dir=rtl] .fd-select__control.is-warning.is-expanded .fd-select__button,[dir=rtl] .fd-select__control.is-warning[aria-expanded=true] .fd-select__button{border-left-color:transparent;border-right-color:var(--fdSelect_Expanded_Button_Border_Left_Color)}.fd-select__control.is-warning.is-expanded.is-focus,.fd-select__control.is-warning.is-expanded:focus,.fd-select__control.is-warning[aria-expanded=true].is-focus,.fd-select__control.is-warning[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-expanded .fd-select__button,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-expanded[dir=rtl] .fd-select__button,.fd-select__control.is-alert[aria-expanded=true][dir=rtl] .fd-select__button,[dir=rtl] .fd-select__control.is-alert.is-expanded .fd-select__button,[dir=rtl] .fd-select__control.is-alert[aria-expanded=true] .fd-select__button{border-left-color:transparent;border-right-color:var(--fdSelect_Expanded_Button_Border_Left_Color)}.fd-select__control.is-alert.is-expanded.is-focus,.fd-select__control.is-alert.is-expanded:focus,.fd-select__control.is-alert[aria-expanded=true].is-focus,.fd-select__control.is-alert[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-expanded .fd-select__button,.fd-select__control.is-information[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Information_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-expanded[dir=rtl] .fd-select__button,.fd-select__control.is-information[aria-expanded=true][dir=rtl] .fd-select__button,[dir=rtl] .fd-select__control.is-information.is-expanded .fd-select__button,[dir=rtl] .fd-select__control.is-information[aria-expanded=true] .fd-select__button{border-left-color:transparent;border-right-color:var(--fdSelect_Expanded_Button_Border_Left_Color)}.fd-select__control.is-information.is-expanded.is-focus,.fd-select__control.is-information.is-expanded:focus,.fd-select__control.is-information[aria-expanded=true].is-focus,.fd-select__control.is-information[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__text-content{-webkit-box-sizing:border-box;--fdSelect_Min_Width:2.5rem;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdSelect_Text_Content_Color, var(--sapTextColor));cursor:pointer;display:var(--fdSelect_Text_Content_Display, inline-block);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-width:calc(var(--fdSelect_Min_Width) - var(--sapField_BorderWidth) * 2);overflow:hidden;padding:0 0 0 .625rem;text-overflow:ellipsis;white-space:nowrap}.fd-select__text-content:after,.fd-select__text-content:before{box-sizing:inherit;font-size:inherit}.fd-select__text-content[dir=rtl],[dir=rtl] .fd-select__text-content{padding-left:0;padding-right:.625rem}.fd-select--compact{margin:.1875rem 0}.fd-select--compact .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select--compact .fd-select__control .fd-select__text-content{--fdSelect_Min_Width:2.75rem;padding-left:.5rem}.fd-select--compact .fd-select__control .fd-select__text-content[dir=rtl],[dir=rtl] .fd-select--compact .fd-select__control .fd-select__text-content{padding-left:0;padding-right:.5rem}.fd-select--compact .fd-select__control.is-readonly .fd-select__text-content,.fd-select--compact .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select--compact .fd-select__control[readonly] .fd-select__text-content{padding-left:.5rem;padding-right:.5rem}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-select{display:block;max-width:100%}.fd-select .fd-popover-custom{min-width:100%}.fd-select--inline{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i6.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "directive", type: i8.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "pipe", type: i9.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-select', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
@@ -953,9 +966,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImpor
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['tabindex']
-                }] }, { type: i1$1.RtlService, decorators: [{
+                }] }, { type: i1$2.RtlService, decorators: [{
                     type: Optional
-                }] }, { type: SelectKeyManagerService }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1$1.DynamicComponentService, decorators: [{
+                }] }, { type: SelectKeyManagerService }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1$2.DynamicComponentService, decorators: [{
                     type: Optional
                 }] }, { type: i3$1.NgControl, decorators: [{
                     type: Optional