@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/fabric.css CHANGED
@@ -684,6 +684,42 @@
684
684
  color: #f44336;
685
685
  }
686
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
+ }
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/fluent-dark-lite.css CHANGED
@@ -762,4 +762,41 @@
762
762
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
763
763
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
764
764
  color: #d13438;
765
+ }
766
+
767
+ .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
+ }
765
802
  }
package/styles/fluent-dark.css CHANGED
@@ -764,6 +764,42 @@
764
764
  color: #d13438;
765
765
  }
766
766
 
767
+ .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/fluent-lite.css CHANGED
@@ -762,4 +762,41 @@
762
762
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
763
763
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
764
764
  color: #d13438;
765
+ }
766
+
767
+ .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
+ }
765
802
  }
package/styles/fluent.css CHANGED
@@ -764,6 +764,42 @@
764
764
  color: #d13438;
765
765
  }
766
766
 
767
+ .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/fluent2-lite.css CHANGED
@@ -774,4 +774,41 @@
774
774
  }
775
775
  .e-query-builder .e-btn.e-round.e-small:disabled {
776
776
  background: var(--color-sf-content-bg-color-alt1) !important; /* stylelint-disable-line declaration-no-important */
777
+ }
778
+
779
+ .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
+ }
777
814
  }
package/styles/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
+ .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/highcontrast-light-lite.css CHANGED
@@ -776,4 +776,41 @@
776
776
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
777
777
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
778
778
  color: #000;
779
+ }
780
+
781
+ .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
+ }
779
816
  }
package/styles/highcontrast-light.css CHANGED
@@ -778,6 +778,42 @@
778
778
  color: #000;
779
779
  }
780
780
 
781
+ .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/highcontrast-lite.css CHANGED
@@ -804,4 +804,41 @@
804
804
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
805
805
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
806
806
  color: #fff;
807
+ }
808
+
809
+ .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
+ }
807
844
  }
package/styles/highcontrast.css CHANGED
@@ -806,6 +806,42 @@
806
806
  color: #fff;
807
807
  }
808
808
 
809
+ .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/material-dark-lite.css CHANGED
@@ -728,4 +728,41 @@
728
728
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
729
729
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
730
730
  color: #f44336;
731
+ }
732
+
733
+ .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
+ }
731
768
  }
package/styles/material-dark.css CHANGED
@@ -730,6 +730,42 @@
730
730
  color: #f44336;
731
731
  }
732
732
 
733
+ .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 {
package/styles/material-lite.css CHANGED
@@ -743,4 +743,41 @@
743
743
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
744
744
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
745
745
  color: #f44336;
746
+ }
747
+
748
+ .querybuilder-spinner::before {
749
+ content: "";
750
+ position: absolute;
751
+ left: 50%;
752
+ -webkit-transform: translateX(-50%);
753
+ transform: translateX(-50%);
754
+ width: 16px;
755
+ height: 16px;
756
+ border: 2px solid #7986cb;
757
+ border-top: 2px solid #3f51b5;
758
+ border-radius: 50%;
759
+ -webkit-animation: spin 1s linear infinite;
760
+ animation: spin 1s linear infinite;
761
+ }
762
+
763
+ @-webkit-keyframes spin {
764
+ 0% {
765
+ -webkit-transform: translateX(-50%) rotate(0deg);
766
+ transform: translateX(-50%) rotate(0deg);
767
+ }
768
+ 100% {
769
+ -webkit-transform: translateX(-50%) rotate(360deg);
770
+ transform: translateX(-50%) rotate(360deg);
771
+ }
772
+ }
773
+
774
+ @keyframes spin {
775
+ 0% {
776
+ -webkit-transform: translateX(-50%) rotate(0deg);
777
+ transform: translateX(-50%) rotate(0deg);
778
+ }
779
+ 100% {
780
+ -webkit-transform: translateX(-50%) rotate(360deg);
781
+ transform: translateX(-50%) rotate(360deg);
782
+ }
746
783
  }
package/styles/material.css CHANGED
@@ -745,6 +745,42 @@
745
745
  color: #f44336;
746
746
  }
747
747
 
748
+ .querybuilder-spinner::before {
749
+ content: "";
750
+ position: absolute;
751
+ left: 50%;
752
+ -webkit-transform: translateX(-50%);
753
+ transform: translateX(-50%);
754
+ width: 16px;
755
+ height: 16px;
756
+ border: 2px solid #7986cb;
757
+ border-top: 2px solid #3f51b5;
758
+ border-radius: 50%;
759
+ -webkit-animation: spin 1s linear infinite;
760
+ animation: spin 1s linear infinite;
761
+ }
762
+
763
+ @-webkit-keyframes spin {
764
+ 0% {
765
+ -webkit-transform: translateX(-50%) rotate(0deg);
766
+ transform: translateX(-50%) rotate(0deg);
767
+ }
768
+ 100% {
769
+ -webkit-transform: translateX(-50%) rotate(360deg);
770
+ transform: translateX(-50%) rotate(360deg);
771
+ }
772
+ }
773
+
774
+ @keyframes spin {
775
+ 0% {
776
+ -webkit-transform: translateX(-50%) rotate(0deg);
777
+ transform: translateX(-50%) rotate(0deg);
778
+ }
779
+ 100% {
780
+ -webkit-transform: translateX(-50%) rotate(360deg);
781
+ transform: translateX(-50%) rotate(360deg);
782
+ }
783
+ }
748
784
  .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
749
785
  .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
750
786
  .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {
package/styles/material3-dark-lite.css CHANGED
@@ -741,4 +741,41 @@
741
741
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
742
742
  .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
743
743
  color: rgba(var(--color-sf-error));
744
+ }
745
+
746
+ .querybuilder-spinner::before {
747
+ content: "";
748
+ position: absolute;
749
+ left: 50%;
750
+ -webkit-transform: translateX(-50%);
751
+ transform: translateX(-50%);
752
+ width: 16px;
753
+ height: 16px;
754
+ border: 2px solid var(--color-sf-primary-container);
755
+ border-top: 2px solid var(--color-sf-primary);
756
+ border-radius: 50%;
757
+ -webkit-animation: spin 1s linear infinite;
758
+ animation: spin 1s linear infinite;
759
+ }
760
+
761
+ @-webkit-keyframes spin {
762
+ 0% {
763
+ -webkit-transform: translateX(-50%) rotate(0deg);
764
+ transform: translateX(-50%) rotate(0deg);
765
+ }
766
+ 100% {
767
+ -webkit-transform: translateX(-50%) rotate(360deg);
768
+ transform: translateX(-50%) rotate(360deg);
769
+ }
770
+ }
771
+
772
+ @keyframes spin {
773
+ 0% {
774
+ -webkit-transform: translateX(-50%) rotate(0deg);
775
+ transform: translateX(-50%) rotate(0deg);
776
+ }
777
+ 100% {
778
+ -webkit-transform: translateX(-50%) rotate(360deg);
779
+ transform: translateX(-50%) rotate(360deg);
780
+ }
744
781
  }