feat(module:mentions): support setting status (#7467)

* feat(module:mentions): support setting status

* feat(module:mentions): change demos from input to textarea

* feat(module:mentions): add tests for status

components/mention/demo/async.ts

@@ -7,7 +7,7 @@ import { MentionOnSearchTypes } from 'ng-zorro-antd/mention';
   encapsulation: ViewEncapsulation.None,
   template: `
     <nz-mention [nzSuggestions]="suggestions" [nzLoading]="loading" (nzOnSearchChange)="onSearchChange($event)">
-      <input nzMentionTrigger nz-input [(ngModel)]="inputValue" />
+      <textarea rows="1" nzMentionTrigger nz-input [(ngModel)]="inputValue"></textarea>
     </nz-mention>
   `
 })

components/mention/demo/avatar.md

@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 6
 title:
   zh-CN: 头像
   en-US: Icon Image

components/mention/demo/avatar.ts

@@ -5,7 +5,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
   encapsulation: ViewEncapsulation.None,
   template: `
     <nz-mention [nzSuggestions]="webFrameworks" [nzValueWith]="valueWith" (nzOnSelect)="onSelect($event)">
-      <input nz-input nzMentionTrigger [(ngModel)]="inputValue" />
+      <textarea rows="1" nz-input nzMentionTrigger [(ngModel)]="inputValue"></textarea>
       <ng-container *nzMentionSuggestion="let framework">
         <nz-avatar nzSize="small" [nzText]="framework.name" [nzSrc]="framework.icon"></nz-avatar>
         <span>{{ framework.name }} - {{ framework.type }}</span>

components/mention/demo/basic.ts

@@ -5,13 +5,14 @@ import { Component, ViewEncapsulation } from '@angular/core';
   encapsulation: ViewEncapsulation.None,
   template: `
     <nz-mention [nzSuggestions]="suggestions" (nzOnSelect)="onSelect($event)">
-      <input
+      <textarea
+        rows="1"
         placeholder="input here"
         nzMentionTrigger
         nz-input
         [(ngModel)]="inputValue"
         (ngModelChange)="onChange($event)"
-      />
+      ></textarea>
     </nz-mention>
   `
 })

components/mention/demo/custom-tag.md

@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 7
 title:
   zh-CN: 自定义建议
   en-US: Customize Suggestion

components/mention/demo/custom-tag.ts

@@ -5,7 +5,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
   encapsulation: ViewEncapsulation.None,
   template: `
     <nz-mention [nzSuggestions]="webFrameworks" [nzValueWith]="valueWith" (nzOnSelect)="onSelect($event)">
-      <input placeholder="@someone" nz-input nzMentionTrigger [(ngModel)]="inputValue" />
+      <textarea rows="1" placeholder="@someone" nz-input nzMentionTrigger [(ngModel)]="inputValue"></textarea>
       <ng-container *nzMentionSuggestion="let framework">
         <span>{{ framework.name }} - {{ framework.type }}</span>
       </ng-container>

components/mention/demo/controlled.md → components/mention/demo/form.md

@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 2
 title:
   zh-CN: 配合 Form 使用
   en-US: With Form

components/mention/demo/controlled.ts → components/mention/demo/form.ts

@@ -4,15 +4,22 @@ import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from
 import { NzMentionComponent } from 'ng-zorro-antd/mention';
 
 @Component({
-  selector: 'nz-demo-mention-controlled',
+  selector: 'nz-demo-mention-form',
   encapsulation: ViewEncapsulation.None,
   template: `
     <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
       <nz-form-item>
         <nz-form-label [nzSm]="6" nzFor="mention">Top coders</nz-form-label>
         <nz-form-control [nzSm]="16" nzErrorTip="More than one must be selected!">
           <nz-mention #mentions [nzSuggestions]="suggestions">
-            <input id="mention" placeholder="input here" formControlName="mention" nzMentionTrigger nz-input />
+            <textarea
+              rows="1"
+              id="mention"
+              placeholder="input here"
+              formControlName="mention"
+              nzMentionTrigger
+              nz-input
+            ></textarea>
           </nz-mention>
         </nz-form-control>
       </nz-form-item>
@@ -26,7 +33,7 @@ import { NzMentionComponent } from 'ng-zorro-antd/mention';
     </form>
   `
 })
-export class NzDemoMentionControlledComponent implements OnInit {
+export class NzDemoMentionFormComponent implements OnInit {
   suggestions = ['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご'];
   validateForm!: FormGroup;
   @ViewChild('mentions', { static: true }) mentionChild!: NzMentionComponent;

components/mention/demo/multilines.md

@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 8
 title:
   zh-CN: 多行
   en-US: Multi-lines Mode

components/mention/demo/placement.md

@@ -1,5 +1,5 @@
 ---
-order: 0
+order: 5
 title:
   zh-CN: 向上展开
   en-US: Placement

components/mention/demo/placement.ts

@@ -5,7 +5,13 @@ import { Component, ViewEncapsulation } from '@angular/core';
   encapsulation: ViewEncapsulation.None,
   template: `
     <nz-mention nzPlacement="top" [nzSuggestions]="suggestions" (nzOnSelect)="onSelect($event)">
-      <input nzMentionTrigger nz-input [(ngModel)]="inputValue" (ngModelChange)="onChange($event)" />
+      <textarea
+        rows="1"
+        nzMentionTrigger
+        nz-input
+        [(ngModel)]="inputValue"
+        (ngModelChange)="onChange($event)"
+      ></textarea>
     </nz-mention>
   `
 })

components/mention/demo/multiple-trigger.md → components/mention/demo/prefix.md

@@ -1,5 +1,5 @@
 ---
-order: 8
+order: 3
 title:
   zh-CN: 自定义触发字符
   en-US: Customize Trigger Token

components/mention/demo/multiple-trigger.ts → components/mention/demo/prefix.ts

@@ -3,20 +3,21 @@ import { Component, ViewEncapsulation } from '@angular/core';
 import { MentionOnSearchTypes } from 'ng-zorro-antd/mention';
 
 @Component({
-  selector: 'nz-demo-mention-multiple-trigger',
+  selector: 'nz-demo-mention-prefix',
   encapsulation: ViewEncapsulation.None,
   template: `
     <nz-mention [nzSuggestions]="suggestions" (nzOnSearchChange)="onSearchChange($event)" [nzPrefix]="['#', '@']">
-      <input
+      <textarea
+        rows="1"
         placeholder="input @ to mention people, # to mention tag"
         nzMentionTrigger
         nz-input
         [(ngModel)]="inputValue"
-      />
+      ></textarea>
     </nz-mention>
   `
 })
-export class NzDemoMentionMultipleTriggerComponent {
+export class NzDemoMentionPrefixComponent {
   inputValue?: string;
   suggestions: string[] = [];
   users = ['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご'];

components/mention/demo/readonly.md

@@ -1,5 +1,5 @@
 ---
-order: 7
+order: 4
 title:
   zh-CN: 无效或只读
   en-US: disabled or readOnly

components/mention/demo/readonly.ts

@@ -4,16 +4,25 @@ import { Component, ViewEncapsulation } from '@angular/core';
   selector: 'nz-demo-mention-readonly',
   encapsulation: ViewEncapsulation.None,
   template: `
-    <nz-mention [nzSuggestions]="suggestions">
-      <input
-        style="margin-bottom: 10px"
+    <nz-mention [nzSuggestions]="suggestions" style="margin-bottom: 8px">
+      <textarea
+        rows="1"
         placeholder="this is disabled Mention"
         nzMentionTrigger
         nz-input
         disabled
         [(ngModel)]="inputValue"
-      />
-      <input placeholder="this is readOnly Mention" nzMentionTrigger nz-input readOnly [(ngModel)]="inputValue" />
+      ></textarea>
+    </nz-mention>
+    <nz-mention [nzSuggestions]="suggestions">
+      <textarea
+        rows="1"
+        placeholder="this is readOnly Mention"
+        nzMentionTrigger
+        nz-input
+        readOnly
+        [(ngModel)]="inputValue"
+      ></textarea>
     </nz-mention>
   `
 })

components/mention/demo/status.md

@@ -0,0 +1,14 @@
+---
+order: 10
+title:
+  zh-CN: 自定义状态
+  en-US: Status
+---
+
+## zh-CN
+
+使用 `nzStatus` 为 Mentions 添加状态。可选 `error` 或者 `warning`。
+
+## en-US
+
+Add status to Mentions with `nzStatus`, which could be `error` or `warning`。

components/mention/demo/status.ts

@@ -0,0 +1,18 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-mention-status',
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <nz-mention [nzSuggestions]="suggestions" nzStatus="error" style="margin-bottom: 8px;">
+      <textarea rows="1" nz-input placeholder="input here" [(ngModel)]="inputValue" nzMentionTrigger></textarea>
+    </nz-mention>
+    <nz-mention [nzSuggestions]="suggestions" nzStatus="warning">
+      <textarea rows="1" nz-input placeholder="input here" [(ngModel)]="inputValue" nzMentionTrigger></textarea>
+    </nz-mention>
+  `
+})
+export class NzDemoMentionStatusComponent {
+  inputValue: string = '@afc163';
+  suggestions = ['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご'];
+}

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

@@ -38,6 +38,7 @@ import { NzMentionModule } from 'ng-zorro-antd/mention';
 | `[nzPlacement]` | The position of the suggestion relative to the target, which can be one of top and bottom | `'button' \| 'top'` | `'bottom'` |
 | `[nzPrefix]` | Character which will trigger Mention to show mention list | `string \| string[]` | `'@'` |
 | `[nzSuggestions]` | Suggestion content | `any[]` | `[]` |
+| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
 | `[nzValueWith]` | Function that maps an suggestion's value  | `(any) => string \| (value: string) => string` |
 | `(nzOnSelect)` | Callback function called when select from suggestions | `EventEmitter<any>` | - |
 | `(nzOnSearchChange)` | Callback function called when search content changes| `EventEmitter<MentionOnSearchTypes>` | - |

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

@@ -39,6 +39,7 @@ import { NzMentionModule } from 'ng-zorro-antd/mention';
 | `[nzPlacement]` | 建议框位置 | `'bottom' \| 'top'` | `'bottom'` |
 | `[nzPrefix]` | 触发弹出下拉框的字符 | `string \| string[]` | `'@'` |
 | `[nzSuggestions]` | 建议内容 | `any[]` | `[]` |
+| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
 | `[nzValueWith]` | 建议选项的取值方法  | `(any) => string \| (value: string) => string` |
 | `(nzOnSelect)` | 下拉框选择建议时回调 | `EventEmitter<any>` | - |
 | `(nzOnSearchChange)` | 输入框中 @ 变化时回调 | `EventEmitter<MentionOnSearchTypes>` | - |

components/mention/mention.component.ts

@@ -32,6 +32,7 @@ import {
   Optional,
   Output,
   QueryList,
+  Renderer2,
   SimpleChanges,
   TemplateRef,
   ViewChild,
@@ -43,8 +44,8 @@ import { startWith, switchMap, takeUntil } from 'rxjs/operators';
 
 import { DEFAULT_MENTION_BOTTOM_POSITIONS, DEFAULT_MENTION_TOP_POSITIONS } from 'ng-zorro-antd/core/overlay';
 import { NzDestroyService } from 'ng-zorro-antd/core/services';
-import { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types';
-import { getCaretCoordinates, getMentions, InputBoolean } from 'ng-zorro-antd/core/util';
+import { BooleanInput, NgClassInterface, NzSafeAny, NzStatus } from 'ng-zorro-antd/core/types';
+import { getCaretCoordinates, getMentions, getStatusClassNames, InputBoolean } from 'ng-zorro-antd/core/util';
 
 import { NZ_MENTION_CONFIG } from './config';
 import { NzMentionSuggestionDirective } from './mention-suggestions';
@@ -117,6 +118,7 @@ export class NzMentionComponent implements OnDestroy, OnInit, AfterViewInit, OnC
   @Input() nzNotFoundContent: string = '无匹配结果，轻敲空格完成输入';
   @Input() nzPlacement: MentionPlacement = 'bottom';
   @Input() nzSuggestions: NzSafeAny[] = [];
+  @Input() nzStatus?: NzStatus;
   @Output() readonly nzOnSelect: EventEmitter<NzSafeAny> = new EventEmitter();
   @Output() readonly nzOnSearchChange: EventEmitter<MentionOnSearchTypes> = new EventEmitter();
 
@@ -137,6 +139,10 @@ export class NzMentionComponent implements OnDestroy, OnInit, AfterViewInit, OnC
   suggestionTemplate: TemplateRef<{ $implicit: NzSafeAny }> | null = null;
   activeIndex = -1;
   dir: Direction = 'ltr';
+  // status
+  prefixCls: string = 'ant-mentions';
+  statusCls: NgClassInterface = {};
+  nzHasFeedback: boolean = false;
 
   private previousValue: string | null = null;
   private cursorMention: string | null = null;
@@ -166,6 +172,8 @@ export class NzMentionComponent implements OnDestroy, OnInit, AfterViewInit, OnC
     private cdr: ChangeDetectorRef,
     private overlay: Overlay,
     private viewContainerRef: ViewContainerRef,
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
     private nzMentionService: NzMentionService,
     private destroy$: NzDestroyService
   ) {}
@@ -185,13 +193,17 @@ export class NzMentionComponent implements OnDestroy, OnInit, AfterViewInit, OnC
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.hasOwnProperty('nzSuggestions')) {
+    const { nzSuggestions, nzStatus } = changes;
+    if (nzSuggestions) {
       if (this.isOpen) {
         this.previousValue = null;
         this.activeIndex = -1;
         this.resetDropdown(false);
       }
     }
+    if (nzStatus) {
+      this.setStatusStyles();
+    }
   }
 
   ngAfterViewInit(): void {
@@ -464,4 +476,16 @@ export class NzMentionComponent implements OnDestroy, OnInit, AfterViewInit, OnC
       .withPush(false);
     return this.positionStrategy;
   }
+
+  private setStatusStyles(): void {
+    // render status if nzStatus is set
+    this.statusCls = getStatusClassNames(this.prefixCls, this.nzStatus, this.nzHasFeedback);
+    Object.keys(this.statusCls).forEach(status => {
+      if (this.statusCls[status]) {
+        this.renderer.addClass(this.elementRef.nativeElement, status);
+      } else {
+        this.renderer.removeClass(this.elementRef.nativeElement, status);
+      }
+    });
+  }
 }