import { __decorate, __metadata } from "tslib";
import { Component, ElementRef, EventEmitter, forwardRef, Input, Output, TemplateRef, ViewChild } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { DropDownAppendToBodyComponent, DropDownDirective } from 'ng-devui/dropdown';
import { I18nService } from 'ng-devui/i18n';
import { DevConfigService, WithConfig } from 'ng-devui/utils';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, filter, takeUntil } from 'rxjs/operators';
import { CascaderService } from './cascader.service';
import * as i0 from "@angular/core";
import * as i1 from "./cascader.service";
import * as i2 from "ng-devui/i18n";
import * as i3 from "ng-devui/utils";
import * as i4 from "@angular/common";
import * as i5 from "@angular/forms";
import * as i6 from "ng-devui/dropdown";
import * as i7 from "ng-devui/tags";
import * as i8 from "./cascader-li.component";
const DEBOUNCE_TIME = 200;
export class CascaderComponent {
    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: i1.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: i8.CascaderLiComponent, selector: "d-cascader-li", inputs: ["width", "trigger", "option", "multiple", "canSelectParent", "colIndex", "dropDownItemTemplate", "isLazyLoad", "checkboxRelation"] }] });
__decorate([
    WithConfig(),
    __metadata("design:type", Object)
], CascaderComponent.prototype, "showAnimation", void 0);
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: i1.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
            }] } });
//# sourceMappingURL=data:application/json;base64, 