UNPKG

angular9-notifications-gpu

Version:

> A light and easy to use notifications library for Angular 2. ~~It features both regular page notifications (toasts) and push notifications.~~

2 lines 20.7 kB
!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("@angular/animations"),require("@angular/platform-browser"),require("rxjs"),require("@angular/common"),require("@angular/core")):"function"==typeof define&&define.amd?define("angular9-notifications-gpu",["exports","@angular/animations","@angular/platform-browser","rxjs","@angular/common","@angular/core"],i):i(t["angular9-notifications-gpu"]={},t.ng.animations,t.ng.platformBrowser,t.rxjs,t.ng.common,t.ng.core)}(this,function(s,t,i,e,n,o){"use strict";var r,a={alert:'\n <svg class="simple-notification-svg" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="24" viewBox="0 0 24 24" width="24">\n <path d="M0 0h24v24H0z" fill="none"/>\n <path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>\n </svg>\n ',error:'\n <svg class="simple-notification-svg" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="24" viewBox="0 0 24 24" width="24">\n <path d="M0 0h24v24H0V0z" fill="none"/>\n <path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>\n </svg>\n ',info:'\n <svg class="simple-notification-svg" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="24" viewBox="0 0 24 24" width="24">\n <path d="M0 0h24v24H0z" fill="none"/>\n <path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"/>\n </svg>\n ',success:'\n <svg class="simple-notification-svg" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="24" viewBox="0 0 24 24" width="24">\n <path d="M0 0h24v24H0z" fill="none"/>\n <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>\n </svg>\n ',warn:'\n <svg class="simple-notification-svg" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="64" viewBox="0 0 64 64" height="64">\n <circle cx="32.086" cy="50.142" r="2.256"/>\n <path d="M30.08 25.012V42.32c0 1.107.897 2.005 2.006 2.005s2.006-.897 2.006-2.005V25.012c0-1.107-.897-2.006-2.006-2.006s-2.006.898-2.006 2.006z"/>\n <path d="M63.766 59.234L33.856 3.082c-.697-1.308-2.844-1.308-3.54 0L.407 59.234c-.331.622-.312 1.372.051 1.975.362.605 1.015.975 1.72.975h59.816c.705 0 1.357-.369 1.721-.975.361-.603.381-1.353.051-1.975zM5.519 58.172L32.086 8.291l26.568 49.881H5.519z"/>\n </svg>\n '};(r=s.NotificationType||(s.NotificationType={})).Success="success",r.Error="error",r.Alert="alert",r.Info="info",r.Warn="warn",r.Bare="bare";var c=(l.prototype.set=function(t,i){return t.id=t.override&&t.override.id?t.override.id:Math.random().toString(36).substring(3),t.click=new o.EventEmitter,t.clickIcon=new o.EventEmitter,t.timeoutEnd=new o.EventEmitter,this.emitter.next({command:"set",notification:t,add:i}),t},l.prototype.success=function(t,i,e,n){return void 0===t&&(t=""),void 0===i&&(i=""),this.set({title:t,content:i||"",type:s.NotificationType.Success,icon:this.icons.success,override:e,context:n},!0)},l.prototype.error=function(t,i,e,n){return void 0===t&&(t=""),void 0===i&&(i=""),this.set({title:t,content:i||"",type:s.NotificationType.Error,icon:this.icons.error,override:e,context:n},!0)},l.prototype.alert=function(t,i,e,n){return void 0===t&&(t=""),void 0===i&&(i=""),this.set({title:t,content:i||"",type:s.NotificationType.Alert,icon:this.icons.alert,override:e,context:n},!0)},l.prototype.info=function(t,i,e,n){return void 0===t&&(t=""),void 0===i&&(i=""),this.set({title:t,content:i||"",type:s.NotificationType.Info,icon:this.icons.info,override:e,context:n},!0)},l.prototype.warn=function(t,i,e,n){return void 0===t&&(t=""),void 0===i&&(i=""),this.set({title:t,content:i||"",type:s.NotificationType.Warn,icon:this.icons.warn,override:e,context:n},!0)},l.prototype.bare=function(t,i,e,n){return void 0===t&&(t=""),void 0===i&&(i=""),this.set({title:t,content:i||"",type:s.NotificationType.Bare,icon:"bare",override:e,context:n},!0)},l.prototype.create=function(t,i,e,n,o){return void 0===t&&(t=""),void 0===i&&(i=""),void 0===e&&(e=s.NotificationType.Success),this.set({title:t,content:i,type:e,icon:this.icons[e],override:n,context:o},!0)},l.prototype.html=function(t,i,e,n,o){return void 0===i&&(i=s.NotificationType.Success),void 0===n&&(n="bare"),this.set({html:t,type:i,icon:this.icons[n],override:e,context:o},!0)},l.prototype.remove=function(t){t?this.emitter.next({command:"clean",id:t}):this.emitter.next({command:"cleanAll"})},l.decorators=[{type:o.Injectable}],l.ctorParameters=function(){return[{type:undefined,decorators:[{type:o.Inject,args:["options"]}]}]},l);function l(t){this.globalOptions=t,this.emitter=new e.Subject,this.icons=a}var p,m=(f.prototype.ngOnInit=function(){this.item.override&&this.attachOverrides(),this.animate&&(this.item.state=this.animate),0!==this.timeOut&&this.startTimeOut(),this.contentType(this.item.title,"title"),this.contentType(this.item.content,"content"),this.contentType(this.item.html,"html"),this.safeSvg=this.domSanitizer.bypassSecurityTrustHtml(this.icon||this.item.icon),this.safeInputHtml=this.domSanitizer.bypassSecurityTrustHtml(this.item.html)},f.prototype.ngOnDestroy=function(){clearTimeout(this.timer),this.cdr.detach()},f.prototype.startTimeOut=function(){var t=this;this.sleepTime=1e3/this.framesPerSecond,this.startTime=(new Date).getTime(),this.endTime=this.startTime+this.timeOut,this.zone.runOutsideAngular(function(){return t.timer=setTimeout(t.instance,t.sleepTime)})},f.prototype.onEnter=function(){this.pauseOnHover&&(this.stopTime=!0)},f.prototype.onLeave=function(){var t=this;this.pauseOnHover&&(this.stopTime=!1,this.zone.runOutsideAngular(function(){return setTimeout(t.instance,t.sleepTime)}))},f.prototype.onClick=function(t){this.item.click.emit(t),this.clickToClose&&this.remove()},f.prototype.onClickIcon=function(t){this.item.clickIcon.emit(t),this.clickIconToClose&&this.remove()},f.prototype.attachOverrides=function(){var i=this;Object.keys(this.item.override).forEach(function(t){i.hasOwnProperty(t)&&(i[t]=i.item.override[t])})},f.prototype.remove=function(){var t=this;this.animate?(this.item.state=this.animate+"Out",setTimeout(function(){t.notificationService.set(t.item,!1)},310)):this.notificationService.set(this.item,!1)},f.prototype.contentType=function(t,i){t instanceof o.TemplateRef?this[i]=t:this[i]=this.domSanitizer.bypassSecurityTrustHtml(t),this[i+"IsTemplate"]=t instanceof o.TemplateRef},f.decorators=[{type:o.Component,args:[{selector:"simple-notification",encapsulation:o.ViewEncapsulation.None,animations:[t.trigger("enterLeave",[t.state("fade",t.style({opacity:1})),t.transition("* => fade",[t.style({opacity:0}),t.animate("400ms ease-in-out")]),t.state("fadeOut",t.style({opacity:0})),t.transition("fade => fadeOut",[t.style({opacity:1}),t.animate("300ms ease-in-out")]),t.state("fromTop",t.style({opacity:1,transform:"translateY(0)"})),t.transition("* => fromTop",[t.style({opacity:0,transform:"translateY(-5%)"}),t.animate("400ms ease-in-out")]),t.state("fromTopOut",t.style({opacity:0,transform:"translateY(5%)"})),t.transition("fromTop => fromTopOut",[t.style({opacity:1,transform:"translateY(0)"}),t.animate("300ms ease-in-out")]),t.state("fromRight",t.style({opacity:1,transform:"translateX(0)"})),t.transition("* => fromRight",[t.style({opacity:0,transform:"translateX(5%)"}),t.animate("400ms ease-in-out")]),t.state("fromRightOut",t.style({opacity:0,transform:"translateX(-5%)"})),t.transition("fromRight => fromRightOut",[t.style({opacity:1,transform:"translateX(0)"}),t.animate("300ms ease-in-out")]),t.state("fromBottom",t.style({opacity:1,transform:"translateY(0)"})),t.transition("* => fromBottom",[t.style({opacity:0,transform:"translateY(5%)"}),t.animate("400ms ease-in-out")]),t.state("fromBottomOut",t.style({opacity:0,transform:"translateY(-5%)"})),t.transition("fromBottom => fromBottomOut",[t.style({opacity:1,transform:"translateY(0)"}),t.animate("300ms ease-in-out")]),t.state("fromLeft",t.style({opacity:1,transform:"translateX(0)"})),t.transition("* => fromLeft",[t.style({opacity:0,transform:"translateX(-5%)"}),t.animate("400ms ease-in-out")]),t.state("fromLeftOut",t.style({opacity:0,transform:"translateX(5%)"})),t.transition("fromLeft => fromLeftOut",[t.style({opacity:1,transform:"translateX(0)"}),t.animate("300ms ease-in-out")]),t.state("scale",t.style({opacity:1,transform:"scale(1)"})),t.transition("* => scale",[t.style({opacity:0,transform:"scale(0)"}),t.animate("400ms ease-in-out")]),t.state("scaleOut",t.style({opacity:0,transform:"scale(0)"})),t.transition("scale => scaleOut",[t.style({opacity:1,transform:"scale(1)"}),t.animate("400ms ease-in-out")]),t.state("rotate",t.style({opacity:1,transform:"rotate(0deg)"})),t.transition("* => rotate",[t.style({opacity:0,transform:"rotate(5deg)"}),t.animate("400ms ease-in-out")]),t.state("rotateOut",t.style({opacity:0,transform:"rotate(-5deg)"})),t.transition("rotate => rotateOut",[t.style({opacity:1,transform:"rotate(0deg)"}),t.animate("400ms ease-in-out")])])],template:'<div class="simple-notification"\r\n [@enterLeave]="item.state"\r\n (click)="onClick($event)"\r\n [class]="theClass"\r\n [ngClass]="{\r\n \'alert\': item.type === \'alert\',\r\n \'error\': item.type === \'error\',\r\n \'warn\': item.type === \'warn\',\r\n \'success\': item.type === \'success\',\r\n \'info\': item.type === \'info\',\r\n \'bare\': item.type === \'bare\',\r\n \'rtl-mode\': rtl,\r\n \'has-icon\': item.icon !== \'bare\'\r\n }"\r\n (mouseenter)="onEnter()"\r\n (mouseleave)="onLeave()">\r\n\r\n <div *ngIf="!item.html">\r\n\r\n <div class="sn-title" *ngIf="titleIsTemplate; else regularTitle">\r\n <ng-container *ngTemplateOutlet="title; context: item.context"></ng-container>\r\n </div>\r\n\r\n <ng-template #regularTitle>\r\n <div class="sn-title" [innerHTML]="title"></div>\r\n </ng-template>\r\n\r\n <div class="sn-content" *ngIf="contentIsTemplate else regularContent">\r\n <ng-container *ngTemplateOutlet="content; context: item.context"></ng-container>\r\n </div>\r\n\r\n <ng-template #regularContent>\r\n <div class="sn-content" [innerHTML]="content"></div>\r\n </ng-template>\r\n\r\n <div class="icon" *ngIf="item.icon !== \'bare\'" [innerHTML]="safeSvg"></div>\r\n </div>\r\n <div *ngIf="item.html">\r\n <div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">\r\n <ng-container *ngTemplateOutlet="item.html; context: item.context"></ng-container>\r\n </div>\r\n\r\n <ng-template #regularHtml>\r\n <div class="sn-content" [innerHTML]="safeInputHtml"></div>\r\n </ng-template>\r\n\r\n <div class="icon" [class.icon-hover]="clickIconToClose" *ngIf="item.icon" [innerHTML]="safeSvg" (click)="onClickIcon($event)"></div>\r\n </div>\r\n\r\n <div class="sn-progress-loader" *ngIf="showProgressBar">\r\n <span [ngStyle]="{\'width\': progressWidth + \'%\'}"></span>\r\n </div>\r\n\r\n</div>\r\n',changeDetection:o.ChangeDetectionStrategy.OnPush,styles:[".simple-notification{width:100%;padding:10px 20px;box-sizing:border-box;position:relative;float:left;margin-bottom:10px;color:#fff;cursor:pointer;transition:.5s;min-height:70px}.simple-notification .sn-content,.simple-notification .sn-html,.simple-notification .sn-title{margin:0}.simple-notification .sn-title{line-height:30px;font-size:20px}.simple-notification .sn-content{font-size:16px;line-height:20px}.simple-notification.has-icon .sn-content,.simple-notification.has-icon .sn-html,.simple-notification.has-icon .sn-title{padding:0 50px 0 0}.simple-notification .icon{position:absolute;box-sizing:border-box;top:0;right:0;width:70px;height:70px;padding:10px}.simple-notification .icon.icon-hover:hover{opacity:.5}.simple-notification .icon svg{fill:#fff;width:100%;height:100%}.simple-notification .icon svg g{fill:#fff}.simple-notification.rtl-mode.has-icon .sn-content,.simple-notification.rtl-mode.has-icon .sn-html,.simple-notification.rtl-mode.has-icon .sn-title{padding:0 0 0 50px}.simple-notification.rtl-mode{direction:rtl}.simple-notification.rtl-mode .sn-content{padding:0 0 0 50px}.simple-notification.rtl-mode svg{left:0;right:auto}.simple-notification.error{background:#f44336}.simple-notification.success{background:#8bc34a}.simple-notification.alert{background:#ffdb5b}.simple-notification.info{background:#03a9f4}.simple-notification.warn{background:#ffdb5b}.simple-notification .sn-progress-loader{position:absolute;top:0;left:0;width:100%;height:5px}.simple-notification .sn-progress-loader span{float:left;height:100%}.simple-notification.success .sn-progress-loader span{background:#689f38}.simple-notification.error .sn-progress-loader span{background:#d32f2f}.simple-notification.alert .sn-progress-loader span{background:#edc242}.simple-notification.info .sn-progress-loader span{background:#0288d1}.simple-notification.warn .sn-progress-loader span{background:#edc242}.simple-notification.bare .sn-progress-loader span{background:#ccc}.simple-notification.warn div .sn-content,.simple-notification.warn div .sn-html,.simple-notification.warn div .sn-title{color:#444}"]}]}],f.ctorParameters=function(){return[{type:c},{type:i.DomSanitizer},{type:o.ChangeDetectorRef},{type:o.NgZone}]},f.propDecorators={timeOut:[{type:o.Input}],showProgressBar:[{type:o.Input}],pauseOnHover:[{type:o.Input}],clickToClose:[{type:o.Input}],clickIconToClose:[{type:o.Input}],maxLength:[{type:o.Input}],theClass:[{type:o.Input}],rtl:[{type:o.Input}],animate:[{type:o.Input}],position:[{type:o.Input}],item:[{type:o.Input}]},f);function f(t,i,e,n){var o=this;this.notificationService=t,this.domSanitizer=i,this.cdr=e,this.zone=n,this.titleIsTemplate=!1,this.contentIsTemplate=!1,this.htmlIsTemplate=!1,this.progressWidth=0,this.stopTime=!1,this.framesPerSecond=40,this.instance=function(){var t=(new Date).getTime();o.endTime<t?(o.remove(),o.item.timeoutEnd.emit()):o.stopTime||(o.showProgressBar&&(o.progressWidth=Math.min(100*(t-o.startTime+o.sleepTime)/o.timeOut,100)),o.timer=setTimeout(o.instance,o.sleepTime)),o.zone.run(function(){o.cdr.destroyed||o.cdr.detectChanges()})}}(p=s.NotificationAnimationType||(s.NotificationAnimationType={})).Fade="fade",p.FromTop="fromTop",p.FromRight="fromRight",p.FromBottom="fromBottom",p.FromLeft="fromLeft",p.Scale="scale",p.Rotate="rotate";var h=(Object.defineProperty(u.prototype,"options",{set:function(t){this._usingComponentOptions=!0,this.attachChanges(t)},enumerable:!0,configurable:!0}),u.prototype.ngOnInit=function(){var i=this;this._usingComponentOptions||this.attachChanges(this.service.globalOptions),this.listener=this.service.emitter.subscribe(function(t){switch(t.command){case"cleanAll":i.notifications=[];break;case"clean":i.cleanSingle(t.id);break;case"set":t.add?i.add(t.notification):i.defaultBehavior(t);break;default:i.defaultBehavior(t)}i.cdr.destroyed||i.cdr.detectChanges()})},u.prototype.ngOnDestroy=function(){this.listener&&this.listener.unsubscribe(),this.cdr.detach()},u.prototype.defaultBehavior=function(t){this.notifications.splice(this.notifications.indexOf(t.notification),1),this.onDestroy.emit(this.buildEmit(t.notification,!1))},u.prototype.add=function(t){t.createdOn=new Date;var i=!(!this.preventLastDuplicates&&!this.preventDuplicates)&&this.block(t);(this.lastNotificationCreated=t).override&&t.override.icons&&t.override.icons[t.type]&&(t.icon=t.override.icons[t.type]),i||(this.lastOnBottom?(this.notifications.length>=this.maxStack&&this.notifications.splice(0,1),this.notifications.push(t)):(this.notifications.length>=this.maxStack&&this.notifications.splice(this.notifications.length-1,1),this.notifications.splice(0,0,t)),this.onCreate.emit(this.buildEmit(t,!0)))},u.prototype.block=function(t){var i=t.html?this.checkHtml:this.checkStandard;if(this.preventDuplicates&&0<this.notifications.length)for(var e=0;e<this.notifications.length;e++)if(i(this.notifications[e],t))return!0;if(this.preventLastDuplicates){var n=void 0;if("visible"===this.preventLastDuplicates&&0<this.notifications.length)n=this.lastOnBottom?this.notifications[this.notifications.length-1]:this.notifications[0];else{if("all"!==this.preventLastDuplicates||!this.lastNotificationCreated)return!1;n=this.lastNotificationCreated}return i(n,t)}return!1},u.prototype.checkStandard=function(t,i){return t.type===i.type&&t.title===i.title&&t.content===i.content},u.prototype.checkHtml=function(t,i){return!!t.html&&t.type===i.type&&t.title===i.title&&t.content===i.content&&t.html===i.html},u.prototype.attachChanges=function(t){for(var i in t)this.hasOwnProperty(i)?this[i]=t[i]:"icons"===i&&(this.service.icons=t[i])},u.prototype.buildEmit=function(t,i){var e={createdOn:t.createdOn,type:t.type,icon:t.icon,id:t.id};return t.html?e.html=t.html:(e.title=t.title,e.content=t.content),i||(e.destroyedOn=new Date),e},u.prototype.cleanSingle=function(e){var n,o=0,s=!1;this.notifications.forEach(function(t,i){t.id===e&&(o=i,n=t,s=!0)}),s&&(this.notifications.splice(o,1),this.onDestroy.emit(this.buildEmit(n,!1)))},u.decorators=[{type:o.Component,args:[{selector:"simple-notifications",encapsulation:o.ViewEncapsulation.None,template:'<div class="simple-notification-wrapper" [ngClass]="position">\r\n <simple-notification\r\n *ngFor="let a of notifications; let i = index"\r\n [item]="a"\r\n [timeOut]="timeOut"\r\n [clickToClose]="clickToClose"\r\n [clickIconToClose]="clickIconToClose"\r\n [maxLength]="maxLength"\r\n [showProgressBar]="showProgressBar"\r\n [pauseOnHover]="pauseOnHover"\r\n [theClass]="theClass"\r\n [rtl]="rtl"\r\n [animate]="animate"\r\n [position]="i">\r\n </simple-notification>\r\n</div>',changeDetection:o.ChangeDetectionStrategy.OnPush,styles:[".simple-notification-wrapper{position:fixed;width:300px;z-index:1000}.simple-notification-wrapper.left{left:20px}.simple-notification-wrapper.top{top:20px}.simple-notification-wrapper.right{right:20px}.simple-notification-wrapper.bottom{bottom:20px}.simple-notification-wrapper.center{left:50%;transform:translateX(-50%)}.simple-notification-wrapper.middle{top:50%;transform:translateY(-50%)}.simple-notification-wrapper.middle.center{transform:translate(-50%,-50%)}@media (max-width:340px){.simple-notification-wrapper{width:auto;left:20px;right:20px}}"]}]}],u.ctorParameters=function(){return[{type:c},{type:o.ChangeDetectorRef}]},u.propDecorators={options:[{type:o.Input}],onCreate:[{type:o.Output}],onDestroy:[{type:o.Output}]},u);function u(t,i){this.service=t,this.cdr=i,this.onCreate=new o.EventEmitter,this.onDestroy=new o.EventEmitter,this.notifications=[],this.position=["bottom","right"],this.lastOnBottom=!0,this.maxStack=8,this.preventLastDuplicates=!1,this.preventDuplicates=!1,this.timeOut=0,this.maxLength=0,this.clickToClose=!0,this.clickIconToClose=!1,this.showProgressBar=!0,this.pauseOnHover=!0,this.theClass="",this.rtl=!1,this.animate=s.NotificationAnimationType.FromRight,this._usingComponentOptions=!1}var d=function(){return(d=Object.assign||function(t){for(var i,e=1,n=arguments.length;e<n;e++)for(var o in i=arguments[e])Object.prototype.hasOwnProperty.call(i,o)&&(t[o]=i[o]);return t}).apply(this,arguments)},g={position:["bottom","right"],timeOut:0,showProgressBar:!0,pauseOnHover:!0,lastOnBottom:!0,clickToClose:!0,clickIconToClose:!1,maxLength:0,maxStack:8,preventDuplicates:!1,preventLastDuplicates:!1,theClass:"",rtl:!1,animate:s.NotificationAnimationType.FromRight,icons:a},y=new o.InjectionToken("options");function v(t){return d(d({},g),t)}var w=(T.forRoot=function(t){return void 0===t&&(t={}),{ngModule:T,providers:[c,{provide:y,useValue:t},{provide:"options",useFactory:v,deps:[y]}]}},T.decorators=[{type:o.NgModule,args:[{imports:[n.CommonModule],declarations:[h,m],exports:[h]}]}],T);function T(){}s.NotificationComponent=m,s.SimpleNotificationsComponent=h,s.NotificationsService=c,s.OPTIONS=y,s.optionsFactory=v,s.SimpleNotificationsModule=w,Object.defineProperty(s,"__esModule",{value:!0})}); //# sourceMappingURL=angular9-notifications-gpu.umd.min.js.map