@syncfusion/ej2-querybuilder 30.2.6 → 31.1.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/dist/ej2-querybuilder.min.js +3 -3
  2. package/dist/ej2-querybuilder.umd.min.js +3 -3
  3. package/dist/ej2-querybuilder.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-querybuilder.es2015.js +256 -166
  5. package/dist/es6/ej2-querybuilder.es2015.js.map +1 -1
  6. package/dist/es6/ej2-querybuilder.es5.js +260 -169
  7. package/dist/es6/ej2-querybuilder.es5.js.map +1 -1
  8. package/dist/global/ej2-querybuilder.min.js +3 -3
  9. package/dist/global/ej2-querybuilder.min.js.map +1 -1
  10. package/dist/global/index.d.ts +2 -2
  11. package/package.json +7 -7
  12. package/src/query-builder/query-builder.d.ts +7 -0
  13. package/src/query-builder/query-builder.js +260 -168
  14. package/styles/bds-lite.css +37 -0
  15. package/styles/bds.css +36 -0
  16. package/styles/bootstrap-dark-lite.css +37 -0
  17. package/styles/bootstrap-dark.css +36 -0
  18. package/styles/bootstrap-lite.css +37 -0
  19. package/styles/bootstrap.css +36 -0
  20. package/styles/bootstrap4-lite.css +45 -0
  21. package/styles/bootstrap4.css +44 -0
  22. package/styles/bootstrap5-dark-lite.css +37 -0
  23. package/styles/bootstrap5-dark.css +36 -0
  24. package/styles/bootstrap5-lite.css +37 -0
  25. package/styles/bootstrap5.3-lite.css +37 -0
  26. package/styles/bootstrap5.3.css +36 -0
  27. package/styles/bootstrap5.css +36 -0
  28. package/styles/fabric-dark-lite.css +37 -0
  29. package/styles/fabric-dark.css +36 -0
  30. package/styles/fabric-lite.css +37 -0
  31. package/styles/fabric.css +36 -0
  32. package/styles/fluent-dark-lite.css +37 -0
  33. package/styles/fluent-dark.css +36 -0
  34. package/styles/fluent-lite.css +37 -0
  35. package/styles/fluent.css +36 -0
  36. package/styles/fluent2-lite.css +37 -0
  37. package/styles/fluent2.css +36 -0
  38. package/styles/highcontrast-light-lite.css +37 -0
  39. package/styles/highcontrast-light.css +36 -0
  40. package/styles/highcontrast-lite.css +37 -0
  41. package/styles/highcontrast.css +36 -0
  42. package/styles/material-dark-lite.css +37 -0
  43. package/styles/material-dark.css +36 -0
  44. package/styles/material-lite.css +37 -0
  45. package/styles/material.css +36 -0
  46. package/styles/material3-dark-lite.css +37 -0
  47. package/styles/material3-dark.css +36 -0
  48. package/styles/material3-lite.css +37 -0
  49. package/styles/material3.css +36 -0
  50. package/styles/query-builder/_bootstrap-dark-definition.scss +2 -0
  51. package/styles/query-builder/_bootstrap-definition.scss +2 -0
  52. package/styles/query-builder/_bootstrap4-definition.scss +1 -0
  53. package/styles/query-builder/_fabric-dark-definition.scss +2 -0
  54. package/styles/query-builder/_fabric-definition.scss +2 -0
  55. package/styles/query-builder/_highcontrast-definition.scss +2 -0
  56. package/styles/query-builder/_highcontrast-light-definition.scss +2 -0
  57. package/styles/query-builder/_material-dark-definition.scss +1 -0
  58. package/styles/query-builder/_material-definition.scss +1 -0
  59. package/styles/query-builder/_theme.scss +23 -0
  60. package/styles/query-builder/bds.css +36 -0
  61. package/styles/query-builder/bootstrap-dark.css +36 -0
  62. package/styles/query-builder/bootstrap.css +36 -0
  63. package/styles/query-builder/bootstrap4.css +44 -0
  64. package/styles/query-builder/bootstrap5-dark.css +36 -0
  65. package/styles/query-builder/bootstrap5.3.css +36 -0
  66. package/styles/query-builder/bootstrap5.css +36 -0
  67. package/styles/query-builder/fabric-dark.css +36 -0
  68. package/styles/query-builder/fabric.css +36 -0
  69. package/styles/query-builder/fluent-dark.css +36 -0
  70. package/styles/query-builder/fluent.css +36 -0
  71. package/styles/query-builder/fluent2.css +36 -0
  72. package/styles/query-builder/highcontrast-light.css +36 -0
  73. package/styles/query-builder/highcontrast.css +36 -0
  74. package/styles/query-builder/material-dark.css +36 -0
  75. package/styles/query-builder/material.css +36 -0
  76. package/styles/query-builder/material3-dark.css +36 -0
  77. package/styles/query-builder/material3.css +36 -0
  78. package/styles/query-builder/tailwind-dark.css +36 -0
  79. package/styles/query-builder/tailwind.css +36 -0
  80. package/styles/query-builder/tailwind3.css +36 -0
  81. package/styles/tailwind-dark-lite.css +37 -0
  82. package/styles/tailwind-dark.css +36 -0
  83. package/styles/tailwind-lite.css +37 -0
  84. package/styles/tailwind.css +36 -0
  85. package/styles/tailwind3-lite.css +37 -0
  86. package/styles/tailwind3.css +36 -0
package/styles/bootstrap-dark-lite.css CHANGED
@@ -731,4 +731,41 @@
731
731
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
732
732
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
733
733
  color: #f44336;
734
+ }
735
+
736
+ .querybuilder-spinner::before {
737
+ content: "";
738
+ position: absolute;
739
+ left: 50%;
740
+ -webkit-transform: translateX(-50%);
741
+ transform: translateX(-50%);
742
+ width: 16px;
743
+ height: 16px;
744
+ border: 2px solid rgb(189, 219.8, 255);
745
+ border-top: 2px solid #0070f0;
746
+ border-radius: 50%;
747
+ -webkit-animation: spin 1s linear infinite;
748
+ animation: spin 1s linear infinite;
749
+ }
750
+
751
+ @-webkit-keyframes spin {
752
+ 0% {
753
+ -webkit-transform: translateX(-50%) rotate(0deg);
754
+ transform: translateX(-50%) rotate(0deg);
755
+ }
756
+ 100% {
757
+ -webkit-transform: translateX(-50%) rotate(360deg);
758
+ transform: translateX(-50%) rotate(360deg);
759
+ }
760
+ }
761
+
762
+ @keyframes spin {
763
+ 0% {
764
+ -webkit-transform: translateX(-50%) rotate(0deg);
765
+ transform: translateX(-50%) rotate(0deg);
766
+ }
767
+ 100% {
768
+ -webkit-transform: translateX(-50%) rotate(360deg);
769
+ transform: translateX(-50%) rotate(360deg);
770
+ }
734
771
  }
package/styles/bootstrap-dark.css CHANGED
@@ -733,6 +733,42 @@
733
733
  color: #f44336;
734
734
  }
735
735
 
736
+ .querybuilder-spinner::before {
737
+ content: "";
738
+ position: absolute;
739
+ left: 50%;
740
+ -webkit-transform: translateX(-50%);
741
+ transform: translateX(-50%);
742
+ width: 16px;
743
+ height: 16px;
744
+ border: 2px solid rgb(189, 219.8, 255);
745
+ border-top: 2px solid #0070f0;
746
+ border-radius: 50%;
747
+ -webkit-animation: spin 1s linear infinite;
748
+ animation: spin 1s linear infinite;
749
+ }
750
+
751
+ @-webkit-keyframes spin {
752
+ 0% {
753
+ -webkit-transform: translateX(-50%) rotate(0deg);
754
+ transform: translateX(-50%) rotate(0deg);
755
+ }
756
+ 100% {
757
+ -webkit-transform: translateX(-50%) rotate(360deg);
758
+ transform: translateX(-50%) rotate(360deg);
759
+ }
760
+ }
761
+
762
+ @keyframes spin {
763
+ 0% {
764
+ -webkit-transform: translateX(-50%) rotate(0deg);
765
+ transform: translateX(-50%) rotate(0deg);
766
+ }
767
+ 100% {
768
+ -webkit-transform: translateX(-50%) rotate(360deg);
769
+ transform: translateX(-50%) rotate(360deg);
770
+ }
771
+ }
736
772
  .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
737
773
  .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
738
774
  .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {
package/styles/bootstrap-lite.css CHANGED
@@ -716,4 +716,41 @@
716
716
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
717
717
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
718
718
  color: #f44336;
719
+ }
720
+
721
+ .querybuilder-spinner::before {
722
+ content: "";
723
+ position: absolute;
724
+ left: 50%;
725
+ -webkit-transform: translateX(-50%);
726
+ transform: translateX(-50%);
727
+ width: 16px;
728
+ height: 16px;
729
+ border: 2px solid #5bc0de;
730
+ border-top: 2px solid #317ab9;
731
+ border-radius: 50%;
732
+ -webkit-animation: spin 1s linear infinite;
733
+ animation: spin 1s linear infinite;
734
+ }
735
+
736
+ @-webkit-keyframes spin {
737
+ 0% {
738
+ -webkit-transform: translateX(-50%) rotate(0deg);
739
+ transform: translateX(-50%) rotate(0deg);
740
+ }
741
+ 100% {
742
+ -webkit-transform: translateX(-50%) rotate(360deg);
743
+ transform: translateX(-50%) rotate(360deg);
744
+ }
745
+ }
746
+
747
+ @keyframes spin {
748
+ 0% {
749
+ -webkit-transform: translateX(-50%) rotate(0deg);
750
+ transform: translateX(-50%) rotate(0deg);
751
+ }
752
+ 100% {
753
+ -webkit-transform: translateX(-50%) rotate(360deg);
754
+ transform: translateX(-50%) rotate(360deg);
755
+ }
719
756
  }
package/styles/bootstrap.css CHANGED
@@ -718,6 +718,42 @@
718
718
  color: #f44336;
719
719
  }
720
720
 
721
+ .querybuilder-spinner::before {
722
+ content: "";
723
+ position: absolute;
724
+ left: 50%;
725
+ -webkit-transform: translateX(-50%);
726
+ transform: translateX(-50%);
727
+ width: 16px;
728
+ height: 16px;
729
+ border: 2px solid #5bc0de;
730
+ border-top: 2px solid #317ab9;
731
+ border-radius: 50%;
732
+ -webkit-animation: spin 1s linear infinite;
733
+ animation: spin 1s linear infinite;
734
+ }
735
+
736
+ @-webkit-keyframes spin {
737
+ 0% {
738
+ -webkit-transform: translateX(-50%) rotate(0deg);
739
+ transform: translateX(-50%) rotate(0deg);
740
+ }
741
+ 100% {
742
+ -webkit-transform: translateX(-50%) rotate(360deg);
743
+ transform: translateX(-50%) rotate(360deg);
744
+ }
745
+ }
746
+
747
+ @keyframes spin {
748
+ 0% {
749
+ -webkit-transform: translateX(-50%) rotate(0deg);
750
+ transform: translateX(-50%) rotate(0deg);
751
+ }
752
+ 100% {
753
+ -webkit-transform: translateX(-50%) rotate(360deg);
754
+ transform: translateX(-50%) rotate(360deg);
755
+ }
756
+ }
721
757
  .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
722
758
  .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
723
759
  .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {
package/styles/bootstrap4-lite.css CHANGED
@@ -79,6 +79,14 @@
79
79
  font-size: 12px;
80
80
  }
81
81
 
82
+ .e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
83
+ .e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
84
+ .e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
85
+ .e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
86
+ background: transparent;
87
+ color: #495057;
88
+ }
89
+
82
90
  .e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
83
91
  .e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
84
92
  font-size: 10px;
@@ -784,4 +792,41 @@
784
792
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
785
793
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
786
794
  color: #f44336;
795
+ }
796
+
797
+ .querybuilder-spinner::before {
798
+ content: "";
799
+ position: absolute;
800
+ left: 50%;
801
+ -webkit-transform: translateX(-50%);
802
+ transform: translateX(-50%);
803
+ width: 16px;
804
+ height: 16px;
805
+ border: 2px solid #f8f9fa;
806
+ border-top: 2px solid #007bff;
807
+ border-radius: 50%;
808
+ -webkit-animation: spin 1s linear infinite;
809
+ animation: spin 1s linear infinite;
810
+ }
811
+
812
+ @-webkit-keyframes spin {
813
+ 0% {
814
+ -webkit-transform: translateX(-50%) rotate(0deg);
815
+ transform: translateX(-50%) rotate(0deg);
816
+ }
817
+ 100% {
818
+ -webkit-transform: translateX(-50%) rotate(360deg);
819
+ transform: translateX(-50%) rotate(360deg);
820
+ }
821
+ }
822
+
823
+ @keyframes spin {
824
+ 0% {
825
+ -webkit-transform: translateX(-50%) rotate(0deg);
826
+ transform: translateX(-50%) rotate(0deg);
827
+ }
828
+ 100% {
829
+ -webkit-transform: translateX(-50%) rotate(360deg);
830
+ transform: translateX(-50%) rotate(360deg);
831
+ }
787
832
  }
package/styles/bootstrap4.css CHANGED
@@ -79,6 +79,14 @@
79
79
  font-size: 12px;
80
80
  }
81
81
 
82
+ .e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
83
+ .e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
84
+ .e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
85
+ .e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
86
+ background: transparent;
87
+ color: #495057;
88
+ }
89
+
82
90
  .e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
83
91
  .e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
84
92
  font-size: 10px;
@@ -786,6 +794,42 @@
786
794
  color: #f44336;
787
795
  }
788
796
 
797
+ .querybuilder-spinner::before {
798
+ content: "";
799
+ position: absolute;
800
+ left: 50%;
801
+ -webkit-transform: translateX(-50%);
802
+ transform: translateX(-50%);
803
+ width: 16px;
804
+ height: 16px;
805
+ border: 2px solid #f8f9fa;
806
+ border-top: 2px solid #007bff;
807
+ border-radius: 50%;
808
+ -webkit-animation: spin 1s linear infinite;
809
+ animation: spin 1s linear infinite;
810
+ }
811
+
812
+ @-webkit-keyframes spin {
813
+ 0% {
814
+ -webkit-transform: translateX(-50%) rotate(0deg);
815
+ transform: translateX(-50%) rotate(0deg);
816
+ }
817
+ 100% {
818
+ -webkit-transform: translateX(-50%) rotate(360deg);
819
+ transform: translateX(-50%) rotate(360deg);
820
+ }
821
+ }
822
+
823
+ @keyframes spin {
824
+ 0% {
825
+ -webkit-transform: translateX(-50%) rotate(0deg);
826
+ transform: translateX(-50%) rotate(0deg);
827
+ }
828
+ 100% {
829
+ -webkit-transform: translateX(-50%) rotate(360deg);
830
+ transform: translateX(-50%) rotate(360deg);
831
+ }
832
+ }
789
833
  .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
790
834
  .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
791
835
  .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {
package/styles/bootstrap5-dark-lite.css CHANGED
@@ -771,4 +771,41 @@
771
771
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
772
772
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
773
773
  color: #dc3545;
774
+ }
775
+
776
+ .querybuilder-spinner::before {
777
+ content: "";
778
+ position: absolute;
779
+ left: 50%;
780
+ -webkit-transform: translateX(-50%);
781
+ transform: translateX(-50%);
782
+ width: 16px;
783
+ height: 16px;
784
+ border: 2px solid rgb(134, 182.5, 254);
785
+ border-top: 2px solid #0d6efd;
786
+ border-radius: 50%;
787
+ -webkit-animation: spin 1s linear infinite;
788
+ animation: spin 1s linear infinite;
789
+ }
790
+
791
+ @-webkit-keyframes spin {
792
+ 0% {
793
+ -webkit-transform: translateX(-50%) rotate(0deg);
794
+ transform: translateX(-50%) rotate(0deg);
795
+ }
796
+ 100% {
797
+ -webkit-transform: translateX(-50%) rotate(360deg);
798
+ transform: translateX(-50%) rotate(360deg);
799
+ }
800
+ }
801
+
802
+ @keyframes spin {
803
+ 0% {
804
+ -webkit-transform: translateX(-50%) rotate(0deg);
805
+ transform: translateX(-50%) rotate(0deg);
806
+ }
807
+ 100% {
808
+ -webkit-transform: translateX(-50%) rotate(360deg);
809
+ transform: translateX(-50%) rotate(360deg);
810
+ }
774
811
  }
package/styles/bootstrap5-dark.css CHANGED
@@ -773,6 +773,42 @@
773
773
  color: #dc3545;
774
774
  }
775
775
 
776
+ .querybuilder-spinner::before {
777
+ content: "";
778
+ position: absolute;
779
+ left: 50%;
780
+ -webkit-transform: translateX(-50%);
781
+ transform: translateX(-50%);
782
+ width: 16px;
783
+ height: 16px;
784
+ border: 2px solid rgb(134, 182.5, 254);
785
+ border-top: 2px solid #0d6efd;
786
+ border-radius: 50%;
787
+ -webkit-animation: spin 1s linear infinite;
788
+ animation: spin 1s linear infinite;
789
+ }
790
+
791
+ @-webkit-keyframes spin {
792
+ 0% {
793
+ -webkit-transform: translateX(-50%) rotate(0deg);
794
+ transform: translateX(-50%) rotate(0deg);
795
+ }
796
+ 100% {
797
+ -webkit-transform: translateX(-50%) rotate(360deg);
798
+ transform: translateX(-50%) rotate(360deg);
799
+ }
800
+ }
801
+
802
+ @keyframes spin {
803
+ 0% {
804
+ -webkit-transform: translateX(-50%) rotate(0deg);
805
+ transform: translateX(-50%) rotate(0deg);
806
+ }
807
+ 100% {
808
+ -webkit-transform: translateX(-50%) rotate(360deg);
809
+ transform: translateX(-50%) rotate(360deg);
810
+ }
811
+ }
776
812
  .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
777
813
  .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
778
814
  .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {
package/styles/bootstrap5-lite.css CHANGED
@@ -771,4 +771,41 @@
771
771
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
772
772
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
773
773
  color: #dc3545;
774
+ }
775
+
776
+ .querybuilder-spinner::before {
777
+ content: "";
778
+ position: absolute;
779
+ left: 50%;
780
+ -webkit-transform: translateX(-50%);
781
+ transform: translateX(-50%);
782
+ width: 16px;
783
+ height: 16px;
784
+ border: 2px solid rgb(134, 182.5, 254);
785
+ border-top: 2px solid #0d6efd;
786
+ border-radius: 50%;
787
+ -webkit-animation: spin 1s linear infinite;
788
+ animation: spin 1s linear infinite;
789
+ }
790
+
791
+ @-webkit-keyframes spin {
792
+ 0% {
793
+ -webkit-transform: translateX(-50%) rotate(0deg);
794
+ transform: translateX(-50%) rotate(0deg);
795
+ }
796
+ 100% {
797
+ -webkit-transform: translateX(-50%) rotate(360deg);
798
+ transform: translateX(-50%) rotate(360deg);
799
+ }
800
+ }
801
+
802
+ @keyframes spin {
803
+ 0% {
804
+ -webkit-transform: translateX(-50%) rotate(0deg);
805
+ transform: translateX(-50%) rotate(0deg);
806
+ }
807
+ 100% {
808
+ -webkit-transform: translateX(-50%) rotate(360deg);
809
+ transform: translateX(-50%) rotate(360deg);
810
+ }
774
811
  }
package/styles/bootstrap5.3-lite.css CHANGED
@@ -782,4 +782,41 @@
782
782
  color: var(--color-sf-icon-color) !important; /* stylelint-disable-line declaration-no-important */
783
783
  -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1) !important;
784
784
  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 */
785
+ }
786
+
787
+ .querybuilder-spinner::before {
788
+ content: "";
789
+ position: absolute;
790
+ left: 50%;
791
+ -webkit-transform: translateX(-50%);
792
+ transform: translateX(-50%);
793
+ width: 16px;
794
+ height: 16px;
795
+ border: 2px solid var(--color-sf-primary-light);
796
+ border-top: 2px solid var(--color-sf-primary);
797
+ border-radius: 50%;
798
+ -webkit-animation: spin 1s linear infinite;
799
+ animation: spin 1s linear infinite;
800
+ }
801
+
802
+ @-webkit-keyframes spin {
803
+ 0% {
804
+ -webkit-transform: translateX(-50%) rotate(0deg);
805
+ transform: translateX(-50%) rotate(0deg);
806
+ }
807
+ 100% {
808
+ -webkit-transform: translateX(-50%) rotate(360deg);
809
+ transform: translateX(-50%) rotate(360deg);
810
+ }
811
+ }
812
+
813
+ @keyframes spin {
814
+ 0% {
815
+ -webkit-transform: translateX(-50%) rotate(0deg);
816
+ transform: translateX(-50%) rotate(0deg);
817
+ }
818
+ 100% {
819
+ -webkit-transform: translateX(-50%) rotate(360deg);
820
+ transform: translateX(-50%) rotate(360deg);
821
+ }
785
822
  }
package/styles/bootstrap5.3.css CHANGED
@@ -784,6 +784,42 @@
784
784
  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 */
785
785
  }
786
786
 
787
+ .querybuilder-spinner::before {
788
+ content: "";
789
+ position: absolute;
790
+ left: 50%;
791
+ -webkit-transform: translateX(-50%);
792
+ transform: translateX(-50%);
793
+ width: 16px;
794
+ height: 16px;
795
+ border: 2px solid var(--color-sf-primary-light);
796
+ border-top: 2px solid var(--color-sf-primary);
797
+ border-radius: 50%;
798
+ -webkit-animation: spin 1s linear infinite;
799
+ animation: spin 1s linear infinite;
800
+ }
801
+
802
+ @-webkit-keyframes spin {
803
+ 0% {
804
+ -webkit-transform: translateX(-50%) rotate(0deg);
805
+ transform: translateX(-50%) rotate(0deg);
806
+ }
807
+ 100% {
808
+ -webkit-transform: translateX(-50%) rotate(360deg);
809
+ transform: translateX(-50%) rotate(360deg);
810
+ }
811
+ }
812
+
813
+ @keyframes spin {
814
+ 0% {
815
+ -webkit-transform: translateX(-50%) rotate(0deg);
816
+ transform: translateX(-50%) rotate(0deg);
817
+ }
818
+ 100% {
819
+ -webkit-transform: translateX(-50%) rotate(360deg);
820
+ transform: translateX(-50%) rotate(360deg);
821
+ }
822
+ }
787
823
  .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
788
824
  .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
789
825
  .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {
package/styles/bootstrap5.css CHANGED
@@ -773,6 +773,42 @@
773
773
  color: #dc3545;
774
774
  }
775
775
 
776
+ .querybuilder-spinner::before {
777
+ content: "";
778
+ position: absolute;
779
+ left: 50%;
780
+ -webkit-transform: translateX(-50%);
781
+ transform: translateX(-50%);
782
+ width: 16px;
783
+ height: 16px;
784
+ border: 2px solid rgb(134, 182.5, 254);
785
+ border-top: 2px solid #0d6efd;
786
+ border-radius: 50%;
787
+ -webkit-animation: spin 1s linear infinite;
788
+ animation: spin 1s linear infinite;
789
+ }
790
+
791
+ @-webkit-keyframes spin {
792
+ 0% {
793
+ -webkit-transform: translateX(-50%) rotate(0deg);
794
+ transform: translateX(-50%) rotate(0deg);
795
+ }
796
+ 100% {
797
+ -webkit-transform: translateX(-50%) rotate(360deg);
798
+ transform: translateX(-50%) rotate(360deg);
799
+ }
800
+ }
801
+
802
+ @keyframes spin {
803
+ 0% {
804
+ -webkit-transform: translateX(-50%) rotate(0deg);
805
+ transform: translateX(-50%) rotate(0deg);
806
+ }
807
+ 100% {
808
+ -webkit-transform: translateX(-50%) rotate(360deg);
809
+ transform: translateX(-50%) rotate(360deg);
810
+ }
811
+ }
776
812
  .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
777
813
  .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
778
814
  .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {
package/styles/fabric-dark-lite.css CHANGED
@@ -693,4 +693,41 @@
693
693
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
694
694
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
695
695
  color: #f44336;
696
+ }
697
+
698
+ .querybuilder-spinner::before {
699
+ content: "";
700
+ position: absolute;
701
+ left: 50%;
702
+ -webkit-transform: translateX(-50%);
703
+ transform: translateX(-50%);
704
+ width: 16px;
705
+ height: 16px;
706
+ border: 2px solid hsl(205.8823529412, 100%, -9%);
707
+ border-top: 2px solid #0074cc;
708
+ border-radius: 50%;
709
+ -webkit-animation: spin 1s linear infinite;
710
+ animation: spin 1s linear infinite;
711
+ }
712
+
713
+ @-webkit-keyframes spin {
714
+ 0% {
715
+ -webkit-transform: translateX(-50%) rotate(0deg);
716
+ transform: translateX(-50%) rotate(0deg);
717
+ }
718
+ 100% {
719
+ -webkit-transform: translateX(-50%) rotate(360deg);
720
+ transform: translateX(-50%) rotate(360deg);
721
+ }
722
+ }
723
+
724
+ @keyframes spin {
725
+ 0% {
726
+ -webkit-transform: translateX(-50%) rotate(0deg);
727
+ transform: translateX(-50%) rotate(0deg);
728
+ }
729
+ 100% {
730
+ -webkit-transform: translateX(-50%) rotate(360deg);
731
+ transform: translateX(-50%) rotate(360deg);
732
+ }
696
733
  }
package/styles/fabric-dark.css CHANGED
@@ -695,6 +695,42 @@
695
695
  color: #f44336;
696
696
  }
697
697
 
698
+ .querybuilder-spinner::before {
699
+ content: "";
700
+ position: absolute;
701
+ left: 50%;
702
+ -webkit-transform: translateX(-50%);
703
+ transform: translateX(-50%);
704
+ width: 16px;
705
+ height: 16px;
706
+ border: 2px solid hsl(205.8823529412, 100%, -9%);
707
+ border-top: 2px solid #0074cc;
708
+ border-radius: 50%;
709
+ -webkit-animation: spin 1s linear infinite;
710
+ animation: spin 1s linear infinite;
711
+ }
712
+
713
+ @-webkit-keyframes spin {
714
+ 0% {
715
+ -webkit-transform: translateX(-50%) rotate(0deg);
716
+ transform: translateX(-50%) rotate(0deg);
717
+ }
718
+ 100% {
719
+ -webkit-transform: translateX(-50%) rotate(360deg);
720
+ transform: translateX(-50%) rotate(360deg);
721
+ }
722
+ }
723
+
724
+ @keyframes spin {
725
+ 0% {
726
+ -webkit-transform: translateX(-50%) rotate(0deg);
727
+ transform: translateX(-50%) rotate(0deg);
728
+ }
729
+ 100% {
730
+ -webkit-transform: translateX(-50%) rotate(360deg);
731
+ transform: translateX(-50%) rotate(360deg);
732
+ }
733
+ }
698
734
  .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
699
735
  .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
700
736
  .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {
package/styles/fabric-lite.css CHANGED
@@ -682,4 +682,41 @@
682
682
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
683
683
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
684
684
  color: #f44336;
685
+ }
686
+
687
+ .querybuilder-spinner::before {
688
+ content: "";
689
+ position: absolute;
690
+ left: 50%;
691
+ -webkit-transform: translateX(-50%);
692
+ transform: translateX(-50%);
693
+ width: 16px;
694
+ height: 16px;
695
+ border: 2px solid rgb(208.9, 234.7504672897, 255);
696
+ border-top: 2px solid #0078d6;
697
+ border-radius: 50%;
698
+ -webkit-animation: spin 1s linear infinite;
699
+ animation: spin 1s linear infinite;
700
+ }
701
+
702
+ @-webkit-keyframes spin {
703
+ 0% {
704
+ -webkit-transform: translateX(-50%) rotate(0deg);
705
+ transform: translateX(-50%) rotate(0deg);
706
+ }
707
+ 100% {
708
+ -webkit-transform: translateX(-50%) rotate(360deg);
709
+ transform: translateX(-50%) rotate(360deg);
710
+ }
711
+ }
712
+
713
+ @keyframes spin {
714
+ 0% {
715
+ -webkit-transform: translateX(-50%) rotate(0deg);
716
+ transform: translateX(-50%) rotate(0deg);
717
+ }
718
+ 100% {
719
+ -webkit-transform: translateX(-50%) rotate(360deg);
720
+ transform: translateX(-50%) rotate(360deg);
721
+ }
685
722
  }