ng-devui
Version:
DevUI components based on Angular
671 lines (669 loc) • 110 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import * as i3$1 from '@angular/cdk/overlay';
import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
import * as i1$1 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, Inject, ContentChild, HostListener, HostBinding, NgModule } from '@angular/core';
import * as i2 from 'ng-devui/utils';
import { fadeInOut, addClassToOrigin, removeClassFromOrigin, AppendToBodyDirectionsConfig, formWithDropDown, WithConfig, HighlightModule, LazyLoadModule } from 'ng-devui/utils';
import * as i1$2 from 'ng-devui/window-ref';
import { WindowRefModule } from 'ng-devui/window-ref';
import * as i7 from '@angular/cdk/scrolling';
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
import * as i1 from 'ng-devui/i18n';
import * as i3 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i4 from 'ng-devui/checkbox';
import { CheckBoxModule } from 'ng-devui/checkbox';
import * as i6 from 'ng-devui/loading';
import { LoadingModule } from 'ng-devui/loading';
import * as i2$1 from 'ng-devui/tags';
import { TagsModule } from 'ng-devui/tags';
import { of, fromEvent } from 'rxjs';
import { map, filter, debounceTime } from 'rxjs/operators';
class ToggleMenuListComponent {
/**
* 【可选】下拉菜单高度，建议使用px作为高度单位
*/
set scrollHeight(value) {
this._scrollHeight = `${parseInt(value, 10)}px`;
}
get scrollHeight() {
return this._scrollHeight;
}
get realVirtualScrollItemSize() {
const itemSize = (this.templateItemSize || this.virtualScrollItemSize[this.size || 'normal']) + this.virtualScrollItemSize.space;
const num = Math.round(this.scrollHeightNum / itemSize) || 10;
this.minBuffer = num * 1.5 * itemSize;
this.maxBuffer = num * 2.5 * itemSize;
return itemSize;
}
constructor(changeDetectorRef, i18n) {
this.changeDetectorRef = changeDetectorRef;
this.i18n = i18n;
/**
* 【必选】下拉选项资源，支持Array<string>, Array<{key: value}>
*/
this.options = [];
/**
* 【当传入资源（options）类型为Array<{key: value}，必选】针对传入资源options的每项对应字段做禁用操作的key
*/
this.optionDisabledKey = '';
/**
* 【当传入资源（options）类型为Array<{key: value}，必选】针对传入资源options的每项对应字段禁止变更的key
*/
this.optionImmutableKey = '';
/**
* 【当传入资源（options）类型为Array<{key: value}，可选】如使用分组需设置
*/
this.optionGroupKey = '';
/**
* 【可选】是否在搜索过滤状态中
*/
this.isFiltering = false;
/**
* 【可选】启用数据懒加载，默认不启用
*/
this.enableLazyLoad = false;
/**
* 【可选】是否虚拟滚动
*/
this.virtualScroll = false;
/**
* customViewTemplate的方向，支持下方和右方
*/
this.customViewDirection = 'bottom';
this.selectIndex = -1;
this.multiItems = [];
/**
* 【可选】是否支持全选
*/
this.isSelectAll = false;
/**
* 【可选】配置多选的时候是否维持原数组排序还是用户选择的顺序排序，默认是用户顺序
*/
this.keepMultipleOrder = 'user-select';
this.closeScope = 'all';
/**
* select下拉toggle事件，值为true或false
*/
this.toggleChange = new EventEmitter();
this.valueChange = new EventEmitter();
this.loadMore = new EventEmitter();
this._scrollHeight = '300px';
this.availableOptions = [];
this.activeIndex = -1;
this.allChecked = false;
this.halfChecked = false;
this.showLoading = false;
this.virtualScrollViewportSizeMightChange = false;
this.virtualScrollItemSize = {
sm: 30,
normal: 36,
lg: 50,
space: 4,
};
// 容器边距，虚拟滚动设置高度需考虑上下边距
this.CONTAINER_MARGINS = 12;
this.choose = ({ option, index, event }) => {
if (event) {
event.preventDefault();
event.stopPropagation();
}
if (typeof option === 'object' && Object.keys(option).length === 0) {
this.toggleChange.emit(false);
return;
}
if (this.optionDisabledKey && option[this.optionDisabledKey]) {
return;
}
if (this.optionImmutableKey && option[this.optionImmutableKey]) {
return;
}
if (this.optionGroupKey && option[this.optionGroupKey]) {
return;
}
if (this.multiple) {
const indexOfOption = this.multiItems.findIndex((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((a, b) => a.id - b.id);
}
this.value = this.multiItems.map((item) => item.option);
}
else {
this.value = option;
this.activeIndex = index;
this.selectIndex = index;
if (this.closeScope === 'all') {
this.toggleChange.emit(false);
}
if (this.virtualScrollViewportSizeMightChange) {
// 解决虚拟滚动更新options长度展开前无法获取正确高度影响
setTimeout(() => {
if (this.virtualScrollViewportSizeMightChange && this.virtualScrollViewport) {
this.virtualScrollViewportSizeMightChange = false;
this.virtualScrollViewport.checkViewportSize();
}
}, 0);
}
}
this.valueChange.emit({ value: this.value, multiItems: this.multiItems, option, event, index });
this.setAvailableOptions();
this.setChecked(this.value);
};
}
ngOnInit() {
this.setI18nText();
}
ngOnChanges(changes) {
const { options, value, eventHandle } = changes;
if (options) {
this.availableOptions = this.options;
this.setAvailableOptions();
// 显示数据变更，需要判断全选半选状态
if (this.isSelectAll) {
const selectedItemForFilterOptions = [];
this.multiItems.forEach((item) => {
this.availableOptions.forEach((option) => {
if (item.id === option.id) {
selectedItemForFilterOptions.push(item);
}
});
});
this.setChecked(selectedItemForFilterOptions);
}
if (!this.hasSelectIndex &&
!this.multiple &&
(!this.value || (this.availableOptions && !this.availableOptions.find((option) => option.option === this.value)))) {
this.selectIndex = this.isFiltering && this.availableOptions && this.availableOptions.length > 0 ? 0 : -1;
}
if (this.virtualScroll && this.virtualScrollViewport) {
this.virtualScrollViewportSizeMightChange = true;
this.virtualScrollViewport.checkViewportSize();
}
this.changeDetectorRef.markForCheck();
}
if (value) {
this.setAvailableOptions();
}
if (eventHandle?.currentValue) {
const evt = eventHandle.currentValue;
const { event, type } = evt;
switch (type) {
case 'keydown.esc':
this.onEscKeyup(event);
break;
case 'keydown.ArrowUp':
this.handleKeyUpEvent(event);
break;
case 'keydown.ArrowDown':
this.handleKeyDownEvent(event);
break;
case 'keydown.enter':
this.handleKeyEnterEvent(event);
break;
default:
}
}
}
ngOnDestroy() {
if (this.i18nSubscription) {
this.i18nSubscription.unsubscribe();
}
}
setI18nText() {
this.i18nCommonText = this.i18n.getI18nText().common;
this.i18nSubscription = this.i18n.langChange().subscribe((data) => {
this.i18nCommonText = data.common;
});
}
setAvailableOptions() {
if (!Array.isArray(this.availableOptions)) {
return;
}
const result = this.multiple ? this.value : [this.value];
const _value = this.value ? result : [];
this.availableOptions = this.availableOptions.map((item, index) => item.id >= 0 && item.option
? {
isChecked: _value.findIndex((i) => JSON.stringify(i) === JSON.stringify(item.option)) > -1,
id: item.id,
option: item.option,
}
: { isChecked: _value.findIndex((i) => JSON.stringify(i) === JSON.stringify(item)) > -1, id: index, option: item });
}
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;
}
}
selectAll() {
const mutableOption = this.optionImmutableKey
? this.availableOptions.filter((item) => !item.option[this.optionImmutableKey])
: this.availableOptions;
const selectedImmutableOption = this.optionImmutableKey ? this.multiItems.filter((item) => item.option[this.optionImmutableKey]) : [];
if (mutableOption && mutableOption.length > this.multiItems.length - selectedImmutableOption.length) {
mutableOption.forEach((item) => {
const indexOfOption = this.multiItems.findIndex((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((item) => item.option);
this.valueChange.emit({ value: this.value, multiItems: this.multiItems });
this.setChecked(this.value);
}
trackByFn(index, item) {
return index;
}
onEscKeyup(event) {
if (event) {
event.stopPropagation();
}
this.toggleChange.emit(false);
}
handleKeyUpEvent(event) {
if (event) {
event.preventDefault();
event.stopPropagation();
}
this.selectIndex = this.selectIndex === 0 || this.selectIndex === -1 ? this.availableOptions.length - 1 : this.selectIndex - 1;
this.scrollToActive();
}
handleKeyDownEvent(event) {
if (event) {
event.preventDefault();
event.stopPropagation();
}
this.selectIndex = this.selectIndex === this.availableOptions.length - 1 ? 0 : this.selectIndex + 1;
this.scrollToActive();
}
handleKeyEnterEvent(event) {
if (event) {
event.preventDefault();
event.stopPropagation();
}
const item = this.availableOptions[this.selectIndex];
if (item) {
this.choose({ option: item.option, index: item.id, event: null });
}
else if (this.closeScope === 'all') {
this.toggleChange.emit(false);
}
}
scrollToActive() {
const that = this;
setTimeout(() => {
try {
const selectIndex = that.selectIndex + (that.isSelectAll ? 1 : 0); // 多了个全选会导致问题，index需要加1
const scrollPane = that.dropdownUl.nativeElement.children[selectIndex];
if (scrollPane.scrollIntoViewIfNeeded) {
scrollPane.scrollIntoViewIfNeeded(false);
}
else {
const containerInfo = that.dropdownUl.nativeElement.getBoundingClientRect();
const elementInfo = scrollPane.getBoundingClientRect();
if (elementInfo.bottom > containerInfo.bottom || elementInfo.top < containerInfo.top) {
scrollPane.scrollIntoView(false);
}
}
}
catch (e) { }
});
}
resetIndex(resetSelectIndex = true) {
this.selectIndex = resetSelectIndex ? -1 : 0;
this.activeIndex = -1;
this.changeDetectorRef.markForCheck();
}
showSelectAll() {
return this.isSelectAll && this.multiple && this.availableOptions.length > 0;
}
getVirtualScrollHeight(len, size) {
if (len > 0) {
let height = (this.templateItemSize || this.virtualScrollItemSize[size || 'normal']) * len + this.virtualScrollItemSize.space * (len - 1);
if (this.isSelectAll && this.multiple) {
height += this.virtualScrollItemSize[size ? size : 'normal'] + this.virtualScrollItemSize.space;
}
const scrollHeight = parseInt(this.scrollHeight, 10);
this.scrollHeightNum = height > scrollHeight ? scrollHeight : height;
return `${this.scrollHeightNum + this.CONTAINER_MARGINS * 2}px`;
}
}
loadMoreEvent(event) {
this.showLoading = true;
this.loadMore.emit({ instance: this, event });
}
loadStart() {
this.showLoading = true;
this.changeDetectorRef.detectChanges();
}
loadFinish() {
this.showLoading = false;
this.changeDetectorRef.detectChanges();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleMenuListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ToggleMenuListComponent, selector: "d-toggle-menu-list", inputs: { options: "options", optionDisabledKey: "optionDisabledKey", optionImmutableKey: "optionImmutableKey", optionGroupKey: "optionGroupKey", size: "size", keyword: "keyword", isFiltering: "isFiltering", enableLazyLoad: "enableLazyLoad", virtualScroll: "virtualScroll", listItemTemplate: "listItemTemplate", loadingTemplateRef: "loadingTemplateRef", noResultItemTemplate: "noResultItemTemplate", customViewTemplate: "customViewTemplate", customViewDirection: "customViewDirection", templateItemSize: "templateItemSize", scrollHeight: "scrollHeight", selectIndex: "selectIndex", hasSelectIndex: "hasSelectIndex", multiple: "multiple", multiItems: "multiItems", value: "value", isSelectAll: "isSelectAll", keepMultipleOrder: "keepMultipleOrder", eventHandle: "eventHandle", closeScope: "closeScope" }, outputs: { toggleChange: "toggleChange", valueChange: "valueChange", loadMore: "loadMore" }, viewQueries: [{ propertyName: "dropdownUl", first: true, predicate: ["dropdownUl"], descendants: true }, { propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul\n class=\"devui-dropdown-menu-wrap {{ size ? 'devui-dropdown-menu-' + size : '' }}\"\n dLoading\n positionType=\"relative\"\n [showLoading]=\"showLoading\"\n [message]=\"i18nCommonText?.loading\"\n [loadingTemplateRef]=\"loadingTemplateRef\"\n [backdrop]=\"true\"\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n>\n <ng-content></ng-content>\n <ul\n #dropdownUl\n *ngIf=\"!virtualScroll || enableLazyLoad; else scrollViewTpl\"\n class=\"devui-select-list-unstyled devui-scrollbar\"\n [ngStyle]=\"{ 'max-height': scrollHeight, width: '100%' }\"\n dLazyLoad\n [enableLazyLoad]=\"enableLazyLoad\"\n (loadMore)=\"loadMoreEvent($event)\"\n >\n <ng-template [ngTemplateOutlet]=\"selectAllTpl\"></ng-template>\n <ng-container *ngFor=\"let item of availableOptions; let index = index; trackBy: trackByFn\">\n <!--list-item \u5355\u4E2A\u9009\u9879\u6A21\u677F-->\n <ng-template\n [ngTemplateOutlet]=\"listItemTemplate\"\n [ngTemplateOutletContext]=\"{\n item: item,\n index: index,\n selectIndex: selectIndex,\n activeIndex: activeIndex,\n choose: choose\n }\"\n ></ng-template>\n </ng-container>\n <div *ngIf=\"availableOptions?.length === 0\" class=\"devui-no-data-tip\">\n <ng-container *ngIf=\"noResultItemTemplate; else noResultDefaultTpl\">\n <ng-template [ngTemplateOutlet]=\"noResultItemTemplate\" [ngTemplateOutletContext]=\"{ options: options }\"></ng-template>\n </ng-container>\n </div>\n </ul>\n</ul>\n<ng-container *ngIf=\"customViewTemplate\">\n <div class=\"devui-select-custom-area\">\n <ng-template [ngTemplateOutlet]=\"customViewTemplate\" [ngTemplateOutletContext]=\"{ $implicit: this, choose: choose }\"></ng-template>\n </div>\n</ng-container>\n\n<!--\u865A\u62DF\u6EDA\u52A8\u6A21\u677F-->\n<ng-template #scrollViewTpl>\n <cdk-virtual-scroll-viewport\n [ngStyle]=\"{\n height: getVirtualScrollHeight(availableOptions.length, size),\n width: '100%',\n 'max-height': scrollHeight\n }\"\n [itemSize]=\"realVirtualScrollItemSize\"\n [minBufferPx]=\"minBuffer\"\n [maxBufferPx]=\"maxBuffer\"\n class=\"viewport-wrapper devui-select-list-unstyled devui-scrollbar\"\n #dropdownUl\n >\n <ng-template [ngTemplateOutlet]=\"selectAllTpl\"></ng-template>\n <ng-container *cdkVirtualFor=\"let item of availableOptions; let index = index; trackBy: trackByFn\">\n <ng-template\n [ngTemplateOutlet]=\"listItemTemplate\"\n [ngTemplateOutletContext]=\"{\n item: item,\n index: index,\n selectIndex: selectIndex,\n activeIndex: activeIndex,\n choose: choose\n }\"\n ></ng-template>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n</ng-template>\n\n<!--\u5168\u9009\u6A21\u677F-->\n<ng-template #selectAllTpl>\n <li class=\"devui-dropdown-item\" *ngIf=\"showSelectAll()\" (click)=\"selectAll()\">\n <span>\n <d-checkbox [label]=\"i18nCommonText.checkAll\" [isShowTitle]=\"false\" [halfchecked]=\"halfChecked\" [(ngModel)]=\"allChecked\"></d-checkbox>\n </span>\n </li>\n</ng-template>\n\n<!--\u65E0\u5185\u5BB9\u6A21\u677F-->\n<ng-template #noResultDefaultTpl>{{ isFiltering ? i18nCommonText?.noRecordsFound : i18nCommonText?.noData }}</ng-template>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host li{font-size:var(--devui-font-size-lg, 14px);min-height:40px;line-height:28px;padding:8px 12px;width:100%;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border:0;background-color:transparent;color:var(--devui-text, #191919);cursor:pointer}:host li:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3);color:var(--devui-list-item-hover-text, #000000)}:host ::ng-deep d-toggle-menu-search .devui-toggle-menu-search>input{background-color:var(--devui-embed-search-bg, #f2f2f3)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.CheckBoxComponent, selector: "d-checkbox", inputs: ["name", "label", "cssClass", "color", "disabled", "isShowTitle", "title", "labelTemplate", "halfchecked", "showAnimation", "showGlowStyle", "beforeChange"], outputs: ["change"] }, { kind: "directive", type: i2.LazyLoadDirective, selector: "[dLazyLoad]", inputs: ["enableLazyLoad", "contentMode", "target", "imgLoadSrc", "direction"], outputs: ["loadMore"] }, { kind: "directive", type: i6.LoadingDirective, selector: "[dLoading]", inputs: ["backdrop", "message", "positionType", "showLoading", "view", "zIndex", "loading", "loadingStyle", "loadingTemplateRef"], exportAs: ["dLoading"] }, { kind: "directive", type: i7.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i7.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i7.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], animations: [fadeInOut], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleMenuListComponent, decorators: [{
type: Component,
args: [{ selector: 'd-toggle-menu-list', animations: [fadeInOut], changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, template: "<ul\n class=\"devui-dropdown-menu-wrap {{ size ? 'devui-dropdown-menu-' + size : '' }}\"\n dLoading\n positionType=\"relative\"\n [showLoading]=\"showLoading\"\n [message]=\"i18nCommonText?.loading\"\n [loadingTemplateRef]=\"loadingTemplateRef\"\n [backdrop]=\"true\"\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n>\n <ng-content></ng-content>\n <ul\n #dropdownUl\n *ngIf=\"!virtualScroll || enableLazyLoad; else scrollViewTpl\"\n class=\"devui-select-list-unstyled devui-scrollbar\"\n [ngStyle]=\"{ 'max-height': scrollHeight, width: '100%' }\"\n dLazyLoad\n [enableLazyLoad]=\"enableLazyLoad\"\n (loadMore)=\"loadMoreEvent($event)\"\n >\n <ng-template [ngTemplateOutlet]=\"selectAllTpl\"></ng-template>\n <ng-container *ngFor=\"let item of availableOptions; let index = index; trackBy: trackByFn\">\n <!--list-item \u5355\u4E2A\u9009\u9879\u6A21\u677F-->\n <ng-template\n [ngTemplateOutlet]=\"listItemTemplate\"\n [ngTemplateOutletContext]=\"{\n item: item,\n index: index,\n selectIndex: selectIndex,\n activeIndex: activeIndex,\n choose: choose\n }\"\n ></ng-template>\n </ng-container>\n <div *ngIf=\"availableOptions?.length === 0\" class=\"devui-no-data-tip\">\n <ng-container *ngIf=\"noResultItemTemplate; else noResultDefaultTpl\">\n <ng-template [ngTemplateOutlet]=\"noResultItemTemplate\" [ngTemplateOutletContext]=\"{ options: options }\"></ng-template>\n </ng-container>\n </div>\n </ul>\n</ul>\n<ng-container *ngIf=\"customViewTemplate\">\n <div class=\"devui-select-custom-area\">\n <ng-template [ngTemplateOutlet]=\"customViewTemplate\" [ngTemplateOutletContext]=\"{ $implicit: this, choose: choose }\"></ng-template>\n </div>\n</ng-container>\n\n<!--\u865A\u62DF\u6EDA\u52A8\u6A21\u677F-->\n<ng-template #scrollViewTpl>\n <cdk-virtual-scroll-viewport\n [ngStyle]=\"{\n height: getVirtualScrollHeight(availableOptions.length, size),\n width: '100%',\n 'max-height': scrollHeight\n }\"\n [itemSize]=\"realVirtualScrollItemSize\"\n [minBufferPx]=\"minBuffer\"\n [maxBufferPx]=\"maxBuffer\"\n class=\"viewport-wrapper devui-select-list-unstyled devui-scrollbar\"\n #dropdownUl\n >\n <ng-template [ngTemplateOutlet]=\"selectAllTpl\"></ng-template>\n <ng-container *cdkVirtualFor=\"let item of availableOptions; let index = index; trackBy: trackByFn\">\n <ng-template\n [ngTemplateOutlet]=\"listItemTemplate\"\n [ngTemplateOutletContext]=\"{\n item: item,\n index: index,\n selectIndex: selectIndex,\n activeIndex: activeIndex,\n choose: choose\n }\"\n ></ng-template>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n</ng-template>\n\n<!--\u5168\u9009\u6A21\u677F-->\n<ng-template #selectAllTpl>\n <li class=\"devui-dropdown-item\" *ngIf=\"showSelectAll()\" (click)=\"selectAll()\">\n <span>\n <d-checkbox [label]=\"i18nCommonText.checkAll\" [isShowTitle]=\"false\" [halfchecked]=\"halfChecked\" [(ngModel)]=\"allChecked\"></d-checkbox>\n </span>\n </li>\n</ng-template>\n\n<!--\u65E0\u5185\u5BB9\u6A21\u677F-->\n<ng-template #noResultDefaultTpl>{{ isFiltering ? i18nCommonText?.noRecordsFound : i18nCommonText?.noData }}</ng-template>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host li{font-size:var(--devui-font-size-lg, 14px);min-height:40px;line-height:28px;padding:8px 12px;width:100%;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border:0;background-color:transparent;color:var(--devui-text, #191919);cursor:pointer}:host li:hover{background-color:var(--devui-list-item-hover-bg, #f2f2f3);color:var(--devui-list-item-hover-text, #000000)}:host ::ng-deep d-toggle-menu-search .devui-toggle-menu-search>input{background-color:var(--devui-embed-search-bg, #f2f2f3)}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.I18nService }], propDecorators: { options: [{
type: Input
}], optionDisabledKey: [{
type: Input
}], optionImmutableKey: [{
type: Input
}], optionGroupKey: [{
type: Input
}], size: [{
type: Input
}], keyword: [{
type: Input
}], isFiltering: [{
type: Input
}], enableLazyLoad: [{
type: Input
}], virtualScroll: [{
type: Input
}], listItemTemplate: [{
type: Input
}], loadingTemplateRef: [{
type: Input
}], noResultItemTemplate: [{
type: Input
}], customViewTemplate: [{
type: Input
}], customViewDirection: [{
type: Input
}], templateItemSize: [{
type: Input
}], scrollHeight: [{
type: Input
}], selectIndex: [{
type: Input
}], hasSelectIndex: [{
type: Input
}], multiple: [{
type: Input
}], multiItems: [{
type: Input
}], value: [{
type: Input
}], isSelectAll: [{
type: Input
}], keepMultipleOrder: [{
type: Input
}], eventHandle: [{
type: Input
}], closeScope: [{
type: Input
}], toggleChange: [{
type: Output
}], valueChange: [{
type: Output
}], loadMore: [{
type: Output
}], dropdownUl: [{
type: ViewChild,
args: ['dropdownUl']
}], virtualScrollViewport: [{
type: ViewChild,
args: [CdkVirtualScrollViewport]
}] } });
class ToggleMenuContainerComponent {
set isOpen(value) {
if (this._isOpen === value) {
// 如果toggle-container自身触发开关，父级组件的isOpen随toggleChange改变，会通过input再次返回导致重复触发，通过值是否变化屏蔽该次触发
return;
}
this._isOpen = value;
this.toggleChange.emit(value);
this.setDocumentClickListener();
if (this.selectWrapper) {
this.dropDownWidth = this.width ? this.width : this.selectWrapper.nativeElement.offsetWidth;
}
if (value) {
addClassToOrigin(this.selectWrapper);
setTimeout(() => {
this.startAnimation = true;
this.changeDetectorRef.detectChanges();
});
}
else {
removeClassFromOrigin(this.selectWrapper);
}
}
get isOpen() {
return this._isOpen;
}
constructor(doc, element, windowRef, ngZone, renderer, changeDetectorRef, devConfigService, scrollStrategyOption) {
this.doc = doc;
this.element = element;
this.windowRef = windowRef;
this.ngZone = ngZone;
this.renderer = renderer;
this.changeDetectorRef = changeDetectorRef;
this.devConfigService = devConfigService;
this.scrollStrategyOption = scrollStrategyOption;
/**
* 【可选】是否appendToBody
*/
this.appendToBody = false;
this.appendToBodyDirections = ['rightDown', 'leftDown', 'rightUp', 'leftUp'];
/**
* 【可选】是否禁用下拉框
*/
this.disabled = false;
/**
* 【可选】暂停使用下拉功能，不添加禁用效果
*/
this.paused = false;
/**
* 【可选】是否展示动效
*/
this.showAnimation = true;
/**
* 【可选】是否支持聚焦自动展开下拉
*/
this.toggleOnFocus = false;
this.closeScope = 'all';
this.direction = 'down';
/**
* select下拉toggle事件，值为true或false
*/
this.toggleChange = new EventEmitter();
this.passEvent = new EventEmitter();
this._isOpen = false;
this.isInit = true;
this.isMouseEvent = false;
this.startAnimation = false;
this.labelMinHeight = 20; // position.top小于20px时候，表示光标在第一行
this.popDirection = 'bottom';
this.menuPosition = 'bottom';
this.onDocumentClick = (event) => {
if (this.listInstance && this.isOpen && this.selectBoxElement && !this.selectBoxElement.nativeElement.contains(event.target)) {
this.isOpen = false;
this.listInstance.selectIndex = this.listInstance.activeIndex ? this.listInstance.activeIndex : -1;
this.changeDetectorRef.detectChanges();
}
};
this.document = this.doc;
this.scrollStrategy = this.scrollStrategyOption.reposition();
}
ngOnInit() {
this.isInit = false;
this.setPositions();
}
ngOnChanges(changes) {
const { appendToBodyDirections, appendToBodyScrollStrategy } = changes;
const globalScrollStrategy = this.devConfigService.getConfigForApi('appendToBodyScrollStrategy');
if (appendToBodyDirections) {
this.setPositions();
}
if (this.appendToBodyScrollStrategy && (appendToBodyScrollStrategy || globalScrollStrategy)) {
const func = this.scrollStrategyOption[this.appendToBodyScrollStrategy];
this.scrollStrategy = func();
}
}
animationEnd() {
if (!this.isOpen && this.selectMenuElement && this.showAnimation) {
const targetElement = this.selectMenuElement.nativeElement;
this.startAnimation = false;
setTimeout(() => {
// 动画会覆盖导致display还是block， 所以要等动画覆盖完
this.renderer.setStyle(targetElement, 'display', 'none');
});
}
}
setPositions() {
if (this.appendToBodyDirections && this.appendToBodyDirections.length > 0) {
this.overlayPositions = this.appendToBodyDirections
.map((position) => {
if (typeof position === 'string') {
return AppendToBodyDirectionsConfig[position];
}
else {
return position;
}
})
.filter((position) => position !== undefined);
}
else {
this.overlayPositions = undefined;
}
}
updatePosition() {
if (this.appendToBody) {
setTimeout(() => {
if (this.connectedOverlay && this.connectedOverlay.overlayRef) {
this.connectedOverlay.overlayRef.updatePosition();
}
});
}
}
setPassEvent(event, type) {
if (this.isOpen || this.paused) {
this.passEvent.emit({ event, type });
}
}
onPositionChange(position) {
this.menuPosition = position.connectionPair.originY;
}
setDocumentClickListener() {
this.ngZone.runOutsideAngular(() => {
if (this.isOpen) {
this.document.addEventListener('click', this.onDocumentClick);
}
else {
this.document.removeEventListener('click', this.onDocumentClick);
}
});
}
// mousedown mouseup解决focus与click冲突问题
setMouseEventTrue(event) {
this.isMouseEvent = true;
}
setMouseEventFalse(event) {
this.isMouseEvent = false;
}
autoToggle(event) {
event.preventDefault();
event.stopPropagation();
if (this.toggleOnFocus && !this.disabled && !this.paused && !this.isOpen && !this.isMouseEvent) {
this.toggle();
}
}
toggle(event) {
if (this.disabled || this.paused) {
this.isOpen = false;
return;
}
if (!this.isOpen) {
if (!this.appendToBody) {
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 = direction;
}
else {
this.updateCdkConnectedOverlayOrigin();
}
}
else {
if (!this.showAnimation) {
this.startAnimation = false;
}
if (this.closeScope === 'none' || (this.closeScope === 'blank' && this.element.nativeElement.contains(event.target))) {
return;
}
}
this.isOpen = !this.isOpen;
}
isBottomRectEnough() {
const selectMenuElement = this.selectWrapper.nativeElement;
const selectInputElement = this.selectBoxElement;
const displayStyle = selectMenuElement.style.display || window.getComputedStyle(selectMenuElement).display;
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)');
}
const elementHeight = selectMenuElement.offsetHeight;
const bottomDistance = this.windowRef.innerHeight - selectInputElement.nativeElement.getBoundingClientRect().bottom;
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;
}
updateCdkConnectedOverlayOrigin() {
if (this.selectWrapper?.nativeElement) {
this.cdkConnectedOverlayOrigin = new CdkOverlayOrigin(formWithDropDown(this.selectWrapper) || this.selectWrapper.nativeElement);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleMenuContainerComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i1$2.WindowRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i2.DevConfigService }, { token: i3$1.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ToggleMenuContainerComponent, selector: "d-toggle-menu-container", inputs: { isOpen: "isOpen", appendToBody: "appendToBody", appendToBodyDirections: "appendToBodyDirections", appendToBodyScrollStrategy: "appendToBodyScrollStrategy", width: "width", size: "size", overview: "overview", position: "position", disabled: "disabled", paused: "paused", showAnimation: "showAnimation", toggleOnFocus: "toggleOnFocus", closeScope: "closeScope", direction: "direction", selectWrapper: "selectWrapper" }, outputs: { toggleChange: "toggleChange", passEvent: "passEvent" }, host: { listeners: { "mousedown": "setMouseEventTrue($event)", "mouseup": "setMouseEventFalse($event)" } }, queries: [{ propertyName: "listInstance", first: true, predicate: ToggleMenuListComponent, descendants: true }], viewQueries: [{ propertyName: "selectBoxElement", first: true, predicate: ["selectBox"], descendants: true, static: true }, { propertyName: "selectMenuElement", first: true, predicate: ["selectMenu"], descendants: true, static: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n #selectBox\r\n class=\"devui-toggle-menu-container devui-toggle-menu{{ size ? '-' + size : '' }} {{ disabled ? 'disabled' : '' }}\"\r\n [tabindex]=\"0\"\r\n (click)=\"toggle($event)\"\r\n (focus)=\"autoToggle($event); setPassEvent($event, 'focus')\"\r\n (blur)=\"setPassEvent($event, 'blur')\"\r\n (keydown.esc)=\"setPassEvent($event, 'keydown.esc')\"\r\n (keydown.ArrowUp)=\"setPassEvent($event, 'keydown.ArrowUp')\"\r\n (keydown.ArrowDown)=\"setPassEvent($event, 'keydown.ArrowDown')\"\r\n (keydown.enter)=\"setPassEvent($event, 'keydown.enter')\"\r\n (keydown)=\"setPassEvent($event, 'keydown')\"\r\n>\r\n <ng-content></ng-content>\r\n <ng-container *ngIf=\"appendToBody; else selectDropdownTpl\">\r\n <ng-template\r\n cdk-connected-overlay\r\n [cdkConnectedOverlayOrigin]=\"cdkConnectedOverlayOrigin\"\r\n [cdkConnectedOverlayWidth]=\"dropDownWidth\"\r\n [cdkConnectedOverlayOpen]=\"isOpen\"\r\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\r\n (positionChange)=\"onPositionChange($event)\"\r\n (backdropClick)=\"isOpen = false\"\r\n (detach)=\"isOpen && (isOpen = false)\"\r\n >\r\n <ng-template [ngTemplateOutlet]=\"selectDropdownTpl\"></ng-template>\r\n </ng-template>\r\n </ng-container>\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': listInstance?.customViewDirection === 'right',\r\n 'devui-custom-left': listInstance?.customViewDirection === 'left',\r\n 'devui-custom-top': listInstance?.customViewDirection === 'top',\r\n 'devui-dropdown-menu-multiple': listInstance?.multiple\r\n }\"\r\n [@fadeInOut]=\"isOpen && startAnimation ? (appendToBody ? menuPosition : popDirection) : 'void'\"\r\n (@fadeInOut.done)=\"animationEnd()\"\r\n [@.disabled]=\"!showAnimation\"\r\n >\r\n <ng-content select=\"d-toggle-menu-list\"></ng-content>\r\n </div>\r\n </ng-template>\r\n</div>\r\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}:host .devui-toggle-menu-container{padding:0;width:100%;height:auto;outline:none;display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-radius:var(--devui-border-radius, 2px);border:solid 1px var(--devui-form-control-line, #dbdbdb);background-color:var(--devui-base-bg, #ffffff)}:host .devui-toggle-menu-container.disabled{color:var(--devui-disabled-text, #c2c2c2);border-color:var(--devui-disabled-line, #e6e6e6);background-color:var(--devui-disabled-bg, #f3f3f3)}:host ::ng-deep d-toggle-menu-label{max-width:100%}:host ::ng-deep .devui-toggle-menu{font-size:var(--devui-font-size-md, 12px);min-height:26px}:host ::ng-deep .devui-toggle-menu d-toggle-menu-input,:host ::ng-deep .devui-toggle-menu d-toggle-menu-placeholder,:host ::ng-deep .devui-toggle-menu d-toggle-menu-search{font-size:var(--devui-font-size-md, 12px);min-height:26px;line-height:18px}:host ::ng-deep .devui-toggle-menu-lg{font-size:var(--devui-font-size-lg, 14px);min-height:46px}:host ::ng-deep .devui-toggle-menu-lg d-toggle-menu-input,:host ::ng-deep .devui-toggle-menu-lg d-toggle-menu-placeholder,:host ::ng-deep .devui-toggle-menu-lg d-toggle-menu-search{font-size:var(--devui-font-size-lg, 14px);min-height:46px;line-height:46px}:host ::ng-deep .devui-toggle-menu-lg d-toggle-menu-list-item{font-size:var(--devui-font-size-lg, 14px);min-height:40px;line-height:28px}:host ::ng-deep .devui-toggle-menu-sm{font-size:var(--devui-font-size-sm, 12px);min-height:24px}:host ::ng-deep .devui-toggle-menu-sm d-toggle-menu-input,:host ::ng-deep .devui-toggle-menu-sm d-toggle-menu-placeholder,:host ::ng-deep .devui-toggle-menu-sm d-toggle-menu-search,:host ::ng-deep .devui-toggle-menu-sm d-toggle-menu-list-item{font-size:var(--devui-font-size-sm, 12px);min-height:24px;line-height:14px}:host ::ng-deep .devui-toggle-menu-sm d-toggle-menu-list-item{min-height:26px}.devui-dropdown-menu{width:100%;padding-bottom:0}.devui-dropdown-menu:not(.devui-dropdown-menu-cdk){width:calc(100% + 2px);left:-1px;margin:4px 0}.devui-dropdown-menu-cdk{position:static;display:block;width:100%}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk{font-size:var(--devui-font-size-md, 12px);min-height:26px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk d-toggle-menu-input,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk d-toggle-menu-placeholder,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk d-toggle-menu-search{font-size:var(--devui-font-size-md, 12px);min-height:26px;line-height:18px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-lg{font-size:var(--devui-font-size-lg, 14px);min-height:46px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-lg d-toggle-menu-input,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-lg d-toggle-menu-placeholder,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-lg d-toggle-menu-search{font-size:var(--devui-font-size-lg, 14px);min-height:46px;line-height:46px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-lg d-toggle-menu-list-item{font-size:var(--devui-font-size-lg, 14px);min-height:40px;line-height:28px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-sm{font-size:var(--devui-font-size-sm, 12px);min-height:24px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-sm d-toggle-menu-input,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-sm d-toggle-menu-placeholder,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-sm d-toggle-menu-search,::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-sm d-toggle-menu-list-item{font-size:var(--devui-font-size-sm, 12px);min-height:24px;line-height:14px}::ng-deep .devui-dropdown-menu.devui-dropdown-menu-cdk-sm d-toggle-menu-list-item{min-height:26px}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list,::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list,::ng-deep .devui-dropdown-menu.devui-custom-top d-toggle-menu-list{width:100%;display:flex!important}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list .devui-dropdown-menu-wrap,::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list .devui-dropdown-menu-wrap,::ng-deep .devui-dropdown-menu.devui-custom-top d-toggle-menu-list .devui-dropdown-menu-wrap{display:inline-block}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list .devui-select-custom-area,::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list .devui-select-custom-area,::ng-deep .devui-dropdown-menu.devui-custom-top d-toggle-menu-list .devui-select-custom-area{display:inline-block;overflow:auto}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list:not(.devui-custom-top)>.devui-dropdown-menu-wrap,::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list:not(.devui-custom-top)>.devui-dropdown-menu-wrap,::ng-deep .devui-dropdown-menu.devui-custom-top d-toggle-menu-list:not(.devui-custom-top)>.devui-dropdown-menu-wrap{width:calc(50% - 1px)}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list:not(.devui-custom-top)>.devui-select-custom-area,::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list:not(.devui-custom-top)>.devui-select-custom-area,::ng-deep .devui-dropdown-menu.devui-custom-top d-toggle-menu-list:not(.devui-custom-top)>.devui-select-custom-area{width:50%}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list:not(.devui-custom-top)>.devui-select-custom-area>.devui-select-custom-area:before,::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list:not(.devui-custom-top)>.devui-select-custom-area>.devui-select-custom-area:before,::ng-deep .devui-dropdown-menu.devui-custom-top d-toggle-menu-list:not(.devui-custom-top)>.devui-select-custom-area>.devui-select-custom-area:before{display:none}::ng-deep .devui-dropdown-menu.devui-custom-top{flex-direction:column-reverse}::ng-deep .devui-dropdown-menu.devui-custom-left d-toggle-menu-list .devui-select-custom-area{border-right:1px solid var(--devui-dividing-line, #f0f0f0);order:-1}::ng-deep .devui-dropdown-menu.devui-custom-right d-toggle-menu-list .devui-select-custom-area{border-left:1px solid var(--devui-dividing-line, #f0f0f0)}::ng-deep .devui-dropdown-menu.devui-custom-top>.devui-select-custom-area{border-bottom:1px solid var(--devui-dividing-line, #f0f0f0)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "