@fundamental-ngx/core 0.61.3 → 0.61.5

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, HostBinding, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, EventEmitter, HostListener, Output, ContentChild, InjectionToken, TemplateRef, Optional, Inject, inject, NgZone, ElementRef, ViewChild, ViewChildren, ContentChildren, forwardRef, computed, DestroyRef, effect, NgModule } from '@angular/core';
+import { Directive, HostBinding, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, EventEmitter, HostListener, Output, ContentChild, InjectionToken, TemplateRef, Optional, Inject, ElementRef, ViewChild, ViewChildren, ContentChildren, forwardRef, computed, inject, DestroyRef, effect, NgModule } from '@angular/core';
 import { FD_DEFAULT_ICON_FONT_FAMILY, IconComponent } from '@fundamental-ngx/core/icon';
 import { FdTranslatePipe } from '@fundamental-ngx/i18n';
 import { __decorate, __metadata } from 'tslib';
@@ -15,8 +15,8 @@ import { OverflowLayoutComponent, OverflowItemRefDirective, OverflowLayoutItemDi
 import { ScrollSpyDirective } from '@fundamental-ngx/core/scroll-spy';
 import { ScrollbarDirective } from '@fundamental-ngx/core/scrollbar';
 import { FD_TABLIST } from '@fundamental-ngx/core/shared';
-import { Subject, first, Subscription, merge, fromEvent } from 'rxjs';
-import { startWith, map, filter, delay, tap, switchMap, take, debounceTime, first as first$1 } from 'rxjs/operators';
+import { Subject, Subscription, merge, fromEvent } from 'rxjs';
+import { startWith, map, filter, delay, tap, switchMap, debounceTime, first } from 'rxjs/operators';
 import { FocusKeyManager } from '@angular/cdk/a11y';
 
 /**
@@ -415,10 +415,9 @@ class TabPanelComponent {
         return this.id + '-panel';
     }
     /** @hidden */
-    constructor(elementRef, _changeDetRef, _ngZone, _tabsComponent) {
+    constructor(elementRef, _changeDetRef, _tabsComponent) {
         this.elementRef = elementRef;
         this._changeDetRef = _changeDetRef;
-        this._ngZone = _ngZone;
         this._tabsComponent = _tabsComponent;
         /** Id of the tab. If none is provided, one will be generated. */
         this.id = 'fd-tab-panel' + tabPanelUniqueId++;
@@ -430,11 +429,11 @@ class TabPanelComponent {
         this.opened = new EventEmitter();
         /** Event that is emitted when the tab panel has been closed. */
         this.closed = new EventEmitter();
-        /** @hidden */
-        this._expandedClass = false;
         /** @hidden Event that is emitted when the tab panel . */
         this._expandedStateChange = new Subject();
         /** @hidden */
+        this._expandedClass = false;
+        /** @hidden */
         this._forcedVisibility = false;
         /** @hidden Whether to display tab panel content */
         this._expanded = false;
@@ -464,7 +463,10 @@ class TabPanelComponent {
                 this.closed.emit();
             }
             this._changeDetRef.detectChanges();
-            this._ngZone.onStable.pipe(first()).subscribe(() => this._updateHost());
+            queueMicrotask(() => {
+                this._expandedClass = this.expanded;
+                this._changeDetRef.markForCheck();
+            });
         }
     }
     /** @hidden */
@@ -473,12 +475,8 @@ class TabPanelComponent {
             .querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
             ?.focus({ preventScroll: true });
     }
-    /** @hidden */
-    _updateHost() {
-        this._expandedClass = this.expanded;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TabPanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: LIST_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TabPanelComponent, isStandalone: true, selector: "fd-tab", inputs: { id: "id", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", title: "title", count: "count", glyph: "glyph", header: "header", disabled: "disabled", tabState: "tabState" }, outputs: { opened: "opened", closed: "closed" }, host: { attributes: { "role": "tabpanel" }, properties: { "id": "_panelId", "attr.aria-labelledby": "id", "class.is-expanded": "this._expandedClass" }, classAttribute: "fd-tabs__panel" }, queries: [{ propertyName: "titleTemplate", first: true, predicate: TabTitleDirective, descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "@if (expanded) {\n    <ng-content></ng-content>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TabPanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: LIST_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TabPanelComponent, isStandalone: true, selector: "fd-tab", inputs: { id: "id", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", title: "title", count: "count", glyph: "glyph", header: "header", disabled: "disabled", tabState: "tabState" }, outputs: { opened: "opened", closed: "closed" }, host: { attributes: { "role": "tabpanel" }, properties: { "id": "_panelId", "attr.aria-labelledby": "id", "class.is-expanded": "_expandedClass" }, classAttribute: "fd-tabs__panel" }, queries: [{ propertyName: "titleTemplate", first: true, predicate: TabTitleDirective, descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "@if (expanded) {\n    <ng-content></ng-content>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TabPanelComponent, decorators: [{
             type: Component,
@@ -486,9 +484,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         role: 'tabpanel',
                         class: 'fd-tabs__panel',
                         '[id]': '_panelId',
-                        '[attr.aria-labelledby]': 'id'
+                        '[attr.aria-labelledby]': 'id',
+                        '[class.is-expanded]': '_expandedClass'
                     }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "@if (expanded) {\n    <ng-content></ng-content>\n}\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -518,9 +517,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             }], titleTemplate: [{
                 type: ContentChild,
                 args: [TabTitleDirective, { read: TemplateRef }]
-            }], _expandedClass: [{
-                type: HostBinding,
-                args: ['class.is-expanded']
             }] } });
 
 /** @hidden */
@@ -638,8 +634,6 @@ class TabListComponent {
         this.tabPanelPropertyChanged = new Subject();
         /** @hidden */
         this._subscriptions = new Subscription();
-        /** @hidden */
-        this._zone = inject(NgZone);
         warnOnce('TabListComponent is deprecated, use `@fundamental-ngx/platform/icon-tab-bar` instead');
     }
     /** @hidden */
@@ -723,10 +717,10 @@ class TabListComponent {
     /** @hidden */
     _listenOnTabPanelsAndUpdateStorageStructures() {
         this._tabPanelsChange$
-            .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))), takeUntilDestroyed(this._destroyRef))
+            .pipe(map((tabPanels) => tabPanels.map((el) => this._tabArray?.find((tabInfo) => tabInfo.panel === el) || new TabInfo(el))), tap((tabs) => (this._tabArray = tabs)), delay(0), takeUntilDestroyed(this._destroyRef))
             .subscribe(() => {
             if (this.stackContent && this._currentNumberOfTabs !== this._tabArray.length) {
-                this._zone.onMicrotaskEmpty.pipe(take(1)).subscribe(() => {
+                queueMicrotask(() => {
                     this._scrollSpy?.onScroll(undefined, true);
                     this._currentNumberOfTabs = this._tabArray.length;
                 });
@@ -813,7 +807,7 @@ class TabListComponent {
         if (!(currentScrollPosition === maximumScrollTop && distanceToScroll > maximumScrollTop)) {
             !this._init ? (this._disableScrollSpy = true) : (this._init = false);
             fromEvent(containerElement, 'scroll')
-                .pipe(debounceTime(100), first$1(), takeUntilDestroyed(this._destroyRef))
+                .pipe(debounceTime(100), first(), takeUntilDestroyed(this._destroyRef))
                 .subscribe(() => (this._disableScrollSpy = false));
             scrollTop(containerElement, distanceToScroll);
         }
@@ -842,7 +836,7 @@ class TabListComponent {
                 provide: FD_TABLIST,
                 useExisting: TabListComponent
             }
-        ], queries: [{ propertyName: "tabPanels", predicate: i0.forwardRef(() => 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        @for (tab of _tabArray; track tab; 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-template [ngTemplateOutlet]=\"tab.titleTemplate || null\"></ng-template>\n                    @if (!tab.titleTemplate) {\n                        @switch (mode) {\n                            @case ('filter') {\n                                @if (tab.isHeader) {\n                                    <span fd-tab-header>\n                                        @if (tab.count) {\n                                            <span fd-tab-counter-header>{{ tab.count }}</span>\n                                        }\n                                        @if (tab.title) {\n                                            <span fd-tab-label>{{ tab.title }}</span>\n                                        }\n                                    </span>\n                                }\n                                @if (!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                                }\n                            }\n                            @case ('icon-only') {\n                                <span fd-tab-icon [icon]=\"tab.glyph\">\n                                    <p fd-tab-count>{{ tab.count }}</p>\n                                </span>\n                            }\n                            @case ('process') {\n                                @if (tab.glyph) {\n                                    <span fd-tab-icon [icon]=\"tab.glyph\"></span>\n                                }\n                                <div fd-tab-process>\n                                    @if (tab.count) {\n                                        <span fd-tab-label>{{ tab.count }}</span>\n                                    }\n                                    @if (tab.title) {\n                                        <span fd-tab-label>{{ tab.title }}</span>\n                                    }\n                                </div>\n                            }\n                            @default {\n                                @if (tab.count) {\n                                    <p fd-tab-count>{{ tab.count }}</p>\n                                }\n                                <span fd-tab-tag>{{ tab.title }}</span>\n                            }\n                        }\n                    }\n                </a>\n                @if (mode === 'process' && !last) {\n                    <div fd-tab-process-icon></div>\n                }\n            </div>\n            @if (tab.isHeader) {\n                <div fd-tab-separator></div>\n            }\n        }\n        <ng-container *fdOverflowExpand=\"let tabs; items: _tabArray\">\n            @if (tabs.length > 0) {\n                <fd-item-expand [fdMenuTrigger]=\"menu\" (keydown)=\"_onTriggerKeydown($event, menu)\"> </fd-item-expand>\n            }\n            <fd-menu #menu>\n                @for (tab of tabs; track tab) {\n                    <li fd-menu-item (onSelect)=\"_overflowingTabHeaderClickHandler(tab.item.panel)\">\n                        <div fd-menu-interactive>\n                            <ng-template\n                                [ngTemplateOutlet]=\"\n                                    !tab.item.titleTemplate && mode === 'icon-only'\n                                        ? iconOnlyTemplate\n                                        : tab.item.titleTemplate || textTitle\n                                \"\n                                [ngTemplateOutletContext]=\"{ $implicit: tab.item }\"\n                            ></ng-template>\n                        </div>\n                    </li>\n                }\n            </fd-menu>\n        </ng-container>\n    </fd-overflow-layout>\n</div>\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?.id)\"\n>\n    <ng-content></ng-content>\n</div>\n<ng-template #textTitle let-tab>\n    <span fd-menu-title>{{ tab.title }}</span>\n</ng-template>\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: [".fd-tabs{--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:2.625rem;--fdTabs_Label_Padding_Bottom:.375rem;--fdTabs_Filter_Link_Height:5.5rem;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-padding-start:0;background-color:var(--sapObjectHeader_Background);border-color:var(--sapObjectHeader_BorderColor);-webkit-box-shadow:var(--sapContent_HeaderShadow);box-shadow:var(--sapContent_HeaderShadow);color:var(--sapContent_LabelColor);list-style:none;padding-inline-start:0}.fd-tabs:after,.fd-tabs:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tabs__count{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;line-height:1rem;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-padding-after:.125rem;color:var(--sapContent_LabelColor);padding-block-end:.125rem}.fd-tabs__count:after,.fd-tabs__count:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tabs__link{border:0;-webkit-box-sizing:border-box;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:normal;line-height:1rem;margin-block:0;margin-inline:0;padding-block:0;padding-block:.875rem;padding-inline:0;padding-inline:.75rem;position:relative;text-decoration:none;-webkit-transition:0s;transition:0s}.fd-tabs__link:after,.fd-tabs__link:before{-webkit-box-sizing:inherit;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{-webkit-box-shadow:none;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{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;margin-inline:.25rem;padding-block:0;padding-inline:0;position:relative}.fd-tabs__item:after,.fd-tabs__item:before{-webkit-box-sizing:inherit;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{-webkit-margin-start:0;margin-inline-start:0}.fd-tabs__item:first-child .fd-tabs__link{-webkit-margin-start:.1875rem;margin-inline-start:.1875rem;-webkit-padding-start:0;padding-inline-start:0}.fd-tabs__icon{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:var(--fdIcon_Tab_Bar_Icon_Border_Weight) solid var(--fdIcon_Tab_Bar_Icon_Border_Color);border-radius:50%;color:var(--fdIcon_Tab_Bar_Inactive_Tab_Icon_Color);height:var(--fdTabs_Icon_Selection_Height);margin-block:0;margin-inline:.188rem;position:relative;width:var(--fdTabs_Icon_Selection_Height)}.fd-tabs__icon:after,.fd-tabs__icon:before{-webkit-box-sizing:inherit;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{border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;-webkit-transition:all .125s ease-in;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__tag{border:0;-webkit-box-sizing:border-box;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:normal;line-height:1rem;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;position:relative}.fd-tabs__tag:after,.fd-tabs__tag:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tabs__tag:after{border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;-webkit-transition:all .125s ease-in;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__panel{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-tabs__panel:after,.fd-tabs__panel:before{-webkit-box-sizing:inherit;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{border:0;-webkit-box-sizing:border-box;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:normal;line-height:1.5rem;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-padding-end:.5rem;padding-inline-end:.5rem}.fd-tabs__counter-header:after,.fd-tabs__counter-header:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tabs__overflow{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-margin-start:auto;margin-inline-start:auto}.fd-tabs__overflow:after,.fd-tabs__overflow:before{-webkit-box-sizing:inherit;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{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1rem;font-weight:400;forced-color-adjust:none;line-height:normal;line-height:1;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;padding-inline:.5rem}.fd-tabs__process-icon:after,.fd-tabs__process-icon:before{-webkit-box-sizing:inherit;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{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-padding-start:.125rem;color:var(--sapContent_LabelColor);font-size:var(--sapFontSmallSize);max-width:100%;padding-inline-start:.125rem}.fd-tabs__label:after,.fd-tabs__label:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tabs__label:first-child{-webkit-padding-after:var(--fdTabs_Label_Padding_Bottom);padding-block-end:var(--fdTabs_Label_Padding_Bottom)}.fd-tabs__separator{border:0;border-right:solid var(--sapGroup_TitleBorderColor);border-right-width:.0625rem;-webkit-box-sizing:border-box;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:normal;line-height:2rem;margin-block:0;margin-inline:0;margin-inline:.25rem;padding-block:0;padding-inline:0}.fd-tabs__separator:after,.fd-tabs__separator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tabs__header{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-tabs__header:after,.fd-tabs__header:before{-webkit-box-sizing:inherit;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-block:0;margin-inline:0}.fd-tabs--icon-only .fd-tabs__link,.fd-tabs--process .fd-tabs__link{padding-block:1rem 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-block:0;margin-inline:0 .25rem}.fd-tabs--process .fd-tabs__item,.fd-tabs--process .fd-tabs__link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-tabs--process .fd-tabs__link{padding-inline:0}.fd-tabs--process .fd-tabs__icon{margin-block:0;margin-inline:.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-block:0;margin-inline:.25rem 0}.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-inline:0}.fd-tabs--filter{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-tabs--filter .fd-tabs__item{margin-block:0;margin-inline:0;padding-block:0;padding-inline:.25rem;width:5.375rem}.fd-tabs--filter .fd-tabs__item--header{width:auto}.fd-tabs--filter .fd-tabs__icon{-webkit-margin-after:.375rem;margin-block-end:.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{display:-webkit-box;display:-ms-flexbox;display:flex;height:var(--fdTabs_Filter_Link_Height);padding-block:.875rem .625rem;padding-inline:.188rem;text-align:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}.fd-tabs--filter .fd-tabs__link:after{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;-webkit-transition:all .125s ease-in;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs--filter .fd-tabs__link.is-focus,.fd-tabs--filter .fd-tabs__link:focus{-webkit-box-shadow:none;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-inline:.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-block:0;padding-inline:1rem}.fd-tabs--l,.fd-tabs--m{padding-block:0;padding-inline:2rem}.fd-tabs--xl,.fd-tabs--xxl{padding-block:0;padding-inline:3rem}.fd-tabs[dir=rtl] .fd-tabs__process-icon,[dir=rtl] .fd-tabs .fd-tabs__process-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fd-tabs__process{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-tabs__process:after,.fd-tabs__process:before{-webkit-box-sizing:inherit;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/*! Bundled license information:\n\nfundamental-styles/dist/tabs.css:\n  (*!\n   * Fundamental Library Styles v0.40.1\n   * Copyright (c) 2025 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*/\n"], dependencies: [{ kind: "component", type: OverflowLayoutComponent, selector: "fd-overflow-layout", inputs: ["maxVisibleItems", "navigationTrigger", "showMorePosition", "renderShowMoreButton", "reverseHiddenItems", "enableKeyboardNavigation", "ariaRole", "moreItemsButtonText"], outputs: ["visibleItemsCount", "hiddenItemsCount", "hiddenItemsChange"] }, { kind: "directive", type: OverflowItemRefDirective, selector: "[fdOverflowItemRef]", inputs: ["fdOverflowItemRef"] }, { kind: "directive", type: TabItemDirective, selector: "[fd-tab-item]", inputs: ["class", "tabItemState", "header", "disabled", "fdTabItemClass"] }, { kind: "directive", type: OverflowLayoutItemDirective, selector: "[fdOverflowLayoutItem]", inputs: ["forceVisibility"], outputs: ["hiddenChange"] }, { kind: "directive", type: TabLinkDirective, selector: "[fd-tab-link]", inputs: ["active", "disabled"], outputs: ["keyDown", "focused"] }, { kind: "directive", type: OverflowLayoutFocusableItemDirective, selector: "[fdOverflowLayoutFocusableItem], [fdOverflowLayoutItem][focusable]", inputs: ["focusable", "navigable"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TabHeaderDirective, selector: "[fdTabHeader], [fd-tab-header]" }, { kind: "directive", type: TabCounterHeaderDirective, selector: "[fdTabCounterHeader], [fd-tab-counter-header]" }, { kind: "directive", type: TabLabelDirective, selector: "[fdTabLabel], [fd-tab-label]" }, { kind: "component", type: TabIconComponent, selector: "[fd-tab-icon]", inputs: ["class", "icon", "iconFont"] }, { kind: "directive", type: TabCountDirective, selector: "[fdTabCount], [fd-tab-count]" }, { kind: "directive", type: TabProcessDirective, selector: "[fdTabProcess], [fd-tab-process]" }, { kind: "directive", type: TabTagDirective, selector: "[fdTabTag], [fd-tab-tag]" }, { kind: "directive", type: TabProcessIconDirective, selector: "[fdTabProcessIcon], [fd-tab-process-icon]" }, { kind: "directive", type: TabSeparatorDirective, selector: "[fdTabSeparator], [fd-tab-separator]" }, { kind: "directive", type: OverflowExpandDirective, selector: "[fdOverflowExpand]", inputs: ["fdOverflowExpandItems"] }, { kind: "component", type: TabItemExpandComponent, selector: "fd-item-expand" }, { kind: "directive", type: MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: MenuComponent, selector: "fd-menu", inputs: ["openOnHoverTime", "ariaLabel", "ariaLabelledby", "id", "config", "mobile", "mobileConfig", "placement", "closeOnEscapeKey", "focusAutoCapture", "disabled", "disableScrollbar", "triggers", "fillControlMode", "closeOnOutsideClick", "noArrow", "focusTrapped", "additionalBodyClass", "isOpen"], outputs: ["isOpenChange", "activePath", "beforeOpen"] }, { kind: "component", type: MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: ScrollSpyDirective, selector: "[fdScrollSpy]", inputs: ["trackedTags", "fireEmpty", "targetPercent", "targetOffset", "scrollSpyDisabled"], outputs: ["spyChange"], exportAs: ["fdScrollSpy"] }, { kind: "directive", type: ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible"] }, { kind: "directive", type: MenuTitleDirective, selector: "[fd-menu-title]", inputs: ["truncate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "tabPanels", predicate: i0.forwardRef(() => 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        @for (tab of _tabArray; track tab; 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-template [ngTemplateOutlet]=\"tab.titleTemplate || null\"></ng-template>\n                    @if (!tab.titleTemplate) {\n                        @switch (mode) {\n                            @case ('filter') {\n                                @if (tab.isHeader) {\n                                    <span fd-tab-header>\n                                        @if (tab.count) {\n                                            <span fd-tab-counter-header>{{ tab.count }}</span>\n                                        }\n                                        @if (tab.title) {\n                                            <span fd-tab-label>{{ tab.title }}</span>\n                                        }\n                                    </span>\n                                }\n                                @if (!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                                }\n                            }\n                            @case ('icon-only') {\n                                <span fd-tab-icon [icon]=\"tab.glyph\">\n                                    <p fd-tab-count>{{ tab.count }}</p>\n                                </span>\n                            }\n                            @case ('process') {\n                                @if (tab.glyph) {\n                                    <span fd-tab-icon [icon]=\"tab.glyph\"></span>\n                                }\n                                <div fd-tab-process>\n                                    @if (tab.count) {\n                                        <span fd-tab-label>{{ tab.count }}</span>\n                                    }\n                                    @if (tab.title) {\n                                        <span fd-tab-label>{{ tab.title }}</span>\n                                    }\n                                </div>\n                            }\n                            @default {\n                                @if (tab.count) {\n                                    <p fd-tab-count>{{ tab.count }}</p>\n                                }\n                                <span fd-tab-tag>{{ tab.title }}</span>\n                            }\n                        }\n                    }\n                </a>\n                @if (mode === 'process' && !last) {\n                    <div fd-tab-process-icon></div>\n                }\n            </div>\n            @if (tab.isHeader) {\n                <div fd-tab-separator></div>\n            }\n        }\n        <ng-container *fdOverflowExpand=\"let tabs; items: _tabArray\">\n            @if (tabs.length > 0) {\n                <fd-item-expand [fdMenuTrigger]=\"menu\" (keydown)=\"_onTriggerKeydown($event, menu)\"> </fd-item-expand>\n            }\n            <fd-menu #menu>\n                @for (tab of tabs; track tab) {\n                    <li fd-menu-item (onSelect)=\"_overflowingTabHeaderClickHandler(tab.item.panel)\">\n                        <div fd-menu-interactive>\n                            <ng-template\n                                [ngTemplateOutlet]=\"\n                                    !tab.item.titleTemplate && mode === 'icon-only'\n                                        ? iconOnlyTemplate\n                                        : tab.item.titleTemplate || textTitle\n                                \"\n                                [ngTemplateOutletContext]=\"{ $implicit: tab.item }\"\n                            ></ng-template>\n                        </div>\n                    </li>\n                }\n            </fd-menu>\n        </ng-container>\n    </fd-overflow-layout>\n</div>\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?.id)\"\n>\n    <ng-content></ng-content>\n</div>\n<ng-template #textTitle let-tab>\n    <span fd-menu-title>{{ tab.title }}</span>\n</ng-template>\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: [".fd-tabs{--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:2.625rem;--fdTabs_Label_Padding_Bottom:.375rem;--fdTabs_Filter_Link_Height:5.5rem;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-padding-start:0;background-color:var(--sapObjectHeader_Background);border-color:var(--sapObjectHeader_BorderColor);-webkit-box-shadow:var(--sapContent_HeaderShadow);box-shadow:var(--sapContent_HeaderShadow);color:var(--sapContent_LabelColor);list-style:none;padding-inline-start:0}.fd-tabs:after,.fd-tabs:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tabs__count{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;line-height:1rem;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-padding-after:.125rem;color:var(--sapContent_LabelColor);padding-block-end:.125rem}.fd-tabs__count:after,.fd-tabs__count:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tabs__link{border:0;-webkit-box-sizing:border-box;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:normal;line-height:1rem;margin-block:0;margin-inline:0;padding-block:0;padding-block:.875rem;padding-inline:0;padding-inline:.75rem;position:relative;text-decoration:none;-webkit-transition:0s;transition:0s}.fd-tabs__link:after,.fd-tabs__link:before{-webkit-box-sizing:inherit;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{-webkit-box-shadow:none;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{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;margin-inline:.25rem;padding-block:0;padding-inline:0;position:relative}.fd-tabs__item:after,.fd-tabs__item:before{-webkit-box-sizing:inherit;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{-webkit-margin-start:0;margin-inline-start:0}.fd-tabs__item:first-child .fd-tabs__link{-webkit-margin-start:.1875rem;margin-inline-start:.1875rem;-webkit-padding-start:0;padding-inline-start:0}.fd-tabs__icon{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:var(--fdIcon_Tab_Bar_Icon_Border_Weight) solid var(--fdIcon_Tab_Bar_Icon_Border_Color);border-radius:50%;color:var(--fdIcon_Tab_Bar_Inactive_Tab_Icon_Color);height:var(--fdTabs_Icon_Selection_Height);margin-block:0;margin-inline:.188rem;position:relative;width:var(--fdTabs_Icon_Selection_Height)}.fd-tabs__icon:after,.fd-tabs__icon:before{-webkit-box-sizing:inherit;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{border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;-webkit-transition:all .125s ease-in;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__tag{border:0;-webkit-box-sizing:border-box;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:normal;line-height:1rem;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;position:relative}.fd-tabs__tag:after,.fd-tabs__tag:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tabs__tag:after{border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;-webkit-transition:all .125s ease-in;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__panel{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-tabs__panel:after,.fd-tabs__panel:before{-webkit-box-sizing:inherit;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{border:0;-webkit-box-sizing:border-box;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:normal;line-height:1.5rem;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-padding-end:.5rem;padding-inline-end:.5rem}.fd-tabs__counter-header:after,.fd-tabs__counter-header:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tabs__overflow{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-margin-start:auto;margin-inline-start:auto}.fd-tabs__overflow:after,.fd-tabs__overflow:before{-webkit-box-sizing:inherit;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{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1rem;font-weight:400;forced-color-adjust:none;line-height:normal;line-height:1;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;padding-inline:.5rem}.fd-tabs__process-icon:after,.fd-tabs__process-icon:before{-webkit-box-sizing:inherit;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{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-padding-start:.125rem;color:var(--sapContent_LabelColor);font-size:var(--sapFontSmallSize);max-width:100%;padding-inline-start:.125rem}.fd-tabs__label:after,.fd-tabs__label:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tabs__label:first-child{-webkit-padding-after:var(--fdTabs_Label_Padding_Bottom);padding-block-end:var(--fdTabs_Label_Padding_Bottom)}.fd-tabs__separator{border:0;border-right:solid var(--sapGroup_TitleBorderColor);border-right-width:.0625rem;-webkit-box-sizing:border-box;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:normal;line-height:2rem;margin-block:0;margin-inline:0;margin-inline:.25rem;padding-block:0;padding-inline:0}.fd-tabs__separator:after,.fd-tabs__separator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-tabs__header{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-tabs__header:after,.fd-tabs__header:before{-webkit-box-sizing:inherit;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-block:0;margin-inline:0}.fd-tabs--icon-only .fd-tabs__link,.fd-tabs--process .fd-tabs__link{padding-block:1rem 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-block:0;margin-inline:0 .25rem}.fd-tabs--process .fd-tabs__item,.fd-tabs--process .fd-tabs__link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-tabs--process .fd-tabs__link{padding-inline:0}.fd-tabs--process .fd-tabs__icon{margin-block:0;margin-inline:.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-block:0;margin-inline:.25rem 0}.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-inline:0}.fd-tabs--filter{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-tabs--filter .fd-tabs__item{margin-block:0;margin-inline:0;padding-block:0;padding-inline:.25rem;width:5.375rem}.fd-tabs--filter .fd-tabs__item--header{width:auto}.fd-tabs--filter .fd-tabs__icon{-webkit-margin-after:.375rem;margin-block-end:.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{display:-webkit-box;display:-ms-flexbox;display:flex;height:var(--fdTabs_Filter_Link_Height);padding-block:.875rem .625rem;padding-inline:.188rem;text-align:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}.fd-tabs--filter .fd-tabs__link:after{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;-webkit-transition:all .125s ease-in;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs--filter .fd-tabs__link.is-focus,.fd-tabs--filter .fd-tabs__link:focus{-webkit-box-shadow:none;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-inline:.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-block:0;padding-inline:1rem}.fd-tabs--l,.fd-tabs--m{padding-block:0;padding-inline:2rem}.fd-tabs--xl,.fd-tabs--xxl{padding-block:0;padding-inline:3rem}.fd-tabs[dir=rtl] .fd-tabs__process-icon,[dir=rtl] .fd-tabs .fd-tabs__process-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fd-tabs__process{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-tabs__process:after,.fd-tabs__process:before{-webkit-box-sizing:inherit;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/*! Bundled license information:\n\nfundamental-styles/dist/tabs.css:\n  (*!\n   * Fundamental Library Styles v0.40.1\n   * Copyright (c) 2025 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*/\n"], dependencies: [{ kind: "component", type: OverflowLayoutComponent, selector: "fd-overflow-layout", inputs: ["maxVisibleItems", "navigationTrigger", "showMorePosition", "renderShowMoreButton", "reverseHiddenItems", "enableKeyboardNavigation", "ariaRole", "moreItemsButtonText"], outputs: ["visibleItemsCount", "hiddenItemsCount", "hiddenItemsChange"] }, { kind: "directive", type: OverflowItemRefDirective, selector: "[fdOverflowItemRef]", inputs: ["fdOverflowItemRef"] }, { kind: "directive", type: TabItemDirective, selector: "[fd-tab-item]", inputs: ["class", "tabItemState", "header", "disabled", "fdTabItemClass"] }, { kind: "directive", type: OverflowLayoutItemDirective, selector: "[fdOverflowLayoutItem]", inputs: ["forceVisibility"], outputs: ["hiddenChange"] }, { kind: "directive", type: TabLinkDirective, selector: "[fd-tab-link]", inputs: ["active", "disabled"], outputs: ["keyDown", "focused"] }, { kind: "directive", type: OverflowLayoutFocusableItemDirective, selector: "[fdOverflowLayoutFocusableItem], [fdOverflowLayoutItem][focusable]", inputs: ["focusable", "navigable"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TabHeaderDirective, selector: "[fdTabHeader], [fd-tab-header]" }, { kind: "directive", type: TabCounterHeaderDirective, selector: "[fdTabCounterHeader], [fd-tab-counter-header]" }, { kind: "directive", type: TabLabelDirective, selector: "[fdTabLabel], [fd-tab-label]" }, { kind: "component", type: TabIconComponent, selector: "[fd-tab-icon]", inputs: ["class", "icon", "iconFont"] }, { kind: "directive", type: TabCountDirective, selector: "[fdTabCount], [fd-tab-count]" }, { kind: "directive", type: TabProcessDirective, selector: "[fdTabProcess], [fd-tab-process]" }, { kind: "directive", type: TabTagDirective, selector: "[fdTabTag], [fd-tab-tag]" }, { kind: "directive", type: TabProcessIconDirective, selector: "[fdTabProcessIcon], [fd-tab-process-icon]" }, { kind: "directive", type: TabSeparatorDirective, selector: "[fdTabSeparator], [fd-tab-separator]" }, { kind: "directive", type: OverflowExpandDirective, selector: "[fdOverflowExpand]", inputs: ["fdOverflowExpandItems"] }, { kind: "component", type: TabItemExpandComponent, selector: "fd-item-expand" }, { kind: "directive", type: MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: MenuComponent, selector: "fd-menu", inputs: ["openOnHoverTime", "ariaLabel", "ariaLabelledby", "id", "config", "mobile", "mobileConfig", "placement", "closeOnEscapeKey", "focusAutoCapture", "disabled", "disableScrollbar", "triggers", "fillControlMode", "closeOnOutsideClick", "noArrow", "focusTrapped", "additionalBodyClass", "closeOnNavigation", "restoreFocusOnClose", "appendTo", "fixedPosition", "isOpen"], outputs: ["isOpenChange", "activePath", "beforeOpen"] }, { kind: "component", type: MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: ScrollSpyDirective, selector: "[fdScrollSpy]", inputs: ["trackedTags", "fireEmpty", "targetPercent", "targetOffset", "scrollSpyDisabled"], outputs: ["spyChange"], exportAs: ["fdScrollSpy"] }, { kind: "directive", type: ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible"] }, { kind: "directive", type: MenuTitleDirective, selector: "[fd-menu-title]", inputs: ["truncate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TabListComponent, decorators: [{
             type: Component,