ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
111 lines (109 loc) • 11.9 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import { interval } from 'rxjs';
import { NzPipesModule } from 'ng-zorro-antd/core/pipe';
import { NzStatisticComponent } from './statistic.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/platform";
import * as i2 from "ng-zorro-antd/core/pipe";
const REFRESH_INTERVAL = 1000 / 30;
export class NzCountdownComponent extends NzStatisticComponent {
constructor(ngZone, platform) {
super();
this.ngZone = ngZone;
this.platform = platform;
this.nzFormat = 'HH:mm:ss';
this.nzCountdownFinish = new EventEmitter();
this.target = 0;
}
ngOnChanges(changes) {
if (changes.nzValue) {
this.target = Number(changes.nzValue.currentValue);
if (!changes.nzValue.isFirstChange()) {
this.syncTimer();
}
}
}
ngOnInit() {
super.ngOnInit();
this.syncTimer();
}
ngOnDestroy() {
this.stopTimer();
}
syncTimer() {
if (this.target >= Date.now()) {
this.startTimer();
}
else {
this.stopTimer();
}
}
startTimer() {
if (this.platform.isBrowser) {
this.ngZone.runOutsideAngular(() => {
this.stopTimer();
this.updater_ = interval(REFRESH_INTERVAL).subscribe(() => {
this.updateValue();
this.cdr.detectChanges();
});
});
}
}
stopTimer() {
if (this.updater_) {
this.updater_.unsubscribe();
this.updater_ = null;
}
}
/**
* Update time that should be displayed on the screen.
*/
updateValue() {
this.diff = Math.max(this.target - Date.now(), 0);
if (this.diff === 0) {
this.stopTimer();
if (this.nzCountdownFinish.observers.length) {
this.ngZone.run(() => this.nzCountdownFinish.emit());
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzCountdownComponent, deps: [{ token: i0.NgZone }, { token: i1.Platform }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: NzCountdownComponent, isStandalone: true, selector: "nz-countdown", inputs: { nzFormat: "nzFormat" }, outputs: { nzCountdownFinish: "nzCountdownFinish" }, exportAs: ["nzCountdown"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
<nz-statistic
[nzValue]="diff"
[nzValueStyle]="nzValueStyle"
[nzValueTemplate]="nzValueTemplate || countDownTpl"
[nzTitle]="nzTitle"
[nzPrefix]="nzPrefix"
[nzSuffix]="nzSuffix"
></nz-statistic>
<ng-template #countDownTpl>{{ diff | nzTimeRange: nzFormat }}</ng-template>
`, isInline: true, dependencies: [{ kind: "component", type: NzStatisticComponent, selector: "nz-statistic", inputs: ["nzPrefix", "nzSuffix", "nzTitle", "nzValue", "nzValueStyle", "nzValueTemplate", "nzLoading"], exportAs: ["nzStatistic"] }, { kind: "ngmodule", type: NzPipesModule }, { kind: "pipe", type: i2.NzTimeRangePipe, name: "nzTimeRange" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzCountdownComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
selector: 'nz-countdown',
exportAs: 'nzCountdown',
template: `
<nz-statistic
[nzValue]="diff"
[nzValueStyle]="nzValueStyle"
[nzValueTemplate]="nzValueTemplate || countDownTpl"
[nzTitle]="nzTitle"
[nzPrefix]="nzPrefix"
[nzSuffix]="nzSuffix"
></nz-statistic>
<ng-template #countDownTpl>{{ diff | nzTimeRange: nzFormat }}</ng-template>
`,
imports: [NzStatisticComponent, NzPipesModule],
standalone: true
}]
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.Platform }], propDecorators: { nzFormat: [{
type: Input
}], nzCountdownFinish: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY291bnRkb3duLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc3RhdGlzdGljL2NvdW50ZG93bi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFLTCxNQUFNLEVBRU4saUJBQWlCLEVBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBZ0IsUUFBUSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBRTlDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUV4RCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQzs7OztBQUU3RCxNQUFNLGdCQUFnQixHQUFHLElBQUksR0FBRyxFQUFFLENBQUM7QUFzQm5DLE1BQU0sT0FBTyxvQkFBcUIsU0FBUSxvQkFBb0I7SUFTNUQsWUFDVSxNQUFjLEVBQ2QsUUFBa0I7UUFFMUIsS0FBSyxFQUFFLENBQUM7UUFIQSxXQUFNLEdBQU4sTUFBTSxDQUFRO1FBQ2QsYUFBUSxHQUFSLFFBQVEsQ0FBVTtRQVZuQixhQUFRLEdBQVcsVUFBVSxDQUFDO1FBQ3BCLHNCQUFpQixHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFJeEQsV0FBTSxHQUFXLENBQUMsQ0FBQztJQVEzQixDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQ3BCLElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsWUFBWSxDQUFDLENBQUM7WUFDbkQsSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsYUFBYSxFQUFFLEVBQUUsQ0FBQztnQkFDckMsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1lBQ25CLENBQUM7UUFDSCxDQUFDO0lBQ0gsQ0FBQztJQUVRLFFBQVE7UUFDZixLQUFLLENBQUMsUUFBUSxFQUFFLENBQUM7UUFDakIsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7SUFFUSxXQUFXO1FBQ2xCLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRUQsU0FBUztRQUNQLElBQUksSUFBSSxDQUFDLE1BQU0sSUFBSSxJQUFJLENBQUMsR0FBRyxFQUFFLEVBQUUsQ0FBQztZQUM5QixJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDcEIsQ0FBQzthQUFNLENBQUM7WUFDTixJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDbkIsQ0FBQztJQUNILENBQUM7SUFFRCxVQUFVO1FBQ1IsSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsRUFBRSxDQUFDO1lBQzVCLElBQUksQ0FBQyxNQUFNLENBQUMsaUJBQWlCLENBQUMsR0FBRyxFQUFFO2dCQUNqQyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7Z0JBQ2pCLElBQUksQ0FBQyxRQUFRLEdBQUcsUUFBUSxDQUFDLGdCQUFnQixDQUFDLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtvQkFDeEQsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO29CQUNuQixJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxDQUFDO2dCQUMzQixDQUFDLENBQUMsQ0FBQztZQUNMLENBQUMsQ0FBQyxDQUFDO1FBQ0wsQ0FBQztJQUNILENBQUM7SUFFRCxTQUFTO1FBQ1AsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDbEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUM1QixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztRQUN2QixDQUFDO0lBQ0gsQ0FBQztJQUVEOztPQUVHO0lBQ08sV0FBVztRQUNuQixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsR0FBRyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFFbEQsSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLENBQUMsRUFBRSxDQUFDO1lBQ3BCLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUVqQixJQUFJLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxTQUFTLENBQUMsTUFBTSxFQUFFLENBQUM7Z0JBQzVDLElBQUksQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDO1lBQ3ZELENBQUM7UUFDSCxDQUFDO0lBQ0gsQ0FBQzs4R0ExRVUsb0JBQW9CO2tHQUFwQixvQkFBb0Isc09BZnJCOzs7Ozs7Ozs7OztHQVdULDREQUNTLG9CQUFvQiwyTEFBRSxhQUFhOzsyRkFHbEMsb0JBQW9CO2tCQXBCaEMsU0FBUzttQkFBQztvQkFDVCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtvQkFDL0MsYUFBYSxFQUFFLGlCQUFpQixDQUFDLElBQUk7b0JBQ3JDLFFBQVEsRUFBRSxjQUFjO29CQUN4QixRQUFRLEVBQUUsYUFBYTtvQkFDdkIsUUFBUSxFQUFFOzs7Ozs7Ozs7OztHQVdUO29CQUNELE9BQU8sRUFBRSxDQUFDLG9CQUFvQixFQUFFLGFBQWEsQ0FBQztvQkFDOUMsVUFBVSxFQUFFLElBQUk7aUJBQ2pCO2tHQUVVLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ2EsaUJBQWlCO3NCQUFuQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2dpdGh1Yi5jb20vTkctWk9SUk8vbmctem9ycm8tYW50ZC9ibG9iL21hc3Rlci9MSUNFTlNFXG4gKi9cblxuaW1wb3J0IHsgUGxhdGZvcm0gfSBmcm9tICdAYW5ndWxhci9jZGsvcGxhdGZvcm0nO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgTmdab25lLFxuICBPbkNoYW5nZXMsXG4gIE9uRGVzdHJveSxcbiAgT25Jbml0LFxuICBPdXRwdXQsXG4gIFNpbXBsZUNoYW5nZXMsXG4gIFZpZXdFbmNhcHN1bGF0aW9uXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uLCBpbnRlcnZhbCB9IGZyb20gJ3J4anMnO1xuXG5pbXBvcnQgeyBOelBpcGVzTW9kdWxlIH0gZnJvbSAnbmctem9ycm8tYW50ZC9jb3JlL3BpcGUnO1xuXG5pbXBvcnQgeyBOelN0YXRpc3RpY0NvbXBvbmVudCB9IGZyb20gJy4vc3RhdGlzdGljLmNvbXBvbmVudCc7XG5cbmNvbnN0IFJFRlJFU0hfSU5URVJWQUwgPSAxMDAwIC8gMzA7XG5cbkBDb21wb25lbnQoe1xuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgc2VsZWN0b3I6ICduei1jb3VudGRvd24nLFxuICBleHBvcnRBczogJ256Q291bnRkb3duJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8bnotc3RhdGlzdGljXG4gICAgICBbbnpWYWx1ZV09XCJkaWZmXCJcbiAgICAgIFtuelZhbHVlU3R5bGVdPVwibnpWYWx1ZVN0eWxlXCJcbiAgICAgIFtuelZhbHVlVGVtcGxhdGVdPVwibnpWYWx1ZVRlbXBsYXRlIHx8IGNvdW50RG93blRwbFwiXG4gICAgICBbbnpUaXRsZV09XCJuelRpdGxlXCJcbiAgICAgIFtuelByZWZpeF09XCJuelByZWZpeFwiXG4gICAgICBbbnpTdWZmaXhdPVwibnpTdWZmaXhcIlxuICAgID48L256LXN0YXRpc3RpYz5cblxuICAgIDxuZy10ZW1wbGF0ZSAjY291bnREb3duVHBsPnt7IGRpZmYgfCBuelRpbWVSYW5nZTogbnpGb3JtYXQgfX08L25nLXRlbXBsYXRlPlxuICBgLFxuICBpbXBvcnRzOiBbTnpTdGF0aXN0aWNDb21wb25lbnQsIE56UGlwZXNNb2R1bGVdLFxuICBzdGFuZGFsb25lOiB0cnVlXG59KVxuZXhwb3J0IGNsYXNzIE56Q291bnRkb3duQ29tcG9uZW50IGV4dGVuZHMgTnpTdGF0aXN0aWNDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcywgT25EZXN0cm95IHtcbiAgQElucHV0KCkgbnpGb3JtYXQ6IHN0cmluZyA9ICdISDptbTpzcyc7XG4gIEBPdXRwdXQoKSByZWFkb25seSBuekNvdW50ZG93bkZpbmlzaCA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBkaWZmITogbnVtYmVyO1xuXG4gIHByaXZhdGUgdGFyZ2V0OiBudW1iZXIgPSAwO1xuICBwcml2YXRlIHVwZGF0ZXJfPzogU3Vic2NyaXB0aW9uIHwgbnVsbDtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIG5nWm9uZTogTmdab25lLFxuICAgIHByaXZhdGUgcGxhdGZvcm06IFBsYXRmb3JtXG4gICkge1xuICAgIHN1cGVyKCk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgaWYgKGNoYW5nZXMubnpWYWx1ZSkge1xuICAgICAgdGhpcy50YXJnZXQgPSBOdW1iZXIoY2hhbmdlcy5uelZhbHVlLmN1cnJlbnRWYWx1ZSk7XG4gICAgICBpZiAoIWNoYW5nZXMubnpWYWx1ZS5pc0ZpcnN0Q2hhbmdlKCkpIHtcbiAgICAgICAgdGhpcy5zeW5jVGltZXIoKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBvdmVycmlkZSBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBzdXBlci5uZ09uSW5pdCgpO1xuICAgIHRoaXMuc3luY1RpbWVyKCk7XG4gIH1cblxuICBvdmVycmlkZSBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLnN0b3BUaW1lcigpO1xuICB9XG5cbiAgc3luY1RpbWVyKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLnRhcmdldCA+PSBEYXRlLm5vdygpKSB7XG4gICAgICB0aGlzLnN0YXJ0VGltZXIoKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5zdG9wVGltZXIoKTtcbiAgICB9XG4gIH1cblxuICBzdGFydFRpbWVyKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLnBsYXRmb3JtLmlzQnJvd3Nlcikge1xuICAgICAgdGhpcy5uZ1pvbmUucnVuT3V0c2lkZUFuZ3VsYXIoKCkgPT4ge1xuICAgICAgICB0aGlzLnN0b3BUaW1lcigpO1xuICAgICAgICB0aGlzLnVwZGF0ZXJfID0gaW50ZXJ2YWwoUkVGUkVTSF9JTlRFUlZBTCkuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgICAgICB0aGlzLnVwZGF0ZVZhbHVlKCk7XG4gICAgICAgICAgdGhpcy5jZHIuZGV0ZWN0Q2hhbmdlcygpO1xuICAgICAgICB9KTtcbiAgICAgIH0pO1xuICAgIH1cbiAgfVxuXG4gIHN0b3BUaW1lcigpOiB2b2lkIHtcbiAgICBpZiAodGhpcy51cGRhdGVyXykge1xuICAgICAgdGhpcy51cGRhdGVyXy51bnN1YnNjcmliZSgpO1xuICAgICAgdGhpcy51cGRhdGVyXyA9IG51bGw7XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIFVwZGF0ZSB0aW1lIHRoYXQgc2hvdWxkIGJlIGRpc3BsYXllZCBvbiB0aGUgc2NyZWVuLlxuICAgKi9cbiAgcHJvdGVjdGVkIHVwZGF0ZVZhbHVlKCk6IHZvaWQge1xuICAgIHRoaXMuZGlmZiA9IE1hdGgubWF4KHRoaXMudGFyZ2V0IC0gRGF0ZS5ub3coKSwgMCk7XG5cbiAgICBpZiAodGhpcy5kaWZmID09PSAwKSB7XG4gICAgICB0aGlzLnN0b3BUaW1lcigpO1xuXG4gICAgICBpZiAodGhpcy5uekNvdW50ZG93bkZpbmlzaC5vYnNlcnZlcnMubGVuZ3RoKSB7XG4gICAgICAgIHRoaXMubmdab25lLnJ1bigoKSA9PiB0aGlzLm56Q291bnRkb3duRmluaXNoLmVtaXQoKSk7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG4iXX0=