@syncfusion/ej2-querybuilder 19.4.56 → 20.1.51

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.56
+*  version : 20.1.51
 *  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.55",
+  "_id": "@syncfusion/ej2-querybuilder@20.1.48",
   "_inBundle": false,
-  "_integrity": "sha512-jsPRny5G8dpM1RN5ZKE82yL0csUXm3dXmdj/PNyVzrpjsGkZipJvdVFlok6l7d+pT7aBNIPTHw88i50tCFSW6A==",
+  "_integrity": "sha512-qVkpYnuG7i1dlyoHi86BkuXnCcmL0xG0TeaK8Tagi5B6W3x/KGKpGUDOVl8Xui5FO1B4WwJAg5GPUhllNZ0Gqg==",
   "_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.55.tgz",
-  "_shasum": "2d8f95a9125ee6b641849a560133117dd300cae2",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-querybuilder/-/ej2-querybuilder-20.1.48.tgz",
+  "_shasum": "397e3a0df3211ffade9d4d8148efe8bf9c5cadc9",
   "_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.55",
-    "@syncfusion/ej2-calendars": "~19.4.56",
-    "@syncfusion/ej2-dropdowns": "~19.4.56",
-    "@syncfusion/ej2-inputs": "~19.4.52",
-    "@syncfusion/ej2-splitbuttons": "~19.4.52"
+    "@syncfusion/ej2-base": "~20.1.50",
+    "@syncfusion/ej2-buttons": "~20.1.50",
+    "@syncfusion/ej2-calendars": "~20.1.47",
+    "@syncfusion/ej2-dropdowns": "~20.1.51",
+    "@syncfusion/ej2-inputs": "~20.1.48",
+    "@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.56",
+  "version": "20.1.51",
   "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

@@ -750,6 +750,8 @@ export declare class QueryBuilder extends Component<HTMLDivElement> implements I
     private checkNumberLiteral;
     private getOperator;
     private getTypeFromColumn;
+    private getLabelFromColumn;
+    private getLabelFromField;
     private processParser;
 }
 export interface Level {

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';
@@ -338,7 +338,7 @@ var QueryBuilder = /** @class */ (function (_super) {
     };
     QueryBuilder.prototype.updateSubFieldsFromColumns = function (col, field) {
         for (var i = 0; i < col.length; i++) {
-            if (this.separator != '' && col[i].field.indexOf(this.separator) < 0) {
+            if (this.separator !== '' && col[i].field.indexOf(this.separator) < 0) {
                 col[i].field = field ? field + this.separator + col[i].field : col[i].field;
             }
             if (col[i].operators) {
@@ -565,6 +565,9 @@ var QueryBuilder = /** @class */ (function (_super) {
             var template = void 0;
             args.fields = this.fields;
             args.columns = this.columns;
+            if (rule.field === '') {
+                rule.field = column.field;
+            }
             args.operators = this.getOperators(rule.field);
             args.operatorFields = { text: 'key', value: 'value' };
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -689,7 +692,6 @@ var QueryBuilder = /** @class */ (function (_super) {
                     }
                 }
                 else {
-                    var dropdowntree = void 0;
                     var ddlField = void 0;
                     var ddlValue = this.isImportRules ? rule.field : rule.field;
                     ddlField = {
@@ -703,11 +705,13 @@ var QueryBuilder = /** @class */ (function (_super) {
                     if (this.fieldModel) {
                         ddlField = __assign({}, ddlField, this.fieldModel);
                     }
-                    dropdowntree = new DropDownTree(ddlField);
+                    var dropdowntree = new DropDownTree(ddlField);
                     dropdowntree.appendTo('#' + ruleElem.id + '_filterkey');
                     if (!isNullOrUndefined(dropdowntree.value)) {
-                        dropdowntree.element.value = dropdowntree.value[0];
+                        var value = this.getLabelFromColumn(dropdowntree.value[0]);
+                        dropdowntree.element.value = value;
                     }
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     var ddlVal = this.isImportRules ?
                         this.GetRootColumnName(rule.field) : dropdowntree.value;
                     this.selectedColumn = this.getColumn(ddlVal);
@@ -742,17 +746,20 @@ var QueryBuilder = /** @class */ (function (_super) {
         else {
             groupElem = closest(target, '.e-group-container');
             rules = this.getParentGroup(groupElem);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var custom = rule.custom;
             if (Object.keys(rule).length) {
                 rules.rules.push({
                     'field': rule.field, 'type': rule.type, 'label': rule.label, 'operator': rule.operator, value: rule.value
                 });
                 if (custom) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     rules.rules[rules.rules.length - 1].custom = custom;
                 }
             }
             else {
                 if (custom) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     newRule.custom = custom;
                 }
                 rules.rules.push(newRule);
@@ -819,17 +826,17 @@ var QueryBuilder = /** @class */ (function (_super) {
                     }
                 }
                 else {
-                    dropDownObj = getComponent(ruleElemCln[i].querySelector('.e-rule-field input.e-control'), 'dropdownlist');
+                    dropDownObj = getComponent(ruleElemCln[i].querySelector('.e-rule-field .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');
+                fieldElem = tempElem.querySelector('.e-rule-field .e-control');
                 if (validateRule && validateRule.isRequired) {
                     while (indexElem && indexElem.previousElementSibling !== null) {
                         indexElem = indexElem.previousElementSibling;
                         index++;
                     }
-                    fieldElem = tempElem.querySelector('.e-rule-operator input.e-control');
+                    fieldElem = tempElem.querySelector('.e-rule-operator .e-control');
                     if (!rule.rules[index].operator) {
                         if (fieldElem.parentElement.className.indexOf('e-tooltip') < 0) {
                             this.renderToolTip(fieldElem.parentElement);
@@ -842,7 +849,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     if (excludeOprs.indexOf(rule.rules[index].operator) < 0 && (isNullOrUndefined(rule.rules[index].value) &&
                         rule.rules[index].type !== 'date') || rule.rules[index].value === '' ||
                         (rule.rules[index].value instanceof Array && valArray.length < 1)) {
-                        var valElem = tempElem.querySelectorAll('.e-rule-value input.e-control');
+                        var valElem = tempElem.querySelectorAll('.e-rule-value .e-control');
                         isValid = false;
                         for (var j = 0, jLen = valElem.length; j < jLen; j++) {
                             var element = valElem[j];
@@ -1367,7 +1374,8 @@ var QueryBuilder = /** @class */ (function (_super) {
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             ddt.value = args.value[0];
                             ddt.dataBind();
-                            ddtElem.value = args.value[0];
+                            var result = this.getLabelFromColumn(args.value[0]);
+                            ddtElem.value = result;
                         }
                     }
                 }
@@ -1397,7 +1405,7 @@ var QueryBuilder = /** @class */ (function (_super) {
     };
     QueryBuilder.prototype.changeRule = function (rule, ddlArgs) {
         if (!ddlArgs.itemData) {
-            if (this.fieldMode === "DropdownTree") {
+            if (this.fieldMode === 'DropdownTree') {
                 var ddt = getComponent(ddlArgs.element, 'dropdowntree');
                 if (ddt.value == null) {
                     return;
@@ -1421,6 +1429,7 @@ var QueryBuilder = /** @class */ (function (_super) {
     QueryBuilder.prototype.changeFilter = function (flt, dl, grID, rl, tmpRl, dArg) {
         var _this = this;
         if (flt) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var ddlValue = void 0;
             if (this.fieldMode === 'DropdownTree') {
                 ddlValue = (dl.value[0]);
@@ -1447,7 +1456,9 @@ var QueryBuilder = /** @class */ (function (_super) {
             this.changeOperator(flt, operatorElem, dl, grID, rl, tmpRl, dArg);
         }
     };
-    QueryBuilder.prototype.changeOperator = function (flt, opr, dl, grID, rl, tmpRl, dArg) {
+    QueryBuilder.prototype.changeOperator = function (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    flt, opr, dl, grID, rl, tmpRl, dArg) {
         var _this = this;
         var ruleElem;
         var ruleID;
@@ -1829,7 +1840,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         var original = {};
         var result = [];
         var nest = [];
-        var value = "";
+        var value = '';
         var isNested = field.indexOf(this.separator);
         var _loop_2 = function (i, iLen) {
             if (isNested === 0) {
@@ -1837,6 +1848,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
             else {
                 nest = field.split(this_2.separator);
+                // eslint-disable-next-line @typescript-eslint/tslint/config
                 nest.forEach(function (element) {
                     if (value) {
                         value = value[element];
@@ -1884,7 +1896,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
         var fieldValue = this.selectedRule.field;
         var isNested = this.selectedRule.field.indexOf(this.separator);
-        if (isNested !== 0 && this.fieldMode !== "DropdownTree") {
+        if (isNested !== 0 && this.fieldMode !== 'DropdownTree') {
             var nest = this.selectedRule.field.split(this.separator);
             fieldValue = nest[nest.length - 1];
         }
@@ -1996,10 +2008,10 @@ var QueryBuilder = /** @class */ (function (_super) {
     };
     QueryBuilder.prototype.getItemData = function (parentId) {
         var fieldObj = getComponent(document.getElementById(parentId + '_filterkey'), 'dropdownlist');
-        if (this.fieldMode === "DropdownTree") {
+        if (this.fieldMode === 'DropdownTree') {
             fieldObj = getComponent(document.getElementById(parentId + '_filterkey'), 'dropdowntree');
         }
-        return this.fieldMode === "DropdownTree" ? this.getColumn(fieldObj.value[0]) : this.getColumn(fieldObj.value);
+        return this.fieldMode === 'DropdownTree' ? this.getColumn(fieldObj.value[0]) : this.getColumn(fieldObj.value);
     };
     QueryBuilder.prototype.setDefaultValue = function (parentId, isArryValue, isNumber) {
         var itemData = this.getItemData(parentId);
@@ -2330,6 +2342,7 @@ var QueryBuilder = /** @class */ (function (_super) {
     };
     QueryBuilder.prototype.getPreviousItemData = function (prevItemData, column) {
         if (this.isFieldClose && prevItemData) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             prevItemData = this.getColumn(prevItemData.value);
         }
         if (column.template && prevItemData && Object.keys(prevItemData).length < 4) {
@@ -2343,6 +2356,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         var filtObj = this.fieldMode === 'DropdownTree' ? getComponent(filtElem, 'dropdowntree')
             : getComponent(filtElem, 'dropdownlist');
         var column = this.fieldMode === 'DropdownTree' ? this.getColumn(filtObj.value[0])
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             : this.getColumn(filtObj.value);
         this.selectedRule = column;
         if (isRender) {
@@ -2587,7 +2601,9 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
             dropDownObj = this.fieldMode === 'DropdownTree' ? getComponent(target, 'dropdowntree') :
                 getComponent(target, 'dropdownlist');
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var column = this.fieldMode === 'DropdownTree' ? this.getColumn(dropDownObj.value[0])
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 : this.getColumn(dropDownObj.value);
             if (!this.isImportRules && rule.rules[index].field && rule.rules[index].field.toLowerCase() !== column.field.toLowerCase()) {
                 if (!(ruleElem.querySelectorAll('.e-template')) && !(operator.indexOf('null') > -1)
@@ -3325,6 +3341,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);
@@ -3521,11 +3540,13 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
             }
             var isTemplateRendered = clnruleElem.querySelector('.e-template-value');
+            // eslint-disable
             try {
                 detach(clnruleElem);
             }
             catch (err) {
             }
+            // eslint-enable
             if (column && column.ruleTemplate) {
                 this.clearQBTemplate([clnruleElem.id]);
             }
@@ -3934,6 +3955,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 () {
@@ -4194,7 +4220,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
             }
         }
-        if (rule.rules.length === 0) {
+        if (rule.rules.length === 0 && this.headerTemplate) {
             rule.rules[0] = { 'label': '', 'field': '', 'operator': '', 'type': '', 'value': '' };
         }
         var ruleColl = rule.rules;
@@ -4438,7 +4464,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     }
                     queryStr += rule.field + ' ' + this.operators[rule.operator] + ' ' + valueStr;
                 }
-                if (rule.condition && rule.condition != '') {
+                if (rule.condition && rule.condition !== '') {
                     condition = rule.condition;
                 }
             }
@@ -4579,7 +4605,6 @@ var QueryBuilder = /** @class */ (function (_super) {
             this.parser.push(['Literal', matchValue]);
             return matchValue.length + 2;
         }
-        // eslint-disable-next-line
         if (this.checkNumberLiteral(sqlString)) {
             matchValue = /^[0-9]+(\.[0-9]+)?/.exec(sqlString)[0];
             this.parser.push(['Literal', matchValue]);
@@ -4674,6 +4699,37 @@ var QueryBuilder = /** @class */ (function (_super) {
         var columnData = this.getColumn(rules.field);
         return columnData.type;
     };
+    QueryBuilder.prototype.getLabelFromColumn = function (field) {
+        var label = '';
+        var l = 0;
+        if (this.separator !== '') {
+            var fieldColl = field.split(this.separator);
+            for (var i = 0; i < fieldColl.length; i++) {
+                label += this.getLabelFromField(fieldColl, i + 1);
+                l++;
+                if (l < fieldColl.length) {
+                    label += this.separator;
+                }
+            }
+            return label;
+        }
+        else {
+            var labelItem = this.getColumn(field).label;
+            return labelItem;
+        }
+    };
+    QueryBuilder.prototype.getLabelFromField = function (field, startIdx) {
+        var fieldName = '';
+        var j = 0;
+        for (var k = 0; k < startIdx; k++) {
+            fieldName += field[k];
+            j++;
+            if (j < startIdx) {
+                fieldName += this.separator;
+            }
+        }
+        return this.getColumn(fieldName).label;
+    };
     QueryBuilder.prototype.processParser = function (parser, rules, levelColl) {
         var j;
         var jLen;

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 {