ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
241 lines (232 loc) • 8.57 kB
JavaScript
import { Platform, PlatformModule } from '@angular/cdk/platform';
import { Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, Optional, Input, EventEmitter, NgZone, Output, Inject, LOCALE_ID, NgModule } from '@angular/core';
import { Subject, interval } from 'rxjs';
import { Directionality, BidiModule } from '@angular/cdk/bidi';
import { takeUntil } from 'rxjs/operators';
import { getLocaleNumberSymbol, NumberSymbol, CommonModule } from '@angular/common';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
import { NzPipesModule } from 'ng-zorro-antd/core/pipe';
/**
* 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 {
constructor(cdr, directionality) {
this.cdr = cdr;
this.directionality = directionality;
this.nzValueStyle = {};
this.dir = 'ltr';
this.destroy$ = new Subject();
}
ngOnInit() {
var _a;
(_a = this.directionality.change) === null || _a === void 0 ? void 0 : _a.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
this.dir = direction;
this.cdr.detectChanges();
});
this.dir = this.directionality.value;
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}
NzStatisticComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
selector: 'nz-statistic',
exportAs: 'nzStatistic',
template: `
<div class="ant-statistic" [class.ant-statistic-rtl]="dir === 'rtl'">
<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>
</div>
`
},] }
];
NzStatisticComponent.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: Directionality, decorators: [{ type: Optional }] }
];
NzStatisticComponent.propDecorators = {
nzPrefix: [{ type: Input }],
nzSuffix: [{ type: Input }],
nzTitle: [{ type: Input }],
nzValue: [{ type: Input }],
nzValueStyle: [{ 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
*/
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();
this.nzCountdownFinish.emit();
}
}
}
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>
`
},] }
];
NzCountdownComponent.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: NgZone },
{ type: Platform },
{ type: Directionality, decorators: [{ type: Optional }] }
];
NzCountdownComponent.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 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}` : '';
}
}
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>
`
},] }
];
NzStatisticNumberComponent.ctorParameters = () => [
{ type: String, decorators: [{ type: Inject, args: [LOCALE_ID,] }] }
];
NzStatisticNumberComponent.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 NzStatisticModule {
}
NzStatisticModule.decorators = [
{ type: NgModule, args: [{
imports: [BidiModule, CommonModule, PlatformModule, NzOutletModule, NzPipesModule],
declarations: [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.js.map