alert-notification
Version:
A lightweight easy to use module to display alert notifications inside you Angular web applications.
198 lines (193 loc) • 7.36 kB
JavaScript
import { Injectable, defineInjectable, Component, NgModule } from '@angular/core';
import { Subject } from 'rxjs';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class AlertService {
constructor() {
this.position = 'bottom-right';
this.interval = 5000;
this.autodismiss = true;
this.alerts = [];
this.positionUpdated = new Subject();
this.alertUpdated = new Subject();
}
/**
* @return {?}
*/
getPosition() {
return this.position;
}
/**
* @param {?} position
* @return {?}
*/
setPosition(position) {
this.position = position;
console.log('set' + this.position);
this.positionUpdated.next(this.position);
}
/**
* @return {?}
*/
getPositionUpdateListner() {
return this.positionUpdated.asObservable();
}
/**
* @return {?}
*/
getAlerts() {
return this.alerts;
}
/**
* @param {?} newId
* @param {?} newType
* @param {?} newTitle
* @param {?} newMessage
* @return {?}
*/
push(newId, newType, newTitle, newMessage) {
this.alerts.push({
id: newId,
title: newTitle,
message: newMessage,
type: newType.toLowerCase()
});
this.alertUpdated.next(this.alerts);
if (this.autodismiss) {
setTimeout((/**
* @return {?}
*/
() => {
this.removeAlert(newId);
}), this.interval);
}
}
/**
* @param {?} id
* @return {?}
*/
removeAlert(id) {
/** @type {?} */
const updatedAlerts = [];
this.alerts.forEach((/**
* @param {?} alert
* @return {?}
*/
alert => {
if (alert.id !== id) {
updatedAlerts.push(alert);
}
}));
this.alerts = updatedAlerts;
this.alertUpdated.next(this.alerts);
}
/**
* @return {?}
*/
getAlertUpdateListner() {
return this.alertUpdated.asObservable();
}
/**
* @param {?} time
* @return {?}
*/
setInterval(time) {
this.interval = time;
}
/**
* @param {?} dismiss
* @return {?}
*/
setAutoDismiss(dismiss) {
this.autodismiss = dismiss;
}
}
AlertService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */ AlertService.ngInjectableDef = defineInjectable({ factory: function AlertService_Factory() { return new AlertService(); }, token: AlertService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class AlertNotificationComponent {
/**
* @param {?} alertService
*/
constructor(alertService) {
this.alertService = alertService;
this.alerts = [];
}
/**
* @return {?}
*/
ngOnInit() {
this.position = this.alertService.getPosition();
this.alerts = this.alertService.getAlerts();
this.positionSub = this.alertService.getPositionUpdateListner().subscribe((/**
* @param {?} data
* @return {?}
*/
data => {
this.position = data;
}));
this.alertsSub = this.alertService.getAlertUpdateListner().subscribe((/**
* @param {?} alerts
* @return {?}
*/
alerts => {
this.alerts = alerts;
}));
}
/**
* @param {?} id
* @return {?}
*/
close(id) {
this.alertService.removeAlert(id);
}
/**
* @return {?}
*/
ngOnDestroy() {
this.positionSub.unsubscribe();
}
}
AlertNotificationComponent.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line: component-selector
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}}"]
}] }
];
/** @nocollapse */
AlertNotificationComponent.ctorParameters = () => [
{ type: AlertService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class AlertModule {
}
AlertModule.decorators = [
{ type: NgModule, args: [{
declarations: [AlertNotificationComponent],
imports: [
BrowserModule,
CommonModule
],
exports: [AlertNotificationComponent]
},] }
];
class Alert {
}
export { Alert, AlertModule, AlertNotificationComponent, AlertService };
//# sourceMappingURL=alert-notification.js.map