npm - @fundamental-ngx/core - Versions diffs - 0.38.2-rc.9 → 0.38.2 - Mend

@fundamental-ngx/core 0.38.2-rc.9 → 0.38.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (393) hide show

package/fesm2015/fundamental-ngx-core-status-indicator.mjs CHANGED Viewed

@@ -237,7 +237,7 @@ class StatusIndicatorComponent {
     }
 }
 StatusIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: StatusIndicatorComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-StatusIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: StatusIndicatorComponent, selector: "fd-status-indicator", inputs: { id: "id", size: "size", status: "status", statusLabel: "statusLabel", viewBox: "viewBox", clickable: "clickable", labelSize: "labelSize", ariaLabel: "ariaLabel", ariaRoleDescription: "ariaRoleDescription", focusable: "focusable", role: "role", ariaValueText: "ariaValueText", title: "title", labelPosition: "labelPosition", path: "path", fillPercentage: "fillPercentage", fillDirection: "fillDirection", fillingType: "fillingType", angle: "angle" }, host: { properties: { "attr.aria-label": "ariaLabel", "attr.aria-roledescription": "ariaRoleDescription", "attr.focusable": "focusable", "attr.title": "title", "attr.role": "role", "attr.aria-valuetext": "ariaValueText", "attr.aria-valuenow": "fillPercentage ? fillPercentage : 0", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.tabindex": "focusable ? 0 : -1" } }, usesOnChanges: true, ngImport: i0, template: "<span\n    *ngIf=\"labelPosition === 'left' || labelPosition === 'top'\"\n    [class.fd-status-indicator__label--sm]=\"labelSize === 'sm'\"\n    [class.fd-status-indicator__label--md]=\"labelSize === 'md'\"\n    [class.fd-status-indicator__label--lg]=\"labelSize === 'lg'\"\n    [class.fd-status-indicator__label--xl]=\"labelSize === 'xl'\"\n    [class.fd-status-indicator__label--top]=\"labelPosition === 'top'\"\n    [class.fd-status-indicator__label--left]=\"labelPosition === 'left'\"\n    class=\"fd-status-indicator__label\"\n    >{{ statusLabel }}\n</span>\n<svg\n    [attr.id]=\"id\"\n    data-sap-ui=\"__shape0-__box21-24\"\n    version=\"1.1\"\n    [attr.viewBox]=\"viewBox\"\n    xlmns=\"http://www.w3.org/2000/svg\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    class=\"fd-status-indicator__svg\"\n>\n    <ng-container [ngTemplateOutlet]=\"svgTemplate\"></ng-container>\n</svg>\n<span\n    *ngIf=\"labelPosition === 'right' || labelPosition === 'bottom'\"\n    [class.fd-status-indicator__label--sm]=\"labelSize === 'sm'\"\n    [class.fd-status-indicator__label--md]=\"labelSize === 'md'\"\n    [class.fd-status-indicator__label--lg]=\"labelSize === 'lg'\"\n    [class.fd-status-indicator__label--xl]=\"labelSize === 'xl'\"\n    [class.fd-status-indicator__label--right]=\"labelPosition === 'right'\"\n    [class.fd-status-indicator__label--bottom]=\"labelPosition === 'bottom'\"\n    class=\"fd-status-indicator__label\"\n    >{{ statusLabel }}\n</span>\n\n<ng-template #svgTemplate>\n    <svg\n        xlmns=\"http://www.w3.org/2000/svg\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        overflow=\"visible\"\n        [attr.id]=\"id + i\"\n        data-sap-ui=\"id\"\n        *ngFor=\"let path of path; let i = index\"\n    >\n        <defs>\n            <linearGradient\n                *ngIf=\"!(fillCalculator - i > 0 && fillCalculator - i < 1) || fillingType !== 'radial'\"\n                id=\"{{ id + i }}-gradient\"\n                [attr.x1]=\"x1\"\n                [attr.y1]=\"y1\"\n                [attr.x2]=\"x2\"\n                [attr.y2]=\"y2\"\n            >\n                <stop [attr.offset]=\"fillCalculator - i\" stop-color=\"white\">\n                    <animate\n                        attributeName=\"offset\"\n                        attr.values=\"0, {{ fillCalculator - i }}\"\n                        repeatCount=\"1\"\n                        dur=\"1s\"\n                        begin=\"0s\"\n                    />\n                </stop>\n                <stop [attr.offset]=\"fillCalculator - i\" stop-color=\"transparent\">\n                    <animate\n                        attributeName=\"offset\"\n                        attr.values=\"0, {{ fillCalculator - i }}\"\n                        repeatCount=\"1\"\n                        dur=\"1s\"\n                        begin=\"0s\"\n                    />\n                </stop>\n            </linearGradient>\n            <mask #maskTemplate id=\"{{ id + i }}-mask\">\n                <path\n                    *ngIf=\"!(fillCalculator - i > 0 && fillCalculator - i < 1) || fillingType !== 'radial'\"\n                    id=\"{{ id + i }}-mask-shape\"\n                    [attr.d]=\"path\"\n                    stroke-width=\"0\"\n                    stroke=\"white\"\n                    attr.fill=\"url(#{{ id + i }}-gradient)\"\n                ></path>\n                <polygon\n                    *ngIf=\"fillingType === 'radial' && fillCalculator - i > 0 && fillCalculator - i < 1\"\n                    id=\"{{ id + i }}-mask-shape\"\n                    fill=\"white\"\n                    [attr.points]=\"pointsArray[i]\"\n                ></polygon>\n            </mask>\n        </defs>\n        <path\n            id=\"{{ id + i }}-shape\"\n            [attr.d]=\"path\"\n            stroke-width=\"0\"\n            stroke=\"#89919A\"\n            attr.mask=\"url(#{{ id + i }}-mask)\"\n        ></path>\n        <path\n            id=\"{{ id + i }}-shape-border\"\n            [attr.d]=\"path\"\n            stroke-width=\"0.25\"\n            stroke=\"#89919A\"\n            fill=\"transparent\"\n        ></path>\n    </svg>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.45\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-status-indicator{stroke:var(--sapNeutralElementColor);stroke-width:.25;fill:transparent;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapContent_LabelColor);color:var(--sapTextColor);display:inline-flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-status-indicator.is-focus,.fd-status-indicator:focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:var(--sapContent_FocusWidth);z-index:5}.fd-status-indicator:after,.fd-status-indicator:before{box-sizing:inherit;font-size:inherit}.fd-status-indicator--horizontal-label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-status-indicator--horizontal-label:after,.fd-status-indicator--horizontal-label:before{box-sizing:inherit;font-size:inherit}.fd-status-indicator--link{cursor:pointer}.fd-status-indicator__label,.fd-status-indicator__label--sm{font-size:var(--sapFontSmallSize, .75rem)}.fd-status-indicator__label--sm.fd-status-indicator__label--top{margin-bottom:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--right{margin-left:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--sm.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);margin-left:0;margin-right:.375rem;transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--sm.fd-status-indicator__label--left{margin-right:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--sm.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);margin-left:.375rem;margin-right:0;transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--sm.fd-status-indicator__label--bottom{margin-top:.375rem}.fd-status-indicator__label--md{font-size:var(--sapFontSize, .875rem)}.fd-status-indicator__label--md.fd-status-indicator__label--top{margin-bottom:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--right{margin-left:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--md.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);margin-left:0;margin-right:.5rem;transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--md.fd-status-indicator__label--left{margin-right:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--md.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);margin-left:.5rem;margin-right:0;transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--md.fd-status-indicator__label--bottom{margin-top:.5rem}.fd-status-indicator__label--lg{font-size:1.125rem}.fd-status-indicator__label--lg.fd-status-indicator__label--top{margin-bottom:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--right{margin-left:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--lg.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);margin-left:0;margin-right:.75rem;transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--lg.fd-status-indicator__label--left{margin-right:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--lg.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);margin-left:.75rem;margin-right:0;transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--lg.fd-status-indicator__label--bottom{margin-top:.75rem}.fd-status-indicator__label--xl{font-size:1.875rem}.fd-status-indicator__label--xl.fd-status-indicator__label--top{margin-bottom:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--right{margin-left:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--xl.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);margin-left:0;margin-right:1rem;transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--xl.fd-status-indicator__label--left{margin-right:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--xl.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);margin-left:1rem;margin-right:0;transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--xl.fd-status-indicator__label--bottom{margin-top:1rem}.fd-status-indicator--positive{fill:var(--sapPositiveElementColor);color:var(--sapPositiveElementColor)}.fd-status-indicator--critical{fill:var(--sapCriticalElementColor);color:var(--sapCriticalElementColor)}.fd-status-indicator--negative{fill:var(--sapNegativeElementColor);color:var(--sapNegativeElementColor)}.fd-status-indicator--sm .fd-status-indicator__svg{height:1.375rem;width:1.875rem}.fd-status-indicator--md .fd-status-indicator__svg{height:1.875rem;width:2.8125rem}.fd-status-indicator--lg .fd-status-indicator__svg{height:3.4375rem;width:5rem}.fd-status-indicator--xl .fd-status-indicator__svg{height:6.25rem;width:9.0625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+StatusIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.2", type: StatusIndicatorComponent, selector: "fd-status-indicator", inputs: { id: "id", size: "size", status: "status", statusLabel: "statusLabel", viewBox: "viewBox", clickable: "clickable", labelSize: "labelSize", ariaLabel: "ariaLabel", ariaRoleDescription: "ariaRoleDescription", focusable: "focusable", role: "role", ariaValueText: "ariaValueText", title: "title", labelPosition: "labelPosition", path: "path", fillPercentage: "fillPercentage", fillDirection: "fillDirection", fillingType: "fillingType", angle: "angle" }, host: { properties: { "attr.aria-label": "ariaLabel", "attr.aria-roledescription": "ariaRoleDescription", "attr.focusable": "focusable", "attr.title": "title", "attr.role": "role", "attr.aria-valuetext": "ariaValueText", "attr.aria-valuenow": "fillPercentage ? fillPercentage : 0", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.tabindex": "focusable ? 0 : -1" } }, usesOnChanges: true, ngImport: i0, template: "<span\n    *ngIf=\"labelPosition === 'left' || labelPosition === 'top'\"\n    [class.fd-status-indicator__label--sm]=\"labelSize === 'sm'\"\n    [class.fd-status-indicator__label--md]=\"labelSize === 'md'\"\n    [class.fd-status-indicator__label--lg]=\"labelSize === 'lg'\"\n    [class.fd-status-indicator__label--xl]=\"labelSize === 'xl'\"\n    [class.fd-status-indicator__label--top]=\"labelPosition === 'top'\"\n    [class.fd-status-indicator__label--left]=\"labelPosition === 'left'\"\n    class=\"fd-status-indicator__label\"\n    >{{ statusLabel }}\n</span>\n<svg\n    [attr.id]=\"id\"\n    data-sap-ui=\"__shape0-__box21-24\"\n    version=\"1.1\"\n    [attr.viewBox]=\"viewBox\"\n    xlmns=\"http://www.w3.org/2000/svg\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    class=\"fd-status-indicator__svg\"\n>\n    <ng-container [ngTemplateOutlet]=\"svgTemplate\"></ng-container>\n</svg>\n<span\n    *ngIf=\"labelPosition === 'right' || labelPosition === 'bottom'\"\n    [class.fd-status-indicator__label--sm]=\"labelSize === 'sm'\"\n    [class.fd-status-indicator__label--md]=\"labelSize === 'md'\"\n    [class.fd-status-indicator__label--lg]=\"labelSize === 'lg'\"\n    [class.fd-status-indicator__label--xl]=\"labelSize === 'xl'\"\n    [class.fd-status-indicator__label--right]=\"labelPosition === 'right'\"\n    [class.fd-status-indicator__label--bottom]=\"labelPosition === 'bottom'\"\n    class=\"fd-status-indicator__label\"\n    >{{ statusLabel }}\n</span>\n\n<ng-template #svgTemplate>\n    <svg\n        xlmns=\"http://www.w3.org/2000/svg\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        overflow=\"visible\"\n        [attr.id]=\"id + i\"\n        data-sap-ui=\"id\"\n        *ngFor=\"let path of path; let i = index\"\n    >\n        <defs>\n            <linearGradient\n                *ngIf=\"!(fillCalculator - i > 0 && fillCalculator - i < 1) || fillingType !== 'radial'\"\n                id=\"{{ id + i }}-gradient\"\n                [attr.x1]=\"x1\"\n                [attr.y1]=\"y1\"\n                [attr.x2]=\"x2\"\n                [attr.y2]=\"y2\"\n            >\n                <stop [attr.offset]=\"fillCalculator - i\" stop-color=\"white\">\n                    <animate\n                        attributeName=\"offset\"\n                        attr.values=\"0, {{ fillCalculator - i }}\"\n                        repeatCount=\"1\"\n                        dur=\"1s\"\n                        begin=\"0s\"\n                    />\n                </stop>\n                <stop [attr.offset]=\"fillCalculator - i\" stop-color=\"transparent\">\n                    <animate\n                        attributeName=\"offset\"\n                        attr.values=\"0, {{ fillCalculator - i }}\"\n                        repeatCount=\"1\"\n                        dur=\"1s\"\n                        begin=\"0s\"\n                    />\n                </stop>\n            </linearGradient>\n            <mask #maskTemplate id=\"{{ id + i }}-mask\">\n                <path\n                    *ngIf=\"!(fillCalculator - i > 0 && fillCalculator - i < 1) || fillingType !== 'radial'\"\n                    id=\"{{ id + i }}-mask-shape\"\n                    [attr.d]=\"path\"\n                    stroke-width=\"0\"\n                    stroke=\"white\"\n                    attr.fill=\"url(#{{ id + i }}-gradient)\"\n                ></path>\n                <polygon\n                    *ngIf=\"fillingType === 'radial' && fillCalculator - i > 0 && fillCalculator - i < 1\"\n                    id=\"{{ id + i }}-mask-shape\"\n                    fill=\"white\"\n                    [attr.points]=\"pointsArray[i]\"\n                ></polygon>\n            </mask>\n        </defs>\n        <path\n            id=\"{{ id + i }}-shape\"\n            [attr.d]=\"path\"\n            stroke-width=\"0\"\n            stroke=\"#89919A\"\n            attr.mask=\"url(#{{ id + i }}-mask)\"\n        ></path>\n        <path\n            id=\"{{ id + i }}-shape-border\"\n            [attr.d]=\"path\"\n            stroke-width=\"0.25\"\n            stroke=\"#89919A\"\n            fill=\"transparent\"\n        ></path>\n    </svg>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.4\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-status-indicator{stroke:var(--sapNeutralElementColor);stroke-width:.25;fill:transparent;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapContent_LabelColor);color:var(--sapTextColor);display:inline-flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-status-indicator.is-focus,.fd-status-indicator:focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:var(--sapContent_FocusWidth);z-index:5}.fd-status-indicator:after,.fd-status-indicator:before{box-sizing:inherit;font-size:inherit}.fd-status-indicator--horizontal-label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-status-indicator--horizontal-label:after,.fd-status-indicator--horizontal-label:before{box-sizing:inherit;font-size:inherit}.fd-status-indicator--link{cursor:pointer}.fd-status-indicator__label,.fd-status-indicator__label--sm{font-size:var(--sapFontSmallSize, .75rem)}.fd-status-indicator__label--sm.fd-status-indicator__label--top{margin-bottom:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--right{margin-left:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--sm.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);margin-left:0;margin-right:.375rem;transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--sm.fd-status-indicator__label--left{margin-right:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--sm.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);margin-left:.375rem;margin-right:0;transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--sm.fd-status-indicator__label--bottom{margin-top:.375rem}.fd-status-indicator__label--md{font-size:var(--sapFontSize, .875rem)}.fd-status-indicator__label--md.fd-status-indicator__label--top{margin-bottom:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--right{margin-left:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--md.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);margin-left:0;margin-right:.5rem;transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--md.fd-status-indicator__label--left{margin-right:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--md.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);margin-left:.5rem;margin-right:0;transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--md.fd-status-indicator__label--bottom{margin-top:.5rem}.fd-status-indicator__label--lg{font-size:1.125rem}.fd-status-indicator__label--lg.fd-status-indicator__label--top{margin-bottom:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--right{margin-left:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--lg.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);margin-left:0;margin-right:.75rem;transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--lg.fd-status-indicator__label--left{margin-right:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--lg.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);margin-left:.75rem;margin-right:0;transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--lg.fd-status-indicator__label--bottom{margin-top:.75rem}.fd-status-indicator__label--xl{font-size:1.875rem}.fd-status-indicator__label--xl.fd-status-indicator__label--top{margin-bottom:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--right{margin-left:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--xl.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);margin-left:0;margin-right:1rem;transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--xl.fd-status-indicator__label--left{margin-right:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--xl.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);margin-left:1rem;margin-right:0;transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--xl.fd-status-indicator__label--bottom{margin-top:1rem}.fd-status-indicator--positive{fill:var(--sapPositiveElementColor);color:var(--sapPositiveElementColor)}.fd-status-indicator--critical{fill:var(--sapCriticalElementColor);color:var(--sapCriticalElementColor)}.fd-status-indicator--negative{fill:var(--sapNegativeElementColor);color:var(--sapNegativeElementColor)}.fd-status-indicator--sm .fd-status-indicator__svg{height:1.375rem;width:1.875rem}.fd-status-indicator--md .fd-status-indicator__svg{height:1.875rem;width:2.8125rem}.fd-status-indicator--lg .fd-status-indicator__svg{height:3.4375rem;width:5rem}.fd-status-indicator--xl .fd-status-indicator__svg{height:6.25rem;width:9.0625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),
@@ -257,7 +257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                         '[attr.aria-valuemin]': '0',
                         '[attr.aria-valuemax]': '100',
                         '[attr.tabindex]': 'focusable ? 0 : -1'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n    *ngIf=\"labelPosition === 'left' || labelPosition === 'top'\"\n    [class.fd-status-indicator__label--sm]=\"labelSize === 'sm'\"\n    [class.fd-status-indicator__label--md]=\"labelSize === 'md'\"\n    [class.fd-status-indicator__label--lg]=\"labelSize === 'lg'\"\n    [class.fd-status-indicator__label--xl]=\"labelSize === 'xl'\"\n    [class.fd-status-indicator__label--top]=\"labelPosition === 'top'\"\n    [class.fd-status-indicator__label--left]=\"labelPosition === 'left'\"\n    class=\"fd-status-indicator__label\"\n    >{{ statusLabel }}\n</span>\n<svg\n    [attr.id]=\"id\"\n    data-sap-ui=\"__shape0-__box21-24\"\n    version=\"1.1\"\n    [attr.viewBox]=\"viewBox\"\n    xlmns=\"http://www.w3.org/2000/svg\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    class=\"fd-status-indicator__svg\"\n>\n    <ng-container [ngTemplateOutlet]=\"svgTemplate\"></ng-container>\n</svg>\n<span\n    *ngIf=\"labelPosition === 'right' || labelPosition === 'bottom'\"\n    [class.fd-status-indicator__label--sm]=\"labelSize === 'sm'\"\n    [class.fd-status-indicator__label--md]=\"labelSize === 'md'\"\n    [class.fd-status-indicator__label--lg]=\"labelSize === 'lg'\"\n    [class.fd-status-indicator__label--xl]=\"labelSize === 'xl'\"\n    [class.fd-status-indicator__label--right]=\"labelPosition === 'right'\"\n    [class.fd-status-indicator__label--bottom]=\"labelPosition === 'bottom'\"\n    class=\"fd-status-indicator__label\"\n    >{{ statusLabel }}\n</span>\n\n<ng-template #svgTemplate>\n    <svg\n        xlmns=\"http://www.w3.org/2000/svg\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        overflow=\"visible\"\n        [attr.id]=\"id + i\"\n        data-sap-ui=\"id\"\n        *ngFor=\"let path of path; let i = index\"\n    >\n        <defs>\n            <linearGradient\n                *ngIf=\"!(fillCalculator - i > 0 && fillCalculator - i < 1) || fillingType !== 'radial'\"\n                id=\"{{ id + i }}-gradient\"\n                [attr.x1]=\"x1\"\n                [attr.y1]=\"y1\"\n                [attr.x2]=\"x2\"\n                [attr.y2]=\"y2\"\n            >\n                <stop [attr.offset]=\"fillCalculator - i\" stop-color=\"white\">\n                    <animate\n                        attributeName=\"offset\"\n                        attr.values=\"0, {{ fillCalculator - i }}\"\n                        repeatCount=\"1\"\n                        dur=\"1s\"\n                        begin=\"0s\"\n                    />\n                </stop>\n                <stop [attr.offset]=\"fillCalculator - i\" stop-color=\"transparent\">\n                    <animate\n                        attributeName=\"offset\"\n                        attr.values=\"0, {{ fillCalculator - i }}\"\n                        repeatCount=\"1\"\n                        dur=\"1s\"\n                        begin=\"0s\"\n                    />\n                </stop>\n            </linearGradient>\n            <mask #maskTemplate id=\"{{ id + i }}-mask\">\n                <path\n                    *ngIf=\"!(fillCalculator - i > 0 && fillCalculator - i < 1) || fillingType !== 'radial'\"\n                    id=\"{{ id + i }}-mask-shape\"\n                    [attr.d]=\"path\"\n                    stroke-width=\"0\"\n                    stroke=\"white\"\n                    attr.fill=\"url(#{{ id + i }}-gradient)\"\n                ></path>\n                <polygon\n                    *ngIf=\"fillingType === 'radial' && fillCalculator - i > 0 && fillCalculator - i < 1\"\n                    id=\"{{ id + i }}-mask-shape\"\n                    fill=\"white\"\n                    [attr.points]=\"pointsArray[i]\"\n                ></polygon>\n            </mask>\n        </defs>\n        <path\n            id=\"{{ id + i }}-shape\"\n            [attr.d]=\"path\"\n            stroke-width=\"0\"\n            stroke=\"#89919A\"\n            attr.mask=\"url(#{{ id + i }}-mask)\"\n        ></path>\n        <path\n            id=\"{{ id + i }}-shape-border\"\n            [attr.d]=\"path\"\n            stroke-width=\"0.25\"\n            stroke=\"#89919A\"\n            fill=\"transparent\"\n        ></path>\n    </svg>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.0-rc.45\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-status-indicator{stroke:var(--sapNeutralElementColor);stroke-width:.25;fill:transparent;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapContent_LabelColor);color:var(--sapTextColor);display:inline-flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-status-indicator.is-focus,.fd-status-indicator:focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:var(--sapContent_FocusWidth);z-index:5}.fd-status-indicator:after,.fd-status-indicator:before{box-sizing:inherit;font-size:inherit}.fd-status-indicator--horizontal-label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-status-indicator--horizontal-label:after,.fd-status-indicator--horizontal-label:before{box-sizing:inherit;font-size:inherit}.fd-status-indicator--link{cursor:pointer}.fd-status-indicator__label,.fd-status-indicator__label--sm{font-size:var(--sapFontSmallSize, .75rem)}.fd-status-indicator__label--sm.fd-status-indicator__label--top{margin-bottom:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--right{margin-left:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--sm.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);margin-left:0;margin-right:.375rem;transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--sm.fd-status-indicator__label--left{margin-right:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--sm.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);margin-left:.375rem;margin-right:0;transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--sm.fd-status-indicator__label--bottom{margin-top:.375rem}.fd-status-indicator__label--md{font-size:var(--sapFontSize, .875rem)}.fd-status-indicator__label--md.fd-status-indicator__label--top{margin-bottom:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--right{margin-left:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--md.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);margin-left:0;margin-right:.5rem;transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--md.fd-status-indicator__label--left{margin-right:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--md.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);margin-left:.5rem;margin-right:0;transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--md.fd-status-indicator__label--bottom{margin-top:.5rem}.fd-status-indicator__label--lg{font-size:1.125rem}.fd-status-indicator__label--lg.fd-status-indicator__label--top{margin-bottom:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--right{margin-left:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--lg.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);margin-left:0;margin-right:.75rem;transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--lg.fd-status-indicator__label--left{margin-right:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--lg.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);margin-left:.75rem;margin-right:0;transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--lg.fd-status-indicator__label--bottom{margin-top:.75rem}.fd-status-indicator__label--xl{font-size:1.875rem}.fd-status-indicator__label--xl.fd-status-indicator__label--top{margin-bottom:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--right{margin-left:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--xl.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);margin-left:0;margin-right:1rem;transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--xl.fd-status-indicator__label--left{margin-right:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--xl.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);margin-left:1rem;margin-right:0;transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--xl.fd-status-indicator__label--bottom{margin-top:1rem}.fd-status-indicator--positive{fill:var(--sapPositiveElementColor);color:var(--sapPositiveElementColor)}.fd-status-indicator--critical{fill:var(--sapCriticalElementColor);color:var(--sapCriticalElementColor)}.fd-status-indicator--negative{fill:var(--sapNegativeElementColor);color:var(--sapNegativeElementColor)}.fd-status-indicator--sm .fd-status-indicator__svg{height:1.375rem;width:1.875rem}.fd-status-indicator--md .fd-status-indicator__svg{height:1.875rem;width:2.8125rem}.fd-status-indicator--lg .fd-status-indicator__svg{height:3.4375rem;width:5rem}.fd-status-indicator--xl .fd-status-indicator__svg{height:6.25rem;width:9.0625rem}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n    *ngIf=\"labelPosition === 'left' || labelPosition === 'top'\"\n    [class.fd-status-indicator__label--sm]=\"labelSize === 'sm'\"\n    [class.fd-status-indicator__label--md]=\"labelSize === 'md'\"\n    [class.fd-status-indicator__label--lg]=\"labelSize === 'lg'\"\n    [class.fd-status-indicator__label--xl]=\"labelSize === 'xl'\"\n    [class.fd-status-indicator__label--top]=\"labelPosition === 'top'\"\n    [class.fd-status-indicator__label--left]=\"labelPosition === 'left'\"\n    class=\"fd-status-indicator__label\"\n    >{{ statusLabel }}\n</span>\n<svg\n    [attr.id]=\"id\"\n    data-sap-ui=\"__shape0-__box21-24\"\n    version=\"1.1\"\n    [attr.viewBox]=\"viewBox\"\n    xlmns=\"http://www.w3.org/2000/svg\"\n    preserveAspectRatio=\"xMidYMid meet\"\n    class=\"fd-status-indicator__svg\"\n>\n    <ng-container [ngTemplateOutlet]=\"svgTemplate\"></ng-container>\n</svg>\n<span\n    *ngIf=\"labelPosition === 'right' || labelPosition === 'bottom'\"\n    [class.fd-status-indicator__label--sm]=\"labelSize === 'sm'\"\n    [class.fd-status-indicator__label--md]=\"labelSize === 'md'\"\n    [class.fd-status-indicator__label--lg]=\"labelSize === 'lg'\"\n    [class.fd-status-indicator__label--xl]=\"labelSize === 'xl'\"\n    [class.fd-status-indicator__label--right]=\"labelPosition === 'right'\"\n    [class.fd-status-indicator__label--bottom]=\"labelPosition === 'bottom'\"\n    class=\"fd-status-indicator__label\"\n    >{{ statusLabel }}\n</span>\n\n<ng-template #svgTemplate>\n    <svg\n        xlmns=\"http://www.w3.org/2000/svg\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        overflow=\"visible\"\n        [attr.id]=\"id + i\"\n        data-sap-ui=\"id\"\n        *ngFor=\"let path of path; let i = index\"\n    >\n        <defs>\n            <linearGradient\n                *ngIf=\"!(fillCalculator - i > 0 && fillCalculator - i < 1) || fillingType !== 'radial'\"\n                id=\"{{ id + i }}-gradient\"\n                [attr.x1]=\"x1\"\n                [attr.y1]=\"y1\"\n                [attr.x2]=\"x2\"\n                [attr.y2]=\"y2\"\n            >\n                <stop [attr.offset]=\"fillCalculator - i\" stop-color=\"white\">\n                    <animate\n                        attributeName=\"offset\"\n                        attr.values=\"0, {{ fillCalculator - i }}\"\n                        repeatCount=\"1\"\n                        dur=\"1s\"\n                        begin=\"0s\"\n                    />\n                </stop>\n                <stop [attr.offset]=\"fillCalculator - i\" stop-color=\"transparent\">\n                    <animate\n                        attributeName=\"offset\"\n                        attr.values=\"0, {{ fillCalculator - i }}\"\n                        repeatCount=\"1\"\n                        dur=\"1s\"\n                        begin=\"0s\"\n                    />\n                </stop>\n            </linearGradient>\n            <mask #maskTemplate id=\"{{ id + i }}-mask\">\n                <path\n                    *ngIf=\"!(fillCalculator - i > 0 && fillCalculator - i < 1) || fillingType !== 'radial'\"\n                    id=\"{{ id + i }}-mask-shape\"\n                    [attr.d]=\"path\"\n                    stroke-width=\"0\"\n                    stroke=\"white\"\n                    attr.fill=\"url(#{{ id + i }}-gradient)\"\n                ></path>\n                <polygon\n                    *ngIf=\"fillingType === 'radial' && fillCalculator - i > 0 && fillCalculator - i < 1\"\n                    id=\"{{ id + i }}-mask-shape\"\n                    fill=\"white\"\n                    [attr.points]=\"pointsArray[i]\"\n                ></polygon>\n            </mask>\n        </defs>\n        <path\n            id=\"{{ id + i }}-shape\"\n            [attr.d]=\"path\"\n            stroke-width=\"0\"\n            stroke=\"#89919A\"\n            attr.mask=\"url(#{{ id + i }}-mask)\"\n        ></path>\n        <path\n            id=\"{{ id + i }}-shape-border\"\n            [attr.d]=\"path\"\n            stroke-width=\"0.25\"\n            stroke=\"#89919A\"\n            fill=\"transparent\"\n        ></path>\n    </svg>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.26.4\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-status-indicator{stroke:var(--sapNeutralElementColor);stroke-width:.25;fill:transparent;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapContent_LabelColor);color:var(--sapTextColor);display:inline-flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-status-indicator.is-focus,.fd-status-indicator:focus{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:var(--sapContent_FocusWidth);z-index:5}.fd-status-indicator:after,.fd-status-indicator:before{box-sizing:inherit;font-size:inherit}.fd-status-indicator--horizontal-label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-status-indicator--horizontal-label:after,.fd-status-indicator--horizontal-label:before{box-sizing:inherit;font-size:inherit}.fd-status-indicator--link{cursor:pointer}.fd-status-indicator__label,.fd-status-indicator__label--sm{font-size:var(--sapFontSmallSize, .75rem)}.fd-status-indicator__label--sm.fd-status-indicator__label--top{margin-bottom:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--right{margin-left:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--sm.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);margin-left:0;margin-right:.375rem;transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--sm.fd-status-indicator__label--left{margin-right:.375rem}.fd-status-indicator__label--sm.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--sm.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);margin-left:.375rem;margin-right:0;transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--sm.fd-status-indicator__label--bottom{margin-top:.375rem}.fd-status-indicator__label--md{font-size:var(--sapFontSize, .875rem)}.fd-status-indicator__label--md.fd-status-indicator__label--top{margin-bottom:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--right{margin-left:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--md.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);margin-left:0;margin-right:.5rem;transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--md.fd-status-indicator__label--left{margin-right:.5rem}.fd-status-indicator__label--md.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--md.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);margin-left:.5rem;margin-right:0;transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--md.fd-status-indicator__label--bottom{margin-top:.5rem}.fd-status-indicator__label--lg{font-size:1.125rem}.fd-status-indicator__label--lg.fd-status-indicator__label--top{margin-bottom:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--right{margin-left:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--lg.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);margin-left:0;margin-right:.75rem;transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--lg.fd-status-indicator__label--left{margin-right:.75rem}.fd-status-indicator__label--lg.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--lg.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);margin-left:.75rem;margin-right:0;transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--lg.fd-status-indicator__label--bottom{margin-top:.75rem}.fd-status-indicator__label--xl{font-size:1.875rem}.fd-status-indicator__label--xl.fd-status-indicator__label--top{margin-bottom:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--right{margin-left:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--right[dir=rtl],[dir=rtl] .fd-status-indicator__label--xl.fd-status-indicator__label--right{-webkit-transform:matrix(1,0,0,1,22,1);margin-left:0;margin-right:1rem;transform:matrix(1,0,0,1,22,1)}.fd-status-indicator__label--xl.fd-status-indicator__label--left{margin-right:1rem}.fd-status-indicator__label--xl.fd-status-indicator__label--left[dir=rtl],[dir=rtl] .fd-status-indicator__label--xl.fd-status-indicator__label--left{-webkit-transform:matrix(1,0,0,1,-22,1);margin-left:1rem;margin-right:0;transform:matrix(1,0,0,1,-22,1)}.fd-status-indicator__label--xl.fd-status-indicator__label--bottom{margin-top:1rem}.fd-status-indicator--positive{fill:var(--sapPositiveElementColor);color:var(--sapPositiveElementColor)}.fd-status-indicator--critical{fill:var(--sapCriticalElementColor);color:var(--sapCriticalElementColor)}.fd-status-indicator--negative{fill:var(--sapNegativeElementColor);color:var(--sapNegativeElementColor)}.fd-status-indicator--sm .fd-status-indicator__svg{height:1.375rem;width:1.875rem}.fd-status-indicator--md .fd-status-indicator__svg{height:1.875rem;width:2.8125rem}.fd-status-indicator--lg .fd-status-indicator__svg{height:3.4375rem;width:5rem}.fd-status-indicator--xl .fd-status-indicator__svg{height:6.25rem;width:9.0625rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
                 type: Input
             }], size: [{

package/fesm2015/fundamental-ngx-core-status-indicator.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fundamental-ngx-core-status-indicator.mjs","sources":["../../../../libs/core/src/lib/status-indicator/status-indicator.component.ts","../../../../libs/core/src/lib/status-indicator/status-indicator.component.html","../../../../libs/core/src/lib/status-indicator/status-indicator.module.ts","../../../../libs/core/src/lib/status-indicator/fundamental-ngx-core-status-indicator.ts"],"sourcesContent":["import {\n Component,\n Input,\n ElementRef,\n OnChanges,\n ViewEncapsulation,\n ChangeDetectionStrategy,\n AfterViewInit,\n ChangeDetectorRef,\n OnInit\n} from '@angular/core';\nimport { applyCssClass, CssClassBuilder } from '@fundamental-ngx/core/utils';\nimport { Nullable } from '@fundamental-ngx/core/shared';\n\nexport type StatusIndicatorSize = 'sm' \| 'md' \| 'lg' \| 'xl';\nexport type StatusIndicatorColor = 'negative' \| 'critical' \| 'positive';\nexport type LablePosition = 'left' \| 'right' \| 'top' \| 'bottom';\nexport type FillingType = 'radial' \| 'angled' \| 'linearup' \| 'lineardown' \| 'linearleft';\nexport type FillingDirection = 'clockwise' \| 'counterclockwise';\n\nexport class Point {\n /** @hidden /\n constructor(public x: number, public y: number) {}\n}\n\n@Component({\n selector: 'fd-status-indicator',\n templateUrl: './status-indicator.component.html',\n styleUrls: ['./status-indicator.component.scss'],\n host: {\n '[attr.aria-label]': 'ariaLabel',\n '[attr.aria-roledescription]': 'ariaRoleDescription',\n '[attr.focusable]': 'focusable',\n '[attr.title]': 'title',\n '[attr.role]': 'role',\n '[attr.aria-valuetext]': 'ariaValueText',\n '[attr.aria-valuenow]': 'fillPercentage ? fillPercentage : 0',\n '[attr.aria-valuemin]': '0',\n '[attr.aria-valuemax]': '100',\n '[attr.tabindex]': 'focusable ? 0 : -1'\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class StatusIndicatorComponent implements OnChanges, AfterViewInit, CssClassBuilder, OnInit {\n /\n value id defines the id of the object.\n /\n @Input()\n id: string;\n\n /\n defines the size of the status indicator.\n * Can be one of the following: 'sm' \| 'md' \| 'lg' \| 'xl'\n * Default size is Medium(md).\n /\n @Input()\n size: StatusIndicatorSize = 'md';\n\n /\n The status represented by the Status Indicator.\n * Can be one of the following: 'negative' \| 'critical' \| 'informative'\n * For default Object Status omit this property\n /\n @Input()\n status: StatusIndicatorColor;\n\n /* Define the text content of the Status indicator/\n @Input()\n statusLabel: string;\n\n /\n positioning of the status indicator image withing the defined height and width .\n /\n @Input()\n viewBox: string;\n\n /\n boolean value to be marked as a clickable\n /\n @Input()\n clickable: boolean;\n\n /\n defines the size of the status indicator.\n * Can be one of the following: 'sm' \| 'md' \| 'lg' \| 'xl'\n /\n @Input()\n labelSize: StatusIndicatorSize = 'sm';\n\n /* Aria label for the Status Indicator. /\n @Input()\n ariaLabel: Nullable<string>;\n\n /* Aria defines role description for the Status Indicator. /\n @Input()\n ariaRoleDescription: Nullable<string>;\n\n /* Aria Focusable for the Status Indicator. /\n @Input()\n focusable: boolean;\n\n /* Aria Role for the Status Indicator. /\n @Input()\n role: Nullable<string>;\n\n /* Aria Value Text for the Status Indicator. /\n @Input()\n ariaValueText: Nullable<string>;\n\n /* Aria title for the status indicator. /\n @Input()\n title: Nullable<string>;\n\n /* defines the label position the value can be 'left' \| 'right' \| 'top' \| 'bottom' /\n @Input()\n labelPosition: LablePosition;\n\n /* Path for the status indicator /\n @Input()\n path: string[];\n\n /\n Offset value to be filled under the give percentatge value.\n /\n @Input()\n fillPercentage: number;\n\n /\n value to define fill direction\n /\n @Input()\n fillDirection: FillingDirection = 'clockwise';\n\n /* @hidden /\n set _fillDirection(direction: FillingDirection) {\n this.fillDirection = direction;\n }\n get _fillDirection(): FillingDirection {\n return this.fillDirection;\n }\n\n /\n FillingType to represent the fill pattern of the component\n /\n @Input()\n fillingType: FillingType = 'lineardown';\n\n /* represent the degree of angle to project the filling of the component /\n @Input()\n angle: number;\n\n /* @hidden /\n fillCalculator: number;\n /* @hidden /\n binaryString: string;\n /* @hidden /\n x1: string;\n /* @hidden /\n y1: string;\n /* @hidden /\n x2: string;\n /* @hidden /\n y2: string;\n /* @hidden /\n pointsArray: string[] = [];\n\n /* @hidden /\n constructor(private _elementRef: ElementRef<HTMLElement>, private _cd: ChangeDetectorRef) {}\n\n /* @hidden /\n class: string;\n\n /* @hidden /\n ngAfterViewInit(): void {\n this._angleCalculation();\n this._cd.detectChanges();\n }\n\n /* @hidden /\n ngOnChanges(): void {\n this._calculateFilling();\n this.buildComponentCssClass();\n }\n\n /* @hidden /\n public ngOnInit(): void {\n this.buildComponentCssClass();\n }\n\n /* @hidden\n * CssClassBuilder interface implementation\n * function must return single string\n * function is responsible for order which css classes are applied\n /\n @applyCssClass\n buildComponentCssClass(): string[] {\n return [\n 'fd-status-indicator',\n this.size ? `fd-status-indicator--${this.size}` : '',\n this.status ? `fd-status-indicator--${this.status}` : '',\n this.clickable ? `fd-status-indicator--link` : '',\n this.labelPosition === 'right' \|\| this.labelPosition === 'left'\n ? `fd-status-indicator--horizontal-label`\n : '',\n this.class\n ];\n }\n\n /* @hidden /\n elementRef(): ElementRef<any> {\n return this._elementRef;\n }\n\n /* @hidden /\n private _calculateFilling(): void {\n if (this.fillPercentage < 0 \|\| this.fillPercentage === undefined) {\n this.fillCalculator = 0;\n } else {\n this.fillCalculator = (this.fillPercentage this.path.length) / 100;\n }\n }\n\n /** @hidden /\n private _angleCalculation(): void {\n let sPointsAttributeValue: Array<Point>;\n let polygonPoints: string;\n switch (this.fillingType) {\n case 'angled':\n this.binaryString = this._convertAngleToBinary(this.angle);\n this._assignBinaryValue(this.binaryString);\n break;\n case 'radial': {\n const tempPercent = this.fillCalculator % 1;\n const fillNumber = Number(tempPercent.toFixed(2));\n const element = this._elementRef.nativeElement.querySelectorAll('svg');\n\n for (let i = 1; i < element.length; i++) {\n sPointsAttributeValue = this._getPolygonPointsForCircularFilling(\n fillNumber 100,\n element[i].getBBox()\n );\n polygonPoints = sPointsAttributeValue.reduce((acc, item) => acc + item.x + ',' + item.y + ' ', '');\n this.pointsArray.push(polygonPoints);\n }\n break;\n }\n case 'linearup':\n this.binaryString = this._convertAngleToBinary(90);\n this._assignBinaryValue(this.binaryString);\n break;\n case 'lineardown':\n this.binaryString = this._convertAngleToBinary(270);\n this._assignBinaryValue(this.binaryString);\n break;\n case 'linearleft':\n this.binaryString = this._convertAngleToBinary(180);\n this._assignBinaryValue(this.binaryString);\n break;\n default:\n throw new Error(`fdStatusIndicator: No fillType found for ${this.fillingType}.`);\n }\n }\n\n /** @hidden /\n private _convertAngleToBinary(angle: number): string {\n if (angle > 0 && angle <= 45) {\n return '1,0,0,1';\n } else if (angle >= 45 && angle < 90) {\n return '0,0,0,1';\n } else if (angle >= 90 && angle < 135) {\n return '0,0,0,1';\n } else if (angle >= 135 && angle < 180) {\n return '0,0,1,1';\n } else if (angle >= 180 && angle < 225) {\n return '0,0,1,0';\n } else if (angle >= 225 && angle < 270) {\n return '0,1,1,0';\n } else if (angle >= 270 && angle < 315) {\n return '0,1,0,0';\n } else if (angle >= 315 && angle < 360) {\n return '1,1,0,0';\n } else if (angle === 0 \|\| angle === 360) {\n return '1,0,0,0';\n } else {\n return 'invalid';\n }\n }\n\n /* @hidden /\n private _assignBinaryValue(binaryString: string): void {\n const binaryValue = binaryString.split(',');\n this.x1 = binaryValue[0];\n this.y1 = binaryValue[1];\n this.x2 = binaryValue[2];\n this.y2 = binaryValue[3];\n }\n\n /* @hidden /\n private _getPolygonPointsForCircularFilling(value: number, boundingBoxSvg: DOMRect): Array<Point> {\n const angle = 3.6 value;\n const points: Point[] = [];\n let xDifferenceFromBoundaryCentre: number;\n let yDifferenceFromBoundaryCentre: number;\n let polygonPoint: Point;\n\n // starts at 12, the algorithm computes the coordination for clockwise direction only\n // counter clockwise direction is managed by symmetry\n const oStartPoint = new Point(boundingBoxSvg.x + boundingBoxSvg.width / 2, boundingBoxSvg.y);\n const oCentrePoint = new Point(\n boundingBoxSvg.x + boundingBoxSvg.width / 2,\n boundingBoxSvg.y + boundingBoxSvg.height / 2\n );\n\n // Reflects x coordinate by centre point for Counter Clockwise type\n const _adjustIfCounterClockwise = (oPoint: Point): Point => {\n const res = Object.assign({}, oPoint);\n\n if (this._fillDirection === 'counterclockwise') {\n const iXDistanceFromCentre = oPoint.x - oCentrePoint.x;\n res.x = oCentrePoint.x - iXDistanceFromCentre;\n }\n\n return res;\n };\n\n // Boundary centre is given by angle distance from the beginning (0°). The returned difference is related\n // to x or y coordinate depending on boundary centre angle (e.g. 0° -> x, 90° -> y, 180° -> x 270° -> y).\n // Boundary length is length of the corresponding side of bounding box (width for x, height for y).\n const computeDifferenceFromBoundaryCentre = (\n inAngle: number,\n iBoundaryCentreAngle: number,\n iBoundaryLength: number\n ): number => {\n const tan = Math.tan(((iBoundaryCentreAngle - inAngle) * Math.PI) / 180);\n\n return (tan * iBoundaryLength) / 2;\n };\n\n points.push(oStartPoint);\n\n if (0 < angle && angle < 45) {\n xDifferenceFromBoundaryCentre = computeDifferenceFromBoundaryCentre(angle, 0, boundingBoxSvg.height);\n polygonPoint = new Point(oStartPoint.x - xDifferenceFromBoundaryCentre, oStartPoint.y);\n points.push(_adjustIfCounterClockwise(polygonPoint));\n }\n\n if (45 <= angle) {\n points.push(\n _adjustIfCounterClockwise(new Point(boundingBoxSvg.x + boundingBoxSvg.width, boundingBoxSvg.y))\n );\n }\n\n if (45 < angle && angle < 135) {\n yDifferenceFromBoundaryCentre = computeDifferenceFromBoundaryCentre(angle, 90, boundingBoxSvg.width);\n polygonPoint = new Point(\n boundingBoxSvg.x + boundingBoxSvg.width,\n boundingBoxSvg.y + boundingBoxSvg.height / 2 - yDifferenceFromBoundaryCentre\n );\n points.push(_adjustIfCounterClockwise(polygonPoint));\n }\n\n if (135 <= angle) {\n points.push(\n _adjustIfCounterClockwise(\n new Point(boundingBoxSvg.x + boundingBoxSvg.width, boundingBoxSvg.y + boundingBoxSvg.height)\n )\n );\n }\n\n if (135 < angle && angle < 225) {\n xDifferenceFromBoundaryCentre = computeDifferenceFromBoundaryCentre(angle, 180, boundingBoxSvg.height);\n polygonPoint = new Point(\n boundingBoxSvg.x + boundingBoxSvg.width / 2 + xDifferenceFromBoundaryCentre,\n boundingBoxSvg.y + boundingBoxSvg.height\n );\n points.push(_adjustIfCounterClockwise(polygonPoint));\n }\n\n if (225 <= angle) {\n points.push(\n _adjustIfCounterClockwise(new Point(boundingBoxSvg.x, boundingBoxSvg.y + boundingBoxSvg.height))\n );\n }\n\n if (225 < angle && angle < 315) {\n yDifferenceFromBoundaryCentre = computeDifferenceFromBoundaryCentre(angle, 270, boundingBoxSvg.width);\n polygonPoint = new Point(\n boundingBoxSvg.x,\n boundingBoxSvg.y + boundingBoxSvg.height / 2 + yDifferenceFromBoundaryCentre\n );\n points.push(_adjustIfCounterClockwise(polygonPoint));\n }\n\n if (315 <= angle) {\n points.push(_adjustIfCounterClockwise(new Point(boundingBoxSvg.x, boundingBoxSvg.y)));\n }\n\n if (315 < angle && angle <= 360) {\n xDifferenceFromBoundaryCentre = computeDifferenceFromBoundaryCentre(angle, 360, boundingBoxSvg.height);\n polygonPoint = new Point(\n boundingBoxSvg.x + boundingBoxSvg.width / 2 - xDifferenceFromBoundaryCentre,\n boundingBoxSvg.y\n );\n points.push(_adjustIfCounterClockwise(polygonPoint));\n }\n\n points.push(oCentrePoint);\n\n return points;\n }\n}\n","<span\n ngIf=\"labelPosition === 'left' \|\| labelPosition === 'top'\"\n [class.fd-status-indicator__label--sm]=\"labelSize === 'sm'\"\n [class.fd-status-indicator__label--md]=\"labelSize === 'md'\"\n [class.fd-status-indicator__label--lg]=\"labelSize === 'lg'\"\n [class.fd-status-indicator__label--xl]=\"labelSize === 'xl'\"\n [class.fd-status-indicator__label--top]=\"labelPosition === 'top'\"\n [class.fd-status-indicator__label--left]=\"labelPosition === 'left'\"\n class=\"fd-status-indicator__label\"\n >{{ statusLabel }}\n</span>\n<svg\n [attr.id]=\"id\"\n data-sap-ui=\"__shape0-__box21-24\"\n version=\"1.1\"\n [attr.viewBox]=\"viewBox\"\n xlmns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid meet\"\n class=\"fd-status-indicator__svg\"\n>\n <ng-container [ngTemplateOutlet]=\"svgTemplate\"></ng-container>\n</svg>\n<span\n ngIf=\"labelPosition === 'right' \|\| labelPosition === 'bottom'\"\n [class.fd-status-indicator__label--sm]=\"labelSize === 'sm'\"\n [class.fd-status-indicator__label--md]=\"labelSize === 'md'\"\n [class.fd-status-indicator__label--lg]=\"labelSize === 'lg'\"\n [class.fd-status-indicator__label--xl]=\"labelSize === 'xl'\"\n [class.fd-status-indicator__label--right]=\"labelPosition === 'right'\"\n [class.fd-status-indicator__label--bottom]=\"labelPosition === 'bottom'\"\n class=\"fd-status-indicator__label\"\n >{{ statusLabel }}\n</span>\n\n<ng-template #svgTemplate>\n <svg\n xlmns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid meet\"\n overflow=\"visible\"\n [attr.id]=\"id + i\"\n data-sap-ui=\"id\"\n ngFor=\"let path of path; let i = index\"\n >\n <defs>\n <linearGradient\n ngIf=\"!(fillCalculator - i > 0 && fillCalculator - i < 1) \|\| fillingType !== 'radial'\"\n id=\"{{ id + i }}-gradient\"\n [attr.x1]=\"x1\"\n [attr.y1]=\"y1\"\n [attr.x2]=\"x2\"\n [attr.y2]=\"y2\"\n >\n <stop [attr.offset]=\"fillCalculator - i\" stop-color=\"white\">\n <animate\n attributeName=\"offset\"\n attr.values=\"0, {{ fillCalculator - i }}\"\n repeatCount=\"1\"\n dur=\"1s\"\n begin=\"0s\"\n />\n </stop>\n <stop [attr.offset]=\"fillCalculator - i\" stop-color=\"transparent\">\n <animate\n attributeName=\"offset\"\n attr.values=\"0, {{ fillCalculator - i }}\"\n repeatCount=\"1\"\n dur=\"1s\"\n begin=\"0s\"\n />\n </stop>\n </linearGradient>\n <mask #maskTemplate id=\"{{ id + i }}-mask\">\n <path\n ngIf=\"!(fillCalculator - i > 0 && fillCalculator - i < 1) \|\| fillingType !== 'radial'\"\n id=\"{{ id + i }}-mask-shape\"\n [attr.d]=\"path\"\n stroke-width=\"0\"\n stroke=\"white\"\n attr.fill=\"url(#{{ id + i }}-gradient)\"\n ></path>\n <polygon\n ngIf=\"fillingType === 'radial' && fillCalculator - i > 0 && fillCalculator - i < 1\"\n id=\"{{ id + i }}-mask-shape\"\n fill=\"white\"\n [attr.points]=\"pointsArray[i]\"\n ></polygon>\n </mask>\n </defs>\n <path\n id=\"{{ id + i }}-shape\"\n [attr.d]=\"path\"\n stroke-width=\"0\"\n stroke=\"#89919A\"\n attr.mask=\"url(#{{ id + i }}-mask)\"\n ></path>\n <path\n id=\"{{ id + i }}-shape-border\"\n [attr.d]=\"path\"\n stroke-width=\"0.25\"\n stroke=\"#89919A\"\n fill=\"transparent\"\n ></path>\n </svg>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { StatusIndicatorComponent } from './status-indicator.component';\n\n@NgModule({\n declarations: [StatusIndicatorComponent],\n imports: [CommonModule],\n exports: [StatusIndicatorComponent]\n})\nexport class StatusIndicatorModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"fundamental-ngx-core-status-indicator.mjs","sources":["../../../../libs/core/src/lib/status-indicator/status-indicator.component.ts","../../../../libs/core/src/lib/status-indicator/status-indicator.component.html","../../../../libs/core/src/lib/status-indicator/status-indicator.module.ts","../../../../libs/core/src/lib/status-indicator/fundamental-ngx-core-status-indicator.ts"],"sourcesContent":["import {\n Component,\n Input,\n ElementRef,\n OnChanges,\n ViewEncapsulation,\n ChangeDetectionStrategy,\n AfterViewInit,\n ChangeDetectorRef,\n OnInit\n} from '@angular/core';\nimport { applyCssClass, CssClassBuilder } from '@fundamental-ngx/core/utils';\nimport { Nullable } from '@fundamental-ngx/core/shared';\n\nexport type StatusIndicatorSize = 'sm' \| 'md' \| 'lg' \| 'xl';\nexport type StatusIndicatorColor = 'negative' \| 'critical' \| 'positive';\nexport type LablePosition = 'left' \| 'right' \| 'top' \| 'bottom';\nexport type FillingType = 'radial' \| 'angled' \| 'linearup' \| 'lineardown' \| 'linearleft';\nexport type FillingDirection = 'clockwise' \| 'counterclockwise';\n\nexport class Point {\n /** @hidden /\n constructor(public x: number, public y: number) {}\n}\n\n@Component({\n selector: 'fd-status-indicator',\n templateUrl: './status-indicator.component.html',\n styleUrls: ['./status-indicator.component.scss'],\n host: {\n '[attr.aria-label]': 'ariaLabel',\n '[attr.aria-roledescription]': 'ariaRoleDescription',\n '[attr.focusable]': 'focusable',\n '[attr.title]': 'title',\n '[attr.role]': 'role',\n '[attr.aria-valuetext]': 'ariaValueText',\n '[attr.aria-valuenow]': 'fillPercentage ? fillPercentage : 0',\n '[attr.aria-valuemin]': '0',\n '[attr.aria-valuemax]': '100',\n '[attr.tabindex]': 'focusable ? 0 : -1'\n },\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class StatusIndicatorComponent implements OnChanges, AfterViewInit, CssClassBuilder, OnInit {\n /\n value id defines the id of the object.\n /\n @Input()\n id: string;\n\n /\n defines the size of the status indicator.\n * Can be one of the following: 'sm' \| 'md' \| 'lg' \| 'xl'\n * Default size is Medium(md).\n /\n @Input()\n size: StatusIndicatorSize = 'md';\n\n /\n The status represented by the Status Indicator.\n * Can be one of the following: 'negative' \| 'critical' \| 'informative'\n * For default Object Status omit this property\n /\n @Input()\n status: StatusIndicatorColor;\n\n /* Define the text content of the Status indicator/\n @Input()\n statusLabel: string;\n\n /\n positioning of the status indicator image withing the defined height and width .\n /\n @Input()\n viewBox: string;\n\n /\n boolean value to be marked as a clickable\n /\n @Input()\n clickable: boolean;\n\n /\n defines the size of the status indicator.\n * Can be one of the following: 'sm' \| 'md' \| 'lg' \| 'xl'\n /\n @Input()\n labelSize: StatusIndicatorSize = 'sm';\n\n /* Aria label for the Status Indicator. /\n @Input()\n ariaLabel: Nullable<string>;\n\n /* Aria defines role description for the Status Indicator. /\n @Input()\n ariaRoleDescription: Nullable<string>;\n\n /* Aria Focusable for the Status Indicator. /\n @Input()\n focusable: boolean;\n\n /* Aria Role for the Status Indicator. /\n @Input()\n role: Nullable<string>;\n\n /* Aria Value Text for the Status Indicator. /\n @Input()\n ariaValueText: Nullable<string>;\n\n /* Aria title for the status indicator. /\n @Input()\n title: Nullable<string>;\n\n /* defines the label position the value can be 'left' \| 'right' \| 'top' \| 'bottom' /\n @Input()\n labelPosition: LablePosition;\n\n /* Path for the status indicator /\n @Input()\n path: string[];\n\n /\n Offset value to be filled under the give percentatge value.\n /\n @Input()\n fillPercentage: number;\n\n /\n value to define fill direction\n /\n @Input()\n fillDirection: FillingDirection = 'clockwise';\n\n /* @hidden /\n set _fillDirection(direction: FillingDirection) {\n this.fillDirection = direction;\n }\n get _fillDirection(): FillingDirection {\n return this.fillDirection;\n }\n\n /\n FillingType to represent the fill pattern of the component\n /\n @Input()\n fillingType: FillingType = 'lineardown';\n\n /* represent the degree of angle to project the filling of the component /\n @Input()\n angle: number;\n\n /* @hidden /\n fillCalculator: number;\n /* @hidden /\n binaryString: string;\n /* @hidden /\n x1: string;\n /* @hidden /\n y1: string;\n /* @hidden /\n x2: string;\n /* @hidden /\n y2: string;\n /* @hidden /\n pointsArray: string[] = [];\n\n /* @hidden /\n constructor(private _elementRef: ElementRef<HTMLElement>, private _cd: ChangeDetectorRef) {}\n\n /* @hidden /\n class: string;\n\n /* @hidden /\n ngAfterViewInit(): void {\n this._angleCalculation();\n this._cd.detectChanges();\n }\n\n /* @hidden /\n ngOnChanges(): void {\n this._calculateFilling();\n this.buildComponentCssClass();\n }\n\n /* @hidden /\n public ngOnInit(): void {\n this.buildComponentCssClass();\n }\n\n /* @hidden\n * CssClassBuilder interface implementation\n * function must return single string\n * function is responsible for order which css classes are applied\n /\n @applyCssClass\n buildComponentCssClass(): string[] {\n return [\n 'fd-status-indicator',\n this.size ? `fd-status-indicator--${this.size}` : '',\n this.status ? `fd-status-indicator--${this.status}` : '',\n this.clickable ? `fd-status-indicator--link` : '',\n this.labelPosition === 'right' \|\| this.labelPosition === 'left'\n ? `fd-status-indicator--horizontal-label`\n : '',\n this.class\n ];\n }\n\n /* @hidden /\n elementRef(): ElementRef<any> {\n return this._elementRef;\n }\n\n /* @hidden /\n private _calculateFilling(): void {\n if (this.fillPercentage < 0 \|\| this.fillPercentage === undefined) {\n this.fillCalculator = 0;\n } else {\n this.fillCalculator = (this.fillPercentage this.path.length) / 100;\n }\n }\n\n /** @hidden /\n private _angleCalculation(): void {\n let sPointsAttributeValue: Array<Point>;\n let polygonPoints: string;\n switch (this.fillingType) {\n case 'angled':\n this.binaryString = this._convertAngleToBinary(this.angle);\n this._assignBinaryValue(this.binaryString);\n break;\n case 'radial': {\n const tempPercent = this.fillCalculator % 1;\n const fillNumber = Number(tempPercent.toFixed(2));\n const element = this._elementRef.nativeElement.querySelectorAll('svg');\n\n for (let i = 1; i < element.length; i++) {\n sPointsAttributeValue = this._getPolygonPointsForCircularFilling(\n fillNumber 100,\n element[i].getBBox()\n );\n polygonPoints = sPointsAttributeValue.reduce((acc, item) => acc + item.x + ',' + item.y + ' ', '');\n this.pointsArray.push(polygonPoints);\n }\n break;\n }\n case 'linearup':\n this.binaryString = this._convertAngleToBinary(90);\n this._assignBinaryValue(this.binaryString);\n break;\n case 'lineardown':\n this.binaryString = this._convertAngleToBinary(270);\n this._assignBinaryValue(this.binaryString);\n break;\n case 'linearleft':\n this.binaryString = this._convertAngleToBinary(180);\n this._assignBinaryValue(this.binaryString);\n break;\n default:\n throw new Error(`fdStatusIndicator: No fillType found for ${this.fillingType}.`);\n }\n }\n\n /** @hidden /\n private _convertAngleToBinary(angle: number): string {\n if (angle > 0 && angle <= 45) {\n return '1,0,0,1';\n } else if (angle >= 45 && angle < 90) {\n return '0,0,0,1';\n } else if (angle >= 90 && angle < 135) {\n return '0,0,0,1';\n } else if (angle >= 135 && angle < 180) {\n return '0,0,1,1';\n } else if (angle >= 180 && angle < 225) {\n return '0,0,1,0';\n } else if (angle >= 225 && angle < 270) {\n return '0,1,1,0';\n } else if (angle >= 270 && angle < 315) {\n return '0,1,0,0';\n } else if (angle >= 315 && angle < 360) {\n return '1,1,0,0';\n } else if (angle === 0 \|\| angle === 360) {\n return '1,0,0,0';\n } else {\n return 'invalid';\n }\n }\n\n /* @hidden /\n private _assignBinaryValue(binaryString: string): void {\n const binaryValue = binaryString.split(',');\n this.x1 = binaryValue[0];\n this.y1 = binaryValue[1];\n this.x2 = binaryValue[2];\n this.y2 = binaryValue[3];\n }\n\n /* @hidden /\n private _getPolygonPointsForCircularFilling(value: number, boundingBoxSvg: DOMRect): Array<Point> {\n const angle = 3.6 value;\n const points: Point[] = [];\n let xDifferenceFromBoundaryCentre: number;\n let yDifferenceFromBoundaryCentre: number;\n let polygonPoint: Point;\n\n // starts at 12, the algorithm computes the coordination for clockwise direction only\n // counter clockwise direction is managed by symmetry\n const oStartPoint = new Point(boundingBoxSvg.x + boundingBoxSvg.width / 2, boundingBoxSvg.y);\n const oCentrePoint = new Point(\n boundingBoxSvg.x + boundingBoxSvg.width / 2,\n boundingBoxSvg.y + boundingBoxSvg.height / 2\n );\n\n // Reflects x coordinate by centre point for Counter Clockwise type\n const _adjustIfCounterClockwise = (oPoint: Point): Point => {\n const res = Object.assign({}, oPoint);\n\n if (this._fillDirection === 'counterclockwise') {\n const iXDistanceFromCentre = oPoint.x - oCentrePoint.x;\n res.x = oCentrePoint.x - iXDistanceFromCentre;\n }\n\n return res;\n };\n\n // Boundary centre is given by angle distance from the beginning (0°). The returned difference is related\n // to x or y coordinate depending on boundary centre angle (e.g. 0° -> x, 90° -> y, 180° -> x 270° -> y).\n // Boundary length is length of the corresponding side of bounding box (width for x, height for y).\n const computeDifferenceFromBoundaryCentre = (\n inAngle: number,\n iBoundaryCentreAngle: number,\n iBoundaryLength: number\n ): number => {\n const tan = Math.tan(((iBoundaryCentreAngle - inAngle) * Math.PI) / 180);\n\n return (tan * iBoundaryLength) / 2;\n };\n\n points.push(oStartPoint);\n\n if (0 < angle && angle < 45) {\n xDifferenceFromBoundaryCentre = computeDifferenceFromBoundaryCentre(angle, 0, boundingBoxSvg.height);\n polygonPoint = new Point(oStartPoint.x - xDifferenceFromBoundaryCentre, oStartPoint.y);\n points.push(_adjustIfCounterClockwise(polygonPoint));\n }\n\n if (45 <= angle) {\n points.push(\n _adjustIfCounterClockwise(new Point(boundingBoxSvg.x + boundingBoxSvg.width, boundingBoxSvg.y))\n );\n }\n\n if (45 < angle && angle < 135) {\n yDifferenceFromBoundaryCentre = computeDifferenceFromBoundaryCentre(angle, 90, boundingBoxSvg.width);\n polygonPoint = new Point(\n boundingBoxSvg.x + boundingBoxSvg.width,\n boundingBoxSvg.y + boundingBoxSvg.height / 2 - yDifferenceFromBoundaryCentre\n );\n points.push(_adjustIfCounterClockwise(polygonPoint));\n }\n\n if (135 <= angle) {\n points.push(\n _adjustIfCounterClockwise(\n new Point(boundingBoxSvg.x + boundingBoxSvg.width, boundingBoxSvg.y + boundingBoxSvg.height)\n )\n );\n }\n\n if (135 < angle && angle < 225) {\n xDifferenceFromBoundaryCentre = computeDifferenceFromBoundaryCentre(angle, 180, boundingBoxSvg.height);\n polygonPoint = new Point(\n boundingBoxSvg.x + boundingBoxSvg.width / 2 + xDifferenceFromBoundaryCentre,\n boundingBoxSvg.y + boundingBoxSvg.height\n );\n points.push(_adjustIfCounterClockwise(polygonPoint));\n }\n\n if (225 <= angle) {\n points.push(\n _adjustIfCounterClockwise(new Point(boundingBoxSvg.x, boundingBoxSvg.y + boundingBoxSvg.height))\n );\n }\n\n if (225 < angle && angle < 315) {\n yDifferenceFromBoundaryCentre = computeDifferenceFromBoundaryCentre(angle, 270, boundingBoxSvg.width);\n polygonPoint = new Point(\n boundingBoxSvg.x,\n boundingBoxSvg.y + boundingBoxSvg.height / 2 + yDifferenceFromBoundaryCentre\n );\n points.push(_adjustIfCounterClockwise(polygonPoint));\n }\n\n if (315 <= angle) {\n points.push(_adjustIfCounterClockwise(new Point(boundingBoxSvg.x, boundingBoxSvg.y)));\n }\n\n if (315 < angle && angle <= 360) {\n xDifferenceFromBoundaryCentre = computeDifferenceFromBoundaryCentre(angle, 360, boundingBoxSvg.height);\n polygonPoint = new Point(\n boundingBoxSvg.x + boundingBoxSvg.width / 2 - xDifferenceFromBoundaryCentre,\n boundingBoxSvg.y\n );\n points.push(_adjustIfCounterClockwise(polygonPoint));\n }\n\n points.push(oCentrePoint);\n\n return points;\n }\n}\n","<span\n ngIf=\"labelPosition === 'left' \|\| labelPosition === 'top'\"\n [class.fd-status-indicator__label--sm]=\"labelSize === 'sm'\"\n [class.fd-status-indicator__label--md]=\"labelSize === 'md'\"\n [class.fd-status-indicator__label--lg]=\"labelSize === 'lg'\"\n [class.fd-status-indicator__label--xl]=\"labelSize === 'xl'\"\n [class.fd-status-indicator__label--top]=\"labelPosition === 'top'\"\n [class.fd-status-indicator__label--left]=\"labelPosition === 'left'\"\n class=\"fd-status-indicator__label\"\n >{{ statusLabel }}\n</span>\n<svg\n [attr.id]=\"id\"\n data-sap-ui=\"__shape0-__box21-24\"\n version=\"1.1\"\n [attr.viewBox]=\"viewBox\"\n xlmns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid meet\"\n class=\"fd-status-indicator__svg\"\n>\n <ng-container [ngTemplateOutlet]=\"svgTemplate\"></ng-container>\n</svg>\n<span\n ngIf=\"labelPosition === 'right' \|\| labelPosition === 'bottom'\"\n [class.fd-status-indicator__label--sm]=\"labelSize === 'sm'\"\n [class.fd-status-indicator__label--md]=\"labelSize === 'md'\"\n [class.fd-status-indicator__label--lg]=\"labelSize === 'lg'\"\n [class.fd-status-indicator__label--xl]=\"labelSize === 'xl'\"\n [class.fd-status-indicator__label--right]=\"labelPosition === 'right'\"\n [class.fd-status-indicator__label--bottom]=\"labelPosition === 'bottom'\"\n class=\"fd-status-indicator__label\"\n >{{ statusLabel }}\n</span>\n\n<ng-template #svgTemplate>\n <svg\n xlmns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid meet\"\n overflow=\"visible\"\n [attr.id]=\"id + i\"\n data-sap-ui=\"id\"\n ngFor=\"let path of path; let i = index\"\n >\n <defs>\n <linearGradient\n ngIf=\"!(fillCalculator - i > 0 && fillCalculator - i < 1) \|\| fillingType !== 'radial'\"\n id=\"{{ id + i }}-gradient\"\n [attr.x1]=\"x1\"\n [attr.y1]=\"y1\"\n [attr.x2]=\"x2\"\n [attr.y2]=\"y2\"\n >\n <stop [attr.offset]=\"fillCalculator - i\" stop-color=\"white\">\n <animate\n attributeName=\"offset\"\n attr.values=\"0, {{ fillCalculator - i }}\"\n repeatCount=\"1\"\n dur=\"1s\"\n begin=\"0s\"\n />\n </stop>\n <stop [attr.offset]=\"fillCalculator - i\" stop-color=\"transparent\">\n <animate\n attributeName=\"offset\"\n attr.values=\"0, {{ fillCalculator - i }}\"\n repeatCount=\"1\"\n dur=\"1s\"\n begin=\"0s\"\n />\n </stop>\n </linearGradient>\n <mask #maskTemplate id=\"{{ id + i }}-mask\">\n <path\n ngIf=\"!(fillCalculator - i > 0 && fillCalculator - i < 1) \|\| fillingType !== 'radial'\"\n id=\"{{ id + i }}-mask-shape\"\n [attr.d]=\"path\"\n stroke-width=\"0\"\n stroke=\"white\"\n attr.fill=\"url(#{{ id + i }}-gradient)\"\n ></path>\n <polygon\n ngIf=\"fillingType === 'radial' && fillCalculator - i > 0 && fillCalculator - i < 1\"\n id=\"{{ id + i }}-mask-shape\"\n fill=\"white\"\n [attr.points]=\"pointsArray[i]\"\n ></polygon>\n </mask>\n </defs>\n <path\n id=\"{{ id + i }}-shape\"\n [attr.d]=\"path\"\n stroke-width=\"0\"\n stroke=\"#89919A\"\n attr.mask=\"url(#{{ id + i }}-mask)\"\n ></path>\n <path\n id=\"{{ id + i }}-shape-border\"\n [attr.d]=\"path\"\n stroke-width=\"0.25\"\n stroke=\"#89919A\"\n fill=\"transparent\"\n ></path>\n </svg>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { StatusIndicatorComponent } from './status-indicator.component';\n\n@NgModule({\n declarations: [StatusIndicatorComponent],\n imports: [CommonModule],\n exports: [StatusIndicatorComponent]\n})\nexport class StatusIndicatorModule {}\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-step-input.mjs CHANGED Viewed

@@ -403,7 +403,7 @@ StepInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
         },
         contentDensityObserverProviders(),
         registerFormItemControl(StepInputComponent)
-    ], viewQueries: [{ propertyName: "incrementButton", first: true, predicate: ["incrementBtn"], descendants: true, read: ElementRef }, { propertyName: "decrementButton", first: true, predicate: ["decrementBtn"], descendants: true, read: ElementRef }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<fd-form-input-message-group>\n    <div\n        class=\"fd-step-input\"\n        [class]=\"state ? 'is-' + state : ''\"\n        [class.is-focus]=\"focused\"\n        [class.is-readonly]=\"readonly\"\n        [class.is-disabled]=\"disabled\"\n        [class.fd-step-input--compact]=\"_contentDensityObserver.isCompact\"\n        [class.fd-step-input--without-buttons]=\"!hasStepButtons\"\n    >\n        <button\n            *ngIf=\"hasStepButtons\"\n            fd-button\n            #decrementBtn\n            fdType=\"transparent\"\n            class=\"fd-step-input__button\"\n            tabindex=\"-1\"\n            type=\"button\"\n            [disabled]=\"!canDecrement\"\n            [title]=\"decrementButtonTitle || ('coreStepInput.decrementButtonTitle' | fdTranslate)\"\n            [glyph]=\"decrementButtonIcon\"\n            (blur)=\"onTouched()\"\n            [attr.aria-label]=\"decrementButtonTitle || ('coreStepInput.decrementButtonTitle' | fdTranslate)\"\n            [attr.aria-controls]=\"inputId\"\n        ></button>\n        <input\n            #inputElement\n            [name]=\"name\"\n            [id]=\"inputId\"\n            [title]=\"inputTitle\"\n            [disabled]=\"disabled\"\n            [readOnly]=\"readonly\"\n            [placeholder]=\"placeholder\"\n            [class.fd-input--compact]=\"_contentDensityObserver.isCompact\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-valuenow]=\"value\"\n            [attr.aria-valuemax]=\"max\"\n            [attr.aria-valuemin]=\"min\"\n            [attr.aria-describedby]=\"canDisplayLabel ? inputId + '__description' : ''\"\n            [attr.aria-required]=\"required\"\n            [attr.aria-roledescription]=\"ariaRoleDescription || ('coreStepInput.ariaRoleDescription' | fdTranslate)\"\n            (focusin)=\"handleFocusIn()\"\n            (wheel)=\"handleScroll($event)\"\n            (keydown)=\"handleKeyDown($event)\"\n            (input)=\"trackInputValue($event)\"\n            (change)=\"updateOnInputChanged()\"\n            [style.textAlign]=\"textAlign\"\n            class=\"fd-input fd-input--no-number-spinner fd-step-input__input\"\n            type=\"text\"\n            inputmode=\"numeric\"\n        />\n        <button\n            *ngIf=\"hasStepButtons\"\n            fd-button\n            #incrementBtn\n            fdType=\"transparent\"\n            class=\"fd-step-input__button\"\n            tabindex=\"-1\"\n            type=\"button\"\n            [disabled]=\"!canIncrement\"\n            [title]=\"incrementButtonTitle || ('coreStepInput.incrementButtonTitle' | fdTranslate)\"\n            [glyph]=\"incrementButtonIcon\"\n            (blur)=\"onTouched()\"\n            [attr.aria-label]=\"incrementButtonTitle || ('coreStepInput.incrementButtonTitle' | fdTranslate)\"\n            [attr.aria-controls]=\"inputId\"\n        ></button>\n    </div>\n\n    <fd-form-message *ngIf=\"!!stateMessage\" [type]=\"state\" [innerHTML]=\"stateMessage\"></fd-form-message>\n</fd-form-input-message-group>\n\n<span *ngIf=\"canDisplayLabel\" [id]=\"inputId + '__description'\" class=\"fd-form-label fd-form-label--unit-description\">\n    {{ unit || currencySign }}\n</span>\n", styles: [".fd-input{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-webkit-appearance:none;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;line-height:var(--sapContent_LineHeight);margin:.25rem 0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;padding:0 .625rem;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-input:after,.fd-input:before{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-input[dir=rtl]::placeholder,[dir=rtl] .fd-input::placeholder{text-indent:.125rem}.fd-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-input::-ms-clear{display:none}.fd-input.is-hover,.fd-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input.is-focus,.fd-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-input[type=search]::-webkit-search-cancel-button,.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-results-button,.fd-input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.fd-input[aria-expanded=false]{z-index:0}.fd-input.is-expanded,.fd-input[aria-expanded=true]{z-index:4}.fd-input:last-child{margin-bottom:.25rem}.fd-input--compact{box-sizing:border-box;height:1.625rem;margin:.1875rem 0;min-height:1.625rem;min-width:2rem;padding:0 .5rem}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-inner-spin-button,.fd-input--no-number-spinner::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-input.right-align{text-align:right}.fd-input.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input.is-success.is-hover,.fd-input.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input.is-success.is-focus,.fd-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-input.is-success.is-focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success:focus:hover{box-shadow:none}.fd-input.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input.is-error.is-hover,.fd-input.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input.is-error.is-focus,.fd-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-input.is-error.is-focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error:focus:hover{box-shadow:none}.fd-input.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-warning.is-hover,.fd-input.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-warning.is-focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning:focus:hover{box-shadow:none}.fd-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-alert.is-hover,.fd-input.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-alert.is-focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert:focus:hover{box-shadow:none}.fd-input.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input.is-information.is-hover,.fd-input.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input.is-information.is-focus,.fd-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-input.is-information.is-focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information:focus:hover{box-shadow:none}.fd-input.is-alert,.fd-input.is-error,.fd-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert::placeholder,.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus,.fd-input.is-error.is-focus,.fd-input.is-error:focus,.fd-input.is-information.is-focus,.fd-input.is-information:focus,.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input.is-disabled,.fd-input:disabled,.fd-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder,.fd-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly,.fd-input[aria-readonly=true],.fd-input[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events:none}.fd-input.is-readonly::placeholder,.fd-input[aria-readonly=true]::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly.is-hover,.fd-input.is-readonly:hover,.fd-input[aria-readonly=true].is-hover,.fd-input[aria-readonly=true]:hover,.fd-input[readonly].is-hover,.fd-input[readonly]:hover{box-shadow:none}.fd-input.is-readonly.is-focus,.fd-input.is-readonly:focus,.fd-input[aria-readonly=true].is-focus,.fd-input[aria-readonly=true]:focus,.fd-input[readonly].is-focus,.fd-input[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}/*!\n * Fundamental Library Styles v0.26.0-rc.45\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-step-input{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;line-height:var(--sapContent_LineHeight);margin:.25rem 0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;padding:0;position:relative;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;width:auto;z-index:1}.fd-step-input:after,.fd-step-input:before{box-sizing:inherit;font-size:inherit}.fd-step-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-step-input[dir=rtl]::placeholder,[dir=rtl] .fd-step-input::placeholder{text-indent:.125rem}.fd-step-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-step-input::-ms-clear{display:none}.fd-step-input.is-hover,.fd-step-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-step-input.is-focus,.fd-step-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-step-input:focus-within{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset_Focus_Within);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-step-input.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-step-input.is-success.is-hover,.fd-step-input.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-step-input.is-success.is-focus,.fd-step-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-step-input.is-success.is-focus.is-hover,.fd-step-input.is-success.is-focus:hover,.fd-step-input.is-success:focus.is-hover,.fd-step-input.is-success:focus:hover{box-shadow:none}.fd-step-input.is-success:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-step-input.is-success:focus-within.is-hover,.fd-step-input.is-success:focus-within:hover{box-shadow:none}.fd-step-input.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-step-input.is-error.is-hover,.fd-step-input.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-step-input.is-error.is-focus,.fd-step-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-step-input.is-error.is-focus.is-hover,.fd-step-input.is-error.is-focus:hover,.fd-step-input.is-error:focus.is-hover,.fd-step-input.is-error:focus:hover{box-shadow:none}.fd-step-input.is-error:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-step-input.is-error:focus-within.is-hover,.fd-step-input.is-error:focus-within:hover{box-shadow:none}.fd-step-input.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-step-input.is-warning.is-hover,.fd-step-input.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-step-input.is-warning.is-focus,.fd-step-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-step-input.is-warning.is-focus.is-hover,.fd-step-input.is-warning.is-focus:hover,.fd-step-input.is-warning:focus.is-hover,.fd-step-input.is-warning:focus:hover{box-shadow:none}.fd-step-input.is-warning:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-warning:focus-within.is-hover,.fd-step-input.is-warning:focus-within:hover{box-shadow:none}.fd-step-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-step-input.is-alert.is-hover,.fd-step-input.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-step-input.is-alert.is-focus,.fd-step-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-step-input.is-alert.is-focus.is-hover,.fd-step-input.is-alert.is-focus:hover,.fd-step-input.is-alert:focus.is-hover,.fd-step-input.is-alert:focus:hover{box-shadow:none}.fd-step-input.is-alert:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-alert:focus-within.is-hover,.fd-step-input.is-alert:focus-within:hover{box-shadow:none}.fd-step-input.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-step-input.is-information.is-hover,.fd-step-input.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-step-input.is-information.is-focus,.fd-step-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-step-input.is-information.is-focus.is-hover,.fd-step-input.is-information.is-focus:hover,.fd-step-input.is-information:focus.is-hover,.fd-step-input.is-information:focus:hover{box-shadow:none}.fd-step-input.is-information:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-step-input.is-information:focus-within.is-hover,.fd-step-input.is-information:focus-within:hover{box-shadow:none}.fd-step-input.is-alert,.fd-step-input.is-error,.fd-step-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-step-input.is-alert::placeholder,.fd-step-input.is-error::placeholder,.fd-step-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-step-input.is-alert.is-focus,.fd-step-input.is-alert:focus,.fd-step-input.is-error.is-focus,.fd-step-input.is-error:focus,.fd-step-input.is-information.is-focus,.fd-step-input.is-information:focus,.fd-step-input.is-warning.is-focus,.fd-step-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-step-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-step-input.is-disabled,.fd-step-input:disabled,.fd-step-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-step-input.is-disabled::placeholder,.fd-step-input:disabled::placeholder,.fd-step-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-step-input.is-readonly,.fd-step-input[aria-readonly=true],.fd-step-input[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events:none}.fd-step-input.is-readonly::placeholder,.fd-step-input[aria-readonly=true]::placeholder,.fd-step-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-step-input.is-readonly.is-hover,.fd-step-input.is-readonly:hover,.fd-step-input[aria-readonly=true].is-hover,.fd-step-input[aria-readonly=true]:hover,.fd-step-input[readonly].is-hover,.fd-step-input[readonly]:hover{box-shadow:none}.fd-step-input.is-readonly.is-focus,.fd-step-input.is-readonly:focus,.fd-step-input[aria-readonly=true].is-focus,.fd-step-input[aria-readonly=true]:focus,.fd-step-input[readonly].is-focus,.fd-step-input[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}.fd-step-input .fd-step-input__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-step-input .fd-step-input__button[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-step-input .fd-step-input__button:before{display:none!important}.fd-step-input .fd-step-input__button.is-hover,.fd-step-input .fd-step-input__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-step-input .fd-step-input__button.is-hover[dir=rtl],.fd-step-input .fd-step-input__button:hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button.is-hover,[dir=rtl] .fd-step-input .fd-step-input__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__button.is-active,.fd-step-input .fd-step-input__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-step-input .fd-step-input__button.is-active[dir=rtl],.fd-step-input .fd-step-input__button:active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button.is-active,[dir=rtl] .fd-step-input .fd-step-input__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input.is-success .fd-step-input__button.is-active,.fd-step-input.is-success .fd-step-input__button.is-hover,.fd-step-input.is-success .fd-step-input__button:active,.fd-step-input.is-success .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-step-input.is-success .fd-step-input__button.is-active,.fd-step-input.is-success .fd-step-input__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-step-input.is-error .fd-step-input__button.is-active,.fd-step-input.is-error .fd-step-input__button.is-hover,.fd-step-input.is-error .fd-step-input__button:active,.fd-step-input.is-error .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-step-input.is-error .fd-step-input__button.is-active,.fd-step-input.is-error .fd-step-input__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-step-input.is-warning .fd-step-input__button.is-active,.fd-step-input.is-warning .fd-step-input__button.is-hover,.fd-step-input.is-warning .fd-step-input__button:active,.fd-step-input.is-warning .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-step-input.is-warning .fd-step-input__button.is-active,.fd-step-input.is-warning .fd-step-input__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-alert .fd-step-input__button.is-active,.fd-step-input.is-alert .fd-step-input__button.is-hover,.fd-step-input.is-alert .fd-step-input__button:active,.fd-step-input.is-alert .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-step-input.is-alert .fd-step-input__button.is-active,.fd-step-input.is-alert .fd-step-input__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-information .fd-step-input__button.is-active,.fd-step-input.is-information .fd-step-input__button.is-hover,.fd-step-input.is-information .fd-step-input__button:active,.fd-step-input.is-information .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-step-input.is-information .fd-step-input__button.is-active,.fd-step-input.is-information .fd-step-input__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-step-input__button.fd-button{min-width:2.125rem;width:2.125rem}.fd-step-input__button.fd-button:after,.fd-step-input__button.fd-button:before{font-size:.875rem;margin:0}.fd-step-input__button.fd-button.is-focus,.fd-step-input__button.fd-button:focus{outline:none;z-index:5}.fd-step-input__button.fd-button.is-focus.is-hover,.fd-step-input__button.fd-button.is-focus:hover,.fd-step-input__button.fd-button:focus.is-hover,.fd-step-input__button.fd-button:focus:hover{z-index:auto}.fd-step-input__button.fd-button--compact{min-width:1.5rem;width:1.5rem}.fd-step-input__input.fd-input{background:none;background-color:transparent;border:none;margin:0;padding:0 .25rem;text-align:right}.fd-step-input__input.fd-input[dir=rtl],[dir=rtl] .fd-step-input__input.fd-input{text-align:left}.fd-step-input__input.fd-input.is-focus,.fd-step-input__input.fd-input.is-hover,.fd-step-input__input.fd-input:focus,.fd-step-input__input.fd-input:hover{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none}.fd-step-input__input.fd-input.is-focus,.fd-step-input__input.fd-input:focus{outline:none;z-index:5}.fd-step-input__input.fd-input--compact{height:100%}.fd-step-input__container{align-items:center;display:flex}.fd-step-input.is-error .fd-step-input__button.fd-button,.fd-step-input.is-information .fd-step-input__button.fd-button,.fd-step-input.is-warning .fd-step-input__button.fd-button{min-width:2rem;width:2rem}.fd-step-input--compact{height:1.625rem;min-height:1.625rem}.fd-step-input--compact.is-error .fd-step-input__button.fd-button,.fd-step-input--compact.is-information .fd-step-input__button.fd-button,.fd-step-input--compact.is-warning .fd-step-input__button.fd-button{min-width:1.375rem;width:1.375rem}.fd-step-input.is-readonly .fd-step-input__button.fd-button{display:none}.fd-step-input.is-readonly:focus-within{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}.fd-step-input.is-readonly:focus-within .fd-step-input__input{background:transparent}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-input.fd-step-input__input.is-hover,.fd-input.fd-step-input__input:hover{z-index:auto}.fd-step-input--without-buttons>.fd-input{margin-bottom:0}.fd-step-input__container{display:flex;align-items:center}.fd-step-input__container .fd-form-label{align-self:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i5.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "pipe", type: i6.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "incrementButton", first: true, predicate: ["incrementBtn"], descendants: true, read: ElementRef }, { propertyName: "decrementButton", first: true, predicate: ["decrementBtn"], descendants: true, read: ElementRef }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<fd-form-input-message-group>\n    <div\n        class=\"fd-step-input\"\n        [class]=\"state ? 'is-' + state : ''\"\n        [class.is-focus]=\"focused\"\n        [class.is-readonly]=\"readonly\"\n        [class.is-disabled]=\"disabled\"\n        [class.fd-step-input--compact]=\"_contentDensityObserver.isCompact\"\n        [class.fd-step-input--without-buttons]=\"!hasStepButtons\"\n    >\n        <button\n            *ngIf=\"hasStepButtons\"\n            fd-button\n            #decrementBtn\n            fdType=\"transparent\"\n            class=\"fd-step-input__button\"\n            tabindex=\"-1\"\n            type=\"button\"\n            [disabled]=\"!canDecrement\"\n            [title]=\"decrementButtonTitle || ('coreStepInput.decrementButtonTitle' | fdTranslate)\"\n            [glyph]=\"decrementButtonIcon\"\n            (blur)=\"onTouched()\"\n            [attr.aria-label]=\"decrementButtonTitle || ('coreStepInput.decrementButtonTitle' | fdTranslate)\"\n            [attr.aria-controls]=\"inputId\"\n        ></button>\n        <input\n            #inputElement\n            [name]=\"name\"\n            [id]=\"inputId\"\n            [title]=\"inputTitle\"\n            [disabled]=\"disabled\"\n            [readOnly]=\"readonly\"\n            [placeholder]=\"placeholder\"\n            [class.fd-input--compact]=\"_contentDensityObserver.isCompact\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-valuenow]=\"value\"\n            [attr.aria-valuemax]=\"max\"\n            [attr.aria-valuemin]=\"min\"\n            [attr.aria-describedby]=\"canDisplayLabel ? inputId + '__description' : ''\"\n            [attr.aria-required]=\"required\"\n            [attr.aria-roledescription]=\"ariaRoleDescription || ('coreStepInput.ariaRoleDescription' | fdTranslate)\"\n            (focusin)=\"handleFocusIn()\"\n            (wheel)=\"handleScroll($event)\"\n            (keydown)=\"handleKeyDown($event)\"\n            (input)=\"trackInputValue($event)\"\n            (change)=\"updateOnInputChanged()\"\n            [style.textAlign]=\"textAlign\"\n            class=\"fd-input fd-input--no-number-spinner fd-step-input__input\"\n            type=\"text\"\n            inputmode=\"numeric\"\n        />\n        <button\n            *ngIf=\"hasStepButtons\"\n            fd-button\n            #incrementBtn\n            fdType=\"transparent\"\n            class=\"fd-step-input__button\"\n            tabindex=\"-1\"\n            type=\"button\"\n            [disabled]=\"!canIncrement\"\n            [title]=\"incrementButtonTitle || ('coreStepInput.incrementButtonTitle' | fdTranslate)\"\n            [glyph]=\"incrementButtonIcon\"\n            (blur)=\"onTouched()\"\n            [attr.aria-label]=\"incrementButtonTitle || ('coreStepInput.incrementButtonTitle' | fdTranslate)\"\n            [attr.aria-controls]=\"inputId\"\n        ></button>\n    </div>\n\n    <fd-form-message *ngIf=\"!!stateMessage\" [type]=\"state\" [innerHTML]=\"stateMessage\"></fd-form-message>\n</fd-form-input-message-group>\n\n<span *ngIf=\"canDisplayLabel\" [id]=\"inputId + '__description'\" class=\"fd-form-label fd-form-label--unit-description\">\n    {{ unit || currencySign }}\n</span>\n", styles: [".fd-input{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-webkit-appearance:none;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;line-height:var(--sapContent_LineHeight);margin:.25rem 0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;padding:0 .625rem;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-input:after,.fd-input:before{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-input[dir=rtl]::placeholder,[dir=rtl] .fd-input::placeholder{text-indent:.125rem}.fd-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-input::-ms-clear{display:none}.fd-input.is-hover,.fd-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input.is-focus,.fd-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-input[type=search]::-webkit-search-cancel-button,.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-results-button,.fd-input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.fd-input[aria-expanded=false]{z-index:0}.fd-input.is-expanded,.fd-input[aria-expanded=true]{z-index:4}.fd-input:last-child{margin-bottom:.25rem}.fd-input--compact{box-sizing:border-box;height:1.625rem;margin:.1875rem 0;min-height:1.625rem;min-width:2rem;padding:0 .5rem}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-inner-spin-button,.fd-input--no-number-spinner::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-input.right-align{text-align:right}.fd-input.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input.is-success.is-hover,.fd-input.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input.is-success.is-focus,.fd-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-input.is-success.is-focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success:focus:hover{box-shadow:none}.fd-input.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input.is-error.is-hover,.fd-input.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input.is-error.is-focus,.fd-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-input.is-error.is-focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error:focus:hover{box-shadow:none}.fd-input.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-warning.is-hover,.fd-input.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-warning.is-focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning:focus:hover{box-shadow:none}.fd-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-alert.is-hover,.fd-input.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-alert.is-focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert:focus:hover{box-shadow:none}.fd-input.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input.is-information.is-hover,.fd-input.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input.is-information.is-focus,.fd-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-input.is-information.is-focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information:focus:hover{box-shadow:none}.fd-input.is-alert,.fd-input.is-error,.fd-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert::placeholder,.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus,.fd-input.is-error.is-focus,.fd-input.is-error:focus,.fd-input.is-information.is-focus,.fd-input.is-information:focus,.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input.is-disabled,.fd-input:disabled,.fd-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder,.fd-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly,.fd-input[aria-readonly=true],.fd-input[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events:none}.fd-input.is-readonly::placeholder,.fd-input[aria-readonly=true]::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly.is-hover,.fd-input.is-readonly:hover,.fd-input[aria-readonly=true].is-hover,.fd-input[aria-readonly=true]:hover,.fd-input[readonly].is-hover,.fd-input[readonly]:hover{box-shadow:none}.fd-input.is-readonly.is-focus,.fd-input.is-readonly:focus,.fd-input[aria-readonly=true].is-focus,.fd-input[aria-readonly=true]:focus,.fd-input[readonly].is-focus,.fd-input[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}/*!\n * Fundamental Library Styles v0.26.4\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-step-input{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;line-height:var(--sapContent_LineHeight);margin:.25rem 0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;padding:0;position:relative;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;width:auto;z-index:1}.fd-step-input:after,.fd-step-input:before{box-sizing:inherit;font-size:inherit}.fd-step-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-step-input[dir=rtl]::placeholder,[dir=rtl] .fd-step-input::placeholder{text-indent:.125rem}.fd-step-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-step-input::-ms-clear{display:none}.fd-step-input.is-hover,.fd-step-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-step-input.is-focus,.fd-step-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-step-input:focus-within{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset_Focus_Within);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-step-input.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-step-input.is-success.is-hover,.fd-step-input.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-step-input.is-success.is-focus,.fd-step-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-step-input.is-success.is-focus.is-hover,.fd-step-input.is-success.is-focus:hover,.fd-step-input.is-success:focus.is-hover,.fd-step-input.is-success:focus:hover{box-shadow:none}.fd-step-input.is-success:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-step-input.is-success:focus-within.is-hover,.fd-step-input.is-success:focus-within:hover{box-shadow:none}.fd-step-input.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-step-input.is-error.is-hover,.fd-step-input.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-step-input.is-error.is-focus,.fd-step-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-step-input.is-error.is-focus.is-hover,.fd-step-input.is-error.is-focus:hover,.fd-step-input.is-error:focus.is-hover,.fd-step-input.is-error:focus:hover{box-shadow:none}.fd-step-input.is-error:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-step-input.is-error:focus-within.is-hover,.fd-step-input.is-error:focus-within:hover{box-shadow:none}.fd-step-input.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-step-input.is-warning.is-hover,.fd-step-input.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-step-input.is-warning.is-focus,.fd-step-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-step-input.is-warning.is-focus.is-hover,.fd-step-input.is-warning.is-focus:hover,.fd-step-input.is-warning:focus.is-hover,.fd-step-input.is-warning:focus:hover{box-shadow:none}.fd-step-input.is-warning:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-warning:focus-within.is-hover,.fd-step-input.is-warning:focus-within:hover{box-shadow:none}.fd-step-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-step-input.is-alert.is-hover,.fd-step-input.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-step-input.is-alert.is-focus,.fd-step-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-step-input.is-alert.is-focus.is-hover,.fd-step-input.is-alert.is-focus:hover,.fd-step-input.is-alert:focus.is-hover,.fd-step-input.is-alert:focus:hover{box-shadow:none}.fd-step-input.is-alert:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-alert:focus-within.is-hover,.fd-step-input.is-alert:focus-within:hover{box-shadow:none}.fd-step-input.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-step-input.is-information.is-hover,.fd-step-input.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-step-input.is-information.is-focus,.fd-step-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-step-input.is-information.is-focus.is-hover,.fd-step-input.is-information.is-focus:hover,.fd-step-input.is-information:focus.is-hover,.fd-step-input.is-information:focus:hover{box-shadow:none}.fd-step-input.is-information:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-step-input.is-information:focus-within.is-hover,.fd-step-input.is-information:focus-within:hover{box-shadow:none}.fd-step-input.is-alert,.fd-step-input.is-error,.fd-step-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-step-input.is-alert::placeholder,.fd-step-input.is-error::placeholder,.fd-step-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-step-input.is-alert.is-focus,.fd-step-input.is-alert:focus,.fd-step-input.is-error.is-focus,.fd-step-input.is-error:focus,.fd-step-input.is-information.is-focus,.fd-step-input.is-information:focus,.fd-step-input.is-warning.is-focus,.fd-step-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-step-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-step-input.is-disabled,.fd-step-input:disabled,.fd-step-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-step-input.is-disabled::placeholder,.fd-step-input:disabled::placeholder,.fd-step-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-step-input.is-readonly,.fd-step-input[aria-readonly=true],.fd-step-input[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events:none}.fd-step-input.is-readonly::placeholder,.fd-step-input[aria-readonly=true]::placeholder,.fd-step-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-step-input.is-readonly.is-hover,.fd-step-input.is-readonly:hover,.fd-step-input[aria-readonly=true].is-hover,.fd-step-input[aria-readonly=true]:hover,.fd-step-input[readonly].is-hover,.fd-step-input[readonly]:hover{box-shadow:none}.fd-step-input.is-readonly.is-focus,.fd-step-input.is-readonly:focus,.fd-step-input[aria-readonly=true].is-focus,.fd-step-input[aria-readonly=true]:focus,.fd-step-input[readonly].is-focus,.fd-step-input[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}.fd-step-input .fd-step-input__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-step-input .fd-step-input__button[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-step-input .fd-step-input__button:before{display:none!important}.fd-step-input .fd-step-input__button.is-hover,.fd-step-input .fd-step-input__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-step-input .fd-step-input__button.is-hover[dir=rtl],.fd-step-input .fd-step-input__button:hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button.is-hover,[dir=rtl] .fd-step-input .fd-step-input__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__button.is-active,.fd-step-input .fd-step-input__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-step-input .fd-step-input__button.is-active[dir=rtl],.fd-step-input .fd-step-input__button:active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button.is-active,[dir=rtl] .fd-step-input .fd-step-input__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input.is-success .fd-step-input__button.is-active,.fd-step-input.is-success .fd-step-input__button.is-hover,.fd-step-input.is-success .fd-step-input__button:active,.fd-step-input.is-success .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-step-input.is-success .fd-step-input__button.is-active,.fd-step-input.is-success .fd-step-input__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-step-input.is-error .fd-step-input__button.is-active,.fd-step-input.is-error .fd-step-input__button.is-hover,.fd-step-input.is-error .fd-step-input__button:active,.fd-step-input.is-error .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-step-input.is-error .fd-step-input__button.is-active,.fd-step-input.is-error .fd-step-input__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-step-input.is-warning .fd-step-input__button.is-active,.fd-step-input.is-warning .fd-step-input__button.is-hover,.fd-step-input.is-warning .fd-step-input__button:active,.fd-step-input.is-warning .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-step-input.is-warning .fd-step-input__button.is-active,.fd-step-input.is-warning .fd-step-input__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-alert .fd-step-input__button.is-active,.fd-step-input.is-alert .fd-step-input__button.is-hover,.fd-step-input.is-alert .fd-step-input__button:active,.fd-step-input.is-alert .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-step-input.is-alert .fd-step-input__button.is-active,.fd-step-input.is-alert .fd-step-input__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-information .fd-step-input__button.is-active,.fd-step-input.is-information .fd-step-input__button.is-hover,.fd-step-input.is-information .fd-step-input__button:active,.fd-step-input.is-information .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-step-input.is-information .fd-step-input__button.is-active,.fd-step-input.is-information .fd-step-input__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-step-input__button.fd-button{min-width:2.125rem;width:2.125rem}.fd-step-input__button.fd-button:after,.fd-step-input__button.fd-button:before{font-size:.875rem;margin:0}.fd-step-input__button.fd-button.is-focus,.fd-step-input__button.fd-button:focus{outline:none;z-index:5}.fd-step-input__button.fd-button.is-focus.is-hover,.fd-step-input__button.fd-button.is-focus:hover,.fd-step-input__button.fd-button:focus.is-hover,.fd-step-input__button.fd-button:focus:hover{z-index:auto}.fd-step-input__button.fd-button--compact{min-width:1.5rem;width:1.5rem}.fd-step-input__input.fd-input{background:none;background-color:transparent;border:none;margin:0;padding:0 .25rem;text-align:right}.fd-step-input__input.fd-input[dir=rtl],[dir=rtl] .fd-step-input__input.fd-input{text-align:left}.fd-step-input__input.fd-input.is-focus,.fd-step-input__input.fd-input.is-hover,.fd-step-input__input.fd-input:focus,.fd-step-input__input.fd-input:hover{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none}.fd-step-input__input.fd-input.is-focus,.fd-step-input__input.fd-input:focus{outline:none;z-index:5}.fd-step-input__input.fd-input--compact{height:100%}.fd-step-input__container{align-items:center;display:flex}.fd-step-input.is-error .fd-step-input__button.fd-button,.fd-step-input.is-information .fd-step-input__button.fd-button,.fd-step-input.is-warning .fd-step-input__button.fd-button{min-width:2rem;width:2rem}.fd-step-input--compact{height:1.625rem;min-height:1.625rem}.fd-step-input--compact.is-error .fd-step-input__button.fd-button,.fd-step-input--compact.is-information .fd-step-input__button.fd-button,.fd-step-input--compact.is-warning .fd-step-input__button.fd-button{min-width:1.375rem;width:1.375rem}.fd-step-input.is-readonly .fd-step-input__button.fd-button{display:none}.fd-step-input.is-readonly:focus-within{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}.fd-step-input.is-readonly:focus-within .fd-step-input__input{background:transparent}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-input.fd-step-input__input.is-hover,.fd-input.fd-step-input__input:hover{z-index:auto}.fd-step-input--without-buttons>.fd-input{margin-bottom:0}.fd-step-input__container{display:flex;align-items:center}.fd-step-input__container .fd-form-label{align-self:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i5.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "pipe", type: i6.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImport: i0, type: StepInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-step-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -417,7 +417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.2", ngImpor
                     ], host: {
                         class: 'fd-step-input__container',
                         '(focusout)': 'handleFocusOut($event)'
-                    }, template: "<fd-form-input-message-group>\n    <div\n        class=\"fd-step-input\"\n        [class]=\"state ? 'is-' + state : ''\"\n        [class.is-focus]=\"focused\"\n        [class.is-readonly]=\"readonly\"\n        [class.is-disabled]=\"disabled\"\n        [class.fd-step-input--compact]=\"_contentDensityObserver.isCompact\"\n        [class.fd-step-input--without-buttons]=\"!hasStepButtons\"\n    >\n        <button\n            *ngIf=\"hasStepButtons\"\n            fd-button\n            #decrementBtn\n            fdType=\"transparent\"\n            class=\"fd-step-input__button\"\n            tabindex=\"-1\"\n            type=\"button\"\n            [disabled]=\"!canDecrement\"\n            [title]=\"decrementButtonTitle || ('coreStepInput.decrementButtonTitle' | fdTranslate)\"\n            [glyph]=\"decrementButtonIcon\"\n            (blur)=\"onTouched()\"\n            [attr.aria-label]=\"decrementButtonTitle || ('coreStepInput.decrementButtonTitle' | fdTranslate)\"\n            [attr.aria-controls]=\"inputId\"\n        ></button>\n        <input\n            #inputElement\n            [name]=\"name\"\n            [id]=\"inputId\"\n            [title]=\"inputTitle\"\n            [disabled]=\"disabled\"\n            [readOnly]=\"readonly\"\n            [placeholder]=\"placeholder\"\n            [class.fd-input--compact]=\"_contentDensityObserver.isCompact\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-valuenow]=\"value\"\n            [attr.aria-valuemax]=\"max\"\n            [attr.aria-valuemin]=\"min\"\n            [attr.aria-describedby]=\"canDisplayLabel ? inputId + '__description' : ''\"\n            [attr.aria-required]=\"required\"\n            [attr.aria-roledescription]=\"ariaRoleDescription || ('coreStepInput.ariaRoleDescription' | fdTranslate)\"\n            (focusin)=\"handleFocusIn()\"\n            (wheel)=\"handleScroll($event)\"\n            (keydown)=\"handleKeyDown($event)\"\n            (input)=\"trackInputValue($event)\"\n            (change)=\"updateOnInputChanged()\"\n            [style.textAlign]=\"textAlign\"\n            class=\"fd-input fd-input--no-number-spinner fd-step-input__input\"\n            type=\"text\"\n            inputmode=\"numeric\"\n        />\n        <button\n            *ngIf=\"hasStepButtons\"\n            fd-button\n            #incrementBtn\n            fdType=\"transparent\"\n            class=\"fd-step-input__button\"\n            tabindex=\"-1\"\n            type=\"button\"\n            [disabled]=\"!canIncrement\"\n            [title]=\"incrementButtonTitle || ('coreStepInput.incrementButtonTitle' | fdTranslate)\"\n            [glyph]=\"incrementButtonIcon\"\n            (blur)=\"onTouched()\"\n            [attr.aria-label]=\"incrementButtonTitle || ('coreStepInput.incrementButtonTitle' | fdTranslate)\"\n            [attr.aria-controls]=\"inputId\"\n        ></button>\n    </div>\n\n    <fd-form-message *ngIf=\"!!stateMessage\" [type]=\"state\" [innerHTML]=\"stateMessage\"></fd-form-message>\n</fd-form-input-message-group>\n\n<span *ngIf=\"canDisplayLabel\" [id]=\"inputId + '__description'\" class=\"fd-form-label fd-form-label--unit-description\">\n    {{ unit || currencySign }}\n</span>\n", styles: [".fd-input{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-webkit-appearance:none;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;line-height:var(--sapContent_LineHeight);margin:.25rem 0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;padding:0 .625rem;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-input:after,.fd-input:before{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-input[dir=rtl]::placeholder,[dir=rtl] .fd-input::placeholder{text-indent:.125rem}.fd-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-input::-ms-clear{display:none}.fd-input.is-hover,.fd-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input.is-focus,.fd-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-input[type=search]::-webkit-search-cancel-button,.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-results-button,.fd-input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.fd-input[aria-expanded=false]{z-index:0}.fd-input.is-expanded,.fd-input[aria-expanded=true]{z-index:4}.fd-input:last-child{margin-bottom:.25rem}.fd-input--compact{box-sizing:border-box;height:1.625rem;margin:.1875rem 0;min-height:1.625rem;min-width:2rem;padding:0 .5rem}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-inner-spin-button,.fd-input--no-number-spinner::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-input.right-align{text-align:right}.fd-input.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input.is-success.is-hover,.fd-input.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input.is-success.is-focus,.fd-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-input.is-success.is-focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success:focus:hover{box-shadow:none}.fd-input.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input.is-error.is-hover,.fd-input.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input.is-error.is-focus,.fd-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-input.is-error.is-focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error:focus:hover{box-shadow:none}.fd-input.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-warning.is-hover,.fd-input.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-warning.is-focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning:focus:hover{box-shadow:none}.fd-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-alert.is-hover,.fd-input.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-alert.is-focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert:focus:hover{box-shadow:none}.fd-input.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input.is-information.is-hover,.fd-input.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input.is-information.is-focus,.fd-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-input.is-information.is-focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information:focus:hover{box-shadow:none}.fd-input.is-alert,.fd-input.is-error,.fd-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert::placeholder,.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus,.fd-input.is-error.is-focus,.fd-input.is-error:focus,.fd-input.is-information.is-focus,.fd-input.is-information:focus,.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input.is-disabled,.fd-input:disabled,.fd-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder,.fd-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly,.fd-input[aria-readonly=true],.fd-input[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events:none}.fd-input.is-readonly::placeholder,.fd-input[aria-readonly=true]::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly.is-hover,.fd-input.is-readonly:hover,.fd-input[aria-readonly=true].is-hover,.fd-input[aria-readonly=true]:hover,.fd-input[readonly].is-hover,.fd-input[readonly]:hover{box-shadow:none}.fd-input.is-readonly.is-focus,.fd-input.is-readonly:focus,.fd-input[aria-readonly=true].is-focus,.fd-input[aria-readonly=true]:focus,.fd-input[readonly].is-focus,.fd-input[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}/*!\n * Fundamental Library Styles v0.26.0-rc.45\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-step-input{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;line-height:var(--sapContent_LineHeight);margin:.25rem 0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;padding:0;position:relative;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;width:auto;z-index:1}.fd-step-input:after,.fd-step-input:before{box-sizing:inherit;font-size:inherit}.fd-step-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-step-input[dir=rtl]::placeholder,[dir=rtl] .fd-step-input::placeholder{text-indent:.125rem}.fd-step-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-step-input::-ms-clear{display:none}.fd-step-input.is-hover,.fd-step-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-step-input.is-focus,.fd-step-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-step-input:focus-within{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset_Focus_Within);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-step-input.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-step-input.is-success.is-hover,.fd-step-input.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-step-input.is-success.is-focus,.fd-step-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-step-input.is-success.is-focus.is-hover,.fd-step-input.is-success.is-focus:hover,.fd-step-input.is-success:focus.is-hover,.fd-step-input.is-success:focus:hover{box-shadow:none}.fd-step-input.is-success:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-step-input.is-success:focus-within.is-hover,.fd-step-input.is-success:focus-within:hover{box-shadow:none}.fd-step-input.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-step-input.is-error.is-hover,.fd-step-input.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-step-input.is-error.is-focus,.fd-step-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-step-input.is-error.is-focus.is-hover,.fd-step-input.is-error.is-focus:hover,.fd-step-input.is-error:focus.is-hover,.fd-step-input.is-error:focus:hover{box-shadow:none}.fd-step-input.is-error:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-step-input.is-error:focus-within.is-hover,.fd-step-input.is-error:focus-within:hover{box-shadow:none}.fd-step-input.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-step-input.is-warning.is-hover,.fd-step-input.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-step-input.is-warning.is-focus,.fd-step-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-step-input.is-warning.is-focus.is-hover,.fd-step-input.is-warning.is-focus:hover,.fd-step-input.is-warning:focus.is-hover,.fd-step-input.is-warning:focus:hover{box-shadow:none}.fd-step-input.is-warning:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-warning:focus-within.is-hover,.fd-step-input.is-warning:focus-within:hover{box-shadow:none}.fd-step-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-step-input.is-alert.is-hover,.fd-step-input.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-step-input.is-alert.is-focus,.fd-step-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-step-input.is-alert.is-focus.is-hover,.fd-step-input.is-alert.is-focus:hover,.fd-step-input.is-alert:focus.is-hover,.fd-step-input.is-alert:focus:hover{box-shadow:none}.fd-step-input.is-alert:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-alert:focus-within.is-hover,.fd-step-input.is-alert:focus-within:hover{box-shadow:none}.fd-step-input.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-step-input.is-information.is-hover,.fd-step-input.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-step-input.is-information.is-focus,.fd-step-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-step-input.is-information.is-focus.is-hover,.fd-step-input.is-information.is-focus:hover,.fd-step-input.is-information:focus.is-hover,.fd-step-input.is-information:focus:hover{box-shadow:none}.fd-step-input.is-information:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-step-input.is-information:focus-within.is-hover,.fd-step-input.is-information:focus-within:hover{box-shadow:none}.fd-step-input.is-alert,.fd-step-input.is-error,.fd-step-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-step-input.is-alert::placeholder,.fd-step-input.is-error::placeholder,.fd-step-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-step-input.is-alert.is-focus,.fd-step-input.is-alert:focus,.fd-step-input.is-error.is-focus,.fd-step-input.is-error:focus,.fd-step-input.is-information.is-focus,.fd-step-input.is-information:focus,.fd-step-input.is-warning.is-focus,.fd-step-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-step-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-step-input.is-disabled,.fd-step-input:disabled,.fd-step-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-step-input.is-disabled::placeholder,.fd-step-input:disabled::placeholder,.fd-step-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-step-input.is-readonly,.fd-step-input[aria-readonly=true],.fd-step-input[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events:none}.fd-step-input.is-readonly::placeholder,.fd-step-input[aria-readonly=true]::placeholder,.fd-step-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-step-input.is-readonly.is-hover,.fd-step-input.is-readonly:hover,.fd-step-input[aria-readonly=true].is-hover,.fd-step-input[aria-readonly=true]:hover,.fd-step-input[readonly].is-hover,.fd-step-input[readonly]:hover{box-shadow:none}.fd-step-input.is-readonly.is-focus,.fd-step-input.is-readonly:focus,.fd-step-input[aria-readonly=true].is-focus,.fd-step-input[aria-readonly=true]:focus,.fd-step-input[readonly].is-focus,.fd-step-input[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}.fd-step-input .fd-step-input__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-step-input .fd-step-input__button[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-step-input .fd-step-input__button:before{display:none!important}.fd-step-input .fd-step-input__button.is-hover,.fd-step-input .fd-step-input__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-step-input .fd-step-input__button.is-hover[dir=rtl],.fd-step-input .fd-step-input__button:hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button.is-hover,[dir=rtl] .fd-step-input .fd-step-input__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__button.is-active,.fd-step-input .fd-step-input__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-step-input .fd-step-input__button.is-active[dir=rtl],.fd-step-input .fd-step-input__button:active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button.is-active,[dir=rtl] .fd-step-input .fd-step-input__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input.is-success .fd-step-input__button.is-active,.fd-step-input.is-success .fd-step-input__button.is-hover,.fd-step-input.is-success .fd-step-input__button:active,.fd-step-input.is-success .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-step-input.is-success .fd-step-input__button.is-active,.fd-step-input.is-success .fd-step-input__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-step-input.is-error .fd-step-input__button.is-active,.fd-step-input.is-error .fd-step-input__button.is-hover,.fd-step-input.is-error .fd-step-input__button:active,.fd-step-input.is-error .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-step-input.is-error .fd-step-input__button.is-active,.fd-step-input.is-error .fd-step-input__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-step-input.is-warning .fd-step-input__button.is-active,.fd-step-input.is-warning .fd-step-input__button.is-hover,.fd-step-input.is-warning .fd-step-input__button:active,.fd-step-input.is-warning .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-step-input.is-warning .fd-step-input__button.is-active,.fd-step-input.is-warning .fd-step-input__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-alert .fd-step-input__button.is-active,.fd-step-input.is-alert .fd-step-input__button.is-hover,.fd-step-input.is-alert .fd-step-input__button:active,.fd-step-input.is-alert .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-step-input.is-alert .fd-step-input__button.is-active,.fd-step-input.is-alert .fd-step-input__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-information .fd-step-input__button.is-active,.fd-step-input.is-information .fd-step-input__button.is-hover,.fd-step-input.is-information .fd-step-input__button:active,.fd-step-input.is-information .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-step-input.is-information .fd-step-input__button.is-active,.fd-step-input.is-information .fd-step-input__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-step-input__button.fd-button{min-width:2.125rem;width:2.125rem}.fd-step-input__button.fd-button:after,.fd-step-input__button.fd-button:before{font-size:.875rem;margin:0}.fd-step-input__button.fd-button.is-focus,.fd-step-input__button.fd-button:focus{outline:none;z-index:5}.fd-step-input__button.fd-button.is-focus.is-hover,.fd-step-input__button.fd-button.is-focus:hover,.fd-step-input__button.fd-button:focus.is-hover,.fd-step-input__button.fd-button:focus:hover{z-index:auto}.fd-step-input__button.fd-button--compact{min-width:1.5rem;width:1.5rem}.fd-step-input__input.fd-input{background:none;background-color:transparent;border:none;margin:0;padding:0 .25rem;text-align:right}.fd-step-input__input.fd-input[dir=rtl],[dir=rtl] .fd-step-input__input.fd-input{text-align:left}.fd-step-input__input.fd-input.is-focus,.fd-step-input__input.fd-input.is-hover,.fd-step-input__input.fd-input:focus,.fd-step-input__input.fd-input:hover{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none}.fd-step-input__input.fd-input.is-focus,.fd-step-input__input.fd-input:focus{outline:none;z-index:5}.fd-step-input__input.fd-input--compact{height:100%}.fd-step-input__container{align-items:center;display:flex}.fd-step-input.is-error .fd-step-input__button.fd-button,.fd-step-input.is-information .fd-step-input__button.fd-button,.fd-step-input.is-warning .fd-step-input__button.fd-button{min-width:2rem;width:2rem}.fd-step-input--compact{height:1.625rem;min-height:1.625rem}.fd-step-input--compact.is-error .fd-step-input__button.fd-button,.fd-step-input--compact.is-information .fd-step-input__button.fd-button,.fd-step-input--compact.is-warning .fd-step-input__button.fd-button{min-width:1.375rem;width:1.375rem}.fd-step-input.is-readonly .fd-step-input__button.fd-button{display:none}.fd-step-input.is-readonly:focus-within{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}.fd-step-input.is-readonly:focus-within .fd-step-input__input{background:transparent}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-input.fd-step-input__input.is-hover,.fd-input.fd-step-input__input:hover{z-index:auto}.fd-step-input--without-buttons>.fd-input{margin-bottom:0}.fd-step-input__container{display:flex;align-items:center}.fd-step-input__container .fd-form-label{align-self:auto}\n"] }]
+                    }, template: "<fd-form-input-message-group>\n    <div\n        class=\"fd-step-input\"\n        [class]=\"state ? 'is-' + state : ''\"\n        [class.is-focus]=\"focused\"\n        [class.is-readonly]=\"readonly\"\n        [class.is-disabled]=\"disabled\"\n        [class.fd-step-input--compact]=\"_contentDensityObserver.isCompact\"\n        [class.fd-step-input--without-buttons]=\"!hasStepButtons\"\n    >\n        <button\n            *ngIf=\"hasStepButtons\"\n            fd-button\n            #decrementBtn\n            fdType=\"transparent\"\n            class=\"fd-step-input__button\"\n            tabindex=\"-1\"\n            type=\"button\"\n            [disabled]=\"!canDecrement\"\n            [title]=\"decrementButtonTitle || ('coreStepInput.decrementButtonTitle' | fdTranslate)\"\n            [glyph]=\"decrementButtonIcon\"\n            (blur)=\"onTouched()\"\n            [attr.aria-label]=\"decrementButtonTitle || ('coreStepInput.decrementButtonTitle' | fdTranslate)\"\n            [attr.aria-controls]=\"inputId\"\n        ></button>\n        <input\n            #inputElement\n            [name]=\"name\"\n            [id]=\"inputId\"\n            [title]=\"inputTitle\"\n            [disabled]=\"disabled\"\n            [readOnly]=\"readonly\"\n            [placeholder]=\"placeholder\"\n            [class.fd-input--compact]=\"_contentDensityObserver.isCompact\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-valuenow]=\"value\"\n            [attr.aria-valuemax]=\"max\"\n            [attr.aria-valuemin]=\"min\"\n            [attr.aria-describedby]=\"canDisplayLabel ? inputId + '__description' : ''\"\n            [attr.aria-required]=\"required\"\n            [attr.aria-roledescription]=\"ariaRoleDescription || ('coreStepInput.ariaRoleDescription' | fdTranslate)\"\n            (focusin)=\"handleFocusIn()\"\n            (wheel)=\"handleScroll($event)\"\n            (keydown)=\"handleKeyDown($event)\"\n            (input)=\"trackInputValue($event)\"\n            (change)=\"updateOnInputChanged()\"\n            [style.textAlign]=\"textAlign\"\n            class=\"fd-input fd-input--no-number-spinner fd-step-input__input\"\n            type=\"text\"\n            inputmode=\"numeric\"\n        />\n        <button\n            *ngIf=\"hasStepButtons\"\n            fd-button\n            #incrementBtn\n            fdType=\"transparent\"\n            class=\"fd-step-input__button\"\n            tabindex=\"-1\"\n            type=\"button\"\n            [disabled]=\"!canIncrement\"\n            [title]=\"incrementButtonTitle || ('coreStepInput.incrementButtonTitle' | fdTranslate)\"\n            [glyph]=\"incrementButtonIcon\"\n            (blur)=\"onTouched()\"\n            [attr.aria-label]=\"incrementButtonTitle || ('coreStepInput.incrementButtonTitle' | fdTranslate)\"\n            [attr.aria-controls]=\"inputId\"\n        ></button>\n    </div>\n\n    <fd-form-message *ngIf=\"!!stateMessage\" [type]=\"state\" [innerHTML]=\"stateMessage\"></fd-form-message>\n</fd-form-input-message-group>\n\n<span *ngIf=\"canDisplayLabel\" [id]=\"inputId + '__description'\" class=\"fd-form-label fd-form-label--unit-description\">\n    {{ unit || currencySign }}\n</span>\n", styles: [".fd-input{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-webkit-appearance:none;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;line-height:var(--sapContent_LineHeight);margin:.25rem 0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;padding:0 .625rem;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-input:after,.fd-input:before{box-sizing:inherit;font-size:inherit}.fd-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-input[dir=rtl]::placeholder,[dir=rtl] .fd-input::placeholder{text-indent:.125rem}.fd-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-input::-ms-clear{display:none}.fd-input.is-hover,.fd-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-input.is-focus,.fd-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-input[type=search]::-webkit-search-cancel-button,.fd-input[type=search]::-webkit-search-decoration,.fd-input[type=search]::-webkit-search-results-button,.fd-input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.fd-input[aria-expanded=false]{z-index:0}.fd-input.is-expanded,.fd-input[aria-expanded=true]{z-index:4}.fd-input:last-child{margin-bottom:.25rem}.fd-input--compact{box-sizing:border-box;height:1.625rem;margin:.1875rem 0;min-height:1.625rem;min-width:2rem;padding:0 .5rem}.fd-input--no-number-spinner{-moz-appearance:textfield}.fd-input--no-number-spinner::-webkit-inner-spin-button,.fd-input--no-number-spinner::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fd-input.right-align{text-align:right}.fd-input.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-input.is-success.is-hover,.fd-input.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-input.is-success.is-focus,.fd-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-input.is-success.is-focus.is-hover,.fd-input.is-success.is-focus:hover,.fd-input.is-success:focus.is-hover,.fd-input.is-success:focus:hover{box-shadow:none}.fd-input.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-input.is-error.is-hover,.fd-input.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-input.is-error.is-focus,.fd-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-input.is-error.is-focus.is-hover,.fd-input.is-error.is-focus:hover,.fd-input.is-error:focus.is-hover,.fd-input.is-error:focus:hover{box-shadow:none}.fd-input.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-warning.is-hover,.fd-input.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-warning.is-focus.is-hover,.fd-input.is-warning.is-focus:hover,.fd-input.is-warning:focus.is-hover,.fd-input.is-warning:focus:hover{box-shadow:none}.fd-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-input.is-alert.is-hover,.fd-input.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-input.is-alert.is-focus.is-hover,.fd-input.is-alert.is-focus:hover,.fd-input.is-alert:focus.is-hover,.fd-input.is-alert:focus:hover{box-shadow:none}.fd-input.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-input.is-information.is-hover,.fd-input.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-input.is-information.is-focus,.fd-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-input.is-information.is-focus.is-hover,.fd-input.is-information.is-focus:hover,.fd-input.is-information:focus.is-hover,.fd-input.is-information:focus:hover{box-shadow:none}.fd-input.is-alert,.fd-input.is-error,.fd-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert::placeholder,.fd-input.is-error::placeholder,.fd-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-input.is-alert.is-focus,.fd-input.is-alert:focus,.fd-input.is-error.is-focus,.fd-input.is-error:focus,.fd-input.is-information.is-focus,.fd-input.is-information:focus,.fd-input.is-warning.is-focus,.fd-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-input.is-disabled,.fd-input:disabled,.fd-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-input.is-disabled::placeholder,.fd-input:disabled::placeholder,.fd-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly,.fd-input[aria-readonly=true],.fd-input[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events:none}.fd-input.is-readonly::placeholder,.fd-input[aria-readonly=true]::placeholder,.fd-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-input.is-readonly.is-hover,.fd-input.is-readonly:hover,.fd-input[aria-readonly=true].is-hover,.fd-input[aria-readonly=true]:hover,.fd-input[readonly].is-hover,.fd-input[readonly]:hover{box-shadow:none}.fd-input.is-readonly.is-focus,.fd-input.is-readonly:focus,.fd-input[aria-readonly=true].is-focus,.fd-input[aria-readonly=true]:focus,.fd-input[readonly].is-focus,.fd-input[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}/*!\n * Fundamental Library Styles v0.26.4\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-step-input{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:0;border:var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:inline-flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2.25rem;line-height:var(--sapContent_LineHeight);margin:.25rem 0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;padding:0;position:relative;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;width:auto;z-index:1}.fd-step-input:after,.fd-step-input:before{box-sizing:inherit;font-size:inherit}.fd-step-input::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-step-input[dir=rtl]::placeholder,[dir=rtl] .fd-step-input::placeholder{text-indent:.125rem}.fd-step-input::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-step-input::-ms-clear{display:none}.fd-step-input.is-hover,.fd-step-input:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-step-input.is-focus,.fd-step-input:focus{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-step-input:focus-within{-webkit-box-shadow:none;background:var(--sapField_Focus_Background);box-shadow:none;outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset_Focus_Within);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-step-input.is-success{background:var(--sapField_SuccessBackgroundStyle);background-color:var(--sapField_SuccessBackground);border:var(--sapField_SuccessColor) var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle)}.fd-step-input.is-success.is-hover,.fd-step-input.is-success:hover{-webkit-box-shadow:var(--fdInput_Success_Box_Shadow_Hover);background-color:var(--fdInput_Success_Background_Color_Hover);border-color:var(--sapField_SuccessColor);box-shadow:var(--fdInput_Success_Box_Shadow_Hover)}.fd-step-input.is-success.is-focus,.fd-step-input.is-success:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color);z-index:5}.fd-step-input.is-success.is-focus.is-hover,.fd-step-input.is-success.is-focus:hover,.fd-step-input.is-success:focus.is-hover,.fd-step-input.is-success:focus:hover{box-shadow:none}.fd-step-input.is-success:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Success_Outline_Color)}.fd-step-input.is-success:focus-within.is-hover,.fd-step-input.is-success:focus-within:hover{box-shadow:none}.fd-step-input.is-error{background:var(--sapField_InvalidBackgroundStyle);background-color:var(--sapField_InvalidBackground);border:var(--sapField_InvalidColor) var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle)}.fd-step-input.is-error.is-hover,.fd-step-input.is-error:hover{-webkit-box-shadow:var(--fdInput_Error_Box_Shadow_Hover);background-color:var(--fdInput_Error_Background_Color_Hover);border-color:var(--sapField_InvalidColor);box-shadow:var(--fdInput_Error_Box_Shadow_Hover)}.fd-step-input.is-error.is-focus,.fd-step-input.is-error:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color);z-index:5}.fd-step-input.is-error.is-focus.is-hover,.fd-step-input.is-error.is-focus:hover,.fd-step-input.is-error:focus.is-hover,.fd-step-input.is-error:focus:hover{box-shadow:none}.fd-step-input.is-error:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Error_Outline_Color)}.fd-step-input.is-error:focus-within.is-hover,.fd-step-input.is-error:focus-within:hover{box-shadow:none}.fd-step-input.is-warning{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-step-input.is-warning.is-hover,.fd-step-input.is-warning:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-step-input.is-warning.is-focus,.fd-step-input.is-warning:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-step-input.is-warning.is-focus.is-hover,.fd-step-input.is-warning.is-focus:hover,.fd-step-input.is-warning:focus.is-hover,.fd-step-input.is-warning:focus:hover{box-shadow:none}.fd-step-input.is-warning:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-warning:focus-within.is-hover,.fd-step-input.is-warning:focus-within:hover{box-shadow:none}.fd-step-input.is-alert{background:var(--sapField_WarningBackgroundStyle);background-color:var(--sapField_WarningBackground);border:var(--sapField_WarningColor) var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle)}.fd-step-input.is-alert.is-hover,.fd-step-input.is-alert:hover{-webkit-box-shadow:var(--fdInput_Warning_Box_Shadow_Hover);background-color:var(--fdInput_Warning_Background_Color_Hover);border-color:var(--sapField_WarningColor);box-shadow:var(--fdInput_Warning_Box_Shadow_Hover)}.fd-step-input.is-alert.is-focus,.fd-step-input.is-alert:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color);z-index:5}.fd-step-input.is-alert.is-focus.is-hover,.fd-step-input.is-alert.is-focus:hover,.fd-step-input.is-alert:focus.is-hover,.fd-step-input.is-alert:focus:hover{box-shadow:none}.fd-step-input.is-alert:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Warning_Outline_Color)}.fd-step-input.is-alert:focus-within.is-hover,.fd-step-input.is-alert:focus-within:hover{box-shadow:none}.fd-step-input.is-information{background:var(--sapField_InformationBackgroundStyle);background-color:var(--sapField_InformationBackground);border:var(--sapField_InformationColor) var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle)}.fd-step-input.is-information.is-hover,.fd-step-input.is-information:hover{-webkit-box-shadow:var(--fdInput_Information_Box_Shadow_Hover);background-color:var(--fdInput_Information_Background_Color_Hover);border-color:var(--sapField_InformationColor);box-shadow:var(--fdInput_Information_Box_Shadow_Hover)}.fd-step-input.is-information.is-focus,.fd-step-input.is-information:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color);z-index:5}.fd-step-input.is-information.is-focus.is-hover,.fd-step-input.is-information.is-focus:hover,.fd-step-input.is-information:focus.is-hover,.fd-step-input.is-information:focus:hover{box-shadow:none}.fd-step-input.is-information:focus-within{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Information_Outline_Color)}.fd-step-input.is-information:focus-within.is-hover,.fd-step-input.is-information:focus-within:hover{box-shadow:none}.fd-step-input.is-alert,.fd-step-input.is-error,.fd-step-input.is-warning{font-style:var(--fdInput_State_Text_Style);font-weight:var(--fdInput_State_Font_Weight)}.fd-step-input.is-alert::placeholder,.fd-step-input.is-error::placeholder,.fd-step-input.is-warning::placeholder{font-weight:var(--fdInput_State_Font_Weight)}.fd-step-input.is-alert.is-focus,.fd-step-input.is-alert:focus,.fd-step-input.is-error.is-focus,.fd-step-input.is-error:focus,.fd-step-input.is-information.is-focus,.fd-step-input.is-information:focus,.fd-step-input.is-warning.is-focus,.fd-step-input.is-warning:focus{outline-offset:var(--fdInput_Outline_Offset_States);z-index:5}.fd-step-input.is-error::placeholder{color:var(--sapField_TextColor)}.fd-step-input.is-disabled,.fd-step-input:disabled,.fd-step-input[aria-disabled=true]{opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-step-input.is-disabled::placeholder,.fd-step-input:disabled::placeholder,.fd-step-input[aria-disabled=true]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-step-input.is-readonly,.fd-step-input[aria-readonly=true],.fd-step-input[readonly]{background:var(--sapField_ReadOnly_BackgroundStyle);background-color:var(--sapField_ReadOnly_Background);border-color:var(--sapField_ReadOnly_BorderColor);border-radius:var(--fdInput_ReadOnly_Border_Radius);pointer-events:none}.fd-step-input.is-readonly::placeholder,.fd-step-input[aria-readonly=true]::placeholder,.fd-step-input[readonly]::placeholder{color:var(--fdInput_Non_Interactive_State_Placeholder_Color)}.fd-step-input.is-readonly.is-hover,.fd-step-input.is-readonly:hover,.fd-step-input[aria-readonly=true].is-hover,.fd-step-input[aria-readonly=true]:hover,.fd-step-input[readonly].is-hover,.fd-step-input[readonly]:hover{box-shadow:none}.fd-step-input.is-readonly.is-focus,.fd-step-input.is-readonly:focus,.fd-step-input[aria-readonly=true].is-focus,.fd-step-input[aria-readonly=true]:focus,.fd-step-input[readonly].is-focus,.fd-step-input[readonly]:focus{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius);z-index:5}.fd-step-input .fd-step-input__button{background:var(--fdInput_Group_Button_Background);border:none;border-left:var(--sapButton_BorderWidth) solid transparent;border-radius:var(--fdInput_Group_Button_Border_Raduis);color:var(--fdInput_Group_Button_Text_Color);overflow:hidden;position:static!important;text-overflow:ellipsis;white-space:nowrap;z-index:auto!important}.fd-step-input .fd-step-input__button[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button{border-left:none;border-right:var(--sapButton_BorderWidth) solid transparent}.fd-step-input .fd-step-input__button:before{display:none!important}.fd-step-input .fd-step-input__button.is-hover,.fd-step-input .fd-step-input__button:hover{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Hover_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Hover_Text_Color)}.fd-step-input .fd-step-input__button.is-hover[dir=rtl],.fd-step-input .fd-step-input__button:hover[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button.is-hover,[dir=rtl] .fd-step-input .fd-step-input__button:hover{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input .fd-step-input__button.is-active,.fd-step-input .fd-step-input__button:active{-webkit-box-shadow:var(--fdInput_Group_Button_Box_Shadow);background:var(--fdInput_Group_Button_Active_Background);border-left:var(--fdInputGroup_ControlButton_SideBorder);box-shadow:var(--fdInput_Group_Button_Box_Shadow);color:var(--fdInput_Group_Button_Active_Text_Color)}.fd-step-input .fd-step-input__button.is-active[dir=rtl],.fd-step-input .fd-step-input__button:active[dir=rtl],[dir=rtl] .fd-step-input .fd-step-input__button.is-active,[dir=rtl] .fd-step-input .fd-step-input__button:active{border-left:none;border-right:var(--fdInputGroup_ControlButton_SideBorder)}.fd-step-input.is-success .fd-step-input__button.is-active,.fd-step-input.is-success .fd-step-input__button.is-hover,.fd-step-input.is-success .fd-step-input__button:active,.fd-step-input.is-success .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Success_Active_Box_Shadow)}.fd-step-input.is-success .fd-step-input__button.is-active,.fd-step-input.is-success .fd-step-input__button:active{color:var(--fdInput_Group_Button_Success_Active_Text_Color)}.fd-step-input.is-error .fd-step-input__button.is-active,.fd-step-input.is-error .fd-step-input__button.is-hover,.fd-step-input.is-error .fd-step-input__button:active,.fd-step-input.is-error .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Error_Active_Box_Shadow)}.fd-step-input.is-error .fd-step-input__button.is-active,.fd-step-input.is-error .fd-step-input__button:active{color:var(--fdInput_Group_Button_Error_Active_Text_Color)}.fd-step-input.is-warning .fd-step-input__button.is-active,.fd-step-input.is-warning .fd-step-input__button.is-hover,.fd-step-input.is-warning .fd-step-input__button:active,.fd-step-input.is-warning .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-step-input.is-warning .fd-step-input__button.is-active,.fd-step-input.is-warning .fd-step-input__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-alert .fd-step-input__button.is-active,.fd-step-input.is-alert .fd-step-input__button.is-hover,.fd-step-input.is-alert .fd-step-input__button:active,.fd-step-input.is-alert .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Warning_Active_Box_Shadow)}.fd-step-input.is-alert .fd-step-input__button.is-active,.fd-step-input.is-alert .fd-step-input__button:active{color:var(--fdInput_Group_Button_Warning_Active_Text_Color)}.fd-step-input.is-information .fd-step-input__button.is-active,.fd-step-input.is-information .fd-step-input__button.is-hover,.fd-step-input.is-information .fd-step-input__button:active,.fd-step-input.is-information .fd-step-input__button:hover{box-shadow:var(--fdInput_Group_Button_Information_Active_Box_Shadow)}.fd-step-input.is-information .fd-step-input__button.is-active,.fd-step-input.is-information .fd-step-input__button:active{color:var(--fdInput_Group_Button_Information_Active_Text_Color)}.fd-step-input__button.fd-button{min-width:2.125rem;width:2.125rem}.fd-step-input__button.fd-button:after,.fd-step-input__button.fd-button:before{font-size:.875rem;margin:0}.fd-step-input__button.fd-button.is-focus,.fd-step-input__button.fd-button:focus{outline:none;z-index:5}.fd-step-input__button.fd-button.is-focus.is-hover,.fd-step-input__button.fd-button.is-focus:hover,.fd-step-input__button.fd-button:focus.is-hover,.fd-step-input__button.fd-button:focus:hover{z-index:auto}.fd-step-input__button.fd-button--compact{min-width:1.5rem;width:1.5rem}.fd-step-input__input.fd-input{background:none;background-color:transparent;border:none;margin:0;padding:0 .25rem;text-align:right}.fd-step-input__input.fd-input[dir=rtl],[dir=rtl] .fd-step-input__input.fd-input{text-align:left}.fd-step-input__input.fd-input.is-focus,.fd-step-input__input.fd-input.is-hover,.fd-step-input__input.fd-input:focus,.fd-step-input__input.fd-input:hover{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none}.fd-step-input__input.fd-input.is-focus,.fd-step-input__input.fd-input:focus{outline:none;z-index:5}.fd-step-input__input.fd-input--compact{height:100%}.fd-step-input__container{align-items:center;display:flex}.fd-step-input.is-error .fd-step-input__button.fd-button,.fd-step-input.is-information .fd-step-input__button.fd-button,.fd-step-input.is-warning .fd-step-input__button.fd-button{min-width:2rem;width:2rem}.fd-step-input--compact{height:1.625rem;min-height:1.625rem}.fd-step-input--compact.is-error .fd-step-input__button.fd-button,.fd-step-input--compact.is-information .fd-step-input__button.fd-button,.fd-step-input--compact.is-warning .fd-step-input__button.fd-button{min-width:1.375rem;width:1.375rem}.fd-step-input.is-readonly .fd-step-input__button.fd-button{display:none}.fd-step-input.is-readonly:focus-within{background:var(--sapField_Focus_Background);border-radius:var(--sapField_BorderCornerRadius)}.fd-step-input.is-readonly:focus-within .fd-step-input__input{background:transparent}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.fd-input.fd-step-input__input.is-hover,.fd-input.fd-step-input__input:hover{z-index:auto}.fd-step-input--without-buttons>.fd-input{margin-bottom:0}.fd-step-input__container{display:flex;align-items:center}.fd-step-input__container .fd-form-label{align-self:auto}\n"] }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,