import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations'; import * as i2 from '@angular/common'; import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common'; import * as i0 from '@angular/core'; import { EventEmitter, PLATFORM_ID, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, Output, ContentChild, ContentChildren, ViewChild, NgModule } from '@angular/core'; import * as i1 from 'primeng/api'; import { TranslationKeys, Header, Footer, PrimeTemplate, SharedModule } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; import * as i3 from 'primeng/focustrap'; import { FocusTrapModule } from 'primeng/focustrap'; import { TimesIcon } from 'primeng/icons/times'; import { WindowMaximizeIcon } from 'primeng/icons/windowmaximize'; import { WindowMinimizeIcon } from 'primeng/icons/windowminimize'; import * as i5 from 'primeng/ripple'; import { RippleModule } from 'primeng/ripple'; import { UniqueComponentId, ZIndexUtils } from 'primeng/utils'; import * as i4 from 'primeng/button'; import { ButtonModule } from 'primeng/button'; const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}')]); const hideAnimation = animation([animate('{{transition}}', style({ transform: '{{transform}}', opacity: 0 }))]); /** * Dialog is a container to display content in an overlay window. * @group Components */ class Dialog { document; platformId; el; renderer; zone; cd; config; /** * Title text of the dialog. * @group Props */ header; /** * Enables dragging to change the position using header. * @group Props */ draggable = true; /** * Enables resizing of the content. * @group Props */ resizable = true; /** * Defines the left offset of dialog. * @group Props * @deprecated positionLeft property is deprecated. */ get positionLeft() { return 0; } set positionLeft(_positionLeft) { console.log('positionLeft property is deprecated.'); } /** * Defines the top offset of dialog. * @group Props * @deprecated positionTop property is deprecated. */ get positionTop() { return 0; } set positionTop(_positionTop) { console.log('positionTop property is deprecated.'); } /** * Style of the content section. * @group Props */ contentStyle; /** * Style class of the content. * @group Props */ contentStyleClass; /** * Defines if background should be blocked when dialog is displayed. * @group Props */ modal = false; /** * Specifies if pressing escape key should hide the dialog. * @group Props */ closeOnEscape = true; /** * Specifies if clicking the modal background should hide the dialog. * @group Props */ dismissableMask = false; /** * When enabled dialog is displayed in RTL direction. * @group Props */ rtl = false; /** * Adds a close icon to the header to hide the dialog. * @group Props */ closable = true; /** * Defines if the component is responsive. * @group Props * @deprecated Responsive property is deprecated. */ get responsive() { return false; } set responsive(_responsive) { console.log('Responsive property is deprecated.'); } /** * Target element to attach the dialog, 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; /** * Object literal to define widths per screen size. * @group Props */ breakpoints; /** * Style class of the component. * @group Props */ styleClass; /** * Style class of the mask. * @group Props */ maskStyleClass; /** * Style of the mask. * @group Props */ maskStyle; /** * Whether to show the header or not. * @group Props */ showHeader = true; /** * Defines the breakpoint of the component responsive. * @group Props * @deprecated Breakpoint property is not utilized and deprecated. Use breakpoints or CSS media queries instead. */ get breakpoint() { return 649; } set breakpoint(_breakpoint) { console.log('Breakpoint property is not utilized and deprecated, use breakpoints or CSS media queries instead.'); } /** * Whether background scroll should be blocked when dialog is visible. * @group Props */ blockScroll = false; /** * Whether to automatically manage layering. * @group Props */ autoZIndex = true; /** * Base zIndex value to use in layering. * @group Props */ baseZIndex = 0; /** * Minimum value for the left coordinate of dialog in dragging. * @group Props */ minX = 0; /** * Minimum value for the top coordinate of dialog in dragging. * @group Props */ minY = 0; /** * When enabled, first focusable element receives focus on show. * @group Props */ focusOnShow = true; /** * Whether the dialog can be displayed full screen. * @group Props */ maximizable = false; /** * Keeps dialog in the viewport. * @group Props */ keepInViewport = true; /** * When enabled, can only focus on elements inside the dialog. * @group Props */ focusTrap = true; /** * Transition options of the animation. * @group Props */ transitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)'; /** * Name of the close icon. * @group Props */ closeIcon; /** * Defines a string that labels the close button for accessibility. * @group Props */ closeAriaLabel; /** * Index of the close button in tabbing order. * @group Props */ closeTabindex = '0'; /** * Name of the minimize icon. * @group Props */ minimizeIcon; /** * Name of the maximize icon. * @group Props */ maximizeIcon; /** * Specifies the visibility of the dialog. * @group Props */ get visible() { return this._visible; } set visible(value) { this._visible = value; if (this._visible && !this.maskVisible) { this.maskVisible = true; } } /** * Inline style of the component. * @group Props */ get style() { return this._style; } set style(value) { if (value) { this._style = { ...value }; this.originalStyle = value; } } /** * Position of the dialog. * @group Props */ get position() { return this._position; } set position(value) { this._position = value; switch (value) { case 'topleft': case 'bottomleft': case 'left': this.transformOptions = 'translate3d(-100%, 0px, 0px)'; break; case 'topright': case 'bottomright': case 'right': this.transformOptions = 'translate3d(100%, 0px, 0px)'; break; case 'bottom': this.transformOptions = 'translate3d(0px, 100%, 0px)'; break; case 'top': this.transformOptions = 'translate3d(0px, -100%, 0px)'; break; default: this.transformOptions = 'scale(0.7)'; break; } } /** * Callback to invoke when dialog is shown. * @group Emits */ onShow = new EventEmitter(); /** * Callback to invoke when dialog is hidden. * @group Emits */ onHide = new EventEmitter(); /** * This EventEmitter is used to notify changes in the visibility state of a component. * @param {boolean} value - New value. * @group Emits */ visibleChange = new EventEmitter(); /** * Callback to invoke when dialog resizing is initiated. * @param {MouseEvent} event - Mouse event. * @group Emits */ onResizeInit = new EventEmitter(); /** * Callback to invoke when dialog resizing is completed. * @param {MouseEvent} event - Mouse event. * @group Emits */ onResizeEnd = new EventEmitter(); /** * Callback to invoke when dialog dragging is completed. * @param {DragEvent} event - Drag event. * @group Emits */ onDragEnd = new EventEmitter(); /** * Callback to invoke when dialog maximized or unmaximized. * @group Emits */ onMaximize = new EventEmitter(); headerFacet; footerFacet; templates; headerViewChild; contentViewChild; footerViewChild; headerTemplate; contentTemplate; footerTemplate; maximizeIconTemplate; closeIconTemplate; minimizeIconTemplate; headlessTemplate; _visible = false; maskVisible; container; wrapper; dragging; ariaLabelledBy = this.getAriaLabelledBy(); documentDragListener; documentDragEndListener; resizing; documentResizeListener; documentResizeEndListener; documentEscapeListener; maskClickListener; lastPageX; lastPageY; preventVisibleChangePropagation; maximized; preMaximizeContentHeight; preMaximizeContainerWidth; preMaximizeContainerHeight; preMaximizePageX; preMaximizePageY; id = UniqueComponentId(); _style = {}; _position = 'center'; originalStyle; transformOptions = 'scale(0.7)'; styleElement; window; get maximizeLabel() { return this.config.getTranslation(TranslationKeys.ARIA)['maximizeLabel']; } constructor(document, platformId, el, renderer, zone, cd, config) { this.document = document; this.platformId = platformId; this.el = el; this.renderer = renderer; this.zone = zone; this.cd = cd; this.config = config; this.window = this.document.defaultView; } ngAfterContentInit() { this.templates?.forEach((item) => { switch (item.getType()) { case 'header': this.headerTemplate = item.template; break; case 'content': this.contentTemplate = item.template; break; case 'footer': this.footerTemplate = item.template; break; case 'closeicon': this.closeIconTemplate = item.template; break; case 'maximizeicon': this.maximizeIconTemplate = item.template; break; case 'minimizeicon': this.minimizeIconTemplate = item.template; break; case 'headless': this.headlessTemplate = item.template; break; default: this.contentTemplate = item.template; break; } }); } ngOnInit() { if (this.breakpoints) { this.createStyle(); } } getAriaLabelledBy() { return this.header !== null ? UniqueComponentId() + '_header' : null; } focus(focusParentElement = this.contentViewChild.nativeElement) { let focusable = DomHandler.getFocusableElement(focusParentElement, '[autofocus]'); if (focusable) { this.zone.runOutsideAngular(() => { setTimeout(() => focusable.focus(), 5); }); return; } const focusableElement = DomHandler.getFocusableElement(focusParentElement); if (focusableElement) { this.zone.runOutsideAngular(() => { setTimeout(() => focusableElement.focus(), 5); }); } else if (this.footerViewChild) { // If the content section is empty try to focus on footer this.focus(this.footerViewChild.nativeElement); } } close(event) { this.visibleChange.emit(false); event.preventDefault(); } enableModality() { if (this.closable && this.dismissableMask) { this.maskClickListener = this.renderer.listen(this.wrapper, 'mousedown', (event) => { if (this.wrapper && this.wrapper.isSameNode(event.target)) { this.close(event); } }); } if (this.modal) { DomHandler.blockBodyScroll(); } } disableModality() { if (this.wrapper) { if (this.dismissableMask) { this.unbindMaskClickListener(); } // for nested dialogs w/modal const scrollBlockers = document.querySelectorAll('.p-dialog-mask-scrollblocker'); if (this.modal && scrollBlockers && scrollBlockers.length == 1) { DomHandler.unblockBodyScroll(); } if (!this.cd.destroyed) { this.cd.detectChanges(); } } } maximize() { this.maximized = !this.maximized; if (!this.modal && !this.blockScroll) { if (this.maximized) { DomHandler.blockBodyScroll(); } else { DomHandler.unblockBodyScroll(); } } this.onMaximize.emit({ maximized: this.maximized }); } unbindMaskClickListener() { if (this.maskClickListener) { this.maskClickListener(); this.maskClickListener = null; } } moveOnTop() { if (this.autoZIndex) { ZIndexUtils.set('modal', this.container, this.baseZIndex + this.config.zIndex.modal); this.wrapper.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1); } } createStyle() { if (isPlatformBrowser(this.platformId)) { if (!this.styleElement) { this.styleElement = this.renderer.createElement('style'); this.styleElement.type = 'text/css'; this.renderer.appendChild(this.document.head, this.styleElement); let innerHTML = ''; for (let breakpoint in this.breakpoints) { innerHTML += ` @media screen and (max-width: ${breakpoint}) { .p-dialog[${this.id}]:not(.p-dialog-maximized) { width: ${this.breakpoints[breakpoint]} !important; } } `; } this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML); } } } initDrag(event) { if (DomHandler.hasClass(event.target, 'p-dialog-header-icon') || DomHandler.hasClass(event.target, 'p-dialog-header-close-icon') || DomHandler.hasClass(event.target.parentElement, 'p-dialog-header-icon')) { return; } if (this.draggable) { this.dragging = true; this.lastPageX = event.pageX; this.lastPageY = event.pageY; this.container.style.margin = '0'; DomHandler.addClass(this.document.body, 'p-unselectable-text'); } } onDrag(event) { if (this.dragging) { const containerWidth = DomHandler.getOuterWidth(this.container); const containerHeight = DomHandler.getOuterHeight(this.container); const deltaX = event.pageX - this.lastPageX; const deltaY = event.pageY - this.lastPageY; const offset = this.container.getBoundingClientRect(); const containerComputedStyle = getComputedStyle(this.container); const leftMargin = parseFloat(containerComputedStyle.marginLeft); const topMargin = parseFloat(containerComputedStyle.marginTop); const leftPos = offset.left + deltaX - leftMargin; const topPos = offset.top + deltaY - topMargin; const viewport = DomHandler.getViewport(); this.container.style.position = 'fixed'; if (this.keepInViewport) { if (leftPos >= this.minX && leftPos + containerWidth < viewport.width) { this._style.left = `${leftPos}px`; this.lastPageX = event.pageX; this.container.style.left = `${leftPos}px`; } if (topPos >= this.minY && topPos + containerHeight < viewport.height) { this._style.top = `${topPos}px`; this.lastPageY = event.pageY; this.container.style.top = `${topPos}px`; } } else { this.lastPageX = event.pageX; this.container.style.left = `${leftPos}px`; this.lastPageY = event.pageY; this.container.style.top = `${topPos}px`; } } } endDrag(event) { if (this.dragging) { this.dragging = false; DomHandler.removeClass(this.document.body, 'p-unselectable-text'); this.cd.detectChanges(); this.onDragEnd.emit(event); } } resetPosition() { this.container.style.position = ''; this.container.style.left = ''; this.container.style.top = ''; this.container.style.margin = ''; } //backward compatibility center() { this.resetPosition(); } initResize(event) { if (this.resizable) { this.resizing = true; this.lastPageX = event.pageX; this.lastPageY = event.pageY; DomHandler.addClass(this.document.body, 'p-unselectable-text'); this.onResizeInit.emit(event); } } onResize(event) { if (this.resizing) { let deltaX = event.pageX - this.lastPageX; let deltaY = event.pageY - this.lastPageY; let containerWidth = DomHandler.getOuterWidth(this.container); let containerHeight = DomHandler.getOuterHeight(this.container); let contentHeight = DomHandler.getOuterHeight(this.contentViewChild?.nativeElement); let newWidth = containerWidth + deltaX; let newHeight = containerHeight + deltaY; let minWidth = this.container.style.minWidth; let minHeight = this.container.style.minHeight; let offset = this.container.getBoundingClientRect(); let viewport = DomHandler.getViewport(); let hasBeenDragged = !parseInt(this.container.style.top) || !parseInt(this.container.style.left); if (hasBeenDragged) { newWidth += deltaX; newHeight += deltaY; } if ((!minWidth || newWidth > parseInt(minWidth)) && offset.left + newWidth < viewport.width) { this._style.width = newWidth + 'px'; this.container.style.width = this._style.width; } if ((!minHeight || newHeight > parseInt(minHeight)) && offset.top + newHeight < viewport.height) { this.contentViewChild.nativeElement.style.height = contentHeight + newHeight - containerHeight + 'px'; if (this._style.height) { this._style.height = newHeight + 'px'; this.container.style.height = this._style.height; } } this.lastPageX = event.pageX; this.lastPageY = event.pageY; } } resizeEnd(event) { if (this.resizing) { this.resizing = false; DomHandler.removeClass(this.document.body, 'p-unselectable-text'); this.onResizeEnd.emit(event); } } bindGlobalListeners() { if (this.draggable) { this.bindDocumentDragListener(); this.bindDocumentDragEndListener(); } if (this.resizable) { this.bindDocumentResizeListeners(); } if (this.closeOnEscape && this.closable) { this.bindDocumentEscapeListener(); } } unbindGlobalListeners() { this.unbindDocumentDragListener(); this.unbindDocumentDragEndListener(); this.unbindDocumentResizeListeners(); this.unbindDocumentEscapeListener(); } bindDocumentDragListener() { if (!this.documentDragListener) { this.zone.runOutsideAngular(() => { this.documentDragListener = this.renderer.listen(this.window, 'mousemove', this.onDrag.bind(this)); }); } } unbindDocumentDragListener() { if (this.documentDragListener) { this.documentDragListener(); this.documentDragListener = null; } } bindDocumentDragEndListener() { if (!this.documentDragEndListener) { this.zone.runOutsideAngular(() => { this.documentDragEndListener = this.renderer.listen(this.window, 'mouseup', this.endDrag.bind(this)); }); } } unbindDocumentDragEndListener() { if (this.documentDragEndListener) { this.documentDragEndListener(); this.documentDragEndListener = null; } } bindDocumentResizeListeners() { if (!this.documentResizeListener && !this.documentResizeEndListener) { this.zone.runOutsideAngular(() => { this.documentResizeListener = this.renderer.listen(this.window, 'mousemove', this.onResize.bind(this)); this.documentResizeEndListener = this.renderer.listen(this.window, 'mouseup', this.resizeEnd.bind(this)); }); } } unbindDocumentResizeListeners() { if (this.documentResizeListener && this.documentResizeEndListener) { this.documentResizeListener(); this.documentResizeEndListener(); this.documentResizeListener = null; this.documentResizeEndListener = null; } } bindDocumentEscapeListener() { const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document'; this.documentEscapeListener = this.renderer.listen(documentTarget, 'keydown', (event) => { if (event.key == 'Escape') { this.close(event); } }); } unbindDocumentEscapeListener() { if (this.documentEscapeListener) { this.documentEscapeListener(); this.documentEscapeListener = null; } } appendContainer() { if (this.appendTo) { if (this.appendTo === 'body') this.renderer.appendChild(this.document.body, this.wrapper); else DomHandler.appendChild(this.wrapper, this.appendTo); } } restoreAppend() { if (this.container && this.appendTo) { this.renderer.appendChild(this.el.nativeElement, this.wrapper); } } onAnimationStart(event) { switch (event.toState) { case 'visible': this.container = event.element; this.wrapper = this.container?.parentElement; this.appendContainer(); this.moveOnTop(); this.bindGlobalListeners(); this.container?.setAttribute(this.id, ''); if (this.modal) { this.enableModality(); } if (!this.modal && this.blockScroll) { DomHandler.addClass(this.document.body, 'p-overflow-hidden'); } if (this.focusOnShow) { this.focus(); } break; case 'void': if (this.wrapper && this.modal) { DomHandler.addClass(this.wrapper, 'p-component-overlay-leave'); } break; } } onAnimationEnd(event) { switch (event.toState) { case 'void': this.onContainerDestroy(); this.onHide.emit({}); this.cd.markForCheck(); break; case 'visible': this.onShow.emit({}); break; } } onContainerDestroy() { this.unbindGlobalListeners(); this.dragging = false; this.maskVisible = false; if (this.maximized) { DomHandler.removeClass(this.document.body, 'p-overflow-hidden'); this.document.body.style.removeProperty('--scrollbar-width'); this.maximized = false; } if (this.modal) { this.disableModality(); } if (this.blockScroll) { DomHandler.removeClass(this.document.body, 'p-overflow-hidden'); } if (this.container && this.autoZIndex) { ZIndexUtils.clear(this.container); } this.container = null; this.wrapper = null; this._style = this.originalStyle ? { ...this.originalStyle } : {}; } destroyStyle() { if (this.styleElement) { this.renderer.removeChild(this.document.head, this.styleElement); this.styleElement = null; } } ngOnDestroy() { if (this.container) { this.restoreAppend(); this.onContainerDestroy(); } this.destroyStyle(); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: Dialog, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: Dialog, selector: "p-dialog", inputs: { header: "header", draggable: ["draggable", "draggable", booleanAttribute], resizable: ["resizable", "resizable", booleanAttribute], positionLeft: "positionLeft", positionTop: "positionTop", contentStyle: "contentStyle", contentStyleClass: "contentStyleClass", modal: ["modal", "modal", booleanAttribute], closeOnEscape: ["closeOnEscape", "closeOnEscape", booleanAttribute], dismissableMask: ["dismissableMask", "dismissableMask", booleanAttribute], rtl: ["rtl", "rtl", booleanAttribute], closable: ["closable", "closable", booleanAttribute], responsive: "responsive", appendTo: "appendTo", breakpoints: "breakpoints", styleClass: "styleClass", maskStyleClass: "maskStyleClass", maskStyle: "maskStyle", showHeader: ["showHeader", "showHeader", booleanAttribute], breakpoint: "breakpoint", blockScroll: ["blockScroll", "blockScroll", booleanAttribute], autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], minX: ["minX", "minX", numberAttribute], minY: ["minY", "minY", numberAttribute], focusOnShow: ["focusOnShow", "focusOnShow", booleanAttribute], maximizable: ["maximizable", "maximizable", booleanAttribute], keepInViewport: ["keepInViewport", "keepInViewport", booleanAttribute], focusTrap: ["focusTrap", "focusTrap", booleanAttribute], transitionOptions: "transitionOptions", closeIcon: "closeIcon", closeAriaLabel: "closeAriaLabel", closeTabindex: "closeTabindex", minimizeIcon: "minimizeIcon", maximizeIcon: "maximizeIcon", visible: "visible", style: "style", position: "position" }, outputs: { onShow: "onShow", onHide: "onHide", visibleChange: "visibleChange", onResizeInit: "onResizeInit", onResizeEnd: "onResizeEnd", onDragEnd: "onDragEnd", onMaximize: "onMaximize" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "headerViewChild", first: true, predicate: ["titlebar"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }, { propertyName: "footerViewChild", first: true, predicate: ["footer"], descendants: true }], ngImport: i0, template: `