@syncfusion/ej2-querybuilder 19.4.53 → 20.1.47

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.53
+*  version : 20.1.47
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-querybuilder@*",
-  "_id": "@syncfusion/ej2-querybuilder@19.4.52",
+  "_id": "@syncfusion/ej2-querybuilder@18.19.1",
   "_inBundle": false,
-  "_integrity": "sha512-ibDuiNun8AQg5i/ZLJeKA+UwlmdpzS0rk0kQvnvzYbp+OGco4KO0uQCQCzvYS7LvyIgrJpehA0hC9/9nEfOZ5Q==",
+  "_integrity": "sha512-RTbs+FlpLGGvQQkpt8FYb9f7p0BPxKd4q+7VuEnxQ90kmMaX85GKIpGMziJ92jOStgpdGH+SFYiHoY5GaIcDmQ==",
   "_location": "/@syncfusion/ej2-querybuilder",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-querybuilder",
     "/@syncfusion/ej2-vue-querybuilder"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-querybuilder/-/ej2-querybuilder-19.4.52.tgz",
-  "_shasum": "275f7e0a9bcc0c9f7a9778cc2bb2e3032cfe2ca5",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-querybuilder/-/ej2-querybuilder-18.19.1.tgz",
+  "_shasum": "ad9bdb59335390e0830057d1475dcc95e588bb8d",
   "_spec": "@syncfusion/ej2-querybuilder@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -32,12 +32,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.4.52",
-    "@syncfusion/ej2-buttons": "~19.4.53",
-    "@syncfusion/ej2-calendars": "~19.4.52",
-    "@syncfusion/ej2-dropdowns": "~19.4.52",
-    "@syncfusion/ej2-inputs": "~19.4.52",
-    "@syncfusion/ej2-splitbuttons": "~19.4.52"
+    "@syncfusion/ej2-base": "~20.1.47",
+    "@syncfusion/ej2-buttons": "~20.1.47",
+    "@syncfusion/ej2-calendars": "~20.1.47",
+    "@syncfusion/ej2-dropdowns": "~20.1.47",
+    "@syncfusion/ej2-inputs": "~20.1.47",
+    "@syncfusion/ej2-splitbuttons": "~20.1.47"
   },
   "deprecated": false,
   "description": "Essential JS 2 QueryBuilder",
@@ -69,6 +69,6 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/querybuilder"
   },
   "typings": "index.d.ts",
-  "version": "19.4.53",
+  "version": "20.1.47",
   "sideEffects": false
 }

package/src/query-builder/query-builder-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, INotifyPropertyChanged, NotifyPropertyChanges, getComponent, MouseEventArgs, Browser } from '@syncfusion/ej2-base';import { Property, ChildProperty, Complex, L10n, closest, extend, isNullOrUndefined, Collection, cldrData } from '@syncfusion/ej2-base';import { getInstance, addClass, removeClass, rippleEffect, detach, classList } from '@syncfusion/ej2-base';import { Internationalization, DateFormatOptions, KeyboardEventArgs, getUniqueID, select } from '@syncfusion/ej2-base';import { Button, CheckBox, RadioButton, ChangeEventArgs as ButtonChangeEventArgs, RadioButtonModel } from '@syncfusion/ej2-buttons';import { DropDownList, ChangeEventArgs as DropDownChangeEventArgs, FieldSettingsModel, CheckBoxSelection, DropDownTreeModel, DropDownTree } from '@syncfusion/ej2-dropdowns';import { MultiSelect, MultiSelectChangeEventArgs, PopupEventArgs, MultiSelectModel, DropDownListModel } from '@syncfusion/ej2-dropdowns';import { EmitType, Event, EventHandler, getValue, Animation, BaseEventArgs } from '@syncfusion/ej2-base';import { Query, Predicate, DataManager, Deferred } from '@syncfusion/ej2-data';import { TextBox, NumericTextBox, InputEventArgs, ChangeEventArgs as InputChangeEventArgs } from '@syncfusion/ej2-inputs';import { TextBoxModel, NumericTextBoxModel } from '@syncfusion/ej2-inputs';import { DatePicker, ChangeEventArgs as CalendarChangeEventArgs, DatePickerModel } from '@syncfusion/ej2-calendars';import { DropDownButton, ItemModel, MenuEventArgs } from '@syncfusion/ej2-splitbuttons';import { Tooltip, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { compile as templateCompiler } from '@syncfusion/ej2-base';
+import { Component, INotifyPropertyChanged, NotifyPropertyChanges, getComponent, MouseEventArgs, Browser, compile } from '@syncfusion/ej2-base';import { Property, ChildProperty, Complex, L10n, closest, extend, isNullOrUndefined, Collection, cldrData } from '@syncfusion/ej2-base';import { getInstance, addClass, removeClass, rippleEffect, detach, classList } from '@syncfusion/ej2-base';import { Internationalization, DateFormatOptions, KeyboardEventArgs, getUniqueID, select } from '@syncfusion/ej2-base';import { Button, CheckBox, RadioButton, ChangeEventArgs as ButtonChangeEventArgs, RadioButtonModel } from '@syncfusion/ej2-buttons';import { DropDownList, ChangeEventArgs as DropDownChangeEventArgs, FieldSettingsModel, CheckBoxSelection, DropDownTreeModel, DropDownTree } from '@syncfusion/ej2-dropdowns';import { MultiSelect, MultiSelectChangeEventArgs, PopupEventArgs, MultiSelectModel, DropDownListModel } from '@syncfusion/ej2-dropdowns';import { EmitType, Event, EventHandler, getValue, Animation, BaseEventArgs } from '@syncfusion/ej2-base';import { Query, Predicate, DataManager, Deferred } from '@syncfusion/ej2-data';import { TextBox, NumericTextBox, InputEventArgs, ChangeEventArgs as InputChangeEventArgs } from '@syncfusion/ej2-inputs';import { TextBoxModel, NumericTextBoxModel } from '@syncfusion/ej2-inputs';import { DatePicker, ChangeEventArgs as CalendarChangeEventArgs, DatePickerModel } from '@syncfusion/ej2-calendars';import { DropDownButton, ItemModel, MenuEventArgs } from '@syncfusion/ej2-splitbuttons';import { Tooltip, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { compile as templateCompiler } from '@syncfusion/ej2-base';
 import {TemplateColumn,Validation,FormatObject,ActionEventArgs,ChangeEventArgs,RuleChangeEventArgs,FieldMode,DisplayMode,SortDirection} from "./query-builder";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/query-builder/query-builder.d.ts

@@ -288,6 +288,7 @@ export declare class QueryBuilder extends Component<HTMLDivElement> implements I
     private isFieldChange;
     private isFieldClose;
     private isDestroy;
+    private isGetNestedData;
     /**
      * Triggers when the component is created.
      *

package/src/query-builder/query-builder.js

@@ -31,7 +31,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /**
  * Query Builder Source
  */
-import { Component, NotifyPropertyChanges, getComponent, Browser } from '@syncfusion/ej2-base';
+import { Component, NotifyPropertyChanges, getComponent, Browser, compile } from '@syncfusion/ej2-base';
 import { Property, ChildProperty, Complex, L10n, closest, extend, isNullOrUndefined, Collection, cldrData } from '@syncfusion/ej2-base';
 import { getInstance, addClass, removeClass, rippleEffect, detach, classList } from '@syncfusion/ej2-base';
 import { Internationalization, getUniqueID, select } from '@syncfusion/ej2-base';
@@ -191,6 +191,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         _this.isFieldChange = false;
         _this.isFieldClose = false;
         _this.isDestroy = false;
+        _this.isGetNestedData = false;
         MultiSelect.Inject(CheckBoxSelection);
         return _this;
     }
@@ -790,6 +791,7 @@ var QueryBuilder = /** @class */ (function (_super) {
      */
     QueryBuilder.prototype.validateFields = function () {
         var isValid = true;
+        var dropDownTreeObj;
         if (this.allowValidation) {
             var excludeOprs = ['isnull', 'isnotnull', 'isempty', 'isnotempty'];
             var i = void 0;
@@ -809,9 +811,18 @@ var QueryBuilder = /** @class */ (function (_super) {
                 rule = this.getParentGroup(groupElem);
                 index = 0;
                 indexElem = tempElem = ruleElemCln[i];
-                dropDownObj = getComponent(ruleElemCln[i].querySelector('.e-rule-field input.e-control'), 'dropdownlist');
-                this.selectedColumn = dropDownObj.getDataByValue(dropDownObj.value);
-                validateRule = !isNullOrUndefined(dropDownObj.index) && this.selectedColumn.validation;
+                if (this.fieldMode === 'DropdownTree') {
+                    dropDownTreeObj = getComponent(ruleElemCln[i].querySelector('.e-rule-field input.e-control'), 'dropdowntree');
+                    if (dropDownTreeObj.value && dropDownTreeObj.value.length) {
+                        this.selectedColumn = this.getColumn(dropDownTreeObj.value[0]);
+                        validateRule = this.selectedColumn.validation;
+                    }
+                }
+                else {
+                    dropDownObj = getComponent(ruleElemCln[i].querySelector('.e-rule-field input.e-control'), 'dropdownlist');
+                    this.selectedColumn = dropDownObj.getDataByValue(dropDownObj.value);
+                    validateRule = !isNullOrUndefined(dropDownObj.index) && this.selectedColumn.validation;
+                }
                 fieldElem = tempElem.querySelector('.e-rule-field input.e-control');
                 if (validateRule && validateRule.isRequired) {
                     while (indexElem && indexElem.previousElementSibling !== null) {
@@ -849,7 +860,9 @@ var QueryBuilder = /** @class */ (function (_super) {
                         }
                     }
                 }
-                else if (dropDownObj.element && isNullOrUndefined(dropDownObj.index)) {
+                else if ((dropDownObj && dropDownObj.element && isNullOrUndefined(dropDownObj.index)) ||
+                    (dropDownTreeObj && dropDownTreeObj.element && (isNullOrUndefined(dropDownTreeObj.value) ||
+                        dropDownTreeObj.value.length < 1))) {
                     if (fieldElem.parentElement.className.indexOf('e-tooltip') < 0) {
                         this.renderToolTip(fieldElem.parentElement);
                     }
@@ -1332,7 +1345,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             var fieldElem = closest(args.element, '.e-rule-filter') || closest(args.element, '.e-rule-sub-filter');
             var column = this.fieldMode === 'DropdownTree' ? this.getColumn(args.value[0]) : this.getColumn(args.value);
             if (this.fieldMode === 'DropdownTree' && fieldElem != null) {
-                var ddtElem = fieldElem.querySelector('.e-control');
+                var ddtElem = fieldElem.querySelector('.e-dropdowntree.e-control');
                 var ddt = getComponent(ddtElem, 'dropdowntree');
                 if (column) {
                     if (column.type === 'object') {
@@ -1815,17 +1828,42 @@ var QueryBuilder = /** @class */ (function (_super) {
     QueryBuilder.prototype.getDistinctValues = function (dataSource, field) {
         var original = {};
         var result = [];
-        for (var i = 0, iLen = dataSource.length; i < iLen; i++) {
-            var value = dataSource[i][field];
+        var nest = [];
+        var value = "";
+        var isNested = field.indexOf(this.separator);
+        var _loop_2 = function (i, iLen) {
+            if (isNested === 0) {
+                value = dataSource[i][field];
+            }
+            else {
+                nest = field.split(this_2.separator);
+                nest.forEach(function (element) {
+                    if (value) {
+                        value = value[element];
+                    }
+                    else {
+                        value = dataSource[i][element];
+                    }
+                });
+            }
             if (Number(dataSource[i][field]) === dataSource[i][field] && dataSource[i][field] % 1 !== 0) {
                 value = dataSource[i][field].toString();
             }
             var data = {};
-            if (!(value in original)) {
+            if (!(value in original) && !isNullOrUndefined(value)) {
                 original[value] = 1;
-                data[field] = value;
+                if (isNested === 0) {
+                    data[field] = value;
+                }
+                else {
+                    data[nest[nest.length - 1]] = value;
+                }
                 result.push(data);
             }
+        };
+        var this_2 = this;
+        for (var i = 0, iLen = dataSource.length; i < iLen; i++) {
+            _loop_2(i, iLen);
         }
         return result;
     };
@@ -1833,6 +1871,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         var isFetched = false;
         var ds;
         var isValues = false;
+        this.isGetNestedData = false;
         if (this.dataColl[1]) {
             if (Object.keys(this.dataColl[1]).indexOf(rule.field) > -1) {
                 isFetched = true;
@@ -1843,11 +1882,17 @@ var QueryBuilder = /** @class */ (function (_super) {
         if (!this.dataColl.length && values.length) {
             isValues = true;
         }
+        var fieldValue = this.selectedRule.field;
+        var isNested = this.selectedRule.field.indexOf(this.separator);
+        if (isNested !== 0 && this.fieldMode !== "DropdownTree") {
+            var nest = this.selectedRule.field.split(this.separator);
+            fieldValue = nest[nest.length - 1];
+        }
         var multiSelectValue;
         multiSelectValue = {
             dataSource: isValues ? values : (isFetched ? ds : this.dataManager),
             query: new Query([rule.field]),
-            fields: { text: this.selectedRule.field, value: this.selectedRule.field },
+            fields: { text: fieldValue, value: fieldValue },
             placeholder: this.l10n.getConstant('SelectValue'),
             value: selectedValue,
             mode: 'CheckBox',
@@ -1875,6 +1920,10 @@ var QueryBuilder = /** @class */ (function (_super) {
                 if (Object.keys(this.dataColl[1]).indexOf(value) > -1) {
                     isFetched = true;
                 }
+                var isNest = value.indexOf(this.separator);
+                if (isNest !== 0 && this.isGetNestedData) {
+                    isFetched = true;
+                }
             }
             if (!isFetched) {
                 args.cancel = true;
@@ -1903,6 +1952,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
             _this.dataColl = extend(_this.dataColl, dummyData, [], true);
             multiselectObj.dataSource = _this.getDistinctValues(_this.dataColl, value);
+            _this.isGetNestedData = true;
             hideSpinner(closest(element, '.e-multi-select-wrapper').parentElement);
         }).catch(function (e) {
             deferred.reject(e);
@@ -3275,6 +3325,9 @@ var QueryBuilder = /** @class */ (function (_super) {
                 if (document.querySelectorAll(template).length) {
                     return templateCompiler(document.querySelector(template).innerHTML.trim());
                 }
+                else {
+                    return compile(template);
+                }
             }
             catch (error) {
                 return templateCompiler(template);
@@ -3884,6 +3937,11 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
             }
         }
+        if (this.dataSource instanceof DataManager) {
+            if (!isNullOrUndefined(pred) && (pred.operator === "isnull" || pred.operator === "notnull")) {
+                pred.operator = pred.operator === "isnull" ? "equal" : "notequal";
+            }
+        }
         return pred;
     };
     QueryBuilder.prototype.getLocale = function () {
@@ -3911,7 +3969,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     break;
                 }
             }
-            else if (field.indexOf(this.separator) > -1) {
+            else if (field && field.indexOf(this.separator) > -1) {
                 if (columns[i].field === field.split(this.separator)[0]) {
                     column = columns[i];
                     break;
@@ -4144,6 +4202,9 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
             }
         }
+        if (rule.rules.length === 0) {
+            rule.rules[0] = { 'label': '', 'field': '', 'operator': '', 'type': '', 'value': '' };
+        }
         var ruleColl = rule.rules;
         if (!isNullOrUndefined(ruleColl)) {
             for (var i = 0, len = ruleColl.length; i < len; i++) {

package/styles/bootstrap5-dark.css

@@ -90,6 +90,13 @@
   color: #adb5bd;
 }
 
+.e-input-group.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-input-group.e-control-wrapper.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-control-wrapper.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon {
+  background: #343a40;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon,
 .e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
@@ -152,7 +159,7 @@
 }
 
 .e-multiselect .e-input-group-icon.e-ddl-icon {
-  border-radius: 0 4px 4px 0;
+  border-radius: 0 2px 2px 0;
   border-right-width: 0;
 }
 
@@ -200,7 +207,7 @@
 }
 
 .e-query-builder .e-collapse-rule::before {
-  content: '\e853';
+  content: '\e80e';
 }
 
 .e-query-builder {
@@ -326,7 +333,7 @@
 
 .e-query-builder .e-rule-list > ::after,
 .e-query-builder .e-rule-list > ::before {
-  border-style: dashed;
+  border-style: dotted;
   content: '';
   left: -12px;
   position: absolute;
@@ -500,8 +507,8 @@
 .e-query-builder .e-group-body .e-rule-container.e-joined-rule {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  border-top-style: dashed;
-  border-top-width: 1px;
+  border-top-style: dotted;
+  border-top-width: 2px;
   margin-top: 0;
 }
 
@@ -510,12 +517,12 @@
 }
 
 .e-query-builder .e-group-body .e-rule-container .e-rule-filter {
-  padding: 8px 0 8px 8px;
+  padding: 8px 8px 8px 8px;
   width: auto;
 }
 
 .e-query-builder .e-group-body .e-rule-container .e-rule-sub-filter {
-  padding: 8px 0 8px 8px;
+  padding: 8px 8px 8px 8px;
   width: auto;
 }
 
@@ -541,7 +548,7 @@
 
 .e-query-builder .e-group-body .e-rule-container .e-operator,
 .e-query-builder .e-group-body .e-rule-container .e-value {
-  padding: 8px 0 8px 8px;
+  padding: 8px 8px 8px 8px;
 }
 
 .e-query-builder .e-group-body .e-rule-container .e-operator .e-radio-wrapper,
@@ -808,7 +815,7 @@
 .e-bigger.e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete,
 .e-bigger .e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete {
   display: inline-block;
-  margin-left: 10px;
+  margin-left: 16px;
 }
 
 .e-query-builder.e-device .e-group-body .e-horizontal-mode .e-rule-filter,
@@ -879,7 +886,7 @@
 *.e-bigger .e-group-body .e-rule-container .e-rule-sub-filter,
 *.e-bigger .e-group-body .e-rule-container .e-operator,
 *.e-bigger .e-group-body .e-rule-container .e-value {
-  padding: 10px 0 10px 10px;
+  padding: 16px 16px 16px 16px;
 }
 
 .e-query-builder {
@@ -891,6 +898,13 @@
   border-color: #444c54;
 }
 
+.e-query-builder .e-group-header .e-dropdown-btn.e-add-btn,
+.e-query-builder .e-deletegroup {
+  background-color: #212529;
+  box-shadow: none;
+  color: #adb5bd;
+}
+
 .e-query-builder .e-group-container {
   border-color: #444c54;
 }
@@ -922,6 +936,8 @@
 
 .e-query-builder .e-removerule.e-btn.e-round {
   background-color: #6c757d;
+  background-color: #212529;
+  color: #adb5bd;
 }
 
 .e-query-builder .e-removerule.e-btn.e-round.e-readonly {

package/styles/bootstrap5.css

@@ -90,6 +90,13 @@
   color: #6c757d;
 }
 
+.e-input-group.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-input-group.e-control-wrapper.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
+.e-float-input.e-control-wrapper.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon {
+  background: #e9ecef;
+}
+
 .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon,
 .e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
@@ -152,7 +159,7 @@
 }
 
 .e-multiselect .e-input-group-icon.e-ddl-icon {
-  border-radius: 0 4px 4px 0;
+  border-radius: 0 2px 2px 0;
   border-right-width: 0;
 }
 
@@ -200,7 +207,7 @@
 }
 
 .e-query-builder .e-collapse-rule::before {
-  content: '\e853';
+  content: '\e80e';
 }
 
 .e-query-builder {
@@ -326,7 +333,7 @@
 
 .e-query-builder .e-rule-list > ::after,
 .e-query-builder .e-rule-list > ::before {
-  border-style: dashed;
+  border-style: dotted;
   content: '';
   left: -12px;
   position: absolute;
@@ -500,8 +507,8 @@
 .e-query-builder .e-group-body .e-rule-container.e-joined-rule {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  border-top-style: dashed;
-  border-top-width: 1px;
+  border-top-style: dotted;
+  border-top-width: 2px;
   margin-top: 0;
 }
 
@@ -510,12 +517,12 @@
 }
 
 .e-query-builder .e-group-body .e-rule-container .e-rule-filter {
-  padding: 8px 0 8px 8px;
+  padding: 8px 8px 8px 8px;
   width: auto;
 }
 
 .e-query-builder .e-group-body .e-rule-container .e-rule-sub-filter {
-  padding: 8px 0 8px 8px;
+  padding: 8px 8px 8px 8px;
   width: auto;
 }
 
@@ -541,7 +548,7 @@
 
 .e-query-builder .e-group-body .e-rule-container .e-operator,
 .e-query-builder .e-group-body .e-rule-container .e-value {
-  padding: 8px 0 8px 8px;
+  padding: 8px 8px 8px 8px;
 }
 
 .e-query-builder .e-group-body .e-rule-container .e-operator .e-radio-wrapper,
@@ -808,7 +815,7 @@
 .e-bigger.e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete,
 .e-bigger .e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete {
   display: inline-block;
-  margin-left: 10px;
+  margin-left: 16px;
 }
 
 .e-query-builder.e-device .e-group-body .e-horizontal-mode .e-rule-filter,
@@ -879,7 +886,7 @@
 *.e-bigger .e-group-body .e-rule-container .e-rule-sub-filter,
 *.e-bigger .e-group-body .e-rule-container .e-operator,
 *.e-bigger .e-group-body .e-rule-container .e-value {
-  padding: 10px 0 10px 10px;
+  padding: 16px 16px 16px 16px;
 }
 
 .e-query-builder {
@@ -891,6 +898,13 @@
   border-color: #dee2e6;
 }
 
+.e-query-builder .e-group-header .e-dropdown-btn.e-add-btn,
+.e-query-builder .e-deletegroup {
+  background-color: #fff;
+  box-shadow: none;
+  color: #6c757d;
+}
+
 .e-query-builder .e-group-container {
   border-color: #dee2e6;
 }
@@ -922,6 +936,8 @@
 
 .e-query-builder .e-removerule.e-btn.e-round {
   background-color: #6c757d;
+  background-color: #fff;
+  color: #6c757d;
 }
 
 .e-query-builder .e-removerule.e-btn.e-round.e-readonly {