ng-modals/bundles/ng-modals.umd.min.js

Make a modal in angular extremely easily with ng-modals. Installation to have a modal pop up is quick and easy.

!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define("ng-modals",["exports","@angular/core","@angular/platform-browser"],o):o(t["ng-modals"]={},t.ng.core,t.ng.platformBrowser)}(this,function(t,o,n){"use strict";var e=function(){function t(t){this.containers=t}return t.decorators=[{type:o.Directive,args:[{selector:"[ngmodals]"}]}],t.ctorParameters=function(){return[{type:o.ViewContainerRef}]},t}(),i=function(){function t(t){this.componentFactoryResolver=t,this.close=new o.EventEmitter,this.css={},this.viewIsInit=!1,this.initialClick=!1}return t.prototype.onclick=function(t){this.initialClick&&(document.getElementById("modelContainer").contains(t)||this.closeModal())},t.prototype.ngOnInit=function(){},t.prototype.ngOnChanges=function(){var t=this;setTimeout(function(){t.loadComponent()},10)},t.prototype.ngAfterViewInit=function(){this.loadComponent(),this.viewIsInit=!0},t.prototype.loadComponent=function(){var o=this;if(this.condition){var t=document.getElementById("modelContainer");this.options.ignore?this.options.width&&(t.style.width=this.options.width+"vw",t.style.left=this.options.left+"vw"):this.options.width&&(t.style.width=this.options.width+"vw",t.style.left=(100-parseInt(this.options.width))/2+"vw"),this.options.height&&(t.style.height=this.options.height+"vh",t.style.top=(100-parseInt(this.options.height))/2+"vh"),this.options.background&&(t.style.background=this.options.background,t.style.boxShadow="none");var n=this.componentFactoryResolver.resolveComponentFactory(this.options.component),e=this.modalDirective.containers;e.clear();var i=e.createComponent(n);i.instance.data=this.options.data,i.instance.toggleModal.subscribe(function(t){o.closeModal()}),document.getElementById("mainWrapper").style.opacity="1",this.initialClick=!0}},t.prototype.closeModal=function(){var t=this;this.initialClick=!1,document.getElementById("mainWrapper").style.opacity="0",setTimeout(function(){t.close.emit()},200)},t.decorators=[{type:o.Component,args:[{selector:"ng-modals",template:'\n    <div class="mainWrapper" *ngIf="condition" id="mainWrapper">\n      <div class="modalContainer" id="modelContainer" #container>\n        <ng-template ngmodals></ng-template>\n      </div>\n    </div>\n  ',styles:["\n      .mainWrapper{\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(0,0,0,0.5);\n        width: 100%;\n        height: 100vh;\n        opacity: 0;\n        transition: opacity 0.2s ease-out;\n        z-index: 1000;\n      }\n      .modalContainer{\n        position: fixed;\n        top: 15vh;\n        left: 20vw;\n        width: 60vw;\n        height: 70vh;\n        background: white;\n        border-radius: 32px;\n        box-shadow: 2px 2px 4px rgba(0,0,0,0.5);\n        overflow-y: auto;\n      }\n    "]}]}],t.ctorParameters=function(){return[{type:o.ComponentFactoryResolver}]},t.propDecorators={options:[{type:o.Input,args:["options"]}],condition:[{type:o.Input,args:["status"]}],close:[{type:o.Output,args:["close"]}],modalDirective:[{type:o.ViewChild,args:[e]}],container:[{type:o.ViewChild,args:["container"]}],onclick:[{type:o.HostListener,args:["document:click",["$event.target"]]}]},t}(),s=function(){function t(){}return t.decorators=[{type:o.NgModule,args:[{declarations:[i,e],imports:[n.BrowserModule],exports:[i]}]}],t}();t.NgModalsDirective=e,t.NgModalsComponent=i,t.NgModalsModule=s,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=ng-modals.umd.min.js.map