ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
1,286 lines (1,278 loc) • 61.2 kB
JavaScript
import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, EventEmitter, ElementRef, Output, ViewChild, Optional, TemplateRef, Renderer2, Host, forwardRef, ChangeDetectorRef, ContentChildren, NgModule } from '@angular/core';
import { Subject, BehaviorSubject, combineLatest, merge } from 'rxjs';
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
import { __decorate, __metadata } from 'tslib';
import { InputBoolean, isNotNil } from 'ng-zorro-antd/core/util';
import { startWith, takeUntil, switchMap } from 'rxjs/operators';
import { FocusMonitor, A11yModule } from '@angular/cdk/a11y';
import { Directionality, BidiModule } from '@angular/cdk/bidi';
import { BACKSPACE, ESCAPE, TAB, SPACE, ENTER, DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
import { Platform, PlatformModule } from '@angular/cdk/platform';
import { COMPOSITION_BUFFER_MODE, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { slideMotion } from 'ng-zorro-antd/core/animation';
import { NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
import { NzNoAnimationDirective, NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
import { reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
import { CommonModule } from '@angular/common';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
import { NzOverlayModule } from 'ng-zorro-antd/core/overlay';
import { ɵNzTransitionPatchModule } from 'ng-zorro-antd/core/transition-patch';
import { NzEmptyModule } from 'ng-zorro-antd/empty';
import { NzI18nModule } from 'ng-zorro-antd/i18n';
import { NzIconModule } from 'ng-zorro-antd/icon';
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
class NzOptionGroupComponent {
constructor() {
this.nzLabel = null;
this.changes = new Subject();
}
ngOnChanges() {
this.changes.next();
}
}
NzOptionGroupComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-option-group',
exportAs: 'nzOptionGroup',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: ` <ng-content></ng-content> `
},] }
];
NzOptionGroupComponent.propDecorators = {
nzLabel: [{ type: Input }]
};
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
class NzOptionContainerComponent {
constructor(elementRef) {
this.elementRef = elementRef;
this.notFoundContent = undefined;
this.menuItemSelectedIcon = null;
this.dropdownRender = null;
this.activatedValue = null;
this.listOfSelectedValue = [];
this.mode = 'default';
this.matchWidth = true;
this.itemSize = 32;
this.maxItemLength = 8;
this.listOfContainerItem = [];
this.itemClick = new EventEmitter();
this.scrollToBottom = new EventEmitter();
this.scrolledIndex = 0;
// TODO: move to host after View Engine deprecation
this.elementRef.nativeElement.classList.add('ant-select-dropdown');
}
onItemClick(value) {
this.itemClick.emit(value);
}
onItemHover(value) {
// TODO: keydown.enter won't activate this value
this.activatedValue = value;
}
trackValue(_index, option) {
return option.key;
}
onScrolledIndexChange(index) {
this.scrolledIndex = index;
if (index === this.listOfContainerItem.length - this.maxItemLength) {
this.scrollToBottom.emit();
}
}
scrollToActivatedValue() {
const index = this.listOfContainerItem.findIndex(item => this.compareWith(item.key, this.activatedValue));
if (index < this.scrolledIndex || index >= this.scrolledIndex + this.maxItemLength) {
this.cdkVirtualScrollViewport.scrollToIndex(index || 0);
}
}
ngOnChanges(changes) {
const { listOfContainerItem, activatedValue } = changes;
if (listOfContainerItem || activatedValue) {
this.scrollToActivatedValue();
}
}
ngAfterViewInit() {
setTimeout(() => this.scrollToActivatedValue());
}
}
NzOptionContainerComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-option-container',
exportAs: 'nzOptionContainer',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
template: `
<div>
<div *ngIf="listOfContainerItem.length === 0" class="ant-select-item-empty">
<nz-embed-empty nzComponentName="select" [specificContent]="notFoundContent!"></nz-embed-empty>
</div>
<cdk-virtual-scroll-viewport
[class.full-width]="!matchWidth"
[itemSize]="itemSize"
[maxBufferPx]="itemSize * maxItemLength"
[minBufferPx]="itemSize * maxItemLength"
(scrolledIndexChange)="onScrolledIndexChange($event)"
[style.height.px]="listOfContainerItem.length * itemSize"
[style.max-height.px]="itemSize * maxItemLength"
>
<ng-template
cdkVirtualFor
[cdkVirtualForOf]="listOfContainerItem"
[cdkVirtualForTrackBy]="trackValue"
[cdkVirtualForTemplateCacheSize]="0"
let-item
>
<ng-container [ngSwitch]="item.type">
<nz-option-item-group *ngSwitchCase="'group'" [nzLabel]="item.groupLabel"></nz-option-item-group>
<nz-option-item
*ngSwitchCase="'item'"
[icon]="menuItemSelectedIcon"
[customContent]="item.nzCustomContent"
[template]="item.template"
[grouped]="!!item.groupLabel"
[disabled]="item.nzDisabled"
[showState]="mode === 'tags' || mode === 'multiple'"
[label]="item.nzLabel"
[compareWith]="compareWith"
[activatedValue]="activatedValue"
[listOfSelectedValue]="listOfSelectedValue"
[value]="item.nzValue"
(itemHover)="onItemHover($event)"
(itemClick)="onItemClick($event)"
></nz-option-item>
</ng-container>
</ng-template>
</cdk-virtual-scroll-viewport>
<ng-template [ngTemplateOutlet]="dropdownRender"></ng-template>
</div>
`
},] }
];
NzOptionContainerComponent.ctorParameters = () => [
{ type: ElementRef }
];
NzOptionContainerComponent.propDecorators = {
notFoundContent: [{ type: Input }],
menuItemSelectedIcon: [{ type: Input }],
dropdownRender: [{ type: Input }],
activatedValue: [{ type: Input }],
listOfSelectedValue: [{ type: Input }],
compareWith: [{ type: Input }],
mode: [{ type: Input }],
matchWidth: [{ type: Input }],
itemSize: [{ type: Input }],
maxItemLength: [{ type: Input }],
listOfContainerItem: [{ type: Input }],
itemClick: [{ type: Output }],
scrollToBottom: [{ type: Output }],
cdkVirtualScrollViewport: [{ type: ViewChild, args: [CdkVirtualScrollViewport, { static: true },] }]
};
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
class NzOptionComponent {
constructor(nzOptionGroupComponent) {
this.nzOptionGroupComponent = nzOptionGroupComponent;
this.destroy$ = new Subject();
this.changes = new Subject();
this.groupLabel = null;
this.nzLabel = null;
this.nzValue = null;
this.nzDisabled = false;
this.nzHide = false;
this.nzCustomContent = false;
}
ngOnInit() {
if (this.nzOptionGroupComponent) {
this.nzOptionGroupComponent.changes.pipe(startWith(true), takeUntil(this.destroy$)).subscribe(() => {
this.groupLabel = this.nzOptionGroupComponent.nzLabel;
});
}
}
ngOnChanges() {
this.changes.next();
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}
NzOptionComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-option',
exportAs: 'nzOption',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ng-template>
<ng-content></ng-content>
</ng-template>
`
},] }
];
NzOptionComponent.ctorParameters = () => [
{ type: NzOptionGroupComponent, decorators: [{ type: Optional }] }
];
NzOptionComponent.propDecorators = {
template: [{ type: ViewChild, args: [TemplateRef, { static: true },] }],
nzLabel: [{ type: Input }],
nzValue: [{ type: Input }],
nzDisabled: [{ type: Input }],
nzHide: [{ type: Input }],
nzCustomContent: [{ type: Input }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzOptionComponent.prototype, "nzDisabled", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzOptionComponent.prototype, "nzHide", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzOptionComponent.prototype, "nzCustomContent", void 0);
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
class NzSelectSearchComponent {
constructor(elementRef, renderer, focusMonitor) {
this.elementRef = elementRef;
this.renderer = renderer;
this.focusMonitor = focusMonitor;
this.nzId = null;
this.disabled = false;
this.mirrorSync = false;
this.showInput = true;
this.focusTrigger = false;
this.value = '';
this.autofocus = false;
this.valueChange = new EventEmitter();
this.isComposingChange = new EventEmitter();
// TODO: move to host after View Engine deprecation
this.elementRef.nativeElement.classList.add('ant-select-selection-search');
}
setCompositionState(isComposing) {
this.isComposingChange.next(isComposing);
}
onValueChange(value) {
this.value = value;
this.valueChange.next(value);
if (this.mirrorSync) {
this.syncMirrorWidth();
}
}
clearInputValue() {
const inputDOM = this.inputElement.nativeElement;
inputDOM.value = '';
this.onValueChange('');
}
syncMirrorWidth() {
const mirrorDOM = this.mirrorElement.nativeElement;
const hostDOM = this.elementRef.nativeElement;
const inputDOM = this.inputElement.nativeElement;
this.renderer.removeStyle(hostDOM, 'width');
mirrorDOM.innerHTML = this.renderer.createText(`${inputDOM.value} `);
this.renderer.setStyle(hostDOM, 'width', `${mirrorDOM.scrollWidth}px`);
}
focus() {
this.focusMonitor.focusVia(this.inputElement, 'keyboard');
}
blur() {
this.inputElement.nativeElement.blur();
}
ngOnChanges(changes) {
const inputDOM = this.inputElement.nativeElement;
const { focusTrigger, showInput } = changes;
if (showInput) {
if (this.showInput) {
this.renderer.removeAttribute(inputDOM, 'readonly');
}
else {
this.renderer.setAttribute(inputDOM, 'readonly', 'readonly');
}
}
// IE11 cannot input value if focused before removing readonly
if (focusTrigger && focusTrigger.currentValue === true && focusTrigger.previousValue === false) {
inputDOM.focus();
}
}
ngAfterViewInit() {
if (this.mirrorSync) {
this.syncMirrorWidth();
}
if (this.autofocus) {
this.focus();
}
}
}
NzSelectSearchComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-select-search',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<input
#inputElement
[attr.id]="nzId"
autocomplete="off"
class="ant-select-selection-search-input"
[ngModel]="value"
[attr.autofocus]="autofocus ? 'autofocus' : null"
[disabled]="disabled"
[style.opacity]="showInput ? null : 0"
(ngModelChange)="onValueChange($event)"
(compositionstart)="setCompositionState(true)"
(compositionend)="setCompositionState(false)"
/>
<span #mirrorElement *ngIf="mirrorSync" class="ant-select-selection-search-mirror"></span>
`,
providers: [{ provide: COMPOSITION_BUFFER_MODE, useValue: false }]
},] }
];
NzSelectSearchComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 },
{ type: FocusMonitor }
];
NzSelectSearchComponent.propDecorators = {
nzId: [{ type: Input }],
disabled: [{ type: Input }],
mirrorSync: [{ type: Input }],
showInput: [{ type: Input }],
focusTrigger: [{ type: Input }],
value: [{ type: Input }],
autofocus: [{ type: Input }],
valueChange: [{ type: Output }],
isComposingChange: [{ type: Output }],
inputElement: [{ type: ViewChild, args: ['inputElement', { static: true },] }],
mirrorElement: [{ type: ViewChild, args: ['mirrorElement', { static: false },] }]
};
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
class NzSelectTopControlComponent {
constructor(elementRef, noAnimation) {
this.elementRef = elementRef;
this.noAnimation = noAnimation;
this.nzId = null;
this.showSearch = false;
this.placeHolder = null;
this.open = false;
this.maxTagCount = Infinity;
this.autofocus = false;
this.disabled = false;
this.mode = 'default';
this.customTemplate = null;
this.maxTagPlaceholder = null;
this.removeIcon = null;
this.listOfTopItem = [];
this.tokenSeparators = [];
this.tokenize = new EventEmitter();
this.inputValueChange = new EventEmitter();
this.deleteItem = new EventEmitter();
this.listOfSlicedItem = [];
this.isShowPlaceholder = true;
this.isShowSingleLabel = false;
this.isComposing = false;
this.inputValue = null;
// TODO: move to host after View Engine deprecation
this.elementRef.nativeElement.classList.add('ant-select-selector');
}
onHostKeydown(e) {
const inputValue = e.target.value;
if (e.keyCode === BACKSPACE && this.mode !== 'default' && !inputValue && this.listOfTopItem.length > 0) {
e.preventDefault();
this.onDeleteItem(this.listOfTopItem[this.listOfTopItem.length - 1]);
}
}
updateTemplateVariable() {
const isSelectedValueEmpty = this.listOfTopItem.length === 0;
this.isShowPlaceholder = isSelectedValueEmpty && !this.isComposing && !this.inputValue;
this.isShowSingleLabel = !isSelectedValueEmpty && !this.isComposing && !this.inputValue;
}
isComposingChange(isComposing) {
this.isComposing = isComposing;
this.updateTemplateVariable();
}
onInputValueChange(value) {
if (value !== this.inputValue) {
this.inputValue = value;
this.updateTemplateVariable();
this.inputValueChange.emit(value);
this.tokenSeparate(value, this.tokenSeparators);
}
}
tokenSeparate(inputValue, tokenSeparators) {
const includesSeparators = (str, separators) => {
// tslint:disable-next-line:prefer-for-of
for (let i = 0; i < separators.length; ++i) {
if (str.lastIndexOf(separators[i]) > 0) {
return true;
}
}
return false;
};
const splitBySeparators = (str, separators) => {
const reg = new RegExp(`[${separators.join()}]`);
const array = str.split(reg).filter(token => token);
return [...new Set(array)];
};
if (inputValue &&
inputValue.length &&
tokenSeparators.length &&
this.mode !== 'default' &&
includesSeparators(inputValue, tokenSeparators)) {
const listOfLabel = splitBySeparators(inputValue, tokenSeparators);
this.tokenize.next(listOfLabel);
}
}
clearInputValue() {
if (this.nzSelectSearchComponent) {
this.nzSelectSearchComponent.clearInputValue();
}
}
focus() {
if (this.nzSelectSearchComponent) {
this.nzSelectSearchComponent.focus();
}
}
blur() {
if (this.nzSelectSearchComponent) {
this.nzSelectSearchComponent.blur();
}
}
trackValue(_index, option) {
return option.nzValue;
}
onDeleteItem(item) {
if (!this.disabled && !item.nzDisabled) {
this.deleteItem.next(item);
}
}
ngOnChanges(changes) {
const { listOfTopItem, maxTagCount, customTemplate, maxTagPlaceholder } = changes;
if (listOfTopItem) {
this.updateTemplateVariable();
}
if (listOfTopItem || maxTagCount || customTemplate || maxTagPlaceholder) {
const listOfSlicedItem = this.listOfTopItem.slice(0, this.maxTagCount).map(o => {
return {
nzLabel: o.nzLabel,
nzValue: o.nzValue,
nzDisabled: o.nzDisabled,
contentTemplateOutlet: this.customTemplate,
contentTemplateOutletContext: o
};
});
if (this.listOfTopItem.length > this.maxTagCount) {
const exceededLabel = `+ ${this.listOfTopItem.length - this.maxTagCount} ...`;
const listOfSelectedValue = this.listOfTopItem.map(item => item.nzValue);
const exceededItem = {
nzLabel: exceededLabel,
nzValue: '$$__nz_exceeded_item',
nzDisabled: true,
contentTemplateOutlet: this.maxTagPlaceholder,
contentTemplateOutletContext: listOfSelectedValue.slice(this.maxTagCount)
};
listOfSlicedItem.push(exceededItem);
}
this.listOfSlicedItem = listOfSlicedItem;
}
}
}
NzSelectTopControlComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-select-top-control',
exportAs: 'nzSelectTopControl',
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: `
<!--single mode-->
<ng-container [ngSwitch]="mode">
<ng-container *ngSwitchCase="'default'">
<nz-select-search
[nzId]="nzId"
[disabled]="disabled"
[value]="inputValue!"
[showInput]="showSearch"
[mirrorSync]="false"
[autofocus]="autofocus"
[focusTrigger]="open"
(isComposingChange)="isComposingChange($event)"
(valueChange)="onInputValueChange($event)"
></nz-select-search>
<nz-select-item
*ngIf="isShowSingleLabel"
[deletable]="false"
[disabled]="false"
[removeIcon]="removeIcon"
[label]="listOfTopItem[0].nzLabel"
[contentTemplateOutlet]="customTemplate"
[contentTemplateOutletContext]="listOfTopItem[0]"
></nz-select-item>
</ng-container>
<ng-container *ngSwitchDefault>
<!--multiple or tags mode-->
<nz-select-item
*ngFor="let item of listOfSlicedItem; trackBy: trackValue"
[removeIcon]="removeIcon"
[label]="item.nzLabel"
[disabled]="item.nzDisabled || disabled"
[contentTemplateOutlet]="item.contentTemplateOutlet"
[deletable]="true"
[contentTemplateOutletContext]="item.contentTemplateOutletContext"
(delete)="onDeleteItem(item.contentTemplateOutletContext)"
></nz-select-item>
<nz-select-search
[nzId]="nzId"
[disabled]="disabled"
[value]="inputValue!"
[autofocus]="autofocus"
[showInput]="true"
[mirrorSync]="true"
[focusTrigger]="open"
(isComposingChange)="isComposingChange($event)"
(valueChange)="onInputValueChange($event)"
></nz-select-search>
</ng-container>
</ng-container>
<nz-select-placeholder *ngIf="isShowPlaceholder" [placeholder]="placeHolder"></nz-select-placeholder>
`,
host: {
'(keydown)': 'onHostKeydown($event)'
}
},] }
];
NzSelectTopControlComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: NzNoAnimationDirective, decorators: [{ type: Host }, { type: Optional }] }
];
NzSelectTopControlComponent.propDecorators = {
nzId: [{ type: Input }],
showSearch: [{ type: Input }],
placeHolder: [{ type: Input }],
open: [{ type: Input }],
maxTagCount: [{ type: Input }],
autofocus: [{ type: Input }],
disabled: [{ type: Input }],
mode: [{ type: Input }],
customTemplate: [{ type: Input }],
maxTagPlaceholder: [{ type: Input }],
removeIcon: [{ type: Input }],
listOfTopItem: [{ type: Input }],
tokenSeparators: [{ type: Input }],
tokenize: [{ type: Output }],
inputValueChange: [{ type: Output }],
deleteItem: [{ type: Output }],
nzSelectSearchComponent: [{ type: ViewChild, args: [NzSelectSearchComponent,] }]
};
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
const defaultFilterOption = (searchValue, item) => {
if (item && item.nzLabel) {
return item.nzLabel.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
}
else {
return false;
}
};
const ɵ0 = defaultFilterOption;
const NZ_CONFIG_MODULE_NAME = 'select';
class NzSelectComponent {
constructor(nzConfigService, cdr, elementRef, platform, focusMonitor, directionality, noAnimation) {
this.nzConfigService = nzConfigService;
this.cdr = cdr;
this.elementRef = elementRef;
this.platform = platform;
this.focusMonitor = focusMonitor;
this.directionality = directionality;
this.noAnimation = noAnimation;
this._nzModuleName = NZ_CONFIG_MODULE_NAME;
this.nzId = null;
this.nzSize = 'default';
this.nzOptionHeightPx = 32;
this.nzOptionOverflowSize = 8;
this.nzDropdownClassName = null;
this.nzDropdownMatchSelectWidth = true;
this.nzDropdownStyle = null;
this.nzNotFoundContent = undefined;
this.nzPlaceHolder = 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.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.destroy$ = new Subject();
this.onChange = () => { };
this.onTouched = () => { };
this.dropDownPosition = 'bottom';
this.triggerWidth = null;
this.listOfContainerItem = [];
this.listOfTopItem = [];
this.activatedValue = null;
this.listOfValue = [];
this.focused = false;
this.dir = 'ltr';
// TODO: move to host after View Engine deprecation
this.elementRef.nativeElement.classList.add('ant-select');
}
set nzShowArrow(value) {
this._nzShowArrow = value;
}
get nzShowArrow() {
return this._nzShowArrow === undefined ? this.nzMode === 'default' : this._nzShowArrow;
}
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();
}
onHostClick() {
if ((this.nzOpen && this.nzShowSearch) || this.nzDisabled) {
return;
}
this.setOpenState(!this.nzOpen);
}
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 => 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);
}
}
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();
}
onOverlayKeyDown(e) {
if (e.keyCode === ESCAPE) {
this.setOpenState(false);
}
}
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) {
const preIndex = activatedIndex > 0 ? activatedIndex - 1 : listOfFilteredOptionNotDisabled.length - 1;
this.activatedValue = listOfFilteredOptionNotDisabled[preIndex].nzValue;
}
break;
case DOWN_ARROW:
e.preventDefault();
if (this.nzOpen) {
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)) {
this.onItemClick(this.activatedValue);
}
}
else {
this.setOpenState(true);
}
break;
case SPACE:
if (!this.nzOpen) {
this.setOpenState(true);
e.preventDefault();
}
break;
case TAB:
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();
this.clearInput();
}
onInputValueChange(value) {
this.searchValue = value;
this.updateListOfContainerItem();
this.nzOnSearch.emit(value);
this.updateCdkConnectedOverlayPositions();
}
onClearSelection() {
this.updateListOfValue([]);
}
onClickOutside(event) {
if (!this.elementRef.nativeElement.contains(event.target)) {
this.setOpenState(false);
}
}
focus() {
this.nzSelectTopControlComponent.focus();
}
blur() {
this.nzSelectTopControlComponent.blur();
}
onPositionChange(position) {
this.dropDownPosition = position.connectionPair.originY;
}
updateCdkConnectedOverlayStatus() {
if (this.platform.isBrowser && this.originElement.nativeElement) {
reqAnimFrame(() => {
this.triggerWidth = this.originElement.nativeElement.getBoundingClientRect().width;
this.cdr.markForCheck();
});
}
}
updateCdkConnectedOverlayPositions() {
reqAnimFrame(() => {
var _a, _b;
(_b = (_a = this.cdkConnectedOverlay) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.updatePosition();
});
}
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 = disabled;
if (disabled) {
this.setOpenState(false);
}
this.cdr.markForCheck();
}
ngOnChanges(changes) {
const { nzOpen, nzDisabled, nzOptions } = 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,
nzLabel: typeof item.label === 'string' ? 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.value
};
});
this.listOfTemplateItem$.next(listOfTransformedItem);
}
}
ngOnInit() {
var _a;
this.focusMonitor
.monitor(this.elementRef, 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();
});
(_a = this.directionality.change) === null || _a === void 0 ? void 0 : _a.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
this.dir = direction;
this.cdr.detectChanges();
});
this.dir = this.directionality.value;
}
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, nzDisabled, nzHide, nzCustomContent, groupLabel } = item;
return { template, nzLabel, nzValue, nzDisabled, nzHide, nzCustomContent, groupLabel, type: 'item', key: nzValue };
});
this.listOfTemplateItem$.next(listOfOptionInterface);
this.cdr.markForCheck();
});
}
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}
NzSelectComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-select',
exportAs: 'nzSelect',
preserveWhitespaces: false,
providers: [
{
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>
<nz-select-arrow
*ngIf="nzShowArrow"
[loading]="nzLoading"
[search]="nzOpen && nzShowSearch"
[suffixIcon]="nzSuffixIcon"
></nz-select-arrow>
<nz-select-clear
*ngIf="nzAllowClear && !nzDisabled && listOfValue.length"
[clearIcon]="nzClearIcon"
(clear)="onClearSelection()"
></nz-select-clear>
<ng-template
cdkConnectedOverlay
nzConnectedOverlay
[cdkConnectedOverlayMinWidth]="$any(nzDropdownMatchSelectWidth ? null : triggerWidth)"
[cdkConnectedOverlayWidth]="$any(nzDropdownMatchSelectWidth ? triggerWidth : null)"
[cdkConnectedOverlayOrigin]="origin"
[cdkConnectedOverlayTransformOriginOn]="'.ant-select-dropdown'"
[cdkConnectedOverlayPanelClass]="nzDropdownClassName!"
[cdkConnectedOverlayOpen]="nzOpen"
(overlayKeydown)="onOverlayKeyDown($event)"
(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 === 'bottom'"
[class.ant-select-dropdown-placement-topLeft]="dropDownPosition === 'top'"
[@slideMotion]="'enter'"
[@.disabled]="noAnimation?.nzNoAnimation"
[nzNoAnimation]="noAnimation?.nzNoAnimation"
[listOfContainerItem]="listOfContainerItem"
[menuItemSelectedIcon]="nzMenuItemSelectedIcon"
[notFoundContent]="nzNotFoundContent"
[activatedValue]="activatedValue"
[listOfSelectedValue]="listOfValue"
[dropdownRender]="nzDropdownRender"
[compareWith]="compareWith"
[mode]="nzMode"
(keydown)="onKeyDown($event)"
(itemClick)="onItemClick($event)"
(scrollToBottom)="nzScrollToBottom.emit()"
></nz-option-container>
</ng-template>
`,
host: {
'[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'`,
'(click)': 'onHostClick()'
}
},] }
];
NzSelectComponent.ctorParameters = () => [
{ type: NzConfigService },
{ type: ChangeDetectorRef },
{ type: ElementRef },
{ type: Platform },
{ type: FocusMonitor },
{ type: Directionality, decorators: [{ type: Optional }] },
{ type: NzNoAnimationDirective, decorators: [{ type: Host }, { type: Optional }] }
];
NzSelectComponent.propDecorators = {
nzId: [{ type: Input }],
nzSize: [{ type: Input }],
nzOptionHeightPx: [{ type: Input }],
nzOptionOverflowSize: [{ type: Input }],
nzDropdownClassName: [{ type: Input }],
nzDropdownMatchSelectWidth: [{ type: Input }],
nzDropdownStyle: [{ type: Input }],
nzNotFoundContent: [{ type: Input }],
nzPlaceHolder: [{ 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 }],
nzBorderless: [{ type: Input }],
nzShowSearch: [{ type: Input }],
nzLoading: [{ type: Input }],
nzAutoFocus: [{ type: Input }],
nzAutoClearSearchValue: [{ type: Input }],
nzServerSearch: [{ type: Input }],
nzDisabled: [{ type: Input }],
nzOpen: [{ type: Input }],
nzOptions: [{ type: Input }],
nzShowArrow: [{ type: Input }],
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 },] }]
};
__decorate([
WithConfig(),
__metadata("design:type", Object)
], NzSelectComponent.prototype, "nzSuffixIcon", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzSelectComponent.prototype, "nzAllowClear", void 0);
__decorate([
WithConfig(),
InputBoolean(),
__metadata("design:type", Object)
], NzSelectComponent.prototype, "nzBorderless", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzSelectComponent.prototype, "nzShowSearch", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzSelectComponent.prototype, "nzLoading", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzSelectComponent.prototype, "nzAutoFocus", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzSelectComponent.prototype, "nzAutoClearSearchValue", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzSelectComponent.prototype, "nzServerSearch", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzSelectComponent.prototype, "nzDisabled", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzSelectComponent.prototype, "nzOpen", void 0);
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
class NzOptionItemGroupComponent {
constructor(elementRef) {
this.elementRef = elementRef;
this.nzLabel = null;
// TODO: move to host after View Engine deprecation
this.elementRef.nativeElement.classList.add('ant-select-item', 'ant-select-item-group');
}
}
NzOptionItemGroupComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-option-item-group',
template: `
<ng-container *nzStringTemplateOutlet="nzLabel">{{ nzLabel }}</ng-container>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
},] }
];
NzOptionItemGroupComponent.ctorParameters = () => [
{ type: ElementRef }
];
NzOptionItemGroupComponent.propDecorators = {
nzLabel: [{ type: Input }]
};
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
class NzOptionItemComponent {
constructor(elementRef) {
this.elementRef = elementRef;
this.selected = false;
this.activated = false;
this.grouped = false;
this.customContent = false;
this.template = null;
this.disabled = false;
this.showState = false;
this.label = null;
this.value = null;
this.activatedValue = null;
this.listOfSelectedValue = [];
this.icon = null;
this.itemClick = new EventEmitter();
this.itemHover = new EventEmitter();
// TODO: move to host after View Engine deprecation
this.elementRef.nativeElement.classList.add('ant-select-item', 'ant-sel