import * as i0 from '@angular/core';
import { Injectable, Component, Input, HostListener, EventEmitter, forwardRef, ViewChild, Output, NgModule } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil, debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
import { cloneDeep } from 'lodash-es';
import * as i4 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i5 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i4$1 from 'ng-devui/checkbox';
import { CheckBoxModule } from 'ng-devui/checkbox';
import { __decorate, __metadata } from 'tslib';
import * as i6 from 'ng-devui/dropdown';
import { DropDownAppendToBodyComponent, DropDownModule } from 'ng-devui/dropdown';
import * as i2 from 'ng-devui/i18n';
import * as i3 from 'ng-devui/utils';
import { WithConfig } from 'ng-devui/utils';
import * as i7 from 'ng-devui/tags';
import { TagsModule } from 'ng-devui/tags';
import { SelectModule } from 'ng-devui/select';

class CascaderService {
    constructor() {
        this._currentValue = [];
        this.multipleValue = [];
        this.columnList = [];
        this.searchResultList = [];
        this.canSelectParent = false;
        this.isMultiple = false;
        this.isLazyLoad = false;
        this.lazyloadCache = {};
        this.closeMianDropdown = new Subject();
        this.currentValueChange = new Subject();
        this.resetStatus = new Subject();
        this.openDrawer = new Subject();
        this.updateShowText = new Subject();
        this.updateTagList = new Subject();
    }
    set currentValue(value) {
        this._currentValue = value.filter(item => item !== undefined);
        this.currentValueChange.next(this._currentValue);
    }
    get currentValue() {
        return this._currentValue;
    }
    set currentMultipleValue(value) {
        this.resetNodeStatus();
        this.multipleValue = value;
    }
    get currentMultipleValue() {
        this.multipleValue = [];
        this.getMultipleValue([], this.options);
        return this.multipleValue;
    }
    initOptions(options) {
        this.columnList = [];
        this.options = cloneDeep(options);
        // 标记根节点
        this.options.forEach(t => { t['isRoot'] = true; });
        this.columnList.push(this.options);
    }
    openColumn(option, colIndex, islazyLoad, reload = false) {
        this.clearTargetActive(this.columnList[colIndex].find(t => t.active));
        option.active = true;
        this.columnList.splice(colIndex + 1);
        if (option.children && option.children.length) {
            this.columnList.push(option.children);
            this.openDrawer.next();
        }
        else if (islazyLoad) {
            option._loading = true;
            const fn = this.loadChildrenFn(option);
            if (fn.then) {
                fn.then(res => {
                    this.columnList.splice(colIndex + 1); // 防止多个同时懒加载，造成多余的添加
                    option.children = res || [];
                    option._loading = false;
                    this.columnList.push(res || []);
                    this.openDrawer.next();
                    if (this.isMultiple) {
                        this.updateOptionCheckedStatus(option.value, option.checked, true, true, !reload);
                    }
                    if (reload) {
                        if (!this.isMultiple) {
                            this.updateOptionByValue();
                        }
                        this.updateShowText.next();
                    }
                });
            }
            else {
                fn.subscribe(res => {
                    this.columnList.splice(colIndex + 1); // 防止多个同时懒加载，造成多余的添加
                    option.children = res || [];
                    option._loading = false;
                    this.columnList.push(res || []);
                    this.openDrawer.next();
                    if (this.isMultiple) {
                        this.updateOptionCheckedStatus(option.value, option.checked, true, true, !reload);
                    }
                    if (reload) {
                        if (!this.isMultiple) {
                            this.updateOptionByValue();
                        }
                        this.updateShowText.next();
                    }
                });
            }
        }
    }
    clearTargetActive(option) {
        if (!option) {
            return;
        }
        option.active = false;
        if (option.children) {
            this.clearTargetActive(option.children.find(t => t.active));
        }
    }
    setCurrentValue() {
        this.currentValue = this.columnList.map(listItem => listItem.find(optionItem => optionItem.active)?.value);
    }
    updateOptionByValue() {
        this.resetNodeStatus();
        this.columnList = [this.options];
        for (let index = 0; index < this.currentValue.length; index++) {
            const target = this.columnList[index]?.find(listItem => listItem.value === this.currentValue[index]);
            if (target) {
                target['active'] = true;
                if (target.children && target.children.length) { // 有子菜单展开子菜单
                    this.columnList.push(target.children);
                }
                else if (this.isLazyLoad) { // 懒加载没有子菜单的情况下，非叶子节点执行展开，叶子节点执行选中
                    this.openColumn(target, index, !target.isLeaf, !target.isLeaf);
                    break;
                }
            }
            else {
                break;
            }
        }
    }
    lazyloadMultipleChild(target, index) {
        if (!this.lazyloadCache[target.value]) {
            this.lazyloadCache[target.value] = true;
            this.openColumn(target, index, true, true);
        }
    }
    resetNodeStatus(option = this.options) {
        option.forEach(item => {
            item['active'] = false;
            item['checked'] = false;
            item['halfChecked'] = false;
            if (item.children) {
                this.resetNodeStatus(item.children);
            }
        });
    }
    // 在多选模式下，更新节点树的checked状态
    updateOptionCheckedStatus(targetValue, checked, upward = true, downward = true, isEmit = true) {
        let targetNode = this.options.find(t => t.value === targetValue);
        // 当主下拉列表包含了目标，即目标无父节点
        if (targetNode) {
            targetNode['checked'] = checked;
            targetNode['halfChecked'] = false;
            if (targetNode.children && downward) {
                this.updateChildrenChecked(targetNode, checked, isEmit);
            }
        }
        else { // 当存在父节点时，需要检查同级节点来确定父节点状态
            const parentNode = this.getParentNode(targetValue);
            targetNode = parentNode.children.find(t => t.value === targetValue);
            targetNode['checked'] = checked;
            targetNode['halfChecked'] = false;
            if (targetNode.children && downward) {
                this.updateChildrenChecked(targetNode, checked, isEmit);
            }
            if (upward) {
                this.updateParentChecked(parentNode, isEmit);
            }
        }
    }
    // 子节点按父节点状态更新
    updateChildrenChecked(node, checked, isEmit) {
        let hasDisable = false;
        node.children.forEach(child => {
            if (!child.disabled) {
                child['checked'] = checked;
                child['halfChecked'] = false;
                if (child.children && child.children.length) {
                    if (this.canSelectParent) {
                        this.updateTagList.next({
                            isAdd: checked,
                            option: child,
                            isEmit
                        });
                    }
                    this.updateChildrenChecked(child, checked, isEmit);
                }
                else {
                    this.updateTagList.next({
                        isAdd: checked,
                        option: child,
                        isEmit
                    });
                }
            }
            else {
                hasDisable = true;
            }
        });
        if (hasDisable && !this.canSelectParent) {
            this.updateParentChecked(node, isEmit);
        }
    }
    // 父节点按所有子节点状态更新
    updateParentChecked(node, isEmit) {
        const checkedChild = node.children.find(t => t['checked']);
        const halfcheckedChild = node.children.find(t => t['halfChecked']);
        const uncheckedChild = node.children.find(t => !t['halfChecked'] && !t['checked']);
        if (halfcheckedChild || (checkedChild && uncheckedChild)) {
            node['checked'] = false;
            node['halfChecked'] = true;
        }
        else if (!checkedChild && !halfcheckedChild) {
            node['checked'] = false;
            node['halfChecked'] = false;
        }
        else {
            node['checked'] = true;
            node['halfChecked'] = false;
        }
        if (this.canSelectParent) {
            this.updateTagList.next({
                isAdd: node['checked'],
                option: node,
                isEmit
            });
        }
        // 如果此节点非根节点，则继续找它的父节点进行更新
        if (!node['isRoot']) {
            this.updateParentChecked(this.getParentNode(node.value), isEmit);
        }
    }
    // 获取父节点
    getParentNode(childValue) {
        const queue = [...this.options];
        let cur;
        while (queue.length) {
            cur = queue.shift();
            if (cur.children && cur.children.find(t => t.value === childValue)) {
                break;
            }
            else if (cur.children) {
                queue.push(...cur.children);
            }
        }
        return cur;
    }
    getMultipleValue(value, option) {
        option.forEach(item => {
            const _value = [...value];
            if (item.children && item.children.length && (item.checked || item.halfChecked)) {
                _value.push(item.value);
                this.getMultipleValue(_value, item.children);
            }
            else if (item.checked) {
                _value.push(item.value);
                this.multipleValue.push(_value);
            }
        });
    }
    closeAllDropdown() {
        this.closeMianDropdown.next();
    }
    // 搜索功能
    searchByString(str, currentlabel, currentValue = [], list = this.options) {
        list.forEach(item => {
            const label = currentlabel ? currentlabel + ' / ' + item.label : item.label;
            const valueList = [...currentValue, item.value];
            if (item.children && item.children.length) {
                this.searchByString(str, label, valueList, item.children);
            }
            else {
                if (!item.disabled && label.toLowerCase().indexOf(str.toLowerCase()) !== -1) {
                    this.searchResultList.push({
                        label,
                        valueList,
                        checked: item.checked
                    });
                }
            }
        });
    }
    ngOnDestroy() {
        this.closeMianDropdown.complete();
        this.currentValueChange.complete();
        this.updateTagList.complete();
        this.resetStatus.complete();
        this.openDrawer.complete();
    }
}
CascaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CascaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
CascaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CascaderService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CascaderService, decorators: [{
            type: Injectable
        }] });

class CascaderLiComponent {
    constructor(cascaderSrv, cdr) {
        this.cascaderSrv = cascaderSrv;
        this.cdr = cdr;
        this.width = 200;
        this.trigger = 'hover';
        this.multiple = false;
        this.canSelectParent = false;
        this.checkboxRelation = { upward: true, downward: true };
        this.unsubscribe$ = new Subject();
    }
    onClick(event) {
        event.stopPropagation();
    }
    onMouseEnter(event) {
        if (this.trigger === 'hover' && this.option.children && this.option.children.length) {
            this.cascaderSrv.openColumn(this.option, this.colIndex, false);
        }
    }
    ngOnInit() {
        if (this.isLazyLoad) {
            this.isLeaf = !!this.option.isLeaf;
        }
        else { // 当不是懒加载时可以通过children是否为空来判断是否为叶子节点
            this.isLeaf = this.option.isLeaf || !(this.option.children && this.option.children.length);
        }
        this.initObserable();
    }
    initObserable() {
        this.cascaderSrv.resetStatus.pipe(takeUntil(this.unsubscribe$)).subscribe(res => {
            this.selected = false;
            this.halfCheck = false;
            this.active = false;
        });
    }
    clickLeaf() {
        if (!this.option.disabled && !this.multiple) {
            this.cascaderSrv.openColumn(this.option, this.colIndex, false);
            this.option.active = true;
            this.cascaderSrv.setCurrentValue();
            this.cascaderSrv.closeAllDropdown();
        }
    }
    clickItem() {
        this.cascaderSrv.openColumn(this.option, this.colIndex, this.isLazyLoad);
        if (this.canSelectParent && !this.multiple) {
            this.cascaderSrv.setCurrentValue();
        }
    }
    clickCheckbox(event) {
        if (this.option.disabled) {
            return;
        }
        event.stopPropagation();
        // 如果是半选状态，更新为false，其他状态则更新为与checked相反
        const status = !!this.option.halfChecked;
        this.cascaderSrv.updateOptionCheckedStatus(this.option.value, this.option.halfChecked ? false : !this.option.checked, this.checkboxRelation.upward, this.checkboxRelation.downward);
        if (status) {
            this.option.halfChecked = false;
        }
        if (this.isLeaf || this.canSelectParent) {
            this.updateValue(this.option.checked);
        }
    }
    // 阻止checkbox本身的点击事件变化
    avoidCheckboxChange() {
        return false;
    }
    updateValue(checked) {
        this.cascaderSrv.updateTagList.next({
            isAdd: checked,
            option: this.option,
            isEmit: true
        });
    }
    ngOnDestroy() {
        this.unsubscribe$.next();
        this.unsubscribe$.complete();
    }
}
CascaderLiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CascaderLiComponent, deps: [{ token: CascaderService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
CascaderLiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: CascaderLiComponent, selector: "d-cascader-li", inputs: { width: "width", trigger: "trigger", option: "option", multiple: "multiple", canSelectParent: "canSelectParent", colIndex: "colIndex", dropDownItemTemplate: "dropDownItemTemplate", isLazyLoad: "isLazyLoad", checkboxRelation: "checkboxRelation" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter($event)" } }, ngImport: i0, template: "<li *ngIf=\"!isLeaf\" role=\"menuitem\" [ngClass]=\"{ disabled: option.disabled, 'devui-leaf-active': option.active }\" (click)=\"clickItem()\">\n  <div class=\"devui-dropdown-item\">\n    <d-checkbox\n      *ngIf=\"multiple\"\n      class=\"devui-dropdown-item-checkbox\"\n      [disabled]=\"option.disabled\"\n      [isShowTitle]=\"false\"\n      [halfchecked]=\"option.halfChecked\"\n      (click)=\"clickCheckbox($event)\"\n      [ngModel]=\"option.checked\"\n      [beforeChange]=\"avoidCheckboxChange\"\n    ></d-checkbox>\n    <i *ngIf=\"option.icon\" class=\"icon {{ option.icon }}\"></i>\n    <span class=\"dropdown-item-label\">\n      <ng-template\n        [ngTemplateOutlet]=\"dropDownItemTemplate || defaultDropdownItemTemplate\"\n        [ngTemplateOutletContext]=\"{\n          label: option.label,\n          option: option\n        }\"\n      >\n      </ng-template>\n    </span>\n    <svg\n      style=\"float: right\"\n      width=\"16px\"\n      height=\"16px\"\n      viewBox=\"0 0 16 16\"\n      class=\"icon devui-cascader-icon-right\"\n      *ngIf=\"!option._loading\"\n    >\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <polygon\n          fill=\"#293040\"\n          fill-rule=\"nonzero\"\n          transform=\"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) \"\n          points=\"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8\"\n        ></polygon>\n      </g>\n    </svg>\n    <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" style=\"float: right\" class=\"icon devui-cascader-loading\" *ngIf=\"option._loading\">\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          d=\"M8,1 C8.55228475,1 9,1.44771525 9,2 L9,4 C9,4.55228475 8.55228475,5 8,5 C7.44771525,5 7,4.55228475 7,4 L7,2 C7,1.44771525 7.44771525,1 8,1 Z M8,11 C8.55228475,11 9,11.4477153 9,12 L9,14 C9,14.5522847 8.55228475,15 8,15 C7.44771525,15 7,14.5522847 7,14 L7,12 C7,11.4477153 7.44771525,11 8,11 Z M15,8 C15,8.55228475 14.5522847,9 14,9 L12,9 C11.4477153,9 11,8.55228475 11,8 C11,7.44771525 11.4477153,7 12,7 L14,7 C14.5522847,7 15,7.44771525 15,8 Z M5,8 C5,8.55228475 4.55228475,9 4,9 L2,9 C1.44771525,9 1,8.55228475 1,8 C1,7.44771525 1.44771525,7 2,7 L4,7 C4.55228475,7 5,7.44771525 5,8 Z M12.9497475,3.05025253 C13.3402718,3.44077682 13.3402718,4.0739418 12.9497475,4.46446609 L11.5355339,5.87867966 C11.1450096,6.26920395 10.5118446,6.26920395 10.1213203,5.87867966 C9.73079605,5.48815536 9.73079605,4.85499039 10.1213203,4.46446609 L11.5355339,3.05025253 C11.9260582,2.65972824 12.5592232,2.65972824 12.9497475,3.05025253 Z M5.87867966,10.1213203 C6.26920395,10.5118446 6.26920395,11.1450096 5.87867966,11.5355339 L4.46446609,12.9497475 C4.0739418,13.3402718 3.44077682,13.3402718 3.05025253,12.9497475 C2.65972824,12.5592232 2.65972824,11.9260582 3.05025253,11.5355339 L4.46446609,10.1213203 C4.85499039,9.73079605 5.48815536,9.73079605 5.87867966,10.1213203 Z M12.9497475,12.9497475 C12.5592232,13.3402718 11.9260582,13.3402718 11.5355339,12.9497475 L10.1213203,11.5355339 C9.73079605,11.1450096 9.73079605,10.5118446 10.1213203,10.1213203 C10.5118446,9.73079605 11.1450096,9.73079605 11.5355339,10.1213203 L12.9497475,11.5355339 C13.3402718,11.9260582 13.3402718,12.5592232 12.9497475,12.9497475 Z M5.87867966,5.87867966 C5.48815536,6.26920395 4.85499039,6.26920395 4.46446609,5.87867966 L3.05025253,4.46446609 C2.65972824,4.0739418 2.65972824,3.44077682 3.05025253,3.05025253 C3.44077682,2.65972824 4.0739418,2.65972824 4.46446609,3.05025253 L5.87867966,4.46446609 C6.26920395,4.85499039 6.26920395,5.48815536 5.87867966,5.87867966 Z\"\n          fill=\"#293040\"\n        ></path>\n      </g>\n    </svg>\n  </div>\n</li>\n\n<li *ngIf=\"isLeaf\" role=\"menuitem\" (click)=\"clickLeaf()\" [ngClass]=\"{ disabled: option.disabled, 'devui-leaf-active': option.active }\">\n  <div class=\"devui-dropdown-item\">\n    <d-checkbox\n      *ngIf=\"multiple\"\n      class=\"devui-dropdown-item-checkbox\"\n      [disabled]=\"option.disabled\"\n      [isShowTitle]=\"false\"\n      [halfchecked]=\"option.halfChecked\"\n      (click)=\"clickCheckbox($event)\"\n      [ngModel]=\"option.checked\"\n      (ngModelChange)=\"updateValue($event)\"\n      [beforeChange]=\"avoidCheckboxChange\"\n    ></d-checkbox>\n    <i *ngIf=\"option.icon\" class=\"icon {{ option.icon }}\"></i>\n    <span class=\"dropdown-item-label\">\n      <ng-template\n        [ngTemplateOutlet]=\"dropDownItemTemplate || defaultDropdownItemTemplate\"\n        [ngTemplateOutletContext]=\"{\n          source: option,\n          label: option.label\n        }\"\n      >\n      </ng-template>\n    </span>\n  </div>\n</li>\n\n<ng-template #defaultDropdownItemTemplate let-label=\"label\">\n  <span>{{ label }}</span>\n</ng-template>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}.devui-dropdown-menu{padding-bottom:0}.devui-dropdown-item{height:32px;padding:8px 12px;cursor:pointer;display:flex;align-items:center}.devui-dropdown-item .dropdown-item-label{display:inline-block;color:#252b3a;color:var(--devui-text, #252b3a);flex:1;width:0;overflow:hidden;text-overflow:ellipsis}.devui-dropdown-item i{color:#babbc0;color:var(--devui-placeholder, #babbc0)}.devui-dropdown-item-checkbox{display:inline-block;margin-right:4px}.devui-dropdown-item .icon{font-size:16px;font-size:var(--devui-font-size-icon, 16px);margin-right:4px;color:#252b3a;color:var(--devui-text, #252b3a);display:inline-block}.devui-dropdown-menu{border-left-color:#fff!important;border-left-color:var(--devui-base-bg, #ffffff)!important;box-shadow:0 4px 8px #252b3a33;box-shadow:var(--devui-shadow-length-connected-overlay, 0 4px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2))}.devui-dropdown-open{background-color:#f2f2f3;background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-dropdown-open span,.devui-dropdown-open i{color:#526ecc;color:var(--devui-link, #526ecc)}.devui-leaf-active{background-color:#f2f2f3;background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-leaf-active span{color:#526ecc;color:var(--devui-brand-active, #526ecc)}.devui-dropdown-menu{height:180px;overflow-y:auto}.disabled{background-color:#f5f5f5!important;background-color:var(--devui-disabled-bg, #f5f5f5)!important}.disabled .devui-dropdown-item{cursor:not-allowed}.disabled .devui-dropdown-item span,.disabled .devui-dropdown-item i{color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3)}.devui-dropdown-item:not(.disabled):active:hover span{color:#fff;color:var(--devui-light-text, #ffffff)}.devui-dropdown-item:not(.disabled):active:hover .devui-cascader-icon-right polygon{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-cascader-loading{-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host:first-of-type>li{margin-top:0}:host>li{margin-top:4px}:host>li span{transition:color .1s cubic-bezier(.645,.045,.355,1),background-color .1s cubic-bezier(.645,.045,.355,1);transition:color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: 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: "component", type: i4$1.CheckBoxComponent, selector: "d-checkbox", inputs: ["name", "label", "cssClass", "color", "disabled", "isShowTitle", "title", "labelTemplate", "halfchecked", "showAnimation", "beforeChange"], outputs: ["change"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CascaderLiComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-cascader-li', template: "<li *ngIf=\"!isLeaf\" role=\"menuitem\" [ngClass]=\"{ disabled: option.disabled, 'devui-leaf-active': option.active }\" (click)=\"clickItem()\">\n  <div class=\"devui-dropdown-item\">\n    <d-checkbox\n      *ngIf=\"multiple\"\n      class=\"devui-dropdown-item-checkbox\"\n      [disabled]=\"option.disabled\"\n      [isShowTitle]=\"false\"\n      [halfchecked]=\"option.halfChecked\"\n      (click)=\"clickCheckbox($event)\"\n      [ngModel]=\"option.checked\"\n      [beforeChange]=\"avoidCheckboxChange\"\n    ></d-checkbox>\n    <i *ngIf=\"option.icon\" class=\"icon {{ option.icon }}\"></i>\n    <span class=\"dropdown-item-label\">\n      <ng-template\n        [ngTemplateOutlet]=\"dropDownItemTemplate || defaultDropdownItemTemplate\"\n        [ngTemplateOutletContext]=\"{\n          label: option.label,\n          option: option\n        }\"\n      >\n      </ng-template>\n    </span>\n    <svg\n      style=\"float: right\"\n      width=\"16px\"\n      height=\"16px\"\n      viewBox=\"0 0 16 16\"\n      class=\"icon devui-cascader-icon-right\"\n      *ngIf=\"!option._loading\"\n    >\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <polygon\n          fill=\"#293040\"\n          fill-rule=\"nonzero\"\n          transform=\"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) \"\n          points=\"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8\"\n        ></polygon>\n      </g>\n    </svg>\n    <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" style=\"float: right\" class=\"icon devui-cascader-loading\" *ngIf=\"option._loading\">\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          d=\"M8,1 C8.55228475,1 9,1.44771525 9,2 L9,4 C9,4.55228475 8.55228475,5 8,5 C7.44771525,5 7,4.55228475 7,4 L7,2 C7,1.44771525 7.44771525,1 8,1 Z M8,11 C8.55228475,11 9,11.4477153 9,12 L9,14 C9,14.5522847 8.55228475,15 8,15 C7.44771525,15 7,14.5522847 7,14 L7,12 C7,11.4477153 7.44771525,11 8,11 Z M15,8 C15,8.55228475 14.5522847,9 14,9 L12,9 C11.4477153,9 11,8.55228475 11,8 C11,7.44771525 11.4477153,7 12,7 L14,7 C14.5522847,7 15,7.44771525 15,8 Z M5,8 C5,8.55228475 4.55228475,9 4,9 L2,9 C1.44771525,9 1,8.55228475 1,8 C1,7.44771525 1.44771525,7 2,7 L4,7 C4.55228475,7 5,7.44771525 5,8 Z M12.9497475,3.05025253 C13.3402718,3.44077682 13.3402718,4.0739418 12.9497475,4.46446609 L11.5355339,5.87867966 C11.1450096,6.26920395 10.5118446,6.26920395 10.1213203,5.87867966 C9.73079605,5.48815536 9.73079605,4.85499039 10.1213203,4.46446609 L11.5355339,3.05025253 C11.9260582,2.65972824 12.5592232,2.65972824 12.9497475,3.05025253 Z M5.87867966,10.1213203 C6.26920395,10.5118446 6.26920395,11.1450096 5.87867966,11.5355339 L4.46446609,12.9497475 C4.0739418,13.3402718 3.44077682,13.3402718 3.05025253,12.9497475 C2.65972824,12.5592232 2.65972824,11.9260582 3.05025253,11.5355339 L4.46446609,10.1213203 C4.85499039,9.73079605 5.48815536,9.73079605 5.87867966,10.1213203 Z M12.9497475,12.9497475 C12.5592232,13.3402718 11.9260582,13.3402718 11.5355339,12.9497475 L10.1213203,11.5355339 C9.73079605,11.1450096 9.73079605,10.5118446 10.1213203,10.1213203 C10.5118446,9.73079605 11.1450096,9.73079605 11.5355339,10.1213203 L12.9497475,11.5355339 C13.3402718,11.9260582 13.3402718,12.5592232 12.9497475,12.9497475 Z M5.87867966,5.87867966 C5.48815536,6.26920395 4.85499039,6.26920395 4.46446609,5.87867966 L3.05025253,4.46446609 C2.65972824,4.0739418 2.65972824,3.44077682 3.05025253,3.05025253 C3.44077682,2.65972824 4.0739418,2.65972824 4.46446609,3.05025253 L5.87867966,4.46446609 C6.26920395,4.85499039 6.26920395,5.48815536 5.87867966,5.87867966 Z\"\n          fill=\"#293040\"\n        ></path>\n      </g>\n    </svg>\n  </div>\n</li>\n\n<li *ngIf=\"isLeaf\" role=\"menuitem\" (click)=\"clickLeaf()\" [ngClass]=\"{ disabled: option.disabled, 'devui-leaf-active': option.active }\">\n  <div class=\"devui-dropdown-item\">\n    <d-checkbox\n      *ngIf=\"multiple\"\n      class=\"devui-dropdown-item-checkbox\"\n      [disabled]=\"option.disabled\"\n      [isShowTitle]=\"false\"\n      [halfchecked]=\"option.halfChecked\"\n      (click)=\"clickCheckbox($event)\"\n      [ngModel]=\"option.checked\"\n      (ngModelChange)=\"updateValue($event)\"\n      [beforeChange]=\"avoidCheckboxChange\"\n    ></d-checkbox>\n    <i *ngIf=\"option.icon\" class=\"icon {{ option.icon }}\"></i>\n    <span class=\"dropdown-item-label\">\n      <ng-template\n        [ngTemplateOutlet]=\"dropDownItemTemplate || defaultDropdownItemTemplate\"\n        [ngTemplateOutletContext]=\"{\n          source: option,\n          label: option.label\n        }\"\n      >\n      </ng-template>\n    </span>\n  </div>\n</li>\n\n<ng-template #defaultDropdownItemTemplate let-label=\"label\">\n  <span>{{ label }}</span>\n</ng-template>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}.devui-dropdown-menu{padding-bottom:0}.devui-dropdown-item{height:32px;padding:8px 12px;cursor:pointer;display:flex;align-items:center}.devui-dropdown-item .dropdown-item-label{display:inline-block;color:#252b3a;color:var(--devui-text, #252b3a);flex:1;width:0;overflow:hidden;text-overflow:ellipsis}.devui-dropdown-item i{color:#babbc0;color:var(--devui-placeholder, #babbc0)}.devui-dropdown-item-checkbox{display:inline-block;margin-right:4px}.devui-dropdown-item .icon{font-size:16px;font-size:var(--devui-font-size-icon, 16px);margin-right:4px;color:#252b3a;color:var(--devui-text, #252b3a);display:inline-block}.devui-dropdown-menu{border-left-color:#fff!important;border-left-color:var(--devui-base-bg, #ffffff)!important;box-shadow:0 4px 8px #252b3a33;box-shadow:var(--devui-shadow-length-connected-overlay, 0 4px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2))}.devui-dropdown-open{background-color:#f2f2f3;background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-dropdown-open span,.devui-dropdown-open i{color:#526ecc;color:var(--devui-link, #526ecc)}.devui-leaf-active{background-color:#f2f2f3;background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-leaf-active span{color:#526ecc;color:var(--devui-brand-active, #526ecc)}.devui-dropdown-menu{height:180px;overflow-y:auto}.disabled{background-color:#f5f5f5!important;background-color:var(--devui-disabled-bg, #f5f5f5)!important}.disabled .devui-dropdown-item{cursor:not-allowed}.disabled .devui-dropdown-item span,.disabled .devui-dropdown-item i{color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3)}.devui-dropdown-item:not(.disabled):active:hover span{color:#fff;color:var(--devui-light-text, #ffffff)}.devui-dropdown-item:not(.disabled):active:hover .devui-cascader-icon-right polygon{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-cascader-loading{-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host:first-of-type>li{margin-top:0}:host>li{margin-top:4px}:host>li span{transition:color .1s cubic-bezier(.645,.045,.355,1),background-color .1s cubic-bezier(.645,.045,.355,1);transition:color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}\n"] }]
        }], ctorParameters: function () { return [{ type: CascaderService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { width: [{
                type: Input
            }], trigger: [{
                type: Input
            }], option: [{
                type: Input
            }], multiple: [{
                type: Input
            }], canSelectParent: [{
                type: Input
            }], colIndex: [{
                type: Input
            }], dropDownItemTemplate: [{
                type: Input
            }], isLazyLoad: [{
                type: Input
            }], checkboxRelation: [{
                type: Input
            }], onClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }], onMouseEnter: [{
                type: HostListener,
                args: ['mouseenter', ['$event']]
            }] } });

const DEBOUNCE_TIME = 200;
class CascaderComponent {
    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.showAnimation = true;
        this.toggleEvent = new EventEmitter();
        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;
    }
    set loadChildrenFn(fn) {
        this.isLazyLoad = !!fn;
        if (fn) {
            this.cascaderSrv.loadChildrenFn = fn;
        }
    }
    get columnList() {
        return this.cascaderSrv.columnList;
    }
    get searchResultList() {
        return this.cascaderSrv.searchResultList;
    }
    // 获取整颗树的公共方法
    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.initObservale();
        this.initI18n();
    }
    ngOnChanges(change) {
        if (change && change['options'] && !change.options.firstChange) {
            this.cascaderSrv.initOptions(this.options);
        }
        else if (change && change['canSelectParent'] && !change.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);
                    }
                }
                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);
        // 当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);
            }
        }
    }
    // 从路径数组中获取所有tag的值，并让对应checkbox激活
    getMultipleValueFromValueList(valueList) {
        const targetList = [];
        valueList.forEach(value => {
            let cur;
            let list = this.cascaderSrv.options;
            for (let i = 0; i < value.length; i++) {
                cur = list.find(l => l.value === value[i]);
                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);
                this.cascaderSrv.updateOptionCheckedStatus(cur.value, true, this.checkboxRelation.upward, this.checkboxRelation.downward);
            }
        });
        return targetList;
    }
    // 获取路径末的label
    getLabelFromValue(value) {
        let cur;
        let list = this.cascaderSrv.options;
        value.map(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.map((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.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.map(t => { t.offsetX = offsetRight < 0 ? offsetRight : 0; });
            this.dropdownComp.reposition();
        }, 0);
    }
    ngOnDestroy() {
        this.unsubscribe$.next();
        this.unsubscribe$.complete();
        this.searchValueChange.complete();
    }
}
CascaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CascaderComponent, deps: [{ token: CascaderService }, { token: i2.I18nService }, { token: i3.DevConfigService }], target: i0.ɵɵFactoryTarget.Component });
CascaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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", showAnimation: "showAnimation", loadChildrenFn: "loadChildrenFn" }, outputs: { toggleEvent: "toggleEvent" }, 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: "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>\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\r\n  <ng-template #default>\r\n    <input\r\n      *ngIf=\"!multiple\"\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\">\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\" [ngClass]=\"{ 'dropdown-show-clear': allowClear }\">\r\n        <span class=\"devui-drop-icon\" [ngClass]=\"{ 'devui-drop-icon-animation': showAnimation }\">\r\n          <svg\r\n            width=\"1em\"\r\n            height=\"1em\"\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=\"M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z\"\r\n                fill-rule=\"nonzero\"\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\" [ngClass]=\"{ 'dropdown-show-clear': allowClear }\">\r\n      <span class=\"devui-drop-icon\" [ngClass]=\"{ 'devui-drop-icon-animation': showAnimation }\">\r\n        <svg\r\n          width=\"1em\"\r\n          height=\"1em\"\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=\"M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z\"\r\n              fill-rule=\"nonzero\"\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\"\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\"\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      [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\">\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\" [ngClass]=\"{ 'dropdown-show-clear': allowClear }\">\r\n        <span class=\"devui-drop-icon\" [ngClass]=\"{ 'devui-drop-icon-animation': showAnimation }\">\r\n          <svg\r\n            width=\"1em\"\r\n            height=\"1em\"\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=\"M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z\"\r\n                fill-rule=\"nonzero\"\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\" [ngClass]=\"{ 'dropdown-show-clear': allowClear }\">\r\n      <span class=\"devui-drop-icon\" [ngClass]=\"{ 'devui-drop-icon-animation': showAnimation }\">\r\n        <svg\r\n          width=\"1em\"\r\n          height=\"1em\"\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=\"M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z\"\r\n              fill-rule=\"nonzero\"\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\"\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\"\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:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}.devui-dropdown-menu{padding-bottom:0}.devui-dropdown-item{height:32px;padding:8px 12px}.devui-dropdown-open input{border:1px solid #5e7ce0;border:1px solid var(--devui-brand, #5e7ce0)}.devui-dropdown-open input::-webkit-input-placeholder{color:#252b3a;color:var(--devui-text, #252b3a)}.devui-dropdown-open .devui-drop-icon svg{transform:rotate(180deg)}.devui-dropdown-open .devui-tags-input-wrapper{border-color:#5e7ce0;border-color:var(--devui-brand, #5e7ce0);border-radius:2px;border-radius:var(--devui-border-radius, 2px)}.devui-input{padding-right:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:default}.devui-search-cascader{cursor:text}.devui-cascader-list{border-left:1px solid #f2f2f3;border-left:1px solid var(--devui-dividing-line, #f2f2f3);height:180px;overflow-y:auto;overflow-y:overlay;display:inline-block;font-size:12px;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:#f2f2f3;background-color:var(--devui-list-item-hover-bg, #f2f2f3);color:#526ecc;color:var(--devui-link, #526ecc)}::ng-deep .devui-dropdown-top .devui-cascader-list{border-top-color:#5e7ce0!important;border-top-color:var(--devui-brand, #5e7ce0)!important;border-bottom-color:#f2f2f3!important;border-bottom-color:var(--devui-dividing-line, #f2f2f3)!important;box-shadow:none;box-shadow:initial}.devui-drop-no-data{height:auto;display:block}.devui-drop-icon{width:1em;height:1em;display:inline-block;line-height:1em;vertical-align:middle}.devui-drop-icon svg path{fill:#252b3a;fill:var(--devui-text, #252b3a)}.devui-drop-icon-animation svg{transition:transform .3s cubic-bezier(.645,.045,.355,1);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:16px;font-size:var(--devui-font-size-icon, 16px);cursor:pointer;width:12px;height:12px;line-height:12px;background-color:#d7d8da;background-color:var(--devui-line, #d7d8da);border-radius:50%;text-align:center}.devui-cascader-close-icon svg path{fill:#fff;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:4px;width:1em;display:flex}.devui-tags-input-wrapper{border:1px solid #d7d8da;border:1px solid var(--devui-line, #d7d8da);display:inline-flex;width:100%;border-radius:2px;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 20px;padding:0;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:#ffffff;background:var(--devui-base-bg, #ffffff);color:#252b3a;color:var(--devui-text, #252b3a);padding:0 8px}.devui-tags-input-wrapper:hover{border-color:#71757f;border-color:var(--devui-aide-text, #71757f)}.devui-dropdown-placeholder{line-height:22px;margin-left:8px;color:#babbc0;color:var(--devui-placeholder, #babbc0)}.devui-drop-menu-wrapper{white-space:nowrap;font-size:0}\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"], 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"] }, { kind: "component", type: i7.TagComponent, selector: "d-tag", inputs: ["tag", "labelStyle", "customColor", "deletable", "titleContent", "mode", "checked", "maxWidth", "customViewTemplate"], outputs: ["tagDelete", "checkedChange"], exportAs: ["Tag"] }, { kind: "component", type: 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);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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>\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\r\n  <ng-template #default>\r\n    <input\r\n      *ngIf=\"!multiple\"\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\">\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\" [ngClass]=\"{ 'dropdown-show-clear': allowClear }\">\r\n        <span class=\"devui-drop-icon\" [ngClass]=\"{ 'devui-drop-icon-animation': showAnimation }\">\r\n          <svg\r\n            width=\"1em\"\r\n            height=\"1em\"\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=\"M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z\"\r\n                fill-rule=\"nonzero\"\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\" [ngClass]=\"{ 'dropdown-show-clear': allowClear }\">\r\n      <span class=\"devui-drop-icon\" [ngClass]=\"{ 'devui-drop-icon-animation': showAnimation }\">\r\n        <svg\r\n          width=\"1em\"\r\n          height=\"1em\"\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=\"M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z\"\r\n              fill-rule=\"nonzero\"\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\"\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\"\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      [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\">\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\" [ngClass]=\"{ 'dropdown-show-clear': allowClear }\">\r\n        <span class=\"devui-drop-icon\" [ngClass]=\"{ 'devui-drop-icon-animation': showAnimation }\">\r\n          <svg\r\n            width=\"1em\"\r\n            height=\"1em\"\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=\"M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z\"\r\n                fill-rule=\"nonzero\"\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\" [ngClass]=\"{ 'dropdown-show-clear': allowClear }\">\r\n      <span class=\"devui-drop-icon\" [ngClass]=\"{ 'devui-drop-icon-animation': showAnimation }\">\r\n        <svg\r\n          width=\"1em\"\r\n          height=\"1em\"\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=\"M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z\"\r\n              fill-rule=\"nonzero\"\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\"\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\"\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:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}.devui-dropdown-menu{padding-bottom:0}.devui-dropdown-item{height:32px;padding:8px 12px}.devui-dropdown-open input{border:1px solid #5e7ce0;border:1px solid var(--devui-brand, #5e7ce0)}.devui-dropdown-open input::-webkit-input-placeholder{color:#252b3a;color:var(--devui-text, #252b3a)}.devui-dropdown-open .devui-drop-icon svg{transform:rotate(180deg)}.devui-dropdown-open .devui-tags-input-wrapper{border-color:#5e7ce0;border-color:var(--devui-brand, #5e7ce0);border-radius:2px;border-radius:var(--devui-border-radius, 2px)}.devui-input{padding-right:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:default}.devui-search-cascader{cursor:text}.devui-cascader-list{border-left:1px solid #f2f2f3;border-left:1px solid var(--devui-dividing-line, #f2f2f3);height:180px;overflow-y:auto;overflow-y:overlay;display:inline-block;font-size:12px;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:#f2f2f3;background-color:var(--devui-list-item-hover-bg, #f2f2f3);color:#526ecc;color:var(--devui-link, #526ecc)}::ng-deep .devui-dropdown-top .devui-cascader-list{border-top-color:#5e7ce0!important;border-top-color:var(--devui-brand, #5e7ce0)!important;border-bottom-color:#f2f2f3!important;border-bottom-color:var(--devui-dividing-line, #f2f2f3)!important;box-shadow:none;box-shadow:initial}.devui-drop-no-data{height:auto;display:block}.devui-drop-icon{width:1em;height:1em;display:inline-block;line-height:1em;vertical-align:middle}.devui-drop-icon svg path{fill:#252b3a;fill:var(--devui-text, #252b3a)}.devui-drop-icon-animation svg{transition:transform .3s cubic-bezier(.645,.045,.355,1);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:16px;font-size:var(--devui-font-size-icon, 16px);cursor:pointer;width:12px;height:12px;line-height:12px;background-color:#d7d8da;background-color:var(--devui-line, #d7d8da);border-radius:50%;text-align:center}.devui-cascader-close-icon svg path{fill:#fff;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:4px;width:1em;display:flex}.devui-tags-input-wrapper{border:1px solid #d7d8da;border:1px solid var(--devui-line, #d7d8da);display:inline-flex;width:100%;border-radius:2px;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 20px;padding:0;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:#ffffff;background:var(--devui-base-bg, #ffffff);color:#252b3a;color:var(--devui-text, #252b3a);padding:0 8px}.devui-tags-input-wrapper:hover{border-color:#71757f;border-color:var(--devui-aide-text, #71757f)}.devui-dropdown-placeholder{line-height:22px;margin-left:8px;color:#babbc0;color:var(--devui-placeholder, #babbc0)}.devui-drop-menu-wrapper{white-space:nowrap;font-size:0}\n"] }]
        }], ctorParameters: function () { return [{ type: CascaderService }, { type: i2.I18nService }, { type: i3.DevConfigService }]; }, propDecorators: { mainDropdown: [{
                type: ViewChild,
                args: ['mainDropdown']
            }], innerInput: [{
                type: ViewChild,
                args: ['innerInput']
            }], dropdownComp: [{
                type: ViewChild,
                args: [DropDownAppendToBodyComponent, { static: false }]
            }], options: [{
                type: Input
            }], width: [{
                type: Input
            }], dropdownWidth: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], trigger: [{
                type: Input
            }], disabled: [{
                type: Input
            }], multiple: [{
                type: Input
            }], showPath: [{
                type: Input
            }], allowClear: [{
                type: Input
            }], allowSearch: [{
                type: Input
            }], canSelectParent: [{
                type: Input
            }], checkboxRelation: [{
                type: Input
            }], dropDownItemTemplate: [{
                type: Input
            }], dropdownHeaderTemplate: [{
                type: Input
            }], hostTemplate: [{
                type: Input
            }], dropdownPanelClass: [{
                type: Input
            }], appendToBody: [{
                type: Input
            }], showAnimation: [{
                type: Input
            }], loadChildrenFn: [{
                type: Input
            }], toggleEvent: [{
                type: Output
            }] } });

class CascaderModule {
}
CascaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CascaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CascaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: CascaderModule, declarations: [CascaderComponent,
        CascaderLiComponent], imports: [CommonModule,
        SelectModule,
        FormsModule,
        DropDownModule,
        TagsModule,
        CheckBoxModule], exports: [CascaderComponent] });
CascaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CascaderModule, imports: [CommonModule,
        SelectModule,
        FormsModule,
        DropDownModule,
        TagsModule,
        CheckBoxModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CascaderModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        CascaderComponent,
                        CascaderLiComponent
                    ],
                    imports: [
                        CommonModule,
                        SelectModule,
                        FormsModule,
                        DropDownModule,
                        TagsModule,
                        CheckBoxModule
                    ],
                    exports: [CascaderComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { CascaderComponent, CascaderLiComponent, CascaderModule, CascaderService };
//# sourceMappingURL=ng-devui-cascader.mjs.map
