import * as i0 from '@angular/core'; import { Directive, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, NgModule, Injectable } from '@angular/core'; import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations'; import * as i4 from '@angular/common'; import { CommonModule } from '@angular/common'; import { DomHandler } from 'primeng/dom'; import { ZIndexUtils } from 'primeng/utils'; import { Subject } from 'rxjs'; import * as i3 from 'primeng/api'; class DynamicDialogContent { constructor(viewContainerRef) { this.viewContainerRef = viewContainerRef; } } DynamicDialogContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DynamicDialogContent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); DynamicDialogContent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.0", type: DynamicDialogContent, selector: "[pDynamicDialogContent]", host: { classAttribute: "p-element" }, ngImport: i0 }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DynamicDialogContent, decorators: [{ type: Directive, args: [{ selector: '[pDynamicDialogContent]', host: { 'class': 'p-element' } }] }], ctorParameters: function () { return [{ type: i0.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(null); } } 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, primeNGConfig) { this.componentFactoryResolver = componentFactoryResolver; this.cd = cd; this.renderer = renderer; this.config = config; this.dialogRef = dialogRef; this.zone = zone; this.primeNGConfig = primeNGConfig; 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) { ZIndexUtils.set('modal', this.container, (this.config.baseZIndex || 0) + this.primeNGConfig.zIndex.modal); this.wrapper.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 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': if (this.config.modal !== false) { DomHandler.addClass(this.wrapper, 'p-component-overlay-leave'); } break; } } onAnimationEnd(event) { if (event.toState === 'void') { this.onContainerDestroy(); this.dialogRef.destroy(); } } onContainerDestroy() { this.unbindGlobalListeners(); if (this.container && this.config.autoZIndex !== false) { ZIndexUtils.clear(this.container); } 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) == ZIndexUtils.getCurrent()) { 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DynamicDialogComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DynamicDialogConfig }, { token: DynamicDialogRef }, { token: i0.NgZone }, { token: i3.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component }); DynamicDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: DynamicDialogComponent, selector: "p-dynamicDialog", host: { classAttribute: "p-element" }, viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: DynamicDialogContent, descendants: true }, { propertyName: "maskViewChild", first: true, predicate: ["mask"], descendants: true }], ngImport: i0, template: `
{{config.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: i0.forwardRef(function () { return i4.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i4.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i4.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i0.forwardRef(function () { return DynamicDialogContent; }), selector: "[pDynamicDialogContent]" }], animations: [ trigger('animation', [ transition('void => visible', [ useAnimation(showAnimation) ]), transition('visible => void', [ useAnimation(hideAnimation) ]) ]) ], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DynamicDialogComponent, decorators: [{ type: Component, args: [{ selector: 'p-dynamicDialog', template: `
{{config.header}}
`, animations: [ trigger('animation', [ transition('void => visible', [ useAnimation(showAnimation) ]), transition('visible => void', [ useAnimation(hideAnimation) ]) ]) ], changeDetection: ChangeDetectionStrategy.Default, 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.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: DynamicDialogConfig }, { type: DynamicDialogRef }, { type: i0.NgZone }, { type: i3.PrimeNGConfig }]; }, propDecorators: { insertionPoint: [{ type: ViewChild, args: [DynamicDialogContent] }], maskViewChild: [{ type: ViewChild, args: ['mask'] }] } }); class DynamicDialogModule { } DynamicDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DynamicDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); DynamicDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DynamicDialogModule, declarations: [DynamicDialogComponent, DynamicDialogContent], imports: [CommonModule] }); DynamicDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DynamicDialogModule, imports: [[CommonModule]] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DynamicDialogModule, decorators: [{ type: NgModule, args: [{ imports: [CommonModule], declarations: [DynamicDialogComponent, DynamicDialogContent], entryComponents: [DynamicDialogComponent] }] }] }); class DynamicDialogInjector { constructor(_parentInjector, _additionalTokens) { this._parentInjector = _parentInjector; this._additionalTokens = _additionalTokens; } get(token, notFoundValue, flags) { const value = this._additionalTokens.get(token); if (value) return value; return this._parentInjector.get(token, notFoundValue); } } class DialogService { constructor(componentFactoryResolver, appRef, injector) { this.componentFactoryResolver = componentFactoryResolver; this.appRef = appRef; this.injector = injector; this.dialogComponentRefMap = new Map(); } open(componentType, config) { const dialogRef = this.appendDialogComponentToBody(config); this.dialogComponentRefMap.get(dialogRef).instance.childComponentType = componentType; return dialogRef; } appendDialogComponentToBody(config) { const map = new WeakMap(); map.set(DynamicDialogConfig, config); const dialogRef = new DynamicDialogRef(); map.set(DynamicDialogRef, dialogRef); const sub = dialogRef.onClose.subscribe(() => { this.dialogComponentRefMap.get(dialogRef).instance.close(); }); const destroySub = dialogRef.onDestroy.subscribe(() => { this.removeDialogComponentFromBody(dialogRef); destroySub.unsubscribe(); sub.unsubscribe(); }); const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicDialogComponent); const componentRef = componentFactory.create(new DynamicDialogInjector(this.injector, map)); this.appRef.attachView(componentRef.hostView); const domElem = componentRef.hostView.rootNodes[0]; document.body.appendChild(domElem); this.dialogComponentRefMap.set(dialogRef, componentRef); return dialogRef; } removeDialogComponentFromBody(dialogRef) { if (!dialogRef || !this.dialogComponentRefMap.has(dialogRef)) { return; } const dialogComponentRef = this.dialogComponentRefMap.get(dialogRef); this.appRef.detachView(dialogComponentRef.hostView); dialogComponentRef.destroy(); this.dialogComponentRefMap.delete(dialogRef); } } DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DialogService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DialogService }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DialogService, decorators: [{ type: Injectable }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }]; } }); /** * Generated bundle index. Do not edit. */ export { DialogService, DynamicDialogComponent, DynamicDialogConfig, DynamicDialogInjector, DynamicDialogModule, DynamicDialogRef };