refactor(module:steps): refactor steps

* support label placement

components/core/interface/interface.ts

@@ -0,0 +1,3 @@
+export interface ClassMap {
+   [ key: string ]: boolean;
+}

components/core/style/map.ts

@@ -0,0 +1,3 @@
+export function classMapToString(map: { [ key: string ]: boolean }): string {
+  return Object.keys(map).filter(item => !!map[ item ]).join(' ');
+}

components/steps/demo/icon.md

@@ -7,7 +7,7 @@ title:
 
 ## zh-CN
 
-通过设置 `nz-step` 的 `nzIcon` 属性，可以启用自定义图标。旧的 API 仍然可用，但我们建议您迁移到新的 API。
+通过设置 `nz-step` 的 `nzIcon` 属性，可以启用自定义图标。
 
 ## en-US
 

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

@@ -27,12 +27,13 @@ The whole of the step bar.
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| `[nzCurrent]` | to set the current step, counting from 0. You can overwrite this state by using `nzStatus` of `nz-step` | number | 0 |
-| `[nzDirection]` | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal` |
+| `[nzCurrent]` | To set the current step, counting from 0. You can overwrite this state by using `nzStatus` of `nz-step` | number | 0 |
+| `[nzDirection]` | To specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal` |
+| `[nzLabelPlacement]` | Support vertical title and description | string | `horizontal` |
 | `[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 |
+| `[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

@@ -29,7 +29,8 @@ title: Steps
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `[nzCurrent]` | 指定当前步骤，从 0 开始记数。在子 `nz-step` 元素中，可以通过 `nzStatus` 属性覆盖状态 | number | 0 |
-| `[nzDirection]` | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | horizontal |
+| `[nzDirection]` | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | `horizontal` |
+| `[nzLabelPlacement]` | 指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方 | string | `horizontal` |
 | `[nzProgressDot]` | 点状步骤条，可以设置为一个 TemplateRef | Boolean 丨 `TemplateRef<{ $implicit: TemplateRef<void>, status: string, index: number }>` | false |
 | `[nzSize]` | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default |
 | `[nzStatus]` | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process |

components/steps/nz-step.component.html

@@ -7,15 +7,9 @@
 <div class="ant-steps-item-tail" *ngIf="last !== true"></div>
 <div class="ant-steps-item-icon">
   <ng-template [ngIf]="!showProcessDot">
-    <span class="ant-steps-icon" *ngIf="nzStatus === 'finish' && !nzIcon">
-      <i nz-icon type="check"></i>
-    </span>
-    <span class="ant-steps-icon" *ngIf="nzStatus === 'error'">
-      <i nz-icon type="close"></i>
-    </span>
-    <span class="ant-steps-icon" *ngIf="(nzStatus === 'process' || nzStatus === 'wait') && !nzIcon">
-      {{ index + 1 }}
-    </span>
+    <span class="ant-steps-icon" *ngIf="nzStatus === 'finish' && !nzIcon"><i nz-icon type="check"></i></span>
+    <span class="ant-steps-icon" *ngIf="nzStatus === 'error'"><i nz-icon type="close"></i></span>
+    <span class="ant-steps-icon" *ngIf="(nzStatus === 'process' || nzStatus === 'wait') && !nzIcon">{{ index + 1 }}</span>
     <span class="ant-steps-icon" *ngIf="nzIcon">
       <ng-container *ngIf="isIconString; else iconTemplate">
         <i nz-icon [type]="!oldAPIIcon && nzIcon" [ngClass]="oldAPIIcon && nzIcon"></i>
@@ -41,4 +35,4 @@
   <div class="ant-steps-item-description">
     <ng-container *ngIf="isDescriptionString; else descriptionTemplate">{{ nzDescription }}</ng-container>
   </div>
-</div>
+</div>

components/steps/nz-step.component.ts

@@ -1,52 +1,33 @@
-import {
-  Component,
-  ElementRef,
-  Input,
-  TemplateRef,
-  ViewChild
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, SimpleChanges, TemplateRef, ViewChild } from '@angular/core';
 
-import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
+import { classMapToString } from '../core/style/map';
 import { NgClassType } from '../core/types/ng-class';
 
 @Component({
+  changeDetection    : ChangeDetectionStrategy.OnPush,
   selector           : 'nz-step',
-  providers          : [ NzUpdateHostClassService ],
   preserveWhitespaces: false,
-  templateUrl        : './nz-step.component.html'
+  templateUrl        : './nz-step.component.html',
+  host               : {
+    '[class]': 'classString'
+  }
 })
-export class NzStepComponent {
-  private _status = 'wait';
-  private _currentIndex = 0;
-  private _description: string | TemplateRef<void>;
-  private _icon: NgClassType | TemplateRef<void>;
-  private _title: string | TemplateRef<void>;
-  private el: HTMLElement = this.elementRef.nativeElement;
-  oldAPIIcon = true; // Make the user defined icon compatible to old API. Should be removed in 2.0.
-  isCustomStatus = false;
-  isDescriptionString = true;
-  isTitleString = true;
-  isIconString = true;
-  last = false;
-  showProcessDot = false;
-  direction = 'horizontal';
-  outStatus = 'process';
-  index = 0;
+export class NzStepComponent implements OnChanges {
   @ViewChild('processDotTemplate') processDotTemplate: TemplateRef<void>;
-  customProcessTemplate: TemplateRef<{ $implicit: TemplateRef<void>, status: string, index: number }>;
 
   @Input()
+  get nzTitle(): string | TemplateRef<void> { return this._title; }
   set nzTitle(value: string | TemplateRef<void>) {
     this.isTitleString = !(value instanceof TemplateRef);
     this._title = value;
   }
-
-  get nzTitle(): string | TemplateRef<void> {
-    return this._title;
-  }
+  isTitleString = true;
+  private _title: string | TemplateRef<void>;
 
   @Input()
+  get nzIcon(): NgClassType | TemplateRef<void> { return this._icon; }
   set nzIcon(value: NgClassType | TemplateRef<void>) {
+    // TODO: old API compatibility should be abstracted.
     if (!(value instanceof TemplateRef)) {
       this.isIconString = true;
       if (typeof value === 'string') {
@@ -60,65 +41,72 @@ export class NzStepComponent {
     }
     this._icon = value;
   }
-
-  get nzIcon(): NgClassType | TemplateRef<void> {
-    return this._icon;
-  }
+  oldAPIIcon = true;
+  isIconString = true;
+  private _icon: NgClassType | TemplateRef<void>;
 
   @Input()
+  get nzStatus(): string { return this._status; }
   set nzStatus(status: string) {
     this._status = status;
     this.isCustomStatus = true;
-    this.updateClassMap();
-  }
-
-  get nzStatus(): string {
-    return this._status;
   }
+  isCustomStatus = false;
+  private _status = 'wait';
 
   @Input()
+  get nzDescription(): string | TemplateRef<void> { return this._description; }
   set nzDescription(value: string | TemplateRef<void>) {
     this.isDescriptionString = !(value instanceof TemplateRef);
     this._description = value;
   }
+  isDescriptionString = true;
+  private _description: string | TemplateRef<void>;
 
-  get nzDescription(): string | TemplateRef<void> {
-    return this._description;
-  }
-
-  get currentIndex(): number {
-    return this._currentIndex;
-  }
+  classString: string;
+  customProcessTemplate: TemplateRef<{ $implicit: TemplateRef<void>, status: string, index: number }>; // Set by parent.
+  direction = 'horizontal';
+  index = 0;
+  last = false;
+  outStatus = 'process';
+  showProcessDot = false;
 
+  get currentIndex(): number { return this._currentIndex; }
   set currentIndex(current: number) {
     this._currentIndex = current;
     if (!this.isCustomStatus) {
-      if (current > this.index) {
-        this._status = 'finish';
-      } else if (current === this.index) {
-        if (this.outStatus) {
-          this._status = this.outStatus;
-        }
-      } else {
-        this._status = 'wait';
-      }
+      this._status = current > this.index
+        ? 'finish' : current === this.index
+          ? this.outStatus || '' : 'wait';
+    }
+  }
+  private _currentIndex = 0;
+
+  constructor(private cdr: ChangeDetectorRef) { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.nzStatus || changes.nzIcon || changes.currentIndex) {
+      this.setClassString();
     }
-    this.updateClassMap();
   }
 
-  updateClassMap(): void {
-    const classMap = {
+  /**
+   * Sometimes status changes in `nz-steps` would affect `nz-step`'s behavior.
+   */
+  detectChanges(): void {
+    this.setClassString();
+    this.cdr.detectChanges();
+  }
+
+  private setClassString(): void {
+    this.classString = classMapToString({
       [ 'ant-steps-item' ]        : true,
       [ `ant-steps-item-wait` ]   : this.nzStatus === 'wait',
       [ `ant-steps-item-process` ]: this.nzStatus === 'process',
       [ `ant-steps-item-finish` ] : this.nzStatus === 'finish',
       [ `ant-steps-item-error` ]  : this.nzStatus === 'error',
       [ 'ant-steps-custom' ]      : !!this.nzIcon,
       [ 'ant-steps-next-error' ]  : (this.outStatus === 'error') && (this.currentIndex === this.index + 1)
-    };
-    this.nzUpdateHostClassService.updateHostClass(this.el, classMap);
-  }
-
-  constructor(private elementRef: ElementRef, private nzUpdateHostClassService: NzUpdateHostClassService) {
+    });
   }
 }