import { IEventEmitter } from '@breadstone/mosaik-elements'; import { ISlottable } from '../../../Behaviors/Slottable'; import type { IPortalAttachedEventDetail, IPortalDetachedEventDetail } from '../../../events'; import { CustomElement } from '../../Abstracts/CustomElement'; import type { IConnectedCallback } from '../../Abstracts/Interfaces/IConnectedCallback'; import type { IDisconnectedCallback } from '../../Abstracts/Interfaces/IDisconnectedCallback'; import type { IPortalElementProps } from './IPortalElementProps'; import { PortalProjectionElement } from './PortalProjectionElement'; /** * Represents the `IPortalElementEvents` interface. * * @public */ export interface IPortalElementEvents { attached: IEventEmitter; detached: IEventEmitter; } declare const PortalElement_base: import("../../../../Index").ControlBehaviorReturn; /** * Portal - A teleportation mechanism that renders content in a different location in the DOM tree. * * @description * The Portal component enables rendering content outside its parent component's DOM hierarchy while maintaining * logical component relationships. It projects slotted content to a destination element (typically document.body * or a portal host), which is essential for modals, dialogs, toasts, and other overlay components that need to * escape z-index stacking contexts, overflow constraints, and CSS containment. The portal automatically manages * content lifecycle, style adoption, and cleanup when disconnected. * * @name Portal * @element mosaik-portal * @category Primitives * * @slot - The content to be portaled to the destination * * @fires portalAttached {PortalAttachedEvent} - Fired when the portal is attached to the DOM * @fires portalDetached {PortalDetachedEvent} - Fired when the portal is detached from the DOM * * @example * Basic portal to document body: * ```html *
* * This renders in document.body * *
* ``` * * @example * Portal to named host: * ```html * * * * * * Content renders in modals host * * ``` * * @example * Toast notification portal: * ```html * *
Operation successful!
*
* * ``` * * @public */ export declare class PortalElement extends PortalElement_base implements IConnectedCallback, IDisconnectedCallback, IPortalElementProps, IPortalElementEvents, ISlottable { private readonly _attached; private readonly _detached; private _projection; private _destination; private _adoptedStyles; private _isProjected; /** * @public */ constructor(); /** * Returns the `is` property. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `destination` property. * * @public * @attr */ get destination(): string | Element; set destination(value: string | Element); /** * Gets or sets the `adoptedStyles` property. * * @public */ get adoptedStyles(): Array | undefined; set adoptedStyles(value: Array | undefined); /** * Gets or sets the `isProjected` property. * * @public * @attr * @readonly */ get isProjected(): boolean; private set isProjected(value); /** * Gets the `projection` property. * * @public * @readonly */ get projection(): PortalProjectionElement | null; /** * Called when a projection is attached to the DOM. * Provides reference to `IPortalAttachedEventDetail` as event argument. * * @public * @readonly * @eventProperty * @type IEventEmitter */ get attached(): IEventEmitter; /** * Called when a projection is detached from the DOM. * Provides reference to `IPortalDetachedEventDetail` as event argument. * * @public * @readonly * @eventProperty * @type IEventEmitter */ get detached(): IEventEmitter; /** * @public * @overload */ onSlotChanges(slotName?: string): void; /** * @public * @override */ disconnectedCallback(): void; /** * @protected * @override */ protected onApplyTemplate(): void; /** * @protected */ protected attach(): void; /** * @protected */ protected detach(): void; /** * @private */ private getDestination; /** * @private */ private createProjection; /** * @private */ private appendElements; } /** * @public */ export declare namespace PortalElement { type Props = IPortalElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-portal': PortalElement; } } export {}; //# sourceMappingURL=PortalElement.d.ts.map