wsuite-notification
Version:
Toast notification for angular 2,4,5,6,7,8+ version.
246 lines (237 loc) • 16.7 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { Optional, ɵɵdefineInjectable, ɵɵinject, Injectable, Component, Pipe, NgModule } from '@angular/core';
import { Subject } from 'rxjs';
import { DomSanitizer } from '@angular/platform-browser';
import { trigger, transition, style, animate } from '@angular/animations';
import { CommonModule } from '@angular/common';
var Notification = /** @class */ (function () {
function Notification(id, type, title, message, timeout) {
this.id = id;
this.type = type;
this.title = title;
this.message = message;
this.timeout = timeout;
}
return Notification;
}());
var NotificationType;
(function (NotificationType) {
NotificationType[NotificationType["success"] = 0] = "success";
NotificationType[NotificationType["warning"] = 1] = "warning";
NotificationType[NotificationType["error"] = 2] = "error";
NotificationType[NotificationType["info"] = 3] = "info";
NotificationType[NotificationType["darkgray"] = 4] = "darkgray";
NotificationType[NotificationType["blue"] = 5] = "blue";
})(NotificationType || (NotificationType = {}));
var WsuiteNotificationConfig = /** @class */ (function () {
function WsuiteNotificationConfig(timeout) {
if (timeout === void 0) { timeout = 3000; }
this.timeout = timeout;
}
return WsuiteNotificationConfig;
}());
var NotificationService = /** @class */ (function () {
function NotificationService(config) {
this.notificationSubject = new Subject();
this.nidx = 0;
this.timeout = 3000;
if (config !== undefined) {
this.timeout = config.timeout !== undefined ? config.timeout : 3000;
}
}
NotificationService.prototype.getObservable = function () {
return this.notificationSubject.asObservable();
};
NotificationService.prototype.info = function (title, message, timeout) {
if (timeout === void 0) { timeout = this.timeout; }
this.notificationSubject.next(new Notification(this.nidx++, NotificationType.info, title, message, timeout));
};
NotificationService.prototype.success = function (title, message, timeout) {
if (timeout === void 0) { timeout = this.timeout; }
this.notificationSubject.next(new Notification(this.nidx++, NotificationType.success, title, message, timeout));
};
NotificationService.prototype.warning = function (title, message, timeout) {
if (timeout === void 0) { timeout = this.timeout; }
this.notificationSubject.next(new Notification(this.nidx++, NotificationType.warning, title, message, timeout));
};
NotificationService.prototype.error = function (title, message, timeout) {
if (timeout === void 0) { timeout = this.timeout; }
this.notificationSubject.next(new Notification(this.nidx++, NotificationType.error, title, message, timeout));
};
NotificationService.prototype.darkgray = function (title, message, timeout) {
if (timeout === void 0) { timeout = this.timeout; }
this.notificationSubject.next(new Notification(this.nidx++, NotificationType.darkgray, title, message, timeout));
};
NotificationService.prototype.blue = function (title, message, timeout) {
if (timeout === void 0) { timeout = this.timeout; }
this.notificationSubject.next(new Notification(this.nidx++, NotificationType.blue, title, message, timeout));
};
NotificationService.ctorParameters = function () { return [
{ type: WsuiteNotificationConfig, decorators: [{ type: Optional }] }
]; };
NotificationService.ɵprov = ɵɵdefineInjectable({ factory: function NotificationService_Factory() { return new NotificationService(ɵɵinject(WsuiteNotificationConfig, 8)); }, token: NotificationService, providedIn: "root" });
NotificationService = __decorate([
Injectable({
providedIn: "root",
}),
__param(0, Optional())
], NotificationService);
return NotificationService;
}());
var NotificationComponent = /** @class */ (function () {
function NotificationComponent(notificationSvc, domSanitizer) {
this.notificationSvc = notificationSvc;
this.domSanitizer = domSanitizer;
this.notifications = [];
}
NotificationComponent.prototype._addNotification = function (notification) {
var _this = this;
this.notifications.push(notification);
if (notification.timeout !== 0) {
setTimeout(function () { return _this.close(notification); }, notification.timeout);
}
};
NotificationComponent.prototype.ngOnInit = function () {
var _this = this;
this.subscription = this.notificationSvc.getObservable().subscribe(function (notification) { return _this._addNotification(notification); });
};
NotificationComponent.prototype.ngOnDestroy = function () {
this.subscription.unsubscribe();
};
NotificationComponent.prototype.close = function (notification) {
this.notifications = this.notifications.filter(function (notif) { return notif.id !== notification.id; });
};
NotificationComponent.prototype.className = function (notification) {
var style;
switch (notification.type) {
case NotificationType.success:
style = 'wsuite-alert-success';
break;
case NotificationType.warning:
style = 'wsuite-alert-warning';
break;
case NotificationType.error:
style = 'wsuite-alert-error';
break;
case NotificationType.darkgray:
style = 'wsuite-alert-darkgray';
break;
case NotificationType.blue:
style = 'wsuite-alert-blue';
break;
default:
style = 'info';
break;
}
return style;
};
NotificationComponent.prototype.setIcon = function (notification) {
var icon;
switch (notification.type) {
case NotificationType.success:
icon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMC43NjkiIHZpZXdCb3g9IjAgMCAxNCAxMC43NjkiPjxkZWZzPjxzdHlsZT4uYXtmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJhIiBkPSJNLjE2Miw4LjkyM2EuNTIxLjUyMSwwLDAsMSwwLS43NTRsLjc1NC0uNzU0YS41MjEuNTIxLDAsMCwxLC43NTQsMGwuMDU0LjA1NCwyLjk2MiwzLjE3N2EuMjYuMjYsMCwwLDAsLjM3NywwbDcuMjE1LTcuNDg1aC4wNTRhLjUyMS41MjEsMCwwLDEsLjc1NCwwbC43NTQuNzU0YS41MjEuNTIxLDAsMCwxLDAsLjc1NGgwTDUuMjIzLDEzLjYwOGEuNTIxLjUyMSwwLDAsMS0uNzU0LDBMLjI2OSw5LjA4NS4xNjIsOC45MjNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0zKSIvPjwvc3ZnPg==';
break;
case NotificationType.warning:
icon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNS40NzkiIHZpZXdCb3g9IjAgMCAxOCAxNS40NzkiPjxkZWZzPjxzdHlsZT4uYXtmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTM1Ljg1NykiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMzUuODU3KSI+PHBhdGggY2xhc3M9ImEiIGQ9Ik0xNy43NjgsNDguODg0LDEwLjM4NCwzNi42MzlhMS42MTcsMS42MTcsMCwwLDAtMi43NywwTC4yMzEsNDguODg0YTEuNjE3LDEuNjE3LDAsMCwwLDEuMzg1LDIuNDUySDE2LjM4M2ExLjYxNywxLjYxNywwLDAsMCwxLjM4NS0yLjQ1MlptLTEsMS4wNTRhLjQ0Ni40NDYsMCwwLDEtLjM4OC4yMjZIMS42MTZhLjQ0NS40NDUsMCwwLDEtLjM4MS0uNjc1TDguNjE4LDM3LjI0NGEuNDQ1LjQ0NSwwLDAsMSwuNzYyLDBsNy4zODMsMTIuMjQ1QS40NDYuNDQ2LDAsMCwxLDE2Ljc3LDQ5LjkzOFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTM1Ljg1NykiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOC4yNzIgNDAuODg5KSI+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yMzQuMzEsMTczLjAwNWMtLjQxMSwwLS43MzIuMjIxLS43MzIuNjEyLDAsMS4xOTQuMTQsMi45MS4xNCw0LjEsMCwuMzExLjI3MS40NDEuNTkyLjQ0MS4yNDEsMCwuNTgyLS4xMy41ODItLjQ0MSwwLTEuMTk0LjE0LTIuOTEuMTQtNC4xQS42NDUuNjQ1LDAsMCwwLDIzNC4zMSwxNzMuMDA1WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIzMy41NzggLTE3My4wMDUpIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDguMjQzIDQ3LjEyMikiPjxwYXRoIGNsYXNzPSJhIiBkPSJNMjMzLjQyNCwzNTMuMzA2YS43NzMuNzczLDAsMCwwLDAsMS41NDUuNzczLjc3MywwLDAsMCwwLTEuNTQ1WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIzMi42NTEgLTM1My4zMDYpIi8+PC9nPjwvZz48L3N2Zz4=';
break;
case NotificationType.error:
icon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNC44MjgiIGhlaWdodD0iMTQuODI4IiB2aWV3Qm94PSIwIDAgMTQuODI4IDE0LjgyOCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2Utd2lkdGg6MnB4O308L3N0eWxlPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTMyNS4yMDUgLTExLjIwNSkiPjxsaW5lIGNsYXNzPSJhIiB4Mj0iMTIiIHkyPSIxMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMyNi42MTkgMTIuNjE5KSIvPjxsaW5lIGNsYXNzPSJhIiB4MT0iMTIiIHkyPSIxMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMyNi42MTkgMTIuNjE5KSIvPjwvZz48L3N2Zz4=';
break;
case NotificationType.darkgray:
icon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2LjQzOSIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDYuNDM5IDE0Ij48ZGVmcz48c3R5bGU+LmF7ZmlsbDojZmZmO308L3N0eWxlPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjcpIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNykiPjxwYXRoIGNsYXNzPSJhIiBkPSJNMzEuOTIzLDBhMS4zMDksMS4zMDksMCwwLDEsMS40MDYsMS4zNywxLjg0MSwxLjg0MSwwLDAsMS0xLjg3NSwxLjc1OCwxLjI1NSwxLjI1NSwwLDAsMS0xLjM4Mi0xLjM5M0ExLjgsMS44LDAsMCwxLDMxLjkyMywwWk0yOS4wMzYsMTRjLS43NCwwLTEuMjgzLS40NTctLjc2NS0yLjQ2NmwuODUtMy41NjRjLjE0OC0uNTcxLjE3Mi0uOCwwLS44YTUuNTkyLDUuNTkyLDAsMCwwLTEuNzUxLjc4M0wyNyw3LjMzN0E5Ljc4Miw5Ljc4MiwwLDAsMSwzMS43NjEsNC45MWMuNzQsMCwuODY0Ljg5MS40OTMsMi4yNjFsLS45NzMsMy43NDZjLS4xNzMuNjYyLS4xLjg5LjA3NC44OWEzLjgxMywzLjgxMywwLDAsMCwxLjY2NS0uODQ2bC40Mi41NzFBNy43LDcuNywwLDAsMSwyOS4wMzYsMTRaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjcpIi8+PC9nPjwvZz48L3N2Zz4=';
break;
case NotificationType.blue:
icon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2LjQzOSIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDYuNDM5IDE0Ij48ZGVmcz48c3R5bGU+LmF7ZmlsbDojZmZmO308L3N0eWxlPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjcpIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNykiPjxwYXRoIGNsYXNzPSJhIiBkPSJNMzEuOTIzLDBhMS4zMDksMS4zMDksMCwwLDEsMS40MDYsMS4zNywxLjg0MSwxLjg0MSwwLDAsMS0xLjg3NSwxLjc1OCwxLjI1NSwxLjI1NSwwLDAsMS0xLjM4Mi0xLjM5M0ExLjgsMS44LDAsMCwxLDMxLjkyMywwWk0yOS4wMzYsMTRjLS43NCwwLTEuMjgzLS40NTctLjc2NS0yLjQ2NmwuODUtMy41NjRjLjE0OC0uNTcxLjE3Mi0uOCwwLS44YTUuNTkyLDUuNTkyLDAsMCwwLTEuNzUxLjc4M0wyNyw3LjMzN0E5Ljc4Miw5Ljc4MiwwLDAsMSwzMS43NjEsNC45MWMuNzQsMCwuODY0Ljg5MS40OTMsMi4yNjFsLS45NzMsMy43NDZjLS4xNzMuNjYyLS4xLjg5LjA3NC44OWEzLjgxMywzLjgxMywwLDAsMCwxLjY2NS0uODQ2bC40Mi41NzFBNy43LDcuNywwLDAsMSwyOS4wMzYsMTRaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjcpIi8+PC9nPjwvZz48L3N2Zz4=';
break;
default:
icon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2LjQzOSIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDYuNDM5IDE0Ij48ZGVmcz48c3R5bGU+LmF7ZmlsbDojZmZmO308L3N0eWxlPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjcpIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNykiPjxwYXRoIGNsYXNzPSJhIiBkPSJNMzEuOTIzLDBhMS4zMDksMS4zMDksMCwwLDEsMS40MDYsMS4zNywxLjg0MSwxLjg0MSwwLDAsMS0xLjg3NSwxLjc1OCwxLjI1NSwxLjI1NSwwLDAsMS0xLjM4Mi0xLjM5M0ExLjgsMS44LDAsMCwxLDMxLjkyMywwWk0yOS4wMzYsMTRjLS43NCwwLTEuMjgzLS40NTctLjc2NS0yLjQ2NmwuODUtMy41NjRjLjE0OC0uNTcxLjE3Mi0uOCwwLS44YTUuNTkyLDUuNTkyLDAsMCwwLTEuNzUxLjc4M0wyNyw3LjMzN0E5Ljc4Miw5Ljc4MiwwLDAsMSwzMS43NjEsNC45MWMuNzQsMCwuODY0Ljg5MS40OTMsMi4yNjFsLS45NzMsMy43NDZjLS4xNzMuNjYyLS4xLjg5LjA3NC44OWEzLjgxMywzLjgxMywwLDAsMCwxLjY2NS0uODQ2bC40Mi41NzFBNy43LDcuNywwLDAsMSwyOS4wMzYsMTRaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjcpIi8+PC9nPjwvZz48L3N2Zz4=';
break;
}
return this.domSanitizer.bypassSecurityTrustResourceUrl(icon);
};
NotificationComponent.ctorParameters = function () { return [
{ type: NotificationService },
{ type: DomSanitizer }
]; };
NotificationComponent = __decorate([
Component({
selector: 'wsuite-notification',
template: "<div class=\"wsuite-notifications\">\n <div class=\"wsuite-alert wsuite-alert-dismissible w-350\" [ngClass]=\"className(notification)\"\n *ngFor=\"let notification of notifications\" role=\"wsuite-alert\" @fade>\n <span class=\"info\"> <img [src]=\"setIcon(notification)\" alt=\"\"> </span>\n <div class=\"wsuite-alert-body\">\n <p class=\"n1\">{{notification.title}}</p>\n <small [innerHtml]=\"notification.message | wsuiteSafeHtml\"></small>\n </div>\n <button type=\"button\" class=\"close\" (click)=\"close(notification)\" aria-label=\"Close\"> <span\n aria-hidden=\"true\">×</span>\n </button>\n </div>\n</div>",
animations: [
trigger('fade', [
transition('void => *', [
style({ opacity: 0 }),
animate(500, style({ opacity: 1 }))
]),
transition('* => void', [
style({ opacity: 1 }),
animate(500, style({ opacity: 0 }))
])
])
],
styles: [".wsuite-notifications{position:fixed;top:60px;right:0;z-index:99999999;left:50%;margin-left:-175px}.wsuite-alert .info{width:39px;display:flex;align-items:center;justify-content:center}.wsuite-alert-body{padding:4px 34px 4px 13px;flex:1;display:flex;flex-direction:column;justify-content:center}.wsuite-alert-body p{line-height:17px}.wsuite-alert-body small{font-size:10px;color:#868686;line-height:14px;display:block}.wsuite-alert{display:flex;align-items:stretch;box-shadow:0 3px 6px rgba(0,0,0,.16);margin:5px;left:50%;background-color:#fff;border-radius:.25rem;min-height:40px}.wsuite-alert .close{align-self:flex-start;margin-right:5px}.wsuite-alert-darkgray{border:1px solid #404040;padding:0}.wsuite-alert-darkgray .info{background-color:#404040}.wsuite-alert-blue{border:1px solid #41a3f3;padding:0}.wsuite-alert-blue .info{background-color:#41a3f3}.wsuite-alert-warning{border:1px solid #f5b829;padding:0}.wsuite-alert-warning .info{background-color:#f5b829}.wsuite-alert-error{border:1px solid #ff5c5c;padding:0}.wsuite-alert-error .info{background-color:#ff5c5c}.wsuite-alert-success{border:1px solid #5abe2b;padding:0}.wsuite-alert-success .info{background-color:#5abe2b}.w-250{max-width:250px}.w-350{max-width:350px}.wsuite-alert-example .wsuite-alert{margin-bottom:38px}"]
})
], NotificationComponent);
return NotificationComponent;
}());
var WsuiteSafeHtmlPipe = /** @class */ (function () {
function WsuiteSafeHtmlPipe(sanitized) {
this.sanitized = sanitized;
}
WsuiteSafeHtmlPipe.prototype.transform = function (value) {
// var byPassStyle = this.sanitized.bypassSecurityTrustStyle(value);
// console.log(this.sanitized.bypassSecurityTrustHtml(byPassStyle))
return this.sanitized.bypassSecurityTrustHtml(value);
};
WsuiteSafeHtmlPipe.ctorParameters = function () { return [
{ type: DomSanitizer }
]; };
WsuiteSafeHtmlPipe = __decorate([
Pipe({ name: 'wsuiteSafeHtml' })
], WsuiteSafeHtmlPipe);
return WsuiteSafeHtmlPipe;
}());
var WsuiteNotificationModule = /** @class */ (function () {
function WsuiteNotificationModule() {
}
WsuiteNotificationModule_1 = WsuiteNotificationModule;
WsuiteNotificationModule.forRoot = function (config) {
return {
ngModule: WsuiteNotificationModule_1,
providers: [
{
provide: WsuiteNotificationConfig,
useValue: config
}
]
};
};
var WsuiteNotificationModule_1;
WsuiteNotificationModule = WsuiteNotificationModule_1 = __decorate([
NgModule({
declarations: [
NotificationComponent,
WsuiteSafeHtmlPipe
],
imports: [
CommonModule
],
providers: [
NotificationService
],
exports: [
NotificationComponent,
WsuiteSafeHtmlPipe
]
})
], WsuiteNotificationModule);
return WsuiteNotificationModule;
}());
/*
* Public API Surface of wsuite-notification
*/
/**
* Generated bundle index. Do not edit.
*/
export { NotificationComponent, NotificationService, WsuiteNotificationModule, WsuiteNotificationConfig as ɵa, WsuiteSafeHtmlPipe as ɵb };
//# sourceMappingURL=wsuite-notification.js.map