@easyquery/ui 7.2.3 → 7.2.4-beta03

package/dist/lib/widgets/columns_panel.js

@@ -1,722 +1,740 @@
-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 { DataKind, SortDirection, ExprTag, Widget, WidgetGroup, QueryChangePart, QueryChangeAction } from '@easyquery/core';
-import { eqDragManager, DropEffect, getElementAbsolutePos, domel } from '@easydata/ui';
-import { PopupMenu } from '../utils/popup_menu';
-import { eqCssPrefix, eqCssMobile } from '../utils/utils';
-import { browserUtils } from '../utils/browser_utils';
-import { AggrFuncColumnRendererCP } from './renderers/columnspanel/aggrfunc_column_renderer';
-import { CustomSqlColumnRendererCP } from './renderers/columnspanel/customsql_column_renderer';
-import { SimpleColumnRendererCP } from './renderers/columnspanel/simple_column_renderer';
-var ColumnsPanel = /** @class */ (function (_super) {
-    __extends(ColumnsPanel, _super);
-    function ColumnsPanel(slot) {
-        var _this = _super.call(this, slot) || this;
-        _this.options = {
-            isSubQuery: false,
-            activeColumn: null,
-            showAddRow: true,
-            showHeader: true,
-            showColumnTitles: true,
-            allowAggrColumns: true,
-            allowDuplicates: true,
-            allowCustomExpressions: false,
-            allowSorting: true,
-            attrElementFormat: '{entity} {attr}',
-            titleElementFormat: null,
-            buttons: null,
-            alwaysShowButtons: false,
-            accentActiveColumn: true,
-            allowDragDrop: true,
-            menuOptions: {
-                showSearchBoxAfter: 30,
-                searchBoxAutoFocus: true,
-                activateOnMouseOver: true,
-                adjustHeight: true,
-                itemRenderedCallback: null
-            },
-            attrPlacement: 0,
-            sortEntities: false,
-            columnRenderedCallback: null,
-            customExpressionText: 0,
-            allowHiddenColumns: false,
-            showAddAllForEntity: false
-        };
-        _this.landingSlot = domel('div')
-            .addClass(_this.cssPrefix + "-col-landing-slot")
-            .addChildElement(domel('div')
-            .toDOM())
-            .toDOM();
-        _this.landingIndex = -1;
-        _this.slot.classList.add(_this.cssPrefix + "-panel");
-        _this.group = WidgetGroup.Query;
-        return _this;
-    }
-    Object.defineProperty(ColumnsPanel.prototype, "cssPrefix", {
-        get: function () {
-            return 'eqjs-qc';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ColumnsPanel.prototype.getWidgetType = function () {
-        return 'columnsPanel';
-    };
-    ColumnsPanel.prototype.init = function (context, options) {
-        var _this = this;
-        _super.prototype.init.call(this, context, options);
-        this.setOptions(options);
-        var model = context.getModel();
-        this.detachQueryObserver();
-        this.attachQueryObserver();
-        eqDragManager.removeDropContainer(this.slot);
-        if (this.options.allowDragDrop) {
-            eqDragManager.registerDropContainer({
-                element: this.slot,
-                scopes: ["entityAttr", "entityAttrSort"],
-                onDragEnter: function (container, ev) {
-                    _this.slot.classList.add(eqCssPrefix + "-drophover");
-                    if (ev.item.scope === "entityAttrSort") {
-                        _this.showLandingSlot(ev.pageX, ev.pageY);
-                    }
-                    else {
-                        var attrId = ev.data.attrId;
-                        if (!model.checkAttrProperty(attrId, "useInResult")) {
-                            ev.dropEffect = DropEffect.Forbid;
-                        }
-                        ev.dragImage.classList.add('eqjs-sortable-helper');
-                    }
-                },
-                onDragOver: function (container, ev) {
-                    var attrId = ev.data.attrId;
-                    if (ev.item.scope === "entityAttrSort" ||
-                        model.checkAttrProperty(attrId, "useInResult")) {
-                        _this.showLandingSlot(ev.pageX, ev.pageY);
-                    }
-                },
-                onDragLeave: function (container, ev) {
-                    if (ev.item.scope === "entityAttrSort") {
-                        ev.dropEffect = DropEffect.Forbid;
-                    }
-                    else {
-                        ev.dragImage.classList.remove('eqjs-sortable-helper');
-                        ev.dragImage.style.removeProperty('width');
-                    }
-                    _this.slot.classList.remove(eqCssPrefix + "-drophover");
-                    _this.hideLandingSlot();
-                },
-                onDrop: function (container, ev) {
-                    if (ev.item.scope == "entityAttrSort") {
-                        var query = _this.getQuery();
-                        var columns = query.getColumns();
-                        var index = columns.indexOf(ev.data.column);
-                        _this.moveColumnCore(index, _this.landingIndex);
-                    }
-                    else {
-                        var attrId = ev.data.attrId;
-                        _this.addNewColumn(attrId, _this.landingIndex);
-                    }
-                }
-            });
-        }
-    };
-    ColumnsPanel.prototype.renderBaseElements = function () {
-        var _this = this;
-        var minusHeight = 0;
-        if (this.options.showHeader) {
-            var headerBuilder = domel('div', this.slot)
-                .hide()
-                .addClass(this.cssPrefix + "-header")
-                .addClass(browserUtils.getMobileCssClass())
-                .addChild('div', function (builder) { return builder
-                .addClass(_this.cssPrefix + "-header-expression")
-                .text(i18n.getText('HeaderExpression')); });
-            if (this.options.showColumnTitles !== false) {
-                headerBuilder
-                    .addChild('div', function (builder) { return builder
-                    .addClass(_this.cssPrefix + "-header-title")
-                    .text(i18n.getText('HeaderTitle')); });
-            }
-            this.headerElement = headerBuilder.toDOM();
-            minusHeight += this.headerElement.offsetHeight;
-        }
-        this.columnsBlock =
-            domel('div', this.slot)
-                .addClass(this.cssPrefix + "-columns")
-                .addClass(browserUtils.getMobileCssClass())
-                .toDOM();
-        if (this.options.showAddRow) {
-            this.addRowElement =
-                domel('div', this.slot)
-                    .addClass(eqCssPrefix + "-addrow", this.cssPrefix + "-addrow", eqCssPrefix + "-addrow-empty")
-                    .addClass(browserUtils.getMobileCssClass())
-                    .addChild('a', function (builder) { return builder
-                    .attr('href', 'javascript:void(0)')
-                    .text(i18n.getText('CmdClickToAddColumn'))
-                    .on('click', function (e) {
-                    e.preventDefault();
-                    _this.showEntitiesMenu({
-                        anchor: e.target,
-                        selectedIds: null,
-                        itemSelectedCallback: function (data, items) {
-                            if (data.id === '__AddAll__' && data.extra && Array.isArray(data.extra.ids)) {
-                                data.extra.ids.forEach(function (attrId) { return _this.addNewColumn(attrId); });
-                            }
-                            else {
-                                var attrid = data.id;
-                                _this.addNewColumn(attrid);
-                            }
-                            return false;
-                        }
-                    });
-                }); })
-                    .toDOM();
-            minusHeight += this.addRowElement.offsetHeight;
-        }
-        this.columnsBlock.style.maxHeight = this.slot.offsetHeight - minusHeight - 25 + "px";
-    };
-    ColumnsPanel.prototype.destroyCore = function () {
-        eqDragManager.removeDropContainer(this.slot);
-        this.detachQueryObserver();
-        this.slot.innerHTML = '';
-    };
-    ColumnsPanel.prototype.attachQueryObserver = function () {
-        var _this = this;
-        var query = this.getQuery();
-        this.queryEventCallbackId = query.addChangedCallback(function (event) {
-            //if something has changed, and that change is related to columns
-            var edata = event.data;
-            if (!edata || (edata.part != QueryChangePart.Columns
-                && edata.part != QueryChangePart.Aggregation
-                && edata.part != QueryChangePart.All)) {
-                return;
-            }
-            var focusedBefore = document.activeElement;
-            var isFocusInside = _this.slot.contains(focusedBefore) || focusedBefore == document.body;
-            switch (edata.action) {
-                case QueryChangeAction.Modify: {
-                    var columns = edata.changee;
-                    var modifyColumn_1 = function (column) {
-                        var colEl = _this.columnsBlock.querySelector("div[data-id='" + column.id + "']");
-                        if (colEl) {
-                            var renderer = _this.getColumnRenderer(column, colEl);
-                            if (renderer) {
-                                var newEl = renderer.render();
-                                if (isFocusInside) {
-                                    var focusElem = newEl.querySelector('a') || newEl.querySelector('.eqjs-column-button');
-                                    if (focusElem) {
-                                        focusElem.focus();
-                                    }
-                                }
-                            }
-                        }
-                    };
-                    if (Array.isArray(columns)) {
-                        columns.forEach(function (col) { return modifyColumn_1(col); });
-                    }
-                    else {
-                        modifyColumn_1(columns);
-                    }
-                    _this.agjustHeaderVisibility();
-                    break;
-                }
-                case QueryChangeAction.Add: {
-                    var columns = edata.changee;
-                    var addColumn_1 = function (column) {
-                        var index = query.getColumns().indexOf(column);
-                        var newEl = _this.addColumnElement(column, index);
-                        if (isFocusInside) {
-                            newEl.querySelector("a").focus();
-                        }
-                    };
-                    if (Array.isArray(columns)) {
-                        columns.forEach(function (col) { return addColumn_1(col); });
-                    }
-                    else {
-                        addColumn_1(columns);
-                    }
-                    _this.agjustHeaderVisibility();
-                    break;
-                }
-                case QueryChangeAction.Delete: {
-                    var columns = edata.changee;
-                    var deleteColumn_1 = function (column) {
-                        var colEl = _this.columnsBlock.querySelector("div[data-id='" + column.id + "']");
-                        if (colEl) {
-                            var next = colEl.nextSibling;
-                            var prev = colEl.previousSibling;
-                            _this.columnsBlock.removeChild(colEl);
-                            if (isFocusInside) {
-                                var focusCond = next || prev || _this.addRowElement;
-                                var focusElem = focusCond.querySelector('a') || focusCond.querySelector('.eqjs-column-button');
-                                if (focusElem) {
-                                    focusElem.focus();
-                                }
-                            }
-                        }
-                    };
-                    _this.agjustHeaderVisibility();
-                    if (Array.isArray(columns)) {
-                        columns.forEach(function (col) { return deleteColumn_1(col); });
-                    }
-                    else {
-                        deleteColumn_1(columns);
-                    }
-                    break;
-                }
-                default:
-                    _this.refresh();
-                    break;
-            }
-        });
-    };
-    ColumnsPanel.prototype.detachQueryObserver = function () {
-        if (this.queryEventCallbackId) {
-            var query = this.getQuery();
-            query.removeChangedCallback(this.queryEventCallbackId);
-        }
-    };
-    ColumnsPanel.prototype.getQuery = function () {
-        return this.getContext().getQuery();
-    };
-    ColumnsPanel.prototype.showLandingSlot = function (pageX, pageY) {
-        var rowElems = this.columnsBlock.querySelectorAll("[class*=" + this.cssPrefix + "-row]");
-        var rows = [];
-        for (var i = 0; i < rowElems.length; i++) {
-            var rowElem = rowElems[i];
-            if (rowElem.style.display === 'none')
-                continue;
-            rows.push(rowElem);
-        }
-        if (rows.length === 0) {
-            this.landingIndex = 0;
-            this.columnsBlock.appendChild(this.landingSlot);
-            return;
-        }
-        var landingPos = getElementAbsolutePos(this.landingSlot);
-        if (pageY >= landingPos.y && pageY <= landingPos.y + this.landingSlot.offsetHeight) {
-            return;
-        }
-        var firstRow = rows[0];
-        var rowHeight = firstRow.offsetHeight;
-        var absPos = getElementAbsolutePos(firstRow);
-        var newLandingIndex = (pageY > absPos.y + rowHeight / 2) ? Math.round((pageY - absPos.y + rowHeight / 2) / rowHeight) : 0;
-        if (newLandingIndex > rows.length) {
-            newLandingIndex = rows.length;
-        }
-        if (newLandingIndex != this.landingIndex) {
-            this.landingIndex = newLandingIndex;
-            if (this.landingIndex < rows.length) {
-                this.columnsBlock.insertBefore(this.landingSlot, rows[this.landingIndex]);
-            }
-            else {
-                this.columnsBlock.appendChild(this.landingSlot);
-            }
-            this.landingSlot.scrollIntoView({ block: "center", behavior: "smooth" });
-        }
-    };
-    ColumnsPanel.prototype.hideLandingSlot = function () {
-        var _this = this;
-        this.landingIndex = -1;
-        setTimeout(function () {
-            if (_this.landingSlot.parentElement) {
-                _this.landingSlot.parentElement.removeChild(_this.landingSlot);
-            }
-        }, 10);
-    };
-    ColumnsPanel.prototype.setOptions = function (options) {
-        dataUtils.assignDeep(this.options, options);
-        if (browserUtils.isMobileMode()) {
-            this.options.buttons = ["menu"];
-            this.options.showHeader = false;
-        }
-    };
-    ColumnsPanel.prototype.onProcessStartCore = function () {
-    };
-    ColumnsPanel.prototype.onProcessEndCore = function () {
-    };
-    ColumnsPanel.prototype.refreshCore = function () {
-        this.clear();
-        this.render();
-    };
-    ColumnsPanel.prototype.clear = function () {
-        this.slot.innerHTML = "";
-    };
-    ColumnsPanel.prototype.render = function () {
-        try {
-            this.renderBaseElements();
-            this.createEntitiesMenu();
-            this.createColumnMenus();
-            this.agjustHeaderVisibility();
-            domel(this.slot)
-                .removeClass(eqCssMobile)
-                .addClass(browserUtils.getMobileCssClass());
-            var query = this.context.getQuery();
-            var columns = query.getColumns();
-            for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
-                var column = columns_1[_i];
-                this.columnsBlock.appendChild(this.renderColumn(column));
-            }
-        }
-        catch (err) {
-            var error = err;
-            this.context.throwError({
-                action: "ColumnsPanel rendering",
-                text: error.message,
-                sourceError: error
-            });
-        }
-    };
-    ColumnsPanel.prototype.agjustHeaderVisibility = function () {
-        if (this.headerElement) {
-            var query = this.context.getQuery();
-            var columns = query.getColumns();
-            this.headerElement.style.display = (columns.length) ? '' : 'none';
-        }
-    };
-    ColumnsPanel.prototype.renderColumn = function (column) {
-        var renderer = this.getColumnRenderer(column);
-        if (renderer)
-            return renderer.render();
-        return null;
-    };
-    ColumnsPanel.prototype.toggleColumnPicked = function (column) {
-        var el;
-        var isActive;
-        if (column) {
-            el = this.columnsBlock.querySelector("div[data-id=" + column.id + "]");
-            if (el) {
-                isActive = el.classList.contains('active');
-            }
-        }
-        //clear 'active' in all rows
-        var rows = this.columnsBlock.querySelectorAll("." + this.cssPrefix + "-row");
-        for (var i = 0; i < rows.length; i++) {
-            var row = rows[i];
-            domel(row)
-                .removeClass('active');
-            if (!this.options.alwaysShowButtons) {
-                domel(row)
-                    .data("show-buttons", null);
-            }
-        }
-        if (el && !isActive) {
-            domel(el)
-                .addClass('active')
-                .data("show-buttons", "");
-        }
-    };
-    ColumnsPanel.prototype.addNewColumn = function (attrId, index) {
-        var _this = this;
-        var model = this.getContext().getModel();
-        var query = this.getQuery();
-        var getColumnByAttrId = function (attrid) {
-            var attribute = model.getAttributeById(attrid);
-            if (!attribute) {
-                return null;
-            }
-            if (!attribute.useInResult) {
-                if (attribute.lookupAttr) {
-                    attrid = attribute.lookupAttr;
-                    attribute = model.getAttributeById(attrid);
-                    if (!attribute || !attribute.useInResult) {
-                        return null;
-                    }
-                }
-                else
-                    return null;
-            }
-            var column = query.createColumn();
-            column.caption = _this.getDefaultColumnCaption(attribute);
-            column.sorting = SortDirection.None;
-            column.sortIndex = -1;
-            column.expr.tag = ExprTag.EntityAttribute;
-            column.expr.kind = DataKind.Attribute;
-            column.expr.dataType = attribute.dataType;
-            column.expr.setValue(attrid, true);
-            column.params.concat(attribute.params);
-            return column;
-        };
-        var colToAdd, col;
-        if (Array.isArray(attrId)) {
-            colToAdd = [];
-            for (var i = 0; i < attrId.length; i++) {
-                col = getColumnByAttrId(attrId[i]);
-                if (col) {
-                    colToAdd.push(col);
-                }
-            }
-        }
-        else
-            colToAdd = getColumnByAttrId(attrId);
-        this.addColumn(colToAdd, index);
-        return colToAdd;
-    };
-    ColumnsPanel.prototype.addColumn = function (column, index) {
-        var query = this.getQuery();
-        if (!query) {
-            return;
-        }
-        if (Array.isArray(column))
-            column = this.checkColumnsArray(column);
-        else
-            column = this.checkColumn(column);
-        if (!column || (Array.isArray(column) && column.length == 0)) {
-            return;
-        }
-        query.addColumnObj(column, index, self);
-        query.fireColumnsChangedEvent(QueryChangeAction.Add, column);
-    };
-    //adds one column to the panel on the specified position
-    ColumnsPanel.prototype.addColumnElement = function (column, index) {
-        var rows = this.columnsBlock.querySelectorAll("[class*=" + this.cssPrefix + "-row]");
-        var newColBlock = this.renderColumn(column);
-        if (rows.length > 0) {
-            if (index < rows.length) {
-                this.columnsBlock.insertBefore(newColBlock, rows[index]);
-            }
-            else {
-                this.columnsBlock.appendChild(newColBlock);
-                this.scrollToBottom();
-            }
-        }
-        else {
-            this.columnsBlock.appendChild(newColBlock);
-            this.scrollToBottom();
-        }
-        if (this.options.columnRenderedCallback) {
-            this.options.columnRenderedCallback(newColBlock);
-        }
-        return newColBlock;
-    };
-    ColumnsPanel.prototype.scrollToBottom = function () {
-        this.columnsBlock.scrollTop = this.columnsBlock.scrollHeight - this.columnsBlock.clientHeight;
-    };
-    ColumnsPanel.prototype.checkColumnsArray = function (cols) {
-        var i = 0, len = cols.length;
-        var result = [];
-        for (var i_1 = 0; i_1 < len; i_1++) {
-            if (this.checkColumn(cols[i_1]))
-                result.push(cols[i_1]);
-        }
-        return result;
-    };
-    ColumnsPanel.prototype.checkColumn = function (col) {
-        if (!this.options.allowDuplicates) {
-            var query = this.getQuery();
-            var columns = query.getColumns();
-            for (var i = 0; i < columns.length; i++) {
-                if ((col.expr.tag === ExprTag.EntityAttribute && columns[i].expr.tag === ExprTag.EntityAttribute
-                    || col.expr.tag === ExprTag.ParentEntityAttribute && columns[i].expr.tag === ExprTag.ParentEntityAttribute)
-                    && col.expr.value === columns[i].expr.value) {
-                    return null;
-                }
-            }
-        }
-        return col;
-    };
-    ColumnsPanel.prototype.getDefaultColumnCaption = function (attr) {
-        var format = this.options.titleElementFormat || this.options.attrElementFormat;
-        var model = this.getContext().getModel();
-        return model.getAttributeText(attr, format);
-    };
-    ColumnsPanel.prototype.getColumnsBlock = function () {
-        return this.columnsBlock;
-    };
-    ColumnsPanel.prototype.getColumnRenderer = function (column, slot) {
-        switch (column.expr.tag) {
-            case ExprTag.AggregateFunction:
-                return new AggrFuncColumnRendererCP(this, column, slot);
-            case ExprTag.CustomSql:
-                return new CustomSqlColumnRendererCP(this, column, slot);
-            case ExprTag.EntityAttribute:
-            case ExprTag.ParentEntityAttribute:
-                return new SimpleColumnRendererCP(this, column, slot);
-        }
-        return null;
-    };
-    ColumnsPanel.prototype.areCustomExpressionsAllowed = function () {
-        var query = this.getQuery();
-        return query.isEx() && this.options.allowCustomExpressions;
-    };
-    ColumnsPanel.prototype.addAllColumnsToEntitiesList = function (list) {
-        var _this = this;
-        var attrIds = list.filter(function (item) { return !item.isEntity; }).map(function (item) { return item.id; });
-        if (attrIds.length > 0) {
-            list.unshift({
-                id: '__AddAll__',
-                text: i18n.getText('AddAllForEntityText'),
-                extra: {
-                    ids: attrIds
-                }
-            });
-        }
-        list.forEach(function (item) {
-            if (item.items) {
-                _this.addAllColumnsToEntitiesList(item.items);
-            }
-        });
-    };
-    ColumnsPanel.prototype.createEntitiesMenu = function () {
-        var model = this.getContext().getModel();
-        if (!model || model.isEmpty())
-            return null;
-        var menuId = this.slot.id;
-        if (menuId) {
-            menuId += '-EntitiesMenu';
-        }
-        var entitiesList = model.getEntitiesTree({ addUIC: false, addUIR: true, addUIS: false, attrPlacement: this.options.attrPlacement, sortEntities: this.options.sortEntities });
-        // add [Add all columns] items
-        if (this.options.showAddAllForEntity) {
-            this.addAllColumnsToEntitiesList(entitiesList);
-        }
-        var options = {
-            id: menuId,
-            items: entitiesList,
-            adjustHeight: this.options.adjustEntitiesMenuHeight,
-            domWriteItemsId: this.options.domWriteItemsId
-        };
-        dataUtils.assign(options, this.options.menuOptions);
-        this.entitiesMenu = new PopupMenu(options);
-    };
-    ColumnsPanel.prototype.getSortMenuList = function () {
-        return [
-            { id: 'None', text: i18n.getText('CmdNotSorted') },
-            { id: 'Ascending', text: i18n.getText('CmdAscending') },
-            { id: 'Descending', text: i18n.getText('CmdDescending') },
-            { id: '---', text: '---' }
-        ];
-    };
-    ColumnsPanel.prototype.getMoveMenuList = function () {
-        return [
-            { id: 'MoveTop', text: i18n.getText('CmdMoveToFirst') },
-            { id: 'MoveUp', text: i18n.getText('CmdMoveToPrev') },
-            { id: 'MoveDown', text: i18n.getText('CmdMoveToNext') },
-            { id: 'MoveBottom', text: i18n.getText('CmdMoveToLast') }
-        ];
-    };
-    ColumnsPanel.prototype.createSortMenu = function () {
-        var model = this.getContext().getModel();
-        if (!model || model.isEmpty())
-            return null;
-        var menuId = this.slot.id;
-        if (menuId) {
-            menuId += '-SortMenu';
-        }
-        var items = this.getSortMenuList().concat(this.moveMenu.getItems());
-        var menuOptions = {
-            id: menuId,
-            "items": items,
-            domWriteItemsId: this.options.domWriteItemsId,
-            showSelected: true
-        };
-        dataUtils.assign(menuOptions, this.options.menuOptions);
-        menuOptions.searchBoxAlwaysShown = false;
-        this.sortMenu = new PopupMenu(menuOptions);
-    };
-    ColumnsPanel.prototype.createMoveMenu = function () {
-        var model = this.getContext().getModel();
-        if (!model || model.isEmpty())
-            return null;
-        var menuId = this.slot.id;
-        if (menuId) {
-            menuId += '-MoveMenu';
-        }
-        var items = dataUtils.createArrayFrom(this.getMoveMenuList());
-        if (this.options.allowHiddenColumns) {
-            items.push({ id: '---', text: '---' });
-            items.push({ id: 'IsHidden', text: i18n.getText('CmdHiddenColumn') });
-        }
-        var menuOptions = {
-            "items": items,
-            id: menuId,
-            domWriteItemsId: this.options.domWriteItemsId,
-            showSelected: true
-        };
-        dataUtils.assign(menuOptions, this.options.menuOptions);
-        this.moveMenu = new PopupMenu(menuOptions);
-        menuOptions.searchBoxAlwaysShown = false;
-    };
-    ColumnsPanel.prototype.showEntitiesMenu = function (menuOptions) {
-        this.entitiesMenu.showMenu(menuOptions);
-    };
-    ColumnsPanel.prototype.moveColumn = function (column, direction) {
-        var query = this.getQuery();
-        var columns = query.getColumns();
-        var index = columns.indexOf(column);
-        if (index >= 0) {
-            switch (direction) {
-                case 'MoveTop':
-                    if (index == 0) {
-                        return;
-                    }
-                    this.moveColumnCore(index, 0);
-                    break;
-                case 'MoveUp':
-                    if (index == 0) {
-                        return;
-                    }
-                    this.moveColumnCore(index, index - 1);
-                    break;
-                case 'MoveDown':
-                    if (index == columns.length - 1) {
-                        return;
-                    }
-                    this.moveColumnCore(index, index + 1);
-                    break;
-                case 'MoveBottom':
-                    if (index == columns.length - 1) {
-                        return;
-                    }
-                    this.moveColumnCore(index, columns.length - 1);
-                    break;
-            }
-            ;
-        }
-    };
-    ColumnsPanel.prototype.moveColumnCore = function (index1, index2) {
-        var query = this.getQuery();
-        if (!query)
-            return;
-        var rows = this.columnsBlock.querySelectorAll("[class*=" + this.cssPrefix + "-row]");
-        var colToMove = rows[index1];
-        if (index2 == 0) {
-            this.columnsBlock.insertBefore(colToMove, this.columnsBlock[0]);
-        }
-        else if (index2 > 0 && index2 < rows.length - 1) {
-            if (index1 < index2) {
-                this.columnsBlock.insertBefore(colToMove, rows[index2 + 1]);
-            }
-            else {
-                this.columnsBlock.insertBefore(colToMove, rows[index2]);
-            }
-        }
-        else {
-            this.columnsBlock.appendChild(colToMove);
-        }
-        query.moveColumn(index1, index2);
-        query.fireColumnsChangedEvent();
-    };
-    ColumnsPanel.prototype.createColumnMenus = function () {
-        this.createMoveMenu();
-        if (this.options.allowSorting) {
-            this.createSortMenu();
-        }
-    };
-    return ColumnsPanel;
-}(Widget));
-export { ColumnsPanel };
+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 { DataKind, SortDirection, ExprTag, Widget, WidgetGroup, QueryChangePart, QueryChangeAction } from '@easyquery/core';
+import { eqDragManager, DropEffect, getElementAbsolutePos, domel } from '@easydata/ui';
+import { PopupMenu } from '../utils/popup_menu';
+import { eqCssPrefix, eqCssMobile } from '../utils/utils';
+import { browserUtils } from '../utils/browser_utils';
+import { AggrFuncColumnRendererCP } from './renderers/columnspanel/aggrfunc_column_renderer';
+import { CustomSqlColumnRendererCP } from './renderers/columnspanel/customsql_column_renderer';
+import { SimpleColumnRendererCP } from './renderers/columnspanel/simple_column_renderer';
+var ColumnsPanel = /** @class */ (function (_super) {
+    __extends(ColumnsPanel, _super);
+    function ColumnsPanel(slot) {
+        var _this = _super.call(this, slot) || this;
+        _this.options = {
+            isSubQuery: false,
+            activeColumn: null,
+            showAddRow: true,
+            showHeader: true,
+            showColumnTitles: true,
+            allowAggrColumns: true,
+            allowDuplicates: true,
+            allowCustomExpressions: false,
+            allowSorting: true,
+            attrElementFormat: '{entity} {attr}',
+            titleElementFormat: null,
+            buttons: null,
+            alwaysShowButtons: false,
+            accentActiveColumn: true,
+            allowDragDrop: true,
+            menuOptions: {
+                showSearchBoxAfter: 30,
+                searchBoxAutoFocus: true,
+                activateOnMouseOver: true,
+                adjustHeight: true,
+                itemRenderedCallback: null
+            },
+            attrPlacement: 0,
+            sortEntities: false,
+            columnRenderedCallback: null,
+            customExpressionText: 0,
+            allowHiddenColumns: false,
+            showAddAllForEntity: false,
+            showIndicatorOnLoad: true
+        };
+        _this.landingSlot = domel('div')
+            .addClass("".concat(_this.cssPrefix, "-col-landing-slot"))
+            .addChildElement(domel('div')
+            .toDOM())
+            .toDOM();
+        _this.landingIndex = -1;
+        _this.slot.classList.add("".concat(_this.cssPrefix, "-panel"));
+        _this.group = WidgetGroup.Query;
+        return _this;
+    }
+    Object.defineProperty(ColumnsPanel.prototype, "cssPrefix", {
+        get: function () {
+            return 'eqjs-qc';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ColumnsPanel.prototype.getWidgetType = function () {
+        return 'columnsPanel';
+    };
+    ColumnsPanel.prototype.init = function (context, options) {
+        var _this = this;
+        _super.prototype.init.call(this, context, options);
+        this.setOptions(options);
+        this.renderProgressBlock();
+        var model = context.getModel();
+        this.detachQueryObserver();
+        this.attachQueryObserver();
+        eqDragManager.removeDropContainer(this.slot);
+        if (this.options.allowDragDrop) {
+            eqDragManager.registerDropContainer({
+                element: this.slot,
+                scopes: ["entityAttr", "entityAttrSort"],
+                onDragEnter: function (container, ev) {
+                    _this.slot.classList.add("".concat(eqCssPrefix, "-drophover"));
+                    if (ev.item.scope === "entityAttrSort") {
+                        _this.showLandingSlot(ev.pageX, ev.pageY);
+                    }
+                    else {
+                        var attrId = ev.data.attrId;
+                        if (!model.checkAttrProperty(attrId, "useInResult")) {
+                            ev.dropEffect = DropEffect.Forbid;
+                        }
+                        ev.dragImage.classList.add('eqjs-sortable-helper');
+                    }
+                },
+                onDragOver: function (container, ev) {
+                    var attrId = ev.data.attrId;
+                    if (ev.item.scope === "entityAttrSort" ||
+                        model.checkAttrProperty(attrId, "useInResult")) {
+                        _this.showLandingSlot(ev.pageX, ev.pageY);
+                    }
+                },
+                onDragLeave: function (container, ev) {
+                    if (ev.item.scope === "entityAttrSort") {
+                        ev.dropEffect = DropEffect.Forbid;
+                    }
+                    else {
+                        ev.dragImage.classList.remove('eqjs-sortable-helper');
+                        ev.dragImage.style.removeProperty('width');
+                    }
+                    _this.slot.classList.remove("".concat(eqCssPrefix, "-drophover"));
+                    _this.hideLandingSlot();
+                },
+                onDrop: function (container, ev) {
+                    if (ev.item.scope == "entityAttrSort") {
+                        var query = _this.getQuery();
+                        var columns = query.getColumns();
+                        var index = columns.indexOf(ev.data.column);
+                        _this.moveColumnCore(index, _this.landingIndex);
+                    }
+                    else {
+                        var attrId = ev.data.attrId;
+                        _this.addNewColumn(attrId, _this.landingIndex);
+                    }
+                }
+            });
+        }
+    };
+    ColumnsPanel.prototype.renderBaseElements = function () {
+        var _this = this;
+        var minusHeight = 0;
+        if (this.options.showHeader) {
+            var headerBuilder = domel('div', this.slot)
+                .hide()
+                .addClass("".concat(this.cssPrefix, "-header"))
+                .addClass(browserUtils.getMobileCssClass())
+                .addChild('div', function (builder) { return builder
+                .addClass("".concat(_this.cssPrefix, "-header-expression"))
+                .text(i18n.getText('HeaderExpression')); });
+            if (this.options.showColumnTitles !== false) {
+                headerBuilder
+                    .addChild('div', function (builder) { return builder
+                    .addClass("".concat(_this.cssPrefix, "-header-title"))
+                    .text(i18n.getText('HeaderTitle')); });
+            }
+            this.headerElement = headerBuilder.toDOM();
+            minusHeight += this.headerElement.offsetHeight;
+        }
+        this.columnsBlock =
+            domel('div', this.slot)
+                .addClass("".concat(this.cssPrefix, "-columns"))
+                .addClass(browserUtils.getMobileCssClass())
+                .toDOM();
+        if (this.options.showAddRow) {
+            this.addRowElement =
+                domel('div', this.slot)
+                    .addClass("".concat(eqCssPrefix, "-addrow"), "".concat(this.cssPrefix, "-addrow"), "".concat(eqCssPrefix, "-addrow-empty"))
+                    .addClass(browserUtils.getMobileCssClass())
+                    .addChild('a', function (builder) { return builder
+                    .attr('href', 'javascript:void(0)')
+                    .text(i18n.getText('CmdClickToAddColumn'))
+                    .on('click', function (e) {
+                    e.preventDefault();
+                    _this.showEntitiesMenu({
+                        anchor: e.target,
+                        selectedIds: null,
+                        itemSelectedCallback: function (data, items) {
+                            if (data.id === '__AddAll__' && data.extra && Array.isArray(data.extra.ids)) {
+                                data.extra.ids.forEach(function (attrId) { return _this.addNewColumn(attrId); });
+                            }
+                            else {
+                                var attrid = data.id;
+                                _this.addNewColumn(attrid);
+                            }
+                            return false;
+                        }
+                    });
+                }); })
+                    .toDOM();
+            minusHeight += this.addRowElement.offsetHeight;
+        }
+        this.columnsBlock.style.maxHeight = "".concat(this.slot.offsetHeight - minusHeight - 25, "px");
+    };
+    ColumnsPanel.prototype.destroyCore = function () {
+        eqDragManager.removeDropContainer(this.slot);
+        this.detachQueryObserver();
+        this.slot.innerHTML = '';
+    };
+    ColumnsPanel.prototype.attachQueryObserver = function () {
+        var _this = this;
+        var query = this.getQuery();
+        this.queryEventCallbackId = query.addChangedCallback(function (event) {
+            //if something has changed, and that change is related to columns
+            var edata = event.data;
+            if (!edata || (edata.part != QueryChangePart.Columns
+                && edata.part != QueryChangePart.Aggregation
+                && edata.part != QueryChangePart.All)) {
+                return;
+            }
+            var focusedBefore = document.activeElement;
+            var isFocusInside = _this.slot.contains(focusedBefore) || focusedBefore == document.body;
+            switch (edata.action) {
+                case QueryChangeAction.Modify: {
+                    var columns = edata.changee;
+                    var modifyColumn_1 = function (column) {
+                        var colEl = _this.columnsBlock.querySelector("div[data-id='".concat(column.id, "']"));
+                        if (colEl) {
+                            var renderer = _this.getColumnRenderer(column, colEl);
+                            if (renderer) {
+                                var newEl = renderer.render();
+                                if (isFocusInside) {
+                                    var focusElem = newEl.querySelector('a') || newEl.querySelector('.eqjs-column-button');
+                                    if (focusElem) {
+                                        focusElem.focus();
+                                    }
+                                }
+                            }
+                        }
+                    };
+                    if (Array.isArray(columns)) {
+                        columns.forEach(function (col) { return modifyColumn_1(col); });
+                    }
+                    else {
+                        modifyColumn_1(columns);
+                    }
+                    _this.agjustHeaderVisibility();
+                    break;
+                }
+                case QueryChangeAction.Add: {
+                    var columns = edata.changee;
+                    var addColumn_1 = function (column) {
+                        var index = query.getColumns().indexOf(column);
+                        var newEl = _this.addColumnElement(column, index);
+                        if (isFocusInside) {
+                            newEl.querySelector("a").focus();
+                        }
+                    };
+                    if (Array.isArray(columns)) {
+                        columns.forEach(function (col) { return addColumn_1(col); });
+                    }
+                    else {
+                        addColumn_1(columns);
+                    }
+                    _this.agjustHeaderVisibility();
+                    break;
+                }
+                case QueryChangeAction.Delete: {
+                    var columns = edata.changee;
+                    var deleteColumn_1 = function (column) {
+                        var colEl = _this.columnsBlock.querySelector("div[data-id='".concat(column.id, "']"));
+                        if (colEl) {
+                            var next = colEl.nextSibling;
+                            var prev = colEl.previousSibling;
+                            _this.columnsBlock.removeChild(colEl);
+                            if (isFocusInside) {
+                                var focusCond = next || prev || _this.addRowElement;
+                                var focusElem = focusCond.querySelector('a') || focusCond.querySelector('.eqjs-column-button');
+                                if (focusElem) {
+                                    focusElem.focus();
+                                }
+                            }
+                        }
+                    };
+                    _this.agjustHeaderVisibility();
+                    if (Array.isArray(columns)) {
+                        columns.forEach(function (col) { return deleteColumn_1(col); });
+                    }
+                    else {
+                        deleteColumn_1(columns);
+                    }
+                    break;
+                }
+                default:
+                    _this.refresh();
+                    break;
+            }
+        });
+    };
+    ColumnsPanel.prototype.detachQueryObserver = function () {
+        if (this.queryEventCallbackId) {
+            var query = this.getQuery();
+            query.removeChangedCallback(this.queryEventCallbackId);
+        }
+    };
+    ColumnsPanel.prototype.getQuery = function () {
+        return this.getContext().getQuery();
+    };
+    ColumnsPanel.prototype.showLandingSlot = function (pageX, pageY) {
+        var rowElems = this.columnsBlock.querySelectorAll("[class*=".concat(this.cssPrefix, "-row]"));
+        var rows = [];
+        for (var i = 0; i < rowElems.length; i++) {
+            var rowElem = rowElems[i];
+            if (rowElem.style.display === 'none')
+                continue;
+            rows.push(rowElem);
+        }
+        if (rows.length === 0) {
+            this.landingIndex = 0;
+            this.columnsBlock.appendChild(this.landingSlot);
+            return;
+        }
+        var landingPos = getElementAbsolutePos(this.landingSlot);
+        if (pageY >= landingPos.y && pageY <= landingPos.y + this.landingSlot.offsetHeight) {
+            return;
+        }
+        var firstRow = rows[0];
+        var rowHeight = firstRow.offsetHeight;
+        var absPos = getElementAbsolutePos(firstRow);
+        var newLandingIndex = (pageY > absPos.y + rowHeight / 2) ? Math.round((pageY - absPos.y + rowHeight / 2) / rowHeight) : 0;
+        if (newLandingIndex > rows.length) {
+            newLandingIndex = rows.length;
+        }
+        if (newLandingIndex != this.landingIndex) {
+            this.landingIndex = newLandingIndex;
+            if (this.landingIndex < rows.length) {
+                this.columnsBlock.insertBefore(this.landingSlot, rows[this.landingIndex]);
+            }
+            else {
+                this.columnsBlock.appendChild(this.landingSlot);
+            }
+            this.landingSlot.scrollIntoView({ block: "center", behavior: "smooth" });
+        }
+    };
+    ColumnsPanel.prototype.hideLandingSlot = function () {
+        var _this = this;
+        this.landingIndex = -1;
+        setTimeout(function () {
+            if (_this.landingSlot.parentElement) {
+                _this.landingSlot.parentElement.removeChild(_this.landingSlot);
+            }
+        }, 10);
+    };
+    ColumnsPanel.prototype.setOptions = function (options) {
+        dataUtils.assignDeep(this.options, options);
+        if (browserUtils.isMobileMode()) {
+            this.options.buttons = ["menu"];
+            this.options.showHeader = false;
+        }
+    };
+    ColumnsPanel.prototype.onProcessStartCore = function () {
+        if (this.options.showIndicatorOnLoad) {
+            if (!this.progressBlock.parentNode)
+                this.slot.appendChild(this.progressBlock);
+        }
+    };
+    ColumnsPanel.prototype.onProcessEndCore = function () {
+        if (this.options.showIndicatorOnLoad) {
+            if (this.progressBlock.parentNode)
+                this.slot.removeChild(this.progressBlock);
+        }
+    };
+    ColumnsPanel.prototype.refreshCore = function () {
+        this.clear();
+        this.render();
+    };
+    ColumnsPanel.prototype.clear = function () {
+        this.slot.innerHTML = "";
+    };
+    ColumnsPanel.prototype.render = function () {
+        try {
+            this.renderBaseElements();
+            this.createEntitiesMenu();
+            this.createColumnMenus();
+            this.agjustHeaderVisibility();
+            domel(this.slot)
+                .removeClass(eqCssMobile)
+                .addClass(browserUtils.getMobileCssClass());
+            var query = this.context.getQuery();
+            var columns = query.getColumns();
+            for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
+                var column = columns_1[_i];
+                this.columnsBlock.appendChild(this.renderColumn(column));
+            }
+        }
+        catch (err) {
+            var error = err;
+            this.context.throwError({
+                action: "ColumnsPanel rendering",
+                text: error.message,
+                sourceError: error
+            });
+        }
+    };
+    ColumnsPanel.prototype.agjustHeaderVisibility = function () {
+        if (this.headerElement) {
+            var query = this.context.getQuery();
+            var columns = query.getColumns();
+            this.headerElement.style.display = (columns.length) ? '' : 'none';
+        }
+    };
+    ColumnsPanel.prototype.renderColumn = function (column) {
+        var renderer = this.getColumnRenderer(column);
+        if (renderer)
+            return renderer.render();
+        return null;
+    };
+    ColumnsPanel.prototype.toggleColumnPicked = function (column) {
+        var el;
+        var isActive;
+        if (column) {
+            el = this.columnsBlock.querySelector("div[data-id=".concat(column.id, "]"));
+            if (el) {
+                isActive = el.classList.contains('active');
+            }
+        }
+        //clear 'active' in all rows
+        var rows = this.columnsBlock.querySelectorAll(".".concat(this.cssPrefix, "-row"));
+        for (var i = 0; i < rows.length; i++) {
+            var row = rows[i];
+            domel(row)
+                .removeClass('active');
+            if (!this.options.alwaysShowButtons) {
+                domel(row)
+                    .data("show-buttons", null);
+            }
+        }
+        if (el && !isActive) {
+            domel(el)
+                .addClass('active')
+                .data("show-buttons", "");
+        }
+    };
+    ColumnsPanel.prototype.addNewColumn = function (attrId, index) {
+        var _this = this;
+        var model = this.getContext().getModel();
+        var query = this.getQuery();
+        var getColumnByAttrId = function (attrid) {
+            var attribute = model.getAttributeById(attrid);
+            if (!attribute) {
+                return null;
+            }
+            if (!attribute.useInResult) {
+                if (attribute.lookupAttr) {
+                    attrid = attribute.lookupAttr;
+                    attribute = model.getAttributeById(attrid);
+                    if (!attribute || !attribute.useInResult) {
+                        return null;
+                    }
+                }
+                else
+                    return null;
+            }
+            var column = query.createColumn();
+            column.caption = _this.getDefaultColumnCaption(attribute);
+            column.sorting = SortDirection.None;
+            column.sortIndex = -1;
+            column.expr.tag = ExprTag.EntityAttribute;
+            column.expr.kind = DataKind.Attribute;
+            column.expr.dataType = attribute.dataType;
+            column.expr.setValue(attrid, true);
+            column.params.concat(attribute.params);
+            return column;
+        };
+        var colToAdd, col;
+        if (Array.isArray(attrId)) {
+            colToAdd = [];
+            for (var i = 0; i < attrId.length; i++) {
+                col = getColumnByAttrId(attrId[i]);
+                if (col) {
+                    colToAdd.push(col);
+                }
+            }
+        }
+        else
+            colToAdd = getColumnByAttrId(attrId);
+        this.addColumn(colToAdd, index);
+        return colToAdd;
+    };
+    ColumnsPanel.prototype.addColumn = function (column, index) {
+        var query = this.getQuery();
+        if (!query) {
+            return;
+        }
+        if (Array.isArray(column))
+            column = this.checkColumnsArray(column);
+        else
+            column = this.checkColumn(column);
+        if (!column || (Array.isArray(column) && column.length == 0)) {
+            return;
+        }
+        query.addColumnObj(column, index, self);
+        query.fireColumnsChangedEvent(QueryChangeAction.Add, column);
+    };
+    //adds one column to the panel on the specified position
+    ColumnsPanel.prototype.addColumnElement = function (column, index) {
+        var rows = this.columnsBlock.querySelectorAll("[class*=".concat(this.cssPrefix, "-row]"));
+        var newColBlock = this.renderColumn(column);
+        if (rows.length > 0) {
+            if (index < rows.length) {
+                this.columnsBlock.insertBefore(newColBlock, rows[index]);
+            }
+            else {
+                this.columnsBlock.appendChild(newColBlock);
+                this.scrollToBottom();
+            }
+        }
+        else {
+            this.columnsBlock.appendChild(newColBlock);
+            this.scrollToBottom();
+        }
+        if (this.options.columnRenderedCallback) {
+            this.options.columnRenderedCallback(newColBlock);
+        }
+        return newColBlock;
+    };
+    ColumnsPanel.prototype.scrollToBottom = function () {
+        this.columnsBlock.scrollTop = this.columnsBlock.scrollHeight - this.columnsBlock.clientHeight;
+    };
+    ColumnsPanel.prototype.checkColumnsArray = function (cols) {
+        var i = 0, len = cols.length;
+        var result = [];
+        for (var i_1 = 0; i_1 < len; i_1++) {
+            if (this.checkColumn(cols[i_1]))
+                result.push(cols[i_1]);
+        }
+        return result;
+    };
+    ColumnsPanel.prototype.checkColumn = function (col) {
+        if (!this.options.allowDuplicates) {
+            var query = this.getQuery();
+            var columns = query.getColumns();
+            for (var i = 0; i < columns.length; i++) {
+                if ((col.expr.tag === ExprTag.EntityAttribute && columns[i].expr.tag === ExprTag.EntityAttribute
+                    || col.expr.tag === ExprTag.ParentEntityAttribute && columns[i].expr.tag === ExprTag.ParentEntityAttribute)
+                    && col.expr.value === columns[i].expr.value) {
+                    return null;
+                }
+            }
+        }
+        return col;
+    };
+    ColumnsPanel.prototype.getDefaultColumnCaption = function (attr) {
+        var format = this.options.titleElementFormat || this.options.attrElementFormat;
+        var model = this.getContext().getModel();
+        return model.getAttributeText(attr, format);
+    };
+    ColumnsPanel.prototype.getColumnsBlock = function () {
+        return this.columnsBlock;
+    };
+    ColumnsPanel.prototype.getColumnRenderer = function (column, slot) {
+        switch (column.expr.tag) {
+            case ExprTag.AggregateFunction:
+                return new AggrFuncColumnRendererCP(this, column, slot);
+            case ExprTag.CustomSql:
+                return new CustomSqlColumnRendererCP(this, column, slot);
+            case ExprTag.EntityAttribute:
+            case ExprTag.ParentEntityAttribute:
+                return new SimpleColumnRendererCP(this, column, slot);
+        }
+        return null;
+    };
+    ColumnsPanel.prototype.areCustomExpressionsAllowed = function () {
+        var query = this.getQuery();
+        return query.isEx() && this.options.allowCustomExpressions;
+    };
+    ColumnsPanel.prototype.addAllColumnsToEntitiesList = function (list) {
+        var _this = this;
+        var attrIds = list.filter(function (item) { return !item.isEntity; }).map(function (item) { return item.id; });
+        if (attrIds.length > 0) {
+            list.unshift({
+                id: '__AddAll__',
+                text: i18n.getText('AddAllForEntityText'),
+                extra: {
+                    ids: attrIds
+                }
+            });
+        }
+        list.forEach(function (item) {
+            if (item.items) {
+                _this.addAllColumnsToEntitiesList(item.items);
+            }
+        });
+    };
+    ColumnsPanel.prototype.createEntitiesMenu = function () {
+        var model = this.getContext().getModel();
+        if (!model || model.isEmpty())
+            return null;
+        var menuId = this.slot.id;
+        if (menuId) {
+            menuId += '-EntitiesMenu';
+        }
+        var entitiesList = model.getEntitiesTree({ addUIC: false, addUIR: true, addUIS: false, attrPlacement: this.options.attrPlacement, sortEntities: this.options.sortEntities });
+        // add [Add all columns] items
+        if (this.options.showAddAllForEntity) {
+            this.addAllColumnsToEntitiesList(entitiesList);
+        }
+        var options = {
+            id: menuId,
+            items: entitiesList,
+            adjustHeight: this.options.adjustEntitiesMenuHeight,
+            domWriteItemsId: this.options.domWriteItemsId
+        };
+        dataUtils.assign(options, this.options.menuOptions);
+        this.entitiesMenu = new PopupMenu(options);
+    };
+    ColumnsPanel.prototype.getSortMenuList = function () {
+        return [
+            { id: 'None', text: i18n.getText('CmdNotSorted') },
+            { id: 'Ascending', text: i18n.getText('CmdAscending') },
+            { id: 'Descending', text: i18n.getText('CmdDescending') },
+            { id: '---', text: '---' }
+        ];
+    };
+    ColumnsPanel.prototype.getMoveMenuList = function () {
+        return [
+            { id: 'MoveTop', text: i18n.getText('CmdMoveToFirst') },
+            { id: 'MoveUp', text: i18n.getText('CmdMoveToPrev') },
+            { id: 'MoveDown', text: i18n.getText('CmdMoveToNext') },
+            { id: 'MoveBottom', text: i18n.getText('CmdMoveToLast') }
+        ];
+    };
+    ColumnsPanel.prototype.createSortMenu = function () {
+        var model = this.getContext().getModel();
+        if (!model || model.isEmpty())
+            return null;
+        var menuId = this.slot.id;
+        if (menuId) {
+            menuId += '-SortMenu';
+        }
+        var items = this.getSortMenuList().concat(this.moveMenu.getItems());
+        var menuOptions = {
+            id: menuId,
+            "items": items,
+            domWriteItemsId: this.options.domWriteItemsId,
+            showSelected: true
+        };
+        dataUtils.assign(menuOptions, this.options.menuOptions);
+        menuOptions.searchBoxAlwaysShown = false;
+        this.sortMenu = new PopupMenu(menuOptions);
+    };
+    ColumnsPanel.prototype.createMoveMenu = function () {
+        var model = this.getContext().getModel();
+        if (!model || model.isEmpty())
+            return null;
+        var menuId = this.slot.id;
+        if (menuId) {
+            menuId += '-MoveMenu';
+        }
+        var items = dataUtils.createArrayFrom(this.getMoveMenuList());
+        if (this.options.allowHiddenColumns) {
+            items.push({ id: '---', text: '---' });
+            items.push({ id: 'IsHidden', text: i18n.getText('CmdHiddenColumn') });
+        }
+        var menuOptions = {
+            "items": items,
+            id: menuId,
+            domWriteItemsId: this.options.domWriteItemsId,
+            showSelected: true
+        };
+        dataUtils.assign(menuOptions, this.options.menuOptions);
+        this.moveMenu = new PopupMenu(menuOptions);
+        menuOptions.searchBoxAlwaysShown = false;
+    };
+    ColumnsPanel.prototype.showEntitiesMenu = function (menuOptions) {
+        this.entitiesMenu.showMenu(menuOptions);
+    };
+    ColumnsPanel.prototype.moveColumn = function (column, direction) {
+        var query = this.getQuery();
+        var columns = query.getColumns();
+        var index = columns.indexOf(column);
+        if (index >= 0) {
+            switch (direction) {
+                case 'MoveTop':
+                    if (index == 0) {
+                        return;
+                    }
+                    this.moveColumnCore(index, 0);
+                    break;
+                case 'MoveUp':
+                    if (index == 0) {
+                        return;
+                    }
+                    this.moveColumnCore(index, index - 1);
+                    break;
+                case 'MoveDown':
+                    if (index == columns.length - 1) {
+                        return;
+                    }
+                    this.moveColumnCore(index, index + 1);
+                    break;
+                case 'MoveBottom':
+                    if (index == columns.length - 1) {
+                        return;
+                    }
+                    this.moveColumnCore(index, columns.length - 1);
+                    break;
+            }
+            ;
+        }
+    };
+    ColumnsPanel.prototype.moveColumnCore = function (index1, index2) {
+        var query = this.getQuery();
+        if (!query)
+            return;
+        var rows = this.columnsBlock.querySelectorAll("[class*=".concat(this.cssPrefix, "-row]"));
+        var colToMove = rows[index1];
+        if (index2 == 0) {
+            this.columnsBlock.insertBefore(colToMove, this.columnsBlock[0]);
+        }
+        else if (index2 > 0 && index2 < rows.length - 1) {
+            if (index1 < index2) {
+                this.columnsBlock.insertBefore(colToMove, rows[index2 + 1]);
+            }
+            else {
+                this.columnsBlock.insertBefore(colToMove, rows[index2]);
+            }
+        }
+        else {
+            this.columnsBlock.appendChild(colToMove);
+        }
+        query.moveColumn(index1, index2);
+        query.fireColumnsChangedEvent();
+    };
+    ColumnsPanel.prototype.createColumnMenus = function () {
+        this.createMoveMenu();
+        if (this.options.allowSorting) {
+            this.createSortMenu();
+        }
+    };
+    ColumnsPanel.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>';
+    };
+    return ColumnsPanel;
+}(Widget));
+export { ColumnsPanel };
 //# sourceMappingURL=columns_panel.js.map