angular2-advanced-notifications/bundles/angular2-advanced-notifications.umd.min.js

UI and native notifications library for Angular

(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?factory(exports,require("@angular/core"),require("@angular/common"),require("rxjs/Subject"),require("lodash"),require("rxjs/Rx")):typeof define==="function"&&define.amd?define(["exports","@angular/core","@angular/common","rxjs/Subject","lodash","rxjs/Rx"],factory):factory((global.ng=global.ng||{},global.ng["angular2-advanced-notifications"]=global.ng["angular2-advanced-notifications"]||{}),global.ng.core,global.ng.common,global.rxjs_Subject,global._,global.rxjs_Rx)})(this,function(exports,_angular_core,_angular_common,rxjs_Subject,_,rxjs_Rx){"use strict";var BrowserViewports=function(){function BrowserViewports(){}BrowserViewports.getBrowserViewports=function(){return{innerHeight:window.innerHeight,innerWidth:window.innerWidth}};BrowserViewports.onBrowserViewportsUpdate=function(){var _this=this;return rxjs_Rx.Observable.fromEvent(window,"resize").debounceTime(500).map(function(){return _this.getBrowserViewports()})};return BrowserViewports}();var AnAlertTypes={};AnAlertTypes.INFO=0;AnAlertTypes.WARNING=1;AnAlertTypes.SUCCESS=2;AnAlertTypes.ERROR=3;AnAlertTypes.BLANK=4;AnAlertTypes[AnAlertTypes.INFO]="INFO";AnAlertTypes[AnAlertTypes.WARNING]="WARNING";AnAlertTypes[AnAlertTypes.SUCCESS]="SUCCESS";AnAlertTypes[AnAlertTypes.ERROR]="ERROR";AnAlertTypes[AnAlertTypes.BLANK]="BLANK";var anPositionToAnimationLink={topLeft:"fadeInLeft",topCenter:"fadeInDown",topRight:"fadeInRight",bottomLeft:"fadeInLeft",bottomCenter:"fadeInUp",bottomRight:"fadeInRight"};var __decorate$1=undefined&&undefined.__decorate||function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)if(d=decorators[i])r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r;return c>3&&r&&Object.defineProperty(target,key,r),r};exports.AnAlert=function(){function AnAlert(anBus){this.anBus=anBus;this.containerStates={left:false,center:false,right:false};this.containerDirections={reverseLeft:false,reverseCenter:false,reverseRight:false};this.items={left:[],center:[],right:[]};this.defaults={message:"No message was set",position:"topRight",pauseOnHover:false,showProgressBar:false,delay:0,timeout:0,type:AnAlertTypes.BLANK,showNotification:false};this.globalAlertConfig=anBus.getGlobalConfigForAlerts();this._updateBrowserViewports();this._subscribeToBus()}AnAlert.prototype.onClose=function(id){this._removeItem(id);this.anBus.$$onClose.next(id)};AnAlert.prototype._subscribeToBusShowHandler=function(config){this._updateItems(config)};AnAlert.prototype._subscribeToBusHideHandler=function(id){this.onClose(id)};AnAlert.prototype._subscribeToBusHideAllHandler=function(){this._hideAllAlerts()};AnAlert.prototype._subscribeToBusHideAlertsHandler=function(alertsIds){this._hideAlerts(alertsIds)};AnAlert.prototype._subscribeToBus=function(){var _this=this;this.showAlertSubscription=this.anBus.showAlert$.subscribe(function(config){_this._subscribeToBusShowHandler(config)});this.hideAlertSubscription=this.anBus.hideAlert$.subscribe(function(id){_this._subscribeToBusHideHandler(id)});this.hideAllAlertsSubscription=this.anBus.hideAllAlerts$.subscribe(function(){return _this._subscribeToBusHideAllHandler()});this.hideAlertsSubscription=this.anBus.hideAlerts$.subscribe(function(alertsIds){return _this._subscribeToBusHideAlertsHandler(alertsIds)})};AnAlert.prototype._updateItems=function(config){var newConfig=_.merge({},this.defaults,config,{$$updateListener:new rxjs_Subject.Subject},{$$animationState:this._getAnimationState(config.position)});console.warn(newConfig);this._addItem(newConfig);this._updateContainerState()};AnAlert.prototype._hideAlerts=function(alertsIds){if(!Array.isArray(alertsIds)){return}if(!alertsIds.length){return}this.items.left=_.reject(this.items.left,function(item){return!!~alertsIds.indexOf(item.id)});this.items.center=_.reject(this.items.center,function(item){return!!~alertsIds.indexOf(item.id)});this.items.right=_.reject(this.items.right,function(item){return!!~alertsIds.indexOf(item.id)})};AnAlert.prototype._hideAllAlerts=function(){var _this=this;_.forEach(this.items.left,function(item){_this.anBus.$$onClose.next(item.id)});_.forEach(this.items.center,function(item){_this.anBus.$$onClose.next(item.id)});_.forEach(this.items.right,function(item){_this.anBus.$$onClose.next(item.id)});this.items.left=[];this.items.center=[];this.items.right=[]};AnAlert.prototype._notifyUpdateListeners=function(){_.forEach(this.items.left,function(item){item.$$updateListener.next()});_.forEach(this.items.center,function(item){item.$$updateListener.next()});_.forEach(this.items.right,function(item){item.$$updateListener.next()})};AnAlert.prototype._updateBrowserViewports=function(){var _this=this;if(this.globalAlertConfig.removeLastIfViewportOverflow){this.browserViewports=BrowserViewports.getBrowserViewports();BrowserViewports.onBrowserViewportsUpdate().subscribe(function(newBrowserViewports){_this.browserViewports=newBrowserViewports})}};AnAlert.prototype._updateContainerState=function(){this.containerStates.left=!!~this.items.left.length;this.containerStates.center=!!~this.items.center.length;this.containerStates.right=!!~this.items.right.length;this._setContainerDirections()};AnAlert.prototype._getShortVerticalPositionIdentifier=function(item){if(!!~item.position.indexOf("Left")){return"left"}if(!!~item.position.indexOf("Center")){return"center"}if(!!~item.position.indexOf("Right")){return"right"}return undefined};AnAlert.prototype._addItem=function(item){var pos=this._getShortVerticalPositionIdentifier(item);this.items[pos].push(item)};AnAlert.prototype._removeItem=function(id){var item=this._findItemById(id);var pos=this._getShortVerticalPositionIdentifier(item);this.items[pos]=_.reject(this.items[pos],{id:item.id})};AnAlert.prototype._findItemById=function(id){var foundItem;foundItem=_.find(this.items.left,{id:id});if(foundItem){return foundItem}foundItem=_.find(this.items.center,{id:id});if(foundItem){return foundItem}foundItem=_.find(this.items.right,{id:id});if(foundItem){return foundItem}return undefined};AnAlert.prototype._setContainerDirections=function(){this.containerDirections.reverseLeft=!!~_.filter(this.items.left,function(item){return!!~item.position.indexOf("bottom")}).length;this.containerDirections.reverseCenter=!!~_.filter(this.items.center,function(item){return!!~item.position.indexOf("bottom")}).length;this.containerDirections.reverseLeft=!!~_.filter(this.items.right,function(item){return!!~item.position.indexOf("bottom")}).length};AnAlert.prototype._getAnimationState=function(position){if(!_.isString(position)){return undefined}return anPositionToAnimationLink[position]};return AnAlert}();exports.AnAlert=__decorate$1([_angular_core.Component({selector:"an-alert",template:'\n    <div class="anAlert__container anAlert__container--left"\n         *ngIf="containerStates.left"\n         [ngClass]="{\'anAlert__container--reverse\': containerDirections.reverseLeft }">\n      <an-alert-item *ngFor="let item of items.left"\n                     [@ASD]="item.$$animationState"\n                     [options]="item"\n                     (onClose)="onClose($event)"\n                     (onAlertItemUpdates)="onAlertItemUpdates($event)">\n      </an-alert-item>\n    </div>\n\n    <div class="anAlert__container anAlert__container--center"\n         *ngIf="containerStates.center"\n         [ngClass]="{\'anAlert__container--reverse\': containerDirections.reverseCenter }">\n      <an-alert-item *ngFor="let item of items.center"\n                     [@ASD]="item.$$animationState"\n                     [options]="item"\n                     (onClose)="onClose($event)"\n                     (onAlertItemUpdates)="onAlertItemUpdates($event)">\n      </an-alert-item>\n    </div>\n\n    <div class="anAlert__container anAlert__container--right"\n         *ngIf="containerStates.right"\n         [ngClass]="{\'anAlert__container--reverse\': containerDirections.reverseRight }">\n      <an-alert-item *ngFor="let item of items.right"\n                     [@ASD]="item.$$animationState"\n                     [options]="item"\n                     (onClose)="onClose($event)"\n                     (onAlertItemUpdates)="onAlertItemUpdates($event)">\n      </an-alert-item>\n    </div>\n  ',encapsulation:_angular_core.ViewEncapsulation.None,animations:[_angular_core.trigger("ASD",[_angular_core.state("fadeInUp",_angular_core.style({transform:"translateY(0)"})),_angular_core.state("fadeInRight",_angular_core.style({transform:"translateX(0)"})),_angular_core.state("fadeInDown",_angular_core.style({transform:"translateY(0)"})),_angular_core.state("fadeInLeft",_angular_core.style({transform:"translateX(0)"})),_angular_core.transition("void => fadeInUp",[_angular_core.style({transform:"translateY(100%)"}),_angular_core.animate("100ms cubic-bezier(0.0, 0.0, 0.2, 1)")]),_angular_core.transition("void => fadeInRight",[_angular_core.style({transform:"translateX(100%)"}),_angular_core.animate("100ms cubic-bezier(0.0, 0.0, 0.2, 1)")]),_angular_core.transition("void => fadeInDown",[_angular_core.style({transform:"translateY(-100%0)"}),_angular_core.animate("100ms cubic-bezier(0.0, 0.0, 0.2, 1)")]),_angular_core.transition("void => fadeInLeft",[_angular_core.style({transform:"translateX(-100%)"}),_angular_core.animate("100ms cubic-bezier(0.0, 0.0, 0.2, 1)")]),_angular_core.transition("fadeInUp => void",[_angular_core.animate("200ms cubic-bezier(0.4, 0.0, 1, 1)",_angular_core.style({transform:"translateY(-100%)"}))]),_angular_core.transition("fadeInRight => void",[_angular_core.animate("200ms cubic-bezier(0.4, 0.0, 1, 1)",_angular_core.style({transform:"translateX(100%)"}))]),_angular_core.transition("fadeInDown => void",[_angular_core.animate("200ms cubic-bezier(0.4, 0.0, 1, 1)",_angular_core.style({transform:"translateY(-100%)"}))]),_angular_core.transition("fadeInLeft => void",[_angular_core.animate("200ms cubic-bezier(0.4, 0.0, 1, 1)",_angular_core.style({transform:"translateX(-100%)"}))])])]})],exports.AnAlert);var AN_DYNAMIC_COMPONENT_MODULE=new _angular_core.OpaqueToken("AN_DYNAMIC_COMPONENT_MODULE");function provideAnDynamicComponentModule(metadata){return[{provide:AN_DYNAMIC_COMPONENT_MODULE,useValue:metadata}]}var __decorate$2=undefined&&undefined.__decorate||function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)if(d=decorators[i])r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r;return c>3&&r&&Object.defineProperty(target,key,r),r};var __param=undefined&&undefined.__param||function(paramIndex,decorator){return function(target,key){decorator(target,key,paramIndex)}};var anAlertItem=function(){function anAlertItem(_dynamicModuleMeta,_viewContainer,compiler,anBusService,changeDetectorRef){this._dynamicModuleMeta=_dynamicModuleMeta;this._viewContainer=_viewContainer;this.compiler=compiler;this.anBusService=anBusService;this.changeDetectorRef=changeDetectorRef;this.hasDynamicTemplate=false;this.customContainerClasses=undefined;this.onClose=new _angular_core.EventEmitter;this.onAlertItemUpdates=new _angular_core.EventEmitter;this.customContainerClasses=anBusService.getGlobalConfigForAlerts().customContainerClasses}Object.defineProperty(anAlertItem.prototype,"options",{get:function(){return this._options},set:function(value){this._options=value;console.warn(this._options);this._subscribeToUpdateListener()},enumerable:true,configurable:true});anAlertItem.prototype.ngAfterViewInit=function(){this._setDelay(this._options.delay)};anAlertItem.prototype.clickToClose=function(){if(this._options.clickToClose){this.close()}};anAlertItem.prototype.close=function(){this.onClose.emit(this._options.id)};anAlertItem.prototype._subscribeToUpdateListener=function(){var _this=this;this._options.$$updateListener.subscribe(function(){_this._setStyles()})};anAlertItem.prototype._setDelay=function(delay){var _this=this;if(delay===0){this._show();return}this._showDelayTimer=setTimeout(function(){_this._show()},delay)};anAlertItem.prototype._setHideTimeout=function(time){var _this=this;if(time===0){return}this._closeTimeoutTimer=setTimeout(function(){_this._hide()},time)};anAlertItem.prototype._show=function(){this._setType();this._setStyles();this._setHideTimeout(this._options.timeout);this._showNativeNotification()};anAlertItem.prototype._showNativeNotification=function(){if(!this._options.showNotification){return}this.anBusService.showNotification(this._options,this._options.showNotificationIfDocumentVisible)};anAlertItem.prototype._hide=function(){this.close()};anAlertItem.prototype._setType=function(){var cssClassMapping=new Map;cssClassMapping.set(AnAlertTypes.INFO,"type-info");cssClassMapping.set(AnAlertTypes.WARNING,"type-warning");cssClassMapping.set(AnAlertTypes.SUCCESS,"type-success");cssClassMapping.set(AnAlertTypes.ERROR,"type-error");cssClassMapping.set(AnAlertTypes.BLANK,"type-blank");this._containerElement.nativeElement.classList.add("anAlertItem__item--"+cssClassMapping.get(this._options.type))};anAlertItem.prototype._setStyles=function(){switch(this._options.position){case"topLeft":break;case"topCenter":this._containerElement.nativeElement.classList.add("anTranslateXCenter");break;case"topRight":break;case"bottomLeft":break;case"bottomCenter":this._containerElement.nativeElement.classList.add("anTranslateXCenter");break;case"bottomRight":break}this._containerElement.nativeElement.classList.remove("anHidden")};anAlertItem.prototype._createDynamicComponent=function(){var componentMetadataParams={selector:"an-alert-item-custom-template"};if(typeof this._options.templateUrl==="string"){componentMetadataParams.templateUrl=this._options.templateUrl}if(typeof this._options.template==="string"){componentMetadataParams.template=this._options.template}var componentMetadata=new _angular_core.Component(componentMetadataParams);var cmpClass=function(){function _$$1(){}return _$$1}();return _angular_core.Component(componentMetadata)(cmpClass)};anAlertItem.prototype._createDynamicModule=function(componentType){var declarations=this._dynamicModuleMeta.declarations||[];declarations.push(componentType);var moduleMeta={imports:this._dynamicModuleMeta.imports,providers:this._dynamicModuleMeta.providers,schemas:this._dynamicModuleMeta.schemas,declarations:declarations};return _angular_core.NgModule(moduleMeta)(function(){function _$$1(){}return _$$1}())};anAlertItem.prototype._insertDynamicComponent=function(){var _this=this;this._dynamicComponentType=this._createDynamicComponent();this._dynamicModuleType=this._createDynamicModule(this._dynamicComponentType);var injector=_angular_core.ReflectiveInjector.fromResolvedProviders([],this._viewContainer.parentInjector);this.compiler.compileModuleAndAllComponentsAsync(this._dynamicModuleType).then(function(factory){var dynamicComponentFactory;var i;for(i=factory.componentFactories.length-1;i>=0;i--){if(factory.componentFactories[i].componentType===_this._dynamicComponentType){dynamicComponentFactory=factory.componentFactories[i];break}}return dynamicComponentFactory}).then(function(dynamicComponentFactory){if(dynamicComponentFactory){_this._templateContainerRef.clear();_this._dynamicComponent=_this._templateContainerRef.createComponent(dynamicComponentFactory,0,injector);_.merge(_this._dynamicComponent.instance,_this);_this._dynamicComponent.changeDetectorRef.detectChanges()}})};anAlertItem.prototype.ngOnChanges=function(){if(typeof this._options.template==="string"||typeof this._options.templateUrl==="string"){this.hasDynamicTemplate=true;this._insertDynamicComponent()}};anAlertItem.prototype.ngOnDestroy=function(){if(this._closeTimeoutTimer){clearTimeout(this._closeTimeoutTimer)}if(this._dynamicComponent){this._dynamicComponent.destroy()}if(this.compiler){if(this._dynamicComponentType){this.compiler.clearCacheFor(this._dynamicComponentType)}if(this._dynamicModuleType){this.compiler.clearCacheFor(this._dynamicModuleType)}}};return anAlertItem}();__decorate$2([_angular_core.Input()],anAlertItem.prototype,"options",null);__decorate$2([_angular_core.Output()],anAlertItem.prototype,"onClose",void 0);__decorate$2([_angular_core.Output()],anAlertItem.prototype,"onAlertItemUpdates",void 0);__decorate$2([_angular_core.ViewChild("container")],anAlertItem.prototype,"_containerElement",void 0);__decorate$2([_angular_core.ViewChild("templateContainer",{read:_angular_core.ViewContainerRef})],anAlertItem.prototype,"_templateContainerRef",void 0);anAlertItem=__decorate$2([_angular_core.Component({selector:"an-alert-item",template:'\n    <div #container class="anAlertItem__item anHidden" (click)="clickToClose()">\n\n      <div *ngIf="!hasDynamicTemplate" [ngClass]="customContainerClasses">\n        <div class="anAlertItem__contentContainer">\n          <div class="anAlertItem__content">\n            <div class="anAlertItemContent__title">\n              {{_options.title}}\n            </div>\n            <div class="anAlertItemContent__message">\n              {{_options.message}}\n            </div>\n          </div>\n          <div class="anAlertItem__closeAction">\n            <span class="anAlertItem__closeActionIcon" (click)="close()"></span>\n          </div>\n\n        </div>\n      </div>\n\n      <template *ngIf="hasDynamicTemplate" #templateContainer></template>\n\n    </div>\n  ',changeDetection:_angular_core.ChangeDetectionStrategy.OnPush}),__param(0,_angular_core.Inject(AN_DYNAMIC_COMPONENT_MODULE))],anAlertItem);var defaultGlobaAlertConfig={removeLastIfViewportOverflow:false,customContainerClasses:"anAlertItem__item--theme-material"};var AnUtils=function(){function AnUtils(){}AnUtils.generateGuid=function(){var r;var v;return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(c){r=Math.random()*16|0;v=c==="x"?r:r&3|8;return v.toString(16)})};return AnUtils}();var __decorate$3=undefined&&undefined.__decorate||function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)if(d=decorators[i])r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r;return c>3&&r&&Object.defineProperty(target,key,r),r};exports.AnBusService=function(){function AnBusService(){this.globalAlertConfig=defaultGlobaAlertConfig;this.showAlertSource=new rxjs_Subject.Subject;this.hideAlertSource=new rxjs_Subject.Subject;this.hideAlertsSource=new rxjs_Subject.Subject;this.hideAllAlertsSource=new rxjs_Subject.Subject;this.showNotificationSource=new rxjs_Subject.Subject;this.notificationApiPermissions={GRANTED:"granted",DENIED:"denied",DEFAULT:"default"};this.documentVisibilityStates={VISIBLE:"visible",HIDDEN:"hidden"};this.$$onClose=new rxjs_Subject.Subject;this.showAlert$=this.showAlertSource;this.hideAlert$=this.hideAlertSource;this.hideAlerts$=this.hideAlertsSource;this.hideAllAlerts$=this.hideAllAlertsSource;this.onClose$=this.$$onClose;this.alertTypes=AnAlertTypes}AnBusService.prototype.setGlobalConfigForAlerts=function(config){if(!_.isObject(config)){return}this.globalAlertConfig=_.merge(defaultGlobaAlertConfig,config)};AnBusService.prototype.getGlobalConfigForAlerts=function(){return this.globalAlertConfig};AnBusService.prototype.showAlert=function(config){var _this=this;var newConfig=_.merge(config,{id:AnUtils.generateGuid()});this.showAlertSource.next(newConfig);return{id:newConfig.id,hide:function(){_this._hideAlert(newConfig.id)}}};AnBusService.prototype.hideAlerts=function(alertsIds){this.hideAlertsSource.next(alertsIds)};AnBusService.prototype.hideAllAlerts=function(){this.hideAllAlertsSource.next(null)};AnBusService.prototype.requestNotificationPermission=function(){var _this=this;if(!_.isFunction(window.Notification)){return new Promise(function(resolve){resolve(false)})}if(window.Notification.permission===this.notificationApiPermissions.GRANTED){return new Promise(function(resolve){resolve(true)})}if(window.Notification.permission===this.notificationApiPermissions.DEFAULT){return new Promise(function(resolve){window.Notification.requestPermission(function(permission){resolve(permission===_this.notificationApiPermissions.GRANTED)})})}if(window.Notification.permission===this.notificationApiPermissions.DENIED){return new Promise(function(resolve){resolve(false)})}return new Promise(function(resolve){resolve(false)})};AnBusService.prototype.showNotification=function(options,showIfDocumentVisible){var _this=this;return new Promise(function(resolve){_this.requestNotificationPermission().then(function(result){if(!result){return}resolve(_this._createNativeNotification(options,showIfDocumentVisible))})})};AnBusService.prototype._createNativeNotification=function(options,showIfDocumentVisible){if(!_.isObject(options)){return undefined}if(showIfDocumentVisible&&document.visibilityState!==this.documentVisibilityStates.VISIBLE){return undefined}if(!showIfDocumentVisible&&document.visibilityState===this.documentVisibilityStates.VISIBLE){return undefined}var notificationInstance=new window.Notification(options.title,options);notificationInstance.onclick=options.onclick;notificationInstance.onerror=options.onerror;return notificationInstance};AnBusService.prototype._hideAlert=function(id){this.hideAlertSource.next(id)};return AnBusService}();exports.AnBusService=__decorate$3([_angular_core.Injectable()],exports.AnBusService);var __decorate=undefined&&undefined.__decorate||function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)if(d=decorators[i])r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r;return c>3&&r&&Object.defineProperty(target,key,r),r};exports.AnModule=AnModule_1=function(){function AnModule(){}AnModule.forRoot=function(){return{ngModule:AnModule_1,providers:[exports.AnBusService,provideAnDynamicComponentModule({})]}};return AnModule}();exports.AnModule=AnModule_1=__decorate([_angular_core.NgModule({imports:[_angular_common.CommonModule],declarations:[exports.AnAlert,anAlertItem],exports:[exports.AnAlert]})],exports.AnModule);var AnModule_1;Object.defineProperty(exports,"__esModule",{value:true})});