@fundamental-ngx/platform 0.48.0-rc.20 → 0.48.0-rc.21

package/fesm2022/fundamental-ngx-platform-form.mjs

@@ -13,7 +13,7 @@ import { distinctUntilChanged, map, takeUntil, switchMap, startWith, debounceTim
 import * as i3 from '@angular/common';
 import { NgTemplateOutlet, CommonModule, AsyncPipe, NgClass, KeyValuePipe, formatNumber } from '@angular/common';
 import { FormInputMessageGroupComponent, FormItemComponent, FormMessageComponent, FormLabelComponent, FormGroupComponent as FormGroupComponent$1, FormControlComponent } from '@fundamental-ngx/core/form';
-import { IconComponent } from '@fundamental-ngx/core/icon';
+import { IconComponent, FD_DEFAULT_ICON_FONT_FAMILY } from '@fundamental-ngx/core/icon';
 import { InlineHelpDirective } from '@fundamental-ngx/core/inline-help';
 import { LinkComponent } from '@fundamental-ngx/core/link';
 import { PopoverComponent, PopoverControlComponent, PopoverBodyComponent } from '@fundamental-ngx/core/popover';
@@ -3457,7 +3457,7 @@ class PlatformMultiInputComponent extends BaseMultiInput {
                 multi: true
             },
             contentDensityObserverProviders()
-        ], viewQueries: [{ propertyName: "listTemplateDD", first: true, predicate: ListComponent, descendants: true }, { propertyName: "tokenizer", first: true, predicate: TokenizerComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_listItems", predicate: BaseListItem, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fd-multi-input\">\n    <ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n</div>\n<ng-template #desktopTemplate>\n    <fd-popover\n        additionalBodyClass=\"fdp-multi-input__list-container\"\n        [isOpen]=\"isOpen && _suggestions.length > 0\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readonly\"\n        [maxWidth]=\"(!autoResize && minWidth) || 0\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-input-group\n        [button]=\"true\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [isControl]=\"true\"\n        glyph=\"value-help\"\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        (keydown)=\"removeSelectedTokens($event)\"\n        (addOnButtonClicked)=\"addOnButtonClick($event)\"\n        (click)=\"onInputGroupClicked()\"\n        [glyphAriaLabel]=\"glyphAriaLabel\"\n    >\n        <span [attr.id]=\"tokenHiddenId\" aria-hidden=\"true\" class=\"fdp-multi-input__invisible-text\"\n            >Contains {{ selected.length || 'no' }} token</span\n        >\n        @if (selected) {\n            <fd-tokenizer\n                [tokenizerFocusable]=\"false\"\n                [compactCollapse]=\"true\"\n                #tokenizer\n                class=\"fd-multi-input-tokenizer-custom\"\n                (moreClickedEvent)=\"moreClicked()\"\n                tabindex=\"-1\"\n                role=\"listbox\"\n                fdMultiAnnouncer\n                [multiAnnouncerOptions]=\"isOpen ? _suggestions : []\"\n            >\n                @for (token of selected; track token; let i = $index) {\n                    <fd-token\n                        [readOnly]=\"disabled\"\n                        (onCloseClick)=\"removeToken(token)\"\n                        [attr.aria-posinset]=\"i\"\n                        [attr.aria-setsize]=\"selected.length\"\n                    >\n                        <span>{{ token.label | displayFnPipe: displayFn }}</span>\n                    </fd-token>\n                }\n                <input\n                    #searchInputElement\n                    type=\"text\"\n                    class=\"fd-input fd-multi-input-tokenizer-input fd-tokenizer__input\"\n                    fdp-auto-complete\n                    autocomplete=\"off\"\n                    (onComplete)=\"_onAutoComplete($event)\"\n                    (keydown.enter)=\"_onKeydownEnter($event)\"\n                    (keydown)=\"onInputKeydownHandler($event)\"\n                    [inputText]=\"inputText\"\n                    [options]=\"_suggestions\"\n                    fd-input-group-input\n                    fd-form-control\n                    [attr.id]=\"id\"\n                    [disabled]=\"disabled\"\n                    [(ngModel)]=\"inputText\"\n                    (ngModelChange)=\"searchTermChanged()\"\n                    [ngModelOptions]=\"{ standalone: true }\"\n                    [placeholder]=\"placeholder\"\n                    (focus)=\"onTouched(); tokenizer._showAllTokens()\"\n                    (blur)=\"tokenizer._hideTokens()\"\n                    [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n                    [readonly]=\"readonly\"\n                    aria-haspopup=\"listbox\"\n                    [attr.aria-readonly]=\"readonly\"\n                    [ariaLabel]=\"ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)\"\n                    [ariaLabelledBy]=\"ariaLabelledBy\"\n                    [attr.aria-required]=\"required\"\n                    [attr.aria-describedby]=\"tokenHiddenId\"\n                    aria-roledescription=\"Multi Value Input\"\n                    fdkInitialFocus\n                    [enabled]=\"autofocus\"\n                />\n            </fd-tokenizer>\n        }\n    </fd-input-group>\n</ng-template>\n<ng-template #listTemplate>\n    @if (_suggestions && _suggestions.length) {\n        <fdp-list\n            [noBorder]=\"true\"\n            #listTemplateDD\n            [hasByLine]=\"hasByLine\"\n            [selectionMode]=\"selectionMode\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            [interceptTabKey]=\"false\"\n            (keydown.tab)=\"close()\"\n        >\n            @if (!isGroup) {\n                @for (listItem of _suggestions; track listItem) {\n                    <fdp-standard-list-item\n                        [title]=\"listItem.label\"\n                        [description]=\"listItem.description || ''\"\n                        [avatar]=\"listItem.avatarSrc\"\n                        [value]=\"listItem.value\"\n                        (itemSelected)=\"selectionMode !== 'multi' && addToArray(listItem, true)\"\n                        (itemCheckboxSelected)=\"_checkboxSelected(listItem, $event)\"\n                        (buttonClicked)=\"deleteToken(listItem)\"\n                        role=\"option\"\n                    >\n                    </fdp-standard-list-item>\n                }\n            }\n            @if (isGroup) {\n                @for (group of _suggestions; track group) {\n                    @if (!groupItemTemplate) {\n                        <fdp-list-group-header [groupHeaderTitle]=\"group.label\"></fdp-list-group-header>\n                    }\n                    @if (groupItemTemplate) {\n                        <ng-template\n                            [ngTemplateOutlet]=\"groupItemTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                        ></ng-template>\n                    }\n                    @for (optionItem of group.children; track optionItem; let i = $index) {\n                        <fdp-standard-list-item\n                            [title]=\"optionItem.label\"\n                            [value]=\"optionItem.value\"\n                            (itemSelected)=\"addToArray(optionItem, true)\"\n                            (itemCheckboxSelected)=\"addToArray(optionItem, false)\"\n                            (buttonClicked)=\"deleteToken(optionItem)\"\n                            role=\"option\"\n                        >\n                        </fdp-standard-list-item>\n                    }\n                }\n            }\n        </fdp-list>\n    }\n</ng-template>\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}.fd-multi-input-tokenizer-custom--compact{width:calc(100% - 2rem)}.fdp-multi-input__list-container.fd-popover__body{width:100%;overflow:hidden;position:relative}.fdp-multi-input__invisible-text{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i6.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "ngmodule", type: PlatformListModule }, { kind: "component", type: i7.ListComponent, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "component", type: i7.ListGroupHeaderComponent, selector: "fdp-list-group-header", inputs: ["groupHeaderTitle"] }, { kind: "component", type: i7.StandardListItemComponent, selector: "fdp-standard-list-item" }, { kind: "pipe", type: DisplayFnPipe, name: "displayFnPipe" }, { kind: "ngmodule", type: ContentDensityModule }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "directive", type: MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "listTemplateDD", first: true, predicate: ListComponent, descendants: true }, { propertyName: "tokenizer", first: true, predicate: TokenizerComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_listItems", predicate: BaseListItem, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fd-multi-input\">\n    <ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n</div>\n<ng-template #desktopTemplate>\n    <fd-popover\n        additionalBodyClass=\"fdp-multi-input__list-container\"\n        [isOpen]=\"isOpen && _suggestions.length > 0\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readonly\"\n        [maxWidth]=\"(!autoResize && minWidth) || 0\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-input-group\n        [button]=\"true\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [isControl]=\"true\"\n        glyph=\"value-help\"\n        [state]=\"state\"\n        [disabled]=\"disabled\"\n        (keydown)=\"removeSelectedTokens($event)\"\n        (addOnButtonClicked)=\"addOnButtonClick($event)\"\n        (click)=\"onInputGroupClicked()\"\n        [glyphAriaLabel]=\"glyphAriaLabel\"\n    >\n        <span [attr.id]=\"tokenHiddenId\" aria-hidden=\"true\" class=\"fdp-multi-input__invisible-text\"\n            >Contains {{ selected.length || 'no' }} token</span\n        >\n        @if (selected) {\n            <fd-tokenizer\n                [tokenizerFocusable]=\"false\"\n                [compactCollapse]=\"true\"\n                #tokenizer\n                class=\"fd-multi-input-tokenizer-custom\"\n                (moreClickedEvent)=\"moreClicked()\"\n                tabindex=\"-1\"\n                role=\"listbox\"\n                fdMultiAnnouncer\n                [multiAnnouncerOptions]=\"isOpen ? _suggestions : []\"\n            >\n                @for (token of selected; track token; let i = $index) {\n                    <fd-token\n                        [readOnly]=\"disabled\"\n                        (onCloseClick)=\"removeToken(token)\"\n                        [attr.aria-posinset]=\"i\"\n                        [attr.aria-setsize]=\"selected.length\"\n                    >\n                        <span>{{ token.label | displayFnPipe: displayFn }}</span>\n                    </fd-token>\n                }\n                <input\n                    #searchInputElement\n                    type=\"text\"\n                    class=\"fd-input fd-multi-input-tokenizer-input fd-tokenizer__input\"\n                    fdp-auto-complete\n                    autocomplete=\"off\"\n                    (onComplete)=\"_onAutoComplete($event)\"\n                    (keydown.enter)=\"_onKeydownEnter($event)\"\n                    (keydown)=\"onInputKeydownHandler($event)\"\n                    [inputText]=\"inputText\"\n                    [options]=\"_suggestions\"\n                    fd-input-group-input\n                    fd-form-control\n                    [attr.id]=\"id\"\n                    [disabled]=\"disabled\"\n                    [(ngModel)]=\"inputText\"\n                    (ngModelChange)=\"searchTermChanged()\"\n                    [ngModelOptions]=\"{ standalone: true }\"\n                    [placeholder]=\"placeholder\"\n                    (focus)=\"onTouched(); tokenizer._showAllTokens()\"\n                    (blur)=\"tokenizer._hideTokens()\"\n                    [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n                    [readonly]=\"readonly\"\n                    aria-haspopup=\"listbox\"\n                    [attr.aria-readonly]=\"readonly\"\n                    [ariaLabel]=\"ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)\"\n                    [ariaLabelledBy]=\"ariaLabelledBy\"\n                    [attr.aria-required]=\"required\"\n                    [attr.aria-describedby]=\"tokenHiddenId\"\n                    aria-roledescription=\"Multi Value Input\"\n                    fdkInitialFocus\n                    [enabled]=\"autofocus\"\n                />\n            </fd-tokenizer>\n        }\n    </fd-input-group>\n</ng-template>\n<ng-template #listTemplate>\n    @if (_suggestions && _suggestions.length) {\n        <fdp-list\n            [noBorder]=\"true\"\n            #listTemplateDD\n            [hasByLine]=\"hasByLine\"\n            [selectionMode]=\"selectionMode\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            [interceptTabKey]=\"false\"\n            (keydown.tab)=\"close()\"\n        >\n            @if (!isGroup) {\n                @for (listItem of _suggestions; track listItem) {\n                    <fdp-standard-list-item\n                        [title]=\"listItem.label\"\n                        [description]=\"listItem.description || ''\"\n                        [avatar]=\"listItem.avatarSrc\"\n                        [value]=\"listItem.value\"\n                        (itemSelected)=\"selectionMode !== 'multi' && addToArray(listItem, true)\"\n                        (itemCheckboxSelected)=\"_checkboxSelected(listItem, $event)\"\n                        (buttonClicked)=\"deleteToken(listItem)\"\n                        role=\"option\"\n                    >\n                    </fdp-standard-list-item>\n                }\n            }\n            @if (isGroup) {\n                @for (group of _suggestions; track group) {\n                    @if (!groupItemTemplate) {\n                        <fdp-list-group-header [groupHeaderTitle]=\"group.label\"></fdp-list-group-header>\n                    }\n                    @if (groupItemTemplate) {\n                        <ng-template\n                            [ngTemplateOutlet]=\"groupItemTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                        ></ng-template>\n                    }\n                    @for (optionItem of group.children; track optionItem; let i = $index) {\n                        <fdp-standard-list-item\n                            [title]=\"optionItem.label\"\n                            [value]=\"optionItem.value\"\n                            (itemSelected)=\"addToArray(optionItem, true)\"\n                            (itemCheckboxSelected)=\"addToArray(optionItem, false)\"\n                            (buttonClicked)=\"deleteToken(optionItem)\"\n                            role=\"option\"\n                        >\n                        </fdp-standard-list-item>\n                    }\n                }\n            }\n        </fdp-list>\n    }\n</ng-template>\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}.fd-multi-input-tokenizer-custom--compact{width:calc(100% - 2rem)}.fdp-multi-input__list-container.fd-popover__body{width:100%;overflow:hidden;position:relative}.fdp-multi-input__invisible-text{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i6.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "glyphFont", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "ngmodule", type: PlatformListModule }, { kind: "component", type: i7.ListComponent, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "component", type: i7.ListGroupHeaderComponent, selector: "fdp-list-group-header", inputs: ["groupHeaderTitle"] }, { kind: "component", type: i7.StandardListItemComponent, selector: "fdp-standard-list-item" }, { kind: "pipe", type: DisplayFnPipe, name: "displayFnPipe" }, { kind: "ngmodule", type: ContentDensityModule }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "directive", type: MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: PlatformMultiInputComponent, decorators: [{
             type: Component,
@@ -3598,7 +3598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
 
 class DynamicFormGeneratorObjectStatusComponent extends BaseDynamicFormGeneratorControl {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DynamicFormGeneratorObjectStatusComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: DynamicFormGeneratorObjectStatusComponent, isStandalone: true, selector: "fdp-dynamic-form-generator-object-status", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-object-status\n            [label]=\"formItem.default\"\n            [status]=\"formItem.guiOptions?.status\"\n            [glyph]=\"formItem.guiOptions?.icon\"\n        ></fdp-object-status>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: ObjectStatusComponent, selector: "fdp-object-status", inputs: ["status", "glyph", "indicationColor", "secondaryIndication", "clickable", "inverted", "large", "label", "ariaLabel", "title"], outputs: ["objectStatusClick"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: DynamicFormGeneratorObjectStatusComponent, isStandalone: true, selector: "fdp-dynamic-form-generator-object-status", usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-container [formGroupName]=\"formGroupName\">\n        <fdp-object-status\n            [label]=\"formItem.default\"\n            [status]=\"formItem.guiOptions?.status\"\n            [glyph]=\"formItem.guiOptions?.icon\"\n        ></fdp-object-status>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: ObjectStatusComponent, selector: "fdp-object-status", inputs: ["status", "glyph", "glyphFont", "indicationColor", "secondaryIndication", "clickable", "inverted", "large", "label", "ariaLabel", "title"], outputs: ["objectStatusClick"] }], viewProviders: [dynamicFormFieldProvider, dynamicFormGroupChildProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: DynamicFormGeneratorObjectStatusComponent, decorators: [{
             type: Component,
@@ -4103,6 +4103,8 @@ class BaseSelect extends CollectionBaseInput {
         this.showSecondaryText = false;
         /** Glyph to add icon in the select component. */
         this.glyph = 'slim-arrow-down';
+        /** Glyph font family */
+        this.glyphFont = FD_DEFAULT_ICON_FONT_FAMILY;
         /**
          * Preset options for the select body width.
          * * `at-least` will apply a minimum width to the body equivalent to the width of the control.
@@ -4327,7 +4329,7 @@ class BaseSelect extends CollectionBaseInput {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: BaseSelect, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, self: true }, { token: SelectConfig }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: BaseSelect, inputs: { maxHeight: "maxHeight", mobile: "mobile", group: "group", groupKey: "groupKey", secondaryKey: "secondaryKey", showSecondaryText: "showSecondaryText", glyph: "glyph", appendTo: "appendTo", triggerValue: "triggerValue", fillControlMode: "fillControlMode", secondaryTextAlignment: "secondaryTextAlignment", width: "width", readonly: "readonly", placeholder: "placeholder", closeOnOutsideClick: "closeOnOutsideClick", controlTemplate: "controlTemplate", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", mobileConfig: "mobileConfig", noValueLabel: "noValueLabel", noWrapText: "noWrapText", autoResize: "autoResize", firstColumnRatio: "firstColumnRatio", secondColumnRatio: "secondColumnRatio", minWidth: "minWidth", maxWidth: "maxWidth", tabOutStrategy: "tabOutStrategy", list: "list" }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "customTemplates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "listComponent", first: true, predicate: ListComponent$1, descendants: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: BaseSelect, inputs: { maxHeight: "maxHeight", mobile: "mobile", group: "group", groupKey: "groupKey", secondaryKey: "secondaryKey", showSecondaryText: "showSecondaryText", glyph: "glyph", glyphFont: "glyphFont", appendTo: "appendTo", triggerValue: "triggerValue", fillControlMode: "fillControlMode", secondaryTextAlignment: "secondaryTextAlignment", width: "width", readonly: "readonly", placeholder: "placeholder", closeOnOutsideClick: "closeOnOutsideClick", controlTemplate: "controlTemplate", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", mobileConfig: "mobileConfig", noValueLabel: "noValueLabel", noWrapText: "noWrapText", autoResize: "autoResize", firstColumnRatio: "firstColumnRatio", secondColumnRatio: "secondColumnRatio", minWidth: "minWidth", maxWidth: "maxWidth", tabOutStrategy: "tabOutStrategy", list: "list" }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "customTemplates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "listComponent", first: true, predicate: ListComponent$1, descendants: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: BaseSelect, decorators: [{
             type: Directive
@@ -4375,6 +4377,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                 type: Input
             }], glyph: [{
                 type: Input
+            }], glyphFont: [{
+                type: Input
             }], appendTo: [{
                 type: Input
             }], triggerValue: [{
@@ -4523,11 +4527,11 @@ class SelectComponent extends BaseSelect {
         element.setAttribute('style', 'width: ' + proportion + '%; max-width: ' + proportion + '%');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, optional: true, skipSelf: true }, { token: i1$1.NgForm, optional: true, self: true }, { token: i3$1.DynamicComponentService }, { token: SelectConfig }, { token: FD_FORM_FIELD, host: true, optional: true, skipSelf: true }, { token: FD_FORM_FIELD_CONTROL, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: SelectComponent, isStandalone: true, selector: "fdp-select", inputs: { value: "value", inline: "inline" }, providers: [DynamicComponentService, { provide: FD_FORM_FIELD_CONTROL, useExisting: SelectComponent, multi: true }], viewQueries: [{ propertyName: "select", first: true, predicate: SelectComponent$1, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-select\n    [placeholder]=\"placeholder\"\n    [glyph]=\"glyph\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    [controlTemplate]=\"controlTemplate\"\n    [appendTo]=\"appendTo\"\n    [fillControlMode]=\"fillControlMode\"\n    [maxHeight]=\"maxHeight\"\n    [attr.aria-disabled]=\"disabled || readonly\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.tooltip]=\"value\"\n    [attr.aria-readonly]=\"readonly\"\n    [attr.role]=\"'listbox'\"\n    [value]=\"value\"\n    [state]=\"state\"\n    [stateMessage]=\"stateMessage\"\n    [advancedStateMessage]=\"advancedStateMessage\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [inline]=\"inline\"\n    [(ngModel)]=\"value\"\n    [tabOutStrategy]=\"tabOutStrategy\"\n    (valueChange)=\"_onSelection($event)\"\n    (isOpenChange)=\"_onOpenChange($event)\"\n>\n    <ng-content></ng-content>\n    @if (noValueLabel) {\n        <li fd-option [disabled]=\"false\" [value]=\"null\">\n            {{ noValueLabel }}\n        </li>\n    }\n    @for (item of _optionItems; track item; let index = $index) {\n        <li\n            fd-option\n            [disabled]=\"!!item.disabled\"\n            [value]=\"item.value\"\n            [attr.aria-labelledby]=\"ariaLabel\"\n            [attr.aria-disabled]=\"disabled\"\n        >\n            @if (item.icon) {\n                <fd-icon [glyph]=\"item.icon\" class=\"fd-template-icon icon-margin\"></fd-icon>\n            }\n            <ng-template\n                [ngTemplateOutlet]=\"listItem\"\n                [ngTemplateOutletContext]=\"{ optionItem: item, index: index }\"\n            ></ng-template>\n            <ng-template\n                [ngTemplateOutlet]=\"secondaryTextSource\"\n                [ngTemplateOutletContext]=\"{ optionItem: item }\"\n            ></ng-template>\n        </li>\n    }\n</fd-select>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    @if (_isSelectedOptionItem(optionItem) && !!_selectedItemTemplate) {\n        <ng-template\n            [ngTemplateOutlet]=\"_selectedItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n    @if (!(_isSelectedOptionItem(optionItem) && _selectedItemTemplate)) {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    @if (!_optionItemTemplate) {\n        <span [innerHTML]=\"optionItem.label\"></span>\n    } @else {\n        <ng-template\n            [ngTemplateOutlet]=\"_optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    @if (showSecondaryText) {\n        @if (!_secondaryItemTemplate) {\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [innerHTML]=\"optionItem.secondaryText\"\n            ></span>\n        } @else {\n            <ng-template\n                [ngTemplateOutlet]=\"_secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-template>\n        }\n    }\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\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:var(--sapField_Shadow);-moz-appearance:none;-webkit-appearance:none;-webkit-box-shadow: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:var(--sapField_Shadow);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;gap:.25rem;height:var(--sapElement_Height);justify-content:center;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--sapElement_Height);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{-webkit-box-shadow:var(--sapField_SuccessShadow);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle);box-shadow:var(--sapField_SuccessShadow)}.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)}.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-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Success_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-error{-webkit-box-shadow:var(--sapField_InvalidShadow);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle);box-shadow:var(--sapField_InvalidShadow)}.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)}.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-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Error_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-warning{-webkit-box-shadow:var(--sapField_WarningShadow);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle);box-shadow:var(--sapField_WarningShadow)}.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)}.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-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.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)}.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-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-information{-webkit-box-shadow:var(--sapField_InformationShadow);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle);box-shadow:var(--sapField_InformationShadow)}.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)}.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-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Information_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.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);opacity:0}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.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);opacity:0}.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);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{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none;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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);background-color:var(--fdButtonBackgroundColor);border:none;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:relative;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:after{border-radius:var(--fdInput_Outline_Border_Radius)}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{--fdInput_Group_Button_Text_Color:var(--fdInput_Group_Button_Hover_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Hover_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.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.is-focus,.fd-select__control.is-success:focus{z-index:5}.fd-select__control.is-success.is-focus .fd-select__button,.fd-select__control.is-success:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-focus .fd-select__button.is-hover,.fd-select__control.is-success.is-focus .fd-select__button:hover,.fd-select__control.is-success:focus .fd-select__button.is-hover,.fd-select__control.is-success:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-expanded .fd-select__button.is-hover,.fd-select__control.is-success.is-expanded .fd-select__button:hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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.is-focus,.fd-select__control.is-error:focus{z-index:5}.fd-select__control.is-error.is-focus .fd-select__button,.fd-select__control.is-error:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-focus .fd-select__button.is-hover,.fd-select__control.is-error.is-focus .fd-select__button:hover,.fd-select__control.is-error:focus .fd-select__button.is-hover,.fd-select__control.is-error:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-expanded .fd-select__button.is-hover,.fd-select__control.is-error.is-expanded .fd-select__button:hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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.is-focus,.fd-select__control.is-warning:focus{z-index:5}.fd-select__control.is-warning.is-focus .fd-select__button,.fd-select__control.is-warning:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-focus .fd-select__button.is-hover,.fd-select__control.is-warning.is-focus .fd-select__button:hover,.fd-select__control.is-warning:focus .fd-select__button.is-hover,.fd-select__control.is-warning:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-expanded .fd-select__button.is-hover,.fd-select__control.is-warning.is-expanded .fd-select__button:hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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.is-focus,.fd-select__control.is-alert:focus{z-index:5}.fd-select__control.is-alert.is-focus .fd-select__button,.fd-select__control.is-alert:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-focus .fd-select__button.is-hover,.fd-select__control.is-alert.is-focus .fd-select__button:hover,.fd-select__control.is-alert:focus .fd-select__button.is-hover,.fd-select__control.is-alert:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-expanded .fd-select__button.is-hover,.fd-select__control.is-alert.is-expanded .fd-select__button:hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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.is-focus,.fd-select__control.is-information:focus{z-index:5}.fd-select__control.is-information.is-focus .fd-select__button,.fd-select__control.is-information:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-focus .fd-select__button.is-hover,.fd-select__control.is-information.is-focus .fd-select__button:hover,.fd-select__control.is-information:focus .fd-select__button.is-hover,.fd-select__control.is-information:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-expanded .fd-select__button.is-hover,.fd-select__control.is-information.is-expanded .fd-select__button:hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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:after{-webkit-box-shadow:var(--sapField_Shadow);border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);content:\"\";inset:0;pointer-events:none;position:absolute}.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-readonly[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-readonly=true][aria-selected=false] .fd-select__text-content,.fd-select__control[readonly][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control.is-readonly .fd-select__button,.fd-select__control[aria-readonly=true] .fd-select__button,.fd-select__control[readonly] .fd-select__button{opacity:0}.fd-select__control.is-disabled[aria-selected=false] .fd-select__text-content,.fd-select__control:disabled[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-disabled=true][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control[aria-selected=false] .fd-select__text-content{padding:0 .625rem}.fd-select__control[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-selected=false] .fd-select__text-content [class*=sap-icon]{color:var(--sapField_PlaceholderTextColor);font-style:italic;font-weight:400}.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[class*=-compact],.fd-select[class*=-condensed],[class*=-compact] .fd-select:not([class*=-cozy]),[class*=-condensed] .fd-select:not([class*=-cozy]){margin:.1875rem 0}.fd-select[class*=-compact] .fd-select__control,.fd-select[class*=-condensed] .fd-select__control,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{--fdSelect_Min_Width:2.75rem;padding-left:.5rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content[dir=rtl],.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content[dir=rtl],[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content[dir=rtl],[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content[dir=rtl],[dir=rtl] .fd-select[class*=-compact] .fd-select__control .fd-select__text-content,[dir=rtl] .fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[dir=rtl] [class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[dir=rtl] [class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{padding-left:0;padding-right:.5rem}.fd-select[class*=-compact] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[readonly] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[readonly] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content{padding-left:.5rem;padding-right:.5rem}@media (min-width: 600px){[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--10{text-align:right!important}}\n"], dependencies: [{ kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i4.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: SelectComponent, isStandalone: true, selector: "fdp-select", inputs: { value: "value", inline: "inline" }, providers: [DynamicComponentService, { provide: FD_FORM_FIELD_CONTROL, useExisting: SelectComponent, multi: true }], viewQueries: [{ propertyName: "select", first: true, predicate: SelectComponent$1, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-select\n    [placeholder]=\"placeholder\"\n    [glyph]=\"glyph\"\n    [glyphFont]=\"glyphFont\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    [controlTemplate]=\"controlTemplate\"\n    [appendTo]=\"appendTo\"\n    [fillControlMode]=\"fillControlMode\"\n    [maxHeight]=\"maxHeight\"\n    [attr.aria-disabled]=\"disabled || readonly\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.tooltip]=\"value\"\n    [attr.aria-readonly]=\"readonly\"\n    [attr.role]=\"'listbox'\"\n    [value]=\"value\"\n    [state]=\"state\"\n    [stateMessage]=\"stateMessage\"\n    [advancedStateMessage]=\"advancedStateMessage\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [inline]=\"inline\"\n    [(ngModel)]=\"value\"\n    [tabOutStrategy]=\"tabOutStrategy\"\n    (valueChange)=\"_onSelection($event)\"\n    (isOpenChange)=\"_onOpenChange($event)\"\n>\n    <ng-content></ng-content>\n    @if (noValueLabel) {\n        <li fd-option [disabled]=\"false\" [value]=\"null\">\n            {{ noValueLabel }}\n        </li>\n    }\n    @for (item of _optionItems; track item; let index = $index) {\n        <li\n            fd-option\n            [disabled]=\"!!item.disabled\"\n            [value]=\"item.value\"\n            [attr.aria-labelledby]=\"ariaLabel\"\n            [attr.aria-disabled]=\"disabled\"\n        >\n            @if (item.icon) {\n                <fd-icon [glyph]=\"item.icon\" class=\"fd-template-icon icon-margin\"></fd-icon>\n            }\n            <ng-template\n                [ngTemplateOutlet]=\"listItem\"\n                [ngTemplateOutletContext]=\"{ optionItem: item, index: index }\"\n            ></ng-template>\n            <ng-template\n                [ngTemplateOutlet]=\"secondaryTextSource\"\n                [ngTemplateOutletContext]=\"{ optionItem: item }\"\n            ></ng-template>\n        </li>\n    }\n</fd-select>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    @if (_isSelectedOptionItem(optionItem) && !!_selectedItemTemplate) {\n        <ng-template\n            [ngTemplateOutlet]=\"_selectedItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n    @if (!(_isSelectedOptionItem(optionItem) && _selectedItemTemplate)) {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    @if (!_optionItemTemplate) {\n        <span [innerHTML]=\"optionItem.label\"></span>\n    } @else {\n        <ng-template\n            [ngTemplateOutlet]=\"_optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    @if (showSecondaryText) {\n        @if (!_secondaryItemTemplate) {\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [innerHTML]=\"optionItem.secondaryText\"\n            ></span>\n        } @else {\n            <ng-template\n                [ngTemplateOutlet]=\"_secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-template>\n        }\n    }\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\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:var(--sapField_Shadow);-moz-appearance:none;-webkit-appearance:none;-webkit-box-shadow: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:var(--sapField_Shadow);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;gap:.25rem;height:var(--sapElement_Height);justify-content:center;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--sapElement_Height);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{-webkit-box-shadow:var(--sapField_SuccessShadow);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle);box-shadow:var(--sapField_SuccessShadow)}.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)}.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-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Success_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-error{-webkit-box-shadow:var(--sapField_InvalidShadow);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle);box-shadow:var(--sapField_InvalidShadow)}.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)}.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-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Error_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-warning{-webkit-box-shadow:var(--sapField_WarningShadow);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle);box-shadow:var(--sapField_WarningShadow)}.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)}.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-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.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)}.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-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-information{-webkit-box-shadow:var(--sapField_InformationShadow);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle);box-shadow:var(--sapField_InformationShadow)}.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)}.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-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Information_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.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);opacity:0}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.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);opacity:0}.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);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{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none;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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);background-color:var(--fdButtonBackgroundColor);border:none;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:relative;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:after{border-radius:var(--fdInput_Outline_Border_Radius)}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{--fdInput_Group_Button_Text_Color:var(--fdInput_Group_Button_Hover_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Hover_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.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.is-focus,.fd-select__control.is-success:focus{z-index:5}.fd-select__control.is-success.is-focus .fd-select__button,.fd-select__control.is-success:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-focus .fd-select__button.is-hover,.fd-select__control.is-success.is-focus .fd-select__button:hover,.fd-select__control.is-success:focus .fd-select__button.is-hover,.fd-select__control.is-success:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-expanded .fd-select__button.is-hover,.fd-select__control.is-success.is-expanded .fd-select__button:hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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.is-focus,.fd-select__control.is-error:focus{z-index:5}.fd-select__control.is-error.is-focus .fd-select__button,.fd-select__control.is-error:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-focus .fd-select__button.is-hover,.fd-select__control.is-error.is-focus .fd-select__button:hover,.fd-select__control.is-error:focus .fd-select__button.is-hover,.fd-select__control.is-error:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-expanded .fd-select__button.is-hover,.fd-select__control.is-error.is-expanded .fd-select__button:hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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.is-focus,.fd-select__control.is-warning:focus{z-index:5}.fd-select__control.is-warning.is-focus .fd-select__button,.fd-select__control.is-warning:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-focus .fd-select__button.is-hover,.fd-select__control.is-warning.is-focus .fd-select__button:hover,.fd-select__control.is-warning:focus .fd-select__button.is-hover,.fd-select__control.is-warning:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-expanded .fd-select__button.is-hover,.fd-select__control.is-warning.is-expanded .fd-select__button:hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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.is-focus,.fd-select__control.is-alert:focus{z-index:5}.fd-select__control.is-alert.is-focus .fd-select__button,.fd-select__control.is-alert:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-focus .fd-select__button.is-hover,.fd-select__control.is-alert.is-focus .fd-select__button:hover,.fd-select__control.is-alert:focus .fd-select__button.is-hover,.fd-select__control.is-alert:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-expanded .fd-select__button.is-hover,.fd-select__control.is-alert.is-expanded .fd-select__button:hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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.is-focus,.fd-select__control.is-information:focus{z-index:5}.fd-select__control.is-information.is-focus .fd-select__button,.fd-select__control.is-information:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-focus .fd-select__button.is-hover,.fd-select__control.is-information.is-focus .fd-select__button:hover,.fd-select__control.is-information:focus .fd-select__button.is-hover,.fd-select__control.is-information:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-expanded .fd-select__button.is-hover,.fd-select__control.is-information.is-expanded .fd-select__button:hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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:after{-webkit-box-shadow:var(--sapField_Shadow);border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);content:\"\";inset:0;pointer-events:none;position:absolute}.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-readonly[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-readonly=true][aria-selected=false] .fd-select__text-content,.fd-select__control[readonly][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control.is-readonly .fd-select__button,.fd-select__control[aria-readonly=true] .fd-select__button,.fd-select__control[readonly] .fd-select__button{opacity:0}.fd-select__control.is-disabled[aria-selected=false] .fd-select__text-content,.fd-select__control:disabled[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-disabled=true][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control[aria-selected=false] .fd-select__text-content{padding:0 .625rem}.fd-select__control[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-selected=false] .fd-select__text-content [class*=sap-icon]{color:var(--sapField_PlaceholderTextColor);font-style:italic;font-weight:400}.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[class*=-compact],.fd-select[class*=-condensed],[class*=-compact] .fd-select:not([class*=-cozy]),[class*=-condensed] .fd-select:not([class*=-cozy]){margin:.1875rem 0}.fd-select[class*=-compact] .fd-select__control,.fd-select[class*=-condensed] .fd-select__control,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{--fdSelect_Min_Width:2.75rem;padding-left:.5rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content[dir=rtl],.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content[dir=rtl],[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content[dir=rtl],[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content[dir=rtl],[dir=rtl] .fd-select[class*=-compact] .fd-select__control .fd-select__text-content,[dir=rtl] .fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[dir=rtl] [class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[dir=rtl] [class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{padding-left:0;padding-right:.5rem}.fd-select[class*=-compact] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[readonly] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[readonly] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content{padding-left:.5rem;padding-right:.5rem}@media (min-width: 600px){[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--10{text-align:right!important}}\n"], dependencies: [{ kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "glyphFont", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i4.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [DynamicComponentService, { provide: FD_FORM_FIELD_CONTROL, useExisting: SelectComponent, multi: true }], standalone: true, imports: [SelectModule, FormsModule, IconComponent, NgTemplateOutlet, NgClass, ListSecondaryDirective], template: "<fd-select\n    [placeholder]=\"placeholder\"\n    [glyph]=\"glyph\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    [controlTemplate]=\"controlTemplate\"\n    [appendTo]=\"appendTo\"\n    [fillControlMode]=\"fillControlMode\"\n    [maxHeight]=\"maxHeight\"\n    [attr.aria-disabled]=\"disabled || readonly\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.tooltip]=\"value\"\n    [attr.aria-readonly]=\"readonly\"\n    [attr.role]=\"'listbox'\"\n    [value]=\"value\"\n    [state]=\"state\"\n    [stateMessage]=\"stateMessage\"\n    [advancedStateMessage]=\"advancedStateMessage\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [inline]=\"inline\"\n    [(ngModel)]=\"value\"\n    [tabOutStrategy]=\"tabOutStrategy\"\n    (valueChange)=\"_onSelection($event)\"\n    (isOpenChange)=\"_onOpenChange($event)\"\n>\n    <ng-content></ng-content>\n    @if (noValueLabel) {\n        <li fd-option [disabled]=\"false\" [value]=\"null\">\n            {{ noValueLabel }}\n        </li>\n    }\n    @for (item of _optionItems; track item; let index = $index) {\n        <li\n            fd-option\n            [disabled]=\"!!item.disabled\"\n            [value]=\"item.value\"\n            [attr.aria-labelledby]=\"ariaLabel\"\n            [attr.aria-disabled]=\"disabled\"\n        >\n            @if (item.icon) {\n                <fd-icon [glyph]=\"item.icon\" class=\"fd-template-icon icon-margin\"></fd-icon>\n            }\n            <ng-template\n                [ngTemplateOutlet]=\"listItem\"\n                [ngTemplateOutletContext]=\"{ optionItem: item, index: index }\"\n            ></ng-template>\n            <ng-template\n                [ngTemplateOutlet]=\"secondaryTextSource\"\n                [ngTemplateOutletContext]=\"{ optionItem: item }\"\n            ></ng-template>\n        </li>\n    }\n</fd-select>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    @if (_isSelectedOptionItem(optionItem) && !!_selectedItemTemplate) {\n        <ng-template\n            [ngTemplateOutlet]=\"_selectedItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n    @if (!(_isSelectedOptionItem(optionItem) && _selectedItemTemplate)) {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    @if (!_optionItemTemplate) {\n        <span [innerHTML]=\"optionItem.label\"></span>\n    } @else {\n        <ng-template\n            [ngTemplateOutlet]=\"_optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    @if (showSecondaryText) {\n        @if (!_secondaryItemTemplate) {\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [innerHTML]=\"optionItem.secondaryText\"\n            ></span>\n        } @else {\n            <ng-template\n                [ngTemplateOutlet]=\"_secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-template>\n        }\n    }\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\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:var(--sapField_Shadow);-moz-appearance:none;-webkit-appearance:none;-webkit-box-shadow: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:var(--sapField_Shadow);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;gap:.25rem;height:var(--sapElement_Height);justify-content:center;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--sapElement_Height);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{-webkit-box-shadow:var(--sapField_SuccessShadow);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle);box-shadow:var(--sapField_SuccessShadow)}.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)}.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-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Success_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-error{-webkit-box-shadow:var(--sapField_InvalidShadow);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle);box-shadow:var(--sapField_InvalidShadow)}.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)}.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-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Error_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-warning{-webkit-box-shadow:var(--sapField_WarningShadow);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle);box-shadow:var(--sapField_WarningShadow)}.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)}.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-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.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)}.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-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-information{-webkit-box-shadow:var(--sapField_InformationShadow);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle);box-shadow:var(--sapField_InformationShadow)}.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)}.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-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Information_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.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);opacity:0}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.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);opacity:0}.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);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{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none;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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);background-color:var(--fdButtonBackgroundColor);border:none;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:relative;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:after{border-radius:var(--fdInput_Outline_Border_Radius)}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{--fdInput_Group_Button_Text_Color:var(--fdInput_Group_Button_Hover_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Hover_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.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.is-focus,.fd-select__control.is-success:focus{z-index:5}.fd-select__control.is-success.is-focus .fd-select__button,.fd-select__control.is-success:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-focus .fd-select__button.is-hover,.fd-select__control.is-success.is-focus .fd-select__button:hover,.fd-select__control.is-success:focus .fd-select__button.is-hover,.fd-select__control.is-success:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-expanded .fd-select__button.is-hover,.fd-select__control.is-success.is-expanded .fd-select__button:hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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.is-focus,.fd-select__control.is-error:focus{z-index:5}.fd-select__control.is-error.is-focus .fd-select__button,.fd-select__control.is-error:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-focus .fd-select__button.is-hover,.fd-select__control.is-error.is-focus .fd-select__button:hover,.fd-select__control.is-error:focus .fd-select__button.is-hover,.fd-select__control.is-error:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-expanded .fd-select__button.is-hover,.fd-select__control.is-error.is-expanded .fd-select__button:hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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.is-focus,.fd-select__control.is-warning:focus{z-index:5}.fd-select__control.is-warning.is-focus .fd-select__button,.fd-select__control.is-warning:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-focus .fd-select__button.is-hover,.fd-select__control.is-warning.is-focus .fd-select__button:hover,.fd-select__control.is-warning:focus .fd-select__button.is-hover,.fd-select__control.is-warning:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-expanded .fd-select__button.is-hover,.fd-select__control.is-warning.is-expanded .fd-select__button:hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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.is-focus,.fd-select__control.is-alert:focus{z-index:5}.fd-select__control.is-alert.is-focus .fd-select__button,.fd-select__control.is-alert:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-focus .fd-select__button.is-hover,.fd-select__control.is-alert.is-focus .fd-select__button:hover,.fd-select__control.is-alert:focus .fd-select__button.is-hover,.fd-select__control.is-alert:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-expanded .fd-select__button.is-hover,.fd-select__control.is-alert.is-expanded .fd-select__button:hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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.is-focus,.fd-select__control.is-information:focus{z-index:5}.fd-select__control.is-information.is-focus .fd-select__button,.fd-select__control.is-information:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-focus .fd-select__button.is-hover,.fd-select__control.is-information.is-focus .fd-select__button:hover,.fd-select__control.is-information:focus .fd-select__button.is-hover,.fd-select__control.is-information:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-expanded .fd-select__button.is-hover,.fd-select__control.is-information.is-expanded .fd-select__button:hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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:after{-webkit-box-shadow:var(--sapField_Shadow);border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);content:\"\";inset:0;pointer-events:none;position:absolute}.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-readonly[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-readonly=true][aria-selected=false] .fd-select__text-content,.fd-select__control[readonly][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control.is-readonly .fd-select__button,.fd-select__control[aria-readonly=true] .fd-select__button,.fd-select__control[readonly] .fd-select__button{opacity:0}.fd-select__control.is-disabled[aria-selected=false] .fd-select__text-content,.fd-select__control:disabled[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-disabled=true][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control[aria-selected=false] .fd-select__text-content{padding:0 .625rem}.fd-select__control[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-selected=false] .fd-select__text-content [class*=sap-icon]{color:var(--sapField_PlaceholderTextColor);font-style:italic;font-weight:400}.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[class*=-compact],.fd-select[class*=-condensed],[class*=-compact] .fd-select:not([class*=-cozy]),[class*=-condensed] .fd-select:not([class*=-cozy]){margin:.1875rem 0}.fd-select[class*=-compact] .fd-select__control,.fd-select[class*=-condensed] .fd-select__control,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{--fdSelect_Min_Width:2.75rem;padding-left:.5rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content[dir=rtl],.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content[dir=rtl],[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content[dir=rtl],[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content[dir=rtl],[dir=rtl] .fd-select[class*=-compact] .fd-select__control .fd-select__text-content,[dir=rtl] .fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[dir=rtl] [class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[dir=rtl] [class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{padding-left:0;padding-right:.5rem}.fd-select[class*=-compact] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[readonly] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[readonly] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content{padding-left:.5rem;padding-right:.5rem}@media (min-width: 600px){[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--10{text-align:right!important}}\n"] }]
+            args: [{ selector: 'fdp-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [DynamicComponentService, { provide: FD_FORM_FIELD_CONTROL, useExisting: SelectComponent, multi: true }], standalone: true, imports: [SelectModule, FormsModule, IconComponent, NgTemplateOutlet, NgClass, ListSecondaryDirective], template: "<fd-select\n    [placeholder]=\"placeholder\"\n    [glyph]=\"glyph\"\n    [glyphFont]=\"glyphFont\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    [controlTemplate]=\"controlTemplate\"\n    [appendTo]=\"appendTo\"\n    [fillControlMode]=\"fillControlMode\"\n    [maxHeight]=\"maxHeight\"\n    [attr.aria-disabled]=\"disabled || readonly\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.tooltip]=\"value\"\n    [attr.aria-readonly]=\"readonly\"\n    [attr.role]=\"'listbox'\"\n    [value]=\"value\"\n    [state]=\"state\"\n    [stateMessage]=\"stateMessage\"\n    [advancedStateMessage]=\"advancedStateMessage\"\n    [mobile]=\"mobile\"\n    [mobileConfig]=\"mobileConfig\"\n    [inline]=\"inline\"\n    [(ngModel)]=\"value\"\n    [tabOutStrategy]=\"tabOutStrategy\"\n    (valueChange)=\"_onSelection($event)\"\n    (isOpenChange)=\"_onOpenChange($event)\"\n>\n    <ng-content></ng-content>\n    @if (noValueLabel) {\n        <li fd-option [disabled]=\"false\" [value]=\"null\">\n            {{ noValueLabel }}\n        </li>\n    }\n    @for (item of _optionItems; track item; let index = $index) {\n        <li\n            fd-option\n            [disabled]=\"!!item.disabled\"\n            [value]=\"item.value\"\n            [attr.aria-labelledby]=\"ariaLabel\"\n            [attr.aria-disabled]=\"disabled\"\n        >\n            @if (item.icon) {\n                <fd-icon [glyph]=\"item.icon\" class=\"fd-template-icon icon-margin\"></fd-icon>\n            }\n            <ng-template\n                [ngTemplateOutlet]=\"listItem\"\n                [ngTemplateOutletContext]=\"{ optionItem: item, index: index }\"\n            ></ng-template>\n            <ng-template\n                [ngTemplateOutlet]=\"secondaryTextSource\"\n                [ngTemplateOutletContext]=\"{ optionItem: item }\"\n            ></ng-template>\n        </li>\n    }\n</fd-select>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    @if (_isSelectedOptionItem(optionItem) && !!_selectedItemTemplate) {\n        <ng-template\n            [ngTemplateOutlet]=\"_selectedItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n    @if (!(_isSelectedOptionItem(optionItem) && _selectedItemTemplate)) {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    @if (!_optionItemTemplate) {\n        <span [innerHTML]=\"optionItem.label\"></span>\n    } @else {\n        <ng-template\n            [ngTemplateOutlet]=\"_optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    @if (showSecondaryText) {\n        @if (!_secondaryItemTemplate) {\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [innerHTML]=\"optionItem.secondaryText\"\n            ></span>\n        } @else {\n            <ng-template\n                [ngTemplateOutlet]=\"_secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-template>\n        }\n    }\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\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:var(--sapField_Shadow);-moz-appearance:none;-webkit-appearance:none;-webkit-box-shadow: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:var(--sapField_Shadow);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;gap:.25rem;height:var(--sapElement_Height);justify-content:center;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;min-height:var(--sapElement_Height);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{-webkit-box-shadow:var(--sapField_SuccessShadow);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle);box-shadow:var(--sapField_SuccessShadow)}.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)}.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-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Success_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-error{-webkit-box-shadow:var(--sapField_InvalidShadow);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle);box-shadow:var(--sapField_InvalidShadow)}.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)}.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-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Error_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-warning{-webkit-box-shadow:var(--sapField_WarningShadow);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle);box-shadow:var(--sapField_WarningShadow)}.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)}.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-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.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)}.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-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-information{-webkit-box-shadow:var(--sapField_InformationShadow);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle);box-shadow:var(--sapField_InformationShadow)}.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)}.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-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Information_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.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);opacity:0}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none}.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);opacity:0}.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);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{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);box-shadow:none;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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style: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-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);background-color:var(--fdButtonBackgroundColor);border:none;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:relative;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:after{border-radius:var(--fdInput_Outline_Border_Radius)}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{--fdInput_Group_Button_Text_Color:var(--fdInput_Group_Button_Hover_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Hover_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.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.is-focus,.fd-select__control.is-success:focus{z-index:5}.fd-select__control.is-success.is-focus .fd-select__button,.fd-select__control.is-success:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-focus .fd-select__button.is-hover,.fd-select__control.is-success.is-focus .fd-select__button:hover,.fd-select__control.is-success:focus .fd-select__button.is-hover,.fd-select__control.is-success:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Success_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-expanded .fd-select__button.is-hover,.fd-select__control.is-success.is-expanded .fd-select__button:hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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.is-focus,.fd-select__control.is-error:focus{z-index:5}.fd-select__control.is-error.is-focus .fd-select__button,.fd-select__control.is-error:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-focus .fd-select__button.is-hover,.fd-select__control.is-error.is-focus .fd-select__button:hover,.fd-select__control.is-error:focus .fd-select__button.is-hover,.fd-select__control.is-error:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Error_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-expanded .fd-select__button.is-hover,.fd-select__control.is-error.is-expanded .fd-select__button:hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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.is-focus,.fd-select__control.is-warning:focus{z-index:5}.fd-select__control.is-warning.is-focus .fd-select__button,.fd-select__control.is-warning:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-focus .fd-select__button.is-hover,.fd-select__control.is-warning.is-focus .fd-select__button:hover,.fd-select__control.is-warning:focus .fd-select__button.is-hover,.fd-select__control.is-warning:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-expanded .fd-select__button.is-hover,.fd-select__control.is-warning.is-expanded .fd-select__button:hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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.is-focus,.fd-select__control.is-alert:focus{z-index:5}.fd-select__control.is-alert.is-focus .fd-select__button,.fd-select__control.is-alert:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-focus .fd-select__button.is-hover,.fd-select__control.is-alert.is-focus .fd-select__button:hover,.fd-select__control.is-alert:focus .fd-select__button.is-hover,.fd-select__control.is-alert:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Warning_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-expanded .fd-select__button.is-hover,.fd-select__control.is-alert.is-expanded .fd-select__button:hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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.is-focus,.fd-select__control.is-information:focus{z-index:5}.fd-select__control.is-information.is-focus .fd-select__button,.fd-select__control.is-information:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-focus .fd-select__button.is-hover,.fd-select__control.is-information.is-focus .fd-select__button:hover,.fd-select__control.is-information:focus .fd-select__button.is-hover,.fd-select__control.is-information:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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_Group_Button_Information_Active_Box_Shadow);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-expanded .fd-select__button.is-hover,.fd-select__control.is-information.is-expanded .fd-select__button:hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.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:after{-webkit-box-shadow:var(--sapField_Shadow);border-radius:var(--sapField_BorderCornerRadius);box-shadow:var(--sapField_Shadow);content:\"\";inset:0;pointer-events:none;position:absolute}.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-readonly[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-readonly=true][aria-selected=false] .fd-select__text-content,.fd-select__control[readonly][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control.is-readonly .fd-select__button,.fd-select__control[aria-readonly=true] .fd-select__button,.fd-select__control[readonly] .fd-select__button{opacity:0}.fd-select__control.is-disabled[aria-selected=false] .fd-select__text-content,.fd-select__control:disabled[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-disabled=true][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control[aria-selected=false] .fd-select__text-content{padding:0 .625rem}.fd-select__control[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-selected=false] .fd-select__text-content [class*=sap-icon]{color:var(--sapField_PlaceholderTextColor);font-style:italic;font-weight:400}.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[class*=-compact],.fd-select[class*=-condensed],[class*=-compact] .fd-select:not([class*=-cozy]),[class*=-condensed] .fd-select:not([class*=-cozy]){margin:.1875rem 0}.fd-select[class*=-compact] .fd-select__control,.fd-select[class*=-condensed] .fd-select__control,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{--fdSelect_Min_Width:2.75rem;padding-left:.5rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content[dir=rtl],.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content[dir=rtl],[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content[dir=rtl],[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content[dir=rtl],[dir=rtl] .fd-select[class*=-compact] .fd-select__control .fd-select__text-content,[dir=rtl] .fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[dir=rtl] [class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[dir=rtl] [class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{padding-left:0;padding-right:.5rem}.fd-select[class*=-compact] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[readonly] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[readonly] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content{padding-left:.5rem;padding-right:.5rem}@media (min-width: 600px){[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--10{text-align:right!important}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -7404,7 +7408,7 @@ class ComboboxComponent extends BaseCombobox {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: ComboboxComponent, isStandalone: true, selector: "fdp-combobox", outputs: { selectionChange: "selectionChange" }, providers: [
             { provide: FD_FORM_FIELD_CONTROL, useExisting: ComboboxComponent, multi: true },
             contentDensityObserverProviders()
-        ], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        [isOpen]=\"isOpen && _suggestions.length > 0\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readonly\"\n        [maxWidth]=\"autoResize ? null : minWidth\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n        additionalBodyClass=\"fdp-combobox__popover\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body [hidden]=\"_suggestions.length === 0\">\n            <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            [id]=\"id + '-input-group-container'\"\n            [button]=\"!readonly\"\n            [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n            [state]=\"mobile && isOpen ? null : state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [isControl]=\"true\"\n            (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"disabled\"\n            [glyphAriaLabel]=\"ariaLabel\"\n            (click)=\"openInMobileMode()\"\n        >\n            <input\n                #searchInputElement\n                fdp-auto-complete\n                [options]=\"_suggestions\"\n                [inputText]=\"inputText\"\n                [mobile]=\"mobile\"\n                (onComplete)=\"_onCompleteTerm($event)\"\n                type=\"text\"\n                role=\"combobox\"\n                autocomplete=\"off\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n                [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                [attr.aria-required]=\"required\"\n                fd-input-group-input\n                tabindex=\"0\"\n                [id]=\"id\"\n                [name]=\"name\"\n                (keydown)=\"onInputKeydownHandler($event)\"\n                [disabled]=\"disabled\"\n                [ngModel]=\"inputText\"\n                (ngModelChange)=\"searchTermChanged($event)\"\n                [placeholder]=\"placeholder\"\n                (focus)=\"onTouched()\"\n                (blur)=\"_onBlur($event)\"\n                [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n                [readonly]=\"readonly\"\n                [attr.aria-readonly]=\"readonly\"\n            />\n        </fd-input-group>\n        @if (isOpen) {\n            <div class=\"fdp-combobox__count-list-results\" role=\"status\">\n                @if (_flatSuggestions.length || '0'; as count) {\n                    {{\n                        (count === 1\n                            ? 'platformCombobox.countListResultsSingular'\n                            : 'platformCombobox.countListResultsPlural'\n                        ) | fdTranslate: { count: count }\n                    }}\n                }\n            </div>\n        }\n        @if (mobile || isOpen ? null : !!stateMessage) {\n            <fd-form-message [type]=\"state\" [innerHtml]=\"stateMessage\"></fd-form-message>\n        }\n    </fd-form-input-message-group>\n</ng-template>\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        [hasMessage]=\"!!stateMessage\"\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fdp-combobox__list\"\n        [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n        [id]=\"id + '-result'\"\n        role=\"listbox\"\n        [byline]=\"byline\"\n        [attr.aria-labelledby]=\"id + '-search'\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n        (keydown.tab)=\"_close()\"\n        (keydown.shift.tab)=\"_close()\"\n    >\n        @if (stateMessage) {\n            <li\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        @if (advancedStateMessage?.hasErrors && advancedStateMessage?.template) {\n            <li fd-list-message tabindex=\"-1\" role=\"presentation\" [type]=\"state || 'default'\">\n                <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n            </li>\n        }\n        <ng-content></ng-content>\n        @if (isGroup) {\n            @for (group of _suggestions; track group) {\n                @if (!groupItemTemplate) {\n                    <li fd-list-group-header role=\"option\">\n                        <span fd-list-title [attr.title]=\"group.label\">{{ group.label }}</span>\n                    </li>\n                } @else {\n                    <ng-template\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-template>\n                }\n                @for (optionItem of group.children; track optionItem; let i = $index) {\n                    <li\n                        (click)=\"handleOptionItem(optionItem)\"\n                        fd-list-item\n                        role=\"option\"\n                        [tabindex]=\"0\"\n                        (keyDown)=\"handlePressEnter($event, optionItem)\"\n                        [selected]=\"isSelectedOptionItem(optionItem)\"\n                        [value]=\"optionItem\"\n                    >\n                        <ng-template\n                            [ngTemplateOutlet]=\"listItem\"\n                            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                        ></ng-template>\n                    </li>\n                }\n            }\n        } @else {\n            @for (optionItem of _suggestions; track optionItem; let i = $index) {\n                <li\n                    (click)=\"handleOptionItem(optionItem)\"\n                    fd-list-item\n                    role=\"option\"\n                    [tabindex]=\"0\"\n                    (keyDown)=\"handlePressEnter($event, optionItem)\"\n                    [selected]=\"isSelectedOptionItem(optionItem)\"\n                    [value]=\"optionItem\"\n                >\n                    <ng-template\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-template>\n                </li>\n            }\n        }\n    </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    @if (isSelectedOptionItem(optionItem) && !!selectedItemTemplate) {\n        <ng-template\n            [ngTemplateOutlet]=\"selectedItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n    @if (!(isSelectedOptionItem(optionItem) && selectedItemTemplate)) {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-template>\n        <ng-template\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    @if (!optionItemTemplate) {\n        <span [attr.title]=\"optionItem.label\" [innerHTML]=\"optionItem.label | highlight: inputText\"></span>\n    } @else {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    @if (showSecondaryText) {\n        @if (!secondaryItemTemplate) {\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight: inputText\"\n            ></span>\n        } @else {\n            <ng-template\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-template>\n        }\n    }\n</ng-template>\n", styles: [".fdp-combobox__count-list-results{position:absolute;opacity:0;z-index:-1}.fdp-combobox__list .fd-list__item{justify-content:space-between}.fdp-combobox__list .fd-list__item span{overflow:hidden;text-overflow:ellipsis;width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i6.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i6$1.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "ngmodule", type: ContentDensityModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        [isOpen]=\"isOpen && _suggestions.length > 0\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readonly\"\n        [maxWidth]=\"autoResize ? null : minWidth\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n        additionalBodyClass=\"fdp-combobox__popover\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body [hidden]=\"_suggestions.length === 0\">\n            <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            [id]=\"id + '-input-group-container'\"\n            [button]=\"!readonly\"\n            [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n            [state]=\"mobile && isOpen ? null : state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [isControl]=\"true\"\n            (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"disabled\"\n            [glyphAriaLabel]=\"ariaLabel\"\n            (click)=\"openInMobileMode()\"\n        >\n            <input\n                #searchInputElement\n                fdp-auto-complete\n                [options]=\"_suggestions\"\n                [inputText]=\"inputText\"\n                [mobile]=\"mobile\"\n                (onComplete)=\"_onCompleteTerm($event)\"\n                type=\"text\"\n                role=\"combobox\"\n                autocomplete=\"off\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n                [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                [attr.aria-required]=\"required\"\n                fd-input-group-input\n                tabindex=\"0\"\n                [id]=\"id\"\n                [name]=\"name\"\n                (keydown)=\"onInputKeydownHandler($event)\"\n                [disabled]=\"disabled\"\n                [ngModel]=\"inputText\"\n                (ngModelChange)=\"searchTermChanged($event)\"\n                [placeholder]=\"placeholder\"\n                (focus)=\"onTouched()\"\n                (blur)=\"_onBlur($event)\"\n                [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n                [readonly]=\"readonly\"\n                [attr.aria-readonly]=\"readonly\"\n            />\n        </fd-input-group>\n        @if (isOpen) {\n            <div class=\"fdp-combobox__count-list-results\" role=\"status\">\n                @if (_flatSuggestions.length || '0'; as count) {\n                    {{\n                        (count === 1\n                            ? 'platformCombobox.countListResultsSingular'\n                            : 'platformCombobox.countListResultsPlural'\n                        ) | fdTranslate: { count: count }\n                    }}\n                }\n            </div>\n        }\n        @if (mobile || isOpen ? null : !!stateMessage) {\n            <fd-form-message [type]=\"state\" [innerHtml]=\"stateMessage\"></fd-form-message>\n        }\n    </fd-form-input-message-group>\n</ng-template>\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        [hasMessage]=\"!!stateMessage\"\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fdp-combobox__list\"\n        [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n        [id]=\"id + '-result'\"\n        role=\"listbox\"\n        [byline]=\"byline\"\n        [attr.aria-labelledby]=\"id + '-search'\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n        (keydown.tab)=\"_close()\"\n        (keydown.shift.tab)=\"_close()\"\n    >\n        @if (stateMessage) {\n            <li\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        @if (advancedStateMessage?.hasErrors && advancedStateMessage?.template) {\n            <li fd-list-message tabindex=\"-1\" role=\"presentation\" [type]=\"state || 'default'\">\n                <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n            </li>\n        }\n        <ng-content></ng-content>\n        @if (isGroup) {\n            @for (group of _suggestions; track group) {\n                @if (!groupItemTemplate) {\n                    <li fd-list-group-header role=\"option\">\n                        <span fd-list-title [attr.title]=\"group.label\">{{ group.label }}</span>\n                    </li>\n                } @else {\n                    <ng-template\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-template>\n                }\n                @for (optionItem of group.children; track optionItem; let i = $index) {\n                    <li\n                        (click)=\"handleOptionItem(optionItem)\"\n                        fd-list-item\n                        role=\"option\"\n                        [tabindex]=\"0\"\n                        (keyDown)=\"handlePressEnter($event, optionItem)\"\n                        [selected]=\"isSelectedOptionItem(optionItem)\"\n                        [value]=\"optionItem\"\n                    >\n                        <ng-template\n                            [ngTemplateOutlet]=\"listItem\"\n                            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                        ></ng-template>\n                    </li>\n                }\n            }\n        } @else {\n            @for (optionItem of _suggestions; track optionItem; let i = $index) {\n                <li\n                    (click)=\"handleOptionItem(optionItem)\"\n                    fd-list-item\n                    role=\"option\"\n                    [tabindex]=\"0\"\n                    (keyDown)=\"handlePressEnter($event, optionItem)\"\n                    [selected]=\"isSelectedOptionItem(optionItem)\"\n                    [value]=\"optionItem\"\n                >\n                    <ng-template\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-template>\n                </li>\n            }\n        }\n    </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    @if (isSelectedOptionItem(optionItem) && !!selectedItemTemplate) {\n        <ng-template\n            [ngTemplateOutlet]=\"selectedItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n    @if (!(isSelectedOptionItem(optionItem) && selectedItemTemplate)) {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-template>\n        <ng-template\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    @if (!optionItemTemplate) {\n        <span [attr.title]=\"optionItem.label\" [innerHTML]=\"optionItem.label | highlight: inputText\"></span>\n    } @else {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    @if (showSecondaryText) {\n        @if (!secondaryItemTemplate) {\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight: inputText\"\n            ></span>\n        } @else {\n            <ng-template\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-template>\n        }\n    }\n</ng-template>\n", styles: [".fdp-combobox__count-list-results{position:absolute;opacity:0;z-index:-1}.fdp-combobox__list .fd-list__item{justify-content:space-between}.fdp-combobox__list .fd-list__item span{overflow:hidden;text-overflow:ellipsis;width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i6.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i6$1.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "ngmodule", type: ContentDensityModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
@@ -10145,7 +10149,7 @@ class MultiComboboxComponent extends BaseMultiCombobox {
                 multi: true
             },
             contentDensityObserverProviders()
-        ], viewQueries: [{ propertyName: "mobileControlTemplate", first: true, predicate: ["mobileControlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fdp-multi-combobox\">\n    @if (mobile) {\n        <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n    } @else {\n        <fd-popover\n            additionalBodyClass=\"fd-popover-custom-list fdp-multi-combobox__list-container\"\n            (isOpenChange)=\"popoverOpenChangeHandle($event)\"\n            [isOpen]=\"isOpen\"\n            [triggers]=\"[]\"\n            [disabled]=\"disabled\"\n            [fillControlMode]=\"fillControlMode\"\n        >\n            <fd-popover-control>\n                <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n            </fd-popover-control>\n            <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n                <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n                <ng-content></ng-content>\n            </fd-popover-body>\n        </fd-popover>\n    }\n</div>\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            [id]=\"id + '-input-group-container'\"\n            class=\"fdp-multi-combobox-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"!readonly\"\n            [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n            [isControl]=\"true\"\n            [disabled]=\"disabled || readonly\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"disabled || readonly\"\n            [attr.aria-readonly]=\"readonly\"\n            [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            [iconTitle]=\"addonIconTitle || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            (addOnButtonClicked)=\"_addOnClicked($event)\"\n            (click)=\"mobile && !isOpen && onPrimaryButtonClick(false)\"\n            (keydown)=\"navigateByTokens($event)\"\n        >\n            @if (_selectedSuggestions) {\n                <fd-tokenizer\n                    #tokenizer\n                    [compactCollapse]=\"true\"\n                    [tokenizerFocusable]=\"false\"\n                    class=\"fdp-multi-combobox-tokenizer-custom\"\n                    (moreClickedEvent)=\"moreClicked()\"\n                    fdMultiAnnouncer\n                    [multiAnnouncerOptions]=\"_suggestions\"\n                >\n                    @for (token of _selectedSuggestions; track token) {\n                        <fd-token [readOnly]=\"disabled\" (onCloseClick)=\"removeToken(token, $event)\">\n                            {{ token.label }}\n                        </fd-token>\n                    }\n                    <input\n                        #searchInputElement\n                        fdp-auto-complete\n                        (onComplete)=\"onCompleteTerm($event)\"\n                        [options]=\"_suggestions\"\n                        [inputText]=\"inputText\"\n                        [mobile]=\"mobile\"\n                        type=\"text\"\n                        role=\"combobox\"\n                        autocomplete=\"off\"\n                        [ariaLabel]=\"ariaLabel || ('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)\"\n                        [attr.aria-labelledby]=\"ariaLabelledBy\"\n                        [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                        [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n                        [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                        fd-form-control\n                        fd-input-group-input\n                        tabindex=\"0\"\n                        [id]=\"id\"\n                        [name]=\"name\"\n                        (keydown)=\"onInputKeydownHandler($event)\"\n                        [disabled]=\"disabled\"\n                        [(ngModel)]=\"inputText\"\n                        (ngModelChange)=\"searchTermChanged()\"\n                        [placeholder]=\"placeholder\"\n                        (focus)=\"onTouched(); tokenizer._showAllTokens()\"\n                        (blur)=\"!mobile && onBlur($event); tokenizer._hideTokens()\"\n                        [attr.aria-expanded]=\"isOpen\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-readonly]=\"readonly\"\n                        [attr.aria-required]=\"required\"\n                        class=\"fd-tokenizer__input\"\n                    />\n                </fd-tokenizer>\n            }\n        </fd-input-group>\n        @if (mobile && isOpen ? false : !!stateMessage) {\n            <fd-form-message [type]=\"state\" [innerHtml]=\"stateMessage\"></fd-form-message>\n        }\n    </fd-form-input-message-group>\n</ng-template>\n<ng-template #mobileControlTemplate>\n    <fd-input-group\n        [id]=\"id + '-input-group-container'\"\n        class=\"fdp-multi-combobox-input-group-custom\"\n        [state]=\"state\"\n        [buttonFocusable]=\"false\"\n        [isControl]=\"true\"\n        [disabled]=\"disabled || readonly\"\n        [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n        [attr.aria-disabled]=\"disabled || readonly\"\n        [attr.aria-readonly]=\"readonly\"\n        [glyphAriaLabel]=\"ariaLabel\"\n    >\n        <input\n            fdp-auto-complete\n            (onComplete)=\"onCompleteTerm($event)\"\n            [options]=\"_suggestions\"\n            [inputText]=\"inputText\"\n            [mobile]=\"mobile\"\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [ariaLabel]=\"ariaLabel || ('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            fd-form-control\n            fd-input-group-input\n            tabindex=\"0\"\n            [id]=\"id\"\n            [name]=\"name\"\n            (keydown)=\"onInputKeydownHandler($event)\"\n            [disabled]=\"disabled\"\n            [(ngModel)]=\"inputText\"\n            (ngModelChange)=\"searchTermChanged()\"\n            [placeholder]=\"placeholder\"\n            (focus)=\"onTouched()\"\n            (blur)=\"!mobile && onBlur($event)\"\n            [attr.aria-expanded]=\"isOpen\"\n            [readonly]=\"readonly\"\n            [attr.aria-readonly]=\"readonly\"\n        />\n    </fd-input-group>\n</ng-template>\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fdp-multi-combobox__list fd-list--multi-input\"\n        [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n        [id]=\"id + '-result'\"\n        role=\"listbox\"\n        [style.max-height]=\"!mobile && maxHeight\"\n        [style.min-width]=\"!mobile && minWidth + 'px'\"\n        [style.max-width]=\"autoResize && maxWidth + 'px'\"\n        [attr.aria-labelledby]=\"id + '-search'\"\n        aria-multiselectable=\"true\"\n        (keydown.tab)=\"close()\"\n    >\n        @if (stateMessage) {\n            <li\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        @if (advancedStateMessage?.hasErrors && advancedStateMessage?.template) {\n            <li fd-list-message tabindex=\"-1\" role=\"presentation\" [type]=\"state || 'default'\">\n                <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n            </li>\n        }\n        <ng-content></ng-content>\n        @if (isGroup) {\n            @for (group of _suggestions; track group) {\n                @if (!groupItemTemplate) {\n                    <label fd-list-item fd-list-group-header role=\"group\">\n                        <span fd-list-title>{{ group.label }}</span>\n                    </label>\n                }\n                @if (groupItemTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-template>\n                }\n                @for (optionItem of group.children; track optionItem) {\n                    <li\n                        fd-list-item\n                        role=\"option\"\n                        (click)=\"!mobile && close()\"\n                        (keyDown)=\"onItemKeyDownHandler($event)\"\n                        [selected]=\"!!optionItem.selected\"\n                    >\n                        <fd-checkbox\n                            (click)=\"onOptionCheckboxClicked($event, $index)\"\n                            (ngModelChange)=\"toggleSelection(optionItem)\"\n                            [ngModel]=\"optionItem.selected\"\n                        >\n                        </fd-checkbox>\n                        <ng-template\n                            [ngTemplateOutlet]=\"listItem\"\n                            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: $index }\"\n                        ></ng-template>\n                    </li>\n                }\n            }\n        } @else {\n            @for (optionItem of _suggestions; track optionItem) {\n                <li\n                    fd-list-item\n                    role=\"option\"\n                    (click)=\"!mobile && onOptionClicked($event, $index)\"\n                    (keydown)=\"onItemKeyDownHandler($event)\"\n                    [selected]=\"!!optionItem.selected\"\n                >\n                    <fd-checkbox\n                        (click)=\"onOptionCheckboxClicked($event, $index)\"\n                        (ngModelChange)=\"toggleSelection(optionItem)\"\n                        [ngModel]=\"optionItem.selected\"\n                    >\n                    </fd-checkbox>\n                    <ng-template\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: $index }\"\n                    ></ng-template>\n                </li>\n            }\n        }\n    </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    @if (optionItem.selected && !!selectedItemTemplate) {\n        <ng-template\n            [ngTemplateOutlet]=\"selectedItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n    @if (!(optionItem.selected && selectedItemTemplate)) {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-template>\n        <ng-template\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    @if (!optionItemTemplate) {\n        <span\n            fd-list-title\n            [attr.title]=\"optionItem.label\"\n            [innerHTML]=\"optionItem.label | highlight: inputText\"\n        ></span>\n    } @else {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    @if (showSecondaryText) {\n        @if (!secondaryItemTemplate) {\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight: inputText\"\n            ></span>\n        } @else {\n            <ng-template\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-template>\n        }\n    }\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\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-margin--tiny{margin:.5rem!important}.fd-margin--sm{margin:1rem!important}.fd-margin--md{margin:2rem!important}.fd-margin--lg{margin:3rem!important}.fd-margin--none{margin:0!important}.fd-margin-top--tiny{margin-top:.5rem!important}.fd-margin-top--sm{margin-top:1rem!important}.fd-margin-top--md{margin-top:2rem!important}.fd-margin-top--lg{margin-top:3rem!important}.fd-margin-top--none{margin-top:0!important}.fd-margin-end--tiny{margin-right:.5rem!important}.fd-margin-end--tiny[dir=rtl],[dir=rtl] .fd-margin-end--tiny{margin-left:.5rem!important;margin-right:0!important}.fd-margin-end--sm{margin-right:1rem!important}.fd-margin-end--sm[dir=rtl],[dir=rtl] .fd-margin-end--sm{margin-left:1rem!important;margin-right:0!important}.fd-margin-end--md{margin-right:2rem!important}.fd-margin-end--md[dir=rtl],[dir=rtl] .fd-margin-end--md{margin-left:2rem!important;margin-right:0!important}.fd-margin-end--lg{margin-right:3rem!important}.fd-margin-end--lg[dir=rtl],[dir=rtl] .fd-margin-end--lg{margin-left:3rem!important;margin-right:0!important}.fd-margin-end--none{margin-right:0}.fd-margin-end--none[dir=rtl],[dir=rtl] .fd-margin-end--none{margin-left:0!important}.fd-margin-bottom--tiny{margin-bottom:.5rem!important}.fd-margin-bottom--sm{margin-bottom:1rem!important}.fd-margin-bottom--md{margin-bottom:2rem!important}.fd-margin-bottom--lg{margin-bottom:3rem!important}.fd-margin-bottom--none{margin-bottom:0!important}.fd-margin-begin--tiny{margin-left:.5rem!important}.fd-margin-begin--tiny[dir=rtl],[dir=rtl] .fd-margin-begin--tiny{margin-left:0!important;margin-right:.5rem!important}.fd-margin-begin--sm{margin-left:1rem!important}.fd-margin-begin--sm[dir=rtl],[dir=rtl] .fd-margin-begin--sm{margin-left:0!important;margin-right:1rem!important}.fd-margin-begin--md{margin-left:2rem!important}.fd-margin-begin--md[dir=rtl],[dir=rtl] .fd-margin-begin--md{margin-left:0!important;margin-right:2rem!important}.fd-margin-begin--lg{margin-left:3rem!important}.fd-margin-begin--lg[dir=rtl],[dir=rtl] .fd-margin-begin--lg{margin-left:0!important;margin-right:3rem!important}.fd-margin-begin--none{margin-left:0}.fd-margin-begin--none[dir=rtl],[dir=rtl] .fd-margin-begin--none{margin-right:0!important}.fd-margin-top-bottom--tiny{margin-bottom:.5rem!important;margin-top:.5rem!important}.fd-margin-top-bottom--sm{margin-bottom:1rem!important;margin-top:1rem!important}.fd-margin-top-bottom--md{margin-bottom:2rem!important;margin-top:2rem!important}.fd-margin-top-bottom--lg{margin-bottom:3rem!important;margin-top:3rem!important}.fd-margin-begin-end--tiny{margin-left:.5rem!important;margin-right:.5rem!important}.fd-margin-begin-end--sm{margin-left:1rem!important;margin-right:1rem!important}.fd-margin-begin-end--md{margin-left:2rem!important;margin-right:2rem!important}.fd-margin-begin-end--lg{margin-left:3rem!important;margin-right:3rem!important}.fd-margin-responsive--sm{margin:0 0 1rem!important}.fd-margin-responsive--md{margin:1rem!important}.fd-margin-responsive--lg{margin:1rem 2rem!important}.fd-margin-responsive--xl{margin:1rem 3rem!important}.fd-margin-negative-begin-end--tiny{margin:0 -.5rem!important}.fd-margin-negative-begin-end--sm{margin:0 -1rem!important}.fd-margin-negative-begin-end--md{margin:0 -2rem!important}.fd-margin-negative-begin-end--lg{margin:0 -3rem!important}.fdp-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}.fdp-multi-combobox-tokenizer-custom--compact{width:calc(100% - 2rem)}.fdp-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fdp-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fdp-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i6.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i6$1.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "component", type: CheckboxComponent$1, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "directive", type: MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "mobileControlTemplate", first: true, predicate: ["mobileControlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"fdp-multi-combobox\">\n    @if (mobile) {\n        <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n    } @else {\n        <fd-popover\n            additionalBodyClass=\"fd-popover-custom-list fdp-multi-combobox__list-container\"\n            (isOpenChange)=\"popoverOpenChangeHandle($event)\"\n            [isOpen]=\"isOpen\"\n            [triggers]=\"[]\"\n            [disabled]=\"disabled\"\n            [fillControlMode]=\"fillControlMode\"\n        >\n            <fd-popover-control>\n                <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n            </fd-popover-control>\n            <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n                <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n                <ng-content></ng-content>\n            </fd-popover-body>\n        </fd-popover>\n    }\n</div>\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            [id]=\"id + '-input-group-container'\"\n            class=\"fdp-multi-combobox-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"!readonly\"\n            [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n            [isControl]=\"true\"\n            [disabled]=\"disabled || readonly\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"disabled || readonly\"\n            [attr.aria-readonly]=\"readonly\"\n            [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            [iconTitle]=\"addonIconTitle || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            (addOnButtonClicked)=\"_addOnClicked($event)\"\n            (click)=\"mobile && !isOpen && onPrimaryButtonClick(false)\"\n            (keydown)=\"navigateByTokens($event)\"\n        >\n            @if (_selectedSuggestions) {\n                <fd-tokenizer\n                    #tokenizer\n                    [compactCollapse]=\"true\"\n                    [tokenizerFocusable]=\"false\"\n                    class=\"fdp-multi-combobox-tokenizer-custom\"\n                    (moreClickedEvent)=\"moreClicked()\"\n                    fdMultiAnnouncer\n                    [multiAnnouncerOptions]=\"_suggestions\"\n                >\n                    @for (token of _selectedSuggestions; track token) {\n                        <fd-token [readOnly]=\"disabled\" (onCloseClick)=\"removeToken(token, $event)\">\n                            {{ token.label }}\n                        </fd-token>\n                    }\n                    <input\n                        #searchInputElement\n                        fdp-auto-complete\n                        (onComplete)=\"onCompleteTerm($event)\"\n                        [options]=\"_suggestions\"\n                        [inputText]=\"inputText\"\n                        [mobile]=\"mobile\"\n                        type=\"text\"\n                        role=\"combobox\"\n                        autocomplete=\"off\"\n                        [ariaLabel]=\"ariaLabel || ('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)\"\n                        [attr.aria-labelledby]=\"ariaLabelledBy\"\n                        [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                        [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n                        [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                        fd-form-control\n                        fd-input-group-input\n                        tabindex=\"0\"\n                        [id]=\"id\"\n                        [name]=\"name\"\n                        (keydown)=\"onInputKeydownHandler($event)\"\n                        [disabled]=\"disabled\"\n                        [(ngModel)]=\"inputText\"\n                        (ngModelChange)=\"searchTermChanged()\"\n                        [placeholder]=\"placeholder\"\n                        (focus)=\"onTouched(); tokenizer._showAllTokens()\"\n                        (blur)=\"!mobile && onBlur($event); tokenizer._hideTokens()\"\n                        [attr.aria-expanded]=\"isOpen\"\n                        [readonly]=\"readonly\"\n                        [attr.aria-readonly]=\"readonly\"\n                        [attr.aria-required]=\"required\"\n                        class=\"fd-tokenizer__input\"\n                    />\n                </fd-tokenizer>\n            }\n        </fd-input-group>\n        @if (mobile && isOpen ? false : !!stateMessage) {\n            <fd-form-message [type]=\"state\" [innerHtml]=\"stateMessage\"></fd-form-message>\n        }\n    </fd-form-input-message-group>\n</ng-template>\n<ng-template #mobileControlTemplate>\n    <fd-input-group\n        [id]=\"id + '-input-group-container'\"\n        class=\"fdp-multi-combobox-input-group-custom\"\n        [state]=\"state\"\n        [buttonFocusable]=\"false\"\n        [isControl]=\"true\"\n        [disabled]=\"disabled || readonly\"\n        [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n        [attr.aria-disabled]=\"disabled || readonly\"\n        [attr.aria-readonly]=\"readonly\"\n        [glyphAriaLabel]=\"ariaLabel\"\n    >\n        <input\n            fdp-auto-complete\n            (onComplete)=\"onCompleteTerm($event)\"\n            [options]=\"_suggestions\"\n            [inputText]=\"inputText\"\n            [mobile]=\"mobile\"\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [ariaLabel]=\"ariaLabel || ('coreMultiComboBox.multiComboBoxAriaLabel' | fdTranslate)\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            fd-form-control\n            fd-input-group-input\n            tabindex=\"0\"\n            [id]=\"id\"\n            [name]=\"name\"\n            (keydown)=\"onInputKeydownHandler($event)\"\n            [disabled]=\"disabled\"\n            [(ngModel)]=\"inputText\"\n            (ngModelChange)=\"searchTermChanged()\"\n            [placeholder]=\"placeholder\"\n            (focus)=\"onTouched()\"\n            (blur)=\"!mobile && onBlur($event)\"\n            [attr.aria-expanded]=\"isOpen\"\n            [readonly]=\"readonly\"\n            [attr.aria-readonly]=\"readonly\"\n        />\n    </fd-input-group>\n</ng-template>\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fdp-multi-combobox__list fd-list--multi-input\"\n        [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n        [id]=\"id + '-result'\"\n        role=\"listbox\"\n        [style.max-height]=\"!mobile && maxHeight\"\n        [style.min-width]=\"!mobile && minWidth + 'px'\"\n        [style.max-width]=\"autoResize && maxWidth + 'px'\"\n        [attr.aria-labelledby]=\"id + '-search'\"\n        aria-multiselectable=\"true\"\n        (keydown.tab)=\"close()\"\n    >\n        @if (stateMessage) {\n            <li\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        @if (advancedStateMessage?.hasErrors && advancedStateMessage?.template) {\n            <li fd-list-message tabindex=\"-1\" role=\"presentation\" [type]=\"state || 'default'\">\n                <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n            </li>\n        }\n        <ng-content></ng-content>\n        @if (isGroup) {\n            @for (group of _suggestions; track group) {\n                @if (!groupItemTemplate) {\n                    <label fd-list-item fd-list-group-header role=\"group\">\n                        <span fd-list-title>{{ group.label }}</span>\n                    </label>\n                }\n                @if (groupItemTemplate) {\n                    <ng-template\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-template>\n                }\n                @for (optionItem of group.children; track optionItem) {\n                    <li\n                        fd-list-item\n                        role=\"option\"\n                        (click)=\"!mobile && close()\"\n                        (keyDown)=\"onItemKeyDownHandler($event)\"\n                        [selected]=\"!!optionItem.selected\"\n                    >\n                        <fd-checkbox\n                            (click)=\"onOptionCheckboxClicked($event, $index)\"\n                            (ngModelChange)=\"toggleSelection(optionItem)\"\n                            [ngModel]=\"optionItem.selected\"\n                        >\n                        </fd-checkbox>\n                        <ng-template\n                            [ngTemplateOutlet]=\"listItem\"\n                            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: $index }\"\n                        ></ng-template>\n                    </li>\n                }\n            }\n        } @else {\n            @for (optionItem of _suggestions; track optionItem) {\n                <li\n                    fd-list-item\n                    role=\"option\"\n                    (click)=\"!mobile && onOptionClicked($event, $index)\"\n                    (keydown)=\"onItemKeyDownHandler($event)\"\n                    [selected]=\"!!optionItem.selected\"\n                >\n                    <fd-checkbox\n                        (click)=\"onOptionCheckboxClicked($event, $index)\"\n                        (ngModelChange)=\"toggleSelection(optionItem)\"\n                        [ngModel]=\"optionItem.selected\"\n                    >\n                    </fd-checkbox>\n                    <ng-template\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: $index }\"\n                    ></ng-template>\n                </li>\n            }\n        }\n    </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    @if (optionItem.selected && !!selectedItemTemplate) {\n        <ng-template\n            [ngTemplateOutlet]=\"selectedItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n    @if (!(optionItem.selected && selectedItemTemplate)) {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-template>\n        <ng-template\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    @if (!optionItemTemplate) {\n        <span\n            fd-list-title\n            [attr.title]=\"optionItem.label\"\n            [innerHTML]=\"optionItem.label | highlight: inputText\"\n        ></span>\n    } @else {\n        <ng-template\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    @if (showSecondaryText) {\n        @if (!secondaryItemTemplate) {\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight: inputText\"\n            ></span>\n        } @else {\n            <ng-template\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-template>\n        }\n    }\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\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-margin--tiny{margin:.5rem!important}.fd-margin--sm{margin:1rem!important}.fd-margin--md{margin:2rem!important}.fd-margin--lg{margin:3rem!important}.fd-margin--none{margin:0!important}.fd-margin-top--tiny{margin-top:.5rem!important}.fd-margin-top--sm{margin-top:1rem!important}.fd-margin-top--md{margin-top:2rem!important}.fd-margin-top--lg{margin-top:3rem!important}.fd-margin-top--none{margin-top:0!important}.fd-margin-end--tiny{margin-right:.5rem!important}.fd-margin-end--tiny[dir=rtl],[dir=rtl] .fd-margin-end--tiny{margin-left:.5rem!important;margin-right:0!important}.fd-margin-end--sm{margin-right:1rem!important}.fd-margin-end--sm[dir=rtl],[dir=rtl] .fd-margin-end--sm{margin-left:1rem!important;margin-right:0!important}.fd-margin-end--md{margin-right:2rem!important}.fd-margin-end--md[dir=rtl],[dir=rtl] .fd-margin-end--md{margin-left:2rem!important;margin-right:0!important}.fd-margin-end--lg{margin-right:3rem!important}.fd-margin-end--lg[dir=rtl],[dir=rtl] .fd-margin-end--lg{margin-left:3rem!important;margin-right:0!important}.fd-margin-end--none{margin-right:0}.fd-margin-end--none[dir=rtl],[dir=rtl] .fd-margin-end--none{margin-left:0!important}.fd-margin-bottom--tiny{margin-bottom:.5rem!important}.fd-margin-bottom--sm{margin-bottom:1rem!important}.fd-margin-bottom--md{margin-bottom:2rem!important}.fd-margin-bottom--lg{margin-bottom:3rem!important}.fd-margin-bottom--none{margin-bottom:0!important}.fd-margin-begin--tiny{margin-left:.5rem!important}.fd-margin-begin--tiny[dir=rtl],[dir=rtl] .fd-margin-begin--tiny{margin-left:0!important;margin-right:.5rem!important}.fd-margin-begin--sm{margin-left:1rem!important}.fd-margin-begin--sm[dir=rtl],[dir=rtl] .fd-margin-begin--sm{margin-left:0!important;margin-right:1rem!important}.fd-margin-begin--md{margin-left:2rem!important}.fd-margin-begin--md[dir=rtl],[dir=rtl] .fd-margin-begin--md{margin-left:0!important;margin-right:2rem!important}.fd-margin-begin--lg{margin-left:3rem!important}.fd-margin-begin--lg[dir=rtl],[dir=rtl] .fd-margin-begin--lg{margin-left:0!important;margin-right:3rem!important}.fd-margin-begin--none{margin-left:0}.fd-margin-begin--none[dir=rtl],[dir=rtl] .fd-margin-begin--none{margin-right:0!important}.fd-margin-top-bottom--tiny{margin-bottom:.5rem!important;margin-top:.5rem!important}.fd-margin-top-bottom--sm{margin-bottom:1rem!important;margin-top:1rem!important}.fd-margin-top-bottom--md{margin-bottom:2rem!important;margin-top:2rem!important}.fd-margin-top-bottom--lg{margin-bottom:3rem!important;margin-top:3rem!important}.fd-margin-begin-end--tiny{margin-left:.5rem!important;margin-right:.5rem!important}.fd-margin-begin-end--sm{margin-left:1rem!important;margin-right:1rem!important}.fd-margin-begin-end--md{margin-left:2rem!important;margin-right:2rem!important}.fd-margin-begin-end--lg{margin-left:3rem!important;margin-right:3rem!important}.fd-margin-responsive--sm{margin:0 0 1rem!important}.fd-margin-responsive--md{margin:1rem!important}.fd-margin-responsive--lg{margin:1rem 2rem!important}.fd-margin-responsive--xl{margin:1rem 3rem!important}.fd-margin-negative-begin-end--tiny{margin:0 -.5rem!important}.fd-margin-negative-begin-end--sm{margin:0 -1rem!important}.fd-margin-negative-begin-end--md{margin:0 -2rem!important}.fd-margin-negative-begin-end--lg{margin:0 -3rem!important}.fdp-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}.fdp-multi-combobox-tokenizer-custom--compact{width:calc(100% - 2rem)}.fdp-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fdp-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fdp-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i6.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i6.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "glyphFont", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i6$1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i6$1.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "component", type: CheckboxComponent$1, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "directive", type: MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MultiComboboxComponent, decorators: [{
             type: Component,