ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
1,338 lines (1,331 loc) • 72.8 kB
JavaScript
import { Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, TemplateRef, Input, ContentChildren, Pipe, Injectable, ElementRef, ChangeDetectorRef, Renderer2, EventEmitter, NgZone, ViewChildren, Output, Host, Optional, forwardRef, Directive, NgModule } from '@angular/core';
import { __decorate, __metadata } from 'tslib';
import { InputBoolean, isNotNil, isNil, zoomMotion, NzNoAnimationDirective, toBoolean, slideMotion, NzAddOnModule, NzOverlayModule, NzNoAnimationModule } from 'ng-zorro-antd/core';
import { Subject, BehaviorSubject, ReplaySubject, combineLatest, merge, fromEvent, EMPTY } from 'rxjs';
import { distinctUntilChanged, map, filter, skip, share, tap, takeUntil, startWith, flatMap } from 'rxjs/operators';
import { UP_ARROW, DOWN_ARROW, ENTER, BACKSPACE, SPACE, TAB } from '@angular/cdk/keycodes';
import { FocusMonitor } from '@angular/cdk/a11y';
import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
import { Platform, PlatformModule } from '@angular/cdk/platform';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { NzEmptyModule } from 'ng-zorro-antd/empty';
import { NzI18nModule } from 'ng-zorro-antd/i18n';
import { NzIconModule } from 'ng-zorro-antd/icon';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzOptionComponent {
constructor() {
this.changes = new Subject();
this.nzDisabled = false;
this.nzCustomContent = false;
}
/**
* @return {?}
*/
ngOnChanges() {
this.changes.next();
}
}
NzOptionComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-option',
exportAs: 'nzOption',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: "<ng-template>\n <ng-content></ng-content>\n</ng-template>"
}] }
];
NzOptionComponent.propDecorators = {
template: [{ type: ViewChild, args: [TemplateRef, { static: false },] }],
nzLabel: [{ type: Input }],
nzValue: [{ type: Input }],
nzDisabled: [{ type: Input }],
nzCustomContent: [{ type: Input }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzOptionComponent.prototype, "nzDisabled", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzOptionComponent.prototype, "nzCustomContent", void 0);
if (false) {
/** @type {?} */
NzOptionComponent.prototype.changes;
/** @type {?} */
NzOptionComponent.prototype.template;
/** @type {?} */
NzOptionComponent.prototype.nzLabel;
/** @type {?} */
NzOptionComponent.prototype.nzValue;
/** @type {?} */
NzOptionComponent.prototype.nzDisabled;
/** @type {?} */
NzOptionComponent.prototype.nzCustomContent;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzOptionGroupComponent {
constructor() {
this.isLabelString = false;
}
/**
* @param {?} value
* @return {?}
*/
set nzLabel(value) {
this.label = value;
this.isLabelString = !(this.nzLabel instanceof TemplateRef);
}
/**
* @return {?}
*/
get nzLabel() {
return this.label;
}
}
NzOptionGroupComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-option-group',
exportAs: 'nzOptionGroup',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: "<ng-content></ng-content>"
}] }
];
NzOptionGroupComponent.propDecorators = {
listOfNzOptionComponent: [{ type: ContentChildren, args: [NzOptionComponent,] }],
nzLabel: [{ type: Input }]
};
if (false) {
/** @type {?} */
NzOptionGroupComponent.prototype.isLabelString;
/** @type {?} */
NzOptionGroupComponent.prototype.label;
/** @type {?} */
NzOptionGroupComponent.prototype.listOfNzOptionComponent;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzFilterOptionPipe {
/**
* @param {?} options
* @param {?} searchValue
* @param {?} filterOption
* @param {?} serverSearch
* @return {?}
*/
transform(options, searchValue, filterOption, serverSearch) {
if (serverSearch || !searchValue) {
return options;
}
else {
return ((/** @type {?} */ (options))).filter((/**
* @param {?} o
* @return {?}
*/
o => filterOption(searchValue, o)));
}
}
}
NzFilterOptionPipe.decorators = [
{ type: Pipe, args: [{ name: 'nzFilterOption' },] }
];
class NzFilterGroupOptionPipe {
/**
* @param {?} groups
* @param {?} searchValue
* @param {?} filterOption
* @param {?} serverSearch
* @return {?}
*/
transform(groups, searchValue, filterOption, serverSearch) {
if (serverSearch || !searchValue) {
return groups;
}
else {
return ((/** @type {?} */ (groups))).filter((/**
* @param {?} g
* @return {?}
*/
g => {
return g.listOfNzOptionComponent.some((/**
* @param {?} o
* @return {?}
*/
o => filterOption(searchValue, o)));
}));
}
}
}
NzFilterGroupOptionPipe.decorators = [
{ type: Pipe, args: [{ name: 'nzFilterGroupOption' },] }
];
/**
* @param {?} searchValue
* @param {?} option
* @return {?}
*/
function defaultFilterOption(searchValue, option) {
if (option && option.nzLabel) {
return option.nzLabel.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
}
else {
return false;
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzSelectService {
constructor() {
// Input params
this.autoClearSearchValue = true;
this.serverSearch = false;
this.filterOption = defaultFilterOption;
this.mode = 'default';
this.maxMultipleCount = Infinity;
this.disabled = false;
// tslint:disable-next-line:no-any
this.compareWith = (/**
* @param {?} o1
* @param {?} o2
* @return {?}
*/
(o1, o2) => o1 === o2);
// selectedValueChanged should emit ngModelChange or not
// tslint:disable-next-line:no-any
this.listOfSelectedValueWithEmit$ = new BehaviorSubject({
value: [],
emit: false
});
// ContentChildren Change
this.mapOfTemplateOption$ = new BehaviorSubject({
listOfNzOptionComponent: [],
listOfNzOptionGroupComponent: []
});
// searchValue Change
this.searchValueRaw$ = new BehaviorSubject('');
this.listOfFilteredOption = [];
this.openRaw$ = new Subject();
this.checkRaw$ = new Subject();
this.open = false;
this.clearInput$ = new Subject();
this.searchValue = '';
this.isShowNotFound = false;
// open
this.open$ = this.openRaw$.pipe(distinctUntilChanged());
this.activatedOption$ = new ReplaySubject(1);
this.listOfSelectedValue$ = this.listOfSelectedValueWithEmit$.pipe(map((/**
* @param {?} data
* @return {?}
*/
data => data.value)));
this.modelChange$ = this.listOfSelectedValueWithEmit$.pipe(filter((/**
* @param {?} item
* @return {?}
*/
item => item.emit)), map((/**
* @param {?} data
* @return {?}
*/
data => {
/** @type {?} */
const selectedList = data.value;
/** @type {?} */
let modelValue = null;
if (this.isSingleMode) {
if (selectedList.length) {
modelValue = selectedList[0];
}
}
else {
modelValue = selectedList;
}
return modelValue;
})));
this.searchValue$ = this.searchValueRaw$.pipe(distinctUntilChanged(), skip(1), share(), tap((/**
* @param {?} value
* @return {?}
*/
value => {
this.searchValue = value;
if (value) {
this.updateActivatedOption(this.listOfFilteredOption[0]);
}
this.updateListOfFilteredOption();
})));
// tslint:disable-next-line:no-any
this.listOfSelectedValue = [];
// flat ViewChildren
this.listOfTemplateOption = [];
// tag option
this.listOfTagOption = [];
// tag option concat template option
this.listOfTagAndTemplateOption = [];
// ViewChildren
this.listOfNzOptionComponent = [];
this.listOfNzOptionGroupComponent = [];
// display in top control
this.listOfCachedSelectedOption = [];
// selected value or ViewChildren change
this.valueOrOption$ = combineLatest([this.listOfSelectedValue$, this.mapOfTemplateOption$]).pipe(tap((/**
* @param {?} data
* @return {?}
*/
data => {
const [listOfSelectedValue, mapOfTemplateOption] = data;
this.listOfSelectedValue = listOfSelectedValue;
this.listOfNzOptionComponent = mapOfTemplateOption.listOfNzOptionComponent;
this.listOfNzOptionGroupComponent = mapOfTemplateOption.listOfNzOptionGroupComponent;
this.listOfTemplateOption = this.listOfNzOptionComponent.concat(this.listOfNzOptionGroupComponent.reduce((/**
* @param {?} pre
* @param {?} cur
* @return {?}
*/
(pre, cur) => [...pre, ...cur.listOfNzOptionComponent.toArray()]), (/** @type {?} */ ([]))));
this.updateListOfTagOption();
this.updateListOfFilteredOption();
this.resetActivatedOptionIfNeeded();
this.updateListOfCachedOption();
})), share());
this.check$ = merge(this.checkRaw$, this.valueOrOption$, this.searchValue$, this.activatedOption$, this.open$, this.modelChange$).pipe(share());
}
/**
* @param {?} option
* @return {?}
*/
clickOption(option) {
/** update listOfSelectedOption -> update listOfSelectedValue -> next listOfSelectedValue$ **/
if (!option.nzDisabled) {
this.updateActivatedOption(option);
/** @type {?} */
let listOfSelectedValue = [...this.listOfSelectedValue];
if (this.isMultipleOrTags) {
/** @type {?} */
const targetValue = listOfSelectedValue.find((/**
* @param {?} o
* @return {?}
*/
o => this.compareWith(o, option.nzValue)));
if (isNotNil(targetValue)) {
listOfSelectedValue.splice(listOfSelectedValue.indexOf(targetValue), 1);
this.updateListOfSelectedValue(listOfSelectedValue, true);
}
else if (listOfSelectedValue.length < this.maxMultipleCount) {
listOfSelectedValue.push(option.nzValue);
this.updateListOfSelectedValue(listOfSelectedValue, true);
}
}
else if (!this.compareWith(listOfSelectedValue[0], option.nzValue)) {
listOfSelectedValue = [option.nzValue];
this.updateListOfSelectedValue(listOfSelectedValue, true);
}
if (this.isSingleMode) {
this.setOpenState(false);
}
else if (this.autoClearSearchValue) {
this.clearInput();
}
}
}
/**
* @return {?}
*/
updateListOfCachedOption() {
if (this.isSingleMode) {
/** @type {?} */
const selectedOption = this.listOfTemplateOption.find((/**
* @param {?} o
* @return {?}
*/
o => this.compareWith(o.nzValue, this.listOfSelectedValue[0])));
if (!isNil(selectedOption)) {
this.listOfCachedSelectedOption = [selectedOption];
}
}
else {
/** @type {?} */
const listOfCachedSelectedOption = [];
this.listOfSelectedValue.forEach((/**
* @param {?} v
* @return {?}
*/
v => {
/** @type {?} */
const listOfMixedOption = [...this.listOfTagAndTemplateOption, ...this.listOfCachedSelectedOption];
/** @type {?} */
const option = listOfMixedOption.find((/**
* @param {?} o
* @return {?}
*/
o => this.compareWith(o.nzValue, v)));
if (option) {
listOfCachedSelectedOption.push(option);
}
}));
this.listOfCachedSelectedOption = listOfCachedSelectedOption;
}
}
/**
* @return {?}
*/
updateListOfTagOption() {
if (this.isTagsMode) {
/** @type {?} */
const listOfMissValue = this.listOfSelectedValue.filter((/**
* @param {?} value
* @return {?}
*/
value => !this.listOfTemplateOption.find((/**
* @param {?} o
* @return {?}
*/
o => this.compareWith(o.nzValue, value)))));
this.listOfTagOption = listOfMissValue.map((/**
* @param {?} value
* @return {?}
*/
value => {
/** @type {?} */
const cachedOption = this.listOfCachedSelectedOption.find((/**
* @param {?} o
* @return {?}
*/
o => this.compareWith(o.nzValue, value)));
if (cachedOption) {
return cachedOption;
}
else {
/** @type {?} */
const nzOptionComponent = new NzOptionComponent();
nzOptionComponent.nzValue = value;
nzOptionComponent.nzLabel = value;
return nzOptionComponent;
}
}));
this.listOfTagAndTemplateOption = [...this.listOfTemplateOption.concat(this.listOfTagOption)];
}
else {
this.listOfTagAndTemplateOption = [...this.listOfTemplateOption];
}
}
/**
* @return {?}
*/
updateAddTagOption() {
/** @type {?} */
const isMatch = this.listOfTagAndTemplateOption.find((/**
* @param {?} item
* @return {?}
*/
item => item.nzLabel === this.searchValue));
if (this.isTagsMode && this.searchValue && !isMatch) {
/** @type {?} */
const option = new NzOptionComponent();
option.nzValue = this.searchValue;
option.nzLabel = this.searchValue;
this.addedTagOption = option;
this.updateActivatedOption(option);
}
else {
this.addedTagOption = null;
}
}
/**
* @return {?}
*/
updateListOfFilteredOption() {
this.updateAddTagOption();
/** @type {?} */
const listOfFilteredOption = new NzFilterOptionPipe().transform(this.listOfTagAndTemplateOption, this.searchValue, this.filterOption, this.serverSearch);
this.listOfFilteredOption = this.addedTagOption
? [this.addedTagOption, ...listOfFilteredOption]
: [...listOfFilteredOption];
this.isShowNotFound = !this.isTagsMode && !this.listOfFilteredOption.length;
}
/**
* @return {?}
*/
clearInput() {
this.clearInput$.next();
}
// tslint:disable-next-line:no-any
/**
* @param {?} value
* @param {?} emit
* @return {?}
*/
updateListOfSelectedValue(value, emit) {
this.listOfSelectedValueWithEmit$.next({ value, emit });
}
/**
* @param {?} option
* @return {?}
*/
updateActivatedOption(option) {
this.activatedOption$.next(option);
this.activatedOption = option;
}
/**
* @param {?} inputValue
* @param {?} tokenSeparators
* @return {?}
*/
tokenSeparate(inputValue, tokenSeparators) {
// auto tokenSeparators
if (inputValue &&
inputValue.length &&
tokenSeparators.length &&
this.isMultipleOrTags &&
this.includesSeparators(inputValue, tokenSeparators)) {
/** @type {?} */
const listOfLabel = this.splitBySeparators(inputValue, tokenSeparators);
this.updateSelectedValueByLabelList(listOfLabel);
this.clearInput();
}
}
/**
* @param {?} str
* @param {?} separators
* @return {?}
*/
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;
}
/**
* @param {?} str
* @param {?} separators
* @return {?}
*/
splitBySeparators(str, separators) {
/** @type {?} */
const reg = new RegExp(`[${separators.join()}]`);
/** @type {?} */
const array = ((/** @type {?} */ (str))).split(reg).filter((/**
* @param {?} token
* @return {?}
*/
token => token));
return Array.from(new Set(array));
}
/**
* @return {?}
*/
resetActivatedOptionIfNeeded() {
/** @type {?} */
const resetActivatedOption = (/**
* @return {?}
*/
() => {
/** @type {?} */
const activatedOption = this.listOfFilteredOption.find((/**
* @param {?} item
* @return {?}
*/
item => this.compareWith(item.nzValue, this.listOfSelectedValue[0])));
this.updateActivatedOption(activatedOption || null);
});
if (this.activatedOption) {
if (!this.listOfFilteredOption.find((/**
* @param {?} item
* @return {?}
*/
item => this.compareWith(item.nzValue, (/** @type {?} */ (this.activatedOption)).nzValue))) ||
!this.listOfSelectedValue.find((/**
* @param {?} item
* @return {?}
*/
item => this.compareWith(item, (/** @type {?} */ (this.activatedOption)).nzValue)))) {
resetActivatedOption();
}
}
else {
resetActivatedOption();
}
}
/**
* @param {?} listOfNzOptionComponent
* @param {?} listOfNzOptionGroupComponent
* @return {?}
*/
updateTemplateOption(listOfNzOptionComponent, listOfNzOptionGroupComponent) {
this.mapOfTemplateOption$.next({ listOfNzOptionComponent, listOfNzOptionGroupComponent });
}
/**
* @param {?} value
* @return {?}
*/
updateSearchValue(value) {
this.searchValueRaw$.next(value);
}
/**
* @param {?} listOfLabel
* @return {?}
*/
updateSelectedValueByLabelList(listOfLabel) {
/** @type {?} */
const listOfSelectedValue = [...this.listOfSelectedValue];
/** @type {?} */
const listOfMatchOptionValue = this.listOfTagAndTemplateOption
.filter((/**
* @param {?} item
* @return {?}
*/
item => listOfLabel.indexOf(item.nzLabel) !== -1))
.map((/**
* @param {?} item
* @return {?}
*/
item => item.nzValue))
.filter((/**
* @param {?} item
* @return {?}
*/
item => !isNotNil(this.listOfSelectedValue.find((/**
* @param {?} v
* @return {?}
*/
v => this.compareWith(v, item))))));
if (this.isMultipleMode) {
this.updateListOfSelectedValue([...listOfSelectedValue, ...listOfMatchOptionValue], true);
}
else {
/** @type {?} */
const listOfUnMatchOptionValue = listOfLabel.filter((/**
* @param {?} label
* @return {?}
*/
label => this.listOfTagAndTemplateOption.map((/**
* @param {?} item
* @return {?}
*/
item => item.nzLabel)).indexOf(label) === -1));
this.updateListOfSelectedValue([...listOfSelectedValue, ...listOfMatchOptionValue, ...listOfUnMatchOptionValue], true);
}
}
/**
* @param {?} e
* @return {?}
*/
onKeyDown(e) {
if (this.disabled) {
return;
}
/** @type {?} */
const keyCode = e.keyCode;
/** @type {?} */
const eventTarget = (/** @type {?} */ (e.target));
/** @type {?} */
const listOfFilteredOptionWithoutDisabled = this.listOfFilteredOption.filter((/**
* @param {?} item
* @return {?}
*/
item => !item.nzDisabled));
/** @type {?} */
const activatedIndex = listOfFilteredOptionWithoutDisabled.findIndex((/**
* @param {?} item
* @return {?}
*/
item => item === this.activatedOption));
switch (keyCode) {
case UP_ARROW:
e.preventDefault();
/** @type {?} */
const preIndex = activatedIndex > 0 ? activatedIndex - 1 : listOfFilteredOptionWithoutDisabled.length - 1;
this.updateActivatedOption(listOfFilteredOptionWithoutDisabled[preIndex]);
break;
case DOWN_ARROW:
e.preventDefault();
/** @type {?} */
const nextIndex = activatedIndex < listOfFilteredOptionWithoutDisabled.length - 1 ? activatedIndex + 1 : 0;
this.updateActivatedOption(listOfFilteredOptionWithoutDisabled[nextIndex]);
if (!this.disabled && !this.open) {
this.setOpenState(true);
}
break;
case ENTER:
e.preventDefault();
if (this.open) {
if (this.activatedOption && !this.activatedOption.nzDisabled) {
this.clickOption(this.activatedOption);
}
}
else {
this.setOpenState(true);
}
break;
case BACKSPACE:
if (this.isMultipleOrTags && !eventTarget.value && this.listOfCachedSelectedOption.length) {
e.preventDefault();
this.removeValueFormSelected(this.listOfCachedSelectedOption[this.listOfCachedSelectedOption.length - 1]);
}
break;
case SPACE:
if (!this.disabled && !this.open) {
this.setOpenState(true);
e.preventDefault();
}
break;
case TAB:
this.setOpenState(false);
break;
}
}
// tslint:disable-next-line:no-any
/**
* @param {?} option
* @return {?}
*/
removeValueFormSelected(option) {
if (this.disabled || option.nzDisabled) {
return;
}
/** @type {?} */
const listOfSelectedValue = this.listOfSelectedValue.filter((/**
* @param {?} item
* @return {?}
*/
item => !this.compareWith(item, option.nzValue)));
this.updateListOfSelectedValue(listOfSelectedValue, true);
this.clearInput();
}
/**
* @param {?} value
* @return {?}
*/
setOpenState(value) {
this.openRaw$.next(value);
this.open = value;
}
/**
* @return {?}
*/
check() {
this.checkRaw$.next();
}
/**
* @return {?}
*/
get isSingleMode() {
return this.mode === 'default';
}
/**
* @return {?}
*/
get isTagsMode() {
return this.mode === 'tags';
}
/**
* @return {?}
*/
get isMultipleMode() {
return this.mode === 'multiple';
}
/**
* @return {?}
*/
get isMultipleOrTags() {
return this.mode === 'tags' || this.mode === 'multiple';
}
}
NzSelectService.decorators = [
{ type: Injectable }
];
if (false) {
/** @type {?} */
NzSelectService.prototype.autoClearSearchValue;
/** @type {?} */
NzSelectService.prototype.serverSearch;
/** @type {?} */
NzSelectService.prototype.filterOption;
/** @type {?} */
NzSelectService.prototype.mode;
/** @type {?} */
NzSelectService.prototype.maxMultipleCount;
/** @type {?} */
NzSelectService.prototype.disabled;
/** @type {?} */
NzSelectService.prototype.compareWith;
/**
* @type {?}
* @private
*/
NzSelectService.prototype.listOfSelectedValueWithEmit$;
/**
* @type {?}
* @private
*/
NzSelectService.prototype.mapOfTemplateOption$;
/**
* @type {?}
* @private
*/
NzSelectService.prototype.searchValueRaw$;
/**
* @type {?}
* @private
*/
NzSelectService.prototype.listOfFilteredOption;
/**
* @type {?}
* @private
*/
NzSelectService.prototype.openRaw$;
/**
* @type {?}
* @private
*/
NzSelectService.prototype.checkRaw$;
/**
* @type {?}
* @private
*/
NzSelectService.prototype.open;
/** @type {?} */
NzSelectService.prototype.clearInput$;
/** @type {?} */
NzSelectService.prototype.searchValue;
/** @type {?} */
NzSelectService.prototype.isShowNotFound;
/** @type {?} */
NzSelectService.prototype.open$;
/** @type {?} */
NzSelectService.prototype.activatedOption;
/** @type {?} */
NzSelectService.prototype.activatedOption$;
/** @type {?} */
NzSelectService.prototype.listOfSelectedValue$;
/** @type {?} */
NzSelectService.prototype.modelChange$;
/** @type {?} */
NzSelectService.prototype.searchValue$;
/** @type {?} */
NzSelectService.prototype.listOfSelectedValue;
/** @type {?} */
NzSelectService.prototype.listOfTemplateOption;
/** @type {?} */
NzSelectService.prototype.listOfTagOption;
/** @type {?} */
NzSelectService.prototype.listOfTagAndTemplateOption;
/** @type {?} */
NzSelectService.prototype.listOfNzOptionComponent;
/** @type {?} */
NzSelectService.prototype.listOfNzOptionGroupComponent;
/** @type {?} */
NzSelectService.prototype.addedTagOption;
/** @type {?} */
NzSelectService.prototype.listOfCachedSelectedOption;
/** @type {?} */
NzSelectService.prototype.valueOrOption$;
/** @type {?} */
NzSelectService.prototype.check$;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzOptionLiComponent {
/**
* @param {?} elementRef
* @param {?} nzSelectService
* @param {?} cdr
* @param {?} renderer
*/
constructor(elementRef, nzSelectService, cdr, renderer) {
this.elementRef = elementRef;
this.nzSelectService = nzSelectService;
this.cdr = cdr;
this.el = this.elementRef.nativeElement;
this.selected = false;
this.active = false;
this.destroy$ = new Subject();
renderer.addClass(elementRef.nativeElement, 'ant-select-dropdown-menu-item');
}
/**
* @return {?}
*/
clickOption() {
this.nzSelectService.clickOption(this.nzOption);
}
/**
* @return {?}
*/
ngOnInit() {
this.nzSelectService.listOfSelectedValue$.pipe(takeUntil(this.destroy$)).subscribe((/**
* @param {?} list
* @return {?}
*/
list => {
this.selected = isNotNil(list.find((/**
* @param {?} v
* @return {?}
*/
v => this.nzSelectService.compareWith(v, this.nzOption.nzValue))));
this.cdr.markForCheck();
}));
this.nzSelectService.activatedOption$.pipe(takeUntil(this.destroy$)).subscribe((/**
* @param {?} option
* @return {?}
*/
option => {
if (option) {
this.active = this.nzSelectService.compareWith(option.nzValue, this.nzOption.nzValue);
}
else {
this.active = false;
}
this.cdr.markForCheck();
}));
}
/**
* @return {?}
*/
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}
NzOptionLiComponent.decorators = [
{ type: Component, args: [{
selector: '[nz-option-li]',
exportAs: 'nzOptionLi',
template: "<ng-container *ngIf=\"!nzOption.nzCustomContent; else nzOption.template\">\n {{nzOption.nzLabel}}\n</ng-container>\n<ng-container *ngIf=\"nzSelectService.isMultipleOrTags\">\n <i nz-icon nzType=\"check\" class=\"ant-select-selected-icon\" *ngIf=\"!nzMenuItemSelectedIcon; else nzMenuItemSelectedIcon\"></i>\n</ng-container>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
'[class.ant-select-dropdown-menu-item-selected]': 'selected && !nzOption.nzDisabled',
'[class.ant-select-dropdown-menu-item-disabled]': 'nzOption.nzDisabled',
'[class.ant-select-dropdown-menu-item-active]': 'active && !nzOption.nzDisabled',
'[attr.unselectable]': '"unselectable"',
'[style.user-select]': '"none"',
'(click)': 'clickOption()',
'(mousedown)': '$event.preventDefault()'
}
}] }
];
/** @nocollapse */
NzOptionLiComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: NzSelectService },
{ type: ChangeDetectorRef },
{ type: Renderer2 }
];
NzOptionLiComponent.propDecorators = {
nzOption: [{ type: Input }],
nzMenuItemSelectedIcon: [{ type: Input }]
};
if (false) {
/** @type {?} */
NzOptionLiComponent.prototype.el;
/** @type {?} */
NzOptionLiComponent.prototype.selected;
/** @type {?} */
NzOptionLiComponent.prototype.active;
/** @type {?} */
NzOptionLiComponent.prototype.destroy$;
/** @type {?} */
NzOptionLiComponent.prototype.nzOption;
/** @type {?} */
NzOptionLiComponent.prototype.nzMenuItemSelectedIcon;
/**
* @type {?}
* @private
*/
NzOptionLiComponent.prototype.elementRef;
/** @type {?} */
NzOptionLiComponent.prototype.nzSelectService;
/**
* @type {?}
* @private
*/
NzOptionLiComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzOptionContainerComponent {
/**
* @param {?} nzSelectService
* @param {?} cdr
* @param {?} ngZone
*/
constructor(nzSelectService, cdr, ngZone) {
this.nzSelectService = nzSelectService;
this.cdr = cdr;
this.ngZone = ngZone;
this.destroy$ = new Subject();
this.lastScrollTop = 0;
this.nzScrollToBottom = new EventEmitter();
}
/**
* @param {?} option
* @return {?}
*/
scrollIntoViewIfNeeded(option) {
// delay after open
setTimeout((/**
* @return {?}
*/
() => {
if (this.listOfNzOptionLiComponent && this.listOfNzOptionLiComponent.length && option) {
/** @type {?} */
const targetOption = this.listOfNzOptionLiComponent.find((/**
* @param {?} o
* @return {?}
*/
o => this.nzSelectService.compareWith(o.nzOption.nzValue, option.nzValue)));
/* tslint:disable:no-any */
if (targetOption && targetOption.el && ((/** @type {?} */ (targetOption.el))).scrollIntoViewIfNeeded) {
((/** @type {?} */ (targetOption.el))).scrollIntoViewIfNeeded(false);
}
/* tslint:enable:no-any */
}
}));
}
/**
* @param {?} _index
* @param {?} option
* @return {?}
*/
trackLabel(_index, option) {
return option.nzLabel;
}
// tslint:disable-next-line:no-any
/**
* @param {?} _index
* @param {?} option
* @return {?}
*/
trackValue(_index, option) {
return option.nzValue;
}
/**
* @return {?}
*/
ngOnInit() {
this.nzSelectService.activatedOption$.pipe(takeUntil(this.destroy$)).subscribe((/**
* @param {?} option
* @return {?}
*/
option => {
this.scrollIntoViewIfNeeded((/** @type {?} */ (option)));
}));
this.nzSelectService.check$.pipe(takeUntil(this.destroy$)).subscribe((/**
* @return {?}
*/
() => {
this.cdr.markForCheck();
}));
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => {
/** @type {?} */
const ul = this.dropdownUl.nativeElement;
fromEvent(ul, 'scroll')
.pipe(takeUntil(this.destroy$))
.subscribe((/**
* @param {?} e
* @return {?}
*/
e => {
e.preventDefault();
e.stopPropagation();
if (ul && ul.scrollTop > this.lastScrollTop && ul.scrollHeight < ul.clientHeight + ul.scrollTop + 10) {
this.lastScrollTop = ul.scrollTop;
this.ngZone.run((/**
* @return {?}
*/
() => {
this.nzScrollToBottom.emit();
}));
}
}));
}));
}
/**
* @return {?}
*/
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}
NzOptionContainerComponent.decorators = [
{ type: Component, args: [{
selector: '[nz-option-container]',
exportAs: 'nzOptionContainer',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
template: "<ul #dropdownUl\n class=\"ant-select-dropdown-menu ant-select-dropdown-menu-root ant-select-dropdown-menu-vertical\"\n role=\"menu\"\n tabindex=\"0\">\n <li *ngIf=\"nzSelectService.isShowNotFound\"\n nz-select-unselectable\n class=\"ant-select-dropdown-menu-item ant-select-dropdown-menu-item-disabled\">\n <nz-embed-empty [nzComponentName]=\"'select'\" [specificContent]=\"nzNotFoundContent\"></nz-embed-empty>\n </li>\n <li nz-option-li\n *ngIf=\"nzSelectService.addedTagOption\"\n [nzMenuItemSelectedIcon]=\"nzMenuItemSelectedIcon\"\n [nzOption]=\"nzSelectService.addedTagOption\">\n </li>\n <li nz-option-li\n *ngFor=\"let option of nzSelectService.listOfNzOptionComponent | nzFilterOption : nzSelectService.searchValue : nzSelectService.filterOption : nzSelectService.serverSearch; trackBy: trackValue\"\n [nzMenuItemSelectedIcon]=\"nzMenuItemSelectedIcon\"\n [nzOption]=\"option\">\n </li>\n <li class=\"ant-select-dropdown-menu-item-group\"\n *ngFor=\"let group of nzSelectService.listOfNzOptionGroupComponent | nzFilterGroupOption : nzSelectService.searchValue : nzSelectService.filterOption :nzSelectService.serverSearch; trackBy: trackLabel\">\n <div class=\"ant-select-dropdown-menu-item-group-title\"\n [attr.title]=\"group.isLabelString ? group.nzLabel : ''\">\n <ng-container *nzStringTemplateOutlet=\"group.nzLabel\"> {{group.nzLabel}} </ng-container>\n </div>\n <ul class=\"ant-select-dropdown-menu-item-group-list\">\n <li nz-option-li\n *ngFor=\"let option of group.listOfNzOptionComponent | nzFilterOption : nzSelectService.searchValue : nzSelectService.filterOption :nzSelectService.serverSearch; trackBy: trackValue\"\n [nzMenuItemSelectedIcon]=\"nzMenuItemSelectedIcon\"\n [nzOption]=\"option\">\n </li>\n </ul>\n </li>\n <li nz-option-li\n *ngFor=\"let option of nzSelectService.listOfTagOption | nzFilterOption : nzSelectService.searchValue : nzSelectService.filterOption : nzSelectService.serverSearch; trackBy: trackValue \"\n [nzMenuItemSelectedIcon]=\"nzMenuItemSelectedIcon\"\n [nzOption]=\"option\">\n </li>\n</ul>\n"
}] }
];
/** @nocollapse */
NzOptionContainerComponent.ctorParameters = () => [
{ type: NzSelectService },
{ type: ChangeDetectorRef },
{ type: NgZone }
];
NzOptionContainerComponent.propDecorators = {
listOfNzOptionLiComponent: [{ type: ViewChildren, args: [NzOptionLiComponent,] }],
dropdownUl: [{ type: ViewChild, args: ['dropdownUl', { static: true },] }],
nzNotFoundContent: [{ type: Input }],
nzMenuItemSelectedIcon: [{ type: Input }],
nzScrollToBottom: [{ type: Output }]
};
if (false) {
/**
* @type {?}
* @private
*/
NzOptionContainerComponent.prototype.destroy$;
/**
* @type {?}
* @private
*/
NzOptionContainerComponent.prototype.lastScrollTop;
/** @type {?} */
NzOptionContainerComponent.prototype.listOfNzOptionLiComponent;
/** @type {?} */
NzOptionContainerComponent.prototype.dropdownUl;
/** @type {?} */
NzOptionContainerComponent.prototype.nzNotFoundContent;
/** @type {?} */
NzOptionContainerComponent.prototype.nzMenuItemSelectedIcon;
/** @type {?} */
NzOptionContainerComponent.prototype.nzScrollToBottom;
/** @type {?} */
NzOptionContainerComponent.prototype.nzSelectService;
/**
* @type {?}
* @private
*/
NzOptionContainerComponent.prototype.cdr;
/**
* @type {?}
* @private
*/
NzOptionContainerComponent.prototype.ngZone;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzSelectTopControlComponent {
/**
* @param {?} renderer
* @param {?} nzSelectService
* @param {?} cdr
* @param {?=} noAnimation
*/
constructor(renderer, nzSelectService, cdr, noAnimation) {
this.renderer = renderer;
this.nzSelectService = nzSelectService;
this.cdr = cdr;
this.noAnimation = noAnimation;
this.isComposing = false;
this.destroy$ = new Subject();
this.nzShowSearch = false;
this.nzOpen = false;
this.nzAllowClear = false;
this.nzShowArrow = true;
this.nzLoading = false;
this.nzTokenSeparators = [];
}
/**
* @param {?} e
* @return {?}
*/
onClearSelection(e) {
e.stopPropagation();
this.nzSelectService.updateListOfSelectedValue([], true);
}
/**
* @param {?} value
* @return {?}
*/
setInputValue(value) {
/** fix clear value https://github.com/NG-ZORRO/ng-zorro-antd/issues/3825 **/
if (this.inputElement && !value) {
this.inputElement.nativeElement.value = value;
}
this.inputValue = value;
this.updateWidth();
this.nzSelectService.updateSearchValue(value);
this.nzSelectService.tokenSeparate(this.inputValue, this.nzTokenSeparators);
}
/**
* @return {?}
*/
get placeHolderDisplay() {
return this.inputValue || this.isComposing || this.nzSelectService.listOfSelectedValue.length ? 'none' : 'block';
}
/**
* @return {?}
*/
get selectedValueStyle() {
/** @type {?} */
let showSelectedValue = false;
/** @type {?} */
let opacity = 1;
if (!this.nzShowSearch) {
showSelectedValue = true;
}
else {
if (this.nzOpen) {
showSelectedValue = !(this.inputValue || this.isComposing);
if (showSelectedValue) {
opacity = 0.4;
}
}
else {
showSelectedValue = true;
}
}
return {
display: showSelectedValue ? 'block' : 'none',
opacity: `${opacity}`
};
}
// tslint:disable-next-line:no-any
/**
* @param {?} _index
* @param {?} option
* @return {?}
*/
trackValue(_index, option) {
return option.nzValue;
}
/**
* @return {?}
*/
updateWidth() {
if (this.nzSelectService.isMultipleOrTags && this.inputElement) {
if (this.inputValue || this.isComposing) {
this.renderer.setStyle(this.inputElement.nativeElement, 'width', `${this.inputElement.nativeElement.scrollWidth}px`);
}
else {
this.renderer.removeStyle(this.inputElement.nativeElement, 'width');
}
}
}
/**
* @param {?} option
* @param {?} e
* @return {?}
*/
removeSelectedValue(option, e) {
this.nzSelectService.removeValueFormSelected(option);
e.stopPropagation();
}
/**
* @return {?}
*/
ngOnInit() {
this.nzSelectService.open$.pipe(takeUntil(this.destroy$)).subscribe((/**
* @param {?} open
* @return {?}
*/
open => {
if (this.inputElement && open) {
setTimeout((/**
* @return {?}
*/
() => this.inputElement.nativeElement.focus()));
}
}));
this.nzSelectService.clearInput$.pipe(takeUntil(this.destroy$)).subscribe((/**
* @return {?}
*/
() => {
this.setInputValue('');
}));
this.nzSelectService.check$.pipe(takeUntil(this.destroy$)).subscribe((/**
* @return {?}
*/
() => {
this.cdr.markForCheck();
}));
}
/**
* @return {?}
*/
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}
NzSelectTopControlComponent.decorators = [
{ type: Component, args: [{
selector: '[nz-select-top-control]',
exportAs: 'nzSelectTopControl',
preserveWhitespaces: false,
animations: [zoomMotion],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: "<ng-template #inputTemplate>\n <input #inputElement\n autocomplete=\"something-new\"\n class=\"ant-select-search__field\"\n (compositionstart)=\"isComposing = true\"\n (compositionend)=\"isComposing = false\"\n (input)=\"updateWidth()\"\n [ngModel]=\"inputValue\"\n (ngModelChange)=\"setInputValue($event)\"\n [disabled]=\"nzSelectService.disabled\">\n</ng-template>\n<div class=\"ant-select-selection__rendered\">\n <div *ngIf=\"nzPlaceHolder\"\n nz-select-unselectable\n [style.display]=\"placeHolderDisplay\"\n class=\"ant-select-selection__placeholder\">{{ nzPlaceHolder }}</div>\n <!--single mode-->\n <ng-container *ngIf=\"nzSelectService.isSingleMode\">\n <!--selected label-->\n <div *ngIf=\"nzSelectService.listOfCachedSelectedOption.length && nzSelectService.listOfSelectedValue.length\"\n class=\"ant-select-selection-selected-value\"\n [attr.title]=\"nzSelectService.listOfCachedSelectedOption[0]?.nzLabel\"\n [ngStyle]=\"selectedValueStyle\">\n <ng-container *nzStringTemplateOutlet=\"nzCustomTemplate; context: { $implicit: nzSelectService.listOfCachedSelectedOption[0] }\">\n <ng-container>{{ nzSelectService.listOfCachedSelectedOption[0]?.nzLabel }}</ng-container>\n </ng-container>\n </div>\n <!--show search-->\n <div *ngIf=\"nzShowSearch\"\n class=\"ant-select-search ant-select-search--inline\" [style.display]=\"nzOpen ? 'block' : 'none'\">\n <div class=\"ant-select-search__field__wrap\">\n <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n <span class=\"ant-select-search__field__mirror\">{{inputValue}} </span>\n </div>\n </div>\n </ng-container>\n <!--multiple or tags mode-->\n <ul *ngIf=\"nzSelectService.isMultipleOrTags\">\n <ng-container *ngFor=\"let option of nzSelectService.listOfCachedSelectedOption | slice: 0 : nzMaxTagCount;trackBy:trackValue; let index = index\">\n <li [@zoomMotion]\n [@.disabled]=\"noAnimation?.nzNoAnimation\"\n [nzNoAnimation]=\"noAnimation?.nzNoAnimation\"\n [attr.title]=\"option.nzLabel\"\n [class.ant-select-selection__choice__disabled]=\"option.nzDisabled\"\n class=\"ant-select-selection__choice\">\n <ng-container *nzStringTemplateOutlet=\"nzCustomTemplate; context:{ $implicit: nzSelectService.listOfCachedSelectedOption[index] }\">\n <div class=\"ant-select-selection__choice__content\">{{ option.nzLabel }}</div>\n </ng-container>\n <span *ngIf=\"!option.nzDisabled\"\n class=\"ant-select-selection__choice__remove\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"removeSelectedValue(option, $event)\">\n <i nz-icon nzType=\"close\" class=\"ant-select-remove-icon\" *ngIf=\"!nzRemoveIcon; else nzRemoveIcon\"></i>\n </span>\n </li>\n </ng-container>\n <li *ngIf=\"nzSelectService.listOfCachedSelectedOption.length > nzMaxTagCount\"\n [@zoomMotion]\n [@.disabled]=\"noAnimation?.nzNoAnimation\"\n [nzNoAnimation]=\"noAnimation?.nzNoAnimation\"\n class=\"ant-select-selection__choice\">\n <div class=\"ant-select-selection__choice__content\">\n <ng-container *ngIf=\"nzMaxTagPlaceholder\">\n <ng-template\n [ngTemplateOutlet]=\"nzMaxTagPlaceholder\"\n [ngTemplateOutletContext]=\"{ $implicit: nzSelectService.listOfSelectedValue | slice: nzMaxTagCount}\">\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!nzMaxTagPlaceholder\">\n + {{ nzSelectService.listOfCachedSelectedOption.length - nzMaxTagCount }} ...\n </ng-container>\n </div>\n </li>\n <li class=\"ant-select-search ant-select-search--inline\">\n <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n </li>\n </ul>\n</div>\n<span *ngIf=\"nzAllowClear && nzSelectService.listOfSelectedValue.length\"\n class=\"ant-select-selection__clear\"\n nz-select-unselectable\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"onClearSelection($event)\">\n <i nz-icon nzType=\"close-circle\" nzTheme=\"fill\" *ngIf=\"!nzClearIcon; else nzClearIcon\" class=\"ant-select-close-icon\"></i>\n </span>\n<span class=\"ant-select-arrow\" nz-select-unselectable *ngIf=\"nzShowArrow\">\n <i nz-icon nzType=\"loading\" *ngIf=\"nzLoading; else defaultArrow\"></i>\n <ng-template #defaultArrow>\n <i nz-icon nzType=\"down\" class=\"ant-select-arrow-icon\" *ngIf=\"!nzSuffixIcon; else nzSuffixIcon\"></i>\n </ng-template>\n</span>"
}] }
];
/** @nocollapse */
NzSelectTopControlComponent.ctorParameters = () => [
{ type: Renderer2 },
{ type: NzSelectService },
{ type: ChangeDetectorRef },
{ type: NzNoAnimationDirective, decorators: [{ type: Host }, { type: Optional }] }
];
NzSelectTopControlComponent.propDecorators = {
inputElement: [{ type: ViewChild, args: ['inputElement', { static: false },] }],
nzShowSearch: [{ type: Input }],
nzPlaceHolder: [{ type: Input }],
nzOpen: [{ type: Input }],
nzMaxTagCount: [{ type: Input }],
nzAllowClear: [{ type: Input }],
nzShowArrow: [{ type: Input }],
nzLoading: [{ type: Input }],
nzCustomTemplate: [{ type: Input }],
nzSuffixIcon: [{ type: Input }],
nzClearIcon: [{ type: Input }],
nzRemoveIcon: [{ type: Input }],
nzMaxTagPlaceholder: [{ type: Input }],
nzTokenSeparators: [{ type: Input }]
};
if (false) {
/** @type {?} */
NzSelectTopControlComponent.prototype.inputValue;
/** @type {?} */
NzSelectTopControlComponent.prototype.isComposing;
/**
* @type {?}
* @private
*/
NzSelectTopControlComponent.prototype.destroy$;
/** @type {?} */
NzSelectTopControlComponent.prototype.inputElement;
/** @type {?} */
NzSelectTopControlComponent.prototype.nzShowSearch;
/** @type {?} */
NzSelectTopControlComponent.prototype.nzPlaceHolder;
/** @type {?} */
NzSelectTopControlComponent.prototype.nzOpen;
/** @type {?} */
NzSelectTopControlComponent.prototype.nzMaxTagCount;
/** @type {?} */
NzSelectTopControlComponent.prototy