ngx-modal-ease/types/ngx-modal-ease.d.ts

ngx-modal-ease is a versatile Angular library providing a lightweight, simple, and performant modal. This library supports data communication between components, opening of multiple modals, custom animations, and a range of customisable options.

import * as i0 from '@angular/core';
import { Injector, OnInit, AfterViewInit, ElementRef, ComponentRef, ApplicationRef, EnvironmentInjector, Type } from '@angular/core';

interface Options {
    modal?: {
        enter?: string;
        leave?: string;
        top?: string;
        left?: string;
    };
    overlay?: {
        enter?: string;
        leave?: string;
        backgroundColor?: string;
    };
    size?: {
        height?: string;
        maxHeight?: string;
        width?: string;
        maxWidth?: string;
        padding?: string;
    };
    actions?: {
        escape?: boolean;
        click?: boolean;
    };
    data?: {
        [key: string]: unknown;
    };
    injector?: Injector;
}
interface ModalResponse {
    closedOnClickOrEscape: boolean;
    data: unknown;
}

declare class ModalComponent implements OnInit, AfterViewInit {
    private modalService;
    private element;
    modal: ElementRef<HTMLDivElement>;
    overlay: ElementRef<HTMLDivElement>;
    options: Options | undefined;
    modalLeaveAnimation: string;
    overlayLeaveAnimation: string;
    overlayClosed: boolean;
    modalClosed: boolean;
    layerLevel: number;
    constructor(modalService: ModalService, element: ElementRef<HTMLElement>);
    ngOnInit(): void;
    ngAfterViewInit(): void;
    /**
     * Multiple modals might register multiple event listener, hence the 'layerLevel' variable and two times the condition check for the escape option.
     * Arrow function to respect the this instance.
     */
    private handleEscape;
    onClose(): void;
    /**
     * Add options and animations
     * Apply user style and animations, listen to animation ends. Apply z-indexes on overlay and modal, with 1000 as incremental value.
     */
    private addOptionsAndAnimations;
    private removeElementIfNotAnimated;
    /**
     * Clean the DOM
     * Apply the leaving animations and clean the DOM. Three different use cases.
     * Last In First Out
     */
    close(userComponent: ComponentRef<any>): void;
    /**
     * Remove modal when both animations come to an end.
     */
    private removeModalComponent;
    static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "app-modal", never, {}, {}, never, ["*"], true, never>;
}

declare class ModalService {
    private appRef;
    private injector;
    private libraryComponent;
    private userComponent;
    /**
     * Internal use only.
     */
    options: Options | undefined;
    /**
     * Internal use only.
     */
    modalInstances: ModalComponent[];
    /**
     * Internal use only.
     */
    layerLevel: number;
    /**
     * Internal use only.
     */
    closedOnClickOrEscape: boolean;
    private isBrowser;
    private promiseContainer;
    constructor(appRef: ApplicationRef, injector: EnvironmentInjector, platformId: Object);
    /**
     * Opens a custom component within a modal.
     * @param componentToCreate The custom component to display within the modal.
     * @param options Additional options for configuring the modal appearance and animations.
     * @returns A Promise that will emit custom data on closing the modal.
     * ```
     * this.modalService.open(ModalContentComponent, {
     *   modal: {
     *     enter: 'enter-scale-down 0.1s ease-out',
     *     leave: 'fade-out 0.5s',
     *   },
     *   overlay: {
     *     leave: 'fade-out 0.3s',
     *   },
     *   data: {
     *     type: 'Angular modal library',
     *   },
     * })
     * .then((dataFromComponent) => {
     *    ...
     * });
     * ```
     */
    open<C>(componentToCreate: Type<C>, options?: Options): Promise<ModalResponse>;
    private openComponent;
    /**
     * Set user provided data into the component instance.
     */
    private instantiateProps;
    /**
     * Close the current modal.
     * @param data The optional data to emit on closing the modal (communication from modal to caller).
     */
    close(data?: unknown): any;
    /**
     * Close all modal instances.
     * Respective animations will be applied.
     */
    closeAll(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<ModalService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<ModalService>;
}

export { ModalService };
export type { ModalResponse, Options };