@easyquery/ui 7.2.3 → 7.2.4-rc01

package/dist/lib/widgets/renderers/aggr_settings/aggr_settings_renderer.js

@@ -1,430 +1,430 @@
-import { AggregationSettings } from '@easydata/core';
-import { domel } from '@easydata/ui';
-import { PopupMenu } from '../../../utils/popup_menu';
-import { i18n } from '@easyquery/core';
-var AggrSettingsRenderer = /** @class */ (function () {
-    function AggrSettingsRenderer(options) {
-        this.selectState = {
-            columns: []
-        };
-        this.funcMap = {};
-        if (!options || !options.slot)
-            throw new Error('slot is required');
-        if (!options || !options.query)
-            throw new Error('query is required');
-        this.slot = options.slot;
-        this.query = options.query;
-        this.onChanged = options.onChanged;
-        this.dropSelectState();
-        this.dropState();
-    }
-    Object.defineProperty(AggrSettingsRenderer.prototype, "cssPrefix", {
-        get: function () {
-            return 'eqjs-as';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    AggrSettingsRenderer.prototype.render = function () {
-        this.createFunctionMenu();
-        this.setInitialState();
-        this.changed();
-    };
-    AggrSettingsRenderer.prototype.setInitialState = function () {
-        var aggrSettings = this.query.getAggregationSettings();
-        var groups = aggrSettings.getInternalGroups();
-        var aggrs = aggrSettings.getAggregates();
-        for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
-            var group = groups_1[_i];
-            this.state.groups.push({
-                columns: group.columns
-            });
-        }
-        for (var _a = 0, aggrs_1 = aggrs; _a < aggrs_1.length; _a++) {
-            var aggr = aggrs_1[_a];
-            this.state.aggregates.push({
-                colId: aggr.colId,
-                funcId: aggr.funcId
-            });
-        }
-        this.state.grandTotals = aggrSettings.hasGrandTotals();
-        this.state.recordCount = aggrSettings.hasRecordCount();
-    };
-    AggrSettingsRenderer.prototype.getAvailableColumns = function () {
-        return this.query.getColumns().filter(function (c) { return c.enabled; });
-    };
-    AggrSettingsRenderer.prototype.renderCore = function () {
-        var _this = this;
-        this.slot.innerHTML = '';
-        var cols = this.getAvailableColumns();
-        var slotb = domel(this.slot);
-        var currentGroup = null;
-        var groupBlockColumns = null;
-        var selectedBlockColumns = null;
-        var aggregates = this.state.aggregates;
-        var groupCounter = -1;
-        var _loop_1 = function (col) {
-            if (currentGroup) {
-                if (currentGroup.columns.indexOf(col.id) >= 0) {
-                    // render to current group div
-                    this_1.renderColumn(groupBlockColumns, col, true);
-                    return "continue";
-                }
-            }
-            currentGroup = this_1.getGroupForColumn(col.id);
-            if (currentGroup != null) {
-                groupCounter++;
-                // create groupDiv
-                var groupBlock = domel('div', this_1.slot)
-                    .addClass(this_1.cssPrefix + "-group")
-                    .data('gindex', "" + groupCounter);
-                groupBlockColumns = domel('div', groupBlock.toDOM())
-                    .addClass(this_1.cssPrefix + "-columns");
-                this_1.renderColumn(groupBlockColumns, col, true);
-                return "continue";
-            }
-            var aggr = aggregates.filter(function (a) { return a.colId == col.id; })[0];
-            if (aggr) {
-                var aggrBlock = domel('div', this_1.slot)
-                    .addClass(this_1.cssPrefix + "-aggr");
-                this_1.renderColumn(aggrBlock, col, true, aggr.funcId);
-                aggrBlock
-                    .addChild('div', function (b) { return b
-                    .addClass(_this.cssPrefix + "-buttons")
-                    .addChild('button', function (b) { return b
-                    .addClass(_this.cssPrefix + "-unaggr-btn")
-                    .title(i18n.getText('AggrSettings', 'UnaggrBtn'))
-                    .on('click', _this.removeAggrBtnClickHandler.bind(_this)); }); });
-                return "continue";
-            }
-            if (this_1.selectState.columns.indexOf(col.id) >= 0) {
-                // create selectedDiv
-                if (selectedBlockColumns == null) {
-                    var selectedBlock = domel('div', this_1.slot)
-                        .addClass(this_1.cssPrefix + "-selected");
-                    selectedBlockColumns = domel('div', selectedBlock.toDOM())
-                        .addClass(this_1.cssPrefix + "-columns");
-                }
-                this_1.renderColumn(selectedBlockColumns, col, false);
-                return "continue";
-            }
-            // render column as is
-            this_1.renderColumn(slotb, col, false);
-        };
-        var this_1 = this;
-        for (var _i = 0, cols_1 = cols; _i < cols_1.length; _i++) {
-            var col = cols_1[_i];
-            _loop_1(col);
-        }
-        if (selectedBlockColumns) {
-            var buttonsContainer = domel('div', selectedBlockColumns.toDOM().parentElement)
-                .addClass(this.cssPrefix + "-buttons");
-            buttonsContainer.addChild('button', function (b) { return b
-                .addClass(_this.cssPrefix + "-group-btn")
-                .title(i18n.getText('AggrSettings', 'GroupBtn'))
-                .on('click', _this.groupBtnClickHandler.bind(_this)); });
-            if (this.selectState.columns.length == 1) {
-                buttonsContainer.addChild('button', function (b) { return b
-                    .addClass(_this.cssPrefix + "-aggr-btn")
-                    .title(i18n.getText('AggrSettings', 'AggrBtn'))
-                    .on('click', _this.aggrBtnClickHandler.bind(_this)); });
-            }
-        }
-        domel(this.slot)
-            .addChild('div', function (b) { return b
-            .addClass(_this.cssPrefix + "-counts")
-            .addChild('label', function (b) { return b
-            .addClass('eqjs-ctrl-switch')
-            .addChild('input', function (b) {
-            b.attr('type', 'checkbox');
-            if (_this.state.recordCount) {
-                b.attr('checked', '');
-            }
-            b.on('change', _this.countsCheckboxChangeHandler.bind(_this));
-        })
-            .addChild('span', function (b) { return b
-            .addClass('slider round'); })
-            .addChild('span', function (b) { return b
-            .addClass('switch-text')
-            .addText(i18n.getText('AggrSettings', 'GroupCountsLabel')); }); }); })
-            .addChild('div', function (b) { return b
-            .addClass(_this.cssPrefix + "-grandtotals")
-            .addChild('label', function (b) { return b
-            .addClass('eqjs-ctrl-switch')
-            .addChild('input', function (b) {
-            b.attr('type', 'checkbox');
-            if (_this.state.grandTotals) {
-                b.attr('checked', '');
-            }
-            b.on('change', _this.grandCheckboxChangeHandler.bind(_this));
-        })
-            .addChild('span', function (b) { return b
-            .addClass('slider round'); })
-            .addChild('span', function (b) { return b
-            .addClass('switch-text')
-            .addText(i18n.getText('AggrSettings', 'GrandTotalsLabel')); }); }); });
-        var groups = this.slot.querySelectorAll("." + this.cssPrefix + "-group");
-        groups.forEach(function (el) {
-            domel(el)
-                .addChild('div', function (b) { return b
-                .addClass(_this.cssPrefix + "-buttons")
-                .addChild('button', function (b) { return b
-                .addClass(_this.cssPrefix + "-ungroup-btn")
-                .title(i18n.getText('AggrSettings', 'UngroupBtn'))
-                .on('click', _this.removeGroupBtnClickHandler.bind(_this)); }); });
-        });
-        this.validateCheckboxes();
-    };
-    AggrSettingsRenderer.prototype.validateCheckboxes = function () {
-        if (this.selectState.columns.length === 0)
-            return;
-        var prevElement, prevInputEl, nextInputEl = null;
-        for (var i = 0; i < this.slot.childNodes.length; i++) {
-            var el = this.slot.childNodes[i];
-            if (el.classList.contains(this.cssPrefix + "-selected")) {
-                if (prevElement && prevElement.classList.contains(this.cssPrefix + "-column")) {
-                    prevInputEl = prevElement;
-                }
-            }
-            else if (el.classList.contains(this.cssPrefix + "-column")) {
-                if (prevElement && prevElement.classList.contains(this.cssPrefix + "-selected")) {
-                    nextInputEl = el;
-                }
-            }
-            prevElement = el;
-        }
-        ;
-        for (var i = 0; i < this.slot.childNodes.length; i++) {
-            var el = this.slot.childNodes[i];
-            if (el.classList.contains(this.cssPrefix + "-column") && el != prevInputEl && el != nextInputEl) {
-                el.firstElementChild.firstElementChild.setAttribute('disabled', '');
-            }
-        }
-        ;
-        var selector = "." + this.cssPrefix + "-selected>." + this.cssPrefix + "-columns>." + this.cssPrefix + "-column";
-        var selectedCols = this.slot.querySelectorAll(selector);
-        for (var i = 1; i < selectedCols.length - 1; i++) {
-            var el = selectedCols[i];
-            el.firstElementChild.firstElementChild.setAttribute('disabled', '');
-        }
-    };
-    AggrSettingsRenderer.prototype.isValid = function () {
-        var hasSelected = this.selectState.columns.length;
-        var hasAggrs = this.state.aggregates.length > 0;
-        var hasGroups = this.state.groups.length > 0;
-        var hasTotals = this.state.grandTotals;
-        var hasCounts = this.state.recordCount;
-        if (hasSelected)
-            return false;
-        if (hasGroups) {
-            return hasAggrs || hasCounts;
-        }
-        if (hasAggrs) {
-            return hasGroups || hasTotals;
-        }
-        return false;
-    };
-    AggrSettingsRenderer.prototype.getValidationMessage = function () {
-        var hasSelected = this.selectState.columns.length;
-        var hasAggrs = this.state.aggregates.length > 0;
-        var hasGroups = this.state.groups.length > 0;
-        var hasTotals = this.state.grandTotals;
-        var hasRecCount = this.state.recordCount;
-        if (hasSelected)
-            return i18n.getText('AggrSettings', 'SelectedError') + " ";
-        if (hasGroups && !hasAggrs && !hasRecCount)
-            return i18n.getText('AggrSettings', 'NoAggrOrCountError') + " ";
-        if (hasAggrs && !hasGroups && !hasTotals)
-            return i18n.getText('AggrSettings', 'NoGroupsOrGrandError') + " ";
-        return i18n.getText('AggrSettings', 'NoGroupsOrAggrError') + " ";
-    };
-    AggrSettingsRenderer.prototype.getSettings = function () {
-        var settings = new AggregationSettings(this.query);
-        for (var _i = 0, _a = this.state.groups; _i < _a.length; _i++) {
-            var group = _a[_i];
-            settings.addGroup({ columns: group.columns });
-        }
-        for (var _b = 0, _c = this.state.aggregates; _b < _c.length; _b++) {
-            var aggr = _c[_b];
-            settings.addAggregateColumn(aggr.colId, aggr.funcId);
-        }
-        if (this.state.grandTotals) {
-            settings.addGrandTotals();
-        }
-        if (this.state.recordCount) {
-            settings.addCounts();
-        }
-        return settings;
-    };
-    AggrSettingsRenderer.prototype.renderColumn = function (b, col, isTaken, funcId) {
-        var _this = this;
-        if (funcId === void 0) { funcId = null; }
-        b.addChild('div', function (b) {
-            b.data('colid', col.id);
-            var caption = funcId
-                ? col.caption + " (" + _this.funcMap[funcId].caption + ")"
-                : col.caption;
-            if (!isTaken) {
-                b
-                    .addClass(_this.cssPrefix + "-column")
-                    .addChild('label', function (b) { return b
-                    .addClass('checkbox')
-                    .addChild('input', function (b) {
-                    b.attr('type', 'checkbox');
-                    if (_this.selectState.columns.indexOf(col.id) >= 0) {
-                        b.attr('checked', '');
-                    }
-                    b.on('change', _this.colCheckboxChangeHandler.bind(_this));
-                })
-                    .addText(caption); });
-            }
-            else {
-                b
-                    .addClass(_this.cssPrefix + "-column-used")
-                    .addText(caption);
-            }
-        });
-    };
-    AggrSettingsRenderer.prototype.getGroupForColumn = function (colId) {
-        var index = this.getGroupIndexForColumn(colId);
-        if (index >= 0)
-            return this.state.groups[index];
-        return null;
-    };
-    AggrSettingsRenderer.prototype.getGroupIndexForColumn = function (colId) {
-        for (var i = 0; i < this.state.groups.length; i++) {
-            var group = this.state.groups[i];
-            if (group.columns.indexOf(colId) >= 0)
-                return i;
-        }
-        return -1;
-    };
-    AggrSettingsRenderer.prototype.grandCheckboxChangeHandler = function (ev) {
-        this.state.grandTotals = !this.state.grandTotals;
-        this.onChanged && this.onChanged();
-    };
-    AggrSettingsRenderer.prototype.countsCheckboxChangeHandler = function (ev) {
-        this.state.recordCount = !this.state.recordCount;
-        this.onChanged && this.onChanged();
-    };
-    AggrSettingsRenderer.prototype.colCheckboxChangeHandler = function (ev) {
-        var input = ev.target;
-        var colId = input.parentElement.parentElement.getAttribute('data-colid');
-        // toggle column to track state
-        var index = this.selectState.columns.indexOf(colId);
-        if (index >= 0) {
-            this.selectState.columns.splice(index, 1);
-        }
-        else {
-            this.selectState.columns.push(colId);
-            var cols_2 = this.getAvailableColumns();
-            this.selectState.columns = this.selectState.columns.sort(function (col1, col2) {
-                var index1 = cols_2.findIndex(function (c) { return c.id == col1; });
-                var index2 = cols_2.findIndex(function (c) { return c.id == col2; });
-                return index1 - index2;
-            });
-        }
-        this.changed();
-    };
-    AggrSettingsRenderer.prototype.groupBtnClickHandler = function () {
-        this.state.groups.push({ columns: this.selectState.columns });
-        var cols = this.getAvailableColumns();
-        this.state.groups = this.state.groups.sort(function (g1, g2) {
-            var g1Index = cols.findIndex(function (c) { return c.id == g1.columns[0]; });
-            var g2Index = cols.findIndex(function (c) { return c.id == g2.columns[0]; });
-            return g1Index - g2Index;
-        });
-        this.dropSelectState();
-        this.changed();
-    };
-    AggrSettingsRenderer.prototype.removeGroupBtnClickHandler = function (ev) {
-        var btn = ev.target;
-        var index = Number.parseInt(btn.parentElement.parentElement.getAttribute('data-gindex'));
-        this.state.groups.splice(index, 1);
-        this.changed();
-    };
-    AggrSettingsRenderer.prototype.removeAggrBtnClickHandler = function (ev) {
-        var btn = ev.target;
-        var colId = btn.parentElement.parentElement.querySelector("." + this.cssPrefix + "-column-used")
-            .getAttribute('data-colid');
-        var index = this.state.aggregates.findIndex(function (a) { return a.colId == colId; });
-        if (index >= 0) {
-            this.state.aggregates.splice(index, 1);
-            this.changed();
-        }
-    };
-    AggrSettingsRenderer.prototype.aggrBtnClickHandler = function (ev) {
-        var _this = this;
-        var model = this.query.getModel();
-        var colId = this.selectState.columns[0];
-        var col = this.getAvailableColumns().filter(function (c) { return c.id == colId; })[0];
-        this.functionMenu.showMenu({
-            anchor: ev.target,
-            itemFilterCallback: function (item) {
-                return _this.funcMap[item.id].appliedTypes.indexOf(col.expr.dataType) >= 0;
-            },
-            itemSelectedCallback: function (data) {
-                _this.state.aggregates.push({
-                    colId: colId,
-                    funcId: data.id
-                });
-                _this.dropSelectState();
-                _this.changed();
-            }
-        });
-    };
-    AggrSettingsRenderer.prototype.clear = function () {
-        this.dropSelectState();
-        this.dropState();
-        this.changed();
-    };
-    AggrSettingsRenderer.prototype.dropSelectState = function () {
-        this.selectState = {
-            columns: []
-        };
-    };
-    AggrSettingsRenderer.prototype.dropState = function () {
-        this.state = {
-            groups: [],
-            aggregates: [],
-            recordCount: true,
-            grandTotals: false
-        };
-    };
-    AggrSettingsRenderer.prototype.changed = function () {
-        this.onChanged && this.onChanged();
-        this.renderCore();
-    };
-    AggrSettingsRenderer.prototype.createFunctionMenu = function () {
-        var model = this.query.getModel();
-        var funcs = this.query.getModel().getAggrFunctions();
-        var items = [];
-        for (var _i = 0, funcs_1 = funcs; _i < funcs_1.length; _i++) {
-            var func = funcs_1[_i];
-            if (!func)
-                continue;
-            this.funcMap[func.id] = func;
-            var funcCaption = model
-                .getAggrFunctionCaption(func.id);
-            var item = {
-                id: func.id,
-                text: funcCaption
-            };
-            items.push(item);
-        }
-        var menuId = this.slot.id;
-        if (menuId) {
-            menuId += '-FunctionsMenu';
-        }
-        var menuOptions = {
-            items: items,
-            id: menuId,
-            searchBoxAlwaysShown: false,
-            domWriteItemsId: true
-        };
-        this.functionMenu = new PopupMenu(menuOptions);
-    };
-    return AggrSettingsRenderer;
-}());
-export { AggrSettingsRenderer };
+import { AggregationSettings } from '@easydata/core';
+import { domel } from '@easydata/ui';
+import { PopupMenu } from '../../../utils/popup_menu';
+import { i18n } from '@easyquery/core';
+var AggrSettingsRenderer = /** @class */ (function () {
+    function AggrSettingsRenderer(options) {
+        this.selectState = {
+            columns: []
+        };
+        this.funcMap = {};
+        if (!options || !options.slot)
+            throw new Error('slot is required');
+        if (!options || !options.query)
+            throw new Error('query is required');
+        this.slot = options.slot;
+        this.query = options.query;
+        this.onChanged = options.onChanged;
+        this.dropSelectState();
+        this.dropState();
+    }
+    Object.defineProperty(AggrSettingsRenderer.prototype, "cssPrefix", {
+        get: function () {
+            return 'eqjs-as';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    AggrSettingsRenderer.prototype.render = function () {
+        this.createFunctionMenu();
+        this.setInitialState();
+        this.changed();
+    };
+    AggrSettingsRenderer.prototype.setInitialState = function () {
+        var aggrSettings = this.query.getAggregationSettings();
+        var groups = aggrSettings.getInternalGroups();
+        var aggrs = aggrSettings.getAggregates();
+        for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
+            var group = groups_1[_i];
+            this.state.groups.push({
+                columns: group.columns
+            });
+        }
+        for (var _a = 0, aggrs_1 = aggrs; _a < aggrs_1.length; _a++) {
+            var aggr = aggrs_1[_a];
+            this.state.aggregates.push({
+                colId: aggr.colId,
+                funcId: aggr.funcId
+            });
+        }
+        this.state.grandTotals = aggrSettings.hasGrandTotals();
+        this.state.recordCount = aggrSettings.hasRecordCount();
+    };
+    AggrSettingsRenderer.prototype.getAvailableColumns = function () {
+        return this.query.getColumns().filter(function (c) { return c.enabled; });
+    };
+    AggrSettingsRenderer.prototype.renderCore = function () {
+        var _this = this;
+        this.slot.innerHTML = '';
+        var cols = this.getAvailableColumns();
+        var slotb = domel(this.slot);
+        var currentGroup = null;
+        var groupBlockColumns = null;
+        var selectedBlockColumns = null;
+        var aggregates = this.state.aggregates;
+        var groupCounter = -1;
+        var _loop_1 = function (col) {
+            if (currentGroup) {
+                if (currentGroup.columns.indexOf(col.id) >= 0) {
+                    // render to current group div
+                    this_1.renderColumn(groupBlockColumns, col, true);
+                    return "continue";
+                }
+            }
+            currentGroup = this_1.getGroupForColumn(col.id);
+            if (currentGroup != null) {
+                groupCounter++;
+                // create groupDiv
+                var groupBlock = domel('div', this_1.slot)
+                    .addClass("".concat(this_1.cssPrefix, "-group"))
+                    .data('gindex', "".concat(groupCounter));
+                groupBlockColumns = domel('div', groupBlock.toDOM())
+                    .addClass("".concat(this_1.cssPrefix, "-columns"));
+                this_1.renderColumn(groupBlockColumns, col, true);
+                return "continue";
+            }
+            var aggr = aggregates.filter(function (a) { return a.colId == col.id; })[0];
+            if (aggr) {
+                var aggrBlock = domel('div', this_1.slot)
+                    .addClass("".concat(this_1.cssPrefix, "-aggr"));
+                this_1.renderColumn(aggrBlock, col, true, aggr.funcId);
+                aggrBlock
+                    .addChild('div', function (b) { return b
+                    .addClass("".concat(_this.cssPrefix, "-buttons"))
+                    .addChild('button', function (b) { return b
+                    .addClass("".concat(_this.cssPrefix, "-unaggr-btn"))
+                    .title(i18n.getText('AggrSettings', 'UnaggrBtn'))
+                    .on('click', _this.removeAggrBtnClickHandler.bind(_this)); }); });
+                return "continue";
+            }
+            if (this_1.selectState.columns.indexOf(col.id) >= 0) {
+                // create selectedDiv
+                if (selectedBlockColumns == null) {
+                    var selectedBlock = domel('div', this_1.slot)
+                        .addClass("".concat(this_1.cssPrefix, "-selected"));
+                    selectedBlockColumns = domel('div', selectedBlock.toDOM())
+                        .addClass("".concat(this_1.cssPrefix, "-columns"));
+                }
+                this_1.renderColumn(selectedBlockColumns, col, false);
+                return "continue";
+            }
+            // render column as is
+            this_1.renderColumn(slotb, col, false);
+        };
+        var this_1 = this;
+        for (var _i = 0, cols_1 = cols; _i < cols_1.length; _i++) {
+            var col = cols_1[_i];
+            _loop_1(col);
+        }
+        if (selectedBlockColumns) {
+            var buttonsContainer = domel('div', selectedBlockColumns.toDOM().parentElement)
+                .addClass("".concat(this.cssPrefix, "-buttons"));
+            buttonsContainer.addChild('button', function (b) { return b
+                .addClass("".concat(_this.cssPrefix, "-group-btn"))
+                .title(i18n.getText('AggrSettings', 'GroupBtn'))
+                .on('click', _this.groupBtnClickHandler.bind(_this)); });
+            if (this.selectState.columns.length == 1) {
+                buttonsContainer.addChild('button', function (b) { return b
+                    .addClass("".concat(_this.cssPrefix, "-aggr-btn"))
+                    .title(i18n.getText('AggrSettings', 'AggrBtn'))
+                    .on('click', _this.aggrBtnClickHandler.bind(_this)); });
+            }
+        }
+        domel(this.slot)
+            .addChild('div', function (b) { return b
+            .addClass("".concat(_this.cssPrefix, "-counts"))
+            .addChild('label', function (b) { return b
+            .addClass('eqjs-ctrl-switch')
+            .addChild('input', function (b) {
+            b.attr('type', 'checkbox');
+            if (_this.state.recordCount) {
+                b.attr('checked', '');
+            }
+            b.on('change', _this.countsCheckboxChangeHandler.bind(_this));
+        })
+            .addChild('span', function (b) { return b
+            .addClass('slider round'); })
+            .addChild('span', function (b) { return b
+            .addClass('switch-text')
+            .addText(i18n.getText('AggrSettings', 'GroupCountsLabel')); }); }); })
+            .addChild('div', function (b) { return b
+            .addClass("".concat(_this.cssPrefix, "-grandtotals"))
+            .addChild('label', function (b) { return b
+            .addClass('eqjs-ctrl-switch')
+            .addChild('input', function (b) {
+            b.attr('type', 'checkbox');
+            if (_this.state.grandTotals) {
+                b.attr('checked', '');
+            }
+            b.on('change', _this.grandCheckboxChangeHandler.bind(_this));
+        })
+            .addChild('span', function (b) { return b
+            .addClass('slider round'); })
+            .addChild('span', function (b) { return b
+            .addClass('switch-text')
+            .addText(i18n.getText('AggrSettings', 'GrandTotalsLabel')); }); }); });
+        var groups = this.slot.querySelectorAll(".".concat(this.cssPrefix, "-group"));
+        groups.forEach(function (el) {
+            domel(el)
+                .addChild('div', function (b) { return b
+                .addClass("".concat(_this.cssPrefix, "-buttons"))
+                .addChild('button', function (b) { return b
+                .addClass("".concat(_this.cssPrefix, "-ungroup-btn"))
+                .title(i18n.getText('AggrSettings', 'UngroupBtn'))
+                .on('click', _this.removeGroupBtnClickHandler.bind(_this)); }); });
+        });
+        this.validateCheckboxes();
+    };
+    AggrSettingsRenderer.prototype.validateCheckboxes = function () {
+        if (this.selectState.columns.length === 0)
+            return;
+        var prevElement, prevInputEl, nextInputEl = null;
+        for (var i = 0; i < this.slot.childNodes.length; i++) {
+            var el = this.slot.childNodes[i];
+            if (el.classList.contains("".concat(this.cssPrefix, "-selected"))) {
+                if (prevElement && prevElement.classList.contains("".concat(this.cssPrefix, "-column"))) {
+                    prevInputEl = prevElement;
+                }
+            }
+            else if (el.classList.contains("".concat(this.cssPrefix, "-column"))) {
+                if (prevElement && prevElement.classList.contains("".concat(this.cssPrefix, "-selected"))) {
+                    nextInputEl = el;
+                }
+            }
+            prevElement = el;
+        }
+        ;
+        for (var i = 0; i < this.slot.childNodes.length; i++) {
+            var el = this.slot.childNodes[i];
+            if (el.classList.contains("".concat(this.cssPrefix, "-column")) && el != prevInputEl && el != nextInputEl) {
+                el.firstElementChild.firstElementChild.setAttribute('disabled', '');
+            }
+        }
+        ;
+        var selector = ".".concat(this.cssPrefix, "-selected>.").concat(this.cssPrefix, "-columns>.").concat(this.cssPrefix, "-column");
+        var selectedCols = this.slot.querySelectorAll(selector);
+        for (var i = 1; i < selectedCols.length - 1; i++) {
+            var el = selectedCols[i];
+            el.firstElementChild.firstElementChild.setAttribute('disabled', '');
+        }
+    };
+    AggrSettingsRenderer.prototype.isValid = function () {
+        var hasSelected = this.selectState.columns.length;
+        var hasAggrs = this.state.aggregates.length > 0;
+        var hasGroups = this.state.groups.length > 0;
+        var hasTotals = this.state.grandTotals;
+        var hasCounts = this.state.recordCount;
+        if (hasSelected)
+            return false;
+        if (hasGroups) {
+            return hasAggrs || hasCounts;
+        }
+        if (hasAggrs) {
+            return hasGroups || hasTotals;
+        }
+        return false;
+    };
+    AggrSettingsRenderer.prototype.getValidationMessage = function () {
+        var hasSelected = this.selectState.columns.length;
+        var hasAggrs = this.state.aggregates.length > 0;
+        var hasGroups = this.state.groups.length > 0;
+        var hasTotals = this.state.grandTotals;
+        var hasRecCount = this.state.recordCount;
+        if (hasSelected)
+            return "".concat(i18n.getText('AggrSettings', 'SelectedError'), " ");
+        if (hasGroups && !hasAggrs && !hasRecCount)
+            return "".concat(i18n.getText('AggrSettings', 'NoAggrOrCountError'), " ");
+        if (hasAggrs && !hasGroups && !hasTotals)
+            return "".concat(i18n.getText('AggrSettings', 'NoGroupsOrGrandError'), " ");
+        return "".concat(i18n.getText('AggrSettings', 'NoGroupsOrAggrError'), " ");
+    };
+    AggrSettingsRenderer.prototype.getSettings = function () {
+        var settings = new AggregationSettings(this.query);
+        for (var _i = 0, _a = this.state.groups; _i < _a.length; _i++) {
+            var group = _a[_i];
+            settings.addGroup({ columns: group.columns });
+        }
+        for (var _b = 0, _c = this.state.aggregates; _b < _c.length; _b++) {
+            var aggr = _c[_b];
+            settings.addAggregateColumn(aggr.colId, aggr.funcId);
+        }
+        if (this.state.grandTotals) {
+            settings.addGrandTotals();
+        }
+        if (this.state.recordCount) {
+            settings.addCounts();
+        }
+        return settings;
+    };
+    AggrSettingsRenderer.prototype.renderColumn = function (b, col, isTaken, funcId) {
+        var _this = this;
+        if (funcId === void 0) { funcId = null; }
+        b.addChild('div', function (b) {
+            b.data('colid', col.id);
+            var caption = funcId
+                ? "".concat(col.caption, " (").concat(_this.funcMap[funcId].caption, ")")
+                : col.caption;
+            if (!isTaken) {
+                b
+                    .addClass("".concat(_this.cssPrefix, "-column"))
+                    .addChild('label', function (b) { return b
+                    .addClass('checkbox')
+                    .addChild('input', function (b) {
+                    b.attr('type', 'checkbox');
+                    if (_this.selectState.columns.indexOf(col.id) >= 0) {
+                        b.attr('checked', '');
+                    }
+                    b.on('change', _this.colCheckboxChangeHandler.bind(_this));
+                })
+                    .addText(caption); });
+            }
+            else {
+                b
+                    .addClass("".concat(_this.cssPrefix, "-column-used"))
+                    .addText(caption);
+            }
+        });
+    };
+    AggrSettingsRenderer.prototype.getGroupForColumn = function (colId) {
+        var index = this.getGroupIndexForColumn(colId);
+        if (index >= 0)
+            return this.state.groups[index];
+        return null;
+    };
+    AggrSettingsRenderer.prototype.getGroupIndexForColumn = function (colId) {
+        for (var i = 0; i < this.state.groups.length; i++) {
+            var group = this.state.groups[i];
+            if (group.columns.indexOf(colId) >= 0)
+                return i;
+        }
+        return -1;
+    };
+    AggrSettingsRenderer.prototype.grandCheckboxChangeHandler = function (ev) {
+        this.state.grandTotals = !this.state.grandTotals;
+        this.onChanged && this.onChanged();
+    };
+    AggrSettingsRenderer.prototype.countsCheckboxChangeHandler = function (ev) {
+        this.state.recordCount = !this.state.recordCount;
+        this.onChanged && this.onChanged();
+    };
+    AggrSettingsRenderer.prototype.colCheckboxChangeHandler = function (ev) {
+        var input = ev.target;
+        var colId = input.parentElement.parentElement.getAttribute('data-colid');
+        // toggle column to track state
+        var index = this.selectState.columns.indexOf(colId);
+        if (index >= 0) {
+            this.selectState.columns.splice(index, 1);
+        }
+        else {
+            this.selectState.columns.push(colId);
+            var cols_2 = this.getAvailableColumns();
+            this.selectState.columns = this.selectState.columns.sort(function (col1, col2) {
+                var index1 = cols_2.findIndex(function (c) { return c.id == col1; });
+                var index2 = cols_2.findIndex(function (c) { return c.id == col2; });
+                return index1 - index2;
+            });
+        }
+        this.changed();
+    };
+    AggrSettingsRenderer.prototype.groupBtnClickHandler = function () {
+        this.state.groups.push({ columns: this.selectState.columns });
+        var cols = this.getAvailableColumns();
+        this.state.groups = this.state.groups.sort(function (g1, g2) {
+            var g1Index = cols.findIndex(function (c) { return c.id == g1.columns[0]; });
+            var g2Index = cols.findIndex(function (c) { return c.id == g2.columns[0]; });
+            return g1Index - g2Index;
+        });
+        this.dropSelectState();
+        this.changed();
+    };
+    AggrSettingsRenderer.prototype.removeGroupBtnClickHandler = function (ev) {
+        var btn = ev.target;
+        var index = Number.parseInt(btn.parentElement.parentElement.getAttribute('data-gindex'));
+        this.state.groups.splice(index, 1);
+        this.changed();
+    };
+    AggrSettingsRenderer.prototype.removeAggrBtnClickHandler = function (ev) {
+        var btn = ev.target;
+        var colId = btn.parentElement.parentElement.querySelector(".".concat(this.cssPrefix, "-column-used"))
+            .getAttribute('data-colid');
+        var index = this.state.aggregates.findIndex(function (a) { return a.colId == colId; });
+        if (index >= 0) {
+            this.state.aggregates.splice(index, 1);
+            this.changed();
+        }
+    };
+    AggrSettingsRenderer.prototype.aggrBtnClickHandler = function (ev) {
+        var _this = this;
+        var model = this.query.getModel();
+        var colId = this.selectState.columns[0];
+        var col = this.getAvailableColumns().filter(function (c) { return c.id == colId; })[0];
+        this.functionMenu.showMenu({
+            anchor: ev.target,
+            itemFilterCallback: function (item) {
+                return _this.funcMap[item.id].appliedTypes.indexOf(col.expr.dataType) >= 0;
+            },
+            itemSelectedCallback: function (data) {
+                _this.state.aggregates.push({
+                    colId: colId,
+                    funcId: data.id
+                });
+                _this.dropSelectState();
+                _this.changed();
+            }
+        });
+    };
+    AggrSettingsRenderer.prototype.clear = function () {
+        this.dropSelectState();
+        this.dropState();
+        this.changed();
+    };
+    AggrSettingsRenderer.prototype.dropSelectState = function () {
+        this.selectState = {
+            columns: []
+        };
+    };
+    AggrSettingsRenderer.prototype.dropState = function () {
+        this.state = {
+            groups: [],
+            aggregates: [],
+            recordCount: true,
+            grandTotals: false
+        };
+    };
+    AggrSettingsRenderer.prototype.changed = function () {
+        this.onChanged && this.onChanged();
+        this.renderCore();
+    };
+    AggrSettingsRenderer.prototype.createFunctionMenu = function () {
+        var model = this.query.getModel();
+        var funcs = this.query.getModel().getAggrFunctions();
+        var items = [];
+        for (var _i = 0, funcs_1 = funcs; _i < funcs_1.length; _i++) {
+            var func = funcs_1[_i];
+            if (!func)
+                continue;
+            this.funcMap[func.id] = func;
+            var funcCaption = model
+                .getAggrFunctionCaption(func.id);
+            var item = {
+                id: func.id,
+                text: funcCaption
+            };
+            items.push(item);
+        }
+        var menuId = this.slot.id;
+        if (menuId) {
+            menuId += '-FunctionsMenu';
+        }
+        var menuOptions = {
+            items: items,
+            id: menuId,
+            searchBoxAlwaysShown: false,
+            domWriteItemsId: true
+        };
+        this.functionMenu = new PopupMenu(menuOptions);
+    };
+    return AggrSettingsRenderer;
+}());
+export { AggrSettingsRenderer };
 //# sourceMappingURL=aggr_settings_renderer.js.map