@easyquery/ui 7.2.3 → 7.2.4-rc01

package/dist/lib/widgets/renderers/columnspanel/column_renderer_cp.js

@@ -1,818 +1,830 @@
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
-import { SortDirection, QueryChangeAction, i18n } from '@easyquery/core';
-import { eqDragManager, DropEffect, createBrowserEvent, domel } from '@easydata/ui';
-import { eqCssPrefix } from '../../../utils/utils';
-import { PopupMenu } from '../../../utils/popup_menu';
-import { browserUtils } from '../../../utils/browser_utils';
-import { safeFocus } from '../../../utils/utils';
-export var ColumnAction;
-(function (ColumnAction) {
-    ColumnAction[ColumnAction["Enable"] = 0] = "Enable";
-    ColumnAction[ColumnAction["Delete"] = 1] = "Delete";
-    ColumnAction[ColumnAction["Hidden"] = 2] = "Hidden";
-    ColumnAction[ColumnAction["SortingNone"] = 3] = "SortingNone";
-    ColumnAction[ColumnAction["SortingAsc"] = 4] = "SortingAsc";
-    ColumnAction[ColumnAction["SortingDesc"] = 5] = "SortingDesc";
-    ColumnAction[ColumnAction["MoveTop"] = 6] = "MoveTop";
-    ColumnAction[ColumnAction["MoveUp"] = 7] = "MoveUp";
-    ColumnAction[ColumnAction["MoveDown"] = 8] = "MoveDown";
-    ColumnAction[ColumnAction["MoveBottom"] = 9] = "MoveBottom";
-    ColumnAction[ColumnAction["Menu"] = 10] = "Menu";
-    ColumnAction[ColumnAction["Type"] = 11] = "Type";
-    ColumnAction[ColumnAction["Format"] = 12] = "Format";
-})(ColumnAction || (ColumnAction = {}));
-var ColumnRendererCP = /** @class */ (function () {
-    function ColumnRendererCP(panel, column, slot) {
-        this.functionMenu = null;
-        this.formatsMenu = null;
-        this.buttonMenu = null;
-        this.isMouseOverBlock = false;
-        this.keepShowingButtons = false;
-        this.panel = panel;
-        this.column = column;
-        this.element = slot;
-    }
-    Object.defineProperty(ColumnRendererCP.prototype, "cssPrefix", {
-        get: function () {
-            return 'eqjs-qc';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ColumnRendererCP.prototype.render = function () {
-        var _this = this;
-        this.baseAttr = this.getAttribute();
-        if (this.getButtonsToShow().indexOf("sorting") >= 0 && this.column.enabled) {
-            this.sortingButton = this.renderSoringButton(this.column.sorting);
-            if (this.column.sorting !== SortDirection.None) {
-                this.sortingButton.style.display = 'block';
-            }
-        }
-        var builder = domel('div');
-        builder.data('id', this.column.id);
-        if (this.element) {
-            this.element.parentNode
-                .replaceChild(builder.toDOM(), this.element);
-        }
-        this.element = builder.toDOM();
-        if (this.panel.options.allowDragDrop && !browserUtils.isMobileMode()) {
-            eqDragManager.registerDraggableItem({
-                element: this.element,
-                scope: "entityAttrSort",
-                data: { column: this.column },
-                beforeDragStart: function () {
-                    _this.hideButtons();
-                },
-                renderer: function (dragImage) {
-                    dragImage.innerHTML = '';
-                    var attrLabel = document.createElement('span');
-                    attrLabel.innerText = _this.column.caption;
-                    dragImage.classList.add('eqjs-sortable-helper');
-                    dragImage.appendChild(attrLabel);
-                },
-                onDragStart: function (ev) {
-                    _this.element.style.display = 'none';
-                    ev.dropEffect = DropEffect.Allow;
-                },
-                onDragEnd: function (ev) {
-                    if (!ev.data.finishedSuccessfully) {
-                        _this.element.style.removeProperty('display');
-                    }
-                }
-            });
-        }
-        if (this.isEditable()) {
-            this.createFunctionMenu();
-            this.createFormatsMenu();
-        }
-        this.createButtonMenu();
-        builder
-            .addClass(this.getClassesToAdd())
-            .addClass(browserUtils.getMobileCssClass())
-            .addChildElement(this.renderCheckbox())
-            //start sort button
-            .addChild('div', function (builder) { return builder
-            .addClass(eqCssPrefix + "-button-placeholder", _this.cssPrefix + "-button-placeholder", _this.cssPrefix + "-colelement", _this.cssPrefix + "-sortbutton-placeholder")
-            .addChildElement(_this.sortingButton); })
-            // end sort button
-            .addChildElement(this.renderExpressionBlock());
-        if (this.panel.options.showColumnTitles !== false && !browserUtils.isMobileMode()) {
-            builder
-                .addChildElement(this.renderCaptionBlock());
-        }
-        builder
-            //start buttons
-            .addChild('div', function (builder) {
-            builder
-                .addClass(eqCssPrefix + "-column-buttonsBlock", _this.cssPrefix + "-buttonsBlock")
-                .addClass(browserUtils.getMobileCssClass());
-            //start enable button
-            if (_this.getButtonsToShow().indexOf("enable") >= 0 && !_this.column.isReadOnly()) {
-                builder.addChildElement(_this.renderEnabledButton());
-            }
-            //end enable button
-            //start aggr func button
-            if (_this.getButtonsToShow().indexOf("type") >= 0 && _this.column.enabled) {
-                builder.addChildElement(_this.renderColumnTypeButton());
-            }
-            //end aggr func button
-            //start format selector button
-            if (_this.getButtonsToShow().indexOf("format") >= 0 && _this.column.enabled) {
-                builder.addChildElement(_this.renderColumnFormatButton());
-            }
-            //end format selector button
-            //start delete button
-            if (_this.getButtonsToShow().indexOf("delete") >= 0 && !_this.column.isReadOnly()) {
-                builder.addChildElement(_this.renderDeleteButton());
-            }
-            //end delete button
-            //start menu button
-            if (_this.getButtonsToShow().indexOf("menu") >= 0 && !_this.column.isReadOnly()) {
-                builder.addChildElement(_this.renderMenuButton());
-            }
-            //end menu button
-        });
-        //end buttons 
-        if (!browserUtils.isMobileMode()) {
-            //start event listeners
-            builder
-                .on('mouseenter', this.onMouseEnter.bind(this))
-                .on('mouseleave', this.onMouseLeave.bind(this));
-            //end event listeners
-        }
-        if (this.panel.options.accentActiveColumn || browserUtils.isMobileMode()) {
-            builder
-                .on('click', this.onMouseClick.bind(this)); //touchstart
-        }
-        if (this.panel.options.alwaysShowButtons) {
-            this.showButtons();
-        }
-        return this.element;
-    };
-    ColumnRendererCP.prototype.onMouseClick = function (ev) {
-        ev.stopPropagation();
-        this.panel.toggleColumnPicked(this.column);
-        this.adjustButtonsVisibility();
-        if (!browserUtils.isMobileMode()) {
-            this.element.dispatchEvent(createBrowserEvent("mouseenter"));
-        }
-        return false;
-    };
-    ColumnRendererCP.prototype.fireColumnChanged = function () {
-        this.column.fireChangedEvent();
-    };
-    ColumnRendererCP.prototype.refresh = function () {
-        this.render();
-    };
-    ColumnRendererCP.prototype.getAttribute = function () {
-        var model = this.panel.getContext().getModel();
-        return model.getAttributeByIdSafe(this.column.expr.value);
-    };
-    ColumnRendererCP.prototype.renderCaptionBlock = function () {
-        var _this = this;
-        if (!this.column.caption || this.column.caption == '') {
-            this.column.caption = this.getDefaultColumnCaption();
-        }
-        var builder = domel('div')
-            .addClass(this.cssPrefix + "-colelement", this.cssPrefix + "-captionelement")
-            .addClass(browserUtils.getMobileCssClass());
-        if (this.isEditable()) {
-            builder
-                .addChild('a', function (builder) { return builder
-                .attr('href', 'javascript:void(0)')
-                .title(_this.column.caption)
-                .text(_this.column.caption)
-                .on('click', function (ev) {
-                ev.stopPropagation();
-                var element = ev.target;
-                var inputEl = element.parentElement.querySelector('input');
-                if (inputEl) {
-                    element.style.display = 'none';
-                    inputEl.style.removeProperty('display');
-                    inputEl.style.minWidth = "" + element.clientWidth;
-                    inputEl.focus();
-                    _this.element.setAttribute(eqDragManager.DRAG_DISABLED_ATTR, '');
-                }
-                return false;
-            }); } //TO DO:add localization and input field
-            )
-                .addChild('input', function (builder) { return builder
-                .hide()
-                .value(_this.column.caption)
-                .on('blur keydown', function (ev) {
-                var isEndEvent = false;
-                var save = true;
-                if (ev instanceof KeyboardEvent) {
-                    // Enter
-                    if (ev.keyCode === 13) {
-                        isEndEvent = true;
-                        //ESC
-                    }
-                    else if (ev.keyCode === 27) {
-                        isEndEvent = true;
-                        save = false;
-                    }
-                }
-                else if (ev instanceof FocusEvent) {
-                    isEndEvent = true;
-                }
-                if (isEndEvent) {
-                    var inputEl = ev.target;
-                    var aEl = inputEl.parentElement.querySelector('a');
-                    if (aEl) {
-                        aEl.style.removeProperty('display');
-                        inputEl.style.display = 'none';
-                    }
-                    if (save && _this.column.caption !== inputEl.value) {
-                        _this.column.caption = inputEl.value;
-                        _this.fireColumnChanged();
-                    }
-                    else {
-                        inputEl.value = _this.column.caption;
-                        safeFocus(aEl);
-                    }
-                    _this.element.removeAttribute(eqDragManager.DRAG_DISABLED_ATTR);
-                }
-                return true;
-            }); });
-        }
-        else {
-            builder.addChild('span', function (b) {
-                b.text(_this.column.caption)
-                    .title(_this.column.caption);
-            });
-        }
-        return builder.toDOM();
-    };
-    ColumnRendererCP.prototype.renderSoringButton = function (sorting) {
-        var _this = this;
-        var sortButtonCssClass = eqCssPrefix + "-column-sortbutton";
-        var sortButtonDirectionCssClass;
-        switch (sorting) {
-            case SortDirection.Ascending:
-                sortButtonDirectionCssClass = sortButtonCssClass + "-asc";
-                break;
-            case SortDirection.Descending:
-                sortButtonDirectionCssClass = sortButtonCssClass + "-desc";
-                break;
-            default:
-                sortButtonDirectionCssClass = sortButtonCssClass + "-none";
-                break;
-        }
-        if (!this.isEditable()) {
-            if (sorting === SortDirection.Ascending
-                || sorting === SortDirection.Descending)
-                return domel('div')
-                    .addClass(sortButtonCssClass, eqCssPrefix + "-button", sortButtonDirectionCssClass)
-                    .title(i18n.getText('ButtonSorting'))
-                    .toDOM();
-            return null;
-        }
-        return domel('div')
-            .addClass(sortButtonCssClass, eqCssPrefix + "-button", sortButtonDirectionCssClass)
-            .data("btnplaceholder", "")
-            .title(i18n.getText('ButtonSorting'))
-            .attr('tabIndex', '0')
-            .on('click', function (ev) {
-            ev.stopPropagation();
-            _this.keepShowingButtons = true;
-            var menu = _this.getUIS() ? _this.panel.sortMenu || _this.panel.moveMenu : _this.panel.moveMenu;
-            menu.showMenu({
-                anchor: _this.sortingButton,
-                selectedIds: _this.column.isHidden() ? ['IsHidden'] : null,
-                itemSelectedCallback: function (data, items) {
-                    var action;
-                    switch (data.id) {
-                        case "IsHidden":
-                            action = ColumnAction.Hidden;
-                            break;
-                        case "MoveTop":
-                            action = ColumnAction.MoveTop;
-                            break;
-                        case "MoveDown":
-                            action = ColumnAction.MoveDown;
-                            break;
-                        case "MoveUp":
-                            action = ColumnAction.MoveUp;
-                            break;
-                        case "MoveBottom":
-                            action = ColumnAction.MoveBottom;
-                            break;
-                        case "None":
-                            action = ColumnAction.SortingNone;
-                            break;
-                        case "Ascending":
-                            action = ColumnAction.SortingAsc;
-                            break;
-                        case "Descending":
-                            action = ColumnAction.SortingDesc;
-                            break;
-                    }
-                    _this.buttonMenuHandler(action, null);
-                },
-                menuClosedCallback: function () {
-                    _this.keepShowingButtons = false;
-                    if (!_this.isMouseOverBlock) {
-                        _this.leaveButtonBlock();
-                    }
-                }
-            });
-        })
-            .on('keypress', function (evt) { if (evt.keyCode == 13) {
-            evt.target.click();
-        } })
-            .toDOM();
-    };
-    ColumnRendererCP.prototype.renderCheckbox = function () {
-        var _this = this;
-        if (this.panel.options.showCheckboxes && !this.column.isReadOnly()) {
-            return domel("div")
-                .title(i18n.getText('CmdToggleEnable'))
-                .attr('tabIndex', '0')
-                .addClass(this.cssPrefix + "-colelement " + this.cssPrefix + "-column-checkbox")
-                .addClass("" + (this.column.enabled ? 'enabled' : ''))
-                .on('click', function () {
-                _this.column.enabled = !_this.column.enabled;
-                _this.column.fireChangedEvent();
-                return false;
-            })
-                .on('keypress', function (evt) { if ([13, 32].includes(evt.keyCode)) {
-                evt.target.click();
-            } })
-                .toDOM();
-        }
-        else {
-            return null;
-        }
-    };
-    ColumnRendererCP.prototype.renderDeleteButton = function () {
-        var _this = this;
-        return domel('div')
-            .addClass(eqCssPrefix + "-button-placeholder", this.cssPrefix + "-button-placeholder", this.cssPrefix + "-deletebutton-placeholder")
-            .data("btnplaceholder", "")
-            .addChild('div', function (b) { return b
-            .addClass(eqCssPrefix + "-button", eqCssPrefix + "-column-button", eqCssPrefix + "-column-button-delete")
-            .title(i18n.getText('CmdDelete'))
-            .attr('tabIndex', '0')
-            .on('click', function (ev) { return _this.buttonMenuHandler(ColumnAction.Delete, ev); }) //touchstart
-            .on('keypress', function (evt) { if (evt.keyCode == 13) {
-            evt.target.click();
-        } }); })
-            .toDOM();
-    };
-    ColumnRendererCP.prototype.renderMenuButton = function () {
-        var _this = this;
-        return domel('div')
-            .addClass(eqCssPrefix + "-button-placeholder", this.cssPrefix + "-button-placeholder", this.cssPrefix + "-menubutton-placeholder")
-            .data("btnplaceholder", "")
-            .addChild('div', function (b) { return b
-            .addClass(eqCssPrefix + "-button", eqCssPrefix + "-column-button", eqCssPrefix + "-column-button-menu")
-            .title(i18n.getText('ButtonMenu'))
-            .attr('tabIndex', '0')
-            .on('click', function (evt) { return _this.buttonMenuHandler(ColumnAction.Menu, evt); }) //touchstart 
-            .on('keypress', function (evt) { if (evt.keyCode == 13) {
-            evt.target.click();
-        } }); })
-            .toDOM();
-    };
-    ColumnRendererCP.prototype.getDefaultColumnCaption = function () {
-        return this.getDefaultTitleText(this.baseAttr);
-    };
-    ColumnRendererCP.prototype.getDefaultTitleText = function (attr) {
-        return this.getAttributeCaption(attr, this.panel.options.titleElementFormat);
-    };
-    ColumnRendererCP.prototype.getAttributeCaption = function (attr, format) {
-        format = format || this.panel.options.attrElementFormat;
-        var model = this.panel.getContext().getModel();
-        return model.getAttributeText(attr, format);
-    };
-    ColumnRendererCP.prototype.getClassesToAdd = function () {
-        var result = "";
-        result += this.column.enabled ? '' : " " + this.cssPrefix + "-disabled";
-        if (this.column.enabled) {
-            result += this.column.isReadOnly() ? " " + this.cssPrefix + "-readonly" : '';
-        }
-        result += this.column.isHidden() ? " " + this.cssPrefix + "-hidden" : '';
-        return result;
-    };
-    ColumnRendererCP.prototype.renderColumnTypeButton = function () {
-        var _this = this;
-        return (this.isEditable() && this.panel.options.allowAggrColumns !== false)
-            ? domel('div')
-                .addClass(eqCssPrefix + "-button-placeholder", this.cssPrefix + "-button-placeholder", this.cssPrefix + "-typebutton-placeholder", this.cssPrefix + "-button-active")
-                .data("btnplaceholder", "")
-                .addChild('div', function (b) { return b
-                .addClass(eqCssPrefix + "-button", eqCssPrefix + "-column-button", eqCssPrefix + "-column-button-type")
-                .title(i18n.getText('ButtonToAggr'))
-                .attr('tabIndex', '0')
-                .on('click', function (ev) {
-                ev.stopPropagation();
-                _this.keepShowingButtons = true;
-                _this.changeTypeHandler(ev);
-            })
-                .on('keypress', function (evt) { if (evt.keyCode == 13) {
-                evt.target.click();
-            } }); })
-                .toDOM()
-            : null;
-    };
-    ColumnRendererCP.prototype.renderColumnFormatButton = function () {
-        var _this = this;
-        var formatItems = this.getFormatsMenuItems();
-        return (this.isEditable() && this.panel.options.allowDisplayFormatChange !== false && formatItems.length > 1)
-            ? domel('div')
-                .addClass(eqCssPrefix + "-button-placeholder", this.cssPrefix + "-button-placeholder", this.cssPrefix + "-formatbutton-placeholder", this.cssPrefix + "-button-active")
-                .data("btnplaceholder", "")
-                .addChild('div', function (b) { return b
-                .addClass(eqCssPrefix + "-button", eqCssPrefix + "-column-button", eqCssPrefix + "-column-button-format")
-                .title(i18n.getText('ButtonFormat'))
-                .attr('tabIndex', '0')
-                .on('click', function (ev) {
-                ev.stopPropagation();
-                _this.keepShowingButtons = true;
-                _this.changeFormatHandler(ev);
-            })
-                .on('keypress', function (evt) { if (evt.keyCode == 13) {
-                evt.target.click();
-            } }); })
-                .toDOM()
-            : null;
-    };
-    ColumnRendererCP.prototype.renderEnabledButton = function () {
-        var _this = this;
-        return domel('div')
-            .addClass(eqCssPrefix + "-button-placeholder", this.cssPrefix + "-button-placeholder", this.cssPrefix + "-enablebutton-placeholder", this.cssPrefix + "-button-active")
-            .data("btnplaceholder", "")
-            .addChild('div', function (b) { return b
-            .addClass(eqCssPrefix + "-button", eqCssPrefix + "-column-button", eqCssPrefix + "-column-button-enable")
-            .title(i18n.getText('CmdToggleEnable'))
-            .addClass(_this.column.enabled ? 'enabled' : '')
-            .attr('tabIndex', '0')
-            .on('click', function (evt) { return _this.buttonMenuHandler(ColumnAction.Enable, evt); }) //touchstart
-            .on('keypress', function (evt) { if (evt.keyCode == 13) {
-            evt.target.click();
-        } }); }).toDOM();
-    };
-    ColumnRendererCP.prototype.isEditable = function () {
-        return this.column.enabled && !this.column.isReadOnly();
-    };
-    ColumnRendererCP.prototype.changeFormatHandler = function (ev) {
-        var _this = this;
-        var formats = this.panel
-            .getContext()
-            .getModel()
-            .getDisplayFormatsForType(this.column.getDataType());
-        var itemId = '{0:__default}';
-        if (formats.filter(function (f) { return f.format == _this.column.displayFormat; }).length > 0) {
-            itemId = this.column.displayFormat;
-        }
-        this.formatsMenu.showMenu({
-            anchor: ev.target,
-            selectedIds: itemId,
-            itemSelectedCallback: function (data, items) {
-                if (data.id != itemId) {
-                    if (data.id == '{0:__default}') {
-                        _this.column.displayFormat = '';
-                    }
-                    else {
-                        _this.column.displayFormat = data.id;
-                    }
-                    _this.column.fireChangedEvent();
-                }
-                return false;
-            },
-            menuClosedCallback: function () {
-                _this.keepShowingButtons = false;
-                if (!_this.isMouseOverBlock) {
-                    _this.element.dispatchEvent(createBrowserEvent('mouseleave'));
-                }
-            }
-        });
-    };
-    ColumnRendererCP.prototype.getUIS = function () {
-        return this.panel
-            .getContext().getModel()
-            .checkAttrProperty(this.column.expr.value, "useInSorting");
-    };
-    ColumnRendererCP.prototype.onMouseEnter = function (e) {
-        this.isMouseOverBlock = true;
-        this.enterButtonBlock();
-        e.stopPropagation();
-        return false;
-    };
-    ColumnRendererCP.prototype.onMouseLeave = function (e) {
-        this.isMouseOverBlock = false;
-        this.leaveButtonBlock();
-        e.stopPropagation();
-        return false;
-    };
-    ColumnRendererCP.prototype.isColumnActive = function () {
-        return this.element.classList.contains("active");
-    };
-    ColumnRendererCP.prototype.hideButtons = function () {
-        domel(this.element).data("show-buttons", null);
-    };
-    ColumnRendererCP.prototype.showButtons = function () {
-        domel(this.element).data("show-buttons", "");
-    };
-    ColumnRendererCP.prototype.adjustButtonsVisibility = function () {
-        if (this.panel.options.alwaysShowButtons ||
-            ((this.panel.options.accentActiveColumn || browserUtils.isMobileMode())
-                && this.isColumnActive())) {
-            this.showButtons();
-        }
-    };
-    ColumnRendererCP.prototype.enterButtonBlock = function () {
-        this.showButtons();
-    };
-    ColumnRendererCP.prototype.leaveButtonBlock = function () {
-        if (!this.keepShowingButtons && this.panel.options.alwaysShowButtons !== true && (!this.isColumnActive() || this.panel.options.accentActiveColumn != true)) {
-            this.hideButtons();
-        }
-    };
-    ColumnRendererCP.prototype.createFunctionMenu = function () {
-        var items = [];
-        var funcs = this.panel.getContext().getModel().getAggrFunctions();
-        var funcAllowed = true;
-        var item = null;
-        var colDataType = this.column.getDataType();
-        var funcCaption;
-        for (var _i = 0, funcs_1 = funcs; _i < funcs_1.length; _i++) {
-            var func = funcs_1[_i];
-            if (!func)
-                continue;
-            var toInclude = func.getAppliedTypesOrDefault().indexOf(colDataType) >= 0;
-            if (this.column.expr.func === func.id && !toInclude) {
-                funcAllowed = false;
-            }
-            if (toInclude) {
-                funcCaption = this.panel.getContext().getModel()
-                    .getAggrFunctionCaption(func.id);
-                item = {
-                    id: func.id,
-                    text: funcCaption
-                };
-                items.push(item);
-            }
-        }
-        if (!funcAllowed) {
-            this.column.expr.func = items[0].id;
-        }
-        //Add "Custom Expression" menu
-        var columnsPanel = this.panel;
-        if (columnsPanel.areCustomExpressionsAllowed()) {
-            item = {
-                id: 'CustomSqlDivider',
-                text: '---'
-            };
-            items.push(item);
-            funcCaption = i18n.getText('CustomExpression');
-            item = {
-                id: 'CUSTOMSQL',
-                text: funcCaption
-            };
-            items.push(item);
-        }
-        var menuId = this.column.id;
-        if (menuId) {
-            menuId += '-FunctionsMenu';
-        }
-        var menuOptions = {
-            items: items,
-            id: menuId,
-            searchBoxAlwaysShown: false,
-            domWriteItemsId: true //this.panel.options.domWriteItemsId
-        };
-        this.functionMenu = new PopupMenu(menuOptions);
-    };
-    ColumnRendererCP.prototype.createFormatsMenu = function () {
-        if (this.panel.options.allowDisplayFormatChange == false)
-            return;
-        var menuId = this.column.id;
-        if (menuId) {
-            menuId += '-FormatsMenu';
-        }
-        var items = this.getFormatsMenuItems();
-        var menuOptions = {
-            items: items,
-            id: menuId,
-            searchBoxAlwaysShown: false,
-            showSelected: true,
-            domWriteItemsId: true //this.panel.options.domWriteItemsId
-        };
-        this.formatsMenu = new PopupMenu(menuOptions);
-    };
-    ColumnRendererCP.prototype.getFormatsMenuItems = function () {
-        var formats = this.panel.getContext().getModel()
-            .getDisplayFormatsForType(this.column.getDataType());
-        return [{ id: '{0:__default}', text: "Default" }]
-            .concat(formats.map(function (format) { return ({ id: format.format, text: i18n.getText("DisplayFormats", format.name) || format.name }); }));
-    };
-    ColumnRendererCP.prototype.getButtonsToShow = function () {
-        return this.panel.options.buttons && Array.isArray(this.panel.options.buttons) ? this.panel.options.buttons : ["enable", "delete", "type", "sorting", "format"];
-    };
-    ColumnRendererCP.prototype.buttonMenuHandler = function (action, evt) {
-        var _this = this;
-        switch (action) {
-            case ColumnAction.Delete:
-                var curQuery = this.column.getQuery();
-                curQuery.removeColumn(this.column, this.panel);
-                curQuery.fireColumnsChangedEvent(QueryChangeAction.Delete, this.column);
-                break;
-            case ColumnAction.Enable:
-                this.column.enabled = !this.column.enabled;
-                this.fireColumnChanged();
-                break;
-            case ColumnAction.Hidden:
-                this.column.setHidden(!this.column.isHidden());
-                this.fireColumnChanged();
-                break;
-            case ColumnAction.MoveTop:
-                this.panel.moveColumn(this.column, "MoveTop");
-                break;
-            case ColumnAction.MoveBottom:
-                this.panel.moveColumn(this.column, "MoveBottom");
-                break;
-            case ColumnAction.MoveUp:
-                this.panel.moveColumn(this.column, "MoveUp");
-                break;
-            case ColumnAction.MoveDown:
-                this.panel.moveColumn(this.column, "MoveDown");
-                break;
-            case ColumnAction.SortingAsc:
-                this.column.sorting = SortDirection.Ascending;
-                this.column.fireChangedEvent();
-                break;
-            case ColumnAction.SortingDesc:
-                this.column.sorting = SortDirection.Descending;
-                this.column.fireChangedEvent();
-                break;
-            case ColumnAction.SortingNone:
-                this.column.sorting = SortDirection.None;
-                this.column.fireChangedEvent();
-                break;
-            case ColumnAction.Menu:
-                var colMenu = this.buttonMenu;
-                this.keepShowingButtons = true;
-                colMenu.showMenu({
-                    anchor: evt ? evt.target : null,
-                    selectedIds: this.getButtonMenuSelectedItems(),
-                    itemSelectedCallback: function (item) {
-                        var action = item.id;
-                        switch (item.id) {
-                            case "enable":
-                                action = ColumnAction.Enable;
-                                break;
-                            case "delete":
-                                action = ColumnAction.Delete;
-                                break;
-                            case "hidden":
-                                action = ColumnAction.Hidden;
-                                break;
-                            case "MoveTop":
-                                action = ColumnAction.MoveTop;
-                                break;
-                            case "MoveBottom":
-                                action = ColumnAction.MoveBottom;
-                                break;
-                            case "MoveUp":
-                                action = ColumnAction.MoveUp;
-                                break;
-                            case "MoveDown":
-                                action = ColumnAction.MoveDown;
-                                break;
-                            case "None":
-                                action = ColumnAction.SortingNone;
-                                break;
-                            case "Ascending":
-                                action = ColumnAction.SortingAsc;
-                                break;
-                            case "Descending":
-                                action = ColumnAction.SortingAsc;
-                                break;
-                        }
-                        _this.buttonMenuHandler(action, evt);
-                    },
-                    itemFilterCallback: function (item) {
-                        var result = _this.column.enabled || item.id === "__group" || item.id === "enable" || item.id === "delete";
-                        return result;
-                    },
-                    menuClosedCallback: function () {
-                        _this.keepShowingButtons = false;
-                        if (!_this.isMouseOverBlock)
-                            _this.leaveButtonBlock();
-                    }
-                });
-                break;
-            default:
-                if (!this.processFormatsButtonMenuItems(action, evt))
-                    this.processExtraButtonMenuItems(action, evt);
-                break;
-        }
-        evt && evt.stopPropagation();
-        return false;
-    };
-    ColumnRendererCP.prototype.createButtonMenu = function () {
-        if (!this.buttonMenu) {
-            var menuId = this.column.id;
-            if (menuId) {
-                menuId += '-ButtonMenu';
-            }
-            var common = [];
-            common.push({
-                id: "enable",
-                text: i18n.getText('MenuEnable')
-            });
-            if (this.panel.options.allowHiddenColumns) {
-                common.push({
-                    id: "hidden",
-                    text: i18n.getText('CmdHiddenColumn')
-                });
-            }
-            common.push({
-                id: "delete",
-                text: i18n.getText('CmdDelete')
-            });
-            var items = [];
-            items.push({
-                id: '__group',
-                text: ' ',
-                items: common
-            });
-            var sortItems = this.panel.options.allowSorting ? __spreadArrays(this.panel.getSortMenuList(), this.panel.getMoveMenuList()) :
-                this.panel.getMoveMenuList();
-            items.push({
-                id: '__group',
-                text: i18n.getText('CmdGroupSort'),
-                items: sortItems
-            });
-            var extra = this.getExtraButtonMenuItems();
-            if (extra && Array.isArray(extra)) {
-                items = __spreadArrays(items, extra);
-            }
-            var formatItems = this.getFormatsMenuItems();
-            if (formatItems.length > 1) {
-                items.push({
-                    id: '__group',
-                    text: i18n.getText('CmdGroupFormat'),
-                    items: formatItems
-                });
-            }
-            var menuOptions = {
-                items: items,
-                id: menuId,
-                searchBoxAlwaysShown: false,
-                domWriteItemsId: true,
-                showSelected: true
-            };
-            this.buttonMenu = new PopupMenu(menuOptions);
-        }
-    };
-    ColumnRendererCP.prototype.processFormatsButtonMenuItems = function (action, evt) {
-        var formats = this.panel
-            .getContext().getModel()
-            .getDisplayFormatsForType(this.column.getDataType());
-        if (action == '{0:__default}') {
-            this.column.displayFormat = '';
-        }
-        else if (formats.filter(function (f) { return f.format == action; }).length > 0) {
-            this.column.displayFormat = action;
-        }
-        else {
-            return false;
-        }
-        this.column.fireChangedEvent();
-        return true;
-    };
-    ColumnRendererCP.prototype.getButtonMenuSelectedItems = function () {
-        var _this = this;
-        var arrSelected = [];
-        if (this.column.enabled) {
-            arrSelected.push("enable");
-        }
-        ;
-        if (this.column.isHidden()) {
-            arrSelected.push("hidden");
-        }
-        ;
-        var formats = this.panel
-            .getContext()
-            .getModel()
-            .getDisplayFormatsForType(this.column.getDataType());
-        var formatId = '{0:__default}';
-        if (formats.filter(function (f) { return f.format == _this.column.displayFormat; }).length > 0) {
-            formatId = this.column.displayFormat;
-        }
-        arrSelected.push(formatId);
-        return arrSelected;
-    };
-    return ColumnRendererCP;
-}());
-export { ColumnRendererCP };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { SortDirection, QueryChangeAction, i18n } from '@easyquery/core';
+import { eqDragManager, DropEffect, createBrowserEvent, domel } from '@easydata/ui';
+import { eqCssPrefix } from '../../../utils/utils';
+import { PopupMenu } from '../../../utils/popup_menu';
+import { browserUtils } from '../../../utils/browser_utils';
+import { safeFocus } from '../../../utils/utils';
+export var ColumnAction;
+(function (ColumnAction) {
+    ColumnAction[ColumnAction["Enable"] = 0] = "Enable";
+    ColumnAction[ColumnAction["Delete"] = 1] = "Delete";
+    ColumnAction[ColumnAction["Hidden"] = 2] = "Hidden";
+    ColumnAction[ColumnAction["SortingNone"] = 3] = "SortingNone";
+    ColumnAction[ColumnAction["SortingAsc"] = 4] = "SortingAsc";
+    ColumnAction[ColumnAction["SortingDesc"] = 5] = "SortingDesc";
+    ColumnAction[ColumnAction["MoveTop"] = 6] = "MoveTop";
+    ColumnAction[ColumnAction["MoveUp"] = 7] = "MoveUp";
+    ColumnAction[ColumnAction["MoveDown"] = 8] = "MoveDown";
+    ColumnAction[ColumnAction["MoveBottom"] = 9] = "MoveBottom";
+    ColumnAction[ColumnAction["Menu"] = 10] = "Menu";
+    ColumnAction[ColumnAction["Type"] = 11] = "Type";
+    ColumnAction[ColumnAction["Format"] = 12] = "Format";
+})(ColumnAction || (ColumnAction = {}));
+var ColumnRendererCP = /** @class */ (function () {
+    function ColumnRendererCP(panel, column, slot) {
+        this.functionMenu = null;
+        this.formatsMenu = null;
+        this.buttonMenu = null;
+        this.isMouseOverBlock = false;
+        this.keepShowingButtons = false;
+        this.panel = panel;
+        this.column = column;
+        this.element = slot;
+    }
+    Object.defineProperty(ColumnRendererCP.prototype, "cssPrefix", {
+        get: function () {
+            return 'eqjs-qc';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ColumnRendererCP.prototype, "columnEnabled", {
+        get: function () {
+            return this.column.enabled;
+        },
+        set: function (value) {
+            this.column.enabled = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ColumnRendererCP.prototype.render = function () {
+        var _this = this;
+        this.baseAttr = this.getAttribute();
+        if (this.getButtonsToShow().indexOf("sorting") >= 0 && this.columnEnabled) {
+            this.sortingButton = this.renderSoringButton(this.column.sorting);
+            if (this.column.sorting !== SortDirection.None) {
+                this.sortingButton.style.display = 'block';
+            }
+        }
+        var builder = domel('div');
+        builder.data('id', this.column.id);
+        if (this.element) {
+            this.element.parentNode
+                .replaceChild(builder.toDOM(), this.element);
+        }
+        this.element = builder.toDOM();
+        if (this.panel.options.allowDragDrop && !browserUtils.isMobileMode()) {
+            eqDragManager.registerDraggableItem({
+                element: this.element,
+                scope: "entityAttrSort",
+                data: { column: this.column },
+                beforeDragStart: function () {
+                    _this.hideButtons();
+                },
+                renderer: function (dragImage) {
+                    dragImage.innerHTML = '';
+                    var attrLabel = document.createElement('span');
+                    attrLabel.innerText = _this.column.caption;
+                    dragImage.classList.add('eqjs-sortable-helper');
+                    dragImage.appendChild(attrLabel);
+                },
+                onDragStart: function (ev) {
+                    _this.element.style.display = 'none';
+                    ev.dropEffect = DropEffect.Allow;
+                },
+                onDragEnd: function (ev) {
+                    if (!ev.data.finishedSuccessfully) {
+                        _this.element.style.removeProperty('display');
+                    }
+                }
+            });
+        }
+        if (this.isEditable()) {
+            this.createFunctionMenu();
+            this.createFormatsMenu();
+        }
+        this.createButtonMenu();
+        builder
+            .addClass(this.getClassesToAdd())
+            .addClass(browserUtils.getMobileCssClass())
+            .addChildElement(this.renderCheckbox())
+            //start sort button
+            .addChild('div', function (builder) { return builder
+            .addClass("".concat(eqCssPrefix, "-button-placeholder"), "".concat(_this.cssPrefix, "-button-placeholder"), "".concat(_this.cssPrefix, "-colelement"), "".concat(_this.cssPrefix, "-sortbutton-placeholder"))
+            .addChildElement(_this.sortingButton); })
+            // end sort button
+            .addChildElement(this.renderExpressionBlock());
+        if (this.panel.options.showColumnTitles !== false && !browserUtils.isMobileMode()) {
+            builder
+                .addChildElement(this.renderCaptionBlock());
+        }
+        builder
+            //start buttons
+            .addChild('div', function (builder) {
+            builder
+                .addClass("".concat(eqCssPrefix, "-column-buttonsBlock"), "".concat(_this.cssPrefix, "-buttonsBlock"))
+                .addClass(browserUtils.getMobileCssClass());
+            //start enable button
+            if (_this.getButtonsToShow().indexOf("enable") >= 0 && !_this.column.isReadOnly()) {
+                builder.addChildElement(_this.renderEnabledButton());
+            }
+            //end enable button
+            //start aggr func button
+            if (_this.getButtonsToShow().indexOf("type") >= 0 && _this.columnEnabled) {
+                builder.addChildElement(_this.renderColumnTypeButton());
+            }
+            //end aggr func button
+            //start format selector button
+            if (_this.getButtonsToShow().indexOf("format") >= 0 && _this.columnEnabled) {
+                builder.addChildElement(_this.renderColumnFormatButton());
+            }
+            //end format selector button
+            //start delete button
+            if (_this.getButtonsToShow().indexOf("delete") >= 0 && !_this.column.isReadOnly()) {
+                builder.addChildElement(_this.renderDeleteButton());
+            }
+            //end delete button
+            //start menu button
+            if (_this.getButtonsToShow().indexOf("menu") >= 0 && !_this.column.isReadOnly()) {
+                builder.addChildElement(_this.renderMenuButton());
+            }
+            //end menu button
+        });
+        //end buttons 
+        if (!browserUtils.isMobileMode()) {
+            //start event listeners
+            builder
+                .on('mouseenter', this.onMouseEnter.bind(this))
+                .on('mouseleave', this.onMouseLeave.bind(this));
+            //end event listeners
+        }
+        if (this.panel.options.accentActiveColumn || browserUtils.isMobileMode()) {
+            builder
+                .on('click', this.onMouseClick.bind(this)); //touchstart
+        }
+        if (this.panel.options.alwaysShowButtons) {
+            this.showButtons();
+        }
+        return this.element;
+    };
+    ColumnRendererCP.prototype.onMouseClick = function (ev) {
+        ev.stopPropagation();
+        this.panel.toggleColumnPicked(this.column);
+        this.adjustButtonsVisibility();
+        if (!browserUtils.isMobileMode()) {
+            this.element.dispatchEvent(createBrowserEvent("mouseenter"));
+        }
+        return false;
+    };
+    ColumnRendererCP.prototype.fireColumnChanged = function () {
+        this.column.fireChangedEvent();
+    };
+    ColumnRendererCP.prototype.refresh = function () {
+        this.render();
+    };
+    ColumnRendererCP.prototype.getAttribute = function () {
+        var model = this.panel.getContext().getModel();
+        return model.getAttributeByIdSafe(this.column.expr.value);
+    };
+    ColumnRendererCP.prototype.renderCaptionBlock = function () {
+        var _this = this;
+        if (!this.column.caption || this.column.caption == '') {
+            this.column.caption = this.getDefaultColumnCaption();
+        }
+        var builder = domel('div')
+            .addClass("".concat(this.cssPrefix, "-colelement"), "".concat(this.cssPrefix, "-captionelement"))
+            .addClass(browserUtils.getMobileCssClass());
+        if (this.isEditable()) {
+            builder
+                .addChild('a', function (builder) { return builder
+                .attr('href', 'javascript:void(0)')
+                .title(_this.column.caption)
+                .text(_this.column.caption)
+                .on('click', function (ev) {
+                ev.stopPropagation();
+                var element = ev.target;
+                var inputEl = element.parentElement.querySelector('input');
+                if (inputEl) {
+                    element.style.display = 'none';
+                    inputEl.style.removeProperty('display');
+                    inputEl.style.minWidth = "".concat(element.clientWidth);
+                    inputEl.focus();
+                    _this.element.setAttribute(eqDragManager.DRAG_DISABLED_ATTR, '');
+                }
+                return false;
+            }); } //TO DO:add localization and input field
+            )
+                .addChild('input', function (builder) { return builder
+                .hide()
+                .value(_this.column.caption)
+                .on('blur keydown', function (ev) {
+                var isEndEvent = false;
+                var save = true;
+                if (ev instanceof KeyboardEvent) {
+                    // Enter
+                    if (ev.keyCode === 13) {
+                        isEndEvent = true;
+                        //ESC
+                    }
+                    else if (ev.keyCode === 27) {
+                        isEndEvent = true;
+                        save = false;
+                    }
+                }
+                else if (ev instanceof FocusEvent) {
+                    isEndEvent = true;
+                }
+                if (isEndEvent) {
+                    var inputEl = ev.target;
+                    var aEl = inputEl.parentElement.querySelector('a');
+                    if (aEl) {
+                        aEl.style.removeProperty('display');
+                        inputEl.style.display = 'none';
+                    }
+                    if (save && _this.column.caption !== inputEl.value) {
+                        _this.column.caption = inputEl.value;
+                        _this.fireColumnChanged();
+                    }
+                    else {
+                        inputEl.value = _this.column.caption;
+                        safeFocus(aEl);
+                    }
+                    _this.element.removeAttribute(eqDragManager.DRAG_DISABLED_ATTR);
+                }
+                return true;
+            }); });
+        }
+        else {
+            builder.addChild('span', function (b) {
+                b.text(_this.column.caption)
+                    .title(_this.column.caption);
+            });
+        }
+        return builder.toDOM();
+    };
+    ColumnRendererCP.prototype.renderSoringButton = function (sorting) {
+        var _this = this;
+        var sortButtonCssClass = "".concat(eqCssPrefix, "-column-sortbutton");
+        var sortButtonDirectionCssClass;
+        switch (sorting) {
+            case SortDirection.Ascending:
+                sortButtonDirectionCssClass = "".concat(sortButtonCssClass, "-asc");
+                break;
+            case SortDirection.Descending:
+                sortButtonDirectionCssClass = "".concat(sortButtonCssClass, "-desc");
+                break;
+            default:
+                sortButtonDirectionCssClass = "".concat(sortButtonCssClass, "-none");
+                break;
+        }
+        if (!this.isEditable()) {
+            if (sorting === SortDirection.Ascending
+                || sorting === SortDirection.Descending)
+                return domel('div')
+                    .addClass(sortButtonCssClass, "".concat(eqCssPrefix, "-button"), sortButtonDirectionCssClass)
+                    .title(i18n.getText('ButtonSorting'))
+                    .toDOM();
+            return null;
+        }
+        return domel('div')
+            .addClass(sortButtonCssClass, "".concat(eqCssPrefix, "-button"), sortButtonDirectionCssClass)
+            .data("btnplaceholder", "")
+            .title(i18n.getText('ButtonSorting'))
+            .attr('tabIndex', '0')
+            .on('click', function (ev) {
+            ev.stopPropagation();
+            _this.keepShowingButtons = true;
+            var menu = _this.getUIS() ? _this.panel.sortMenu || _this.panel.moveMenu : _this.panel.moveMenu;
+            menu.showMenu({
+                anchor: _this.sortingButton,
+                selectedIds: _this.column.isHidden() ? ['IsHidden'] : null,
+                itemSelectedCallback: function (data, items) {
+                    var action;
+                    switch (data.id) {
+                        case "IsHidden":
+                            action = ColumnAction.Hidden;
+                            break;
+                        case "MoveTop":
+                            action = ColumnAction.MoveTop;
+                            break;
+                        case "MoveDown":
+                            action = ColumnAction.MoveDown;
+                            break;
+                        case "MoveUp":
+                            action = ColumnAction.MoveUp;
+                            break;
+                        case "MoveBottom":
+                            action = ColumnAction.MoveBottom;
+                            break;
+                        case "None":
+                            action = ColumnAction.SortingNone;
+                            break;
+                        case "Ascending":
+                            action = ColumnAction.SortingAsc;
+                            break;
+                        case "Descending":
+                            action = ColumnAction.SortingDesc;
+                            break;
+                    }
+                    _this.buttonMenuHandler(action, null);
+                },
+                menuClosedCallback: function () {
+                    _this.keepShowingButtons = false;
+                    if (!_this.isMouseOverBlock) {
+                        _this.leaveButtonBlock();
+                    }
+                }
+            });
+        })
+            .on('keypress', function (evt) { if (evt.keyCode == 13) {
+            evt.target.click();
+        } })
+            .toDOM();
+    };
+    ColumnRendererCP.prototype.renderCheckbox = function () {
+        var _this = this;
+        if (this.panel.options.showCheckboxes && !this.column.isReadOnly()) {
+            return domel("div")
+                .title(i18n.getText('CmdToggleEnable'))
+                .attr('tabIndex', '0')
+                .addClass("".concat(this.cssPrefix, "-colelement ").concat(this.cssPrefix, "-column-checkbox"))
+                .addClass("".concat(this.columnEnabled ? 'enabled' : ''))
+                .on('click', function () {
+                _this.columnEnabled = !_this.columnEnabled;
+                _this.column.fireChangedEvent();
+                return false;
+            })
+                .on('keypress', function (evt) { if ([13, 32].includes(evt.keyCode)) {
+                evt.target.click();
+            } })
+                .toDOM();
+        }
+        else {
+            return null;
+        }
+    };
+    ColumnRendererCP.prototype.renderDeleteButton = function () {
+        var _this = this;
+        return domel('div')
+            .addClass("".concat(eqCssPrefix, "-button-placeholder"), "".concat(this.cssPrefix, "-button-placeholder"), "".concat(this.cssPrefix, "-deletebutton-placeholder"))
+            .data("btnplaceholder", "")
+            .addChild('div', function (b) { return b
+            .addClass("".concat(eqCssPrefix, "-button"), "".concat(eqCssPrefix, "-column-button"), "".concat(eqCssPrefix, "-column-button-delete"))
+            .title(i18n.getText('CmdDelete'))
+            .attr('tabIndex', '0')
+            .on('click', function (ev) { return _this.buttonMenuHandler(ColumnAction.Delete, ev); }) //touchstart
+            .on('keypress', function (evt) { if (evt.keyCode == 13) {
+            evt.target.click();
+        } }); })
+            .toDOM();
+    };
+    ColumnRendererCP.prototype.renderMenuButton = function () {
+        var _this = this;
+        return domel('div')
+            .addClass("".concat(eqCssPrefix, "-button-placeholder"), "".concat(this.cssPrefix, "-button-placeholder"), "".concat(this.cssPrefix, "-menubutton-placeholder"))
+            .data("btnplaceholder", "")
+            .addChild('div', function (b) { return b
+            .addClass("".concat(eqCssPrefix, "-button"), "".concat(eqCssPrefix, "-column-button"), "".concat(eqCssPrefix, "-column-button-menu"))
+            .title(i18n.getText('ButtonMenu'))
+            .attr('tabIndex', '0')
+            .on('click', function (evt) { return _this.buttonMenuHandler(ColumnAction.Menu, evt); }) //touchstart 
+            .on('keypress', function (evt) { if (evt.keyCode == 13) {
+            evt.target.click();
+        } }); })
+            .toDOM();
+    };
+    ColumnRendererCP.prototype.getDefaultColumnCaption = function () {
+        return this.getDefaultTitleText(this.baseAttr);
+    };
+    ColumnRendererCP.prototype.getDefaultTitleText = function (attr) {
+        return this.getAttributeCaption(attr, this.panel.options.titleElementFormat);
+    };
+    ColumnRendererCP.prototype.getAttributeCaption = function (attr, format) {
+        format = format || this.panel.options.attrElementFormat;
+        var model = this.panel.getContext().getModel();
+        return model.getAttributeText(attr, format);
+    };
+    ColumnRendererCP.prototype.getClassesToAdd = function () {
+        var result = "";
+        result += this.columnEnabled ? '' : " ".concat(this.cssPrefix, "-disabled");
+        if (this.columnEnabled) {
+            result += this.column.isReadOnly() ? " ".concat(this.cssPrefix, "-readonly") : '';
+        }
+        result += this.column.isHidden() ? " ".concat(this.cssPrefix, "-hidden") : '';
+        return result;
+    };
+    ColumnRendererCP.prototype.renderColumnTypeButton = function () {
+        var _this = this;
+        return (this.isEditable() && this.panel.options.allowAggrColumns !== false)
+            ? domel('div')
+                .addClass("".concat(eqCssPrefix, "-button-placeholder"), "".concat(this.cssPrefix, "-button-placeholder"), "".concat(this.cssPrefix, "-typebutton-placeholder"), "".concat(this.cssPrefix, "-button-active"))
+                .data("btnplaceholder", "")
+                .addChild('div', function (b) { return b
+                .addClass("".concat(eqCssPrefix, "-button"), "".concat(eqCssPrefix, "-column-button"), "".concat(eqCssPrefix, "-column-button-type"))
+                .title(i18n.getText('ButtonToAggr'))
+                .attr('tabIndex', '0')
+                .on('click', function (ev) {
+                ev.stopPropagation();
+                _this.keepShowingButtons = true;
+                _this.changeTypeHandler(ev);
+            })
+                .on('keypress', function (evt) { if (evt.keyCode == 13) {
+                evt.target.click();
+            } }); })
+                .toDOM()
+            : null;
+    };
+    ColumnRendererCP.prototype.renderColumnFormatButton = function () {
+        var _this = this;
+        var formatItems = this.getFormatsMenuItems();
+        return (this.isEditable() && this.panel.options.allowDisplayFormatChange !== false && formatItems.length > 1)
+            ? domel('div')
+                .addClass("".concat(eqCssPrefix, "-button-placeholder"), "".concat(this.cssPrefix, "-button-placeholder"), "".concat(this.cssPrefix, "-formatbutton-placeholder"), "".concat(this.cssPrefix, "-button-active"))
+                .data("btnplaceholder", "")
+                .addChild('div', function (b) { return b
+                .addClass("".concat(eqCssPrefix, "-button"), "".concat(eqCssPrefix, "-column-button"), "".concat(eqCssPrefix, "-column-button-format"))
+                .title(i18n.getText('ButtonFormat'))
+                .attr('tabIndex', '0')
+                .on('click', function (ev) {
+                ev.stopPropagation();
+                _this.keepShowingButtons = true;
+                _this.changeFormatHandler(ev);
+            })
+                .on('keypress', function (evt) { if (evt.keyCode == 13) {
+                evt.target.click();
+            } }); })
+                .toDOM()
+            : null;
+    };
+    ColumnRendererCP.prototype.renderEnabledButton = function () {
+        var _this = this;
+        return domel('div')
+            .addClass("".concat(eqCssPrefix, "-button-placeholder"), "".concat(this.cssPrefix, "-button-placeholder"), "".concat(this.cssPrefix, "-enablebutton-placeholder"), "".concat(this.cssPrefix, "-button-active"))
+            .data("btnplaceholder", "")
+            .addChild('div', function (b) { return b
+            .addClass("".concat(eqCssPrefix, "-button"), "".concat(eqCssPrefix, "-column-button"), "".concat(eqCssPrefix, "-column-button-enable"))
+            .title(i18n.getText('CmdToggleEnable'))
+            .addClass(_this.columnEnabled ? 'enabled' : '')
+            .attr('tabIndex', '0')
+            .on('click', function (evt) { return _this.buttonMenuHandler(ColumnAction.Enable, evt); }) //touchstart
+            .on('keypress', function (evt) { if (evt.keyCode == 13) {
+            evt.target.click();
+        } }); }).toDOM();
+    };
+    ColumnRendererCP.prototype.isEditable = function () {
+        return this.columnEnabled && !this.column.isReadOnly();
+    };
+    ColumnRendererCP.prototype.changeFormatHandler = function (ev) {
+        var _this = this;
+        var formats = this.panel
+            .getContext()
+            .getModel()
+            .getDisplayFormatsForType(this.column.getDataType());
+        var itemId = '{0:__default}';
+        if (formats.filter(function (f) { return f.format == _this.column.displayFormat; }).length > 0) {
+            itemId = this.column.displayFormat;
+        }
+        this.formatsMenu.showMenu({
+            anchor: ev.target,
+            selectedIds: itemId,
+            itemSelectedCallback: function (data, items) {
+                if (data.id != itemId) {
+                    if (data.id == '{0:__default}') {
+                        _this.column.displayFormat = '';
+                    }
+                    else {
+                        _this.column.displayFormat = data.id;
+                    }
+                    _this.column.fireChangedEvent();
+                }
+                return false;
+            },
+            menuClosedCallback: function () {
+                _this.keepShowingButtons = false;
+                if (!_this.isMouseOverBlock) {
+                    _this.element.dispatchEvent(createBrowserEvent('mouseleave'));
+                }
+            }
+        });
+    };
+    ColumnRendererCP.prototype.getUIS = function () {
+        return this.panel
+            .getContext().getModel()
+            .checkAttrProperty(this.column.expr.value, "useInSorting");
+    };
+    ColumnRendererCP.prototype.onMouseEnter = function (e) {
+        this.isMouseOverBlock = true;
+        this.enterButtonBlock();
+        e.stopPropagation();
+        return false;
+    };
+    ColumnRendererCP.prototype.onMouseLeave = function (e) {
+        this.isMouseOverBlock = false;
+        this.leaveButtonBlock();
+        e.stopPropagation();
+        return false;
+    };
+    ColumnRendererCP.prototype.isColumnActive = function () {
+        return this.element.classList.contains("active");
+    };
+    ColumnRendererCP.prototype.hideButtons = function () {
+        domel(this.element).data("show-buttons", null);
+    };
+    ColumnRendererCP.prototype.showButtons = function () {
+        domel(this.element).data("show-buttons", "");
+    };
+    ColumnRendererCP.prototype.adjustButtonsVisibility = function () {
+        if (this.panel.options.alwaysShowButtons ||
+            ((this.panel.options.accentActiveColumn || browserUtils.isMobileMode())
+                && this.isColumnActive())) {
+            this.showButtons();
+        }
+    };
+    ColumnRendererCP.prototype.enterButtonBlock = function () {
+        this.showButtons();
+    };
+    ColumnRendererCP.prototype.leaveButtonBlock = function () {
+        if (!this.keepShowingButtons && this.panel.options.alwaysShowButtons !== true && (!this.isColumnActive() || this.panel.options.accentActiveColumn != true)) {
+            this.hideButtons();
+        }
+    };
+    ColumnRendererCP.prototype.createFunctionMenu = function () {
+        var items = [];
+        var funcs = this.panel.getContext().getModel().getAggrFunctions();
+        var funcAllowed = true;
+        var item = null;
+        var colDataType = this.column.getDataType();
+        var funcCaption;
+        for (var _i = 0, funcs_1 = funcs; _i < funcs_1.length; _i++) {
+            var func = funcs_1[_i];
+            if (!func)
+                continue;
+            var toInclude = func.getAppliedTypesOrDefault().indexOf(colDataType) >= 0;
+            if (this.column.expr.func === func.id && !toInclude) {
+                funcAllowed = false;
+            }
+            if (toInclude) {
+                funcCaption = this.panel.getContext().getModel()
+                    .getAggrFunctionCaption(func.id);
+                item = {
+                    id: func.id,
+                    text: funcCaption
+                };
+                items.push(item);
+            }
+        }
+        if (!funcAllowed) {
+            this.column.expr.func = items[0].id;
+        }
+        //Add "Custom Expression" menu
+        var columnsPanel = this.panel;
+        if (columnsPanel.areCustomExpressionsAllowed()) {
+            item = {
+                id: 'CustomSqlDivider',
+                text: '---'
+            };
+            items.push(item);
+            funcCaption = i18n.getText('CustomExpression');
+            item = {
+                id: 'CUSTOMSQL',
+                text: funcCaption
+            };
+            items.push(item);
+        }
+        var menuId = this.column.id;
+        if (menuId) {
+            menuId += '-FunctionsMenu';
+        }
+        var menuOptions = {
+            items: items,
+            id: menuId,
+            searchBoxAlwaysShown: false,
+            domWriteItemsId: true //this.panel.options.domWriteItemsId
+        };
+        this.functionMenu = new PopupMenu(menuOptions);
+    };
+    ColumnRendererCP.prototype.createFormatsMenu = function () {
+        if (this.panel.options.allowDisplayFormatChange == false)
+            return;
+        var menuId = this.column.id;
+        if (menuId) {
+            menuId += '-FormatsMenu';
+        }
+        var items = this.getFormatsMenuItems();
+        var menuOptions = {
+            items: items,
+            id: menuId,
+            searchBoxAlwaysShown: false,
+            showSelected: true,
+            domWriteItemsId: true //this.panel.options.domWriteItemsId
+        };
+        this.formatsMenu = new PopupMenu(menuOptions);
+    };
+    ColumnRendererCP.prototype.getFormatsMenuItems = function () {
+        var formats = this.panel.getContext().getModel()
+            .getDisplayFormatsForType(this.column.getDataType());
+        return [{ id: '{0:__default}', text: "Default" }]
+            .concat(formats.map(function (format) { return ({ id: format.format, text: i18n.getText("DisplayFormats", format.name) || format.name }); }));
+    };
+    ColumnRendererCP.prototype.getButtonsToShow = function () {
+        return this.panel.options.buttons && Array.isArray(this.panel.options.buttons) ? this.panel.options.buttons : ["enable", "delete", "type", "sorting", "format"];
+    };
+    ColumnRendererCP.prototype.buttonMenuHandler = function (action, evt) {
+        var _this = this;
+        switch (action) {
+            case ColumnAction.Delete:
+                var curQuery = this.column.getQuery();
+                curQuery.removeColumn(this.column, this.panel);
+                curQuery.fireColumnsChangedEvent(QueryChangeAction.Delete, this.column);
+                break;
+            case ColumnAction.Enable:
+                this.columnEnabled = !this.columnEnabled;
+                this.fireColumnChanged();
+                break;
+            case ColumnAction.Hidden:
+                this.column.setHidden(!this.column.isHidden());
+                this.fireColumnChanged();
+                break;
+            case ColumnAction.MoveTop:
+                this.panel.moveColumn(this.column, "MoveTop");
+                break;
+            case ColumnAction.MoveBottom:
+                this.panel.moveColumn(this.column, "MoveBottom");
+                break;
+            case ColumnAction.MoveUp:
+                this.panel.moveColumn(this.column, "MoveUp");
+                break;
+            case ColumnAction.MoveDown:
+                this.panel.moveColumn(this.column, "MoveDown");
+                break;
+            case ColumnAction.SortingAsc:
+                this.column.sorting = SortDirection.Ascending;
+                this.column.fireChangedEvent();
+                break;
+            case ColumnAction.SortingDesc:
+                this.column.sorting = SortDirection.Descending;
+                this.column.fireChangedEvent();
+                break;
+            case ColumnAction.SortingNone:
+                this.column.sorting = SortDirection.None;
+                this.column.fireChangedEvent();
+                break;
+            case ColumnAction.Menu:
+                var colMenu = this.buttonMenu;
+                this.keepShowingButtons = true;
+                colMenu.showMenu({
+                    anchor: evt ? evt.target : null,
+                    selectedIds: this.getButtonMenuSelectedItems(),
+                    itemSelectedCallback: function (item) {
+                        var action = item.id;
+                        switch (item.id) {
+                            case "enable":
+                                action = ColumnAction.Enable;
+                                break;
+                            case "delete":
+                                action = ColumnAction.Delete;
+                                break;
+                            case "hidden":
+                                action = ColumnAction.Hidden;
+                                break;
+                            case "MoveTop":
+                                action = ColumnAction.MoveTop;
+                                break;
+                            case "MoveBottom":
+                                action = ColumnAction.MoveBottom;
+                                break;
+                            case "MoveUp":
+                                action = ColumnAction.MoveUp;
+                                break;
+                            case "MoveDown":
+                                action = ColumnAction.MoveDown;
+                                break;
+                            case "None":
+                                action = ColumnAction.SortingNone;
+                                break;
+                            case "Ascending":
+                                action = ColumnAction.SortingAsc;
+                                break;
+                            case "Descending":
+                                action = ColumnAction.SortingAsc;
+                                break;
+                        }
+                        _this.buttonMenuHandler(action, evt);
+                    },
+                    itemFilterCallback: function (item) {
+                        var result = _this.columnEnabled || item.id === "__group" || item.id === "enable" || item.id === "delete";
+                        return result;
+                    },
+                    menuClosedCallback: function () {
+                        _this.keepShowingButtons = false;
+                        if (!_this.isMouseOverBlock)
+                            _this.leaveButtonBlock();
+                    }
+                });
+                break;
+            default:
+                if (!this.processFormatsButtonMenuItems(action, evt))
+                    this.processExtraButtonMenuItems(action, evt);
+                break;
+        }
+        evt && evt.stopPropagation();
+        return false;
+    };
+    ColumnRendererCP.prototype.createButtonMenu = function () {
+        if (!this.buttonMenu) {
+            var menuId = this.column.id;
+            if (menuId) {
+                menuId += '-ButtonMenu';
+            }
+            var common = [];
+            common.push({
+                id: "enable",
+                text: i18n.getText('MenuEnable')
+            });
+            if (this.panel.options.allowHiddenColumns) {
+                common.push({
+                    id: "hidden",
+                    text: i18n.getText('CmdHiddenColumn')
+                });
+            }
+            common.push({
+                id: "delete",
+                text: i18n.getText('CmdDelete')
+            });
+            var items = [];
+            items.push({
+                id: '__group',
+                text: ' ',
+                items: common
+            });
+            var sortItems = this.panel.options.allowSorting ? __spreadArray(__spreadArray([], this.panel.getSortMenuList(), true), this.panel.getMoveMenuList(), true) :
+                this.panel.getMoveMenuList();
+            items.push({
+                id: '__group',
+                text: i18n.getText('CmdGroupSort'),
+                items: sortItems
+            });
+            var extra = this.getExtraButtonMenuItems();
+            if (extra && Array.isArray(extra)) {
+                items = __spreadArray(__spreadArray([], items, true), extra, true);
+            }
+            var formatItems = this.getFormatsMenuItems();
+            if (formatItems.length > 1) {
+                items.push({
+                    id: '__group',
+                    text: i18n.getText('CmdGroupFormat'),
+                    items: formatItems
+                });
+            }
+            var menuOptions = {
+                items: items,
+                id: menuId,
+                searchBoxAlwaysShown: false,
+                domWriteItemsId: true,
+                showSelected: true
+            };
+            this.buttonMenu = new PopupMenu(menuOptions);
+        }
+    };
+    ColumnRendererCP.prototype.processFormatsButtonMenuItems = function (action, evt) {
+        var formats = this.panel
+            .getContext().getModel()
+            .getDisplayFormatsForType(this.column.getDataType());
+        if (action == '{0:__default}') {
+            this.column.displayFormat = '';
+        }
+        else if (formats.filter(function (f) { return f.format == action; }).length > 0) {
+            this.column.displayFormat = action;
+        }
+        else {
+            return false;
+        }
+        this.column.fireChangedEvent();
+        return true;
+    };
+    ColumnRendererCP.prototype.getButtonMenuSelectedItems = function () {
+        var _this = this;
+        var arrSelected = [];
+        if (this.columnEnabled) {
+            arrSelected.push("enable");
+        }
+        ;
+        if (this.column.isHidden()) {
+            arrSelected.push("hidden");
+        }
+        ;
+        var formats = this.panel
+            .getContext()
+            .getModel()
+            .getDisplayFormatsForType(this.column.getDataType());
+        var formatId = '{0:__default}';
+        if (formats.filter(function (f) { return f.format == _this.column.displayFormat; }).length > 0) {
+            formatId = this.column.displayFormat;
+        }
+        arrSelected.push(formatId);
+        return arrSelected;
+    };
+    return ColumnRendererCP;
+}());
+export { ColumnRendererCP };
 //# sourceMappingURL=column_renderer_cp.js.map