@easyquery/ui 7.2.3 → 7.2.4-beta03

package/dist/lib/widgets/entities_panel.js

@@ -1,626 +1,628 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-import { i18n } from '@easydata/core';
-import { utils as dataUtils } from '@easydata/core';
-import { Widget, WidgetGroup, ExprTag, QueryChangePart, QueryChangeAction } from '@easyquery/core';
-import { eqDragManager } from '@easydata/ui';
-import { eqCssPrefix } from '../utils/utils';
-import { browserUtils } from '../utils/browser_utils';
-/**
- * The entities panel wiget, implemented without JQuery.
- */
-var EntitiesPanel = /** @class */ (function (_super) {
-    __extends(EntitiesPanel, _super);
-    /**
-     * The default constructor.
-     * @param slot The html element.
-     */
-    function EntitiesPanel(slot) {
-        var _this = _super.call(this, slot) || this;
-        _this.queryChangedCallbackId = null;
-        _this.group = WidgetGroup.Model | WidgetGroup.Query;
-        _this.panel = slot;
-        return _this;
-    }
-    Object.defineProperty(EntitiesPanel.prototype, "cssPrefix", {
-        get: function () {
-            return 'eqjs-ep';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    EntitiesPanel.prototype.getWidgetType = function () {
-        return 'entitiesPanel';
-    };
-    /**
-     * Initialize widget.
-     * @param context The context.
-     * @param options The options.
-     */
-    EntitiesPanel.prototype.init = function (context, options) {
-        _super.prototype.init.call(this, context, options);
-        this.setOptions(options);
-        this.renderProgressBlock();
-    };
-    /**
-    * Refresh widget implementation
-    */
-    EntitiesPanel.prototype.refreshCore = function () {
-        this.render();
-        if (this.options.syncWithColumns) {
-            this.refreshCheckedStateByColumns();
-        }
-    };
-    EntitiesPanel.prototype.onProcessStartCore = function () {
-        if (this.options.showIndicatorOnLoad) {
-            if (!this.progressBlock.parentNode)
-                this.panel.appendChild(this.progressBlock);
-        }
-    };
-    EntitiesPanel.prototype.onProcessEndCore = function () {
-        if (this.options.showIndicatorOnLoad) {
-            if (this.progressBlock.parentNode)
-                this.panel.removeChild(this.progressBlock);
-        }
-    };
-    EntitiesPanel.prototype.destroyCore = function () {
-        this.slot.innerHTML = '';
-    };
-    EntitiesPanel.prototype.setOptions = function (options) {
-        var _this = this;
-        this.options = {
-            showToolbar: true,
-            syncWithColumns: false,
-            showSelectAllButton: false,
-            showClearSelectionButton: true,
-            showAddColumnButton: true,
-            showAddConditionButton: true,
-            showCheckboxes: true,
-            showTooltips: true,
-            draggableAttributes: true,
-            showAttributes: { useInConditions: true, useInResult: true, useInSorting: false },
-            showFilterBox: false,
-            filterBoxMode: 0,
-            showIndicatorOnLoad: true,
-            attrPlacement: 0,
-            sortEntities: false,
-            autoClearSelection: true,
-            entityRenderedCallback: null,
-            attributeRenderedCallback: null,
-            columnTitleFormat: '{attr}'
-        };
-        if (options) {
-            dataUtils.assignDeep(this.options, options);
-        }
-        if (this.queryChangedCallbackId) {
-            var query = this.context.getQuery();
-            query.removeChangedCallback(this.queryChangedCallbackId);
-        }
-        if (this.options.syncWithColumns) {
-            var query = this.context.getQuery();
-            this.queryChangedCallbackId = query.addChangedCallback(function (ev) {
-                var edata = ev.data;
-                if (!edata || (edata.part != QueryChangePart.Columns && edata.part != QueryChangePart.All)) {
-                    return;
-                }
-                _this.refreshCheckedStateByColumns();
-            });
-        }
-    };
-    EntitiesPanel.prototype.render = function () {
-        var model = this.context.getModel();
-        ;
-        this.clear();
-        this.panel.classList.add(this.cssPrefix + "-panel");
-        this.panel.classList.add(browserUtils.getMobileCssClass());
-        this.rootEntityBlock = document.createElement('div');
-        if (model != null && !model.isEmpty()) {
-            var entTree = model.getEntitiesTree({
-                addUIC: this.options.showAttributes.useInConditions,
-                addUIR: this.options.showAttributes.useInResult,
-                addUIS: this.options.showAttributes.useInSorting,
-                attrPlacement: this.options.attrPlacement,
-                sortEntities: this.options.sortEntities,
-                includeRootData: true
-            });
-            this.entityTreeBlock = this.renderEntity(entTree, this.rootEntityBlock, 0);
-            this.panel.appendChild(this.entityTreeBlock);
-        }
-        if (this.options.showFilterBox) {
-            this.createFilterBox();
-        }
-        else {
-            this.rootEntityBlock.style.top = '0';
-        }
-        if (this.options.showToolbar && !this.options.syncWithColumns) {
-            this.createToolPanel();
-        }
-        else {
-            this.rootEntityBlock.style.bottom = '0';
-        }
-    };
-    EntitiesPanel.prototype.renderEntity = function (entity, block, offset) {
-        var _this = this;
-        var entityBlock;
-        var entityNode = document.createElement('div');
-        entityNode.classList.add(this.cssPrefix + "-entity-node");
-        entityNode.classList.add(browserUtils.getMobileCssClass());
-        var entityChildren = document.createElement('div');
-        entityChildren.classList.add(this.cssPrefix + "-entity-children");
-        entityChildren.classList.add(browserUtils.getMobileCssClass());
-        var nodeLabel = document.createElement('label');
-        nodeLabel.classList.add(this.cssPrefix + "-entity-node-label");
-        var nodeInput = document.createElement('input');
-        nodeInput.type = 'checkbox';
-        nodeInput.title = entity.text;
-        var nodeToggleButton = document.createElement('a');
-        nodeToggleButton.href = 'javascript:void(0)';
-        nodeToggleButton.title = i18n.getText("EntityToggle") + " " + entity.text;
-        nodeToggleButton.classList.add(this.cssPrefix + "-entity-node-button");
-        var attrNode, attrLabel, attrInput;
-        var currentOffset = offset;
-        var isAttributeInTree = function (attrId, entityBlock) {
-            var res = entityBlock.querySelectorAll("." + _this.cssPrefix + "-entity-attr[data-id=\"" + attrId + "\"]");
-            return res.length > 0;
-        };
-        if (block) {
-            entityBlock = block;
-            entityBlock.innerHTML = '';
-        }
-        else {
-            entityBlock = document.createElement('div');
-        }
-        entityBlock.classList.add(this.cssPrefix + "-entity");
-        entityBlock.classList.add(browserUtils.getMobileCssClass());
-        if (entity.id && entity.id != "") {
-            nodeLabel.innerText = entity.text;
-            entityNode.appendChild(nodeLabel); //caption
-            if (this.options.showCheckboxes) {
-                nodeLabel.insertBefore(nodeInput, nodeLabel.firstChild);
-            }
-            entityNode.insertBefore(nodeToggleButton, entityNode.firstChild);
-            if (this.options.showTooltips && entity.description) {
-                nodeLabel.setAttribute('title', entity.description);
-            }
-            for (var i = 0; i < currentOffset; i++) {
-                var divElem = document.createElement('div');
-                divElem.classList.add(this.cssPrefix + "-entity-offset");
-                entityNode.insertBefore(divElem, entityNode.firstChild);
-            }
-            entityBlock.appendChild(entityNode);
-            entityChildren.hidden = true;
-            currentOffset++;
-        }
-        var itemsLength = entity.items ? entity.items.length : 0;
-        var _loop_1 = function (i) {
-            var item = entity.items[i];
-            if (item.isEntity) {
-                entityChildren.appendChild(this_1.renderEntity(item, null, currentOffset));
-            }
-            else {
-                if (!item.lookupAttr || !(isAttributeInTree(item.lookupAttr, entityChildren))) {
-                    attrLabel = document.createElement('label');
-                    attrLabel.innerText = item.text;
-                    attrLabel.classList.add(this_1.cssPrefix + "-entity-attr-label");
-                    if (this_1.options.showCheckboxes) {
-                        attrInput = document.createElement('input');
-                        attrInput.type = 'checkbox';
-                        attrInput.title = item.text;
-                        attrLabel.insertBefore(attrInput, attrLabel.firstChild);
-                        if (this_1.options.syncWithColumns) {
-                            attrInput.addEventListener('change', function (ev) {
-                                var model = _this.context.getModel();
-                                var query = _this.context.getQuery();
-                                var checkbox = ev.currentTarget;
-                                var attrId = checkbox.parentElement.parentElement.getAttribute('data-id');
-                                if (model.checkAttrProperty(attrId, "useInResult")) {
-                                    if (checkbox.checked) {
-                                        var attr = model.getAttributeById(attrId);
-                                        var caption = model.getAttributeText(attr, _this.options.columnTitleFormat);
-                                        var column = query.addColumn({
-                                            attribute: attr,
-                                            caption: caption
-                                        });
-                                        query.fireColumnsChangedEvent(QueryChangeAction.Add, column);
-                                    }
-                                    else {
-                                        var columns = query.getColumns()
-                                            .filter(function (col) { return col.expr.tag === ExprTag.EntityAttribute
-                                            && col.expr.value === attrId; });
-                                        if (columns.length > 0) {
-                                            query.removeColumn(columns[0], null);
-                                            query.fireColumnsChangedEvent(QueryChangeAction.Delete, columns[0]);
-                                        }
-                                    }
-                                }
-                            });
-                        }
-                    }
-                    if (this_1.options.showTooltips && item.description) {
-                        attrLabel.setAttribute('title', item.description);
-                    }
-                    for (var j = 0; j < currentOffset + 1; j++) {
-                        var divElem = document.createElement('div');
-                        divElem.classList.add(this_1.cssPrefix + "-entity-offset");
-                        attrLabel.insertBefore(divElem, attrLabel.firstChild);
-                    }
-                    attrNode = document.createElement('div');
-                    attrNode.classList.add(this_1.cssPrefix + "-entity-attr");
-                    if (entityNode.innerHTML.length == 0) {
-                        attrNode.classList.add(this_1.cssPrefix + "-entity-attr-root");
-                    }
-                    attrNode.innerHTML = "";
-                    attrNode.appendChild(attrLabel);
-                    attrNode.setAttribute('data-id', item.id);
-                    if (this_1.options.draggableAttributes) {
-                        eqDragManager.registerDraggableItem({
-                            element: attrNode,
-                            scope: "entityAttr",
-                            data: { attrId: item.id },
-                            renderer: function (dragImage) {
-                                dragImage.innerHTML = '';
-                                var attrLabel = document.createElement('span');
-                                attrLabel.innerText = item.text;
-                                dragImage.appendChild(attrLabel);
-                            }
-                        });
-                    }
-                    if (this_1.options.attributeRenderedCallback) {
-                        this_1.options.attributeRenderedCallback(attrNode);
-                    }
-                    entityChildren.appendChild(attrNode);
-                }
-            }
-        };
-        var this_1 = this;
-        for (var i = 0; i < itemsLength; i++) {
-            _loop_1(i);
-        }
-        if (entityChildren.innerHTML.length) {
-            entityBlock.appendChild(entityChildren);
-            nodeToggleButton.addEventListener('click', function (event) {
-                entityChildren.hidden = !entityChildren.hidden;
-                var element = event.target;
-                var className = _this.cssPrefix + "-entity-node-button-open";
-                if (element.classList.contains(className)) {
-                    element.classList.remove(className);
-                }
-                else {
-                    element.classList.add(className);
-                }
-                event.preventDefault();
-            });
-        }
-        if (entityChildren) {
-            var checkboxes = entityChildren.querySelectorAll("." + this.cssPrefix + "-entity-attr > label > input");
-            for (var i = 0; i < checkboxes.length; i++) {
-                var checkbox = checkboxes[i];
-                checkbox.addEventListener('click', function (event) {
-                    var element = event.target;
-                    if (element.checked && !nodeInput.checked) {
-                        nodeInput.checked = true;
-                    }
-                    else if (entityChildren.querySelectorAll('input:checked').length === 0) {
-                        nodeInput.checked = false;
-                    }
-                    event.stopPropagation();
-                });
-            }
-        }
-        nodeInput.addEventListener('click', function (event) {
-            var element = event.target;
-            var entities = entityChildren.querySelectorAll('label input');
-            for (var i = 0; i < entities.length; i++) {
-                var entity_1 = entities[i];
-                entity_1.checked = element.checked;
-            }
-            if (_this.options.syncWithColumns) {
-                var query = _this.context.getQuery();
-                var model = _this.context.getModel();
-                var attrList_2 = [];
-                var attrElems = Array.from(entityChildren.querySelectorAll("." + _this.cssPrefix + "-entity-attr"));
-                for (var _i = 0, attrElems_1 = attrElems; _i < attrElems_1.length; _i++) {
-                    var elem = attrElems_1[_i];
-                    var attrId = elem.getAttribute('data-id');
-                    if (model.checkAttrProperty(attrId, 'useInResult')) {
-                        attrList_2.push(attrId);
-                    }
-                }
-                if (element.checked) {
-                    for (var _a = 0, attrList_1 = attrList_2; _a < attrList_1.length; _a++) {
-                        var attrId = attrList_1[_a];
-                        query.addColumn({ attributeId: attrId });
-                    }
-                }
-                else {
-                    var columns = query.getColumns()
-                        .filter(function (col) { return col.expr.tag === ExprTag.EntityAttribute
-                        && attrList_2.indexOf(col.expr.value) >= 0; });
-                    query.removeColumns(columns, null);
-                }
-                query.fireColumnsChangedEvent();
-            }
-            event.stopPropagation();
-        });
-        if (block != this.rootEntityBlock && this.options.entityRenderedCallback) {
-            this.options.entityRenderedCallback(entityBlock);
-        }
-        return entityBlock;
-    };
-    EntitiesPanel.prototype.createFilterBox = function () {
-        var _this = this;
-        this.filterBoxBlock = document.createElement('div');
-        this.filterBoxBlock.classList.add(this.cssPrefix + "-filter-box");
-        this.filterBoxBlock.classList.add(browserUtils.getMobileCssClass());
-        this.filterBoxInput = document.createElement('input');
-        this.filterBoxInput.classList.add(this.cssPrefix + "-filter-box-input");
-        this.filterBoxInput.addEventListener('input', function (e) {
-            var attrs = _this.panel.querySelectorAll("." + _this.cssPrefix + "-entity-attr");
-            for (var i = 0; i < attrs.length; i++) {
-                var attr = attrs[i];
-                attr.hidden = !_this.checkFilterAttribute(attr);
-            }
-            var entities = _this.panel.querySelectorAll(":scope > ." + _this.cssPrefix + "-entity");
-            for (var i = 0; i < entities.length; i++) {
-                var entity = entities[i];
-                var attrs_1 = entity.querySelectorAll("." + _this.cssPrefix + "-entity-attr");
-                var displayAttrCount = 0;
-                for (var i_1 = 0; i_1 < attrs_1.length; i_1++) {
-                    if (attrs_1[i_1].style.display !== 'None') {
-                        displayAttrCount++;
-                    }
-                }
-                entity.hidden = displayAttrCount === 0;
-            }
-            if (_this.filterBoxInput.value === '')
-                _this.collapseAll();
-            else
-                _this.expandAll();
-        });
-        this.filterBoxBlock.appendChild(this.filterBoxInput);
-        this.panel.insertBefore(this.filterBoxBlock, this.panel.firstChild);
-    };
-    EntitiesPanel.prototype.createToolPanel = function () {
-        var _this = this;
-        var defClass = this.cssPrefix + "-tool-panel";
-        var toolPanelBlock = document.createElement('div');
-        toolPanelBlock.classList.add(defClass);
-        toolPanelBlock.classList.add(browserUtils.getMobileCssClass());
-        var toolSelectAll = document.createElement('div');
-        toolSelectAll.classList.add(defClass + "-select-all");
-        toolSelectAll.title = 'Select all';
-        var toolDeselectAll = document.createElement('div');
-        toolDeselectAll.classList.add(defClass + "-deselect-all");
-        toolDeselectAll.title = 'Clear selection';
-        var toolAddColumns = document.createElement('div');
-        toolAddColumns.classList.add(defClass + "-add-columns");
-        toolAddColumns.title = 'Add column';
-        var toolAddCond = document.createElement('div');
-        toolAddCond.classList.add(defClass + "-add-cond");
-        toolAddCond.title = 'Add condition';
-        var toolLeftBlock = document.createElement('div');
-        toolLeftBlock.classList.add(defClass + "-left-side");
-        var toolRightBlock = document.createElement('div');
-        toolRightBlock.classList.add(defClass + "-right-side");
-        var model = this.context.getModel();
-        if (this.options.showSelectAllButton) {
-            toolSelectAll.title = i18n.getText("ButtonSelectAll");
-            toolLeftBlock.appendChild(toolSelectAll);
-            toolSelectAll.addEventListener('click', function () {
-                _this.selectAll();
-            });
-        }
-        if (this.options.showClearSelectionButton) {
-            toolDeselectAll.title = i18n.getText("ButtonDeselectAll");
-            toolLeftBlock.appendChild(toolDeselectAll);
-            toolDeselectAll.addEventListener('click', function () {
-                _this.deselectAll();
-            });
-        }
-        if (this.options.showAddColumnButton) {
-            toolAddColumns.title = i18n.getText("ButtonAddColumns");
-            toolRightBlock.appendChild(toolAddColumns);
-            toolAddColumns.addEventListener('click', function () {
-                var attrElements = _this.panel.querySelectorAll("." + _this.cssPrefix + "-entity-attr");
-                var attrList = [];
-                var attrId;
-                var query = _this.context.getQuery();
-                query.fireProcessEvent({
-                    source: self,
-                    status: "start"
-                });
-                for (var i = 0; i < attrElements.length; i++) {
-                    var attrElement = attrElements[i];
-                    var input = attrElement.getElementsByTagName('input')[0];
-                    if (input.checked) {
-                        attrId = attrElement.getAttribute('data-id');
-                        if (model.checkAttrProperty(attrId, "useInResult")) {
-                            attrList.push(attrId);
-                        }
-                    }
-                }
-                for (var _i = 0, attrList_3 = attrList; _i < attrList_3.length; _i++) {
-                    var attrId_1 = attrList_3[_i];
-                    var attr = model.getAttributeById(attrId_1);
-                    var caption = model.getAttributeText(attr, _this.options.columnTitleFormat);
-                    query.addColumn({
-                        attribute: attr,
-                        caption: caption
-                    });
-                }
-                query.fireChangedEvent();
-                if (_this.options.autoClearSelection) {
-                    _this.deselectAll();
-                }
-                query.fireProcessEvent({
-                    source: self,
-                    status: "finish"
-                });
-            });
-        }
-        if (this.options.showAddConditionButton) {
-            toolAddCond.title = i18n.getText("ButtonAddConditions");
-            toolRightBlock.appendChild(toolAddCond);
-            toolAddCond.addEventListener('click', function () {
-                var attrElements = _this.panel.querySelectorAll("." + _this.cssPrefix + "-entity-attr");
-                var attrList = [];
-                var attrId;
-                var query = _this.context.getQuery();
-                query.fireProcessEvent({
-                    source: self,
-                    status: "start"
-                });
-                for (var i = 0; i < attrElements.length; i++) {
-                    var attrElement = attrElements[i];
-                    var input = attrElement.getElementsByTagName('input')[0];
-                    if (input.checked) {
-                        attrId = attrElement.getAttribute('data-id');
-                        if (model.checkAttrProperty(attrId, "useInConditions")) {
-                            attrList.push(attrId);
-                        }
-                    }
-                }
-                for (var _i = 0, attrList_4 = attrList; _i < attrList_4.length; _i++) {
-                    var attrId_2 = attrList_4[_i];
-                    query.addSimpleCondition({
-                        attributeId: attrId_2
-                    });
-                }
-                query.fireChangedEvent();
-                if (_this.options.autoClearSelection) {
-                    _this.deselectAll();
-                }
-                query.fireProcessEvent({
-                    source: self,
-                    status: "finish"
-                });
-            });
-        }
-        toolPanelBlock.appendChild(toolLeftBlock);
-        toolPanelBlock.appendChild(toolRightBlock);
-        this.panel.appendChild(toolPanelBlock);
-    };
-    EntitiesPanel.prototype.checkFilterAttribute = function (attr) {
-        var inputElem = attr.querySelector('label input');
-        if (inputElem.checked) {
-            return true;
-        }
-        var labelElem = attr.querySelector('label');
-        var attrCaption = labelElem.textContent;
-        if (this.checkFilterText(attrCaption)) {
-            return true;
-        }
-        var entityNode = attr.parentElement.parentElement.querySelector("." + this.cssPrefix + "-entity-node");
-        var entityCaption = entityNode.querySelector('label').textContent;
-        if (this.checkFilterText(entityCaption)) {
-            return true;
-        }
-        return false;
-    };
-    EntitiesPanel.prototype.checkFilterText = function (value) {
-        var filterText = this.filterBoxInput.value;
-        if (filterText == "")
-            return true;
-        if (this.options.filterBoxMode == 0 && value.toLowerCase().indexOf(filterText.toLowerCase()) >= 0)
-            return true;
-        if (this.options.filterBoxMode == 1 && value.toLowerCase().indexOf(filterText.toLowerCase()) == 0)
-            return true;
-        return false;
-    };
-    EntitiesPanel.prototype.refreshCheckedStateByColumns = function () {
-        this.deselectAll();
-        var query = this.context.getQuery();
-        var exprColumns = query.getColumns()
-            .filter(function (col) { return col.expr.tag === ExprTag.EntityAttribute; });
-        for (var _i = 0, exprColumns_1 = exprColumns; _i < exprColumns_1.length; _i++) {
-            var column = exprColumns_1[_i];
-            var attrNode = this.rootEntityBlock
-                .querySelector("." + this.cssPrefix + "-entity-attr[data-id=\"" + column.expr.value + "\"]");
-            var checkbox = attrNode.querySelector("label > input");
-            checkbox.checked = true;
-            var entChildren = attrNode.parentElement;
-            while (entChildren
-                && entChildren.classList
-                    .contains(this.cssPrefix + "-entity-children")) {
-                entChildren.hidden = false;
-                var entElem = entChildren.parentElement;
-                if (entElem && entChildren !== entElem.firstElementChild) {
-                    checkbox = entElem.firstElementChild
-                        .querySelector("label > input");
-                    checkbox.checked = true;
-                    entChildren = entElem.parentElement;
-                }
-                else {
-                    break;
-                }
-            }
-        }
-    };
-    EntitiesPanel.prototype.expandAll = function () {
-        for (var i = 0; i < this.rootEntityBlock.childNodes.length; i++) {
-            var child = this.rootEntityBlock.childNodes[0];
-            var childs = child.querySelectorAll("." + this.cssPrefix + "-entity-children");
-            for (var j = 0; j < childs.length; j++) {
-                var elem = childs[j];
-                elem.hidden = false;
-            }
-        }
-        var nodeButtons = this.rootEntityBlock.querySelectorAll("." + this.cssPrefix + "-entity-node-button");
-        for (var i = 0; i < nodeButtons.length; i++) {
-            var elem = nodeButtons[i];
-            elem.classList.add(this.cssPrefix + "-entity-node-button-open");
-        }
-    };
-    EntitiesPanel.prototype.collapseAll = function () {
-        for (var i = 0; i < this.rootEntityBlock.childNodes.length; i++) {
-            var child = this.rootEntityBlock.childNodes[0];
-            var childs = child.querySelectorAll("." + this.cssPrefix + "-entity-children");
-            for (var j = 0; j < childs.length; j++) {
-                var elem = childs[j];
-                elem.hidden = true;
-            }
-        }
-        var nodeButtons = this.rootEntityBlock.querySelectorAll("." + this.cssPrefix + "-entity-node-button");
-        for (var i = 0; i < nodeButtons.length; i++) {
-            var elem = nodeButtons[i];
-            elem.classList.remove(this.cssPrefix + "-entity-node-button-open");
-        }
-    };
-    EntitiesPanel.prototype.selectAll = function () {
-        var inputs = this.entityTreeBlock.querySelectorAll('input');
-        for (var i = 0; i < inputs.length; i++) {
-            var input = inputs[i];
-            input.checked = true;
-        }
-    };
-    EntitiesPanel.prototype.deselectAll = function () {
-        var inputs = this.entityTreeBlock.querySelectorAll('input');
-        for (var i = 0; i < inputs.length; i++) {
-            var input = inputs[i];
-            input.checked = false;
-        }
-    };
-    EntitiesPanel.prototype.renderProgressBlock = function () {
-        this.progressBlock = document.createElement('div');
-        this.progressBlock.classList.add(eqCssPrefix + "-progress-win8");
-        this.progressBlock.classList.add(browserUtils.getMobileCssClass());
-        this.progressBlock.innerHTML = '<div class="wBall" id="wBall_1"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_2"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_3"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_4"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_5"><div class="wInnerBall"></div></div>';
-    };
-    EntitiesPanel.prototype.clear = function () {
-        this.panel.innerHTML = "";
-    };
-    return EntitiesPanel;
-}(Widget));
-export { EntitiesPanel };
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { i18n } from '@easydata/core';
+import { utils as dataUtils } from '@easydata/core';
+import { Widget, WidgetGroup, ExprTag, QueryChangePart, QueryChangeAction } from '@easyquery/core';
+import { eqDragManager } from '@easydata/ui';
+import { eqCssPrefix } from '../utils/utils';
+import { browserUtils } from '../utils/browser_utils';
+/**
+ * The entities panel wiget, implemented without JQuery.
+ */
+var EntitiesPanel = /** @class */ (function (_super) {
+    __extends(EntitiesPanel, _super);
+    /**
+     * The default constructor.
+     * @param slot The html element.
+     */
+    function EntitiesPanel(slot) {
+        var _this = _super.call(this, slot) || this;
+        _this.queryChangedCallbackId = null;
+        _this.group = WidgetGroup.Model | WidgetGroup.Query;
+        _this.panel = slot;
+        return _this;
+    }
+    Object.defineProperty(EntitiesPanel.prototype, "cssPrefix", {
+        get: function () {
+            return 'eqjs-ep';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    EntitiesPanel.prototype.getWidgetType = function () {
+        return 'entitiesPanel';
+    };
+    /**
+     * Initialize widget.
+     * @param context The context.
+     * @param options The options.
+     */
+    EntitiesPanel.prototype.init = function (context, options) {
+        _super.prototype.init.call(this, context, options);
+        this.setOptions(options);
+        this.renderProgressBlock();
+    };
+    /**
+    * Refresh widget implementation
+    */
+    EntitiesPanel.prototype.refreshCore = function () {
+        this.render();
+        if (this.options.syncWithColumns) {
+            this.refreshCheckedStateByColumns();
+        }
+    };
+    EntitiesPanel.prototype.onProcessStartCore = function () {
+        if (this.options.showIndicatorOnLoad) {
+            if (!this.progressBlock.parentNode)
+                this.panel.appendChild(this.progressBlock);
+        }
+    };
+    EntitiesPanel.prototype.onProcessEndCore = function () {
+        if (this.options.showIndicatorOnLoad) {
+            if (this.progressBlock.parentNode)
+                this.panel.removeChild(this.progressBlock);
+        }
+    };
+    EntitiesPanel.prototype.destroyCore = function () {
+        this.slot.innerHTML = '';
+    };
+    EntitiesPanel.prototype.setOptions = function (options) {
+        var _this = this;
+        this.options = {
+            showToolbar: true,
+            syncWithColumns: false,
+            showSelectAllButton: false,
+            showClearSelectionButton: true,
+            showAddColumnButton: true,
+            showAddConditionButton: true,
+            showCheckboxes: true,
+            showTooltips: true,
+            draggableAttributes: true,
+            showAttributes: { useInConditions: true, useInResult: true, useInSorting: false },
+            showFilterBox: false,
+            filterBoxMode: 0,
+            showIndicatorOnLoad: true,
+            attrPlacement: 0,
+            sortEntities: false,
+            autoClearSelection: true,
+            entityRenderedCallback: null,
+            attributeRenderedCallback: null,
+            columnTitleFormat: '{attr}'
+        };
+        if (options) {
+            dataUtils.assignDeep(this.options, options);
+        }
+        if (this.queryChangedCallbackId) {
+            var query = this.context.getQuery();
+            query.removeChangedCallback(this.queryChangedCallbackId);
+        }
+        if (this.options.syncWithColumns) {
+            var query = this.context.getQuery();
+            this.queryChangedCallbackId = query.addChangedCallback(function (ev) {
+                var edata = ev.data;
+                if (!edata || (edata.part != QueryChangePart.Columns && edata.part != QueryChangePart.All)) {
+                    return;
+                }
+                _this.refreshCheckedStateByColumns();
+            });
+        }
+    };
+    EntitiesPanel.prototype.render = function () {
+        var model = this.context.getModel();
+        ;
+        this.clear();
+        this.panel.classList.add("".concat(this.cssPrefix, "-panel"));
+        this.panel.classList.add(browserUtils.getMobileCssClass());
+        this.rootEntityBlock = document.createElement('div');
+        if (model != null && !model.isEmpty()) {
+            var entTree = model.getEntitiesTree({
+                addUIC: this.options.showAttributes.useInConditions,
+                addUIR: this.options.showAttributes.useInResult,
+                addUIS: this.options.showAttributes.useInSorting,
+                attrPlacement: this.options.attrPlacement,
+                sortEntities: this.options.sortEntities,
+                includeRootData: true
+            });
+            this.entityTreeBlock = this.renderEntity(entTree, this.rootEntityBlock, 0);
+            this.panel.appendChild(this.entityTreeBlock);
+        }
+        if (this.options.showFilterBox) {
+            this.createFilterBox();
+        }
+        else {
+            this.rootEntityBlock.style.top = '0';
+        }
+        if (this.options.showToolbar && !this.options.syncWithColumns) {
+            this.createToolPanel();
+        }
+        else {
+            this.rootEntityBlock.style.bottom = '0';
+        }
+    };
+    EntitiesPanel.prototype.renderEntity = function (entity, block, offset) {
+        var _this = this;
+        var entityBlock;
+        var entityNode = document.createElement('div');
+        entityNode.classList.add("".concat(this.cssPrefix, "-entity-node"));
+        entityNode.classList.add(browserUtils.getMobileCssClass());
+        var entityChildren = document.createElement('div');
+        entityChildren.classList.add("".concat(this.cssPrefix, "-entity-children"));
+        entityChildren.classList.add(browserUtils.getMobileCssClass());
+        var nodeLabel = document.createElement('label');
+        nodeLabel.classList.add("".concat(this.cssPrefix, "-entity-node-label"));
+        var nodeInput = document.createElement('input');
+        nodeInput.type = 'checkbox';
+        nodeInput.title = entity.text;
+        var nodeToggleButton = document.createElement('a');
+        nodeToggleButton.href = 'javascript:void(0)';
+        nodeToggleButton.title = "".concat(i18n.getText("EntityToggle"), " ").concat(entity.text);
+        nodeToggleButton.classList.add("".concat(this.cssPrefix, "-entity-node-button"));
+        var attrNode, attrLabel, attrInput;
+        var currentOffset = offset;
+        var isAttributeInTree = function (attrId, entityBlock) {
+            var res = entityBlock.querySelectorAll(".".concat(_this.cssPrefix, "-entity-attr[data-id=\"").concat(attrId, "\"]"));
+            return res.length > 0;
+        };
+        if (block) {
+            entityBlock = block;
+            entityBlock.innerHTML = '';
+        }
+        else {
+            entityBlock = document.createElement('div');
+        }
+        entityBlock.classList.add("".concat(this.cssPrefix, "-entity"));
+        entityBlock.classList.add(browserUtils.getMobileCssClass());
+        if (entity.id && entity.id != "") {
+            nodeLabel.innerText = entity.text;
+            entityNode.appendChild(nodeLabel); //caption
+            if (this.options.showCheckboxes) {
+                nodeLabel.insertBefore(nodeInput, nodeLabel.firstChild);
+            }
+            entityNode.insertBefore(nodeToggleButton, entityNode.firstChild);
+            if (this.options.showTooltips && entity.description) {
+                nodeLabel.setAttribute('title', entity.description);
+            }
+            for (var i = 0; i < currentOffset; i++) {
+                var divElem = document.createElement('div');
+                divElem.classList.add("".concat(this.cssPrefix, "-entity-offset"));
+                entityNode.insertBefore(divElem, entityNode.firstChild);
+            }
+            entityBlock.appendChild(entityNode);
+            entityChildren.hidden = true;
+            currentOffset++;
+        }
+        var itemsLength = entity.items ? entity.items.length : 0;
+        var _loop_1 = function (i) {
+            var item = entity.items[i];
+            if (item.isEntity) {
+                entityChildren.appendChild(this_1.renderEntity(item, null, currentOffset));
+            }
+            else {
+                if (!item.lookupAttr || !(isAttributeInTree(item.lookupAttr, entityChildren))) {
+                    attrLabel = document.createElement('label');
+                    attrLabel.innerText = item.text;
+                    attrLabel.classList.add("".concat(this_1.cssPrefix, "-entity-attr-label"));
+                    if (this_1.options.showCheckboxes) {
+                        attrInput = document.createElement('input');
+                        attrInput.type = 'checkbox';
+                        attrInput.title = item.text;
+                        attrLabel.insertBefore(attrInput, attrLabel.firstChild);
+                        if (this_1.options.syncWithColumns) {
+                            attrInput.addEventListener('change', function (ev) {
+                                var model = _this.context.getModel();
+                                var query = _this.context.getQuery();
+                                var checkbox = ev.currentTarget;
+                                var attrId = checkbox.parentElement.parentElement.getAttribute('data-id');
+                                if (model.checkAttrProperty(attrId, "useInResult")) {
+                                    if (checkbox.checked) {
+                                        var attr = model.getAttributeById(attrId);
+                                        var caption = model.getAttributeText(attr, _this.options.columnTitleFormat);
+                                        var column = query.addColumn({
+                                            attribute: attr,
+                                            caption: caption
+                                        });
+                                        query.fireColumnsChangedEvent(QueryChangeAction.Add, column);
+                                    }
+                                    else {
+                                        var columns = query.getColumns()
+                                            .filter(function (col) { return col.expr.tag === ExprTag.EntityAttribute
+                                            && col.expr.value === attrId; });
+                                        if (columns.length > 0) {
+                                            query.removeColumn(columns[0], null);
+                                            query.fireColumnsChangedEvent(QueryChangeAction.Delete, columns[0]);
+                                        }
+                                    }
+                                }
+                            });
+                        }
+                    }
+                    if (this_1.options.showTooltips && item.description) {
+                        attrLabel.setAttribute('title', item.description);
+                    }
+                    for (var j = 0; j < currentOffset + 1; j++) {
+                        var divElem = document.createElement('div');
+                        divElem.classList.add("".concat(this_1.cssPrefix, "-entity-offset"));
+                        attrLabel.insertBefore(divElem, attrLabel.firstChild);
+                    }
+                    attrNode = document.createElement('div');
+                    attrNode.classList.add("".concat(this_1.cssPrefix, "-entity-attr"));
+                    if (entityNode.innerHTML.length == 0) {
+                        attrNode.classList.add("".concat(this_1.cssPrefix, "-entity-attr-root"));
+                    }
+                    attrNode.innerHTML = "";
+                    attrNode.appendChild(attrLabel);
+                    attrNode.setAttribute('data-id', item.id);
+                    if (this_1.options.draggableAttributes) {
+                        eqDragManager.registerDraggableItem({
+                            element: attrNode,
+                            scope: "entityAttr",
+                            data: { attrId: item.id },
+                            renderer: function (dragImage) {
+                                dragImage.innerHTML = '';
+                                var attrLabel = document.createElement('span');
+                                attrLabel.innerText = item.text;
+                                dragImage.appendChild(attrLabel);
+                            }
+                        });
+                    }
+                    if (this_1.options.attributeRenderedCallback) {
+                        this_1.options.attributeRenderedCallback(attrNode);
+                    }
+                    entityChildren.appendChild(attrNode);
+                }
+            }
+        };
+        var this_1 = this;
+        for (var i = 0; i < itemsLength; i++) {
+            _loop_1(i);
+        }
+        if (entityChildren.innerHTML.length) {
+            entityBlock.appendChild(entityChildren);
+            nodeToggleButton.addEventListener('click', function (event) {
+                entityChildren.hidden = !entityChildren.hidden;
+                var element = event.target;
+                var className = "".concat(_this.cssPrefix, "-entity-node-button-open");
+                if (element.classList.contains(className)) {
+                    element.classList.remove(className);
+                }
+                else {
+                    element.classList.add(className);
+                }
+                event.preventDefault();
+            });
+        }
+        if (entityChildren) {
+            var checkboxes = entityChildren.querySelectorAll(".".concat(this.cssPrefix, "-entity-attr > label > input"));
+            for (var i = 0; i < checkboxes.length; i++) {
+                var checkbox = checkboxes[i];
+                checkbox.addEventListener('click', function (event) {
+                    var element = event.target;
+                    if (element.checked && !nodeInput.checked) {
+                        nodeInput.checked = true;
+                    }
+                    else if (entityChildren.querySelectorAll('input:checked').length === 0) {
+                        nodeInput.checked = false;
+                    }
+                    event.stopPropagation();
+                });
+            }
+        }
+        nodeInput.addEventListener('click', function (event) {
+            var element = event.target;
+            var entities = entityChildren.querySelectorAll('label input');
+            for (var i = 0; i < entities.length; i++) {
+                var entity_1 = entities[i];
+                entity_1.checked = element.checked;
+            }
+            if (_this.options.syncWithColumns) {
+                var query = _this.context.getQuery();
+                var model = _this.context.getModel();
+                var attrList_2 = [];
+                var attrElems = Array.from(entityChildren.querySelectorAll(".".concat(_this.cssPrefix, "-entity-attr")));
+                for (var _i = 0, attrElems_1 = attrElems; _i < attrElems_1.length; _i++) {
+                    var elem = attrElems_1[_i];
+                    var attrId = elem.getAttribute('data-id');
+                    if (model.checkAttrProperty(attrId, 'useInResult')) {
+                        attrList_2.push(attrId);
+                    }
+                }
+                if (element.checked) {
+                    for (var _a = 0, attrList_1 = attrList_2; _a < attrList_1.length; _a++) {
+                        var attrId = attrList_1[_a];
+                        query.addColumn({ attributeId: attrId });
+                    }
+                }
+                else {
+                    var columns = query.getColumns()
+                        .filter(function (col) { return col.expr.tag === ExprTag.EntityAttribute
+                        && attrList_2.indexOf(col.expr.value) >= 0; });
+                    query.removeColumns(columns, null);
+                }
+                query.fireColumnsChangedEvent();
+            }
+            event.stopPropagation();
+        });
+        if (block != this.rootEntityBlock && this.options.entityRenderedCallback) {
+            this.options.entityRenderedCallback(entityBlock);
+        }
+        return entityBlock;
+    };
+    EntitiesPanel.prototype.createFilterBox = function () {
+        var _this = this;
+        this.filterBoxBlock = document.createElement('div');
+        this.filterBoxBlock.classList.add("".concat(this.cssPrefix, "-filter-box"));
+        this.filterBoxBlock.classList.add(browserUtils.getMobileCssClass());
+        this.filterBoxInput = document.createElement('input');
+        this.filterBoxInput.classList.add("".concat(this.cssPrefix, "-filter-box-input"));
+        this.filterBoxInput.addEventListener('input', function (e) {
+            var attrs = _this.panel.querySelectorAll(".".concat(_this.cssPrefix, "-entity-attr"));
+            for (var i = 0; i < attrs.length; i++) {
+                var attr = attrs[i];
+                attr.hidden = !_this.checkFilterAttribute(attr);
+            }
+            var entities = _this.panel.querySelectorAll(":scope > .".concat(_this.cssPrefix, "-entity"));
+            for (var i = 0; i < entities.length; i++) {
+                var entity = entities[i];
+                var attrs_1 = entity.querySelectorAll(".".concat(_this.cssPrefix, "-entity-attr"));
+                var displayAttrCount = 0;
+                for (var i_1 = 0; i_1 < attrs_1.length; i_1++) {
+                    if (attrs_1[i_1].style.display !== 'None') {
+                        displayAttrCount++;
+                    }
+                }
+                entity.hidden = displayAttrCount === 0;
+            }
+            if (_this.filterBoxInput.value === '')
+                _this.collapseAll();
+            else
+                _this.expandAll();
+        });
+        this.filterBoxBlock.appendChild(this.filterBoxInput);
+        this.panel.insertBefore(this.filterBoxBlock, this.panel.firstChild);
+    };
+    EntitiesPanel.prototype.createToolPanel = function () {
+        var _this = this;
+        var defClass = "".concat(this.cssPrefix, "-tool-panel");
+        var toolPanelBlock = document.createElement('div');
+        toolPanelBlock.classList.add(defClass);
+        toolPanelBlock.classList.add(browserUtils.getMobileCssClass());
+        var toolSelectAll = document.createElement('div');
+        toolSelectAll.classList.add("".concat(defClass, "-select-all"));
+        toolSelectAll.title = 'Select all';
+        var toolDeselectAll = document.createElement('div');
+        toolDeselectAll.classList.add("".concat(defClass, "-deselect-all"));
+        toolDeselectAll.title = 'Clear selection';
+        var toolAddColumns = document.createElement('div');
+        toolAddColumns.classList.add("".concat(defClass, "-add-columns"));
+        toolAddColumns.title = 'Add column';
+        var toolAddCond = document.createElement('div');
+        toolAddCond.classList.add("".concat(defClass, "-add-cond"));
+        toolAddCond.title = 'Add condition';
+        var toolLeftBlock = document.createElement('div');
+        toolLeftBlock.classList.add("".concat(defClass, "-left-side"));
+        var toolRightBlock = document.createElement('div');
+        toolRightBlock.classList.add("".concat(defClass, "-right-side"));
+        var model = this.context.getModel();
+        if (this.options.showSelectAllButton) {
+            toolSelectAll.title = i18n.getText("ButtonSelectAll");
+            toolLeftBlock.appendChild(toolSelectAll);
+            toolSelectAll.addEventListener('click', function () {
+                _this.selectAll();
+            });
+        }
+        if (this.options.showClearSelectionButton) {
+            toolDeselectAll.title = i18n.getText("ButtonDeselectAll");
+            toolLeftBlock.appendChild(toolDeselectAll);
+            toolDeselectAll.addEventListener('click', function () {
+                _this.deselectAll();
+            });
+        }
+        if (this.options.showAddColumnButton) {
+            toolAddColumns.title = i18n.getText("ButtonAddColumns");
+            toolRightBlock.appendChild(toolAddColumns);
+            toolAddColumns.addEventListener('click', function () {
+                var attrElements = _this.panel.querySelectorAll(".".concat(_this.cssPrefix, "-entity-attr"));
+                var attrList = [];
+                var attrId;
+                var query = _this.context.getQuery();
+                query.fireProcessEvent({
+                    source: self,
+                    status: "start"
+                });
+                for (var i = 0; i < attrElements.length; i++) {
+                    var attrElement = attrElements[i];
+                    var input = attrElement.getElementsByTagName('input')[0];
+                    if (input.checked) {
+                        attrId = attrElement.getAttribute('data-id');
+                        if (model.checkAttrProperty(attrId, "useInResult")) {
+                            attrList.push(attrId);
+                        }
+                    }
+                }
+                for (var _i = 0, attrList_3 = attrList; _i < attrList_3.length; _i++) {
+                    var attrId_1 = attrList_3[_i];
+                    var attr = model.getAttributeById(attrId_1);
+                    var caption = model.getAttributeText(attr, _this.options.columnTitleFormat);
+                    query.addColumn({
+                        attribute: attr,
+                        caption: caption
+                    });
+                }
+                query.fireChangedEvent();
+                if (_this.options.autoClearSelection) {
+                    _this.deselectAll();
+                }
+                query.fireProcessEvent({
+                    source: self,
+                    status: "finish"
+                });
+            });
+        }
+        if (this.options.showAddConditionButton) {
+            toolAddCond.title = i18n.getText("ButtonAddConditions");
+            toolRightBlock.appendChild(toolAddCond);
+            toolAddCond.addEventListener('click', function () {
+                var attrElements = _this.panel.querySelectorAll(".".concat(_this.cssPrefix, "-entity-attr"));
+                var attrList = [];
+                var attrId;
+                var query = _this.context.getQuery();
+                query.fireProcessEvent({
+                    source: self,
+                    status: "start"
+                });
+                for (var i = 0; i < attrElements.length; i++) {
+                    var attrElement = attrElements[i];
+                    var input = attrElement.getElementsByTagName('input')[0];
+                    if (input.checked) {
+                        attrId = attrElement.getAttribute('data-id');
+                        if (model.checkAttrProperty(attrId, "useInConditions")) {
+                            attrList.push(attrId);
+                        }
+                    }
+                }
+                for (var _i = 0, attrList_4 = attrList; _i < attrList_4.length; _i++) {
+                    var attrId_2 = attrList_4[_i];
+                    query.addSimpleCondition({
+                        attributeId: attrId_2
+                    });
+                }
+                query.fireChangedEvent();
+                if (_this.options.autoClearSelection) {
+                    _this.deselectAll();
+                }
+                query.fireProcessEvent({
+                    source: self,
+                    status: "finish"
+                });
+            });
+        }
+        toolPanelBlock.appendChild(toolLeftBlock);
+        toolPanelBlock.appendChild(toolRightBlock);
+        this.panel.appendChild(toolPanelBlock);
+    };
+    EntitiesPanel.prototype.checkFilterAttribute = function (attr) {
+        var inputElem = attr.querySelector('label input');
+        if (inputElem.checked) {
+            return true;
+        }
+        var labelElem = attr.querySelector('label');
+        var attrCaption = labelElem.textContent;
+        if (this.checkFilterText(attrCaption)) {
+            return true;
+        }
+        var entityNode = attr.parentElement.parentElement.querySelector(".".concat(this.cssPrefix, "-entity-node"));
+        var entityCaption = entityNode.querySelector('label').textContent;
+        if (this.checkFilterText(entityCaption)) {
+            return true;
+        }
+        return false;
+    };
+    EntitiesPanel.prototype.checkFilterText = function (value) {
+        var filterText = this.filterBoxInput.value;
+        if (filterText == "")
+            return true;
+        if (this.options.filterBoxMode == 0 && value.toLowerCase().indexOf(filterText.toLowerCase()) >= 0)
+            return true;
+        if (this.options.filterBoxMode == 1 && value.toLowerCase().indexOf(filterText.toLowerCase()) == 0)
+            return true;
+        return false;
+    };
+    EntitiesPanel.prototype.refreshCheckedStateByColumns = function () {
+        this.deselectAll();
+        var query = this.context.getQuery();
+        var exprColumns = query.getColumns()
+            .filter(function (col) { return col.expr.tag === ExprTag.EntityAttribute; });
+        for (var _i = 0, exprColumns_1 = exprColumns; _i < exprColumns_1.length; _i++) {
+            var column = exprColumns_1[_i];
+            var attrNode = this.rootEntityBlock
+                .querySelector(".".concat(this.cssPrefix, "-entity-attr[data-id=\"").concat(column.expr.value, "\"]"));
+            var checkbox = attrNode.querySelector("label > input");
+            checkbox.checked = true;
+            var entChildren = attrNode.parentElement;
+            while (entChildren
+                && entChildren.classList
+                    .contains("".concat(this.cssPrefix, "-entity-children"))) {
+                entChildren.hidden = false;
+                var entElem = entChildren.parentElement;
+                if (entElem && entChildren !== entElem.firstElementChild) {
+                    checkbox = entElem.firstElementChild
+                        .querySelector("label > input");
+                    checkbox.checked = true;
+                    entChildren = entElem.parentElement;
+                }
+                else {
+                    break;
+                }
+            }
+        }
+    };
+    EntitiesPanel.prototype.expandAll = function () {
+        for (var i = 0; i < this.rootEntityBlock.childNodes.length; i++) {
+            var child = this.rootEntityBlock.childNodes[0];
+            var childs = child.querySelectorAll(".".concat(this.cssPrefix, "-entity-children"));
+            for (var j = 0; j < childs.length; j++) {
+                var elem = childs[j];
+                elem.hidden = false;
+            }
+        }
+        var nodeButtons = this.rootEntityBlock.querySelectorAll(".".concat(this.cssPrefix, "-entity-node-button"));
+        for (var i = 0; i < nodeButtons.length; i++) {
+            var elem = nodeButtons[i];
+            elem.classList.add("".concat(this.cssPrefix, "-entity-node-button-open"));
+        }
+    };
+    EntitiesPanel.prototype.collapseAll = function () {
+        for (var i = 0; i < this.rootEntityBlock.childNodes.length; i++) {
+            var child = this.rootEntityBlock.childNodes[0];
+            var childs = child.querySelectorAll(".".concat(this.cssPrefix, "-entity-children"));
+            for (var j = 0; j < childs.length; j++) {
+                var elem = childs[j];
+                elem.hidden = true;
+            }
+        }
+        var nodeButtons = this.rootEntityBlock.querySelectorAll(".".concat(this.cssPrefix, "-entity-node-button"));
+        for (var i = 0; i < nodeButtons.length; i++) {
+            var elem = nodeButtons[i];
+            elem.classList.remove("".concat(this.cssPrefix, "-entity-node-button-open"));
+        }
+    };
+    EntitiesPanel.prototype.selectAll = function () {
+        var inputs = this.entityTreeBlock.querySelectorAll('input');
+        for (var i = 0; i < inputs.length; i++) {
+            var input = inputs[i];
+            input.checked = true;
+        }
+    };
+    EntitiesPanel.prototype.deselectAll = function () {
+        var inputs = this.entityTreeBlock.querySelectorAll('input');
+        for (var i = 0; i < inputs.length; i++) {
+            var input = inputs[i];
+            input.checked = false;
+        }
+    };
+    EntitiesPanel.prototype.renderProgressBlock = function () {
+        this.progressBlock = document.createElement('div');
+        this.progressBlock.classList.add("".concat(eqCssPrefix, "-progress-win8"));
+        this.progressBlock.classList.add(browserUtils.getMobileCssClass());
+        this.progressBlock.innerHTML = '<div class="wBall" id="wBall_1"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_2"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_3"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_4"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_5"><div class="wInnerBall"></div></div>';
+    };
+    EntitiesPanel.prototype.clear = function () {
+        this.panel.innerHTML = "";
+    };
+    return EntitiesPanel;
+}(Widget));
+export { EntitiesPanel };
 //# sourceMappingURL=entities_panel.js.map