ng-zorro-antd/fesm2022/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-arrow.component.ts","../../components/select/select-clear.component.ts","../../components/select/select-item.component.ts","../../components/select/select-placeholder.component.ts","../../components/select/select-search.component.ts","../../components/select/select-top-control.component.ts","../../components/select/select.component.ts","../../components/select/select.module.ts","../../components/select/select.types.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  template: `<ng-content></ng-content>`,\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush\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 { NzOutletModule } from 'ng-zorro-antd/core/outlet';\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  imports: [NzOutletModule]\n})\nexport class NzOptionItemGroupComponent {\n  @Input() nzLabel: string | number | TemplateRef<NzSafeAny> | null = null;\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 { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\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 { takeUntil } from 'rxjs/operators';\n\nimport { NzDestroyService } from 'ng-zorro-antd/core/services';\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\nimport { fromEventOutsideAngular } from 'ng-zorro-antd/core/util';\nimport { NzIconModule } from 'ng-zorro-antd/icon';\n\n@Component({\n  selector: 'nz-option-item',\n  template: `\n    <div class=\"ant-select-item-option-content\">\n      @if (customContent) {\n        <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n      } @else {\n        {{ label }}\n      }\n    </div>\n    @if (showState && selected) {\n      <div class=\"ant-select-item-option-state\" unselectable=\"on\">\n        @if (!icon) {\n          <nz-icon nzType=\"check\" class=\"ant-select-selected-icon\" />\n        } @else {\n          <ng-template [ngTemplateOutlet]=\"icon\"></ng-template>\n        }\n      </div>\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'ant-select-item ant-select-item-option',\n    '[attr.title]': 'title',\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  imports: [NgTemplateOutlet, NzIconModule]\n})\nexport class NzOptionItemComponent implements OnChanges, OnInit {\n  selected = false;\n  activated = false;\n  @Input() grouped = false;\n  @Input({ transform: booleanAttribute }) customContent = false;\n  @Input() template: TemplateRef<NzSafeAny> | null = null;\n  @Input() disabled = false;\n  @Input() showState = false;\n  @Input() title?: string | number | null;\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    fromEventOutsideAngular(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    fromEventOutsideAngular(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 * 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 { OverlayModule } from '@angular/cdk/overlay';\nimport { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';\nimport { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  inject,\n  Input,\n  NgZone,\n  OnChanges,\n  Output,\n  PLATFORM_ID,\n  SimpleChanges,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation\n} from '@angular/core';\n\nimport { NzOverlayModule } from 'ng-zorro-antd/core/overlay';\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\nimport { NzEmptyModule } from 'ng-zorro-antd/empty';\n\nimport { NzOptionItemGroupComponent } from './option-item-group.component';\nimport { NzOptionItemComponent } from './option-item.component';\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      @if (listOfContainerItem.length === 0) {\n        <div class=\"ant-select-item-empty\">\n          <nz-embed-empty nzComponentName=\"select\" [specificContent]=\"notFoundContent!\"></nz-embed-empty>\n        </div>\n      }\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          @switch (item.type) {\n            @case ('group') {\n              <nz-option-item-group [nzLabel]=\"item.groupLabel ?? null\"></nz-option-item-group>\n            }\n            @case ('item') {\n              <nz-option-item\n                [icon]=\"menuItemSelectedIcon\"\n                [customContent]=\"item.nzCustomContent\"\n                [template]=\"item.template ?? null\"\n                [grouped]=\"!!item.groupLabel\"\n                [disabled]=\"\n                  item.nzDisabled || (isMaxMultipleCountReached && !listOfSelectedValue.includes(item['nzValue']))\n                \"\n                [showState]=\"mode === 'tags' || mode === 'multiple'\"\n                [title]=\"item.nzTitle\"\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            }\n          }\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  imports: [\n    NzEmptyModule,\n    NzOptionItemGroupComponent,\n    NzOptionItemComponent,\n    NgTemplateOutlet,\n    OverlayModule,\n    NzOverlayModule\n  ]\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() isMaxMultipleCountReached = false;\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  private ngZone = inject(NgZone);\n  private platformId = inject(PLATFORM_ID);\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 - 1) {\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\n  ngAfterViewInit(): void {\n    if (isPlatformBrowser(this.platformId)) {\n      this.ngZone.runOutsideAngular(() => setTimeout(() => this.scrollToActivatedValue()));\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  Input,\n  OnChanges,\n  OnInit,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation,\n  booleanAttribute,\n  inject\n} from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { startWith, takeUntil } from 'rxjs/operators';\n\nimport { NzDestroyService } from 'ng-zorro-antd/core/services';\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\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  changes = new Subject<void>();\n  groupLabel?: string | number | TemplateRef<NzSafeAny> | null = null;\n  @ViewChild(TemplateRef, { static: true }) template!: TemplateRef<NzSafeAny>;\n  @Input() nzTitle?: string | number | null;\n  @Input() nzLabel: string | number | null = null;\n  @Input() nzValue: NzSafeAny | null = null;\n  @Input() nzKey?: string | number;\n  @Input({ transform: booleanAttribute }) nzDisabled = false;\n  @Input({ transform: booleanAttribute }) nzHide = false;\n  @Input({ transform: booleanAttribute }) nzCustomContent = false;\n\n  private nzOptionGroupComponent = inject(NzOptionGroupComponent, { optional: true });\n\n  constructor(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 { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';\n\nimport { NzOutletModule } from 'ng-zorro-antd/core/outlet';\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\nimport { numberAttributeWithInfinityFallback } from 'ng-zorro-antd/core/util';\nimport { NzIconModule } from 'ng-zorro-antd/icon';\n\n@Component({\n  selector: 'nz-select-arrow',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    @if (isMaxMultipleCountSet) {\n      <span>{{ listOfValue.length }} / {{ nzMaxMultipleCount }}</span>\n    }\n    @if (loading) {\n      <nz-icon nzType=\"loading\" />\n    } @else {\n      @if (showArrow && !suffixIcon) {\n        @if (search) {\n          <nz-icon nzType=\"search\" />\n        } @else {\n          <nz-icon nzType=\"down\" />\n        }\n      } @else {\n        <ng-container *nzStringTemplateOutlet=\"suffixIcon; let suffixIcon\">\n          @if (suffixIcon) {\n            <nz-icon [nzType]=\"suffixIcon\" />\n          }\n        </ng-container>\n      }\n    }\n    <ng-container *nzStringTemplateOutlet=\"feedbackIcon\">{{ feedbackIcon }}</ng-container>\n  `,\n  host: {\n    class: 'ant-select-arrow',\n    '[class.ant-select-arrow-loading]': 'loading'\n  },\n  imports: [NzIconModule, NzOutletModule]\n})\nexport class NzSelectArrowComponent {\n  @Input() listOfValue: NzSafeAny[] = [];\n  @Input() loading = false;\n  @Input() search = false;\n  @Input() showArrow = false;\n  @Input() isMaxMultipleCountSet = false;\n  @Input() suffixIcon: TemplateRef<NzSafeAny> | string | null = null;\n  @Input() feedbackIcon: TemplateRef<NzSafeAny> | string | null = null;\n  @Input({ transform: numberAttributeWithInfinityFallback }) nzMaxMultipleCount = Infinity;\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 { NgTemplateOutlet } from '@angular/common';\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';\nimport { NzIconModule } from 'ng-zorro-antd/icon';\n\n@Component({\n  selector: 'nz-select-clear',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    @if (clearIcon) {\n      <ng-template [ngTemplateOutlet]=\"clearIcon\"></ng-template>\n    } @else {\n      <nz-icon nzType=\"close-circle\" nzTheme=\"fill\" class=\"ant-select-close-icon\" />\n    }\n  `,\n  host: {\n    class: 'ant-select-clear',\n    '(click)': 'onClick($event)'\n  },\n  imports: [NgTemplateOutlet, NzIconModule]\n})\nexport class NzSelectClearComponent {\n  @Input() clearIcon: TemplateRef<NzSafeAny> | null = null;\n  @Output() readonly clear = new EventEmitter<MouseEvent>();\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 { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n  TemplateRef,\n  ViewEncapsulation\n} from '@angular/core';\n\nimport { NzOutletModule } from 'ng-zorro-antd/core/outlet';\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\nimport { NzIconModule } from 'ng-zorro-antd/icon';\n\n@Component({\n  selector: 'nz-select-item',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <ng-container *nzStringTemplateOutlet=\"contentTemplateOutlet; context: templateOutletContext\">\n      @if (deletable) {\n        <div class=\"ant-select-selection-item-content\">{{ label }}</div>\n      } @else {\n        {{ label }}\n      }\n    </ng-container>\n    @if (deletable && !disabled) {\n      <span class=\"ant-select-selection-item-remove\" (click)=\"onDelete($event)\">\n        @if (!removeIcon) {\n          <nz-icon nzType=\"close\" />\n        } @else {\n          <ng-template [ngTemplateOutlet]=\"removeIcon\"></ng-template>\n        }\n      </span>\n    }\n  `,\n  host: {\n    class: 'ant-select-selection-item',\n    '[attr.title]': 'label',\n    '[class.ant-select-selection-item-disabled]': 'disabled'\n  },\n  imports: [NgTemplateOutlet, NzOutletModule, NzIconModule]\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  protected get templateOutletContext(): NzSafeAny {\n    return {\n      $implicit: this.contentTemplateOutletContext,\n      ...this.contentTemplateOutletContext\n    };\n  }\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 { NzOutletModule } from 'ng-zorro-antd/core/outlet';\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  imports: [NzOutletModule]\n})\nexport class NzSelectPlaceholderComponent {\n  @Input() placeholder: TemplateRef<NzSafeAny> | string | null = null;\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, FormsModule } from '@angular/forms';\n\nimport { reqAnimFrame } from 'ng-zorro-antd/core/polyfill';\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    @if (mirrorSync) {\n      <span #mirrorElement class=\"ant-select-selection-search-mirror\"></span>\n    }\n  `,\n  host: { class: 'ant-select-selection-search' },\n  providers: [{ provide: COMPOSITION_BUFFER_MODE, useValue: false }],\n  imports: [FormsModule]\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    reqAnimFrame(() => {\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      this.renderer.setProperty(mirrorDOM, 'textContent', `${inputDOM.value}\\u00a0`);\n      this.renderer.setStyle(hostDOM, 'width', `${mirrorDOM.scrollWidth}px`);\n    });\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(\n    private elementRef: ElementRef,\n    private renderer: Renderer2,\n    private focusMonitor: FocusMonitor\n  ) {}\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 { BACKSPACE } from '@angular/cdk/keycodes';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Input,\n  NgZone,\n  OnChanges,\n  OnInit,\n  Output,\n  SimpleChanges,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation,\n  inject,\n  numberAttribute,\n  DestroyRef\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nimport { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';\nimport { NzSafeAny } from 'ng-zorro-antd/core/types';\nimport { fromEventOutsideAngular } from 'ng-zorro-antd/core/util';\n\nimport { NzSelectItemComponent } from './select-item.component';\nimport { NzSelectPlaceholderComponent } from './select-placeholder.component';\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    @switch (mode) {\n      @case ('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        @if (isShowSingleLabel) {\n          <nz-select-item\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        }\n      }\n      @default {\n        <!--multiple or tags mode-->\n        @for (item of listOfSlicedItem; track item.nzValue) {\n          <nz-select-item\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        }\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      }\n    }\n    @if (isShowPlaceholder) {\n      <nz-select-placeholder [placeholder]=\"placeHolder\"></nz-select-placeholder>\n    }\n  `,\n  host: { class: 'ant-select-selector' },\n  imports: [NzSelectSearchComponent, NzSelectItemComponent, NzSelectPlaceholderComponent]\n})\nexport class NzSelectTopControlComponent implements OnChanges, OnInit {\n  @Input() nzId: string | null = null;\n  @Input() showSearch = false;\n  @Input() placeHolder: string | TemplateRef<NzSafeAny> | null = null;\n  @Input() open = false;\n  @Input({ transform: numberAttribute }) 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  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, 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, separators: string[]): string[] => {\n      const reg = new RegExp(`[${separators.join()}]`);\n      const array = str.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  onDeleteItem(item: NzSelectItemInterface): void {\n    if (!this.disabled && !item.nzDisabled) {\n      this.deleteItem.next(item);\n    }\n  }\n\n  private destroyRef = inject(DestroyRef);\n  private elementRef = inject(ElementRef<HTMLElement>);\n  private ngZone = inject(NgZone);\n  noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true });\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    fromEventOutsideAngular<MouseEvent>(this.elementRef.nativeElement, 'click')\n      .pipe(takeUntilDestroyed(this.destroyRef))\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    fromEventOutsideAngular<KeyboardEvent>(this.elementRef.nativeElement, 'keydown')\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(event => {\n        if (event.target instanceof HTMLInputElement) {\n          const inputValue = event.target.value;\n\n          if (event.keyCode === BACKSPACE && this.mode !== 'default' && !inputValue && this.listOfTopItem.length > 0) {\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 * 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 {\n  CdkConnectedOverlay,\n  CdkOverlayOrigin,\n  ConnectedOverlayPositionChange,\n  ConnectionPositionPair\n} from '@angular/cdk/overlay';\nimport { Platform, _getEventTarget } from '@angular/cdk/platform';\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  Input,\n  NgZone,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  Output,\n  QueryList,\n  Renderer2,\n  SimpleChanges,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation,\n  booleanAttribute,\n  computed,\n  forwardRef,\n  inject,\n  signal\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { BehaviorSubject, combineLatest, merge, of as observableOf } from 'rxjs';\nimport { distinctUntilChanged, map, startWith, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators';\n\nimport { slideMotion } from 'ng-zorro-antd/core/animation';\nimport { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';\nimport { NzFormItemFeedbackIconComponent, NzFormNoStatusService, NzFormStatusService } from 'ng-zorro-antd/core/form';\nimport { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';\nimport { NzOverlayModule, POSITION_MAP, POSITION_TYPE, getPlacementName } from 'ng-zorro-antd/core/overlay';\nimport { cancelRequestAnimationFrame, reqAnimFrame } from 'ng-zorro-antd/core/polyfill';\nimport { NzDestroyService } from 'ng-zorro-antd/core/services';\nimport {\n  NgClassInterface,\n  NzSafeAny,\n  NzSizeLDSType,\n  NzStatus,\n  NzValidateStatus,\n  OnChangeType,\n  OnTouchedType\n} from 'ng-zorro-antd/core/types';\nimport {\n  fromEventOutsideAngular,\n  getStatusClassNames,\n  isNotNil,\n  numberAttributeWithInfinityFallback\n} from 'ng-zorro-antd/core/util';\nimport { NZ_SPACE_COMPACT_ITEM_TYPE, NZ_SPACE_COMPACT_SIZE, NzSpaceCompactItemDirective } from 'ng-zorro-antd/space';\n\nimport { NzOptionContainerComponent } from './option-container.component';\nimport { NzOptionGroupComponent } from './option-group.component';\nimport { NzOptionComponent } from './option.component';\nimport { NzSelectArrowComponent } from './select-arrow.component';\nimport { NzSelectClearComponent } from './select-clear.component';\nimport { NzSelectTopControlComponent } from './select-top-control.component';\nimport {\n  NzFilterOptionType,\n  NzSelectItemInterface,\n  NzSelectModeType,\n  NzSelectOptionInterface,\n  NzSelectPlacementType\n} 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 = NzSizeLDSType;\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    { provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'select' }\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    @if (nzShowArrow || (hasFeedback && !!status) || isMaxMultipleCountSet) {\n      <nz-select-arrow\n        [showArrow]=\"nzShowArrow\"\n        [loading]=\"nzLoading\"\n        [search]=\"nzOpen && nzShowSearch\"\n        [suffixIcon]=\"nzSuffixIcon\"\n        [feedbackIcon]=\"feedbackIconTpl\"\n        [nzMaxMultipleCount]=\"nzMaxMultipleCount\"\n        [listOfValue]=\"listOfValue\"\n        [isMaxMultipleCountSet]=\"isMaxMultipleCountSet\"\n      >\n        <ng-template #feedbackIconTpl>\n          @if (hasFeedback && !!status) {\n            <nz-form-item-feedback-icon [status]=\"status\"></nz-form-item-feedback-icon>\n          }\n        </ng-template>\n      </nz-select-arrow>\n    }\n\n    @if (nzAllowClear && !nzDisabled && listOfValue.length) {\n      <nz-select-clear [clearIcon]=\"nzClearIcon\" (clear)=\"onClearSelection()\"></nz-select-clear>\n    }\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      [cdkConnectedOverlayPositions]=\"positions\"\n      (overlayOutsideClick)=\"onClickOutside($event)\"\n      (detach)=\"setOpenState(false)\"\n      (positionChange)=\"onPositionChange($event)\"\n    >\n      <nz-option-container\n        [style]=\"nzDropdownStyle\"\n        [itemSize]=\"nzOptionHeightPx\"\n        [maxItemLength]=\"nzOptionOverflowSize\"\n        [matchWidth]=\"nzDropdownMatchSelectWidth\"\n        [class.ant-select-dropdown-placement-bottomLeft]=\"dropdownPosition === 'bottomLeft'\"\n        [class.ant-select-dropdown-placement-topLeft]=\"dropdownPosition === 'topLeft'\"\n        [class.ant-select-dropdown-placement-bottomRight]=\"dropdownPosition === 'bottomRight'\"\n        [class.ant-select-dropdown-placement-topRight]=\"dropdownPosition === 'topRight'\"\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        [isMaxMultipleCountReached]=\"isMaxMultipleCountReached\"\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-in-form-item]': '!!nzFormStatusService',\n    '[class.ant-select-lg]': 'finalSize() === \"large\"',\n    '[class.ant-select-sm]': 'finalSize() === \"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  hostDirectives: [NzSpaceCompactItemDirective],\n  imports: [\n    NzSelectTopControlComponent,\n    CdkOverlayOrigin,\n    NzNoAnimationDirective,\n    NzSelectArrowComponent,\n    NzFormItemFeedbackIconComponent,\n    NzSelectClearComponent,\n    CdkConnectedOverlay,\n    NzOverlayModule,\n    NzOptionContainerComponent\n  ]\n})\nexport class NzSelectComponent implements ControlValueAccessor, OnInit, AfterContentInit, OnChanges, OnDestroy {\n  readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;\n\n  @Input() nzId: string | null = null;\n  @Input() nzSize: NzSelectSizeType = 'default';\n  @Input() nzStatus: NzStatus = '';\n  @Input() @WithConfig() nzOptionHeightPx = 32;\n  @Input() nzOptionOverflowSize = 8;\n  @Input() nzDropdownClassName: string[] | string | null = null;\n  @Input() nzDropdownMatchSelectWidth = true;\n  @Input() nzDropdownStyle: Record<string, string> | null = null;\n  @Input() nzNotFoundContent: string | TemplateRef<NzSafeAny> | undefined = undefined;\n  @Input() nzPlaceHolder: string | TemplateRef<NzSafeAny> | null = null;\n  @Input() nzPlacement: NzSelectPlacementType | 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()\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({ transform: numberAttributeWithInfinityFallback }) 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({ transform: booleanAttribute }) nzAllowClear = false;\n  @Input({ transform: booleanAttribute }) @WithConfig() nzBorderless = false;\n  @Input({ transform: booleanAttribute }) nzShowSearch = false;\n  @Input({ transform: booleanAttribute }) nzLoading = false;\n  @Input({ transform: booleanAttribute }) nzAutoFocus = false;\n  @Input({ transform: booleanAttribute }) nzAutoClearSearchValue = true;\n  @Input({ transform: booleanAttribute }) nzServerSearch = false;\n  @Input({ transform: booleanAttribute }) nzDisabled = false;\n  @Input({ transform: booleanAttribute }) nzOpen = false;\n  @Input({ transform: booleanAttribute }) nzSelectOnTab = false;\n  @Input({ transform: booleanAttribute }) @WithConfig() nzBackdrop = false;\n  @Input() nzOptions: NzSelectOptionInterface[] = [];\n\n  @Input({ transform: booleanAttribute })\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  get isMultiple(): boolean {\n    return this.nzMode === 'multiple' || this.nzMode === 'tags';\n  }\n\n  get isMaxMultipleCountSet(): boolean {\n    return this.isMultiple && this.nzMaxMultipleCount !== Infinity;\n  }\n\n  get isMaxMultipleCountReached(): boolean {\n    return this.nzMaxMultipleCount !== Infinity && this.listOfValue.length === this.nzMaxMultipleCount;\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\n  protected finalSize = computed(() => {\n    if (this.compactSize) {\n      return this.compactSize();\n    }\n    return this.size();\n  });\n\n  private size = signal<NzSizeLDSType>(this.nzSize);\n  private compactSize = inject(NZ_SPACE_COMPACT_SIZE, { optional: true });\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  private isNzDisableFirstChange: boolean = true;\n\n  onChange: OnChangeType = () => {};\n  onTouched: OnTouchedType = () => {};\n  dropdownPosition: NzSelectPlacementType = 'bottomLeft';\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  positions: ConnectionPositionPair[] = [];\n\n  // status\n  prefixCls: string = 'ant-select';\n  statusCls: NgClassInterface = {};\n  status: NzValidateStatus = '';\n  hasFeedback: boolean = false;\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 listOfSelect