@easyquery/ui 7.2.5-rc03 → 7.3.0-rc01

package/dist/easyquery.ui.esm.js

@@ -1,6 +1,6 @@
 import { utils, i18n, DataType, EasyDataTable, AggregationSettings } from '@easydata/core';
 import { Widget, WidgetGroup, QueryChangePart, QueryChangeAction, ExprTag, SortDirection, i18n as i18n$1, equtils, eqconsts, ConditionPart, DataKind, Query, Expression, CondTag, EqEditorTag, EqValueEditor, EqServiceProvider, createEqContext } from '@easyquery/core';
-import { eqDragManager, getElementAbsolutePos, getScrollPos, getWinSize, getViewportSize, domel, DropEffect, createBrowserEvent, DomElementBuilder, DefaultDateTimePicker, slideDown, slideUp, EasyGrid, addCssClass, hideElement, showElement, isVisible, toggleVisibility, addElement, DefaultDialogService } from '@easydata/ui';
+import { browserUtils, eqDragManager, getElementAbsolutePos, getScrollPos, getWinSize, getViewportSize, domel, DropEffect, createBrowserEvent, DomElementBuilder, DefaultDateTimePicker, slideDown, slideUp, EasyGrid, addCssClass, hideElement, showElement, isVisible, toggleVisibility, addElement, DefaultDialogService } from '@easydata/ui';
 
 function findHighestZIndex(elem) {
     let highest = 0;
@@ -27,64 +27,9 @@ function safeFocus(element) {
 }
 const eqCssPrefix = 'eqjs';
 const eqCssMobile = 'eqjs-mobile';
-
-var browserUtils;
-(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;
-})(browserUtils || (browserUtils = {}));
+function getMobileCssClass() {
+    return browserUtils.isMobileMode() ? eqCssMobile : null;
+}
 
 /**
  * The entities panel wiget, implemented without JQuery.
@@ -183,13 +128,13 @@ class EntitiesPanel extends Widget {
         let model = this.context.getModel();
         this.clear();
         this.panel.classList.add(`${this.cssPrefix}-panel`);
-        this.panel.classList.add(browserUtils.getMobileCssClass());
+        this.panel.classList.add(getMobileCssClass());
         this.rootEntityBlock = document.createElement('div');
         if (model != null && !model.isEmpty()) {
             let entTree = model.getEntitiesTree({
-                addUIC: this.options.showAttributes.useInConditions,
+                addUIC: this.options.showAttributes.useInConditions && !this.options.syncWithColumns,
                 addUIR: this.options.showAttributes.useInResult,
-                addUIS: this.options.showAttributes.useInSorting,
+                addUIS: this.options.showAttributes.useInSorting && !this.options.syncWithColumns,
                 attrPlacement: this.options.attrPlacement,
                 sortEntities: this.options.sortEntities,
                 includeRootData: true
@@ -214,10 +159,10 @@ class EntitiesPanel extends Widget {
         let entityBlock;
         let entityNode = document.createElement('div');
         entityNode.classList.add(`${this.cssPrefix}-entity-node`);
-        entityNode.classList.add(browserUtils.getMobileCssClass());
+        entityNode.classList.add(getMobileCssClass());
         let entityChildren = document.createElement('div');
         entityChildren.classList.add(`${this.cssPrefix}-entity-children`);
-        entityChildren.classList.add(browserUtils.getMobileCssClass());
+        entityChildren.classList.add(getMobileCssClass());
         let nodeLabel = document.createElement('label');
         nodeLabel.classList.add(`${this.cssPrefix}-entity-node-label`);
         let nodeInput = document.createElement('input');
@@ -241,7 +186,7 @@ class EntitiesPanel extends Widget {
             entityBlock = document.createElement('div');
         }
         entityBlock.classList.add(`${this.cssPrefix}-entity`);
-        entityBlock.classList.add(browserUtils.getMobileCssClass());
+        entityBlock.classList.add(getMobileCssClass());
         if (entity.id && entity.id != "") {
             nodeLabel.innerText = entity.text;
             entityNode.appendChild(nodeLabel); //caption
@@ -288,7 +233,7 @@ class EntitiesPanel extends Widget {
                                         const attr = model.getAttributeById(attrId);
                                         const column = query.addColumn({
                                             attribute: attr
-                                        });
+                                        }, true);
                                         query.fireColumnsChangedEvent(QueryChangeAction.Add, column);
                                     }
                                     else {
@@ -320,7 +265,7 @@ class EntitiesPanel extends Widget {
                     attrNode.innerHTML = "";
                     attrNode.appendChild(attrLabel);
                     attrNode.setAttribute('data-id', item.id);
-                    if (this.options.draggableAttributes) {
+                    if (this.options.draggableAttributes && !this.options.syncWithColumns) {
                         eqDragManager.registerDraggableItem({
                             element: attrNode,
                             scope: "entityAttr",
@@ -391,7 +336,7 @@ class EntitiesPanel extends Widget {
                 }
                 if (element.checked) {
                     for (const attrId of attrList) {
-                        query.addColumn({ attributeId: attrId });
+                        query.addColumn({ attributeId: attrId }, true);
                     }
                 }
                 else {
@@ -412,7 +357,7 @@ class EntitiesPanel extends Widget {
     createFilterBox() {
         this.filterBoxBlock = document.createElement('div');
         this.filterBoxBlock.classList.add(`${this.cssPrefix}-filter-box`);
-        this.filterBoxBlock.classList.add(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) => {
@@ -445,7 +390,7 @@ class EntitiesPanel extends Widget {
         let defClass = `${this.cssPrefix}-tool-panel`;
         let toolPanelBlock = document.createElement('div');
         toolPanelBlock.classList.add(defClass);
-        toolPanelBlock.classList.add(browserUtils.getMobileCssClass());
+        toolPanelBlock.classList.add(getMobileCssClass());
         let toolSelectAll = document.createElement('div');
         toolSelectAll.classList.add(`${defClass}-select-all`);
         toolSelectAll.title = 'Select all';
@@ -658,7 +603,7 @@ class EntitiesPanel extends Widget {
     renderProgressBlock() {
         this.progressBlock = document.createElement('div');
         this.progressBlock.classList.add(`${eqCssPrefix}-progress-win8`);
-        this.progressBlock.classList.add(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() {
@@ -715,7 +660,7 @@ class MenuLevel {
         const isSubQuery = this.parentMenu.options.isSubQuery;
         //add base DIV element which is also used to show the shadow
         const baseDivBuilder = domel('div')
-            .addClass(browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         if (this.parentMenu.options.useDefaultStyles) {
             baseDivBuilder
                 .setStyle('backgroundColor', itemBgColor)
@@ -839,7 +784,7 @@ class MenuLevel {
         scrollDiv.tabIndex = 1;
         domel(scrollDiv)
             .addClass(`${this.cssPrefix}-scrollDiv`)
-            .addClass(browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         scrollDiv.style.overflowX = "hidden";
         scrollDiv.style.overflowY = "auto";
         scrollDiv.style.position = "relative";
@@ -1036,7 +981,7 @@ class MenuLevel {
             const itemDiv = document.createElement("div");
             domel(itemDiv)
                 .addClass(`${this.cssPrefix}-itemDiv`)
-                .addClass(browserUtils.getMobileCssClass());
+                .addClass(getMobileCssClass());
             if (item.selected && this.showSelected && !multiselect) {
                 itemDiv.classList.add(`${this.cssPrefix}-selected`);
             }
@@ -1219,7 +1164,7 @@ class MenuLevel {
         const itemDiv = document.createElement("div");
         domel(itemDiv)
             .addClass(`${this.cssPrefix}-itemDiv`)
-            .addClass(browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         itemDiv.style.marginLeft = `${level * 10}px`;
         if (item.selected && !multiselect) {
             itemDiv.classList.add(`${this.cssPrefix}-selected`);
@@ -1564,7 +1509,7 @@ class MenuLevel {
             this.parentElement.appendChild(this.levelDiv);
             domel(this.levelDiv)
                 .addClass(`${this.cssPrefix}-levelDiv`)
-                .addClass(browserUtils.getMobileCssClass());
+                .addClass(getMobileCssClass());
             this.initialized = true;
         }
     }
@@ -2040,7 +1985,7 @@ class ColumnRendererCP {
         this.createButtonMenu();
         builder
             .addClass(this.getClassesToAdd())
-            .addClass(browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChildElement(this.renderCheckbox())
             //start sort button
             .addChild('div', builder => builder
@@ -2057,7 +2002,7 @@ class ColumnRendererCP {
             .addChild('div', builder => {
             builder
                 .addClass(`${eqCssPrefix}-column-buttonsBlock`, `${this.cssPrefix}-buttonsBlock`)
-                .addClass(browserUtils.getMobileCssClass());
+                .addClass(getMobileCssClass());
             //start enable button
             if (this.getButtonsToShow().indexOf("enable") >= 0 && !this.column.isReadOnly()) {
                 builder.addChildElement(this.renderEnabledButton());
@@ -2084,7 +2029,7 @@ class ColumnRendererCP {
             }
             //end menu button
         });
-        //end buttons 
+        //end buttons
         if (!browserUtils.isMobileMode()) {
             //start event listeners
             builder
@@ -2099,6 +2044,9 @@ class ColumnRendererCP {
         if (this.panel.options.alwaysShowButtons) {
             this.showButtons();
         }
+        if (this.panel.options.showCheckboxes === false) {
+            builder.addClass("eqjs-no-checkbox");
+        }
         return this.element;
     }
     onMouseClick(ev) {
@@ -2119,7 +2067,7 @@ class ColumnRendererCP {
     renderCaptionBlock() {
         const builder = domel('div')
             .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-captionelement`)
-            .addClass(browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         if (this.isEditable()) {
             builder
                 .addChild('a', builder => builder
@@ -2309,7 +2257,7 @@ class ColumnRendererCP {
             .addClass(`${eqCssPrefix}-button`, `${eqCssPrefix}-column-button`, `${eqCssPrefix}-column-button-menu`)
             .title(i18n$1.getText('ButtonMenu'))
             .attr('tabIndex', '0')
-            .on('click', evt => this.buttonMenuHandler(ColumnAction.Menu, evt)) //touchstart 
+            .on('click', evt => this.buttonMenuHandler(ColumnAction.Menu, evt)) //touchstart
             .on('keypress', evt => { if (evt.keyCode == 13) {
             evt.target.click();
         } }))
@@ -2739,10 +2687,10 @@ class AttrColumnRendererCP extends ColumnRendererCP {
     renderExpressionBlock() {
         return domel("div")
             .addClass(`${this.cssPrefix}-expr-block`)
-            .addClass(browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChild('div', builder => builder
             .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-attrelement`)
-            .addClass(browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChildElement(this.renderBaseExpression()))
             .toDOM();
     }
@@ -2912,7 +2860,7 @@ class AggrFuncColumnRendererCP extends AttrColumnRendererCP {
         const model = this.panel.getContext().getModel();
         const exprBlockBuilder = domel("div")
             .addClass(`${this.cssPrefix}-expr-block`, `${this.cssPrefix}-expr-block-aggr`)
-            .addClass(browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         const format = model.getAggrFunctionFormat(this.column.expr.func);
         if (!format || format === '')
             return;
@@ -2948,14 +2896,14 @@ class AggrFuncColumnRendererCP extends AttrColumnRendererCP {
                     exprBlockBuilder
                         .addChild('div', builder => builder
                         .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-aggrfuncelement`)
-                        .addClass(browserUtils.getMobileCssClass())
+                        .addClass(getMobileCssClass())
                         .addChildElement(functionLink.toDOM()));
                 }
                 else {
                     exprBlockBuilder
                         .addChild('div', b => b
                         .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-aggrfuncelement`)
-                        .addClass(browserUtils.getMobileCssClass())
+                        .addClass(getMobileCssClass())
                         .addChild('span', b => b
                         .text(item.text)
                         .title(item.text)));
@@ -2965,14 +2913,14 @@ class AggrFuncColumnRendererCP extends AttrColumnRendererCP {
                 exprBlockBuilder
                     .addChild('div', builder => builder
                     .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-attrelement`)
-                    .addClass(browserUtils.getMobileCssClass())
+                    .addClass(getMobileCssClass())
                     .addChildElement(this.renderBaseExpression()));
             }
             else if (item.type === 3) {
                 exprBlockBuilder
                     .addChild('span', builder => builder
                     .addClass(`${this.cssPrefix}-colelement`)
-                    .addClass(browserUtils.getMobileCssClass())
+                    .addClass(getMobileCssClass())
                     .text(item.text)
                     .title(item.text));
             }
@@ -3054,12 +3002,12 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
     renderExpressionBlock() {
         const exprBlock = domel("div")
             .addClass(`${this.cssPrefix}-expr-block`)
-            .addClass(browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .toDOM();
         //Attribute element
         let builder = domel('div', exprBlock)
             .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-attrelement`)
-            .addClass(browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         if (this.isEditable()) {
             builder
                 .addChild('a', b => b
@@ -3135,7 +3083,7 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
         // DataType element
         builder = domel('div', exprBlock)
             .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-attrelement`)
-            .addClass(browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         if (this.isEditable()) {
             this.createDataTypeMenu();
             builder
@@ -3385,8 +3333,18 @@ class ColumnsPanel extends Widget {
             const headerBuilder = domel('div', this.slot)
                 .hide()
                 .addClass(`${this.cssPrefix}-header`)
-                .addClass(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(i18n.getText('HeaderExpression')));
             if (this.options.showColumnTitles !== false) {
@@ -3401,13 +3359,13 @@ class ColumnsPanel extends Widget {
         this.columnsBlock =
             domel('div', this.slot)
                 .addClass(`${this.cssPrefix}-columns`)
-                .addClass(browserUtils.getMobileCssClass())
+                .addClass(getMobileCssClass())
                 .toDOM();
         if (this.options.showAddRow) {
             this.addRowElement =
                 domel('div', this.slot)
                     .addClass(`${eqCssPrefix}-addrow`, `${this.cssPrefix}-addrow`, `${eqCssPrefix}-addrow-empty`)
-                    .addClass(browserUtils.getMobileCssClass())
+                    .addClass(getMobileCssClass())
                     .addChild('a', builder => builder
                     .attr('href', 'javascript:void(0)')
                     .text(i18n.getText('CmdClickToAddColumn'))
@@ -3629,7 +3587,7 @@ class ColumnsPanel extends Widget {
             this.agjustHeaderVisibility();
             domel(this.slot)
                 .removeClass(eqCssMobile)
-                .addClass(browserUtils.getMobileCssClass());
+                .addClass(getMobileCssClass());
             const query = this.context.getQuery();
             const columns = query.getColumns();
             for (let column of columns) {
@@ -3947,7 +3905,7 @@ class ColumnsPanel extends Widget {
     renderProgressBlock() {
         this.progressBlock = document.createElement('div');
         this.progressBlock.classList.add(`${eqCssPrefix}-progress-win8`);
-        this.progressBlock.classList.add(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>';
     }
 }
@@ -3997,7 +3955,7 @@ class ColumnRendererCB {
         }
         builder
             .addClass(this.getClassesToAdd())
-            .addClass(browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChildElement(this.renderCaptionBlock())
             .addChildElement(this.renderSortingImage());
         if (!browserUtils.isMobileMode()) {
@@ -4038,7 +3996,7 @@ class ColumnRendererCB {
         if (!this.isEditable()) {
             return domel('div')
                 .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-captionelement`)
-                .addClass(browserUtils.getMobileCssClass())
+                .addClass(getMobileCssClass())
                 .addChild('div', b => b
                 .title(caption)
                 .text(caption)
@@ -4072,7 +4030,7 @@ class ColumnRendererCB {
         }); //TO DO:add localization and input field);
         return domel('div')
             .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-captionelement`)
-            .addClass(browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChild('a', builder => builder
             .attr('href', 'javascript:void(0)')
             .title(this.column.caption)
@@ -4148,7 +4106,7 @@ class ColumnRendererCB {
         else {
             return domel('div')
                 .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-sortimage-placeholder`)
-                .addClass(browserUtils.getMobileCssClass())
+                .addClass(getMobileCssClass())
                 .addChild('div', builder => builder
                 .addClass(`${this.cssPrefix}-img-sorting`, sortButtonDirectionCssClass)
                 .title(i18n.getText('ButtonSorting')))
@@ -4640,6 +4598,7 @@ class ColumnsBar extends Widget {
             sortEntities: false,
             columnRenderedCallback: null,
             customExpressionText: 0,
+            showAddAllForEntity: false
         };
         this.landingSlot = domel('div')
             .addClass(`${eqCssPrefix}-highlight`)
@@ -4659,7 +4618,7 @@ class ColumnsBar extends Widget {
         ];
         domel(this.slot)
             .addClass(`${this.cssPrefix}-panel`)
-            .addClass(browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         this.group = WidgetGroup.Query;
         this.customQuery = customQuery;
     }
@@ -4878,7 +4837,7 @@ class ColumnsBar extends Widget {
     renderAddRowButton() {
         domel(this.addRowButton)
             .addClass(`${eqCssPrefix}-addrow`, `${this.cssPrefix}-addrow`, `${eqCssPrefix}-addrow-empty`)
-            .addClass(browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .title(i18n.getText('CmdClickToAddColumn'))
             .addChild('a', builder => builder
             .attr('href', 'javascript:void(0)')
@@ -4888,8 +4847,13 @@ class ColumnsBar extends 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;
                 }
             });
@@ -4908,7 +4872,7 @@ class ColumnsBar extends Widget {
         this.columnsBlock =
             domel('div')
                 .addClass(`${this.cssPrefix}-columns`)
-                .addClass(browserUtils.getMobileCssClass())
+                .addClass(getMobileCssClass())
                 .toDOM();
         if (this.options.showAddRow) {
             this.addRowButton =
@@ -4938,7 +4902,7 @@ class ColumnsBar extends Widget {
         this.columnButtonsBlockMobileArrow = domel('i').toDOM();
         this.columnButtonsBlockMobile = domel('div')
             .addClass(`${this.cssPrefix}-column-buttonsBlock`)
-            .addClass(browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChildElement(this.columnButtonsBlockMobileArrow)
             .hide()
             .toDOM();
@@ -5158,6 +5122,23 @@ class ColumnsBar extends 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: 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())
@@ -5167,6 +5148,10 @@ class ColumnsBar extends 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 };
         utils.assign(options, this.options.menuOptions);
         this.entitiesMenu = new PopupMenu(options);
@@ -5295,7 +5280,7 @@ class ColumnRendererSB {
         }
         builder
             .addClass(this.getClassesToAdd())
-            .addClass(browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChildElement(this.renderCaptionBlock());
         if (this.isEditable()) {
             builder
@@ -5333,7 +5318,7 @@ class ColumnRendererSB {
         }
         return domel('div')
             .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-captionelement`)
-            .addClass(browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChild('div', b => b
             .title(this.column.caption)
             .text(text))
@@ -5355,7 +5340,7 @@ class ColumnRendererSB {
         }
         const builder = domel('div')
             .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-sortimage-placeholder`)
-            .addClass(browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChild('div', builder => builder
             .addClass(`${this.cssPrefix}-img-sorting`, sortButtonDirectionCssClass)
             .title(i18n.getText('ButtonSorting')))
@@ -5446,7 +5431,7 @@ class SortingBar extends Widget {
         this.landingIndex = -1;
         domel(this.slot)
             .addClass(`${this.cssPrefix}-panel`)
-            .addClass(browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         this.group = WidgetGroup.Query;
     }
     getWidgetType() {
@@ -5529,7 +5514,7 @@ class SortingBar extends Widget {
     renderAddRowButton() {
         domel(this.addRowButton)
             .addClass(`${eqCssPrefix}-addrow`, `${this.cssPrefix}-addrow`, `${eqCssPrefix}-addrow-empty`)
-            .addClass(browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .title(i18n.getText('CmdClickToAddColumn'))
             .addChild('a', builder => builder
             .attr('href', 'javascript:void(0)')
@@ -5585,7 +5570,7 @@ class SortingBar extends Widget {
         this.columnsBlock =
             domel('div')
                 .addClass(`${this.cssPrefix}-columns`)
-                .addClass(browserUtils.getMobileCssClass())
+                .addClass(getMobileCssClass())
                 .toDOM();
         if (this.options.showAddRow) {
             this.addRowButton =
@@ -5617,7 +5602,7 @@ class SortingBar extends Widget {
             attributeId: attrId,
             justsorted: true,
             sorting: SortDirection.Ascending
-        });
+        }, true);
         query.fireChangedEvent({
             part: QueryChangePart.SortingColumns,
             action: QueryChangeAction.Add,
@@ -5766,7 +5751,7 @@ class TextRenderer {
         domel(this.element)
             .html('')
             .addClass(this.getClassesToAdd())
-            .addClass(browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChild('span', builder => builder
             .text(this.text)
             .title(this.text))
@@ -5852,7 +5837,7 @@ class SimpleConditionRenderer extends ConditionRenderer {
         this.element = builder.toDOM();
         builder
             .addClass(this.getClassesToAdd())
-            .addClass(browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .data('id', this.condition.id)
             .data('condrow', '')
             .addChildElement(this.renderCheckbox())
@@ -6126,7 +6111,7 @@ class SimpleConditionRenderer extends ConditionRenderer {
         };
         const builder = domel("div")
             .addClass(`${this.cssPrefix}-condition-buttonsBlock`)
-            .addClass(browserUtils.getMobileCssClass());
+            .addClass(getMobileCssClass());
         this.buttonsBlock = builder.toDOM();
         if (this.condition.isReadOnly()) {
             return this.buttonsBlock;
@@ -6290,7 +6275,7 @@ class ConditionGroupRenderer extends ConditionRenderer {
     coreRender(autoAppear) {
         domel(this.element)
             .addClass(this.getClassesToAdd())
-            .addClass(browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChildElement(this.renderGroupRow())
             .addChildElement(this.renderConditions(autoAppear))
             .data('id', this.condition.id)
@@ -6308,7 +6293,7 @@ class ConditionGroupRenderer extends ConditionRenderer {
         const builder = domel('div');
         builder
             .addClass(`${this.cssPrefix}-conditions`)
-            .addClass(`${browserUtils.getMobileCssClass()}`)
+            .addClass(`${getMobileCssClass()}`)
             .data('conditions', '');
         if (this.isRoot) {
             builder.addClass(`${this.cssPrefix}-conditions-root`);
@@ -6350,7 +6335,7 @@ class ConditionGroupRowRenderer extends SimpleConditionRenderer {
     coreRender(autoAppear) {
         const builder = domel(this.element)
             .addClass(this.getClassesToAdd())
-            .addClass(browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .data('group-row', '')
             .addChildElement(this.renderCheckbox())
             .addChildElement(this.renderConjunction());
@@ -6486,7 +6471,7 @@ class BaseElementRenderer {
         domel(this.element)
             .html('')
             .addClass(this.getClassesToAdd())
-            .addClass(browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChildElement(this.labelElement);
         if (this.isEditable()) {
             this.renderEditor();
@@ -7244,7 +7229,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);
@@ -7274,8 +7259,13 @@ class DateTimeExpressionRenderer extends ExpressionRenderer {
         return super.isEditable()
             && ((this.panel.options.editableParts & QPEditablePart.Value) === QPEditablePart.Value);
     }
-    convertFromInternalFormat(dateTime) {
-        return utils.strToDateTime(dateTime, this.internalDateFormat + ' ' + this.internalTimeFormat);
+    convertFromInternalFormat(dateTimeStr, defautValue) {
+        try {
+            return utils.strToDateTime(dateTimeStr, this.internalDateFormat + ' ' + this.internalTimeFormat);
+        }
+        catch (_a) {
+            return defautValue || new Date();
+        }
     }
     convertToInternalFormat(dateTime) {
         return i18n.dateTimeToStr(dateTime, this.internalDateFormat + ' ' + this.internalTimeFormat);
@@ -7807,7 +7797,7 @@ class QueryPanel extends Widget {
                 .toDOM();
             domel(this.slot)
                 .removeClass(eqCssMobile)
-                .addClass(browserUtils.getMobileCssClass());
+                .addClass(getMobileCssClass());
             const query = this.getQuery();
             const root = query.getRootCondition();
             const renderer = this.getConditionRenderer(root, this.rootContainer);
@@ -8126,7 +8116,7 @@ class QueryPanel extends Widget {
     renderProgressBlock() {
         this.progressBlock = document.createElement('div');
         this.progressBlock.classList.add(`${eqCssPrefix}-progress-win8`);
-        this.progressBlock.classList.add(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) {
@@ -8242,7 +8232,7 @@ class FilterBar extends Widget {
     render() {
         domel(this.slot)
             .addClass(`${this.cssPrefix}-container`)
-            .addClass(browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .addChild('div', builder => this.headerElement = builder
             .addClass(`${this.cssPrefix}-header`)
             .addChild('div', builder => this.headerIconElement = builder
@@ -8288,14 +8278,14 @@ class FilterBar extends Widget {
             .toDOM())
             .addChild('div', builder => this.qpBlock = builder
             .addClass(`${this.cssPrefix}-querypanelblock`)
-            .addClass(browserUtils.getMobileCssClass())
+            .addClass(getMobileCssClass())
             .hide()
             .addChildElement(this.qpElement)
             .toDOM());
         if (this.options.showApplyButton || this.options.showClearButton) {
             this.buttonsBlock = domel('div', this.qpBlock)
                 .addClass(`${this.cssPrefix}-buttonsblock`)
-                .addClass(browserUtils.getMobileCssClass())
+                .addClass(getMobileCssClass())
                 .toDOM();
         }
         if (this.options.showApplyButton) {
@@ -8756,7 +8746,7 @@ class EasyGridWidget extends Grid {
         const query = this.getContext().getQuery();
         const col = query.addColumn({
             attributeId: attrId
-        });
+        }, true);
         query.fireChangedEvent({
             part: QueryChangePart.Columns,
             action: QueryChangeAction.Add,
@@ -10084,6 +10074,7 @@ class PivotTableFacet extends ResultFacet {
         this.title = i18n.getText('Facets', 'Pivot', 'FacetTitle');
         this.dialogTitle = i18n.getText('Facets', 'Pivot', 'DlgTitle');
         this.pivotTable = new EasyDataTable();
+        this.settings = {};
     }
     init(slot) {
         super.init(slot);
@@ -10364,14 +10355,14 @@ class PivotTableFacet extends ResultFacet {
     saveToData() {
         const data = super.saveToData();
         if (this.settings) {
-            utils.assignDeep(data, this.settings);
+            utils.assign(data, this.settings);
         }
         return data;
     }
     loadFromData(data) {
         super.loadFromData(data);
         if (data) {
-            this.settings = utils.assignDeep(this.settings, data);
+            this.settings = utils.assign(this.settings, data);
             if (this.settings.aggrFunc == 'AVERAGE') {
                 this.settings.aggrFunc = AggrFunc.Average;
             }
@@ -10960,7 +10951,7 @@ class ResultFacetsPanel extends FacetContainer {
         this._processBlock = domel('div')
             .addClass(`${this.cssPrefix}-spinner`)
             .addChild('div', b => b
-            .addClass(`${eqCssPrefix}-progress-win8`, browserUtils.getMobileCssClass())
+            .addClass(`${eqCssPrefix}-progress-win8`, getMobileCssClass())
             .addHtml(html))
             .toDOM();
     }
@@ -11732,7 +11723,8 @@ class AggrSettingsRenderer {
         const funcs = this.query.getModel().getAggrFunctions();
         const items = [];
         for (const func of funcs) {
-            if (!func)
+            //add all functions except those we don't process
+            if (!func || func.id == 'MIN' || func.id == 'MAX' || func.id == 'CNTDST')
                 continue;
             this.funcMap[func.id] = func;
             const funcCaption = model
@@ -11931,7 +11923,7 @@ class AggregationBar extends Widget {
     }
     render() {
         this.slot.classList.add(`${this.cssPrefix}-panel`);
-        const mobClass = browserUtils.getMobileCssClass();
+        const mobClass = getMobileCssClass();
         if (mobClass) {
             this.slot.classList.add(mobClass);
         }
@@ -12064,7 +12056,7 @@ class QueryNameWidget extends Widget {
     }
     render() {
         this.slot.classList.add(`${this.cssPrefix}`);
-        const mobClass = browserUtils.getMobileCssClass();
+        const mobClass = getMobileCssClass();
         if (mobClass) {
             this.slot.classList.add(mobClass);
         }
@@ -12172,7 +12164,7 @@ class View {
     }
     initOptions(options) {
         options = utils.assignDeep(this.defaultViewOptions, options);
-        // support old format 
+        // support old format
         if (!options.widgets.easyGrid) {
             options.widgets.easyGrid = options.widgets.resultGrid || {};
         }
@@ -12402,7 +12394,7 @@ class View {
         this._spinnerDiv = domel('div')
             .addClass(`eqjs-result-spinner`)
             .addChild('div', b => b
-            .addClass(`${eqCssPrefix}-progress-win8`, browserUtils.getMobileCssClass())
+            .addClass(`${eqCssPrefix}-progress-win8`, getMobileCssClass())
             .addHtml(html))
             .toDOM();
     }
@@ -12626,6 +12618,9 @@ class View {
         this.domRoots = [document];
         this.resetContext();
     }
+    refreshWidgets(groups) {
+        this.context.refreshWidgets(groups);
+    }
 }
 
 /**
@@ -12903,8 +12898,12 @@ class AdvancedSearchView extends View {
         });
     }
     clearQueryButtonClick() {
-        this.context.clearQuery();
-        this.context.refreshWidgets(WidgetGroup.Statement);
+        this.showQueryClearDialog((result) => {
+            if (result) {
+                this.context.clearQuery();
+                this.context.refreshWidgets(WidgetGroup.Statement);
+            }
+        });
     }
     createNewQuery(options) {
         return this.context.newQuery(options);
@@ -12934,22 +12933,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: 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: 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) {
@@ -13028,6 +13048,10 @@ class AdvancedSearchView extends View {
             }
         });
     }
+    showQueryClearDialog(callback) {
+        const ds = this.getDialogService();
+        ds.openConfirm(i18n.getText('QueryChangedTitle'), i18n.getText('QueryClearContent'), callback);
+    }
     showQueryChangedDialog(callback) {
         const ds = this.getDialogService();
         ds.openConfirm(i18n.getText('QueryChangedTitle'), i18n.getText('QueryChangedContent'), callback);
@@ -14234,6 +14258,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',
@@ -14375,4 +14400,4 @@ if (!Array.prototype.findIndex) {
     };
 }
 
-export { AddRowRenderer, AdvancedSearchView, AggrFuncColumnRendererCB, AggrFuncColumnRendererCP, AggrSettingsDialog, AggrSettingsRenderer, AggregationBar, AttrColumnRendererCB, AttrColumnRendererCP, AttributeExpressionRenderer, BaseElementRenderer, ChartFacet, ChartJsWidget, ChartType, ChartWidget, ColumnAction, ColumnRendererCB, ColumnRendererCP, ColumnsBar, ColumnsPanel, ConditionAction, ConditionGroupRenderer, ConditionGroupRowRenderer, ConditionRenderer, ConstColumnRendererCP, CustomListExpressionRenderer, CustomSqlColumnRendererCP, DataFilterView, DataTableFacet, DateTimeExpressionRenderer, DomDropDownElementBuilder, DropDownRenderer, EasyGridWidget, EntitiesPanel, EqHtmlGrid, ExportDialog, ExportWidget, ExpressionRenderer, FacetContainer, FacetType, FilterBar, GoogleChartWidget, Grid, HtmlContentWidget, HtmlDataFilterView, InputExpressionRenderer, ListExpressionRenderer, ManageDrillDownWidget, OperatorRenderer, PivotTableFacet, PopupMenu, ProcessWidget, QPEditablePart, QueryPanel, ReportView, ResultFacet, ResultFacetsPanel, SimpleConditionRenderer, SortingBar, SqlListExpressionRenderer, StatementPanel, SubQueryExpressionRenderer, TextRenderer, View, browserUtils, dropdown };
+export { AddRowRenderer, AdvancedSearchView, AggrFuncColumnRendererCB, AggrFuncColumnRendererCP, AggrSettingsDialog, AggrSettingsRenderer, AggregationBar, AttrColumnRendererCB, AttrColumnRendererCP, AttributeExpressionRenderer, BaseElementRenderer, ChartFacet, ChartJsWidget, ChartType, ChartWidget, ColumnAction, ColumnRendererCB, ColumnRendererCP, ColumnsBar, ColumnsPanel, ConditionAction, ConditionGroupRenderer, ConditionGroupRowRenderer, ConditionRenderer, ConstColumnRendererCP, CustomListExpressionRenderer, CustomSqlColumnRendererCP, DataFilterView, DataTableFacet, DateTimeExpressionRenderer, DomDropDownElementBuilder, DropDownRenderer, EasyGridWidget, EntitiesPanel, EqHtmlGrid, ExportDialog, ExportWidget, ExpressionRenderer, FacetContainer, FacetType, FilterBar, GoogleChartWidget, Grid, HtmlContentWidget, HtmlDataFilterView, InputExpressionRenderer, ListExpressionRenderer, ManageDrillDownWidget, OperatorRenderer, PivotTableFacet, PopupMenu, ProcessWidget, QPEditablePart, QueryPanel, ReportView, ResultFacet, ResultFacetsPanel, SimpleConditionRenderer, SortingBar, SqlListExpressionRenderer, StatementPanel, SubQueryExpressionRenderer, TextRenderer, View, dropdown };