@syncfusion/ej2-querybuilder 31.2.16 → 32.1.21

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 31.2.16
+*  version : 32.1.21
 *  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.2.16",
+  "version": "32.1.21",
   "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.16",
-    "@syncfusion/ej2-calendars": "~31.2.16",
-    "@syncfusion/ej2-dropdowns": "~31.2.16",
-    "@syncfusion/ej2-inputs": "~31.2.15",
-    "@syncfusion/ej2-splitbuttons": "~31.2.12"
+    "@syncfusion/ej2-base": "~32.1.19",
+    "@syncfusion/ej2-buttons": "~32.1.21",
+    "@syncfusion/ej2-calendars": "~32.1.21",
+    "@syncfusion/ej2-dropdowns": "~32.1.21",
+    "@syncfusion/ej2-inputs": "~32.1.20",
+    "@syncfusion/ej2-splitbuttons": "~32.1.19"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -1358,7 +1358,7 @@ var QueryBuilder = /** @class */ (function (_super) {
     };
     QueryBuilder.prototype.renderToolTip = function (element) {
         var tooltip = new Tooltip({
-            content: this.l10n.getConstant('ValidationMessage'), isSticky: true,
+            content: this.l10n.getConstant('ValidationMessage'),
             position: 'BottomCenter', cssClass: 'e-querybuilder-error', afterClose: function () {
                 tooltip.destroy();
             }, beforeOpen: function (args) {

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);
-  }
 }

package/styles/bootstrap4-lite.scss

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

package/styles/bootstrap4.css

@@ -794,42 +794,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 #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);
-  }
-}
 .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 {