ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
318 lines (309 loc) • 10.5 kB
JavaScript
import { Platform, PlatformModule } from '@angular/cdk/platform';
import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, EventEmitter, ChangeDetectorRef, NgZone, Output, Inject, LOCALE_ID, NgModule } from '@angular/core';
import { interval } from 'rxjs';
import { getLocaleNumberSymbol, NumberSymbol, CommonModule } from '@angular/common';
import { NzAddOnModule, NzPipesModule } from 'ng-zorro-antd/core';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @license
* Copyright Alibaba.com All Rights Reserved.
*
* 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
*/
/** @type {?} */
const REFRESH_INTERVAL = 1000 / 30;
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzStatisticComponent {
constructor() {
this.nzValueStyle = {};
}
}
NzStatisticComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
selector: 'nz-statistic',
exportAs: 'nzStatistic',
template: "<div class=\"ant-statistic-title\">\n <ng-container *nzStringTemplateOutlet=\"nzTitle\">{{ nzTitle }}</ng-container>\n</div>\n<div class=\"ant-statistic-content\" [ngStyle]=\"nzValueStyle\">\n <span *ngIf=\"nzPrefix\" class=\"ant-statistic-content-prefix\">\n <ng-container *nzStringTemplateOutlet=\"nzPrefix\">{{ nzPrefix }}</ng-container>\n </span>\n <nz-statistic-number\n [nzValue]=\"nzValue\"\n [nzValueTemplate]=\"nzValueTemplate\">\n </nz-statistic-number>\n <span *ngIf=\"nzSuffix\" class=\"ant-statistic-content-suffix\">\n <ng-container *nzStringTemplateOutlet=\"nzSuffix\">{{ nzSuffix }}</ng-container>\n </span>\n</div>\n",
host: {
class: 'ant-statistic'
},
styles: ['nz-statistic { display: block; }']
}] }
];
NzStatisticComponent.propDecorators = {
nzPrefix: [{ type: Input }],
nzSuffix: [{ type: Input }],
nzTitle: [{ type: Input }],
nzValue: [{ type: Input }],
nzValueStyle: [{ type: Input }],
nzValueTemplate: [{ type: Input }]
};
if (false) {
/** @type {?} */
NzStatisticComponent.prototype.nzPrefix;
/** @type {?} */
NzStatisticComponent.prototype.nzSuffix;
/** @type {?} */
NzStatisticComponent.prototype.nzTitle;
/** @type {?} */
NzStatisticComponent.prototype.nzValue;
/** @type {?} */
NzStatisticComponent.prototype.nzValueStyle;
/** @type {?} */
NzStatisticComponent.prototype.nzValueTemplate;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzCountdownComponent extends NzStatisticComponent {
/**
* @param {?} cdr
* @param {?} ngZone
* @param {?} platform
*/
constructor(cdr, ngZone, platform) {
super();
this.cdr = cdr;
this.ngZone = ngZone;
this.platform = platform;
/**
* @override
*/
this.nzFormat = 'HH:mm:ss';
this.nzCountdownFinish = new EventEmitter();
}
/**
* @override
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes.nzValue) {
this.target = Number(changes.nzValue.currentValue);
if (!changes.nzValue.isFirstChange()) {
this.syncTimer();
}
}
}
/**
* @return {?}
*/
ngOnInit() {
this.syncTimer();
}
/**
* @return {?}
*/
ngOnDestroy() {
this.stopTimer();
}
/**
* @return {?}
*/
syncTimer() {
if (this.target >= Date.now()) {
this.startTimer();
}
else {
this.stopTimer();
}
}
/**
* @return {?}
*/
startTimer() {
if (this.platform.isBrowser) {
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => {
this.stopTimer();
this.updater_ = interval(REFRESH_INTERVAL).subscribe((/**
* @return {?}
*/
() => {
this.updateValue();
this.cdr.detectChanges();
}));
}));
}
}
/**
* @return {?}
*/
stopTimer() {
if (this.updater_) {
this.updater_.unsubscribe();
this.updater_ = null;
}
}
/**
* Update time that should be displayed on the screen.
* @protected
* @return {?}
*/
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\n [nzValue]=\"diff\"\n [nzValueStyle]=\"nzValueStyle\"\n [nzValueTemplate]=\"nzValueTemplate || countDownTpl\"\n [nzTitle]=\"nzTitle\"\n [nzPrefix]=\"nzPrefix\"\n [nzSuffix]=\"nzSuffix\">\n</nz-statistic>\n\n<ng-template #countDownTpl>{{ diff | nzTimeRange: nzFormat }}</ng-template>"
}] }
];
/** @nocollapse */
NzCountdownComponent.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: NgZone },
{ type: Platform }
];
NzCountdownComponent.propDecorators = {
nzFormat: [{ type: Input }],
nzCountdownFinish: [{ type: Output }]
};
if (false) {
/**
* @override
* @type {?}
*/
NzCountdownComponent.prototype.nzFormat;
/** @type {?} */
NzCountdownComponent.prototype.nzCountdownFinish;
/** @type {?} */
NzCountdownComponent.prototype.diff;
/**
* @type {?}
* @private
*/
NzCountdownComponent.prototype.target;
/**
* @type {?}
* @private
*/
NzCountdownComponent.prototype.updater_;
/**
* @type {?}
* @private
*/
NzCountdownComponent.prototype.cdr;
/**
* @type {?}
* @private
*/
NzCountdownComponent.prototype.ngZone;
/**
* @type {?}
* @private
*/
NzCountdownComponent.prototype.platform;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzStatisticNumberComponent {
/**
* @param {?} locale_id
*/
constructor(locale_id) {
this.locale_id = locale_id;
this.displayInt = '';
this.displayDecimal = '';
}
/**
* @return {?}
*/
ngOnChanges() {
this.formatNumber();
}
/**
* @private
* @return {?}
*/
formatNumber() {
/** @type {?} */
const decimalSeparator = typeof this.nzValue === 'number' ? '.' : getLocaleNumberSymbol(this.locale_id, NumberSymbol.Decimal);
/** @type {?} */
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: "<ng-container\n *ngIf=\"nzValueTemplate\"\n [ngTemplateOutlet]=\"nzValueTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: nzValue }\">\n</ng-container>\n<ng-container *ngIf=\"!nzValueTemplate\">\n <span *ngIf=\"displayInt\" class=\"ant-statistic-content-value-int\">{{ displayInt }}</span>\n <span *ngIf=\"displayDecimal\" class=\"ant-statistic-content-value-decimal\">{{ displayDecimal }}</span>\n</ng-container>\n",
host: {
class: 'ant-statistic-content-value'
},
styles: ['nz-number { display: inline }']
}] }
];
/** @nocollapse */
NzStatisticNumberComponent.ctorParameters = () => [
{ type: String, decorators: [{ type: Inject, args: [LOCALE_ID,] }] }
];
NzStatisticNumberComponent.propDecorators = {
nzValue: [{ type: Input }],
nzValueTemplate: [{ type: Input }]
};
if (false) {
/** @type {?} */
NzStatisticNumberComponent.prototype.nzValue;
/** @type {?} */
NzStatisticNumberComponent.prototype.nzValueTemplate;
/** @type {?} */
NzStatisticNumberComponent.prototype.displayInt;
/** @type {?} */
NzStatisticNumberComponent.prototype.displayDecimal;
/**
* @type {?}
* @private
*/
NzStatisticNumberComponent.prototype.locale_id;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzStatisticModule {
}
NzStatisticModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, PlatformModule, NzAddOnModule, NzPipesModule],
declarations: [NzStatisticComponent, NzCountdownComponent, NzStatisticNumberComponent],
exports: [NzStatisticComponent, NzCountdownComponent, NzStatisticNumberComponent]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NzCountdownComponent, NzStatisticComponent, NzStatisticModule, NzStatisticNumberComponent };
//# sourceMappingURL=ng-zorro-antd-statistic.js.map