@syncfusion/ej2-querybuilder 31.1.17 → 31.1.22

package/styles/highcontrast.css

@@ -806,6 +806,42 @@
   color: #fff;
 }
 
+.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/material-dark-lite.css

@@ -728,4 +728,41 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: #f44336;
+}
+
+.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.css

@@ -730,6 +730,42 @@
   color: #f44336;
 }
 
+.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-lite.css

@@ -743,4 +743,41 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: #f44336;
+}
+
+.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.css

@@ -745,6 +745,42 @@
   color: #f44336;
 }
 
+.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/material3-dark-lite.css

@@ -741,4 +741,41 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: rgba(var(--color-sf-error));
+}
+
+.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-container);
+  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/material3-dark.css

@@ -743,6 +743,42 @@
   color: rgba(var(--color-sf-error));
 }
 
+.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-container);
+  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);
+  }
+}
 .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/material3-lite.css

@@ -743,4 +743,41 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: rgba(var(--color-sf-error));
+}
+
+.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-container);
+  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/material3.css

@@ -745,6 +745,42 @@
   color: rgba(var(--color-sf-error));
 }
 
+.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-container);
+  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);
+  }
+}
 .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/query-builder/_bootstrap-dark-definition.scss

@@ -110,3 +110,5 @@ $qrybldr-drag-grp-list-heg: 29px !default;
 $qrybldr-drag-grp-big-list-heg: 35px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $grey-dark-font !default;
+$primary-light: $brand-primary-lighten-40;
+$primary: $brand-primary;

package/styles/query-builder/_bootstrap-definition.scss

@@ -110,3 +110,5 @@ $qrybldr-drag-grp-list-heg: 29px !default;
 $qrybldr-drag-grp-big-list-heg: 35px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $grey-light-font !default;
+$primary: $brand-primary;
+$primary-light: $brand-info;

package/styles/query-builder/_bootstrap4-definition.scss

@@ -112,3 +112,4 @@ $qrybldr-drag-grp-list-heg: 27px !default;
 $qrybldr-drag-grp-big-list-heg: 32px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 7px !default;
 $qryblr-drag-icon-color: $gray-700 !default;
+$primary-light: $gray-100;

package/styles/query-builder/_fabric-dark-definition.scss

@@ -110,3 +110,5 @@ $qrybldr-drag-grp-list-heg: 30px !default;
 $qrybldr-drag-grp-big-list-heg: 36px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $neutral-light-fontalt !default;
+$primary: $theme-primary !default;
+$primary-light: $theme-lighter !default;

package/styles/query-builder/_fabric-definition.scss

@@ -110,3 +110,5 @@ $qrybldr-drag-grp-list-heg: 30px !default;
 $qrybldr-drag-grp-big-list-heg: 36px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $neutral-light-font !default;
+$primary: $theme-primary !default;
+$primary-light: $theme-lighter !default;

package/styles/query-builder/_highcontrast-definition.scss

@@ -110,3 +110,5 @@ $qrybldr-drag-grp-list-heg: 32px !default;
 $qrybldr-drag-grp-big-list-heg: 37px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
 $qryblr-drag-icon-color: $content-font !default;
+$primary: #ffd939 !default;
+$primary-light: #ffd739 !default;

package/styles/query-builder/_highcontrast-light-definition.scss

@@ -110,3 +110,5 @@ $qrybldr-drag-grp-list-heg: 32px !default;
 $qrybldr-drag-grp-big-list-heg: 37px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
 $qryblr-drag-icon-color: $content-font !default;
+$primary: #ffd939 !default;
+$primary-light: #ffd739 !default;

package/styles/query-builder/_material-dark-definition.scss

@@ -111,3 +111,4 @@ $qrybldr-drag-grp-list-heg: 25px !default;
 $qrybldr-drag-grp-big-list-heg: 32px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $grey-dark-font !default;
+$primary-light: $primary-300 !default;

package/styles/query-builder/_material-definition.scss

@@ -110,3 +110,4 @@ $qrybldr-drag-grp-list-heg: 25px !default;
 $qrybldr-drag-grp-big-list-heg: 32px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: rgba($grey-black, .87) !default;
+$primary-light: $primary-300 !default;

package/styles/query-builder/_theme.scss

@@ -237,3 +237,26 @@
     }
   }
 }
+
+.querybuilder-spinner::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid $primary-light;
+  border-top: 2px solid $primary;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: translateX(-50%) rotate(0deg);
+  }
+
+  100% {
+    transform: translateX(-50%) rotate(360deg);
+  }
+}

package/styles/query-builder/bds.css

@@ -836,6 +836,42 @@
   color: #d92c20;
 }
 
+.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/query-builder/bootstrap-dark.css

@@ -733,6 +733,42 @@
   color: #f44336;
 }
 
+.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/query-builder/bootstrap.css

@@ -718,6 +718,42 @@
   color: #f44336;
 }
 
+.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/query-builder/bootstrap4.css

@@ -79,6 +79,14 @@
   font-size: 12px;
 }
 
+.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
+  background: transparent;
+  color: #495057;
+}
+
 .e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;
@@ -786,6 +794,42 @@
   color: #f44336;
 }
 
+.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 {