angular-custom-modal/bundles/angular-custom-modal.umd.min.js

Angular2+ Modal / Dialog (with inner component support).

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common"],n):n(e["angular-custom-modal"]={},e.ng.core,e.ng.common)}(this,function(e,n,t){"use strict";var o=function(){function e(e,n){this.elementRef=e,this.changeDetectorRef=n,this.closeOnOutsideClick=!0,this.visible=!1,this.visibleAnimate=!1}return e.prototype.ngOnDestroy=function(){this.close()},e.prototype.open=function(){var e=this;document.body.classList.add("modal-open"),this.visible=!0,setTimeout(function(){e.visibleAnimate=!0})},e.prototype.close=function(){var e=this;document.body.classList.remove("modal-open"),this.visibleAnimate=!1,setTimeout(function(){e.visible=!1,e.changeDetectorRef.markForCheck()},200)},e.prototype.onContainerClicked=function(e){e.target.classList.contains("modal")&&this.isTopMost()&&this.closeOnOutsideClick&&this.close()},e.prototype.onKeyDownHandler=function(e){"Escape"===e.key&&this.isTopMost()&&this.close()},e.prototype.isTopMost=function(){return!this.elementRef.nativeElement.querySelector(":scope modal > .modal")},e}();o.decorators=[{type:n.Component,args:[{selector:"modal",template:'\n    <div \n      class="modal fade"\n      role="dialog"\n      tabindex="-1"\n      [class.in]="visibleAnimate"\n      *ngIf="visible">\n      <div class="modal-dialog">\n        <div class="modal-content">\n          <div class="modal-header">\n            <ng-container *ngTemplateOutlet="header"></ng-container>\n            <button class="close" data-dismiss="modal" type="button" aria-label="Close" (click)="close()">×</button>\n          </div>\n          <div class="modal-body">\n            <ng-container *ngTemplateOutlet="body"></ng-container>\n          </div>\n          <div class="modal-footer">\n            <ng-container *ngTemplateOutlet="footer"></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  ',styles:["\n    /**\n     * A more specific selector overwrites bootstrap display properties, but they still enable users\n     * to overwite them on their apps.\n     */\n    /deep/ modal .modal {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-flex: 1;\n          -ms-flex: 1;\n              flex: 1;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      -webkit-box-pack: center;\n          -ms-flex-pack: center;\n              justify-content: center; }\n\n    /deep/ .modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      min-height: 100%;\n      background-color: rgba(0, 0, 0, 0.15);\n      z-index: 42; }\n\n    /deep/ .modal.in {\n      opacity: 1; }\n  "]}]}],o.ctorParameters=function(){return[{type:n.ElementRef},{type:n.ChangeDetectorRef}]},o.propDecorators={header:[{type:n.ContentChild,args:["modalHeader"]}],body:[{type:n.ContentChild,args:["modalBody"]}],footer:[{type:n.ContentChild,args:["modalFooter"]}],closeOnOutsideClick:[{type:n.Input}],onContainerClicked:[{type:n.HostListener,args:["click",["$event"]]}],onKeyDownHandler:[{type:n.HostListener,args:["document:keydown",["$event"]]}]};var i=function(){return function(){}}();i.decorators=[{type:n.NgModule,args:[{imports:[t.CommonModule],exports:[o],declarations:[o],providers:[]}]}],i.ctorParameters=function(){return[]},e.ModalComponent=o,e.ModalModule=i,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=angular-custom-modal.umd.min.js.map