import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Renderer2, NgZone, ChangeDetectorRef, Input, ContentChild, ViewChild, ContentChildren, NgModule } from '@angular/core'; import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations'; import { CommonModule } from '@angular/common'; import { DomHandler } from 'primeng/dom'; import { ConfirmationService, Footer, PrimeTemplate, SharedModule } from 'primeng/api'; import { ButtonModule } from 'primeng/button'; const showAnimation = animation([ style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}', style({ transform: 'none', opacity: 1 })) ]); const hideAnimation = animation([ animate('{{transition}}', style({ transform: '{{transform}}', opacity: 0 })) ]); class ConfirmDialog { constructor(el, renderer, confirmationService, zone, cd) { this.el = el; this.renderer = renderer; this.confirmationService = confirmationService; this.zone = zone; this.cd = cd; this.acceptIcon = 'pi pi-check'; this.acceptLabel = 'Yes'; this.acceptVisible = true; this.rejectIcon = 'pi pi-times'; this.rejectLabel = 'No'; this.rejectVisible = true; this.closeOnEscape = true; this.blockScroll = true; this.closable = true; this.autoZIndex = true; this.baseZIndex = 0; this.transitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)'; this.focusTrap = true; this.defaultFocus = 'accept'; this._position = "center"; this.transformOptions = "scale(0.7)"; this.subscription = this.confirmationService.requireConfirmation$.subscribe(confirmation => { if (!confirmation) { this.hide(); return; } if (confirmation.key === this.key) { this.confirmation = confirmation; this.confirmationOptions = { message: this.confirmation.message || this.message, icon: this.confirmation.icon || this.icon, header: this.confirmation.header || this.header, rejectVisible: this.confirmation.rejectVisible == null ? this.rejectVisible : this.confirmation.rejectVisible, acceptVisible: this.confirmation.acceptVisible == null ? this.acceptVisible : this.confirmation.acceptVisible, acceptLabel: this.confirmation.acceptLabel || this.acceptLabel, rejectLabel: this.confirmation.rejectLabel || this.rejectLabel, acceptIcon: this.confirmation.acceptIcon || this.acceptIcon, rejectIcon: this.confirmation.rejectIcon || this.rejectIcon, acceptButtonStyleClass: this.confirmation.acceptButtonStyleClass || this.acceptButtonStyleClass, rejectButtonStyleClass: this.confirmation.rejectButtonStyleClass || this.rejectButtonStyleClass, defaultFocus: this.confirmation.defaultFocus || this.defaultFocus, blockScroll: (this.confirmation.blockScroll === false || this.confirmation.blockScroll === true) ? this.confirmation.blockScroll : this.blockScroll }; if (this.confirmation.accept) { this.confirmation.acceptEvent = new EventEmitter(); this.confirmation.acceptEvent.subscribe(this.confirmation.accept); } if (this.confirmation.reject) { this.confirmation.rejectEvent = new EventEmitter(); this.confirmation.rejectEvent.subscribe(this.confirmation.reject); } this.visible = true; } }); } get visible() { return this._visible; } set visible(value) { this._visible = value; if (this._visible && !this.maskVisible) { this.maskVisible = true; } this.cd.markForCheck(); } 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; } } ngAfterContentInit() { this.templates.forEach((item) => { switch (item.getType()) { case 'footerTemplate': this.footerTemplate = item.template; break; } }); } option(name) { const source = this.confirmationOptions || this; if (source.hasOwnProperty(name)) { return source[name]; } return undefined; } onAnimationStart(event) { switch (event.toState) { case 'visible': this.container = event.element; this.wrapper = this.container.parentElement; this.contentContainer = DomHandler.findSingle(this.container, '.p-dialog-content'); const element = this.getElementToFocus(); if (element) { element.focus(); } this.appendContainer(); this.moveOnTop(); this.bindGlobalListeners(); this.enableModality(); break; } } onAnimationEnd(event) { switch (event.toState) { case 'void': this.onOverlayHide(); break; } } getElementToFocus() { switch (this.option('defaultFocus')) { case 'accept': return DomHandler.findSingle(this.container, '.p-confirm-dialog-accept'); case 'reject': return DomHandler.findSingle(this.container, '.p-confirm-dialog-reject'); case 'close': return DomHandler.findSingle(this.container, '.p-dialog-header-close'); case 'none': return null; //backward compatibility default: return DomHandler.findSingle(this.container, '.p-confirm-dialog-accept'); } } appendContainer() { if (this.appendTo) { if (this.appendTo === 'body') document.body.appendChild(this.wrapper); else DomHandler.appendChild(this.wrapper, this.appendTo); } } restoreAppend() { if (this.wrapper && this.appendTo) { this.el.nativeElement.appendChild(this.wrapper); } } enableModality() { if (this.option('blockScroll')) { DomHandler.addClass(document.body, 'p-overflow-hidden'); } } disableModality() { this.maskVisible = false; if (this.option('blockScroll')) { DomHandler.removeClass(document.body, 'p-overflow-hidden'); } if (this.container) { this.cd.detectChanges(); } } close(event) { if (this.confirmation.rejectEvent) { this.confirmation.rejectEvent.emit(); } this.hide(); event.preventDefault(); } hide() { this.visible = false; this.confirmation = null; this.confirmationOptions = null; } moveOnTop() { if (this.autoZIndex) { this.container.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex)); this.wrapper.style.zIndex = String(this.baseZIndex + (DomHandler.zindex - 1)); } } getMaskClass() { let maskClass = { 'p-dialog-mask p-component-overlay': true, 'p-dialog-mask-scrollblocker': this.blockScroll }; maskClass[this.getPositionClass().toString()] = true; return maskClass; } getPositionClass() { const positions = ['left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright']; const pos = positions.find(item => item === this.position); return pos ? `p-dialog-${pos}` : ''; } bindGlobalListeners() { if ((this.closeOnEscape && this.closable) || this.focusTrap && !this.documentEscapeListener) { const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document'; this.documentEscapeListener = this.renderer.listen(documentTarget, 'keydown', (event) => { if (event.which == 27 && (this.closeOnEscape && this.closable)) { if (parseInt(this.container.style.zIndex) === (DomHandler.zindex + this.baseZIndex) && this.visible) { this.close(event); } } if (event.which === 9 && this.focusTrap) { event.preventDefault(); let focusableElements = DomHandler.getFocusableElements(this.container); if (focusableElements && focusableElements.length > 0) { if (!focusableElements[0].ownerDocument.activeElement) { focusableElements[0].focus(); } else { let focusedIndex = focusableElements.indexOf(focusableElements[0].ownerDocument.activeElement); if (event.shiftKey) { if (focusedIndex == -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus(); else focusableElements[focusedIndex - 1].focus(); } else { if (focusedIndex == -1 || focusedIndex === (focusableElements.length - 1)) focusableElements[0].focus(); else focusableElements[focusedIndex + 1].focus(); } } } } }); } } unbindGlobalListeners() { if (this.documentEscapeListener) { this.documentEscapeListener(); this.documentEscapeListener = null; } } onOverlayHide() { this.disableModality(); this.unbindGlobalListeners(); this.container = null; } ngOnDestroy() { this.restoreAppend(); this.onOverlayHide(); this.subscription.unsubscribe(); } accept() { if (this.confirmation.acceptEvent) { this.confirmation.acceptEvent.emit(); } this.hide(); } reject() { if (this.confirmation.rejectEvent) { this.confirmation.rejectEvent.emit(); } this.hide(); } } ConfirmDialog.decorators = [ { type: Component, args: [{ selector: 'p-confirmDialog', template: `