322 lines
15 KiB
JavaScript
322 lines
15 KiB
JavaScript
import { Platform } from '@angular/cdk/platform';
|
|
import * as i0 from '@angular/core';
|
|
import { inject, LOCALE_ID, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, ChangeDetectorRef, DestroyRef, booleanAttribute, NgZone, EventEmitter, Output, NgModule } from '@angular/core';
|
|
import * as i1$1 from 'ng-zorro-antd/core/pipe';
|
|
import { NzPipesModule } from 'ng-zorro-antd/core/pipe';
|
|
import { Directionality } from '@angular/cdk/bidi';
|
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
import * as i2 from 'ng-zorro-antd/core/outlet';
|
|
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
|
|
import * as i1 from 'ng-zorro-antd/skeleton';
|
|
import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
|
|
import { getLocaleNumberSymbol, NumberSymbol, NgTemplateOutlet } from '@angular/common';
|
|
|
|
/**
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
|
|
*/
|
|
class NzStatisticNumberComponent {
|
|
nzValue;
|
|
nzValueTemplate;
|
|
displayInt = '';
|
|
displayDecimal = '';
|
|
locale_id = inject(LOCALE_ID);
|
|
ngOnChanges() {
|
|
this.formatNumber();
|
|
}
|
|
formatNumber() {
|
|
const decimalSeparator = typeof this.nzValue === 'number' ? '.' : getLocaleNumberSymbol(this.locale_id, NumberSymbol.Decimal);
|
|
const value = String(this.nzValue);
|
|
const [int, decimal] = value.split(decimalSeparator);
|
|
this.displayInt = int;
|
|
this.displayDecimal = decimal ? `${decimalSeparator}${decimal}` : '';
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzStatisticNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NzStatisticNumberComponent, isStandalone: true, selector: "nz-statistic-number", inputs: { nzValue: "nzValue", nzValueTemplate: "nzValueTemplate" }, exportAs: ["nzStatisticNumber"], usesOnChanges: true, ngImport: i0, template: `
|
|
<span class="ant-statistic-content-value">
|
|
@if (nzValueTemplate) {
|
|
<ng-container
|
|
[ngTemplateOutlet]="nzValueTemplate"
|
|
[ngTemplateOutletContext]="{ $implicit: nzValue }"
|
|
></ng-container>
|
|
} @else {
|
|
@if (displayInt) {
|
|
<span class="ant-statistic-content-value-int">{{ displayInt }}</span>
|
|
}
|
|
@if (displayDecimal) {
|
|
<span class="ant-statistic-content-value-decimal">{{ displayDecimal }}</span>
|
|
}
|
|
}
|
|
</span>
|
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzStatisticNumberComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
encapsulation: ViewEncapsulation.None,
|
|
selector: 'nz-statistic-number',
|
|
exportAs: 'nzStatisticNumber',
|
|
template: `
|
|
<span class="ant-statistic-content-value">
|
|
@if (nzValueTemplate) {
|
|
<ng-container
|
|
[ngTemplateOutlet]="nzValueTemplate"
|
|
[ngTemplateOutletContext]="{ $implicit: nzValue }"
|
|
></ng-container>
|
|
} @else {
|
|
@if (displayInt) {
|
|
<span class="ant-statistic-content-value-int">{{ displayInt }}</span>
|
|
}
|
|
@if (displayDecimal) {
|
|
<span class="ant-statistic-content-value-decimal">{{ displayDecimal }}</span>
|
|
}
|
|
}
|
|
</span>
|
|
`,
|
|
imports: [NgTemplateOutlet]
|
|
}]
|
|
}], propDecorators: { nzValue: [{
|
|
type: Input
|
|
}], nzValueTemplate: [{
|
|
type: Input
|
|
}] } });
|
|
|
|
/**
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
|
|
*/
|
|
class NzStatisticComponent {
|
|
nzPrefix;
|
|
nzSuffix;
|
|
nzTitle;
|
|
nzValue;
|
|
nzValueStyle = {};
|
|
nzValueTemplate;
|
|
nzLoading = false;
|
|
dir = 'ltr';
|
|
cdr = inject(ChangeDetectorRef);
|
|
destroyRef = inject(DestroyRef);
|
|
directionality = inject(Directionality);
|
|
ngOnInit() {
|
|
this.directionality.change?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(direction => {
|
|
this.dir = direction;
|
|
this.cdr.detectChanges();
|
|
});
|
|
this.dir = this.directionality.value;
|
|
}
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzStatisticComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: NzStatisticComponent, isStandalone: true, selector: "nz-statistic", inputs: { nzPrefix: "nzPrefix", nzSuffix: "nzSuffix", nzTitle: "nzTitle", nzValue: "nzValue", nzValueStyle: "nzValueStyle", nzValueTemplate: "nzValueTemplate", nzLoading: ["nzLoading", "nzLoading", booleanAttribute] }, host: { properties: { "class.ant-statistic-rtl": "dir === 'rtl'" }, classAttribute: "ant-statistic" }, exportAs: ["nzStatistic"], ngImport: i0, template: `
|
|
<div class="ant-statistic-title">
|
|
<ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
|
|
</div>
|
|
@if (nzLoading) {
|
|
<nz-skeleton class="ant-statistic-skeleton" [nzParagraph]="false" />
|
|
} @else {
|
|
<div class="ant-statistic-content" [style]="nzValueStyle">
|
|
@if (nzPrefix) {
|
|
<span class="ant-statistic-content-prefix">
|
|
<ng-container *nzStringTemplateOutlet="nzPrefix">{{ nzPrefix }}</ng-container>
|
|
</span>
|
|
}
|
|
<nz-statistic-number [nzValue]="nzValue" [nzValueTemplate]="nzValueTemplate"></nz-statistic-number>
|
|
@if (nzSuffix) {
|
|
<span class="ant-statistic-content-suffix">
|
|
<ng-container *nzStringTemplateOutlet="nzSuffix">{{ nzSuffix }}</ng-container>
|
|
</span>
|
|
}
|
|
</div>
|
|
}
|
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: NzSkeletonModule }, { kind: "component", type: i1.NzSkeletonComponent, selector: "nz-skeleton", inputs: ["nzActive", "nzLoading", "nzRound", "nzTitle", "nzAvatar", "nzParagraph"], exportAs: ["nzSkeleton"] }, { kind: "component", type: NzStatisticNumberComponent, selector: "nz-statistic-number", inputs: ["nzValue", "nzValueTemplate"], exportAs: ["nzStatisticNumber"] }, { kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i2.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzStatisticComponent, decorators: [{
|
|
type: Component,
|
|
args: [{
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
encapsulation: ViewEncapsulation.None,
|
|
selector: 'nz-statistic',
|
|
exportAs: 'nzStatistic',
|
|
template: `
|
|
<div class="ant-statistic-title">
|
|
<ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
|
|
</div>
|
|
@if (nzLoading) {
|
|
<nz-skeleton class="ant-statistic-skeleton" [nzParagraph]="false" />
|
|
} @else {
|
|
<div class="ant-statistic-content" [style]="nzValueStyle">
|
|
@if (nzPrefix) {
|
|
<span class="ant-statistic-content-prefix">
|
|
<ng-container *nzStringTemplateOutlet="nzPrefix">{{ nzPrefix }}</ng-container>
|
|
</span>
|
|
}
|
|
<nz-statistic-number [nzValue]="nzValue" [nzValueTemplate]="nzValueTemplate"></nz-statistic-number>
|
|
@if (nzSuffix) {
|
|
<span class="ant-statistic-content-suffix">
|
|
<ng-container *nzStringTemplateOutlet="nzSuffix">{{ nzSuffix }}</ng-container>
|
|
</span>
|
|
}
|
|
</div>
|
|
}
|
|
`,
|
|
host: {
|
|
class: 'ant-statistic',
|
|
'[class.ant-statistic-rtl]': `dir === 'rtl'`
|
|
},
|
|
imports: [NzSkeletonModule, NzStatisticNumberComponent, NzOutletModule]
|
|
}]
|
|
}], propDecorators: { nzPrefix: [{
|
|
type: Input
|
|
}], nzSuffix: [{
|
|
type: Input
|
|
}], nzTitle: [{
|
|
type: Input
|
|
}], nzValue: [{
|
|
type: Input
|
|
}], nzValueStyle: [{
|
|
type: Input
|
|
}], nzValueTemplate: [{
|
|
type: Input
|
|
}], nzLoading: [{
|
|
type: Input,
|
|
args: [{ transform: booleanAttribute }]
|
|
}] } });
|
|
|
|
/**
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
|
|
*/
|
|
const REFRESH_INTERVAL = 1000 / 30;
|
|
class NzCountdownComponent extends NzStatisticComponent {
|
|
ngZone = inject(NgZone);
|
|
platform = inject(Platform);
|
|
nzFormat = 'HH:mm:ss';
|
|
nzCountdownFinish = new EventEmitter();
|
|
diff;
|
|
target = 0;
|
|
intervalId = null;
|
|
constructor() {
|
|
super();
|
|
this.destroyRef.onDestroy(() => {
|
|
this.stopTimer();
|
|
});
|
|
}
|
|
ngOnChanges(changes) {
|
|
const { nzValue } = changes;
|
|
if (nzValue) {
|
|
this.target = Number(nzValue.currentValue);
|
|
if (!nzValue.isFirstChange()) {
|
|
this.syncTimer();
|
|
}
|
|
}
|
|
}
|
|
ngOnInit() {
|
|
super.ngOnInit();
|
|
this.syncTimer();
|
|
}
|
|
syncTimer() {
|
|
if (this.target >= Date.now()) {
|
|
this.startTimer();
|
|
}
|
|
else {
|
|
this.stopTimer();
|
|
}
|
|
}
|
|
startTimer() {
|
|
if (this.platform.isBrowser) {
|
|
this.ngZone.runOutsideAngular(() => {
|
|
this.stopTimer();
|
|
this.intervalId = setInterval(() => {
|
|
this.updateValue();
|
|
this.cdr.detectChanges();
|
|
}, REFRESH_INTERVAL);
|
|
});
|
|
}
|
|
}
|
|
stopTimer() {
|
|
if (this.intervalId) {
|
|
clearInterval(this.intervalId);
|
|
this.intervalId = 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzCountdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", 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: i1$1.NzTimeRangePipe, name: "nzTimeRange" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", 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]
|
|
}]
|
|
}], ctorParameters: () => [], propDecorators: { nzFormat: [{
|
|
type: Input
|
|
}], nzCountdownFinish: [{
|
|
type: Output
|
|
}] } });
|
|
|
|
/**
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
|
|
*/
|
|
class NzStatisticModule {
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzStatisticModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: NzStatisticModule, imports: [NzStatisticComponent, NzCountdownComponent, NzStatisticNumberComponent], exports: [NzStatisticComponent, NzCountdownComponent, NzStatisticNumberComponent] });
|
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzStatisticModule, imports: [NzStatisticComponent, NzCountdownComponent] });
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NzStatisticModule, decorators: [{
|
|
type: NgModule,
|
|
args: [{
|
|
imports: [NzStatisticComponent, NzCountdownComponent, NzStatisticNumberComponent],
|
|
exports: [NzStatisticComponent, NzCountdownComponent, NzStatisticNumberComponent]
|
|
}]
|
|
}] });
|
|
|
|
/**
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
|
|
*/
|
|
|
|
/**
|
|
* Generated bundle index. Do not edit.
|
|
*/
|
|
|
|
export { NzCountdownComponent, NzStatisticComponent, NzStatisticModule, NzStatisticNumberComponent };
|
|
//# sourceMappingURL=ng-zorro-antd-statistic.mjs.map
|