alert-notification
Version:
A lightweight easy to use module to display alert notifications inside you Angular web applications.
2 lines • 4.84 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("rxjs"),require("@angular/platform-browser"),require("@angular/common")):"function"==typeof define&&define.amd?define("alert-notification",["exports","@angular/core","rxjs","@angular/platform-browser","@angular/common"],e):e((t=t||self)["alert-notification"]={},t.ng.core,t.rxjs,t.ng.platformBrowser,t.ng.common)}(this,function(t,e,o,r,i){"use strict";var n=function(){function t(){this.position="bottom-right",this.interval=5e3,this.autodismiss=!0,this.alerts=[],this.positionUpdated=new o.Subject,this.alertUpdated=new o.Subject}return t.prototype.getPosition=function(){return this.position},t.prototype.setPosition=function(t){this.position=t,console.log("set"+this.position),this.positionUpdated.next(this.position)},t.prototype.getPositionUpdateListner=function(){return this.positionUpdated.asObservable()},t.prototype.getAlerts=function(){return this.alerts},t.prototype.push=function(t,e,o,r){var i=this;this.alerts.push({id:t,title:o,message:r,type:e.toLowerCase()}),this.alertUpdated.next(this.alerts),this.autodismiss&&setTimeout(function(){i.removeAlert(t)},this.interval)},t.prototype.removeAlert=function(t){var e=[];this.alerts.forEach(function(o){o.id!==t&&e.push(o)}),this.alerts=e,this.alertUpdated.next(this.alerts)},t.prototype.getAlertUpdateListner=function(){return this.alertUpdated.asObservable()},t.prototype.setInterval=function(t){this.interval=t},t.prototype.setAutoDismiss=function(t){this.autodismiss=t},t.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}],t.ngInjectableDef=e.defineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t}(),a=function(){function t(t){this.alertService=t,this.alerts=[]}return t.prototype.ngOnInit=function(){var t=this;this.position=this.alertService.getPosition(),this.alerts=this.alertService.getAlerts(),this.positionSub=this.alertService.getPositionUpdateListner().subscribe(function(e){t.position=e}),this.alertsSub=this.alertService.getAlertUpdateListner().subscribe(function(e){t.alerts=e})},t.prototype.close=function(t){this.alertService.removeAlert(t)},t.prototype.ngOnDestroy=function(){this.positionSub.unsubscribe()},t.decorators=[{type:e.Component,args:[{selector:"alert-notification",template:'<ul class="alert" [ngClass]="position">\r\n <li class="shadow" [ngClass]="[alert.type, position+\'-animate\']" *ngFor="let alert of alerts; index as i">\r\n <div class="flex-container">\r\n <div class="content">\r\n <p class="title">{{ alert?.title }}</p>\r\n <p class="message">{{ alert?.message }}</p>\r\n </div>\r\n <div class="">\r\n <p class="close" (click)="close(alert.id)">✖</p>\r\n </div>\r\n </div>\r\n </li>\r\n</ul>\r\n',styles:[".top-left{top:0;left:0;padding-left:0;margin-left:1rem}.bottom-left{bottom:0;left:0;padding-left:0;margin-left:1rem}.top-right{top:0;right:0;margin-right:1rem}.bottom-right{bottom:0;right:0;margin-right:1rem}.alert{position:absolute;list-style:none;font-family:Verdana,Tahoma,sans-serif;overflow:hidden;z-index:10000000000!important;padding:.4rem 0}.alert .info{background:#33b5e5;color:#fff;border-color:#09c}.alert .success{background:#07c152;color:#fff;border-color:#007e33}.alert .warning{background:#f44;color:#fff;border-color:#c00}.alert .simple{background:#3d3d3d;color:#fff;border-color:#000}.alert li{margin:.5rem 0;padding:.5rem 1rem;border-radius:2px;background:#057db7;color:#fff}.alert .title{margin:0;font-size:14px}.alert .message{margin:0;font-size:11px}.alert .close{margin:1rem .1rem 1rem 2rem;cursor:pointer;color:#fff;font-size:14px}.alert .close:hover{color:rgba(255,255,255,.57)}.alert .content{flex:1;min-width:180px}.shadow{box-shadow:0 0 4px 1px #a9a4a4!important}.flex-container{display:flex;align-items:center;flex-direction:row}.bottom-right-animate,.top-right-animate{position:relative;-webkit-animation:.4s animateright;animation:.4s animateright}.bottom-left-animate,.top-left-animate{position:relative;-webkit-animation:.4s animateright;animation:.4s animateleft}@-webkit-keyframes animateright{from{right:-300px;opacity:0}to{right:0;opacity:1}}@keyframes animateright{from{right:-300px;opacity:0}to{right:0;opacity:1}}@-webkit-keyframes animateleft{from{left:-300px;opacity:0}to{left:0;opacity:1}}@keyframes animateleft{from{left:-300px;opacity:0}to{left:0;opacity:1}}"]}]}],t.ctorParameters=function(){return[{type:n}]},t}(),s=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[a],imports:[r.BrowserModule,i.CommonModule],exports:[a]}]}],t}(),l=function(){return function(){}}();t.Alert=l,t.AlertModule=s,t.AlertNotificationComponent=a,t.AlertService=n,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=alert-notification.umd.min.js.map