ng-devui/esm2022/tree-select/tree-select.component.mjs

DevUI components based on Angular

import { __decorate, __metadata } from "tslib";
import { ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, forwardRef, HostBinding, Input, Output, Renderer2, TemplateRef, ViewChild } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { I18nService } from 'ng-devui/i18n';
import { SearchComponent } from 'ng-devui/search';
import { OperableTreeComponent } from 'ng-devui/tree';
import { addClassToOrigin, DevConfigService, removeClassFromOrigin, WithConfig } from 'ng-devui/utils';
import { trim } from 'lodash-es';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
import DefaultIcons from './tree-default-icons';
import * as i0 from "@angular/core";
import * as i1 from "ng-devui/i18n";
import * as i2 from "ng-devui/utils";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
import * as i5 from "ng-devui/tree";
import * as i6 from "ng-devui/search";
export class TreeSelectComponent {
    set allowClear(allowClear) {
        // 废弃
        this._allowClear = allowClear;
    }
    get allowClear() {
        return !this.disabled && !this.multiple && !this.enableLabelization && this.allowUnselect && this._allowClear && !!this.selectedValue;
    }
    set treeData(treeData) {
        this._sourceTree = treeData;
        this.refreshTree(treeData);
    }
    get treeData() {
        return this._treeData;
    }
    get isOpen() {
        return this._isOpen;
    }
    set isOpen(value) {
        if (this._isOpen !== value) {
            this._isOpen = value;
            if (!value) {
                removeClassFromOrigin(this.selectHost);
                this.onTouch();
            }
            else {
                addClassToOrigin(this.selectHost);
            }
            this.changeDetectorRef.detectChanges();
        }
    }
    set value(val) {
        this._value = val;
        if (val && Array.isArray(val) && val.length) {
            this.valueType = 'array';
            this.valueLength = val.length;
        }
        else if (val && Object.keys(val).length) {
            this.valueType = 'object';
        }
        else {
            this.valueType = undefined;
        }
    }
    get value() {
        return this._value;
    }
    constructor(renderer, changeDetectorRef, i18n, devConfigService) {
        this.renderer = renderer;
        this.changeDetectorRef = changeDetectorRef;
        this.i18n = i18n;
        this.devConfigService = devConfigService;
        this.checkableRelation = 'both';
        this.showAnimation = true;
        this.styleType = 'default';
        this.showGlowStyle = true;
        this.placeholder = '';
        this.searchPlaceholder = '';
        this.disabled = false;
        this.expandTree = false;
        this.multiple = false;
        this.treeNodeIdKey = 'id';
        this.treeNodeChildrenKey = 'children';
        this.treeNodeTitleKey = 'title';
        this.disabledKey = 'disabled';
        this.leafOnly = false;
        this.delimiter = ', '; // 废弃
        this.iconParentOpen = DefaultIcons.iconParentOpen;
        this.iconParentClose = DefaultIcons.iconParentClose;
        this.iconLeaf = DefaultIcons.iconLeaf;
        this.closeOnNodeSelected = true;
        this.width = null;
        this.searchable = false;
        this.appendTo = 'body';
        this.allowUnselect = true;
        this.enableLabelization = true;
        this.customViewDirection = 'bottom';
        // TODO: need to change to nodeToggledEvent
        this.nodeToggleEvent = new EventEmitter();
        this.valueChanged = new EventEmitter();
        this.toggleChange = new EventEmitter();
        this.virtualScroll = false;
        this.virtualScrollItemSize = 30;
        this.virtualScrollMinBufferPx = 300;
        this.virtualScrollMaxBufferPx = 600;
        this.virtualScrollHeightPx = 300;
        this._treeData = [];
        this.searchString = null;
        this.noRecord = false;
        this.destroy$ = new Subject();
        this._isOpen = false;
        this._sourceTree = [];
        this.readyEvent = (treeSelect) => { };
        this.onChange = (_) => null;
        this.onTouch = () => null;
    }
    get hasGlowStyle() {
        return this.showGlowStyle;
    }
    ngAfterViewInit() {
        this.changeDetectorRef.detectChanges();
        this.readyEvent(this);
        if (this.searchable) {
            this.registerSearchListener();
        }
    }
    ngOnChanges(changes) { }
    ngOnDestroy() {
        if (this.i18nSubscription) {
            this.i18nSubscription.unsubscribe();
        }
        this.isOpen = false; // 销毁Popper
        this.destroy$.next();
        this.destroy$.complete();
    }
    ngOnInit() {
        this.setI18nText();
        this.queryMedia();
    }
    afterTreeInit() {
        if (this.virtualScroll) {
            this.tree.treeFactory.flattenNodes.pipe(takeUntil(this.destroy$)).subscribe((data) => {
                const treeNodeOnDisplay = data.filter((node) => !(node.data.isHide || node.data.hideInVirtualScroll));
                this.validVirtualScrollHeight = Math.min(treeNodeOnDisplay.length * this.virtualScrollItemSize, this.virtualScrollHeightPx);
            });
        }
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouch = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    writeValue(value) {
        this.value = this.multiple ? Object.assign([], value) : value;
        this.refreshTree(this.treeData);
        // Trigger visualization after tree data is fulfilled.
        this.changeDetectorRef.detectChanges();
        this.visualizeSelectedItems();
    }
    toggle() {
        if (this.disabled) {
            return;
        }
        if (this.timer) {
            clearTimeout(this.timer);
        }
        const applyNow = !this.timer;
        this.timer = setTimeout(() => {
            this.timer = null;
        }, 200);
        if (applyNow) {
            this.isOpen = !this.isOpen;
        }
    }
    setI18nText() {
        this.i18nCommonText = this.i18n.getI18nText().common;
        this.i18nSubscription = this.i18n.langChange().subscribe((data) => {
            this.i18nCommonText = data.common;
        });
    }
    queryMedia() {
        if (typeof window === 'undefined') {
            return;
        }
        const userAgent = window.navigator.userAgent;
        if (userAgent.indexOf('Edge') > -1) {
            this.userAgent = 'edge';
        }
        else if (userAgent.indexOf('MSIE') > -1 || userAgent.indexOf('Trident/') > -1) {
            this.userAgent = 'ie';
        }
        else if (userAgent.indexOf('Firefox') > -1) {
            this.userAgent = 'firefox';
        }
        else {
            this.userAgent = 'chrome';
        }
    }
    prepareTree(treeNode, expandTree = false) {
        if (Array.isArray(treeNode)) {
            return treeNode.map((node) => this.prepareTree(node, expandTree));
        }
        else if (treeNode) {
            let parentCheckedByChildren = false;
            if (Object.prototype.hasOwnProperty.call(treeNode, this.treeNodeChildrenKey)) {
                treeNode.open = expandTree ? true : treeNode.open;
                treeNode[this.treeNodeChildrenKey] = this.prepareTree(treeNode[this.treeNodeChildrenKey], expandTree);
                if (this.multiple) {
                    [parentCheckedByChildren, treeNode.halfChecked] = this.resolveParentNode(treeNode[this.treeNodeChildrenKey]);
                }
            }
            if (Object.prototype.hasOwnProperty.call(treeNode, this.treeNodeIdKey)) {
                const nodeId = treeNode[this.treeNodeIdKey];
                if (this.multiple) {
                    const selectedByValue = this.nodeSelected(nodeId);
                    treeNode.isActive = false;
                    treeNode.isChecked = selectedByValue || parentCheckedByChildren;
                    if (!this.leafOnly && !selectedByValue && parentCheckedByChildren) {
                        const insertObject = {};
                        insertObject[this.treeNodeIdKey] = treeNode[this.treeNodeIdKey];
                        insertObject[this.treeNodeTitleKey] = treeNode[this.treeNodeTitleKey];
                        this.value.push(insertObject);
                        // 赋值触发setValue设置valueType和valueLength
                        /* eslint-disable-next-line no-self-assign*/
                        this.value = this.value;
                    }
                }
                else {
                    treeNode.isChecked = false;
                    treeNode.isActive = this.nodeSelected(nodeId);
                    if (treeNode.isActive) {
                        this.currentActiveNode = treeNode;
                    }
                }
            }
            return treeNode;
        }
    }
    nodeSelected(treeNodeId) {
        if (!this.value) {
            return false;
        }
        if (this.multiple && Array.isArray(this.value)) {
            // polyfill Array.prototype.includes()
            return this.value.map((_) => _[this.treeNodeIdKey]).indexOf(treeNodeId) > -1;
        }
        else {
            return this.value[this.treeNodeIdKey] && treeNodeId === this.value[this.treeNodeIdKey];
        }
    }
    resolveParentNode(treeNodes) {
        const enableParentNodeCheckByChild = this.checkableRelation === 'both' || this.checkableRelation === 'upward';
        const childrenFullCheckedCount = enableParentNodeCheckByChild && treeNodes.filter((_) => _.isChecked).length;
        const childrenCheckedCount = enableParentNodeCheckByChild && treeNodes.filter((_) => _.isChecked || _.halfChecked).length;
        return [
            childrenFullCheckedCount > 0 && treeNodes.length === childrenFullCheckedCount,
            childrenCheckedCount > 0 && treeNodes.length > childrenFullCheckedCount,
        ];
    }
    refreshTree(treeData) {
        this._treeData = Object.assign([], this.prepareTree(treeData, this.expandTree));
    }
    onOperableNodeChecked(selectedNodes) {
        const selectedValueExtractor = (_selectedNodes) => {
            return this.leafOnly
                ? _selectedNodes.filter((_) => !_.data.isParent).map((_) => _.data.originItem)
                : _selectedNodes.map((_) => _.data.originItem);
        };
        if (this.multiple) {
            this.value = selectedValueExtractor(selectedNodes);
            this.emitEvents();
        }
    }
    onOperableNodeSelected(selectedNode) {
        const node = selectedNode;
        if (!this.multiple) {
            if (this.leafOnly && node.data.isParent) {
                return;
            }
            if (node.data.isActive) {
                this.currentActiveNode = node.data.originItem;
                this.value = node.data.originItem;
                // Configurable close on node selected
                if (this.closeOnNodeSelected) {
                    this.isOpen = false;
                }
            }
            else {
                if (this.allowUnselect) {
                    this.currentActiveNode = null;
                    this.value = null;
                }
                else {
                    node.data.isActive = true;
                    if (this.closeOnNodeSelected) {
                        this.isOpen = false;
                    }
                }
            }
            this.emitEvents();
        }
    }
    emitEvents() {
        this.visualizeSelectedItems();
        this.onChange(this.value);
        this.valueChanged.emit(this.selectedValue());
    }
    visualizeSelectedItems() {
        if (this.multiple) {
            this.visualizeMultipleValue();
        }
        else {
            this.visualizeSingleValue();
        }
    }
    visualizeMultipleValue() {
        if (this.tree && this.tree.treeFactory) {
            const selectedNodes = this.selectedValue();
            const valueText = selectedNodes.map((_) => _[this.treeNodeTitleKey]);
            this.displayValue = valueText;
        }
        else {
            this.emptyInput();
        }
    }
    visualizeSingleValue() {
        if (this.value && this.value[this.treeNodeTitleKey]) {
            const valueText = this.value[this.treeNodeTitleKey];
            this.displayValue = valueText;
        }
        else {
            this.emptyInput();
        }
    }
    emptyInput() {
        this.displayValue = '';
    }
    selectedValue() {
        return this.value;
    }
    responsePopperChange(popperState) {
        if (popperState && this.searchable) {
            this.focusSearchInput();
        }
        if (popperState && this.virtualScroll && this.tree) {
            this.tree.operableTree.viewPort.checkViewportSize();
        }
        this.toggleChange.emit(popperState);
    }
    focusSearchInput() {
        if (this.searchInput.filterInputElement.nativeElement) {
            this.searchInput.filterInputElement.nativeElement.focus();
        }
    }
    search(searchString) {
        const searchRes = this.customSearchFn ? this.customSearchFnHandle(searchString) : this.tree.treeFactory.searchTree(searchString, true);
        if (typeof searchRes === 'boolean') {
            this.noRecord = searchRes;
        }
        else if (Array.isArray(searchRes)) {
            this.noRecord = searchRes.every((res) => !res);
        }
        this.tree.treeFactory.getFlattenNodes();
        this.popper.update();
    }
    customSearchFnHandle(searchString) {
        const keyword = trim(searchString).toLowerCase();
        this.tree.treeFactory.resetSearchResults();
        return this.customSearchFn(this.tree.treeFactory.treeRoot, keyword);
    }
    registerSearchListener() {
        this.searchInputModel.valueChanges.pipe(debounceTime(500), distinctUntilChanged()).subscribe((searchString) => {
            this.search(searchString);
        });
    }
    clearValue(event, item, index) {
        event.preventDefault();
        event.stopPropagation();
        if (this.multiple) {
            this.tree.treeFactory.checkNodesById(item[this.treeNodeIdKey], false, this.checkableRelation);
            const curValue = this.tree.treeFactory.getCheckedNodes();
            this.value = this.leafOnly
                ? curValue.filter((node) => !node.data.isParent).map((node) => node.data.originItem)
                : curValue.map((node) => node.data.originItem);
        }
        else {
            this.clearAll();
        }
        this.emitEvents();
    }
    clearAll() {
        this.tree.treeFactory.deactivateAllNodes();
        this.currentActiveNode = null;
        this.value = null;
    }
    onNodeToggled($event) {
        if (this.popper) {
            this.popper.update();
        }
        this.nodeToggleEvent.emit($event);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeSelectComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.I18nService }, { token: i2.DevConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TreeSelectComponent, selector: "d-tree-select", inputs: { checkableRelation: "checkableRelation", allowClear: "allowClear", treeData: "treeData", showAnimation: "showAnimation", styleType: "styleType", showGlowStyle: "showGlowStyle", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", disabled: "disabled", expandTree: "expandTree", multiple: "multiple", treeNodeIdKey: "treeNodeIdKey", treeNodeChildrenKey: "treeNodeChildrenKey", treeNodeTitleKey: "treeNodeTitleKey", disabledKey: "disabledKey", leafOnly: "leafOnly", delimiter: "delimiter", iconParentOpen: "iconParentOpen", iconParentClose: "iconParentClose", iconLeaf: "iconLeaf", closeOnNodeSelected: "closeOnNodeSelected", width: "width", searchable: "searchable", appendTo: "appendTo", allowUnselect: "allowUnselect", enableLabelization: "enableLabelization", iconTemplatePosition: "iconTemplatePosition", iconTemplateInput: "iconTemplateInput", customItemTemplate: "customItemTemplate", customNoDataTemplate: "customNoDataTemplate", customViewTemplate: "customViewTemplate", customSearchFn: "customSearchFn", customViewDirection: "customViewDirection", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollMinBufferPx: "virtualScrollMinBufferPx", virtualScrollMaxBufferPx: "virtualScrollMaxBufferPx", virtualScrollHeightPx: "virtualScrollHeightPx", readyEvent: "readyEvent" }, outputs: { nodeToggleEvent: "nodeToggleEvent", valueChanged: "valueChanged", toggleChange: "toggleChange" }, host: { properties: { "class.devui-glow-style": "this.hasGlowStyle" } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => TreeSelectComponent),
                multi: true,
            },
        ], queries: [{ propertyName: "iconTemplatePassThrough", first: true, predicate: ["iconTemplate"], descendants: true }], viewQueries: [{ propertyName: "selectHost", first: true, predicate: ["selectHost"], descendants: true, static: true }, { propertyName: "optionsContainer", first: true, predicate: ["optionsContainer"], descendants: true, static: true }, { propertyName: "tree", first: true, predicate: ["tree"], descendants: true, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "searchInputModel", first: true, predicate: ["searchInputModel"], descendants: true }, { propertyName: "popper", first: true, predicate: ["popper"], descendants: true, static: true }], exportAs: ["select"], usesOnChanges: true, ngImport: i0, template: "<div class=\"devui-tree-select {{ userAgent }}\">\n  <d-popper-component\n    [poppoverAppendDirection]=\"customViewDirection\"\n    [(open)]=\"isOpen\"\n    [fluidPopper]=\"!width\"\n    (openChange)=\"responsePopperChange($event)\"\n    [appendTo]=\"appendTo\"\n    [showAnimation]=\"showAnimation\"\n    #popper\n  >\n    <div\n      #selectHost\n      class=\"devui-select-input devui-form-control devui-tree-select-input devui-dropdown-origin\"\n      [class.devui-gray-style]=\"styleType === 'gray'\"\n      (click)=\"toggle()\"\n      autocomplete=\"off\"\n      [ngClass]=\"{ disabled: disabled, 'devui-select-no-label': !enableLabelization }\"\n      readonly\n      popper-activator\n    >\n      <span class=\"devui-tree-select-placeholder\">{{ !valueType ? placeholder : '' }}</span>\n      <div class=\"devui-select-item\" *ngIf=\"valueType === 'object' && enableLabelization && !customItemTemplate\">\n        <span class=\"devui-select-item-content\">{{ value[treeNodeTitleKey] }}</span>\n        <span *ngIf=\"!disabled\" class=\"devui-select-item-clear-icon\" (click)=\"clearValue($event, value)\">\n          <svg\n            width=\"6px\"\n            height=\"6px\"\n            viewBox=\"0 0 10 10\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          >\n            <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n              <g transform=\"translate(-3.000000, -3.000000)\" fill-rule=\"nonzero\">\n                <path\n                  d=\"M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z\"\n                ></path>\n              </g>\n            </g>\n          </svg>\n        </span>\n      </div>\n      <div class=\"devui-select-item devui-no-label-item\" *ngIf=\"valueType === 'object' && !enableLabelization && !customItemTemplate\">\n        {{ value[treeNodeTitleKey] }}\n      </div>\n      <div class=\"devui-select-item devui-no-label-item\" *ngIf=\"valueType === 'object' && customItemTemplate\">\n        <ng-template [ngTemplateOutlet]=\"customItemTemplate\" [ngTemplateOutletContext]=\"{ item: value }\"></ng-template>\n      </div>\n      <ul class=\"devui-select-list\" *ngIf=\"valueType === 'array' && enableLabelization && !customItemTemplate\">\n        <li class=\"devui-select-item\" *ngFor=\"let item of value; let i = index\">\n          <span class=\"devui-select-item-content\">{{ item[treeNodeTitleKey] }}</span>\n          <span *ngIf=\"!disabled\" class=\"devui-select-item-clear-icon\" (click)=\"clearValue($event, item, i)\">\n            <svg\n              width=\"6px\"\n              height=\"6px\"\n              viewBox=\"0 0 10 10\"\n              version=\"1.1\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            >\n              <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                <g transform=\"translate(-3.000000, -3.000000)\" fill-rule=\"nonzero\">\n                  <path\n                    d=\"M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z\"\n                  ></path>\n                </g>\n              </g>\n            </svg>\n          </span>\n        </li>\n      </ul>\n      <ul class=\"devui-select-list\" *ngIf=\"valueType === 'array' && !enableLabelization && !customItemTemplate\">\n        <li class=\"devui-select-item devui-no-label-item\" *ngFor=\"let item of value; let i = index\">\n          {{ item[treeNodeTitleKey] }}\n          <span *ngIf=\"valueLength && i < valueLength - 1\">, </span>\n        </li>\n      </ul>\n      <ul class=\"devui-select-list\" *ngIf=\"valueType === 'array' && customItemTemplate\">\n        <li class=\"devui-select-item devui-no-label-item\" *ngFor=\"let item of value\">\n          <ng-template [ngTemplateOutlet]=\"customItemTemplate\" [ngTemplateOutletContext]=\"{ item: item }\"></ng-template>\n        </li>\n      </ul>\n    </div>\n    <div popper-prepend class=\"devui-tree-select devui-search-container devui-form-group devui-has-feedback\" *ngIf=\"searchable\">\n      <d-search #searchInputModel=\"ngModel\" #searchInput [(ngModel)]=\"searchString\" [placeholder]=\"searchPlaceholder\"></d-search>\n    </div>\n    <div\n      class=\"devui-tree-select devui-options-container\"\n      #optionsContainer\n      popper-container\n      [ngStyle]=\"{ width: width, maxHeight: validVirtualScrollHeight === undefined ? '300px' : validVirtualScrollHeight + 'px' }\"\n    >\n      <d-operable-tree\n        #tree\n        [style.display]=\"treeData && treeData.length > 0 && !noRecord ? 'block' : 'none'\"\n        [tree]=\"treeData\"\n        [treeNodeIdKey]=\"treeNodeIdKey\"\n        [treeNodeChildrenKey]=\"treeNodeChildrenKey\"\n        [checkboxDisabledKey]=\"disabledKey\"\n        [checkboxInput]=\"checkboxInput\"\n        [checkable]=\"multiple\"\n        [checkableRelation]=\"checkableRelation\"\n        [canActivateNode]=\"!multiple\"\n        [canActivateParentNode]=\"!leafOnly\"\n        (nodeChecked)=\"onOperableNodeChecked($event)\"\n        (nodeSelected)=\"onOperableNodeSelected($event)\"\n        (nodeToggled)=\"onNodeToggled($event)\"\n        [iconParentOpen]=\"iconParentOpen\"\n        [iconParentClose]=\"iconParentClose\"\n        [iconLeaf]=\"iconLeaf\"\n        [treeNodeTitleKey]=\"treeNodeTitleKey\"\n        [iconTemplatePosition]=\"iconTemplatePosition\"\n        [virtualScroll]=\"virtualScroll\"\n        [itemSize]=\"virtualScrollItemSize\"\n        [minBufferPx]=\"virtualScrollMinBufferPx\"\n        [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n        [virtualScrollHeight]=\"validVirtualScrollHeight + 'px'\"\n        (afterTreeInit)=\"afterTreeInit()\"\n        class=\"devui-tree\"\n      >\n        <ng-template *ngIf=\"iconTemplateInput || iconTemplatePassThrough\" #iconTemplate let-node=\"node\">\n          <ng-template [ngTemplateOutlet]=\"iconTemplateInput || iconTemplatePassThrough\" [ngTemplateOutletContext]=\"{ node: node }\">\n          </ng-template>\n        </ng-template>\n      </d-operable-tree>\n      <ng-template\n        *ngIf=\"!treeData || treeData.length <= 0 || noRecord\"\n        [ngTemplateOutlet]=\"customNoDataTemplate || defaultNoResult\"\n        [ngTemplateOutletContext]=\"{ $implicit: this, isSearchResult: noRecord }\"\n      ></ng-template>\n    </div>\n\n    <!-- \u81EA\u5B9A\u4E49\u533A\u57DF -->\n    <div popper-append *ngIf=\"customViewTemplate\">\n      <ng-template [ngTemplateOutlet]=\"customViewTemplate\" [ngTemplateOutletContext]=\"{ $implicit: this }\"></ng-template>\n    </div>\n  </d-popper-component>\n  <div\n    [ngClass]=\"{ disabled: disabled, clear: allowClear }\"\n    (click)=\"$event.stopPropagation(); $event.preventDefault(); clearAll(); emitEvents()\"\n  ></div>\n  <span\n    class=\"devui-select-chevron-icon\"\n    [class.open]=\"isOpen\"\n    [ngClass]=\"{ disabled: disabled, 'allow-clear': allowClear, 'devui-select-chevron-icon-animation': showAnimation }\"\n  >\n    <svg\n      width=\"16px\"\n      height=\"16px\"\n      viewBox=\"0 0 16 16\"\n      version=\"1.1\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    >\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          d=\"M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z\"\n        ></path>\n      </g>\n    </svg>\n  </span>\n</div>\n\n<ng-template #defaultNoResult>\n  <div class=\"devui-no-data-tip\">\n    {{ noRecord ? i18nCommonText?.noRecordsFound : i18nCommonText?.noData }}\n  </div>\n</ng-template>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-tree-select{position:relative;width:100%}.devui-tree-select .devui-select-input:not([disabled]){color:var(--devui-text, #191919)}.devui-tree-select .devui-select-input.devui-tree-select-input{font-size:var(--devui-font-size, 12px);padding:2px 32px 2px 2px;height:unset;min-height:28px;max-height:52px;overflow-y:auto;line-height:22px;display:flex;text-indent:8px}.devui-tree-select .devui-select-input.devui-tree-select-input.devui-select-no-label{padding-left:8px}.devui-tree-select .devui-select-input.devui-tree-select-input>span.devui-tree-select-placeholder{text-indent:0}.devui-tree-select:hover .clear{position:absolute;height:14px;width:14px;right:12px;top:calc((100% - 14px)/2);cursor:pointer;z-index:1}.devui-tree-select:hover .clear:after,.devui-tree-select:hover .clear:before{position:absolute;content:\"\";height:14px;width:2px;background-color:var(--devui-icon-text, #808080);left:50%}.devui-tree-select:hover .clear:before{transform:rotate(45deg)}.devui-tree-select:hover .clear:after{transform:rotate(-45deg)}.devui-tree-select:hover .clear:hover:after,.devui-tree-select:hover .clear:hover:before{background-color:var(--devui-icon-fill-active, #191919)}.devui-tree-select:hover .allow-clear{opacity:0}.devui-tree-select .devui-select-chevron-icon{right:7px;top:calc((100% - 14px)/2);position:absolute;-webkit-user-select:none;user-select:none;pointer-events:none;height:14px;line-height:14px;z-index:1}.devui-tree-select .devui-select-chevron-icon svg path{fill:var(--devui-text-weak, #333333)}.devui-tree-select .devui-select-chevron-icon-animation svg{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-tree-select .devui-select-chevron-icon.open{z-index:var(--devui-z-index-dropdown, 1052)}.devui-tree-select .devui-select-chevron-icon.open svg{transform:rotate(180deg)}.devui-tree-select .devui-select-chevron-icon.clear{opacity:0}.devui-tree-select .devui-select-chevron-icon.disabled svg path{fill:var(--devui-disabled-text, #c2c2c2)}.devui-tree-select:not(:hover) .devui-select-chevron-icon:not(.disabled){opacity:1;transition:opacity var(--devui-animation-duration-fast, .1s) var(--devui-animation-linear, cubic-bezier(0, 0, 1, 1))}.devui-tree-select.devui-options-container{width:100%;color:var(--devui-text, #191919);padding-left:8px}.devui-select-item{color:var(--devui-text, #191919);line-height:16px;background-color:var(--devui-label-bg, #f0f0f0);border-radius:var(--devui-border-radius, 2px);border:1px solid var(--devui-label-bg, #f0f0f0);display:inline-block;max-width:100%;min-height:20px;height:20px;max-height:20px;margin:1px;padding:0 5px;position:relative;text-indent:0}.devui-select-item.devui-no-label-item{padding:1px 0;background:transparent;border-color:transparent;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devui-select-item .devui-select-item-content{display:inline-block;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:baseline;height:18px;line-height:18px;max-width:100%;padding-right:30px;position:relative}.devui-select-item .devui-select-item-content:hover{color:var(--devui-list-item-hover-text, #000000)}.devui-select-item>.devui-select-item-clear-icon{width:12px;height:12px;line-height:12px;text-align:center;margin-left:12px;border-radius:50%;background-color:var(--devui-line, #dbdbdb);display:inline-flex;justify-content:center;align-items:center;cursor:pointer;position:absolute;right:10px;top:50%;transform:translateY(-50%);transition:transform var(--devui-animation-duration-base, .2s) ease}.devui-select-item>.devui-select-item-clear-icon svg path{fill:var(--devui-light-text, #ffffff)}.devui-select-item>.devui-select-item-clear-icon:hover{background-color:var(--devui-icon-fill-active-hover, #000000)}.devui-select-list{display:flex;flex-wrap:wrap}svg.svg-icon-search path{fill:var(--devui-text-weak, #333333)}:host{display:inline-block;width:100%}.devui-select-input.devui-tree-select-input.disabled{color:var(--devui-disabled-text, #c2c2c2)}.devui-select-input.devui-tree-select-input.disabled .devui-select-item{background-color:var(--devui-disabled-bg, #f3f3f3);border-color:var(--devui-disabled-line, #e6e6e6)}.devui-select-input.devui-tree-select-input.disabled .devui-select-item.devui-no-label-item{background-color:transparent;border-color:transparent;color:var(--devui-disabled-text, #c2c2c2)}.devui-select-input.devui-tree-select-input.disabled .devui-select-item>.devui-select-item-content,.devui-select-input.devui-tree-select-input.disabled .devui-select-item>.devui-select-item-content:hover,.devui-select-input.devui-tree-select-input.disabled .devui-select-item>.devui-select-item-content:focus{color:var(--devui-disabled-text, #c2c2c2);cursor:not-allowed;padding-right:0}.devui-select-input.devui-tree-select-input.disabled .devui-select-item>.devui-select-item-clear-icon,.devui-select-input.devui-tree-select-input.disabled .devui-select-item>.devui-select-item-clear-icon:hover,.devui-select-input.devui-tree-select-input.disabled .devui-select-item>.devui-select-item-clear-icon:focus{background-color:var(--devui-disabled-line, #e6e6e6);cursor:not-allowed}.devui-select-input.devui-tree-select-input.disabled .devui-select-item>.devui-select-item-clear-icon svg path,.devui-select-input.devui-tree-select-input.disabled .devui-select-item>.devui-select-item-clear-icon:hover svg path,.devui-select-input.devui-tree-select-input.disabled .devui-select-item>.devui-select-item-clear-icon:focus svg path{fill:var(--devui-disabled-bg, #f3f3f3)}.devui-tree-select .devui-select-input.devui-tree-select-input:not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled){color:var(--devui-placeholder, #808080)}::ng-deep .devui-tree-select.devui-search-container d-search{width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.OperableTreeComponent, selector: "d-operable-tree", inputs: ["tree", "treeNodeIdKey", "treeNodeChildrenKey", "checkboxDisabledKey", "selectDisabledKey", "toggleDisabledKey", "iconParentOpen", "iconParentClose", "iconLeaf", "showLoading", "loadingTemplateRef", "treeNodesRef", "checkable", "deletable", "addable", "editable", "draggable", "dropFromOutside", "disableMouseEvent", "checkboxInput", "beforeAddNode", "beforeDeleteNode", "beforeEditNode", "beforeSelectNode", "beforeNodeDrop", "canActivateNode", "canActivateParentNode", "canActivateMultipleNode", "treeNodeTitleKey", "postAddNode", "iconTemplatePosition", "virtualScroll", "virtualScrollHeight", "showAnimation", "itemSize", "minBufferPx", "maxBufferPx", "checkableRelation", "indent", "canIdEmpty", "operatorAlign", "dropType"], outputs: ["nodeSelected", "nodeDblClicked", "nodeRightClicked", "nodeToggled", "afterTreeInit", "nodeDeleted", "nodeChecked", "currentNodeChecked", "nodeEdited", "editValueChange", "nodeDragStart", "nodeOnDrop"], exportAs: ["dOperableTreeComponent"] }, { kind: "component", type: i2.PopperComponent, selector: "d-popper-component", inputs: ["open", "fluidPopper", "poppoverAppendDirection", "appendTo", "extraConfig", "showAnimation"], outputs: ["openChange"] }, { kind: "component", type: i6.SearchComponent, selector: "d-search", inputs: ["size", "placeholder", "maxLength", "isKeyupSearch", "delay", "disabled", "cssClass", "iconPosition", "noBorder", "autoFocus", "styleType", "showGlowStyle"], outputs: ["searchFn"], exportAs: ["search"] }] }); }
}
__decorate([
    WithConfig(),
    __metadata("design:type", Object)
], TreeSelectComponent.prototype, "showAnimation", void 0);
__decorate([
    WithConfig(),
    __metadata("design:type", Object)
], TreeSelectComponent.prototype, "styleType", void 0);
__decorate([
    WithConfig(),
    __metadata("design:type", Object)
], TreeSelectComponent.prototype, "showGlowStyle", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeSelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-tree-select', exportAs: 'select', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => TreeSelectComponent),
                            multi: true,
                        },
                    ], preserveWhitespaces: false, template: "<div class=\"devui-tree-select {{ userAgent }}\">\n  <d-popper-component\n    [poppoverAppendDirection]=\"customViewDirection\"\n    [(open)]=\"isOpen\"\n    [fluidPopper]=\"!width\"\n    (openChange)=\"responsePopperChange($event)\"\n    [appendTo]=\"appendTo\"\n    [showAnimation]=\"showAnimation\"\n    #popper\n  >\n    <div\n      #selectHost\n      class=\"devui-select-input devui-form-control devui-tree-select-input devui-dropdown-origin\"\n      [class.devui-gray-style]=\"styleType === 'gray'\"\n      (click)=\"toggle()\"\n      autocomplete=\"off\"\n      [ngClass]=\"{ disabled: disabled, 'devui-select-no-label': !enableLabelization }\"\n      readonly\n      popper-activator\n    >\n      <span class=\"devui-tree-select-placeholder\">{{ !valueType ? placeholder : '' }}</span>\n      <div class=\"devui-select-item\" *ngIf=\"valueType === 'object' && enableLabelization && !customItemTemplate\">\n        <span class=\"devui-select-item-content\">{{ value[treeNodeTitleKey] }}</span>\n        <span *ngIf=\"!disabled\" class=\"devui-select-item-clear-icon\" (click)=\"clearValue($event, value)\">\n          <svg\n            width=\"6px\"\n            height=\"6px\"\n            viewBox=\"0 0 10 10\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          >\n            <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n              <g transform=\"translate(-3.000000, -3.000000)\" fill-rule=\"nonzero\">\n                <path\n                  d=\"M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z\"\n                ></path>\n              </g>\n            </g>\n          </svg>\n        </span>\n      </div>\n      <div class=\"devui-select-item devui-no-label-item\" *ngIf=\"valueType === 'object' && !enableLabelization && !customItemTemplate\">\n        {{ value[treeNodeTitleKey] }}\n      </div>\n      <div class=\"devui-select-item devui-no-label-item\" *ngIf=\"valueType === 'object' && customItemTemplate\">\n        <ng-template [ngTemplateOutlet]=\"customItemTemplate\" [ngTemplateOutletContext]=\"{ item: value }\"></ng-template>\n      </div>\n      <ul class=\"devui-select-list\" *ngIf=\"valueType === 'array' && enableLabelization && !customItemTemplate\">\n        <li class=\"devui-select-item\" *ngFor=\"let item of value; let i = index\">\n          <span class=\"devui-select-item-content\">{{ item[treeNodeTitleKey] }}</span>\n          <span *ngIf=\"!disabled\" class=\"devui-select-item-clear-icon\" (click)=\"clearValue($event, item, i)\">\n            <svg\n              width=\"6px\"\n              height=\"6px\"\n              viewBox=\"0 0 10 10\"\n              version=\"1.1\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            >\n              <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                <g transform=\"translate(-3.000000, -3.000000)\" fill-rule=\"nonzero\">\n                  <path\n                    d=\"M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z\"\n                  ></path>\n                </g>\n              </g>\n            </svg>\n          </span>\n        </li>\n      </ul>\n      <ul class=\"devui-select-list\" *ngIf=\"valueType === 'array' && !enableLabelization && !customItemTemplate\">\n        <li class=\"devui-select-item devui-no-label-item\" *ngFor=\"let item of value; let i = index\">\n          {{ item[treeNodeTitleKey] }}\n          <span *ngIf=\"valueLength && i < valueLength - 1\">, </span>\n        </li>\n      </ul>\n      <ul class=\"devui-select-list\" *ngIf=\"valueType === 'array' && customItemTemplate\">\n        <li class=\"devui-select-item devui-no-label-item\" *ngFor=\"let item of value\">\n          <ng-template [ngTemplateOutlet]=\"customItemTemplate\" [ngTemplateOutletContext]=\"{ item: item }\"></ng-template>\n        </li>\n      </ul>\n    </div>\n    <div popper-prepend class=\"devui-tree-select devui-search-container devui-form-group devui-has-feedback\" *ngIf=\"searchable\">\n      <d-search #searchInputModel=\"ngModel\" #searchInput [(ngModel)]=\"searchString\" [placeholder]=\"searchPlaceholder\"></d-search>\n    </div>\n    <div\n      class=\"devui-tree-select devui-options-container\"\n      #optionsContainer\n      popper-container\n      [ngStyle]=\"{ width: width, maxHeight: validVirtualScrollHeight === undefined ? '300px' : validVirtualScrollHeight + 'px' }\"\n    >\n      <d-operable-tree\n        #tree\n        [style.display]=\"treeData && treeData.length > 0 && !noRecord ? 'block' : 'none'\"\n        [tree]=\"treeData\"\n        [treeNodeIdKey]=\"treeNodeIdKey\"\n        [treeNodeChildrenKey]=\"treeNodeChildrenKey\"\n        [checkboxDisabledKey]=\"disabledKey\"\n        [checkboxInput]=\"checkboxInput\"\n        [checkable]=\"multiple\"\n        [checkableRelation]=\"checkableRelation\"\n        [canActivateNode]=\"!multiple\"\n        [canActivateParentNode]=\"!leafOnly\"\n        (nodeChecked)=\"onOperableNodeChecked($event)\"\n        (nodeSelected)=\"onOperableNodeSelected($event)\"\n        (nodeToggled)=\"onNodeToggled($event)\"\n        [iconParentOpen]=\"iconParentOpen\"\n        [iconParentClose]=\"iconParentClose\"\n        [iconLeaf]=\"iconLeaf\"\n        [treeNodeTitleKey]=\"treeNodeTitleKey\"\n        [iconTemplatePosition]=\"iconTemplatePosition\"\n        [virtualScroll]=\"virtualScroll\"\n        [itemSize]=\"virtualScrollItemSize\"\n        [minBufferPx]=\"virtualScrollMinBufferPx\"\n        [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n        [virtualScrollHeight]=\"validVirtualScrollHeight + 'px'\"\n        (afterTreeInit)=\"afterTreeInit()\"\n        class=\"devui-tree\"\n      >\n        <ng-template *ngIf=\"iconTemplateInput || iconTemplatePassThrough\" #iconTemplate let-node=\"node\">\n          <ng-template [ngTemplateOutlet]=\"iconTemplateInput || iconTemplatePassThrough\" [ngTemplateOutletContext]=\"{ node: node }\">\n          </ng-template>\n        </ng-template>\n      </d-operable-tree>\n      <ng-template\n        *ngIf=\"!treeData || treeData.length <= 0 || noRecord\"\n        [ngTemplateOutlet]=\"customNoDataTemplate || defaultNoResult\"\n        [ngTemplateOutletContext]=\"{ $implicit: this, isSearchResult: noRecord }\"\n      ></ng-template>\n    </div>\n\n    <!-- \u81EA\u5B9A\u4E49\u533A\u57DF -->\n    <div popper-append *ngIf=\"customViewTemplate\">\n      <ng-template [ngTemplateOutlet]=\"customViewTemplate\" [ngTemplateOutletContext]=\"{ $implicit: this }\"></ng-template>\n    </div>\n  </d-popper-component>\n  <div\n    [ngClass]=\"{ disabled: disabled, clear: allowClear }\"\n    (click)=\"$event.stopPropagation(); $event.preventDefault(); clearAll(); emitEvents()\"\n  ></div>\n  <span\n    class=\"devui-select-chevron-icon\"\n    [class.open]=\"isOpen\"\n    [ngClass]=\"{ disabled: disabled, 'allow-clear': allowClear, 'devui-select-chevron-icon-animation': showAnimation }\"\n  >\n    <svg\n      width=\"16px\"\n      height=\"16px\"\n      viewBox=\"0 0 16 16\"\n      version=\"1.1\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    >\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          d=\"M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z\"\n        ></path>\n      </g>\n    </svg>\n  </span>\n</div>\n\n<ng-template #defaultNoResult>\n  <div class=\"devui-no-data-tip\">\n    {{ noRecord ? i18nCommonText?.noRecordsFound : i18nCommonText?.noData }}\n  </div>\n</ng-template>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-tree-select{position:relative;width:100%}.devui-tree-select .devui-select-input:not([disabled]){color:var(--devui-text, #191919)}.devui-tree-select .devui-select-input.devui-tree-select-input{font-size:var(--devui-font-size, 12px);padding:2px 32px 2px 2px;height:unset;min-height:28px;max-height:52px;overflow-y:auto;line-height:22px;display:flex;text-indent:8px}.devui-tree-select .devui-select-input.devui-tree-select-input.devui-select-no-label{padding-left:8px}.devui-tree-select .devui-select-input.devui-tree-select-input>span.devui-tree-select-placeholder{text-indent:0}.devui-tree-select:hover .clear{position:absolute;height:14px;width:14px;right:12px;top:calc((100% - 14px)/2);cursor:pointer;z-index:1}.devui-tree-select:hover .clear:after,.devui-tree-select:hover .clear:before{position:absolute;content:\"\";height:14px;width:2px;background-color:var(--devui-icon-text, #808080);left:50%}.devui-tree-select:hover .clear:before{transform:rotate(45deg)}.devui-tree-select:hover .clear:after{transform:rotate(-45deg)}.devui-tree-select:hover .clear:hover:after,.devui-tree-select:hover .clear:hover:before{background-color:var(--devui-icon-fill-active, #191919)}.devui-tree-select:hover .allow-clear{opacity:0}.devui-tree-select .devui-select-chevron-icon{right:7px;top:calc((100% - 14px)/2);position:absolute;-webkit-user-select:none;user-select:none;pointer-events:none;height:14px;line-height:14px;z-index:1}.devui-tree-select .devui-select-chevron-icon svg path{fill:var(--devui-text-weak, #333333)}.devui-tree-select .devui-select-chevron-icon-animation svg{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-eas