@fundamental-ngx/core 0.43.13 → 0.43.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/esm2020/scroll-spy/scroll-spy.directive.mjs +27 -12
  2. package/esm2020/tabs/tab-list.component.mjs +23 -13
  3. package/esm2020/wizard/wizard.component.mjs +1 -1
  4. package/fesm2015/fundamental-ngx-core-scroll-spy.mjs +26 -11
  5. package/fesm2015/fundamental-ngx-core-scroll-spy.mjs.map +1 -1
  6. package/fesm2015/fundamental-ngx-core-tabs.mjs +23 -13
  7. package/fesm2015/fundamental-ngx-core-tabs.mjs.map +1 -1
  8. package/fesm2015/fundamental-ngx-core-wizard.mjs +1 -1
  9. package/fesm2015/fundamental-ngx-core-wizard.mjs.map +1 -1
  10. package/fesm2020/fundamental-ngx-core-scroll-spy.mjs +26 -11
  11. package/fesm2020/fundamental-ngx-core-scroll-spy.mjs.map +1 -1
  12. package/fesm2020/fundamental-ngx-core-tabs.mjs +22 -13
  13. package/fesm2020/fundamental-ngx-core-tabs.mjs.map +1 -1
  14. package/fesm2020/fundamental-ngx-core-wizard.mjs +1 -1
  15. package/fesm2020/fundamental-ngx-core-wizard.mjs.map +1 -1
  16. package/fundamental-ngx-core-v0.43.15.tgz +0 -0
  17. package/package.json +3 -3
  18. package/schematics/add-dependencies/index.js +4 -4
  19. package/scroll-spy/scroll-spy.directive.d.ts +9 -6
  20. package/tabs/tab-list.component.d.ts +5 -2
  21. package/fundamental-ngx-core-v0.43.13.tgz +0 -0
package/fesm2020/fundamental-ngx-core-tabs.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Directive, HostBinding, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, InjectionToken, EventEmitter, TemplateRef, Optional, Inject, Output, ContentChild, HostListener, forwardRef, ElementRef, ContentChildren, ViewChildren, ViewChild, NgModule } from '@angular/core';
2
+ 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';
3
3
  import * as i3 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
  import * as i6 from '@fundamental-ngx/core/overflow-layout';
@@ -10,18 +10,18 @@ import { applyCssClass, AbstractFdNgxClass, KeyUtil, scrollTop, DestroyedService
10
10
  import * as i2 from '@fundamental-ngx/core/icon';
11
11
  import { IconModule } from '@fundamental-ngx/core/icon';
12
12
  import { Subject, first, Subscription, merge, fromEvent } from 'rxjs';
13
+ import { ENTER, SPACE, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
13
14
  import * as i1 from '@fundamental-ngx/core/content-density';
14
15
  import { contentDensityObserverProviders, DeprecatedCompactDirective, CONTENT_DENSITY_DIRECTIVE, ContentDensityModule } from '@fundamental-ngx/core/content-density';
15
16
  import * as i4$1 from '@fundamental-ngx/core/menu';
16
17
  import { MenuComponent, MenuModule } from '@fundamental-ngx/core/menu';
18
+ import * as i5 from '@fundamental-ngx/core/scroll-spy';
19
+ import { ScrollSpyDirective, ScrollSpyModule } from '@fundamental-ngx/core/scroll-spy';
17
20
  import * as i7 from '@fundamental-ngx/core/scrollbar';
18
21
  import { ScrollbarDirective, ScrollbarModule } from '@fundamental-ngx/core/scrollbar';
19
- import { startWith, map, takeUntil, filter, delay, switchMap, debounceTime, first as first$1 } from 'rxjs/operators';
22
+ import { startWith, map, takeUntil, filter, delay, tap, switchMap, debounceTime, first as first$1 } from 'rxjs/operators';
20
23
  import * as i4 from '@fundamental-ngx/i18n';
21
24
  import { I18nModule } from '@fundamental-ngx/i18n';
22
- import { ENTER, SPACE, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
23
- import * as i5 from '@fundamental-ngx/core/scroll-spy';
24
- import { ScrollSpyModule } from '@fundamental-ngx/core/scroll-spy';
25
25
  import { FocusKeyManager } from '@angular/cdk/a11y';
26
26
  import { ButtonModule } from '@fundamental-ngx/core/button';
27
27
  import { ListModule } from '@fundamental-ngx/core/list';
@@ -572,6 +572,7 @@ class TabInfo {
572
572
  }
573
573
  }
574
574
 
575
+ /* eslint-disable @typescript-eslint/member-ordering */
575
576
  /**
576
577
  * Represents a list of tab-panels.
577
578
  */
@@ -581,9 +582,8 @@ class TabListComponent {
581
582
  return this._scrollbar?.elementRef;
582
583
  }
583
584
  /** @hidden */
584
- constructor(_changeDetectorRef, _elRef, _contentDensityObserver, _onDestroy$) {
585
+ constructor(_changeDetectorRef, _contentDensityObserver, _onDestroy$) {
585
586
  this._changeDetectorRef = _changeDetectorRef;
586
- this._elRef = _elRef;
587
587
  this._contentDensityObserver = _contentDensityObserver;
588
588
  this._onDestroy$ = _onDestroy$;
589
589
  /** Size of tab, it's mostly about adding spacing on tab container, available sizes 's' | 'm' | 'l' | 'xl' | 'xxl' */
@@ -609,6 +609,8 @@ class TabListComponent {
609
609
  this.visibleItemsCount = new EventEmitter();
610
610
  /** Event emitted when hidden items count has been changed. */
611
611
  this.hiddenItemsCount = new EventEmitter();
612
+ /** @hidden Collection of tabs in original order */
613
+ this._tabArray = [];
612
614
  /** @hidden Whether to disable scroll spy */
613
615
  this._disableScrollSpy = false;
614
616
  /** @hidden */
@@ -619,6 +621,8 @@ class TabListComponent {
619
621
  this.tabPanelPropertyChanged = new Subject();
620
622
  /** @hidden */
621
623
  this._subscriptions = new Subscription();
624
+ /** @hidden */
625
+ this._zone = inject(NgZone);
622
626
  }
623
627
  /** @hidden */
624
628
  ngAfterContentInit() {
@@ -696,8 +700,10 @@ class TabListComponent {
696
700
  }
697
701
  /** @hidden */
698
702
  _listenOnTabPanelsAndUpdateStorageStructures() {
699
- this._tabPanelsChange$.pipe(map((tabPanels) => tabPanels.map((el) => new TabInfo(el)))).subscribe((tabs) => {
700
- this._tabArray = tabs;
703
+ this._tabPanelsChange$
704
+ .pipe(map((tabPanels) => tabPanels.map((el) => this._tabArray?.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$))
705
+ .subscribe(() => {
706
+ this.stackContent && this._scrollSpy?.onScroll(undefined, true);
701
707
  });
702
708
  }
703
709
  /** @hidden */
@@ -789,7 +795,7 @@ class TabListComponent {
789
795
  return !tabPanel.disabled && expand !== tabPanel.expanded && expand === false ? this.collapsibleTabs : true;
790
796
  }
791
797
  }
792
- 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 });
798
+ 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 });
793
799
  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: [
794
800
  contentDensityObserverProviders(),
795
801
  DestroyedService,
@@ -797,7 +803,7 @@ TabListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
797
803
  provide: LIST_COMPONENT,
798
804
  useExisting: forwardRef(() => TabListComponent)
799
805
  }
800
- ], 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 });
806
+ ], 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 });
801
807
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TabListComponent, decorators: [{
802
808
  type: Component,
803
809
  args: [{ selector: 'fd-tab-list', host: {
@@ -809,8 +815,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
809
815
  provide: LIST_COMPONENT,
810
816
  useExisting: forwardRef(() => TabListComponent)
811
817
  }
812
- ], 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"] }]
813
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.ContentDensityObserver }, { type: i2$1.DestroyedService }]; }, propDecorators: { size: [{
818
+ ], 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"] }]
819
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.ContentDensityObserver }, { type: i2$1.DestroyedService }]; }, propDecorators: { size: [{
814
820
  type: Input
815
821
  }], mode: [{
816
822
  type: Input
@@ -862,6 +868,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
862
868
  }], _overflowLayout: [{
863
869
  type: ViewChild,
864
870
  args: [OverflowLayoutComponent]
871
+ }], _scrollSpy: [{
872
+ type: ViewChild,
873
+ args: ['scrollSpy', { read: ScrollSpyDirective }]
865
874
  }] } });
866
875
 
867
876
  class TabNavComponent {