@eui/ecl 23.0.0-alpha.6 → 23.0.0-alpha.8

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

@@ -1,13 +1,14 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Component, input, model, booleanAttribute, signal, EventEmitter, computed, effect, HostBinding, ContentChild, ViewChild, Output, output, IterableDiffers, ChangeDetectorRef, PLATFORM_ID, afterNextRender, HostListener, ContentChildren, forwardRef, ViewEncapsulation } 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 { 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 { TranslatePipe } from '@ngx-translate/core';
-import { Subject, of } from 'rxjs';
-import { takeUntil, mergeWith } from 'rxjs/operators';
+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';
@@ -81,6 +82,22 @@ class EclTabComponent extends ECLBaseDirective {
          * Emits when a keydown event occurs on the tab.
          */
         this.keydownTab = new EventEmitter();
+        /**
+         * 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.
          */
@@ -127,7 +144,7 @@ class EclTabComponent extends ECLBaseDirective {
         return false;
     }
     ngAfterViewInit() {
-        this.tabLabel = this.label.el.nativeElement.innerHTML;
+        this.tabLabel = this.label().el.nativeElement.innerHTML;
         // this._isActive.set(this.isActive());
     }
     /**
@@ -140,7 +157,7 @@ class EclTabComponent extends ECLBaseDirective {
      * Returns the inner HTML content of the tab label.
      */
     getTabLabel() {
-        return this.label.el.nativeElement.innerHTML;
+        return this.label().el.nativeElement.innerHTML;
     }
     /**
      * Returns the width of the tab element in pixels.
@@ -169,16 +186,16 @@ class EclTabComponent extends ECLBaseDirective {
      * Calls the focus method on the inner link directive.
      */
     onFocus() {
-        this.link.onFocus();
+        this.link().onFocus();
     }
     /**
      * Calls the blur method on the inner link directive.
      */
     onBlur() {
-        this.link.onBlur();
+        this.link().onBlur();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", 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 }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }, { propertyName: "link", first: true, predicate: EclLinkDirective, descendants: 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.0.5", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclTabComponent, decorators: [{
             type: Component,
@@ -190,16 +207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 type: Output
             }], keydownTab: [{
                 type: Output
-            }], contentTemplate: [{
-                type: ViewChild,
-                args: ['content']
-            }], link: [{
-                type: ViewChild,
-                args: [EclLinkDirective]
-            }], label: [{
-                type: ContentChild,
-                args: [EclTabLabelComponent]
-            }], cssClasses: [{
+            }], 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']
             }] } });
@@ -232,6 +240,41 @@ class EclTabsComponent extends ECLBaseDirective {
          * Emits an event when a tab is selected.
          */
         this.tabSelect = output();
+        /**
+         * All projected tabs inside the component.
+         */
+        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.
+         */
+        this.btnPrev = viewChild('btnPrev', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "btnPrev" }] : /* istanbul ignore next */ []));
+        /**
+         * Reference to the scroll next button.
+         */
+        this.btnNext = viewChild('btnNext', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "btnNext" }] : /* istanbul ignore next */ []));
+        /**
+         * Reference to the dropdown list containing overflowed tabs.
+         */
+        this.dropdownList = viewChild('dropdownList', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dropdownList" }] : /* istanbul ignore next */ []));
+        /**
+         * Reference to the "more" item container in the tab list.
+         */
+        this.moreItem = viewChild('moreItem', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "moreItem" }] : /* istanbul ignore next */ []));
         /**
          * Tabs displayed in the visible list.
          */
@@ -270,6 +313,7 @@ class EclTabsComponent extends ECLBaseDirective {
         this.eclRtlService = inject(EclRtlService);
         this.platformId = inject(PLATFORM_ID);
         this.destroy$ = new Subject();
+        this.tabsChanges$ = toObservable(this.tabs);
         this.isRtl = false;
         this.TIMEOUT_INTERVAL = 0;
         if (this.isUsingOldSelector) {
@@ -293,7 +337,7 @@ class EclTabsComponent extends ECLBaseDirective {
         this.destroy$.unsubscribe();
     }
     onClick(target) {
-        if (!this.moreButton.el.nativeElement.contains(target) && !this.dropdownList.nativeElement.contains(target)) {
+        if (!this.moreButton().el.nativeElement.contains(target) && !this.dropdownList().nativeElement.contains(target)) {
             this.closeDropdown();
         }
     }
@@ -352,7 +396,7 @@ class EclTabsComponent extends ECLBaseDirective {
      * Returns the number of tabs hidden in dropdown.
      */
     getHiddenTabsCount() {
-        return this.tabs.filter((item) => item.isHidden()).length;
+        return this.tabs().filter((item) => item.isHidden()).length;
     }
     /**
      * Returns the label of the tab at the specified index.
@@ -374,7 +418,7 @@ class EclTabsComponent extends ECLBaseDirective {
      * @param tab Tab to activate.
      */
     onTabSelect(tab) {
-        this.deactivateAllTabs(this.tabs.toArray(), this.listTabs);
+        this.deactivateAllTabs(Array.from(this.tabs()), this.listTabs);
         this.activateTab(tab);
         this.sendTabSelectEvent(tab);
     }
@@ -476,7 +520,7 @@ class EclTabsComponent extends ECLBaseDirective {
         if (index < 0)
             return;
         this.openDropdown();
-        this.moreButton.el.nativeElement.blur();
+        this.moreButton().el.nativeElement.blur();
         this.focusOnDropdownTab(index);
     }
     onTabTab() {
@@ -490,10 +534,10 @@ class EclTabsComponent extends ECLBaseDirective {
         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 leftMargin = this.index === 0 ? 0 : this.btnPrev().el.nativeElement.getBoundingClientRect().width + 13;
         let newOffset = 0;
         if (this.isRtl) {
-            newOffset = Math.ceil(this.tabsList.nativeElement.offsetWidth -
+            newOffset = Math.ceil(this.tabsList().nativeElement.offsetWidth -
                 this.getTabsAsArray()[this.index].hostElement.offsetLeft -
                 this.getTabsAsArray()[this.index].hostElement.offsetWidth -
                 leftMargin);
@@ -533,7 +577,7 @@ class EclTabsComponent extends ECLBaseDirective {
     }
     createSecondListForDropdown() {
         this.listTabs = [];
-        this.tabs.forEach((tab) => {
+        this.tabs().forEach((tab) => {
             const newTab = Object.assign({}, tab);
             newTab.isHidden.set(true);
             newTab._isActive.set(tab.isActive());
@@ -541,10 +585,10 @@ class EclTabsComponent extends ECLBaseDirective {
         });
     }
     getTabsAsArray() {
-        return this.tabs.toArray();
+        return Array.from(this.tabs());
     }
     getTabsCount() {
-        return this.tabs.toArray().length;
+        return this.tabs().length;
     }
     closeDropdown() {
         this.isDropdownExpanded.set(false);
@@ -553,15 +597,12 @@ class EclTabsComponent extends ECLBaseDirective {
         this.isDropdownExpanded.set(true);
     }
     observeTabsChanges() {
-        this.createTabsChangesObservable(this.tabs).pipe(takeUntil(this.destroy$)).subscribe(this.onTabsChanges.bind(this));
-    }
-    createTabsChangesObservable(tabs) {
-        return of(tabs).pipe(mergeWith(tabs.changes), takeUntil(this.destroy$));
+        this.tabsChanges$.pipe(takeUntil(this.destroy$)).subscribe(this.onTabsChanges.bind(this));
     }
     onTabsChanges() {
-        this.diff = this.differ.diff(this.tabs);
+        this.diff = this.differ.diff(this.tabs());
         if (!this.diff) {
-            this.tabs.forEach((tab) => {
+            this.tabs().forEach((tab) => {
                 this.connectTabEvents(tab);
             });
         }
@@ -616,7 +657,7 @@ class EclTabsComponent extends ECLBaseDirective {
         }
     }
     focusOnDropdownTab(index) {
-        this.dropdownList.nativeElement.children[index].firstChild.focus();
+        this.dropdownList().nativeElement.children[index].firstChild.focus();
     }
     getLastTabFromArray() {
         return this.getTabsAsArray()[this.getTabsAsArray().length - 1];
@@ -662,33 +703,33 @@ class EclTabsComponent extends ECLBaseDirective {
         this.isScrollNextBtnShow.set(false);
         this.isScrollPrevBtnShow.set(false);
         // Reset list width to auto for measurement (direct DOM, same as ECL)
-        this.tabsList.nativeElement.style.width = 'auto';
+        this.tabsList().nativeElement.style.width = 'auto';
         // Temporarily show the more button to get its actual width
-        this.moreItem.nativeElement.classList.remove('ecl-tabs__item--hidden');
-        this.moreButton.el.nativeElement.classList.remove('ecl-tabs__toggle--hidden');
-        const moreButtonWidth = this.moreButton.el.nativeElement.getBoundingClientRect().width;
-        this.moreItem.nativeElement.classList.add('ecl-tabs__item--hidden');
-        this.moreButton.el.nativeElement.classList.add('ecl-tabs__toggle--hidden');
+        this.moreItem().nativeElement.classList.remove('ecl-tabs__item--hidden');
+        this.moreButton().el.nativeElement.classList.remove('ecl-tabs__toggle--hidden');
+        const moreButtonWidth = this.moreButton().el.nativeElement.getBoundingClientRect().width;
+        this.moreItem().nativeElement.classList.add('ecl-tabs__item--hidden');
+        this.moreButton().el.nativeElement.classList.add('ecl-tabs__toggle--hidden');
         const hiddenItems = [];
         const listWidth = this.getTabsListWidth();
         // Measure all items first to check if they fit without the button
-        this.tabs.forEach((item) => {
+        this.tabs().forEach((item) => {
             item.isHidden.set(false);
             item.hostElement.classList.remove('ecl-tabs__item--hidden');
         });
-        const itemWidths = this.tabs.toArray().map((item) => {
+        const itemWidths = this.tabs().map((item) => {
             const itemMargin = parseFloat(getComputedStyle(item.hostElement).marginInlineEnd) || 0;
             return item.hostElement.getBoundingClientRect().width + itemMargin;
         });
         const totalWidth = itemWidths.reduce((sum, w) => sum + w, 0);
         if (totalWidth > listWidth) {
             // Reserve space for the more button and hide items that don't fit
-            this.tabs.forEach((item) => {
+            this.tabs().forEach((item) => {
                 item.isHidden.set(true);
                 item.hostElement.classList.add('ecl-tabs__item--hidden');
             });
             let stopWidth = moreButtonWidth;
-            this.tabs.forEach((item, i) => {
+            this.tabs().forEach((item, i) => {
                 item.isHidden.set(false);
                 item.hostElement.classList.remove('ecl-tabs__item--hidden');
                 if (listWidth >= stopWidth + itemWidths[i] && !hiddenItems.includes(i - 1)) {
@@ -706,14 +747,14 @@ class EclTabsComponent extends ECLBaseDirective {
         }
         // Toggle the visibility of More button and items in dropdown
         if (!hiddenItems.length) {
-            this.moreItem.nativeElement.classList.add('ecl-tabs__item--hidden');
-            this.moreButton.el.nativeElement.classList.add('ecl-tabs__toggle--hidden');
+            this.moreItem().nativeElement.classList.add('ecl-tabs__item--hidden');
+            this.moreButton().el.nativeElement.classList.add('ecl-tabs__toggle--hidden');
             this.setActiveItemForMainTabs();
             this.hideAllDropdownTabs();
         }
         else {
-            this.moreItem.nativeElement.classList.remove('ecl-tabs__item--hidden');
-            this.moreButton.el.nativeElement.classList.remove('ecl-tabs__toggle--hidden');
+            this.moreItem().nativeElement.classList.remove('ecl-tabs__item--hidden');
+            this.moreButton().el.nativeElement.classList.remove('ecl-tabs__toggle--hidden');
             this.setHiddenItemsForDropdownTabs(hiddenItems);
         }
         this.cd.markForCheck();
@@ -724,13 +765,13 @@ class EclTabsComponent extends ECLBaseDirective {
     setActiveItemForMainTabs() {
         this.listTabs.forEach((item, index) => {
             if (item._isActive()) {
-                setTimeout(() => this.tabs.toArray()[index]._isActive.set(true));
+                setTimeout(() => this.tabs()[index]._isActive.set(true));
             }
         });
         this.cd.markForCheck();
     }
     getTabsListWidth() {
-        return this.tabsList.nativeElement.getBoundingClientRect().width;
+        return this.tabsList().nativeElement.getBoundingClientRect().width;
     }
     setHiddenItemsForDropdownTabs(hiddenItems) {
         this.listTabs.forEach((item, index) => {
@@ -747,19 +788,19 @@ class EclTabsComponent extends ECLBaseDirective {
         this.isScrollNextBtnShow.set(true);
         this.setAllTabsVisible();
         // Hide the more item and button (direct DOM, same as ECL)
-        this.moreItem.nativeElement.classList.add('ecl-tabs__item--hidden');
-        this.moreButton.el.nativeElement.classList.add('ecl-tabs__toggle--hidden');
+        this.moreItem().nativeElement.classList.add('ecl-tabs__item--hidden');
+        this.moreButton().el.nativeElement.classList.add('ecl-tabs__toggle--hidden');
         // Reset to auto so scrollWidth reflects the natural content width
-        this.tabsList.nativeElement.style.width = 'auto';
+        this.tabsList().nativeElement.style.width = 'auto';
         // Remove hidden class directly from DOM elements
-        this.tabs.forEach((item) => {
+        this.tabs().forEach((item) => {
             item.hostElement.classList.remove('ecl-tabs__item--hidden');
         });
         // Use scrollWidth to also include item margins
-        this.tabsList.nativeElement.style.width = `${this.tabsList.nativeElement.scrollWidth}px`;
+        this.tabsList().nativeElement.style.width = `${this.tabsList().nativeElement.scrollWidth}px`;
     }
     setAllTabsVisible() {
-        this.tabs.forEach((item) => {
+        this.tabs().forEach((item) => {
             item.isHidden.set(false);
         });
     }
@@ -787,42 +828,21 @@ class EclTabsComponent extends ECLBaseDirective {
             setTimeout(() => {
                 this.handleResize();
             }, this.TIMEOUT_INTERVAL);
-        }).observe(this.tabsList.nativeElement);
+        }).observe(this.tabsList().nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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) }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "moreButton", first: true, predicate: ["moreButton"], descendants: true }, { propertyName: "btnPrev", first: true, predicate: ["btnPrev"], descendants: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "moreItem", first: true, predicate: ["moreItem"], descendants: 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.toArray(); 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.0.5", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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.toArray(); 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}" }]
+            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: ContentChildren,
-                args: [forwardRef(() => EclTabComponent)]
-            }], tabsList: [{
-                type: ViewChild,
-                args: ['tabsList']
-            }], moreButton: [{
-                type: ViewChild,
-                args: ['moreButton']
-            }], btnPrev: [{
-                type: ViewChild,
-                args: ['btnPrev']
-            }], btnNext: [{
-                type: ViewChild,
-                args: ['btnNext']
-            }], dropdownList: [{
-                type: ViewChild,
-                args: ['dropdownList']
-            }], moreItem: [{
-                type: ViewChild,
-                args: ['moreItem']
-            }], onClick: [{
+            }], 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']]
             }] } });