feat(module:steps): support custom starting index

close #1994

components/steps/demo/start-index.md

@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh-CN: 起始序号
+  en-US: Starting Index
+---
+
+## zh-CN
+
+通过 `nzStartIndex` 来设置步骤条的起始序号. 请注意 `nzCurrent` 也应该有对应的偏移.
+
+## en-US
+
+By setting `nzStartIndex` to change starting index of a step component. Be sure to add an offset to `nzCurrent` as well.

components/steps/demo/start-index.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-steps-start-index',
+  template: `
+    <nz-steps [nzCurrent]="current" [nzStartIndex]="3" nzSize="small">
+      <nz-step nzTitle="Finished"></nz-step>
+      <nz-step nzTitle="In Progress"></nz-step>
+      <nz-step nzTitle="Waiting"></nz-step>
+    </nz-steps>
+  `
+})
+export class NzDemoStepsStartIndexComponent {
+  current = 3;
+}

components/steps/doc/index.en-US.md

@@ -32,6 +32,7 @@ The whole of the step bar.
 | `[nzProgressDot]` | Steps with progress dot style, customize the progress dot by setting it with TemplateRef | Boolean 丨 `TemplateRef<{ $implicit: TemplateRef<void>, status: string, index: number }>` | false |
 | `[nzSize]` | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` |
 | `[nzStatus]` | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |
+| `[nzStartIndex]` | to specify the starting number | number | 0 |
 
 ### nz-step
 

components/steps/doc/index.zh-CN.md

@@ -33,6 +33,7 @@ title: Steps
 | `[nzProgressDot]` | 点状步骤条，可以设置为一个 TemplateRef | Boolean 丨 `TemplateRef<{ $implicit: TemplateRef<void>, status: string, index: number }>` | false |
 | `[nzSize]` | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default |
 | `[nzStatus]` | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process |
+| `[nzStartIndex]` | 指定起始位置的序号 | number | 0 |
 
 ### nz-step
 

components/steps/nz-steps.component.ts

@@ -30,6 +30,7 @@ export class NzStepsComponent implements OnInit, OnDestroy, AfterContentInit {
   private _current = 0;
   private _size: NzSizeType = 'default';
   private _direction: NzDirectionType = 'horizontal';
+  private _startIndex = 0;
   private unsubscribe$ = new Subject<void>();
 
   stepsClassMap: object;
@@ -46,6 +47,16 @@ export class NzStepsComponent implements OnInit, OnDestroy, AfterContentInit {
     return this._size;
   }
 
+  @Input()
+  set nzStartIndex(value: number) {
+    this._startIndex = value;
+    this.updateChildrenSteps();
+  }
+
+  get nzStartIndex(): number {
+    return this._startIndex;
+  }
+
   @Input()
   set nzDirection(value: NzDirectionType) {
     this._direction = value;
@@ -108,7 +119,7 @@ export class NzStepsComponent implements OnInit, OnDestroy, AfterContentInit {
           step.customProcessTemplate = this.customProcessDotTemplate;
         }
         step.direction = this.nzDirection;
-        step.index = index;
+        step.index = index + this.nzStartIndex;
         step.currentIndex = this.nzCurrent;
         step.last = arr.length === index + 1;
         step.updateClassMap();

components/steps/nz-steps.spec.ts

@@ -115,6 +115,19 @@ describe('steps', () => {
       expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-icon').lastElementChild.classList.contains('ant-steps-icon-dot')).toBe(true);
       expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-icon').lastElementChild.classList.contains('ant-steps-icon-dot')).toBe(true);
     });
+    it('should support custom starting index', fakeAsync(() => {
+      fixture.detectChanges();
+      testComponent.startIndex = 3;
+      testComponent.current = 3;
+      tick();
+      fixture.detectChanges();
+      expect(innerSteps[ 0 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-process');
+      expect(innerSteps[ 1 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-wait');
+      expect(innerSteps[ 2 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-wait');
+      expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-icon').innerText).toBe('4');
+      expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-icon').innerText).toBe('5');
+      expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-icon').innerText).toBe('6');
+    }));
   });
   describe('inner step string', () => {
     let fixture;
@@ -197,7 +210,7 @@ describe('steps', () => {
 @Component({
   selector: 'nz-test-outer-steps',
   template: `
-    <nz-steps [nzCurrent]="current" [nzDirection]="direction" [nzSize]="size" [nzStatus]="status" [nzProgressDot]="progressDot">
+    <nz-steps [nzCurrent]="current" [nzDirection]="direction" [nzSize]="size" [nzStatus]="status" [nzProgressDot]="progressDot" [nzStartIndex]="startIndex">
       <nz-step nzTitle="0title" nzDescription="0description"></nz-step>
       <nz-step nzTitle="1title" nzDescription="1description"></nz-step>
       <nz-step nzTitle="2title" nzDescription="2description"></nz-step>
@@ -215,12 +228,13 @@ export class NzTestOuterStepsComponent {
   size = 'default';
   status = 'process';
   progressDot = false;
+  startIndex = 0;
 }
 
 @Component({
   selector: 'nz-test-inner-step-string',
   template: `
-    <nz-steps [nzCurrent]="1">
+    <nz-steps [nzCurrent]="current">
       <nz-step [nzTitle]="title" [nzDescription]="description" [nzIcon]="icon" [nzStatus]="status"></nz-step>
       <nz-step [nzTitle]="title" [nzDescription]="description" [nzIcon]="icon" [nzStatus]="status"></nz-step>
       <nz-step [nzTitle]="title" [nzDescription]="description" [nzIcon]="icon" [nzStatus]="status"></nz-step>
@@ -235,6 +249,7 @@ export class NzTestInnerStepStringComponent {
   @ViewChild('descriptionTemplate') descriptionTemplate: TemplateRef<void>;
   @ViewChild('iconTemplate') iconTemplate: TemplateRef<void>;
   status = 'process';
+  current = 1;
   icon = 'anticon anticon-user';
   title = 'title';
   description = 'description';