ngx-dropdown-list 1.1.2 → 1.2.0

package/bundles/ngx-dropdown-list.umd.js

@@ -1,1212 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/forms'), require('@angular/common'), require('@angular/core')) :
-    typeof define === 'function' && define.amd ? define('ngx-dropdown-list', ['exports', '@angular/forms', '@angular/common', '@angular/core'], factory) :
-    (factory((global['ngx-dropdown-list'] = {}),global.ng.forms,global.ng.common,global.ng.core));
-}(this, (function (exports,forms,common,core) { 'use strict';
-
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m)
-            return m.call(o);
-        if (o && typeof o.length === "number")
-            return {
-                next: function () {
-                    if (o && i >= o.length)
-                        o = void 0;
-                    return { value: o && o[i++], done: !o };
-                }
-            };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /**
-     * check whether the provided items contains group
-     * @param {?} items
-     * @return {?}
-     */
-    function hasGroup(items) {
-        return items ? (items.find(( /**
-         * @param {?} item
-         * @return {?}
-         */function (item) { return item.group; })) != null) : false;
-    }
-    /**
-     * clear all selections from the provide items.
-     * @param {?} items the dropdown items, can be group or item
-     * @return {?}
-     */
-    function clearAllSelection(items) {
-        var e_1, _a;
-        if (hasGroup(items)) {
-            try {
-                for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
-                    var groupItem = items_1_1.value;
-                    if (groupItem.items) {
-                        groupItem.items.filter(( /**
-                         * @param {?} item
-                         * @return {?}
-                         */function (item) { return item.selected; })).forEach(( /**
-                         * @param {?} item
-                         * @return {?}
-                         */function (item) { return item.selected = false; }));
-                    }
-                }
-            }
-            catch (e_1_1) {
-                e_1 = { error: e_1_1 };
-            }
-            finally {
-                try {
-                    if (items_1_1 && !items_1_1.done && (_a = items_1.return))
-                        _a.call(items_1);
-                }
-                finally {
-                    if (e_1)
-                        throw e_1.error;
-                }
-            }
-        }
-        else {
-            // clear the selection of previous selected item
-            items.filter(( /**
-             * @param {?} item
-             * @return {?}
-             */function (item) { return item.selected; })).forEach(( /**
-             * @param {?} item
-             * @return {?}
-             */function (item) { return item.selected = false; }));
-        }
-    }
-    /**
-     * stop all propagation and default actions
-     * @param {?} event
-     * @return {?}
-     */
-    function stopPropagationAndDefault(event) {
-        event.stopImmediatePropagation();
-        event.stopPropagation();
-        event.preventDefault();
-    }
-    /**
-     * check whether the provided value is number of not
-     * @param {?} value
-     * @return {?}
-     */
-    function isNumber(value) {
-        return !(value == null || isNaN(value) || value.length === 0);
-    }
-    /**
-     * get the selected item from the items list (including item and group)
-     * @param {?} items
-     * @return {?}
-     */
-    function getFirstSelectedItem(items) {
-        var e_2, _a;
-        if (!items) {
-            return undefined;
-        }
-        /** @type {?} */
-        var selectedItem;
-        if (hasGroup(items)) {
-            try {
-                for (var items_2 = __values(items), items_2_1 = items_2.next(); !items_2_1.done; items_2_1 = items_2.next()) {
-                    var item = items_2_1.value;
-                    selectedItem = item.items ? item.items.find(( /**
-                     * @param {?} subItem
-                     * @return {?}
-                     */function (subItem) { return subItem.selected; })) : undefined;
-                    if (selectedItem) {
-                        break;
-                    }
-                }
-            }
-            catch (e_2_1) {
-                e_2 = { error: e_2_1 };
-            }
-            finally {
-                try {
-                    if (items_2_1 && !items_2_1.done && (_a = items_2.return))
-                        _a.call(items_2);
-                }
-                finally {
-                    if (e_2)
-                        throw e_2.error;
-                }
-            }
-        }
-        else {
-            selectedItem = items ? items.find(( /**
-             * @param {?} item
-             * @return {?}
-             */function (item) { return item.selected; })) : undefined;
-        }
-        return selectedItem;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var DropdownListComponent = /** @class */ (function () {
-        function DropdownListComponent() {
-            /**
-             * bind to [multiSelection], the flag for multi-select (checkbox) mode.
-             */
-            this.multiSelection = false;
-            /**
-             * bind to [filterBox] for displaying the filter input text box
-             */
-            this.filterBox = false;
-            /**
-             * bind to [allowClear] for enabling the clearance (clearance is not avaiable when checkbox is enabled)
-             */
-            this.allowClear = true;
-            /**
-             * bind to [formatNumber] for show formatted number text
-             */
-            this.formatNumber = false;
-            /**
-             * for 2-way binding of [selectedValue], using async event to
-             * prevent "ExpressionChangedAfterItHasBeenCheckedError".
-             */
-            this.selectedValueChange = new core.EventEmitter(true);
-            /**
-             * [selectionChange] event that will be triggered when changing of the selection.
-             * Using async event to prevent "ExpressionChangedAfterItHasBeenCheckedError".
-             */
-            this.selectionChange = new core.EventEmitter(true);
-            /**
-             * visibility flag of drop down
-             */
-            this.dropdownVisibility = false;
-        }
-        Object.defineProperty(DropdownListComponent.prototype, "selectedText", {
-            /**
-             * current selected text
-             */
-            get: /**
-             * current selected text
-             * @return {?}
-             */ function () {
-                if (!this.multiSelection) {
-                    /** @type {?} */
-                    var selectedItem = getFirstSelectedItem(this.items);
-                    return selectedItem ? selectedItem.text : undefined;
-                }
-            },
-            enumerable: true,
-            configurable: true
-        });
-        /**
-         * triggered with (selectionChange) event, emits (selectedValueChange) and (selectionChange)
-         */
-        /**
-         * triggered with (selectionChange) event, emits (selectedValueChange) and (selectionChange)
-         * @param {?} event
-         * @return {?}
-         */
-        DropdownListComponent.prototype.onSelectionChange = /**
-         * triggered with (selectionChange) event, emits (selectedValueChange) and (selectionChange)
-         * @param {?} event
-         * @return {?}
-         */
-            function (event) {
-                this.selectedValueChange.emit(event);
-                this.selectionChange.emit(event);
-            };
-        /**
-         * triggered with (anchorClick) event, controlling the "open" and "close" of the dropdown
-         */
-        /**
-         * triggered with (anchorClick) event, controlling the "open" and "close" of the dropdown
-         * @param {?} event
-         * @return {?}
-         */
-        DropdownListComponent.prototype.onAnchorClick = /**
-         * triggered with (anchorClick) event, controlling the "open" and "close" of the dropdown
-         * @param {?} event
-         * @return {?}
-         */
-            function (event) {
-                if (this.disabled) {
-                    stopPropagationAndDefault(event);
-                    return;
-                }
-                if (this._isSelectionOpen()) {
-                    this._hideItemList();
-                }
-                else {
-                    this._showItemsList();
-                }
-                stopPropagationAndDefault(event);
-            };
-        /**
-         * triggered with (itemClick) event, closes the dropdown in non-checkbox mode
-         */
-        /**
-         * triggered with (itemClick) event, closes the dropdown in non-checkbox mode
-         * @return {?}
-         */
-        DropdownListComponent.prototype.onItemClick = /**
-         * triggered with (itemClick) event, closes the dropdown in non-checkbox mode
-         * @return {?}
-         */
-            function () {
-                if (!this.multiSelection) {
-                    this._hideItemList();
-                }
-            };
-        /**
-         * triggered with (clearanceClick) event, clearing all selections
-         * and emits (selectedValueChange) and (selectionChange) event for empty value
-         */
-        /**
-         * triggered with (clearanceClick) event, clearing all selections
-         * and emits (selectedValueChange) and (selectionChange) event for empty value
-         * @param {?} event
-         * @return {?}
-         */
-        DropdownListComponent.prototype.onClearanceClick = /**
-         * triggered with (clearanceClick) event, clearing all selections
-         * and emits (selectedValueChange) and (selectionChange) event for empty value
-         * @param {?} event
-         * @return {?}
-         */
-            function (event) {
-                if (!this.multiSelection) {
-                    this.selectedValue = void 0;
-                    this.selectedValueChange.emit(undefined);
-                    this.selectionChange.emit(undefined);
-                    clearAllSelection(this.items);
-                }
-                stopPropagationAndDefault(event);
-            };
-        /**
-         * triggered with (dropdownBlur) event, closes the dropdown
-         */
-        /**
-         * triggered with (dropdownBlur) event, closes the dropdown
-         * @return {?}
-         */
-        DropdownListComponent.prototype.onItemsBlur = /**
-         * triggered with (dropdownBlur) event, closes the dropdown
-         * @return {?}
-         */
-            function () {
-                if (this._isSelectionOpen()) {
-                    this._hideItemList();
-                }
-            };
-        /**
-         * close the dropdown
-         */
-        /**
-         * close the dropdown
-         * @private
-         * @return {?}
-         */
-        DropdownListComponent.prototype._hideItemList = /**
-         * close the dropdown
-         * @private
-         * @return {?}
-         */
-            function () {
-                // hide the dropdown element (has some problem for using CSS directly, using this as a workaround)
-                this._dropdownElement.classList.remove('visible');
-                this._dropdownElement.style.display = 'none';
-                this.dropdownVisibility = false;
-            };
-        /**
-         * open the dropdown
-         */
-        /**
-         * open the dropdown
-         * @private
-         * @return {?}
-         */
-        DropdownListComponent.prototype._showItemsList = /**
-         * open the dropdown
-         * @private
-         * @return {?}
-         */
-            function () {
-                // display the dropdown element (has some problem for using CSS directly, using this as a workaround)
-                this._dropdownElement.classList.add('visible');
-                this._dropdownElement.style.display = 'block';
-                this.dropdownVisibility = true;
-                // scrolling to the selected item
-                if (this._selectedElement) {
-                    this._selectedElement.scrollIntoView({ behavior: 'instant', block: 'center' });
-                }
-                // setting the focus
-                if (this.filterBox && !this.multiSelection) {
-                    this._filterInputElement.focus();
-                }
-                else {
-                    this._dropdownElement.focus();
-                }
-            };
-        /**
-         * visibility status of dropdown
-         */
-        /**
-         * visibility status of dropdown
-         * @private
-         * @return {?}
-         */
-        DropdownListComponent.prototype._isSelectionOpen = /**
-         * visibility status of dropdown
-         * @private
-         * @return {?}
-         */
-            function () {
-                return this.dropdownVisibility;
-            };
-        Object.defineProperty(DropdownListComponent.prototype, "_dropdownElement", {
-            /**
-             * get the real dropdown element (for focusing and visibility controlling), the <span> not the <dropdown>
-             */
-            get: /**
-             * get the real dropdown element (for focusing and visibility controlling), the <span> not the <dropdown>
-             * @private
-             * @return {?}
-             */ function () {
-                return this.dropdownRef ? this.dropdownRef.nativeElement ? this.dropdownRef.nativeElement.firstElementChild : null : null;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(DropdownListComponent.prototype, "_filterInputElement", {
-            /**
-             * get the real filter element (for focusing), the <input> not the <input-filter>
-             */
-            get: /**
-             * get the real filter element (for focusing), the <input> not the <input-filter>
-             * @private
-             * @return {?}
-             */ function () {
-                return this._dropdownElement ?
-                    this._dropdownElement.firstElementChild ? this._dropdownElement.firstElementChild.firstElementChild : null : null;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(DropdownListComponent.prototype, "_selectedElement", {
-            /**
-             * get the HTMLElement of selected item, for doing (scrollIntoView) scrolling to the selected item
-             */
-            get: /**
-             * get the HTMLElement of selected item, for doing (scrollIntoView) scrolling to the selected item
-             * @private
-             * @return {?}
-             */ function () {
-                /** @type {?} */
-                var selectedItem = getFirstSelectedItem(this.items);
-                return selectedItem ? ( /** @type {?} */(document.getElementById(selectedItem.id))) : undefined;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        DropdownListComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'ngx-dropdown-list',
-                        template: "\n    <span class=\"ngx-select\">\n        <anchor (anchorClick)=\"onAnchorClick($event)\" (clearanceClick)=\"onClearanceClick($event)\"\n                [checkbox]=\"multiSelection\"\n                [formatNumber]=\"formatNumber\"\n                [suffixText]=\"suffixText\"\n                [placeHolder]=\"placeHolder\"\n                [allowClear]=\"allowClear\"\n                [openStatus]=\"dropdownVisibility\"\n                [selectedText]=\"selectedText\"\n                [disabled]=\"disabled\">\n        </anchor>\n        <dropdown #dropdown (dropdownBlur) = \"onItemsBlur()\" (selectionChange)=\"onSelectionChange($event)\"\n                [items]=\"items\"\n                [checkbox]=\"multiSelection\"\n                [filterBox]=\"filterBox\"\n                [formatNumber]=\"formatNumber\"\n                [suffixText]=\"suffixText\"\n                [(selectedValue)]=\"selectedValue\"\n                (itemClick) = \"onItemClick()\"\n                [disabled]=\"disabled\">\n        </dropdown>\n    </span>\n  ",
-                        styles: [":host *,:host :after,:host :before{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}:host .ngx-select{border-radius:4px;font-size:14px;position:relative;display:inline-block;width:100%;height:34px;background:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}"]
-                    }] }
-        ];
-        DropdownListComponent.propDecorators = {
-            dropdownRef: [{ type: core.ViewChild, args: ['dropdown', { read: core.ElementRef },] }],
-            placeHolder: [{ type: core.Input }],
-            items: [{ type: core.Input }],
-            multiSelection: [{ type: core.Input }],
-            selectedValue: [{ type: core.Input }],
-            filterBox: [{ type: core.Input }],
-            suffixText: [{ type: core.Input }],
-            disabled: [{ type: core.Input }],
-            allowClear: [{ type: core.Input }],
-            formatNumber: [{ type: core.Input }],
-            selectedValueChange: [{ type: core.Output }],
-            selectionChange: [{ type: core.Output }]
-        };
-        return DropdownListComponent;
-    }());
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var ItemComponent = /** @class */ (function () {
-        function ItemComponent() {
-            /**
-             * bind to [formatNumber], the flag for formatting the number
-             */
-            this.formatNumber = false;
-            /**
-             * bind to [itemClick] event, triggers when clicking the item of dropdown
-             */
-            this.itemClick = new core.EventEmitter();
-            /**
-             * bind to [checkStatusChange] event, triggers when check status is changed in checkbox mode.
-             */
-            this.checkStatusChange = new core.EventEmitter();
-        }
-        /**
-         * check whether needs to format number for the provided text
-         */
-        /**
-         * check whether needs to format number for the provided text
-         * @param {?} value
-         * @return {?}
-         */
-        ItemComponent.prototype.needFormatNumber = /**
-         * check whether needs to format number for the provided text
-         * @param {?} value
-         * @return {?}
-         */
-            function (value) {
-                return isNumber(value) && this.formatNumber;
-            };
-        /**
-         * triggered when clicking the item, emits the [itemClick] event
-         */
-        /**
-         * triggered when clicking the item, emits the [itemClick] event
-         * @param {?} item
-         * @return {?}
-         */
-        ItemComponent.prototype.onItemClick = /**
-         * triggered when clicking the item, emits the [itemClick] event
-         * @param {?} item
-         * @return {?}
-         */
-            function (item) {
-                this.itemClick.emit(item);
-            };
-        /**
-         * triggered when checking status changed in checkbox mode, emits the [checkStatusChange] event
-         */
-        /**
-         * triggered when checking status changed in checkbox mode, emits the [checkStatusChange] event
-         * @param {?} item
-         * @return {?}
-         */
-        ItemComponent.prototype.onCheckStatusChange = /**
-         * triggered when checking status changed in checkbox mode, emits the [checkStatusChange] event
-         * @param {?} item
-         * @return {?}
-         */
-            function (item) {
-                this.checkStatusChange.emit(item);
-            };
-        ItemComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'item',
-                        template: "\n    <label [class.container-checkbox]=\"checkbox\"\n           [class.container-selection]=\"!checkbox && !item.selected\"\n           [class.container-selection-selected]=\"!checkbox && item.selected\"\n           [id]=\"item.id\" (mousedown)=\"onItemClick(item)\">\n      {{needFormatNumber(item.text)? (item.text | number:'1.0-2') : item.text}}{{suffixText? suffixText : ''}}\n      <ng-container *ngIf=\"checkbox\">\n        <input type='checkbox' [id]=\"'checkbox-'+item.text\" (change)=\"onCheckStatusChange(item)\" [checked]=\"item.selected\">\n        <span class=\"checkmark\" [id]=\"'checkmark-'+item.text\"></span>\n      </ng-container>\n    </label>",
-                        styles: ["*,:after,:before{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.container-checkbox,.container-selection,.container-selection-selected,.dropdown-item{background:0 0;display:list-item;list-style:none;position:relative;width:100%;height:auto;cursor:pointer;color:#495057;padding-bottom:5px;padding-top:5px;padding-left:12px}.container-checkbox{padding-left:35px}.container-checkbox input{position:absolute;opacity:0;cursor:pointer}.container-checkbox .checkmark{position:absolute;top:5px;left:10px;height:15px;width:15px;border:1px solid rgba(0,0,0,.3);background-color:#fff;border-radius:4px}.container-checkbox .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:4px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.container-checkbox:hover input~.checkmark{background-color:#ccc}.container-checkbox input:checked~.checkmark{background-color:#2196f3;border:1px solid #2196f3}.container-checkbox input:checked~.checkmark:after{display:block}.container-checkbox:hover{color:#66afe9}.container-selection,.container-selection-selected{padding-left:12px}.container-selection-selected:hover,.container-selection:hover{color:#495057;background:#e0ffff}.container-selection-selected{color:#fff;background:#6495ed}"]
-                    }] }
-        ];
-        ItemComponent.propDecorators = {
-            checkbox: [{ type: core.Input }],
-            item: [{ type: core.Input }],
-            formatNumber: [{ type: core.Input }],
-            suffixText: [{ type: core.Input }],
-            itemClick: [{ type: core.Output }],
-            checkStatusChange: [{ type: core.Output }]
-        };
-        return ItemComponent;
-    }());
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var GroupItemComponent = /** @class */ (function () {
-        function GroupItemComponent() {
-        }
-        /**
-         * prevent all clicking event from happening
-         */
-        /**
-         * prevent all clicking event from happening
-         * @param {?} event
-         * @return {?}
-         */
-        GroupItemComponent.prototype.onItemGroupClick = /**
-         * prevent all clicking event from happening
-         * @param {?} event
-         * @return {?}
-         */
-            function (event) {
-                event.stopImmediatePropagation();
-                event.stopPropagation();
-                event.preventDefault();
-            };
-        GroupItemComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'group-item',
-                        template: "\n    <label class=\"dropdown-item dropdown-item-group\" (mousedown)=\"onItemGroupClick($event)\">{{item.group}}</label>\n  ",
-                        styles: ["*,:after,:before{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.container-checkbox,.container-selection,.container-selection-selected,.dropdown-item{background:0 0;display:list-item;list-style:none;position:relative;width:100%;height:auto;cursor:pointer;color:#495057;padding-bottom:5px;padding-top:5px;padding-left:12px}.container-checkbox{padding-left:35px}.container-checkbox input{position:absolute;opacity:0;cursor:pointer}.container-checkbox .checkmark{position:absolute;top:5px;left:10px;height:15px;width:15px;border:1px solid rgba(0,0,0,.3);background-color:#fff;border-radius:4px}.container-checkbox .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:4px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.container-checkbox:hover input~.checkmark{background-color:#ccc}.container-checkbox input:checked~.checkmark{background-color:#2196f3;border:1px solid #2196f3}.container-checkbox input:checked~.checkmark:after{display:block}.container-checkbox:hover{color:#66afe9}.container-selection,.container-selection-selected{padding-left:12px}.container-selection-selected:hover,.container-selection:hover{color:#495057;background:#e0ffff}.container-selection-selected{color:#fff;background:#6495ed}.dropdown-item-group{font-weight:700}.dropdown-item-group:hover{cursor:default}"]
-                    }] }
-        ];
-        GroupItemComponent.propDecorators = {
-            item: [{ type: core.Input }]
-        };
-        return GroupItemComponent;
-    }());
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var InputFilterComponent = /** @class */ (function () {
-        function InputFilterComponent() {
-            /**
-             * bind to [inputFilterBlur], emits with (blur) of filter input box
-             */
-            this.inputFilterBlur = new core.EventEmitter();
-            /**
-             * bind to [filterValueChange], for 2-way binding of filterValue
-             */
-            this.filterValueChange = new core.EventEmitter();
-        }
-        /**
-         * triggers with (blur) event, emits the (inputFilterBlur) event
-         */
-        /**
-         * triggers with (blur) event, emits the (inputFilterBlur) event
-         * @param {?} event
-         * @return {?}
-         */
-        InputFilterComponent.prototype.onFilterTextBlur = /**
-         * triggers with (blur) event, emits the (inputFilterBlur) event
-         * @param {?} event
-         * @return {?}
-         */
-            function (event) {
-                this.inputFilterBlur.emit(event);
-            };
-        /**
-         * triggers with (input) event, emits the (filterValueChange) event for 2-way binding of filterValue
-         */
-        /**
-         * triggers with (input) event, emits the (filterValueChange) event for 2-way binding of filterValue
-         * @return {?}
-         */
-        InputFilterComponent.prototype.onChange = /**
-         * triggers with (input) event, emits the (filterValueChange) event for 2-way binding of filterValue
-         * @return {?}
-         */
-            function () {
-                this.filterValueChange.emit(this.filterValue);
-            };
-        InputFilterComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'input-filter',
-                        template: "\n    <input type=\"text\" class=\"filter-box\" [(ngModel)]=\"filterValue\" (input)=\"onChange()\" (blur)=\"onFilterTextBlur($event)\">\n  ",
-                        styles: ["*,:after,:before{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.filter-box{width:calc(100% - 10px);height:28px;border-radius:4px;border:1px solid #ccc;margin:1px 5px 5px;padding-left:5px;font-size:12px;box-sizing:border-box;color:#495057}.filter-box:focus{outline:0;border-color:#ccc}"]
-                    }] }
-        ];
-        InputFilterComponent.propDecorators = {
-            filterValue: [{ type: core.Input }],
-            inputFilterBlur: [{ type: core.Output }],
-            filterValueChange: [{ type: core.Output }]
-        };
-        return InputFilterComponent;
-    }());
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var AnchorComponent = /** @class */ (function () {
-        function AnchorComponent(_decimalPipe) {
-            this._decimalPipe = _decimalPipe;
-            /**
-             * bind to [checkbox] for checking whether the clearance flag should be shown or not.
-             */
-            this.checkbox = false;
-            /**
-             * bind to [allowClear] for enabling the clearance (clearance is not avaiable when checkbox is enabled)
-             */
-            this.allowClear = true;
-            /**
-             * bind to [openStatus], it's the visibility status of dropdown, for showing the arrow on anchor
-             */
-            this.openStatus = false;
-            /**
-             * bind to [disabled] for disabling the anchor
-             */
-            this.disabled = false;
-            /**
-             * will be triggered when clicking the anchor
-             */
-            this.anchorClick = new core.EventEmitter();
-            /**
-             * will be triggered when clicking the clearance
-             */
-            this.clearanceClick = new core.EventEmitter();
-        }
-        Object.defineProperty(AnchorComponent.prototype, "showClearanceFlag", {
-            /**
-             * flag for showing the clearance flag
-             */
-            get: /**
-             * flag for showing the clearance flag
-             * @return {?}
-             */ function () {
-                return !this.checkbox && this.selectedText && this.allowClear;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(AnchorComponent.prototype, "anchorDisplayText", {
-            /**
-             * the text displays on anchor
-             */
-            get: /**
-             * the text displays on anchor
-             * @return {?}
-             */ function () {
-                /** @type {?} */
-                var anchorDisplayText = this.selectedText ? (this.formatNumber ? (isNumber(this.selectedText) ?
-                    this._decimalPipe.transform(this.selectedText, '1.0-2') : this.selectedText) :
-                    this.selectedText) + (this.suffixText ? this.suffixText : '') : this.placeHolder;
-                /** @type {?} */
-                var charLength = 1;
-                if (this.showClearanceFlag && this.anchorLength > 0) {
-                    charLength = Math.floor((this.anchorLength - 50) / 7);
-                }
-                else {
-                    charLength = Math.floor((this.anchorLength - 50) / 7);
-                }
-                if (anchorDisplayText.length > charLength) {
-                    anchorDisplayText = anchorDisplayText.slice(0, charLength - 2) + '...';
-                }
-                return anchorDisplayText;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(AnchorComponent.prototype, "anchorClass", {
-            /**
-             * anchor CSS class
-             */
-            get: /**
-             * anchor CSS class
-             * @return {?}
-             */ function () {
-                /** @type {?} */
-                var anchorClassStatusPart;
-                /** @type {?} */
-                var anchorClassFontColor;
-                if (this.disabled) {
-                    anchorClassStatusPart = 'selection-anchor-disabled';
-                    anchorClassFontColor = 'place-holder';
-                }
-                else {
-                    if (this.openStatus) {
-                        anchorClassStatusPart = 'selection-anchor-open';
-                    }
-                    else {
-                        anchorClassStatusPart = 'selection-anchor-close';
-                    }
-                    if (this.selectedText != null) {
-                        anchorClassFontColor = 'selected-item';
-                    }
-                    else {
-                        anchorClassFontColor = 'place-holder';
-                    }
-                }
-                return anchorClassStatusPart + " " + anchorClassFontColor;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        /**
-         * triggered when clicking the anchor
-         */
-        /**
-         * triggered when clicking the anchor
-         * @param {?} event
-         * @return {?}
-         */
-        AnchorComponent.prototype.onAnchorClick = /**
-         * triggered when clicking the anchor
-         * @param {?} event
-         * @return {?}
-         */
-            function (event) {
-                this.anchorClick.emit(event);
-            };
-        /**
-         * triggered with (blur) of anchor
-         */
-        /**
-         * triggered with (blur) of anchor
-         * @param {?} event
-         * @return {?}
-         */
-        AnchorComponent.prototype.onAnchorBlur = /**
-         * triggered with (blur) of anchor
-         * @param {?} event
-         * @return {?}
-         */
-            function (event) {
-                stopPropagationAndDefault(event);
-            };
-        /**
-         * triggered when clicking the clearance
-         */
-        /**
-         * triggered when clicking the clearance
-         * @param {?} event
-         * @return {?}
-         */
-        AnchorComponent.prototype.onClearanceClick = /**
-         * triggered when clicking the clearance
-         * @param {?} event
-         * @return {?}
-         */
-            function (event) {
-                this.clearanceClick.emit(event);
-            };
-        /**
-         * triggered when resizing, get the clientWidth of anchor
-         */
-        /**
-         * triggered when resizing, get the clientWidth of anchor
-         * @return {?}
-         */
-        AnchorComponent.prototype.onResize = /**
-         * triggered when resizing, get the clientWidth of anchor
-         * @return {?}
-         */
-            function () {
-                this.anchorLength = this.anchorRef ? this.anchorRef.nativeElement ? this.anchorRef.nativeElement.clientWidth : 0 : 0;
-            };
-        AnchorComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'anchor',
-                        template: "\n    <span #anchor tabindex=\"2\" [ngClass]=\"anchorClass\" (window:resize)=\"onResize()\"\n          (mousedown)=\"onAnchorClick($event)\" (blur)=\"onAnchorBlur($event)\"> {{anchorDisplayText}}\n      <span #selectionClearance class=\"selection-clearance\" (mousedown)=\"onClearanceClick($event)\" *ngIf=\"showClearanceFlag\">&times;</span>\n    </span>\n  ",
-                        providers: [common.DecimalPipe],
-                        styles: ["*,:after,:before{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.selection-anchor-close:after,.selection-anchor-disabled:after,.selection-anchor-open:after,.vertical-center{position:absolute;top:50%;transform:translateY(-50%)}.hover-box,.selection-anchor-close:hover{outline:0;box-shadow:0 0 6px #23adff;border-radius:4px}.anchor-box,.selection-anchor,.selection-anchor-close,.selection-anchor-disabled,.selection-anchor-open{height:100%;border-radius:4px;width:100%;position:relative;display:inline-block;padding:8px 12px 5px;border:1px solid;outline:0;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-sizing:border-box;white-space:nowrap}.selection-anchor,.selection-anchor-close,.selection-anchor-open{cursor:pointer}.selection-anchor .selection-clearance,.selection-anchor-close .selection-clearance,.selection-anchor-open .selection-clearance{position:absolute;right:35px;font-weight:700}.selection-anchor .selection-clearance:hover,.selection-anchor-close .selection-clearance:hover,.selection-anchor-open .selection-clearance:hover{color:#000}.selection-anchor-close:focus,.selection-anchor-open:focus,.selection-anchor:focus{box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;border-color:#66afe9}.selection-anchor-disabled{border-color:#ccc;cursor:default;pointer-events:none;background:#f8f8f8;filter:opacity(50%)}.selection-anchor-disabled:after{font-size:9px;content:'\\0025BC';right:10px;padding-bottom:3px}.selection-anchor-open{border-bottom:none;border-bottom-right-radius:0;border-bottom-left-radius:0;border-color:#66afe9}.selection-anchor-open:after{font-size:9px;content:'\\0025B2';right:10px;padding-bottom:3px}.selection-anchor-close{border-color:#ccc}.selection-anchor-close:after{font-size:9px;content:'\\0025BC';right:10px;padding-bottom:3px}.place-holder{color:#999}.selected-item{color:#495057}"]
-                    }] }
-        ];
-        /** @nocollapse */
-        AnchorComponent.ctorParameters = function () {
-            return [
-                { type: common.DecimalPipe }
-            ];
-        };
-        AnchorComponent.propDecorators = {
-            anchorRef: [{ type: core.ViewChild, args: ['anchor', { read: core.ElementRef },] }],
-            placeHolder: [{ type: core.Input }],
-            checkbox: [{ type: core.Input }],
-            suffixText: [{ type: core.Input }],
-            allowClear: [{ type: core.Input }],
-            formatNumber: [{ type: core.Input }],
-            selectedText: [{ type: core.Input }],
-            openStatus: [{ type: core.Input }],
-            disabled: [{ type: core.Input }],
-            anchorClick: [{ type: core.Output }],
-            clearanceClick: [{ type: core.Output }]
-        };
-        return AnchorComponent;
-    }());
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var DropdownComponent = /** @class */ (function () {
-        function DropdownComponent() {
-            /**
-             * bind to [checkbox], the flag for multi-select (checkbox) mode.
-             */
-            this.checkbox = false;
-            /**
-             * bind to [filterBox] for displaying the filter input text box
-             */
-            this.filterBox = false;
-            /**
-             * bind to [allowClear] for enabling the clearance (clearance is not avaiable when checkbox is enabled)
-             */
-            this.allowClear = true;
-            /**
-             * bind to [formatNumber] for show formatted number text
-             */
-            this.formatNumber = false;
-            /**
-             * for 2-way binding of [selectedValue]
-             */
-            this.selectedValueChange = new core.EventEmitter(true);
-            /**
-             * [selectionChange] event that will be triggered when changing of the selection
-             */
-            this.selectionChange = new core.EventEmitter(true);
-            /**
-             * [dropdownBlur] event that will be triggered with (blur) of dropdown
-             */
-            this.dropdownBlur = new core.EventEmitter();
-            /**
-             * [itemClick] event that will be triggered when clicking the option of dropdown
-             */
-            this.itemClick = new core.EventEmitter();
-            /**
-             * flag of clicking dropdown. It's to prevent (blur) of dropdown from happening in checkbox mode.
-             */
-            this._clickedItems = false;
-        }
-        /**
-         * @param {?} changes
-         * @return {?}
-         */
-        DropdownComponent.prototype.ngOnChanges = /**
-         * @param {?} changes
-         * @return {?}
-         */
-            function (changes) {
-                if (changes.items) {
-                    this._checkSelectionChange(changes.items.previousValue, changes.items.currentValue);
-                }
-            };
-        /**
-         * triggered when clicking the dropdown
-         */
-        /**
-         * triggered when clicking the dropdown
-         * @param {?} event
-         * @return {?}
-         */
-        DropdownComponent.prototype.onItemsClick = /**
-         * triggered when clicking the dropdown
-         * @param {?} event
-         * @return {?}
-         */
-            function (event) {
-                if (event.offsetX > (event.target.clientWidth + event.target.clientLeft)) {
-                    stopPropagationAndDefault(event);
-                    return;
-                }
-                // should ignore clicking on filter
-                if (this.checkbox && event.target.type !== 'text') {
-                    this._clickedItems = true;
-                }
-            };
-        /**
-         * triggered when clicking the item
-         */
-        /**
-         * triggered when clicking the item
-         * @param {?} currentItem
-         * @return {?}
-         */
-        DropdownComponent.prototype.onItemClick = /**
-         * triggered when clicking the item
-         * @param {?} currentItem
-         * @return {?}
-         */
-            function (currentItem) {
-                if (!this.checkbox) {
-                    this.selectedValue = this._getItemValue(currentItem); // currentItem.value != null ? currentItem.value : currentItem.text;
-                    clearAllSelection(this.items);
-                    // set the selection of current one
-                    currentItem.selected = true;
-                    this.itemClick.emit(currentItem);
-                    this._onSelectionChange(this.selectedValue);
-                }
-            };
-        /**
-         * triggers with (blur) event of filter input box
-         */
-        /**
-         * triggers with (blur) event of filter input box
-         * @param {?} event
-         * @return {?}
-         */
-        DropdownComponent.prototype.onFilterTextBlur = /**
-         * triggers with (blur) event of filter input box
-         * @param {?} event
-         * @return {?}
-         */
-            function (event) {
-                this.dropdownBlur.emit(event);
-            };
-        /**
-         * triggers with (blur) event of dropdown
-         */
-        /**
-         * triggers with (blur) event of dropdown
-         * @param {?} event
-         * @return {?}
-         */
-        DropdownComponent.prototype.onItemsBlur = /**
-         * triggers with (blur) event of dropdown
-         * @param {?} event
-         * @return {?}
-         */
-            function (event) {
-                if (this.checkbox) {
-                    if (this._clickedItems) {
-                        // in checkbox mode, this blur event will be ignored when clicking the dropdown (check the checkbox)
-                        event.target.focus();
-                        this._clickedItems = false;
-                        return;
-                    }
-                }
-                this.dropdownBlur.emit(event);
-            };
-        /**
-         * toggle the selection when checking status changed (in checkbox mode)
-         */
-        /**
-         * toggle the selection when checking status changed (in checkbox mode)
-         * @param {?} item
-         * @return {?}
-         */
-        DropdownComponent.prototype.toggleSelection = /**
-         * toggle the selection when checking status changed (in checkbox mode)
-         * @param {?} item
-         * @return {?}
-         */
-            function (item) {
-                item.selected = !item.selected;
-                this.selectionChange.emit(this._getItemValue(item)); // item.value != null ? item.value : item.text);
-            };
-        Object.defineProperty(DropdownComponent.prototype, "itemsValues", {
-            /**
-             * items values list after applying the filter
-             */
-            get: /**
-             * items values list after applying the filter
-             * @return {?}
-             */ function () {
-                /** @type {?} */
-                var filter;
-                if (this.filterValue) {
-                    filter = this.filterValue.toUpperCase();
-                }
-                if (filter == null) {
-                    return this.items;
-                }
-                if (!this.items || this.items.length === 0) {
-                    return [];
-                }
-                if (hasGroup(this.items)) {
-                    /** @type {?} */
-                    var items_1 = [];
-                    this.items.forEach(( /**
-                     * @param {?} groupItem
-                     * @return {?}
-                     */function (groupItem) {
-                        if (groupItem.group != null && groupItem.group.toString().toUpperCase().includes(filter)) {
-                            // if groupItem contains the filters, the groupItem needs to be displayed as well
-                            items_1.push(groupItem);
-                        }
-                        else {
-                            /** @type {?} */
-                            var filteredItems = groupItem.items.filter(( /**
-                             * @param {?} item
-                             * @return {?}
-                             */function (item) { return item.text != null && item.text.toString().toUpperCase().includes(filter); }));
-                            if (filteredItems && filteredItems.length > 0) {
-                                items_1.push({ group: groupItem.group, items: filteredItems });
-                            }
-                        }
-                    }));
-                    return items_1;
-                }
-                else {
-                    return this.items.filter(( /**
-                     * @param {?} item
-                     * @return {?}
-                     */function (item) { return (item.text != null && item.text.toString().toUpperCase().includes(filter)); }));
-                }
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(DropdownComponent.prototype, "optionsClass", {
-            /**
-             * options CSS class
-             */
-            get: /**
-             * options CSS class
-             * @return {?}
-             */ function () {
-                if (this.filterBox && !this.checkbox) {
-                    return 'options with-filter';
-                }
-                else {
-                    return 'options no-filter';
-                }
-            },
-            enumerable: true,
-            configurable: true
-        });
-        /**
-         * get item value. Return text if value is not available
-         */
-        /**
-         * get item value. Return text if value is not available
-         * @private
-         * @param {?} item
-         * @return {?}
-         */
-        DropdownComponent.prototype._getItemValue = /**
-         * get item value. Return text if value is not available
-         * @private
-         * @param {?} item
-         * @return {?}
-         */
-            function (item) {
-                return item ? item.value != null ? item.value : item.text : undefined;
-            };
-        /**
-         * selection changed, emits events: (selectedValueChange) and (selectionChange);
-         */
-        /**
-         * selection changed, emits events: (selectedValueChange) and (selectionChange);
-         * @private
-         * @param {?} value
-         * @return {?}
-         */
-        DropdownComponent.prototype._onSelectionChange = /**
-         * selection changed, emits events: (selectedValueChange) and (selectionChange);
-         * @private
-         * @param {?} value
-         * @return {?}
-         */
-            function (value) {
-                this.selectedValueChange.emit(value);
-                this.selectionChange.emit(value);
-            };
-        /**
-         * check whether the selection is changed. Emits relative events when if changed.
-         */
-        /**
-         * check whether the selection is changed. Emits relative events when if changed.
-         * @private
-         * @param {?} previousValue
-         * @param {?} currentValue
-         * @return {?}
-         */
-        DropdownComponent.prototype._checkSelectionChange = /**
-         * check whether the selection is changed. Emits relative events when if changed.
-         * @private
-         * @param {?} previousValue
-         * @param {?} currentValue
-         * @return {?}
-         */
-            function (previousValue, currentValue) {
-                /** @type {?} */
-                var curSelectedItem = getFirstSelectedItem(currentValue);
-                /** @type {?} */
-                var lastSelectedItem = getFirstSelectedItem(previousValue);
-                /** @type {?} */
-                var curSelectedItemId = curSelectedItem ? curSelectedItem.id : undefined;
-                /** @type {?} */
-                var lastSelectedItemId = lastSelectedItem ? lastSelectedItem.id : undefined;
-                if (curSelectedItemId !== lastSelectedItemId && !this.checkbox) {
-                    this._onSelectionChange(this._getItemValue(curSelectedItem));
-                }
-            };
-        DropdownComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'dropdown',
-                        template: "\n    <span #dropdown class=\"dropdown\" tabindex=\"3\" (mousedown)=\"onItemsClick($event)\" (blur)=\"onItemsBlur($event)\" *ngIf=\"!disabled\" >\n      <input-filter #filterInput tabindex=\"4\" *ngIf=\"filterBox && !checkbox\" [(filterValue)]=\"filterValue\" (inputFilterBlur)=\"onFilterTextBlur($event)\"></input-filter>\n      <span #selectionOptions [ngClass]=\"optionsClass\">\n        <ng-container *ngFor=\"let item of itemsValues\" >\n          <ng-container *ngIf=\"item && item.group\">\n            <group-item [item]=\"item\"></group-item>\n            <item *ngFor=\"let subItem of item.items\" (itemClick)=\"onItemClick(subItem)\" (checkStatusChange)=\"toggleSelection(subItem)\"\n                  [item]=\"subItem\" [checkbox]=\"checkbox\" [formatNumber]=\"formatNumber\" [suffixText]=\"suffixText\">\n            </item>\n          </ng-container>\n          <ng-container *ngIf=\"item && !item.group\">\n            <item (itemClick)=\"onItemClick(item)\" (checkStatusChange)=\"toggleSelection(item)\"\n                  [item]=\"item\" [checkbox]=\"checkbox\" [formatNumber]=\"formatNumber\" [suffixText]=\"suffixText\">\n            </item>\n          </ng-container>\n        </ng-container>\n      </span>\n    </span>\n  ",
-                        styles: ["*,:after,:before{font-size:inherit;font-weight:inherit;font-family:inherit;box-sizing:inherit;background:inherit}.dropdown{width:100%;padding:0;display:none;margin:0;border:1px solid #66afe9;border-top:none;border-bottom:none;border-top-right-radius:0;border-top-left-radius:0;box-sizing:border-box;position:relative;z-index:999}.dropdown:focus{outline:0}.dropdown .options{width:calc(100% + 2px);left:0;box-sizing:border-box;background:#fff;position:absolute;max-height:228px;overflow-y:auto;overflow-x:hidden;border:1px solid #66afe9;border-top:none;border-bottom-right-radius:4px;border-bottom-left-radius:4px;margin-left:-1px;margin-right:-1px}.dropdown .with-filter{top:32px}.dropdown .no-filter{top:0}"]
-                    }] }
-        ];
-        DropdownComponent.propDecorators = {
-            dropdownRef: [{ type: core.ViewChild, args: ['dropdown', { read: core.ElementRef },] }],
-            filterInputRef: [{ type: core.ViewChild, args: ['filterInput', { read: core.ElementRef },] }],
-            placeHolder: [{ type: core.Input }],
-            items: [{ type: core.Input }],
-            checkbox: [{ type: core.Input }],
-            selectedValue: [{ type: core.Input }],
-            filterBox: [{ type: core.Input }],
-            suffixText: [{ type: core.Input }],
-            disabled: [{ type: core.Input }],
-            allowClear: [{ type: core.Input }],
-            formatNumber: [{ type: core.Input }],
-            selectedValueChange: [{ type: core.Output }],
-            selectionChange: [{ type: core.Output }],
-            dropdownBlur: [{ type: core.Output }],
-            itemClick: [{ type: core.Output }]
-        };
-        return DropdownComponent;
-    }());
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var DropdownListModule = /** @class */ (function () {
-        function DropdownListModule() {
-        }
-        DropdownListModule.decorators = [
-            { type: core.NgModule, args: [{
-                        declarations: [
-                            DropdownListComponent,
-                            ItemComponent,
-                            GroupItemComponent,
-                            InputFilterComponent,
-                            AnchorComponent,
-                            DropdownComponent
-                        ],
-                        exports: [DropdownListComponent],
-                        imports: [common.CommonModule, forms.FormsModule],
-                        providers: [],
-                        bootstrap: [],
-                    },] }
-        ];
-        return DropdownListModule;
-    }());
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-
-    exports.DropdownListComponent = DropdownListComponent;
-    exports.DropdownListModule = DropdownListModule;
-    exports.ɵd = AnchorComponent;
-    exports.ɵe = DropdownComponent;
-    exports.ɵc = InputFilterComponent;
-    exports.ɵb = GroupItemComponent;
-    exports.ɵa = ItemComponent;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
-
-//# sourceMappingURL=ngx-dropdown-list.umd.js.map