import { Directive, ViewContainerRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ComponentFactoryResolver, ChangeDetectorRef, Renderer2, NgZone, ViewChild, NgModule, Injectable, ApplicationRef, Injector } from '@angular/core'; import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations'; import { CommonModule } from '@angular/common'; import { DomHandler } from 'primeng/dom'; import { Subject } from 'rxjs'; class DynamicDialogContent { constructor(viewContainerRef) { this.viewContainerRef = viewContainerRef; } } DynamicDialogContent.decorators = [ { type: Directive, args: [{ selector: '[pDynamicDialogContent]' },] } ]; DynamicDialogContent.ctorParameters = () => [ { type: ViewContainerRef } ]; class DynamicDialogConfig { } class DynamicDialogRef { constructor() { this._onClose = new Subject(); this.onClose = this._onClose.asObservable(); this._onDestroy = new Subject(); this.onDestroy = this._onDestroy.asObservable(); } close(result) { this._onClose.next(result); } destroy() { this._onDestroy.next(); } } 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 DynamicDialogComponent { constructor(componentFactoryResolver, cd, renderer, config, dialogRef, zone) { this.componentFactoryResolver = componentFactoryResolver; this.cd = cd; this.renderer = renderer; this.config = config; this.dialogRef = dialogRef; this.zone = zone; this.visible = true; this.transformOptions = "scale(0.7)"; } ngAfterViewInit() { this.loadChildComponent(this.childComponentType); this.cd.detectChanges(); } loadChildComponent(componentType) { let componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType); let viewContainerRef = this.insertionPoint.viewContainerRef; viewContainerRef.clear(); this.componentRef = viewContainerRef.createComponent(componentFactory); } moveOnTop() { if (this.config.autoZIndex !== false) { const zIndex = (this.config.baseZIndex || 0) + (++DomHandler.zindex); this.container.style.zIndex = String(zIndex); this.maskViewChild.nativeElement.style.zIndex = String(zIndex - 1); } } onAnimationStart(event) { switch (event.toState) { case 'visible': this.container = event.element; this.wrapper = this.container.parentElement; this.moveOnTop(); this.bindGlobalListeners(); if (this.config.modal !== false) { this.enableModality(); } this.focus(); break; case 'void': this.onContainerDestroy(); break; } } onAnimationEnd(event) { if (event.toState === 'void') { this.dialogRef.destroy(); } } onContainerDestroy() { this.unbindGlobalListeners(); if (this.config.modal !== false) { this.disableModality(); } this.container = null; } close() { this.visible = false; this.cd.markForCheck(); } hide() { if (this.dialogRef) { this.dialogRef.close(); } } enableModality() { if (this.config.closable !== false && this.config.dismissableMask) { this.maskClickListener = this.renderer.listen(this.wrapper, 'mousedown', (event) => { if (this.wrapper && this.wrapper.isSameNode(event.target)) { this.hide(); } }); } if (this.config.modal !== false) { DomHandler.addClass(document.body, 'p-overflow-hidden'); } } disableModality() { if (this.wrapper) { if (this.config.dismissableMask) { this.unbindMaskClickListener(); } if (this.config.modal !== false) { DomHandler.removeClass(document.body, 'p-overflow-hidden'); } if (!this.cd.destroyed) { this.cd.detectChanges(); } } } onKeydown(event) { if (event.which === 9) { 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(); } } } } } focus() { let focusable = DomHandler.findSingle(this.container, '[autofocus]'); if (focusable) { this.zone.runOutsideAngular(() => { setTimeout(() => focusable.focus(), 5); }); } } bindGlobalListeners() { this.bindDocumentKeydownListener(); if (this.config.closeOnEscape !== false && this.config.closable !== false) { this.bindDocumentEscapeListener(); } } unbindGlobalListeners() { this.unbindDocumentKeydownListener(); this.unbindDocumentEscapeListener(); } bindDocumentKeydownListener() { this.zone.runOutsideAngular(() => { this.documentKeydownListener = this.onKeydown.bind(this); window.document.addEventListener('keydown', this.documentKeydownListener); }); } unbindDocumentKeydownListener() { if (this.documentKeydownListener) { window.document.removeEventListener('keydown', this.documentKeydownListener); this.documentKeydownListener = null; } } bindDocumentEscapeListener() { const documentTarget = this.maskViewChild ? this.maskViewChild.nativeElement.ownerDocument : 'document'; this.documentEscapeListener = this.renderer.listen(documentTarget, 'keydown', (event) => { if (event.which == 27) { if (parseInt(this.container.style.zIndex) == (DomHandler.zindex + (this.config.baseZIndex ? this.config.baseZIndex : 0))) { this.hide(); } } }); } unbindDocumentEscapeListener() { if (this.documentEscapeListener) { this.documentEscapeListener(); this.documentEscapeListener = null; } } unbindMaskClickListener() { if (this.maskClickListener) { this.maskClickListener(); this.maskClickListener = null; } } ngOnDestroy() { this.onContainerDestroy(); if (this.componentRef) { this.componentRef.destroy(); } } } DynamicDialogComponent.decorators = [ { type: Component, args: [{ selector: 'p-dynamicDialog', template: `