@fundamental-ngx/core 0.37.0-rc.2 → 0.37.0-rc.21

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

@@ -923,7 +923,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         registerFormItemControl(SelectComponent),
         SelectKeyManagerService,
         contentDensityObserverProviders()
-    ], queries: [{ propertyName: "_options", predicate: OptionComponent, descendants: true }], viewQueries: [{ propertyName: "_controlElementRef", first: true, predicate: ["selectControl"], descendants: true }, { propertyName: "selectOptionsListTemplate", first: true, predicate: ["selectOptionsListTemplate"], descendants: true }, { propertyName: "_dialogContainerElementRef", first: true, predicate: ["dialogContainer"], descendants: true }, { propertyName: "_overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "_optionPanel", first: true, predicate: ["optionPanel"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n    <div\n        class=\"fd-select\"\n        [class.fd-select--compact]=\"_contentDensityObserver.isCompact\"\n        (keydown)=\"_handleKeydown($event)\"\n        (click)=\"toggle()\"\n    >\n        <fd-popover\n            additionalBodyClass=\"fd-popover-custom-list\"\n            [isOpen]=\"_isOpen\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [disabled]=\"disabled || readonly\"\n            [appendTo]=\"appendTo\"\n            [closeOnEscapeKey]=\"true\"\n            [fillControlMode]=\"fillControlMode\"\n            [maxWidth]=\"600\"\n            [closeOnOutsideClick]=\"closeOnOutsideClick\"\n            (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        >\n            <fd-popover-control>\n                <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n            </fd-popover-control>\n\n            <fd-popover-body class=\"fd-popover-custom-select-body\">\n                <ng-container [ngTemplateOutlet]=\"selectOptionsListTemplate\"></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n    </div>\n</ng-template>\n\n<ng-template #selectInputControlTemplate>\n    <div\n        class=\"fd-select__control\"\n        role=\"list\"\n        #selectControl\n        [class]=\"state ? 'is-' + state : ''\"\n        [class.is-active]=\"_isOpen\"\n        [class.is-expanded]=\"_isOpen\"\n        [class.is-disabled]=\"disabled\"\n        [class.is-readonly]=\"readonly\"\n        [attr.tabindex]=\"_tabIndex\"\n        [attr.id]=\"controlId\"\n        [attr.aria-active]=\"_isOpen\"\n        aria-live=\"polite\"\n        [attr.aria-selected]=\"selected?.selected\"\n        [attr.aria-expanded]=\"_isOpen\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-readonly]=\"readonly\"\n        [attr.aria-controls]=\"controlId + '-list-box'\"\n        [attr.aria-haspopup]=\"!(this.readonly || this.disabled)\"\n        [attr.aria-required]=\"required\"\n        [attr.title]=\"triggerValue\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [attr.aria-activedescendant]=\"_getAriaActiveDescendant()\"\n        (focus)=\"_onFocus()\"\n        (blur)=\"_onBlur()\"\n    >\n        <div role=\"listitem\" class=\"fd-select__text-content\" [attr.aria-label]=\"triggerValue\">\n            <ng-container\n                [ngTemplateOutlet]=\"controlTemplate ? controlTemplate : defaultSelectContent\"\n                [ngTemplateOutletContext]=\"{ $implicit: triggerValue, selected: selected }\"\n            >\n            </ng-container>\n\n            <ng-template #defaultSelectContent>\n                {{ triggerValue }}\n            </ng-template>\n        </div>\n        <button\n            fd-button\n            tabindex=\"-1\"\n            class=\"fd-button--transparent fd-select__button\"\n            *ngIf=\"!readonly\"\n            [disabled]=\"disabled\"\n            [glyph]=\"glyph\"\n        ></button>\n    </div>\n</ng-template>\n\n<ng-template #selectOptionsListTemplate>\n    <ul\n        #optionPanel\n        fd-list\n        class=\"fd-select-options\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        [mobileMode]=\"mobile\"\n        [dropdownMode]=\"true\"\n        [hasMessage]=\"!!stateMessage\"\n        [attr.id]=\"controlId + '-list-box'\"\n        [style.max-height]=\"maxHeight || calculatedMaxHeight + 'px'\"\n        [attr.tooltip]=\"triggerValue\"\n    >\n        <li\n            *ngIf=\"stateMessage\"\n            [attr.aria-label]=\"stateMessage\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n            [innerHtml]=\"stateMessage\"\n        ></li>\n\n        <ng-content></ng-content>\n    </ul>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <div\n        class=\"fd-select\"\n        [class.fd-select--compact]=\"_contentDensityObserver.isCompact\"\n        (keydown)=\"_handleKeydown($event)\"\n        (click)=\"toggle()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n    </div>\n\n    <div #dialogContainer></div>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.25.1-rc.16\n * Copyright (c) 2022 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;line-height:var(--sapContent_LineHeight);margin:0;padding:0;text-shadow:var(--fdSelect_Text_Shadow)}.fd-select:after,.fd-select:before{box-sizing:inherit;font-size:inherit}.fd-select__control{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.25rem;justify-content:center;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:.25rem 0 0;min-height:2.25rem;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(--sapField_Hover_BackgroundStyle);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(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-select__control.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-select__control.is-success.is-hover,.fd-select__control.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-select__control.is-success.is-focus.is-hover,.fd-select__control.is-success.is-focus:hover,.fd-select__control.is-success:focus.is-hover,.fd-select__control.is-success:focus:hover{box-shadow:none}.fd-select__control.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-select__control.is-error.is-hover,.fd-select__control.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-select__control.is-error.is-focus.is-hover,.fd-select__control.is-error.is-focus:hover,.fd-select__control.is-error:focus.is-hover,.fd-select__control.is-error:focus:hover{box-shadow:none}.fd-select__control.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-warning.is-hover,.fd-select__control.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-warning.is-focus.is-hover,.fd-select__control.is-warning.is-focus:hover,.fd-select__control.is-warning:focus.is-hover,.fd-select__control.is-warning:focus:hover{box-shadow:none}.fd-select__control.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-alert.is-hover,.fd-select__control.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-alert.is-focus.is-hover,.fd-select__control.is-alert.is-focus:hover,.fd-select__control.is-alert:focus.is-hover,.fd-select__control.is-alert:focus:hover{box-shadow:none}.fd-select__control.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-select__control.is-information.is-hover,.fd-select__control.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-select__control.is-information.is-focus.is-hover,.fd-select__control.is-information.is-focus:hover,.fd-select__control.is-information:focus.is-hover,.fd-select__control.is-information:focus:hover{box-shadow:none}.fd-select__control.is-alert,.fd-select__control.is-error,.fd-select__control.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::placeholder,.fd-select__control.is-error::placeholder,.fd-select__control.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus,.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus,.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus,.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-select__control.is-error::placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-select__control.is-disabled::placeholder,.fd-select__control:disabled::placeholder,.fd-select__control[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events: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)}.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{box-shadow:none}.fd-select__control.is-readonly.is-focus,.fd-select__control.is-readonly:focus,.fd-select__control[aria-readonly=true].is-focus,.fd-select__control[aria-readonly=true]:focus,.fd-select__control[readonly].is-focus,.fd-select__control[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-select__control .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-select__control .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.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);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button.is-hover,.fd-select__control.is-success .fd-select__button:active,.fd-select__control.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button.is-hover,.fd-select__control.is-error .fd-select__button:active,.fd-select__control.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button.is-hover,.fd-select__control.is-warning .fd-select__button:active,.fd-select__control.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button.is-hover,.fd-select__control.is-alert .fd-select__button:active,.fd-select__control.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button.is-hover,.fd-select__control.is-information .fd-select__button:active,.fd-select__control.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{pointer-events:none}.fd-select__control .fd-select__button{margin-left:.25rem}.fd-select__control .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button{margin-left:0;margin-right:.25rem}.fd-select__control .fd-select__button .fd-select__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-select__control .fd-select__button .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button .fd-select__button.is-hover,.fd-select__control .fd-select__button .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-select__control .fd-select__button .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__button .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__button .fd-select__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button .fd-select__button.is-active,.fd-select__control .fd-select__button .fd-select__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control .fd-select__button .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__button .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__button .fd-select__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button.is-success .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-success .fd-select__button.is-active,.fd-select__control .fd-select__button.is-success .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control .fd-select__button.is-error .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-error .fd-select__button.is-active,.fd-select__control .fd-select__button.is-error .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control .fd-select__button.is-warning .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-warning .fd-select__button.is-active,.fd-select__control .fd-select__button.is-warning .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control .fd-select__button.is-alert .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-alert .fd-select__button.is-active,.fd-select__control .fd-select__button.is-alert .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control .fd-select__button.is-information .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-information .fd-select__button.is-active,.fd-select__control .fd-select__button.is-information .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.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{min-width:calc(5rem - var(--sapField_BorderWidth) * 2);padding-left:.625rem;padding-right:.625rem}.fd-select__control.is-expanded,.fd-select__control[aria-expanded=true]{box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-expanded .fd-select__button,.fd-select__control[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--sapButton_Active_TextColor)}.fd-select__control.is-expanded.is-focus,.fd-select__control.is-expanded:focus,.fd-select__control[aria-expanded=true].is-focus,.fd-select__control[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-expanded.is-hover .fd-select__button,.fd-select__control.is-expanded:hover .fd-select__button,.fd-select__control[aria-expanded=true].is-hover .fd-select__button,.fd-select__control[aria-expanded=true]:hover .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapButton_Selected_Hover_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color_Hover);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--sapButton_Active_TextColor)}.fd-select__control.is-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-expanded .fd-select__button,.fd-select__control.is-success[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Success_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-expanded.is-focus,.fd-select__control.is-success.is-expanded:focus,.fd-select__control.is-success[aria-expanded=true].is-focus,.fd-select__control.is-success[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-expanded .fd-select__button,.fd-select__control.is-error[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Error_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-expanded.is-focus,.fd-select__control.is-error.is-expanded:focus,.fd-select__control.is-error[aria-expanded=true].is-focus,.fd-select__control.is-error[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-expanded .fd-select__button,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-expanded.is-focus,.fd-select__control.is-warning.is-expanded:focus,.fd-select__control.is-warning[aria-expanded=true].is-focus,.fd-select__control.is-warning[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-expanded .fd-select__button,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-expanded.is-focus,.fd-select__control.is-alert.is-expanded:focus,.fd-select__control.is-alert[aria-expanded=true].is-focus,.fd-select__control.is-alert[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-expanded .fd-select__button,.fd-select__control.is-information[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Information_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-expanded.is-focus,.fd-select__control.is-information.is-expanded:focus,.fd-select__control.is-information[aria-expanded=true].is-focus,.fd-select__control.is-information[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__text-content{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;min-width:calc(2.5rem - var(--sapField_BorderWidth) * 2);overflow:hidden;padding:0 0 0 .625rem;text-overflow:ellipsis;white-space:nowrap}.fd-select__text-content:after,.fd-select__text-content:before{box-sizing:inherit;font-size:inherit}.fd-select__text-content[dir=rtl],[dir=rtl] .fd-select__text-content{padding-left:0;padding-right:.625rem}.fd-select--compact .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select--compact .fd-select__control .fd-select__text-content{min-width:calc(2.75rem - var(--sapField_BorderWidth) * 2);padding-left:.5rem}.fd-select--compact .fd-select__control .fd-select__text-content[dir=rtl],[dir=rtl] .fd-select--compact .fd-select__control .fd-select__text-content{padding-left:0;padding-right:.5rem}.fd-select--compact .fd-select__control.is-readonly .fd-select__text-content,.fd-select--compact .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select--compact .fd-select__control[readonly] .fd-select__text-content{padding-left:.5rem;padding-right:.5rem}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-popover__body>:first-child{border-radius:0}.fd-select__text-content{overflow:hidden;text-overflow:ellipsis;line-height:1rem;display:block}.fd-select-custom-class{display:inline-block;max-width:100%}.fd-popover-custom-select-body{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i6.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["disableScrollbar"] }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "directive", type: i1.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "_options", predicate: OptionComponent, descendants: true }], viewQueries: [{ propertyName: "_controlElementRef", first: true, predicate: ["selectControl"], descendants: true }, { propertyName: "selectOptionsListTemplate", first: true, predicate: ["selectOptionsListTemplate"], descendants: true }, { propertyName: "_dialogContainerElementRef", first: true, predicate: ["dialogContainer"], descendants: true }, { propertyName: "_overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "_optionPanel", first: true, predicate: ["optionPanel"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n    <div\n        class=\"fd-select\"\n        [class.fd-select--compact]=\"_contentDensityObserver.isCompact\"\n        (keydown)=\"_handleKeydown($event)\"\n        (click)=\"toggle()\"\n    >\n        <fd-popover\n            additionalBodyClass=\"fd-popover-custom-list\"\n            [isOpen]=\"_isOpen\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [disabled]=\"disabled || readonly\"\n            [appendTo]=\"appendTo\"\n            [closeOnEscapeKey]=\"true\"\n            [fillControlMode]=\"fillControlMode\"\n            [maxWidth]=\"600\"\n            [closeOnOutsideClick]=\"closeOnOutsideClick\"\n            (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        >\n            <fd-popover-control>\n                <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n            </fd-popover-control>\n\n            <fd-popover-body class=\"fd-popover-custom-select-body\">\n                <ng-container [ngTemplateOutlet]=\"selectOptionsListTemplate\"></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n    </div>\n</ng-template>\n\n<ng-template #selectInputControlTemplate>\n    <div\n        class=\"fd-select__control\"\n        role=\"list\"\n        #selectControl\n        [class]=\"state ? 'is-' + state : ''\"\n        [class.is-active]=\"_isOpen\"\n        [class.is-expanded]=\"_isOpen\"\n        [class.is-disabled]=\"disabled\"\n        [class.is-readonly]=\"readonly\"\n        [attr.tabindex]=\"_tabIndex\"\n        [attr.id]=\"controlId\"\n        [attr.aria-active]=\"_isOpen\"\n        aria-live=\"polite\"\n        [attr.aria-selected]=\"selected?.selected\"\n        [attr.aria-expanded]=\"_isOpen\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-readonly]=\"readonly\"\n        [attr.aria-controls]=\"controlId + '-list-box'\"\n        [attr.aria-haspopup]=\"!(this.readonly || this.disabled)\"\n        [attr.aria-required]=\"required\"\n        [attr.title]=\"triggerValue\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [attr.aria-activedescendant]=\"_getAriaActiveDescendant()\"\n        (focus)=\"_onFocus()\"\n        (blur)=\"_onBlur()\"\n    >\n        <div role=\"listitem\" class=\"fd-select__text-content\" [attr.aria-label]=\"triggerValue\">\n            <ng-container\n                [ngTemplateOutlet]=\"controlTemplate ? controlTemplate : defaultSelectContent\"\n                [ngTemplateOutletContext]=\"{ $implicit: triggerValue, selected: selected }\"\n            >\n            </ng-container>\n\n            <ng-template #defaultSelectContent>\n                {{ triggerValue }}\n            </ng-template>\n        </div>\n        <button\n            fd-button\n            tabindex=\"-1\"\n            class=\"fd-button--transparent fd-select__button\"\n            *ngIf=\"!readonly\"\n            [disabled]=\"disabled\"\n            [glyph]=\"glyph\"\n        ></button>\n    </div>\n</ng-template>\n\n<ng-template #selectOptionsListTemplate>\n    <ul\n        #optionPanel\n        fd-list\n        class=\"fd-select-options\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        [mobileMode]=\"mobile\"\n        [dropdownMode]=\"true\"\n        [hasMessage]=\"!!stateMessage\"\n        [attr.id]=\"controlId + '-list-box'\"\n        [style.max-height]=\"maxHeight || calculatedMaxHeight + 'px'\"\n        [attr.tooltip]=\"triggerValue\"\n    >\n        <li\n            *ngIf=\"stateMessage\"\n            [attr.aria-label]=\"stateMessage\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n            [innerHtml]=\"stateMessage\"\n        ></li>\n\n        <ng-content></ng-content>\n    </ul>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <div\n        class=\"fd-select\"\n        [class.fd-select--compact]=\"_contentDensityObserver.isCompact\"\n        (keydown)=\"_handleKeydown($event)\"\n        (click)=\"toggle()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n    </div>\n\n    <div #dialogContainer></div>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.27\n * Copyright (c) 2022 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;line-height:var(--sapContent_LineHeight);margin:0;padding:0;text-shadow:var(--fdSelect_Text_Shadow)}.fd-select:after,.fd-select:before{box-sizing:inherit;font-size:inherit}.fd-select__control{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.25rem;justify-content:center;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:.25rem 0 0;min-height:2.25rem;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(--sapField_Hover_BackgroundStyle);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(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-select__control.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-select__control.is-success.is-hover,.fd-select__control.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-select__control.is-success.is-focus.is-hover,.fd-select__control.is-success.is-focus:hover,.fd-select__control.is-success:focus.is-hover,.fd-select__control.is-success:focus:hover{box-shadow:none}.fd-select__control.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-select__control.is-error.is-hover,.fd-select__control.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-select__control.is-error.is-focus.is-hover,.fd-select__control.is-error.is-focus:hover,.fd-select__control.is-error:focus.is-hover,.fd-select__control.is-error:focus:hover{box-shadow:none}.fd-select__control.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-warning.is-hover,.fd-select__control.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-warning.is-focus.is-hover,.fd-select__control.is-warning.is-focus:hover,.fd-select__control.is-warning:focus.is-hover,.fd-select__control.is-warning:focus:hover{box-shadow:none}.fd-select__control.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-alert.is-hover,.fd-select__control.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-alert.is-focus.is-hover,.fd-select__control.is-alert.is-focus:hover,.fd-select__control.is-alert:focus.is-hover,.fd-select__control.is-alert:focus:hover{box-shadow:none}.fd-select__control.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-select__control.is-information.is-hover,.fd-select__control.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-select__control.is-information.is-focus.is-hover,.fd-select__control.is-information.is-focus:hover,.fd-select__control.is-information:focus.is-hover,.fd-select__control.is-information:focus:hover{box-shadow:none}.fd-select__control.is-alert,.fd-select__control.is-error,.fd-select__control.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::placeholder,.fd-select__control.is-error::placeholder,.fd-select__control.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus,.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus,.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus,.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-select__control.is-error::placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-select__control.is-disabled::placeholder,.fd-select__control:disabled::placeholder,.fd-select__control[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events: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)}.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{box-shadow:none}.fd-select__control.is-readonly.is-focus,.fd-select__control.is-readonly:focus,.fd-select__control[aria-readonly=true].is-focus,.fd-select__control[aria-readonly=true]:focus,.fd-select__control[readonly].is-focus,.fd-select__control[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-select__control .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-select__control .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.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);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button.is-hover,.fd-select__control.is-success .fd-select__button:active,.fd-select__control.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button.is-hover,.fd-select__control.is-error .fd-select__button:active,.fd-select__control.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button.is-hover,.fd-select__control.is-warning .fd-select__button:active,.fd-select__control.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button.is-hover,.fd-select__control.is-alert .fd-select__button:active,.fd-select__control.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button.is-hover,.fd-select__control.is-information .fd-select__button:active,.fd-select__control.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{pointer-events:none}.fd-select__control .fd-select__button{margin-left:.25rem}.fd-select__control .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button{margin-left:0;margin-right:.25rem}.fd-select__control .fd-select__button .fd-select__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-select__control .fd-select__button .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button .fd-select__button.is-hover,.fd-select__control .fd-select__button .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-select__control .fd-select__button .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__button .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__button .fd-select__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button .fd-select__button.is-active,.fd-select__control .fd-select__button .fd-select__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control .fd-select__button .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__button .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__button .fd-select__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button.is-success .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-success .fd-select__button.is-active,.fd-select__control .fd-select__button.is-success .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control .fd-select__button.is-error .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-error .fd-select__button.is-active,.fd-select__control .fd-select__button.is-error .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control .fd-select__button.is-warning .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-warning .fd-select__button.is-active,.fd-select__control .fd-select__button.is-warning .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control .fd-select__button.is-alert .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-alert .fd-select__button.is-active,.fd-select__control .fd-select__button.is-alert .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control .fd-select__button.is-information .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-information .fd-select__button.is-active,.fd-select__control .fd-select__button.is-information .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.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{min-width:calc(5rem - var(--sapField_BorderWidth) * 2);padding-left:.625rem;padding-right:.625rem}.fd-select__control.is-expanded,.fd-select__control[aria-expanded=true]{box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-expanded .fd-select__button,.fd-select__control[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--sapButton_Active_TextColor)}.fd-select__control.is-expanded.is-focus,.fd-select__control.is-expanded:focus,.fd-select__control[aria-expanded=true].is-focus,.fd-select__control[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-expanded.is-hover .fd-select__button,.fd-select__control.is-expanded:hover .fd-select__button,.fd-select__control[aria-expanded=true].is-hover .fd-select__button,.fd-select__control[aria-expanded=true]:hover .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapButton_Selected_Hover_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color_Hover);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--sapButton_Active_TextColor)}.fd-select__control.is-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-expanded .fd-select__button,.fd-select__control.is-success[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Success_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-expanded.is-focus,.fd-select__control.is-success.is-expanded:focus,.fd-select__control.is-success[aria-expanded=true].is-focus,.fd-select__control.is-success[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-expanded .fd-select__button,.fd-select__control.is-error[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Error_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-expanded.is-focus,.fd-select__control.is-error.is-expanded:focus,.fd-select__control.is-error[aria-expanded=true].is-focus,.fd-select__control.is-error[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-expanded .fd-select__button,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-expanded.is-focus,.fd-select__control.is-warning.is-expanded:focus,.fd-select__control.is-warning[aria-expanded=true].is-focus,.fd-select__control.is-warning[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-expanded .fd-select__button,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-expanded.is-focus,.fd-select__control.is-alert.is-expanded:focus,.fd-select__control.is-alert[aria-expanded=true].is-focus,.fd-select__control.is-alert[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-expanded .fd-select__button,.fd-select__control.is-information[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Information_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-expanded.is-focus,.fd-select__control.is-information.is-expanded:focus,.fd-select__control.is-information[aria-expanded=true].is-focus,.fd-select__control.is-information[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__text-content{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;min-width:calc(2.5rem - var(--sapField_BorderWidth) * 2);overflow:hidden;padding:0 0 0 .625rem;text-overflow:ellipsis;white-space:nowrap}.fd-select__text-content:after,.fd-select__text-content:before{box-sizing:inherit;font-size:inherit}.fd-select__text-content[dir=rtl],[dir=rtl] .fd-select__text-content{padding-left:0;padding-right:.625rem}.fd-select--compact .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select--compact .fd-select__control .fd-select__text-content{min-width:calc(2.75rem - var(--sapField_BorderWidth) * 2);padding-left:.5rem}.fd-select--compact .fd-select__control .fd-select__text-content[dir=rtl],[dir=rtl] .fd-select--compact .fd-select__control .fd-select__text-content{padding-left:0;padding-right:.5rem}.fd-select--compact .fd-select__control.is-readonly .fd-select__text-content,.fd-select--compact .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select--compact .fd-select__control[readonly] .fd-select__text-content{padding-left:.5rem;padding-right:.5rem}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-popover__body>:first-child{border-radius:0}.fd-select__text-content{overflow:hidden;text-overflow:ellipsis;line-height:1rem;display:block}.fd-select-custom-class{display:inline-block;max-width:100%}.fd-popover-custom-select-body{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i6.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i1.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "directive", type: i1.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-select', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
@@ -937,7 +937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                         registerFormItemControl(SelectComponent),
                         SelectKeyManagerService,
                         contentDensityObserverProviders()
-                    ], template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n    <div\n        class=\"fd-select\"\n        [class.fd-select--compact]=\"_contentDensityObserver.isCompact\"\n        (keydown)=\"_handleKeydown($event)\"\n        (click)=\"toggle()\"\n    >\n        <fd-popover\n            additionalBodyClass=\"fd-popover-custom-list\"\n            [isOpen]=\"_isOpen\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [disabled]=\"disabled || readonly\"\n            [appendTo]=\"appendTo\"\n            [closeOnEscapeKey]=\"true\"\n            [fillControlMode]=\"fillControlMode\"\n            [maxWidth]=\"600\"\n            [closeOnOutsideClick]=\"closeOnOutsideClick\"\n            (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        >\n            <fd-popover-control>\n                <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n            </fd-popover-control>\n\n            <fd-popover-body class=\"fd-popover-custom-select-body\">\n                <ng-container [ngTemplateOutlet]=\"selectOptionsListTemplate\"></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n    </div>\n</ng-template>\n\n<ng-template #selectInputControlTemplate>\n    <div\n        class=\"fd-select__control\"\n        role=\"list\"\n        #selectControl\n        [class]=\"state ? 'is-' + state : ''\"\n        [class.is-active]=\"_isOpen\"\n        [class.is-expanded]=\"_isOpen\"\n        [class.is-disabled]=\"disabled\"\n        [class.is-readonly]=\"readonly\"\n        [attr.tabindex]=\"_tabIndex\"\n        [attr.id]=\"controlId\"\n        [attr.aria-active]=\"_isOpen\"\n        aria-live=\"polite\"\n        [attr.aria-selected]=\"selected?.selected\"\n        [attr.aria-expanded]=\"_isOpen\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-readonly]=\"readonly\"\n        [attr.aria-controls]=\"controlId + '-list-box'\"\n        [attr.aria-haspopup]=\"!(this.readonly || this.disabled)\"\n        [attr.aria-required]=\"required\"\n        [attr.title]=\"triggerValue\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [attr.aria-activedescendant]=\"_getAriaActiveDescendant()\"\n        (focus)=\"_onFocus()\"\n        (blur)=\"_onBlur()\"\n    >\n        <div role=\"listitem\" class=\"fd-select__text-content\" [attr.aria-label]=\"triggerValue\">\n            <ng-container\n                [ngTemplateOutlet]=\"controlTemplate ? controlTemplate : defaultSelectContent\"\n                [ngTemplateOutletContext]=\"{ $implicit: triggerValue, selected: selected }\"\n            >\n            </ng-container>\n\n            <ng-template #defaultSelectContent>\n                {{ triggerValue }}\n            </ng-template>\n        </div>\n        <button\n            fd-button\n            tabindex=\"-1\"\n            class=\"fd-button--transparent fd-select__button\"\n            *ngIf=\"!readonly\"\n            [disabled]=\"disabled\"\n            [glyph]=\"glyph\"\n        ></button>\n    </div>\n</ng-template>\n\n<ng-template #selectOptionsListTemplate>\n    <ul\n        #optionPanel\n        fd-list\n        class=\"fd-select-options\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        [mobileMode]=\"mobile\"\n        [dropdownMode]=\"true\"\n        [hasMessage]=\"!!stateMessage\"\n        [attr.id]=\"controlId + '-list-box'\"\n        [style.max-height]=\"maxHeight || calculatedMaxHeight + 'px'\"\n        [attr.tooltip]=\"triggerValue\"\n    >\n        <li\n            *ngIf=\"stateMessage\"\n            [attr.aria-label]=\"stateMessage\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n            [innerHtml]=\"stateMessage\"\n        ></li>\n\n        <ng-content></ng-content>\n    </ul>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <div\n        class=\"fd-select\"\n        [class.fd-select--compact]=\"_contentDensityObserver.isCompact\"\n        (keydown)=\"_handleKeydown($event)\"\n        (click)=\"toggle()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n    </div>\n\n    <div #dialogContainer></div>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.25.1-rc.16\n * Copyright (c) 2022 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;line-height:var(--sapContent_LineHeight);margin:0;padding:0;text-shadow:var(--fdSelect_Text_Shadow)}.fd-select:after,.fd-select:before{box-sizing:inherit;font-size:inherit}.fd-select__control{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.25rem;justify-content:center;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:.25rem 0 0;min-height:2.25rem;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(--sapField_Hover_BackgroundStyle);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(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-select__control.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-select__control.is-success.is-hover,.fd-select__control.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-select__control.is-success.is-focus.is-hover,.fd-select__control.is-success.is-focus:hover,.fd-select__control.is-success:focus.is-hover,.fd-select__control.is-success:focus:hover{box-shadow:none}.fd-select__control.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-select__control.is-error.is-hover,.fd-select__control.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-select__control.is-error.is-focus.is-hover,.fd-select__control.is-error.is-focus:hover,.fd-select__control.is-error:focus.is-hover,.fd-select__control.is-error:focus:hover{box-shadow:none}.fd-select__control.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-warning.is-hover,.fd-select__control.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-warning.is-focus.is-hover,.fd-select__control.is-warning.is-focus:hover,.fd-select__control.is-warning:focus.is-hover,.fd-select__control.is-warning:focus:hover{box-shadow:none}.fd-select__control.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-alert.is-hover,.fd-select__control.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-alert.is-focus.is-hover,.fd-select__control.is-alert.is-focus:hover,.fd-select__control.is-alert:focus.is-hover,.fd-select__control.is-alert:focus:hover{box-shadow:none}.fd-select__control.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-select__control.is-information.is-hover,.fd-select__control.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-select__control.is-information.is-focus.is-hover,.fd-select__control.is-information.is-focus:hover,.fd-select__control.is-information:focus.is-hover,.fd-select__control.is-information:focus:hover{box-shadow:none}.fd-select__control.is-alert,.fd-select__control.is-error,.fd-select__control.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::placeholder,.fd-select__control.is-error::placeholder,.fd-select__control.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus,.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus,.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus,.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-select__control.is-error::placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-select__control.is-disabled::placeholder,.fd-select__control:disabled::placeholder,.fd-select__control[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events: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)}.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{box-shadow:none}.fd-select__control.is-readonly.is-focus,.fd-select__control.is-readonly:focus,.fd-select__control[aria-readonly=true].is-focus,.fd-select__control[aria-readonly=true]:focus,.fd-select__control[readonly].is-focus,.fd-select__control[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-select__control .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-select__control .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.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);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button.is-hover,.fd-select__control.is-success .fd-select__button:active,.fd-select__control.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button.is-hover,.fd-select__control.is-error .fd-select__button:active,.fd-select__control.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button.is-hover,.fd-select__control.is-warning .fd-select__button:active,.fd-select__control.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button.is-hover,.fd-select__control.is-alert .fd-select__button:active,.fd-select__control.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button.is-hover,.fd-select__control.is-information .fd-select__button:active,.fd-select__control.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{pointer-events:none}.fd-select__control .fd-select__button{margin-left:.25rem}.fd-select__control .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button{margin-left:0;margin-right:.25rem}.fd-select__control .fd-select__button .fd-select__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-select__control .fd-select__button .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button .fd-select__button.is-hover,.fd-select__control .fd-select__button .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-select__control .fd-select__button .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__button .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__button .fd-select__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button .fd-select__button.is-active,.fd-select__control .fd-select__button .fd-select__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control .fd-select__button .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__button .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__button .fd-select__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button.is-success .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-success .fd-select__button.is-active,.fd-select__control .fd-select__button.is-success .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control .fd-select__button.is-error .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-error .fd-select__button.is-active,.fd-select__control .fd-select__button.is-error .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control .fd-select__button.is-warning .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-warning .fd-select__button.is-active,.fd-select__control .fd-select__button.is-warning .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control .fd-select__button.is-alert .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-alert .fd-select__button.is-active,.fd-select__control .fd-select__button.is-alert .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control .fd-select__button.is-information .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-information .fd-select__button.is-active,.fd-select__control .fd-select__button.is-information .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.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{min-width:calc(5rem - var(--sapField_BorderWidth) * 2);padding-left:.625rem;padding-right:.625rem}.fd-select__control.is-expanded,.fd-select__control[aria-expanded=true]{box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-expanded .fd-select__button,.fd-select__control[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--sapButton_Active_TextColor)}.fd-select__control.is-expanded.is-focus,.fd-select__control.is-expanded:focus,.fd-select__control[aria-expanded=true].is-focus,.fd-select__control[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-expanded.is-hover .fd-select__button,.fd-select__control.is-expanded:hover .fd-select__button,.fd-select__control[aria-expanded=true].is-hover .fd-select__button,.fd-select__control[aria-expanded=true]:hover .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapButton_Selected_Hover_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color_Hover);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--sapButton_Active_TextColor)}.fd-select__control.is-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-expanded .fd-select__button,.fd-select__control.is-success[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Success_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-expanded.is-focus,.fd-select__control.is-success.is-expanded:focus,.fd-select__control.is-success[aria-expanded=true].is-focus,.fd-select__control.is-success[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-expanded .fd-select__button,.fd-select__control.is-error[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Error_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-expanded.is-focus,.fd-select__control.is-error.is-expanded:focus,.fd-select__control.is-error[aria-expanded=true].is-focus,.fd-select__control.is-error[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-expanded .fd-select__button,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-expanded.is-focus,.fd-select__control.is-warning.is-expanded:focus,.fd-select__control.is-warning[aria-expanded=true].is-focus,.fd-select__control.is-warning[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-expanded .fd-select__button,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-expanded.is-focus,.fd-select__control.is-alert.is-expanded:focus,.fd-select__control.is-alert[aria-expanded=true].is-focus,.fd-select__control.is-alert[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-expanded .fd-select__button,.fd-select__control.is-information[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Information_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-expanded.is-focus,.fd-select__control.is-information.is-expanded:focus,.fd-select__control.is-information[aria-expanded=true].is-focus,.fd-select__control.is-information[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__text-content{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;min-width:calc(2.5rem - var(--sapField_BorderWidth) * 2);overflow:hidden;padding:0 0 0 .625rem;text-overflow:ellipsis;white-space:nowrap}.fd-select__text-content:after,.fd-select__text-content:before{box-sizing:inherit;font-size:inherit}.fd-select__text-content[dir=rtl],[dir=rtl] .fd-select__text-content{padding-left:0;padding-right:.625rem}.fd-select--compact .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select--compact .fd-select__control .fd-select__text-content{min-width:calc(2.75rem - var(--sapField_BorderWidth) * 2);padding-left:.5rem}.fd-select--compact .fd-select__control .fd-select__text-content[dir=rtl],[dir=rtl] .fd-select--compact .fd-select__control .fd-select__text-content{padding-left:0;padding-right:.5rem}.fd-select--compact .fd-select__control.is-readonly .fd-select__text-content,.fd-select--compact .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select--compact .fd-select__control[readonly] .fd-select__text-content{padding-left:.5rem;padding-right:.5rem}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-popover__body>:first-child{border-radius:0}.fd-select__text-content{overflow:hidden;text-overflow:ellipsis;line-height:1rem;display:block}.fd-select-custom-class{display:inline-block;max-width:100%}.fd-popover-custom-select-body{max-width:100%}\n"] }]
+                    ], template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n    <div\n        class=\"fd-select\"\n        [class.fd-select--compact]=\"_contentDensityObserver.isCompact\"\n        (keydown)=\"_handleKeydown($event)\"\n        (click)=\"toggle()\"\n    >\n        <fd-popover\n            additionalBodyClass=\"fd-popover-custom-list\"\n            [isOpen]=\"_isOpen\"\n            [triggers]=\"[]\"\n            [focusTrapped]=\"true\"\n            [disabled]=\"disabled || readonly\"\n            [appendTo]=\"appendTo\"\n            [closeOnEscapeKey]=\"true\"\n            [fillControlMode]=\"fillControlMode\"\n            [maxWidth]=\"600\"\n            [closeOnOutsideClick]=\"closeOnOutsideClick\"\n            (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        >\n            <fd-popover-control>\n                <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n            </fd-popover-control>\n\n            <fd-popover-body class=\"fd-popover-custom-select-body\">\n                <ng-container [ngTemplateOutlet]=\"selectOptionsListTemplate\"></ng-container>\n            </fd-popover-body>\n        </fd-popover>\n    </div>\n</ng-template>\n\n<ng-template #selectInputControlTemplate>\n    <div\n        class=\"fd-select__control\"\n        role=\"list\"\n        #selectControl\n        [class]=\"state ? 'is-' + state : ''\"\n        [class.is-active]=\"_isOpen\"\n        [class.is-expanded]=\"_isOpen\"\n        [class.is-disabled]=\"disabled\"\n        [class.is-readonly]=\"readonly\"\n        [attr.tabindex]=\"_tabIndex\"\n        [attr.id]=\"controlId\"\n        [attr.aria-active]=\"_isOpen\"\n        aria-live=\"polite\"\n        [attr.aria-selected]=\"selected?.selected\"\n        [attr.aria-expanded]=\"_isOpen\"\n        [attr.aria-disabled]=\"disabled\"\n        [attr.aria-readonly]=\"readonly\"\n        [attr.aria-controls]=\"controlId + '-list-box'\"\n        [attr.aria-haspopup]=\"!(this.readonly || this.disabled)\"\n        [attr.aria-required]=\"required\"\n        [attr.title]=\"triggerValue\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [attr.aria-activedescendant]=\"_getAriaActiveDescendant()\"\n        (focus)=\"_onFocus()\"\n        (blur)=\"_onBlur()\"\n    >\n        <div role=\"listitem\" class=\"fd-select__text-content\" [attr.aria-label]=\"triggerValue\">\n            <ng-container\n                [ngTemplateOutlet]=\"controlTemplate ? controlTemplate : defaultSelectContent\"\n                [ngTemplateOutletContext]=\"{ $implicit: triggerValue, selected: selected }\"\n            >\n            </ng-container>\n\n            <ng-template #defaultSelectContent>\n                {{ triggerValue }}\n            </ng-template>\n        </div>\n        <button\n            fd-button\n            tabindex=\"-1\"\n            class=\"fd-button--transparent fd-select__button\"\n            *ngIf=\"!readonly\"\n            [disabled]=\"disabled\"\n            [glyph]=\"glyph\"\n        ></button>\n    </div>\n</ng-template>\n\n<ng-template #selectOptionsListTemplate>\n    <ul\n        #optionPanel\n        fd-list\n        class=\"fd-select-options\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        [mobileMode]=\"mobile\"\n        [dropdownMode]=\"true\"\n        [hasMessage]=\"!!stateMessage\"\n        [attr.id]=\"controlId + '-list-box'\"\n        [style.max-height]=\"maxHeight || calculatedMaxHeight + 'px'\"\n        [attr.tooltip]=\"triggerValue\"\n    >\n        <li\n            *ngIf=\"stateMessage\"\n            [attr.aria-label]=\"stateMessage\"\n            fd-list-message\n            tabindex=\"-1\"\n            role=\"presentation\"\n            [type]=\"state || 'default'\"\n            [innerHtml]=\"stateMessage\"\n        ></li>\n\n        <ng-content></ng-content>\n    </ul>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <div\n        class=\"fd-select\"\n        [class.fd-select--compact]=\"_contentDensityObserver.isCompact\"\n        (keydown)=\"_handleKeydown($event)\"\n        (click)=\"toggle()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"selectInputControlTemplate\"></ng-container>\n    </div>\n\n    <div #dialogContainer></div>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.27\n * Copyright (c) 2022 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;line-height:var(--sapContent_LineHeight);margin:0;padding:0;text-shadow:var(--fdSelect_Text_Shadow)}.fd-select:after,.fd-select:before{box-sizing:inherit;font-size:inherit}.fd-select__control{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.25rem;justify-content:center;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:.25rem 0 0;min-height:2.25rem;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(--sapField_Hover_BackgroundStyle);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(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-select__control.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-select__control.is-success.is-hover,.fd-select__control.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-select__control.is-success.is-focus.is-hover,.fd-select__control.is-success.is-focus:hover,.fd-select__control.is-success:focus.is-hover,.fd-select__control.is-success:focus:hover{box-shadow:none}.fd-select__control.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-select__control.is-error.is-hover,.fd-select__control.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-select__control.is-error.is-focus.is-hover,.fd-select__control.is-error.is-focus:hover,.fd-select__control.is-error:focus.is-hover,.fd-select__control.is-error:focus:hover{box-shadow:none}.fd-select__control.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-warning.is-hover,.fd-select__control.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-warning.is-focus.is-hover,.fd-select__control.is-warning.is-focus:hover,.fd-select__control.is-warning:focus.is-hover,.fd-select__control.is-warning:focus:hover{box-shadow:none}.fd-select__control.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-alert.is-hover,.fd-select__control.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-select__control.is-alert.is-focus.is-hover,.fd-select__control.is-alert.is-focus:hover,.fd-select__control.is-alert:focus.is-hover,.fd-select__control.is-alert:focus:hover{box-shadow:none}.fd-select__control.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-select__control.is-information.is-hover,.fd-select__control.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-select__control.is-information.is-focus.is-hover,.fd-select__control.is-information.is-focus:hover,.fd-select__control.is-information:focus.is-hover,.fd-select__control.is-information:focus:hover{box-shadow:none}.fd-select__control.is-alert,.fd-select__control.is-error,.fd-select__control.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::placeholder,.fd-select__control.is-error::placeholder,.fd-select__control.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus,.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus,.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus,.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-select__control.is-error::placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity)}.fd-select__control.is-disabled::placeholder,.fd-select__control:disabled::placeholder,.fd-select__control[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events: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)}.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{box-shadow:none}.fd-select__control.is-readonly.is-focus,.fd-select__control.is-readonly:focus,.fd-select__control[aria-readonly=true].is-focus,.fd-select__control[aria-readonly=true]:focus,.fd-select__control[readonly].is-focus,.fd-select__control[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-select__control .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-select__control .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.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);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button.is-hover,.fd-select__control.is-success .fd-select__button:active,.fd-select__control.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button.is-hover,.fd-select__control.is-error .fd-select__button:active,.fd-select__control.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button.is-hover,.fd-select__control.is-warning .fd-select__button:active,.fd-select__control.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button.is-hover,.fd-select__control.is-alert .fd-select__button:active,.fd-select__control.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button.is-hover,.fd-select__control.is-information .fd-select__button:active,.fd-select__control.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{pointer-events:none}.fd-select__control .fd-select__button{margin-left:.25rem}.fd-select__control .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button{margin-left:0;margin-right:.25rem}.fd-select__control .fd-select__button .fd-select__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button .fd-select__button[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-select__control .fd-select__button .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button .fd-select__button.is-hover,.fd-select__control .fd-select__button .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-select__control .fd-select__button .fd-select__button.is-hover[dir=rtl],.fd-select__control .fd-select__button .fd-select__button:hover[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button.is-hover,[dir=rtl] .fd-select__control .fd-select__button .fd-select__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button .fd-select__button.is-active,.fd-select__control .fd-select__button .fd-select__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control .fd-select__button .fd-select__button.is-active[dir=rtl],.fd-select__control .fd-select__button .fd-select__button:active[dir=rtl],[dir=rtl] .fd-select__control .fd-select__button .fd-select__button.is-active,[dir=rtl] .fd-select__control .fd-select__button .fd-select__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-select__control .fd-select__button.is-success .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-success .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-success .fd-select__button.is-active,.fd-select__control .fd-select__button.is-success .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control .fd-select__button.is-error .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-error .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-error .fd-select__button.is-active,.fd-select__control .fd-select__button.is-error .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control .fd-select__button.is-warning .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-warning .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-warning .fd-select__button.is-active,.fd-select__control .fd-select__button.is-warning .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control .fd-select__button.is-alert .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-alert .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-alert .fd-select__button.is-active,.fd-select__control .fd-select__button.is-alert .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control .fd-select__button.is-information .fd-select__button.is-hover,.fd-select__control .fd-select__button.is-information .fd-select__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control .fd-select__button.is-information .fd-select__button.is-active,.fd-select__control .fd-select__button.is-information .fd-select__button:active{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.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{min-width:calc(5rem - var(--sapField_BorderWidth) * 2);padding-left:.625rem;padding-right:.625rem}.fd-select__control.is-expanded,.fd-select__control[aria-expanded=true]{box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-expanded .fd-select__button,.fd-select__control[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--sapButton_Active_TextColor)}.fd-select__control.is-expanded.is-focus,.fd-select__control.is-expanded:focus,.fd-select__control[aria-expanded=true].is-focus,.fd-select__control[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-expanded.is-hover .fd-select__button,.fd-select__control.is-expanded:hover .fd-select__button,.fd-select__control[aria-expanded=true].is-hover .fd-select__button,.fd-select__control[aria-expanded=true]:hover .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapButton_Selected_Hover_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color_Hover);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--sapButton_Active_TextColor)}.fd-select__control.is-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-expanded .fd-select__button,.fd-select__control.is-success[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Success_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-success.is-expanded.is-focus,.fd-select__control.is-success.is-expanded:focus,.fd-select__control.is-success[aria-expanded=true].is-focus,.fd-select__control.is-success[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-expanded .fd-select__button,.fd-select__control.is-error[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Error_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-error.is-expanded.is-focus,.fd-select__control.is-error.is-expanded:focus,.fd-select__control.is-error[aria-expanded=true].is-focus,.fd-select__control.is-error[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-expanded .fd-select__button,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-warning.is-expanded.is-focus,.fd-select__control.is-warning.is-expanded:focus,.fd-select__control.is-warning[aria-expanded=true].is-focus,.fd-select__control.is-warning[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-expanded .fd-select__button,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-expanded.is-focus,.fd-select__control.is-alert.is-expanded:focus,.fd-select__control.is-alert[aria-expanded=true].is-focus,.fd-select__control.is-alert[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__control.is-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-expanded .fd-select__button,.fd-select__control.is-information[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapButton_Selected_Background);border-left-color:var(--fdSelect_Expanded_Button_Border_Left_Color);box-shadow:var(--fdInput_Information_Box_Shadow_Hover);color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-information.is-expanded.is-focus,.fd-select__control.is-information.is-expanded:focus,.fd-select__control.is-information[aria-expanded=true].is-focus,.fd-select__control.is-information[aria-expanded=true]:focus{box-shadow:none;z-index:5}.fd-select__text-content{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;min-width:calc(2.5rem - var(--sapField_BorderWidth) * 2);overflow:hidden;padding:0 0 0 .625rem;text-overflow:ellipsis;white-space:nowrap}.fd-select__text-content:after,.fd-select__text-content:before{box-sizing:inherit;font-size:inherit}.fd-select__text-content[dir=rtl],[dir=rtl] .fd-select__text-content{padding-left:0;padding-right:.625rem}.fd-select--compact .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select--compact .fd-select__control .fd-select__text-content{min-width:calc(2.75rem - var(--sapField_BorderWidth) * 2);padding-left:.5rem}.fd-select--compact .fd-select__control .fd-select__text-content[dir=rtl],[dir=rtl] .fd-select--compact .fd-select__control .fd-select__text-content{padding-left:0;padding-right:.5rem}.fd-select--compact .fd-select__control.is-readonly .fd-select__text-content,.fd-select--compact .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select--compact .fd-select__control[readonly] .fd-select__text-content{padding-left:.5rem;padding-right:.5rem}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-popover__body>:first-child{border-radius:0}.fd-select__text-content{overflow:hidden;text-overflow:ellipsis;line-height:1rem;display:block}.fd-select-custom-class{display:inline-block;max-width:100%}.fd-popover-custom-select-body{max-width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['tabindex']