273 lines
31 KiB
JavaScript
273 lines
31 KiB
JavaScript
|
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||
|
|
import { Component, HostBinding, HostListener, } from '@angular/core';
|
||
|
|
import { NgIf } from '@angular/common';
|
||
|
|
import * as i0 from "@angular/core";
|
||
|
|
import * as i1 from "./toastr.service";
|
||
|
|
import * as i2 from "./toastr-config";
|
||
|
|
class Toast {
|
||
|
|
toastrService;
|
||
|
|
toastPackage;
|
||
|
|
ngZone;
|
||
|
|
message;
|
||
|
|
title;
|
||
|
|
options;
|
||
|
|
duplicatesCount;
|
||
|
|
originalTimeout;
|
||
|
|
/** width of progress bar */
|
||
|
|
width = -1;
|
||
|
|
/** a combination of toast type and options.toastClass */
|
||
|
|
toastClasses = '';
|
||
|
|
/** controls animation */
|
||
|
|
state;
|
||
|
|
/** hides component when waiting to be displayed */
|
||
|
|
get displayStyle() {
|
||
|
|
if (this.state.value === 'inactive') {
|
||
|
|
return 'none';
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
timeout;
|
||
|
|
intervalId;
|
||
|
|
hideTime;
|
||
|
|
sub;
|
||
|
|
sub1;
|
||
|
|
sub2;
|
||
|
|
sub3;
|
||
|
|
constructor(toastrService, toastPackage, ngZone) {
|
||
|
|
this.toastrService = toastrService;
|
||
|
|
this.toastPackage = toastPackage;
|
||
|
|
this.ngZone = ngZone;
|
||
|
|
this.message = toastPackage.message;
|
||
|
|
this.title = toastPackage.title;
|
||
|
|
this.options = toastPackage.config;
|
||
|
|
this.originalTimeout = toastPackage.config.timeOut;
|
||
|
|
this.toastClasses = `${toastPackage.toastType} ${toastPackage.config.toastClass}`;
|
||
|
|
this.sub = toastPackage.toastRef.afterActivate().subscribe(() => {
|
||
|
|
this.activateToast();
|
||
|
|
});
|
||
|
|
this.sub1 = toastPackage.toastRef.manualClosed().subscribe(() => {
|
||
|
|
this.remove();
|
||
|
|
});
|
||
|
|
this.sub2 = toastPackage.toastRef.timeoutReset().subscribe(() => {
|
||
|
|
this.resetTimeout();
|
||
|
|
});
|
||
|
|
this.sub3 = toastPackage.toastRef.countDuplicate().subscribe(count => {
|
||
|
|
this.duplicatesCount = count;
|
||
|
|
});
|
||
|
|
this.state = {
|
||
|
|
value: 'inactive',
|
||
|
|
params: {
|
||
|
|
easeTime: this.toastPackage.config.easeTime,
|
||
|
|
easing: 'ease-in',
|
||
|
|
},
|
||
|
|
};
|
||
|
|
}
|
||
|
|
ngOnDestroy() {
|
||
|
|
this.sub.unsubscribe();
|
||
|
|
this.sub1.unsubscribe();
|
||
|
|
this.sub2.unsubscribe();
|
||
|
|
this.sub3.unsubscribe();
|
||
|
|
clearInterval(this.intervalId);
|
||
|
|
clearTimeout(this.timeout);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* activates toast and sets timeout
|
||
|
|
*/
|
||
|
|
activateToast() {
|
||
|
|
this.state = { ...this.state, value: 'active' };
|
||
|
|
if (!(this.options.disableTimeOut === true || this.options.disableTimeOut === 'timeOut') &&
|
||
|
|
this.options.timeOut) {
|
||
|
|
this.outsideTimeout(() => this.remove(), this.options.timeOut);
|
||
|
|
this.hideTime = new Date().getTime() + this.options.timeOut;
|
||
|
|
if (this.options.progressBar) {
|
||
|
|
this.outsideInterval(() => this.updateProgress(), 10);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* updates progress bar width
|
||
|
|
*/
|
||
|
|
updateProgress() {
|
||
|
|
if (this.width === 0 || this.width === 100 || !this.options.timeOut) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const now = new Date().getTime();
|
||
|
|
const remaining = this.hideTime - now;
|
||
|
|
this.width = (remaining / this.options.timeOut) * 100;
|
||
|
|
if (this.options.progressAnimation === 'increasing') {
|
||
|
|
this.width = 100 - this.width;
|
||
|
|
}
|
||
|
|
if (this.width <= 0) {
|
||
|
|
this.width = 0;
|
||
|
|
}
|
||
|
|
if (this.width >= 100) {
|
||
|
|
this.width = 100;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
resetTimeout() {
|
||
|
|
clearTimeout(this.timeout);
|
||
|
|
clearInterval(this.intervalId);
|
||
|
|
this.state = { ...this.state, value: 'active' };
|
||
|
|
this.outsideTimeout(() => this.remove(), this.originalTimeout);
|
||
|
|
this.options.timeOut = this.originalTimeout;
|
||
|
|
this.hideTime = new Date().getTime() + (this.options.timeOut || 0);
|
||
|
|
this.width = -1;
|
||
|
|
if (this.options.progressBar) {
|
||
|
|
this.outsideInterval(() => this.updateProgress(), 10);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* tells toastrService to remove this toast after animation time
|
||
|
|
*/
|
||
|
|
remove() {
|
||
|
|
if (this.state.value === 'removed') {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
clearTimeout(this.timeout);
|
||
|
|
this.state = { ...this.state, value: 'removed' };
|
||
|
|
this.outsideTimeout(() => this.toastrService.remove(this.toastPackage.toastId), +this.toastPackage.config.easeTime);
|
||
|
|
}
|
||
|
|
tapToast() {
|
||
|
|
if (this.state.value === 'removed') {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.toastPackage.triggerTap();
|
||
|
|
if (this.options.tapToDismiss) {
|
||
|
|
this.remove();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
stickAround() {
|
||
|
|
if (this.state.value === 'removed') {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (this.options.disableTimeOut !== 'extendedTimeOut') {
|
||
|
|
clearTimeout(this.timeout);
|
||
|
|
this.options.timeOut = 0;
|
||
|
|
this.hideTime = 0;
|
||
|
|
// disable progressBar
|
||
|
|
clearInterval(this.intervalId);
|
||
|
|
this.width = 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
delayedHideToast() {
|
||
|
|
if ((this.options.disableTimeOut === true || this.options.disableTimeOut === 'extendedTimeOut') ||
|
||
|
|
this.options.extendedTimeOut === 0 ||
|
||
|
|
this.state.value === 'removed') {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.outsideTimeout(() => this.remove(), this.options.extendedTimeOut);
|
||
|
|
this.options.timeOut = this.options.extendedTimeOut;
|
||
|
|
this.hideTime = new Date().getTime() + (this.options.timeOut || 0);
|
||
|
|
this.width = -1;
|
||
|
|
if (this.options.progressBar) {
|
||
|
|
this.outsideInterval(() => this.updateProgress(), 10);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
outsideTimeout(func, timeout) {
|
||
|
|
if (this.ngZone) {
|
||
|
|
this.ngZone.runOutsideAngular(() => (this.timeout = setTimeout(() => this.runInsideAngular(func), timeout)));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.timeout = setTimeout(() => func(), timeout);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
outsideInterval(func, timeout) {
|
||
|
|
if (this.ngZone) {
|
||
|
|
this.ngZone.runOutsideAngular(() => (this.intervalId = setInterval(() => this.runInsideAngular(func), timeout)));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.intervalId = setInterval(() => func(), timeout);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
runInsideAngular(func) {
|
||
|
|
if (this.ngZone) {
|
||
|
|
this.ngZone.run(() => func());
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
func();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: Toast, deps: [{ token: i1.ToastrService }, { token: i2.ToastPackage }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
||
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: Toast, isStandalone: true, selector: "[toast-component]", host: { listeners: { "click": "tapToast()", "mouseenter": "stickAround()", "mouseleave": "delayedHideToast()" }, properties: { "class": "this.toastClasses", "@flyInOut": "this.state", "style.display": "this.displayStyle" } }, ngImport: i0, template: `
|
||
|
|
<button *ngIf="options.closeButton" (click)="remove()" type="button" class="toast-close-button" aria-label="Close">
|
||
|
|
<span aria-hidden="true">×</span>
|
||
|
|
</button>
|
||
|
|
<div *ngIf="title" [class]="options.titleClass" [attr.aria-label]="title">
|
||
|
|
{{ title }} <ng-container *ngIf="duplicatesCount">[{{ duplicatesCount + 1 }}]</ng-container>
|
||
|
|
</div>
|
||
|
|
<div *ngIf="message && options.enableHtml" role="alert"
|
||
|
|
[class]="options.messageClass" [innerHTML]="message">
|
||
|
|
</div>
|
||
|
|
<div *ngIf="message && !options.enableHtml" role="alert"
|
||
|
|
[class]="options.messageClass" [attr.aria-label]="message">
|
||
|
|
{{ message }}
|
||
|
|
</div>
|
||
|
|
<div *ngIf="options.progressBar">
|
||
|
|
<div class="toast-progress" [style.width]="width + '%'"></div>
|
||
|
|
</div>
|
||
|
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
||
|
|
trigger('flyInOut', [
|
||
|
|
state('inactive', style({ opacity: 0 })),
|
||
|
|
state('active', style({ opacity: 1 })),
|
||
|
|
state('removed', style({ opacity: 0 })),
|
||
|
|
transition('inactive => active', animate('{{ easeTime }}ms {{ easing }}')),
|
||
|
|
transition('active => removed', animate('{{ easeTime }}ms {{ easing }}')),
|
||
|
|
]),
|
||
|
|
] });
|
||
|
|
}
|
||
|
|
export { Toast };
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: Toast, decorators: [{
|
||
|
|
type: Component,
|
||
|
|
args: [{
|
||
|
|
selector: '[toast-component]',
|
||
|
|
template: `
|
||
|
|
<button *ngIf="options.closeButton" (click)="remove()" type="button" class="toast-close-button" aria-label="Close">
|
||
|
|
<span aria-hidden="true">×</span>
|
||
|
|
</button>
|
||
|
|
<div *ngIf="title" [class]="options.titleClass" [attr.aria-label]="title">
|
||
|
|
{{ title }} <ng-container *ngIf="duplicatesCount">[{{ duplicatesCount + 1 }}]</ng-container>
|
||
|
|
</div>
|
||
|
|
<div *ngIf="message && options.enableHtml" role="alert"
|
||
|
|
[class]="options.messageClass" [innerHTML]="message">
|
||
|
|
</div>
|
||
|
|
<div *ngIf="message && !options.enableHtml" role="alert"
|
||
|
|
[class]="options.messageClass" [attr.aria-label]="message">
|
||
|
|
{{ message }}
|
||
|
|
</div>
|
||
|
|
<div *ngIf="options.progressBar">
|
||
|
|
<div class="toast-progress" [style.width]="width + '%'"></div>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
animations: [
|
||
|
|
trigger('flyInOut', [
|
||
|
|
state('inactive', style({ opacity: 0 })),
|
||
|
|
state('active', style({ opacity: 1 })),
|
||
|
|
state('removed', style({ opacity: 0 })),
|
||
|
|
transition('inactive => active', animate('{{ easeTime }}ms {{ easing }}')),
|
||
|
|
transition('active => removed', animate('{{ easeTime }}ms {{ easing }}')),
|
||
|
|
]),
|
||
|
|
],
|
||
|
|
preserveWhitespaces: false,
|
||
|
|
standalone: true,
|
||
|
|
imports: [NgIf],
|
||
|
|
}]
|
||
|
|
}], ctorParameters: function () { return [{ type: i1.ToastrService }, { type: i2.ToastPackage }, { type: i0.NgZone }]; }, propDecorators: { toastClasses: [{
|
||
|
|
type: HostBinding,
|
||
|
|
args: ['class']
|
||
|
|
}], state: [{
|
||
|
|
type: HostBinding,
|
||
|
|
args: ['@flyInOut']
|
||
|
|
}], displayStyle: [{
|
||
|
|
type: HostBinding,
|
||
|
|
args: ['style.display']
|
||
|
|
}], tapToast: [{
|
||
|
|
type: HostListener,
|
||
|
|
args: ['click']
|
||
|
|
}], stickAround: [{
|
||
|
|
type: HostListener,
|
||
|
|
args: ['mouseenter']
|
||
|
|
}], delayedHideToast: [{
|
||
|
|
type: HostListener,
|
||
|
|
args: ['mouseleave']
|
||
|
|
}] } });
|
||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9hc3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2xpYi90b2FzdHIvdG9hc3QuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxPQUFPLEVBQ1AsS0FBSyxFQUNMLEtBQUssRUFDTCxVQUFVLEVBQ1YsT0FBTyxFQUNSLE1BQU0scUJBQXFCLENBQUM7QUFDN0IsT0FBTyxFQUNMLFNBQVMsRUFDVCxXQUFXLEVBQ1gsWUFBWSxHQUdiLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7OztBQUt2QyxNQWlDYSxLQUFLO0lBbUNKO0lBQ0g7SUFDRztJQXBDWixPQUFPLENBQWlCO0lBQ3hCLEtBQUssQ0FBVTtJQUNmLE9BQU8sQ0FBa0M7SUFDekMsZUFBZSxDQUFVO0lBQ3pCLGVBQWUsQ0FBUztJQUN4Qiw0QkFBNEI7SUFDNUIsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFDO0lBQ1gseURBQXlEO0lBQ25DLFlBQVksR0FBRyxFQUFFLENBQUM7SUFDeEMseUJBQXlCO0lBQ0MsS0FBSyxDQUc3QjtJQUVGLG1EQUFtRDtJQUNuRCxJQUNJLFlBQVk7UUFDZCxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxLQUFLLFVBQVUsRUFBRTtZQUNuQyxPQUFPLE1BQU0sQ0FBQztTQUNmO1FBRUQsT0FBTztJQUNULENBQUM7SUFFTyxPQUFPLENBQU07SUFDYixVQUFVLENBQU07SUFDaEIsUUFBUSxDQUFVO0lBQ2xCLEdBQUcsQ0FBZTtJQUNsQixJQUFJLENBQWU7SUFDbkIsSUFBSSxDQUFlO0lBQ25CLElBQUksQ0FBZTtJQUUzQixZQUNZLGFBQTRCLEVBQy9CLFlBQTBCLEVBQ3ZCLE1BQWU7UUFGZixrQkFBYSxHQUFiLGFBQWEsQ0FBZTtRQUMvQixpQkFBWSxHQUFaLFlBQVksQ0FBYztRQUN2QixXQUFNLEdBQU4sTUFBTSxD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
|