@exadel/esl
Version:
Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components
159 lines (158 loc) • 7.23 kB
TypeScript
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 } from './esl-popup-position';
export interface ESLPopupActionParams extends ESLToggleableActionParams {
/** popup position relative to trigger */
position?: PositionType;
/** clarification of the popup position, whether it should start on the outside of trigger or the inside of trigger */
positionOrigin?: PositionOriginType;
/** popup behavior if it does not fit in the window */
behavior?: string;
/** Disable hiding the popup depending on the visibility of the activator */
disableActivatorObservation?: boolean;
/** Margins on the edges of the arrow. */
marginArrow?: number;
/** Offset of the arrow as a percentage of the popup edge (0% - at the left edge, 100% - at the right edge, for RTL it is vice versa) */
offsetArrow?: string;
/** Offset in pixels from the trigger element */
offsetTrigger?: number;
/**
* Offset in pixels from the edges of the container (or window if the container is not defined)
* value as a number for equals x and y offsets
* value as an array for different x and y offsets
*/
offsetContainer?: number | [number, number];
/** Margin around the element that is used as the viewport for checking the visibility of the popup activator */
intersectionMargin?: string;
/** Target to container element to define bounds of popups visibility */
container?: string;
/** Container element that defines bounds of popups visibility (is not taken into account if the container attr is set on popup) */
containerEl?: HTMLElement;
/** Extra class to add to popup on activation */
extraClass?: string;
/** Extra styles to add to popup on activation */
extraStyle?: string;
}
/** @deprecated alias, use {@link ESLPopupActionParams} instead, will be removed in v5.0.0 */
export type PopupActionParams = ESLPopupActionParams;
export declare class ESLPopup extends ESLToggleable {
static is: string;
/** Default params to pass into the popup on show/hide actions */
static DEFAULT_PARAMS: ESLPopupActionParams;
/** Classname of popups arrow element */
arrowClass: string;
/**
* Popup position relative to the trigger.
* Currently supported: 'top', 'bottom', 'left', 'right' position types ('top' by default)
*/
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;
/**
* Margins on the edges of the arrow.
* This is the value in pixels that will be between the edge of the popup and
* the arrow at extreme positions of the arrow (when offsetArrow is set to 0 or 100)
*/
marginArrow: number;
/**
* Offset of the arrow as a percentage of the popup edge
* (0% - at the left edge,
* 100% - at the right edge,
* for RTL it is vice versa) */
offsetArrow: string;
/** 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;
protected _extraClass?: string;
protected _extraStyle?: string;
protected _containerEl?: HTMLElement;
protected _offsetContainer: number | [number, number];
protected _intersectionMargin: string;
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 arrow ratio */
protected get offsetArrowRatio(): 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;
}
}