import { ICloseable, ICloseableProps, type ICloseableEvents } from '../../../Behaviors/Closeable'; import { type IOpenable, type IOpenableEvents } from '../../../Behaviors/Openable'; import { CustomElement } from '../../Abstracts/CustomElement'; export interface IOverlayElement { open(): Promise; close(): Promise; } /** * Represents the `IOverlayElementProps` interface. * * @public */ export interface IOverlayElementProps extends ICloseableProps { isOpen: boolean; hasBackdrop: boolean; pressEscapeToClose: boolean; clickOutsideToClose: boolean; } /** * Default values for OverlayElement properties. * * @public */ export declare namespace IOverlayElementProps { const DEFAULTS: IOverlayElementProps; } declare const OverlayElement_base: import("../../../../Index").ControlBehaviorReturn, IOpenable & IOpenableEvents>; /** * Overlay - Abstract base class for floating overlay UI elements with open/close lifecycle. * * @description * The OverlayElement provides foundational functionality for creating floating overlay components * such as modals, dialogs, popovers, dropdowns, tooltips, and side panels. This abstract base * class manages the complete overlay lifecycle including open/close state transitions, backdrop * rendering, keyboard interaction (Escape key to close), click-outside-to-close behavior, and * proper stacking context management for nested overlays. It combines the Openable and Closeable * behaviors to provide a consistent API for showing and hiding overlays, with built-in support * for async operations and cancellable close events. The class handles critical UX patterns like * ensuring only the topmost overlay responds to Escape key presses and proper cleanup of global * event listeners to prevent memory leaks. * * @name Overlay * @category Overlays * * @dependency {Openable} - Open action and lifecycle management * @dependency {Closeable} - Close action and lifecycle management * * @fires opened {OpenedEvent} - Dispatched when the overlay completes its open transition (isOpen becomes true) * @fires closed {ClosedEvent} - Dispatched when the overlay completes its close transition (isOpen becomes false) * * @example * Creating a custom modal dialog: * ```typescript * @Component({ * selector: 'mosaik-modal', * template: modalTemplate * }) * export class ModalElement extends OverlayElement { * public constructor() { * super(); * this.hasBackdrop = true; * this.pressEscapeToClose = true; * this.clickOutsideToClose = false; * } * } * ``` * * @example * Basic overlay usage: * ```html * *

Overlay Content

*

This is an overlay panel.

*
* ``` * * @example * Programmatic overlay control with async/await: * ```typescript * const overlay = document.querySelector('mosaik-custom-overlay'); * * // Open the overlay * await overlay.open(); * console.log('Overlay is now open'); * * // Close the overlay (returns false if canceled) * const wasClosed = await overlay.close(); * if (wasClosed) { * console.log('Overlay was closed successfully'); * } * ``` * * @example * Handling nested overlays with proper Escape key behavior: * ```typescript * // When multiple overlays are open, only the topmost responds to Escape * const dialog1 = document.querySelector('#dialog-1'); * const dialog2 = document.querySelector('#dialog-2'); * * await dialog1.open(); // First overlay opens * await dialog2.open(); // Second overlay opens on top * * // Pressing Escape closes dialog2 (topmost), dialog1 remains open * // Pressing Escape again closes dialog1 * ``` * * @example * Cancellable close with event handling: * ```typescript * overlay.closed.subscribe((event) => { * if (hasUnsavedChanges()) { * event.cancel = true; // Prevent closing * showConfirmDialog(); * } * }); * ``` * * @abstract * @public */ export declare abstract class OverlayElement extends OverlayElement_base implements IOverlayElementProps, IOpenable, ICloseable, IOpenableEvents, ICloseableEvents, IOverlayElement { private _isOpen; private _hasBackdrop; private _pressEscapeToClose; private _clickOutsideToClose; private _boundHandleKeyDown; /** * @public */ constructor(); /** * Gets or sets the `isOpen` property. * * @public * @attr */ get isOpen(): boolean; set isOpen(value: boolean); /** * Gets or sets the `hasBackdrop` property. * * @public * @attr */ get hasBackdrop(): boolean; set hasBackdrop(value: boolean); /** * Gets or sets the `pressEscapeToClose` property. * * @public * @attr */ get pressEscapeToClose(): boolean; set pressEscapeToClose(value: boolean); /** * Gets or sets the `clickOutsideToClose` property. * * @public * @attr */ get clickOutsideToClose(): boolean; set clickOutsideToClose(value: boolean); /** * @public * @override */ connectedCallback(): void; /** * @public * @override */ disconnectedCallback(): void; /** * Opens the `OverlayElement`. * * @public * @override */ open(): Promise; /** * Closes the `OverlayElement`. * * @public * @override */ close(): Promise; /** * This method is invoked when the `isOpen` property is changed. * * @protected */ protected onIsOpenChanged(_prev: boolean, newValue: boolean): void; protected onHasBackdropChanged(_prev: boolean, next: boolean): void; /** * Handles the keydown event for the escape key. * Only closes if this overlay is the topmost one (last in DOM order among open overlays). * * @private */ private handleKeyDown; /** * Adds the escape key listener to the document. * * @private */ private addEscapeListener; /** * Removes the escape key listener from the document. * * @private */ private removeEscapeListener; } export {}; //# sourceMappingURL=OverlayElement.d.ts.map