@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
965 lines • 133 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: select.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
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';
export class SelectComponent {
/**
* @param {?} renderer
* @param {?} windowRef
* @param {?} changeDetectorRef
* @param {?} i18n
* @param {?} ngZone
*/
constructor(renderer, windowRef, changeDetectorRef, i18n, ngZone) {
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 {?}
*/
(_) => null);
this.onTouch = (/**
* @return {?}
*/
() => null);
this.choose = (/**
* @param {?} option
* @param {?} index
* @param {?=} $event
* @return {?}
*/
(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 {?} */
const indexOfOption = this.multiItems.findIndex((/**
* @param {?} item
* @return {?}
*/
item => JSON.stringify(item.option) === JSON.stringify(option)));
if (indexOfOption === -1) {
this.multiItems.push({ id: index, option });
}
else {
this.multiItems.splice(indexOfOption, 1);
}
if (this.keepMultipleOrder === 'origin') {
this.multiItems.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => a.id - b.id));
}
this.value = this.multiItems.map((/**
* @param {?} item
* @return {?}
*/
item => 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 {?}
*/
($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 {?}
*/
item => (typeof item === 'object' ? item[this.filterKey] || '' : (item + '') ? item.toString() : ''));
this.formatter = (/**
* @param {?} item
* @return {?}
*/
item => (typeof item === 'object' ? item[this.filterKey] || '' : (item + '') ? item.toString() : ''));
}
/**
* @return {?}
*/
get isOpen() {
return this._isOpen;
}
/**
* @param {?} value
* @return {?}
*/
set isOpen(value) {
this._isOpen = value;
this.toggleChange.emit(value);
this.setDocumentClickListener();
}
/**
* @return {?}
*/
get isClearIconShow() {
return this.allowClear && !this.multiple && !this.disabled && this.value;
}
/**
* @return {?}
*/
ngOnInit() {
if (!this.searchFn) {
this.searchFn = (/**
* @param {?} term
* @return {?}
*/
(term) => {
return of((this.options ? this.options : [])
.map((/**
* @param {?} option
* @param {?} index
* @return {?}
*/
(option, index) => ({ option: option, id: index })))
.filter((/**
* @param {?} item
* @return {?}
*/
item => this.formatter(item.option)
.toLowerCase()
.indexOf(term.toLowerCase()) !== -1)));
});
}
// 只有多选的情况isSelectAll为true才有意义
if (!this.multiple) {
this.isSelectAll = false;
}
this.setI18nText();
this.registerFilterChange();
}
/**
* @return {?}
*/
ngAfterViewInit() {
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 {?}
*/
ngOnDestroy() {
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 {?}
*/
ngOnChanges(changes) {
if (changes && (changes.searchFn || changes.options)) {
this.resetSource();
}
}
/**
* @return {?}
*/
setI18nText() {
this.i18nCommonText = this.i18n.getI18nText().common;
this.i18nSubscription = this.i18n.langChange().subscribe((/**
* @param {?} data
* @return {?}
*/
(data) => {
this.i18nCommonText = data.common;
}));
}
/**
* @param {?} len
* @param {?} size
* @return {?}
*/
getVirtualScrollHeight(len, size) {
if (len > 0) {
/** @type {?} */
let height = this.templateItemSize ? this.templateItemSize * len : this.virtualScrollItemSize[size ? size : 'normal'] * len;
if (this.isSelectAll && this.multiple) {
height += this.virtualScrollItemSize[size ? size : 'normal'];
}
/** @type {?} */
const scrollHight = parseInt(this.scrollHight, 10);
if (height > scrollHight) {
return this.scrollHight;
}
else {
return height + 'px';
}
}
}
/**
* @param {?} size
* @return {?}
*/
getVirtualScrollItemSize(size) {
return this.templateItemSize ? this.templateItemSize : this.virtualScrollItemSize[size ? size : 'normal'];
}
/**
* @return {?}
*/
resetSource() {
if (this.sourceSubscription && this.searchFn) {
this.resetting = true;
this.sourceSubscription.next('');
}
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouch = fn;
}
/**
* @return {?}
*/
registerFilterChange() {
this.sourceSubscription = new BehaviorSubject('');
this.sourceSubscription.pipe(switchMap((/**
* @param {?} term
* @return {?}
*/
term => this.searchFn(term)))).subscribe((/**
* @param {?} options
* @return {?}
*/
options => {
this.availableOptions = options;
this.setAvailableOptions();
this.changeDetectorRef.markForCheck();
if (this.appendToBody) {
setTimeout((/**
* @return {?}
*/
() => {
if (this.connectedOverlay && this.connectedOverlay.overlayRef) {
this.connectedOverlay.overlayRef.updatePosition();
}
}));
}
// 显示数据变更，需要判断全选半选状态
if (this.isSelectAll) {
/** @type {?} */
const selectedItemForFilterOptions = [];
this.multiItems.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
this.availableOptions.forEach((/**
* @param {?} option
* @return {?}
*/
option => {
if (item['id'] === option['id']) {
selectedItemForFilterOptions.push(item);
}
}));
}));
this.setChecked(selectedItemForFilterOptions);
}
if (!this.multiple && (!this.value || this.availableOptions && !this.availableOptions.find((/**
* @param {?} option
* @return {?}
*/
option => option.option === this.value)))) {
this.selectIndex = this.availableOptions && this.availableOptions.length > 0 ? 0 : -1;
}
}));
this.sourceSubscription.subscribe((/**
* @param {?} term
* @return {?}
*/
term => {
if (this.resetting && term === '') {
this.writeValue(this.value);
this.resetting = false;
}
}));
this.searchInputValueChangeEvent();
}
/**
* @return {?}
*/
searchInputValueChangeEvent() {
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 {?}
*/
(e) => e.target.value)), tap((/**
* @param {?} term
* @return {?}
*/
term => this.onTouch())), filter((/**
* @param {?} term
* @return {?}
*/
term => !this.disabled && this.searchFn && term.length >= 0)), debounceTime(300) // hard code need refactory
)
.subscribe((/**
* @param {?} term
* @return {?}
*/
term => {
this.filter = term;
this.selectIndex = -1;
return this.sourceSubscription.next(term);
}));
}
}
}
/**
* @param {?} obj
* @return {?}
*/
writeValue(obj) {
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 {?}
*/
(option, index) => ({ option: option, id: this.options.indexOf(option) })));
}
else {
/** @type {?} */
const selectedItem = this.availableOptions.find((/**
* @param {?} item
* @return {?}
*/
item => 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 {?}
*/
writeIntoInput(value) {
this._inputValue = this.multiple
? (value || []).map((/**
* @param {?} option
* @return {?}
*/
option => this.valueParser(option))).join(', ')
: this.valueParser(value);
this.setAvailableOptions();
}
/**
* @return {?}
*/
setAvailableOptions() {
if (!this.value || !Array.isArray(this.availableOptions)) {
return;
}
/** @type {?} */
let _value = this.value;
if (!this.multiple) {
_value = [_value];
}
this.availableOptions = this.availableOptions
.map((/**
* @param {?} item
* @return {?}
*/
(item) => ({
isChecked: _value.findIndex((/**
* @param {?} i
* @return {?}
*/
i => JSON.stringify(i) === JSON.stringify(item.option))) > -1, id: item.id, option: item.option
})));
}
/**
* @return {?}
*/
updateCdkConnectedOverlayOrigin() {
if (this.selectBoxElement.nativeElement) {
this.cdkConnectedOverlayOrigin = new CdkOverlayOrigin(this.selectBoxElement.nativeElement);
}
}
/**
* @param {?} $event
* @return {?}
*/
autoToggle($event) {
$event.preventDefault();
$event.stopPropagation();
if (this.toggleOnFocus && !this.disabled && !this.isOpen && !this.isMouseEvent) {
this.toggle();
}
}
// mousedown mouseup解决focus与click冲突问题
/**
* @param {?} event
* @return {?}
*/
setMouseEventTrue(event) {
this.isMouseEvent = true;
}
/**
* @param {?} event
* @return {?}
*/
setMouseEventFalse(event) {
this.isMouseEvent = false;
}
/**
* @return {?}
*/
toggle() {
if (this.disabled) {
this.isOpen = false;
return;
}
if (!this.isOpen) {
this.filter = '';
this.resetSource();
if (!this.appendToBody) {
/** @type {?} */
let 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 {?} */
const that = this;
setTimeout((/**
* @return {?}
*/
function () {
that.searchInputValueChangeEvent();
}), 100);
}
/**
* @return {?}
*/
isBottomRectEnough() {
/** @type {?} */
const selectMenuElement = this.selectMenuElement.nativeElement;
/** @type {?} */
const selectInputElement = this.selectInputElement || this.selectInputWithLabelElement || this.selectInputWithTemplateElement;
/** @type {?} */
const displayStyle = selectMenuElement.style['display'] || ((/** @type {?} */ (window))).getComputedStyle(selectMenuElement).display;
/** @type {?} */
let 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 {?} */
const elementHeight = selectMenuElement.offsetHeight;
/** @type {?} */
const bottomDistance = this.windowRef.innerHeight - selectInputElement.nativeElement.getBoundingClientRect().bottom;
/** @type {?} */
const 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 {?}
*/
setDocumentClickListener() {
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => {
if (this.isOpen) {
document.addEventListener('click', this.onDocumentClick);
}
else {
document.removeEventListener('click', this.onDocumentClick);
}
}));
}
/**
* @param {?} $event
* @return {?}
*/
onEscKeyup($event) {
if (this.isOpen) {
$event.stopPropagation();
}
this.isOpen = false;
}
/**
* @param {?} $event
* @return {?}
*/
handleKeyUpEvent($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 {?}
*/
handleKeyDownEvent($event) {
if (this.isOpen) {
$event.preventDefault();
$event.stopPropagation();
this.selectIndex =
this.selectIndex === this.availableOptions.length - 1 ? 0 : this.selectIndex + 1;
this.scrollToActive();
}
}
/**
* @return {?}
*/
scrollToActive() {
/** @type {?} */
const that = this;
setTimeout((/**
* @param {?} _
* @return {?}
*/
_ => {
try {
/** @type {?} */
const selectIndex = that.selectIndex + (that.isSelectAll ? 1 : 0);
// 多了个全选会导致问题，index需要加1
/** @type {?} */
const scrollPane = that.dropdownUl.nativeElement.children[selectIndex];
if (scrollPane.scrollIntoViewIfNeeded) {
scrollPane.scrollIntoViewIfNeeded(false);
}
else {
/** @type {?} */
const containerInfo = that.dropdownUl.nativeElement.getBoundingClientRect();
/** @type {?} */
const elementInfo = scrollPane.getBoundingClientRect();
if (elementInfo.bottom > containerInfo.bottom || elementInfo.top < containerInfo.top) {
scrollPane.scrollIntoView(false);
}
}
}
catch (e) {
}
}));
}
/**
* @param {?} $event
* @return {?}
*/
handleKeyEnterEvent($event) {
if (this.isOpen) {
$event.preventDefault();
$event.stopPropagation();
/** @type {?} */
const 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 {?}
*/
removeItem(item, $event) {
this.choose(item.option, item.id, $event);
}
/**
* @return {?}
*/
selectAll() {
/** @type {?} */
const mutableOption = this.optionImmutableKey
? this.availableOptions.filter((/**
* @param {?} item
* @return {?}
*/
item => !item.option[this.optionImmutableKey]))
: this.availableOptions;
/** @type {?} */
const selectedImmutableOption = this.optionImmutableKey
? this.multiItems.filter((/**
* @param {?} item
* @return {?}
*/
item => item.option[this.optionImmutableKey]))
: [];
if (mutableOption && mutableOption.length > (this.multiItems.length - selectedImmutableOption.length)) {
mutableOption.map((/**
* @param {?} item
* @return {?}
*/
item => {
/** @type {?} */
const indexOfOption = this.multiItems
.findIndex((/**
* @param {?} i
* @return {?}
*/
i => JSON.stringify(i.option) === JSON.stringify(item.option)));
if (indexOfOption === -1) {
this.multiItems.push({ id: item.id, option: item.option });
}
}));
}
else {
this.multiItems = [...selectedImmutableOption];
}
this.value = this.multiItems.map((/**
* @param {?} item
* @return {?}
*/
item => item.option));
this.writeIntoInput(this.value);
this.onChange(this.value);
this.valueChange.emit(this.multiItems);
this.setChecked(this.value);
}
/**
* @param {?} index
* @param {?} item
* @return {?}
*/
trackByFn(index, item) {
return index;
}
/**
* @param {?} index
* @param {?} item
* @return {?}
*/
trackByOptionPointer(index, item) {
return item.option;
}
/**
* @param {?} event
* @return {?}
*/
loadMoreEvent(event) {
this.showLoading = true;
this.loadMore.emit({ instance: this, event: event });
}
/**
* @return {?}
*/
loadFinish() {
this.showLoading = false;
this.changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
loadStart() {
this.showLoading = true;
}
/**
* @param {?} position
* @return {?}
*/
onPositionChange(position) {
this.menuPosition = position.connectionPair.originY;
}
/**
* @param {?} $event
* @return {?}
*/
animationEnd($event) {
if (!this.isOpen && this.selectMenuElement) {
/** @type {?} */
const targetElement = this.selectMenuElement.nativeElement;
setTimeout((/**
* @return {?}
*/
() => {
// 动画会覆盖导致display还是block， 所以要等动画覆盖完
this.renderer.setStyle(targetElement, 'display', 'none');
}));
}
}
/**
* @param {?} selectedItem
* @return {?}
*/
setChecked(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 {?}
*/
showSelectAll() {
return this.isSelectAll && this.multiple && this.availableOptions.length > 0;
}
/**
* @return {?}
*/
forceSearchNext() {
this.sourceSubscription.next(this.filter);
}
/**
* @param {?} $event
* @return {?}
*/
valueClear($event) {
$event.stopPropagation();
this.value = null;
this.resetStatus();
this.onChange(this.value);
this.valueChange.emit(this.value);
}
/**
* @return {?}
*/
resetStatus() {
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 {?}
*/
() => 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,.devui-select-lg .devui-select-selected-item-with-template{font-size:18px}.devui-select-lg .devui-dropdown-item{font-size:18px;min-height:40px;line-height:28px}.devui-select-lg .devui-dropdown-item input[name=search]{font-size:18px}.devui-select-lg ::ng-deep .devui-checkbox,.devui-select-lg ::ng-deep .devui-select-checkbox label .checkbox-label{font-size:18px;line-height:28px}.devui-select-lg ::ng-deep .devui-checkbox-material{width:18px;height:18px}.devui-select-sm{font-size:12px;min-height:30px;line-height:14px}.devui-select-sm .devui-select-list-wrapper.devui-form-control,.devui-select-sm .devui-select-placeholder,.devui-select-sm .devui-select-selected-item-with-template{font-size:12px}.devui-select-sm .devui-dropdown-item{font-size:12px;min-height:30px;line-height:14px}.devui-select-sm .devui-dropdown-item input[name=search]{font-size:12px}.devui-select-sm ::ng-deep .devui-select-checkbox label .checkbox-label{font-size:12px;line-height:16px}.devui-select-sm ::ng-deep .devui-checkbox-material{width:12px;height:12px}.devui-dropdown-menu-lg .devui-dropdown-item{font-size:18px;min-height:40px;line-height:28px}.devui-dropdown-menu-lg .devui-dropdown-item input[name=search]{font-size:18px}.devui-dropdown-menu-lg ::ng-deep .devui-checkbox,.devui-dropdown-menu-lg ::ng-deep .devui-select-checkbox label .checkbox-label{font-size:18px;line-height:28px}.devui-dropdown-menu-lg ::ng-deep .devui-checkbox-material{width:18px;height:18px}.devui-dropdown-menu-sm .devui-dropdown-item{font-size:12px;min-height:30px;line-height:14px}.devui-dropdown-menu-sm .devui-dropdown-item input[name=search]{font-size:12px}.devui-dropdown-menu-sm ::ng-deep .devui-select-checkbox label .checkbox-label{font-size:12px;line-height:16px}.devui-dropdown-menu-sm ::ng-deep .devui-checkbox-material{width:12px;height:12px}div.devui-dropdown-menu{margin-bottom:5px;cursor:pointer;min-width:auto;box-shadow:0 4px 8px 0 rgba(41,48,64,.2)}div.devui-dropdown-menu .devui-select-list-unstyled,div.devui-dropdown-menu>ul.devui-select-list-unstyled{overflow-y:auto}div.devui-dropdown-menu .devui-select-list-unstyled li:hover:not(.active):not(.disabled),div.devui-dropdown-menu>ul.devui-select-list-unstyled li:hover:not(.active):not(.disabled){background-color:#f2f5fc}div.devui-dropdown-menu .devui-select-list-unstyled li.active,div.devui-dropdown-menu .devui-select-list-unstyled li.active:hover,div.devui-dropdown-menu .devui-select-list-unstyled li.selected,div.devui-dropdown-menu>ul.devui-list-unstyled li.active,div.devui-dropdown-menu>ul.devui-list-unstyled li.active:hover,div.devui-dropdown-menu>ul.devui-select-list-unstyled li.selected{background-color:#f2f5fc;color:#5e7ce0}.devui-has-feedback{z-index:5}.devui-form-control,.devui-form-group .devui-form-control{border-radius:1px;box-shadow:none}.devui-form-control.no-radius,.devui-form-group .devui-form-control.no-radius{border-radius:1px 1px 0 0}.devui-form-control:focus:not(.disabled):not(:disabled),.devui-form-control:hover:not(.disabled):not(:disabled),.devui-form-group .devui-form-control.devui-select-underlined-border:focus:not(.disabled):not(:disabled),.devui-form-group .devui-form-control.devui-select-underlined-border:hover:not(.disabled):not(:disabled),.devui-form-group .devui-form-control:focus:not(.disabled):not(:disabled),.devui-form-group .devui-form-control:hover:not(.disabled):not(:disabled){border-color:#344899}.devui-form-group .devui-form-control.devui-select-underlined-border{border:0;border-bottom:1px solid #adb0b8;border-radius:0}.devui-form-control.devui-select-input-lg{line-height:1.3333333;height:46px}.devui-form-control.devui-select-input-lg+.devui-form-control-feedback{height:46px;width:46px;line-height:46px}.devui-form-control.devui-select-input-sm{line-height:1.5;height:30px}.devui-form-control.devui-select-input-sm+.devui-form-control-feedback{height:30px;width:30px;line-height:30px}.devui-select-list-wrapper .devui-select-selected-item-with-template{height:28px;line-height:28px;padding:0 10px;cursor:pointer}.devui-select-list-wrapper .devui-select-placeholder{height:28px;line-height:28px;color:#8a8e99;padding-left:10px}.devui-select-list-wrapper .devui-select-tag-list{height:28px;margin:0;padding:0;list-style-type:none;overflow:hidden}.devui-select-list-wrapper .devui-select-tag-list.normal{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.devui-select-list-wrapper .devui-select-tag-list.scroll-y{overflow-y:auto;overflow-x:hidden}.devui-select-list-wrapper .devui-select-tag-list.multiple-line{height:auto;overflow-y:auto;overflow-x:hidden;line-height:1.42857143}.devui-select-list-wrapper .devui-select-tag-item{display:inline-block;margin:3px 2px 0;padding:0 5px;min-height:20px;line-height:20px;max-height:20px;border-radius:1px;color:#252b3a;background:#eef0f5;max-width:100%;position:relative}.devui-select-list-wrapper .devui-select-tag-item span{display:inline-block;max-width:100%;padding-right:14px}.devui-select-list-wrapper .devui-select-tag-item.disabled span{padding-right:5px}.devui-select-list-wrapper .devui-select-tag-item .devui-select-tag-remove-button{position:absolute;right:2px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);line-h