@eui/eds 22.0.0-alpha.21 → 22.0.0-alpha.23

package/fesm2022/eui-eds-eds-tabs.mjs

@@ -1,24 +1,22 @@
 import * as i0 from '@angular/core';
-import { viewChild, inject, ViewContainerRef, Component, booleanAttribute, Input, contentChild, forwardRef, ContentChild, ChangeDetectionStrategy, input, computed, EventEmitter, PLATFORM_ID, ChangeDetectorRef, DOCUMENT, ViewChildren, ViewChild, ContentChildren, Output, HostBinding } from '@angular/core';
-import { AsyncPipe, isPlatformBrowser } from '@angular/common';
-import * as i2 from '@angular/cdk/portal';
+import { viewChild, inject, ViewContainerRef, afterNextRender, Component, input, booleanAttribute, signal, contentChild, forwardRef, ChangeDetectionStrategy, model, output, contentChildren, viewChildren, PLATFORM_ID, DestroyRef, DOCUMENT, effect } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { isPlatformBrowser } from '@angular/common';
+import * as i1 from '@angular/cdk/portal';
 import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import { AnimationBuilder, animate, style } from '@angular/animations';
-import { BehaviorSubject, Subject, takeUntil, startWith } from 'rxjs';
 import { uniqueId, EuiAppShellService } from '@eui/core';
-import * as i3 from '@eui/eds/eds-icon-button';
+import * as i2 from '@eui/eds/eds-icon-button';
 import { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';
-import * as i1 from '@eui/eds/shared';
-import { EdsColorDirective } from '@eui/eds/shared';
 
 class EdsTabHeader {
     constructor() {
         this.templateRef = viewChild.required('templateRef', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
         this.viewContainerRef = inject(ViewContainerRef);
-    }
-    ngAfterViewInit() {
-        this.templatePortal = new TemplatePortal(this.templateRef(), this.viewContainerRef);
+        afterNextRender(() => {
+            this.templatePortal = new TemplatePortal(this.templateRef(), this.viewContainerRef);
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EdsTabHeader, isStandalone: true, selector: "eds-tab-header", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef>\n    <div class=\"eds-tab-header-wrapper\">\n        <ng-content select=\"eds-tab-header-left-content\"/>\n        <div class=\"eds-tab-header-label-wrapper\">\n            <ng-content select=\"eds-tab-header-label\"/>\n            <ng-content select=\"eds-tab-header-sub-label\"/>\n        </div>\n        <ng-content/>\n        <ng-content select=\"eds-tab-header-right-content\"/>\n    </div>\n</ng-template>\n" }); }
@@ -26,7 +24,7 @@ class EdsTabHeader {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeader, decorators: [{
             type: Component,
             args: [{ selector: 'eds-tab-header', template: "<ng-template #templateRef>\n    <div class=\"eds-tab-header-wrapper\">\n        <ng-content select=\"eds-tab-header-left-content\"/>\n        <div class=\"eds-tab-header-label-wrapper\">\n            <ng-content select=\"eds-tab-header-label\"/>\n            <ng-content select=\"eds-tab-header-sub-label\"/>\n        </div>\n        <ng-content/>\n        <ng-content select=\"eds-tab-header-right-content\"/>\n    </div>\n</ng-template>\n" }]
-        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }] } });
 
 class EdsTabBody {
     constructor() {
@@ -35,92 +33,98 @@ class EdsTabBody {
          * Useful for full-width content, custom layouts, or when content provides its own spacing.
          * @default false
          */
-        this.hasNoContentPadding = false;
+        this.hasNoContentPadding = input(false, { ...(ngDevMode ? { debugName: "hasNoContentPadding" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.templateRef = viewChild.required('templateRef', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
-        this.tabIndex$ = new BehaviorSubject(0);
+        this.tabIndex = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
         this.viewContainerRef = inject(ViewContainerRef);
-    }
-    ngAfterViewInit() {
-        this.templatePortal = new TemplatePortal(this.templateRef(), this.viewContainerRef);
+        afterNextRender(() => {
+            this.templatePortal = new TemplatePortal(this.templateRef(), this.viewContainerRef);
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EdsTabBody, isStandalone: true, selector: "eds-tab-body", inputs: { hasNoContentPadding: ["hasNoContentPadding", "hasNoContentPadding", booleanAttribute] }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef>\n    <div class=\"eds-tab__body\" [tabindex]=\"tabIndex$ | async\" [class.eds-tab__body--no-padding]=\"hasNoContentPadding\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EdsTabBody, isStandalone: true, selector: "eds-tab-body", inputs: { hasNoContentPadding: { classPropertyName: "hasNoContentPadding", publicName: "hasNoContentPadding", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef>\n    <div class=\"eds-tab__body\" [tabindex]=\"tabIndex()\" [class.eds-tab__body--no-padding]=\"hasNoContentPadding()\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabBody, decorators: [{
             type: Component,
-            args: [{ selector: 'eds-tab-body', imports: [
-                        AsyncPipe,
-                    ], template: "<ng-template #templateRef>\n    <div class=\"eds-tab__body\" [tabindex]=\"tabIndex$ | async\" [class.eds-tab__body--no-padding]=\"hasNoContentPadding\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n" }]
-        }], propDecorators: { hasNoContentPadding: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }] } });
+            args: [{ selector: 'eds-tab-body', template: "<ng-template #templateRef>\n    <div class=\"eds-tab__body\" [tabindex]=\"tabIndex()\" [class.eds-tab__body--no-padding]=\"hasNoContentPadding()\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { hasNoContentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasNoContentPadding", required: false }] }], templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }] } });
 
 class EdsTab {
     constructor() {
+        /**
+         * Unique identifier for the tab.
+         * Used for programmatic tab selection and tracking.
+         * Required for proper tab management and routing.
+         */
+        this.id = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * URL or route path associated with the tab.
+         * Enables deep linking and browser history integration for tab navigation.
+         */
+        this.url = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "url" }] : /* istanbul ignore next */ []));
         /**
          * Data attribute used for end-to-end testing identification.
-         * @default 'eui-tab'
+         * @default 'eds-tab'
          */
-        this.e2eAttr = 'eds-tab';
+        this.e2eAttr = input('eds-tab', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "e2eAttr" }] : /* istanbul ignore next */ []));
+        /**
+         * Tooltip text displayed when hovering over the tab header.
+         * Provides additional context or information about the tab content.
+         */
+        this.tooltip = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
         /**
          * Enables a close button on the tab header for dismissible tabs.
          * Allows users to remove or hide the tab from the tab bar.
          * @default false
          */
-        this.isClosable = false;
+        this.isClosable = input(false, { ...(ngDevMode ? { debugName: "isClosable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Disables the tab, preventing user interaction and selection.
          * Applies disabled styling and blocks tab activation.
          * @default false
          */
-        this.isDisabled = false;
+        this.isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Controls the visibility of the tab in the tab bar.
          * When false, hides the tab from display without removing it from the DOM.
          * @default true
          */
-        this.isVisible = true;
+        this.isVisible = input(true, { ...(ngDevMode ? { debugName: "isVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Enables automatic tab closure when the close button is clicked.
          * When false, close button click must be handled externally.
          * @default false
          */
-        this.isHandleCloseOnClose = false;
+        this.isHandleCloseOnClose = input(false, { ...(ngDevMode ? { debugName: "isHandleCloseOnClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Enables automatic tab activation when the tab is clicked.
          * When false, tab activation must be handled externally.
          * @default false
          */
-        this.isHandleActivateTab = false;
+        this.isHandleActivateTab = input(false, { ...(ngDevMode ? { debugName: "isHandleActivateTab" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.euiVariant = input('euiPrimary', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "euiVariant" }] : /* istanbul ignore next */ []));
         this.templateHeader = contentChild.required(forwardRef(() => EdsTabHeader), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "templateHeader" }] : /* istanbul ignore next */ []));
-        this.euiVariant = 'euiPrimary';
-        this.isActive = false;
-        this.isVisible$ = new BehaviorSubject(this.isVisible);
-        this.isClosable$ = new BehaviorSubject(this.isClosable);
-        this.isDisabled$ = new BehaviorSubject(this.isDisabled);
-    }
-    ngOnChanges(c) {
-        if (c?.isVisible) {
-            this.isVisible$.next(c.isVisible.currentValue);
-        }
-        if (c?.isClosable) {
-            this.isClosable$.next(c.isClosable.currentValue);
-        }
-        if (c?.isDisabled) {
-            this.isDisabled$.next(c.isDisabled.currentValue);
-        }
+        this.templateBody = contentChild(forwardRef(() => EdsTabBody), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templateBody" }] : /* istanbul ignore next */ []));
+        this.isActive = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
     }
     activateTab() {
-        this.isActive = true;
+        this.isActive.set(true);
     }
     deactivateTab() {
-        this.isActive = false;
+        this.isActive.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EdsTab, isStandalone: true, selector: "eds-tab", inputs: { id: "id", url: "url", e2eAttr: "e2eAttr", tooltip: "tooltip", isClosable: ["isClosable", "isClosable", booleanAttribute], isDisabled: ["isDisabled", "isDisabled", booleanAttribute], isVisible: ["isVisible", "isVisible", booleanAttribute], isHandleCloseOnClose: ["isHandleCloseOnClose", "isHandleCloseOnClose", booleanAttribute], isHandleActivateTab: ["isHandleActivateTab", "isHandleActivateTab", booleanAttribute], euiVariant: "euiVariant" }, queries: [{ propertyName: "templateHeader", first: true, predicate: i0.forwardRef(() => EdsTabHeader), descendants: true, isSignal: true }, { propertyName: "templateBody", first: true, predicate: i0.forwardRef(() => EdsTabBody), descendants: true }], usesOnChanges: true, ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EdsTab, isStandalone: true, selector: "eds-tab", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, isClosable: { classPropertyName: "isClosable", publicName: "isClosable", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null }, isHandleCloseOnClose: { classPropertyName: "isHandleCloseOnClose", publicName: "isHandleCloseOnClose", isSignal: true, isRequired: false, transformFunction: null }, isHandleActivateTab: { classPropertyName: "isHandleActivateTab", publicName: "isHandleActivateTab", isSignal: true, isRequired: false, transformFunction: null }, euiVariant: { classPropertyName: "euiVariant", publicName: "euiVariant", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "templateHeader", first: true, predicate: i0.forwardRef(() => EdsTabHeader), descendants: true, isSignal: true }, { propertyName: "templateBody", first: true, predicate: i0.forwardRef(() => EdsTabBody), descendants: true, isSignal: true }], ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTab, decorators: [{
             type: Component,
@@ -129,35 +133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                     template: '<ng-content/>',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], url: [{
-                type: Input
-            }], e2eAttr: [{
-                type: Input
-            }], tooltip: [{
-                type: Input
-            }], isClosable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], isDisabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], isVisible: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], isHandleCloseOnClose: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], isHandleActivateTab: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], templateHeader: [{ type: i0.ContentChild, args: [forwardRef(() => EdsTabHeader), { isSignal: true }] }], templateBody: [{
-                type: ContentChild,
-                args: [forwardRef(() => EdsTabBody)]
-            }], euiVariant: [{
-                type: Input
-            }] } });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], isClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isClosable", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisible", required: false }] }], isHandleCloseOnClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHandleCloseOnClose", required: false }] }], isHandleActivateTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHandleActivateTab", required: false }] }], euiVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiVariant", required: false }] }], templateHeader: [{ type: i0.ContentChild, args: [forwardRef(() => EdsTabHeader), { isSignal: true }] }], templateBody: [{ type: i0.ContentChild, args: [forwardRef(() => EdsTabBody), { isSignal: true }] }] } });
 
 class EdsTabs {
     constructor() {
@@ -168,24 +144,24 @@ class EdsTabs {
          */
         this.e2eAttr = input('eds-tabs', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "e2eAttr" }] : /* istanbul ignore next */ []));
-        this.colorDirective = inject(EdsColorDirective);
-        /** Computed host class that applies the color and variant modifiers. */
-        this.hostColorClass = computed(() => {
-            const color = this.colorDirective.getCssClass('eds-tabs');
-            const navbar = this.isNavBar() ? 'eds-tabs--navbar' : '';
-            return `eds-tabs ${color} ${navbar}`.trim();
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hostColorClass" }] : /* istanbul ignore next */ []));
         /**
-         * Index of the active tab
+         * Semantic color variant, reflected as the `color` host attribute.
+         *
+         * @default 'neutral'
+         */
+        this.color = input('neutral', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /**
+         * Index of the active tab. Two-way bindable.
          *
          * @default 0
          */
-        this.activeTabIndex = 0;
+        this.activeTabIndex = model(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeTabIndex" }] : /* istanbul ignore next */ []));
         /**
-         * Sets the `aria-label` attribute for the host element.
+         * Sets the `aria-label` attribute for the tab list.
          *
-         * @default 'eUI Tabs'
+         * @default 'EDS Tabs'
          */
         this.ariaLabel = input('EDS Tabs', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
@@ -195,77 +171,84 @@ class EdsTabs {
         /**
          * Event emitted when a tab is closed
          */
-        this.tabClose = new EventEmitter();
+        this.tabClose = output();
         /**
          * Event emitted when a tab is activated
          */
-        this.tabActivate = new EventEmitter();
+        this.tabActivate = output();
         /**
          * Event emitted when a tab is clicked
          */
-        this.tabClick = new EventEmitter();
-        this.tabs = [];
-        this.scrolling = false;
-        this.navigationLeftButtonDisabled = true;
-        this.navigationRightButtonDisabled = false;
-        this.currentOffset = 0;
+        this.tabClick = output();
+        this._tabs = contentChildren(EdsTab, { ...(ngDevMode ? { debugName: "_tabs" } : /* istanbul ignore next */ {}), descendants: false });
+        this.edsTabsHeadersContainer = viewChild('edsTabsHeadersContainer', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "edsTabsHeadersContainer" }] : /* istanbul ignore next */ []));
+        this.edsTabsHeaders = viewChild('edsTabsHeaders', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "edsTabsHeaders" }] : /* istanbul ignore next */ []));
+        this.edsTabsRightContent = viewChild('edsTabsRightContent', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "edsTabsRightContent" }] : /* istanbul ignore next */ []));
+        this.edsTabListItems = viewChildren('edsTabListItems', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "edsTabListItems" }] : /* istanbul ignore next */ []));
+        this.tabs = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+        this.scrolling = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrolling" }] : /* istanbul ignore next */ []));
+        this.navigationLeftButtonDisabled = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigationLeftButtonDisabled" }] : /* istanbul ignore next */ []));
+        this.navigationRightButtonDisabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigationRightButtonDisabled" }] : /* istanbul ignore next */ []));
+        this.currentOffset = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentOffset" }] : /* istanbul ignore next */ []));
         this.tabId = uniqueId();
-        this.destroy$ = new Subject();
         this.platformId = inject(PLATFORM_ID);
+        this.destroyRef = inject(DestroyRef);
         this.stepMove = 400;
         this.scrollOffset = 40;
         this.scrollingCount = 0;
-        this.cd = inject(ChangeDetectorRef);
         this.builder = inject(AnimationBuilder);
         this.euiAppShellService = inject(EuiAppShellService);
         this.document = inject(DOCUMENT);
+        this.viewReady = false;
+        // React to app-shell state changes (e.g. layout resize) to recompute scrolling.
+        this.euiAppShellService.state$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            if (this.viewReady) {
+                this.tabsScrollingHandler();
+            }
+        });
+        // Rebuild the tabs array whenever the projected tabs change.
+        effect(() => {
+            this.tabs.set(this._tabs().slice());
+            if (this.viewReady) {
+                setTimeout(() => this.tabsScrollingHandler());
+            }
+        });
+        afterNextRender(() => {
+            this.viewReady = true;
+            setTimeout(() => {
+                this.tabsScrollingHandler();
+                if (this.tabs()[this.activeTabIndex()]) {
+                    this.activate(this.activeTabIndex(), false, { emitEvent: false });
+                }
+            });
+        });
     }
     /**
      * Width of the tabs headers container
      */
     get edsTabsHeadersContainerWidth() {
-        return (this.edsTabsHeadersContainer?.nativeElement.clientWidth - this.edsTabsRightContentWidth);
+        return (this.edsTabsHeadersContainer()?.nativeElement.clientWidth - this.edsTabsRightContentWidth);
     }
     /**
      * Width of the tabs headers
      */
     get edsTabsHeadersWidth() {
-        return this.edsTabsHeaders?.nativeElement.clientWidth;
+        return this.edsTabsHeaders()?.nativeElement.clientWidth;
     }
     /**
      * Width of the tabs right content
      */
     get edsTabsRightContentWidth() {
-        return this.edsTabsRightContent?.nativeElement?.offsetWidth || 0;
-    }
-    ngOnChanges(c) {
-        if (c?.activeTabIndex && !c.activeTabIndex.isFirstChange()) {
-            this.activate(this.activeTabIndex);
-        }
-    }
-    ngOnInit() {
-        this.euiAppShellService.state$.pipe(takeUntil(this.destroy$)).subscribe((state) => {
-            this.tabsScrollingHandler();
-        });
-    }
-    ngAfterViewInit() {
-        this._tabs.changes.pipe(startWith(this._tabs), takeUntil(this.destroy$)).subscribe((tabs) => {
-            this.tabs = tabs.toArray();
-            setTimeout(() => {
-                this.tabsScrollingHandler();
-            });
-            this.cd.detectChanges();
-        });
-        setTimeout(() => {
-            if (this.tabs[this.activeTabIndex]) {
-                this.cd.markForCheck();
-                this.activate(this.activeTabIndex, false, { emitEvent: false });
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next(true);
-        this.destroy$.unsubscribe();
+        return this.edsTabsRightContent()?.nativeElement?.offsetWidth || 0;
     }
     /**
      * Activate a tab having index passed in parameter if exists.
@@ -275,18 +258,17 @@ class EdsTabs {
      * @param options Object with emitEvent property to emit the event or not
      */
     activateTab(index, isAnimated = true, options = { emitEvent: true }) {
-        const tab = this.tabs[index];
+        const tab = this.tabs()[index];
         if (tab) {
-            this.tabs.forEach((t) => {
+            this.tabs().forEach((t) => {
                 t.deactivateTab();
             });
             this.setScrollToTabIndex(index, isAnimated);
             tab.activateTab();
-            this.activeTabIndex = index;
+            this.activeTabIndex.set(index);
             if (options.emitEvent) {
                 this.tabActivate.emit({ tab, index });
             }
-            this.cd.detectChanges();
         }
     }
     /**
@@ -294,13 +276,13 @@ class EdsTabs {
          * @param index Index of the tab to close
      */
     closeTab(index) {
-        const tab = this.tabs[index];
-        if (this.tabs[index]) {
-            this.tabs[index].deactivateTab();
-            this.tabs = this.tabs.filter((_, i) => i !== index);
-            if (index === this.activeTabIndex) {
-                const previousVisibleIndex = this.tabs.indexOf(this.tabs[index - 1]);
-                this.cd.markForCheck();
+        const tab = this.tabs()[index];
+        if (tab) {
+            tab.deactivateTab();
+            const activeIndex = this.activeTabIndex();
+            this.tabs.set(this.tabs().filter((_, i) => i !== index));
+            if (index === activeIndex) {
+                const previousVisibleIndex = index - 1;
                 if (previousVisibleIndex < 0) {
                     this.activate(0);
                 }
@@ -308,12 +290,9 @@ class EdsTabs {
                     this.activate(previousVisibleIndex);
                 }
             }
-            else {
-                if (index < this.activeTabIndex) {
-                    this.activeTabIndex = this.activeTabIndex - 1;
-                }
+            else if (index < activeIndex) {
+                this.activeTabIndex.set(activeIndex - 1);
             }
-            this.cd.detectChanges();
             this.tabsScrollingHandler();
         }
     }
@@ -321,7 +300,7 @@ class EdsTabs {
      * Scroll to the left handler
      */
     goToLeft() {
-        let scrollTo = this.currentOffset + this.stepMove;
+        let scrollTo = this.currentOffset() + this.stepMove;
         if (scrollTo > 0) {
             scrollTo = 0;
         }
@@ -331,7 +310,7 @@ class EdsTabs {
      * Scroll to the rihgt handler
      */
     goToRight() {
-        let scrollTo = this.currentOffset - this.stepMove;
+        let scrollTo = this.currentOffset() - this.stepMove;
         if (Math.abs(scrollTo) > this.edsTabsHeadersWidth - this.edsTabsHeadersContainerWidth) {
             scrollTo = -(this.edsTabsHeadersWidth - this.edsTabsHeadersContainerWidth) - this.scrollOffset;
         }
@@ -344,48 +323,49 @@ class EdsTabs {
      * @param event The keyboard event
      */
     onKeydown(i, event) {
+        const items = this.edsTabListItems();
         switch (event.key) {
             case 'Enter': {
-                if (!this.tabs[i].isDisabled) {
+                if (!this.tabs()[i].isDisabled()) {
                     this.activate(i);
                 }
                 break;
             }
             case 'ArrowRight': {
-                const isLastItem = i === this.edsTabListItems.toArray().length - 1;
+                const isLastItem = i === items.length - 1;
                 const index = isLastItem ? 0 : i + 1;
                 this.setScrollToTabIndex(index, false);
-                this.edsTabListItems.toArray()[index]?.nativeElement.focus();
+                items[index]?.nativeElement.focus();
                 break;
             }
             case 'ArrowLeft': {
-                const lastIndex = this.edsTabListItems.toArray().length - 1;
+                const lastIndex = items.length - 1;
                 const index = i === 0 ? lastIndex : i - 1;
                 this.setScrollToTabIndex(index, false);
-                this.edsTabListItems.toArray()[index]?.nativeElement.focus();
+                items[index]?.nativeElement.focus();
                 break;
             }
             case 'Home': {
                 this.setScrollToTabIndex(0, false);
-                this.edsTabListItems.toArray()[0]?.nativeElement.focus();
+                items[0]?.nativeElement.focus();
                 event.preventDefault();
                 break;
             }
             case 'End': {
-                this.setScrollToTabIndex(this.edsTabListItems.toArray().length - 1, false);
-                this.edsTabListItems.toArray()[this.edsTabListItems.toArray().length - 1]?.nativeElement.focus();
+                this.setScrollToTabIndex(items.length - 1, false);
+                items[items.length - 1]?.nativeElement.focus();
                 event.preventDefault();
                 break;
             }
             case 'Delete': {
-                if (this.tabs[i].isClosable) {
-                    if (i === this.edsTabListItems.toArray().length - 1) {
-                        this.edsTabListItems.toArray()[i - 1]?.nativeElement.focus();
+                if (this.tabs()[i].isClosable()) {
+                    if (i === items.length - 1) {
+                        items[i - 1]?.nativeElement.focus();
                         this.close(i, event);
                     }
                     else {
                         this.close(i, event);
-                        this.edsTabListItems.toArray()[i]?.nativeElement.focus();
+                        items[i]?.nativeElement.focus();
                     }
                 }
                 break;
@@ -401,7 +381,7 @@ class EdsTabs {
      * @param index Index of the tab clicked
      */
     tabListItemClick(index) {
-        const tab = this.tabs[index];
+        const tab = this.tabs()[index];
         this.tabClick.emit({ tab, index });
         this.activate(index);
     }
@@ -413,8 +393,8 @@ class EdsTabs {
      * @param options Object with emitEvent property to emit the event or not
      */
     activate(index, isAnimated = true, options = { emitEvent: true }) {
-        const tab = this.tabs[index];
-        if (tab && !tab.isHandleActivateTab) {
+        const tab = this.tabs()[index];
+        if (tab && !tab.isHandleActivateTab()) {
             this.activateTab(index, isAnimated, options);
         }
     }
@@ -425,8 +405,8 @@ class EdsTabs {
      * @param e
      */
     close(index, e) {
-        const tab = this.tabs[index];
-        if (tab && !tab.isHandleCloseOnClose) {
+        const tab = this.tabs()[index];
+        if (tab && !tab.isHandleCloseOnClose()) {
             this.closeTab(index);
         }
         this.tabClose.emit({ tab, index });
@@ -439,18 +419,19 @@ class EdsTabs {
     onAttached(index) {
         if (isPlatformBrowser(this.platformId)) {
             const tabbody = this.document.querySelector('#tabpanel-' + index + '-' + this.tabId)?.children[0];
+            const body = this.tabs()[index - 1].templateBody();
             if (tabbody?.children?.length && tabbody.children.length > 0) {
                 for (const child of Array.from(tabbody.children)) {
                     if (this.isFocusableElement(child)) {
-                        this.tabs[index - 1].templateBody.tabIndex$.next(-1);
+                        body?.tabIndex.set(-1);
                     }
                     else {
-                        this.tabs[index - 1].templateBody.tabIndex$.next(0);
+                        body?.tabIndex.set(0);
                     }
                 }
             }
             else {
-                this.tabs[index - 1].templateBody.tabIndex$.next(0);
+                body?.tabIndex.set(0);
             }
         }
     }
@@ -471,26 +452,26 @@ class EdsTabs {
      */
     tabsScrollingHandler() {
         if (this.edsTabsHeadersContainerWidth && this.edsTabsHeadersWidth) {
-            this.scrolling = this.edsTabsHeadersWidth > this.edsTabsHeadersContainerWidth;
-            if (!this.scrolling) {
+            const isScrolling = this.edsTabsHeadersWidth > this.edsTabsHeadersContainerWidth;
+            this.scrolling.set(isScrolling);
+            if (!isScrolling) {
                 this.scrollingCount = 0;
                 this.setScrollTo(0, false);
-                this.navigationLeftButtonDisabled = true;
-                this.navigationRightButtonDisabled = true;
+                this.navigationLeftButtonDisabled.set(true);
+                this.navigationRightButtonDisabled.set(true);
             }
             else {
                 const maxScrollableWidth = this.edsTabsHeadersWidth - this.edsTabsHeadersContainerWidth;
-                if (maxScrollableWidth <= Math.abs(this.currentOffset) + this.scrollOffset && this.scrollingCount !== 0) {
+                if (maxScrollableWidth <= Math.abs(this.currentOffset()) + this.scrollOffset && this.scrollingCount !== 0) {
                     const scrollTo = -maxScrollableWidth - this.scrollOffset;
                     this.setScrollTo(scrollTo);
                 }
                 else {
-                    this.navigationRightButtonDisabled = Math.abs(this.currentOffset) >= maxScrollableWidth;
-                    this.navigationLeftButtonDisabled = this.currentOffset >= 0;
+                    this.navigationRightButtonDisabled.set(Math.abs(this.currentOffset()) >= maxScrollableWidth);
+                    this.navigationLeftButtonDisabled.set(this.currentOffset() >= 0);
                 }
                 this.scrollingCount++;
             }
-            this.cd.detectChanges();
         }
     }
     /**
@@ -500,12 +481,13 @@ class EdsTabs {
      * @param isAnimated Whether the tab activation should be animated
      */
     setScrollToTabIndex(index, isAnimated = true) {
-        const activeTab = this.edsTabsHeaders.nativeElement.children.item(index);
+        const headers = this.edsTabsHeaders();
+        const activeTab = headers?.nativeElement.children.item(index);
         if (activeTab && !this.isActiveTabFullyVisible(activeTab) && !this.isMainNavigation()) {
             let scrollTo = 0;
             let subsetWidth = 0;
             for (let i = 0; i <= index; i++) {
-                subsetWidth += this.edsTabsHeaders.nativeElement.children.item(i).clientWidth;
+                subsetWidth += headers.nativeElement.children.item(i).clientWidth;
             }
             scrollTo = this.edsTabsHeadersContainerWidth / 2 - subsetWidth;
             if (Math.abs(scrollTo) > this.edsTabsHeadersWidth - this.edsTabsHeadersContainerWidth + this.scrollOffset) {
@@ -524,24 +506,27 @@ class EdsTabs {
      * @param isAnimated Whether the tab activation should be animated
      */
     setScrollTo(scrollTo, isAnimated = true) {
+        const headers = this.edsTabsHeaders();
+        if (!headers) {
+            return;
+        }
         const timings = isAnimated ? '500ms cubic-bezier(0.35, 0, 0.25, 1)' : 0;
         const animation = this.builder.build([animate(timings, style({ 'margin-left': +scrollTo + 'px' }))]);
-        this.player = animation.create(this.edsTabsHeaders.nativeElement);
+        this.player = animation.create(headers.nativeElement);
         this.player.play();
-        this.currentOffset = scrollTo;
+        this.currentOffset.set(scrollTo);
         if (scrollTo === 0) {
-            this.navigationLeftButtonDisabled = true;
+            this.navigationLeftButtonDisabled.set(true);
         }
-        if (Math.abs(this.currentOffset) < this.edsTabsHeadersWidth - this.edsTabsHeadersContainerWidth + this.scrollOffset) {
-            this.navigationRightButtonDisabled = false;
+        if (Math.abs(this.currentOffset()) < this.edsTabsHeadersWidth - this.edsTabsHeadersContainerWidth + this.scrollOffset) {
+            this.navigationRightButtonDisabled.set(false);
         }
-        if (this.currentOffset < 0) {
-            this.navigationLeftButtonDisabled = false;
+        if (this.currentOffset() < 0) {
+            this.navigationLeftButtonDisabled.set(false);
         }
         if (Math.abs(scrollTo) === this.edsTabsHeadersWidth - this.edsTabsHeadersContainerWidth + this.scrollOffset) {
-            this.navigationRightButtonDisabled = true;
+            this.navigationRightButtonDisabled.set(true);
         }
-        this.cd.detectChanges();
     }
     /**
      * Checks if the active tab is fully visible
@@ -555,52 +540,20 @@ class EdsTabs {
         return fullyVisible;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsTabs, isStandalone: true, selector: "eds-tabs", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, activeTabIndex: { classPropertyName: "activeTabIndex", publicName: "activeTabIndex", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, isMainNavigation: { classPropertyName: "isMainNavigation", publicName: "isMainNavigation", isSignal: true, isRequired: false, transformFunction: null }, isFlat: { classPropertyName: "isFlat", publicName: "isFlat", isSignal: true, isRequired: false, transformFunction: null }, isNavBar: { classPropertyName: "isNavBar", publicName: "isNavBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabClose: "tabClose", tabActivate: "tabActivate", tabClick: "tabClick" }, host: { properties: { "attr.data-e2e": "e2eAttr()", "class": "hostColorClass()" }, classAttribute: "eds-tabs" }, queries: [{ propertyName: "_tabs", predicate: i0.forwardRef(() => EdsTab) }], viewQueries: [{ propertyName: "edsTabsHeadersContainer", first: true, predicate: ["edsTabsHeadersContainer"], descendants: true }, { propertyName: "edsTabsHeaders", first: true, predicate: ["edsTabsHeaders"], descendants: true }, { propertyName: "edsTabsRightContent", first: true, predicate: ["edsTabsRightContent"], descendants: true }, { propertyName: "edsTabListItems", predicate: ["edsTabListItems"], descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.EdsColorDirective, inputs: ["edsBrand", "edsBrand", "edsNeutral", "edsNeutral", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: "<div #edsTabsHeadersContainer class=\"eds-tabs-wrapper\" [class.eds-tabs-wrapper--scrolling]=\"scrolling\">\n    <div class=\"eds-tabs-navigation\">\n        <div class=\"eds-tabs-navigation__left-item\">\n            <button edsIconButton\n                (click)=\"goToLeft()\"\n                [disabled]=\"navigationLeftButtonDisabled\"\n                icon=\"caret-left:core\"\n                ariaLabel=\"Scroll left\">\n            </button>\n        </div>\n\n        <ul #edsTabsHeaders class=\"eds-tab-items\" [attr.data-offset]=\"currentOffset\" role=\"tablist\" [attr.aria-label]=\"ariaLabel\">\n            @for (tab of tabs; let i = $index; track tab) {\n                @if (tab.isVisible$ | async) {\n                    <li #edsTabListItems\n                        class=\"eds-tab-item\"\n                        id=\"tab-{{ i + 1 }}-{{ tabId }}\"\n                        [tabindex]=\"i === activeTabIndex ? '0' : '-1'\"\n                        role=\"tab\"\n                        attr.aria-controls=\"tabpanel-{{ i + 1 }}-{{ tabId }}\"\n                        [attr.aria-selected]=\"i === activeTabIndex\"\n                        [class.eds-tab-item--active]=\"i === activeTabIndex\"\n                        [class.eds-tab-item--disabled]=\"tab.isDisabled$ | async\"\n                        attr.aria-disabled=\"{{ tab.isDisabled$ | async }}\"\n                        (click)=\"tabListItemClick(i)\"\n                        (keydown)=\"onKeydown(i, $event)\">\n                        <ng-template [cdkPortalOutlet]=\"tab.templateHeader().templatePortal\"></ng-template>\n\n                        @if (tab.isClosable$ | async) {\n                            <button edsIconButton\n                                [tabindex]=\"-1\"\n                                ariaLabel=\"Closable\"\n                                rounded\n                                class=\"eds-tab-close-button\"\n                                icon=\"x:core\"\n                                size=\"s\"\n                                [disabled]=\"tab.isDisabled$ | async\"\n                                (buttonClick)=\"close(i, $event)\">\n                            </button>\n                        }\n                    </li>\n                }\n            }\n        </ul>\n\n        <div class=\"eds-tabs-navigation__right-item\">\n            <button edsIconButton\n                (click)=\"goToRight()\"\n                [disabled]=\"navigationRightButtonDisabled\"\n                icon=\"caret-right:core\"\n                ariaLabel=\"Scroll right\">\n            </button>\n        </div>\n    </div>\n    <div #edsTabsRightContent class=\"eds-tabs-right-content-wrapper\">\n        <ng-content select=\"eds-tabs-right-content\"></ng-content>\n    </div>\n</div>\n\n@for (tab of tabs; let i = $index; track tab) {\n    @if (i === activeTabIndex && (tab.isDisabled$ | async) === false && tab.templateBody) {\n        <div id=\"tabpanel-{{ i + 1 }}-{{ tabId }}\" class=\"eds-tab-body-container\" role=\"tabpanel\" attr.aria-labelledby=\"tab-{{ i + 1 }}-{{ tabId }}\">\n            <ng-template [cdkPortalOutlet]=\"tab.templateBody.templatePortal\" (attached)=\"onAttached(i + 1)\"></ng-template>\n        </div>\n    }\n}\n", styles: [".eui-21 :host.eds-tabs{--_label-font: var(--eds-f-label-m-semibold);--_sublabel-font: var(--eds-f-paragraph-s)}.eui-21 :host.eds-tabs{display:flex;flex-direction:column;width:100%}.eui-21 :host.eds-tabs .eds-tab-item{--_border-color: transparent;--_color: var(--eds-c-foreground-subtler);--_color-hover: var(--eds-c-foreground)}.eui-21 :host.eds-tabs .eds-tab-item--active{--_color: var(--eds-c-foreground);--_border-color: var(--eds-c-border)}.eui-21 :host.eds-tabs .eds-tab-item--disabled{--_color: var(--eds-c-foreground-disabled);--_icon-color: var(--eds-c-foreground-disabled);--_border-color-hover: transparent}.eui-21 :host.eds-tabs--brand .eds-tab-item{--_color: var(--eds-c-foreground-inverted);--_color-hover: var(--eds-c-on-surface-brand)}.eui-21 :host.eds-tabs--brand .eds-tab-item--active{--_color: var(--eds-c-on-surface-brand);--_border-color: var(--eds-c-on-surface-brand)}.eui-21 :host.eds-tabs--neutral .eds-tab-item{--_color: var(--eds-c-foreground-subtler);--_color-hover: var(--eds-c-foreground)}.eui-21 :host.eds-tabs--neutral .eds-tab-item--active{--_color: var(--eds-c-foreground);--_border-color: var(--eds-c-foreground)}.eui-21 :host.eds-tabs.eds-tabs--navbar .eds-tabs-wrapper{border-bottom:none}.eui-21 :host.eds-tabs .eds-tabs-wrapper{align-items:center;border-bottom:var(--eds-bw-xs) solid var(--eds-c-border-divider);display:flex;overflow:hidden;position:relative}.eui-21 :host.eds-tabs .eds-tabs-wrapper .eds-tabs-right-content-wrapper{display:flex;margin-left:var(--eds-sp-m)}.eui-21 :host.eds-tabs .eds-tab-items{display:flex;height:100%;list-style:none;list-style-type:none;margin:0;padding:0}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item{align-items:center;background-color:inherit;border:var(--eui-bw-none);border-bottom:var(--eds-bw-s) solid transparent;color:var(--_color);cursor:pointer;display:flex;padding:var(--eds-sp-s) var(--eds-sp-m) var(--eds-sp-s) var(--eds-sp-m);position:relative;text-align:center;gap:var(--eds-sp-2xs)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eds-c-border-primary)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper{display:flex;align-items:center;gap:var(--eds-sp-s);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper ::ng-deep .eds-tab-header-label-wrapper{display:flex;flex-direction:column}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper ::ng-deep .eds-tab-header-label-wrapper ::ng-deep .eds-tab-header-label{display:block;font-weight:700;line-height:var(--eds-sp-l);color:var(--_color);font:var(--_label-font)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper ::ng-deep .eds-tab-header-label-wrapper ::ng-deep .eds-tab-header-sub-label{font-weight:400;color:var(--_color);font:var(--_sublabel-font)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-left-content,.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-right-content{display:flex}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item--active{border-color:var(--_border-color)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item--disabled{cursor:not-allowed;pointer-events:none}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item:hover:not(.eds-tab-header--active) ::ng-deep .eds-tab-header-label{color:var(--_color-hover)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item:hover:not(.eds-tab-header--active) ::ng-deep .eds-tab-header-sub-label{color:var(--_color-hover)}.eui-21 :host.eds-tabs .eds-tabs-navigation{display:flex;overflow:hidden;position:relative;width:100%}.eui-21 :host.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__left-item,.eui-21 :host.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__right-item{align-self:center;background-color:var(--eui-c-surface-page);display:none;height:100%;position:absolute;z-index:1}.eui-21 :host.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__left-item{left:0}.eui-21 :host.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__right-item{right:0}.eui-21 :host.eds-tabs .eds-tabs-wrapper.eui-tabs-wrapper--scrolling .eds-tab-items{padding-left:var(--eui-s-5xl)}.eui-21 :host.eds-tabs .eds-tabs-wrapper.eui-tabs-wrapper--scrolling .eds-tab-items .eds-tab-item{min-width:unset;overflow:unset}.eui-21 :host.eds-tabs .eds-tabs-wrapper.eui-tabs-wrapper--scrolling .eds-tabs-navigation__left-item,.eui-21 :host.eds-tabs .eds-tabs-wrapper.eui-tabs-wrapper--scrolling .eds-tabs-navigation__right-item{display:flex}.eui-21 :host.eds-tabs .eds-tab-body-container ::ng-deep .eds-tab__body{padding:var(--eui-s-s)}.eui-21 :host.eds-tabs .eds-tab-body-container ::ng-deep .eds-tab__body:focus-visible:not([readonly]){outline:2px solid var(--eds-c-border-primary)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eds-tabs .eds-tab-body-container ::ng-deep .eds-tab__body.eds-tab__body--no-padding{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i3.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "color", "size", "ariaLabel", "rounded", "disabled"], outputs: ["buttonClick"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsTabs, isStandalone: true, selector: "eds-tabs", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, activeTabIndex: { classPropertyName: "activeTabIndex", publicName: "activeTabIndex", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, isMainNavigation: { classPropertyName: "isMainNavigation", publicName: "isMainNavigation", isSignal: true, isRequired: false, transformFunction: null }, isFlat: { classPropertyName: "isFlat", publicName: "isFlat", isSignal: true, isRequired: false, transformFunction: null }, isNavBar: { classPropertyName: "isNavBar", publicName: "isNavBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTabIndex: "activeTabIndexChange", tabClose: "tabClose", tabActivate: "tabActivate", tabClick: "tabClick" }, host: { properties: { "attr.data-e2e": "e2eAttr()", "attr.color": "color()", "attr.navbar": "isNavBar() || null" }, classAttribute: "eds-tabs" }, queries: [{ propertyName: "_tabs", predicate: EdsTab, isSignal: true }], viewQueries: [{ propertyName: "edsTabsHeadersContainer", first: true, predicate: ["edsTabsHeadersContainer"], descendants: true, isSignal: true }, { propertyName: "edsTabsHeaders", first: true, predicate: ["edsTabsHeaders"], descendants: true, isSignal: true }, { propertyName: "edsTabsRightContent", first: true, predicate: ["edsTabsRightContent"], descendants: true, isSignal: true }, { propertyName: "edsTabListItems", predicate: ["edsTabListItems"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #edsTabsHeadersContainer class=\"eds-tabs-wrapper\" [class.eds-tabs-wrapper--scrolling]=\"scrolling()\">\n    <div class=\"eds-tabs-navigation\">\n        <div class=\"eds-tabs-navigation__left-item\">\n            <button edsIconButton\n                (click)=\"goToLeft()\"\n                [disabled]=\"navigationLeftButtonDisabled()\"\n                icon=\"caret-left:core\"\n                ariaLabel=\"Scroll left\">\n            </button>\n        </div>\n\n        <ul #edsTabsHeaders class=\"eds-tab-items\" [attr.data-offset]=\"currentOffset()\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n            @for (tab of tabs(); let i = $index; track tab) {\n                @if (tab.isVisible()) {\n                    <li #edsTabListItems\n                        class=\"eds-tab-item\"\n                        id=\"tab-{{ i + 1 }}-{{ tabId }}\"\n                        [tabindex]=\"i === activeTabIndex() ? '0' : '-1'\"\n                        role=\"tab\"\n                        attr.aria-controls=\"tabpanel-{{ i + 1 }}-{{ tabId }}\"\n                        [attr.aria-selected]=\"i === activeTabIndex()\"\n                        [class.eds-tab-item--active]=\"i === activeTabIndex()\"\n                        [class.eds-tab-item--disabled]=\"tab.isDisabled()\"\n                        [attr.aria-disabled]=\"tab.isDisabled()\"\n                        (click)=\"tabListItemClick(i)\"\n                        (keydown)=\"onKeydown(i, $event)\">\n                        <ng-template [cdkPortalOutlet]=\"tab.templateHeader().templatePortal\"></ng-template>\n\n                        @if (tab.isClosable()) {\n                            <button edsIconButton\n                                [tabindex]=\"-1\"\n                                ariaLabel=\"Closable\"\n                                rounded\n                                class=\"eds-tab-close-button\"\n                                icon=\"x:core\"\n                                size=\"s\"\n                                [disabled]=\"tab.isDisabled()\"\n                                (buttonClick)=\"close(i, $event)\">\n                            </button>\n                        }\n                    </li>\n                }\n            }\n        </ul>\n\n        <div class=\"eds-tabs-navigation__right-item\">\n            <button edsIconButton\n                (click)=\"goToRight()\"\n                [disabled]=\"navigationRightButtonDisabled()\"\n                icon=\"caret-right:core\"\n                ariaLabel=\"Scroll right\">\n            </button>\n        </div>\n    </div>\n    <div #edsTabsRightContent class=\"eds-tabs-right-content-wrapper\">\n        <ng-content select=\"eds-tabs-right-content\"></ng-content>\n    </div>\n</div>\n\n@for (tab of tabs(); let i = $index; track tab) {\n    @if (i === activeTabIndex() && tab.isDisabled() === false && tab.templateBody()) {\n        <div id=\"tabpanel-{{ i + 1 }}-{{ tabId }}\" class=\"eds-tab-body-container\" role=\"tabpanel\" attr.aria-labelledby=\"tab-{{ i + 1 }}-{{ tabId }}\">\n            <ng-template [cdkPortalOutlet]=\"tab.templateBody()!.templatePortal\" (attached)=\"onAttached(i + 1)\"></ng-template>\n        </div>\n    }\n}\n", styles: [":host{--_eds-tabs-label-font: var(--eds-f-label-m-semibold);--_eds-tabs-sublabel-font: var(--eds-f-paragraph-s);display:flex;flex-direction:column;width:100%}:host .eds-tab-item{--_eds-tabs-border-color: transparent;--_eds-tabs-color: var(--eds-c-foreground-subtler);--_eds-tabs-color-hover: var(--eds-c-foreground)}:host .eds-tab-item--active{--_eds-tabs-color: var(--eds-c-foreground);--_eds-tabs-border-color: var(--eds-c-border-primary)}:host .eds-tab-item--disabled{--_eds-tabs-color: var(--eds-c-foreground-disabled);--_eds-tabs-icon-color: var(--eds-c-foreground-disabled);--_eds-tabs-border-color-hover: transparent}:host([color=brand]) .eds-tab-item{--_eds-tabs-color: var(--eds-c-foreground-inverted);--_eds-tabs-color-hover: var(--eds-c-on-surface-brand)}:host([color=brand]) .eds-tab-item--active{--_eds-tabs-color: var(--eds-c-on-surface-brand);--_eds-tabs-border-color: var(--eds-c-on-surface-brand)}:host([color=neutral]) .eds-tab-item{--_eds-tabs-color: var(--eds-c-foreground-subtler);--_eds-tabs-color-hover: var(--eds-c-foreground)}:host([color=neutral]) .eds-tab-item--active{--_eds-tabs-color: var(--eds-c-foreground);--_eds-tabs-border-color: var(--eds-c-foreground)}:host([navbar]) .eds-tabs-wrapper{border-bottom:none}:host .eds-tabs-wrapper{align-items:center;border-bottom:var(--eds-bw-xs) solid var(--eds-c-border-divider);display:flex;overflow:hidden;position:relative}:host .eds-tabs-wrapper .eds-tabs-right-content-wrapper{display:flex;margin-left:var(--eds-sp-m)}:host .eds-tab-items{display:flex;height:100%;list-style:none;list-style-type:none;margin:0;padding:0}:host .eds-tab-items .eds-tab-item{align-items:center;background-color:inherit;border:var(--eds-bw-none);border-bottom:var(--eds-bw-s) solid transparent;color:var(--_eds-tabs-color);cursor:pointer;display:flex;padding:var(--eds-sp-s) var(--eds-sp-m) var(--eds-sp-s) var(--eds-sp-m);position:relative;text-align:center;gap:var(--eds-sp-2xs)}:host .eds-tab-items .eds-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eds-c-border-primary)!important;outline-offset:-2px!important;transition:none}:host .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper{display:flex;align-items:center;gap:var(--eds-sp-s);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper ::ng-deep .eds-tab-header-label-wrapper{display:flex;flex-direction:column}:host .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper ::ng-deep .eds-tab-header-label-wrapper ::ng-deep .eds-tab-header-label{display:block;font-weight:700;line-height:var(--eds-sp-l);color:var(--_eds-tabs-color);font:var(--_eds-tabs-label-font)}:host .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper ::ng-deep .eds-tab-header-label-wrapper ::ng-deep .eds-tab-header-sub-label{font-weight:400;color:var(--_eds-tabs-color);font:var(--_eds-tabs-sublabel-font)}:host .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-left-content,:host .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-right-content{display:flex}:host .eds-tab-items .eds-tab-item--active{border-color:var(--_eds-tabs-border-color)}:host .eds-tab-items .eds-tab-item--disabled{cursor:not-allowed;pointer-events:none}:host .eds-tab-items .eds-tab-item:hover:not(.eds-tab-header--active) ::ng-deep .eds-tab-header-label{color:var(--_eds-tabs-color-hover)}:host .eds-tab-items .eds-tab-item:hover:not(.eds-tab-header--active) ::ng-deep .eds-tab-header-sub-label{color:var(--_eds-tabs-color-hover)}:host .eds-tabs-navigation{display:flex;overflow:hidden;position:relative;width:100%}:host .eds-tabs-navigation .eds-tabs-navigation__left-item,:host .eds-tabs-navigation .eds-tabs-navigation__right-item{align-self:center;background-color:var(--eds-c-surface-elevation);display:none;height:100%;position:absolute;z-index:1}:host .eds-tabs-navigation .eds-tabs-navigation__left-item{left:0}:host .eds-tabs-navigation .eds-tabs-navigation__right-item{right:0}:host .eds-tabs-wrapper--scrolling .eds-tab-items{padding-left:var(--eds-sp-5xl)}:host .eds-tabs-wrapper--scrolling .eds-tab-items .eds-tab-item{min-width:unset;overflow:unset}:host .eds-tabs-wrapper--scrolling .eds-tabs-navigation__left-item,:host .eds-tabs-wrapper--scrolling .eds-tabs-navigation__right-item{display:flex}:host .eds-tab-body-container ::ng-deep .eds-tab__body{padding:var(--eds-sp-s)}:host .eds-tab-body-container ::ng-deep .eds-tab__body:focus-visible:not([readonly]){outline:2px solid var(--eds-c-border-primary)!important;outline-offset:-2px!important;transition:none}:host .eds-tab-body-container ::ng-deep .eds-tab__body.eds-tab__body--no-padding{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i2.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "color", "size", "ariaLabel", "rounded", "disabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabs, decorators: [{
             type: Component,
             args: [{ selector: 'eds-tabs', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'eds-tabs',
                         '[attr.data-e2e]': 'e2eAttr()',
-                        '[class]': 'hostColorClass()',
+                        '[attr.color]': 'color()',
+                        '[attr.navbar]': 'isNavBar() || null',
                     }, imports: [
-                        AsyncPipe,
                         PortalModule,
                         ...EDS_ICON_BUTTON,
-                    ], hostDirectives: [
-                        {
-                            directive: EdsColorDirective,
-                            inputs: [
-                                'edsBrand',
-                                'edsNeutral',
-                                'edsColorVariant',
-                            ],
-                        },
-                    ], template: "<div #edsTabsHeadersContainer class=\"eds-tabs-wrapper\" [class.eds-tabs-wrapper--scrolling]=\"scrolling\">\n    <div class=\"eds-tabs-navigation\">\n        <div class=\"eds-tabs-navigation__left-item\">\n            <button edsIconButton\n                (click)=\"goToLeft()\"\n                [disabled]=\"navigationLeftButtonDisabled\"\n                icon=\"caret-left:core\"\n                ariaLabel=\"Scroll left\">\n            </button>\n        </div>\n\n        <ul #edsTabsHeaders class=\"eds-tab-items\" [attr.data-offset]=\"currentOffset\" role=\"tablist\" [attr.aria-label]=\"ariaLabel\">\n            @for (tab of tabs; let i = $index; track tab) {\n                @if (tab.isVisible$ | async) {\n                    <li #edsTabListItems\n                        class=\"eds-tab-item\"\n                        id=\"tab-{{ i + 1 }}-{{ tabId }}\"\n                        [tabindex]=\"i === activeTabIndex ? '0' : '-1'\"\n                        role=\"tab\"\n                        attr.aria-controls=\"tabpanel-{{ i + 1 }}-{{ tabId }}\"\n                        [attr.aria-selected]=\"i === activeTabIndex\"\n                        [class.eds-tab-item--active]=\"i === activeTabIndex\"\n                        [class.eds-tab-item--disabled]=\"tab.isDisabled$ | async\"\n                        attr.aria-disabled=\"{{ tab.isDisabled$ | async }}\"\n                        (click)=\"tabListItemClick(i)\"\n                        (keydown)=\"onKeydown(i, $event)\">\n                        <ng-template [cdkPortalOutlet]=\"tab.templateHeader().templatePortal\"></ng-template>\n\n                        @if (tab.isClosable$ | async) {\n                            <button edsIconButton\n                                [tabindex]=\"-1\"\n                                ariaLabel=\"Closable\"\n                                rounded\n                                class=\"eds-tab-close-button\"\n                                icon=\"x:core\"\n                                size=\"s\"\n                                [disabled]=\"tab.isDisabled$ | async\"\n                                (buttonClick)=\"close(i, $event)\">\n                            </button>\n                        }\n                    </li>\n                }\n            }\n        </ul>\n\n        <div class=\"eds-tabs-navigation__right-item\">\n            <button edsIconButton\n                (click)=\"goToRight()\"\n                [disabled]=\"navigationRightButtonDisabled\"\n                icon=\"caret-right:core\"\n                ariaLabel=\"Scroll right\">\n            </button>\n        </div>\n    </div>\n    <div #edsTabsRightContent class=\"eds-tabs-right-content-wrapper\">\n        <ng-content select=\"eds-tabs-right-content\"></ng-content>\n    </div>\n</div>\n\n@for (tab of tabs; let i = $index; track tab) {\n    @if (i === activeTabIndex && (tab.isDisabled$ | async) === false && tab.templateBody) {\n        <div id=\"tabpanel-{{ i + 1 }}-{{ tabId }}\" class=\"eds-tab-body-container\" role=\"tabpanel\" attr.aria-labelledby=\"tab-{{ i + 1 }}-{{ tabId }}\">\n            <ng-template [cdkPortalOutlet]=\"tab.templateBody.templatePortal\" (attached)=\"onAttached(i + 1)\"></ng-template>\n        </div>\n    }\n}\n", styles: [".eui-21 :host.eds-tabs{--_label-font: var(--eds-f-label-m-semibold);--_sublabel-font: var(--eds-f-paragraph-s)}.eui-21 :host.eds-tabs{display:flex;flex-direction:column;width:100%}.eui-21 :host.eds-tabs .eds-tab-item{--_border-color: transparent;--_color: var(--eds-c-foreground-subtler);--_color-hover: var(--eds-c-foreground)}.eui-21 :host.eds-tabs .eds-tab-item--active{--_color: var(--eds-c-foreground);--_border-color: var(--eds-c-border)}.eui-21 :host.eds-tabs .eds-tab-item--disabled{--_color: var(--eds-c-foreground-disabled);--_icon-color: var(--eds-c-foreground-disabled);--_border-color-hover: transparent}.eui-21 :host.eds-tabs--brand .eds-tab-item{--_color: var(--eds-c-foreground-inverted);--_color-hover: var(--eds-c-on-surface-brand)}.eui-21 :host.eds-tabs--brand .eds-tab-item--active{--_color: var(--eds-c-on-surface-brand);--_border-color: var(--eds-c-on-surface-brand)}.eui-21 :host.eds-tabs--neutral .eds-tab-item{--_color: var(--eds-c-foreground-subtler);--_color-hover: var(--eds-c-foreground)}.eui-21 :host.eds-tabs--neutral .eds-tab-item--active{--_color: var(--eds-c-foreground);--_border-color: var(--eds-c-foreground)}.eui-21 :host.eds-tabs.eds-tabs--navbar .eds-tabs-wrapper{border-bottom:none}.eui-21 :host.eds-tabs .eds-tabs-wrapper{align-items:center;border-bottom:var(--eds-bw-xs) solid var(--eds-c-border-divider);display:flex;overflow:hidden;position:relative}.eui-21 :host.eds-tabs .eds-tabs-wrapper .eds-tabs-right-content-wrapper{display:flex;margin-left:var(--eds-sp-m)}.eui-21 :host.eds-tabs .eds-tab-items{display:flex;height:100%;list-style:none;list-style-type:none;margin:0;padding:0}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item{align-items:center;background-color:inherit;border:var(--eui-bw-none);border-bottom:var(--eds-bw-s) solid transparent;color:var(--_color);cursor:pointer;display:flex;padding:var(--eds-sp-s) var(--eds-sp-m) var(--eds-sp-s) var(--eds-sp-m);position:relative;text-align:center;gap:var(--eds-sp-2xs)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eds-c-border-primary)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper{display:flex;align-items:center;gap:var(--eds-sp-s);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper ::ng-deep .eds-tab-header-label-wrapper{display:flex;flex-direction:column}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper ::ng-deep .eds-tab-header-label-wrapper ::ng-deep .eds-tab-header-label{display:block;font-weight:700;line-height:var(--eds-sp-l);color:var(--_color);font:var(--_label-font)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper ::ng-deep .eds-tab-header-label-wrapper ::ng-deep .eds-tab-header-sub-label{font-weight:400;color:var(--_color);font:var(--_sublabel-font)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-left-content,.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-right-content{display:flex}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item--active{border-color:var(--_border-color)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item--disabled{cursor:not-allowed;pointer-events:none}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item:hover:not(.eds-tab-header--active) ::ng-deep .eds-tab-header-label{color:var(--_color-hover)}.eui-21 :host.eds-tabs .eds-tab-items .eds-tab-item:hover:not(.eds-tab-header--active) ::ng-deep .eds-tab-header-sub-label{color:var(--_color-hover)}.eui-21 :host.eds-tabs .eds-tabs-navigation{display:flex;overflow:hidden;position:relative;width:100%}.eui-21 :host.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__left-item,.eui-21 :host.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__right-item{align-self:center;background-color:var(--eui-c-surface-page);display:none;height:100%;position:absolute;z-index:1}.eui-21 :host.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__left-item{left:0}.eui-21 :host.eds-tabs .eds-tabs-navigation .eds-tabs-navigation__right-item{right:0}.eui-21 :host.eds-tabs .eds-tabs-wrapper.eui-tabs-wrapper--scrolling .eds-tab-items{padding-left:var(--eui-s-5xl)}.eui-21 :host.eds-tabs .eds-tabs-wrapper.eui-tabs-wrapper--scrolling .eds-tab-items .eds-tab-item{min-width:unset;overflow:unset}.eui-21 :host.eds-tabs .eds-tabs-wrapper.eui-tabs-wrapper--scrolling .eds-tabs-navigation__left-item,.eui-21 :host.eds-tabs .eds-tabs-wrapper.eui-tabs-wrapper--scrolling .eds-tabs-navigation__right-item{display:flex}.eui-21 :host.eds-tabs .eds-tab-body-container ::ng-deep .eds-tab__body{padding:var(--eui-s-s)}.eui-21 :host.eds-tabs .eds-tab-body-container ::ng-deep .eds-tab__body:focus-visible:not([readonly]){outline:2px solid var(--eds-c-border-primary)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eds-tabs .eds-tab-body-container ::ng-deep .eds-tab__body.eds-tab__body--no-padding{padding:0}\n"] }]
-        }], propDecorators: { e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], activeTabIndex: [{
-                type: Input
-            }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], isMainNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMainNavigation", required: false }] }], isFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFlat", required: false }] }], isNavBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNavBar", required: false }] }], tabClose: [{
-                type: Output
-            }], tabActivate: [{
-                type: Output
-            }], tabClick: [{
-                type: Output
-            }], _tabs: [{
-                type: ContentChildren,
-                args: [forwardRef(() => EdsTab), { descendants: false }]
-            }], edsTabsHeadersContainer: [{
-                type: ViewChild,
-                args: ['edsTabsHeadersContainer']
-            }], edsTabsHeaders: [{
-                type: ViewChild,
-                args: ['edsTabsHeaders']
-            }], edsTabsRightContent: [{
-                type: ViewChild,
-                args: ['edsTabsRightContent']
-            }], edsTabListItems: [{
-                type: ViewChildren,
-                args: ['edsTabListItems']
-            }] } });
+                    ], template: "<div #edsTabsHeadersContainer class=\"eds-tabs-wrapper\" [class.eds-tabs-wrapper--scrolling]=\"scrolling()\">\n    <div class=\"eds-tabs-navigation\">\n        <div class=\"eds-tabs-navigation__left-item\">\n            <button edsIconButton\n                (click)=\"goToLeft()\"\n                [disabled]=\"navigationLeftButtonDisabled()\"\n                icon=\"caret-left:core\"\n                ariaLabel=\"Scroll left\">\n            </button>\n        </div>\n\n        <ul #edsTabsHeaders class=\"eds-tab-items\" [attr.data-offset]=\"currentOffset()\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n            @for (tab of tabs(); let i = $index; track tab) {\n                @if (tab.isVisible()) {\n                    <li #edsTabListItems\n                        class=\"eds-tab-item\"\n                        id=\"tab-{{ i + 1 }}-{{ tabId }}\"\n                        [tabindex]=\"i === activeTabIndex() ? '0' : '-1'\"\n                        role=\"tab\"\n                        attr.aria-controls=\"tabpanel-{{ i + 1 }}-{{ tabId }}\"\n                        [attr.aria-selected]=\"i === activeTabIndex()\"\n                        [class.eds-tab-item--active]=\"i === activeTabIndex()\"\n                        [class.eds-tab-item--disabled]=\"tab.isDisabled()\"\n                        [attr.aria-disabled]=\"tab.isDisabled()\"\n                        (click)=\"tabListItemClick(i)\"\n                        (keydown)=\"onKeydown(i, $event)\">\n                        <ng-template [cdkPortalOutlet]=\"tab.templateHeader().templatePortal\"></ng-template>\n\n                        @if (tab.isClosable()) {\n                            <button edsIconButton\n                                [tabindex]=\"-1\"\n                                ariaLabel=\"Closable\"\n                                rounded\n                                class=\"eds-tab-close-button\"\n                                icon=\"x:core\"\n                                size=\"s\"\n                                [disabled]=\"tab.isDisabled()\"\n                                (buttonClick)=\"close(i, $event)\">\n                            </button>\n                        }\n                    </li>\n                }\n            }\n        </ul>\n\n        <div class=\"eds-tabs-navigation__right-item\">\n            <button edsIconButton\n                (click)=\"goToRight()\"\n                [disabled]=\"navigationRightButtonDisabled()\"\n                icon=\"caret-right:core\"\n                ariaLabel=\"Scroll right\">\n            </button>\n        </div>\n    </div>\n    <div #edsTabsRightContent class=\"eds-tabs-right-content-wrapper\">\n        <ng-content select=\"eds-tabs-right-content\"></ng-content>\n    </div>\n</div>\n\n@for (tab of tabs(); let i = $index; track tab) {\n    @if (i === activeTabIndex() && tab.isDisabled() === false && tab.templateBody()) {\n        <div id=\"tabpanel-{{ i + 1 }}-{{ tabId }}\" class=\"eds-tab-body-container\" role=\"tabpanel\" attr.aria-labelledby=\"tab-{{ i + 1 }}-{{ tabId }}\">\n            <ng-template [cdkPortalOutlet]=\"tab.templateBody()!.templatePortal\" (attached)=\"onAttached(i + 1)\"></ng-template>\n        </div>\n    }\n}\n", styles: [":host{--_eds-tabs-label-font: var(--eds-f-label-m-semibold);--_eds-tabs-sublabel-font: var(--eds-f-paragraph-s);display:flex;flex-direction:column;width:100%}:host .eds-tab-item{--_eds-tabs-border-color: transparent;--_eds-tabs-color: var(--eds-c-foreground-subtler);--_eds-tabs-color-hover: var(--eds-c-foreground)}:host .eds-tab-item--active{--_eds-tabs-color: var(--eds-c-foreground);--_eds-tabs-border-color: var(--eds-c-border-primary)}:host .eds-tab-item--disabled{--_eds-tabs-color: var(--eds-c-foreground-disabled);--_eds-tabs-icon-color: var(--eds-c-foreground-disabled);--_eds-tabs-border-color-hover: transparent}:host([color=brand]) .eds-tab-item{--_eds-tabs-color: var(--eds-c-foreground-inverted);--_eds-tabs-color-hover: var(--eds-c-on-surface-brand)}:host([color=brand]) .eds-tab-item--active{--_eds-tabs-color: var(--eds-c-on-surface-brand);--_eds-tabs-border-color: var(--eds-c-on-surface-brand)}:host([color=neutral]) .eds-tab-item{--_eds-tabs-color: var(--eds-c-foreground-subtler);--_eds-tabs-color-hover: var(--eds-c-foreground)}:host([color=neutral]) .eds-tab-item--active{--_eds-tabs-color: var(--eds-c-foreground);--_eds-tabs-border-color: var(--eds-c-foreground)}:host([navbar]) .eds-tabs-wrapper{border-bottom:none}:host .eds-tabs-wrapper{align-items:center;border-bottom:var(--eds-bw-xs) solid var(--eds-c-border-divider);display:flex;overflow:hidden;position:relative}:host .eds-tabs-wrapper .eds-tabs-right-content-wrapper{display:flex;margin-left:var(--eds-sp-m)}:host .eds-tab-items{display:flex;height:100%;list-style:none;list-style-type:none;margin:0;padding:0}:host .eds-tab-items .eds-tab-item{align-items:center;background-color:inherit;border:var(--eds-bw-none);border-bottom:var(--eds-bw-s) solid transparent;color:var(--_eds-tabs-color);cursor:pointer;display:flex;padding:var(--eds-sp-s) var(--eds-sp-m) var(--eds-sp-s) var(--eds-sp-m);position:relative;text-align:center;gap:var(--eds-sp-2xs)}:host .eds-tab-items .eds-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eds-c-border-primary)!important;outline-offset:-2px!important;transition:none}:host .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper{display:flex;align-items:center;gap:var(--eds-sp-s);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper ::ng-deep .eds-tab-header-label-wrapper{display:flex;flex-direction:column}:host .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper ::ng-deep .eds-tab-header-label-wrapper ::ng-deep .eds-tab-header-label{display:block;font-weight:700;line-height:var(--eds-sp-l);color:var(--_eds-tabs-color);font:var(--_eds-tabs-label-font)}:host .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-wrapper ::ng-deep .eds-tab-header-label-wrapper ::ng-deep .eds-tab-header-sub-label{font-weight:400;color:var(--_eds-tabs-color);font:var(--_eds-tabs-sublabel-font)}:host .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-left-content,:host .eds-tab-items .eds-tab-item ::ng-deep .eds-tab-header-right-content{display:flex}:host .eds-tab-items .eds-tab-item--active{border-color:var(--_eds-tabs-border-color)}:host .eds-tab-items .eds-tab-item--disabled{cursor:not-allowed;pointer-events:none}:host .eds-tab-items .eds-tab-item:hover:not(.eds-tab-header--active) ::ng-deep .eds-tab-header-label{color:var(--_eds-tabs-color-hover)}:host .eds-tab-items .eds-tab-item:hover:not(.eds-tab-header--active) ::ng-deep .eds-tab-header-sub-label{color:var(--_eds-tabs-color-hover)}:host .eds-tabs-navigation{display:flex;overflow:hidden;position:relative;width:100%}:host .eds-tabs-navigation .eds-tabs-navigation__left-item,:host .eds-tabs-navigation .eds-tabs-navigation__right-item{align-self:center;background-color:var(--eds-c-surface-elevation);display:none;height:100%;position:absolute;z-index:1}:host .eds-tabs-navigation .eds-tabs-navigation__left-item{left:0}:host .eds-tabs-navigation .eds-tabs-navigation__right-item{right:0}:host .eds-tabs-wrapper--scrolling .eds-tab-items{padding-left:var(--eds-sp-5xl)}:host .eds-tabs-wrapper--scrolling .eds-tab-items .eds-tab-item{min-width:unset;overflow:unset}:host .eds-tabs-wrapper--scrolling .eds-tabs-navigation__left-item,:host .eds-tabs-wrapper--scrolling .eds-tabs-navigation__right-item{display:flex}:host .eds-tab-body-container ::ng-deep .eds-tab__body{padding:var(--eds-sp-s)}:host .eds-tab-body-container ::ng-deep .eds-tab__body:focus-visible:not([readonly]){outline:2px solid var(--eds-c-border-primary)!important;outline-offset:-2px!important;transition:none}:host .eds-tab-body-container ::ng-deep .eds-tab__body.eds-tab__body--no-padding{padding:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], activeTabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTabIndex", required: false }] }, { type: i0.Output, args: ["activeTabIndexChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], isMainNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMainNavigation", required: false }] }], isFlat: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFlat", required: false }] }], isNavBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNavBar", required: false }] }], tabClose: [{ type: i0.Output, args: ["tabClose"] }], tabActivate: [{ type: i0.Output, args: ["tabActivate"] }], tabClick: [{ type: i0.Output, args: ["tabClick"] }], _tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => EdsTab), { ...{ descendants: false }, isSignal: true }] }], edsTabsHeadersContainer: [{ type: i0.ViewChild, args: ['edsTabsHeadersContainer', { isSignal: true }] }], edsTabsHeaders: [{ type: i0.ViewChild, args: ['edsTabsHeaders', { isSignal: true }] }], edsTabsRightContent: [{ type: i0.ViewChild, args: ['edsTabsRightContent', { isSignal: true }] }], edsTabListItems: [{ type: i0.ViewChildren, args: ['edsTabListItems', { isSignal: true }] }] } });
 
 class EdsTabsRightContent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabsRightContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -612,76 +565,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
         }] });
 
 class EdsTabHeaderLabel {
-    constructor() {
-        this.string = 'eds-tab-header-label';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeaderLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsTabHeaderLabel, isStandalone: true, selector: "eds-tab-header-label", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsTabHeaderLabel, isStandalone: true, selector: "eds-tab-header-label", host: { classAttribute: "eds-tab-header-label" }, ngImport: i0, template: '<ng-content />', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeaderLabel, decorators: [{
             type: Component,
             args: [{
                     selector: 'eds-tab-header-label',
                     template: '<ng-content />',
+                    host: { class: 'eds-tab-header-label' },
                 }]
-        }], propDecorators: { string: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 
 class EdsTabHeaderSublabel {
-    constructor() {
-        this.string = 'eds-tab-header-sub-label';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeaderSublabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsTabHeaderSublabel, isStandalone: true, selector: "eds-tab-header-sub-label", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsTabHeaderSublabel, isStandalone: true, selector: "eds-tab-header-sub-label", host: { classAttribute: "eds-tab-header-sub-label" }, ngImport: i0, template: '<ng-content />', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeaderSublabel, decorators: [{
             type: Component,
             args: [{
                     selector: 'eds-tab-header-sub-label',
                     template: '<ng-content />',
+                    host: { class: 'eds-tab-header-sub-label' },
                 }]
-        }], propDecorators: { string: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 
 class EdsTabHeaderLeftContent {
-    constructor() {
-        this.string = 'eds-tab-header-left-content';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeaderLeftContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsTabHeaderLeftContent, isStandalone: true, selector: "eds-tab-header-left-content", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsTabHeaderLeftContent, isStandalone: true, selector: "eds-tab-header-left-content", host: { classAttribute: "eds-tab-header-left-content" }, ngImport: i0, template: '<ng-content />', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeaderLeftContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'eds-tab-header-left-content',
                     template: '<ng-content />',
+                    host: { class: 'eds-tab-header-left-content' },
                 }]
-        }], propDecorators: { string: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 
 class EdsTabHeaderRightContent {
-    constructor() {
-        this.string = 'eds-tab-header-right-content';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeaderRightContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsTabHeaderRightContent, isStandalone: true, selector: "eds-tab-header-right-content", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsTabHeaderRightContent, isStandalone: true, selector: "eds-tab-header-right-content", host: { classAttribute: "eds-tab-header-right-content" }, ngImport: i0, template: '<ng-content />', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTabHeaderRightContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'eds-tab-header-right-content',
                     template: '<ng-content />',
+                    host: { class: 'eds-tab-header-right-content' },
                 }]
-        }], propDecorators: { string: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 
 const EDS_TABS = [
     EdsTabs,