@syncfusion/ej2-querybuilder 26.1.35 → 26.1.40

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 26.1.35
+*  version : 26.1.40
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@25.1.35",
+  "_id": "@syncfusion/ej2-querybuilder@26.1.38",
   "_inBundle": false,
-  "_integrity": "sha512-W3exELIqlmdnWS7F6uATRvxZVN7OHpowLNOPAHeuuTcOK4HKyPn9KyZEWJO72g1Er7YYIdz6g3Wc5fPiP5oOoQ==",
+  "_integrity": "sha512-y2TXi+cToTo+9XkQ/WMfnmOI8EpW3J/Kr/pr+NPNYr8f3fD849jog2zIBQWi0FkDXLDnDQl/sGuNh0VIvJI//g==",
   "_location": "/@syncfusion/ej2-querybuilder",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-querybuilder",
     "/@syncfusion/ej2-vue-querybuilder"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-querybuilder/-/ej2-querybuilder-25.1.35.tgz",
-  "_shasum": "a76ae5e9c93e58df39733f9c530228af5d87d771",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-querybuilder/-/ej2-querybuilder-26.1.38.tgz",
+  "_shasum": "f125e6c4c1da213648fbb5fed3055c673a3e0597",
   "_spec": "@syncfusion/ej2-querybuilder@*",
   "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
   "author": {
@@ -32,11 +32,11 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~26.1.35",
-    "@syncfusion/ej2-buttons": "~26.1.35",
-    "@syncfusion/ej2-calendars": "~26.1.35",
-    "@syncfusion/ej2-dropdowns": "~26.1.35",
-    "@syncfusion/ej2-inputs": "~26.1.35",
+    "@syncfusion/ej2-base": "~26.1.37",
+    "@syncfusion/ej2-buttons": "~26.1.40",
+    "@syncfusion/ej2-calendars": "~26.1.40",
+    "@syncfusion/ej2-dropdowns": "~26.1.40",
+    "@syncfusion/ej2-inputs": "~26.1.40",
     "@syncfusion/ej2-splitbuttons": "~26.1.35"
   },
   "deprecated": false,
@@ -66,7 +66,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/querybuilder"
   },
   "typings": "index.d.ts",
-  "version": "26.1.35",
+  "version": "26.1.40",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -1218,8 +1218,16 @@ var QueryBuilder = /** @class */ (function (_super) {
     QueryBuilder.prototype.updateDropdowntreeDS = function (columns) {
         for (var i = 0; i < columns.length; i++) {
             if (columns[parseInt(i.toString(), 10)].type === 'object') {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (this.isAngular && columns[parseInt(i.toString(), 10)].template) {
+                    delete columns[parseInt(i.toString(), 10)].template;
+                }
                 columns[parseInt(i.toString(), 10)].selectable = false;
                 this.updateDropdowntreeDS(columns[parseInt(i.toString(), 10)].columns);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            }
+            else if (this.isAngular && columns[parseInt(i.toString(), 10)].template) {
+                delete columns[parseInt(i.toString(), 10)].template;
             }
         }
     };
@@ -1381,10 +1389,12 @@ var QueryBuilder = /** @class */ (function (_super) {
                     }
                     if (excludeOprs.indexOf(rule.rules[index].operator) < -1 &&
                         (isNullOrUndefined(rule.rules[index].value) &&
-                            rule.rules[index].type !== 'date') || rule.rules[index].value === '' ||
+                            rule.rules[index].type !== 'date') || rule.rules[index].value === '' || rule.rules[index].value === null ||
                         (rule.rules[index].value instanceof Array && valArray.length < 1)) {
                         var valElem = tempElem.querySelectorAll('.e-rule-value .e-control');
-                        isValid = false;
+                        if (excludeOprs.indexOf(rule.rules[index].operator) < 0) {
+                            isValid = false;
+                        }
                         for (var j = 0, jLen = valElem.length; j < jLen; j++) {
                             var element = valElem[j];
                             var elem = void 0;
@@ -1399,6 +1409,18 @@ var QueryBuilder = /** @class */ (function (_super) {
                             }
                             j++;
                         }
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    }
+                    else if (rule.rules[index].type === 'date' && (rule.rules[index].value === null || rule.rules[index].value.indexOf(null) > -1)) {
+                        var valElem = tempElem.querySelectorAll('.e-rule-value .e-control');
+                        if (excludeOprs.indexOf(rule.rules[index].operator) < 0) {
+                            isValid = false;
+                        }
+                        for (var j = 0, jLen = valElem.length; j < jLen; j++) {
+                            if (valElem[j].parentElement.className.indexOf('e-tooltip') < 0 && valElem[j].className.indexOf('e-tooltip') < 0 && (isNullOrUndefined(rule.rules[index].value) || rule.rules[index].value[j] == null)) {
+                                this.renderToolTip(valElem[j].parentElement);
+                            }
+                        }
                     }
                 }
                 else if ((dropDownObj && dropDownObj.element && isNullOrUndefined(dropDownObj.index)) ||
@@ -2153,6 +2175,9 @@ var QueryBuilder = /** @class */ (function (_super) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             element = args.element;
         }
+        if (!element) {
+            return;
+        }
         if (element.className.indexOf('e-day') > -1 || element.className.indexOf('e-today') > -1 || element.className.indexOf('e-cell') > -1) {
             var calenderArgs = args;
             element = calenderArgs.element;
@@ -3787,6 +3812,9 @@ var QueryBuilder = /** @class */ (function (_super) {
                 if (valElem[1] && valElem[1].parentElement.className.indexOf('e-tooltip') > -1) {
                     getComponent(valElem[1].parentElement, 'tooltip').destroy();
                 }
+                if (valElem[2] && valElem[2].parentElement.className.indexOf('e-tooltip') > -1) {
+                    getComponent(valElem[2].parentElement, 'tooltip').destroy();
+                }
             }
         }
     };
@@ -5884,7 +5912,9 @@ var QueryBuilder = /** @class */ (function (_super) {
             for (var j = 0, jLen = rules.rules.length; j < jLen; j++) {
                 if (rules.rules[j].rules) {
                     queryStr = this.getSqlString(rules.rules[j], enableEscape, queryStr, sqlLocale);
-                    condition = rules.rules[j].condition;
+                    if (this.enableSeparateConnector) {
+                        condition = rules.rules[j].condition;
+                    }
                 }
                 else {
                     var rule = rules.rules[j];
@@ -6557,6 +6587,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         var grpCount;
         var operator;
         var isLeftOpened = false;
+        var isNotOpened = false;
         for (var i = 0, iLen = parser.length; i < iLen; i++) {
             if (parser[i][0] === 'Literal') {
                 var column = this.getColumn(parser[i][1]);
@@ -6692,6 +6723,7 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
             else if (parser[i][0] === 'Left') {
                 if (!(parser[0][0] === 'Left') && (parser[i - 1][1] === 'not' || sqlLocale && this.l10n.getConstant('NOT').toLowerCase() === parser[i - 1][1])) {
+                    isNotOpened = true;
                     continue;
                 }
                 this.parser = parser.splice(i + 1, iLen - (i + 1));
@@ -6722,6 +6754,10 @@ var QueryBuilder = /** @class */ (function (_super) {
                 }
             }
             else if (parser[i][0] === 'Right') {
+                if (isNotOpened && parser[i + 1][0] === 'Right') {
+                    isNotOpened = false;
+                    continue;
+                }
                 this.parser = parser.splice(i + 1, iLen - (i + 1));
                 levelColl.pop(); //To get the parent Group
                 rules = this.rule;

package/styles/bootstrap-dark.css

@@ -206,7 +206,7 @@
   padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-group-container, .e-query-builder .e-dragclone.e-cloneproperties .e-rule-container {
-  background-color: #131313;
+  background: #131313;
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-rule-value-delete {
   margin-top: 10px;
@@ -230,6 +230,7 @@
   padding: 15px 3px 15px 11px;
   vertical-align: middle;
   font-size: 14px;
+  color: #f0f0f0;
 }
 .e-query-builder .e-group-header .e-drag-qb-rule {
   margin: 1px;

package/styles/bootstrap.css

@@ -199,7 +199,7 @@
   padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-group-container, .e-query-builder .e-dragclone.e-cloneproperties .e-rule-container {
-  background-color: #f8f8f8;
+  background: #f8f8f8;
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-rule-value-delete {
   margin-top: 10px;
@@ -223,6 +223,7 @@
   padding: 15px 3px 15px 11px;
   vertical-align: middle;
   font-size: 14px;
+  color: #333;
 }
 .e-query-builder .e-group-header .e-drag-qb-rule {
   margin: 1px;

package/styles/bootstrap4.css

@@ -308,7 +308,7 @@
   padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-group-container, .e-query-builder .e-dragclone.e-cloneproperties .e-rule-container {
-  background-color: #f8f9fa;
+  background: #f8f9fa;
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-rule-value-delete {
   margin-top: 10px;
@@ -332,6 +332,7 @@
   padding: 15px 3px 15px 11px;
   vertical-align: middle;
   font-size: 12px;
+  color: #495057;
 }
 .e-query-builder .e-group-header .e-drag-qb-rule {
   margin: 1px;

package/styles/bootstrap5-dark.css

@@ -247,7 +247,7 @@
   padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-group-container, .e-query-builder .e-dragclone.e-cloneproperties .e-rule-container {
-  background-color: #282d31;
+  background: #282d31;
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-rule-value-delete {
   margin-top: 10px;
@@ -271,6 +271,7 @@
   padding: 15px 3px 15px 11px;
   vertical-align: middle;
   font-size: 14px;
+  color: #adb5bd;
 }
 .e-query-builder .e-group-header .e-drag-qb-rule {
   margin: 1px;

package/styles/bootstrap5.css

@@ -247,7 +247,7 @@
   padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-group-container, .e-query-builder .e-dragclone.e-cloneproperties .e-rule-container {
-  background-color: #f8f9fa;
+  background: #f8f9fa;
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-rule-value-delete {
   margin-top: 10px;
@@ -271,6 +271,7 @@
   padding: 15px 3px 15px 11px;
   vertical-align: middle;
   font-size: 14px;
+  color: #6c757d;
 }
 .e-query-builder .e-group-header .e-drag-qb-rule {
   margin: 1px;

package/styles/fabric-dark.css

@@ -168,7 +168,7 @@
   padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-group-container, .e-query-builder .e-dragclone.e-cloneproperties .e-rule-container {
-  background-color: #282727;
+  background: #282727;
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-rule-value-delete {
   margin-top: 10px;
@@ -192,6 +192,7 @@
   padding: 15px 3px 15px 11px;
   vertical-align: middle;
   font-size: 14px;
+  color: #fff;
 }
 .e-query-builder .e-group-header .e-drag-qb-rule {
   margin: 1px;

package/styles/fabric.css

@@ -156,7 +156,7 @@
   padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-group-container, .e-query-builder .e-dragclone.e-cloneproperties .e-rule-container {
-  background-color: #f8f8f8;
+  background: #f8f8f8;
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-rule-value-delete {
   margin-top: 10px;
@@ -180,6 +180,7 @@
   padding: 15px 3px 15px 11px;
   vertical-align: middle;
   font-size: 14px;
+  color: #333;
 }
 .e-query-builder .e-group-header .e-drag-qb-rule {
   margin: 1px;

package/styles/fluent-dark.css

@@ -232,7 +232,7 @@
   padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-group-container, .e-query-builder .e-dragclone.e-cloneproperties .e-rule-container {
-  background-color: #1b1a19;
+  background: #1b1a19;
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-rule-value-delete {
   margin-top: 10px;
@@ -256,6 +256,7 @@
   padding: 15px 3px 15px 11px;
   vertical-align: middle;
   font-size: 14px;
+  color: #fff;
 }
 .e-query-builder .e-group-header .e-drag-qb-rule {
   margin: 1px;

package/styles/fluent.css

@@ -232,7 +232,7 @@
   padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-group-container, .e-query-builder .e-dragclone.e-cloneproperties .e-rule-container {
-  background-color: #fff;
+  background: #fff;
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-rule-value-delete {
   margin-top: 10px;
@@ -256,6 +256,7 @@
   padding: 15px 3px 15px 11px;
   vertical-align: middle;
   font-size: 14px;
+  color: #323130;
 }
 .e-query-builder .e-group-header .e-drag-qb-rule {
   margin: 1px;

package/styles/fluent2.css

@@ -207,7 +207,7 @@
   --color-sf-info-outline: var(--color-sf-info-border-color);
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-content-bg-color-alt1);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -478,7 +478,7 @@
   --color-sf-success-bg-color: #218c21;
   --color-sf-success-border-color: var(--color-sf-success-bg-color);
   --color-sf-success-text: var(--color-sf-primary-text-color);
-  --color-sf-success-bg-color-hover: var(--color-sf-success-bg-color);
+  --color-sf-success-bg-color-hover: #0e700e;
   --color-sf-success-border-color-hover: var(--color-sf-success-bg-color-hover);
   --color-sf-success-text-hover: var(--color-sf-primary-text-color);
   --color-sf-success-bg-color-pressed: #052505;
@@ -496,7 +496,7 @@
   --color-sf-warning-bg-color: #f87528;
   --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
   --color-sf-warning-text: #242424;
-  --color-sf-warning-bg-color-hover: var(--color-sf-warning-bg-color);
+  --color-sf-warning-bg-color-hover: #de590b;
   --color-sf-warning-border-color-hover: var(--color-sf-warning-bg-color-hover);
   --color-sf-warning-text-hover: var(--color-sf-primary-text-color);
   --color-sf-warning-bg-color-pressed: #4a1e04;
@@ -555,7 +555,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -897,7 +897,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-border-light);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color);
   --color-sf-appbar-bg-color-alt1: #fff;
@@ -1234,7 +1234,7 @@
 .e-query-builder .e-dragclone.e-cloneproperties .e-group-container, .e-query-builder .e-dragclone.e-cloneproperties .e-rule-container {
   -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
-  background-color: var(--color-sf-table-bg-color-selected);
+  background: var(--color-sf-table-bg-color-selected);
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-rule-value-delete {
   margin-top: 10px;

package/styles/highcontrast-light.css

@@ -243,7 +243,7 @@
   padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-group-container, .e-query-builder .e-dragclone.e-cloneproperties .e-rule-container {
-  background-color: #fff;
+  background: #fff;
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-rule-value-delete {
   margin-top: 10px;
@@ -267,6 +267,7 @@
   padding: 15px 3px 15px 11px;
   vertical-align: middle;
   font-size: 14px;
+  color: #000;
 }
 .e-query-builder .e-group-header .e-drag-qb-rule {
   margin: 1px;

package/styles/highcontrast.css

@@ -250,7 +250,7 @@
   padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-group-container, .e-query-builder .e-dragclone.e-cloneproperties .e-rule-container {
-  background-color: #000;
+  background: #000;
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-rule-value-delete {
   margin-top: 10px;
@@ -274,6 +274,7 @@
   padding: 15px 3px 15px 11px;
   vertical-align: middle;
   font-size: 14px;
+  color: #fff;
 }
 .e-query-builder .e-group-header .e-drag-qb-rule {
   margin: 1px;

package/styles/material-dark.css

@@ -187,7 +187,7 @@
   padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-group-container, .e-query-builder .e-dragclone.e-cloneproperties .e-rule-container {
-  background-color: #424242;
+  background: #424242;
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-rule-value-delete {
   margin-top: 10px;
@@ -211,6 +211,7 @@
   padding: 15px 3px 15px 11px;
   vertical-align: middle;
   font-size: 12px;
+  color: #fff;
 }
 .e-query-builder .e-group-header .e-drag-qb-rule {
   margin: 1px;

package/styles/material.css

@@ -212,7 +212,7 @@
   padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-group-container, .e-query-builder .e-dragclone.e-cloneproperties .e-rule-container {
-  background-color: #fff;
+  background: #fff;
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-rule-value-delete {
   margin-top: 10px;
@@ -236,6 +236,7 @@
   padding: 15px 3px 15px 11px;
   vertical-align: middle;
   font-size: 12px;
+  color: rgba(0, 0, 0, 0.87);
 }
 .e-query-builder .e-group-header .e-drag-qb-rule {
   margin: 1px;

package/styles/material3-dark.css

@@ -268,7 +268,8 @@
   padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-group-container, .e-query-builder .e-dragclone.e-cloneproperties .e-rule-container {
-  background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
+  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-rule-value-delete {
   margin-top: 10px;
@@ -292,6 +293,7 @@
   padding: 15px 3px 15px 11px;
   vertical-align: middle;
   font-size: 16px;
+  color: rgba(var(--color-sf-on-surface));
 }
 .e-query-builder .e-group-header .e-drag-qb-rule {
   margin: 1px;

package/styles/material3.css

@@ -324,7 +324,8 @@
   padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-group-container, .e-query-builder .e-dragclone.e-cloneproperties .e-rule-container {
-  background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
+  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-rule-value-delete {
   margin-top: 10px;
@@ -348,6 +349,7 @@
   padding: 15px 3px 15px 11px;
   vertical-align: middle;
   font-size: 16px;
+  color: rgba(var(--color-sf-on-surface));
 }
 .e-query-builder .e-group-header .e-drag-qb-rule {
   margin: 1px;

package/styles/query-builder/_bds-definition.scss

@@ -111,3 +111,4 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 29px !default;
 $qrybldr-drag-grp-big-list-heg: 35px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $secondary-text-color !default;

package/styles/query-builder/_bootstrap-dark-definition.scss

@@ -109,3 +109,4 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 29px !default;
 $qrybldr-drag-grp-big-list-heg: 35px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $grey-dark-font !default;

package/styles/query-builder/_bootstrap-definition.scss

@@ -109,3 +109,4 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 29px !default;
 $qrybldr-drag-grp-big-list-heg: 35px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $grey-light-font !default;

package/styles/query-builder/_bootstrap4-definition.scss

@@ -111,3 +111,4 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 27px !default;
 $qrybldr-drag-grp-big-list-heg: 32px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 7px !default;
+$qryblr-drag-icon-color: $gray-700 !default;

package/styles/query-builder/_bootstrap5-definition.scss

@@ -112,3 +112,4 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 28px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $icon-color !default;

package/styles/query-builder/_bootstrap5.3-definition.scss

@@ -112,3 +112,4 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 28px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $secondary-text-color !default;

package/styles/query-builder/_fabric-dark-definition.scss

@@ -109,3 +109,4 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 30px !default;
 $qrybldr-drag-grp-big-list-heg: 36px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $neutral-light-fontalt !default;

package/styles/query-builder/_fabric-definition.scss

@@ -109,3 +109,4 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 30px !default;
 $qrybldr-drag-grp-big-list-heg: 36px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $neutral-light-font !default;

package/styles/query-builder/_fluent-definition.scss

@@ -111,3 +111,4 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 28px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $secondary-text-color !default;

package/styles/query-builder/_fusionnew-definition.scss

@@ -112,3 +112,4 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 3px !default;
 $qrybldr-drag-grp-list-heg: 28px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $secondary-text-color !default;

package/styles/query-builder/_highcontrast-definition.scss

@@ -109,3 +109,4 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 32px !default;
 $qrybldr-drag-grp-big-list-heg: 37px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
+$qryblr-drag-icon-color: $content-font !default;

package/styles/query-builder/_highcontrast-light-definition.scss

@@ -109,3 +109,4 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 32px !default;
 $qrybldr-drag-grp-big-list-heg: 37px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
+$qryblr-drag-icon-color: $content-font !default;

package/styles/query-builder/_layout.scss

@@ -39,7 +39,7 @@
         @if $skin-name == 'fluent2' {
           box-shadow: $shadow-md;
         }
-        background-color: $qrybldr-drag-bg-color;
+        background: $qrybldr-drag-bg-color;
       }
 
       & .e-rule-value-delete {
@@ -74,9 +74,7 @@
       padding: 15px 3px 15px 11px;
       vertical-align: middle;
       font-size: $qrybldr-drag-icon-font-size;
-      @if $skin-name == 'fluent2' {
-        color: $qryblr-drag-icon-color;
-      }
+      color: $qryblr-drag-icon-color;
     }
 
     & .e-group-header .e-drag-qb-rule {

package/styles/query-builder/_material-dark-definition.scss

@@ -110,3 +110,4 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 3px !default;
 $qrybldr-drag-grp-list-heg: 25px !default;
 $qrybldr-drag-grp-big-list-heg: 32px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: $grey-dark-font !default;

package/styles/query-builder/_material-definition.scss

@@ -109,3 +109,4 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 3px !default;
 $qrybldr-drag-grp-list-heg: 25px !default;
 $qrybldr-drag-grp-big-list-heg: 32px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$qryblr-drag-icon-color: rgba($grey-black, .87) !default;

package/styles/query-builder/_material3-definition.scss

@@ -114,3 +114,4 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 1px !default;
 $qrybldr-drag-grp-list-heg: 26px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
+$qryblr-drag-icon-color: rgba($secondary-text-color) !default;

package/styles/query-builder/_tailwind-definition.scss

@@ -111,3 +111,4 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
 $qrybldr-drag-grp-list-heg: 28px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 6px !default;
+$qryblr-drag-icon-color: $secondary-text-color !default;

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

@@ -206,7 +206,7 @@
   padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-group-container, .e-query-builder .e-dragclone.e-cloneproperties .e-rule-container {
-  background-color: #131313;
+  background: #131313;
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-rule-value-delete {
   margin-top: 10px;
@@ -230,6 +230,7 @@
   padding: 15px 3px 15px 11px;
   vertical-align: middle;
   font-size: 14px;
+  color: #f0f0f0;
 }
 .e-query-builder .e-group-header .e-drag-qb-rule {
   margin: 1px;

package/styles/query-builder/bootstrap.css

@@ -199,7 +199,7 @@
   padding: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-group-container, .e-query-builder .e-dragclone.e-cloneproperties .e-rule-container {
-  background-color: #f8f8f8;
+  background: #f8f8f8;
 }
 .e-query-builder .e-dragclone.e-cloneproperties .e-rule-value-delete {
   margin-top: 10px;
@@ -223,6 +223,7 @@
   padding: 15px 3px 15px 11px;
   vertical-align: middle;
   font-size: 14px;
+  color: #333;
 }
 .e-query-builder .e-group-header .e-drag-qb-rule {
   margin: 1px;