@scania/tegel
Version:
Tegel Design System
63 lines (62 loc) • 2.79 kB
TypeScript
import { EventEmitter } from '../../stencil-public-runtime';
/**
* @slot header - Slot for header text
* @slot body - Slot for main content of modal
* @slot actions - Slot for extra buttons
* */
export declare class TdsModal {
host: HTMLElement;
/** Sets the header of the Modal. */
header: string;
/** Disables closing Modal on clicking on overlay area. */
prevent: boolean;
/** Size of Modal */
size: 'xs' | 'sm' | 'md' | 'lg';
/** Changes the position behaviour of the actions slot. */
actionsPosition: 'sticky' | 'static';
/** CSS selector for the element that will show the Modal. */
selector: string;
/** Element that will show the Modal (takes priority over selector) */
referenceEl?: HTMLElement | null;
/** Controls whether the Modal is shown or not. If this is set hiding and showing
* will be decided by this prop and will need to be controlled from the outside. */
show: boolean;
/** Shows or hides the close [X] button. */
closable: boolean;
/** Role of the modal component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages. */
tdsAlertDialog: 'alertdialog' | 'dialog';
isShown: boolean;
activeElementIndex: number;
/** Shows the Modal. */
showModal(): Promise<void>;
/** Closes the Modal. */
closeModal(): Promise<void>;
/** Returns the current open state of the Modal. */
isOpen(): Promise<boolean>;
/** Emits when the Modal is closed. */
tdsClose: EventEmitter<any>;
/** Emits just before Modal is opened. */
tdsOpen: EventEmitter<void>;
connectedCallback(): void;
componentWillLoad(): void;
disconnectedCallback(): void;
/** Initializes or re-initializes the modal, setting up event listeners. */
initializeModal(): Promise<void>;
/** Cleans up event listeners and other resources. */
cleanupModal(): Promise<void>;
private returnFocusOnClose;
private getFocusableElements;
handleFocusTrap(event: KeyboardEvent): void;
handleClose: (event: Event) => void;
handleShow: () => void;
/** Checks if click on Modal is on overlay, if so it closes the Modal if prevent is not true. */
handleOverlayClick: (event: PointerEvent) => void;
handleReferenceElementClick: (event: PointerEvent) => void;
/** Check if there is a referenceElement or selector and adds event listener to them if so. */
setShowButton: () => void;
/** Adds an event listener to the reference element that shows/closes the Modal. */
initializeReferenceElement: (referenceEl: HTMLElement) => void;
/** Adds an event listener to the dismiss buttons that closes the Modal. */
setDismissButtons(): void;
render(): any;
}