@duoduo-oba/ng-devui/bundles/ng-devui-select.umd.js

DevUI components based on Angular

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('rxjs'), require('rxjs/operators'), require('ng-devui/window-ref'), require('ng-devui/i18n'), require('@angular/cdk/overlay'), require('ng-devui/utils'), require('@angular/cdk/scrolling'), require('@angular/common'), require('ng-devui/checkbox'), require('ng-devui/loading')) :
    typeof define === 'function' && define.amd ? define('ng-devui/select', ['exports', '@angular/core', '@angular/forms', 'rxjs', 'rxjs/operators', 'ng-devui/window-ref', 'ng-devui/i18n', '@angular/cdk/overlay', 'ng-devui/utils', '@angular/cdk/scrolling', '@angular/common', 'ng-devui/checkbox', 'ng-devui/loading'], factory) :
    (global = global || self, factory((global['ng-devui'] = global['ng-devui'] || {}, global['ng-devui'].select = {}), global.ng.core, global.ng.forms, global.rxjs, global.rxjs.operators, global['ng-devui']['window-ref'], global['ng-devui'].i18n, global.ng.cdk.overlay, global['ng-devui'].utils, global.ng.cdk.scrolling, global.ng.common, global['ng-devui'].checkbox, global['ng-devui'].loading));
}(this, (function (exports, core, forms, rxjs, operators, windowRef, i18n, overlay, utils, scrolling, common, checkbox, loading) { 'use strict';

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */
    /* global Reflect, Promise */

    var extendStatics = function(d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };

    function __extends(d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    }

    var __assign = function() {
        __assign = Object.assign || function __assign(t) {
            for (var s, i = 1, n = arguments.length; i < n; i++) {
                s = arguments[i];
                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
            }
            return t;
        };
        return __assign.apply(this, arguments);
    };

    function __rest(s, e) {
        var t = {};
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
            t[p] = s[p];
        if (s != null && typeof Object.getOwnPropertySymbols === "function")
            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                    t[p[i]] = s[p[i]];
            }
        return t;
    }

    function __decorate(decorators, target, key, desc) {
        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
        return c > 3 && r && Object.defineProperty(target, key, r), r;
    }

    function __param(paramIndex, decorator) {
        return function (target, key) { decorator(target, key, paramIndex); }
    }

    function __metadata(metadataKey, metadataValue) {
        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
    }

    function __awaiter(thisArg, _arguments, P, generator) {
        return new (P || (P = Promise))(function (resolve, reject) {
            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
            function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
            step((generator = generator.apply(thisArg, _arguments || [])).next());
        });
    }

    function __generator(thisArg, body) {
        var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
        function verb(n) { return function (v) { return step([n, v]); }; }
        function step(op) {
            if (f) throw new TypeError("Generator is already executing.");
            while (_) try {
                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
                if (y = 0, t) op = [op[0] & 2, t.value];
                switch (op[0]) {
                    case 0: case 1: t = op; break;
                    case 4: _.label++; return { value: op[1], done: false };
                    case 5: _.label++; y = op[1]; op = [0]; continue;
                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
                    default:
                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                        if (t[2]) _.ops.pop();
                        _.trys.pop(); continue;
                }
                op = body.call(thisArg, _);
            } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
            if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
        }
    }

    function __exportStar(m, exports) {
        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
    }

    function __values(o) {
        var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
        if (m) return m.call(o);
        return {
            next: function () {
                if (o && i >= o.length) o = void 0;
                return { value: o && o[i++], done: !o };
            }
        };
    }

    function __read(o, n) {
        var m = typeof Symbol === "function" && o[Symbol.iterator];
        if (!m) return o;
        var i = m.call(o), r, ar = [], e;
        try {
            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
        }
        catch (error) { e = { error: error }; }
        finally {
            try {
                if (r && !r.done && (m = i["return"])) m.call(i);
            }
            finally { if (e) throw e.error; }
        }
        return ar;
    }

    function __spread() {
        for (var ar = [], i = 0; i < arguments.length; i++)
            ar = ar.concat(__read(arguments[i]));
        return ar;
    }

    function __spreadArrays() {
        for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
        for (var r = Array(s), k = 0, i = 0; i < il; i++)
            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
                r[k] = a[j];
        return r;
    };

    function __await(v) {
        return this instanceof __await ? (this.v = v, this) : new __await(v);
    }

    function __asyncGenerator(thisArg, _arguments, generator) {
        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
        var g = generator.apply(thisArg, _arguments || []), i, q = [];
        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
        function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
        function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
        function fulfill(value) { resume("next", value); }
        function reject(value) { resume("throw", value); }
        function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
    }

    function __asyncDelegator(o) {
        var i, p;
        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
    }

    function __asyncValues(o) {
        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
        var m = o[Symbol.asyncIterator], i;
        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
    }

    function __makeTemplateObject(cooked, raw) {
        if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
        return cooked;
    };

    function __importStar(mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
        result.default = mod;
        return result;
    }

    function __importDefault(mod) {
        return (mod && mod.__esModule) ? mod : { default: mod };
    }

    /**
     * @fileoverview added by tsickle
     * Generated from: select.component.ts
     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var SelectComponent = /** @class */ (function () {
        function SelectComponent(renderer, windowRef, changeDetectorRef, i18n, ngZone) {
            var _this = this;
            this.renderer = renderer;
            this.windowRef = windowRef;
            this.changeDetectorRef = changeDetectorRef;
            this.i18n = i18n;
            this.ngZone = ngZone;
            /**
             * 【必选】下拉选项资源，支持Array<string>, Array<{key: value}>
             */
            this.options = [];
            /**
             * 【可选】是否支持过滤搜索
             */
            this.isSearch = false;
            /**
             * 【可选】是否支持聚焦自动展开下拉
             */
            this.toggleOnFocus = false;
            /**
             * 【可选】下拉菜单高度，建议使用px作为高度单位
             */
            this.scrollHight = '300px';
            /**
             * 【可选】下拉高亮css
             */
            this.hightLightItemClass = 'active';
            /**
             * 【可选】是否支持全选
             */
            this.isSelectAll = false;
            /**
             * 【可选】是否可以输入
             */
            this.readonly = true;
            /**
             * 【可选】是否appendToBody
             */
            this.appendToBody = false;
            // 模板itemSize，appendToBody为true
            /**
             * 【可选】是否禁用下拉框
             */
            this.disabled = false;
            /**
             * 【可选】下拉默认显示文字
             */
            this.placeholder = '';
            this.direction = 'down';
            this.overview = 'border';
            /**
             *  【可选】是否开启clear功能（是否开启只对单选生效）
             */
            this.allowClear = false;
            /**
             *  【可选】启用数据懒加载，默认不启用
             */
            this.enableLazyLoad = false;
            /**
             * 输出函数，当选中某个选项项后，将会调用此函数，参数为当前选择项的值。如果需要获取所有选择状态的值，请参考(ngModelChange)方法
             */
            this.valueChange = new core.EventEmitter();
            /**
             * select下拉toggle事件，值为true或false
             */
            this.toggleChange = new core.EventEmitter();
            this.loadMore = new core.EventEmitter();
            /**
             * 【当传入资源（options）类型为Array<{key: value}，必选】针对传入资源options的每项对应字段做禁用操作的key
             */
            this.optionDisabledKey = '';
            /**
             * 【当传入资源（options）类型为Array<{key: value}，必选】针对传入资源options的每项对应字段禁止变更的key
             */
            this.optionImmutableKey = '';
            /**
             * 【可选】配置多选的时候是否维持原数组排序还是用户选择的顺序排序，默认是用户顺序
             */
            this.keepMultipleOrder = 'user-select';
            /**
             * customViewTemplate的方向，支持下方和右方
             */
            this.customViewDirection = 'bottom';
            this.autoFocus = false;
            this.notAutoScroll = false; // 自动聚焦的时候，自动滚动到select位置
            this.showLoading = false;
            this._isOpen = false;
            this.menuPosition = 'bottom';
            this.halfChecked = false;
            this.allChecked = false;
            this.isMouseEvent = false;
            this.filter = '';
            this.activeIndex = -1;
            // for multiple
            this.availableOptions = [];
            this.multiItems = [];
            this.selectIndex = -1;
            this.virtualScrollItemSize = {
                // sm对应是30px，默认36px高，lg对应是44px
                sm: 30,
                normal: 36,
                lg: 44
            };
            this.resetting = false;
            this.onChange = (/**
             * @param {?} _
             * @return {?}
             */
            function (_) { return null; });
            this.onTouch = (/**
             * @return {?}
             */
            function () { return null; });
            this.choose = (/**
             * @param {?} option
             * @param {?} index
             * @param {?=} $event
             * @return {?}
             */
            function (option, index, $event) {
                if ($event) {
                    $event.preventDefault();
                    $event.stopPropagation();
                }
                if (typeof option === 'object') {
                    if (Object.keys(option).length === 0 || _this.disabled) {
                        _this.isOpen = false;
                        return;
                    }
                }
                else {
                    if (_this.disabled) {
                        _this.isOpen = false;
                        return;
                    }
                }
                if (_this.optionDisabledKey && option[_this.optionDisabledKey]) {
                    return;
                }
                if (_this.optionImmutableKey && option[_this.optionImmutableKey]) {
                    return;
                }
                if (_this.multiple) {
                    /** @type {?} */
                    var indexOfOption = _this.multiItems.findIndex((/**
                     * @param {?} item
                     * @return {?}
                     */
                    function (item) { return JSON.stringify(item.option) === JSON.stringify(option); }));
                    if (indexOfOption === -1) {
                        _this.multiItems.push({ id: index, option: option });
                    }
                    else {
                        _this.multiItems.splice(indexOfOption, 1);
                    }
                    if (_this.keepMultipleOrder === 'origin') {
                        _this.multiItems.sort((/**
                         * @param {?} a
                         * @param {?} b
                         * @return {?}
                         */
                        function (a, b) { return a.id - b.id; }));
                    }
                    _this.value = _this.multiItems.map((/**
                     * @param {?} item
                     * @return {?}
                     */
                    function (item) { return item.option; }));
                }
                else {
                    _this.value = option;
                    _this.activeIndex = index;
                    _this.selectIndex = index;
                    _this.toggle();
                }
                _this.writeIntoInput(_this.value);
                _this.onChange(_this.value);
                _this.valueChange.emit(option);
                _this.setChecked(_this.value);
            });
            this.onDocumentClick = (/**
             * @param {?} $event
             * @return {?}
             */
            function ($event) {
                if (_this.isOpen && !_this.selectBoxElement.nativeElement.contains($event.target)) {
                    _this.isOpen = false;
                    _this.selectIndex = _this.activeIndex ? _this.activeIndex : -1;
                    _this.changeDetectorRef.detectChanges();
                }
            });
            this.valueParser = (/**
             * @param {?} item
             * @return {?}
             */
            function (item) { return (typeof item === 'object' ? item[_this.filterKey] || '' : (item + '') ? item.toString() : ''); });
            this.formatter = (/**
             * @param {?} item
             * @return {?}
             */
            function (item) { return (typeof item === 'object' ? item[_this.filterKey] || '' : (item + '') ? item.toString() : ''); });
        }
        Object.defineProperty(SelectComponent.prototype, "isOpen", {
            get: /**
             * @return {?}
             */
            function () {
                return this._isOpen;
            },
            set: /**
             * @param {?} value
             * @return {?}
             */
            function (value) {
                this._isOpen = value;
                this.toggleChange.emit(value);
                this.setDocumentClickListener();
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(SelectComponent.prototype, "isClearIconShow", {
            get: /**
             * @return {?}
             */
            function () {
                return this.allowClear && !this.multiple && !this.disabled && this.value;
            },
            enumerable: true,
            configurable: true
        });
        /**
         * @return {?}
         */
        SelectComponent.prototype.ngOnInit = /**
         * @return {?}
         */
        function () {
            var _this = this;
            if (!this.searchFn) {
                this.searchFn = (/**
                 * @param {?} term
                 * @return {?}
                 */
                function (term) {
                    return rxjs.of((_this.options ? _this.options : [])
                        .map((/**
                     * @param {?} option
                     * @param {?} index
                     * @return {?}
                     */
                    function (option, index) { return ({ option: option, id: index }); }))
                        .filter((/**
                     * @param {?} item
                     * @return {?}
                     */
                    function (item) {
                        return _this.formatter(item.option)
                            .toLowerCase()
                            .indexOf(term.toLowerCase()) !== -1;
                    })));
                });
            }
            // 只有多选的情况isSelectAll为true才有意义
            if (!this.multiple) {
                this.isSelectAll = false;
            }
            this.setI18nText();
            this.registerFilterChange();
        };
        /**
         * @return {?}
         */
        SelectComponent.prototype.ngAfterViewInit = /**
         * @return {?}
         */
        function () {
            if (this.autoFocus && this.selectBoxElement) {
                this.selectBoxElement.nativeElement.focus({
                    preventScroll: this.notAutoScroll
                });
            }
            if (this.selectBoxElement) {
                this.width = this.width ? this.width : this.selectBoxElement.nativeElement.offsetWidth;
            }
        };
        /**
         * @return {?}
         */
        SelectComponent.prototype.ngOnDestroy = /**
         * @return {?}
         */
        function () {
            if (this.sourceSubscription) {
                this.sourceSubscription.unsubscribe();
            }
            if (this.filterSubscription) {
                this.filterSubscription.unsubscribe();
            }
            if (this.i18nSubscription) {
                this.i18nSubscription.unsubscribe();
            }
            document.removeEventListener('click', this.onDocumentClick);
        };
        /**
         * @param {?} changes
         * @return {?}
         */
        SelectComponent.prototype.ngOnChanges = /**
         * @param {?} changes
         * @return {?}
         */
        function (changes) {
            if (changes && (changes.searchFn || changes.options)) {
                this.resetSource();
            }
        };
        /**
         * @return {?}
         */
        SelectComponent.prototype.setI18nText = /**
         * @return {?}
         */
        function () {
            var _this = this;
            this.i18nCommonText = this.i18n.getI18nText().common;
            this.i18nSubscription = this.i18n.langChange().subscribe((/**
             * @param {?} data
             * @return {?}
             */
            function (data) {
                _this.i18nCommonText = data.common;
            }));
        };
        /**
         * @param {?} len
         * @param {?} size
         * @return {?}
         */
        SelectComponent.prototype.getVirtualScrollHeight = /**
         * @param {?} len
         * @param {?} size
         * @return {?}
         */
        function (len, size) {
            if (len > 0) {
                /** @type {?} */
                var height = this.templateItemSize ? this.templateItemSize * len : this.virtualScrollItemSize[size ? size : 'normal'] * len;
                if (this.isSelectAll && this.multiple) {
                    height += this.virtualScrollItemSize[size ? size : 'normal'];
                }
                /** @type {?} */
                var scrollHight = parseInt(this.scrollHight, 10);
                if (height > scrollHight) {
                    return this.scrollHight;
                }
                else {
                    return height + 'px';
                }
            }
        };
        /**
         * @param {?} size
         * @return {?}
         */
        SelectComponent.prototype.getVirtualScrollItemSize = /**
         * @param {?} size
         * @return {?}
         */
        function (size) {
            return this.templateItemSize ? this.templateItemSize : this.virtualScrollItemSize[size ? size : 'normal'];
        };
        /**
         * @return {?}
         */
        SelectComponent.prototype.resetSource = /**
         * @return {?}
         */
        function () {
            if (this.sourceSubscription && this.searchFn) {
                this.resetting = true;
                this.sourceSubscription.next('');
            }
        };
        /**
         * @param {?} fn
         * @return {?}
         */
        SelectComponent.prototype.registerOnChange = /**
         * @param {?} fn
         * @return {?}
         */
        function (fn) {
            this.onChange = fn;
        };
        /**
         * @param {?} fn
         * @return {?}
         */
        SelectComponent.prototype.registerOnTouched = /**
         * @param {?} fn
         * @return {?}
         */
        function (fn) {
            this.onTouch = fn;
        };
        /**
         * @return {?}
         */
        SelectComponent.prototype.registerFilterChange = /**
         * @return {?}
         */
        function () {
            var _this = this;
            this.sourceSubscription = new rxjs.BehaviorSubject('');
            this.sourceSubscription.pipe(operators.switchMap((/**
             * @param {?} term
             * @return {?}
             */
            function (term) { return _this.searchFn(term); }))).subscribe((/**
             * @param {?} options
             * @return {?}
             */
            function (options) {
                _this.availableOptions = options;
                _this.setAvailableOptions();
                _this.changeDetectorRef.markForCheck();
                if (_this.appendToBody) {
                    setTimeout((/**
                     * @return {?}
                     */
                    function () {
                        if (_this.connectedOverlay && _this.connectedOverlay.overlayRef) {
                            _this.connectedOverlay.overlayRef.updatePosition();
                        }
                    }));
                }
                // 显示数据变更，需要判断全选半选状态
                if (_this.isSelectAll) {
                    /** @type {?} */
                    var selectedItemForFilterOptions_1 = [];
                    _this.multiItems.forEach((/**
                     * @param {?} item
                     * @return {?}
                     */
                    function (item) {
                        _this.availableOptions.forEach((/**
                         * @param {?} option
                         * @return {?}
                         */
                        function (option) {
                            if (item['id'] === option['id']) {
                                selectedItemForFilterOptions_1.push(item);
                            }
                        }));
                    }));
                    _this.setChecked(selectedItemForFilterOptions_1);
                }
                if (!_this.multiple && (!_this.value || _this.availableOptions && !_this.availableOptions.find((/**
                 * @param {?} option
                 * @return {?}
                 */
                function (option) { return option.option === _this.value; })))) {
                    _this.selectIndex = _this.availableOptions && _this.availableOptions.length > 0 ? 0 : -1;
                }
            }));
            this.sourceSubscription.subscribe((/**
             * @param {?} term
             * @return {?}
             */
            function (term) {
                if (_this.resetting && term === '') {
                    _this.writeValue(_this.value);
                    _this.resetting = false;
                }
            }));
            this.searchInputValueChangeEvent();
        };
        /**
         * @return {?}
         */
        SelectComponent.prototype.searchInputValueChangeEvent = /**
         * @return {?}
         */
        function () {
            var _this = this;
            if (this.isSearch && this.isOpen && this.filterInputElement) {
                this.filterInputElement.nativeElement.focus();
                if (!this.filterSubscription || this.appendToBody) { // 避免重复订阅
                    this.filterSubscription = rxjs.fromEvent(this.filterInputElement.nativeElement, 'input')
                        .pipe(operators.map((/**
                     * @param {?} e
                     * @return {?}
                     */
                    function (e) { return e.target.value; })), operators.tap((/**
                     * @param {?} term
                     * @return {?}
                     */
                    function (term) { return _this.onTouch(); })), operators.filter((/**
                     * @param {?} term
                     * @return {?}
                     */
                    function (term) { return !_this.disabled && _this.searchFn && term.length >= 0; })), operators.debounceTime(300) // hard code need refactory
                    )
                        .subscribe((/**
                     * @param {?} term
                     * @return {?}
                     */
                    function (term) {
                        _this.filter = term;
                        _this.selectIndex = -1;
                        return _this.sourceSubscription.next(term);
                    }));
                }
            }
        };
        /**
         * @param {?} obj
         * @return {?}
         */
        SelectComponent.prototype.writeValue = /**
         * @param {?} obj
         * @return {?}
         */
        function (obj) {
            var _this = this;
            if (obj === null || obj === undefined) {
                return;
            }
            this.value = obj;
            if (this.multiple) {
                this.value = this.value ? this.value : [];
                this.value = Array.isArray(this.value) ? this.value : [this.value];
                this.multiItems = this.value.map((/**
                 * @param {?} option
                 * @param {?} index
                 * @return {?}
                 */
                function (option, index) { return ({ option: option, id: _this.options.indexOf(option) }); }));
            }
            else {
                /** @type {?} */
                var selectedItem = this.availableOptions.find((/**
                 * @param {?} item
                 * @return {?}
                 */
                function (item) { return _this.formatter(item.option) === _this.formatter(_this.value); }));
                this.activeIndex = selectedItem ? selectedItem.id : -1;
                this.selectIndex = this.activeIndex ? this.activeIndex : -1;
            }
            this.writeIntoInput(this.value);
            this.changeDetectorRef.markForCheck();
            this.setChecked(this.value);
        };
        /**
         * @param {?} value
         * @return {?}
         */
        SelectComponent.prototype.writeIntoInput = /**
         * @param {?} value
         * @return {?}
         */
        function (value) {
            var _this = this;
            this._inputValue = this.multiple
                ? (value || []).map((/**
                 * @param {?} option
                 * @return {?}
                 */
                function (option) { return _this.valueParser(option); })).join(', ')
                : this.valueParser(value);
            this.setAvailableOptions();
        };
        /**
         * @return {?}
         */
        SelectComponent.prototype.setAvailableOptions = /**
         * @return {?}
         */
        function () {
            if (!this.value || !Array.isArray(this.availableOptions)) {
                return;
            }
            /** @type {?} */
            var _value = this.value;
            if (!this.multiple) {
                _value = [_value];
            }
            this.availableOptions = this.availableOptions
                .map((/**
             * @param {?} item
             * @return {?}
             */
            function (item) { return ({
                isChecked: _value.findIndex((/**
                 * @param {?} i
                 * @return {?}
                 */
                function (i) { return JSON.stringify(i) === JSON.stringify(item.option); })) > -1, id: item.id, option: item.option
            }); }));
        };
        /**
         * @return {?}
         */
        SelectComponent.prototype.updateCdkConnectedOverlayOrigin = /**
         * @return {?}
         */
        function () {
            if (this.selectBoxElement.nativeElement) {
                this.cdkConnectedOverlayOrigin = new overlay.CdkOverlayOrigin(this.selectBoxElement.nativeElement);
            }
        };
        /**
         * @param {?} $event
         * @return {?}
         */
        SelectComponent.prototype.autoToggle = /**
         * @param {?} $event
         * @return {?}
         */
        function ($event) {
            $event.preventDefault();
            $event.stopPropagation();
            if (this.toggleOnFocus && !this.disabled && !this.isOpen && !this.isMouseEvent) {
                this.toggle();
            }
        };
        // mousedown mouseup解决focus与click冲突问题
        // mousedown mouseup解决focus与click冲突问题
        /**
         * @param {?} event
         * @return {?}
         */
        SelectComponent.prototype.setMouseEventTrue = 
        // mousedown mouseup解决focus与click冲突问题
        /**
         * @param {?} event
         * @return {?}
         */
        function (event) {
            this.isMouseEvent = true;
        };
        /**
         * @param {?} event
         * @return {?}
         */
        SelectComponent.prototype.setMouseEventFalse = /**
         * @param {?} event
         * @return {?}
         */
        function (event) {
            this.isMouseEvent = false;
        };
        /**
         * @return {?}
         */
        SelectComponent.prototype.toggle = /**
         * @return {?}
         */
        function () {
            if (this.disabled) {
                this.isOpen = false;
                return;
            }
            if (!this.isOpen) {
                this.filter = '';
                this.resetSource();
                if (!this.appendToBody) {
                    /** @type {?} */
                    var direction = '';
                    switch (this.direction) {
                        case 'auto':
                            direction = this.isBottomRectEnough() ? 'bottom' : 'top';
                            break;
                        case 'down':
                            direction = 'bottom';
                            break;
                        case 'up':
                            direction = 'top';
                            break;
                        default:
                            direction = 'bottom';
                    }
                    this.popDirection = (/** @type {?} */ (direction));
                }
                else {
                    this.updateCdkConnectedOverlayOrigin();
                }
            }
            this.isOpen = !this.isOpen;
            /** @type {?} */
            var that = this;
            setTimeout((/**
             * @return {?}
             */
            function () {
                that.searchInputValueChangeEvent();
            }), 100);
        };
        /**
         * @return {?}
         */
        SelectComponent.prototype.isBottomRectEnough = /**
         * @return {?}
         */
        function () {
            /** @type {?} */
            var selectMenuElement = this.selectMenuElement.nativeElement;
            /** @type {?} */
            var selectInputElement = this.selectInputElement || this.selectInputWithLabelElement || this.selectInputWithTemplateElement;
            /** @type {?} */
            var displayStyle = selectMenuElement.style['display'] || ((/** @type {?} */ (window))).getComputedStyle(selectMenuElement).display;
            /** @type {?} */
            var tempStyle;
            if (displayStyle === 'none') { // 必要， 否则首次展开必有问题， 如果animationEnd之后设置为none也会有问题
                tempStyle = {
                    visibility: selectMenuElement.style.visibility,
                    display: selectMenuElement.style.display,
                    transform: selectMenuElement.style.transform,
                };
                this.renderer.setStyle(selectMenuElement, 'visibility', 'hidden');
                this.renderer.setStyle(selectMenuElement, 'display', 'block');
                this.renderer.setStyle(selectMenuElement, 'transform', 'translate(0, -9999)');
            }
            /** @type {?} */
            var elementHeight = selectMenuElement.offsetHeight;
            /** @type {?} */
            var bottomDistance = this.windowRef.innerHeight - selectInputElement.nativeElement.getBoundingClientRect().bottom;
            /** @type {?} */
            var isBottomEnough = bottomDistance >= elementHeight;
            if (displayStyle === 'none') {
                this.renderer.setStyle(selectMenuElement, 'visibility', tempStyle.visibility);
                this.renderer.setStyle(selectMenuElement, 'display', tempStyle.display);
                this.renderer.setStyle(selectMenuElement, 'transform', tempStyle.transform);
            }
            return isBottomEnough;
        };
        /**
         * @return {?}
         */
        SelectComponent.prototype.setDocumentClickListener = /**
         * @return {?}
         */
        function () {
            var _this = this;
            this.ngZone.runOutsideAngular((/**
             * @return {?}
             */
            function () {
                if (_this.isOpen) {
                    document.addEventListener('click', _this.onDocumentClick);
                }
                else {
                    document.removeEventListener('click', _this.onDocumentClick);
                }
            }));
        };
        /**
         * @param {?} $event
         * @return {?}
         */
        SelectComponent.prototype.onEscKeyup = /**
         * @param {?} $event
         * @return {?}
         */
        function ($event) {
            if (this.isOpen) {
                $event.stopPropagation();
            }
            this.isOpen = false;
        };
        /**
         * @param {?} $event
         * @return {?}
         */
        SelectComponent.prototype.handleKeyUpEvent = /**
         * @param {?} $event
         * @return {?}
         */
        function ($event) {
            if (this.isOpen) {
                $event.preventDefault();
                $event.stopPropagation();
                this.selectIndex = this.selectIndex === 0 || this.selectIndex === -1 ? this.availableOptions.length - 1 : this.selectIndex - 1;
                this.scrollToActive();
            }
        };
        /**
         * @param {?} $event
         * @return {?}
         */
        SelectComponent.prototype.handleKeyDownEvent = /**
         * @param {?} $event
         * @return {?}
         */
        function ($event) {
            if (this.isOpen) {
                $event.preventDefault();
                $event.stopPropagation();
                this.selectIndex =
                    this.selectIndex === this.availableOptions.length - 1 ? 0 : this.selectIndex + 1;
                this.scrollToActive();
            }
        };
        /**
         * @return {?}
         */
        SelectComponent.prototype.scrollToActive = /**
         * @return {?}
         */
        function () {
            /** @type {?} */
            var that = this;
            setTimeout((/**
             * @param {?} _
             * @return {?}
             */
            function (_) {
                try {
                    /** @type {?} */
                    var selectIndex = that.selectIndex + (that.isSelectAll ? 1 : 0);
                    // 多了个全选会导致问题，index需要加1
                    /** @type {?} */
                    var scrollPane = that.dropdownUl.nativeElement.children[selectIndex];
                    if (scrollPane.scrollIntoViewIfNeeded) {
                        scrollPane.scrollIntoViewIfNeeded(false);
                    }
                    else {
                        /** @type {?} */
                        var containerInfo = that.dropdownUl.nativeElement.getBoundingClientRect();
                        /** @type {?} */
                        var elementInfo = scrollPane.getBoundingClientRect();
                        if (elementInfo.bottom > containerInfo.bottom || elementInfo.top < containerInfo.top) {
                            scrollPane.scrollIntoView(false);
                        }
                    }
                }
                catch (e) {
                }
            }));
        };
        /**
         * @param {?} $event
         * @return {?}
         */
        SelectComponent.prototype.handleKeyEnterEvent = /**
         * @param {?} $event
         * @return {?}
         */
        function ($event) {
            if (this.isOpen) {
                $event.preventDefault();
                $event.stopPropagation();
                /** @type {?} */
                var item = this.availableOptions[this.selectIndex];
                if (item) {
                    this.choose(item.option, item.id, $event);
                }
                else {
                    this.toggle();
                }
            }
            else {
                this.toggle();
            }
        };
        /**
         * @param {?} item
         * @param {?} $event
         * @return {?}
         */
        SelectComponent.prototype.removeItem = /**
         * @param {?} item
         * @param {?} $event
         * @return {?}
         */
        function (item, $event) {
            this.choose(item.option, item.id, $event);
        };
        /**
         * @return {?}
         */
        SelectComponent.prototype.selectAll = /**
         * @return {?}
         */
        function () {
            var _this = this;
            /** @type {?} */
            var mutableOption = this.optionImmutableKey
                ? this.availableOptions.filter((/**
                 * @param {?} item
                 * @return {?}
                 */
                function (item) { return !item.option[_this.optionImmutableKey]; }))
                : this.availableOptions;
            /** @type {?} */
            var selectedImmutableOption = this.optionImmutableKey
                ? this.multiItems.filter((/**
                 * @param {?} item
                 * @return {?}
                 */
                function (item) { return item.option[_this.optionImmutableKey]; }))
                : [];
            if (mutableOption && mutableOption.length > (this.multiItems.length - selectedImmutableOption.length)) {
                mutableOption.map((/**
                 * @param {?} item
                 * @return {?}
                 */
                function (item) {
                    /** @type {?} */
                    var indexOfOption = _this.multiItems
                        .findIndex((/**
                     * @param {?} i
                     * @return {?}
                     */
                    function (i) { return JSON.stringify(i.option) === JSON.stringify(item.option); }));
                    if (indexOfOption === -1) {
                        _this.multiItems.push({ id: item.id, option: item.option });
                    }
                }));
            }
            else {
                this.multiItems = __spread(selectedImmutableOption);
            }
            this.value = this.multiItems.map((/**
             * @param {?} item
             * @return {?}
             */
            function (item) { return item.option; }));
            this.writeIntoInput(this.value);
            this.onChange(this.value);
            this.valueChange.emit(this.multiItems);
            this.setChecked(this.value);
        };
        /**
         * @param {?} index
         * @param {?} item
         * @return {?}
         */
        SelectComponent.prototype.trackByFn = /**
         * @param {?} index
         * @param {?} item
         * @return {?}
         */
        function (index, item) {
            return index;
        };
        /**
         * @param {?} index
         * @param {?} item
         * @return {?}
         */
        SelectComponent.prototype.trackByOptionPointer = /**
         * @param {?} index
         * @param {?} item
         * @return {?}
         */
        function (index, item) {
            return item.option;
        };
        /**
         * @param {?} event
         * @return {?}
         */
        SelectComponent.prototype.loadMoreEvent = /**
         * @param {?} event
         * @return {?}
         */
        function (event) {
            this.showLoading = true;
            this.loadMore.emit({ instance: this, event: event });
        };
        /**
         * @return {?}
         */
        SelectComponent.prototype.loadFinish = /**
         * @return {?}
         */
        function () {
            this.showLoading = false;
            this.changeDetectorRef.markForCheck();
        };
        /**
         * @return {?}
         */
        SelectComponent.prototype.loadStart = /**
         * @return {?}
         */
        function () {
            this.showLoading = true;
        };
        /**
         * @param {?} position
         * @return {?}
         */
        SelectComponent.prototype.onPositionChange = /**
         * @param {?} position
         * @return {?}
         */
        function (position) {
            this.menuPosition = position.connectionPair.originY;
        };
        /**
         * @param {?} $event
         * @return {?}
         */
        SelectComponent.prototype.animationEnd = /**
         * @param {?} $event
         * @return {?}
         */
        function ($event) {
            var _this = this;
            if (!this.isOpen && this.selectMenuElement) {
                /** @type {?} */
                var targetElement_1 = this.selectMenuElement.nativeElement;
                setTimeout((/**
                 * @return {?}
                 */
                function () {
                    // 动画会覆盖导致display还是block， 所以要等动画覆盖完
                    _this.renderer.setStyle(targetElement_1, 'display', 'none');
                }));
            }
        };
        /**
         * @param {?} selectedItem
         * @return {?}
         */
        SelectComponent.prototype.setChecked = /**
         * @param {?} selectedItem
         * @return {?}
         */
        function (selectedItem) {
            if (!selectedItem) {
                return;
            }
            if (!this.isSelectAll) {
                return;
            }
            this.halfChecked = false;
            if (selectedItem.length === this.availableOptions.length) {
                this.allChecked = true;
            }
            else if (selectedItem.length === 0) {
                this.allChecked = false;
            }
            else {
                this.halfChecked = true;
            }
        };
        /**
         * @return {?}
         */
        SelectComponent.prototype.showSelectAll = /**
         * @return {?}
         */
        function () {
            return this.isSelectAll && this.multiple && this.availableOptions.length > 0;
        };
        /**
         * @return {?}
         */
        SelectComponent.prototype.forceSearchNext = /**
         * @return {?}
         */
        function () {
            this.sourceSubscription.next(this.filter);
        };
        /**
         * @param {?} $event
         * @return {?}
         */
        SelectComponent.prototype.valueClear = /**
         * @param {?} $event
         * @return {?}
         */
        function ($event) {
            $event.stopPropagation();
            this.value = null;
            this.resetStatus();
            this.onChange(this.value);
            this.valueChange.emit(this.value);
        };
        /**
         * @return {?}
         */
        SelectComponent.prototype.resetStatus = /**
         * @return {?}
         */
        function () {
            this.writeIntoInput('');
            this.activeIndex = -1;
            this.selectIndex = -1;
            this.changeDetectorRef.markForCheck();
        };
        SelectComponent.decorators = [
            { type: core.Component, args: [{