ngx-notification
Version:
Angular Library to display all types of notifications in a Toast Notification format. Tested on Angular 6
216 lines (205 loc) • 12.4 kB
JavaScript
import { Injectable, Component, NgModule, defineInjectable } from '@angular/core';
import { Subject } from 'rxjs';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class NgxNotificationService {
constructor() {
this.subject = new Subject();
}
/**
* @param {?} message
* @param {?} theme
* @param {?} position
* @return {?}
*/
sendMessage(message, theme, position) {
this.subject.next({
text: message,
theme: theme,
position: position
});
}
/**
* @return {?}
*/
clearMessage() {
this.subject.next();
}
/**
* @return {?}
*/
getMessage() {
return this.subject.asObservable();
}
}
NgxNotificationService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] },
];
/** @nocollapse */
NgxNotificationService.ctorParameters = () => [];
/** @nocollapse */ NgxNotificationService.ngInjectableDef = defineInjectable({ factory: function NgxNotificationService_Factory() { return new NgxNotificationService(); }, token: NgxNotificationService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class NgxNotificationComponent {
/**
* @param {?} ngxNotificationService
*/
constructor(ngxNotificationService) {
this.ngxNotificationService = ngxNotificationService;
this.message = {};
this.subscription = this.ngxNotificationService.getMessage()
.subscribe(message => {
this.show = true;
this.message = message;
console.log(this.message);
this.autoHideMessage();
});
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @return {?}
*/
ngOnDestroy() {
this.subscription.unsubscribe();
}
/**
* @return {?}
*/
autoHideMessage() {
setTimeout(() => {
this.show = false;
}, 5000);
}
}
NgxNotificationComponent.decorators = [
{ type: Component, args: [{
selector: 'lib-ngx-notification',
template: `<div *ngIf='show' class='ngx-notification {{ message.position }} {{ message.theme }} show'>{{message?.text }}</div>`,
styles: [`
.ngx-notification.dark {
background-color: #2d2d30;
border-color: #272729;
color: #c9c9c9;
}
.ngx-notification.light {
background-color: #ffffff;
border-color: #cccccc;
color: #2d2d30;
}
.ngx-notification.success {
background-color: #dff0d8;
border-color: #d0e9c6;
color: #3c763d;
}
.ngx-notification.info {
background-color: #d9edf7;
border-color: #bcdff1;
color: #31708f;
}
.ngx-notification.warning {
background-color: #fcf8e3;
border-color: #faf2cc;
color: #8a6d3b;
}
.ngx-notification.danger {
background-color: #f2dede;
border-color: #ebcccc;
color: #a94442;
}
.ngx-notification.top-left {
position: fixed;
left: 10px;
top: 10px;
}
.ngx-notification.top-right {
position: fixed;
right: 10px;
top: 10px;
}
.ngx-notification.bottom-right {
position: fixed;
right: 10px;
bottom: 10px;
}
.ngx-notification.bottom-left {
position: fixed;
left: 10px;
bottom: 10px;
}
.ngx-notification.center {
position:absolute;
top: 50%;
left: 50%;
margin-top: -9em;
margin-left: -15em;
}
.ngx-notification {
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: .25rem;
-webkit-animation: fadein 1.5s, fadeout 1.5s 3.5s;
animation: fadein 1.5s, fadeout 1.5s 3.5s;
z-index : 1;
}
/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadein {
from {opacity: 0;}
to {opacity: 1;}
}
@-webkit-keyframes fadeout {
from {opacity: 1;}
to {opacity: 0;}
}
@keyframes fadeout {
from {opacity: 1;}
to {opacity: 0;}
}
`]
},] },
];
/** @nocollapse */
NgxNotificationComponent.ctorParameters = () => [
{ type: NgxNotificationService, },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class NgxNotificationModule {
}
NgxNotificationModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
BrowserModule
],
declarations: [NgxNotificationComponent],
exports: [NgxNotificationComponent]
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
export { NgxNotificationService, NgxNotificationComponent, NgxNotificationModule };
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LW5vdGlmaWNhdGlvbi5qcy5tYXAiLCJzb3VyY2VzIjpbIm5nOi8vbmd4LW5vdGlmaWNhdGlvbi9saWIvbmd4LW5vdGlmaWNhdGlvbi5zZXJ2aWNlLnRzIiwibmc6Ly9uZ3gtbm90aWZpY2F0aW9uL2xpYi9uZ3gtbm90aWZpY2F0aW9uLmNvbXBvbmVudC50cyIsIm5nOi8vbmd4LW5vdGlmaWNhdGlvbi9saWIvbmd4LW5vdGlmaWNhdGlvbi5tb2R1bGUudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSwgU3ViamVjdH0gZnJvbSAncnhqcyc7XG5cbkBJbmplY3RhYmxlKHtcbiAgcHJvdmlkZWRJbjogJ3Jvb3QnXG59KVxuZXhwb3J0IGNsYXNzIE5neE5vdGlmaWNhdGlvblNlcnZpY2Uge1xuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgcHJpdmF0ZSBzdWJqZWN0ID0gbmV3IFN1YmplY3Q8YW55PigpO1xuXG4gIHNlbmRNZXNzYWdlKG1lc3NhZ2U6IHN0cmluZywgdGhlbWU6IHN0cmluZywgcG9zaXRpb246IHN0cmluZykge1xuICAgIHRoaXMuc3ViamVjdC5uZXh0KFxuICAgICAge1xuICAgICAgICB0ZXh0OiBtZXNzYWdlLFxuICAgICAgICB0aGVtZTogdGhlbWUsXG4gICAgICAgIHBvc2l0aW9uOiBwb3NpdGlvblxuICAgICAgfVxuICAgICk7XG4gIH1cblxuICBjbGVhck1lc3NhZ2UoKSB7XG4gICAgdGhpcy5zdWJqZWN0Lm5leHQoKTtcbiAgfVxuXG4gIGdldE1lc3NhZ2UoKTogT2JzZXJ2YWJsZTxhbnk+IHtcbiAgICByZXR1cm4gdGhpcy5zdWJqZWN0LmFzT2JzZXJ2YWJsZSgpO1xuICB9XG5cbn1cbiIsImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBPbkRlc3Ryb3kgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgTmd4Tm90aWZpY2F0aW9uU2VydmljZSB9IGZyb20gJy4vbmd4LW5vdGlmaWNhdGlvbi5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLW5neC1ub3RpZmljYXRpb24nLFxuICB0ZW1wbGF0ZTogYDxkaXYgKm5nSWY9J3Nob3cnIGNsYXNzPSduZ3gtbm90aWZpY2F0aW9uIHt7IG1lc3NhZ2UucG9zaXRpb24gfX0ge3sgbWVzc2FnZS50aGVtZSB9fSBzaG93Jz57e21lc3NhZ2U/LnRleHQgfX08L2Rpdj5gLFxuICBzdHlsZXM6IFtgXG4gIC5uZ3gtbm90aWZpY2F0aW9uLmRhcmsge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICMyZDJkMzA7XG4gICAgYm9yZGVyLWNvbG9yOiAjMjcyNzI5O1xuICAgIGNvbG9yOiAjYzljOWM5O1xuICB9XG4gIC5uZ3gtbm90aWZpY2F0aW9uLmxpZ2h0IHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmO1xuICAgIGJvcmRlci1jb2xvcjogI2NjY2NjYztcbiAgICBjb2xvcjogIzJkMmQzMDtcbiAgfVxuICAubmd4LW5vdGlmaWNhdGlvbi5zdWNjZXNzIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZGZmMGQ4O1xuICAgICAgYm9yZGVyLWNvbG9yOiAjZDBlOWM2O1xuICAgICAgY29sb3I6ICMzYzc2M2Q7XG4gIH1cbiAgLm5neC1ub3RpZmljYXRpb24uaW5mbyB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogI2Q5ZWRmNztcbiAgICBib3JkZXItY29sb3I6ICNiY2RmZjE7XG4gICAgY29sb3I6ICMzMTcwOGY7XG4gIH1cbiAgLm5neC1ub3RpZmljYXRpb24ud2FybmluZyB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogI2ZjZjhlMztcbiAgICBib3JkZXItY29sb3I6ICNmYWYyY2M7XG4gICAgY29sb3I6ICM4YTZkM2I7XG4gIH1cbiAgLm5neC1ub3RpZmljYXRpb24uZGFuZ2VyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjJkZWRlO1xuICAgIGJvcmRlci1jb2xvcjogI2ViY2NjYztcbiAgICBjb2xvcjogI2E5NDQ0MjtcbiAgfVxuICAubmd4LW5vdGlmaWNhdGlvbi50b3AtbGVmdCB7XG4gICAgcG9zaXRpb246IGZpeGVkO1xuICAgIGxlZnQ6IDEwcHg7XG4gICAgdG9wOiAxMHB4O1xuICB9XG4gIC5uZ3gtbm90aWZpY2F0aW9uLnRvcC1yaWdodCB7XG4gICAgcG9zaXRpb246IGZpeGVkO1xuICAgIHJpZ2h0OiAxMHB4O1xuICAgIHRvcDogMTBweDtcbiAgfVxuICAubmd4LW5vdGlmaWNhdGlvbi5ib3R0b20tcmlnaHQge1xuICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICByaWdodDogMTBweDtcbiAgICBib3R0b206IDEwcHg7XG4gIH1cbiAgLm5neC1ub3RpZmljYXRpb24uYm90dG9tLWxlZnQge1xuICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICBsZWZ0OiAxMHB4O1xuICAgIGJvdHRvbTogMTBweDtcbiAgfVxuICAubmd4LW5vdGlmaWNhdGlvbi5jZW50ZXIge1xuICAgIHBvc2l0aW9uOmFic29sdXRlO1xuICAgICAgdG9wOiA1MCU7XG4gICAgICBsZWZ0OiA1MCU7XG4gICAgICBtYXJnaW4tdG9wOiAtOWVtO1xuICAgICAgbWFyZ2luLWxlZnQ6IC0xNWVtO1xuICB9XG4gIC5uZ3gtbm90aWZpY2F0aW9uIHtcbiAgICBwYWRkaW5nOiAuNzVyZW0gMS4yNXJlbTtcbiAgICBtYXJnaW4tYm90dG9tOiAxcmVtO1xuICAgIGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuICAgIGJvcmRlci1yYWRpdXM6IC4yNXJlbTtcbiAgICAtd2Via2l0LWFuaW1hdGlvbjogZmFkZWluIDEuNXMsIGZhZGVvdXQgMS41cyAzLjVzO1xuICAgIGFuaW1hdGlvbjogZmFkZWluIDEuNXMsIGZhZGVvdXQgMS41cyAzLjVzO1xuICAgIHotaW5kZXggOiAxO1xuICB9XG5cbiAgLyogQW5pbWF0aW9ucyB0byBmYWRlIHRoZSBzbmFja2JhciBpbiBhbmQgb3V0ICovXG4gIEAtd2Via2l0LWtleWZyYW1lcyBmYWRlaW4ge1xuICAgIGZyb20ge29wYWNpdHk6IDA7fVxuICAgIHRvIHtvcGFjaXR5OiAxO31cbiAgfVxuXG4gIEBrZXlmcmFtZXMgZmFkZWluIHtcbiAgICBmcm9tIHtvcGFjaXR5OiAwO31cbiAgICB0byB7b3BhY2l0eTogMTt9XG4gIH1cblxuICBALXdlYmtpdC1rZXlmcmFtZXMgZmFkZW91dCB7XG4gICAgZnJvbSB7b3BhY2l0eTogMTt9XG4gICAgdG8ge29wYWNpdHk6IDA7fVxuICB9XG5cbiAgQGtleWZyYW1lcyBmYWRlb3V0IHtcbiAgICBmcm9tIHtvcGFjaXR5OiAxO31cbiAgICB0byB7b3BhY2l0eTogMDt9XG4gIH1cbiAgYF1cbn0pXG5leHBvcnQgY2xhc3MgTmd4Tm90aWZpY2F0aW9uQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuXG4gIHNob3c7XG4gIG1lc3NhZ2U6IGFueSA9IHt9O1xuICBzdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIG5neE5vdGlmaWNhdGlvblNlcnZpY2U6IE5neE5vdGlmaWNhdGlvblNlcnZpY2UpIHtcbiAgICB0aGlzLnN1YnNjcmlwdGlvbiA9IHRoaXMubmd4Tm90aWZpY2F0aW9uU2VydmljZS5nZXRNZXNzYWdlKClcbiAgICAuc3Vic2NyaWJlKFxuICAgICAgbWVzc2FnZSA9PiB7XG4gICAgICAgIHRoaXMuc2hvdyA9IHRydWU7XG4gICAgICAgIHRoaXMubWVzc2FnZSA9IG1lc3NhZ2U7XG4gICAgICAgIGNvbnNvbGUubG9nKHRoaXMubWVzc2FnZSk7XG4gICAgICAgIHRoaXMuYXV0b0hpZGVNZXNzYWdlKCk7XG4gICAgICB9XG4gICAgKTtcbiAgfVxuXG4gIG5nT25Jbml0KCkge31cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLnN1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICB9XG5cbiAgYXV0b0hpZGVNZXNzYWdlKCkge1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy5zaG93ID0gZmFsc2U7XG4gIH0sIDUwMDApO1xuICB9XG5cbn1cbiIsImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQnJvd3Nlck1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xuaW1wb3J0IHsgTmd4Tm90aWZpY2F0aW9uQ29tcG9uZW50IH0gZnJvbSAnLi9uZ3gtbm90aWZpY2F0aW9uLmNvbXBvbmVudCc7XG5cbkBOZ01vZHVsZSh7XG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gICAgQnJvd3Nlck1vZHVsZVxuICBdLFxuICBkZWNsYXJhdGlvbnM6IFtOZ3hOb3RpZmljYXRpb25Db21wb25lbnRdLFxuICBleHBvcnRzOiBbTmd4Tm90aWZpY2F0aW9uQ29tcG9uZW50XVxufSlcbmV4cG9ydCBjbGFzcyBOZ3hOb3RpZmljYXRpb25Nb2R1bGUgeyB9XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUE7SUFRRTt1QkFFa0IsSUFBSSxPQUFPLEVBQU87S0FGbkI7Ozs7Ozs7SUFJakIsV0FBVyxDQUFDLE9BQWUsRUFBRSxLQUFhLEVBQUUsUUFBZ0I7UUFDMUQsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQ2Y7WUFDRSxJQUFJLEVBQUUsT0FBTztZQUNiLEtBQUssRUFBRSxLQUFLO1lBQ1osUUFBUSxFQUFFLFFBQVE7U0FDbkIsQ0FDRixDQUFDO0tBQ0g7Ozs7SUFFRCxZQUFZO1FBQ1YsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztLQUNyQjs7OztJQUVELFVBQVU7UUFDUixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsWUFBWSxFQUFFLENBQUM7S0FDcEM7OztZQXpCRixVQUFVLFNBQUM7Z0JBQ1YsVUFBVSxFQUFFLE1BQU07YUFDbkI7Ozs7Ozs7Ozs7QUNMRDs7OztJQXVHRSxZQUFvQixzQkFBOEM7UUFBOUMsMkJBQXNCLEdBQXRCLHNCQUFzQixDQUF3Qjt1QkFIbkQsRUFBRTtRQUlmLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLHNCQUFzQixDQUFDLFVBQVUsRUFBRTthQUMzRCxTQUFTLENBQ1IsT0FBTztZQUNMLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO1lBQ2pCLElBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDO1lBQ3ZCLE9BQU8sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1lBQzFCLElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQztTQUN4QixDQUNGLENBQUM7S0FDSDs7OztJQUVELFFBQVEsTUFBSzs7OztJQUViLFdBQVc7UUFDVCxJQUFJLENBQUMsWUFBWSxDQUFDLFdBQVcsRUFBRSxDQUFDO0tBQ2pDOzs7O0lBRUQsZUFBZTtRQUNiLFVBQVUsQ0FBQztZQUNULElBQUksQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDO1NBQ3JCLEVBQUUsSUFBSSxDQUFDLENBQUM7S0FDUjs7O1lBekhGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsc0JBQXNCO2dCQUNoQyxRQUFRLEVBQUUscUhBQXFIO2dCQUMvSCxNQUFNLEVBQUUsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXdGUixDQUFDO2FBQ0g7Ozs7WUE5RlEsc0JBQXNCOzs7Ozs7O0FDRi9COzs7WUFLQyxRQUFRLFNBQUM7Z0JBQ1IsT0FBTyxFQUFFO29CQUNQLFlBQVk7b0JBQ1osYUFBYTtpQkFDZDtnQkFDRCxZQUFZLEVBQUUsQ0FBQyx3QkFBd0IsQ0FBQztnQkFDeEMsT0FBTyxFQUFFLENBQUMsd0JBQXdCLENBQUM7YUFDcEM7Ozs7Ozs7Ozs7Ozs7OzsifQ==