UNPKG

ng-zorro-antd

Version:

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

952 lines (950 loc) 126 kB
import { __decorate } from "tslib"; import { DOWN_ARROW, ENTER, ESCAPE, SPACE, TAB, UP_ARROW } from '@angular/cdk/keycodes'; import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay'; import { _getEventTarget } from '@angular/cdk/platform'; import { NgStyle } from '@angular/common'; import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, Input, Output, TemplateRef, ViewChild, ViewEncapsulation, booleanAttribute, forwardRef, inject } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { BehaviorSubject, combineLatest, fromEvent, merge, of as observableOf } from 'rxjs'; import { distinctUntilChanged, map, startWith, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators'; import { slideMotion } from 'ng-zorro-antd/core/animation'; import { WithConfig } from 'ng-zorro-antd/core/config'; import { NzFormNoStatusService, NzFormPatchModule, NzFormStatusService } from 'ng-zorro-antd/core/form'; import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation'; import { NzOverlayModule, POSITION_MAP, getPlacementName } from 'ng-zorro-antd/core/overlay'; import { cancelRequestAnimationFrame, reqAnimFrame } from 'ng-zorro-antd/core/polyfill'; import { NzDestroyService } from 'ng-zorro-antd/core/services'; import { getStatusClassNames, isNotNil } from 'ng-zorro-antd/core/util'; import { NzOptionContainerComponent } from './option-container.component'; import { NzOptionGroupComponent } from './option-group.component'; import { NzOptionComponent } from './option.component'; import { NzSelectArrowComponent } from './select-arrow.component'; import { NzSelectClearComponent } from './select-clear.component'; import { NzSelectTopControlComponent } from './select-top-control.component'; import * as i0 from "@angular/core"; import * as i1 from "ng-zorro-antd/core/services"; import * as i2 from "ng-zorro-antd/core/config"; import * as i3 from "@angular/cdk/platform"; import * as i4 from "@angular/cdk/a11y"; import * as i5 from "@angular/cdk/bidi"; import * as i6 from "ng-zorro-antd/core/form"; import * as i7 from "ng-zorro-antd/core/overlay"; const defaultFilterOption = (searchValue, item) => { if (item && item.nzLabel) { return item.nzLabel.toString().toLowerCase().indexOf(searchValue.toLowerCase()) > -1; } else { return false; } }; const NZ_CONFIG_MODULE_NAME = 'select'; export class NzSelectComponent { set nzShowArrow(value) { this._nzShowArrow = value; } get nzShowArrow() { return this._nzShowArrow === undefined ? this.nzMode === 'default' : this._nzShowArrow; } get isMaxTagCountSet() { return this.nzMaxMultipleCount !== Infinity; } generateTagItem(value) { return { nzValue: value, nzLabel: value, type: 'item' }; } onItemClick(value) { this.activatedValue = value; if (this.nzMode === 'default') { if (this.listOfValue.length === 0 || !this.compareWith(this.listOfValue[0], value)) { this.updateListOfValue([value]); } this.setOpenState(false); } else { const targetIndex = this.listOfValue.findIndex(o => this.compareWith(o, value)); if (targetIndex !== -1) { const listOfValueAfterRemoved = this.listOfValue.filter((_, i) => i !== targetIndex); this.updateListOfValue(listOfValueAfterRemoved); } else if (this.listOfValue.length < this.nzMaxMultipleCount) { const listOfValueAfterAdded = [...this.listOfValue, value]; this.updateListOfValue(listOfValueAfterAdded); } this.focus(); if (this.nzAutoClearSearchValue) { this.clearInput(); } } } onItemDelete(item) { const listOfSelectedValue = this.listOfValue.filter(v => !this.compareWith(v, item.nzValue)); this.updateListOfValue(listOfSelectedValue); this.clearInput(); } updateListOfContainerItem() { let listOfContainerItem = this.listOfTagAndTemplateItem .filter(item => !item.nzHide) .filter(item => { if (!this.nzServerSearch && this.searchValue) { return this.nzFilterOption(this.searchValue, item); } else { return true; } }); if (this.nzMode === 'tags' && this.searchValue) { const matchedItem = this.listOfTagAndTemplateItem.find(item => item.nzLabel === this.searchValue); if (!matchedItem) { const tagItem = this.generateTagItem(this.searchValue); listOfContainerItem = [tagItem, ...listOfContainerItem]; this.activatedValue = tagItem.nzValue; } else { this.activatedValue = matchedItem.nzValue; } } const activatedItem = listOfContainerItem.find(item => item.nzLabel === this.searchValue) || listOfContainerItem.find(item => this.compareWith(item.nzValue, this.activatedValue)) || listOfContainerItem.find(item => this.compareWith(item.nzValue, this.listOfValue[0])) || listOfContainerItem[0]; this.activatedValue = (activatedItem && activatedItem.nzValue) || null; let listOfGroupLabel = []; if (this.isReactiveDriven) { listOfGroupLabel = [...new Set(this.nzOptions.filter(o => o.groupLabel).map(o => o.groupLabel))]; } else { if (this.listOfNzOptionGroupComponent) { listOfGroupLabel = this.listOfNzOptionGroupComponent.map(o => o.nzLabel); } } /** insert group item **/ listOfGroupLabel.forEach(label => { const index = listOfContainerItem.findIndex(item => label === item.groupLabel); if (index > -1) { const groupItem = { groupLabel: label, type: 'group', key: label }; listOfContainerItem.splice(index, 0, groupItem); } }); this.listOfContainerItem = [...listOfContainerItem]; this.updateCdkConnectedOverlayPositions(); } clearInput() { this.nzSelectTopControlComponent.clearInputValue(); } updateListOfValue(listOfValue) { const covertListToModel = (list, mode) => { if (mode === 'default') { if (list.length > 0) { return list[0]; } else { return null; } } else { return list; } }; const model = covertListToModel(listOfValue, this.nzMode); if (this.value !== model) { this.listOfValue = listOfValue; this.listOfValue$.next(listOfValue); this.value = model; this.onChange(this.value); } this.isMaxLimitReached = this.nzMaxMultipleCount !== Infinity && this.listOfValue.length === this.nzMaxMultipleCount; } onTokenSeparate(listOfLabel) { const listOfMatchedValue = this.listOfTagAndTemplateItem .filter(item => listOfLabel.findIndex(label => label === item.nzLabel) !== -1) .map(item => item.nzValue) .filter(item => this.listOfValue.findIndex(v => this.compareWith(v, item)) === -1); if (this.nzMode === 'multiple') { this.updateListOfValue([...this.listOfValue, ...listOfMatchedValue]); } else if (this.nzMode === 'tags') { const listOfUnMatchedLabel = listOfLabel.filter(label => this.listOfTagAndTemplateItem.findIndex(item => item.nzLabel === label) === -1); this.updateListOfValue([...this.listOfValue, ...listOfMatchedValue, ...listOfUnMatchedLabel]); } this.clearInput(); } onKeyDown(e) { if (this.nzDisabled) { return; } const listOfFilteredOptionNotDisabled = this.listOfContainerItem .filter(item => item.type === 'item') .filter(item => !item.nzDisabled); const activatedIndex = listOfFilteredOptionNotDisabled.findIndex(item => this.compareWith(item.nzValue, this.activatedValue)); switch (e.keyCode) { case UP_ARROW: e.preventDefault(); if (this.nzOpen && listOfFilteredOptionNotDisabled.length > 0) { const preIndex = activatedIndex > 0 ? activatedIndex - 1 : listOfFilteredOptionNotDisabled.length - 1; this.activatedValue = listOfFilteredOptionNotDisabled[preIndex].nzValue; } break; case DOWN_ARROW: e.preventDefault(); if (this.nzOpen && listOfFilteredOptionNotDisabled.length > 0) { const nextIndex = activatedIndex < listOfFilteredOptionNotDisabled.length - 1 ? activatedIndex + 1 : 0; this.activatedValue = listOfFilteredOptionNotDisabled[nextIndex].nzValue; } else { this.setOpenState(true); } break; case ENTER: e.preventDefault(); if (this.nzOpen) { if (isNotNil(this.activatedValue) && activatedIndex !== -1) { this.onItemClick(this.activatedValue); } } else { this.setOpenState(true); } break; case SPACE: if (!this.nzOpen) { this.setOpenState(true); e.preventDefault(); } break; case TAB: if (this.nzSelectOnTab) { if (this.nzOpen) { e.preventDefault(); if (isNotNil(this.activatedValue)) { this.onItemClick(this.activatedValue); } } } else { this.setOpenState(false); } break; case ESCAPE: /** * Skip the ESCAPE processing, it will be handled in {@link onOverlayKeyDown}. */ break; default: if (!this.nzOpen) { this.setOpenState(true); } } } setOpenState(value) { if (this.nzOpen !== value) { this.nzOpen = value; this.nzOpenChange.emit(value); this.onOpenChange(); this.cdr.markForCheck(); } } onOpenChange() { this.updateCdkConnectedOverlayStatus(); if (this.nzAutoClearSearchValue) { this.clearInput(); } } onInputValueChange(value) { this.searchValue = value; this.updateListOfContainerItem(); this.nzOnSearch.emit(value); this.updateCdkConnectedOverlayPositions(); } onClearSelection() { this.updateListOfValue([]); } onClickOutside(event) { const target = _getEventTarget(event); if (!this.host.nativeElement.contains(target)) { this.setOpenState(false); } } focus() { this.nzSelectTopControlComponent.focus(); } blur() { this.nzSelectTopControlComponent.blur(); } onPositionChange(position) { const placement = getPlacementName(position); this.dropDownPosition = placement; } updateCdkConnectedOverlayStatus() { if (this.platform.isBrowser && this.originElement.nativeElement) { const triggerWidth = this.triggerWidth; cancelRequestAnimationFrame(this.requestId); this.requestId = reqAnimFrame(() => { // Blink triggers style and layout pipelines anytime the `getBoundingClientRect()` is called, which may cause a // frame drop. That's why it's scheduled through the `requestAnimationFrame` to unload the composite thread. this.triggerWidth = this.originElement.nativeElement.getBoundingClientRect().width; if (triggerWidth !== this.triggerWidth) { // The `requestAnimationFrame` will trigger change detection, but we're inside an `OnPush` component which won't have // the `ChecksEnabled` state. Calling `markForCheck()` will allow Angular to run the change detection from the root component // down to the `nz-select`. But we'll trigger only local change detection if the `triggerWidth` has been changed. this.cdr.detectChanges(); } }); } } updateCdkConnectedOverlayPositions() { reqAnimFrame(() => { this.cdkConnectedOverlay?.overlayRef?.updatePosition(); }); } constructor(ngZone, destroy$, nzConfigService, cdr, host, renderer, platform, focusMonitor, directionality) { this.ngZone = ngZone; this.destroy$ = destroy$; this.nzConfigService = nzConfigService; this.cdr = cdr; this.host = host; this.renderer = renderer; this.platform = platform; this.focusMonitor = focusMonitor; this.directionality = directionality; this._nzModuleName = NZ_CONFIG_MODULE_NAME; this.nzId = null; this.nzSize = 'default'; this.nzStatus = ''; this.nzOptionHeightPx = 32; this.nzOptionOverflowSize = 8; this.nzDropdownClassName = null; this.nzDropdownMatchSelectWidth = true; this.nzDropdownStyle = null; this.nzNotFoundContent = undefined; this.nzPlaceHolder = null; this.nzPlacement = null; this.nzMaxTagCount = Infinity; this.nzDropdownRender = null; this.nzCustomTemplate = null; this.nzSuffixIcon = null; this.nzClearIcon = null; this.nzRemoveIcon = null; this.nzMenuItemSelectedIcon = null; this.nzTokenSeparators = []; this.nzMaxTagPlaceholder = null; this.nzMaxMultipleCount = Infinity; this.nzMode = 'default'; this.nzFilterOption = defaultFilterOption; this.compareWith = (o1, o2) => o1 === o2; this.nzAllowClear = false; this.nzBorderless = false; this.nzShowSearch = false; this.nzLoading = false; this.nzAutoFocus = false; this.nzAutoClearSearchValue = true; this.nzServerSearch = false; this.nzDisabled = false; this.nzOpen = false; this.nzSelectOnTab = false; this.nzBackdrop = false; this.nzOptions = []; this.nzOnSearch = new EventEmitter(); this.nzScrollToBottom = new EventEmitter(); this.nzOpenChange = new EventEmitter(); this.nzBlur = new EventEmitter(); this.nzFocus = new EventEmitter(); this.listOfValue$ = new BehaviorSubject([]); this.listOfTemplateItem$ = new BehaviorSubject([]); this.listOfTagAndTemplateItem = []; this.searchValue = ''; this.isReactiveDriven = false; this.requestId = -1; this.isNzDisableFirstChange = true; this.onChange = () => { }; this.onTouched = () => { }; this.dropDownPosition = 'bottomLeft'; this.triggerWidth = null; this.listOfContainerItem = []; this.listOfTopItem = []; this.activatedValue = null; this.listOfValue = []; this.focused = false; this.dir = 'ltr'; this.positions = []; this.isMaxLimitReached = false; // status this.prefixCls = 'ant-select'; this.statusCls = {}; this.status = ''; this.hasFeedback = false; this.noAnimation = inject(NzNoAnimationDirective, { host: true, optional: true }); this.nzFormStatusService = inject(NzFormStatusService, { optional: true }); this.nzFormNoStatusService = inject(NzFormNoStatusService, { optional: true }); } writeValue(modelValue) { /** https://github.com/angular/angular/issues/14988 **/ if (this.value !== modelValue) { this.value = modelValue; const covertModelToList = (model, mode) => { if (model === null || model === undefined) { return []; } else if (mode === 'default') { return [model]; } else { return model; } }; const listOfValue = covertModelToList(modelValue, this.nzMode); this.listOfValue = listOfValue; this.listOfValue$.next(listOfValue); this.cdr.markForCheck(); } } registerOnChange(fn) { this.onChange = fn; } registerOnTouched(fn) { this.onTouched = fn; } setDisabledState(disabled) { this.nzDisabled = (this.isNzDisableFirstChange && this.nzDisabled) || disabled; this.isNzDisableFirstChange = false; if (this.nzDisabled) { this.setOpenState(false); } this.cdr.markForCheck(); } ngOnChanges(changes) { const { nzOpen, nzDisabled, nzOptions, nzStatus, nzPlacement } = changes; if (nzOpen) { this.onOpenChange(); } if (nzDisabled && this.nzDisabled) { this.setOpenState(false); } if (nzOptions) { this.isReactiveDriven = true; const listOfOptions = this.nzOptions || []; const listOfTransformedItem = listOfOptions.map(item => { return { template: item.label instanceof TemplateRef ? item.label : null, nzTitle: this.getTitle(item.title, item.label), nzLabel: typeof item.label === 'string' || typeof item.label === 'number' ? item.label : null, nzValue: item.value, nzDisabled: item.disabled || false, nzHide: item.hide || false, nzCustomContent: item.label instanceof TemplateRef, groupLabel: item.groupLabel || null, type: 'item', key: item.key === undefined ? item.value : item.key }; }); this.listOfTemplateItem$.next(listOfTransformedItem); } if (nzStatus) { this.setStatusStyles(this.nzStatus, this.hasFeedback); } if (nzPlacement) { const { currentValue } = nzPlacement; this.dropDownPosition = currentValue; const listOfPlacement = ['bottomLeft', 'topLeft', 'bottomRight', 'topRight']; if (currentValue && listOfPlacement.includes(currentValue)) { this.positions = [POSITION_MAP[currentValue]]; } else { this.positions = listOfPlacement.map(e => POSITION_MAP[e]); } } } ngOnInit() { this.nzFormStatusService?.formStatusChanges .pipe(distinctUntilChanged((pre, cur) => { return pre.status === cur.status && pre.hasFeedback === cur.hasFeedback; }), withLatestFrom(this.nzFormNoStatusService ? this.nzFormNoStatusService.noFormStatus : observableOf(false)), map(([{ status, hasFeedback }, noStatus]) => ({ status: noStatus ? '' : status, hasFeedback })), takeUntil(this.destroy$)) .subscribe(({ status, hasFeedback }) => { this.setStatusStyles(status, hasFeedback); }); this.focusMonitor .monitor(this.host, true) .pipe(takeUntil(this.destroy$)) .subscribe(focusOrigin => { if (!focusOrigin) { this.focused = false; this.cdr.markForCheck(); this.nzBlur.emit(); Promise.resolve().then(() => { this.onTouched(); }); } else { this.focused = true; this.cdr.markForCheck(); this.nzFocus.emit(); } }); combineLatest([this.listOfValue$, this.listOfTemplateItem$]) .pipe(takeUntil(this.destroy$)) .subscribe(([listOfSelectedValue, listOfTemplateItem]) => { const listOfTagItem = listOfSelectedValue .filter(() => this.nzMode === 'tags') .filter(value => listOfTemplateItem.findIndex(o => this.compareWith(o.nzValue, value)) === -1) .map(value => this.listOfTopItem.find(o => this.compareWith(o.nzValue, value)) || this.generateTagItem(value)); this.listOfTagAndTemplateItem = [...listOfTemplateItem, ...listOfTagItem]; this.listOfTopItem = this.listOfValue .map(v => [...this.listOfTagAndTemplateItem, ...this.listOfTopItem].find(item => this.compareWith(v, item.nzValue))) .filter(item => !!item); this.updateListOfContainerItem(); }); this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => { this.dir = direction; this.cdr.detectChanges(); }); this.nzConfigService .getConfigChangeEventForComponent('select') .pipe(takeUntil(this.destroy$)) .subscribe(() => { this.cdr.markForCheck(); }); this.dir = this.directionality.value; this.ngZone.runOutsideAngular(() => fromEvent(this.host.nativeElement, 'click') .pipe(takeUntil(this.destroy$)) .subscribe(() => { if ((this.nzOpen && this.nzShowSearch) || this.nzDisabled) { return; } this.ngZone.run(() => this.setOpenState(!this.nzOpen)); })); // Caretaker note: we could've added this listener within the template `(overlayKeydown)="..."`, // but with this approach, it'll run change detection on each keyboard click, and also it'll run // `markForCheck()` internally, which means the whole component tree (starting from the root and // going down to the select component) will be re-checked and updated (if needed). // This is safe to do that manually since `setOpenState()` calls `markForCheck()` if needed. this.cdkConnectedOverlay.overlayKeydown.pipe(takeUntil(this.destroy$)).subscribe(event => { if (event.keyCode === ESCAPE) { this.setOpenState(false); } }); } ngAfterContentInit() { if (!this.isReactiveDriven) { merge(this.listOfNzOptionGroupComponent.changes, this.listOfNzOptionComponent.changes) .pipe(startWith(true), switchMap(() => merge(...[ this.listOfNzOptionComponent.changes, this.listOfNzOptionGroupComponent.changes, ...this.listOfNzOptionComponent.map(option => option.changes), ...this.listOfNzOptionGroupComponent.map(option => option.changes) ]).pipe(startWith(true))), takeUntil(this.destroy$)) .subscribe(() => { const listOfOptionInterface = this.listOfNzOptionComponent.toArray().map(item => { const { template, nzLabel, nzValue, nzKey, nzDisabled, nzHide, nzCustomContent, groupLabel } = item; return { template, nzLabel, nzValue, nzDisabled, nzHide, nzCustomContent, groupLabel, nzTitle: this.getTitle(item.nzTitle, item.nzLabel), type: 'item', key: nzKey === undefined ? nzValue : nzKey }; }); this.listOfTemplateItem$.next(listOfOptionInterface); this.cdr.markForCheck(); }); } } ngOnDestroy() { cancelRequestAnimationFrame(this.requestId); this.focusMonitor.stopMonitoring(this.host); } setStatusStyles(status, hasFeedback) { this.status = status; this.hasFeedback = hasFeedback; this.cdr.markForCheck(); // render status if nzStatus is set this.statusCls = getStatusClassNames(this.prefixCls, status, hasFeedback); Object.keys(this.statusCls).forEach(status => { if (this.statusCls[status]) { this.renderer.addClass(this.host.nativeElement, status); } else { this.renderer.removeClass(this.host.nativeElement, status); } }); } getTitle(title, label) { let rawTitle = undefined; if (title === undefined) { if (typeof label === 'string' || typeof label === 'number') { rawTitle = label.toString(); } } else if (typeof title === 'string' || typeof title === 'number') { rawTitle = title.toString(); } return rawTitle; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzSelectComponent, deps: [{ token: i0.NgZone }, { token: i1.NzDestroyService }, { token: i2.NzConfigService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i3.Platform }, { token: i4.FocusMonitor }, { token: i5.Directionality }], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: NzSelectComponent, isStandalone: true, selector: "nz-select", inputs: { nzId: "nzId", nzSize: "nzSize", nzStatus: "nzStatus", nzOptionHeightPx: "nzOptionHeightPx", nzOptionOverflowSize: "nzOptionOverflowSize", nzDropdownClassName: "nzDropdownClassName", nzDropdownMatchSelectWidth: "nzDropdownMatchSelectWidth", nzDropdownStyle: "nzDropdownStyle", nzNotFoundContent: "nzNotFoundContent", nzPlaceHolder: "nzPlaceHolder", nzPlacement: "nzPlacement", nzMaxTagCount: "nzMaxTagCount", nzDropdownRender: "nzDropdownRender", nzCustomTemplate: "nzCustomTemplate", nzSuffixIcon: "nzSuffixIcon", nzClearIcon: "nzClearIcon", nzRemoveIcon: "nzRemoveIcon", nzMenuItemSelectedIcon: "nzMenuItemSelectedIcon", nzTokenSeparators: "nzTokenSeparators", nzMaxTagPlaceholder: "nzMaxTagPlaceholder", nzMaxMultipleCount: "nzMaxMultipleCount", nzMode: "nzMode", nzFilterOption: "nzFilterOption", compareWith: "compareWith", nzAllowClear: ["nzAllowClear", "nzAllowClear", booleanAttribute], nzBorderless: ["nzBorderless", "nzBorderless", booleanAttribute], nzShowSearch: ["nzShowSearch", "nzShowSearch", booleanAttribute], nzLoading: ["nzLoading", "nzLoading", booleanAttribute], nzAutoFocus: ["nzAutoFocus", "nzAutoFocus", booleanAttribute], nzAutoClearSearchValue: ["nzAutoClearSearchValue", "nzAutoClearSearchValue", booleanAttribute], nzServerSearch: ["nzServerSearch", "nzServerSearch", booleanAttribute], nzDisabled: ["nzDisabled", "nzDisabled", booleanAttribute], nzOpen: ["nzOpen", "nzOpen", booleanAttribute], nzSelectOnTab: ["nzSelectOnTab", "nzSelectOnTab", booleanAttribute], nzBackdrop: ["nzBackdrop", "nzBackdrop", booleanAttribute], nzOptions: "nzOptions", nzShowArrow: ["nzShowArrow", "nzShowArrow", booleanAttribute] }, outputs: { nzOnSearch: "nzOnSearch", nzScrollToBottom: "nzScrollToBottom", nzOpenChange: "nzOpenChange", nzBlur: "nzBlur", nzFocus: "nzFocus" }, host: { properties: { "class.ant-select-in-form-item": "!!nzFormStatusService", "class.ant-select-lg": "nzSize === \"large\"", "class.ant-select-sm": "nzSize === \"small\"", "class.ant-select-show-arrow": "nzShowArrow", "class.ant-select-disabled": "nzDisabled", "class.ant-select-show-search": "(nzShowSearch || nzMode !== 'default') && !nzDisabled", "class.ant-select-allow-clear": "nzAllowClear", "class.ant-select-borderless": "nzBorderless", "class.ant-select-open": "nzOpen", "class.ant-select-focused": "nzOpen || focused", "class.ant-select-single": "nzMode === 'default'", "class.ant-select-multiple": "nzMode !== 'default'", "class.ant-select-rtl": "dir === 'rtl'" }, classAttribute: "ant-select" }, providers: [ NzDestroyService, { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NzSelectComponent), multi: true } ], queries: [{ propertyName: "listOfNzOptionComponent", predicate: NzOptionComponent, descendants: true }, { propertyName: "listOfNzOptionGroupComponent", predicate: NzOptionGroupComponent, descendants: true }], viewQueries: [{ propertyName: "originElement", first: true, predicate: CdkOverlayOrigin, descendants: true, read: ElementRef, static: true }, { propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, static: true }, { propertyName: "nzSelectTopControlComponent", first: true, predicate: NzSelectTopControlComponent, descendants: true, static: true }, { propertyName: "nzOptionGroupComponentElement", first: true, predicate: NzOptionGroupComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "nzSelectTopControlComponentElement", first: true, predicate: NzSelectTopControlComponent, descendants: true, read: ElementRef, static: true }], exportAs: ["nzSelect"], usesOnChanges: true, ngImport: i0, template: ` <nz-select-top-control cdkOverlayOrigin #origin="cdkOverlayOrigin" [nzId]="nzId" [open]="nzOpen" [disabled]="nzDisabled" [mode]="nzMode" [@.disabled]="!!noAnimation?.nzNoAnimation" [nzNoAnimation]="noAnimation?.nzNoAnimation" [maxTagPlaceholder]="nzMaxTagPlaceholder" [removeIcon]="nzRemoveIcon" [placeHolder]="nzPlaceHolder" [maxTagCount]="nzMaxTagCount" [customTemplate]="nzCustomTemplate" [tokenSeparators]="nzTokenSeparators" [showSearch]="nzShowSearch" [autofocus]="nzAutoFocus" [listOfTopItem]="listOfTopItem" (inputValueChange)="onInputValueChange($event)" (tokenize)="onTokenSeparate($event)" (deleteItem)="onItemDelete($event)" (keydown)="onKeyDown($event)" ></nz-select-top-control> @if (nzShowArrow || (hasFeedback && !!status) || isMaxTagCountSet) { <nz-select-arrow [showArrow]="nzShowArrow" [loading]="nzLoading" [search]="nzOpen && nzShowSearch" [suffixIcon]="nzSuffixIcon" [feedbackIcon]="feedbackIconTpl" [nzMaxMultipleCount]="nzMaxMultipleCount" [listOfValue]="listOfValue" [isMaxTagCountSet]="isMaxTagCountSet" > <ng-template #feedbackIconTpl> @if (hasFeedback && !!status) { <nz-form-item-feedback-icon [status]="status"></nz-form-item-feedback-icon> } </ng-template> </nz-select-arrow> } @if (nzAllowClear && !nzDisabled && listOfValue.length) { <nz-select-clear [clearIcon]="nzClearIcon" (clear)="onClearSelection()"></nz-select-clear> } <ng-template cdkConnectedOverlay nzConnectedOverlay [cdkConnectedOverlayHasBackdrop]="nzBackdrop" [cdkConnectedOverlayMinWidth]="$any(nzDropdownMatchSelectWidth ? null : triggerWidth)" [cdkConnectedOverlayWidth]="$any(nzDropdownMatchSelectWidth ? triggerWidth : null)" [cdkConnectedOverlayOrigin]="origin" [cdkConnectedOverlayTransformOriginOn]="'.ant-select-dropdown'" [cdkConnectedOverlayPanelClass]="nzDropdownClassName!" [cdkConnectedOverlayOpen]="nzOpen" [cdkConnectedOverlayPositions]="positions" (overlayOutsideClick)="onClickOutside($event)" (detach)="setOpenState(false)" (positionChange)="onPositionChange($event)" > <nz-option-container [ngStyle]="nzDropdownStyle" [itemSize]="nzOptionHeightPx" [maxItemLength]="nzOptionOverflowSize" [matchWidth]="nzDropdownMatchSelectWidth" [class.ant-select-dropdown-placement-bottomLeft]="dropDownPosition === 'bottomLeft'" [class.ant-select-dropdown-placement-topLeft]="dropDownPosition === 'topLeft'" [class.ant-select-dropdown-placement-bottomRight]="dropDownPosition === 'bottomRight'" [class.ant-select-dropdown-placement-topRight]="dropDownPosition === 'topRight'" [@slideMotion]="'enter'" [@.disabled]="!!noAnimation?.nzNoAnimation" [nzNoAnimation]="noAnimation?.nzNoAnimation" [listOfContainerItem]="listOfContainerItem" [menuItemSelectedIcon]="nzMenuItemSelectedIcon" [notFoundContent]="nzNotFoundContent" [activatedValue]="activatedValue" [listOfSelectedValue]="listOfValue" [dropdownRender]="nzDropdownRender" [compareWith]="compareWith" [mode]="nzMode" [isMaxLimitReached]="isMaxLimitReached" (keydown)="onKeyDown($event)" (itemClick)="onItemClick($event)" (scrollToBottom)="nzScrollToBottom.emit()" ></nz-option-container> </ng-template> `, isInline: true, dependencies: [{ kind: "component", type: NzSelectTopControlComponent, selector: "nz-select-top-control", inputs: ["nzId", "showSearch", "placeHolder", "open", "maxTagCount", "autofocus", "disabled", "mode", "customTemplate", "maxTagPlaceholder", "removeIcon", "listOfTopItem", "tokenSeparators"], outputs: ["tokenize", "inputValueChange", "deleteItem"], exportAs: ["nzSelectTopControl"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NzNoAnimationDirective, selector: "[nzNoAnimation]", inputs: ["nzNoAnimation"], exportAs: ["nzNoAnimation"] }, { kind: "component", type: NzSelectArrowComponent, selector: "nz-select-arrow", inputs: ["listOfValue", "loading", "search", "showArrow", "isMaxTagCountSet", "suffixIcon", "feedbackIcon", "nzMaxMultipleCount"] }, { kind: "ngmodule", type: NzFormPatchModule }, { kind: "component", type: i6.NzFormItemFeedbackIconComponent, selector: "nz-form-item-feedback-icon", inputs: ["status"], exportAs: ["nzFormFeedbackIcon"] }, { kind: "component", type: NzSelectClearComponent, selector: "nz-select-clear", inputs: ["clearIcon"], outputs: ["clear"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: NzOverlayModule }, { kind: "directive", type: i7.NzConnectedOverlayDirective, selector: "[cdkConnectedOverlay][nzConnectedOverlay]", inputs: ["nzArrowPointAtCenter"], exportAs: ["nzConnectedOverlay"] }, { kind: "component", type: NzOptionContainerComponent, selector: "nz-option-container", inputs: ["notFoundContent", "menuItemSelectedIcon", "dropdownRender", "activatedValue", "listOfSelectedValue", "compareWith", "mode", "matchWidth", "itemSize", "maxItemLength", "isMaxLimitReached", "listOfContainerItem"], outputs: ["itemClick", "scrollToBottom"], exportAs: ["nzOptionContainer"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [slideMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } } __decorate([ WithConfig() ], NzSelectComponent.prototype, "nzOptionHeightPx", void 0); __decorate([ WithConfig() ], NzSelectComponent.prototype, "nzSuffixIcon", void 0); __decorate([ WithConfig() ], NzSelectComponent.prototype, "nzBorderless", void 0); __decorate([ WithConfig() ], NzSelectComponent.prototype, "nzBackdrop", void 0); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzSelectComponent, decorators: [{ type: Component, args: [{ selector: 'nz-select', exportAs: 'nzSelect', preserveWhitespaces: false, providers: [ NzDestroyService, { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NzSelectComponent), multi: true } ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [slideMotion], template: ` <nz-select-top-control cdkOverlayOrigin #origin="cdkOverlayOrigin" [nzId]="nzId" [open]="nzOpen" [disabled]="nzDisabled" [mode]="nzMode" [@.disabled]="!!noAnimation?.nzNoAnimation" [nzNoAnimation]="noAnimation?.nzNoAnimation" [maxTagPlaceholder]="nzMaxTagPlaceholder" [removeIcon]="nzRemoveIcon" [placeHolder]="nzPlaceHolder" [maxTagCount]="nzMaxTagCount" [customTemplate]="nzCustomTemplate" [tokenSeparators]="nzTokenSeparators" [showSearch]="nzShowSearch" [autofocus]="nzAutoFocus" [listOfTopItem]="listOfTopItem" (inputValueChange)="onInputValueChange($event)" (tokenize)="onTokenSeparate($event)" (deleteItem)="onItemDelete($event)" (keydown)="onKeyDown($event)" ></nz-select-top-control> @if (nzShowArrow || (hasFeedback && !!status) || isMaxTagCountSet) { <nz-select-arrow [showArrow]="nzShowArrow" [loading]="nzLoading" [search]="nzOpen && nzShowSearch" [suffixIcon]="nzSuffixIcon" [feedbackIcon]="feedbackIconTpl" [nzMaxMultipleCount]="nzMaxMultipleCount" [listOfValue]="listOfValue" [isMaxTagCountSet]="isMaxTagCountSet" > <ng-template #feedbackIconTpl> @if (hasFeedback && !!status) { <nz-form-item-feedback-icon [status]="status"></nz-form-item-feedback-icon> } </ng-template> </nz-select-arrow> } @if (nzAllowClear && !nzDisabled && listOfValue.length) { <nz-select-clear [clearIcon]="nzClearIcon" (clear)="onClearSelection()"></nz-select-clear> } <ng-template cdkConnectedOverlay nzConnectedOverlay [cdkConnectedOverlayHasBackdrop]="nzBackdrop" [cdkConnectedOverlayMinWidth]="$any(nzDropdownMatchSelectWidth ? null : triggerWidth)" [cdkConnectedOverlayWidth]="$any(nzDropdownMatchSelectWidth ? triggerWidth : null)" [cdkConnectedOverlayOrigin]="origin" [cdkConnectedOverlayTransformOriginOn]="'.ant-select-dropdown'" [cdkConnectedOverlayPanelClass]="nzDropdownClassName!" [cdkConnectedOverlayOpen]="nzOpen" [cdkConnectedOverlayPositions]="positions" (overlayOutsideClick)="onClickOutside($event)" (detach)="setOpenState(false)" (positionChange)="onPositionChange($event)" > <nz-option-container [ngStyle]="nzDropdownStyle" [itemSize]="nzOptionHeightPx" [maxItemLength]="nzOptionOverflowSize" [matchWidth]="nzDropdownMatchSelectWidth" [class.ant-select-dropdown-placement-bottomLeft]="dropDownPosition === 'bottomLeft'" [class.ant-select-dropdown-placement-topLeft]="dropDownPosition === 'topLeft'" [class.ant-select-dropdown-placement-bottomRight]="dropDownPosition === 'bottomRight'" [class.ant-select-dropdown-placement-topRight]="dropDownPosition === 'topRight'" [@slideMotion]="'enter'" [@.disabled]="!!noAnimation?.nzNoAnimation" [nzNoAnimation]="noAnimation?.nzNoAnimation" [listOfContainerItem]="listOfContainerItem" [menuItemSelectedIcon]="nzMenuItemSelectedIcon" [notFoundContent]="nzNotFoundContent" [activatedValue]="activatedValue" [listOfSelectedValue]="listOfValue" [dropdownRender]="nzDropdownRender" [compareWith]="compareWith" [mode]="nzMode" [isMaxLimitReached]="isMaxLimitReached" (keydown)="onKeyDown($event)" (itemClick)="onItemClick($event)" (scrollToBottom)="nzScrollToBottom.emit()" ></nz-option-container> </ng-template> `, host: { class: 'ant-select', '[class.ant-select-in-form-item]': '!!nzFormStatusService', '[class.ant-select-lg]': 'nzSize === "large"', '[class.ant-select-sm]': 'nzSize === "small"', '[class.ant-select-show-arrow]': `nzShowArrow`, '[class.ant-select-disabled]': 'nzDisabled', '[class.ant-select-show-search]': `(nzShowSearch || nzMode !== 'default') && !nzDisabled`, '[class.ant-select-allow-clear]': 'nzAllowClear', '[class.ant-select-borderless]': 'nzBorderless', '[class.ant-select-open]': 'nzOpen', '[class.ant-select-focused]': 'nzOpen || focused', '[class.ant-select-single]': `nzMode === 'default'`, '[class.ant-select-multiple]': `nzMode !== 'default'`, '[class.ant-select-rtl]': `dir === 'rtl'` }, imports: [ NzSelectTopControlComponent, CdkOverlayOrigin, NzNoAnimationDirective, NzSelectArrowComponent, NzFormPatchModule, NzSelectClearComponent, CdkConnectedOverlay, NzOverlayModule, NzOptionContainerComponent, NgStyle ], standalone: true }] }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.NzDestroyService }, { type: i2.NzConfigService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i3.Platform }, { type: i4.FocusMonitor }, { type: i5.Directionality }], propDecorators: { nzId: [{ type: Input }], nzSize: [{ type: Input }], nzStatus: [{ type: Input }], nzOptionHeightPx: [{ type: Input }], nzOptionOverflowSize: [{ type: Input }], nzDropdownClassName: [{ type: Input }], nzDropdownMatchSelectWidth: [{ type: Input }], nzDropdownStyle: [{ type: Input }], nzNotFoundContent: [{ type: Input }], nzPlaceHolder: [{ type: Input }], nzPlacement: [{ type: Input }], nzMaxTagCount: [{ type: Input }], nzDropdownRender: [{ type: Input }], nzCustomTemplate: [{ type: Input }], nzSuffixIcon: [{ type: Input }], nzClearIcon: [{ type: Input }], nzRemoveIcon: [{ type: Input }], nzMenuItemSelectedIcon: [{ type: Input }], nzTokenSeparators: [{ type: Input }], nzMaxTagPlaceholder: [{ type: Input }], nzMaxMultipleCount: [{ type: Input }], nzMode: [{ type: Input }], nzFilterOption: [{ type: Input }], compareWith: [{ type: Input }], nzAllowClear: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzBorderless: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzShowSearch: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzLoading: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzAutoFocus: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzAutoClearSearchValue: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzServerSearch: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzDisabled: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzOpen: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzSelectOnTab: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzBackdrop: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzOptions: [{ type: Input }], nzShowArrow: [{ type: Input, args: [{ transform: booleanAttribute }] }], nzOnSearch: [{ type: Output }], nzScrollToBottom: [{ type: Output }], nzOpenChange: [{ type: Output }], nzBlur: [{ type: Output }], nzFocus: [{ type: Output }], originElement: [{ type: ViewChild, args: [CdkOverlayOrigin, { static: true, read: ElementRef }] }], cdkConnectedOverlay: [{ type: ViewChild, args: [CdkConnectedOverlay, { static: true }] }], nzSelectTopControlComponent: [{ type: ViewChild, args: [NzSelectTopControlComponent, { static: true }] }], listOfNzOptionComponent: [{ type: ContentChildren, args: [NzOptionComponent, { descendants: true }] }], listOfNzOptionGroupComponent: [{ type: ContentChildren, args: [NzOptionGroupComponent, { descendants: true }] }], nzOptionGroupComponentElement: [{ type: ViewChild, args: [NzOptionGroupComponent, { static: true, read: ElementRef }] }], nzSelectTopControlComponentElement: [{ type: ViewChild, args: [NzSelectTopControlComponent, { static: true, read: ElementRef }] }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2VsZWN0L3NlbGVjdC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQU9BLE9BQU8sRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsR0FBRyxFQUFFLFFBQVEsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ3hGLE9BQU8sRUFDTCxtQkFBbUIsRUFDbkIsZ0JBQWdCLEVBR2pCLE1BQU0sc0JBQXNCLENBQUM7QUFDOUIsT0FBTyxFQUFZLGVBQWUsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMxQyxPQUFPLEVBRUwsdUJBQXVCLEVBRXZCLFNBQVMsRUFDVCxlQUFlLEVBQ2YsVUFBVSxFQUNWLFlBQVksRUFDWixLQUFLLEVBS0wsTUFBTSxFQUlOLFdBQVcsRUFDWCxTQUFTLEVBQ1QsaUJBQWlCLEVBQ2pCLGdCQUFnQixFQUNoQixVQUFVLEVBQ1YsTUFBTSxFQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBd0IsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUN6RSxPQUFPLEVBQUUsZUFBZSxFQUFFLGFBQWEsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLEVBQUUsSUFBSSxZQUFZLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDNUYsT0FBTyxFQUFFLG9CQUFvQixFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxjQUFjLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUU1RyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDM0QsT0FBTyxFQUFnQyxVQUFVLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNyRixPQUFPLEVBQUUscUJBQXFCLEVBQUUsaUJBQWlCLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN4RyxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUN6RSxPQUFPLEVBQUUsZUFBZSxFQUFFLFlBQVksRUFBaUIsZ0JBQWdCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUM1RyxPQUFPLEVBQUUsMkJBQTJCLEVBQUUsWUFBWSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDeEYsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFTL0QsT0FBTyxFQUFFLG1CQUFtQixFQUFFLFFBQVEsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBRXhFLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQzFFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDOzs7Ozs7Ozs7QUFTN0UsTUFBTSxtQkFBbUIsR0FBdUIsQ0FBQyxXQUFtQixFQUFFLElBQTJCLEVBQVcsRUFBRTtJQUM1RyxJQUFJLElBQUksSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDekIsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsRUFBRSxDQUFDLFdBQVcsRUFBRSxDQUFDLE9BQU8sQ0FBQyxXQUFXLENBQUMsV0FBVyxFQUFFLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQztJQUN2RixDQUFDO1NBQU0sQ0FBQztRQUNOLE9BQU8sS0FBSyxDQUFDO0lBQ2YsQ0FBQztBQUNILENBQUMsQ0FBQztBQUVGLE1BQU0scUJB