ngx-dynamic-dashboard
Version:
an dashboard lib for angular 10
43 lines • 5.72 kB
JavaScript
import { Component } from '@angular/core';
import { ToastService } from './toast.service';
import { animate, style, transition, trigger } from '@angular/animations';
import { timer } from 'rxjs';
export class ToastComponent {
constructor(_toastService) {
this._toastService = _toastService;
}
ngOnInit() {
this.messages = this._toastService.getMessages();
timer(7000, 7000).subscribe(t => {
this.messages.forEach(message => {
this.dismiss(message.id);
});
});
}
dismiss(id) {
this._toastService.dismissMessage(id);
}
}
ToastComponent.decorators = [
{ type: Component, args: [{
selector: 'dashboard-toast',
template: "<div class=\"wrapper\">\n <div *ngFor=\"let message of messages\" class=\"toast\">\n <table (click)=\"dismiss(message.id)\" *ngIf=\"message.dismissed == false\" [@showHide] class=\"ui table\">\n <tr>\n <td class=\"toast-icon\" width='50px'><i\n class=\"large inverted check icon\"></i></td>\n <td>\n <div class=\"toast-message\">\n {{message.content}}\n </div>\n </td>\n </tr>\n </table>\n </div>\n</div>\n",
animations: [
trigger('showHide', [
transition(':enter', [
style({ opacity: 0 }),
animate('500ms', style({ opacity: 1 }))
]),
transition(':leave', [
style({ opacity: 1 }),
animate('500ms', style({ opacity: 0 }))
])
])
],
styles: [".wrapper{position:absolute;right:10px;top:50px;width:400px;z-index:1000}.toast{width:inherit}.toast-icon{background-color:#384b5f;text-align:center}.ui[class*=\"top right attached\"].label{background-color:transparent}.toast-message{display:table-cell;height:40px;vertical-align:middle}"]
},] }
];
ToastComponent.ctorParameters = () => [
{ type: ToastService }
];
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9hc3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Ii9Vc2Vycy9iZW5saS93b3Jrc3BhY2VzL25neC1keW5hbWljLWRhc2hib2FyZC1mcmFtZXdvcmsvcHJvamVjdHMvbmd4LWR5bmFtaWMtZGFzaGJvYXJkL3NyYy8iLCJzb3VyY2VzIjpbImRhc2hib2FyZC90b2FzdC90b2FzdC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBUyxNQUFNLGVBQWUsQ0FBQztBQUNoRCxPQUFPLEVBQUMsWUFBWSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFFN0MsT0FBTyxFQUFDLE9BQU8sRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBQ3hFLE9BQU8sRUFBQyxLQUFLLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFvQjNCLE1BQU0sT0FBTyxjQUFjO0lBSXZCLFlBQW9CLGFBQTJCO1FBQTNCLGtCQUFhLEdBQWIsYUFBYSxDQUFjO0lBQy9DLENBQUM7SUFHRCxRQUFRO1FBRUosSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBR2pELEtBQUssQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFO1lBRTVCLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxFQUFFO2dCQUU1QixJQUFJLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxFQUFFLENBQUMsQ0FBQztZQUU3QixDQUFDLENBQUMsQ0FBQztRQUNQLENBQUMsQ0FBQyxDQUFDO0lBRVAsQ0FBQztJQUVELE9BQU8sQ0FBQyxFQUFFO1FBQ04sSUFBSSxDQUFDLGFBQWEsQ0FBQyxjQUFjLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDMUMsQ0FBQzs7O1lBM0NKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsaUJBQWlCO2dCQUMzQix5a0JBQXFDO2dCQUVyQyxVQUFVLEVBQUU7b0JBRVIsT0FBTyxDQUFDLFVBQVUsRUFBRTt3QkFDaEIsVUFBVSxDQUFDLFFBQVEsRUFBRTs0QkFDakIsS0FBSyxDQUFDLEVBQUMsT0FBTyxFQUFFLENBQUMsRUFBQyxDQUFDOzRCQUNuQixPQUFPLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQyxFQUFDLE9BQU8sRUFBRSxDQUFDLEVBQUMsQ0FBQyxDQUFDO3lCQUN4QyxDQUFDO3dCQUNGLFVBQVUsQ0FBQyxRQUFRLEVBQUU7NEJBQ2pCLEtBQUssQ0FBQyxFQUFDLE9BQU8sRUFBRSxDQUFDLEVBQUMsQ0FBQzs0QkFDbkIsT0FBTyxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsRUFBQyxPQUFPLEVBQUUsQ0FBQyxFQUFDLENBQUMsQ0FBQzt5QkFDeEMsQ0FBQztxQkFDTCxDQUFDO2lCQUFDOzthQUNWOzs7WUF0Qk8sWUFBWSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBPbkluaXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtUb2FzdFNlcnZpY2V9IGZyb20gJy4vdG9hc3Quc2VydmljZSc7XG5pbXBvcnQge01lc3NhZ2V9IGZyb20gJy4vbWVzc2FnZSc7XG5pbXBvcnQge2FuaW1hdGUsIHN0eWxlLCB0cmFuc2l0aW9uLCB0cmlnZ2VyfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcbmltcG9ydCB7dGltZXJ9IGZyb20gJ3J4anMnO1xuXG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnZGFzaGJvYXJkLXRvYXN0JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vdG9hc3QuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3RvYXN0LmNvbXBvbmVudC5jc3MnXSxcbiAgICBhbmltYXRpb25zOiBbXG5cbiAgICAgICAgdHJpZ2dlcignc2hvd0hpZGUnLCBbXG4gICAgICAgICAgICB0cmFuc2l0aW9uKCc6ZW50ZXInLCBbXG4gICAgICAgICAgICAgICAgc3R5bGUoe29wYWNpdHk6IDB9KSxcbiAgICAgICAgICAgICAgICBhbmltYXRlKCc1MDBtcycsIHN0eWxlKHtvcGFjaXR5OiAxfSkpXG4gICAgICAgICAgICBdKSxcbiAgICAgICAgICAgIHRyYW5zaXRpb24oJzpsZWF2ZScsIFtcbiAgICAgICAgICAgICAgICBzdHlsZSh7b3BhY2l0eTogMX0pLFxuICAgICAgICAgICAgICAgIGFuaW1hdGUoJzUwMG1zJywgc3R5bGUoe29wYWNpdHk6IDB9KSlcbiAgICAgICAgICAgIF0pXG4gICAgICAgIF0pXVxufSlcbmV4cG9ydCBjbGFzcyBUb2FzdENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgICBtZXNzYWdlczogQXJyYXk8TWVzc2FnZT47XG5cbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIF90b2FzdFNlcnZpY2U6IFRvYXN0U2VydmljZSkge1xuICAgIH1cblxuXG4gICAgbmdPbkluaXQoKSB7XG5cbiAgICAgICAgdGhpcy5tZXNzYWdlcyA9IHRoaXMuX3RvYXN0U2VydmljZS5nZXRNZXNzYWdlcygpO1xuXG5cbiAgICAgICAgdGltZXIoNzAwMCwgNzAwMCkuc3Vic2NyaWJlKHQgPT4ge1xuXG4gICAgICAgICAgICB0aGlzLm1lc3NhZ2VzLmZvckVhY2gobWVzc2FnZSA9PiB7XG5cbiAgICAgICAgICAgICAgICB0aGlzLmRpc21pc3MobWVzc2FnZS5pZCk7XG5cbiAgICAgICAgICAgIH0pO1xuICAgICAgICB9KTtcblxuICAgIH1cblxuICAgIGRpc21pc3MoaWQpIHtcbiAgICAgICAgdGhpcy5fdG9hc3RTZXJ2aWNlLmRpc21pc3NNZXNzYWdlKGlkKTtcbiAgICB9XG5cbn1cbiJdfQ==