@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
1,130 lines • 139 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: select.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import * as tslib_1 from "tslib";
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, forwardRef, Input, NgZone, Output, Renderer2, TemplateRef, ViewChild, HostListener } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { fromEvent, BehaviorSubject, of } from 'rxjs';
import { tap, map, debounceTime, filter, switchMap } from 'rxjs/operators';
import { WindowRef } from '@duoduo-oba/ng-devui/window-ref';
import { I18nService } from '@duoduo-oba/ng-devui/i18n';
import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
import { fadeInOut } from '@duoduo-oba/ng-devui/utils';
var SelectComponent = /** @class */ (function () {
function SelectComponent(renderer, windowRef, changeDetectorRef, i18n, ngZone) {
var _this = this;
this.renderer = renderer;
this.windowRef = windowRef;
this.changeDetectorRef = changeDetectorRef;
this.i18n = i18n;
this.ngZone = ngZone;
/**
* 【必选】下拉选项资源，支持Array<string>, Array<{key: value}>
*/
this.options = [];
/**
* 【可选】是否支持过滤搜索
*/
this.isSearch = false;
/**
* 【可选】是否支持聚焦自动展开下拉
*/
this.toggleOnFocus = false;
/**
* 【可选】下拉菜单高度，建议使用px作为高度单位
*/
this.scrollHight = '300px';
/**
* 【可选】下拉高亮css
*/
this.hightLightItemClass = 'active';
/**
* 【可选】是否支持全选
*/
this.isSelectAll = false;
/**
* 【可选】是否可以输入
*/
this.readonly = true;
/**
* 【可选】是否appendToBody
*/
this.appendToBody = false;
// 模板itemSize，appendToBody为true
/**
* 【可选】是否禁用下拉框
*/
this.disabled = false;
/**
* 【可选】下拉默认显示文字
*/
this.placeholder = '';
this.direction = 'down';
this.overview = 'border';
/**
* 【可选】是否开启clear功能（是否开启只对单选生效）
*/
this.allowClear = false;
/**
* 【可选】启用数据懒加载，默认不启用
*/
this.enableLazyLoad = false;
/**
* 输出函数，当选中某个选项项后，将会调用此函数，参数为当前选择项的值。如果需要获取所有选择状态的值，请参考(ngModelChange)方法
*/
this.valueChange = new EventEmitter();
/**
* select下拉toggle事件，值为true或false
*/
this.toggleChange = new EventEmitter();
this.loadMore = new EventEmitter();
/**
* 【当传入资源（options）类型为Array<{key: value}，必选】针对传入资源options的每项对应字段做禁用操作的key
*/
this.optionDisabledKey = '';
/**
* 【当传入资源（options）类型为Array<{key: value}，必选】针对传入资源options的每项对应字段禁止变更的key
*/
this.optionImmutableKey = '';
/**
* 【可选】配置多选的时候是否维持原数组排序还是用户选择的顺序排序，默认是用户顺序
*/
this.keepMultipleOrder = 'user-select';
/**
* customViewTemplate的方向，支持下方和右方
*/
this.customViewDirection = 'bottom';
this.autoFocus = false;
this.notAutoScroll = false; // 自动聚焦的时候，自动滚动到select位置
this.showLoading = false;
this._isOpen = false;
this.menuPosition = 'bottom';
this.halfChecked = false;
this.allChecked = false;
this.isMouseEvent = false;
this.filter = '';
this.activeIndex = -1;
// for multiple
this.availableOptions = [];
this.multiItems = [];
this.selectIndex = -1;
this.virtualScrollItemSize = {
// sm对应是30px，默认36px高，lg对应是44px
sm: 30,
normal: 36,
lg: 44
};
this.resetting = false;
this.onChange = (/**
* @param {?} _
* @return {?}
*/
function (_) { return null; });
this.onTouch = (/**
* @return {?}
*/
function () { return null; });
this.choose = (/**
* @param {?} option
* @param {?} index
* @param {?=} $event
* @return {?}
*/
function (option, index, $event) {
if ($event) {
$event.preventDefault();
$event.stopPropagation();
}
if (typeof option === 'object') {
if (Object.keys(option).length === 0 || _this.disabled) {
_this.isOpen = false;
return;
}
}
else {
if (_this.disabled) {
_this.isOpen = false;
return;
}
}
if (_this.optionDisabledKey && option[_this.optionDisabledKey]) {
return;
}
if (_this.optionImmutableKey && option[_this.optionImmutableKey]) {
return;
}
if (_this.multiple) {
/** @type {?} */
var indexOfOption = _this.multiItems.findIndex((/**
* @param {?} item
* @return {?}
*/
function (item) { return JSON.stringify(item.option) === JSON.stringify(option); }));
if (indexOfOption === -1) {
_this.multiItems.push({ id: index, option: option });
}
else {
_this.multiItems.splice(indexOfOption, 1);
}
if (_this.keepMultipleOrder === 'origin') {
_this.multiItems.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) { return a.id - b.id; }));
}
_this.value = _this.multiItems.map((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.option; }));
}
else {
_this.value = option;
_this.activeIndex = index;
_this.selectIndex = index;
_this.toggle();
}
_this.writeIntoInput(_this.value);
_this.onChange(_this.value);
_this.valueChange.emit(option);
_this.setChecked(_this.value);
});
this.onDocumentClick = (/**
* @param {?} $event
* @return {?}
*/
function ($event) {
if (_this.isOpen && !_this.selectBoxElement.nativeElement.contains($event.target)) {
_this.isOpen = false;
_this.selectIndex = _this.activeIndex ? _this.activeIndex : -1;
_this.changeDetectorRef.detectChanges();
}
});
this.valueParser = (/**
* @param {?} item
* @return {?}
*/
function (item) { return (typeof item === 'object' ? item[_this.filterKey] || '' : (item + '') ? item.toString() : ''); });
this.formatter = (/**
* @param {?} item
* @return {?}
*/
function (item) { return (typeof item === 'object' ? item[_this.filterKey] || '' : (item + '') ? item.toString() : ''); });
}
Object.defineProperty(SelectComponent.prototype, "isOpen", {
get: /**
* @return {?}
*/
function () {
return this._isOpen;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._isOpen = value;
this.toggleChange.emit(value);
this.setDocumentClickListener();
},
enumerable: true,
configurable: true
});
Object.defineProperty(SelectComponent.prototype, "isClearIconShow", {
get: /**
* @return {?}
*/
function () {
return this.allowClear && !this.multiple && !this.disabled && this.value;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
SelectComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
if (!this.searchFn) {
this.searchFn = (/**
* @param {?} term
* @return {?}
*/
function (term) {
return of((_this.options ? _this.options : [])
.map((/**
* @param {?} option
* @param {?} index
* @return {?}
*/
function (option, index) { return ({ option: option, id: index }); }))
.filter((/**
* @param {?} item
* @return {?}
*/
function (item) {
return _this.formatter(item.option)
.toLowerCase()
.indexOf(term.toLowerCase()) !== -1;
})));
});
}
// 只有多选的情况isSelectAll为true才有意义
if (!this.multiple) {
this.isSelectAll = false;
}
this.setI18nText();
this.registerFilterChange();
};
/**
* @return {?}
*/
SelectComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
if (this.autoFocus && this.selectBoxElement) {
this.selectBoxElement.nativeElement.focus({
preventScroll: this.notAutoScroll
});
}
if (this.selectBoxElement) {
this.width = this.width ? this.width : this.selectBoxElement.nativeElement.offsetWidth;
}
};
/**
* @return {?}
*/
SelectComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.sourceSubscription) {
this.sourceSubscription.unsubscribe();
}
if (this.filterSubscription) {
this.filterSubscription.unsubscribe();
}
if (this.i18nSubscription) {
this.i18nSubscription.unsubscribe();
}
document.removeEventListener('click', this.onDocumentClick);
};
/**
* @param {?} changes
* @return {?}
*/
SelectComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes && (changes.searchFn || changes.options)) {
this.resetSource();
}
};
/**
* @return {?}
*/
SelectComponent.prototype.setI18nText = /**
* @return {?}
*/
function () {
var _this = this;
this.i18nCommonText = this.i18n.getI18nText().common;
this.i18nSubscription = this.i18n.langChange().subscribe((/**
* @param {?} data
* @return {?}
*/
function (data) {
_this.i18nCommonText = data.common;
}));
};
/**
* @param {?} len
* @param {?} size
* @return {?}
*/
SelectComponent.prototype.getVirtualScrollHeight = /**
* @param {?} len
* @param {?} size
* @return {?}
*/
function (len, size) {
if (len > 0) {
/** @type {?} */
var height = this.templateItemSize ? this.templateItemSize * len : this.virtualScrollItemSize[size ? size : 'normal'] * len;
if (this.isSelectAll && this.multiple) {
height += this.virtualScrollItemSize[size ? size : 'normal'];
}
/** @type {?} */
var scrollHight = parseInt(this.scrollHight, 10);
if (height > scrollHight) {
return this.scrollHight;
}
else {
return height + 'px';
}
}
};
/**
* @param {?} size
* @return {?}
*/
SelectComponent.prototype.getVirtualScrollItemSize = /**
* @param {?} size
* @return {?}
*/
function (size) {
return this.templateItemSize ? this.templateItemSize : this.virtualScrollItemSize[size ? size : 'normal'];
};
/**
* @return {?}
*/
SelectComponent.prototype.resetSource = /**
* @return {?}
*/
function () {
if (this.sourceSubscription && this.searchFn) {
this.resetting = true;
this.sourceSubscription.next('');
}
};
/**
* @param {?} fn
* @return {?}
*/
SelectComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
SelectComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouch = fn;
};
/**
* @return {?}
*/
SelectComponent.prototype.registerFilterChange = /**
* @return {?}
*/
function () {
var _this = this;
this.sourceSubscription = new BehaviorSubject('');
this.sourceSubscription.pipe(switchMap((/**
* @param {?} term
* @return {?}
*/
function (term) { return _this.searchFn(term); }))).subscribe((/**
* @param {?} options
* @return {?}
*/
function (options) {
_this.availableOptions = options;
_this.setAvailableOptions();
_this.changeDetectorRef.markForCheck();
if (_this.appendToBody) {
setTimeout((/**
* @return {?}
*/
function () {
if (_this.connectedOverlay && _this.connectedOverlay.overlayRef) {
_this.connectedOverlay.overlayRef.updatePosition();
}
}));
}
// 显示数据变更，需要判断全选半选状态
if (_this.isSelectAll) {
/** @type {?} */
var selectedItemForFilterOptions_1 = [];
_this.multiItems.forEach((/**
* @param {?} item
* @return {?}
*/
function (item) {
_this.availableOptions.forEach((/**
* @param {?} option
* @return {?}
*/
function (option) {
if (item['id'] === option['id']) {
selectedItemForFilterOptions_1.push(item);
}
}));
}));
_this.setChecked(selectedItemForFilterOptions_1);
}
if (!_this.multiple && (!_this.value || _this.availableOptions && !_this.availableOptions.find((/**
* @param {?} option
* @return {?}
*/
function (option) { return option.option === _this.value; })))) {
_this.selectIndex = _this.availableOptions && _this.availableOptions.length > 0 ? 0 : -1;
}
}));
this.sourceSubscription.subscribe((/**
* @param {?} term
* @return {?}
*/
function (term) {
if (_this.resetting && term === '') {
_this.writeValue(_this.value);
_this.resetting = false;
}
}));
this.searchInputValueChangeEvent();
};
/**
* @return {?}
*/
SelectComponent.prototype.searchInputValueChangeEvent = /**
* @return {?}
*/
function () {
var _this = this;
if (this.isSearch && this.isOpen && this.filterInputElement) {
this.filterInputElement.nativeElement.focus();
if (!this.filterSubscription || this.appendToBody) { // 避免重复订阅
this.filterSubscription = fromEvent(this.filterInputElement.nativeElement, 'input')
.pipe(map((/**
* @param {?} e
* @return {?}
*/
function (e) { return e.target.value; })), tap((/**
* @param {?} term
* @return {?}
*/
function (term) { return _this.onTouch(); })), filter((/**
* @param {?} term
* @return {?}
*/
function (term) { return !_this.disabled && _this.searchFn && term.length >= 0; })), debounceTime(300) // hard code need refactory
)
.subscribe((/**
* @param {?} term
* @return {?}
*/
function (term) {
_this.filter = term;
_this.selectIndex = -1;
return _this.sourceSubscription.next(term);
}));
}
}
};
/**
* @param {?} obj
* @return {?}
*/
SelectComponent.prototype.writeValue = /**
* @param {?} obj
* @return {?}
*/
function (obj) {
var _this = this;
if (obj === null || obj === undefined) {
return;
}
this.value = obj;
if (this.multiple) {
this.value = this.value ? this.value : [];
this.value = Array.isArray(this.value) ? this.value : [this.value];
this.multiItems = this.value.map((/**
* @param {?} option
* @param {?} index
* @return {?}
*/
function (option, index) { return ({ option: option, id: _this.options.indexOf(option) }); }));
}
else {
/** @type {?} */
var selectedItem = this.availableOptions.find((/**
* @param {?} item
* @return {?}
*/
function (item) { return _this.formatter(item.option) === _this.formatter(_this.value); }));
this.activeIndex = selectedItem ? selectedItem.id : -1;
this.selectIndex = this.activeIndex ? this.activeIndex : -1;
}
this.writeIntoInput(this.value);
this.changeDetectorRef.markForCheck();
this.setChecked(this.value);
};
/**
* @param {?} value
* @return {?}
*/
SelectComponent.prototype.writeIntoInput = /**
* @param {?} value
* @return {?}
*/
function (value) {
var _this = this;
this._inputValue = this.multiple
? (value || []).map((/**
* @param {?} option
* @return {?}
*/
function (option) { return _this.valueParser(option); })).join(', ')
: this.valueParser(value);
this.setAvailableOptions();
};
/**
* @return {?}
*/
SelectComponent.prototype.setAvailableOptions = /**
* @return {?}
*/
function () {
if (!this.value || !Array.isArray(this.availableOptions)) {
return;
}
/** @type {?} */
var _value = this.value;
if (!this.multiple) {
_value = [_value];
}
this.availableOptions = this.availableOptions
.map((/**
* @param {?} item
* @return {?}
*/
function (item) { return ({
isChecked: _value.findIndex((/**
* @param {?} i
* @return {?}
*/
function (i) { return JSON.stringify(i) === JSON.stringify(item.option); })) > -1, id: item.id, option: item.option
}); }));
};
/**
* @return {?}
*/
SelectComponent.prototype.updateCdkConnectedOverlayOrigin = /**
* @return {?}
*/
function () {
if (this.selectBoxElement.nativeElement) {
this.cdkConnectedOverlayOrigin = new CdkOverlayOrigin(this.selectBoxElement.nativeElement);
}
};
/**
* @param {?} $event
* @return {?}
*/
SelectComponent.prototype.autoToggle = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
$event.preventDefault();
$event.stopPropagation();
if (this.toggleOnFocus && !this.disabled && !this.isOpen && !this.isMouseEvent) {
this.toggle();
}
};
// mousedown mouseup解决focus与click冲突问题
// mousedown mouseup解决focus与click冲突问题
/**
* @param {?} event
* @return {?}
*/
SelectComponent.prototype.setMouseEventTrue =
// mousedown mouseup解决focus与click冲突问题
/**
* @param {?} event
* @return {?}
*/
function (event) {
this.isMouseEvent = true;
};
/**
* @param {?} event
* @return {?}
*/
SelectComponent.prototype.setMouseEventFalse = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.isMouseEvent = false;
};
/**
* @return {?}
*/
SelectComponent.prototype.toggle = /**
* @return {?}
*/
function () {
if (this.disabled) {
this.isOpen = false;
return;
}
if (!this.isOpen) {
this.filter = '';
this.resetSource();
if (!this.appendToBody) {
/** @type {?} */
var direction = '';
switch (this.direction) {
case 'auto':
direction = this.isBottomRectEnough() ? 'bottom' : 'top';
break;
case 'down':
direction = 'bottom';
break;
case 'up':
direction = 'top';
break;
default:
direction = 'bottom';
}
this.popDirection = (/** @type {?} */ (direction));
}
else {
this.updateCdkConnectedOverlayOrigin();
}
}
this.isOpen = !this.isOpen;
/** @type {?} */
var that = this;
setTimeout((/**
* @return {?}
*/
function () {
that.searchInputValueChangeEvent();
}), 100);
};
/**
* @return {?}
*/
SelectComponent.prototype.isBottomRectEnough = /**
* @return {?}
*/
function () {
/** @type {?} */
var selectMenuElement = this.selectMenuElement.nativeElement;
/** @type {?} */
var selectInputElement = this.selectInputElement || this.selectInputWithLabelElement || this.selectInputWithTemplateElement;
/** @type {?} */
var displayStyle = selectMenuElement.style['display'] || ((/** @type {?} */ (window))).getComputedStyle(selectMenuElement).display;
/** @type {?} */
var tempStyle;
if (displayStyle === 'none') { // 必要， 否则首次展开必有问题， 如果animationEnd之后设置为none也会有问题
tempStyle = {
visibility: selectMenuElement.style.visibility,
display: selectMenuElement.style.display,
transform: selectMenuElement.style.transform,
};
this.renderer.setStyle(selectMenuElement, 'visibility', 'hidden');
this.renderer.setStyle(selectMenuElement, 'display', 'block');
this.renderer.setStyle(selectMenuElement, 'transform', 'translate(0, -9999)');
}
/** @type {?} */
var elementHeight = selectMenuElement.offsetHeight;
/** @type {?} */
var bottomDistance = this.windowRef.innerHeight - selectInputElement.nativeElement.getBoundingClientRect().bottom;
/** @type {?} */
var isBottomEnough = bottomDistance >= elementHeight;
if (displayStyle === 'none') {
this.renderer.setStyle(selectMenuElement, 'visibility', tempStyle.visibility);
this.renderer.setStyle(selectMenuElement, 'display', tempStyle.display);
this.renderer.setStyle(selectMenuElement, 'transform', tempStyle.transform);
}
return isBottomEnough;
};
/**
* @return {?}
*/
SelectComponent.prototype.setDocumentClickListener = /**
* @return {?}
*/
function () {
var _this = this;
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
function () {
if (_this.isOpen) {
document.addEventListener('click', _this.onDocumentClick);
}
else {
document.removeEventListener('click', _this.onDocumentClick);
}
}));
};
/**
* @param {?} $event
* @return {?}
*/
SelectComponent.prototype.onEscKeyup = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
if (this.isOpen) {
$event.stopPropagation();
}
this.isOpen = false;
};
/**
* @param {?} $event
* @return {?}
*/
SelectComponent.prototype.handleKeyUpEvent = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
if (this.isOpen) {
$event.preventDefault();
$event.stopPropagation();
this.selectIndex = this.selectIndex === 0 || this.selectIndex === -1 ? this.availableOptions.length - 1 : this.selectIndex - 1;
this.scrollToActive();
}
};
/**
* @param {?} $event
* @return {?}
*/
SelectComponent.prototype.handleKeyDownEvent = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
if (this.isOpen) {
$event.preventDefault();
$event.stopPropagation();
this.selectIndex =
this.selectIndex === this.availableOptions.length - 1 ? 0 : this.selectIndex + 1;
this.scrollToActive();
}
};
/**
* @return {?}
*/
SelectComponent.prototype.scrollToActive = /**
* @return {?}
*/
function () {
/** @type {?} */
var that = this;
setTimeout((/**
* @param {?} _
* @return {?}
*/
function (_) {
try {
/** @type {?} */
var selectIndex = that.selectIndex + (that.isSelectAll ? 1 : 0);
// 多了个全选会导致问题，index需要加1
/** @type {?} */
var scrollPane = that.dropdownUl.nativeElement.children[selectIndex];
if (scrollPane.scrollIntoViewIfNeeded) {
scrollPane.scrollIntoViewIfNeeded(false);
}
else {
/** @type {?} */
var containerInfo = that.dropdownUl.nativeElement.getBoundingClientRect();
/** @type {?} */
var elementInfo = scrollPane.getBoundingClientRect();
if (elementInfo.bottom > containerInfo.bottom || elementInfo.top < containerInfo.top) {
scrollPane.scrollIntoView(false);
}
}
}
catch (e) {
}
}));
};
/**
* @param {?} $event
* @return {?}
*/
SelectComponent.prototype.handleKeyEnterEvent = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
if (this.isOpen) {
$event.preventDefault();
$event.stopPropagation();
/** @type {?} */
var item = this.availableOptions[this.selectIndex];
if (item) {
this.choose(item.option, item.id, $event);
}
else {
this.toggle();
}
}
else {
this.toggle();
}
};
/**
* @param {?} item
* @param {?} $event
* @return {?}
*/
SelectComponent.prototype.removeItem = /**
* @param {?} item
* @param {?} $event
* @return {?}
*/
function (item, $event) {
this.choose(item.option, item.id, $event);
};
/**
* @return {?}
*/
SelectComponent.prototype.selectAll = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var mutableOption = this.optionImmutableKey
? this.availableOptions.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return !item.option[_this.optionImmutableKey]; }))
: this.availableOptions;
/** @type {?} */
var selectedImmutableOption = this.optionImmutableKey
? this.multiItems.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.option[_this.optionImmutableKey]; }))
: [];
if (mutableOption && mutableOption.length > (this.multiItems.length - selectedImmutableOption.length)) {
mutableOption.map((/**
* @param {?} item
* @return {?}
*/
function (item) {
/** @type {?} */
var indexOfOption = _this.multiItems
.findIndex((/**
* @param {?} i
* @return {?}
*/
function (i) { return JSON.stringify(i.option) === JSON.stringify(item.option); }));
if (indexOfOption === -1) {
_this.multiItems.push({ id: item.id, option: item.option });
}
}));
}
else {
this.multiItems = tslib_1.__spread(selectedImmutableOption);
}
this.value = this.multiItems.map((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.option; }));
this.writeIntoInput(this.value);
this.onChange(this.value);
this.valueChange.emit(this.multiItems);
this.setChecked(this.value);
};
/**
* @param {?} index
* @param {?} item
* @return {?}
*/
SelectComponent.prototype.trackByFn = /**
* @param {?} index
* @param {?} item
* @return {?}
*/
function (index, item) {
return index;
};
/**
* @param {?} index
* @param {?} item
* @return {?}
*/
SelectComponent.prototype.trackByOptionPointer = /**
* @param {?} index
* @param {?} item
* @return {?}
*/
function (index, item) {
return item.option;
};
/**
* @param {?} event
* @return {?}
*/
SelectComponent.prototype.loadMoreEvent = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.showLoading = true;
this.loadMore.emit({ instance: this, event: event });
};
/**
* @return {?}
*/
SelectComponent.prototype.loadFinish = /**
* @return {?}
*/
function () {
this.showLoading = false;
this.changeDetectorRef.markForCheck();
};
/**
* @return {?}
*/
SelectComponent.prototype.loadStart = /**
* @return {?}
*/
function () {
this.showLoading = true;
};
/**
* @param {?} position
* @return {?}
*/
SelectComponent.prototype.onPositionChange = /**
* @param {?} position
* @return {?}
*/
function (position) {
this.menuPosition = position.connectionPair.originY;
};
/**
* @param {?} $event
* @return {?}
*/
SelectComponent.prototype.animationEnd = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
var _this = this;
if (!this.isOpen && this.selectMenuElement) {
/** @type {?} */
var targetElement_1 = this.selectMenuElement.nativeElement;
setTimeout((/**
* @return {?}
*/
function () {
// 动画会覆盖导致display还是block， 所以要等动画覆盖完
_this.renderer.setStyle(targetElement_1, 'display', 'none');
}));
}
};
/**
* @param {?} selectedItem
* @return {?}
*/
SelectComponent.prototype.setChecked = /**
* @param {?} selectedItem
* @return {?}
*/
function (selectedItem) {
if (!selectedItem) {
return;
}
if (!this.isSelectAll) {
return;
}
this.halfChecked = false;
if (selectedItem.length === this.availableOptions.length) {
this.allChecked = true;
}
else if (selectedItem.length === 0) {
this.allChecked = false;
}
else {
this.halfChecked = true;
}
};
/**
* @return {?}
*/
SelectComponent.prototype.showSelectAll = /**
* @return {?}
*/
function () {
return this.isSelectAll && this.multiple && this.availableOptions.length > 0;
};
/**
* @return {?}
*/
SelectComponent.prototype.forceSearchNext = /**
* @return {?}
*/
function () {
this.sourceSubscription.next(this.filter);
};
/**
* @param {?} $event
* @return {?}
*/
SelectComponent.prototype.valueClear = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
$event.stopPropagation();
this.value = null;
this.resetStatus();
this.onChange(this.value);
this.valueChange.emit(this.value);
};
/**
* @return {?}
*/
SelectComponent.prototype.resetStatus = /**
* @return {?}
*/
function () {
this.writeIntoInput('');
this.activeIndex = -1;
this.selectIndex = -1;
this.changeDetectorRef.markForCheck();
};
SelectComponent.decorators = [
{ type: Component, args: [{
selector: 'd-select',
template: "<div\r\n class=\"devui-drop{{ popDirection === 'bottom' ? 'down' : 'up' }} {{ size ? 'devui-select-' + size : '' }}\"\r\n [ngClass]=\"{ open: isOpen }\"\r\n>\r\n <div\r\n #selectBox\r\n class=\"devui-form-group devui-has-feedback\"\r\n (click)=\"toggle()\"\r\n (focus)=\"autoToggle($event)\"\r\n [tabindex]=\"0\"\r\n (keydown.esc)=\"onEscKeyup($event)\"\r\n (keydown.ArrowUp)=\"handleKeyUpEvent($event)\"\r\n (keydown.ArrowDown)=\"handleKeyDownEvent($event)\"\r\n (keydown.enter)=\"handleKeyEnterEvent($event)\"\r\n >\r\n <input\r\n #selectInput\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"disabled\"\r\n [ngClass]=\"[\r\n size ? 'devui-select-input-' + size : '',\r\n overview === 'underlined' ? 'devui-select-underlined-border' : '',\r\n isOpen ? 'no-radius' : ''\r\n ]\"\r\n type=\"text\"\r\n class=\"devui-form-control devui-select-input\"\r\n [minLength]=\"0\"\r\n autocomplete=\"off\"\r\n [tabindex]=\"-1\"\r\n [readonly]=\"readonly\"\r\n [attr.value]=\"_inputValue\"\r\n *ngIf=\"\r\n !(extraConfig?.labelization?.enable && multiple) &&\r\n !(!extraConfig?.labelization?.enable && extraConfig?.selectedItemWithTemplate?.enable && (inputItemTemplate || itemTemplate))\r\n \"\r\n />\r\n <div\r\n #selectInputWithTemplate\r\n class=\"devui-select-list-wrapper devui-form-control {{ size ? 'input-' + size : '' }}\"\r\n [ngClass]=\"[overview === 'underlined' ? 'devui-select-underlined-border' : '', isOpen ? 'no-radius' : '', disabled ? 'disabled' : '']\"\r\n *ngIf=\"extraConfig?.selectedItemWithTemplate?.enable && (inputItemTemplate || itemTemplate) && !extraConfig?.labelization?.enable\"\r\n >\r\n <div class=\"devui-select-placeholder\" *ngIf=\"!_inputValue\">\r\n {{ placeholder }}\r\n </div>\r\n <div class=\"devui-select-selected-item-with-template\" *ngIf=\"_inputValue\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"inputItemTemplate || itemTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n option: value,\r\n filterKey: filterKey,\r\n position: 'result',\r\n inputValue: _inputValue\r\n }\"\r\n >\r\n </ng-template>\r\n </div>\r\n </div>\r\n\r\n <div\r\n #selectInputWithLabel\r\n class=\"devui-select-list-wrapper devui-form-control {{ size ? 'input-' + size : '' }}\"\r\n [ngClass]=\"[overview === 'underlined' ? 'devui-select-underlined-border' : '', isOpen ? 'no-radius' : '', disabled ? 'disabled' : '']\"\r\n *ngIf=\"extraConfig?.labelization?.enable && multiple\"\r\n >\r\n <div class=\"devui-select-placeholder\" *ngIf=\"multiItems.length === 0\">\r\n {{ placeholder }}\r\n </div>\r\n <ul\r\n class=\"devui-select-tag-list {{ extraConfig?.labelization?.overflow }}\"\r\n [style.maxHeight]=\"extraConfig?.labelization?.containnerMaxHeight\"\r\n *ngIf=\"multiItems.length > 0\"\r\n >\r\n <li\r\n class=\"devui-select-tag-item\"\r\n *ngFor=\"let item of multiItems; let index = index; trackBy: trackByOptionPointer\"\r\n [style.maxWidth]=\"extraConfig?.labelization?.labelMaxWidth\"\r\n [ngClass]=\"{\r\n disabled: optionDisabledKey && item.option[optionDisabledKey]\r\n }\"\r\n >\r\n <span class=\"over-flow-ellipsis\" title=\"{{ valueParser(item.option) }}\">{{ valueParser(item.option) }}</span>\r\n <a\r\n class=\"devui-select-tag-remove-button\"\r\n (click)=\"removeItem(item, $event)\"\r\n *ngIf=\"!(optionDisabledKey && item.option[optionDisabledKey])\"\r\n ></a>\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <span class=\"devui-form-control-feedback\" [ngClass]=\"{ 'devui-clear-icon-show': isClearIconShow }\">\r\n <span class=\"devui-select-clear-icon\" (mousedown)=\"$event.preventDefault()\" (click)=\"valueClear($event)\"> </span>\r\n <span class=\"devui-select-chevron-icon\">\r\n <svg\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g id=\"chevron_down\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon id=\"chevron_down\" points=\"4.5 5 8 8.76923077 11.5 5 13 6.61538462 8 12 3 6.61538462\"></polygon>\r\n </g>\r\n </svg>\r\n </span>\r\n </span>\r\n </div>\r\n <ng-container *ngIf=\"appendToBody\">\r\n <ng-template\r\n cdk-connected-overlay\r\n [cdkConnectedOverlayOrigin]=\"cdkConnectedOverlayOrigin\"\r\n [cdkConnectedOverlayWidth]=\"width\"\r\n [cdkConnectedOverlayOpen]=\"isOpen\"\r\n (positionChange)=\"onPositionChange($event)\"\r\n (backdropClick)=\"isOpen = false\"\r\n >\r\n <ng-template [ngTemplateOutlet]=\"selectDropdownTpl\"></ng-template>\r\n </ng-template>\r\n </ng-container>\r\n <ng-container *ngIf=\"!appendToBody\">\r\n <ng-template [ngTemplateOutlet]=\"selectDropdownTpl\"></ng-template>\r\n </ng-container>\r\n</div>\r\n\r\n<!--\u4E0B\u62C9\u6A21\u677F-->\r\n<ng-template #selectDropdownTpl>\r\n <div\r\n #selectMenu\r\n class=\"devui-dropdown-menu\"\r\n [ngClass]=\"{\r\n 'devui-dropdown-menu-cdk': appendToBody,\r\n 'devui-custom-right': customViewTemplate && customViewDirection === 'right'\r\n }\"\r\n [@fadeInOut]=\"isOpen ? (appendToBody ? menuPosition : popDirection) : 'void'\"\r\n (@fadeInOut.done)=\"animationEnd($event)\"\r\n >\r\n <ul\r\n dLoading\r\n [showLoading]=\"showLoading\"\r\n positionType=\"relative\"\r\n [message]=\"i18nCommonText?.loading\"\r\n [backdrop]=\"true\"\r\n class=\"devui-dropdown-menu-wrap {{ size ? 'devui-dropdown-menu-' + size : '' }}\"\r\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\r\n >\r\n <li [style.display]=\"isSearch ? 'block' : 'none'\" style=\"padding: 0 5px 5px;\">\r\n <div class=\"devui-form-group devui-has-feedback\" [style.margin]=\"'0'\">\r\n <input\r\n #filterInput\r\n [ngClass]=\"size ? 'devui-select-input-' + size : ''\"\r\n name=\"select\"\r\n type=\"text\"\r\n [ngModel]=\"filter\"\r\n autocomplete=\"off\"\r\n class=\"devui-form-control filter\"\r\n (keydown.ArrowUp)=\"handleKeyUpEvent($event)\"\r\n (keydown.ArrowDown)=\"handleKeyDownEvent($event)\"\r\n (keydown.enter)=\"handleKeyEnterEvent($event)\"\r\n (keydown.esc)=\"onEscKeyup($event)\"\r\n />\r\n <span class=\"devui-form-control-feedback\">\r\n <svg\r\n class=\"svg-icon-search\"\r\n width=\"1em\"\r\n height=\"1em\"\r\n style=\"vertical-align: middle\"\r\n viewBox=\"0 0 1024 1024\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <path\r\n d=\"M1024 900.584l-121.376 123.2L618.672 735.464c-63.44 43.768-140 69.392-222.44 69.392C177.376 804.848 0 624.712 0 402.536 0 180.336 177.376 0.208 396.232 0.208s396.232 180.144 396.232 402.328c0 75.328-20.752 145.576-56.248 205.872L1024 900.584zM396.232 128.944c-148.8 0-269.456 122.504-269.456 273.592 0 151.08 120.656 273.576 269.456 273.576 148.832 0 269.456-122.504 269.456-273.576C665.688 251.448 545.08 128.944 396.232 128.944z\"\r\n ></path>\r\n </svg>\r\n </span>\r\n </div>\r\n </li>\r\n <ul\r\n *ngIf=\"!virtualScroll || enableLazyLoad; else scrollViewTpl\"\r\n class=\"devui-select-list-unstyled devui-scrollbar\"\r\n dLazyLoad\r\n [enableLazyLoad]=\"enableLazyLoad\"\r\n (loadMore)=\"loadMoreEvent($event)\"\r\n [ngStyle]=\"{ 'max-height': scrollHight, width: '100%' }\"\r\n #dropdownUl\r\n >\r\n <ng-template [ngTemplateOutlet]=\"selectAllTpl\"></ng-template>\r\n <ng-container *ngFor=\"let item of availableOptions; let index = index; trackBy: trackByFn\">\r\n <ng-template [ngTemplateOutlet]=\"dropdownItemTpl\" [ngTemplateOutletContext]=\"{ item: item, index: index }\"></ng-template>\r\n </ng-container>\r\n </ul>\r\n <li *ngIf=\"availableOptions.length === 0 && !noResultItemTemplate\" class=\"devui-no-data-tip\">\r\n <ng-container *ngIf=\"!filter\">{{ i18nCommonText?.noData }}</ng-container>\r\n <ng-container *ngIf=\"filter\">{{ i18nCommonText?.noRecordsFound }}</ng-container>\r\n </li>\r\n <li *ngIf=\"availableOptions.length === 0 && noResultItemTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"noResultItemTemplate\" [ngTemplateOutletContext]=\"{ options: options }\"></ng-template>\r\n </li>\r\n </ul>\r\n <ng-container *ngIf=\"customViewTemplate\">\r\n <div class=\"devui-select-custom-area\">\r\n <ng-template [ngTemplateOutlet]=\"customViewTemplate\" [ngTemplateOutletContext]=\"{ $implicit: this, choose: choose}\"></ng-template>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<!--\u865A\u62DF\u6EDA\u52A8\u6A21\u677F-->\r\n<ng-template #scrollViewTpl>\r\n <cdk-virtual-scroll-viewport\r\n [ngStyle]=\"{\r\n height: getVirtualScrollHeight(availableOptions.length, size)\r\n }\"\r\n [itemSize]=\"getVirtualScrollItemSize(size)\"\r\n class=\"viewport-wrapper devui-select-list-unstyled devui-scrollbar\"\r\n [ngStyle]=\"{ 'max-height': scrollHight, width: '100%' }\"\r\n #dropdownUl\r\n >\r\n <ng-template [ngTemplateOutlet]=\"selectAllTpl\"></ng-template>\r\n <ng-container *cdkVirtualFor=\"let item of availableOptions; let index = index; trackBy: trackByFn\">\r\n <ng-template [ngTemplateOutlet]=\"dropdownItemTpl\" [ngTemplateOutletContext]=\"{ item: item, index: index }\"></ng-template>\r\n </ng-container>\r\n </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n<!--\u5168\u9009\u6A21\u677F-->\r\n<ng-template #selectAllTpl>\r\n <li class=\"devui-dropdown-item\" *ngIf=\"showSelectAll()\" (click)=\"selectAll()\">\r\n <span>\r\n <d-checkbox [label]=\"i18nCommonText.checkAll\" [isShowTitle]=\"false\" [halfchecked]=\"halfChecked\" [(ngModel)]=\"allChecked\"></d-checkbox>\r\n </span>\r\n </li>\r\n</ng-template>\r\n\r\n<!--\u4E0B\u62C9Item\u6A21\u677F-->\r\n<ng-template #dropdownItemTpl let-item=\"item\" let-index=\"index\">\r\n <li\r\n title=\"{{ formatter(item.option) }}\"\r\n [ngClass]=\"[\r\n 'devui-dropdown-item',\r\n item.isChecked ? hightLightItemClass : '',\r\n selectIndex === index && item.id !== activeIndex ? 'selected' : '',\r\n optionDisabledKey && item.option[optionDisabledKey] ? 'disabled' : ''\r\n ]\"\r\n (click)=\"choose(item.option, item.id, $event)\"\r\n >\r\n <ng-template\r\n [ngTemplateOutlet]=\"inputItemTemplate || itemTemplate || (multiple ? checkBoxItem : defaultItem)\"\r\n [ngTemplateOutletContext]=\"\r\n multiple\r\n ? {\r\n option: item.option,\r\n checked: item.isChecked,\r\n filterKey: filterKey,\r\n position: 'list',\r\n template: checkBoxItem\r\n }\r\n : {\r\n option: item.option,\r\n filterKey: filterKey,\r\n position: 'list',\r\n template: defaultItem\r\n }\r\n \"\r\n >\r\n </ng-template>\r\n </li>\r\n</ng-template>\r\n\r\n<ng-template #defaultItem let-option=\"option\">\r\n {{ formatter(option) }}\r\n</ng-template>\r\n\r\n<ng-template #checkBoxItem let-option=\"option\" let-checked=\"checked\">\r\n <d-checkbox\r\n [color]=\"color\"\r\n [label]=\"formatter(option)\"\r\n [cssClass]=\"'devui-select-checkbox'\"\r\n [ngModel]=\"checked\"\r\n [disabled]=\"option[optionDisabledKey]\"\r\n >\r\n </d-checkbox>\r\n</ng-template>\r\n",
exportAs: 'select',
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
function () { return SelectComponent; })),
multi: true
}
],
animations: [
fadeInOut
],
styles: ["@charset \"UTF-8\";.devui-dropdown-menu{width:100%}.devui-dropdown-menu.devui-custom-right{min-width:400px;display:-webkit-box!important;display:flex!important}.devui-dropdown-menu.devui-custom-right>.devui-dropdown-menu-wrap{display:inline-block;width:calc(50% - 1px)}.devui-dropdown-menu.devui-custom-right>.devui-select-custom-area{display:inline-block;overflow:auto;width:50%;border-left:1px solid #dfe1e6}.devui-dropdown-menu.devui-custom-right>.devui-select-custom-area::before{display:none}.devui-dropdown-menu .devui-dropdown-menu-wrap{position:initial}.devui-dropdown-menu-cdk{position:static;display:block;border:none}.devui-form-group.devui-has-feedback[tabindex]{outline:0}.devui-form-group.devui-has-feedback:focus .devui-select-list-wrapper.devui-form-control:not(.disabled):not([disabled]),.devui-form-group.devui-has-feedback:focus input.devui-form-control.devui-select-input:not(.disabled):not([disabled]){border-color:#5e7ce0}.devui-select-list-wrapper.devui-form-control,.devui-select-placeholder,.devui-select-selected-item-with-template{font-size:14px}.devui-form-group>input.devui-form-control.devui-select-input{cursor:pointer;padding-right:2em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.devui-select-list-wrapper.devui-form-control{cursor:pointer;height:auto;margin:0;padding:2px 30px 0 2px}.devui-dropdown-item{font-size:14px;display:block;min-height:36px;line-height:20px;width:100%;padding:8px 13px;clear:both;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border:0;color:#252b3a}.devui-dropdown-item input[name=search]{font-size:14px}.devui-dropdown-item ::ng-deep .devui-select-checkbox label{max-width:calc(100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px}.devui-dropdown-item.selected ::ng-deep .devui-select-checkbox .checkbox-label{color:#5e7ce0}.devui-dropdown-item.active ::ng-deep .devui-select-checkbox .checkbox-label{color:#5e7ce0}.devui-select-lg{font-size:18px;min-height:46px;line-height:28px}.devui-select-lg .devui-select-list-wrapper.devui-form-control,.devui-select-lg .devui-select-placeholder,.dev