@fundamental-ngx/core 0.37.0-rc.8 → 0.37.0

package/esm2020/checkbox/checkbox/checkbox.component.mjs

@@ -196,7 +196,7 @@ CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
         },
         registerFormItemControl(CheckboxComponent),
         contentDensityObserverProviders()
-    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "labelElement", first: true, predicate: ["labelElement"], descendants: true }], ngImport: i0, template: "<input\n    #inputElement\n    type=\"checkbox\"\n    class=\"fd-checkbox\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    [indeterminate]=\"isIndeterminate\"\n    [checked]=\"isChecked\"\n    [attr.tabindex]=\"tabIndexValue\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-required]=\"required\"\n    [class]=\"state ? 'is-' + state : ''\"\n    (click)=\"_onInputClick($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n/>\n\n<label\n    class=\"fd-checkbox__label\"\n    #labelElement\n    [for]=\"inputId\"\n    [class]=\"labelClass\"\n    [attr.title]=\"title\"\n    [class.fd-checkbox__label--required]=\"required\"\n    (click)=\"_onLabelClick($event)\"\n>\n    <div class=\"fd-checkbox__label-container\">\n        <ng-container *ngIf=\"label\">\n            <span class=\"fd-checkbox__text\">\n                {{ label }}\n            </span>\n        </ng-container>\n\n        <ng-container *ngIf=\"!label\">\n            <span class=\"fd-checkbox__text\">\n                <ng-content></ng-content>\n            </span>\n        </ng-container>\n    </div>\n</label>\n", styles: ["/*!\n * Fundamental Library Styles v0.25.1-rc.16\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-checkbox\n*/.fd-checkbox{-webkit-box-sizing:border-box;-webkit-appearance:none;appearance:none;background-color:var(--sapField_Background);border:0;border-color:var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);border-style:solid;border-width:var(--sapField_BorderWidth);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;opacity:.0001;outline:none;overflow:hidden;padding:0;position:absolute;text-overflow:ellipsis;white-space:nowrap}.fd-checkbox:after,.fd-checkbox:before{box-sizing:inherit;font-size:inherit}.fd-checkbox::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}.fd-checkbox::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-checkbox.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-checkbox.is-success.is-hover,.fd-checkbox.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-checkbox.is-success.is-focus,.fd-checkbox.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-checkbox.is-success.is-focus.is-hover,.fd-checkbox.is-success.is-focus:hover,.fd-checkbox.is-success:focus.is-hover,.fd-checkbox.is-success:focus:hover{box-shadow:none}.fd-checkbox.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-checkbox.is-error.is-hover,.fd-checkbox.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-checkbox.is-error.is-focus,.fd-checkbox.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-checkbox.is-error.is-focus.is-hover,.fd-checkbox.is-error.is-focus:hover,.fd-checkbox.is-error:focus.is-hover,.fd-checkbox.is-error:focus:hover{box-shadow:none}.fd-checkbox.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-checkbox.is-warning.is-hover,.fd-checkbox.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-checkbox.is-warning.is-focus,.fd-checkbox.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-checkbox.is-warning.is-focus.is-hover,.fd-checkbox.is-warning.is-focus:hover,.fd-checkbox.is-warning:focus.is-hover,.fd-checkbox.is-warning:focus:hover{box-shadow:none}.fd-checkbox.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-checkbox.is-alert.is-hover,.fd-checkbox.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-checkbox.is-alert.is-focus,.fd-checkbox.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-checkbox.is-alert.is-focus.is-hover,.fd-checkbox.is-alert.is-focus:hover,.fd-checkbox.is-alert:focus.is-hover,.fd-checkbox.is-alert:focus:hover{box-shadow:none}.fd-checkbox.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-checkbox.is-information.is-hover,.fd-checkbox.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-checkbox.is-information.is-focus,.fd-checkbox.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-checkbox.is-information.is-focus.is-hover,.fd-checkbox.is-information.is-focus:hover,.fd-checkbox.is-information:focus.is-hover,.fd-checkbox.is-information:focus:hover{box-shadow:none}.fd-checkbox.is-alert,.fd-checkbox.is-error,.fd-checkbox.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-checkbox.is-alert::placeholder,.fd-checkbox.is-error::placeholder,.fd-checkbox.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-checkbox.is-alert.is-focus,.fd-checkbox.is-alert:focus,.fd-checkbox.is-error.is-focus,.fd-checkbox.is-error:focus,.fd-checkbox.is-information.is-focus,.fd-checkbox.is-information:focus,.fd-checkbox.is-warning.is-focus,.fd-checkbox.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-checkbox.is-error::placeholder{color:var(--sapField_TextColor)}.fd-checkbox.is-disabled,.fd-checkbox:disabled,.fd-checkbox[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-checkbox.is-disabled::placeholder,.fd-checkbox:disabled::placeholder,.fd-checkbox[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-checkbox.is-readonly,.fd-checkbox[aria-readonly=true],.fd-checkbox[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events:none}.fd-checkbox.is-readonly::placeholder,.fd-checkbox[aria-readonly=true]::placeholder,.fd-checkbox[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-checkbox.is-readonly.is-hover,.fd-checkbox.is-readonly:hover,.fd-checkbox[aria-readonly=true].is-hover,.fd-checkbox[aria-readonly=true]:hover,.fd-checkbox[readonly].is-hover,.fd-checkbox[readonly]:hover{box-shadow:none}.fd-checkbox.is-readonly.is-focus,.fd-checkbox.is-readonly:focus,.fd-checkbox[aria-readonly=true].is-focus,.fd-checkbox[aria-readonly=true]:focus,.fd-checkbox[readonly].is-focus,.fd-checkbox[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}.fd-checkbox,.fd-checkbox.is-error,.fd-checkbox.is-information,.fd-checkbox.is-success,.fd-checkbox.is-warning{border-style:initial}.fd-checkbox__label{-webkit-box-sizing:border-box;-ms-flex-item-align:start;align-items:center;align-self:flex-start;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);cursor:text;cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0 .5rem 0 0;max-width:100%;overflow:hidden;padding:0;padding:var(--fdCheckbox_Padding);position:relative;text-overflow:ellipsis;white-space:nowrap;width:-moz-fit-content;width:fit-content}.fd-checkbox__label:after,.fd-checkbox__label:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__label[dir=rtl],[dir=rtl] .fd-checkbox__label{margin-left:.5rem;margin-right:0}.fd-checkbox__label:before{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:var(--fdCheckbox_Background_Color);border:var(--fdCheckbox_Border);border-radius:var(--sapField_BorderCornerRadius);color:var(--fdCheckbox_Selected_Color);content:\"\";display:inline-flex;font-family:SAP-icons;height:var(--fdCheckbox_Dimensions);justify-content:center;min-width:var(--fdCheckbox_Dimensions);width:var(--fdCheckbox_Dimensions)}.fd-checkbox__label:after{padding-left:.125rem;position:relative}.fd-checkbox__label.is-empty,.fd-checkbox__label:empty{margin:0}.fd-checkbox__label[dir=rtl]:after,[dir=rtl] .fd-checkbox__label:after{padding-left:0;padding-right:.125rem}.fd-checkbox__label.is-hover:before,.fd-checkbox__label:hover:before{-webkit-box-shadow:var(--fdCheckbox_Hover_Shadow);background-color:var(--fdCheckbox_Hover_Background);border-color:var(--fdCheckbox_Hover_Border_Color);box-shadow:var(--fdCheckbox_Hover_Shadow)}.fd-checkbox__label:focus{outline:none}.fd-checkbox__label--required .fd-checkbox__text,.fd-checkbox__label[aria-required=true] .fd-checkbox__text{padding-right:.5rem}.fd-checkbox__label--required .fd-checkbox__text[dir=rtl],.fd-checkbox__label[aria-required=true] .fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox__label--required .fd-checkbox__text,[dir=rtl] .fd-checkbox__label[aria-required=true] .fd-checkbox__text{padding-left:.5rem;padding-right:0}.fd-checkbox__label--required .fd-checkbox__text:after,.fd-checkbox__label[aria-required=true] .fd-checkbox__text:after{color:var(--sapField_RequiredColor);content:\"*\";font-size:var(--sapFontSize);font-weight:700;padding-left:.125rem;position:absolute}.fd-checkbox__label--required .fd-checkbox__text[dir=rtl]:after,.fd-checkbox__label[aria-required=true] .fd-checkbox__text[dir=rtl]:after,[dir=rtl] .fd-checkbox__label--required .fd-checkbox__text:after,[dir=rtl] .fd-checkbox__label[aria-required=true] .fd-checkbox__text:after{padding-left:0;padding-right:.125rem}.fd-checkbox__label-container{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:1rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;pointer-events:none;width:100%}.fd-checkbox__label-container:after,.fd-checkbox__label-container:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;margin-left:var(--fdCheckbox_Padding);margin-right:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-checkbox__text:after,.fd-checkbox__text:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox__text{margin-left:0;margin-right:var(--fdCheckbox_Padding)}.fd-checkbox:checked+.fd-checkbox__label:before{content:\"\\e05b\"}.fd-checkbox:indeterminate+.fd-checkbox__label:after{background-color:var(--fdCheckbox_Selected_Color);content:\"\";height:var(--fdCheckbox_Tristate_Size);margin-left:var(--fdCheckbox_Tristate_Offset);position:absolute;width:var(--fdCheckbox_Tristate_Size)}.fd-checkbox:indeterminate+.fd-checkbox__label--compact:after{--fdCheckbox_Tristate_Size:var(--fdCheckbox_Tristate_Compact_Size);--fdCheckbox_Tristate_Offset:var(--fdCheckbox_Tristate_Compact_Offset)}.fd-checkbox[dir=rtl]:indeterminate+.fd-checkbox__label:after,[dir=rtl] .fd-checkbox:indeterminate+.fd-checkbox__label:after{margin-left:0;margin-right:var(--fdCheckbox_Tristate_Offset)}.fd-checkbox.is-alert+.fd-checkbox__label,.fd-checkbox.is-warning+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_WarningBackground);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--sapField_WarningBorderWidth) var(--fdCheckbox_Warning_Error_Information_Border_Style) var(--sapField_WarningColor);--fdCheckbox_Hover_Shadow:var(--fdCheckbox_Warning_State_Shadow);--fdCheckbox_Hover_Border_Color:var(--sapField_WarningColor);--fdCheckbox_Selected_Color:var(--sapField_TextColor)}.fd-checkbox.is-error+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_InvalidBackground);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--sapField_InvalidBorderWidth) var(--fdCheckbox_Warning_Error_Information_Border_Style) var(--sapField_InvalidColor);--fdCheckbox_Hover_Shadow:var(--fdCheckbox_Error_State_Shadow);--fdCheckbox_Hover_Border_Color:var(--sapField_InvalidColor);--fdCheckbox_Selected_Color:var(--sapField_InvalidColor)}.fd-checkbox.is-success+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_SuccessBackground);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--sapField_SuccessBorderWidth) solid var(--sapField_SuccessColor);--fdCheckbox_Hover_Shadow:var(--fdCheckbox_Success_State_Shadow);--fdCheckbox_Hover_Border_Color:var(--sapField_SuccessColor);--fdCheckbox_Selected_Color:var(--sapField_SuccessColor)}.fd-checkbox.is-information+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_InformationBackground);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--sapField_InformationBorderWidth) var(--fdCheckbox_Warning_Error_Information_Border_Style) var(--sapField_InformationColor);--fdCheckbox_Hover_Shadow:var(--fdCheckbox_Information_State_Shadow);--fdCheckbox_Hover_Border_Color:var(--sapField_InformationColor);--fdCheckbox_Selected_Color:var(--sapField_InformationColor)}.fd-checkbox.is-readonly+.fd-checkbox__label,.fd-checkbox[readonly]+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_ReadOnly_Background);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--fdCheckbox_Readonly_Border_Width) var(--fdCheckbox_Readonly_Border_Type) var(--sapField_ReadOnly_BorderColor);--fdCheckbox_Hover_Shadow:none;--fdCheckbox_Hover_Border_Color:var(--sapField_ReadOnly_BorderColor);--fdCheckbox_Selected_Color:var(--sapContent_NonInteractiveIconColor)}.fd-checkbox.is-focus,.fd-checkbox:focus{z-index:5}.fd-checkbox.is-focus+.fd-checkbox__label,.fd-checkbox:focus+.fd-checkbox__label{border-radius:var(--fdCheckbox_Outline_Border_Radius);outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:calc(var(--fdCheckbox_Focus_Outline_Offset) - var(--fdCheckbox_Padding))}.fd-checkbox.is-disabled,.fd-checkbox:disabled,.fd-checkbox[aria-disabled=true]{opacity:.0001}.fd-checkbox.is-disabled+.fd-checkbox__label,.fd-checkbox:disabled+.fd-checkbox__label,.fd-checkbox[aria-disabled=true]+.fd-checkbox__label{opacity:.4;pointer-events:none}.fd-checkbox--compact+.fd-checkbox__label{--fdCheckbox_Dimensions:var(--fdCheckbox_Compact_Dimensions);--fdCheckbox_Padding:var(--fdCheckbox_Compact_Padding)}.fd-checkbox--compact.is-focus,.fd-checkbox--compact:focus{z-index:5}.fd-checkbox--compact.is-focus+.fd-checkbox__label,.fd-checkbox--compact:focus+.fd-checkbox__label{--fdCheckbox_Outline_Border_Radius:var(--fdCheckbox_Compact_Outline_Border_Radius)}fd-checkbox .fd-checkbox__text:empty{margin:0}fd-checkbox .fd-checkbox__label{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "labelElement", first: true, predicate: ["labelElement"], descendants: true }], ngImport: i0, template: "<input\n    #inputElement\n    type=\"checkbox\"\n    class=\"fd-checkbox\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    [indeterminate]=\"isIndeterminate\"\n    [checked]=\"isChecked\"\n    [attr.tabindex]=\"tabIndexValue\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-required]=\"required\"\n    [class]=\"state ? 'is-' + state : ''\"\n    (click)=\"_onInputClick($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n/>\n\n<label\n    class=\"fd-checkbox__label\"\n    #labelElement\n    [for]=\"inputId\"\n    [class]=\"labelClass\"\n    [attr.title]=\"title\"\n    [class.fd-checkbox__label--required]=\"required\"\n    (click)=\"_onLabelClick($event)\"\n>\n    <div class=\"fd-checkbox__label-container\">\n        <ng-container *ngIf=\"label\">\n            <span class=\"fd-checkbox__text\">\n                {{ label }}\n            </span>\n        </ng-container>\n\n        <ng-container *ngIf=\"!label\">\n            <span class=\"fd-checkbox__text\">\n                <ng-content></ng-content>\n            </span>\n        </ng-container>\n    </div>\n</label>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.27\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-checkbox\n*/.fd-checkbox{-webkit-box-sizing:border-box;-webkit-appearance:none;appearance:none;background-color:var(--sapField_Background);border:0;border-color:var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);border-style:solid;border-width:var(--sapField_BorderWidth);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;opacity:.0001;outline:none;overflow:hidden;padding:0;position:absolute;text-overflow:ellipsis;white-space:nowrap}.fd-checkbox:after,.fd-checkbox:before{box-sizing:inherit;font-size:inherit}.fd-checkbox::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}.fd-checkbox::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-checkbox.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-checkbox.is-success.is-hover,.fd-checkbox.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-checkbox.is-success.is-focus,.fd-checkbox.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-checkbox.is-success.is-focus.is-hover,.fd-checkbox.is-success.is-focus:hover,.fd-checkbox.is-success:focus.is-hover,.fd-checkbox.is-success:focus:hover{box-shadow:none}.fd-checkbox.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-checkbox.is-error.is-hover,.fd-checkbox.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-checkbox.is-error.is-focus,.fd-checkbox.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-checkbox.is-error.is-focus.is-hover,.fd-checkbox.is-error.is-focus:hover,.fd-checkbox.is-error:focus.is-hover,.fd-checkbox.is-error:focus:hover{box-shadow:none}.fd-checkbox.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-checkbox.is-warning.is-hover,.fd-checkbox.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-checkbox.is-warning.is-focus,.fd-checkbox.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-checkbox.is-warning.is-focus.is-hover,.fd-checkbox.is-warning.is-focus:hover,.fd-checkbox.is-warning:focus.is-hover,.fd-checkbox.is-warning:focus:hover{box-shadow:none}.fd-checkbox.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-checkbox.is-alert.is-hover,.fd-checkbox.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-checkbox.is-alert.is-focus,.fd-checkbox.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-checkbox.is-alert.is-focus.is-hover,.fd-checkbox.is-alert.is-focus:hover,.fd-checkbox.is-alert:focus.is-hover,.fd-checkbox.is-alert:focus:hover{box-shadow:none}.fd-checkbox.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-checkbox.is-information.is-hover,.fd-checkbox.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-checkbox.is-information.is-focus,.fd-checkbox.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-checkbox.is-information.is-focus.is-hover,.fd-checkbox.is-information.is-focus:hover,.fd-checkbox.is-information:focus.is-hover,.fd-checkbox.is-information:focus:hover{box-shadow:none}.fd-checkbox.is-alert,.fd-checkbox.is-error,.fd-checkbox.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-checkbox.is-alert::placeholder,.fd-checkbox.is-error::placeholder,.fd-checkbox.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-checkbox.is-alert.is-focus,.fd-checkbox.is-alert:focus,.fd-checkbox.is-error.is-focus,.fd-checkbox.is-error:focus,.fd-checkbox.is-information.is-focus,.fd-checkbox.is-information:focus,.fd-checkbox.is-warning.is-focus,.fd-checkbox.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-checkbox.is-error::placeholder{color:var(--sapField_TextColor)}.fd-checkbox.is-disabled,.fd-checkbox:disabled,.fd-checkbox[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-checkbox.is-disabled::placeholder,.fd-checkbox:disabled::placeholder,.fd-checkbox[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-checkbox.is-readonly,.fd-checkbox[aria-readonly=true],.fd-checkbox[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events:none}.fd-checkbox.is-readonly::placeholder,.fd-checkbox[aria-readonly=true]::placeholder,.fd-checkbox[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-checkbox.is-readonly.is-hover,.fd-checkbox.is-readonly:hover,.fd-checkbox[aria-readonly=true].is-hover,.fd-checkbox[aria-readonly=true]:hover,.fd-checkbox[readonly].is-hover,.fd-checkbox[readonly]:hover{box-shadow:none}.fd-checkbox.is-readonly.is-focus,.fd-checkbox.is-readonly:focus,.fd-checkbox[aria-readonly=true].is-focus,.fd-checkbox[aria-readonly=true]:focus,.fd-checkbox[readonly].is-focus,.fd-checkbox[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}.fd-checkbox,.fd-checkbox.is-error,.fd-checkbox.is-information,.fd-checkbox.is-success,.fd-checkbox.is-warning{border-style:initial}.fd-checkbox__label{-webkit-box-sizing:border-box;-ms-flex-item-align:start;align-items:center;align-self:flex-start;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);cursor:text;cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0 .5rem 0 0;max-width:100%;overflow:hidden;padding:0;padding:var(--fdCheckbox_Padding);position:relative;text-overflow:ellipsis;white-space:nowrap;width:-moz-fit-content;width:fit-content}.fd-checkbox__label:after,.fd-checkbox__label:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__label[dir=rtl],[dir=rtl] .fd-checkbox__label{margin-left:.5rem;margin-right:0}.fd-checkbox__label:before{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:var(--fdCheckbox_Background_Color);border:var(--fdCheckbox_Border);border-radius:var(--sapField_BorderCornerRadius);color:var(--fdCheckbox_Selected_Color);content:\"\";display:inline-flex;font-family:SAP-icons;height:var(--fdCheckbox_Dimensions);justify-content:center;min-width:var(--fdCheckbox_Dimensions);width:var(--fdCheckbox_Dimensions)}.fd-checkbox__label:after{padding-left:.125rem;position:relative}.fd-checkbox__label.is-empty,.fd-checkbox__label:empty{margin:0}.fd-checkbox__label[dir=rtl]:after,[dir=rtl] .fd-checkbox__label:after{padding-left:0;padding-right:.125rem}.fd-checkbox__label.is-hover:before,.fd-checkbox__label:hover:before{-webkit-box-shadow:var(--fdCheckbox_Hover_Shadow);background-color:var(--fdCheckbox_Hover_Background);border-color:var(--fdCheckbox_Hover_Border_Color);box-shadow:var(--fdCheckbox_Hover_Shadow)}.fd-checkbox__label:focus{outline:none}.fd-checkbox__label--required .fd-checkbox__text,.fd-checkbox__label[aria-required=true] .fd-checkbox__text{padding-right:.5rem}.fd-checkbox__label--required .fd-checkbox__text[dir=rtl],.fd-checkbox__label[aria-required=true] .fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox__label--required .fd-checkbox__text,[dir=rtl] .fd-checkbox__label[aria-required=true] .fd-checkbox__text{padding-left:.5rem;padding-right:0}.fd-checkbox__label--required .fd-checkbox__text:after,.fd-checkbox__label[aria-required=true] .fd-checkbox__text:after{color:var(--sapField_RequiredColor);content:\"*\";font-size:var(--sapFontSize);font-weight:700;padding-left:.125rem;position:absolute}.fd-checkbox__label--required .fd-checkbox__text[dir=rtl]:after,.fd-checkbox__label[aria-required=true] .fd-checkbox__text[dir=rtl]:after,[dir=rtl] .fd-checkbox__label--required .fd-checkbox__text:after,[dir=rtl] .fd-checkbox__label[aria-required=true] .fd-checkbox__text:after{padding-left:0;padding-right:.125rem}.fd-checkbox__label-container{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:1rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;pointer-events:none;width:100%}.fd-checkbox__label-container:after,.fd-checkbox__label-container:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;margin-left:var(--fdCheckbox_Padding);margin-right:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-checkbox__text:after,.fd-checkbox__text:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox__text{margin-left:0;margin-right:var(--fdCheckbox_Padding)}.fd-checkbox:checked+.fd-checkbox__label:before{content:\"\\e05b\"}.fd-checkbox:indeterminate+.fd-checkbox__label:after{background-color:var(--fdCheckbox_Selected_Color);content:\"\";height:var(--fdCheckbox_Tristate_Size);margin-left:var(--fdCheckbox_Tristate_Offset);position:absolute;width:var(--fdCheckbox_Tristate_Size)}.fd-checkbox:indeterminate+.fd-checkbox__label--compact:after{--fdCheckbox_Tristate_Size:var(--fdCheckbox_Tristate_Compact_Size);--fdCheckbox_Tristate_Offset:var(--fdCheckbox_Tristate_Compact_Offset)}.fd-checkbox[dir=rtl]:indeterminate+.fd-checkbox__label:after,[dir=rtl] .fd-checkbox:indeterminate+.fd-checkbox__label:after{margin-left:0;margin-right:var(--fdCheckbox_Tristate_Offset)}.fd-checkbox.is-alert+.fd-checkbox__label,.fd-checkbox.is-warning+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_WarningBackground);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--sapField_WarningBorderWidth) var(--fdCheckbox_Warning_Error_Information_Border_Style) var(--sapField_WarningColor);--fdCheckbox_Hover_Shadow:var(--fdCheckbox_Warning_State_Shadow);--fdCheckbox_Hover_Border_Color:var(--sapField_WarningColor);--fdCheckbox_Selected_Color:var(--sapField_TextColor)}.fd-checkbox.is-error+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_InvalidBackground);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--sapField_InvalidBorderWidth) var(--fdCheckbox_Warning_Error_Information_Border_Style) var(--sapField_InvalidColor);--fdCheckbox_Hover_Shadow:var(--fdCheckbox_Error_State_Shadow);--fdCheckbox_Hover_Border_Color:var(--sapField_InvalidColor);--fdCheckbox_Selected_Color:var(--sapField_InvalidColor)}.fd-checkbox.is-success+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_SuccessBackground);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--sapField_SuccessBorderWidth) solid var(--sapField_SuccessColor);--fdCheckbox_Hover_Shadow:var(--fdCheckbox_Success_State_Shadow);--fdCheckbox_Hover_Border_Color:var(--sapField_SuccessColor);--fdCheckbox_Selected_Color:var(--sapField_SuccessColor)}.fd-checkbox.is-information+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_InformationBackground);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--sapField_InformationBorderWidth) var(--fdCheckbox_Warning_Error_Information_Border_Style) var(--sapField_InformationColor);--fdCheckbox_Hover_Shadow:var(--fdCheckbox_Information_State_Shadow);--fdCheckbox_Hover_Border_Color:var(--sapField_InformationColor);--fdCheckbox_Selected_Color:var(--sapField_InformationColor)}.fd-checkbox.is-readonly+.fd-checkbox__label,.fd-checkbox[readonly]+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_ReadOnly_Background);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--fdCheckbox_Readonly_Border_Width) var(--fdCheckbox_Readonly_Border_Type) var(--sapField_ReadOnly_BorderColor);--fdCheckbox_Hover_Shadow:none;--fdCheckbox_Hover_Border_Color:var(--sapField_ReadOnly_BorderColor);--fdCheckbox_Selected_Color:var(--sapContent_NonInteractiveIconColor)}.fd-checkbox.is-focus,.fd-checkbox:focus{z-index:5}.fd-checkbox.is-focus+.fd-checkbox__label,.fd-checkbox:focus+.fd-checkbox__label{border-radius:var(--fdCheckbox_Outline_Border_Radius);outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:calc(var(--fdCheckbox_Focus_Outline_Offset) - var(--fdCheckbox_Padding))}.fd-checkbox.is-disabled,.fd-checkbox:disabled,.fd-checkbox[aria-disabled=true]{opacity:.0001}.fd-checkbox.is-disabled+.fd-checkbox__label,.fd-checkbox:disabled+.fd-checkbox__label,.fd-checkbox[aria-disabled=true]+.fd-checkbox__label{opacity:.4;pointer-events:none}.fd-checkbox--compact+.fd-checkbox__label{--fdCheckbox_Dimensions:var(--fdCheckbox_Compact_Dimensions);--fdCheckbox_Padding:var(--fdCheckbox_Compact_Padding)}.fd-checkbox--compact.is-focus,.fd-checkbox--compact:focus{z-index:5}.fd-checkbox--compact.is-focus+.fd-checkbox__label,.fd-checkbox--compact:focus+.fd-checkbox__label{--fdCheckbox_Outline_Border_Radius:var(--fdCheckbox_Compact_Outline_Border_Radius)}fd-checkbox .fd-checkbox__text:empty{margin:0}fd-checkbox .fd-checkbox__label{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-checkbox', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -207,7 +207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                         },
                         registerFormItemControl(CheckboxComponent),
                         contentDensityObserverProviders()
-                    ], host: { '[attr.tabindex]': '-1' }, template: "<input\n    #inputElement\n    type=\"checkbox\"\n    class=\"fd-checkbox\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    [indeterminate]=\"isIndeterminate\"\n    [checked]=\"isChecked\"\n    [attr.tabindex]=\"tabIndexValue\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-required]=\"required\"\n    [class]=\"state ? 'is-' + state : ''\"\n    (click)=\"_onInputClick($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n/>\n\n<label\n    class=\"fd-checkbox__label\"\n    #labelElement\n    [for]=\"inputId\"\n    [class]=\"labelClass\"\n    [attr.title]=\"title\"\n    [class.fd-checkbox__label--required]=\"required\"\n    (click)=\"_onLabelClick($event)\"\n>\n    <div class=\"fd-checkbox__label-container\">\n        <ng-container *ngIf=\"label\">\n            <span class=\"fd-checkbox__text\">\n                {{ label }}\n            </span>\n        </ng-container>\n\n        <ng-container *ngIf=\"!label\">\n            <span class=\"fd-checkbox__text\">\n                <ng-content></ng-content>\n            </span>\n        </ng-container>\n    </div>\n</label>\n", styles: ["/*!\n * Fundamental Library Styles v0.25.1-rc.16\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-checkbox\n*/.fd-checkbox{-webkit-box-sizing:border-box;-webkit-appearance:none;appearance:none;background-color:var(--sapField_Background);border:0;border-color:var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);border-style:solid;border-width:var(--sapField_BorderWidth);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;opacity:.0001;outline:none;overflow:hidden;padding:0;position:absolute;text-overflow:ellipsis;white-space:nowrap}.fd-checkbox:after,.fd-checkbox:before{box-sizing:inherit;font-size:inherit}.fd-checkbox::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}.fd-checkbox::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-checkbox.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-checkbox.is-success.is-hover,.fd-checkbox.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-checkbox.is-success.is-focus,.fd-checkbox.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-checkbox.is-success.is-focus.is-hover,.fd-checkbox.is-success.is-focus:hover,.fd-checkbox.is-success:focus.is-hover,.fd-checkbox.is-success:focus:hover{box-shadow:none}.fd-checkbox.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-checkbox.is-error.is-hover,.fd-checkbox.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-checkbox.is-error.is-focus,.fd-checkbox.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-checkbox.is-error.is-focus.is-hover,.fd-checkbox.is-error.is-focus:hover,.fd-checkbox.is-error:focus.is-hover,.fd-checkbox.is-error:focus:hover{box-shadow:none}.fd-checkbox.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-checkbox.is-warning.is-hover,.fd-checkbox.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-checkbox.is-warning.is-focus,.fd-checkbox.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-checkbox.is-warning.is-focus.is-hover,.fd-checkbox.is-warning.is-focus:hover,.fd-checkbox.is-warning:focus.is-hover,.fd-checkbox.is-warning:focus:hover{box-shadow:none}.fd-checkbox.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-checkbox.is-alert.is-hover,.fd-checkbox.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-checkbox.is-alert.is-focus,.fd-checkbox.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-checkbox.is-alert.is-focus.is-hover,.fd-checkbox.is-alert.is-focus:hover,.fd-checkbox.is-alert:focus.is-hover,.fd-checkbox.is-alert:focus:hover{box-shadow:none}.fd-checkbox.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-checkbox.is-information.is-hover,.fd-checkbox.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-checkbox.is-information.is-focus,.fd-checkbox.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-checkbox.is-information.is-focus.is-hover,.fd-checkbox.is-information.is-focus:hover,.fd-checkbox.is-information:focus.is-hover,.fd-checkbox.is-information:focus:hover{box-shadow:none}.fd-checkbox.is-alert,.fd-checkbox.is-error,.fd-checkbox.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-checkbox.is-alert::placeholder,.fd-checkbox.is-error::placeholder,.fd-checkbox.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-checkbox.is-alert.is-focus,.fd-checkbox.is-alert:focus,.fd-checkbox.is-error.is-focus,.fd-checkbox.is-error:focus,.fd-checkbox.is-information.is-focus,.fd-checkbox.is-information:focus,.fd-checkbox.is-warning.is-focus,.fd-checkbox.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-checkbox.is-error::placeholder{color:var(--sapField_TextColor)}.fd-checkbox.is-disabled,.fd-checkbox:disabled,.fd-checkbox[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-checkbox.is-disabled::placeholder,.fd-checkbox:disabled::placeholder,.fd-checkbox[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-checkbox.is-readonly,.fd-checkbox[aria-readonly=true],.fd-checkbox[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events:none}.fd-checkbox.is-readonly::placeholder,.fd-checkbox[aria-readonly=true]::placeholder,.fd-checkbox[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-checkbox.is-readonly.is-hover,.fd-checkbox.is-readonly:hover,.fd-checkbox[aria-readonly=true].is-hover,.fd-checkbox[aria-readonly=true]:hover,.fd-checkbox[readonly].is-hover,.fd-checkbox[readonly]:hover{box-shadow:none}.fd-checkbox.is-readonly.is-focus,.fd-checkbox.is-readonly:focus,.fd-checkbox[aria-readonly=true].is-focus,.fd-checkbox[aria-readonly=true]:focus,.fd-checkbox[readonly].is-focus,.fd-checkbox[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}.fd-checkbox,.fd-checkbox.is-error,.fd-checkbox.is-information,.fd-checkbox.is-success,.fd-checkbox.is-warning{border-style:initial}.fd-checkbox__label{-webkit-box-sizing:border-box;-ms-flex-item-align:start;align-items:center;align-self:flex-start;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);cursor:text;cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0 .5rem 0 0;max-width:100%;overflow:hidden;padding:0;padding:var(--fdCheckbox_Padding);position:relative;text-overflow:ellipsis;white-space:nowrap;width:-moz-fit-content;width:fit-content}.fd-checkbox__label:after,.fd-checkbox__label:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__label[dir=rtl],[dir=rtl] .fd-checkbox__label{margin-left:.5rem;margin-right:0}.fd-checkbox__label:before{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:var(--fdCheckbox_Background_Color);border:var(--fdCheckbox_Border);border-radius:var(--sapField_BorderCornerRadius);color:var(--fdCheckbox_Selected_Color);content:\"\";display:inline-flex;font-family:SAP-icons;height:var(--fdCheckbox_Dimensions);justify-content:center;min-width:var(--fdCheckbox_Dimensions);width:var(--fdCheckbox_Dimensions)}.fd-checkbox__label:after{padding-left:.125rem;position:relative}.fd-checkbox__label.is-empty,.fd-checkbox__label:empty{margin:0}.fd-checkbox__label[dir=rtl]:after,[dir=rtl] .fd-checkbox__label:after{padding-left:0;padding-right:.125rem}.fd-checkbox__label.is-hover:before,.fd-checkbox__label:hover:before{-webkit-box-shadow:var(--fdCheckbox_Hover_Shadow);background-color:var(--fdCheckbox_Hover_Background);border-color:var(--fdCheckbox_Hover_Border_Color);box-shadow:var(--fdCheckbox_Hover_Shadow)}.fd-checkbox__label:focus{outline:none}.fd-checkbox__label--required .fd-checkbox__text,.fd-checkbox__label[aria-required=true] .fd-checkbox__text{padding-right:.5rem}.fd-checkbox__label--required .fd-checkbox__text[dir=rtl],.fd-checkbox__label[aria-required=true] .fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox__label--required .fd-checkbox__text,[dir=rtl] .fd-checkbox__label[aria-required=true] .fd-checkbox__text{padding-left:.5rem;padding-right:0}.fd-checkbox__label--required .fd-checkbox__text:after,.fd-checkbox__label[aria-required=true] .fd-checkbox__text:after{color:var(--sapField_RequiredColor);content:\"*\";font-size:var(--sapFontSize);font-weight:700;padding-left:.125rem;position:absolute}.fd-checkbox__label--required .fd-checkbox__text[dir=rtl]:after,.fd-checkbox__label[aria-required=true] .fd-checkbox__text[dir=rtl]:after,[dir=rtl] .fd-checkbox__label--required .fd-checkbox__text:after,[dir=rtl] .fd-checkbox__label[aria-required=true] .fd-checkbox__text:after{padding-left:0;padding-right:.125rem}.fd-checkbox__label-container{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:1rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;pointer-events:none;width:100%}.fd-checkbox__label-container:after,.fd-checkbox__label-container:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;margin-left:var(--fdCheckbox_Padding);margin-right:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-checkbox__text:after,.fd-checkbox__text:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox__text{margin-left:0;margin-right:var(--fdCheckbox_Padding)}.fd-checkbox:checked+.fd-checkbox__label:before{content:\"\\e05b\"}.fd-checkbox:indeterminate+.fd-checkbox__label:after{background-color:var(--fdCheckbox_Selected_Color);content:\"\";height:var(--fdCheckbox_Tristate_Size);margin-left:var(--fdCheckbox_Tristate_Offset);position:absolute;width:var(--fdCheckbox_Tristate_Size)}.fd-checkbox:indeterminate+.fd-checkbox__label--compact:after{--fdCheckbox_Tristate_Size:var(--fdCheckbox_Tristate_Compact_Size);--fdCheckbox_Tristate_Offset:var(--fdCheckbox_Tristate_Compact_Offset)}.fd-checkbox[dir=rtl]:indeterminate+.fd-checkbox__label:after,[dir=rtl] .fd-checkbox:indeterminate+.fd-checkbox__label:after{margin-left:0;margin-right:var(--fdCheckbox_Tristate_Offset)}.fd-checkbox.is-alert+.fd-checkbox__label,.fd-checkbox.is-warning+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_WarningBackground);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--sapField_WarningBorderWidth) var(--fdCheckbox_Warning_Error_Information_Border_Style) var(--sapField_WarningColor);--fdCheckbox_Hover_Shadow:var(--fdCheckbox_Warning_State_Shadow);--fdCheckbox_Hover_Border_Color:var(--sapField_WarningColor);--fdCheckbox_Selected_Color:var(--sapField_TextColor)}.fd-checkbox.is-error+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_InvalidBackground);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--sapField_InvalidBorderWidth) var(--fdCheckbox_Warning_Error_Information_Border_Style) var(--sapField_InvalidColor);--fdCheckbox_Hover_Shadow:var(--fdCheckbox_Error_State_Shadow);--fdCheckbox_Hover_Border_Color:var(--sapField_InvalidColor);--fdCheckbox_Selected_Color:var(--sapField_InvalidColor)}.fd-checkbox.is-success+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_SuccessBackground);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--sapField_SuccessBorderWidth) solid var(--sapField_SuccessColor);--fdCheckbox_Hover_Shadow:var(--fdCheckbox_Success_State_Shadow);--fdCheckbox_Hover_Border_Color:var(--sapField_SuccessColor);--fdCheckbox_Selected_Color:var(--sapField_SuccessColor)}.fd-checkbox.is-information+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_InformationBackground);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--sapField_InformationBorderWidth) var(--fdCheckbox_Warning_Error_Information_Border_Style) var(--sapField_InformationColor);--fdCheckbox_Hover_Shadow:var(--fdCheckbox_Information_State_Shadow);--fdCheckbox_Hover_Border_Color:var(--sapField_InformationColor);--fdCheckbox_Selected_Color:var(--sapField_InformationColor)}.fd-checkbox.is-readonly+.fd-checkbox__label,.fd-checkbox[readonly]+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_ReadOnly_Background);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--fdCheckbox_Readonly_Border_Width) var(--fdCheckbox_Readonly_Border_Type) var(--sapField_ReadOnly_BorderColor);--fdCheckbox_Hover_Shadow:none;--fdCheckbox_Hover_Border_Color:var(--sapField_ReadOnly_BorderColor);--fdCheckbox_Selected_Color:var(--sapContent_NonInteractiveIconColor)}.fd-checkbox.is-focus,.fd-checkbox:focus{z-index:5}.fd-checkbox.is-focus+.fd-checkbox__label,.fd-checkbox:focus+.fd-checkbox__label{border-radius:var(--fdCheckbox_Outline_Border_Radius);outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:calc(var(--fdCheckbox_Focus_Outline_Offset) - var(--fdCheckbox_Padding))}.fd-checkbox.is-disabled,.fd-checkbox:disabled,.fd-checkbox[aria-disabled=true]{opacity:.0001}.fd-checkbox.is-disabled+.fd-checkbox__label,.fd-checkbox:disabled+.fd-checkbox__label,.fd-checkbox[aria-disabled=true]+.fd-checkbox__label{opacity:.4;pointer-events:none}.fd-checkbox--compact+.fd-checkbox__label{--fdCheckbox_Dimensions:var(--fdCheckbox_Compact_Dimensions);--fdCheckbox_Padding:var(--fdCheckbox_Compact_Padding)}.fd-checkbox--compact.is-focus,.fd-checkbox--compact:focus{z-index:5}.fd-checkbox--compact.is-focus+.fd-checkbox__label,.fd-checkbox--compact:focus+.fd-checkbox__label{--fdCheckbox_Outline_Border_Radius:var(--fdCheckbox_Compact_Outline_Border_Radius)}fd-checkbox .fd-checkbox__text:empty{margin:0}fd-checkbox .fd-checkbox__label{-webkit-user-select:none;user-select:none}\n"] }]
+                    ], host: { '[attr.tabindex]': '-1' }, template: "<input\n    #inputElement\n    type=\"checkbox\"\n    class=\"fd-checkbox\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    [indeterminate]=\"isIndeterminate\"\n    [checked]=\"isChecked\"\n    [attr.tabindex]=\"tabIndexValue\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-describedby]=\"ariaDescribedBy\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-required]=\"required\"\n    [class]=\"state ? 'is-' + state : ''\"\n    (click)=\"_onInputClick($event)\"\n    (blur)=\"_onBlur()\"\n    (focus)=\"_onFocus()\"\n/>\n\n<label\n    class=\"fd-checkbox__label\"\n    #labelElement\n    [for]=\"inputId\"\n    [class]=\"labelClass\"\n    [attr.title]=\"title\"\n    [class.fd-checkbox__label--required]=\"required\"\n    (click)=\"_onLabelClick($event)\"\n>\n    <div class=\"fd-checkbox__label-container\">\n        <ng-container *ngIf=\"label\">\n            <span class=\"fd-checkbox__text\">\n                {{ label }}\n            </span>\n        </ng-container>\n\n        <ng-container *ngIf=\"!label\">\n            <span class=\"fd-checkbox__text\">\n                <ng-content></ng-content>\n            </span>\n        </ng-container>\n    </div>\n</label>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.27\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-checkbox\n*/.fd-checkbox{-webkit-box-sizing:border-box;-webkit-appearance:none;appearance:none;background-color:var(--sapField_Background);border:0;border-color:var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);border-style:solid;border-width:var(--sapField_BorderWidth);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;opacity:.0001;outline:none;overflow:hidden;padding:0;position:absolute;text-overflow:ellipsis;white-space:nowrap}.fd-checkbox:after,.fd-checkbox:before{box-sizing:inherit;font-size:inherit}.fd-checkbox::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:italic}.fd-checkbox::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-checkbox.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-checkbox.is-success.is-hover,.fd-checkbox.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-checkbox.is-success.is-focus,.fd-checkbox.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-checkbox.is-success.is-focus.is-hover,.fd-checkbox.is-success.is-focus:hover,.fd-checkbox.is-success:focus.is-hover,.fd-checkbox.is-success:focus:hover{box-shadow:none}.fd-checkbox.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-checkbox.is-error.is-hover,.fd-checkbox.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-checkbox.is-error.is-focus,.fd-checkbox.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-checkbox.is-error.is-focus.is-hover,.fd-checkbox.is-error.is-focus:hover,.fd-checkbox.is-error:focus.is-hover,.fd-checkbox.is-error:focus:hover{box-shadow:none}.fd-checkbox.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-checkbox.is-warning.is-hover,.fd-checkbox.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-checkbox.is-warning.is-focus,.fd-checkbox.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-checkbox.is-warning.is-focus.is-hover,.fd-checkbox.is-warning.is-focus:hover,.fd-checkbox.is-warning:focus.is-hover,.fd-checkbox.is-warning:focus:hover{box-shadow:none}.fd-checkbox.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-checkbox.is-alert.is-hover,.fd-checkbox.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-checkbox.is-alert.is-focus,.fd-checkbox.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-checkbox.is-alert.is-focus.is-hover,.fd-checkbox.is-alert.is-focus:hover,.fd-checkbox.is-alert:focus.is-hover,.fd-checkbox.is-alert:focus:hover{box-shadow:none}.fd-checkbox.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-checkbox.is-information.is-hover,.fd-checkbox.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-checkbox.is-information.is-focus,.fd-checkbox.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-checkbox.is-information.is-focus.is-hover,.fd-checkbox.is-information.is-focus:hover,.fd-checkbox.is-information:focus.is-hover,.fd-checkbox.is-information:focus:hover{box-shadow:none}.fd-checkbox.is-alert,.fd-checkbox.is-error,.fd-checkbox.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-checkbox.is-alert::placeholder,.fd-checkbox.is-error::placeholder,.fd-checkbox.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-checkbox.is-alert.is-focus,.fd-checkbox.is-alert:focus,.fd-checkbox.is-error.is-focus,.fd-checkbox.is-error:focus,.fd-checkbox.is-information.is-focus,.fd-checkbox.is-information:focus,.fd-checkbox.is-warning.is-focus,.fd-checkbox.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-checkbox.is-error::placeholder{color:var(--sapField_TextColor)}.fd-checkbox.is-disabled,.fd-checkbox:disabled,.fd-checkbox[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-checkbox.is-disabled::placeholder,.fd-checkbox:disabled::placeholder,.fd-checkbox[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-checkbox.is-readonly,.fd-checkbox[aria-readonly=true],.fd-checkbox[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events:none}.fd-checkbox.is-readonly::placeholder,.fd-checkbox[aria-readonly=true]::placeholder,.fd-checkbox[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-checkbox.is-readonly.is-hover,.fd-checkbox.is-readonly:hover,.fd-checkbox[aria-readonly=true].is-hover,.fd-checkbox[aria-readonly=true]:hover,.fd-checkbox[readonly].is-hover,.fd-checkbox[readonly]:hover{box-shadow:none}.fd-checkbox.is-readonly.is-focus,.fd-checkbox.is-readonly:focus,.fd-checkbox[aria-readonly=true].is-focus,.fd-checkbox[aria-readonly=true]:focus,.fd-checkbox[readonly].is-focus,.fd-checkbox[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}.fd-checkbox,.fd-checkbox.is-error,.fd-checkbox.is-information,.fd-checkbox.is-success,.fd-checkbox.is-warning{border-style:initial}.fd-checkbox__label{-webkit-box-sizing:border-box;-ms-flex-item-align:start;align-items:center;align-self:flex-start;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);cursor:text;cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0 .5rem 0 0;max-width:100%;overflow:hidden;padding:0;padding:var(--fdCheckbox_Padding);position:relative;text-overflow:ellipsis;white-space:nowrap;width:-moz-fit-content;width:fit-content}.fd-checkbox__label:after,.fd-checkbox__label:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__label[dir=rtl],[dir=rtl] .fd-checkbox__label{margin-left:.5rem;margin-right:0}.fd-checkbox__label:before{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:var(--fdCheckbox_Background_Color);border:var(--fdCheckbox_Border);border-radius:var(--sapField_BorderCornerRadius);color:var(--fdCheckbox_Selected_Color);content:\"\";display:inline-flex;font-family:SAP-icons;height:var(--fdCheckbox_Dimensions);justify-content:center;min-width:var(--fdCheckbox_Dimensions);width:var(--fdCheckbox_Dimensions)}.fd-checkbox__label:after{padding-left:.125rem;position:relative}.fd-checkbox__label.is-empty,.fd-checkbox__label:empty{margin:0}.fd-checkbox__label[dir=rtl]:after,[dir=rtl] .fd-checkbox__label:after{padding-left:0;padding-right:.125rem}.fd-checkbox__label.is-hover:before,.fd-checkbox__label:hover:before{-webkit-box-shadow:var(--fdCheckbox_Hover_Shadow);background-color:var(--fdCheckbox_Hover_Background);border-color:var(--fdCheckbox_Hover_Border_Color);box-shadow:var(--fdCheckbox_Hover_Shadow)}.fd-checkbox__label:focus{outline:none}.fd-checkbox__label--required .fd-checkbox__text,.fd-checkbox__label[aria-required=true] .fd-checkbox__text{padding-right:.5rem}.fd-checkbox__label--required .fd-checkbox__text[dir=rtl],.fd-checkbox__label[aria-required=true] .fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox__label--required .fd-checkbox__text,[dir=rtl] .fd-checkbox__label[aria-required=true] .fd-checkbox__text{padding-left:.5rem;padding-right:0}.fd-checkbox__label--required .fd-checkbox__text:after,.fd-checkbox__label[aria-required=true] .fd-checkbox__text:after{color:var(--sapField_RequiredColor);content:\"*\";font-size:var(--sapFontSize);font-weight:700;padding-left:.125rem;position:absolute}.fd-checkbox__label--required .fd-checkbox__text[dir=rtl]:after,.fd-checkbox__label[aria-required=true] .fd-checkbox__text[dir=rtl]:after,[dir=rtl] .fd-checkbox__label--required .fd-checkbox__text:after,[dir=rtl] .fd-checkbox__label[aria-required=true] .fd-checkbox__text:after{padding-left:0;padding-right:.125rem}.fd-checkbox__label-container{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:1rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;pointer-events:none;width:100%}.fd-checkbox__label-container:after,.fd-checkbox__label-container:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;margin-left:var(--fdCheckbox_Padding);margin-right:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-checkbox__text:after,.fd-checkbox__text:before{box-sizing:inherit;font-size:inherit}.fd-checkbox__text[dir=rtl],[dir=rtl] .fd-checkbox__text{margin-left:0;margin-right:var(--fdCheckbox_Padding)}.fd-checkbox:checked+.fd-checkbox__label:before{content:\"\\e05b\"}.fd-checkbox:indeterminate+.fd-checkbox__label:after{background-color:var(--fdCheckbox_Selected_Color);content:\"\";height:var(--fdCheckbox_Tristate_Size);margin-left:var(--fdCheckbox_Tristate_Offset);position:absolute;width:var(--fdCheckbox_Tristate_Size)}.fd-checkbox:indeterminate+.fd-checkbox__label--compact:after{--fdCheckbox_Tristate_Size:var(--fdCheckbox_Tristate_Compact_Size);--fdCheckbox_Tristate_Offset:var(--fdCheckbox_Tristate_Compact_Offset)}.fd-checkbox[dir=rtl]:indeterminate+.fd-checkbox__label:after,[dir=rtl] .fd-checkbox:indeterminate+.fd-checkbox__label:after{margin-left:0;margin-right:var(--fdCheckbox_Tristate_Offset)}.fd-checkbox.is-alert+.fd-checkbox__label,.fd-checkbox.is-warning+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_WarningBackground);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--sapField_WarningBorderWidth) var(--fdCheckbox_Warning_Error_Information_Border_Style) var(--sapField_WarningColor);--fdCheckbox_Hover_Shadow:var(--fdCheckbox_Warning_State_Shadow);--fdCheckbox_Hover_Border_Color:var(--sapField_WarningColor);--fdCheckbox_Selected_Color:var(--sapField_TextColor)}.fd-checkbox.is-error+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_InvalidBackground);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--sapField_InvalidBorderWidth) var(--fdCheckbox_Warning_Error_Information_Border_Style) var(--sapField_InvalidColor);--fdCheckbox_Hover_Shadow:var(--fdCheckbox_Error_State_Shadow);--fdCheckbox_Hover_Border_Color:var(--sapField_InvalidColor);--fdCheckbox_Selected_Color:var(--sapField_InvalidColor)}.fd-checkbox.is-success+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_SuccessBackground);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--sapField_SuccessBorderWidth) solid var(--sapField_SuccessColor);--fdCheckbox_Hover_Shadow:var(--fdCheckbox_Success_State_Shadow);--fdCheckbox_Hover_Border_Color:var(--sapField_SuccessColor);--fdCheckbox_Selected_Color:var(--sapField_SuccessColor)}.fd-checkbox.is-information+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_InformationBackground);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--sapField_InformationBorderWidth) var(--fdCheckbox_Warning_Error_Information_Border_Style) var(--sapField_InformationColor);--fdCheckbox_Hover_Shadow:var(--fdCheckbox_Information_State_Shadow);--fdCheckbox_Hover_Border_Color:var(--sapField_InformationColor);--fdCheckbox_Selected_Color:var(--sapField_InformationColor)}.fd-checkbox.is-readonly+.fd-checkbox__label,.fd-checkbox[readonly]+.fd-checkbox__label{--fdCheckbox_Background_Color:var(--sapField_ReadOnly_Background);--fdCheckbox_Hover_Background:var(--fdCheckbox_State_Hover_Background);--fdCheckbox_Border:var(--fdCheckbox_Readonly_Border_Width) var(--fdCheckbox_Readonly_Border_Type) var(--sapField_ReadOnly_BorderColor);--fdCheckbox_Hover_Shadow:none;--fdCheckbox_Hover_Border_Color:var(--sapField_ReadOnly_BorderColor);--fdCheckbox_Selected_Color:var(--sapContent_NonInteractiveIconColor)}.fd-checkbox.is-focus,.fd-checkbox:focus{z-index:5}.fd-checkbox.is-focus+.fd-checkbox__label,.fd-checkbox:focus+.fd-checkbox__label{border-radius:var(--fdCheckbox_Outline_Border_Radius);outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:calc(var(--fdCheckbox_Focus_Outline_Offset) - var(--fdCheckbox_Padding))}.fd-checkbox.is-disabled,.fd-checkbox:disabled,.fd-checkbox[aria-disabled=true]{opacity:.0001}.fd-checkbox.is-disabled+.fd-checkbox__label,.fd-checkbox:disabled+.fd-checkbox__label,.fd-checkbox[aria-disabled=true]+.fd-checkbox__label{opacity:.4;pointer-events:none}.fd-checkbox--compact+.fd-checkbox__label{--fdCheckbox_Dimensions:var(--fdCheckbox_Compact_Dimensions);--fdCheckbox_Padding:var(--fdCheckbox_Compact_Padding)}.fd-checkbox--compact.is-focus,.fd-checkbox--compact:focus{z-index:5}.fd-checkbox--compact.is-focus+.fd-checkbox__label,.fd-checkbox--compact:focus+.fd-checkbox__label{--fdCheckbox_Outline_Border_Radius:var(--fdCheckbox_Compact_Outline_Border_Radius)}fd-checkbox .fd-checkbox__text:empty{margin:0}fd-checkbox .fd-checkbox__label{-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Attribute,
                     args: ['tabIndexValue']

package/esm2020/combobox/combobox.component.mjs

@@ -502,7 +502,7 @@ ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
         registerFormItemControl(ComboboxComponent),
         MenuKeyboardService,
         contentDensityObserverProviders()
-    ], queries: [{ propertyName: "listMessages", predicate: ListMessageDirective }], viewQueries: [{ propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "popoverComponent", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "inputGroup", first: true, predicate: InputGroupComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n    <fd-popover\n        additionalBodyClass=\"fd-popover-custom-list\"\n        [class.fd-combobox-full-width]=\"isSearch\"\n        [isOpen]=\"open && displayedValues && displayedValues.length > 0\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [scrollStrategy]=\"_repositionScrollStrategy\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readOnly\"\n        [maxWidth]=\"640\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    >\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body [hidden]=\"!displayedValues?.length\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template let-term=\"term\" #itemSource>\n    <span\n        fd-list-title\n        *ngIf=\"!itemTemplate\"\n        [innerHTML]=\"term | displayFnPipe: displayFn | highlight: inputText:highlighting && filterHighlight\"\n    >\n    </span>\n    <ng-container *ngIf=\"itemTemplate\">\n        <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: term }\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n    <fd-input-group\n        [button]=\"showDropdownButton\"\n        [glyph]=\"showDropdownButton ? glyphValue : null\"\n        [state]=\"state\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readOnly\"\n        [isControl]=\"true\"\n        [isExpanded]=\"!mobile && open && displayedValues.length > 0\"\n        [showFocus]=\"!clearInputBtnFocused\"\n        [glyphAriaLabel]=\"ariaLabel\"\n        [iconTitle]=\"title\"\n        (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n        (click)=\"mobile && isOpenChangeHandle(true)\"\n    >\n        <input\n            #searchInputElement\n            fd-auto-complete\n            fd-input-group-input\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-describedby]=\"comboboxId + '-list-results'\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? comboboxId + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            [attr.aria-expanded]=\"!mobile && open && displayedValues.length\"\n            [attr.aria-required]=\"required\"\n            [attr.tabindex]=\"readOnly || disabled ? -1 : null\"\n            [enable]=\"autoComplete && !mobile\"\n            [displayFn]=\"displayFn\"\n            [options]=\"dropdownValues\"\n            [inputText]=\"inputText\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readOnly\"\n            [attr.aria-readonly]=\"readOnly\"\n            [placeholder]=\"placeholder\"\n            [id]=\"inputId\"\n            [(ngModel)]=\"inputText\"\n            (onComplete)=\"handleAutoComplete($event)\"\n            (keydown)=\"onInputKeydownHandler($event)\"\n            (ngModelChange)=\"handleSearchTermChange()\"\n            (blur)=\"handleBlur()\"\n        />\n        <span\n            class=\"fd-input-group__addon fd-input-group__addon--button\"\n            [class.fd-input-group__addon--compact]=\"_contentDensityObserver.isCompact$ | async\"\n            [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n            *ngIf=\"isSearch && showClearButton && inputText && inputText.length > 0\"\n        >\n            <button\n                fd-button\n                class=\"fd-input-group__button\"\n                type=\"button\"\n                [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                title=\"Clear input\"\n                [class.fd-shellbar__button]=\"inShellbar\"\n                [attr.tabindex]=\"buttonFocusable ? 0 : -1\"\n                (focus)=\"clearInputBtnFocus()\"\n                (blur)=\"clearInputBtnBlur()\"\n                (click)=\"_handleClearSearchTerm()\"\n            >\n                <fd-icon glyph=\"decline\"></fd-icon>\n            </button>\n        </span>\n    </fd-input-group>\n    <div [id]=\"comboboxId + '-list-results'\" class=\"fd-combobox-count-list-results\">\n        {{ displayedValues?.length || 0 }} result list items\n    </div>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        class=\"fd-combobox-custom-list fd-combobox-input-menu-overflow\"\n        [dropdownMode]=\"true\"\n        [id]=\"comboboxId + '-result'\"\n        role=\"listbox\"\n        [attr.aria-labelledby]=\"comboboxId + '-search'\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [hasMessage]=\"listMessages && listMessages.length > 0\"\n        [byline]=\"byline\"\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n    >\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"groupFn\">\n            <ng-container *ngFor=\"let group of displayedValues | listGroupPipe: groupFn\">\n                <li role=\"group\" fd-list-group-header [tabindex]=\"0\">\n                    <span fd-list-title>{{ group.key }}</span>\n                </li>\n                <li\n                    role=\"option\"\n                    fd-list-item\n                    [attr.aria-placeholder]=\"group.key\"\n                    [tabindex]=\"0\"\n                    class=\"fd-combobox-list-item\"\n                    *ngFor=\"let term of group.value\"\n                    [selected]=\"isSelected(term)\"\n                    (keyDown)=\"onItemKeyDownHandler($event, term)\"\n                    (click)=\"onMenuClickHandler(term)\"\n                >\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemSource\"\n                        [ngTemplateOutletContext]=\"{ term: term }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!groupFn\">\n            <li\n                fd-list-item\n                role=\"option\"\n                [tabindex]=\"0\"\n                class=\"fd-combobox-list-item\"\n                *ngFor=\"let term of displayedValues\"\n                [selected]=\"isSelected(term)\"\n                (keyDown)=\"onItemKeyDownHandler($event, term)\"\n                (click)=\"onMenuClickHandler(term)\"\n            >\n                <ng-container [ngTemplateOutlet]=\"itemSource\" [ngTemplateOutletContext]=\"{ term: term }\"></ng-container>\n            </li>\n        </ng-container>\n    </ul>\n</ng-template>\n", styles: [".fd-combobox-custom-class,.fd-combobox-custom-class .fd-combobox-shellbar-custom{display:inline-block}.fd-combobox-input-menu-overflow{overflow:auto}.fd-list__item.fd-combobox-list-item{cursor:pointer}.fd-combobox-full-width{width:100%}.fd-combobox-count-list-results{position:absolute;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i5.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["disableScrollbar"] }, { kind: "component", type: i5.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i9.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i9.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i9.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "component", type: i10.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i2.AutoCompleteDirective, selector: "[fd-auto-complete]", inputs: ["options", "inputText", "enable", "displayFn"], outputs: ["onComplete"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DisplayFnPipe, name: "displayFnPipe" }, { kind: "pipe", type: i2.SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: i11.ListGroupPipe, name: "listGroupPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "listMessages", predicate: ListMessageDirective }], viewQueries: [{ propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "popoverComponent", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "inputGroup", first: true, predicate: InputGroupComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n    <fd-popover\n        additionalBodyClass=\"fd-popover-custom-list\"\n        [class.fd-combobox-full-width]=\"isSearch\"\n        [isOpen]=\"open && displayedValues && displayedValues.length > 0\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [scrollStrategy]=\"_repositionScrollStrategy\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readOnly\"\n        [maxWidth]=\"640\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    >\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body [hidden]=\"!displayedValues?.length\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template let-term=\"term\" #itemSource>\n    <span\n        fd-list-title\n        *ngIf=\"!itemTemplate\"\n        [innerHTML]=\"term | displayFnPipe: displayFn | highlight: inputText:highlighting && filterHighlight\"\n    >\n    </span>\n    <ng-container *ngIf=\"itemTemplate\">\n        <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: term }\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n    <fd-input-group\n        [button]=\"showDropdownButton\"\n        [glyph]=\"showDropdownButton ? glyphValue : null\"\n        [state]=\"state\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readOnly\"\n        [isControl]=\"true\"\n        [isExpanded]=\"!mobile && open && displayedValues.length > 0\"\n        [showFocus]=\"!clearInputBtnFocused\"\n        [glyphAriaLabel]=\"ariaLabel\"\n        [iconTitle]=\"title\"\n        (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n        (click)=\"mobile && isOpenChangeHandle(true)\"\n    >\n        <input\n            #searchInputElement\n            fd-auto-complete\n            fd-input-group-input\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-describedby]=\"comboboxId + '-list-results'\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? comboboxId + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            [attr.aria-expanded]=\"!mobile && open && displayedValues.length\"\n            [attr.aria-required]=\"required\"\n            [attr.tabindex]=\"readOnly || disabled ? -1 : null\"\n            [enable]=\"autoComplete && !mobile\"\n            [displayFn]=\"displayFn\"\n            [options]=\"dropdownValues\"\n            [inputText]=\"inputText\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readOnly\"\n            [attr.aria-readonly]=\"readOnly\"\n            [placeholder]=\"placeholder\"\n            [id]=\"inputId\"\n            [(ngModel)]=\"inputText\"\n            (onComplete)=\"handleAutoComplete($event)\"\n            (keydown)=\"onInputKeydownHandler($event)\"\n            (ngModelChange)=\"handleSearchTermChange()\"\n            (blur)=\"handleBlur()\"\n        />\n        <span\n            class=\"fd-input-group__addon fd-input-group__addon--button\"\n            [class.fd-input-group__addon--compact]=\"_contentDensityObserver.isCompact$ | async\"\n            [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n            *ngIf=\"isSearch && showClearButton && inputText && inputText.length > 0\"\n        >\n            <button\n                fd-button\n                class=\"fd-input-group__button\"\n                type=\"button\"\n                [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                title=\"Clear input\"\n                [class.fd-shellbar__button]=\"inShellbar\"\n                [attr.tabindex]=\"buttonFocusable ? 0 : -1\"\n                (focus)=\"clearInputBtnFocus()\"\n                (blur)=\"clearInputBtnBlur()\"\n                (click)=\"_handleClearSearchTerm()\"\n            >\n                <fd-icon glyph=\"decline\"></fd-icon>\n            </button>\n        </span>\n    </fd-input-group>\n    <div [id]=\"comboboxId + '-list-results'\" class=\"fd-combobox-count-list-results\">\n        {{ displayedValues?.length || 0 }} result list items\n    </div>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        class=\"fd-combobox-custom-list fd-combobox-input-menu-overflow\"\n        [dropdownMode]=\"true\"\n        [id]=\"comboboxId + '-result'\"\n        role=\"listbox\"\n        [attr.aria-labelledby]=\"comboboxId + '-search'\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [hasMessage]=\"listMessages && listMessages.length > 0\"\n        [byline]=\"byline\"\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n    >\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"groupFn\">\n            <ng-container *ngFor=\"let group of displayedValues | listGroupPipe: groupFn\">\n                <li role=\"group\" fd-list-group-header [tabindex]=\"0\">\n                    <span fd-list-title>{{ group.key }}</span>\n                </li>\n                <li\n                    role=\"option\"\n                    fd-list-item\n                    [attr.aria-placeholder]=\"group.key\"\n                    [tabindex]=\"0\"\n                    class=\"fd-combobox-list-item\"\n                    *ngFor=\"let term of group.value\"\n                    [selected]=\"isSelected(term)\"\n                    (keyDown)=\"onItemKeyDownHandler($event, term)\"\n                    (click)=\"onMenuClickHandler(term)\"\n                >\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemSource\"\n                        [ngTemplateOutletContext]=\"{ term: term }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!groupFn\">\n            <li\n                fd-list-item\n                role=\"option\"\n                [tabindex]=\"0\"\n                class=\"fd-combobox-list-item\"\n                *ngFor=\"let term of displayedValues\"\n                [selected]=\"isSelected(term)\"\n                (keyDown)=\"onItemKeyDownHandler($event, term)\"\n                (click)=\"onMenuClickHandler(term)\"\n            >\n                <ng-container [ngTemplateOutlet]=\"itemSource\" [ngTemplateOutletContext]=\"{ term: term }\"></ng-container>\n            </li>\n        </ng-container>\n    </ul>\n</ng-template>\n", styles: [".fd-combobox-custom-class,.fd-combobox-custom-class .fd-combobox-shellbar-custom{display:inline-block}.fd-combobox-input-menu-overflow{overflow:auto}.fd-list__item.fd-combobox-list-item{cursor:pointer}.fd-combobox-full-width{width:100%}.fd-combobox-count-list-results{position:absolute;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i5.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i5.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i9.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i9.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i9.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "component", type: i10.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i2.AutoCompleteDirective, selector: "[fd-auto-complete]", inputs: ["options", "inputText", "enable", "displayFn"], outputs: ["onComplete"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DisplayFnPipe, name: "displayFnPipe" }, { kind: "pipe", type: i2.SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: i11.ListGroupPipe, name: "listGroupPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-combobox', providers: [

package/esm2020/date-picker/date-picker.component.mjs

@@ -600,7 +600,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
         registerFormItemControl(DatePickerComponent),
         PopoverFormMessageService,
         PopoverService
-    ], viewQueries: [{ propertyName: "_calendarComponent", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<fd-popover\n    [(isOpen)]=\"isOpen\"\n    (isOpenChange)=\"_onOpenStateChanged($event)\"\n    [triggers]=\"[]\"\n    [placement]=\"placement\"\n    [disabled]=\"disabled\"\n    [focusTrapped]=\"true\"\n    [focusAutoCapture]=\"false\"\n    [appendTo]=\"appendTo\"\n>\n    <fd-popover-control>\n        <fd-input-group\n            #inputGroupComponent\n            [state]=\"state\"\n            [disabled]=\"disabled\"\n            [isControl]=\"true\"\n            [button]=\"true\"\n            [buttonFocusable]=\"buttonFocusable\"\n            glyph=\"appointment-2\"\n            [isExpanded]=\"isOpen\"\n            [glyphAriaLabel]=\"displayCalendarToggleLabel || ('coreDatePicker.displayCalendarToggleLabel' | fdTranslate)\"\n            [iconTitle]=\"displayCalendarToggleLabel || ('coreDatePicker.displayCalendarToggleLabel' | fdTranslate)\"\n            (addOnButtonClicked)=\"toggleCalendar()\"\n        >\n            <input\n                type=\"text\"\n                class=\"fd-input\"\n                fd-input-group-input\n                [disabled]=\"disabled\"\n                [placeholder]=\"placeholder\"\n                [attr.id]=\"inputId\"\n                aria-haspopup=\"grid\"\n                aria-autocomplete=\"none\"\n                [attr.aria-expanded]=\"isOpen\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-label]=\"_dateInputArialLabel || (_dateInputArialLabelKey | fdTranslate)\"\n                [attr.aria-required]=\"required\"\n                [attr.aria-describedby]=\"_formValueStateMessageId\"\n                [ngModel]=\"_inputFieldDate\"\n                (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n                (ngModelChange)=\"handleInputChange($event, true)\"\n                (blur)=\"_onBlur($event)\"\n            />\n        </fd-input-group>\n    </fd-popover-control>\n    <fd-popover-body [attr.aria-expanded]=\"isOpen\" [attr.aria-hidden]=\"!isOpen\">\n        <fd-form-message [embedded]=\"true\" *ngIf=\"_message\" [type]=\"state\">\n            {{ _message }}\n        </fd-form-message>\n        <ng-content></ng-content>\n\n        <fd-calendar\n            (closeCalendar)=\"closeFromCalendar()\"\n            [activeView]=\"activeView\"\n            [markWeekends]=\"markWeekends\"\n            [specialDaysRules]=\"specialDaysRules\"\n            [showWeekNumbers]=\"showWeekNumbers\"\n            [aggregatedYearGrid]=\"aggregatedYearGrid\"\n            [yearGrid]=\"yearGrid\"\n            (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n            [calType]=\"type\"\n            [rangeHoverEffect]=\"rangeHoverEffect\"\n            [disableFunction]=\"disableFunction ? disableFunction : null\"\n            [disableRangeStartFunction]=\"disableRangeStartFunction ? disableRangeStartFunction : null\"\n            [disableRangeEndFunction]=\"disableRangeEndFunction ? disableRangeEndFunction : null\"\n            [selectedDate]=\"selectedDate\"\n            [selectedRangeDate]=\"selectedRangeDate\"\n            (selectedRangeDateChange)=\"handleRangeDateChange($event)\"\n            (selectedDateChange)=\"handleSingleDateChange($event)\"\n            [startingDayOfWeek]=\"startingDayOfWeek\"\n            [previousButtonDisableFunction]=\"previousButtonDisableFunction\"\n            [nextButtonDisableFunction]=\"nextButtonDisableFunction\"\n        ></fd-calendar>\n\n        <div *ngIf=\"showTodayButton\" fd-bar barDesign=\"footer\">\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <button fd-button [label]=\"todayButtonLabel\" (click)=\"onTodayButtonClick()\"></button>\n                </fd-bar-element>\n            </div>\n        </div>\n    </fd-popover-body>\n</fd-popover>\n\n<div style=\"display: none\" aria-hidden=\"true\">\n    <div [attr.id]=\"_formValueStateMessageId\" aria-atomic=\"true\" aria-live=\"assertive\">\n        <ng-container [ngSwitch]=\"state\">\n            <ng-container *ngSwitchCase=\"'success'\">{{\n                valueStateSuccessMessage || ('coreDatePicker.valueStateSuccessMessage' | fdTranslate)\n            }}</ng-container>\n            <ng-container *ngSwitchCase=\"'information'\">{{\n                valueStateInformationMessage || ('coreDatePicker.valueStateInformationMessage' | fdTranslate)\n            }}</ng-container>\n            <ng-container *ngSwitchCase=\"'warning'\">{{\n                valueStateWarningMessage || ('coreDatePicker.valueStateWarningMessage' | fdTranslate)\n            }}</ng-container>\n            <ng-container *ngSwitchCase=\"'error'\">{{\n                valueStateErrorMessage || ('coreDatePicker.valueStateErrorMessage' | fdTranslate)\n            }}</ng-container>\n        </ng-container>\n        {{ _message }}\n    </div>\n</div>\n", styles: [".fd-date-picker-custom{display:inline-block}.fd-date-picker-custom fd-popover{display:block}.fd-date-picker-custom fd-calendar{border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i4.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["disableScrollbar"] }, { kind: "component", type: i4.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i5.CalendarComponent, selector: "fd-calendar", inputs: ["selectedDate", "markWeekends", "showWeekNumbers", "mobileLandscape", "mobilePortrait", "selectedRangeDate", "activeView", "startingDayOfWeek", "calType", "id", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "rangeHoverEffect", "previousButtonDisableFunction", "nextButtonDisableFunction", "escapeFocusFunction", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["activeViewChange", "selectedDateChange", "selectedRangeDateChange", "isValidDateChange", "closeCalendar", "closeClicked"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i7.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i8.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i9.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i9.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i9.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "pipe", type: i10.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "_calendarComponent", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<fd-popover\n    [(isOpen)]=\"isOpen\"\n    (isOpenChange)=\"_onOpenStateChanged($event)\"\n    [triggers]=\"[]\"\n    [placement]=\"placement\"\n    [disabled]=\"disabled\"\n    [focusTrapped]=\"true\"\n    [focusAutoCapture]=\"false\"\n    [appendTo]=\"appendTo\"\n>\n    <fd-popover-control>\n        <fd-input-group\n            #inputGroupComponent\n            [state]=\"state\"\n            [disabled]=\"disabled\"\n            [isControl]=\"true\"\n            [button]=\"true\"\n            [buttonFocusable]=\"buttonFocusable\"\n            glyph=\"appointment-2\"\n            [isExpanded]=\"isOpen\"\n            [glyphAriaLabel]=\"displayCalendarToggleLabel || ('coreDatePicker.displayCalendarToggleLabel' | fdTranslate)\"\n            [iconTitle]=\"displayCalendarToggleLabel || ('coreDatePicker.displayCalendarToggleLabel' | fdTranslate)\"\n            (addOnButtonClicked)=\"toggleCalendar()\"\n        >\n            <input\n                type=\"text\"\n                class=\"fd-input\"\n                fd-input-group-input\n                [disabled]=\"disabled\"\n                [placeholder]=\"placeholder\"\n                [attr.id]=\"inputId\"\n                aria-haspopup=\"grid\"\n                aria-autocomplete=\"none\"\n                [attr.aria-expanded]=\"isOpen\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-label]=\"_dateInputArialLabel || (_dateInputArialLabelKey | fdTranslate)\"\n                [attr.aria-required]=\"required\"\n                [attr.aria-describedby]=\"_formValueStateMessageId\"\n                [ngModel]=\"_inputFieldDate\"\n                (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n                (ngModelChange)=\"handleInputChange($event, true)\"\n                (blur)=\"_onBlur($event)\"\n            />\n        </fd-input-group>\n    </fd-popover-control>\n    <fd-popover-body [attr.aria-expanded]=\"isOpen\" [attr.aria-hidden]=\"!isOpen\">\n        <fd-form-message [embedded]=\"true\" *ngIf=\"_message\" [type]=\"state\">\n            {{ _message }}\n        </fd-form-message>\n        <ng-content></ng-content>\n\n        <fd-calendar\n            (closeCalendar)=\"closeFromCalendar()\"\n            [activeView]=\"activeView\"\n            [markWeekends]=\"markWeekends\"\n            [specialDaysRules]=\"specialDaysRules\"\n            [showWeekNumbers]=\"showWeekNumbers\"\n            [aggregatedYearGrid]=\"aggregatedYearGrid\"\n            [yearGrid]=\"yearGrid\"\n            (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n            [calType]=\"type\"\n            [rangeHoverEffect]=\"rangeHoverEffect\"\n            [disableFunction]=\"disableFunction ? disableFunction : null\"\n            [disableRangeStartFunction]=\"disableRangeStartFunction ? disableRangeStartFunction : null\"\n            [disableRangeEndFunction]=\"disableRangeEndFunction ? disableRangeEndFunction : null\"\n            [selectedDate]=\"selectedDate\"\n            [selectedRangeDate]=\"selectedRangeDate\"\n            (selectedRangeDateChange)=\"handleRangeDateChange($event)\"\n            (selectedDateChange)=\"handleSingleDateChange($event)\"\n            [startingDayOfWeek]=\"startingDayOfWeek\"\n            [previousButtonDisableFunction]=\"previousButtonDisableFunction\"\n            [nextButtonDisableFunction]=\"nextButtonDisableFunction\"\n        ></fd-calendar>\n\n        <div *ngIf=\"showTodayButton\" fd-bar barDesign=\"footer\">\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <button fd-button [label]=\"todayButtonLabel\" (click)=\"onTodayButtonClick()\"></button>\n                </fd-bar-element>\n            </div>\n        </div>\n    </fd-popover-body>\n</fd-popover>\n\n<div style=\"display: none\" aria-hidden=\"true\">\n    <div [attr.id]=\"_formValueStateMessageId\" aria-atomic=\"true\" aria-live=\"assertive\">\n        <ng-container [ngSwitch]=\"state\">\n            <ng-container *ngSwitchCase=\"'success'\">{{\n                valueStateSuccessMessage || ('coreDatePicker.valueStateSuccessMessage' | fdTranslate)\n            }}</ng-container>\n            <ng-container *ngSwitchCase=\"'information'\">{{\n                valueStateInformationMessage || ('coreDatePicker.valueStateInformationMessage' | fdTranslate)\n            }}</ng-container>\n            <ng-container *ngSwitchCase=\"'warning'\">{{\n                valueStateWarningMessage || ('coreDatePicker.valueStateWarningMessage' | fdTranslate)\n            }}</ng-container>\n            <ng-container *ngSwitchCase=\"'error'\">{{\n                valueStateErrorMessage || ('coreDatePicker.valueStateErrorMessage' | fdTranslate)\n            }}</ng-container>\n        </ng-container>\n        {{ _message }}\n    </div>\n</div>\n", styles: [".fd-date-picker-custom{display:inline-block}.fd-date-picker-custom fd-popover{display:block}.fd-date-picker-custom fd-calendar{border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i4.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i4.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i5.CalendarComponent, selector: "fd-calendar", inputs: ["selectedDate", "markWeekends", "showWeekNumbers", "mobileLandscape", "mobilePortrait", "selectedRangeDate", "activeView", "startingDayOfWeek", "calType", "id", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "rangeHoverEffect", "previousButtonDisableFunction", "nextButtonDisableFunction", "escapeFocusFunction", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["activeViewChange", "selectedDateChange", "selectedRangeDateChange", "isValidDateChange", "closeCalendar", "closeClicked"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i7.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i8.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i9.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i9.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i9.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "pipe", type: i10.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-date-picker', host: {

package/esm2020/datetime-picker/datetime-picker.component.mjs

@@ -518,7 +518,7 @@ DatetimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         registerFormItemControl(DatetimePickerComponent),
         PopoverFormMessageService,
         PopoverService
-    ], viewQueries: [{ propertyName: "_calendarComponent", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fd-datetime\">\n    <fd-popover\n        [(isOpen)]=\"isOpen\"\n        (isOpenChange)=\"_onOpenStateChanged($event)\"\n        [focusTrapped]=\"true\"\n        [focusAutoCapture]=\"false\"\n        [triggers]=\"[]\"\n        [disabled]=\"disabled\"\n        [placement]=\"placement\"\n        [appendTo]=\"appendTo\"\n    >\n        <fd-popover-control>\n            <fd-input-group\n                #inputGroupComponent\n                [state]=\"state\"\n                [disabled]=\"disabled\"\n                [isControl]=\"true\"\n                [button]=\"true\"\n                [buttonFocusable]=\"buttonFocusable\"\n                glyph=\"date-time\"\n                [isExpanded]=\"isOpen\"\n                [glyphAriaLabel]=\"\n                    displayDatetimeToggleLabel || ('coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate)\n                \"\n                [iconTitle]=\"\n                    displayDatetimeToggleLabel || ('coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate)\n                \"\n                (addOnButtonClicked)=\"togglePopover()\"\n            >\n                <input\n                    type=\"text\"\n                    class=\"fd-input\"\n                    fd-input-group-input\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    [attr.aria-label]=\"datetimeInputLabel || ('coreDatetimePicker.datetimeInputLabel' | fdTranslate)\"\n                    [attr.id]=\"inputId\"\n                    [attr.aria-required]=\"required\"\n                    [placeholder]=\"placeholder\"\n                    [disabled]=\"disabled\"\n                    [ngModel]=\"_inputFieldDate\"\n                    (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n                    (ngModelChange)=\"handleInputChange($event, true)\"\n                    (blur)=\"handleOnTouched($event)\"\n                />\n            </fd-input-group>\n        </fd-popover-control>\n        <fd-popover-body\n            aria-labelledby=\"fd-form-message\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-hidden]=\"!isOpen\"\n            [style.display]=\"'block'\"\n        >\n            <div class=\"fd-datetime__wrapper\">\n                <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" *ngIf=\"_message\" [type]=\"state\">\n                    {{ _message }}\n                </fd-form-message>\n                <div class=\"fd-datetime__display-type-switcher\">\n                    <fd-segmented-button [(ngModel)]=\"_displayType\">\n                        <button\n                            fd-button\n                            [label]=\"displayTypeDateLabel || ('coreDatetimePicker.displayTypeDateLabel' | fdTranslate)\"\n                            value=\"date\"\n                        ></button>\n                        <button\n                            fd-button\n                            [label]=\"displayTypeTimeLabel || ('coreDatetimePicker.displayTypeTimeLabel' | fdTranslate)\"\n                            value=\"time\"\n                        ></button>\n                    </fd-segmented-button>\n                </div>\n                <ng-content></ng-content>\n                <div class=\"fd-datetime__container\">\n                    <fd-calendar\n                        [class.fd-datetime__active-display-type]=\"_displayType === 'date'\"\n                        calType=\"single\"\n                        [activeView]=\"activeView\"\n                        [disableFunction]=\"disableFunction || null\"\n                        [selectedDate]=\"_tempDate\"\n                        [escapeFocusFunction]=\"null\"\n                        [markWeekends]=\"markWeekends\"\n                        [specialDaysRules]=\"specialDaysRules\"\n                        [showWeekNumbers]=\"showWeekNumbers\"\n                        [aggregatedYearGrid]=\"aggregatedYearGrid\"\n                        [yearGrid]=\"yearGrid\"\n                        [startingDayOfWeek]=\"startingDayOfWeek\"\n                        (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n                        (selectedDateChange)=\"handleDateChange($event)\"\n                        (isValidDateChange)=\"setInvalidDateInputHandler($event)\"\n                    ></fd-calendar>\n                    <div class=\"fd-datetime__separator\"></div>\n                    <fd-time\n                        *ngIf=\"isOpen\"\n                        [class.fd-datetime__active-display-type]=\"_displayType === 'time'\"\n                        [disabled]=\"disabled\"\n                        [elementsAtOnce]=\"5\"\n                        [keepTwoDigits]=\"keepTwoDigitsTime\"\n                        [ngModel]=\"_tempTime\"\n                        [spinnerButtons]=\"spinnerButtons\"\n                        [meridian]=\"_meridian\"\n                        [displaySeconds]=\"_displaySeconds\"\n                        [displayMinutes]=\"_displayMinutes\"\n                        [displayHours]=\"_displayHours\"\n                        (ngModelChange)=\"handleTimeChange($event)\"\n                    ></fd-time>\n                </div>\n                <div fd-popover-body-footer *ngIf=\"showFooter\">\n                    <div fd-bar barDesign=\"footer\">\n                        <div fd-bar-right>\n                            <fd-bar-element>\n                                <button\n                                    fd-button\n                                    fdType=\"emphasized\"\n                                    [label]=\"okLabel || ('coreDatetimePicker.datetimeOkLabel' | fdTranslate)\"\n                                    [ariaLabel]=\"okLabel || ('coreDatetimePicker.datetimeOkLabel' | fdTranslate)\"\n                                    (click)=\"submit()\"\n                                ></button>\n                            </fd-bar-element>\n                            <fd-bar-element>\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    [label]=\"cancelLabel || ('coreDatetimePicker.datetimeCancelLabel' | fdTranslate)\"\n                                    [ariaLabel]=\"\n                                        cancelLabel || ('coreDatetimePicker.datetimeCancelLabel' | fdTranslate)\n                                    \"\n                                    (click)=\"cancel()\"\n                                ></button>\n                            </fd-bar-element>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n", styles: [".fd-datetime{display:block}.fd-datetime__wrapper{max-height:80vh;max-width:80vw}.fd-datetime__container{display:flex;align-items:center;justify-content:center;margin:0 16px;overflow:auto}.fd-datetime__separator{background-color:#d3d3d3;width:1px;margin:42px 28px;align-self:stretch}.fd-datetime fd-time{width:auto}.fd-datetime__display-type-switcher{margin-top:1rem;display:none;width:100%;justify-content:center}@media (max-width: 960px){.fd-datetime__display-type-switcher{display:flex}.fd-datetime__wrapper{min-width:min(20rem,90vw)}.fd-datetime__container>*:not(.fd-datetime__active-display-type){display:none}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i4.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["disableScrollbar"] }, { kind: "directive", type: i4.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i4.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i5.CalendarComponent, selector: "fd-calendar", inputs: ["selectedDate", "markWeekends", "showWeekNumbers", "mobileLandscape", "mobilePortrait", "selectedRangeDate", "activeView", "startingDayOfWeek", "calType", "id", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "rangeHoverEffect", "previousButtonDisableFunction", "nextButtonDisableFunction", "escapeFocusFunction", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["activeViewChange", "selectedDateChange", "selectedRangeDateChange", "isValidDateChange", "closeCalendar", "closeClicked"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.TimeComponent, selector: "fd-time", inputs: ["meridian", "validate", "keepTwoDigits", "disabled", "displaySeconds", "displayMinutes", "displayHours", "tablet", "elementsAtOnce", "time", "spinnerButtons"] }, { kind: "component", type: i8.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i10.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i10.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i10.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i11.SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle"] }, { kind: "component", type: i2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "pipe", type: i12.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "_calendarComponent", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fd-datetime\">\n    <fd-popover\n        [(isOpen)]=\"isOpen\"\n        (isOpenChange)=\"_onOpenStateChanged($event)\"\n        [focusTrapped]=\"true\"\n        [focusAutoCapture]=\"false\"\n        [triggers]=\"[]\"\n        [disabled]=\"disabled\"\n        [placement]=\"placement\"\n        [appendTo]=\"appendTo\"\n    >\n        <fd-popover-control>\n            <fd-input-group\n                #inputGroupComponent\n                [state]=\"state\"\n                [disabled]=\"disabled\"\n                [isControl]=\"true\"\n                [button]=\"true\"\n                [buttonFocusable]=\"buttonFocusable\"\n                glyph=\"date-time\"\n                [isExpanded]=\"isOpen\"\n                [glyphAriaLabel]=\"\n                    displayDatetimeToggleLabel || ('coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate)\n                \"\n                [iconTitle]=\"\n                    displayDatetimeToggleLabel || ('coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate)\n                \"\n                (addOnButtonClicked)=\"togglePopover()\"\n            >\n                <input\n                    type=\"text\"\n                    class=\"fd-input\"\n                    fd-input-group-input\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    [attr.aria-label]=\"datetimeInputLabel || ('coreDatetimePicker.datetimeInputLabel' | fdTranslate)\"\n                    [attr.id]=\"inputId\"\n                    [attr.aria-required]=\"required\"\n                    [placeholder]=\"placeholder\"\n                    [disabled]=\"disabled\"\n                    [ngModel]=\"_inputFieldDate\"\n                    (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n                    (ngModelChange)=\"handleInputChange($event, true)\"\n                    (blur)=\"handleOnTouched($event)\"\n                />\n            </fd-input-group>\n        </fd-popover-control>\n        <fd-popover-body\n            aria-labelledby=\"fd-form-message\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-hidden]=\"!isOpen\"\n            [style.display]=\"'block'\"\n        >\n            <div class=\"fd-datetime__wrapper\">\n                <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" *ngIf=\"_message\" [type]=\"state\">\n                    {{ _message }}\n                </fd-form-message>\n                <div class=\"fd-datetime__display-type-switcher\">\n                    <fd-segmented-button [(ngModel)]=\"_displayType\">\n                        <button\n                            fd-button\n                            [label]=\"displayTypeDateLabel || ('coreDatetimePicker.displayTypeDateLabel' | fdTranslate)\"\n                            value=\"date\"\n                        ></button>\n                        <button\n                            fd-button\n                            [label]=\"displayTypeTimeLabel || ('coreDatetimePicker.displayTypeTimeLabel' | fdTranslate)\"\n                            value=\"time\"\n                        ></button>\n                    </fd-segmented-button>\n                </div>\n                <ng-content></ng-content>\n                <div class=\"fd-datetime__container\">\n                    <fd-calendar\n                        [class.fd-datetime__active-display-type]=\"_displayType === 'date'\"\n                        calType=\"single\"\n                        [activeView]=\"activeView\"\n                        [disableFunction]=\"disableFunction || null\"\n                        [selectedDate]=\"_tempDate\"\n                        [escapeFocusFunction]=\"null\"\n                        [markWeekends]=\"markWeekends\"\n                        [specialDaysRules]=\"specialDaysRules\"\n                        [showWeekNumbers]=\"showWeekNumbers\"\n                        [aggregatedYearGrid]=\"aggregatedYearGrid\"\n                        [yearGrid]=\"yearGrid\"\n                        [startingDayOfWeek]=\"startingDayOfWeek\"\n                        (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n                        (selectedDateChange)=\"handleDateChange($event)\"\n                        (isValidDateChange)=\"setInvalidDateInputHandler($event)\"\n                    ></fd-calendar>\n                    <div class=\"fd-datetime__separator\"></div>\n                    <fd-time\n                        *ngIf=\"isOpen\"\n                        [class.fd-datetime__active-display-type]=\"_displayType === 'time'\"\n                        [disabled]=\"disabled\"\n                        [elementsAtOnce]=\"5\"\n                        [keepTwoDigits]=\"keepTwoDigitsTime\"\n                        [ngModel]=\"_tempTime\"\n                        [spinnerButtons]=\"spinnerButtons\"\n                        [meridian]=\"_meridian\"\n                        [displaySeconds]=\"_displaySeconds\"\n                        [displayMinutes]=\"_displayMinutes\"\n                        [displayHours]=\"_displayHours\"\n                        (ngModelChange)=\"handleTimeChange($event)\"\n                    ></fd-time>\n                </div>\n                <div fd-popover-body-footer *ngIf=\"showFooter\">\n                    <div fd-bar barDesign=\"footer\">\n                        <div fd-bar-right>\n                            <fd-bar-element>\n                                <button\n                                    fd-button\n                                    fdType=\"emphasized\"\n                                    [label]=\"okLabel || ('coreDatetimePicker.datetimeOkLabel' | fdTranslate)\"\n                                    [ariaLabel]=\"okLabel || ('coreDatetimePicker.datetimeOkLabel' | fdTranslate)\"\n                                    (click)=\"submit()\"\n                                ></button>\n                            </fd-bar-element>\n                            <fd-bar-element>\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    [label]=\"cancelLabel || ('coreDatetimePicker.datetimeCancelLabel' | fdTranslate)\"\n                                    [ariaLabel]=\"\n                                        cancelLabel || ('coreDatetimePicker.datetimeCancelLabel' | fdTranslate)\n                                    \"\n                                    (click)=\"cancel()\"\n                                ></button>\n                            </fd-bar-element>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n", styles: [".fd-datetime{display:block}.fd-datetime__wrapper{max-height:80vh;max-width:80vw}.fd-datetime__container{display:flex;align-items:center;justify-content:center;margin:0 16px;overflow:auto}.fd-datetime__separator{background-color:#d3d3d3;width:1px;margin:42px 28px;align-self:stretch}.fd-datetime fd-time{width:auto}.fd-datetime__display-type-switcher{margin-top:1rem;display:none;width:100%;justify-content:center}@media (max-width: 960px){.fd-datetime__display-type-switcher{display:flex}.fd-datetime__wrapper{min-width:min(20rem,90vw)}.fd-datetime__container>*:not(.fd-datetime__active-display-type){display:none}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i4.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "directive", type: i4.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i4.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i5.CalendarComponent, selector: "fd-calendar", inputs: ["selectedDate", "markWeekends", "showWeekNumbers", "mobileLandscape", "mobilePortrait", "selectedRangeDate", "activeView", "startingDayOfWeek", "calType", "id", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "rangeHoverEffect", "previousButtonDisableFunction", "nextButtonDisableFunction", "escapeFocusFunction", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["activeViewChange", "selectedDateChange", "selectedRangeDateChange", "isValidDateChange", "closeCalendar", "closeClicked"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.TimeComponent, selector: "fd-time", inputs: ["meridian", "validate", "keepTwoDigits", "disabled", "displaySeconds", "displayMinutes", "displayHours", "tablet", "elementsAtOnce", "time", "spinnerButtons"] }, { kind: "component", type: i8.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i10.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i10.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i10.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i11.SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle"] }, { kind: "component", type: i2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "pipe", type: i12.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: DatetimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-datetime-picker', providers: [

package/esm2020/dialog/dialog.component.mjs

@@ -130,7 +130,7 @@ export class DialogComponent extends DialogBase {
     }
 }
 DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: DialogComponent, deps: [{ token: i1.DialogConfig, optional: true }, { token: i2.DialogRef, optional: true }, { token: i3.Router, optional: true }, { token: i4.RtlService, optional: true }, { token: i4.FocusTrapService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: DialogComponent, selector: "fd-dialog", inputs: { class: "class", embeddedDialogRef: ["dialogRef", "embeddedDialogRef"], embeddedDialogConfig: ["dialogConfig", "embeddedDialogConfig"] }, host: { attributes: { "tabindex": "-1" }, properties: { "@dialog-fade": "" } }, queries: [{ propertyName: "dialogHeaderConfig", first: true, predicate: DialogHeaderComponent, descendants: true }, { propertyName: "dialogBodyConfig", first: true, predicate: DialogBodyComponent, descendants: true }, { propertyName: "dialogFooterConfig", first: true, predicate: DialogFooterComponent, descendants: true }, { propertyName: "dialogTitle", first: true, predicate: DialogTitleDirective, descendants: true }], viewQueries: [{ propertyName: "dialogWindow", first: true, predicate: ["dialogWindow"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n    #dialogWindow\n    role=\"dialog\"\n    tabindex=\"-1\"\n    aria-modal=\"true\"\n    fdResize\n    cdkTrapFocus\n    cdkDrag\n    cdkDragBoundary=\".fd-dialog\"\n    [fdResizeBoundary]=\"elementRef()?.nativeElement\"\n    class=\"fd-dialog__content\"\n    [class]=\"dialogConfig.dialogPanelClass\"\n    [class.cdk-drag]=\"dialogConfig.draggable\"\n    [class.fd-dialog__content--s]=\"dialogPaddingSize === 'sm'\"\n    [class.fd-dialog__content--m]=\"dialogPaddingSize === 'md'\"\n    [class.fd-dialog__content--l]=\"dialogPaddingSize === 'lg'\"\n    [class.fd-dialog__content--xl]=\"dialogPaddingSize === 'xl'\"\n    [class.fd-dialog__content--mobile]=\"dialogConfig.mobile || dialogConfig.fullScreen\"\n    [class.fd-dialog__content--no-mobile-stretch]=\"dialogConfig.mobileOuterSpacing\"\n    [class.fd-dialog__content--draggable-grab]=\"dialogConfig.draggable && !isDragged\"\n    [class.fd-dialog__content--draggable-grabbing]=\"dialogConfig.draggable && isDragged\"\n    [cdkDragDisabled]=\"!dialogConfig.draggable\"\n    [fdResizeDisabled]=\"!dialogConfig.resizable\"\n    [@dialog-fade]\n    [attr.id]=\"dialogConfig.id\"\n    [attr.aria-label]=\"dialogConfig.ariaLabel\"\n    [attr.aria-labelledby]=\"dialogConfig.ariaLabelledBy\"\n    [attr.aria-describedby]=\"dialogConfig.ariaDescribedBy\"\n    [attr.aria-modal]=\"dialogConfig.ariaModal\"\n    (cdkDragStarted)=\"isDragged = true\"\n    (cdkDragEnded)=\"isDragged = false\"\n    (onResizeEnd)=\"adjustResponsivePadding()\"\n>\n    <span fdResizeHandle *ngIf=\"dialogConfig.resizable\" class=\"fd-dialog__resize-handle\"></span>\n\n    <div cdkDragHandle [cdkDragHandleDisabled]=\"!dialogConfig.draggable\">\n        <ng-content select=\"fd-dialog-header\"></ng-content>\n    </div>\n\n    <ng-content select=\"fd-dialog-body\"></ng-content>\n\n    <ng-content select=\"fd-dialog-footer\"></ng-content>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.25.1-rc.16\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-dialog{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;justify-content:center;position:fixed}.fd-dialog,.fd-dialog:before{height:100%;left:0;top:0;width:100%}.fd-dialog:before{background-color:var(--sapBlockLayer_Background);content:\"\";opacity:var(--fdDialog_Background_Opacity);position:absolute}.fd-dialog__content{-webkit-box-shadow:var(--sapContent_Shadow3);border-radius:var(--sapElement_BorderCornerRadius);box-shadow:var(--sapContent_Shadow3);display:flex;flex-direction:column;max-height:calc(100vh - 6%);max-width:calc(100vw - 10%);min-height:7.5rem;min-width:20rem;outline:none;overflow:hidden;position:absolute}.fd-dialog__body{-webkit-box-flex:1;-ms-flex-positive:1;background-color:var(--sapGroup_ContentBackground);flex-grow:1;overflow:auto}.fd-dialog__footer.fd-bar,.fd-dialog__header.fd-bar,.fd-dialog__subheader.fd-bar{flex-shrink:0;padding-left:1rem;padding-right:1rem}.fd-dialog__content--mobile{border-radius:0;height:100vh;max-height:100vh;max-width:100vw;width:100vw}/*!\n  .fd-dialog+(--active)\n    .fd-dialog__content+(--s, --m, --l, --xl, --draggable-grab, --draggable-grabbing, --mobile, --no-mobile-stretch)\n      .fd-dialog__header\n        .fd-dialog__title\n      .fd-dialog__subheader\n      .fd-dialog__body+(--no-vertical-padding, --no-horizontal-padding)\n      .fd-dialog__loader\n      .fd-dialog__footer\n        .fd-dialog__decisive-button\n      .fd-dialog__resize-handle\n*/.fd-dialog{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:none;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dialog:after,.fd-dialog:before{box-sizing:inherit;font-size:inherit}.fd-dialog--active{display:flex}.fd-dialog__content{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dialog__content:after,.fd-dialog__content:before{box-sizing:inherit;font-size:inherit}.fd-dialog__content--def .fd-dialog__body,.fd-dialog__content--def .fd-dialog__footer.fd-bar,.fd-dialog__content--def .fd-dialog__header.fd-bar,.fd-dialog__content--def .fd-dialog__subheader.fd-bar,.fd-dialog__content--s .fd-dialog__body,.fd-dialog__content--s .fd-dialog__footer.fd-bar,.fd-dialog__content--s .fd-dialog__header.fd-bar,.fd-dialog__content--s .fd-dialog__subheader.fd-bar{padding-left:1rem;padding-right:1rem}.fd-dialog__content--l .fd-dialog__body,.fd-dialog__content--l .fd-dialog__footer.fd-bar,.fd-dialog__content--l .fd-dialog__header.fd-bar,.fd-dialog__content--l .fd-dialog__subheader.fd-bar,.fd-dialog__content--m .fd-dialog__body,.fd-dialog__content--m .fd-dialog__footer.fd-bar,.fd-dialog__content--m .fd-dialog__header.fd-bar,.fd-dialog__content--m .fd-dialog__subheader.fd-bar{padding-left:2rem;padding-right:2rem}.fd-dialog__content--xl .fd-dialog__body,.fd-dialog__content--xl .fd-dialog__footer.fd-bar,.fd-dialog__content--xl .fd-dialog__header.fd-bar,.fd-dialog__content--xl .fd-dialog__subheader.fd-bar{padding-left:3rem;padding-right:3rem}.fd-dialog__content--mobile .fd-dialog__body,.fd-dialog__content--mobile .fd-dialog__footer,.fd-dialog__content--mobile .fd-dialog__header,.fd-dialog__content--mobile .fd-menu__item:first-child,.fd-dialog__content--mobile .fd-menu__item:first-child .fd-menu__link:after,.fd-dialog__content--mobile .fd-menu__item:last-child,.fd-dialog__content--mobile .fd-menu__item:last-child .fd-menu__link:after{border-radius:0}.fd-dialog__content--no-mobile-stretch{border-radius:var(--sapElement_BorderCornerRadius);max-height:calc(100vh - 6%);max-width:calc(100vw - 10%)}.fd-dialog__content--draggable-grab.is-hover .fd-dialog__header,.fd-dialog__content--draggable-grab:hover .fd-dialog__header{cursor:move;cursor:grab}.fd-dialog__content--draggable-grabbing.is-hover .fd-dialog__header,.fd-dialog__content--draggable-grabbing:hover .fd-dialog__header{cursor:move;cursor:grabbing}.fd-dialog__footer.fd-bar .fd-dialog__decisive-button,.fd-dialog__header.fd-bar .fd-dialog__decisive-button{justify-content:center;min-width:4rem}.fd-dialog__body{-webkit-box-sizing:border-box;border:0;border-radius:var(--sapElement_BorderCornerRadius);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem 0;position:relative}.fd-dialog__body:after,.fd-dialog__body:before{box-sizing:inherit;font-size:inherit}.fd-dialog__body--no-vertical-padding{padding-bottom:0;padding-top:0}.fd-dialog__body--no-horizontal-padding{padding-left:0;padding-right:0}.fd-dialog__body:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.fd-dialog__body:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-dialog__loader{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:1.5rem 0 .5rem;padding:0;text-align:center}.fd-dialog__loader:after,.fd-dialog__loader:before{box-sizing:inherit;font-size:inherit}.fd-dialog__resize-handle{-webkit-box-sizing:border-box;border:0;bottom:-.35rem;box-sizing:border-box;color:var(--sapTextColor);cursor:se-resize;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1rem;font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;position:absolute;right:.05rem}.fd-dialog__resize-handle:after,.fd-dialog__resize-handle:before{box-sizing:inherit;font-size:inherit}.fd-dialog__resize-handle[dir=rtl],[dir=rtl] .fd-dialog__resize-handle{-webkit-transform:scaleX(-1);cursor:sw-resize;left:.05rem;right:auto;transform:scaleX(-1)}.fd-dialog__resize-handle:after{color:var(--sapButton_Lite_TextColor);content:\"\\e24f\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-dialog--no-backdrop:not(.fd-dialog--targeted){-webkit-transform:translate(-50%,-50%);left:50%;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:1000}.fd-dialog{z-index:999}.fd-dialog__resize-handle{z-index:1001}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ResizeDirective, selector: "[fdResize], [fd-resize-handle]", inputs: ["fdResizeBoundary", "fdResizeDisabled", "fdResizeHandleLocation", "fdResizeResizeHandleRef"], outputs: ["onResizeStart", "onResizeEnd"] }, { kind: "directive", type: i4.ResizeHandleDirective, selector: "[fdResizeHandle], [fd-resize-handle]" }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [dialogFadeNgIf], encapsulation: i0.ViewEncapsulation.None });
+DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: DialogComponent, selector: "fd-dialog", inputs: { class: "class", embeddedDialogRef: ["dialogRef", "embeddedDialogRef"], embeddedDialogConfig: ["dialogConfig", "embeddedDialogConfig"] }, host: { attributes: { "tabindex": "-1" }, properties: { "@dialog-fade": "" } }, queries: [{ propertyName: "dialogHeaderConfig", first: true, predicate: DialogHeaderComponent, descendants: true }, { propertyName: "dialogBodyConfig", first: true, predicate: DialogBodyComponent, descendants: true }, { propertyName: "dialogFooterConfig", first: true, predicate: DialogFooterComponent, descendants: true }, { propertyName: "dialogTitle", first: true, predicate: DialogTitleDirective, descendants: true }], viewQueries: [{ propertyName: "dialogWindow", first: true, predicate: ["dialogWindow"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n    #dialogWindow\n    role=\"dialog\"\n    tabindex=\"-1\"\n    aria-modal=\"true\"\n    fdResize\n    cdkTrapFocus\n    cdkDrag\n    cdkDragBoundary=\".fd-dialog\"\n    [fdResizeBoundary]=\"elementRef()?.nativeElement\"\n    class=\"fd-dialog__content\"\n    [class]=\"dialogConfig.dialogPanelClass\"\n    [class.cdk-drag]=\"dialogConfig.draggable\"\n    [class.fd-dialog__content--s]=\"dialogPaddingSize === 'sm'\"\n    [class.fd-dialog__content--m]=\"dialogPaddingSize === 'md'\"\n    [class.fd-dialog__content--l]=\"dialogPaddingSize === 'lg'\"\n    [class.fd-dialog__content--xl]=\"dialogPaddingSize === 'xl'\"\n    [class.fd-dialog__content--mobile]=\"dialogConfig.mobile || dialogConfig.fullScreen\"\n    [class.fd-dialog__content--no-mobile-stretch]=\"dialogConfig.mobileOuterSpacing\"\n    [class.fd-dialog__content--draggable-grab]=\"dialogConfig.draggable && !isDragged\"\n    [class.fd-dialog__content--draggable-grabbing]=\"dialogConfig.draggable && isDragged\"\n    [cdkDragDisabled]=\"!dialogConfig.draggable\"\n    [fdResizeDisabled]=\"!dialogConfig.resizable\"\n    [@dialog-fade]\n    [attr.id]=\"dialogConfig.id\"\n    [attr.aria-label]=\"dialogConfig.ariaLabel\"\n    [attr.aria-labelledby]=\"dialogConfig.ariaLabelledBy\"\n    [attr.aria-describedby]=\"dialogConfig.ariaDescribedBy\"\n    [attr.aria-modal]=\"dialogConfig.ariaModal\"\n    (cdkDragStarted)=\"isDragged = true\"\n    (cdkDragEnded)=\"isDragged = false\"\n    (onResizeEnd)=\"adjustResponsivePadding()\"\n>\n    <span fdResizeHandle *ngIf=\"dialogConfig.resizable\" class=\"fd-dialog__resize-handle\"></span>\n\n    <div cdkDragHandle [cdkDragHandleDisabled]=\"!dialogConfig.draggable\">\n        <ng-content select=\"fd-dialog-header\"></ng-content>\n    </div>\n\n    <ng-content select=\"fd-dialog-body\"></ng-content>\n\n    <ng-content select=\"fd-dialog-footer\"></ng-content>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.27\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-dialog{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;justify-content:center;position:fixed}.fd-dialog,.fd-dialog:before{height:100%;left:0;top:0;width:100%}.fd-dialog:before{background-color:var(--sapBlockLayer_Background);content:\"\";opacity:var(--fdDialog_Background_Opacity);position:absolute}.fd-dialog__content{-webkit-box-shadow:var(--sapContent_Shadow3);border-radius:var(--sapElement_BorderCornerRadius);box-shadow:var(--sapContent_Shadow3);display:flex;flex-direction:column;max-height:calc(100vh - 6%);max-width:calc(100vw - 10%);min-height:7.5rem;min-width:20rem;outline:none;overflow:hidden;position:absolute}.fd-dialog__body{-webkit-box-flex:1;-ms-flex-positive:1;background-color:var(--sapGroup_ContentBackground);flex-grow:1;overflow:auto}.fd-dialog__footer.fd-bar,.fd-dialog__header.fd-bar,.fd-dialog__subheader.fd-bar{flex-shrink:0;padding-left:1rem;padding-right:1rem}.fd-dialog__content--mobile{border-radius:0;height:100vh;max-height:100vh;max-width:100vw;width:100vw}/*!\n  .fd-dialog+(--active)\n    .fd-dialog__content+(--s, --m, --l, --xl, --draggable-grab, --draggable-grabbing, --mobile, --no-mobile-stretch)\n      .fd-dialog__header\n        .fd-dialog__title\n      .fd-dialog__subheader\n      .fd-dialog__body+(--no-vertical-padding, --no-horizontal-padding)\n      .fd-dialog__loader\n      .fd-dialog__footer\n        .fd-dialog__decisive-button\n      .fd-dialog__resize-handle\n*/.fd-dialog{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:none;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dialog:after,.fd-dialog:before{box-sizing:inherit;font-size:inherit}.fd-dialog--active{display:flex}.fd-dialog__content{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dialog__content:after,.fd-dialog__content:before{box-sizing:inherit;font-size:inherit}.fd-dialog__content--def .fd-dialog__body,.fd-dialog__content--def .fd-dialog__footer.fd-bar,.fd-dialog__content--def .fd-dialog__header.fd-bar,.fd-dialog__content--def .fd-dialog__subheader.fd-bar,.fd-dialog__content--s .fd-dialog__body,.fd-dialog__content--s .fd-dialog__footer.fd-bar,.fd-dialog__content--s .fd-dialog__header.fd-bar,.fd-dialog__content--s .fd-dialog__subheader.fd-bar{padding-left:1rem;padding-right:1rem}.fd-dialog__content--l .fd-dialog__body,.fd-dialog__content--l .fd-dialog__footer.fd-bar,.fd-dialog__content--l .fd-dialog__header.fd-bar,.fd-dialog__content--l .fd-dialog__subheader.fd-bar,.fd-dialog__content--m .fd-dialog__body,.fd-dialog__content--m .fd-dialog__footer.fd-bar,.fd-dialog__content--m .fd-dialog__header.fd-bar,.fd-dialog__content--m .fd-dialog__subheader.fd-bar{padding-left:2rem;padding-right:2rem}.fd-dialog__content--xl .fd-dialog__body,.fd-dialog__content--xl .fd-dialog__footer.fd-bar,.fd-dialog__content--xl .fd-dialog__header.fd-bar,.fd-dialog__content--xl .fd-dialog__subheader.fd-bar{padding-left:3rem;padding-right:3rem}.fd-dialog__content--mobile .fd-dialog__body,.fd-dialog__content--mobile .fd-dialog__footer,.fd-dialog__content--mobile .fd-dialog__header,.fd-dialog__content--mobile .fd-menu__item:first-child,.fd-dialog__content--mobile .fd-menu__item:first-child .fd-menu__link:after,.fd-dialog__content--mobile .fd-menu__item:last-child,.fd-dialog__content--mobile .fd-menu__item:last-child .fd-menu__link:after{border-radius:0}.fd-dialog__content--no-mobile-stretch{border-radius:var(--sapElement_BorderCornerRadius);max-height:calc(100vh - 6%);max-width:calc(100vw - 10%)}.fd-dialog__content--draggable-grab.is-hover .fd-dialog__header,.fd-dialog__content--draggable-grab:hover .fd-dialog__header{cursor:move;cursor:grab}.fd-dialog__content--draggable-grabbing.is-hover .fd-dialog__header,.fd-dialog__content--draggable-grabbing:hover .fd-dialog__header{cursor:move;cursor:grabbing}.fd-dialog__footer.fd-bar .fd-dialog__decisive-button,.fd-dialog__header.fd-bar .fd-dialog__decisive-button{justify-content:center;min-width:4rem}.fd-dialog__body{-webkit-box-sizing:border-box;border:0;border-radius:var(--sapElement_BorderCornerRadius);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem 0;position:relative}.fd-dialog__body:after,.fd-dialog__body:before{box-sizing:inherit;font-size:inherit}.fd-dialog__body--no-vertical-padding{padding-bottom:0;padding-top:0}.fd-dialog__body--no-horizontal-padding{padding-left:0;padding-right:0}.fd-dialog__body:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.fd-dialog__body:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-dialog__loader{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:1.5rem 0 .5rem;padding:0;text-align:center}.fd-dialog__loader:after,.fd-dialog__loader:before{box-sizing:inherit;font-size:inherit}.fd-dialog__resize-handle{-webkit-box-sizing:border-box;border:0;bottom:-.35rem;box-sizing:border-box;color:var(--sapTextColor);cursor:se-resize;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1rem;font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;position:absolute;right:.05rem}.fd-dialog__resize-handle:after,.fd-dialog__resize-handle:before{box-sizing:inherit;font-size:inherit}.fd-dialog__resize-handle[dir=rtl],[dir=rtl] .fd-dialog__resize-handle{-webkit-transform:scaleX(-1);cursor:sw-resize;left:.05rem;right:auto;transform:scaleX(-1)}.fd-dialog__resize-handle:after{color:var(--sapButton_Lite_TextColor);content:\"\\e24f\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-dialog--no-backdrop:not(.fd-dialog--targeted){-webkit-transform:translate(-50%,-50%);left:50%;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:1000}.fd-dialog{z-index:999}.fd-dialog__resize-handle{z-index:1001}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ResizeDirective, selector: "[fdResize], [fd-resize-handle]", inputs: ["fdResizeBoundary", "fdResizeDisabled", "fdResizeHandleLocation", "fdResizeResizeHandleRef"], outputs: ["onResizeStart", "onResizeEnd"] }, { kind: "directive", type: i4.ResizeHandleDirective, selector: "[fdResizeHandle], [fd-resize-handle]" }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [dialogFadeNgIf], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),
@@ -142,7 +142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
             args: [{ selector: 'fd-dialog', host: {
                         tabindex: '-1',
                         '[@dialog-fade]': ''
-                    }, animations: [dialogFadeNgIf], encapsulation: ViewEncapsulation.None, template: "<div\n    #dialogWindow\n    role=\"dialog\"\n    tabindex=\"-1\"\n    aria-modal=\"true\"\n    fdResize\n    cdkTrapFocus\n    cdkDrag\n    cdkDragBoundary=\".fd-dialog\"\n    [fdResizeBoundary]=\"elementRef()?.nativeElement\"\n    class=\"fd-dialog__content\"\n    [class]=\"dialogConfig.dialogPanelClass\"\n    [class.cdk-drag]=\"dialogConfig.draggable\"\n    [class.fd-dialog__content--s]=\"dialogPaddingSize === 'sm'\"\n    [class.fd-dialog__content--m]=\"dialogPaddingSize === 'md'\"\n    [class.fd-dialog__content--l]=\"dialogPaddingSize === 'lg'\"\n    [class.fd-dialog__content--xl]=\"dialogPaddingSize === 'xl'\"\n    [class.fd-dialog__content--mobile]=\"dialogConfig.mobile || dialogConfig.fullScreen\"\n    [class.fd-dialog__content--no-mobile-stretch]=\"dialogConfig.mobileOuterSpacing\"\n    [class.fd-dialog__content--draggable-grab]=\"dialogConfig.draggable && !isDragged\"\n    [class.fd-dialog__content--draggable-grabbing]=\"dialogConfig.draggable && isDragged\"\n    [cdkDragDisabled]=\"!dialogConfig.draggable\"\n    [fdResizeDisabled]=\"!dialogConfig.resizable\"\n    [@dialog-fade]\n    [attr.id]=\"dialogConfig.id\"\n    [attr.aria-label]=\"dialogConfig.ariaLabel\"\n    [attr.aria-labelledby]=\"dialogConfig.ariaLabelledBy\"\n    [attr.aria-describedby]=\"dialogConfig.ariaDescribedBy\"\n    [attr.aria-modal]=\"dialogConfig.ariaModal\"\n    (cdkDragStarted)=\"isDragged = true\"\n    (cdkDragEnded)=\"isDragged = false\"\n    (onResizeEnd)=\"adjustResponsivePadding()\"\n>\n    <span fdResizeHandle *ngIf=\"dialogConfig.resizable\" class=\"fd-dialog__resize-handle\"></span>\n\n    <div cdkDragHandle [cdkDragHandleDisabled]=\"!dialogConfig.draggable\">\n        <ng-content select=\"fd-dialog-header\"></ng-content>\n    </div>\n\n    <ng-content select=\"fd-dialog-body\"></ng-content>\n\n    <ng-content select=\"fd-dialog-footer\"></ng-content>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.25.1-rc.16\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-dialog{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;justify-content:center;position:fixed}.fd-dialog,.fd-dialog:before{height:100%;left:0;top:0;width:100%}.fd-dialog:before{background-color:var(--sapBlockLayer_Background);content:\"\";opacity:var(--fdDialog_Background_Opacity);position:absolute}.fd-dialog__content{-webkit-box-shadow:var(--sapContent_Shadow3);border-radius:var(--sapElement_BorderCornerRadius);box-shadow:var(--sapContent_Shadow3);display:flex;flex-direction:column;max-height:calc(100vh - 6%);max-width:calc(100vw - 10%);min-height:7.5rem;min-width:20rem;outline:none;overflow:hidden;position:absolute}.fd-dialog__body{-webkit-box-flex:1;-ms-flex-positive:1;background-color:var(--sapGroup_ContentBackground);flex-grow:1;overflow:auto}.fd-dialog__footer.fd-bar,.fd-dialog__header.fd-bar,.fd-dialog__subheader.fd-bar{flex-shrink:0;padding-left:1rem;padding-right:1rem}.fd-dialog__content--mobile{border-radius:0;height:100vh;max-height:100vh;max-width:100vw;width:100vw}/*!\n  .fd-dialog+(--active)\n    .fd-dialog__content+(--s, --m, --l, --xl, --draggable-grab, --draggable-grabbing, --mobile, --no-mobile-stretch)\n      .fd-dialog__header\n        .fd-dialog__title\n      .fd-dialog__subheader\n      .fd-dialog__body+(--no-vertical-padding, --no-horizontal-padding)\n      .fd-dialog__loader\n      .fd-dialog__footer\n        .fd-dialog__decisive-button\n      .fd-dialog__resize-handle\n*/.fd-dialog{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:none;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dialog:after,.fd-dialog:before{box-sizing:inherit;font-size:inherit}.fd-dialog--active{display:flex}.fd-dialog__content{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dialog__content:after,.fd-dialog__content:before{box-sizing:inherit;font-size:inherit}.fd-dialog__content--def .fd-dialog__body,.fd-dialog__content--def .fd-dialog__footer.fd-bar,.fd-dialog__content--def .fd-dialog__header.fd-bar,.fd-dialog__content--def .fd-dialog__subheader.fd-bar,.fd-dialog__content--s .fd-dialog__body,.fd-dialog__content--s .fd-dialog__footer.fd-bar,.fd-dialog__content--s .fd-dialog__header.fd-bar,.fd-dialog__content--s .fd-dialog__subheader.fd-bar{padding-left:1rem;padding-right:1rem}.fd-dialog__content--l .fd-dialog__body,.fd-dialog__content--l .fd-dialog__footer.fd-bar,.fd-dialog__content--l .fd-dialog__header.fd-bar,.fd-dialog__content--l .fd-dialog__subheader.fd-bar,.fd-dialog__content--m .fd-dialog__body,.fd-dialog__content--m .fd-dialog__footer.fd-bar,.fd-dialog__content--m .fd-dialog__header.fd-bar,.fd-dialog__content--m .fd-dialog__subheader.fd-bar{padding-left:2rem;padding-right:2rem}.fd-dialog__content--xl .fd-dialog__body,.fd-dialog__content--xl .fd-dialog__footer.fd-bar,.fd-dialog__content--xl .fd-dialog__header.fd-bar,.fd-dialog__content--xl .fd-dialog__subheader.fd-bar{padding-left:3rem;padding-right:3rem}.fd-dialog__content--mobile .fd-dialog__body,.fd-dialog__content--mobile .fd-dialog__footer,.fd-dialog__content--mobile .fd-dialog__header,.fd-dialog__content--mobile .fd-menu__item:first-child,.fd-dialog__content--mobile .fd-menu__item:first-child .fd-menu__link:after,.fd-dialog__content--mobile .fd-menu__item:last-child,.fd-dialog__content--mobile .fd-menu__item:last-child .fd-menu__link:after{border-radius:0}.fd-dialog__content--no-mobile-stretch{border-radius:var(--sapElement_BorderCornerRadius);max-height:calc(100vh - 6%);max-width:calc(100vw - 10%)}.fd-dialog__content--draggable-grab.is-hover .fd-dialog__header,.fd-dialog__content--draggable-grab:hover .fd-dialog__header{cursor:move;cursor:grab}.fd-dialog__content--draggable-grabbing.is-hover .fd-dialog__header,.fd-dialog__content--draggable-grabbing:hover .fd-dialog__header{cursor:move;cursor:grabbing}.fd-dialog__footer.fd-bar .fd-dialog__decisive-button,.fd-dialog__header.fd-bar .fd-dialog__decisive-button{justify-content:center;min-width:4rem}.fd-dialog__body{-webkit-box-sizing:border-box;border:0;border-radius:var(--sapElement_BorderCornerRadius);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem 0;position:relative}.fd-dialog__body:after,.fd-dialog__body:before{box-sizing:inherit;font-size:inherit}.fd-dialog__body--no-vertical-padding{padding-bottom:0;padding-top:0}.fd-dialog__body--no-horizontal-padding{padding-left:0;padding-right:0}.fd-dialog__body:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.fd-dialog__body:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-dialog__loader{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:1.5rem 0 .5rem;padding:0;text-align:center}.fd-dialog__loader:after,.fd-dialog__loader:before{box-sizing:inherit;font-size:inherit}.fd-dialog__resize-handle{-webkit-box-sizing:border-box;border:0;bottom:-.35rem;box-sizing:border-box;color:var(--sapTextColor);cursor:se-resize;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1rem;font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;position:absolute;right:.05rem}.fd-dialog__resize-handle:after,.fd-dialog__resize-handle:before{box-sizing:inherit;font-size:inherit}.fd-dialog__resize-handle[dir=rtl],[dir=rtl] .fd-dialog__resize-handle{-webkit-transform:scaleX(-1);cursor:sw-resize;left:.05rem;right:auto;transform:scaleX(-1)}.fd-dialog__resize-handle:after{color:var(--sapButton_Lite_TextColor);content:\"\\e24f\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-dialog--no-backdrop:not(.fd-dialog--targeted){-webkit-transform:translate(-50%,-50%);left:50%;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:1000}.fd-dialog{z-index:999}.fd-dialog__resize-handle{z-index:1001}\n"] }]
+                    }, animations: [dialogFadeNgIf], encapsulation: ViewEncapsulation.None, template: "<div\n    #dialogWindow\n    role=\"dialog\"\n    tabindex=\"-1\"\n    aria-modal=\"true\"\n    fdResize\n    cdkTrapFocus\n    cdkDrag\n    cdkDragBoundary=\".fd-dialog\"\n    [fdResizeBoundary]=\"elementRef()?.nativeElement\"\n    class=\"fd-dialog__content\"\n    [class]=\"dialogConfig.dialogPanelClass\"\n    [class.cdk-drag]=\"dialogConfig.draggable\"\n    [class.fd-dialog__content--s]=\"dialogPaddingSize === 'sm'\"\n    [class.fd-dialog__content--m]=\"dialogPaddingSize === 'md'\"\n    [class.fd-dialog__content--l]=\"dialogPaddingSize === 'lg'\"\n    [class.fd-dialog__content--xl]=\"dialogPaddingSize === 'xl'\"\n    [class.fd-dialog__content--mobile]=\"dialogConfig.mobile || dialogConfig.fullScreen\"\n    [class.fd-dialog__content--no-mobile-stretch]=\"dialogConfig.mobileOuterSpacing\"\n    [class.fd-dialog__content--draggable-grab]=\"dialogConfig.draggable && !isDragged\"\n    [class.fd-dialog__content--draggable-grabbing]=\"dialogConfig.draggable && isDragged\"\n    [cdkDragDisabled]=\"!dialogConfig.draggable\"\n    [fdResizeDisabled]=\"!dialogConfig.resizable\"\n    [@dialog-fade]\n    [attr.id]=\"dialogConfig.id\"\n    [attr.aria-label]=\"dialogConfig.ariaLabel\"\n    [attr.aria-labelledby]=\"dialogConfig.ariaLabelledBy\"\n    [attr.aria-describedby]=\"dialogConfig.ariaDescribedBy\"\n    [attr.aria-modal]=\"dialogConfig.ariaModal\"\n    (cdkDragStarted)=\"isDragged = true\"\n    (cdkDragEnded)=\"isDragged = false\"\n    (onResizeEnd)=\"adjustResponsivePadding()\"\n>\n    <span fdResizeHandle *ngIf=\"dialogConfig.resizable\" class=\"fd-dialog__resize-handle\"></span>\n\n    <div cdkDragHandle [cdkDragHandleDisabled]=\"!dialogConfig.draggable\">\n        <ng-content select=\"fd-dialog-header\"></ng-content>\n    </div>\n\n    <ng-content select=\"fd-dialog-body\"></ng-content>\n\n    <ng-content select=\"fd-dialog-footer\"></ng-content>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.27\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-dialog{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;justify-content:center;position:fixed}.fd-dialog,.fd-dialog:before{height:100%;left:0;top:0;width:100%}.fd-dialog:before{background-color:var(--sapBlockLayer_Background);content:\"\";opacity:var(--fdDialog_Background_Opacity);position:absolute}.fd-dialog__content{-webkit-box-shadow:var(--sapContent_Shadow3);border-radius:var(--sapElement_BorderCornerRadius);box-shadow:var(--sapContent_Shadow3);display:flex;flex-direction:column;max-height:calc(100vh - 6%);max-width:calc(100vw - 10%);min-height:7.5rem;min-width:20rem;outline:none;overflow:hidden;position:absolute}.fd-dialog__body{-webkit-box-flex:1;-ms-flex-positive:1;background-color:var(--sapGroup_ContentBackground);flex-grow:1;overflow:auto}.fd-dialog__footer.fd-bar,.fd-dialog__header.fd-bar,.fd-dialog__subheader.fd-bar{flex-shrink:0;padding-left:1rem;padding-right:1rem}.fd-dialog__content--mobile{border-radius:0;height:100vh;max-height:100vh;max-width:100vw;width:100vw}/*!\n  .fd-dialog+(--active)\n    .fd-dialog__content+(--s, --m, --l, --xl, --draggable-grab, --draggable-grabbing, --mobile, --no-mobile-stretch)\n      .fd-dialog__header\n        .fd-dialog__title\n      .fd-dialog__subheader\n      .fd-dialog__body+(--no-vertical-padding, --no-horizontal-padding)\n      .fd-dialog__loader\n      .fd-dialog__footer\n        .fd-dialog__decisive-button\n      .fd-dialog__resize-handle\n*/.fd-dialog{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:none;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dialog:after,.fd-dialog:before{box-sizing:inherit;font-size:inherit}.fd-dialog--active{display:flex}.fd-dialog__content{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dialog__content:after,.fd-dialog__content:before{box-sizing:inherit;font-size:inherit}.fd-dialog__content--def .fd-dialog__body,.fd-dialog__content--def .fd-dialog__footer.fd-bar,.fd-dialog__content--def .fd-dialog__header.fd-bar,.fd-dialog__content--def .fd-dialog__subheader.fd-bar,.fd-dialog__content--s .fd-dialog__body,.fd-dialog__content--s .fd-dialog__footer.fd-bar,.fd-dialog__content--s .fd-dialog__header.fd-bar,.fd-dialog__content--s .fd-dialog__subheader.fd-bar{padding-left:1rem;padding-right:1rem}.fd-dialog__content--l .fd-dialog__body,.fd-dialog__content--l .fd-dialog__footer.fd-bar,.fd-dialog__content--l .fd-dialog__header.fd-bar,.fd-dialog__content--l .fd-dialog__subheader.fd-bar,.fd-dialog__content--m .fd-dialog__body,.fd-dialog__content--m .fd-dialog__footer.fd-bar,.fd-dialog__content--m .fd-dialog__header.fd-bar,.fd-dialog__content--m .fd-dialog__subheader.fd-bar{padding-left:2rem;padding-right:2rem}.fd-dialog__content--xl .fd-dialog__body,.fd-dialog__content--xl .fd-dialog__footer.fd-bar,.fd-dialog__content--xl .fd-dialog__header.fd-bar,.fd-dialog__content--xl .fd-dialog__subheader.fd-bar{padding-left:3rem;padding-right:3rem}.fd-dialog__content--mobile .fd-dialog__body,.fd-dialog__content--mobile .fd-dialog__footer,.fd-dialog__content--mobile .fd-dialog__header,.fd-dialog__content--mobile .fd-menu__item:first-child,.fd-dialog__content--mobile .fd-menu__item:first-child .fd-menu__link:after,.fd-dialog__content--mobile .fd-menu__item:last-child,.fd-dialog__content--mobile .fd-menu__item:last-child .fd-menu__link:after{border-radius:0}.fd-dialog__content--no-mobile-stretch{border-radius:var(--sapElement_BorderCornerRadius);max-height:calc(100vh - 6%);max-width:calc(100vw - 10%)}.fd-dialog__content--draggable-grab.is-hover .fd-dialog__header,.fd-dialog__content--draggable-grab:hover .fd-dialog__header{cursor:move;cursor:grab}.fd-dialog__content--draggable-grabbing.is-hover .fd-dialog__header,.fd-dialog__content--draggable-grabbing:hover .fd-dialog__header{cursor:move;cursor:grabbing}.fd-dialog__footer.fd-bar .fd-dialog__decisive-button,.fd-dialog__header.fd-bar .fd-dialog__decisive-button{justify-content:center;min-width:4rem}.fd-dialog__body{-webkit-box-sizing:border-box;border:0;border-radius:var(--sapElement_BorderCornerRadius);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem 0;position:relative}.fd-dialog__body:after,.fd-dialog__body:before{box-sizing:inherit;font-size:inherit}.fd-dialog__body--no-vertical-padding{padding-bottom:0;padding-top:0}.fd-dialog__body--no-horizontal-padding{padding-left:0;padding-right:0}.fd-dialog__body:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.fd-dialog__body:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-dialog__loader{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:1.5rem 0 .5rem;padding:0;text-align:center}.fd-dialog__loader:after,.fd-dialog__loader:before{box-sizing:inherit;font-size:inherit}.fd-dialog__resize-handle{-webkit-box-sizing:border-box;border:0;bottom:-.35rem;box-sizing:border-box;color:var(--sapTextColor);cursor:se-resize;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1rem;font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;position:absolute;right:.05rem}.fd-dialog__resize-handle:after,.fd-dialog__resize-handle:before{box-sizing:inherit;font-size:inherit}.fd-dialog__resize-handle[dir=rtl],[dir=rtl] .fd-dialog__resize-handle{-webkit-transform:scaleX(-1);cursor:sw-resize;left:.05rem;right:auto;transform:scaleX(-1)}.fd-dialog__resize-handle:after{color:var(--sapButton_Lite_TextColor);content:\"\\e24f\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-dialog--no-backdrop:not(.fd-dialog--targeted){-webkit-transform:translate(-50%,-50%);left:50%;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:1000}.fd-dialog{z-index:999}.fd-dialog__resize-handle{z-index:1001}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DialogConfig, decorators: [{
                     type: Optional
                 }] }, { type: i2.DialogRef, decorators: [{