@fundamental-ngx/core 0.35.2-rc.12 → 0.35.2-rc.13

package/fesm2015/fundamental-ngx-core-input-group.mjs

@@ -4,8 +4,7 @@ import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { Subscription, Subject, merge, fromEvent, map, filter } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Subscription, Subject, merge, fromEvent, map, debounceTime, filter, takeUntil } from 'rxjs';
 import { registerFormItemControl } from '@fundamental-ngx/core/form';
 import { __decorate, __metadata } from 'tslib';
 import { applyCssClass } from '@fundamental-ngx/core/utils';
@@ -343,7 +342,9 @@ class InputGroupComponent {
         if (!inputElement) {
             return;
         }
-        this._inputFocused$ = merge(fromEvent(inputElement, 'focusin').pipe(map(() => true)), fromEvent(inputElement, 'focusout').pipe(map(() => false))).pipe(filter(() => this.showFocus), takeUntil(this._onDestroy$));
+        this._inputFocused$ = merge(fromEvent(inputElement, 'focusin').pipe(map(() => true)), fromEvent(inputElement, 'focusout').pipe(map(() => false))).pipe(
+        // debounceTime is needed in order to filter subsequent focus-blur events, that happen simultaneously
+        debounceTime(10), filter(() => this.showFocus), takeUntil(this._onDestroy$));
         this._changeDetectorRef.markForCheck();
     }
 }
@@ -355,7 +356,7 @@ InputGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             multi: true
         },
         registerFormItemControl(InputGroupComponent)
-    ], queries: [{ propertyName: "inputElement", first: true, predicate: InputGroupInputDirective, descendants: true }, { propertyName: "addOnElement", first: true, predicate: InputGroupAddOnDirective, descendants: true }], viewQueries: [{ propertyName: "localInputElement", first: true, predicate: InputGroupInputDirective, descendants: true }], ngImport: i0, template: "<div\n    class=\"fd-input-group\"\n    [class.fd-input-group--inline]=\"inline\"\n    [class.is-disabled]=\"disabled\"\n    [class.is-readonly]=\"readonly\"\n    [class.fd-shellbar__input-group]=\"inShellbar\"\n    [class.fd-input-group--control]=\"isControl\"\n    [class.is-focus]=\"_inputFocused$ | async\"\n    [class]=\"state ? 'is-' + state : ' '\"\n>\n    <ng-container *ngIf=\"placement === 'after' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"!addOnElement && (glyph || addOnText)\">\n        <span\n            *ngIf=\"button\"\n            fd-input-group-addon\n            [button]=\"true\"\n            [placement]=\"placement\"\n            [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n        >\n            <button\n                fd-button\n                class=\"fd-input-group__button\"\n                type=\"button\"\n                [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                [id]=\"_addOnButtonId\"\n                [attr.tabindex]=\"buttonFocusable ? 0 : -1\"\n                [attr.title]=\"iconTitle || glyphAriaLabel || glyph\"\n                [glyph]=\"glyph\"\n                [class.fd-shellbar__button]=\"inShellbar\"\n                [class.is-expanded]=\"isExpanded\"\n                [attr.aria-expanded]=\"inShellbar ? isExpanded : null\"\n                [ariaLabel]=\"glyphAriaLabel || glyph || addOnText\"\n                [attr.aria-controls]=\"_inputId\"\n                [disabled]=\"disabled\"\n                (mousedown)=\"_preventFocus($event)\"\n                (click)=\"_buttonClicked($event)\"\n            >\n                <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n            </button>\n        </span>\n\n        <span\n            *ngIf=\"!button\"\n            fd-input-group-addon\n            [id]=\"_addOnNonButtonId\"\n            [placement]=\"placement\"\n            [attr.aria-label]=\"glyphAriaLabel || glyph || addOnText\"\n            [attr.title]=\"iconTitle || glyph || addOnText\"\n        >\n            <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n\n            <span *ngIf=\"glyph\" [className]=\"'sap-icon--' + glyph\"></span>\n        </span>\n    </ng-container>\n\n    <ng-container *ngIf=\"placement === 'before' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #input>\n    <ng-container *ngIf=\"inputTemplate\">\n        <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n    </ng-container>\n\n    <input\n        *ngIf=\"!inputTemplate\"\n        [(ngModel)]=\"inputText\"\n        [id]=\"_inputId\"\n        [attr.aria-labelledby]=\"_inputAriaLabelledBy\"\n        [class.fd-shellbar__input-group-input]=\"inShellbar\"\n        fd-input-group-input\n        [type]=\"type\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        (search)=\"_onSearchEvent($event)\"\n    />\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.1-rc.1\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-input{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;z-index:1;width:100%;min-width:2.75rem;border-radius:var(--sapField_BorderCornerRadius);padding:0 .625rem;margin:.25rem 0;height:2.25rem;box-shadow:none;color:var(--sapField_TextColor);text-shadow:var(--fdInput_Text_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);cursor:text;outline:none;overflow:hidden;appearance:none;-moz-appearance:none;-webkit-appearance:none}.fd-input:before,.fd-input:after{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{font-style:var(--fdPlaceholder_Font_Style);color:var(--sapField_PlaceholderTextColor)}.fd-input::selection{color:var(--sapContent_ContrastTextColor);background-color:var(--sapSelectedColor)}.fd-input::-ms-clear{display:none}.fd-input:hover,.fd-input.is-hover{background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input:focus,.fd-input.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-width:var(--sapContent_FocusWidth);outline-style:var(--sapContent_FocusStyle);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);box-shadow:none}.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-cancel-button,.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[aria-expanded=true],.fd-input.is-expanded{z-index:4}.fd-input:last-child{margin-bottom:.25rem}.fd-input--compact{min-width:2rem;height:1.625rem;margin:.1875rem 0;padding:0 .5rem;box-sizing:border-box}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-outer-spin-button,.fd-input--no-number-spinner::-webkit-inner-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:hover,.fd-input.is-success.is-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:focus,.fd-input.is-success.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-input.is-success:focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success.is-focus.is-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:hover,.fd-input.is-error.is-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:focus,.fd-input.is-error.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-input.is-error:focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error.is-focus.is-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:hover,.fd-input.is-warning.is-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:focus,.fd-input.is-warning.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input.is-warning:focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning.is-focus.is-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:hover,.fd-input.is-alert.is-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:focus,.fd-input.is-alert.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input.is-alert:focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert.is-focus.is-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:hover,.fd-input.is-information.is-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:focus,.fd-input.is-information.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-input.is-information:focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information.is-focus.is-hover{box-shadow:none}.fd-input.is-error,.fd-input.is-warning,.fd-input.is-alert{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder,.fd-input.is-alert::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-error:focus,.fd-input.is-error.is-focus,.fd-input.is-warning:focus,.fd-input.is-warning.is-focus,.fd-input.is-alert:focus,.fd-input.is-alert.is-focus,.fd-input.is-information:focus,.fd-input.is-information.is-focus{z-index:5;outline-offset:var(--fdInput_Outline_Offset_States)}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input[aria-disabled=true],.fd-input.is-disabled,.fd-input:disabled{pointer-events:none;opacity:var(--sapContent_DisabledOpacity)}.fd-input[aria-disabled=true]::placeholder,.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input[aria-readonly=true],.fd-input.is-readonly,.fd-input[readonly]{border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);pointer-events:none}.fd-input[aria-readonly=true]::placeholder,.fd-input.is-readonly::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input[aria-readonly=true]:hover,.fd-input[aria-readonly=true].is-hover,.fd-input.is-readonly:hover,.fd-input.is-readonly.is-hover,.fd-input[readonly]:hover,.fd-input[readonly].is-hover{box-shadow:none}.fd-input[aria-readonly=true]:focus,.fd-input[aria-readonly=true].is-focus,.fd-input.is-readonly:focus,.fd-input.is-readonly.is-focus,.fd-input[readonly]:focus,.fd-input[readonly].is-focus{z-index:5;background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}/*!\n * Fundamental Library Styles v0.24.1-rc.1\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-input-group+(--inline, --control)\n    .fd-input-group__addon+(--button)\n*/.fd-input-group{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;z-index:1;min-width:2.75rem;border-radius:var(--sapField_BorderCornerRadius);padding:0 .625rem;margin:.25rem 0;height:2.25rem;box-shadow:none;color:var(--sapField_TextColor);text-shadow:var(--fdInput_Text_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);cursor:text;outline:none;appearance:none;-moz-appearance:none;-webkit-appearance:none;padding:0;width:100%;height:auto;display:flex;overflow:hidden}.fd-input-group:before,.fd-input-group:after{box-sizing:inherit;font-size:inherit}.fd-input-group::placeholder{font-style:var(--fdPlaceholder_Font_Style);color:var(--sapField_PlaceholderTextColor)}.fd-input-group::selection{color:var(--sapContent_ContrastTextColor);background-color:var(--sapSelectedColor)}.fd-input-group::-ms-clear{display:none}.fd-input-group:hover,.fd-input-group.is-hover{background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input-group:focus,.fd-input-group.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-width:var(--sapContent_FocusWidth);outline-style:var(--sapContent_FocusStyle);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);box-shadow:none}.fd-input-group.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input-group.is-success:hover,.fd-input-group.is-success.is-hover{background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input-group.is-success:focus,.fd-input-group.is-success.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-input-group.is-success:focus:hover,.fd-input-group.is-success:focus.is-hover,.fd-input-group.is-success.is-focus:hover,.fd-input-group.is-success.is-focus.is-hover{box-shadow:none}.fd-input-group.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input-group.is-error:hover,.fd-input-group.is-error.is-hover{background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input-group.is-error:focus,.fd-input-group.is-error.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-input-group.is-error:focus:hover,.fd-input-group.is-error:focus.is-hover,.fd-input-group.is-error.is-focus:hover,.fd-input-group.is-error.is-focus.is-hover{box-shadow:none}.fd-input-group.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input-group.is-warning:hover,.fd-input-group.is-warning.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input-group.is-warning:focus,.fd-input-group.is-warning.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input-group.is-warning:focus:hover,.fd-input-group.is-warning:focus.is-hover,.fd-input-group.is-warning.is-focus:hover,.fd-input-group.is-warning.is-focus.is-hover{box-shadow:none}.fd-input-group.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input-group.is-alert:hover,.fd-input-group.is-alert.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input-group.is-alert:focus,.fd-input-group.is-alert.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input-group.is-alert:focus:hover,.fd-input-group.is-alert:focus.is-hover,.fd-input-group.is-alert.is-focus:hover,.fd-input-group.is-alert.is-focus.is-hover{box-shadow:none}.fd-input-group.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input-group.is-information:hover,.fd-input-group.is-information.is-hover{background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input-group.is-information:focus,.fd-input-group.is-information.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-input-group.is-information:focus:hover,.fd-input-group.is-information:focus.is-hover,.fd-input-group.is-information.is-focus:hover,.fd-input-group.is-information.is-focus.is-hover{box-shadow:none}.fd-input-group.is-error,.fd-input-group.is-warning,.fd-input-group.is-alert{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input-group.is-error::placeholder,.fd-input-group.is-warning::placeholder,.fd-input-group.is-alert::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input-group.is-error:focus,.fd-input-group.is-error.is-focus,.fd-input-group.is-warning:focus,.fd-input-group.is-warning.is-focus,.fd-input-group.is-alert:focus,.fd-input-group.is-alert.is-focus,.fd-input-group.is-information:focus,.fd-input-group.is-information.is-focus{z-index:5;outline-offset:var(--fdInput_Outline_Offset_States)}.fd-input-group.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input-group[aria-disabled=true],.fd-input-group.is-disabled,.fd-input-group:disabled{pointer-events:none;opacity:var(--sapContent_DisabledOpacity)}.fd-input-group[aria-disabled=true]::placeholder,.fd-input-group.is-disabled::placeholder,.fd-input-group:disabled::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input-group[aria-readonly=true],.fd-input-group.is-readonly,.fd-input-group[readonly]{border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);pointer-events:none}.fd-input-group[aria-readonly=true]::placeholder,.fd-input-group.is-readonly::placeholder,.fd-input-group[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input-group[aria-readonly=true]:hover,.fd-input-group[aria-readonly=true].is-hover,.fd-input-group.is-readonly:hover,.fd-input-group.is-readonly.is-hover,.fd-input-group[readonly]:hover,.fd-input-group[readonly].is-hover{box-shadow:none}.fd-input-group[aria-readonly=true]:focus,.fd-input-group[aria-readonly=true].is-focus,.fd-input-group.is-readonly:focus,.fd-input-group.is-readonly.is-focus,.fd-input-group[readonly]:focus,.fd-input-group[readonly].is-focus{z-index:5;background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}.fd-input-group .fd-input-group__button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none;z-index:auto!important;position:static!important;border-radius:var(--fdInput_Group_Button_Border_Raduis);background:var(--fdInput_Group_Button_Background);color:var(--fdInput_Group_Button_Text_Color);border-left:var(--sapButton_BorderWidth) solid transparent}[dir=rtl] .fd-input-group .fd-input-group__button,.fd-input-group .fd-input-group__button[dir=rtl]{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-input-group .fd-input-group__button:before{display:none!important}.fd-input-group .fd-input-group__button:hover,.fd-input-group .fd-input-group__button.is-hover{border-left:var(--fdInputGroup_ControlButton_SideBorder);background:var(--fdInput_Group_Button_Hover_Background);color:var(--fdInput_Group_Button_Hover_Text_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}[dir=rtl] .fd-input-group .fd-input-group__button:hover,.fd-input-group .fd-input-group__button:hover[dir=rtl],[dir=rtl] .fd-input-group .fd-input-group__button.is-hover,.fd-input-group .fd-input-group__button.is-hover[dir=rtl]{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-input-group .fd-input-group__button:active,.fd-input-group .fd-input-group__button.is-active{border-left:var(--fdInputGroup_ControlButton_SideBorder);background:var(--fdInput_Group_Button_Active_Background);color:var(--fdInput_Group_Button_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}[dir=rtl] .fd-input-group .fd-input-group__button:active,.fd-input-group .fd-input-group__button:active[dir=rtl],[dir=rtl] .fd-input-group .fd-input-group__button.is-active,.fd-input-group .fd-input-group__button.is-active[dir=rtl]{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-input-group.is-success .fd-input-group__button:hover,.fd-input-group.is-success .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-input-group.is-success .fd-input-group__button:active,.fd-input-group.is-success .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Success_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-input-group.is-error .fd-input-group__button:hover,.fd-input-group.is-error .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-input-group.is-error .fd-input-group__button:active,.fd-input-group.is-error .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Error_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-input-group.is-warning .fd-input-group__button:hover,.fd-input-group.is-warning .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-warning .fd-input-group__button:active,.fd-input-group.is-warning .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-alert .fd-input-group__button:hover,.fd-input-group.is-alert .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-alert .fd-input-group__button:active,.fd-input-group.is-alert .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-information .fd-input-group__button:hover,.fd-input-group.is-information .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-input-group.is-information .fd-input-group__button:active,.fd-input-group.is-information .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Information_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-input-group .fd-input-group__input{border:none;flex:1 1 10rem;background:none;background-color:transparent;padding-left:.25rem;padding-right:.25rem;text-shadow:var(--fdInputGroup_Text_Shadow)}.fd-input-group .fd-input-group__input:nth-child(n+1){margin:0}.fd-input-group .fd-input-group__input:hover,.fd-input-group .fd-input-group__input.is-hover{box-shadow:none}.fd-input-group .fd-input-group__input:focus,.fd-input-group .fd-input-group__input.is-focus{z-index:5;outline:none;box-shadow:none;background:none;border-radius:0}.fd-input-group .fd-input-group__input:nth-child(1){padding-left:.625rem}[dir=rtl] .fd-input-group .fd-input-group__input:nth-child(1),.fd-input-group .fd-input-group__input:nth-child(1)[dir=rtl]{padding-right:.625rem;padding-left:0}.fd-input-group .fd-input-group__input:nth-last-child(1){padding-right:.625rem}[dir=rtl] .fd-input-group .fd-input-group__input:nth-last-child(1),.fd-input-group .fd-input-group__input:nth-last-child(1)[dir=rtl]{padding-right:0;padding-left:.625rem}.fd-input-group--inline{display:inline-flex;vertical-align:bottom;width:auto}.fd-input-group__addon{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sapContent_NonInteractiveIconColor);background:none!important;font-size:var(--sapFontLargeSize);min-width:2.25rem;min-height:2.25rem;padding-left:.625rem;padding-right:.625rem}.fd-input-group__addon:before,.fd-input-group__addon:after{box-sizing:inherit;font-size:inherit}.fd-input-group__addon span[class*=sap-icon--]:before{font-size:var(--sapFontLargeSize)}.fd-input-group__addon--compact{min-width:2rem;min-height:1.625rem}.fd-input-group__addon--readonly{opacity:.4}.fd-input-group__addon--button{padding:0;overflow:visible}.fd-input-group--control[aria-expanded=true]{margin-bottom:0}.fd-input-group .fd-textarea{resize:vertical}.fd-input-group *[aria-disabled=true],.fd-input-group *.is-disabled,.fd-input-group *:disabled{opacity:1}.fd-input-group[readonly],.fd-input-group.is-readonly{overflow:visible}.fd-input-group .fd-tokenizer,.fd-input-group .fd-tokenizer:hover,.fd-input-group .fd-tokenizer.is-hover{box-shadow:none;background:none;background-color:transparent}.fd-input-group .fd-tokenizer:focus,.fd-input-group .fd-tokenizer.is-focus{z-index:5;box-shadow:none;background:none;background-color:transparent;outline:none}fd-input-group .fd-input-group__addon--button.fd-input-group__addon--textarea>*{max-height:100%;height:100%}fd-input-group .fd-button.fd-button--transparent{background:transparent}\n"], components: [{ type: i1$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: InputGroupAddOnDirective, selector: "[fd-input-group-addon]", inputs: ["class", "placement", "type", "state", "button"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "inputElement", first: true, predicate: InputGroupInputDirective, descendants: true }, { propertyName: "addOnElement", first: true, predicate: InputGroupAddOnDirective, descendants: true }], viewQueries: [{ propertyName: "localInputElement", first: true, predicate: InputGroupInputDirective, descendants: true }], ngImport: i0, template: "<div\n    class=\"fd-input-group\"\n    [class.fd-input-group--inline]=\"inline\"\n    [class.is-disabled]=\"disabled\"\n    [class.is-readonly]=\"readonly\"\n    [class.fd-shellbar__input-group]=\"inShellbar\"\n    [class.fd-input-group--control]=\"isControl\"\n    [class.is-focus]=\"_inputFocused$ | async\"\n    [class]=\"state ? 'is-' + state : ' '\"\n>\n    <ng-container *ngIf=\"placement === 'after' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"!addOnElement && (glyph || addOnText)\">\n        <span\n            *ngIf=\"button\"\n            fd-input-group-addon\n            [button]=\"true\"\n            [placement]=\"placement\"\n            [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n        >\n            <button\n                fd-button\n                class=\"fd-input-group__button\"\n                type=\"button\"\n                [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                [id]=\"_addOnButtonId\"\n                [attr.tabindex]=\"buttonFocusable ? 0 : -1\"\n                [attr.title]=\"iconTitle || glyphAriaLabel || glyph\"\n                [glyph]=\"glyph\"\n                [class.fd-shellbar__button]=\"inShellbar\"\n                [class.is-expanded]=\"isExpanded\"\n                [attr.aria-haspopup]=\"isControl\"\n                [attr.aria-expanded]=\"inShellbar ? isExpanded : null\"\n                [ariaLabel]=\"glyphAriaLabel || glyph || addOnText\"\n                [attr.aria-controls]=\"_inputId\"\n                [disabled]=\"disabled\"\n                (mousedown)=\"_preventFocus($event)\"\n                (click)=\"_buttonClicked($event)\"\n            >\n                <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n            </button>\n        </span>\n\n        <span\n            *ngIf=\"!button\"\n            fd-input-group-addon\n            [id]=\"_addOnNonButtonId\"\n            [placement]=\"placement\"\n            [attr.aria-label]=\"glyphAriaLabel || glyph || addOnText\"\n            [attr.title]=\"iconTitle || glyph || addOnText\"\n        >\n            <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n\n            <span *ngIf=\"glyph\" [className]=\"'sap-icon--' + glyph\"></span>\n        </span>\n    </ng-container>\n\n    <ng-container *ngIf=\"placement === 'before' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #input>\n    <ng-container *ngIf=\"inputTemplate\">\n        <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n    </ng-container>\n\n    <input\n        *ngIf=\"!inputTemplate\"\n        [(ngModel)]=\"inputText\"\n        [id]=\"_inputId\"\n        [attr.aria-labelledby]=\"_inputAriaLabelledBy\"\n        [class.fd-shellbar__input-group-input]=\"inShellbar\"\n        fd-input-group-input\n        [type]=\"type\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        (search)=\"_onSearchEvent($event)\"\n    />\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.1-rc.1\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-input{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;z-index:1;width:100%;min-width:2.75rem;border-radius:var(--sapField_BorderCornerRadius);padding:0 .625rem;margin:.25rem 0;height:2.25rem;box-shadow:none;color:var(--sapField_TextColor);text-shadow:var(--fdInput_Text_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);cursor:text;outline:none;overflow:hidden;appearance:none;-moz-appearance:none;-webkit-appearance:none}.fd-input:before,.fd-input:after{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{font-style:var(--fdPlaceholder_Font_Style);color:var(--sapField_PlaceholderTextColor)}.fd-input::selection{color:var(--sapContent_ContrastTextColor);background-color:var(--sapSelectedColor)}.fd-input::-ms-clear{display:none}.fd-input:hover,.fd-input.is-hover{background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input:focus,.fd-input.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-width:var(--sapContent_FocusWidth);outline-style:var(--sapContent_FocusStyle);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);box-shadow:none}.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-cancel-button,.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[aria-expanded=true],.fd-input.is-expanded{z-index:4}.fd-input:last-child{margin-bottom:.25rem}.fd-input--compact{min-width:2rem;height:1.625rem;margin:.1875rem 0;padding:0 .5rem;box-sizing:border-box}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-outer-spin-button,.fd-input--no-number-spinner::-webkit-inner-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:hover,.fd-input.is-success.is-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:focus,.fd-input.is-success.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-input.is-success:focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success.is-focus.is-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:hover,.fd-input.is-error.is-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:focus,.fd-input.is-error.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-input.is-error:focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error.is-focus.is-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:hover,.fd-input.is-warning.is-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:focus,.fd-input.is-warning.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input.is-warning:focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning.is-focus.is-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:hover,.fd-input.is-alert.is-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:focus,.fd-input.is-alert.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input.is-alert:focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert.is-focus.is-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:hover,.fd-input.is-information.is-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:focus,.fd-input.is-information.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-input.is-information:focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information.is-focus.is-hover{box-shadow:none}.fd-input.is-error,.fd-input.is-warning,.fd-input.is-alert{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder,.fd-input.is-alert::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-error:focus,.fd-input.is-error.is-focus,.fd-input.is-warning:focus,.fd-input.is-warning.is-focus,.fd-input.is-alert:focus,.fd-input.is-alert.is-focus,.fd-input.is-information:focus,.fd-input.is-information.is-focus{z-index:5;outline-offset:var(--fdInput_Outline_Offset_States)}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input[aria-disabled=true],.fd-input.is-disabled,.fd-input:disabled{pointer-events:none;opacity:var(--sapContent_DisabledOpacity)}.fd-input[aria-disabled=true]::placeholder,.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input[aria-readonly=true],.fd-input.is-readonly,.fd-input[readonly]{border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);pointer-events:none}.fd-input[aria-readonly=true]::placeholder,.fd-input.is-readonly::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input[aria-readonly=true]:hover,.fd-input[aria-readonly=true].is-hover,.fd-input.is-readonly:hover,.fd-input.is-readonly.is-hover,.fd-input[readonly]:hover,.fd-input[readonly].is-hover{box-shadow:none}.fd-input[aria-readonly=true]:focus,.fd-input[aria-readonly=true].is-focus,.fd-input.is-readonly:focus,.fd-input.is-readonly.is-focus,.fd-input[readonly]:focus,.fd-input[readonly].is-focus{z-index:5;background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}/*!\n * Fundamental Library Styles v0.24.1-rc.1\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-input-group+(--inline, --control)\n    .fd-input-group__addon+(--button)\n*/.fd-input-group{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;z-index:1;min-width:2.75rem;border-radius:var(--sapField_BorderCornerRadius);padding:0 .625rem;margin:.25rem 0;height:2.25rem;box-shadow:none;color:var(--sapField_TextColor);text-shadow:var(--fdInput_Text_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);cursor:text;outline:none;appearance:none;-moz-appearance:none;-webkit-appearance:none;padding:0;width:100%;height:auto;display:flex;overflow:hidden}.fd-input-group:before,.fd-input-group:after{box-sizing:inherit;font-size:inherit}.fd-input-group::placeholder{font-style:var(--fdPlaceholder_Font_Style);color:var(--sapField_PlaceholderTextColor)}.fd-input-group::selection{color:var(--sapContent_ContrastTextColor);background-color:var(--sapSelectedColor)}.fd-input-group::-ms-clear{display:none}.fd-input-group:hover,.fd-input-group.is-hover{background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input-group:focus,.fd-input-group.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-width:var(--sapContent_FocusWidth);outline-style:var(--sapContent_FocusStyle);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);box-shadow:none}.fd-input-group.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input-group.is-success:hover,.fd-input-group.is-success.is-hover{background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input-group.is-success:focus,.fd-input-group.is-success.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-input-group.is-success:focus:hover,.fd-input-group.is-success:focus.is-hover,.fd-input-group.is-success.is-focus:hover,.fd-input-group.is-success.is-focus.is-hover{box-shadow:none}.fd-input-group.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input-group.is-error:hover,.fd-input-group.is-error.is-hover{background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input-group.is-error:focus,.fd-input-group.is-error.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-input-group.is-error:focus:hover,.fd-input-group.is-error:focus.is-hover,.fd-input-group.is-error.is-focus:hover,.fd-input-group.is-error.is-focus.is-hover{box-shadow:none}.fd-input-group.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input-group.is-warning:hover,.fd-input-group.is-warning.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input-group.is-warning:focus,.fd-input-group.is-warning.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input-group.is-warning:focus:hover,.fd-input-group.is-warning:focus.is-hover,.fd-input-group.is-warning.is-focus:hover,.fd-input-group.is-warning.is-focus.is-hover{box-shadow:none}.fd-input-group.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input-group.is-alert:hover,.fd-input-group.is-alert.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input-group.is-alert:focus,.fd-input-group.is-alert.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input-group.is-alert:focus:hover,.fd-input-group.is-alert:focus.is-hover,.fd-input-group.is-alert.is-focus:hover,.fd-input-group.is-alert.is-focus.is-hover{box-shadow:none}.fd-input-group.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input-group.is-information:hover,.fd-input-group.is-information.is-hover{background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input-group.is-information:focus,.fd-input-group.is-information.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-input-group.is-information:focus:hover,.fd-input-group.is-information:focus.is-hover,.fd-input-group.is-information.is-focus:hover,.fd-input-group.is-information.is-focus.is-hover{box-shadow:none}.fd-input-group.is-error,.fd-input-group.is-warning,.fd-input-group.is-alert{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input-group.is-error::placeholder,.fd-input-group.is-warning::placeholder,.fd-input-group.is-alert::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input-group.is-error:focus,.fd-input-group.is-error.is-focus,.fd-input-group.is-warning:focus,.fd-input-group.is-warning.is-focus,.fd-input-group.is-alert:focus,.fd-input-group.is-alert.is-focus,.fd-input-group.is-information:focus,.fd-input-group.is-information.is-focus{z-index:5;outline-offset:var(--fdInput_Outline_Offset_States)}.fd-input-group.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input-group[aria-disabled=true],.fd-input-group.is-disabled,.fd-input-group:disabled{pointer-events:none;opacity:var(--sapContent_DisabledOpacity)}.fd-input-group[aria-disabled=true]::placeholder,.fd-input-group.is-disabled::placeholder,.fd-input-group:disabled::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input-group[aria-readonly=true],.fd-input-group.is-readonly,.fd-input-group[readonly]{border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);pointer-events:none}.fd-input-group[aria-readonly=true]::placeholder,.fd-input-group.is-readonly::placeholder,.fd-input-group[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input-group[aria-readonly=true]:hover,.fd-input-group[aria-readonly=true].is-hover,.fd-input-group.is-readonly:hover,.fd-input-group.is-readonly.is-hover,.fd-input-group[readonly]:hover,.fd-input-group[readonly].is-hover{box-shadow:none}.fd-input-group[aria-readonly=true]:focus,.fd-input-group[aria-readonly=true].is-focus,.fd-input-group.is-readonly:focus,.fd-input-group.is-readonly.is-focus,.fd-input-group[readonly]:focus,.fd-input-group[readonly].is-focus{z-index:5;background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}.fd-input-group .fd-input-group__button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none;z-index:auto!important;position:static!important;border-radius:var(--fdInput_Group_Button_Border_Raduis);background:var(--fdInput_Group_Button_Background);color:var(--fdInput_Group_Button_Text_Color);border-left:var(--sapButton_BorderWidth) solid transparent}[dir=rtl] .fd-input-group .fd-input-group__button,.fd-input-group .fd-input-group__button[dir=rtl]{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-input-group .fd-input-group__button:before{display:none!important}.fd-input-group .fd-input-group__button:hover,.fd-input-group .fd-input-group__button.is-hover{border-left:var(--fdInputGroup_ControlButton_SideBorder);background:var(--fdInput_Group_Button_Hover_Background);color:var(--fdInput_Group_Button_Hover_Text_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}[dir=rtl] .fd-input-group .fd-input-group__button:hover,.fd-input-group .fd-input-group__button:hover[dir=rtl],[dir=rtl] .fd-input-group .fd-input-group__button.is-hover,.fd-input-group .fd-input-group__button.is-hover[dir=rtl]{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-input-group .fd-input-group__button:active,.fd-input-group .fd-input-group__button.is-active{border-left:var(--fdInputGroup_ControlButton_SideBorder);background:var(--fdInput_Group_Button_Active_Background);color:var(--fdInput_Group_Button_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}[dir=rtl] .fd-input-group .fd-input-group__button:active,.fd-input-group .fd-input-group__button:active[dir=rtl],[dir=rtl] .fd-input-group .fd-input-group__button.is-active,.fd-input-group .fd-input-group__button.is-active[dir=rtl]{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-input-group.is-success .fd-input-group__button:hover,.fd-input-group.is-success .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-input-group.is-success .fd-input-group__button:active,.fd-input-group.is-success .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Success_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-input-group.is-error .fd-input-group__button:hover,.fd-input-group.is-error .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-input-group.is-error .fd-input-group__button:active,.fd-input-group.is-error .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Error_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-input-group.is-warning .fd-input-group__button:hover,.fd-input-group.is-warning .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-warning .fd-input-group__button:active,.fd-input-group.is-warning .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-alert .fd-input-group__button:hover,.fd-input-group.is-alert .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-alert .fd-input-group__button:active,.fd-input-group.is-alert .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-information .fd-input-group__button:hover,.fd-input-group.is-information .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-input-group.is-information .fd-input-group__button:active,.fd-input-group.is-information .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Information_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-input-group .fd-input-group__input{border:none;flex:1 1 10rem;background:none;background-color:transparent;padding-left:.25rem;padding-right:.25rem;text-shadow:var(--fdInputGroup_Text_Shadow)}.fd-input-group .fd-input-group__input:nth-child(n+1){margin:0}.fd-input-group .fd-input-group__input:hover,.fd-input-group .fd-input-group__input.is-hover{box-shadow:none}.fd-input-group .fd-input-group__input:focus,.fd-input-group .fd-input-group__input.is-focus{z-index:5;outline:none;box-shadow:none;background:none;border-radius:0}.fd-input-group .fd-input-group__input:nth-child(1){padding-left:.625rem}[dir=rtl] .fd-input-group .fd-input-group__input:nth-child(1),.fd-input-group .fd-input-group__input:nth-child(1)[dir=rtl]{padding-right:.625rem;padding-left:0}.fd-input-group .fd-input-group__input:nth-last-child(1){padding-right:.625rem}[dir=rtl] .fd-input-group .fd-input-group__input:nth-last-child(1),.fd-input-group .fd-input-group__input:nth-last-child(1)[dir=rtl]{padding-right:0;padding-left:.625rem}.fd-input-group--inline{display:inline-flex;vertical-align:bottom;width:auto}.fd-input-group__addon{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sapContent_NonInteractiveIconColor);background:none!important;font-size:var(--sapFontLargeSize);min-width:2.25rem;min-height:2.25rem;padding-left:.625rem;padding-right:.625rem}.fd-input-group__addon:before,.fd-input-group__addon:after{box-sizing:inherit;font-size:inherit}.fd-input-group__addon span[class*=sap-icon--]:before{font-size:var(--sapFontLargeSize)}.fd-input-group__addon--compact{min-width:2rem;min-height:1.625rem}.fd-input-group__addon--readonly{opacity:.4}.fd-input-group__addon--button{padding:0;overflow:visible}.fd-input-group--control[aria-expanded=true]{margin-bottom:0}.fd-input-group .fd-textarea{resize:vertical}.fd-input-group *[aria-disabled=true],.fd-input-group *.is-disabled,.fd-input-group *:disabled{opacity:1}.fd-input-group[readonly],.fd-input-group.is-readonly{overflow:visible}.fd-input-group .fd-tokenizer,.fd-input-group .fd-tokenizer:hover,.fd-input-group .fd-tokenizer.is-hover{box-shadow:none;background:none;background-color:transparent}.fd-input-group .fd-tokenizer:focus,.fd-input-group .fd-tokenizer.is-focus{z-index:5;box-shadow:none;background:none;background-color:transparent;outline:none}fd-input-group .fd-input-group__addon--button.fd-input-group__addon--textarea>*{max-height:100%;height:100%}fd-input-group .fd-button.fd-button--transparent{background:transparent}\n"], components: [{ type: i1$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: InputGroupAddOnDirective, selector: "[fd-input-group-addon]", inputs: ["class", "placement", "type", "state", "button"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: InputGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-input-group', providers: [
@@ -365,7 +366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                             multi: true
                         },
                         registerFormItemControl(InputGroupComponent)
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"fd-input-group\"\n    [class.fd-input-group--inline]=\"inline\"\n    [class.is-disabled]=\"disabled\"\n    [class.is-readonly]=\"readonly\"\n    [class.fd-shellbar__input-group]=\"inShellbar\"\n    [class.fd-input-group--control]=\"isControl\"\n    [class.is-focus]=\"_inputFocused$ | async\"\n    [class]=\"state ? 'is-' + state : ' '\"\n>\n    <ng-container *ngIf=\"placement === 'after' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"!addOnElement && (glyph || addOnText)\">\n        <span\n            *ngIf=\"button\"\n            fd-input-group-addon\n            [button]=\"true\"\n            [placement]=\"placement\"\n            [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n        >\n            <button\n                fd-button\n                class=\"fd-input-group__button\"\n                type=\"button\"\n                [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                [id]=\"_addOnButtonId\"\n                [attr.tabindex]=\"buttonFocusable ? 0 : -1\"\n                [attr.title]=\"iconTitle || glyphAriaLabel || glyph\"\n                [glyph]=\"glyph\"\n                [class.fd-shellbar__button]=\"inShellbar\"\n                [class.is-expanded]=\"isExpanded\"\n                [attr.aria-expanded]=\"inShellbar ? isExpanded : null\"\n                [ariaLabel]=\"glyphAriaLabel || glyph || addOnText\"\n                [attr.aria-controls]=\"_inputId\"\n                [disabled]=\"disabled\"\n                (mousedown)=\"_preventFocus($event)\"\n                (click)=\"_buttonClicked($event)\"\n            >\n                <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n            </button>\n        </span>\n\n        <span\n            *ngIf=\"!button\"\n            fd-input-group-addon\n            [id]=\"_addOnNonButtonId\"\n            [placement]=\"placement\"\n            [attr.aria-label]=\"glyphAriaLabel || glyph || addOnText\"\n            [attr.title]=\"iconTitle || glyph || addOnText\"\n        >\n            <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n\n            <span *ngIf=\"glyph\" [className]=\"'sap-icon--' + glyph\"></span>\n        </span>\n    </ng-container>\n\n    <ng-container *ngIf=\"placement === 'before' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #input>\n    <ng-container *ngIf=\"inputTemplate\">\n        <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n    </ng-container>\n\n    <input\n        *ngIf=\"!inputTemplate\"\n        [(ngModel)]=\"inputText\"\n        [id]=\"_inputId\"\n        [attr.aria-labelledby]=\"_inputAriaLabelledBy\"\n        [class.fd-shellbar__input-group-input]=\"inShellbar\"\n        fd-input-group-input\n        [type]=\"type\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        (search)=\"_onSearchEvent($event)\"\n    />\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.1-rc.1\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-input{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;z-index:1;width:100%;min-width:2.75rem;border-radius:var(--sapField_BorderCornerRadius);padding:0 .625rem;margin:.25rem 0;height:2.25rem;box-shadow:none;color:var(--sapField_TextColor);text-shadow:var(--fdInput_Text_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);cursor:text;outline:none;overflow:hidden;appearance:none;-moz-appearance:none;-webkit-appearance:none}.fd-input:before,.fd-input:after{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{font-style:var(--fdPlaceholder_Font_Style);color:var(--sapField_PlaceholderTextColor)}.fd-input::selection{color:var(--sapContent_ContrastTextColor);background-color:var(--sapSelectedColor)}.fd-input::-ms-clear{display:none}.fd-input:hover,.fd-input.is-hover{background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input:focus,.fd-input.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-width:var(--sapContent_FocusWidth);outline-style:var(--sapContent_FocusStyle);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);box-shadow:none}.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-cancel-button,.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[aria-expanded=true],.fd-input.is-expanded{z-index:4}.fd-input:last-child{margin-bottom:.25rem}.fd-input--compact{min-width:2rem;height:1.625rem;margin:.1875rem 0;padding:0 .5rem;box-sizing:border-box}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-outer-spin-button,.fd-input--no-number-spinner::-webkit-inner-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:hover,.fd-input.is-success.is-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:focus,.fd-input.is-success.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-input.is-success:focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success.is-focus.is-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:hover,.fd-input.is-error.is-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:focus,.fd-input.is-error.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-input.is-error:focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error.is-focus.is-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:hover,.fd-input.is-warning.is-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:focus,.fd-input.is-warning.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input.is-warning:focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning.is-focus.is-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:hover,.fd-input.is-alert.is-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:focus,.fd-input.is-alert.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input.is-alert:focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert.is-focus.is-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:hover,.fd-input.is-information.is-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:focus,.fd-input.is-information.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-input.is-information:focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information.is-focus.is-hover{box-shadow:none}.fd-input.is-error,.fd-input.is-warning,.fd-input.is-alert{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder,.fd-input.is-alert::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-error:focus,.fd-input.is-error.is-focus,.fd-input.is-warning:focus,.fd-input.is-warning.is-focus,.fd-input.is-alert:focus,.fd-input.is-alert.is-focus,.fd-input.is-information:focus,.fd-input.is-information.is-focus{z-index:5;outline-offset:var(--fdInput_Outline_Offset_States)}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input[aria-disabled=true],.fd-input.is-disabled,.fd-input:disabled{pointer-events:none;opacity:var(--sapContent_DisabledOpacity)}.fd-input[aria-disabled=true]::placeholder,.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input[aria-readonly=true],.fd-input.is-readonly,.fd-input[readonly]{border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);pointer-events:none}.fd-input[aria-readonly=true]::placeholder,.fd-input.is-readonly::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input[aria-readonly=true]:hover,.fd-input[aria-readonly=true].is-hover,.fd-input.is-readonly:hover,.fd-input.is-readonly.is-hover,.fd-input[readonly]:hover,.fd-input[readonly].is-hover{box-shadow:none}.fd-input[aria-readonly=true]:focus,.fd-input[aria-readonly=true].is-focus,.fd-input.is-readonly:focus,.fd-input.is-readonly.is-focus,.fd-input[readonly]:focus,.fd-input[readonly].is-focus{z-index:5;background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}/*!\n * Fundamental Library Styles v0.24.1-rc.1\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-input-group+(--inline, --control)\n    .fd-input-group__addon+(--button)\n*/.fd-input-group{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;z-index:1;min-width:2.75rem;border-radius:var(--sapField_BorderCornerRadius);padding:0 .625rem;margin:.25rem 0;height:2.25rem;box-shadow:none;color:var(--sapField_TextColor);text-shadow:var(--fdInput_Text_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);cursor:text;outline:none;appearance:none;-moz-appearance:none;-webkit-appearance:none;padding:0;width:100%;height:auto;display:flex;overflow:hidden}.fd-input-group:before,.fd-input-group:after{box-sizing:inherit;font-size:inherit}.fd-input-group::placeholder{font-style:var(--fdPlaceholder_Font_Style);color:var(--sapField_PlaceholderTextColor)}.fd-input-group::selection{color:var(--sapContent_ContrastTextColor);background-color:var(--sapSelectedColor)}.fd-input-group::-ms-clear{display:none}.fd-input-group:hover,.fd-input-group.is-hover{background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input-group:focus,.fd-input-group.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-width:var(--sapContent_FocusWidth);outline-style:var(--sapContent_FocusStyle);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);box-shadow:none}.fd-input-group.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input-group.is-success:hover,.fd-input-group.is-success.is-hover{background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input-group.is-success:focus,.fd-input-group.is-success.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-input-group.is-success:focus:hover,.fd-input-group.is-success:focus.is-hover,.fd-input-group.is-success.is-focus:hover,.fd-input-group.is-success.is-focus.is-hover{box-shadow:none}.fd-input-group.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input-group.is-error:hover,.fd-input-group.is-error.is-hover{background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input-group.is-error:focus,.fd-input-group.is-error.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-input-group.is-error:focus:hover,.fd-input-group.is-error:focus.is-hover,.fd-input-group.is-error.is-focus:hover,.fd-input-group.is-error.is-focus.is-hover{box-shadow:none}.fd-input-group.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input-group.is-warning:hover,.fd-input-group.is-warning.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input-group.is-warning:focus,.fd-input-group.is-warning.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input-group.is-warning:focus:hover,.fd-input-group.is-warning:focus.is-hover,.fd-input-group.is-warning.is-focus:hover,.fd-input-group.is-warning.is-focus.is-hover{box-shadow:none}.fd-input-group.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input-group.is-alert:hover,.fd-input-group.is-alert.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input-group.is-alert:focus,.fd-input-group.is-alert.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input-group.is-alert:focus:hover,.fd-input-group.is-alert:focus.is-hover,.fd-input-group.is-alert.is-focus:hover,.fd-input-group.is-alert.is-focus.is-hover{box-shadow:none}.fd-input-group.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input-group.is-information:hover,.fd-input-group.is-information.is-hover{background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input-group.is-information:focus,.fd-input-group.is-information.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-input-group.is-information:focus:hover,.fd-input-group.is-information:focus.is-hover,.fd-input-group.is-information.is-focus:hover,.fd-input-group.is-information.is-focus.is-hover{box-shadow:none}.fd-input-group.is-error,.fd-input-group.is-warning,.fd-input-group.is-alert{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input-group.is-error::placeholder,.fd-input-group.is-warning::placeholder,.fd-input-group.is-alert::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input-group.is-error:focus,.fd-input-group.is-error.is-focus,.fd-input-group.is-warning:focus,.fd-input-group.is-warning.is-focus,.fd-input-group.is-alert:focus,.fd-input-group.is-alert.is-focus,.fd-input-group.is-information:focus,.fd-input-group.is-information.is-focus{z-index:5;outline-offset:var(--fdInput_Outline_Offset_States)}.fd-input-group.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input-group[aria-disabled=true],.fd-input-group.is-disabled,.fd-input-group:disabled{pointer-events:none;opacity:var(--sapContent_DisabledOpacity)}.fd-input-group[aria-disabled=true]::placeholder,.fd-input-group.is-disabled::placeholder,.fd-input-group:disabled::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input-group[aria-readonly=true],.fd-input-group.is-readonly,.fd-input-group[readonly]{border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);pointer-events:none}.fd-input-group[aria-readonly=true]::placeholder,.fd-input-group.is-readonly::placeholder,.fd-input-group[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input-group[aria-readonly=true]:hover,.fd-input-group[aria-readonly=true].is-hover,.fd-input-group.is-readonly:hover,.fd-input-group.is-readonly.is-hover,.fd-input-group[readonly]:hover,.fd-input-group[readonly].is-hover{box-shadow:none}.fd-input-group[aria-readonly=true]:focus,.fd-input-group[aria-readonly=true].is-focus,.fd-input-group.is-readonly:focus,.fd-input-group.is-readonly.is-focus,.fd-input-group[readonly]:focus,.fd-input-group[readonly].is-focus{z-index:5;background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}.fd-input-group .fd-input-group__button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none;z-index:auto!important;position:static!important;border-radius:var(--fdInput_Group_Button_Border_Raduis);background:var(--fdInput_Group_Button_Background);color:var(--fdInput_Group_Button_Text_Color);border-left:var(--sapButton_BorderWidth) solid transparent}[dir=rtl] .fd-input-group .fd-input-group__button,.fd-input-group .fd-input-group__button[dir=rtl]{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-input-group .fd-input-group__button:before{display:none!important}.fd-input-group .fd-input-group__button:hover,.fd-input-group .fd-input-group__button.is-hover{border-left:var(--fdInputGroup_ControlButton_SideBorder);background:var(--fdInput_Group_Button_Hover_Background);color:var(--fdInput_Group_Button_Hover_Text_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}[dir=rtl] .fd-input-group .fd-input-group__button:hover,.fd-input-group .fd-input-group__button:hover[dir=rtl],[dir=rtl] .fd-input-group .fd-input-group__button.is-hover,.fd-input-group .fd-input-group__button.is-hover[dir=rtl]{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-input-group .fd-input-group__button:active,.fd-input-group .fd-input-group__button.is-active{border-left:var(--fdInputGroup_ControlButton_SideBorder);background:var(--fdInput_Group_Button_Active_Background);color:var(--fdInput_Group_Button_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}[dir=rtl] .fd-input-group .fd-input-group__button:active,.fd-input-group .fd-input-group__button:active[dir=rtl],[dir=rtl] .fd-input-group .fd-input-group__button.is-active,.fd-input-group .fd-input-group__button.is-active[dir=rtl]{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-input-group.is-success .fd-input-group__button:hover,.fd-input-group.is-success .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-input-group.is-success .fd-input-group__button:active,.fd-input-group.is-success .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Success_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-input-group.is-error .fd-input-group__button:hover,.fd-input-group.is-error .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-input-group.is-error .fd-input-group__button:active,.fd-input-group.is-error .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Error_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-input-group.is-warning .fd-input-group__button:hover,.fd-input-group.is-warning .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-warning .fd-input-group__button:active,.fd-input-group.is-warning .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-alert .fd-input-group__button:hover,.fd-input-group.is-alert .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-alert .fd-input-group__button:active,.fd-input-group.is-alert .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-information .fd-input-group__button:hover,.fd-input-group.is-information .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-input-group.is-information .fd-input-group__button:active,.fd-input-group.is-information .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Information_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-input-group .fd-input-group__input{border:none;flex:1 1 10rem;background:none;background-color:transparent;padding-left:.25rem;padding-right:.25rem;text-shadow:var(--fdInputGroup_Text_Shadow)}.fd-input-group .fd-input-group__input:nth-child(n+1){margin:0}.fd-input-group .fd-input-group__input:hover,.fd-input-group .fd-input-group__input.is-hover{box-shadow:none}.fd-input-group .fd-input-group__input:focus,.fd-input-group .fd-input-group__input.is-focus{z-index:5;outline:none;box-shadow:none;background:none;border-radius:0}.fd-input-group .fd-input-group__input:nth-child(1){padding-left:.625rem}[dir=rtl] .fd-input-group .fd-input-group__input:nth-child(1),.fd-input-group .fd-input-group__input:nth-child(1)[dir=rtl]{padding-right:.625rem;padding-left:0}.fd-input-group .fd-input-group__input:nth-last-child(1){padding-right:.625rem}[dir=rtl] .fd-input-group .fd-input-group__input:nth-last-child(1),.fd-input-group .fd-input-group__input:nth-last-child(1)[dir=rtl]{padding-right:0;padding-left:.625rem}.fd-input-group--inline{display:inline-flex;vertical-align:bottom;width:auto}.fd-input-group__addon{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sapContent_NonInteractiveIconColor);background:none!important;font-size:var(--sapFontLargeSize);min-width:2.25rem;min-height:2.25rem;padding-left:.625rem;padding-right:.625rem}.fd-input-group__addon:before,.fd-input-group__addon:after{box-sizing:inherit;font-size:inherit}.fd-input-group__addon span[class*=sap-icon--]:before{font-size:var(--sapFontLargeSize)}.fd-input-group__addon--compact{min-width:2rem;min-height:1.625rem}.fd-input-group__addon--readonly{opacity:.4}.fd-input-group__addon--button{padding:0;overflow:visible}.fd-input-group--control[aria-expanded=true]{margin-bottom:0}.fd-input-group .fd-textarea{resize:vertical}.fd-input-group *[aria-disabled=true],.fd-input-group *.is-disabled,.fd-input-group *:disabled{opacity:1}.fd-input-group[readonly],.fd-input-group.is-readonly{overflow:visible}.fd-input-group .fd-tokenizer,.fd-input-group .fd-tokenizer:hover,.fd-input-group .fd-tokenizer.is-hover{box-shadow:none;background:none;background-color:transparent}.fd-input-group .fd-tokenizer:focus,.fd-input-group .fd-tokenizer.is-focus{z-index:5;box-shadow:none;background:none;background-color:transparent;outline:none}fd-input-group .fd-input-group__addon--button.fd-input-group__addon--textarea>*{max-height:100%;height:100%}fd-input-group .fd-button.fd-button--transparent{background:transparent}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"fd-input-group\"\n    [class.fd-input-group--inline]=\"inline\"\n    [class.is-disabled]=\"disabled\"\n    [class.is-readonly]=\"readonly\"\n    [class.fd-shellbar__input-group]=\"inShellbar\"\n    [class.fd-input-group--control]=\"isControl\"\n    [class.is-focus]=\"_inputFocused$ | async\"\n    [class]=\"state ? 'is-' + state : ' '\"\n>\n    <ng-container *ngIf=\"placement === 'after' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"!addOnElement && (glyph || addOnText)\">\n        <span\n            *ngIf=\"button\"\n            fd-input-group-addon\n            [button]=\"true\"\n            [placement]=\"placement\"\n            [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n        >\n            <button\n                fd-button\n                class=\"fd-input-group__button\"\n                type=\"button\"\n                [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                [id]=\"_addOnButtonId\"\n                [attr.tabindex]=\"buttonFocusable ? 0 : -1\"\n                [attr.title]=\"iconTitle || glyphAriaLabel || glyph\"\n                [glyph]=\"glyph\"\n                [class.fd-shellbar__button]=\"inShellbar\"\n                [class.is-expanded]=\"isExpanded\"\n                [attr.aria-haspopup]=\"isControl\"\n                [attr.aria-expanded]=\"inShellbar ? isExpanded : null\"\n                [ariaLabel]=\"glyphAriaLabel || glyph || addOnText\"\n                [attr.aria-controls]=\"_inputId\"\n                [disabled]=\"disabled\"\n                (mousedown)=\"_preventFocus($event)\"\n                (click)=\"_buttonClicked($event)\"\n            >\n                <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n            </button>\n        </span>\n\n        <span\n            *ngIf=\"!button\"\n            fd-input-group-addon\n            [id]=\"_addOnNonButtonId\"\n            [placement]=\"placement\"\n            [attr.aria-label]=\"glyphAriaLabel || glyph || addOnText\"\n            [attr.title]=\"iconTitle || glyph || addOnText\"\n        >\n            <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n\n            <span *ngIf=\"glyph\" [className]=\"'sap-icon--' + glyph\"></span>\n        </span>\n    </ng-container>\n\n    <ng-container *ngIf=\"placement === 'before' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #input>\n    <ng-container *ngIf=\"inputTemplate\">\n        <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n    </ng-container>\n\n    <input\n        *ngIf=\"!inputTemplate\"\n        [(ngModel)]=\"inputText\"\n        [id]=\"_inputId\"\n        [attr.aria-labelledby]=\"_inputAriaLabelledBy\"\n        [class.fd-shellbar__input-group-input]=\"inShellbar\"\n        fd-input-group-input\n        [type]=\"type\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        (search)=\"_onSearchEvent($event)\"\n    />\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.1-rc.1\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-input{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;z-index:1;width:100%;min-width:2.75rem;border-radius:var(--sapField_BorderCornerRadius);padding:0 .625rem;margin:.25rem 0;height:2.25rem;box-shadow:none;color:var(--sapField_TextColor);text-shadow:var(--fdInput_Text_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);cursor:text;outline:none;overflow:hidden;appearance:none;-moz-appearance:none;-webkit-appearance:none}.fd-input:before,.fd-input:after{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{font-style:var(--fdPlaceholder_Font_Style);color:var(--sapField_PlaceholderTextColor)}.fd-input::selection{color:var(--sapContent_ContrastTextColor);background-color:var(--sapSelectedColor)}.fd-input::-ms-clear{display:none}.fd-input:hover,.fd-input.is-hover{background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input:focus,.fd-input.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-width:var(--sapContent_FocusWidth);outline-style:var(--sapContent_FocusStyle);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);box-shadow:none}.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-cancel-button,.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[aria-expanded=true],.fd-input.is-expanded{z-index:4}.fd-input:last-child{margin-bottom:.25rem}.fd-input--compact{min-width:2rem;height:1.625rem;margin:.1875rem 0;padding:0 .5rem;box-sizing:border-box}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-outer-spin-button,.fd-input--no-number-spinner::-webkit-inner-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:hover,.fd-input.is-success.is-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:focus,.fd-input.is-success.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-input.is-success:focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success.is-focus.is-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:hover,.fd-input.is-error.is-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:focus,.fd-input.is-error.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-input.is-error:focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error.is-focus.is-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:hover,.fd-input.is-warning.is-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:focus,.fd-input.is-warning.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input.is-warning:focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning.is-focus.is-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:hover,.fd-input.is-alert.is-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:focus,.fd-input.is-alert.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input.is-alert:focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert.is-focus.is-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:hover,.fd-input.is-information.is-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:focus,.fd-input.is-information.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-input.is-information:focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information.is-focus.is-hover{box-shadow:none}.fd-input.is-error,.fd-input.is-warning,.fd-input.is-alert{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder,.fd-input.is-alert::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-error:focus,.fd-input.is-error.is-focus,.fd-input.is-warning:focus,.fd-input.is-warning.is-focus,.fd-input.is-alert:focus,.fd-input.is-alert.is-focus,.fd-input.is-information:focus,.fd-input.is-information.is-focus{z-index:5;outline-offset:var(--fdInput_Outline_Offset_States)}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input[aria-disabled=true],.fd-input.is-disabled,.fd-input:disabled{pointer-events:none;opacity:var(--sapContent_DisabledOpacity)}.fd-input[aria-disabled=true]::placeholder,.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input[aria-readonly=true],.fd-input.is-readonly,.fd-input[readonly]{border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);pointer-events:none}.fd-input[aria-readonly=true]::placeholder,.fd-input.is-readonly::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input[aria-readonly=true]:hover,.fd-input[aria-readonly=true].is-hover,.fd-input.is-readonly:hover,.fd-input.is-readonly.is-hover,.fd-input[readonly]:hover,.fd-input[readonly].is-hover{box-shadow:none}.fd-input[aria-readonly=true]:focus,.fd-input[aria-readonly=true].is-focus,.fd-input.is-readonly:focus,.fd-input.is-readonly.is-focus,.fd-input[readonly]:focus,.fd-input[readonly].is-focus{z-index:5;background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}/*!\n * Fundamental Library Styles v0.24.1-rc.1\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-input-group+(--inline, --control)\n    .fd-input-group__addon+(--button)\n*/.fd-input-group{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;margin:0;border:0;white-space:nowrap;text-overflow:ellipsis;z-index:1;min-width:2.75rem;border-radius:var(--sapField_BorderCornerRadius);padding:0 .625rem;margin:.25rem 0;height:2.25rem;box-shadow:none;color:var(--sapField_TextColor);text-shadow:var(--fdInput_Text_Shadow);background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);cursor:text;outline:none;appearance:none;-moz-appearance:none;-webkit-appearance:none;padding:0;width:100%;height:auto;display:flex;overflow:hidden}.fd-input-group:before,.fd-input-group:after{box-sizing:inherit;font-size:inherit}.fd-input-group::placeholder{font-style:var(--fdPlaceholder_Font_Style);color:var(--sapField_PlaceholderTextColor)}.fd-input-group::selection{color:var(--sapContent_ContrastTextColor);background-color:var(--sapSelectedColor)}.fd-input-group::-ms-clear{display:none}.fd-input-group:hover,.fd-input-group.is-hover{background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input-group:focus,.fd-input-group.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-width:var(--sapContent_FocusWidth);outline-style:var(--sapContent_FocusStyle);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);box-shadow:none}.fd-input-group.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input-group.is-success:hover,.fd-input-group.is-success.is-hover{background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input-group.is-success:focus,.fd-input-group.is-success.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-input-group.is-success:focus:hover,.fd-input-group.is-success:focus.is-hover,.fd-input-group.is-success.is-focus:hover,.fd-input-group.is-success.is-focus.is-hover{box-shadow:none}.fd-input-group.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input-group.is-error:hover,.fd-input-group.is-error.is-hover{background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input-group.is-error:focus,.fd-input-group.is-error.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-input-group.is-error:focus:hover,.fd-input-group.is-error:focus.is-hover,.fd-input-group.is-error.is-focus:hover,.fd-input-group.is-error.is-focus.is-hover{box-shadow:none}.fd-input-group.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input-group.is-warning:hover,.fd-input-group.is-warning.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input-group.is-warning:focus,.fd-input-group.is-warning.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input-group.is-warning:focus:hover,.fd-input-group.is-warning:focus.is-hover,.fd-input-group.is-warning.is-focus:hover,.fd-input-group.is-warning.is-focus.is-hover{box-shadow:none}.fd-input-group.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input-group.is-alert:hover,.fd-input-group.is-alert.is-hover{background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input-group.is-alert:focus,.fd-input-group.is-alert.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-input-group.is-alert:focus:hover,.fd-input-group.is-alert:focus.is-hover,.fd-input-group.is-alert.is-focus:hover,.fd-input-group.is-alert.is-focus.is-hover{box-shadow:none}.fd-input-group.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input-group.is-information:hover,.fd-input-group.is-information.is-hover{background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input-group.is-information:focus,.fd-input-group.is-information.is-focus{z-index:5;background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-input-group.is-information:focus:hover,.fd-input-group.is-information:focus.is-hover,.fd-input-group.is-information.is-focus:hover,.fd-input-group.is-information.is-focus.is-hover{box-shadow:none}.fd-input-group.is-error,.fd-input-group.is-warning,.fd-input-group.is-alert{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input-group.is-error::placeholder,.fd-input-group.is-warning::placeholder,.fd-input-group.is-alert::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input-group.is-error:focus,.fd-input-group.is-error.is-focus,.fd-input-group.is-warning:focus,.fd-input-group.is-warning.is-focus,.fd-input-group.is-alert:focus,.fd-input-group.is-alert.is-focus,.fd-input-group.is-information:focus,.fd-input-group.is-information.is-focus{z-index:5;outline-offset:var(--fdInput_Outline_Offset_States)}.fd-input-group.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input-group[aria-disabled=true],.fd-input-group.is-disabled,.fd-input-group:disabled{pointer-events:none;opacity:var(--sapContent_DisabledOpacity)}.fd-input-group[aria-disabled=true]::placeholder,.fd-input-group.is-disabled::placeholder,.fd-input-group:disabled::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input-group[aria-readonly=true],.fd-input-group.is-readonly,.fd-input-group[readonly]{border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);pointer-events:none}.fd-input-group[aria-readonly=true]::placeholder,.fd-input-group.is-readonly::placeholder,.fd-input-group[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input-group[aria-readonly=true]:hover,.fd-input-group[aria-readonly=true].is-hover,.fd-input-group.is-readonly:hover,.fd-input-group.is-readonly.is-hover,.fd-input-group[readonly]:hover,.fd-input-group[readonly].is-hover{box-shadow:none}.fd-input-group[aria-readonly=true]:focus,.fd-input-group[aria-readonly=true].is-focus,.fd-input-group.is-readonly:focus,.fd-input-group.is-readonly.is-focus,.fd-input-group[readonly]:focus,.fd-input-group[readonly].is-focus{z-index:5;background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}.fd-input-group .fd-input-group__button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none;z-index:auto!important;position:static!important;border-radius:var(--fdInput_Group_Button_Border_Raduis);background:var(--fdInput_Group_Button_Background);color:var(--fdInput_Group_Button_Text_Color);border-left:var(--sapButton_BorderWidth) solid transparent}[dir=rtl] .fd-input-group .fd-input-group__button,.fd-input-group .fd-input-group__button[dir=rtl]{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-input-group .fd-input-group__button:before{display:none!important}.fd-input-group .fd-input-group__button:hover,.fd-input-group .fd-input-group__button.is-hover{border-left:var(--fdInputGroup_ControlButton_SideBorder);background:var(--fdInput_Group_Button_Hover_Background);color:var(--fdInput_Group_Button_Hover_Text_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}[dir=rtl] .fd-input-group .fd-input-group__button:hover,.fd-input-group .fd-input-group__button:hover[dir=rtl],[dir=rtl] .fd-input-group .fd-input-group__button.is-hover,.fd-input-group .fd-input-group__button.is-hover[dir=rtl]{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-input-group .fd-input-group__button:active,.fd-input-group .fd-input-group__button.is-active{border-left:var(--fdInputGroup_ControlButton_SideBorder);background:var(--fdInput_Group_Button_Active_Background);color:var(--fdInput_Group_Button_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Box_Shadow)}[dir=rtl] .fd-input-group .fd-input-group__button:active,.fd-input-group .fd-input-group__button:active[dir=rtl],[dir=rtl] .fd-input-group .fd-input-group__button.is-active,.fd-input-group .fd-input-group__button.is-active[dir=rtl]{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-input-group.is-success .fd-input-group__button:hover,.fd-input-group.is-success .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-input-group.is-success .fd-input-group__button:active,.fd-input-group.is-success .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Success_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-input-group.is-error .fd-input-group__button:hover,.fd-input-group.is-error .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-input-group.is-error .fd-input-group__button:active,.fd-input-group.is-error .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Error_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-input-group.is-warning .fd-input-group__button:hover,.fd-input-group.is-warning .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-warning .fd-input-group__button:active,.fd-input-group.is-warning .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-alert .fd-input-group__button:hover,.fd-input-group.is-alert .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-alert .fd-input-group__button:active,.fd-input-group.is-alert .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-input-group.is-information .fd-input-group__button:hover,.fd-input-group.is-information .fd-input-group__button.is-hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-input-group.is-information .fd-input-group__button:active,.fd-input-group.is-information .fd-input-group__button.is-active{color:var(--fdInput_Group_Button_Information_Active_Text_Color);box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-input-group .fd-input-group__input{border:none;flex:1 1 10rem;background:none;background-color:transparent;padding-left:.25rem;padding-right:.25rem;text-shadow:var(--fdInputGroup_Text_Shadow)}.fd-input-group .fd-input-group__input:nth-child(n+1){margin:0}.fd-input-group .fd-input-group__input:hover,.fd-input-group .fd-input-group__input.is-hover{box-shadow:none}.fd-input-group .fd-input-group__input:focus,.fd-input-group .fd-input-group__input.is-focus{z-index:5;outline:none;box-shadow:none;background:none;border-radius:0}.fd-input-group .fd-input-group__input:nth-child(1){padding-left:.625rem}[dir=rtl] .fd-input-group .fd-input-group__input:nth-child(1),.fd-input-group .fd-input-group__input:nth-child(1)[dir=rtl]{padding-right:.625rem;padding-left:0}.fd-input-group .fd-input-group__input:nth-last-child(1){padding-right:.625rem}[dir=rtl] .fd-input-group .fd-input-group__input:nth-last-child(1),.fd-input-group .fd-input-group__input:nth-last-child(1)[dir=rtl]{padding-right:0;padding-left:.625rem}.fd-input-group--inline{display:inline-flex;vertical-align:bottom;width:auto}.fd-input-group__addon{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sapContent_NonInteractiveIconColor);background:none!important;font-size:var(--sapFontLargeSize);min-width:2.25rem;min-height:2.25rem;padding-left:.625rem;padding-right:.625rem}.fd-input-group__addon:before,.fd-input-group__addon:after{box-sizing:inherit;font-size:inherit}.fd-input-group__addon span[class*=sap-icon--]:before{font-size:var(--sapFontLargeSize)}.fd-input-group__addon--compact{min-width:2rem;min-height:1.625rem}.fd-input-group__addon--readonly{opacity:.4}.fd-input-group__addon--button{padding:0;overflow:visible}.fd-input-group--control[aria-expanded=true]{margin-bottom:0}.fd-input-group .fd-textarea{resize:vertical}.fd-input-group *[aria-disabled=true],.fd-input-group *.is-disabled,.fd-input-group *:disabled{opacity:1}.fd-input-group[readonly],.fd-input-group.is-readonly{overflow:visible}.fd-input-group .fd-tokenizer,.fd-input-group .fd-tokenizer:hover,.fd-input-group .fd-tokenizer.is-hover{box-shadow:none;background:none;background-color:transparent}.fd-input-group .fd-tokenizer:focus,.fd-input-group .fd-tokenizer.is-focus{z-index:5;box-shadow:none;background:none;background-color:transparent;outline:none}fd-input-group .fd-input-group__addon--button.fd-input-group__addon--textarea>*{max-height:100%;height:100%}fd-input-group .fd-button.fd-button--transparent{background:transparent}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { inputTemplate: [{
                 type: Input
             }], placement: [{

package/fesm2015/fundamental-ngx-core-input-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-input-group.mjs","sources":["../../../../libs/core/src/lib/input-group/input-group-directives.ts","../../../../libs/core/src/lib/input-group/input-group.component.ts","../../../../libs/core/src/lib/input-group/input-group.component.html","../../../../libs/core/src/lib/input-group/deprecated-input-group-compact.directive.ts","../../../../libs/core/src/lib/input-group/input-group.module.ts","../../../../libs/core/src/lib/input-group/fundamental-ngx-core-input-group.ts"],"sourcesContent":["import {\n    AfterContentInit,\n    Directive,\n    ElementRef,\n    HostBinding,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Renderer2\n} from '@angular/core';\nimport { InputGroupPlacement } from './types';\nimport { FormStates } from '@fundamental-ngx/core/shared';\nimport { Subscription } from 'rxjs';\nimport { applyCssClass, CssClassBuilder } from '@fundamental-ngx/core/utils';\nimport {\n    ContentDensityObserver,\n    contentDensityObserverProviders,\n    ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: '[fd-input-group-input]',\n    providers: [\n        contentDensityObserverProviders({\n            modifiers: { [ContentDensityMode.COMPACT]: 'fd-input--compact' }\n        })\n    ]\n})\nexport class InputGroupInputDirective implements CssClassBuilder, OnInit, OnChanges, OnDestroy {\n    /** user's custom classes */\n    @Input()\n    class: string;\n\n    /** @hidden */\n    private _subscriptions = new Subscription();\n\n    /** @hidden */\n    constructor(private _elementRef: ElementRef, private _contentDensityObserver: ContentDensityObserver) {\n        _contentDensityObserver.subscribe();\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngOnChanges(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._subscriptions.unsubscribe();\n    }\n\n    @applyCssClass\n    /** CssClassBuilder interface implementation\n     * function must return single string\n     * function is responsible for order which css classes are applied\n     */\n    buildComponentCssClass(): string[] {\n        return ['fd-input', 'fd-input-group__input'];\n    }\n\n    elementRef(): ElementRef<any> {\n        return this._elementRef;\n    }\n}\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: '[fd-textarea-group-input]'\n})\nexport class InputGroupTextareaDirective {}\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: '[fd-input-group-addon]',\n    providers: [\n        contentDensityObserverProviders({\n            modifiers: { [ContentDensityMode.COMPACT]: 'fd-input-group__addon--compact' }\n        })\n    ]\n})\nexport class InputGroupAddOnDirective implements OnInit, OnChanges, CssClassBuilder, AfterContentInit, OnDestroy {\n    /** user's custom classes */\n    @Input()\n    class: string;\n\n    /** @hidden */\n    @HostBinding('class.fd-input-group__addon')\n    fdInputGroupAddonClass = true;\n\n    /**\n     * The placement of the add-on. Options include *before* and *after*\n     */\n    @Input()\n    placement: InputGroupPlacement = 'after';\n\n    /**\n     * The placement of the add-on. Options include *before* and *after*\n     */\n    @Input()\n    type: string;\n\n    /**\n     *  The state of the form control - applies css classes.\n     *  Can be `success`, `error`, `warning`, `information` or blank for default.\n     */\n    @Input()\n    state?: FormStates;\n\n    /**\n     * Whether the icon add-on or the text add-on is a button.\n     */\n    @Input()\n    button = false;\n\n    /** @hidden */\n    private _subscriptions = new Subscription();\n\n    /** @hidden */\n    constructor(\n        private _elementRef: ElementRef,\n        private renderer: Renderer2,\n        private _contentDensityObserver: ContentDensityObserver\n    ) {\n        _contentDensityObserver.subscribe();\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngOnChanges(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngAfterContentInit(): void {\n        /** Add fd-input-group__button to button child element */\n        const button = this.elementRef().nativeElement.querySelector('button');\n        if (button) {\n            this.renderer.addClass(button, 'fd-input-group__button');\n        }\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._subscriptions.unsubscribe();\n    }\n\n    @applyCssClass\n    /** CssClassBuilder interface implementation\n     * function must return single string\n     * function is responsible for order which css classes are applied\n     */\n    buildComponentCssClass(): string[] {\n        return [\n            'fd-input-group__addon',\n            this.button ? 'fd-input-group__addon--button' : '',\n            this.type ? 'fd-input-group__addon--' + this.type : '',\n            this.state ? 'is-' + this.state : ''\n        ];\n    }\n\n    elementRef(): ElementRef<any> {\n        return this._elementRef;\n    }\n}\n","import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChild,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    Input,\n    isDevMode,\n    OnDestroy,\n    Output,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { filter, fromEvent, map, merge, Observable, Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { FormStates, Nullable } from '@fundamental-ngx/core/shared';\nimport { FormItemControl, registerFormItemControl } from '@fundamental-ngx/core/form';\n\nimport { InputGroupAddOnDirective, InputGroupInputDirective } from './input-group-directives';\nimport { InputGroupPlacement } from './types';\n\nlet addOnNonButtonRandomId = 0;\nlet addOnButtonRandomId = 0;\nlet addOnInputRandomId = 0;\n\n/**\n * The component that represents an input group.\n * The input group includes form inputs with add-ons that allow the user to better understand the information being entered.\n *\n * ```html\n * <fd-input-group placement=\"after\" addOnText=\"$\" placeholder=\"Amount\">\n * </fd-input-group>\n * ```\n */\n@Component({\n    selector: 'fd-input-group',\n    templateUrl: './input-group.component.html',\n    styleUrls: ['./input-group.component.scss'],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => InputGroupComponent),\n            multi: true\n        },\n        registerFormItemControl(InputGroupComponent)\n    ],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class InputGroupComponent implements ControlValueAccessor, AfterViewInit, OnDestroy, FormItemControl {\n    /** @deprecated Input template, use fd-input-group-input directive instead. */\n    @Input()\n    set inputTemplate(value: TemplateRef<any>) {\n        if (isDevMode()) {\n            console.warn('\"inputTemplate\" is deprecated. Use \"fd-input-group-input\" directive instead');\n        }\n\n        this._inputTemplate = value;\n    }\n\n    get inputTemplate(): TemplateRef<any> {\n        return this._inputTemplate;\n    }\n\n    /**\n     * The placement of the add-on.\n     * Options include *before* and *after*\n     */\n    @Input()\n    placement: InputGroupPlacement = 'after';\n\n    /** If it is mandatory field */\n    @Input()\n    required = false;\n\n    /** Whether the input group is inline. */\n    @Input()\n    inline = false;\n\n    /** Placeholder for the input group. */\n    @Input()\n    placeholder: string;\n\n    /** The text for the add-on. */\n    @Input()\n    addOnText: string;\n\n    /** Whether AddOn Button should be focusable */\n    @Input()\n    buttonFocusable = true;\n\n    /** The type of the input, used in Input Group. By default value is set to 'text' */\n    @Input()\n    type = 'text';\n\n    /** The icon value for the add-on. */\n    @Input()\n    glyph: Nullable<string>;\n\n    /** Whether the icon add-on or the text add-on is a button. */\n    @Input()\n    button: boolean;\n\n    /** Whether the input group is disabled. */\n    @Input()\n    disabled: boolean;\n\n    /** Whether the input group is readonly. */\n    @Input()\n    readonly: boolean;\n\n    /**\n     *  The state of the form control - applies css classes.\n     *  Can be `success`, `error`, `warning`, `information` or blank for default.\n     */\n    @Input()\n    state: Nullable<FormStates>;\n\n    /**\n     * Whether the input group is a popover control\n     */\n    @Input()\n    isControl = false;\n\n    /**\n     * Whether should show focus outline\n     */\n    @Input()\n    showFocus = true;\n\n    /** @hidden */\n    @Input()\n    isExpanded = false;\n\n    /** Label applied to button with glyph element. */\n    @Input()\n    glyphAriaLabel: Nullable<string>;\n\n    /** The tooltip for the input group icon. */\n    @Input()\n    iconTitle: Nullable<string>;\n\n    /** @deprecated renamed to \"ariaLabelledBy\" */\n    @Input()\n    set ariaLabelledby(value: Nullable<string>) {\n        if (isDevMode()) {\n            console.warn('\"ariaLabelledby\" is deprecated. Use \"ariaLabelledBy\" instead');\n        }\n        this.ariaLabelledBy = value;\n    }\n\n    /** the associated ids for the input aria-labelledby field */\n    @Input()\n    ariaLabelledBy: Nullable<string>;\n\n    /** Event emitted when the add-on button is clicked. */\n    @Output()\n    addOnButtonClicked = new EventEmitter<Event>();\n\n    /**\n     * Event emitted when the native clear button is clicked, or when native search is executed.\n     * Works only for native search for input[type=\"search\"]\n     */\n    @Output()\n    search = new EventEmitter<Event>();\n\n    /** @hidden */\n    @ContentChild(InputGroupInputDirective)\n    inputElement: InputGroupInputDirective;\n\n    /** @hidden */\n    @ViewChild(InputGroupInputDirective)\n    localInputElement: InputGroupInputDirective;\n\n    /** @hidden */\n    @ContentChild(InputGroupAddOnDirective)\n    addOnElement: InputGroupAddOnDirective;\n\n    /** @hidden */\n    _inputTextValue: string;\n\n    /** @hidden */\n    _inputId = `fd-input-group-input-id-${addOnInputRandomId++}`;\n\n    /** @hidden */\n    _addOnNonButtonId = `fd-input-group-non-button-id-${addOnNonButtonRandomId++}`;\n\n    /** @hidden */\n    _addOnButtonId = `fd-input-group-button-id-${addOnButtonRandomId++}`;\n\n    /** @hidden */\n    _inputFocused$: Observable<boolean>;\n\n    /**\n     * Whether the input group is in the shellbar. Only for internal use by combobox component.\n     * @hidden\n     */\n    inShellbar = false;\n\n    /** @hidden */\n    private _inputTemplate: TemplateRef<any>;\n\n    /** An RxJS Subject that will kill the stream upon component’s destruction (for unsubscribing)  */\n    private readonly _onDestroy$: Subject<void> = new Subject<void>();\n\n    /** @hidden */\n    onChange: any = () => {};\n\n    /** @hidden */\n    onTouched: any = () => {};\n\n    /** Get the value of the text input. */\n    get inputText(): string {\n        return this._inputTextValue;\n    }\n\n    /** Set the value of the text input. */\n    set inputText(value) {\n        this._inputTextValue = value;\n\n        this.onChange(value);\n        this.onTouched();\n    }\n\n    /** @hidden\n     *  Calculate the correct ids for input aria-labelledby\n     */\n    get _inputAriaLabelledBy(): string {\n        let ariaLabelledByIds = this.ariaLabelledBy ? this.ariaLabelledBy + ' ' : '';\n\n        if (!this.button) {\n            ariaLabelledByIds += this._addOnNonButtonId;\n        }\n\n        return ariaLabelledByIds;\n    }\n\n    /** @hidden */\n    constructor(private readonly _elementRef: ElementRef, private readonly _changeDetectorRef: ChangeDetectorRef) {}\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._listenInputFocus();\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._onDestroy$.next();\n        this._onDestroy$.complete();\n    }\n\n    /** @hidden */\n    writeValue(value: any): void {\n        this._inputTextValue = value;\n\n        this._changeDetectorRef.markForCheck();\n    }\n\n    /** @hidden */\n    registerOnChange(fn): void {\n        this.onChange = fn;\n    }\n\n    /** @hidden */\n    registerOnTouched(fn): void {\n        this.onTouched = fn;\n    }\n\n    /** @hidden */\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n\n        this._changeDetectorRef.detectChanges();\n    }\n\n    /** @hidden */\n    setInShellbar(value: boolean): void {\n        this.inShellbar = value;\n\n        this._changeDetectorRef.detectChanges();\n    }\n\n    /** @hidden */\n    _buttonClicked($event: MouseEvent): void {\n        this.addOnButtonClicked.emit($event);\n    }\n\n    /** @hidden */\n    _onSearchEvent(event: Event): void {\n        this.search.emit(event);\n    }\n\n    /** @hidden */\n    _preventFocus(event: MouseEvent): void {\n        if (!this.buttonFocusable) {\n            event.preventDefault();\n        }\n    }\n\n    /** @hidden */\n    private _listenInputFocus(): void {\n        const inputElement =\n            this.inputElement?.elementRef()?.nativeElement || this.localInputElement?.elementRef()?.nativeElement;\n\n        if (!inputElement) {\n            return;\n        }\n\n        this._inputFocused$ = merge(\n            fromEvent(inputElement, 'focusin').pipe(map(() => true)),\n            fromEvent(inputElement, 'focusout').pipe(map(() => false))\n        ).pipe(\n            filter(() => this.showFocus),\n            takeUntil(this._onDestroy$)\n        );\n\n        this._changeDetectorRef.markForCheck();\n    }\n}\n","<div\n    class=\"fd-input-group\"\n    [class.fd-input-group--inline]=\"inline\"\n    [class.is-disabled]=\"disabled\"\n    [class.is-readonly]=\"readonly\"\n    [class.fd-shellbar__input-group]=\"inShellbar\"\n    [class.fd-input-group--control]=\"isControl\"\n    [class.is-focus]=\"_inputFocused$ | async\"\n    [class]=\"state ? 'is-' + state : ' '\"\n>\n    <ng-container *ngIf=\"placement === 'after' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"!addOnElement && (glyph || addOnText)\">\n        <span\n            *ngIf=\"button\"\n            fd-input-group-addon\n            [button]=\"true\"\n            [placement]=\"placement\"\n            [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n        >\n            <button\n                fd-button\n                class=\"fd-input-group__button\"\n                type=\"button\"\n                [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                [id]=\"_addOnButtonId\"\n                [attr.tabindex]=\"buttonFocusable ? 0 : -1\"\n                [attr.title]=\"iconTitle || glyphAriaLabel || glyph\"\n                [glyph]=\"glyph\"\n                [class.fd-shellbar__button]=\"inShellbar\"\n                [class.is-expanded]=\"isExpanded\"\n                [attr.aria-expanded]=\"inShellbar ? isExpanded : null\"\n                [ariaLabel]=\"glyphAriaLabel || glyph || addOnText\"\n                [attr.aria-controls]=\"_inputId\"\n                [disabled]=\"disabled\"\n                (mousedown)=\"_preventFocus($event)\"\n                (click)=\"_buttonClicked($event)\"\n            >\n                <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n            </button>\n        </span>\n\n        <span\n            *ngIf=\"!button\"\n            fd-input-group-addon\n            [id]=\"_addOnNonButtonId\"\n            [placement]=\"placement\"\n            [attr.aria-label]=\"glyphAriaLabel || glyph || addOnText\"\n            [attr.title]=\"iconTitle || glyph || addOnText\"\n        >\n            <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n\n            <span *ngIf=\"glyph\" [className]=\"'sap-icon--' + glyph\"></span>\n        </span>\n    </ng-container>\n\n    <ng-container *ngIf=\"placement === 'before' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #input>\n    <ng-container *ngIf=\"inputTemplate\">\n        <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n    </ng-container>\n\n    <input\n        *ngIf=\"!inputTemplate\"\n        [(ngModel)]=\"inputText\"\n        [id]=\"_inputId\"\n        [attr.aria-labelledby]=\"_inputAriaLabelledBy\"\n        [class.fd-shellbar__input-group-input]=\"inShellbar\"\n        fd-input-group-input\n        [type]=\"type\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        (search)=\"_onSearchEvent($event)\"\n    />\n</ng-template>\n","import { Directive, forwardRef } from '@angular/core';\nimport { CONTENT_DENSITY_DIRECTIVE, DeprecatedCompactDirective } from '@fundamental-ngx/core/content-density';\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: 'fd-input-group[compact], [fd-input-group-addon][compact], [fd-input-group-input][compact]',\n    providers: [\n        {\n            provide: CONTENT_DENSITY_DIRECTIVE,\n            useExisting: forwardRef(() => DeprecatedInputGroupCompactDirective)\n        }\n    ]\n})\nexport class DeprecatedInputGroupCompactDirective extends DeprecatedCompactDirective {\n    constructor() {\n        super('fd-input-group[compact], [fd-input-group-addon][compact], [fd-input-group-input]');\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\n\nimport { InputGroupComponent } from './input-group.component';\nimport { ButtonModule } from '@fundamental-ngx/core/button';\nimport { IconModule } from '@fundamental-ngx/core/icon';\nimport {\n    InputGroupAddOnDirective,\n    InputGroupInputDirective,\n    InputGroupTextareaDirective\n} from './input-group-directives';\nimport { DeprecatedInputGroupCompactDirective } from './deprecated-input-group-compact.directive';\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\n\n@NgModule({\n    declarations: [\n        InputGroupComponent,\n        InputGroupInputDirective,\n        InputGroupTextareaDirective,\n        InputGroupAddOnDirective,\n        DeprecatedInputGroupCompactDirective\n    ],\n    imports: [CommonModule, ButtonModule, IconModule, FormsModule, ContentDensityModule],\n    exports: [\n        InputGroupComponent,\n        InputGroupInputDirective,\n        InputGroupTextareaDirective,\n        InputGroupAddOnDirective,\n        DeprecatedInputGroupCompactDirective,\n        ContentDensityModule\n    ]\n})\nexport class InputGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-core-input-group.mjs","sources":["../../../../libs/core/src/lib/input-group/input-group-directives.ts","../../../../libs/core/src/lib/input-group/input-group.component.ts","../../../../libs/core/src/lib/input-group/input-group.component.html","../../../../libs/core/src/lib/input-group/deprecated-input-group-compact.directive.ts","../../../../libs/core/src/lib/input-group/input-group.module.ts","../../../../libs/core/src/lib/input-group/fundamental-ngx-core-input-group.ts"],"sourcesContent":["import {\n    AfterContentInit,\n    Directive,\n    ElementRef,\n    HostBinding,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Renderer2\n} from '@angular/core';\nimport { InputGroupPlacement } from './types';\nimport { FormStates } from '@fundamental-ngx/core/shared';\nimport { Subscription } from 'rxjs';\nimport { applyCssClass, CssClassBuilder } from '@fundamental-ngx/core/utils';\nimport {\n    ContentDensityObserver,\n    contentDensityObserverProviders,\n    ContentDensityMode\n} from '@fundamental-ngx/core/content-density';\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: '[fd-input-group-input]',\n    providers: [\n        contentDensityObserverProviders({\n            modifiers: { [ContentDensityMode.COMPACT]: 'fd-input--compact' }\n        })\n    ]\n})\nexport class InputGroupInputDirective implements CssClassBuilder, OnInit, OnChanges, OnDestroy {\n    /** user's custom classes */\n    @Input()\n    class: string;\n\n    /** @hidden */\n    private _subscriptions = new Subscription();\n\n    /** @hidden */\n    constructor(private _elementRef: ElementRef, private _contentDensityObserver: ContentDensityObserver) {\n        _contentDensityObserver.subscribe();\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngOnChanges(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._subscriptions.unsubscribe();\n    }\n\n    @applyCssClass\n    /** CssClassBuilder interface implementation\n     * function must return single string\n     * function is responsible for order which css classes are applied\n     */\n    buildComponentCssClass(): string[] {\n        return ['fd-input', 'fd-input-group__input'];\n    }\n\n    elementRef(): ElementRef<any> {\n        return this._elementRef;\n    }\n}\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: '[fd-textarea-group-input]'\n})\nexport class InputGroupTextareaDirective {}\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: '[fd-input-group-addon]',\n    providers: [\n        contentDensityObserverProviders({\n            modifiers: { [ContentDensityMode.COMPACT]: 'fd-input-group__addon--compact' }\n        })\n    ]\n})\nexport class InputGroupAddOnDirective implements OnInit, OnChanges, CssClassBuilder, AfterContentInit, OnDestroy {\n    /** user's custom classes */\n    @Input()\n    class: string;\n\n    /** @hidden */\n    @HostBinding('class.fd-input-group__addon')\n    fdInputGroupAddonClass = true;\n\n    /**\n     * The placement of the add-on. Options include *before* and *after*\n     */\n    @Input()\n    placement: InputGroupPlacement = 'after';\n\n    /**\n     * The placement of the add-on. Options include *before* and *after*\n     */\n    @Input()\n    type: string;\n\n    /**\n     *  The state of the form control - applies css classes.\n     *  Can be `success`, `error`, `warning`, `information` or blank for default.\n     */\n    @Input()\n    state?: FormStates;\n\n    /**\n     * Whether the icon add-on or the text add-on is a button.\n     */\n    @Input()\n    button = false;\n\n    /** @hidden */\n    private _subscriptions = new Subscription();\n\n    /** @hidden */\n    constructor(\n        private _elementRef: ElementRef,\n        private renderer: Renderer2,\n        private _contentDensityObserver: ContentDensityObserver\n    ) {\n        _contentDensityObserver.subscribe();\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngOnChanges(): void {\n        this.buildComponentCssClass();\n    }\n\n    /** @hidden */\n    ngAfterContentInit(): void {\n        /** Add fd-input-group__button to button child element */\n        const button = this.elementRef().nativeElement.querySelector('button');\n        if (button) {\n            this.renderer.addClass(button, 'fd-input-group__button');\n        }\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._subscriptions.unsubscribe();\n    }\n\n    @applyCssClass\n    /** CssClassBuilder interface implementation\n     * function must return single string\n     * function is responsible for order which css classes are applied\n     */\n    buildComponentCssClass(): string[] {\n        return [\n            'fd-input-group__addon',\n            this.button ? 'fd-input-group__addon--button' : '',\n            this.type ? 'fd-input-group__addon--' + this.type : '',\n            this.state ? 'is-' + this.state : ''\n        ];\n    }\n\n    elementRef(): ElementRef<any> {\n        return this._elementRef;\n    }\n}\n","import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChild,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    Input,\n    isDevMode,\n    OnDestroy,\n    Output,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { filter, fromEvent, map, merge, Observable, Subject, takeUntil, debounceTime } from 'rxjs';\n\nimport { FormStates, Nullable } from '@fundamental-ngx/core/shared';\nimport { FormItemControl, registerFormItemControl } from '@fundamental-ngx/core/form';\n\nimport { InputGroupAddOnDirective, InputGroupInputDirective } from './input-group-directives';\nimport { InputGroupPlacement } from './types';\n\nlet addOnNonButtonRandomId = 0;\nlet addOnButtonRandomId = 0;\nlet addOnInputRandomId = 0;\n\n/**\n * The component that represents an input group.\n * The input group includes form inputs with add-ons that allow the user to better understand the information being entered.\n *\n * ```html\n * <fd-input-group placement=\"after\" addOnText=\"$\" placeholder=\"Amount\">\n * </fd-input-group>\n * ```\n */\n@Component({\n    selector: 'fd-input-group',\n    templateUrl: './input-group.component.html',\n    styleUrls: ['./input-group.component.scss'],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => InputGroupComponent),\n            multi: true\n        },\n        registerFormItemControl(InputGroupComponent)\n    ],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class InputGroupComponent implements ControlValueAccessor, AfterViewInit, OnDestroy, FormItemControl {\n    /** @deprecated Input template, use fd-input-group-input directive instead. */\n    @Input()\n    set inputTemplate(value: TemplateRef<any>) {\n        if (isDevMode()) {\n            console.warn('\"inputTemplate\" is deprecated. Use \"fd-input-group-input\" directive instead');\n        }\n\n        this._inputTemplate = value;\n    }\n\n    get inputTemplate(): TemplateRef<any> {\n        return this._inputTemplate;\n    }\n\n    /**\n     * The placement of the add-on.\n     * Options include *before* and *after*\n     */\n    @Input()\n    placement: InputGroupPlacement = 'after';\n\n    /** If it is mandatory field */\n    @Input()\n    required = false;\n\n    /** Whether the input group is inline. */\n    @Input()\n    inline = false;\n\n    /** Placeholder for the input group. */\n    @Input()\n    placeholder: string;\n\n    /** The text for the add-on. */\n    @Input()\n    addOnText: string;\n\n    /** Whether AddOn Button should be focusable */\n    @Input()\n    buttonFocusable = true;\n\n    /** The type of the input, used in Input Group. By default value is set to 'text' */\n    @Input()\n    type = 'text';\n\n    /** The icon value for the add-on. */\n    @Input()\n    glyph: Nullable<string>;\n\n    /** Whether the icon add-on or the text add-on is a button. */\n    @Input()\n    button: boolean;\n\n    /** Whether the input group is disabled. */\n    @Input()\n    disabled: boolean;\n\n    /** Whether the input group is readonly. */\n    @Input()\n    readonly: boolean;\n\n    /**\n     *  The state of the form control - applies css classes.\n     *  Can be `success`, `error`, `warning`, `information` or blank for default.\n     */\n    @Input()\n    state: Nullable<FormStates>;\n\n    /**\n     * Whether the input group is a popover control\n     */\n    @Input()\n    isControl = false;\n\n    /**\n     * Whether should show focus outline\n     */\n    @Input()\n    showFocus = true;\n\n    /** @hidden */\n    @Input()\n    isExpanded = false;\n\n    /** Label applied to button with glyph element. */\n    @Input()\n    glyphAriaLabel: Nullable<string>;\n\n    /** The tooltip for the input group icon. */\n    @Input()\n    iconTitle: Nullable<string>;\n\n    /** @deprecated renamed to \"ariaLabelledBy\" */\n    @Input()\n    set ariaLabelledby(value: Nullable<string>) {\n        if (isDevMode()) {\n            console.warn('\"ariaLabelledby\" is deprecated. Use \"ariaLabelledBy\" instead');\n        }\n        this.ariaLabelledBy = value;\n    }\n\n    /** the associated ids for the input aria-labelledby field */\n    @Input()\n    ariaLabelledBy: Nullable<string>;\n\n    /** Event emitted when the add-on button is clicked. */\n    @Output()\n    addOnButtonClicked = new EventEmitter<Event>();\n\n    /**\n     * Event emitted when the native clear button is clicked, or when native search is executed.\n     * Works only for native search for input[type=\"search\"]\n     */\n    @Output()\n    search = new EventEmitter<Event>();\n\n    /** @hidden */\n    @ContentChild(InputGroupInputDirective)\n    inputElement: InputGroupInputDirective;\n\n    /** @hidden */\n    @ViewChild(InputGroupInputDirective)\n    localInputElement: InputGroupInputDirective;\n\n    /** @hidden */\n    @ContentChild(InputGroupAddOnDirective)\n    addOnElement: InputGroupAddOnDirective;\n\n    /** @hidden */\n    _inputTextValue: string;\n\n    /** @hidden */\n    _inputId = `fd-input-group-input-id-${addOnInputRandomId++}`;\n\n    /** @hidden */\n    _addOnNonButtonId = `fd-input-group-non-button-id-${addOnNonButtonRandomId++}`;\n\n    /** @hidden */\n    _addOnButtonId = `fd-input-group-button-id-${addOnButtonRandomId++}`;\n\n    /** @hidden */\n    _inputFocused$: Observable<boolean>;\n\n    /**\n     * Whether the input group is in the shellbar. Only for internal use by combobox component.\n     * @hidden\n     */\n    inShellbar = false;\n\n    /** @hidden */\n    private _inputTemplate: TemplateRef<any>;\n\n    /** An RxJS Subject that will kill the stream upon component’s destruction (for unsubscribing)  */\n    private readonly _onDestroy$: Subject<void> = new Subject<void>();\n\n    /** @hidden */\n    onChange: any = () => {};\n\n    /** @hidden */\n    onTouched: any = () => {};\n\n    /** Get the value of the text input. */\n    get inputText(): string {\n        return this._inputTextValue;\n    }\n\n    /** Set the value of the text input. */\n    set inputText(value) {\n        this._inputTextValue = value;\n\n        this.onChange(value);\n        this.onTouched();\n    }\n\n    /** @hidden\n     *  Calculate the correct ids for input aria-labelledby\n     */\n    get _inputAriaLabelledBy(): string {\n        let ariaLabelledByIds = this.ariaLabelledBy ? this.ariaLabelledBy + ' ' : '';\n\n        if (!this.button) {\n            ariaLabelledByIds += this._addOnNonButtonId;\n        }\n\n        return ariaLabelledByIds;\n    }\n\n    /** @hidden */\n    constructor(private readonly _elementRef: ElementRef, private readonly _changeDetectorRef: ChangeDetectorRef) {}\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._listenInputFocus();\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._onDestroy$.next();\n        this._onDestroy$.complete();\n    }\n\n    /** @hidden */\n    writeValue(value: any): void {\n        this._inputTextValue = value;\n\n        this._changeDetectorRef.markForCheck();\n    }\n\n    /** @hidden */\n    registerOnChange(fn): void {\n        this.onChange = fn;\n    }\n\n    /** @hidden */\n    registerOnTouched(fn): void {\n        this.onTouched = fn;\n    }\n\n    /** @hidden */\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n\n        this._changeDetectorRef.detectChanges();\n    }\n\n    /** @hidden */\n    setInShellbar(value: boolean): void {\n        this.inShellbar = value;\n\n        this._changeDetectorRef.detectChanges();\n    }\n\n    /** @hidden */\n    _buttonClicked($event: MouseEvent): void {\n        this.addOnButtonClicked.emit($event);\n    }\n\n    /** @hidden */\n    _onSearchEvent(event: Event): void {\n        this.search.emit(event);\n    }\n\n    /** @hidden */\n    _preventFocus(event: MouseEvent): void {\n        if (!this.buttonFocusable) {\n            event.preventDefault();\n        }\n    }\n\n    /** @hidden */\n    private _listenInputFocus(): void {\n        const inputElement =\n            this.inputElement?.elementRef()?.nativeElement || this.localInputElement?.elementRef()?.nativeElement;\n\n        if (!inputElement) {\n            return;\n        }\n\n        this._inputFocused$ = merge(\n            fromEvent(inputElement, 'focusin').pipe(map(() => true)),\n            fromEvent(inputElement, 'focusout').pipe(map(() => false))\n        ).pipe(\n            // debounceTime is needed in order to filter subsequent focus-blur events, that happen simultaneously\n            debounceTime(10),\n            filter(() => this.showFocus),\n            takeUntil(this._onDestroy$)\n        );\n\n        this._changeDetectorRef.markForCheck();\n    }\n}\n","<div\n    class=\"fd-input-group\"\n    [class.fd-input-group--inline]=\"inline\"\n    [class.is-disabled]=\"disabled\"\n    [class.is-readonly]=\"readonly\"\n    [class.fd-shellbar__input-group]=\"inShellbar\"\n    [class.fd-input-group--control]=\"isControl\"\n    [class.is-focus]=\"_inputFocused$ | async\"\n    [class]=\"state ? 'is-' + state : ' '\"\n>\n    <ng-container *ngIf=\"placement === 'after' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"!addOnElement && (glyph || addOnText)\">\n        <span\n            *ngIf=\"button\"\n            fd-input-group-addon\n            [button]=\"true\"\n            [placement]=\"placement\"\n            [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n        >\n            <button\n                fd-button\n                class=\"fd-input-group__button\"\n                type=\"button\"\n                [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                [id]=\"_addOnButtonId\"\n                [attr.tabindex]=\"buttonFocusable ? 0 : -1\"\n                [attr.title]=\"iconTitle || glyphAriaLabel || glyph\"\n                [glyph]=\"glyph\"\n                [class.fd-shellbar__button]=\"inShellbar\"\n                [class.is-expanded]=\"isExpanded\"\n                [attr.aria-haspopup]=\"isControl\"\n                [attr.aria-expanded]=\"inShellbar ? isExpanded : null\"\n                [ariaLabel]=\"glyphAriaLabel || glyph || addOnText\"\n                [attr.aria-controls]=\"_inputId\"\n                [disabled]=\"disabled\"\n                (mousedown)=\"_preventFocus($event)\"\n                (click)=\"_buttonClicked($event)\"\n            >\n                <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n            </button>\n        </span>\n\n        <span\n            *ngIf=\"!button\"\n            fd-input-group-addon\n            [id]=\"_addOnNonButtonId\"\n            [placement]=\"placement\"\n            [attr.aria-label]=\"glyphAriaLabel || glyph || addOnText\"\n            [attr.title]=\"iconTitle || glyph || addOnText\"\n        >\n            <ng-container *ngIf=\"!glyph\">{{ addOnText }}</ng-container>\n\n            <span *ngIf=\"glyph\" [className]=\"'sap-icon--' + glyph\"></span>\n        </span>\n    </ng-container>\n\n    <ng-container *ngIf=\"placement === 'before' && !inputElement\">\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #input>\n    <ng-container *ngIf=\"inputTemplate\">\n        <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n    </ng-container>\n\n    <input\n        *ngIf=\"!inputTemplate\"\n        [(ngModel)]=\"inputText\"\n        [id]=\"_inputId\"\n        [attr.aria-labelledby]=\"_inputAriaLabelledBy\"\n        [class.fd-shellbar__input-group-input]=\"inShellbar\"\n        fd-input-group-input\n        [type]=\"type\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        (search)=\"_onSearchEvent($event)\"\n    />\n</ng-template>\n","import { Directive, forwardRef } from '@angular/core';\nimport { CONTENT_DENSITY_DIRECTIVE, DeprecatedCompactDirective } from '@fundamental-ngx/core/content-density';\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: 'fd-input-group[compact], [fd-input-group-addon][compact], [fd-input-group-input][compact]',\n    providers: [\n        {\n            provide: CONTENT_DENSITY_DIRECTIVE,\n            useExisting: forwardRef(() => DeprecatedInputGroupCompactDirective)\n        }\n    ]\n})\nexport class DeprecatedInputGroupCompactDirective extends DeprecatedCompactDirective {\n    constructor() {\n        super('fd-input-group[compact], [fd-input-group-addon][compact], [fd-input-group-input]');\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\n\nimport { InputGroupComponent } from './input-group.component';\nimport { ButtonModule } from '@fundamental-ngx/core/button';\nimport { IconModule } from '@fundamental-ngx/core/icon';\nimport {\n    InputGroupAddOnDirective,\n    InputGroupInputDirective,\n    InputGroupTextareaDirective\n} from './input-group-directives';\nimport { DeprecatedInputGroupCompactDirective } from './deprecated-input-group-compact.directive';\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\n\n@NgModule({\n    declarations: [\n        InputGroupComponent,\n        InputGroupInputDirective,\n        InputGroupTextareaDirective,\n        InputGroupAddOnDirective,\n        DeprecatedInputGroupCompactDirective\n    ],\n    imports: [CommonModule, ButtonModule, IconModule, FormsModule, ContentDensityModule],\n    exports: [\n        InputGroupComponent,\n        InputGroupInputDirective,\n        InputGroupTextareaDirective,\n        InputGroupAddOnDirective,\n        DeprecatedInputGroupCompactDirective,\n        ContentDensityModule\n    ]\n})\nexport class InputGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2015/fundamental-ngx-core-list.mjs

@@ -173,7 +173,8 @@ class ListItemComponent extends ListFocusItem {
     ngOnChanges(changes) {
         if (changes.selectedListItemScreenReaderText ||
             changes.navigatedListItemScreenReaderText ||
-            changes.navigatableListItemScreenReaderText) {
+            changes.navigatableListItemScreenReaderText ||
+            changes.selected) {
             this._updateScreenReaderText();
         }
     }
@@ -247,16 +248,16 @@ class ListItemComponent extends ListFocusItem {
     }
     /** @hidden */
     _updateScreenReaderText() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         let content = '';
         if (this.selected) {
-            content += `, ${(_a = this.selectedListItemScreenReaderText) !== null && _a !== void 0 ? _a : 'selected'}`;
+            content += this._addTextPart(content, (_a = this.selectedListItemScreenReaderText) !== null && _a !== void 0 ? _a : 'selected');
         }
-        if (this.linkDirectives.some((d) => d.navigated)) {
-            content += `, ${(_b = this.navigatedListItemScreenReaderText) !== null && _b !== void 0 ? _b : 'navigated'}`;
+        if ((_b = this.linkDirectives) === null || _b === void 0 ? void 0 : _b.some((d) => d.navigated)) {
+            content += this._addTextPart(content, (_c = this.navigatedListItemScreenReaderText) !== null && _c !== void 0 ? _c : 'navigated');
         }
-        if (this.linkDirectives.some((d) => d.navigationIndicator)) {
-            content += `, ${(_c = this.navigatableListItemScreenReaderText) !== null && _c !== void 0 ? _c : 'navigatable'}`;
+        if ((_d = this.linkDirectives) === null || _d === void 0 ? void 0 : _d.some((d) => d.navigationIndicator)) {
+            content += this._addTextPart(content, (_e = this.navigatableListItemScreenReaderText) !== null && _e !== void 0 ? _e : 'navigatable');
         }
         if (content.startsWith(', ')) {
             content = content.substring(2);
@@ -264,6 +265,10 @@ class ListItemComponent extends ListFocusItem {
         this.screenReaderContent = content;
         this._changeDetectorRef.markForCheck();
     }
+    /** @hidden */
+    _addTextPart(existing, toAdd) {
+        return (existing ? ', ' : '') + toAdd;
+    }
 }
 ListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ListItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: { selected: "selected", ariaDescribedBy: "ariaDescribedBy", noData: "noData", action: "action", interactive: "interactive", growing: "growing", counter: "counter", unread: "unread", selectedListItemScreenReaderText: "selectedListItemScreenReaderText", navigatedListItemScreenReaderText: "navigatedListItemScreenReaderText", navigatableListItemScreenReaderText: "navigatableListItemScreenReaderText" }, outputs: { keyDown: "keyDown" }, host: { attributes: { "role": "listitem" }, listeners: { "keydown": "keydownHandler($event)", "click": "onClick($event)" }, properties: { "attr.aria-selected": "this.selected", "class.is-selected": "this.selected", "class.fd-list__item--no-data": "this.noData", "class.fd-list__item--action": "this.action", "class.fd-list__item--interractive": "this.interactive", "class.fd-list__item--growing": "this.growing", "class.fd-list__item--unread": "this.unread", "class.fd-list__item--link": "this.link", "attr.aria-describedBy": "this.getCombinedAriaDescribedBy" }, classAttribute: "fd-list__item" }, providers: [