@syncfusion/ej2-querybuilder 31.2.15 → 32.1.19

package/dist/global/index.d.ts

@@ -1,12 +1,3 @@
-/*!
-*  filename: index.d.ts
-*  version : 31.2.15
-*  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
-*  licensing@syncfusion.com. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
 import * as _querybuilder from '@syncfusion/ej2-querybuilder';
 
 export declare namespace ej {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-querybuilder",
-  "version": "31.2.15",
+  "version": "32.1.19",
   "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.2.12",
-    "@syncfusion/ej2-buttons": "~31.2.12",
-    "@syncfusion/ej2-calendars": "~31.2.15",
-    "@syncfusion/ej2-dropdowns": "~31.2.15",
-    "@syncfusion/ej2-inputs": "~31.2.15",
-    "@syncfusion/ej2-splitbuttons": "~31.2.12"
+    "@syncfusion/ej2-base": "~32.1.19",
+    "@syncfusion/ej2-buttons": "~32.1.19",
+    "@syncfusion/ej2-calendars": "~32.1.19",
+    "@syncfusion/ej2-dropdowns": "~32.1.19",
+    "@syncfusion/ej2-inputs": "~32.1.19",
+    "@syncfusion/ej2-splitbuttons": "~32.1.19"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -350,6 +350,7 @@ export declare class QueryBuilder extends Component<HTMLDivElement> implements I
     private isValueEmpty;
     private isPropChange;
     private isRuleClicked;
+    private groupCloned;
     private ddTree;
     /**
      * Triggers when the component is created.

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

@@ -220,6 +220,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         _this.isValueEmpty = false;
         _this.isPropChange = false;
         _this.isRuleClicked = false;
+        _this.groupCloned = false;
         MultiSelect.Inject(CheckBoxSelection);
         return _this;
     }
@@ -597,7 +598,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     break;
                 case target.className.indexOf('e-clone-grp-btn') > -1:
                     this.actionButton = target;
-                    this.cloneGrpBtnClick = true;
+                    this.cloneGrpBtnClick = this.groupCloned = true;
                     this.isRuleClicked = true;
                     this.groupClone(closest(target, '.e-group-container'));
                     break;
@@ -4224,6 +4225,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         if (this.isAddSuccess || this.element.querySelectorAll('.e-group-container').length <= this.maxGroupCount) {
             groupID = this.element.id + '_' + groupID;
             var groupElem = document.getElementById(groupID);
+            var temp = this.groupIndex;
             var rule = this.getParentGroup(groupElem);
             var grouplen = groups.length;
             if (grouplen) {
@@ -4246,6 +4248,11 @@ var QueryBuilder = /** @class */ (function (_super) {
                     not = this.updatedRule.not;
                     isLocked = this.updatedRule.isLocked;
                 }
+                if (this.groupCloned) {
+                    var parent_1 = this.element.querySelector('#' + groupID);
+                    var topLevelGroups = parent_1.querySelectorAll(':scope > .e-group-body > .e-rule-list > .e-group-container');
+                    this.groupIndex = topLevelGroups.length > 1 ? topLevelGroups.length - 1 : 0;
+                }
                 if (this.groupIndex < 0) {
                     if (this.enableNotCondition) {
                         rule.rules.push({ 'condition': condition, 'not': not, rules: [] });
@@ -4262,6 +4269,9 @@ var QueryBuilder = /** @class */ (function (_super) {
                         rule.rules.splice(this.groupIndex + 1, 0, { condition: condition, rules: [], isLocked: isLocked });
                     }
                 }
+                if (this.groupCloned) {
+                    this.groupIndex = temp;
+                }
             }
             if (!this.headerTemplate) {
                 this.disableRuleCondition(groupElem, rule, null, this.enableSeparateConnector ? true : null);
@@ -6785,13 +6795,13 @@ var QueryBuilder = /** @class */ (function (_super) {
         var isCloneGroup = this.showButtons.cloneGroup;
         groupID = groupID.replace(this.element.id + '_', '');
         this.groupIndex = index;
-        this.cloneGrpBtnClick = true;
+        this.cloneGrpBtnClick = this.groupCloned = true;
         this.showButtons.cloneGroup = true;
         this.addGroups([{ 'condition': group.condition, 'not': group.not, 'rules': group.rules }], groupID);
         this.groupIndex = -1;
         this.cloneGrpBtnClick = false;
         this.showButtons.cloneGroup = isCloneGroup;
-        isCloneGroup = false;
+        isCloneGroup = this.groupCloned = false;
     };
     /**
      * Locks the rule based on the rule ID.
@@ -7340,6 +7350,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         this.groupIndex = Array.prototype.indexOf.call(target.closest('.e-rule-list').children, target.closest('.e-group-container'));
         this.addGroups([{ 'condition': group.condition, 'not': group.not, 'rules': group.rules }], groupId);
         this.groupIndex = -1;
+        this.groupCloned = false;
     };
     QueryBuilder.prototype.ruleClone = function (target) {
         var ruleElem = closest(target, '.e-rule-container');

package/styles/bds-lite.css

@@ -834,41 +834,4 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: #d92c20;
-}
-
-.e-querybuilder-spinner::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--color-sf-utility-primary-light);
-  border-top: 2px solid var(--color-sf-brand-primary);
-  border-radius: 50%;
-  -webkit-animation: spin 1s linear infinite;
-          animation: spin 1s linear infinite;
-}
-
-@-webkit-keyframes spin {
-  0% {
-    -webkit-transform: translateX(-50%) rotate(0deg);
-            transform: translateX(-50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translateX(-50%) rotate(360deg);
-            transform: translateX(-50%) rotate(360deg);
-  }
-}
-
-@keyframes spin {
-  0% {
-    -webkit-transform: translateX(-50%) rotate(0deg);
-            transform: translateX(-50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translateX(-50%) rotate(360deg);
-            transform: translateX(-50%) rotate(360deg);
-  }
 }

package/styles/bds-lite.scss

@@ -1,15 +1,14 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-buttons/styles/button/bds-definition.scss';
-@import 'ej2-buttons/styles/radio-button/bds-definition.scss';
-@import 'ej2-splitbuttons/styles/button-group/bds-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bds-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bds-definition.scss';
-@import 'ej2-dropdowns/styles/multi-select/bds-definition.scss';
-@import 'ej2-calendars/styles/datepicker/bds-definition.scss';
-@import 'ej2-inputs/styles/numerictextbox/bds-definition.scss';
-@import 'ej2-inputs/styles/textbox/bds-definition.scss';
-@import 'ej2-popups/styles/tooltip/bds-definition.scss';
-@import 'ej2-popups/styles/spinner/bds-definition.scss';
-@import 'query-builder/bds-definition.scss';
-@import 'query-builder/icons/bds.scss';
-@import 'query-builder/all.scss';
+@use 'ej2-buttons/styles/button/bds-definition' as *;
+@use 'ej2-buttons/styles/radio-button/bds-definition' as *;
+@use 'ej2-splitbuttons/styles/button-group/bds-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bds-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bds-definition' as *;
+@use 'ej2-dropdowns/styles/multi-select/bds-definition' as *;
+@use 'ej2-calendars/styles/datepicker/bds-definition' as *;
+@use 'ej2-inputs/styles/numerictextbox/bds-definition' as *;
+@use 'ej2-inputs/styles/textbox/bds-definition' as *;
+@use 'ej2-popups/styles/tooltip/bds-definition' as *;
+@use 'ej2-popups/styles/spinner/bds-definition' as *;
+@use 'query-builder/bds-definition' as *;
+@use 'query-builder/icons/bds' as *;
+@use 'query-builder/all' as *;

package/styles/bds.css

@@ -836,42 +836,6 @@
   color: #d92c20;
 }
 
-.e-querybuilder-spinner::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--color-sf-utility-primary-light);
-  border-top: 2px solid var(--color-sf-brand-primary);
-  border-radius: 50%;
-  -webkit-animation: spin 1s linear infinite;
-          animation: spin 1s linear infinite;
-}
-
-@-webkit-keyframes spin {
-  0% {
-    -webkit-transform: translateX(-50%) rotate(0deg);
-            transform: translateX(-50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translateX(-50%) rotate(360deg);
-            transform: translateX(-50%) rotate(360deg);
-  }
-}
-
-@keyframes spin {
-  0% {
-    -webkit-transform: translateX(-50%) rotate(0deg);
-            transform: translateX(-50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translateX(-50%) rotate(360deg);
-            transform: translateX(-50%) rotate(360deg);
-  }
-}
 .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {

package/styles/bds.scss

@@ -1,16 +1,15 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-buttons/styles/button/bds-definition.scss';
-@import 'ej2-buttons/styles/radio-button/bds-definition.scss';
-@import 'ej2-splitbuttons/styles/button-group/bds-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bds-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bds-definition.scss';
-@import 'ej2-dropdowns/styles/multi-select/bds-definition.scss';
-@import 'ej2-calendars/styles/datepicker/bds-definition.scss';
-@import 'ej2-inputs/styles/numerictextbox/bds-definition.scss';
-@import 'ej2-inputs/styles/textbox/bds-definition.scss';
-@import 'ej2-popups/styles/tooltip/bds-definition.scss';
-@import 'ej2-popups/styles/spinner/bds-definition.scss';
-@import 'query-builder/bds-definition.scss';
-@import 'query-builder/icons/bds.scss';
-@import 'query-builder/all.scss';
-@import 'query-builder/bigger.scss';
+@use 'ej2-buttons/styles/button/bds-definition' as *;
+@use 'ej2-buttons/styles/radio-button/bds-definition' as *;
+@use 'ej2-splitbuttons/styles/button-group/bds-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bds-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bds-definition' as *;
+@use 'ej2-dropdowns/styles/multi-select/bds-definition' as *;
+@use 'ej2-calendars/styles/datepicker/bds-definition' as *;
+@use 'ej2-inputs/styles/numerictextbox/bds-definition' as *;
+@use 'ej2-inputs/styles/textbox/bds-definition' as *;
+@use 'ej2-popups/styles/tooltip/bds-definition' as *;
+@use 'ej2-popups/styles/spinner/bds-definition' as *;
+@use 'query-builder/bds-definition' as *;
+@use 'query-builder/icons/bds' as *;
+@use 'query-builder/all' as *;
+@use 'query-builder/bigger' as *;

package/styles/bootstrap-dark-lite.css

@@ -731,41 +731,4 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: #f44336;
-}
-
-.e-querybuilder-spinner::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgb(189, 219.8, 255);
-  border-top: 2px solid #0070f0;
-  border-radius: 50%;
-  -webkit-animation: spin 1s linear infinite;
-          animation: spin 1s linear infinite;
-}
-
-@-webkit-keyframes spin {
-  0% {
-    -webkit-transform: translateX(-50%) rotate(0deg);
-            transform: translateX(-50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translateX(-50%) rotate(360deg);
-            transform: translateX(-50%) rotate(360deg);
-  }
-}
-
-@keyframes spin {
-  0% {
-    -webkit-transform: translateX(-50%) rotate(0deg);
-            transform: translateX(-50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translateX(-50%) rotate(360deg);
-            transform: translateX(-50%) rotate(360deg);
-  }
 }

package/styles/bootstrap-dark-lite.scss

@@ -1,15 +1,14 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
-@import 'ej2-buttons/styles/radio-button/bootstrap-dark-definition.scss';
-@import 'ej2-splitbuttons/styles/button-group/bootstrap-dark-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bootstrap-dark-definition.scss';
-@import 'ej2-dropdowns/styles/multi-select/bootstrap-dark-definition.scss';
-@import 'ej2-calendars/styles/datepicker/bootstrap-dark-definition.scss';
-@import 'ej2-inputs/styles/numerictextbox/bootstrap-dark-definition.scss';
-@import 'ej2-inputs/styles/textbox/bootstrap-dark-definition.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap-dark-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap-dark-definition.scss';
-@import 'query-builder/bootstrap-dark-definition.scss';
-@import 'query-builder/icons/bootstrap-dark.scss';
-@import 'query-builder/all.scss';
+@use 'ej2-buttons/styles/button/bootstrap-dark-definition' as *;
+@use 'ej2-buttons/styles/radio-button/bootstrap-dark-definition' as *;
+@use 'ej2-splitbuttons/styles/button-group/bootstrap-dark-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap-dark-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bootstrap-dark-definition' as *;
+@use 'ej2-dropdowns/styles/multi-select/bootstrap-dark-definition' as *;
+@use 'ej2-calendars/styles/datepicker/bootstrap-dark-definition' as *;
+@use 'ej2-inputs/styles/numerictextbox/bootstrap-dark-definition' as *;
+@use 'ej2-inputs/styles/textbox/bootstrap-dark-definition' as *;
+@use 'ej2-popups/styles/tooltip/bootstrap-dark-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap-dark-definition' as *;
+@use 'query-builder/bootstrap-dark-definition' as *;
+@use 'query-builder/icons/bootstrap-dark' as *;
+@use 'query-builder/all' as *;

package/styles/bootstrap-dark.css

@@ -733,42 +733,6 @@
   color: #f44336;
 }
 
-.e-querybuilder-spinner::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgb(189, 219.8, 255);
-  border-top: 2px solid #0070f0;
-  border-radius: 50%;
-  -webkit-animation: spin 1s linear infinite;
-          animation: spin 1s linear infinite;
-}
-
-@-webkit-keyframes spin {
-  0% {
-    -webkit-transform: translateX(-50%) rotate(0deg);
-            transform: translateX(-50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translateX(-50%) rotate(360deg);
-            transform: translateX(-50%) rotate(360deg);
-  }
-}
-
-@keyframes spin {
-  0% {
-    -webkit-transform: translateX(-50%) rotate(0deg);
-            transform: translateX(-50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translateX(-50%) rotate(360deg);
-            transform: translateX(-50%) rotate(360deg);
-  }
-}
 .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {

package/styles/bootstrap-dark.scss

@@ -1,16 +1,15 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
-@import 'ej2-buttons/styles/radio-button/bootstrap-dark-definition.scss';
-@import 'ej2-splitbuttons/styles/button-group/bootstrap-dark-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bootstrap-dark-definition.scss';
-@import 'ej2-dropdowns/styles/multi-select/bootstrap-dark-definition.scss';
-@import 'ej2-calendars/styles/datepicker/bootstrap-dark-definition.scss';
-@import 'ej2-inputs/styles/numerictextbox/bootstrap-dark-definition.scss';
-@import 'ej2-inputs/styles/textbox/bootstrap-dark-definition.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap-dark-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap-dark-definition.scss';
-@import 'query-builder/bootstrap-dark-definition.scss';
-@import 'query-builder/icons/bootstrap-dark.scss';
-@import 'query-builder/all.scss';
-@import 'query-builder/bigger.scss';
+@use 'ej2-buttons/styles/button/bootstrap-dark-definition' as *;
+@use 'ej2-buttons/styles/radio-button/bootstrap-dark-definition' as *;
+@use 'ej2-splitbuttons/styles/button-group/bootstrap-dark-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap-dark-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bootstrap-dark-definition' as *;
+@use 'ej2-dropdowns/styles/multi-select/bootstrap-dark-definition' as *;
+@use 'ej2-calendars/styles/datepicker/bootstrap-dark-definition' as *;
+@use 'ej2-inputs/styles/numerictextbox/bootstrap-dark-definition' as *;
+@use 'ej2-inputs/styles/textbox/bootstrap-dark-definition' as *;
+@use 'ej2-popups/styles/tooltip/bootstrap-dark-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap-dark-definition' as *;
+@use 'query-builder/bootstrap-dark-definition' as *;
+@use 'query-builder/icons/bootstrap-dark' as *;
+@use 'query-builder/all' as *;
+@use 'query-builder/bigger' as *;

package/styles/bootstrap-lite.css

@@ -716,41 +716,4 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: #f44336;
-}
-
-.e-querybuilder-spinner::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  width: 16px;
-  height: 16px;
-  border: 2px solid #5bc0de;
-  border-top: 2px solid #317ab9;
-  border-radius: 50%;
-  -webkit-animation: spin 1s linear infinite;
-          animation: spin 1s linear infinite;
-}
-
-@-webkit-keyframes spin {
-  0% {
-    -webkit-transform: translateX(-50%) rotate(0deg);
-            transform: translateX(-50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translateX(-50%) rotate(360deg);
-            transform: translateX(-50%) rotate(360deg);
-  }
-}
-
-@keyframes spin {
-  0% {
-    -webkit-transform: translateX(-50%) rotate(0deg);
-            transform: translateX(-50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translateX(-50%) rotate(360deg);
-            transform: translateX(-50%) rotate(360deg);
-  }
 }

package/styles/bootstrap-lite.scss

@@ -1,15 +1,14 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import 'ej2-buttons/styles/button/bootstrap-definition.scss';
-@import 'ej2-buttons/styles/radio-button/bootstrap-definition.scss';
-@import 'ej2-splitbuttons/styles/button-group/bootstrap-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bootstrap-definition.scss';
-@import 'ej2-dropdowns/styles/multi-select/bootstrap-definition.scss';
-@import 'ej2-calendars/styles/datepicker/bootstrap-definition.scss';
-@import 'ej2-inputs/styles/numerictextbox/bootstrap-definition.scss';
-@import 'ej2-inputs/styles/textbox/bootstrap-definition.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap-definition.scss';
-@import 'query-builder/bootstrap-definition.scss';
-@import 'query-builder/icons/bootstrap.scss';
-@import 'query-builder/all.scss';
+@use 'ej2-buttons/styles/button/bootstrap-definition' as *;
+@use 'ej2-buttons/styles/radio-button/bootstrap-definition' as *;
+@use 'ej2-splitbuttons/styles/button-group/bootstrap-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bootstrap-definition' as *;
+@use 'ej2-dropdowns/styles/multi-select/bootstrap-definition' as *;
+@use 'ej2-calendars/styles/datepicker/bootstrap-definition' as *;
+@use 'ej2-inputs/styles/numerictextbox/bootstrap-definition' as *;
+@use 'ej2-inputs/styles/textbox/bootstrap-definition' as *;
+@use 'ej2-popups/styles/tooltip/bootstrap-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap-definition' as *;
+@use 'query-builder/bootstrap-definition' as *;
+@use 'query-builder/icons/bootstrap' as *;
+@use 'query-builder/all' as *;

package/styles/bootstrap.css

@@ -718,42 +718,6 @@
   color: #f44336;
 }
 
-.e-querybuilder-spinner::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  width: 16px;
-  height: 16px;
-  border: 2px solid #5bc0de;
-  border-top: 2px solid #317ab9;
-  border-radius: 50%;
-  -webkit-animation: spin 1s linear infinite;
-          animation: spin 1s linear infinite;
-}
-
-@-webkit-keyframes spin {
-  0% {
-    -webkit-transform: translateX(-50%) rotate(0deg);
-            transform: translateX(-50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translateX(-50%) rotate(360deg);
-            transform: translateX(-50%) rotate(360deg);
-  }
-}
-
-@keyframes spin {
-  0% {
-    -webkit-transform: translateX(-50%) rotate(0deg);
-            transform: translateX(-50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translateX(-50%) rotate(360deg);
-            transform: translateX(-50%) rotate(360deg);
-  }
-}
 .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {

package/styles/bootstrap.scss

@@ -1,16 +1,15 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import 'ej2-buttons/styles/button/bootstrap-definition.scss';
-@import 'ej2-buttons/styles/radio-button/bootstrap-definition.scss';
-@import 'ej2-splitbuttons/styles/button-group/bootstrap-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bootstrap-definition.scss';
-@import 'ej2-dropdowns/styles/multi-select/bootstrap-definition.scss';
-@import 'ej2-calendars/styles/datepicker/bootstrap-definition.scss';
-@import 'ej2-inputs/styles/numerictextbox/bootstrap-definition.scss';
-@import 'ej2-inputs/styles/textbox/bootstrap-definition.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap-definition.scss';
-@import 'query-builder/bootstrap-definition.scss';
-@import 'query-builder/icons/bootstrap.scss';
-@import 'query-builder/all.scss';
-@import 'query-builder/bigger.scss';
+@use 'ej2-buttons/styles/button/bootstrap-definition' as *;
+@use 'ej2-buttons/styles/radio-button/bootstrap-definition' as *;
+@use 'ej2-splitbuttons/styles/button-group/bootstrap-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bootstrap-definition' as *;
+@use 'ej2-dropdowns/styles/multi-select/bootstrap-definition' as *;
+@use 'ej2-calendars/styles/datepicker/bootstrap-definition' as *;
+@use 'ej2-inputs/styles/numerictextbox/bootstrap-definition' as *;
+@use 'ej2-inputs/styles/textbox/bootstrap-definition' as *;
+@use 'ej2-popups/styles/tooltip/bootstrap-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap-definition' as *;
+@use 'query-builder/bootstrap-definition' as *;
+@use 'query-builder/icons/bootstrap' as *;
+@use 'query-builder/all' as *;
+@use 'query-builder/bigger' as *;

package/styles/bootstrap4-lite.css

@@ -792,41 +792,4 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: #f44336;
-}
-
-.e-querybuilder-spinner::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  width: 16px;
-  height: 16px;
-  border: 2px solid #f8f9fa;
-  border-top: 2px solid #007bff;
-  border-radius: 50%;
-  -webkit-animation: spin 1s linear infinite;
-          animation: spin 1s linear infinite;
-}
-
-@-webkit-keyframes spin {
-  0% {
-    -webkit-transform: translateX(-50%) rotate(0deg);
-            transform: translateX(-50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translateX(-50%) rotate(360deg);
-            transform: translateX(-50%) rotate(360deg);
-  }
-}
-
-@keyframes spin {
-  0% {
-    -webkit-transform: translateX(-50%) rotate(0deg);
-            transform: translateX(-50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translateX(-50%) rotate(360deg);
-            transform: translateX(-50%) rotate(360deg);
-  }
 }