@addapptables/notifier
Version:
Material notifier library for angular
2 lines • 14.9 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/animations"),require("rxjs"),require("rxjs/operators"),require("@angular/core"),require("@angular/cdk/portal"),require("@addapptables/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("@addapptables/notifier",["exports","@angular/animations","rxjs","rxjs/operators","@angular/core","@angular/cdk/portal","@addapptables/core","@angular/common"],e):e(((t=t||self).addapptables=t.addapptables||{},t.addapptables.notifier={}),t.ng.animations,t.rxjs,t.rxjs.operators,t.ng.core,t.ng.cdk.portal,t["addapptables-core"],t.ng.common)}(this,function(t,e,o,n,i,r,a,s){"use strict";var p=function(t,e){return(p=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])})(t,e)};function c(t,e){function o(){this.constructor=t}p(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}var l=[e.style({transform:"translate3d(0,-100%, 0)",visibility:"visible",offset:0}),e.style({transform:"translate3d(0, 0, 0)",offset:1})],f=[e.style({opacity:1,offset:0}),e.style({transform:"scale3d(0.3, 0.3, 0.3)",offset:.5}),e.style({opacity:0,offset:1})],u=[e.style({transform:"translate3d(0, 100%, 0)",visibility:"visible",offset:0}),e.style({transform:"translate3d(0, 0, 0)",offset:1})],d={notifierAnimator:m()};function m(){return e.trigger("notifierAnimator",[e.transition("* => slideInUp",e.animate(150,e.keyframes(u))),e.transition("* => slideInDown",e.animate(150,e.keyframes(l))),e.transition("* => exit",e.animate(150,e.keyframes(f)))])}var h="addapptable-notifier-",y=function(){};var g={topRight:0,topLeft:1,bottomRight:2,bottomLeft:3};g[g.topRight]="topRight",g[g.topLeft]="topLeft",g[g.bottomRight]="bottomRight",g[g.bottomLeft]="bottomLeft";var b={primary:"addapptable-notifier-primary",accent:"addapptable-notifier-accent",success:"addapptable-notifier-success",warning:"addapptable-notifier-warning",danger:"addapptable-notifier-danger",info:"addapptable-notifier-info"},_=function(){};var v=function(){function t(t,e,n,i){this._afterClose=new o.Subject,this._component=t,this._portal=e,this._component._id=i,this._document=n,this._component._close.subscribe(this.close.bind(this))}return Object.defineProperty(t.prototype,"component",{get:function(){return this._component},enumerable:!0,configurable:!0}),t.prototype.afterClosed=function(){return this._afterClose.asObservable()},t.prototype.close=function(){var t=this;this._component._animationStateChanged.pipe(n.filter(function(t){return"done"===t.phaseName}),n.take(1)).subscribe(function(){t._afterClose.next(t._component._id),t._afterClose.complete(),t._destroyPortal()}),this._component.startExitAnimation()},t.prototype.changedStyle=function(t){this._component._style=t},t.prototype._destroyPortal=function(){var t=this._document.getElementById(this._component._id);this._portal.detach(),t&&t.parentNode.removeChild(t)},t}();var x=new i.InjectionToken("AddapptableConfigurationNotifierData"),I=new i.InjectionToken("ADDAPPTABLE_NOTIFIER"),N=function(){function t(t,e,n){this.data=e,this.componentFactoryResolver=n,this._state="slideInUp",this._close=new i.EventEmitter,this._animationStateChanged=new i.EventEmitter,this._style={},this.subject=new o.Subject,this.seconds=o.interval(5e3),this.configuration={position:g.bottomRight,timeout:5e3,classIcon:"material-icons",iconValue:"notifications"},this.configuration=Object.assign({position:g.bottomRight,timeout:5e3,classIcon:"material-icons",iconValue:"notifications"},t),this.seconds=o.interval(this.configuration.timeout)}return t.prototype.ngOnInit=function(){this.data.templateOrComponent&&this.resolveComponent(this.data.templateOrComponent,this.appDynamic.viewContainerRef)},t.prototype.ngAfterViewInit=function(){this._timeOut()},t.prototype.onMouseOver=function(){this.subject.next(),this.subject.complete()},t.prototype.onMouseLeave=function(){this.subject=new o.Subject,this._timeOut()},t.prototype._timeOut=function(){var t=this;this.seconds.pipe(n.takeUntil(this.subject),n.take(1),n.tap(function(){return t.close()})).subscribe()},t.prototype.close=function(){this._close.emit()},t.prototype.startExitAnimation=function(){this._state="exit"},t.prototype.resolveComponent=function(t,e){if(t)if(e.clear(),t instanceof i.TemplateRef)e.createEmbeddedView(t,{$implicit:this.data});else{var o=t&&this.componentFactoryResolver.resolveComponentFactory(t),n=this.createInjector(e.injector);e.createComponent(o,null,n)}},t.prototype.createInjector=function(t){var e=new WeakMap([[I,this.data]]);return new r.PortalInjector(t,e)},t.prototype.ngOnDestroy=function(){this.subject.next(),this.subject.complete()},t.decorators=[{type:i.Component,args:[{selector:"addapptable-notifier",template:'<div [class]="\'addapptable-notifier \'+ data.type" [@notifierAnimator]="_state" (@notifierAnimator.start)="_animationStateChanged.emit($event)"\n (@notifierAnimator.done)="_animationStateChanged.emit($event)" [ngStyle]="_style">\n <i *ngIf="configuration.classIcon" [class]="configuration.classIcon">{{configuration.iconValue}}</i>\n <button type="button" (click)="close()">x</button>\n <span class="message">\n <ng-template addapptablesDynamic></ng-template>\n <span *ngIf="!data.templateOrComponent">{{data.message}}</span>\n </span>\n</div>',changeDetection:i.ChangeDetectionStrategy.Default,animations:[d.notifierAnimator],encapsulation:i.ViewEncapsulation.None,styles:[".addapptable-notifier{margin:1em;display:inline-block;position:fixed;z-index:1031;border-radius:3px;transition:.19s ease-in-out}.addapptable-notifier-success{background-color:#5cb85c;color:#5cb85c}.addapptable-notifier-info{background-color:#20a9d2;color:#20a9d2}.addapptable-notifier-warning{background-color:#e09d3d;color:#e09d3d}.addapptable-notifier-danger{background-color:#d43934;color:#d43934}.addapptable-notifier>i{display:block;left:15px;position:absolute;margin-top:-26px;font-size:20px;background-color:#fff!important;padding:9px;border-radius:50%;max-width:38px;box-shadow:0 16px 38px -12px rgba(0,0,0,.56),0 4px 25px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2)}.addapptable-notifier>button{float:right;min-width:auto;color:#fff!important;text-shadow:none;opacity:.9;box-sizing:border-box;position:relative;cursor:pointer;outline:0;border:none;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;background-color:transparent}.addapptable-notifier .message{display:block;color:#fff;min-width:376px;max-width:500px;padding:1.5em;text-align:justify}"]}]}],t.ctorParameters=function(){return[{type:y,decorators:[{type:i.Inject,args:[x]}]},{type:_,decorators:[{type:i.Inject,args:[I]}]},{type:i.ComponentFactoryResolver}]},t.propDecorators={appDynamic:[{type:i.ViewChild,args:[a.DynamicDirective,{static:!0}]}],onMouseOver:[{type:i.HostListener,args:["mouseover"]}],onMouseLeave:[{type:i.HostListener,args:["mouseleave"]}]},t}();var j=function(){function t(t){this._document=t}return t.prototype.getContainerElement=function(){return this._containerElement||this._createContainer(),this._containerElement},t.prototype._createContainer=function(){var t=this._document.createElement("div");t.classList.add("addapptable-notifier-container"),this._document.body.appendChild(t),this._containerElement=t},t.prototype.ngOnDestroy=function(){this._containerElement&&this._containerElement.parentNode&&this._containerElement.parentNode.removeChild(this._containerElement)},t.decorators=[{type:i.Injectable,args:[{providedIn:"root"}]}],t.ctorParameters=function(){return[{type:void 0,decorators:[{type:i.Inject,args:[s.DOCUMENT]}]}]},t.ngInjectableDef=i.ɵɵdefineInjectable({factory:function(){return new t(i.ɵɵinject(s.DOCUMENT))},token:t,providedIn:"root"}),t}();var C=0,w=function(){function t(t,e,o,n){this._notifierContainerService=t,this._document=e,this._injector=o,this._componentFactoryResolver=n}return t.prototype.create=function(){var t=this._createPaneElement();return this._createPortalOutlet(t)},t.prototype._createPortalOutlet=function(t){return this._appRef||(this._appRef=this._injector.get(i.ApplicationRef)),new r.DomPortalOutlet(t,this._componentFactoryResolver,this._appRef,this._injector)},t.prototype._createPaneElement=function(){var t=this._document.createElement("div");return t.id=""+(h+C++),this._notifierContainerService.getContainerElement().appendChild(t),t},Object.defineProperty(t.prototype,"getLastUniqueId",{get:function(){return""+(h+(C-1))},enumerable:!0,configurable:!0}),t.decorators=[{type:i.Injectable}],t.ctorParameters=function(){return[{type:j},{type:void 0,decorators:[{type:i.Inject,args:[s.DOCUMENT]}]},{type:i.Injector},{type:i.ComponentFactoryResolver}]},t}();var S=function(){function t(t){this._document=t,this.notifiers=[],this.margin=30,this.maxNotifiers=5,this.notifiers=[]}return t.prototype.newNotifier=function(t){var e=this;t.afterClosed().pipe(n.take(1)).subscribe(this.deletePortal.bind(this)),t.changedStyle(this.getStyleNewNotifier(t)),setTimeout(function(){e.notifiers.length>=e.maxNotifiers&&e.notifiers.shift().close();var o=e._document.querySelector("#"+t.component._id+" > addapptable-notifier > .addapptable-notifier");e.notifiers.forEach(function(t){var n=e._document.querySelector("#"+t.component._id+" > addapptable-notifier > .addapptable-notifier");t.changedStyle(e.getStyleNotifierPosition(n,o.clientHeight))}),e.notifiers.push(t)})},t.prototype.deletePortal=function(t){var e=this.notifiers.findIndex(function(e){return e.component._id===t});if(e>=0){var o=this._document.querySelector("#"+this.notifiers[e].component._id+" > addapptable-notifier > .addapptable-notifier").clientHeight;this.notifiers.splice(e,1);for(var n=e-1;n>=0;n--){var i=this.notifiers[n],r=this._document.querySelector("#"+i.component._id+" > addapptable-notifier > .addapptable-notifier");i.changedStyle(this.getStyleDeleteNotifier(r,o))}}},t.prototype.ngOnDestroy=function(){this.notifiers.forEach(function(t){t.close()})},t.ctorParameters=function(){return[{type:HTMLDocument,decorators:[{type:i.Inject,args:[s.DOCUMENT]}]}]},t}();var O=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return c(e,t),e.prototype.getStyleNewNotifier=function(t){return t.component._state="slideInUp",{bottom:"0px",right:"0px"}},e.prototype.getStyleNotifierPosition=function(t,e){return{bottom:e+Number(t.style.bottom.replace("px",""))+this.margin+"px",right:"0px"}},e.prototype.getStyleDeleteNotifier=function(t,e){return{bottom:Number(t.style.bottom.replace("px",""))-e-this.margin+"px",right:"0px"}},e.decorators=[{type:i.Injectable}],e}(S),P=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return c(e,t),e.prototype.getStyleNewNotifier=function(t){return t.component._state="slideInDown",{top:"20px",right:"0px"}},e.prototype.getStyleNotifierPosition=function(t,e){return{top:e+Number(t.style.top.replace("px",""))+this.margin+"px",right:"0px"}},e.prototype.getStyleDeleteNotifier=function(t,e){return{top:Number(t.style.top.replace("px",""))-e-this.margin+"px",right:"0px"}},e.decorators=[{type:i.Injectable}],e}(S),E=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return c(e,t),e.prototype.getStyleNewNotifier=function(t){return t.component._state="slideInUp",{bottom:"0px",left:"0px"}},e.prototype.getStyleNotifierPosition=function(t,e){return{bottom:e+Number(t.style.bottom.replace("px",""))+this.margin+"px",left:"0px"}},e.prototype.getStyleDeleteNotifier=function(t,e){return{bottom:Number(t.style.bottom.replace("px",""))-e-this.margin+"px",left:"0px"}},e.decorators=[{type:i.Injectable}],e}(S),D=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return c(e,t),e.prototype.getStyleNewNotifier=function(t){return t.component._state="slideInDown",{top:"20px",left:"0px"}},e.prototype.getStyleNotifierPosition=function(t,e){return{top:e+Number(t.style.top.replace("px",""))+this.margin+"px",left:"0px"}},e.prototype.getStyleDeleteNotifier=function(t,e){return{top:Number(t.style.top.replace("px",""))-e-this.margin+"px",left:"0px"}},e.decorators=[{type:i.Injectable}],e}(S),R=function(){function t(t,e,o,n){this._notifierPortalService=t,this._injector=e,this._document=o,this.defaultConfiguration={position:g.bottomRight,timeout:5e3,classIcon:"material-icons",iconValue:"notifications"},this.defaultConfiguration=Object.assign(this.defaultConfiguration,n)}return t.prototype.openSuccess=function(t,e){return void 0===e&&(e={}),this.open({message:t,type:b.success},e)},t.prototype.openError=function(t,e){return void 0===e&&(e={}),this.open({message:t,type:b.danger},e)},t.prototype.openInfo=function(t,e){return void 0===e&&(e={}),this.open({message:t,type:b.info},e)},t.prototype.openWarning=function(t,e){return void 0===e&&(e={}),this.open({message:t,type:b.warning},e)},t.prototype.open=function(t,e){void 0===e&&(e={});var o=this._notifierPortalService.create(),n=this._createComponentPortal(t),i=o.attach(n),r=new v(i.instance,o,this._document,this._notifierPortalService.getLastUniqueId),a=Object.assign(this.defaultConfiguration,e);return this._factoryStrategy(a).newNotifier(r),r},t.prototype._factoryStrategy=function(t){switch(t.position){case g.bottomRight:return this._injector.get(O);case g.bottomLeft:return this._injector.get(E);case g.topLeft:return this._injector.get(D);case g.topRight:return this._injector.get(P);default:return this._injector.get(O)}},t.prototype._createComponentPortal=function(t){var e=new WeakMap([[I,t]]),o=new r.PortalInjector(this._injector,e);return new r.ComponentPortal(N,null,o)},t.decorators=[{type:i.Injectable}],t.ctorParameters=function(){return[{type:w},{type:i.Injector},{type:void 0,decorators:[{type:i.Inject,args:[s.DOCUMENT]}]},{type:y,decorators:[{type:i.Inject,args:[x]}]}]},t}();var A=function(){function t(){}return t.forRoot=function(e){return void 0===e&&(e={position:g.bottomRight,timeout:5e3,classIcon:"material-icons",iconValue:"notifications"}),{ngModule:t,providers:[{provide:x,useValue:e}]}},t.decorators=[{type:i.NgModule,args:[{declarations:[N],imports:[s.CommonModule,a.CoreModule],entryComponents:[N],providers:[R,w,O,P,D,E]}]}],t}();t.ADDAPPTABLE_CONFIGURATION_NOTIFIER_DATA=x,t.ADDAPPTABLE_NOTIFIER_DATA=I,t.NOTIFIER=h,t.NOTIFIER_CONTAINER="addapptable-notifier-container",t.Notifier=_,t.NotifierComponent=N,t.NotifierConfiguration=y,t.NotifierContainerService=j,t.NotifierModule=A,t.NotifierPortalService=w,t.NotifierPositionType=g,t.NotifierRef=v,t.NotifierService=R,t.NotifierType=b,t.notifierAnimation=d,t.notifierTriggerAnimation=m,t.slideInDown=l,t.slideInUp=u,t.zoomOut=f,t.ɵa=O,t.ɵb=S,t.ɵc=P,t.ɵd=D,t.ɵe=E,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=addapptables-notifier.umd.min.js.map