ng-materialgrammi
Version:
An Angular framework which follows
59 lines • 11.3 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../materialgrammi.service";
import * as i2 from "@angular/common";
export class NotificationsComponent {
constructor(service) {
this.service = service;
this.position = "topRight";
this.close = `<i class="fas fa-times"></i>`;
this.notificationData = [];
}
ngOnInit() {
this.watchNotifications();
}
watchNotifications() {
this.service.watchNotification(this.position).subscribe((data) => {
console.log("Data recieved!!", data);
this.notificationData = data;
});
}
closeNotification(id) {
this.service.deleteNotification(this.position, id);
}
mainClass() {
let classes = "";
if (this.position.toLowerCase() === "centercenter") {
classes += " center-center";
}
else {
if (this.position.toLowerCase().includes("top")) {
classes += " top";
}
if (this.position.toLowerCase().includes("bottom")) {
classes += " bottom";
}
if (this.position.toLowerCase().includes("left")) {
classes += " left";
}
if (this.position.toLowerCase().includes("right")) {
classes += " right";
}
if (this.position.toLowerCase().includes("center")) {
classes += " center";
}
}
return classes;
}
}
NotificationsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NotificationsComponent, deps: [{ token: i1.MaterialgrammiService }], target: i0.ɵɵFactoryTarget.Component });
NotificationsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NotificationsComponent, selector: "mg-notifications", inputs: { position: "position", close: "close" }, ngImport: i0, template: "<ng-container *ngIf=\"notificationData.length\">\n <div class=\"notifications-wrapper\" [ngClass]=\"mainClass()\">\n <div class=\"notification\" *ngFor=\"let data of notificationData\" [ngClass]=\"(data && data.options) ? ((data.options.class ? data.options.class : '') + (data.options.size ? ' ' + data.options.size : '')) : ''\">\n <a class=\"text-center\" [innerHtml] = \"close\" (click)=\"closeNotification(data.id)\"></a>\n <p [innerHtml]=\"data && data.message ? data.message : ''\"></p>\n </div>\n </div>\n</ng-container>\n", styles: ["@keyframes notificationAnim{0%{opacity:0;margin-top:-5px;transform:scale(.1)}50%{opacity:1;margin-top:5px;transform:scale(1.2)}to{transform:scale(1)}}.notifications-wrapper{display:block;position:fixed;z-index:9999;padding:10px;overflow-y:auto;transition:all .2s ease-in-out}.notifications-wrapper .notification{animation:.3s notificationAnim both;transition:all .3s ease-in-out}.notifications-wrapper .notification.s{padding:5px}.notifications-wrapper .notification.m{padding:10px 15px}.notifications-wrapper .notification.l{padding:15px 25px}.notifications-wrapper .notification a{display:block;position:absolute;top:-10px;right:-10px;height:20px;width:20px;border-radius:50%;background-color:#000000b3;color:#fff}.notifications-wrapper.top{top:0}.notifications-wrapper.right{right:0}.notifications-wrapper.left{left:0}.notifications-wrapper.bottom{bottom:0}.notifications-wrapper.top.center,.notifications-wrapper.bottom.center{left:50%}.notifications-wrapper.left.center,.notifications-wrapper.right.center{top:50%}.notifications-wrapper.center-center{left:50%;top:50%}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NotificationsComponent, decorators: [{
type: Component,
args: [{ selector: 'mg-notifications', template: "<ng-container *ngIf=\"notificationData.length\">\n <div class=\"notifications-wrapper\" [ngClass]=\"mainClass()\">\n <div class=\"notification\" *ngFor=\"let data of notificationData\" [ngClass]=\"(data && data.options) ? ((data.options.class ? data.options.class : '') + (data.options.size ? ' ' + data.options.size : '')) : ''\">\n <a class=\"text-center\" [innerHtml] = \"close\" (click)=\"closeNotification(data.id)\"></a>\n <p [innerHtml]=\"data && data.message ? data.message : ''\"></p>\n </div>\n </div>\n</ng-container>\n", styles: ["@keyframes notificationAnim{0%{opacity:0;margin-top:-5px;transform:scale(.1)}50%{opacity:1;margin-top:5px;transform:scale(1.2)}to{transform:scale(1)}}.notifications-wrapper{display:block;position:fixed;z-index:9999;padding:10px;overflow-y:auto;transition:all .2s ease-in-out}.notifications-wrapper .notification{animation:.3s notificationAnim both;transition:all .3s ease-in-out}.notifications-wrapper .notification.s{padding:5px}.notifications-wrapper .notification.m{padding:10px 15px}.notifications-wrapper .notification.l{padding:15px 25px}.notifications-wrapper .notification a{display:block;position:absolute;top:-10px;right:-10px;height:20px;width:20px;border-radius:50%;background-color:#000000b3;color:#fff}.notifications-wrapper.top{top:0}.notifications-wrapper.right{right:0}.notifications-wrapper.left{left:0}.notifications-wrapper.bottom{bottom:0}.notifications-wrapper.top.center,.notifications-wrapper.bottom.center{left:50%}.notifications-wrapper.left.center,.notifications-wrapper.right.center{top:50%}.notifications-wrapper.center-center{left:50%;top:50%}\n"] }]
}], ctorParameters: function () { return [{ type: i1.MaterialgrammiService }]; }, propDecorators: { position: [{
type: Input
}], close: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm90aWZpY2F0aW9ucy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXRlcmlhbGdyYW1taS9zcmMvbGliL2NvbXBvbmVudHMvbm90aWZpY2F0aW9ucy9ub3RpZmljYXRpb25zLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hdGVyaWFsZ3JhbW1pL3NyYy9saWIvY29tcG9uZW50cy9ub3RpZmljYXRpb25zL25vdGlmaWNhdGlvbnMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7Ozs7QUFRekQsTUFBTSxPQUFPLHNCQUFzQjtJQUtqQyxZQUFvQixPQUE4QjtRQUE5QixZQUFPLEdBQVAsT0FBTyxDQUF1QjtRQUp6QyxhQUFRLEdBQUcsVUFBVSxDQUFDO1FBQ3RCLFVBQUssR0FBRyw4QkFBOEIsQ0FBQztRQUNoRCxxQkFBZ0IsR0FBTyxFQUFFLENBQUM7SUFFNEIsQ0FBQztJQUV2RCxRQUFRO1FBQ04sSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUM7SUFDNUIsQ0FBQztJQUVELGtCQUFrQjtRQUNoQixJQUFJLENBQUMsT0FBTyxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxJQUFRLEVBQUUsRUFBRTtZQUNuRSxPQUFPLENBQUMsR0FBRyxDQUFDLGlCQUFpQixFQUFFLElBQUksQ0FBQyxDQUFDO1lBQ3JDLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUM7UUFDL0IsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsaUJBQWlCLENBQUMsRUFBUztRQUN6QixJQUFJLENBQUMsT0FBTyxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFDckQsQ0FBQztJQUVELFNBQVM7UUFDUCxJQUFJLE9BQU8sR0FBRyxFQUFFLENBQUM7UUFDakIsSUFBRyxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsRUFBRSxLQUFLLGNBQWMsRUFBQztZQUNoRCxPQUFPLElBQUksZ0JBQWdCLENBQUM7U0FDN0I7YUFBSztZQUNKLElBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLEVBQUUsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLEVBQUM7Z0JBQzdDLE9BQU8sSUFBSSxNQUFNLENBQUM7YUFDbkI7WUFDRCxJQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxFQUFFLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxFQUFDO2dCQUNoRCxPQUFPLElBQUksU0FBUyxDQUFDO2FBQ3RCO1lBQ0QsSUFBRyxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsRUFBRSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsRUFBQztnQkFDOUMsT0FBTyxJQUFJLE9BQU8sQ0FBQzthQUNwQjtZQUNELElBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLEVBQUUsQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLEVBQUM7Z0JBQy9DLE9BQU8sSUFBSSxRQUFRLENBQUM7YUFDckI7WUFDRCxJQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxFQUFFLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxFQUFDO2dCQUNoRCxPQUFPLElBQUksU0FBUyxDQUFDO2FBQ3RCO1NBQ0Y7UUFFRCxPQUFPLE9BQU8sQ0FBQztJQUNqQixDQUFDOzttSEE3Q1Usc0JBQXNCO3VHQUF0QixzQkFBc0IsMEdDUm5DLDhqQkFRQTsyRkRBYSxzQkFBc0I7a0JBTGxDLFNBQVM7K0JBQ0Usa0JBQWtCOzRHQUtuQixRQUFRO3NCQUFoQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0ZXJpYWxncmFtbWlTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vbWF0ZXJpYWxncmFtbWkuc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ21nLW5vdGlmaWNhdGlvbnMnLFxuICB0ZW1wbGF0ZVVybDogJy4vbm90aWZpY2F0aW9ucy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL25vdGlmaWNhdGlvbnMuY29tcG9uZW50LmNzcyddXG59KVxuZXhwb3J0IGNsYXNzIE5vdGlmaWNhdGlvbnNDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBwb3NpdGlvbiA9IFwidG9wUmlnaHRcIjtcbiAgQElucHV0KCkgY2xvc2UgPSBgPGkgY2xhc3M9XCJmYXMgZmEtdGltZXNcIj48L2k+YDtcbiAgbm90aWZpY2F0aW9uRGF0YTphbnkgPSBbXTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHNlcnZpY2U6IE1hdGVyaWFsZ3JhbW1pU2VydmljZSkgeyB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy53YXRjaE5vdGlmaWNhdGlvbnMoKTtcbiAgfVxuXG4gIHdhdGNoTm90aWZpY2F0aW9ucygpe1xuICAgIHRoaXMuc2VydmljZS53YXRjaE5vdGlmaWNhdGlvbih0aGlzLnBvc2l0aW9uKS5zdWJzY3JpYmUoKGRhdGE6YW55KSA9PiB7XG4gICAgICBjb25zb2xlLmxvZyhcIkRhdGEgcmVjaWV2ZWQhIVwiLCBkYXRhKTtcbiAgICAgIHRoaXMubm90aWZpY2F0aW9uRGF0YSA9IGRhdGE7XG4gICAgfSk7XG4gIH1cblxuICBjbG9zZU5vdGlmaWNhdGlvbihpZDpzdHJpbmcpe1xuICAgIHRoaXMuc2VydmljZS5kZWxldGVOb3RpZmljYXRpb24odGhpcy5wb3NpdGlvbiwgaWQpO1xuICB9XG5cbiAgbWFpbkNsYXNzKCl7XG4gICAgbGV0IGNsYXNzZXMgPSBcIlwiO1xuICAgIGlmKHRoaXMucG9zaXRpb24udG9Mb3dlckNhc2UoKSA9PT0gXCJjZW50ZXJjZW50ZXJcIil7XG4gICAgICBjbGFzc2VzICs9IFwiIGNlbnRlci1jZW50ZXJcIjtcbiAgICB9ZWxzZSB7XG4gICAgICBpZih0aGlzLnBvc2l0aW9uLnRvTG93ZXJDYXNlKCkuaW5jbHVkZXMoXCJ0b3BcIikpe1xuICAgICAgICBjbGFzc2VzICs9IFwiIHRvcFwiO1xuICAgICAgfVxuICAgICAgaWYodGhpcy5wb3NpdGlvbi50b0xvd2VyQ2FzZSgpLmluY2x1ZGVzKFwiYm90dG9tXCIpKXtcbiAgICAgICAgY2xhc3NlcyArPSBcIiBib3R0b21cIjtcbiAgICAgIH1cbiAgICAgIGlmKHRoaXMucG9zaXRpb24udG9Mb3dlckNhc2UoKS5pbmNsdWRlcyhcImxlZnRcIikpe1xuICAgICAgICBjbGFzc2VzICs9IFwiIGxlZnRcIjtcbiAgICAgIH1cbiAgICAgIGlmKHRoaXMucG9zaXRpb24udG9Mb3dlckNhc2UoKS5pbmNsdWRlcyhcInJpZ2h0XCIpKXtcbiAgICAgICAgY2xhc3NlcyArPSBcIiByaWdodFwiO1xuICAgICAgfVxuICAgICAgaWYodGhpcy5wb3NpdGlvbi50b0xvd2VyQ2FzZSgpLmluY2x1ZGVzKFwiY2VudGVyXCIpKXtcbiAgICAgICAgY2xhc3NlcyArPSBcIiBjZW50ZXJcIjtcbiAgICAgIH1cbiAgICB9XG4gICAgXG4gICAgcmV0dXJuIGNsYXNzZXM7XG4gIH1cblxufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cIm5vdGlmaWNhdGlvbkRhdGEubGVuZ3RoXCI+XG4gICAgPGRpdiBjbGFzcz1cIm5vdGlmaWNhdGlvbnMtd3JhcHBlclwiIFtuZ0NsYXNzXT1cIm1haW5DbGFzcygpXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJub3RpZmljYXRpb25cIiAqbmdGb3I9XCJsZXQgZGF0YSBvZiBub3RpZmljYXRpb25EYXRhXCIgW25nQ2xhc3NdPVwiKGRhdGEgJiYgZGF0YS5vcHRpb25zKSA/ICgoZGF0YS5vcHRpb25zLmNsYXNzID8gZGF0YS5vcHRpb25zLmNsYXNzIDogJycpICsgKGRhdGEub3B0aW9ucy5zaXplID8gJyAnICsgZGF0YS5vcHRpb25zLnNpemUgOiAnJykpIDogJydcIj5cbiAgICAgICAgICAgIDxhIGNsYXNzPVwidGV4dC1jZW50ZXJcIiBbaW5uZXJIdG1sXSA9IFwiY2xvc2VcIiAoY2xpY2spPVwiY2xvc2VOb3RpZmljYXRpb24oZGF0YS5pZClcIj48L2E+XG4gICAgICAgICAgICA8cCBbaW5uZXJIdG1sXT1cImRhdGEgJiYgZGF0YS5tZXNzYWdlID8gZGF0YS5tZXNzYWdlIDogJydcIj48L3A+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC9uZy1jb250YWluZXI+XG4iXX0=