ng-zorro-antd/fesm2022/ng-zorro-antd-statistic.mjs

An enterprise-class UI components based on Ant Design and Angular

import { Platform } from '@angular/cdk/platform';
import * as i0 from '@angular/core';
import { inject, LOCALE_ID, Input, ViewEncapsulation, Component, booleanAttribute, ChangeDetectorRef, DestroyRef, 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 * 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 NzStatisticContentValueComponent {
    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: "22.0.6", ngImport: i0, type: NzStatisticContentValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NzStatisticContentValueComponent, isStandalone: true, selector: "nz-statistic-content-value", inputs: { nzValue: "nzValue", nzValueTemplate: "nzValueTemplate" }, host: { classAttribute: "ant-statistic-content-value" }, exportAs: ["nzStatisticContentValue"], usesOnChanges: true, ngImport: i0, template: `
    @if (nzValueTemplate) {
      <ng-container [ngTemplateOutlet]="nzValueTemplate" [ngTemplateOutletContext]="{ $implicit: nzValue }" />
    } @else {
      @if (displayInt) {
        <span class="ant-statistic-content-value-int">{{ displayInt }}</span>
      }
      @if (displayDecimal) {
        <span class="ant-statistic-content-value-decimal">{{ displayDecimal }}</span>
      }
    }
  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzStatisticContentValueComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'nz-statistic-content-value',
                    exportAs: 'nzStatisticContentValue',
                    encapsulation: ViewEncapsulation.None,
                    template: `
    @if (nzValueTemplate) {
      <ng-container [ngTemplateOutlet]="nzValueTemplate" [ngTemplateOutletContext]="{ $implicit: nzValue }" />
    } @else {
      @if (displayInt) {
        <span class="ant-statistic-content-value-int">{{ displayInt }}</span>
      }
      @if (displayDecimal) {
        <span class="ant-statistic-content-value-decimal">{{ displayDecimal }}</span>
      }
    }
  `,
                    imports: [NgTemplateOutlet],
                    host: {
                        class: 'ant-statistic-content-value'
                    }
                }]
        }], 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 {
    dir = inject(Directionality).valueSignal;
    nzPrefix;
    nzSuffix;
    nzTitle;
    nzValue;
    nzValueStyle = {};
    nzValueTemplate;
    nzLoading = false;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzStatisticComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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-content-value [nzValue]="nzValue" [nzValueTemplate]="nzValueTemplate" />
        @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: NzStatisticContentValueComponent, selector: "nz-statistic-content-value", inputs: ["nzValue", "nzValueTemplate"], exportAs: ["nzStatisticContentValue"] }, { kind: "ngmodule", type: NzOutletModule }, { kind: "directive", type: i2.NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzStatisticComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'nz-statistic',
                    exportAs: 'nzStatistic',
                    encapsulation: ViewEncapsulation.None,
                    imports: [NzSkeletonModule, NzStatisticContentValueComponent, NzOutletModule],
                    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-content-value [nzValue]="nzValue" [nzValueTemplate]="nzValueTemplate" />
        @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'`
                    }
                }]
        }], 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 {
    cdr = inject(ChangeDetectorRef);
    destroyRef = inject(DestroyRef);
    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() {
        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: "22.0.6", ngImport: i0, type: NzCountdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", 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"
    />

    <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" }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzCountdownComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'nz-countdown',
                    exportAs: 'nzCountdown',
                    encapsulation: ViewEncapsulation.None,
                    template: `
    <nz-statistic
      [nzValue]="diff"
      [nzValueStyle]="nzValueStyle"
      [nzValueTemplate]="nzValueTemplate || countDownTpl"
      [nzTitle]="nzTitle"
      [nzPrefix]="nzPrefix"
      [nzSuffix]="nzSuffix"
    />

    <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: "22.0.6", ngImport: i0, type: NzStatisticModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: NzStatisticModule, imports: [NzStatisticComponent, NzCountdownComponent, NzStatisticContentValueComponent], exports: [NzStatisticComponent, NzCountdownComponent, NzStatisticContentValueComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzStatisticModule, imports: [NzStatisticComponent, NzCountdownComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzStatisticModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [NzStatisticComponent, NzCountdownComponent, NzStatisticContentValueComponent],
                    exports: [NzStatisticComponent, NzCountdownComponent, NzStatisticContentValueComponent]
                }]
        }] });

/**
 * 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, NzStatisticContentValueComponent, NzStatisticModule };
//# sourceMappingURL=ng-zorro-antd-statistic.mjs.map