import * as i0 from '@angular/core';
import { EventEmitter, QueryList } from '@angular/core';
/**
* @description
* Modal overlay component that displays content in a layer above the main application.
* Provides slide-in panel functionality with configurable positioning and width options.
* Supports focus trapping, keyboard navigation, and click-outside-to-close behavior.
* Implements ARIA dialog role for accessibility compliance.
* Commonly used for side panels, drawers, settings menus, and contextual information displays.
*
* @usageNotes
* ### Basic Usage
* ```html
*
*
*
Panel Title
*
*
*
Panel content goes here
*
*
*
*
*
* ```
*
* ### Right Side Panel
* ```html
*
* Content
*
* ```
*
* ### With Click Outside to Close
* ```html
*
* Dismissible content
*
* ```
*
* ### Accessibility
* - Uses `dialog` role for screen readers
* - Traps focus within overlay when active
* - Escape key closes overlay
* - Inert attribute prevents interaction when inactive
*
* ### Notes
* - Position options: 'right', 'left', 'top', 'bottom'
* - Width can be responsive or fixed
* - Automatically handles slide-in animations
* - Use with overlay sub-components for structured layout
*/
declare class EuiOverlayComponent {
get cssClasses(): string;
role: string;
'aria-label': string;
get inert(): string;
/**
* Controls the visibility and active state of the overlay.
* When true, displays the overlay with animation and enables interaction.
* When false, hides the overlay and applies inert attribute to prevent interaction.
* @default false
*/
isActive: boolean;
/**
* Applies highlighted visual styling to emphasize the overlay.
* Adds distinct background or border treatment for visual prominence.
* @default false
*/
euiHighlighted: boolean;
/**
* Enables automatic closing when user clicks outside the overlay boundaries.
* Also applies slide-in animation from the right side.
* Useful for dismissible panels and temporary contextual menus.
* @default false
*/
hasClosedOnClickOutside: boolean;
/**
* Screen position where the overlay appears.
* Determines the slide-in direction and alignment of the overlay panel.
* Common values: 'right', 'left', 'top', 'bottom'.
* @default 'right'
*/
position: string;
/**
* Responsive width variant for the overlay panel.
* Applies predefined width classes that adapt to viewport size.
* Values correspond to CSS width modifier classes.
*/
width: string;
/**
* Fixed width value for the overlay panel.
* Applies a specific width that does not respond to viewport changes.
* Overrides responsive width settings when specified.
*/
fixedWidth: string;
/**
* Emitted when the overlay's active state changes.
* Payload: boolean indicating the requested active state (typically false for close requests).
* Triggered by Escape key press or click outside when hasClosedOnClickOutside is enabled.
*/
activeState: EventEmitter;
private readonly elementRef;
private readonly renderer;
onKeydown(event: KeyboardEvent): void;
onClick(event: MouseEvent): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_isActive: unknown;
static ngAcceptInputType_euiHighlighted: unknown;
static ngAcceptInputType_hasClosedOnClickOutside: unknown;
}
/**
* @description
* Body component for `eui-overlay` that provides a structured content container within the overlay content area.
* Serves as a semantic wrapper for main body content with consistent padding and spacing.
* Typically used within `eui-overlay-content` to organize content sections.
* Must be used as a child of `eui-overlay-content` to maintain proper layout hierarchy.
*
* @usageNotes
* ### Basic Usage
* ```html
*
*
*
*
Body content with consistent padding
*
*
*
* ```
*
* ### Accessibility
* - Provides semantic structure for content organization
* - Maintains proper content hierarchy
*
* ### Notes
* - Used within `eui-overlay-content`
* - Applies consistent padding to content
*/
declare class EuiOverlayBodyComponent {
get cssClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Footer component for `eui-overlay` that provides a structured bottom section.
* Typically contains action buttons such as submit, cancel, or other footer controls.
* Applies consistent styling and spacing for overlay footer content.
* Must be used as a direct child of `eui-overlay` to maintain proper layout structure.
*
* @usageNotes
* ### Basic Usage
* ```html
*
*
*
Content
*
*
*
*
*
*
* ```
*
* ### Accessibility
* - Action buttons should have clear labels
* - Primary action typically comes first in DOM order
*
* ### Notes
* - Must be direct child of `eui-overlay`
* - Commonly used for action buttons
*/
declare class EuiOverlayFooterComponent {
get cssClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* Title component for eui-overlay-header that displays a labeled heading with optional count badge and close button.
* Provides structured title area with consistent styling and accessibility features.
* Automatically includes a close/hide button that emits events for overlay dismissal.
* Must be used within eui-overlay-header to maintain proper header structure.
*/
declare class EuiOverlayHeaderTitleComponent {
get cssClasses(): string;
/**
* Primary text label displayed as the overlay header title.
* Provides the main heading text for the overlay content.
* @default null
*/
headerTitleLabel: string;
/**
* Accessible label for the close/hide button in the header.
* Provides screen reader text describing the button's action.
* @default null
*/
headerTitleHideLabel: string;
/**
* Count value displayed as a badge next to the title.
* Typically shows the number of items, notifications, or related content.
* Rendered as a visual badge component when provided.
* @default null
*/
headerTitleCount: string;
/**
* Emitted when the close/hide button in the header is clicked.
* Signals that the overlay should be dismissed or hidden.
* No specific payload is provided.
*/
hide: EventEmitter;
onHide(): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Header component for eui-overlay that provides a structured top section.
* Automatically detects and styles content based on the presence of a title component.
* Typically contains title, close button, and optional action buttons.
* Must be used as a direct child of eui-overlay to maintain proper layout structure.
*
* @usageNotes
* ### Basic Usage
* ```html
*
*
*
Overlay Title
*
*
* ```
*
* ### Accessibility
* - Use heading elements for titles
* - Ensure close buttons have appropriate ARIA labels
*
* ### Notes
* - Must be direct child of `eui-overlay`
* - Automatically styled based on content
*/
declare class EuiOverlayHeaderComponent {
hasHeaderTitle: QueryList;
get cssClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Content component for `eui-overlay` that provides a structured main content area.
* Serves as the primary container for overlay body content between header and footer.
* Applies consistent styling, spacing, and scrolling behavior for overlay content.
* Must be used as a direct child of `eui-overlay` to maintain proper layout structure.
*
* @usageNotes
* ### Basic Usage
* ```html
*
*
*
Main content goes here
*
*
* ```
*
* ### Accessibility
* - Content is scrollable when it exceeds available space
* - Maintains focus within overlay structure
*
* ### Notes
* - Must be direct child of `eui-overlay`
* - Automatically handles overflow scrolling
*/
declare class EuiOverlayContentComponent {
get cssClasses(): string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
declare const EUI_OVERLAY: readonly [typeof EuiOverlayHeaderComponent, typeof EuiOverlayHeaderTitleComponent, typeof EuiOverlayBodyComponent, typeof EuiOverlayContentComponent, typeof EuiOverlayFooterComponent, typeof EuiOverlayComponent];
export { EUI_OVERLAY, EuiOverlayBodyComponent, EuiOverlayComponent, EuiOverlayContentComponent, EuiOverlayFooterComponent, EuiOverlayHeaderComponent, EuiOverlayHeaderTitleComponent };
//# sourceMappingURL=eui-components-eui-overlay.d.ts.map