@tapsellorg/angular-material-library
Version:
Angular library for Tapsell
132 lines (126 loc) • 9.65 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, model, input, output, signal, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
import * as i4 from '@angular/common';
import { CommonModule } from '@angular/common';
import { Subject, timer, merge } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { withDestroy } from '@tapsellorg/angular-material-library/src/lib/common';
import * as i2 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i3 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i5 from '@tapsellorg/angular-material-library/src/lib/translate';
import { TranslateModule } from '@tapsellorg/angular-material-library/src/lib/translate';
class PghCountdownTimerService {
constructor() {
this.restartTimerSubject = new Subject();
this.restartTimer$ = this.restartTimerSubject.asObservable();
}
static { this.DEFAULT_DURATION = 20; }
restartTimer(duration) {
this.restartTimerSubject.next(duration ?? PghCountdownTimerService.DEFAULT_DURATION);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghCountdownTimerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghCountdownTimerService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghCountdownTimerService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
class PghCountdownTimerComponent extends withDestroy() {
constructor(changeDetectorRef, pghCountdownTimerService) {
super();
this.changeDetectorRef = changeDetectorRef;
this.pghCountdownTimerService = pghCountdownTimerService;
this.durationInSeconds = model(PghCountdownTimerService.DEFAULT_DURATION);
this.startAutomatically = input(true);
this.restartButtonText = input('RESTART_BUTTON_TEXT');
this.buttonType = input('button');
this.timerFinished = output();
this.restartTimerClick = output();
this._stop = new Subject();
this.remainingSeconds = signal(0);
this.remainingMinutes = signal(0);
this.elapsedTime = 0;
this.isTimerRunning = signal(false);
this.TIMER_DELAY = 1000;
this.TIMER_INTERVAL = 1000;
this.SECONDS_IN_A_MINUTE = 60;
}
ngOnInit() {
if (this.startAutomatically()) {
this.startTimer();
}
this.pghCountdownTimerService.restartTimer$
.pipe(takeUntil(this._destroyed$))
.subscribe(duration => {
this.startTimer(duration);
});
}
onRestartTimerClick() {
this.restartTimerClick.emit();
}
startTimer(duration = this.durationInSeconds()) {
if (this.isTimerRunning()) {
console.error('The countdown timer is already running.');
return;
}
if (duration <= 0) {
console.error('The countdown timer duration must be a positive integer.');
return;
}
this.durationInSeconds.set(duration);
this.isTimerRunning.set(true);
this.elapsedTime = 0;
this.allocateTimeUnits(this.durationInSeconds());
this.changeDetectorRef.markForCheck();
timer(this.TIMER_DELAY, this.TIMER_INTERVAL)
.pipe(takeUntil(merge(this._destroyed$, this._stop)))
.subscribe(() => {
this.getTimeDifference();
});
}
getTimeDifference() {
this.elapsedTime++;
const remainingDuration = this.durationInSeconds() - this.elapsedTime;
if (remainingDuration < 0) {
this._stop.next();
this.timerFinished.emit(true);
this.isTimerRunning.set(false);
}
else {
this.allocateTimeUnits(remainingDuration);
}
this.changeDetectorRef.markForCheck();
}
allocateTimeUnits(timeDifference) {
this.remainingSeconds.set(timeDifference % this.SECONDS_IN_A_MINUTE);
this.remainingMinutes.set(Math.floor(timeDifference / this.SECONDS_IN_A_MINUTE));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghCountdownTimerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: PghCountdownTimerService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PghCountdownTimerComponent, isStandalone: false, selector: "pgh-countdown-timer", inputs: { durationInSeconds: { classPropertyName: "durationInSeconds", publicName: "durationInSeconds", isSignal: true, isRequired: false, transformFunction: null }, startAutomatically: { classPropertyName: "startAutomatically", publicName: "startAutomatically", isSignal: true, isRequired: false, transformFunction: null }, restartButtonText: { classPropertyName: "restartButtonText", publicName: "restartButtonText", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { durationInSeconds: "durationInSecondsChange", timerFinished: "timerFinished", restartTimerClick: "restartTimerClick" }, usesInheritance: true, ngImport: i0, template: "<button\n mat-stroked-button\n color=\"primary\"\n class=\"big-mat-button font-monospaced-numbers w-100\"\n (click)=\"onRestartTimerClick()\"\n [disabled]=\"isTimerRunning()\"\n [type]=\"buttonType()\"\n>\n <div class=\"d-flex align-items-center justify-content-center\">\n @if (!isTimerRunning()) {\n <mat-icon svgIcon=\"update\" class=\"square-24 me-1\"></mat-icon>\n } @if (!isTimerRunning()) {\n <span>{{ restartButtonText() | translate }}</span>\n } @if (isTimerRunning()) {\n <span>\n {{ restartButtonText() | translate }} {{ 'RESTART_BUTTON_TEXT_CONJUNCTION' | translate\n }}{{ ' ' }}{{ remainingMinutes() | number : '2.0' }}:{{ remainingSeconds() | number : '2.0' }}\n </span>\n }\n </div>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghCountdownTimerComponent, decorators: [{
type: Component,
args: [{ selector: 'pgh-countdown-timer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button\n mat-stroked-button\n color=\"primary\"\n class=\"big-mat-button font-monospaced-numbers w-100\"\n (click)=\"onRestartTimerClick()\"\n [disabled]=\"isTimerRunning()\"\n [type]=\"buttonType()\"\n>\n <div class=\"d-flex align-items-center justify-content-center\">\n @if (!isTimerRunning()) {\n <mat-icon svgIcon=\"update\" class=\"square-24 me-1\"></mat-icon>\n } @if (!isTimerRunning()) {\n <span>{{ restartButtonText() | translate }}</span>\n } @if (isTimerRunning()) {\n <span>\n {{ restartButtonText() | translate }} {{ 'RESTART_BUTTON_TEXT_CONJUNCTION' | translate\n }}{{ ' ' }}{{ remainingMinutes() | number : '2.0' }}:{{ remainingSeconds() | number : '2.0' }}\n </span>\n }\n </div>\n</button>\n" }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: PghCountdownTimerService }] });
class PghCountdownTimerModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghCountdownTimerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: PghCountdownTimerModule, declarations: [PghCountdownTimerComponent], imports: [CommonModule, MatButtonModule, MatIconModule, TranslateModule], exports: [PghCountdownTimerComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghCountdownTimerModule, imports: [CommonModule, MatButtonModule, MatIconModule, TranslateModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghCountdownTimerModule, decorators: [{
type: NgModule,
args: [{
declarations: [PghCountdownTimerComponent],
imports: [CommonModule, MatButtonModule, MatIconModule, TranslateModule],
exports: [PghCountdownTimerComponent],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PghCountdownTimerComponent, PghCountdownTimerModule, PghCountdownTimerService };
//# sourceMappingURL=tapsellorg-angular-material-library-src-lib-countdown-timer.mjs.map