ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
294 lines (284 loc) • 15.1 kB
JavaScript
import * as i0 from '@angular/core';
import { LOCALE_ID, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, Optional, EventEmitter, Output, NgModule } from '@angular/core';
import { Subject, interval } from 'rxjs';
import * as i3 from 'ng-zorro-antd/core/pipe';
import { NzPipesModule } from 'ng-zorro-antd/core/pipe';
import { getLocaleNumberSymbol, NumberSymbol, NgIf, NgTemplateOutlet, NgStyle } from '@angular/common';
import { takeUntil } from 'rxjs/operators';
import * as i2 from 'ng-zorro-antd/core/outlet';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
import * as i1 from '@angular/cdk/bidi';
import * as i1$1 from '@angular/cdk/platform';
/**
* 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 {
constructor(locale_id) {
this.locale_id = locale_id;
this.displayInt = '';
this.displayDecimal = '';
}
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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NzStatisticNumberComponent, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", 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">
<ng-container
*ngIf="nzValueTemplate"
[ngTemplateOutlet]="nzValueTemplate"
[ngTemplateOutletContext]="{ $implicit: nzValue }"
></ng-container>
<ng-container *ngIf="!nzValueTemplate">
<span *ngIf="displayInt" class="ant-statistic-content-value-int">{{ displayInt }}</span>
<span *ngIf="displayDecimal" class="ant-statistic-content-value-decimal">{{ displayDecimal }}</span>
</ng-container>
</span>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "17.3.4", ngImport: i0, type: NzStatisticNumberComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
selector: 'nz-statistic-number',
exportAs: 'nzStatisticNumber',
template: `
<span class="ant-statistic-content-value">
<ng-container
*ngIf="nzValueTemplate"
[ngTemplateOutlet]="nzValueTemplate"
[ngTemplateOutletContext]="{ $implicit: nzValue }"
></ng-container>
<ng-container *ngIf="!nzValueTemplate">
<span *ngIf="displayInt" class="ant-statistic-content-value-int">{{ displayInt }}</span>
<span *ngIf="displayDecimal" class="ant-statistic-content-value-decimal">{{ displayDecimal }}</span>
</ng-container>
</span>
`,
imports: [NgIf, NgTemplateOutlet],
standalone: true
}]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [LOCALE_ID]
}] }], propDecorators: { nzValue: [{
type: Input
}], nzValueTemplate: [{
type: Input
}] } });
class NzStatisticComponent {
constructor(cdr, directionality) {
this.cdr = cdr;
this.directionality = directionality;
this.nzValueStyle = {};
this.dir = 'ltr';
this.destroy$ = new Subject();
}
ngOnInit() {
this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
this.dir = direction;
this.cdr.detectChanges();
});
this.dir = this.directionality.value;
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NzStatisticComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: NzStatisticComponent, isStandalone: true, selector: "nz-statistic", inputs: { nzPrefix: "nzPrefix", nzSuffix: "nzSuffix", nzTitle: "nzTitle", nzValue: "nzValue", nzValueStyle: "nzValueStyle", nzValueTemplate: "nzValueTemplate" }, 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>
<div class="ant-statistic-content" [ngStyle]="nzValueStyle">
<span *ngIf="nzPrefix" class="ant-statistic-content-prefix">
<ng-container *nzStringTemplateOutlet="nzPrefix">{{ nzPrefix }}</ng-container>
</span>
<nz-statistic-number [nzValue]="nzValue" [nzValueTemplate]="nzValueTemplate"></nz-statistic-number>
<span *ngIf="nzSuffix" class="ant-statistic-content-suffix">
<ng-container *nzStringTemplateOutlet="nzSuffix">{{ nzSuffix }}</ng-container>
</span>
</div>
`, isInline: true, dependencies: [{ kind: "component", type: NzStatisticNumberComponent, selector: "nz-statistic-number", inputs: ["nzValue", "nzValueTemplate"], exportAs: ["nzStatisticNumber"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i2.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", 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>
<div class="ant-statistic-content" [ngStyle]="nzValueStyle">
<span *ngIf="nzPrefix" class="ant-statistic-content-prefix">
<ng-container *nzStringTemplateOutlet="nzPrefix">{{ nzPrefix }}</ng-container>
</span>
<nz-statistic-number [nzValue]="nzValue" [nzValueTemplate]="nzValueTemplate"></nz-statistic-number>
<span *ngIf="nzSuffix" 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: [NzStatisticNumberComponent, NgIf, NzOutletModule, NgStyle],
standalone: true
}]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.Directionality, decorators: [{
type: Optional
}] }], propDecorators: { nzPrefix: [{
type: Input
}], nzSuffix: [{
type: Input
}], nzTitle: [{
type: Input
}], nzValue: [{
type: Input
}], nzValueStyle: [{
type: Input
}], nzValueTemplate: [{
type: Input
}] } });
const REFRESH_INTERVAL = 1000 / 30;
class NzCountdownComponent extends NzStatisticComponent {
constructor(cdr, ngZone, platform, directionality) {
super(cdr, directionality);
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: "17.3.4", ngImport: i0, type: NzCountdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.Platform }, { token: i1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", 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"], exportAs: ["nzStatistic"] }, { kind: "ngmodule", type: NzPipesModule }, { kind: "pipe", type: i3.NzTimeRangePipe, name: "nzTimeRange" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", 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.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$1.Platform }, { type: i1.Directionality, decorators: [{
type: Optional
}] }], 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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NzStatisticModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: NzStatisticModule, imports: [NzStatisticComponent, NzCountdownComponent, NzStatisticNumberComponent], exports: [NzStatisticComponent, NzCountdownComponent, NzStatisticNumberComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NzStatisticModule, imports: [NzStatisticComponent, NzCountdownComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", 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