ng-devui
Version:
DevUI components based on Angular
401 lines • 132 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, Output, TemplateRef, ViewChild, } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { DropDownAppendToBodyComponent, DropDownDirective } from 'ng-devui/dropdown';
import { I18nService } from 'ng-devui/i18n';
import { DevConfigService, WithConfig } from 'ng-devui/utils';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, filter, takeUntil } from 'rxjs/operators';
import { CascaderService } from './cascader.service';
import * as i0 from "@angular/core";
import * as i1 from "./cascader.service";
import * as i2 from "ng-devui/i18n";
import * as i3 from "ng-devui/utils";
import * as i4 from "@angular/common";
import * as i5 from "@angular/forms";
import * as i6 from "ng-devui/dropdown";
import * as i7 from "ng-devui/tags";
import * as i8 from "./cascader-li.component";
const DEBOUNCE_TIME = 200;
export class CascaderComponent {
set loadChildrenFn(fn) {
this.isLazyLoad = !!fn;
if (fn) {
this.cascaderSrv.loadChildrenFn = fn;
}
}
get hasGlowStyle() {
return this.showGlowStyle;
}
get columnList() {
return this.cascaderSrv.columnList;
}
get searchResultList() {
return this.cascaderSrv.searchResultList;
}
constructor(cascaderSrv, i18n, devConfigService) {
this.cascaderSrv = cascaderSrv;
this.i18n = i18n;
this.devConfigService = devConfigService;
this.options = [];
this.width = 200;
this.placeholder = '';
this.trigger = 'hover';
this.disabled = false;
this.multiple = false;
this.showPath = false;
this.allowClear = false;
this.allowSearch = false;
this.canSelectParent = false;
this.checkboxRelation = { upward: true, downward: true };
this.dropdownPanelClass = '';
this.appendToBody = true;
this.tagMaxWidth = '200px';
this.showAnimation = true;
this.styleType = 'default';
this.toggleEvent = new EventEmitter();
this.showGlowStyle = true;
this.subMenuDirections = [
{
originX: 'start',
originY: 'bottom',
overlayX: 'start',
overlayY: 'top',
offsetX: 0,
},
{
originX: 'start',
originY: 'top',
overlayX: 'start',
overlayY: 'bottom',
offsetX: 0,
},
];
this.unsubscribe$ = new Subject();
this.searchValueChange = new Subject();
this.multipleValueList = [];
this.lazyloadValue = [];
this.showSearchInput = false;
this.onChange = Function.prototype;
this.onTouched = Function.prototype;
}
// 获取整颗树的公共方法
getOptionTree() {
return this.cascaderSrv.options;
}
ngOnInit() {
this.dropdownWidth = this.dropdownWidth ? this.dropdownWidth : this.width;
this.cascaderSrv.canSelectParent = this.canSelectParent;
this.cascaderSrv.initOptions(this.options);
this.cascaderSrv.isMultiple = this.multiple;
this.cascaderSrv.isLazyLoad = this.isLazyLoad;
this.cascaderSrv.checkboxRelation = this.checkboxRelation;
this.initObservale();
this.initI18n();
}
ngOnChanges(changes) {
const { options, canSelectParent } = changes;
if (options && !options.firstChange) {
this.cascaderSrv.initOptions(this.options);
}
else if (canSelectParent && !canSelectParent.firstChange) {
this.cascaderSrv.canSelectParent = this.canSelectParent;
}
}
initI18n() {
this.i18nCommonText = this.i18n.getI18nText().common;
this.i18nSubscription = this.i18n.langChange().subscribe((data) => {
this.i18nCommonText = data.common;
});
}
valueChanges(value) {
this.searchValueChange.next(value);
}
chooseSearchResult(option) {
if (option.checked) {
return;
}
if (this.multiple) {
// 多选模式下更新数据后需要刷新dropdown位置和重新聚焦input
option.checked = true;
this.writeValue([...this.cascaderSrv.multipleValue, option.valueList]);
this.onChange(this.cascaderSrv.multipleValue);
this.mainDropdown.updateCdkConnectedOverlayOrigin();
if (this.innerInput) {
this.innerInput.nativeElement.focus();
}
}
else {
this.writeValue(option.valueList);
this.onChange(option.valueList);
this.mainDropdown.isOpen = false;
}
}
initObservale() {
this.cascaderSrv.closeMianDropdown.pipe(takeUntil(this.unsubscribe$)).subscribe((res) => {
if (this.mainDropdown) {
this.mainDropdown.isOpen = false;
}
});
this.cascaderSrv.currentValueChange.pipe(takeUntil(this.unsubscribe$)).subscribe((res) => {
this.writeValue(res);
this.onChange(res);
});
this.cascaderSrv.openDrawer.pipe(takeUntil(this.unsubscribe$)).subscribe((res) => {
this.rePosition();
});
if (this.multiple) {
this.cascaderSrv.updateTagList.pipe(takeUntil(this.unsubscribe$)).subscribe((res) => {
const targetIndex = this.multipleValueList.findIndex((t) => t.value === res.option.value);
if (res.isAdd) {
if (targetIndex === -1) {
this.multipleValueList.push(res.option);
this.updateMultipleValuePathList();
}
}
else if (targetIndex !== -1) {
this.multipleValueList.splice(targetIndex, 1);
}
if (res.isEmit) {
this.onChange(this.cascaderSrv.currentMultipleValue);
}
// 当taglist变化导致input高度变化时，更新相对位置
setTimeout(() => {
this.mainDropdown.updateCdkConnectedOverlayOrigin();
});
});
}
if (this.allowSearch) {
this.searchValueChange
.pipe(takeUntil(this.unsubscribe$), debounceTime(DEBOUNCE_TIME), distinctUntilChanged(), filter((t) => t !== ''))
.subscribe((value) => {
clearTimeout(this.timer);
if (this.mainDropdown && !this.mainDropdown.isOpen) {
this.mainDropdown.isOpen = true;
}
if (this.multiple && this.innerInput) {
this.innerInput.nativeElement.focus();
}
this.cascaderSrv.searchResultList = [];
this.cascaderSrv.searchByString(value);
this.showSearchPanel = true;
});
}
if (this.isLazyLoad) {
this.cascaderSrv.updateShowText.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
if (this.multiple) {
this.multipleValueList = this.getMultipleValueFromValueList(this.lazyloadValue);
this.cascaderSrv.multipleValue = this.lazyloadValue;
}
else {
this.showTextValue = this.showPath
? this.getPathLabelFormValue(this.cascaderSrv._currentValue)
: this.getLabelFromValue(this.cascaderSrv._currentValue);
}
});
}
}
deleteTag(tagEvent, option) {
tagEvent.event.stopPropagation();
this.cascaderSrv.updateOptionCheckedStatus(option.value, false, this.checkboxRelation.upward, this.checkboxRelation.downward);
this.multipleValueList = this.multipleValueList.filter((t) => t.value !== option.value);
this.onChange(this.cascaderSrv.currentMultipleValue);
// 当taglist变化导致input高度变化时，更新相对位置
setTimeout(() => {
this.mainDropdown.updateCdkConnectedOverlayOrigin();
});
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
writeValue(value) {
if (!this.multiple) {
if (!value) {
this.showTextValue = '';
}
else {
this.showTextValue = this.showPath
? this.getPathLabelFormValue(value)
: this.getLabelFromValue(value);
this.cascaderSrv._currentValue = value;
this.cascaderSrv.updateOptionByValue();
}
}
else {
if (!value) {
this.multipleValueList = [];
}
else {
this.cascaderSrv.currentMultipleValue = value;
this.lazyloadValue = value;
this.multipleValueList = this.getMultipleValueFromValueList(value);
this.updateMultipleValuePathList();
}
}
}
updateMultipleValuePathList() {
if (!this.showPath) {
return;
}
const valueList = this.cascaderSrv.currentMultipleValue;
valueList.forEach((item, index) => {
const value = item[item.length - 1];
const target = this.multipleValueList.find((t) => t.value === value);
if (target) {
target.pathLabel = this.getPathLabelFormValue(item);
}
});
}
// 从路径数组中获取所有tag的值，并让对应checkbox激活
getMultipleValueFromValueList(valueList) {
const targetList = [];
valueList.forEach((value) => {
let cur;
let cacheTarget;
let list = this.cascaderSrv.options;
for (let i = 0; i < value.length; i++) {
cur = list.find((l) => l.value === value[i]);
cacheTarget = cur;
if (this.isLazyLoad && cur && !cur.children?.length && !cur.isLeaf) {
this.cascaderSrv.lazyloadMultipleChild(cur, i);
break;
}
else {
list = (cur && cur.children) || [];
}
}
if (cur && cur.isLeaf) {
targetList.push(cur);
cacheTarget = null;
this.cascaderSrv.updateOptionCheckedStatus(cur.value, true, this.checkboxRelation.upward, this.checkboxRelation.downward);
}
if (cacheTarget) {
targetList.push(cacheTarget);
this.cascaderSrv.updateOptionCheckedStatus(cacheTarget.value, true, this.checkboxRelation.upward, this.checkboxRelation.downward);
}
});
return targetList;
}
// 获取路径末的label
getLabelFromValue(value) {
let cur;
let list = this.cascaderSrv.options;
value.forEach((item) => {
cur = list.find((t) => t.value === item) || '';
list = cur.children || [];
});
return (cur && cur.label) || '';
}
// 将value数组转换为路径字符串
getPathLabelFormValue(value) {
let path = '';
let cur;
let list = this.cascaderSrv.options;
value.forEach((item, index) => {
cur = list.find((t) => t.value === item) || '';
if (cur) {
path = path === '' ? path + cur.label : path + ' / ' + cur.label;
}
else if (this.cascaderSrv.columnList.length === index + 1) {
path = path === '' ? path + item : path + ' / ' + item;
}
list = cur.children || [];
});
return path;
}
clearTags() {
if (this.multiple) {
this.multipleValueList = [];
this.cascaderSrv.resetStatus.next();
this.cascaderSrv.resetNodeStatus();
this.cascaderSrv.currentMultipleValue = [];
}
else {
this.cascaderSrv.currentValue = [];
}
this.onChange([]);
}
onToggle(isOpen) {
this.toggleEvent.emit(isOpen);
if (isOpen && this.multiple) {
this.cascaderSrv.clearTargetActive(this.cascaderSrv.options.find((t) => t.active));
this.cascaderSrv.columnList.splice(1);
if (this.innerInput) {
this.innerInput.nativeElement.focus();
}
}
if (isOpen && !this.multiple && this.allowSearch) {
this.outerInput.nativeElement.focus();
}
if (!isOpen && this.allowSearch) {
if (!this.cascaderSrv.currentValue.length) {
this.showTextValue = null;
}
else {
this.writeValue(this.cascaderSrv.currentValue);
}
// 在动画结束后再设置参数，防止panel中内容突变，动画时间200
this.timer = setTimeout(() => {
this.showSearchPanel = false;
}, 200);
}
if (isOpen) {
this.rePosition();
}
}
// 防止位置超出overlay边界
rePosition() {
if (typeof window === undefined || !this.appendToBody) {
return;
}
setTimeout(() => {
this.dropdownComp.reposition();
const width = this.dropdownComp.overlay.overlayRef?.overlayElement.clientWidth;
const offsetX = this.dropdownComp.overlay.overlayRef?.overlayElement.offsetLeft;
const offsetRight = window.innerWidth - width - offsetX - 20;
this.subMenuDirections.forEach((t) => {
t.offsetX = offsetRight < 0 ? offsetRight : 0;
});
this.dropdownComp.reposition();
}, 0);
}
ngOnDestroy() {
this.unsubscribe$.next();
this.unsubscribe$.complete();
this.searchValueChange.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CascaderComponent, deps: [{ token: i1.CascaderService }, { token: i2.I18nService }, { token: i3.DevConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CascaderComponent, selector: "d-cascader", inputs: { options: "options", width: "width", dropdownWidth: "dropdownWidth", placeholder: "placeholder", trigger: "trigger", disabled: "disabled", multiple: "multiple", showPath: "showPath", allowClear: "allowClear", allowSearch: "allowSearch", canSelectParent: "canSelectParent", checkboxRelation: "checkboxRelation", dropDownItemTemplate: "dropDownItemTemplate", dropdownHeaderTemplate: "dropdownHeaderTemplate", hostTemplate: "hostTemplate", dropdownPanelClass: "dropdownPanelClass", appendToBody: "appendToBody", tagMaxWidth: "tagMaxWidth", showAnimation: "showAnimation", styleType: "styleType", loadChildrenFn: "loadChildrenFn", showGlowStyle: "showGlowStyle" }, outputs: { toggleEvent: "toggleEvent" }, host: { properties: { "class.devui-glow-style": "this.hasGlowStyle" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CascaderComponent),
multi: true,
},
CascaderService,
], viewQueries: [{ propertyName: "mainDropdown", first: true, predicate: ["mainDropdown"], descendants: true }, { propertyName: "innerInput", first: true, predicate: ["innerInput"], descendants: true }, { propertyName: "outerInput", first: true, predicate: ["outerInput"], descendants: true }, { propertyName: "dropdownComp", first: true, predicate: DropDownAppendToBodyComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n [ngStyle]=\"{ width: width + 'px' }\"\r\n *ngIf=\"appendToBody\"\r\n dDropDown\r\n appendToBody\r\n [trigger]=\"disabled ? 'manually' : 'click'\"\r\n [closeScope]=\"'blank'\"\r\n #mainDropdown=\"d-dropdown\"\r\n (toggleEvent)=\"onToggle($event)\"\r\n [showAnimation]=\"showAnimation\"\r\n [appendToBodyDirections]=\"subMenuDirections\"\r\n [ngClass]=\"{ 'dropdown-show-clear': allowClear && (showTextValue || multipleValueList.length) }\"\r\n>\r\n <div dDropDownToggle (focus)=\"showSearchInput = true\" [class.devui-gray-style]=\"styleType === 'gray'\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"hostTemplate || default\"\r\n [ngTemplateOutletContext]=\"{ value: showTextValue || multipleValueList }\"\r\n ></ng-template>\r\n </div>\r\n\r\n <ng-template #default>\r\n <input\r\n *ngIf=\"!multiple\"\r\n #outerInput\r\n [placeholder]=\"placeholder\"\r\n type=\"text\"\r\n class=\"devui-form-control devui-select-input devui-input\"\r\n [ngClass]=\"{ 'devui-search-cascader': allowSearch }\"\r\n [readonly]=\"!allowSearch\"\r\n [disabled]=\"disabled\"\r\n [ngModel]=\"showTextValue\"\r\n (ngModelChange)=\"valueChanges($event)\"\r\n />\r\n <div class=\"devui-tags-input-wrapper\" *ngIf=\"multiple\">\r\n <div class=\"devui-tags-input devui-scrollbar\">\r\n <d-tag\r\n *ngFor=\"let item of multipleValueList; let index = index\"\r\n [tag]=\"item.pathLabel || item.label\"\r\n [labelStyle]=\"item.disabled ? 'tag-disabled' : ''\"\r\n [deletable]=\"!item.disabled\"\r\n (tagDelete)=\"deleteTag($event, item)\"\r\n [maxWidth]=\"tagMaxWidth\"\r\n ></d-tag>\r\n <input\r\n #innerInput\r\n (blur)=\"showSearchInput = false\"\r\n *ngIf=\"allowSearch && showSearchInput\"\r\n dTextInput\r\n class=\"inner-input\"\r\n [placeholder]=\"multipleValueList.length ? '' : placeholder\"\r\n [ngModel]=\"showTextValue\"\r\n (ngModelChange)=\"valueChanges($event)\"\r\n />\r\n <span *ngIf=\"!multipleValueList.length && !allowSearch\" class=\"devui-dropdown-placeholder\">{{ placeholder }}</span>\r\n </div>\r\n <div class=\"devui-drop-icon-wrapper\">\r\n <span class=\"devui-drop-icon\" [ngClass]=\"{ 'devui-drop-icon-animation': showAnimation }\">\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 stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n <span class=\"devui-cascader-close-icon\" (click)=\"clearTags()\">\r\n <svg\r\n width=\"12px\"\r\n height=\"12px\"\r\n viewBox=\"0 0 12 12\"\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 stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M8.86785321,3.13214679 C9.02624037,3.29053395 9.02624037,3.54733027 8.86785321,3.70571743 L6.573,6 L8.86785321,8.29428257 C9.02624037,8.45266973 9.02624037,8.70946605 8.86785321,8.86785321 C8.70946605,9.02624037 8.45266973,9.02624037 8.29428257,8.86785321 L6,6.573 L3.70571743,8.86785321 C3.54733027,9.02624037 3.29053395,9.02624037 3.13214679,8.86785321 C2.97375963,8.70946605 2.97375963,8.45266973 3.13214679,8.29428257 L5.427,6 L3.13214679,3.70571743 C2.97375963,3.54733027 2.97375963,3.29053395 3.13214679,3.13214679 C3.29053395,2.97375963 3.54733027,2.97375963 3.70571743,3.13214679 L6,5.427 L8.29428257,3.13214679 C8.45266973,2.97375963 8.70946605,2.97375963 8.86785321,3.13214679 Z\"\r\n fill-rule=\"nonzero\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"devui-single-drop-icon-wrapper\" *ngIf=\"!multiple\">\r\n <span class=\"devui-drop-icon\" [ngClass]=\"{ 'devui-drop-icon-animation': showAnimation }\">\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 stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n <span class=\"devui-cascader-close-icon\" (click)=\"clearTags()\">\r\n <svg\r\n width=\"12px\"\r\n height=\"12px\"\r\n viewBox=\"0 0 12 12\"\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 stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M8.86785321,3.13214679 C9.02624037,3.29053395 9.02624037,3.54733027 8.86785321,3.70571743 L6.573,6 L8.86785321,8.29428257 C9.02624037,8.45266973 9.02624037,8.70946605 8.86785321,8.86785321 C8.70946605,9.02624037 8.45266973,9.02624037 8.29428257,8.86785321 L6,6.573 L3.70571743,8.86785321 C3.54733027,9.02624037 3.29053395,9.02624037 3.13214679,8.86785321 C2.97375963,8.70946605 2.97375963,8.45266973 3.13214679,8.29428257 L5.427,6 L3.13214679,3.70571743 C2.97375963,3.54733027 2.97375963,3.29053395 3.13214679,3.13214679 C3.29053395,2.97375963 3.54733027,2.97375963 3.70571743,3.13214679 L6,5.427 L8.29428257,3.13214679 C8.45266973,2.97375963 8.70946605,2.97375963 8.86785321,3.13214679 Z\"\r\n fill-rule=\"nonzero\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n\r\n <div dDropDownMenu class=\"devui-drop-menu-wrapper {{ dropdownPanelClass }}\">\r\n <ng-container *ngIf=\"!showSearchPanel\">\r\n <ul\r\n *ngFor=\"let optionList of columnList; let i = index\"\r\n class=\"devui-cascader-list devui-scrollbar\"\r\n [ngClass]=\"{ 'devui-drop-no-data': !options.length }\"\r\n [ngStyle]=\"{ width: dropdownWidth + 'px' }\"\r\n role=\"menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <ng-container *ngIf=\"dropdownHeaderTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"dropdownHeaderTemplate\" [ngTemplateOutletContext]=\"{ index: i }\"> </ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"optionList.length\">\r\n <d-cascader-li\r\n *ngFor=\"let option of optionList\"\r\n [option]=\"option\"\r\n [trigger]=\"trigger\"\r\n [width]=\"dropdownWidth\"\r\n [multiple]=\"multiple\"\r\n [colIndex]=\"i\"\r\n [dropDownItemTemplate]=\"dropDownItemTemplate\"\r\n [isLazyLoad]=\"isLazyLoad\"\r\n [canSelectParent]=\"canSelectParent\"\r\n [checkboxRelation]=\"checkboxRelation\"\r\n ></d-cascader-li>\r\n </ng-container>\r\n <div *ngIf=\"!optionList.length\" class=\"devui-no-data-tip\">{{ i18nCommonText.noData }}</div>\r\n </ul>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"showSearchPanel\">\r\n <ul\r\n class=\"devui-cascader-list devui-scrollbar\"\r\n [style.minWidth]=\"dropdownWidth - 2 + 'px'\"\r\n [ngClass]=\"{ 'devui-drop-no-data': !searchResultList.length }\"\r\n >\r\n <li\r\n *ngFor=\"let item of searchResultList\"\r\n class=\"devui-cascader-list-item\"\r\n [ngClass]=\"{ 'active-li': item.checked }\"\r\n (click)=\"chooseSearchResult(item)\"\r\n >\r\n {{ item.label }}\r\n </li>\r\n <div *ngIf=\"!searchResultList.length\" class=\"devui-no-data-tip\">{{ i18nCommonText.noData }}</div>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n</div>\r\n\r\n<div\r\n *ngIf=\"!appendToBody\"\r\n [ngStyle]=\"{ width: width + 'px' }\"\r\n dDropDown\r\n [trigger]=\"'click'\"\r\n [closeScope]=\"'blank'\"\r\n #mainDropdown=\"d-dropdown\"\r\n (toggleEvent)=\"onToggle($event)\"\r\n [showAnimation]=\"showAnimation\"\r\n>\r\n <div dDropDownToggle (focus)=\"showSearchInput = true\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"hostTemplate || default\"\r\n [ngTemplateOutletContext]=\"{ value: showTextValue || multipleValueList }\"\r\n ></ng-template>\r\n </div>\r\n <ng-template #default>\r\n <input\r\n *ngIf=\"!multiple\"\r\n #outerInput\r\n [placeholder]=\"placeholder\"\r\n type=\"text\"\r\n class=\"devui-form-control devui-select-input devui-input\"\r\n [ngClass]=\"{ 'devui-search-cascader': allowSearch }\"\r\n [readonly]=\"!allowSearch\"\r\n [disabled]=\"disabled\"\r\n [ngModel]=\"showTextValue\"\r\n (ngModelChange)=\"valueChanges($event)\"\r\n />\r\n <div class=\"devui-tags-input-wrapper\" *ngIf=\"multiple\">\r\n <div class=\"devui-tags-input devui-scrollbar\">\r\n <d-tag\r\n *ngFor=\"let item of multipleValueList; let index = index\"\r\n [tag]=\"item.label\"\r\n [deletable]=\"true\"\r\n (tagDelete)=\"deleteTag($event, item)\"\r\n ></d-tag>\r\n <input\r\n #innerInput\r\n (blur)=\"showSearchInput = false\"\r\n *ngIf=\"allowSearch && showSearchInput\"\r\n dTextInput\r\n class=\"inner-input\"\r\n [placeholder]=\"multipleValueList.length ? '' : placeholder\"\r\n [ngModel]=\"showTextValue\"\r\n (ngModelChange)=\"valueChanges($event)\"\r\n />\r\n <span *ngIf=\"!multipleValueList.length && !allowSearch\" class=\"devui-dropdown-placeholder\">{{ placeholder }}</span>\r\n </div>\r\n <div class=\"devui-drop-icon-wrapper\">\r\n <span class=\"devui-drop-icon\" [ngClass]=\"{ 'devui-drop-icon-animation': showAnimation }\">\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 stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n <span class=\"devui-cascader-close-icon\" (click)=\"clearTags()\">\r\n <svg\r\n width=\"12px\"\r\n height=\"12px\"\r\n viewBox=\"0 0 12 12\"\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 stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M8.86785321,3.13214679 C9.02624037,3.29053395 9.02624037,3.54733027 8.86785321,3.70571743 L6.573,6 L8.86785321,8.29428257 C9.02624037,8.45266973 9.02624037,8.70946605 8.86785321,8.86785321 C8.70946605,9.02624037 8.45266973,9.02624037 8.29428257,8.86785321 L6,6.573 L3.70571743,8.86785321 C3.54733027,9.02624037 3.29053395,9.02624037 3.13214679,8.86785321 C2.97375963,8.70946605 2.97375963,8.45266973 3.13214679,8.29428257 L5.427,6 L3.13214679,3.70571743 C2.97375963,3.54733027 2.97375963,3.29053395 3.13214679,3.13214679 C3.29053395,2.97375963 3.54733027,2.97375963 3.70571743,3.13214679 L6,5.427 L8.29428257,3.13214679 C8.45266973,2.97375963 8.70946605,2.97375963 8.86785321,3.13214679 Z\"\r\n fill-rule=\"nonzero\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"devui-single-drop-icon-wrapper\" *ngIf=\"!multiple\">\r\n <span class=\"devui-drop-icon\" [ngClass]=\"{ 'devui-drop-icon-animation': showAnimation }\">\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 stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n <span class=\"devui-cascader-close-icon\" (click)=\"clearTags()\">\r\n <svg\r\n width=\"12px\"\r\n height=\"12px\"\r\n viewBox=\"0 0 12 12\"\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 stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M8.86785321,3.13214679 C9.02624037,3.29053395 9.02624037,3.54733027 8.86785321,3.70571743 L6.573,6 L8.86785321,8.29428257 C9.02624037,8.45266973 9.02624037,8.70946605 8.86785321,8.86785321 C8.70946605,9.02624037 8.45266973,9.02624037 8.29428257,8.86785321 L6,6.573 L3.70571743,8.86785321 C3.54733027,9.02624037 3.29053395,9.02624037 3.13214679,8.86785321 C2.97375963,8.70946605 2.97375963,8.45266973 3.13214679,8.29428257 L5.427,6 L3.13214679,3.70571743 C2.97375963,3.54733027 2.97375963,3.29053395 3.13214679,3.13214679 C3.29053395,2.97375963 3.54733027,2.97375963 3.70571743,3.13214679 L6,5.427 L8.29428257,3.13214679 C8.45266973,2.97375963 8.70946605,2.97375963 8.86785321,3.13214679 Z\"\r\n fill-rule=\"nonzero\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n\r\n <div dDropDownMenu class=\"devui-drop-menu-wrapper {{ dropdownPanelClass }}\">\r\n <ng-container *ngIf=\"!showSearchPanel\">\r\n <ul\r\n *ngFor=\"let optionList of columnList; let i = index\"\r\n class=\"devui-cascader-list devui-scrollbar\"\r\n [ngClass]=\"{ 'devui-drop-no-data': !options.length }\"\r\n [ngStyle]=\"{ width: dropdownWidth + 'px' }\"\r\n role=\"menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <ng-container *ngIf=\"dropdownHeaderTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"dropdownHeaderTemplate\" [ngTemplateOutletContext]=\"{ index: i }\"> </ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"optionList.length\">\r\n <d-cascader-li\r\n *ngFor=\"let option of optionList\"\r\n [option]=\"option\"\r\n [trigger]=\"trigger\"\r\n [width]=\"dropdownWidth\"\r\n [multiple]=\"multiple\"\r\n [colIndex]=\"i\"\r\n [dropDownItemTemplate]=\"dropDownItemTemplate\"\r\n [isLazyLoad]=\"isLazyLoad\"\r\n [canSelectParent]=\"canSelectParent\"\r\n [checkboxRelation]=\"checkboxRelation\"\r\n ></d-cascader-li>\r\n </ng-container>\r\n <div *ngIf=\"!optionList.length\" class=\"devui-no-data-tip\">{{ i18nCommonText.noData }}</div>\r\n </ul>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"showSearchPanel\">\r\n <ul\r\n class=\"devui-cascader-list devui-scrollbar\"\r\n [style.minWidth]=\"dropdownWidth - 2 + 'px'\"\r\n [ngClass]=\"{ 'devui-drop-no-data': !searchResultList.length }\"\r\n >\r\n <li\r\n *ngFor=\"let item of searchResultList\"\r\n class=\"devui-cascader-list-item\"\r\n [ngClass]=\"{ 'active-li': item.checked }\"\r\n (click)=\"chooseSearchResult(item)\"\r\n >\r\n {{ item.label }}\r\n </li>\r\n <div *ngIf=\"!searchResultList.length\" class=\"devui-no-data-tip\">{{ i18nCommonText.noData }}</div>\r\n </ul>\r\n </ng-container>\r\n </div>\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)}.devui-dropdown-menu{padding-bottom:0}.devui-dropdown-item{height:32px;padding:8px 12px}.devui-dropdown-open input{border:1px solid var(--devui-brand, #0a59f7)}.devui-dropdown-open input::-webkit-input-placeholder{color:var(--devui-text, #191919)}.devui-dropdown-open .devui-drop-icon svg{transform:rotate(180deg)}.devui-dropdown-open .devui-tags-input-wrapper{border-color:var(--devui-brand, #0a59f7);border-radius:var(--devui-border-radius, 2px)}.devui-input{padding-right:36px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:default}:host ::ng-deep .devui-tag-item.tag-disabled{cursor:not-allowed;background-color:var(--devui-disabled-bg, #f3f3f3);color:var(--devui-disabled-text, #c2c2c2)}.devui-search-cascader{cursor:text}.devui-cascader-list{border-left:1px solid var(--devui-dividing-line, #f0f0f0);height:180px;overflow-y:auto;overflow-y:overlay;display:inline-block;font-size:var(--devui-font-size, 12px)}.devui-cascader-list:first-of-type{border-left:none}.devui-cascader-list-item{height:32px;padding:8px 12px;cursor:pointer;display:block}.devui-cascader-list-item:hover,.devui-cascader-list .active-li{background-color:var(--devui-list-item-hover-bg, #f2f2f3);color:var(--devui-link, #0950de)}::ng-deep .devui-dropdown-top .devui-cascader-list{border-top-color:var(--devui-brand, #0a59f7)!important;border-bottom-color:var(--devui-dividing-line, #f0f0f0)!important;box-shadow:unset}.devui-drop-no-data{height:auto;display:block}.devui-drop-icon{width:16px;height:16px;display:inline-block;line-height:16px;vertical-align:middle}.devui-drop-icon svg path{fill:var(--devui-text, #191919)}.devui-drop-icon-animation svg{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-cascader-close-icon{display:none;font-size:var(--devui-font-size-icon, 16px);cursor:pointer;width:12px;height:12px;line-height:12px;background-color:var(--devui-line, #dbdbdb);border-radius:50%;text-align:center}.devui-cascader-close-icon svg path{fill:var(--devui-light-text, #ffffff)}.dropdown-show-clear:hover .devui-drop-icon{display:none}.dropdown-show-clear:hover .devui-cascader-close-icon{display:block}.devui-single-drop-icon-wrapper{position:absolute;top:50%;transform:translateY(-50%);right:12px;width:16px;display:flex}.devui-single-drop-icon-wrapper .devui-cascader-close-icon{position:relative;left:2px}:host:not(.devui-glow-style) .devui-tags-input-wrapper:hover{border-color:var(--devui-aide-text, #595959)}.devui-tags-input-wrapper{border:1px solid var(--devui-line, #dbdbdb);display:inline-flex;width:100%;border-radius:var(--devui-border-radius, 2px)}.devui-tags-input-wrapper .devui-tags-input{flex:1;min-height:26px;max-height:56px;overflow:auto;padding:1px 0 1px 4px}.devui-tags-input-wrapper .devui-tags-input d-tag{margin-right:4px;margin-bottom:2px;margin-top:2px}.devui-tags-input-wrapper .devui-drop-icon-wrapper{flex:0 0 40px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center}.devui-tags-input-wrapper .inner-input{max-width:150px;height:21px;border:none;outline:0;background:var(--devui-base-bg, #ffffff);color:var(--devui-text, #191919);padding:0 8px}.devui-dropdown-placeholder{line-height:22px;margin-left:8px;color:var(--devui-placeholder, #808080)}.devui-drop-menu-wrapper{white-space:nowrap;font-size:0}:host ::ng-deep .devui-max-width-tag{height:16px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.DropDownDirective, selector: "[dDropDown]", inputs: ["isOpen", "disabled", "showAnimation", "trigger", "closeScope", "closeOnMouseLeaveMenu", "autofocusToggleElement"], outputs: ["toggleEvent"], exportAs: ["d-dropdown"] }, { kind: "directive", type: i6.DropDownMenuDirective, selector: "[dDropDownMenu]", exportAs: ["d-dropdown-menu"] }, { kind: "directive", type: i6.DropDownToggleDirective, selector: "[dDropDownToggle]", inputs: ["toggleOnFocus", "autoFocus"], exportAs: ["d-dropdown-toggle"] }, { kind: "component", type: i6.DropDownAppendToBodyComponent, selector: "[dDropDown][appendToBody]", inputs: ["alignOrigin", "appendToBodyDirections", "appendToBodyScrollStrategy"], exportAs: ["d-dropdown-append-to-body"] }, { kind: "component", type: i7.TagComponent, selector: "d-tag", inputs: ["tag", "labelStyle", "customColor", "deletable", "titleContent", "mode", "size", "checked", "maxWidth", "customViewTemplate", "beforeDelete"], outputs: ["tagDelete", "checkedChange"], exportAs: ["Tag"] }, { kind: "component", type: i8.CascaderLiComponent, selector: "d-cascader-li", inputs: ["width", "trigger", "option", "multiple", "canSelectParent", "colIndex", "dropDownItemTemplate", "isLazyLoad", "checkboxRelation"] }] }); }
}
__decorate([
WithConfig(),
__metadata("design:type", Object)
], CascaderComponent.prototype, "showAnimation", void 0);
__decorate([
WithConfig(),
__metadata("design:type", Object)
], CascaderComponent.prototype, "styleType", void 0);
__decorate([
WithConfig(),
__metadata("design:type", Object)
], CascaderComponent.prototype, "showGlowStyle", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CascaderComponent, decorators: [{
type: Component,
args: [{ selector: 'd-cascader', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CascaderComponent),
multi: true,
},
CascaderService,
], preserveWhitespaces: false, template: "<div\r\n [ngStyle]=\"{ width: width + 'px' }\"\r\n *ngIf=\"appendToBody\"\r\n dDropDown\r\n appendToBody\r\n [trigger]=\"disabled ? 'manually' : 'click'\"\r\n [closeScope]=\"'blank'\"\r\n #mainDropdown=\"d-dropdown\"\r\n (toggleEvent)=\"onToggle($event)\"\r\n [showAnimation]=\"showAnimation\"\r\n [appendToBodyDirections]=\"subMenuDirections\"\r\n [ngClass]=\"{ 'dropdown-show-clear': allowClear && (showTextValue || multipleValueList.length) }\"\r\n>\r\n <div dDropDownToggle (focus)=\"showSearchInput = true\" [class.devui-gray-style]=\"styleType === 'gray'\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"hostTemplate || default\"\r\n [ngTemplateOutletContext]=\"{ value: showTextValue || multipleValueList }\"\r\n ></ng-template>\r\n </div>\r\n\r\n <ng-template #default>\r\n <input\r\n *ngIf=\"!multiple\"\r\n #outerInput\r\n [placeholder]=\"placeholder\"\r\n type=\"text\"\r\n class=\"devui-form-control devui-select-input devui-input\"\r\n [ngClass]=\"{ 'devui-search-cascader': allowSearch }\"\r\n [readonly]=\"!allowSearch\"\r\n [disabled]=\"disabled\"\r\n [ngModel]=\"showTextValue\"\r\n (ngModelChange)=\"valueChanges($event)\"\r\n />\r\n <div class=\"devui-tags-input-wrapper\" *ngIf=\"multiple\">\r\n <div class=\"devui-tags-input devui-scrollbar\">\r\n <d-tag\r\n *ngFor=\"let item of multipleValueList; let index = index\"\r\n [tag]=\"item.pathLabel || item.label\"\r\n [labelStyle]=\"item.disabled ? 'tag-disabled' : ''\"\r\n [deletable]=\"!item.disabled\"\r\n (tagDelete)=\"deleteTag($event, item)\"\r\n [maxWidth]=\"tagMaxWidth\"\r\n ></d-tag>\r\n <input\r\n #innerInput\r\n (blur)=\"showSearchInput = false\"\r\n *ngIf=\"allowSearch && showSearchInput\"\r\n dTextInput\r\n class=\"inner-input\"\r\n [placeholder]=\"multipleValueList.length ? '' : placeholder\"\r\n [ngModel]=\"showTextValue\"\r\n (ngModelChange)=\"valueChanges($event)\"\r\n />\r\n <span *ngIf=\"!multipleValueList.length && !allowSearch\" class=\"devui-dropdown-placeholder\">{{ placeholder }}</span>\r\n </div>\r\n <div class=\"devui-drop-icon-wrapper\">\r\n <span class=\"devui-drop-icon\" [ngClass]=\"{ 'devui-drop-icon-animation': showAnimation }\">\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 stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n <span class=\"devui-cascader-close-icon\" (click)=\"clearTags()\">\r\n <svg\r\n width=\"12px\"\r\n height=\"12px\"\r\n viewBox=\"0 0 12 12\"\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 stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M8.86785321,3.13214679 C9.02624037,3.29053395 9.02624037,3.54733027 8.86785321,3.70571743 L6.573,6 L8.86785321,8.29428257 C9.02624037,8.45266973 9.02624037,8.70946605 8.86785321,8.86785321 C8.70946605,9.02624037 8.45266973,9.02624037 8.29428257,8.86785321 L6,6.573 L3.70571743,8.86785321 C3.54733027,9.02624037 3.29053395,9.02624037 3.13214679,8.86785321 C2.97375963,8.70946605 2.97375963,8.45266973 3.13214679,8.29428257 L5.427,6 L3.13214679,3.70571743 C2.97375963,3.54733027 2.97375963,3.29053395 3.13214679,3.13214679 C3.29053395,2.97375963 3.54733027,2.97375963 3.70571743,3.13214679 L6,5.427 L8.29428257,3.13214679 C8.45266973,2.97375963 8.70946605,2.97375963 8.86785321,3.13214679 Z\"\r\n fill-rule=\"nonzero\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"devui-single-drop-icon-wrapper\" *ngIf=\"!multiple\">\r\n <span class=\"devui-drop-icon\" [ngClass]=\"{ 'devui-drop-icon-animation': showAnimation }\">\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 stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n <span class=\"devui-cascader-close-icon\" (click)=\"clearTags()\">\r\n <svg\r\n width=\"12px\"\r\n height=\"12px\"\r\n viewBox=\"0 0 12 12\"\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 stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M8.86785321,3.13214679 C9.02624037,3.29053395 9.02624037,3.54733027 8.86785321,3.70571743 L6.573,6 L8.86785321,8.29428257 C9.02624037,8.45266973 9.02624037,8.70946605 8.86785321,8.86785321 C8.70946605,9.02624037 8.45266973,9.02624037 8.29428257,8.86785321 L6,6.573 L3.70571743,8.86785321 C3.54733027,9.02624037 3.29053395,9.02624037 3.13214679,8.86785321 C2.97375963,8.70946605 2.97375963,8.45266973 3.13214679,8.29428257 L5.427,6 L3.13214679,3.70571743 C2.97375963,3.54733027 2.97375963,3.29053395 3.13214679,3.13214679 C3.29053395,2.97375963 3.54733027,2.97375963 3.70571743,3.13214679 L6,5.427 L8.29428257,3.13214679 C8.45266973,2.97375963 8.70946605,2.97375963 8.86785321,3.13214679 Z\"\r\n fill-rule=\"nonzero\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n\r\n <div dDropDownMenu class=\"devui-drop-menu-wrapper {{ dropdownPanelClass }}\">\r\n <ng-container *ngIf=\"!showSearchPanel\">\r\n <ul\r\n *ngFor=\"let optionList of columnList; let i = index\"\r\n class=\"devui-cascader-list devui-scrollbar\"\r\n [ngClass]=\"{ 'devui-drop-no-data': !options.length }\"\r\n [ngStyle]=\"{ width: dropdownWidth + 'px' }\"\r\n role=\"menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <ng-container *ngIf=\"dropdownHeaderTemplate\">\r\n <ng-template [ngTemplateOutlet]=\"dropdownHeaderTemplate\" [ngTemplateOutletContext]=\"{ index: i }\"> </ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"optionList.length\">\r\n