@engie-group/fluid-design-system
Version:
The Fluid Design System is ENGIE’s open-source library to create, build and deliver ENGIE digital services in a more efficient way.
94 lines (93 loc) • 3.33 kB
TypeScript
import { Core } from '../../globals/ts/enum';
import AbstractComponent from '../../globals/ts/abstract-component';
export type BeforeHideEventSource = 'keyboard' | 'button' | 'backdrop';
export default class Modal extends AbstractComponent {
static readonly LOG_TAG = "[FLUID][MODAL]";
static readonly NAME = "nj-modal-deprecated";
protected static readonly DATA_KEY = "nj.modal";
protected static readonly EVENT_KEY: string;
protected static readonly DATA_API_KEY = Core.KEY_PREFIX;
private static readonly ESCAPE_KEYCODE;
static hasInit: boolean;
static CLASSNAME: {
backdrop: string;
backdropFitViewport: string;
fade: string;
show: string;
visible: string;
fitViewport: string;
};
static SELECTOR: {
default: string;
dataDismiss: string;
dataToggle: string;
dataAttributeToggleName: string;
dataAttributeToggleValue: string;
modalBody: string;
dialog: string;
};
static readonly EVENT: {
beforehide: string;
show: string;
shown: string;
focusin: string;
hide: string;
hidden: string;
keydownDismiss: string;
clickDismiss: string;
clickDataApi: string;
mouseupDismiss: string;
mousedownDismiss: string;
};
static CAN_MOVE_ELEMENTS_IN_DOM: boolean;
static SHOULD_MANAGE_OPENING_STATE: boolean;
private backdrop;
private dialog;
private ignoreBackdropClick;
private isShown;
private isTransitioning;
/** Element that triggered the modal appearing. Will be refocused when the modal is dismissed. */
private triggerElement;
private readonly targetedParentElement;
private readonly shouldFitViewportArea;
private readonly trailingFocusTrapAnchorElement;
private readonly leadingFocusTrapAnchorElement;
private readonly shouldManageOpeningState;
constructor(element: HTMLElement);
/**
* Initialize all modal components in the DOM.
*/
static init(options?: {}): Modal[];
static getInstance(element: HTMLElement): Modal;
private isNodeElement;
/**
* Create two focusable divs, which aims to be placed at the beginning and at the end of the
* modal to intercept the focus leaving the modal.
* When the anchors are focused, we focus the first or last focusable element in the modal instead.
* @private
* @return Elements to be placed before and after the modal
*/
private createFocusElements;
private addFocusTrapElements;
private removeFocusTrapElements;
private hideModal;
private removeBackdrop;
private setEscapeEvent;
private showBackdrop;
private showElement;
dispose(): void;
/**
* Hides the modal
* @param event - The triggering event. Default behavior will be prevented.
* @param source - A key indicating the trigger source. Will not have effect in standard usage.
*/
hide(event?: Event, source?: BeforeHideEventSource): void;
show(): void;
toggle(): void;
/**
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/
private registerEvents;
}