ng-zorro-antd/fesm2015/ng-zorro-antd-select.mjs.map

An enterprise-class UI components based on Ant Design and Angular

{"version":3,"file":"ng-zorro-antd-select.mjs","sources":["../../components/select/option-group.component.ts","../../components/select/option-item-group.component.ts","../../components/select/option-item.component.ts","../../components/select/option-container.component.ts","../../components/select/option.component.ts","../../components/select/select-search.component.ts","../../components/select/select-item.component.ts","../../components/select/select-placeholder.component.ts","../../components/select/select-top-control.component.ts","../../components/select/select-arrow.component.ts","../../components/select/select-clear.component.ts","../../components/select/select.component.ts","../../components/select/select.module.ts","../../components/select/public-api.ts","../../components/select/ng-zorro-antd-select.ts"],"sourcesContent":["/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { ChangeDetectionStrategy, Component, Input, OnChanges, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { Subject } from 'rxjs';\n\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\n\n@Component({\n  selector: 'nz-option-group',\n  exportAs: 'nzOptionGroup',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: ` <ng-content></ng-content> `\n})\nexport class NzOptionGroupComponent implements OnChanges {\n  @Input() nzLabel: string | number | TemplateRef<NzSafeAny> | null = null;\n  changes = new Subject<void>();\n  ngOnChanges(): void {\n    this.changes.next();\n  }\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';\n\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\n\n@Component({\n  selector: 'nz-option-item-group',\n  template: ` <ng-container *nzStringTemplateOutlet=\"nzLabel\">{{ nzLabel }}</ng-container> `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'ant-select-item ant-select-item-group'\n  }\n})\nexport class NzOptionItemGroupComponent {\n  @Input() nzLabel: string | number | TemplateRef<NzSafeAny> | null = null;\n\n  constructor() {}\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Input,\n  NgZone,\n  OnChanges,\n  OnInit,\n  Output,\n  SimpleChanges,\n  TemplateRef,\n  ViewEncapsulation\n} from '@angular/core';\nimport { fromEvent } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { NzDestroyService } from 'ng-zorro-antd/core/services';\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\n\n@Component({\n  selector: 'nz-option-item',\n  template: `\n    <div class=\"ant-select-item-option-content\">\n      <ng-template [ngIf]=\"customContent\" [ngIfElse]=\"noCustomContent\">\n        <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n      </ng-template>\n      <ng-template #noCustomContent>{{ label }}</ng-template>\n    </div>\n    <div *ngIf=\"showState && selected\" class=\"ant-select-item-option-state\" style=\"user-select: none\" unselectable=\"on\">\n      <i nz-icon nzType=\"check\" class=\"ant-select-selected-icon\" *ngIf=\"!icon; else icon\"></i>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'ant-select-item ant-select-item-option',\n    '[attr.title]': 'label',\n    '[class.ant-select-item-option-grouped]': 'grouped',\n    '[class.ant-select-item-option-selected]': 'selected && !disabled',\n    '[class.ant-select-item-option-disabled]': 'disabled',\n    '[class.ant-select-item-option-active]': 'activated && !disabled'\n  },\n  providers: [NzDestroyService]\n})\nexport class NzOptionItemComponent implements OnChanges, OnInit {\n  selected = false;\n  activated = false;\n  @Input() grouped = false;\n  @Input() customContent = false;\n  @Input() template: TemplateRef<NzSafeAny> | null = null;\n  @Input() disabled = false;\n  @Input() showState = false;\n  @Input() label: string | number | null = null;\n  @Input() value: NzSafeAny | null = null;\n  @Input() activatedValue: NzSafeAny | null = null;\n  @Input() listOfSelectedValue: NzSafeAny[] = [];\n  @Input() icon: TemplateRef<NzSafeAny> | null = null;\n  @Input() compareWith!: (o1: NzSafeAny, o2: NzSafeAny) => boolean;\n  @Output() readonly itemClick = new EventEmitter<NzSafeAny>();\n  @Output() readonly itemHover = new EventEmitter<NzSafeAny>();\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private ngZone: NgZone,\n    private destroy$: NzDestroyService\n  ) {}\n\n  ngOnChanges(changes: SimpleChanges): void {\n    const { value, activatedValue, listOfSelectedValue } = changes;\n    if (value || listOfSelectedValue) {\n      this.selected = this.listOfSelectedValue.some(v => this.compareWith(v, this.value));\n    }\n    if (value || activatedValue) {\n      this.activated = this.compareWith(this.activatedValue, this.value);\n    }\n  }\n\n  ngOnInit(): void {\n    this.ngZone.runOutsideAngular(() => {\n      fromEvent(this.elementRef.nativeElement, 'click')\n        .pipe(takeUntil(this.destroy$))\n        .subscribe(() => {\n          if (!this.disabled) {\n            this.ngZone.run(() => this.itemClick.emit(this.value));\n          }\n        });\n\n      fromEvent(this.elementRef.nativeElement, 'mouseenter')\n        .pipe(takeUntil(this.destroy$))\n        .subscribe(() => {\n          if (!this.disabled) {\n            this.ngZone.run(() => this.itemHover.emit(this.value));\n          }\n        });\n    });\n  }\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  OnChanges,\n  Output,\n  SimpleChanges,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation\n} from '@angular/core';\n\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\n\nimport { NzSelectItemInterface, NzSelectModeType } from './select.types';\n\n@Component({\n  selector: 'nz-option-container',\n  exportAs: 'nzOptionContainer',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  preserveWhitespaces: false,\n  template: `\n    <div>\n      <div *ngIf=\"listOfContainerItem.length === 0\" class=\"ant-select-item-empty\">\n        <nz-embed-empty nzComponentName=\"select\" [specificContent]=\"notFoundContent!\"></nz-embed-empty>\n      </div>\n      <cdk-virtual-scroll-viewport\n        [class.full-width]=\"!matchWidth\"\n        [itemSize]=\"itemSize\"\n        [maxBufferPx]=\"itemSize * maxItemLength\"\n        [minBufferPx]=\"itemSize * maxItemLength\"\n        (scrolledIndexChange)=\"onScrolledIndexChange($event)\"\n        [style.height.px]=\"listOfContainerItem.length * itemSize\"\n        [style.max-height.px]=\"itemSize * maxItemLength\"\n      >\n        <ng-template\n          cdkVirtualFor\n          [cdkVirtualForOf]=\"listOfContainerItem\"\n          [cdkVirtualForTrackBy]=\"trackValue\"\n          [cdkVirtualForTemplateCacheSize]=\"0\"\n          let-item\n        >\n          <ng-container [ngSwitch]=\"item.type\">\n            <nz-option-item-group *ngSwitchCase=\"'group'\" [nzLabel]=\"item.groupLabel\"></nz-option-item-group>\n            <nz-option-item\n              *ngSwitchCase=\"'item'\"\n              [icon]=\"menuItemSelectedIcon\"\n              [customContent]=\"item.nzCustomContent\"\n              [template]=\"item.template\"\n              [grouped]=\"!!item.groupLabel\"\n              [disabled]=\"item.nzDisabled\"\n              [showState]=\"mode === 'tags' || mode === 'multiple'\"\n              [label]=\"item.nzLabel\"\n              [compareWith]=\"compareWith\"\n              [activatedValue]=\"activatedValue\"\n              [listOfSelectedValue]=\"listOfSelectedValue\"\n              [value]=\"item.nzValue\"\n              (itemHover)=\"onItemHover($event)\"\n              (itemClick)=\"onItemClick($event)\"\n            ></nz-option-item>\n          </ng-container>\n        </ng-template>\n      </cdk-virtual-scroll-viewport>\n      <ng-template [ngTemplateOutlet]=\"dropdownRender\"></ng-template>\n    </div>\n  `,\n  host: { class: 'ant-select-dropdown' }\n})\nexport class NzOptionContainerComponent implements OnChanges, AfterViewInit {\n  @Input() notFoundContent: string | TemplateRef<NzSafeAny> | undefined = undefined;\n  @Input() menuItemSelectedIcon: TemplateRef<NzSafeAny> | null = null;\n  @Input() dropdownRender: TemplateRef<NzSafeAny> | null = null;\n  @Input() activatedValue: NzSafeAny | null = null;\n  @Input() listOfSelectedValue: NzSafeAny[] = [];\n  @Input() compareWith!: (o1: NzSafeAny, o2: NzSafeAny) => boolean;\n  @Input() mode: NzSelectModeType = 'default';\n  @Input() matchWidth = true;\n  @Input() itemSize = 32;\n  @Input() maxItemLength = 8;\n  @Input() listOfContainerItem: NzSelectItemInterface[] = [];\n  @Output() readonly itemClick = new EventEmitter<NzSafeAny>();\n  @Output() readonly scrollToBottom = new EventEmitter<void>();\n  @ViewChild(CdkVirtualScrollViewport, { static: true }) cdkVirtualScrollViewport!: CdkVirtualScrollViewport;\n  private scrolledIndex = 0;\n\n  constructor() {}\n\n  onItemClick(value: NzSafeAny): void {\n    this.itemClick.emit(value);\n  }\n\n  onItemHover(value: NzSafeAny): void {\n    // TODO: keydown.enter won't activate this value\n    this.activatedValue = value;\n  }\n\n  trackValue(_index: number, option: NzSelectItemInterface): NzSafeAny {\n    return option.key;\n  }\n\n  onScrolledIndexChange(index: number): void {\n    this.scrolledIndex = index;\n    if (index === this.listOfContainerItem.length - this.maxItemLength) {\n      this.scrollToBottom.emit();\n    }\n  }\n\n  scrollToActivatedValue(): void {\n    const index = this.listOfContainerItem.findIndex(item => this.compareWith(item.key, this.activatedValue));\n    if (index < this.scrolledIndex || index >= this.scrolledIndex + this.maxItemLength) {\n      this.cdkVirtualScrollViewport.scrollToIndex(index || 0);\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    const { listOfContainerItem, activatedValue } = changes;\n    if (listOfContainerItem || activatedValue) {\n      this.scrollToActivatedValue();\n    }\n  }\n  ngAfterViewInit(): void {\n    setTimeout(() => this.scrollToActivatedValue());\n  }\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  Input,\n  OnChanges,\n  OnInit,\n  Optional,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation\n} from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { startWith, takeUntil } from 'rxjs/operators';\n\nimport { NzDestroyService } from 'ng-zorro-antd/core/services';\nimport { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types';\nimport { InputBoolean } from 'ng-zorro-antd/core/util';\n\nimport { NzOptionGroupComponent } from './option-group.component';\n\n@Component({\n  selector: 'nz-option',\n  exportAs: 'nzOption',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [NzDestroyService],\n  template: `\n    <ng-template>\n      <ng-content></ng-content>\n    </ng-template>\n  `\n})\nexport class NzOptionComponent implements OnChanges, OnInit {\n  static ngAcceptInputType_nzDisabled: BooleanInput;\n  static ngAcceptInputType_nzHide: BooleanInput;\n  static ngAcceptInputType_nzCustomContent: BooleanInput;\n\n  changes = new Subject();\n  groupLabel: string | number | TemplateRef<NzSafeAny> | null = null;\n  @ViewChild(TemplateRef, { static: true }) template!: TemplateRef<NzSafeAny>;\n  @Input() nzLabel: string | number | null = null;\n  @Input() nzValue: NzSafeAny | null = null;\n  @Input() @InputBoolean() nzDisabled = false;\n  @Input() @InputBoolean() nzHide = false;\n  @Input() @InputBoolean() nzCustomContent = false;\n\n  constructor(@Optional() private nzOptionGroupComponent: NzOptionGroupComponent, private destroy$: NzDestroyService) {}\n\n  ngOnInit(): void {\n    if (this.nzOptionGroupComponent) {\n      this.nzOptionGroupComponent.changes.pipe(startWith(true), takeUntil(this.destroy$)).subscribe(() => {\n        this.groupLabel = this.nzOptionGroupComponent.nzLabel;\n      });\n    }\n  }\n\n  ngOnChanges(): void {\n    this.changes.next();\n  }\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { FocusMonitor } from '@angular/cdk/a11y';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnChanges,\n  Output,\n  Renderer2,\n  SimpleChanges,\n  ViewChild,\n  ViewEncapsulation\n} from '@angular/core';\nimport { COMPOSITION_BUFFER_MODE } from '@angular/forms';\n\n@Component({\n  selector: 'nz-select-search',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <input\n      #inputElement\n      [attr.id]=\"nzId\"\n      autocomplete=\"off\"\n      class=\"ant-select-selection-search-input\"\n      [ngModel]=\"value\"\n      [attr.autofocus]=\"autofocus ? 'autofocus' : null\"\n      [disabled]=\"disabled\"\n      [style.opacity]=\"showInput ? null : 0\"\n      (ngModelChange)=\"onValueChange($event)\"\n      (compositionstart)=\"setCompositionState(true)\"\n      (compositionend)=\"setCompositionState(false)\"\n    />\n    <span #mirrorElement *ngIf=\"mirrorSync\" class=\"ant-select-selection-search-mirror\"></span>\n  `,\n  host: { class: 'ant-select-selection-search' },\n  providers: [{ provide: COMPOSITION_BUFFER_MODE, useValue: false }]\n})\nexport class NzSelectSearchComponent implements AfterViewInit, OnChanges {\n  @Input() nzId: string | null = null;\n  @Input() disabled = false;\n  @Input() mirrorSync = false;\n  @Input() showInput = true;\n  @Input() focusTrigger = false;\n  @Input() value = '';\n  @Input() autofocus = false;\n  @Output() readonly valueChange = new EventEmitter<string>();\n  @Output() readonly isComposingChange = new EventEmitter<boolean>();\n  @ViewChild('inputElement', { static: true }) inputElement!: ElementRef;\n  @ViewChild('mirrorElement', { static: false }) mirrorElement?: ElementRef;\n\n  setCompositionState(isComposing: boolean): void {\n    this.isComposingChange.next(isComposing);\n  }\n\n  onValueChange(value: string): void {\n    this.value = value;\n    this.valueChange.next(value);\n    if (this.mirrorSync) {\n      this.syncMirrorWidth();\n    }\n  }\n\n  clearInputValue(): void {\n    const inputDOM = this.inputElement.nativeElement;\n    inputDOM.value = '';\n    this.onValueChange('');\n  }\n\n  syncMirrorWidth(): void {\n    const mirrorDOM = this.mirrorElement!.nativeElement;\n    const hostDOM = this.elementRef.nativeElement;\n    const inputDOM = this.inputElement.nativeElement;\n    this.renderer.removeStyle(hostDOM, 'width');\n    mirrorDOM.innerHTML = this.renderer.createText(`${inputDOM.value}&nbsp;`);\n    this.renderer.setStyle(hostDOM, 'width', `${mirrorDOM.scrollWidth}px`);\n  }\n\n  focus(): void {\n    this.focusMonitor.focusVia(this.inputElement, 'keyboard');\n  }\n\n  blur(): void {\n    this.inputElement.nativeElement.blur();\n  }\n\n  constructor(private elementRef: ElementRef, private renderer: Renderer2, private focusMonitor: FocusMonitor) {}\n\n  ngOnChanges(changes: SimpleChanges): void {\n    const inputDOM = this.inputElement.nativeElement;\n    const { focusTrigger, showInput } = changes;\n\n    if (showInput) {\n      if (this.showInput) {\n        this.renderer.removeAttribute(inputDOM, 'readonly');\n      } else {\n        this.renderer.setAttribute(inputDOM, 'readonly', 'readonly');\n      }\n    }\n\n    // IE11 cannot input value if focused before removing readonly\n    if (focusTrigger && focusTrigger.currentValue === true && focusTrigger.previousValue === false) {\n      inputDOM.focus();\n    }\n  }\n\n  ngAfterViewInit(): void {\n    if (this.mirrorSync) {\n      this.syncMirrorWidth();\n    }\n    if (this.autofocus) {\n      this.focus();\n    }\n  }\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n  TemplateRef,\n  ViewEncapsulation\n} from '@angular/core';\n\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\n\n@Component({\n  selector: 'nz-select-item',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <ng-container *nzStringTemplateOutlet=\"contentTemplateOutlet; context: { $implicit: contentTemplateOutletContext }\">\n      <div class=\"ant-select-selection-item-content\" *ngIf=\"deletable; else labelTemplate\">{{ label }}</div>\n      <ng-template #labelTemplate>{{ label }}</ng-template>\n    </ng-container>\n    <span *ngIf=\"deletable && !disabled\" class=\"ant-select-selection-item-remove\" (click)=\"onDelete($event)\">\n      <i nz-icon nzType=\"close\" *ngIf=\"!removeIcon; else removeIcon\"></i>\n    </span>\n  `,\n  host: {\n    class: 'ant-select-selection-item',\n    '[attr.title]': 'label',\n    '[class.ant-select-selection-item-disabled]': 'disabled'\n  }\n})\nexport class NzSelectItemComponent {\n  @Input() disabled = false;\n  @Input() label: string | number | null | undefined = null;\n  @Input() deletable = false;\n  @Input() removeIcon: TemplateRef<NzSafeAny> | null = null;\n  @Input() contentTemplateOutletContext: NzSafeAny | null = null;\n  @Input() contentTemplateOutlet: string | TemplateRef<NzSafeAny> | null = null;\n  @Output() readonly delete = new EventEmitter<MouseEvent>();\n\n  constructor() {}\n\n  onDelete(e: MouseEvent): void {\n    e.preventDefault();\n    e.stopPropagation();\n    if (!this.disabled) {\n      this.delete.next(e);\n    }\n  }\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';\n\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\n\n@Component({\n  selector: 'nz-select-placeholder',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <ng-container *nzStringTemplateOutlet=\"placeholder\">\n      {{ placeholder }}\n    </ng-container>\n  `,\n  host: { class: 'ant-select-selection-placeholder' }\n})\nexport class NzSelectPlaceholderComponent {\n  @Input() placeholder: TemplateRef<NzSafeAny> | string | null = null;\n\n  constructor() {}\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { BACKSPACE } from '@angular/cdk/keycodes';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Host,\n  Input,\n  NgZone,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  Optional,\n  Output,\n  SimpleChanges,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation\n} from '@angular/core';\nimport { fromEvent, Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\n\nimport { NzSelectSearchComponent } from './select-search.component';\nimport { NzSelectItemInterface, NzSelectModeType, NzSelectTopControlItemType } from './select.types';\n\n@Component({\n  selector: 'nz-select-top-control',\n  exportAs: 'nzSelectTopControl',\n  preserveWhitespaces: false,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  template: `\n    <!--single mode-->\n    <ng-container [ngSwitch]=\"mode\">\n      <ng-container *ngSwitchCase=\"'default'\">\n        <nz-select-search\n          [nzId]=\"nzId\"\n          [disabled]=\"disabled\"\n          [value]=\"inputValue!\"\n          [showInput]=\"showSearch\"\n          [mirrorSync]=\"false\"\n          [autofocus]=\"autofocus\"\n          [focusTrigger]=\"open\"\n          (isComposingChange)=\"isComposingChange($event)\"\n          (valueChange)=\"onInputValueChange($event)\"\n        ></nz-select-search>\n        <nz-select-item\n          *ngIf=\"isShowSingleLabel\"\n          [deletable]=\"false\"\n          [disabled]=\"false\"\n          [removeIcon]=\"removeIcon\"\n          [label]=\"listOfTopItem[0].nzLabel\"\n          [contentTemplateOutlet]=\"customTemplate\"\n          [contentTemplateOutletContext]=\"listOfTopItem[0]\"\n        ></nz-select-item>\n      </ng-container>\n      <ng-container *ngSwitchDefault>\n        <!--multiple or tags mode-->\n        <nz-select-item\n          *ngFor=\"let item of listOfSlicedItem; trackBy: trackValue\"\n          [removeIcon]=\"removeIcon\"\n          [label]=\"item.nzLabel\"\n          [disabled]=\"item.nzDisabled || disabled\"\n          [contentTemplateOutlet]=\"item.contentTemplateOutlet\"\n          [deletable]=\"true\"\n          [contentTemplateOutletContext]=\"item.contentTemplateOutletContext\"\n          (delete)=\"onDeleteItem(item.contentTemplateOutletContext)\"\n        ></nz-select-item>\n        <nz-select-search\n          [nzId]=\"nzId\"\n          [disabled]=\"disabled\"\n          [value]=\"inputValue!\"\n          [autofocus]=\"autofocus\"\n          [showInput]=\"true\"\n          [mirrorSync]=\"true\"\n          [focusTrigger]=\"open\"\n          (isComposingChange)=\"isComposingChange($event)\"\n          (valueChange)=\"onInputValueChange($event)\"\n        ></nz-select-search>\n      </ng-container>\n    </ng-container>\n    <nz-select-placeholder *ngIf=\"isShowPlaceholder\" [placeholder]=\"placeHolder\"></nz-select-placeholder>\n  `,\n  host: { class: 'ant-select-selector' }\n})\nexport class NzSelectTopControlComponent implements OnChanges, OnInit, OnDestroy {\n  @Input() nzId: string | null = null;\n  @Input() showSearch = false;\n  @Input() placeHolder: string | TemplateRef<NzSafeAny> | null = null;\n  @Input() open = false;\n  @Input() maxTagCount: number = Infinity;\n  @Input() autofocus = false;\n  @Input() disabled = false;\n  @Input() mode: NzSelectModeType = 'default';\n  @Input() customTemplate: TemplateRef<{ $implicit: NzSelectItemInterface }> | null = null;\n  @Input() maxTagPlaceholder: TemplateRef<{ $implicit: NzSafeAny[] }> | null = null;\n  @Input() removeIcon: TemplateRef<NzSafeAny> | null = null;\n  @Input() listOfTopItem: NzSelectItemInterface[] = [];\n  @Input() tokenSeparators: string[] = [];\n  @Output() readonly tokenize = new EventEmitter<string[]>();\n  @Output() readonly inputValueChange = new EventEmitter<string>();\n  @Output() readonly deleteItem = new EventEmitter<NzSelectItemInterface>();\n  @ViewChild(NzSelectSearchComponent) nzSelectSearchComponent!: NzSelectSearchComponent;\n  listOfSlicedItem: NzSelectTopControlItemType[] = [];\n  isShowPlaceholder = true;\n  isShowSingleLabel = false;\n  isComposing = false;\n  inputValue: string | null = null;\n\n  private destroy$ = new Subject<void>();\n\n  updateTemplateVariable(): void {\n    const isSelectedValueEmpty = this.listOfTopItem.length === 0;\n    this.isShowPlaceholder = isSelectedValueEmpty && !this.isComposing && !this.inputValue;\n    this.isShowSingleLabel = !isSelectedValueEmpty && !this.isComposing && !this.inputValue;\n  }\n\n  isComposingChange(isComposing: boolean): void {\n    this.isComposing = isComposing;\n    this.updateTemplateVariable();\n  }\n\n  onInputValueChange(value: string): void {\n    if (value !== this.inputValue) {\n      this.inputValue = value;\n      this.updateTemplateVariable();\n      this.inputValueChange.emit(value);\n      this.tokenSeparate(value, this.tokenSeparators);\n    }\n  }\n\n  tokenSeparate(inputValue: string, tokenSeparators: string[]): void {\n    const includesSeparators = (str: string | string[], separators: string[]): boolean => {\n      // eslint-disable-next-line @typescript-eslint/prefer-for-of\n      for (let i = 0; i < separators.length; ++i) {\n        if (str.lastIndexOf(separators[i]) > 0) {\n          return true;\n        }\n      }\n      return false;\n    };\n    const splitBySeparators = (str: string | string[], separators: string[]): string[] => {\n      const reg = new RegExp(`[${separators.join()}]`);\n      const array = (str as string).split(reg).filter(token => token);\n      return [...new Set(array)];\n    };\n    if (\n      inputValue &&\n      inputValue.length &&\n      tokenSeparators.length &&\n      this.mode !== 'default' &&\n      includesSeparators(inputValue, tokenSeparators)\n    ) {\n      const listOfLabel = splitBySeparators(inputValue, tokenSeparators);\n      this.tokenize.next(listOfLabel);\n    }\n  }\n\n  clearInputValue(): void {\n    if (this.nzSelectSearchComponent) {\n      this.nzSelectSearchComponent.clearInputValue();\n    }\n  }\n\n  focus(): void {\n    if (this.nzSelectSearchComponent) {\n      this.nzSelectSearchComponent.focus();\n    }\n  }\n\n  blur(): void {\n    if (this.nzSelectSearchComponent) {\n      this.nzSelectSearchComponent.blur();\n    }\n  }\n\n  trackValue(_index: number, option: NzSelectTopControlItemType): NzSafeAny {\n    return option.nzValue;\n  }\n\n  onDeleteItem(item: NzSelectItemInterface): void {\n    if (!this.disabled && !item.nzDisabled) {\n      this.deleteItem.next(item);\n    }\n  }\n\n  constructor(\n    private elementRef: ElementRef<HTMLElement>,\n    private ngZone: NgZone,\n    @Host() @Optional() public noAnimation: NzNoAnimationDirective | null\n  ) {}\n\n  ngOnChanges(changes: SimpleChanges): void {\n    const { listOfTopItem, maxTagCount, customTemplate, maxTagPlaceholder } = changes;\n    if (listOfTopItem) {\n      this.updateTemplateVariable();\n    }\n    if (listOfTopItem || maxTagCount || customTemplate || maxTagPlaceholder) {\n      const listOfSlicedItem: NzSelectTopControlItemType[] = this.listOfTopItem.slice(0, this.maxTagCount).map(o => ({\n        nzLabel: o.nzLabel,\n        nzValue: o.nzValue,\n        nzDisabled: o.nzDisabled,\n        contentTemplateOutlet: this.customTemplate,\n        contentTemplateOutletContext: o\n      }));\n      if (this.listOfTopItem.length > this.maxTagCount) {\n        const exceededLabel = `+ ${this.listOfTopItem.length - this.maxTagCount} ...`;\n        const listOfSelectedValue = this.listOfTopItem.map(item => item.nzValue);\n        const exceededItem = {\n          nzLabel: exceededLabel,\n          nzValue: '$$__nz_exceeded_item',\n          nzDisabled: true,\n          contentTemplateOutlet: this.maxTagPlaceholder,\n          contentTemplateOutletContext: listOfSelectedValue.slice(this.maxTagCount)\n        };\n        listOfSlicedItem.push(exceededItem);\n      }\n      this.listOfSlicedItem = listOfSlicedItem;\n    }\n  }\n\n  ngOnInit(): void {\n    this.ngZone.runOutsideAngular(() => {\n      fromEvent<MouseEvent>(this.elementRef.nativeElement, 'click')\n        .pipe(takeUntil(this.destroy$))\n        .subscribe(event => {\n          // `HTMLElement.focus()` is a native DOM API which doesn't require Angular to run change detection.\n          if (event.target !== this.nzSelectSearchComponent.inputElement.nativeElement) {\n            this.nzSelectSearchComponent.focus();\n          }\n        });\n\n      fromEvent<KeyboardEvent>(this.elementRef.nativeElement, 'keydown')\n        .pipe(takeUntil(this.destroy$))\n        .subscribe(event => {\n          if (event.target instanceof HTMLInputElement) {\n            const inputValue = event.target.value;\n\n            if (\n              event.keyCode === BACKSPACE &&\n              this.mode !== 'default' &&\n              !inputValue &&\n              this.listOfTopItem.length > 0\n            ) {\n              event.preventDefault();\n              // Run change detection only if the user has pressed the `Backspace` key and the following condition is met.\n              this.ngZone.run(() => this.onDeleteItem(this.listOfTopItem[this.listOfTopItem.length - 1]));\n            }\n          }\n        });\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.destroy$.next();\n  }\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';\n\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\n\n@Component({\n  selector: 'nz-select-arrow',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <i nz-icon nzType=\"loading\" *ngIf=\"loading; else defaultArrow\"></i>\n    <ng-template #defaultArrow>\n      <ng-container *ngIf=\"!suffixIcon; else suffixTemplate\">\n        <i nz-icon nzType=\"down\" *ngIf=\"!search\"></i>\n        <i nz-icon nzType=\"search\" *ngIf=\"search\"></i>\n      </ng-container>\n      <ng-template #suffixTemplate>\n        <ng-container *nzStringTemplateOutlet=\"suffixIcon; let suffixIcon\">\n          <i nz-icon [nzType]=\"suffixIcon\"></i>\n        </ng-container>\n      </ng-template>\n    </ng-template>\n  `,\n  host: {\n    class: 'ant-select-arrow',\n    '[class.ant-select-arrow-loading]': 'loading'\n  }\n})\nexport class NzSelectArrowComponent {\n  @Input() loading = false;\n  @Input() search = false;\n  @Input() suffixIcon: TemplateRef<NzSafeAny> | string | null = null;\n\n  constructor() {}\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n  TemplateRef,\n  ViewEncapsulation\n} from '@angular/core';\n\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\n\n@Component({\n  selector: 'nz-select-clear',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <i\n      nz-icon\n      nzType=\"close-circle\"\n      nzTheme=\"fill\"\n      *ngIf=\"!clearIcon; else clearIcon\"\n      class=\"ant-select-close-icon\"\n    ></i>\n  `,\n  host: {\n    class: 'ant-select-clear',\n    '(click)': 'onClick($event)'\n  }\n})\nexport class NzSelectClearComponent {\n  @Input() clearIcon: TemplateRef<NzSafeAny> | null = null;\n  @Output() readonly clear = new EventEmitter<MouseEvent>();\n\n  constructor() {}\n\n  onClick(e: MouseEvent): void {\n    e.preventDefault();\n    e.stopPropagation();\n    this.clear.emit(e);\n  }\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { FocusMonitor } from '@angular/cdk/a11y';\nimport { Direction, Directionality } from '@angular/cdk/bidi';\nimport { DOWN_ARROW, ENTER, ESCAPE, SPACE, TAB, UP_ARROW } from '@angular/cdk/keycodes';\nimport { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedOverlayPositionChange } from '@angular/cdk/overlay';\nimport { Platform } from '@angular/cdk/platform';\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  Host,\n  Input,\n  NgZone,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  Optional,\n  Output,\n  QueryList,\n  SimpleChanges,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { BehaviorSubject, combineLatest, fromEvent, merge } from 'rxjs';\nimport { startWith, switchMap, takeUntil } from 'rxjs/operators';\n\nimport { slideMotion } from 'ng-zorro-antd/core/animation';\nimport { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';\nimport { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';\nimport { cancelRequestAnimationFrame, reqAnimFrame } from 'ng-zorro-antd/core/polyfill';\nimport { NzDestroyService } from 'ng-zorro-antd/core/services';\nimport { BooleanInput, NzSafeAny, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types';\nimport { InputBoolean, isNotNil } from 'ng-zorro-antd/core/util';\n\nimport { NzOptionGroupComponent } from './option-group.component';\nimport { NzOptionComponent } from './option.component';\nimport { NzSelectTopControlComponent } from './select-top-control.component';\nimport { NzFilterOptionType, NzSelectItemInterface, NzSelectModeType, NzSelectOptionInterface } from './select.types';\n\nconst defaultFilterOption: NzFilterOptionType = (searchValue: string, item: NzSelectItemInterface): boolean => {\n  if (item && item.nzLabel) {\n    return item.nzLabel.toString().toLowerCase().indexOf(searchValue.toLowerCase()) > -1;\n  } else {\n    return false;\n  }\n};\n\nconst NZ_CONFIG_MODULE_NAME: NzConfigKey = 'select';\n\nexport type NzSelectSizeType = 'large' | 'default' | 'small';\n\n@Component({\n  selector: 'nz-select',\n  exportAs: 'nzSelect',\n  preserveWhitespaces: false,\n  providers: [\n    NzDestroyService,\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => NzSelectComponent),\n      multi: true\n    }\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  animations: [slideMotion],\n  template: `\n    <nz-select-top-control\n      cdkOverlayOrigin\n      #origin=\"cdkOverlayOrigin\"\n      [nzId]=\"nzId\"\n      [open]=\"nzOpen\"\n      [disabled]=\"nzDisabled\"\n      [mode]=\"nzMode\"\n      [@.disabled]=\"noAnimation?.nzNoAnimation\"\n      [nzNoAnimation]=\"noAnimation?.nzNoAnimation\"\n      [maxTagPlaceholder]=\"nzMaxTagPlaceholder\"\n      [removeIcon]=\"nzRemoveIcon\"\n      [placeHolder]=\"nzPlaceHolder\"\n      [maxTagCount]=\"nzMaxTagCount\"\n      [customTemplate]=\"nzCustomTemplate\"\n      [tokenSeparators]=\"nzTokenSeparators\"\n      [showSearch]=\"nzShowSearch\"\n      [autofocus]=\"nzAutoFocus\"\n      [listOfTopItem]=\"listOfTopItem\"\n      (inputValueChange)=\"onInputValueChange($event)\"\n      (tokenize)=\"onTokenSeparate($event)\"\n      (deleteItem)=\"onItemDelete($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    ></nz-select-top-control>\n    <nz-select-arrow\n      *ngIf=\"nzShowArrow\"\n      [loading]=\"nzLoading\"\n      [search]=\"nzOpen && nzShowSearch\"\n      [suffixIcon]=\"nzSuffixIcon\"\n    ></nz-select-arrow>\n    <nz-select-clear\n      *ngIf=\"nzAllowClear && !nzDisabled && listOfValue.length\"\n      [clearIcon]=\"nzClearIcon\"\n      (clear)=\"onClearSelection()\"\n    ></nz-select-clear>\n    <ng-template\n      cdkConnectedOverlay\n      nzConnectedOverlay\n      [cdkConnectedOverlayHasBackdrop]=\"nzBackdrop\"\n      [cdkConnectedOverlayMinWidth]=\"$any(nzDropdownMatchSelectWidth ? null : triggerWidth)\"\n      [cdkConnectedOverlayWidth]=\"$any(nzDropdownMatchSelectWidth ? triggerWidth : null)\"\n      [cdkConnectedOverlayOrigin]=\"origin\"\n      [cdkConnectedOverlayTransformOriginOn]=\"'.ant-select-dropdown'\"\n      [cdkConnectedOverlayPanelClass]=\"nzDropdownClassName!\"\n      [cdkConnectedOverlayOpen]=\"nzOpen\"\n      (overlayOutsideClick)=\"onClickOutside($event)\"\n      (detach)=\"setOpenState(false)\"\n      (positionChange)=\"onPositionChange($event)\"\n    >\n      <nz-option-container\n        [ngStyle]=\"nzDropdownStyle\"\n        [itemSize]=\"nzOptionHeightPx\"\n        [maxItemLength]=\"nzOptionOverflowSize\"\n        [matchWidth]=\"nzDropdownMatchSelectWidth\"\n        [class.ant-select-dropdown-placement-bottomLeft]=\"dropDownPosition === 'bottom'\"\n        [class.ant-select-dropdown-placement-topLeft]=\"dropDownPosition === 'top'\"\n        [@slideMotion]=\"'enter'\"\n        [@.disabled]=\"noAnimation?.nzNoAnimation\"\n        [nzNoAnimation]=\"noAnimation?.nzNoAnimation\"\n        [listOfContainerItem]=\"listOfContainerItem\"\n        [menuItemSelectedIcon]=\"nzMenuItemSelectedIcon\"\n        [notFoundContent]=\"nzNotFoundContent\"\n        [activatedValue]=\"activatedValue\"\n        [listOfSelectedValue]=\"listOfValue\"\n        [dropdownRender]=\"nzDropdownRender\"\n        [compareWith]=\"compareWith\"\n        [mode]=\"nzMode\"\n        (keydown)=\"onKeyDown($event)\"\n        (itemClick)=\"onItemClick($event)\"\n        (scrollToBottom)=\"nzScrollToBottom.emit()\"\n      ></nz-option-container>\n    </ng-template>\n  `,\n  host: {\n    class: 'ant-select',\n    '[class.ant-select-lg]': 'nzSize === \"large\"',\n    '[class.ant-select-sm]': 'nzSize === \"small\"',\n    '[class.ant-select-show-arrow]': `nzShowArrow`,\n    '[class.ant-select-disabled]': 'nzDisabled',\n    '[class.ant-select-show-search]': `(nzShowSearch || nzMode !== 'default') && !nzDisabled`,\n    '[class.ant-select-allow-clear]': 'nzAllowClear',\n    '[class.ant-select-borderless]': 'nzBorderless',\n    '[class.ant-select-open]': 'nzOpen',\n    '[class.ant-select-focused]': 'nzOpen || focused',\n    '[class.ant-select-single]': `nzMode === 'default'`,\n    '[class.ant-select-multiple]': `nzMode !== 'default'`,\n    '[class.ant-select-rtl]': `dir === 'rtl'`\n  }\n})\nexport class NzSelectComponent implements ControlValueAccessor, OnInit, AfterContentInit, OnChanges, OnDestroy {\n  readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;\n\n  static ngAcceptInputType_nzAllowClear: BooleanInput;\n  static ngAcceptInputType_nzBorderless: BooleanInput;\n  static ngAcceptInputType_nzShowSearch: BooleanInput;\n  static ngAcceptInputType_nzLoading: BooleanInput;\n  static ngAcceptInputType_nzAutoFocus: BooleanInput;\n  static ngAcceptInputType_nzAutoClearSearchValue: BooleanInput;\n  static ngAcceptInputType_nzServerSearch: BooleanInput;\n  static ngAcceptInputType_nzDisabled: BooleanInput;\n  static ngAcceptInputType_nzOpen: BooleanInput;\n\n  @Input() nzId: string | null = null;\n  @Input() nzSize: NzSelectSizeType = 'default';\n  @Input() nzOptionHeightPx = 32;\n  @Input() nzOptionOverflowSize = 8;\n  @Input() nzDropdownClassName: string | null = null;\n  @Input() nzDropdownMatchSelectWidth = true;\n  @Input() nzDropdownStyle: { [key: string]: string } | null = null;\n  @Input() nzNotFoundContent: string | TemplateRef<NzSafeAny> | undefined = undefined;\n  @Input() nzPlaceHolder: string | TemplateRef<NzSafeAny> | null = null;\n  @Input() nzMaxTagCount = Infinity;\n  @Input() nzDropdownRender: TemplateRef<NzSafeAny> | null = null;\n  @Input() nzCustomTemplate: TemplateRef<{ $implicit: NzSelectItemInterface }> | null = null;\n  @Input()\n  @WithConfig<TemplateRef<NzSafeAny> | string | null>()\n  nzSuffixIcon: TemplateRef<NzSafeAny> | string | null = null;\n  @Input() nzClearIcon: TemplateRef<NzSafeAny> | null = null;\n  @Input() nzRemoveIcon: TemplateRef<NzSafeAny> | null = null;\n  @Input() nzMenuItemSelectedIcon: TemplateRef<NzSafeAny> | null = null;\n  @Input() nzTokenSeparators: string[] = [];\n  @Input() nzMaxTagPlaceholder: TemplateRef<{ $implicit: NzSafeAny[] }> | null = null;\n  @Input() nzMaxMultipleCount = Infinity;\n  @Input() nzMode: NzSelectModeType = 'default';\n  @Input() nzFilterOption: NzFilterOptionType = defaultFilterOption;\n  @Input() compareWith: (o1: NzSafeAny, o2: NzSafeAny) => boolean = (o1: NzSafeAny, o2: NzSafeAny) => o1 === o2;\n  @Input() @InputBoolean() nzAllowClear = false;\n  @Input() @WithConfig<boolean>() @InputBoolean() nzBorderless = false;\n  @Input() @InputBoolean() nzShowSearch = false;\n  @Input() @InputBoolean() nzLoading = false;\n  @Input() @InputBoolean() nzAutoFocus = false;\n  @Input() @InputBoolean() nzAutoClearSearchValue = true;\n  @Input() @InputBoolean() nzServerSearch = false;\n  @Input() @InputBoolean() nzDisabled = false;\n  @Input() @InputBoolean() nzOpen = false;\n  @Input() @WithConfig<boolean>() @InputBoolean() nzBackdrop = false;\n  @Input() nzOptions: NzSelectOptionInterface[] = [];\n\n  @Input()\n  set nzShowArrow(value: boolean) {\n    this._nzShowArrow = value;\n  }\n  get nzShowArrow(): boolean {\n    return this._nzShowArrow === undefined ? this.nzMode === 'default' : this._nzShowArrow;\n  }\n\n  @Output() readonly nzOnSearch = new EventEmitter<string>();\n  @Output() readonly nzScrollToBottom = new EventEmitter<void>();\n  @Output() readonly nzOpenChange = new EventEmitter<boolean>();\n  @Output() readonly nzBlur = new EventEmitter<void>();\n  @Output() readonly nzFocus = new EventEmitter<void>();\n  @ViewChild(CdkOverlayOrigin, { static: true, read: ElementRef }) originElement!: ElementRef;\n  @ViewChild(CdkConnectedOverlay, { static: true }) cdkConnectedOverlay!: CdkConnectedOverlay;\n  @ViewChild(NzSelectTopControlComponent, { static: true }) nzSelectTopControlComponent!: NzSelectTopControlComponent;\n  @ContentChildren(NzOptionComponent, { descendants: true }) listOfNzOptionComponent!: QueryList<NzOptionComponent>;\n  @ContentChildren(NzOptionGroupComponent, { descendants: true })\n  listOfNzOptionGroupComponent!: QueryList<NzOptionGroupComponent>;\n  @ViewChild(NzOptionGroupComponent, { static: true, read: ElementRef }) nzOptionGroupComponentElement!: ElementRef;\n  @ViewChild(NzSelectTopControlComponent, { static: true, read: ElementRef })\n  nzSelectTopControlComponentElement!: ElementRef;\n  private listOfValue$ = new BehaviorSubject<NzSafeAny[]>([]);\n  private listOfTemplateItem$ = new BehaviorSubject<NzSelectItemInterface[]>([]);\n  private listOfTagAndTemplateItem: NzSelectItemInterface[] = [];\n  private searchValue: string = '';\n  private isReactiveDriven = false;\n  private value: NzSafeAny | NzSafeAny[];\n  private _nzShowArrow: boolean | undefined;\n  private requestId: number = -1;\n  onChange: OnChangeType = () => {};\n  onTouched: OnTouchedType = () => {};\n  dropDownPosition: 'top' | 'center' | 'bottom' = 'bottom';\n  triggerWidth: number | null = null;\n  listOfContainerItem: NzSelectItemInterface[] = [];\n  listOfTopItem: NzSelectItemInterface[] = [];\n  activatedValue: NzSafeAny | null = null;\n  listOfValue: NzSafeAny[] = [];\n  focused = false;\n  dir: Direction = 'ltr';\n\n  generateTagItem(value: string): NzSelectItemInterface {\n    return {\n      nzValue: value,\n      nzLabel: value,\n      type: 'item'\n    };\n  }\n\n  onItemClick(value: NzSafeAny): void {\n    this.activatedValue = value;\n    if (this.nzMode === 'default') {\n      if (this.listOfValue.length === 0 || !this.compareWith(this.listOfValue[0], value)) {\n        this.updateListOfValue([value]);\n      }\n      this.setOpenState(false);\n    } else {\n      const targetIndex = this.listOfValue.findIndex(o => this.compareWith(o, value));\n      if (targetIndex !== -1) {\n        const listOfValueAfterRemoved = this.listOfValue.filter((_, i) => i !== targetIndex);\n        this.updateListOfValue(listOfValueAfterRemoved);\n      } else if (this.listOfValue.length < this.nzMaxMultipleCount) {\n        const listOfValueAfterAdded = [...this.listOfValue, value];\n        this.updateListOfValue(listOfValueAfterAdded);\n      }\n      this.focus();\n      if (this.nzAutoClearSearchValue) {\n        this.clearInput();\n      }\n    }\n  }\n\n  onItemDelete(item: NzSelectItemInterface): void {\n    const listOfSelectedValue = this.listOfValue.filter(v => !this.compareWith(v, item.nzValue));\n    this.updateListOfValue(listOfSelectedValue);\n    this.clearInput();\n  }\n\n  updateListOfContainerItem(): void {\n    let listOfContainerItem = this.listOfTagAndTemplateItem\n      .filter(item => !item.nzHide)\n      .filter(item => {\n        if (!this.nzServerSearch && this.searchValue) {\n          return this.nzFilterOption(this.searchValue, item);\n        } else {\n          return true;\n        }\n      });\n    if (this.nzMode === 'tags' && this.searchValue) {\n      const matchedItem = this.listOfTagAndTemplateItem.find(item => item.nzLabel === this.searchValue);\n      if (!matchedItem) {\n        const tagItem = this.generateTagItem(this.searchValue);\n        listOfContainerItem = [tagItem, ...listOfContainerItem];\n        this.activatedValue = tagItem.nzValue;\n      } else {\n        this.activatedValue = matchedItem.nzValue;\n      }\n    }\n    const activatedItem =\n      listOfContainerItem.find(item => item.nzLabel === this.searchValue) ||\n      listOfContainerItem.find(item => this.compareWith(item.nzValue, this.listOfValue[0])) ||\n      listOfContainerItem[0];\n    this.activatedValue = (activatedItem && activatedItem.nzValue) || null;\n    let listOfGroupLabel: Array<string | number | TemplateRef<NzSafeAny> | null> = [];\n    if (this.isReactiveDriven) {\n      listOfGroupLabel = [...new Set(this.nzOptions.filter(o => o.groupLabel).map(o => o.groupLabel!))];\n    } else {\n      if (this.listOfNzOptionGroupComponent) {\n        listOfGroupLabel = this.listOfNzOptionGroupComponent.map(o => o.nzLabel);\n      }\n    }\n    /** insert group item **/\n    listOfGroupLabel.forEach(label => {\n      const index = listOfContainerItem.findIndex(item => label === item.groupLabel);\n      if (index > -1) {\n        const groupItem = { groupLabel: label, type: 'group', key: label } as NzSelectItemInterface;\n        listOfContainerItem.splice(index, 0, groupItem);\n      }\n    });\n    this.listOfContainerItem = [...listOfContainerItem];\n    this.updateCdkConnectedOverlayPositions();\n  }\n\n  clearInput(): void {\n    this.nzSelectTopControlComponent.clearInputValue();\n  }\n\n  updateListOfValue(listOfValue: NzSafeAny[]): void {\n    const covertListToModel = (list: NzSafeAny[], mode: NzSelectModeType): NzSafeAny[] | NzSafeAny => {\n      if (mode === 'default') {\n        if (list.length > 0) {\n          return list[0];\n        } else {\n          return null;\n        }\n      } else {\n        return list;\n      }\n    };\n    const model = covertListToModel(listOfValue, this.nzMode);\n    if (this.value !== model) {\n      this.listOfValue = listOfValue;\n      this.listOfValue$.next(listOfValue);\n      this.value = model;\n      this.onChange(this.value);\n    }\n  }\n\n  onTokenSeparate(listOfLabel: string[]): void {\n    const listOfMatchedValue = this.listOfTagAndTemplateItem\n      .filter(item => listOfLabel.findIndex(label => label === item.nzLabel) !== -1)\n      .map(item => item.nzValue)\n      .filter(item => this.listOfValue.findIndex(v => this.compareWith(v, item)) === -1);\n    if (this.nzMode === 'multiple') {\n      this.updateListOfValue([...this.listOfValue, ...listOfMatchedValue]);\n    } else if (this.nzMode === 'tags') {\n      const listOfUnMatchedLabel = listOfLabel.filter(\n        label => this.listOfTagAndTemplateItem.findIndex(item => item.nzLabel === label) === -1\n      );\n      this.updateListOfValue([...this.listOfValue, ...listOfMatchedValue, ...listOfUnMatchedLabel]);\n    }\n    this.clearInput();\n  }\n\n  onKeyDown(e: KeyboardEvent): void {\n    if (this.nzDisabled) {\n      return;\n    }\n    const listOfFilteredOptionNotDisabled = this.listOfContainerItem\n      .filter(item => item.type === 'item')\n      .filter(item => !item.nzDisabled);\n    const activatedIndex = listOfFilteredOptionNotDisabled.findIndex(item =>\n      this.compareWith(item.nzValue, this.activatedValue)\n    );\n    switch (e.keyCode) {\n      case UP_ARROW:\n        e.preventDefault();\n        if (this.nzOpen && listOfFilteredOptionNotDisabled.length > 0) {\n          const preIndex = activatedIndex > 0 ? activatedIndex - 1 : listOfFilteredOptionNotDisabled.length - 1;\n          this.activatedValue = listOfFilteredOptionNotDisabled[preIndex].nzValue;\n        }\n        break;\n      case DOWN_ARROW:\n        e.preventDefault();\n        if (this.nzOpen && listOfFilteredOptionNotDisabled.length > 0) {\n          const nextIndex = activatedIndex < listOfFilteredOptionNotDisabled.length - 1 ? activatedIndex + 1 : 0;\n          this.activatedValue = listOfFilteredOptionNotDisabled[nextIndex].nzValue;\n        } else {\n          this.setOpenState(true);\n        }\n        break;\n      case ENTER:\n        e.preventDefault();\n        if (this.nzOpen) {\n          if (isNotNil(this.activatedValue)) {\n            this.onItemClick(this.activatedValue);\n          }\n        } else {\n          this.setOpenState(true);\n        }\n        break;\n      case SPACE:\n        if (!this.nzOpen) {\n          this.setOpenState(true);\n          e.preventDefault();\n        }\n        break;\n      case TAB:\n        this.setOpenState(false);\n        break;\n      case ESCAPE:\n        /**\n         * Skip the ESCAPE processing, it will be handled in {@link onOverlayKeyDown}.\n         */\n        break;\n      default:\n        if (!this.nzOpen) {\n          this.setOpenState(true);\n        }\n    }\n  }\n\n  setOpenState(value: boolean): void {\n    if (this.nzOpen !== value) {\n      this.nzOpen = value;\n      this.nzOpenChange.emit(value);\n