import * as i0 from '@angular/core';
import { AfterViewInit, TemplateRef, OnChanges, SimpleChanges, OnInit, OnDestroy, EventEmitter, QueryList, ElementRef } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import { TemplatePortal } from '@angular/cdk/portal';
/**
* @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
*
*
* Settings
*
* Content
*
* ```
*
* ### With Icons and Badges
* ```html
*
*
*
*
*
* Notifications
* Unread messages
*
* 5
*
*
* Content
*
* ```
*
* ### Complex Layout
* ```html
*
*
*
*
*
*
* {{ user.name }}
* {{ user.role }}
*
*
* Content
*
* ```
*
* ### 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
*/
declare class EuiTabHeaderComponent implements AfterViewInit {
templateRef: TemplateRef;
templatePortal: TemplatePortal;
private viewContainerRef;
ngAfterViewInit(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @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
*
*
*
Tab Content
*
Your content here
*
*
* ```
*
* ### Without Padding
* ```html
*
*
*
* Full-width content without default padding
*
*
*
* ```
*
* ### With Complex Content
* ```html
*
*
*
* Statistics
*
*
*
*
*
*
* ```
*
* ### 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
*/
declare class EuiTabBodyComponent implements AfterViewInit {
/**
* Removes default padding from the tab content area.
* Useful for full-width content, custom layouts, or when content provides its own spacing.
* @default false
*/
hasNoContentPadding: boolean;
templateRef: TemplateRef;
templatePortal: TemplatePortal;
tabIndex$: BehaviorSubject;
private viewContainerRef;
ngAfterViewInit(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_hasNoContentPadding: unknown;
}
/**
* @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
*
*
*
*
Overview content
*
*
*
*
*
*
Details content
*
*
*
* ```
*
* ### With Custom Header
* ```html
*
*
*
*
*
* Home
*
* 3
*
*
* Content
*
* ```
*
* ### 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
*/
declare class EuiTabComponent implements OnChanges {
/**
* Unique identifier for the tab.
* Used for programmatic tab selection and tracking.
* Required for proper tab management and routing.
*/
id: string;
/**
* URL or route path associated with the tab.
* Enables deep linking and browser history integration for tab navigation.
*/
url: string;
/**
* Data attribute used for end-to-end testing identification.
* @default 'eui-tab'
*/
e2eAttr: string;
/**
* Tooltip text displayed when hovering over the tab header.
* Provides additional context or information about the tab content.
*/
tooltip: string;
/**
* 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
*/
isClosable: boolean;
/**
* Disables the tab, preventing user interaction and selection.
* Applies disabled styling and blocks tab activation.
* @default false
*/
isDisabled: boolean;
/**
* 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
*/
isVisible: boolean;
/**
* Enables automatic tab closure when the close button is clicked.
* When false, close button click must be handled externally.
* @default false
*/
isHandleCloseOnClose: boolean;
/**
* Enables automatic tab activation when the tab is clicked.
* When false, tab activation must be handled externally.
* @default false
*/
isHandleActivateTab: boolean;
templateHeader: EuiTabHeaderComponent;
templateBody: EuiTabBodyComponent;
isActive: boolean;
isVisible$: BehaviorSubject;
isClosable$: BehaviorSubject;
isDisabled$: BehaviorSubject;
baseStatesDirective: BaseStatesDirective;
ngOnChanges(c: SimpleChanges): void;
activateTab(): void;
deactivateTab(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_isClosable: unknown;
static ngAcceptInputType_isDisabled: unknown;
static ngAcceptInputType_isVisible: unknown;
static ngAcceptInputType_isHandleCloseOnClose: unknown;
static ngAcceptInputType_isHandleActivateTab: unknown;
}
/**
* @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
*
*
*
*
Overview content here
*
*
*
*
*
Details content here
*
*
*
* ```
*
* ### With Custom Headers
* ```html
*
*
*
*
*
*
* Home
*
* Content
*
*
* ```
*
* ### 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
*/
declare class EuiTabsComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {
get elementClass(): string;
e2eAttr: string;
/**
* Index of the active tab
*
* @default 0
*/
activeTabIndex: number;
/**
* Sets the `aria-label` attribute for the host element.
*
* @default 'eUI Tabs'
*/
ariaLabel: string;
isMainNavigation: boolean;
isFlat: boolean;
/**
* Event emitted when a tab is closed
*/
tabClose: EventEmitter<{
tab: EuiTabComponent;
index: number;
}>;
/**
* Event emitted when a tab is activated
*/
tabActivate: EventEmitter<{
tab: EuiTabComponent;
index: number;
}>;
/**
* Event emitted when a tab is clicked
*/
tabClick: EventEmitter<{
tab: EuiTabComponent;
index: number;
}>;
_tabs: QueryList;
euiTabsHeadersContainer: ElementRef;
euiTabsHeaders: ElementRef;
euiTabsRightContent: ElementRef;
euiTabListItems: QueryList;
tabs: EuiTabComponent[];
scrolling: boolean;
navigationLeftButtonDisabled: boolean;
navigationRightButtonDisabled: boolean;
currentOffset: number;
protected tabId: string;
private destroy$;
private platformId;
private player;
private stepMove;
private scrollOffset;
private scrollingCount;
private cd;
private builder;
private euiAppShellService;
private document;
/**
* Width of the tabs headers container
*/
get euiTabsHeadersContainerWidth(): number;
/**
* Width of the tabs headers
*/
get euiTabsHeadersWidth(): number;
/**
* Width of the tabs right content
*/
get euiTabsRightContentWidth(): number;
ngOnChanges(c: SimpleChanges): void;
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
/**
* 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: number, isAnimated?: boolean, options?: {
emitEvent: boolean;
}): void;
/**
* Close a tab having index passed in parameter if exists.
* @param index Index of the tab to close
*/
closeTab(index: number): void;
/**
* Scroll to the left handler
*/
goToLeft(): void;
/**
* Scroll to the rihgt handler
*/
goToRight(): void;
/**
* Actions applied upon a keydown event
*
* @param i Index of the tab for each pressed key
* @param event The keyboard event
*/
protected onKeydown(i: number, event: KeyboardEvent): void;
/**
* Click handler for tab list item
*
* @param index Index of the tab clicked
*/
protected tabListItemClick(index: number): void;
/**
* 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
*/
protected activate(index: number, isAnimated?: boolean, options?: {
emitEvent: boolean;
}): void;
/**
* Closes a tab
*
* @param index Index of the tab to close
* @param e
*/
protected close(index: number, e: Event): void;
/**
* Checks if there are html elements within the tab panel, in order to focus or not the tab panel
* @param index The tab index
*/
protected onAttached(index: number): void;
/**
* Checks the existence of focusable elements
* @param origin The element to check
*/
private isFocusableElement;
/**
* Checks if the tabs headers are scrolling and calculates the scrolling position
*/
private tabsScrollingHandler;
/**
* 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
*/
private setScrollToTabIndex;
/**
* 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
*/
private setScrollTo;
/**
* Checks if the active tab is fully visible
*
* @param activeTab Index of the tab to check
* @returns true if fully visible, false otherwise
*/
private isActiveTabFullyVisible;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_isMainNavigation: unknown;
static ngAcceptInputType_isFlat: unknown;
}
/**
* @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
*
*
* Content 1
*
*
* Content 2
*
*
*
*
*
*
* ```
*
* ### With Multiple Controls
* ```html
*
*
*
*
*
*
*
*
* ```
*
* ### 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
*/
declare class EuiTabsRightContentComponent {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @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
*
*
* Dashboard
*
* Content
*
* ```
*
* ### With Other Header Elements
* ```html
*
*
*
*
* Analytics
* Last 30 days
*
* ```
*
* ### 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
*/
declare class EuiTabHeaderLabelComponent {
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @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
*
*
* Messages
* 12 unread
*
* Content
*
* ```
*
* ### With Dynamic Content
* ```html
*
* Tasks
*
* {{ completedTasks }} of {{ totalTasks }} completed
*
*
* ```
*
* ### 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
*/
declare class EuiTabHeaderSublabelComponent {
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @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
*
*
*
*
*
* Home
*
* Content
*
* ```
*
* ### With Avatar
* ```html
*
*
*
*
* {{ user.name }}
*
* ```
*
* ### 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)
*/
declare class EuiTabHeaderLeftContentComponent {
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @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
*
*
* Notifications
*
* 5
*
*
* Content
*
* ```
*
* ### With Multiple Elements
* ```html
*
* Tasks
*
* 3
*
*
*
* ```
*
* ### 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
*/
declare class EuiTabHeaderRightContentComponent {
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
declare const EUI_TABS: readonly [typeof EuiTabsComponent, typeof EuiTabsRightContentComponent, typeof EuiTabBodyComponent, typeof EuiTabHeaderComponent, typeof EuiTabHeaderLabelComponent, typeof EuiTabHeaderSublabelComponent, typeof EuiTabHeaderRightContentComponent, typeof EuiTabHeaderLeftContentComponent, typeof EuiTabComponent];
export { EUI_TABS, EuiTabBodyComponent, EuiTabComponent, EuiTabHeaderComponent, EuiTabHeaderLabelComponent, EuiTabHeaderLeftContentComponent, EuiTabHeaderRightContentComponent, EuiTabHeaderSublabelComponent, EuiTabsComponent, EuiTabsRightContentComponent };
//# sourceMappingURL=eui-components-eui-tabs.d.ts.map