@syncfusion/ej2-querybuilder 31.2.16 → 32.1.19

package/styles/bootstrap5-dark-lite.scss

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

package/styles/bootstrap5-dark.css

@@ -773,42 +773,6 @@
   color: #dc3545;
 }
 
-.e-querybuilder-spinner::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgb(134, 182.5, 254);
-  border-top: 2px solid #0d6efd;
-  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/bootstrap5-dark.scss

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

package/styles/bootstrap5-lite.css

@@ -771,41 +771,4 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: #dc3545;
-}
-
-.e-querybuilder-spinner::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgb(134, 182.5, 254);
-  border-top: 2px solid #0d6efd;
-  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/bootstrap5-lite.scss

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

package/styles/bootstrap5.3-lite.css

@@ -2,8 +2,88 @@
 
 
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 .e-popup.e-ddl {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: none;
           box-shadow: none;
   margin-top: 3px;
@@ -184,7 +264,7 @@
 
 .e-query-builder {
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   height: auto;
   width: auto;
 }
@@ -239,28 +319,28 @@
   border-top: 2px solid var(--color-sf-primary) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-btn.e-btngroup-and-lbl.e-small.e-not {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-btn.e-btngroup-and-lbl.e-small.e-readonly-and {
-  border-bottom-left-radius: 4px;
-  border-top-left-radius: 4px;
+  border-bottom-left-radius: calc(var(--e-radius) * 0.25);
+  border-top-left-radius: calc(var(--e-radius) * 0.25);
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-btn.e-btngroup-or-lbl.e-small.e-readonly-or-not {
-  border-bottom-right-radius: 4px;
-  border-top-right-radius: 4px;
+  border-bottom-right-radius: calc(var(--e-radius) * 0.25);
+  border-top-right-radius: calc(var(--e-radius) * 0.25);
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-btn.e-btngroup-or-lbl.e-small.e-readonly-or {
-  border-bottom-left-radius: 4px;
-  border-top-left-radius: 4px;
+  border-bottom-left-radius: calc(var(--e-radius) * 0.25);
+  border-top-left-radius: calc(var(--e-radius) * 0.25);
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
-  border-bottom-right-radius: 4px;
+  border-bottom-right-radius: calc(var(--e-radius) * 0.25);
 }
 .e-query-builder.e-rtl .e-multiselect .e-qb-spinner .e-spinner-inner {
   left: 5px;
@@ -354,13 +434,13 @@
   margin-left: 12px;
 }
 .e-query-builder .e-group-header .e-qb-toggle.e-btn.e-small {
-  border-bottom-right-radius: 0;
-  border-radius: 4px;
-  border-top-right-radius: 0;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-radius: calc(var(--e-radius) * 0.25);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 .e-query-builder .e-group-header .e-qb-toggle.e-btn.e-small.e-not-readonly {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
   pointer-events: none;
 }
 .e-query-builder .e-group-header .e-qb-toggle.e-btn.e-small.e-readonly {
@@ -373,27 +453,27 @@
   display: inline-block;
 }
 .e-query-builder .e-group-header .e-btn.e-btngroup-and-lbl.e-small.e-not {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0);
 }
 .e-query-builder .e-group-header .e-btn.e-btngroup-and-lbl.e-small.e-readonly-and {
-  border-bottom-right-radius: 4px;
-  border-top-right-radius: 4px;
+  border-bottom-right-radius: calc(var(--e-radius) * 0.25);
+  border-top-right-radius: calc(var(--e-radius) * 0.25);
 }
 .e-query-builder .e-group-header .e-btn.e-btngroup-and-lbl.e-small.e-readonly {
   display: none;
 }
 .e-query-builder .e-group-header .e-btn.e-btngroup-or-lbl.e-small {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0);
 }
 .e-query-builder .e-group-header .e-btn.e-btngroup-or-lbl.e-small.e-readonly-or-not {
-  border-bottom-left-radius: 4px;
-  border-top-left-radius: 4px;
+  border-bottom-left-radius: calc(var(--e-radius) * 0.25);
+  border-top-left-radius: calc(var(--e-radius) * 0.25);
 }
 .e-query-builder .e-group-header .e-btn.e-btngroup-or-lbl.e-small.e-readonly-or {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0);
 }
 .e-query-builder .e-group-header .e-btn.e-btngroup-or-lbl.e-small.e-readonly {
   display: none;
@@ -439,7 +519,7 @@
 }
 .e-query-builder .e-rule-container {
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-query-builder .e-rule-list > .e-group-container {
   padding: 0;
@@ -460,12 +540,12 @@
 }
 .e-query-builder .e-group-body .e-rule-container.e-prev-joined-rule {
   border-bottom: 0;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
 }
 .e-query-builder .e-group-body .e-rule-container.e-joined-rule {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-top-left-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
   border-top-style: dotted;
   border-top-width: 1px;
   margin-top: 0;
@@ -579,7 +659,7 @@
 }
 .e-query-builder .e-summary-text {
   border-style: none;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 14px;
   line-height: 1.5em;
   padding: 12px;
@@ -608,12 +688,12 @@
   padding: 12px !important; /* stylelint-disable-line declaration-no-important */
   border: 1px solid;
   margin-top: 0;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-query-builder.e-multi-connector .e-rule-list > .e-group-container:first-child {
   padding: 12px !important; /* stylelint-disable-line declaration-no-important */
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-query-builder.e-multi-connector .e-group-container:not(:first-child)::before, .e-query-builder.e-multi-connector .e-rule-list > .e-group-container:first-child::before {
   height: calc(50% - 8px);
@@ -782,41 +862,4 @@
   color: var(--color-sf-icon-color) !important; /* stylelint-disable-line declaration-no-important */
   -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1) !important;
           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 */
-}
-
-.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-primary-light);
-  border-top: 2px solid var(--color-sf-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/bootstrap5.3-lite.scss

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