text: import { Directionality, BidiModule } from '@angular/cdk/bidi';
  import { CommonModule } from '@angular/common';
  import { Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, Optional, Input, NgModule } from '@angular/core';
  import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
  import { NzIconModule } from 'ng-zorro-antd/icon';
  import { __rest, __decorate, __metadata } from 'tslib';
  import { NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
  import { isNotNil, InputNumber } from 'ng-zorro-antd/core/util';
  import { Subject } from 'rxjs';
  import { takeUntil } from 'rxjs/operators';
  
  /**
   * 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
   */
  function stripPercentToNumber(percent) {
      return +percent.replace('%', '');
  }
  const sortGradient = (gradients) => {
      let tempArr = [];
      Object.keys(gradients).forEach(key => {
          const value = gradients[key];
          const formatKey = stripPercentToNumber(key);
          if (!isNaN(formatKey)) {
              tempArr.push({
                  key: formatKey,
                  value
              });
          }
      });
      tempArr = tempArr.sort((a, b) => a.key - b.key);
      return tempArr;
  };
  const handleCircleGradient = (strokeColor) => {
      return sortGradient(strokeColor).map(({ key, value }) => ({ offset: `${key}%`, color: value }));
  };
  const handleLinearGradient = (strokeColor) => {
      const { from = '#1890ff', to = '#1890ff', direction = 'to right' } = strokeColor, rest = __rest(strokeColor, ["from", "to", "direction"]);
      if (Object.keys(rest).length !== 0) {
          const sortedGradients = sortGradient(rest)
              .map(({ key, value }) => `${value} ${key}%`)
              .join(', ');
          return `linear-gradient(${direction}, ${sortedGradients})`;
      }
      return `linear-gradient(${direction}, ${from}, ${to})`;
  };
  
  /**
   * 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
   */
  let gradientIdSeed = 0;
  const NZ_CONFIG_MODULE_NAME = 'progress';
  const statusIconNameMap = new Map([
      ['success', 'check'],
      ['exception', 'close']
  ]);
  const statusColorMap = new Map([
      ['normal', '#108ee9'],
      ['exception', '#ff5500'],
      ['success', '#87d068']
  ]);
  const defaultFormatter = (p) => `${p}%`;
  const ɵ0 = defaultFormatter;
  class NzProgressComponent {
      constructor(cdr, nzConfigService, directionality) {
          this.cdr = cdr;
          this.nzConfigService = nzConfigService;
          this.directionality = directionality;
          this._nzModuleName = NZ_CONFIG_MODULE_NAME;
          this.nzShowInfo = true;
          this.nzWidth = 132;
          this.nzStrokeColor = undefined;
          this.nzSize = 'default';
          this.nzPercent = 0;
          this.nzStrokeWidth = undefined;
          this.nzGapDegree = undefined;
          this.nzType = 'line';
          this.nzGapPosition = 'top';
          this.nzStrokeLinecap = 'round';
          this.nzSteps = 0;
          this.steps = [];
          /** Gradient style when `nzType` is `line`. */
          this.lineGradient = null;
          /** If user uses gradient color. */
          this.isGradient = false;
          /** If the linear progress is a step progress. */
          this.isSteps = false;
          /**
           * Each progress whose `nzType` is circle or dashboard should have unique id to
           * define `<linearGradient>`.
           */
          this.gradientId = gradientIdSeed++;
          /** Paths to rendered in the template. */
          this.progressCirclePath = [];
          this.trailPathStyle = null;
          this.dir = 'ltr';
          this.trackByFn = (index) => `${index}`;
          this.cachedStatus = 'normal';
          this.inferredStatus = 'normal';
          this.destroy$ = new Subject();
      }
      get formatter() {
          return this.nzFormat || defaultFormatter;
      }
      get status() {
          return this.nzStatus || this.inferredStatus;
      }
      get strokeWidth() {
          return this.nzStrokeWidth || (this.nzType === 'line' && this.nzSize !== 'small' ? 8 : 6);
      }
      get isCircleStyle() {
          return this.nzType === 'circle' || this.nzType === 'dashboard';
      }
      ngOnChanges(changes) {
          const { nzSteps, nzGapPosition, nzStrokeLinecap, nzStrokeColor, nzGapDegree, nzType, nzStatus, nzPercent, nzSuccessPercent, nzStrokeWidth } = changes;
          if (nzStatus) {
              this.cachedStatus = this.nzStatus || this.cachedStatus;
          }
          if (nzPercent || nzSuccessPercent) {
              const fillAll = parseInt(this.nzPercent.toString(), 10) >= 100;
              if (fillAll) {
                  if ((isNotNil(this.nzSuccessPercent) && this.nzSuccessPercent >= 100) || this.nzSuccessPercent === undefined) {
                      this.inferredStatus = 'success';
                  }
              }
              else {
                  this.inferredStatus = this.cachedStatus;
              }
          }
          if (nzStatus || nzPercent || nzSuccessPercent || nzStrokeColor) {
              this.updateIcon();
          }
          if (nzStrokeColor) {
              this.setStrokeColor();
          }
          if (nzGapPosition || nzStrokeLinecap || nzGapDegree || nzType || nzPercent || nzStrokeColor || nzStrokeColor) {
              this.getCirclePaths();
          }
          if (nzPercent || nzSteps || nzStrokeWidth) {
              this.isSteps = this.nzSteps > 0;
              if (this.isSteps) {
                  this.getSteps();
              }
          }
      }
      ngOnInit() {
          var _a;
          this.nzConfigService
              .getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME)
              .pipe(takeUntil(this.destroy$))
              .subscribe(() => {
              this.updateIcon();
              this.setStrokeColor();
              this.getCirclePaths();
          });
          (_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();
      }
      updateIcon() {
          const ret = statusIconNameMap.get(this.status);
          this.icon = ret ? ret + (this.isCircleStyle ? '-o' : '-circle-fill') : '';
      }
      /**
       * Calculate step render configs.
       */
      getSteps() {
          const current = Math.floor(this.nzSteps * (this.nzPercent / 100));
          const stepWidth = this.nzSize === 'small' ? 2 : 14;
          const steps = [];
          for (let i = 0; i < this.nzSteps; i++) {
              let color;
              if (i <= current - 1) {
                  color = this.nzStrokeColor;
              }
              const stepStyle = {
                  backgroundColor: `${color}`,
                  width: `${stepWidth}px`,
                  height: `${this.strokeWidth}px`
              };
              steps.push(stepStyle);
          }
          this.steps = steps;
      }
      /**
       * Calculate paths when the type is circle or dashboard.
       */
      getCirclePaths() {
          if (!this.isCircleStyle) {
              return;
          }
          const values = isNotNil(this.nzSuccessPercent) ? [this.nzSuccessPercent, this.nzPercent] : [this.nzPercent];
          // Calculate shared styles.
          const radius = 50 - this.strokeWidth / 2;
          const gapPosition = this.nzGapPosition || (this.nzType === 'circle' ? 'top' : 'bottom');
          const len = Math.PI * 2 * radius;
          const gapDegree = this.nzGapDegree || (this.nzType === 'circle' ? 0 : 75);
          let beginPositionX = 0;
          let beginPositionY = -radius;
          let endPositionX = 0;
          let endPositionY = radius * -2;
          switch (gapPosition) {
              case 'left':
                  beginPositionX = -radius;
                  beginPositionY = 0;
                  endPositionX = radius * 2;
                  endPositionY = 0;
                  break;
              case 'right':
                  beginPositionX = radius;
                  beginPositionY = 0;
                  endPositionX = radius * -2;
                  endPositionY = 0;
                  break;
              case 'bottom':
                  beginPositionY = radius;
                  endPositionY = radius * 2;
                  break;
              default:
          }
          this.pathString = `M 50,50 m ${beginPositionX},${beginPositionY}
         a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY}
         a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
          this.trailPathStyle = {
              strokeDasharray: `${len - gapDegree}px ${len}px`,
              strokeDashoffset: `-${gapDegree / 2}px`,
              transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s'
          };
          // Calculate styles for each path.
          this.progressCirclePath = values
              .map((value, index) => {
              const isSuccessPercent = values.length === 2 && index === 0;
              return {
                  stroke: this.isGradient && !isSuccessPercent ? `url(#gradient-${this.gradientId})` : null,
                  strokePathStyle: {
                      stroke: !this.isGradient ? (isSuccessPercent ? statusColorMap.get('success') : this.nzStrokeColor) : null,
                      transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s',
                      strokeDasharray: `${((value || 0) / 100) * (len - gapDegree)}px ${len}px`,
                      strokeDashoffset: `-${gapDegree / 2}px`
                  }
              };
          })
              .reverse();
      }
      setStrokeColor() {
          const color = this.nzStrokeColor;
          const isGradient = (this.isGradient = !!color && typeof color !== 'string');
          if (isGradient && !this.isCircleStyle) {
              this.lineGradient = handleLinearGradient(color);
          }
          else if (isGradient && this.isCircleStyle) {
              this.circleGradient = handleCircleGradient(this.nzStrokeColor);
          }
          else {
              this.lineGradient = null;
              this.circleGradient = [];
          }
      }
  }
  NzProgressComponent.decorators = [
      { type: Component, args: [{
                  changeDetection: ChangeDetectionStrategy.OnPush,
                  encapsulation: ViewEncapsulation.None,
                  selector: 'nz-progress',
                  exportAs: 'nzProgress',
                  preserveWhitespaces: false,
                  template: `
      <ng-template #progressInfoTemplate>
        <span class="ant-progress-text" *ngIf="nzShowInfo">
          <ng-container *ngIf="(status === 'exception' || status === 'success') && !nzFormat; else formatTemplate">
            <i nz-icon [nzType]="icon"></i>
          </ng-container>
          <ng-template #formatTemplate>
            <ng-container *nzStringTemplateOutlet="formatter; context: { $implicit: nzPercent }; let formatter">
              {{ formatter(nzPercent) }}
            </ng-container>
          </ng-template>
        </span>
      </ng-template>
  
      <div
        [ngClass]="'ant-progress ant-progress-status-' + status"
        [class.ant-progress-line]="nzType == 'line'"
        [class.ant-progress-small]="nzSize == 'small'"
        [class.ant-progress-show-info]="nzShowInfo"
        [class.ant-progress-circle]="isCircleStyle"
        [class.ant-progress-steps]="isSteps"
        [class.ant-progress-rtl]="dir === 'rtl'"
      >
        <!-- line progress -->
        <div *ngIf="nzType === 'line'">
          <!-- normal line style -->
          <ng-container *ngIf="!isSteps">
            <div class="ant-progress-outer" *ngIf="!isSteps">
              <div class="ant-progress-inner">
                <div
                  class="ant-progress-bg"
                  [style.width.%]="nzPercent"
                  [style.border-radius]="nzStrokeLinecap === 'round' ? '100px' : '0'"
                  [style.background]="!isGradient ? nzStrokeColor : null"
                  [style.background-image]="isGradient ? lineGradient : null"
                  [style.height.px]="strokeWidth"
                ></div>
                <div
                  *ngIf="nzSuccessPercent || nzSuccessPercent === 0"
                  class="ant-progress-success-bg"
                  [style.width.%]="nzSuccessPercent"
                  [style.border-radius]="nzStrokeLinecap === 'round' ? '100px' : '0'"
                  [style.height.px]="strokeWidth"
                ></div>
              </div>
            </div>
            <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>
          </ng-container>
          <!-- step style -->
          <div class="ant-progress-steps-outer" *ngIf="isSteps">
            <div *ngFor="let step of steps; let i = index" class="ant-progress-steps-item" [ngStyle]="step"></div>
            <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>
          </div>
        </div>
  
        <!-- circle / dashboard progress -->
        <div
          [style.width.px]="this.nzWidth"
          [style.height.px]="this.nzWidth"
          [style.fontSize.px]="this.nzWidth * 0.15 + 6"
          class="ant-progress-inner"
          [class.ant-progress-circle-gradient]="isGradient"
          *ngIf="isCircleStyle"
        >
          <svg class="ant-progress-circle " viewBox="0 0 100 100">
            <defs *ngIf="isGradient">
              <linearGradient [id]="'gradient-' + gradientId" x1="100%" y1="0%" x2="0%" y2="0%">
                <stop *ngFor="let i of circleGradient" [attr.offset]="i.offset" [attr.stop-color]="i.color"></stop>
              </linearGradient>
            </defs>
            <path
              class="ant-progress-circle-trail"
              stroke="#f3f3f3"
              fill-opacity="0"
              [attr.stroke-width]="strokeWidth"
              [attr.d]="pathString"
              [ngStyle]="trailPathStyle"
            ></path>
            <path
              *ngFor="let p of progressCirclePath; trackBy: trackByFn"
              class="ant-progress-circle-path"
              fill-opacity="0"
              [attr.d]="pathString"
              [attr.stroke-linecap]="nzStrokeLinecap"
              [attr.stroke]="p.stroke"
              [attr.stroke-width]="nzPercent ? strokeWidth : 0"
              [ngStyle]="p.strokePathStyle"
            ></path>
          </svg>
          <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>
        </div>
      </div>
    `
              },] }
  ];
  NzProgressComponent.ctorParameters = () => [
      { type: ChangeDetectorRef },
      { type: NzConfigService },
      { type: Directionality, decorators: [{ type: Optional }] }
  ];
  NzProgressComponent.propDecorators = {
      nzShowInfo: [{ type: Input }],
      nzWidth: [{ type: Input }],
      nzStrokeColor: [{ type: Input }],
      nzSize: [{ type: Input }],
      nzFormat: [{ type: Input }],
      nzSuccessPercent: [{ type: Input }],
      nzPercent: [{ type: Input }],
      nzStrokeWidth: [{ type: Input }],
      nzGapDegree: [{ type: Input }],
      nzStatus: [{ type: Input }],
      nzType: [{ type: Input }],
      nzGapPosition: [{ type: Input }],
      nzStrokeLinecap: [{ type: Input }],
      nzSteps: [{ type: Input }]
  };
  __decorate([
      WithConfig(),
      __metadata("design:type", Boolean)
  ], NzProgressComponent.prototype, "nzShowInfo", void 0);
  __decorate([
      WithConfig(),
      __metadata("design:type", Object)
  ], NzProgressComponent.prototype, "nzStrokeColor", void 0);
  __decorate([
      WithConfig(),
      __metadata("design:type", String)
  ], NzProgressComponent.prototype, "nzSize", void 0);
  __decorate([
      InputNumber(),
      __metadata("design:type", Number)
  ], NzProgressComponent.prototype, "nzSuccessPercent", void 0);
  __decorate([
      InputNumber(),
      __metadata("design:type", Number)
  ], NzProgressComponent.prototype, "nzPercent", void 0);
  __decorate([
      WithConfig(),
      InputNumber(),
      __metadata("design:type", Number)
  ], NzProgressComponent.prototype, "nzStrokeWidth", void 0);
  __decorate([
      WithConfig(),
      InputNumber(),
      __metadata("design:type", Number)
  ], NzProgressComponent.prototype, "nzGapDegree", void 0);
  __decorate([
      WithConfig(),
      __metadata("design:type", String)
  ], NzProgressComponent.prototype, "nzGapPosition", void 0);
  __decorate([
      WithConfig(),
      __metadata("design:type", String)
  ], NzProgressComponent.prototype, "nzStrokeLinecap", void 0);
  __decorate([
      InputNumber(),
      __metadata("design:type", Number)
  ], NzProgressComponent.prototype, "nzSteps", void 0);
  
  /**
   * 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 NzProgressModule {
  }
  NzProgressModule.decorators = [
      { type: NgModule, args: [{
                  exports: [NzProgressComponent],
                  declarations: [NzProgressComponent],
                  imports: [BidiModule, CommonModule, NzIconModule, NzOutletModule]
              },] }
  ];
  
  /**
   * 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
   */
  
  /**
   * 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 { NzProgressComponent, NzProgressModule };
  //# sourceMappingURL=ng-zorro-antd-progress.js.map
  