@syncfusion/ej2-querybuilder 31.2.15 → 32.1.19

package/styles/tailwind-dark.scss

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

package/styles/tailwind-lite.css

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

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

package/styles/tailwind.css

@@ -731,42 +731,6 @@
   color: #dc2626;
 }
 
-.e-querybuilder-spinner::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  width: 16px;
-  height: 16px;
-  border: 2px solid #818cf8;
-  border-top: 2px solid #4f46e5;
-  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/tailwind.scss

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

package/styles/tailwind3-lite.css

@@ -2,8 +2,78 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 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 */
+
+
 .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;
@@ -104,13 +174,13 @@
 }
 
 .e-multiselect .e-input-group-icon.e-ddl-icon {
-  border-radius: 0 2px 2px 0;
+  border-radius: calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.125) calc(var(--e-radius) * 0.125) calc(var(--e-radius) * 0);
   border-right-width: 0;
 }
 
 .e-multiselect.e-rtl .e-input-group-icon.e-ddl-icon {
   border-left-width: 0;
-  border-radius: 4px 0 0 4px;
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.25);
   border-right-width: 1px;
 }
 
@@ -180,7 +250,7 @@
 
 .e-query-builder {
   border: 1px solid;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   height: auto;
   width: auto;
 }
@@ -235,28 +305,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;
@@ -350,13 +420,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 {
@@ -369,27 +439,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;
@@ -435,7 +505,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;
@@ -456,12 +526,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;
@@ -574,11 +644,11 @@
   top: 0;
   border: none;
   right: 7px;
-  border-radius: 20px;
+  border-radius: calc(var(--e-radius) * 1.25);
 }
 .e-query-builder .e-summary-text {
   border-style: none;
-  font-family: "Inter", 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;
@@ -607,12 +677,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);
@@ -778,41 +848,4 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: var(--color-sf-danger-bg-color);
-}
-
-.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/tailwind3-lite.scss

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