@ert78gb/ngx-select-ex/esm5/ert78gb-ngx-select-ex.js

Angular based replacement for select boxes

import * as tslib_1 from "tslib";
import * as escapeStringNs from 'escape-string-regexp';
import { Directive, TemplateRef, Input, Output, ViewChild, Component, EventEmitter, forwardRef, HostListener, IterableDiffers, ChangeDetectorRef, ContentChild, Optional, Inject, InjectionToken, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { DomSanitizer } from '@angular/platform-browser';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import 'rxjs/add/observable/empty';
import 'rxjs/add/observable/from';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/combineLatest';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/toArray';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/merge';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import * as lodashNs from 'lodash';
import { CommonModule } from '@angular/common';
/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var escapeString = escapeStringNs;
var NgxSelectOption = /** @class */ (function () {
    /**
     * @param {?} value
     * @param {?} text
     * @param {?} disabled
     * @param {?} data
     * @param {?=} _parent
     */
    function NgxSelectOption(value, text, disabled, data, _parent) {
        if (_parent === void 0) { _parent = null; }
        this.value = value;
        this.text = text;
        this.disabled = disabled;
        this.data = data;
        this._parent = _parent;
        this.type = 'option';
        this.cacheRenderedText = null;
    }
    Object.defineProperty(NgxSelectOption.prototype, "parent", {
        /**
         * @return {?}
         */
        get: function () {
            return this._parent;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @param {?} sanitizer
     * @param {?} highlightText
     * @return {?}
     */
    NgxSelectOption.prototype.renderText = function (sanitizer, highlightText) {
        if (this.cacheHighlightText !== highlightText || this.cacheRenderedText === null) {
            this.cacheHighlightText = highlightText;
            if (this.cacheHighlightText) {
                this.cacheRenderedText = sanitizer.bypassSecurityTrustHtml((this.text + '').replace(new RegExp(escapeString(this.cacheHighlightText), 'gi'), '<strong>$&</strong>'));
            }
            else {
                this.cacheRenderedText = sanitizer.bypassSecurityTrustHtml(this.text);
            }
        }
        return this.cacheRenderedText;
    };
    return NgxSelectOption;
}());
var NgxSelectOptGroup = /** @class */ (function () {
    /**
     * @param {?} label
     * @param {?=} options
     */
    function NgxSelectOptGroup(label, options) {
        if (options === void 0) { options = []; }
        this.label = label;
        this.options = options;
        this.type = 'optgroup';
        this.filter(function () { return true; });
    }
    /**
     * @param {?} callbackFn
     * @return {?}
     */
    NgxSelectOptGroup.prototype.filter = function (callbackFn) {
        this.optionsFiltered = this.options.filter(function (option) { return callbackFn(option); });
    };
    return NgxSelectOptGroup;
}());
/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var NgxSelectOptionDirective = /** @class */ (function () {
    /**
     * @param {?} template
     */
    function NgxSelectOptionDirective(template) {
        this.template = template;
    }
    return NgxSelectOptionDirective;
}());
NgxSelectOptionDirective.decorators = [
    { type: Directive, args: [{ selector: '[ngx-select-option]' },] },
];
/** @nocollapse */
NgxSelectOptionDirective.ctorParameters = function () { return [
    { type: TemplateRef, },
]; };
var NgxSelectOptionSelectedDirective = /** @class */ (function () {
    /**
     * @param {?} template
     */
    function NgxSelectOptionSelectedDirective(template) {
        this.template = template;
    }
    return NgxSelectOptionSelectedDirective;
}());
NgxSelectOptionSelectedDirective.decorators = [
    { type: Directive, args: [{ selector: '[ngx-select-option-selected]' },] },
];
/** @nocollapse */
NgxSelectOptionSelectedDirective.ctorParameters = function () { return [
    { type: TemplateRef, },
]; };
var NgxSelectOptionNotFoundDirective = /** @class */ (function () {
    /**
     * @param {?} template
     */
    function NgxSelectOptionNotFoundDirective(template) {
        this.template = template;
    }
    return NgxSelectOptionNotFoundDirective;
}());
NgxSelectOptionNotFoundDirective.decorators = [
    { type: Directive, args: [{ selector: '[ngx-select-option-not-found]' },] },
];
/** @nocollapse */
NgxSelectOptionNotFoundDirective.ctorParameters = function () { return [
    { type: TemplateRef, },
]; };
/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var _ = lodashNs;
var escapeString$1 = escapeStringNs;
var NGX_SELECT_OPTIONS = new InjectionToken('NGX_SELECT_OPTIONS');
/**
 * @record
 */
/** @enum {number} */
var ENavigation = {
    first: 0,
    previous: 1,
    next: 2,
    last: 3,
    firstSelected: 4,
    firstIfOptionActiveInvisible: 5,
};
ENavigation[ENavigation.first] = "first";
ENavigation[ENavigation.previous] = "previous";
ENavigation[ENavigation.next] = "next";
ENavigation[ENavigation.last] = "last";
ENavigation[ENavigation.firstSelected] = "firstSelected";
ENavigation[ENavigation.firstIfOptionActiveInvisible] = "firstIfOptionActiveInvisible";
/**
 * @param {?} obj
 * @param {?} propertyName
 * @return {?}
 */
function propertyExists(obj, propertyName) {
    return propertyName in obj;
}
var NgxSelectComponent = /** @class */ (function () {
    /**
     * @param {?} iterableDiffers
     * @param {?} sanitizer
     * @param {?} cd
     * @param {?} defaultOptions
     */
    function NgxSelectComponent(iterableDiffers, sanitizer, cd, defaultOptions) {
        var _this = this;
        this.sanitizer = sanitizer;
        this.cd = cd;
        this.optionValueField = 'id';
        this.optionTextField = 'text';
        this.optGroupLabelField = 'label';
        this.optGroupOptionsField = 'options';
        this.multiple = false;
        this.allowClear = false;
        this.placeholder = '';
        this.noAutoComplete = false;
        this.disabled = false;
        this.defaultValue = [];
        this.autoSelectSingleOption = false;
        this.autoClearSearch = false;
        this.noResultsFound = 'No results found';
        this.size = 'default';
        this.autoActiveOnMouseEnter = true;
        this.keyCodeToRemoveSelected = 'Delete';
        this.keyCodeToOptionsOpen = 'Enter';
        this.keyCodeToOptionsClose = 'Escape';
        this.keyCodeToOptionsSelect = 'Enter';
        this.keyCodeToNavigateFirst = 'ArrowLeft';
        this.keyCodeToNavigatePrevious = 'ArrowUp';
        this.keyCodeToNavigateNext = 'ArrowDown';
        this.keyCodeToNavigateLast = 'ArrowRight';
        this.typed = new EventEmitter();
        this.focus = new EventEmitter();
        this.blur = new EventEmitter();
        this.open = new EventEmitter();
        this.close = new EventEmitter();
        this.select = new EventEmitter();
        this.remove = new EventEmitter();
        this.navigated = new EventEmitter();
        this.selectionChanges = new EventEmitter();
        this.optionsOpened = false;
        this.actualValue = [];
        this.subjOptions = new BehaviorSubject([]);
        this.subjSearchText = new BehaviorSubject('');
        this.subjOptionsSelected = new BehaviorSubject([]);
        this.subjExternalValue = new BehaviorSubject([]);
        this.subjDefaultValue = new BehaviorSubject([]);
        this.subjRegisterOnChange = new Subject();
        this._focusToInput = false;
        this.isFocused = false;
        this.onChange = function (v) { return v; };
        this.onTouched = function () { return null; };
        Object.assign(this, defaultOptions);
        // differs
        this.itemsDiffer = iterableDiffers.find([]).create(null);
        this.defaultValueDiffer = iterableDiffers.find([]).create(null);
        // observers
        this.typed.subscribe(function (text) { return _this.subjSearchText.next(text); });
        this.subjOptionsSelected.subscribe(function (options) { return _this.selectionChanges.emit(options); });
        var /** @type {?} */ cacheExternalValue;
        var /** @type {?} */ subjActualValue = this.subjExternalValue
            .map(function (v) { return cacheExternalValue = v === null ? [] : [].concat(v); })
            .merge(this.subjOptionsSelected.map(function (options) { return options.map(function (o) { return o.value; }); }))
            .combineLatest(this.subjDefaultValue, function (eVal, dVal) {
            var /** @type {?} */ newVal = _.isEqual(eVal, dVal) ? [] : eVal;
            return newVal.length ? newVal : dVal;
        })
            .distinctUntilChanged(function (x, y) { return _.isEqual(x, y); })
            .share();
        subjActualValue
            .combineLatest(this.subjRegisterOnChange, function (actualValue) { return actualValue; })
            .subscribe(function (actualValue) {
            _this.actualValue = actualValue;
            if (!_.isEqual(actualValue, cacheExternalValue)) {
                cacheExternalValue = actualValue;
                if (_this.multiple) {
                    _this.onChange(actualValue);
                }
                else {
                    _this.onChange(actualValue.length ? actualValue[0] : null);
                }
            }
        });
        this.subjOptions
            .flatMap(function (options) { return Observable
            .from(options)
            .flatMap(function (option) { return option instanceof NgxSelectOption
            ? Observable.of(option)
            : (option instanceof NgxSelectOptGroup ? Observable.from(option.options) : Observable.empty()); })
            .toArray(); })
            .combineLatest(subjActualValue, function (optionsFlat, actualValue) {
            var /** @type {?} */ optionsSelected = [];
            try {
                for (var optionsFlat_1 = tslib_1.__values(optionsFlat), optionsFlat_1_1 = optionsFlat_1.next(); !optionsFlat_1_1.done; optionsFlat_1_1 = optionsFlat_1.next()) {
                    var option = optionsFlat_1_1.value;
                    if (actualValue.indexOf(option.value) > -1) {
                        optionsSelected.push(option);
                    }
                }
            }
            catch (e_1_1) { e_1 = { error: e_1_1 }; }
            finally {
                try {
                    if (optionsFlat_1_1 && !optionsFlat_1_1.done && (_a = optionsFlat_1.return)) _a.call(optionsFlat_1);
                }
                finally { if (e_1) throw e_1.error; }
            }
            if (!_.isEqual(optionsSelected, _this.subjOptionsSelected.value)) {
                _this.subjOptionsSelected.next(optionsSelected);
                _this.cd.markForCheck();
            }
            var e_1, _a;
        })
            .subscribe();
        this.subjOptions
            .combineLatest(this.subjOptionsSelected, this.subjSearchText, function (options, selectedOptions, search) {
            _this.optionsFiltered = _this.filterOptions(search, options, selectedOptions)
                .map(function (option) {
                if (option instanceof NgxSelectOption) {
                    option.highlightedText = _this.highlightOption(option);
                }
                else if (option instanceof NgxSelectOptGroup) {
                    option.options.map(function (x) {
                        x.highlightedText = _this.highlightOption(x);
                        return x;
                    });
                }
                return option;
            });
            _this.cacheOptionsFilteredFlat = null;
            _this.navigateOption(ENavigation.firstIfOptionActiveInvisible);
            _this.cd.markForCheck();
            return selectedOptions;
        })
            .flatMap(function (selectedOptions) {
            return _this.optionsFilteredFlat().filter(function (flatOptions) { return _this.autoSelectSingleOption && flatOptions.length === 1 && !selectedOptions.length; });
        })
            .subscribe(function (flatOptions) {
            _this.subjOptionsSelected.next(flatOptions);
            _this.cd.markForCheck();
        });
    }
    /**
     * @param {?=} otherClassNames
     * @param {?=} useFormControl
     * @return {?}
     */
    NgxSelectComponent.prototype.setFormControlSize = function (otherClassNames, useFormControl) {
        if (otherClassNames === void 0) { otherClassNames = {}; }
        if (useFormControl === void 0) { useFormControl = true; }
        var /** @type {?} */ formControlExtraClasses = useFormControl ? {
            'form-control-sm input-sm': this.size === 'small',
            'form-control-lg input-lg': this.size === 'large'
        } : {};
        return Object.assign(formControlExtraClasses, otherClassNames);
    };
    /**
     * @return {?}
     */
    NgxSelectComponent.prototype.setBtnSize = function () {
        return { 'btn-sm': this.size === 'small', 'btn-lg': this.size === 'large' };
    };
    Object.defineProperty(NgxSelectComponent.prototype, "optionsSelected", {
        /**
         * @return {?}
         */
        get: function () {
            return this.subjOptionsSelected.value;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * @param {?} event
     * @return {?}
     */
    NgxSelectComponent.prototype.mainClicked = function (event) {
        event.clickedSelectComponent = this;
        if (!this.isFocused) {
            this.isFocused = true;
            this.focus.emit();
        }
    };
    /**
     * @param {?} event
     * @return {?}
     */
    NgxSelectComponent.prototype.documentClick = function (event) {
        if (event.clickedSelectComponent !== this) {
            if (this.optionsOpened) {
                this.optionsClose();
                this.cd.detectChanges(); // fix error because of delay between different events
            }
            if (this.isFocused) {
                this.isFocused = false;
                this.blur.emit();
            }
        }
    };
    /**
     * @return {?}
     */
    NgxSelectComponent.prototype.optionsFilteredFlat = function () {
        var _this = this;
        if (this.cacheOptionsFilteredFlat) {
            return Observable.of(this.cacheOptionsFilteredFlat);
        }
        return Observable.from(this.optionsFiltered)
            .flatMap(function (option) { return option instanceof NgxSelectOption ? Observable.of(option) :
            (option instanceof NgxSelectOptGroup ? Observable.from(option.optionsFiltered) : Observable.empty()); })
            .filter(function (optionsFilteredFlat) { return !optionsFilteredFlat.disabled; })
            .toArray()
            .do(function (optionsFilteredFlat) { return _this.cacheOptionsFilteredFlat = optionsFilteredFlat; });
    };
    /**
     * @param {?} navigation
     * @return {?}
     */
    NgxSelectComponent.prototype.navigateOption = function (navigation) {
        var _this = this;
        this.optionsFilteredFlat()
            .map(function (options) {
            var /** @type {?} */ navigated = { index: -1, activeOption: null, filteredOptionList: options };
            var /** @type {?} */ newActiveIdx;
            switch (navigation) {
                case ENavigation.first:
                    navigated.index = 0;
                    break;
                case ENavigation.previous:
                    newActiveIdx = options.indexOf(_this.optionActive) - 1;
                    navigated.index = newActiveIdx >= 0 ? newActiveIdx : options.length - 1;
                    break;
                case ENavigation.next:
                    newActiveIdx = options.indexOf(_this.optionActive) + 1;
                    navigated.index = newActiveIdx < options.length ? newActiveIdx : 0;
                    break;
                case ENavigation.last:
                    navigated.index = options.length - 1;
                    break;
                case ENavigation.firstSelected:
                    if (_this.subjOptionsSelected.value.length) {
                        navigated.index = options.indexOf(_this.subjOptionsSelected.value[0]);
                    }
                    break;
                case ENavigation.firstIfOptionActiveInvisible:
                    var /** @type {?} */ idxOfOptionActive = options.indexOf(_this.optionActive);
                    navigated.index = idxOfOptionActive > 0 ? idxOfOptionActive : 0;
                    break;
            }
            navigated.activeOption = options[navigated.index];
            return navigated;
        })
            .subscribe(function (newNavigated) { return _this.optionActivate(newNavigated); });
    };
    /**
     * @return {?}
     */
    NgxSelectComponent.prototype.ngDoCheck = function () {
        if (this.itemsDiffer.diff(this.items)) {
            this.subjOptions.next(this.buildOptions(this.items));
        }
        var /** @type {?} */ defVal = this.defaultValue ? [].concat(this.defaultValue) : [];
        if (this.defaultValueDiffer.diff(defVal)) {
            this.subjDefaultValue.next(defVal);
        }
    };
    /**
     * @return {?}
     */
    NgxSelectComponent.prototype.ngAfterContentChecked = function () {
        if (this._focusToInput && this.checkInputVisibility() && this.inputElRef &&
            this.inputElRef.nativeElement !== document.activeElement) {
            this._focusToInput = false;
            this.inputElRef.nativeElement.focus();
        }
        if (this.choiceMenuElRef) {
            var /** @type {?} */ ulElement = (this.choiceMenuElRef.nativeElement);
            var /** @type {?} */ element = (ulElement.querySelector('a.ngx-select__item_active.active'));
            if (element && element.offsetHeight > 0) {
                this.ensureVisibleElement(element);
            }
        }
    };
    /**
     * @return {?}
     */
    NgxSelectComponent.prototype.canClearNotMultiple = function () {
        return this.allowClear && !!this.subjOptionsSelected.value.length &&
            (!this.subjDefaultValue.value.length || this.subjDefaultValue.value[0] !== this.actualValue[0]);
    };
    /**
     * @return {?}
     */
    NgxSelectComponent.prototype.focusToInput = function () {
        this._focusToInput = true;
    };
    /**
     * @param {?} event
     * @return {?}
     */
    NgxSelectComponent.prototype.inputKeyDown = function (event) {
        var /** @type {?} */ keysForOpenedState = [
            this.keyCodeToOptionsSelect,
            this.keyCodeToNavigateFirst,
            this.keyCodeToNavigatePrevious,
            this.keyCodeToNavigateNext,
            this.keyCodeToNavigateLast,
        ];
        var /** @type {?} */ keysForClosedState = [this.keyCodeToOptionsOpen, this.keyCodeToRemoveSelected];
        if (this.optionsOpened && keysForOpenedState.indexOf(event.code) !== -1) {
            event.preventDefault();
            event.stopPropagation();
            switch (event.code) {
                case this.keyCodeToOptionsSelect:
                    this.optionSelect(this.optionActive);
                    this.navigateOption(ENavigation.next);
                    break;
                case this.keyCodeToNavigateFirst:
                    this.navigateOption(ENavigation.first);
                    break;
                case this.keyCodeToNavigatePrevious:
                    this.navigateOption(ENavigation.previous);
                    break;
                case this.keyCodeToNavigateLast:
                    this.navigateOption(ENavigation.last);
                    break;
                case this.keyCodeToNavigateNext:
                    this.navigateOption(ENavigation.next);
                    break;
            }
        }
        else if (!this.optionsOpened && keysForClosedState.indexOf(event.code) !== -1) {
            event.preventDefault();
            event.stopPropagation();
            switch (event.code) {
                case this.keyCodeToOptionsOpen:
                    this.optionsOpen();
                    break;
                case this.keyCodeToRemoveSelected:
                    this.optionRemove(this.subjOptionsSelected.value[this.subjOptionsSelected.value.length - 1], event);
                    break;
            }
        }
    };
    /**
     * @param {?} index
     * @param {?} option
     * @return {?}
     */
    NgxSelectComponent.prototype.trackByOption = function (index, option) {
        return option instanceof NgxSelectOption ? option.value :
            (option instanceof NgxSelectOptGroup ? option.label : option);
    };
    /**
     * @return {?}
     */
    NgxSelectComponent.prototype.checkInputVisibility = function () {
        return (this.multiple === true) || (this.optionsOpened && !this.noAutoComplete);
    };
    /**
     * \@internal
     * @param {?=} value
     * @param {?=} event
     * @return {?}
     */
    NgxSelectComponent.prototype.inputKeyUp = function (value, event) {
        if (value === void 0) { value = ''; }
        if (this.optionsOpened) {
            this.typed.emit(value);
        }
        else if (!this.optionsOpened && value) {
            this.optionsOpen(value);
        }
        else if (event.code === this.keyCodeToOptionsClose) {
            this.optionsClose();
        }
    };
    /**
     * \@internal
     * @param {?=} value
     * @return {?}
     */
    NgxSelectComponent.prototype.inputClick = function (value) {
        if (value === void 0) { value = ''; }
        if (!this.optionsOpened) {
            this.optionsOpen(value);
        }
    };
    /**
     * \@internal
     * @param {?} html
     * @return {?}
     */
    NgxSelectComponent.prototype.sanitize = function (html) {
        return html ? this.sanitizer.bypassSecurityTrustHtml(html) : null;
    };
    /**
     * \@internal
     * @param {?} option
     * @return {?}
     */
    NgxSelectComponent.prototype.highlightOption = function (option) {
        if (this.inputElRef) {
            return option.renderText(this.sanitizer, this.inputElRef.nativeElement.value);
        }
        return option.renderText(this.sanitizer, '');
    };
    /**
     * \@internal
     * @param {?} option
     * @param {?=} event
     * @return {?}
     */
    NgxSelectComponent.prototype.optionSelect = function (option, event) {
        if (event === void 0) { event = null; }
        if (event) {
            event.preventDefault();
            event.stopPropagation();
        }
        if (option && !option.disabled) {
            this.subjOptionsSelected.next((this.multiple ? this.subjOptionsSelected.value : []).concat([option]));
            this.select.emit(option.value);
            this.optionsClose();
            this.onTouched();
        }
    };
    /**
     * \@internal
     * @param {?} option
     * @param {?} event
     * @return {?}
     */
    NgxSelectComponent.prototype.optionRemove = function (option, event) {
        if (!this.disabled && option) {
            event.stopPropagation();
            this.subjOptionsSelected.next((this.multiple ? this.subjOptionsSelected.value : []).filter(function (o) { return o !== option; }));
            this.remove.emit(option.value);
        }
    };
    /**
     * \@internal
     * @param {?} navigated
     * @return {?}
     */
    NgxSelectComponent.prototype.optionActivate = function (navigated) {
        if ((this.optionActive !== navigated.activeOption) &&
            (!navigated.activeOption || !navigated.activeOption.disabled)) {
            if (this.optionActive) {
                this.optionActive.active = false;
            }
            this.optionActive = navigated.activeOption;
            if (this.optionActive) {
                this.optionActive.active = true;
            }
            this.navigated.emit(navigated);
            this.cd.detectChanges();
        }
    };
    /**
     * \@internal
     * @param {?} navigated
     * @return {?}
     */
    NgxSelectComponent.prototype.onMouseEnter = function (navigated) {
        if (this.autoActiveOnMouseEnter) {
            this.optionActivate(navigated);
        }
    };
    /**
     * @param {?} search
     * @param {?} options
     * @param {?} selectedOptions
     * @return {?}
     */
    NgxSelectComponent.prototype.filterOptions = function (search, options, selectedOptions) {
        var _this = this;
        var /** @type {?} */ regExp = new RegExp(escapeString$1(search), 'i'), /** @type {?} */ filterOption = function (option) {
            if (_this.searchCallback) {
                return _this.searchCallback(search, option);
            }
            return (!search || regExp.test(option.text)) && (!_this.multiple || selectedOptions.indexOf(option) === -1);
        };
        return options.filter(function (option) {
            if (option instanceof NgxSelectOption) {
                return filterOption(/** @type {?} */ (option));
            }
            else if (option instanceof NgxSelectOptGroup) {
                var /** @type {?} */ subOp = (option);
                subOp.filter(function (subOption) { return filterOption(subOption); });
                return subOp.optionsFiltered.length;
            }
        });
    };
    /**
     * @param {?} element
     * @return {?}
     */
    NgxSelectComponent.prototype.ensureVisibleElement = function (element) {
        var _this = this;
        setTimeout(function () {
            if (_this.choiceMenuElRef && _this.cacheElementOffsetTop !== element.offsetTop) {
                _this.cacheElementOffsetTop = element.offsetTop;
                var /** @type {?} */ container = _this.choiceMenuElRef.nativeElement;
                if (_this.cacheElementOffsetTop < container.scrollTop) {
                    container.scrollTop = _this.cacheElementOffsetTop;
                }
                else if (_this.cacheElementOffsetTop + element.offsetHeight > container.scrollTop + container.clientHeight) {
                    container.scrollTop = _this.cacheElementOffsetTop + element.offsetHeight - container.clientHeight;
                }
            }
        });
    };
    /**
     * @param {?=} search
     * @return {?}
     */
    NgxSelectComponent.prototype.optionsOpen = function (search) {
        if (search === void 0) { search = ''; }
        if (!this.disabled) {
            this.optionsOpened = true;
            this.subjSearchText.next(search);
            if (!this.multiple && this.subjOptionsSelected.value.length) {
                this.navigateOption(ENavigation.firstSelected);
            }
            else {
                this.navigateOption(ENavigation.first);
            }
            this.focusToInput();
            this.open.emit();
            this.cd.markForCheck();
        }
    };
    /**
     * @return {?}
     */
    NgxSelectComponent.prototype.optionsClose = function () {
        this.optionsOpened = false;
        // if (focusToHost) {
        //     const x = window.scrollX, y = window.scrollY;
        //     this.mainElRef.nativeElement.focus();
        //     window.scrollTo(x, y);
        // }
        this.close.emit();
        if (this.autoClearSearch && this.multiple && this.inputElRef) {
            this.inputElRef.nativeElement.value = null;
        }
    };
    /**
     * @param {?} data
     * @return {?}
     */
    NgxSelectComponent.prototype.buildOptions = function (data) {
        var _this = this;
        var /** @type {?} */ result = [];
        if (Array.isArray(data)) {
            var /** @type {?} */ option_1;
            data.forEach(function (item) {
                var /** @type {?} */ isOptGroup = typeof item === 'object' && item !== null &&
                    propertyExists(item, _this.optGroupLabelField) && propertyExists(item, _this.optGroupOptionsField) &&
                    Array.isArray(item[_this.optGroupOptionsField]);
                if (isOptGroup) {
                    var /** @type {?} */ optGroup_1 = new NgxSelectOptGroup(item[_this.optGroupLabelField]);
                    item[_this.optGroupOptionsField].forEach(function (subOption) {
                        if (option_1 = _this.buildOption(subOption, optGroup_1)) {
                            optGroup_1.options.push(option_1);
                        }
                    });
                    result.push(optGroup_1);
                }
                else if (option_1 = _this.buildOption(item, null)) {
                    result.push(option_1);
                }
            });
        }
        return result;
    };
    /**
     * @param {?} data
     * @param {?} parent
     * @return {?}
     */
    NgxSelectComponent.prototype.buildOption = function (data, parent) {
        var /** @type {?} */ value, /** @type {?} */ text, /** @type {?} */ disabled;
        if (typeof data === 'string' || typeof data === 'number') {
            value = text = data;
            disabled = false;
        }
        else if (typeof data === 'object' && data !== null &&
            (propertyExists(data, this.optionValueField) || propertyExists(data, this.optionTextField))) {
            value = propertyExists(data, this.optionValueField) ? data[this.optionValueField] : data[this.optionTextField];
            text = propertyExists(data, this.optionTextField) ? data[this.optionTextField] : data[this.optionValueField];
            disabled = propertyExists(data, 'disabled') ? data['disabled'] : false;
        }
        else {
            return null;
        }
        return new NgxSelectOption(value, text, disabled, data, parent);
    };
    /**
     * @param {?} obj
     * @return {?}
     */
    NgxSelectComponent.prototype.writeValue = function (obj) {
        this.subjExternalValue.next(obj);
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    NgxSelectComponent.prototype.registerOnChange = function (fn) {
        this.onChange = fn;
        this.subjRegisterOnChange.next();
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    NgxSelectComponent.prototype.registerOnTouched = function (fn) {
        this.onTouched = fn;
    };
    /**
     * @param {?} isDisabled
     * @return {?}
     */
    NgxSelectComponent.prototype.setDisabledState = function (isDisabled) {
        this.disabled = isDisabled;
    };
    return NgxSelectComponent;
}());
NgxSelectComponent.decorators = [
    { type: Component, args: [{
                selector: 'ngx-select',
                template: "<div #main [tabindex]=\"disabled? -1: 0\" class=\"ngx-select dropdown\"\n     [ngClass]=\"setFormControlSize({\n        'ngx-select_multiple form-control': multiple === true,\n        'open show': optionsOpened && optionsFiltered.length\n     }, multiple === true)\"\n     (click)=\"mainClicked($event)\" (focusin)=\"mainClicked($event)\"\n     (focus)=\"focusToInput()\" (keydown)=\"inputKeyDown($event)\">\n    <div [ngClass]=\"{ 'ngx-select__disabled': disabled}\"></div>\n    <!-- single selected item -->\n    <div class=\"ngx-select__selected\"\n         *ngIf=\"(multiple === false) && (!optionsOpened || noAutoComplete)\">\n        <div class=\"ngx-select__toggle btn form-control\" [ngClass]=\"setFormControlSize(setBtnSize())\"\n             (click)=\"optionsOpen()\">\n            <span *ngIf=\"!optionsSelected.length\" class=\"ngx-select__placeholder text-muted\">\n                <span [innerHtml]=\"placeholder\"></span>\n            </span>\n            <span *ngIf=\"optionsSelected.length\"\n                  class=\"ngx-select__selected-single pull-left float-left\"\n                  [ngClass]=\"{'ngx-select__allow-clear': allowClear}\">\n                <ng-container [ngTemplateOutlet]=\"templateSelectedOption || defaultTemplateOption\"\n                              [ngTemplateOutletContext]=\"{$implicit: optionsSelected[0], index: 0,\n                                                          text: sanitize(optionsSelected[0].text)}\">\n                </ng-container>\n            </span>\n            <span class=\"ngx-select__toggle-buttons\">\n                <a class=\"ngx-select__clear btn btn-sm btn-link\" *ngIf=\"canClearNotMultiple()\"\n                   [ngClass]=\"setBtnSize()\"\n                   (click)=\"optionRemove(optionsSelected[0], $event)\">\n                    <i class=\"ngx-select__clear-icon\"></i>\n                </a>\n                <i class=\"dropdown-toggle\"></i>\n                <i class=\"ngx-select__toggle-caret caret\"></i>\n            </span>\n        </div>\n    </div>\n    <!-- multiple selected items -->\n    <div class=\"ngx-select__selected\" *ngIf=\"multiple === true\">\n        <span *ngFor=\"let option of optionsSelected; trackBy: trackByOption; let idx = index\">\n            <span tabindex=\"-1\" [ngClass]=\"setBtnSize()\"\n                  class=\"ngx-select__selected-plural btn btn-default btn-secondary btn-xs\">\n                <ng-container [ngTemplateOutlet]=\"templateSelectedOption || defaultTemplateOption\"\n                              [ngTemplateOutletContext]=\"{$implicit: option, index: idx, text: sanitize(option.text)}\">\n                </ng-container>\n                <a class=\"ngx-select__clear btn btn-sm btn-link pull-right float-right\" [ngClass]=\"setBtnSize()\"\n                   (click)=\"optionRemove(option, $event)\">\n                    <i class=\"ngx-select__clear-icon\"></i>\n                </a>\n            </span>\n        </span>\n    </div>\n    <!-- live search an item from the list -->\n    <input #input type=\"text\" class=\"ngx-select__search form-control\" [ngClass]=\"setFormControlSize()\"\n           *ngIf=\"checkInputVisibility()\"\n           [tabindex]=\"multiple === false? -1: 0\"\n           (keyup)=\"inputKeyUp(input.value, $event)\"\n           [disabled]=\"disabled\"\n           [placeholder]=\"optionsSelected.length? '': placeholder\"\n           (click)=\"inputClick(input.value)\"\n           autocomplete=\"off\"\n           autocorrect=\"off\"\n           autocapitalize=\"off\"\n           spellcheck=\"false\"\n           role=\"combobox\">\n    <!-- options template -->\n    <ul #choiceMenu role=\"menu\" *ngIf=\"isFocused\" class=\"ngx-select__choices dropdown-menu\"\n        [class.show]=\"optionsOpened\">\n        <li class=\"ngx-select__item-group\" role=\"menuitem\"\n            *ngFor=\"let opt of optionsFiltered; trackBy: trackByOption; let idxGroup=index\">\n            <div class=\"divider dropdown-divider\" *ngIf=\"opt.type === 'optgroup' && (idxGroup > 0)\"></div>\n            <div class=\"dropdown-header\" *ngIf=\"opt.type === 'optgroup'\">{{opt.label}}</div>\n            <a href=\"#\" #choiceItem class=\"ngx-select__item dropdown-item\"\n               *ngFor=\"let option of (opt.optionsFiltered || [opt]); trackBy: trackByOption; let idxOption = index\"\n               [ngClass]=\"{\n                    'ngx-select__item_active active': option.active,\n                    'ngx-select__item_disabled disabled': option.disabled\n               }\"\n               (mouseenter)=\"onMouseEnter({\n                    activeOption: option,\n                    filteredOptionList: optionsFiltered,\n                    index: idxOption\n               })\"\n               (click)=\"optionSelect(option, $event)\">\n                <ng-container [ngTemplateOutlet]=\"templateOption || defaultTemplateOption\"\n                              [ngTemplateOutletContext]=\"{$implicit: option, text: option.highlightedText,\n                              index: idxGroup, subIndex: idxOption}\"></ng-container>\n            </a>\n        </li>\n        <li class=\"ngx-select__item ngx-select__item_no-found dropdown-header\" *ngIf=\"!optionsFiltered.length\">\n            <ng-container [ngTemplateOutlet]=\"templateOptionNotFound || defaultTemplateOptionNotFound\"></ng-container>\n        </li>\n    </ul>\n    <!--Default templates-->\n    <ng-template #defaultTemplateOption let-text=\"text\">\n        <span [innerHtml]=\"text\"></span>\n    </ng-template>\n    <ng-template #defaultTemplateOptionNotFound>\n        {{noResultsFound}}\n    </ng-template>\n</div>\n",
                styles: [".ngx-select{ }\n  .ngx-select_multiple{\n    height:auto;\n    padding:3px 3px 0 3px; }\n  .ngx-select_multiple .ngx-select__search{\n    background-color:transparent !important;\n    border:none;\n    outline:none;\n    -webkit-box-shadow:none;\n            box-shadow:none;\n    height:1.6666em;\n    padding:0;\n    margin-bottom:3px; }\n  .ngx-select__disabled{\n    background-color:#eceeef;\n    border-radius:4px;\n    position:absolute;\n    width:100%;\n    height:100%;\n    z-index:5;\n    opacity:0.6;\n    top:0;\n    left:0;\n    cursor:not-allowed; }\n  .ngx-select__toggle{\n    outline:0;\n    position:relative;\n    text-align:left !important;\n    color:#333;\n    background-color:#fff;\n    border-color:#ccc;\n    display:-webkit-inline-box;\n    display:-ms-inline-flexbox;\n    display:inline-flex;\n    -webkit-box-align:stretch;\n        -ms-flex-align:stretch;\n            align-items:stretch;\n    -webkit-box-pack:justify;\n        -ms-flex-pack:justify;\n            justify-content:space-between; }\n    .ngx-select__toggle:hover{\n      color:#333;\n      background-color:#e6e6e6;\n      border-color:#adadad; }\n  .ngx-select__toggle-buttons{\n    -ms-flex-negative:0;\n        flex-shrink:0;\n    display:-webkit-box;\n    display:-ms-flexbox;\n    display:flex;\n    -webkit-box-align:center;\n        -ms-flex-align:center;\n            align-items:center; }\n  .ngx-select__toggle-caret{\n    position:absolute;\n    height:10px;\n    top:50%;\n    right:10px;\n    margin-top:-2px; }\n  .ngx-select__placeholder{\n    float:left; }\n  .ngx-select__clear{\n    margin-right:10px;\n    padding:0;\n    border:none; }\n  .ngx-select_multiple .ngx-select__clear{\n    line-height:initial;\n    margin-left:5px;\n    margin-right:0;\n    color:#000;\n    opacity:.5; }\n  .ngx-select__clear-icon{\n    display:inline-block;\n    font-size:inherit;\n    cursor:pointer;\n    position:relative;\n    width:1em;\n    height:.75em;\n    padding:0; }\n    .ngx-select__clear-icon:before, .ngx-select__clear-icon:after{\n      content:'';\n      position:absolute;\n      border-top:3px solid;\n      width:100%;\n      top:50%;\n      left:0;\n      margin-top:-1px; }\n    .ngx-select__clear-icon:before{\n      -webkit-transform:rotate(45deg);\n              transform:rotate(45deg); }\n    .ngx-select__clear-icon:after{\n      -webkit-transform:rotate(-45deg);\n              transform:rotate(-45deg); }\n  .ngx-select__choices{\n    width:100%;\n    height:auto;\n    max-height:200px;\n    overflow-x:hidden;\n    margin-top:0;\n    position:absolute; }\n  .ngx-select_multiple .ngx-select__choices{\n    margin-top:1px; }\n  .ngx-select__item{\n    display:block;\n    padding:3px 20px;\n    clear:both;\n    font-weight:400;\n    line-height:1.42857143;\n    white-space:nowrap;\n    cursor:pointer;\n    text-decoration:none; }\n  .ngx-select__item_disabled, .ngx-select__item_no-found{\n    cursor:default; }\n  .ngx-select__item_active{\n    color:#fff;\n    outline:0;\n    background-color:#428bca; }\n  .ngx-select__selected-single, .ngx-select__selected-plural{\n    display:-webkit-inline-box;\n    display:-ms-inline-flexbox;\n    display:inline-flex;\n    -webkit-box-align:center;\n        -ms-flex-align:center;\n            align-items:center;\n    overflow:hidden; }\n    .ngx-select__selected-single span, .ngx-select__selected-plural span{\n      overflow:hidden;\n      text-overflow:ellipsis; }\n  .ngx-select__selected-plural{\n    outline:0;\n    margin:0 3px 3px 0; }\n.input-group > .dropdown{\n  position:static; }\n"],
                changeDetection: ChangeDetectionStrategy.OnPush,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef(function () { return NgxSelectComponent; }),
                        multi: true
                    }
                ]
            },] },
];
/** @nocollapse */
NgxSelectComponent.ctorParameters = function () { return [
    { type: IterableDiffers, },
    { type: DomSanitizer, },
    { type: ChangeDetectorRef, },
    { type: undefined, decorators: [{ type: Inject, args: [NGX_SELECT_OPTIONS,] }, { type: Optional },] },
]; };
NgxSelectComponent.propDecorators = {
    "items": [{ type: Input },],
    "optionValueField": [{ type: Input },],
    "optionTextField": [{ type: Input },],
    "optGroupLabelField": [{ type: Input },],
    "optGroupOptionsField": [{ type: Input },],
    "multiple": [{ type: Input },],
    "allowClear": [{ type: Input },],
    "placeholder": [{ type: Input },],
    "noAutoComplete": [{ type: Input },],
    "disabled": [{ type: Input },],
    "defaultValue": [{ type: Input },],
    "autoSelectSingleOption": [{ type: Input },],
    "autoClearSearch": [{ type: Input },],
    "noResultsFound": [{ type: Input },],
    "size": [{ type: Input },],
    "searchCallback": [{ type: Input },],
    "autoActiveOnMouseEnter": [{ type: Input },],
    "typed": [{ type: Output },],
    "focus": [{ type: Output },],
    "blur": [{ type: Output },],
    "open": [{ type: Output },],
    "close": [{ type: Output },],
    "select": [{ type: Output },],
    "remove": [{ type: Output },],
    "navigated": [{ type: Output },],
    "selectionChanges": [{ type: Output },],
    "mainElRef": [{ type: ViewChild, args: ['main',] },],
    "inputElRef": [{ type: ViewChild, args: ['input',] },],
    "choiceMenuElRef": [{ type: ViewChild, args: ['choiceMenu',] },],
    "templateOption": [{ type: ContentChild, args: [NgxSelectOptionDirective, { read: TemplateRef },] },],
    "templateSelectedOption": [{ type: ContentChild, args: [NgxSelectOptionSelectedDirective, { read: TemplateRef },] },],
    "templateOptionNotFound": [{ type: ContentChild, args: [NgxSelectOptionNotFoundDirective, { read: TemplateRef },] },],
    "documentClick": [{ type: HostListener, args: ['document:focusin', ['$event'],] }, { type: HostListener, args: ['document:click', ['$event'],] },],
};
/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var NgxSelectModule = /** @class */ (function () {
    function NgxSelectModule() {
    }
    /**
     * @param {?} options
     * @return {?}
     */
    NgxSelectModule.forRoot = function (options) {
        return {
            ngModule: NgxSelectModule,
            providers: [{ provide: NGX_SELECT_OPTIONS, useValue: options }]
        };
    };
    return NgxSelectModule;
}());
NgxSelectModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule
                ],
                declarations: [NgxSelectComponent,
                    NgxSelectOptionDirective, NgxSelectOptionSelectedDirective, NgxSelectOptionNotFoundDirective
                ],
                exports: [NgxSelectComponent,
                    NgxSelectOptionDirective, NgxSelectOptionSelectedDirective, NgxSelectOptionNotFoundDirective
                ]
            },] },
];
/** @nocollapse */
NgxSelectModule.ctorParameters = function () { return []; };
/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
/**
 * Generated bundle index. Do not edit.
 */
export { NgxSelectModule, NGX_SELECT_OPTIONS, NgxSelectComponent, NgxSelectOption, NgxSelectOptGroup, NgxSelectOptionDirective, NgxSelectOptionSelectedDirective, NgxSelectOptionNotFoundDirective };
//# sourceMappingURL=ert78gb-ngx-select-ex.js.map