@scania/tegel/dist/types/components/modal/modal.d.ts

Tegel Design System

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<object>;
    /** Emits just before Modal is opened. */
    tdsOpen: EventEmitter<void>;
    /** Runs whenever the show prop changes. */
    handleShowPropChange(newValue?: boolean, oldValue?: boolean): 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;
    /** Resets the scroll position to the top. */
    private resetScrollPosition;
    private focusFirstElement;
    /** Runs whenever the modal is opened and updates it. */
    private onOpen;
    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;
}