ngx-modal-dialog
Version:
Dynamic modal dialog for Angular
2 lines • 9.49 kB
JavaScript
!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("rxjs"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-modal-dialog",["exports","@angular/core","rxjs","@angular/common"],o):o((t="undefined"!=typeof globalThis?globalThis:t||self)["ngx-modal-dialog"]={},t.ng.core,t.rxjs,t.ng.common)}(this,(function(t,o,n,e){"use strict";var i=function(){function t(t,o){this._element=t,this.componentFactoryResolver=o,this.settings={overlayClass:"modal-backdrop fade",overlayAnimationTriggerClass:"show",modalClass:"modal ngx-modal fade",modalAnimationTriggerClass:"show",modalDialogClass:"modal-dialog modal-dialog-centered",contentClass:"modal-content",headerClass:"modal-header",headerTitleClass:"modal-title",closeButtonClass:"close glyphicon glyphicon-remove",closeButtonTitle:"CLOSE",bodyClass:"modal-body",footerClass:"modal-footer",alertClass:"ngx-modal-shake",alertDuration:250,notifyWithAlert:!0,buttonClass:"btn btn-primary"},this.showAlert=!1,this.animateOverlayClass="",this.animateModalClass="",this.showOverlay=!1,this._inProgress=!1}return t.prototype.onClick=function(t){t.target===this.dialogElement.nativeElement&&this.close()},t.prototype.dialogInit=function(t,o){var e=this;if(void 0===o&&(o={}),this.reference=t,o.childComponent){var i=this.componentFactoryResolver.resolveComponentFactory(o.childComponent),s=this.dynamicComponentTarget.createComponent(i);this._childInstance=s.instance,this._closeDialog$=new n.Subject,this._closeDialog$.subscribe((function(){e._finalizeAndDestroy()})),o.closeDialogSubject=this._closeDialog$,this._childInstance.dialogInit(s,o),null!=document.activeElement?document.activeElement.blur():document.body.blur()}this._setOptions(o)},t.prototype.ngOnInit=function(){var t=this;setTimeout((function(){t.animateOverlayClass=t.settings.overlayAnimationTriggerClass,t.animateModalClass=t.settings.modalAnimationTriggerClass}),0)},t.prototype.ngOnDestroy=function(){this.animateOverlayClass="",this.animateModalClass="",this._alertTimeout&&(clearTimeout(this._alertTimeout),this._alertTimeout=null),this._closeDialog$&&this._closeDialog$.unsubscribe()},t.prototype.doAction=function(t){this._inProgress||(this._inProgress=!0,this._closeIfSuccessful(t))},t.prototype.close=function(){this._inProgress||this.actionButtons&&this.actionButtons.length||(this._inProgress=!0,this.onClose?this._closeIfSuccessful(this.onClose):this._finalizeAndDestroy())},t.prototype._setOptions=function(t){if(t.onClose&&t.actionButtons&&t.actionButtons.length)throw new Error("OnClose callback and ActionButtons are not allowed to be defined on the same dialog.");this.title=t&&t.title||"",this.onClose=t&&t.onClose||null,this.actionButtons=this._childInstance&&this._childInstance.actionButtons||t&&t.actionButtons||null,t&&t.settings&&Object.assign(this.settings,t.settings)},t.prototype._closeIfSuccessful=function(t){var o=this;if(!t)return this._finalizeAndDestroy();var e=t();if("boolean"==typeof e)return e?this._finalizeAndDestroy():this._triggerAlert();this.isPromise(e)&&(e=n.from(e)),this.isObservable(e)?e.subscribe((function(){o._finalizeAndDestroy()}),(function(){o._triggerAlert()})):this._inProgress=!1},t.prototype._finalizeAndDestroy=function(){this._inProgress=!1,this.reference.destroy()},t.prototype._triggerAlert=function(){var t=this;this.settings.notifyWithAlert&&(this.showAlert=!0,this._alertTimeout=window.setTimeout((function(){t.showAlert=!1,t._inProgress=!1,clearTimeout(t._alertTimeout),t._alertTimeout=null}),this.settings.alertDuration))},t.prototype.isPromise=function(t){return t&&"function"!=typeof t.subscribe&&"function"==typeof t.then},t.prototype.isObservable=function(t){return t&&"function"==typeof t.subscribe},t}();i.decorators=[{type:o.Component,args:[{selector:"modal-dialog",template:'\n <div *ngIf="settings.overlayClass && showOverlay" [ngClass]="[settings.overlayClass, animateOverlayClass]"></div> \n <div [ngClass]="[settings.modalClass, animateModalClass]" #dialog>\n <div [ngClass]="settings.modalDialogClass">\n <div [ngClass]="[ showAlert ? settings.alertClass : \'\', settings.contentClass]">\n <div [ngClass]="settings.headerClass">\n <h4 [ngClass]="settings.headerTitleClass">{{title}}</h4>\n <button (click)="close()" *ngIf="!actionButtons || !actionButtons.length" type="button"\n [title]="settings.closeButtonTitle"\n [ngClass]="settings.closeButtonClass">\n </button>\n </div>\n <div [ngClass]="settings.bodyClass">\n <i #modalDialogBody></i>\n </div>\n <div [ngClass]="settings.footerClass" *ngIf="actionButtons && actionButtons.length">\n <button *ngFor="let button of actionButtons" (click)="doAction(button.onAction)"\n [ngClass]="button.buttonClass || settings.buttonClass">{{button.text}}\n </button>\n </div>\n </div>\n </div>\n </div>\n ',styles:["\n @-moz-keyframes shake {\n from, to { transform: translate3d(0, 0, 0); }\n 10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n 20%, 40%, 60%, 80% { transform: translate3d(2rem, 0, 0); }\n }\n @-webkit-keyframes shake {\n from, to { transform: translate3d(0, 0, 0); }\n 10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n 20%, 40%, 60%, 80% { transform: translate3d(2rem, 0, 0); }\n }\n @keyframes shake {\n from, to { transform: translate3d(0, 0, 0); }\n 10%, 30%, 50%, 70%, 90% { transform: translate3d(-2rem, 0, 0); }\n 20%, 40%, 60%, 80% { transform: translate3d(2rem, 0, 0); }\n }\n\n .ngx-modal {\n display: flex;\n }\n .ngx-modal-shake {\n backface-visibility: hidden;\n -webkit-animation-duration: 0.5s;\n -moz-animation-duration: 0.5s;\n animation-duration: 0.5s;\n -webkit-animation-fill-mode: both;\n -moz-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-animation-iteration-count: infinite;\n -moz-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n -webkit-animation-name: shake;\n -moz-animation-name: shake;\n animation-name: shake;\n }\n "]}]}],i.ctorParameters=function(){return[{type:o.ElementRef},{type:o.ComponentFactoryResolver}]},i.propDecorators={dynamicComponentTarget:[{type:o.ViewChild,args:["modalDialogBody",{read:o.ViewContainerRef,static:!0}]}],dialogElement:[{type:o.ViewChild,args:["dialog"]}],onClick:[{type:o.HostListener,args:["click",["$event"]]}]};Object.create;function s(t,o){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var e,i,s=n.call(t),a=[];try{for(;(void 0===o||o-- >0)&&!(e=s.next()).done;)a.push(e.value)}catch(t){i={error:t}}finally{try{e&&!e.done&&(n=s.return)&&n.call(s)}finally{if(i)throw i.error}}return a}Object.create;var a=function(){function t(){this.componentRefs=[]}return t.prototype.closeAnyExistingModalDialog=function(){for(;this.componentRefs.length;)this.componentRefs[this.componentRefs.length-1].destroy()},t.prototype.saveExistingModalDialog=function(t){var o=this;this.setOverlayForTopDialog(!1),this.componentRefs=function(){for(var t=[],o=0;o<arguments.length;o++)t=t.concat(s(arguments[o]));return t}(this.componentRefs,[t]),t.instance.showOverlay=!0,t.onDestroy((function(){o.componentRefs.pop(),o.setOverlayForTopDialog(!0)}))},t.prototype.setOverlayForTopDialog=function(t){this.componentRefs.length&&(this.componentRefs[this.componentRefs.length-1].instance.showOverlay=t)},t}();a.decorators=[{type:o.Injectable}];var r=function(){function t(t,o){this.componentFactoryResolver=t,this.modalDialogInstanceService=o}return t.prototype.openDialog=function(t,o){void 0===o&&(o={}),o.placeOnTop||this.modalDialogInstanceService.closeAnyExistingModalDialog();var n=this.componentFactoryResolver.resolveComponentFactory(i),e=t.createComponent(n);e.instance.dialogInit(e,o),this.modalDialogInstanceService.saveExistingModalDialog(e)},t}();r.decorators=[{type:o.Injectable}],r.ctorParameters=function(){return[{type:o.ComponentFactoryResolver,decorators:[{type:o.Inject,args:[o.ComponentFactoryResolver]}]},{type:a,decorators:[{type:o.Inject,args:[a]}]}]};var l=function(){function t(){}return t.prototype.dialogInit=function(t,o){if(!o.data)throw new Error("Data information for simple modal dialog is missing");this.text=o.data.text},t}();l.decorators=[{type:o.Component,args:[{selector:"simple-modal-dialog",template:"",host:{"[innerHTML]":"text"},styles:[":host { display: block; }"]}]}];var c=new o.InjectionToken("MODAL_DIALOG_FORROOT_GUARD"),d=function(){function t(){}return t.forRoot=function(){return{ngModule:t,providers:[{provide:c,useFactory:m,deps:[t,new o.Optional,new o.SkipSelf]},a]}},t}();function m(t){if(t)throw new Error("ModalDialogModule.forRoot() called twice.");return"guarded"}d.decorators=[{type:o.NgModule,args:[{imports:[e.CommonModule],declarations:[i,l],entryComponents:[i,l],exports:[i,l],providers:[r,a]}]}],t.MODAL_DIALOG_FORROOT_GUARD=c,t.ModalDialogComponent=i,t.ModalDialogInstanceService=a,t.ModalDialogModule=d,t.ModalDialogService=r,t.SimpleModalComponent=l,t.provideForRootGuard=m,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-modal-dialog.umd.min.js.map