@easyquery/ui 7.2.3 → 7.2.4-rc01

package/dist/lib/utils/popup_menu.js

@@ -1,1261 +1,1260 @@
-import { i18n } from '@easydata/core';
-import { utils as dataUtils } from '@easydata/core';
-import { domel } from '@easydata/ui';
-import { getElementAbsolutePos, getScrollPos, getWinSize, getViewportSize } from '@easydata/ui';
-import { browserUtils } from './browser_utils';
-import { findHighestZIndex } from './utils';
-var MenuLevel = /** @class */ (function () {
-    function MenuLevel(options) {
-        this.isFilteringMode = false;
-        this.showSelected = false;
-        //menu, items, levelIndex
-        this.parentMenu = options.menu || null;
-        this.parentLevel = options.parent || null;
-        this.parentElement = options.container || document.body;
-        this.levelIndex = options.levelIndex || 0;
-        this.levelDiv = null;
-        this.domWriteItemsId = options.domWriteItemsId || false;
-        this.menuId = options.menuId || '';
-        this.itemRenderedCallback = options.itemRenderedCallback || null;
-        //we need to define special "apply" item for this level
-        this._applyItem = { id: null, text: null, itemDiv: null };
-        this.items = options.items || [];
-        this.activeItem = null;
-        this.selectedItem = null;
-        this.initialized = false;
-        this.showSelected = options.showSelected;
-        this.updated = 0;
-        this.renderContent();
-    }
-    Object.defineProperty(MenuLevel.prototype, "applyItem", {
-        get: function () {
-            return this._applyItem;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(MenuLevel.prototype, "cssPrefix", {
-        get: function () {
-            return 'eqjs-menu';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    MenuLevel.prototype.getItems = function () {
-        return this.items;
-    };
-    MenuLevel.prototype.setItems = function (items) {
-        this.items = items;
-    };
-    MenuLevel.prototype.renderContent = function () {
-        var _this = this;
-        if (!this.items) {
-            return;
-        }
-        var self = this;
-        //define internal variables used in this function
-        var itemBgColor = this.parentMenu.style.colors.bgON || "white";
-        var itemFgColor = this.parentMenu.style.colors.fgON || "black";
-        var itemOverBgColor = this.parentMenu.style.colors.bgOVER || "LightSteelBlue";
-        var itemFontFamily = this.parentMenu.style.itemStyle.fontFamily || "";
-        var itemFontSize = this.parentMenu.style.itemStyle.fontSize || "14px";
-        var multiselect = this.parentMenu.options.multiselect;
-        var isSubQuery = this.parentMenu.options.isSubQuery;
-        //add base DIV element which is also used to show the shadow
-        var baseDivBuilder = domel('div')
-            .addClass(browserUtils.getMobileCssClass());
-        if (this.parentMenu.options.useDefaultStyles) {
-            baseDivBuilder
-                .setStyle('backgroundColor', itemBgColor)
-                .setStyle('border', '1px solid')
-                .setStyle('borderColor', itemBgColor)
-                .setStyle('backgroundColor', this.parentMenu.style.colors.border)
-                .setStyle('margin', '-2px 2px 2px -2px')
-                .setStyle('width', 'auto')
-                .setStyle('height', 'auto');
-        }
-        baseDivBuilder
-            .setStyle('z-index', this.parentMenu.zIndex)
-            .setStyle('position', 'absolute')
-            .setStyle('display', 'none');
-        var baseDiv = baseDivBuilder.toDOM();
-        baseDiv['menuLevel'] = this;
-        var applyItem = this._applyItem;
-        //if multiselect option is on - then we should add special "apply" item
-        if (multiselect && this.levelIndex === 0 && this.parentMenu.options.hideButtons !== true) {
-            var applyDiv = document.createElement("div");
-            applyDiv.classList.add(this.cssPrefix + "-applyDiv");
-            applyDiv['menuItem'] = applyItem;
-            this.applyBtn = document.createElement('button');
-            if (this.parentMenu.options.useDefaultStyles) {
-                applyDiv.style.borderBottom = '1px solid';
-                applyDiv.style.padding = '5px';
-                applyDiv.style.marginBottom = '5px';
-                this.applyBtn.style.padding = '0 5px';
-                this.applyBtn.style.cursor = "pointer";
-            }
-            var applyTextNode = document.createTextNode(this.parentMenu.options.buttons.submit);
-            this.applyBtn.appendChild(applyTextNode);
-            applyDiv.appendChild(this.applyBtn);
-            //cancel btn
-            var cancelBtn = document.createElement('button');
-            cancelBtn.classList.add(this.cssPrefix + "-cancel");
-            if (this.parentMenu.options.useDefaultStyles) {
-                cancelBtn.style.padding = '0 5px';
-                cancelBtn.style.cursor = 'pointer';
-                cancelBtn.style.marginLeft = '15px';
-            }
-            var cancelText = document.createTextNode(this.parentMenu.options.buttons.cancel);
-            cancelBtn.appendChild(cancelText);
-            applyDiv.appendChild(cancelBtn);
-            baseDiv.appendChild(applyDiv);
-            applyItem.itemDiv = applyDiv;
-            this.applyBtn.addEventListener('click', function () {
-                _this.submit(_this._applyItem);
-            });
-            cancelBtn.addEventListener('click', function () {
-                _this.parentMenu.hideMenu();
-            });
-        }
-        // if too many items - then we add a special "search" item
-        // or there is an options to show always
-        if (this.parentLevel == null
-            && (this.parentMenu.options.searchBoxAlwaysShown || this.items.length >= this.parentMenu.options.showSearchBoxAfter)) {
-            var searchDivBuilder = domel('div')
-                .addClass(this.cssPrefix + "-searchDiv");
-            if (this.parentMenu.options.useDefaultStyles) {
-                searchDivBuilder
-                    .setStyle('border-bottom', '1px solid #666')
-                    .setStyle('background-color', itemBgColor)
-                    .setStyle('border-color', this.parentMenu.style.colors.border);
-                if (itemFontFamily != "") {
-                    searchDivBuilder.setStyle('font-family', itemFontFamily);
-                }
-                searchDivBuilder
-                    .setStyle('font-size', itemFontSize)
-                    .setStyle('color', itemFgColor)
-                    .setStyle('cursor', 'pointer')
-                    .setStyle('text-align', 'left')
-                    .setStyle('padding', '5px');
-            }
-            var searchEditBoxBuilder = domel('input')
-                .id('searchBox')
-                .name('searchBox')
-                .type('text')
-                .size(16)
-                .addClass(this.cssPrefix + "-searchBox")
-                .on('input', function (ev) {
-                _this.deactivateItem(_this.activeItem);
-                _this.renderItems(_this.searchBox.value);
-            })
-                .on('keydown', function (ev) {
-                var keyCode = ev.keyCode;
-                switch (keyCode) {
-                    case 13: //enter
-                        if (_this.activeItem) {
-                            _this.activeItem.itemDiv.click();
-                        }
-                        break;
-                    case 38: // up
-                        _this.moveActiveItemUp();
-                        break;
-                    case 40: // down
-                        _this.moveActiveItemDown();
-                        break;
-                    case 39: // right
-                        if (!_this.searchBox.value) {
-                            _this.openSubLevel(_this.activeItem);
-                        }
-                        break;
-                }
-            });
-            if (this.parentMenu.options.useDefaultStyles) {
-                searchEditBoxBuilder
-                    .setStyle('font-family', 'monospace')
-                    .setStyle('font-size', '8pt')
-                    .setStyle('width', '100%');
-            }
-            if (isSubQuery) {
-                searchEditBoxBuilder.addClass('eqjs-dialog');
-            }
-            this.searchBox = searchEditBoxBuilder.toDOM();
-            this.searchDiv = searchDivBuilder.toDOM();
-            this.searchDiv.appendChild(this.searchBox);
-            baseDiv.appendChild(this.searchDiv);
-        }
-        var scrollDiv = document.createElement("div");
-        scrollDiv.tabIndex = 1;
-        domel(scrollDiv)
-            .addClass(this.cssPrefix + "-scrollDiv")
-            .addClass(browserUtils.getMobileCssClass());
-        scrollDiv.style.overflowX = "hidden";
-        scrollDiv.style.overflowY = "auto";
-        scrollDiv.style.position = "relative";
-        baseDiv.appendChild(scrollDiv);
-        this.levelDiv = baseDiv;
-        this.scrollDiv = scrollDiv;
-        if (this.menuId) {
-            this.levelDiv.id = this.menuId;
-        }
-        if (this.parentLevel) {
-            this.levelDiv.style.zIndex
-                = this.parentLevel.levelDiv.style.zIndex;
-        }
-        this.renderItems();
-        var scrollDivKeyDownHandler = function (event) {
-            switch (event.which) {
-                case 13: // enter
-                    if (_this.parentMenu.options.multiselect) {
-                        _this.parentMenu.getRootLevel().applyBtn.click();
-                    }
-                    else {
-                        if (_this.activeItem) {
-                            _this.activeItem.itemDiv.click();
-                        }
-                    }
-                    break;
-                case 32: // space
-                    if (_this.activeItem) {
-                        _this.activeItem.itemDiv.click();
-                    }
-                    break;
-                case 37: // left
-                    if (_this.parentLevel && !_this.isFilteringMode) {
-                        _this.deactivateItem(_this.activeItem);
-                        _this.parentLevel.focus();
-                    }
-                    break;
-                case 39: // right
-                    _this.openSubLevel(_this.activeItem);
-                    break;
-                case 38: // up
-                    _this.moveActiveItemUp();
-                    break;
-                case 40: // down
-                    _this.moveActiveItemDown();
-                    break;
-                default: return; // exit this handler for other keys
-            }
-            event.preventDefault(); // prevent the default action (scroll / move caret)            
-        };
-        scrollDiv.addEventListener("keydown", scrollDivKeyDownHandler);
-        if (browserUtils.isMobileMode()) {
-            this.closeDiv =
-                domel('div', baseDiv)
-                    .addClass('eqjs-menu-close-btn')
-                    .addText(i18n.getText('ButtonClose'))
-                    .on('click', function () {
-                    _this.parentMenu.hideMenu();
-                })
-                    .toDOM();
-        }
-    };
-    MenuLevel.prototype.moveActiveItemDown = function () {
-        var items = this.isFilteringMode ? this.filteredItems : this.items;
-        if (this.activeItem) {
-            var idx = items.indexOf(this.activeItem);
-            if (idx < items.length - 1) {
-                this.activateItem(items[idx + 1], false);
-            }
-        }
-        else {
-            this.activateItem(items[0], false);
-        }
-    };
-    MenuLevel.prototype.moveActiveItemUp = function () {
-        var items = this.isFilteringMode ? this.filteredItems : this.items;
-        if (this.activeItem) {
-            var idx = items.indexOf(this.activeItem);
-            if (idx > 0) {
-                this.activateItem(items[idx - 1], false);
-            }
-        }
-        else {
-            this.activateItem(items[items.length - 1], false);
-        }
-    };
-    MenuLevel.prototype.openSubLevel = function (menuItem) {
-        if (menuItem && menuItem.items && !this.isFilteringMode) {
-            this.showSubLevel(menuItem);
-            menuItem.subLevel.activateItem(menuItem.subLevel.items[0]);
-        }
-    };
-    MenuLevel.prototype.focusScrollDiv = function () {
-        this.scrollDiv.focus();
-    };
-    MenuLevel.prototype.turnCheckboxes = function (items) {
-        //turn checkboxes on for selected items
-        for (var i = 0; i < items.length; i++) {
-            var item = items[i];
-            if (item.itemCheckbox)
-                item.itemCheckbox.checked = this.isItemSelected(item);
-            if (item.items) {
-                this.turnCheckboxes(item.items);
-            }
-        }
-    };
-    MenuLevel.prototype.isItemSelected = function (item) {
-        if (item.items) {
-            for (var i = 0; i < item.items.length; i++) {
-                if (this.isItemSelected(item.items[i])) {
-                    return true;
-                }
-            }
-            return false;
-        }
-        else {
-            return item.selected;
-        }
-    };
-    MenuLevel.prototype.setItemSelected = function (item, value) {
-        if (item.items) {
-            for (var i = 0; i < item.items.length; i++) {
-                this.setItemSelected(item.items[i], value);
-            }
-        }
-        else {
-            item.selected = value;
-        }
-    };
-    MenuLevel.prototype.submitItems = function (items, selectedItems) {
-        for (var j = 0; j < items.length; j++) {
-            if (items[j].items) {
-                this.submitItems(items[j].items, selectedItems);
-            }
-            else {
-                if (items[j].selected) {
-                    selectedItems.push(items[j]);
-                }
-            }
-        }
-    };
-    MenuLevel.prototype.allSubitemsAreFiltered = function (items, filterCallback) {
-        for (var i = 0; i < items.length; i++) {
-            if (filterCallback(items[i]))
-                return false;
-        }
-        return true;
-    };
-    MenuLevel.prototype.isItemDiv = function (element) {
-        return element['menuItem'] ? true : false;
-    };
-    MenuLevel.prototype.isLevelDiv = function (element) {
-        return element['menuLevel'] ? true : false;
-    };
-    MenuLevel.prototype.getMenuItem = function (element) {
-        var el = element;
-        while (!this.isItemDiv(el)) {
-            if (this.isLevelDiv(el)) {
-                throw "Can't get menu item";
-            }
-            el = el.parentElement;
-        }
-        return el['menuItem'];
-    };
-    MenuLevel.prototype.renderItemsWithoutFilter = function () {
-        var _this = this;
-        this.isFilteringMode = false;
-        var scrollDiv = this.scrollDiv;
-        var multiselect = this.parentMenu.options.multiselect;
-        var activateOnMouseOver = this.parentMenu.options.activateOnMouseOver;
-        var itemFgColor = this.parentMenu.style.colors.fgON || 'black';
-        var itemOverBgColor = this.parentMenu.style.colors.bgOVER || 'LightSteelBlue';
-        var itemFontSize = this.parentMenu.style.itemStyle.fontSize || '14px';
-        var itemFilterCallback = this.parentMenu.getItemFilterCallback();
-        scrollDiv.innerHTML = "";
-        for (var i = 0; i < this.items.length; i++) {
-            var item = this.items[i];
-            if (!item || !item.text)
-                continue;
-            if (itemFilterCallback) {
-                if (!itemFilterCallback(item))
-                    continue;
-                if (item.items && this.allSubitemsAreFiltered(item.items, itemFilterCallback))
-                    continue;
-            }
-            item.data = function (propName) {
-                return _this[propName];
-            };
-            if (typeof (item.selected) == "undefined") {
-                item.selected = false;
-            }
-            if (item.selected && this.selectedItem == null) {
-                this.selectedItem = item;
-            }
-            var itemDiv = document.createElement("div");
-            domel(itemDiv)
-                .addClass(this.cssPrefix + "-itemDiv")
-                .addClass(browserUtils.getMobileCssClass());
-            if (item.selected && this.showSelected && !multiselect) {
-                itemDiv.classList.add(this.cssPrefix + "-selected");
-            }
-            ;
-            if (this.domWriteItemsId && this.menuId) {
-                itemDiv.id = 'item-' + this.menuId + '-' + item.id;
-            }
-            scrollDiv.appendChild(itemDiv);
-            itemDiv['menuItem'] = item;
-            itemDiv['menuLevel'] = this;
-            item.itemDiv = itemDiv;
-            if (this.parentMenu.options.useDefaultStyles) {
-                itemDiv.style.fontSize = itemFontSize;
-                itemDiv.style.color = itemFgColor;
-                itemDiv.style.paddingLeft = "15px";
-                itemDiv.style.paddingRight = "6px";
-                itemDiv.style.cursor = "pointer";
-            }
-            if (item.text == '---') {
-                itemDiv.appendChild(document.createElement('hr'));
-            }
-            else {
-                if (multiselect) {
-                    var cb = document.createElement("input");
-                    cb.type = "checkbox";
-                    cb.id = "cb" + item.id;
-                    cb.checked = this.isItemSelected(item);
-                    cb.defaultChecked = this.isItemSelected(item);
-                    itemDiv.appendChild(cb);
-                    item.itemCheckbox = cb;
-                    if (this.parentMenu.options.useDefaultStyles) {
-                        cb.style.margin = "4px 10px 0 0";
-                        cb.style.verticalAlign = "top";
-                    }
-                }
-                var itemText = item.text;
-                if (this.parentMenu.options.showItemIds) {
-                    itemText = item.id + ':' + itemText;
-                }
-                var itemTextNode = document.createTextNode(itemText);
-                itemDiv.appendChild(itemTextNode);
-                if (item.items && item.items.length > 0) {
-                    itemDiv.classList.add(this.cssPrefix + "-itemDiv-hasChildren");
-                    var arrowSpan = document.createElement('span');
-                    arrowSpan.classList.add(this.cssPrefix + "-itemDiv-arrow");
-                    itemDiv.appendChild(arrowSpan);
-                    var arrowText = document.createTextNode('>');
-                    arrowSpan.appendChild(arrowText);
-                }
-                var itemClickHandler = function (ev) {
-                    var menuItem = _this.getMenuItem(ev.target);
-                    if (multiselect) {
-                        if (!menuItem.items || ev.target == menuItem.itemCheckbox) {
-                            var itemSelected = _this.isItemSelected(menuItem);
-                            _this.setItemSelected(menuItem, !itemSelected);
-                            menuItem.itemCheckbox.checked = !itemSelected;
-                            _this.parentMenu.refreshCheckboxes();
-                        }
-                        else {
-                            _this.activateItem(menuItem);
-                        }
-                    }
-                    else {
-                        _this.activateItem(menuItem);
-                        _this.submit(menuItem);
-                    }
-                    return false;
-                };
-                itemDiv.removeEventListener("click", itemClickHandler);
-                itemDiv.addEventListener('click', itemClickHandler);
-                itemDiv.addEventListener('mouseenter', function (ev) {
-                    var item = _this.getMenuItem(ev.target);
-                    _this.parentMenu.isCursorInside = true;
-                    if (activateOnMouseOver) {
-                        _this.activateItem(item);
-                    }
-                });
-                itemDiv.addEventListener('mouseleave', function (ev) {
-                    var item = _this.getMenuItem(ev.target);
-                    _this.parentMenu.isCursorInside = false;
-                    setTimeout(function () {
-                        if (!_this.parentMenu.isCursorInside) {
-                            if (activateOnMouseOver && item == _this.activeItem && !item.subLevel) {
-                                _this.deactivateItem(item);
-                            }
-                        }
-                    }, 200);
-                });
-            }
-            if (this.itemRenderedCallback) {
-                this.itemRenderedCallback(this.menuId, itemDiv);
-            }
-        }
-    };
-    MenuLevel.prototype.renderItemsWithFilter = function (filter) {
-        this.isFilteringMode = true;
-        var scrollDiv = this.scrollDiv;
-        scrollDiv.innerHTML = "";
-        var filterSections = filter.split('>');
-        var pureFilterTexts = filterSections.map(function (section) { return section.replace(/\*/g, ''); });
-        var items = this.filterItems(this.items, filterSections);
-        this.filteredItems = [];
-        for (var i = 0; i < items.length; i++) {
-            this.renderItemWithFilter(items[i], pureFilterTexts, 0);
-        }
-    };
-    MenuLevel.prototype.matchesFilter = function (text, regexp) {
-        if (text && regexp) {
-            return regexp.test(text);
-        }
-        else {
-            return true;
-        }
-    };
-    MenuLevel.prototype.filterItems = function (items, filterSections) {
-        var resultItems = [];
-        var filter = filterSections.length > 0 ? filterSections[0] : '';
-        var restFilterSections = filterSections.length > 1 ? filterSections.slice(1) : filterSections;
-        var filterRegexp = filter ? new RegExp(filter.replace(/\*/g, '.+?'), 'i') : null;
-        for (var i = 0; i < items.length; i++) {
-            var item = items[i];
-            if (item.items) {
-                var groupItem = dataUtils.assign({}, item);
-                var groupItemMatches = this.matchesFilter(item.text, filterRegexp);
-                //if we have only one filter section (or an empty filter)
-                if (filterSections.length < 2) {
-                    //if current group item matches the filter -> show all sub-items
-                    if (groupItemMatches && filterSections.length < 2) {
-                        groupItem.items = dataUtils.createArrayFrom(item.items);
-                    }
-                    else {
-                        groupItem.items = this.filterItems(item.items, restFilterSections);
-                    }
-                }
-                //if we have more than 1 filter section and there is a match -> filter sub-items as well
-                else if (groupItemMatches) {
-                    groupItem.items = this.filterItems(item.items, restFilterSections);
-                }
-                //otherwise we skip this group at all
-                else {
-                    groupItem.items = [];
-                }
-                if (groupItem.items.length > 0) {
-                    resultItems.push(groupItem);
-                }
-            }
-            else {
-                if (this.matchesFilter(item.text, filterRegexp)) {
-                    resultItems.push(item);
-                }
-            }
-        }
-        return resultItems;
-    };
-    MenuLevel.prototype.renderItemWithFilter = function (item, filterTexts, level) {
-        var _this = this;
-        var scrollDiv = this.scrollDiv;
-        var levelFilterText = level < filterTexts.length ? filterTexts[level] : filterTexts[filterTexts.length - 1];
-        var multiselect = this.parentMenu.options.multiselect;
-        var activateOnMouseOver = this.parentMenu.options.activateOnMouseOver;
-        var itemFgColor = this.parentMenu.style.colors.fgON || 'black';
-        var itemOverBgColor = this.parentMenu.style.colors.bgOVER || 'LightSteelBlue';
-        var itemFontSize = this.parentMenu.style.itemStyle.fontSize || '14px';
-        var itemFilterCallback = this.parentMenu.getItemFilterCallback();
-        if (!item || !item.text)
-            return;
-        if (itemFilterCallback) {
-            if (!itemFilterCallback(item))
-                return;
-            if (item.items && this.allSubitemsAreFiltered(item.items, itemFilterCallback))
-                return;
-        }
-        item.data = function (propName) {
-            return this[propName];
-        };
-        if (typeof (item.selected) == "undefined") {
-            item.selected = false;
-        }
-        if (item.selected && this.selectedItem == null) {
-            this.selectedItem = item;
-        }
-        var itemDiv = document.createElement("div");
-        domel(itemDiv)
-            .addClass(this.cssPrefix + "-itemDiv")
-            .addClass(browserUtils.getMobileCssClass());
-        itemDiv.style.marginLeft = level * 10 + "px";
-        if (item.selected && !multiselect) {
-            itemDiv.classList.add(this.cssPrefix + "-selected");
-        }
-        ;
-        if (this.domWriteItemsId && this.menuId) {
-            itemDiv.id = 'item-' + this.menuId + '-' + item.id;
-        }
-        scrollDiv.appendChild(itemDiv);
-        itemDiv['menuItem'] = item;
-        itemDiv['menuLevel'] = this;
-        item.itemDiv = itemDiv;
-        if (this.parentMenu.options.useDefaultStyles) {
-            itemDiv.style.fontSize = itemFontSize;
-            itemDiv.style.color = itemFgColor;
-            itemDiv.style.paddingLeft = "15px";
-            itemDiv.style.paddingRight = "6px";
-            itemDiv.style.cursor = "pointer";
-        }
-        if (item.text == '---') {
-            itemDiv.appendChild(document.createElement('hr'));
-        }
-        else {
-            if (multiselect) {
-                var cb = document.createElement("input");
-                cb.type = "checkbox";
-                cb.id = "cb" + item.id;
-                cb.checked = this.isItemSelected(item);
-                cb.defaultChecked = this.isItemSelected(item);
-                itemDiv.appendChild(cb);
-                item.itemCheckbox = cb;
-                if (this.parentMenu.options.useDefaultStyles) {
-                    cb.style.margin = "4px 10px 0 0";
-                    cb.style.verticalAlign = "top";
-                }
-            }
-            var itemText = document.createElement('span');
-            itemText.innerHTML = this.highlightText(item.text, levelFilterText);
-            itemDiv.appendChild(itemText);
-            if (item.items && item.items.length > 0) {
-                itemDiv.classList.add(this.cssPrefix + "-itemDiv-filter-hasChildren");
-            }
-            else {
-                this.filteredItems.push(item);
-                var itemClickHandler = function (event) {
-                    if (multiselect) {
-                        if (!item.items || event.target == item.itemCheckbox) {
-                            var itemSelected = _this.isItemSelected(item);
-                            _this.setItemSelected(item, !itemSelected);
-                            item.itemCheckbox.checked = !itemSelected;
-                            _this.parentMenu.refreshCheckboxes();
-                        }
-                        else {
-                            _this.activateItem(item);
-                        }
-                    }
-                    else {
-                        _this.activateItem(item);
-                        _this.submit(item);
-                    }
-                    return false;
-                };
-                itemDiv.removeEventListener("click", itemClickHandler);
-                itemDiv.addEventListener('click', itemClickHandler);
-                itemDiv.addEventListener('mouseenter', function (ev) {
-                    ;
-                    _this.parentMenu.isCursorInside = true;
-                    if (activateOnMouseOver) {
-                        _this.activateItem(item);
-                    }
-                });
-                itemDiv.addEventListener('mouseleave', function (ev) {
-                    _this.parentMenu.isCursorInside = false;
-                    setTimeout(function () {
-                        if (!_this.parentMenu.isCursorInside) {
-                            if (activateOnMouseOver && item == _this.activeItem && !item.subLevel) {
-                                _this.deactivateItem(item);
-                            }
-                        }
-                    }, 200);
-                });
-            }
-        }
-        if (item.items) {
-            for (var i = 0; i < item.items.length; i++) {
-                this.renderItemWithFilter(item.items[i], filterTexts, level + 1);
-            }
-        }
-        if (this.itemRenderedCallback) {
-            this.itemRenderedCallback(this.menuId, itemDiv);
-        }
-    };
-    MenuLevel.prototype.highlightText = function (content, text) {
-        if (text && text.length > 0) {
-            var lowerText = text.toLowerCase();
-            var lowerContent = content.toLowerCase();
-            var insertValue1 = "<span class='eqjs-menu-itemDiv-highlight'>";
-            var insertValue2 = "</span>";
-            var startIndex = lowerContent.indexOf(lowerText);
-            if (startIndex >= 0) {
-                var pos = 0;
-                var value = content;
-                var indexInMas = [];
-                while (true) {
-                    var index = lowerContent.indexOf(lowerText, pos);
-                    if (index >= 0) {
-                        indexInMas.push(index);
-                        pos = index + text.length;
-                    }
-                    else {
-                        pos++;
-                    }
-                    if (pos >= value.length - 1) {
-                        break;
-                    }
-                }
-                if (indexInMas.length > 0) {
-                    content = '';
-                    for (var i = 0; i < indexInMas.length; i++) {
-                        if (i === 0) {
-                            content += value.substring(0, indexInMas[i]);
-                        }
-                        content += insertValue1 + value.substring(indexInMas[i], indexInMas[i] + text.length) + insertValue2;
-                        if (i < indexInMas.length - 1) {
-                            content += value.substring(indexInMas[i] + text.length, indexInMas[i + 1]);
-                        }
-                        else {
-                            content += value.substring(indexInMas[i] + text.length);
-                        }
-                    }
-                }
-            }
-        }
-        return content;
-    };
-    MenuLevel.prototype.renderItems = function (filter) {
-        if (!filter && !browserUtils.isMobileMode()) {
-            this.renderItemsWithoutFilter();
-        }
-        else {
-            filter = filter || '';
-            this.renderItemsWithFilter(filter.toLowerCase());
-        }
-    };
-    MenuLevel.prototype.activateItem = function (menuItem, openSubLevel) {
-        if (openSubLevel === void 0) { openSubLevel = true; }
-        if (this.activeItem != null) {
-            this.deactivateItem(this.activeItem);
-        }
-        this.activeItem = menuItem;
-        var rowElement = menuItem.itemDiv;
-        rowElement.classList.add('active');
-        if (this.parentMenu.options.useDefaultStyles) {
-            var itemBgColor = this.parentMenu.style.colors.bgON;
-            var itemFgColor = this.parentMenu.style.colors.fgON;
-            var itemOverBgColor = this.parentMenu.style.colors.bgOVER;
-            var itemOverFgColor = this.parentMenu.style.colors.fgOVER || "";
-            var itemClass = this.parentMenu.style.itemClass || "";
-            var itemClassOver = this.parentMenu.style.itemClassOver || "";
-            if (itemClassOver != "") {
-                rowElement.style.backgroundColor = "";
-                rowElement.style.color = "";
-            }
-            else {
-                rowElement.style.backgroundColor = itemOverBgColor;
-                rowElement.style.color = itemOverFgColor;
-            }
-        }
-        if (menuItem.items && !this.isFilteringMode && openSubLevel) {
-            this.showSubLevel(menuItem);
-        }
-    };
-    MenuLevel.prototype.deactivateItem = function (menuItem) {
-        if (!menuItem)
-            return;
-        var rowElement = menuItem.itemDiv;
-        rowElement.classList.remove('active');
-        if (this.parentMenu.options.useDefaultStyles) {
-            var itemBgColor = this.parentMenu.style.colors.bgON;
-            var itemFgColor = this.parentMenu.style.colors.fgON;
-            var itemClass = this.parentMenu.style.itemClass || "";
-            if (itemClass != "") {
-                rowElement.style.backgroundColor = "";
-                rowElement.style.color = "";
-            }
-            else {
-                rowElement.style.backgroundColor = itemBgColor;
-                rowElement.style.color = itemFgColor;
-            }
-        }
-        if (menuItem.subLevel) {
-            menuItem.subLevel.hide();
-        }
-        this.activeItem = null;
-    };
-    MenuLevel.prototype.showSubLevel = function (menuItem) {
-        if (!menuItem.subLevel) {
-            var levelId = '';
-            if (this.menuId) {
-                levelId = this.menuId + "-" + menuItem.id;
-            }
-            menuItem.subLevel = new MenuLevel({
-                showSelected: this.showSelected,
-                menu: this.parentMenu,
-                parent: this,
-                container: this.parentElement,
-                items: menuItem.items,
-                levelIndex: this.levelIndex + 1,
-                domWriteItemsId: this.domWriteItemsId,
-                menuId: levelId,
-                itemRenderedCallback: this.itemRenderedCallback
-            });
-        }
-        var pos = getElementAbsolutePos(menuItem.itemDiv);
-        var scroll = getScrollPos();
-        var winSize = getWinSize();
-        //show menu to the side that have more space available
-        var leftSpace = pos.x - scroll.left;
-        var rightSpace = winSize.width - leftSpace - menuItem.itemDiv.offsetWidth;
-        pos.x += menuItem.itemDiv.offsetParent.offsetWidth;
-        pos.y += 1;
-        menuItem.subLevel.showAt(pos.x, pos.y, true, true);
-        menuItem.subLevel.levelDiv.style.width = '';
-        menuItem.subLevel.levelDiv.style.right = '';
-        if ((rightSpace >= menuItem.subLevel.levelDiv.offsetWidth) || (rightSpace >= leftSpace)) { //show level to the right
-            if (rightSpace < menuItem.subLevel.levelDiv.offsetWidth) {
-                menuItem.subLevel.levelDiv.style.right = -scroll.left + 'px';
-            }
-        }
-        else { //show level to the left
-            if (leftSpace < menuItem.subLevel.levelDiv.offsetWidth) {
-                menuItem.subLevel.levelDiv.style.left = scroll.left + 4 + 'px';
-            }
-            else {
-                menuItem.subLevel.levelDiv.style.left = '';
-            }
-            menuItem.subLevel.levelDiv.style.right = getViewportSize().width - pos.x + menuItem.itemDiv.offsetWidth - 6 + 'px';
-        }
-        menuItem.subLevel.levelDiv.style.visibility = 'visible';
-        menuItem.subLevel.focus();
-    };
-    MenuLevel.prototype.adjustTopPos = function (top) {
-        var winSize = getWinSize();
-        var levelBottom = top - getScrollPos().top + this.levelDiv.offsetHeight;
-        var res = top;
-        if (levelBottom > winSize.height - 5) {
-            res -= levelBottom - winSize.height + 5;
-            if (res < getScrollPos().top) {
-                res = getScrollPos().top + 10;
-            }
-        }
-        return res;
-    };
-    MenuLevel.prototype.showAt = function (x, y, adjustTopPos, hidden) {
-        if (!this.items) {
-            return;
-        }
-        this.initLevelDiv();
-        //crocodile
-        this.turnCheckboxes(this.items);
-        this.renderItems();
-        var levelStyle = this.levelDiv.style;
-        if (hidden) {
-            this.levelDiv.style.visibility = 'hidden';
-        }
-        levelStyle.display = 'block';
-        levelStyle.left = x + 'px';
-        levelStyle.top = y + 'px';
-        this.scrollDiv.style.width = "auto";
-        this.scrollDiv.style.height = "auto";
-        //adjusting level top position
-        if (adjustTopPos) {
-            y = this.adjustTopPos(y);
-            levelStyle.top = y + 'px';
-        }
-        //setting minimal level width if it is defined
-        var minItemWidth = this.parentMenu.minItemWidth;
-        if (minItemWidth > 0 && this.scrollDiv.offsetWidth < minItemWidth) {
-            for (var i = 0; i < this.items.length; i++) {
-                this.items[i].itemDiv.style.width = minItemWidth + "px";
-            }
-        }
-        var maxItemWidth = this.parentMenu.maxItemWidth;
-        if (maxItemWidth > 0 && this.scrollDiv.offsetWidth > maxItemWidth) {
-            for (var i = 0; i < this.items.length; i++) {
-                this.items[i].itemDiv.style.width = maxItemWidth + "px";
-                this.items[i].itemDiv.style.overflowX = "hidden";
-            }
-        }
-        var winSize = getWinSize();
-        //adjustinng maximum height of the menu level if it does not fit to browser window
-        var maxHeight = winSize.height - (y - getScrollPos().top) - 15; //document.documentElement.scrollTop
-        if (this.parentMenu.maxHeight > 0 && maxHeight > this.parentMenu.maxHeight) {
-            maxHeight = this.parentMenu.maxHeight;
-        }
-        if (this._applyItem != null && this._applyItem.itemDiv != null) {
-            maxHeight -= this._applyItem.itemDiv.offsetHeight + 5;
-        }
-        if (this.searchDiv != null) {
-            maxHeight -= this.searchDiv.offsetHeight;
-        }
-        if (this.closeDiv != null) {
-            maxHeight -= this.closeDiv.offsetHeight;
-        }
-        if (this.levelDiv.offsetHeight > maxHeight) {
-            var newHeight = maxHeight;
-            if (newHeight < 50) {
-                newHeight = 50;
-            }
-            this.scrollDiv.style.height = newHeight + "px";
-        }
-        else {
-            this.scrollDiv.style.height = "auto";
-        }
-        this.activeItem = null;
-    };
-    MenuLevel.prototype.focus = function () {
-        var _this = this;
-        window.setTimeout(function () {
-            _this.scrollDiv.focus();
-            if (_this.searchBox != null) {
-                if (_this.parentMenu.options.searchBoxAutoFocus) {
-                    _this.searchBox.focus();
-                }
-                _this.searchBox.value = "";
-            }
-        }, 100);
-    };
-    MenuLevel.prototype.hide = function () {
-        if (this.activeItem !== null) {
-            if (this.activeItem.subLevel) {
-                this.activeItem.subLevel.hide();
-            }
-        }
-        if (this.levelDiv) {
-            var levelStyle = this.levelDiv.style;
-            levelStyle.display = 'none';
-            if (this.initialized) {
-                this.parentElement.removeChild(this.levelDiv);
-                this.initialized = false;
-            }
-        }
-    };
-    MenuLevel.prototype.initLevelDiv = function () {
-        if (!this.initialized) {
-            this.parentElement.appendChild(this.levelDiv);
-            domel(this.levelDiv)
-                .addClass(this.cssPrefix + "-levelDiv")
-                .addClass(browserUtils.getMobileCssClass());
-            this.initialized = true;
-        }
-    };
-    MenuLevel.prototype.submit = function (menuItem) {
-        if (menuItem != null) {
-            if (!menuItem.items) {
-                this.parentMenu.hideMenu();
-                var selectedItems = [];
-                if (menuItem == this._applyItem) {
-                    this.submitItems(this.items, selectedItems);
-                }
-                this.parentMenu.submitMenu(menuItem, selectedItems);
-            }
-        }
-    };
-    MenuLevel.prototype.remove = function () {
-        //remove old level elements
-        for (var i = 0; i < this.items.length; i++) {
-            var item = this.items[i];
-            if (item.subLevel) {
-                item.subLevel.remove();
-            }
-        }
-        if (this.levelDiv) {
-            this.levelDiv.innerHTML = "";
-            var parentNode = this.levelDiv.parentNode;
-            if (parentNode != null) {
-                parentNode.removeChild(this.levelDiv);
-            }
-        }
-        this.levelDiv = null;
-    };
-    MenuLevel.prototype.update = function (newItems) {
-        this.remove();
-        //create new level
-        this.items = newItems;
-        this.activeItem = null;
-        this.selectedItem = null;
-        this._applyItem.itemDiv = null;
-        this.initialized = false;
-        this.updated++;
-        this.renderContent();
-    };
-    MenuLevel.prototype.refreshCheckboxes = function () {
-        for (var i = 0; i < this.items.length; i++) {
-            var item = this.items[i];
-            if (item.itemCheckbox) {
-                item.itemCheckbox.checked = this.isItemSelected(item);
-            }
-            if (item.subLevel) {
-                item.subLevel.refreshCheckboxes();
-            }
-        }
-    };
-    MenuLevel.prototype.refreshItems = function () {
-        for (var i = 0; i < this.items.length; i++) {
-            var item = this.items[i];
-            if (item.itemDiv) {
-                if (item.hidden) {
-                    item.itemDiv.style.display = "none";
-                }
-                else {
-                    item.itemDiv.style.display = "block";
-                }
-            }
-            if (item.subLevel) {
-                item.subLevel.refreshItems();
-            }
-        }
-    };
-    MenuLevel.prototype.findItem = function (searchedText) {
-        var txt = searchedText.toLowerCase();
-        for (var i = 0; i < this.items.length; i++) {
-            var item = this.items[i];
-            if (item.text.toLowerCase().indexOf(txt) == 0) {
-                return item;
-            }
-        }
-        return null;
-    };
-    return MenuLevel;
-}());
-var PopupMenu = /** @class */ (function () {
-    function PopupMenu(options) {
-        var _this = this;
-        this.isCursorInside = false;
-        this.mouseIsOverBlock = false;
-        this.mouseIsOverLink = false;
-        this.toId = null;
-        this.active = false;
-        this.ancorFocused = null;
-        this.options = {
-            items: [],
-            buttons: {
-                submit: i18n.getText('ButtonApply'),
-                cancel: i18n.getText('ButtonCancel')
-            },
-            itemFilterCallback: null,
-            useDefaultStyles: false,
-            multiselect: false,
-            adjustHeight: true,
-            showSearchBoxAfter: 30,
-            activateOnMouseOver: true,
-            container: document.body,
-            domWriteItemsId: false,
-            itemRenderedCallback: null,
-            showItemIds: false
-        };
-        if (options) {
-            dataUtils.assignDeep(this.options, options);
-        }
-        if (this.options.hideButtons) {
-            this.options.submitOnBlur = true;
-        }
-        this.menuId = PopupMenu.lastMenuID++;
-        this.updateProps();
-        this.rootLevel = new MenuLevel({
-            menu: this,
-            items: this.options.items,
-            levelIndex: 0,
-            container: this.options.container,
-            domWriteItemsId: this.options.domWriteItemsId,
-            menuId: this.options.id,
-            itemRenderedCallback: this.options.itemRenderedCallback,
-            showSelected: this.options.showSelected,
-        });
-        this.rootLevel.levelDiv.classList.add(this.cssPrefix + "-rootLevel");
-        if (this.options.zIndex)
-            this.rootLevel.levelDiv.style.zIndex = "" + this.options.zIndex;
-        this.menuKeyUpHandler = function (e) {
-            if (e.which == 27) {
-                _this.hideMenu();
-                e.stopImmediatePropagation();
-            }
-        };
-        this.globalMouseDownHandler = function (e) {
-            if (!_this.active)
-                return true;
-            var event = window.event || e;
-            var o = event.srcElement || event.target;
-            var isOutside = true;
-            while (o) {
-                if (o.tagName && o.tagName.toLowerCase() == 'div') {
-                    // it is added in renderContent of MenuLevel class
-                    if (o.menuLevel) {
-                        if (o.menuLevel.parentMenu == _this) {
-                            isOutside = false;
-                            break;
-                        }
-                    }
-                }
-                o = o.parentNode || o.parentElement;
-            }
-            if (isOutside) {
-                if (_this.options.submitOnBlur) {
-                    _this.rootLevel.submit(_this.rootLevel.applyItem);
-                }
-                _this.hideMenu();
-            }
-            return true;
-        };
-        this.render();
-    }
-    Object.defineProperty(PopupMenu.prototype, "cssPrefix", {
-        get: function () {
-            return 'eqjs-menu';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    PopupMenu.prototype.getItems = function () {
-        return this.rootLevel.getItems();
-    };
-    PopupMenu.prototype.updateProps = function () {
-        this.style = {};
-        this.style.colors = { border: "#666666", shadow: "#888888", bgON: "white", fgON: "black", bgOVER: "#B6BDD2", fgOVER: "black" };
-        this.style.itemStyle = { fontSize: "14px" };
-        this.minItemWidth = 0;
-        this.maxItemWidth = 0;
-        this.maxHeight = 0;
-        this.zIndex = "" + this.options.zIndex;
-        this.commandTemplate = "";
-        this.args = [];
-        this.active = false;
-    };
-    PopupMenu.prototype.render = function () {
-    };
-    PopupMenu.prototype.clearItemsMenuProps = function (items) {
-        if (!items)
-            return;
-        for (var i = 0; i < items.length; i++) {
-            this.clearItemMenuProps(items[i]);
-        }
-    };
-    PopupMenu.prototype.clearItemMenuProps = function (item) {
-        //don't clear properties they belong this menu
-        if (item.subLevel && item.subLevel.parentMenu == this)
-            return;
-        if (item.subLevel) {
-            item.subLevel.remove();
-            item.subLevel = null;
-        }
-        if (item.itemDiv) {
-            item.itemDiv = null;
-        }
-        if (item.items) {
-            this.clearItemsMenuProps(item.items);
-        }
-    };
-    PopupMenu.prototype.setSelectedItems = function (items, selectedIds) {
-        var itemsLength = items ? items.length : 0;
-        for (var i = 0; i < itemsLength; i++) {
-            var item = items[i];
-            if (item.items) {
-                this.setSelectedItems(item.items, selectedIds);
-            }
-            else {
-                item.selected = selectedIds.indexOf(item.id) >= 0;
-            }
-        }
-    };
-    PopupMenu.prototype.getRootLevel = function () {
-        return this.rootLevel;
-    };
-    PopupMenu.prototype.getItemFilterCallback = function () {
-        return this.itemFilterCallback;
-    };
-    PopupMenu.prototype.showMenu = function (options) {
-        this.ancorFocused = options.anchor == document.activeElement ? options.anchor : null;
-        this.clearItemsMenuProps(this.options.items);
-        this.itemSelectedCallback = options.itemSelectedCallback || null;
-        this.menuClosedCallback = options.menuClosedCallback || null;
-        this.itemFilterCallback = options.itemFilterCallback || null;
-        if (options.items) {
-            this.options.items = options.items;
-            this.rootLevel.setItems(options.items);
-        }
-        if (options.onMenuItemSelected) {
-            this.options.onMenuItemSelected = options.onMenuItemSelected;
-        }
-        var selectedIds = options.selectedIds || null;
-        if (selectedIds) {
-            if (typeof selectedIds === "string") {
-                selectedIds = selectedIds.split(",");
-            }
-        }
-        else {
-            selectedIds = [];
-        }
-        this.active = true;
-        this.setSelectedItems(this.options.items, selectedIds);
-        if (browserUtils.isMobileMode()) {
-            this.rootLevel.showAt(0, 0, true, true);
-            this.rootLevel.levelDiv.style.top = '0px';
-            this.rootLevel.levelDiv.style.bottom = '0px';
-            this.rootLevel.levelDiv.style.right = '0px';
-            this.rootLevel.levelDiv.style.position = 'fixed';
-            this.rootLevel.levelDiv.style.fontSize = '20px';
-        }
-        else {
-            var anchor = options.anchor || document.documentElement;
-            var srcPos = getElementAbsolutePos(anchor);
-            var anchorHeight = anchor.offsetHeight;
-            var anchorWidth = anchor.offsetHeight;
-            var pos = {
-                x: srcPos.x,
-                y: srcPos.y + anchorHeight + 2
-            };
-            var scroll_1 = getScrollPos();
-            var winSize = getWinSize();
-            //show menu to the side that have more space available
-            var leftSpace = pos.x + anchorWidth - scroll_1.left;
-            var rightSpace = winSize.width - leftSpace + anchorWidth;
-            pos.x += 2;
-            this.rootLevel.showAt(pos.x, pos.y, true, true);
-            this.rootLevel.levelDiv.style.width = '';
-            this.rootLevel.levelDiv.style.right = '';
-            if (!this.rootLevel.levelDiv.style.zIndex) {
-                // z-index is at least 10000 and more if anchor has bigger
-                this.rootLevel.levelDiv.style.zIndex = "" + Math.max(10000, findHighestZIndex(anchor) + 1);
-            }
-            if ((rightSpace >= this.rootLevel.levelDiv.offsetWidth) || (rightSpace >= leftSpace)) {
-                //show level to the right
-                if (rightSpace < this.rootLevel.levelDiv.offsetWidth) {
-                    this.rootLevel.levelDiv.style.right = -scroll_1.left + 'px';
-                }
-            }
-            else {
-                //show level to the left
-                if (leftSpace < this.rootLevel.levelDiv.offsetWidth) {
-                    this.rootLevel.levelDiv.style.left = scroll_1.left + 4 + 'px';
-                }
-                else {
-                    this.rootLevel.levelDiv.style.left = '';
-                }
-                this.rootLevel.levelDiv.style.right = getViewportSize().width - pos.x - anchorWidth + 'px';
-            }
-            this.rootLevel.levelDiv.style.fontSize = '14px';
-        }
-        this.rootLevel.levelDiv.style.visibility = 'visible';
-        this.rootLevel.focus();
-        document.addEventListener('keyup', this.menuKeyUpHandler);
-        document.addEventListener('mousedown', this.globalMouseDownHandler, true);
-    };
-    PopupMenu.prototype.hideMenu = function () {
-        document.removeEventListener('mousedown', this.globalMouseDownHandler, true);
-        document.removeEventListener('keyup', this.menuKeyUpHandler);
-        this.rootLevel.hide();
-        if (this.ancorFocused) {
-            this.ancorFocused.focus();
-        }
-        if (this.menuClosedCallback) {
-            this.menuClosedCallback();
-        }
-    };
-    PopupMenu.prototype.submitMenu = function (menuItem, selectedItems) {
-        if (this.itemSelectedCallback) {
-            this.itemSelectedCallback(menuItem, selectedItems);
-        }
-    };
-    PopupMenu.prototype.knockMenuStyle = function (menu) {
-        menu.removeAttribute('style');
-        var ul = menu.querySelectorAll('ul').item(0);
-        var hasUlStyle = ul && ul.style ? true : false;
-        if (hasUlStyle !== false) {
-            ul.setAttribute('style', '');
-        }
-    };
-    PopupMenu.prototype.refreshItems = function () {
-        this.rootLevel.refreshItems();
-    };
-    PopupMenu.prototype.refreshCheckboxes = function () {
-        this.rootLevel.refreshCheckboxes();
-    };
-    PopupMenu.lastMenuID = 0;
-    return PopupMenu;
-}());
-export { PopupMenu };
+import { i18n } from '@easydata/core';
+import { utils as dataUtils } from '@easydata/core';
+import { domel } from '@easydata/ui';
+import { getElementAbsolutePos, getScrollPos, getWinSize, getViewportSize } from '@easydata/ui';
+import { browserUtils } from './browser_utils';
+import { findHighestZIndex } from './utils';
+var MenuLevel = /** @class */ (function () {
+    function MenuLevel(options) {
+        this.isFilteringMode = false;
+        this.showSelected = false;
+        //menu, items, levelIndex
+        this.parentMenu = options.menu || null;
+        this.parentLevel = options.parent || null;
+        this.parentElement = options.container || document.body;
+        this.levelIndex = options.levelIndex || 0;
+        this.levelDiv = null;
+        this.domWriteItemsId = options.domWriteItemsId || false;
+        this.menuId = options.menuId || '';
+        this.itemRenderedCallback = options.itemRenderedCallback || null;
+        //we need to define special "apply" item for this level
+        this._applyItem = { id: null, text: null, itemDiv: null };
+        this.items = options.items || [];
+        this.activeItem = null;
+        this.selectedItem = null;
+        this.initialized = false;
+        this.showSelected = options.showSelected;
+        this.updated = 0;
+        this.renderContent();
+    }
+    Object.defineProperty(MenuLevel.prototype, "applyItem", {
+        get: function () {
+            return this._applyItem;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MenuLevel.prototype, "cssPrefix", {
+        get: function () {
+            return 'eqjs-menu';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    MenuLevel.prototype.getItems = function () {
+        return this.items;
+    };
+    MenuLevel.prototype.setItems = function (items) {
+        this.items = items;
+    };
+    MenuLevel.prototype.renderContent = function () {
+        var _this = this;
+        if (!this.items) {
+            return;
+        }
+        var self = this;
+        //define internal variables used in this function
+        var itemBgColor = this.parentMenu.style.colors.bgON || "white";
+        var itemFgColor = this.parentMenu.style.colors.fgON || "black";
+        var itemOverBgColor = this.parentMenu.style.colors.bgOVER || "LightSteelBlue";
+        var itemFontFamily = this.parentMenu.style.itemStyle.fontFamily || "";
+        var itemFontSize = this.parentMenu.style.itemStyle.fontSize || "14px";
+        var multiselect = this.parentMenu.options.multiselect;
+        var isSubQuery = this.parentMenu.options.isSubQuery;
+        //add base DIV element which is also used to show the shadow
+        var baseDivBuilder = domel('div')
+            .addClass(browserUtils.getMobileCssClass());
+        if (this.parentMenu.options.useDefaultStyles) {
+            baseDivBuilder
+                .setStyle('backgroundColor', itemBgColor)
+                .setStyle('border', '1px solid')
+                .setStyle('borderColor', itemBgColor)
+                .setStyle('backgroundColor', this.parentMenu.style.colors.border)
+                .setStyle('margin', '-2px 2px 2px -2px')
+                .setStyle('width', 'auto')
+                .setStyle('height', 'auto');
+        }
+        baseDivBuilder
+            .setStyle('z-index', this.parentMenu.zIndex)
+            .setStyle('position', 'absolute')
+            .setStyle('display', 'none');
+        var baseDiv = baseDivBuilder.toDOM();
+        baseDiv['menuLevel'] = this;
+        var applyItem = this._applyItem;
+        //if multiselect option is on - then we should add special "apply" item
+        if (multiselect && this.levelIndex === 0 && this.parentMenu.options.hideButtons !== true) {
+            var applyDiv = document.createElement("div");
+            applyDiv.classList.add("".concat(this.cssPrefix, "-applyDiv"));
+            applyDiv['menuItem'] = applyItem;
+            this.applyBtn = document.createElement('button');
+            if (this.parentMenu.options.useDefaultStyles) {
+                applyDiv.style.borderBottom = '1px solid';
+                applyDiv.style.padding = '5px';
+                applyDiv.style.marginBottom = '5px';
+                this.applyBtn.style.padding = '0 5px';
+                this.applyBtn.style.cursor = "pointer";
+            }
+            var applyTextNode = document.createTextNode(this.parentMenu.options.buttons.submit);
+            this.applyBtn.appendChild(applyTextNode);
+            applyDiv.appendChild(this.applyBtn);
+            //cancel btn
+            var cancelBtn = document.createElement('button');
+            cancelBtn.classList.add("".concat(this.cssPrefix, "-cancel"));
+            if (this.parentMenu.options.useDefaultStyles) {
+                cancelBtn.style.padding = '0 5px';
+                cancelBtn.style.cursor = 'pointer';
+                cancelBtn.style.marginLeft = '15px';
+            }
+            var cancelText = document.createTextNode(this.parentMenu.options.buttons.cancel);
+            cancelBtn.appendChild(cancelText);
+            applyDiv.appendChild(cancelBtn);
+            baseDiv.appendChild(applyDiv);
+            applyItem.itemDiv = applyDiv;
+            this.applyBtn.addEventListener('click', function () {
+                _this.submit(_this._applyItem);
+            });
+            cancelBtn.addEventListener('click', function () {
+                _this.parentMenu.hideMenu();
+            });
+        }
+        // if too many items - then we add a special "search" item
+        // or there is an options to show always
+        if (this.parentLevel == null
+            && (this.parentMenu.options.searchBoxAlwaysShown || this.items.length >= this.parentMenu.options.showSearchBoxAfter)) {
+            var searchDivBuilder = domel('div')
+                .addClass("".concat(this.cssPrefix, "-searchDiv"));
+            if (this.parentMenu.options.useDefaultStyles) {
+                searchDivBuilder
+                    .setStyle('border-bottom', '1px solid #666')
+                    .setStyle('background-color', itemBgColor)
+                    .setStyle('border-color', this.parentMenu.style.colors.border);
+                if (itemFontFamily != "") {
+                    searchDivBuilder.setStyle('font-family', itemFontFamily);
+                }
+                searchDivBuilder
+                    .setStyle('font-size', itemFontSize)
+                    .setStyle('color', itemFgColor)
+                    .setStyle('cursor', 'pointer')
+                    .setStyle('text-align', 'left')
+                    .setStyle('padding', '5px');
+            }
+            var searchEditBoxBuilder = domel('input')
+                .id('searchBox')
+                .name('searchBox')
+                .type('text')
+                .size(16)
+                .addClass("".concat(this.cssPrefix, "-searchBox"))
+                .on('input', function (ev) {
+                _this.deactivateItem(_this.activeItem);
+                _this.renderItems(_this.searchBox.value);
+            })
+                .on('keydown', function (ev) {
+                var keyCode = ev.keyCode;
+                switch (keyCode) {
+                    case 13: //enter
+                        if (_this.activeItem) {
+                            _this.activeItem.itemDiv.click();
+                        }
+                        break;
+                    case 38: // up
+                        _this.moveActiveItemUp();
+                        break;
+                    case 40: // down
+                        _this.moveActiveItemDown();
+                        break;
+                    case 39: // right
+                        if (!_this.searchBox.value) {
+                            _this.openSubLevel(_this.activeItem);
+                        }
+                        break;
+                }
+            });
+            if (this.parentMenu.options.useDefaultStyles) {
+                searchEditBoxBuilder
+                    .setStyle('font-family', 'monospace')
+                    .setStyle('font-size', '8pt')
+                    .setStyle('width', '100%');
+            }
+            if (isSubQuery) {
+                searchEditBoxBuilder.addClass('eqjs-dialog');
+            }
+            this.searchBox = searchEditBoxBuilder.toDOM();
+            this.searchDiv = searchDivBuilder.toDOM();
+            this.searchDiv.appendChild(this.searchBox);
+            baseDiv.appendChild(this.searchDiv);
+        }
+        var scrollDiv = document.createElement("div");
+        scrollDiv.tabIndex = 1;
+        domel(scrollDiv)
+            .addClass("".concat(this.cssPrefix, "-scrollDiv"))
+            .addClass(browserUtils.getMobileCssClass());
+        scrollDiv.style.overflowX = "hidden";
+        scrollDiv.style.overflowY = "auto";
+        scrollDiv.style.position = "relative";
+        baseDiv.appendChild(scrollDiv);
+        this.levelDiv = baseDiv;
+        this.scrollDiv = scrollDiv;
+        if (this.menuId) {
+            this.levelDiv.id = this.menuId;
+        }
+        if (this.parentLevel) {
+            this.levelDiv.style.zIndex
+                = this.parentLevel.levelDiv.style.zIndex;
+        }
+        this.renderItems();
+        var scrollDivKeyDownHandler = function (event) {
+            switch (event.which) {
+                case 13: // enter
+                    if (_this.parentMenu.options.multiselect) {
+                        _this.parentMenu.getRootLevel().applyBtn.click();
+                    }
+                    else {
+                        if (_this.activeItem) {
+                            _this.activeItem.itemDiv.click();
+                        }
+                    }
+                    break;
+                case 32: // space
+                    if (_this.activeItem) {
+                        _this.activeItem.itemDiv.click();
+                    }
+                    break;
+                case 37: // left
+                    if (_this.parentLevel && !_this.isFilteringMode) {
+                        _this.deactivateItem(_this.activeItem);
+                        _this.parentLevel.focus();
+                    }
+                    break;
+                case 39: // right
+                    _this.openSubLevel(_this.activeItem);
+                    break;
+                case 38: // up
+                    _this.moveActiveItemUp();
+                    break;
+                case 40: // down
+                    _this.moveActiveItemDown();
+                    break;
+                default: return; // exit this handler for other keys
+            }
+            event.preventDefault(); // prevent the default action (scroll / move caret)            
+        };
+        scrollDiv.addEventListener("keydown", scrollDivKeyDownHandler);
+        if (browserUtils.isMobileMode()) {
+            this.closeDiv =
+                domel('div', baseDiv)
+                    .addClass('eqjs-menu-close-btn')
+                    .addText(i18n.getText('ButtonClose'))
+                    .on('click', function () {
+                    _this.parentMenu.hideMenu();
+                })
+                    .toDOM();
+        }
+    };
+    MenuLevel.prototype.moveActiveItemDown = function () {
+        var items = this.isFilteringMode ? this.filteredItems : this.items;
+        if (this.activeItem) {
+            var idx = items.indexOf(this.activeItem);
+            if (idx < items.length - 1) {
+                this.activateItem(items[idx + 1], false);
+            }
+        }
+        else {
+            this.activateItem(items[0], false);
+        }
+    };
+    MenuLevel.prototype.moveActiveItemUp = function () {
+        var items = this.isFilteringMode ? this.filteredItems : this.items;
+        if (this.activeItem) {
+            var idx = items.indexOf(this.activeItem);
+            if (idx > 0) {
+                this.activateItem(items[idx - 1], false);
+            }
+        }
+        else {
+            this.activateItem(items[items.length - 1], false);
+        }
+    };
+    MenuLevel.prototype.openSubLevel = function (menuItem) {
+        if (menuItem && menuItem.items && !this.isFilteringMode) {
+            this.showSubLevel(menuItem);
+            menuItem.subLevel.activateItem(menuItem.subLevel.items[0]);
+        }
+    };
+    MenuLevel.prototype.focusScrollDiv = function () {
+        this.scrollDiv.focus();
+    };
+    MenuLevel.prototype.turnCheckboxes = function (items) {
+        //turn checkboxes on for selected items
+        for (var i = 0; i < items.length; i++) {
+            var item = items[i];
+            if (item.itemCheckbox)
+                item.itemCheckbox.checked = this.isItemSelected(item);
+            if (item.items) {
+                this.turnCheckboxes(item.items);
+            }
+        }
+    };
+    MenuLevel.prototype.isItemSelected = function (item) {
+        if (item.items) {
+            for (var i = 0; i < item.items.length; i++) {
+                if (this.isItemSelected(item.items[i])) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        else {
+            return item.selected;
+        }
+    };
+    MenuLevel.prototype.setItemSelected = function (item, value) {
+        if (item.items) {
+            for (var i = 0; i < item.items.length; i++) {
+                this.setItemSelected(item.items[i], value);
+            }
+        }
+        else {
+            item.selected = value;
+        }
+    };
+    MenuLevel.prototype.submitItems = function (items, selectedItems) {
+        for (var j = 0; j < items.length; j++) {
+            if (items[j].items) {
+                this.submitItems(items[j].items, selectedItems);
+            }
+            else {
+                if (items[j].selected) {
+                    selectedItems.push(items[j]);
+                }
+            }
+        }
+    };
+    MenuLevel.prototype.allSubitemsAreFiltered = function (items, filterCallback) {
+        for (var i = 0; i < items.length; i++) {
+            if (filterCallback(items[i]))
+                return false;
+        }
+        return true;
+    };
+    MenuLevel.prototype.isItemDiv = function (element) {
+        return element['menuItem'] ? true : false;
+    };
+    MenuLevel.prototype.isLevelDiv = function (element) {
+        return element['menuLevel'] ? true : false;
+    };
+    MenuLevel.prototype.getMenuItem = function (element) {
+        var el = element;
+        while (!this.isItemDiv(el)) {
+            if (this.isLevelDiv(el)) {
+                throw "Can't get menu item";
+            }
+            el = el.parentElement;
+        }
+        return el['menuItem'];
+    };
+    MenuLevel.prototype.renderItemsWithoutFilter = function () {
+        var _this = this;
+        this.isFilteringMode = false;
+        var scrollDiv = this.scrollDiv;
+        var multiselect = this.parentMenu.options.multiselect;
+        var activateOnMouseOver = this.parentMenu.options.activateOnMouseOver;
+        var itemFgColor = this.parentMenu.style.colors.fgON || 'black';
+        var itemOverBgColor = this.parentMenu.style.colors.bgOVER || 'LightSteelBlue';
+        var itemFontSize = this.parentMenu.style.itemStyle.fontSize || '14px';
+        var itemFilterCallback = this.parentMenu.getItemFilterCallback();
+        scrollDiv.innerHTML = "";
+        for (var i = 0; i < this.items.length; i++) {
+            var item = this.items[i];
+            if (!item || !item.text)
+                continue;
+            if (itemFilterCallback) {
+                if (!itemFilterCallback(item))
+                    continue;
+                if (item.items && this.allSubitemsAreFiltered(item.items, itemFilterCallback))
+                    continue;
+            }
+            item.data = function (propName) {
+                return _this[propName];
+            };
+            if (typeof (item.selected) == "undefined") {
+                item.selected = false;
+            }
+            if (item.selected && this.selectedItem == null) {
+                this.selectedItem = item;
+            }
+            var itemDiv = document.createElement("div");
+            domel(itemDiv)
+                .addClass("".concat(this.cssPrefix, "-itemDiv"))
+                .addClass(browserUtils.getMobileCssClass());
+            if (item.selected && this.showSelected && !multiselect) {
+                itemDiv.classList.add("".concat(this.cssPrefix, "-selected"));
+            }
+            ;
+            if (this.domWriteItemsId && this.menuId) {
+                itemDiv.id = 'item-' + this.menuId + '-' + item.id;
+            }
+            scrollDiv.appendChild(itemDiv);
+            itemDiv['menuItem'] = item;
+            itemDiv['menuLevel'] = this;
+            item.itemDiv = itemDiv;
+            if (this.parentMenu.options.useDefaultStyles) {
+                itemDiv.style.fontSize = itemFontSize;
+                itemDiv.style.color = itemFgColor;
+                itemDiv.style.paddingLeft = "15px";
+                itemDiv.style.paddingRight = "6px";
+                itemDiv.style.cursor = "pointer";
+            }
+            if (item.text == '---') {
+                itemDiv.appendChild(document.createElement('hr'));
+            }
+            else {
+                if (multiselect) {
+                    var cb = document.createElement("input");
+                    cb.type = "checkbox";
+                    cb.id = "cb" + item.id;
+                    cb.checked = this.isItemSelected(item);
+                    cb.defaultChecked = this.isItemSelected(item);
+                    itemDiv.appendChild(cb);
+                    item.itemCheckbox = cb;
+                    if (this.parentMenu.options.useDefaultStyles) {
+                        cb.style.margin = "4px 10px 0 0";
+                        cb.style.verticalAlign = "top";
+                    }
+                }
+                var itemText = item.text;
+                if (this.parentMenu.options.showItemIds) {
+                    itemText = item.id + ':' + itemText;
+                }
+                var itemTextNode = document.createTextNode(itemText);
+                itemDiv.appendChild(itemTextNode);
+                if (item.items && item.items.length > 0) {
+                    itemDiv.classList.add("".concat(this.cssPrefix, "-itemDiv-hasChildren"));
+                    var arrowSpan = document.createElement('span');
+                    arrowSpan.classList.add("".concat(this.cssPrefix, "-itemDiv-arrow"));
+                    itemDiv.appendChild(arrowSpan);
+                    var arrowText = document.createTextNode('>');
+                    arrowSpan.appendChild(arrowText);
+                }
+                var itemClickHandler = function (ev) {
+                    var menuItem = _this.getMenuItem(ev.target);
+                    if (multiselect) {
+                        if (!menuItem.items || ev.target == menuItem.itemCheckbox) {
+                            var itemSelected = _this.isItemSelected(menuItem);
+                            _this.setItemSelected(menuItem, !itemSelected);
+                            menuItem.itemCheckbox.checked = !itemSelected;
+                            _this.parentMenu.refreshCheckboxes();
+                        }
+                        else {
+                            _this.activateItem(menuItem);
+                        }
+                    }
+                    else {
+                        _this.activateItem(menuItem);
+                        _this.submit(menuItem);
+                    }
+                    return false;
+                };
+                itemDiv.removeEventListener("click", itemClickHandler);
+                itemDiv.addEventListener('click', itemClickHandler);
+                itemDiv.addEventListener('mouseenter', function (ev) {
+                    var item = _this.getMenuItem(ev.target);
+                    _this.parentMenu.isCursorInside = true;
+                    if (activateOnMouseOver) {
+                        _this.activateItem(item);
+                    }
+                });
+                itemDiv.addEventListener('mouseleave', function (ev) {
+                    var item = _this.getMenuItem(ev.target);
+                    _this.parentMenu.isCursorInside = false;
+                    setTimeout(function () {
+                        if (!_this.parentMenu.isCursorInside) {
+                            if (activateOnMouseOver && item == _this.activeItem && !item.subLevel) {
+                                _this.deactivateItem(item);
+                            }
+                        }
+                    }, 200);
+                });
+            }
+            if (this.itemRenderedCallback) {
+                this.itemRenderedCallback(this.menuId, itemDiv);
+            }
+        }
+    };
+    MenuLevel.prototype.renderItemsWithFilter = function (filter) {
+        this.isFilteringMode = true;
+        var scrollDiv = this.scrollDiv;
+        scrollDiv.innerHTML = "";
+        var filterSections = filter.split('>');
+        var pureFilterTexts = filterSections.map(function (section) { return section.replace(/\*/g, ''); });
+        var items = this.filterItems(this.items, filterSections);
+        this.filteredItems = [];
+        for (var i = 0; i < items.length; i++) {
+            this.renderItemWithFilter(items[i], pureFilterTexts, 0);
+        }
+    };
+    MenuLevel.prototype.matchesFilter = function (text, regexp) {
+        if (text && regexp) {
+            return regexp.test(text);
+        }
+        else {
+            return true;
+        }
+    };
+    MenuLevel.prototype.filterItems = function (items, filterSections) {
+        var resultItems = [];
+        var filter = filterSections.length > 0 ? filterSections[0] : '';
+        var restFilterSections = filterSections.length > 1 ? filterSections.slice(1) : filterSections;
+        var filterRegexp = filter ? new RegExp(filter.replace(/\*/g, '.+?'), 'i') : null;
+        for (var i = 0; i < items.length; i++) {
+            var item = items[i];
+            if (item.items) {
+                var groupItem = dataUtils.assign({}, item);
+                var groupItemMatches = this.matchesFilter(item.text, filterRegexp);
+                //if we have only one filter section (or an empty filter)
+                if (filterSections.length < 2) {
+                    //if current group item matches the filter -> show all sub-items
+                    if (groupItemMatches && filterSections.length < 2) {
+                        groupItem.items = dataUtils.createArrayFrom(item.items);
+                    }
+                    else {
+                        groupItem.items = this.filterItems(item.items, restFilterSections);
+                    }
+                }
+                //if we have more than 1 filter section and there is a match -> filter sub-items as well
+                else if (groupItemMatches) {
+                    groupItem.items = this.filterItems(item.items, restFilterSections);
+                }
+                //otherwise we skip this group at all
+                else {
+                    groupItem.items = [];
+                }
+                if (groupItem.items.length > 0) {
+                    resultItems.push(groupItem);
+                }
+            }
+            else {
+                if (this.matchesFilter(item.text, filterRegexp)) {
+                    resultItems.push(item);
+                }
+            }
+        }
+        return resultItems;
+    };
+    MenuLevel.prototype.renderItemWithFilter = function (item, filterTexts, level) {
+        var _this = this;
+        var scrollDiv = this.scrollDiv;
+        var levelFilterText = level < filterTexts.length ? filterTexts[level] : filterTexts[filterTexts.length - 1];
+        var multiselect = this.parentMenu.options.multiselect;
+        var activateOnMouseOver = this.parentMenu.options.activateOnMouseOver;
+        var itemFgColor = this.parentMenu.style.colors.fgON || 'black';
+        var itemOverBgColor = this.parentMenu.style.colors.bgOVER || 'LightSteelBlue';
+        var itemFontSize = this.parentMenu.style.itemStyle.fontSize || '14px';
+        var itemFilterCallback = this.parentMenu.getItemFilterCallback();
+        if (!item || !item.text)
+            return;
+        if (itemFilterCallback) {
+            if (!itemFilterCallback(item))
+                return;
+            if (item.items && this.allSubitemsAreFiltered(item.items, itemFilterCallback))
+                return;
+        }
+        item.data = function (propName) {
+            return this[propName];
+        };
+        if (typeof (item.selected) == "undefined") {
+            item.selected = false;
+        }
+        if (item.selected && this.selectedItem == null) {
+            this.selectedItem = item;
+        }
+        var itemDiv = document.createElement("div");
+        domel(itemDiv)
+            .addClass("".concat(this.cssPrefix, "-itemDiv"))
+            .addClass(browserUtils.getMobileCssClass());
+        itemDiv.style.marginLeft = "".concat(level * 10, "px");
+        if (item.selected && !multiselect) {
+            itemDiv.classList.add("".concat(this.cssPrefix, "-selected"));
+        }
+        ;
+        if (this.domWriteItemsId && this.menuId) {
+            itemDiv.id = 'item-' + this.menuId + '-' + item.id;
+        }
+        scrollDiv.appendChild(itemDiv);
+        itemDiv['menuItem'] = item;
+        itemDiv['menuLevel'] = this;
+        item.itemDiv = itemDiv;
+        if (this.parentMenu.options.useDefaultStyles) {
+            itemDiv.style.fontSize = itemFontSize;
+            itemDiv.style.color = itemFgColor;
+            itemDiv.style.paddingLeft = "15px";
+            itemDiv.style.paddingRight = "6px";
+            itemDiv.style.cursor = "pointer";
+        }
+        if (item.text == '---') {
+            itemDiv.appendChild(document.createElement('hr'));
+        }
+        else {
+            if (multiselect) {
+                var cb = document.createElement("input");
+                cb.type = "checkbox";
+                cb.id = "cb" + item.id;
+                cb.checked = this.isItemSelected(item);
+                cb.defaultChecked = this.isItemSelected(item);
+                itemDiv.appendChild(cb);
+                item.itemCheckbox = cb;
+                if (this.parentMenu.options.useDefaultStyles) {
+                    cb.style.margin = "4px 10px 0 0";
+                    cb.style.verticalAlign = "top";
+                }
+            }
+            var itemText = document.createElement('span');
+            itemText.innerHTML = this.highlightText(item.text, levelFilterText);
+            itemDiv.appendChild(itemText);
+            if (item.items && item.items.length > 0) {
+                itemDiv.classList.add("".concat(this.cssPrefix, "-itemDiv-filter-hasChildren"));
+            }
+            else {
+                this.filteredItems.push(item);
+                var itemClickHandler = function (event) {
+                    if (multiselect) {
+                        if (!item.items || event.target == item.itemCheckbox) {
+                            var itemSelected = _this.isItemSelected(item);
+                            _this.setItemSelected(item, !itemSelected);
+                            item.itemCheckbox.checked = !itemSelected;
+                            _this.parentMenu.refreshCheckboxes();
+                        }
+                        else {
+                            _this.activateItem(item);
+                        }
+                    }
+                    else {
+                        _this.activateItem(item);
+                        _this.submit(item);
+                    }
+                    return false;
+                };
+                itemDiv.removeEventListener("click", itemClickHandler);
+                itemDiv.addEventListener('click', itemClickHandler);
+                itemDiv.addEventListener('mouseenter', function (ev) {
+                    ;
+                    _this.parentMenu.isCursorInside = true;
+                    if (activateOnMouseOver) {
+                        _this.activateItem(item);
+                    }
+                });
+                itemDiv.addEventListener('mouseleave', function (ev) {
+                    _this.parentMenu.isCursorInside = false;
+                    setTimeout(function () {
+                        if (!_this.parentMenu.isCursorInside) {
+                            if (activateOnMouseOver && item == _this.activeItem && !item.subLevel) {
+                                _this.deactivateItem(item);
+                            }
+                        }
+                    }, 200);
+                });
+            }
+        }
+        if (item.items) {
+            for (var i = 0; i < item.items.length; i++) {
+                this.renderItemWithFilter(item.items[i], filterTexts, level + 1);
+            }
+        }
+        if (this.itemRenderedCallback) {
+            this.itemRenderedCallback(this.menuId, itemDiv);
+        }
+    };
+    MenuLevel.prototype.highlightText = function (content, text) {
+        if (text && text.length > 0) {
+            var lowerText = text.toLowerCase();
+            var lowerContent = content.toLowerCase();
+            var insertValue1 = "<span class='eqjs-menu-itemDiv-highlight'>";
+            var insertValue2 = "</span>";
+            var startIndex = lowerContent.indexOf(lowerText);
+            if (startIndex >= 0) {
+                var pos = 0;
+                var value = content;
+                var indexInMas = [];
+                while (true) {
+                    var index = lowerContent.indexOf(lowerText, pos);
+                    if (index >= 0) {
+                        indexInMas.push(index);
+                        pos = index + text.length;
+                    }
+                    else {
+                        pos++;
+                    }
+                    if (pos >= value.length - 1) {
+                        break;
+                    }
+                }
+                if (indexInMas.length > 0) {
+                    content = '';
+                    for (var i = 0; i < indexInMas.length; i++) {
+                        if (i === 0) {
+                            content += value.substring(0, indexInMas[i]);
+                        }
+                        content += insertValue1 + value.substring(indexInMas[i], indexInMas[i] + text.length) + insertValue2;
+                        if (i < indexInMas.length - 1) {
+                            content += value.substring(indexInMas[i] + text.length, indexInMas[i + 1]);
+                        }
+                        else {
+                            content += value.substring(indexInMas[i] + text.length);
+                        }
+                    }
+                }
+            }
+        }
+        return content;
+    };
+    MenuLevel.prototype.renderItems = function (filter) {
+        if (!filter && !browserUtils.isMobileMode()) {
+            this.renderItemsWithoutFilter();
+        }
+        else {
+            filter = filter || '';
+            this.renderItemsWithFilter(filter.toLowerCase());
+        }
+    };
+    MenuLevel.prototype.activateItem = function (menuItem, openSubLevel) {
+        if (openSubLevel === void 0) { openSubLevel = true; }
+        if (this.activeItem != null) {
+            this.deactivateItem(this.activeItem);
+        }
+        this.activeItem = menuItem;
+        var rowElement = menuItem.itemDiv;
+        rowElement.classList.add('active');
+        if (this.parentMenu.options.useDefaultStyles) {
+            var itemBgColor = this.parentMenu.style.colors.bgON;
+            var itemFgColor = this.parentMenu.style.colors.fgON;
+            var itemOverBgColor = this.parentMenu.style.colors.bgOVER;
+            var itemOverFgColor = this.parentMenu.style.colors.fgOVER || "";
+            var itemClass = this.parentMenu.style.itemClass || "";
+            var itemClassOver = this.parentMenu.style.itemClassOver || "";
+            if (itemClassOver != "") {
+                rowElement.style.backgroundColor = "";
+                rowElement.style.color = "";
+            }
+            else {
+                rowElement.style.backgroundColor = itemOverBgColor;
+                rowElement.style.color = itemOverFgColor;
+            }
+        }
+        if (menuItem.items && !this.isFilteringMode && openSubLevel) {
+            this.showSubLevel(menuItem);
+        }
+    };
+    MenuLevel.prototype.deactivateItem = function (menuItem) {
+        if (!menuItem)
+            return;
+        var rowElement = menuItem.itemDiv;
+        rowElement.classList.remove('active');
+        if (this.parentMenu.options.useDefaultStyles) {
+            var itemBgColor = this.parentMenu.style.colors.bgON;
+            var itemFgColor = this.parentMenu.style.colors.fgON;
+            var itemClass = this.parentMenu.style.itemClass || "";
+            if (itemClass != "") {
+                rowElement.style.backgroundColor = "";
+                rowElement.style.color = "";
+            }
+            else {
+                rowElement.style.backgroundColor = itemBgColor;
+                rowElement.style.color = itemFgColor;
+            }
+        }
+        if (menuItem.subLevel) {
+            menuItem.subLevel.hide();
+        }
+        this.activeItem = null;
+    };
+    MenuLevel.prototype.showSubLevel = function (menuItem) {
+        if (!menuItem.subLevel) {
+            var levelId = '';
+            if (this.menuId) {
+                levelId = this.menuId + "-" + menuItem.id;
+            }
+            menuItem.subLevel = new MenuLevel({
+                showSelected: this.showSelected,
+                menu: this.parentMenu,
+                parent: this,
+                container: this.parentElement,
+                items: menuItem.items,
+                levelIndex: this.levelIndex + 1,
+                domWriteItemsId: this.domWriteItemsId,
+                menuId: levelId,
+                itemRenderedCallback: this.itemRenderedCallback
+            });
+        }
+        var pos = getElementAbsolutePos(menuItem.itemDiv);
+        var scroll = getScrollPos();
+        var winSize = getWinSize();
+        //show menu to the side that have more space available
+        var leftSpace = pos.x - scroll.left;
+        var rightSpace = winSize.width - leftSpace - menuItem.itemDiv.offsetWidth;
+        pos.x += menuItem.itemDiv.offsetParent.offsetWidth;
+        pos.y += 1;
+        menuItem.subLevel.showAt(pos.x, pos.y, true, true);
+        menuItem.subLevel.levelDiv.style.width = '';
+        menuItem.subLevel.levelDiv.style.right = '';
+        if ((rightSpace >= menuItem.subLevel.levelDiv.offsetWidth) || (rightSpace >= leftSpace)) { //show level to the right
+            if (rightSpace < menuItem.subLevel.levelDiv.offsetWidth) {
+                menuItem.subLevel.levelDiv.style.right = -scroll.left + 'px';
+            }
+        }
+        else { //show level to the left
+            if (leftSpace < menuItem.subLevel.levelDiv.offsetWidth) {
+                menuItem.subLevel.levelDiv.style.left = scroll.left + 4 + 'px';
+            }
+            else {
+                menuItem.subLevel.levelDiv.style.left = '';
+            }
+            menuItem.subLevel.levelDiv.style.right = getViewportSize().width - pos.x + menuItem.itemDiv.offsetWidth - 6 + 'px';
+        }
+        menuItem.subLevel.levelDiv.style.visibility = 'visible';
+        menuItem.subLevel.focus();
+    };
+    MenuLevel.prototype.adjustTopPos = function (top) {
+        var winSize = getWinSize();
+        var levelBottom = top - getScrollPos().top + this.levelDiv.offsetHeight;
+        var res = top;
+        if (levelBottom > winSize.height - 5) {
+            res -= levelBottom - winSize.height + 5;
+            if (res < getScrollPos().top) {
+                res = getScrollPos().top + 10;
+            }
+        }
+        return res;
+    };
+    MenuLevel.prototype.showAt = function (x, y, adjustTopPos, hidden) {
+        if (!this.items) {
+            return;
+        }
+        this.initLevelDiv();
+        //crocodile
+        this.turnCheckboxes(this.items);
+        this.renderItems();
+        var levelStyle = this.levelDiv.style;
+        if (hidden) {
+            this.levelDiv.style.visibility = 'hidden';
+        }
+        levelStyle.display = 'block';
+        levelStyle.left = x + 'px';
+        levelStyle.top = y + 'px';
+        this.scrollDiv.style.width = "auto";
+        this.scrollDiv.style.height = "auto";
+        //adjusting level top position
+        if (adjustTopPos) {
+            y = this.adjustTopPos(y);
+            levelStyle.top = y + 'px';
+        }
+        //setting minimal level width if it is defined
+        var minItemWidth = this.parentMenu.minItemWidth;
+        if (minItemWidth > 0 && this.scrollDiv.offsetWidth < minItemWidth) {
+            for (var i = 0; i < this.items.length; i++) {
+                this.items[i].itemDiv.style.width = minItemWidth + "px";
+            }
+        }
+        var maxItemWidth = this.parentMenu.maxItemWidth;
+        if (maxItemWidth > 0 && this.scrollDiv.offsetWidth > maxItemWidth) {
+            for (var i = 0; i < this.items.length; i++) {
+                this.items[i].itemDiv.style.width = maxItemWidth + "px";
+                this.items[i].itemDiv.style.overflowX = "hidden";
+            }
+        }
+        var winSize = getWinSize();
+        //adjustinng maximum height of the menu level if it does not fit to browser window
+        var maxHeight = winSize.height - (y - getScrollPos().top) - 15; //document.documentElement.scrollTop
+        if (this.parentMenu.maxHeight > 0 && maxHeight > this.parentMenu.maxHeight) {
+            maxHeight = this.parentMenu.maxHeight;
+        }
+        if (this._applyItem != null && this._applyItem.itemDiv != null) {
+            maxHeight -= this._applyItem.itemDiv.offsetHeight + 5;
+        }
+        if (this.searchDiv != null) {
+            maxHeight -= this.searchDiv.offsetHeight;
+        }
+        if (this.closeDiv != null) {
+            maxHeight -= this.closeDiv.offsetHeight;
+        }
+        if (this.levelDiv.offsetHeight > maxHeight) {
+            var newHeight = maxHeight;
+            if (newHeight < 50) {
+                newHeight = 50;
+            }
+            this.scrollDiv.style.height = newHeight + "px";
+        }
+        else {
+            this.scrollDiv.style.height = "auto";
+        }
+        this.activeItem = null;
+    };
+    MenuLevel.prototype.focus = function () {
+        var _this = this;
+        window.setTimeout(function () {
+            _this.scrollDiv.focus();
+            if (_this.searchBox != null) {
+                if (_this.parentMenu.options.searchBoxAutoFocus) {
+                    _this.searchBox.focus();
+                }
+                _this.searchBox.value = "";
+            }
+        }, 100);
+    };
+    MenuLevel.prototype.hide = function () {
+        if (this.activeItem !== null) {
+            if (this.activeItem.subLevel) {
+                this.activeItem.subLevel.hide();
+            }
+        }
+        if (this.levelDiv) {
+            var levelStyle = this.levelDiv.style;
+            levelStyle.display = 'none';
+            if (this.initialized) {
+                this.parentElement.removeChild(this.levelDiv);
+                this.initialized = false;
+            }
+        }
+    };
+    MenuLevel.prototype.initLevelDiv = function () {
+        if (!this.initialized) {
+            this.parentElement.appendChild(this.levelDiv);
+            domel(this.levelDiv)
+                .addClass("".concat(this.cssPrefix, "-levelDiv"))
+                .addClass(browserUtils.getMobileCssClass());
+            this.initialized = true;
+        }
+    };
+    MenuLevel.prototype.submit = function (menuItem) {
+        if (menuItem != null) {
+            if (!menuItem.items) {
+                this.parentMenu.hideMenu();
+                var selectedItems = [];
+                if (menuItem == this._applyItem) {
+                    this.submitItems(this.items, selectedItems);
+                }
+                this.parentMenu.submitMenu(menuItem, selectedItems);
+            }
+        }
+    };
+    MenuLevel.prototype.remove = function () {
+        //remove old level elements
+        for (var i = 0; i < this.items.length; i++) {
+            var item = this.items[i];
+            if (item.subLevel) {
+                item.subLevel.remove();
+            }
+        }
+        if (this.levelDiv) {
+            this.levelDiv.innerHTML = "";
+            var parentNode = this.levelDiv.parentNode;
+            if (parentNode != null) {
+                parentNode.removeChild(this.levelDiv);
+            }
+        }
+        this.levelDiv = null;
+    };
+    MenuLevel.prototype.update = function (newItems) {
+        this.remove();
+        //create new level
+        this.items = newItems;
+        this.activeItem = null;
+        this.selectedItem = null;
+        this._applyItem.itemDiv = null;
+        this.initialized = false;
+        this.updated++;
+        this.renderContent();
+    };
+    MenuLevel.prototype.refreshCheckboxes = function () {
+        for (var i = 0; i < this.items.length; i++) {
+            var item = this.items[i];
+            if (item.itemCheckbox) {
+                item.itemCheckbox.checked = this.isItemSelected(item);
+            }
+            if (item.subLevel) {
+                item.subLevel.refreshCheckboxes();
+            }
+        }
+    };
+    MenuLevel.prototype.refreshItems = function () {
+        for (var i = 0; i < this.items.length; i++) {
+            var item = this.items[i];
+            if (item.itemDiv) {
+                if (item.hidden) {
+                    item.itemDiv.style.display = "none";
+                }
+                else {
+                    item.itemDiv.style.display = "block";
+                }
+            }
+            if (item.subLevel) {
+                item.subLevel.refreshItems();
+            }
+        }
+    };
+    MenuLevel.prototype.findItem = function (searchedText) {
+        var txt = searchedText.toLowerCase();
+        for (var i = 0; i < this.items.length; i++) {
+            var item = this.items[i];
+            if (item.text.toLowerCase().indexOf(txt) == 0) {
+                return item;
+            }
+        }
+        return null;
+    };
+    return MenuLevel;
+}());
+export var PopupMenu = /** @class */ (function () {
+    function PopupMenu(options) {
+        var _this = this;
+        this.isCursorInside = false;
+        this.mouseIsOverBlock = false;
+        this.mouseIsOverLink = false;
+        this.toId = null;
+        this.active = false;
+        this.ancorFocused = null;
+        this.options = {
+            items: [],
+            buttons: {
+                submit: i18n.getText('ButtonApply'),
+                cancel: i18n.getText('ButtonCancel')
+            },
+            itemFilterCallback: null,
+            useDefaultStyles: false,
+            multiselect: false,
+            adjustHeight: true,
+            showSearchBoxAfter: 30,
+            activateOnMouseOver: true,
+            container: document.body,
+            domWriteItemsId: false,
+            itemRenderedCallback: null,
+            showItemIds: false
+        };
+        if (options) {
+            dataUtils.assignDeep(this.options, options);
+        }
+        if (this.options.hideButtons) {
+            this.options.submitOnBlur = true;
+        }
+        this.menuId = PopupMenu.lastMenuID++;
+        this.updateProps();
+        this.rootLevel = new MenuLevel({
+            menu: this,
+            items: this.options.items,
+            levelIndex: 0,
+            container: this.options.container,
+            domWriteItemsId: this.options.domWriteItemsId,
+            menuId: this.options.id,
+            itemRenderedCallback: this.options.itemRenderedCallback,
+            showSelected: this.options.showSelected,
+        });
+        this.rootLevel.levelDiv.classList.add("".concat(this.cssPrefix, "-rootLevel"));
+        if (this.options.zIndex)
+            this.rootLevel.levelDiv.style.zIndex = "".concat(this.options.zIndex);
+        this.menuKeyUpHandler = function (e) {
+            if (e.which == 27) {
+                _this.hideMenu();
+                e.stopImmediatePropagation();
+            }
+        };
+        this.globalMouseDownHandler = function (e) {
+            if (!_this.active)
+                return true;
+            var event = window.event || e;
+            var o = event.srcElement || event.target;
+            var isOutside = true;
+            while (o) {
+                if (o.tagName && o.tagName.toLowerCase() == 'div') {
+                    // it is added in renderContent of MenuLevel class
+                    if (o.menuLevel) {
+                        if (o.menuLevel.parentMenu == _this) {
+                            isOutside = false;
+                            break;
+                        }
+                    }
+                }
+                o = o.parentNode || o.parentElement;
+            }
+            if (isOutside) {
+                if (_this.options.submitOnBlur) {
+                    _this.rootLevel.submit(_this.rootLevel.applyItem);
+                }
+                _this.hideMenu();
+            }
+            return true;
+        };
+        this.render();
+    }
+    Object.defineProperty(PopupMenu.prototype, "cssPrefix", {
+        get: function () {
+            return 'eqjs-menu';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PopupMenu.prototype.getItems = function () {
+        return this.rootLevel.getItems();
+    };
+    PopupMenu.prototype.updateProps = function () {
+        this.style = {};
+        this.style.colors = { border: "#666666", shadow: "#888888", bgON: "white", fgON: "black", bgOVER: "#B6BDD2", fgOVER: "black" };
+        this.style.itemStyle = { fontSize: "14px" };
+        this.minItemWidth = 0;
+        this.maxItemWidth = 0;
+        this.maxHeight = 0;
+        this.zIndex = "".concat(this.options.zIndex);
+        this.commandTemplate = "";
+        this.args = [];
+        this.active = false;
+    };
+    PopupMenu.prototype.render = function () {
+    };
+    PopupMenu.prototype.clearItemsMenuProps = function (items) {
+        if (!items)
+            return;
+        for (var i = 0; i < items.length; i++) {
+            this.clearItemMenuProps(items[i]);
+        }
+    };
+    PopupMenu.prototype.clearItemMenuProps = function (item) {
+        //don't clear properties they belong this menu
+        if (item.subLevel && item.subLevel.parentMenu == this)
+            return;
+        if (item.subLevel) {
+            item.subLevel.remove();
+            item.subLevel = null;
+        }
+        if (item.itemDiv) {
+            item.itemDiv = null;
+        }
+        if (item.items) {
+            this.clearItemsMenuProps(item.items);
+        }
+    };
+    PopupMenu.prototype.setSelectedItems = function (items, selectedIds) {
+        var itemsLength = items ? items.length : 0;
+        for (var i = 0; i < itemsLength; i++) {
+            var item = items[i];
+            if (item.items) {
+                this.setSelectedItems(item.items, selectedIds);
+            }
+            else {
+                item.selected = selectedIds.indexOf(item.id) >= 0;
+            }
+        }
+    };
+    PopupMenu.prototype.getRootLevel = function () {
+        return this.rootLevel;
+    };
+    PopupMenu.prototype.getItemFilterCallback = function () {
+        return this.itemFilterCallback;
+    };
+    PopupMenu.prototype.showMenu = function (options) {
+        this.ancorFocused = options.anchor == document.activeElement ? options.anchor : null;
+        this.clearItemsMenuProps(this.options.items);
+        this.itemSelectedCallback = options.itemSelectedCallback || null;
+        this.menuClosedCallback = options.menuClosedCallback || null;
+        this.itemFilterCallback = options.itemFilterCallback || null;
+        if (options.items) {
+            this.options.items = options.items;
+            this.rootLevel.setItems(options.items);
+        }
+        if (options.onMenuItemSelected) {
+            this.options.onMenuItemSelected = options.onMenuItemSelected;
+        }
+        var selectedIds = options.selectedIds || null;
+        if (selectedIds) {
+            if (typeof selectedIds === "string") {
+                selectedIds = selectedIds.split(",");
+            }
+        }
+        else {
+            selectedIds = [];
+        }
+        this.active = true;
+        this.setSelectedItems(this.options.items, selectedIds);
+        if (browserUtils.isMobileMode()) {
+            this.rootLevel.showAt(0, 0, true, true);
+            this.rootLevel.levelDiv.style.top = '0px';
+            this.rootLevel.levelDiv.style.bottom = '0px';
+            this.rootLevel.levelDiv.style.right = '0px';
+            this.rootLevel.levelDiv.style.position = 'fixed';
+            this.rootLevel.levelDiv.style.fontSize = '20px';
+        }
+        else {
+            var anchor = options.anchor || document.documentElement;
+            var srcPos = getElementAbsolutePos(anchor);
+            var anchorHeight = anchor.offsetHeight;
+            var anchorWidth = anchor.offsetWidth;
+            var pos = {
+                x: srcPos.x,
+                y: srcPos.y + anchorHeight + 2
+            };
+            var scroll_1 = getScrollPos();
+            var winSize = getWinSize();
+            //show menu to the side that have more space available
+            var leftSpace = pos.x + anchorWidth - scroll_1.left;
+            var rightSpace = winSize.width - leftSpace + anchorWidth;
+            pos.x += 2;
+            this.rootLevel.showAt(pos.x, pos.y, true, true);
+            this.rootLevel.levelDiv.style.width = '';
+            this.rootLevel.levelDiv.style.right = '';
+            if (!this.rootLevel.levelDiv.style.zIndex) {
+                // z-index is at least 10000 and more if anchor has bigger
+                this.rootLevel.levelDiv.style.zIndex = "".concat(Math.max(10000, findHighestZIndex(anchor) + 1));
+            }
+            if ((rightSpace >= this.rootLevel.levelDiv.offsetWidth) || (rightSpace >= leftSpace)) {
+                //show level to the right
+                if (rightSpace < this.rootLevel.levelDiv.offsetWidth) {
+                    this.rootLevel.levelDiv.style.right = -scroll_1.left + 'px';
+                }
+            }
+            else {
+                //show level to the left
+                if (leftSpace < this.rootLevel.levelDiv.offsetWidth) {
+                    this.rootLevel.levelDiv.style.left = scroll_1.left + 4 + 'px';
+                }
+                else {
+                    this.rootLevel.levelDiv.style.left = '';
+                }
+                this.rootLevel.levelDiv.style.right = getViewportSize().width - pos.x - anchorWidth + 'px';
+            }
+            this.rootLevel.levelDiv.style.fontSize = '14px';
+        }
+        this.rootLevel.levelDiv.style.visibility = 'visible';
+        this.rootLevel.focus();
+        document.addEventListener('keyup', this.menuKeyUpHandler);
+        document.addEventListener('mousedown', this.globalMouseDownHandler, true);
+    };
+    PopupMenu.prototype.hideMenu = function () {
+        document.removeEventListener('mousedown', this.globalMouseDownHandler, true);
+        document.removeEventListener('keyup', this.menuKeyUpHandler);
+        this.rootLevel.hide();
+        if (this.ancorFocused) {
+            this.ancorFocused.focus();
+        }
+        if (this.menuClosedCallback) {
+            this.menuClosedCallback();
+        }
+    };
+    PopupMenu.prototype.submitMenu = function (menuItem, selectedItems) {
+        if (this.itemSelectedCallback) {
+            this.itemSelectedCallback(menuItem, selectedItems);
+        }
+    };
+    PopupMenu.prototype.knockMenuStyle = function (menu) {
+        menu.removeAttribute('style');
+        var ul = menu.querySelectorAll('ul').item(0);
+        var hasUlStyle = ul && ul.style ? true : false;
+        if (hasUlStyle !== false) {
+            ul.setAttribute('style', '');
+        }
+    };
+    PopupMenu.prototype.refreshItems = function () {
+        this.rootLevel.refreshItems();
+    };
+    PopupMenu.prototype.refreshCheckboxes = function () {
+        this.rootLevel.refreshCheckboxes();
+    };
+    PopupMenu.lastMenuID = 0;
+    return PopupMenu;
+}());
 //# sourceMappingURL=popup_menu.js.map