import * as i0 from '@angular/core'; import { OnInit, OnDestroy, AfterViewInit, ChangeDetectorRef, ElementRef, ComponentRef, OnChanges, EventEmitter, TemplateRef, QueryList, SimpleChanges, Injector, InjectionToken } from '@angular/core'; import { ComponentType, TemplatePortal, ComponentPortal, CdkPortalOutletAttachedRef } from '@angular/cdk/portal'; import { BehaviorSubject, Observable } from 'rxjs'; import { OverlayRef } from '@angular/cdk/overlay'; import * as i1 from '@eui/components/shared'; import { BaseStatesDirective } from '@eui/components/shared'; type EuiDialogVerticalPosition = 'top'; declare class EuiDialogConfig implements EuiDialogInterface { e2eAttr: string; acceptLabel: string; dismissLabel: string; width: string; height: string; isFullScreen: boolean; hasCloseButton: boolean; hasAcceptButton: boolean; hasDismissButton: boolean; hasMobileCustomSize: boolean; hasClosedOnClickOutside: boolean; hasClosedOnEscape: boolean; isHandleCloseOnDismiss: boolean; isHandleCloseOnClose: boolean; isHandleCloseOnAccept: boolean; isHandleCloseOnClickOutside: boolean; isHandleCloseOnEscape: boolean; hasFooter: boolean; isMessageBox: boolean; classList: any; constructor(values: EuiDialogInterface); } interface EuiDialogInterface { dialogId?: string; e2eAttr?: string; title?: string; variant?: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'accent' | string; acceptLabel?: string; dismissLabel?: string; width?: string; height?: string; isFullScreen?: boolean; headerComponent?: { component: ComponentType; config?: HCC; }; bodyComponent?: { component: ComponentType; config?: BCC; }; footerComponent?: { component: ComponentType; config?: FCC; }; header?: TemplatePortal; content?: TemplatePortal | string | null; footer?: TemplatePortal; hasCloseButton?: boolean; hasAcceptButton?: boolean; hasDismissButton?: boolean; hasMobileCustomSize?: boolean; hasClosedOnClickOutside?: boolean; hasClosedOnEscape?: boolean; isHandleCloseOnDismiss?: boolean; isHandleCloseOnClose?: boolean; isHandleCloseOnAccept?: boolean; isHandleCloseOnClickOutside?: boolean; isHandleCloseOnEscape?: boolean; isDraggable?: boolean; hasNoBodyPadding?: boolean; hasFooter?: boolean; isMessageBox?: boolean; verticalPosition?: EuiDialogVerticalPosition; classList?: string; overlayRef?: OverlayRef; open?: () => void; init?: (instances: EuiDialogComponentInstances) => void; clickOutside?: (instances: EuiDialogComponentInstances) => void; escape?: (instances: EuiDialogComponentInstances) => void; close?: (instances: EuiDialogComponentInstances) => void; dismiss?: (instances: EuiDialogComponentInstances) => void; accept?: (instances: EuiDialogComponentInstances) => void; } declare class EuiDialogComponentInstances { headerComponent: HC; bodyComponent: BC; footerComponent: FC; } /** * @description * Container component that orchestrates the rendering and lifecycle of dialog content. * Manages three distinct sections (header, body, footer) that can be rendered as either * template portals or component portals. Handles dialog actions (accept/dismiss), button * state management, and accessibility attributes. Typically instantiated by the dialog * service and should not be used directly in application code. */ declare class EuiDialogContainerComponent implements OnInit, OnDestroy, AfterViewInit { cd: ChangeDetectorRef; dialogContainerConfig: EuiDialogInterface; isHeaderTemplatePortal: boolean; isBodyTemplatePortal: boolean; isFooterTemplatePortal: boolean; isHeaderComponentPortal: boolean; isBodyComponentPortal: boolean; isFooterComponentPortal: boolean; headerComponentPortal: ComponentPortal; bodyComponentPortal: ComponentPortal; footerComponentPortal: ComponentPortal; componentInstances: EuiDialogComponentInstances; acceptButtonDisabled$: BehaviorSubject; dismissButtonDisabled$: BehaviorSubject; dialogBody: ElementRef; string: string; /** * Accessible label for the close button in the dialog header. * Used by screen readers to announce the button's purpose. * @default 'Close dialog' */ closeButtonAriaLabel: string; protected isBodyScrollable: i0.WritableSignal; private destroy$; private injector; ngOnInit(): void; ngOnDestroy(): void; ngAfterViewInit(): void; get getComponentInstances(): EuiDialogComponentInstances; get getPortalOutlet(): TemplatePortal | null; get dialogContainerConfigContent(): string; portalAttached(attachedRef: CdkPortalOutletAttachedRef, component: 'headerComponent' | 'bodyComponent' | 'footerComponent'): void; closeDialog(): void; onDismiss(): void; onAccept(): void; /** * Based on certain conditions returns the id of the body content to the aria-describedby attr of the container */ getContentId(): string; /** * Disable Accept button of default eui-dialog footer. */ disableAcceptButton(): void; /** * Enable Accept button of default eui-dialog footer. */ enableAcceptButton(): void; /** * Disable Dismiss button of default eui-dialog footer. */ disableDismissButton(): void; /** * Enable Dismiss button of default eui-dialog footer. */ enableDismissButton(): void; onScroll(): void; scrollToBottom(): void; scrollToTop(): void; private createComponentPortal; private createInjector; /** * Checks if the dialog body is scrollable in order to make the scrollbar focusable or not */ private checkScrollability; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵcmp: i0.ɵɵComponentDeclaration, "eui-dialog-container", never, { "closeButtonAriaLabel": { "alias": "closeButtonAriaLabel"; "required": false; }; }, {}, never, never, true, never>; } declare class OpenedDialog implements OpenedDialogInterface { id: string; order: number; overlayRef: OverlayRef; containerRef: ComponentRef>; constructor(values: OpenedDialogInterface); } interface OpenedDialogInterface { id: string; order: number; overlayRef: OverlayRef; containerRef: ComponentRef>; } /** * @description * A modal dialog component that displays content in an overlay above the main application. * Supports customizable headers, footers, action buttons, and various interaction behaviors. * Can be opened programmatically via the openDialog method or controlled declaratively. * Integrates with EuiDialogService for centralized dialog management and supports features * like dragging, fullscreen mode, message box mode, and flexible positioning. * * @usageNotes * ### Using Dialog Service * ```typescript * // Component * constructor(private euiDialogService: EuiDialogService) {} * * openDialog(): void { * const config = new EuiDialogConfig({ * title: 'Confirm Action', * content: 'Are you sure you want to proceed?', * accept: () => console.log('Accepted'), * dismiss: () => console.log('Dismissed') * }); * this.euiDialogService.openDialog(config); * } * * // Template * * ``` * * ### Template Reference * ```html * * * *

Dialog content goes here

*
* ``` * * ### Custom Header and Footer * ```html * * *

Custom Header

*
* *

Main content

* * * * *
* ``` * * ### Accessibility * - Automatically manages focus trap within dialog * - Escape key closes dialog by default (configurable via `hasClosedOnEscape`) * - Close button has proper ARIA label * - Dialog has `role="dialog"` and `aria-modal="true"` * - Focus returns to trigger element on close * - Use `aria-haspopup="dialog"` on trigger buttons * * ### Notes * - Use `isMessageBox` for critical confirmations that require explicit user action * - `isDraggable` enables repositioning for multi-dialog scenarios * - `isFullScreen` automatically sets width to 98vw and height to 97vh * - `hasClosedOnClickOutside` allows backdrop click to close dialog * - Manual close control via `isHandleCloseOn*` properties for custom workflows * - `verticalPosition` controls dialog placement (top, center, bottom) * - Methods like `disableAcceptButton()` and `scrollToBottom()` available for dynamic control */ declare class EuiDialogComponent implements AfterViewInit, OnDestroy, OnInit, OnChanges { /** * End-to-end testing attribute identifier for the dialog element. * @default 'eui-dialog' */ e2eAttr: string; /** * Title text displayed in the dialog header. * When changed after dialog is opened, the title updates dynamically. */ title: string; /** * Translation key or label text for the accept button. * @default 'eui.OK' */ acceptLabel: string; /** * Translation key or label text for the dismiss button. * @default 'eui.CANCEL' */ dismissLabel: string; /** * Vertical alignment position of the dialog within the viewport. * Controls whether the dialog appears at top, center, or bottom of the screen. */ verticalPosition: EuiDialogVerticalPosition; /** * Width of the dialog. Accepts CSS units (px, %, vw, etc.). * Overridden to '98vw' when isFullScreen is true. * @default '50%' */ width: string; /** * Height of the dialog. Accepts CSS units (px, %, vh, auto, etc.). * Overridden to '97vh' when isFullScreen is true. * @default 'auto' */ height: string; /** * Enables fullscreen mode, automatically setting width to 98vw and height to 97vh. * @default false */ isFullScreen: boolean; /** * Controls visibility of the close (X) button in the dialog header. * Automatically set to false when isMessageBox is true. * @default true */ hasCloseButton: boolean; /** * Controls visibility of the accept button in the dialog footer. * @default true */ hasAcceptButton: boolean; /** * Controls visibility of the dismiss button in the dialog footer. * @default true */ hasDismissButton: boolean; /** * Enables custom sizing behavior on mobile devices. * When true, applies mobile-specific width and height adjustments. * @default false */ hasMobileCustomSize: boolean; /** * Enables automatic dialog closure when clicking outside the dialog boundaries. * Works in conjunction with isHandleCloseOnClickOutside for manual control. * @default false */ hasClosedOnClickOutside: boolean; /** * Enables automatic dialog closure when pressing the Escape key. * Automatically set to false when isMessageBox is true. * @default true */ hasClosedOnEscape: boolean; /** * Prevents automatic dialog closure when dismiss button is clicked. * When true, developer must manually handle closure via the dismiss event. * @default false */ isHandleCloseOnDismiss: boolean; /** * Prevents automatic dialog closure when close (X) button is clicked. * When true, developer must manually handle closure via the dialogClose event. * @default false */ isHandleCloseOnClose: boolean; /** * Prevents automatic dialog closure when accept button is clicked. * When true, developer must manually handle closure via the accept event. * @default false */ isHandleCloseOnAccept: boolean; /** * Prevents automatic dialog closure when clicking outside the dialog. * When true, developer must manually handle closure via the clickOutside event. * Requires hasClosedOnClickOutside to be true to have effect. * @default false */ isHandleCloseOnClickOutside: boolean; /** * Prevents automatic dialog closure when pressing Escape key. * When true, developer must manually handle closure via the escape event. * Requires hasClosedOnEscape to be true to have effect. * @default false */ isHandleCloseOnEscape: boolean; /** * Enables message box mode, which disables Escape key closure and hides the close button. * Intended for dialogs requiring explicit user action via accept or dismiss buttons. * @default false */ isMessageBox: boolean; /** * Enables drag-and-drop functionality, allowing users to reposition the dialog. * @default false */ isDraggable: boolean; /** * Removes default padding from the dialog body content area. * Useful for custom layouts or full-width content. * @default false */ hasNoBodyPadding: boolean; /** * Controls visibility of the entire footer section containing action buttons. * @default true */ hasFooter: boolean; /** * Additional CSS class names to apply to the dialog container. * Allows custom styling without modifying component styles. * @default null */ classList: string; /** * Emitted when user clicks outside the dialog boundaries. * Fires regardless of hasClosedOnClickOutside setting. */ clickOutside: EventEmitter; /** * Emitted when user presses the Escape key while dialog has focus. * Fires regardless of hasClosedOnEscape setting. */ escape: EventEmitter; /** * Emitted immediately after the dialog opens and becomes visible. */ dialogOpen: EventEmitter; /** * Emitted when the close (X) button is clicked. * Dialog closes automatically unless isHandleCloseOnClose is true. */ dialogClose: EventEmitter; /** * Emitted when the dismiss button is clicked. * Dialog closes automatically unless isHandleCloseOnDismiss is true. */ dismiss: EventEmitter; /** * Emitted when the accept button is clicked. * Dialog closes automatically unless isHandleCloseOnAccept is true. */ accept: EventEmitter; content: string | TemplatePortal; isOpen$: BehaviorSubject; templateRefHeader: TemplateRef; templateRefContent: TemplateRef; templateRefFooter: TemplateRef; euiDialogHeaderDirective: QueryList; euiDialogFooterDirective: QueryList; baseStatesDirective: BaseStatesDirective; private dialog; private templatePortalHeader; private templatePortalContent; private templatePortalFooter; private destroy$; private viewContainerRef; private euiDialogService; ngOnChanges(changes: SimpleChanges): void; ngOnInit(): void; ngAfterViewInit(): void; ngOnDestroy(): void; /** * Whether the eui-dialog is open. * * @usageNotes * ```html * * \@if (dialog.isOpen) { * * } * * ``` * @returns A boolean with value `true` when open, otherwise `false`. */ get isOpen(): boolean; /** * Open a dialog. * * @returns A dialog object of type `OpenedDialog` */ openDialog(): OpenedDialog; /** * Close a Dialog */ closeDialog(): void; /** * Disable Accept button of default eui-dialog footer. */ disableAcceptButton(): void; /** * Enable Accept button of default eui-dialog footer. */ enableAcceptButton(): void; /** * Disable Dismiss button of default eui-dialog footer. */ disableDismissButton(): void; /** * Enable Dismiss button of default eui-dialog footer. */ enableDismissButton(): void; /** * Scroll to the bottom of the content */ scrollToBottom(): void; /** * Scroll to the top of the content */ scrollToTop(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_isFullScreen: unknown; static ngAcceptInputType_hasCloseButton: unknown; static ngAcceptInputType_hasAcceptButton: unknown; static ngAcceptInputType_hasDismissButton: unknown; static ngAcceptInputType_hasMobileCustomSize: unknown; static ngAcceptInputType_hasClosedOnClickOutside: unknown; static ngAcceptInputType_hasClosedOnEscape: unknown; static ngAcceptInputType_isHandleCloseOnDismiss: unknown; static ngAcceptInputType_isHandleCloseOnClose: unknown; static ngAcceptInputType_isHandleCloseOnAccept: unknown; static ngAcceptInputType_isHandleCloseOnClickOutside: unknown; static ngAcceptInputType_isHandleCloseOnEscape: unknown; static ngAcceptInputType_isMessageBox: unknown; static ngAcceptInputType_isDraggable: unknown; static ngAcceptInputType_hasNoBodyPadding: unknown; static ngAcceptInputType_hasFooter: unknown; } declare class EuiDialogHeaderDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class EuiDialogFooterDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @description * Service for programmatically creating and managing modal dialog windows. * Provides centralized dialog lifecycle management including opening, closing, and tracking multiple dialogs. * Built on Angular CDK Overlay for positioning, backdrop, and scroll blocking. * Supports custom header, body, and footer components with dependency injection for parent component providers. * Manages dialog stack with automatic z-index handling for multiple simultaneous dialogs. * Provides button state control methods for default dialog footer actions. * Injected at root level for application-wide dialog management. */ declare class EuiDialogService implements OnDestroy { private overlay; private injector; private overlayRef; private openedDialogs$; private destroy$; ngOnDestroy(): void; /** * Open a dialog. * * @param config Configuration applied to the dialog. * @param parentInjector The injector of the calling component, used to expose its local providers to the dynamically created component. * @returns A dialog object of type `OpenedDialog` */ openDialog(config?: EuiDialogInterface, parentInjector?: Injector): OpenedDialog; /** * Close a dialog * * @param dialogId The id of the dialog to close. If not provided the last opened one will be closed. */ closeDialog(dialogId?: string): void; /** * Close all the dialogs. */ closeAllDialogs(): void; /** * Returns an `Observable` with all opened windows. * * @returns `Observable` of `OpenedDialog[]`. */ getOpenedDialog(): Observable; /** * Returns an `Object` with a dialog * * @param dialogId id of the dialog to be returned * @returns `OpenedDialog` */ getDialog(dialogId: string): OpenedDialog; /** * Disable Accept button of default eui-dialog footer. */ disableAcceptButton(): void; /** * Enable Accept button of default eui-dialog footer. */ enableAcceptButton(): void; /** * Disable Dismiss button of default eui-dialog footer. */ disableDismissButton(): void; /** * Enable Dismiss button of default eui-dialog footer. */ enableDismissButton(): void; private createInjector; private getPositionStrategy; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } declare const DIALOG_CONTAINER_CONFIG: InjectionToken; declare const DIALOG_COMPONENT_CONFIG: InjectionToken; declare const EUI_DIALOG: readonly [typeof EuiDialogComponent, typeof EuiDialogHeaderDirective, typeof EuiDialogFooterDirective, typeof EuiDialogContainerComponent]; export { DIALOG_COMPONENT_CONFIG, DIALOG_CONTAINER_CONFIG, EUI_DIALOG, EuiDialogComponent, EuiDialogComponentInstances, EuiDialogConfig, EuiDialogContainerComponent, EuiDialogFooterDirective, EuiDialogHeaderDirective, EuiDialogService }; export type { EuiDialogInterface }; //# sourceMappingURL=eui-components-eui-dialog.d.ts.map