@syncfusion/ej2-querybuilder 31.1.17 → 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 (94) 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 +30 -9
  5. package/dist/es6/ej2-querybuilder.es2015.js.map +1 -1
  6. package/dist/es6/ej2-querybuilder.es5.js +30 -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 +13 -45
  12. package/src/query-builder/query-builder.js +30 -9
  13. package/styles/bds-lite.css +37 -0
  14. package/styles/bds.css +36 -0
  15. package/styles/bootstrap-dark-lite.css +37 -0
  16. package/styles/bootstrap-dark.css +36 -0
  17. package/styles/bootstrap-lite.css +37 -0
  18. package/styles/bootstrap.css +36 -0
  19. package/styles/bootstrap4-lite.css +45 -0
  20. package/styles/bootstrap4.css +44 -0
  21. package/styles/bootstrap5-dark-lite.css +37 -0
  22. package/styles/bootstrap5-dark.css +36 -0
  23. package/styles/bootstrap5-lite.css +37 -0
  24. package/styles/bootstrap5.3-lite.css +37 -0
  25. package/styles/bootstrap5.3.css +36 -0
  26. package/styles/bootstrap5.css +36 -0
  27. package/styles/fabric-dark-lite.css +37 -0
  28. package/styles/fabric-dark.css +36 -0
  29. package/styles/fabric-lite.css +37 -0
  30. package/styles/fabric.css +36 -0
  31. package/styles/fluent-dark-lite.css +37 -0
  32. package/styles/fluent-dark.css +36 -0
  33. package/styles/fluent-lite.css +37 -0
  34. package/styles/fluent.css +36 -0
  35. package/styles/fluent2-lite.css +37 -0
  36. package/styles/fluent2.css +36 -0
  37. package/styles/highcontrast-light-lite.css +37 -0
  38. package/styles/highcontrast-light.css +36 -0
  39. package/styles/highcontrast-lite.css +37 -0
  40. package/styles/highcontrast.css +36 -0
  41. package/styles/material-dark-lite.css +37 -0
  42. package/styles/material-dark.css +36 -0
  43. package/styles/material-lite.css +37 -0
  44. package/styles/material.css +36 -0
  45. package/styles/material3-dark-lite.css +37 -0
  46. package/styles/material3-dark.css +36 -0
  47. package/styles/material3-lite.css +37 -0
  48. package/styles/material3.css +36 -0
  49. package/styles/query-builder/_bootstrap-dark-definition.scss +2 -0
  50. package/styles/query-builder/_bootstrap-definition.scss +2 -0
  51. package/styles/query-builder/_bootstrap4-definition.scss +1 -0
  52. package/styles/query-builder/_fabric-dark-definition.scss +2 -0
  53. package/styles/query-builder/_fabric-definition.scss +2 -0
  54. package/styles/query-builder/_highcontrast-definition.scss +2 -0
  55. package/styles/query-builder/_highcontrast-light-definition.scss +2 -0
  56. package/styles/query-builder/_material-dark-definition.scss +1 -0
  57. package/styles/query-builder/_material-definition.scss +1 -0
  58. package/styles/query-builder/_theme.scss +23 -0
  59. package/styles/query-builder/bds.css +36 -0
  60. package/styles/query-builder/bootstrap-dark.css +36 -0
  61. package/styles/query-builder/bootstrap.css +36 -0
  62. package/styles/query-builder/bootstrap4.css +44 -0
  63. package/styles/query-builder/bootstrap5-dark.css +36 -0
  64. package/styles/query-builder/bootstrap5.3.css +36 -0
  65. package/styles/query-builder/bootstrap5.css +36 -0
  66. package/styles/query-builder/fabric-dark.css +36 -0
  67. package/styles/query-builder/fabric.css +36 -0
  68. package/styles/query-builder/fluent-dark.css +36 -0
  69. package/styles/query-builder/fluent.css +36 -0
  70. package/styles/query-builder/fluent2.css +36 -0
  71. package/styles/query-builder/highcontrast-light.css +36 -0
  72. package/styles/query-builder/highcontrast.css +36 -0
  73. package/styles/query-builder/material-dark.css +36 -0
  74. package/styles/query-builder/material.css +36 -0
  75. package/styles/query-builder/material3-dark.css +36 -0
  76. package/styles/query-builder/material3.css +36 -0
  77. package/styles/query-builder/tailwind-dark.css +36 -0
  78. package/styles/query-builder/tailwind.css +36 -0
  79. package/styles/query-builder/tailwind3.css +36 -0
  80. package/styles/tailwind-dark-lite.css +37 -0
  81. package/styles/tailwind-dark.css +36 -0
  82. package/styles/tailwind-lite.css +37 -0
  83. package/styles/tailwind.css +36 -0
  84. package/styles/tailwind3-lite.css +37 -0
  85. package/styles/tailwind3.css +36 -0
  86. package/dist/ts/index.d.ts +0 -4
  87. package/dist/ts/index.ts +0 -4
  88. package/dist/ts/query-builder/index.d.ts +0 -6
  89. package/dist/ts/query-builder/index.ts +0 -6
  90. package/dist/ts/query-builder/query-builder-model.d.ts +0 -569
  91. package/dist/ts/query-builder/query-builder.d.ts +0 -1172
  92. package/dist/ts/query-builder/query-builder.ts +0 -7612
  93. package/dist/ts/query-builder/query-library.d.ts +0 -24
  94. package/dist/ts/query-builder/query-library.ts +0 -625
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
  }
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
  }