fix(module:progress): should not set success when success percent is … (

#3135)

* fix(module:progress): should not set success when success percent is given

close 3128

* feat: add encapsulation

* revert: revert package.json

* revert: test.ts

* fix: fix icon not removed

components/progress/demo/circle-dynamic.ts

@@ -8,7 +8,14 @@ import { Component } from '@angular/core';
       <button nz-button (click)="decline()"><i nz-icon type="minus"></i></button>
       <button nz-button (click)="increase()"><i nz-icon type="plus"></i></button>
     </nz-button-group>
-  `
+  `,
+  styles: [
+    `
+      nz-progress {
+        margin-right: 8px;
+      }
+    `
+  ]
 })
 export class NzDemoProgressCircleDynamicComponent {
   percent = 0;

components/progress/demo/round.md

@@ -0,0 +1,14 @@
+---
+order: 10
+title:
+  zh-CN: 圆角/方角边缘
+  en-US: Square linecaps
+---
+
+## zh-CN
+
+通过设定 `nzStrokeLinecap='square|round'` 可以调整进度条边缘的形状。
+
+## en-US
+
+By setting `nzStrokeLinecap='square'`, you can change the linecaps from round to square.

components/progress/demo/round.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-progress-round',
+  template: `
+    <nz-progress nzStrokeLinecap="square" nzPercent="75"></nz-progress>
+    <nz-progress nzStrokeLinecap="square" nzType="circle" nzPercent="75"></nz-progress>
+    <nz-progress nzStrokeLinecap="square" nzType="dashboard" nzPercent="75"></nz-progress>
+  `
+})
+export class NzDemoProgressRoundComponent {}

components/progress/nz-progress.component.html

@@ -1,61 +1,68 @@
 <ng-template #progressInfoTemplate>
   <span class="ant-progress-text" *ngIf="nzShowInfo">
-    <ng-container *ngIf="(nzStatus=='exception')||(nzStatus=='success')&&(!isFormatSet); else formatTemplate">
-      <!-- Theme is handled in type here. -->
-      <i nz-icon [nzType]="icon" [nzTheme]="iconTheme"></i>
+    <ng-container *ngIf="status === 'exception' || (status === 'success' && !nzFormat); else formatTemplate">
+      <i nz-icon [nzType]="icon"></i>
     </ng-container>
     <ng-template #formatTemplate>
-      {{ nzFormat(nzPercent) }}
+      {{ formatter(nzPercent) }}
     </ng-template>
   </span>
 </ng-template>
-<div [ngClass]="'ant-progress ant-progress-status-'+nzStatus"
-  [class.ant-progress-line]="nzType=='line'"
-  [class.ant-progress-small]="nzSize=='small'"
+<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">
-  <div *ngIf="nzType=='line'">
+  [class.ant-progress-circle]="isCircleStyle"
+>
+  <!-- Line progress -->
+  <div *ngIf="nzType === 'line'">
     <div class="ant-progress-outer">
       <div class="ant-progress-inner">
-        <div class="ant-progress-bg"
+        <div
+          class="ant-progress-bg"
           [style.width.%]="nzPercent"
           [style.border-radius]="nzStrokeLinecap === 'round' ? '100px' : '0'"
           [style.background]="nzStrokeColor"
-          [style.height.px]="nzStrokeWidth">
-        </div>
-        <div class="ant-progress-success-bg"
+          [style.height.px]="strokeWidth"
+        ></div>
+        <div
+          class="ant-progress-success-bg"
           [style.width.%]="nzSuccessPercent"
           [style.border-radius]="nzStrokeLinecap === 'round' ? '100px' : '0'"
-          [style.height.px]="nzStrokeWidth"></div>
+          [style.height.px]="strokeWidth"
+        ></div>
       </div>
     </div>
     <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>
   </div>
+  <!-- Circle/Dashboard progress -->
   <div
     [style.width.px]="this.nzWidth"
     [style.height.px]="this.nzWidth"
-    [style.fontSize.px]="this.nzWidth*0.15+6"
+    [style.fontSize.px]="this.nzWidth * 0.15 + 6"
     class="ant-progress-inner"
-    *ngIf="isCirCleStyle">
+    *ngIf="isCircleStyle"
+  >
     <svg class="ant-progress-circle " viewBox="0 0 100 100">
       <path
         class="ant-progress-circle-trail"
         stroke="#f3f3f3"
         fill-opacity="0"
-        [attr.stroke-width]="nzStrokeWidth"
+        [attr.stroke-width]="strokeWidth"
         [ngStyle]="trailPathStyle"
-        [attr.d]="pathString">
-      </path>
+        [attr.d]="pathString"
+      ></path>
       <path
         class="ant-progress-circle-path"
         [attr.d]="pathString"
         [attr.stroke-linecap]="nzStrokeLinecap"
         fill-opacity="0"
-        [attr.stroke]="nzStrokeColor || statusColorMap[nzStatus]"
-        [attr.stroke-width]="nzPercent?nzStrokeWidth:0"
-        [ngStyle]="strokePathStyle">
-      </path>
+        [attr.stroke]="nzStrokeColor || statusColorMap[status]"
+        [attr.stroke-width]="nzPercent ? strokeWidth : 0"
+        [ngStyle]="strokePathStyle"
+      ></path>
     </svg>
     <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>
   </div>
-</div>
+</div>