feat(module: input-item): add label content api (#527)

components/input-item/demo/basic.ts

@@ -9,17 +9,14 @@ import { ToastService } from 'ng-zorro-antd-mobile';
       <div class="am-list" style="margin:0;">
         <div class="am-list-header">Money input</div>
         <div class="am-list-body">
-          <InputItem [type]="'money'" [clear]="true" [placeholder]="'start from left'" [moneyKeyboardAlign]="'left'">
-            光标在左
+          <InputItem [type]="'money'" [clear]="true" [placeholder]="'start from left'" [moneyKeyboardAlign]="'left'" [content]="'光标在左'">
           </InputItem>
-          <InputItem [type]="'money'" [clear]="true" [placeholder]="'start from rigth'">光标在右</InputItem>
-          <InputItem [type]="'money'" [clear]="true" [placeholder]="'money format'" [focus]="numberFocus">
-            数字键盘
+          <InputItem [type]="'money'" [clear]="true" [placeholder]="'start from rigth'" [content]="'光标在右'"></InputItem>
+          <InputItem [type]="'money'" [clear]="true" [placeholder]="'money format'" [focus]="numberFocus" [content]="'数字键盘'">
           </InputItem>
           <div class="am-list-item am-list-item-middle">
             <div class="am-list-line">
-              <div class="am-list-content" style="width:100%;color:#108ee9;text-align:center" (click)="clickFocus()">
-                click to focus
+              <div class="am-list-content" style="width:100%;color:#108ee9;text-align:center" (click)="clickFocus()">click to focus
               </div>
             </div>
             <div class="am-list-ripple" style="display: none;"></div>
@@ -29,9 +26,8 @@ import { ToastService } from 'ng-zorro-antd-mobile';
       <div class="am-list" style="margin:0;">
         <div class="am-list-header">Customize to focus</div>
         <div class="am-list-body">
-          <InputItem [clear]="true" [placeholder]="'auto focus'" [focus]="autoFocus">标题</InputItem>
-          <InputItem [clear]="true" [placeholder]="'click the button below to focus'" [focus]="inputFocus">
-            标题
+          <InputItem [clear]="true" [placeholder]="'auto focus'" [focus]="autoFocus" [content]="'标题'"></InputItem>
+          <InputItem [clear]="true" [placeholder]="'click the button below to focus'" [focus]="inputFocus" [content]="'标题'">
           </InputItem>
           <div class="am-list-item am-list-item-middle">
             <div class="am-list-line">
@@ -50,58 +46,60 @@ import { ToastService } from 'ng-zorro-antd-mobile';
       <div class="am-list" style="margin:0;">
         <div class="am-list-header">Click label to focus input</div>
         <div class="am-list-body">
-          <InputItem [placeholder]="'Click label to focus input'" [focus]="titleFocus">
+          <InputItem [placeholder]="'Click label to focus input'" [focus]="titleFocus" [content]="contentlabel">
+            <ng-template #contentlabel>
             <span (click)="clickTitle()">标题</span>
+            </ng-template>
           </InputItem>
         </div>
       </div>
       <div class="am-list" style="margin:0;">
         <div class="am-list-header">Show clear</div>
         <div class="am-list-body">
-          <InputItem [clear]="true" [placeholder]="'displayed clear while typing'">标题</InputItem>
+          <InputItem [clear]="true" [placeholder]="'displayed clear while typing'" [content]="'标题'"></InputItem>
         </div>
       </div>
       <div class="am-list" style="margin:0;">
         <div class="am-list-header">Number of words for the title</div>
         <div class="am-list-body">
-          <InputItem [clear]="true" [labelNumber]="5" [placeholder]="'limited title length'">
-            标题过长超过5个字符
+          <InputItem [clear]="true" [labelNumber]="5" [placeholder]="'limited title length'" [content]="'标题过长超过5个字符'">
           </InputItem>
         </div>
       </div>
       <div class="am-list" style="margin:0;">
         <div class="am-list-header">Custom title（text / image / empty)</div>
         <div class="am-list-body">
           <InputItem [placeholder]="'no label'"></InputItem>
-          <InputItem [placeholder]="'title can be icon，image or text'">
-            <div
+          <InputItem [placeholder]="'title can be icon，image or text'" [content]="content">
+          <ng-template #content>
+          <div
               style="background-image:url(https://zos.alipayobjects.com/rmsportal/DfkJHaJGgMghpXdqNaKF.png); background-size:cover;height:22px; width: 22px "
             ></div>
+            </ng-template>
           </InputItem>
         </div>
       </div>
       <div class="am-list" style="margin:0;">
         <div class="am-list-header">Customize the extra content in the right</div>
         <div class="am-list-body">
-          <InputItem [placeholder]="'0.00'" [extra]="'¥'">价格</InputItem>
+          <InputItem [placeholder]="'0.00'" [extra]="'¥'" [content]="'价格'"></InputItem>
         </div>
       </div>
       <div class="am-list" style="margin:0;">
         <div class="am-list-header">Format</div>
         <div class="am-list-body">
-          <InputItem [type]="'bankCard'" [defaultValue]="'8888 8888 8888 8888'">银行卡</InputItem>
-          <InputItem [type]="'phone'" [placeholder]="'186 1234 1234'" (onChange)="inputChange($event)">
-            手机号码
+          <InputItem [type]="'bankCard'" [defaultValue]="'8888 8888 8888 8888'" [content]="'银行卡'"></InputItem>
+          <InputItem [type]="'phone'" [placeholder]="'186 1234 1234'" (onChange)="inputChange($event)" [content]="'手机号码'">
           </InputItem>
-          <InputItem [type]="'password'" [placeholder]="'****'">密码</InputItem>
-          <InputItem [type]="'number'" [placeholder]="'click to show number keyboard'">数字键盘</InputItem>
+          <InputItem [type]="'password'" [placeholder]="'****'" [content]="'密码'"></InputItem>
+          <InputItem [type]="'number'" [placeholder]="'click to show number keyboard'" [content]="'数字键盘'"></InputItem>
         </div>
       </div>
       <div class="am-list" style="margin:0;">
         <div class="am-list-header">Not editable / Disabled</div>
         <div class="am-list-body">
-          <InputItem [editable]="false" [value]="'not editable'">姓名</InputItem>
-          <InputItem [disabled]="true" [value]="'style of disabled InputItem'">姓名</InputItem>
+          <InputItem [editable]="false" [value]="'not editable'" [content]="'姓名'"></InputItem>
+          <InputItem [disabled]="true" [value]="'style of disabled InputItem'" [content]="'姓名'"></InputItem>
         </div>
       </div>
       <div class="am-list" style="margin:0;">
@@ -112,10 +110,10 @@ import { ToastService } from 'ng-zorro-antd-mobile';
             [placeholder]="'input your phone'"
             [value]="value"
             [error]="error"
+            [content]="'手机号码'"
             (onErrorClick)="inputErrorClick($event)"
             (onChange)="inputChange($event)"
           >
-            手机号码
           </InputItem>
         </div>
       </div>

components/input-item/doc/index.en-US.md

@@ -32,6 +32,7 @@ Properties | Descrition | Type | Default
 | extra       | the right content of `InputItem`   | string or TemplateRef |  ''  |
 | onExtraClick      | callback that is called when the extra content is clicked | (e: Object): void | <span> </span> |
 | labelNumber  | number of label text, valid value is 2 to 7 | number | `5` |
+| content  | content of label text | TemplateRef or String |  |
 | updatePlaceholder | whether to replace the placeholder with cleared content | bool | false|
 | prefixListCls  |   the class name prefix of list      | String |  `am-list`  |
 | moneyKeyboardAlign    | text align direction, only `type='money'` support this api， could be `'left'`, `'right'`       | String |  'right'  |

components/input-item/doc/index.zh-CN.md

@@ -35,6 +35,7 @@ subtitle: 文本输入
 | extra       | 右边注释   | string or TemplateRef |  ''  |
 | onExtraClick      | extra 点击事件触发的回调函数 | (e: Object): void |  无  |
 | labelNumber  | 标签的文字个数，可用`2-7`之间的数字 | number | `5` |
+| content  | 标签内容支持string和模版 | TemplateRef 或者 String |  |
 | updatePlaceholder | 当清除内容时，是否将清除前的内容替换到 placeholder 中 | bool |  false  |
 | prefixListCls  |   列表 className 前缀      | String |  `am-list`  |
 | moneyKeyboardAlign   | 文字排版起始方向, 只有 `type='money'` 支持， 可选为 `'left'`, `'right'`       | String |  'right'  |

components/input-item/input-item.component.html

@@ -1,6 +1,7 @@
 <div class="{{ prefixListCls }}-line">
   <div #lableContent [ngClass]="labelCls">
-    <ng-content></ng-content>
+    <ng-template *ngIf="isTemplateRef(content)" [ngTemplateOutlet]="content"></ng-template>
+    <ng-container *ngIf="!isTemplateRef(content)">{{content}}</ng-container>
   </div>
   <div [ngClass]="controlCls">
     <CustomInput

components/input-item/input-item.component.spec.ts

@@ -228,6 +228,12 @@ describe('InputComponent', () => {
     const labelEle = inputItem.nativeElement.querySelector('.am-input-label');
     expect(labelEle.classList).toContain('am-input-label-3');
   });
+  it('should content work', () => {
+    component.content = 'test content';
+    fixture.detectChanges();
+    const labelEle = inputModel.nativeElement.querySelector('.am-input-label');
+    expect(labelEle.innerText).toContain('test content');
+  });
   it('should updatePlaceholder work', () => {
     component.updatePlaceholder = true;
     component.value = 'hahah';
@@ -434,7 +440,7 @@ describe('InputComponent', () => {
     >
       <span (click)="clickTitle()">标题</span>
     </InputItem>
-    <InputItem class="input-item-1" [(ngModel)]="modelValue"></InputItem>
+    <InputItem class="input-item-1" [(ngModel)]="modelValue" [content]="content"></InputItem>
     <div class="am-list-content" click="blurFocus()">click to focus</div>
     <ng-template #extraTemplate>#</ng-template>
   `
@@ -459,6 +465,7 @@ export class TestInputComponent {
   moneyKeyboardAlign: string = 'right';
   locale;
   focus;
+  content = 'content';
 
   @ViewChild(InputItemComponent)
   inputItemComp: InputItemComponent;

components/input-item/input-item.component.ts

@@ -11,9 +11,11 @@ import {
   Renderer2,
   ElementRef,
   forwardRef,
-  TemplateRef
+  TemplateRef,
+  AfterViewChecked
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { isTemplateRef } from '../core/util/check';
 
 @Component({
   selector: 'InputItem, nzm-input-item',
@@ -36,6 +38,7 @@ export class InputItemComponent implements OnInit, AfterViewInit, ControlValueAc
   autoFocus: boolean = false;
   inputType: string = 'text';
   ngTemplate: boolean = false;
+  isTemplateRef = isTemplateRef;
 
   private _el: HTMLElement;
   private _type: string = 'text';
@@ -57,8 +60,10 @@ export class InputItemComponent implements OnInit, AfterViewInit, ControlValueAc
   private _focus: boolean = false;
   private _isClear: boolean = false;
   private _fontColor: string;
+  private _content: string | TemplateRef<any> = '';
   private _inputLock = false;
 
+
   @ViewChild('lableContent')
   lableRef;
   @ViewChild('inputElement')
@@ -220,6 +225,14 @@ export class InputItemComponent implements OnInit, AfterViewInit, ControlValueAc
       }
     }
   }
+  @Input()
+  get content() {
+    return this._content;
+  }
+  set content(value: string | TemplateRef<any>) {
+    this._content = value;
+    this.setCls();
+  }
 
   @Output()
   onChange: EventEmitter<any> = new EventEmitter<any>();
@@ -252,7 +265,8 @@ export class InputItemComponent implements OnInit, AfterViewInit, ControlValueAc
   setCls() {
     if (
       this.lableRef.nativeElement.children.length > 0 ||
-      (this.lableRef.nativeElement && this.lableRef.nativeElement.innerText !== '')
+      (this.lableRef.nativeElement && this.lableRef.nativeElement.innerText !== '') ||
+      this._content != undefined
     ) {
       this.labelCls = {
         [`${this.prefixCls}-label`]: true,