import { IAnimatable } from '../../../Behaviors/Animatable'; import { type IAttachable } from '../../../Behaviors/Attachable'; import { ISlottable } from '../../../Behaviors/Slottable'; import { Placement } from '../../../Types/Placement'; import { Trigger } from '../../../Types/Trigger'; import { IOverlayElement, OverlayElement } from '../../Overlays/Abstracts/OverlayElement'; import { IPopupElementProps } from './IPopupElementProps'; declare const PopupElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Animatable").IAnimatableProps & IAnimatable) & (abstract new (...args: Array) => IAttachable) & (abstract new (...args: Array) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & (abstract new (...args: Array) => import("../../../Behaviors/Elevatable").IElevatableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & typeof OverlayElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Popup - A versatile floating container that appears relative to an anchor element. * * @description * The Popup component provides a flexible way to display content in a floating container * that can be positioned relative to any anchor element. Unlike Tooltip which is text-focused, * Popup supports rich interactive content with features like modal backdrop, focus trapping, * multiple trigger modes, and extensive positioning options. * * @name Popup * @element mosaik-popup * @category Primitives * * @slot - Default slot for the trigger/anchor element. * @slot content - The popup content to display. * @slot header - Optional header content for the popup. * @slot footer - Optional footer content for the popup. * * @csspart portal - The portal container. * @csspart popup - The floating popup container. * @csspart body - The main body of the popup. * @csspart header - The header section. * @csspart content - The content projection area. * @csspart footer - The footer section. * @csspart backdrop - The modal backdrop (when has-backdrop=true). * * @fires opened {OpenedEvent} - Fired when the popup is opened. * @fires closed {ClosedEvent} - Fired when the popup is closed. * * @example * ```html * * * Open Popup *
*

Popup content here

*
*
* * * * Open Modal *
*

Dialog Title

*

Modal content

*
* Close *
*
*
* * * * Hover me *
*

This appears on hover

*
*
* ``` * * @public */ export declare class PopupElement extends PopupElement_base implements IPopupElementProps, IAttachable, ISlottable, IAnimatable, IOverlayElement { private _floatingElement; private readonly _projectionController; private readonly _clickOutsideController; private readonly _focusTrapController; private _placement; private _placements; private _distance; private _skidding; private _trigger; private _showDelay; private _hideDelay; private _staysOpen; private _closeOnScroll; private _interactive; private _flip; private _shift; private _trapFocus; private _hoverTimeout; private _blurSubscription; private _focusSubscription; private _clickSubscription; private _mouseoverSubscription; private _mouseoutSubscription; private _scrollSubscription; private _slottedControl; private _anchorReady; private _previousActiveElement; /** * @public */ constructor(); /** * Returns the `is` property. * * @public * @static * @readonly */ static get is(): string; /** * Gets the anchor element for the popup. * * @public * @readonly */ get anchorElement(): HTMLElement | null; /** * Gets whether the floating element should be active. * * @public * @readonly */ get isFloatingActive(): boolean; /** * Gets whether slotted content is projected into the popup. * * @public * @readonly */ get hasSlottedContent(): boolean; /** * Gets or sets the `placement` property. * * @public * @attr */ get placement(): Placement; set placement(value: Placement); /** * Gets or sets the `placements` property (fallback placements). * * @public * @attr */ get placements(): Array; set placements(value: Array); /** * Gets or sets the `distance` property (horizontal offset from anchor). * * @public * @attr */ get distance(): number; set distance(value: number); /** * Gets or sets the `skidding` property (vertical offset along anchor). * * @public * @attr */ get skidding(): number; set skidding(value: number); /** * Gets or sets the `trigger` property. * * @public * @attr */ get trigger(): Trigger; set trigger(value: Trigger); /** * Gets or sets the `showDelay` property. * * @public * @attr */ get showDelay(): number; set showDelay(value: number); /** * Gets or sets the `hideDelay` property. * * @public * @attr */ get hideDelay(): number; set hideDelay(value: number); /** * Gets or sets the `staysOpen` property. * * @public * @attr */ get staysOpen(): boolean; set staysOpen(value: boolean); /** * Gets or sets the `closeOnScroll` property. * * @public * @attr */ get closeOnScroll(): boolean; set closeOnScroll(value: boolean); /** * Gets or sets the `interactive` property. * * @public * @attr */ get interactive(): boolean; set interactive(value: boolean); /** * Gets or sets the `flip` property. * * @public * @attr */ get flip(): boolean; set flip(value: boolean); /** * Gets or sets the `shift` property. * * @public * @attr */ get shift(): boolean; set shift(value: boolean); /** * Gets or sets the `trapFocus` property. * * @public * @attr */ get trapFocus(): boolean; set trapFocus(value: boolean); /** * Opens the popup. * * @public * @override */ open(): Promise; /** * Closes the popup. * * @public * @override */ close(): Promise; /** * Toggles the popup open/closed state. * * @public */ toggle(): Promise; /** * @public * @override */ connectedCallback(): void; /** * @public * @override */ disconnectedCallback(): void; /** * @protected * @override */ protected onApplyTemplate(): void; /** * @protected * @override */ protected firstUpdated(changedProperties: Map): void; /** * Checks if a trigger is active. * * @private */ private hasTrigger; /** * Handles changes to the default slot. * * @private */ private onDefaultSlotChange; /** * Updates the floating element's anchor reference. * * @private */ private updateFloatingAnchor; /** * Binds event listeners to the control element. * * @private */ private bindControlEvents; /** * Unbinds event listeners from the control element. * * @private */ private unbindControlEvents; /** * Handles click on the control element. * * @private */ private onControlClick; /** * Handles mouse enter on the control element. * * @private */ private onControlMouseEnter; /** * Handles mouse leave on the control element. * * @private */ private onControlMouseLeave; /** * Handles focus on the control element. * * @private */ private onControlFocus; /** * Handles blur on the control element. * * @private */ private onControlBlur; /** * Checks if the mouse is currently over the popup content. * * @private */ private isMouseOverPopup; /** * Checks if the popup or anchor contains focus. * * @private */ private containsFocus; /** * Handles hover events on the popup content (for staysOpen behavior). * * @private */ onPopupMouseEnter(): void; /** * Handles mouse leave from the popup content. * * @private */ onPopupMouseLeave(): void; /** * @private * @template */ onBackdrop(): void; /** * @protected */ protected onIsOpenPropertyChange(): void; /** * @protected */ protected onForPropertyChange(): void; /** * @protected */ protected onTriggerPropertyChange(): void; /** * @protected */ protected onPlacementPropertyChange(): void; /** * @protected */ protected onDistancePropertyChange(): void; /** * @protected */ protected onSkiddingPropertyChange(): void; /** * @protected */ protected onDisabledPropertyChange(): void; } /** * @public */ export declare namespace PopupElement { type Props = IPopupElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-popup': PopupElement; } } export {}; //# sourceMappingURL=PopupElement.d.ts.map