import { __decorate, __metadata } from "tslib";
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, HostListener, Input, Output, TemplateRef, ViewChild } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { AutoCompleteDirective } from 'ng-devui/auto-complete';
import { I18nService } from 'ng-devui/i18n';
import { DevConfigService, WithConfig } from 'ng-devui/utils';
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/auto-complete";
export class EditableSelectComponent {
    constructor(cdr, i18n, devConfigService) {
        this.cdr = cdr;
        this.i18n = i18n;
        this.devConfigService = devConfigService;
        this.appendToBody = false;
        this.appendToBodyDirections = ['rightDown', 'leftDown', 'rightUp', 'leftUp'];
        this.disabled = false;
        this.placeholder = '';
        this.source = [];
        this.allowClear = false;
        this.enableLazyLoad = false;
        this.formatter = (item) => (item ? item.label || item.toString() : '');
        this.valueParser = (item) => item;
        this.showAnimation = true;
        this.loadMore = new EventEmitter();
        this.toggleChange = new EventEmitter();
        this.multiItems = [];
        this.activeIndex = 0;
        this._dropDownOpen = false;
        this.onChange = (_) => null;
        this.onTouched = () => null;
    }
    set dropDownOpen(val) {
        this._dropDownOpen = val;
        if (this._dropDownOpen) {
            this.autoCompleteDirective.openPopup(this.activeIndex);
        }
        else {
            this.autoCompleteDirective.hidePopup();
            this.onTouched();
        }
    }
    get dropDownOpen() {
        return this._dropDownOpen;
    }
    onDocumentClick(event) {
        if (!this.dropDownOpen) {
            return;
        }
        const targetEl = event.target;
        if (!this.editableSelectBox.nativeElement.contains(targetEl)) {
            this.dropDownOpen = false;
        }
    }
    ngOnChanges(changes) {
        if (changes && changes['searchFn'] && typeof this.searchFn === 'function') {
            if (this.subscription) {
                this.subscription.unsubscribe();
            }
            this.subscription = this.searchFn('').subscribe((source) => {
                this.source = source;
            });
        }
    }
    ngOnInit() {
        this.i18nCommonText = this.i18n.getI18nText().common;
        this.i18nSubscription = this.i18n.langChange().subscribe((data) => {
            this.i18nCommonText = data.common;
        });
    }
    ngOnDestroy() {
        if (this.i18nSubscription) {
            this.i18nSubscription.unsubscribe();
        }
    }
    writeValue(obj) {
        this.inputValue = obj || '';
        this.cdr.markForCheck();
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    selectValue() {
        this.dropDownOpen = false;
    }
    valueClear(event) {
        event.stopPropagation();
        this.inputValue = '';
        this.onChange(this.inputValue);
    }
    onTermChange(value) {
        this.inputValue = value;
        this.onChange(this.inputValue);
    }
    toggle() {
        const inputString = this.formatter(this.inputValue);
        this.activeIndex = this.source.map((item) => this.formatter(item).toLowerCase()).indexOf(inputString.toLowerCase());
        this.activeIndex = this.activeIndex > -1 ? this.activeIndex : 0;
        this.dropDownOpen = !this.dropDownOpen;
    }
    loadMoreEvent(event) {
        this.loadMore.emit(event);
    }
    toggleChangeHandler(value) {
        this.toggleChange.emit(value);
    }
}
EditableSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: EditableSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.I18nService }, { token: i2.DevConfigService }], target: i0.ɵɵFactoryTarget.Component });
EditableSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: EditableSelectComponent, selector: "d-editable-select", inputs: { appendToBody: "appendToBody", appendToBodyDirections: "appendToBodyDirections", disabled: "disabled", placeholder: "placeholder", source: "source", itemTemplate: "itemTemplate", noResultItemTemplate: "noResultItemTemplate", maxHeight: "maxHeight", width: "width", disabledKey: "disabledKey", allowClear: "allowClear", enableLazyLoad: "enableLazyLoad", formatter: "formatter", valueParser: "valueParser", searchFn: "searchFn", showAnimation: "showAnimation" }, outputs: { loadMore: "loadMore", toggleChange: "toggleChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => EditableSelectComponent),
            multi: true,
        },
    ], viewQueries: [{ propertyName: "autoCompleteDirective", first: true, predicate: AutoCompleteDirective, descendants: true, static: true }, { propertyName: "editableSelectBox", first: true, predicate: ["editableSelectBox"], descendants: true, static: true }], exportAs: ["editable-select"], usesOnChanges: true, ngImport: i0, template: "<div\r\n  #editableSelectBox\r\n  class=\"devui-form-group devui-has-feedback\"\r\n  [ngClass]=\"{\r\n    'devui-select-open': dropDownOpen,\r\n    'allow-clear': (inputValue || inputValue === 0) && allowClear\r\n  }\"\r\n>\r\n  <input\r\n    (click)=\"toggle()\"\r\n    class=\"devui-form-control devui-dropdown-origin\"\r\n    type=\"text\"\r\n    name=\"autoCompleteControl\"\r\n    [source]=\"source\"\r\n    (ngModelChange)=\"onTermChange($event)\"\r\n    [ngModel]=\"inputValue\"\r\n    [searchFn]=\"searchFn\"\r\n    [disabled]=\"disabled\"\r\n    [disabledKey]=\"disabledKey\"\r\n    [placeholder]=\"placeholder\"\r\n    [itemTemplate]=\"itemTemplate\"\r\n    [noResultItemTemplate]=\"noResultItemTemplate || noResultDefaultTemplate\"\r\n    [appendToBody]=\"appendToBody\"\r\n    [appendToBodyDirections]=\"appendToBodyDirections\"\r\n    [maxHeight]=\"maxHeight\"\r\n    [sceneType]=\"'select'\"\r\n    [dAutoCompleteWidth]=\"width\"\r\n    dAutoComplete\r\n    [enableLazyLoad]=\"enableLazyLoad\"\r\n    [formatter]=\"formatter\"\r\n    [valueParser]=\"valueParser\"\r\n    [showAnimation]=\"showAnimation\"\r\n    (toggleChange)=\"toggleChangeHandler($event)\"\r\n    (loadMore)=\"loadMoreEvent($event)\"\r\n    (selectValue)=\"selectValue()\"\r\n  />\r\n  <span class=\"devui-form-control-feedback\">\r\n    <span class=\"devui-select-clear-icon\" (click)=\"valueClear($event)\">\r\n      <svg viewBox=\"0 0 16 16\">\r\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n          <path\r\n            d=\"M8,1 C11.8659932,1 15,4.13400675 15,8 C15,11.8659932 11.8659932,15 8,15 C4.13400675,15 1,11.8659932 1,8 C1,4.13400675 4.13400675,1 8,1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,7.29289322 L5.87867966,5.17157288 Z\"\r\n            fill-rule=\"nonzero\"\r\n          ></path>\r\n        </g>\r\n      </svg>\r\n    </span>\r\n    <span class=\"devui-select-chevron-icon\">\r\n      <svg viewBox=\"0 0 16 16\">\r\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n          <path\r\n            d=\"M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z\"\r\n            fill-rule=\"nonzero\"\r\n          ></path>\r\n        </g>\r\n      </svg>\r\n    </span>\r\n  </span>\r\n</div>\r\n\r\n<ng-template #noResultDefaultTemplate>\r\n  <span>{{ inputValue || inputValue === 0 ? i18nCommonText?.noRecordsFound : i18nCommonText?.noData }}</span>\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}.devui-form-group.devui-has-feedback>.devui-form-control-feedback{height:100%;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:12px;font-size:var(--devui-font-size, 12px);z-index:10}.devui-form-group.devui-has-feedback>.devui-form-control-feedback>span{align-items:center}.devui-form-group.devui-has-feedback>.devui-form-control-feedback>span>svg{width:1em;height:1em}.devui-form-group.devui-has-feedback .devui-select-clear-icon{pointer-events:auto;display:none;cursor:pointer}.devui-form-group.devui-has-feedback .devui-select-clear-icon path{fill:#d7d8da;fill:var(--devui-shape-icon-fill, #d7d8da);transition:all cubic-bezier(.645,.045,.355,1) .3s;transition:all var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)}.devui-form-group.devui-has-feedback .devui-select-clear-icon:hover path{fill:#babbc0;fill:var(--devui-shape-icon-fill-hover, #babbc0)}.devui-form-group.devui-has-feedback .devui-select-chevron-icon{display:flex;transition:transform .3s cubic-bezier(.645,.045,.355,1);transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-form-group.devui-has-feedback .devui-select-chevron-icon svg path{fill:#575d6c;fill:var(--devui-text-weak, #575d6c)}.devui-form-group.devui-has-feedback.allow-clear:hover .devui-select-chevron-icon{display:none}.devui-form-group.devui-has-feedback.allow-clear:hover .devui-select-clear-icon{display:flex}.devui-select-open .devui-select-chevron-icon{transform:rotate(180deg)}.devui-form-control{outline:none;padding-right:24px}input::-ms-clear{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i5.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"] }] });
__decorate([
    WithConfig(),
    __metadata("design:type", Object)
], EditableSelectComponent.prototype, "showAnimation", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: EditableSelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-editable-select', exportAs: 'editable-select', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => EditableSelectComponent),
                            multi: true,
                        },
                    ], preserveWhitespaces: false, template: "<div\r\n  #editableSelectBox\r\n  class=\"devui-form-group devui-has-feedback\"\r\n  [ngClass]=\"{\r\n    'devui-select-open': dropDownOpen,\r\n    'allow-clear': (inputValue || inputValue === 0) && allowClear\r\n  }\"\r\n>\r\n  <input\r\n    (click)=\"toggle()\"\r\n    class=\"devui-form-control devui-dropdown-origin\"\r\n    type=\"text\"\r\n    name=\"autoCompleteControl\"\r\n    [source]=\"source\"\r\n    (ngModelChange)=\"onTermChange($event)\"\r\n    [ngModel]=\"inputValue\"\r\n    [searchFn]=\"searchFn\"\r\n    [disabled]=\"disabled\"\r\n    [disabledKey]=\"disabledKey\"\r\n    [placeholder]=\"placeholder\"\r\n    [itemTemplate]=\"itemTemplate\"\r\n    [noResultItemTemplate]=\"noResultItemTemplate || noResultDefaultTemplate\"\r\n    [appendToBody]=\"appendToBody\"\r\n    [appendToBodyDirections]=\"appendToBodyDirections\"\r\n    [maxHeight]=\"maxHeight\"\r\n    [sceneType]=\"'select'\"\r\n    [dAutoCompleteWidth]=\"width\"\r\n    dAutoComplete\r\n    [enableLazyLoad]=\"enableLazyLoad\"\r\n    [formatter]=\"formatter\"\r\n    [valueParser]=\"valueParser\"\r\n    [showAnimation]=\"showAnimation\"\r\n    (toggleChange)=\"toggleChangeHandler($event)\"\r\n    (loadMore)=\"loadMoreEvent($event)\"\r\n    (selectValue)=\"selectValue()\"\r\n  />\r\n  <span class=\"devui-form-control-feedback\">\r\n    <span class=\"devui-select-clear-icon\" (click)=\"valueClear($event)\">\r\n      <svg viewBox=\"0 0 16 16\">\r\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n          <path\r\n            d=\"M8,1 C11.8659932,1 15,4.13400675 15,8 C15,11.8659932 11.8659932,15 8,15 C4.13400675,15 1,11.8659932 1,8 C1,4.13400675 4.13400675,1 8,1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,7.29289322 L5.87867966,5.17157288 Z\"\r\n            fill-rule=\"nonzero\"\r\n          ></path>\r\n        </g>\r\n      </svg>\r\n    </span>\r\n    <span class=\"devui-select-chevron-icon\">\r\n      <svg viewBox=\"0 0 16 16\">\r\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n          <path\r\n            d=\"M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z\"\r\n            fill-rule=\"nonzero\"\r\n          ></path>\r\n        </g>\r\n      </svg>\r\n    </span>\r\n  </span>\r\n</div>\r\n\r\n<ng-template #noResultDefaultTemplate>\r\n  <span>{{ inputValue || inputValue === 0 ? i18nCommonText?.noRecordsFound : i18nCommonText?.noData }}</span>\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}.devui-form-group.devui-has-feedback>.devui-form-control-feedback{height:100%;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:12px;font-size:var(--devui-font-size, 12px);z-index:10}.devui-form-group.devui-has-feedback>.devui-form-control-feedback>span{align-items:center}.devui-form-group.devui-has-feedback>.devui-form-control-feedback>span>svg{width:1em;height:1em}.devui-form-group.devui-has-feedback .devui-select-clear-icon{pointer-events:auto;display:none;cursor:pointer}.devui-form-group.devui-has-feedback .devui-select-clear-icon path{fill:#d7d8da;fill:var(--devui-shape-icon-fill, #d7d8da);transition:all cubic-bezier(.645,.045,.355,1) .3s;transition:all var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)}.devui-form-group.devui-has-feedback .devui-select-clear-icon:hover path{fill:#babbc0;fill:var(--devui-shape-icon-fill-hover, #babbc0)}.devui-form-group.devui-has-feedback .devui-select-chevron-icon{display:flex;transition:transform .3s cubic-bezier(.645,.045,.355,1);transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-form-group.devui-has-feedback .devui-select-chevron-icon svg path{fill:#575d6c;fill:var(--devui-text-weak, #575d6c)}.devui-form-group.devui-has-feedback.allow-clear:hover .devui-select-chevron-icon{display:none}.devui-form-group.devui-has-feedback.allow-clear:hover .devui-select-clear-icon{display:flex}.devui-select-open .devui-select-chevron-icon{transform:rotate(180deg)}.devui-form-control{outline:none;padding-right:24px}input::-ms-clear{display:none}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.I18nService }, { type: i2.DevConfigService }]; }, propDecorators: { appendToBody: [{
                type: Input
            }], appendToBodyDirections: [{
                type: Input
            }], disabled: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], source: [{
                type: Input
            }], itemTemplate: [{
                type: Input
            }], noResultItemTemplate: [{
                type: Input
            }], maxHeight: [{
                type: Input
            }], width: [{
                type: Input
            }], disabledKey: [{
                type: Input
            }], allowClear: [{
                type: Input
            }], enableLazyLoad: [{
                type: Input
            }], formatter: [{
                type: Input
            }], valueParser: [{
                type: Input
            }], searchFn: [{
                type: Input
            }], showAnimation: [{
                type: Input
            }], loadMore: [{
                type: Output
            }], toggleChange: [{
                type: Output
            }], autoCompleteDirective: [{
                type: ViewChild,
                args: [AutoCompleteDirective, { static: true }]
            }], editableSelectBox: [{
                type: ViewChild,
                args: ['editableSelectBox', { static: true }]
            }], onDocumentClick: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 