@syncfusion/ej2-querybuilder 31.1.22 → 31.2.2

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 31.1.22
+*  version : 31.2.2
 *  Copyright Syncfusion Inc. 2001 - 2025. 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,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-querybuilder",
-  "version": "31.1.22",
+  "version": "31.2.2",
   "description": "Essential JS 2 QueryBuilder",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,12 +8,12 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-querybuilder.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.1.22",
-    "@syncfusion/ej2-buttons": "~31.1.21",
-    "@syncfusion/ej2-calendars": "~31.1.22",
-    "@syncfusion/ej2-dropdowns": "~31.1.22",
-    "@syncfusion/ej2-inputs": "~31.1.22",
-    "@syncfusion/ej2-splitbuttons": "~31.1.17"
+    "@syncfusion/ej2-base": "~31.2.2",
+    "@syncfusion/ej2-buttons": "~31.2.2",
+    "@syncfusion/ej2-calendars": "~31.2.2",
+    "@syncfusion/ej2-dropdowns": "~31.2.2",
+    "@syncfusion/ej2-inputs": "~31.2.2",
+    "@syncfusion/ej2-splitbuttons": "~31.2.2"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -285,6 +285,13 @@ export interface QueryBuilderModel extends ComponentModel{
      */
     created?: EmitType<Event>;
 
+    /**
+     * Triggers when the component is destroyed.
+     *
+     * @event destroyed
+     */
+    destroyed?: EmitType<Object>;
+
     /**
      * Triggers when field, operator, value is change.
      *

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

@@ -349,6 +349,7 @@ export declare class QueryBuilder extends Component<HTMLDivElement> implements I
     private isDragEventPrevent;
     private isValueEmpty;
     private isPropChange;
+    private isRuleClicked;
     private ddTree;
     /**
      * Triggers when the component is created.
@@ -357,6 +358,12 @@ export declare class QueryBuilder extends Component<HTMLDivElement> implements I
      * @blazorProperty 'Created'
      */
     created: EmitType<Event>;
+    /**
+     * Triggers when the component is destroyed.
+     *
+     * @event destroyed
+     */
+    destroyed: EmitType<Object>;
     /**
      * Triggers when field, operator, value is change.
      *

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

@@ -219,6 +219,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         _this.cloneRuleBtnClick = false;
         _this.isValueEmpty = false;
         _this.isPropChange = false;
+        _this.isRuleClicked = false;
         MultiSelect.Inject(CheckBoxSelection);
         return _this;
     }
@@ -583,6 +584,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                 case target.className.indexOf('e-clone-rule-btn') > -1:
                     this.actionButton = target;
                     this.cloneRuleBtnClick = true;
+                    this.isRuleClicked = true;
                     this.ruleClone(target);
                     break;
                 case target.className.indexOf('e-lock-rule-btn') > -1:
@@ -596,6 +598,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                 case target.className.indexOf('e-clone-grp-btn') > -1:
                     this.actionButton = target;
                     this.cloneGrpBtnClick = true;
+                    this.isRuleClicked = true;
                     this.groupClone(closest(target, '.e-group-container'));
                     break;
                 case target.className.indexOf('e-deletegroup') > -1:
@@ -755,9 +758,11 @@ var QueryBuilder = /** @class */ (function (_super) {
             }
         }
         else if (event.element.children[0].className.indexOf('e-addrule') > -1) {
+            this.isRuleClicked = true;
             this.addRuleElement(closest(target, '.e-group-container'), {});
         }
         else if (event.element.children[0].className.indexOf('e-addgroup') > -1) {
+            this.isRuleClicked = true;
             this.addGroupElement(true, closest(target, '.e-group-container'), '', true);
         }
     };
@@ -959,6 +964,10 @@ var QueryBuilder = /** @class */ (function (_super) {
             if (!this.isImportRules) {
                 this.updateAddedRule(trgt, rule, newRule, isRlTmp, pId, this.enableSeparateConnector ? true : null);
             }
+            if (this.rule.condition === '' && (this.isRuleClicked || this.rule.rules.length > 1)) {
+                this.rule.condition = 'and';
+            }
+            this.isRuleClicked = false;
             var ruleCount = this.rule.rules.length;
             if (!column || (column && !column.ruleTemplate) || !rule.field) {
                 if (ruleCount > 20) {
@@ -4112,6 +4121,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
         classList(this.element, [], ['e-rtl', 'e-responsive', 'e-device']);
         this.isDestroy = false;
+        _super.prototype.destroy.call(this);
     };
     /**
      * Adds single or multiple rules.
@@ -7510,6 +7520,9 @@ var QueryBuilder = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], QueryBuilder.prototype, "created", void 0);
+    __decorate([
+        Event()
+    ], QueryBuilder.prototype, "destroyed", void 0);
     __decorate([
         Event()
     ], QueryBuilder.prototype, "actionBegin", void 0);

package/styles/bds-lite.css

@@ -836,7 +836,7 @@
   color: #d92c20;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/bds.css

@@ -836,7 +836,7 @@
   color: #d92c20;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/bootstrap-dark-lite.css

@@ -733,7 +733,7 @@
   color: #f44336;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/bootstrap-dark.css

@@ -733,7 +733,7 @@
   color: #f44336;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/bootstrap-lite.css

@@ -718,7 +718,7 @@
   color: #f44336;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/bootstrap.css

@@ -718,7 +718,7 @@
   color: #f44336;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/bootstrap4-lite.css

@@ -794,7 +794,7 @@
   color: #f44336;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/bootstrap4.css

@@ -794,7 +794,7 @@
   color: #f44336;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/bootstrap5-dark-lite.css

@@ -773,7 +773,7 @@
   color: #dc3545;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/bootstrap5-dark.css

@@ -773,7 +773,7 @@
   color: #dc3545;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/bootstrap5-lite.css

@@ -773,7 +773,7 @@
   color: #dc3545;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/bootstrap5.3-lite.css

@@ -784,7 +784,7 @@
           box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/bootstrap5.3.css

@@ -784,7 +784,7 @@
           box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/bootstrap5.css

@@ -773,7 +773,7 @@
   color: #dc3545;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/fabric-dark-lite.css

@@ -695,7 +695,7 @@
   color: #f44336;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/fabric-dark.css

@@ -695,7 +695,7 @@
   color: #f44336;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/fabric-lite.css

@@ -684,7 +684,7 @@
   color: #f44336;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/fabric.css

@@ -684,7 +684,7 @@
   color: #f44336;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/fluent-dark-lite.css

@@ -764,7 +764,7 @@
   color: #d13438;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/fluent-dark.css

@@ -764,7 +764,7 @@
   color: #d13438;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/fluent-lite.css

@@ -764,7 +764,7 @@
   color: #d13438;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/fluent.css

@@ -764,7 +764,7 @@
   color: #d13438;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/fluent2-lite.css

@@ -776,7 +776,7 @@
   background: var(--color-sf-content-bg-color-alt1) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/fluent2.css

@@ -776,7 +776,7 @@
   background: var(--color-sf-content-bg-color-alt1) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/highcontrast-light-lite.css

@@ -778,7 +778,7 @@
   color: #000;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/highcontrast-light.css

@@ -778,7 +778,7 @@
   color: #000;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/highcontrast-lite.css

@@ -806,7 +806,7 @@
   color: #fff;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/highcontrast.css

@@ -806,7 +806,7 @@
   color: #fff;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/material-dark-lite.css

@@ -730,7 +730,7 @@
   color: #f44336;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/material-dark.css

@@ -730,7 +730,7 @@
   color: #f44336;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/material-lite.css

@@ -745,7 +745,7 @@
   color: #f44336;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/material.css

@@ -745,7 +745,7 @@
   color: #f44336;
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;

package/styles/material3-dark-lite.css

@@ -743,7 +743,7 @@
   color: rgba(var(--color-sf-error));
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;
@@ -751,8 +751,8 @@
           transform: translateX(-50%);
   width: 16px;
   height: 16px;
-  border: 2px solid var(--color-sf-primary-container);
-  border-top: 2px solid var(--color-sf-primary);
+  border: 2px solid rgba(var(--color-sf-primary-container));
+  border-top: 2px solid rgba(var(--color-sf-primary));
   border-radius: 50%;
   -webkit-animation: spin 1s linear infinite;
           animation: spin 1s linear infinite;

package/styles/material3-dark.css

@@ -743,7 +743,7 @@
   color: rgba(var(--color-sf-error));
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;
@@ -751,8 +751,8 @@
           transform: translateX(-50%);
   width: 16px;
   height: 16px;
-  border: 2px solid var(--color-sf-primary-container);
-  border-top: 2px solid var(--color-sf-primary);
+  border: 2px solid rgba(var(--color-sf-primary-container));
+  border-top: 2px solid rgba(var(--color-sf-primary));
   border-radius: 50%;
   -webkit-animation: spin 1s linear infinite;
           animation: spin 1s linear infinite;

package/styles/material3-lite.css

@@ -745,7 +745,7 @@
   color: rgba(var(--color-sf-error));
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;
@@ -753,8 +753,8 @@
           transform: translateX(-50%);
   width: 16px;
   height: 16px;
-  border: 2px solid var(--color-sf-primary-container);
-  border-top: 2px solid var(--color-sf-primary);
+  border: 2px solid rgba(var(--color-sf-primary-container));
+  border-top: 2px solid rgba(var(--color-sf-primary));
   border-radius: 50%;
   -webkit-animation: spin 1s linear infinite;
           animation: spin 1s linear infinite;

package/styles/material3.css

@@ -745,7 +745,7 @@
   color: rgba(var(--color-sf-error));
 }
 
-.querybuilder-spinner::before {
+.e-querybuilder-spinner::before {
   content: "";
   position: absolute;
   left: 50%;
@@ -753,8 +753,8 @@
           transform: translateX(-50%);
   width: 16px;
   height: 16px;
-  border: 2px solid var(--color-sf-primary-container);
-  border-top: 2px solid var(--color-sf-primary);
+  border: 2px solid rgba(var(--color-sf-primary-container));
+  border-top: 2px solid rgba(var(--color-sf-primary));
   border-radius: 50%;
   -webkit-animation: spin 1s linear infinite;
           animation: spin 1s linear infinite;

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

@@ -112,3 +112,5 @@ $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;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

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

@@ -110,5 +110,5 @@ $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;
-$primary-light: $brand-primary-lighten-40;
-$primary: $brand-primary;
+$spinner-border-light-color: $brand-primary-lighten-40 !default;
+$spinner-border-color: $brand-primary !default;

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

@@ -112,3 +112,5 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $grey-light-font !default;
 $primary: $brand-primary;
 $primary-light: $brand-info;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

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

@@ -113,3 +113,5 @@ $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;
 $primary-light: $gray-100;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

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

@@ -113,3 +113,5 @@ $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;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

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

@@ -113,3 +113,5 @@ $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;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

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

@@ -112,3 +112,5 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $neutral-light-fontalt !default;
 $primary: $theme-primary !default;
 $primary-light: $theme-lighter !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

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

@@ -112,3 +112,5 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $neutral-light-font !default;
 $primary: $theme-primary !default;
 $primary-light: $theme-lighter !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

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

@@ -112,3 +112,5 @@ $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;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

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

@@ -112,3 +112,5 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 1px !default;
 $qrybldr-drag-grp-list-heg: 31px !default;
 $qrybldr-drag-grp-big-list-heg: 36px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

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

@@ -113,3 +113,5 @@ $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;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

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

@@ -112,3 +112,5 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
 $qryblr-drag-icon-color: $content-font !default;
 $primary: #ffd939 !default;
 $primary-light: #ffd739 !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

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

@@ -112,3 +112,5 @@ $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
 $qryblr-drag-icon-color: $content-font !default;
 $primary: #ffd939 !default;
 $primary-light: #ffd739 !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

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

@@ -112,3 +112,5 @@ $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;
 $primary-light: $primary-300 !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;