alert-notification
Version:
A lightweight easy to use module to display alert notifications inside you Angular web applications.
258 lines (251 loc) • 10.6 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/platform-browser'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('alert-notification', ['exports', '@angular/core', 'rxjs', '@angular/platform-browser', '@angular/common'], factory) :
(global = global || self, factory(global['alert-notification'] = {}, global.ng.core, global.rxjs, global.ng.platformBrowser, global.ng.common));
}(this, function (exports, core, rxjs, platformBrowser, common) { 'use strict';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AlertService = /** @class */ (function () {
function AlertService() {
this.position = 'bottom-right';
this.interval = 5000;
this.autodismiss = true;
this.alerts = [];
this.positionUpdated = new rxjs.Subject();
this.alertUpdated = new rxjs.Subject();
}
/**
* @return {?}
*/
AlertService.prototype.getPosition = /**
* @return {?}
*/
function () {
return this.position;
};
/**
* @param {?} position
* @return {?}
*/
AlertService.prototype.setPosition = /**
* @param {?} position
* @return {?}
*/
function (position) {
this.position = position;
console.log('set' + this.position);
this.positionUpdated.next(this.position);
};
/**
* @return {?}
*/
AlertService.prototype.getPositionUpdateListner = /**
* @return {?}
*/
function () {
return this.positionUpdated.asObservable();
};
/**
* @return {?}
*/
AlertService.prototype.getAlerts = /**
* @return {?}
*/
function () {
return this.alerts;
};
/**
* @param {?} newId
* @param {?} newType
* @param {?} newTitle
* @param {?} newMessage
* @return {?}
*/
AlertService.prototype.push = /**
* @param {?} newId
* @param {?} newType
* @param {?} newTitle
* @param {?} newMessage
* @return {?}
*/
function (newId, newType, newTitle, newMessage) {
var _this = this;
this.alerts.push({
id: newId,
title: newTitle,
message: newMessage,
type: newType.toLowerCase()
});
this.alertUpdated.next(this.alerts);
if (this.autodismiss) {
setTimeout((/**
* @return {?}
*/
function () {
_this.removeAlert(newId);
}), this.interval);
}
};
/**
* @param {?} id
* @return {?}
*/
AlertService.prototype.removeAlert = /**
* @param {?} id
* @return {?}
*/
function (id) {
/** @type {?} */
var updatedAlerts = [];
this.alerts.forEach((/**
* @param {?} alert
* @return {?}
*/
function (alert) {
if (alert.id !== id) {
updatedAlerts.push(alert);
}
}));
this.alerts = updatedAlerts;
this.alertUpdated.next(this.alerts);
};
/**
* @return {?}
*/
AlertService.prototype.getAlertUpdateListner = /**
* @return {?}
*/
function () {
return this.alertUpdated.asObservable();
};
/**
* @param {?} time
* @return {?}
*/
AlertService.prototype.setInterval = /**
* @param {?} time
* @return {?}
*/
function (time) {
this.interval = time;
};
/**
* @param {?} dismiss
* @return {?}
*/
AlertService.prototype.setAutoDismiss = /**
* @param {?} dismiss
* @return {?}
*/
function (dismiss) {
this.autodismiss = dismiss;
};
AlertService.decorators = [
{ type: core.Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */ AlertService.ngInjectableDef = core.defineInjectable({ factory: function AlertService_Factory() { return new AlertService(); }, token: AlertService, providedIn: "root" });
return AlertService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AlertNotificationComponent = /** @class */ (function () {
function AlertNotificationComponent(alertService) {
this.alertService = alertService;
this.alerts = [];
}
/**
* @return {?}
*/
AlertNotificationComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.position = this.alertService.getPosition();
this.alerts = this.alertService.getAlerts();
this.positionSub = this.alertService.getPositionUpdateListner().subscribe((/**
* @param {?} data
* @return {?}
*/
function (data) {
_this.position = data;
}));
this.alertsSub = this.alertService.getAlertUpdateListner().subscribe((/**
* @param {?} alerts
* @return {?}
*/
function (alerts) {
_this.alerts = alerts;
}));
};
/**
* @param {?} id
* @return {?}
*/
AlertNotificationComponent.prototype.close = /**
* @param {?} id
* @return {?}
*/
function (id) {
this.alertService.removeAlert(id);
};
/**
* @return {?}
*/
AlertNotificationComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.positionSub.unsubscribe();
};
AlertNotificationComponent.decorators = [
{ type: core.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 = function () { return [
{ type: AlertService }
]; };
return AlertNotificationComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AlertModule = /** @class */ (function () {
function AlertModule() {
}
AlertModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [AlertNotificationComponent],
imports: [
platformBrowser.BrowserModule,
common.CommonModule
],
exports: [AlertNotificationComponent]
},] }
];
return AlertModule;
}());
var Alert = /** @class */ (function () {
function Alert() {
}
return Alert;
}());
exports.Alert = Alert;
exports.AlertModule = AlertModule;
exports.AlertNotificationComponent = AlertNotificationComponent;
exports.AlertService = AlertService;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=alert-notification.umd.js.map