ngx-toast-notifier
Version:
This is a nofitications library for Angular
380 lines (360 loc) • 16.5 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, Injectable, Inject, Component, Input, NgModule } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { trigger, transition, style, animate } from '@angular/animations';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
const DefaultGlobalConfig = {
timeOut: 3000,
bgColors: {
success: '#54a254',
warning: '#e09f26',
info: '#1976d2',
danger: '#da2d2d',
}
};
const NOTIFICATION_CONFIG = new InjectionToken('NotificationConfig');
class NgxToastNotifierService {
constructor(config) {
this.$notifications = new BehaviorSubject([]);
this.$notificationsObs = this.$notifications.asObservable();
this.defaultConfig = config;
}
get notifications() {
return this.$notifications.value;
}
onShowNotification(notification) {
this.$notifications.next([
...this.notifications,
Object.assign({}, notification),
]);
setTimeout(() => {
this.onRemove();
}, this.defaultConfig.config.timeOut ? this.defaultConfig.config.timeOut : this.defaultConfig.default.timeOut);
}
onRemove() {
this.notifications.shift();
this.$notifications.next(this.notifications);
}
}
NgxToastNotifierService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: NgxToastNotifierService, deps: [{ token: NOTIFICATION_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
NgxToastNotifierService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: NgxToastNotifierService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: NgxToastNotifierService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: function () {
return [{ type: undefined, decorators: [{
type: Inject,
args: [NOTIFICATION_CONFIG]
}] }];
} });
class NgxToastService {
constructor(ngxToastService) {
this.ngxToastService = ngxToastService;
}
onSuccess(title, text) {
var _a;
const notification = {
text,
title,
icon: 'success',
bgColor: ((_a = this.ngxToastService.defaultConfig.config.bgColors) === null || _a === void 0 ? void 0 : _a.success)
? this.ngxToastService.defaultConfig.config.bgColors.success
: this.ngxToastService.defaultConfig.default.bgColors.success,
};
this.ngxToastService.onShowNotification(notification);
}
onInfo(title, text) {
var _a;
const notification = {
text,
title,
icon: 'info',
bgColor: ((_a = this.ngxToastService.defaultConfig.config.bgColors) === null || _a === void 0 ? void 0 : _a.info)
? this.ngxToastService.defaultConfig.config.bgColors.info
: this.ngxToastService.defaultConfig.default.bgColors.info,
};
this.ngxToastService.onShowNotification(notification);
}
onWarning(title, text) {
var _a;
const notification = {
text,
title,
icon: 'warning',
bgColor: ((_a = this.ngxToastService.defaultConfig.config.bgColors) === null || _a === void 0 ? void 0 : _a.warning)
? this.ngxToastService.defaultConfig.config.bgColors.warning
: this.ngxToastService.defaultConfig.default.bgColors.warning,
};
this.ngxToastService.onShowNotification(notification);
}
onDanger(title, text) {
var _a;
const notification = {
text,
title,
icon: 'danger',
bgColor: ((_a = this.ngxToastService.defaultConfig.config.bgColors) === null || _a === void 0 ? void 0 : _a.danger)
? this.ngxToastService.defaultConfig.config.bgColors.danger
: this.ngxToastService.defaultConfig.default.bgColors.danger,
};
this.ngxToastService.onShowNotification(notification);
}
}
NgxToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: NgxToastService, deps: [{ token: NgxToastNotifierService }], target: i0.ɵɵFactoryTarget.Injectable });
NgxToastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: NgxToastService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: NgxToastService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: NgxToastNotifierService }]; } });
const onEnterLeave = trigger('onEnterLeave', [
transition(':enter', [
style({ opacity: '0' }),
animate(500, style({ opacity: '1' })),
]),
transition(':leave', [
style({ opacity: '1' }),
animate(500, style({ opacity: '0' })),
]),
]);
class NotificationComponent {
constructor(notificationSvc) {
this.notificationSvc = notificationSvc;
}
}
NotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: NotificationComponent, deps: [{ token: NgxToastNotifierService }], target: i0.ɵɵFactoryTarget.Component });
NotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: NotificationComponent, selector: "ngx-notification", inputs: { notificationData: "notificationData" }, ngImport: i0, template: `
<div
class="wrap-notification"
[ngStyle]="{'background-color' : notificationData.bgColor}"
>
<div class="icon-start">
<svg viewBox="0 0 24 24" *ngIf="notificationData.icon === 'success'">
<path
fill="currentColor"
d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
/>
</svg>
<svg viewBox="0 0 24 24" *ngIf="notificationData.icon === 'info'">
<path
fill="currentColor"
d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
/>
</svg>
<svg viewBox="0 0 24 24" *ngIf="notificationData.icon === 'warning'">
<path
fill="currentColor"
d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"
/>
</svg>
<svg viewBox="0 0 24 24" *ngIf="notificationData.icon === 'danger'">
<path
fill="currentColor"
d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z"
/>
</svg>
</div>
<div class="wrap-texts">
<h3>{{ notificationData.title }}</h3>
<p>{{ notificationData.text }}</p>
</div>
</div>
`, isInline: true, styles: [":host{cursor:default}.wrap-notification{display:flex;padding:10px 15px;width:100%;border-radius:5px;margin-bottom:8px;color:#fff;min-height:50px}.icon-start{height:30px;width:30px;flex:0 0 30px;margin-right:5px}.wrap-texts{flex:auto}.wrap-texts h3{font-size:16px;width:100%;margin:0}.wrap-texts p{font-size:14px;width:100%;margin:0}.wrap-notification:hover{box-shadow:0 10px 70px -3px #0000001a}\n"], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: NotificationComponent, decorators: [{
type: Component,
args: [{
selector: 'ngx-notification',
template: `
<div
class="wrap-notification"
[ngStyle]="{'background-color' : notificationData.bgColor}"
>
<div class="icon-start">
<svg viewBox="0 0 24 24" *ngIf="notificationData.icon === 'success'">
<path
fill="currentColor"
d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
/>
</svg>
<svg viewBox="0 0 24 24" *ngIf="notificationData.icon === 'info'">
<path
fill="currentColor"
d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
/>
</svg>
<svg viewBox="0 0 24 24" *ngIf="notificationData.icon === 'warning'">
<path
fill="currentColor"
d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"
/>
</svg>
<svg viewBox="0 0 24 24" *ngIf="notificationData.icon === 'danger'">
<path
fill="currentColor"
d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z"
/>
</svg>
</div>
<div class="wrap-texts">
<h3>{{ notificationData.title }}</h3>
<p>{{ notificationData.text }}</p>
</div>
</div>
`,
styles: [
`
:host{
cursor: default;
}
.wrap-notification {
display: flex;
padding: 10px 15px;
width: 100%;
border-radius: 5px;
margin-bottom: 8px;
color: #ffffff;
min-height: 50px;
}
.icon-start {
height: 30px;
width: 30px;
flex: 0 0 30px;
margin-right: 5px;
}
.wrap-texts {
flex: auto;
}
.wrap-texts h3 {
font-size: 16px;
width: 100%;
margin: 0;
}
.wrap-texts p {
font-size: 14px;
width: 100%;
margin: 0;
}
.wrap-notification:hover {
box-shadow: 0px 10px 70px -3px rgba(0, 0, 0, 0.1);
}
`,
],
}]
}], ctorParameters: function () { return [{ type: NgxToastNotifierService }]; }, propDecorators: { notificationData: [{
type: Input
}] } });
class NgxToastNotifierComponent {
constructor(notificationSvc) {
this.notificationSvc = notificationSvc;
}
ngOnInit() {
this.$notifications = this.notificationSvc.$notificationsObs;
}
}
NgxToastNotifierComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: NgxToastNotifierComponent, deps: [{ token: NgxToastNotifierService }], target: i0.ɵɵFactoryTarget.Component });
NgxToastNotifierComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: NgxToastNotifierComponent, selector: "ngx-toast-notifier", ngImport: i0, template: `
<div class="wrap-notifications">
<ngx-notification
[notificationData]="item"
*ngFor="let item of $notifications | async"
@onEnterLeave
>
</ngx-notification>
</div>
`, isInline: true, styles: [":host{display:flex;position:fixed;width:300px;height:auto;max-height:100vh;overflow:auto;top:80px;right:15px;z-index:99}.wrap-notifications{position:relative;width:100%;overflow:hidden}@media only screen and (max-width: 500px){:host{width:95%;top:20px;left:0;right:0;bottom:0;margin:auto}}\n"], components: [{ type: NotificationComponent, selector: "ngx-notification", inputs: ["notificationData"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2.AsyncPipe }, animations: [onEnterLeave] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: NgxToastNotifierComponent, decorators: [{
type: Component,
args: [{
selector: 'ngx-toast-notifier',
template: `
<div class="wrap-notifications">
<ngx-notification
[notificationData]="item"
*ngFor="let item of $notifications | async"
@onEnterLeave
>
</ngx-notification>
</div>
`,
styles: [
`
:host {
display: flex;
position: fixed;
width: 300px;
height: auto;
max-height: 100vh;
overflow: auto;
top: 80px;
right: 15px;
z-index: 99;
}
.wrap-notifications {
position: relative;
width: 100%;
overflow: hidden;
}
@media only screen and (max-width: 500px) {
:host {
width: 95%;
top: 20px;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
}
`,
],
animations: [onEnterLeave],
}]
}], ctorParameters: function () { return [{ type: NgxToastNotifierService }]; } });
class NgxToastNotifierModule {
static forRoot(config = {}) {
return {
ngModule: NgxToastNotifierModule,
providers: [
{
provide: NOTIFICATION_CONFIG,
useValue: {
default: DefaultGlobalConfig,
config
}
}
]
};
}
}
NgxToastNotifierModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: NgxToastNotifierModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxToastNotifierModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: NgxToastNotifierModule, declarations: [NgxToastNotifierComponent,
NotificationComponent], imports: [CommonModule], exports: [NgxToastNotifierComponent] });
NgxToastNotifierModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: NgxToastNotifierModule, imports: [[
CommonModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: NgxToastNotifierModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NgxToastNotifierComponent,
NotificationComponent
],
imports: [
CommonModule
],
exports: [
NgxToastNotifierComponent
]
}]
}] });
/*
* Public API Surface of ngx-toast-notifier
*/
/**
* Generated bundle index. Do not edit.
*/
export { DefaultGlobalConfig, NOTIFICATION_CONFIG, NgxToastNotifierComponent, NgxToastNotifierModule, NgxToastNotifierService, NgxToastService, NotificationComponent, onEnterLeave };
//# sourceMappingURL=ngx-toast-notifier.mjs.map