@fundamental-ngx/platform 0.43.28 → 0.43.30

package/esm2020/form/step-input/number/number-step-input.component.mjs

@@ -82,7 +82,7 @@ NumberStepInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
         { provide: FD_FORM_FIELD_CONTROL, useExisting: NumberStepInputComponent, multi: true },
         { provide: StepInputComponent, useExisting: NumberStepInputComponent },
         contentDensityObserverProviders()
-    ], usesInheritance: true, ngImport: i0, template: "<fd-form-input-message-group>\n    <div\n        class=\"fd-step-input\"\n        [class.is-focus]=\"focused\"\n        [class.is-readonly]=\"!editable\"\n        [class.is-disabled]=\"disabled\"\n        [class.fd-step-input--without-buttons]=\"showLabels\"\n        [class]=\"state ? 'is-' + state : ''\"\n    >\n        <button\n            class=\"fd-step-input__button\"\n            tabindex=\"-1\"\n            type=\"button\"\n            fd-button\n            fdType=\"transparent\"\n            [glyph]=\"showLabels ? null : 'less'\"\n            fdpStepInputDecrement\n            [attr.aria-disabled]=\"disabled || !canDecrement\"\n            [attr.title]=\"decrementLabel\"\n            [attr.aria-label]=\"decrementLabel\"\n            [attr.aria-controls]=\"id\"\n        >\n            {{ showLabels ? decrementLabel : '' }}\n        </button>\n        <input\n            #inputElementRef\n            class=\"fd-input fd-input--no-number-spinner fd-step-input__input\"\n            [id]=\"id\"\n            [name]=\"name\"\n            [disabled]=\"disabled\"\n            [readonly]=\"!editable\"\n            [attr.placeholder]=\"placeholder || ''\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-describedby]=\"description ? id + '__description' : ''\"\n            [attr.aria-required]=\"required\"\n            [style.textAlign]=\"_align\"\n            fdpStepInputControl\n            type=\"text\"\n            inputmode=\"numeric\"\n            fdkOnlyDigits\n            [decimal]=\"true\"\n        />\n        <button\n            class=\"fd-step-input__button\"\n            tabindex=\"-1\"\n            type=\"button\"\n            fd-button\n            fdType=\"transparent\"\n            [glyph]=\"showLabels ? null : 'add'\"\n            fdpStepInputIncrement\n            [attr.aria-disabled]=\"disabled || !canIncrement\"\n            [attr.title]=\"incrementLabel\"\n            [attr.aria-label]=\"incrementLabel\"\n            [attr.aria-controls]=\"id\"\n        >\n            {{ showLabels ? incrementLabel : '' }}\n        </button>\n    </div>\n    <fd-form-message *ngIf=\"stateMessage\" [type]=\"state\" [innerHTML]=\"stateMessage\"></fd-form-message>\n</fd-form-input-message-group>\n<span *ngIf=\"description\" [id]=\"id + '__description'\" class=\"fd-form-label fd-form-label--unit-description\">\n    {{ description }}\n</span>\n", styles: [".fd-input{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-webkit-appearance:none;appearance:none;background:var(--sapField_BackgroundStyle, var(--sapField_BackgroundStyle));background-color:var(--sapField_Background, var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;line-height:var(--sapContent_LineHeight);margin:0;margin:var(--fdInput_Field_Margin, .25rem 0);min-height:2.25rem;min-width:var(2.75rem, 2.75rem);outline:none;overflow:hidden;padding:0;padding:var(--fdInput_Field_Padding, 0 .625rem);text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-input:after,.fd-input:before{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-input[dir=rtl]::placeholder,[dir=rtl] .fd-input::placeholder{text-indent:.125rem}.fd-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-input::-ms-clear{display:none}.fd-input.is-hover,.fd-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle, var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input.is-focus,.fd-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-input[type=search]::-webkit-search-cancel-button,.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-results-button,.fd-input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.fd-input[aria-expanded=false]{z-index:0}.fd-input.is-expanded,.fd-input[aria-expanded=true]{z-index:4}.fd-input[class*=-compact],.fd-input[class*=-condensed],[class*=-compact] .fd-input:not([class*=-cozy]),[class*=-condensed] .fd-input:not([class*=-cozy]){box-sizing:border-box;height:1.625rem;margin:var(--fdInput_Field_Compact_Margin, .1875rem 0);min-height:1.625rem;min-width:var(--fdInput_Field_Compact_Min_Width, 2rem);padding:var(--fdInput_Field_Compact_Padding, 0 .5rem)}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-inner-spin-button,.fd-input--no-number-spinner::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-input.right-align{text-align:right}.fd-input.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input.is-success.is-hover,.fd-input.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-input.is-success.is-focus,.fd-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-input.is-success.is-focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success:focus:hover{box-shadow:none}.fd-input.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input.is-error.is-hover,.fd-input.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-input.is-error.is-focus,.fd-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-input.is-error.is-focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error:focus:hover{box-shadow:none}.fd-input.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-warning.is-hover,.fd-input.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-input.is-warning.is-focus,.fd-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-warning.is-focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning:focus:hover{box-shadow:none}.fd-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-alert.is-hover,.fd-input.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-input.is-alert.is-focus,.fd-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-alert.is-focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert:focus:hover{box-shadow:none}.fd-input.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input.is-information.is-hover,.fd-input.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-input.is-information.is-focus,.fd-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-input.is-information.is-focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information:focus:hover{box-shadow:none}.fd-input.is-alert,.fd-input.is-error,.fd-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert::placeholder,.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus,.fd-input.is-error.is-focus,.fd-input.is-error:focus,.fd-input.is-information.is-focus,.fd-input.is-information:focus,.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input.is-disabled,.fd-input:disabled,.fd-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder,.fd-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly,.fd-input[aria-readonly=true],.fd-input[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius)}.fd-input.is-readonly::placeholder,.fd-input[aria-readonly=true]::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly.is-hover,.fd-input.is-readonly:hover,.fd-input[aria-readonly=true].is-hover,.fd-input[aria-readonly=true]:hover,.fd-input[readonly].is-hover,.fd-input[readonly]:hover{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);box-shadow:none}.fd-input.is-readonly.is-focus,.fd-input.is-readonly:focus,.fd-input[aria-readonly=true].is-focus,.fd-input[aria-readonly=true]:focus,.fd-input[readonly].is-focus,.fd-input[readonly]:focus{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);z-index:5}/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-step-input{--fdStepInput_Button_Width:2.125rem;--fdStepInput_Bordered_Button_Width:2rem;-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle, var(--sapField_BackgroundStyle));background-color:var(--sapField_Background, var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;line-height:var(--sapContent_LineHeight);margin:0;margin:var(--fdInput_Field_Margin, .25rem 0);min-height:2.25rem;min-width:var(2.75rem, 2.75rem);outline:none;overflow:hidden;padding:0;position:relative;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;width:auto;z-index:1}.fd-step-input:after,.fd-step-input:before{box-sizing:inherit;font-size:inherit}.fd-step-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-step-input[dir=rtl]::placeholder,[dir=rtl] .fd-step-input::placeholder{text-indent:.125rem}.fd-step-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-step-input::-ms-clear{display:none}.fd-step-input.is-hover,.fd-step-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle, var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-step-input.is-focus,.fd-step-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-step-input:focus-within{-webkit-box-shadow:none;background:var(--sapField_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset_Focus_Within);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-step-input.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-step-input.is-success.is-hover,.fd-step-input.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-step-input.is-success.is-focus,.fd-step-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-step-input.is-success.is-focus.is-hover,.fd-step-input.is-success.is-focus:hover,.fd-step-input.is-success:focus.is-hover,.fd-step-input.is-success:focus:hover{box-shadow:none}.fd-step-input.is-success:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-step-input.is-success:focus-within.is-hover,.fd-step-input.is-success:focus-within:hover{box-shadow:none}.fd-step-input.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-step-input.is-error.is-hover,.fd-step-input.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-step-input.is-error.is-focus,.fd-step-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-step-input.is-error.is-focus.is-hover,.fd-step-input.is-error.is-focus:hover,.fd-step-input.is-error:focus.is-hover,.fd-step-input.is-error:focus:hover{box-shadow:none}.fd-step-input.is-error:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-step-input.is-error:focus-within.is-hover,.fd-step-input.is-error:focus-within:hover{box-shadow:none}.fd-step-input.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-step-input.is-warning.is-hover,.fd-step-input.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-step-input.is-warning.is-focus,.fd-step-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-step-input.is-warning.is-focus.is-hover,.fd-step-input.is-warning.is-focus:hover,.fd-step-input.is-warning:focus.is-hover,.fd-step-input.is-warning:focus:hover{box-shadow:none}.fd-step-input.is-warning:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-warning:focus-within.is-hover,.fd-step-input.is-warning:focus-within:hover{box-shadow:none}.fd-step-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-step-input.is-alert.is-hover,.fd-step-input.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-step-input.is-alert.is-focus,.fd-step-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-step-input.is-alert.is-focus.is-hover,.fd-step-input.is-alert.is-focus:hover,.fd-step-input.is-alert:focus.is-hover,.fd-step-input.is-alert:focus:hover{box-shadow:none}.fd-step-input.is-alert:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-alert:focus-within.is-hover,.fd-step-input.is-alert:focus-within:hover{box-shadow:none}.fd-step-input.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-step-input.is-information.is-hover,.fd-step-input.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-step-input.is-information.is-focus,.fd-step-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-step-input.is-information.is-focus.is-hover,.fd-step-input.is-information.is-focus:hover,.fd-step-input.is-information:focus.is-hover,.fd-step-input.is-information:focus:hover{box-shadow:none}.fd-step-input.is-information:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-step-input.is-information:focus-within.is-hover,.fd-step-input.is-information:focus-within:hover{box-shadow:none}.fd-step-input.is-alert,.fd-step-input.is-error,.fd-step-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-step-input.is-alert::placeholder,.fd-step-input.is-error::placeholder,.fd-step-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-step-input.is-alert.is-focus,.fd-step-input.is-alert:focus,.fd-step-input.is-error.is-focus,.fd-step-input.is-error:focus,.fd-step-input.is-information.is-focus,.fd-step-input.is-information:focus,.fd-step-input.is-warning.is-focus,.fd-step-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-step-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-step-input.is-disabled,.fd-step-input:disabled,.fd-step-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-step-input.is-disabled::placeholder,.fd-step-input:disabled::placeholder,.fd-step-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-step-input.is-readonly,.fd-step-input[aria-readonly=true],.fd-step-input[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius)}.fd-step-input.is-readonly::placeholder,.fd-step-input[aria-readonly=true]::placeholder,.fd-step-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-step-input.is-readonly.is-hover,.fd-step-input.is-readonly:hover,.fd-step-input[aria-readonly=true].is-hover,.fd-step-input[aria-readonly=true]:hover,.fd-step-input[readonly].is-hover,.fd-step-input[readonly]:hover{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);box-shadow:none}.fd-step-input.is-readonly.is-focus,.fd-step-input.is-readonly:focus,.fd-step-input[aria-readonly=true].is-focus,.fd-step-input[aria-readonly=true]:focus,.fd-step-input[readonly].is-focus,.fd-step-input[readonly]:focus{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);z-index:5}.fd-step-input .fd-step-input__button:first-child{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__button:first-child[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:first-child{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right-style:none}.fd-step-input .fd-step-input__button:first-child.is-hover,.fd-step-input .fd-step-input__button:first-child:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:first-child.is-hover[dir=rtl],.fd-step-input .fd-step-input__button:first-child:hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:first-child.is-hover,[dir=rtl] .fd-step-input .fd-step-input__button:first-child:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-step-input .fd-step-input__button:first-child.is-active,.fd-step-input .fd-step-input__button:first-child:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:first-child.is-active[dir=rtl],.fd-step-input .fd-step-input__button:first-child:active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:first-child.is-active,[dir=rtl] .fd-step-input .fd-step-input__button:first-child:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-step-input .fd-step-input__button:not(:first-child){border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__button:not(:first-child)[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child){border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__button:not(:first-child).is-hover,.fd-step-input .fd-step-input__button:not(:first-child):hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:not(:first-child).is-hover[dir=rtl],.fd-step-input .fd-step-input__button:not(:first-child):hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child).is-hover,[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child):hover{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:not(:first-child).is-active,.fd-step-input .fd-step-input__button:not(:first-child):active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:not(:first-child).is-active[dir=rtl],.fd-step-input .fd-step-input__button:not(:first-child):active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child).is-active,[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child):active{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right-style:none}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-hover,.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-hover[dir=rtl],.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-hover,[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-active,.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-active[dir=rtl],.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-active,[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button{border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-hover,.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-hover[dir=rtl],.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-hover,[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:hover{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-active,.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-active[dir=rtl],.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-active,[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:active{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button{background:var(--fdInput_Group_Button_Background);border:none;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-step-input .fd-step-input__button:before{display:none!important}.fd-step-input .fd-step-input__button.is-hover,.fd-step-input .fd-step-input__button:hover{--fdInput_Group_Button_Text_Color:var(--fdInput_Group_Button_Hover_Text_Color);-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.fd-step-input .fd-step-input__button.is-active,.fd-step-input .fd-step-input__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-step-input.is-success .fd-step-input__button.is-active,.fd-step-input.is-success .fd-step-input__button.is-hover,.fd-step-input.is-success .fd-step-input__button:active,.fd-step-input.is-success .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-step-input.is-success .fd-step-input__button.is-active,.fd-step-input.is-success .fd-step-input__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-step-input.is-error .fd-step-input__button.is-active,.fd-step-input.is-error .fd-step-input__button.is-hover,.fd-step-input.is-error .fd-step-input__button:active,.fd-step-input.is-error .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-step-input.is-error .fd-step-input__button.is-active,.fd-step-input.is-error .fd-step-input__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-step-input.is-warning .fd-step-input__button.is-active,.fd-step-input.is-warning .fd-step-input__button.is-hover,.fd-step-input.is-warning .fd-step-input__button:active,.fd-step-input.is-warning .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-step-input.is-warning .fd-step-input__button.is-active,.fd-step-input.is-warning .fd-step-input__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-alert .fd-step-input__button.is-active,.fd-step-input.is-alert .fd-step-input__button.is-hover,.fd-step-input.is-alert .fd-step-input__button:active,.fd-step-input.is-alert .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-step-input.is-alert .fd-step-input__button.is-active,.fd-step-input.is-alert .fd-step-input__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-information .fd-step-input__button.is-active,.fd-step-input.is-information .fd-step-input__button.is-hover,.fd-step-input.is-information .fd-step-input__button:active,.fd-step-input.is-information .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-step-input.is-information .fd-step-input__button.is-active,.fd-step-input.is-information .fd-step-input__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-step-input .fd-step-input__button.fd-button{min-width:var(--fdStepInput_Button_Width);width:var(--fdStepInput_Button_Width)}.fd-step-input .fd-step-input__button.fd-button:after,.fd-step-input .fd-step-input__button.fd-button:before{font-size:.875rem;margin:0}.fd-step-input .fd-step-input__button.fd-button.is-focus,.fd-step-input .fd-step-input__button.fd-button:focus{outline:none;z-index:5}.fd-step-input .fd-step-input__button.fd-button.is-focus:after,.fd-step-input .fd-step-input__button.fd-button:focus:after{display:none}.fd-step-input .fd-step-input__button.fd-button.is-focus.is-hover,.fd-step-input .fd-step-input__button.fd-button.is-focus:hover,.fd-step-input .fd-step-input__button.fd-button:focus.is-hover,.fd-step-input .fd-step-input__button.fd-button:focus:hover{z-index:auto}.fd-step-input__input.fd-input{background:none;background-color:transparent;border:none;margin:0;padding:0 .25rem;text-align:right}.fd-step-input__input.fd-input[dir=rtl],[dir=rtl] .fd-step-input__input.fd-input{text-align:left}.fd-step-input__input.fd-input.is-focus,.fd-step-input__input.fd-input.is-hover,.fd-step-input__input.fd-input:focus,.fd-step-input__input.fd-input:hover{-webkit-box-shadow:none;background:none;background-color:var(transparent, transparent);box-shadow:none}.fd-step-input__input.fd-input.is-focus,.fd-step-input__input.fd-input:focus{outline:none;z-index:5}.fd-step-input__container{align-items:center;display:flex}.fd-step-input.is-error .fd-step-input__button.fd-button,.fd-step-input.is-information .fd-step-input__button.fd-button,.fd-step-input.is-warning .fd-step-input__button.fd-button{min-width:var(--fdStepInput_Bordered_Button_Width);width:var(--fdStepInput_Bordered_Button_Width)}.fd-step-input[class*=-compact],.fd-step-input[class*=-condensed],[class*=-compact] .fd-step-input:not([class*=-cozy]),[class*=-condensed] .fd-step-input:not([class*=-cozy]){--fdStepInput_Bordered_Button_Width:1.375rem;--fdStepInput_Button_Width:1.5rem;--fdInput_Field_Compact_Padding:0 .25rem;height:1.625rem;min-height:1.625rem}.fd-step-input[class*=-compact] .fd-step-input__input.fd-input,.fd-step-input[class*=-condensed] .fd-step-input__input.fd-input,[class*=-compact] .fd-step-input:not([class*=-cozy]) .fd-step-input__input.fd-input,[class*=-condensed] .fd-step-input:not([class*=-cozy]) .fd-step-input__input.fd-input{height:100%}.fd-step-input.is-readonly .fd-step-input__button.fd-button{display:none}.fd-step-input.is-readonly:focus-within{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}.fd-step-input.is-readonly:focus-within .fd-step-input__input{background:transparent}.fd-step-input{display:flex}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i3.OnlyDigitsDirective, selector: "[fdkOnlyDigits], [fdOnlyDigits], [fd-only-digits]", inputs: ["decimal", "decimalSeparator"] }, { kind: "component", type: i7.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i7.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "directive", type: i8.StepInputDecrementDirective, selector: "[fdpStepInputDecrement]" }, { kind: "directive", type: i9.StepInputIncrementDirective, selector: "[fdpStepInputIncrement]" }, { kind: "directive", type: i10.StepInputControlDirective, selector: "[fdpStepInputControl]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, template: "<fd-form-input-message-group>\n    <div\n        class=\"fd-step-input\"\n        [class.is-focus]=\"focused\"\n        [class.is-readonly]=\"!editable\"\n        [class.is-disabled]=\"disabled\"\n        [class.fd-step-input--without-buttons]=\"showLabels\"\n        [class]=\"state ? 'is-' + state : ''\"\n    >\n        <button\n            class=\"fd-step-input__button\"\n            tabindex=\"-1\"\n            type=\"button\"\n            fd-button\n            fdType=\"transparent\"\n            [glyph]=\"showLabels ? null : 'less'\"\n            fdpStepInputDecrement\n            [attr.aria-disabled]=\"disabled || !canDecrement\"\n            [attr.title]=\"decrementLabel\"\n            [attr.aria-label]=\"decrementLabel\"\n            [attr.aria-controls]=\"id\"\n        >\n            {{ showLabels ? decrementLabel : '' }}\n        </button>\n        <input\n            #inputElementRef\n            class=\"fd-input fd-input--no-number-spinner fd-step-input__input\"\n            [id]=\"id\"\n            [name]=\"name\"\n            [disabled]=\"disabled\"\n            [readonly]=\"!editable\"\n            [attr.placeholder]=\"placeholder || ''\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-describedby]=\"description ? id + '__description' : ''\"\n            [attr.aria-required]=\"required\"\n            [style.textAlign]=\"_align\"\n            fdpStepInputControl\n            type=\"text\"\n            inputmode=\"numeric\"\n            fdkOnlyDigits\n            [decimal]=\"true\"\n        />\n        <button\n            class=\"fd-step-input__button\"\n            tabindex=\"-1\"\n            type=\"button\"\n            fd-button\n            fdType=\"transparent\"\n            [glyph]=\"showLabels ? null : 'add'\"\n            fdpStepInputIncrement\n            [attr.aria-disabled]=\"disabled || !canIncrement\"\n            [attr.title]=\"incrementLabel\"\n            [attr.aria-label]=\"incrementLabel\"\n            [attr.aria-controls]=\"id\"\n        >\n            {{ showLabels ? incrementLabel : '' }}\n        </button>\n    </div>\n    <fd-form-message *ngIf=\"stateMessage\" [type]=\"state\" [innerHTML]=\"stateMessage\"></fd-form-message>\n</fd-form-input-message-group>\n<span *ngIf=\"description\" [id]=\"id + '__description'\" class=\"fd-form-label fd-form-label--unit-description\">\n    {{ description }}\n</span>\n", styles: [".fd-input{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-webkit-appearance:none;appearance:none;background:var(--sapField_BackgroundStyle, var(--sapField_BackgroundStyle));background-color:var(--sapField_Background, var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;line-height:var(--sapContent_LineHeight);margin:0;margin:var(--fdInput_Field_Margin, .25rem 0);min-height:2.25rem;min-width:var(2.75rem, 2.75rem);outline:none;overflow:hidden;padding:0;padding:var(--fdInput_Field_Padding, 0 .625rem);text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-input:after,.fd-input:before{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-input[dir=rtl]::placeholder,[dir=rtl] .fd-input::placeholder{text-indent:.125rem}.fd-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-input::-ms-clear{display:none}.fd-input.is-hover,.fd-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle, var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input.is-focus,.fd-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-input[type=search]::-webkit-search-cancel-button,.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-results-button,.fd-input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.fd-input[aria-expanded=false]{z-index:0}.fd-input.is-expanded,.fd-input[aria-expanded=true]{z-index:4}.fd-input[class*=-compact],.fd-input[class*=-condensed],[class*=-compact] .fd-input:not([class*=-cozy]),[class*=-condensed] .fd-input:not([class*=-cozy]){box-sizing:border-box;height:1.625rem;margin:var(--fdInput_Field_Compact_Margin, .1875rem 0);min-height:1.625rem;min-width:var(--fdInput_Field_Compact_Min_Width, 2rem);padding:var(--fdInput_Field_Compact_Padding, 0 .5rem)}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-inner-spin-button,.fd-input--no-number-spinner::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-input.right-align{text-align:right}.fd-input.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input.is-success.is-hover,.fd-input.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-input.is-success.is-focus,.fd-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-input.is-success.is-focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success:focus:hover{box-shadow:none}.fd-input.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input.is-error.is-hover,.fd-input.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-input.is-error.is-focus,.fd-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-input.is-error.is-focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error:focus:hover{box-shadow:none}.fd-input.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-warning.is-hover,.fd-input.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-input.is-warning.is-focus,.fd-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-warning.is-focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning:focus:hover{box-shadow:none}.fd-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-alert.is-hover,.fd-input.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-input.is-alert.is-focus,.fd-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-alert.is-focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert:focus:hover{box-shadow:none}.fd-input.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input.is-information.is-hover,.fd-input.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-input.is-information.is-focus,.fd-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-input.is-information.is-focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information:focus:hover{box-shadow:none}.fd-input.is-alert,.fd-input.is-error,.fd-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert::placeholder,.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus,.fd-input.is-error.is-focus,.fd-input.is-error:focus,.fd-input.is-information.is-focus,.fd-input.is-information:focus,.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input.is-disabled,.fd-input:disabled,.fd-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder,.fd-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly,.fd-input[aria-readonly=true],.fd-input[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius)}.fd-input.is-readonly::placeholder,.fd-input[aria-readonly=true]::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly.is-hover,.fd-input.is-readonly:hover,.fd-input[aria-readonly=true].is-hover,.fd-input[aria-readonly=true]:hover,.fd-input[readonly].is-hover,.fd-input[readonly]:hover{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);box-shadow:none}.fd-input.is-readonly.is-focus,.fd-input.is-readonly:focus,.fd-input[aria-readonly=true].is-focus,.fd-input[aria-readonly=true]:focus,.fd-input[readonly].is-focus,.fd-input[readonly]:focus{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);z-index:5}/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-step-input{--fdStepInput_Button_Width:2.125rem;--fdStepInput_Bordered_Button_Width:2rem;-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle, var(--sapField_BackgroundStyle));background-color:var(--sapField_Background, var(--sapField_Background));border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;line-height:var(--sapContent_LineHeight);margin:0;margin:var(--fdInput_Field_Margin, .25rem 0);min-height:2.25rem;min-width:var(2.75rem, 2.75rem);outline:none;overflow:hidden;padding:0;position:relative;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;width:auto;z-index:1}.fd-step-input:after,.fd-step-input:before{box-sizing:inherit;font-size:inherit}.fd-step-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-step-input[dir=rtl]::placeholder,[dir=rtl] .fd-step-input::placeholder{text-indent:.125rem}.fd-step-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-step-input::-ms-clear{display:none}.fd-step-input.is-hover,.fd-step-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle, var(--sapField_Hover_BackgroundStyle));background-color:var(--sapField_Hover_Background, var(--sapField_Hover_Background));border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-step-input.is-focus,.fd-step-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-step-input:focus-within{-webkit-box-shadow:none;background:var(--sapField_Focus_Background, var(--sapField_Focus_Background));box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset_Focus_Within);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-step-input.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-step-input.is-success.is-hover,.fd-step-input.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-step-input.is-success.is-focus,.fd-step-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-step-input.is-success.is-focus.is-hover,.fd-step-input.is-success.is-focus:hover,.fd-step-input.is-success:focus.is-hover,.fd-step-input.is-success:focus:hover{box-shadow:none}.fd-step-input.is-success:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-step-input.is-success:focus-within.is-hover,.fd-step-input.is-success:focus-within:hover{box-shadow:none}.fd-step-input.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-step-input.is-error.is-hover,.fd-step-input.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-step-input.is-error.is-focus,.fd-step-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-step-input.is-error.is-focus.is-hover,.fd-step-input.is-error.is-focus:hover,.fd-step-input.is-error:focus.is-hover,.fd-step-input.is-error:focus:hover{box-shadow:none}.fd-step-input.is-error:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-step-input.is-error:focus-within.is-hover,.fd-step-input.is-error:focus-within:hover{box-shadow:none}.fd-step-input.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-step-input.is-warning.is-hover,.fd-step-input.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-step-input.is-warning.is-focus,.fd-step-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-step-input.is-warning.is-focus.is-hover,.fd-step-input.is-warning.is-focus:hover,.fd-step-input.is-warning:focus.is-hover,.fd-step-input.is-warning:focus:hover{box-shadow:none}.fd-step-input.is-warning:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-warning:focus-within.is-hover,.fd-step-input.is-warning:focus-within:hover{box-shadow:none}.fd-step-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-step-input.is-alert.is-hover,.fd-step-input.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-step-input.is-alert.is-focus,.fd-step-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-step-input.is-alert.is-focus.is-hover,.fd-step-input.is-alert.is-focus:hover,.fd-step-input.is-alert:focus.is-hover,.fd-step-input.is-alert:focus:hover{box-shadow:none}.fd-step-input.is-alert:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-alert:focus-within.is-hover,.fd-step-input.is-alert:focus-within:hover{box-shadow:none}.fd-step-input.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-step-input.is-information.is-hover,.fd-step-input.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-step-input.is-information.is-focus,.fd-step-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-step-input.is-information.is-focus.is-hover,.fd-step-input.is-information.is-focus:hover,.fd-step-input.is-information:focus.is-hover,.fd-step-input.is-information:focus:hover{box-shadow:none}.fd-step-input.is-information:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-step-input.is-information:focus-within.is-hover,.fd-step-input.is-information:focus-within:hover{box-shadow:none}.fd-step-input.is-alert,.fd-step-input.is-error,.fd-step-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-step-input.is-alert::placeholder,.fd-step-input.is-error::placeholder,.fd-step-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-step-input.is-alert.is-focus,.fd-step-input.is-alert:focus,.fd-step-input.is-error.is-focus,.fd-step-input.is-error:focus,.fd-step-input.is-information.is-focus,.fd-step-input.is-information:focus,.fd-step-input.is-warning.is-focus,.fd-step-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-step-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-step-input.is-disabled,.fd-step-input:disabled,.fd-step-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-step-input.is-disabled::placeholder,.fd-step-input:disabled::placeholder,.fd-step-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-step-input.is-readonly,.fd-step-input[aria-readonly=true],.fd-step-input[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius)}.fd-step-input.is-readonly::placeholder,.fd-step-input[aria-readonly=true]::placeholder,.fd-step-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-step-input.is-readonly.is-hover,.fd-step-input.is-readonly:hover,.fd-step-input[aria-readonly=true].is-hover,.fd-step-input[aria-readonly=true]:hover,.fd-step-input[readonly].is-hover,.fd-step-input[readonly]:hover{-webkit-box-shadow:none;background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);box-shadow:none}.fd-step-input.is-readonly.is-focus,.fd-step-input.is-readonly:focus,.fd-step-input[aria-readonly=true].is-focus,.fd-step-input[aria-readonly=true]:focus,.fd-step-input[readonly].is-focus,.fd-step-input[readonly]:focus{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);z-index:5}.fd-step-input .fd-step-input__button:first-child{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__button:first-child[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:first-child{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right-style:none}.fd-step-input .fd-step-input__button:first-child.is-hover,.fd-step-input .fd-step-input__button:first-child:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:first-child.is-hover[dir=rtl],.fd-step-input .fd-step-input__button:first-child:hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:first-child.is-hover,[dir=rtl] .fd-step-input .fd-step-input__button:first-child:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-step-input .fd-step-input__button:first-child.is-active,.fd-step-input .fd-step-input__button:first-child:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:first-child.is-active[dir=rtl],.fd-step-input .fd-step-input__button:first-child:active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:first-child.is-active,[dir=rtl] .fd-step-input .fd-step-input__button:first-child:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-step-input .fd-step-input__button:not(:first-child){border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__button:not(:first-child)[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child){border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__button:not(:first-child).is-hover,.fd-step-input .fd-step-input__button:not(:first-child):hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:not(:first-child).is-hover[dir=rtl],.fd-step-input .fd-step-input__button:not(:first-child):hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child).is-hover,[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child):hover{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:not(:first-child).is-active,.fd-step-input .fd-step-input__button:not(:first-child):active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button:not(:first-child).is-active[dir=rtl],.fd-step-input .fd-step-input__button:not(:first-child):active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child).is-active,[dir=rtl] .fd-step-input .fd-step-input__button:not(:first-child):active{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button{border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button{border-left:var(--fdInputGroup_ControlButton_SideBorder);border-right-style:none}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-hover,.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:hover{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-hover[dir=rtl],.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-hover,[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-active,.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:active{border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-active[dir=rtl],.fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button.is-active,[dir=rtl] .fd-step-input .fd-step-input__addon:first-child .fd-step-input__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active);border-right-style:none}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button{border-left:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-hover,.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:hover{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-hover[dir=rtl],.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-hover,[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:hover{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-active,.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:active{border-left:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-active[dir=rtl],.fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button.is-active,[dir=rtl] .fd-step-input .fd-step-input__addon:not(:first-child) .fd-step-input__button:active{border-left-style:none;border-right:var(--fdInputGroup_ControlButton_SideBorder_Active)}.fd-step-input .fd-step-input__button{background:var(--fdInput_Group_Button_Background);border:none;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-step-input .fd-step-input__button:before{display:none!important}.fd-step-input .fd-step-input__button.is-hover,.fd-step-input .fd-step-input__button:hover{--fdInput_Group_Button_Text_Color:var(--fdInput_Group_Button_Hover_Text_Color);-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}.fd-step-input .fd-step-input__button.is-active,.fd-step-input .fd-step-input__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-step-input.is-success .fd-step-input__button.is-active,.fd-step-input.is-success .fd-step-input__button.is-hover,.fd-step-input.is-success .fd-step-input__button:active,.fd-step-input.is-success .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-step-input.is-success .fd-step-input__button.is-active,.fd-step-input.is-success .fd-step-input__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-step-input.is-error .fd-step-input__button.is-active,.fd-step-input.is-error .fd-step-input__button.is-hover,.fd-step-input.is-error .fd-step-input__button:active,.fd-step-input.is-error .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-step-input.is-error .fd-step-input__button.is-active,.fd-step-input.is-error .fd-step-input__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-step-input.is-warning .fd-step-input__button.is-active,.fd-step-input.is-warning .fd-step-input__button.is-hover,.fd-step-input.is-warning .fd-step-input__button:active,.fd-step-input.is-warning .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-step-input.is-warning .fd-step-input__button.is-active,.fd-step-input.is-warning .fd-step-input__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-alert .fd-step-input__button.is-active,.fd-step-input.is-alert .fd-step-input__button.is-hover,.fd-step-input.is-alert .fd-step-input__button:active,.fd-step-input.is-alert .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-step-input.is-alert .fd-step-input__button.is-active,.fd-step-input.is-alert .fd-step-input__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-information .fd-step-input__button.is-active,.fd-step-input.is-information .fd-step-input__button.is-hover,.fd-step-input.is-information .fd-step-input__button:active,.fd-step-input.is-information .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-step-input.is-information .fd-step-input__button.is-active,.fd-step-input.is-information .fd-step-input__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-step-input .fd-step-input__button.fd-button{min-width:var(--fdStepInput_Button_Width);width:var(--fdStepInput_Button_Width)}.fd-step-input .fd-step-input__button.fd-button:after,.fd-step-input .fd-step-input__button.fd-button:before{font-size:.875rem;margin:0}.fd-step-input .fd-step-input__button.fd-button.is-focus,.fd-step-input .fd-step-input__button.fd-button:focus{outline:none;z-index:5}.fd-step-input .fd-step-input__button.fd-button.is-focus:after,.fd-step-input .fd-step-input__button.fd-button:focus:after{display:none}.fd-step-input .fd-step-input__button.fd-button.is-focus.is-hover,.fd-step-input .fd-step-input__button.fd-button.is-focus:hover,.fd-step-input .fd-step-input__button.fd-button:focus.is-hover,.fd-step-input .fd-step-input__button.fd-button:focus:hover{z-index:auto}.fd-step-input__input.fd-input{background:none;background-color:transparent;border:none;margin:0;padding:0 .25rem;text-align:right}.fd-step-input__input.fd-input[dir=rtl],[dir=rtl] .fd-step-input__input.fd-input{text-align:left}.fd-step-input__input.fd-input.is-focus,.fd-step-input__input.fd-input.is-hover,.fd-step-input__input.fd-input:focus,.fd-step-input__input.fd-input:hover{-webkit-box-shadow:none;background:none;background-color:var(transparent, transparent);box-shadow:none}.fd-step-input__input.fd-input.is-focus,.fd-step-input__input.fd-input:focus{outline:none;z-index:5}.fd-step-input__container{align-items:center;display:flex}.fd-step-input.is-error .fd-step-input__button.fd-button,.fd-step-input.is-information .fd-step-input__button.fd-button,.fd-step-input.is-warning .fd-step-input__button.fd-button{min-width:var(--fdStepInput_Bordered_Button_Width);width:var(--fdStepInput_Bordered_Button_Width)}.fd-step-input[class*=-compact],.fd-step-input[class*=-condensed],[class*=-compact] .fd-step-input:not([class*=-cozy]),[class*=-condensed] .fd-step-input:not([class*=-cozy]){--fdStepInput_Bordered_Button_Width:1.375rem;--fdStepInput_Button_Width:1.5rem;--fdInput_Field_Compact_Padding:0 .25rem;height:1.625rem;min-height:1.625rem}.fd-step-input[class*=-compact] .fd-step-input__input.fd-input,.fd-step-input[class*=-condensed] .fd-step-input__input.fd-input,[class*=-compact] .fd-step-input:not([class*=-cozy]) .fd-step-input__input.fd-input,[class*=-condensed] .fd-step-input:not([class*=-cozy]) .fd-step-input__input.fd-input{height:100%}.fd-step-input.is-readonly .fd-step-input__button.fd-button{display:none}.fd-step-input.is-readonly:focus-within{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}.fd-step-input.is-readonly:focus-within .fd-step-input__input{background:transparent}.fd-step-input{display:flex}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i3.OnlyDigitsDirective, selector: "[fdkOnlyDigits], [fdOnlyDigits], [fd-only-digits]", inputs: ["decimal", "decimalSeparator"] }, { kind: "component", type: i7.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen", "preventSpaceKeyScroll"], outputs: ["isOpenChange"] }, { kind: "component", type: i7.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "directive", type: i8.StepInputDecrementDirective, selector: "[fdpStepInputDecrement]" }, { kind: "directive", type: i9.StepInputIncrementDirective, selector: "[fdpStepInputIncrement]" }, { kind: "directive", type: i10.StepInputControlDirective, selector: "[fdpStepInputControl]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NumberStepInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-number-step-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [

package/esm2020/icon-tab-bar/components/popovers/icon-tab-bar-popover/icon-tab-bar-popover.component.mjs

@@ -18,7 +18,7 @@ export class IconTabBarPopoverComponent extends IconTabBarPopoverBase {
     }
 }
 IconTabBarPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IconTabBarPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-IconTabBarPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IconTabBarPopoverComponent, selector: "fdp-icon-tab-bar-popover", inputs: { leftSide: "leftSide", label: "label", showItemLabel: "showItemLabel" }, viewQueries: [{ propertyName: "_tabExtraUIElements", predicate: ["tabItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n    <fd-popover-control>\n        <button class=\"fd-icon-tab-bar__overflow\">\n            <span class=\"fd-icon-tab-bar__overflow-text\">{{ label }}</span>\n            <i class=\"sap-icon--slim-arrow-down\" role=\"presentation\"></i>\n        </button>\n    </fd-popover-control>\n    <fd-popover-body>\n        <ul class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\" role=\"list\">\n            <ng-container *ngFor=\"let item of extraTabs; let idx = index; trackBy: _trackByTab\">\n                <li *ngIf=\"isSeparators\" tabindex=\"-1\" class=\"fd-icon-tab-bar__icon-separator\">\n                    <fd-icon glyph=\"process\"></fd-icon>\n                </li>\n                <li\n                    class=\"fd-list__item fd-list__item--link fd-icon-tab-bar__list-item\"\n                    role=\"listitem\"\n                    [class]=\"item.cssClasses\"\n                    tabindex=\"-1\"\n                >\n                    <a\n                        class=\"fd-list__link fd-icon-tab-bar__list-link\"\n                        #tabItem\n                        [attr.data-flatIndex]=\"item.flatIndex\"\n                        tabindex=\"0\"\n                        (click)=\"_selectItem(item)\"\n                        (keydown)=\"_keyDownHandler($event, item, idx)\"\n                    >\n                        <span class=\"fd-icon-tab-bar__list-item-icon-container\">\n                            <span class=\"fd-list__icon fd-icon-tab-bar__list-item-icon\">\n                                <fd-icon [glyph]=\"item.icon\"></fd-icon>\n                            </span>\n                        </span>\n                        <span\n                            *ngIf=\"showItemLabel && item.label\"\n                            class=\"fd-list__title fd-icon-tab-bar__list-item-title\"\n                            >{{ item.label }}</span\n                        >\n                        <span *ngIf=\"item.badge\" class=\"fd-icon-tab-bar__badge\"></span>\n                        <span *ngIf=\"item.counter\" class=\"fd-list__counter fd-icon-tab-bar__list-item-counter\"\n                            >({{ item.counter }})\n                        </span>\n                        <div class=\"screenreader-only\" *ngIf=\"item.color\">\n                            {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n                        </div>\n                    </a>\n                </li>\n            </ng-container>\n        </ul>\n    </fd-popover-body>\n</fd-popover>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i3.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i3.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }] });
+IconTabBarPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IconTabBarPopoverComponent, selector: "fdp-icon-tab-bar-popover", inputs: { leftSide: "leftSide", label: "label", showItemLabel: "showItemLabel" }, viewQueries: [{ propertyName: "_tabExtraUIElements", predicate: ["tabItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n    <fd-popover-control>\n        <button class=\"fd-icon-tab-bar__overflow\">\n            <span class=\"fd-icon-tab-bar__overflow-text\">{{ label }}</span>\n            <i class=\"sap-icon--slim-arrow-down\" role=\"presentation\"></i>\n        </button>\n    </fd-popover-control>\n    <fd-popover-body>\n        <ul class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\" role=\"list\">\n            <ng-container *ngFor=\"let item of extraTabs; let idx = index; trackBy: _trackByTab\">\n                <li *ngIf=\"isSeparators\" tabindex=\"-1\" class=\"fd-icon-tab-bar__icon-separator\">\n                    <fd-icon glyph=\"process\"></fd-icon>\n                </li>\n                <li\n                    class=\"fd-list__item fd-list__item--link fd-icon-tab-bar__list-item\"\n                    role=\"listitem\"\n                    [class]=\"item.cssClasses\"\n                    tabindex=\"-1\"\n                >\n                    <a\n                        class=\"fd-list__link fd-icon-tab-bar__list-link\"\n                        #tabItem\n                        [attr.data-flatIndex]=\"item.flatIndex\"\n                        tabindex=\"0\"\n                        (click)=\"_selectItem(item)\"\n                        (keydown)=\"_keyDownHandler($event, item, idx)\"\n                    >\n                        <span class=\"fd-icon-tab-bar__list-item-icon-container\">\n                            <span class=\"fd-list__icon fd-icon-tab-bar__list-item-icon\">\n                                <fd-icon [glyph]=\"item.icon\"></fd-icon>\n                            </span>\n                        </span>\n                        <span\n                            *ngIf=\"showItemLabel && item.label\"\n                            class=\"fd-list__title fd-icon-tab-bar__list-item-title\"\n                            >{{ item.label }}</span\n                        >\n                        <span *ngIf=\"item.badge\" class=\"fd-icon-tab-bar__badge\"></span>\n                        <span *ngIf=\"item.counter\" class=\"fd-list__counter fd-icon-tab-bar__list-item-counter\"\n                            >({{ item.counter }})\n                        </span>\n                        <div class=\"screenreader-only\" *ngIf=\"item.color\">\n                            {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n                        </div>\n                    </a>\n                </li>\n            </ng-container>\n        </ul>\n    </fd-popover-body>\n</fd-popover>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "component", type: i3.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i3.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IconTabBarPopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-icon-tab-bar-popover', template: "<fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n    <fd-popover-control>\n        <button class=\"fd-icon-tab-bar__overflow\">\n            <span class=\"fd-icon-tab-bar__overflow-text\">{{ label }}</span>\n            <i class=\"sap-icon--slim-arrow-down\" role=\"presentation\"></i>\n        </button>\n    </fd-popover-control>\n    <fd-popover-body>\n        <ul class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\" role=\"list\">\n            <ng-container *ngFor=\"let item of extraTabs; let idx = index; trackBy: _trackByTab\">\n                <li *ngIf=\"isSeparators\" tabindex=\"-1\" class=\"fd-icon-tab-bar__icon-separator\">\n                    <fd-icon glyph=\"process\"></fd-icon>\n                </li>\n                <li\n                    class=\"fd-list__item fd-list__item--link fd-icon-tab-bar__list-item\"\n                    role=\"listitem\"\n                    [class]=\"item.cssClasses\"\n                    tabindex=\"-1\"\n                >\n                    <a\n                        class=\"fd-list__link fd-icon-tab-bar__list-link\"\n                        #tabItem\n                        [attr.data-flatIndex]=\"item.flatIndex\"\n                        tabindex=\"0\"\n                        (click)=\"_selectItem(item)\"\n                        (keydown)=\"_keyDownHandler($event, item, idx)\"\n                    >\n                        <span class=\"fd-icon-tab-bar__list-item-icon-container\">\n                            <span class=\"fd-list__icon fd-icon-tab-bar__list-item-icon\">\n                                <fd-icon [glyph]=\"item.icon\"></fd-icon>\n                            </span>\n                        </span>\n                        <span\n                            *ngIf=\"showItemLabel && item.label\"\n                            class=\"fd-list__title fd-icon-tab-bar__list-item-title\"\n                            >{{ item.label }}</span\n                        >\n                        <span *ngIf=\"item.badge\" class=\"fd-icon-tab-bar__badge\"></span>\n                        <span *ngIf=\"item.counter\" class=\"fd-list__counter fd-icon-tab-bar__list-item-counter\"\n                            >({{ item.counter }})\n                        </span>\n                        <div class=\"screenreader-only\" *ngIf=\"item.color\">\n                            {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n                        </div>\n                    </a>\n                </li>\n            </ng-container>\n        </ul>\n    </fd-popover-body>\n</fd-popover>\n" }]

package/esm2020/icon-tab-bar/components/popovers/text-type-popover/text-type-popover.component.mjs

@@ -66,7 +66,7 @@ export class TextTypePopoverComponent extends IconTabBarPopoverBase {
     }
 }
 TextTypePopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextTypePopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TextTypePopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TextTypePopoverComponent, selector: "fdp-text-type-popover", inputs: { isExtraItemsMode: "isExtraItemsMode", parentTab: "parentTab", selectedSubItemUid: "selectedSubItemUid", tabindex: "tabindex" }, outputs: { selectedSubItem: "selectedSubItem" }, viewQueries: [{ propertyName: "_dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true }, { propertyName: "_tabExtraUIElements", predicate: ["tabItem"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"isExtraItemsMode\">\n    <fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n        <fd-popover-control>\n            <button class=\"fd-icon-tab-bar__overflow\">\n                <span class=\"fd-icon-tab-bar__overflow-text\">More</span>\n                <i class=\"sap-icon--slim-arrow-down\" role=\"presentation\"></i>\n            </button>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ul\n                fdpIconBarDndList\n                class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\"\n                role=\"list\"\n            >\n                <ng-container [ngTemplateOutletContext]=\"{ level: 1, items: extraTabs }\" [ngTemplateOutlet]=\"subItem\">\n                </ng-container>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-container>\n\n<ng-container *ngIf=\"!isExtraItemsMode && parentTab\">\n    <fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n        <fd-popover-control>\n            <a\n                [attr.aria-selected]=\"_containsSelected\"\n                class=\"fd-icon-tab-bar__tab\"\n                role=\"tab\"\n                [attr.tabindex]=\"tabindex\"\n                #dropdownTrigger\n            >\n                <div class=\"fd-icon-tab-bar__tab-container\">\n                    <span class=\"fd-icon-tab-bar__tag\">{{ parentTab.label }}</span>\n                    <span class=\"fd-icon-tab-bar__arrow\">\n                        <i class=\"sap-icon--slim-arrow-down\" role=\"presentation\"></i>\n                    </span>\n                    <span *ngIf=\"parentTab.badge\" class=\"fd-icon-tab-bar__badge\"></span>\n                </div>\n            </a>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ul\n                fdpIconBarDndList\n                class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\"\n                role=\"list\"\n            >\n                <ng-container\n                    [ngTemplateOutletContext]=\"{ level: 1, items: parentTab.subItems }\"\n                    [ngTemplateOutlet]=\"subItem\"\n                ></ng-container>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-container>\n\n<ng-template #subItem let-items=\"items\" let-level=\"level\">\n    <ng-container *ngFor=\"let item of items; trackBy: _trackByTab\">\n        <li\n            [attr.aria-level]=\"level\"\n            class=\"fd-list__item fd-list__item--link fd-icon-tab-bar__list-item\"\n            [class]=\"item.cssClasses\"\n            fdpIconBarDndItem\n            [dndItemData]=\"item\"\n            role=\"listitem\"\n            tabindex=\"-1\"\n        >\n            <a\n                class=\"fd-list__link fd-icon-tab-bar__list-link\"\n                tabindex=\"0\"\n                #tabItem\n                [attr.data-flatIndex]=\"item.flatIndex\"\n                [attr.aria-selected]=\"item.uId === selectedSubItemUid\"\n                (click)=\"_selectItem(item)\"\n                (keydown)=\"_textPopoverKeyDownHandler($event, item)\"\n            >\n                <span class=\"fd-list__title fd-icon-tab-bar__list-item-title\">{{ item.label }}</span>\n                <span *ngIf=\"item.badge\" class=\"fd-icon-tab-bar__badge\"></span>\n                <span *ngIf=\"item.counter\" class=\"fd-list__counter fd-icon-tab-bar__list-item-counter\"\n                    >({{ item.counter }})\n                </span>\n                <div class=\"screenreader-only\" *ngIf=\"item.color\">\n                    {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n                </div>\n            </a>\n        </li>\n        <ng-container *ngIf=\"item.subItems?.length\">\n            <ng-container\n                [ngTemplateOutletContext]=\"{ level: level + 1, items: item.subItems }\"\n                [ngTemplateOutlet]=\"subItem\"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i3.IconBarDndListDirective, selector: "[fdpIconBarDndList], [fdp-icon-bar-dnd-list]", inputs: ["dndOrientation", "dndAutoScroll"] }, { kind: "directive", type: i4.IconBarDndItemDirective, selector: "[fdpIconBarDndItem], [fdp-icon-bar-dnd-item]", inputs: ["dndItemData", "previewClass", "dndHoveredClass", "dndSeparatorClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TextTypePopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TextTypePopoverComponent, selector: "fdp-text-type-popover", inputs: { isExtraItemsMode: "isExtraItemsMode", parentTab: "parentTab", selectedSubItemUid: "selectedSubItemUid", tabindex: "tabindex" }, outputs: { selectedSubItem: "selectedSubItem" }, viewQueries: [{ propertyName: "_dropdownTrigger", first: true, predicate: ["dropdownTrigger"], descendants: true }, { propertyName: "_tabExtraUIElements", predicate: ["tabItem"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"isExtraItemsMode\">\n    <fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n        <fd-popover-control>\n            <button class=\"fd-icon-tab-bar__overflow\">\n                <span class=\"fd-icon-tab-bar__overflow-text\">More</span>\n                <i class=\"sap-icon--slim-arrow-down\" role=\"presentation\"></i>\n            </button>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ul\n                fdpIconBarDndList\n                class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\"\n                role=\"list\"\n            >\n                <ng-container [ngTemplateOutletContext]=\"{ level: 1, items: extraTabs }\" [ngTemplateOutlet]=\"subItem\">\n                </ng-container>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-container>\n\n<ng-container *ngIf=\"!isExtraItemsMode && parentTab\">\n    <fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n        <fd-popover-control>\n            <a\n                [attr.aria-selected]=\"_containsSelected\"\n                class=\"fd-icon-tab-bar__tab\"\n                role=\"tab\"\n                [attr.tabindex]=\"tabindex\"\n                #dropdownTrigger\n            >\n                <div class=\"fd-icon-tab-bar__tab-container\">\n                    <span class=\"fd-icon-tab-bar__tag\">{{ parentTab.label }}</span>\n                    <span class=\"fd-icon-tab-bar__arrow\">\n                        <i class=\"sap-icon--slim-arrow-down\" role=\"presentation\"></i>\n                    </span>\n                    <span *ngIf=\"parentTab.badge\" class=\"fd-icon-tab-bar__badge\"></span>\n                </div>\n            </a>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ul\n                fdpIconBarDndList\n                class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\"\n                role=\"list\"\n            >\n                <ng-container\n                    [ngTemplateOutletContext]=\"{ level: 1, items: parentTab.subItems }\"\n                    [ngTemplateOutlet]=\"subItem\"\n                ></ng-container>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-container>\n\n<ng-template #subItem let-items=\"items\" let-level=\"level\">\n    <ng-container *ngFor=\"let item of items; trackBy: _trackByTab\">\n        <li\n            [attr.aria-level]=\"level\"\n            class=\"fd-list__item fd-list__item--link fd-icon-tab-bar__list-item\"\n            [class]=\"item.cssClasses\"\n            fdpIconBarDndItem\n            [dndItemData]=\"item\"\n            role=\"listitem\"\n            tabindex=\"-1\"\n        >\n            <a\n                class=\"fd-list__link fd-icon-tab-bar__list-link\"\n                tabindex=\"0\"\n                #tabItem\n                [attr.data-flatIndex]=\"item.flatIndex\"\n                [attr.aria-selected]=\"item.uId === selectedSubItemUid\"\n                (click)=\"_selectItem(item)\"\n                (keydown)=\"_textPopoverKeyDownHandler($event, item)\"\n            >\n                <span class=\"fd-list__title fd-icon-tab-bar__list-item-title\">{{ item.label }}</span>\n                <span *ngIf=\"item.badge\" class=\"fd-icon-tab-bar__badge\"></span>\n                <span *ngIf=\"item.counter\" class=\"fd-list__counter fd-icon-tab-bar__list-item-counter\"\n                    >({{ item.counter }})\n                </span>\n                <div class=\"screenreader-only\" *ngIf=\"item.color\">\n                    {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n                </div>\n            </a>\n        </li>\n        <ng-container *ngIf=\"item.subItems?.length\">\n            <ng-container\n                [ngTemplateOutletContext]=\"{ level: level + 1, items: item.subItems }\"\n                [ngTemplateOutlet]=\"subItem\"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i2.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "directive", type: i3.IconBarDndListDirective, selector: "[fdpIconBarDndList], [fdp-icon-bar-dnd-list]", inputs: ["dndOrientation", "dndAutoScroll"] }, { kind: "directive", type: i4.IconBarDndItemDirective, selector: "[fdpIconBarDndItem], [fdp-icon-bar-dnd-item]", inputs: ["dndItemData", "previewClass", "dndHoveredClass", "dndSeparatorClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextTypePopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-text-type-popover', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"isExtraItemsMode\">\n    <fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n        <fd-popover-control>\n            <button class=\"fd-icon-tab-bar__overflow\">\n                <span class=\"fd-icon-tab-bar__overflow-text\">More</span>\n                <i class=\"sap-icon--slim-arrow-down\" role=\"presentation\"></i>\n            </button>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ul\n                fdpIconBarDndList\n                class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\"\n                role=\"list\"\n            >\n                <ng-container [ngTemplateOutletContext]=\"{ level: 1, items: extraTabs }\" [ngTemplateOutlet]=\"subItem\">\n                </ng-container>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-container>\n\n<ng-container *ngIf=\"!isExtraItemsMode && parentTab\">\n    <fd-popover placement=\"bottom-end\" [focusAutoCapture]=\"true\" [focusTrapped]=\"true\" #popover>\n        <fd-popover-control>\n            <a\n                [attr.aria-selected]=\"_containsSelected\"\n                class=\"fd-icon-tab-bar__tab\"\n                role=\"tab\"\n                [attr.tabindex]=\"tabindex\"\n                #dropdownTrigger\n            >\n                <div class=\"fd-icon-tab-bar__tab-container\">\n                    <span class=\"fd-icon-tab-bar__tag\">{{ parentTab.label }}</span>\n                    <span class=\"fd-icon-tab-bar__arrow\">\n                        <i class=\"sap-icon--slim-arrow-down\" role=\"presentation\"></i>\n                    </span>\n                    <span *ngIf=\"parentTab.badge\" class=\"fd-icon-tab-bar__badge\"></span>\n                </div>\n            </a>\n        </fd-popover-control>\n        <fd-popover-body>\n            <ul\n                fdpIconBarDndList\n                class=\"fd-list fd-list--navigation fd-list--no-border fd-icon-tab-bar__list\"\n                role=\"list\"\n            >\n                <ng-container\n                    [ngTemplateOutletContext]=\"{ level: 1, items: parentTab.subItems }\"\n                    [ngTemplateOutlet]=\"subItem\"\n                ></ng-container>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-container>\n\n<ng-template #subItem let-items=\"items\" let-level=\"level\">\n    <ng-container *ngFor=\"let item of items; trackBy: _trackByTab\">\n        <li\n            [attr.aria-level]=\"level\"\n            class=\"fd-list__item fd-list__item--link fd-icon-tab-bar__list-item\"\n            [class]=\"item.cssClasses\"\n            fdpIconBarDndItem\n            [dndItemData]=\"item\"\n            role=\"listitem\"\n            tabindex=\"-1\"\n        >\n            <a\n                class=\"fd-list__link fd-icon-tab-bar__list-link\"\n                tabindex=\"0\"\n                #tabItem\n                [attr.data-flatIndex]=\"item.flatIndex\"\n                [attr.aria-selected]=\"item.uId === selectedSubItemUid\"\n                (click)=\"_selectItem(item)\"\n                (keydown)=\"_textPopoverKeyDownHandler($event, item)\"\n            >\n                <span class=\"fd-list__title fd-icon-tab-bar__list-item-title\">{{ item.label }}</span>\n                <span *ngIf=\"item.badge\" class=\"fd-icon-tab-bar__badge\"></span>\n                <span *ngIf=\"item.counter\" class=\"fd-list__counter fd-icon-tab-bar__list-item-counter\"\n                    >({{ item.counter }})\n                </span>\n                <div class=\"screenreader-only\" *ngIf=\"item.color\">\n                    {{ (colorAssociations && colorAssociations[item.color]) || item.color }}\n                </div>\n            </a>\n        </li>\n        <ng-container *ngIf=\"item.subItems?.length\">\n            <ng-container\n                [ngTemplateOutletContext]=\"{ level: level + 1, items: item.subItems }\"\n                [ngTemplateOutlet]=\"subItem\"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n" }]

package/esm2020/message-popover/message-popover.component.mjs

@@ -92,7 +92,7 @@ export class MessagePopoverComponent {
     }
 }
 MessagePopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MessagePopoverComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DestroyedService }], target: i0.ɵɵFactoryTarget.Component });
-MessagePopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MessagePopoverComponent, selector: "fdp-message-popover", inputs: { wrapper: "wrapper" }, outputs: { focusItem: "focusItem" }, providers: [DestroyedService], viewQueries: [{ propertyName: "_popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: "<fd-popover\n    #popover\n    placement=\"top-start\"\n    *ngIf=\"_errorTypes.length > 0\"\n    [focusTrapped]=\"true\"\n    [focusAutoCapture]=\"true\"\n    [disableScrollbar]=\"true\"\n>\n    <fd-popover-control>\n        <button\n            fd-button\n            type=\"button\"\n            class=\"fd-message-popover__trigger fd-message-popover__trigger\"\n            [ngClass]=\"'fd-message-popover__trigger--' + _priorityState\"\n            [glyph]=\"'message-' + _priorityFormState\"\n            [label]=\"_priorityStateItemsCount.toString()\"\n        ></button>\n    </fd-popover-control>\n    <div>\n        <div fd-popover-body-header>\n            <div fd-bar barDesign=\"header\" class=\"fd-bar--growing\">\n                <div fd-bar-left>\n                    <fd-segmented-button\n                        [(ngModel)]=\"_currentErrorType\"\n                        *ngIf=\"currentScreen === 'list'\"\n                        (ngModelChange)=\"_filterErrors()\"\n                    >\n                        <button\n                            fd-button\n                            [label]=\"'platformMessagePopover.allErrors' | fdTranslate\"\n                            value=\"all\"\n                        ></button>\n                        <button fd-button *ngFor=\"let type of _errorTypes\" [value]=\"type.group\">\n                            <span fd-object-status [status]=\"type.state\" [glyph]=\"'message-' + type.group\"></span>\n                            <span class=\"fd-button__text\">{{ type.count }}</span>\n                        </button>\n                    </fd-segmented-button>\n                    <button\n                        *ngIf=\"currentScreen === 'details'\"\n                        fd-button\n                        fdInitialFocus\n                        fdType=\"transparent\"\n                        glyph=\"navigation-left-arrow\"\n                        title=\"Go back\"\n                        (click)=\"_showList()\"\n                    ></button>\n                </div>\n                <div fd-bar-right>\n                    <button fd-button fdType=\"transparent\" (click)=\"popover.close()\" glyph=\"decline\"></button>\n                </div>\n            </div>\n        </div>\n        <fdp-message-view\n            [currentScreen]=\"currentScreen\"\n            [filteredErrors]=\"_filteredErrors\"\n            [currentEntry]=\"currentEntry\"\n            (openDetails)=\"_showDetails($event)\"\n            (closePopover)=\"_closePopover($event)\"\n            (focusItem)=\"focusItem.emit($event)\"\n        ></fdp-message-view>\n    </div>\n</fd-popover>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-message-view{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;position:relative}.fd-message-view:after,.fd-message-view:before{box-sizing:inherit;font-size:inherit}.fd-message-view__list{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-height:50vh;max-width:26rem;padding:0}.fd-message-view__list:after,.fd-message-view__list:before{box-sizing:inherit;font-size:inherit}.fd-message-view__list--hidden{opacity:0}.fd-message-view__details{-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;forced-color-adjust:none;inset:0;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem 1rem 1rem 3.5rem;position:absolute}.fd-message-view__details:after,.fd-message-view__details:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details[dir=rtl],[dir=rtl] .fd-message-view__details{padding:1rem 3.5rem 1rem 1rem}.fd-message-view__details-title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);display:block;font-family:var(--sapFontFamily);font-family:var(--sapFontHeaderFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader5Size);font-weight:400;font-weight:var(--sapFontHeaderWeight);forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 1rem;padding:0;white-space:normal}.fd-message-view__details-title:after,.fd-message-view__details-title:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details-title .fd-message-view__icon{font-size:1rem;margin:0 .5rem 0 -2rem}.fd-message-view__details-title .fd-message-view__icon[dir=rtl],[dir=rtl] .fd-message-view__details-title .fd-message-view__icon{margin:0 -2rem 0 .5rem}.fd-message-view__details-description{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1.4;margin:0 0 1rem;padding:0;white-space:normal}.fd-message-view__details-description:after,.fd-message-view__details-description:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details--visible{display:block}.fd-message-popover__trigger.is-focus,.fd-message-popover__trigger:focus{outline-color:var(--sapContent_ContrastFocusColor);z-index:5}.fd-message-popover__trigger--critical{--fdButtonColor:var(--sapButton_Critical_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Background);--fdButtonBorderColor:var(--sapButton_Critical_BorderColor)}.fd-message-popover__trigger--critical.is-hover,.fd-message-popover__trigger--critical:hover{--fdButtonColor:var(--sapButton_Critical_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Hover_Background);--fdButtonBorderColor:var(--sapButton_Critical_Hover_BorderColor)}.fd-message-popover__trigger--critical.is-active,.fd-message-popover__trigger--critical:active{--fdButtonColor:var(--sapButton_Critical_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Active_Background);--fdButtonBorderColor:var(--sapButton_Critical_Active_BorderColor)}.fd-message-popover__trigger--negative{--fdButtonColor:var(--sapButton_Negative_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Background);--fdButtonBorderColor:var(--sapButton_Negative_BorderColor)}.fd-message-popover__trigger--negative.is-hover,.fd-message-popover__trigger--negative:hover{--fdButtonColor:var(--sapButton_Negative_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Hover_Background);--fdButtonBorderColor:var(--sapButton_Negative_Hover_BorderColor)}.fd-message-popover__trigger--negative.is-active,.fd-message-popover__trigger--negative:active{--fdButtonColor:var(--sapButton_Negative_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Active_Background);--fdButtonBorderColor:var(--sapButton_Negative_Active_BorderColor)}.fd-message-popover__trigger--success{--fdButtonColor:var(--sapButton_Success_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Background);--fdButtonBorderColor:var(--sapButton_Success_BorderColor)}.fd-message-popover__trigger--success.is-hover,.fd-message-popover__trigger--success:hover{--fdButtonColor:var(--sapButton_Success_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Hover_Background);--fdButtonBorderColor:var(--sapButton_Success_Hover_BorderColor)}.fd-message-popover__trigger--success.is-active,.fd-message-popover__trigger--success:active{--fdButtonColor:var(--sapButton_Success_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Active_Background);--fdButtonBorderColor:var(--sapButton_Success_Active_BorderColor)}.fd-message-popover__trigger--information{--fdButtonColor:var(--sapButton_Neutral_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Background);--fdButtonBorderColor:var(--sapButton_Neutral_BorderColor)}.fd-message-popover__trigger--information.is-hover,.fd-message-popover__trigger--information:hover{--fdButtonColor:var(--sapButton_Neutral_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Hover_Background);--fdButtonBorderColor:var(--sapButton_Neutral_Hover_BorderColor)}.fd-message-popover__trigger--information.is-active,.fd-message-popover__trigger--information:active{--fdButtonColor:var(--sapButton_Neutral_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Active_Background);--fdButtonBorderColor:var(--sapButton_Neutral_Active_BorderColor)}.fd-message-popover__view-container{border-bottom-left-radius:var(--fdPopover_Border_Radius);border-bottom-right-radius:var(--fdPopover_Border_Radius);overflow:hidden;display:block;max-height:40vh}.fd-message-popover__view-container .fd-message-view .fd-list__item:first-child{border-top-left-radius:0;border-top-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:first-child:before{border-top-left-radius:0;border-top-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:last-child:before{border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-message-view__list{min-width:20rem;min-height:10rem;max-height:40vh}.fd-message-view__list .fd-link{font-size:inherit}.fd-message-view__list .fd-list__link:active,.fd-message-view__list .fd-list__link.is-active{--sapLinkColor: var(--sapList_Active_TextColor);--sapLink_Active_Color: var(--sapList_Active_TextColor)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "directive", type: i3.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "component", type: i3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i4.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i5.SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle"] }, { 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.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "directive", type: i1.InitialFocusDirective, selector: "[fdkInitialFocus], [fdInitialFocus], [fd-initial-focus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "directive", type: i1.DeprecatedInitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus"] }, { kind: "component", type: i9.MessageViewComponent, selector: "fdp-message-view", inputs: ["currentScreen", "filteredErrors", "currentEntry"], outputs: ["openDetails", "focusItem", "closePopover"] }, { kind: "pipe", type: i10.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MessagePopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MessagePopoverComponent, selector: "fdp-message-popover", inputs: { wrapper: "wrapper" }, outputs: { focusItem: "focusItem" }, providers: [DestroyedService], viewQueries: [{ propertyName: "_popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: "<fd-popover\n    #popover\n    placement=\"top-start\"\n    *ngIf=\"_errorTypes.length > 0\"\n    [focusTrapped]=\"true\"\n    [focusAutoCapture]=\"true\"\n    [disableScrollbar]=\"true\"\n>\n    <fd-popover-control>\n        <button\n            fd-button\n            type=\"button\"\n            class=\"fd-message-popover__trigger fd-message-popover__trigger\"\n            [ngClass]=\"'fd-message-popover__trigger--' + _priorityState\"\n            [glyph]=\"'message-' + _priorityFormState\"\n            [label]=\"_priorityStateItemsCount.toString()\"\n        ></button>\n    </fd-popover-control>\n    <div>\n        <div fd-popover-body-header>\n            <div fd-bar barDesign=\"header\" class=\"fd-bar--growing\">\n                <div fd-bar-left>\n                    <fd-segmented-button\n                        [(ngModel)]=\"_currentErrorType\"\n                        *ngIf=\"currentScreen === 'list'\"\n                        (ngModelChange)=\"_filterErrors()\"\n                    >\n                        <button\n                            fd-button\n                            [label]=\"'platformMessagePopover.allErrors' | fdTranslate\"\n                            value=\"all\"\n                        ></button>\n                        <button fd-button *ngFor=\"let type of _errorTypes\" [value]=\"type.group\">\n                            <span fd-object-status [status]=\"type.state\" [glyph]=\"'message-' + type.group\"></span>\n                            <span class=\"fd-button__text\">{{ type.count }}</span>\n                        </button>\n                    </fd-segmented-button>\n                    <button\n                        *ngIf=\"currentScreen === 'details'\"\n                        fd-button\n                        fdInitialFocus\n                        fdType=\"transparent\"\n                        glyph=\"navigation-left-arrow\"\n                        title=\"Go back\"\n                        (click)=\"_showList()\"\n                    ></button>\n                </div>\n                <div fd-bar-right>\n                    <button fd-button fdType=\"transparent\" (click)=\"popover.close()\" glyph=\"decline\"></button>\n                </div>\n            </div>\n        </div>\n        <fdp-message-view\n            [currentScreen]=\"currentScreen\"\n            [filteredErrors]=\"_filteredErrors\"\n            [currentEntry]=\"currentEntry\"\n            (openDetails)=\"_showDetails($event)\"\n            (closePopover)=\"_closePopover($event)\"\n            (focusItem)=\"focusItem.emit($event)\"\n        ></fdp-message-view>\n    </div>\n</fd-popover>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-message-view{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;position:relative}.fd-message-view:after,.fd-message-view:before{box-sizing:inherit;font-size:inherit}.fd-message-view__list{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-height:50vh;max-width:26rem;padding:0}.fd-message-view__list:after,.fd-message-view__list:before{box-sizing:inherit;font-size:inherit}.fd-message-view__list--hidden{opacity:0}.fd-message-view__details{-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;forced-color-adjust:none;inset:0;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem 1rem 1rem 3.5rem;position:absolute}.fd-message-view__details:after,.fd-message-view__details:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details[dir=rtl],[dir=rtl] .fd-message-view__details{padding:1rem 3.5rem 1rem 1rem}.fd-message-view__details-title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);display:block;font-family:var(--sapFontFamily);font-family:var(--sapFontHeaderFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader5Size);font-weight:400;font-weight:var(--sapFontHeaderWeight);forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 1rem;padding:0;white-space:normal}.fd-message-view__details-title:after,.fd-message-view__details-title:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details-title .fd-message-view__icon{font-size:1rem;margin:0 .5rem 0 -2rem}.fd-message-view__details-title .fd-message-view__icon[dir=rtl],[dir=rtl] .fd-message-view__details-title .fd-message-view__icon{margin:0 -2rem 0 .5rem}.fd-message-view__details-description{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1.4;margin:0 0 1rem;padding:0;white-space:normal}.fd-message-view__details-description:after,.fd-message-view__details-description:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details--visible{display:block}.fd-message-popover__trigger.is-focus,.fd-message-popover__trigger:focus{outline-color:var(--sapContent_ContrastFocusColor);z-index:5}.fd-message-popover__trigger--critical{--fdButtonColor:var(--sapButton_Critical_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Background);--fdButtonBorderColor:var(--sapButton_Critical_BorderColor)}.fd-message-popover__trigger--critical.is-hover,.fd-message-popover__trigger--critical:hover{--fdButtonColor:var(--sapButton_Critical_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Hover_Background);--fdButtonBorderColor:var(--sapButton_Critical_Hover_BorderColor)}.fd-message-popover__trigger--critical.is-active,.fd-message-popover__trigger--critical:active{--fdButtonColor:var(--sapButton_Critical_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Active_Background);--fdButtonBorderColor:var(--sapButton_Critical_Active_BorderColor)}.fd-message-popover__trigger--negative{--fdButtonColor:var(--sapButton_Negative_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Background);--fdButtonBorderColor:var(--sapButton_Negative_BorderColor)}.fd-message-popover__trigger--negative.is-hover,.fd-message-popover__trigger--negative:hover{--fdButtonColor:var(--sapButton_Negative_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Hover_Background);--fdButtonBorderColor:var(--sapButton_Negative_Hover_BorderColor)}.fd-message-popover__trigger--negative.is-active,.fd-message-popover__trigger--negative:active{--fdButtonColor:var(--sapButton_Negative_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Active_Background);--fdButtonBorderColor:var(--sapButton_Negative_Active_BorderColor)}.fd-message-popover__trigger--success{--fdButtonColor:var(--sapButton_Success_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Background);--fdButtonBorderColor:var(--sapButton_Success_BorderColor)}.fd-message-popover__trigger--success.is-hover,.fd-message-popover__trigger--success:hover{--fdButtonColor:var(--sapButton_Success_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Hover_Background);--fdButtonBorderColor:var(--sapButton_Success_Hover_BorderColor)}.fd-message-popover__trigger--success.is-active,.fd-message-popover__trigger--success:active{--fdButtonColor:var(--sapButton_Success_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Active_Background);--fdButtonBorderColor:var(--sapButton_Success_Active_BorderColor)}.fd-message-popover__trigger--information{--fdButtonColor:var(--sapButton_Neutral_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Background);--fdButtonBorderColor:var(--sapButton_Neutral_BorderColor)}.fd-message-popover__trigger--information.is-hover,.fd-message-popover__trigger--information:hover{--fdButtonColor:var(--sapButton_Neutral_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Hover_Background);--fdButtonBorderColor:var(--sapButton_Neutral_Hover_BorderColor)}.fd-message-popover__trigger--information.is-active,.fd-message-popover__trigger--information:active{--fdButtonColor:var(--sapButton_Neutral_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Active_Background);--fdButtonBorderColor:var(--sapButton_Neutral_Active_BorderColor)}.fd-message-popover__view-container{border-bottom-left-radius:var(--fdPopover_Border_Radius);border-bottom-right-radius:var(--fdPopover_Border_Radius);overflow:hidden;display:block;max-height:40vh}.fd-message-popover__view-container .fd-message-view .fd-list__item:first-child{border-top-left-radius:0;border-top-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:first-child:before{border-top-left-radius:0;border-top-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:last-child:before{border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-message-view__list{min-width:20rem;min-height:10rem;max-height:40vh}.fd-message-view__list .fd-link{font-size:inherit}.fd-message-view__list .fd-list__link:active,.fd-message-view__list .fd-list__link.is-active{--sapLinkColor: var(--sapList_Active_TextColor);--sapLink_Active_Color: var(--sapList_Active_TextColor)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "directive", type: i3.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "component", type: i3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i4.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i5.SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle"] }, { 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.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "directive", type: i1.InitialFocusDirective, selector: "[fdkInitialFocus], [fdInitialFocus], [fd-initial-focus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "directive", type: i1.DeprecatedInitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus"] }, { kind: "component", type: i9.MessageViewComponent, selector: "fdp-message-view", inputs: ["currentScreen", "filteredErrors", "currentEntry"], outputs: ["openDetails", "focusItem", "closePopover"] }, { kind: "pipe", type: i10.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MessagePopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-message-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [DestroyedService], template: "<fd-popover\n    #popover\n    placement=\"top-start\"\n    *ngIf=\"_errorTypes.length > 0\"\n    [focusTrapped]=\"true\"\n    [focusAutoCapture]=\"true\"\n    [disableScrollbar]=\"true\"\n>\n    <fd-popover-control>\n        <button\n            fd-button\n            type=\"button\"\n            class=\"fd-message-popover__trigger fd-message-popover__trigger\"\n            [ngClass]=\"'fd-message-popover__trigger--' + _priorityState\"\n            [glyph]=\"'message-' + _priorityFormState\"\n            [label]=\"_priorityStateItemsCount.toString()\"\n        ></button>\n    </fd-popover-control>\n    <div>\n        <div fd-popover-body-header>\n            <div fd-bar barDesign=\"header\" class=\"fd-bar--growing\">\n                <div fd-bar-left>\n                    <fd-segmented-button\n                        [(ngModel)]=\"_currentErrorType\"\n                        *ngIf=\"currentScreen === 'list'\"\n                        (ngModelChange)=\"_filterErrors()\"\n                    >\n                        <button\n                            fd-button\n                            [label]=\"'platformMessagePopover.allErrors' | fdTranslate\"\n                            value=\"all\"\n                        ></button>\n                        <button fd-button *ngFor=\"let type of _errorTypes\" [value]=\"type.group\">\n                            <span fd-object-status [status]=\"type.state\" [glyph]=\"'message-' + type.group\"></span>\n                            <span class=\"fd-button__text\">{{ type.count }}</span>\n                        </button>\n                    </fd-segmented-button>\n                    <button\n                        *ngIf=\"currentScreen === 'details'\"\n                        fd-button\n                        fdInitialFocus\n                        fdType=\"transparent\"\n                        glyph=\"navigation-left-arrow\"\n                        title=\"Go back\"\n                        (click)=\"_showList()\"\n                    ></button>\n                </div>\n                <div fd-bar-right>\n                    <button fd-button fdType=\"transparent\" (click)=\"popover.close()\" glyph=\"decline\"></button>\n                </div>\n            </div>\n        </div>\n        <fdp-message-view\n            [currentScreen]=\"currentScreen\"\n            [filteredErrors]=\"_filteredErrors\"\n            [currentEntry]=\"currentEntry\"\n            (openDetails)=\"_showDetails($event)\"\n            (closePopover)=\"_closePopover($event)\"\n            (focusItem)=\"focusItem.emit($event)\"\n        ></fdp-message-view>\n    </div>\n</fd-popover>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-message-view{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;position:relative}.fd-message-view:after,.fd-message-view:before{box-sizing:inherit;font-size:inherit}.fd-message-view__list{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-height:50vh;max-width:26rem;padding:0}.fd-message-view__list:after,.fd-message-view__list:before{box-sizing:inherit;font-size:inherit}.fd-message-view__list--hidden{opacity:0}.fd-message-view__details{-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;forced-color-adjust:none;inset:0;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem 1rem 1rem 3.5rem;position:absolute}.fd-message-view__details:after,.fd-message-view__details:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details[dir=rtl],[dir=rtl] .fd-message-view__details{padding:1rem 3.5rem 1rem 1rem}.fd-message-view__details-title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);display:block;font-family:var(--sapFontFamily);font-family:var(--sapFontHeaderFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader5Size);font-weight:400;font-weight:var(--sapFontHeaderWeight);forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 1rem;padding:0;white-space:normal}.fd-message-view__details-title:after,.fd-message-view__details-title:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details-title .fd-message-view__icon{font-size:1rem;margin:0 .5rem 0 -2rem}.fd-message-view__details-title .fd-message-view__icon[dir=rtl],[dir=rtl] .fd-message-view__details-title .fd-message-view__icon{margin:0 -2rem 0 .5rem}.fd-message-view__details-description{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1.4;margin:0 0 1rem;padding:0;white-space:normal}.fd-message-view__details-description:after,.fd-message-view__details-description:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details--visible{display:block}.fd-message-popover__trigger.is-focus,.fd-message-popover__trigger:focus{outline-color:var(--sapContent_ContrastFocusColor);z-index:5}.fd-message-popover__trigger--critical{--fdButtonColor:var(--sapButton_Critical_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Background);--fdButtonBorderColor:var(--sapButton_Critical_BorderColor)}.fd-message-popover__trigger--critical.is-hover,.fd-message-popover__trigger--critical:hover{--fdButtonColor:var(--sapButton_Critical_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Hover_Background);--fdButtonBorderColor:var(--sapButton_Critical_Hover_BorderColor)}.fd-message-popover__trigger--critical.is-active,.fd-message-popover__trigger--critical:active{--fdButtonColor:var(--sapButton_Critical_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Active_Background);--fdButtonBorderColor:var(--sapButton_Critical_Active_BorderColor)}.fd-message-popover__trigger--negative{--fdButtonColor:var(--sapButton_Negative_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Background);--fdButtonBorderColor:var(--sapButton_Negative_BorderColor)}.fd-message-popover__trigger--negative.is-hover,.fd-message-popover__trigger--negative:hover{--fdButtonColor:var(--sapButton_Negative_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Hover_Background);--fdButtonBorderColor:var(--sapButton_Negative_Hover_BorderColor)}.fd-message-popover__trigger--negative.is-active,.fd-message-popover__trigger--negative:active{--fdButtonColor:var(--sapButton_Negative_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Active_Background);--fdButtonBorderColor:var(--sapButton_Negative_Active_BorderColor)}.fd-message-popover__trigger--success{--fdButtonColor:var(--sapButton_Success_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Background);--fdButtonBorderColor:var(--sapButton_Success_BorderColor)}.fd-message-popover__trigger--success.is-hover,.fd-message-popover__trigger--success:hover{--fdButtonColor:var(--sapButton_Success_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Hover_Background);--fdButtonBorderColor:var(--sapButton_Success_Hover_BorderColor)}.fd-message-popover__trigger--success.is-active,.fd-message-popover__trigger--success:active{--fdButtonColor:var(--sapButton_Success_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Active_Background);--fdButtonBorderColor:var(--sapButton_Success_Active_BorderColor)}.fd-message-popover__trigger--information{--fdButtonColor:var(--sapButton_Neutral_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Background);--fdButtonBorderColor:var(--sapButton_Neutral_BorderColor)}.fd-message-popover__trigger--information.is-hover,.fd-message-popover__trigger--information:hover{--fdButtonColor:var(--sapButton_Neutral_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Hover_Background);--fdButtonBorderColor:var(--sapButton_Neutral_Hover_BorderColor)}.fd-message-popover__trigger--information.is-active,.fd-message-popover__trigger--information:active{--fdButtonColor:var(--sapButton_Neutral_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Active_Background);--fdButtonBorderColor:var(--sapButton_Neutral_Active_BorderColor)}.fd-message-popover__view-container{border-bottom-left-radius:var(--fdPopover_Border_Radius);border-bottom-right-radius:var(--fdPopover_Border_Radius);overflow:hidden;display:block;max-height:40vh}.fd-message-popover__view-container .fd-message-view .fd-list__item:first-child{border-top-left-radius:0;border-top-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:first-child:before{border-top-left-radius:0;border-top-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:last-child:before{border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-message-view__list{min-width:20rem;min-height:10rem;max-height:40vh}.fd-message-view__list .fd-link{font-size:inherit}.fd-message-view__list .fd-list__link:active,.fd-message-view__list .fd-list__link.is-active{--sapLinkColor: var(--sapList_Active_TextColor);--sapLink_Active_Color: var(--sapList_Active_TextColor)}\n"] }]

package/esm2020/search-field/search-field-mobile/search-field/search-field-mobile.component.mjs

@@ -58,7 +58,7 @@ export class SearchFieldMobileComponent extends MobileModeBase {
     }
 }
 SearchFieldMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SearchFieldMobileComponent, deps: [{ token: i0.ElementRef }, { token: i1.DialogService }, { token: SEARCH_FIELD_COMPONENT }, { token: MOBILE_MODE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SearchFieldMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SearchFieldMobileComponent, selector: "fdp-search-field-mobile", viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <ng-template fdkTemplate=\"header\">\n                <div fd-bar-middle>\n                    <fd-bar-element [fullWidth]=\"true\">\n                        <ng-container\n                            *ngIf=\"childContent?.inputFieldTemplate\"\n                            [ngTemplateOutlet]=\"childContent?.inputFieldTemplate!\"\n                        ></ng-container>\n                    </fd-bar-element>\n                    <button\n                        fd-dialog-close-button\n                        fdkInitialFocus\n                        *ngIf=\"mobileConfig?.hasCloseButton\"\n                        [mobile]=\"true\"\n                        (click)=\"_handleDismiss()\"\n                    ></button>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container\n                *ngIf=\"childContent?.suggestionMenuTemplate\"\n                [ngTemplateOutlet]=\"childContent?.suggestionMenuTemplate!\"\n            ></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"_handleApprove()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { kind: "directive", type: i4.TemplateDirective, selector: "[fdkTemplate], [fdTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i4.InitialFocusDirective, selector: "[fdkInitialFocus], [fdInitialFocus], [fd-initial-focus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+SearchFieldMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SearchFieldMobileComponent, selector: "fdp-search-field-mobile", viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <ng-template fdkTemplate=\"header\">\n                <div fd-bar-middle>\n                    <fd-bar-element [fullWidth]=\"true\">\n                        <ng-container\n                            *ngIf=\"childContent?.inputFieldTemplate\"\n                            [ngTemplateOutlet]=\"childContent?.inputFieldTemplate!\"\n                        ></ng-container>\n                    </fd-bar-element>\n                    <button\n                        fd-dialog-close-button\n                        fdkInitialFocus\n                        *ngIf=\"mobileConfig?.hasCloseButton\"\n                        [mobile]=\"true\"\n                        (click)=\"_handleDismiss()\"\n                    ></button>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container\n                *ngIf=\"childContent?.suggestionMenuTemplate\"\n                [ngTemplateOutlet]=\"childContent?.suggestionMenuTemplate!\"\n            ></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"_handleApprove()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: i3.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i3.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i1.DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: i1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "directive", type: i4.TemplateDirective, selector: "[fdkTemplate], [fdTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i4.InitialFocusDirective, selector: "[fdkInitialFocus], [fdInitialFocus], [fd-initial-focus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SearchFieldMobileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-search-field-mobile', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <ng-template fdkTemplate=\"header\">\n                <div fd-bar-middle>\n                    <fd-bar-element [fullWidth]=\"true\">\n                        <ng-container\n                            *ngIf=\"childContent?.inputFieldTemplate\"\n                            [ngTemplateOutlet]=\"childContent?.inputFieldTemplate!\"\n                        ></ng-container>\n                    </fd-bar-element>\n                    <button\n                        fd-dialog-close-button\n                        fdkInitialFocus\n                        *ngIf=\"mobileConfig?.hasCloseButton\"\n                        [mobile]=\"true\"\n                        (click)=\"_handleDismiss()\"\n                    ></button>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n\n        <fd-dialog-body>\n            <ng-container\n                *ngIf=\"childContent?.suggestionMenuTemplate\"\n                [ngTemplateOutlet]=\"childContent?.suggestionMenuTemplate!\"\n            ></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"_handleApprove()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n" }]

package/esm2020/table/components/table-cell-header-popover/table-cell-header-popover.component.mjs

@@ -103,7 +103,7 @@ export class TableCellHeaderPopoverComponent {
     }
 }
 TableCellHeaderPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableCellHeaderPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableCellHeaderPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableCellHeaderPopoverComponent, selector: "fdp-table-cell-header-popover", inputs: { column: "column", popoverTemplate: "popoverTemplate", disabled: "disabled", columnFrozen: "columnFrozen", filteringFromHeaderDisabled: "filteringFromHeaderDisabled", columnIndex: "columnIndex" }, providers: [DestroyedService], viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "_popoverItems", predicate: TemplateDirective, descendants: true }], ngImport: i0, template: "<fd-popover\n    [disabled]=\"disabled\"\n    [noArrow]=\"true\"\n    fd-table-popover\n    [focusAutoCapture]=\"true\"\n    [focusTrapped]=\"true\"\n    *ngIf=\"!popoverTemplate; else projectedPopover\"\n    [triggers]=\"_headerPopoverTriggers\"\n>\n    <fdp-list [noBorder]=\"true\" [navigated]=\"true\">\n        <fdp-free-content-list-item *ngFor=\"let item of _popoverItems$.asObservable() | async\">\n            <ng-template [ngTemplateOutlet]=\"item\" [ngTemplateOutletContext]=\"{ popover: popover }\"></ng-template>\n        </fdp-free-content-list-item>\n    </fdp-list>\n</fd-popover>\n<ng-template #projectedPopover>\n    <ng-template\n        [ngTemplateOutlet]=\"popoverTemplate!\"\n        [ngTemplateOutletContext]=\"{ $implicit: _popoverItems$.asObservable() }\"\n    ></ng-template>\n</ng-template>\n\n<ng-container *ngIf=\"column?.sortable\">\n    <ng-template fdkTemplate=\"sortingAscPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n        >\n            <span fd-list-icon glyph=\"sort-ascending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortAsc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n    <ng-template fdkTemplate=\"sortingDescPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n        >\n            <span fd-list-icon glyph=\"sort-descending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortDesc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.groupable\">\n    <ng-template fdkTemplate=\"groupPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderGroupBy(column.key)\"\n            (keydown.enter)=\"_setColumnHeaderGroupBy(column.key)\"\n        >\n            <span fd-list-title>{{ 'platformTable.headerMenuGroup' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.freezable || column?.endFreezable\">\n    <ng-template fdkTemplate=\"freezePopoverItem\" let-popover=\"popover\">\n        <ng-container *ngIf=\"!columnFrozen; else unfreezeTpl\">\n            <a fd-list-link [focusable]=\"true\" (click)=\"_freeze()\" (keyup.enter)=\"_freeze()\">\n                <span fd-list-title>\n                    {{\n                        (!column.endFreezable\n                            ? columnIndex > 0\n                                ? 'platformTable.headerMenuFreezePlural'\n                                : 'platformTable.headerMenuFreeze'\n                            : 'platformTable.headerMenuEndFreeze'\n                        ) | fdTranslate\n                    }}</span\n                >\n            </a>\n        </ng-container>\n        <ng-template #unfreezeTpl>\n            <a fd-list-link [focusable]=\"true\" (click)=\"_unFreeze()\" (keyup.enter)=\"_unFreeze()\">\n                <span fd-list-title>{{\n                    (columnIndex > 0 ? 'platformTable.headerMenuUnfreezePlural' : 'platformTable.headerMenuUnfreeze')\n                        | fdTranslate\n                }}</span>\n            </a>\n        </ng-template>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.filterable && !filteringFromHeaderDisabled\">\n    <ng-template fdkTemplate=\"filteringPopoverItem\" let-popover=\"popover\">\n        <div fd-list-link style=\"cursor: auto\">\n            <i fd-list-icon glyph=\"filter\"></i>\n            <div fd-form-item [horizontal]=\"true\" (click)=\"$event.stopPropagation()\">\n                <label fd-form-label [for]=\"'fdp-table-column-filtering-' + column.name\">{{\n                    'platformTable.headerMenuFilter' | fdTranslate\n                }}</label>\n                <input\n                    fd-form-control\n                    [id]=\"'fdp-table-column-filtering-' + column.name\"\n                    (keydown.enter)=\"_setColumnHeaderFilterBy(column.key, $any($event.target)?.value)\"\n                />\n            </div>\n        </div>\n    </ng-template>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TablePopoverDirective, selector: "[fdTablePopover], [fd-table-popover]" }, { kind: "component", type: i3.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i3.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i3.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i3.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i4.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i5.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i5.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "directive", type: i5.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i6.TemplateDirective, selector: "[fdkTemplate], [fdTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i7.ListComponent, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "component", type: i7.FreeContentListItemComponent, selector: "fdp-free-content-list-item" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TableCellHeaderPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableCellHeaderPopoverComponent, selector: "fdp-table-cell-header-popover", inputs: { column: "column", popoverTemplate: "popoverTemplate", disabled: "disabled", columnFrozen: "columnFrozen", filteringFromHeaderDisabled: "filteringFromHeaderDisabled", columnIndex: "columnIndex" }, providers: [DestroyedService], viewQueries: [{ propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "_popoverItems", predicate: TemplateDirective, descendants: true }], ngImport: i0, template: "<fd-popover\n    [disabled]=\"disabled\"\n    [noArrow]=\"true\"\n    fd-table-popover\n    [focusAutoCapture]=\"true\"\n    [focusTrapped]=\"true\"\n    *ngIf=\"!popoverTemplate; else projectedPopover\"\n    [triggers]=\"_headerPopoverTriggers\"\n>\n    <fdp-list [noBorder]=\"true\" [navigated]=\"true\">\n        <fdp-free-content-list-item *ngFor=\"let item of _popoverItems$.asObservable() | async\">\n            <ng-template [ngTemplateOutlet]=\"item\" [ngTemplateOutletContext]=\"{ popover: popover }\"></ng-template>\n        </fdp-free-content-list-item>\n    </fdp-list>\n</fd-popover>\n<ng-template #projectedPopover>\n    <ng-template\n        [ngTemplateOutlet]=\"popoverTemplate!\"\n        [ngTemplateOutletContext]=\"{ $implicit: _popoverItems$.asObservable() }\"\n    ></ng-template>\n</ng-template>\n\n<ng-container *ngIf=\"column?.sortable\">\n    <ng-template fdkTemplate=\"sortingAscPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n        >\n            <span fd-list-icon glyph=\"sort-ascending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortAsc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n    <ng-template fdkTemplate=\"sortingDescPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n        >\n            <span fd-list-icon glyph=\"sort-descending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortDesc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.groupable\">\n    <ng-template fdkTemplate=\"groupPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderGroupBy(column.key)\"\n            (keydown.enter)=\"_setColumnHeaderGroupBy(column.key)\"\n        >\n            <span fd-list-title>{{ 'platformTable.headerMenuGroup' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.freezable || column?.endFreezable\">\n    <ng-template fdkTemplate=\"freezePopoverItem\" let-popover=\"popover\">\n        <ng-container *ngIf=\"!columnFrozen; else unfreezeTpl\">\n            <a fd-list-link [focusable]=\"true\" (click)=\"_freeze()\" (keyup.enter)=\"_freeze()\">\n                <span fd-list-title>\n                    {{\n                        (!column.endFreezable\n                            ? columnIndex > 0\n                                ? 'platformTable.headerMenuFreezePlural'\n                                : 'platformTable.headerMenuFreeze'\n                            : 'platformTable.headerMenuEndFreeze'\n                        ) | fdTranslate\n                    }}</span\n                >\n            </a>\n        </ng-container>\n        <ng-template #unfreezeTpl>\n            <a fd-list-link [focusable]=\"true\" (click)=\"_unFreeze()\" (keyup.enter)=\"_unFreeze()\">\n                <span fd-list-title>{{\n                    (columnIndex > 0 ? 'platformTable.headerMenuUnfreezePlural' : 'platformTable.headerMenuUnfreeze')\n                        | fdTranslate\n                }}</span>\n            </a>\n        </ng-template>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.filterable && !filteringFromHeaderDisabled\">\n    <ng-template fdkTemplate=\"filteringPopoverItem\" let-popover=\"popover\">\n        <div fd-list-link style=\"cursor: auto\">\n            <i fd-list-icon glyph=\"filter\"></i>\n            <div fd-form-item [horizontal]=\"true\" (click)=\"$event.stopPropagation()\">\n                <label fd-form-label [for]=\"'fdp-table-column-filtering-' + column.name\">{{\n                    'platformTable.headerMenuFilter' | fdTranslate\n                }}</label>\n                <input\n                    fd-form-control\n                    [id]=\"'fdp-table-column-filtering-' + column.name\"\n                    (keydown.enter)=\"_setColumnHeaderFilterBy(column.key, $any($event.target)?.value)\"\n                />\n            </div>\n        </div>\n    </ng-template>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TablePopoverDirective, selector: "[fdTablePopover], [fd-table-popover]" }, { kind: "component", type: i3.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i3.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i3.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i3.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "checkbox", "radio", "alignLabelEnd", "inlineHelpTitle", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i4.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "directive", type: i5.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i5.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "directive", type: i5.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i6.TemplateDirective, selector: "[fdkTemplate], [fdTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i7.ListComponent, selector: "fdp-list", inputs: ["selectedItems", "ariaSetsize", "ariaMultiselectable", "loadTitle", "loadingLabel", "delayTime", "itemSize", "loadMore", "loadOnScroll", "role", "listType", "maxHeight", "noBorder", "scrollOffsetPercentage", "selection", "selectionMode", "value", "rowSelection", "dataSource", "navigated", "navigationIndicator", "hasByLine", "hasObject", "unreadIndicator", "interceptTabKey"], outputs: ["selectedItemChange"] }, { kind: "component", type: i7.FreeContentListItemComponent, selector: "fdp-free-content-list-item" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableCellHeaderPopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fdp-table-cell-header-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [DestroyedService], template: "<fd-popover\n    [disabled]=\"disabled\"\n    [noArrow]=\"true\"\n    fd-table-popover\n    [focusAutoCapture]=\"true\"\n    [focusTrapped]=\"true\"\n    *ngIf=\"!popoverTemplate; else projectedPopover\"\n    [triggers]=\"_headerPopoverTriggers\"\n>\n    <fdp-list [noBorder]=\"true\" [navigated]=\"true\">\n        <fdp-free-content-list-item *ngFor=\"let item of _popoverItems$.asObservable() | async\">\n            <ng-template [ngTemplateOutlet]=\"item\" [ngTemplateOutletContext]=\"{ popover: popover }\"></ng-template>\n        </fdp-free-content-list-item>\n    </fdp-list>\n</fd-popover>\n<ng-template #projectedPopover>\n    <ng-template\n        [ngTemplateOutlet]=\"popoverTemplate!\"\n        [ngTemplateOutletContext]=\"{ $implicit: _popoverItems$.asObservable() }\"\n    ></ng-template>\n</ng-template>\n\n<ng-container *ngIf=\"column?.sortable\">\n    <ng-template fdkTemplate=\"sortingAscPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.ASC)\"\n        >\n            <span fd-list-icon glyph=\"sort-ascending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortAsc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n    <ng-template fdkTemplate=\"sortingDescPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n            (keydown.enter)=\"_setColumnHeaderSortBy(column.key, SORT_DIRECTION.DESC)\"\n        >\n            <span fd-list-icon glyph=\"sort-descending\"></span>\n            <span fd-list-title>{{ 'platformTable.headerMenuSortDesc' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.groupable\">\n    <ng-template fdkTemplate=\"groupPopoverItem\" let-popover=\"popover\">\n        <a\n            fd-list-link\n            [focusable]=\"true\"\n            (click)=\"_setColumnHeaderGroupBy(column.key)\"\n            (keydown.enter)=\"_setColumnHeaderGroupBy(column.key)\"\n        >\n            <span fd-list-title>{{ 'platformTable.headerMenuGroup' | fdTranslate }}</span>\n        </a>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.freezable || column?.endFreezable\">\n    <ng-template fdkTemplate=\"freezePopoverItem\" let-popover=\"popover\">\n        <ng-container *ngIf=\"!columnFrozen; else unfreezeTpl\">\n            <a fd-list-link [focusable]=\"true\" (click)=\"_freeze()\" (keyup.enter)=\"_freeze()\">\n                <span fd-list-title>\n                    {{\n                        (!column.endFreezable\n                            ? columnIndex > 0\n                                ? 'platformTable.headerMenuFreezePlural'\n                                : 'platformTable.headerMenuFreeze'\n                            : 'platformTable.headerMenuEndFreeze'\n                        ) | fdTranslate\n                    }}</span\n                >\n            </a>\n        </ng-container>\n        <ng-template #unfreezeTpl>\n            <a fd-list-link [focusable]=\"true\" (click)=\"_unFreeze()\" (keyup.enter)=\"_unFreeze()\">\n                <span fd-list-title>{{\n                    (columnIndex > 0 ? 'platformTable.headerMenuUnfreezePlural' : 'platformTable.headerMenuUnfreeze')\n                        | fdTranslate\n                }}</span>\n            </a>\n        </ng-template>\n    </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"column?.filterable && !filteringFromHeaderDisabled\">\n    <ng-template fdkTemplate=\"filteringPopoverItem\" let-popover=\"popover\">\n        <div fd-list-link style=\"cursor: auto\">\n            <i fd-list-icon glyph=\"filter\"></i>\n            <div fd-form-item [horizontal]=\"true\" (click)=\"$event.stopPropagation()\">\n                <label fd-form-label [for]=\"'fdp-table-column-filtering-' + column.name\">{{\n                    'platformTable.headerMenuFilter' | fdTranslate\n                }}</label>\n                <input\n                    fd-form-control\n                    [id]=\"'fdp-table-column-filtering-' + column.name\"\n                    (keydown.enter)=\"_setColumnHeaderFilterBy(column.key, $any($event.target)?.value)\"\n                />\n            </div>\n        </div>\n    </ng-template>\n</ng-container>\n" }]