@syncfusion/ej2-vue-pivotview 22.2.12 → 23.1.38

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 (61) hide show
  1. package/CHANGELOG.md +20 -69
  2. package/dist/ej2-vue-pivotview.umd.min.js +2 -2
  3. package/dist/global/ej2-vue-pivotview.min.js +3 -3
  4. package/package.json +9 -9
  5. package/src/pivotfieldlist/pivotfieldlist.component.d.ts +3 -1
  6. package/src/pivotview/pivotview.component.d.ts +3 -1
  7. package/styles/bootstrap-dark.css +64 -27
  8. package/styles/bootstrap.css +65 -28
  9. package/styles/bootstrap4.css +66 -27
  10. package/styles/bootstrap5-dark.css +64 -29
  11. package/styles/bootstrap5.css +64 -29
  12. package/styles/fabric-dark.css +65 -29
  13. package/styles/fabric.css +65 -27
  14. package/styles/fluent-dark.css +64 -28
  15. package/styles/fluent.css +64 -28
  16. package/styles/highcontrast-light.css +64 -27
  17. package/styles/highcontrast.css +64 -27
  18. package/styles/material-dark.css +63 -27
  19. package/styles/material.css +63 -27
  20. package/styles/material3-dark.css +63 -29
  21. package/styles/material3.css +63 -28
  22. package/styles/pivotfieldlist/bootstrap-dark.css +1 -7
  23. package/styles/pivotfieldlist/bootstrap.css +1 -7
  24. package/styles/pivotfieldlist/bootstrap4.css +1 -7
  25. package/styles/pivotfieldlist/bootstrap5-dark.css +1 -7
  26. package/styles/pivotfieldlist/bootstrap5.css +1 -7
  27. package/styles/pivotfieldlist/fabric-dark.css +2 -7
  28. package/styles/pivotfieldlist/fabric.css +2 -7
  29. package/styles/pivotfieldlist/fluent-dark.css +1 -7
  30. package/styles/pivotfieldlist/fluent.css +1 -7
  31. package/styles/pivotfieldlist/highcontrast-light.css +2 -7
  32. package/styles/pivotfieldlist/highcontrast.css +2 -7
  33. package/styles/pivotfieldlist/material-dark.css +1 -8
  34. package/styles/pivotfieldlist/material.css +1 -8
  35. package/styles/pivotfieldlist/material3-dark.css +1 -8
  36. package/styles/pivotfieldlist/material3-dark.scss +1 -1
  37. package/styles/pivotfieldlist/material3.css +1 -8
  38. package/styles/pivotfieldlist/material3.scss +1 -1
  39. package/styles/pivotfieldlist/tailwind-dark.css +1 -8
  40. package/styles/pivotfieldlist/tailwind.css +1 -8
  41. package/styles/pivotview/bootstrap-dark.css +63 -20
  42. package/styles/pivotview/bootstrap.css +64 -21
  43. package/styles/pivotview/bootstrap4.css +65 -20
  44. package/styles/pivotview/bootstrap5-dark.css +63 -22
  45. package/styles/pivotview/bootstrap5.css +63 -22
  46. package/styles/pivotview/fabric-dark.css +63 -22
  47. package/styles/pivotview/fabric.css +63 -20
  48. package/styles/pivotview/fluent-dark.css +63 -21
  49. package/styles/pivotview/fluent.css +63 -21
  50. package/styles/pivotview/highcontrast-light.css +62 -20
  51. package/styles/pivotview/highcontrast.css +62 -20
  52. package/styles/pivotview/material-dark.css +62 -20
  53. package/styles/pivotview/material.css +62 -20
  54. package/styles/pivotview/material3-dark.css +62 -21
  55. package/styles/pivotview/material3-dark.scss +1 -1
  56. package/styles/pivotview/material3.css +62 -21
  57. package/styles/pivotview/material3.scss +1 -1
  58. package/styles/pivotview/tailwind-dark.css +62 -22
  59. package/styles/pivotview/tailwind.css +62 -22
  60. package/styles/tailwind-dark.css +63 -30
  61. package/styles/tailwind.css +63 -30
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
2
1
  /*! component's theme wise override definitions and variables */
3
2
  /*! component's common definitions and variables */
4
3
  /*! component's theme wise override definitions and variables */
@@ -162,6 +161,8 @@
162
161
  /* stylelint-disable */
163
162
  /* stylelint-enable */
164
163
  /* stylelint-enable */
164
+ /* stylelint-disable */
165
+ /* stylelint-enable */
165
166
  }
166
167
  .e-pivotview .e-value-field-settings,
167
168
  .e-pivotview .e-member-editor-dialog,
@@ -627,6 +628,9 @@
627
628
  .e-pivotview .e-frozenscrollbar {
628
629
  background: #f5f5f5;
629
630
  }
631
+ .e-pivotview .e-headercontent .e-columnheader .e-headercell.e-leftfreeze {
632
+ -webkit-transform: translate3d(0, 0, 0);
633
+ }
630
634
 
631
635
  .e-pivotview-disable-icon {
632
636
  visibility: hidden;
@@ -901,7 +905,6 @@
901
905
 
902
906
  /*! PivotView theme */
903
907
  .e-pivotview {
904
- /* stylelint-enable */
905
908
  /* stylelint-enable */
906
909
  /* stylelint-disable */
907
910
  /* stylelint-enable */
@@ -912,6 +915,8 @@
912
915
  /* stylelint-enable */
913
916
  }
914
917
  .e-pivotview .e-pivotcell-container {
918
+ -ms-flex-align: center;
919
+ align-items: center;
915
920
  display: -ms-flexbox;
916
921
  display: flex;
917
922
  }
@@ -919,6 +924,7 @@
919
924
  .e-pivotview .e-pivotcell-container .e-headertext.e-cellvalue {
920
925
  overflow: hidden;
921
926
  text-overflow: ellipsis;
927
+ width: 100%;
922
928
  }
923
929
  .e-pivotview .e-pivotcell-container .e-sortfilterdiv.e-value-sort-icon {
924
930
  -ms-flex-align: center;
@@ -957,14 +963,23 @@
957
963
  -ms-user-select: none;
958
964
  user-select: none;
959
965
  }
966
+ .e-pivotview .e-grid .e-content-virtualtable {
967
+ overflow-x: auto;
968
+ scrollbar-width: none; /* firefox */
969
+ }
970
+ .e-pivotview .e-grid .e-content-virtualtable::-webkit-scrollbar {
971
+ display: none; /* safari, chrome and edge */
972
+ }
960
973
  .e-pivotview .e-gtot,
961
974
  .e-pivotview .e-gtot.e-rowsheader,
962
975
  .e-pivotview .e-gtot.e-columnsheader,
963
976
  .e-pivotview .e-grid .e-content,
964
- .e-pivotview .e-grid .e-gridheader,
965
- .e-pivotview .e-headercell {
977
+ .e-pivotview .e-grid .e-gridheader {
966
978
  background: #f5f5f5;
967
979
  }
980
+ .e-pivotview .e-headercell:not(.e-columnsheader) {
981
+ background: #f5f5f5 !important;
982
+ }
968
983
  .e-pivotview .e-grid .e-gridheader {
969
984
  border-bottom-width: 1px;
970
985
  }
@@ -1057,9 +1072,6 @@
1057
1072
  .e-pivotview .e-drop-indicator {
1058
1073
  display: block;
1059
1074
  }
1060
- .e-pivotview div.e-cellvalue {
1061
- margin-top: 5px;
1062
- }
1063
1075
  .e-pivotview .e-sortfilterdiv .e-value-sort-icon {
1064
1076
  float: right;
1065
1077
  }
@@ -1069,10 +1081,17 @@
1069
1081
  .e-pivotview .e-sortfilterdiv:not(.e-value-sort-icon) {
1070
1082
  display: none;
1071
1083
  }
1084
+ .e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv {
1085
+ margin: -15px 0 !important;
1086
+ }
1087
+ .e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
1088
+ margin: 0 !important;
1089
+ }
1072
1090
  .e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
1073
1091
  margin: 0 !important;
1074
1092
  margin-left: auto !important;
1075
- margin-top: 5px !important;
1093
+ padding-bottom: 0 !important;
1094
+ padding-top: 0 !important;
1076
1095
  }
1077
1096
  .e-pivotview .e-rowsheader .e-sortfilterdiv {
1078
1097
  margin: -8px 0 !important;
@@ -1107,9 +1126,26 @@
1107
1126
  }
1108
1127
  .e-pivotview.sf-pivotview .e-spinner-pane.e-pivot-outer-spinner .e-spinner-inner {
1109
1128
  visibility: hidden !important;
1129
+ /* stylelint-enable */
1130
+ }
1131
+ .e-pivotview.sf-pivotview .e-grid .e-pivot-content-loader {
1132
+ position: absolute;
1133
+ z-index: 10;
1134
+ color: #3f51b5;
1135
+ font-size: 20px;
1136
+ text-align: center;
1137
+ padding: 10%;
1138
+ pointer-events: none;
1139
+ }
1140
+ .e-pivotview.sf-pivotview .e-grid .e-pivot-content-loader.e-hide-loader {
1141
+ display: none;
1142
+ }
1143
+ .e-pivotview.sf-pivotview .e-grid .e-virtual-pivot-content {
1144
+ visibility: hidden;
1110
1145
  }
1111
1146
  .e-pivotview .e-grid .e-headercelldiv,
1112
1147
  .e-pivotview .e-grid .e-columnsheader {
1148
+ /* stylelint-disable */
1113
1149
  padding-left: 8px !important;
1114
1150
  }
1115
1151
  .e-pivotview .sf-grid .e-spinner-pane {
@@ -1130,6 +1166,14 @@
1130
1166
  border-left: 0;
1131
1167
  border-right-width: 1px;
1132
1168
  }
1169
+ .e-pivotview .e-leftfreeze.e-freezeleftborder {
1170
+ border-left-color: #e0e0e0 !important;
1171
+ border-right-color: #e0e0e0 !important;
1172
+ border-right-width: 1px !important;
1173
+ }
1174
+ .e-pivotview .e-leftfreeze.e-freezeleftborder:not(.e-gtot) {
1175
+ background: #fafafa;
1176
+ }
1133
1177
  .e-pivotview .e-stackedheadercelldiv {
1134
1178
  display: block;
1135
1179
  }
@@ -1137,7 +1181,6 @@
1137
1181
  .e-pivotview .e-stackedheadercelldiv.e-cellvalue {
1138
1182
  display: inline-block;
1139
1183
  padding-left: 12px !important;
1140
- margin-top: 5px;
1141
1184
  }
1142
1185
  .e-pivotview .e-headercelldiv.e-cellvalue {
1143
1186
  margin-left: 0px;
@@ -1482,6 +1525,11 @@
1482
1525
  .e-pivotview .e-group-columns {
1483
1526
  width: 100%;
1484
1527
  }
1528
+ .e-pivotview th.e-group-row .e-axis-row {
1529
+ display: inline-block;
1530
+ height: 100%;
1531
+ vertical-align: top;
1532
+ }
1485
1533
  .e-pivotview .e-group-row {
1486
1534
  padding: 0 !important;
1487
1535
  }
@@ -1634,17 +1682,13 @@
1634
1682
  cursor: pointer;
1635
1683
  display: inline-block;
1636
1684
  height: 18px;
1637
- margin-top: 5px;
1638
- margin-bottom: 0;
1639
1685
  text-align: center;
1640
1686
  width: 18px;
1641
1687
  }
1642
1688
  .e-pivotview th .e-expand,
1643
1689
  .e-pivotview th .e-collapse {
1644
1690
  font-size: 10px !important;
1645
- margin-left: 0px;
1646
- margin-top: 8px;
1647
- margin-bottom: 0;
1691
+ margin-left: 0;
1648
1692
  }
1649
1693
  .e-pivotview .e-expand::before {
1650
1694
  font-size: 10px;
@@ -2011,6 +2055,10 @@
2011
2055
  border-left-width: 1px;
2012
2056
  border-right: 0;
2013
2057
  }
2058
+ .e-pivotview.e-rtl .e-leftfreeze.e-freezeleftborder {
2059
+ border-left-width: 1px;
2060
+ border-right: 0;
2061
+ }
2014
2062
  .e-pivotview.e-rtl .e-rowsheader .e-cellvalue {
2015
2063
  margin-left: 0;
2016
2064
  margin-right: 7px;
@@ -2243,12 +2291,6 @@
2243
2291
  .e-bigger.e-pivotview .e-bigger .e-stackedheadercelldiv {
2244
2292
  padding-left: 16px !important;
2245
2293
  }
2246
- .e-bigger .e-pivotview th .e-expand,
2247
- .e-bigger .e-pivotview th .e-collapse,
2248
- .e-bigger.e-pivotview th .e-expand,
2249
- .e-bigger.e-pivotview th .e-collapse {
2250
- margin-top: 8px;
2251
- }
2252
2294
  .e-bigger .e-pivotview .e-grouping-bar,
2253
2295
  .e-bigger.e-pivotview .e-grouping-bar {
2254
2296
  /* stylelint-enable */
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
2
1
  :root {
3
2
  --color-sf-black: 0, 0, 0;
4
3
  --color-sf-white: 255, 255, 255;
@@ -214,6 +213,8 @@
214
213
  /* stylelint-disable */
215
214
  /* stylelint-enable */
216
215
  /* stylelint-enable */
216
+ /* stylelint-disable */
217
+ /* stylelint-enable */
217
218
  }
218
219
  .e-pivotview.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
219
220
  padding: 0;
@@ -698,6 +699,9 @@
698
699
  .e-pivotview .e-frozenscrollbar {
699
700
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
700
701
  }
702
+ .e-pivotview .e-headercontent .e-columnheader .e-headercell.e-leftfreeze {
703
+ -webkit-transform: translate3d(0, 0, 0);
704
+ }
701
705
 
702
706
  .e-pivotview-disable-icon {
703
707
  visibility: hidden;
@@ -972,7 +976,6 @@
972
976
 
973
977
  /*! PivotView theme */
974
978
  .e-pivotview {
975
- /* stylelint-enable */
976
979
  /* stylelint-enable */
977
980
  /* stylelint-disable */
978
981
  /* stylelint-enable */
@@ -983,6 +986,8 @@
983
986
  /* stylelint-enable */
984
987
  }
985
988
  .e-pivotview .e-pivotcell-container {
989
+ -ms-flex-align: center;
990
+ align-items: center;
986
991
  display: -ms-flexbox;
987
992
  display: flex;
988
993
  }
@@ -990,6 +995,7 @@
990
995
  .e-pivotview .e-pivotcell-container .e-headertext.e-cellvalue {
991
996
  overflow: hidden;
992
997
  text-overflow: ellipsis;
998
+ width: 100%;
993
999
  }
994
1000
  .e-pivotview .e-pivotcell-container .e-sortfilterdiv.e-value-sort-icon {
995
1001
  -ms-flex-align: center;
@@ -1028,14 +1034,23 @@
1028
1034
  -ms-user-select: none;
1029
1035
  user-select: none;
1030
1036
  }
1037
+ .e-pivotview .e-grid .e-content-virtualtable {
1038
+ overflow-x: auto;
1039
+ scrollbar-width: none; /* firefox */
1040
+ }
1041
+ .e-pivotview .e-grid .e-content-virtualtable::-webkit-scrollbar {
1042
+ display: none; /* safari, chrome and edge */
1043
+ }
1031
1044
  .e-pivotview .e-gtot,
1032
1045
  .e-pivotview .e-gtot.e-rowsheader,
1033
1046
  .e-pivotview .e-gtot.e-columnsheader,
1034
1047
  .e-pivotview .e-grid .e-content,
1035
- .e-pivotview .e-grid .e-gridheader,
1036
- .e-pivotview .e-headercell {
1048
+ .e-pivotview .e-grid .e-gridheader {
1037
1049
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
1038
1050
  }
1051
+ .e-pivotview .e-headercell:not(.e-columnsheader) {
1052
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)) !important;
1053
+ }
1039
1054
  .e-pivotview .e-grid .e-gridheader {
1040
1055
  border-bottom-width: 1px;
1041
1056
  }
@@ -1129,11 +1144,7 @@
1129
1144
  .e-pivotview .e-drop-indicator {
1130
1145
  display: block;
1131
1146
  }
1132
- .e-pivotview div.e-cellvalue {
1133
- margin-top: 0;
1134
- }
1135
1147
  .e-pivotview div div span.e-value-sort-icon {
1136
- /* stylelint-disable */
1137
1148
  padding: 0 !important;
1138
1149
  }
1139
1150
  .e-pivotview .e-sortfilterdiv .e-value-sort-icon {
@@ -1145,10 +1156,17 @@
1145
1156
  .e-pivotview .e-sortfilterdiv:not(.e-value-sort-icon) {
1146
1157
  display: none;
1147
1158
  }
1159
+ .e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv {
1160
+ margin: -15px 0 !important;
1161
+ }
1162
+ .e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
1163
+ margin: 0 !important;
1164
+ }
1148
1165
  .e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
1149
1166
  margin: 0 !important;
1150
1167
  margin-left: auto !important;
1151
- margin-top: 0 !important;
1168
+ padding-bottom: 0 !important;
1169
+ padding-top: 0 !important;
1152
1170
  }
1153
1171
  .e-pivotview .e-rowsheader .e-sortfilterdiv {
1154
1172
  margin: -8px 0 !important;
@@ -1183,9 +1201,26 @@
1183
1201
  }
1184
1202
  .e-pivotview.sf-pivotview .e-spinner-pane.e-pivot-outer-spinner .e-spinner-inner {
1185
1203
  visibility: hidden !important;
1204
+ /* stylelint-enable */
1205
+ }
1206
+ .e-pivotview.sf-pivotview .e-grid .e-pivot-content-loader {
1207
+ position: absolute;
1208
+ z-index: 10;
1209
+ color: rgba(var(--color-sf-on-surface-variant));
1210
+ font-size: 20px;
1211
+ text-align: center;
1212
+ padding: 10%;
1213
+ pointer-events: none;
1214
+ }
1215
+ .e-pivotview.sf-pivotview .e-grid .e-pivot-content-loader.e-hide-loader {
1216
+ display: none;
1217
+ }
1218
+ .e-pivotview.sf-pivotview .e-grid .e-virtual-pivot-content {
1219
+ visibility: hidden;
1186
1220
  }
1187
1221
  .e-pivotview .e-grid .e-headercelldiv,
1188
1222
  .e-pivotview .e-grid .e-columnsheader {
1223
+ /* stylelint-disable */
1189
1224
  padding-left: 8px !important;
1190
1225
  padding-top: 0px !important;
1191
1226
  padding-bottom: 0px !important;
@@ -1208,6 +1243,14 @@
1208
1243
  border-left: 0;
1209
1244
  border-right-width: 1px;
1210
1245
  }
1246
+ .e-pivotview .e-leftfreeze.e-freezeleftborder {
1247
+ border-left-color: rgba(var(--color-sf-outline-variant)) !important;
1248
+ border-right-color: rgba(var(--color-sf-outline-variant)) !important;
1249
+ border-right-width: 1px !important;
1250
+ }
1251
+ .e-pivotview .e-leftfreeze.e-freezeleftborder:not(.e-gtot) {
1252
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
1253
+ }
1211
1254
  .e-pivotview .e-stackedheadercelldiv {
1212
1255
  display: block;
1213
1256
  }
@@ -1215,7 +1258,6 @@
1215
1258
  .e-pivotview .e-stackedheadercelldiv.e-cellvalue {
1216
1259
  display: inline-block;
1217
1260
  padding-left: 12px !important;
1218
- margin-top: 5px;
1219
1261
  }
1220
1262
  .e-pivotview .e-stackedheadercelldiv {
1221
1263
  padding: 0 0 0 1px !important;
@@ -1556,6 +1598,11 @@
1556
1598
  .e-pivotview .e-group-columns {
1557
1599
  width: 100%;
1558
1600
  }
1601
+ .e-pivotview th.e-group-row .e-axis-row {
1602
+ display: inline-block;
1603
+ height: 100%;
1604
+ vertical-align: top;
1605
+ }
1559
1606
  .e-pivotview .e-group-row {
1560
1607
  padding: 0 !important;
1561
1608
  }
@@ -1708,8 +1755,6 @@
1708
1755
  cursor: pointer;
1709
1756
  display: inline-block;
1710
1757
  height: 18px;
1711
- margin-top: 3px;
1712
- margin-bottom: 3px;
1713
1758
  text-align: center;
1714
1759
  width: 18px;
1715
1760
  vertical-align: middle;
@@ -1717,9 +1762,7 @@
1717
1762
  .e-pivotview th .e-expand,
1718
1763
  .e-pivotview th .e-collapse {
1719
1764
  font-size: 10px !important;
1720
- margin-left: 0px;
1721
- margin-top: 3px;
1722
- margin-bottom: 3px;
1765
+ margin-left: 0;
1723
1766
  }
1724
1767
  .e-pivotview .e-expand::before {
1725
1768
  font-size: 16px;
@@ -2109,6 +2152,10 @@
2109
2152
  border-left-width: 1px;
2110
2153
  border-right: 0;
2111
2154
  }
2155
+ .e-pivotview.e-rtl .e-leftfreeze.e-freezeleftborder {
2156
+ border-left-width: 1px;
2157
+ border-right: 0;
2158
+ }
2112
2159
  .e-pivotview.e-rtl .e-rowsheader .e-cellvalue {
2113
2160
  margin-left: 0;
2114
2161
  margin-right: 7px;
@@ -2341,12 +2388,6 @@
2341
2388
  .e-bigger.e-pivotview .e-bigger .e-stackedheadercelldiv {
2342
2389
  padding-left: 16px !important;
2343
2390
  }
2344
- .e-bigger .e-pivotview th .e-expand,
2345
- .e-bigger .e-pivotview th .e-collapse,
2346
- .e-bigger.e-pivotview th .e-expand,
2347
- .e-bigger.e-pivotview th .e-collapse {
2348
- margin-top: 4px;
2349
- }
2350
2391
  .e-bigger .e-pivotview .e-grouping-bar,
2351
2392
  .e-bigger.e-pivotview .e-grouping-bar {
2352
2393
  /* stylelint-enable */
@@ -1,2 +1,2 @@
1
- @import 'ej2-base/styles/material3-dark-definition.scss';
1
+
2
2
  @import 'ej2-pivotview/styles/pivotview/material3-dark.scss';
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
2
1
  :root {
3
2
  --color-sf-black: 0, 0, 0;
4
3
  --color-sf-white: 255, 255, 255;
@@ -272,6 +271,8 @@
272
271
  /* stylelint-disable */
273
272
  /* stylelint-enable */
274
273
  /* stylelint-enable */
274
+ /* stylelint-disable */
275
+ /* stylelint-enable */
275
276
  }
276
277
  .e-pivotview.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
277
278
  padding: 0;
@@ -756,6 +757,9 @@
756
757
  .e-pivotview .e-frozenscrollbar {
757
758
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
758
759
  }
760
+ .e-pivotview .e-headercontent .e-columnheader .e-headercell.e-leftfreeze {
761
+ -webkit-transform: translate3d(0, 0, 0);
762
+ }
759
763
 
760
764
  .e-pivotview-disable-icon {
761
765
  visibility: hidden;
@@ -1030,7 +1034,6 @@
1030
1034
 
1031
1035
  /*! PivotView theme */
1032
1036
  .e-pivotview {
1033
- /* stylelint-enable */
1034
1037
  /* stylelint-enable */
1035
1038
  /* stylelint-disable */
1036
1039
  /* stylelint-enable */
@@ -1041,6 +1044,8 @@
1041
1044
  /* stylelint-enable */
1042
1045
  }
1043
1046
  .e-pivotview .e-pivotcell-container {
1047
+ -ms-flex-align: center;
1048
+ align-items: center;
1044
1049
  display: -ms-flexbox;
1045
1050
  display: flex;
1046
1051
  }
@@ -1048,6 +1053,7 @@
1048
1053
  .e-pivotview .e-pivotcell-container .e-headertext.e-cellvalue {
1049
1054
  overflow: hidden;
1050
1055
  text-overflow: ellipsis;
1056
+ width: 100%;
1051
1057
  }
1052
1058
  .e-pivotview .e-pivotcell-container .e-sortfilterdiv.e-value-sort-icon {
1053
1059
  -ms-flex-align: center;
@@ -1086,14 +1092,23 @@
1086
1092
  -ms-user-select: none;
1087
1093
  user-select: none;
1088
1094
  }
1095
+ .e-pivotview .e-grid .e-content-virtualtable {
1096
+ overflow-x: auto;
1097
+ scrollbar-width: none; /* firefox */
1098
+ }
1099
+ .e-pivotview .e-grid .e-content-virtualtable::-webkit-scrollbar {
1100
+ display: none; /* safari, chrome and edge */
1101
+ }
1089
1102
  .e-pivotview .e-gtot,
1090
1103
  .e-pivotview .e-gtot.e-rowsheader,
1091
1104
  .e-pivotview .e-gtot.e-columnsheader,
1092
1105
  .e-pivotview .e-grid .e-content,
1093
- .e-pivotview .e-grid .e-gridheader,
1094
- .e-pivotview .e-headercell {
1106
+ .e-pivotview .e-grid .e-gridheader {
1095
1107
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
1096
1108
  }
1109
+ .e-pivotview .e-headercell:not(.e-columnsheader) {
1110
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)) !important;
1111
+ }
1097
1112
  .e-pivotview .e-grid .e-gridheader {
1098
1113
  border-bottom-width: 1px;
1099
1114
  }
@@ -1187,11 +1202,7 @@
1187
1202
  .e-pivotview .e-drop-indicator {
1188
1203
  display: block;
1189
1204
  }
1190
- .e-pivotview div.e-cellvalue {
1191
- margin-top: 0;
1192
- }
1193
1205
  .e-pivotview div div span.e-value-sort-icon {
1194
- /* stylelint-disable */
1195
1206
  padding: 0 !important;
1196
1207
  }
1197
1208
  .e-pivotview .e-sortfilterdiv .e-value-sort-icon {
@@ -1203,10 +1214,17 @@
1203
1214
  .e-pivotview .e-sortfilterdiv:not(.e-value-sort-icon) {
1204
1215
  display: none;
1205
1216
  }
1217
+ .e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv {
1218
+ margin: -15px 0 !important;
1219
+ }
1220
+ .e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
1221
+ margin: 0 !important;
1222
+ }
1206
1223
  .e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv, .e-pivotview .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-pivotview .e-headercelldiv .e-sortfilterdiv, .e-pivotview .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
1207
1224
  margin: 0 !important;
1208
1225
  margin-left: auto !important;
1209
- margin-top: 0 !important;
1226
+ padding-bottom: 0 !important;
1227
+ padding-top: 0 !important;
1210
1228
  }
1211
1229
  .e-pivotview .e-rowsheader .e-sortfilterdiv {
1212
1230
  margin: -8px 0 !important;
@@ -1241,9 +1259,26 @@
1241
1259
  }
1242
1260
  .e-pivotview.sf-pivotview .e-spinner-pane.e-pivot-outer-spinner .e-spinner-inner {
1243
1261
  visibility: hidden !important;
1262
+ /* stylelint-enable */
1263
+ }
1264
+ .e-pivotview.sf-pivotview .e-grid .e-pivot-content-loader {
1265
+ position: absolute;
1266
+ z-index: 10;
1267
+ color: rgba(var(--color-sf-on-surface-variant));
1268
+ font-size: 20px;
1269
+ text-align: center;
1270
+ padding: 10%;
1271
+ pointer-events: none;
1272
+ }
1273
+ .e-pivotview.sf-pivotview .e-grid .e-pivot-content-loader.e-hide-loader {
1274
+ display: none;
1275
+ }
1276
+ .e-pivotview.sf-pivotview .e-grid .e-virtual-pivot-content {
1277
+ visibility: hidden;
1244
1278
  }
1245
1279
  .e-pivotview .e-grid .e-headercelldiv,
1246
1280
  .e-pivotview .e-grid .e-columnsheader {
1281
+ /* stylelint-disable */
1247
1282
  padding-left: 8px !important;
1248
1283
  padding-top: 0px !important;
1249
1284
  padding-bottom: 0px !important;
@@ -1266,6 +1301,14 @@
1266
1301
  border-left: 0;
1267
1302
  border-right-width: 1px;
1268
1303
  }
1304
+ .e-pivotview .e-leftfreeze.e-freezeleftborder {
1305
+ border-left-color: rgba(var(--color-sf-outline-variant)) !important;
1306
+ border-right-color: rgba(var(--color-sf-outline-variant)) !important;
1307
+ border-right-width: 1px !important;
1308
+ }
1309
+ .e-pivotview .e-leftfreeze.e-freezeleftborder:not(.e-gtot) {
1310
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
1311
+ }
1269
1312
  .e-pivotview .e-stackedheadercelldiv {
1270
1313
  display: block;
1271
1314
  }
@@ -1273,7 +1316,6 @@
1273
1316
  .e-pivotview .e-stackedheadercelldiv.e-cellvalue {
1274
1317
  display: inline-block;
1275
1318
  padding-left: 12px !important;
1276
- margin-top: 5px;
1277
1319
  }
1278
1320
  .e-pivotview .e-stackedheadercelldiv {
1279
1321
  padding: 0 0 0 1px !important;
@@ -1614,6 +1656,11 @@
1614
1656
  .e-pivotview .e-group-columns {
1615
1657
  width: 100%;
1616
1658
  }
1659
+ .e-pivotview th.e-group-row .e-axis-row {
1660
+ display: inline-block;
1661
+ height: 100%;
1662
+ vertical-align: top;
1663
+ }
1617
1664
  .e-pivotview .e-group-row {
1618
1665
  padding: 0 !important;
1619
1666
  }
@@ -1766,8 +1813,6 @@
1766
1813
  cursor: pointer;
1767
1814
  display: inline-block;
1768
1815
  height: 18px;
1769
- margin-top: 3px;
1770
- margin-bottom: 3px;
1771
1816
  text-align: center;
1772
1817
  width: 18px;
1773
1818
  vertical-align: middle;
@@ -1775,9 +1820,7 @@
1775
1820
  .e-pivotview th .e-expand,
1776
1821
  .e-pivotview th .e-collapse {
1777
1822
  font-size: 10px !important;
1778
- margin-left: 0px;
1779
- margin-top: 3px;
1780
- margin-bottom: 3px;
1823
+ margin-left: 0;
1781
1824
  }
1782
1825
  .e-pivotview .e-expand::before {
1783
1826
  font-size: 16px;
@@ -2167,6 +2210,10 @@
2167
2210
  border-left-width: 1px;
2168
2211
  border-right: 0;
2169
2212
  }
2213
+ .e-pivotview.e-rtl .e-leftfreeze.e-freezeleftborder {
2214
+ border-left-width: 1px;
2215
+ border-right: 0;
2216
+ }
2170
2217
  .e-pivotview.e-rtl .e-rowsheader .e-cellvalue {
2171
2218
  margin-left: 0;
2172
2219
  margin-right: 7px;
@@ -2399,12 +2446,6 @@
2399
2446
  .e-bigger.e-pivotview .e-bigger .e-stackedheadercelldiv {
2400
2447
  padding-left: 16px !important;
2401
2448
  }
2402
- .e-bigger .e-pivotview th .e-expand,
2403
- .e-bigger .e-pivotview th .e-collapse,
2404
- .e-bigger.e-pivotview th .e-expand,
2405
- .e-bigger.e-pivotview th .e-collapse {
2406
- margin-top: 4px;
2407
- }
2408
2449
  .e-bigger .e-pivotview .e-grouping-bar,
2409
2450
  .e-bigger.e-pivotview .e-grouping-bar {
2410
2451
  /* stylelint-enable */
@@ -1,2 +1,2 @@
1
- @import 'ej2-base/styles/material3-definition.scss';
1
+
2
2
  @import 'ej2-pivotview/styles/pivotview/material3.scss';