import * as i0 from '@angular/core'; import { OnInit, OnDestroy, QueryList, EventEmitter } from '@angular/core'; import { Subject } from 'rxjs'; import { EuiAppShellService } from '@eui/core'; import * as i1 from '@eui/components/shared'; import { BaseStatesDirective } from '@eui/components/shared'; /** * @description * Container for multiple page columns that provides responsive column layouts with resize observation. * Automatically monitors width changes to support responsive column behavior. * * @usageNotes * ### Basic usage * ```html * * Nav content * Main content * * ``` * * ### Prevent mobile rendering * ```html * * Content * * ``` * * ### Accessibility * - Ensure columns have descriptive labels for screen readers * - Maintain logical reading order in column sequence * - Test keyboard navigation between columns * * ### Notes * - Uses ResizeObserver to track container width changes * - Child columns can respond to width changes for auto-collapse behavior * - `hasPreventMobileRendering` disables mobile-specific column stacking */ declare class EuiPageColumns implements OnInit, OnDestroy { get cssClasses(): string; hasPreventMobileRendering: boolean; width: Subject; private observer; private host; private zone; ngOnInit(): void; ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_hasPreventMobileRendering: unknown; } /** * @description * Root page layout component (v2) that provides the foundational structure for application pages. * Automatically detects and adapts styling based on the presence of column-based layouts. * * @usageNotes * ### Basic usage * ```html * * * Content * * ``` * * ### Accessibility * - Use semantic HTML for proper document structure * - Maintain heading hierarchy within page sections * * ### Notes * - This is the v2 variant with updated styling * - Automatically detects column layouts */ declare class EuiPage { get cssClasses(): string; columns: QueryList; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Main content container for page layouts that holds the primary page content. * * @usageNotes * ```html * *

Main page content goes here

* * ``` * * ### Accessibility * - Consider using role="main" for primary content area * - Ensure content is keyboard accessible * * ### Notes * - Provides consistent padding and spacing for page content * - Use within eui-page for proper layout structure */ declare class EuiPageContent { get cssClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Body content area within the page header for additional header content. * * @usageNotes * ```html * * * * ``` * * ### Notes * - Use for tabs, filters, or other header-level controls * - Content appears below the main header labels */ declare class EuiPageHeaderBody { get cssClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Page header component that displays the page title, subtitle, and optional collapsible content. * Supports multi-line layouts and action items for page-level controls. * * @usageNotes * ### Basic usage * ```html * * ``` * * ### With tooltips * ```html * * * ``` * * ### Collapsible header * ```html * * * Additional header content * * * ``` * * ### Accessibility * - Label should be the main page heading (h1) * - Collapse button has descriptive aria-label * - Tooltips provide additional context for screen readers * * ### Notes * - Use `isHeaderMultilines` for headers with wrapping content * - Action items can be added via eui-page-header-action-items * - Collapsible mode useful for hiding secondary information */ declare class EuiPageHeader { get cssClasses(): string; label: any; subLabel: any; labelTooltip: any; subLabelTooltip: any; isCollapsible: boolean; isCollapsed: boolean; isHeaderMultilines: boolean; /** * @deprecated Avoid using this property, use the `pageHeaderBodyContent` instead. */ pageHeaderBodyContent: QueryList; collapsedLabel: string; expandedLabel: string; collapse: EventEmitter; onToggle(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_isCollapsible: unknown; static ngAcceptInputType_isCollapsed: unknown; static ngAcceptInputType_isHeaderMultilines: unknown; } /** * @description * Container for action buttons or controls in the page header. * * @usageNotes * ```html * * * * * ``` * * ### Notes * - Use within eui-page-header for page-level actions * - Typically positioned on the right side of the header */ declare class EuiPageHeaderActionItems { get cssClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Primary label text for the page header. * * @usageNotes * ```html * Dashboard * ``` */ declare class EuiPageHeaderLabel { get cssClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Secondary descriptive text for the page header. * * @usageNotes * ```html * Overview and statistics * ``` */ declare class EuiPageHeaderSubLabel { get cssClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Individual column within a page columns layout that supports collapsible behavior, headers, and responsive sizing. * Provides flexible column layouts with optional collapse functionality and automatic mobile handling. * * @usageNotes * ### Basic column * ```html * * * Sidebar content * * * ``` * * ### Collapsible column * ```html * * * Filters * * Filter controls * * ``` * * ### Auto-collapse on resize * ```html * * Content * * ``` * * ### Accessibility * - Provide descriptive labels for column identification * - Collapse buttons have proper aria-labels * - Ensure collapsed columns can be reopened via keyboard * - Maintain focus management when collapsing/expanding * * ### Notes * - Supports size variants: euiSizeS, euiSizeM, euiSizeL, euiSizeXL, etc. * - `isCollapsedWithIcons` shows icon-only view when collapsed * - `hasSidebarMenu` optimizes layout for sidebar menu content * - `hasHeaderBodyShrinkable` allows header to shrink on scroll * - Auto-collapse features help manage responsive layouts automatically */ declare class EuiPageColumn implements OnInit, OnDestroy { get cssClasses(): string; label: any; subLabel: any; autocloseContainerWidth: number; expandAriaLabel: string; collapseAriaLabel: string; isCollapsible: boolean; isCollapsed: boolean; isRightCollapsible: boolean; isHighlighted: boolean; isCollapsedWithIcons: boolean; hasSidebarMenu: boolean; hasHeaderBodyShrinkable: boolean; isAutocloseOnContainerResize: boolean; isAutocloseOnMobile: boolean; collapse: EventEmitter; headerCollapse: EventEmitter; isActive: boolean; isHeaderBodyShrinked: boolean; hasPreventMobileRendering: boolean; currentOffset: number; previousOffset: number; treshHold: number; asService: EuiAppShellService; protected baseStatesDirective: BaseStatesDirective; private pageColumnsParent; private destroy$; ngOnInit(): void; ngOnDestroy(): void; onToggle(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_isCollapsible: unknown; static ngAcceptInputType_isCollapsed: unknown; static ngAcceptInputType_isRightCollapsible: unknown; static ngAcceptInputType_isHighlighted: unknown; static ngAcceptInputType_isCollapsedWithIcons: unknown; static ngAcceptInputType_hasSidebarMenu: unknown; static ngAcceptInputType_hasHeaderBodyShrinkable: unknown; static ngAcceptInputType_isAutocloseOnContainerResize: unknown; static ngAcceptInputType_isAutocloseOnMobile: unknown; } /** * @description * Header container for page columns with collapse/expand functionality. * * @usageNotes * ```html * * Filters * Active filters: 3 * * ``` * * ### Accessibility * - Collapse button has descriptive aria-labels * - Keyboard accessible with Enter and Space * * ### Notes * - Automatically integrates with parent eui-page-column collapse state * - Use sub-components for structured header content */ declare class EuiPageColumnHeader { string: string; expandAriaLabel: string; collapseAriaLabel: string; protected pageColumnParent: EuiPageColumn; onToggle(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Leading content area in the column header for icons or controls. * * @usageNotes * ```html * * * * ``` */ declare class EuiPageColumnHeaderStart { string: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Trailing content area in the column header for actions or controls. * * @usageNotes * ```html * * * * ``` */ declare class EuiPageColumnHeaderEnd { string: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Primary label text for the column header. * * @usageNotes * ```html * Navigation * ``` */ declare class EuiPageColumnHeaderLabel { string: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Secondary descriptive text for the column header. * * @usageNotes * ```html * 5 items * ``` */ declare class EuiPageColumnHeaderSubLabel { string: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Body content area within the column header for additional header content. * * @usageNotes * ```html * * New * * ``` */ declare class EuiPageColumnHeaderBody { string: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Body content container for page columns that holds the main content area. * * @usageNotes * ```html * *

Main column content

* * ``` * * ### Notes * - Use within eui-page-column for structured content layout * - Provides scrollable content area when needed */ declare class EuiPageColumnBody { string: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Footer container for page columns that displays actions or information at the bottom of the column. * * @usageNotes * ```html * * * * ``` * * ### Notes * - Use within eui-page-column for column-level actions * - Typically contains buttons or status information */ declare class EuiPageColumnFooter { string: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Footer container for page layouts that displays actions or information at the bottom of the page. * * @usageNotes * ```html * * * * * ``` * * ### With highlighted state * ```html * * Footer content * * ``` * * ### Accessibility * - Use role="contentinfo" for page-level footer * - Ensure footer actions are keyboard accessible * * ### Notes * - Supports `euiHighlighted` for visual emphasis * - Typically contains form actions or page-level controls */ declare class EuiPageFooter { get cssClasses(): string; e2eAttr: string; protected baseStatesDirective: BaseStatesDirective; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Breadcrumb container for page navigation that displays the current location within the application hierarchy. * * @usageNotes * ```html * * * * ``` * * ### Accessibility * - Use nav element with aria-label="Breadcrumb" for screen readers * - Current page should be marked with aria-current="page" * * ### Notes * - Typically placed at the top of the page before the header * - Works with eui-breadcrumb component for navigation trails */ declare class EuiPageBreadcrumb { class: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * @description * Top content container for page layouts that displays content above the main header. * * @usageNotes * ```html * * Important notification * * ``` * * ### Notes * - Use for alerts, banners, or announcements above the page header * - Positioned at the very top of the page layout */ declare class EuiPageTopContent { get cssClasses(): string; e2eAttr: string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare const EUI_PAGE: readonly [typeof EuiPage, typeof EuiPageContent, typeof EuiPageHeader, typeof EuiPageHeaderLabel, typeof EuiPageHeaderSubLabel, typeof EuiPageHeaderBody, typeof EuiPageHeaderActionItems, typeof EuiPageColumns, typeof EuiPageColumn, typeof EuiPageColumnHeader, typeof EuiPageColumnHeaderStart, typeof EuiPageColumnHeaderEnd, typeof EuiPageColumnHeaderLabel, typeof EuiPageColumnHeaderSubLabel, typeof EuiPageColumnHeaderBody, typeof EuiPageColumnFooter, typeof EuiPageColumnBody, typeof EuiPageFooter, typeof EuiPageBreadcrumb, typeof EuiPageTopContent]; export { EUI_PAGE, EuiPage, EuiPageBreadcrumb, EuiPageColumn, EuiPageColumnBody, EuiPageColumnFooter, EuiPageColumnHeader, EuiPageColumnHeaderBody, EuiPageColumnHeaderEnd, EuiPageColumnHeaderLabel, EuiPageColumnHeaderStart, EuiPageColumnHeaderSubLabel, EuiPageColumns, EuiPageContent, EuiPageFooter, EuiPageHeader, EuiPageHeaderActionItems, EuiPageHeaderBody, EuiPageHeaderLabel, EuiPageHeaderSubLabel, EuiPageTopContent }; //# sourceMappingURL=eui-components-eui-page-v2.d.ts.map