UNPKG

ngb-modal

Version:

Modal dialog for angular applications using bootstrap3

2 lines 6.61 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngb-modal",["exports","@angular/core","@angular/common"],e):e(t["ngb-modal"]={},t.ng.core,t.ng.common)}(this,function(t,e,n){"use strict";var o=function(){function t(t){this.componentFactoryResolver=t,this.globalConfig={size:"md",modalClass:"",hideCloseButton:!1,centered:!1,backdrop:!0,animation:!0,keyboard:!0,closeOnOutsideClick:!0,backdropClass:"modal-backdrop"}}return Object.defineProperty(t.prototype,"defaults",{get:function(){return this.globalConfig},set:function(t){this.globalConfig=Object.assign(this.globalConfig,t)},enumerable:!0,configurable:!0}),t.prototype.setDefaults=function(t){this.globalConfig=Object.assign(this.globalConfig,t)},t.prototype.setRootViewContainerRef=function(t){this.modalHost=t},t.prototype.open=function(t,e){var n=e||{};if("object"==typeof t)return t.init(n),t.open(),t;if("function"==typeof t){var o=this.componentFactoryResolver.resolveComponentFactory(t);this.modalHost.remove();var s=this.modalHost.createComponent(o);return s.instance.ModalComponent.init(n),s.instance.close=this.closeFactory(),s.instance.onClose=s.instance.ModalComponent.onClose,s.instance.onOpen=s.instance.ModalComponent.onOpen,setTimeout(function(){return s.instance.ModalComponent.open()}),s.instance}},t.prototype.close=function(t){t.close()},t.prototype.closeFactory=function(){var t=this;return function(){this.ModalComponent.close(),t.modalHost.remove()}},t.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}],t.ctorParameters=function(){return[{type:e.ComponentFactoryResolver}]},t.ngInjectableDef=e.defineInjectable({factory:function(){return new t(e.inject(e.ComponentFactoryResolver))},token:t,providedIn:"root"}),t}(),s=function(){function t(t){this.modalManager=t,this.onOpen=new e.EventEmitter(!1),this.onClose=new e.EventEmitter(!1),this.isOpened=!1}return t.prototype.ngOnInit=function(){this.inputSettings={title:this.title,size:this.size||"md",modalClass:this.modalClass||"",hideCloseButton:this.hideCloseButton||!1,centered:this.centered||!1,backdrop:this.backdrop||!0,animation:this.animation||!0,keyboard:this.keyboard||!0,closeOnOutsideClick:this.closeOnOutsideClick||!0,backdropClass:this.backdropClass||"modal-backdrop"}},t.prototype.init=function(t){this.onOpen.observers=[],this.onClose.observers=[],this.settings=Object.assign({},this.modalManager.defaults,this.inputSettings,t),this.createBackDrop()},t.prototype.open=function(){var t=this;this.isOpened||(document.body.appendChild(this.backdropElement),document.body.classList.add("modal-open"),this.isOpened=!0,window.setTimeout(function(){t.modalRoot.nativeElement.classList.add("show"),t.modalRoot.nativeElement.focus(),t.onOpen.emit()},100))},t.prototype.close=function(){var t=this;this.isOpened&&(this.modalRoot.nativeElement.classList.remove("show"),document.body.removeChild(this.backdropElement),document.body.className=document.body.className.replace(/modal-open\b/,""),window.setTimeout(function(){t.isOpened=!1,t.onClose.emit()},100))},t.prototype.preventClosing=function(t){t.stopPropagation()},t.prototype.createBackDrop=function(){this.backdropElement=document.createElement("div"),this.backdropElement.classList.add("fade"),this.backdropElement.classList.add("show"),this.settings&&this.settings.backdrop&&1==this.settings.backdrop&&this.backdropElement.classList.add(this.settings.backdropClass)},t.decorators=[{type:e.Component,args:[{selector:"modal",template:'<div class="modal" tabindex="-1" role="dialog" #modalRoot (keydown.esc)="settings?.keyboard ? close() : 0" [ngStyle]="{ display: isOpened ? \'block\' : \'none\' }" [ngClass]="{\'fade\': settings?.animation}" (click)="settings?.backdrop !== \'static\' && settings?.closeOnOutsideClick ? close() : 0">\n <div [class]="\'modal-dialog modal-\'+ settings?.size + \' \' + settings?.modalClass" (click)="preventClosing($event)" [ngClass]="{\'modal-dialog-centered\': settings?.centered}">\n <div class="modal-content" tabindex="0" *ngIf="isOpened">\n <div class="modal-header">\n <h4 class="modal-title" *ngIf="settings?.title">{{ settings?.title }}</h4>\n <ng-content select="modal-header"></ng-content>\n <button *ngIf="!settings?.hideCloseButton" type="button" class="close" [attr.aria-label]="settings?.cancelButtonLabel || \'Close\'" (click)="close()"><span aria-hidden="true">&times;</span></button>\n </div>\n <div class="modal-body">\n <ng-content select="modal-content"></ng-content>\n </div>\n <div class="modal-footer">\n <ng-content select="modal-footer"></ng-content>\n </div>\n </div>\n </div>\n</div>',styles:[".modal-dialog-centered {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n min-height: calc(100% - (0.5rem * 2));\n }\n @media (min-width: 576px) {\n .modal-dialog-centered {\n min-height: calc(100% - (1.75rem * 2));\n }\n }"]}]}],t.ctorParameters=function(){return[{type:o}]},t.propDecorators={title:[{type:e.Input}],size:[{type:e.Input}],modalClass:[{type:e.Input}],hideCloseButton:[{type:e.Input}],centered:[{type:e.Input}],backdrop:[{type:e.Input}],animation:[{type:e.Input}],keyboard:[{type:e.Input}],closeOnOutsideClick:[{type:e.Input}],backdropClass:[{type:e.Input}],onOpen:[{type:e.Output}],onClose:[{type:e.Output}],modalRoot:[{type:e.ViewChild,args:["modalRoot"]}]},t}(),i=function(){function t(){}return t.prototype.ngOnInit=function(){},t.decorators=[{type:e.Component,args:[{selector:"modal-footer",template:"<ng-content></ng-content>"}]}],t.ctorParameters=function(){return[]},t}(),a=function(){function t(){}return t.prototype.ngOnInit=function(){},t.decorators=[{type:e.Component,args:[{selector:"modal-content",template:"<ng-content></ng-content>"}]}],t.ctorParameters=function(){return[]},t}(),r=function(){function t(){}return t.prototype.ngOnInit=function(){},t.decorators=[{type:e.Component,args:[{selector:"modal-header",template:"<ng-content></ng-content>"}]}],t.ctorParameters=function(){return[]},t}(),c=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[n.CommonModule],declarations:[s,i,a,r],exports:[s,i,a,r]}]}],t}();t.ModalManager=o,t.ModalComponent=s,t.ModalModule=c,t.ModalContentComponent=a,t.ModalHeaderComponent=r,t.ModalFooterComponent=i,Object.defineProperty(t,"__esModule",{value:!0})}); //# sourceMappingURL=ngb-modal.umd.min.js.map