UNPKG

ng-alertbar

Version:

A configurable alertbar for Angular

2 lines 6.49 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/platform-browser"),require("rxjs/operators"),require("@angular/animations"),require("rxjs"),require("@angular/common"),require("@angular/core"),require("@angular/platform-browser/animations")):"function"==typeof define&&define.amd?define("ng-alertbar",["exports","@angular/platform-browser","rxjs/operators","@angular/animations","rxjs","@angular/common","@angular/core","@angular/platform-browser/animations"],t):t(e["ng-alertbar"]={},e.ng.platformBrowser,e.rxjs.operators,e.ng.animations,e.rxjs,e.ng.common,e.ng.core,e.ng.platformBrowser.animations)}(this,function(e,t,n,r,i,o,s,l){"use strict";var a=r.trigger("slide",[r.transition(":enter",[r.style({transform:"translateY(-100%)"}),r.animate("300ms ease-out")]),r.transition(":leave",[r.animate("200ms ease-in",r.style({transform:"translateY(-100%"}))])]),u=!0,p=5e3,c=100,h="linear-gradient(to top right, #9ce29c, #c9f9b9)",m="#34a40e",g="black",f="partial",d=!0,b=!1,y=(w.prototype.triggerAlert=function(e,t){this._trigger.next({message:e,options:t})},w.prototype.cancelAlerts=function(){this._cancel.next()},w);function w(){this._trigger=new i.Subject,this.trigger$=this._trigger.asObservable(),this._cancel=new i.Subject,this.cancel$=this._cancel.asObservable()}var C=(Object.defineProperty(v.prototype,"isFullWidth",{get:function(){return this.tempWidthMode?"full"===this.tempWidthMode:"full"===this.widthMode},enumerable:!0,configurable:!0}),Object.defineProperty(v.prototype,"showCloseButton",{get:function(){return null!=this.tempCloseButton?this.tempCloseButton:this.closeButton},enumerable:!0,configurable:!0}),Object.defineProperty(v.prototype,"useHtml",{get:function(){return null!=this.tempHtml?this.tempHtml:this.html},enumerable:!0,configurable:!0}),Object.defineProperty(v.prototype,"htmlMessage",{get:function(){return this.domSanitizer.bypassSecurityTrustHtml(this.message)},enumerable:!0,configurable:!0}),Object.defineProperty(v.prototype,"openTriggerPostDelay$",{get:function(){var o=this;return this.alertBarService.trigger$.pipe(n.switchMap(function(e){var t=e.options,r=t&&t.showDelay||o.showDelay;return i.timer(r).pipe(n.mapTo(e))}),n.takeUntil(this.destroy))},enumerable:!0,configurable:!0}),Object.defineProperty(v.prototype,"postAlertLifetime$",{get:function(){var o=this;return this.open.pipe(n.filter(function(e){var t=e.options;return o.shouldAlertAutoClose(t)}),n.switchMap(function(e){var t=e.options,r=t&&t.lifeTime||o.lifeTime;return i.timer(r)}),n.takeUntil(this.destroy))},enumerable:!0,configurable:!0}),Object.defineProperty(v.prototype,"cancelTrigger$",{get:function(){return this.alertBarService.cancel$.pipe(n.takeUntil(this.destroy))},enumerable:!0,configurable:!0}),Object.defineProperty(v.prototype,"alertLeaveTimer",{get:function(){return i.timer(200).pipe(n.take(1))},enumerable:!0,configurable:!0}),v.prototype.ngOnInit=function(){var t=this;this.openTriggerPostDelay$.subscribe(function(e){return t.onTrigger(e)}),this.queuePop.subscribe(function(e){return t.showAlert(e)}),this.postAlertLifetime$.subscribe(function(){return t.onClose()}),this.cancelTrigger$.subscribe(function(){return t.onClose()})},v.prototype.ngOnDestroy=function(){this.destroy.next()},v.prototype.onTrigger=function(e){!this.queueing||e.options&&e.options.bypassQueue||!this.show?this.showAlert(e):this.queue.push(e)},v.prototype.showAlert=function(e){this.clearTempOptions(),this.assignTempOptions(e.options),this.message=e.message,this.show=!0,this.open.emit(e)},v.prototype.onClose=function(){var e=this;this.closeAlert(),0<this.queue.length&&this.alertLeaveTimer.subscribe(function(){e.queuePop.next(e.queue.shift())})},v.prototype.closeAlert=function(){this.show=!1,this.close.emit()},v.prototype.clearTempOptions=function(){this.tempBackgroundColor=null,this.tempBorderColor=null,this.tempTextColor=null,this.tempWidthMode=null,this.tempCloseButton=null,this.tempHtml=null},v.prototype.assignTempOptions=function(e){e&&(this.tempBackgroundColor=e.backgroundColor,this.tempBorderColor=e.borderColor,this.tempTextColor=e.textColor,this.tempWidthMode=e.widthMode,this.tempCloseButton=e.closeButton,this.tempHtml=e.html)},v.prototype.shouldAlertAutoClose=function(e){return e&&null!=e.lifeTime?0<e.lifeTime:0<this.lifeTime},v.decorators=[{type:s.Component,args:[{selector:"ng-alertbar",template:'\n <div *ngIf="show" [@slide] class="ng-alert-bar-wrapper">\n <div\n class="ng-alert-bar"\n [class.full-width]="isFullWidth"\n [style.background]="tempBackgroundColor || backgroundColor"\n [style.border-color]="tempBorderColor || borderColor"\n >\n <span class="ng-alert-bar-text" [style.color]="tempTextColor || textColor">\n <span *ngIf="!useHtml; else htmlMessageContainer">{{ message }}</span>\n <ng-template #htmlMessageContainer><span [innerHTML]="htmlMessage"></span></ng-template>\n <span *ngIf="showCloseButton" class="ng-alert-close" (click)="onClose()">&times;</span>\n </span>\n </div>\n </div>\n ',animations:[a],styles:[".ng-alert-bar-wrapper{position:absolute;top:0;left:0;width:100%;text-align:center;pointer-events:none}.ng-alert-bar{pointer-events:all}.ng-alert-bar:not(.full-width){display:inline-block}.ng-alert-close{font-size:1.1em;margin-left:.25rem;vertical-align:middle;cursor:pointer}"]}]}],v.ctorParameters=function(){return[{type:y},{type:t.DomSanitizer}]},v.propDecorators={queueing:[{type:s.Input}],lifeTime:[{type:s.Input}],showDelay:[{type:s.Input}],backgroundColor:[{type:s.Input}],borderColor:[{type:s.Input}],textColor:[{type:s.Input}],widthMode:[{type:s.Input}],closeButton:[{type:s.Input}],html:[{type:s.Input}],open:[{type:s.Output}],close:[{type:s.Output}]},v);function v(e,t){this.alertBarService=e,this.domSanitizer=t,this.queue=[],this.queuePop=new i.Subject,this.queueing=u,this.lifeTime=p,this.showDelay=c,this.backgroundColor=h,this.borderColor=m,this.textColor=g,this.widthMode=f,this.closeButton=d,this.html=b,this.open=new s.EventEmitter,this.close=new s.EventEmitter,this.show=!1,this.destroy=new i.Subject}var T=(x.forRoot=function(){return{ngModule:x,providers:[y]}},x.decorators=[{type:s.NgModule,args:[{declarations:[C],imports:[o.CommonModule,l.BrowserAnimationsModule],exports:[C]}]}],x);function x(){}e.NgAlertbarComponent=C,e.NgAlertbarModule=T,e.NgAlertbarService=y,e.ɵa=a,Object.defineProperty(e,"__esModule",{value:!0})}); //# sourceMappingURL=ng-alertbar.umd.min.js.map