import { __decorate, __metadata } from 'tslib';
import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
import * as i4 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i3 from 'ng-devui/auto-complete';
import { AutoCompleteDirective, AutoCompleteModule } from 'ng-devui/auto-complete';
import * as i1 from 'ng-devui/utils';
import { addClassToOrigin, removeClassFromOrigin, WithConfig } from 'ng-devui/utils';
import { of } from 'rxjs';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i5 from 'ng-devui/tags';
import { TagsModule } from 'ng-devui/tags';

class MultiAutoCompleteComponent {
    constructor(changeDetectorRef, devConfigService) {
        this.changeDetectorRef = changeDetectorRef;
        this.devConfigService = devConfigService;
        this.appendToBody = false;
        this.appendToBodyDirections = ['rightDown', 'leftDown', 'rightUp', 'leftUp'];
        /**
         * @deprecated
         * overview: border none multiline single
         */
        this.overview = 'border';
        this.placeholder = ''; // placeholder
        this.disabled = false;
        this.showAnimation = true;
        this.autoSubmit = new EventEmitter(); // 失焦自动提交
        this.multiItems = [];
        this.multipleLabelClassNameSuffix = this.overview;
        this.inputEdit = false;
        this.multipleLabelClassNameConfig = {
            border: {
                focus: 'border',
                blur: 'border',
            },
            none: {
                focus: 'border',
                blur: 'none',
            },
            multiline: {
                focus: 'multiline',
                blur: 'multiline',
            },
            single: {
                focus: 'single-focus',
                blur: 'single',
            },
        };
        this.clonePlaceholder = this.placeholder;
        this.placement = 'bottom-left';
        this.onChange = (_) => null;
        this.onTouched = () => null;
        this.formatter = (item) => (item ? item.label || item.toString() : '');
        this.valueParser = (item) => item;
        this.id = MultiAutoCompleteComponent.ID_SEED++;
    }
    get placeholderView() {
        if (this.multiItems.length > 0) {
            return '';
        }
        else {
            return this.placeholder;
        }
    }
    writeValue(obj) {
        const value = obj || [];
        this.multiItems = value;
        if (this.overview === 'single') {
            this.inputEdit = this.multiItems.length === 0;
        }
        this.setSinglePlaceholder();
        this.changeDetectorRef.markForCheck();
    }
    ngOnInit() {
        if (this.source && !this.searchFn) {
            this.searchFn = (term) => {
                return of(this.source.filter((lang) => this.multiItems.indexOf(lang) === -1 && lang.toLowerCase().indexOf(term.toLowerCase()) !== -1));
            };
        }
    }
    ngOnChanges(changes) {
        if (changes && changes['overview']) {
            this.multipleLabelClassNameSuffix = changes['overview'].currentValue;
        }
        if (changes && changes['placeholder']) {
            this.clonePlaceholder = changes['placeholder'].currentValue;
        }
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    singleClick($event) {
        this.inputEdit = true;
    }
    onMultipleSearch(item) {
        if (this.overview !== 'single' && item) {
            let inArray = false;
            for (let i = 0; i < this.multiItems.length; i++) {
                if (item.label) {
                    if (item.label === this.multiItems[i].label) {
                        inArray = true;
                        break;
                    }
                }
                else {
                    if (item === this.multiItems[i]) {
                        inArray = true;
                        break;
                    }
                }
            }
            if (!inArray) {
                this.multiItems.push(item);
            }
            else {
                this.multiItems = this.multiItems.filter((data) => {
                    if (data.label) {
                        return data.label !== item.label;
                    }
                    else {
                        return data !== item;
                    }
                });
            }
        }
        else if (this.overview === 'single' && item) {
            this.multiItems = [];
            this.multiItems.push(item);
            this.inputEdit = false;
            this.multipleLabelClassNameSuffix = this.multipleLabelClassNameConfig[this.overview]['blur'];
        }
        this.setSinglePlaceholder();
        this.autoSubmit.emit(this.multiItems);
        this.onChange(this.multiItems);
        this.inputValue = null;
        this.multiAutoCompleteInputElement.nativeElement.value = '';
    }
    removeLabel(label) {
        if (this.multiItems.indexOf(label) !== -1) {
            this.multiItems = this.multiItems.filter((item) => item !== label);
        }
        this.setSinglePlaceholder();
        this.autoSubmit.emit(this.multiItems);
        this.onChange(this.multiItems);
    }
    getInputFocusFlag($event) {
        this.inputEdit = this.multiItems.length === 0 || $event.focus;
        this.popupRef = $event.popupRef;
        this.setSinglePlaceholder();
        if ($event.focus) {
            this.multipleLabelClassNameSuffix = this.multipleLabelClassNameConfig[this.overview]['focus'];
            setTimeout(() => {
                // 这里需要等待一会才能聚焦
                this.multiAutoCompleteInputElement.nativeElement.focus();
            }, 0);
        }
        else {
            this.multipleLabelClassNameSuffix = this.multipleLabelClassNameConfig[this.overview]['blur'];
            this.inputValue = null;
            this.multiAutoCompleteInputElement.nativeElement.value = '';
            this.autoSubmit.emit(this.multiItems);
        }
    }
    onBackspaceKeyUp($event, inputValue) {
        if (this.multiItems.length > 0 && !inputValue) {
            this.multiItems.pop();
        }
        this.setSinglePlaceholder();
        this.autoSubmit.emit(this.multiItems);
        this.onChange(this.multiItems);
    }
    setSinglePlaceholder() {
        if (this.overview === 'single') {
            if (this.multiItems && this.multiItems.length > 0) {
                this.placeholder = '';
            }
            else {
                this.placeholder = this.clonePlaceholder;
            }
        }
    }
    changePopUp(open) {
        if (open) {
            addClassToOrigin(this.multiAutoCompleteWrapperElement);
        }
        else {
            removeClassFromOrigin(this.multiAutoCompleteWrapperElement);
        }
    }
    inputBlur() {
        this.onTouched();
    }
}
MultiAutoCompleteComponent.ID_SEED = 0;
MultiAutoCompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MultiAutoCompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DevConfigService }], target: i0.ɵɵFactoryTarget.Component });
MultiAutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: MultiAutoCompleteComponent, selector: "d-multi-auto-complete", inputs: { appendToBody: "appendToBody", appendToBodyDirections: "appendToBodyDirections", cssClass: "cssClass", overview: "overview", tipsText: "tipsText", placeholder: "placeholder", disabled: "disabled", source: "source", latestSource: "latestSource", disabledKey: "disabledKey", width: "width", itemTemplate: "itemTemplate", noResultItemTemplate: "noResultItemTemplate", delay: "delay", searchFn: "searchFn", formatter: "formatter", valueParser: "valueParser", showAnimation: "showAnimation" }, outputs: { autoSubmit: "autoSubmit" }, providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => MultiAutoCompleteComponent),
            multi: true,
        },
    ], viewQueries: [{ propertyName: "multiAutoCompleteInputElement", first: true, predicate: ["multiAutoCompleteInput"], descendants: true }, { propertyName: "multiAutoCompleteWrapperElement", first: true, predicate: ["multiAutoCompleteWrapper"], descendants: true }, { propertyName: "autoCompleteDirective", first: true, predicate: AutoCompleteDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group multi-auto-complete\">\r\n  <label\r\n    for=\"multiple-label-auto-complete-{{ id }}\"\r\n    class=\"multiple-label-auto-complete multiple-label-auto-complete-{{ multipleLabelClassNameSuffix }}\"\r\n    [ngClass]=\"{ 'multiple-label-auto-complete-disabled': disabled }\"\r\n  >\r\n    <ul *ngIf=\"overview !== 'single'\" class=\"devui-dropdown-origin\" #multiAutoCompleteWrapper>\r\n      <li *ngFor=\"let item of multiItems\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"disabled || (overview === 'none' && !inputEdit) ? transparentTemplate : defaultTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            item: item,\r\n            formatter: formatter,\r\n            parent: multiItems\r\n          }\"\r\n        ></ng-template>\r\n      </li>\r\n      <li *ngIf=\"!disabled\">\r\n        <input\r\n          #multiAutoCompleteInput\r\n          id=\"multiple-label-auto-complete-{{ id }}\"\r\n          type=\"text\"\r\n          name=\"autoCompleteControl\"\r\n          class=\"auto-complete-control\"\r\n          [placeholder]=\"placeholderView\"\r\n          [tipsText]=\"tipsText\"\r\n          [latestSource]=\"latestSource\"\r\n          (selectValue)=\"onMultipleSearch($event)\"\r\n          (transInputFocusEmit)=\"getInputFocusFlag($event)\"\r\n          (keydown.backspace)=\"onBackspaceKeyUp($event, inputValue)\"\r\n          [formatter]=\"formatter\"\r\n          [valueParser]=\"valueParser\"\r\n          [itemTemplate]=\"itemTemplate\"\r\n          [noResultItemTemplate]=\"noResultItemTemplate\"\r\n          [cssClass]=\"cssClass\"\r\n          [overview]=\"overview\"\r\n          [disabled]=\"disabled\"\r\n          [(ngModel)]=\"inputValue\"\r\n          [delay]=\"delay\"\r\n          [dAutoCompleteWidth]=\"width\"\r\n          dAutoComplete\r\n          [showAnimation]=\"showAnimation\"\r\n          [searchFn]=\"searchFn\"\r\n          [appendToBody]=\"appendToBody\"\r\n          [appendToBodyDirections]=\"appendToBodyDirections\"\r\n          [cdkOverlayOffsetY]=\"3\"\r\n          [disabledKey]=\"disabledKey\"\r\n          (blur)=\"inputBlur()\"\r\n          (changeDropDownStatus)=\"changePopUp($event)\"\r\n        />\r\n      </li>\r\n    </ul>\r\n\r\n    <!--\u5355\u9009\u6A21\u677F-->\r\n    <ul *ngIf=\"overview === 'single'\" title=\"{{ formatter(multiItems[0]) }}\" (click)=\"singleClick($event)\">\r\n      <li *ngFor=\"let item of multiItems\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"transparentTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            item: item,\r\n            formatter: formatter,\r\n            parent: multiItems\r\n          }\"\r\n        ></ng-template>\r\n      </li>\r\n      <li *ngIf=\"!disabled && inputEdit\">\r\n        <input\r\n          #multiAutoCompleteInput\r\n          id=\"multiple-label-auto-complete-{{ id }}\"\r\n          type=\"text\"\r\n          name=\"autoCompleteControl\"\r\n          class=\"auto-complete-control\"\r\n          [placeholder]=\"placeholder\"\r\n          [tipsText]=\"tipsText\"\r\n          [latestSource]=\"latestSource\"\r\n          (selectValue)=\"onMultipleSearch($event)\"\r\n          (transInputFocusEmit)=\"getInputFocusFlag($event)\"\r\n          (keydown.backspace)=\"onBackspaceKeyUp($event, inputValue)\"\r\n          [formatter]=\"formatter\"\r\n          [valueParser]=\"valueParser\"\r\n          [itemTemplate]=\"itemTemplate\"\r\n          [noResultItemTemplate]=\"noResultItemTemplate\"\r\n          [cssClass]=\"cssClass\"\r\n          [overview]=\"overview\"\r\n          [disabled]=\"disabled\"\r\n          [(ngModel)]=\"inputValue\"\r\n          [delay]=\"delay\"\r\n          [dAutoCompleteWidth]=\"width\"\r\n          dAutoComplete\r\n          [searchFn]=\"searchFn\"\r\n          (blur)=\"inputBlur()\"\r\n          (changeDropDownStatus)=\"changePopUp($event)\"\r\n        />\r\n      </li>\r\n    </ul>\r\n  </label>\r\n</div>\r\n\r\n<!--\u9EC4\u5E95\u6A21\u677F-->\r\n<ng-template #defaultTemplate let-item=\"item\" let-formatter=\"formatter\">\r\n  <d-tag [deletable]=\"true\" [tag]=\"formatter(item)\" (tagDelete)=\"removeLabel(item)\"></d-tag>\r\n</ng-template>\r\n\r\n<!--\u65E0\u5E95\u8272\u6A21\u677F-->\r\n<ng-template #transparentTemplate let-item=\"item\" let-formatter=\"formatter\" let-parent=\"parent\">\r\n  <d-tag [tag]=\"formatter(item)\"></d-tag>\r\n</ng-template>\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}.form-group label{cursor:pointer;font-size:12px;font-size:var(--devui-font-size, 12px);margin-bottom:0;width:100%}.multiple-label-auto-complete{padding:0;font-weight:400}.multiple-label-auto-complete ul{display:flex;flex-wrap:wrap;align-items:center;list-style:none;background:#ffffff;background:var(--devui-base-bg, #ffffff);border-radius:2px;border-radius:var(--devui-border-radius, 2px);padding:4px 4px 0}.multiple-label-auto-complete-single ul,.multiple-label-auto-complete-single-focus ul,.multiple-label-auto-complete-border ul,.multiple-label-auto-complete-multiline ul{border:1px solid #d7d8da;border:1px solid var(--devui-line, #d7d8da)}.multiple-label-auto-complete-single ul:hover,.multiple-label-auto-complete-single-focus ul:hover,.multiple-label-auto-complete-border ul:hover,.multiple-label-auto-complete-multiline ul:hover{border-color:#9b9fa8;border-color:var(--devui-form-control-line-hover, #9b9fa8)}.multiple-label-auto-complete-single ul:active,.multiple-label-auto-complete-single-focus ul:active,.multiple-label-auto-complete-border ul:active,.multiple-label-auto-complete-multiline ul:active{border-color:#5e7ce0;border-color:var(--devui-form-control-line-active, #5e7ce0)}.multiple-label-auto-complete-single ul,.multiple-label-auto-complete-single-focus ul{overflow:hidden}.multiple-label-auto-complete-multiline ul{height:60px;overflow:auto}.multiple-label-auto-complete-none ul{border:1px solid transparent}.multiple-label-auto-complete-none ul:hover,.multiple-label-auto-complete-none ul:active{border-color:transparent}.multiple-label-auto-complete:not(.multiple-label-auto-complete-disabled) ul li:last-child{border-color:transparent}.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul{cursor:not-allowed}.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul,.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul:hover{border-color:#dfe1e6;border-color:var(--devui-disabled-line, #dfe1e6);background-color:#f5f5f5;background-color:var(--devui-disabled-bg, #f5f5f5)}.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul li{border-color:#dfe1e6;border-color:var(--devui-disabled-line, #dfe1e6)}.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul li .label-text,.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul li .label-text:hover{background-color:#f5f5f5;background-color:var(--devui-disabled-bg, #f5f5f5);color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3)}.multiple-label-auto-complete ul::-ms-expand{border:0;background-color:transparent}::-ms-clear,::-ms-reveal{display:none}.multiple-label-auto-complete ul li{position:relative;display:inline-block;line-height:1;margin:0 4px 4px 0}.multiple-label-auto-complete-none ul li{margin-right:0}.multiple-label-auto-complete-single ul li,.multiple-label-auto-complete-single-focus ul li,.multiple-label-auto-complete-multiline ul li{position:static}.multiple-label-auto-complete-single ul li,.multiple-label-auto-complete-single-focus ul li{float:left;width:100%}.multiple-label-auto-complete-single-focus ul li:first-child{max-width:calc(100% - 5px);margin-right:0;width:auto}.multiple-label-auto-complete-single-focus ul li:last-child{width:5px;margin-right:0;margin-left:0}.multiple-label-auto-complete ul li .label-close,.multiple-label-auto-complete ul li .label-text{font-size:12px;font-size:var(--devui-font-size, 12px);line-height:20px;padding:0 8px;color:#575d6c;color:var(--devui-text-weak, #575d6c);font-weight:400;background-color:#e9edfa;background-color:var(--devui-label-bg, #e9edfa)}.multiple-label-auto-complete ul li .label-close{padding-left:4px;display:flex;align-items:center}.multiple-label-auto-complete ul li .label-close svg rect{fill:#d7d8da;fill:var(--devui-line, #d7d8da)}.multiple-label-auto-complete ul li .label-close svg path{fill:#fff;fill:var(--devui-light-text, #ffffff)}.multiple-label-auto-complete ul li .label-close:hover svg rect{fill:#252b3a;fill:var(--devui-icon-fill-active-hover, #252b3a)}.multiple-label-auto-complete ul li .label-text:hover{color:#252b3a;color:var(--devui-icon-fill-active-hover, #252b3a)}.multiple-label-auto-complete ul li .label-text{border-radius:2px 0 0 2px;border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.multiple-label-auto-complete ul li .label-close{cursor:pointer;border-radius:0 2px 2px 0;border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.multiple-label-auto-complete-single ul li .label-text,.multiple-label-auto-complete-single-focus ul li .label-text,.multiple-label-auto-complete-none ul li .label-text{background-color:transparent}.multiple-label-auto-complete-single ul li .label-text{width:100%;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;height:20px;line-height:20px}.multiple-label-auto-complete-single-focus ul li .label-text{width:100%;text-align:left;display:block;height:20px;line-height:20px}.multiple-label-auto-complete .auto-complete-control{min-width:160px;height:20px;border:none;outline:none;background:#ffffff;background:var(--devui-base-bg, #ffffff);color:#252b3a;color:var(--devui-text, #252b3a)}.multiple-label-auto-complete .auto-complete-control:focus,.multiple-label-auto-complete .auto-complete-control:hover{border:none;outline:none}.multiple-label-auto-complete-none .auto-complete-control{width:0}:host label{color:inherit}:host ::ng-deep .multiple-label-auto-complete-disabled li{border:solid 1px #dfe1e6;border:solid 1px var(--devui-disabled-line, #dfe1e6);border-radius:2px;border-radius:var(--devui-border-radius, 2px)}:host ::ng-deep .multiple-label-auto-complete-disabled li d-tag .devui-tag-item{background-color:#f5f5f5;background-color:var(--devui-disabled-bg, #f5f5f5);color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3);cursor:not-allowed}:host ::ng-deep .multiple-label-auto-complete-border ul li .devui-dropdown-menu{margin-top:8px}:host ::ng-deep .multiple-label-auto-complete-multiline ul li .devui-dropdown-menu{margin-top:0;width:170px}:host-context(d-data-table) .multiple-label-auto-complete-single ul,:host-context(d-data-table) .multiple-label-auto-complete-single ul li .auto-complete-control{border-color:transparent;background-color:transparent}:host-context(d-data-table) .multiple-label-auto-complete-single ul{padding-left:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.AutoCompleteDirective, selector: "[dAutoComplete]", inputs: ["disabled", "cssClass", "delay", "minLength", "itemTemplate", "noResultItemTemplate", "searchingTemplate", "isSearching", "appendToBody", "appendToBodyDirections", "cdkOverlayOffsetY", "dAutoCompleteWidth", "formatter", "sceneType", "tipsText", "overview", "latestSource", "source", "valueParser", "searchFn", "dropdown", "maxHeight", "disabledKey", "showAnimation", "enableLazyLoad", "allowEmptyValueSearch"], outputs: ["loadMore", "selectValue", "transInputFocusEmit", "changeDropDownStatus", "toggleChange"], exportAs: ["autoComplete"] }, { kind: "directive", type: i4.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: 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.TagComponent, selector: "d-tag", inputs: ["tag", "labelStyle", "customColor", "deletable", "titleContent", "mode", "checked", "maxWidth", "customViewTemplate"], outputs: ["tagDelete", "checkedChange"], exportAs: ["Tag"] }] });
__decorate([
    WithConfig(),
    __metadata("design:type", Object)
], MultiAutoCompleteComponent.prototype, "showAnimation", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: MultiAutoCompleteComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-multi-auto-complete', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => MultiAutoCompleteComponent),
                            multi: true,
                        },
                    ], preserveWhitespaces: false, template: "<div class=\"form-group multi-auto-complete\">\r\n  <label\r\n    for=\"multiple-label-auto-complete-{{ id }}\"\r\n    class=\"multiple-label-auto-complete multiple-label-auto-complete-{{ multipleLabelClassNameSuffix }}\"\r\n    [ngClass]=\"{ 'multiple-label-auto-complete-disabled': disabled }\"\r\n  >\r\n    <ul *ngIf=\"overview !== 'single'\" class=\"devui-dropdown-origin\" #multiAutoCompleteWrapper>\r\n      <li *ngFor=\"let item of multiItems\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"disabled || (overview === 'none' && !inputEdit) ? transparentTemplate : defaultTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            item: item,\r\n            formatter: formatter,\r\n            parent: multiItems\r\n          }\"\r\n        ></ng-template>\r\n      </li>\r\n      <li *ngIf=\"!disabled\">\r\n        <input\r\n          #multiAutoCompleteInput\r\n          id=\"multiple-label-auto-complete-{{ id }}\"\r\n          type=\"text\"\r\n          name=\"autoCompleteControl\"\r\n          class=\"auto-complete-control\"\r\n          [placeholder]=\"placeholderView\"\r\n          [tipsText]=\"tipsText\"\r\n          [latestSource]=\"latestSource\"\r\n          (selectValue)=\"onMultipleSearch($event)\"\r\n          (transInputFocusEmit)=\"getInputFocusFlag($event)\"\r\n          (keydown.backspace)=\"onBackspaceKeyUp($event, inputValue)\"\r\n          [formatter]=\"formatter\"\r\n          [valueParser]=\"valueParser\"\r\n          [itemTemplate]=\"itemTemplate\"\r\n          [noResultItemTemplate]=\"noResultItemTemplate\"\r\n          [cssClass]=\"cssClass\"\r\n          [overview]=\"overview\"\r\n          [disabled]=\"disabled\"\r\n          [(ngModel)]=\"inputValue\"\r\n          [delay]=\"delay\"\r\n          [dAutoCompleteWidth]=\"width\"\r\n          dAutoComplete\r\n          [showAnimation]=\"showAnimation\"\r\n          [searchFn]=\"searchFn\"\r\n          [appendToBody]=\"appendToBody\"\r\n          [appendToBodyDirections]=\"appendToBodyDirections\"\r\n          [cdkOverlayOffsetY]=\"3\"\r\n          [disabledKey]=\"disabledKey\"\r\n          (blur)=\"inputBlur()\"\r\n          (changeDropDownStatus)=\"changePopUp($event)\"\r\n        />\r\n      </li>\r\n    </ul>\r\n\r\n    <!--\u5355\u9009\u6A21\u677F-->\r\n    <ul *ngIf=\"overview === 'single'\" title=\"{{ formatter(multiItems[0]) }}\" (click)=\"singleClick($event)\">\r\n      <li *ngFor=\"let item of multiItems\">\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"transparentTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            item: item,\r\n            formatter: formatter,\r\n            parent: multiItems\r\n          }\"\r\n        ></ng-template>\r\n      </li>\r\n      <li *ngIf=\"!disabled && inputEdit\">\r\n        <input\r\n          #multiAutoCompleteInput\r\n          id=\"multiple-label-auto-complete-{{ id }}\"\r\n          type=\"text\"\r\n          name=\"autoCompleteControl\"\r\n          class=\"auto-complete-control\"\r\n          [placeholder]=\"placeholder\"\r\n          [tipsText]=\"tipsText\"\r\n          [latestSource]=\"latestSource\"\r\n          (selectValue)=\"onMultipleSearch($event)\"\r\n          (transInputFocusEmit)=\"getInputFocusFlag($event)\"\r\n          (keydown.backspace)=\"onBackspaceKeyUp($event, inputValue)\"\r\n          [formatter]=\"formatter\"\r\n          [valueParser]=\"valueParser\"\r\n          [itemTemplate]=\"itemTemplate\"\r\n          [noResultItemTemplate]=\"noResultItemTemplate\"\r\n          [cssClass]=\"cssClass\"\r\n          [overview]=\"overview\"\r\n          [disabled]=\"disabled\"\r\n          [(ngModel)]=\"inputValue\"\r\n          [delay]=\"delay\"\r\n          [dAutoCompleteWidth]=\"width\"\r\n          dAutoComplete\r\n          [searchFn]=\"searchFn\"\r\n          (blur)=\"inputBlur()\"\r\n          (changeDropDownStatus)=\"changePopUp($event)\"\r\n        />\r\n      </li>\r\n    </ul>\r\n  </label>\r\n</div>\r\n\r\n<!--\u9EC4\u5E95\u6A21\u677F-->\r\n<ng-template #defaultTemplate let-item=\"item\" let-formatter=\"formatter\">\r\n  <d-tag [deletable]=\"true\" [tag]=\"formatter(item)\" (tagDelete)=\"removeLabel(item)\"></d-tag>\r\n</ng-template>\r\n\r\n<!--\u65E0\u5E95\u8272\u6A21\u677F-->\r\n<ng-template #transparentTemplate let-item=\"item\" let-formatter=\"formatter\" let-parent=\"parent\">\r\n  <d-tag [tag]=\"formatter(item)\"></d-tag>\r\n</ng-template>\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}.form-group label{cursor:pointer;font-size:12px;font-size:var(--devui-font-size, 12px);margin-bottom:0;width:100%}.multiple-label-auto-complete{padding:0;font-weight:400}.multiple-label-auto-complete ul{display:flex;flex-wrap:wrap;align-items:center;list-style:none;background:#ffffff;background:var(--devui-base-bg, #ffffff);border-radius:2px;border-radius:var(--devui-border-radius, 2px);padding:4px 4px 0}.multiple-label-auto-complete-single ul,.multiple-label-auto-complete-single-focus ul,.multiple-label-auto-complete-border ul,.multiple-label-auto-complete-multiline ul{border:1px solid #d7d8da;border:1px solid var(--devui-line, #d7d8da)}.multiple-label-auto-complete-single ul:hover,.multiple-label-auto-complete-single-focus ul:hover,.multiple-label-auto-complete-border ul:hover,.multiple-label-auto-complete-multiline ul:hover{border-color:#9b9fa8;border-color:var(--devui-form-control-line-hover, #9b9fa8)}.multiple-label-auto-complete-single ul:active,.multiple-label-auto-complete-single-focus ul:active,.multiple-label-auto-complete-border ul:active,.multiple-label-auto-complete-multiline ul:active{border-color:#5e7ce0;border-color:var(--devui-form-control-line-active, #5e7ce0)}.multiple-label-auto-complete-single ul,.multiple-label-auto-complete-single-focus ul{overflow:hidden}.multiple-label-auto-complete-multiline ul{height:60px;overflow:auto}.multiple-label-auto-complete-none ul{border:1px solid transparent}.multiple-label-auto-complete-none ul:hover,.multiple-label-auto-complete-none ul:active{border-color:transparent}.multiple-label-auto-complete:not(.multiple-label-auto-complete-disabled) ul li:last-child{border-color:transparent}.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul{cursor:not-allowed}.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul,.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul:hover{border-color:#dfe1e6;border-color:var(--devui-disabled-line, #dfe1e6);background-color:#f5f5f5;background-color:var(--devui-disabled-bg, #f5f5f5)}.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul li{border-color:#dfe1e6;border-color:var(--devui-disabled-line, #dfe1e6)}.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul li .label-text,.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul li .label-text:hover{background-color:#f5f5f5;background-color:var(--devui-disabled-bg, #f5f5f5);color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3)}.multiple-label-auto-complete ul::-ms-expand{border:0;background-color:transparent}::-ms-clear,::-ms-reveal{display:none}.multiple-label-auto-complete ul li{position:relative;display:inline-block;line-height:1;margin:0 4px 4px 0}.multiple-label-auto-complete-none ul li{margin-right:0}.multiple-label-auto-complete-single ul li,.multiple-label-auto-complete-single-focus ul li,.multiple-label-auto-complete-multiline ul li{position:static}.multiple-label-auto-complete-single ul li,.multiple-label-auto-complete-single-focus ul li{float:left;width:100%}.multiple-label-auto-complete-single-focus ul li:first-child{max-width:calc(100% - 5px);margin-right:0;width:auto}.multiple-label-auto-complete-single-focus ul li:last-child{width:5px;margin-right:0;margin-left:0}.multiple-label-auto-complete ul li .label-close,.multiple-label-auto-complete ul li .label-text{font-size:12px;font-size:var(--devui-font-size, 12px);line-height:20px;padding:0 8px;color:#575d6c;color:var(--devui-text-weak, #575d6c);font-weight:400;background-color:#e9edfa;background-color:var(--devui-label-bg, #e9edfa)}.multiple-label-auto-complete ul li .label-close{padding-left:4px;display:flex;align-items:center}.multiple-label-auto-complete ul li .label-close svg rect{fill:#d7d8da;fill:var(--devui-line, #d7d8da)}.multiple-label-auto-complete ul li .label-close svg path{fill:#fff;fill:var(--devui-light-text, #ffffff)}.multiple-label-auto-complete ul li .label-close:hover svg rect{fill:#252b3a;fill:var(--devui-icon-fill-active-hover, #252b3a)}.multiple-label-auto-complete ul li .label-text:hover{color:#252b3a;color:var(--devui-icon-fill-active-hover, #252b3a)}.multiple-label-auto-complete ul li .label-text{border-radius:2px 0 0 2px;border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.multiple-label-auto-complete ul li .label-close{cursor:pointer;border-radius:0 2px 2px 0;border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.multiple-label-auto-complete-single ul li .label-text,.multiple-label-auto-complete-single-focus ul li .label-text,.multiple-label-auto-complete-none ul li .label-text{background-color:transparent}.multiple-label-auto-complete-single ul li .label-text{width:100%;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;height:20px;line-height:20px}.multiple-label-auto-complete-single-focus ul li .label-text{width:100%;text-align:left;display:block;height:20px;line-height:20px}.multiple-label-auto-complete .auto-complete-control{min-width:160px;height:20px;border:none;outline:none;background:#ffffff;background:var(--devui-base-bg, #ffffff);color:#252b3a;color:var(--devui-text, #252b3a)}.multiple-label-auto-complete .auto-complete-control:focus,.multiple-label-auto-complete .auto-complete-control:hover{border:none;outline:none}.multiple-label-auto-complete-none .auto-complete-control{width:0}:host label{color:inherit}:host ::ng-deep .multiple-label-auto-complete-disabled li{border:solid 1px #dfe1e6;border:solid 1px var(--devui-disabled-line, #dfe1e6);border-radius:2px;border-radius:var(--devui-border-radius, 2px)}:host ::ng-deep .multiple-label-auto-complete-disabled li d-tag .devui-tag-item{background-color:#f5f5f5;background-color:var(--devui-disabled-bg, #f5f5f5);color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3);cursor:not-allowed}:host ::ng-deep .multiple-label-auto-complete-border ul li .devui-dropdown-menu{margin-top:8px}:host ::ng-deep .multiple-label-auto-complete-multiline ul li .devui-dropdown-menu{margin-top:0;width:170px}:host-context(d-data-table) .multiple-label-auto-complete-single ul,:host-context(d-data-table) .multiple-label-auto-complete-single ul li .auto-complete-control{border-color:transparent;background-color:transparent}:host-context(d-data-table) .multiple-label-auto-complete-single ul{padding-left:0}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.DevConfigService }]; }, propDecorators: { appendToBody: [{
                type: Input
            }], appendToBodyDirections: [{
                type: Input
            }], cssClass: [{
                type: Input
            }], overview: [{
                type: Input
            }], tipsText: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], disabled: [{
                type: Input
            }], source: [{
                type: Input
            }], latestSource: [{
                type: Input
            }], disabledKey: [{
                type: Input
            }], width: [{
                type: Input
            }], itemTemplate: [{
                type: Input
            }], noResultItemTemplate: [{
                type: Input
            }], delay: [{
                type: Input
            }], searchFn: [{
                type: Input
            }], formatter: [{
                type: Input
            }], valueParser: [{
                type: Input
            }], showAnimation: [{
                type: Input
            }], autoSubmit: [{
                type: Output
            }], multiAutoCompleteInputElement: [{
                type: ViewChild,
                args: ['multiAutoCompleteInput']
            }], multiAutoCompleteWrapperElement: [{
                type: ViewChild,
                args: ['multiAutoCompleteWrapper']
            }], autoCompleteDirective: [{
                type: ViewChild,
                args: [AutoCompleteDirective]
            }] } });

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

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

export { MultiAutoCompleteComponent, MultiAutoCompleteModule };
//# sourceMappingURL=ng-devui-multi-auto-complete.mjs.map
