@syncfusion/ej2-querybuilder 22.1.34 → 22.1.38

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.1.34
+*  version : 22.1.38
 *  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@18.24.1",
+  "_id": "@syncfusion/ej2-querybuilder@22.1.37",
   "_inBundle": false,
-  "_integrity": "sha512-dnkNGldsTgLr67ZY2I6RDOBw4ox4YWjryIXdUv0N90OlnNbIWFplRDsA2orB9lQ6lGwTG6wINbXO0gVX0+ErBA==",
+  "_integrity": "sha512-BL0SprQUGgMKHHIKF/ZgUiTIKZoBzT5UFhqMTKGQTgspS3e3dtR/Iv4CJ7VsiJ8oXUQGxtQx3opsHurVWm4tYw==",
   "_location": "/@syncfusion/ej2-querybuilder",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-querybuilder",
     "/@syncfusion/ej2-vue-querybuilder"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-querybuilder/-/ej2-querybuilder-18.24.1.tgz",
-  "_shasum": "4e0221fd832db21a21411029f3386f41bb9c9e5d",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-querybuilder/-/ej2-querybuilder-22.1.37.tgz",
+  "_shasum": "dabf79810a9fde386bdf7abdfcb5a16ac1d00c31",
   "_spec": "@syncfusion/ej2-querybuilder@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -32,12 +32,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~22.1.34",
-    "@syncfusion/ej2-buttons": "~22.1.34",
-    "@syncfusion/ej2-calendars": "~22.1.34",
-    "@syncfusion/ej2-dropdowns": "~22.1.34",
-    "@syncfusion/ej2-inputs": "~22.1.34",
-    "@syncfusion/ej2-splitbuttons": "~22.1.34"
+    "@syncfusion/ej2-base": "~22.1.38",
+    "@syncfusion/ej2-buttons": "~22.1.38",
+    "@syncfusion/ej2-calendars": "~22.1.38",
+    "@syncfusion/ej2-dropdowns": "~22.1.38",
+    "@syncfusion/ej2-inputs": "~22.1.38",
+    "@syncfusion/ej2-splitbuttons": "~22.1.37"
   },
   "deprecated": false,
   "description": "Essential JS 2 QueryBuilder",
@@ -66,7 +66,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/querybuilder"
   },
   "typings": "index.d.ts",
-  "version": "22.1.34",
+  "version": "22.1.38",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -1,4 +1,4 @@
-import { Component, INotifyPropertyChanged, NotifyPropertyChanges, getComponent, MouseEventArgs, Browser, compile, append } 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, append } 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, DdtSelectEventArgs } 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

@@ -541,6 +541,7 @@ export declare class QueryBuilder extends Component<HTMLDivElement> implements I
     private filterValue;
     private changeValueSuccessCallBack;
     private fieldClose;
+    private onSelectField;
     private changeField;
     private changeRule;
     private changeFilter;
@@ -861,4 +862,5 @@ export interface ActionEventArgs extends BaseEventArgs {
     condition?: string;
     notCondition?: boolean;
     renderTemplate?: boolean;
+    groupID?: string;
 }

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

@@ -729,7 +729,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                         placeholder: this.l10n.getConstant('SelectField'), showClearButton: false,
                         popupHeight: ((this.columns.length > 5) ? height : 'auto'), changeOnBlur: false,
                         change: this.changeField.bind(this), value: !isNullOrUndefined(ddlValue) ? [ddlValue] : null,
-                        open: this.popupOpen.bind(this, false)
+                        open: this.popupOpen.bind(this, false), treeSettings: { expandOn: 'Click' }, select: this.onSelectField
                     };
                     if (this.fieldModel) {
                         ddlField = __assign({}, ddlField, this.fieldModel);
@@ -1023,17 +1023,24 @@ var QueryBuilder = /** @class */ (function (_super) {
         if (!args.cancel && (this.element.querySelectorAll('.e-group-container').length <= this.maxGroupCount)) {
             var target = eventTarget;
             var dltGroupBtn = void 0;
+            var groupID = '';
+            if (target.className.indexOf('e-group-container') < 0) {
+                groupID = target.querySelector('.e-group-container') && target.querySelector('.e-group-container').id;
+            }
+            else {
+                groupID = target.id;
+            }
             var groupElem = this.groupElem.cloneNode(true);
             groupElem.setAttribute('id', this.element.id + '_group' + this.groupIdCounter);
             if (this.headerTemplate) {
                 if (isRoot) {
                     isGroup = false;
                     groupElem.setAttribute('id', this.element.id + '_group0');
-                    this.headerTemplateFn(groupElem, not, condition, rule);
+                    this.headerTemplateFn(groupElem, not, condition, rule, groupID);
                     this.groupIdCounter = 0;
                 }
                 else {
-                    this.headerTemplateFn(groupElem, not, condition, rule);
+                    this.headerTemplateFn(groupElem, not, condition, rule, groupID);
                 }
             }
             this.groupIdCounter++;
@@ -1127,14 +1134,14 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
         }
     };
-    QueryBuilder.prototype.headerTemplateFn = function (groupElem, not, condition, rule) {
+    QueryBuilder.prototype.headerTemplateFn = function (groupElem, not, condition, rule, groupID) {
         var template;
         var templateID = this.element.id + '_header';
         var args;
         var groupHdr = groupElem.querySelector('.e-group-header');
         if (this.headerTemplate) {
             args = { requestType: 'header-template-initialize', ruleID: groupElem.id,
-                notCondition: this.enableNotCondition ? not : undefined, condition: condition, rule: this.getRuleCollection(rule, true) };
+                notCondition: this.enableNotCondition ? not : undefined, condition: condition, rule: this.getRuleCollection(rule, true), groupID: groupID };
             this.trigger('actionBegin', args);
             this.headerFn = this.templateParser(this.headerTemplate);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1396,6 +1403,12 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
         this.isFieldChange = false;
     };
+    QueryBuilder.prototype.onSelectField = function (args) {
+        if (args.itemData.hasChildren) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.showPopup();
+        }
+    };
     QueryBuilder.prototype.changeField = function (args) {
         if (args.isInteracted) {
             if (isNullOrUndefined(args.value)) {
@@ -1419,7 +1432,8 @@ var QueryBuilder = /** @class */ (function (_super) {
                         }
                         else {
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            ddtElem.value = args.oldValue[0];
+                            var result = this.getLabelFromColumn(args.oldValue[0]);
+                            ddtElem.value = result;
                         }
                         return;
                     }
@@ -3760,7 +3774,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     rule.value = null;
                 }
             }
-            if ((this.isRefreshed && this.enablePersistence) || (this.rule.field !== '' && rule.operator !== '' && (rule.value !== '' &&
+            if ((this.isRefreshed && this.enablePersistence) || (rule.field !== '' && rule.operator !== '' && (rule.value !== '' &&
                 rule.value !== undefined)) || (customObj && customObj.isQuestion)) {
                 var condition = rule.condition;
                 rule = {
@@ -3800,6 +3814,10 @@ var QueryBuilder = /** @class */ (function (_super) {
                 else {
                     rule = { 'condition': rule.condition, 'rules': rule.rules };
                 }
+                if (customObj) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    rule.custom = customObj;
+                }
                 if (rule.rules.length === 0) {
                     rule = {};
                 }
@@ -4574,8 +4592,11 @@ var QueryBuilder = /** @class */ (function (_super) {
                     }
                 }
                 if (j !== jLen - 1) {
-                    if (condition === '') {
-                        condition = rules.rules[j].condition;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var rule = rules.rules[j];
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    if (condition === '' || (rule && rule.condition !== '' && rule.custom && rule.custom.isCustom)) {
+                        condition = rule.condition;
                     }
                     condition = sqlLocale ? this.l10n.getConstant(condition.toUpperCase()).toUpperCase() : condition.toUpperCase();
                     queryStr += ' ' + condition + ' ';
@@ -4723,7 +4744,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         // eslint-disable-next-line
         if (/^`?([a-z_][a-z0-9_.\[\]\(\)]{0,}(\:(number|float|string|date|boolean))?)`?/i.exec(sqlString)) {
             // eslint-disable-next-line
-            matchValue = /^`?([a-z_][a-z0-9_.\[\]\(\)]{0,}(\:(number|float|string|date|boolean))?)`?/i.exec(sqlString)[1];
+            matchValue = /^`?([a-zåäö_][a-z0-9åäö_.\[\]\(\)]{0,}(\:(number|float|string|date|boolean))?)`?/i.exec(sqlString)[1];
             this.parser.push(['Literal', matchValue]);
             return matchValue.length;
         }
@@ -4919,7 +4940,8 @@ var QueryBuilder = /** @class */ (function (_super) {
         var isLeftOpened = false;
         for (var i = 0, iLen = parser.length; i < iLen; i++) {
             if (parser[i][0] === 'Literal') {
-                rule = { label: parser[i][1], field: parser[i][1] };
+                var column = this.getColumn(parser[i][1]);
+                rule = { label: (column && column.label) ? column.label : parser[i][1], field: parser[i][1] };
                 if (parser[i + 1][0] === 'SubOperators') {
                     if (parser[i + 1][1].indexOf('null') > -1 || parser[i + 1][1].indexOf('empty') > -1) {
                         rule.operator = this.getOperator(' ', parser[i + 1][1], sqlLocale);

package/styles/bootstrap-dark.css

@@ -182,7 +182,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 4px;

package/styles/bootstrap.css

@@ -180,7 +180,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 4px;

package/styles/bootstrap4.css

@@ -260,7 +260,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 4px;

package/styles/bootstrap5-dark.css

@@ -230,7 +230,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 4px;

package/styles/bootstrap5.css

@@ -230,7 +230,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 4px;

package/styles/fluent-dark.css

@@ -210,7 +210,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 4px;

package/styles/fluent.css

@@ -210,7 +210,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 4px;

package/styles/material-dark.css

@@ -156,7 +156,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 2px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 2px;

package/styles/material.css

@@ -181,7 +181,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 2px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 2px;

package/styles/material3-dark.css

@@ -115,21 +115,26 @@
 }
 
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  margin: 6px 6px 5px;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 6px;
+  margin: 0 6px;
+  min-height: 30px;
+  min-width: 30px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  min-height: 16px;
-  min-width: 16px;
+  min-height: 38px;
+  min-width: 38px;
+}
+
+.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
+.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
+  min-height: 22px;
+  min-width: 22px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
-  padding: 8px 16px 8px 0;
+  padding: 4px 16px 4px 0;
 }
 
 .e-input-group.e-ddl,
@@ -149,7 +154,7 @@
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
-  margin: 0;
+  margin: 4px;
 }
 
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -158,7 +163,7 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
-  padding: 5px 5px 5px 12px;
+  padding: 4px 5px 4px 12px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
@@ -168,8 +173,8 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
-  min-height: 18px;
-  min-width: 18px;
+  min-height: 34px;
+  min-width: 34px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -182,6 +187,10 @@
   padding: 8px 16px;
 }
 
+.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
+  margin: 0 4px;
+}
+
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
 }
@@ -220,8 +229,6 @@
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-btn.e-btngroup-and-lbl.e-small.e-not {
   border: 1px solid var(--color-sf-outline);
-  border-bottom-left-radius: 20px;
-  border-top-left-radius: 20px;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-btn.e-btngroup-and-lbl.e-small.e-readonly-and {
   border-bottom-left-radius: 20px;
@@ -237,9 +244,10 @@
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border: 1px solid var(--color-sf-outline);
-  border-bottom-left-radius: 20px;
-  border-top-left-radius: 20px;
-  border-top-right-radius: 20px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 4px;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 20px;
@@ -338,8 +346,8 @@
 .e-query-builder .e-group-header .e-qb-toggle.e-btn.e-small {
   border: 1px solid var(--color-sf-outline);
   border-bottom-right-radius: 20px;
-  border-bottom-left-radius: 20px;
-  border-top-left-radius: 20px;
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
   border-top-right-radius: 20px;
 }
 .e-query-builder .e-group-header .e-qb-toggle.e-btn.e-small.e-not-readonly {
@@ -361,6 +369,8 @@
 }
 .e-query-builder .e-group-header .e-btn.e-btngroup-and-lbl.e-small.e-not {
   border: 1px solid var(--color-sf-outline);
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
@@ -373,10 +383,6 @@
 }
 .e-query-builder .e-group-header .e-btn.e-btngroup-or-lbl.e-small {
   border: 1px solid var(--color-sf-outline);
-  border-bottom-right-radius: 20px;
-  border-top-right-radius: 20px;
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
 }
 .e-query-builder .e-group-header .e-btn.e-btngroup-or-lbl.e-small.e-readonly-or-not {
   border-bottom-left-radius: 20px;

package/styles/material3.css

@@ -171,21 +171,26 @@
 }
 
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  margin: 6px 6px 5px;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 6px;
+  margin: 0 6px;
+  min-height: 30px;
+  min-width: 30px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  min-height: 16px;
-  min-width: 16px;
+  min-height: 38px;
+  min-width: 38px;
+}
+
+.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
+.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
+  min-height: 22px;
+  min-width: 22px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
-  padding: 8px 16px 8px 0;
+  padding: 4px 16px 4px 0;
 }
 
 .e-input-group.e-ddl,
@@ -205,7 +210,7 @@
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
-  margin: 0;
+  margin: 4px;
 }
 
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -214,7 +219,7 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
-  padding: 5px 5px 5px 12px;
+  padding: 4px 5px 4px 12px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
@@ -224,8 +229,8 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
-  min-height: 18px;
-  min-width: 18px;
+  min-height: 34px;
+  min-width: 34px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -238,6 +243,10 @@
   padding: 8px 16px;
 }
 
+.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
+  margin: 0 4px;
+}
+
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
 }
@@ -276,8 +285,6 @@
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-btn.e-btngroup-and-lbl.e-small.e-not {
   border: 1px solid var(--color-sf-outline);
-  border-bottom-left-radius: 20px;
-  border-top-left-radius: 20px;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-btn.e-btngroup-and-lbl.e-small.e-readonly-and {
   border-bottom-left-radius: 20px;
@@ -293,9 +300,10 @@
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border: 1px solid var(--color-sf-outline);
-  border-bottom-left-radius: 20px;
-  border-top-left-radius: 20px;
-  border-top-right-radius: 20px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 4px;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 20px;
@@ -394,8 +402,8 @@
 .e-query-builder .e-group-header .e-qb-toggle.e-btn.e-small {
   border: 1px solid var(--color-sf-outline);
   border-bottom-right-radius: 20px;
-  border-bottom-left-radius: 20px;
-  border-top-left-radius: 20px;
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
   border-top-right-radius: 20px;
 }
 .e-query-builder .e-group-header .e-qb-toggle.e-btn.e-small.e-not-readonly {
@@ -417,6 +425,8 @@
 }
 .e-query-builder .e-group-header .e-btn.e-btngroup-and-lbl.e-small.e-not {
   border: 1px solid var(--color-sf-outline);
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
@@ -429,10 +439,6 @@
 }
 .e-query-builder .e-group-header .e-btn.e-btngroup-or-lbl.e-small {
   border: 1px solid var(--color-sf-outline);
-  border-bottom-right-radius: 20px;
-  border-top-right-radius: 20px;
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
 }
 .e-query-builder .e-group-header .e-btn.e-btngroup-or-lbl.e-small.e-readonly-or-not {
   border-bottom-left-radius: 20px;

package/styles/query-builder/_layout.scss

@@ -16,8 +16,6 @@
         &.e-not {
           @if $skin-name == 'Material3' {
             border: 1px solid $secondary-outline-border;
-            border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
-            border-top-left-radius: $qrybldr-btngrp-brdr-radius;
           }
           @else {
             border-bottom-right-radius: 0;
@@ -46,14 +44,16 @@
       & .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
         @if $skin-name == 'Material3' {
           border: 1px solid $secondary-outline-border;
-          border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
-          border-top-left-radius: $qrybldr-btngrp-brdr-radius;
+          border-bottom-right-radius: 4px;
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+          border-top-right-radius: 4px;
         }
         @else {
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
+          border-top-right-radius: 0;
         }
-        border-top-right-radius: $qrybldr-btngrp-brdr-radius;
 
         &.e-not-readonly {
           border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
@@ -197,8 +197,8 @@
         @if $skin-name == 'Material3' {
           border: 1px solid $secondary-outline-border;
           border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
-          border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
-          border-top-left-radius: $qrybldr-btngrp-brdr-radius;
+          border-bottom-left-radius: 4px;
+          border-top-left-radius: 4px;
           border-top-right-radius: $qrybldr-btngrp-brdr-radius;
         }
         @else {
@@ -241,6 +241,8 @@
         &.e-not {
           @if $skin-name == 'Material3' {
             border: 1px solid $secondary-outline-border;
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
           }
           border-bottom-left-radius: 0;
           border-top-left-radius: 0;
@@ -259,11 +261,11 @@
       & .e-btn.e-btngroup-or-lbl.e-small {
         @if $skin-name == 'Material3' {
           border: 1px solid $secondary-outline-border;
-          border-bottom-right-radius: 20px;
-          border-top-right-radius: 20px;
         }
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
+        @else {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+        }
 
         &.e-readonly-or-not {
           border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;

package/styles/query-builder/bootstrap-dark.css

@@ -182,7 +182,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 4px;

package/styles/query-builder/bootstrap.css

@@ -180,7 +180,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 4px;

package/styles/query-builder/bootstrap4.css

@@ -260,7 +260,7 @@
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
+  border-top-right-radius: 0;
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
   border-bottom-right-radius: 4px;