@syncfusion/ej2-querybuilder 31.1.17 → 31.2.2

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 (105) 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 +43 -9
  5. package/dist/es6/ej2-querybuilder.es2015.js.map +1 -1
  6. package/dist/es6/ej2-querybuilder.es5.js +43 -9
  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 +14 -46
  12. package/src/query-builder/query-builder-model.d.ts +7 -0
  13. package/src/query-builder/query-builder.d.ts +7 -0
  14. package/src/query-builder/query-builder.js +43 -9
  15. package/styles/bds-lite.css +37 -0
  16. package/styles/bds.css +36 -0
  17. package/styles/bootstrap-dark-lite.css +37 -0
  18. package/styles/bootstrap-dark.css +36 -0
  19. package/styles/bootstrap-lite.css +37 -0
  20. package/styles/bootstrap.css +36 -0
  21. package/styles/bootstrap4-lite.css +45 -0
  22. package/styles/bootstrap4.css +44 -0
  23. package/styles/bootstrap5-dark-lite.css +37 -0
  24. package/styles/bootstrap5-dark.css +36 -0
  25. package/styles/bootstrap5-lite.css +37 -0
  26. package/styles/bootstrap5.3-lite.css +37 -0
  27. package/styles/bootstrap5.3.css +36 -0
  28. package/styles/bootstrap5.css +36 -0
  29. package/styles/fabric-dark-lite.css +37 -0
  30. package/styles/fabric-dark.css +36 -0
  31. package/styles/fabric-lite.css +37 -0
  32. package/styles/fabric.css +36 -0
  33. package/styles/fluent-dark-lite.css +37 -0
  34. package/styles/fluent-dark.css +36 -0
  35. package/styles/fluent-lite.css +37 -0
  36. package/styles/fluent.css +36 -0
  37. package/styles/fluent2-lite.css +37 -0
  38. package/styles/fluent2.css +36 -0
  39. package/styles/highcontrast-light-lite.css +37 -0
  40. package/styles/highcontrast-light.css +36 -0
  41. package/styles/highcontrast-lite.css +37 -0
  42. package/styles/highcontrast.css +36 -0
  43. package/styles/material-dark-lite.css +37 -0
  44. package/styles/material-dark.css +36 -0
  45. package/styles/material-lite.css +37 -0
  46. package/styles/material.css +36 -0
  47. package/styles/material3-dark-lite.css +37 -0
  48. package/styles/material3-dark.css +36 -0
  49. package/styles/material3-lite.css +37 -0
  50. package/styles/material3.css +36 -0
  51. package/styles/query-builder/_bds-definition.scss +2 -0
  52. package/styles/query-builder/_bootstrap-dark-definition.scss +2 -0
  53. package/styles/query-builder/_bootstrap-definition.scss +4 -0
  54. package/styles/query-builder/_bootstrap4-definition.scss +3 -0
  55. package/styles/query-builder/_bootstrap5-definition.scss +2 -0
  56. package/styles/query-builder/_bootstrap5.3-definition.scss +2 -0
  57. package/styles/query-builder/_fabric-dark-definition.scss +4 -0
  58. package/styles/query-builder/_fabric-definition.scss +4 -0
  59. package/styles/query-builder/_fluent-definition.scss +2 -0
  60. package/styles/query-builder/_fluent2-definition.scss +2 -0
  61. package/styles/query-builder/_fusionnew-definition.scss +2 -0
  62. package/styles/query-builder/_highcontrast-definition.scss +4 -0
  63. package/styles/query-builder/_highcontrast-light-definition.scss +4 -0
  64. package/styles/query-builder/_material-dark-definition.scss +3 -0
  65. package/styles/query-builder/_material-definition.scss +3 -0
  66. package/styles/query-builder/_material3-definition.scss +2 -0
  67. package/styles/query-builder/_tailwind-definition.scss +2 -0
  68. package/styles/query-builder/_tailwind3-definition.scss +2 -0
  69. package/styles/query-builder/_theme.scss +23 -0
  70. package/styles/query-builder/bds.css +36 -0
  71. package/styles/query-builder/bootstrap-dark.css +36 -0
  72. package/styles/query-builder/bootstrap.css +36 -0
  73. package/styles/query-builder/bootstrap4.css +44 -0
  74. package/styles/query-builder/bootstrap5-dark.css +36 -0
  75. package/styles/query-builder/bootstrap5.3.css +36 -0
  76. package/styles/query-builder/bootstrap5.css +36 -0
  77. package/styles/query-builder/fabric-dark.css +36 -0
  78. package/styles/query-builder/fabric.css +36 -0
  79. package/styles/query-builder/fluent-dark.css +36 -0
  80. package/styles/query-builder/fluent.css +36 -0
  81. package/styles/query-builder/fluent2.css +36 -0
  82. package/styles/query-builder/highcontrast-light.css +36 -0
  83. package/styles/query-builder/highcontrast.css +36 -0
  84. package/styles/query-builder/material-dark.css +36 -0
  85. package/styles/query-builder/material.css +36 -0
  86. package/styles/query-builder/material3-dark.css +36 -0
  87. package/styles/query-builder/material3.css +36 -0
  88. package/styles/query-builder/tailwind-dark.css +36 -0
  89. package/styles/query-builder/tailwind.css +36 -0
  90. package/styles/query-builder/tailwind3.css +36 -0
  91. package/styles/tailwind-dark-lite.css +37 -0
  92. package/styles/tailwind-dark.css +36 -0
  93. package/styles/tailwind-lite.css +37 -0
  94. package/styles/tailwind.css +36 -0
  95. package/styles/tailwind3-lite.css +37 -0
  96. package/styles/tailwind3.css +36 -0
  97. package/dist/ts/index.d.ts +0 -4
  98. package/dist/ts/index.ts +0 -4
  99. package/dist/ts/query-builder/index.d.ts +0 -6
  100. package/dist/ts/query-builder/index.ts +0 -6
  101. package/dist/ts/query-builder/query-builder-model.d.ts +0 -569
  102. package/dist/ts/query-builder/query-builder.d.ts +0 -1172
  103. package/dist/ts/query-builder/query-builder.ts +0 -7612
  104. package/dist/ts/query-builder/query-library.d.ts +0 -24
  105. package/dist/ts/query-builder/query-library.ts +0 -625
package/styles/query-builder/bds.css CHANGED
@@ -836,6 +836,42 @@
836
836
  color: #d92c20;
837
837
  }
838
838
 
839
+ .e-querybuilder-spinner::before {
840
+ content: "";
841
+ position: absolute;
842
+ left: 50%;
843
+ -webkit-transform: translateX(-50%);
844
+ transform: translateX(-50%);
845
+ width: 16px;
846
+ height: 16px;
847
+ border: 2px solid var(--color-sf-utility-primary-light);
848
+ border-top: 2px solid var(--color-sf-brand-primary);
849
+ border-radius: 50%;
850
+ -webkit-animation: spin 1s linear infinite;
851
+ animation: spin 1s linear infinite;
852
+ }
853
+
854
+ @-webkit-keyframes spin {
855
+ 0% {
856
+ -webkit-transform: translateX(-50%) rotate(0deg);
857
+ transform: translateX(-50%) rotate(0deg);
858
+ }
859
+ 100% {
860
+ -webkit-transform: translateX(-50%) rotate(360deg);
861
+ transform: translateX(-50%) rotate(360deg);
862
+ }
863
+ }
864
+
865
+ @keyframes spin {
866
+ 0% {
867
+ -webkit-transform: translateX(-50%) rotate(0deg);
868
+ transform: translateX(-50%) rotate(0deg);
869
+ }
870
+ 100% {
871
+ -webkit-transform: translateX(-50%) rotate(360deg);
872
+ transform: translateX(-50%) rotate(360deg);
873
+ }
874
+ }
839
875
  .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
840
876
  .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
841
877
  .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {
package/styles/query-builder/bootstrap-dark.css CHANGED
@@ -733,6 +733,42 @@
733
733
  color: #f44336;
734
734
  }
735
735
 
736
+ .e-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/query-builder/bootstrap.css CHANGED
@@ -718,6 +718,42 @@
718
718
  color: #f44336;
719
719
  }
720
720
 
721
+ .e-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/query-builder/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
+ .e-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/query-builder/bootstrap5-dark.css CHANGED
@@ -773,6 +773,42 @@
773
773
  color: #dc3545;
774
774
  }
775
775
 
776
+ .e-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/query-builder/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
+ .e-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/query-builder/bootstrap5.css CHANGED
@@ -773,6 +773,42 @@
773
773
  color: #dc3545;
774
774
  }
775
775
 
776
+ .e-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/query-builder/fabric-dark.css CHANGED
@@ -695,6 +695,42 @@
695
695
  color: #f44336;
696
696
  }
697
697
 
698
+ .e-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/query-builder/fabric.css CHANGED
@@ -684,6 +684,42 @@
684
684
  color: #f44336;
685
685
  }
686
686
 
687
+ .e-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
+ }
722
+ }
687
723
  .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
688
724
  .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
689
725
  .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {
package/styles/query-builder/fluent-dark.css CHANGED
@@ -764,6 +764,42 @@
764
764
  color: #d13438;
765
765
  }
766
766
 
767
+ .e-querybuilder-spinner::before {
768
+ content: "";
769
+ position: absolute;
770
+ left: 50%;
771
+ -webkit-transform: translateX(-50%);
772
+ transform: translateX(-50%);
773
+ width: 16px;
774
+ height: 16px;
775
+ border: 2px solid #005a9e;
776
+ border-top: 2px solid #0078d4;
777
+ border-radius: 50%;
778
+ -webkit-animation: spin 1s linear infinite;
779
+ animation: spin 1s linear infinite;
780
+ }
781
+
782
+ @-webkit-keyframes spin {
783
+ 0% {
784
+ -webkit-transform: translateX(-50%) rotate(0deg);
785
+ transform: translateX(-50%) rotate(0deg);
786
+ }
787
+ 100% {
788
+ -webkit-transform: translateX(-50%) rotate(360deg);
789
+ transform: translateX(-50%) rotate(360deg);
790
+ }
791
+ }
792
+
793
+ @keyframes spin {
794
+ 0% {
795
+ -webkit-transform: translateX(-50%) rotate(0deg);
796
+ transform: translateX(-50%) rotate(0deg);
797
+ }
798
+ 100% {
799
+ -webkit-transform: translateX(-50%) rotate(360deg);
800
+ transform: translateX(-50%) rotate(360deg);
801
+ }
802
+ }
767
803
  .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
768
804
  .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
769
805
  .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {
package/styles/query-builder/fluent.css CHANGED
@@ -764,6 +764,42 @@
764
764
  color: #d13438;
765
765
  }
766
766
 
767
+ .e-querybuilder-spinner::before {
768
+ content: "";
769
+ position: absolute;
770
+ left: 50%;
771
+ -webkit-transform: translateX(-50%);
772
+ transform: translateX(-50%);
773
+ width: 16px;
774
+ height: 16px;
775
+ border: 2px solid #c7e0f4;
776
+ border-top: 2px solid #0078d4;
777
+ border-radius: 50%;
778
+ -webkit-animation: spin 1s linear infinite;
779
+ animation: spin 1s linear infinite;
780
+ }
781
+
782
+ @-webkit-keyframes spin {
783
+ 0% {
784
+ -webkit-transform: translateX(-50%) rotate(0deg);
785
+ transform: translateX(-50%) rotate(0deg);
786
+ }
787
+ 100% {
788
+ -webkit-transform: translateX(-50%) rotate(360deg);
789
+ transform: translateX(-50%) rotate(360deg);
790
+ }
791
+ }
792
+
793
+ @keyframes spin {
794
+ 0% {
795
+ -webkit-transform: translateX(-50%) rotate(0deg);
796
+ transform: translateX(-50%) rotate(0deg);
797
+ }
798
+ 100% {
799
+ -webkit-transform: translateX(-50%) rotate(360deg);
800
+ transform: translateX(-50%) rotate(360deg);
801
+ }
802
+ }
767
803
  .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
768
804
  .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
769
805
  .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {
package/styles/query-builder/fluent2.css CHANGED
@@ -776,6 +776,42 @@
776
776
  background: var(--color-sf-content-bg-color-alt1) !important; /* stylelint-disable-line declaration-no-important */
777
777
  }
778
778
 
779
+ .e-querybuilder-spinner::before {
780
+ content: "";
781
+ position: absolute;
782
+ left: 50%;
783
+ -webkit-transform: translateX(-50%);
784
+ transform: translateX(-50%);
785
+ width: 16px;
786
+ height: 16px;
787
+ border: 2px solid var(--color-sf-primary-light);
788
+ border-top: 2px solid var(--color-sf-primary);
789
+ border-radius: 50%;
790
+ -webkit-animation: spin 1s linear infinite;
791
+ animation: spin 1s linear infinite;
792
+ }
793
+
794
+ @-webkit-keyframes spin {
795
+ 0% {
796
+ -webkit-transform: translateX(-50%) rotate(0deg);
797
+ transform: translateX(-50%) rotate(0deg);
798
+ }
799
+ 100% {
800
+ -webkit-transform: translateX(-50%) rotate(360deg);
801
+ transform: translateX(-50%) rotate(360deg);
802
+ }
803
+ }
804
+
805
+ @keyframes spin {
806
+ 0% {
807
+ -webkit-transform: translateX(-50%) rotate(0deg);
808
+ transform: translateX(-50%) rotate(0deg);
809
+ }
810
+ 100% {
811
+ -webkit-transform: translateX(-50%) rotate(360deg);
812
+ transform: translateX(-50%) rotate(360deg);
813
+ }
814
+ }
779
815
  .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
780
816
  .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
781
817
  .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {
package/styles/query-builder/highcontrast-light.css CHANGED
@@ -778,6 +778,42 @@
778
778
  color: #000;
779
779
  }
780
780
 
781
+ .e-querybuilder-spinner::before {
782
+ content: "";
783
+ position: absolute;
784
+ left: 50%;
785
+ -webkit-transform: translateX(-50%);
786
+ transform: translateX(-50%);
787
+ width: 16px;
788
+ height: 16px;
789
+ border: 2px solid #ffd739;
790
+ border-top: 2px solid #ffd939;
791
+ border-radius: 50%;
792
+ -webkit-animation: spin 1s linear infinite;
793
+ animation: spin 1s linear infinite;
794
+ }
795
+
796
+ @-webkit-keyframes spin {
797
+ 0% {
798
+ -webkit-transform: translateX(-50%) rotate(0deg);
799
+ transform: translateX(-50%) rotate(0deg);
800
+ }
801
+ 100% {
802
+ -webkit-transform: translateX(-50%) rotate(360deg);
803
+ transform: translateX(-50%) rotate(360deg);
804
+ }
805
+ }
806
+
807
+ @keyframes spin {
808
+ 0% {
809
+ -webkit-transform: translateX(-50%) rotate(0deg);
810
+ transform: translateX(-50%) rotate(0deg);
811
+ }
812
+ 100% {
813
+ -webkit-transform: translateX(-50%) rotate(360deg);
814
+ transform: translateX(-50%) rotate(360deg);
815
+ }
816
+ }
781
817
  .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
782
818
  .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
783
819
  .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {
package/styles/query-builder/highcontrast.css CHANGED
@@ -806,6 +806,42 @@
806
806
  color: #fff;
807
807
  }
808
808
 
809
+ .e-querybuilder-spinner::before {
810
+ content: "";
811
+ position: absolute;
812
+ left: 50%;
813
+ -webkit-transform: translateX(-50%);
814
+ transform: translateX(-50%);
815
+ width: 16px;
816
+ height: 16px;
817
+ border: 2px solid #ffd739;
818
+ border-top: 2px solid #ffd939;
819
+ border-radius: 50%;
820
+ -webkit-animation: spin 1s linear infinite;
821
+ animation: spin 1s linear infinite;
822
+ }
823
+
824
+ @-webkit-keyframes spin {
825
+ 0% {
826
+ -webkit-transform: translateX(-50%) rotate(0deg);
827
+ transform: translateX(-50%) rotate(0deg);
828
+ }
829
+ 100% {
830
+ -webkit-transform: translateX(-50%) rotate(360deg);
831
+ transform: translateX(-50%) rotate(360deg);
832
+ }
833
+ }
834
+
835
+ @keyframes spin {
836
+ 0% {
837
+ -webkit-transform: translateX(-50%) rotate(0deg);
838
+ transform: translateX(-50%) rotate(0deg);
839
+ }
840
+ 100% {
841
+ -webkit-transform: translateX(-50%) rotate(360deg);
842
+ transform: translateX(-50%) rotate(360deg);
843
+ }
844
+ }
809
845
  .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
810
846
  .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
811
847
  .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {
package/styles/query-builder/material-dark.css CHANGED
@@ -730,6 +730,42 @@
730
730
  color: #f44336;
731
731
  }
732
732
 
733
+ .e-querybuilder-spinner::before {
734
+ content: "";
735
+ position: absolute;
736
+ left: 50%;
737
+ -webkit-transform: translateX(-50%);
738
+ transform: translateX(-50%);
739
+ width: 16px;
740
+ height: 16px;
741
+ border: 2px solid #7986cb;
742
+ border-top: 2px solid #3f51b5;
743
+ border-radius: 50%;
744
+ -webkit-animation: spin 1s linear infinite;
745
+ animation: spin 1s linear infinite;
746
+ }
747
+
748
+ @-webkit-keyframes spin {
749
+ 0% {
750
+ -webkit-transform: translateX(-50%) rotate(0deg);
751
+ transform: translateX(-50%) rotate(0deg);
752
+ }
753
+ 100% {
754
+ -webkit-transform: translateX(-50%) rotate(360deg);
755
+ transform: translateX(-50%) rotate(360deg);
756
+ }
757
+ }
758
+
759
+ @keyframes spin {
760
+ 0% {
761
+ -webkit-transform: translateX(-50%) rotate(0deg);
762
+ transform: translateX(-50%) rotate(0deg);
763
+ }
764
+ 100% {
765
+ -webkit-transform: translateX(-50%) rotate(360deg);
766
+ transform: translateX(-50%) rotate(360deg);
767
+ }
768
+ }
733
769
  .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
734
770
  .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
735
771
  .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {