UNPKG

@browninglogic/ng-modal

Version:

A simple, lightweight interface for creating layered modal dialogs in Angular 6+

16 lines (14 loc) 5.46 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("rxjs/operators"),require("@angular/common")):"function"==typeof define&&define.amd?define("@browninglogic/ng-modal",["exports","@angular/core","rxjs/operators","@angular/common"],t):t(((e=e||self).browninglogic=e.browninglogic||{},e.browninglogic["ng-modal"]={}),e.ng.core,e.rxjs.operators,e.ng.common)}(this,(function(e,t,n,o){"use strict"; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABLITY OR NON-INFRINGEMENT. See the Apache Version 2.0 License for specific language governing permissions and limitations under the License. ***************************************************************************** */function i(e,t,n,o){var i,r=arguments.length,a=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,o);else for(var s=e.length-1;s>=0;s--)(i=e[s])&&(a=(r<3?i(a):r>3?i(t,n,a):i(t,n))||a);return r>3&&a&&Object.defineProperty(t,n,a),a}function r(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}var a=function(){function e(){this.modalIndexChanged=new t.EventEmitter,this.activeModals=new Array,this.startingZIndex=1e3}return e.prototype.push=function(e){var t=this.activeModals.indexOf(e);return-1===t?(this.activeModals.push(e),this.activeModals.indexOf(e)):t===this.activeModals.length-1?t:(this.removeModal(e),this.activeModals.push(e),this.activeModals.indexOf(e))},e.prototype.removeModal=function(e){var t=this.activeModals.indexOf(e);if(t>-1){this.activeModals.splice(t,1);for(var n=t;n<this.activeModals.length;n++)this.modalIndexChanged.emit([this.activeModals[n],n])}},i([t.Output(),r("design:type",Object)],e.prototype,"modalIndexChanged",void 0),e=i([t.Injectable()],e)}(),s=function(){function e(e){this.modalManagerService=e,this.modalClass="",this.overlayClass="",this.closeOnOverlayClick=!0,this.showCloseButton=!1,this._visible=!1}return Object.defineProperty(e.prototype,"visible",{get:function(){return this._visible},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){var e=this;this.subIndexChanged=this.modalManagerService.modalIndexChanged.pipe(n.filter((function(t){return t[0]===e}))).subscribe((function(t){return e.onIndexChanged(t[1])}))},e.prototype.ngOnDestroy=function(){this.subIndexChanged&&this.subIndexChanged.unsubscribe()},e.prototype.onIndexChanged=function(e){this.modalIndex=e},Object.defineProperty(e.prototype,"zIndex",{get:function(){return null!=this.modalIndex?this.modalManagerService.startingZIndex+this.modalIndex:null},enumerable:!0,configurable:!0}),e.prototype.show=function(){this.modalIndex=this.modalManagerService.push(this),this._visible=!0},e.prototype.hide=function(){this.modalManagerService.removeModal(this),this._visible=!1,this.modalIndex=null},e.prototype.onOverlayClicked=function(e){e.target.classList.contains("nm-modal-overlay")&&this.closeOnOverlayClick&&this.hide()},e.ctorParameters=function(){return[{type:a}]},i([t.Input(),r("design:type",Object)],e.prototype,"modalClass",void 0),i([t.Input(),r("design:type",Object)],e.prototype,"overlayClass",void 0),i([t.Input(),r("design:type",Object)],e.prototype,"closeOnOverlayClick",void 0),i([t.Input(),r("design:type",Object)],e.prototype,"showCloseButton",void 0),e=i([t.Component({selector:"nm-modal-window",template:'<div [class]="\'nm-modal-overlay \' + overlayClass" (click)="onOverlayClicked($event)" [style.display]="visible ? \'block\' : \'none\'" [style.z-index]="zIndex">\n <div [class]="\'nm-modal-window \' + modalClass">\n <div *ngIf="showCloseButton" (click)="hide()" class="nm-modal-close-btn">&times;</div>\n\n <div>\n <ng-content select="[header]"></ng-content>\n </div>\n <div>\n <ng-content select="[body]"></ng-content>\n </div>\n <div>\n <ng-content select="[footer]"></ng-content>\n </div>\n </div>\n</div>',styles:[".nm-modal-overlay{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.2)}.nm-modal-window{position:fixed;border:2px solid grey;border-radius:15px;text-align:center;background:#fff;padding:10px 23px;display:inline-block;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.nm-modal-close-btn{position:absolute;right:3px;top:5px;color:#888;font-weight:700;font-size:20px;cursor:pointer;width:25px;line-height:23px}.nm-modal-close-btn:hover{color:#000}"]}),r("design:paramtypes",[a])],e)}(),l=function(){function e(){}return e=i([t.NgModule({imports:[o.CommonModule],providers:[a],declarations:[s],exports:[s]})],e)}();e.ModalManagerModule=l,e.ModalManagerService=a,e.ModalWindowComponent=s,Object.defineProperty(e,"__esModule",{value:!0})})); //# sourceMappingURL=browninglogic-ng-modal.umd.min.js.map