import * as i0 from '@angular/core'; import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, ViewChild, ContentChildren, NgModule } from '@angular/core'; import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations'; import * as i2 from '@angular/common'; import { CommonModule } from '@angular/common'; import { DomHandler } from 'primeng/dom'; import * as i1 from 'primeng/api'; import { ConfirmEventType, TranslationKeys, Footer, PrimeTemplate, SharedModule } from 'primeng/api'; import * as i4 from 'primeng/button'; import { ButtonModule } from 'primeng/button'; import { UniqueComponentId, ZIndexUtils } from 'primeng/utils'; import * as i3 from 'primeng/ripple'; import { RippleModule } from 'primeng/ripple'; 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, config) { this.el = el; this.renderer = renderer; this.confirmationService = confirmationService; this.zone = zone; this.cd = cd; this.config = config; this.acceptIcon = 'pi pi-check'; this.acceptVisible = true; this.rejectIcon = 'pi pi-times'; 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.onHide = new EventEmitter(); this._position = "center"; this.transformOptions = "scale(0.7)"; this.id = UniqueComponentId(); 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, closeOnEscape: (this.confirmation.closeOnEscape === false || this.confirmation.closeOnEscape === true) ? this.confirmation.closeOnEscape : this.closeOnEscape, dismissableMask: (this.confirmation.dismissableMask === false || this.confirmation.dismissableMask === true) ? this.confirmation.dismissableMask : this.dismissableMask }; 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 'top-left': case 'bottom-left': case 'left': this.transformOptions = "translate3d(-100%, 0px, 0px)"; break; case 'top-right': case 'bottom-right': 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 'header': this.headerTemplate = item.template; break; case 'footer': this.footerTemplate = item.template; break; } }); } ngOnInit() { if (this.breakpoints) { this.createStyle(); } this.translationSubscription = this.config.translationObserver.subscribe(() => { if (this.visible) { this.cd.markForCheck(); } }); } 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'); this.container.setAttribute(this.id, ''); this.appendContainer(); this.moveOnTop(); this.bindGlobalListeners(); this.enableModality(); const element = this.getElementToFocus(); if (element) { element.focus(); } 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'); } if (this.option('dismissableMask')) { this.maskClickListener = this.renderer.listen(this.wrapper, 'mousedown', (event) => { if (this.wrapper && this.wrapper.isSameNode(event.target)) { this.close(event); } }); } } disableModality() { this.maskVisible = false; if (this.option('blockScroll')) { DomHandler.removeClass(document.body, 'p-overflow-hidden'); } if (this.dismissableMask) { this.unbindMaskClickListener(); } if (this.container && !this.cd['destroyed']) { this.cd.detectChanges(); } } createStyle() { if (!this.styleElement) { this.styleElement = document.createElement('style'); this.styleElement.type = 'text/css'; document.head.appendChild(this.styleElement); let innerHTML = ''; for (let breakpoint in this.breakpoints) { innerHTML += ` @media screen and (max-width: ${breakpoint}) { .p-dialog[${this.id}] { width: ${this.breakpoints[breakpoint]} !important; } } `; } this.styleElement.innerHTML = innerHTML; } } close(event) { if (this.confirmation.rejectEvent) { this.confirmation.rejectEvent.emit(ConfirmEventType.CANCEL); } this.hide(ConfirmEventType.CANCEL); event.preventDefault(); } hide(type) { this.onHide.emit(type); this.visible = false; this.confirmation = null; this.confirmationOptions = 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); } } 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', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right']; const pos = positions.find(item => item === this.position); return pos ? `p-dialog-${pos}` : ''; } bindGlobalListeners() { if ((this.option('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.option('closeOnEscape') && this.closable)) { if (parseInt(this.container.style.zIndex) === ZIndexUtils.get(this.container) && 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; } } unbindMaskClickListener() { if (this.maskClickListener) { this.maskClickListener(); this.maskClickListener = null; } } onOverlayHide() { if (this.container && this.autoZIndex) { ZIndexUtils.clear(this.container); } this.disableModality(); this.unbindGlobalListeners(); this.container = null; } destroyStyle() { if (this.styleElement) { document.head.removeChild(this.styleElement); this.styleElement = null; } } ngOnDestroy() { this.restoreAppend(); this.onOverlayHide(); this.subscription.unsubscribe(); if (this.translationSubscription) { this.translationSubscription.unsubscribe(); } this.destroyStyle(); } accept() { if (this.confirmation && this.confirmation.acceptEvent) { this.confirmation.acceptEvent.emit(); } this.hide(ConfirmEventType.ACCEPT); } reject() { if (this.confirmation && this.confirmation.rejectEvent) { this.confirmation.rejectEvent.emit(ConfirmEventType.REJECT); } this.hide(ConfirmEventType.REJECT); } get acceptButtonLabel() { return this.option('acceptLabel') || this.config.getTranslation(TranslationKeys.ACCEPT); } get rejectButtonLabel() { return this.option('rejectLabel') || this.config.getTranslation(TranslationKeys.REJECT); } } ConfirmDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ConfirmDialog, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ConfirmationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component }); ConfirmDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: ConfirmDialog, selector: "p-confirmDialog", inputs: { header: "header", icon: "icon", message: "message", style: "style", styleClass: "styleClass", maskStyleClass: "maskStyleClass", acceptIcon: "acceptIcon", acceptLabel: "acceptLabel", acceptAriaLabel: "acceptAriaLabel", acceptVisible: "acceptVisible", rejectIcon: "rejectIcon", rejectLabel: "rejectLabel", rejectAriaLabel: "rejectAriaLabel", rejectVisible: "rejectVisible", acceptButtonStyleClass: "acceptButtonStyleClass", rejectButtonStyleClass: "rejectButtonStyleClass", closeOnEscape: "closeOnEscape", dismissableMask: "dismissableMask", blockScroll: "blockScroll", rtl: "rtl", closable: "closable", appendTo: "appendTo", key: "key", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", transitionOptions: "transitionOptions", focusTrap: "focusTrap", defaultFocus: "defaultFocus", breakpoints: "breakpoints", visible: "visible", position: "position" }, outputs: { onHide: "onHide" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "footer", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: `
{{option('header')}}
`, isInline: true, styles: [".p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative}.p-dialog-content{overflow-y:auto;flex-grow:1}.p-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.p-dialog-footer{flex-shrink:0}.p-dialog .p-dialog-header-icons{display:flex;align-items:center}.p-dialog .p-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-top .p-dialog,.p-dialog-bottom .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-top-left .p-dialog,.p-dialog-top-right .p-dialog,.p-dialog-bottom-left .p-dialog,.p-dialog-bottom-right .p-dialog{margin:.75rem;transform:translate(0)}.p-dialog-maximized{transition:none;transform:none;width:100vw!important;height:100vh!important;top:0px!important;left:0px!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{flex-grow:1}.p-dialog-left{justify-content:flex-start}.p-dialog-right{justify-content:flex-end}.p-dialog-top{align-items:flex-start}.p-dialog-top-left{justify-content:flex-start;align-items:flex-start}.p-dialog-top-right{justify-content:flex-end;align-items:flex-start}.p-dialog-bottom{align-items:flex-end}.p-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.p-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.p-dialog .p-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.p-confirm-dialog .p-dialog-content{display:flex;align-items:center}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.Ripple, selector: "[pRipple]" }, { type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }], animations: [ trigger('animation', [ transition('void => visible', [ useAnimation(showAnimation) ]), transition('visible => void', [ useAnimation(hideAnimation) ]) ]) ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ConfirmDialog, decorators: [{ type: Component, args: [{ selector: 'p-confirmDialog', template: `
{{option('header')}}
`, animations: [ trigger('animation', [ transition('void => visible', [ useAnimation(showAnimation) ]), transition('visible => void', [ useAnimation(hideAnimation) ]) ]) ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'p-element' }, styles: [".p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative}.p-dialog-content{overflow-y:auto;flex-grow:1}.p-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.p-dialog-footer{flex-shrink:0}.p-dialog .p-dialog-header-icons{display:flex;align-items:center}.p-dialog .p-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-top .p-dialog,.p-dialog-bottom .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-top-left .p-dialog,.p-dialog-top-right .p-dialog,.p-dialog-bottom-left .p-dialog,.p-dialog-bottom-right .p-dialog{margin:.75rem;transform:translate(0)}.p-dialog-maximized{transition:none;transform:none;width:100vw!important;height:100vh!important;top:0px!important;left:0px!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{flex-grow:1}.p-dialog-left{justify-content:flex-start}.p-dialog-right{justify-content:flex-end}.p-dialog-top{align-items:flex-start}.p-dialog-top-left{justify-content:flex-start;align-items:flex-start}.p-dialog-top-right{justify-content:flex-end;align-items:flex-start}.p-dialog-bottom{align-items:flex-end}.p-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.p-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.p-dialog .p-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.p-confirm-dialog .p-dialog-content{display:flex;align-items:center}\n"] }] }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.ConfirmationService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.PrimeNGConfig }]; }, propDecorators: { header: [{ type: Input }], icon: [{ type: Input }], message: [{ type: Input }], style: [{ type: Input }], styleClass: [{ type: Input }], maskStyleClass: [{ type: Input }], acceptIcon: [{ type: Input }], acceptLabel: [{ type: Input }], acceptAriaLabel: [{ type: Input }], acceptVisible: [{ type: Input }], rejectIcon: [{ type: Input }], rejectLabel: [{ type: Input }], rejectAriaLabel: [{ type: Input }], rejectVisible: [{ type: Input }], acceptButtonStyleClass: [{ type: Input }], rejectButtonStyleClass: [{ type: Input }], closeOnEscape: [{ type: Input }], dismissableMask: [{ type: Input }], blockScroll: [{ type: Input }], rtl: [{ type: Input }], closable: [{ type: Input }], appendTo: [{ type: Input }], key: [{ type: Input }], autoZIndex: [{ type: Input }], baseZIndex: [{ type: Input }], transitionOptions: [{ type: Input }], focusTrap: [{ type: Input }], defaultFocus: [{ type: Input }], breakpoints: [{ type: Input }], visible: [{ type: Input }], position: [{ type: Input }], onHide: [{ type: Output }], footer: [{ type: ContentChild, args: [Footer] }], contentViewChild: [{ type: ViewChild, args: ['content'] }], templates: [{ type: ContentChildren, args: [PrimeTemplate] }] } }); class ConfirmDialogModule { } ConfirmDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ConfirmDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); ConfirmDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ConfirmDialogModule, declarations: [ConfirmDialog], imports: [CommonModule, ButtonModule, RippleModule], exports: [ConfirmDialog, ButtonModule, SharedModule] }); ConfirmDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ConfirmDialogModule, imports: [[CommonModule, ButtonModule, RippleModule], ButtonModule, SharedModule] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ConfirmDialogModule, decorators: [{ type: NgModule, args: [{ imports: [CommonModule, ButtonModule, RippleModule], exports: [ConfirmDialog, ButtonModule, SharedModule], declarations: [ConfirmDialog] }] }] }); /** * Generated bundle index. Do not edit. */ export { ConfirmDialog, ConfirmDialogModule };