UNPKG

ng-zorro-antd

Version:

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

1,338 lines (1,331 loc) 72.8 kB
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}}&nbsp;</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