@eui/ecl 19.0.0-next.1 → 19.0.0-next.3

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

@@ -0,0 +1,681 @@
+import * as i3 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, EventEmitter, booleanAttribute, Input, HostBinding, Output, ViewChild, ContentChild, afterNextRender, PLATFORM_ID, ViewEncapsulation, Inject, ContentChildren, forwardRef, HostListener, NgModule } from '@angular/core';
+import * as i9 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i4 from '@eui/ecl/components/ecl-button';
+import { EclButtonComponentModule } from '@eui/ecl/components/ecl-button';
+import * as i5 from '@eui/ecl/components/ecl-icon';
+import { EclIconComponentModule } from '@eui/ecl/components/ecl-icon';
+import * as i1 from '@eui/ecl/components/ecl-link';
+import { EclLinkDirective, EclLinkDirectiveModule } from '@eui/ecl/components/ecl-link';
+import * as i2 from '@eui/ecl/core';
+import { ECLBaseDirective, EclBaseEvent, KeyCode, ECLClickOutsideDirective } from '@eui/ecl/core';
+import { Subject, of } from 'rxjs';
+import { takeUntil, mergeWith } from 'rxjs/operators';
+import * as i1$1 from '@angular/cdk/layout';
+
+class EclTabLabelComponent extends ECLBaseDirective {
+    constructor(el) {
+        super();
+        this.el = el;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclTabLabelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EclTabLabelComponent, isStandalone: false, selector: "ecl-tab-label", usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclTabLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-tab-label', standalone: false, template: "<ng-content></ng-content>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+class EclTabSelectEvent extends EclBaseEvent {
+    constructor(tab) {
+        super();
+        this.tab = tab;
+    }
+}
+
+class EclTabComponent extends ECLBaseDirective {
+    constructor(elementRef) {
+        super();
+        this.elementRef = elementRef;
+        this.isHidden = false;
+        this.isActive = false;
+        this.selectTab = new EventEmitter();
+        this.keydownTab = new EventEmitter();
+        this.tabLabel = '';
+        this.tabindex = -1;
+        this.isFirstCall = true;
+    }
+    get hostElement() {
+        return this.elementRef.nativeElement;
+    }
+    ngAfterViewInit() {
+        this.tabLabel = this.label.el.nativeElement.innerHTML;
+    }
+    get cssClasses() {
+        return [super.getCssClasses('ecl-tabs__item')].join(' ').trim();
+    }
+    getTabLabel() {
+        return this.label.el.nativeElement.innerHTML;
+    }
+    getWidth() {
+        if (this.isFirstCall) {
+            this.width = this.hostElement.getBoundingClientRect().width;
+            this.isFirstCall = false;
+        }
+        return this.width;
+    }
+    onTabClick() {
+        this.selectTab.next(new EclTabSelectEvent(this));
+    }
+    onKeydown(event) {
+        this.keydownTab.next(event);
+    }
+    onFocus() {
+        this.link.onFocus();
+    }
+    onBlur() {
+        this.link.onBlur();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclTabComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.1", type: EclTabComponent, isStandalone: false, selector: "ecl-tab, [eclTab]", inputs: { id: "id", isHidden: ["isHidden", "isHidden", booleanAttribute], isActive: ["isActive", "isActive", booleanAttribute] }, outputs: { selectTab: "selectTab", keydownTab: "keydownTab" }, host: { properties: { "class.ecl-tabs__item--hidden": "this.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\"\n    [class.ecl-tabs__link--active]=\"isActive\"\n    [attr.aria-selected]=\"isActive\"\n    [tabindex]=\"tabindex\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"onTabClick()\">\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: ["isInverted", "isIconOnly", "isNoVisited", "variant"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-tab, [eclTab]', standalone: false, template: "<a\n    eclLink\n    role=\"tab\"\n    class=\"ecl-tabs__link eui-ecl-u-cursor-pointer\"\n    [class.ecl-tabs__link--active]=\"isActive\"\n    [attr.aria-selected]=\"isActive\"\n    [tabindex]=\"tabindex\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"onTabClick()\">\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: () => [{ type: i0.ElementRef }], propDecorators: { id: [{
+                type: Input
+            }], isHidden: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }, {
+                type: HostBinding,
+                args: ['class.ecl-tabs__item--hidden']
+            }], isActive: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], selectTab: [{
+                type: Output
+            }], keydownTab: [{
+                type: Output
+            }], contentTemplate: [{
+                type: ViewChild,
+                args: ['content']
+            }], link: [{
+                type: ViewChild,
+                args: [EclLinkDirective]
+            }], label: [{
+                type: ContentChild,
+                args: [EclTabLabelComponent]
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EclTabMoreComponent extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        this.isHidden = false;
+    }
+    get cssClasses() {
+        return [super.getCssClasses('ecl-tabs__item ecl-tabs__item--more')].join(' ').trim();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclTabMoreComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.1", type: EclTabMoreComponent, isStandalone: false, selector: "ecl-tab-more", inputs: { isHidden: ["isHidden", "isHidden", booleanAttribute] }, host: { properties: { "class.ecl-tabs__item--hidden": "this.isHidden", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclTabMoreComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-tab-more', standalone: false, template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { isHidden: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }, {
+                type: HostBinding,
+                args: ['class.ecl-tabs__item--hidden']
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+var ShiftDirection;
+(function (ShiftDirection) {
+    ShiftDirection["NEXT"] = "next";
+    ShiftDirection["PREVIOUS"] = "prev";
+})(ShiftDirection || (ShiftDirection = {}));
+class EclTabsComponent extends ECLBaseDirective {
+    constructor(differs, cdkBreakpointObserver, cd, el, eclRtlService, platformId) {
+        super();
+        this.differs = differs;
+        this.cdkBreakpointObserver = cdkBreakpointObserver;
+        this.cd = cd;
+        this.el = el;
+        this.eclRtlService = eclRtlService;
+        this.platformId = platformId;
+        this.bodyClass = 'ecl-u-mt-s';
+        this.tabSelect = new EventEmitter();
+        this.dropdownTabs = [];
+        this.listTabs = [];
+        this.index = 0;
+        this.isDropdownExpanded = false;
+        this.isMobileBreakpoint = false;
+        this.isMoreButtonShow = true;
+        this.isScrollPrevBtnShow = false;
+        this.isScrollNextBtnShow = false;
+        this.styleTransform = 'translate3d(0px, 0px, 0px)';
+        this.destroy$ = new Subject();
+        this.isFirstCall = true;
+        this.isRtl = false;
+        this.TIMEOUT_INTERVAL = 0;
+        this.differ = this.differs.find([]).create();
+        afterNextRender(() => {
+            setTimeout(() => this.setTabindex());
+            this.observeTabsChanges();
+            this.observeElementSizeChanges();
+            this.cd.detectChanges();
+        });
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.observeBreakpointChanges();
+            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();
+        }
+    }
+    get isMoreButtonActive() {
+        return this.listTabs.find((el) => el.isActive) !== undefined;
+    }
+    onScrollPrev() {
+        this.shiftTabs(ShiftDirection.PREVIOUS);
+    }
+    onScrollNext() {
+        this.shiftTabs(ShiftDirection.NEXT);
+    }
+    onDropdownToggle() {
+        this.isDropdownExpanded = !this.isDropdownExpanded;
+    }
+    getTabsWidthStyle() {
+        return this.isMobileBreakpoint ? `${this.getTabsWidth()}px` : 'auto';
+    }
+    getTabsWidth() {
+        return this.tabs.reduce((total, item) => (total += Math.ceil(item.getWidth())), 0);
+    }
+    getHiddenTabsCount() {
+        return this.tabs.filter((item) => item.isHidden).length;
+    }
+    getTabLabel(index) {
+        return this.getTabsAsArray()[index].getTabLabel();
+    }
+    getTransitionDuration() {
+        if (this.isMobileBreakpoint) {
+            return '0.4s';
+        }
+        return '0';
+    }
+    onTabBlur(evt) {
+        this.closeDropdown();
+        if (evt.shiftKey) {
+            this.getFirstTabFromArray().onBlur();
+        }
+        else {
+            this.getLastVisibleTab().onFocus();
+            this.getLastVisibleTab().onBlur();
+        }
+    }
+    onTabSelect(tab) {
+        this.deactivateAllTabs(this.tabs.toArray(), this.listTabs);
+        this.activateTab(tab);
+        this.sendTabSelectEvent(tab);
+    }
+    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);
+        }
+    }
+    onTabKeydownArrowLeft(index) {
+        if (this.isMobileBreakpoint) {
+            this.shiftTabs(ShiftDirection.PREVIOUS);
+            if (index === 0) {
+                return;
+            }
+        }
+        if (index === 0 && !this.isMobileBreakpoint) {
+            this.focusOnLastTab();
+        }
+        else {
+            this.focusOnPrevTab(index);
+        }
+    }
+    onTabKeydownHome() {
+        this.focusOnFirstTab();
+    }
+    onTabKeydownEnd() {
+        this.focusOnLastTab();
+    }
+    onTabKeydown(event, tab) {
+        event.preventDefault();
+        if (event instanceof KeyboardEvent) {
+            const index = this.getTabsAsArray().indexOf(tab);
+            switch (event.key) {
+                case KeyCode.ARROW_LEFT: {
+                    this.onTabKeydownArrowLeft(index);
+                    break;
+                }
+                case KeyCode.ARROW_RIGHT: {
+                    this.onTabKeydownArrowRight(index);
+                    break;
+                }
+                case KeyCode.ARROW_UP: {
+                    this.onTabKeydownArrowLeft(index);
+                    break;
+                }
+                case KeyCode.ARROW_DOWN: {
+                    this.onTabKeydownArrowRight(index);
+                    break;
+                }
+                case KeyCode.END: {
+                    this.onTabKeydownEnd();
+                    break;
+                }
+                case KeyCode.HOME: {
+                    this.onTabKeydownHome();
+                    break;
+                }
+                case KeyCode.ENTER: {
+                    this.onTabSelect(tab);
+                    break;
+                }
+                case KeyCode.TAB: {
+                    this.onTabBlur(event);
+                    break;
+                }
+                default: {
+                    break;
+                }
+            }
+        }
+    }
+    shiftTabs(dir) {
+        this.index = this.getShifIndex(dir, this.index);
+        this.isScrollPrevBtnShow = this.index >= 1;
+        this.isScrollNextBtnShow = this.index <= this.getTabsCount() - 1;
+        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 -
+                this.getTabsAsArray()[this.index].hostElement.offsetLeft -
+                this.getTabsAsArray()[this.index].hostElement.offsetWidth -
+                leftMargin);
+        }
+        else {
+            newOffset = Math.ceil(this.getTabsAsArray()[this.index]?.hostElement.offsetLeft - leftMargin);
+        }
+        const maxScroll = Math.ceil(this.getTabsListWidth() - this.el.nativeElement.getBoundingClientRect().width);
+        if (newOffset > maxScroll) {
+            this.isScrollNextBtnShow = false;
+            newOffset = maxScroll;
+        }
+        if (this.isRtl) {
+            this.styleTransform = `translate3d(${newOffset}px, 0px, 0px)`;
+        }
+        else {
+            this.styleTransform = `translate3d(-${newOffset}px, 0px, 0px)`;
+        }
+    }
+    getShifIndex(dir, index) {
+        if (dir === ShiftDirection.NEXT) {
+            if (index === this.getTabsCount() - 1 && !this.isMobileBreakpoint) {
+                return 0;
+            }
+            else {
+                return index + 1;
+            }
+        }
+        else {
+            if (index === 0 && !this.isMobileBreakpoint) {
+                return this.getTabsCount() - 1;
+            }
+            else {
+                return index - 1;
+            }
+        }
+    }
+    createSecondListForDropdown() {
+        this.listTabs = [];
+        this.tabs.forEach((tab) => {
+            const newTab = Object.assign({}, tab);
+            newTab.isHidden = true;
+            newTab.isActive = false;
+            this.listTabs.push(newTab);
+        });
+    }
+    getTabsAsArray() {
+        return this.tabs.toArray();
+    }
+    getTabsCount() {
+        return this.tabs.toArray().length;
+    }
+    closeDropdown() {
+        this.isDropdownExpanded = false;
+    }
+    openDropdown() {
+        this.isDropdownExpanded = 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$));
+    }
+    onTabsChanges() {
+        this.diff = this.differ.diff(this.tabs);
+        if (!this.diff) {
+            this.tabs.forEach((tab) => {
+                this.connectTabEvents(tab);
+            });
+        }
+        else {
+            this.diff.forEachAddedItem((change) => {
+                this.connectTabEvents(change.item);
+            });
+            this.diff.forEachRemovedItem((change) => {
+                this.disconnectTabEvents(change.item);
+            });
+        }
+        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);
+        });
+    }
+    setTabindex() {
+        this.tabs.forEach((item, index) => {
+            if (index === 0) {
+                item.tabindex = 0;
+            }
+            else {
+                item.tabindex = -1;
+            }
+        });
+    }
+    getLastVisibleTab() {
+        let result = null;
+        this.getTabsAsArray().forEach((el) => {
+            if (!el.isHidden) {
+                result = el;
+            }
+            else {
+                return;
+            }
+        });
+        return result;
+    }
+    focusOnNextTab(index) {
+        if (this.getTabsAsArray()[index + 1].isHidden) {
+            this.openDropdown();
+            this.focusOnDropdownTab(index + 1);
+        }
+        else {
+            this.closeDropdown();
+            this.getTabsAsArray()[index + 1].onFocus();
+        }
+    }
+    focusOnFirstTab() {
+        this.closeDropdown();
+        this.getFirstTabFromArray().onFocus();
+    }
+    focusOnLastTab() {
+        if (!this.getLastTabFromArray().isHidden) {
+            this.getLastTabFromArray().onFocus();
+        }
+        else {
+            this.openDropdown();
+            this.focusOnDropdownTab(this.getTabsCount() - 1);
+        }
+    }
+    focusOnPrevTab(index) {
+        if (!this.listTabs[index - 1].isHidden) {
+            this.focusOnDropdownTab(index - 1);
+        }
+        else {
+            this.closeDropdown();
+            this.getTabsAsArray()[index - 1].onFocus();
+        }
+    }
+    focusOnDropdownTab(index) {
+        this.dropdownList.nativeElement.children[index].firstChild.focus();
+    }
+    getLastTabFromArray() {
+        return this.getTabsAsArray()[this.getTabsAsArray().length - 1];
+    }
+    getFirstTabFromArray() {
+        return this.getTabsAsArray()[0];
+    }
+    disconnectTabEvents(tab) {
+        if (tab && tab.selectTab) {
+            tab.selectTab.unsubscribe();
+        }
+    }
+    deactivateAllTabs(tabs, listTabs) {
+        tabs.forEach((it) => {
+            it.isActive = false;
+        });
+        listTabs.forEach((it) => {
+            it.isActive = false;
+        });
+    }
+    activateTab(tab) {
+        tab.isActive = true;
+    }
+    sendTabSelectEvent(tab) {
+        this.tabSelect.next(new EclTabSelectEvent(tab));
+    }
+    observeBreakpointChanges() {
+        this.cdkBreakpointObserver
+            .observe(['(max-width: 480px)'])
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((result) => {
+            this.isMobileBreakpoint = result.matches;
+        });
+    }
+    handleResize() {
+        this.closeDropdown();
+        if (this.isMobileBreakpoint) {
+            this.handleMobile();
+            return;
+        }
+        this.styleTransform = 'translate3d(0px, 0px, 0px)';
+        this.index = 0;
+        this.initMoreBtnWidth();
+        let stopWidth = this.moreBtnWidth + 25;
+        const hiddenItems = [];
+        const listWidth = this.getTabsListWidth();
+        this.isScrollNextBtnShow = false;
+        this.isScrollPrevBtnShow = false;
+        this.isMoreButtonShow = false;
+        this.tabs.forEach((item, i) => {
+            item.isHidden = false;
+            if (listWidth >= stopWidth + item.getWidth() && !hiddenItems.includes(i - 1)) {
+                stopWidth += item.getWidth();
+            }
+            else {
+                item.isHidden = true;
+                if (item.isActive) {
+                    this.listTabs[i].isActive = true;
+                }
+                hiddenItems.push(i);
+            }
+        });
+        this.cd.markForCheck();
+        if (!hiddenItems.length) {
+            this.isMoreButtonShow = false;
+            this.setActiveItemForMainTabs();
+            this.hideAllDropdownTabs();
+        }
+        else {
+            this.isMoreButtonShow = true;
+            this.setHiddenItemsForDropdownTabs(hiddenItems);
+        }
+    }
+    initMoreBtnWidth() {
+        if (this.isFirstCall) {
+            this.moreBtnWidth = this.moreButton.el.nativeElement.getBoundingClientRect().width;
+            this.isFirstCall = false;
+        }
+    }
+    hideAllDropdownTabs() {
+        this.listTabs.forEach(item => item.isHidden = true);
+    }
+    setActiveItemForMainTabs() {
+        this.listTabs.forEach((item, index) => {
+            if (item.isActive) {
+                setTimeout(() => this.tabs.toArray()[index].isActive = true);
+            }
+        });
+        this.cd.markForCheck();
+    }
+    getTabsListWidth() {
+        return this.tabsList.nativeElement.getBoundingClientRect().width;
+    }
+    setHiddenItemsForDropdownTabs(hiddenItems) {
+        this.listTabs.forEach((item, index) => {
+            if (hiddenItems.includes(index)) {
+                item.isHidden = false;
+            }
+            else {
+                item.isHidden = true;
+            }
+        });
+    }
+    handleMobile() {
+        this.isMoreButtonShow = false;
+        this.isScrollPrevBtnShow = false;
+        this.isScrollNextBtnShow = true;
+        this.setAllTabsVisible();
+    }
+    setAllTabsVisible() {
+        this.tabs.forEach((item, i) => {
+            item.isHidden = false;
+        });
+    }
+    handleRtlChangeState() {
+        const isRtlOld = this.isRtl;
+        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {
+            setTimeout(() => {
+                this.isRtl = rtlState;
+                if (this.isMobileBreakpoint && this.hasRtlChanged(isRtlOld)) {
+                    this.handleRtlChange();
+                }
+            });
+        });
+    }
+    hasRtlChanged(isRtlOld) {
+        return isRtlOld !== this.isRtl;
+    }
+    handleRtlChange() {
+        this.handleMobile();
+        this.styleTransform = 'translate3d(0px, 0px, 0px)';
+        this.index = 0;
+    }
+    observeElementSizeChanges() {
+        new ResizeObserver(() => {
+            setTimeout(() => {
+                this.handleResize();
+            }, this.TIMEOUT_INTERVAL);
+        }).observe(this.tabsList.nativeElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclTabsComponent, deps: [{ token: i0.IterableDiffers }, { token: i1$1.BreakpointObserver }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2.EclRtlService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.1", type: EclTabsComponent, isStandalone: false, selector: "nav[eclTabs], ecl-tabs", inputs: { bodyClass: "bodyClass" }, outputs: { tabSelect: "tabSelect" }, host: { listeners: { "document:click": "onClick($event.target)" } }, 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 }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-tabs\">\n    <div class=\"ecl-tabs__container\"\n         [class.ecl-tabs__container--right]=\"isScrollNextBtnShow\"\n         [class.ecl-tabs__container--left]=\"isScrollPrevBtnShow\">\n        <div\n            class=\"ecl-tabs__list\"\n            role=\"tablist\"\n            #tabsList\n            [style.width]=\"getTabsWidthStyle()\"\n            [style.transform]=\"styleTransform\"\n            [style.transition-duration]=\"getTransitionDuration()\">\n            <ng-content select=\"ecl-tab, [eclTab]\"></ng-content>\n            <ecl-tab-more [isHidden]=\"!isMoreButtonShow\">\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                            <ecl-tab [isActive]=\"tab.isActive\" [isHidden]=\"tab.isHidden\" (click)=\"onTabSelect(tab)\"\n                                (keydown)=\"onTabKeydown($event, tab)\">\n                                <ecl-tab-label>{{ getTabLabel(i) }}</ecl-tab-label>\n                            </ecl-tab>\n                        }\n                    </div>\n                </div>\n            }\n            </ecl-tab-more>\n        </div>\n        <button #moreButton eclButton class=\"ecl-tabs__toggle\" tabindex=\"-1\" variant=\"ghost\"\n            [attr.aria-expanded]=\"isDropdownExpanded\" [class.ecl-tabs__toggle--active]=\"isMoreButtonActive\"\n            (click)=\"onDropdownToggle()\" [class.ecl-tabs__toggle--hidden]=\"!isMoreButtonShow\">\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\n            #btnPrev\n            eclButton\n            variant=\"ghost\"\n            isIconOnly\n            [attr.aria-hidden]=\"true\"\n            class=\"ecl-tabs__prev\"\n            [class.ecl-u-d-none]=\"!isScrollPrevBtnShow\"\n            [class.ecl-u-d-block]=\"isScrollPrevBtnShow\"\n            (click)=\"onScrollPrev()\">\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-270\" size=\"s\" class=\"\"> </ecl-icon>\n            <span eclButtonLabel>{{ 'ecl.common.PREVIOUS | translate }}</span>\n        </button>\n        <button\n            #btnNext\n            eclButton\n            variant=\"ghost\"\n            isIconOnly\n            [attr.aria-hidden]=\"true\"\n            class=\"ecl-tabs__next\"\n            [class.ecl-u-d-none]=\"!isScrollNextBtnShow\"\n            [class.ecl-u-d-block]=\"isScrollNextBtnShow\"\n            (click)=\"onScrollNext()\">\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-90\" size=\"s\" class=\"\"> </ecl-icon>\n            <span eclButtonLabel>{{ 'ecl.common.NEXT | translate }}</span>\n        </button>\n    </div>\n</div>\n\n@for (tab of tabs.toArray(); track tab.tabLabel) {\n    @if (tab.isActive) {\n        <div 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 class=\"{{ bodyClass }}\">\n            <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n        </div>\n    }\n}\n", dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i4.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i5.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclTabComponent, selector: "ecl-tab, [eclTab]", inputs: ["id", "isHidden", "isActive"], outputs: ["selectTab", "keydownTab"] }, { kind: "component", type: EclTabLabelComponent, selector: "ecl-tab-label" }, { kind: "component", type: EclTabMoreComponent, selector: "ecl-tab-more", inputs: ["isHidden"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nav[eclTabs], ecl-tabs', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"ecl-tabs\">\n    <div class=\"ecl-tabs__container\"\n         [class.ecl-tabs__container--right]=\"isScrollNextBtnShow\"\n         [class.ecl-tabs__container--left]=\"isScrollPrevBtnShow\">\n        <div\n            class=\"ecl-tabs__list\"\n            role=\"tablist\"\n            #tabsList\n            [style.width]=\"getTabsWidthStyle()\"\n            [style.transform]=\"styleTransform\"\n            [style.transition-duration]=\"getTransitionDuration()\">\n            <ng-content select=\"ecl-tab, [eclTab]\"></ng-content>\n            <ecl-tab-more [isHidden]=\"!isMoreButtonShow\">\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                            <ecl-tab [isActive]=\"tab.isActive\" [isHidden]=\"tab.isHidden\" (click)=\"onTabSelect(tab)\"\n                                (keydown)=\"onTabKeydown($event, tab)\">\n                                <ecl-tab-label>{{ getTabLabel(i) }}</ecl-tab-label>\n                            </ecl-tab>\n                        }\n                    </div>\n                </div>\n            }\n            </ecl-tab-more>\n        </div>\n        <button #moreButton eclButton class=\"ecl-tabs__toggle\" tabindex=\"-1\" variant=\"ghost\"\n            [attr.aria-expanded]=\"isDropdownExpanded\" [class.ecl-tabs__toggle--active]=\"isMoreButtonActive\"\n            (click)=\"onDropdownToggle()\" [class.ecl-tabs__toggle--hidden]=\"!isMoreButtonShow\">\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\n            #btnPrev\n            eclButton\n            variant=\"ghost\"\n            isIconOnly\n            [attr.aria-hidden]=\"true\"\n            class=\"ecl-tabs__prev\"\n            [class.ecl-u-d-none]=\"!isScrollPrevBtnShow\"\n            [class.ecl-u-d-block]=\"isScrollPrevBtnShow\"\n            (click)=\"onScrollPrev()\">\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-270\" size=\"s\" class=\"\"> </ecl-icon>\n            <span eclButtonLabel>{{ 'ecl.common.PREVIOUS | translate }}</span>\n        </button>\n        <button\n            #btnNext\n            eclButton\n            variant=\"ghost\"\n            isIconOnly\n            [attr.aria-hidden]=\"true\"\n            class=\"ecl-tabs__next\"\n            [class.ecl-u-d-none]=\"!isScrollNextBtnShow\"\n            [class.ecl-u-d-block]=\"isScrollNextBtnShow\"\n            (click)=\"onScrollNext()\">\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-90\" size=\"s\" class=\"\"> </ecl-icon>\n            <span eclButtonLabel>{{ 'ecl.common.NEXT | translate }}</span>\n        </button>\n    </div>\n</div>\n\n@for (tab of tabs.toArray(); track tab.tabLabel) {\n    @if (tab.isActive) {\n        <div 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 class=\"{{ bodyClass }}\">\n            <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n        </div>\n    }\n}\n" }]
+        }], ctorParameters: () => [{ type: i0.IterableDiffers }, { type: i1$1.BreakpointObserver }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i2.EclRtlService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { bodyClass: [{
+                type: Input
+            }], tabSelect: [{
+                type: Output
+            }], 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']
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
+            }] } });
+
+const COMPONENTS = [EclTabsComponent, EclTabComponent, EclTabLabelComponent, EclTabMoreComponent];
+class EclTabsComponentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclTabsComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclTabsComponentModule, declarations: [EclTabsComponent, EclTabComponent, EclTabLabelComponent, EclTabMoreComponent], imports: [CommonModule,
+            EclLinkDirectiveModule,
+            EclButtonComponentModule,
+            EclIconComponentModule,
+            TranslateModule,
+            ECLClickOutsideDirective], exports: [EclTabsComponent, EclTabComponent, EclTabLabelComponent, EclTabMoreComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclTabsComponentModule, imports: [CommonModule,
+            EclLinkDirectiveModule,
+            EclButtonComponentModule,
+            EclIconComponentModule,
+            TranslateModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EclTabsComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        EclLinkDirectiveModule,
+                        EclButtonComponentModule,
+                        EclIconComponentModule,
+                        TranslateModule,
+                        ECLClickOutsideDirective,
+                    ],
+                    exports: [...COMPONENTS],
+                    declarations: [...COMPONENTS],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EclTabComponent, EclTabLabelComponent, EclTabMoreComponent, EclTabSelectEvent, EclTabsComponent, EclTabsComponentModule, ShiftDirection };
+//# sourceMappingURL=eui-ecl-components-ecl-tabs.mjs.map