import * as i0 from '@angular/core';
import { OnInit, OnDestroy, EventEmitter, QueryList } from '@angular/core';
import { EuiAppShellService } from '@eui/core';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import { Subject } from 'rxjs';
/**
* @description
* Breadcrumb container component for eui-page that provides a navigation trail area.
* Displays hierarchical navigation path showing the user's location within the application structure.
* Typically positioned near the top of the page, above the main header or content.
* Should contain eui-breadcrumb component or custom breadcrumb navigation elements.
* Must be used as a direct child of eui-page to maintain proper layout structure.
*
* @usageNotes
* ### Basic usage
* ```html
*
*
*
*
* Content here
*
* ```
*
* ### Accessibility
* - Use eui-breadcrumb component which provides proper ARIA navigation landmark
* - Ensure breadcrumb links have descriptive text for screen readers
* - Current page should be indicated with aria-current="page"
*
* ### Notes
* - Must be a direct child of eui-page component
* - Typically placed before page header or content sections
* - Provides consistent spacing and alignment with page layout
*/
declare class EuiPageBreadcrumbComponent {
class: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Individual column component for multi-column page layouts within eui-page-columns.
* Provides collapsible sidebar functionality with automatic responsive behavior and custom content projection.
* Supports header, body, and footer sections with flexible content areas and collapse/expand controls.
* Automatically responds to container width changes and mobile breakpoints for adaptive layouts.
* Must be used as a direct child of eui-page-columns to participate in column-based layouts.
*
* @usageNotes
* ### Basic column
* ```html
*
*
* Sidebar content
*
*
* Main content
*
*
* ```
*
* ### Collapsible column
* ```html
*
*
*
*
*
* ```
*
* ### With custom header content
* ```html
*
*
*
*
* Filter options
*
* ```
*
* ### Accessibility
* - Column headers use semantic heading structure for screen readers
* - Collapse/expand buttons include proper aria-labels
* - Keyboard navigation supported for collapse toggle
* - Focus management maintained when toggling collapsed state
*
* ### Notes
* - Must be direct child of eui-page-columns component
* - Supports automatic collapse based on container width or mobile breakpoint
* - Use content projection directives for custom header, body, and footer sections
* - Collapse state can be controlled programmatically or by user interaction
*/
declare class EuiPageColumnComponent implements OnInit, OnDestroy {
get cssClasses(): string;
/**
* Primary heading text displayed in the column header.
* Serves as the title for the column content.
*/
label: any;
/**
* Secondary descriptive text displayed in the column header.
* Provides additional context about the column content.
*/
subLabel: any;
/**
* Container width threshold in pixels for automatic column collapse.
* When parent container width falls below this value, column automatically collapses.
* Only effective when isAutocloseOnContainerResize is true.
* @default null
*/
autocloseContainerWidth: number;
/**
* Accessible label for the expand button when column is collapsed.
* Automatically generated from label if not provided.
*/
expandAriaLabel: string;
/**
* Accessible label for the collapse button when column is expanded.
* Automatically generated from label if not provided.
*/
collapseAriaLabel: string;
/**
* Enables expand/collapse functionality for the column.
* Adds a toggle button to show or hide column content.
* @default false
*/
isCollapsible: boolean;
/**
* Controls the collapsed state of the column.
* When true, minimizes column width and hides content; when false, displays full column.
* @default false
*/
isCollapsed: boolean;
/**
* Completely hides the column when collapsed instead of showing a minimal collapsed state.
* Only effective when isCollapsed is true.
* @default false
*/
isCollapsedHidden: boolean;
/**
* Positions the collapse button on the right side of the column header.
* By default, collapse button appears on the left.
* @default false
*/
isRightCollapsible: boolean;
/**
* Applies highlighted visual styling to emphasize the column.
* Adds distinct background or border treatment.
* @default false
*/
isHighlighted: boolean;
/**
* Displays icons in the collapsed column state for visual identification.
* Provides visual cues when column is minimized.
* @default false
*/
isCollapsedWithIcons: boolean;
/**
* Applies styling specific to columns containing sidebar navigation menus.
* Adjusts spacing and layout for menu-based columns.
* @default false
*/
hasSidebarMenu: boolean;
/**
* Enables shrinkable behavior for the column header body section.
* Allows header to reduce in size based on scroll or content state.
* @default false
*/
hasHeaderBodyShrinkable: boolean;
/**
* Enables automatic column collapse when parent container width changes.
* Works in conjunction with autocloseContainerWidth threshold.
* @default false
*/
isAutocloseOnContainerResize: boolean;
/**
* Automatically collapses the column when viewport enters mobile breakpoint.
* Provides responsive behavior for smaller screens.
* @default false
*/
isAutocloseOnMobile: boolean;
/**
* Indicates the column contains nested sub-columns.
* Applies appropriate styling for hierarchical column structures.
* @default false
*/
hasSubColumns: boolean;
/**
* Emitted when the column's collapsed state changes via user interaction or automatic triggers.
* Payload: boolean indicating the new collapsed state (true when collapsed, false when expanded).
*/
collapse: EventEmitter;
/**
* Emitted when the column header's collapsed state changes.
* Payload: boolean indicating the header collapse state.
*/
headerCollapse: EventEmitter;
isActive: boolean;
isHeaderBodyShrinked: boolean;
hasPreventMobileRendering: boolean;
customHeaderBodyContent: QueryList;
customHeaderLeftContent: QueryList;
customHeaderRightContent: QueryList;
customHeaderCollapsedContent: QueryList;
customFooterContent: QueryList;
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_isCollapsedHidden: 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;
static ngAcceptInputType_hasSubColumns: unknown;
}
/**
* @description
* Directive for projecting custom content into the column header body area.
* Used to add custom header content between left and right sections.
*
* @usageNotes
* ```html
*
*
*
* ```
*/
declare class EuiPageColumnHeaderBodyContentDirective {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* @description
* Directive for projecting custom content into the left side of the column header.
* Used to add leading content or controls in the header.
*
* @usageNotes
* ```html
*
*
*
* ```
*/
declare class EuiPageColumnHeaderLeftContentDirective {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* @description
* Directive for projecting custom content into the right side of the column header.
* Used to add trailing content or controls in the header.
*
* @usageNotes
* ```html
*
*
*
* ```
*/
declare class EuiPageColumnHeaderRightContentDirective {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* @description
* Directive for projecting custom content displayed when the column is in collapsed state.
* Used to show alternative content in the minimized column view.
*
* @usageNotes
* ```html
*
*
*
* ```
*/
declare class EuiPageColumnHeaderCollapsedContentDirective {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* @description
* Directive for projecting content into the main body area of the column.
* Used to define the primary content section of the column.
*
* @usageNotes
* ```html
*
*
Main column content goes here
*
* ```
*/
declare class EuiPageColumnBodyContentDirective {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* @description
* Directive for projecting content into the footer area of the column.
* Used to add footer content or actions at the bottom of the column.
*
* @usageNotes
* ```html
*
*
*
* ```
*/
declare class EuiPageColumnFooterContentDirective {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* @description
* Column layout container component for eui-page that enables multi-column page structures.
* Provides responsive column-based layouts with automatic width tracking via ResizeObserver.
* Supports mobile rendering control to maintain or override responsive column behavior.
* Emits width changes through a reactive Subject for dynamic layout adjustments.
* Must be used as a direct child of eui-page to enable column-based page layouts.
*
* @usageNotes
* ### Basic two-column layout
* ```html
*
*
*
* Sidebar content
*
*
* Main content
*
*
*
* ```
*
* ### Prevent mobile stacking
* ```html
*
* Content
* Content
*
* ```
*
* ### Accessibility
* - Columns maintain logical reading order for screen readers
* - Use semantic HTML within columns for proper document structure
* - Ensure keyboard navigation flows naturally through columns
*
* ### Notes
* - Must be direct child of eui-page component
* - Automatically tracks container width for responsive child columns
* - By default, columns stack vertically on mobile devices
* - Use hasPreventMobileRendering to maintain column layout on all screen sizes
*/
declare class EuiPageColumnsComponent implements OnInit, OnDestroy {
get cssClasses(): string;
/**
* Prevents automatic mobile responsive rendering of columns.
* When true, maintains desktop column layout on mobile devices instead of stacking.
* Useful for layouts that should remain columnar regardless of viewport size.
* @default false
*/
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
* Main content area component for eui-page that provides the primary container for page body content.
* Serves as the central content region between page header and footer with appropriate spacing and layout.
* Applies consistent styling and responsive behavior for the main content area.
* Typically contains the primary information, forms, tables, or other interactive elements of the page.
* Must be used as a direct child of eui-page to maintain proper layout structure.
*
* @usageNotes
* ### Basic usage
* ```html
*
*
*
*
Main page content goes here
*
*
*
* ```
*
* ### Accessibility
* - Acts as the main content landmark for screen readers
* - Should contain the primary page content and interactive elements
* - Use proper heading hierarchy within content area
*
* ### Notes
* - Must be direct child of eui-page component
* - Provides consistent spacing between header and footer
* - Automatically adapts to responsive layouts
*/
declare class EuiPageContentComponent {
class: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Footer component for eui-page that provides a structured bottom section for page-level content.
* Supports highlighted visual states through the BaseStatesDirective for emphasis.
* Typically contains copyright information, links, actions, or supplementary page content.
* Positioned at the bottom of the page layout with consistent spacing and styling.
* Must be used as a direct child of eui-page to maintain proper layout structure.
*
* @usageNotes
* ### Basic footer
* ```html
*
* Main content
*
*
*
*
* ```
*
* ### Highlighted footer
* ```html
*
*
*
*
* ```
*
* ### Accessibility
* - Use semantic footer element for proper document structure
* - Ensure links and buttons have descriptive labels
* - Maintain sufficient color contrast for footer content
*
* ### Notes
* - Must be direct child of eui-page component
* - Supports euiHighlighted directive for visual emphasis
* - Provides consistent spacing at bottom of page layout
*/
declare class EuiPageFooterComponent {
get cssClasses(): string;
/**
* Data attribute used for end-to-end testing identification.
* @default 'eui-page-footer'
*/
e2eAttr: string;
protected baseStatesDirective: BaseStatesDirective;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Container for action buttons or controls in the page header (v1).
* Provides a dedicated area for primary and secondary actions related to the page.
* Typically positioned on the right side of the page header.
*
* @usageNotes
* ### Basic usage
* ```html
*
*
*
*
*
*
* ```
*
* ### Accessibility
* - Ensure buttons have descriptive labels
* - Use appropriate button types (primary, secondary) for visual hierarchy
* - Maintain logical tab order for keyboard navigation
*
* ### Notes
* - Must be used within eui-page-header component
* - Typically contains action buttons related to page content
* - Automatically positioned in header layout
*/
declare class EuiPageHeaderActionItemsComponent {
get cssClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Body content area within the page header for additional header content (v1).
* Provides a flexible container for search bars, filters, tabs, or other header elements.
* Positioned below the main header label and action items.
*
* @usageNotes
* ### With search bar
* ```html
*
*
*
*
*
* ```
*
* ### With tabs
* ```html
*
*
*
* ```
*
* ### Accessibility
* - Ensure interactive elements within body are keyboard accessible
* - Use semantic HTML for proper document structure
* - Maintain logical focus order
*
* ### Notes
* - Must be used within eui-page-header component
* - Provides flexible space for header-related controls
* - Automatically positioned in header layout structure
*/
declare class EuiPageHeaderBodyComponent {
get cssClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Secondary descriptive text component for the page header (v1).
* Displays supplementary information below the main page header label.
* Provides additional context or description for the page content.
*
* @usageNotes
* ### Basic usage
* ```html
*
*
* Manage your account preferences and security settings
*
*
* ```
*
* ### Accessibility
* - Use clear, concise descriptive text
* - Ensure sufficient color contrast for readability
* - Text should complement, not duplicate, the main label
*
* ### Notes
* - Must be used within eui-page-header component
* - Provides secondary descriptive information
* - Automatically styled and positioned in header layout
*/
declare class EuiPageHeaderSubLabelComponent {
get cssClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Page header component that provides a structured title area with optional collapsible functionality.
* Displays primary and secondary labels with tooltip support for additional context.
* Supports multi-line layouts and expandable/collapsible behavior for complex headers.
* Typically positioned at the top of page content to establish page identity and navigation context.
* Must be used as a direct child of eui-page to maintain proper layout structure.
*
* @usageNotes
* ### Basic header
* ```html
*
*
* ```
*
* ### Collapsible header
* ```html
*
*
*
Additional header content
*
*
* ```
*
* ### With tooltips
* ```html
*
*
* ```
*
* ### Accessibility
* - Header label uses appropriate heading level for document structure
* - Collapse/expand buttons include descriptive aria-labels
* - Tooltips provide additional context without hiding essential information
* - Keyboard navigation supported for interactive elements
*
* ### Notes
* - Must be direct child of eui-page component
* - Use isHeaderMultilines for headers with extensive content
* - Collapse functionality requires isCollapsible to be true
* - Tooltips appear on hover and focus for accessibility
*/
declare class EuiPageHeaderComponent {
get cssClasses(): string;
/**
* Primary heading text displayed as the main page title.
* Serves as the principal identifier for the page content.
*/
label: any;
/**
* Secondary descriptive text displayed below or alongside the main label.
* Provides supplementary information or context about the page.
*/
subLabel: any;
/**
* Tooltip text displayed when hovering over the main label.
* Provides additional explanatory information for the page title.
*/
labelTooltip: any;
/**
* Tooltip text displayed when hovering over the sub-label.
* Provides additional explanatory information for the secondary text.
*/
subLabelTooltip: any;
/**
* Enables expand/collapse functionality for the page header.
* Adds a toggle button to show or hide header content dynamically.
* @default false
*/
isCollapsible: boolean;
/**
* Controls the collapsed state of the header when collapsible is enabled.
* When true, hides header content; when false, displays full header.
* @default false
*/
isCollapsed: boolean;
/**
* Enables multi-line layout mode for headers with extensive content.
* Adjusts spacing and alignment to accommodate multiple lines of text or components.
* @default false
*/
isHeaderMultilines: boolean;
pageHeaderBodyContent: QueryList;
/**
* Accessible label text for the toggle button when header is in collapsed state.
* Describes the action to expand the header for screen readers.
* @default ''
*/
collapsedLabel: string;
/**
* Accessible label text for the toggle button when header is in expanded state.
* Describes the action to collapse the header for screen readers.
* @default ''
*/
expandedLabel: string;
/**
* Emitted when the header's collapsed state changes via user interaction.
* Payload: boolean indicating the new collapsed state (true when collapsed, false when expanded).
* Triggered by clicking the collapse/expand toggle button.
*/
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
* Hero header component for eui-page that displays a prominent page title with optional subtitle.
* Provides a visually distinct header section with larger typography and enhanced spacing.
* Typically used for landing pages, dashboards, or major section introductions.
* Creates visual hierarchy and establishes page context for users.
* Must be used as a direct child of eui-page to maintain proper layout structure.
*
* @usageNotes
* ### Basic hero header
* ```html
*
*
*
* Content here
*
* ```
*
* ### Accessibility
* - Uses semantic heading structure for proper document outline
* - Ensure label text is descriptive and meaningful
* - Maintain sufficient color contrast for readability
*
* ### Notes
* - Must be direct child of eui-page component
* - Provides larger, more prominent styling than standard page header
* - Best suited for landing pages or major section introductions
* - Use sparingly to maintain visual hierarchy
*/
declare class EuiPageHeroHeaderComponent {
/**
* Primary heading text displayed prominently in the hero header.
* Serves as the main page title or section heading.
*/
label: any;
/**
* Secondary descriptive text displayed below the main label.
* Provides additional context or explanation for the page content.
*/
subLabel: any;
get cssClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Top content area component for eui-page that provides a structured section above the main page content.
* Typically contains page-level alerts, notifications, or contextual information displayed prominently.
* Positioned between the page header and main content area with consistent spacing.
* Must be used as a direct child of eui-page to maintain proper layout structure.
*
* @usageNotes
* ### With alert message
* ```html
*
*
*
* Your changes have been saved successfully.
*
* Main content
*
* ```
*
* ### Accessibility
* - Use appropriate ARIA roles for alerts and notifications
* - Ensure important messages are announced to screen readers
* - Maintain sufficient color contrast for content
*
* ### Notes
* - Must be direct child of eui-page component
* - Positioned between header and main content
* - Ideal for page-level notifications and contextual information
*/
declare class EuiPageTopContentComponent {
get cssClasses(): string;
/**
* Data attribute used for end-to-end testing identification.
* @default 'eui-page-top-content'
*/
e2eAttr: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Root page layout component that provides the foundational structure for application pages.
* Automatically detects and adapts styling based on the presence of column-based layouts.
* Serves as the top-level container for page content, headers, sidebars, and footers.
* Provides consistent spacing, alignment, and responsive behavior across the application.
* Typically used as the outermost wrapper for each route's content in the application.
*
* @usageNotes
* ### Basic page layout
* ```html
*
*
*
* Main content here
*
*
* ```
*
* ### With columns
* ```html
*
*
* Sidebar content
* Main content
*
*
* ```
*
* ### Accessibility
* - Use semantic HTML within page sections for proper document structure
* - Ensure proper heading hierarchy (h1, h2, h3) within page content
* - Landmark regions help screen reader users navigate page sections
*
* ### Notes
* - Automatically applies column-specific styling when eui-page-columns is present
* - Provides consistent spacing and layout across all application pages
* - Works with both v1 and v2 page component variants
*/
declare class EuiPageComponent {
get cssClasses(): string;
columns: QueryList;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
declare const EUI_PAGE: readonly [typeof EuiPageComponent, typeof EuiPageColumnComponent, typeof EuiPageColumnHeaderBodyContentDirective, typeof EuiPageColumnHeaderLeftContentDirective, typeof EuiPageColumnHeaderRightContentDirective, typeof EuiPageColumnHeaderCollapsedContentDirective, typeof EuiPageColumnBodyContentDirective, typeof EuiPageColumnFooterContentDirective, typeof EuiPageColumnsComponent, typeof EuiPageContentComponent, typeof EuiPageHeaderComponent, typeof EuiPageHeaderSubLabelComponent, typeof EuiPageHeaderBodyComponent, typeof EuiPageHeaderActionItemsComponent, typeof EuiPageHeroHeaderComponent, typeof EuiPageFooterComponent, typeof EuiPageBreadcrumbComponent, typeof EuiPageTopContentComponent];
export { EUI_PAGE, EuiPageBreadcrumbComponent, EuiPageColumnBodyContentDirective, EuiPageColumnComponent, EuiPageColumnFooterContentDirective, EuiPageColumnHeaderBodyContentDirective, EuiPageColumnHeaderCollapsedContentDirective, EuiPageColumnHeaderLeftContentDirective, EuiPageColumnHeaderRightContentDirective, EuiPageColumnsComponent, EuiPageComponent, EuiPageContentComponent, EuiPageFooterComponent, EuiPageHeaderActionItemsComponent, EuiPageHeaderBodyComponent, EuiPageHeaderComponent, EuiPageHeaderSubLabelComponent, EuiPageHeroHeaderComponent, EuiPageTopContentComponent };
//# sourceMappingURL=eui-components-eui-page.d.ts.map