import { FocusTrap } from "@a11y/focus-trap"; import { TemplateResult } from "lit-element"; import { Backdrop } from "../backdrop/backdrop"; import { IOverlayBehaviorBaseProperties, IOverlayBehaviorProperties, OverlayBehavior } from "../behavior/overlay/overlay-behavior"; import { AriaRole } from "../util/aria"; import { EventListenerSubscription } from "../util/event"; import { IAnchorPosition, IPositionStrategy, OriginX, OriginY } from "../util/position"; /** * Base properties of the popover. */ export interface IPopoverBaseProperties extends IPositionStrategy, IOverlayBehaviorBaseProperties { closeOnClick: boolean; role: AriaRole; noFallback: boolean; anchor?: Element | string; } /** * Properties of the popover. */ export interface IPopoverProperties extends IPopoverBaseProperties, IOverlayBehaviorProperties { anchorOpenEvents?: string[]; anchorCloseEvents?: string[]; } /** * Configuration for the popover. */ export interface IPopoverConfig extends Partial { } /** * Default configuration for the popover. */ export declare const defaultPopoverConfig: IPopoverConfig; /** * Contextual anchored elements. * @slot - Default content. * @cssprop --popover-z-index - z-index. */ export declare class Popover extends OverlayBehavior implements IPopoverProperties { static styles: import("lit-element").CSSResult[]; /** * Makes the popover close when it is clicked upon. * @attr */ closeOnClick: boolean; /** * Whether a fallback strategy for the positioning should be used when there are no room for the popover. * @attr */ noFallback: boolean; /** * X origin of the transform. * @attr */ transformOriginX: OriginX; /** * Y origin of the transform. * @attr */ transformOriginY: OriginY; /** * X origin of the anchored point. * @attr */ anchorOriginX: OriginX; /** * Y origin of the anchored point. * @attr */ anchorOriginY: OriginY; /** * Role of the popover. * @attr */ role: AriaRole; /** * Anchor element or query. * @attr */ anchor?: Element | string; /** * Events on the anchor that makes the popover open itself. * @attr */ anchorOpenEvents?: string[]; /** * Events on the anchor that makes the popover close itself. * @attr */ anchorCloseEvents?: string[]; /** * Content of the popover. */ protected $content: FocusTrap; /** * Container element. */ protected $container: HTMLElement; /** * Backdrop element. */ protected $backdrop: Backdrop; /** * Listeners that reacts when the user clicks outside the popover. * Attached when when opened. */ private clickAwayListeners; /** * Listeners that opens the popover when event happens on the anchor. */ private anchorOpenEventListeners; /** * Listeners that closes the popover when event happens on the anchor. */ private anchorCloseEventListeners; /** * Position of the anchor. */ private anchorPosition?; /** * Focus trap. */ get $focusTrap(): FocusTrap; /** * Tears down the component. */ disconnectedCallback(): void; /** * Reacts on the properties changed. * @param props */ protected updated(props: Map): void; /** * Shows the popover at a specified screen position. * @param position * @param config */ showAtPosition(position: IAnchorPosition, config?: IPopoverConfig): Promise; /** * The current position strategy of the popover. * @returns {IPositionStrategy} */ protected getPositionStrategy(): IPositionStrategy; /** * Adds event listeners and focuses the first element after the popover has been shown. */ protected didShow(): void; /** * Resets the component after the popover has been hidden. */ protected didHide(result?: R): void; /** * Attaches events listeners to the anchor. * @param listeners * @param events * @param cb */ protected attachEventListenersToAnchor(listeners: EventListenerSubscription[], events: string[], cb: (e: Event) => void): void; /** * Throws an error that no anchor exists. */ protected throwNoAnchorError(): void; /** * Attaches the click away listeners. */ protected attachClickAwayListeners(): void; /** * Detaches the click away listeners. */ protected detachClickAwayListeners(): void; /** * Animates the popover in. */ protected animateIn(): void; /** * Animates the popover out. * @param result */ protected animateOut(result: R): void; /** * Updates the position of the popover. */ protected updatePosition(): void; /** * Returns the origin of the bounding box. */ private getAnchor; /** * Handles the click event on the popover. */ private onContainerClick; /** * Renders the content. */ protected renderContent(): TemplateResult; /** * Returns the template for the element. */ protected render(): TemplateResult; } declare global { interface HTMLElementTagNameMap { "wl-popover": Popover; } }