@fundamental-ngx/core 0.43.14 → 0.43.16

package/esm2020/wizard/wizard.component.mjs

@@ -496,7 +496,7 @@ WizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
             provide: WIZARD,
             useExisting: WizardComponent
         }
-    ], queries: [{ propertyName: "progressBar", first: true, predicate: WizardProgressBarDirective, descendants: true }, { propertyName: "steps", predicate: WizardStepComponent, descendants: true }, { propertyName: "wizardContent", predicate: WizardContentComponent }], viewQueries: [{ propertyName: "wrapperContainer", first: true, predicate: ["wrapperContainer"], descendants: true }, { propertyName: "scrollbar", first: true, predicate: ScrollbarDirective, descendants: true }], ngImport: i0, template: "<section class=\"fd-wizard\">\n    <ng-content select=\"fd-wizard-navigation\"></ng-content>\n    <div\n        *ngIf=\"appendToWizard\"\n        class=\"fd-wizard-container-wrapper\"\n        #wrapperContainer\n        fdScrollSpy\n        cdkScrollable\n        [trackedTags]=\"['div']\"\n        (spyChange)=\"scrollSpyChange($event)\"\n    >\n        <div fd-scrollbar>\n            <div *ngFor=\"let contentTemplate of contentTemplates\">\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"!appendToWizard\" cdkScrollable class=\"fd-wizard-container-wrapper\">\n        <div fd-scrollbar>\n            <div *ngFor=\"let contentTemplate of contentTemplates\">\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n            </div>\n        </div>\n    </div>\n    <ng-content></ng-content>\n</section>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-wizard{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-wizard:after,.fd-wizard:before{box-sizing:inherit;font-size:inherit}.fd-wizard__navigation{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-wizard__navigation:after,.fd-wizard__navigation:before{box-sizing:inherit;font-size:inherit}.fd-wizard__progress-bar{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapContent_HeaderShadow);background:var(--sapObjectHeader_Background);border:0;box-shadow:var(--sapContent_HeaderShadow);box-sizing:border-box;color:var(--sapTextColor);display:table;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:4rem;line-height:var(--sapContent_LineHeight);list-style-type:none;margin:0;padding:1rem 0 0;position:relative;table-layout:fixed;width:100%}.fd-wizard__progress-bar:after,.fd-wizard__progress-bar:before{box-sizing:inherit;font-size:inherit}.fd-wizard__progress-bar--sm{padding-left:1rem;padding-right:1rem}.fd-wizard__progress-bar--lg,.fd-wizard__progress-bar--md{padding-left:2rem;padding-right:2rem}.fd-wizard__progress-bar--xl{padding-left:3rem;padding-right:3rem}.fd-wizard__step-wrapper{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-wizard__step-wrapper:after,.fd-wizard__step-wrapper:before{box-sizing:inherit;font-size:inherit}.fd-wizard__step{-webkit-box-sizing:border-box;-webkit-box-sizing:content-box;border:0;box-sizing:border-box;box-sizing:content-box;color:var(--sapTextColor);display:table-cell;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-width:10.5rem;padding:0;position:relative;vertical-align:top;width:100%}.fd-wizard__step:after,.fd-wizard__step:before{box-sizing:inherit;font-size:inherit}.fd-wizard__step--completed .fd-wizard__label{color:var(--fdWizard_Completed_Step_Label_Color)}.fd-wizard__step--completed .fd-wizard__step-indicator{background:var(--sapObjectHeader_Background);border:var(--fdWizard_Completed_Step_Border);color:var(--fdWizard_Completed_Step_Color)}.fd-wizard__step--completed .fd-wizard__step-indicator .fd-wizard__icon [class*=sap-icon],.fd-wizard__step--completed .fd-wizard__step-indicator .fd-wizard__icon[class*=sap-icon]{color:var(--fdWizard_Completed_Step_Icon_Color)}.fd-wizard__step--current .fd-wizard__label{color:var(--fdWizard_Current_Step_Label_Color)}.fd-wizard__step--current .fd-wizard__step-indicator{background:var(--fdWizard_Current_Step_Background_Color);border:var(--fdWizard_Current_Step_Border);color:var(--fdWizard_Current_Step_Color);position:relative}.fd-wizard__step--current .fd-wizard__step-indicator .fd-wizard__icon [class*=sap-icon],.fd-wizard__step--current .fd-wizard__step-indicator .fd-wizard__icon[class*=sap-icon]{color:var(--fdWizard_Current_Step_Icon_Color)}.fd-wizard__step--current .fd-wizard__step-indicator:after{-webkit-transition:all .125s ease-in;background:var(--fdWizard_Selection_Bar_Background);border-radius:.125rem .125rem 0 0;bottom:-1rem;content:\"\";display:inline-block;height:var(--fdWizard_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-wizard__step--upcoming .fd-wizard__label,.fd-wizard__step--upcoming .fd-wizard__optional-text{color:var(--sapContent_LabelColor)}.fd-wizard__step--upcoming .fd-wizard__step-indicator{background:var(--sapObjectHeader_Background);border:.0625rem solid var(--sapList_BorderColor);color:var(--fdWizard_Upcoming_Step_Color)}.fd-wizard__step--upcoming .fd-wizard__step-indicator .fd-wizard__icon [class*=sap-icon],.fd-wizard__step--upcoming .fd-wizard__step-indicator .fd-wizard__icon[class*=sap-icon]{color:var(--fdWizard_Upcoming_Step_Icon_Color)}.fd-wizard__step--upcoming .fd-wizard__step-container{cursor:default;pointer-events:none}.fd-wizard__step--upcoming.fd-wizard__step--completed .fd-wizard__label{color:var(--fdWizard_Completed_Step_Label_Color)}.fd-wizard__step--upcoming.fd-wizard__step--completed .fd-wizard__step-indicator{background:var(--sapObjectHeader_Background);border:var(--fdWizard_Completed_Step_Border);color:var(--fdWizard_Completed_Step_Color)}.fd-wizard__step--upcoming.fd-wizard__step--completed .fd-wizard__step-indicator .fd-wizard__icon [class*=sap-icon],.fd-wizard__step--upcoming.fd-wizard__step--completed .fd-wizard__step-indicator .fd-wizard__icon[class*=sap-icon]{color:var(--fdWizard_Completed_Step_Icon_Color)}.fd-wizard__step--no-label{min-width:4rem}.fd-wizard__step--no-label .fd-wizard__label-container{display:none}.fd-wizard__step--stacked-top.fd-wizard__step--stacked{min-width:4rem;width:4rem}.fd-wizard__step--stacked-top.fd-wizard__step--stacked .fd-wizard__connector{display:block;min-width:auto}.fd-wizard__step--stacked{min-width:auto;width:.25rem}.fd-wizard__step--stacked:last-child{padding-right:2.375rem}.fd-wizard__step--stacked:last-child[dir=rtl],[dir=rtl] .fd-wizard__step--stacked:last-child{padding-left:2.375rem;padding-right:0}.fd-wizard__step--stacked .fd-wizard__connector,.fd-wizard__step--stacked .fd-wizard__label-container{display:none}.fd-wizard__step--stacked.fd-wizard__step--upcoming:first-child{z-index:9}.fd-wizard__step--stacked.fd-wizard__step--upcoming:nth-child(2){z-index:8}.fd-wizard__step--stacked.fd-wizard__step--upcoming:nth-child(3){z-index:7}.fd-wizard__step--stacked.fd-wizard__step--upcoming:nth-child(4){z-index:6}.fd-wizard__step--stacked.fd-wizard__step--upcoming:nth-child(5){z-index:5}.fd-wizard__step--stacked.fd-wizard__step--upcoming:nth-child(6){z-index:4}.fd-wizard__step--stacked.fd-wizard__step--upcoming:nth-child(7){z-index:3}.fd-wizard__step--stacked.fd-wizard__step--upcoming:nth-child(8){z-index:2}.fd-wizard__step--active .fd-wizard__step-indicator{background:var(--sapActiveColor);border-color:var(--fdWizard_Active_Step_Border_Color);color:var(--fdWizard_Active_Step_Color)}.fd-wizard__step--active .fd-wizard__icon [class*=sap-icon],.fd-wizard__step--active .fd-wizard__icon[class*=sap-icon]{color:var(--fdWizard_Active_Step_Icon_Color)}.fd-wizard__step-container{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:flex;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-wizard__step-container:after,.fd-wizard__step-container:before{box-sizing:inherit;font-size:inherit}.fd-wizard__step-container.is-focus,.fd-wizard__step-container:focus{outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-wizard__step-indicator{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;border-radius:50%;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 0 0 .1875rem;margin-right:var(--fdWizard_Step_Indicator_Margin_Right);min-height:2rem;min-width:2rem;padding:0;width:2rem}.fd-wizard__step-indicator:after,.fd-wizard__step-indicator:before{box-sizing:inherit;font-size:inherit}.fd-wizard__step-indicator[dir=rtl],[dir=rtl] .fd-wizard__step-indicator{margin-left:var(--fdWizard_Step_Indicator_Margin_Right);margin-right:.1875rem}.fd-wizard__icon [class*=sap-icon],.fd-wizard__icon[class*=sap-icon]{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:inherit;border-radius:inherit;color:inherit;display:flex;font-size:inherit;font-size:var(--sapFontLargeSize);height:100%;justify-content:center;line-height:1}.fd-wizard__label-container{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display: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;max-height:2rem;max-width:100%;overflow:hidden;padding:0}.fd-wizard__label-container:after,.fd-wizard__label-container:before{box-sizing:inherit;font-size:inherit}.fd-wizard__label-container--optional .fd-wizard__label{-webkit-line-clamp:1;max-height:1rem}.fd-wizard__label,.fd-wizard__label-container--optional .fd-wizard__label{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal}.fd-wizard__label{-webkit-box-sizing:border-box;-webkit-line-clamp:2;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-family:var(--fdWizard_Label_Font_Family);font-size:var(--sapFontSize);font-weight:400;font-weight:var(--fdWizard_Label_Font_Weight);forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;max-width:100%;padding:0}.fd-wizard__label:after,.fd-wizard__label:before{box-sizing:inherit;font-size:inherit}.fd-wizard__optional-text{-webkit-box-sizing:border-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:-webkit-box;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:normal}.fd-wizard__optional-text:after,.fd-wizard__optional-text:before{box-sizing:inherit;font-size:inherit}.fd-wizard__connector{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1 1 auto;border:0;border-bottom:.0625rem solid var(--sapList_BorderColor);box-sizing:border-box;color:var(--sapTextColor);flex:1 1 auto;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.5rem;max-width:100%;min-width:1rem;padding:0}.fd-wizard__connector:after,.fd-wizard__connector:before{box-sizing:inherit;font-size:inherit}.fd-wizard__connector--active{border-bottom-color:var(--fdWizard_Connector_Active_Border_Color)}.fd-wizard__connector--branching{border-bottom-style:dashed}.fd-wizard__content{-webkit-box-sizing:border-box;background:var(--sapBackgroundColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem 0 0;width:100%}.fd-wizard__content:after,.fd-wizard__content:before{box-sizing:inherit;font-size:inherit}.fd-wizard__content--sm{padding-left:1rem;padding-right:1rem}.fd-wizard__content--lg,.fd-wizard__content--md{padding-left:2rem;padding-right:2rem}.fd-wizard__content--xl{padding-left:3rem;padding-right:3rem}.fd-wizard__content--solid{background:var(--fdWizard_Content_Solid_Background)}.fd-wizard__content--list{background:var(--fdWizard_Content_List_Background)}.fd-wizard__content--transparent{background:var(--fdWizard_Content_Transparent_Background)}.fd-wizard__step-content-container{-webkit-box-sizing:border-box;background-color:var(--fdWizard_Step_Content_Container_Background_Color);border:0;border-radius:var(--sapElement_BorderCornerRadius);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;padding:var(--fdWizard_Step_Content_Container_Spacing)}.fd-wizard__step-content-container:after,.fd-wizard__step-content-container:before{box-sizing:inherit;font-size:inherit}.fd-wizard__step-content-container--sm{padding-left:1rem;padding-right:1rem}.fd-wizard__step-content-container--lg,.fd-wizard__step-content-container--md{padding-left:2rem;padding-right:2rem}.fd-wizard__step-content-container--xl{padding-left:3rem;padding-right:3rem}.fd-wizard__next-step{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:1rem 0 0;padding:0}.fd-wizard__next-step:after,.fd-wizard__next-step:before{box-sizing:inherit;font-size:inherit}.fd-wizard__next-step--sm{padding-left:1rem;padding-right:1rem}.fd-wizard__next-step--lg,.fd-wizard__next-step--md{padding-left:2rem;padding-right:2rem}.fd-wizard__next-step--xl{padding-left:3rem;padding-right:3rem}.fd-wizard__next-step--floating{bottom:3.5rem;position:absolute}.fd-wizard__label,.fd-wizard__optional-text{display:block;display:-webkit-box}.fd-wizard-container-wrapper{overflow:auto}@media (max-width: 599px){.fd-wizard--responsive-paddings .fd-wizard__content,.fd-wizard--responsive-paddings .fd-wizard__progress-bar{padding-left:1rem;padding-right:1rem}}@media (min-width: 600px) and (max-width: 1439px){.fd-wizard--responsive-paddings .fd-wizard__content,.fd-wizard--responsive-paddings .fd-wizard__progress-bar{padding-left:2rem;padding-right:2rem}}@media (min-width: 1440px){.fd-wizard--responsive-paddings .fd-wizard__content,.fd-wizard--responsive-paddings .fd-wizard__progress-bar{padding-left:3rem;padding-right:3rem}}.fd-wizard__progress-bar{z-index:1003}.fd-scrollbar{max-height:100%;max-width:100%;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ScrollSpyDirective, selector: "[fdScrollSpy]", inputs: ["trackedTags", "fireEmpty", "targetPercent", "targetOffset", "scrollSpyDisabled"], outputs: ["spyChange"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i4.ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible", "overrideTabindex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "progressBar", first: true, predicate: WizardProgressBarDirective, descendants: true }, { propertyName: "steps", predicate: WizardStepComponent, descendants: true }, { propertyName: "wizardContent", predicate: WizardContentComponent }], viewQueries: [{ propertyName: "wrapperContainer", first: true, predicate: ["wrapperContainer"], descendants: true }, { propertyName: "scrollbar", first: true, predicate: ScrollbarDirective, descendants: true }], ngImport: i0, template: "<section class=\"fd-wizard\">\n    <ng-content select=\"fd-wizard-navigation\"></ng-content>\n    <div\n        *ngIf=\"appendToWizard\"\n        class=\"fd-wizard-container-wrapper\"\n        #wrapperContainer\n        fdScrollSpy\n        cdkScrollable\n        [trackedTags]=\"['div']\"\n        (spyChange)=\"scrollSpyChange($event)\"\n    >\n        <div fd-scrollbar>\n            <div *ngFor=\"let contentTemplate of contentTemplates\">\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"!appendToWizard\" cdkScrollable class=\"fd-wizard-container-wrapper\">\n        <div fd-scrollbar>\n            <div *ngFor=\"let contentTemplate of contentTemplates\">\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n            </div>\n        </div>\n    </div>\n    <ng-content></ng-content>\n</section>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-wizard{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;position:relative}.fd-wizard:after,.fd-wizard:before{box-sizing:inherit;font-size:inherit}.fd-wizard__navigation{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-wizard__navigation:after,.fd-wizard__navigation:before{box-sizing:inherit;font-size:inherit}.fd-wizard__progress-bar{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapContent_HeaderShadow);background:var(--sapObjectHeader_Background);border:0;box-shadow:var(--sapContent_HeaderShadow);box-sizing:border-box;color:var(--sapTextColor);display:table;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:4rem;line-height:var(--sapContent_LineHeight);list-style-type:none;margin:0;padding:1rem 0 0;position:relative;table-layout:fixed;width:100%}.fd-wizard__progress-bar:after,.fd-wizard__progress-bar:before{box-sizing:inherit;font-size:inherit}.fd-wizard__progress-bar--sm{padding-left:1rem;padding-right:1rem}.fd-wizard__progress-bar--lg,.fd-wizard__progress-bar--md{padding-left:2rem;padding-right:2rem}.fd-wizard__progress-bar--xl{padding-left:3rem;padding-right:3rem}.fd-wizard__step-wrapper{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-wizard__step-wrapper:after,.fd-wizard__step-wrapper:before{box-sizing:inherit;font-size:inherit}.fd-wizard__step{-webkit-box-sizing:border-box;-webkit-box-sizing:content-box;border:0;box-sizing:border-box;box-sizing:content-box;color:var(--sapTextColor);display:table-cell;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;min-width:10.5rem;padding:0;position:relative;vertical-align:top;width:100%}.fd-wizard__step:after,.fd-wizard__step:before{box-sizing:inherit;font-size:inherit}.fd-wizard__step--completed .fd-wizard__label{color:var(--fdWizard_Completed_Step_Label_Color)}.fd-wizard__step--completed .fd-wizard__step-indicator{background:var(--sapObjectHeader_Background);border:var(--fdWizard_Completed_Step_Border);color:var(--fdWizard_Completed_Step_Color)}.fd-wizard__step--completed .fd-wizard__step-indicator .fd-wizard__icon [class*=sap-icon],.fd-wizard__step--completed .fd-wizard__step-indicator .fd-wizard__icon[class*=sap-icon]{color:var(--fdWizard_Completed_Step_Icon_Color)}.fd-wizard__step--current .fd-wizard__label{color:var(--fdWizard_Current_Step_Label_Color)}.fd-wizard__step--current .fd-wizard__step-indicator{background:var(--fdWizard_Current_Step_Background_Color);border:var(--fdWizard_Current_Step_Border);color:var(--fdWizard_Current_Step_Color);position:relative}.fd-wizard__step--current .fd-wizard__step-indicator .fd-wizard__icon [class*=sap-icon],.fd-wizard__step--current .fd-wizard__step-indicator .fd-wizard__icon[class*=sap-icon]{color:var(--fdWizard_Current_Step_Icon_Color)}.fd-wizard__step--current .fd-wizard__step-indicator:after{-webkit-transition:all .125s ease-in;background:var(--fdWizard_Selection_Bar_Background);border-radius:.125rem .125rem 0 0;bottom:-1rem;content:\"\";display:inline-block;height:var(--fdWizard_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-wizard__step--upcoming .fd-wizard__label,.fd-wizard__step--upcoming .fd-wizard__optional-text{color:var(--sapContent_LabelColor)}.fd-wizard__step--upcoming .fd-wizard__step-indicator{background:var(--sapObjectHeader_Background);border:.0625rem solid var(--sapList_BorderColor);color:var(--fdWizard_Upcoming_Step_Color)}.fd-wizard__step--upcoming .fd-wizard__step-indicator .fd-wizard__icon [class*=sap-icon],.fd-wizard__step--upcoming .fd-wizard__step-indicator .fd-wizard__icon[class*=sap-icon]{color:var(--fdWizard_Upcoming_Step_Icon_Color)}.fd-wizard__step--upcoming .fd-wizard__step-container{cursor:default;pointer-events:none}.fd-wizard__step--upcoming.fd-wizard__step--completed .fd-wizard__label{color:var(--fdWizard_Completed_Step_Label_Color)}.fd-wizard__step--upcoming.fd-wizard__step--completed .fd-wizard__step-indicator{background:var(--sapObjectHeader_Background);border:var(--fdWizard_Completed_Step_Border);color:var(--fdWizard_Completed_Step_Color)}.fd-wizard__step--upcoming.fd-wizard__step--completed .fd-wizard__step-indicator .fd-wizard__icon [class*=sap-icon],.fd-wizard__step--upcoming.fd-wizard__step--completed .fd-wizard__step-indicator .fd-wizard__icon[class*=sap-icon]{color:var(--fdWizard_Completed_Step_Icon_Color)}.fd-wizard__step--no-label{min-width:4rem}.fd-wizard__step--no-label .fd-wizard__label-container{display:none}.fd-wizard__step--stacked-top.fd-wizard__step--stacked{min-width:4rem;width:4rem}.fd-wizard__step--stacked-top.fd-wizard__step--stacked .fd-wizard__connector{display:block;min-width:auto}.fd-wizard__step--stacked{min-width:auto;width:.25rem}.fd-wizard__step--stacked:last-child{padding-right:2.375rem}.fd-wizard__step--stacked:last-child[dir=rtl],[dir=rtl] .fd-wizard__step--stacked:last-child{padding-left:2.375rem;padding-right:0}.fd-wizard__step--stacked .fd-wizard__connector,.fd-wizard__step--stacked .fd-wizard__label-container{display:none}.fd-wizard__step--stacked.fd-wizard__step--upcoming:first-child{z-index:9}.fd-wizard__step--stacked.fd-wizard__step--upcoming:nth-child(2){z-index:8}.fd-wizard__step--stacked.fd-wizard__step--upcoming:nth-child(3){z-index:7}.fd-wizard__step--stacked.fd-wizard__step--upcoming:nth-child(4){z-index:6}.fd-wizard__step--stacked.fd-wizard__step--upcoming:nth-child(5){z-index:5}.fd-wizard__step--stacked.fd-wizard__step--upcoming:nth-child(6){z-index:4}.fd-wizard__step--stacked.fd-wizard__step--upcoming:nth-child(7){z-index:3}.fd-wizard__step--stacked.fd-wizard__step--upcoming:nth-child(8){z-index:2}.fd-wizard__step--active .fd-wizard__step-indicator{background:var(--sapActiveColor);border-color:var(--fdWizard_Active_Step_Border_Color);color:var(--fdWizard_Active_Step_Color)}.fd-wizard__step--active .fd-wizard__icon [class*=sap-icon],.fd-wizard__step--active .fd-wizard__icon[class*=sap-icon]{color:var(--fdWizard_Active_Step_Icon_Color)}.fd-wizard__step-container{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:flex;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-wizard__step-container:after,.fd-wizard__step-container:before{box-sizing:inherit;font-size:inherit}.fd-wizard__step-container.is-focus,.fd-wizard__step-container:focus{outline-color:var(--sapContent_FocusColor);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-wizard__step-indicator{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;border-radius:50%;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 0 0 .1875rem;margin-right:var(--fdWizard_Step_Indicator_Margin_Right);min-height:2rem;min-width:2rem;padding:0;width:2rem}.fd-wizard__step-indicator:after,.fd-wizard__step-indicator:before{box-sizing:inherit;font-size:inherit}.fd-wizard__step-indicator[dir=rtl],[dir=rtl] .fd-wizard__step-indicator{margin-left:var(--fdWizard_Step_Indicator_Margin_Right);margin-right:.1875rem}.fd-wizard__icon [class*=sap-icon],.fd-wizard__icon[class*=sap-icon]{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background:inherit;border-radius:inherit;color:inherit;display:flex;font-size:inherit;font-size:var(--sapFontLargeSize);height:100%;justify-content:center;line-height:1}.fd-wizard__label-container{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display: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;max-height:2rem;max-width:100%;overflow:hidden;padding:0}.fd-wizard__label-container:after,.fd-wizard__label-container:before{box-sizing:inherit;font-size:inherit}.fd-wizard__label-container--optional .fd-wizard__label{-webkit-line-clamp:1;max-height:1rem}.fd-wizard__label,.fd-wizard__label-container--optional .fd-wizard__label{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal}.fd-wizard__label{-webkit-box-sizing:border-box;-webkit-line-clamp:2;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-family:var(--fdWizard_Label_Font_Family);font-size:var(--sapFontSize);font-weight:400;font-weight:var(--fdWizard_Label_Font_Weight);forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;max-width:100%;padding:0}.fd-wizard__label:after,.fd-wizard__label:before{box-sizing:inherit;font-size:inherit}.fd-wizard__optional-text{-webkit-box-sizing:border-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:-webkit-box;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:normal}.fd-wizard__optional-text:after,.fd-wizard__optional-text:before{box-sizing:inherit;font-size:inherit}.fd-wizard__connector{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1 1 auto;border:0;border-bottom:.0625rem solid var(--sapList_BorderColor);box-sizing:border-box;color:var(--sapTextColor);flex:1 1 auto;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.5rem;max-width:100%;min-width:1rem;padding:0}.fd-wizard__connector:after,.fd-wizard__connector:before{box-sizing:inherit;font-size:inherit}.fd-wizard__connector--active{border-bottom-color:var(--fdWizard_Connector_Active_Border_Color)}.fd-wizard__connector--branching{border-bottom-style:dashed}.fd-wizard__content{-webkit-box-sizing:border-box;background:var(--sapBackgroundColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem 0 0;width:100%}.fd-wizard__content:after,.fd-wizard__content:before{box-sizing:inherit;font-size:inherit}.fd-wizard__content--sm{padding-left:1rem;padding-right:1rem}.fd-wizard__content--lg,.fd-wizard__content--md{padding-left:2rem;padding-right:2rem}.fd-wizard__content--xl{padding-left:3rem;padding-right:3rem}.fd-wizard__content--solid{background:var(--fdWizard_Content_Solid_Background)}.fd-wizard__content--list{background:var(--fdWizard_Content_List_Background)}.fd-wizard__content--transparent{background:var(--fdWizard_Content_Transparent_Background)}.fd-wizard__step-content-container{-webkit-box-sizing:border-box;background-color:var(--fdWizard_Step_Content_Container_Background_Color);border:0;border-radius:var(--sapElement_BorderCornerRadius);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;padding:var(--fdWizard_Step_Content_Container_Spacing)}.fd-wizard__step-content-container:after,.fd-wizard__step-content-container:before{box-sizing:inherit;font-size:inherit}.fd-wizard__step-content-container--sm{padding-left:1rem;padding-right:1rem}.fd-wizard__step-content-container--lg,.fd-wizard__step-content-container--md{padding-left:2rem;padding-right:2rem}.fd-wizard__step-content-container--xl{padding-left:3rem;padding-right:3rem}.fd-wizard__next-step{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:1rem 0 0;padding:0}.fd-wizard__next-step:after,.fd-wizard__next-step:before{box-sizing:inherit;font-size:inherit}.fd-wizard__next-step--sm{padding-left:1rem;padding-right:1rem}.fd-wizard__next-step--lg,.fd-wizard__next-step--md{padding-left:2rem;padding-right:2rem}.fd-wizard__next-step--xl{padding-left:3rem;padding-right:3rem}.fd-wizard__next-step--floating{bottom:3.5rem;position:absolute}.fd-wizard__label,.fd-wizard__optional-text{display:block;display:-webkit-box}.fd-wizard-container-wrapper{overflow:auto}@media (max-width: 599px){.fd-wizard--responsive-paddings .fd-wizard__content,.fd-wizard--responsive-paddings .fd-wizard__progress-bar{padding-left:1rem;padding-right:1rem}}@media (min-width: 600px) and (max-width: 1439px){.fd-wizard--responsive-paddings .fd-wizard__content,.fd-wizard--responsive-paddings .fd-wizard__progress-bar{padding-left:2rem;padding-right:2rem}}@media (min-width: 1440px){.fd-wizard--responsive-paddings .fd-wizard__content,.fd-wizard--responsive-paddings .fd-wizard__progress-bar{padding-left:3rem;padding-right:3rem}}.fd-wizard__progress-bar{z-index:1003}.fd-scrollbar{max-height:100%;max-width:100%;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ScrollSpyDirective, selector: "[fdScrollSpy]", inputs: ["trackedTags", "fireEmpty", "targetPercent", "targetOffset", "scrollSpyDisabled"], outputs: ["spyChange"], exportAs: ["fdScrollSpy"] }, { kind: "directive", type: i3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i4.ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible", "overrideTabindex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WizardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-wizard', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [

package/fesm2015/fundamental-ngx-core-scroll-spy.mjs

@@ -42,12 +42,12 @@ class ScrollSpyDirective {
         this._destroyRef = inject(DestroyedService);
     }
     /** @hidden */
-    onScroll(event) {
+    onScroll(event, forced = false) {
         if (this.scrollSpyDisabled) {
             return;
         }
         let spiedTag;
-        const target = event.target;
+        const target = ((event === null || event === void 0 ? void 0 : event.target) || this._elRef.nativeElement);
         const children = this._elRef.nativeElement.children;
         const [firstChild] = children;
         const childrenLength = children.length;
@@ -61,7 +61,7 @@ class ScrollSpyDirective {
                 }
             }
         }
-        if ((spiedTag || this.fireEmpty) && spiedTag !== this._currentActive) {
+        if (forced || ((spiedTag || this.fireEmpty) && spiedTag !== this._currentActive)) {
             this._currentActive = spiedTag;
             this.spyChange.emit(this._currentActive);
         }
@@ -72,17 +72,18 @@ class ScrollSpyDirective {
         resizeObservable(this._elRef.nativeElement)
             .pipe(debounceTime(30), takeUntil(this._destroyRef))
             .subscribe(() => {
-            this.onScroll({ target: this._elRef.nativeElement });
+            this.onScroll(undefined, true);
         });
     }
 }
 ScrollSpyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ScrollSpyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ScrollSpyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: ScrollSpyDirective, selector: "[fdScrollSpy]", inputs: { trackedTags: "trackedTags", fireEmpty: "fireEmpty", targetPercent: "targetPercent", targetOffset: "targetOffset", scrollSpyDisabled: "scrollSpyDisabled" }, outputs: { spyChange: "spyChange" }, host: { listeners: { "scroll": "onScroll($event)" } }, providers: [DestroyedService], ngImport: i0 });
+ScrollSpyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: ScrollSpyDirective, selector: "[fdScrollSpy]", inputs: { trackedTags: "trackedTags", fireEmpty: "fireEmpty", targetPercent: "targetPercent", targetOffset: "targetOffset", scrollSpyDisabled: "scrollSpyDisabled" }, outputs: { spyChange: "spyChange" }, host: { listeners: { "scroll": "onScroll($event)" } }, providers: [DestroyedService], exportAs: ["fdScrollSpy"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ScrollSpyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdScrollSpy]',
-                    providers: [DestroyedService]
+                    providers: [DestroyedService],
+                    exportAs: 'fdScrollSpy'
                 }]
         }], propDecorators: { trackedTags: [{
                 type: Input

package/fesm2015/fundamental-ngx-core-scroll-spy.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-scroll-spy.mjs","sources":["../../../../libs/core/src/lib/scroll-spy/scroll-spy.directive.ts","../../../../libs/core/src/lib/scroll-spy/scroll-spy.module.ts","../../../../libs/core/src/lib/scroll-spy/fundamental-ngx-core-scroll-spy.ts"],"sourcesContent":["import { Directive, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, inject } from '@angular/core';\nimport { DestroyedService, resizeObservable } from '@fundamental-ngx/cdk/utils';\nimport { debounceTime, takeUntil } from 'rxjs';\n\n/**\n * A directive designed to help navigation elements determine the element currently in view of the user.\n */\n@Directive({\n    selector: '[fdScrollSpy]',\n    providers: [DestroyedService]\n})\nexport class ScrollSpyDirective implements OnInit {\n    /**\n     * An array of tags to track.\n     */\n    @Input()\n    trackedTags: string[] = [];\n\n    /**\n     * Whether events are still fired if there is no tag present on the user's screen.\n     */\n    @Input()\n    fireEmpty = false;\n\n    /**\n     * A number that represent at what location in the container the event is fired.\n     * 0.5 would fire the events in the middle of the container,\n     * 0 for the top and 1 for the bottom.\n     */\n    @Input()\n    targetPercent = 0;\n\n    /**\n     * Number that represents the offset in pixels for fired target. `100` value means that the event will be fired for\n     * target that is 100 pixels below the spy container.\n     */\n    @Input()\n    targetOffset = 0;\n\n    /**\n     * Whether to disable scroll spy\n     */\n    @Input()\n    scrollSpyDisabled = false;\n\n    /**\n     * Event fired on the scroll element when a new item becomes activated by the scrollspy .\n     * The returned value is the HTMLElement itself.\n     */\n    @Output()\n    readonly spyChange: EventEmitter<HTMLElement> = new EventEmitter<HTMLElement>();\n\n    /** @hidden */\n    private _currentActive: HTMLElement | undefined;\n\n    /** @hidden */\n    private readonly _elRef = inject(ElementRef);\n\n    /** @hidden */\n    private readonly _destroyRef = inject(DestroyedService);\n\n    /** @hidden */\n    @HostListener('scroll', ['$event'])\n    onScroll(event: Event): void {\n        if (this.scrollSpyDisabled) {\n            return;\n        }\n\n        let spiedTag: HTMLElement | undefined;\n        const target = event.target as HTMLElement;\n        const children: HTMLElement[] = this._elRef.nativeElement.children;\n        const [firstChild] = children;\n        const childrenLength = children.length;\n        const targetScrollTop = target.scrollTop;\n        const targetOffsetTop = target.offsetTop + this.targetOffset - (target.offsetTop - firstChild.offsetTop);\n\n        for (let i = 0; i < childrenLength; i++) {\n            const element = children[i];\n            if (this.trackedTags.some((tag) => tag.toLocaleUpperCase() === element.tagName.toLocaleUpperCase())) {\n                if (element.offsetTop - targetOffsetTop <= targetScrollTop + target.offsetHeight * this.targetPercent) {\n                    spiedTag = element;\n                }\n            }\n        }\n\n        if ((spiedTag || this.fireEmpty) && spiedTag !== this._currentActive) {\n            this._currentActive = spiedTag;\n            this.spyChange.emit(this._currentActive);\n        }\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        // When the spy container being resized, re-evaluate scroll position.\n        resizeObservable(this._elRef.nativeElement)\n            .pipe(debounceTime(30), takeUntil(this._destroyRef))\n            .subscribe(() => {\n                this.onScroll({ target: this._elRef.nativeElement } as Event);\n            });\n    }\n}\n","import { NgModule } from '@angular/core';\n\nimport { ScrollSpyDirective } from './scroll-spy.directive';\n\n@NgModule({\n    declarations: [ScrollSpyDirective],\n    exports: [ScrollSpyDirective]\n})\nexport class ScrollSpyModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAIA;;AAEG;MAKU,kBAAkB,CAAA;AAJ/B,IAAA,WAAA,GAAA;AAKI;;AAEG;AAEH,QAAA,IAAW,CAAA,WAAA,GAAa,EAAE,CAAC;AAE3B;;AAEG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;AAElB;;;;AAIG;AAEH,QAAA,IAAa,CAAA,aAAA,GAAG,CAAC,CAAC;AAElB;;;AAGG;AAEH,QAAA,IAAY,CAAA,YAAA,GAAG,CAAC,CAAC;AAEjB;;AAEG;AAEH,QAAA,IAAiB,CAAA,iBAAA,GAAG,KAAK,CAAC;AAE1B;;;AAGG;AAEM,QAAA,IAAA,CAAA,SAAS,GAA8B,IAAI,YAAY,EAAe,CAAC;;AAM/D,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;;AAG5B,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;KAyC3D;;AArCG,IAAA,QAAQ,CAAC,KAAY,EAAA;QACjB,IAAI,IAAI,CAAC,iBAAiB,EAAE;YACxB,OAAO;AACV,SAAA;AAED,QAAA,IAAI,QAAiC,CAAC;AACtC,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,MAAM,QAAQ,GAAkB,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC;AACnE,QAAA,MAAM,CAAC,UAAU,CAAC,GAAG,QAAQ,CAAC;AAC9B,QAAA,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC;AACvC,QAAA,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC;AACzC,QAAA,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,IAAI,MAAM,CAAC,SAAS,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;QAEzG,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,EAAE;AACrC,YAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;YAC5B,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,iBAAiB,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,iBAAiB,EAAE,CAAC,EAAE;AACjG,gBAAA,IAAI,OAAO,CAAC,SAAS,GAAG,eAAe,IAAI,eAAe,GAAG,MAAM,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE;oBACnG,QAAQ,GAAG,OAAO,CAAC;AACtB,iBAAA;AACJ,aAAA;AACJ,SAAA;AAED,QAAA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,KAAK,IAAI,CAAC,cAAc,EAAE;AAClE,YAAA,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;YAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;AAC5C,SAAA;KACJ;;IAGD,QAAQ,GAAA;;AAEJ,QAAA,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;AACtC,aAAA,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;aACnD,SAAS,CAAC,MAAK;AACZ,YAAA,IAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,EAAW,CAAC,CAAC;AAClE,SAAC,CAAC,CAAC;KACV;;+GAxFQ,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAlB,kBAAkB,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,eAAA,EAAA,YAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,SAAA,EAFhB,CAAC,gBAAgB,CAAC,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAEpB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAJ9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,eAAe;oBACzB,SAAS,EAAE,CAAC,gBAAgB,CAAC;iBAChC,CAAA;8BAMG,WAAW,EAAA,CAAA;sBADV,KAAK;gBAON,SAAS,EAAA,CAAA;sBADR,KAAK;gBASN,aAAa,EAAA,CAAA;sBADZ,KAAK;gBAQN,YAAY,EAAA,CAAA;sBADX,KAAK;gBAON,iBAAiB,EAAA,CAAA;sBADhB,KAAK;gBAQG,SAAS,EAAA,CAAA;sBADjB,MAAM;gBAcP,QAAQ,EAAA,CAAA;sBADP,YAAY;uBAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAA;;;MCtDzB,eAAe,CAAA;;4GAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;6GAAf,eAAe,EAAA,YAAA,EAAA,CAHT,kBAAkB,CAAA,EAAA,OAAA,EAAA,CACvB,kBAAkB,CAAA,EAAA,CAAA,CAAA;6GAEnB,eAAe,EAAA,CAAA,CAAA;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,YAAY,EAAE,CAAC,kBAAkB,CAAC;oBAClC,OAAO,EAAE,CAAC,kBAAkB,CAAC;iBAChC,CAAA;;;ACPD;;AAEG;;;;"}
+{"version":3,"file":"fundamental-ngx-core-scroll-spy.mjs","sources":["../../../../libs/core/src/lib/scroll-spy/scroll-spy.directive.ts","../../../../libs/core/src/lib/scroll-spy/scroll-spy.module.ts","../../../../libs/core/src/lib/scroll-spy/fundamental-ngx-core-scroll-spy.ts"],"sourcesContent":["import { Directive, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, inject } from '@angular/core';\nimport { DestroyedService, resizeObservable } from '@fundamental-ngx/cdk/utils';\nimport { debounceTime, takeUntil } from 'rxjs';\n\n/**\n * A directive designed to help navigation elements determine the element currently in view of the user.\n */\n@Directive({\n    selector: '[fdScrollSpy]',\n    providers: [DestroyedService],\n    exportAs: 'fdScrollSpy'\n})\nexport class ScrollSpyDirective implements OnInit {\n    /**\n     * An array of tags to track.\n     */\n    @Input()\n    trackedTags: string[] = [];\n\n    /**\n     * Whether events are still fired if there is no tag present on the user's screen.\n     */\n    @Input()\n    fireEmpty = false;\n\n    /**\n     * A number that represent at what location in the container the event is fired.\n     * 0.5 would fire the events in the middle of the container,\n     * 0 for the top and 1 for the bottom.\n     */\n    @Input()\n    targetPercent = 0;\n\n    /**\n     * Number that represents the offset in pixels for fired target. `100` value means that the event will be fired for\n     * target that is 100 pixels below the spy container.\n     */\n    @Input()\n    targetOffset = 0;\n\n    /**\n     * Whether to disable scroll spy\n     */\n    @Input()\n    scrollSpyDisabled = false;\n\n    /**\n     * Event fired on the scroll element when a new item becomes activated by the scrollspy .\n     * The returned value is the HTMLElement itself.\n     */\n    @Output()\n    readonly spyChange: EventEmitter<HTMLElement> = new EventEmitter<HTMLElement>();\n\n    /** @hidden */\n    private _currentActive: HTMLElement | undefined;\n\n    /** @hidden */\n    private readonly _elRef = inject(ElementRef);\n\n    /** @hidden */\n    private readonly _destroyRef = inject(DestroyedService);\n\n    /** @hidden */\n    @HostListener('scroll', ['$event'])\n    onScroll(event?: Event, forced = false): void {\n        if (this.scrollSpyDisabled) {\n            return;\n        }\n\n        let spiedTag: HTMLElement | undefined;\n        const target = (event?.target || this._elRef.nativeElement) as HTMLElement;\n        const children: HTMLElement[] = this._elRef.nativeElement.children;\n        const [firstChild] = children;\n        const childrenLength = children.length;\n        const targetScrollTop = target.scrollTop;\n        const targetOffsetTop = target.offsetTop + this.targetOffset - (target.offsetTop - firstChild.offsetTop);\n\n        for (let i = 0; i < childrenLength; i++) {\n            const element = children[i];\n            if (this.trackedTags.some((tag) => tag.toLocaleUpperCase() === element.tagName.toLocaleUpperCase())) {\n                if (element.offsetTop - targetOffsetTop <= targetScrollTop + target.offsetHeight * this.targetPercent) {\n                    spiedTag = element;\n                }\n            }\n        }\n\n        if (forced || ((spiedTag || this.fireEmpty) && spiedTag !== this._currentActive)) {\n            this._currentActive = spiedTag;\n            this.spyChange.emit(this._currentActive);\n        }\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        // When the spy container being resized, re-evaluate scroll position.\n        resizeObservable(this._elRef.nativeElement)\n            .pipe(debounceTime(30), takeUntil(this._destroyRef))\n            .subscribe(() => {\n                this.onScroll(undefined, true);\n            });\n    }\n}\n","import { NgModule } from '@angular/core';\n\nimport { ScrollSpyDirective } from './scroll-spy.directive';\n\n@NgModule({\n    declarations: [ScrollSpyDirective],\n    exports: [ScrollSpyDirective]\n})\nexport class ScrollSpyModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAIA;;AAEG;MAMU,kBAAkB,CAAA;AAL/B,IAAA,WAAA,GAAA;AAMI;;AAEG;AAEH,QAAA,IAAW,CAAA,WAAA,GAAa,EAAE,CAAC;AAE3B;;AAEG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;AAElB;;;;AAIG;AAEH,QAAA,IAAa,CAAA,aAAA,GAAG,CAAC,CAAC;AAElB;;;AAGG;AAEH,QAAA,IAAY,CAAA,YAAA,GAAG,CAAC,CAAC;AAEjB;;AAEG;AAEH,QAAA,IAAiB,CAAA,iBAAA,GAAG,KAAK,CAAC;AAE1B;;;AAGG;AAEM,QAAA,IAAA,CAAA,SAAS,GAA8B,IAAI,YAAY,EAAe,CAAC;;AAM/D,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;;AAG5B,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;KAyC3D;;AArCG,IAAA,QAAQ,CAAC,KAAa,EAAE,MAAM,GAAG,KAAK,EAAA;QAClC,IAAI,IAAI,CAAC,iBAAiB,EAAE;YACxB,OAAO;AACV,SAAA;AAED,QAAA,IAAI,QAAiC,CAAC;AACtC,QAAA,MAAM,MAAM,IAAI,CAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,MAAM,KAAI,IAAI,CAAC,MAAM,CAAC,aAAa,CAAgB,CAAC;QAC3E,MAAM,QAAQ,GAAkB,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC;AACnE,QAAA,MAAM,CAAC,UAAU,CAAC,GAAG,QAAQ,CAAC;AAC9B,QAAA,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC;AACvC,QAAA,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC;AACzC,QAAA,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,IAAI,MAAM,CAAC,SAAS,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;QAEzG,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,EAAE;AACrC,YAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;YAC5B,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,iBAAiB,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,iBAAiB,EAAE,CAAC,EAAE;AACjG,gBAAA,IAAI,OAAO,CAAC,SAAS,GAAG,eAAe,IAAI,eAAe,GAAG,MAAM,CAAC,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE;oBACnG,QAAQ,GAAG,OAAO,CAAC;AACtB,iBAAA;AACJ,aAAA;AACJ,SAAA;AAED,QAAA,IAAI,MAAM,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,KAAK,IAAI,CAAC,cAAc,CAAC,EAAE;AAC9E,YAAA,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;YAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;AAC5C,SAAA;KACJ;;IAGD,QAAQ,GAAA;;AAEJ,QAAA,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;AACtC,aAAA,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;aACnD,SAAS,CAAC,MAAK;AACZ,YAAA,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AACnC,SAAC,CAAC,CAAC;KACV;;+GAxFQ,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAlB,kBAAkB,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,eAAA,EAAA,YAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,SAAA,EAHhB,CAAC,gBAAgB,CAAC,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAGpB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,eAAe;oBACzB,SAAS,EAAE,CAAC,gBAAgB,CAAC;AAC7B,oBAAA,QAAQ,EAAE,aAAa;iBAC1B,CAAA;8BAMG,WAAW,EAAA,CAAA;sBADV,KAAK;gBAON,SAAS,EAAA,CAAA;sBADR,KAAK;gBASN,aAAa,EAAA,CAAA;sBADZ,KAAK;gBAQN,YAAY,EAAA,CAAA;sBADX,KAAK;gBAON,iBAAiB,EAAA,CAAA;sBADhB,KAAK;gBAQG,SAAS,EAAA,CAAA;sBADjB,MAAM;gBAcP,QAAQ,EAAA,CAAA;sBADP,YAAY;uBAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAA;;;MCvDzB,eAAe,CAAA;;4GAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;6GAAf,eAAe,EAAA,YAAA,EAAA,CAHT,kBAAkB,CAAA,EAAA,OAAA,EAAA,CACvB,kBAAkB,CAAA,EAAA,CAAA,CAAA;6GAEnB,eAAe,EAAA,CAAA,CAAA;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,YAAY,EAAE,CAAC,kBAAkB,CAAC;oBAClC,OAAO,EAAE,CAAC,kBAAkB,CAAC;iBAChC,CAAA;;;ACPD;;AAEG;;;;"}

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, HostBinding, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, InjectionToken, EventEmitter, TemplateRef, Optional, Inject, Output, ContentChild, HostListener, forwardRef, ElementRef, ContentChildren, ViewChildren, ViewChild, NgModule } from '@angular/core';
+import { Directive, HostBinding, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, InjectionToken, EventEmitter, TemplateRef, Optional, Inject, Output, ContentChild, HostListener, inject, NgZone, forwardRef, ElementRef, ContentChildren, ViewChildren, ViewChild, NgModule } from '@angular/core';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i6 from '@fundamental-ngx/core/overflow-layout';
@@ -15,13 +15,13 @@ import * as i1 from '@fundamental-ngx/core/content-density';
 import { contentDensityObserverProviders, DeprecatedCompactDirective, CONTENT_DENSITY_DIRECTIVE, ContentDensityModule } from '@fundamental-ngx/core/content-density';
 import * as i4$1 from '@fundamental-ngx/core/menu';
 import { MenuComponent, MenuModule } from '@fundamental-ngx/core/menu';
+import * as i5 from '@fundamental-ngx/core/scroll-spy';
+import { ScrollSpyDirective, ScrollSpyModule } from '@fundamental-ngx/core/scroll-spy';
 import * as i7 from '@fundamental-ngx/core/scrollbar';
 import { ScrollbarDirective, ScrollbarModule } from '@fundamental-ngx/core/scrollbar';
-import { startWith, map, takeUntil, filter, delay, switchMap, debounceTime, first as first$1 } from 'rxjs/operators';
+import { startWith, map, takeUntil, filter, delay, tap, switchMap, debounceTime, first as first$1 } from 'rxjs/operators';
 import * as i4 from '@fundamental-ngx/i18n';
 import { I18nModule } from '@fundamental-ngx/i18n';
-import * as i5 from '@fundamental-ngx/core/scroll-spy';
-import { ScrollSpyModule } from '@fundamental-ngx/core/scroll-spy';
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { ButtonModule } from '@fundamental-ngx/core/button';
 import { ListModule } from '@fundamental-ngx/core/list';
@@ -586,9 +586,8 @@ class TabListComponent {
         return (_a = this._scrollbar) === null || _a === void 0 ? void 0 : _a.elementRef;
     }
     /** @hidden */
-    constructor(_changeDetectorRef, _elRef, _contentDensityObserver, _onDestroy$) {
+    constructor(_changeDetectorRef, _contentDensityObserver, _onDestroy$) {
         this._changeDetectorRef = _changeDetectorRef;
-        this._elRef = _elRef;
         this._contentDensityObserver = _contentDensityObserver;
         this._onDestroy$ = _onDestroy$;
         /** Size of tab, it's mostly about adding spacing on tab container, available sizes 's' | 'm' | 'l' | 'xl' | 'xxl' */
@@ -626,6 +625,8 @@ class TabListComponent {
         this.tabPanelPropertyChanged = new Subject();
         /** @hidden */
         this._subscriptions = new Subscription();
+        /** @hidden */
+        this._zone = inject(NgZone);
     }
     /** @hidden */
     ngAfterContentInit() {
@@ -704,9 +705,10 @@ class TabListComponent {
     /** @hidden */
     _listenOnTabPanelsAndUpdateStorageStructures() {
         this._tabPanelsChange$
-            .pipe(map((tabPanels) => tabPanels.map((el) => { var _a; return ((_a = this._tabArray) === null || _a === void 0 ? void 0 : _a.find((tabInfo) => tabInfo.panel === el)) || new TabInfo(el); })))
-            .subscribe((tabs) => {
-            this._tabArray = tabs;
+            .pipe(map((tabPanels) => tabPanels.map((el) => { var _a; return ((_a = this._tabArray) === null || _a === void 0 ? void 0 : _a.find((tabInfo) => tabInfo.panel === el)) || new TabInfo(el); })), tap((tabs) => (this._tabArray = tabs)), switchMap(() => this._zone.onStable.pipe(startWith(this._zone.isStable))), takeUntil(this._onDestroy$))
+            .subscribe(() => {
+            var _a;
+            this.stackContent && ((_a = this._scrollSpy) === null || _a === void 0 ? void 0 : _a.onScroll(undefined, true));
         });
     }
     /** @hidden */
@@ -798,7 +800,7 @@ class TabListComponent {
         return !tabPanel.disabled && expand !== tabPanel.expanded && expand === false ? this.collapsibleTabs : true;
     }
 }
-TabListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TabListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.ContentDensityObserver }, { token: i2$1.DestroyedService }], target: i0.ɵɵFactoryTarget.Component });
+TabListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TabListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ContentDensityObserver }, { token: i2$1.DestroyedService }], target: i0.ɵɵFactoryTarget.Component });
 TabListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TabListComponent, selector: "fd-tab-list", inputs: { size: "size", mode: "mode", collapseOverflow: "collapseOverflow", maxVisibleTabs: "maxVisibleTabs", stackContent: "stackContent", maxContentHeight: "maxContentHeight", collapsibleTabs: "collapsibleTabs", expandOverflowText: "expandOverflowText", defaultTab: "defaultTab", selectDefaultOnTabsChange: "selectDefaultOnTabsChange", focusFirstFocusableElement: "focusFirstFocusableElement" }, outputs: { selectedTabChange: "selectedTabChange", visibleItemsCount: "visibleItemsCount", hiddenItemsCount: "hiddenItemsCount" }, host: { classAttribute: "fd-tabs-custom" }, providers: [
         contentDensityObserverProviders(),
         DestroyedService,
@@ -806,7 +808,7 @@ TabListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
             provide: LIST_COMPONENT,
             useExisting: forwardRef(() => TabListComponent)
         }
-    ], queries: [{ propertyName: "tabPanels", predicate: i0.forwardRef(function () { return TabPanelComponent; }) }], viewQueries: [{ propertyName: "overflowTrigger", first: true, predicate: TabItemExpandComponent, descendants: true, read: ElementRef }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true, read: ElementRef }, { propertyName: "_scrollbar", first: true, predicate: ScrollbarDirective, descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true, read: MenuComponent }, { propertyName: "_overflowLayout", first: true, predicate: OverflowLayoutComponent, descendants: true }, { propertyName: "tabHeaderLinks", predicate: TabLinkDirective, descendants: true }, { propertyName: "tabHeaders", predicate: TabItemDirective, descendants: true }], ngImport: i0, template: "<div #headerContainer role=\"tablist\" class=\"fd-tabs\" [class]=\"(mode ? 'fd-tabs--' + mode : '') + (' fd-tabs--' + size)\">\n    <fd-overflow-layout\n        [maxVisibleItems]=\"maxVisibleTabs\"\n        [enableKeyboardNavigation]=\"true\"\n        navigationTrigger=\"keydown\"\n        (hiddenItemsCount)=\"hiddenItemsCount.emit($event)\"\n        (visibleItemsCount)=\"visibleItemsCount.emit($event)\"\n    >\n        <ng-container *ngFor=\"let tab of _tabArray; let i = index; let last = last\">\n            <div\n                fd-tab-item\n                *fdOverflowItemRef=\"tab\"\n                fdOverflowLayoutItem\n                [forceVisibility]=\"tab.panel._forcedVisibility\"\n                [header]=\"tab.isHeader\"\n                [tabItemState]=\"tab.tabState\"\n            >\n                <a\n                    fd-tab-link\n                    role=\"tab\"\n                    [id]=\"tab.id\"\n                    [attr.aria-controls]=\"tab.panelId\"\n                    [attr.aria-label]=\"tab.ariaLabel || null\"\n                    [attr.aria-labelledby]=\"!tab.ariaLabel && tab.ariaLabelledBy ? tab.ariaLabelledBy : null\"\n                    fdOverflowLayoutFocusableItem\n                    [focusable]=\"tab.active\"\n                    [navigable]=\"!tab.disabled\"\n                    [active]=\"tab.active\"\n                    [disabled]=\"tab.disabled\"\n                    (keydown)=\"_tabHeaderKeydownHandler($event, tab.panel)\"\n                    (click)=\"_tabHeaderClickHandler(tab.panel)\"\n                >\n                    <ng-container *ngTemplateOutlet=\"tab.titleTemplate || null\"></ng-container>\n\n                    <ng-container *ngIf=\"!tab.titleTemplate\" [ngSwitch]=\"mode\">\n                        <ng-container *ngSwitchCase=\"'filter'\">\n                            <span fd-tab-header *ngIf=\"tab.isHeader\">\n                                <span fd-tab-counter-header *ngIf=\"tab.count\">{{ tab.count }}</span>\n                                <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n                            </span>\n                            <ng-container *ngIf=\"!tab.isHeader\">\n                                <span fd-tab-icon [icon]=\"tab.glyph\">\n                                    <p fd-tab-count>{{ tab.count }}</p>\n                                </span>\n                                <span fd-tab-label>{{ tab.title }}</span>\n                            </ng-container>\n                        </ng-container>\n\n                        <ng-container *ngSwitchCase=\"'icon-only'\">\n                            <span fd-tab-icon [icon]=\"tab.glyph\">\n                                <p fd-tab-count>{{ tab.count }}</p>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngSwitchCase=\"'process'\">\n                            <span fd-tab-icon *ngIf=\"tab.glyph\" [icon]=\"tab.glyph\"></span>\n                            <div fd-tab-process>\n                                <span fd-tab-label *ngIf=\"tab.count\">{{ tab.count }}</span>\n                                <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n                            </div>\n                        </ng-container>\n\n                        <ng-container *ngSwitchDefault>\n                            <p fd-tab-count *ngIf=\"tab.count\">{{ tab.count }}</p>\n                            <span fd-tab-tag>{{ tab.title }}</span>\n                        </ng-container>\n                    </ng-container>\n                </a>\n\n                <div fd-tab-process-icon *ngIf=\"mode === 'process' && !last\"></div>\n            </div>\n\n            <div *ngIf=\"tab.isHeader\" fd-tab-separator></div>\n        </ng-container>\n\n        <ng-container *fdOverflowExpand=\"let tabs; items: _tabArray\">\n            <fd-item-expand\n                [fdMenuTrigger]=\"menu\"\n                [label]=\"expandOverflowText\"\n                *ngIf=\"tabs.length > 0\"\n                (keydown)=\"_onTriggerKeydown($event, menu)\"\n            >\n            </fd-item-expand>\n\n            <fd-menu #menu>\n                <li\n                    fd-menu-item\n                    *ngFor=\"let tab of tabs\"\n                    (onSelect)=\"_overflowingTabHeaderClickHandler(tab.item.panel)\"\n                >\n                    <div fd-menu-interactive>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                !tab.item.titleTemplate && mode === 'icon-only'\n                                    ? iconOnlyTemplate\n                                    : tab.item.titleTemplate || textTitle;\n                                context: { $implicit: tab.item }\n                            \"\n                        ></ng-container>\n                    </div>\n                </li>\n            </fd-menu>\n        </ng-container>\n    </fd-overflow-layout>\n</div>\n\n<div\n    class=\"fd-tabs__content\"\n    [style.max-height]=\"maxContentHeight\"\n    fdScrollSpy\n    fd-scrollbar\n    [trackedTags]=\"['fd-tab']\"\n    [scrollSpyDisabled]=\"_disableScrollSpy\"\n    (spyChange)=\"_highlightActiveTab($event)\"\n>\n    <ng-content></ng-content>\n</div>\n\n<ng-template #textTitle let-tab>\n    <span fd-menu-title>{{ tab.title }}</span>\n</ng-template>\n\n<ng-template #iconOnlyTemplate let-tab>\n    <span fd-tab-icon [icon]=\"tab.glyph\">\n        <p fd-tab-count>{{ tab.count }}</p>\n    </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-tabs+()\n    .fd-tabs__item?+(([aria-selected=true]),)\n    .fd-tabs__link+((.is-selected,)\n.fd-tabs__panel+([aria-expanded]|.is-expanded)\n*/.fd-tabs{--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:2.625rem;--fdTabs_Label_Padding_Bottom:.375rem;--fdTabs_Filter_Link_Height:5.5rem;-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-ms-flex-wrap:wrap;-webkit-box-shadow:var(--sapContent_HeaderShadow);align-items:center;background-color:var(--sapObjectHeader_Background);border:0;border-color:var(--sapObjectHeader_BorderColor);box-shadow:var(--sapContent_HeaderShadow);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:flex;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-tabs:after,.fd-tabs:before{box-sizing:inherit;font-size:inherit}.fd-tabs__count{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0 0 .125rem}.fd-tabs__count:after,.fd-tabs__count:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link{-webkit-box-sizing:border-box;-webkit-transition:0s;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);cursor:pointer;display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:.875rem .75rem;position:relative;text-decoration:none;transition:0s}.fd-tabs__link:after,.fd-tabs__link:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link.is-selected .fd-tabs__icon,.fd-tabs__link[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__link.is-selected .fd-tabs__icon:after,.fd-tabs__link.is-selected .fd-tabs__tag:after,.fd-tabs__link[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__link[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__link.is-focus,.fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs__link.is-focus .fd-tabs__icon:before,.fd-tabs__link.is-focus .fd-tabs__tag:before,.fd-tabs__link:focus .fd-tabs__icon:before,.fd-tabs__link:focus .fd-tabs__tag:before{content:\"\";inset:0;outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--sapContent_FocusWidth);position:absolute}.fd-tabs__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 .25rem;padding:0;position:relative}.fd-tabs__item:after,.fd-tabs__item:before{box-sizing:inherit;font-size:inherit}.fd-tabs__item.is-selected .fd-tabs__tag,.fd-tabs__item[aria-selected=true] .fd-tabs__tag{color:var(--fdIcon_Tab_Bar_Selection_Color)}.fd-tabs__item.is-selected .fd-tabs__icon,.fd-tabs__item[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item.is-selected .fd-tabs__icon:after,.fd-tabs__item.is-selected .fd-tabs__link:after,.fd-tabs__item.is-selected .fd-tabs__tag:after,.fd-tabs__item[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__item--error .fd-tabs__icon{border-color:var(--sapErrorColor);color:var(--sapErrorColor)}.fd-tabs__item--error .fd-tabs__link .fd-tabs__tag{color:var(--sapErrorColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon{background-color:var(--sapErrorColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon:after,.fd-tabs__item--error.is-selected .fd-tabs__link:after,.fd-tabs__item--error.is-selected .fd-tabs__tag:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapErrorColor)}.fd-tabs__item--warning .fd-tabs__icon{border-color:var(--sapWarningColor);color:var(--sapWarningColor)}.fd-tabs__item--warning .fd-tabs__link .fd-tabs__tag{color:var(--sapWarningColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon{background-color:var(--sapWarningColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon:after,.fd-tabs__item--warning.is-selected .fd-tabs__link:after,.fd-tabs__item--warning.is-selected .fd-tabs__tag:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapWarningColor)}.fd-tabs__item--success .fd-tabs__icon{border-color:var(--sapSuccessColor);color:var(--sapSuccessColor)}.fd-tabs__item--success .fd-tabs__link .fd-tabs__tag{color:var(--sapSuccessColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSuccessColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon:after,.fd-tabs__item--success.is-selected .fd-tabs__link:after,.fd-tabs__item--success.is-selected .fd-tabs__tag:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapSuccessColor)}.fd-tabs__item--information .fd-tabs__icon{border-color:var(--sapInformationColor);color:var(--sapInformationColor)}.fd-tabs__item--information .fd-tabs__link .fd-tabs__tag{color:var(--sapInformationColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon{background-color:var(--sapInformationColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon:after,.fd-tabs__item--information.is-selected .fd-tabs__link:after,.fd-tabs__item--information.is-selected .fd-tabs__tag:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapInformationColor)}.fd-tabs__item--neutral .fd-tabs__icon{border-color:var(--sapNeutralColor);color:var(--sapNeutralColor)}.fd-tabs__item--neutral .fd-tabs__link .fd-tabs__tag{color:var(--sapNeutralColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon{background-color:var(--sapNeutralColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon:after,.fd-tabs__item--neutral.is-selected .fd-tabs__link:after,.fd-tabs__item--neutral.is-selected .fd-tabs__tag:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapNeutralColor)}.fd-tabs__item:first-child{margin-left:0}.fd-tabs__item:first-child .fd-tabs__link{margin-left:.1875rem;padding-left:0}.fd-tabs__item:first-child .fd-tabs__link[dir=rtl],[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{margin-left:0;margin-right:.1875rem}.fd-tabs__item[dir=rtl]:first-child,[dir=rtl] .fd-tabs__item:first-child{margin-left:.25rem;margin-right:0}.fd-tabs__item[dir=rtl]:first-child .fd-tabs__link,[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{padding-left:.875rem;padding-right:0}.fd-tabs__icon{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;border:var(--fdIcon_Tab_Bar_Icon_Border_Weight) solid var(--fdIcon_Tab_Bar_Icon_Border_Color);border-radius:50%;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdIcon_Tab_Bar_Inactive_Tab_Icon_Color);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdTabs_Icon_Selection_Height);justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 .188rem;padding:0;position:relative;width:var(--fdTabs_Icon_Selection_Height)}.fd-tabs__icon:after,.fd-tabs__icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__icon [class*=sap-icon],.fd-tabs__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;font-size:var(--fdTabs_Icon_Size);line-height:1}.fd-tabs__icon:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__tag{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0;position:relative}.fd-tabs__tag:after,.fd-tabs__tag:before{box-sizing:inherit;font-size:inherit}.fd-tabs__tag:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__panel{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__panel:after,.fd-tabs__panel:before{box-sizing:inherit;font-size:inherit}.fd-tabs__panel[aria-expanded=false]{display:none}.fd-tabs__panel.is-expanded,.fd-tabs__panel[aria-expanded=true]{display:block}.fd-tabs__counter-header{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1.5rem;font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;padding:0 .5rem 0 0}.fd-tabs__counter-header:after,.fd-tabs__counter-header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 0 0 auto;padding:0}.fd-tabs__overflow:after,.fd-tabs__overflow:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow [class*=sap-icon],.fd-tabs__overflow[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;line-height:1}.fd-tabs__process-icon{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1rem;font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1;margin:0;padding:0 .5rem}.fd-tabs__process-icon:after,.fd-tabs__process-icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__process-icon:before{content:\"\\e0c7\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-tabs__label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;padding:0 0 0 .125rem}.fd-tabs__label:after,.fd-tabs__label:before{box-sizing:inherit;font-size:inherit}.fd-tabs__label:first-child{padding-bottom:var(--fdTabs_Label_Padding_Bottom)}.fd-tabs__separator{-webkit-box-sizing:border-box;border:0;border-right:solid var(--sapGroup_TitleBorderColor);border-right-width:.0625rem;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;line-height:var(--sapContent_LineHeight);line-height:2rem;margin:0 .25rem;padding:0}.fd-tabs__separator:after,.fd-tabs__separator:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__header:after,.fd-tabs__header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header .fd-tabs__label{max-width:4rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count,.fd-tabs--process .fd-tabs__count{font-size:var(--sapFontSmallSize)}.fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--icon-only .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{margin:0}.fd-tabs--icon-only .fd-tabs__link,.fd-tabs--process .fd-tabs__link{padding-bottom:1rem;padding-top:1rem}.fd-tabs--icon-only .fd-tabs__icon:after,.fd-tabs--process .fd-tabs__icon:after{bottom:-1.0625rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count{left:calc(100% + .1875rem);position:absolute;top:0}.fd-tabs--filter[dir=rtl] .fd-tabs__count,.fd-tabs--icon-only[dir=rtl] .fd-tabs__count,[dir=rtl] .fd-tabs--filter .fd-tabs__count,[dir=rtl] .fd-tabs--icon-only .fd-tabs__count{left:auto;right:calc(100% + .1875rem)}.fd-tabs--process .fd-tabs__item{margin:0 .25rem 0 0}.fd-tabs--process .fd-tabs__item,.fd-tabs--process .fd-tabs__link{align-items:center;display:flex}.fd-tabs--process .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--process .fd-tabs__icon{margin:0 .1875rem}.fd-tabs--process .fd-tabs__label{line-height:.875rem;max-width:7.5rem;overflow:hidden;white-space:nowrap}.fd-tabs--process[dir=rtl] .fd-tabs__item,[dir=rtl] .fd-tabs--process .fd-tabs__item{margin:0 0 0 .25rem}.fd-tabs--process[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--filter{align-items:center;display:flex}.fd-tabs--filter .fd-tabs__item{margin:0;padding:0 .25rem;width:5.375rem}.fd-tabs--filter .fd-tabs__item[dir=rtl],[dir=rtl] .fd-tabs--filter .fd-tabs__item{margin:0}.fd-tabs--filter .fd-tabs__item--header{width:auto}.fd-tabs--filter .fd-tabs__icon{margin-bottom:.375rem}.fd-tabs--filter .fd-tabs__icon:after{content:none}.fd-tabs--filter .fd-tabs__label{line-height:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-tabs--filter .fd-tabs__link{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:flex;flex-direction:column;height:var(--fdTabs_Filter_Link_Height);justify-content:center;padding:.875rem .188rem .625rem;position:relative;text-align:center}.fd-tabs--filter .fd-tabs__link:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;bottom:0;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs--filter .fd-tabs__link.is-focus,.fd-tabs--filter .fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs--filter[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link{padding-left:.188rem;padding-right:.188rem}.fd-tabs[class*=-compact],.fd-tabs[class*=-condensed],[class*=-compact] .fd-tabs:not([class*=-cozy]),[class*=-condensed] .fd-tabs:not([class*=-cozy]){--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:1.875rem;--fdTabs_Label_Padding_Bottom:.25rem;--fdTabs_Filter_Link_Height:4.75rem}.fd-tabs--s{padding:0 1rem}.fd-tabs--l,.fd-tabs--m{padding:0 2rem}.fd-tabs--xl,.fd-tabs--xxl{padding:0 3rem}.fd-tabs[dir=rtl] .fd-tabs__process-icon,[dir=rtl] .fd-tabs .fd-tabs__process-icon{transform:rotate(180deg)}.fd-tabs[dir=rtl] .fd-tabs__counter-header,[dir=rtl] .fd-tabs .fd-tabs__counter-header{padding-left:.5rem;padding-right:0}.fd-tabs[dir=rtl] .fd-tabs__overflow,[dir=rtl] .fd-tabs .fd-tabs__overflow{margin-left:0;margin-right:auto}.fd-tabs__process{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__process:after,.fd-tabs__process:before{box-sizing:inherit;font-size:inherit}.fd-tabs-custom{display:flex;flex-direction:column;height:100%}.fd-tabs-custom .is-disabled{pointer-events:none;opacity:.4}.fd-tabs{flex-grow:0;flex-wrap:nowrap}.fd-tabs__content{overflow-y:auto;flex-grow:1}.fd-tabs__item{flex-shrink:0}.fd-tabs__tag{white-space:nowrap}.fd-tabs__wrapper{flex-grow:1;display:flex;flex-wrap:wrap;align-items:center}.fd-tabs__wrapper--collapsible{overflow:hidden;flex-wrap:nowrap}.fd-tabs .fd-overflow-layout__items-container .fd-tabs__item:first-child{margin-left:.25rem}.fd-tabs .fd-overflow-layout__items-container .fd-tabs__item:first-child .fd-tabs__link{margin:0;padding:.875rem .75rem}.fd-tabs .fd-overflow-layout__items-container .fd-overflow-layout__item--first .fd-tabs__item{margin-left:0}.fd-tabs .fd-overflow-layout__items-container .fd-overflow-layout__item--first .fd-tabs__item .fd-tabs__link{margin-left:.1875rem;padding-left:0}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4$1.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "tabbableScrollbar", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i4$1.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i4$1.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i4$1.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i4$1.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "directive", type: i5.ScrollSpyDirective, selector: "[fdScrollSpy]", inputs: ["trackedTags", "fireEmpty", "targetPercent", "targetOffset", "scrollSpyDisabled"], outputs: ["spyChange"] }, { kind: "component", type: i6.OverflowLayoutComponent, selector: "fd-overflow-layout", inputs: ["maxVisibleItems", "navigationTrigger", "showMorePosition", "reverseHiddenItems", "enableKeyboardNavigation", "moreItemsButtonText"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "directive", type: i6.OverflowItemRefDirective, selector: "[fdOverflowItemRef]", inputs: ["fdOverflowItemRef"] }, { kind: "directive", type: i6.OverflowExpandDirective, selector: "[fdOverflowExpand]", inputs: ["fdOverflowExpandItems"] }, { kind: "directive", type: i6.OverflowLayoutItemDirective, selector: "[fdOverflowLayoutItem]", inputs: ["forceVisibility"], outputs: ["hiddenChange"] }, { kind: "directive", type: i6.OverflowLayoutFocusableItemDirective, selector: "[fdOverflowLayoutFocusableItem], [fdOverflowLayoutItem][focusable]", inputs: ["focusable", "navigable"] }, { kind: "directive", type: i7.ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible", "overrideTabindex"] }, { kind: "directive", type: TabLinkDirective, selector: "[fd-tab-link]", inputs: ["active", "disabled"], outputs: ["keyDown", "focused"] }, { kind: "directive", type: TabItemDirective, selector: "[fd-tab-item]", inputs: ["class", "tabItemState", "header", "disabled", "fdTabItemClass"] }, { kind: "directive", type: TabTagDirective, selector: "[fdTabTag], [fd-tab-tag]" }, { kind: "component", type: TabIconComponent, selector: "[fd-tab-icon]", inputs: ["class", "icon"] }, { kind: "directive", type: TabCountDirective, selector: "[fdTabCount], [fd-tab-count]" }, { kind: "directive", type: TabLabelDirective, selector: "[fdTabLabel], [fd-tab-label]" }, { kind: "directive", type: TabProcessDirective, selector: "[fdTabProcess], [fd-tab-process]" }, { kind: "directive", type: TabHeaderDirective, selector: "[fdTabHeader], [fd-tab-header]" }, { kind: "component", type: TabItemExpandComponent, selector: "fd-item-expand", inputs: ["label"] }, { kind: "directive", type: TabCounterHeaderDirective, selector: "[fdTabCounterHeader], [fd-tab-counter-header]" }, { kind: "directive", type: TabProcessIconDirective, selector: "[fdTabProcessIcon], [fd-tab-process-icon]" }, { kind: "directive", type: TabSeparatorDirective, selector: "[fdTabSeparator], [fd-tab-separator]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "tabPanels", predicate: i0.forwardRef(function () { return TabPanelComponent; }) }], viewQueries: [{ propertyName: "overflowTrigger", first: true, predicate: TabItemExpandComponent, descendants: true, read: ElementRef }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true, read: ElementRef }, { propertyName: "_scrollbar", first: true, predicate: ScrollbarDirective, descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true, read: MenuComponent }, { propertyName: "_overflowLayout", first: true, predicate: OverflowLayoutComponent, descendants: true }, { propertyName: "_scrollSpy", first: true, predicate: ["scrollSpy"], descendants: true, read: ScrollSpyDirective }, { propertyName: "tabHeaderLinks", predicate: TabLinkDirective, descendants: true }, { propertyName: "tabHeaders", predicate: TabItemDirective, descendants: true }], ngImport: i0, template: "<div #headerContainer role=\"tablist\" class=\"fd-tabs\" [class]=\"(mode ? 'fd-tabs--' + mode : '') + (' fd-tabs--' + size)\">\n    <fd-overflow-layout\n        [maxVisibleItems]=\"maxVisibleTabs\"\n        [enableKeyboardNavigation]=\"true\"\n        navigationTrigger=\"keydown\"\n        (hiddenItemsCount)=\"hiddenItemsCount.emit($event)\"\n        (visibleItemsCount)=\"visibleItemsCount.emit($event)\"\n    >\n        <ng-container *ngFor=\"let tab of _tabArray; let i = index; let last = last\">\n            <div\n                fd-tab-item\n                *fdOverflowItemRef=\"tab\"\n                fdOverflowLayoutItem\n                [forceVisibility]=\"tab.panel._forcedVisibility\"\n                [header]=\"tab.isHeader\"\n                [tabItemState]=\"tab.tabState\"\n            >\n                <a\n                    fd-tab-link\n                    role=\"tab\"\n                    [id]=\"tab.id\"\n                    [attr.aria-controls]=\"tab.panelId\"\n                    [attr.aria-label]=\"tab.ariaLabel || null\"\n                    [attr.aria-labelledby]=\"!tab.ariaLabel && tab.ariaLabelledBy ? tab.ariaLabelledBy : null\"\n                    fdOverflowLayoutFocusableItem\n                    [focusable]=\"tab.active\"\n                    [navigable]=\"!tab.disabled\"\n                    [active]=\"tab.active\"\n                    [disabled]=\"tab.disabled\"\n                    (keydown)=\"_tabHeaderKeydownHandler($event, tab.panel)\"\n                    (click)=\"_tabHeaderClickHandler(tab.panel)\"\n                >\n                    <ng-container *ngTemplateOutlet=\"tab.titleTemplate || null\"></ng-container>\n\n                    <ng-container *ngIf=\"!tab.titleTemplate\" [ngSwitch]=\"mode\">\n                        <ng-container *ngSwitchCase=\"'filter'\">\n                            <span fd-tab-header *ngIf=\"tab.isHeader\">\n                                <span fd-tab-counter-header *ngIf=\"tab.count\">{{ tab.count }}</span>\n                                <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n                            </span>\n                            <ng-container *ngIf=\"!tab.isHeader\">\n                                <span fd-tab-icon [icon]=\"tab.glyph\">\n                                    <p fd-tab-count>{{ tab.count }}</p>\n                                </span>\n                                <span fd-tab-label>{{ tab.title }}</span>\n                            </ng-container>\n                        </ng-container>\n\n                        <ng-container *ngSwitchCase=\"'icon-only'\">\n                            <span fd-tab-icon [icon]=\"tab.glyph\">\n                                <p fd-tab-count>{{ tab.count }}</p>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngSwitchCase=\"'process'\">\n                            <span fd-tab-icon *ngIf=\"tab.glyph\" [icon]=\"tab.glyph\"></span>\n                            <div fd-tab-process>\n                                <span fd-tab-label *ngIf=\"tab.count\">{{ tab.count }}</span>\n                                <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n                            </div>\n                        </ng-container>\n\n                        <ng-container *ngSwitchDefault>\n                            <p fd-tab-count *ngIf=\"tab.count\">{{ tab.count }}</p>\n                            <span fd-tab-tag>{{ tab.title }}</span>\n                        </ng-container>\n                    </ng-container>\n                </a>\n\n                <div fd-tab-process-icon *ngIf=\"mode === 'process' && !last\"></div>\n            </div>\n\n            <div *ngIf=\"tab.isHeader\" fd-tab-separator></div>\n        </ng-container>\n\n        <ng-container *fdOverflowExpand=\"let tabs; items: _tabArray\">\n            <fd-item-expand\n                [fdMenuTrigger]=\"menu\"\n                [label]=\"expandOverflowText\"\n                *ngIf=\"tabs.length > 0\"\n                (keydown)=\"_onTriggerKeydown($event, menu)\"\n            >\n            </fd-item-expand>\n\n            <fd-menu #menu>\n                <li\n                    fd-menu-item\n                    *ngFor=\"let tab of tabs\"\n                    (onSelect)=\"_overflowingTabHeaderClickHandler(tab.item.panel)\"\n                >\n                    <div fd-menu-interactive>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                !tab.item.titleTemplate && mode === 'icon-only'\n                                    ? iconOnlyTemplate\n                                    : tab.item.titleTemplate || textTitle;\n                                context: { $implicit: tab.item }\n                            \"\n                        ></ng-container>\n                    </div>\n                </li>\n            </fd-menu>\n        </ng-container>\n    </fd-overflow-layout>\n</div>\n\n<div\n    class=\"fd-tabs__content\"\n    [style.max-height]=\"maxContentHeight\"\n    fdScrollSpy\n    #scrollSpy=\"fdScrollSpy\"\n    fd-scrollbar\n    [trackedTags]=\"['fd-tab']\"\n    [scrollSpyDisabled]=\"_disableScrollSpy\"\n    (spyChange)=\"_highlightActiveTab($event)\"\n>\n    <ng-content></ng-content>\n</div>\n\n<ng-template #textTitle let-tab>\n    <span fd-menu-title>{{ tab.title }}</span>\n</ng-template>\n\n<ng-template #iconOnlyTemplate let-tab>\n    <span fd-tab-icon [icon]=\"tab.glyph\">\n        <p fd-tab-count>{{ tab.count }}</p>\n    </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-tabs+()\n    .fd-tabs__item?+(([aria-selected=true]),)\n    .fd-tabs__link+((.is-selected,)\n.fd-tabs__panel+([aria-expanded]|.is-expanded)\n*/.fd-tabs{--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:2.625rem;--fdTabs_Label_Padding_Bottom:.375rem;--fdTabs_Filter_Link_Height:5.5rem;-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-ms-flex-wrap:wrap;-webkit-box-shadow:var(--sapContent_HeaderShadow);align-items:center;background-color:var(--sapObjectHeader_Background);border:0;border-color:var(--sapObjectHeader_BorderColor);box-shadow:var(--sapContent_HeaderShadow);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:flex;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-tabs:after,.fd-tabs:before{box-sizing:inherit;font-size:inherit}.fd-tabs__count{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0 0 .125rem}.fd-tabs__count:after,.fd-tabs__count:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link{-webkit-box-sizing:border-box;-webkit-transition:0s;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);cursor:pointer;display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:.875rem .75rem;position:relative;text-decoration:none;transition:0s}.fd-tabs__link:after,.fd-tabs__link:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link.is-selected .fd-tabs__icon,.fd-tabs__link[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__link.is-selected .fd-tabs__icon:after,.fd-tabs__link.is-selected .fd-tabs__tag:after,.fd-tabs__link[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__link[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__link.is-focus,.fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs__link.is-focus .fd-tabs__icon:before,.fd-tabs__link.is-focus .fd-tabs__tag:before,.fd-tabs__link:focus .fd-tabs__icon:before,.fd-tabs__link:focus .fd-tabs__tag:before{content:\"\";inset:0;outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--sapContent_FocusWidth);position:absolute}.fd-tabs__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 .25rem;padding:0;position:relative}.fd-tabs__item:after,.fd-tabs__item:before{box-sizing:inherit;font-size:inherit}.fd-tabs__item.is-selected .fd-tabs__tag,.fd-tabs__item[aria-selected=true] .fd-tabs__tag{color:var(--fdIcon_Tab_Bar_Selection_Color)}.fd-tabs__item.is-selected .fd-tabs__icon,.fd-tabs__item[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item.is-selected .fd-tabs__icon:after,.fd-tabs__item.is-selected .fd-tabs__link:after,.fd-tabs__item.is-selected .fd-tabs__tag:after,.fd-tabs__item[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__item--error .fd-tabs__icon{border-color:var(--sapErrorColor);color:var(--sapErrorColor)}.fd-tabs__item--error .fd-tabs__link .fd-tabs__tag{color:var(--sapErrorColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon{background-color:var(--sapErrorColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon:after,.fd-tabs__item--error.is-selected .fd-tabs__link:after,.fd-tabs__item--error.is-selected .fd-tabs__tag:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapErrorColor)}.fd-tabs__item--warning .fd-tabs__icon{border-color:var(--sapWarningColor);color:var(--sapWarningColor)}.fd-tabs__item--warning .fd-tabs__link .fd-tabs__tag{color:var(--sapWarningColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon{background-color:var(--sapWarningColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon:after,.fd-tabs__item--warning.is-selected .fd-tabs__link:after,.fd-tabs__item--warning.is-selected .fd-tabs__tag:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapWarningColor)}.fd-tabs__item--success .fd-tabs__icon{border-color:var(--sapSuccessColor);color:var(--sapSuccessColor)}.fd-tabs__item--success .fd-tabs__link .fd-tabs__tag{color:var(--sapSuccessColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSuccessColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon:after,.fd-tabs__item--success.is-selected .fd-tabs__link:after,.fd-tabs__item--success.is-selected .fd-tabs__tag:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapSuccessColor)}.fd-tabs__item--information .fd-tabs__icon{border-color:var(--sapInformationColor);color:var(--sapInformationColor)}.fd-tabs__item--information .fd-tabs__link .fd-tabs__tag{color:var(--sapInformationColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon{background-color:var(--sapInformationColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon:after,.fd-tabs__item--information.is-selected .fd-tabs__link:after,.fd-tabs__item--information.is-selected .fd-tabs__tag:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapInformationColor)}.fd-tabs__item--neutral .fd-tabs__icon{border-color:var(--sapNeutralColor);color:var(--sapNeutralColor)}.fd-tabs__item--neutral .fd-tabs__link .fd-tabs__tag{color:var(--sapNeutralColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon{background-color:var(--sapNeutralColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon:after,.fd-tabs__item--neutral.is-selected .fd-tabs__link:after,.fd-tabs__item--neutral.is-selected .fd-tabs__tag:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapNeutralColor)}.fd-tabs__item:first-child{margin-left:0}.fd-tabs__item:first-child .fd-tabs__link{margin-left:.1875rem;padding-left:0}.fd-tabs__item:first-child .fd-tabs__link[dir=rtl],[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{margin-left:0;margin-right:.1875rem}.fd-tabs__item[dir=rtl]:first-child,[dir=rtl] .fd-tabs__item:first-child{margin-left:.25rem;margin-right:0}.fd-tabs__item[dir=rtl]:first-child .fd-tabs__link,[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{padding-left:.875rem;padding-right:0}.fd-tabs__icon{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;border:var(--fdIcon_Tab_Bar_Icon_Border_Weight) solid var(--fdIcon_Tab_Bar_Icon_Border_Color);border-radius:50%;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdIcon_Tab_Bar_Inactive_Tab_Icon_Color);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdTabs_Icon_Selection_Height);justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 .188rem;padding:0;position:relative;width:var(--fdTabs_Icon_Selection_Height)}.fd-tabs__icon:after,.fd-tabs__icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__icon [class*=sap-icon],.fd-tabs__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;font-size:var(--fdTabs_Icon_Size);line-height:1}.fd-tabs__icon:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__tag{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0;position:relative}.fd-tabs__tag:after,.fd-tabs__tag:before{box-sizing:inherit;font-size:inherit}.fd-tabs__tag:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__panel{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__panel:after,.fd-tabs__panel:before{box-sizing:inherit;font-size:inherit}.fd-tabs__panel[aria-expanded=false]{display:none}.fd-tabs__panel.is-expanded,.fd-tabs__panel[aria-expanded=true]{display:block}.fd-tabs__counter-header{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1.5rem;font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;padding:0 .5rem 0 0}.fd-tabs__counter-header:after,.fd-tabs__counter-header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 0 0 auto;padding:0}.fd-tabs__overflow:after,.fd-tabs__overflow:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow [class*=sap-icon],.fd-tabs__overflow[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;line-height:1}.fd-tabs__process-icon{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1rem;font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1;margin:0;padding:0 .5rem}.fd-tabs__process-icon:after,.fd-tabs__process-icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__process-icon:before{content:\"\\e0c7\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-tabs__label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;padding:0 0 0 .125rem}.fd-tabs__label:after,.fd-tabs__label:before{box-sizing:inherit;font-size:inherit}.fd-tabs__label:first-child{padding-bottom:var(--fdTabs_Label_Padding_Bottom)}.fd-tabs__separator{-webkit-box-sizing:border-box;border:0;border-right:solid var(--sapGroup_TitleBorderColor);border-right-width:.0625rem;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;line-height:var(--sapContent_LineHeight);line-height:2rem;margin:0 .25rem;padding:0}.fd-tabs__separator:after,.fd-tabs__separator:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__header:after,.fd-tabs__header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header .fd-tabs__label{max-width:4rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count,.fd-tabs--process .fd-tabs__count{font-size:var(--sapFontSmallSize)}.fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--icon-only .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{margin:0}.fd-tabs--icon-only .fd-tabs__link,.fd-tabs--process .fd-tabs__link{padding-bottom:1rem;padding-top:1rem}.fd-tabs--icon-only .fd-tabs__icon:after,.fd-tabs--process .fd-tabs__icon:after{bottom:-1.0625rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count{left:calc(100% + .1875rem);position:absolute;top:0}.fd-tabs--filter[dir=rtl] .fd-tabs__count,.fd-tabs--icon-only[dir=rtl] .fd-tabs__count,[dir=rtl] .fd-tabs--filter .fd-tabs__count,[dir=rtl] .fd-tabs--icon-only .fd-tabs__count{left:auto;right:calc(100% + .1875rem)}.fd-tabs--process .fd-tabs__item{margin:0 .25rem 0 0}.fd-tabs--process .fd-tabs__item,.fd-tabs--process .fd-tabs__link{align-items:center;display:flex}.fd-tabs--process .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--process .fd-tabs__icon{margin:0 .1875rem}.fd-tabs--process .fd-tabs__label{line-height:.875rem;max-width:7.5rem;overflow:hidden;white-space:nowrap}.fd-tabs--process[dir=rtl] .fd-tabs__item,[dir=rtl] .fd-tabs--process .fd-tabs__item{margin:0 0 0 .25rem}.fd-tabs--process[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--filter{align-items:center;display:flex}.fd-tabs--filter .fd-tabs__item{margin:0;padding:0 .25rem;width:5.375rem}.fd-tabs--filter .fd-tabs__item[dir=rtl],[dir=rtl] .fd-tabs--filter .fd-tabs__item{margin:0}.fd-tabs--filter .fd-tabs__item--header{width:auto}.fd-tabs--filter .fd-tabs__icon{margin-bottom:.375rem}.fd-tabs--filter .fd-tabs__icon:after{content:none}.fd-tabs--filter .fd-tabs__label{line-height:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-tabs--filter .fd-tabs__link{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:flex;flex-direction:column;height:var(--fdTabs_Filter_Link_Height);justify-content:center;padding:.875rem .188rem .625rem;position:relative;text-align:center}.fd-tabs--filter .fd-tabs__link:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;bottom:0;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs--filter .fd-tabs__link.is-focus,.fd-tabs--filter .fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs--filter[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link{padding-left:.188rem;padding-right:.188rem}.fd-tabs[class*=-compact],.fd-tabs[class*=-condensed],[class*=-compact] .fd-tabs:not([class*=-cozy]),[class*=-condensed] .fd-tabs:not([class*=-cozy]){--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:1.875rem;--fdTabs_Label_Padding_Bottom:.25rem;--fdTabs_Filter_Link_Height:4.75rem}.fd-tabs--s{padding:0 1rem}.fd-tabs--l,.fd-tabs--m{padding:0 2rem}.fd-tabs--xl,.fd-tabs--xxl{padding:0 3rem}.fd-tabs[dir=rtl] .fd-tabs__process-icon,[dir=rtl] .fd-tabs .fd-tabs__process-icon{transform:rotate(180deg)}.fd-tabs[dir=rtl] .fd-tabs__counter-header,[dir=rtl] .fd-tabs .fd-tabs__counter-header{padding-left:.5rem;padding-right:0}.fd-tabs[dir=rtl] .fd-tabs__overflow,[dir=rtl] .fd-tabs .fd-tabs__overflow{margin-left:0;margin-right:auto}.fd-tabs__process{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__process:after,.fd-tabs__process:before{box-sizing:inherit;font-size:inherit}.fd-tabs-custom{display:flex;flex-direction:column;height:100%}.fd-tabs-custom .is-disabled{pointer-events:none;opacity:.4}.fd-tabs{flex-grow:0;flex-wrap:nowrap}.fd-tabs__content{overflow-y:auto;flex-grow:1}.fd-tabs__item{flex-shrink:0}.fd-tabs__tag{white-space:nowrap}.fd-tabs__wrapper{flex-grow:1;display:flex;flex-wrap:wrap;align-items:center}.fd-tabs__wrapper--collapsible{overflow:hidden;flex-wrap:nowrap}.fd-tabs .fd-overflow-layout__items-container .fd-tabs__item:first-child{margin-left:.25rem}.fd-tabs .fd-overflow-layout__items-container .fd-tabs__item:first-child .fd-tabs__link{margin:0;padding:.875rem .75rem}.fd-tabs .fd-overflow-layout__items-container .fd-overflow-layout__item--first .fd-tabs__item{margin-left:0}.fd-tabs .fd-overflow-layout__items-container .fd-overflow-layout__item--first .fd-tabs__item .fd-tabs__link{margin-left:.1875rem;padding-left:0}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4$1.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "tabbableScrollbar", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i4$1.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i4$1.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i4$1.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i4$1.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "directive", type: i5.ScrollSpyDirective, selector: "[fdScrollSpy]", inputs: ["trackedTags", "fireEmpty", "targetPercent", "targetOffset", "scrollSpyDisabled"], outputs: ["spyChange"], exportAs: ["fdScrollSpy"] }, { kind: "component", type: i6.OverflowLayoutComponent, selector: "fd-overflow-layout", inputs: ["maxVisibleItems", "navigationTrigger", "showMorePosition", "reverseHiddenItems", "enableKeyboardNavigation", "moreItemsButtonText"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "directive", type: i6.OverflowItemRefDirective, selector: "[fdOverflowItemRef]", inputs: ["fdOverflowItemRef"] }, { kind: "directive", type: i6.OverflowExpandDirective, selector: "[fdOverflowExpand]", inputs: ["fdOverflowExpandItems"] }, { kind: "directive", type: i6.OverflowLayoutItemDirective, selector: "[fdOverflowLayoutItem]", inputs: ["forceVisibility"], outputs: ["hiddenChange"] }, { kind: "directive", type: i6.OverflowLayoutFocusableItemDirective, selector: "[fdOverflowLayoutFocusableItem], [fdOverflowLayoutItem][focusable]", inputs: ["focusable", "navigable"] }, { kind: "directive", type: i7.ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible", "overrideTabindex"] }, { kind: "directive", type: TabLinkDirective, selector: "[fd-tab-link]", inputs: ["active", "disabled"], outputs: ["keyDown", "focused"] }, { kind: "directive", type: TabItemDirective, selector: "[fd-tab-item]", inputs: ["class", "tabItemState", "header", "disabled", "fdTabItemClass"] }, { kind: "directive", type: TabTagDirective, selector: "[fdTabTag], [fd-tab-tag]" }, { kind: "component", type: TabIconComponent, selector: "[fd-tab-icon]", inputs: ["class", "icon"] }, { kind: "directive", type: TabCountDirective, selector: "[fdTabCount], [fd-tab-count]" }, { kind: "directive", type: TabLabelDirective, selector: "[fdTabLabel], [fd-tab-label]" }, { kind: "directive", type: TabProcessDirective, selector: "[fdTabProcess], [fd-tab-process]" }, { kind: "directive", type: TabHeaderDirective, selector: "[fdTabHeader], [fd-tab-header]" }, { kind: "component", type: TabItemExpandComponent, selector: "fd-item-expand", inputs: ["label"] }, { kind: "directive", type: TabCounterHeaderDirective, selector: "[fdTabCounterHeader], [fd-tab-counter-header]" }, { kind: "directive", type: TabProcessIconDirective, selector: "[fdTabProcessIcon], [fd-tab-process-icon]" }, { kind: "directive", type: TabSeparatorDirective, selector: "[fdTabSeparator], [fd-tab-separator]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TabListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-tab-list', host: {
@@ -818,8 +820,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             provide: LIST_COMPONENT,
                             useExisting: forwardRef(() => TabListComponent)
                         }
-                    ], template: "<div #headerContainer role=\"tablist\" class=\"fd-tabs\" [class]=\"(mode ? 'fd-tabs--' + mode : '') + (' fd-tabs--' + size)\">\n    <fd-overflow-layout\n        [maxVisibleItems]=\"maxVisibleTabs\"\n        [enableKeyboardNavigation]=\"true\"\n        navigationTrigger=\"keydown\"\n        (hiddenItemsCount)=\"hiddenItemsCount.emit($event)\"\n        (visibleItemsCount)=\"visibleItemsCount.emit($event)\"\n    >\n        <ng-container *ngFor=\"let tab of _tabArray; let i = index; let last = last\">\n            <div\n                fd-tab-item\n                *fdOverflowItemRef=\"tab\"\n                fdOverflowLayoutItem\n                [forceVisibility]=\"tab.panel._forcedVisibility\"\n                [header]=\"tab.isHeader\"\n                [tabItemState]=\"tab.tabState\"\n            >\n                <a\n                    fd-tab-link\n                    role=\"tab\"\n                    [id]=\"tab.id\"\n                    [attr.aria-controls]=\"tab.panelId\"\n                    [attr.aria-label]=\"tab.ariaLabel || null\"\n                    [attr.aria-labelledby]=\"!tab.ariaLabel && tab.ariaLabelledBy ? tab.ariaLabelledBy : null\"\n                    fdOverflowLayoutFocusableItem\n                    [focusable]=\"tab.active\"\n                    [navigable]=\"!tab.disabled\"\n                    [active]=\"tab.active\"\n                    [disabled]=\"tab.disabled\"\n                    (keydown)=\"_tabHeaderKeydownHandler($event, tab.panel)\"\n                    (click)=\"_tabHeaderClickHandler(tab.panel)\"\n                >\n                    <ng-container *ngTemplateOutlet=\"tab.titleTemplate || null\"></ng-container>\n\n                    <ng-container *ngIf=\"!tab.titleTemplate\" [ngSwitch]=\"mode\">\n                        <ng-container *ngSwitchCase=\"'filter'\">\n                            <span fd-tab-header *ngIf=\"tab.isHeader\">\n                                <span fd-tab-counter-header *ngIf=\"tab.count\">{{ tab.count }}</span>\n                                <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n                            </span>\n                            <ng-container *ngIf=\"!tab.isHeader\">\n                                <span fd-tab-icon [icon]=\"tab.glyph\">\n                                    <p fd-tab-count>{{ tab.count }}</p>\n                                </span>\n                                <span fd-tab-label>{{ tab.title }}</span>\n                            </ng-container>\n                        </ng-container>\n\n                        <ng-container *ngSwitchCase=\"'icon-only'\">\n                            <span fd-tab-icon [icon]=\"tab.glyph\">\n                                <p fd-tab-count>{{ tab.count }}</p>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngSwitchCase=\"'process'\">\n                            <span fd-tab-icon *ngIf=\"tab.glyph\" [icon]=\"tab.glyph\"></span>\n                            <div fd-tab-process>\n                                <span fd-tab-label *ngIf=\"tab.count\">{{ tab.count }}</span>\n                                <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n                            </div>\n                        </ng-container>\n\n                        <ng-container *ngSwitchDefault>\n                            <p fd-tab-count *ngIf=\"tab.count\">{{ tab.count }}</p>\n                            <span fd-tab-tag>{{ tab.title }}</span>\n                        </ng-container>\n                    </ng-container>\n                </a>\n\n                <div fd-tab-process-icon *ngIf=\"mode === 'process' && !last\"></div>\n            </div>\n\n            <div *ngIf=\"tab.isHeader\" fd-tab-separator></div>\n        </ng-container>\n\n        <ng-container *fdOverflowExpand=\"let tabs; items: _tabArray\">\n            <fd-item-expand\n                [fdMenuTrigger]=\"menu\"\n                [label]=\"expandOverflowText\"\n                *ngIf=\"tabs.length > 0\"\n                (keydown)=\"_onTriggerKeydown($event, menu)\"\n            >\n            </fd-item-expand>\n\n            <fd-menu #menu>\n                <li\n                    fd-menu-item\n                    *ngFor=\"let tab of tabs\"\n                    (onSelect)=\"_overflowingTabHeaderClickHandler(tab.item.panel)\"\n                >\n                    <div fd-menu-interactive>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                !tab.item.titleTemplate && mode === 'icon-only'\n                                    ? iconOnlyTemplate\n                                    : tab.item.titleTemplate || textTitle;\n                                context: { $implicit: tab.item }\n                            \"\n                        ></ng-container>\n                    </div>\n                </li>\n            </fd-menu>\n        </ng-container>\n    </fd-overflow-layout>\n</div>\n\n<div\n    class=\"fd-tabs__content\"\n    [style.max-height]=\"maxContentHeight\"\n    fdScrollSpy\n    fd-scrollbar\n    [trackedTags]=\"['fd-tab']\"\n    [scrollSpyDisabled]=\"_disableScrollSpy\"\n    (spyChange)=\"_highlightActiveTab($event)\"\n>\n    <ng-content></ng-content>\n</div>\n\n<ng-template #textTitle let-tab>\n    <span fd-menu-title>{{ tab.title }}</span>\n</ng-template>\n\n<ng-template #iconOnlyTemplate let-tab>\n    <span fd-tab-icon [icon]=\"tab.glyph\">\n        <p fd-tab-count>{{ tab.count }}</p>\n    </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-tabs+()\n    .fd-tabs__item?+(([aria-selected=true]),)\n    .fd-tabs__link+((.is-selected,)\n.fd-tabs__panel+([aria-expanded]|.is-expanded)\n*/.fd-tabs{--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:2.625rem;--fdTabs_Label_Padding_Bottom:.375rem;--fdTabs_Filter_Link_Height:5.5rem;-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-ms-flex-wrap:wrap;-webkit-box-shadow:var(--sapContent_HeaderShadow);align-items:center;background-color:var(--sapObjectHeader_Background);border:0;border-color:var(--sapObjectHeader_BorderColor);box-shadow:var(--sapContent_HeaderShadow);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:flex;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-tabs:after,.fd-tabs:before{box-sizing:inherit;font-size:inherit}.fd-tabs__count{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0 0 .125rem}.fd-tabs__count:after,.fd-tabs__count:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link{-webkit-box-sizing:border-box;-webkit-transition:0s;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);cursor:pointer;display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:.875rem .75rem;position:relative;text-decoration:none;transition:0s}.fd-tabs__link:after,.fd-tabs__link:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link.is-selected .fd-tabs__icon,.fd-tabs__link[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__link.is-selected .fd-tabs__icon:after,.fd-tabs__link.is-selected .fd-tabs__tag:after,.fd-tabs__link[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__link[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__link.is-focus,.fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs__link.is-focus .fd-tabs__icon:before,.fd-tabs__link.is-focus .fd-tabs__tag:before,.fd-tabs__link:focus .fd-tabs__icon:before,.fd-tabs__link:focus .fd-tabs__tag:before{content:\"\";inset:0;outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--sapContent_FocusWidth);position:absolute}.fd-tabs__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 .25rem;padding:0;position:relative}.fd-tabs__item:after,.fd-tabs__item:before{box-sizing:inherit;font-size:inherit}.fd-tabs__item.is-selected .fd-tabs__tag,.fd-tabs__item[aria-selected=true] .fd-tabs__tag{color:var(--fdIcon_Tab_Bar_Selection_Color)}.fd-tabs__item.is-selected .fd-tabs__icon,.fd-tabs__item[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item.is-selected .fd-tabs__icon:after,.fd-tabs__item.is-selected .fd-tabs__link:after,.fd-tabs__item.is-selected .fd-tabs__tag:after,.fd-tabs__item[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__item--error .fd-tabs__icon{border-color:var(--sapErrorColor);color:var(--sapErrorColor)}.fd-tabs__item--error .fd-tabs__link .fd-tabs__tag{color:var(--sapErrorColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon{background-color:var(--sapErrorColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon:after,.fd-tabs__item--error.is-selected .fd-tabs__link:after,.fd-tabs__item--error.is-selected .fd-tabs__tag:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapErrorColor)}.fd-tabs__item--warning .fd-tabs__icon{border-color:var(--sapWarningColor);color:var(--sapWarningColor)}.fd-tabs__item--warning .fd-tabs__link .fd-tabs__tag{color:var(--sapWarningColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon{background-color:var(--sapWarningColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon:after,.fd-tabs__item--warning.is-selected .fd-tabs__link:after,.fd-tabs__item--warning.is-selected .fd-tabs__tag:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapWarningColor)}.fd-tabs__item--success .fd-tabs__icon{border-color:var(--sapSuccessColor);color:var(--sapSuccessColor)}.fd-tabs__item--success .fd-tabs__link .fd-tabs__tag{color:var(--sapSuccessColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSuccessColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon:after,.fd-tabs__item--success.is-selected .fd-tabs__link:after,.fd-tabs__item--success.is-selected .fd-tabs__tag:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapSuccessColor)}.fd-tabs__item--information .fd-tabs__icon{border-color:var(--sapInformationColor);color:var(--sapInformationColor)}.fd-tabs__item--information .fd-tabs__link .fd-tabs__tag{color:var(--sapInformationColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon{background-color:var(--sapInformationColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon:after,.fd-tabs__item--information.is-selected .fd-tabs__link:after,.fd-tabs__item--information.is-selected .fd-tabs__tag:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapInformationColor)}.fd-tabs__item--neutral .fd-tabs__icon{border-color:var(--sapNeutralColor);color:var(--sapNeutralColor)}.fd-tabs__item--neutral .fd-tabs__link .fd-tabs__tag{color:var(--sapNeutralColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon{background-color:var(--sapNeutralColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon:after,.fd-tabs__item--neutral.is-selected .fd-tabs__link:after,.fd-tabs__item--neutral.is-selected .fd-tabs__tag:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapNeutralColor)}.fd-tabs__item:first-child{margin-left:0}.fd-tabs__item:first-child .fd-tabs__link{margin-left:.1875rem;padding-left:0}.fd-tabs__item:first-child .fd-tabs__link[dir=rtl],[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{margin-left:0;margin-right:.1875rem}.fd-tabs__item[dir=rtl]:first-child,[dir=rtl] .fd-tabs__item:first-child{margin-left:.25rem;margin-right:0}.fd-tabs__item[dir=rtl]:first-child .fd-tabs__link,[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{padding-left:.875rem;padding-right:0}.fd-tabs__icon{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;border:var(--fdIcon_Tab_Bar_Icon_Border_Weight) solid var(--fdIcon_Tab_Bar_Icon_Border_Color);border-radius:50%;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdIcon_Tab_Bar_Inactive_Tab_Icon_Color);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdTabs_Icon_Selection_Height);justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 .188rem;padding:0;position:relative;width:var(--fdTabs_Icon_Selection_Height)}.fd-tabs__icon:after,.fd-tabs__icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__icon [class*=sap-icon],.fd-tabs__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;font-size:var(--fdTabs_Icon_Size);line-height:1}.fd-tabs__icon:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__tag{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0;position:relative}.fd-tabs__tag:after,.fd-tabs__tag:before{box-sizing:inherit;font-size:inherit}.fd-tabs__tag:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__panel{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__panel:after,.fd-tabs__panel:before{box-sizing:inherit;font-size:inherit}.fd-tabs__panel[aria-expanded=false]{display:none}.fd-tabs__panel.is-expanded,.fd-tabs__panel[aria-expanded=true]{display:block}.fd-tabs__counter-header{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1.5rem;font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;padding:0 .5rem 0 0}.fd-tabs__counter-header:after,.fd-tabs__counter-header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 0 0 auto;padding:0}.fd-tabs__overflow:after,.fd-tabs__overflow:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow [class*=sap-icon],.fd-tabs__overflow[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;line-height:1}.fd-tabs__process-icon{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1rem;font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1;margin:0;padding:0 .5rem}.fd-tabs__process-icon:after,.fd-tabs__process-icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__process-icon:before{content:\"\\e0c7\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-tabs__label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;padding:0 0 0 .125rem}.fd-tabs__label:after,.fd-tabs__label:before{box-sizing:inherit;font-size:inherit}.fd-tabs__label:first-child{padding-bottom:var(--fdTabs_Label_Padding_Bottom)}.fd-tabs__separator{-webkit-box-sizing:border-box;border:0;border-right:solid var(--sapGroup_TitleBorderColor);border-right-width:.0625rem;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;line-height:var(--sapContent_LineHeight);line-height:2rem;margin:0 .25rem;padding:0}.fd-tabs__separator:after,.fd-tabs__separator:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__header:after,.fd-tabs__header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header .fd-tabs__label{max-width:4rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count,.fd-tabs--process .fd-tabs__count{font-size:var(--sapFontSmallSize)}.fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--icon-only .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{margin:0}.fd-tabs--icon-only .fd-tabs__link,.fd-tabs--process .fd-tabs__link{padding-bottom:1rem;padding-top:1rem}.fd-tabs--icon-only .fd-tabs__icon:after,.fd-tabs--process .fd-tabs__icon:after{bottom:-1.0625rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count{left:calc(100% + .1875rem);position:absolute;top:0}.fd-tabs--filter[dir=rtl] .fd-tabs__count,.fd-tabs--icon-only[dir=rtl] .fd-tabs__count,[dir=rtl] .fd-tabs--filter .fd-tabs__count,[dir=rtl] .fd-tabs--icon-only .fd-tabs__count{left:auto;right:calc(100% + .1875rem)}.fd-tabs--process .fd-tabs__item{margin:0 .25rem 0 0}.fd-tabs--process .fd-tabs__item,.fd-tabs--process .fd-tabs__link{align-items:center;display:flex}.fd-tabs--process .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--process .fd-tabs__icon{margin:0 .1875rem}.fd-tabs--process .fd-tabs__label{line-height:.875rem;max-width:7.5rem;overflow:hidden;white-space:nowrap}.fd-tabs--process[dir=rtl] .fd-tabs__item,[dir=rtl] .fd-tabs--process .fd-tabs__item{margin:0 0 0 .25rem}.fd-tabs--process[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--filter{align-items:center;display:flex}.fd-tabs--filter .fd-tabs__item{margin:0;padding:0 .25rem;width:5.375rem}.fd-tabs--filter .fd-tabs__item[dir=rtl],[dir=rtl] .fd-tabs--filter .fd-tabs__item{margin:0}.fd-tabs--filter .fd-tabs__item--header{width:auto}.fd-tabs--filter .fd-tabs__icon{margin-bottom:.375rem}.fd-tabs--filter .fd-tabs__icon:after{content:none}.fd-tabs--filter .fd-tabs__label{line-height:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-tabs--filter .fd-tabs__link{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:flex;flex-direction:column;height:var(--fdTabs_Filter_Link_Height);justify-content:center;padding:.875rem .188rem .625rem;position:relative;text-align:center}.fd-tabs--filter .fd-tabs__link:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;bottom:0;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs--filter .fd-tabs__link.is-focus,.fd-tabs--filter .fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs--filter[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link{padding-left:.188rem;padding-right:.188rem}.fd-tabs[class*=-compact],.fd-tabs[class*=-condensed],[class*=-compact] .fd-tabs:not([class*=-cozy]),[class*=-condensed] .fd-tabs:not([class*=-cozy]){--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:1.875rem;--fdTabs_Label_Padding_Bottom:.25rem;--fdTabs_Filter_Link_Height:4.75rem}.fd-tabs--s{padding:0 1rem}.fd-tabs--l,.fd-tabs--m{padding:0 2rem}.fd-tabs--xl,.fd-tabs--xxl{padding:0 3rem}.fd-tabs[dir=rtl] .fd-tabs__process-icon,[dir=rtl] .fd-tabs .fd-tabs__process-icon{transform:rotate(180deg)}.fd-tabs[dir=rtl] .fd-tabs__counter-header,[dir=rtl] .fd-tabs .fd-tabs__counter-header{padding-left:.5rem;padding-right:0}.fd-tabs[dir=rtl] .fd-tabs__overflow,[dir=rtl] .fd-tabs .fd-tabs__overflow{margin-left:0;margin-right:auto}.fd-tabs__process{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__process:after,.fd-tabs__process:before{box-sizing:inherit;font-size:inherit}.fd-tabs-custom{display:flex;flex-direction:column;height:100%}.fd-tabs-custom .is-disabled{pointer-events:none;opacity:.4}.fd-tabs{flex-grow:0;flex-wrap:nowrap}.fd-tabs__content{overflow-y:auto;flex-grow:1}.fd-tabs__item{flex-shrink:0}.fd-tabs__tag{white-space:nowrap}.fd-tabs__wrapper{flex-grow:1;display:flex;flex-wrap:wrap;align-items:center}.fd-tabs__wrapper--collapsible{overflow:hidden;flex-wrap:nowrap}.fd-tabs .fd-overflow-layout__items-container .fd-tabs__item:first-child{margin-left:.25rem}.fd-tabs .fd-overflow-layout__items-container .fd-tabs__item:first-child .fd-tabs__link{margin:0;padding:.875rem .75rem}.fd-tabs .fd-overflow-layout__items-container .fd-overflow-layout__item--first .fd-tabs__item{margin-left:0}.fd-tabs .fd-overflow-layout__items-container .fd-overflow-layout__item--first .fd-tabs__item .fd-tabs__link{margin-left:.1875rem;padding-left:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.ContentDensityObserver }, { type: i2$1.DestroyedService }]; }, propDecorators: { size: [{
+                    ], template: "<div #headerContainer role=\"tablist\" class=\"fd-tabs\" [class]=\"(mode ? 'fd-tabs--' + mode : '') + (' fd-tabs--' + size)\">\n    <fd-overflow-layout\n        [maxVisibleItems]=\"maxVisibleTabs\"\n        [enableKeyboardNavigation]=\"true\"\n        navigationTrigger=\"keydown\"\n        (hiddenItemsCount)=\"hiddenItemsCount.emit($event)\"\n        (visibleItemsCount)=\"visibleItemsCount.emit($event)\"\n    >\n        <ng-container *ngFor=\"let tab of _tabArray; let i = index; let last = last\">\n            <div\n                fd-tab-item\n                *fdOverflowItemRef=\"tab\"\n                fdOverflowLayoutItem\n                [forceVisibility]=\"tab.panel._forcedVisibility\"\n                [header]=\"tab.isHeader\"\n                [tabItemState]=\"tab.tabState\"\n            >\n                <a\n                    fd-tab-link\n                    role=\"tab\"\n                    [id]=\"tab.id\"\n                    [attr.aria-controls]=\"tab.panelId\"\n                    [attr.aria-label]=\"tab.ariaLabel || null\"\n                    [attr.aria-labelledby]=\"!tab.ariaLabel && tab.ariaLabelledBy ? tab.ariaLabelledBy : null\"\n                    fdOverflowLayoutFocusableItem\n                    [focusable]=\"tab.active\"\n                    [navigable]=\"!tab.disabled\"\n                    [active]=\"tab.active\"\n                    [disabled]=\"tab.disabled\"\n                    (keydown)=\"_tabHeaderKeydownHandler($event, tab.panel)\"\n                    (click)=\"_tabHeaderClickHandler(tab.panel)\"\n                >\n                    <ng-container *ngTemplateOutlet=\"tab.titleTemplate || null\"></ng-container>\n\n                    <ng-container *ngIf=\"!tab.titleTemplate\" [ngSwitch]=\"mode\">\n                        <ng-container *ngSwitchCase=\"'filter'\">\n                            <span fd-tab-header *ngIf=\"tab.isHeader\">\n                                <span fd-tab-counter-header *ngIf=\"tab.count\">{{ tab.count }}</span>\n                                <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n                            </span>\n                            <ng-container *ngIf=\"!tab.isHeader\">\n                                <span fd-tab-icon [icon]=\"tab.glyph\">\n                                    <p fd-tab-count>{{ tab.count }}</p>\n                                </span>\n                                <span fd-tab-label>{{ tab.title }}</span>\n                            </ng-container>\n                        </ng-container>\n\n                        <ng-container *ngSwitchCase=\"'icon-only'\">\n                            <span fd-tab-icon [icon]=\"tab.glyph\">\n                                <p fd-tab-count>{{ tab.count }}</p>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngSwitchCase=\"'process'\">\n                            <span fd-tab-icon *ngIf=\"tab.glyph\" [icon]=\"tab.glyph\"></span>\n                            <div fd-tab-process>\n                                <span fd-tab-label *ngIf=\"tab.count\">{{ tab.count }}</span>\n                                <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n                            </div>\n                        </ng-container>\n\n                        <ng-container *ngSwitchDefault>\n                            <p fd-tab-count *ngIf=\"tab.count\">{{ tab.count }}</p>\n                            <span fd-tab-tag>{{ tab.title }}</span>\n                        </ng-container>\n                    </ng-container>\n                </a>\n\n                <div fd-tab-process-icon *ngIf=\"mode === 'process' && !last\"></div>\n            </div>\n\n            <div *ngIf=\"tab.isHeader\" fd-tab-separator></div>\n        </ng-container>\n\n        <ng-container *fdOverflowExpand=\"let tabs; items: _tabArray\">\n            <fd-item-expand\n                [fdMenuTrigger]=\"menu\"\n                [label]=\"expandOverflowText\"\n                *ngIf=\"tabs.length > 0\"\n                (keydown)=\"_onTriggerKeydown($event, menu)\"\n            >\n            </fd-item-expand>\n\n            <fd-menu #menu>\n                <li\n                    fd-menu-item\n                    *ngFor=\"let tab of tabs\"\n                    (onSelect)=\"_overflowingTabHeaderClickHandler(tab.item.panel)\"\n                >\n                    <div fd-menu-interactive>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                !tab.item.titleTemplate && mode === 'icon-only'\n                                    ? iconOnlyTemplate\n                                    : tab.item.titleTemplate || textTitle;\n                                context: { $implicit: tab.item }\n                            \"\n                        ></ng-container>\n                    </div>\n                </li>\n            </fd-menu>\n        </ng-container>\n    </fd-overflow-layout>\n</div>\n\n<div\n    class=\"fd-tabs__content\"\n    [style.max-height]=\"maxContentHeight\"\n    fdScrollSpy\n    #scrollSpy=\"fdScrollSpy\"\n    fd-scrollbar\n    [trackedTags]=\"['fd-tab']\"\n    [scrollSpyDisabled]=\"_disableScrollSpy\"\n    (spyChange)=\"_highlightActiveTab($event)\"\n>\n    <ng-content></ng-content>\n</div>\n\n<ng-template #textTitle let-tab>\n    <span fd-menu-title>{{ tab.title }}</span>\n</ng-template>\n\n<ng-template #iconOnlyTemplate let-tab>\n    <span fd-tab-icon [icon]=\"tab.glyph\">\n        <p fd-tab-count>{{ tab.count }}</p>\n    </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-tabs+()\n    .fd-tabs__item?+(([aria-selected=true]),)\n    .fd-tabs__link+((.is-selected,)\n.fd-tabs__panel+([aria-expanded]|.is-expanded)\n*/.fd-tabs{--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:2.625rem;--fdTabs_Label_Padding_Bottom:.375rem;--fdTabs_Filter_Link_Height:5.5rem;-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-ms-flex-wrap:wrap;-webkit-box-shadow:var(--sapContent_HeaderShadow);align-items:center;background-color:var(--sapObjectHeader_Background);border:0;border-color:var(--sapObjectHeader_BorderColor);box-shadow:var(--sapContent_HeaderShadow);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:flex;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-tabs:after,.fd-tabs:before{box-sizing:inherit;font-size:inherit}.fd-tabs__count{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0 0 .125rem}.fd-tabs__count:after,.fd-tabs__count:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link{-webkit-box-sizing:border-box;-webkit-transition:0s;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);cursor:pointer;display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:.875rem .75rem;position:relative;text-decoration:none;transition:0s}.fd-tabs__link:after,.fd-tabs__link:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link.is-selected .fd-tabs__icon,.fd-tabs__link[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__link.is-selected .fd-tabs__icon:after,.fd-tabs__link.is-selected .fd-tabs__tag:after,.fd-tabs__link[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__link[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__link.is-focus,.fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs__link.is-focus .fd-tabs__icon:before,.fd-tabs__link.is-focus .fd-tabs__tag:before,.fd-tabs__link:focus .fd-tabs__icon:before,.fd-tabs__link:focus .fd-tabs__tag:before{content:\"\";inset:0;outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--sapContent_FocusWidth);position:absolute}.fd-tabs__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 .25rem;padding:0;position:relative}.fd-tabs__item:after,.fd-tabs__item:before{box-sizing:inherit;font-size:inherit}.fd-tabs__item.is-selected .fd-tabs__tag,.fd-tabs__item[aria-selected=true] .fd-tabs__tag{color:var(--fdIcon_Tab_Bar_Selection_Color)}.fd-tabs__item.is-selected .fd-tabs__icon,.fd-tabs__item[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item.is-selected .fd-tabs__icon:after,.fd-tabs__item.is-selected .fd-tabs__link:after,.fd-tabs__item.is-selected .fd-tabs__tag:after,.fd-tabs__item[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__item--error .fd-tabs__icon{border-color:var(--sapErrorColor);color:var(--sapErrorColor)}.fd-tabs__item--error .fd-tabs__link .fd-tabs__tag{color:var(--sapErrorColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon{background-color:var(--sapErrorColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon:after,.fd-tabs__item--error.is-selected .fd-tabs__link:after,.fd-tabs__item--error.is-selected .fd-tabs__tag:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapErrorColor)}.fd-tabs__item--warning .fd-tabs__icon{border-color:var(--sapWarningColor);color:var(--sapWarningColor)}.fd-tabs__item--warning .fd-tabs__link .fd-tabs__tag{color:var(--sapWarningColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon{background-color:var(--sapWarningColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon:after,.fd-tabs__item--warning.is-selected .fd-tabs__link:after,.fd-tabs__item--warning.is-selected .fd-tabs__tag:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapWarningColor)}.fd-tabs__item--success .fd-tabs__icon{border-color:var(--sapSuccessColor);color:var(--sapSuccessColor)}.fd-tabs__item--success .fd-tabs__link .fd-tabs__tag{color:var(--sapSuccessColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSuccessColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon:after,.fd-tabs__item--success.is-selected .fd-tabs__link:after,.fd-tabs__item--success.is-selected .fd-tabs__tag:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapSuccessColor)}.fd-tabs__item--information .fd-tabs__icon{border-color:var(--sapInformationColor);color:var(--sapInformationColor)}.fd-tabs__item--information .fd-tabs__link .fd-tabs__tag{color:var(--sapInformationColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon{background-color:var(--sapInformationColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon:after,.fd-tabs__item--information.is-selected .fd-tabs__link:after,.fd-tabs__item--information.is-selected .fd-tabs__tag:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapInformationColor)}.fd-tabs__item--neutral .fd-tabs__icon{border-color:var(--sapNeutralColor);color:var(--sapNeutralColor)}.fd-tabs__item--neutral .fd-tabs__link .fd-tabs__tag{color:var(--sapNeutralColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon{background-color:var(--sapNeutralColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon:after,.fd-tabs__item--neutral.is-selected .fd-tabs__link:after,.fd-tabs__item--neutral.is-selected .fd-tabs__tag:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapNeutralColor)}.fd-tabs__item:first-child{margin-left:0}.fd-tabs__item:first-child .fd-tabs__link{margin-left:.1875rem;padding-left:0}.fd-tabs__item:first-child .fd-tabs__link[dir=rtl],[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{margin-left:0;margin-right:.1875rem}.fd-tabs__item[dir=rtl]:first-child,[dir=rtl] .fd-tabs__item:first-child{margin-left:.25rem;margin-right:0}.fd-tabs__item[dir=rtl]:first-child .fd-tabs__link,[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{padding-left:.875rem;padding-right:0}.fd-tabs__icon{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;border:var(--fdIcon_Tab_Bar_Icon_Border_Weight) solid var(--fdIcon_Tab_Bar_Icon_Border_Color);border-radius:50%;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdIcon_Tab_Bar_Inactive_Tab_Icon_Color);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdTabs_Icon_Selection_Height);justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 .188rem;padding:0;position:relative;width:var(--fdTabs_Icon_Selection_Height)}.fd-tabs__icon:after,.fd-tabs__icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__icon [class*=sap-icon],.fd-tabs__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;font-size:var(--fdTabs_Icon_Size);line-height:1}.fd-tabs__icon:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__tag{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0;position:relative}.fd-tabs__tag:after,.fd-tabs__tag:before{box-sizing:inherit;font-size:inherit}.fd-tabs__tag:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__panel{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__panel:after,.fd-tabs__panel:before{box-sizing:inherit;font-size:inherit}.fd-tabs__panel[aria-expanded=false]{display:none}.fd-tabs__panel.is-expanded,.fd-tabs__panel[aria-expanded=true]{display:block}.fd-tabs__counter-header{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1.5rem;font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;padding:0 .5rem 0 0}.fd-tabs__counter-header:after,.fd-tabs__counter-header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 0 0 auto;padding:0}.fd-tabs__overflow:after,.fd-tabs__overflow:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow [class*=sap-icon],.fd-tabs__overflow[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;line-height:1}.fd-tabs__process-icon{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1rem;font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1;margin:0;padding:0 .5rem}.fd-tabs__process-icon:after,.fd-tabs__process-icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__process-icon:before{content:\"\\e0c7\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-tabs__label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;padding:0 0 0 .125rem}.fd-tabs__label:after,.fd-tabs__label:before{box-sizing:inherit;font-size:inherit}.fd-tabs__label:first-child{padding-bottom:var(--fdTabs_Label_Padding_Bottom)}.fd-tabs__separator{-webkit-box-sizing:border-box;border:0;border-right:solid var(--sapGroup_TitleBorderColor);border-right-width:.0625rem;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;line-height:var(--sapContent_LineHeight);line-height:2rem;margin:0 .25rem;padding:0}.fd-tabs__separator:after,.fd-tabs__separator:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__header:after,.fd-tabs__header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header .fd-tabs__label{max-width:4rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count,.fd-tabs--process .fd-tabs__count{font-size:var(--sapFontSmallSize)}.fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--icon-only .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{margin:0}.fd-tabs--icon-only .fd-tabs__link,.fd-tabs--process .fd-tabs__link{padding-bottom:1rem;padding-top:1rem}.fd-tabs--icon-only .fd-tabs__icon:after,.fd-tabs--process .fd-tabs__icon:after{bottom:-1.0625rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count{left:calc(100% + .1875rem);position:absolute;top:0}.fd-tabs--filter[dir=rtl] .fd-tabs__count,.fd-tabs--icon-only[dir=rtl] .fd-tabs__count,[dir=rtl] .fd-tabs--filter .fd-tabs__count,[dir=rtl] .fd-tabs--icon-only .fd-tabs__count{left:auto;right:calc(100% + .1875rem)}.fd-tabs--process .fd-tabs__item{margin:0 .25rem 0 0}.fd-tabs--process .fd-tabs__item,.fd-tabs--process .fd-tabs__link{align-items:center;display:flex}.fd-tabs--process .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--process .fd-tabs__icon{margin:0 .1875rem}.fd-tabs--process .fd-tabs__label{line-height:.875rem;max-width:7.5rem;overflow:hidden;white-space:nowrap}.fd-tabs--process[dir=rtl] .fd-tabs__item,[dir=rtl] .fd-tabs--process .fd-tabs__item{margin:0 0 0 .25rem}.fd-tabs--process[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--filter{align-items:center;display:flex}.fd-tabs--filter .fd-tabs__item{margin:0;padding:0 .25rem;width:5.375rem}.fd-tabs--filter .fd-tabs__item[dir=rtl],[dir=rtl] .fd-tabs--filter .fd-tabs__item{margin:0}.fd-tabs--filter .fd-tabs__item--header{width:auto}.fd-tabs--filter .fd-tabs__icon{margin-bottom:.375rem}.fd-tabs--filter .fd-tabs__icon:after{content:none}.fd-tabs--filter .fd-tabs__label{line-height:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-tabs--filter .fd-tabs__link{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:flex;flex-direction:column;height:var(--fdTabs_Filter_Link_Height);justify-content:center;padding:.875rem .188rem .625rem;position:relative;text-align:center}.fd-tabs--filter .fd-tabs__link:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;bottom:0;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs--filter .fd-tabs__link.is-focus,.fd-tabs--filter .fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs--filter[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link{padding-left:.188rem;padding-right:.188rem}.fd-tabs[class*=-compact],.fd-tabs[class*=-condensed],[class*=-compact] .fd-tabs:not([class*=-cozy]),[class*=-condensed] .fd-tabs:not([class*=-cozy]){--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:1.875rem;--fdTabs_Label_Padding_Bottom:.25rem;--fdTabs_Filter_Link_Height:4.75rem}.fd-tabs--s{padding:0 1rem}.fd-tabs--l,.fd-tabs--m{padding:0 2rem}.fd-tabs--xl,.fd-tabs--xxl{padding:0 3rem}.fd-tabs[dir=rtl] .fd-tabs__process-icon,[dir=rtl] .fd-tabs .fd-tabs__process-icon{transform:rotate(180deg)}.fd-tabs[dir=rtl] .fd-tabs__counter-header,[dir=rtl] .fd-tabs .fd-tabs__counter-header{padding-left:.5rem;padding-right:0}.fd-tabs[dir=rtl] .fd-tabs__overflow,[dir=rtl] .fd-tabs .fd-tabs__overflow{margin-left:0;margin-right:auto}.fd-tabs__process{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__process:after,.fd-tabs__process:before{box-sizing:inherit;font-size:inherit}.fd-tabs-custom{display:flex;flex-direction:column;height:100%}.fd-tabs-custom .is-disabled{pointer-events:none;opacity:.4}.fd-tabs{flex-grow:0;flex-wrap:nowrap}.fd-tabs__content{overflow-y:auto;flex-grow:1}.fd-tabs__item{flex-shrink:0}.fd-tabs__tag{white-space:nowrap}.fd-tabs__wrapper{flex-grow:1;display:flex;flex-wrap:wrap;align-items:center}.fd-tabs__wrapper--collapsible{overflow:hidden;flex-wrap:nowrap}.fd-tabs .fd-overflow-layout__items-container .fd-tabs__item:first-child{margin-left:.25rem}.fd-tabs .fd-overflow-layout__items-container .fd-tabs__item:first-child .fd-tabs__link{margin:0;padding:.875rem .75rem}.fd-tabs .fd-overflow-layout__items-container .fd-overflow-layout__item--first .fd-tabs__item{margin-left:0}.fd-tabs .fd-overflow-layout__items-container .fd-overflow-layout__item--first .fd-tabs__item .fd-tabs__link{margin-left:.1875rem;padding-left:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.ContentDensityObserver }, { type: i2$1.DestroyedService }]; }, propDecorators: { size: [{
                 type: Input
             }], mode: [{
                 type: Input
@@ -871,6 +873,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }], _overflowLayout: [{
                 type: ViewChild,
                 args: [OverflowLayoutComponent]
+            }], _scrollSpy: [{
+                type: ViewChild,
+                args: ['scrollSpy', { read: ScrollSpyDirective }]
             }] } });
 
 class TabNavComponent {