@koalarx/ui
Version:
Koala UI is a Design System developed in Angular whose objective is to facilitate and make your development faster and simpler, making this framework your greatest ally.
43 lines • 14.3 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/router";
import * as i3 from "@angular/material/tooltip";
import * as i4 from "@angular/material/button";
import * as i5 from "@angular/material/icon";
import * as i6 from "@angular/material/list";
import * as i7 from "@angular/material/core";
export class NotificationComponent {
constructor() {
this.deleteAll = new EventEmitter(false);
this.delete = new EventEmitter(null);
}
ngOnChanges(changes) {
this.appName = document.title.indexOf(') ') >= 0 ? document.title.split(') ')[1] : document.title;
if (changes.notifications && this.notifications.length > 0) {
document.title = `(${this.notifications.length}) ${this.appName}`;
}
else {
document.title = this.appName;
}
}
deleteAllNotifications() {
this.deleteAll.emit(true);
}
deleteNotification(notification) {
this.delete.emit(notification);
}
}
NotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NotificationComponent, selector: "koala-notification-list", inputs: { notifications: "notifications" }, outputs: { deleteAll: "deleteAll", delete: "delete" }, usesOnChanges: true, ngImport: i0, template: "<div (click)=\"$event.stopPropagation()\" class=\"notifications-content\">\n <div class=\"title\">\n <mat-icon>info</mat-icon>\n <h2>Notifica\u00E7\u00F5es</h2>\n <span class=\"spacer\"></span>\n <button (click)=\"deleteAllNotifications()\" *ngIf=\"notifications.length > 0\" class=\"btn-delete-all\"\n mat-icon-button\n matTooltip=\"Excluir Todas\" matTooltipPosition=\"above\">\n <mat-icon>delete_sweep</mat-icon>\n </button>\n </div>\n <mat-action-list *ngIf=\"notifications.length > 0 else noNotifications\">\n <mat-list-item *ngFor=\"let notification of notifications\" [routerLink]=\"notification.redirectTo\" class=\"itemList\">\n <button (click)=\"deleteNotification(notification)\" class=\"delete-notification\" color=\"warn\" mat-icon-button\n matTooltip=\"Excluir\" matTooltipPosition=\"above\"\n mat-list-icon>\n <mat-icon>delete</mat-icon>\n </button>\n <mat-icon class=\"iconList\" mat-list-icon>announcement</mat-icon>\n <h4 class=\"titleList\" mat-line>{{notification.title}}</h4>\n <p [innerHTML]=\"notification.text\" class=\"textList\" mat-line></p>\n </mat-list-item>\n </mat-action-list>\n <ng-template #noNotifications>\n <div class=\"empty\">\n <mat-icon>mood</mat-icon>\n <p>Tudo certo por aqui!</p>\n </div>\n </ng-template>\n</div>\n", styles: [".title{color:#616161;padding:5px 20px 15px}.title h2{vertical-align:middle;display:inline-flex;padding:0 10px;margin:0;font-family:OpenSans,sans-serif;font-size:.8em}.title mat-icon{vertical-align:middle;display:inline-flex;width:22px;height:22px;font-size:22px;line-height:22px}.title .btn-delete-all{position:absolute;right:20px;top:5px}.iconList{color:#1976d2}.titleList{font-family:OpenSansLight,sans-serif;font-size:.7em!important;color:#616161}.textList{font-family:OpenSans,sans-serif;font-size:.9em!important;color:#212121;white-space:inherit!important}.itemList{height:-moz-fit-content!important;height:fit-content!important;padding:8px 0!important}.delete-notification{background:#b71c1c;border-radius:0!important;height:100%!important;margin-left:-75px;margin-right:10px;position:absolute;transition:.3s;width:50px!important}.delete-notification mat-icon{color:#fff;vertical-align:middle}mat-action-list{max-height:70vh;overflow-y:auto}mat-list-item:hover .delete-notification{margin-left:-15px}.empty{padding:50px;text-align:center;color:#616161}.empty mat-icon{width:40px;height:40px;font-size:40px;line-height:40px}.empty p{text-align:center;font-family:OpenSansLight,sans-serif;font-size:1em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "directive", type: i7.MatLine, selector: "[mat-line], [matLine]" }, { kind: "directive", type: i6.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationComponent, decorators: [{
type: Component,
args: [{ selector: 'koala-notification-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div (click)=\"$event.stopPropagation()\" class=\"notifications-content\">\n <div class=\"title\">\n <mat-icon>info</mat-icon>\n <h2>Notifica\u00E7\u00F5es</h2>\n <span class=\"spacer\"></span>\n <button (click)=\"deleteAllNotifications()\" *ngIf=\"notifications.length > 0\" class=\"btn-delete-all\"\n mat-icon-button\n matTooltip=\"Excluir Todas\" matTooltipPosition=\"above\">\n <mat-icon>delete_sweep</mat-icon>\n </button>\n </div>\n <mat-action-list *ngIf=\"notifications.length > 0 else noNotifications\">\n <mat-list-item *ngFor=\"let notification of notifications\" [routerLink]=\"notification.redirectTo\" class=\"itemList\">\n <button (click)=\"deleteNotification(notification)\" class=\"delete-notification\" color=\"warn\" mat-icon-button\n matTooltip=\"Excluir\" matTooltipPosition=\"above\"\n mat-list-icon>\n <mat-icon>delete</mat-icon>\n </button>\n <mat-icon class=\"iconList\" mat-list-icon>announcement</mat-icon>\n <h4 class=\"titleList\" mat-line>{{notification.title}}</h4>\n <p [innerHTML]=\"notification.text\" class=\"textList\" mat-line></p>\n </mat-list-item>\n </mat-action-list>\n <ng-template #noNotifications>\n <div class=\"empty\">\n <mat-icon>mood</mat-icon>\n <p>Tudo certo por aqui!</p>\n </div>\n </ng-template>\n</div>\n", styles: [".title{color:#616161;padding:5px 20px 15px}.title h2{vertical-align:middle;display:inline-flex;padding:0 10px;margin:0;font-family:OpenSans,sans-serif;font-size:.8em}.title mat-icon{vertical-align:middle;display:inline-flex;width:22px;height:22px;font-size:22px;line-height:22px}.title .btn-delete-all{position:absolute;right:20px;top:5px}.iconList{color:#1976d2}.titleList{font-family:OpenSansLight,sans-serif;font-size:.7em!important;color:#616161}.textList{font-family:OpenSans,sans-serif;font-size:.9em!important;color:#212121;white-space:inherit!important}.itemList{height:-moz-fit-content!important;height:fit-content!important;padding:8px 0!important}.delete-notification{background:#b71c1c;border-radius:0!important;height:100%!important;margin-left:-75px;margin-right:10px;position:absolute;transition:.3s;width:50px!important}.delete-notification mat-icon{color:#fff;vertical-align:middle}mat-action-list{max-height:70vh;overflow-y:auto}mat-list-item:hover .delete-notification{margin-left:-15px}.empty{padding:50px;text-align:center;color:#616161}.empty mat-icon{width:40px;height:40px;font-size:40px;line-height:40px}.empty p{text-align:center;font-family:OpenSansLight,sans-serif;font-size:1em}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { notifications: [{
type: Input
}], deleteAll: [{
type: Output
}], delete: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm90aWZpY2F0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmUvc3JjL2xpYi9wYWdlL25vdGlmaWNhdGlvbnMvbm90aWZpY2F0aW9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmUvc3JjL2xpYi9wYWdlL25vdGlmaWNhdGlvbnMvbm90aWZpY2F0aW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBYSxNQUFNLEVBQWlCLE1BQU0sZUFBZSxDQUFDOzs7Ozs7Ozs7QUFTMUgsTUFBTSxPQUFPLHFCQUFxQjtJQU9oQztRQUxVLGNBQVMsR0FBRyxJQUFJLFlBQVksQ0FBVSxLQUFLLENBQUMsQ0FBQztRQUM3QyxXQUFNLEdBQUcsSUFBSSxZQUFZLENBQTZCLElBQUksQ0FBQyxDQUFDO0lBSXZELENBQUM7SUFFaEIsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksQ0FBQyxPQUFPLEdBQUcsUUFBUSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQztRQUNsRyxJQUFJLE9BQU8sQ0FBQyxhQUFhLElBQUksSUFBSSxDQUFDLGFBQWEsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFO1lBQzFELFFBQVEsQ0FBQyxLQUFLLEdBQUcsSUFBSSxJQUFJLENBQUMsYUFBYSxDQUFDLE1BQU0sS0FBSyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7U0FDbkU7YUFBTTtZQUNMLFFBQVEsQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQztTQUMvQjtJQUNILENBQUM7SUFFTSxzQkFBc0I7UUFDM0IsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDNUIsQ0FBQztJQUVNLGtCQUFrQixDQUFDLFlBQXdDO1FBQ2hFLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQ2pDLENBQUM7O2tIQXhCVSxxQkFBcUI7c0dBQXJCLHFCQUFxQix1TENUbEMsNjJDQThCQTsyRkRyQmEscUJBQXFCO2tCQU5qQyxTQUFTOytCQUNFLHlCQUF5QixtQkFHbEIsdUJBQXVCLENBQUMsTUFBTTswRUFHdEMsYUFBYTtzQkFBckIsS0FBSztnQkFDSSxTQUFTO3NCQUFsQixNQUFNO2dCQUNHLE1BQU07c0JBQWYsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uQ2hhbmdlcywgT3V0cHV0LCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBLb2FsYU5vdGlmaWNhdGlvbkludGVyZmFjZSB9IGZyb20gJy4va29hbGEubm90aWZpY2F0aW9uLmludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2tvYWxhLW5vdGlmaWNhdGlvbi1saXN0JyxcbiAgdGVtcGxhdGVVcmw6ICdub3RpZmljYXRpb24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnbm90aWZpY2F0aW9uLmNvbXBvbmVudC5jc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgTm90aWZpY2F0aW9uQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgbm90aWZpY2F0aW9uczogS29hbGFOb3RpZmljYXRpb25JbnRlcmZhY2VbXTtcbiAgQE91dHB1dCgpIGRlbGV0ZUFsbCA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oZmFsc2UpO1xuICBAT3V0cHV0KCkgZGVsZXRlID0gbmV3IEV2ZW50RW1pdHRlcjxLb2FsYU5vdGlmaWNhdGlvbkludGVyZmFjZT4obnVsbCk7XG5cbiAgcHJpdmF0ZSBhcHBOYW1lOiBzdHJpbmc7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcbiAgICB0aGlzLmFwcE5hbWUgPSBkb2N1bWVudC50aXRsZS5pbmRleE9mKCcpICcpID49IDAgPyBkb2N1bWVudC50aXRsZS5zcGxpdCgnKSAnKVsxXSA6IGRvY3VtZW50LnRpdGxlO1xuICAgIGlmIChjaGFuZ2VzLm5vdGlmaWNhdGlvbnMgJiYgdGhpcy5ub3RpZmljYXRpb25zLmxlbmd0aCA+IDApIHtcbiAgICAgIGRvY3VtZW50LnRpdGxlID0gYCgke3RoaXMubm90aWZpY2F0aW9ucy5sZW5ndGh9KSAke3RoaXMuYXBwTmFtZX1gO1xuICAgIH0gZWxzZSB7XG4gICAgICBkb2N1bWVudC50aXRsZSA9IHRoaXMuYXBwTmFtZTtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgZGVsZXRlQWxsTm90aWZpY2F0aW9ucygpIHtcbiAgICB0aGlzLmRlbGV0ZUFsbC5lbWl0KHRydWUpO1xuICB9XG5cbiAgcHVibGljIGRlbGV0ZU5vdGlmaWNhdGlvbihub3RpZmljYXRpb246IEtvYWxhTm90aWZpY2F0aW9uSW50ZXJmYWNlKSB7XG4gICAgdGhpcy5kZWxldGUuZW1pdChub3RpZmljYXRpb24pO1xuICB9XG59XG4iLCI8ZGl2IChjbGljayk9XCIkZXZlbnQuc3RvcFByb3BhZ2F0aW9uKClcIiBjbGFzcz1cIm5vdGlmaWNhdGlvbnMtY29udGVudFwiPlxuICA8ZGl2IGNsYXNzPVwidGl0bGVcIj5cbiAgICA8bWF0LWljb24+aW5mbzwvbWF0LWljb24+XG4gICAgPGgyPk5vdGlmaWNhw6fDtWVzPC9oMj5cbiAgICA8c3BhbiBjbGFzcz1cInNwYWNlclwiPjwvc3Bhbj5cbiAgICA8YnV0dG9uIChjbGljayk9XCJkZWxldGVBbGxOb3RpZmljYXRpb25zKClcIiAqbmdJZj1cIm5vdGlmaWNhdGlvbnMubGVuZ3RoID4gMFwiIGNsYXNzPVwiYnRuLWRlbGV0ZS1hbGxcIlxuICAgICAgICAgICAgbWF0LWljb24tYnV0dG9uXG4gICAgICAgICAgICBtYXRUb29sdGlwPVwiRXhjbHVpciBUb2Rhc1wiIG1hdFRvb2x0aXBQb3NpdGlvbj1cImFib3ZlXCI+XG4gICAgICA8bWF0LWljb24+ZGVsZXRlX3N3ZWVwPC9tYXQtaWNvbj5cbiAgICA8L2J1dHRvbj5cbiAgPC9kaXY+XG4gIDxtYXQtYWN0aW9uLWxpc3QgKm5nSWY9XCJub3RpZmljYXRpb25zLmxlbmd0aCA+IDAgZWxzZSBub05vdGlmaWNhdGlvbnNcIj5cbiAgICA8bWF0LWxpc3QtaXRlbSAqbmdGb3I9XCJsZXQgbm90aWZpY2F0aW9uIG9mIG5vdGlmaWNhdGlvbnNcIiBbcm91dGVyTGlua109XCJub3RpZmljYXRpb24ucmVkaXJlY3RUb1wiIGNsYXNzPVwiaXRlbUxpc3RcIj5cbiAgICAgIDxidXR0b24gKGNsaWNrKT1cImRlbGV0ZU5vdGlmaWNhdGlvbihub3RpZmljYXRpb24pXCIgY2xhc3M9XCJkZWxldGUtbm90aWZpY2F0aW9uXCIgY29sb3I9XCJ3YXJuXCIgbWF0LWljb24tYnV0dG9uXG4gICAgICAgICAgICAgIG1hdFRvb2x0aXA9XCJFeGNsdWlyXCIgbWF0VG9vbHRpcFBvc2l0aW9uPVwiYWJvdmVcIlxuICAgICAgICAgICAgICBtYXQtbGlzdC1pY29uPlxuICAgICAgICA8bWF0LWljb24+ZGVsZXRlPC9tYXQtaWNvbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPG1hdC1pY29uIGNsYXNzPVwiaWNvbkxpc3RcIiBtYXQtbGlzdC1pY29uPmFubm91bmNlbWVudDwvbWF0LWljb24+XG4gICAgICA8aDQgY2xhc3M9XCJ0aXRsZUxpc3RcIiBtYXQtbGluZT57e25vdGlmaWNhdGlvbi50aXRsZX19PC9oND5cbiAgICAgIDxwIFtpbm5lckhUTUxdPVwibm90aWZpY2F0aW9uLnRleHRcIiBjbGFzcz1cInRleHRMaXN0XCIgbWF0LWxpbmU+PC9wPlxuICAgIDwvbWF0LWxpc3QtaXRlbT5cbiAgPC9tYXQtYWN0aW9uLWxpc3Q+XG4gIDxuZy10ZW1wbGF0ZSAjbm9Ob3RpZmljYXRpb25zPlxuICAgIDxkaXYgY2xhc3M9XCJlbXB0eVwiPlxuICAgICAgPG1hdC1pY29uPm1vb2Q8L21hdC1pY29uPlxuICAgICAgPHA+VHVkbyBjZXJ0byBwb3IgYXF1aSE8L3A+XG4gICAgPC9kaXY+XG4gIDwvbmctdGVtcGxhdGU+XG48L2Rpdj5cbiJdfQ==