primeng/dynamicdialog/index.d.ts

PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB

import * as i0 from '@angular/core';
import { Type, ViewContainerRef, AfterViewInit, OnDestroy, Renderer2, NgZone, ComponentRef, ElementRef, ApplicationRef, Injector, ProviderToken, InjectOptions } from '@angular/core';
import { AnimationEvent } from '@angular/animations';
import { BaseComponent } from 'primeng/basecomponent';
import { Nullable, VoidListener } from 'primeng/ts-helpers';
import { Observable, Subject } from 'rxjs';
import { DialogStyle } from 'primeng/dialog';
import * as i1 from 'primeng/api';

/**
 * Dialogs can be created dynamically with any component as the content using a DialogService.
 * @group Components
 */
declare class DynamicDialogConfig<DataType = any, InputValuesType extends Record<string, any> = {}> {
    /**
     * An object to pass to the component loaded inside the Dialog.
     * @group Props
     */
    data?: DataType;
    /**
     * An object to pass to the component loaded inside the Dialog.
     * @group Props
     */
    inputValues?: InputValuesType;
    /**
     * Header text of the dialog.
     * @group Props
     */
    header?: string;
    /**
     * Identifies the element (or elements) that labels the element it is applied to.
     * @group Props
     */
    ariaLabelledBy?: string;
    /**
     * Footer text of the dialog.
     * @group Props
     */
    footer?: string;
    /**
     * Width of the dialog.
     * @group Props
     */
    width?: string;
    /**
     * Height of the dialog.
     * @group Props
     */
    height?: string;
    /**
     * Specifies if pressing escape key should hide the dialog.
     * @group Props
     */
    closeOnEscape?: boolean;
    /**
     * Specifies if autofocus should happen on show.
     * @group Props
     */
    focusOnShow?: boolean;
    /**
     * When enabled, can only focus on elements inside the dialog.
     * @group Props
     */
    focusTrap?: boolean;
    /**
     * Base zIndex value to use in layering.
     * @group Props
     */
    baseZIndex?: number;
    /**
     * Whether to re-enforce layering through applying zIndex.
     * @group Props
     */
    autoZIndex?: boolean;
    /**
     * Specifies if clicking the modal background should hide the dialog.
     * @group Props
     */
    dismissableMask?: boolean;
    /**
     * Inline style of the component.
     * @group Props
     */
    rtl?: boolean;
    /**
     * Inline style of the component.
     * @group Props
     */
    style?: {
        [klass: string]: any;
    } | null | undefined;
    /**
     * Inline style of the content.
     * @group Props
     */
    contentStyle?: {
        [klass: string]: any;
    } | null | undefined;
    /**
     * Style class of the component.
     * @group Props
     */
    styleClass?: string;
    /**
     * Transition options of the animation.
     * @group Props
     */
    transitionOptions?: string;
    /**
     * Adds a close icon to the header to hide the dialog.
     * @group Props
     */
    closable?: boolean;
    /**
     * Whether to show the header or not.
     * @group Props
     */
    showHeader?: boolean;
    /**
     * Defines if background should be blocked when dialog is displayed.
     * @group Props
     */
    modal?: boolean;
    /**
     * Style class of the mask.
     * @group Props
     */
    maskStyleClass?: string;
    /**
     * Enables resizing of the content.
     * @group Props
     */
    resizable?: boolean;
    /**
     * Enables dragging to change the position using header.
     * @group Props
     */
    draggable?: boolean;
    /**
     * Keeps dialog in the viewport.
     * @group Props
     */
    keepInViewport?: boolean;
    /**
     * Minimum value for the left coordinate of dialog in dragging.
     * @group Props
     */
    minX?: number;
    /**
     * Minimum value for the top coordinate of dialog in dragging.
     * @group Props
     */
    minY?: number;
    /**
     * Whether the dialog can be displayed full screen.
     * @group Props
     */
    maximizable?: boolean;
    /**
     * Name of the maximize icon.
     * @group Props
     */
    maximizeIcon?: string;
    /**
     * Name of the minimize icon.
     * @group Props
     */
    minimizeIcon?: string;
    /**
     * Position of the dialog, options are "center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left" or "bottom-right".
     * @group Props
     */
    position?: string;
    /**
     * Defines a string that labels the close button for accessibility.
     * @group Props
     */
    closeAriaLabel?: string;
    /**
     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
     * @group Props
     */
    appendTo?: any;
    /**
     * A boolean to determine if it can be duplicate.
     * @group Props
     */
    duplicate?: boolean;
    /**
     * Object literal to define widths per screen size.
     * @group Props
     */
    breakpoints?: any;
    /**
     * Dialog templates.
     * @group Props
     */
    templates?: DynamicDialogTemplates;
}
/**
 * Defines valid templates in Dynamic Dialog.
 * @group Interface
 */
interface DynamicDialogTemplates {
    /**
     * Template of the header.
     */
    header?: Type<any>;
    /**
     * Template of the content.
     */
    content?: Type<any>;
    /**
     * Template of the footer.
     */
    footer?: Type<any>;
    /**
     * Template of the minimize icon.
     */
    minimizeicon?: Type<any>;
    /**
     * Template of the maximize icon.
     */
    maximizeicon?: Type<any>;
    /**
     * Template of the close icon.
     */
    closeicon?: Type<any>;
}

/**
 * Dynamic Dialog instance.
 * @group Components
 */
declare class DynamicDialogRef<ComponentType = any> {
    constructor();
    /**
     * Closes dialog.
     * @group Method
     */
    close(result?: any): void;
    /**
     * Destroys the dialog instance.
     * @group Method
     */
    destroy(): void;
    /**
     * Callback to invoke on drag start.
     * @param {MouseEvent} event - Mouse event.
     * @group Method
     */
    dragStart(event: MouseEvent): void;
    /**
     * Callback to invoke on drag end.
     * @param {MouseEvent} event - Mouse event.
     * @group Method
     */
    dragEnd(event: MouseEvent): void;
    /**
     * Callback to invoke on resize start.
     * @param {MouseEvent} event - Mouse event.
     * @group Method
     */
    resizeInit(event: MouseEvent): void;
    /**
     * Callback to invoke on resize start.
     * @param {MouseEvent} event - Mouse event.
     * @group Method
     */
    resizeEnd(event: MouseEvent): void;
    /**
     * Callback to invoke on dialog is maximized.
     * @param {*} value - Size value.
     * @group Method
     */
    maximize(value: any): void;
    private readonly _onClose;
    /**
     * Event triggered on dialog is closed.
     * @group Events
     */
    onClose: Observable<any>;
    private readonly _onDestroy;
    /**
     * Event triggered on dialog instance is destroyed.
     * @group Events
     */
    onDestroy: Observable<any>;
    private readonly _onDragStart;
    /**
     * Event triggered on drag start.
     * @param {MouseEvent} event - Mouse event.
     * @group Events
     */
    onDragStart: Observable<any>;
    private readonly _onDragEnd;
    /**
     * Event triggered on drag end.
     * @param {MouseEvent} event - Mouse event.
     * @group Events
     */
    onDragEnd: Observable<any>;
    private readonly _onResizeInit;
    /**
     * Event triggered on resize start.
     * @param {MouseEvent} event - Mouse event.
     * @group Events
     */
    onResizeInit: Observable<any>;
    private readonly _onResizeEnd;
    /**
     * Event triggered on resize end.
     * @param {MouseEvent} event - Mouse event.
     * @group Events
     */
    onResizeEnd: Observable<any>;
    private readonly _onMaximize;
    /**
     * Event triggered on dialog is maximized.
     * @param {*} value - Size value.
     * @group Events
     */
    onMaximize: Observable<any>;
    /**
     * Event triggered on child component load.
     * @param {*} value - Chi.
     * @group Events
     */
    readonly onChildComponentLoaded: Subject<ComponentType>;
}

declare class DynamicDialogContent {
    viewContainerRef: ViewContainerRef;
    constructor(viewContainerRef: ViewContainerRef);
    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicDialogContent, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DynamicDialogContent, "[pDynamicDialogContent]", never, {}, {}, never, never, true, never>;
}

/**
 *
 * DynamicDialog is a container to display content in an overlay window.
 *
 * [Live Demo](https://www.primeng.org/dynamicdialog)
 *
 * @module dynamicdialogstyle
 *
 */
declare enum DynamicDialogClasses {
    /**
     * Class name of the mask element
     */
    mask = "p-dialog-mask",
    /**
     * Class name of the root element
     */
    root = "p-dialog",
    /**
     * Class name of the header element
     */
    header = "p-dialog-header",
    /**
     * Class name of the title element
     */
    title = "p-dialog-title",
    /**
     * Class name of the header actions element
     */
    headerActions = "p-dialog-header-actions",
    /**
     * Class name of the maximize button element
     */
    pcMaximizeButton = "p-dialog-maximize-button",
    /**
     * Class name of the close button element
     */
    pcCloseButton = "p-dialog-close-button",
    /**
     * Class name of the content element
     */
    content = "p-dialog-content",
    /**
     * Class name of the footer element
     */
    footer = "p-dialog-footer"
}
declare class DynamicDialogStyle extends DialogStyle {
    name: string;
    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicDialogStyle, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<DynamicDialogStyle>;
}
interface DynamicDialogStyle {
}

declare class DynamicDialogComponent extends BaseComponent implements AfterViewInit, OnDestroy {
    renderer: Renderer2;
    ddconfig: DynamicDialogConfig;
    private dialogRef;
    zone: NgZone;
    private parentDialog;
    visible: boolean;
    componentRef: Nullable<ComponentRef<any>>;
    mask: Nullable<HTMLDivElement>;
    resizing: boolean | undefined;
    dragging: boolean | undefined;
    maximized: boolean | undefined;
    _style: any;
    originalStyle: any;
    lastPageX: number | undefined;
    lastPageY: number | undefined;
    ariaLabelledBy: string | undefined;
    id: string;
    styleElement: any;
    insertionPoint: Nullable<DynamicDialogContent>;
    maskViewChild: Nullable<ElementRef>;
    contentViewChild: Nullable<ElementRef>;
    footerViewChild: Nullable<ElementRef>;
    headerViewChild: Nullable<ElementRef>;
    childComponentType: Nullable<Type<any>>;
    inputValues: Record<string, any>;
    container: Nullable<HTMLDivElement>;
    wrapper: Nullable<HTMLElement>;
    documentKeydownListener: VoidListener;
    documentEscapeListener: VoidListener;
    maskClickListener: VoidListener;
    transformOptions: string;
    documentResizeListener: VoidListener;
    documentResizeEndListener: VoidListener;
    documentDragListener: VoidListener;
    documentDragEndListener: VoidListener;
    _componentStyle: DynamicDialogStyle;
    get minX(): number;
    get minY(): number;
    get keepInViewport(): boolean;
    get maximizable(): boolean;
    get maximizeIcon(): string;
    get minimizeIcon(): string;
    get closable(): boolean;
    get style(): any;
    get position(): string;
    get defaultCloseAriaLabel(): string;
    set style(value: any);
    get parent(): Element;
    get parentContent(): any;
    get header(): string;
    get data(): any;
    get breakpoints(): any;
    get footerTemplate(): Type<any>;
    get headerTemplate(): Type<any>;
    get contentTemplate(): Type<any>;
    get minimizeIconTemplate(): any;
    get maximizeIconTemplate(): any;
    get closeIconTemplate(): Type<any>;
    get maskClass(): {
        [x: string]: string | boolean;
        'p-dialog-mask': boolean;
        'p-overlay-mask p-overlay-mask-enter': boolean;
    };
    get dialogId(): string;
    private zIndexForLayering?;
    constructor(renderer: Renderer2, ddconfig: DynamicDialogConfig, dialogRef: DynamicDialogRef, zone: NgZone, parentDialog: DynamicDialogComponent);
    ngOnInit(): void;
    createStyle(): void;
    destroyStyle(): void;
    ngAfterViewInit(): void;
    getAriaLabelledBy(): string;
    loadChildComponent(componentType: Type<any>): void;
    moveOnTop(): void;
    onAnimationStart(event: AnimationEvent): void;
    onAnimationEnd(event: AnimationEvent): void;
    onContainerDestroy(): void;
    close(): void;
    hide(): void;
    enableModality(): void;
    disableModality(): void;
    focus(focusParentElement?: any): void;
    maximize(): void;
    initResize(event: MouseEvent): void;
    onResize(event: MouseEvent): void;
    resizeEnd(event: MouseEvent): void;
    initDrag(event: MouseEvent): void;
    onDrag(event: MouseEvent): void;
    endDrag(event: MouseEvent): void;
    resetPosition(): void;
    bindDocumentDragListener(): void;
    bindDocumentDragEndListener(): void;
    unbindDocumentDragEndListener(): void;
    unbindDocumentDragListener(): void;
    bindDocumentResizeListeners(): void;
    unbindDocumentResizeListeners(): void;
    bindGlobalListeners(): void;
    unbindGlobalListeners(): void;
    bindDocumentEscapeListener(): void;
    unbindDocumentEscapeListener(): void;
    unbindMaskClickListener(): void;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicDialogComponent, [null, null, null, null, { optional: true; skipSelf: true; }]>;
    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicDialogComponent, "p-dynamicDialog, p-dynamicdialog, p-dynamic-dialog", never, {}, {}, never, never, true, never>;
}
declare class DynamicDialogModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicDialogModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<DynamicDialogModule, never, [typeof DynamicDialogComponent, typeof i1.SharedModule], [typeof DynamicDialogComponent, typeof i1.SharedModule]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<DynamicDialogModule>;
}

/**
 * Dynamic Dialog component methods.
 * @group Service
 */
declare class DialogService {
    private appRef;
    private injector;
    private document;
    dialogComponentRefMap: Map<DynamicDialogRef<any>, ComponentRef<DynamicDialogComponent>>;
    constructor(appRef: ApplicationRef, injector: Injector, document: Document);
    /**
     * Displays the dialog using the dynamic dialog object options.
     * @param {*} componentType - Dynamic component for content template.
     * @param {DynamicDialogConfig} config - DynamicDialog object.
     * @returns {DynamicDialogRef} DynamicDialog instance.
     * @group Method
     */
    open<T, DataType = any, InputValuesType extends Record<string, any> = {}>(componentType: Type<T>, config: DynamicDialogConfig<DataType, InputValuesType>): DynamicDialogRef<T>;
    /**
     * Returns the dynamic dialog component instance.
     * @param {ref} DynamicDialogRef - DynamicDialog instance.
     * @group Method
     */
    getInstance(ref: DynamicDialogRef<any>): DynamicDialogComponent;
    private appendDialogComponentToBody;
    private removeDialogComponentFromBody;
    private duplicationPermission;
    static ɵfac: i0.ɵɵFactoryDeclaration<DialogService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<DialogService>;
}

declare class DynamicDialogInjector implements Injector {
    private _parentInjector;
    private _additionalTokens;
    constructor(_parentInjector: Injector, _additionalTokens: WeakMap<any, any>);
    get<T>(token: ProviderToken<T>, notFoundValue?: T, options?: InjectOptions): T;
}

export { DialogService, DynamicDialogClasses, DynamicDialogComponent, DynamicDialogConfig, DynamicDialogInjector, DynamicDialogModule, DynamicDialogRef, DynamicDialogStyle };
export type { DynamicDialogTemplates };