ngx-notification-bar
Version:
Angular notification bar component for Angular 2+ projects.
194 lines (186 loc) • 10.7 kB
JavaScript
import { trigger, state, style, transition, animate } from '@angular/animations';
import * as i0 from '@angular/core';
import { EventEmitter, Injectable, InjectionToken, Component, Inject, Optional, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
var NotificationType;
(function (NotificationType) {
NotificationType[NotificationType["Info"] = 0] = "Info";
NotificationType[NotificationType["Success"] = 1] = "Success";
NotificationType[NotificationType["Error"] = 2] = "Error";
NotificationType[NotificationType["Warning"] = 3] = "Warning";
})(NotificationType || (NotificationType = {}));
/**
* A service to create notification, It can be used from any component or guard
*/
class NotificationBarService {
constructor() {
this.onCreate = new EventEmitter();
this.onClose = new EventEmitter();
}
create(notification) {
this.onCreate.emit(notification);
}
close(notification) {
this.onClose.emit(notification);
}
}
/** @nocollapse */ NotificationBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: NotificationBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
/** @nocollapse */ NotificationBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: NotificationBarService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: NotificationBarService, decorators: [{
type: Injectable
}], ctorParameters: function () { return []; } });
const MESSAGES_CONFIG = new InjectionToken('notification-bar.messages.config');
class NotificationBarComponent {
// closeSubscription: Subscription;
constructor(notificationBarService, config) {
this.notificationBarService = notificationBarService;
this.config = config;
this.notifications = [];
this.defaults = {
message: '',
type: NotificationType.Info,
autoHide: true,
hideDelay: 3000,
isHtml: false,
allowClose: false,
hideOnHover: true
};
this.subscription = this.notificationBarService.onCreate.subscribe(this.addNotification.bind(this));
this.notificationBarService.onClose.subscribe(this.hideNotification.bind(this));
}
ngOnInit() { }
addNotification(notification) {
const newNotification = Object.assign({}, this.defaults, notification);
newNotification.typeValue = NotificationType[newNotification.type].toLowerCase();
if (this.config && this.config.messages) {
newNotification.message = this.config.messages[notification.message] || notification.message;
}
this.notifications.push(newNotification);
if (newNotification.autoHide) {
window.setTimeout(() => {
this.hideNotification(newNotification);
}, newNotification.hideDelay);
}
}
hideNotification(notification) {
const index = this.notifications.indexOf(notification);
this.notifications.splice(index, 1);
}
ngOnDestroy() {
this.subscription.unsubscribe();
// this.closeSubscription.unsubscribe();
}
hideOnHover(notification) {
if (notification.hideOnHover) {
this.hideNotification(notification);
}
}
}
/** @nocollapse */ NotificationBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: NotificationBarComponent, deps: [{ token: NotificationBarService }, { token: MESSAGES_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ NotificationBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.4", type: NotificationBarComponent, selector: "notification-bar", ngImport: i0, template: `
<div class="notifications-container">
<div *ngFor="let notification of notifications; let i = index;"
class="notification {{notification.typeValue}}"
(mouseover)="hideOnHover(notification)"
[]>
<span *ngIf="notification.isHtml" class="message" [innerHTML]="notification.message"></span>
<span *ngIf="!notification.isHtml" class="message">{{notification.message}}</span>
<span class="close-click" *ngIf="notification.allowClose" (click)="hideNotification(notification)">×</span>
</div>
</div>
`, isInline: true, styles: [":host{position:relative;display:block}.notifications-container{position:fixed;top:0;right:0;left:0;line-height:25px;width:100%;z-index:6;overflow:hidden}.notification{position:relative;text-align:center;font-size:12px;color:#fff}.message{padding:0 12px}.error{background-color:#f64747;border-bottom:1px solid #f31515}.success{background-color:#03c9a9;border-bottom:1px solid #02aa8f}.warning{background-color:#f7ca18;border-bottom:1px solid #e7ba08}.info{background-color:#0c6997;border-bottom:1px solid #0c6997}.close-click{font-size:22px;cursor:pointer;padding:10px;position:relative;top:2px;margin:0 auto}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
trigger('flyDown', [
state('in', style({
opacity: 1,
transform: 'translateY(0)'
})),
transition('void => *', [
style({
opacity: 0,
transform: 'translateY(-100%)'
}),
animate('600ms ease-in')
]),
transition('* => void', [
animate('200ms ease-out', style({
opacity: 0,
transform: 'translateY(-100%)'
}))
])
])
] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: NotificationBarComponent, decorators: [{
type: Component,
args: [{ selector: 'notification-bar', template: `
<div class="notifications-container">
<div *ngFor="let notification of notifications; let i = index;"
class="notification {{notification.typeValue}}"
(mouseover)="hideOnHover(notification)"
[]>
<span *ngIf="notification.isHtml" class="message" [innerHTML]="notification.message"></span>
<span *ngIf="!notification.isHtml" class="message">{{notification.message}}</span>
<span class="close-click" *ngIf="notification.allowClose" (click)="hideNotification(notification)">×</span>
</div>
</div>
`, animations: [
trigger('flyDown', [
state('in', style({
opacity: 1,
transform: 'translateY(0)'
})),
transition('void => *', [
style({
opacity: 0,
transform: 'translateY(-100%)'
}),
animate('600ms ease-in')
]),
transition('* => void', [
animate('200ms ease-out', style({
opacity: 0,
transform: 'translateY(-100%)'
}))
])
])
], styles: [":host{position:relative;display:block}.notifications-container{position:fixed;top:0;right:0;left:0;line-height:25px;width:100%;z-index:6;overflow:hidden}.notification{position:relative;text-align:center;font-size:12px;color:#fff}.message{padding:0 12px}.error{background-color:#f64747;border-bottom:1px solid #f31515}.success{background-color:#03c9a9;border-bottom:1px solid #02aa8f}.warning{background-color:#f7ca18;border-bottom:1px solid #e7ba08}.info{background-color:#0c6997;border-bottom:1px solid #0c6997}.close-click{font-size:22px;cursor:pointer;padding:10px;position:relative;top:2px;margin:0 auto}\n"] }]
}], ctorParameters: function () {
return [{ type: NotificationBarService }, { type: undefined, decorators: [{
type: Inject,
args: [MESSAGES_CONFIG]
}, {
type: Optional
}] }];
} });
class NotificationBarModule {
static forRoot(config) {
return {
ngModule: NotificationBarModule,
providers: [
{ provide: MESSAGES_CONFIG, useValue: config }
]
};
}
}
/** @nocollapse */ NotificationBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: NotificationBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
/** @nocollapse */ NotificationBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.4", ngImport: i0, type: NotificationBarModule, declarations: [NotificationBarComponent], imports: [CommonModule], exports: [NotificationBarComponent] });
/** @nocollapse */ NotificationBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: NotificationBarModule, providers: [NotificationBarService], imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.4", ngImport: i0, type: NotificationBarModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
],
declarations: [NotificationBarComponent],
providers: [NotificationBarService],
exports: [NotificationBarComponent]
}]
}] });
/*
* Public API Surface of ngx-notification-bar
*/
/**
* Generated bundle index. Do not edit.
*/
export { MESSAGES_CONFIG, NotificationBarComponent, NotificationBarModule, NotificationBarService, NotificationType };
//# sourceMappingURL=ngx-notification-bar.mjs.map