@duoduo-oba/ng-devui/fesm5/ng-devui-auto-complete.js

DevUI components based on Angular

import { Component, ChangeDetectionStrategy, HostBinding, Input, ViewChild, EventEmitter, Directive, forwardRef, ElementRef, ViewContainerRef, ComponentFactoryResolver, Renderer2, Injector, ChangeDetectorRef, Output, HostListener, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { of, fromEvent } from 'rxjs';
import { filter, map, tap, debounceTime, switchMap } from 'rxjs/operators';
import { PositionService } from '@duoduo-oba/ng-devui/position';
import { fadeInOut, LazyLoadModule } from '@duoduo-oba/ng-devui/utils';
import { CommonModule } from '@angular/common';
import { DocumentRef, WindowRef } from '@duoduo-oba/ng-devui/window-ref';
import { LoadingModule } from '@duoduo-oba/ng-devui/loading';

/**
 * @fileoverview added by tsickle
 * Generated from: highlight.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var HighlightComponent = /** @class */ (function () {
    function HighlightComponent() {
        this.display = 'inline';
    }
    Object.defineProperty(HighlightComponent.prototype, "htmlContent", {
        get: /**
         * @return {?}
         */
        function () { return this.highlightHtml; },
        enumerable: true,
        configurable: true
    });
    /**
     * @param {?} changes
     * @return {?}
     */
    HighlightComponent.prototype.ngOnChanges = /**
     * @param {?} changes
     * @return {?}
     */
    function (changes) {
        this.highlightHtml = this.transform(this.value, this.term);
    };
    /**
     * @param {?} value
     * @param {?} term
     * @return {?}
     */
    HighlightComponent.prototype.transform = /**
     * @param {?} value
     * @param {?} term
     * @return {?}
     */
    function (value, term) {
        return value && term ? this.highlight(value, term) : value;
    };
    /**
     * @param {?} value
     * @param {?} term
     * @return {?}
     */
    HighlightComponent.prototype.highlight = /**
     * @param {?} value
     * @param {?} term
     * @return {?}
     */
    function (value, term) {
        /** @type {?} */
        var regExp = new RegExp(term.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), 'gi');
        return value.replace(regExp, (/**
         * @param {?} match
         * @return {?}
         */
        function (match) {
            return "<b class=\"re-highlight\">" + match + "</b>";
        }));
    };
    HighlightComponent.decorators = [
        { type: Component, args: [{
                    selector: 'd-highlight',
                    template: "",
                    changeDetection: ChangeDetectionStrategy.OnPush
                }] }
    ];
    HighlightComponent.propDecorators = {
        htmlContent: [{ type: HostBinding, args: ['innerHTML',] }],
        display: [{ type: HostBinding, args: ['style.display',] }],
        value: [{ type: Input }],
        term: [{ type: Input }]
    };
    return HighlightComponent;
}());
if (false) {
    /** @type {?} */
    HighlightComponent.prototype.display;
    /** @type {?} */
    HighlightComponent.prototype.value;
    /** @type {?} */
    HighlightComponent.prototype.term;
    /** @type {?} */
    HighlightComponent.prototype.highlightHtml;
}

/**
 * @fileoverview added by tsickle
 * Generated from: auto-complete-popup.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var AutoCompletePopupComponent = /** @class */ (function () {
    function AutoCompletePopupComponent() {
        this.activeIndex = 0;
        this.showLoading = false;
        this.labelMinHeight = 20; // position.top小于20px时候，表示光标在第一行
        // position.top小于20px时候，表示光标在第一行
        this.onChange = (/**
         * @param {?} _
         * @return {?}
         */
        function (_) { return null; });
        this.onTouched = (/**
         * @return {?}
         */
        function () { return null; });
        this.formatter = (/**
         * @param {?} item
         * @return {?}
         */
        function (item) { return item ? (item.label || item.toString()) : ''; });
        this.maxHeight = 300;
    }
    /**
     * @param {?} obj
     * @return {?}
     */
    AutoCompletePopupComponent.prototype.writeValue = /**
     * @param {?} obj
     * @return {?}
     */
    function (obj) {
        this.value = obj;
    };
    /**
     * @param {?} isDisabled
     * @return {?}
     */
    AutoCompletePopupComponent.prototype.setDisabledState = /**
     * @param {?} isDisabled
     * @return {?}
     */
    function (isDisabled) {
        this.disabled = isDisabled;
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    AutoCompletePopupComponent.prototype.registerOnChange = /**
     * @param {?} fn
     * @return {?}
     */
    function (fn) {
        this.onChange = fn;
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    AutoCompletePopupComponent.prototype.registerOnTouched = /**
     * @param {?} fn
     * @return {?}
     */
    function (fn) {
        this.onTouched = fn;
    };
    /**
     * @param {?} event
     * @param {?} item
     * @return {?}
     */
    AutoCompletePopupComponent.prototype.onSelect = /**
     * @param {?} event
     * @param {?} item
     * @return {?}
     */
    function (event, item) {
        if (this.disabledKey && item[this.disabledKey]) {
            event.preventDefault();
            event.stopPropagation();
            return;
        }
        if (this.overview === 'single') { // 单选场景和单行场景不需要冒泡
            event.preventDefault();
            event.stopPropagation();
        }
        this.value = item;
        this.onTouched();
        this.onChange({ type: 'select', value: this.value });
    };
    /**
     * @param {?} event
     * @return {?}
     */
    AutoCompletePopupComponent.prototype.selectCurrentItem = /**
     * @param {?} event
     * @return {?}
     */
    function (event) {
        this.onSelect(event, this.source[this.activeIndex]);
    };
    /**
     * @param {?} index
     * @return {?}
     */
    AutoCompletePopupComponent.prototype.onActiveIndexChange = /**
     * @param {?} index
     * @return {?}
     */
    function (index) {
        this.activeIndex = index;
    };
    /**
     * @return {?}
     */
    AutoCompletePopupComponent.prototype.reset = /**
     * @return {?}
     */
    function () {
        this.activeIndex = 0;
    };
    /**
     * @return {?}
     */
    AutoCompletePopupComponent.prototype.next = /**
     * @return {?}
     */
    function () {
        if (this.isOpen && this.source && this.source.length) {
            if (this.activeIndex === this.source.length - 1) {
                this.activeIndex = 0;
                return;
            }
            this.activeIndex = this.activeIndex + 1;
        }
    };
    /**
     * @return {?}
     */
    AutoCompletePopupComponent.prototype.prev = /**
     * @return {?}
     */
    function () {
        if (this.isOpen && this.source && this.source.length) {
            if (this.activeIndex === 0) {
                this.activeIndex = this.source.length - 1;
                return;
            }
            this.activeIndex = this.activeIndex - 1;
        }
    };
    /**
     * @param {?} index
     * @param {?} item
     * @return {?}
     */
    AutoCompletePopupComponent.prototype.trackByFn = /**
     * @param {?} index
     * @param {?} item
     * @return {?}
     */
    function (index, item) {
        return index;
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    AutoCompletePopupComponent.prototype.animationEnd = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        if (!this.isOpen) {
            /** @type {?} */
            var targetElement = this.selectMenuElement.nativeElement;
            targetElement.style.display = 'none';
        }
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    AutoCompletePopupComponent.prototype.loadMoreEvent = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        this.showLoading = true;
        this.onChange({ type: 'loadMore', value: this });
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    AutoCompletePopupComponent.prototype.loadFinish = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        this.showLoading = false;
    };
    AutoCompletePopupComponent.decorators = [
        { type: Component, args: [{
                    selector: 'd-auto-complete-popup',
                    template: "<div\r\n  class=\"devui-dropdown-menu\"\r\n  [style.display]=\"isOpen && (source?.length || noResultItemTemplate) ? 'inline-block' : 'none'\"\r\n  [style.top]=\"overview === 'multiline' ? (position?.top < labelMinHeight ? '50%' : '100%') : '100%'\"\r\n  [style.left]=\"overview === 'multiline' ? position?.left + 'px' : '0'\"\r\n  [@fadeInOut]=\"isOpen ? 'bottom' : 'void'\"\r\n  (@fadeInOut.done)=\"animationEnd($event)\"\r\n  #selectMenuElement\r\n  dLoading\r\n  [showLoading]=\"showLoading\"\r\n  [backdrop]=\"true\"\r\n>\r\n  <ul\r\n    class=\"devui-list-unstyled scroll-height\"\r\n    [style.maxHeight]=\"maxHeight + 'px'\"\r\n    dLazyLoad\r\n    [enableLazyLoad]=\"enableLazyLoad\"\r\n    (loadMore)=\"loadMoreEvent($event)\"\r\n  >\r\n    <li *ngIf=\"popTipsText && popTipsText.length > 0\" class=\"devui-popup-tips\">\r\n      {{ popTipsText }}\r\n    </li>\r\n    <li\r\n      *ngFor=\"let item of source; let $index = index; trackBy: trackByFn\"\r\n      class=\"devui-dropdown-item\"\r\n      [title]=\"formatter(item)\"\r\n      [ngClass]=\"{\r\n        'devui-dropdown-bg': $index == activeIndex,\r\n        disabled: disabledKey && item[disabledKey]\r\n      }\"\r\n      (click)=\"onSelect($event, item)\"\r\n      (mouseenter)=\"onActiveIndexChange($index)\"\r\n    >\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\r\n        [ngTemplateOutletContext]=\"{\r\n          formatter: formatter,\r\n          term: term,\r\n          source: source,\r\n          item: item,\r\n          $index: $index\r\n        }\"\r\n      >\r\n      </ng-template>\r\n    </li>\r\n    <li class=\"devui-dropdown-item devui-no-result-template\" *ngIf=\"!source?.length && noResultItemTemplate != null\">\r\n      <ng-template [ngTemplateOutlet]=\"noResultItemTemplate\" [ngTemplateOutletContext]=\"{ term: term, source: source }\"> </ng-template>\r\n    </li>\r\n  </ul>\r\n</div>\r\n\r\n<ng-template #defaultItemTemplate let-item=\"item\" let-term=\"term\">\r\n  <d-highlight [value]=\"formatter(item)\" [term]=\"term\"></d-highlight>\r\n</ng-template>\r\n",
                    animations: [fadeInOut],
                    styles: ["@charset \"UTF-8\";.devui-dropdown-menu{width:100%;display:block}.devui-dropdown-item{cursor:pointer;display:block;width:100%;padding:8px 1rem;clear:both;border:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devui-no-result-template{cursor:not-allowed}.devui-no-result-template:hover{background:0 0!important}.devui-dropdown-item.disabled,.devui-dropdown-item.disabled:hover{cursor:not-allowed;opacity:.3;color:#252b3a;background:#fff}ul.devui-list-unstyled{margin:0;overflow-y:auto}:host(.devui-dropdown-menu){width:100%;margin:0;padding:5px 0}.devui-dropdown-bg{background:#f2f5fc}.devui-popup-tips{color:#adb0b8;padding:3px 1rem}"]
                }] }
    ];
    /** @nocollapse */
    AutoCompletePopupComponent.ctorParameters = function () { return []; };
    AutoCompletePopupComponent.propDecorators = {
        cssClass: [{ type: Input }],
        maxHeight: [{ type: Input }],
        disabled: [{ type: Input }],
        disabledKey: [{ type: Input }],
        source: [{ type: Input }],
        position: [{ type: Input }],
        isOpen: [{ type: Input }],
        term: [{ type: Input }],
        popTipsText: [{ type: Input }],
        overview: [{ type: Input }],
        itemTemplate: [{ type: Input }],
        noResultItemTemplate: [{ type: Input }],
        formatter: [{ type: Input }],
        dropdown: [{ type: Input }],
        selectWidth: [{ type: Input }],
        enableLazyLoad: [{ type: Input }],
        selectMenuElement: [{ type: ViewChild, args: ['selectMenuElement', { static: true },] }]
    };
    return AutoCompletePopupComponent;
}());
if (false) {
    /** @type {?} */
    AutoCompletePopupComponent.prototype.activeIndex;
    /** @type {?} */
    AutoCompletePopupComponent.prototype.cssClass;
    /** @type {?} */
    AutoCompletePopupComponent.prototype.maxHeight;
    /** @type {?} */
    AutoCompletePopupComponent.prototype.disabled;
    /** @type {?} */
    AutoCompletePopupComponent.prototype.disabledKey;
    /** @type {?} */
    AutoCompletePopupComponent.prototype.source;
    /** @type {?} */
    AutoCompletePopupComponent.prototype.position;
    /** @type {?} */
    AutoCompletePopupComponent.prototype.isOpen;
    /** @type {?} */
    AutoCompletePopupComponent.prototype.term;
    /** @type {?} */
    AutoCompletePopupComponent.prototype.popTipsText;
    /** @type {?} */
    AutoCompletePopupComponent.prototype.overview;
    /** @type {?} */
    AutoCompletePopupComponent.prototype.itemTemplate;
    /** @type {?} */
    AutoCompletePopupComponent.prototype.noResultItemTemplate;
    /** @type {?} */
    AutoCompletePopupComponent.prototype.formatter;
    /** @type {?} */
    AutoCompletePopupComponent.prototype.dropdown;
    /** @type {?} */
    AutoCompletePopupComponent.prototype.selectWidth;
    /** @type {?} */
    AutoCompletePopupComponent.prototype.enableLazyLoad;
    /** @type {?} */
    AutoCompletePopupComponent.prototype.selectMenuElement;
    /** @type {?} */
    AutoCompletePopupComponent.prototype.showLoading;
    /**
     * @type {?}
     * @private
     */
    AutoCompletePopupComponent.prototype.value;
    /** @type {?} */
    AutoCompletePopupComponent.prototype.labelMinHeight;
    /**
     * @type {?}
     * @private
     */
    AutoCompletePopupComponent.prototype.onChange;
    /**
     * @type {?}
     * @private
     */
    AutoCompletePopupComponent.prototype.onTouched;
}

/**
 * @fileoverview added by tsickle
 * Generated from: auto-complete.directive.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var AutoCompleteDirective = /** @class */ (function () {
    function AutoCompleteDirective(elementRef, viewContainerRef, componentFactoryResolver, renderer, injector, positionService, changeDetectorRef) {
        this.elementRef = elementRef;
        this.viewContainerRef = viewContainerRef;
        this.componentFactoryResolver = componentFactoryResolver;
        this.renderer = renderer;
        this.injector = injector;
        this.positionService = positionService;
        this.changeDetectorRef = changeDetectorRef;
        this.autocomplete = 'off';
        this.autocapitalize = 'off';
        this.autocorrect = 'off';
        this.sceneType = ''; // sceneType使用场景：select(下拉框) suggest(联想)
        // sceneType使用场景：select(下拉框) suggest(联想)
        this.tipsText = ''; // 提示文字
        this.maxHeight = 300;
        /**
         *  【可选】启用数据懒加载，默认不启用
         */
        this.enableLazyLoad = false;
        this.loadMore = new EventEmitter();
        this.selectValue = new EventEmitter();
        this.transInputFocusEmit = new EventEmitter(); // input状态传给父组件函数
        // input状态传给父组件函数
        this.KEYBOARD_EVENT_NOT_REFRESH = ['escape', 'enter', 'arrowup', 'arrowdown',
            /*ie 10 edge */ 'esc', 'up', 'down'];
        this.popTipsText = '';
        this.focus = false;
        this.placement = 'bottom-left';
        this.onChange = (/**
         * @param {?} _
         * @return {?}
         */
        function (_) { return null; });
        this.onTouched = (/**
         * @return {?}
         */
        function () { return null; });
        this.delay = 300;
        this.valueChanges = this.registerInputEvent(elementRef);
        this.minLength = 1;
        this.itemTemplate = null;
        this.noResultItemTemplate = null;
        this.formatter = (/**
         * @param {?} item
         * @return {?}
         */
        function (item) { return item ? (item.label || item.toString()) : ''; });
        this.valueParser = (/**
         * @param {?} item
         * @return {?}
         */
        function (item) { return item; });
    }
    /**
     * @return {?}
     */
    AutoCompleteDirective.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        var _this = this;
        // 调用时机：input keyup
        this.subscription = this.valueChanges
            .subscribe((/**
         * @param {?} source
         * @return {?}
         */
        function (source) { return _this.onSourceChange(source); }));
        // 动态的创建了popup组件，
        /** @type {?} */
        var factory = this.componentFactoryResolver.resolveComponentFactory(AutoCompletePopupComponent);
        this.popupRef = this.viewContainerRef.createComponent(factory, this.viewContainerRef.length, this.injector);
        this.fillPopup(this.source);
        if (!this.searchFn) {
            this.searchFn = (/**
             * @param {?} term
             * @return {?}
             */
            function (term) {
                return of(_this.source.filter((/**
                 * @param {?} lang
                 * @return {?}
                 */
                function (lang) { return _this.formatter(lang).toLowerCase().indexOf(term.toLowerCase()) !== -1; })));
            });
        }
        // 调用时机：选中回车或者鼠标单击下拉选项
        this.popupRef.instance.registerOnChange((/**
         * @param {?} item
         * @return {?}
         */
        function (item) {
            if (item.type === 'loadMore') {
                _this.loadMore.emit(item.value);
                return;
            }
            /** @type {?} */
            var value = _this.valueParser(item.value);
            _this.writeValue(value);
            _this.onChange(value);
            _this.hidePopup();
            _this.selectValue.emit(item.value);
            if (_this.overview && _this.overview !== 'single') {
                setTimeout((/**
                 * @return {?}
                 */
                function () {
                    _this.restLatestSource();
                }), 0);
            }
        }));
    };
    /**
     * @param {?} changes
     * @return {?}
     */
    AutoCompleteDirective.prototype.ngOnChanges = /**
     * @param {?} changes
     * @return {?}
     */
    function (changes) {
        if (changes && this.popupRef && changes.source) {
            this.fillPopup(this.source);
        }
    };
    /**
     * @return {?}
     */
    AutoCompleteDirective.prototype.restLatestSource = /**
     * @return {?}
     */
    function () {
        if (this.latestSource && this.latestSource.length > 0) {
            this.writeValue('');
            this.clearInputValue();
            this.showLatestSource();
        }
    };
    // 调用时机：input keyup
    // 调用时机：input keyup
    /**
     * @param {?} source
     * @return {?}
     */
    AutoCompleteDirective.prototype.onSourceChange = 
    // 调用时机：input keyup
    /**
     * @param {?} source
     * @return {?}
     */
    function (source) {
        if (!this.elementRef.nativeElement.value) {
            if (this.sceneType !== 'select') { // 下拉场景不展示最近输入
                this.showLatestSource();
            }
            else {
                this.showSource(source, true, true);
            }
        }
        else {
            this.showSource(source, true, true);
        }
    };
    /**
     * @private
     * @return {?}
     */
    AutoCompleteDirective.prototype.showLatestSource = /**
     * @private
     * @return {?}
     */
    function () {
        var _this = this;
        /** @type {?} */
        var tempSource = [];
        if (this.latestSource && this.latestSource.length > 0) {
            this.searchFn('').subscribe((/**
             * @param {?} source
             * @return {?}
             */
            function (source) {
                /** @type {?} */
                var t = _this.latestSource.slice(-5);
                tempSource = t.filter((/**
                 * @param {?} data
                 * @return {?}
                 */
                function (data) {
                    if (!data.label) {
                        return source.find((/**
                         * @param {?} item
                         * @return {?}
                         */
                        function (item) { return item === data; }));
                    }
                    else {
                        return source.find((/**
                         * @param {?} item
                         * @return {?}
                         */
                        function (item) { return item.label === data.label; }));
                    }
                }));
                /** @type {?} */
                var pop = _this.popupRef.instance;
                pop.reset();
                _this.popTipsText = '最近输入';
                _this.fillPopup(tempSource);
                pop.isOpen = true;
                _this.changeDetectorRef.markForCheck();
            }));
        }
        if (tempSource.length <= 0) {
            this.hidePopup();
        }
    };
    /**
     * @private
     * @param {?} source
     * @param {?} setOpen
     * @param {?} isReset
     * @return {?}
     */
    AutoCompleteDirective.prototype.showSource = /**
     * @private
     * @param {?} source
     * @param {?} setOpen
     * @param {?} isReset
     * @return {?}
     */
    function (source, setOpen, isReset) {
        if ((source && source.length) || this.noResultItemTemplate) {
            /** @type {?} */
            var pop = this.popupRef.instance;
            if (isReset) {
                pop.reset();
            }
            this.popTipsText = this.tipsText || '';
            this.fillPopup(source, this.value);
            if (setOpen) {
                pop.isOpen = true;
            }
            this.changeDetectorRef.markForCheck();
        }
        else {
            this.hidePopup();
        }
    };
    /**
     * @param {?} obj
     * @return {?}
     */
    AutoCompleteDirective.prototype.writeValue = /**
     * @param {?} obj
     * @return {?}
     */
    function (obj) {
        this.value = this.formatter(obj) || '';
        this.writeInputValue(this.value);
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    AutoCompleteDirective.prototype.registerOnChange = /**
     * @param {?} fn
     * @return {?}
     */
    function (fn) {
        this.onChange = fn;
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    AutoCompleteDirective.prototype.registerOnTouched = /**
     * @param {?} fn
     * @return {?}
     */
    function (fn) {
        this.onTouched = fn;
    };
    /**
     * @param {?} isDisabled
     * @return {?}
     */
    AutoCompleteDirective.prototype.setDisabledState = /**
     * @param {?} isDisabled
     * @return {?}
     */
    function (isDisabled) {
        this.disabled = isDisabled;
        this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', isDisabled);
        if (this.popupRef) {
            this.popupRef.instance.setDisabledState(isDisabled);
        }
    };
    /**
     * @return {?}
     */
    AutoCompleteDirective.prototype.ngOnDestroy = /**
     * @return {?}
     */
    function () {
        this.unSubscription();
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    AutoCompleteDirective.prototype.onFocus = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        var _this = this;
        this.focus = true;
        this.transInputFocusEmit.emit({
            focus: true,
            popupRef: this.popupRef
        });
        /** @type {?} */
        var isOpen = this.sceneType !== 'select';
        if (this.sceneType === 'select') {
            this.searchFn('').subscribe((/**
             * @param {?} source
             * @return {?}
             */
            function (source) {
                _this.showSource(source, isOpen, false);
            }));
        }
        else {
            if (!this.elementRef.nativeElement.value) {
                this.showLatestSource();
            }
            else {
                this.searchFn(this.elementRef.nativeElement.value).subscribe((/**
                 * @param {?} source
                 * @return {?}
                 */
                function (source) {
                    _this.showSource(source, true, false);
                }));
            }
        }
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    AutoCompleteDirective.prototype.onBlur = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        this.focus = false;
        this.onTouched();
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    AutoCompleteDirective.prototype.onEscKeyup = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        this.hidePopup();
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    AutoCompleteDirective.prototype.onEnterKeyDown = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        if (!this.popupRef.instance.source || !this.popupRef.instance.isOpen) {
            return;
        }
        if (this.popupRef) {
            this.popupRef.instance.selectCurrentItem($event);
        }
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    AutoCompleteDirective.prototype.onArrowUpKeyDown = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        if (this.popupRef) {
            $event.preventDefault();
            $event.stopPropagation();
            this.popupRef.instance.prev();
        }
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    AutoCompleteDirective.prototype.onArrowDownKeyDown = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        if (this.popupRef) {
            $event.preventDefault();
            $event.stopPropagation();
            this.popupRef.instance.next();
        }
    };
    /**
     * @param {?} $event
     * @return {?}
     */
    AutoCompleteDirective.prototype.onDocumentClick = /**
     * @param {?} $event
     * @return {?}
     */
    function ($event) {
        if (this.focus) {
            this.transInputFocusEmit.emit({
                focus: this.focus,
                popupRef: this.popupRef
            });
        }
        if (this.popupRef && !this.popupRef.instance.isOpen) {
            return;
        }
        /** @type {?} */
        var hostElement = this.elementRef.nativeElement;
        if (!hostElement.contains($event.target)) {
            this.hidePopup();
            this.transInputFocusEmit.emit({
                focus: false,
                popupRef: this.popupRef
            });
        }
    };
    /**
     * @private
     * @return {?}
     */
    AutoCompleteDirective.prototype.hidePopup = /**
     * @private
     * @return {?}
     */
    function () {
        if (this.popupRef) {
            this.popupRef.instance.isOpen = false;
        }
    };
    /**
     * @private
     * @param {?=} source
     * @param {?=} term
     * @return {?}
     */
    AutoCompleteDirective.prototype.fillPopup = /**
     * @private
     * @param {?=} source
     * @param {?=} term
     * @return {?}
     */
    function (source, term) {
        var _this = this;
        this.position = this.positionService.position(this.elementRef.nativeElement);
        /** @type {?} */
        var pop = this.popupRef.instance;
        pop.source = source;
        pop.maxHeight = this.maxHeight;
        pop.term = term;
        pop.disabledKey = this.disabledKey;
        pop.enableLazyLoad = this.enableLazyLoad;
        ['formatter', 'itemTemplate', 'noResultItemTemplate', 'cssClass', 'dropdown', 'popTipsText', 'position', 'overview']
            .forEach((/**
         * @param {?} key
         * @return {?}
         */
        function (key) {
            if (_this[key] !== undefined) {
                pop[key] = _this[key];
            }
        }));
    };
    /**
     * @private
     * @param {?} value
     * @return {?}
     */
    AutoCompleteDirective.prototype.writeInputValue = /**
     * @private
     * @param {?} value
     * @return {?}
     */
    function (value) {
        this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
    };
    /**
     * @private
     * @return {?}
     */
    AutoCompleteDirective.prototype.clearInputValue = /**
     * @private
     * @return {?}
     */
    function () {
        this.renderer.setProperty(this.elementRef.nativeElement, 'value', '');
    };
    /**
     * @private
     * @return {?}
     */
    AutoCompleteDirective.prototype.unSubscription = /**
     * @private
     * @return {?}
     */
    function () {
        if (this.subscription) {
            this.subscription.unsubscribe();
            this.subscription = null;
        }
    };
    /**
     * @param {?} term
     * @return {?}
     */
    AutoCompleteDirective.prototype.onTermChange = /**
     * @param {?} term
     * @return {?}
     */
    function (term) {
        this.value = term;
        if (this.popupRef) {
            this.popupRef.instance.term = term;
        }
        this.onChange(term);
    };
    /**
     * @private
     * @param {?} elementRef
     * @return {?}
     */
    AutoCompleteDirective.prototype.registerInputEvent = /**
     * @private
     * @param {?} elementRef
     * @return {?}
     */
    function (elementRef) {
        var _this = this;
        return fromEvent(elementRef.nativeElement, 'keyup')
            .pipe(filter((/**
         * @param {?} e
         * @return {?}
         */
        function (e) {
            return _this.KEYBOARD_EVENT_NOT_REFRESH.indexOf(e.key.toLocaleLowerCase()) === -1;
        })), map((/**
         * @param {?} e
         * @return {?}
         */
        function (e) { return e.target.value; })), tap((/**
         * @param {?} term
         * @return {?}
         */
        function (term) { return _this.onTouched(); })), filter((/**
         * @param {?} term
         * @return {?}
         */
        function (term) { return !_this.disabled && _this.searchFn && term.length >= 0; })), debounceTime(this.delay), tap((/**
         * @param {?} term
         * @return {?}
         */
        function (term) { return _this.onTermChange(term); })), switchMap((/**
         * @param {?} term
         * @return {?}
         */
        function (term) { return _this.searchFn(term, _this); })));
    };
    AutoCompleteDirective.decorators = [
        { type: Directive, args: [{
                    selector: '[dAutoComplete]',
                    exportAs: 'autoComplete',
                    providers: [{
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef((/**
                             * @return {?}
                             */
                            function () { return AutoCompleteDirective; })),
                            multi: true
                        }]
                },] }
    ];
    /** @nocollapse */
    AutoCompleteDirective.ctorParameters = function () { return [
        { type: ElementRef },
        { type: ViewContainerRef },
        { type: ComponentFactoryResolver },
        { type: Renderer2 },
        { type: Injector },
        { type: PositionService },
        { type: ChangeDetectorRef }
    ]; };
    AutoCompleteDirective.propDecorators = {
        autocomplete: [{ type: HostBinding, args: ['attr.autocomplete',] }],
        autocapitalize: [{ type: HostBinding, args: ['attr.autocapitalize',] }],
        autocorrect: [{ type: HostBinding, args: ['attr.autocorrect',] }],
        disabled: [{ type: Input }],
        cssClass: [{ type: Input }],
        delay: [{ type: Input }],
        minLength: [{ type: Input }],
        itemTemplate: [{ type: Input }],
        noResultItemTemplate: [{ type: Input }],
        formatter: [{ type: Input }],
        sceneType: [{ type: Input }],
        tipsText: [{ type: Input }],
        overview: [{ type: Input }],
        latestSource: [{ type: Input }],
        source: [{ type: Input }],
        valueParser: [{ type: Input }],
        searchFn: [{ type: Input }],
        dropdown: [{ type: Input }],
        maxHeight: [{ type: Input }],
        disabledKey: [{ type: Input }],
        enableLazyLoad: [{ type: Input }],
        loadMore: [{ type: Output }],
        selectValue: [{ type: Output }],
        transInputFocusEmit: [{ type: Output }],
        onFocus: [{ type: HostListener, args: ['focus', ['$event'],] }],
        onBlur: [{ type: HostListener, args: ['blur', ['$event'],] }],
        onEscKeyup: [{ type: HostListener, args: ['keydown.esc', ['$event'],] }],
        onEnterKeyDown: [{ type: HostListener, args: ['keydown.Enter', ['$event'],] }],
        onArrowUpKeyDown: [{ type: HostListener, args: ['keydown.ArrowUp', ['$event'],] }],
        onArrowDownKeyDown: [{ type: HostListener, args: ['keydown.ArrowDown', ['$event'],] }],
        onDocumentClick: [{ type: HostListener, args: ['document:click', ['$event'],] }]
    };
    return AutoCompleteDirective;
}());
if (false) {
    /** @type {?} */
    AutoCompleteDirective.prototype.autocomplete;
    /** @type {?} */
    AutoCompleteDirective.prototype.autocapitalize;
    /** @type {?} */
    AutoCompleteDirective.prototype.autocorrect;
    /** @type {?} */
    AutoCompleteDirective.prototype.disabled;
    /** @type {?} */
    AutoCompleteDirective.prototype.cssClass;
    /** @type {?} */
    AutoCompleteDirective.prototype.delay;
    /** @type {?} */
    AutoCompleteDirective.prototype.minLength;
    /** @type {?} */
    AutoCompleteDirective.prototype.itemTemplate;
    /** @type {?} */
    AutoCompleteDirective.prototype.noResultItemTemplate;
    /** @type {?} */
    AutoCompleteDirective.prototype.formatter;
    /** @type {?} */
    AutoCompleteDirective.prototype.sceneType;
    /** @type {?} */
    AutoCompleteDirective.prototype.tipsText;
    /** @type {?} */
    AutoCompleteDirective.prototype.overview;
    /** @type {?} */
    AutoCompleteDirective.prototype.latestSource;
    /** @type {?} */
    AutoCompleteDirective.prototype.source;
    /** @type {?} */
    AutoCompleteDirective.prototype.valueParser;
    /** @type {?} */
    AutoCompleteDirective.prototype.searchFn;
    /** @type {?} */
    AutoCompleteDirective.prototype.dropdown;
    /** @type {?} */
    AutoCompleteDirective.prototype.maxHeight;
    /** @type {?} */
    AutoCompleteDirective.prototype.disabledKey;
    /**
     *  【可选】启用数据懒加载，默认不启用
     * @type {?}
     */
    AutoCompleteDirective.prototype.enableLazyLoad;
    /** @type {?} */
    AutoCompleteDirective.prototype.loadMore;
    /** @type {?} */
    AutoCompleteDirective.prototype.selectValue;
    /** @type {?} */
    AutoCompleteDirective.prototype.transInputFocusEmit;
    /** @type {?} */
    AutoCompleteDirective.prototype.KEYBOARD_EVENT_NOT_REFRESH;
    /** @type {?} */
    AutoCompleteDirective.prototype.popupRef;
    /** @type {?} */
    AutoCompleteDirective.prototype.popTipsText;
    /** @type {?} */
    AutoCompleteDirective.prototype.position;
    /** @type {?} */
    AutoCompleteDirective.prototype.focus;
    /**
     * @type {?}
     * @private
     */
    AutoCompleteDirective.prototype.valueChanges;
    /**
     * @type {?}
     * @private
     */
    AutoCompleteDirective.prototype.value;
    /**
     * @type {?}
     * @private
     */
    AutoCompleteDirective.prototype.placement;
    /**
     * @type {?}
     * @private
     */
    AutoCompleteDirective.prototype.subscription;
    /**
     * @type {?}
     * @private
     */
    AutoCompleteDirective.prototype.onChange;
    /**
     * @type {?}
     * @private
     */
    AutoCompleteDirective.prototype.onTouched;
    /**
     * @type {?}
     * @private
     */
    AutoCompleteDirective.prototype.elementRef;
    /**
     * @type {?}
     * @private
     */
    AutoCompleteDirective.prototype.viewContainerRef;
    /**
     * @type {?}
     * @private
     */
    AutoCompleteDirective.prototype.componentFactoryResolver;
    /**
     * @type {?}
     * @private
     */
    AutoCompleteDirective.prototype.renderer;
    /**
     * @type {?}
     * @private
     */
    AutoCompleteDirective.prototype.injector;
    /**
     * @type {?}
     * @private
     */
    AutoCompleteDirective.prototype.positionService;
    /**
     * @type {?}
     * @private
     */
    AutoCompleteDirective.prototype.changeDetectorRef;
}

/**
 * @fileoverview added by tsickle
 * Generated from: auto-complete.module.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var AutoCompleteModule = /** @class */ (function () {
    function AutoCompleteModule() {
    }
    AutoCompleteModule.decorators = [
        { type: NgModule, args: [{
                    imports: [CommonModule, FormsModule, LazyLoadModule, LoadingModule],
                    exports: [AutoCompleteDirective, AutoCompletePopupComponent, HighlightComponent],
                    declarations: [AutoCompleteDirective, AutoCompletePopupComponent, HighlightComponent],
                    providers: [DocumentRef, WindowRef, PositionService],
                    entryComponents: [AutoCompletePopupComponent]
                },] }
    ];
    return AutoCompleteModule;
}());

/**
 * @fileoverview added by tsickle
 * Generated from: public-api.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * Generated from: ng-devui-auto-complete.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

export { AutoCompleteDirective, AutoCompleteModule, AutoCompletePopupComponent, HighlightComponent };
//# sourceMappingURL=ng-devui-auto-complete.js.map