@syncfusion/ej2-querybuilder 31.2.15 → 32.1.19

package/styles/fluent2.scss

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

package/styles/highcontrast-light-lite.css

@@ -776,41 +776,4 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: #000;
-}
-
-.e-querybuilder-spinner::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  width: 16px;
-  height: 16px;
-  border: 2px solid #ffd739;
-  border-top: 2px solid #ffd939;
-  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/highcontrast-light-lite.scss

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

package/styles/highcontrast-light.css

@@ -778,42 +778,6 @@
   color: #000;
 }
 
-.e-querybuilder-spinner::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  width: 16px;
-  height: 16px;
-  border: 2px solid #ffd739;
-  border-top: 2px solid #ffd939;
-  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/highcontrast-light.scss

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

package/styles/highcontrast-lite.css

@@ -804,41 +804,4 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: #fff;
-}
-
-.e-querybuilder-spinner::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  width: 16px;
-  height: 16px;
-  border: 2px solid #ffd739;
-  border-top: 2px solid #ffd939;
-  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/highcontrast-lite.scss

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

package/styles/highcontrast.css

@@ -806,42 +806,6 @@
   color: #fff;
 }
 
-.e-querybuilder-spinner::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  width: 16px;
-  height: 16px;
-  border: 2px solid #ffd739;
-  border-top: 2px solid #ffd939;
-  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/highcontrast.scss

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

package/styles/material-dark-lite.css

@@ -728,41 +728,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 #7986cb;
-  border-top: 2px solid #3f51b5;
-  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/material-dark-lite.scss

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

package/styles/material-dark.css

@@ -730,42 +730,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 #7986cb;
-  border-top: 2px solid #3f51b5;
-  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/material-dark.scss

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

package/styles/material-lite.css

@@ -614,11 +614,9 @@
   width: 8px;
 }
 .e-query-builder.e-multi-connector .e-rule-list .e-group-container::before, .e-query-builder.e-multi-connector .e-rule-list .e-group-container::after {
-  left: -12px !important; /* stylelint-disable-line declaration-no-important */
   left: -12.8px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder.e-multi-connector .e-rule-list .e-btn-group::before, .e-query-builder.e-multi-connector .e-rule-list .e-btn-group::after {
-  left: -11.2px !important; /* stylelint-disable-line declaration-no-important */
   left: -12px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder.e-multi-connector .e-qb-toggle-btn {
@@ -743,41 +741,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 #7986cb;
-  border-top: 2px solid #3f51b5;
-  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/material-lite.scss

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

package/styles/material.css

@@ -614,11 +614,9 @@
   width: 8px;
 }
 .e-query-builder.e-multi-connector .e-rule-list .e-group-container::before, .e-query-builder.e-multi-connector .e-rule-list .e-group-container::after {
-  left: -12px !important; /* stylelint-disable-line declaration-no-important */
   left: -12.8px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder.e-multi-connector .e-rule-list .e-btn-group::before, .e-query-builder.e-multi-connector .e-rule-list .e-btn-group::after {
-  left: -11.2px !important; /* stylelint-disable-line declaration-no-important */
   left: -12px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder.e-multi-connector .e-qb-toggle-btn {
@@ -745,42 +743,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 #7986cb;
-  border-top: 2px solid #3f51b5;
-  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 {