@fundamental-ngx/platform 0.57.7 → 0.57.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4194,11 +4194,11 @@ class SelectComponent extends BaseSelect {
|
|
|
4194
4194
|
element.setAttribute('style', 'width: ' + proportion + '%; max-width: ' + proportion + '%');
|
|
4195
4195
|
}
|
|
4196
4196
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4197
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SelectComponent, isStandalone: true, selector: "fdp-select", inputs: { value: "value", inline: "inline" }, providers: [DynamicComponentService, { provide: FD_FORM_FIELD_CONTROL, useExisting: SelectComponent, multi: true }], viewQueries: [{ propertyName: "select", first: true, predicate: SelectComponent$1, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-select\n [placeholder]=\"placeholder\"\n [glyph]=\"glyph\"\n [glyphFont]=\"glyphFont\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [closeOnOutsideClick]=\"closeOnOutsideClick\"\n [controlTemplate]=\"controlTemplate\"\n [appendTo]=\"appendTo\"\n [fillControlMode]=\"fillControlMode\"\n [maxHeight]=\"maxHeight\"\n [attr.aria-disabled]=\"disabled || readonly\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.tooltip]=\"value\"\n [attr.aria-readonly]=\"readonly\"\n [attr.role]=\"'listbox'\"\n [value]=\"value\"\n [state]=\"state\"\n [stateMessage]=\"stateMessage\"\n [advancedStateMessage]=\"advancedStateMessage\"\n [mobile]=\"mobile\"\n [mobileConfig]=\"mobileConfig\"\n [inline]=\"inline\"\n [(ngModel)]=\"value\"\n [tabOutStrategy]=\"tabOutStrategy\"\n (valueChange)=\"_onSelection($event)\"\n (isOpenChange)=\"_onOpenChange($event)\"\n>\n <ng-content></ng-content>\n @if (noValueLabel) {\n <li fd-option [disabled]=\"false\" [value]=\"null\">\n {{ noValueLabel }}\n </li>\n }\n @for (item of _optionItems; track item; let index = $index) {\n <li\n fd-option\n [disabled]=\"!!item.disabled\"\n [value]=\"item.value\"\n [attr.aria-labelledby]=\"ariaLabel\"\n [attr.aria-disabled]=\"disabled\"\n >\n @if (item.icon) {\n <fd-icon [glyph]=\"item.icon\" class=\"fd-template-icon icon-margin\"></fd-icon>\n }\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: item, index: index }\"\n ></ng-template>\n <ng-template\n secondary\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: item }\"\n ></ng-template>\n </li>\n }\n</fd-select>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n @if (_isSelectedOptionItem(optionItem) && !!_selectedItemTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"_selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n @if (!(_isSelectedOptionItem(optionItem) && _selectedItemTemplate)) {\n <ng-template\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n @if (!_optionItemTemplate) {\n <span [innerHTML]=\"optionItem.label\"></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"_optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n @if (showSecondaryText) {\n @if (!_secondaryItemTemplate) {\n <span\n [style.text-align]=\"secondaryTextAlignment\"\n fd-list-secondary\n [innerHTML]=\"optionItem.secondaryText\"\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"_secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-template>\n }\n }\n</ng-template>\n", styles: [".fd-select{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-block:.25rem;margin-inline:0;padding-block:0;padding-inline:0;text-shadow:var(--fdSelect_Text_Shadow)}.fd-select:after,.fd-select:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-select__control{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--fdSelect_Background,var(--sapField_BackgroundStyle));background-color:var(--fdSelect_Background_Color,var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);-webkit-box-shadow:var(--sapField_Shadow);box-shadow:var(--sapField_Shadow);-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdInput_Height,var(--sapElement_Height));line-height:normal;margin-block:var(--fdInput_Field_Margin_Block,.25rem);min-height:var(--fdInput_Height,var(--sapElement_Height));min-width:--fdSelect_Min_Width;outline:none;overflow:hidden;padding-inline:var(--fdInput_Field_Padding_Inline,.625rem);text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.25rem;-webkit-box-pack:justify;-ms-flex-pack:justify;cursor:pointer;justify-content:space-between;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-select__control:after,.fd-select__control:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-select__control::-webkit-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control::-moz-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control:-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control::-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control[dir=rtl]::-webkit-input-placeholder,[dir=rtl] .fd-select__control::-webkit-input-placeholder{text-indent:.125rem}.fd-select__control[dir=rtl]::-moz-placeholder,[dir=rtl] .fd-select__control::-moz-placeholder{text-indent:.125rem}.fd-select__control[dir=rtl]:-ms-input-placeholder,[dir=rtl] .fd-select__control:-ms-input-placeholder{text-indent:.125rem}.fd-select__control[dir=rtl]::-ms-input-placeholder,[dir=rtl] .fd-select__control::-ms-input-placeholder{text-indent:.125rem}.fd-select__control[dir=rtl]::placeholder,[dir=rtl] .fd-select__control::placeholder{text-indent:.125rem}.fd-select__control::-moz-selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.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{background:var(--fdSelect_Hover_Background,var(--sapField_Hover_BackgroundStyle));background-color:var(--fdSelect_Hover_Background_Color,var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-focus,.fd-select__control:focus{background:var(--fdSelect_Focus_Background,var(--sapField_Focus_Background));-webkit-box-shadow:none;box-shadow:none;outline:var(--fdInput_Outline_Color) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdInput_Outline_Offset);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);-webkit-box-shadow:var(--sapField_SuccessShadow);box-shadow:var(--sapField_SuccessShadow)}.fd-select__control.is-success.is-hover,.fd-select__control.is-success:hover{background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-select__control.is-success.is-focus.is-hover,.fd-select__control.is-success.is-focus:hover,.fd-select__control.is-success:focus.is-hover,.fd-select__control.is-success:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Success_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle);-webkit-box-shadow:var(--sapField_InvalidShadow);box-shadow:var(--sapField_InvalidShadow)}.fd-select__control.is-error.is-hover,.fd-select__control.is-error:hover{background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-select__control.is-error.is-focus.is-hover,.fd-select__control.is-error.is-focus:hover,.fd-select__control.is-error:focus.is-hover,.fd-select__control.is-error:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Error_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle);-webkit-box-shadow:var(--sapField_WarningShadow);box-shadow:var(--sapField_WarningShadow)}.fd-select__control.is-warning.is-hover,.fd-select__control.is-warning:hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-select__control.is-warning.is-focus.is-hover,.fd-select__control.is-warning.is-focus:hover,.fd-select__control.is-warning:focus.is-hover,.fd-select__control.is-warning:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-alert.is-hover,.fd-select__control.is-alert:hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-select__control.is-alert.is-focus.is-hover,.fd-select__control.is-alert.is-focus:hover,.fd-select__control.is-alert:focus.is-hover,.fd-select__control.is-alert:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle);-webkit-box-shadow:var(--sapField_InformationShadow);box-shadow:var(--sapField_InformationShadow)}.fd-select__control.is-information.is-hover,.fd-select__control.is-information:hover{background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-select__control.is-information.is-focus.is-hover,.fd-select__control.is-information.is-focus:hover,.fd-select__control.is-information:focus.is-hover,.fd-select__control.is-information:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Information_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-alert,.fd-select__control.is-error,.fd-select__control.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::-webkit-input-placeholder,.fd-select__control.is-error::-webkit-input-placeholder,.fd-select__control.is-warning::-webkit-input-placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::-moz-placeholder,.fd-select__control.is-error::-moz-placeholder,.fd-select__control.is-warning::-moz-placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert:-ms-input-placeholder,.fd-select__control.is-error:-ms-input-placeholder,.fd-select__control.is-warning:-ms-input-placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::-ms-input-placeholder,.fd-select__control.is-error::-ms-input-placeholder,.fd-select__control.is-warning::-ms-input-placeholder{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::-webkit-input-placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-error::-moz-placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-error:-ms-input-placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-error::-ms-input-placeholder{color:var(--sapField_TextColor)}.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::-webkit-input-placeholder,.fd-select__control:disabled::-webkit-input-placeholder,.fd-select__control[aria-disabled=true]::-webkit-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-disabled::-moz-placeholder,.fd-select__control:disabled::-moz-placeholder,.fd-select__control[aria-disabled=true]::-moz-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-disabled:-ms-input-placeholder,.fd-select__control:disabled:-ms-input-placeholder,.fd-select__control[aria-disabled=true]:-ms-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-disabled::-ms-input-placeholder,.fd-select__control:disabled::-ms-input-placeholder,.fd-select__control[aria-disabled=true]::-ms-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-disabled::placeholder,.fd-select__control:disabled::placeholder,.fd-select__control[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{--fdInput_Outline_Offset:-.25rem;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-readonly::-webkit-input-placeholder,.fd-select__control[aria-readonly=true]::-webkit-input-placeholder,.fd-select__control[readonly]::-webkit-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly::-moz-placeholder,.fd-select__control[aria-readonly=true]::-moz-placeholder,.fd-select__control[readonly]::-moz-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly:-ms-input-placeholder,.fd-select__control[aria-readonly=true]:-ms-input-placeholder,.fd-select__control[readonly]:-ms-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly::-ms-input-placeholder,.fd-select__control[aria-readonly=true]::-ms-input-placeholder,.fd-select__control[readonly]::-ms-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly::placeholder,.fd-select__control[aria-readonly=true]::placeholder,.fd-select__control[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly.is-hover,.fd-select__control.is-readonly:hover,.fd-select__control[aria-readonly=true].is-hover,.fd-select__control[aria-readonly=true]:hover,.fd-select__control[readonly].is-hover,.fd-select__control[readonly]:hover{--fdInput_Outline_Offset:-.25rem;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);-webkit-box-shadow:none;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{z-index:5;--fdInput_Outline_Offset:-.25rem;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);-webkit-box-shadow:none;box-shadow:none}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);background-color:var(--fdButtonBackgroundColor);border:none;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button:after{border-radius:var(--fdInput_Outline_Border_Radius)}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{--fdInput_Group_Button_Text_Color:var(--fdInput_Group_Button_Hover_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Hover_Background);-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.fd-select__control .fd-select__button.is-active,.fd-select__control .fd-select__button:active{background:var(--fdInput_Group_Button_Active_Background);-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{z-index:5}.fd-select__control.is-success.is-focus .fd-select__button,.fd-select__control.is-success:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success.is-focus .fd-select__button.is-hover,.fd-select__control.is-success.is-focus .fd-select__button:hover,.fd-select__control.is-success:focus .fd-select__button.is-hover,.fd-select__control.is-success:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success.is-expanded .fd-select__button,.fd-select__control.is-success[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success.is-expanded .fd-select__button.is-hover,.fd-select__control.is-success.is-expanded .fd-select__button:hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button.is-hover,.fd-select__control.is-success .fd-select__button:active,.fd-select__control.is-success .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{z-index:5}.fd-select__control.is-error.is-focus .fd-select__button,.fd-select__control.is-error:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error.is-focus .fd-select__button.is-hover,.fd-select__control.is-error.is-focus .fd-select__button:hover,.fd-select__control.is-error:focus .fd-select__button.is-hover,.fd-select__control.is-error:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error.is-expanded .fd-select__button,.fd-select__control.is-error[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error.is-expanded .fd-select__button.is-hover,.fd-select__control.is-error.is-expanded .fd-select__button:hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button.is-hover,.fd-select__control.is-error .fd-select__button:active,.fd-select__control.is-error .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{z-index:5}.fd-select__control.is-warning.is-focus .fd-select__button,.fd-select__control.is-warning:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning.is-focus .fd-select__button.is-hover,.fd-select__control.is-warning.is-focus .fd-select__button:hover,.fd-select__control.is-warning:focus .fd-select__button.is-hover,.fd-select__control.is-warning:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning.is-expanded .fd-select__button,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning.is-expanded .fd-select__button.is-hover,.fd-select__control.is-warning.is-expanded .fd-select__button:hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button.is-hover,.fd-select__control.is-warning .fd-select__button:active,.fd-select__control.is-warning .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{z-index:5}.fd-select__control.is-alert.is-focus .fd-select__button,.fd-select__control.is-alert:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert.is-focus .fd-select__button.is-hover,.fd-select__control.is-alert.is-focus .fd-select__button:hover,.fd-select__control.is-alert:focus .fd-select__button.is-hover,.fd-select__control.is-alert:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert.is-expanded .fd-select__button,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert.is-expanded .fd-select__button.is-hover,.fd-select__control.is-alert.is-expanded .fd-select__button:hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button.is-hover,.fd-select__control.is-alert .fd-select__button:active,.fd-select__control.is-alert .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{z-index:5}.fd-select__control.is-information.is-focus .fd-select__button,.fd-select__control.is-information:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information.is-focus .fd-select__button.is-hover,.fd-select__control.is-information.is-focus .fd-select__button:hover,.fd-select__control.is-information:focus .fd-select__button.is-hover,.fd-select__control.is-information:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information.is-expanded .fd-select__button,.fd-select__control.is-information[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information.is-expanded .fd-select__button.is-hover,.fd-select__control.is-information.is-expanded .fd-select__button:hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button.is-hover,.fd-select__control.is-information .fd-select__button:active,.fd-select__control.is-information .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{pointer-events:none}.fd-select__control:after{border-radius:var(--sapField_BorderCornerRadius);-webkit-box-shadow:var(--sapField_Shadow);box-shadow:var(--sapField_Shadow);content:\"\";inset:0;pointer-events:none;position:absolute}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{cursor:text}.fd-select__control.is-readonly .fd-select__text-content,.fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select__control[readonly] .fd-select__text-content{--fdSelect_Min_Width:5rem;padding-inline:.625rem}.fd-select__control.is-readonly[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-readonly=true][aria-selected=false] .fd-select__text-content,.fd-select__control[readonly][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control.is-readonly .fd-select__button,.fd-select__control[aria-readonly=true] .fd-select__button,.fd-select__control[readonly] .fd-select__button{opacity:0}.fd-select__control.is-disabled[aria-selected=false] .fd-select__text-content,.fd-select__control:disabled[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-disabled=true][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control[aria-selected=false] .fd-select__text-content{padding-block:0;padding-inline:.625rem}.fd-select__control[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-selected=false] .fd-select__text-content [class*=sap-icon]{color:var(--sapField_PlaceholderTextColor);font-style:italic;font-weight:400}.fd-select__text-content{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;min-width:calc(var(--fdSelect_Min_Width) - var(--sapField_BorderWidth)*2);overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;white-space:nowrap;--fdSelect_Min_Width:2.5rem;-webkit-padding-start:.625rem;color:var(--fdSelect_Text_Content_Color,var(--sapTextColor));cursor:pointer;display:var(--fdSelect_Text_Content_Display,inline-block);padding-inline-start:.625rem}.fd-select__text-content:after,.fd-select__text-content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-select[class*=-compact],.fd-select[class*=-condensed],[class*=-compact] .fd-select:not([class*=-cozy]),[class*=-condensed] .fd-select:not([class*=-cozy]){margin-block:.1875rem;margin-inline:0}.fd-select[class*=-compact] .fd-select__control,.fd-select[class*=-condensed] .fd-select__control,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{--fdSelect_Min_Width:2.75rem;-webkit-padding-start:.5rem;padding-inline-start:.5rem}.fd-select[class*=-compact] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[readonly] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[readonly] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content{padding-inline:.5rem}@media (min-width: 600px){[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--10{text-align:right!important}}\n/*! Bundled license information:\n\nfundamental-styles/dist/select.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "ngmodule", type: SelectModule }, { kind: "component", type: i1$3.SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "textOverflow", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "glyphFont", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i1$3.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4197
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SelectComponent, isStandalone: true, selector: "fdp-select", inputs: { value: "value", inline: "inline" }, providers: [DynamicComponentService, { provide: FD_FORM_FIELD_CONTROL, useExisting: SelectComponent, multi: true }], viewQueries: [{ propertyName: "select", first: true, predicate: SelectComponent$1, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-select\n [placeholder]=\"placeholder\"\n [glyph]=\"glyph\"\n [glyphFont]=\"glyphFont\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [closeOnOutsideClick]=\"closeOnOutsideClick\"\n [controlTemplate]=\"controlTemplate\"\n [appendTo]=\"appendTo\"\n [fillControlMode]=\"fillControlMode\"\n [maxHeight]=\"maxHeight\"\n [attr.aria-disabled]=\"disabled || readonly\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.tooltip]=\"value\"\n [attr.aria-readonly]=\"readonly\"\n [attr.role]=\"'listbox'\"\n [value]=\"value\"\n [state]=\"state\"\n [stateMessage]=\"stateMessage\"\n [advancedStateMessage]=\"advancedStateMessage\"\n [mobile]=\"mobile\"\n [mobileConfig]=\"mobileConfig\"\n [inline]=\"inline\"\n [(ngModel)]=\"value\"\n [tabOutStrategy]=\"tabOutStrategy\"\n (valueChange)=\"_onSelection($event)\"\n (isOpenChange)=\"_onOpenChange($event)\"\n>\n <ng-content></ng-content>\n @if (noValueLabel) {\n <li fd-option [disabled]=\"false\" [value]=\"null\">\n {{ noValueLabel }}\n </li>\n }\n @for (item of _optionItems; track item; let index = $index) {\n <li\n fd-option\n [disabled]=\"!!item.disabled\"\n [value]=\"item.value\"\n [attr.aria-labelledby]=\"ariaLabel\"\n [attr.aria-disabled]=\"disabled\"\n >\n @if (item.icon) {\n <fd-icon [glyph]=\"item.icon\" class=\"fd-template-icon icon-margin\"></fd-icon>\n }\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: item, index: index }\"\n ></ng-template>\n <ng-template\n secondary\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: item }\"\n ></ng-template>\n </li>\n }\n</fd-select>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n @if (_isSelectedOptionItem(optionItem) && !!_selectedItemTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"_selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n @if (!(_isSelectedOptionItem(optionItem) && _selectedItemTemplate)) {\n <ng-template\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n @if (!_optionItemTemplate) {\n <span [innerHTML]=\"optionItem.label\"></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"_optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n @if (showSecondaryText) {\n @if (!_secondaryItemTemplate) {\n <span\n [style.text-align]=\"secondaryTextAlignment\"\n fd-list-secondary\n [innerHTML]=\"optionItem.secondaryText\"\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"_secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-template>\n }\n }\n</ng-template>\n", styles: [".fd-select{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-block:.25rem;margin-inline:0;padding-block:0;padding-inline:0;text-shadow:var(--fdSelect_Text_Shadow)}.fd-select:after,.fd-select:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-select__control{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--fdSelect_Background,var(--sapField_BackgroundStyle));background-color:var(--fdSelect_Background_Color,var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);-webkit-box-shadow:var(--sapField_Shadow);box-shadow:var(--sapField_Shadow);-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdInput_Height,var(--sapElement_Height));line-height:normal;margin-block:var(--fdInput_Field_Margin_Block,.25rem);min-height:var(--fdInput_Height,var(--sapElement_Height));min-width:--fdSelect_Min_Width;outline:none;overflow:hidden;padding-inline:var(--fdInput_Field_Padding_Inline,.625rem);text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.25rem;-webkit-box-pack:justify;-ms-flex-pack:justify;cursor:pointer;justify-content:space-between;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-select__control:after,.fd-select__control:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-select__control::-webkit-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control::-moz-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control:-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control::-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control[dir=rtl]::-webkit-input-placeholder,[dir=rtl] .fd-select__control::-webkit-input-placeholder{text-indent:.125rem}.fd-select__control[dir=rtl]::-moz-placeholder,[dir=rtl] .fd-select__control::-moz-placeholder{text-indent:.125rem}.fd-select__control[dir=rtl]:-ms-input-placeholder,[dir=rtl] .fd-select__control:-ms-input-placeholder{text-indent:.125rem}.fd-select__control[dir=rtl]::-ms-input-placeholder,[dir=rtl] .fd-select__control::-ms-input-placeholder{text-indent:.125rem}.fd-select__control[dir=rtl]::placeholder,[dir=rtl] .fd-select__control::placeholder{text-indent:.125rem}.fd-select__control::-moz-selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.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{background:var(--fdSelect_Hover_Background,var(--sapField_Hover_BackgroundStyle));background-color:var(--fdSelect_Hover_Background_Color,var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-focus,.fd-select__control:focus{background:var(--fdSelect_Focus_Background,var(--sapField_Focus_Background));-webkit-box-shadow:none;box-shadow:none;outline:var(--fdInput_Outline_Color) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdInput_Outline_Offset);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);-webkit-box-shadow:var(--sapField_SuccessShadow);box-shadow:var(--sapField_SuccessShadow)}.fd-select__control.is-success.is-hover,.fd-select__control.is-success:hover{background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-select__control.is-success.is-focus.is-hover,.fd-select__control.is-success.is-focus:hover,.fd-select__control.is-success:focus.is-hover,.fd-select__control.is-success:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Success_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle);-webkit-box-shadow:var(--sapField_InvalidShadow);box-shadow:var(--sapField_InvalidShadow)}.fd-select__control.is-error.is-hover,.fd-select__control.is-error:hover{background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-select__control.is-error.is-focus.is-hover,.fd-select__control.is-error.is-focus:hover,.fd-select__control.is-error:focus.is-hover,.fd-select__control.is-error:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Error_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle);-webkit-box-shadow:var(--sapField_WarningShadow);box-shadow:var(--sapField_WarningShadow)}.fd-select__control.is-warning.is-hover,.fd-select__control.is-warning:hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-select__control.is-warning.is-focus.is-hover,.fd-select__control.is-warning.is-focus:hover,.fd-select__control.is-warning:focus.is-hover,.fd-select__control.is-warning:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-alert.is-hover,.fd-select__control.is-alert:hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-select__control.is-alert.is-focus.is-hover,.fd-select__control.is-alert.is-focus:hover,.fd-select__control.is-alert:focus.is-hover,.fd-select__control.is-alert:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle);-webkit-box-shadow:var(--sapField_InformationShadow);box-shadow:var(--sapField_InformationShadow)}.fd-select__control.is-information.is-hover,.fd-select__control.is-information:hover{background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-select__control.is-information.is-focus.is-hover,.fd-select__control.is-information.is-focus:hover,.fd-select__control.is-information:focus.is-hover,.fd-select__control.is-information:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Information_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-alert,.fd-select__control.is-error,.fd-select__control.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::-webkit-input-placeholder,.fd-select__control.is-error::-webkit-input-placeholder,.fd-select__control.is-warning::-webkit-input-placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::-moz-placeholder,.fd-select__control.is-error::-moz-placeholder,.fd-select__control.is-warning::-moz-placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert:-ms-input-placeholder,.fd-select__control.is-error:-ms-input-placeholder,.fd-select__control.is-warning:-ms-input-placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::-ms-input-placeholder,.fd-select__control.is-error::-ms-input-placeholder,.fd-select__control.is-warning::-ms-input-placeholder{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::-webkit-input-placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-error::-moz-placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-error:-ms-input-placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-error::-ms-input-placeholder{color:var(--sapField_TextColor)}.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::-webkit-input-placeholder,.fd-select__control:disabled::-webkit-input-placeholder,.fd-select__control[aria-disabled=true]::-webkit-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-disabled::-moz-placeholder,.fd-select__control:disabled::-moz-placeholder,.fd-select__control[aria-disabled=true]::-moz-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-disabled:-ms-input-placeholder,.fd-select__control:disabled:-ms-input-placeholder,.fd-select__control[aria-disabled=true]:-ms-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-disabled::-ms-input-placeholder,.fd-select__control:disabled::-ms-input-placeholder,.fd-select__control[aria-disabled=true]::-ms-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-disabled::placeholder,.fd-select__control:disabled::placeholder,.fd-select__control[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{--fdInput_Outline_Offset:-.25rem;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-readonly::-webkit-input-placeholder,.fd-select__control[aria-readonly=true]::-webkit-input-placeholder,.fd-select__control[readonly]::-webkit-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly::-moz-placeholder,.fd-select__control[aria-readonly=true]::-moz-placeholder,.fd-select__control[readonly]::-moz-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly:-ms-input-placeholder,.fd-select__control[aria-readonly=true]:-ms-input-placeholder,.fd-select__control[readonly]:-ms-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly::-ms-input-placeholder,.fd-select__control[aria-readonly=true]::-ms-input-placeholder,.fd-select__control[readonly]::-ms-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly::placeholder,.fd-select__control[aria-readonly=true]::placeholder,.fd-select__control[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly.is-hover,.fd-select__control.is-readonly:hover,.fd-select__control[aria-readonly=true].is-hover,.fd-select__control[aria-readonly=true]:hover,.fd-select__control[readonly].is-hover,.fd-select__control[readonly]:hover{--fdInput_Outline_Offset:-.25rem;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);-webkit-box-shadow:none;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{z-index:5;--fdInput_Outline_Offset:-.25rem;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);-webkit-box-shadow:none;box-shadow:none}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);background-color:var(--fdButtonBackgroundColor);border:none;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button:after{border-radius:var(--fdInput_Outline_Border_Radius)}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{--fdInput_Group_Button_Text_Color:var(--fdInput_Group_Button_Hover_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Hover_Background);-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.fd-select__control .fd-select__button.is-active,.fd-select__control .fd-select__button:active{background:var(--fdInput_Group_Button_Active_Background);-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{z-index:5}.fd-select__control.is-success.is-focus .fd-select__button,.fd-select__control.is-success:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success.is-focus .fd-select__button.is-hover,.fd-select__control.is-success.is-focus .fd-select__button:hover,.fd-select__control.is-success:focus .fd-select__button.is-hover,.fd-select__control.is-success:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success.is-expanded .fd-select__button,.fd-select__control.is-success[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success.is-expanded .fd-select__button.is-hover,.fd-select__control.is-success.is-expanded .fd-select__button:hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button.is-hover,.fd-select__control.is-success .fd-select__button:active,.fd-select__control.is-success .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{z-index:5}.fd-select__control.is-error.is-focus .fd-select__button,.fd-select__control.is-error:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error.is-focus .fd-select__button.is-hover,.fd-select__control.is-error.is-focus .fd-select__button:hover,.fd-select__control.is-error:focus .fd-select__button.is-hover,.fd-select__control.is-error:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error.is-expanded .fd-select__button,.fd-select__control.is-error[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error.is-expanded .fd-select__button.is-hover,.fd-select__control.is-error.is-expanded .fd-select__button:hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button.is-hover,.fd-select__control.is-error .fd-select__button:active,.fd-select__control.is-error .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{z-index:5}.fd-select__control.is-warning.is-focus .fd-select__button,.fd-select__control.is-warning:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning.is-focus .fd-select__button.is-hover,.fd-select__control.is-warning.is-focus .fd-select__button:hover,.fd-select__control.is-warning:focus .fd-select__button.is-hover,.fd-select__control.is-warning:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning.is-expanded .fd-select__button,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning.is-expanded .fd-select__button.is-hover,.fd-select__control.is-warning.is-expanded .fd-select__button:hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button.is-hover,.fd-select__control.is-warning .fd-select__button:active,.fd-select__control.is-warning .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{z-index:5}.fd-select__control.is-alert.is-focus .fd-select__button,.fd-select__control.is-alert:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert.is-focus .fd-select__button.is-hover,.fd-select__control.is-alert.is-focus .fd-select__button:hover,.fd-select__control.is-alert:focus .fd-select__button.is-hover,.fd-select__control.is-alert:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert.is-expanded .fd-select__button,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert.is-expanded .fd-select__button.is-hover,.fd-select__control.is-alert.is-expanded .fd-select__button:hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button.is-hover,.fd-select__control.is-alert .fd-select__button:active,.fd-select__control.is-alert .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{z-index:5}.fd-select__control.is-information.is-focus .fd-select__button,.fd-select__control.is-information:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information.is-focus .fd-select__button.is-hover,.fd-select__control.is-information.is-focus .fd-select__button:hover,.fd-select__control.is-information:focus .fd-select__button.is-hover,.fd-select__control.is-information:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information.is-expanded .fd-select__button,.fd-select__control.is-information[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information.is-expanded .fd-select__button.is-hover,.fd-select__control.is-information.is-expanded .fd-select__button:hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button.is-hover,.fd-select__control.is-information .fd-select__button:active,.fd-select__control.is-information .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{pointer-events:none}.fd-select__control:after{border-radius:var(--sapField_BorderCornerRadius);-webkit-box-shadow:var(--sapField_Shadow);box-shadow:var(--sapField_Shadow);content:\"\";inset:0;pointer-events:none;position:absolute}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{cursor:text}.fd-select__control.is-readonly .fd-select__text-content,.fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select__control[readonly] .fd-select__text-content{--fdSelect_Min_Width:5rem;padding-inline:.625rem}.fd-select__control.is-readonly[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-readonly=true][aria-selected=false] .fd-select__text-content,.fd-select__control[readonly][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control.is-readonly .fd-select__button,.fd-select__control[aria-readonly=true] .fd-select__button,.fd-select__control[readonly] .fd-select__button{opacity:0}.fd-select__control.is-disabled[aria-selected=false] .fd-select__text-content,.fd-select__control:disabled[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-disabled=true][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control[aria-selected=false] .fd-select__text-content{padding-block:0;padding-inline:.625rem}.fd-select__control[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-selected=false] .fd-select__text-content [class*=sap-icon]{color:var(--sapField_PlaceholderTextColor);font-style:italic;font-weight:400}.fd-select__text-content{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;min-width:calc(var(--fdSelect_Min_Width) - var(--sapField_BorderWidth)*2);overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;white-space:nowrap;--fdSelect_Min_Width:2.5rem;-webkit-padding-start:.625rem;color:var(--fdSelect_Text_Content_Color,var(--sapTextColor));cursor:pointer;display:var(--fdSelect_Text_Content_Display,inline-block);padding-inline-start:.625rem}.fd-select__text-content:after,.fd-select__text-content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-select[class*=-compact],.fd-select[class*=-condensed],[class*=-compact] .fd-select:not([class*=-cozy]),[class*=-condensed] .fd-select:not([class*=-cozy]){margin-block:.1875rem;margin-inline:0}.fd-select[class*=-compact] .fd-select__control,.fd-select[class*=-condensed] .fd-select__control,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{--fdSelect_Min_Width:2.75rem;-webkit-padding-start:.5rem;padding-inline-start:.5rem}.fd-select[class*=-compact] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[readonly] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[readonly] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content{padding-inline:.5rem}@media (min-width: 600px){[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--10{text-align:right!important}}\n/*! Bundled license information:\n\nfundamental-styles/dist/select.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"], dependencies: [{ kind: "ngmodule", type: SelectModule }, { kind: "component", type: i1$3.SelectComponent, selector: "fd-select", inputs: ["extendedBodyTemplate", "scrollStrategy", "textOverflow", "controlId", "state", "mobile", "stateMessage", "disabled", "required", "readonly", "placeholder", "value", "maxHeight", "glyph", "glyphFont", "closeOnOutsideClick", "fillControlMode", "controlTemplate", "appendTo", "unselectMissingOption", "typeaheadDebounceInterval", "ariaLabelledBy", "ariaLabel", "mobileConfig", "inline", "selectControlClass", "selectDropdownButtonClass", "advancedStateMessage", "tabOutStrategy", "compareWith"], outputs: ["isOpenChange", "valueChange"] }, { kind: "component", type: i1$3.OptionComponent, selector: "[fd-option], fd-option", inputs: ["id", "value", "disabled"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4198
4198
|
}
|
|
4199
4199
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectComponent, decorators: [{
|
|
4200
4200
|
type: Component,
|
|
4201
|
-
args: [{ selector: 'fdp-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [DynamicComponentService, { provide: FD_FORM_FIELD_CONTROL, useExisting: SelectComponent, multi: true }], imports: [SelectModule, FormsModule, IconComponent, NgTemplateOutlet, NgClass, ListSecondaryDirective], template: "<fd-select\n [placeholder]=\"placeholder\"\n [glyph]=\"glyph\"\n [glyphFont]=\"glyphFont\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [closeOnOutsideClick]=\"closeOnOutsideClick\"\n [controlTemplate]=\"controlTemplate\"\n [appendTo]=\"appendTo\"\n [fillControlMode]=\"fillControlMode\"\n [maxHeight]=\"maxHeight\"\n [attr.aria-disabled]=\"disabled || readonly\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.tooltip]=\"value\"\n [attr.aria-readonly]=\"readonly\"\n [attr.role]=\"'listbox'\"\n [value]=\"value\"\n [state]=\"state\"\n [stateMessage]=\"stateMessage\"\n [advancedStateMessage]=\"advancedStateMessage\"\n [mobile]=\"mobile\"\n [mobileConfig]=\"mobileConfig\"\n [inline]=\"inline\"\n [(ngModel)]=\"value\"\n [tabOutStrategy]=\"tabOutStrategy\"\n (valueChange)=\"_onSelection($event)\"\n (isOpenChange)=\"_onOpenChange($event)\"\n>\n <ng-content></ng-content>\n @if (noValueLabel) {\n <li fd-option [disabled]=\"false\" [value]=\"null\">\n {{ noValueLabel }}\n </li>\n }\n @for (item of _optionItems; track item; let index = $index) {\n <li\n fd-option\n [disabled]=\"!!item.disabled\"\n [value]=\"item.value\"\n [attr.aria-labelledby]=\"ariaLabel\"\n [attr.aria-disabled]=\"disabled\"\n >\n @if (item.icon) {\n <fd-icon [glyph]=\"item.icon\" class=\"fd-template-icon icon-margin\"></fd-icon>\n }\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: item, index: index }\"\n ></ng-template>\n <ng-template\n secondary\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: item }\"\n ></ng-template>\n </li>\n }\n</fd-select>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n @if (_isSelectedOptionItem(optionItem) && !!_selectedItemTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"_selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n @if (!(_isSelectedOptionItem(optionItem) && _selectedItemTemplate)) {\n <ng-template\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n @if (!_optionItemTemplate) {\n <span [innerHTML]=\"optionItem.label\"></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"_optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n @if (showSecondaryText) {\n @if (!_secondaryItemTemplate) {\n <span\n [style.text-align]=\"secondaryTextAlignment\"\n fd-list-secondary\n [innerHTML]=\"optionItem.secondaryText\"\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"_secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-template>\n }\n }\n</ng-template>\n", styles: [".fd-select{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-block:.25rem;margin-inline:0;padding-block:0;padding-inline:0;text-shadow:var(--fdSelect_Text_Shadow)}.fd-select:after,.fd-select:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-select__control{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--fdSelect_Background,var(--sapField_BackgroundStyle));background-color:var(--fdSelect_Background_Color,var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);-webkit-box-shadow:var(--sapField_Shadow);box-shadow:var(--sapField_Shadow);-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdInput_Height,var(--sapElement_Height));line-height:normal;margin-block:var(--fdInput_Field_Margin_Block,.25rem);min-height:var(--fdInput_Height,var(--sapElement_Height));min-width:--fdSelect_Min_Width;outline:none;overflow:hidden;padding-inline:var(--fdInput_Field_Padding_Inline,.625rem);text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.25rem;-webkit-box-pack:justify;-ms-flex-pack:justify;cursor:pointer;justify-content:space-between;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-select__control:after,.fd-select__control:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-select__control::-webkit-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control::-moz-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control:-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control::-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control[dir=rtl]::-webkit-input-placeholder,[dir=rtl] .fd-select__control::-webkit-input-placeholder{text-indent:.125rem}.fd-select__control[dir=rtl]::-moz-placeholder,[dir=rtl] .fd-select__control::-moz-placeholder{text-indent:.125rem}.fd-select__control[dir=rtl]:-ms-input-placeholder,[dir=rtl] .fd-select__control:-ms-input-placeholder{text-indent:.125rem}.fd-select__control[dir=rtl]::-ms-input-placeholder,[dir=rtl] .fd-select__control::-ms-input-placeholder{text-indent:.125rem}.fd-select__control[dir=rtl]::placeholder,[dir=rtl] .fd-select__control::placeholder{text-indent:.125rem}.fd-select__control::-moz-selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.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{background:var(--fdSelect_Hover_Background,var(--sapField_Hover_BackgroundStyle));background-color:var(--fdSelect_Hover_Background_Color,var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-focus,.fd-select__control:focus{background:var(--fdSelect_Focus_Background,var(--sapField_Focus_Background));-webkit-box-shadow:none;box-shadow:none;outline:var(--fdInput_Outline_Color) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdInput_Outline_Offset);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);-webkit-box-shadow:var(--sapField_SuccessShadow);box-shadow:var(--sapField_SuccessShadow)}.fd-select__control.is-success.is-hover,.fd-select__control.is-success:hover{background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-select__control.is-success.is-focus.is-hover,.fd-select__control.is-success.is-focus:hover,.fd-select__control.is-success:focus.is-hover,.fd-select__control.is-success:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Success_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle);-webkit-box-shadow:var(--sapField_InvalidShadow);box-shadow:var(--sapField_InvalidShadow)}.fd-select__control.is-error.is-hover,.fd-select__control.is-error:hover{background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-select__control.is-error.is-focus.is-hover,.fd-select__control.is-error.is-focus:hover,.fd-select__control.is-error:focus.is-hover,.fd-select__control.is-error:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Error_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle);-webkit-box-shadow:var(--sapField_WarningShadow);box-shadow:var(--sapField_WarningShadow)}.fd-select__control.is-warning.is-hover,.fd-select__control.is-warning:hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-select__control.is-warning.is-focus.is-hover,.fd-select__control.is-warning.is-focus:hover,.fd-select__control.is-warning:focus.is-hover,.fd-select__control.is-warning:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-alert.is-hover,.fd-select__control.is-alert:hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-select__control.is-alert.is-focus.is-hover,.fd-select__control.is-alert.is-focus:hover,.fd-select__control.is-alert:focus.is-hover,.fd-select__control.is-alert:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle);-webkit-box-shadow:var(--sapField_InformationShadow);box-shadow:var(--sapField_InformationShadow)}.fd-select__control.is-information.is-hover,.fd-select__control.is-information:hover{background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-select__control.is-information.is-focus.is-hover,.fd-select__control.is-information.is-focus:hover,.fd-select__control.is-information:focus.is-hover,.fd-select__control.is-information:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Information_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-alert,.fd-select__control.is-error,.fd-select__control.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::-webkit-input-placeholder,.fd-select__control.is-error::-webkit-input-placeholder,.fd-select__control.is-warning::-webkit-input-placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::-moz-placeholder,.fd-select__control.is-error::-moz-placeholder,.fd-select__control.is-warning::-moz-placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert:-ms-input-placeholder,.fd-select__control.is-error:-ms-input-placeholder,.fd-select__control.is-warning:-ms-input-placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::-ms-input-placeholder,.fd-select__control.is-error::-ms-input-placeholder,.fd-select__control.is-warning::-ms-input-placeholder{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::-webkit-input-placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-error::-moz-placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-error:-ms-input-placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-error::-ms-input-placeholder{color:var(--sapField_TextColor)}.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::-webkit-input-placeholder,.fd-select__control:disabled::-webkit-input-placeholder,.fd-select__control[aria-disabled=true]::-webkit-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-disabled::-moz-placeholder,.fd-select__control:disabled::-moz-placeholder,.fd-select__control[aria-disabled=true]::-moz-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-disabled:-ms-input-placeholder,.fd-select__control:disabled:-ms-input-placeholder,.fd-select__control[aria-disabled=true]:-ms-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-disabled::-ms-input-placeholder,.fd-select__control:disabled::-ms-input-placeholder,.fd-select__control[aria-disabled=true]::-ms-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-disabled::placeholder,.fd-select__control:disabled::placeholder,.fd-select__control[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{--fdInput_Outline_Offset:-.25rem;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-readonly::-webkit-input-placeholder,.fd-select__control[aria-readonly=true]::-webkit-input-placeholder,.fd-select__control[readonly]::-webkit-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly::-moz-placeholder,.fd-select__control[aria-readonly=true]::-moz-placeholder,.fd-select__control[readonly]::-moz-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly:-ms-input-placeholder,.fd-select__control[aria-readonly=true]:-ms-input-placeholder,.fd-select__control[readonly]:-ms-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly::-ms-input-placeholder,.fd-select__control[aria-readonly=true]::-ms-input-placeholder,.fd-select__control[readonly]::-ms-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly::placeholder,.fd-select__control[aria-readonly=true]::placeholder,.fd-select__control[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly.is-hover,.fd-select__control.is-readonly:hover,.fd-select__control[aria-readonly=true].is-hover,.fd-select__control[aria-readonly=true]:hover,.fd-select__control[readonly].is-hover,.fd-select__control[readonly]:hover{--fdInput_Outline_Offset:-.25rem;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);-webkit-box-shadow:none;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{z-index:5;--fdInput_Outline_Offset:-.25rem;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);-webkit-box-shadow:none;box-shadow:none}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);background-color:var(--fdButtonBackgroundColor);border:none;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button:after{border-radius:var(--fdInput_Outline_Border_Radius)}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{--fdInput_Group_Button_Text_Color:var(--fdInput_Group_Button_Hover_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Hover_Background);-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.fd-select__control .fd-select__button.is-active,.fd-select__control .fd-select__button:active{background:var(--fdInput_Group_Button_Active_Background);-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{z-index:5}.fd-select__control.is-success.is-focus .fd-select__button,.fd-select__control.is-success:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success.is-focus .fd-select__button.is-hover,.fd-select__control.is-success.is-focus .fd-select__button:hover,.fd-select__control.is-success:focus .fd-select__button.is-hover,.fd-select__control.is-success:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success.is-expanded .fd-select__button,.fd-select__control.is-success[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success.is-expanded .fd-select__button.is-hover,.fd-select__control.is-success.is-expanded .fd-select__button:hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button.is-hover,.fd-select__control.is-success .fd-select__button:active,.fd-select__control.is-success .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{z-index:5}.fd-select__control.is-error.is-focus .fd-select__button,.fd-select__control.is-error:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error.is-focus .fd-select__button.is-hover,.fd-select__control.is-error.is-focus .fd-select__button:hover,.fd-select__control.is-error:focus .fd-select__button.is-hover,.fd-select__control.is-error:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error.is-expanded .fd-select__button,.fd-select__control.is-error[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error.is-expanded .fd-select__button.is-hover,.fd-select__control.is-error.is-expanded .fd-select__button:hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button.is-hover,.fd-select__control.is-error .fd-select__button:active,.fd-select__control.is-error .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{z-index:5}.fd-select__control.is-warning.is-focus .fd-select__button,.fd-select__control.is-warning:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning.is-focus .fd-select__button.is-hover,.fd-select__control.is-warning.is-focus .fd-select__button:hover,.fd-select__control.is-warning:focus .fd-select__button.is-hover,.fd-select__control.is-warning:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning.is-expanded .fd-select__button,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning.is-expanded .fd-select__button.is-hover,.fd-select__control.is-warning.is-expanded .fd-select__button:hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button.is-hover,.fd-select__control.is-warning .fd-select__button:active,.fd-select__control.is-warning .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{z-index:5}.fd-select__control.is-alert.is-focus .fd-select__button,.fd-select__control.is-alert:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert.is-focus .fd-select__button.is-hover,.fd-select__control.is-alert.is-focus .fd-select__button:hover,.fd-select__control.is-alert:focus .fd-select__button.is-hover,.fd-select__control.is-alert:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert.is-expanded .fd-select__button,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert.is-expanded .fd-select__button.is-hover,.fd-select__control.is-alert.is-expanded .fd-select__button:hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button.is-hover,.fd-select__control.is-alert .fd-select__button:active,.fd-select__control.is-alert .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{z-index:5}.fd-select__control.is-information.is-focus .fd-select__button,.fd-select__control.is-information:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information.is-focus .fd-select__button.is-hover,.fd-select__control.is-information.is-focus .fd-select__button:hover,.fd-select__control.is-information:focus .fd-select__button.is-hover,.fd-select__control.is-information:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information.is-expanded .fd-select__button,.fd-select__control.is-information[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information.is-expanded .fd-select__button.is-hover,.fd-select__control.is-information.is-expanded .fd-select__button:hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button.is-hover,.fd-select__control.is-information .fd-select__button:active,.fd-select__control.is-information .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{pointer-events:none}.fd-select__control:after{border-radius:var(--sapField_BorderCornerRadius);-webkit-box-shadow:var(--sapField_Shadow);box-shadow:var(--sapField_Shadow);content:\"\";inset:0;pointer-events:none;position:absolute}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{cursor:text}.fd-select__control.is-readonly .fd-select__text-content,.fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select__control[readonly] .fd-select__text-content{--fdSelect_Min_Width:5rem;padding-inline:.625rem}.fd-select__control.is-readonly[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-readonly=true][aria-selected=false] .fd-select__text-content,.fd-select__control[readonly][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control.is-readonly .fd-select__button,.fd-select__control[aria-readonly=true] .fd-select__button,.fd-select__control[readonly] .fd-select__button{opacity:0}.fd-select__control.is-disabled[aria-selected=false] .fd-select__text-content,.fd-select__control:disabled[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-disabled=true][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control[aria-selected=false] .fd-select__text-content{padding-block:0;padding-inline:.625rem}.fd-select__control[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-selected=false] .fd-select__text-content [class*=sap-icon]{color:var(--sapField_PlaceholderTextColor);font-style:italic;font-weight:400}.fd-select__text-content{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;min-width:calc(var(--fdSelect_Min_Width) - var(--sapField_BorderWidth)*2);overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;white-space:nowrap;--fdSelect_Min_Width:2.5rem;-webkit-padding-start:.625rem;color:var(--fdSelect_Text_Content_Color,var(--sapTextColor));cursor:pointer;display:var(--fdSelect_Text_Content_Display,inline-block);padding-inline-start:.625rem}.fd-select__text-content:after,.fd-select__text-content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-select[class*=-compact],.fd-select[class*=-condensed],[class*=-compact] .fd-select:not([class*=-cozy]),[class*=-condensed] .fd-select:not([class*=-cozy]){margin-block:.1875rem;margin-inline:0}.fd-select[class*=-compact] .fd-select__control,.fd-select[class*=-condensed] .fd-select__control,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{--fdSelect_Min_Width:2.75rem;-webkit-padding-start:.5rem;padding-inline-start:.5rem}.fd-select[class*=-compact] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[readonly] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[readonly] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content{padding-inline:.5rem}@media (min-width: 600px){[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--10{text-align:right!important}}\n/*! Bundled license information:\n\nfundamental-styles/dist/select.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"] }]
|
|
4201
|
+
args: [{ selector: 'fdp-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [DynamicComponentService, { provide: FD_FORM_FIELD_CONTROL, useExisting: SelectComponent, multi: true }], imports: [SelectModule, FormsModule, IconComponent, NgTemplateOutlet, NgClass, ListSecondaryDirective], template: "<fd-select\n [placeholder]=\"placeholder\"\n [glyph]=\"glyph\"\n [glyphFont]=\"glyphFont\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [closeOnOutsideClick]=\"closeOnOutsideClick\"\n [controlTemplate]=\"controlTemplate\"\n [appendTo]=\"appendTo\"\n [fillControlMode]=\"fillControlMode\"\n [maxHeight]=\"maxHeight\"\n [attr.aria-disabled]=\"disabled || readonly\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.tooltip]=\"value\"\n [attr.aria-readonly]=\"readonly\"\n [attr.role]=\"'listbox'\"\n [value]=\"value\"\n [state]=\"state\"\n [stateMessage]=\"stateMessage\"\n [advancedStateMessage]=\"advancedStateMessage\"\n [mobile]=\"mobile\"\n [mobileConfig]=\"mobileConfig\"\n [inline]=\"inline\"\n [(ngModel)]=\"value\"\n [tabOutStrategy]=\"tabOutStrategy\"\n (valueChange)=\"_onSelection($event)\"\n (isOpenChange)=\"_onOpenChange($event)\"\n>\n <ng-content></ng-content>\n @if (noValueLabel) {\n <li fd-option [disabled]=\"false\" [value]=\"null\">\n {{ noValueLabel }}\n </li>\n }\n @for (item of _optionItems; track item; let index = $index) {\n <li\n fd-option\n [disabled]=\"!!item.disabled\"\n [value]=\"item.value\"\n [attr.aria-labelledby]=\"ariaLabel\"\n [attr.aria-disabled]=\"disabled\"\n >\n @if (item.icon) {\n <fd-icon [glyph]=\"item.icon\" class=\"fd-template-icon icon-margin\"></fd-icon>\n }\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: item, index: index }\"\n ></ng-template>\n <ng-template\n secondary\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: item }\"\n ></ng-template>\n </li>\n }\n</fd-select>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n @if (_isSelectedOptionItem(optionItem) && !!_selectedItemTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"_selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n @if (!(_isSelectedOptionItem(optionItem) && _selectedItemTemplate)) {\n <ng-template\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n @if (!_optionItemTemplate) {\n <span [innerHTML]=\"optionItem.label\"></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"_optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n @if (showSecondaryText) {\n @if (!_secondaryItemTemplate) {\n <span\n [style.text-align]=\"secondaryTextAlignment\"\n fd-list-secondary\n [innerHTML]=\"optionItem.secondaryText\"\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"_secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-template>\n }\n }\n</ng-template>\n", styles: [".fd-select{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-block:.25rem;margin-inline:0;padding-block:0;padding-inline:0;text-shadow:var(--fdSelect_Text_Shadow)}.fd-select:after,.fd-select:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-select__control{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--fdSelect_Background,var(--sapField_BackgroundStyle));background-color:var(--fdSelect_Background_Color,var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);-webkit-box-shadow:var(--sapField_Shadow);box-shadow:var(--sapField_Shadow);-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdInput_Height,var(--sapElement_Height));line-height:normal;margin-block:var(--fdInput_Field_Margin_Block,.25rem);min-height:var(--fdInput_Height,var(--sapElement_Height));min-width:--fdSelect_Min_Width;outline:none;overflow:hidden;padding-inline:var(--fdInput_Field_Padding_Inline,.625rem);text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.25rem;-webkit-box-pack:justify;-ms-flex-pack:justify;cursor:pointer;justify-content:space-between;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-select__control:after,.fd-select__control:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-select__control::-webkit-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control::-moz-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control:-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control::-ms-input-placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-select__control[dir=rtl]::-webkit-input-placeholder,[dir=rtl] .fd-select__control::-webkit-input-placeholder{text-indent:.125rem}.fd-select__control[dir=rtl]::-moz-placeholder,[dir=rtl] .fd-select__control::-moz-placeholder{text-indent:.125rem}.fd-select__control[dir=rtl]:-ms-input-placeholder,[dir=rtl] .fd-select__control:-ms-input-placeholder{text-indent:.125rem}.fd-select__control[dir=rtl]::-ms-input-placeholder,[dir=rtl] .fd-select__control::-ms-input-placeholder{text-indent:.125rem}.fd-select__control[dir=rtl]::placeholder,[dir=rtl] .fd-select__control::placeholder{text-indent:.125rem}.fd-select__control::-moz-selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.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{background:var(--fdSelect_Hover_Background,var(--sapField_Hover_BackgroundStyle));background-color:var(--fdSelect_Hover_Background_Color,var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-select__control.is-focus,.fd-select__control:focus{background:var(--fdSelect_Focus_Background,var(--sapField_Focus_Background));-webkit-box-shadow:none;box-shadow:none;outline:var(--fdInput_Outline_Color) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--fdInput_Outline_Offset);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);-webkit-box-shadow:var(--sapField_SuccessShadow);box-shadow:var(--sapField_SuccessShadow)}.fd-select__control.is-success.is-hover,.fd-select__control.is-success:hover{background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-select__control.is-success.is-focus.is-hover,.fd-select__control.is-success.is-focus:hover,.fd-select__control.is-success:focus.is-hover,.fd-select__control.is-success:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-success.is-expanded,.fd-select__control.is-success[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Success_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle);-webkit-box-shadow:var(--sapField_InvalidShadow);box-shadow:var(--sapField_InvalidShadow)}.fd-select__control.is-error.is-hover,.fd-select__control.is-error:hover{background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-select__control.is-error.is-focus.is-hover,.fd-select__control.is-error.is-focus:hover,.fd-select__control.is-error:focus.is-hover,.fd-select__control.is-error:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-error.is-expanded,.fd-select__control.is-error[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Error_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle);-webkit-box-shadow:var(--sapField_WarningShadow);box-shadow:var(--sapField_WarningShadow)}.fd-select__control.is-warning.is-hover,.fd-select__control.is-warning:hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-select__control.is-warning.is-focus.is-hover,.fd-select__control.is-warning.is-focus:hover,.fd-select__control.is-warning:focus.is-hover,.fd-select__control.is-warning:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-warning.is-expanded,.fd-select__control.is-warning[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-select__control.is-alert.is-hover,.fd-select__control.is-alert:hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-select__control.is-alert.is-focus.is-hover,.fd-select__control.is-alert.is-focus:hover,.fd-select__control.is-alert:focus.is-hover,.fd-select__control.is-alert:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-alert.is-expanded,.fd-select__control.is-alert[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Warning_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle);-webkit-box-shadow:var(--sapField_InformationShadow);box-shadow:var(--sapField_InformationShadow)}.fd-select__control.is-information.is-hover,.fd-select__control.is-information:hover{background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-select__control.is-information.is-focus.is-hover,.fd-select__control.is-information.is-focus:hover,.fd-select__control.is-information:focus.is-hover,.fd-select__control.is-information:focus:hover{-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-information.is-expanded,.fd-select__control.is-information[aria-expanded=true]{background:var(--sapField_Focus_Background);-webkit-box-shadow:none;box-shadow:none;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--fdInput_Information_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-select__control.is-alert,.fd-select__control.is-error,.fd-select__control.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::-webkit-input-placeholder,.fd-select__control.is-error::-webkit-input-placeholder,.fd-select__control.is-warning::-webkit-input-placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::-moz-placeholder,.fd-select__control.is-error::-moz-placeholder,.fd-select__control.is-warning::-moz-placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert:-ms-input-placeholder,.fd-select__control.is-error:-ms-input-placeholder,.fd-select__control.is-warning:-ms-input-placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-select__control.is-alert::-ms-input-placeholder,.fd-select__control.is-error::-ms-input-placeholder,.fd-select__control.is-warning::-ms-input-placeholder{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::-webkit-input-placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-error::-moz-placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-error:-ms-input-placeholder{color:var(--sapField_TextColor)}.fd-select__control.is-error::-ms-input-placeholder{color:var(--sapField_TextColor)}.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::-webkit-input-placeholder,.fd-select__control:disabled::-webkit-input-placeholder,.fd-select__control[aria-disabled=true]::-webkit-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-disabled::-moz-placeholder,.fd-select__control:disabled::-moz-placeholder,.fd-select__control[aria-disabled=true]::-moz-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-disabled:-ms-input-placeholder,.fd-select__control:disabled:-ms-input-placeholder,.fd-select__control[aria-disabled=true]:-ms-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-disabled::-ms-input-placeholder,.fd-select__control:disabled::-ms-input-placeholder,.fd-select__control[aria-disabled=true]::-ms-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-disabled::placeholder,.fd-select__control:disabled::placeholder,.fd-select__control[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{--fdInput_Outline_Offset:-.25rem;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);-webkit-box-shadow:none;box-shadow:none}.fd-select__control.is-readonly::-webkit-input-placeholder,.fd-select__control[aria-readonly=true]::-webkit-input-placeholder,.fd-select__control[readonly]::-webkit-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly::-moz-placeholder,.fd-select__control[aria-readonly=true]::-moz-placeholder,.fd-select__control[readonly]::-moz-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly:-ms-input-placeholder,.fd-select__control[aria-readonly=true]:-ms-input-placeholder,.fd-select__control[readonly]:-ms-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly::-ms-input-placeholder,.fd-select__control[aria-readonly=true]::-ms-input-placeholder,.fd-select__control[readonly]::-ms-input-placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly::placeholder,.fd-select__control[aria-readonly=true]::placeholder,.fd-select__control[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color);opacity:0}.fd-select__control.is-readonly.is-hover,.fd-select__control.is-readonly:hover,.fd-select__control[aria-readonly=true].is-hover,.fd-select__control[aria-readonly=true]:hover,.fd-select__control[readonly].is-hover,.fd-select__control[readonly]:hover{--fdInput_Outline_Offset:-.25rem;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);-webkit-box-shadow:none;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{z-index:5;--fdInput_Outline_Offset:-.25rem;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);-webkit-box-shadow:none;box-shadow:none}.fd-select__control .fd-select__button{background:var(--fdInput_Group_Button_Background);background-color:var(--fdButtonBackgroundColor);border:none;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-select__control .fd-select__button:before{display:none!important}.fd-select__control .fd-select__button:after{border-radius:var(--fdInput_Outline_Border_Radius)}.fd-select__control .fd-select__button.is-hover,.fd-select__control .fd-select__button:hover{--fdInput_Group_Button_Text_Color:var(--fdInput_Group_Button_Hover_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Hover_Background);-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.fd-select__control .fd-select__button.is-active,.fd-select__control .fd-select__button:active{background:var(--fdInput_Group_Button_Active_Background);-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-select__control.is-success.is-focus,.fd-select__control.is-success:focus{z-index:5}.fd-select__control.is-success.is-focus .fd-select__button,.fd-select__control.is-success:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success.is-focus .fd-select__button.is-hover,.fd-select__control.is-success.is-focus .fd-select__button:hover,.fd-select__control.is-success:focus .fd-select__button.is-hover,.fd-select__control.is-success:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success.is-expanded .fd-select__button,.fd-select__control.is-success[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);color:var(--fdInput_Group_Button_Success_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success.is-expanded .fd-select__button.is-hover,.fd-select__control.is-success.is-expanded .fd-select__button:hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-success[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button.is-hover,.fd-select__control.is-success .fd-select__button:active,.fd-select__control.is-success .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-select__control.is-success .fd-select__button.is-active,.fd-select__control.is-success .fd-select__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-select__control.is-error.is-focus,.fd-select__control.is-error:focus{z-index:5}.fd-select__control.is-error.is-focus .fd-select__button,.fd-select__control.is-error:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error.is-focus .fd-select__button.is-hover,.fd-select__control.is-error.is-focus .fd-select__button:hover,.fd-select__control.is-error:focus .fd-select__button.is-hover,.fd-select__control.is-error:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error.is-expanded .fd-select__button,.fd-select__control.is-error[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);color:var(--fdInput_Group_Button_Error_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error.is-expanded .fd-select__button.is-hover,.fd-select__control.is-error.is-expanded .fd-select__button:hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-error[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button.is-hover,.fd-select__control.is-error .fd-select__button:active,.fd-select__control.is-error .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-select__control.is-error .fd-select__button.is-active,.fd-select__control.is-error .fd-select__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-select__control.is-warning.is-focus,.fd-select__control.is-warning:focus{z-index:5}.fd-select__control.is-warning.is-focus .fd-select__button,.fd-select__control.is-warning:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning.is-focus .fd-select__button.is-hover,.fd-select__control.is-warning.is-focus .fd-select__button:hover,.fd-select__control.is-warning:focus .fd-select__button.is-hover,.fd-select__control.is-warning:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning.is-expanded .fd-select__button,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning.is-expanded .fd-select__button.is-hover,.fd-select__control.is-warning.is-expanded .fd-select__button:hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-warning[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button.is-hover,.fd-select__control.is-warning .fd-select__button:active,.fd-select__control.is-warning .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-warning .fd-select__button.is-active,.fd-select__control.is-warning .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-alert.is-focus,.fd-select__control.is-alert:focus{z-index:5}.fd-select__control.is-alert.is-focus .fd-select__button,.fd-select__control.is-alert:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert.is-focus .fd-select__button.is-hover,.fd-select__control.is-alert.is-focus .fd-select__button:hover,.fd-select__control.is-alert:focus .fd-select__button.is-hover,.fd-select__control.is-alert:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert.is-expanded .fd-select__button,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);color:var(--fdInput_Group_Button_Warning_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert.is-expanded .fd-select__button.is-hover,.fd-select__control.is-alert.is-expanded .fd-select__button:hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-alert[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button.is-hover,.fd-select__control.is-alert .fd-select__button:active,.fd-select__control.is-alert .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-select__control.is-alert .fd-select__button.is-active,.fd-select__control.is-alert .fd-select__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-select__control.is-information.is-focus,.fd-select__control.is-information:focus{z-index:5}.fd-select__control.is-information.is-focus .fd-select__button,.fd-select__control.is-information:focus .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information.is-focus .fd-select__button.is-hover,.fd-select__control.is-information.is-focus .fd-select__button:hover,.fd-select__control.is-information:focus .fd-select__button.is-hover,.fd-select__control.is-information:focus .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information.is-expanded .fd-select__button,.fd-select__control.is-information[aria-expanded=true] .fd-select__button{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);color:var(--fdInput_Group_Button_Information_Active_Text_Color);--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information.is-expanded .fd-select__button.is-hover,.fd-select__control.is-information.is-expanded .fd-select__button:hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button.is-hover,.fd-select__control.is-information[aria-expanded=true] .fd-select__button:hover{--fdButtonBackgroundColor:var(--fdInput_Group_Button_Active_Background)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button.is-hover,.fd-select__control.is-information .fd-select__button:active,.fd-select__control.is-information .fd-select__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-select__control.is-information .fd-select__button.is-active,.fd-select__control.is-information .fd-select__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-select__control.is-disabled,.fd-select__control:disabled,.fd-select__control[aria-disabled=true]{pointer-events:none}.fd-select__control:after{border-radius:var(--sapField_BorderCornerRadius);-webkit-box-shadow:var(--sapField_Shadow);box-shadow:var(--sapField_Shadow);content:\"\";inset:0;pointer-events:none;position:absolute}.fd-select__control.is-readonly,.fd-select__control[aria-readonly=true],.fd-select__control[readonly]{cursor:text}.fd-select__control.is-readonly .fd-select__text-content,.fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select__control[readonly] .fd-select__text-content{--fdSelect_Min_Width:5rem;padding-inline:.625rem}.fd-select__control.is-readonly[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-readonly=true][aria-selected=false] .fd-select__text-content,.fd-select__control[readonly][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control.is-readonly .fd-select__button,.fd-select__control[aria-readonly=true] .fd-select__button,.fd-select__control[readonly] .fd-select__button{opacity:0}.fd-select__control.is-disabled[aria-selected=false] .fd-select__text-content,.fd-select__control:disabled[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-disabled=true][aria-selected=false] .fd-select__text-content{visibility:hidden}.fd-select__control[aria-selected=false] .fd-select__text-content{padding-block:0;padding-inline:.625rem}.fd-select__control[aria-selected=false] .fd-select__text-content,.fd-select__control[aria-selected=false] .fd-select__text-content [class*=sap-icon]{color:var(--sapField_PlaceholderTextColor);font-style:italic;font-weight:400}.fd-select__text-content{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;min-width:calc(var(--fdSelect_Min_Width) - var(--sapField_BorderWidth)*2);overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;white-space:nowrap;--fdSelect_Min_Width:2.5rem;-webkit-padding-start:.625rem;color:var(--fdSelect_Text_Content_Color,var(--sapTextColor));cursor:pointer;display:var(--fdSelect_Text_Content_Display,inline-block);padding-inline-start:.625rem}.fd-select__text-content:after,.fd-select__text-content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-select[class*=-compact],.fd-select[class*=-condensed],[class*=-compact] .fd-select:not([class*=-cozy]),[class*=-condensed] .fd-select:not([class*=-cozy]){margin-block:.1875rem;margin-inline:0}.fd-select[class*=-compact] .fd-select__control,.fd-select[class*=-condensed] .fd-select__control,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control{height:1.625rem;min-height:1.625rem}.fd-select[class*=-compact] .fd-select__control .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control .fd-select__text-content{--fdSelect_Min_Width:2.75rem;-webkit-padding-start:.5rem;padding-inline-start:.5rem}.fd-select[class*=-compact] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-compact] .fd-select__control[readonly] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control.is-readonly .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[aria-readonly=true] .fd-select__text-content,.fd-select[class*=-condensed] .fd-select__control[readonly] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-compact] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control.is-readonly .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[aria-readonly=true] .fd-select__text-content,[class*=-condensed] .fd-select:not([class*=-cozy]) .fd-select__control[readonly] .fd-select__text-content{padding-inline:.5rem}@media (min-width: 600px){[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col-md--10{text-align:right!important}}\n/*! Bundled license information:\n\nfundamental-styles/dist/select.css:\n (*!\n * Fundamental Library Styles v0.40.1\n * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *)\n*/\n"] }]
|
|
4202
4202
|
}], propDecorators: { value: [{
|
|
4203
4203
|
type: Input
|
|
4204
4204
|
}], inline: [{
|
|
@@ -6794,6 +6794,8 @@ class ComboboxComponent extends BaseCombobox {
|
|
|
6794
6794
|
this.providers = providers;
|
|
6795
6795
|
/** Event emitted when item is selected. */
|
|
6796
6796
|
this.selectionChange = new EventEmitter();
|
|
6797
|
+
/** @hidden */
|
|
6798
|
+
this._itemMousedown = false;
|
|
6797
6799
|
}
|
|
6798
6800
|
/** @hidden */
|
|
6799
6801
|
ngOnInit() {
|
|
@@ -6836,7 +6838,7 @@ class ComboboxComponent extends BaseCombobox {
|
|
|
6836
6838
|
this.selectionChange.emit(event);
|
|
6837
6839
|
}
|
|
6838
6840
|
/** @hidden Method to set selected item */
|
|
6839
|
-
selectOptionItem(item) {
|
|
6841
|
+
selectOptionItem(item, shouldClosePopover = true) {
|
|
6840
6842
|
if (this.mobile) {
|
|
6841
6843
|
this._selectedElement = item;
|
|
6842
6844
|
this.inputText = item.label;
|
|
@@ -6845,7 +6847,9 @@ class ComboboxComponent extends BaseCombobox {
|
|
|
6845
6847
|
}
|
|
6846
6848
|
this.inputText = item.label;
|
|
6847
6849
|
this._checkAndUpdate(item);
|
|
6848
|
-
|
|
6850
|
+
if (shouldClosePopover) {
|
|
6851
|
+
this.isOpenChangeHandle(false);
|
|
6852
|
+
}
|
|
6849
6853
|
}
|
|
6850
6854
|
/** @hidden Method to set as selected */
|
|
6851
6855
|
setAsSelected(item) {
|
|
@@ -6894,6 +6898,13 @@ class ComboboxComponent extends BaseCombobox {
|
|
|
6894
6898
|
this.isOpenChangeHandle(false);
|
|
6895
6899
|
}
|
|
6896
6900
|
/** @hidden */
|
|
6901
|
+
onItemFocused(value) {
|
|
6902
|
+
if (!this._itemMousedown && !this.mobile) {
|
|
6903
|
+
this.selectOptionItem(value, false);
|
|
6904
|
+
}
|
|
6905
|
+
this._itemMousedown = false;
|
|
6906
|
+
}
|
|
6907
|
+
/** @hidden */
|
|
6897
6908
|
_getLabelledBy() {
|
|
6898
6909
|
let retVal = this.ariaLabelledBy;
|
|
6899
6910
|
if (this.stateMessage) {
|
|
@@ -6943,7 +6954,7 @@ class ComboboxComponent extends BaseCombobox {
|
|
|
6943
6954
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ComboboxComponent, isStandalone: true, selector: "fdp-combobox", outputs: { selectionChange: "selectionChange" }, providers: [
|
|
6944
6955
|
{ provide: FD_FORM_FIELD_CONTROL, useExisting: ComboboxComponent, multi: true },
|
|
6945
6956
|
contentDensityObserverProviders()
|
|
6946
|
-
], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n <fd-popover\n [isOpen]=\"isOpen && _suggestions.length > 0\"\n (isOpenChange)=\"isOpenChangeHandle($event)\"\n [fillControlMode]=\"fillControlMode\"\n [focusTrapped]=\"true\"\n [triggers]=\"triggers\"\n [disabled]=\"disabled || readonly\"\n [maxWidth]=\"autoResize ? null : minWidth\"\n [closeOnOutsideClick]=\"closeOnOutsideClick\"\n additionalBodyClass=\"fdp-combobox__popover\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body [hidden]=\"_suggestions.length === 0\">\n <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n [id]=\"id + '-input-group-container'\"\n [button]=\"!readonly\"\n [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n [state]=\"mobile && isOpen ? null : state\"\n [buttonFocusable]=\"buttonFocusable\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [isControl]=\"true\"\n (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"disabled\"\n [glyphAriaLabel]=\"ariaLabel\"\n (click)=\"openInMobileMode()\"\n >\n <input\n #searchInputElement\n fdp-auto-complete\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n [mobile]=\"mobile\"\n (onComplete)=\"_onCompleteTerm($event)\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getLabelledBy()\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n [attr.aria-required]=\"required\"\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"id\"\n [name]=\"name\"\n (keydown)=\"onInputKeydownHandler($event)\"\n [disabled]=\"disabled\"\n [ngModel]=\"inputText\"\n (ngModelChange)=\"searchTermChanged($event)\"\n [placeholder]=\"placeholder\"\n (focus)=\"onTouched()\"\n (blur)=\"_onBlur($event)\"\n [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n [readonly]=\"readonly\"\n [attr.aria-readonly]=\"readonly\"\n />\n </fd-input-group>\n @if (isOpen) {\n <div class=\"fdp-combobox__count-list-results\" role=\"status\">\n @if (_flatSuggestions.length || '0'; as count) {\n {{\n (count === 1\n ? 'platformCombobox.countListResultsSingular'\n : 'platformCombobox.countListResultsPlural'\n ) | fdTranslate: { count: count }\n }}\n }\n </div>\n }\n @if (mobile || isOpen ? null : !!stateMessage) {\n <fd-form-message [type]=\"state\" [innerHtml]=\"stateMessage\"></fd-form-message>\n }\n </fd-form-input-message-group>\n</ng-template>\n<ng-template #listTemplate>\n <ul\n fd-list\n [hasMessage]=\"!!stateMessage\"\n (focusEscapeList)=\"handleListFocusEscape($event)\"\n [dropdownMode]=\"true\"\n class=\"fdp-combobox__list\"\n [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n [id]=\"id + '-result'\"\n role=\"listbox\"\n [byline]=\"byline\"\n [attr.aria-labelledby]=\"id + '-search'\"\n [style.maxHeight]=\"!mobile && maxHeight\"\n [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n (keydown.tab)=\"_close()\"\n (keydown.shift.tab)=\"_close()\"\n >\n @if (stateMessage) {\n <li\n [attr.aria-label]=\"stateMessage\"\n fd-list-message\n tabindex=\"-1\"\n role=\"presentation\"\n [type]=\"state || 'default'\"\n [innerHtml]=\"stateMessage\"\n [attr.id]=\"'fdp-list-message-combobox-state-message-' + id\"\n ></li>\n }\n @if (advancedStateMessage?.hasErrors && advancedStateMessage?.template) {\n <li\n fd-list-message\n tabindex=\"-1\"\n role=\"presentation\"\n [type]=\"state || 'default'\"\n [attr.id]=\"'fdp-list-message-combobox-error-message-' + id\"\n >\n <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n </li>\n }\n <ng-content></ng-content>\n @if (isGroup) {\n @for (group of _suggestions; track group) {\n @if (!groupItemTemplate) {\n <li fd-list-group-header role=\"option\">\n <span fd-list-title [attr.title]=\"group.label\">{{ group.label }}</span>\n </li>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"groupItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n ></ng-template>\n }\n @for (optionItem of group.children; track optionItem; let i = $index) {\n <li\n (click)=\"handleOptionItem(optionItem)\"\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (keyDown)=\"handlePressEnter($event, optionItem)\"\n [selected]=\"isSelectedOptionItem(optionItem)\"\n [value]=\"optionItem\"\n >\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n } @else {\n @for (optionItem of _suggestions; track optionItem; let i = $index) {\n <li\n (click)=\"handleOptionItem(optionItem)\"\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (keyDown)=\"handlePressEnter($event, optionItem)\"\n [selected]=\"isSelectedOptionItem(optionItem)\"\n [value]=\"optionItem\"\n >\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n @if (isSelectedOptionItem(optionItem) && !!selectedItemTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n @if (!(isSelectedOptionItem(optionItem) && selectedItemTemplate)) {\n <ng-template\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-template>\n <ng-template\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n @if (!optionItemTemplate) {\n <span [attr.title]=\"optionItem.label\" [innerHTML]=\"optionItem.label | highlight: inputText\"></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n @if (showSecondaryText) {\n @if (!secondaryItemTemplate) {\n <span\n [style.text-align]=\"secondaryTextAlignment\"\n fd-list-secondary\n [attr.title]=\"optionItem.secondaryText\"\n [innerHTML]=\"optionItem.secondaryText | highlight: inputText\"\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-template>\n }\n }\n</ng-template>\n", styles: [".fdp-combobox__count-list-results{position:absolute;opacity:0;z-index:-1}.fdp-combobox__list .fd-list__item{justify-content:space-between}.fdp-combobox__list .fd-list__item span{overflow:hidden;text-overflow:ellipsis;width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen", "preventSpaceKeyScroll"], outputs: ["isOpenChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i3$2.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy", "ariaLabel"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i3$2.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: i6.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i6.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i6.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "ngmodule", type: ContentDensityModule }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6957
|
+
], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n <fd-popover\n [isOpen]=\"isOpen && _suggestions.length > 0\"\n (isOpenChange)=\"isOpenChangeHandle($event)\"\n [fillControlMode]=\"fillControlMode\"\n [focusTrapped]=\"true\"\n [triggers]=\"triggers\"\n [disabled]=\"disabled || readonly\"\n [maxWidth]=\"autoResize ? null : minWidth\"\n [closeOnOutsideClick]=\"closeOnOutsideClick\"\n additionalBodyClass=\"fdp-combobox__popover\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body [hidden]=\"_suggestions.length === 0\">\n <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n [id]=\"id + '-input-group-container'\"\n [button]=\"!readonly\"\n [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n [state]=\"mobile && isOpen ? null : state\"\n [buttonFocusable]=\"buttonFocusable\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [isControl]=\"true\"\n (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"disabled\"\n [glyphAriaLabel]=\"ariaLabel\"\n (click)=\"openInMobileMode()\"\n >\n <input\n #searchInputElement\n fdp-auto-complete\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n [mobile]=\"mobile\"\n (onComplete)=\"_onCompleteTerm($event)\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getLabelledBy()\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n [attr.aria-required]=\"required\"\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"id\"\n [name]=\"name\"\n (keydown)=\"onInputKeydownHandler($event)\"\n [disabled]=\"disabled\"\n [ngModel]=\"inputText\"\n (ngModelChange)=\"searchTermChanged($event)\"\n [placeholder]=\"placeholder\"\n (focus)=\"onTouched()\"\n (blur)=\"_onBlur($event)\"\n [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n [readonly]=\"readonly\"\n [attr.aria-readonly]=\"readonly\"\n />\n </fd-input-group>\n @if (isOpen) {\n <div class=\"fdp-combobox__count-list-results\" role=\"status\">\n @if (_flatSuggestions.length || '0'; as count) {\n {{\n (count === 1\n ? 'platformCombobox.countListResultsSingular'\n : 'platformCombobox.countListResultsPlural'\n ) | fdTranslate: { count: count }\n }}\n }\n </div>\n }\n @if (mobile || isOpen ? null : !!stateMessage) {\n <fd-form-message [type]=\"state\" [innerHtml]=\"stateMessage\"></fd-form-message>\n }\n </fd-form-input-message-group>\n</ng-template>\n<ng-template #listTemplate>\n <ul\n fd-list\n [hasMessage]=\"!!stateMessage\"\n (focusEscapeList)=\"handleListFocusEscape($event)\"\n [dropdownMode]=\"true\"\n class=\"fdp-combobox__list\"\n [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n [id]=\"id + '-result'\"\n role=\"listbox\"\n [byline]=\"byline\"\n [attr.aria-labelledby]=\"id + '-search'\"\n [style.maxHeight]=\"!mobile && maxHeight\"\n [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n (keydown.tab)=\"_close()\"\n (keydown.shift.tab)=\"_close()\"\n >\n @if (stateMessage) {\n <li\n [attr.aria-label]=\"stateMessage\"\n fd-list-message\n tabindex=\"-1\"\n role=\"presentation\"\n [type]=\"state || 'default'\"\n [innerHtml]=\"stateMessage\"\n [attr.id]=\"'fdp-list-message-combobox-state-message-' + id\"\n ></li>\n }\n @if (advancedStateMessage?.hasErrors && advancedStateMessage?.template) {\n <li\n fd-list-message\n tabindex=\"-1\"\n role=\"presentation\"\n [type]=\"state || 'default'\"\n [attr.id]=\"'fdp-list-message-combobox-error-message-' + id\"\n >\n <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n </li>\n }\n <ng-content></ng-content>\n @if (isGroup) {\n @for (group of _suggestions; track group) {\n @if (!groupItemTemplate) {\n <li fd-list-group-header role=\"option\">\n <span fd-list-title [attr.title]=\"group.label\">{{ group.label }}</span>\n </li>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"groupItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n ></ng-template>\n }\n @for (optionItem of group.children; track optionItem; let i = $index) {\n <li\n (click)=\"handleOptionItem(optionItem)\"\n (mousedown)=\"_itemMousedown = true\"\n (focus)=\"onItemFocused(optionItem)\"\n fd-list-item\n ariaRole=\"option\"\n [tabindex]=\"0\"\n (keyDown)=\"handlePressEnter($event, optionItem)\"\n [selected]=\"isSelectedOptionItem(optionItem)\"\n [value]=\"optionItem\"\n >\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n } @else {\n @for (optionItem of _suggestions; track optionItem; let i = $index) {\n <li\n (click)=\"handleOptionItem(optionItem)\"\n (mousedown)=\"_itemMousedown = true\"\n (focus)=\"onItemFocused(optionItem)\"\n fd-list-item\n ariaRole=\"option\"\n [tabindex]=\"0\"\n (keyDown)=\"handlePressEnter($event, optionItem)\"\n [selected]=\"isSelectedOptionItem(optionItem)\"\n [value]=\"optionItem\"\n >\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n @if (isSelectedOptionItem(optionItem) && !!selectedItemTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n @if (!(isSelectedOptionItem(optionItem) && selectedItemTemplate)) {\n <ng-template\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-template>\n <ng-template\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n @if (!optionItemTemplate) {\n <span [attr.title]=\"optionItem.label\" [innerHTML]=\"optionItem.label | highlight: inputText\"></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n @if (showSecondaryText) {\n @if (!secondaryItemTemplate) {\n <span\n [style.text-align]=\"secondaryTextAlignment\"\n fd-list-secondary\n [attr.title]=\"optionItem.secondaryText\"\n [innerHTML]=\"optionItem.secondaryText | highlight: inputText\"\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-template>\n }\n }\n</ng-template>\n", styles: [".fdp-combobox__count-list-results{position:absolute;opacity:0;z-index:-1}.fdp-combobox__list .fd-list__item{justify-content:space-between}.fdp-combobox__list .fd-list__item span{overflow:hidden;text-overflow:ellipsis;width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen", "preventSpaceKeyScroll"], outputs: ["isOpenChange"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i3$2.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy", "ariaLabel"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i3$2.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdp-auto-complete]", inputs: ["options", "inputText", "mobile"], outputs: ["onComplete"] }, { kind: "component", type: FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: i6.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i6.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i6.ListMessageDirective, selector: "[fd-list-message], [fdListMessage]", inputs: ["type", "class"] }, { kind: "ngmodule", type: ContentDensityModule }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6947
6958
|
}
|
|
6948
6959
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
6949
6960
|
type: Component,
|
|
@@ -6966,7 +6977,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
6966
6977
|
SearchHighlightPipe,
|
|
6967
6978
|
FdTranslatePipe,
|
|
6968
6979
|
ContentDensityModule
|
|
6969
|
-
], template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n <fd-popover\n [isOpen]=\"isOpen && _suggestions.length > 0\"\n (isOpenChange)=\"isOpenChangeHandle($event)\"\n [fillControlMode]=\"fillControlMode\"\n [focusTrapped]=\"true\"\n [triggers]=\"triggers\"\n [disabled]=\"disabled || readonly\"\n [maxWidth]=\"autoResize ? null : minWidth\"\n [closeOnOutsideClick]=\"closeOnOutsideClick\"\n additionalBodyClass=\"fdp-combobox__popover\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body [hidden]=\"_suggestions.length === 0\">\n <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n [id]=\"id + '-input-group-container'\"\n [button]=\"!readonly\"\n [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n [state]=\"mobile && isOpen ? null : state\"\n [buttonFocusable]=\"buttonFocusable\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [isControl]=\"true\"\n (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"disabled\"\n [glyphAriaLabel]=\"ariaLabel\"\n (click)=\"openInMobileMode()\"\n >\n <input\n #searchInputElement\n fdp-auto-complete\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n [mobile]=\"mobile\"\n (onComplete)=\"_onCompleteTerm($event)\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getLabelledBy()\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-owns]=\"autoComplete && !mobile ? id + '-result' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n [attr.aria-required]=\"required\"\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"id\"\n [name]=\"name\"\n (keydown)=\"onInputKeydownHandler($event)\"\n [disabled]=\"disabled\"\n [ngModel]=\"inputText\"\n (ngModelChange)=\"searchTermChanged($event)\"\n [placeholder]=\"placeholder\"\n (focus)=\"onTouched()\"\n (blur)=\"_onBlur($event)\"\n [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n [readonly]=\"readonly\"\n [attr.aria-readonly]=\"readonly\"\n />\n </fd-input-group>\n @if (isOpen) {\n <div class=\"fdp-combobox__count-list-results\" role=\"status\">\n @if (_flatSuggestions.length || '0'; as count) {\n {{\n (count === 1\n ? 'platformCombobox.countListResultsSingular'\n : 'platformCombobox.countListResultsPlural'\n ) | fdTranslate: { count: count }\n }}\n }\n </div>\n }\n @if (mobile || isOpen ? null : !!stateMessage) {\n <fd-form-message [type]=\"state\" [innerHtml]=\"stateMessage\"></fd-form-message>\n }\n </fd-form-input-message-group>\n</ng-template>\n<ng-template #listTemplate>\n <ul\n fd-list\n [hasMessage]=\"!!stateMessage\"\n (focusEscapeList)=\"handleListFocusEscape($event)\"\n [dropdownMode]=\"true\"\n class=\"fdp-combobox__list\"\n [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n [id]=\"id + '-result'\"\n role=\"listbox\"\n [byline]=\"byline\"\n [attr.aria-labelledby]=\"id + '-search'\"\n [style.maxHeight]=\"!mobile && maxHeight\"\n [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n (keydown.tab)=\"_close()\"\n (keydown.shift.tab)=\"_close()\"\n >\n @if (stateMessage) {\n <li\n [attr.aria-label]=\"stateMessage\"\n fd-list-message\n tabindex=\"-1\"\n role=\"presentation\"\n [type]=\"state || 'default'\"\n [innerHtml]=\"stateMessage\"\n [attr.id]=\"'fdp-list-message-combobox-state-message-' + id\"\n ></li>\n }\n @if (advancedStateMessage?.hasErrors && advancedStateMessage?.template) {\n <li\n fd-list-message\n tabindex=\"-1\"\n role=\"presentation\"\n [type]=\"state || 'default'\"\n [attr.id]=\"'fdp-list-message-combobox-error-message-' + id\"\n >\n <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n </li>\n }\n <ng-content></ng-content>\n @if (isGroup) {\n @for (group of _suggestions; track group) {\n @if (!groupItemTemplate) {\n <li fd-list-group-header role=\"option\">\n <span fd-list-title [attr.title]=\"group.label\">{{ group.label }}</span>\n </li>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"groupItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n ></ng-template>\n }\n @for (optionItem of group.children; track optionItem; let i = $index) {\n <li\n (click)=\"handleOptionItem(optionItem)\"\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (keyDown)=\"handlePressEnter($event, optionItem)\"\n [selected]=\"isSelectedOptionItem(optionItem)\"\n [value]=\"optionItem\"\n >\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n } @else {\n @for (optionItem of _suggestions; track optionItem; let i = $index) {\n <li\n (click)=\"handleOptionItem(optionItem)\"\n fd-list-item\n role=\"option\"\n [tabindex]=\"0\"\n (keyDown)=\"handlePressEnter($event, optionItem)\"\n [selected]=\"isSelectedOptionItem(optionItem)\"\n [value]=\"optionItem\"\n >\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n @if (isSelectedOptionItem(optionItem) && !!selectedItemTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n @if (!(isSelectedOptionItem(optionItem) && selectedItemTemplate)) {\n <ng-template\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-template>\n <ng-template\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n @if (!optionItemTemplate) {\n <span [attr.title]=\"optionItem.label\" [innerHTML]=\"optionItem.label | highlight: inputText\"></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n @if (showSecondaryText) {\n @if (!secondaryItemTemplate) {\n <span\n [style.text-align]=\"secondaryTextAlignment\"\n fd-list-secondary\n [attr.title]=\"optionItem.secondaryText\"\n [innerHTML]=\"optionItem.secondaryText | highlight: inputText\"\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-template>\n }\n }\n</ng-template>\n", styles: [".fdp-combobox__count-list-results{position:absolute;opacity:0;z-index:-1}.fdp-combobox__list .fd-list__item{justify-content:space-between}.fdp-combobox__list .fd-list__item span{overflow:hidden;text-overflow:ellipsis;width:100%}\n"] }]
|
|
6980
|
+
], template: "<ng-template [ngTemplateOutlet]=\"mobile ? controlTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n <fd-popover\n [isOpen]=\"isOpen && _suggestions.length > 0\"\n (isOpenChange)=\"isOpenChangeHandle($event)\"\n [fillControlMode]=\"fillControlMode\"\n [focusTrapped]=\"true\"\n [triggers]=\"triggers\"\n [disabled]=\"disabled || readonly\"\n [maxWidth]=\"autoResize ? null : minWidth\"\n [closeOnOutsideClick]=\"closeOnOutsideClick\"\n additionalBodyClass=\"fdp-combobox__popover\"\n >\n <fd-popover-control>\n <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n </fd-popover-control>\n <fd-popover-body [hidden]=\"_suggestions.length === 0\">\n <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n <ng-content></ng-content>\n </fd-popover-body>\n </fd-popover>\n</ng-template>\n<ng-template #controlTemplate>\n <fd-form-input-message-group>\n <fd-input-group\n [id]=\"id + '-input-group-container'\"\n [button]=\"!readonly\"\n [glyph]=\"!readonly ? 'navigation-down-arrow' : ' '\"\n [state]=\"mobile && isOpen ? null : state\"\n [buttonFocusable]=\"buttonFocusable\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [isControl]=\"true\"\n (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n [attr.aria-disabled]=\"disabled\"\n [glyphAriaLabel]=\"ariaLabel\"\n (click)=\"openInMobileMode()\"\n >\n <input\n #searchInputElement\n fdp-auto-complete\n [options]=\"_suggestions\"\n [inputText]=\"inputText\"\n [mobile]=\"mobile\"\n (onComplete)=\"_onCompleteTerm($event)\"\n type=\"text\"\n role=\"combobox\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getLabelledBy()\"\n [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n [attr.aria-haspopup]=\"autoComplete && !mobile\"\n [attr.aria-required]=\"required\"\n fd-input-group-input\n tabindex=\"0\"\n [id]=\"id\"\n [name]=\"name\"\n (keydown)=\"onInputKeydownHandler($event)\"\n [disabled]=\"disabled\"\n [ngModel]=\"inputText\"\n (ngModelChange)=\"searchTermChanged($event)\"\n [placeholder]=\"placeholder\"\n (focus)=\"onTouched()\"\n (blur)=\"_onBlur($event)\"\n [attr.aria-expanded]=\"isOpen && _suggestions.length > 0\"\n [readonly]=\"readonly\"\n [attr.aria-readonly]=\"readonly\"\n />\n </fd-input-group>\n @if (isOpen) {\n <div class=\"fdp-combobox__count-list-results\" role=\"status\">\n @if (_flatSuggestions.length || '0'; as count) {\n {{\n (count === 1\n ? 'platformCombobox.countListResultsSingular'\n : 'platformCombobox.countListResultsPlural'\n ) | fdTranslate: { count: count }\n }}\n }\n </div>\n }\n @if (mobile || isOpen ? null : !!stateMessage) {\n <fd-form-message [type]=\"state\" [innerHtml]=\"stateMessage\"></fd-form-message>\n }\n </fd-form-input-message-group>\n</ng-template>\n<ng-template #listTemplate>\n <ul\n fd-list\n [hasMessage]=\"!!stateMessage\"\n (focusEscapeList)=\"handleListFocusEscape($event)\"\n [dropdownMode]=\"true\"\n class=\"fdp-combobox__list\"\n [hasMessage]=\"!!stateMessage || (!!advancedStateMessage?.hasErrors && !!advancedStateMessage?.template)\"\n [id]=\"id + '-result'\"\n role=\"listbox\"\n [byline]=\"byline\"\n [attr.aria-labelledby]=\"id + '-search'\"\n [style.maxHeight]=\"!mobile && maxHeight\"\n [style.maxWidth]=\"autoResize && maxWidth + 'px'\"\n (keydown.tab)=\"_close()\"\n (keydown.shift.tab)=\"_close()\"\n >\n @if (stateMessage) {\n <li\n [attr.aria-label]=\"stateMessage\"\n fd-list-message\n tabindex=\"-1\"\n role=\"presentation\"\n [type]=\"state || 'default'\"\n [innerHtml]=\"stateMessage\"\n [attr.id]=\"'fdp-list-message-combobox-state-message-' + id\"\n ></li>\n }\n @if (advancedStateMessage?.hasErrors && advancedStateMessage?.template) {\n <li\n fd-list-message\n tabindex=\"-1\"\n role=\"presentation\"\n [type]=\"state || 'default'\"\n [attr.id]=\"'fdp-list-message-combobox-error-message-' + id\"\n >\n <ng-template [ngTemplateOutlet]=\"advancedStateMessage!.template!\"></ng-template>\n </li>\n }\n <ng-content></ng-content>\n @if (isGroup) {\n @for (group of _suggestions; track group) {\n @if (!groupItemTemplate) {\n <li fd-list-group-header role=\"option\">\n <span fd-list-title [attr.title]=\"group.label\">{{ group.label }}</span>\n </li>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"groupItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n ></ng-template>\n }\n @for (optionItem of group.children; track optionItem; let i = $index) {\n <li\n (click)=\"handleOptionItem(optionItem)\"\n (mousedown)=\"_itemMousedown = true\"\n (focus)=\"onItemFocused(optionItem)\"\n fd-list-item\n ariaRole=\"option\"\n [tabindex]=\"0\"\n (keyDown)=\"handlePressEnter($event, optionItem)\"\n [selected]=\"isSelectedOptionItem(optionItem)\"\n [value]=\"optionItem\"\n >\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n } @else {\n @for (optionItem of _suggestions; track optionItem; let i = $index) {\n <li\n (click)=\"handleOptionItem(optionItem)\"\n (mousedown)=\"_itemMousedown = true\"\n (focus)=\"onItemFocused(optionItem)\"\n fd-list-item\n ariaRole=\"option\"\n [tabindex]=\"0\"\n (keyDown)=\"handlePressEnter($event, optionItem)\"\n [selected]=\"isSelectedOptionItem(optionItem)\"\n [value]=\"optionItem\"\n >\n <ng-template\n [ngTemplateOutlet]=\"listItem\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n ></ng-template>\n </li>\n }\n }\n </ul>\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n @if (isSelectedOptionItem(optionItem) && !!selectedItemTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"selectedItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n @if (!(isSelectedOptionItem(optionItem) && selectedItemTemplate)) {\n <ng-template\n [ngTemplateOutlet]=\"optionItemSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n ></ng-template>\n <ng-template\n [ngTemplateOutlet]=\"secondaryTextSource\"\n [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n @if (!optionItemTemplate) {\n <span [attr.title]=\"optionItem.label\" [innerHTML]=\"optionItem.label | highlight: inputText\"></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"optionItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n ></ng-template>\n }\n</ng-template>\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n @if (showSecondaryText) {\n @if (!secondaryItemTemplate) {\n <span\n [style.text-align]=\"secondaryTextAlignment\"\n fd-list-secondary\n [attr.title]=\"optionItem.secondaryText\"\n [innerHTML]=\"optionItem.secondaryText | highlight: inputText\"\n ></span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"secondaryItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n ></ng-template>\n }\n }\n</ng-template>\n", styles: [".fdp-combobox__count-list-results{position:absolute;opacity:0;z-index:-1}.fdp-combobox__list .fd-list__item{justify-content:space-between}.fdp-combobox__list .fd-list__item span{overflow:hidden;text-overflow:ellipsis;width:100%}\n"] }]
|
|
6970
6981
|
}], ctorParameters: () => [{ type: i1$2.DialogConfig, decorators: [{
|
|
6971
6982
|
type: Optional
|
|
6972
6983
|
}] }, { type: i2.DynamicComponentService }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: Map, decorators: [{
|