UNPKG

primeng

Version:

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm version](https://badge.fury.io/js/primeng.svg)](https://badge.fury.io/js/primeng) [![Discord](https://img.shields.io/discord/557940238991753

2 lines 11.1 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/animations"),require("@angular/common"),require("primeng/dom"),require("rxjs")):"function"==typeof define&&define.amd?define("primeng/dynamicdialog",["exports","@angular/core","@angular/animations","@angular/common","primeng/dom","rxjs"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).primeng=e.primeng||{},e.primeng.dynamicdialog={}),e.ng.core,e.ng.animations,e.ng.common,e.primeng.dom,e.rxjs)}(this,(function(e,t,n,o,i,a){"use strict";var s=function(e){this.viewContainerRef=e};s.decorators=[{type:t.Directive,args:[{selector:"[pDynamicDialogContent]"}]}],s.ctorParameters=function(){return[{type:t.ViewContainerRef}]};var r=function(){},l=function(){function e(){this._onClose=new a.Subject,this.onClose=this._onClose.asObservable(),this._onDestroy=new a.Subject,this.onDestroy=this._onDestroy.asObservable()}return e.prototype.close=function(e){this._onClose.next(e)},e.prototype.destroy=function(){this._onDestroy.next()},e}(),d=n.animation([n.style({transform:"{{transform}}",opacity:0}),n.animate("{{transition}}",n.style({transform:"none",opacity:1}))]),c=n.animation([n.animate("{{transition}}",n.style({transform:"{{transform}}",opacity:0}))]),p=function(){function e(e,t,n,o,i,a){this.componentFactoryResolver=e,this.cd=t,this.renderer=n,this.config=o,this.dialogRef=i,this.zone=a,this.visible=!0,this.transformOptions="scale(0.7)"}return e.prototype.ngAfterViewInit=function(){this.loadChildComponent(this.childComponentType),this.cd.detectChanges()},e.prototype.loadChildComponent=function(e){var t=this.componentFactoryResolver.resolveComponentFactory(e),n=this.insertionPoint.viewContainerRef;n.clear(),this.componentRef=n.createComponent(t)},e.prototype.moveOnTop=function(){if(!1!==this.config.autoZIndex){var e=(this.config.baseZIndex||0)+ ++i.DomHandler.zindex;this.container.style.zIndex=String(e),this.maskViewChild.nativeElement.style.zIndex=String(e-1)}},e.prototype.onAnimationStart=function(e){switch(e.toState){case"visible":this.container=e.element,this.wrapper=this.container.parentElement,this.moveOnTop(),this.bindGlobalListeners(),!1!==this.config.modal&&this.enableModality(),this.focus();break;case"void":this.onContainerDestroy()}},e.prototype.onAnimationEnd=function(e){"void"===e.toState&&this.dialogRef.destroy()},e.prototype.onContainerDestroy=function(){this.unbindGlobalListeners(),!1!==this.config.modal&&this.disableModality(),this.container=null},e.prototype.close=function(){this.visible=!1,this.cd.markForCheck()},e.prototype.hide=function(){this.dialogRef&&this.dialogRef.close()},e.prototype.enableModality=function(){var e=this;!1!==this.config.closable&&this.config.dismissableMask&&(this.maskClickListener=this.renderer.listen(this.wrapper,"mousedown",(function(t){e.wrapper&&e.wrapper.isSameNode(t.target)&&e.hide()}))),!1!==this.config.modal&&i.DomHandler.addClass(document.body,"p-overflow-hidden")},e.prototype.disableModality=function(){this.wrapper&&(this.config.dismissableMask&&this.unbindMaskClickListener(),!1!==this.config.modal&&i.DomHandler.removeClass(document.body,"p-overflow-hidden"),this.cd.destroyed||this.cd.detectChanges())},e.prototype.onKeydown=function(e){if(9===e.which){e.preventDefault();var t=i.DomHandler.getFocusableElements(this.container);if(t&&t.length>0)if(t[0].ownerDocument.activeElement){var n=t.indexOf(t[0].ownerDocument.activeElement);e.shiftKey?-1==n||0===n?t[t.length-1].focus():t[n-1].focus():-1==n||n===t.length-1?t[0].focus():t[n+1].focus()}else t[0].focus()}},e.prototype.focus=function(){var e=i.DomHandler.findSingle(this.container,"[autofocus]");e&&this.zone.runOutsideAngular((function(){setTimeout((function(){return e.focus()}),5)}))},e.prototype.bindGlobalListeners=function(){this.bindDocumentKeydownListener(),!1!==this.config.closeOnEscape&&!1!==this.config.closable&&this.bindDocumentEscapeListener()},e.prototype.unbindGlobalListeners=function(){this.unbindDocumentKeydownListener(),this.unbindDocumentEscapeListener()},e.prototype.bindDocumentKeydownListener=function(){var e=this;this.zone.runOutsideAngular((function(){e.documentKeydownListener=e.onKeydown.bind(e),window.document.addEventListener("keydown",e.documentKeydownListener)}))},e.prototype.unbindDocumentKeydownListener=function(){this.documentKeydownListener&&(window.document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},e.prototype.bindDocumentEscapeListener=function(){var e=this,t=this.maskViewChild?this.maskViewChild.nativeElement.ownerDocument:"document";this.documentEscapeListener=this.renderer.listen(t,"keydown",(function(t){27==t.which&&parseInt(e.container.style.zIndex)==i.DomHandler.zindex+(e.config.baseZIndex?e.config.baseZIndex:0)&&e.hide()}))},e.prototype.unbindDocumentEscapeListener=function(){this.documentEscapeListener&&(this.documentEscapeListener(),this.documentEscapeListener=null)},e.prototype.unbindMaskClickListener=function(){this.maskClickListener&&(this.maskClickListener(),this.maskClickListener=null)},e.prototype.ngOnDestroy=function(){this.onContainerDestroy(),this.componentRef&&this.componentRef.destroy()},e}();p.decorators=[{type:t.Component,args:[{selector:"p-dynamicDialog",template:'\n <div #mask [ngClass]="{\'p-dialog-mask\':true, \'p-component-overlay p-dialog-mask-scrollblocker\': config.modal !== false}">\n <div [ngClass]="{\'p-dialog p-dynamic-dialog p-component\':true, \'p-dialog-rtl\': config.rtl}" [ngStyle]="config.style" [class]="config.styleClass"\n [@animation]="{value: \'visible\', params: {transform: transformOptions, transition: config.transitionOptions || \'150ms cubic-bezier(0, 0, 0.2, 1)\'}}"\n (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)" role="dialog" *ngIf="visible"\n [style.width]="config.width" [style.height]="config.height">\n <div class="p-dialog-header" *ngIf="config.showHeader === false ? false: true">\n <span class="p-dialog-title">{{config.header}}</span>\n <div class="p-dialog-header-icons">\n <button [ngClass]="\'p-dialog-header-icon p-dialog-header-maximize p-link\'" type="button" (click)="hide()" (keydown.enter)="hide()" *ngIf="config.closable !== false">\n <span class="p-dialog-header-close-icon pi pi-times"></span>\n </button>\n </div>\n </div>\n <div class="p-dialog-content" [ngStyle]="config.contentStyle">\n <ng-template pDynamicDialogContent></ng-template>\n </div>\n <div class="p-dialog-footer" *ngIf="config.footer">\n {{config.footer}}\n </div>\n </div>\n </div>\n\t',animations:[n.trigger("animation",[n.transition("void => visible",[n.useAnimation(d)]),n.transition("visible => void",[n.useAnimation(c)])])],changeDetection:t.ChangeDetectionStrategy.Default,encapsulation:t.ViewEncapsulation.None,styles:[".p-dialog-mask{align-items:center;background-color:transparent;display:flex;height:100%;justify-content:center;left:0;pointer-events:none;position:fixed;top:0;transition-property:background-color;width:100%}.p-dialog,.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog{display:flex;flex-direction:column;max-height:90%;position:relative;transform:scale(1)}.p-dialog-content{overflow-y:auto}.p-dialog-header{align-items:center;display:flex;flex-shrink:0;justify-content:space-between}.p-dialog-footer{flex-shrink:0}.p-dialog .p-dialog-header-icons{align-items:center;display:flex}.p-dialog .p-dialog-header-icon{align-items:center;display:flex;justify-content:center;overflow:hidden;position:relative}.p-dialog-mask.p-dialog-mask-leave{background-color:transparent}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-bottom-left .p-dialog,.p-dialog-bottom-right .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-top .p-dialog{margin:.75rem;transform:translateZ(0)}.p-dialog-maximized{height:100%;left:0!important;max-height:100%;top:0!important;transform:none;transition:none;width:100vw!important}.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,.p-dialog-top-left{align-items:flex-start}.p-dialog-top-left{justify-content:flex-start}.p-dialog-top-right{align-items:flex-start;justify-content:flex-end}.p-dialog-bottom{align-items:flex-end}.p-dialog-bottom-left{align-items:flex-end;justify-content:flex-start}.p-dialog-bottom-right{align-items:flex-end;justify-content:flex-end}.p-dialog .p-resizable-handle{bottom:1px;cursor:se-resize;display:block;font-size:.1px;height:12px;position:absolute;right:1px;width:12px}.p-confirm-dialog .p-dialog-content{align-items:center;display:flex}"]}]}],p.ctorParameters=function(){return[{type:t.ComponentFactoryResolver},{type:t.ChangeDetectorRef},{type:t.Renderer2},{type:r},{type:l},{type:t.NgZone}]},p.propDecorators={insertionPoint:[{type:t.ViewChild,args:[s]}],maskViewChild:[{type:t.ViewChild,args:["mask"]}]};var m=function(){};m.decorators=[{type:t.NgModule,args:[{imports:[o.CommonModule],declarations:[p,s],entryComponents:[p]}]}];var g=function(){function e(e,t){this._parentInjector=e,this._additionalTokens=t}return e.prototype.get=function(e,t,n){var o=this._additionalTokens.get(e);return o||this._parentInjector.get(e,t)},e}(),f=function(){function e(e,t,n){this.componentFactoryResolver=e,this.appRef=t,this.injector=n,this.dialogComponentRefMap=new Map}return e.prototype.open=function(e,t){var n=this.appendDialogComponentToBody(t);return this.dialogComponentRefMap.get(n).instance.childComponentType=e,n},e.prototype.appendDialogComponentToBody=function(e){var t=this,n=new WeakMap;n.set(r,e);var o=new l;n.set(l,o);var i=o.onClose.subscribe((function(){t.dialogComponentRefMap.get(o).instance.close()})),a=o.onDestroy.subscribe((function(){t.removeDialogComponentFromBody(o),a.unsubscribe(),i.unsubscribe()})),s=this.componentFactoryResolver.resolveComponentFactory(p).create(new g(this.injector,n));this.appRef.attachView(s.hostView);var d=s.hostView.rootNodes[0];return document.body.appendChild(d),this.dialogComponentRefMap.set(o,s),o},e.prototype.removeDialogComponentFromBody=function(e){if(e&&this.dialogComponentRefMap.has(e)){var t=this.dialogComponentRefMap.get(e);this.appRef.detachView(t.hostView),t.destroy(),this.dialogComponentRefMap.delete(e)}},e}();f.decorators=[{type:t.Injectable}],f.ctorParameters=function(){return[{type:t.ComponentFactoryResolver},{type:t.ApplicationRef},{type:t.Injector}]},e.DialogService=f,e.DynamicDialogComponent=p,e.DynamicDialogConfig=r,e.DynamicDialogInjector=g,e.DynamicDialogModule=m,e.DynamicDialogRef=l,e.ɵa=s,Object.defineProperty(e,"__esModule",{value:!0})})); //# sourceMappingURL=primeng-dynamicdialog.umd.min.js.map