import * as i0 from '@angular/core'; import { AfterViewInit, OnDestroy, OnInit, OnChanges, EventEmitter, TemplateRef, SimpleChanges, ElementRef } from '@angular/core'; import { Observable } from 'rxjs'; import * as i1 from '@eui/components/shared'; /** * Represents the four possible positions for a popover element. */ type EuiPopoverPosition = 'top' | 'right' | 'bottom' | 'left'; /** * @description * A flexible popover component that displays content in an overlay positioned relative to an origin element. * * The popover can be positioned at four different positions (top, right, bottom, left) relative to the * origin element, with automatic fallback positions if the preferred position doesn't fit in the viewport. * It supports various visual styles, dismissal behaviors, and size variants. * * @usageNotes * ### Basic usage * ```typescript * @ViewChild('popover') popover: EuiPopoverComponent; * @ViewChild('trigger') trigger: ElementRef; * * openPopover() { * this.popover.openPopover(this.trigger); * } * ``` * ```html * * *

Popover content goes here

*
* ``` * * ### With positioning * ```html * * Content * * ``` * * ### With backdrop * ```html * * Content * * ``` * * ### Accessibility * - Escape key closes the popover when focused * - Focus trap keeps keyboard navigation within popover when open * - Close button provides clear dismissal option * - Backdrop click dismissal when `isDismissable` is true * * ### Notes * - Popover automatically repositions if preferred position doesn't fit viewport * - Use `hasNoContentPadding` to remove default content padding for custom layouts * - Listen to `popoverOpen` and `popoverClose` events for state management * - Popover closes automatically when origin element scrolls out of view */ declare class EuiPopoverComponent implements AfterViewInit, OnDestroy, OnInit, OnChanges { /** * Optional title text to display in the popover header. * When provided, adds a title element at the top of the popover content. */ title: string; /** * Determines the preferred placement of the popover relative to its origin element. * The component will attempt to use this position first, falling back to alternatives * if there's not enough space in the viewport. * * @default 'bottom' */ position: EuiPopoverPosition; /** * Custom width for the popover. * Can be specified in any valid CSS unit (px, %, em, etc). * When null, the popover width is determined by its content. * * @default null */ width: string; /** * Whether to show a semi-transparent backdrop behind the popover. * When true, creates a visual overlay that dims the rest of the UI. * * @default false */ hasBackDrop: boolean; /** * Whether to show a close button in the top-right corner of the popover. * When clicked, the close button will dismiss the popover. * * @default true */ hasCloseButton: boolean; /** * Whether the popover can be dismissed by clicking outside its boundaries. * When false, the popover will remain open until explicitly closed via code * or by clicking the close button (if available). * * @default true */ isDismissable: boolean; /** * If the content of the popover should receive a default padding * * @default false */ hasNoContentPadding: boolean; /** * Event emitted when a click occurs outside the popover boundaries. * Only emitted when isDismissable is true. */ outsideClick: EventEmitter; /** * Event emitted when the popover is opened. * Fires after the popover content has been attached to the DOM and positioned. */ popoverOpen: EventEmitter; /** * Event emitted when the popover is closed. * Fires after the popover content has been removed from the DOM. */ popoverClose: EventEmitter; position$: Observable<[EuiPopoverPosition, DOMRect]>; templatePortalContent: TemplateRef; private templatePortal; private overlayRef; private destroy$; private isOpen$; private scrollDispatcherSubscription; private origin; private preferredPositons; private positionStrategy; private positionStrategyUpdate$; private overlay; private viewContainerRef; private scrollDispatcher; private baseStatesDirective; ngOnChanges(c: SimpleChanges): void; ngOnInit(): void; ngAfterViewInit(): void; ngOnDestroy(): void; /** * Whether the eui-popover is open. * * @usageNotes * ```HTML * * @if (popover.isOpen) { * * } * * ``` * @returns A boolean with value `true` when open, otherwise `false`. */ get isOpen(): boolean; /** * Updates the position strategy when content changes. * Recalculates and updates the overlay position to handle content size changes. */ onContentChange(): void; /** * Opens the popover relative to the provided origin element. * Sets up scroll monitoring, position strategy, and attaches the popover content to the overlay. * Emits the popoverOpen event when complete. * * @param origin - Reference to the element that triggers the popover */ openPopover(origin: ElementRef): void; /** * Closes the popover. * Cleans up subscriptions, disposes the overlay, and emits the popoverClose event. */ closePopover(): void; /** * Handles keyboard events to allow closing the popover with the Escape key. * Can be used as an alternative to the close button or when hasCloseButton is false. * * @param event - The keyboard event */ onKeyDown(event: KeyboardEvent): void; /** * Checks whether the origin element is currently visible within the scrollable parent's viewport. * Used to determine if the popover should remain open during scroll events. * * @param origin - The HTML element that triggers the popover * @param scrollableParent - The scrollable container element * @returns True if the origin element is visible in the viewport, otherwise false */ private isVisible; /** * Creates and returns a position strategy for the overlay. * Configures the overlay to be positioned relative to the origin element * with fallback positions if the preferred one doesn't fit. * * @returns A flexible connected position strategy configured for the popover */ private getPositionStrategy; /** * Sets up the position stream for the arrow positioning directive. * Creates an observable that emits the current popover position and the origin element's bounding rectangle * whenever the popover's position changes. */ private setPositionStream; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_hasBackDrop: unknown; static ngAcceptInputType_hasCloseButton: unknown; static ngAcceptInputType_isDismissable: unknown; static ngAcceptInputType_hasNoContentPadding: unknown; } declare const EUI_POPOVER: readonly [typeof EuiPopoverComponent]; export { EUI_POPOVER, EuiPopoverComponent }; //# sourceMappingURL=eui-components-eui-popover.d.ts.map