primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
481 lines (477 loc) • 19.8 kB
TypeScript
import { DialogPassThrough, DialogPosition, DialogHeaderTemplateContext } from 'primeng/types/dialog';
export * from 'primeng/types/dialog';
import * as _angular_core from '@angular/core';
import { ElementRef, TemplateRef } from '@angular/core';
import { MotionOptions, MotionEvent } from '@primeuix/motion';
import { BaseComponent } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { ButtonDirectiveOptions } from 'primeng/types/button';
import * as i2 from 'primeng/api';
import { OverlayService } from 'primeng/api';
import { CSSProperties, AppendTo } from 'primeng/types/shared';
import { Nullable, VoidListener } from 'primeng/ts-helpers';
import { BaseStyle } from 'primeng/base';
/**
*
* Dialog is a container to display content in an overlay window.
*
* [Live Demo](https://www.primeng.org/dialog)
*
* @module dialogstyle
*
*/
declare enum DialogClasses {
/**
* 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 DialogStyle extends BaseStyle {
name: string;
style: string;
classes: {
mask: ({ instance }: {
instance: any;
}) => (string | {
'p-overlay-mask': any;
})[];
root: ({ instance }: {
instance: any;
}) => (string | {
'p-dialog-maximized': any;
})[];
header: string;
title: string;
resizeHandle: string;
headerActions: string;
pcMaximizeButton: string;
pcCloseButton: string;
content: () => string[];
footer: string;
};
inlineStyles: {
mask: ({ instance }: {
instance: any;
}) => any;
root: ({ instance }: {
instance: any;
}) => any;
};
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogStyle, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<DialogStyle>;
}
interface DialogStyle extends BaseStyle {
}
/**
* Dialog is a container to display content in an overlay window.
* @group Components
*/
declare class Dialog extends BaseComponent<DialogPassThrough> {
componentName: string;
hostName: _angular_core.InputSignal<string>;
$pcDialog: Dialog | undefined;
bindDirectiveInstance: Bind;
onAfterViewChecked(): void;
/**
* Title text of the dialog.
* @group Props
*/
header: _angular_core.InputSignal<string | undefined>;
/**
* Enables dragging to change the position using header.
* @group Props
*/
draggable: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Enables resizing of the content.
* @group Props
*/
resizable: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Style of the content section.
* @group Props
*/
contentStyle: _angular_core.InputSignal<CSSProperties>;
/**
* Style class of the content.
* @group Props
*/
contentStyleClass: _angular_core.InputSignal<string | undefined>;
/**
* Defines if background should be blocked when dialog is displayed.
* @group Props
*/
modal: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Specifies if pressing escape key should hide the dialog.
* @group Props
*/
closeOnEscape: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Specifies if clicking the modal background should hide the dialog.
* @group Props
*/
dismissableMask: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* When enabled dialog is displayed in RTL direction.
* @group Props
*/
rtl: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Adds a close icon to the header to hide the dialog.
* @group Props
*/
closable: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Object literal to define widths per screen size.
* @group Props
*/
breakpoints: _angular_core.InputSignal<Record<string, string> | undefined>;
/**
* Style class of the component.
* @group Props
*/
styleClass: _angular_core.InputSignal<string | undefined>;
/**
* Style class of the mask.
* @group Props
*/
maskStyleClass: _angular_core.InputSignal<string | undefined>;
/**
* Style of the mask.
* @group Props
*/
maskStyle: _angular_core.InputSignal<CSSProperties>;
/**
* Whether to show the header or not.
* @group Props
*/
showHeader: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Whether background scroll should be blocked when dialog is visible.
* @group Props
*/
blockScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Whether to automatically manage layering.
* @group Props
*/
autoZIndex: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Base zIndex value to use in layering.
* @group Props
*/
baseZIndex: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Minimum value for the left coordinate of dialog in dragging.
* @group Props
*/
minX: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Minimum value for the top coordinate of dialog in dragging.
* @group Props
*/
minY: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* When enabled, first focusable element receives focus on show.
* @group Props
*/
focusOnShow: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Whether the dialog can be displayed full screen.
* @group Props
*/
maximizable: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Keeps dialog in the viewport.
* @group Props
*/
keepInViewport: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* When enabled, can only focus on elements inside the dialog.
* @group Props
*/
focusTrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* The motion options for the mask.
* @group Props
*/
maskMotionOptions: _angular_core.InputSignal<MotionOptions | undefined>;
computedMaskMotionOptions: _angular_core.Signal<MotionOptions>;
maskEnterActiveClass: _angular_core.Signal<"" | "p-overlay-mask-enter-active">;
maskLeaveActiveClass: _angular_core.Signal<"" | "p-overlay-mask-leave-active">;
/**
* The motion options.
* @group Props
*/
motionOptions: _angular_core.InputSignal<MotionOptions | undefined>;
computedMotionOptions: _angular_core.Signal<MotionOptions>;
/**
* Name of the close icon.
* @group Props
*/
closeIcon: _angular_core.InputSignal<string | undefined>;
/**
* Defines a string that labels the close button for accessibility.
* @group Props
*/
closeAriaLabel: _angular_core.InputSignal<string | undefined>;
/**
* Index of the close button in tabbing order.
* @group Props
*/
closeTabindex: _angular_core.InputSignal<string>;
/**
* Name of the minimize icon.
* @group Props
*/
minimizeIcon: _angular_core.InputSignal<string | undefined>;
/**
* Name of the maximize icon.
* @group Props
*/
maximizeIcon: _angular_core.InputSignal<string | undefined>;
/**
* Configuration object forwarded to the underlying button.
* @group Props
*/
closeButtonProps: _angular_core.InputSignal<ButtonDirectiveOptions>;
/**
* Configuration object forwarded to the underlying button.
* @group Props
*/
maximizeButtonProps: _angular_core.InputSignal<ButtonDirectiveOptions>;
/**
* Specifies the visibility of the dialog.
* @group Props
*/
visible: _angular_core.ModelSignal<boolean>;
/**
* Inline style of the component.
* @group Props
*/
style: _angular_core.InputSignal<CSSProperties>;
/**
* Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".
* @group Props
*/
position: _angular_core.InputSignal<DialogPosition | undefined>;
/**
* Role attribute of html element.
* @group Emits
*/
role: _angular_core.InputSignal<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).
* @defaultValue 'self'
* @group Props
*/
appendTo: _angular_core.InputSignal<AppendTo>;
/**
* Callback to invoke when dialog is shown.
* @group Emits
*/
onShow: _angular_core.OutputEmitterRef<any>;
/**
* Callback to invoke when dialog is hidden.
* @group Emits
*/
onHide: _angular_core.OutputEmitterRef<any>;
/**
* Callback to invoke when dialog resizing is initiated.
* @param {MouseEvent} event - Mouse event.
* @group Emits
*/
onResizeInit: _angular_core.OutputEmitterRef<MouseEvent>;
/**
* Callback to invoke when dialog resizing is completed.
* @param {MouseEvent} event - Mouse event.
* @group Emits
*/
onResizeEnd: _angular_core.OutputEmitterRef<MouseEvent>;
/**
* Callback to invoke when dialog dragging is initiated.
* @param {MouseEvent} event - Mouse event.
* @group Emits
*/
onDragStart: _angular_core.OutputEmitterRef<MouseEvent>;
/**
* Callback to invoke when dialog dragging is completed.
* @param {DragEvent} event - Drag event.
* @group Emits
*/
onDragEnd: _angular_core.OutputEmitterRef<DragEvent>;
/**
* Callback to invoke when dialog maximized or unmaximized.
* @group Emits
*/
onMaximize: _angular_core.OutputEmitterRef<{
maximized: boolean | undefined;
}>;
headerViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
contentViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
footerViewChild: _angular_core.Signal<ElementRef<any> | undefined>;
/**
* Custom header template.
* @group Templates
*/
headerTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom content template.
* @group Templates
*/
contentTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom footer template.
* @group Templates
*/
footerTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom close icon template.
* @group Templates
*/
closeIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom maximize icon template.
* @group Templates
*/
maximizeIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom minimize icon template.
* @group Templates
*/
minimizeIconTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
/**
* Custom headless template.
* @group Templates
*/
headlessTemplate: _angular_core.Signal<TemplateRef<void> | undefined>;
$appendTo: _angular_core.Signal<AppendTo>;
renderMask: _angular_core.WritableSignal<boolean>;
renderDialog: _angular_core.WritableSignal<boolean>;
maskVisible: boolean | undefined;
container: _angular_core.WritableSignal<Nullable<HTMLElement>>;
wrapper: Nullable<HTMLElement>;
dragging: boolean | undefined;
ariaId: string;
ariaLabelledBy: _angular_core.Signal<string | null>;
headerTemplateContext: _angular_core.Signal<DialogHeaderTemplateContext>;
documentDragListener: VoidListener;
documentDragEndListener: VoidListener;
resizing: boolean | undefined;
documentResizeListener: VoidListener;
documentResizeEndListener: VoidListener;
documentEscapeListener: VoidListener;
maskClickListener: VoidListener;
lastPageX: number | undefined;
lastPageY: number | undefined;
preventVisibleChangePropagation: boolean | undefined;
maximized: _angular_core.WritableSignal<boolean>;
preMaximizeContentHeight: number | undefined;
preMaximizeContainerWidth: number | undefined;
preMaximizeContainerHeight: number | undefined;
preMaximizePageX: number | undefined;
preMaximizePageY: number | undefined;
id: string;
_style: Record<string, string>;
originalStyle: Record<string, string> | undefined;
styleElement: HTMLStyleElement | null;
_componentStyle: DialogStyle;
overlayService: OverlayService;
private zIndexForLayering?;
get maximizeLabel(): string;
get minimizeLabel(): string;
maximizeButtonAriaLabel: _angular_core.Signal<string>;
maximizeButtonTabindex: _angular_core.Signal<"0" | "-1">;
toggleIcon: _angular_core.Signal<string | undefined>;
showToggleIcon: _angular_core.Signal<boolean>;
showDefaultMaximizeIcon: _angular_core.Signal<boolean>;
showMaximizeSvg: _angular_core.Signal<boolean>;
showMinimizeSvg: _angular_core.Signal<boolean>;
showMaximizeIconTemplate: _angular_core.Signal<boolean>;
showMinimizeIconTemplate: _angular_core.Signal<boolean>;
showDefaultCloseIcon: _angular_core.Signal<boolean>;
scrollBlockerActive: _angular_core.Signal<boolean>;
focusTrapDisabled: _angular_core.Signal<boolean>;
constructor();
onInit(): void;
_focus(focusParentElement?: HTMLElement): boolean;
focus(focusParentElement?: HTMLElement): void;
close(event: Event): void;
enableModality(): void;
disableModality(): void;
maximize(): void;
unbindMaskClickListener(): void;
moveOnTop(): void;
createStyle(): void;
initDrag(event: MouseEvent): void;
onDrag(event: MouseEvent): void;
endDrag(event: DragEvent): void;
resetPosition(): void;
center(): void;
initResize(event: MouseEvent): void;
onResize(event: MouseEvent): void;
resizeEnd(event: MouseEvent): void;
bindGlobalListeners(): void;
unbindGlobalListeners(): void;
bindDocumentDragListener(): void;
unbindDocumentDragListener(): void;
bindDocumentDragEndListener(): void;
unbindDocumentDragEndListener(): void;
bindDocumentResizeListeners(): void;
unbindDocumentResizeListeners(): void;
bindDocumentEscapeListener(): void;
unbindDocumentEscapeListener(): void;
appendContainer(): void;
restoreAppend(): void;
onBeforeEnter(event: MotionEvent): void;
onAfterEnter(): void;
onBeforeLeave(): void;
onAfterLeave(): void;
onMaskAfterLeave(): void;
onContainerDestroy(): void;
destroyStyle(): void;
onDestroy(): void;
dataP: _angular_core.Signal<string>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Dialog, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Dialog, "p-dialog", never, { "hostName": { "alias": "hostName"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "contentStyle": { "alias": "contentStyle"; "required": false; "isSignal": true; }; "contentStyleClass": { "alias": "contentStyleClass"; "required": false; "isSignal": true; }; "modal": { "alias": "modal"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "dismissableMask": { "alias": "dismissableMask"; "required": false; "isSignal": true; }; "rtl": { "alias": "rtl"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "breakpoints": { "alias": "breakpoints"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; "maskStyleClass": { "alias": "maskStyleClass"; "required": false; "isSignal": true; }; "maskStyle": { "alias": "maskStyle"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; "blockScroll": { "alias": "blockScroll"; "required": false; "isSignal": true; }; "autoZIndex": { "alias": "autoZIndex"; "required": false; "isSignal": true; }; "baseZIndex": { "alias": "baseZIndex"; "required": false; "isSignal": true; }; "minX": { "alias": "minX"; "required": false; "isSignal": true; }; "minY": { "alias": "minY"; "required": false; "isSignal": true; }; "focusOnShow": { "alias": "focusOnShow"; "required": false; "isSignal": true; }; "maximizable": { "alias": "maximizable"; "required": false; "isSignal": true; }; "keepInViewport": { "alias": "keepInViewport"; "required": false; "isSignal": true; }; "focusTrap": { "alias": "focusTrap"; "required": false; "isSignal": true; }; "maskMotionOptions": { "alias": "maskMotionOptions"; "required": false; "isSignal": true; }; "motionOptions": { "alias": "motionOptions"; "required": false; "isSignal": true; }; "closeIcon": { "alias": "closeIcon"; "required": false; "isSignal": true; }; "closeAriaLabel": { "alias": "closeAriaLabel"; "required": false; "isSignal": true; }; "closeTabindex": { "alias": "closeTabindex"; "required": false; "isSignal": true; }; "minimizeIcon": { "alias": "minimizeIcon"; "required": false; "isSignal": true; }; "maximizeIcon": { "alias": "maximizeIcon"; "required": false; "isSignal": true; }; "closeButtonProps": { "alias": "closeButtonProps"; "required": false; "isSignal": true; }; "maximizeButtonProps": { "alias": "maximizeButtonProps"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; "onShow": "onShow"; "onHide": "onHide"; "onResizeInit": "onResizeInit"; "onResizeEnd": "onResizeEnd"; "onDragStart": "onDragStart"; "onDragEnd": "onDragEnd"; "onMaximize": "onMaximize"; }, ["headerTemplate", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], ["*", "p-footer"], true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
declare class DialogModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<DialogModule, never, [typeof Dialog, typeof i2.SharedModule], [typeof Dialog, typeof i2.SharedModule]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<DialogModule>;
}
export { Dialog, DialogClasses, DialogModule, DialogStyle };