@easyquery/ui 7.2.5 → 7.3.0-rc02

package/dist/easyquery.ui.cjs.js

@@ -29,64 +29,9 @@ function safeFocus(element) {
 }
 const eqCssPrefix = 'eqjs';
 const eqCssMobile = 'eqjs-mobile';
-
-exports.browserUtils = void 0;
-(function (browserUtils) {
-    let _isFirefox = null;
-    function isIE() {
-        const ua = window.navigator.userAgent;
-        return ua.includes('MSIE') || ua.includes('Trident');
-    }
-    browserUtils.isIE = isIE;
-    function isFirefox() {
-        if (_isFirefox === null) {
-            const ua = navigator.userAgent;
-            _isFirefox = ua.toLowerCase().indexOf('firefox') > -1;
-        }
-        return _isFirefox;
-    }
-    browserUtils.isFirefox = isFirefox;
-    let _detectedIsMobileMode = false;
-    let _isMobileMode = undefined;
-    let detectIsMobileMode = () => {
-        const oldValue = isMobileMode();
-        _detectedIsMobileMode = window.matchMedia('only screen and (max-width: 840px)').matches
-            || window.matchMedia('only screen and (max-height: 420px)').matches;
-        const newValue = isMobileMode();
-        if (newValue !== oldValue && mobileModeChangeHandler) {
-            mobileModeChangeHandler(newValue);
-        }
-    };
-    detectIsMobileMode();
-    window.addEventListener('resize', () => detectIsMobileMode());
-    function isMobileMode() {
-        if (_isMobileMode !== undefined) {
-            return _isMobileMode;
-        }
-        else {
-            return _detectedIsMobileMode;
-        }
-    }
-    browserUtils.isMobileMode = isMobileMode;
-    function setIsMobileMode(value) {
-        const oldValue = isMobileMode();
-        _isMobileMode = value;
-        const newValue = isMobileMode();
-        if (newValue !== oldValue && mobileModeChangeHandler) {
-            mobileModeChangeHandler(newValue);
-        }
-    }
-    browserUtils.setIsMobileMode = setIsMobileMode;
-    let mobileModeChangeHandler;
-    function onMobileModeChanged(callback) {
-        mobileModeChangeHandler = callback;
-    }
-    browserUtils.onMobileModeChanged = onMobileModeChanged;
-    function getMobileCssClass() {
-        return isMobileMode() ? eqCssMobile : null;
-    }
-    browserUtils.getMobileCssClass = getMobileCssClass;
-})(exports.browserUtils || (exports.browserUtils = {}));
+function getMobileCssClass() {
+    return ui.browserUtils.isMobileMode() ? eqCssMobile : null;
+}
 
 /**
  * The entities panel wiget, implemented without JQuery.
@@ -185,7 +130,7 @@ class EntitiesPanel extends core.Widget {
         let model = this.context.getModel();
         this.clear();
         this.panel.classList.add(`${this.cssPrefix}-panel`);
-        this.panel.classList.add(exports.browserUtils.getMobileCssClass());
+        this.panel.classList.add(getMobileCssClass());
         this.rootEntityBlock = document.createElement('div');
         if (model != null && !model.isEmpty()) {
             let entTree = model.getEntitiesTree({
@@ -216,10 +161,10 @@ class EntitiesPanel extends core.Widget {
         let entityBlock;
         let entityNode = document.createElement('div');
         entityNode.classList.add(`${this.cssPrefix}-entity-node`);
-        entityNode.classList.add(exports.browserUtils.getMobileCssClass());
+        entityNode.classList.add(getMobileCssClass());
         let entityChildren = document.createElement('div');
         entityChildren.classList.add(`${this.cssPrefix}-entity-children`);
-        entityChildren.classList.add(exports.browserUtils.getMobileCssClass());
+        entityChildren.classList.add(getMobileCssClass());
         let nodeLabel = document.createElement('label');
         nodeLabel.classList.add(`${this.cssPrefix}-entity-node-label`);
         let nodeInput = document.createElement('input');
@@ -243,7 +188,7 @@ class EntitiesPanel extends core.Widget {
             entityBlock = document.createElement('div');
         }
         entityBlock.classList.add(`${this.cssPrefix}-entity`);
-        entityBlock.classList.add(exports.browserUtils.getMobileCssClass());
+        entityBlock.classList.add(getMobileCssClass());
         if (entity.id && entity.id != "") {
             nodeLabel.innerText = entity.text;
             entityNode.appendChild(nodeLabel); //caption
@@ -414,7 +359,7 @@ class EntitiesPanel extends core.Widget {
     createFilterBox() {
         this.filterBoxBlock = document.createElement('div');
         this.filterBoxBlock.classList.add(`${this.cssPrefix}-filter-box`);
-        this.filterBoxBlock.classList.add(exports.browserUtils.getMobileCssClass());
+        this.filterBoxBlock.classList.add(getMobileCssClass());
         this.filterBoxInput = document.createElement('input');
         this.filterBoxInput.classList.add(`${this.cssPrefix}-filter-box-input`);
         this.filterBoxInput.addEventListener('input', (e) => {
@@ -447,7 +392,7 @@ class EntitiesPanel extends core.Widget {
         let defClass = `${this.cssPrefix}-tool-panel`;
         let toolPanelBlock = document.createElement('div');
         toolPanelBlock.classList.add(defClass);
-        toolPanelBlock.classList.add(exports.browserUtils.getMobileCssClass());
+        toolPanelBlock.classList.add(getMobileCssClass());
         let toolSelectAll = document.createElement('div');
         toolSelectAll.classList.add(`${defClass}-select-all`);
         toolSelectAll.title = 'Select all';
@@ -660,7 +605,7 @@ class EntitiesPanel extends core.Widget {
     renderProgressBlock() {
         this.progressBlock = document.createElement('div');
         this.progressBlock.classList.add(`${eqCssPrefix}-progress-win8`);
-        this.progressBlock.classList.add(exports.browserUtils.getMobileCssClass());
+        this.progressBlock.classList.add(getMobileCssClass());
         this.progressBlock.innerHTML = '<div class="wBall" id="wBall_1"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_2"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_3"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_4"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_5"><div class="wInnerBall"></div></div>';
     }
     clear() {
@@ -717,7 +662,7 @@ class MenuLevel {
         const isSubQuery = this.parentMenu.options.isSubQuery;
         //add base DIV element which is also used to show the shadow
         const baseDivBuilder = ui.domel('div')
-            .addClass(exports.browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         if (this.parentMenu.options.useDefaultStyles) {
             baseDivBuilder
                 .setStyle('backgroundColor', itemBgColor)
@@ -841,7 +786,7 @@ class MenuLevel {
         scrollDiv.tabIndex = 1;
         ui.domel(scrollDiv)
             .addClass(`${this.cssPrefix}-scrollDiv`)
-            .addClass(exports.browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         scrollDiv.style.overflowX = "hidden";
         scrollDiv.style.overflowY = "auto";
         scrollDiv.style.position = "relative";
@@ -893,7 +838,7 @@ class MenuLevel {
             event.preventDefault(); // prevent the default action (scroll / move caret)            
         };
         scrollDiv.addEventListener("keydown", scrollDivKeyDownHandler);
-        if (exports.browserUtils.isMobileMode()) {
+        if (ui.browserUtils.isMobileMode()) {
             this.closeDiv =
                 ui.domel('div', baseDiv)
                     .addClass('eqjs-menu-close-btn')
@@ -1038,7 +983,7 @@ class MenuLevel {
             const itemDiv = document.createElement("div");
             ui.domel(itemDiv)
                 .addClass(`${this.cssPrefix}-itemDiv`)
-                .addClass(exports.browserUtils.getMobileCssClass());
+                .addClass(getMobileCssClass());
             if (item.selected && this.showSelected && !multiselect) {
                 itemDiv.classList.add(`${this.cssPrefix}-selected`);
             }
@@ -1221,7 +1166,7 @@ class MenuLevel {
         const itemDiv = document.createElement("div");
         ui.domel(itemDiv)
             .addClass(`${this.cssPrefix}-itemDiv`)
-            .addClass(exports.browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         itemDiv.style.marginLeft = `${level * 10}px`;
         if (item.selected && !multiselect) {
             itemDiv.classList.add(`${this.cssPrefix}-selected`);
@@ -1356,7 +1301,7 @@ class MenuLevel {
         return content;
     }
     renderItems(filter) {
-        if (!filter && !exports.browserUtils.isMobileMode()) {
+        if (!filter && !ui.browserUtils.isMobileMode()) {
             this.renderItemsWithoutFilter();
         }
         else {
@@ -1566,7 +1511,7 @@ class MenuLevel {
             this.parentElement.appendChild(this.levelDiv);
             ui.domel(this.levelDiv)
                 .addClass(`${this.cssPrefix}-levelDiv`)
-                .addClass(exports.browserUtils.getMobileCssClass());
+                .addClass(getMobileCssClass());
             this.initialized = true;
         }
     }
@@ -1813,7 +1758,7 @@ class PopupMenu {
         }
         this.active = true;
         this.setSelectedItems(this.options.items, selectedIds);
-        if (exports.browserUtils.isMobileMode()) {
+        if (ui.browserUtils.isMobileMode()) {
             this.rootLevel.showAt(0, 0, true, true);
             this.rootLevel.levelDiv.style.top = '0px';
             this.rootLevel.levelDiv.style.bottom = '0px';
@@ -2009,7 +1954,7 @@ class ColumnRendererCP {
                 .replaceChild(builder.toDOM(), this.element);
         }
         this.element = builder.toDOM();
-        if (this.panel.options.allowDragDrop && !exports.browserUtils.isMobileMode()) {
+        if (this.panel.options.allowDragDrop && !ui.browserUtils.isMobileMode()) {
             ui.eqDragManager.registerDraggableItem({
                 element: this.element,
                 scope: "entityAttrSort",
@@ -2042,75 +1987,95 @@ class ColumnRendererCP {
         this.createButtonMenu();
         builder
             .addClass(this.getClassesToAdd())
-            .addClass(exports.browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChildElement(this.renderCheckbox())
             //start sort button
             .addChild('div', builder => 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 && !exports.browserUtils.isMobileMode()) {
+            .addChildElement(this.sortingButton));
+        // end sort button
+        builder.addChildElement(this.renderExpressionBlock());
+        if (this.panel.options.showColumnTitles !== false && !ui.browserUtils.isMobileMode()) {
             builder
                 .addChildElement(this.renderCaptionBlock());
         }
+        let buttonsIndex = 0;
+        let buttonsList = '';
         builder
             //start buttons
             .addChild('div', builder => {
             builder
                 .addClass(`${eqCssPrefix}-column-buttonsBlock`, `${this.cssPrefix}-buttonsBlock`)
-                .addClass(exports.browserUtils.getMobileCssClass());
+                .addClass(getMobileCssClass());
             //start enable button
             if (this.getButtonsToShow().indexOf("enable") >= 0 && !this.column.isReadOnly()) {
                 builder.addChildElement(this.renderEnabledButton());
+                buttonsIndex++;
+                buttonsList += 'Enable';
             }
             //end enable button
             //start aggr func button
             if (this.getButtonsToShow().indexOf("type") >= 0 && this.columnEnabled) {
                 builder.addChildElement(this.renderColumnTypeButton());
+                buttonsIndex++;
+                buttonsList += 'Type';
             }
             //end aggr func button
             //start format selector button
             if (this.getButtonsToShow().indexOf("format") >= 0 && this.columnEnabled) {
                 builder.addChildElement(this.renderColumnFormatButton());
+                buttonsIndex++;
+                buttonsList += 'Format';
             }
             //end format selector button
             //start delete button
             if (this.getButtonsToShow().indexOf("delete") >= 0 && !this.column.isReadOnly()) {
                 builder.addChildElement(this.renderDeleteButton());
+                buttonsIndex++;
+                buttonsList += 'Delete';
             }
             //end delete button
             //start menu button
             if (this.getButtonsToShow().indexOf("menu") >= 0 && !this.column.isReadOnly()) {
                 builder.addChildElement(this.renderMenuButton());
+                buttonsIndex++;
+                buttonsList += 'Menu';
             }
             //end menu button
         });
-        //end buttons 
-        if (!exports.browserUtils.isMobileMode()) {
+        //end buttons
+        builder.addClass(`eqjs-buttons-in-block-${buttonsIndex}`);
+        builder.addClass(`eqjs-buttons-in-block-${buttonsList}`);
+        if (!ui.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 || exports.browserUtils.isMobileMode()) {
+        if (this.panel.options.accentActiveColumn || ui.browserUtils.isMobileMode()) {
             builder
                 .on('click', this.onMouseClick.bind(this)); //touchstart
         }
         if (this.panel.options.alwaysShowButtons) {
             this.showButtons();
         }
+        if (this.panel.options.showCheckboxes === false) {
+            builder.addClass("eqjs-no-checkbox");
+        }
         return this.element;
     }
     onMouseClick(ev) {
         ev.stopPropagation();
+        this.activate();
+        return false;
+    }
+    activate() {
         this.panel.toggleColumnPicked(this.column);
         this.adjustButtonsVisibility();
-        if (!exports.browserUtils.isMobileMode()) {
+        if (!ui.browserUtils.isMobileMode()) {
             this.element.dispatchEvent(ui.createBrowserEvent("mouseenter"));
         }
-        return false;
     }
     fireColumnChanged() {
         this.column.fireChangedEvent();
@@ -2121,7 +2086,7 @@ class ColumnRendererCP {
     renderCaptionBlock() {
         const builder = ui.domel('div')
             .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-captionelement`)
-            .addClass(exports.browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         if (this.isEditable()) {
             builder
                 .addChild('a', builder => builder
@@ -2130,6 +2095,7 @@ class ColumnRendererCP {
                 .text(this.column.caption)
                 .on('click', (ev) => {
                 ev.stopPropagation();
+                this.activate();
                 const element = ev.target;
                 const inputEl = element.parentElement.querySelector('input');
                 if (inputEl) {
@@ -2204,7 +2170,7 @@ class ColumnRendererCP {
                 sortButtonDirectionCssClass = `${sortButtonCssClass}-none`;
                 break;
         }
-        if (!this.isEditable()) {
+        if (!this.isEditable() || ui.browserUtils.isMobileMode()) {
             if (sorting === core.SortDirection.Ascending
                 || sorting === core.SortDirection.Descending)
                 return ui.domel('div')
@@ -2220,11 +2186,12 @@ class ColumnRendererCP {
             .attr('tabIndex', '0')
             .on('click', (ev) => {
             ev.stopPropagation();
+            this.activate();
             this.keepShowingButtons = true;
             const menu = this.getUIS() ? this.panel.sortMenu || this.panel.moveMenu : this.panel.moveMenu;
             menu.showMenu({
                 anchor: this.sortingButton,
-                selectedIds: this.column.isHidden() ? ['IsHidden'] : null,
+                selectedIds: this.getButtonMenuSelectedItems(), // this.column.isHidden() ? ['IsHidden'] : null,
                 itemSelectedCallback: (data, items) => {
                     let action;
                     switch (data.id) {
@@ -2311,7 +2278,7 @@ class ColumnRendererCP {
             .addClass(`${eqCssPrefix}-button`, `${eqCssPrefix}-column-button`, `${eqCssPrefix}-column-button-menu`)
             .title(core.i18n.getText('ButtonMenu'))
             .attr('tabIndex', '0')
-            .on('click', evt => this.buttonMenuHandler(exports.ColumnAction.Menu, evt)) //touchstart 
+            .on('click', evt => this.buttonMenuHandler(exports.ColumnAction.Menu, evt)) //touchstart
             .on('keypress', evt => { if (evt.keyCode == 13) {
             evt.target.click();
         } }))
@@ -2337,6 +2304,7 @@ class ColumnRendererCP {
                 .attr('tabIndex', '0')
                 .on('click', (ev) => {
                 ev.stopPropagation();
+                this.activate();
                 this.keepShowingButtons = true;
                 this.changeTypeHandler(ev);
             })
@@ -2444,7 +2412,7 @@ class ColumnRendererCP {
     }
     adjustButtonsVisibility() {
         if (this.panel.options.alwaysShowButtons ||
-            ((this.panel.options.accentActiveColumn || exports.browserUtils.isMobileMode())
+            ((this.panel.options.accentActiveColumn || ui.browserUtils.isMobileMode())
                 && this.isColumnActive())) {
             this.showButtons();
         }
@@ -2545,6 +2513,7 @@ class ColumnRendererCP {
                 curQuery.fireColumnsChangedEvent(core.QueryChangeAction.Delete, this.column);
                 break;
             case exports.ColumnAction.Enable:
+                this.activate();
                 this.columnEnabled = !this.columnEnabled;
                 this.fireColumnChanged();
                 break;
@@ -2579,6 +2548,7 @@ class ColumnRendererCP {
             case exports.ColumnAction.Menu:
                 const colMenu = this.buttonMenu;
                 this.keepShowingButtons = true;
+                this.activate();
                 colMenu.showMenu({
                     anchor: evt ? evt.target : null,
                     selectedIds: this.getButtonMenuSelectedItems(),
@@ -2613,7 +2583,7 @@ class ColumnRendererCP {
                                 action = exports.ColumnAction.SortingAsc;
                                 break;
                             case "Descending":
-                                action = exports.ColumnAction.SortingAsc;
+                                action = exports.ColumnAction.SortingDesc;
                                 break;
                         }
                         this.buttonMenuHandler(action, evt);
@@ -2643,26 +2613,26 @@ class ColumnRendererCP {
             if (menuId) {
                 menuId += '-ButtonMenu';
             }
-            const common = [];
-            common.push({
+            const Appearance = [];
+            Appearance.push({
                 id: "enable",
                 text: core.i18n.getText('MenuEnable')
             });
             if (this.panel.options.allowHiddenColumns) {
-                common.push({
+                Appearance.push({
                     id: "hidden",
                     text: core.i18n.getText('CmdHiddenColumn')
                 });
             }
-            common.push({
+            Appearance.push({
                 id: "delete",
                 text: core.i18n.getText('CmdDelete')
             });
             let items = [];
             items.push({
                 id: '__group',
-                text: ' ',
-                items: common
+                text: core.i18n.getText('CmdGroupAppearance'),
+                items: Appearance
             });
             const sortItems = this.panel.options.allowSorting ?
                 [
@@ -2721,6 +2691,17 @@ class ColumnRendererCP {
         if (this.column.isHidden()) {
             arrSelected.push("hidden");
         }
+        switch (this.column.sorting) {
+            case core.SortDirection.None:
+                arrSelected.push("None");
+                break;
+            case core.SortDirection.Ascending:
+                arrSelected.push("Ascending");
+                break;
+            case core.SortDirection.Descending:
+                arrSelected.push("Descending");
+                break;
+        }
         const formats = this.panel
             .getContext()
             .getModel()
@@ -2741,10 +2722,10 @@ class AttrColumnRendererCP extends ColumnRendererCP {
     renderExpressionBlock() {
         return ui.domel("div")
             .addClass(`${this.cssPrefix}-expr-block`)
-            .addClass(exports.browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChild('div', builder => builder
             .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-attrelement`)
-            .addClass(exports.browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChildElement(this.renderBaseExpression()))
             .toDOM();
     }
@@ -2762,6 +2743,7 @@ class AttrColumnRendererCP extends ColumnRendererCP {
                 .text(attrCaption) //TO DO:add localization
                 .on('click', (ev) => {
                 ev.stopPropagation();
+                this.activate();
                 this.panel.showEntitiesMenu({
                     anchor: ev.target,
                     selectedIds: null,
@@ -2914,7 +2896,7 @@ class AggrFuncColumnRendererCP extends AttrColumnRendererCP {
         const model = this.panel.getContext().getModel();
         const exprBlockBuilder = ui.domel("div")
             .addClass(`${this.cssPrefix}-expr-block`, `${this.cssPrefix}-expr-block-aggr`)
-            .addClass(exports.browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         const format = model.getAggrFunctionFormat(this.column.expr.func);
         if (!format || format === '')
             return;
@@ -2932,6 +2914,7 @@ class AggrFuncColumnRendererCP extends AttrColumnRendererCP {
                         .text(item.text)
                         .on('click', (ev) => {
                         ev.stopPropagation();
+                        this.activate();
                         this.functionMenu.showMenu({
                             anchor: functionLink.toDOM(),
                             selectedIds: null,
@@ -2950,14 +2933,14 @@ class AggrFuncColumnRendererCP extends AttrColumnRendererCP {
                     exprBlockBuilder
                         .addChild('div', builder => builder
                         .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-aggrfuncelement`)
-                        .addClass(exports.browserUtils.getMobileCssClass())
+                        .addClass(getMobileCssClass())
                         .addChildElement(functionLink.toDOM()));
                 }
                 else {
                     exprBlockBuilder
                         .addChild('div', b => b
                         .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-aggrfuncelement`)
-                        .addClass(exports.browserUtils.getMobileCssClass())
+                        .addClass(getMobileCssClass())
                         .addChild('span', b => b
                         .text(item.text)
                         .title(item.text)));
@@ -2967,14 +2950,14 @@ class AggrFuncColumnRendererCP extends AttrColumnRendererCP {
                 exprBlockBuilder
                     .addChild('div', builder => builder
                     .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-attrelement`)
-                    .addClass(exports.browserUtils.getMobileCssClass())
+                    .addClass(getMobileCssClass())
                     .addChildElement(this.renderBaseExpression()));
             }
             else if (item.type === 3) {
                 exprBlockBuilder
                     .addChild('span', builder => builder
                     .addClass(`${this.cssPrefix}-colelement`)
-                    .addClass(exports.browserUtils.getMobileCssClass())
+                    .addClass(getMobileCssClass())
                     .text(item.text)
                     .title(item.text));
             }
@@ -3056,12 +3039,12 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
     renderExpressionBlock() {
         const exprBlock = ui.domel("div")
             .addClass(`${this.cssPrefix}-expr-block`)
-            .addClass(exports.browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .toDOM();
         //Attribute element
         let builder = ui.domel('div', exprBlock)
             .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-attrelement`)
-            .addClass(exports.browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         if (this.isEditable()) {
             builder
                 .addChild('a', b => b
@@ -3137,7 +3120,7 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
         // DataType element
         builder = ui.domel('div', exprBlock)
             .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-attrelement`)
-            .addClass(exports.browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         if (this.isEditable()) {
             this.createDataTypeMenu();
             builder
@@ -3387,8 +3370,18 @@ class ColumnsPanel extends core.Widget {
             const headerBuilder = ui.domel('div', this.slot)
                 .hide()
                 .addClass(`${this.cssPrefix}-header`)
-                .addClass(exports.browserUtils.getMobileCssClass())
-                .addChild('div', builder => builder
+                .addClass(getMobileCssClass());
+            if (!this.options.alwaysShowButtons) {
+                headerBuilder.addClass("eqjs-no-buttons");
+            }
+            if (this.options.showCheckboxes) {
+                headerBuilder.addChild('div', builder => builder
+                    .setStyle('margin-left', '30px')); //quick fix to adjust title column header when showCheckboxes is on
+            }
+            else {
+                headerBuilder.addClass("eqjs-no-checkbox");
+            }
+            headerBuilder.addChild('div', builder => builder
                 .addClass(`${this.cssPrefix}-header-expression`)
                 .text(core$1.i18n.getText('HeaderExpression')));
             if (this.options.showColumnTitles !== false) {
@@ -3403,13 +3396,13 @@ class ColumnsPanel extends core.Widget {
         this.columnsBlock =
             ui.domel('div', this.slot)
                 .addClass(`${this.cssPrefix}-columns`)
-                .addClass(exports.browserUtils.getMobileCssClass())
+                .addClass(getMobileCssClass())
                 .toDOM();
         if (this.options.showAddRow) {
             this.addRowElement =
                 ui.domel('div', this.slot)
                     .addClass(`${eqCssPrefix}-addrow`, `${this.cssPrefix}-addrow`, `${eqCssPrefix}-addrow-empty`)
-                    .addClass(exports.browserUtils.getMobileCssClass())
+                    .addClass(getMobileCssClass())
                     .addChild('a', builder => builder
                     .attr('href', 'javascript:void(0)')
                     .text(core$1.i18n.getText('CmdClickToAddColumn'))
@@ -3599,8 +3592,8 @@ class ColumnsPanel extends core.Widget {
         if (options.titleElementFormat) {
             this.context.options.columnTitleFormat = options.titleElementFormat;
         }
-        if (exports.browserUtils.isMobileMode()) {
-            this.options.buttons = ["menu"];
+        if (ui.browserUtils.isMobileMode()) {
+            this.options.buttons = ["menu", "sorting"];
             this.options.showHeader = false;
         }
     }
@@ -3631,7 +3624,7 @@ class ColumnsPanel extends core.Widget {
             this.agjustHeaderVisibility();
             ui.domel(this.slot)
                 .removeClass(eqCssMobile)
-                .addClass(exports.browserUtils.getMobileCssClass());
+                .addClass(getMobileCssClass());
             const query = this.context.getQuery();
             const columns = query.getColumns();
             for (let column of columns) {
@@ -3949,7 +3942,7 @@ class ColumnsPanel extends core.Widget {
     renderProgressBlock() {
         this.progressBlock = document.createElement('div');
         this.progressBlock.classList.add(`${eqCssPrefix}-progress-win8`);
-        this.progressBlock.classList.add(exports.browserUtils.getMobileCssClass());
+        this.progressBlock.classList.add(getMobileCssClass());
         this.progressBlock.innerHTML = '<div class="wBall" id="wBall_1"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_2"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_3"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_4"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_5"><div class="wInnerBall"></div></div>';
     }
 }
@@ -3999,10 +3992,10 @@ class ColumnRendererCB {
         }
         builder
             .addClass(this.getClassesToAdd())
-            .addClass(exports.browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChildElement(this.renderCaptionBlock())
             .addChildElement(this.renderSortingImage());
-        if (!exports.browserUtils.isMobileMode()) {
+        if (!ui.browserUtils.isMobileMode()) {
             builder
                 .addChildElement(this.renderButtonsBlock());
         }
@@ -4011,7 +4004,7 @@ class ColumnRendererCB {
             .on('mouseenter', this.onMouseEnter.bind(this))
             .on('mouseleave', this.onMouseLeave.bind(this));
         //end event listeners
-        if (this.bar.options.accentActiveColumn || exports.browserUtils.isMobileMode()) {
+        if (this.bar.options.accentActiveColumn || ui.browserUtils.isMobileMode()) {
             builder
                 .on('touchstart click', this.onMouseClick.bind(this));
         }
@@ -4040,7 +4033,7 @@ class ColumnRendererCB {
         if (!this.isEditable()) {
             return ui.domel('div')
                 .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-captionelement`)
-                .addClass(exports.browserUtils.getMobileCssClass())
+                .addClass(getMobileCssClass())
                 .addChild('div', b => b
                 .title(caption)
                 .text(caption)
@@ -4074,7 +4067,7 @@ class ColumnRendererCB {
         }); //TO DO:add localization and input field);
         return ui.domel('div')
             .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-captionelement`)
-            .addClass(exports.browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChild('a', builder => builder
             .attr('href', 'javascript:void(0)')
             .title(this.column.caption)
@@ -4150,7 +4143,7 @@ class ColumnRendererCB {
         else {
             return ui.domel('div')
                 .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-sortimage-placeholder`)
-                .addClass(exports.browserUtils.getMobileCssClass())
+                .addClass(getMobileCssClass())
                 .addChild('div', builder => builder
                 .addClass(`${this.cssPrefix}-img-sorting`, sortButtonDirectionCssClass)
                 .title(core$1.i18n.getText('ButtonSorting')))
@@ -4327,7 +4320,7 @@ class ColumnRendererCB {
         this.adjustButtonsVisibility();
     }
     onMouseEnter(e) {
-        if (exports.browserUtils.isMobileMode())
+        if (ui.browserUtils.isMobileMode())
             return;
         this.isMouseOverBlock = true;
         this.enterButtonBlock();
@@ -4335,7 +4328,7 @@ class ColumnRendererCB {
         return false;
     }
     onMouseLeave(e) {
-        if (exports.browserUtils.isMobileMode())
+        if (ui.browserUtils.isMobileMode())
             return;
         this.isMouseOverBlock = false;
         this.leaveButtonBlock();
@@ -4346,7 +4339,7 @@ class ColumnRendererCB {
         return this.element.classList.contains("active");
     }
     hideButtons() {
-        if (exports.browserUtils.isMobileMode()) {
+        if (ui.browserUtils.isMobileMode()) {
             if (this.onHideButtonsMobile) {
                 this.onHideButtonsMobile();
             }
@@ -4356,7 +4349,7 @@ class ColumnRendererCB {
         }
     }
     showButtons() {
-        if (exports.browserUtils.isMobileMode()) {
+        if (ui.browserUtils.isMobileMode()) {
             if (this.onShowButtonsMobile) {
                 this.onShowButtonsMobile();
             }
@@ -4367,7 +4360,7 @@ class ColumnRendererCB {
     }
     adjustButtonsVisibility() {
         if (this.bar.options.alwaysShowButtons
-            || ((this.bar.options.accentActiveColumn || exports.browserUtils.isMobileMode())
+            || ((this.bar.options.accentActiveColumn || ui.browserUtils.isMobileMode())
                 && this.isColumnActive())) {
             this.showButtons();
         }
@@ -4642,6 +4635,7 @@ class ColumnsBar extends core.Widget {
             sortEntities: false,
             columnRenderedCallback: null,
             customExpressionText: 0,
+            showAddAllForEntity: false
         };
         this.landingSlot = ui.domel('div')
             .addClass(`${eqCssPrefix}-highlight`)
@@ -4661,7 +4655,7 @@ class ColumnsBar extends core.Widget {
         ];
         ui.domel(this.slot)
             .addClass(`${this.cssPrefix}-panel`)
-            .addClass(exports.browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         this.group = core.WidgetGroup.Query;
         this.customQuery = customQuery;
     }
@@ -4880,7 +4874,7 @@ class ColumnsBar extends core.Widget {
     renderAddRowButton() {
         ui.domel(this.addRowButton)
             .addClass(`${eqCssPrefix}-addrow`, `${this.cssPrefix}-addrow`, `${eqCssPrefix}-addrow-empty`)
-            .addClass(exports.browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .title(core$1.i18n.getText('CmdClickToAddColumn'))
             .addChild('a', builder => builder
             .attr('href', 'javascript:void(0)')
@@ -4890,13 +4884,18 @@ class ColumnsBar extends core.Widget {
                 anchor: e.target,
                 selectedIds: null,
                 itemSelectedCallback: (data, items) => {
-                    const attrid = data.id;
-                    this.addNewColumn(attrid);
+                    if (data.id === '__AddAll__' && data.extra && Array.isArray(data.extra.ids)) {
+                        data.extra.ids.forEach(attrId => this.addNewColumn(attrId));
+                    }
+                    else {
+                        const attrid = data.id;
+                        this.addNewColumn(attrid);
+                    }
                     return false;
                 }
             });
         }));
-        if (exports.browserUtils.isMobileMode()) {
+        if (ui.browserUtils.isMobileMode()) {
             ui.domel(this.columnsBlock)
                 .addChildElement(this.addRowButton);
         }
@@ -4910,13 +4909,13 @@ class ColumnsBar extends core.Widget {
         this.columnsBlock =
             ui.domel('div')
                 .addClass(`${this.cssPrefix}-columns`)
-                .addClass(exports.browserUtils.getMobileCssClass())
+                .addClass(getMobileCssClass())
                 .toDOM();
         if (this.options.showAddRow) {
             this.addRowButton =
                 ui.domel('div')
                     .toDOM();
-            if (exports.browserUtils.isMobileMode()) {
+            if (ui.browserUtils.isMobileMode()) {
                 ui.domel(this.columnsBlock)
                     .addChildElement(this.addRowButton);
             }
@@ -4940,7 +4939,7 @@ class ColumnsBar extends core.Widget {
         this.columnButtonsBlockMobileArrow = ui.domel('i').toDOM();
         this.columnButtonsBlockMobile = ui.domel('div')
             .addClass(`${this.cssPrefix}-column-buttonsBlock`)
-            .addClass(exports.browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChildElement(this.columnButtonsBlockMobileArrow)
             .hide()
             .toDOM();
@@ -5160,6 +5159,23 @@ class ColumnsBar extends core.Widget {
     showEntitiesMenu(menuOptions) {
         this.entitiesMenu && this.entitiesMenu.showMenu(menuOptions);
     }
+    addAllColumnsToEntitiesList(list) {
+        const attrIds = list.filter(item => !item.isEntity).map(item => item.id);
+        if (attrIds.length > 0) {
+            list.unshift({
+                id: '__AddAll__',
+                text: core$1.i18n.getText('AddAllForEntityText'),
+                extra: {
+                    ids: attrIds
+                }
+            });
+        }
+        list.forEach(item => {
+            if (item.items) {
+                this.addAllColumnsToEntitiesList(item.items);
+            }
+        });
+    }
     createEntitiesMenu() {
         const model = this.getContext().getModel();
         if (!model || model.isEmpty())
@@ -5169,6 +5185,10 @@ class ColumnsBar extends core.Widget {
             menuId += '-EntitiesMenu';
         }
         const entitiesList = model.getEntitiesTree({ addUIC: false, addUIR: true, addUIS: false, attrPlacement: this.options.attrPlacement, sortEntities: this.options.sortEntities });
+        // add [Add all columns] items
+        if (this.options.showAddAllForEntity) {
+            this.addAllColumnsToEntitiesList(entitiesList);
+        }
         const options = { items: entitiesList, adjustHeight: this.options.adjustEntitiesMenuHeight, id: menuId, domWriteItemsId: this.options.domWriteItemsId };
         core$1.utils.assign(options, this.options.menuOptions);
         this.entitiesMenu = new PopupMenu(options);
@@ -5297,7 +5317,7 @@ class ColumnRendererSB {
         }
         builder
             .addClass(this.getClassesToAdd())
-            .addClass(exports.browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChildElement(this.renderCaptionBlock());
         if (this.isEditable()) {
             builder
@@ -5335,7 +5355,7 @@ class ColumnRendererSB {
         }
         return ui.domel('div')
             .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-captionelement`)
-            .addClass(exports.browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChild('div', b => b
             .title(this.column.caption)
             .text(text))
@@ -5357,7 +5377,7 @@ class ColumnRendererSB {
         }
         const builder = ui.domel('div')
             .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-sortimage-placeholder`)
-            .addClass(exports.browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChild('div', builder => builder
             .addClass(`${this.cssPrefix}-img-sorting`, sortButtonDirectionCssClass)
             .title(core$1.i18n.getText('ButtonSorting')))
@@ -5448,7 +5468,7 @@ class SortingBar extends core.Widget {
         this.landingIndex = -1;
         ui.domel(this.slot)
             .addClass(`${this.cssPrefix}-panel`)
-            .addClass(exports.browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         this.group = core.WidgetGroup.Query;
     }
     getWidgetType() {
@@ -5531,7 +5551,7 @@ class SortingBar extends core.Widget {
     renderAddRowButton() {
         ui.domel(this.addRowButton)
             .addClass(`${eqCssPrefix}-addrow`, `${this.cssPrefix}-addrow`, `${eqCssPrefix}-addrow-empty`)
-            .addClass(exports.browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .title(core$1.i18n.getText('CmdClickToAddColumn'))
             .addChild('a', builder => builder
             .attr('href', 'javascript:void(0)')
@@ -5547,7 +5567,7 @@ class SortingBar extends core.Widget {
                 }
             });
         }));
-        if (exports.browserUtils.isMobileMode()) {
+        if (ui.browserUtils.isMobileMode()) {
             ui.domel(this.columnsBlock)
                 .addChildElement(this.addRowButton);
         }
@@ -5587,13 +5607,13 @@ class SortingBar extends core.Widget {
         this.columnsBlock =
             ui.domel('div')
                 .addClass(`${this.cssPrefix}-columns`)
-                .addClass(exports.browserUtils.getMobileCssClass())
+                .addClass(getMobileCssClass())
                 .toDOM();
         if (this.options.showAddRow) {
             this.addRowButton =
                 ui.domel('div')
                     .toDOM();
-            if (exports.browserUtils.isMobileMode()) {
+            if (ui.browserUtils.isMobileMode()) {
                 ui.domel(this.columnsBlock)
                     .addChildElement(this.addRowButton);
             }
@@ -5768,7 +5788,7 @@ class TextRenderer {
         ui.domel(this.element)
             .html('')
             .addClass(this.getClassesToAdd())
-            .addClass(exports.browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChild('span', builder => builder
             .text(this.text)
             .title(this.text))
@@ -5829,7 +5849,7 @@ class SimpleConditionRenderer extends ConditionRenderer {
         let result = `${this.cssPrefix}-row ${this.cssPrefix}-row-condition`;
         result += this.condition.isInJoin() ? ` ${this.cssPrefix}-condition-injoin` : '';
         result += this.condition.isParameterized() ? ` ${this.cssPrefix}-condition-parameterized` : '';
-        if (!exports.browserUtils.isMobileMode()) {
+        if (!ui.browserUtils.isMobileMode()) {
             const level = this.condition.getLevel();
             if (level > 0)
                 result += ` ${this.cssPrefix}-level-${level}`;
@@ -5854,7 +5874,7 @@ class SimpleConditionRenderer extends ConditionRenderer {
         this.element = builder.toDOM();
         builder
             .addClass(this.getClassesToAdd())
-            .addClass(exports.browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .data('id', this.condition.id)
             .data('condrow', '')
             .addChildElement(this.renderCheckbox())
@@ -5887,12 +5907,12 @@ class SimpleConditionRenderer extends ConditionRenderer {
                 builder.addChildElement(new TextRenderer(this.panel, item.text).render());
             }
         }
-        if (this.panel.options.accentActiveCondition || exports.browserUtils.isMobileMode()) {
+        if (this.panel.options.accentActiveCondition || ui.browserUtils.isMobileMode()) {
             builder.on('click', ev => {
                 ev.stopPropagation();
                 this.panel.toggleConditionPicked(this.condition);
                 this.adjustButtonsVisibility();
-                if (!exports.browserUtils.isMobileMode()) {
+                if (!ui.browserUtils.isMobileMode()) {
                     this.element.dispatchEvent(ui.createBrowserEvent("mouseenter"));
                 }
                 return false;
@@ -5900,7 +5920,7 @@ class SimpleConditionRenderer extends ConditionRenderer {
         }
         builder
             .addChildElement(this.renderButtonsBlock());
-        if (!exports.browserUtils.isMobileMode()) {
+        if (!ui.browserUtils.isMobileMode()) {
             builder
                 .on('mouseenter', event => {
                 this.isMouseOverBlock = true;
@@ -6128,7 +6148,7 @@ class SimpleConditionRenderer extends ConditionRenderer {
         };
         const builder = ui.domel("div")
             .addClass(`${this.cssPrefix}-condition-buttonsBlock`)
-            .addClass(exports.browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         this.buttonsBlock = builder.toDOM();
         if (this.condition.isReadOnly()) {
             return this.buttonsBlock;
@@ -6221,7 +6241,7 @@ class SimpleConditionRenderer extends ConditionRenderer {
                         .data("button", "")
                         .title(core$1.i18n.getText('ButtonMenu'))
                         .on('click', evt => this.conditionMenuHandler(exports.ConditionAction.Menu, evt));
-                    if (!exports.browserUtils.isMobileMode()) {
+                    if (!ui.browserUtils.isMobileMode()) {
                         b
                             .on('keypress', evt => { if (evt.keyCode == 13) {
                             evt.target.click();
@@ -6292,7 +6312,7 @@ class ConditionGroupRenderer extends ConditionRenderer {
     coreRender(autoAppear) {
         ui.domel(this.element)
             .addClass(this.getClassesToAdd())
-            .addClass(exports.browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChildElement(this.renderGroupRow())
             .addChildElement(this.renderConditions(autoAppear))
             .data('id', this.condition.id)
@@ -6310,7 +6330,7 @@ class ConditionGroupRenderer extends ConditionRenderer {
         const builder = ui.domel('div');
         builder
             .addClass(`${this.cssPrefix}-conditions`)
-            .addClass(`${exports.browserUtils.getMobileCssClass()}`)
+            .addClass(`${getMobileCssClass()}`)
             .data('conditions', '');
         if (this.isRoot) {
             builder.addClass(`${this.cssPrefix}-conditions-root`);
@@ -6352,7 +6372,7 @@ class ConditionGroupRowRenderer extends SimpleConditionRenderer {
     coreRender(autoAppear) {
         const builder = ui.domel(this.element)
             .addClass(this.getClassesToAdd())
-            .addClass(exports.browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .data('group-row', '')
             .addChildElement(this.renderCheckbox())
             .addChildElement(this.renderConjunction());
@@ -6364,14 +6384,14 @@ class ConditionGroupRowRenderer extends SimpleConditionRenderer {
             builder.on('click', ev => {
                 this.panel.toggleConditionPicked(this.condition);
                 this.adjustButtonsVisibility();
-                if (!exports.browserUtils.isMobileMode()) {
+                if (!ui.browserUtils.isMobileMode()) {
                     builder.toDOM().dispatchEvent(ui.createBrowserEvent("mouseenter"));
                 }
             });
         }
         builder
             .addChildElement(this.renderButtonsBlock());
-        if (!exports.browserUtils.isMobileMode()) {
+        if (!ui.browserUtils.isMobileMode()) {
             builder
                 .on('mouseenter', event => {
                 this.isMouseOverBlock = true;
@@ -6391,7 +6411,7 @@ class ConditionGroupRowRenderer extends SimpleConditionRenderer {
     }
     getGroupTitle() {
         let result;
-        if (this.isRoot && !exports.browserUtils.isMobileMode()) {
+        if (this.isRoot && !ui.browserUtils.isMobileMode()) {
             result = core$1.i18n.getText('RootConditionGroupTitle');
             if (!result) {
                 //to support old text key
@@ -6488,7 +6508,7 @@ class BaseElementRenderer {
         ui.domel(this.element)
             .html('')
             .addClass(this.getClassesToAdd())
-            .addClass(exports.browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChildElement(this.labelElement);
         if (this.isEditable()) {
             this.renderEditor();
@@ -6652,7 +6672,7 @@ class InputExpressionRenderer extends ExpressionRenderer {
     }
     showEditor() {
         const MIN_WIDTH = 200;
-        if (!exports.browserUtils.isMobileMode()) {
+        if (!ui.browserUtils.isMobileMode()) {
             let left = this.element.offsetLeft;
             let width = this.element.offsetWidth > MIN_WIDTH ? this.element.offsetWidth : MIN_WIDTH;
             let maxWidth = this.element.parentElement.clientWidth - left - 55;
@@ -7040,7 +7060,7 @@ class AttributeExpressionRenderer extends ListExpressionRenderer {
         return `${this.cssPrefix}-condelement ${this.cssPrefix}-attrelement`;
     }
     adjustWidth() {
-        if (exports.browserUtils.isMobileMode()) {
+        if (ui.browserUtils.isMobileMode()) {
             return;
         }
         const elWidth = this.element.clientWidth;
@@ -7246,7 +7266,7 @@ class DateTimeExpressionRenderer extends ExpressionRenderer {
             dateTime = model.getTimeMacroValue(value);
         }
         else {
-            dateTime = this.convertFromInternalFormat(value);
+            dateTime = this.convertFromInternalFormat(value, new Date());
         }
         this.dtp.setDateTime(dateTime);
         this.dtp.show(this.element);
@@ -7276,8 +7296,13 @@ class DateTimeExpressionRenderer extends ExpressionRenderer {
         return super.isEditable()
             && ((this.panel.options.editableParts & exports.QPEditablePart.Value) === exports.QPEditablePart.Value);
     }
-    convertFromInternalFormat(dateTime) {
-        return core$1.utils.strToDateTime(dateTime, this.internalDateFormat + ' ' + this.internalTimeFormat);
+    convertFromInternalFormat(dateTimeStr, defautValue) {
+        try {
+            return core$1.utils.strToDateTime(dateTimeStr, this.internalDateFormat + ' ' + this.internalTimeFormat);
+        }
+        catch (_a) {
+            return defautValue || new Date();
+        }
     }
     convertToInternalFormat(dateTime) {
         return core$1.i18n.dateTimeToStr(dateTime, this.internalDateFormat + ' ' + this.internalTimeFormat);
@@ -7791,7 +7816,7 @@ class QueryPanel extends core.Widget {
         if (typeof this.options.editableParts === "undefined") {
             this.options.editableParts = exports.QPEditablePart.All;
         }
-        if (exports.browserUtils.isMobileMode()) {
+        if (ui.browserUtils.isMobileMode()) {
             this.options.buttons = this.options.buttons || {};
             this.options.buttons.condition = ["menu"];
             this.options.buttons.group = ["menu"];
@@ -7809,7 +7834,7 @@ class QueryPanel extends core.Widget {
                 .toDOM();
             ui.domel(this.slot)
                 .removeClass(eqCssMobile)
-                .addClass(exports.browserUtils.getMobileCssClass());
+                .addClass(getMobileCssClass());
             const query = this.getQuery();
             const root = query.getRootCondition();
             const renderer = this.getConditionRenderer(root, this.rootContainer);
@@ -8128,7 +8153,7 @@ class QueryPanel extends core.Widget {
     renderProgressBlock() {
         this.progressBlock = document.createElement('div');
         this.progressBlock.classList.add(`${eqCssPrefix}-progress-win8`);
-        this.progressBlock.classList.add(exports.browserUtils.getMobileCssClass());
+        this.progressBlock.classList.add(getMobileCssClass());
         this.progressBlock.innerHTML = '<div class="wBall" id="wBall_1"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_2"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_3"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_4"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_5"><div class="wInnerBall"></div></div>';
     }
     clonePanel(slot, query) {
@@ -8244,7 +8269,7 @@ class FilterBar extends core.Widget {
     render() {
         ui.domel(this.slot)
             .addClass(`${this.cssPrefix}-container`)
-            .addClass(exports.browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChild('div', builder => this.headerElement = builder
             .addClass(`${this.cssPrefix}-header`)
             .addChild('div', builder => this.headerIconElement = builder
@@ -8290,14 +8315,14 @@ class FilterBar extends core.Widget {
             .toDOM())
             .addChild('div', builder => this.qpBlock = builder
             .addClass(`${this.cssPrefix}-querypanelblock`)
-            .addClass(exports.browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .hide()
             .addChildElement(this.qpElement)
             .toDOM());
         if (this.options.showApplyButton || this.options.showClearButton) {
             this.buttonsBlock = ui.domel('div', this.qpBlock)
                 .addClass(`${this.cssPrefix}-buttonsblock`)
-                .addClass(exports.browserUtils.getMobileCssClass())
+                .addClass(getMobileCssClass())
                 .toDOM();
         }
         if (this.options.showApplyButton) {
@@ -9082,7 +9107,7 @@ class ResultFacet {
         let b = ui.domel('div')
             .addClass('kfrm-form')
             .addChild('div', b => fieldsContainer = b
-            .addClass(`${exports.browserUtils.isIE()
+            .addClass(`${ui.browserUtils.isIE()
             ? 'kfrm-fields-ie col-ie-1-4 label-align-right'
             : 'kfrm-fields col-a-1 label-align-right'}`)
             .toDOM());
@@ -9091,7 +9116,7 @@ class ResultFacet {
     }
     renderFormFields(form, fieldsContainer) {
         let cont = fieldsContainer;
-        if (exports.browserUtils.isIE()) {
+        if (ui.browserUtils.isIE()) {
             cont = ui.domel('div', fieldsContainer)
                 .addClass('kfrm-field-ie')
                 .toDOM();
@@ -9894,7 +9919,7 @@ class ChartFacet extends ResultFacet {
     }
     renderFormFields(form, fieldsContainer) {
         super.renderFormFields(form, fieldsContainer);
-        const isIE = exports.browserUtils.isIE();
+        const isIE = ui.browserUtils.isIE();
         const horizClass = isIE ? 'kfrm-fields-ie is-horizontal' : 'kfrm-fields is-horizontal';
         // Chart type
         let chartTypeSelector = document.createElement('select');
@@ -10086,6 +10111,7 @@ class PivotTableFacet extends ResultFacet {
         this.title = core$1.i18n.getText('Facets', 'Pivot', 'FacetTitle');
         this.dialogTitle = core$1.i18n.getText('Facets', 'Pivot', 'DlgTitle');
         this.pivotTable = new core$1.EasyDataTable();
+        this.settings = {};
     }
     init(slot) {
         super.init(slot);
@@ -10218,7 +10244,7 @@ class PivotTableFacet extends ResultFacet {
             core$1.DataType.Int64, core$1.DataType.Word, core$1.DataType.Byte];
         const fieldTypes = [core$1.DataType.String, core$1.DataType.Float, core$1.DataType.Int32,
             core$1.DataType.Int64, core$1.DataType.Word, core$1.DataType.Byte, core$1.DataType.Currency];
-        const isIE = exports.browserUtils.isIE();
+        const isIE = ui.browserUtils.isIE();
         let current = fieldsContainer;
         const horizClass = isIE ? 'kfrm-fields-ie is-horizontal' : 'kfrm-fields is-horizontal';
         const getCurrent = () => {
@@ -10366,14 +10392,14 @@ class PivotTableFacet extends ResultFacet {
     saveToData() {
         const data = super.saveToData();
         if (this.settings) {
-            core$1.utils.assignDeep(data, this.settings);
+            core$1.utils.assign(data, this.settings);
         }
         return data;
     }
     loadFromData(data) {
         super.loadFromData(data);
         if (data) {
-            this.settings = core$1.utils.assignDeep(this.settings, data);
+            this.settings = core$1.utils.assign(this.settings, data);
             if (this.settings.aggrFunc == 'AVERAGE') {
                 this.settings.aggrFunc = AggrFunc.Average;
             }
@@ -10962,7 +10988,7 @@ class ResultFacetsPanel extends FacetContainer {
         this._processBlock = ui.domel('div')
             .addClass(`${this.cssPrefix}-spinner`)
             .addChild('div', b => b
-            .addClass(`${eqCssPrefix}-progress-win8`, exports.browserUtils.getMobileCssClass())
+            .addClass(`${eqCssPrefix}-progress-win8`, getMobileCssClass())
             .addHtml(html))
             .toDOM();
     }
@@ -11934,7 +11960,7 @@ class AggregationBar extends core.Widget {
     }
     render() {
         this.slot.classList.add(`${this.cssPrefix}-panel`);
-        const mobClass = exports.browserUtils.getMobileCssClass();
+        const mobClass = getMobileCssClass();
         if (mobClass) {
             this.slot.classList.add(mobClass);
         }
@@ -12067,7 +12093,7 @@ class QueryNameWidget extends core.Widget {
     }
     render() {
         this.slot.classList.add(`${this.cssPrefix}`);
-        const mobClass = exports.browserUtils.getMobileCssClass();
+        const mobClass = getMobileCssClass();
         if (mobClass) {
             this.slot.classList.add(mobClass);
         }
@@ -12175,7 +12201,7 @@ class View {
     }
     initOptions(options) {
         options = core$1.utils.assignDeep(this.defaultViewOptions, options);
-        // support old format 
+        // support old format
         if (!options.widgets.easyGrid) {
             options.widgets.easyGrid = options.widgets.resultGrid || {};
         }
@@ -12405,7 +12431,7 @@ class View {
         this._spinnerDiv = ui.domel('div')
             .addClass(`eqjs-result-spinner`)
             .addChild('div', b => b
-            .addClass(`${eqCssPrefix}-progress-win8`, exports.browserUtils.getMobileCssClass())
+            .addClass(`${eqCssPrefix}-progress-win8`, getMobileCssClass())
             .addHtml(html))
             .toDOM();
     }
@@ -12629,6 +12655,9 @@ class View {
         this.domRoots = [document];
         this.resetContext();
     }
+    refreshWidgets(groups) {
+        this.context.refreshWidgets(groups);
+    }
 }
 
 /**
@@ -12906,8 +12935,12 @@ class AdvancedSearchView extends View {
         });
     }
     clearQueryButtonClick() {
-        this.context.clearQuery();
-        this.context.refreshWidgets(core.WidgetGroup.Statement);
+        this.showQueryClearDialog((result) => {
+            if (result) {
+                this.context.clearQuery();
+                this.context.refreshWidgets(core.WidgetGroup.Statement);
+            }
+        });
     }
     createNewQuery(options) {
         return this.context.newQuery(options);
@@ -12937,22 +12970,43 @@ class AdvancedSearchView extends View {
     saveCurrentQuery(copyQuery = false, callback) {
         const query = this.context.getQuery();
         if (query.isNewbie || copyQuery) {
-            this.showSaveQueryDialog((result) => new Promise(resolve => {
-                if (!result)
+            this.showSaveQueryDialog((newQueryName) => new Promise(resolve => {
+                if (!newQueryName)
                     return;
-                query.regenerateId();
-                query.setName(result);
-                query.fireChangedEvent({
-                    part: core.QueryChangePart.Properties,
-                    wasModified: true
-                });
-                this.saveQuery(() => { resolve({ success: true }); }, (error) => resolve({ success: false, message: error }));
+                this.checkSaveQueryName(newQueryName)
+                    .then(() => {
+                    query.regenerateId();
+                    query.setName(newQueryName);
+                    query.fireChangedEvent({
+                        part: core.QueryChangePart.Properties,
+                        wasModified: true
+                    });
+                    this.saveQuery(() => { resolve({ success: true }); }, (error) => resolve({ success: false, message: error }));
+                }, (message) => resolve({ success: false, message }));
             }));
         }
         else {
             this.saveQuery(callback);
         }
     }
+    checkSaveQueryName(name) {
+        return new Promise((resolve, reject) => {
+            this.context.loadQueryList({
+                success: (queryList) => {
+                    const found = queryList.filter(item => item.name.toLowerCase() == name.toLowerCase());
+                    if (found.length == 0) {
+                        resolve();
+                    }
+                    else {
+                        reject("Can't save the query. A query with this name already exists.");
+                    }
+                },
+                error: (message) => {
+                    reject(message);
+                }
+            });
+        });
+    }
     checkIfQueryModified(callback) {
         if (this.context.getQuery().isModified()
             && !this.viewOptions.disableConfirmationOnQueryChange) {
@@ -13031,6 +13085,10 @@ class AdvancedSearchView extends View {
             }
         });
     }
+    showQueryClearDialog(callback) {
+        const ds = this.getDialogService();
+        ds.openConfirm(core$1.i18n.getText('QueryChangedTitle'), core$1.i18n.getText('QueryClearContent'), callback);
+    }
     showQueryChangedDialog(callback) {
         const ds = this.getDialogService();
         ds.openConfirm(core$1.i18n.getText('QueryChangedTitle'), core$1.i18n.getText('QueryChangedContent'), callback);
@@ -13124,7 +13182,7 @@ class AdvancedSearchView extends View {
         });
     }
     renderSaveToFileDialogBody(name, format = "json") {
-        const isIE = exports.browserUtils.isIE();
+        const isIE = ui.browserUtils.isIE();
         const fieldsClass = isIE
             ? 'kfrm-fields-ie col-ie-1-4 label-align-right'
             : 'kfrm-fields col-a-1 label-align-right';
@@ -13419,7 +13477,7 @@ class ReportView extends View {
         this.saveReportButtonClickHandler = this.saveReportButtonClick.bind(this);
         this.removeReportButtonClickHandler = this.removeReportButtonClick.bind(this);
         this.reloadReportDataButtonClickHandler = this.reloadReportDataButtonClick.bind(this);
-        exports.browserUtils.onMobileModeChanged(_ => {
+        ui.browserUtils.onMobileModeChanged(_ => {
             document.location.reload();
         });
     }
@@ -14190,6 +14248,7 @@ function addEasyQueryUITexts() {
         CmdDeleteColumn: 'Delete column',
         CmdDeleteSorting: 'Delete sorting',
         CmdDescending: 'Descending',
+        CmdGroupAppearance: 'Appearance',
         CmdGroupSort: 'Sorting',
         CmdGroupFormat: 'Display format',
         CmdNotSorted: 'Not sorted',
@@ -14237,6 +14296,7 @@ function addEasyQueryUITexts() {
         SaveQueryDefName: '{queryName} copy',
         QueryChangedTitle: 'Confirmation',
         QueryChangedContent: 'The query was changed. Do you want to save it first?',
+        QueryClearContent: 'The query will cleared. Do you want to continue?',
         UpdateQuerySelector: '[click here to load the query]',
         FileNameLabel: 'File name: ',
         SaveQueryToFileDlgTitle: 'Save query to file',