@eui/ecl 22.0.0-alpha.39 → 22.0.0-alpha.40

package/fesm2022/eui-ecl-components-ecl-tabs.mjs

@@ -1,14 +1,12 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Component, input, model, booleanAttribute, signal, EventEmitter, viewChild, contentChild, computed, effect, HostBinding, Output, output, contentChildren, forwardRef, IterableDiffers, ChangeDetectorRef, PLATFORM_ID, afterNextRender, HostListener, ViewEncapsulation } from '@angular/core';
+import { inject, ElementRef, Component, input, model, booleanAttribute, signal, output, viewChild, computed, contentChild, effect, contentChildren, forwardRef, IterableDiffers, ChangeDetectorRef, PLATFORM_ID, DestroyRef, afterNextRender, ViewEncapsulation } from '@angular/core';
 import { ECLBaseDirective, EclBaseEvent, EclRtlService, KeyCode } from '@eui/ecl/core';
 import * as i1 from '@eui/ecl/components/ecl-link';
 import { EclLinkDirective, EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
-import { toObservable } from '@angular/core/rxjs-interop';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TranslatePipe } from '@ngx-translate/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 import * as i1$1 from '@eui/ecl/components/ecl-button';
 import { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';
 import * as i2 from '@eui/ecl/components/ecl-icon';
@@ -61,8 +59,8 @@ class EclTabComponent extends ECLBaseDirective {
         /**
          * Extra classes to be added to the anchor tag.
          */
-        this.anchorExtraClasses = input(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "anchorExtraClasses" }] : /* istanbul ignore next */ []));
+        this.anchorExtraClasses = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "anchorExtraClasses" }] : /* istanbul ignore next */ []));
         /**
          * Hides the tab when true by applying the `ecl-tabs__item--hidden` CSS class.
          */
@@ -77,50 +75,49 @@ class EclTabComponent extends ECLBaseDirective {
         /**
          * Emits when the tab is selected via click.
          */
-        this.selectTab = new EventEmitter();
+        this.selectTab = output();
         /**
          * Emits when a keydown event occurs on the tab.
          */
-        this.keydownTab = new EventEmitter();
+        this.keydownTab = output();
         /**
          * Reference to the tab content template.
          */
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.contentTemplate = viewChild('content', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
-        /**
-         * Reference to the internal link directive used in the tab.
-         */
-        this.link = viewChild(EclLinkDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []));
-        /**
-         * Reference to the projected tab label component.
-         */
-        this.label = contentChild(EclTabLabelComponent, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /**
          * Contains the inner HTML of the tab label.
          */
         this.tabLabel = '';
+        /**
+         * The computed id used across the tab's DOM hooks.
+         */
+        this.finalId = computed(() => this.id() ?? this.generatedId(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "finalId" }] : /* istanbul ignore next */ []));
         /**
          * The tab index value for the tab's link.
          */
         this.hrefTabindex = computed(() => this._isActive() ? 0 : -1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hrefTabindex" }] : /* istanbul ignore next */ []));
-        this.finalId = computed(() => this.id() ?? this.generatedId(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "finalId" }] : /* istanbul ignore next */ []));
-        this.linkId = computed(() => {
-            return `${this.finalId()}-link`;
-        }, /* @ts-ignore */
+        /**
+         * CSS classes applied to the host element, bound via the `host` metadata (`[class]`).
+         * Reactive to the base `class` model signal.
+         */
+        this.cssClasses = computed(() => this.getCssClasses('ecl-tabs__item'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cssClasses" }] : /* istanbul ignore next */ []));
+        this.linkId = computed(() => `${this.finalId()}-link`, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "linkId" }] : /* istanbul ignore next */ []));
-        this.ariaControls = computed(() => {
-            return `${this.finalId()}-tabpanel`;
-        }, /* @ts-ignore */
+        this.ariaControls = computed(() => `${this.finalId()}-tabpanel`, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []));
+        this.link = viewChild(EclLinkDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []));
+        this.label = contentChild(EclTabLabelComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         this.generatedId = signal(crypto.randomUUID(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "generatedId" }] : /* istanbul ignore next */ []));
-        this.isFirstCall = true;
         this.elementRef = inject(ElementRef);
+        this.isFirstCall = true;
         if (this.isUsingOldSelector) {
             console.warn('"ecl-tab" selector is deprecated; use "div[eclTab]" instead.');
         }
@@ -147,12 +144,6 @@ class EclTabComponent extends ECLBaseDirective {
         this.tabLabel = this.label().el.nativeElement.innerHTML;
         // this._isActive.set(this.isActive());
     }
-    /**
-     * Returns the CSS classes applied to the host element.
-     */
-    get cssClasses() {
-        return [super.getCssClasses('ecl-tabs__item')].join(' ').trim();
-    }
     /**
      * Returns the inner HTML content of the tab label.
      */
@@ -170,18 +161,6 @@ class EclTabComponent extends ECLBaseDirective {
         }
         return this.width;
     }
-    /**
-     * Handles a click event on the tab and emits the `selectTab` event.
-     */
-    onTabClick() {
-        this.selectTab.next(new EclTabSelectEvent(this));
-    }
-    /**
-     * Handles a keydown event on the tab and emits the `keydownTab` event.
-     */
-    onKeydown(event) {
-        this.keydownTab.next(event);
-    }
     /**
      * Calls the focus method on the inner link directive.
      */
@@ -194,23 +173,29 @@ class EclTabComponent extends ECLBaseDirective {
     onBlur() {
         this.link().onBlur();
     }
+    /**
+     * Handles a click event on the tab and emits the `selectTab` event.
+     */
+    onTabClick() {
+        this.selectTab.emit(new EclTabSelectEvent(this));
+    }
+    /**
+     * Handles a keydown event on the tab and emits the `keydownTab` event.
+     */
+    onKeydown(event) {
+        this.keydownTab.emit(event);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclTabComponent, isStandalone: true, selector: "div[eclTab]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, anchorExtraClasses: { classPropertyName: "anchorExtraClasses", publicName: "anchorExtraClasses", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isHidden: "isHiddenChange", selectTab: "selectTab", keydownTab: "keydownTab" }, host: { properties: { "attr.id": "id()", "class.ecl-tabs__item--hidden": "isHidden()", "class": "this.cssClasses" } }, queries: [{ propertyName: "label", first: true, predicate: EclTabLabelComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "link", first: true, predicate: EclLinkDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<a\n    eclLink\n    role=\"tab\"\n    class=\"ecl-tabs__link eui-ecl-u-cursor-pointer {{anchorExtraClasses()}}\"\n    [class.ecl-tabs__link--active]=\"_isActive()\"\n    [attr.aria-selected]=\"_isActive()\"\n    [tabindex]=\"hrefTabindex()\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"onTabClick()\"\n    [id]=\"linkId()\"\n    [attr.aria-controls]=\"ariaControls()\">\n    <ng-content select=\"ecl-tab-label\"></ng-content>\n</a>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclTabComponent, isStandalone: true, selector: "div[eclTab]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, anchorExtraClasses: { classPropertyName: "anchorExtraClasses", publicName: "anchorExtraClasses", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isHidden: "isHiddenChange", selectTab: "selectTab", keydownTab: "keydownTab" }, host: { properties: { "attr.id": "id()", "class": "cssClasses()", "class.ecl-tabs__item--hidden": "isHidden()" } }, queries: [{ propertyName: "label", first: true, predicate: EclTabLabelComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "link", first: true, predicate: EclLinkDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<a\n    eclLink\n    role=\"tab\"\n    class=\"ecl-tabs__link eui-ecl-u-cursor-pointer {{anchorExtraClasses()}}\"\n    [class.ecl-tabs__link--active]=\"_isActive()\"\n    [attr.aria-selected]=\"_isActive()\"\n    [tabindex]=\"hrefTabindex()\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"onTabClick()\"\n    [id]=\"linkId()\"\n    [attr.aria-controls]=\"ariaControls()\">\n    <ng-content select=\"ecl-tab-label\"></ng-content>\n</a>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.EclLinkDirective, selector: "[eclLink]", inputs: ["extraAttributes", "isInverted", "isIconOnly", "isHighlight", "isNoVisited", "isBranded", "variant"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[eclTab]', host: {
                         '[attr.id]': 'id()',
+                        '[class]': 'cssClasses()',
                         '[class.ecl-tabs__item--hidden]': 'isHidden()',
                     }, imports: [...EUI_ECL_LINK], template: "<a\n    eclLink\n    role=\"tab\"\n    class=\"ecl-tabs__link eui-ecl-u-cursor-pointer {{anchorExtraClasses()}}\"\n    [class.ecl-tabs__link--active]=\"_isActive()\"\n    [attr.aria-selected]=\"_isActive()\"\n    [tabindex]=\"hrefTabindex()\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"onTabClick()\"\n    [id]=\"linkId()\"\n    [attr.aria-controls]=\"ariaControls()\">\n    <ng-content select=\"ecl-tab-label\"></ng-content>\n</a>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n" }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], anchorExtraClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorExtraClasses", required: false }] }], isHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHidden", required: false }] }, { type: i0.Output, args: ["isHiddenChange"] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], selectTab: [{
-                type: Output
-            }], keydownTab: [{
-                type: Output
-            }], contentTemplate: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], link: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EclLinkDirective), { isSignal: true }] }], label: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclTabLabelComponent), { isSignal: true }] }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], anchorExtraClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorExtraClasses", required: false }] }], isHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHidden", required: false }] }, { type: i0.Output, args: ["isHiddenChange"] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], selectTab: [{ type: i0.Output, args: ["selectTab"] }], keydownTab: [{ type: i0.Output, args: ["keydownTab"] }], contentTemplate: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], link: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EclLinkDirective), { isSignal: true }] }], label: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclTabLabelComponent), { isSignal: true }] }] } });
 
 var ShiftDirection;
 (function (ShiftDirection) {
@@ -223,14 +208,6 @@ var ShiftDirection;
 class EclTabsComponent extends ECLBaseDirective {
     constructor() {
         super();
-        /**
-         * Adds `ecl-tabs` class to the host if not using the deprecated selector.
-         */
-        this.hasClass = !this.isUsingOldSelector;
-        /**
-         * Marks the component as initialized, enabling ECL CSS that depends on this attribute.
-         */
-        this.autoInitialized = 'true';
         /**
          * Class applied to the tab body container.
          */
@@ -246,79 +223,91 @@ class EclTabsComponent extends ECLBaseDirective {
         this.tabs = contentChildren(forwardRef(() => EclTabComponent), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
         /**
-         * Reference to the visible tab list container.
-         */
-        this.tabsList = viewChild('tabsList', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "tabsList" }] : /* istanbul ignore next */ []));
-        /**
-         * Reference to the "more" button.
-         */
-        this.moreButton = viewChild('moreButton', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "moreButton" }] : /* istanbul ignore next */ []));
-        /**
-         * Reference to the scroll previous button.
+         * Tabs displayed in the visible list.
          */
-        this.btnPrev = viewChild('btnPrev', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "btnPrev" }] : /* istanbul ignore next */ []));
+        this.listTabs = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listTabs" }] : /* istanbul ignore next */ []));
         /**
-         * Reference to the scroll next button.
+         * Indicates whether the dropdown is expanded.
          */
-        this.btnNext = viewChild('btnNext', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "btnNext" }] : /* istanbul ignore next */ []));
+        this.isDropdownExpanded = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDropdownExpanded" }] : /* istanbul ignore next */ []));
         /**
-         * Reference to the dropdown list containing overflowed tabs.
+         * Indicates whether the scroll previous button is shown.
          */
-        this.dropdownList = viewChild('dropdownList', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "dropdownList" }] : /* istanbul ignore next */ []));
+        this.isScrollPrevBtnShow = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isScrollPrevBtnShow" }] : /* istanbul ignore next */ []));
         /**
-         * Reference to the "more" item container in the tab list.
+         * Indicates whether the scroll next button is shown.
          */
-        this.moreItem = viewChild('moreItem', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "moreItem" }] : /* istanbul ignore next */ []));
+        this.isScrollNextBtnShow = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isScrollNextBtnShow" }] : /* istanbul ignore next */ []));
         /**
-         * Tabs displayed in the visible list.
+         * CSS transform applied to the scrollable tab list.
          */
-        this.listTabs = [];
+        this.styleTransform = signal('translate3d(0px, 0px, 0px)', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "styleTransform" }] : /* istanbul ignore next */ []));
         /**
-         * Index of the active tab.
+         * Whether any visible tab is active.
          */
-        this.index = 0;
+        this.isMoreButtonActive = computed(() => this.listTabs().find((el) => el._isActive() && !el.isHidden()) !== undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMoreButtonActive" }] : /* istanbul ignore next */ []));
         /**
-         * Indicates whether the dropdown is expanded.
+         * Get the tabindex for more button.
          */
-        this.isDropdownExpanded = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isDropdownExpanded" }] : /* istanbul ignore next */ []));
+        this.customTabIndex = computed(() => {
+            if (!this.isMoreButtonActive()) {
+                return '-1';
+            }
+            return this.isDropdownExpanded() ? '-1' : '0';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "customTabIndex" }] : /* istanbul ignore next */ []));
         /**
-         * Indicates whether the mobile breakpoint is active.
+         * Returns the number of tabs shown in the dropdown.
+         *
+         * Counts the dropdown clones that are visible (`isHidden() === false`), which is the
+         * exact set rendered in the dropdown. Counting the main tabs' hidden state instead can
+         * diverge from what the dropdown shows, because the main-bar hidden signals are updated
+         * by the imperative resize measurement pass.
          */
-        this.isMobileBreakpoint = false;
+        this.hiddenTabsCount = computed(() => this.listTabs().filter((item) => !item.isHidden()).length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hiddenTabsCount" }] : /* istanbul ignore next */ []));
         /**
-         * Indicates whether the scroll previous button is shown.
+         * Returns the duration of the transition animation.
          */
-        this.isScrollPrevBtnShow = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isScrollPrevBtnShow" }] : /* istanbul ignore next */ []));
+        this.transitionDuration = computed(() => (this.isMobileBreakpoint() ? '0.4s' : '0'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "transitionDuration" }] : /* istanbul ignore next */ []));
+        this.tabsList = viewChild('tabsList', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabsList" }] : /* istanbul ignore next */ []));
+        this.moreButton = viewChild('moreButton', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "moreButton" }] : /* istanbul ignore next */ []));
+        this.btnPrev = viewChild('btnPrev', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "btnPrev" }] : /* istanbul ignore next */ []));
+        this.dropdownList = viewChild('dropdownList', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dropdownList" }] : /* istanbul ignore next */ []));
+        this.moreItem = viewChild('moreItem', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "moreItem" }] : /* istanbul ignore next */ []));
         /**
-         * Indicates whether the scroll next button is shown.
+         * Index of the active tab.
          */
-        this.isScrollNextBtnShow = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isScrollNextBtnShow" }] : /* istanbul ignore next */ []));
+        this.index = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
         /**
-         * CSS transform applied to the scrollable tab list.
+         * Indicates whether the mobile breakpoint is active.
          */
-        this.styleTransform = 'translate3d(0px, 0px, 0px)';
+        this.isMobileBreakpoint = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMobileBreakpoint" }] : /* istanbul ignore next */ []));
         this.differs = inject(IterableDiffers);
         this.cdkBreakpointObserver = inject(BreakpointObserver);
         this.cd = inject(ChangeDetectorRef);
         this.el = inject(ElementRef);
         this.eclRtlService = inject(EclRtlService);
         this.platformId = inject(PLATFORM_ID);
-        this.destroy$ = new Subject();
+        this.destroyRef = inject(DestroyRef);
         this.tabsChanges$ = toObservable(this.tabs);
+        this.tabSubscriptions = new Map();
         this.isRtl = false;
         this.TIMEOUT_INTERVAL = 0;
-        if (this.isUsingOldSelector) {
-            console.warn('"ecl-tabs" selector is deprecated; use "div[eclTabs]" instead.');
-        }
         this.differ = this.differs.find([]).create();
         afterNextRender(() => {
             this.observeTabsChanges();
@@ -332,48 +321,11 @@ class EclTabsComponent extends ECLBaseDirective {
             this.handleRtlChangeState();
         }
     }
-    ngOnDestroy() {
-        this.destroy$.next(true);
-        this.destroy$.unsubscribe();
-    }
     onClick(target) {
         if (!this.moreButton().el.nativeElement.contains(target) && !this.dropdownList().nativeElement.contains(target)) {
             this.closeDropdown();
         }
     }
-    /**
-     * Whether the deprecated selector is being used.
-     */
-    get isUsingOldSelector() {
-        if (this.el?.nativeElement.tagName.toLowerCase() === 'ecl-tabs') {
-            return true;
-        }
-        return false;
-    }
-    /**
-     * Whether any visible tab is active.
-     */
-    get isMoreButtonActive() {
-        return this.listTabs.find((el) => el._isActive() && !el.isHidden()) !== undefined;
-    }
-    /**
-     * Get the tabindex for more button.
-     */
-    get customTabIndex() {
-        let result = '0';
-        if (this.isMoreButtonActive) {
-            if (this.isDropdownExpanded()) {
-                result = '-1';
-            }
-            else {
-                result = '0';
-            }
-        }
-        else {
-            result = '-1';
-        }
-        return result;
-    }
     /**
      * Scrolls the tab list to the left.
      */
@@ -392,84 +344,21 @@ class EclTabsComponent extends ECLBaseDirective {
     onDropdownToggle() {
         this.isDropdownExpanded.set(!this.isDropdownExpanded());
     }
-    /**
-     * Returns the number of tabs hidden in dropdown.
-     */
-    getHiddenTabsCount() {
-        return this.tabs().filter((item) => item.isHidden()).length;
-    }
     /**
      * Returns the label of the tab at the specified index.
      */
     getTabLabel(index) {
         return this.getTabsAsArray()[index].getTabLabel();
     }
-    /**
-     * Returns the duration of the transition animation.
-     */
-    getTransitionDuration() {
-        if (this.isMobileBreakpoint) {
-            return '0.4s';
-        }
-        return '0';
-    }
     /**
      * Handles tab selection.
      * @param tab Tab to activate.
      */
     onTabSelect(tab) {
-        this.deactivateAllTabs(Array.from(this.tabs()), this.listTabs);
+        this.deactivateAllTabs(Array.from(this.tabs()), this.listTabs());
         this.activateTab(tab);
         this.sendTabSelectEvent(tab);
     }
-    /**
-     * Handles right arrow key navigation.
-     * @param index Current tab index.
-     */
-    onTabKeydownArrowRight(index) {
-        if (this.isMobileBreakpoint) {
-            this.shiftTabs(ShiftDirection.NEXT);
-            if (index === this.getTabsCount() - 1) {
-                return;
-            }
-        }
-        if (index === this.getTabsCount() - 1 && !this.isMobileBreakpoint) {
-            this.focusOnFirstTab();
-        }
-        else {
-            this.focusOnNextTab(index);
-        }
-    }
-    /**
-     * Handles left arrow key navigation.
-     * @param index Current tab index.
-     */
-    onTabKeydownArrowLeft(index) {
-        if (this.isMobileBreakpoint) {
-            this.shiftTabs(ShiftDirection.PREVIOUS);
-            if (index === 0) {
-                return;
-            }
-        }
-        if (index === 0 && !this.isMobileBreakpoint) {
-            this.focusOnLastTab();
-        }
-        else {
-            this.focusOnPrevTab(index);
-        }
-    }
-    /**
-     * Focuses the first tab in the list.
-     */
-    onTabKeydownHome() {
-        this.focusOnFirstTab();
-    }
-    /**
-     * Focuses the last tab in the list.
-     */
-    onTabKeydownEnd() {
-        this.focusOnLastTab();
-    }
     /**
      * Handles all supported keyboard events for a tab.
      * @param event KeyboardEvent triggered.
@@ -516,34 +405,83 @@ class EclTabsComponent extends ECLBaseDirective {
         }
     }
     onMoreButtonFocus() {
-        const index = this.listTabs.findIndex((el) => el._isActive() && !el.isHidden());
+        const index = this.listTabs().findIndex((el) => el._isActive() && !el.isHidden());
         if (index < 0)
             return;
         this.openDropdown();
         this.moreButton().el.nativeElement.blur();
         this.focusOnDropdownTab(index);
     }
+    /**
+     * Handles right arrow key navigation.
+     * @param index Current tab index.
+     */
+    onTabKeydownArrowRight(index) {
+        if (this.isMobileBreakpoint()) {
+            this.shiftTabs(ShiftDirection.NEXT);
+            if (index === this.getTabsCount() - 1) {
+                return;
+            }
+        }
+        if (index === this.getTabsCount() - 1 && !this.isMobileBreakpoint()) {
+            this.focusOnFirstTab();
+        }
+        else {
+            this.focusOnNextTab(index);
+        }
+    }
+    /**
+     * Handles left arrow key navigation.
+     * @param index Current tab index.
+     */
+    onTabKeydownArrowLeft(index) {
+        if (this.isMobileBreakpoint()) {
+            this.shiftTabs(ShiftDirection.PREVIOUS);
+            if (index === 0) {
+                return;
+            }
+        }
+        if (index === 0 && !this.isMobileBreakpoint()) {
+            this.focusOnLastTab();
+        }
+        else {
+            this.focusOnPrevTab(index);
+        }
+    }
+    /**
+     * Focuses the first tab in the list.
+     */
+    onTabKeydownHome() {
+        this.focusOnFirstTab();
+    }
+    /**
+     * Focuses the last tab in the list.
+     */
+    onTabKeydownEnd() {
+        this.focusOnLastTab();
+    }
     onTabTab() {
         this.closeDropdown();
     }
     getCurrentTabIndex(tab) {
         const index = this.getTabsAsArray().indexOf(tab);
-        return index !== -1 ? index : this.listTabs.indexOf(tab);
+        return index !== -1 ? index : this.listTabs().indexOf(tab);
     }
     shiftTabs(dir) {
-        this.index = this.getShifIndex(dir, this.index);
-        this.isScrollPrevBtnShow.set(this.index >= 1);
-        this.isScrollNextBtnShow.set(this.index < this.getTabsCount() - 1);
-        const leftMargin = this.index === 0 ? 0 : this.btnPrev().el.nativeElement.getBoundingClientRect().width + 13;
+        const newIndex = this.getShifIndex(dir, this.index());
+        this.index.set(newIndex);
+        this.isScrollPrevBtnShow.set(newIndex >= 1);
+        this.isScrollNextBtnShow.set(newIndex < this.getTabsCount() - 1);
+        const leftMargin = newIndex === 0 ? 0 : this.btnPrev().el.nativeElement.getBoundingClientRect().width + 13;
         let newOffset = 0;
         if (this.isRtl) {
             newOffset = Math.ceil(this.tabsList().nativeElement.offsetWidth -
-                this.getTabsAsArray()[this.index].hostElement.offsetLeft -
-                this.getTabsAsArray()[this.index].hostElement.offsetWidth -
+                this.getTabsAsArray()[newIndex].hostElement.offsetLeft -
+                this.getTabsAsArray()[newIndex].hostElement.offsetWidth -
                 leftMargin);
         }
         else {
-            newOffset = Math.ceil(this.getTabsAsArray()[this.index]?.hostElement.offsetLeft - leftMargin);
+            newOffset = Math.ceil(this.getTabsAsArray()[newIndex]?.hostElement.offsetLeft - leftMargin);
         }
         const maxScroll = Math.ceil(this.getTabsListWidth() - this.el.nativeElement.getBoundingClientRect().width);
         if (newOffset > maxScroll) {
@@ -551,15 +489,15 @@ class EclTabsComponent extends ECLBaseDirective {
             newOffset = maxScroll;
         }
         if (this.isRtl) {
-            this.styleTransform = `translate3d(${newOffset}px, 0px, 0px)`;
+            this.styleTransform.set(`translate3d(${newOffset}px, 0px, 0px)`);
         }
         else {
-            this.styleTransform = `translate3d(-${newOffset}px, 0px, 0px)`;
+            this.styleTransform.set(`translate3d(-${newOffset}px, 0px, 0px)`);
         }
     }
     getShifIndex(dir, index) {
         if (dir === ShiftDirection.NEXT) {
-            if (index === this.getTabsCount() - 1 && !this.isMobileBreakpoint) {
+            if (index === this.getTabsCount() - 1 && !this.isMobileBreakpoint()) {
                 return 0;
             }
             else {
@@ -567,7 +505,7 @@ class EclTabsComponent extends ECLBaseDirective {
             }
         }
         else {
-            if (index === 0 && !this.isMobileBreakpoint) {
+            if (index === 0 && !this.isMobileBreakpoint()) {
                 return this.getTabsCount() - 1;
             }
             else {
@@ -576,13 +514,22 @@ class EclTabsComponent extends ECLBaseDirective {
         }
     }
     createSecondListForDropdown() {
-        this.listTabs = [];
+        const newList = [];
         this.tabs().forEach((tab) => {
-            const newTab = Object.assign({}, tab);
-            newTab.isHidden.set(true);
-            newTab._isActive.set(tab.isActive());
-            this.listTabs.push(newTab);
+            // Shallow-copying a tab would share the original's `isHidden`/`_isActive`
+            // signal references, so writes to a dropdown clone would mutate the real tab
+            // (corrupting the main-bar hidden state, the "More" count, and keyboard focus).
+            // Build the clone with its own independent writable signals instead. A plain
+            // `signal` is used (not `model`) because `model()` may only be called in a class
+            // field initializer, and the clone only needs read/`set` access.
+            const newTab = {
+                ...tab,
+                isHidden: signal(true),
+                _isActive: signal(tab.isActive()),
+            };
+            newList.push(newTab);
         });
+        this.listTabs.set(newList);
     }
     getTabsAsArray() {
         return Array.from(this.tabs());
@@ -597,7 +544,7 @@ class EclTabsComponent extends ECLBaseDirective {
         this.isDropdownExpanded.set(true);
     }
     observeTabsChanges() {
-        this.tabsChanges$.pipe(takeUntil(this.destroy$)).subscribe(this.onTabsChanges.bind(this));
+        this.tabsChanges$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(this.onTabsChanges.bind(this));
     }
     onTabsChanges() {
         this.diff = this.differ.diff(this.tabs());
@@ -617,12 +564,18 @@ class EclTabsComponent extends ECLBaseDirective {
         this.createSecondListForDropdown();
     }
     connectTabEvents(tab) {
-        tab.selectTab.pipe(takeUntil(this.destroy$)).subscribe(() => {
-            this.onTabSelect(tab);
-        });
-        tab.keydownTab.pipe(takeUntil(this.destroy$)).subscribe((event) => {
-            this.onTabKeydown(event, tab);
-        });
+        if (this.tabSubscriptions.has(tab)) {
+            return;
+        }
+        const subscriptions = [
+            tab.selectTab.subscribe(() => {
+                this.onTabSelect(tab);
+            }),
+            tab.keydownTab.subscribe((event) => {
+                this.onTabKeydown(event, tab);
+            }),
+        ];
+        this.tabSubscriptions.set(tab, subscriptions);
     }
     focusOnNextTab(index) {
         if (this.getTabsAsArray()[index + 1].isHidden()) {
@@ -648,7 +601,7 @@ class EclTabsComponent extends ECLBaseDirective {
         }
     }
     focusOnPrevTab(index) {
-        if (!this.listTabs[index - 1].isHidden()) {
+        if (!this.listTabs()[index - 1].isHidden()) {
             this.focusOnDropdownTab(index - 1);
         }
         else {
@@ -666,8 +619,10 @@ class EclTabsComponent extends ECLBaseDirective {
         return this.getTabsAsArray()[0];
     }
     disconnectTabEvents(tab) {
-        if (tab && tab.selectTab) {
-            tab.selectTab.unsubscribe();
+        const subscriptions = this.tabSubscriptions.get(tab);
+        if (subscriptions) {
+            subscriptions.forEach((subscription) => subscription.unsubscribe());
+            this.tabSubscriptions.delete(tab);
         }
     }
     deactivateAllTabs(tabs, listTabs) {
@@ -687,19 +642,19 @@ class EclTabsComponent extends ECLBaseDirective {
     observeBreakpointChanges() {
         this.cdkBreakpointObserver
             .observe(['(max-width: 480px)'])
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((result) => {
-            this.isMobileBreakpoint = result.matches;
+            this.isMobileBreakpoint.set(result.matches);
         });
     }
     handleResize() {
         this.closeDropdown();
-        if (this.isMobileBreakpoint) {
+        if (this.isMobileBreakpoint()) {
             this.handleMobile();
             return;
         }
-        this.styleTransform = 'translate3d(0px, 0px, 0px)';
-        this.index = 0;
+        this.styleTransform.set('translate3d(0px, 0px, 0px)');
+        this.index.set(0);
         this.isScrollNextBtnShow.set(false);
         this.isScrollPrevBtnShow.set(false);
         // Reset list width to auto for measurement (direct DOM, same as ECL)
@@ -739,7 +694,7 @@ class EclTabsComponent extends ECLBaseDirective {
                     item.isHidden.set(true);
                     item.hostElement.classList.add('ecl-tabs__item--hidden');
                     if (item._isActive()) {
-                        this.listTabs[i]._isActive.set(true);
+                        this.listTabs()[i]._isActive.set(true);
                     }
                     hiddenItems.push(i);
                 }
@@ -760,10 +715,10 @@ class EclTabsComponent extends ECLBaseDirective {
         this.cd.markForCheck();
     }
     hideAllDropdownTabs() {
-        this.listTabs.forEach(item => item.isHidden.set(true));
+        this.listTabs().forEach(item => item.isHidden.set(true));
     }
     setActiveItemForMainTabs() {
-        this.listTabs.forEach((item, index) => {
+        this.listTabs().forEach((item, index) => {
             if (item._isActive()) {
                 setTimeout(() => this.tabs()[index]._isActive.set(true));
             }
@@ -774,7 +729,7 @@ class EclTabsComponent extends ECLBaseDirective {
         return this.tabsList().nativeElement.getBoundingClientRect().width;
     }
     setHiddenItemsForDropdownTabs(hiddenItems) {
-        this.listTabs.forEach((item, index) => {
+        this.listTabs().forEach((item, index) => {
             if (hiddenItems.includes(index)) {
                 item.isHidden.set(false);
             }
@@ -806,10 +761,10 @@ class EclTabsComponent extends ECLBaseDirective {
     }
     handleRtlChangeState() {
         const isRtlOld = this.isRtl;
-        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {
+        this.eclRtlService.currentRtlState$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((rtlState) => {
             setTimeout(() => {
                 this.isRtl = rtlState;
-                if (this.isMobileBreakpoint && this.hasRtlChanged(isRtlOld)) {
+                if (this.isMobileBreakpoint() && this.hasRtlChanged(isRtlOld)) {
                     this.handleRtlChange();
                 }
             });
@@ -820,32 +775,29 @@ class EclTabsComponent extends ECLBaseDirective {
     }
     handleRtlChange() {
         this.handleMobile();
-        this.styleTransform = 'translate3d(0px, 0px, 0px)';
-        this.index = 0;
+        this.styleTransform.set('translate3d(0px, 0px, 0px)');
+        this.index.set(0);
     }
     observeElementSizeChanges() {
-        new ResizeObserver(() => {
+        const resizeObserver = new ResizeObserver(() => {
             setTimeout(() => {
                 this.handleResize();
             }, this.TIMEOUT_INTERVAL);
-        }).observe(this.tabsList().nativeElement);
+        });
+        resizeObserver.observe(this.tabsList().nativeElement);
+        this.destroyRef.onDestroy(() => resizeObserver.disconnect());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclTabsComponent, isStandalone: true, selector: "div[eclTabs]", inputs: { bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabSelect: "tabSelect" }, host: { listeners: { "document:click": "onClick($event.target)" }, properties: { "class.ecl-tabs": "this.hasClass", "attr.data-ecl-auto-initialized": "this.autoInitialized" } }, queries: [{ propertyName: "tabs", predicate: i0.forwardRef(() => EclTabComponent), isSignal: true }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true, isSignal: true }, { propertyName: "moreButton", first: true, predicate: ["moreButton"], descendants: true, isSignal: true }, { propertyName: "btnPrev", first: true, predicate: ["btnPrev"], descendants: true, isSignal: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true, isSignal: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true, isSignal: true }, { propertyName: "moreItem", first: true, predicate: ["moreItem"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (isUsingOldSelector) {\n<div class=\"ecl-tabs\">\n    <ng-container *ngTemplateOutlet=\"eclTabsTemplate\"></ng-container>\n</div>\n} @else {\n<ng-container *ngTemplateOutlet=\"eclTabsTemplate\"></ng-container>\n}\n\n<ng-template #eclTabsTemplate>\n    <div class=\"ecl-tabs__container\" [class.ecl-tabs__container--right]=\"isScrollNextBtnShow()\"\n        [class.ecl-tabs__container--left]=\"isScrollPrevBtnShow()\">\n        <div class=\"ecl-tabs__list\" role=\"tablist\" #tabsList\n            [style.transform]=\"styleTransform\" [style.transition-duration]=\"getTransitionDuration()\">\n            <ng-content select=\"ecl-tab, [eclTab]\"></ng-content>\n            <div class=\"ecl-tabs__item ecl-tabs__item--more\" #moreItem>\n                @if (listTabs.length > 0) {\n                <div class=\"ecl-tabs__dropdown\" [class.ecl-tabs__dropdown--show]=\"isDropdownExpanded()\">\n                    <div class=\"ecl-tabs__dropdown-list\" #dropdownList>\n                        @for (tab of listTabs; track tab.id; let i = $index) {\n                        <div eclTab [isActive]=\"tab._isActive()\" [isHidden]=\"tab.isHidden()\" (click)=\"onTabSelect(tab)\"\n                            (keydown)=\"onTabKeydown($event, tab)\">\n                            <ecl-tab-label>{{ getTabLabel(i) }}</ecl-tab-label>\n                        </div>\n                        }\n                    </div>\n                </div>\n                }\n            </div>\n        </div>\n        <button #moreButton eclButton class=\"ecl-tabs__toggle\" variant=\"tertiary\" [tabindex]=\"customTabIndex\"\n            [attr.aria-expanded]=\"isDropdownExpanded()\" [class.ecl-tabs__toggle--active]=\"isMoreButtonActive\"\n            (click)=\"onDropdownToggle()\" (focus)=\"onMoreButtonFocus()\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.MORE' | translate }}\n                ({{ getHiddenTabsCount() }})\n            </span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\" size=\"fluid\"></ecl-icon>\n        </button>\n    </div>\n\n    <div class=\"ecl-tabs__controls\">\n        <button #btnPrev eclButton variant=\"tertiary\" isIconOnly class=\"ecl-tabs__prev\"\n            [style.display]=\"isScrollPrevBtnShow() ? 'flex' : 'none'\" (click)=\"onScrollPrev()\">\n            <span eclButtonLabel>{{ 'ecl.common.PREVIOUS' | translate }}</span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-270\" size=\"s\" class=\"\"> </ecl-icon>\n        </button>\n        <button #btnNext eclButton variant=\"tertiary\" isIconOnly class=\"ecl-tabs__next\"\n            [style.display]=\"isScrollNextBtnShow() ? 'flex' : 'none'\" (click)=\"onScrollNext()\">\n            <span eclButtonLabel>{{ 'ecl.common.NEXT' | translate }}</span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-90\" size=\"s\" class=\"\"> </ecl-icon>\n        </button>\n    </div>\n</ng-template>\n\n@for (tab of tabs(); track tab.tabLabel) {\n@if (tab._isActive()) {\n<div id=\"{{tab.finalId()}}-tabpanel\" role=\"tabpanel\" aria-labelledby=\"{{tab.finalId()}}-link\" class=\"{{ bodyClass() }}\">\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate()\"></ng-container>\n</div>\n}\n}\n@for (tab of listTabs; track tab.tabLabel) {\n@if (tab._isActive()) {\n<div id=\"{{tab.finalId()}}-tabpanel\" role=\"tabpanel\" aria-labelledby=\"{{tab.finalId()}}-link\" class=\"{{ bodyClass() }}\">\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate()\"></ng-container>\n</div>\n}\n}", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i1$1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclTabComponent, selector: "div[eclTab]", inputs: ["id", "anchorExtraClasses", "isHidden", "isActive"], outputs: ["isHiddenChange", "selectTab", "keydownTab"] }, { kind: "component", type: EclTabLabelComponent, selector: "ecl-tab-label" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclTabsComponent, isStandalone: true, selector: "div[eclTabs]", inputs: { bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabSelect: "tabSelect" }, host: { attributes: { "data-ecl-auto-initialized": "true" }, listeners: { "document:click": "onClick($event.target)" }, classAttribute: "ecl-tabs" }, queries: [{ propertyName: "tabs", predicate: i0.forwardRef(() => EclTabComponent), isSignal: true }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true, isSignal: true }, { propertyName: "moreButton", first: true, predicate: ["moreButton"], descendants: true, isSignal: true }, { propertyName: "btnPrev", first: true, predicate: ["btnPrev"], descendants: true, isSignal: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true, isSignal: true }, { propertyName: "moreItem", first: true, predicate: ["moreItem"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-tabs__container\" [class.ecl-tabs__container--right]=\"isScrollNextBtnShow()\"\n    [class.ecl-tabs__container--left]=\"isScrollPrevBtnShow()\">\n    <div class=\"ecl-tabs__list\" role=\"tablist\" #tabsList\n        [style.transform]=\"styleTransform()\" [style.transition-duration]=\"transitionDuration()\">\n        <ng-content select=\"[eclTab]\"></ng-content>\n        <div class=\"ecl-tabs__item ecl-tabs__item--more\" #moreItem>\n            @if (listTabs().length > 0) {\n            <div class=\"ecl-tabs__dropdown\" [class.ecl-tabs__dropdown--show]=\"isDropdownExpanded()\">\n                <div class=\"ecl-tabs__dropdown-list\" #dropdownList>\n                    @for (tab of listTabs(); track tab.finalId(); let i = $index) {\n                    <div eclTab [isActive]=\"tab._isActive()\" [isHidden]=\"tab.isHidden()\" (click)=\"onTabSelect(tab)\"\n                        (keydown)=\"onTabKeydown($event, tab)\">\n                        <ecl-tab-label>{{ getTabLabel(i) }}</ecl-tab-label>\n                    </div>\n                    }\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n    <button #moreButton eclButton class=\"ecl-tabs__toggle\" variant=\"tertiary\" [tabindex]=\"customTabIndex()\"\n        [attr.aria-expanded]=\"isDropdownExpanded()\" [class.ecl-tabs__toggle--active]=\"isMoreButtonActive()\"\n        (click)=\"onDropdownToggle()\" (focus)=\"onMoreButtonFocus()\">\n        <span eclButtonLabel>\n            {{ 'ecl.common.MORE' | translate }}\n            ({{ hiddenTabsCount() }})\n        </span>\n        <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\" size=\"fluid\"></ecl-icon>\n    </button>\n</div>\n\n<div class=\"ecl-tabs__controls\">\n    <button #btnPrev eclButton variant=\"tertiary\" isIconOnly class=\"ecl-tabs__prev\"\n        [style.display]=\"isScrollPrevBtnShow() ? 'flex' : 'none'\" (click)=\"onScrollPrev()\">\n        <span eclButtonLabel>{{ 'ecl.common.PREVIOUS' | translate }}</span>\n        <ecl-icon icon=\"corner-arrow\" transform=\"rotate-270\" size=\"s\" class=\"\"> </ecl-icon>\n    </button>\n    <button #btnNext eclButton variant=\"tertiary\" isIconOnly class=\"ecl-tabs__next\"\n        [style.display]=\"isScrollNextBtnShow() ? 'flex' : 'none'\" (click)=\"onScrollNext()\">\n        <span eclButtonLabel>{{ 'ecl.common.NEXT' | translate }}</span>\n        <ecl-icon icon=\"corner-arrow\" transform=\"rotate-90\" size=\"s\" class=\"\"> </ecl-icon>\n    </button>\n</div>\n\n@for (tab of tabs(); track tab.finalId()) {\n@if (tab._isActive()) {\n<div id=\"{{tab.finalId()}}-tabpanel\" role=\"tabpanel\" aria-labelledby=\"{{tab.finalId()}}-link\" class=\"{{ bodyClass() }}\">\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate()\"></ng-container>\n</div>\n}\n}\n@for (tab of listTabs(); track tab.finalId()) {\n@if (tab._isActive()) {\n<div id=\"{{tab.finalId()}}-tabpanel\" role=\"tabpanel\" aria-labelledby=\"{{tab.finalId()}}-link\" class=\"{{ bodyClass() }}\">\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate()\"></ng-container>\n</div>\n}\n}", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i1$1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclTabComponent, selector: "div[eclTab]", inputs: ["id", "anchorExtraClasses", "isHidden", "isActive"], outputs: ["isHiddenChange", "selectTab", "keydownTab"] }, { kind: "component", type: EclTabLabelComponent, selector: "ecl-tab-label" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'div[eclTabs]', imports: [TranslatePipe, NgTemplateOutlet, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, EclTabComponent, EclTabLabelComponent], encapsulation: ViewEncapsulation.None, template: "@if (isUsingOldSelector) {\n<div class=\"ecl-tabs\">\n    <ng-container *ngTemplateOutlet=\"eclTabsTemplate\"></ng-container>\n</div>\n} @else {\n<ng-container *ngTemplateOutlet=\"eclTabsTemplate\"></ng-container>\n}\n\n<ng-template #eclTabsTemplate>\n    <div class=\"ecl-tabs__container\" [class.ecl-tabs__container--right]=\"isScrollNextBtnShow()\"\n        [class.ecl-tabs__container--left]=\"isScrollPrevBtnShow()\">\n        <div class=\"ecl-tabs__list\" role=\"tablist\" #tabsList\n            [style.transform]=\"styleTransform\" [style.transition-duration]=\"getTransitionDuration()\">\n            <ng-content select=\"ecl-tab, [eclTab]\"></ng-content>\n            <div class=\"ecl-tabs__item ecl-tabs__item--more\" #moreItem>\n                @if (listTabs.length > 0) {\n                <div class=\"ecl-tabs__dropdown\" [class.ecl-tabs__dropdown--show]=\"isDropdownExpanded()\">\n                    <div class=\"ecl-tabs__dropdown-list\" #dropdownList>\n                        @for (tab of listTabs; track tab.id; let i = $index) {\n                        <div eclTab [isActive]=\"tab._isActive()\" [isHidden]=\"tab.isHidden()\" (click)=\"onTabSelect(tab)\"\n                            (keydown)=\"onTabKeydown($event, tab)\">\n                            <ecl-tab-label>{{ getTabLabel(i) }}</ecl-tab-label>\n                        </div>\n                        }\n                    </div>\n                </div>\n                }\n            </div>\n        </div>\n        <button #moreButton eclButton class=\"ecl-tabs__toggle\" variant=\"tertiary\" [tabindex]=\"customTabIndex\"\n            [attr.aria-expanded]=\"isDropdownExpanded()\" [class.ecl-tabs__toggle--active]=\"isMoreButtonActive\"\n            (click)=\"onDropdownToggle()\" (focus)=\"onMoreButtonFocus()\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.MORE' | translate }}\n                ({{ getHiddenTabsCount() }})\n            </span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\" size=\"fluid\"></ecl-icon>\n        </button>\n    </div>\n\n    <div class=\"ecl-tabs__controls\">\n        <button #btnPrev eclButton variant=\"tertiary\" isIconOnly class=\"ecl-tabs__prev\"\n            [style.display]=\"isScrollPrevBtnShow() ? 'flex' : 'none'\" (click)=\"onScrollPrev()\">\n            <span eclButtonLabel>{{ 'ecl.common.PREVIOUS' | translate }}</span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-270\" size=\"s\" class=\"\"> </ecl-icon>\n        </button>\n        <button #btnNext eclButton variant=\"tertiary\" isIconOnly class=\"ecl-tabs__next\"\n            [style.display]=\"isScrollNextBtnShow() ? 'flex' : 'none'\" (click)=\"onScrollNext()\">\n            <span eclButtonLabel>{{ 'ecl.common.NEXT' | translate }}</span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-90\" size=\"s\" class=\"\"> </ecl-icon>\n        </button>\n    </div>\n</ng-template>\n\n@for (tab of tabs(); track tab.tabLabel) {\n@if (tab._isActive()) {\n<div id=\"{{tab.finalId()}}-tabpanel\" role=\"tabpanel\" aria-labelledby=\"{{tab.finalId()}}-link\" class=\"{{ bodyClass() }}\">\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate()\"></ng-container>\n</div>\n}\n}\n@for (tab of listTabs; track tab.tabLabel) {\n@if (tab._isActive()) {\n<div id=\"{{tab.finalId()}}-tabpanel\" role=\"tabpanel\" aria-labelledby=\"{{tab.finalId()}}-link\" class=\"{{ bodyClass() }}\">\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate()\"></ng-container>\n</div>\n}\n}" }]
-        }], ctorParameters: () => [], propDecorators: { hasClass: [{
-                type: HostBinding,
-                args: ['class.ecl-tabs']
-            }], autoInitialized: [{
-                type: HostBinding,
-                args: ['attr.data-ecl-auto-initialized']
-            }], bodyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyClass", required: false }] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }], tabs: [{ type: i0.ContentChildren, args: [forwardRef(() => EclTabComponent), { isSignal: true }] }], tabsList: [{ type: i0.ViewChild, args: ['tabsList', { isSignal: true }] }], moreButton: [{ type: i0.ViewChild, args: ['moreButton', { isSignal: true }] }], btnPrev: [{ type: i0.ViewChild, args: ['btnPrev', { isSignal: true }] }], btnNext: [{ type: i0.ViewChild, args: ['btnNext', { isSignal: true }] }], dropdownList: [{ type: i0.ViewChild, args: ['dropdownList', { isSignal: true }] }], moreItem: [{ type: i0.ViewChild, args: ['moreItem', { isSignal: true }] }], onClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event.target']]
-            }] } });
+            args: [{ selector: 'div[eclTabs]', imports: [TranslatePipe, NgTemplateOutlet, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, EclTabComponent, EclTabLabelComponent], encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'ecl-tabs',
+                        'data-ecl-auto-initialized': 'true',
+                        '(document:click)': 'onClick($event.target)',
+                    }, template: "<div class=\"ecl-tabs__container\" [class.ecl-tabs__container--right]=\"isScrollNextBtnShow()\"\n    [class.ecl-tabs__container--left]=\"isScrollPrevBtnShow()\">\n    <div class=\"ecl-tabs__list\" role=\"tablist\" #tabsList\n        [style.transform]=\"styleTransform()\" [style.transition-duration]=\"transitionDuration()\">\n        <ng-content select=\"[eclTab]\"></ng-content>\n        <div class=\"ecl-tabs__item ecl-tabs__item--more\" #moreItem>\n            @if (listTabs().length > 0) {\n            <div class=\"ecl-tabs__dropdown\" [class.ecl-tabs__dropdown--show]=\"isDropdownExpanded()\">\n                <div class=\"ecl-tabs__dropdown-list\" #dropdownList>\n                    @for (tab of listTabs(); track tab.finalId(); let i = $index) {\n                    <div eclTab [isActive]=\"tab._isActive()\" [isHidden]=\"tab.isHidden()\" (click)=\"onTabSelect(tab)\"\n                        (keydown)=\"onTabKeydown($event, tab)\">\n                        <ecl-tab-label>{{ getTabLabel(i) }}</ecl-tab-label>\n                    </div>\n                    }\n                </div>\n            </div>\n            }\n        </div>\n    </div>\n    <button #moreButton eclButton class=\"ecl-tabs__toggle\" variant=\"tertiary\" [tabindex]=\"customTabIndex()\"\n        [attr.aria-expanded]=\"isDropdownExpanded()\" [class.ecl-tabs__toggle--active]=\"isMoreButtonActive()\"\n        (click)=\"onDropdownToggle()\" (focus)=\"onMoreButtonFocus()\">\n        <span eclButtonLabel>\n            {{ 'ecl.common.MORE' | translate }}\n            ({{ hiddenTabsCount() }})\n        </span>\n        <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\" size=\"fluid\"></ecl-icon>\n    </button>\n</div>\n\n<div class=\"ecl-tabs__controls\">\n    <button #btnPrev eclButton variant=\"tertiary\" isIconOnly class=\"ecl-tabs__prev\"\n        [style.display]=\"isScrollPrevBtnShow() ? 'flex' : 'none'\" (click)=\"onScrollPrev()\">\n        <span eclButtonLabel>{{ 'ecl.common.PREVIOUS' | translate }}</span>\n        <ecl-icon icon=\"corner-arrow\" transform=\"rotate-270\" size=\"s\" class=\"\"> </ecl-icon>\n    </button>\n    <button #btnNext eclButton variant=\"tertiary\" isIconOnly class=\"ecl-tabs__next\"\n        [style.display]=\"isScrollNextBtnShow() ? 'flex' : 'none'\" (click)=\"onScrollNext()\">\n        <span eclButtonLabel>{{ 'ecl.common.NEXT' | translate }}</span>\n        <ecl-icon icon=\"corner-arrow\" transform=\"rotate-90\" size=\"s\" class=\"\"> </ecl-icon>\n    </button>\n</div>\n\n@for (tab of tabs(); track tab.finalId()) {\n@if (tab._isActive()) {\n<div id=\"{{tab.finalId()}}-tabpanel\" role=\"tabpanel\" aria-labelledby=\"{{tab.finalId()}}-link\" class=\"{{ bodyClass() }}\">\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate()\"></ng-container>\n</div>\n}\n}\n@for (tab of listTabs(); track tab.finalId()) {\n@if (tab._isActive()) {\n<div id=\"{{tab.finalId()}}-tabpanel\" role=\"tabpanel\" aria-labelledby=\"{{tab.finalId()}}-link\" class=\"{{ bodyClass() }}\">\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate()\"></ng-container>\n</div>\n}\n}" }]
+        }], ctorParameters: () => [], propDecorators: { bodyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyClass", required: false }] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }], tabs: [{ type: i0.ContentChildren, args: [forwardRef(() => EclTabComponent), { isSignal: true }] }], tabsList: [{ type: i0.ViewChild, args: ['tabsList', { isSignal: true }] }], moreButton: [{ type: i0.ViewChild, args: ['moreButton', { isSignal: true }] }], btnPrev: [{ type: i0.ViewChild, args: ['btnPrev', { isSignal: true }] }], dropdownList: [{ type: i0.ViewChild, args: ['dropdownList', { isSignal: true }] }], moreItem: [{ type: i0.ViewChild, args: ['moreItem', { isSignal: true }] }] } });
 
 const EUI_ECL_TABS = [
     EclTabsComponent, EclTabComponent, EclTabLabelComponent,