import * as i0 from '@angular/core';
import { inject, ViewContainerRef, ViewChild, Component, booleanAttribute, Input, forwardRef, ContentChild, ChangeDetectionStrategy, EventEmitter, PLATFORM_ID, ChangeDetectorRef, DOCUMENT, ViewChildren, ContentChildren, Output, HostBinding } from '@angular/core';
import { AsyncPipe, isPlatformBrowser, 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 { EUI_ICON } from '@eui/components/eui-icon';
import { EUI_BUTTON } from '@eui/components/eui-button';
import * as i2 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';

/**
 * @description
 * Custom header content component for individual tabs within eui-tabs.
 * Allows projection of custom content into the tab header area using CDK Portal.
 * Enables rich tab headers with icons, badges, or custom layouts beyond simple text labels.
 * Must be used as a child of eui-tab component to provide custom header content.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-tab>
 *   <eui-tab-header>
 *     <eui-tab-header-label>Settings</eui-tab-header-label>
 *   </eui-tab-header>
 *   <eui-tab-body>Content</eui-tab-body>
 * </eui-tab>
 * ```
 *
 * ### With Icons and Badges
 * ```html
 * <eui-tab>
 *   <eui-tab-header>
 *     <eui-tab-header-left-content>
 *       <eui-icon-svg icon="eui-notification" size="s" />
 *     </eui-tab-header-left-content>
 *     <eui-tab-header-label>Notifications</eui-tab-header-label>
 *     <eui-tab-header-sub-label>Unread messages</eui-tab-header-sub-label>
 *     <eui-tab-header-right-content>
 *       <eui-badge euiDanger>5</eui-badge>
 *     </eui-tab-header-right-content>
 *   </eui-tab-header>
 *   <eui-tab-body>Content</eui-tab-body>
 * </eui-tab>
 * ```
 *
 * ### Complex Layout
 * ```html
 * <eui-tab>
 *   <eui-tab-header>
 *     <eui-tab-header-left-content>
 *       <eui-avatar [imageUrl]="user.avatar" euiSizeXs />
 *     </eui-tab-header-left-content>
 *     <div>
 *       <eui-tab-header-label>{{ user.name }}</eui-tab-header-label>
 *       <eui-tab-header-sub-label>{{ user.role }}</eui-tab-header-sub-label>
 *     </div>
 *   </eui-tab-header>
 *   <eui-tab-body>Content</eui-tab-body>
 * </eui-tab>
 * ```
 *
 * ### Accessibility
 * - Header content contributes to tab's accessible name
 * - Icons should have appropriate aria-labels
 * - Badges should convey meaningful information
 * - Maintain logical reading order for screen readers
 *
 * ### Notes
 * - Uses CDK Portal for efficient rendering
 * - Supports structured content via sub-components
 * - Left/right content areas for flexible layouts
 * - Label and sub-label for hierarchical text
 * - Replaces simple label attribute when used
 */
class EuiTabHeaderComponent {
    constructor() {
        this.viewContainerRef = inject(ViewContainerRef);
    }
    ngAfterViewInit() {
        this.templatePortal = new TemplatePortal(this.templateRef, this.viewContainerRef);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiTabHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiTabHeaderComponent, isStandalone: true, selector: "eui-tab-header", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true }], ngImport: i0, template: "<ng-template #templateRef>\n    <div class=\"eui-tab-header-wrapper\">\n        <ng-content select=\"eui-tab-header-left-content\"/>\n        <div class=\"eui-tab-header-label-wrapper\">\n            <ng-content select=\"eui-tab-header-label\"/>\n            <ng-content select=\"eui-tab-header-sub-label\"/>\n        </div>\n        <ng-content/>\n        <ng-content select=\"eui-tab-header-right-content\"/>\n    </div>\n</ng-template>\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiTabHeaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-tab-header', template: "<ng-template #templateRef>\n    <div class=\"eui-tab-header-wrapper\">\n        <ng-content select=\"eui-tab-header-left-content\"/>\n        <div class=\"eui-tab-header-label-wrapper\">\n            <ng-content select=\"eui-tab-header-label\"/>\n            <ng-content select=\"eui-tab-header-sub-label\"/>\n        </div>\n        <ng-content/>\n        <ng-content select=\"eui-tab-header-right-content\"/>\n    </div>\n</ng-template>\n" }]
        }], propDecorators: { templateRef: [{
                type: ViewChild,
                args: ['templateRef']
            }] } });

/**
 * @description
 * Content container component for individual tab panels within eui-tabs.
 * Manages the display of tab content using CDK Portal for efficient rendering.
 * Provides optional padding control for custom content layouts.
 * Automatically handles content visibility based on active tab selection.
 * Must be used as a child of eui-tab component to define the tab's content area.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-tab label="Content">
 *   <eui-tab-body>
 *     <h2>Tab Content</h2>
 *     <p>Your content here</p>
 *   </eui-tab-body>
 * </eui-tab>
 * ```
 *
 * ### Without Padding
 * ```html
 * <eui-tab label="Full Width">
 *   <eui-tab-body [hasNoContentPadding]="true">
 *     <div class="custom-layout">
 *       Full-width content without default padding
 *     </div>
 *   </eui-tab-body>
 * </eui-tab>
 * ```
 *
 * ### With Complex Content
 * ```html
 * <eui-tab label="Dashboard">
 *   <eui-tab-body>
 *     <eui-card>
 *       <eui-card-header>Statistics</eui-card-header>
 *       <eui-card-body>
 *         <!-- Dashboard widgets -->
 *       </eui-card-body>
 *     </eui-card>
 *   </eui-tab-body>
 * </eui-tab>
 * ```
 *
 * ### Accessibility
 * - Content has role="tabpanel" automatically applied
 * - Tabindex managed automatically for keyboard navigation
 * - Hidden content not rendered in DOM for performance
 * - Focus management for interactive elements within panel
 *
 * ### Notes
 * - Uses CDK Portal for efficient content rendering
 * - Only active tab content is displayed
 * - hasNoContentPadding useful for full-width layouts
 * - Supports any HTML content or Angular components
 * - Automatic focus management for nested interactive elements
 */
class EuiTabBodyComponent {
    constructor() {
        /**
         * Removes default padding from the tab content area.
         * Useful for full-width content, custom layouts, or when content provides its own spacing.
         * @default false
         */
        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: "21.2.16", ngImport: i0, type: EuiTabBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.16", type: EuiTabBodyComponent, isStandalone: true, selector: "eui-tab-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__body\" [tabindex]=\"tabIndex$ | async\" [class.eui-tab__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: "21.2.16", ngImport: i0, type: EuiTabBodyComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-tab-body', imports: [
                        AsyncPipe,
                    ], template: "<ng-template #templateRef>\n    <div class=\"eui-tab__body\" [tabindex]=\"tabIndex$ | async\" [class.eui-tab__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']
            }] } });

/**
 * @description
 * Individual tab component representing a single tab within eui-tabs navigation.
 * Manages tab state including active, disabled, visible, and closable states.
 * Supports custom header and body content through content projection.
 * Integrates with BaseStatesDirective for theming variants (primary, secondary, success, warning, danger).
 * Must be used as a direct child of eui-tabs component to participate in tab navigation.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-tabs>
 *   <eui-tab label="Overview">
 *     <eui-tab-body>
 *       <p>Overview content</p>
 *     </eui-tab-body>
 *   </eui-tab>
 *
 *   <eui-tab label="Details" [isDisabled]="true">
 *     <eui-tab-body>
 *       <p>Details content</p>
 *     </eui-tab-body>
 *   </eui-tab>
 * </eui-tabs>
 * ```
 *
 * ### With Custom Header
 * ```html
 * <eui-tab [isClosable]="true" euiPrimary>
 *   <eui-tab-header>
 *     <eui-tab-header-left-content>
 *       <eui-icon-svg icon="eui-home" size="s" />
 *     </eui-tab-header-left-content>
 *     <eui-tab-header-label>Home</eui-tab-header-label>
 *     <eui-tab-header-right-content>
 *       <eui-badge euiInfo>3</eui-badge>
 *     </eui-tab-header-right-content>
 *   </eui-tab-header>
 *   <eui-tab-body>Content</eui-tab-body>
 * </eui-tab>
 * ```
 *
 * ### Accessibility
 * - Tab has role="tab" automatically applied
 * - Associated panel has role="tabpanel"
 * - Disabled state prevents keyboard and mouse interaction
 * - Tooltip provides additional context on hover
 *
 * ### Notes
 * - Use isClosable for dismissible tabs
 * - isVisible controls display without removing from DOM
 * - Color variants via BaseStatesDirective (euiPrimary, euiSuccess, etc.)
 * - Custom handlers via isHandleCloseOnClose and isHandleActivateTab
 * - URL property enables deep linking and routing integration
 */
class EuiTabComponent {
    constructor() {
        /**
         * Data attribute used for end-to-end testing identification.
         * @default 'eui-tab'
         */
        this.e2eAttr = 'eui-tab';
        /**
         * Enables a close button on the tab header for dismissible tabs.
         * Allows users to remove or hide the tab from the tab bar.
         * @default false
         */
        this.isClosable = false;
        /**
         * Disables the tab, preventing user interaction and selection.
         * Applies disabled styling and blocks tab activation.
         * @default false
         */
        this.isDisabled = false;
        /**
         * Controls the visibility of the tab in the tab bar.
         * When false, hides the tab from display without removing it from the DOM.
         * @default true
         */
        this.isVisible = true;
        /**
         * Enables automatic tab closure when the close button is clicked.
         * When false, close button click must be handled externally.
         * @default false
         */
        this.isHandleCloseOnClose = false;
        /**
         * Enables automatic tab activation when the tab is clicked.
         * When false, tab activation must be handled externally.
         * @default false
         */
        this.isHandleActivateTab = false;
        this.euiVariant = 'euiPrimary';
        this.isActive = false;
        this.isVisible$ = new BehaviorSubject(this.isVisible);
        this.isClosable$ = new BehaviorSubject(this.isClosable);
        this.isDisabled$ = new BehaviorSubject(this.isDisabled);
        this.baseStatesDirective = inject(BaseStatesDirective);
        this.euiVariant$ = new BehaviorSubject(this.baseStatesDirective.euiVariant);
    }
    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: "21.2.16", ngImport: i0, type: EuiTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.16", type: EuiTabComponent, isStandalone: true, selector: "eui-tab", inputs: { id: "id", url: "url", e2eAttr: "e2eAttr", tooltip: "tooltip", isClosable: ["isClosable", "isClosable", booleanAttribute], isDisabled: ["isDisabled", "isDisabled", booleanAttribute], isVisible: ["isVisible", "isVisible", booleanAttribute], isHandleCloseOnClose: ["isHandleCloseOnClose", "isHandleCloseOnClose", booleanAttribute], isHandleActivateTab: ["isHandleActivateTab", "isHandleActivateTab", booleanAttribute], euiVariant: "euiVariant" }, queries: [{ propertyName: "templateHeader", first: true, predicate: i0.forwardRef(() => EuiTabHeaderComponent), descendants: true }, { propertyName: "templateBody", first: true, predicate: i0.forwardRef(() => EuiTabBodyComponent), descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiInfo", "euiInfo", "euiSuccess", "euiSuccess", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiVariant", "euiVariant"] }], ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiTabComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'eui-tab',
                    template: '<ng-content/>',
                    hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: ['euiPrimary', 'euiSecondary', 'euiInfo', 'euiSuccess', 'euiWarning', 'euiDanger', 'euiVariant'],
                        },
                    ],
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }], propDecorators: { id: [{
                type: Input
            }], url: [{
                type: Input
            }], e2eAttr: [{
                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(() => EuiTabHeaderComponent)]
            }], templateBody: [{
                type: ContentChild,
                args: [forwardRef(() => EuiTabBodyComponent)]
            }], euiVariant: [{
                type: Input
            }] } });

/**
 * @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.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-tabs [activeTabIndex]="0" (activeTabChange)="onTabChange($event)">
 *   <eui-tab label="Overview">
 *     <eui-tab-body>
 *       <p>Overview content here</p>
 *     </eui-tab-body>
 *   </eui-tab>
 *   <eui-tab label="Details">
 *     <eui-tab-body>
 *       <p>Details content here</p>
 *     </eui-tab-body>
 *   </eui-tab>
 * </eui-tabs>
 * ```
 *
 * ### With Custom Headers
 * ```html
 * <eui-tabs>
 *   <eui-tab>
 *     <eui-tab-header>
 *       <eui-tab-header-left-content>
 *         <eui-icon svgName="home" />
 *       </eui-tab-header-left-content>
 *       <eui-tab-header-label>Home</eui-tab-header-label>
 *     </eui-tab-header>
 *     <eui-tab-body>Content</eui-tab-body>
 *   </eui-tab>
 * </eui-tabs>
 * ```
 *
 * ### Accessibility
 * - Use role="tablist" on container (automatically applied)
 * - Each tab has role="tab" and associated panel has role="tabpanel"
 * - Keyboard navigation: Arrow keys to switch tabs, Tab to move focus
 * - Provide meaningful aria-label for the tabs component
 *
 * ### Notes
 * - Only one tab content is visible at a time
 * - Pagination controls appear automatically when tabs overflow
 * - Use isMainNavigation="true" for primary navigation styling
 * - Use isFlat="true" for flat visual style without elevation
 */
class EuiTabsComponent {
    constructor() {
        this.e2eAttr = 'eui-tabs';
        /**
         * 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;
        this.isFlat = 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.platformId = inject(PLATFORM_ID);
        this.stepMove = 400;
        this.scrollOffset = 40;
        this.scrollingCount = 0;
        this.cd = inject(ChangeDetectorRef);
        this.builder = inject(AnimationBuilder);
        this.euiAppShellService = inject(EuiAppShellService);
        this.document = inject(DOCUMENT);
    }
    get elementClass() {
        return [
            'eui-tabs',
            this.isMainNavigation ? 'eui-tabs--main-navigation' : '',
            this.isFlat ? 'eui-tabs--flat' : '',
        ].join(' ').trim();
    }
    /**
     * Width of the tabs headers container
     */
    get euiTabsHeadersContainerWidth() {
        return (this.euiTabsHeadersContainer?.nativeElement.clientWidth - this.euiTabsRightContentWidth);
    }
    /**
     * Width of the tabs headers
     */
    get euiTabsHeadersWidth() {
        return this.euiTabsHeaders?.nativeElement.clientWidth;
    }
    /**
     * Width of the tabs right content
     */
    get euiTabsRightContentWidth() {
        return this.euiTabsRightContent?.nativeElement?.offsetWidth || 0;
    }
    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) {
        if (isPlatformBrowser(this.platformId)) {
            const tabbody = this.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.euiTabsHeadersWidth > this.euiTabsHeadersContainerWidth;
            if (!this.scrolling) {
                this.scrollingCount = 0;
                this.setScrollTo(0, false);
                this.navigationLeftButtonDisabled = true;
                this.navigationRightButtonDisabled = true;
            }
            else {
                const maxScrollableWidth = this.euiTabsHeadersWidth - this.euiTabsHeadersContainerWidth;
                if (maxScrollableWidth <= Math.abs(this.currentOffset) + this.scrollOffset && this.scrollingCount !== 0) {
                    const scrollTo = -maxScrollableWidth - this.scrollOffset;
                    this.setScrollTo(scrollTo);
                }
                else {
                    this.navigationRightButtonDisabled = Math.abs(this.currentOffset) >= maxScrollableWidth;
                    this.navigationLeftButtonDisabled = this.currentOffset >= 0;
                }
                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: "21.2.16", ngImport: i0, type: EuiTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: EuiTabsComponent, isStandalone: true, selector: "eui-tabs", inputs: { e2eAttr: "e2eAttr", activeTabIndex: "activeTabIndex", ariaLabel: "ariaLabel", isMainNavigation: ["isMainNavigation", "isMainNavigation", booleanAttribute], isFlat: ["isFlat", "isFlat", booleanAttribute] }, outputs: { tabClose: "tabClose", tabActivate: "tabActivate", tabClick: "tabClick" }, host: { properties: { "class": "this.elementClass", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "_tabs", predicate: i0.forwardRef(() => EuiTabComponent) }], viewQueries: [{ propertyName: "euiTabsHeadersContainer", first: true, predicate: ["euiTabsHeadersContainer"], descendants: true }, { propertyName: "euiTabsHeaders", first: true, predicate: ["euiTabsHeaders"], descendants: true }, { propertyName: "euiTabsRightContent", first: true, predicate: ["euiTabsRightContent"], descendants: true }, { propertyName: "euiTabListItems", predicate: ["euiTabListItems"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #euiTabsHeadersContainer class=\"eui-tabs-wrapper\" [class.eui-tabs-wrapper--scrolling]=\"scrolling\">\n    <div class=\"eui-tabs-navigation\">\n        <div class=\"eui-tabs-navigation__left-item\">\n            <eui-icon-button\n                (click)=\"goToLeft()\"\n                [euiDisabled]=\"navigationLeftButtonDisabled\"\n                icon=\"eui-chevron-left\"\n                ariaLabel=\"Scroll left\" />\n        </div>\n\n        <ul #euiTabsHeaders class=\"eui-tab-items\" [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-item\"\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-item--' + (tab.euiVariant$ | async) : ''\"\n                        [class.eui-tab-item--active]=\"i === activeTabIndex\"\n                        [class.eui-tab-item--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=\"eui-close\"\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__right-item\">\n            <eui-icon-button\n                (click)=\"goToRight()\"\n                [euiDisabled]=\"navigationRightButtonDisabled\"\n                icon=\"eui-chevron-right\"\n                ariaLabel=\"Scroll right\" />\n        </div>\n    </div>\n    <div #euiTabsRightContent class=\"eui-tabs-right-content-wrapper\">\n        <ng-content select=\"eui-tabs-right-content\"></ng-content>\n    </div>\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-21 :host.eui-tabs{--_label-font: var(--eui-f-m-semi-bold);--_sublabel-font: var(--eui-f-s)}.eui-21 :host.eui-tabs{display:flex;flex-direction:column;width:100%}.eui-21 :host.eui-tabs .eui-tab-item{--_color: var(--eui-c-text-light);--_border-color: transparent;--_border-color-hover: var(--eui-c-secondary-border-light)}.eui-21 :host.eui-tabs .eui-tab-item--active{--_color: var(--eui-c-active);--_border-color: var(--eui-c-active);--_border-color-hover: var(--eui-c-active)}.eui-21 :host.eui-tabs .eui-tab-item--primary{--_color: var(--eui-c-primary);--_border-color: var(--eui-c-primary)}.eui-21 :host.eui-tabs .eui-tab-item--secondary{--_color: var(--eui-c-secondary)}.eui-21 :host.eui-tabs .eui-tab-item--info{--_color: var(--eui-c-info)}.eui-21 :host.eui-tabs .eui-tab-item--success{--_color: var(--eui-c-success)}.eui-21 :host.eui-tabs .eui-tab-item--warning{--_color: var(--eui-c-warning)}.eui-21 :host.eui-tabs .eui-tab-item--danger{--_color: var(--eui-c-danger)}.eui-21 :host.eui-tabs .eui-tab-item--disabled{--_color: var(--eui-c-disabled);--_border-color-hover: transparent}.eui-21 :host.eui-tabs .eui-tabs-wrapper{align-items:center;border-bottom:1px solid var(--eui-c-divider);display:flex;overflow:hidden;position:relative}.eui-21 :host.eui-tabs .eui-tabs-wrapper .eui-tabs-right-content-wrapper{display:flex;margin-left:var(--eui-s-m)}.eui-21 :host.eui-tabs .eui-tab-items{display:flex;height:100%;list-style:none;list-style-type:none;margin:0;padding:0}.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item{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-21 :host.eui-tabs .eui-tab-items .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item ::ng-deep .eui-tab-header-wrapper{display:flex;align-items:center;gap:var(--eui-s-s);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item ::ng-deep .eui-tab-header-wrapper ::ng-deep .eui-tab-header-label-wrapper{display:flex;flex-direction:column}.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item ::ng-deep .eui-tab-header-wrapper ::ng-deep .eui-tab-header-label-wrapper ::ng-deep .eui-tab-header-label{display:block;font-weight:700;line-height:var(--eui-s-l);color:var(--_color);font:var(--_label-font)}.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item ::ng-deep .eui-tab-header-wrapper ::ng-deep .eui-tab-header-label-wrapper ::ng-deep .eui-tab-header-sub-label{font-weight:400;color:var(--_color);font:var(--_sublabel-font)}.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item ::ng-deep .eui-tab-header-left-content,.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item ::ng-deep .eui-tab-header-right-content{display:flex}.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item--active{border-color:var(--_border-color)}.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item--disabled{cursor:not-allowed;pointer-events:none}.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item:hover:not(.eui-tab-header--active){background:var(--eui-c-hover);border-color:var(--_border-color-hover)}.eui-21 :host.eui-tabs--main-navigation .eui-tab-items{width:100%;justify-content:space-between}.eui-21 :host.eui-tabs--main-navigation .eui-tab-items .eui-tab-item,.eui-21 :host.eui-tabs--main-navigation .eui-tab-items .eui-tab-header{display:flex;width:100%}.eui-21 :host.eui-tabs--main-navigation .eui-tab-items .eui-tab-item ::ng-deep .eui-tab-header-wrapper,.eui-21 :host.eui-tabs--main-navigation .eui-tab-items .eui-tab-header ::ng-deep .eui-tab-header-wrapper{width:100%;display:flex;justify-content:center}.eui-21 :host.eui-tabs--flat .eui-tabs-wrapper{border:none}.eui-21 :host.eui-tabs--flat .eui-tab-items{gap:var(--eui-s-s)}.eui-21 :host.eui-tabs--flat .eui-tab-items .eui-tab-item{border:1px solid transparent;padding:var(--eui-s-2xs);border-radius:var(--eui-br-l)}.eui-21 :host.eui-tabs--flat .eui-tab-items .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-c-hover);border-color:var(--_border-color-hover)}.eui-21 :host.eui-tabs--flat .eui-tab-items .eui-tab-item--active{background-color:var(--eui-c-white);border:1px solid var(--eui-c-secondary-border-lighter)}.eui-21 :host.eui-tabs .eui-tabs-navigation{display:flex;overflow:hidden;position:relative;width:100%}.eui-21 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__left-item,.eui-21 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__right-item{align-self:center;background-color:var(--eui-c-surface-page);display:none;height:100%;position:absolute;z-index:1}.eui-21 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__left-item{left:0}.eui-21 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__right-item{right:0}.eui-21 :host.eui-tabs .eui-tabs-wrapper.eui-tabs-wrapper--scrolling .eui-tab-items{padding-left:var(--eui-s-5xl)}.eui-21 :host.eui-tabs .eui-tabs-wrapper.eui-tabs-wrapper--scrolling .eui-tab-items .eui-tab-item{min-width:unset;overflow:unset}.eui-21 :host.eui-tabs .eui-tabs-wrapper.eui-tabs-wrapper--scrolling .eui-tabs-navigation__left-item,.eui-21 :host.eui-tabs .eui-tabs-wrapper.eui-tabs-wrapper--scrolling .eui-tabs-navigation__right-item{display:flex}.eui-21 :host.eui-tabs .eui-tab-body-container ::ng-deep .eui-tab__body{padding:var(--eui-s-s)}.eui-21 :host.eui-tabs .eui-tab-body-container ::ng-deep .eui-tab__body:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eui-tabs .eui-tab-body-container ::ng-deep .eui-tab__body.eui-tab__body--no-padding{padding:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i2.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasOverflowHover", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiTabsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-tabs', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        NgClass,
                        AsyncPipe,
                        PortalModule,
                        ...EUI_ICON,
                        ...EUI_BUTTON,
                        ...EUI_ICON_BUTTON,
                    ], template: "<div #euiTabsHeadersContainer class=\"eui-tabs-wrapper\" [class.eui-tabs-wrapper--scrolling]=\"scrolling\">\n    <div class=\"eui-tabs-navigation\">\n        <div class=\"eui-tabs-navigation__left-item\">\n            <eui-icon-button\n                (click)=\"goToLeft()\"\n                [euiDisabled]=\"navigationLeftButtonDisabled\"\n                icon=\"eui-chevron-left\"\n                ariaLabel=\"Scroll left\" />\n        </div>\n\n        <ul #euiTabsHeaders class=\"eui-tab-items\" [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-item\"\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-item--' + (tab.euiVariant$ | async) : ''\"\n                        [class.eui-tab-item--active]=\"i === activeTabIndex\"\n                        [class.eui-tab-item--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=\"eui-close\"\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__right-item\">\n            <eui-icon-button\n                (click)=\"goToRight()\"\n                [euiDisabled]=\"navigationRightButtonDisabled\"\n                icon=\"eui-chevron-right\"\n                ariaLabel=\"Scroll right\" />\n        </div>\n    </div>\n    <div #euiTabsRightContent class=\"eui-tabs-right-content-wrapper\">\n        <ng-content select=\"eui-tabs-right-content\"></ng-content>\n    </div>\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-21 :host.eui-tabs{--_label-font: var(--eui-f-m-semi-bold);--_sublabel-font: var(--eui-f-s)}.eui-21 :host.eui-tabs{display:flex;flex-direction:column;width:100%}.eui-21 :host.eui-tabs .eui-tab-item{--_color: var(--eui-c-text-light);--_border-color: transparent;--_border-color-hover: var(--eui-c-secondary-border-light)}.eui-21 :host.eui-tabs .eui-tab-item--active{--_color: var(--eui-c-active);--_border-color: var(--eui-c-active);--_border-color-hover: var(--eui-c-active)}.eui-21 :host.eui-tabs .eui-tab-item--primary{--_color: var(--eui-c-primary);--_border-color: var(--eui-c-primary)}.eui-21 :host.eui-tabs .eui-tab-item--secondary{--_color: var(--eui-c-secondary)}.eui-21 :host.eui-tabs .eui-tab-item--info{--_color: var(--eui-c-info)}.eui-21 :host.eui-tabs .eui-tab-item--success{--_color: var(--eui-c-success)}.eui-21 :host.eui-tabs .eui-tab-item--warning{--_color: var(--eui-c-warning)}.eui-21 :host.eui-tabs .eui-tab-item--danger{--_color: var(--eui-c-danger)}.eui-21 :host.eui-tabs .eui-tab-item--disabled{--_color: var(--eui-c-disabled);--_border-color-hover: transparent}.eui-21 :host.eui-tabs .eui-tabs-wrapper{align-items:center;border-bottom:1px solid var(--eui-c-divider);display:flex;overflow:hidden;position:relative}.eui-21 :host.eui-tabs .eui-tabs-wrapper .eui-tabs-right-content-wrapper{display:flex;margin-left:var(--eui-s-m)}.eui-21 :host.eui-tabs .eui-tab-items{display:flex;height:100%;list-style:none;list-style-type:none;margin:0;padding:0}.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item{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-21 :host.eui-tabs .eui-tab-items .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item ::ng-deep .eui-tab-header-wrapper{display:flex;align-items:center;gap:var(--eui-s-s);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item ::ng-deep .eui-tab-header-wrapper ::ng-deep .eui-tab-header-label-wrapper{display:flex;flex-direction:column}.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item ::ng-deep .eui-tab-header-wrapper ::ng-deep .eui-tab-header-label-wrapper ::ng-deep .eui-tab-header-label{display:block;font-weight:700;line-height:var(--eui-s-l);color:var(--_color);font:var(--_label-font)}.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item ::ng-deep .eui-tab-header-wrapper ::ng-deep .eui-tab-header-label-wrapper ::ng-deep .eui-tab-header-sub-label{font-weight:400;color:var(--_color);font:var(--_sublabel-font)}.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item ::ng-deep .eui-tab-header-left-content,.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item ::ng-deep .eui-tab-header-right-content{display:flex}.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item--active{border-color:var(--_border-color)}.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item--disabled{cursor:not-allowed;pointer-events:none}.eui-21 :host.eui-tabs .eui-tab-items .eui-tab-item:hover:not(.eui-tab-header--active){background:var(--eui-c-hover);border-color:var(--_border-color-hover)}.eui-21 :host.eui-tabs--main-navigation .eui-tab-items{width:100%;justify-content:space-between}.eui-21 :host.eui-tabs--main-navigation .eui-tab-items .eui-tab-item,.eui-21 :host.eui-tabs--main-navigation .eui-tab-items .eui-tab-header{display:flex;width:100%}.eui-21 :host.eui-tabs--main-navigation .eui-tab-items .eui-tab-item ::ng-deep .eui-tab-header-wrapper,.eui-21 :host.eui-tabs--main-navigation .eui-tab-items .eui-tab-header ::ng-deep .eui-tab-header-wrapper{width:100%;display:flex;justify-content:center}.eui-21 :host.eui-tabs--flat .eui-tabs-wrapper{border:none}.eui-21 :host.eui-tabs--flat .eui-tab-items{gap:var(--eui-s-s)}.eui-21 :host.eui-tabs--flat .eui-tab-items .eui-tab-item{border:1px solid transparent;padding:var(--eui-s-2xs);border-radius:var(--eui-br-l)}.eui-21 :host.eui-tabs--flat .eui-tab-items .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-c-hover);border-color:var(--_border-color-hover)}.eui-21 :host.eui-tabs--flat .eui-tab-items .eui-tab-item--active{background-color:var(--eui-c-white);border:1px solid var(--eui-c-secondary-border-lighter)}.eui-21 :host.eui-tabs .eui-tabs-navigation{display:flex;overflow:hidden;position:relative;width:100%}.eui-21 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__left-item,.eui-21 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__right-item{align-self:center;background-color:var(--eui-c-surface-page);display:none;height:100%;position:absolute;z-index:1}.eui-21 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__left-item{left:0}.eui-21 :host.eui-tabs .eui-tabs-navigation .eui-tabs-navigation__right-item{right:0}.eui-21 :host.eui-tabs .eui-tabs-wrapper.eui-tabs-wrapper--scrolling .eui-tab-items{padding-left:var(--eui-s-5xl)}.eui-21 :host.eui-tabs .eui-tabs-wrapper.eui-tabs-wrapper--scrolling .eui-tab-items .eui-tab-item{min-width:unset;overflow:unset}.eui-21 :host.eui-tabs .eui-tabs-wrapper.eui-tabs-wrapper--scrolling .eui-tabs-navigation__left-item,.eui-21 :host.eui-tabs .eui-tabs-wrapper.eui-tabs-wrapper--scrolling .eui-tabs-navigation__right-item{display:flex}.eui-21 :host.eui-tabs .eui-tab-body-container ::ng-deep .eui-tab__body{padding:var(--eui-s-s)}.eui-21 :host.eui-tabs .eui-tab-body-container ::ng-deep .eui-tab__body:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eui-tabs .eui-tab-body-container ::ng-deep .eui-tab__body.eui-tab__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 }]
            }], isFlat: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], tabClose: [{
                type: Output
            }], tabActivate: [{
                type: Output
            }], tabClick: [{
                type: Output
            }], _tabs: [{
                type: ContentChildren,
                args: [forwardRef(() => EuiTabComponent), { descendants: false }]
            }], euiTabsHeadersContainer: [{
                type: ViewChild,
                args: ['euiTabsHeadersContainer']
            }], euiTabsHeaders: [{
                type: ViewChild,
                args: ['euiTabsHeaders']
            }], euiTabsRightContent: [{
                type: ViewChild,
                args: ['euiTabsRightContent']
            }], euiTabListItems: [{
                type: ViewChildren,
                args: ['euiTabListItems']
            }] } });

/**
 * @description
 * Content projection component for displaying custom content aligned to the right side of the tabs header.
 * Automatically positions content using flexbox with left margin auto for right alignment.
 * Typically contains action buttons, filters, or supplementary controls related to tab content.
 * Must be used as a direct child of eui-tabs component to maintain proper layout structure.
 *
 * @usageNotes
 * ### Basic Usage with Button
 * ```html
 * <eui-tabs>
 *   <eui-tab label="Tab 1">
 *     <eui-tab-body>Content 1</eui-tab-body>
 *   </eui-tab>
 *   <eui-tab label="Tab 2">
 *     <eui-tab-body>Content 2</eui-tab-body>
 *   </eui-tab>
 *
 *   <eui-tabs-right-content>
 *     <button euiButton euiPrimary (click)="addTab()">
 *       Add Tab
 *     </button>
 *   </eui-tabs-right-content>
 * </eui-tabs>
 * ```
 *
 * ### With Multiple Controls
 * ```html
 * <eui-tabs>
 *   <!-- tabs here -->
 *
 *   <eui-tabs-right-content>
 *     <eui-input-text placeholder="Filter..." />
 *     <button euiButton euiSecondary>
 *       <eui-icon-svg icon="eui-settings" />
 *     </button>
 *   </eui-tabs-right-content>
 * </eui-tabs>
 * ```
 *
 * ### Accessibility
 * - Controls should be keyboard accessible
 * - Buttons need descriptive labels or aria-labels
 * - Maintain logical tab order
 * - Interactive elements should have visible focus indicators
 *
 * ### Notes
 * - Automatically aligned to the right of tab headers
 * - Does not interfere with tab navigation controls
 * - Useful for global actions affecting all tabs
 * - Supports any content (buttons, inputs, dropdowns)
 * - Positioned at the same level as tab headers
 */
class EuiTabsRightContentComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiTabsRightContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiTabsRightContentComponent, isStandalone: true, selector: "eui-tabs-right-content", ngImport: i0, template: '<ng-content/>', isInline: true, styles: [":host{display:flex;margin-left:auto}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiTabsRightContentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-tabs-right-content', template: '<ng-content/>', styles: [":host{display:flex;margin-left:auto}\n"] }]
        }] });

/**
 * @description
 * Primary label component for displaying the main text content within custom tab headers.
 * Provides consistent styling for the principal tab title or heading.
 * Serves as the primary identifier for the tab content when using custom header layouts.
 * Must be used within eui-tab-header to provide structured label content.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-tab>
 *   <eui-tab-header>
 *     <eui-tab-header-label>Dashboard</eui-tab-header-label>
 *   </eui-tab-header>
 *   <eui-tab-body>Content</eui-tab-body>
 * </eui-tab>
 * ```
 *
 * ### With Other Header Elements
 * ```html
 * <eui-tab-header>
 *   <eui-tab-header-left-content>
 *     <eui-icon-svg icon="eui-chart" />
 *   </eui-tab-header-left-content>
 *   <eui-tab-header-label>Analytics</eui-tab-header-label>
 *   <eui-tab-header-sub-label>Last 30 days</eui-tab-header-sub-label>
 * </eui-tab-header>
 * ```
 *
 * ### Accessibility
 * - Label text is the primary accessible name for the tab
 * - Should be concise and descriptive
 * - Avoid redundant text with icons
 *
 * ### Notes
 * - Applies consistent typography and spacing
 * - Primary text identifier for the tab
 * - Works with sub-label for hierarchical information
 */
class EuiTabHeaderLabelComponent {
    constructor() {
        this.string = 'eui-tab-header-label';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiTabHeaderLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiTabHeaderLabelComponent, isStandalone: true, selector: "eui-tab-header-label", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiTabHeaderLabelComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'eui-tab-header-label',
                    template: '<ng-content />',
                }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Sub-label component for displaying secondary descriptive text within custom tab headers.
 * Provides consistent styling for supplementary information below or alongside the main tab label.
 * Typically contains additional context, counts, or status information related to the tab.
 * Must be used within eui-tab-header to provide structured sub-label content.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-tab>
 *   <eui-tab-header>
 *     <eui-tab-header-label>Messages</eui-tab-header-label>
 *     <eui-tab-header-sub-label>12 unread</eui-tab-header-sub-label>
 *   </eui-tab-header>
 *   <eui-tab-body>Content</eui-tab-body>
 * </eui-tab>
 * ```
 *
 * ### With Dynamic Content
 * ```html
 * <eui-tab-header>
 *   <eui-tab-header-label>Tasks</eui-tab-header-label>
 *   <eui-tab-header-sub-label>
 *     {{ completedTasks }} of {{ totalTasks }} completed
 *   </eui-tab-header-sub-label>
 * </eui-tab-header>
 * ```
 *
 * ### Accessibility
 * - Sub-label provides additional context to screen readers
 * - Should complement, not duplicate, the main label
 * - Keep text concise for better readability
 *
 * ### Notes
 * - Applies secondary text styling (smaller, lighter)
 * - Useful for counts, status, or metadata
 * - Positioned below or beside main label
 * - Optional - tabs work without sub-labels
 */
class EuiTabHeaderSublabelComponent {
    constructor() {
        this.string = 'eui-tab-header-sub-label';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiTabHeaderSublabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiTabHeaderSublabelComponent, isStandalone: true, selector: "eui-tab-header-sub-label", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiTabHeaderSublabelComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'eui-tab-header-sub-label',
                    template: '<ng-content />',
                }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Content projection component for displaying custom content aligned to the left side of individual tab headers.
 * Enables placement of icons, indicators, or leading visual elements within the tab header area.
 * Automatically applies left-aligned styling for consistent positioning.
 * Must be used within eui-tab-header to add left-aligned supplementary content to tabs.
 *
 * @usageNotes
 * ### Basic Usage with Icon
 * ```html
 * <eui-tab>
 *   <eui-tab-header>
 *     <eui-tab-header-left-content>
 *       <eui-icon-svg icon="eui-home" size="s" />
 *     </eui-tab-header-left-content>
 *     <eui-tab-header-label>Home</eui-tab-header-label>
 *   </eui-tab-header>
 *   <eui-tab-body>Content</eui-tab-body>
 * </eui-tab>
 * ```
 *
 * ### With Avatar
 * ```html
 * <eui-tab-header>
 *   <eui-tab-header-left-content>
 *     <eui-avatar [imageUrl]="user.avatar" euiSizeXs />
 *   </eui-tab-header-left-content>
 *   <eui-tab-header-label>{{ user.name }}</eui-tab-header-label>
 * </eui-tab-header>
 * ```
 *
 * ### Accessibility
 * - Icons should have aria-label or aria-hidden
 * - Decorative content should use aria-hidden="true"
 * - Meaningful icons need descriptive labels
 *
 * ### Notes
 * - Positioned before the label text
 * - Commonly used for icons or avatars
 * - Maintains consistent spacing
 * - Supports any content (icons, badges, custom elements)
 */
class EuiTabHeaderLeftContentComponent {
    constructor() {
        this.string = 'eui-tab-header-left-content';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiTabHeaderLeftContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiTabHeaderLeftContentComponent, isStandalone: true, selector: "eui-tab-header-left-content", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiTabHeaderLeftContentComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'eui-tab-header-left-content',
                    template: '<ng-content />',
                }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * @description
 * Content projection component for displaying custom content aligned to the right side of individual tab headers.
 * Enables placement of badges, icons, or action buttons within the tab header area.
 * Automatically applies right-aligned styling for consistent positioning.
 * Must be used within eui-tab-header to add right-aligned supplementary content to tabs.
 *
 * @usageNotes
 * ### Basic Usage with Badge
 * ```html
 * <eui-tab>
 *   <eui-tab-header>
 *     <eui-tab-header-label>Notifications</eui-tab-header-label>
 *     <eui-tab-header-right-content>
 *       <eui-badge euiDanger>5</eui-badge>
 *     </eui-tab-header-right-content>
 *   </eui-tab-header>
 *   <eui-tab-body>Content</eui-tab-body>
 * </eui-tab>
 * ```
 *
 * ### With Multiple Elements
 * ```html
 * <eui-tab-header>
 *   <eui-tab-header-label>Tasks</eui-tab-header-label>
 *   <eui-tab-header-right-content>
 *     <eui-badge euiSuccess>3</eui-badge>
 *     <eui-icon-svg icon="eui-checkmark" size="xs" />
 *   </eui-tab-header-right-content>
 * </eui-tab-header>
 * ```
 *
 * ### Accessibility
 * - Badges should convey meaningful information
 * - Icons need aria-label if interactive
 * - Decorative elements use aria-hidden="true"
 * - Maintain logical tab order for interactive elements
 *
 * ### Notes
 * - Positioned after the label text
 * - Commonly used for badges, counts, or status icons
 * - Maintains consistent spacing
 * - Supports multiple elements
 * - Does not interfere with close button placement
 */
class EuiTabHeaderRightContentComponent {
    constructor() {
        this.string = 'eui-tab-header-right-content';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiTabHeaderRightContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiTabHeaderRightContentComponent, isStandalone: true, selector: "eui-tab-header-right-content", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiTabHeaderRightContentComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'eui-tab-header-right-content',
                    template: '<ng-content />',
                }]
        }], propDecorators: { string: [{
                type: HostBinding,
                args: ['class']
            }] } });

const EUI_TABS = [
    EuiTabsComponent,
    EuiTabsRightContentComponent,
    EuiTabBodyComponent,
    EuiTabHeaderComponent,
    EuiTabHeaderLabelComponent,
    EuiTabHeaderSublabelComponent,
    EuiTabHeaderRightContentComponent,
    EuiTabHeaderLeftContentComponent,
    EuiTabComponent,
];

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

export { EUI_TABS, EuiTabBodyComponent, EuiTabComponent, EuiTabHeaderComponent, EuiTabHeaderLabelComponent, EuiTabHeaderLeftContentComponent, EuiTabHeaderRightContentComponent, EuiTabHeaderSublabelComponent, EuiTabsComponent, EuiTabsRightContentComponent };
//# sourceMappingURL=eui-components-eui-tabs.mjs.map
