@easyquery/ui 7.2.3 → 7.2.4-rc01

package/dist/lib/widgets/renderers/columnsbar/column_renderer_cb.js

@@ -1,551 +1,551 @@
-import { i18n } from '@easydata/core';
-import { QueryChangeAction, SortDirection } from '@easyquery/core';
-import { eqDragManager, DropEffect, createBrowserEvent, domel } from '@easydata/ui';
-import { eqCssPrefix } from '../../../utils/utils';
-import { browserUtils } from '../../../utils/browser_utils';
-import { PopupMenu } from '../../../utils/popup_menu';
-var ColumnRendererCB = /** @class */ (function () {
-    function ColumnRendererCB(panel, column, slot) {
-        this.functionMenu = null;
-        this.formatsMenu = null;
-        this.isMouseOverBlock = false;
-        this.keepShowingButtons = false;
-        this.tapedTwice = false;
-        this.bar = panel;
-        this.column = column;
-        this.element = slot;
-    }
-    Object.defineProperty(ColumnRendererCB.prototype, "cssPrefix", {
-        get: function () {
-            return 'eqjs-cb';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ColumnRendererCB.prototype.render = function () {
-        var _this = this;
-        this.baseAttr = this.getAttribute();
-        var builder = domel('div');
-        builder.data('id', this.column.id);
-        if (this.element) {
-            //to remove all event listeners
-            this.element.parentNode
-                .replaceChild(builder.toDOM(), this.element);
-        }
-        this.element = builder.toDOM();
-        if (this.bar.options.allowDragDrop) {
-            eqDragManager.registerDraggableItem({
-                element: this.element,
-                scope: "entityAttrSort",
-                beforeDragStart: function () { return _this.element.dispatchEvent(createBrowserEvent('mouseleave')); },
-                onDragStart: function (ev) {
-                    _this.hideButtons();
-                    _this.element.style.display = 'none';
-                    ev.dropEffect = DropEffect.Allow;
-                },
-                onDragEnd: function (ev) {
-                    if (!ev.data.finishedSuccessfully) {
-                        _this.element.removeAttribute('style');
-                    }
-                },
-                data: { column: this.column }
-            });
-        }
-        if (!this.column.isReadOnly()) {
-            this.createFunctionMenu();
-            this.createFormatsMenu();
-        }
-        builder
-            .addClass(this.getClassesToAdd())
-            .addClass(browserUtils.getMobileCssClass())
-            .addChildElement(this.renderCaptionBlock())
-            .addChildElement(this.renderSortingImage());
-        if (!browserUtils.isMobileMode()) {
-            builder
-                .addChildElement(this.renderButtonsBlock());
-        }
-        //start event listeners
-        builder
-            .on('mouseenter', this.onMouseEnter.bind(this))
-            .on('mouseleave', this.onMouseLeave.bind(this));
-        //end event listeners
-        if (this.bar.options.accentActiveColumn || browserUtils.isMobileMode()) {
-            builder
-                .on('touchstart click', this.onMouseClick.bind(this));
-        }
-        return this.element;
-    };
-    ColumnRendererCB.prototype.fireColumnChanged = function () {
-        this.column.fireChangedEvent();
-    };
-    ColumnRendererCB.prototype.refresh = function () {
-        this.render();
-    };
-    ColumnRendererCB.prototype.getAttribute = function () {
-        var model = this.bar.getContext().getModel();
-        return model.getAttributeByIdSafe(this.column.expr.value);
-    };
-    ColumnRendererCB.prototype.isEditable = function () {
-        return this.column.enabled && !this.column.isReadOnly();
-    };
-    ColumnRendererCB.prototype.renderButtonsBlock = function () {
-        return domel('div', this.element)
-            .addClass(eqCssPrefix + "-column-buttonsBlock", this.cssPrefix + "-buttonsBlock")
-            .addChildElement(this.renderSortingButton())
-            .addChildElement(this.renderColumnTypeButton())
-            .addChildElement(this.renderColumnFormatButton())
-            .addChildElement(this.renderDeleteButton())
-            .toDOM();
-    };
-    ColumnRendererCB.prototype.renderCaptionBlock = function () {
-        var _this = this;
-        if (!this.column.caption || this.column.caption == '') {
-            this.column.caption = this.getDefaultCaption();
-        }
-        var model = this.column.getModel();
-        var caption = this.baseAttr !== model.nullAttribute
-            ? this.column.caption
-            : model.getAttributeText(model.nullAttribute, '{attr}');
-        if (!this.isEditable()) {
-            return domel('div')
-                .addClass(this.cssPrefix + "-colelement", this.cssPrefix + "-captionelement")
-                .addClass(browserUtils.getMobileCssClass())
-                .addChild('div', function (b) { return b
-                .title(_this.column.caption)
-                .text(caption)
-                .attr('tabIndex', '0'); })
-                .toDOM();
-        }
-        var tapHandler = function (ev) {
-            if (!_this.tapedTwice) {
-                _this.tapedTwice = true;
-                setTimeout(function () { _this.tapedTwice = false; }, 300);
-            }
-        };
-        var isFocused = false;
-        domel(this.element).on('touchstart dblclick', function (ev) {
-            if (ev instanceof TouchEvent && !_this.tapedTwice) {
-                tapHandler(ev);
-                return true;
-            }
-            ev.stopPropagation();
-            isFocused = _this.element.querySelector('a') == document.activeElement;
-            var inputEl = _this.element.querySelector("." + _this.cssPrefix + "-captionelement input");
-            var aEl = _this.element.querySelector("." + _this.cssPrefix + "-captionelement a");
-            if (inputEl) {
-                inputEl.style.width = _this.element.clientWidth + "px";
-                aEl.style.display = 'none';
-                inputEl.style.removeProperty('display');
-                inputEl.focus();
-                _this.element.setAttribute(eqDragManager.DRAG_DISABLED_ATTR, '');
-            }
-            return false;
-        }); //TO DO:add localization and input field);
-        return domel('div')
-            .addClass(this.cssPrefix + "-colelement", this.cssPrefix + "-captionelement")
-            .addClass(browserUtils.getMobileCssClass())
-            .addChild('a', function (builder) { return builder
-            .attr('href', 'javascript:void(0)')
-            .title(_this.column.caption)
-            .text(caption)
-            .on('keydown', function (e) {
-            var evt = e;
-            var isCtrlEnter = (evt.ctrlKey || evt.metaKey) && (evt.keyCode == 13 || evt.keyCode == 10);
-            if (isCtrlEnter && _this.isColumnActive()) {
-                var clickEvent = document.createEvent('MouseEvents');
-                clickEvent.initEvent('dblclick', true, true);
-                _this.element.dispatchEvent(clickEvent);
-                evt.stopPropagation();
-                return false;
-            }
-            return true;
-        }); })
-            .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;
-                }
-                _this.element.removeAttribute(eqDragManager.DRAG_DISABLED_ATTR);
-                if (isFocused) {
-                    _this.element.querySelector('a').focus();
-                }
-            }
-        }); })
-            .toDOM();
-    };
-    ColumnRendererCB.prototype.renderSortingImage = function () {
-        var _this = this;
-        var sortButtonCssClass = eqCssPrefix + "-column-sortbutton";
-        var sortButtonDirectionCssClass = sortButtonCssClass;
-        switch (this.column.sorting) {
-            case SortDirection.Ascending:
-                sortButtonDirectionCssClass = sortButtonCssClass + "-asc";
-                break;
-            case SortDirection.Descending:
-                sortButtonDirectionCssClass = sortButtonCssClass + "-desc";
-                break;
-        }
-        if (this.column.sorting == SortDirection.None) {
-            return null;
-        }
-        else {
-            return domel('div')
-                .addClass(this.cssPrefix + "-colelement", this.cssPrefix + "-sortimage-placeholder")
-                .addClass(browserUtils.getMobileCssClass())
-                .addChild('div', function (builder) { return builder
-                .addClass(_this.cssPrefix + "-img-sorting", sortButtonDirectionCssClass)
-                .title(i18n.getText('ButtonSorting')); })
-                .toDOM();
-        }
-    };
-    ColumnRendererCB.prototype.buttonSortingClickHandler = function (ev, anchor) {
-        var _this = this;
-        ev.stopPropagation();
-        this.keepShowingButtons = true;
-        var menu = this.getUIS() ? this.bar.sortMenu || this.bar.moveMenu : this.bar.moveMenu;
-        menu.showMenu({
-            anchor: anchor,
-            selectedIds: null,
-            itemSelectedCallback: function (data, items) {
-                var strToSortDirection = function (str) {
-                    if (str == 'None') {
-                        return SortDirection.None;
-                    }
-                    else if (str == "Ascending") {
-                        return SortDirection.Ascending;
-                    }
-                    else if (str == "Descending") {
-                        return SortDirection.Descending;
-                    }
-                };
-                if (data.id == 'None' || data.id == "Ascending" || data.id == "Descending") {
-                    var query = _this.bar.getQuery();
-                    _this.column.sorting = strToSortDirection(data.id);
-                    _this.column.sortIndex = query.getColumnSortIndex(_this.column);
-                    _this.fireColumnChanged();
-                }
-                else {
-                    _this.bar.moveColumn(_this.column, data.id);
-                }
-            },
-            menuClosedCallback: function () {
-                _this.keepShowingButtons = false;
-                if (!_this.isMouseOverBlock) {
-                    _this.leaveButtonBlock();
-                }
-            }
-        });
-        return false;
-    };
-    ColumnRendererCB.prototype.renderSortingButton = function () {
-        var _this = this;
-        if (!this.isEditable()) {
-            return null;
-        }
-        var builder = domel('div')
-            .addClass(eqCssPrefix + "-column-button", eqCssPrefix + "-column-sortbutton", eqCssPrefix + "-column-sortbutton-none")
-            .title(i18n.getText('ButtonSorting'))
-            .attr('tabIndex', '0')
-            .on('touchstart click', function (ev) { return _this.buttonSortingClickHandler(ev, builder.toDOM()); })
-            .on('keypress', function (evt) { if (evt.keyCode == 13) {
-            evt.target.click();
-        } });
-        return builder.toDOM();
-    };
-    ColumnRendererCB.prototype.buttonDeleteClickHandler = function (ev) {
-        ev.stopPropagation();
-        var query = this.bar.getQuery();
-        query.removeColumn(this.column, this.bar);
-        query.fireColumnsChangedEvent(QueryChangeAction.Delete, this.column);
-        return false;
-    };
-    ColumnRendererCB.prototype.renderDeleteButton = function () {
-        var _this = this;
-        if (this.column.isReadOnly()) {
-            return null;
-        }
-        return domel('div')
-            .addClass(eqCssPrefix + "-column-button", eqCssPrefix + "-column-button-delete")
-            .title(i18n.getText('CmdDelete'))
-            .attr('tabIndex', '0')
-            .on('touchstart click', function (ev) { return _this.buttonDeleteClickHandler(ev); })
-            .on('keypress', function (evt) { if (evt.keyCode == 13) {
-            evt.target.click();
-        } })
-            .toDOM();
-    };
-    ColumnRendererCB.prototype.getDefaultCaption = function () {
-        return this.getDefaultTitleText(this.baseAttr);
-    };
-    ColumnRendererCB.prototype.getDefaultTitleText = function (attr) {
-        var format = this.bar.options.titleElementFormat || this.bar.options.attrElementFormat;
-        var model = this.bar.getContext().getModel();
-        return model.getAttributeText(attr, format);
-    };
-    ColumnRendererCB.prototype.getClassesToAdd = function () {
-        var result = "";
-        result += this.column.enabled ? '' : " " + this.cssPrefix + "-disabled";
-        if (this.column.enabled) {
-            result += this.column.isReadOnly() ? " " + this.cssPrefix + "-readonly" : '';
-        }
-        return result;
-    };
-    ColumnRendererCB.prototype.buttonTypeClickHandler = function (ev) {
-        ev.stopPropagation();
-        this.keepShowingButtons = true;
-        this.changeColumnTypeHandler(ev);
-        return false;
-    };
-    ColumnRendererCB.prototype.buttonFormatClickHandler = function (ev) {
-        ev.stopPropagation();
-        this.keepShowingButtons = true;
-        this.changeFormatHandler(ev);
-        return false;
-    };
-    ColumnRendererCB.prototype.formatButtonIsShown = function () {
-        return this.bar.options.allowDisplayFormatChange !== false &&
-            this.bar
-                .getContext()
-                .getModel()
-                .getDisplayFormatsForType(this.column.getDataType()).length > 0;
-    };
-    ColumnRendererCB.prototype.changeFormatHandler = function (ev) {
-        var _this = this;
-        var formats = this.bar
-            .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'));
-                }
-            }
-        });
-    };
-    ColumnRendererCB.prototype.renderColumnTypeButton = function () {
-        var _this = this;
-        if (!this.isEditable() || this.bar.options.allowAggrColumns === false) {
-            return null;
-        }
-        return domel('div')
-            .addClass(eqCssPrefix + "-column-button", eqCssPrefix + "-column-button-type")
-            .title(i18n.getText('ButtonToAggr'))
-            .attr('tabIndex', '0')
-            .on('touchstart click', function (ev) { return _this.buttonTypeClickHandler(ev); })
-            .on('keypress', function (evt) { if (evt.keyCode == 13) {
-            evt.target.click();
-        } })
-            .toDOM();
-    };
-    ColumnRendererCB.prototype.renderColumnFormatButton = function () {
-        var _this = this;
-        if (!this.isEditable() || !this.formatButtonIsShown()) {
-            return null;
-        }
-        return domel('div')
-            .addClass(eqCssPrefix + "-column-button", eqCssPrefix + "-column-button-format")
-            .title(i18n.getText('ButtonFormat'))
-            .attr('tabIndex', '0')
-            .on('touchstart click', function (ev) { return _this.buttonFormatClickHandler(ev); })
-            .on('keypress', function (evt) { if (evt.keyCode == 13) {
-            evt.target.click();
-        } })
-            .toDOM();
-    };
-    ColumnRendererCB.prototype.getUIS = function () {
-        return this.bar
-            .getContext().getModel()
-            .checkAttrProperty(this.column.expr.value, "useInSorting");
-    };
-    ColumnRendererCB.prototype.onMouseClick = function (ev) {
-        this.bar.toggleColumnPicked(this.column);
-        this.adjustButtonsVisibility();
-    };
-    ColumnRendererCB.prototype.onMouseEnter = function (e) {
-        if (browserUtils.isMobileMode())
-            return;
-        this.isMouseOverBlock = true;
-        this.enterButtonBlock();
-        e.stopPropagation();
-        return false;
-    };
-    ColumnRendererCB.prototype.onMouseLeave = function (e) {
-        if (browserUtils.isMobileMode())
-            return;
-        this.isMouseOverBlock = false;
-        this.leaveButtonBlock();
-        e.stopPropagation();
-        return false;
-    };
-    ColumnRendererCB.prototype.isColumnActive = function () {
-        return this.element.classList.contains("active");
-    };
-    ColumnRendererCB.prototype.hideButtons = function () {
-        if (browserUtils.isMobileMode()) {
-            if (this.onHideButtonsMobile) {
-                this.onHideButtonsMobile();
-            }
-        }
-        else {
-            domel(this.element).data("show-buttons", null);
-        }
-    };
-    ColumnRendererCB.prototype.showButtons = function () {
-        if (browserUtils.isMobileMode()) {
-            if (this.onShowButtonsMobile) {
-                this.onShowButtonsMobile();
-            }
-        }
-        else {
-            domel(this.element).data("show-buttons", "");
-        }
-    };
-    ColumnRendererCB.prototype.adjustButtonsVisibility = function () {
-        if (this.bar.options.alwaysShowButtons
-            || ((this.bar.options.accentActiveColumn || browserUtils.isMobileMode())
-                && this.isColumnActive())) {
-            this.showButtons();
-        }
-        else {
-            this.hideButtons();
-        }
-    };
-    ColumnRendererCB.prototype.enterButtonBlock = function () {
-        this.showButtons();
-    };
-    ColumnRendererCB.prototype.leaveButtonBlock = function () {
-        if (this.bar.options.alwaysShowButtons != true && (!this.isColumnActive() || this.bar.options.accentActiveColumn != true)) {
-            this.hideButtons();
-        }
-    };
-    ColumnRendererCB.prototype.createFunctionMenu = function () {
-        var items = [];
-        var funcs = this.bar.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.bar.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.bar;
-        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.element.id;
-        if (menuId) {
-            menuId += '-FunctionsMenu';
-        }
-        var menuOptions = {
-            items: items,
-            id: menuId,
-            searchBoxAlwaysShown: false,
-            domWriteItemsId: true //this.panel.options.domWriteItemsId
-        };
-        this.functionMenu = new PopupMenu(menuOptions);
-    };
-    ColumnRendererCB.prototype.createFormatsMenu = function () {
-        if (this.bar.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);
-    };
-    ColumnRendererCB.prototype.getFormatsMenuItems = function () {
-        var formats = this.bar.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 }); }));
-    };
-    return ColumnRendererCB;
-}());
-export { ColumnRendererCB };
+import { i18n } from '@easydata/core';
+import { QueryChangeAction, SortDirection } from '@easyquery/core';
+import { eqDragManager, DropEffect, createBrowserEvent, domel } from '@easydata/ui';
+import { eqCssPrefix } from '../../../utils/utils';
+import { browserUtils } from '../../../utils/browser_utils';
+import { PopupMenu } from '../../../utils/popup_menu';
+var ColumnRendererCB = /** @class */ (function () {
+    function ColumnRendererCB(panel, column, slot) {
+        this.functionMenu = null;
+        this.formatsMenu = null;
+        this.isMouseOverBlock = false;
+        this.keepShowingButtons = false;
+        this.tapedTwice = false;
+        this.bar = panel;
+        this.column = column;
+        this.element = slot;
+    }
+    Object.defineProperty(ColumnRendererCB.prototype, "cssPrefix", {
+        get: function () {
+            return 'eqjs-cb';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ColumnRendererCB.prototype.render = function () {
+        var _this = this;
+        this.baseAttr = this.getAttribute();
+        var builder = domel('div');
+        builder.data('id', this.column.id);
+        if (this.element) {
+            //to remove all event listeners
+            this.element.parentNode
+                .replaceChild(builder.toDOM(), this.element);
+        }
+        this.element = builder.toDOM();
+        if (this.bar.options.allowDragDrop) {
+            eqDragManager.registerDraggableItem({
+                element: this.element,
+                scope: "entityAttrSort",
+                beforeDragStart: function () { return _this.element.dispatchEvent(createBrowserEvent('mouseleave')); },
+                onDragStart: function (ev) {
+                    _this.hideButtons();
+                    _this.element.style.display = 'none';
+                    ev.dropEffect = DropEffect.Allow;
+                },
+                onDragEnd: function (ev) {
+                    if (!ev.data.finishedSuccessfully) {
+                        _this.element.removeAttribute('style');
+                    }
+                },
+                data: { column: this.column }
+            });
+        }
+        if (!this.column.isReadOnly()) {
+            this.createFunctionMenu();
+            this.createFormatsMenu();
+        }
+        builder
+            .addClass(this.getClassesToAdd())
+            .addClass(browserUtils.getMobileCssClass())
+            .addChildElement(this.renderCaptionBlock())
+            .addChildElement(this.renderSortingImage());
+        if (!browserUtils.isMobileMode()) {
+            builder
+                .addChildElement(this.renderButtonsBlock());
+        }
+        //start event listeners
+        builder
+            .on('mouseenter', this.onMouseEnter.bind(this))
+            .on('mouseleave', this.onMouseLeave.bind(this));
+        //end event listeners
+        if (this.bar.options.accentActiveColumn || browserUtils.isMobileMode()) {
+            builder
+                .on('touchstart click', this.onMouseClick.bind(this));
+        }
+        return this.element;
+    };
+    ColumnRendererCB.prototype.fireColumnChanged = function () {
+        this.column.fireChangedEvent();
+    };
+    ColumnRendererCB.prototype.refresh = function () {
+        this.render();
+    };
+    ColumnRendererCB.prototype.getAttribute = function () {
+        var model = this.bar.getContext().getModel();
+        return model.getAttributeByIdSafe(this.column.expr.value);
+    };
+    ColumnRendererCB.prototype.isEditable = function () {
+        return this.column.enabled && !this.column.isReadOnly();
+    };
+    ColumnRendererCB.prototype.renderButtonsBlock = function () {
+        return domel('div', this.element)
+            .addClass("".concat(eqCssPrefix, "-column-buttonsBlock"), "".concat(this.cssPrefix, "-buttonsBlock"))
+            .addChildElement(this.renderSortingButton())
+            .addChildElement(this.renderColumnTypeButton())
+            .addChildElement(this.renderColumnFormatButton())
+            .addChildElement(this.renderDeleteButton())
+            .toDOM();
+    };
+    ColumnRendererCB.prototype.renderCaptionBlock = function () {
+        var _this = this;
+        if (!this.column.caption || this.column.caption == '') {
+            this.column.caption = this.getDefaultCaption();
+        }
+        var model = this.column.getModel();
+        var caption = this.baseAttr !== model.nullAttribute
+            ? this.column.caption
+            : model.getAttributeText(model.nullAttribute, '{attr}');
+        if (!this.isEditable()) {
+            return domel('div')
+                .addClass("".concat(this.cssPrefix, "-colelement"), "".concat(this.cssPrefix, "-captionelement"))
+                .addClass(browserUtils.getMobileCssClass())
+                .addChild('div', function (b) { return b
+                .title(_this.column.caption)
+                .text(caption)
+                .attr('tabIndex', '0'); })
+                .toDOM();
+        }
+        var tapHandler = function (ev) {
+            if (!_this.tapedTwice) {
+                _this.tapedTwice = true;
+                setTimeout(function () { _this.tapedTwice = false; }, 300);
+            }
+        };
+        var isFocused = false;
+        domel(this.element).on('touchstart dblclick', function (ev) {
+            if (ev instanceof TouchEvent && !_this.tapedTwice) {
+                tapHandler(ev);
+                return true;
+            }
+            ev.stopPropagation();
+            isFocused = _this.element.querySelector('a') == document.activeElement;
+            var inputEl = _this.element.querySelector(".".concat(_this.cssPrefix, "-captionelement input"));
+            var aEl = _this.element.querySelector(".".concat(_this.cssPrefix, "-captionelement a"));
+            if (inputEl) {
+                inputEl.style.width = "".concat(_this.element.clientWidth, "px");
+                aEl.style.display = 'none';
+                inputEl.style.removeProperty('display');
+                inputEl.focus();
+                _this.element.setAttribute(eqDragManager.DRAG_DISABLED_ATTR, '');
+            }
+            return false;
+        }); //TO DO:add localization and input field);
+        return domel('div')
+            .addClass("".concat(this.cssPrefix, "-colelement"), "".concat(this.cssPrefix, "-captionelement"))
+            .addClass(browserUtils.getMobileCssClass())
+            .addChild('a', function (builder) { return builder
+            .attr('href', 'javascript:void(0)')
+            .title(_this.column.caption)
+            .text(caption)
+            .on('keydown', function (e) {
+            var evt = e;
+            var isCtrlEnter = (evt.ctrlKey || evt.metaKey) && (evt.keyCode == 13 || evt.keyCode == 10);
+            if (isCtrlEnter && _this.isColumnActive()) {
+                var clickEvent = document.createEvent('MouseEvents');
+                clickEvent.initEvent('dblclick', true, true);
+                _this.element.dispatchEvent(clickEvent);
+                evt.stopPropagation();
+                return false;
+            }
+            return true;
+        }); })
+            .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;
+                }
+                _this.element.removeAttribute(eqDragManager.DRAG_DISABLED_ATTR);
+                if (isFocused) {
+                    _this.element.querySelector('a').focus();
+                }
+            }
+        }); })
+            .toDOM();
+    };
+    ColumnRendererCB.prototype.renderSortingImage = function () {
+        var _this = this;
+        var sortButtonCssClass = "".concat(eqCssPrefix, "-column-sortbutton");
+        var sortButtonDirectionCssClass = sortButtonCssClass;
+        switch (this.column.sorting) {
+            case SortDirection.Ascending:
+                sortButtonDirectionCssClass = "".concat(sortButtonCssClass, "-asc");
+                break;
+            case SortDirection.Descending:
+                sortButtonDirectionCssClass = "".concat(sortButtonCssClass, "-desc");
+                break;
+        }
+        if (this.column.sorting == SortDirection.None) {
+            return null;
+        }
+        else {
+            return domel('div')
+                .addClass("".concat(this.cssPrefix, "-colelement"), "".concat(this.cssPrefix, "-sortimage-placeholder"))
+                .addClass(browserUtils.getMobileCssClass())
+                .addChild('div', function (builder) { return builder
+                .addClass("".concat(_this.cssPrefix, "-img-sorting"), sortButtonDirectionCssClass)
+                .title(i18n.getText('ButtonSorting')); })
+                .toDOM();
+        }
+    };
+    ColumnRendererCB.prototype.buttonSortingClickHandler = function (ev, anchor) {
+        var _this = this;
+        ev.stopPropagation();
+        this.keepShowingButtons = true;
+        var menu = this.getUIS() ? this.bar.sortMenu || this.bar.moveMenu : this.bar.moveMenu;
+        menu.showMenu({
+            anchor: anchor,
+            selectedIds: null,
+            itemSelectedCallback: function (data, items) {
+                var strToSortDirection = function (str) {
+                    if (str == 'None') {
+                        return SortDirection.None;
+                    }
+                    else if (str == "Ascending") {
+                        return SortDirection.Ascending;
+                    }
+                    else if (str == "Descending") {
+                        return SortDirection.Descending;
+                    }
+                };
+                if (data.id == 'None' || data.id == "Ascending" || data.id == "Descending") {
+                    var query = _this.bar.getQuery();
+                    _this.column.sorting = strToSortDirection(data.id);
+                    _this.column.sortIndex = query.getColumnSortIndex(_this.column);
+                    _this.fireColumnChanged();
+                }
+                else {
+                    _this.bar.moveColumn(_this.column, data.id);
+                }
+            },
+            menuClosedCallback: function () {
+                _this.keepShowingButtons = false;
+                if (!_this.isMouseOverBlock) {
+                    _this.leaveButtonBlock();
+                }
+            }
+        });
+        return false;
+    };
+    ColumnRendererCB.prototype.renderSortingButton = function () {
+        var _this = this;
+        if (!this.isEditable()) {
+            return null;
+        }
+        var builder = domel('div')
+            .addClass("".concat(eqCssPrefix, "-column-button"), "".concat(eqCssPrefix, "-column-sortbutton"), "".concat(eqCssPrefix, "-column-sortbutton-none"))
+            .title(i18n.getText('ButtonSorting'))
+            .attr('tabIndex', '0')
+            .on('touchstart click', function (ev) { return _this.buttonSortingClickHandler(ev, builder.toDOM()); })
+            .on('keypress', function (evt) { if (evt.keyCode == 13) {
+            evt.target.click();
+        } });
+        return builder.toDOM();
+    };
+    ColumnRendererCB.prototype.buttonDeleteClickHandler = function (ev) {
+        ev.stopPropagation();
+        var query = this.bar.getQuery();
+        query.removeColumn(this.column, this.bar);
+        query.fireColumnsChangedEvent(QueryChangeAction.Delete, this.column);
+        return false;
+    };
+    ColumnRendererCB.prototype.renderDeleteButton = function () {
+        var _this = this;
+        if (this.column.isReadOnly()) {
+            return null;
+        }
+        return domel('div')
+            .addClass("".concat(eqCssPrefix, "-column-button"), "".concat(eqCssPrefix, "-column-button-delete"))
+            .title(i18n.getText('CmdDelete'))
+            .attr('tabIndex', '0')
+            .on('touchstart click', function (ev) { return _this.buttonDeleteClickHandler(ev); })
+            .on('keypress', function (evt) { if (evt.keyCode == 13) {
+            evt.target.click();
+        } })
+            .toDOM();
+    };
+    ColumnRendererCB.prototype.getDefaultCaption = function () {
+        return this.getDefaultTitleText(this.baseAttr);
+    };
+    ColumnRendererCB.prototype.getDefaultTitleText = function (attr) {
+        var format = this.bar.options.titleElementFormat || this.bar.options.attrElementFormat;
+        var model = this.bar.getContext().getModel();
+        return model.getAttributeText(attr, format);
+    };
+    ColumnRendererCB.prototype.getClassesToAdd = function () {
+        var result = "";
+        result += this.column.enabled ? '' : " ".concat(this.cssPrefix, "-disabled");
+        if (this.column.enabled) {
+            result += this.column.isReadOnly() ? " ".concat(this.cssPrefix, "-readonly") : '';
+        }
+        return result;
+    };
+    ColumnRendererCB.prototype.buttonTypeClickHandler = function (ev) {
+        ev.stopPropagation();
+        this.keepShowingButtons = true;
+        this.changeColumnTypeHandler(ev);
+        return false;
+    };
+    ColumnRendererCB.prototype.buttonFormatClickHandler = function (ev) {
+        ev.stopPropagation();
+        this.keepShowingButtons = true;
+        this.changeFormatHandler(ev);
+        return false;
+    };
+    ColumnRendererCB.prototype.formatButtonIsShown = function () {
+        return this.bar.options.allowDisplayFormatChange !== false &&
+            this.bar
+                .getContext()
+                .getModel()
+                .getDisplayFormatsForType(this.column.getDataType()).length > 0;
+    };
+    ColumnRendererCB.prototype.changeFormatHandler = function (ev) {
+        var _this = this;
+        var formats = this.bar
+            .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'));
+                }
+            }
+        });
+    };
+    ColumnRendererCB.prototype.renderColumnTypeButton = function () {
+        var _this = this;
+        if (!this.isEditable() || this.bar.options.allowAggrColumns === false) {
+            return null;
+        }
+        return domel('div')
+            .addClass("".concat(eqCssPrefix, "-column-button"), "".concat(eqCssPrefix, "-column-button-type"))
+            .title(i18n.getText('ButtonToAggr'))
+            .attr('tabIndex', '0')
+            .on('touchstart click', function (ev) { return _this.buttonTypeClickHandler(ev); })
+            .on('keypress', function (evt) { if (evt.keyCode == 13) {
+            evt.target.click();
+        } })
+            .toDOM();
+    };
+    ColumnRendererCB.prototype.renderColumnFormatButton = function () {
+        var _this = this;
+        if (!this.isEditable() || !this.formatButtonIsShown()) {
+            return null;
+        }
+        return domel('div')
+            .addClass("".concat(eqCssPrefix, "-column-button"), "".concat(eqCssPrefix, "-column-button-format"))
+            .title(i18n.getText('ButtonFormat'))
+            .attr('tabIndex', '0')
+            .on('touchstart click', function (ev) { return _this.buttonFormatClickHandler(ev); })
+            .on('keypress', function (evt) { if (evt.keyCode == 13) {
+            evt.target.click();
+        } })
+            .toDOM();
+    };
+    ColumnRendererCB.prototype.getUIS = function () {
+        return this.bar
+            .getContext().getModel()
+            .checkAttrProperty(this.column.expr.value, "useInSorting");
+    };
+    ColumnRendererCB.prototype.onMouseClick = function (ev) {
+        this.bar.toggleColumnPicked(this.column);
+        this.adjustButtonsVisibility();
+    };
+    ColumnRendererCB.prototype.onMouseEnter = function (e) {
+        if (browserUtils.isMobileMode())
+            return;
+        this.isMouseOverBlock = true;
+        this.enterButtonBlock();
+        e.stopPropagation();
+        return false;
+    };
+    ColumnRendererCB.prototype.onMouseLeave = function (e) {
+        if (browserUtils.isMobileMode())
+            return;
+        this.isMouseOverBlock = false;
+        this.leaveButtonBlock();
+        e.stopPropagation();
+        return false;
+    };
+    ColumnRendererCB.prototype.isColumnActive = function () {
+        return this.element.classList.contains("active");
+    };
+    ColumnRendererCB.prototype.hideButtons = function () {
+        if (browserUtils.isMobileMode()) {
+            if (this.onHideButtonsMobile) {
+                this.onHideButtonsMobile();
+            }
+        }
+        else {
+            domel(this.element).data("show-buttons", null);
+        }
+    };
+    ColumnRendererCB.prototype.showButtons = function () {
+        if (browserUtils.isMobileMode()) {
+            if (this.onShowButtonsMobile) {
+                this.onShowButtonsMobile();
+            }
+        }
+        else {
+            domel(this.element).data("show-buttons", "");
+        }
+    };
+    ColumnRendererCB.prototype.adjustButtonsVisibility = function () {
+        if (this.bar.options.alwaysShowButtons
+            || ((this.bar.options.accentActiveColumn || browserUtils.isMobileMode())
+                && this.isColumnActive())) {
+            this.showButtons();
+        }
+        else {
+            this.hideButtons();
+        }
+    };
+    ColumnRendererCB.prototype.enterButtonBlock = function () {
+        this.showButtons();
+    };
+    ColumnRendererCB.prototype.leaveButtonBlock = function () {
+        if (this.bar.options.alwaysShowButtons != true && (!this.isColumnActive() || this.bar.options.accentActiveColumn != true)) {
+            this.hideButtons();
+        }
+    };
+    ColumnRendererCB.prototype.createFunctionMenu = function () {
+        var items = [];
+        var funcs = this.bar.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.bar.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.bar;
+        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.element.id;
+        if (menuId) {
+            menuId += '-FunctionsMenu';
+        }
+        var menuOptions = {
+            items: items,
+            id: menuId,
+            searchBoxAlwaysShown: false,
+            domWriteItemsId: true //this.panel.options.domWriteItemsId
+        };
+        this.functionMenu = new PopupMenu(menuOptions);
+    };
+    ColumnRendererCB.prototype.createFormatsMenu = function () {
+        if (this.bar.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);
+    };
+    ColumnRendererCB.prototype.getFormatsMenuItems = function () {
+        var formats = this.bar.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 }); }));
+    };
+    return ColumnRendererCB;
+}());
+export { ColumnRendererCB };
 //# sourceMappingURL=column_renderer_cb.js.map