@exadel/esl/modules/esl-popup/core/esl-popup.d.ts

Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components

import { ESLToggleable } from '../../esl-toggleable/core';
import { Rect } from '../../esl-utils/dom';
import { ESLIntersectionEvent } from '../../esl-event-listener/core/targets/intersection.target';
import { ESLPopupPlaceholder } from './esl-popup-placeholder';
import type { ESLToggleableActionParams, ESLA11yType } from '../../esl-toggleable/core';
import type { PopupPositionConfig, PositionType, PositionOriginType, IntersectionRatioRect, AlignmentType } from './esl-popup-position';
import type { ESLPopupActionParams, ProxiedParams } from './esl-popup-types';
export declare class ESLPopup extends ESLToggleable {
    static is: string;
    /** Default params to pass into the popup on show/hide actions */
    static DEFAULT_PARAMS: ESLPopupActionParams;
    /** List of config keys */
    static CONFIG_KEYS: string[];
    /** Classname of popups arrow element */
    arrowClass: string;
    /**
     * Popup position relative to the trigger.
     * Currently supported: 'top', 'bottom', 'left', 'right' position types ('top' by default)
     *                      in combination with alignment 'start' and 'end' (e.g. 'top end', 'right start' etc.)
     */
    position: PositionType;
    /** From which side of the trigger starts the positioning of the popup: 'inner', 'outer' ('outer' by default) */
    positionOrigin: PositionOriginType;
    /** Popup behavior if it does not fit in the window ('fit' by default) */
    behavior: string;
    /** Disable hiding the popup depending on the visibility of the activator */
    disableActivatorObservation: boolean;
    /** Alignment of the popup relative to the tether: 'start', 'end' */
    alignmentTether: AlignmentType;
    /** Safe margins on the edges of the popup. */
    marginTether: number;
    /** Offset of the tether relative to the position on the trigger */
    offsetPlacement: number;
    /** offset in pixels from the trigger element */
    offsetTrigger: number;
    /** Target to container element {@link ESLTraversingQuery} to define bounds of popups visibility (window by default) */
    container: string;
    /** Default show/hide params for current ESLPopup instance */
    defaultParams: ESLPopupActionParams;
    closeOnEsc: boolean;
    closeOnOutsideAction: boolean;
    a11y: ESLA11yType;
    $placeholder: ESLPopupPlaceholder | null;
    get config(): ProxiedParams;
    protected _params: ESLPopupActionParams;
    protected _intersectionRatio: IntersectionRatioRect;
    protected _updateLoopID: number;
    /** Arrow element */
    get $arrow(): HTMLElement | null;
    /** Container element that define bounds of popups visibility */
    protected get $container(): HTMLElement | undefined;
    /** Get the size and position of the container */
    protected get containerRect(): Rect;
    protected connectedCallback(): void;
    protected disconnectedCallback(): void;
    /** Get offsets tether ratio */
    protected get offsetTetherRatio(): number;
    /** Moves popup into document.body */
    protected moveToBody(): void;
    /** Appends arrow to Popup */
    protected appendArrow(): HTMLElement;
    /** Runs additional actions on show popup request */
    protected shouldShow(params: ESLToggleableActionParams): boolean;
    /**
     * Actions to execute on show popup.
     * Inner state and 'open' attribute are not affected and updated before `onShow` execution.
     * Adds CSS classes, update a11y and fire esl:refresh event by default.
     */
    protected onShow(params: ESLPopupActionParams): void;
    /**
     * Actions to execute on hide popup.
     * Inner state and 'open' attribute are not affected and updated before `onShow` execution.
     * Removes CSS classes and updates a11y by default.
     */
    protected onHide(params: ESLPopupActionParams): void;
    /**
     * Actions to execute after showing of popup.
     */
    protected afterOnShow(params: ESLPopupActionParams): void;
    /**
     * Actions to execute before hiding of popup.
     */
    protected beforeOnHide(params: ESLPopupActionParams): void;
    /**
     * Actions to execute after hiding of popup.
     */
    protected afterOnHide(params: ESLPopupActionParams): void;
    protected get scrollTargets(): EventTarget[];
    protected get intersectionOptions(): IntersectionObserverInit;
    /** Actions to execute on activator intersection event. */
    protected _onActivatorIntersection(event: ESLIntersectionEvent): void;
    /** Actions to execute on activator scroll event. */
    protected _onActivatorScroll(e: Event): void;
    protected _onTransitionStart(): void;
    protected _onResize(): void;
    protected _onRefresh({ target }: Event): void;
    /**
     * Starts loop for update position of popup.
     * The loop ends when the position and size of the activator have not changed
     * for the last 2 frames of the animation.
     */
    protected _startUpdateLoop(): void;
    /**
     * Stops loop for update position of popup.
     * Also cancels the animation frame request.
     */
    protected _stopUpdateLoop(): void;
    protected get positionConfig(): PopupPositionConfig;
    /** Updates position of popup and its arrow */
    protected _updatePosition(): void;
}
declare global {
    export interface ESLLibrary {
        Popup: typeof ESLPopup;
    }
    export interface HTMLElementTagNameMap {
        'esl-popup': ESLPopup;
    }
}