import * as i0 from '@angular/core';
import { inject, ViewContainerRef, ViewChild, Component, booleanAttribute, Input, forwardRef, ContentChild, ChangeDetectionStrategy, EventEmitter, ChangeDetectorRef, ViewChildren, ContentChildren, Output, HostBinding } from '@angular/core';
import { AsyncPipe, NgClass } from '@angular/common';
import * as i1$1 from '@angular/cdk/portal';
import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
import { AnimationBuilder, animate, style } from '@angular/animations';
import { BehaviorSubject, Subject, takeUntil, startWith } from 'rxjs';
import { uniqueId, EuiAppShellService } from '@eui/core';
import * as i2 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';
import * as i3 from '@eui/components/eui-button';
import { EUI_BUTTON } from '@eui/components/eui-button';
import * as i4 from '@eui/components/eui-icon-button';
import { EUI_ICON_BUTTON } from '@eui/components/eui-icon-button';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';

class EuiTabV2HeaderComponent {
    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: EuiTabV2HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: EuiTabV2HeaderComponent, isStandalone: true, selector: "eui-tab-v2-header", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true }], ngImport: i0, template: "<ng-template #templateRef>\n    <div>\n        <ng-content/>\n    </div>\n</ng-template>\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabV2HeaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-tab-v2-header', template: "<ng-template #templateRef>\n    <div>\n        <ng-content/>\n    </div>\n</ng-template>\n" }]
        }], propDecorators: { templateRef: [{
                type: ViewChild,
                args: ['templateRef']
            }] } });

class EuiTabV2BodyComponent {
    constructor() {
        this.hasNoContentPadding = false;
        this.tabIndex$ = new BehaviorSubject(0);
        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: EuiTabV2BodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: EuiTabV2BodyComponent, isStandalone: true, selector: "eui-tab-v2-body", inputs: { hasNoContentPadding: ["hasNoContentPadding", "hasNoContentPadding", booleanAttribute] }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true }], ngImport: i0, template: "<ng-template #templateRef>\n    <div class=\"eui-tab-v2__body\" [tabindex]=\"tabIndex$ | async\" [class.eui-tab-v2__body--no-padding]=\"hasNoContentPadding\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabV2BodyComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-tab-v2-body', imports: [
                        AsyncPipe,
                    ], template: "<ng-template #templateRef>\n    <div class=\"eui-tab-v2__body\" [tabindex]=\"tabIndex$ | async\" [class.eui-tab-v2__body--no-padding]=\"hasNoContentPadding\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n" }]
        }], propDecorators: { hasNoContentPadding: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], templateRef: [{
                type: ViewChild,
                args: ['templateRef']
            }] } });

class EuiTabV2Component {
    constructor() {
        this.e2eAttr = 'eui-tab';
        this.euiVariant = null;
        this.isClosable = false;
        this.isDisabled = false;
        this.isVisible = true;
        this.isHandleCloseOnClose = false;
        this.isHandleActivateTab = false;
        this.isActive = false;
        this.isVisible$ = new BehaviorSubject(this.isVisible);
        this.isClosable$ = new BehaviorSubject(this.isClosable);
        this.isDisabled$ = new BehaviorSubject(this.isDisabled);
        this.euiVariant$ = new BehaviorSubject(this.euiVariant);
        this.baseStatesDirective = inject(BaseStatesDirective);
    }
    ngOnChanges(c) {
        if (c?.isVisible) {
            this.isVisible$.next(c.isVisible.currentValue);
        }
        if (c?.isClosable) {
            this.isClosable$.next(c.isClosable.currentValue);
        }
        if (c?.isDisabled) {
            this.isDisabled$.next(c.isDisabled.currentValue);
        }
        if (c?.euiVariant) {
            this.euiVariant$.next(c.euiVariant.currentValue);
        }
    }
    activateTab() {
        this.isActive = true;
    }
    deactivateTab() {
        this.isActive = false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: EuiTabV2Component, isStandalone: true, selector: "eui-tab-v2", inputs: { id: "id", url: "url", e2eAttr: "e2eAttr", euiVariant: "euiVariant", tooltip: "tooltip", isClosable: ["isClosable", "isClosable", booleanAttribute], isDisabled: ["isDisabled", "isDisabled", booleanAttribute], isVisible: ["isVisible", "isVisible", booleanAttribute], isHandleCloseOnClose: ["isHandleCloseOnClose", "isHandleCloseOnClose", booleanAttribute], isHandleActivateTab: ["isHandleActivateTab", "isHandleActivateTab", booleanAttribute] }, queries: [{ propertyName: "templateHeader", first: true, predicate: i0.forwardRef(() => EuiTabV2HeaderComponent), descendants: true }, { propertyName: "templateBody", first: true, predicate: i0.forwardRef(() => EuiTabV2BodyComponent), descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiInfo", "euiInfo", "euiSuccess", "euiSuccess", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant"] }], ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabV2Component, decorators: [{
            type: Component,
            args: [{
                    selector: 'eui-tab-v2',
                    template: '<ng-content/>',
                    hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: ['euiPrimary', 'euiSecondary', 'euiInfo', 'euiSuccess', 'euiWarning', 'euiDanger', 'euiAccent', 'euiVariant'],
                        },
                    ],
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }], propDecorators: { id: [{
                type: Input
            }], url: [{
                type: Input
            }], e2eAttr: [{
                type: Input
            }], euiVariant: [{
                type: Input
            }], tooltip: [{
                type: Input
            }], isClosable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isDisabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isVisible: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isHandleCloseOnClose: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isHandleActivateTab: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], templateHeader: [{
                type: ContentChild,
                args: [forwardRef(() => EuiTabV2HeaderComponent)]
            }], templateBody: [{
                type: ContentChild,
                args: [forwardRef(() => EuiTabV2BodyComponent)]
            }] } });

/**
 * @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 EuiTabsV2Component {
    constructor() {
        this.e2eAttr = 'eui-tabs-v2';
        /**
         * Index of the active tab
         *
         * @default 0
         */
        this.activeTabIndex = 0;
        /**
         * Sets the `aria-label` attribute for the host element.
         *
         * @default 'eUI Tabs'
         */
        this.ariaLabel = 'eUI Tabs';
        this.isMainNavigation = false;
        /**
         * Event emitted when a tab is closed
         */
        this.tabClose = new EventEmitter();
        /**
         * Event emitted when a tab is activated
         */
        this.tabActivate = new EventEmitter();
        /**
         * Event emitted when a tab is clicked
         */
        this.tabClick = new EventEmitter();
        this.tabs = [];
        this.scrolling = false;
        this.navigationLeftButtonDisabled = true;
        this.navigationRightButtonDisabled = false;
        this.currentOffset = 0;
        this.tabId = uniqueId();
        this.destroy$ = new Subject();
        this.stepMove = 400;
        this.scrollOffset = 40;
        this.scrollingCount = 0;
        this.cd = inject(ChangeDetectorRef);
        this.builder = inject(AnimationBuilder);
        this.euiAppShellService = inject(EuiAppShellService);
    }
    get elementClass() {
        return ['eui-tabs', this.isMainNavigation ? 'eui-tabs--main-navigation' : ''].join(' ').trim();
    }
    /**
     * Width of the tabs headers container
     */
    get euiTabsHeadersContainerWidth() {
        return this.euiTabsHeadersContainer?.nativeElement.clientWidth;
    }
    /**
     * Width of the tabs headers
     */
    get euiTabsHeadersWidth() {
        return this.euiTabsHeaders?.nativeElement.clientWidth;
    }
    ngOnChanges(c) {
        if (c?.activeTabIndex && !c.activeTabIndex.isFirstChange()) {
            this.activate(this.activeTabIndex);
        }
    }
    ngOnInit() {
        this.euiAppShellService.state$.pipe(takeUntil(this.destroy$)).subscribe((state) => {
            this.tabsScrollingHandler();
        });
    }
    ngAfterViewInit() {
        this._tabs.changes.pipe(startWith(this._tabs), takeUntil(this.destroy$)).subscribe((tabs) => {
            this.tabs = tabs.toArray();
            setTimeout(() => {
                this.tabsScrollingHandler();
            });
            this.cd.detectChanges();
        });
        setTimeout(() => {
            if (this.tabs[this.activeTabIndex]) {
                this.cd.markForCheck();
                this.activate(this.activeTabIndex, false, { emitEvent: false });
            }
        });
    }
    ngOnDestroy() {
        this.destroy$.next(true);
        this.destroy$.unsubscribe();
    }
    /**
     * Activate a tab having index passed in parameter if exists.
     *
     * @param index Index of the tab to close
     * @param isAnimated Whether the tab activation should be animated
     * @param options Object with emitEvent property to emit the event or not
     */
    activateTab(index, isAnimated = true, options = { emitEvent: true }) {
        const tab = this.tabs[index];
        if (tab) {
            this.tabs.forEach((t) => {
                t.deactivateTab();
            });
            this.setScrollToTabIndex(index, isAnimated);
            tab.activateTab();
            this.activeTabIndex = index;
            if (options.emitEvent) {
                this.tabActivate.emit({ tab, index });
            }
            this.cd.detectChanges();
        }
    }
    /**
     * Close a tab having index passed in parameter if exists.
         * @param index Index of the tab to close
     */
    closeTab(index) {
        const tab = this.tabs[index];
        if (this.tabs[index]) {
            this.tabs[index].deactivateTab();
            this.tabs = this.tabs.filter((_, i) => i !== index);
            if (index === this.activeTabIndex) {
                const previousVisibleIndex = this.tabs.indexOf(this.tabs[index - 1]);
                this.cd.markForCheck();
                if (previousVisibleIndex < 0) {
                    this.activate(0);
                }
                else {
                    this.activate(previousVisibleIndex);
                }
            }
            else {
                if (index < this.activeTabIndex) {
                    this.activeTabIndex = this.activeTabIndex - 1;
                }
            }
            this.cd.detectChanges();
            this.tabsScrollingHandler();
        }
    }
    /**
     * Scroll to the left handler
     */
    goToLeft() {
        let scrollTo = this.currentOffset + this.stepMove;
        if (scrollTo > 0) {
            scrollTo = 0;
        }
        this.setScrollTo(scrollTo);
    }
    /**
     * Scroll to the rihgt handler
     */
    goToRight() {
        let scrollTo = this.currentOffset - this.stepMove;
        if (Math.abs(scrollTo) > this.euiTabsHeadersWidth - this.euiTabsHeadersContainerWidth) {
            scrollTo = -(this.euiTabsHeadersWidth - this.euiTabsHeadersContainerWidth) - this.scrollOffset;
        }
        this.setScrollTo(scrollTo);
    }
    /**
     * Actions applied upon a keydown event
     *
     * @param i Index of the tab for each pressed key
     * @param event The keyboard event
     */
    onKeydown(i, event) {
        switch (event.key) {
            case 'Enter': {
                if (!this.tabs[i].isDisabled) {
                    this.activate(i);
                }
                break;
            }
            case 'ArrowRight': {
                const isLastItem = i === this.euiTabListItems.toArray().length - 1;
                const index = isLastItem ? 0 : i + 1;
                this.setScrollToTabIndex(index, false);
                this.euiTabListItems.toArray()[index]?.nativeElement.focus();
                break;
            }
            case 'ArrowLeft': {
                const lastIndex = this.euiTabListItems.toArray().length - 1;
                const index = i === 0 ? lastIndex : i - 1;
                this.setScrollToTabIndex(index, false);
                this.euiTabListItems.toArray()[index]?.nativeElement.focus();
                break;
            }
            case 'Home': {
                this.setScrollToTabIndex(0, false);
                this.euiTabListItems.toArray()[0]?.nativeElement.focus();
                event.preventDefault();
                break;
            }
            case 'End': {
                this.setScrollToTabIndex(this.euiTabListItems.toArray().length - 1, false);
                this.euiTabListItems.toArray()[this.euiTabListItems.toArray().length - 1]?.nativeElement.focus();
                event.preventDefault();
                break;
            }
            case 'Delete': {
                if (this.tabs[i].isClosable) {
                    if (i === this.euiTabListItems.toArray().length - 1) {
                        this.euiTabListItems.toArray()[i - 1]?.nativeElement.focus();
                        this.close(i, event);
                    }
                    else {
                        this.close(i, event);
                        this.euiTabListItems.toArray()[i]?.nativeElement.focus();
                    }
                }
                break;
            }
            default: {
                break;
            }
        }
    }
    /**
     * Click handler for tab list item
     *
     * @param index Index of the tab clicked
     */
    tabListItemClick(index) {
        const tab = this.tabs[index];
        this.tabClick.emit({ tab, index });
        this.activate(index);
    }
    /**
     * Activates a tab
     *
     * @param index Index of the tab to activate
     * @param isAnimated Whether the activation should be animated
     * @param options Object with emitEvent property to emit the event or not
     */
    activate(index, isAnimated = true, options = { emitEvent: true }) {
        const tab = this.tabs[index];
        if (tab && !tab.isHandleActivateTab) {
            this.activateTab(index, isAnimated, options);
        }
    }
    /**
     * Closes a tab
     *
     * @param index Index of the tab to close
     * @param e
     */
    close(index, e) {
        const tab = this.tabs[index];
        if (tab && !tab.isHandleCloseOnClose) {
            this.closeTab(index);
        }
        this.tabClose.emit({ tab, index });
        e.stopPropagation();
    }
    /**
     * Checks if there are html elements within the tab panel, in order to focus or not the tab panel
     * @param index The tab index
     */
    onAttached(index) {
        const tabbody = document.querySelector('#tabpanel-' + index + '-' + this.tabId)?.children[0];
        if (tabbody?.children.length > 0) {
            for (const child of Array.from(tabbody.children)) {
                if (this.isFocusableElement(child)) {
                    this.tabs[index - 1].templateBody.tabIndex$.next(-1);
                }
                else {
                    this.tabs[index - 1].templateBody.tabIndex$.next(0);
                }
            }
        }
        else {
            this.tabs[index - 1].templateBody.tabIndex$.next(0);
        }
    }
    /**
     * Checks the existence of focusable elements
     * @param origin The element to check
     */
    isFocusableElement(origin) {
        return (origin.matches('button') ||
            origin.matches('a') ||
            origin.matches('input') ||
            origin.matches('select') ||
            origin.matches('textarea') ||
            origin.matches('[tabindex]:not([tabindex="-1"])'));
    }
    /**
     * Checks if the tabs headers are scrolling and calculates the scrolling position
     */
    tabsScrollingHandler() {
        if (this.euiTabsHeadersContainerWidth && this.euiTabsHeadersWidth) {
            this.scrolling = this.euiTabsHeadersContainerWidth < this.euiTabsHeadersWidth;
            if (!this.scrolling) {
                this.scrollingCount = 0;
                this.setScrollTo(0, false);
            }
            else {
                if (this.euiTabsHeadersWidth - this.euiTabsHeadersContainerWidth <= Math.abs(this.currentOffset) + this.scrollOffset &&
                    this.scrollingCount !== 0) {
                    const scrollTo = -(this.euiTabsHeadersWidth - this.euiTabsHeadersContainerWidth) - this.scrollOffset;
                    this.setScrollTo(scrollTo);
                }
                else {
                    if (Math.abs(this.currentOffset) < this.euiTabsHeadersWidth - this.euiTabsHeadersContainerWidth + this.scrollOffset) {
                        this.navigationRightButtonDisabled = false;
                    }
                    if (this.currentOffset < 0) {
                        this.navigationLeftButtonDisabled = false;
                    }
                }
                this.scrollingCount++;
            }
            this.cd.detectChanges();
        }
    }
    /**
     * Sets the scroll position oon the tab header specified by index
     *
     * @param index Index of the tab header to scroll to
     * @param isAnimated Whether the tab activation should be animated
     */
    setScrollToTabIndex(index, isAnimated = true) {
        const activeTab = this.euiTabsHeaders.nativeElement.children.item(index);
        if (activeTab && !this.isActiveTabFullyVisible(activeTab) && !this.isMainNavigation) {
            let scrollTo = 0;
            let subsetWidth = 0;
            for (let i = 0; i <= index; i++) {
                subsetWidth += this.euiTabsHeaders.nativeElement.children.item(i).clientWidth;
            }
            scrollTo = this.euiTabsHeadersContainerWidth / 2 - subsetWidth;
            if (Math.abs(scrollTo) > this.euiTabsHeadersWidth - this.euiTabsHeadersContainerWidth + this.scrollOffset) {
                scrollTo = -(this.euiTabsHeadersWidth - this.euiTabsHeadersContainerWidth + this.scrollOffset);
            }
            if (scrollTo > 0 || (scrollTo < 0 && index === 0)) {
                scrollTo = 0;
            }
            this.setScrollTo(scrollTo, isAnimated);
        }
    }
    /**
     * 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 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.euiTabsHeaders.nativeElement);
        this.player.play();
        this.currentOffset = scrollTo;
        if (scrollTo === 0) {
            this.navigationLeftButtonDisabled = true;
        }
        if (Math.abs(this.currentOffset) < this.euiTabsHeadersWidth - this.euiTabsHeadersContainerWidth + this.scrollOffset) {
            this.navigationRightButtonDisabled = false;
        }
        if (this.currentOffset < 0) {
            this.navigationLeftButtonDisabled = false;
        }
        if (Math.abs(scrollTo) === this.euiTabsHeadersWidth - this.euiTabsHeadersContainerWidth + this.scrollOffset) {
            this.navigationRightButtonDisabled = true;
        }
        this.cd.detectChanges();
    }
    /**
     * Checks if the active tab is fully visible
     *
     * @param activeTab Index of the tab to check
     * @returns true if fully visible, false otherwise
     */
    isActiveTabFullyVisible(activeTab) {
        const fullyVisible = activeTab.offsetLeft - this.scrollOffset >= 0 &&
            activeTab.offsetLeft + activeTab.clientWidth < this.euiTabsHeadersContainerWidth - this.scrollOffset;
        return fullyVisible;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabsV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EuiTabsV2Component, isStandalone: true, selector: "eui-tabs-v2", inputs: { e2eAttr: "e2eAttr", activeTabIndex: "activeTabIndex", ariaLabel: "ariaLabel", isMainNavigation: ["isMainNavigation", "isMainNavigation", booleanAttribute] }, outputs: { tabClose: "tabClose", tabActivate: "tabActivate", tabClick: "tabClick" }, host: { properties: { "class": "this.elementClass", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "_tabs", predicate: i0.forwardRef(() => EuiTabV2Component) }], viewQueries: [{ propertyName: "euiTabsHeadersContainer", first: true, predicate: ["euiTabsHeadersContainer"], descendants: true }, { propertyName: "euiTabsHeaders", first: true, predicate: ["euiTabsHeaders"], descendants: true }, { propertyName: "euiTabListItems", predicate: ["euiTabListItems"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #euiTabsHeadersContainer class=\"eui-tab\" [class.eui-tab--scrolling]=\"scrolling\">\n    <ul #euiTabsHeaders class=\"eui-tab-headers\" [attr.data-offset]=\"currentOffset\" role=\"tablist\" [attr.aria-label]=\"ariaLabel\">\n        @for (tab of tabs; let i = $index; track tab) {\n            @if (tab.isVisible$ | async) {\n                <li #euiTabListItems\n                    class=\"eui-tab-header\"\n                    id=\"tab-{{ i + 1 }}-{{ tabId }}\"\n                    [tabindex]=\"i === activeTabIndex ? '0' : '-1'\"\n                    role=\"tab\"\n                    attr.aria-controls=\"tabpanel-{{ i + 1 }}-{{ tabId }}\"\n                    [attr.aria-selected]=\"i === activeTabIndex\"\n                    [ngClass]=\"(tab.euiVariant$ | async) ? 'eui-tab-header--' + (tab.euiVariant$ | async) : ''\"\n                    [class.eui-tab-header--active]=\"i === activeTabIndex\"\n                    [class.eui-tab-header--disabled]=\"tab.isDisabled$ | async\"\n                    attr.aria-disabled=\"{{ tab.isDisabled$ | async }}\"\n                    (click)=\"tabListItemClick(i)\"\n                    (keydown)=\"onKeydown(i, $event)\">\n                    <ng-template [cdkPortalOutlet]=\"tab.templateHeader.templatePortal\"></ng-template>\n\n                    @if (tab.isClosable$ | async) {\n                        <eui-icon-button\n                            [tabindex]=\"-1\"\n                            ariaLabel=\"Closable\"\n                            euiRounded\n                            class=\"eui-tab-close-button\"\n                            icon=\"close:outline\"\n                            size=\"s\"\n                            (buttonClick)=\"close(i, $event)\">\n                        </eui-icon-button>\n                    }\n                </li>\n            }\n        }\n    </ul>\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\n    <ng-content select=\"eui-tabs-v2-right-content\"></ng-content>\n</div>\n\n@for (tab of tabs; let i = $index; track tab) {\n    @if (i === activeTabIndex && (tab.isDisabled$ | async) === false && tab.templateBody) {\n        <div id=\"tabpanel-{{ i + 1 }}-{{ tabId }}\" class=\"eui-tab-body-container\" role=\"tabpanel\" attr.aria-labelledby=\"tab-{{ i + 1 }}-{{ tabId }}\">\n            <ng-template [cdkPortalOutlet]=\"tab.templateBody.templatePortal\" (attached)=\"onAttached(i + 1)\"></ng-template>\n        </div>\n    }\n}\n", styles: [".eui-19.eui-t-ds2025 :host.eui-tabs{--_label-font: var(--eui-f-body-m-semi-bold);--_sublabel-font: var(--eui-f-body-m-regular)}.eui-19 :host.eui-tabs{--_label-font: var(--eui-f-m-bold);--_sublabel-font: var(--eui-f-m)}.eui-19 :host.eui-tabs .eui-tab-header{--_color: var(--eui-c-s-secondary);--_border-color: transparent;--_border-color-hover: var(--eui-c-s-secondary-border-light)}.eui-19 :host.eui-tabs .eui-tab-header--active{--_color: var(--eui-c-active);--_border-color: var(--eui-c-active);--_border-color-hover: var(--eui-c-active)}.eui-19 :host.eui-tabs .eui-tab-header--primary{--_color: var(--eui-c-s-primary);--_border-color: var(--eui-c-s-primary)}.eui-19 :host.eui-tabs .eui-tab-header--secondary{--_color: var(--eui-c-s-secondary)}.eui-19 :host.eui-tabs .eui-tab-header--info{--_color: var(--eui-c-s-info)}.eui-19 :host.eui-tabs .eui-tab-header--success{--_color: var(--eui-c-s-success)}.eui-19 :host.eui-tabs .eui-tab-header--warning{--_color: var(--eui-c-s-warning)}.eui-19 :host.eui-tabs .eui-tab-header--danger{--_color: var(--eui-c-s-danger)}.eui-19 :host.eui-tabs .eui-tab-header--disabled{--_color: var(--eui-c-disabled);--_border-color-hover: transparent}.eui-19 :host.eui-tabs .eui-tab{align-items:center;border-bottom:1px solid var(--eui-c-divider);display:flex;overflow:hidden;position:relative}.eui-19 :host.eui-tabs .eui-tab-headers{display:flex;flex-shrink:0;list-style:none;margin:0;padding:0}.eui-19 :host.eui-tabs .eui-tab-headers .eui-tab-header{align-items:center;background-color:inherit;border:var(--eui-bw-none);border-bottom:3px solid transparent;color:var(--_color);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 :host.eui-tabs .eui-tab-headers .eui-tab-header:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-tabs .eui-tab-headers .eui-tab-header ::ng-deep .eui-label{display:block;font-weight:700;line-height:var(--eui-s-l);color:var(--_color);font:var(--_label-font)}.eui-19 :host.eui-tabs .eui-tab-headers .eui-tab-header ::ng-deep .eui-label__sublabel{font-weight:400;color:var(--_color);font:var(--_sublabel-font)}.eui-19 :host.eui-tabs .eui-tab-headers .eui-tab-header--active{border-color:var(--_border-color)}.eui-19 :host.eui-tabs .eui-tab-headers .eui-tab-header--disabled{cursor:not-allowed;pointer-events:none}.eui-19 :host.eui-tabs .eui-tab-headers .eui-tab-header:hover:not(.eui-tab-header--active){background:var(--eui-c-hover);border-color:var(--_border-color-hover)}.eui-19 :host.eui-tabs--main-navigation .eui-tab-headers{width:100%;justify-content:space-between}.eui-19 :host.eui-tabs--main-navigation .eui-tab-headers .eui-tab-header{width:100%;display:flex;justify-content:center}.eui-19 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__left-item,.eui-19 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__right-item{background-color:var(--eui-c-surface-container);display:none;height:100%;position:absolute;top:0}.eui-19 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__left-item ::ng-deep .eui-button.eui-button--icon-only,.eui-19 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__right-item ::ng-deep .eui-button.eui-button--icon-only{height:100%}.eui-19 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__left-item{left:0}.eui-19 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__right-item{right:0}.eui-19 :host.eui-tabs .eui-tab--scrolling .eui-tab-headers{padding-left:var(--eui-s-3xl)}.eui-19 :host.eui-tabs .eui-tab--scrolling .eui-tabs-navigation .eui-tabs-navigation__left-item,.eui-19 :host.eui-tabs .eui-tab--scrolling .eui-tabs-navigation .eui-tabs-navigation__right-item{display:block}.eui-19 :host.eui-tabs .eui-tab-body-container ::ng-deep .eui-tab-v2__body{padding:var(--eui-s-s)}.eui-19 :host.eui-tabs .eui-tab-body-container ::ng-deep .eui-tab-v2__body:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-tabs .eui-tab-body-container ::ng-deep .eui-tab-v2__body.eui-tab-v2__body--no-padding{padding:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i2.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: i3.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: i4.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasOverflowHover", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabsV2Component, decorators: [{
            type: Component,
            args: [{ selector: 'eui-tabs-v2', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        NgClass,
                        AsyncPipe,
                        PortalModule,
                        ...EUI_ICON,
                        ...EUI_BUTTON,
                        ...EUI_ICON_BUTTON,
                    ], template: "<div #euiTabsHeadersContainer class=\"eui-tab\" [class.eui-tab--scrolling]=\"scrolling\">\n    <ul #euiTabsHeaders class=\"eui-tab-headers\" [attr.data-offset]=\"currentOffset\" role=\"tablist\" [attr.aria-label]=\"ariaLabel\">\n        @for (tab of tabs; let i = $index; track tab) {\n            @if (tab.isVisible$ | async) {\n                <li #euiTabListItems\n                    class=\"eui-tab-header\"\n                    id=\"tab-{{ i + 1 }}-{{ tabId }}\"\n                    [tabindex]=\"i === activeTabIndex ? '0' : '-1'\"\n                    role=\"tab\"\n                    attr.aria-controls=\"tabpanel-{{ i + 1 }}-{{ tabId }}\"\n                    [attr.aria-selected]=\"i === activeTabIndex\"\n                    [ngClass]=\"(tab.euiVariant$ | async) ? 'eui-tab-header--' + (tab.euiVariant$ | async) : ''\"\n                    [class.eui-tab-header--active]=\"i === activeTabIndex\"\n                    [class.eui-tab-header--disabled]=\"tab.isDisabled$ | async\"\n                    attr.aria-disabled=\"{{ tab.isDisabled$ | async }}\"\n                    (click)=\"tabListItemClick(i)\"\n                    (keydown)=\"onKeydown(i, $event)\">\n                    <ng-template [cdkPortalOutlet]=\"tab.templateHeader.templatePortal\"></ng-template>\n\n                    @if (tab.isClosable$ | async) {\n                        <eui-icon-button\n                            [tabindex]=\"-1\"\n                            ariaLabel=\"Closable\"\n                            euiRounded\n                            class=\"eui-tab-close-button\"\n                            icon=\"close:outline\"\n                            size=\"s\"\n                            (buttonClick)=\"close(i, $event)\">\n                        </eui-icon-button>\n                    }\n                </li>\n            }\n        }\n    </ul>\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\n    <ng-content select=\"eui-tabs-v2-right-content\"></ng-content>\n</div>\n\n@for (tab of tabs; let i = $index; track tab) {\n    @if (i === activeTabIndex && (tab.isDisabled$ | async) === false && tab.templateBody) {\n        <div id=\"tabpanel-{{ i + 1 }}-{{ tabId }}\" class=\"eui-tab-body-container\" role=\"tabpanel\" attr.aria-labelledby=\"tab-{{ i + 1 }}-{{ tabId }}\">\n            <ng-template [cdkPortalOutlet]=\"tab.templateBody.templatePortal\" (attached)=\"onAttached(i + 1)\"></ng-template>\n        </div>\n    }\n}\n", styles: [".eui-19.eui-t-ds2025 :host.eui-tabs{--_label-font: var(--eui-f-body-m-semi-bold);--_sublabel-font: var(--eui-f-body-m-regular)}.eui-19 :host.eui-tabs{--_label-font: var(--eui-f-m-bold);--_sublabel-font: var(--eui-f-m)}.eui-19 :host.eui-tabs .eui-tab-header{--_color: var(--eui-c-s-secondary);--_border-color: transparent;--_border-color-hover: var(--eui-c-s-secondary-border-light)}.eui-19 :host.eui-tabs .eui-tab-header--active{--_color: var(--eui-c-active);--_border-color: var(--eui-c-active);--_border-color-hover: var(--eui-c-active)}.eui-19 :host.eui-tabs .eui-tab-header--primary{--_color: var(--eui-c-s-primary);--_border-color: var(--eui-c-s-primary)}.eui-19 :host.eui-tabs .eui-tab-header--secondary{--_color: var(--eui-c-s-secondary)}.eui-19 :host.eui-tabs .eui-tab-header--info{--_color: var(--eui-c-s-info)}.eui-19 :host.eui-tabs .eui-tab-header--success{--_color: var(--eui-c-s-success)}.eui-19 :host.eui-tabs .eui-tab-header--warning{--_color: var(--eui-c-s-warning)}.eui-19 :host.eui-tabs .eui-tab-header--danger{--_color: var(--eui-c-s-danger)}.eui-19 :host.eui-tabs .eui-tab-header--disabled{--_color: var(--eui-c-disabled);--_border-color-hover: transparent}.eui-19 :host.eui-tabs .eui-tab{align-items:center;border-bottom:1px solid var(--eui-c-divider);display:flex;overflow:hidden;position:relative}.eui-19 :host.eui-tabs .eui-tab-headers{display:flex;flex-shrink:0;list-style:none;margin:0;padding:0}.eui-19 :host.eui-tabs .eui-tab-headers .eui-tab-header{align-items:center;background-color:inherit;border:var(--eui-bw-none);border-bottom:3px solid transparent;color:var(--_color);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 :host.eui-tabs .eui-tab-headers .eui-tab-header:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-tabs .eui-tab-headers .eui-tab-header ::ng-deep .eui-label{display:block;font-weight:700;line-height:var(--eui-s-l);color:var(--_color);font:var(--_label-font)}.eui-19 :host.eui-tabs .eui-tab-headers .eui-tab-header ::ng-deep .eui-label__sublabel{font-weight:400;color:var(--_color);font:var(--_sublabel-font)}.eui-19 :host.eui-tabs .eui-tab-headers .eui-tab-header--active{border-color:var(--_border-color)}.eui-19 :host.eui-tabs .eui-tab-headers .eui-tab-header--disabled{cursor:not-allowed;pointer-events:none}.eui-19 :host.eui-tabs .eui-tab-headers .eui-tab-header:hover:not(.eui-tab-header--active){background:var(--eui-c-hover);border-color:var(--_border-color-hover)}.eui-19 :host.eui-tabs--main-navigation .eui-tab-headers{width:100%;justify-content:space-between}.eui-19 :host.eui-tabs--main-navigation .eui-tab-headers .eui-tab-header{width:100%;display:flex;justify-content:center}.eui-19 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__left-item,.eui-19 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__right-item{background-color:var(--eui-c-surface-container);display:none;height:100%;position:absolute;top:0}.eui-19 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__left-item ::ng-deep .eui-button.eui-button--icon-only,.eui-19 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__right-item ::ng-deep .eui-button.eui-button--icon-only{height:100%}.eui-19 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__left-item{left:0}.eui-19 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__right-item{right:0}.eui-19 :host.eui-tabs .eui-tab--scrolling .eui-tab-headers{padding-left:var(--eui-s-3xl)}.eui-19 :host.eui-tabs .eui-tab--scrolling .eui-tabs-navigation .eui-tabs-navigation__left-item,.eui-19 :host.eui-tabs .eui-tab--scrolling .eui-tabs-navigation .eui-tabs-navigation__right-item{display:block}.eui-19 :host.eui-tabs .eui-tab-body-container ::ng-deep .eui-tab-v2__body{padding:var(--eui-s-s)}.eui-19 :host.eui-tabs .eui-tab-body-container ::ng-deep .eui-tab-v2__body:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-tabs .eui-tab-body-container ::ng-deep .eui-tab-v2__body.eui-tab-v2__body--no-padding{padding:0}\n"] }]
        }], propDecorators: { elementClass: [{
                type: HostBinding,
                args: ['class']
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }], activeTabIndex: [{
                type: Input
            }], ariaLabel: [{
                type: Input
            }], isMainNavigation: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], tabClose: [{
                type: Output
            }], tabActivate: [{
                type: Output
            }], tabClick: [{
                type: Output
            }], _tabs: [{
                type: ContentChildren,
                args: [forwardRef(() => EuiTabV2Component), { descendants: false }]
            }], euiTabsHeadersContainer: [{
                type: ViewChild,
                args: ['euiTabsHeadersContainer']
            }], euiTabsHeaders: [{
                type: ViewChild,
                args: ['euiTabsHeaders']
            }], euiTabListItems: [{
                type: ViewChildren,
                args: ['euiTabListItems']
            }] } });

class EuiTabsV2RightContentComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabsV2RightContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: EuiTabsV2RightContentComponent, isStandalone: true, selector: "eui-tabs-v2-right-content", ngImport: i0, template: '<ng-content/>', isInline: true, styles: [":host{display:flex;margin-left:auto}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiTabsV2RightContentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-tabs-v2-right-content', template: '<ng-content/>', styles: [":host{display:flex;margin-left:auto}\n"] }]
        }] });

const EUI_TABS = [
    EuiTabsV2Component,
    EuiTabsV2RightContentComponent,
    EuiTabV2BodyComponent,
    EuiTabV2HeaderComponent,
    EuiTabV2Component,
];

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

export { EUI_TABS, EuiTabV2BodyComponent, EuiTabV2Component, EuiTabV2HeaderComponent, EuiTabsV2Component, EuiTabsV2RightContentComponent };
//# sourceMappingURL=eui-components-eui-tabs-v2.mjs.map
