ngx-toasta
Version:
Simple and clean Angular Toast component that shows growl-style notifications and messages for your web app
74 lines • 8.62 kB
JavaScript
import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "./shared";
/**
* A Toast component shows message with title and close button.
*/
export class ToastComponent {
constructor() {
this.progressPercent = 0;
this.startTime = performance.now();
this.closeToastEvent = new EventEmitter();
}
ngAfterViewInit() {
if (this.toast.showDuration && this.toast.timeout > 0) {
this.progressInterval = window.setInterval(() => {
this.progressPercent = (100 - ((performance.now() - this.startTime) / this.toast.timeout * 100)); // Descending progress
if (this.progressPercent <= 0) {
clearInterval(this.progressInterval);
}
}, 16.7); // 60 fps
}
}
/**
* Event handler invokes when user clicks on close button.
* This method emit new event into ToastaContainer to close it.
*/
close($event) {
$event.preventDefault();
this.closeToastEvent.next(this.toast);
if (this.progressInterval) {
clearInterval(this.progressInterval);
}
}
}
ToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ToastComponent, selector: "ngx-toast", inputs: { toast: "toast" }, outputs: { closeToastEvent: "closeToast" }, ngImport: i0, template: `
<div class="toast" [ngClass]="[toast.type, toast.theme]">
<div *ngIf="toast.showClose" class="close-button" (click)="close($event)"></div>
<div *ngIf="toast.title || toast.msg" class="toast-text">
<span *ngIf="toast.title" class="toast-title" [innerHTML]="toast.title | safeHtml"></span>
<br *ngIf="toast.title && toast.msg" />
<span *ngIf="toast.msg" class="toast-msg" [innerHtml]="toast.msg | safeHtml"></span>
</div>
<div class="durationbackground" *ngIf="toast.showDuration && toast.timeout > 0">
<div class="durationbar" [style.width.%]="progressPercent">
</div>
</div>
</div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safeHtml" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ToastComponent, decorators: [{
type: Component,
args: [{
selector: 'ngx-toast',
template: `
<div class="toast" [ngClass]="[toast.type, toast.theme]">
<div *ngIf="toast.showClose" class="close-button" (click)="close($event)"></div>
<div *ngIf="toast.title || toast.msg" class="toast-text">
<span *ngIf="toast.title" class="toast-title" [innerHTML]="toast.title | safeHtml"></span>
<br *ngIf="toast.title && toast.msg" />
<span *ngIf="toast.msg" class="toast-msg" [innerHtml]="toast.msg | safeHtml"></span>
</div>
<div class="durationbackground" *ngIf="toast.showDuration && toast.timeout > 0">
<div class="durationbar" [style.width.%]="progressPercent">
</div>
</div>
</div>`
}]
}], propDecorators: { toast: [{
type: Input
}], closeToastEvent: [{
type: Output,
args: ['closeToast']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9hc3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXRvYXN0YS9zcmMvbGliL3RvYXN0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWlCLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQUl0Rjs7R0FFRztBQWlCSCxNQUFNLE9BQU8sY0FBYztJQWhCM0I7UUFtQkUsb0JBQWUsR0FBRyxDQUFDLENBQUM7UUFDcEIsY0FBUyxHQUFXLFdBQVcsQ0FBQyxHQUFHLEVBQUUsQ0FBQztRQUVoQixvQkFBZSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7S0EwQjVEO0lBeEJDLGVBQWU7UUFDYixJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsWUFBWSxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxHQUFHLENBQUMsRUFBRTtZQUNyRCxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsTUFBTSxDQUFDLFdBQVcsQ0FBQyxHQUFHLEVBQUU7Z0JBQzlDLElBQUksQ0FBQyxlQUFlLEdBQUcsQ0FBQyxHQUFHLEdBQUcsQ0FBQyxDQUFDLFdBQVcsQ0FBQyxHQUFHLEVBQUUsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLHNCQUFzQjtnQkFFeEgsSUFBSSxJQUFJLENBQUMsZUFBZSxJQUFJLENBQUMsRUFBRTtvQkFDN0IsYUFBYSxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO2lCQUN0QztZQUNILENBQUMsRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUFDLFNBQVM7U0FDcEI7SUFDSCxDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsS0FBSyxDQUFDLE1BQWE7UUFDakIsTUFBTSxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUV0QyxJQUFJLElBQUksQ0FBQyxnQkFBZ0IsRUFBRTtZQUN6QixhQUFhLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUM7U0FDdEM7SUFDSCxDQUFDOzsyR0EvQlUsY0FBYzsrRkFBZCxjQUFjLHlIQWRmOzs7Ozs7Ozs7Ozs7ZUFZRzsyRkFFRixjQUFjO2tCQWhCMUIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsV0FBVztvQkFDckIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7ZUFZRztpQkFDZDs4QkFNVSxLQUFLO3NCQUFiLEtBQUs7Z0JBQ2dCLGVBQWU7c0JBQXBDLE1BQU07dUJBQUMsWUFBWSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyVmlld0luaXQsIENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5pbXBvcnQgeyBUb2FzdERhdGEgfSBmcm9tICcuL3RvYXN0YS5zZXJ2aWNlJztcclxuXHJcbi8qKlxyXG4gKiBBIFRvYXN0IGNvbXBvbmVudCBzaG93cyBtZXNzYWdlIHdpdGggdGl0bGUgYW5kIGNsb3NlIGJ1dHRvbi5cclxuICovXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbmd4LXRvYXN0JyxcclxuICB0ZW1wbGF0ZTogYFxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJ0b2FzdFwiIFtuZ0NsYXNzXT1cIlt0b2FzdC50eXBlLCB0b2FzdC50aGVtZV1cIj5cclxuICAgICAgICAgICAgPGRpdiAqbmdJZj1cInRvYXN0LnNob3dDbG9zZVwiIGNsYXNzPVwiY2xvc2UtYnV0dG9uXCIgKGNsaWNrKT1cImNsb3NlKCRldmVudClcIj48L2Rpdj5cclxuICAgICAgICAgICAgPGRpdiAqbmdJZj1cInRvYXN0LnRpdGxlIHx8IHRvYXN0Lm1zZ1wiIGNsYXNzPVwidG9hc3QtdGV4dFwiPlxyXG4gICAgICAgICAgICAgICAgPHNwYW4gKm5nSWY9XCJ0b2FzdC50aXRsZVwiIGNsYXNzPVwidG9hc3QtdGl0bGVcIiBbaW5uZXJIVE1MXT1cInRvYXN0LnRpdGxlIHwgc2FmZUh0bWxcIj48L3NwYW4+XHJcbiAgICAgICAgICAgICAgICA8YnIgKm5nSWY9XCJ0b2FzdC50aXRsZSAmJiB0b2FzdC5tc2dcIiAvPlxyXG4gICAgICAgICAgICAgICAgPHNwYW4gKm5nSWY9XCJ0b2FzdC5tc2dcIiBjbGFzcz1cInRvYXN0LW1zZ1wiIFtpbm5lckh0bWxdPVwidG9hc3QubXNnIHwgc2FmZUh0bWxcIj48L3NwYW4+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZHVyYXRpb25iYWNrZ3JvdW5kXCIgKm5nSWY9XCJ0b2FzdC5zaG93RHVyYXRpb24gJiYgdG9hc3QudGltZW91dCA+IDBcIj5cclxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJkdXJhdGlvbmJhclwiIFtzdHlsZS53aWR0aC4lXT1cInByb2dyZXNzUGVyY2VudFwiPlxyXG4gICAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDwvZGl2PmBcclxufSlcclxuZXhwb3J0IGNsYXNzIFRvYXN0Q29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XHJcblxyXG4gIHByb2dyZXNzSW50ZXJ2YWw/OiBudW1iZXI7XHJcbiAgcHJvZ3Jlc3NQZXJjZW50ID0gMDtcclxuICBzdGFydFRpbWU6IG51bWJlciA9IHBlcmZvcm1hbmNlLm5vdygpO1xyXG4gIEBJbnB1dCgpIHRvYXN0ITogVG9hc3REYXRhO1xyXG4gIEBPdXRwdXQoJ2Nsb3NlVG9hc3QnKSBjbG9zZVRvYXN0RXZlbnQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcclxuICAgIGlmICh0aGlzLnRvYXN0LnNob3dEdXJhdGlvbiAmJiB0aGlzLnRvYXN0LnRpbWVvdXQgPiAwKSB7XHJcbiAgICAgIHRoaXMucHJvZ3Jlc3NJbnRlcnZhbCA9IHdpbmRvdy5zZXRJbnRlcnZhbCgoKSA9PiB7XHJcbiAgICAgICAgdGhpcy5wcm9ncmVzc1BlcmNlbnQgPSAoMTAwIC0gKChwZXJmb3JtYW5jZS5ub3coKSAtIHRoaXMuc3RhcnRUaW1lKSAvIHRoaXMudG9hc3QudGltZW91dCAqIDEwMCkpOyAvLyBEZXNjZW5kaW5nIHByb2dyZXNzXHJcblxyXG4gICAgICAgIGlmICh0aGlzLnByb2dyZXNzUGVyY2VudCA8PSAwKSB7XHJcbiAgICAgICAgICBjbGVhckludGVydmFsKHRoaXMucHJvZ3Jlc3NJbnRlcnZhbCk7XHJcbiAgICAgICAgfVxyXG4gICAgICB9LCAxNi43KTsgLy8gNjAgZnBzXHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBFdmVudCBoYW5kbGVyIGludm9rZXMgd2hlbiB1c2VyIGNsaWNrcyBvbiBjbG9zZSBidXR0b24uXHJcbiAgICogVGhpcyBtZXRob2QgZW1pdCBuZXcgZXZlbnQgaW50byBUb2FzdGFDb250YWluZXIgdG8gY2xvc2UgaXQuXHJcbiAgICovXHJcbiAgY2xvc2UoJGV2ZW50OiBFdmVudCkge1xyXG4gICAgJGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XHJcbiAgICB0aGlzLmNsb3NlVG9hc3RFdmVudC5uZXh0KHRoaXMudG9hc3QpO1xyXG5cclxuICAgIGlmICh0aGlzLnByb2dyZXNzSW50ZXJ2YWwpIHtcclxuICAgICAgY2xlYXJJbnRlcnZhbCh0aGlzLnByb2dyZXNzSW50ZXJ2YWwpO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iXX0=