import { __decorate, __metadata } from 'tslib';
import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i1 from 'ng-devui/i18n';
import * as i4 from 'ng-devui/toggle-menu';
import { ToggleMenuContainerComponent, ToggleMenuListComponent, ToggleMenuSearchComponent, ToggleMenuModule } from 'ng-devui/toggle-menu';
import * as i2 from 'ng-devui/utils';
import { WithConfig } from 'ng-devui/utils';
import { isEmpty } from 'lodash-es';
import { of, fromEvent, BehaviorSubject } from 'rxjs';
import { debounceTime, map, switchMap } from 'rxjs/operators';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';

class TagsInputComponent {
    constructor(i18n, devConfigService) {
        this.i18n = i18n;
        this.devConfigService = devConfigService;
        /**
         * 【必选】记录输入的标签
         */
        this.tags = [];
        /**
         * 【可选】disabled 灰化状态
         */
        this.disabled = false;
        /**
         * 【可选】使用的属性名
         */
        this.displayProperty = 'name';
        /**
         * 【可选】输入的placeholder
         */
        this.placeholder = '';
        /**
         * 【可选】输入标签的最小长度
         */
        this.minLength = 3;
        /**
         * 【可选】输入标签的最大长度
         */
        this.maxLength = Number.MAX_SAFE_INTEGER;
        /**
         * 【可选】标签的最小个数
         */
        this.minTags = 0;
        /**
         * 【可选】标签的最大个数
         */
        this.maxTags = Number.MAX_SAFE_INTEGER;
        /**
         * 【可选】输入框的spellcheck
         */
        this.spellcheck = true;
        /**
         * 【可选】是否appendToBody
         */
        this.appendToBody = false;
        /**
         * 【可选】是否虚拟滚动
         */
        this.virtualScroll = false;
        /**
         * 【可选】下拉选项
         */
        this.suggestionList = [];
        /**
         * 【可选】是否按空格添加tag
         */
        this.isAddBySpace = true;
        /**
         * 【可选】默认两行显示，false 则单行显示
         */
        this.multiline = true;
        /**
         * 【可选】大小写敏感
         */
        this.caseSensitivity = false;
        this.showAnimation = true;
        /**
         * 输出函数，当选中某个选项项后，将会调用此函数，参数为当前选择项的值。如果需要获取所有选择状态的值，请参考(ngModelChange)方法
         */
        this.valueChange = new EventEmitter();
        this.newTag = '';
        this.availableOptions = [];
        this.selectedItems = [];
        /**
         * 对于用户传入的suggestionList不做修改，数据的操作在_suggestionList上进行
         */
        this._suggestionList = [];
        this.newTagValid = false;
        this.isReduce = false;
        this.isOpen = false;
        this.DEBONCE_TIME = 300;
        this.KEYS = {
            backspace: 8,
            tab: 9,
            enter: 13,
            escape: 27,
            space: 32,
            up: 38,
            down: 40,
            left: 37,
            right: 39,
            delete: 46,
            comma: 188,
        };
        this.onChange = (_) => null;
        this.onTouch = () => null;
        this.valueParser = (item) => (typeof item === 'object' ? item[this.displayProperty] || '' : String(item) ? item.toString() : '');
    }
    get getPlaceHolder() {
        const maxPlaceholder = this.maxPlaceholder === undefined ? `${this.i18nTagsInputText.tagsReachMaxNumber}${this.maxTags}` : this.maxPlaceholder;
        return this.selectedItems.length >= this.maxTags ? maxPlaceholder : this.placeholder;
    }
    setI18nText() {
        this.i18nCommonText = this.i18n.getI18nText().common;
        this.i18nTagsInputText = this.i18n.getI18nText().tagsInput;
        this.i18nSubscription = this.i18n.langChange().subscribe((data) => {
            this.i18nCommonText = data.common;
            this.i18nTagsInputText = data.tagsInput;
        });
    }
    writeValue(value) {
        if (!value) {
            return;
        }
        this.tags = value;
        this.isReduce = false;
        this.reduceSuggestionList();
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouch = fn;
    }
    ngOnInit() {
        this.setI18nText();
        this.newTag = '';
        this._suggestionList = [...this.suggestionList];
        this.searchFn = (term) => {
            return of((this._suggestionList ? this._suggestionList : []).filter((item) => term === ''
                ? true
                : this.caseSensitivity
                    ? item[this.displayProperty].indexOf(term) !== -1
                    : item[this.displayProperty].toLowerCase().indexOf(term.toLowerCase()) !== -1));
        };
        this.registerFilterChange();
    }
    ngAfterViewInit() {
        if (this.searchBox) {
            const inputDom = this.searchBox.el.nativeElement.querySelector('input');
            // input失焦不冒泡，直接监听事件处理会早于list中点击事件传递到该组件，因此增加debounceTime待下拉列表关闭后判断是否插入标签
            this.blurEventSubscription = fromEvent(inputDom, 'blur')
                .pipe(debounceTime(this.DEBONCE_TIME))
                .subscribe(() => {
                if (this.isOpen) {
                    return;
                }
                if (!isEmpty(this.newTag)) {
                    this.addTag();
                }
            });
        }
    }
    ngOnChanges(changes) {
        if (changes && changes.suggestionList && changes.suggestionList.currentValue) {
            this._suggestionList = [...this.suggestionList];
            this.reduceSuggestionList();
            if (this.sourceSubscription && this.searchFn) {
                this.sourceSubscription.next('');
            }
        }
        if (changes && changes.tags && changes.tags.currentValue) {
            this.reduceSuggestionList();
        }
    }
    ngOnDestroy() {
        if (this.sourceSubscription) {
            this.sourceSubscription.unsubscribe();
        }
        if (this.blurEventSubscription) {
            this.blurEventSubscription.unsubscribe();
        }
        if (this.i18nSubscription) {
            this.i18nSubscription.unsubscribe();
        }
    }
    registerFilterChange() {
        this.sourceSubscription = new BehaviorSubject('');
        this.sourceSubscription
            .pipe(map((term) => {
            this.tagIsValid();
            return term;
        }), switchMap((term) => this.searchFn(term)))
            .subscribe((options) => {
            this.availableOptions = options;
            if (this.selectBoxContainer) {
                this.selectBoxContainer.updatePosition();
            }
            if (this.selectBox) {
                this.selectBox.resetIndex(!options.length);
            }
        });
    }
    reduceSuggestionList() {
        this.selectedItems = this.tags.map((option, id) => ({ option, id }));
        if (this.isReduce) {
            return;
        }
        if (this.suggestionList.length > 0) {
            this.isReduce = true;
            // 使用用户最初传入的数据来进行过滤
            this._suggestionList = this.suggestionList.filter((suggestion) => {
                return (this.selectedItems.findIndex(({ option }) => this.caseSensitivity
                    ? option[this.displayProperty] === suggestion[this.displayProperty]
                    : option[this.displayProperty].toLowerCase() === suggestion[this.displayProperty].toLowerCase()) === -1);
            });
            if (this.sourceSubscription && this.searchFn) {
                this.sourceSubscription.next('');
            }
        }
    }
    host_click() {
        if (!this.disabled) {
            const dom = this.searchBox.el.nativeElement.querySelector('input');
            if (dom && this.selectBox) {
                dom.focus();
                this.selectBox.resetIndex(false);
            }
        }
    }
    passEvent(data) {
        const { event, type } = data;
        switch (type) {
            case 'keydown.enter':
            case 'blur':
                // keydown.enter 和 keydown 都接收会重复处理
                // 点击会聚焦input，input失焦事件不会冒泡，单独处理
                break;
            case 'keydown': {
                const hotkeys = [this.KEYS.enter, this.KEYS.tab];
                if (this.isAddBySpace) {
                    hotkeys.push(this.KEYS.space);
                }
                if (hotkeys.includes(event.keyCode)) {
                    event.preventDefault();
                    event.stopPropagation();
                    if (this.selectBox?.selectIndex !== -1) {
                        this.addSuggestionByIndex(this.selectBox.selectIndex, this.availableOptions[this.selectBox.selectIndex]);
                    }
                    else {
                        this.addTag();
                    }
                }
                break;
            }
            default:
                this.inputEvent = { event, type };
        }
    }
    addSuggestionByIndex(index, value) {
        if (index < 0 ||
            index >= this.availableOptions.length ||
            this.maxTags <= this.selectedItems.length ||
            this.selectedItems.findIndex(({ option }) => this.caseSensitivity
                ? option[this.displayProperty] === value[this.displayProperty]
                : option[this.displayProperty].toLowerCase() === value[this.displayProperty].toLowerCase()) !== -1) {
            return;
        }
        this.canAdd(value).then((result) => {
            if (!result) {
                return;
            }
            this.checkMaxTags(this.availableOptions[index]);
            this.onChange(this.selectedItems.map((tagItem) => tagItem.option));
            this.valueChange.emit(this.availableOptions[index]);
            const suggestionListIndex = this._suggestionList.findIndex((item) => this.caseSensitivity
                ? item[this.displayProperty] === value[this.displayProperty]
                : item[this.displayProperty].toLowerCase() === value[this.displayProperty].toLowerCase());
            this._suggestionList.splice(suggestionListIndex, 1);
            this.delayResetNewTag();
            this.sourceSubscription.next('');
        });
    }
    removeTag(data) {
        const { index } = data;
        // 立即移除会导致toggle-menu-container无法判断event.target是否在容器中，从而关闭下拉菜单
        setTimeout(() => {
            if (index < 0 || index >= this.selectedItems.length) {
                return;
            }
            // onPush下 数组长度变化不会触发变更检测
            this.availableOptions = [...this.availableOptions, this.selectedItems[index]?.option];
            this._suggestionList = this.availableOptions;
            const tag = this.selectedItems[index].option;
            this.selectedItems.splice(index, 1);
            if (this.selectedItems.length === 0) {
                this.selectBoxContainer.updatePosition();
            }
            this.onChange(this.selectedItems.map((tagItem) => tagItem.option));
            this.valueChange.emit(tag);
        });
    }
    tagIsValid() {
        const tag = this.newTag;
        const tmp = this.displayProperty;
        const result = tag &&
            tag.length >= this.minLength &&
            tag.length <= this.maxLength &&
            this._suggestionList.findIndex((item) => this.caseSensitivity ? item[tmp] === tag : item[tmp].toLowerCase() === tag.toLowerCase()) === -1 &&
            this.selectedItems.findIndex(({ option }) => this.caseSensitivity ? option[tmp] === tag : option[tmp].toLowerCase() === tag.toLowerCase()) === -1 &&
            !this.isEmptyString(tag);
        this.newTagValid = tag === '' || !!result;
        return result;
    }
    isEmptyString(tag) {
        const temp = tag.match(/\s/g);
        if (temp) {
            return tag.length === temp.length;
        }
        else {
            return false;
        }
    }
    addTag() {
        this.canAdd()
            .then((result) => {
            if (result && this.maxTags > this.selectedItems.length) {
                if (this.tagIsValid()) {
                    const obj = {};
                    obj[this.displayProperty] = this.newTag;
                    this.checkMaxTags(obj);
                    this.onChange(this.selectedItems.map((tagItem) => tagItem.option));
                    this.valueChange.emit(this.newTag);
                }
            }
            else {
                this.newTagValid = false;
            }
        })
            .finally(() => this.delayResetNewTag());
        this.sourceSubscription.next('');
    }
    canAdd(value) {
        let checkResult = Promise.resolve(true);
        if (this.checkBeforeAdd) {
            const result = this.checkBeforeAdd(value || this.newTag);
            if (typeof result !== 'undefined') {
                if (result.then) {
                    checkResult = result;
                }
                else if (result.subscribe) {
                    checkResult = result.toPromise();
                }
                else {
                    checkResult = Promise.resolve(result);
                }
            }
        }
        return checkResult;
    }
    checkMaxTags(tag) {
        this.selectedItems.push({ id: this.selectedItems.length, option: tag });
        if (this.selectedItems.length >= this.maxTags) {
            this.isOpen = false;
        }
    }
    setValue({ option, index }) {
        this.addSuggestionByIndex(index, option);
    }
    searchInputValueChange(event) {
        if (this.selectBox) {
            this.selectBox.selectIndex = -1;
        }
        this.newTag = (event || '').trim();
        this.sourceSubscription.next(this.newTag);
    }
    toggleChangeFn(event) {
        if (!event) {
            this.onTouch();
        }
        this.isOpen = event;
    }
    delayResetNewTag() {
        setTimeout(() => {
            // 放在timeout里是因为如果用空格添加tag，会导致添加之后输入框里有个空格。
            this.newTag = '';
        }, 50);
    }
}
TagsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TagsInputComponent, deps: [{ token: i1.I18nService }, { token: i2.DevConfigService }], target: i0.ɵɵFactoryTarget.Component });
TagsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TagsInputComponent, selector: "d-tags-input", inputs: { tags: "tags", disabled: "disabled", displayProperty: "displayProperty", placeholder: "placeholder", maxPlaceholder: "maxPlaceholder", minLength: "minLength", maxLength: "maxLength", minTags: "minTags", maxTags: "maxTags", spellcheck: "spellcheck", appendToBody: "appendToBody", virtualScroll: "virtualScroll", suggestionList: "suggestionList", isAddBySpace: "isAddBySpace", multiline: "multiline", maxHeight: "maxHeight", caseSensitivity: "caseSensitivity", itemTemplate: "itemTemplate", checkBeforeAdd: "checkBeforeAdd", showAnimation: "showAnimation" }, outputs: { valueChange: "valueChange" }, providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => TagsInputComponent),
            multi: true,
        },
    ], viewQueries: [{ propertyName: "tagsInputWrapperItem", first: true, predicate: ["tagsInputWrapper"], descendants: true, static: true }, { propertyName: "selectBoxContainer", first: true, predicate: ToggleMenuContainerComponent, descendants: true }, { propertyName: "selectBox", first: true, predicate: ToggleMenuListComponent, descendants: true }, { propertyName: "searchBox", first: true, predicate: ToggleMenuSearchComponent, descendants: true }], exportAs: ["TagsInput"], usesOnChanges: true, ngImport: i0, template: "<div #tagsInputWrapper class=\"devui-tags-host {{ multiline ? '' : 'init-inline' }}\" tabindex=\"-1\" (click)=\"host_click()\">\n  <d-toggle-menu-container\n    [isOpen]=\"isOpen\"\n    [appendToBody]=\"appendToBody\"\n    [selectWrapper]=\"tagsInputWrapperItem\"\n    [disabled]=\"disabled || selectedItems?.length >= maxTags\"\n    [toggleOnFocus]=\"true\"\n    [showAnimation]=\"showAnimation\"\n    [closeScope]=\"'blank'\"\n    (passEvent)=\"passEvent($event)\"\n    (toggleChange)=\"toggleChangeFn($event)\"\n  >\n    <d-toggle-menu-label\n      [multiItems]=\"selectedItems\"\n      [mode]=\"'multiple-line'\"\n      [valueParser]=\"valueParser\"\n      [disabled]=\"disabled\"\n      [maxHeight]=\"maxHeight\"\n      (removeChange)=\"removeTag($event)\"\n    ></d-toggle-menu-label>\n    <d-toggle-menu-search\n      *ngIf=\"!disabled\"\n      [inputValue]=\"newTag\"\n      [searchPlaceholder]=\"getPlaceHolder\"\n      [searchFn]=\"searchFn\"\n      [spellcheck]=\"spellcheck\"\n      [isShowSearchIcon]=\"false\"\n      [disabled]=\"disabled || selectedItems?.length >= maxTags\"\n      [inputWidth]=\"multiline ? '' : 'auto'\"\n      [delay]=\"0\"\n      (searchInputValueChange)=\"searchInputValueChange($event)\"\n    ></d-toggle-menu-search>\n    <d-toggle-menu-list\n      [eventHandle]=\"inputEvent\"\n      [options]=\"availableOptions\"\n      [value]=\"selectedItems\"\n      [virtualScroll]=\"virtualScroll\"\n      [hasSelectIndex]=\"true\"\n      [isFiltering]=\"newTag?.length > 0\"\n      [listItemTemplate]=\"listItem\"\n      [closeScope]=\"'blank'\"\n      (toggleChange)=\"toggleChangeFn($event)\"\n      (valueChange)=\"setValue($event)\"\n    >\n      <ng-template #listItem let-item=\"item\" let-index=\"index\" let-selectIndex=\"selectIndex\" let-choose=\"choose\">\n        <d-toggle-menu-list-item\n          [item]=\"item\"\n          [index]=\"index\"\n          [selectIndex]=\"selectIndex\"\n          [highlightToggle]=\"false\"\n          [customTemplate]=\"itemTemplate\"\n          [filterKey]=\"displayProperty\"\n          (chooseItem)=\"choose($event)\"\n        ></d-toggle-menu-list-item>\n      </ng-template>\n    </d-toggle-menu-list>\n  </d-toggle-menu-container>\n</div>\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}:host{display:block;outline:none}:host .devui-tags-host{position:relative;height:100%;outline:none}:host .devui-tags-host:active{outline:0}:host ::ng-deep .devui-tags-host.init-inline{height:30px;border-radius:2px;border-radius:var(--devui-border-radius, 2px);border:solid 1px #d7d8da;border:solid 1px var(--devui-form-control-line, #d7d8da)}:host ::ng-deep .devui-tags-host.init-inline div.devui-toggle-menu-container{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;border:none}:host ::ng-deep .devui-tags-host.init-inline div.devui-toggle-menu-container d-toggle-menu-label{width:auto;max-width:none;background-color:transparent}:host ::ng-deep .devui-tags-host.init-inline div.devui-toggle-menu-container d-toggle-menu-label ul.devui-select-tag-list{white-space:nowrap}:host ::ng-deep .devui-tags-host.init-inline div.devui-toggle-menu-container d-toggle-menu-search .devui-toggle-menu-search{min-width:160px}:host ::ng-deep .devui-tags-host:not(.init-inline) d-toggle-menu-label{width:100%;border-radius:2px;border-radius:var(--devui-border-radius, 2px);background-color:#fff;background-color:var(--devui-base-bg, #ffffff)}:host ::ng-deep .devui-tags-host .devui-toggle-menu-container{flex-wrap:wrap;align-content:flex-start}:host ::ng-deep .devui-tags-host .devui-toggle-menu-container d-toggle-menu-search .devui-toggle-menu-search>input{height:26px}:host ::ng-deep .devui-tags-host .devui-toggle-menu-container.disabled d-toggle-menu-search .devui-toggle-menu-search input{cursor:not-allowed}:host ::ng-deep .devui-tags-host .devui-toggle-menu-container d-toggle-menu-list ul d-toggle-menu-list-item .devui-dropdown-item:not(.disabled):active,:host ::ng-deep .devui-tags-host .devui-toggle-menu-container d-toggle-menu-list ul d-toggle-menu-list-item .devui-dropdown-item:not(.disabled):active:hover{color:#252b3a;color:var(--devui-list-item-hover-text, #252b3a);background-color:#f2f2f3;background-color:var(--devui-list-item-hover-bg, #f2f2f3)}::ng-deep .devui-dropdown-menu d-toggle-menu-list-item .devui-dropdown-item:not(.disabled):active,::ng-deep .devui-dropdown-menu d-toggle-menu-list-item .devui-dropdown-item:not(.disabled):active:hover{color:#252b3a;color:var(--devui-list-item-hover-text, #252b3a);background-color:#f2f2f3;background-color:var(--devui-list-item-hover-bg, #f2f2f3)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ToggleMenuContainerComponent, selector: "d-toggle-menu-container", inputs: ["isOpen", "appendToBody", "appendToBodyDirections", "width", "size", "overview", "position", "disabled", "showAnimation", "toggleOnFocus", "closeScope", "direction", "selectWrapper"], outputs: ["toggleChange", "passEvent"] }, { kind: "component", type: i4.ToggleMenuLabelComponent, selector: "d-toggle-menu-label", inputs: ["mode", "multiItems", "disabled", "maxWidth", "maxHeight", "optionDisabledKey", "valueParser"], outputs: ["removeChange"] }, { kind: "component", type: i4.ToggleMenuListItemComponent, selector: "d-toggle-menu-list-item", inputs: ["item", "index", "selectIndex", "activeIndex", "formatter", "filterKey", "optionDisabledKey", "optionGroupKey", "highlightToggle", "highlightItemClass", "multiple", "isShowKeyword", "keyword", "customTemplate", "color"], outputs: ["chooseItem"] }, { kind: "component", type: i4.ToggleMenuListComponent, selector: "d-toggle-menu-list", inputs: ["options", "optionDisabledKey", "optionImmutableKey", "optionGroupKey", "size", "keyword", "isFiltering", "enableLazyLoad", "virtualScroll", "listItemTemplate", "loadingTemplateRef", "noResultItemTemplate", "customViewTemplate", "customViewDirection", "templateItemSize", "scrollHeight", "selectIndex", "hasSelectIndex", "multiple", "multiItems", "value", "isSelectAll", "keepMultipleOrder", "eventHandle", "closeScope"], outputs: ["toggleChange", "valueChange", "loadMore"] }, { kind: "component", type: i4.ToggleMenuSearchComponent, selector: "d-toggle-menu-search", inputs: ["searchPlaceholder", "isShowSearchIcon", "inputValue", "inputWidth", "filterKey", "disabled", "spellcheck", "options", "delay", "formatter", "searchFn"], outputs: ["searchInputValueChange"] }] });
__decorate([
    WithConfig(),
    __metadata("design:type", Object)
], TagsInputComponent.prototype, "showAnimation", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TagsInputComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-tags-input', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => TagsInputComponent),
                            multi: true,
                        },
                    ], exportAs: 'TagsInput', preserveWhitespaces: false, template: "<div #tagsInputWrapper class=\"devui-tags-host {{ multiline ? '' : 'init-inline' }}\" tabindex=\"-1\" (click)=\"host_click()\">\n  <d-toggle-menu-container\n    [isOpen]=\"isOpen\"\n    [appendToBody]=\"appendToBody\"\n    [selectWrapper]=\"tagsInputWrapperItem\"\n    [disabled]=\"disabled || selectedItems?.length >= maxTags\"\n    [toggleOnFocus]=\"true\"\n    [showAnimation]=\"showAnimation\"\n    [closeScope]=\"'blank'\"\n    (passEvent)=\"passEvent($event)\"\n    (toggleChange)=\"toggleChangeFn($event)\"\n  >\n    <d-toggle-menu-label\n      [multiItems]=\"selectedItems\"\n      [mode]=\"'multiple-line'\"\n      [valueParser]=\"valueParser\"\n      [disabled]=\"disabled\"\n      [maxHeight]=\"maxHeight\"\n      (removeChange)=\"removeTag($event)\"\n    ></d-toggle-menu-label>\n    <d-toggle-menu-search\n      *ngIf=\"!disabled\"\n      [inputValue]=\"newTag\"\n      [searchPlaceholder]=\"getPlaceHolder\"\n      [searchFn]=\"searchFn\"\n      [spellcheck]=\"spellcheck\"\n      [isShowSearchIcon]=\"false\"\n      [disabled]=\"disabled || selectedItems?.length >= maxTags\"\n      [inputWidth]=\"multiline ? '' : 'auto'\"\n      [delay]=\"0\"\n      (searchInputValueChange)=\"searchInputValueChange($event)\"\n    ></d-toggle-menu-search>\n    <d-toggle-menu-list\n      [eventHandle]=\"inputEvent\"\n      [options]=\"availableOptions\"\n      [value]=\"selectedItems\"\n      [virtualScroll]=\"virtualScroll\"\n      [hasSelectIndex]=\"true\"\n      [isFiltering]=\"newTag?.length > 0\"\n      [listItemTemplate]=\"listItem\"\n      [closeScope]=\"'blank'\"\n      (toggleChange)=\"toggleChangeFn($event)\"\n      (valueChange)=\"setValue($event)\"\n    >\n      <ng-template #listItem let-item=\"item\" let-index=\"index\" let-selectIndex=\"selectIndex\" let-choose=\"choose\">\n        <d-toggle-menu-list-item\n          [item]=\"item\"\n          [index]=\"index\"\n          [selectIndex]=\"selectIndex\"\n          [highlightToggle]=\"false\"\n          [customTemplate]=\"itemTemplate\"\n          [filterKey]=\"displayProperty\"\n          (chooseItem)=\"choose($event)\"\n        ></d-toggle-menu-list-item>\n      </ng-template>\n    </d-toggle-menu-list>\n  </d-toggle-menu-container>\n</div>\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}:host{display:block;outline:none}:host .devui-tags-host{position:relative;height:100%;outline:none}:host .devui-tags-host:active{outline:0}:host ::ng-deep .devui-tags-host.init-inline{height:30px;border-radius:2px;border-radius:var(--devui-border-radius, 2px);border:solid 1px #d7d8da;border:solid 1px var(--devui-form-control-line, #d7d8da)}:host ::ng-deep .devui-tags-host.init-inline div.devui-toggle-menu-container{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;border:none}:host ::ng-deep .devui-tags-host.init-inline div.devui-toggle-menu-container d-toggle-menu-label{width:auto;max-width:none;background-color:transparent}:host ::ng-deep .devui-tags-host.init-inline div.devui-toggle-menu-container d-toggle-menu-label ul.devui-select-tag-list{white-space:nowrap}:host ::ng-deep .devui-tags-host.init-inline div.devui-toggle-menu-container d-toggle-menu-search .devui-toggle-menu-search{min-width:160px}:host ::ng-deep .devui-tags-host:not(.init-inline) d-toggle-menu-label{width:100%;border-radius:2px;border-radius:var(--devui-border-radius, 2px);background-color:#fff;background-color:var(--devui-base-bg, #ffffff)}:host ::ng-deep .devui-tags-host .devui-toggle-menu-container{flex-wrap:wrap;align-content:flex-start}:host ::ng-deep .devui-tags-host .devui-toggle-menu-container d-toggle-menu-search .devui-toggle-menu-search>input{height:26px}:host ::ng-deep .devui-tags-host .devui-toggle-menu-container.disabled d-toggle-menu-search .devui-toggle-menu-search input{cursor:not-allowed}:host ::ng-deep .devui-tags-host .devui-toggle-menu-container d-toggle-menu-list ul d-toggle-menu-list-item .devui-dropdown-item:not(.disabled):active,:host ::ng-deep .devui-tags-host .devui-toggle-menu-container d-toggle-menu-list ul d-toggle-menu-list-item .devui-dropdown-item:not(.disabled):active:hover{color:#252b3a;color:var(--devui-list-item-hover-text, #252b3a);background-color:#f2f2f3;background-color:var(--devui-list-item-hover-bg, #f2f2f3)}::ng-deep .devui-dropdown-menu d-toggle-menu-list-item .devui-dropdown-item:not(.disabled):active,::ng-deep .devui-dropdown-menu d-toggle-menu-list-item .devui-dropdown-item:not(.disabled):active:hover{color:#252b3a;color:var(--devui-list-item-hover-text, #252b3a);background-color:#f2f2f3;background-color:var(--devui-list-item-hover-bg, #f2f2f3)}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.I18nService }, { type: i2.DevConfigService }]; }, propDecorators: { tags: [{
                type: Input
            }], disabled: [{
                type: Input
            }], displayProperty: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], maxPlaceholder: [{
                type: Input
            }], minLength: [{
                type: Input
            }], maxLength: [{
                type: Input
            }], minTags: [{
                type: Input
            }], maxTags: [{
                type: Input
            }], spellcheck: [{
                type: Input
            }], appendToBody: [{
                type: Input
            }], virtualScroll: [{
                type: Input
            }], suggestionList: [{
                type: Input
            }], isAddBySpace: [{
                type: Input
            }], multiline: [{
                type: Input
            }], maxHeight: [{
                type: Input
            }], caseSensitivity: [{
                type: Input
            }], itemTemplate: [{
                type: Input
            }], checkBeforeAdd: [{
                type: Input
            }], showAnimation: [{
                type: Input
            }], valueChange: [{
                type: Output
            }], tagsInputWrapperItem: [{
                type: ViewChild,
                args: ['tagsInputWrapper', { static: true }]
            }], selectBoxContainer: [{
                type: ViewChild,
                args: [ToggleMenuContainerComponent]
            }], selectBox: [{
                type: ViewChild,
                args: [ToggleMenuListComponent]
            }], searchBox: [{
                type: ViewChild,
                args: [ToggleMenuSearchComponent]
            }] } });

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

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

export { TagsInputComponent, TagsInputModule };
//# sourceMappingURL=ng-devui-tags-input.mjs.map
