import * as i0 from '@angular/core';
import { inject, ViewContainerRef, booleanAttribute, Input, ViewChild, Component, Directive, ContentChild, EventEmitter, ChangeDetectorRef, ElementRef, ViewChildren, forwardRef, ContentChildren, Output, HostBinding, ViewEncapsulation, NgModule } from '@angular/core';
import * as i1$1 from '@angular/cdk/portal';
import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import { AnimationBuilder, animate, style } from '@angular/animations';
import { Subject, takeUntil, startWith, filter } from 'rxjs';
import { Router, NavigationEnd } from '@angular/router';
import * as i2 from '@angular/cdk/observers';
import { ObserversModule } from '@angular/cdk/observers';
import { EuiAppShellService } from '@eui/core';
import * as i3 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';
import * as i4 from '@eui/components/eui-button';
import { EUI_BUTTON } from '@eui/components/eui-button';
import * as i5 from '@eui/components/eui-icon-button';
import { EUI_ICON_BUTTON } from '@eui/components/eui-icon-button';
import { EuiTooltipDirective } from '@eui/components/directives';

/**
 * @description
 * Component used to display the content of the tab.
 */
class EuiTabContentComponent {
    constructor() {
        this.hasNoContentPadding = false;
        this.viewContainerRef = inject(ViewContainerRef);
    }
    ngAfterViewInit() {
        this.templatePortal = new TemplatePortal(this.templateRef, this.viewContainerRef);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: EuiTabContentComponent, isStandalone: true, selector: "eui-tab-content, euiTabContent", inputs: { hasNoContentPadding: ["hasNoContentPadding", "hasNoContentPadding", booleanAttribute] }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["euiTabContent"], descendants: true }], ngImport: i0, template: "<ng-template #euiTabContent>\n    <div tabindex=\"0\" class=\"eui-tab-content\" [class.eui-tab-content--no-padding]=\"this.hasNoContentPadding\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabContentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-tab-content, euiTabContent', template: "<ng-template #euiTabContent>\n    <div tabindex=\"0\" class=\"eui-tab-content\" [class.eui-tab-content--no-padding]=\"this.hasNoContentPadding\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>" }]
        }], propDecorators: { templateRef: [{
                type: ViewChild,
                args: ['euiTabContent']
            }], hasNoContentPadding: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

/**
 * @description
 * Component used to display the label of the header tab.
 */
class EuiTabLabelComponent {
    constructor() {
        this.viewContainerRef = inject(ViewContainerRef);
    }
    ngAfterViewInit() {
        this.templatePortal = new TemplatePortal(this.templateRef, this.viewContainerRef);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: EuiTabLabelComponent, isStandalone: true, selector: "eui-tab-label, euiTabLabel", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["euiTabLabel"], descendants: true }], ngImport: i0, template: "<ng-template #euiTabLabel>\n    <div class=\"eui-u-flex eui-u-flex-column\">\n        <div class=\"eui-u-flex eui-u-flex-justify-content-center\">\n            <div class=\"eui-u-inline-flex eui-tab-item__label-text\">\n                <ng-content/>\n            </div>\n            <ng-content select=\"eui-chip\"/>\n            <ng-content select=\"eui-badge\"/>\n        </div>\n\n        <div class=\"eui-tab-item__sublabel\"><ng-content select=\"euiTabSubLabel\"></ng-content></div>\n    </div>\n</ng-template>\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabLabelComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-tab-label, euiTabLabel', template: "<ng-template #euiTabLabel>\n    <div class=\"eui-u-flex eui-u-flex-column\">\n        <div class=\"eui-u-flex eui-u-flex-justify-content-center\">\n            <div class=\"eui-u-inline-flex eui-tab-item__label-text\">\n                <ng-content/>\n            </div>\n            <ng-content select=\"eui-chip\"/>\n            <ng-content select=\"eui-badge\"/>\n        </div>\n\n        <div class=\"eui-tab-item__sublabel\"><ng-content select=\"euiTabSubLabel\"></ng-content></div>\n    </div>\n</ng-template>\n" }]
        }], propDecorators: { templateRef: [{
                type: ViewChild,
                args: ['euiTabLabel']
            }] } });
// eslint-disable-next-line @angular-eslint/directive-selector
class EuiTabSubLabelDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabSubLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: EuiTabSubLabelDirective, isStandalone: true, selector: "euiTabSubLabel", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabSubLabelDirective, decorators: [{
            type: Directive,
            args: [{ selector: 'euiTabSubLabel' }]
        }] });

/**
 * @description
 * Component used to display a tab item.
 */
class EuiTabComponent {
    constructor() {
        /**
         * e2e attribute.
         *
         * @default 'eui-tab'
         */
        this.e2eAttr = 'eui-tab';
        /**
         * Whether the tab can be closed.
         *
         * @default false
         */
        this.isClosable = false;
        /**
         * Whether the tab is visible.
         *
         * @default true
         */
        this.isVisible = true;
        /**
         * Whether the tab is active.
         *
         * @default false
         */
        this.isActive = false;
        /**
         * Whether the tab is disabled.
         *
         * @default false
         */
        this.isDisabled = false;
        /**
         * Whether the close is handled on application side.
         *
         *
         * @default false
         */
        this.isHandleCloseOnClose = false;
        this.baseStatesDirective = inject(BaseStatesDirective);
    }
    get templateLabel() {
        return this._templateLabel;
    }
    set templateLabel(value) {
        this.setTemplateLabelInput(value);
    }
    get templateContent() {
        return this._templateContent;
    }
    set templateContent(value) {
        this.setTemplateContentInput(value);
    }
    setTemplateLabelInput(value) {
        if (value) {
            this._templateLabel = value;
        }
    }
    setTemplateContentInput(value) {
        if (value) {
            this._templateContent = value;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: EuiTabComponent, isStandalone: true, selector: "eui-tab", inputs: { url: "url", e2eAttr: "e2eAttr", tooltip: "tooltip", isClosable: ["isClosable", "isClosable", booleanAttribute], isVisible: ["isVisible", "isVisible", booleanAttribute], isActive: ["isActive", "isActive", booleanAttribute], isDisabled: ["isDisabled", "isDisabled", booleanAttribute], isHandleCloseOnClose: ["isHandleCloseOnClose", "isHandleCloseOnClose", booleanAttribute] }, queries: [{ propertyName: "templateLabel", first: true, predicate: EuiTabLabelComponent, descendants: true }, { propertyName: "templateContent", first: true, predicate: EuiTabContentComponent, descendants: true }], hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiDisabled", "euiDisabled", "euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiInfo", "euiInfo", "euiSuccess", "euiSuccess", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant"] }], ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-19 .eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-19 .eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-19 .eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-c-surface-page);display:none;height:100%;left:0;position:absolute;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-c-surface-page);display:none;height:100%;position:absolute;right:0;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-s-3xl);padding-right:0}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-19 .eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-s-s)}.eui-19 .eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-19 .eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:var(--eui-bw-none);border-bottom:3px solid transparent;color:var(--eui-c-text);cursor:pointer;display:flex;padding:var(--eui-s-s) var(--eui-s-m) var(--eui-s-s) var(--eui-s-m);position:relative;text-align:center}.eui-19 .eui-tabs .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs .eui-tab-item__label{font:var(--eui-f-m-bold)}.eui-19 .eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:var(--eui-f-s-compact)}.eui-19 .eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-c-hover);border-bottom:3px solid var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item--active{border-bottom:3px solid var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--active .eui-tab-item__label-text{color:var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--hidden{display:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-c-disabled);cursor:not-allowed;pointer-events:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-c-text-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-c-divider)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s) 0 0 0}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-s-secondary-surface-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem;background-clip:padding-box;border:2px solid transparent}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-s-secondary-surface);border:0;cursor:grab}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content:focus::-webkit-scrollbar-thumb{background-color:var(--eui-c-s-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content:focus-visible::-webkit-scrollbar-thumb{background-color:var(--eui-c-s-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-s-secondary-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-s-secondary-surface) var(--eui-c-s-secondary-surface-light);scrollbar-width:auto}}@-moz-document url-prefix(){.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content:focus,.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content:focus-visible{scrollbar-color:var(--eui-c-focus-visible) var(--eui-c-s-secondary-surface-light)}}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-c-s-primary-base)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-c-s-secondary-surface-light);border-left:3px solid var(--eui-c-s-primary-base)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s);position:relative}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-s-secondary-surface-light)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem;background-clip:padding-box;border:2px solid transparent}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-s-secondary-surface);border:0;cursor:grab}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content:focus::-webkit-scrollbar-thumb{background-color:var(--eui-c-s-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content:focus-visible::-webkit-scrollbar-thumb{background-color:var(--eui-c-s-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-s-secondary-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-s-secondary-surface) var(--eui-c-s-secondary-surface-light);scrollbar-width:auto}}@-moz-document url-prefix(){.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content:focus,.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content:focus-visible{scrollbar-color:var(--eui-c-focus-visible) var(--eui-c-s-secondary-surface-light)}}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs--main-navigation .eui-tabs__items,.eui-19 .eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-19 .eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-19 .eui-tabs--main-navigation .eui-tab-item--active,.eui-19 .eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item:hover,.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-c-s-primary-base)}.eui-19 .eui-tabs .eui-tab-item--closable{padding-right:var(--eui-s-xs)}.eui-19 .eui-tabs .eui-tab-item--closable .eui-tab-item__close-button{margin-left:var(--eui-s-2xs)}.eui-19 .eui-tabs .eui-tab-item--primary,.eui-19 .eui-tabs .eui-tab-item--primary .eui-tab-item__label-text{color:var(--eui-c-s-primary)}.eui-19 .eui-tabs .eui-tab-item--secondary,.eui-19 .eui-tabs .eui-tab-item--secondary .eui-tab-item__label-text{color:var(--eui-c-s-secondary)}.eui-19 .eui-tabs .eui-tab-item--info,.eui-19 .eui-tabs .eui-tab-item--info .eui-tab-item__label-text{color:var(--eui-c-s-info)}.eui-19 .eui-tabs .eui-tab-item--success,.eui-19 .eui-tabs .eui-tab-item--success .eui-tab-item__label-text{color:var(--eui-c-s-success)}.eui-19 .eui-tabs .eui-tab-item--warning,.eui-19 .eui-tabs .eui-tab-item--warning .eui-tab-item__label-text{color:var(--eui-c-s-warning)}.eui-19 .eui-tabs .eui-tab-item--danger,.eui-19 .eui-tabs .eui-tab-item--danger .eui-tab-item__label-text{color:var(--eui-c-s-danger)}.eui-19 .eui-tabs .eui-tab-item--accent,.eui-19 .eui-tabs .eui-tab-item--accent .eui-tab-item__label-text{color:var(--eui-c-s-accent)}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-tab', template: '<ng-content/>', hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiDisabled',
                                'euiPrimary',
                                'euiSecondary',
                                'euiInfo',
                                'euiSuccess',
                                'euiWarning',
                                'euiDanger',
                                'euiAccent',
                                'euiVariant',
                            ],
                        },
                    ], styles: [".eui-19 .eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-19 .eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-19 .eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-c-surface-page);display:none;height:100%;left:0;position:absolute;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-c-surface-page);display:none;height:100%;position:absolute;right:0;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-s-3xl);padding-right:0}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-19 .eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-s-s)}.eui-19 .eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-19 .eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:var(--eui-bw-none);border-bottom:3px solid transparent;color:var(--eui-c-text);cursor:pointer;display:flex;padding:var(--eui-s-s) var(--eui-s-m) var(--eui-s-s) var(--eui-s-m);position:relative;text-align:center}.eui-19 .eui-tabs .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs .eui-tab-item__label{font:var(--eui-f-m-bold)}.eui-19 .eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:var(--eui-f-s-compact)}.eui-19 .eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-c-hover);border-bottom:3px solid var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item--active{border-bottom:3px solid var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--active .eui-tab-item__label-text{color:var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--hidden{display:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-c-disabled);cursor:not-allowed;pointer-events:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-c-text-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-c-divider)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s) 0 0 0}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-s-secondary-surface-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem;background-clip:padding-box;border:2px solid transparent}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-s-secondary-surface);border:0;cursor:grab}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content:focus::-webkit-scrollbar-thumb{background-color:var(--eui-c-s-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content:focus-visible::-webkit-scrollbar-thumb{background-color:var(--eui-c-s-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-s-secondary-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-s-secondary-surface) var(--eui-c-s-secondary-surface-light);scrollbar-width:auto}}@-moz-document url-prefix(){.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content:focus,.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content:focus-visible{scrollbar-color:var(--eui-c-focus-visible) var(--eui-c-s-secondary-surface-light)}}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-c-s-primary-base)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-c-s-secondary-surface-light);border-left:3px solid var(--eui-c-s-primary-base)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s);position:relative}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-s-secondary-surface-light)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem;background-clip:padding-box;border:2px solid transparent}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-s-secondary-surface);border:0;cursor:grab}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content:focus::-webkit-scrollbar-thumb{background-color:var(--eui-c-s-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content:focus-visible::-webkit-scrollbar-thumb{background-color:var(--eui-c-s-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-s-secondary-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-s-secondary-surface) var(--eui-c-s-secondary-surface-light);scrollbar-width:auto}}@-moz-document url-prefix(){.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content:focus,.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content:focus-visible{scrollbar-color:var(--eui-c-focus-visible) var(--eui-c-s-secondary-surface-light)}}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs--main-navigation .eui-tabs__items,.eui-19 .eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-19 .eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-19 .eui-tabs--main-navigation .eui-tab-item--active,.eui-19 .eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item:hover,.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-c-s-primary-base)}.eui-19 .eui-tabs .eui-tab-item--closable{padding-right:var(--eui-s-xs)}.eui-19 .eui-tabs .eui-tab-item--closable .eui-tab-item__close-button{margin-left:var(--eui-s-2xs)}.eui-19 .eui-tabs .eui-tab-item--primary,.eui-19 .eui-tabs .eui-tab-item--primary .eui-tab-item__label-text{color:var(--eui-c-s-primary)}.eui-19 .eui-tabs .eui-tab-item--secondary,.eui-19 .eui-tabs .eui-tab-item--secondary .eui-tab-item__label-text{color:var(--eui-c-s-secondary)}.eui-19 .eui-tabs .eui-tab-item--info,.eui-19 .eui-tabs .eui-tab-item--info .eui-tab-item__label-text{color:var(--eui-c-s-info)}.eui-19 .eui-tabs .eui-tab-item--success,.eui-19 .eui-tabs .eui-tab-item--success .eui-tab-item__label-text{color:var(--eui-c-s-success)}.eui-19 .eui-tabs .eui-tab-item--warning,.eui-19 .eui-tabs .eui-tab-item--warning .eui-tab-item__label-text{color:var(--eui-c-s-warning)}.eui-19 .eui-tabs .eui-tab-item--danger,.eui-19 .eui-tabs .eui-tab-item--danger .eui-tab-item__label-text{color:var(--eui-c-s-danger)}.eui-19 .eui-tabs .eui-tab-item--accent,.eui-19 .eui-tabs .eui-tab-item--accent .eui-tab-item__label-text{color:var(--eui-c-s-accent)}\n"] }]
        }], propDecorators: { url: [{
                type: Input
            }], e2eAttr: [{
                type: Input
            }], tooltip: [{
                type: Input
            }], isClosable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isVisible: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isActive: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isDisabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isHandleCloseOnClose: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], templateLabel: [{
                type: ContentChild,
                args: [EuiTabLabelComponent]
            }], templateContent: [{
                type: ContentChild,
                args: [EuiTabContentComponent]
            }] } });

/**
 * @description
 * eUI Tabs component helps to organize content into separate views where only one view can be visible at a time.
 * Each tab's label is shown in the tab header and the active tab is designated with a primary ink bar visual.
 * The active tab may be set using the `activeTabIndex` input option or when the user selects one of the tab labels in the header.
 * When the list of tab labels exceeds the width of the header or its container, pagination controls appear to let the user scroll left and right across the tabs.
 */
class EuiTabsComponent {
    constructor() {
        /**
         * Tabs in data approach
         *
         * @type {EuiTabComponent[]}
         */
        this.tabs = [];
        /**
         * Index of the active tab
         *
         * @default 0
         */
        this.activeTabIndex = null;
        /**
         * Sets the `data-e2e` attribute for the host element.
         *
         * @default 'eui-tabs'
         */
        this.e2eAttr = 'eui-tabs';
        /**
         * The way the router will consider the url when used on tabs. 'prefix' | 'full'.
         *
         * @default 'prefix'
         */
        this.pathMatch = 'prefix';
        /**
         * Event emitted when a tab is closed.
         */
        this.tabClose = new EventEmitter();
        /**
         * Event emitted when a tab is selected.
         */
        this.tabSelect = new EventEmitter();
        this.scrolling = false;
        this.navigationLeftButtonDisabled = true;
        this.navigationRightButtonDisabled = false;
        this.currentOffset = 0;
        this.isMainNavigation = false;
        this.isHandleChangeTab = false;
        this.isSubTabs = false;
        this.isVerticalTabs = false;
        this.destroy$ = new Subject();
        this.stepMove = 400;
        this.scrollOffset = 50;
        /**
         * For race condition reason, the wrapper width is not correctly calculated when the component passes from no-scroll state to scroll
         * state. To fix this issue, we count the number of times the getScrollingStatus method is called.
         *
         * Scenario 1: The number of tabs does not require any scroll:
         * - Without any fix the scroll will have a delta of 64 at the first activation, then on the first no-scroll to scroll state,
         * - we had 64 to the move
         *
         * Scenario 2: The number of tabs requires a scroll:
         * - In this case the wrapper width is correctly calculated, so we don't need to add the delta
         */
        this.scrollingCount = 0;
        this.cd = inject(ChangeDetectorRef);
        this.router = inject(Router);
        this.builder = inject(AnimationBuilder);
        this.elementRef = inject(ElementRef);
        this.euiAppShellService = inject(EuiAppShellService);
    }
    /**
     * @description
     * Computes and returns the CSS classes for the component based on its current state.
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get elementClass() {
        return [
            'eui-tabs',
            this.isMainNavigation ? 'eui-tabs--main-navigation' : '',
            this.isVerticalTabs ? 'eui-tabs--vertical' : '',
        ].join(' ').trim();
    }
    ngOnChanges(c) {
        if (c.activeTabIndex) {
            setTimeout(() => {
                const activeTab = this.euiTabsItemsWrapper.nativeElement.children.item(c.activeTabIndex.currentValue);
                const containerWidth = this.euiTabsItems.nativeElement.clientWidth;
                const wrapperWidth = this.euiTabsItemsWrapper.nativeElement.clientWidth;
                if (activeTab && !this.isActiveTabFullyVisible(activeTab)) {
                    let scrollTo = 0;
                    let subsetWidth = 0;
                    for (let i = 0; i <= c.activeTabIndex.currentValue; i++) {
                        subsetWidth += this.euiTabsItemsWrapper.nativeElement.children.item(i).clientWidth;
                    }
                    scrollTo = containerWidth / 2 - subsetWidth;
                    if (Math.abs(scrollTo) > wrapperWidth - containerWidth + this.scrollOffset) {
                        scrollTo = -(wrapperWidth - containerWidth + this.scrollOffset);
                    }
                    if (scrollTo > 0) {
                        scrollTo = 0;
                    }
                    if (c.activeTabIndex.isFirstChange() && c.activeTabIndex.currentValue > 0) {
                        this.setScrollTo(scrollTo, false);
                    }
                    else {
                        this.setScrollTo(scrollTo);
                    }
                }
            }, c.activeTabIndex.isFirstChange() && c.activeTabIndex.currentValue > 0 ? 500 : 0);
        }
    }
    ngOnInit() {
        this.euiAppShellService.state$.pipe(takeUntil(this.destroy$)).subscribe((state) => {
            this.getScrollingStatus();
        });
    }
    ngAfterViewInit() {
        this._tabs.changes.pipe(startWith(true), takeUntil(this.destroy$)).subscribe(() => {
            this.tabs = this._tabs.toArray();
            if (this.routerSubscription) {
                this.routerSubscription.unsubscribe();
            }
            // TODO v18 check navigationEnd (deprecation)
            this.routerSubscription = this.router.events
                .pipe(filter((e) => e instanceof NavigationEnd), takeUntil(this.destroy$), startWith({ url: this.router.url }))
                .subscribe((e) => {
                const tabsWithUrl = this.tabs.filter((t) => t.url && typeof t.url === 'string');
                if (tabsWithUrl.length === this.tabs.length) {
                    let tabIndex = -1;
                    if (this.pathMatch === 'full') {
                        tabIndex = tabsWithUrl.findIndex((t) => e.url === t.url);
                    }
                    else {
                        tabIndex = tabsWithUrl.findIndex((t) => {
                            const regex = new RegExp(t.url + '(/?)');
                            return regex.test(e.url);
                        });
                    }
                    this.tabs = this.tabs.map((t, i) => tabIndex === i ? Object.assign(t, { isActive: true }) : Object.assign(t, { isActive: false }));
                    if (this.tabs.findIndex((t) => t.isActive) !== -1) {
                        this.activeTabIndex = this.tabs.findIndex((t) => t.isActive);
                    }
                    this.cd.detectChanges();
                }
            });
            if (!this.activeTabIndex) {
                this.activeTabIndex = this.tabs.findIndex((t) => t.isActive) !== -1 ? this.tabs.findIndex((t) => t.isActive) : 0;
            }
            this.cd.detectChanges();
        });
    }
    ngOnDestroy() {
        this.destroy$.next(true);
        this.destroy$.unsubscribe();
    }
    /**
     * Listens to the content to be changed to recalculate the scrolling position and status.
     */
    onContentChanges() {
        this.getScrollingStatus();
    }
    /**
     * Scroll to left handler
     */
    goToLeft() {
        let scrollTo = this.currentOffset + this.stepMove;
        if (scrollTo > 0) {
            scrollTo = 0;
        }
        this.setScrollTo(scrollTo);
    }
    /**
     * Scroll to right handler
     */
    goToRight() {
        const containerWidth = this.euiTabsItems.nativeElement.clientWidth;
        const wrapperWidth = this.euiTabsItemsWrapper.nativeElement.clientWidth;
        let scrollTo = this.currentOffset - this.stepMove;
        if (Math.abs(scrollTo) > wrapperWidth - containerWidth) {
            scrollTo = -(wrapperWidth - containerWidth) - this.scrollOffset;
        }
        this.setScrollTo(scrollTo);
    }
    /**
     * Click handler for tab item
     *
     * @param index Index of the tab clicked
     */
    changeTab(index) {
        if (this.isHandleChangeTab) {
            this.tabSelect.emit({ tab: this.tabs[index], index });
        }
        else {
            if (this.tabs[index] && !this.tabs[index].isDisabled) {
                if (this.tabs[this.activeTabIndex]) {
                    this.tabs[this.activeTabIndex].isActive = false;
                }
                this.tabs[index].isActive = true;
                const activeTab = this.euiTabsItemsWrapper.nativeElement.children.item(index);
                const containerWidth = this.euiTabsItems.nativeElement.clientWidth;
                const wrapperWidth = this.euiTabsItemsWrapper.nativeElement.clientWidth;
                if (activeTab && !this.isActiveTabFullyVisible(activeTab) && !this.isVerticalTabs && !this.isMainNavigation) {
                    let scrollTo = 0;
                    let subsetWidth = 0;
                    for (let i = 0; i <= index; i++) {
                        subsetWidth += this.euiTabsItemsWrapper.nativeElement.children.item(i).clientWidth;
                    }
                    scrollTo = containerWidth / 2 - subsetWidth;
                    if (Math.abs(scrollTo) > wrapperWidth - containerWidth + this.scrollOffset) {
                        scrollTo = -(wrapperWidth - containerWidth + this.scrollOffset);
                    }
                    if (scrollTo > 0) {
                        scrollTo = 0;
                    }
                    this.setScrollTo(scrollTo);
                }
                if (!this.tabs[index].url) {
                    this.activeTabIndex = index;
                    this.tabSelect.emit({ tab: this.tabs[index], index });
                }
                else {
                    this.activeTabIndex = index;
                    this.router.navigateByUrl(this.tabs[index].url);
                }
            }
        }
    }
    /**
     * Handles the `keyup` event for a tab element at the specified index.
     *
     * When the user presses the "Enter" or "Space" key, this method checks if the tab at the given index
     * is enabled (not disabled). If so, it activates that tab and deactivates all others.
     *
     * @param e The keyboard event triggered by the keyup action.
     * @param index The index of the tab associated with the key event.
     */
    onKeyUp(e, index) {
        if (e.code === 'Enter' || e.code === 'Space') {
            if (this.tabs[index] && !this.tabs[index].isDisabled) {
                this.tabs.map((t, i) => (i === index ? Object.assign(t, { isActive: true }) : Object.assign(t, { isActive: false })));
                if (!this.tabs[index].url) {
                    this.activeTabIndex = index;
                    this.tabs[index].isActive = true;
                    this.tabSelect.emit({ tab: this.tabs[index], index });
                }
                else {
                    this.activeTabIndex = index;
                    this.router.navigateByUrl(this.tabs[index].url);
                }
            }
        }
    }
    /**
     * Closes the tab specified by `index` parameter
     *
     * @param index Index of the tab to close
     * @param e Event of the click
     */
    // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    closeTab(index, e) {
        const tab = this.tabs[index];
        if (!this.tabs[index].isHandleCloseOnClose) {
            this.close(e.index);
            this.tabs = this.tabs.filter((t, i) => i !== index);
        }
        this.tabClose.emit({ tab, index });
        e.stopPropagation();
    }
    /**
     * Close a tab pass in parameter.
     *
     * @param index Index of the tab to close
     */
    close(index) {
        if (index === this.activeTabIndex) {
            const previousVisibleIndex = this.tabs.indexOf(this.tabs[index - 1]);
            if (previousVisibleIndex < 0) {
                this.changeTab(0);
            }
            else {
                this.changeTab(previousVisibleIndex);
            }
        }
        else {
            if (index < this.activeTabIndex) {
                this.activeTabIndex = this.activeTabIndex - 1;
            }
        }
        this.tabs = this.tabs.filter((t, i) => i !== index);
    }
    /**
     * Checks if the active tab is fully visible
     *
     * @param activeTab Tab element to check
     * @returns true if fully visible, false otherwise
     */
    isActiveTabFullyVisible(activeTab) {
        const containerWidth = this.euiTabsItems.nativeElement.clientWidth;
        return activeTab.offsetLeft - 48 >= 0 && activeTab.offsetLeft + activeTab.clientWidth < containerWidth - 48;
    }
    /**
     * Sets the scroll position of the tabs headers
     *
     * @param scrollTo Number to set on the margin-left style property
     * @param isAnimated Whether the tab activation should be animated
     */
    setScrollTo(scrollTo, isAnimated = true) {
        const containerWidth = this.euiTabsItems.nativeElement.clientWidth;
        const wrapperWidth = this.euiTabsItemsWrapper.nativeElement.clientWidth;
        const timings = isAnimated ? '500ms cubic-bezier(0.35, 0, 0.25, 1)' : 0;
        const animation = this.builder.build([animate(timings, style({ 'margin-left': +scrollTo + 'px' }))]);
        this.player = animation.create(this.euiTabsItemsWrapper.nativeElement);
        this.player.play();
        this.currentOffset = scrollTo;
        if (scrollTo === 0) {
            this.navigationLeftButtonDisabled = true;
        }
        if (Math.abs(this.currentOffset) < wrapperWidth - containerWidth + this.scrollOffset) {
            this.navigationRightButtonDisabled = false;
        }
        if (this.currentOffset < 0) {
            this.navigationLeftButtonDisabled = false;
        }
        if (Math.abs(scrollTo) === wrapperWidth - containerWidth + this.scrollOffset) {
            this.navigationRightButtonDisabled = true;
        }
        this.cd.detectChanges();
    }
    /**
     * Checks if the tabs headers are scrolling and calculates the scrolling position
     */
    getScrollingStatus() {
        if (this.euiTabsItems && this.euiTabsItemsWrapper) {
            const containerWidth = this.euiTabsItems.nativeElement.clientWidth;
            const wrapperWidth = this.euiTabsItemsWrapper.nativeElement.clientWidth;
            this.scrolling = containerWidth < wrapperWidth;
            if (!this.scrolling) {
                this.scrollingCount = 0;
                this.setScrollTo(0);
            }
            else {
                if (wrapperWidth - containerWidth <= Math.abs(this.currentOffset) + this.scrollOffset) {
                    const deltaFix = this.scrollingCount === 0 ? this.scrollOffset * 2 : 0;
                    const scrollTo = -(wrapperWidth - containerWidth) - this.scrollOffset - deltaFix;
                    this.setScrollTo(scrollTo);
                    this.currentOffset = scrollTo;
                }
                else {
                    if (Math.abs(this.currentOffset) < wrapperWidth - containerWidth + this.scrollOffset) {
                        this.navigationRightButtonDisabled = false;
                    }
                    if (this.currentOffset < 0) {
                        this.navigationLeftButtonDisabled = false;
                    }
                }
                this.scrollingCount++;
            }
            this.cd.detectChanges();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EuiTabsComponent, isStandalone: true, selector: "eui-tabs", inputs: { tabs: "tabs", activeTabIndex: "activeTabIndex", e2eAttr: "e2eAttr", pathMatch: "pathMatch", isMainNavigation: ["isMainNavigation", "isMainNavigation", booleanAttribute], isHandleChangeTab: ["isHandleChangeTab", "isHandleChangeTab", booleanAttribute], isSubTabs: ["isSubTabs", "isSubTabs", booleanAttribute], isVerticalTabs: ["isVerticalTabs", "isVerticalTabs", booleanAttribute] }, outputs: { tabClose: "tabClose", tabSelect: "tabSelect" }, host: { properties: { "class": "this.elementClass", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "euiTabsRightContentTagDirective", first: true, predicate: i0.forwardRef(() => EuiTabsRightContentTagDirective), descendants: true }, { propertyName: "_tabs", predicate: i0.forwardRef(() => EuiTabComponent) }], viewQueries: [{ propertyName: "euiTabsItems", first: true, predicate: ["euiTabsItems"], descendants: true }, { propertyName: "euiTabsItemsWrapper", first: true, predicate: ["euiTabsItemsWrapper"], descendants: true }, { propertyName: "euiTabLabelItems", predicate: ["euiTabLabelItem"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-u-flex\" [class.eui-tabs__wrapper--horizontal]=\"!isVerticalTabs\" [class.eui-tabs__wrapper--vertical]=\"isVerticalTabs\">\n    <div\n        #euiTabsItems\n        class=\"eui-tabs__items\"\n        [class.eui-tabs__items--horizontal]=\"!isVerticalTabs\"\n        [class.eui-tabs__items--scrolling]=\"scrolling\"\n        (cdkObserveContent)=\"onContentChanges()\">\n        <div #euiTabsItemsWrapper class=\"eui-tabs__items-wrapper\" [attr.data-offset]=\"currentOffset\" role=\"tablist\">\n            @for (tab of tabs; let i = $index; track i) {\n                @if (tab.isVisible) {\n                    <div\n                        tabindex=\"0\"\n                        role=\"tab\"\n                        class=\"eui-tab-item eui-tab-item--{{ tab.baseStatesDirective.euiVariant }}\"\n                        [class.eui-tab-item--closable]=\"tab.isClosable\"\n                        [class.eui-tab-item--active]=\"activeTabIndex === i\"\n                        [class.eui-tab-item--disabled]=\"tab.isDisabled\"\n                        [attr.aria-disabled]=\"tab.isDisabled\"\n                        (click)=\"changeTab(i)\"\n                        [euiTooltip]=\"tab.tooltip\"\n                        (keyup)=\"onKeyUp($event, i)\">\n                        <div class=\"eui-tab-item__label\">\n                            <ng-template [cdkPortalOutlet]=\"tab.templateLabel.templatePortal\"></ng-template>\n                        </div>\n                        @if (tab.isClosable) {\n                            <eui-icon-button\n                                class=\"eui-tab-item__close-button\"\n                                icon=\"close:outline\"\n                                ariaLabel=\"close tab\"\n                                (buttonClick)=\"closeTab(i, $event)\"\n                                euiRounded>\n                            </eui-icon-button>\n                        }\n                    </div>\n                }\n            }\n        </div>\n\n        <div class=\"eui-tabs__navigation\">\n            <div class=\"eui-tabs__navigation__left-item\">\n                <button\n                    (click)=\"goToLeft()\"\n                    euiButton\n                    euiIconButton\n                    euiBasicButton\n                    type=\"button\"\n                    [euiDisabled]=\"navigationLeftButtonDisabled\"\n                    aria-label=\"Scroll left\">\n                    <eui-icon-svg icon=\"chevron-back:sharp\"></eui-icon-svg>\n                </button>\n            </div>\n            <div class=\"eui-tabs__navigation__right-item\">\n                <button\n                    (click)=\"goToRight()\"\n                    euiButton\n                    euiIconButton\n                    euiBasicButton\n                    type=\"button\"\n                    [euiDisabled]=\"navigationRightButtonDisabled\"\n                    aria-label=\"Scroll right\">\n                    <eui-icon-svg icon=\"chevron-forward:sharp\"></eui-icon-svg>\n                </button>\n            </div>\n        </div>\n    </div>\n\n    @if (euiTabsRightContentTagDirective) {\n        <div class=\"eui-tabs__right-content\">\n            <ng-content select=\"euiTabsRightContent\"></ng-content>\n        </div>\n    }\n</div>\n\n@for (tab of tabs; let i = $index; track i) {\n    @if (i === activeTabIndex && tab.templateContent) {\n        <div class=\"eui-tab-content-wrapper\" tabindex=\"0\">\n            <ng-template [cdkPortalOutlet]=\"tab.templateContent.templatePortal\"></ng-template>\n        </div>\n    }\n}\n", styles: [".eui-19 .eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-19 .eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-19 .eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-c-surface-page);display:none;height:100%;left:0;position:absolute;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-c-surface-page);display:none;height:100%;position:absolute;right:0;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-s-3xl);padding-right:0}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-19 .eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-s-s)}.eui-19 .eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-19 .eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:var(--eui-bw-none);border-bottom:3px solid transparent;color:var(--eui-c-text);cursor:pointer;display:flex;padding:var(--eui-s-s) var(--eui-s-m) var(--eui-s-s) var(--eui-s-m);position:relative;text-align:center}.eui-19 .eui-tabs .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs .eui-tab-item__label{font:var(--eui-f-m-bold)}.eui-19 .eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:var(--eui-f-s-compact)}.eui-19 .eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-c-hover);border-bottom:3px solid var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item--active{border-bottom:3px solid var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--active .eui-tab-item__label-text{color:var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--hidden{display:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-c-disabled);cursor:not-allowed;pointer-events:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-c-text-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-c-divider)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s) 0 0 0}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-s-secondary-surface-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem;background-clip:padding-box;border:2px solid transparent}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-s-secondary-surface);border:0;cursor:grab}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content:focus::-webkit-scrollbar-thumb{background-color:var(--eui-c-s-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content:focus-visible::-webkit-scrollbar-thumb{background-color:var(--eui-c-s-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-s-secondary-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-s-secondary-surface) var(--eui-c-s-secondary-surface-light);scrollbar-width:auto}}@-moz-document url-prefix(){.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content:focus,.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content:focus-visible{scrollbar-color:var(--eui-c-focus-visible) var(--eui-c-s-secondary-surface-light)}}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-c-s-primary-base)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-c-s-secondary-surface-light);border-left:3px solid var(--eui-c-s-primary-base)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s);position:relative}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-s-secondary-surface-light)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem;background-clip:padding-box;border:2px solid transparent}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-s-secondary-surface);border:0;cursor:grab}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content:focus::-webkit-scrollbar-thumb{background-color:var(--eui-c-s-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content:focus-visible::-webkit-scrollbar-thumb{background-color:var(--eui-c-s-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-s-secondary-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-s-secondary-surface) var(--eui-c-s-secondary-surface-light);scrollbar-width:auto}}@-moz-document url-prefix(){.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content:focus,.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content:focus-visible{scrollbar-color:var(--eui-c-focus-visible) var(--eui-c-s-secondary-surface-light)}}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs--main-navigation .eui-tabs__items,.eui-19 .eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-19 .eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-19 .eui-tabs--main-navigation .eui-tab-item--active,.eui-19 .eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item:hover,.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-c-s-primary-base)}.eui-19 .eui-tabs .eui-tab-item--closable{padding-right:var(--eui-s-xs)}.eui-19 .eui-tabs .eui-tab-item--closable .eui-tab-item__close-button{margin-left:var(--eui-s-2xs)}.eui-19 .eui-tabs .eui-tab-item--primary,.eui-19 .eui-tabs .eui-tab-item--primary .eui-tab-item__label-text{color:var(--eui-c-s-primary)}.eui-19 .eui-tabs .eui-tab-item--secondary,.eui-19 .eui-tabs .eui-tab-item--secondary .eui-tab-item__label-text{color:var(--eui-c-s-secondary)}.eui-19 .eui-tabs .eui-tab-item--info,.eui-19 .eui-tabs .eui-tab-item--info .eui-tab-item__label-text{color:var(--eui-c-s-info)}.eui-19 .eui-tabs .eui-tab-item--success,.eui-19 .eui-tabs .eui-tab-item--success .eui-tab-item__label-text{color:var(--eui-c-s-success)}.eui-19 .eui-tabs .eui-tab-item--warning,.eui-19 .eui-tabs .eui-tab-item--warning .eui-tab-item__label-text{color:var(--eui-c-s-warning)}.eui-19 .eui-tabs .eui-tab-item--danger,.eui-19 .eui-tabs .eui-tab-item--danger .eui-tab-item__label-text{color:var(--eui-c-s-danger)}.eui-19 .eui-tabs .eui-tab-item--accent,.eui-19 .eui-tabs .eui-tab-item--accent .eui-tab-item__label-text{color:var(--eui-c-s-accent)}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: ObserversModule }, { kind: "directive", type: i2.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "directive", type: EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i4.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i5.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasOverflowHover", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-tabs', encapsulation: ViewEncapsulation.None, imports: [
                        PortalModule,
                        ObserversModule,
                        EuiTooltipDirective,
                        ...EUI_ICON,
                        ...EUI_BUTTON,
                        ...EUI_ICON_BUTTON,
                    ], template: "<div class=\"eui-u-flex\" [class.eui-tabs__wrapper--horizontal]=\"!isVerticalTabs\" [class.eui-tabs__wrapper--vertical]=\"isVerticalTabs\">\n    <div\n        #euiTabsItems\n        class=\"eui-tabs__items\"\n        [class.eui-tabs__items--horizontal]=\"!isVerticalTabs\"\n        [class.eui-tabs__items--scrolling]=\"scrolling\"\n        (cdkObserveContent)=\"onContentChanges()\">\n        <div #euiTabsItemsWrapper class=\"eui-tabs__items-wrapper\" [attr.data-offset]=\"currentOffset\" role=\"tablist\">\n            @for (tab of tabs; let i = $index; track i) {\n                @if (tab.isVisible) {\n                    <div\n                        tabindex=\"0\"\n                        role=\"tab\"\n                        class=\"eui-tab-item eui-tab-item--{{ tab.baseStatesDirective.euiVariant }}\"\n                        [class.eui-tab-item--closable]=\"tab.isClosable\"\n                        [class.eui-tab-item--active]=\"activeTabIndex === i\"\n                        [class.eui-tab-item--disabled]=\"tab.isDisabled\"\n                        [attr.aria-disabled]=\"tab.isDisabled\"\n                        (click)=\"changeTab(i)\"\n                        [euiTooltip]=\"tab.tooltip\"\n                        (keyup)=\"onKeyUp($event, i)\">\n                        <div class=\"eui-tab-item__label\">\n                            <ng-template [cdkPortalOutlet]=\"tab.templateLabel.templatePortal\"></ng-template>\n                        </div>\n                        @if (tab.isClosable) {\n                            <eui-icon-button\n                                class=\"eui-tab-item__close-button\"\n                                icon=\"close:outline\"\n                                ariaLabel=\"close tab\"\n                                (buttonClick)=\"closeTab(i, $event)\"\n                                euiRounded>\n                            </eui-icon-button>\n                        }\n                    </div>\n                }\n            }\n        </div>\n\n        <div class=\"eui-tabs__navigation\">\n            <div class=\"eui-tabs__navigation__left-item\">\n                <button\n                    (click)=\"goToLeft()\"\n                    euiButton\n                    euiIconButton\n                    euiBasicButton\n                    type=\"button\"\n                    [euiDisabled]=\"navigationLeftButtonDisabled\"\n                    aria-label=\"Scroll left\">\n                    <eui-icon-svg icon=\"chevron-back:sharp\"></eui-icon-svg>\n                </button>\n            </div>\n            <div class=\"eui-tabs__navigation__right-item\">\n                <button\n                    (click)=\"goToRight()\"\n                    euiButton\n                    euiIconButton\n                    euiBasicButton\n                    type=\"button\"\n                    [euiDisabled]=\"navigationRightButtonDisabled\"\n                    aria-label=\"Scroll right\">\n                    <eui-icon-svg icon=\"chevron-forward:sharp\"></eui-icon-svg>\n                </button>\n            </div>\n        </div>\n    </div>\n\n    @if (euiTabsRightContentTagDirective) {\n        <div class=\"eui-tabs__right-content\">\n            <ng-content select=\"euiTabsRightContent\"></ng-content>\n        </div>\n    }\n</div>\n\n@for (tab of tabs; let i = $index; track i) {\n    @if (i === activeTabIndex && tab.templateContent) {\n        <div class=\"eui-tab-content-wrapper\" tabindex=\"0\">\n            <ng-template [cdkPortalOutlet]=\"tab.templateContent.templatePortal\"></ng-template>\n        </div>\n    }\n}\n", styles: [".eui-19 .eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-19 .eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-19 .eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-c-surface-page);display:none;height:100%;left:0;position:absolute;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-c-surface-page);display:none;height:100%;position:absolute;right:0;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-s-3xl);padding-right:0}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-19 .eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-s-s)}.eui-19 .eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-19 .eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:var(--eui-bw-none);border-bottom:3px solid transparent;color:var(--eui-c-text);cursor:pointer;display:flex;padding:var(--eui-s-s) var(--eui-s-m) var(--eui-s-s) var(--eui-s-m);position:relative;text-align:center}.eui-19 .eui-tabs .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs .eui-tab-item__label{font:var(--eui-f-m-bold)}.eui-19 .eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:var(--eui-f-s-compact)}.eui-19 .eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-c-hover);border-bottom:3px solid var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item--active{border-bottom:3px solid var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--active .eui-tab-item__label-text{color:var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--hidden{display:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-c-disabled);cursor:not-allowed;pointer-events:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-c-text-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-c-divider)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s) 0 0 0}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-s-secondary-surface-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem;background-clip:padding-box;border:2px solid transparent}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-s-secondary-surface);border:0;cursor:grab}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content:focus::-webkit-scrollbar-thumb{background-color:var(--eui-c-s-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content:focus-visible::-webkit-scrollbar-thumb{background-color:var(--eui-c-s-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-s-secondary-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-s-secondary-surface) var(--eui-c-s-secondary-surface-light);scrollbar-width:auto}}@-moz-document url-prefix(){.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content:focus,.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content:focus-visible{scrollbar-color:var(--eui-c-focus-visible) var(--eui-c-s-secondary-surface-light)}}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-c-s-primary-base)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-c-s-secondary-surface-light);border-left:3px solid var(--eui-c-s-primary-base)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s);position:relative}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:10px;width:10px;background-color:var(--eui-c-s-secondary-surface-light)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem;background-clip:padding-box;border:2px solid transparent}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-s-secondary-surface);border:0;cursor:grab}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content:focus::-webkit-scrollbar-thumb{background-color:var(--eui-c-s-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content:focus-visible::-webkit-scrollbar-thumb{background-color:var(--eui-c-s-primary-surface);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-s-secondary-surface-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-s-secondary-surface) var(--eui-c-s-secondary-surface-light);scrollbar-width:auto}}@-moz-document url-prefix(){.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content:focus,.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content:focus-visible{scrollbar-color:var(--eui-c-focus-visible) var(--eui-c-s-secondary-surface-light)}}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs--main-navigation .eui-tabs__items,.eui-19 .eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-19 .eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-19 .eui-tabs--main-navigation .eui-tab-item--active,.eui-19 .eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item:hover,.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-c-s-primary-base)}.eui-19 .eui-tabs .eui-tab-item--closable{padding-right:var(--eui-s-xs)}.eui-19 .eui-tabs .eui-tab-item--closable .eui-tab-item__close-button{margin-left:var(--eui-s-2xs)}.eui-19 .eui-tabs .eui-tab-item--primary,.eui-19 .eui-tabs .eui-tab-item--primary .eui-tab-item__label-text{color:var(--eui-c-s-primary)}.eui-19 .eui-tabs .eui-tab-item--secondary,.eui-19 .eui-tabs .eui-tab-item--secondary .eui-tab-item__label-text{color:var(--eui-c-s-secondary)}.eui-19 .eui-tabs .eui-tab-item--info,.eui-19 .eui-tabs .eui-tab-item--info .eui-tab-item__label-text{color:var(--eui-c-s-info)}.eui-19 .eui-tabs .eui-tab-item--success,.eui-19 .eui-tabs .eui-tab-item--success .eui-tab-item__label-text{color:var(--eui-c-s-success)}.eui-19 .eui-tabs .eui-tab-item--warning,.eui-19 .eui-tabs .eui-tab-item--warning .eui-tab-item__label-text{color:var(--eui-c-s-warning)}.eui-19 .eui-tabs .eui-tab-item--danger,.eui-19 .eui-tabs .eui-tab-item--danger .eui-tab-item__label-text{color:var(--eui-c-s-danger)}.eui-19 .eui-tabs .eui-tab-item--accent,.eui-19 .eui-tabs .eui-tab-item--accent .eui-tab-item__label-text{color:var(--eui-c-s-accent)}\n"] }]
        }], propDecorators: { elementClass: [{
                type: HostBinding,
                args: ['class']
            }], tabs: [{
                type: Input
            }], activeTabIndex: [{
                type: Input
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }], pathMatch: [{
                type: Input
            }], tabClose: [{
                type: Output
            }], tabSelect: [{
                type: Output
            }], _tabs: [{
                type: ContentChildren,
                args: [forwardRef(() => EuiTabComponent), { descendants: false }]
            }], euiTabsRightContentTagDirective: [{
                type: ContentChild,
                args: [forwardRef(() => EuiTabsRightContentTagDirective)]
            }], euiTabLabelItems: [{
                type: ViewChildren,
                args: ['euiTabLabelItem', { read: ViewContainerRef }]
            }], euiTabsItems: [{
                type: ViewChild,
                args: ['euiTabsItems']
            }], euiTabsItemsWrapper: [{
                type: ViewChild,
                args: ['euiTabsItemsWrapper']
            }], isMainNavigation: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isHandleChangeTab: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isSubTabs: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isVerticalTabs: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });
/* eslint-disable */
class EuiTabsRightContentTagDirective {
    constructor() {
        this.elementClass = 'eui-tabs__right-content-wrapper';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabsRightContentTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: EuiTabsRightContentTagDirective, isStandalone: true, selector: "euiTabsRightContent", host: { properties: { "class": "this.elementClass" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabsRightContentTagDirective, decorators: [{
            type: Directive,
            args: [{ selector: 'euiTabsRightContent' }]
        }], propDecorators: { elementClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Module that provides the EuiTabs component and its dependencies
 *
 * @deprecated Use {@link EUI_TABS} instead.
 */
class EuiTabsModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: EuiTabsModule, imports: [EuiTabsComponent,
            EuiTabComponent,
            EuiTabsRightContentTagDirective,
            EuiTabLabelComponent,
            EuiTabSubLabelDirective,
            EuiTabContentComponent], exports: [EuiTabsComponent,
            EuiTabComponent,
            EuiTabsRightContentTagDirective,
            EuiTabLabelComponent,
            EuiTabSubLabelDirective,
            EuiTabContentComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabsModule, imports: [EuiTabsComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabsModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        EuiTabsComponent,
                        EuiTabComponent,
                        EuiTabsRightContentTagDirective,
                        EuiTabLabelComponent,
                        EuiTabSubLabelDirective,
                        EuiTabContentComponent,
                    ],
                    exports: [
                        EuiTabsComponent,
                        EuiTabComponent,
                        EuiTabsRightContentTagDirective,
                        EuiTabLabelComponent,
                        EuiTabSubLabelDirective,
                        EuiTabContentComponent,
                    ],
                }]
        }] });

/**
 * @deprecated this component will be replaced by eui-tabs-v2 (renamed to eui-tabs) as of eUI 21 (end of 2025)
 */
const EUI_TABS = [
    EuiTabsComponent,
    EuiTabComponent,
    EuiTabsRightContentTagDirective,
    EuiTabLabelComponent,
    EuiTabSubLabelDirective,
    EuiTabContentComponent,
];

/**
 * Generated bundle index. Do not edit.
 */

export { EUI_TABS, EuiTabComponent, EuiTabContentComponent, EuiTabLabelComponent, EuiTabSubLabelDirective, EuiTabsComponent, EuiTabsModule, EuiTabsRightContentTagDirective };
//# sourceMappingURL=eui-components-eui-tabs.mjs.map
