feat(module:tree-select): support set the max count for tags (#2970)

close #2488

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

@@ -48,6 +48,8 @@ Select component to select value from options.
 | `[nzMenuItemSelectedIcon]` | The custom menuItemSelected icon | `TemplateRef<void>` | - |
 | `[nzTokenSeparators]` | Separator used to tokenize on tag/multiple mode | `string[]` | `[]` |
 | `[nzLoading]` | indicate loading state | boolean | false |
+| `[nzMaxTagCount]` | Max tag count to show| number | - |
+| `[nzMaxTagPlaceholder]` | Placeholder for not showing tags | TemplateRef<{ $implicit: any[] }> | - |
 | `(ngModelChange)` | Current selected nz-option value change callback. | `EventEmitter<any[]>` | - |
 | `(nzOpenChange)` | dropdown expand change callback | `EventEmitter<boolean>` | `false` |
 | `(nzScrollToBottom)` | Called when dropdown scrolls to bottom | `EventEmitter<void>` | - |

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

@@ -49,6 +49,8 @@ title: Select
 | `[nzMenuItemSelectedIcon]` | 自定义当前选中的条目图标 | `TemplateRef<void>` | - |
 | `[nzTokenSeparators]` | 在 tags 和 multiple 模式下自动分词的分隔符 | `string[]` | `[]` |
 | `[nzLoading]` | 加载中状态 | boolean | `false` |
+| `[nzMaxTagCount]` | 最多显示多少个 tag | number | - |
+| `[nzMaxTagPlaceholder]` | 隐藏 tag 时显示的内容 | TemplateRef<{ $implicit: any[] }> | - |
 | `(ngModelChange)` | 选中的 nz-option 发生变化时，调用此函数 | `EventEmitter<any[]>` | - |
 | `(nzOpenChange)` | 下拉菜单打开状态变化回调 | `EventEmitter<boolean>` | - |
 | `(nzScrollToBottom)` | 下拉列表滚动到底部的回调 | `EventEmitter<void>` | - |

components/tree-select/demo/multiple.md

@@ -7,8 +7,8 @@ title:
 
 ## zh-CN
 
-多选的树选择。
+多选的树选择，例子中通过 `nzMaxTagCount` 限制最多显示3个选项。
 
 ## en-US
 
-Multiple selection usage.
+Multiple selection usage, max 3 option will display at the same time by `nzMaxTagCount`.

components/tree-select/demo/multiple.ts

@@ -4,14 +4,19 @@ import { Component, OnInit } from '@angular/core';
   selector: 'nz-demo-tree-select-multiple',
   template: `
     <nz-tree-select style="width: 250px"
+      nzPlaceHolder="Please select"
+      [nzMaxTagCount]="3"
+      [nzMaxTagPlaceholder]="omittedPlaceHolder"
       [nzNodes]="nodes"
       [nzDefaultExpandAll]="true"
       [nzAllowClear]="false"
-      nzPlaceHolder="Please select"
       [(ngModel)]="value"
       [nzMultiple]="true"
       (ngModelChange)="onChange($event)">
     </nz-tree-select>
+    <ng-template #omittedPlaceHolder let-omittedValues>
+      and {{omittedValues.length}} more...
+    </ng-template>
   `
 })
 

components/tree-select/doc/index.en-US.md

@@ -34,4 +34,6 @@ Any data whose entries are defined in a hierarchical manner is fit to use this c
 | `[nzDefaultExpandAll]` | Whether to expand all treeNodes by default | `boolean` | `false` |
 | `[nzDefaultExpandedKeys]` | Default expanded treeNodes | `string[]` | - |
 | `[nzDisplayWith]` | How to display the selected node value in the trigger | `(node: NzTreeNode) => string` | `(node: NzTreeNode) => node.title` |
+| `[nzMaxTagCount]` | Max tag count to show| number | - |
+| `[nzMaxTagPlaceholder]` | Placeholder for not showing tags | TemplateRef<{ $implicit: NzTreeNode[] }> | - |
 | `(nzExpandChange)` | Callback function for when a treeNode is expanded or collapsed |`EventEmitter<NzFormatEmitEvent>` | - |

components/tree-select/doc/index.zh-CN.md

@@ -34,4 +34,6 @@ title: TreeSelect
 | `[nzDefaultExpandAll]` | 默认展开所有树节点 | `boolean` | `false` |
 | `[nzDefaultExpandedKeys]` | 默认展开指定的树节点 | `string[]` | - |
 | `[nzDisplayWith]` | 如何在输入框显示所选的节点值的方法 | `(node: NzTreeNode) => string` | `(node: NzTreeNode) => node.title` |
+| `[nzMaxTagCount]` | 最多显示多少个 tag | number | - |
+| `[nzMaxTagPlaceholder]` | 隐藏 tag 时显示的内容 | TemplateRef<{ $implicit: NzTreeNode[] }> | - |
 | `(nzExpandChange)` | 点击展开树节点图标调用 | `EventEmitter<NzFormatEmitEvent>` | - |

components/tree-select/nz-tree-select.component.html

@@ -101,7 +101,7 @@
         class="ant-select-selection__placeholder">
         {{ nzPlaceHolder }}
       </div>
-      <ng-container *ngFor="let node of selectedNodes; trackBy:trackValue">
+      <ng-container *ngFor="let node of selectedNodes | slice: 0 : nzMaxTagCount; trackBy:trackValue">
         <li
           [@zoomMotion]
           [attr.title]="nzDisplayWith(node)"
@@ -114,6 +114,21 @@
           <span class="ant-select-selection__choice__content">{{ nzDisplayWith(node) }}</span>
         </li>
       </ng-container>
+      <li [@zoomMotion]
+        *ngIf="selectedNodes.length > nzMaxTagCount"
+        class="ant-select-selection__choice">
+        <div class="ant-select-selection__choice__content">
+          <ng-container *ngIf="nzMaxTagPlaceholder">
+            <ng-template
+              [ngTemplateOutlet]="nzMaxTagPlaceholder"
+              [ngTemplateOutletContext]="{ $implicit: selectedNodes | slice: nzMaxTagCount}">
+            </ng-template>
+          </ng-container>
+          <ng-container *ngIf="!nzMaxTagPlaceholder">
+            + {{ selectedNodes.length - nzMaxTagCount }} ...
+          </ng-container>
+        </div>
+      </li>
       <li class="ant-select-search ant-select-search--inline">
         <ng-template [ngTemplateOutlet]="inputTemplate"></ng-template>
       </li>

components/tree-select/nz-tree-select.component.ts

@@ -17,6 +17,7 @@ import {
   Output,
   Renderer2,
   SimpleChanges,
+  TemplateRef,
   ViewChild
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -30,6 +31,7 @@ import { filter, tap } from 'rxjs/operators';
 
 import { slideMotion } from '../core/animation/slide';
 import { zoomMotion } from '../core/animation/zoom';
+import { NzSizeLDSType } from '../core/types/size';
 import { InputBoolean } from '../core/util/convert';
 import { NzFormatEmitEvent } from '../tree/interface';
 import { NzTreeNode, NzTreeNodeOptions } from '../tree/nz-tree-node';
@@ -84,11 +86,13 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, OnDe
   @Input() nzNotFoundContent: string;
   @Input() nzNodes: Array<NzTreeNode | NzTreeNodeOptions> = [];
   @Input() nzOpen = false;
-  @Input() nzSize = 'default';
+  @Input() nzSize: NzSizeLDSType = 'default';
   @Input() nzPlaceHolder = '';
   @Input() nzDropdownStyle: { [ key: string ]: string; };
   @Input() nzDefaultExpandedKeys: string[] = [];
   @Input() nzDisplayWith: (node: NzTreeNode) => string = (node: NzTreeNode) => node.title;
+  @Input() nzMaxTagCount: number;
+  @Input() nzMaxTagPlaceholder: TemplateRef<{ $implicit: NzTreeNode[] }>;
   @Output() readonly nzOpenChange = new EventEmitter<boolean>();
   @Output() readonly nzCleared = new EventEmitter<void>();
   @Output() readonly nzRemoved = new EventEmitter<NzTreeNode>();
@@ -240,7 +244,12 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, OnDe
     ) {
       e.preventDefault();
       if (this.selectedNodes.length) {
-        this.removeSelected(this.selectedNodes[ this.selectedNodes.length - 1 ]);
+        const removeNode = this.selectedNodes[ this.selectedNodes.length - 1 ];
+        this.removeSelected(removeNode);
+        this.nzTreeService.$statusChange.next({
+          'eventName': 'removeSelect',
+          'node'     : removeNode
+        });
       }
     }
   }

components/tree-select/nz-tree-select.spec.ts

@@ -217,6 +217,23 @@ describe('tree-select component', () => {
       expect(selectedValueEl.style.display).toBe('none');
       expect(selectedValueEl.style.opacity).toBe('1');
     }));
+    it('should max tag count work', fakeAsync(() => {
+      testComponent.multiple = true;
+      testComponent.value = [ '1001', '10001', '100011', '100012' ];
+      fixture.detectChanges();
+      tick(200);
+      fixture.detectChanges();
+      expect(treeSelect.nativeElement.querySelectorAll('.ant-select-selection__choice').length).toBe(4);
+      testComponent.maxTagCount = 2;
+      fixture.detectChanges();
+      tick(200);
+      fixture.detectChanges();
+      expect(treeSelect.nativeElement.querySelectorAll('.ant-select-selection__choice').length).toBe(3);
+      const maxTagPlaceholderElement = treeSelect.nativeElement.querySelectorAll('.ant-select-selection__choice')[2]
+      .querySelector('.ant-select-selection__choice__content');
+      expect(maxTagPlaceholderElement).toBeTruthy();
+      expect(maxTagPlaceholderElement.innerText.trim()).toBe(`+ ${testComponent.value.length - testComponent.maxTagCount} ...`);
+    }));
   });
 
   describe('checkable', () => {
@@ -450,19 +467,23 @@ describe('tree-select component', () => {
       [nzDropdownMatchSelectWidth]="dropdownMatchSelectWidth"
       [nzDisabled]="disabled"
       [nzShowSearch]="showSearch"
+      [nzMultiple]="multiple"
+      [nzMaxTagCount]="maxTagCount"
       [nzDropdownStyle]="{ 'height': '120px' }">
     </nz-tree-select>
   `
 })
 export class NzTestTreeSelectBasicComponent {
   @ViewChild(NzTreeSelectComponent) nzSelectTreeComponent: NzTreeSelectComponent;
   expandKeys = [ '1001', '10001' ];
-  value = '10001';
+  value: string | string[] = '10001';
   size = 'default';
   allowClear = false;
   disabled = false;
   showSearch = false;
   dropdownMatchSelectWidth = true;
+  multiple = false;
+  maxTagCount = Infinity;
   nodes = [
     new NzTreeNode({
       title   : 'root1',