UNPKG

ng2-modal-module

Version:

bootstrap modal component adjusted for angular2+ framework based on rx-pubsub service. NO jQuery!

2 lines 6.38 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("pubsub-distinct"),require("@angular/core"),require("component-injector"),require("xdom-util"),require("@angular/common"),require("trust-html")):"function"==typeof define&&define.amd?define("ng2-modal-module",["exports","pubsub-distinct","@angular/core","component-injector","xdom-util","@angular/common","trust-html"],e):e((t=t||self)["ng2-modal-module"]={},t.pubsubDistinct,t.ng.core,t.componentInjector,t.xdomUtil,t.ng.common,t.trustHtml)}(this,function(t,e,o,n,i,s,r){"use strict";var c=function(){return(c=Object.assign||function(t){for(var e,o=1,n=arguments.length;o<n;o++)for(var i in e=arguments[o])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},l=function(){function t(){}return t.showModal=function(t,o){void 0===o&&(o={}),o.show=!0,o.hide=null,e.PubSubDistinct.publishDistinct(t,o)},t.hideModal=function(t){e.PubSubDistinct.publishDistinct(t,{hide:!0})},t.resetEventsSubscribers=function(t){t.forEach(function(t){t&&e.PubSubDistinct.hasSubscribers(t)&&e.PubSubDistinct.dispose(t)})},t.subscribe=function(t,o){e.PubSubDistinct.subscribe(t,o)},t}(),a=function(){function t(t){this.componentInjector=t,this.animationClass="fade",this.showModalClass="in",this.bodyOpenModalClass="modal-open",this.defaultProperties={title:"",show:!1,showEvent:!1,hide:!1,componentSelector:!1,componentInputs:!1,htmlContent:"",overlayClick:!0,customClass:"",buttons:{visible:!0,cancel:{visible:!0,label:"Cancel",event:!1},success:{visible:!0,label:"Save",event:!1}}},this.properties={}}return Object.defineProperty(t.prototype,"id",{set:function(t){t&&(this.eventName=t,this.unsubscribe(),this.subscribeToEvent())},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){},t.prototype.ngOnDestroy=function(){this.unsubscribe(),this.resetInjectedComponent()},t.prototype.cancelAction=function(){this.properties.buttons.cancel.event&&e.PubSubDistinct.publishDistinct(this.properties.buttons.cancel.event,!0),this.hide()},t.prototype.successAction=function(){this.properties.buttons.success.event?e.PubSubDistinct.publishDistinct(this.properties.buttons.success.event,!0):this.hide()},t.prototype.overlayClick=function(){this.properties.overlayClick&&this.cancelAction()},t.prototype.show=function(){var t=this.modalWindow.nativeElement;i.XDomUtil.hasClass(t,this.showModalClass)||i.XDomUtil.addClass(t,this.showModalClass);var o=document.querySelector("body");i.XDomUtil.hasClass(o,this.bodyOpenModalClass)||i.XDomUtil.addClass(o,this.bodyOpenModalClass),this.properties.showEvent&&e.PubSubDistinct.publishDistinct(this.properties.showEvent,!0)},t.prototype.hide=function(){var t=this.modalWindow.nativeElement;i.XDomUtil.removeClass(t,this.showModalClass);var e=document.querySelector("body");i.XDomUtil.removeClass(e,this.bodyOpenModalClass)},t.prototype.subscribeToEvent=function(){var t=this;this.eventSubscriber=e.PubSubDistinct.subscribe(this.eventName,function(e){t.initModal(e)})},t.prototype.initModal=function(t){t.show?(this.resetInjectedComponent(),this.setProperties(t),this.properties.componentSelector&&(this.injectedComponentRef=this.injectComponent(this.properties.componentSelector),this.setComponentProperties()),this.show(),this.resetModalEventSubscriber()):t.hide&&(this.resetInjectedComponent(),this.setProperties(t),this.hide(),this.resetModalEventSubscriber())},t.prototype.unsubscribe=function(){this.eventSubscriber&&e.PubSubDistinct.unsubscribe(this.eventSubscriber)},t.prototype.injectComponent=function(t){var e;return t&&(e=this.componentInjector.inject(this.injectContainer,t)),e},t.prototype.setComponentProperties=function(){this.properties.componentInputs&&this.injectedComponentRef&&this.componentInjector.setProperties(this.injectedComponentRef,this.properties.componentInputs)},t.prototype.resetInjectedComponent=function(){this.injectedComponentRef&&(this.componentInjector.remove(this.injectedComponentRef),this.injectedComponentRef=null)},t.prototype.setProperties=function(t){this.properties=c({},this.defaultProperties,t)},t.prototype.resetModalEventSubscriber=function(){e.PubSubDistinct.publishDistinct(this.eventName,{})},t.decorators=[{type:o.Component,args:[{selector:"ng2-modal-window",template:'<div class="ko-modal-window modal" [ngClass]="animationClass" tabindex="-1" role="dialog" id="myModal" #modalWindow>\n <div class="ko-modal-overlay" (click)="overlayClick()"></div>\n <div class="modal-dialog {{properties.customClass}}" role="document">\n <div class="modal-content">\n <div class="modal-header">\n <button type="button" class="close" aria-label="Close" (click)="cancelAction()">\n <span aria-hidden="true">&times;</span>\n </button>\n <h4 class="modal-title">{{properties.title}}</h4>\n </div>\n <div class="modal-body">\n <div #injectContainer [innerHTML]="properties.htmlContent | trustHtml"></div>\n </div>\n <div class="modal-footer" *ngIf="properties?.buttons?.visible">\n <button type="button" class="btn btn-default" (click)="cancelAction()"\n *ngIf="properties.buttons.cancel?.visible">{{properties.buttons.cancel.label}}\n </button>\n <button type="button" class="btn btn-primary" (click)="successAction()"\n *ngIf="properties.buttons.success?.visible">{{properties.buttons.success.label}}\n </button>\n </div>\n </div>\x3c!-- /.modal-content --\x3e\n </div>\x3c!-- /.modal-dialog --\x3e\n</div>\x3c!-- /.modal --\x3e\n',styles:[".ko-modal-window{background-color:rgba(0,0,0,.5)}.ko-modal-window.in{display:block}.ko-modal-open{overflow:hidden}.ko-modal-overlay{position:fixed;width:100%;height:100%;left:0;top:0}"]}]}],t.ctorParameters=function(){return[{type:n.ComponentInjector}]},t.propDecorators={modalWindow:[{type:o.ViewChild,args:["modalWindow",{"static":!0}]}],injectContainer:[{type:o.ViewChild,args:["injectContainer",{read:o.ViewContainerRef,"static":!0}]}],animationClass:[{type:o.Input}],id:[{type:o.Input}]},t}(),u=function(){function t(){}return t.decorators=[{type:o.NgModule,args:[{declarations:[a],imports:[s.CommonModule,r.TrustHtmlModule],exports:[a]}]}],t}();t.ModalModule=u,t.Ng2ModalWindow=l,t.Ng2ModalWindowComponent=a,Object.defineProperty(t,"__esModule",{value:!0})}); //# sourceMappingURL=ng2-modal-module.umd.min.js.map