ng-zorro-antd-statistic.mjs 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  1. import * as i0 from '@angular/core';
  2. import { inject, LOCALE_ID, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, ChangeDetectorRef, booleanAttribute, EventEmitter, Output, NgModule } from '@angular/core';
  3. import { Subject, interval } from 'rxjs';
  4. import * as i2$1 from 'ng-zorro-antd/core/pipe';
  5. import { NzPipesModule } from 'ng-zorro-antd/core/pipe';
  6. import { Directionality } from '@angular/cdk/bidi';
  7. import { takeUntil } from 'rxjs/operators';
  8. import * as i2 from 'ng-zorro-antd/core/outlet';
  9. import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
  10. import * as i1 from 'ng-zorro-antd/skeleton';
  11. import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
  12. import { getLocaleNumberSymbol, NumberSymbol, NgTemplateOutlet } from '@angular/common';
  13. import * as i1$1 from '@angular/cdk/platform';
  14. /**
  15. * Use of this source code is governed by an MIT-style license that can be
  16. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  17. */
  18. class NzStatisticNumberComponent {
  19. nzValue;
  20. nzValueTemplate;
  21. displayInt = '';
  22. displayDecimal = '';
  23. locale_id = inject(LOCALE_ID);
  24. ngOnChanges() {
  25. this.formatNumber();
  26. }
  27. formatNumber() {
  28. const decimalSeparator = typeof this.nzValue === 'number' ? '.' : getLocaleNumberSymbol(this.locale_id, NumberSymbol.Decimal);
  29. const value = String(this.nzValue);
  30. const [int, decimal] = value.split(decimalSeparator);
  31. this.displayInt = int;
  32. this.displayDecimal = decimal ? `${decimalSeparator}${decimal}` : '';
  33. }
  34. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzStatisticNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  35. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzStatisticNumberComponent, isStandalone: true, selector: "nz-statistic-number", inputs: { nzValue: "nzValue", nzValueTemplate: "nzValueTemplate" }, exportAs: ["nzStatisticNumber"], usesOnChanges: true, ngImport: i0, template: `
  36. <span class="ant-statistic-content-value">
  37. @if (nzValueTemplate) {
  38. <ng-container
  39. [ngTemplateOutlet]="nzValueTemplate"
  40. [ngTemplateOutletContext]="{ $implicit: nzValue }"
  41. ></ng-container>
  42. } @else {
  43. @if (displayInt) {
  44. <span class="ant-statistic-content-value-int">{{ displayInt }}</span>
  45. }
  46. @if (displayDecimal) {
  47. <span class="ant-statistic-content-value-decimal">{{ displayDecimal }}</span>
  48. }
  49. }
  50. </span>
  51. `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  52. }
  53. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzStatisticNumberComponent, decorators: [{
  54. type: Component,
  55. args: [{
  56. changeDetection: ChangeDetectionStrategy.OnPush,
  57. encapsulation: ViewEncapsulation.None,
  58. preserveWhitespaces: false,
  59. selector: 'nz-statistic-number',
  60. exportAs: 'nzStatisticNumber',
  61. template: `
  62. <span class="ant-statistic-content-value">
  63. @if (nzValueTemplate) {
  64. <ng-container
  65. [ngTemplateOutlet]="nzValueTemplate"
  66. [ngTemplateOutletContext]="{ $implicit: nzValue }"
  67. ></ng-container>
  68. } @else {
  69. @if (displayInt) {
  70. <span class="ant-statistic-content-value-int">{{ displayInt }}</span>
  71. }
  72. @if (displayDecimal) {
  73. <span class="ant-statistic-content-value-decimal">{{ displayDecimal }}</span>
  74. }
  75. }
  76. </span>
  77. `,
  78. imports: [NgTemplateOutlet]
  79. }]
  80. }], propDecorators: { nzValue: [{
  81. type: Input
  82. }], nzValueTemplate: [{
  83. type: Input
  84. }] } });
  85. /**
  86. * Use of this source code is governed by an MIT-style license that can be
  87. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  88. */
  89. class NzStatisticComponent {
  90. nzPrefix;
  91. nzSuffix;
  92. nzTitle;
  93. nzValue;
  94. nzValueStyle = {};
  95. nzValueTemplate;
  96. nzLoading = false;
  97. dir = 'ltr';
  98. destroy$ = new Subject();
  99. cdr = inject(ChangeDetectorRef);
  100. directionality = inject(Directionality);
  101. ngOnInit() {
  102. this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
  103. this.dir = direction;
  104. this.cdr.detectChanges();
  105. });
  106. this.dir = this.directionality.value;
  107. }
  108. ngOnDestroy() {
  109. this.destroy$.next();
  110. this.destroy$.complete();
  111. }
  112. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzStatisticComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  113. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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: `
  114. <div class="ant-statistic-title">
  115. <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
  116. </div>
  117. @if (nzLoading) {
  118. <nz-skeleton class="ant-statistic-skeleton" [nzParagraph]="false" />
  119. } @else {
  120. <div class="ant-statistic-content" [style]="nzValueStyle">
  121. @if (nzPrefix) {
  122. <span class="ant-statistic-content-prefix">
  123. <ng-container *nzStringTemplateOutlet="nzPrefix">{{ nzPrefix }}</ng-container>
  124. </span>
  125. }
  126. <nz-statistic-number [nzValue]="nzValue" [nzValueTemplate]="nzValueTemplate"></nz-statistic-number>
  127. @if (nzSuffix) {
  128. <span class="ant-statistic-content-suffix">
  129. <ng-container *nzStringTemplateOutlet="nzSuffix">{{ nzSuffix }}</ng-container>
  130. </span>
  131. }
  132. </div>
  133. }
  134. `, 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 });
  135. }
  136. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzStatisticComponent, decorators: [{
  137. type: Component,
  138. args: [{
  139. changeDetection: ChangeDetectionStrategy.OnPush,
  140. encapsulation: ViewEncapsulation.None,
  141. selector: 'nz-statistic',
  142. exportAs: 'nzStatistic',
  143. template: `
  144. <div class="ant-statistic-title">
  145. <ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
  146. </div>
  147. @if (nzLoading) {
  148. <nz-skeleton class="ant-statistic-skeleton" [nzParagraph]="false" />
  149. } @else {
  150. <div class="ant-statistic-content" [style]="nzValueStyle">
  151. @if (nzPrefix) {
  152. <span class="ant-statistic-content-prefix">
  153. <ng-container *nzStringTemplateOutlet="nzPrefix">{{ nzPrefix }}</ng-container>
  154. </span>
  155. }
  156. <nz-statistic-number [nzValue]="nzValue" [nzValueTemplate]="nzValueTemplate"></nz-statistic-number>
  157. @if (nzSuffix) {
  158. <span class="ant-statistic-content-suffix">
  159. <ng-container *nzStringTemplateOutlet="nzSuffix">{{ nzSuffix }}</ng-container>
  160. </span>
  161. }
  162. </div>
  163. }
  164. `,
  165. host: {
  166. class: 'ant-statistic',
  167. '[class.ant-statistic-rtl]': `dir === 'rtl'`
  168. },
  169. imports: [NzSkeletonModule, NzStatisticNumberComponent, NzOutletModule]
  170. }]
  171. }], propDecorators: { nzPrefix: [{
  172. type: Input
  173. }], nzSuffix: [{
  174. type: Input
  175. }], nzTitle: [{
  176. type: Input
  177. }], nzValue: [{
  178. type: Input
  179. }], nzValueStyle: [{
  180. type: Input
  181. }], nzValueTemplate: [{
  182. type: Input
  183. }], nzLoading: [{
  184. type: Input,
  185. args: [{ transform: booleanAttribute }]
  186. }] } });
  187. const REFRESH_INTERVAL = 1000 / 30;
  188. class NzCountdownComponent extends NzStatisticComponent {
  189. ngZone;
  190. platform;
  191. nzFormat = 'HH:mm:ss';
  192. nzCountdownFinish = new EventEmitter();
  193. diff;
  194. target = 0;
  195. updater_;
  196. constructor(ngZone, platform) {
  197. super();
  198. this.ngZone = ngZone;
  199. this.platform = platform;
  200. }
  201. ngOnChanges(changes) {
  202. if (changes.nzValue) {
  203. this.target = Number(changes.nzValue.currentValue);
  204. if (!changes.nzValue.isFirstChange()) {
  205. this.syncTimer();
  206. }
  207. }
  208. }
  209. ngOnInit() {
  210. super.ngOnInit();
  211. this.syncTimer();
  212. }
  213. ngOnDestroy() {
  214. this.stopTimer();
  215. }
  216. syncTimer() {
  217. if (this.target >= Date.now()) {
  218. this.startTimer();
  219. }
  220. else {
  221. this.stopTimer();
  222. }
  223. }
  224. startTimer() {
  225. if (this.platform.isBrowser) {
  226. this.ngZone.runOutsideAngular(() => {
  227. this.stopTimer();
  228. this.updater_ = interval(REFRESH_INTERVAL).subscribe(() => {
  229. this.updateValue();
  230. this.cdr.detectChanges();
  231. });
  232. });
  233. }
  234. }
  235. stopTimer() {
  236. if (this.updater_) {
  237. this.updater_.unsubscribe();
  238. this.updater_ = null;
  239. }
  240. }
  241. /**
  242. * Update time that should be displayed on the screen.
  243. */
  244. updateValue() {
  245. this.diff = Math.max(this.target - Date.now(), 0);
  246. if (this.diff === 0) {
  247. this.stopTimer();
  248. if (this.nzCountdownFinish.observers.length) {
  249. this.ngZone.run(() => this.nzCountdownFinish.emit());
  250. }
  251. }
  252. }
  253. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzCountdownComponent, deps: [{ token: i0.NgZone }, { token: i1$1.Platform }], target: i0.ɵɵFactoryTarget.Component });
  254. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: NzCountdownComponent, isStandalone: true, selector: "nz-countdown", inputs: { nzFormat: "nzFormat" }, outputs: { nzCountdownFinish: "nzCountdownFinish" }, exportAs: ["nzCountdown"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
  255. <nz-statistic
  256. [nzValue]="diff"
  257. [nzValueStyle]="nzValueStyle"
  258. [nzValueTemplate]="nzValueTemplate || countDownTpl"
  259. [nzTitle]="nzTitle"
  260. [nzPrefix]="nzPrefix"
  261. [nzSuffix]="nzSuffix"
  262. ></nz-statistic>
  263. <ng-template #countDownTpl>{{ diff | nzTimeRange: nzFormat }}</ng-template>
  264. `, 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$1.NzTimeRangePipe, name: "nzTimeRange" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  265. }
  266. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzCountdownComponent, decorators: [{
  267. type: Component,
  268. args: [{
  269. changeDetection: ChangeDetectionStrategy.OnPush,
  270. encapsulation: ViewEncapsulation.None,
  271. selector: 'nz-countdown',
  272. exportAs: 'nzCountdown',
  273. template: `
  274. <nz-statistic
  275. [nzValue]="diff"
  276. [nzValueStyle]="nzValueStyle"
  277. [nzValueTemplate]="nzValueTemplate || countDownTpl"
  278. [nzTitle]="nzTitle"
  279. [nzPrefix]="nzPrefix"
  280. [nzSuffix]="nzSuffix"
  281. ></nz-statistic>
  282. <ng-template #countDownTpl>{{ diff | nzTimeRange: nzFormat }}</ng-template>
  283. `,
  284. imports: [NzStatisticComponent, NzPipesModule]
  285. }]
  286. }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$1.Platform }], propDecorators: { nzFormat: [{
  287. type: Input
  288. }], nzCountdownFinish: [{
  289. type: Output
  290. }] } });
  291. /**
  292. * Use of this source code is governed by an MIT-style license that can be
  293. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  294. */
  295. class NzStatisticModule {
  296. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzStatisticModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  297. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzStatisticModule, imports: [NzStatisticComponent, NzCountdownComponent, NzStatisticNumberComponent], exports: [NzStatisticComponent, NzCountdownComponent, NzStatisticNumberComponent] });
  298. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzStatisticModule, imports: [NzStatisticComponent, NzCountdownComponent] });
  299. }
  300. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzStatisticModule, decorators: [{
  301. type: NgModule,
  302. args: [{
  303. imports: [NzStatisticComponent, NzCountdownComponent, NzStatisticNumberComponent],
  304. exports: [NzStatisticComponent, NzCountdownComponent, NzStatisticNumberComponent]
  305. }]
  306. }] });
  307. /**
  308. * Use of this source code is governed by an MIT-style license that can be
  309. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  310. */
  311. /**
  312. * Generated bundle index. Do not edit.
  313. */
  314. export { NzCountdownComponent, NzStatisticComponent, NzStatisticModule, NzStatisticNumberComponent };
  315. //# sourceMappingURL=ng-zorro-antd-statistic.mjs.map