ngx-notification
Version:
Angular Library to display all types of notifications in a Toast Notification format. Tested on Angular 6
80 lines (79 loc) • 9.62 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
import { Component } from '@angular/core';
import { NgxNotificationService } from './ngx-notification.service';
var NgxNotificationComponent = /** @class */ (function () {
function NgxNotificationComponent(ngxNotificationService) {
var _this = this;
this.ngxNotificationService = ngxNotificationService;
this.message = {};
this.subscription = this.ngxNotificationService.getMessage()
.subscribe(function (message) {
_this.show = true;
_this.message = message;
console.log(_this.message);
_this.autoHideMessage();
});
}
/**
* @return {?}
*/
NgxNotificationComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () { };
/**
* @return {?}
*/
NgxNotificationComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.subscription.unsubscribe();
};
/**
* @return {?}
*/
NgxNotificationComponent.prototype.autoHideMessage = /**
* @return {?}
*/
function () {
var _this = this;
setTimeout(function () {
_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: ["\n .ngx-notification.dark {\n background-color: #2d2d30;\n border-color: #272729;\n color: #c9c9c9;\n }\n .ngx-notification.light {\n background-color: #ffffff;\n border-color: #cccccc;\n color: #2d2d30;\n }\n .ngx-notification.success {\n background-color: #dff0d8;\n border-color: #d0e9c6;\n color: #3c763d;\n }\n .ngx-notification.info {\n background-color: #d9edf7;\n border-color: #bcdff1;\n color: #31708f;\n }\n .ngx-notification.warning {\n background-color: #fcf8e3;\n border-color: #faf2cc;\n color: #8a6d3b;\n }\n .ngx-notification.danger {\n background-color: #f2dede;\n border-color: #ebcccc;\n color: #a94442;\n }\n .ngx-notification.top-left {\n position: fixed;\n left: 10px;\n top: 10px;\n }\n .ngx-notification.top-right {\n position: fixed;\n right: 10px;\n top: 10px;\n }\n .ngx-notification.bottom-right {\n position: fixed;\n right: 10px;\n bottom: 10px;\n }\n .ngx-notification.bottom-left {\n position: fixed;\n left: 10px;\n bottom: 10px;\n }\n .ngx-notification.center {\n position:absolute;\n top: 50%;\n left: 50%;\n margin-top: -9em;\n margin-left: -15em;\n }\n .ngx-notification {\n padding: .75rem 1.25rem;\n margin-bottom: 1rem;\n border: 1px solid transparent;\n border-radius: .25rem;\n -webkit-animation: fadein 1.5s, fadeout 1.5s 3.5s;\n animation: fadein 1.5s, fadeout 1.5s 3.5s;\n z-index : 1;\n }\n\n /* Animations to fade the snackbar in and out */\n @-webkit-keyframes fadein {\n from {opacity: 0;}\n to {opacity: 1;}\n }\n\n @keyframes fadein {\n from {opacity: 0;}\n to {opacity: 1;}\n }\n\n @-webkit-keyframes fadeout {\n from {opacity: 1;}\n to {opacity: 0;}\n }\n\n @keyframes fadeout {\n from {opacity: 1;}\n to {opacity: 0;}\n }\n "]
},] },
];
/** @nocollapse */
NgxNotificationComponent.ctorParameters = function () { return [
{ type: NgxNotificationService, },
]; };
return NgxNotificationComponent;
}());
export { NgxNotificationComponent };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LW5vdGlmaWNhdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtbm90aWZpY2F0aW9uLyIsInNvdXJjZXMiOlsibGliL25neC1ub3RpZmljYXRpb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUU3RCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQzs7SUFxR2xFLGtDQUFvQixzQkFBOEM7UUFBbEUsaUJBVUM7UUFWbUIsMkJBQXNCLEdBQXRCLHNCQUFzQixDQUF3Qjt1QkFIbkQsRUFBRTtRQUlmLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLHNCQUFzQixDQUFDLFVBQVUsRUFBRTthQUMzRCxTQUFTLENBQ1IsVUFBQSxPQUFPO1lBQ0wsS0FBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7WUFDakIsS0FBSSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUM7WUFDdkIsT0FBTyxDQUFDLEdBQUcsQ0FBQyxLQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7WUFDMUIsS0FBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1NBQ3hCLENBQ0YsQ0FBQztLQUNIOzs7O0lBRUQsMkNBQVE7OztJQUFSLGVBQWE7Ozs7SUFFYiw4Q0FBVzs7O0lBQVg7UUFDRSxJQUFJLENBQUMsWUFBWSxDQUFDLFdBQVcsRUFBRSxDQUFDO0tBQ2pDOzs7O0lBRUQsa0RBQWU7OztJQUFmO1FBQUEsaUJBSUM7UUFIQyxVQUFVLENBQUM7WUFDVCxLQUFJLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztTQUNyQixFQUFFLElBQUksQ0FBQyxDQUFDO0tBQ1I7O2dCQXpIRixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLHNCQUFzQjtvQkFDaEMsUUFBUSxFQUFFLHFIQUFxSDtvQkFDL0gsTUFBTSxFQUFFLENBQUMscTFEQXdGUixDQUFDO2lCQUNIOzs7O2dCQTlGUSxzQkFBc0I7O21DQUYvQjs7U0FpR2Esd0JBQXdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIE9uRGVzdHJveSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBOZ3hOb3RpZmljYXRpb25TZXJ2aWNlIH0gZnJvbSAnLi9uZ3gtbm90aWZpY2F0aW9uLnNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsaWItbmd4LW5vdGlmaWNhdGlvbicsXG4gIHRlbXBsYXRlOiBgPGRpdiAqbmdJZj0nc2hvdycgY2xhc3M9J25neC1ub3RpZmljYXRpb24ge3sgbWVzc2FnZS5wb3NpdGlvbiB9fSB7eyBtZXNzYWdlLnRoZW1lIH19IHNob3cnPnt7bWVzc2FnZT8udGV4dCB9fTwvZGl2PmAsXG4gIHN0eWxlczogW2BcbiAgLm5neC1ub3RpZmljYXRpb24uZGFyayB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogIzJkMmQzMDtcbiAgICBib3JkZXItY29sb3I6ICMyNzI3Mjk7XG4gICAgY29sb3I6ICNjOWM5Yzk7XG4gIH1cbiAgLm5neC1ub3RpZmljYXRpb24ubGlnaHQge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7XG4gICAgYm9yZGVyLWNvbG9yOiAjY2NjY2NjO1xuICAgIGNvbG9yOiAjMmQyZDMwO1xuICB9XG4gIC5uZ3gtbm90aWZpY2F0aW9uLnN1Y2Nlc3Mge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICNkZmYwZDg7XG4gICAgICBib3JkZXItY29sb3I6ICNkMGU5YzY7XG4gICAgICBjb2xvcjogIzNjNzYzZDtcbiAgfVxuICAubmd4LW5vdGlmaWNhdGlvbi5pbmZvIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZDllZGY3O1xuICAgIGJvcmRlci1jb2xvcjogI2JjZGZmMTtcbiAgICBjb2xvcjogIzMxNzA4ZjtcbiAgfVxuICAubmd4LW5vdGlmaWNhdGlvbi53YXJuaW5nIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmNmOGUzO1xuICAgIGJvcmRlci1jb2xvcjogI2ZhZjJjYztcbiAgICBjb2xvcjogIzhhNmQzYjtcbiAgfVxuICAubmd4LW5vdGlmaWNhdGlvbi5kYW5nZXIge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICNmMmRlZGU7XG4gICAgYm9yZGVyLWNvbG9yOiAjZWJjY2NjO1xuICAgIGNvbG9yOiAjYTk0NDQyO1xuICB9XG4gIC5uZ3gtbm90aWZpY2F0aW9uLnRvcC1sZWZ0IHtcbiAgICBwb3NpdGlvbjogZml4ZWQ7XG4gICAgbGVmdDogMTBweDtcbiAgICB0b3A6IDEwcHg7XG4gIH1cbiAgLm5neC1ub3RpZmljYXRpb24udG9wLXJpZ2h0IHtcbiAgICBwb3NpdGlvbjogZml4ZWQ7XG4gICAgcmlnaHQ6IDEwcHg7XG4gICAgdG9wOiAxMHB4O1xuICB9XG4gIC5uZ3gtbm90aWZpY2F0aW9uLmJvdHRvbS1yaWdodCB7XG4gICAgcG9zaXRpb246IGZpeGVkO1xuICAgIHJpZ2h0OiAxMHB4O1xuICAgIGJvdHRvbTogMTBweDtcbiAgfVxuICAubmd4LW5vdGlmaWNhdGlvbi5ib3R0b20tbGVmdCB7XG4gICAgcG9zaXRpb246IGZpeGVkO1xuICAgIGxlZnQ6IDEwcHg7XG4gICAgYm90dG9tOiAxMHB4O1xuICB9XG4gIC5uZ3gtbm90aWZpY2F0aW9uLmNlbnRlciB7XG4gICAgcG9zaXRpb246YWJzb2x1dGU7XG4gICAgICB0b3A6IDUwJTtcbiAgICAgIGxlZnQ6IDUwJTtcbiAgICAgIG1hcmdpbi10b3A6IC05ZW07XG4gICAgICBtYXJnaW4tbGVmdDogLTE1ZW07XG4gIH1cbiAgLm5neC1ub3RpZmljYXRpb24ge1xuICAgIHBhZGRpbmc6IC43NXJlbSAxLjI1cmVtO1xuICAgIG1hcmdpbi1ib3R0b206IDFyZW07XG4gICAgYm9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG4gICAgYm9yZGVyLXJhZGl1czogLjI1cmVtO1xuICAgIC13ZWJraXQtYW5pbWF0aW9uOiBmYWRlaW4gMS41cywgZmFkZW91dCAxLjVzIDMuNXM7XG4gICAgYW5pbWF0aW9uOiBmYWRlaW4gMS41cywgZmFkZW91dCAxLjVzIDMuNXM7XG4gICAgei1pbmRleCA6IDE7XG4gIH1cblxuICAvKiBBbmltYXRpb25zIHRvIGZhZGUgdGhlIHNuYWNrYmFyIGluIGFuZCBvdXQgKi9cbiAgQC13ZWJraXQta2V5ZnJhbWVzIGZhZGVpbiB7XG4gICAgZnJvbSB7b3BhY2l0eTogMDt9XG4gICAgdG8ge29wYWNpdHk6IDE7fVxuICB9XG5cbiAgQGtleWZyYW1lcyBmYWRlaW4ge1xuICAgIGZyb20ge29wYWNpdHk6IDA7fVxuICAgIHRvIHtvcGFjaXR5OiAxO31cbiAgfVxuXG4gIEAtd2Via2l0LWtleWZyYW1lcyBmYWRlb3V0IHtcbiAgICBmcm9tIHtvcGFjaXR5OiAxO31cbiAgICB0byB7b3BhY2l0eTogMDt9XG4gIH1cblxuICBAa2V5ZnJhbWVzIGZhZGVvdXQge1xuICAgIGZyb20ge29wYWNpdHk6IDE7fVxuICAgIHRvIHtvcGFjaXR5OiAwO31cbiAgfVxuICBgXVxufSlcbmV4cG9ydCBjbGFzcyBOZ3hOb3RpZmljYXRpb25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG5cbiAgc2hvdztcbiAgbWVzc2FnZTogYW55ID0ge307XG4gIHN1YnNjcmlwdGlvbjogU3Vic2NyaXB0aW9uO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgbmd4Tm90aWZpY2F0aW9uU2VydmljZTogTmd4Tm90aWZpY2F0aW9uU2VydmljZSkge1xuICAgIHRoaXMuc3Vic2NyaXB0aW9uID0gdGhpcy5uZ3hOb3RpZmljYXRpb25TZXJ2aWNlLmdldE1lc3NhZ2UoKVxuICAgIC5zdWJzY3JpYmUoXG4gICAgICBtZXNzYWdlID0+IHtcbiAgICAgICAgdGhpcy5zaG93ID0gdHJ1ZTtcbiAgICAgICAgdGhpcy5tZXNzYWdlID0gbWVzc2FnZTtcbiAgICAgICAgY29uc29sZS5sb2codGhpcy5tZXNzYWdlKTtcbiAgICAgICAgdGhpcy5hdXRvSGlkZU1lc3NhZ2UoKTtcbiAgICAgIH1cbiAgICApO1xuICB9XG5cbiAgbmdPbkluaXQoKSB7fVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMuc3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gIH1cblxuICBhdXRvSGlkZU1lc3NhZ2UoKSB7XG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICB0aGlzLnNob3cgPSBmYWxzZTtcbiAgfSwgNTAwMCk7XG4gIH1cblxufVxuIl19