ngx-notification
Version:
Angular Library to display all types of notifications in a Toast Notification format. Tested on Angular 6
158 lines (153 loc) • 9.14 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
import { Component } from '@angular/core';
import { NgxNotificationService } from './ngx-notification.service';
export 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, },
];
function NgxNotificationComponent_tsickle_Closure_declarations() {
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
NgxNotificationComponent.decorators;
/**
* @nocollapse
* @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
*/
NgxNotificationComponent.ctorParameters;
/** @type {?} */
NgxNotificationComponent.prototype.show;
/** @type {?} */
NgxNotificationComponent.prototype.message;
/** @type {?} */
NgxNotificationComponent.prototype.subscription;
/** @type {?} */
NgxNotificationComponent.prototype.ngxNotificationService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LW5vdGlmaWNhdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtbm90aWZpY2F0aW9uLyIsInNvdXJjZXMiOlsibGliL25neC1ub3RpZmljYXRpb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUU3RCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQStGcEUsTUFBTTs7OztJQU1KLFlBQW9CLHNCQUE4QztRQUE5QywyQkFBc0IsR0FBdEIsc0JBQXNCLENBQXdCO3VCQUhuRCxFQUFFO1FBSWYsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsc0JBQXNCLENBQUMsVUFBVSxFQUFFO2FBQzNELFNBQVMsQ0FDUixPQUFPLENBQUMsRUFBRTtZQUNSLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO1lBQ2pCLElBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDO1lBQ3ZCLE9BQU8sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1lBQzFCLElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQztTQUN4QixDQUNGLENBQUM7S0FDSDs7OztJQUVELFFBQVEsTUFBSzs7OztJQUViLFdBQVc7UUFDVCxJQUFJLENBQUMsWUFBWSxDQUFDLFdBQVcsRUFBRSxDQUFDO0tBQ2pDOzs7O0lBRUQsZUFBZTtRQUNiLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDZCxJQUFJLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztTQUNyQixFQUFFLElBQUksQ0FBQyxDQUFDO0tBQ1I7OztZQXpIRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLHNCQUFzQjtnQkFDaEMsUUFBUSxFQUFFLHFIQUFxSDtnQkFDL0gsTUFBTSxFQUFFLENBQUM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F3RlIsQ0FBQzthQUNIOzs7O1lBOUZRLHNCQUFzQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBPbkRlc3Ryb3kgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgTmd4Tm90aWZpY2F0aW9uU2VydmljZSB9IGZyb20gJy4vbmd4LW5vdGlmaWNhdGlvbi5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLW5neC1ub3RpZmljYXRpb24nLFxuICB0ZW1wbGF0ZTogYDxkaXYgKm5nSWY9J3Nob3cnIGNsYXNzPSduZ3gtbm90aWZpY2F0aW9uIHt7IG1lc3NhZ2UucG9zaXRpb24gfX0ge3sgbWVzc2FnZS50aGVtZSB9fSBzaG93Jz57e21lc3NhZ2U/LnRleHQgfX08L2Rpdj5gLFxuICBzdHlsZXM6IFtgXG4gIC5uZ3gtbm90aWZpY2F0aW9uLmRhcmsge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICMyZDJkMzA7XG4gICAgYm9yZGVyLWNvbG9yOiAjMjcyNzI5O1xuICAgIGNvbG9yOiAjYzljOWM5O1xuICB9XG4gIC5uZ3gtbm90aWZpY2F0aW9uLmxpZ2h0IHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmO1xuICAgIGJvcmRlci1jb2xvcjogI2NjY2NjYztcbiAgICBjb2xvcjogIzJkMmQzMDtcbiAgfVxuICAubmd4LW5vdGlmaWNhdGlvbi5zdWNjZXNzIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZGZmMGQ4O1xuICAgICAgYm9yZGVyLWNvbG9yOiAjZDBlOWM2O1xuICAgICAgY29sb3I6ICMzYzc2M2Q7XG4gIH1cbiAgLm5neC1ub3RpZmljYXRpb24uaW5mbyB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogI2Q5ZWRmNztcbiAgICBib3JkZXItY29sb3I6ICNiY2RmZjE7XG4gICAgY29sb3I6ICMzMTcwOGY7XG4gIH1cbiAgLm5neC1ub3RpZmljYXRpb24ud2FybmluZyB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogI2ZjZjhlMztcbiAgICBib3JkZXItY29sb3I6ICNmYWYyY2M7XG4gICAgY29sb3I6ICM4YTZkM2I7XG4gIH1cbiAgLm5neC1ub3RpZmljYXRpb24uZGFuZ2VyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjJkZWRlO1xuICAgIGJvcmRlci1jb2xvcjogI2ViY2NjYztcbiAgICBjb2xvcjogI2E5NDQ0MjtcbiAgfVxuICAubmd4LW5vdGlmaWNhdGlvbi50b3AtbGVmdCB7XG4gICAgcG9zaXRpb246IGZpeGVkO1xuICAgIGxlZnQ6IDEwcHg7XG4gICAgdG9wOiAxMHB4O1xuICB9XG4gIC5uZ3gtbm90aWZpY2F0aW9uLnRvcC1yaWdodCB7XG4gICAgcG9zaXRpb246IGZpeGVkO1xuICAgIHJpZ2h0OiAxMHB4O1xuICAgIHRvcDogMTBweDtcbiAgfVxuICAubmd4LW5vdGlmaWNhdGlvbi5ib3R0b20tcmlnaHQge1xuICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICByaWdodDogMTBweDtcbiAgICBib3R0b206IDEwcHg7XG4gIH1cbiAgLm5neC1ub3RpZmljYXRpb24uYm90dG9tLWxlZnQge1xuICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICBsZWZ0OiAxMHB4O1xuICAgIGJvdHRvbTogMTBweDtcbiAgfVxuICAubmd4LW5vdGlmaWNhdGlvbi5jZW50ZXIge1xuICAgIHBvc2l0aW9uOmFic29sdXRlO1xuICAgICAgdG9wOiA1MCU7XG4gICAgICBsZWZ0OiA1MCU7XG4gICAgICBtYXJnaW4tdG9wOiAtOWVtO1xuICAgICAgbWFyZ2luLWxlZnQ6IC0xNWVtO1xuICB9XG4gIC5uZ3gtbm90aWZpY2F0aW9uIHtcbiAgICBwYWRkaW5nOiAuNzVyZW0gMS4yNXJlbTtcbiAgICBtYXJnaW4tYm90dG9tOiAxcmVtO1xuICAgIGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuICAgIGJvcmRlci1yYWRpdXM6IC4yNXJlbTtcbiAgICAtd2Via2l0LWFuaW1hdGlvbjogZmFkZWluIDEuNXMsIGZhZGVvdXQgMS41cyAzLjVzO1xuICAgIGFuaW1hdGlvbjogZmFkZWluIDEuNXMsIGZhZGVvdXQgMS41cyAzLjVzO1xuICAgIHotaW5kZXggOiAxO1xuICB9XG5cbiAgLyogQW5pbWF0aW9ucyB0byBmYWRlIHRoZSBzbmFja2JhciBpbiBhbmQgb3V0ICovXG4gIEAtd2Via2l0LWtleWZyYW1lcyBmYWRlaW4ge1xuICAgIGZyb20ge29wYWNpdHk6IDA7fVxuICAgIHRvIHtvcGFjaXR5OiAxO31cbiAgfVxuXG4gIEBrZXlmcmFtZXMgZmFkZWluIHtcbiAgICBmcm9tIHtvcGFjaXR5OiAwO31cbiAgICB0byB7b3BhY2l0eTogMTt9XG4gIH1cblxuICBALXdlYmtpdC1rZXlmcmFtZXMgZmFkZW91dCB7XG4gICAgZnJvbSB7b3BhY2l0eTogMTt9XG4gICAgdG8ge29wYWNpdHk6IDA7fVxuICB9XG5cbiAgQGtleWZyYW1lcyBmYWRlb3V0IHtcbiAgICBmcm9tIHtvcGFjaXR5OiAxO31cbiAgICB0byB7b3BhY2l0eTogMDt9XG4gIH1cbiAgYF1cbn0pXG5leHBvcnQgY2xhc3MgTmd4Tm90aWZpY2F0aW9uQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuXG4gIHNob3c7XG4gIG1lc3NhZ2U6IGFueSA9IHt9O1xuICBzdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIG5neE5vdGlmaWNhdGlvblNlcnZpY2U6IE5neE5vdGlmaWNhdGlvblNlcnZpY2UpIHtcbiAgICB0aGlzLnN1YnNjcmlwdGlvbiA9IHRoaXMubmd4Tm90aWZpY2F0aW9uU2VydmljZS5nZXRNZXNzYWdlKClcbiAgICAuc3Vic2NyaWJlKFxuICAgICAgbWVzc2FnZSA9PiB7XG4gICAgICAgIHRoaXMuc2hvdyA9IHRydWU7XG4gICAgICAgIHRoaXMubWVzc2FnZSA9IG1lc3NhZ2U7XG4gICAgICAgIGNvbnNvbGUubG9nKHRoaXMubWVzc2FnZSk7XG4gICAgICAgIHRoaXMuYXV0b0hpZGVNZXNzYWdlKCk7XG4gICAgICB9XG4gICAgKTtcbiAgfVxuXG4gIG5nT25Jbml0KCkge31cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLnN1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICB9XG5cbiAgYXV0b0hpZGVNZXNzYWdlKCkge1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy5zaG93ID0gZmFsc2U7XG4gIH0sIDUwMDApO1xuICB9XG5cbn1cbiJdfQ==