@syncfusion/ej2-angular-grids 21.2.10 → 22.1.34

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 (120) hide show
  1. package/README.md +54 -121
  2. package/esm2020/src/grid/aggregate-columns.directive.mjs +1 -1
  3. package/esm2020/src/grid/grid.component.mjs +3 -3
  4. package/esm2020/src/pager/pager.component.mjs +4 -4
  5. package/fesm2015/syncfusion-ej2-angular-grids.mjs +5 -5
  6. package/fesm2015/syncfusion-ej2-angular-grids.mjs.map +1 -1
  7. package/fesm2020/syncfusion-ej2-angular-grids.mjs +5 -5
  8. package/fesm2020/syncfusion-ej2-angular-grids.mjs.map +1 -1
  9. package/license +10 -0
  10. package/package.json +19 -8
  11. package/schematics/utils/lib-details.ts +2 -2
  12. package/src/grid/aggregate-columns.directive.d.ts +1 -0
  13. package/src/grid/grid.component.d.ts +1 -3
  14. package/src/pager/pager.component.d.ts +1 -5
  15. package/styles/bootstrap-dark.css +55 -26
  16. package/styles/bootstrap.css +56 -27
  17. package/styles/bootstrap4.css +51 -22
  18. package/styles/bootstrap5-dark.css +64 -37
  19. package/styles/bootstrap5.css +64 -37
  20. package/styles/excel-filter/_bootstrap-dark-definition.scss +1 -0
  21. package/styles/excel-filter/_bootstrap-definition.scss +1 -0
  22. package/styles/excel-filter/_bootstrap4-definition.scss +1 -0
  23. package/styles/excel-filter/_bootstrap5-definition.scss +1 -0
  24. package/styles/excel-filter/_fabric-dark-definition.scss +1 -0
  25. package/styles/excel-filter/_fabric-definition.scss +1 -0
  26. package/styles/excel-filter/_fluent-definition.scss +1 -0
  27. package/styles/excel-filter/_fusionnew-definition.scss +1 -0
  28. package/styles/excel-filter/_highcontrast-definition.scss +1 -0
  29. package/styles/excel-filter/_highcontrast-light-definition.scss +1 -0
  30. package/styles/excel-filter/_layout.scss +84 -3
  31. package/styles/excel-filter/_material-dark-definition.scss +1 -0
  32. package/styles/excel-filter/_material-definition.scss +1 -0
  33. package/styles/excel-filter/_material3-dark-definition.scss +1 -0
  34. package/styles/excel-filter/_material3-definition.scss +73 -0
  35. package/styles/excel-filter/_tailwind-definition.scss +1 -0
  36. package/styles/excel-filter/_theme.scss +3 -0
  37. package/styles/excel-filter/icons/_material3-dark.scss +1 -0
  38. package/styles/excel-filter/material3-dark.css +668 -0
  39. package/styles/excel-filter/material3-dark.scss +18 -0
  40. package/styles/excel-filter/material3.css +724 -0
  41. package/styles/excel-filter/material3.scss +18 -0
  42. package/styles/fabric-dark.css +45 -16
  43. package/styles/fabric.css +54 -25
  44. package/styles/fluent-dark.css +48 -20
  45. package/styles/fluent.css +48 -20
  46. package/styles/grid/_bootstrap-dark-definition.scss +34 -18
  47. package/styles/grid/_bootstrap-definition.scss +36 -20
  48. package/styles/grid/_bootstrap4-definition.scss +31 -14
  49. package/styles/grid/_bootstrap5-definition.scss +42 -26
  50. package/styles/grid/_fabric-dark-definition.scss +26 -10
  51. package/styles/grid/_fabric-definition.scss +35 -19
  52. package/styles/grid/_fluent-definition.scss +28 -12
  53. package/styles/grid/_fusionnew-definition.scss +16 -0
  54. package/styles/grid/_highcontrast-definition.scss +24 -8
  55. package/styles/grid/_highcontrast-light-definition.scss +26 -10
  56. package/styles/grid/_layout.scss +394 -42
  57. package/styles/grid/_material-dark-definition.scss +24 -8
  58. package/styles/grid/_material-definition.scss +36 -20
  59. package/styles/grid/_material3-dark-definition.scss +1 -0
  60. package/styles/grid/_material3-definition.scss +629 -0
  61. package/styles/grid/_tailwind-definition.scss +26 -10
  62. package/styles/grid/_theme.scss +125 -16
  63. package/styles/grid/bootstrap-dark.css +55 -26
  64. package/styles/grid/bootstrap.css +56 -27
  65. package/styles/grid/bootstrap4.css +51 -22
  66. package/styles/grid/bootstrap5-dark.css +64 -37
  67. package/styles/grid/bootstrap5.css +64 -37
  68. package/styles/grid/fabric-dark.css +45 -16
  69. package/styles/grid/fabric.css +54 -25
  70. package/styles/grid/fluent-dark.css +48 -20
  71. package/styles/grid/fluent.css +48 -20
  72. package/styles/grid/highcontrast-light.css +43 -14
  73. package/styles/grid/highcontrast.css +40 -11
  74. package/styles/grid/icons/_material3-dark.scss +1 -0
  75. package/styles/grid/icons/_material3.scss +7 -4
  76. package/styles/grid/material-dark.css +45 -16
  77. package/styles/grid/material.css +57 -28
  78. package/styles/grid/material3-dark.css +4528 -0
  79. package/styles/grid/material3-dark.scss +22 -0
  80. package/styles/grid/material3.css +4584 -0
  81. package/styles/grid/material3.scss +22 -0
  82. package/styles/grid/tailwind-dark.css +46 -18
  83. package/styles/grid/tailwind.css +46 -18
  84. package/styles/highcontrast-light.css +43 -14
  85. package/styles/highcontrast.css +40 -11
  86. package/styles/material-dark.css +45 -16
  87. package/styles/material.css +57 -28
  88. package/styles/material3-dark.css +5000 -0
  89. package/styles/material3-dark.scss +4 -0
  90. package/styles/material3.css +5056 -0
  91. package/styles/material3.scss +4 -0
  92. package/styles/tailwind-dark.css +46 -18
  93. package/styles/tailwind.css +46 -18
  94. package/schematics/collection.json +0 -20
  95. package/schematics/generators/grid-default/index.d.ts +0 -3
  96. package/schematics/generators/grid-default/index.js +0 -8
  97. package/schematics/generators/grid-default/sample-details.d.ts +0 -5
  98. package/schematics/generators/grid-default/sample-details.js +0 -7
  99. package/schematics/generators/grid-default/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css +0 -5
  100. package/schematics/generators/grid-default/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html +0 -11
  101. package/schematics/generators/grid-default/schema.d.ts +0 -3
  102. package/schematics/generators/grid-default/schema.js +0 -2
  103. package/schematics/generators/grid-default/schema.json +0 -125
  104. package/schematics/generators/grid-feature/index.d.ts +0 -3
  105. package/schematics/generators/grid-feature/index.js +0 -8
  106. package/schematics/generators/grid-feature/sample-details.d.ts +0 -5
  107. package/schematics/generators/grid-feature/sample-details.js +0 -7
  108. package/schematics/generators/grid-feature/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css +0 -5
  109. package/schematics/generators/grid-feature/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html +0 -11
  110. package/schematics/generators/grid-feature/schema.d.ts +0 -3
  111. package/schematics/generators/grid-feature/schema.js +0 -2
  112. package/schematics/generators/grid-feature/schema.json +0 -125
  113. package/schematics/ng-add/index.d.ts +0 -3
  114. package/schematics/ng-add/index.js +0 -9
  115. package/schematics/ng-add/schema.d.ts +0 -13
  116. package/schematics/ng-add/schema.js +0 -2
  117. package/schematics/ng-add/schema.json +0 -34
  118. package/schematics/tsconfig.json +0 -25
  119. package/schematics/utils/lib-details.d.ts +0 -4
  120. package/schematics/utils/lib-details.js +0 -6
@@ -0,0 +1,724 @@
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
+ :root {
3
+ --color-sf-black: 0, 0, 0;
4
+ --color-sf-white: 255, 255, 255;
5
+ --color-sf-primary: 103, 80, 164;
6
+ --color-sf-primary-container: 234, 221, 255;
7
+ --color-sf-secondary: 98, 91, 113;
8
+ --color-sf-secondary-container: 232, 222, 248;
9
+ --color-sf-tertiary: 125, 82, 96;
10
+ --color-sf-tertiary-container: 255, 216, 228;
11
+ --color-sf-surface: 255, 255, 255;
12
+ --color-sf-surface-variant: 231, 224, 236;
13
+ --color-sf-background: var(--color-sf-surface);
14
+ --color-sf-on-primary: 255, 255, 255;
15
+ --color-sf-on-primary-container: 33, 0, 94;
16
+ --color-sf-on-secondary: 255, 255, 255;
17
+ --color-sf-on-secondary-container: 30, 25, 43;
18
+ --color-sf-on-tertiary: 255, 255, 255;
19
+ --color-sf-on-tertiary-containe: 55, 11, 30;
20
+ --color-sf-on-surface: 28, 27, 31;
21
+ --color-sf-on-surface-variant: 73, 69, 78;
22
+ --color-sf-on-background: 28, 27, 31;
23
+ --color-sf-outline: 121, 116, 126;
24
+ --color-sf-outline-variant: 196, 199, 197;
25
+ --color-sf-shadow: 0, 0, 0;
26
+ --color-sf-surface-tint-color: 103, 80, 164;
27
+ --color-sf-inverse-surface: 49, 48, 51;
28
+ --color-sf-inverse-on-surface: 244, 239, 244;
29
+ --color-sf-inverse-primary: 208, 188, 255;
30
+ --color-sf-scrim: 0, 0, 0;
31
+ --color-sf-error: 179, 38, 30;
32
+ --color-sf-error-container: 249, 222, 220;
33
+ --color-sf-on-error: 255, 250, 250;
34
+ --color-sf-on-error-container: 65, 14, 11;
35
+ --color-sf-success: 32, 81, 7;
36
+ --color-sf-success-container: 209, 255, 186;
37
+ --color-sf-on-success: 244, 255, 239;
38
+ --color-sf-on-success-container: 13, 39, 0;
39
+ --color-sf-info: 1, 87, 155;
40
+ --color-sf-info-container: 233, 245, 255;
41
+ --color-sf-on-info: 250, 253, 255;
42
+ --color-sf-on-info-container: 0, 51, 91;
43
+ --color-sf-warning: 145, 76, 0;
44
+ --color-sf-warning-container: 254, 236, 222;
45
+ --color-sf-on-warning: 255, 255, 255;
46
+ --color-sf-on-warning-container: 47, 21, 0;
47
+ --color-sf-spreadsheet-gridline: var(--color-sf-surface-variant);
48
+ --color-sf-shadow-focus-ring1: 0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgb(0, 0, 0);
49
+ --color-sf-diagram-palette-background: --color-sf-white;
50
+ --color-sf-success-text: 255, 255, 255;
51
+ --color-sf-warning-text: 255, 255, 255;
52
+ --color-sf-danger-text: 255, 255, 255;
53
+ --color-sf-info-text: 255, 255, 255;
54
+ --color-sf-content-text-color-alt2: var(--color-sf-on-secondary-container);
55
+ --color-sf-secondary-bg-color: var(--color-sf-surface);
56
+ }
57
+
58
+ .e-dark-mode {
59
+ --color-sf-black: 0, 0, 0;
60
+ --color-sf-white: 255, 255, 255;
61
+ --color-sf-primary: 208, 188, 255;
62
+ --color-sf-primary-container: 79, 55, 139;
63
+ --color-sf-secondary: 204, 194, 220;
64
+ --color-sf-secondary-container: 74, 68, 88;
65
+ --color-sf-tertiary: 239, 184, 200;
66
+ --color-sf-tertiary-container: 99, 59, 72;
67
+ --color-sf-surface: 28, 27, 31;
68
+ --color-sf-surface-variant: 28, 27, 31;
69
+ --color-sf-background: var(--color-sf-surface);
70
+ --color-sf-on-primary: 55, 30, 115;
71
+ --color-sf-on-primary-container: 234, 221, 255;
72
+ --color-sf-on-secondary: 51, 45, 65;
73
+ --color-sf-on-secondary-container: 232, 222, 248;
74
+ --color-sf-on-tertiary: 73, 37, 50;
75
+ --color-sf-on-tertiary-containe: 255, 216, 228;
76
+ --color-sf-on-surface: 230, 225, 229;
77
+ --color-sf-on-surface-variant: 202, 196, 208;
78
+ --color-sf-on-background: 230, 225, 229;
79
+ --color-sf-outline: 147, 143, 153;
80
+ --color-sf-outline-variant: 68, 71, 70;
81
+ --color-sf-shadow: 0, 0, 0;
82
+ --color-sf-surface-tint-color: 208, 188, 255;
83
+ --color-sf-inverse-surface: 230, 225, 229;
84
+ --color-sf-inverse-on-surface: 49, 48, 51;
85
+ --color-sf-inverse-primary: 103, 80, 164;
86
+ --color-sf-scrim: 0, 0, 0;
87
+ --color-sf-error: 242, 184, 181;
88
+ --color-sf-error-container: 140, 29, 24;
89
+ --color-sf-on-error: 96, 20, 16;
90
+ --color-sf-on-error-container: 249, 222, 220;
91
+ --color-sf-success: 83, 202, 23;
92
+ --color-sf-success-container: 22, 62, 2;
93
+ --color-sf-on-success: 13, 39, 0;
94
+ --color-sf-on-success-container: 183, 250, 150;
95
+ --color-sf-info: 71, 172, 251;
96
+ --color-sf-info-container: 0, 67, 120;
97
+ --color-sf-on-info: 0, 51, 91;
98
+ --color-sf-on-info-container: 173, 219, 255;
99
+ --color-sf-warning: 245, 180, 130;
100
+ --color-sf-warning-container: 123, 65, 0;
101
+ --color-sf-on-warning: 99, 52, 0;
102
+ --color-sf-on-warning-container: 255, 220, 193;
103
+ --color-sf-spreadsheet-gridline: 231, 224, 236;
104
+ --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
105
+ --color-sf-success-text: 0, 0, 0;
106
+ --color-sf-warning-text: 0, 0, 0;
107
+ --color-sf-info-text: 0, 0, 0;
108
+ --color-sf-danger-text: 0, 0, 0;
109
+ --color-sf-diagram-palette-background: var(--color-sf-inverse-surface);
110
+ --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
111
+ }
112
+
113
+ /* stylelint-disable property-no-vendor-prefix */
114
+ @keyframes e-input-ripple {
115
+ 100% {
116
+ opacity: 0;
117
+ transform: scale(4);
118
+ }
119
+ }
120
+ @keyframes slideTopUp {
121
+ from {
122
+ transform: translate3d(0, 0, 0) scale(1);
123
+ }
124
+ to {
125
+ transform: translate3d(0, 0, 0) scale(1);
126
+ }
127
+ }
128
+ .e-ddl.e-control-wrapper .e-ddl-icon::before {
129
+ transform: rotate(0deg);
130
+ transition: transform 300ms ease;
131
+ }
132
+
133
+ .e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
134
+ transform: rotate(180deg);
135
+ transition: transform 300ms ease;
136
+ }
137
+
138
+ .e-dropdownbase .e-list-item.e-active.e-hover {
139
+ color: rgba(var(--color-sf-on-surface));
140
+ }
141
+
142
+ .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
143
+ .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
144
+ .e-input-group:not(.e-disabled) .e-back-icon:active,
145
+ .e-input-group:not(.e-disabled) .e-back-icon:hover,
146
+ .e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active,
147
+ .e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover {
148
+ background: rgba(var(--color-sf-on-surface), 0.08);
149
+ }
150
+
151
+ .e-input-group .e-ddl-icon:not(:active)::after {
152
+ animation: none;
153
+ }
154
+
155
+ .e-ddl.e-popup {
156
+ border: 0;
157
+ box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
158
+ margin-top: 2px;
159
+ }
160
+
161
+ .e-popup.e-ddl .e-dropdownbase {
162
+ min-height: 26px;
163
+ border-radius: 4px;
164
+ }
165
+
166
+ .e-bigger .e-popup.e-ddl-device-filter .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
167
+ border-color: rgba(var(--color-sf-primary));
168
+ }
169
+
170
+ .e-bigger .e-popup.e-ddl-device-filter {
171
+ margin-top: 0;
172
+ }
173
+
174
+ .e-bigger .e-ddl-device .e-input-group,
175
+ .e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
176
+ background: rgba(0, 0, 0, 0.0001);
177
+ border-width: 0;
178
+ box-shadow: none;
179
+ margin-bottom: 0;
180
+ }
181
+
182
+ .e-bigger .e-ddl-device .e-input-group .e-back-icon,
183
+ .e-bigger .e-ddl-device .e-input-group input.e-input,
184
+ .e-bigger .e-ddl-device .e-input-group .e-clear-icon {
185
+ background: rgba(0, 0, 0, 0.0001);
186
+ }
187
+
188
+ .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
189
+ margin: 0 6px;
190
+ min-height: 30px;
191
+ min-width: 30px;
192
+ }
193
+
194
+ .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
195
+ .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
196
+ min-height: 38px;
197
+ min-width: 38px;
198
+ }
199
+
200
+ .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
201
+ .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
202
+ min-height: 22px;
203
+ min-width: 22px;
204
+ }
205
+
206
+ .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
207
+ .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
208
+ padding: 4px 16px 4px 0;
209
+ }
210
+
211
+ .e-input-group.e-ddl,
212
+ .e-input-group.e-ddl .e-input,
213
+ .e-input-group.e-ddl .e-ddl-icon {
214
+ background: transparent;
215
+ }
216
+
217
+ .e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
218
+ .e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) {
219
+ border-bottom-width: 0;
220
+ }
221
+
222
+ .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
223
+ .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
224
+ .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
225
+ .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
226
+ .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
227
+ .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
228
+ margin: 4px;
229
+ }
230
+
231
+ .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
232
+ .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
233
+ .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
234
+ .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
235
+ .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
236
+ .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
237
+ padding: 4px 5px 4px 12px;
238
+ }
239
+
240
+ .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
241
+ .e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
242
+ .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
243
+ .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
244
+ .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
245
+ .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
246
+ .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
247
+ min-height: 34px;
248
+ min-width: 34px;
249
+ }
250
+
251
+ .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
252
+ .e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
253
+ .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
254
+ .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
255
+ .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
256
+ .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
257
+ .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger.e-small .e-input-filter {
258
+ padding: 8px 16px;
259
+ }
260
+
261
+ .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
262
+ margin: 0 4px;
263
+ }
264
+
265
+ .e-ddl.e-popup.e-outline .e-filter-parent {
266
+ padding: 4px 8px;
267
+ }
268
+
269
+ /* stylelint-disable property-no-vendor-prefix */
270
+ @keyframes material-spinner-rotate {
271
+ 0% {
272
+ transform: rotate(0deg);
273
+ }
274
+ 100% {
275
+ transform: rotate(360deg);
276
+ }
277
+ }
278
+ @keyframes fabric-spinner-rotate {
279
+ 0% {
280
+ transform: rotate(0deg);
281
+ }
282
+ 100% {
283
+ transform: rotate(360deg);
284
+ }
285
+ }
286
+ /*! component icons */
287
+ .e-icon-check::before {
288
+ content: "\e774";
289
+ }
290
+
291
+ .e-excelfilter .e-icon-filter::before {
292
+ content: "\e7f7";
293
+ }
294
+ .e-excelfilter .e-excl-filter-icon::before {
295
+ content: "\e7f7";
296
+ }
297
+ .e-excelfilter .e-excl-filter-icon.e-filtered::before {
298
+ content: "\e72c";
299
+ }
300
+ .e-excelfilter .e-search-icon::before {
301
+ content: "\e754";
302
+ }
303
+ .e-excelfilter .e-ccsearch-icon::before {
304
+ content: "\e754";
305
+ }
306
+ .e-excelfilter .e-chkcancel-icon::before {
307
+ content: "\e7e7";
308
+ }
309
+ .e-excelfilter .e-sortascending::before {
310
+ content: "\e7a3";
311
+ }
312
+ .e-excelfilter .e-sortdescending::before {
313
+ content: "\e7b6";
314
+ }
315
+
316
+ /*! Excel-Filter layout */
317
+ .sf-grid .e-excelfilter .e-dlg-content {
318
+ overflow: visible;
319
+ padding: 0;
320
+ }
321
+ .sf-grid .e-excelfilter .e-searchcontainer {
322
+ padding: 14px;
323
+ padding-top: 4px;
324
+ }
325
+ .sf-grid .e-excelfilter .e-contextmenu-container.e-sfcontextmenu .e-ul .e-menu-item .e-menu-icon {
326
+ height: 26px;
327
+ line-height: 26px;
328
+ }
329
+ .sf-grid .e-excelfilter .e-contextmenu-container.e-sfcontextmenu .e-ul .e-menu-item:not(.e-separator) {
330
+ height: 26px;
331
+ line-height: 26px;
332
+ }
333
+ .sf-grid .e-excelfilter .e-searchbox {
334
+ padding-left: 0;
335
+ }
336
+ .sf-grid .e-excelfilter .e-contextmenu-container.e-sfcontextmenu .e-ul .e-separator {
337
+ height: auto;
338
+ }
339
+ .sf-grid .e-excelfilter .e-contextmenu-container.e-sfcontextmenu .e-ul {
340
+ position: absolute;
341
+ }
342
+ .sf-grid .e-excelfilter .e-contextmenu-container.e-sfcontextmenu {
343
+ display: inline-block;
344
+ position: relative;
345
+ width: 100%;
346
+ }
347
+
348
+ .sf-grid-dlg.e-xlflmenu .e-xlfl-radiodiv {
349
+ width: unset;
350
+ }
351
+
352
+ .e-xlflmenu {
353
+ min-height: 318px;
354
+ }
355
+ .e-xlflmenu .e-xlfl-dlgfields {
356
+ font-size: 14px;
357
+ padding-top: 12px;
358
+ }
359
+ .e-xlflmenu .e-xlfl-fieldset {
360
+ font-size: 11px;
361
+ padding-top: 12px;
362
+ }
363
+ .e-responsive-dialog .e-xlflmenu table.e-xlfl-table tr.e-xlfl-fields:nth-child(2) td.e-xlfl-optr, .e-responsive-dialog .e-xlflmenu table.e-xlfl-table tr.e-xlfl-fields:nth-child(2) td.e-xlfl-value {
364
+ padding-top: 16px;
365
+ }
366
+ .e-xlflmenu table.e-xlfl-table tr.e-xlfl-fields:nth-child(2) td.e-xlfl-optr,
367
+ .e-xlflmenu table.e-xlfl-table tr.e-xlfl-fields:nth-child(2) td.e-xlfl-value {
368
+ padding-top: 0;
369
+ }
370
+ .e-xlflmenu .e-xlfl-optr,
371
+ .e-xlflmenu .e-xlfl-value {
372
+ padding-top: 26px;
373
+ }
374
+ .e-xlflmenu .e-xlfl-radio,
375
+ .e-xlflmenu .e-xlfl-mtcase {
376
+ padding-top: 20px;
377
+ }
378
+ .e-xlflmenu .e-xlfl-optr:first-child {
379
+ padding-right: 11.25px;
380
+ }
381
+ .e-xlflmenu .e-xlfl-table {
382
+ border-spacing: 0;
383
+ table-layout: fixed;
384
+ width: 100%;
385
+ }
386
+ .e-xlflmenu .e-radio + label .e-label {
387
+ margin-top: 0;
388
+ padding-left: 25px;
389
+ padding-right: 9px;
390
+ }
391
+ .e-xlflmenu .e-xlfl-matchcasediv .e-checkbox-wrapper .e-frame + .e-label {
392
+ max-width: none;
393
+ }
394
+ .e-xlflmenu .e-checkbox-wrapper .e-frame + .e-label {
395
+ margin-bottom: 1px;
396
+ margin-left: 6px;
397
+ }
398
+ .e-xlflmenu .e-checkbox-wrapper .e-frame {
399
+ margin-bottom: 1px;
400
+ }
401
+ .e-xlflmenu .e-dlg-content {
402
+ padding-bottom: 5px;
403
+ }
404
+ .e-xlflmenu .e-xlfl-radiodiv {
405
+ width: 120px;
406
+ }
407
+ .e-xlflmenu .e-xlfl-matchcasediv {
408
+ margin-left: 0;
409
+ margin-right: 13px;
410
+ }
411
+
412
+ .e-xlfl-radio-or,
413
+ .e-xlfl-matchcasediv {
414
+ margin-left: 2px;
415
+ }
416
+
417
+ .e-emptyicon {
418
+ opacity: 0;
419
+ }
420
+
421
+ .e-xlflmenu.e-rtl .e-xlfl-optr {
422
+ padding-left: 11.25px;
423
+ padding-right: 0;
424
+ }
425
+ .e-xlflmenu.e-rtl .e-radio + label .e-label {
426
+ padding-left: 0;
427
+ padding-right: 25px;
428
+ }
429
+ .e-xlflmenu.e-rtl .e-xlfl-radio-or {
430
+ margin-left: 0;
431
+ margin-right: 13px;
432
+ }
433
+
434
+ .e-bigger .e-xlflmenu.e-rtl .e-radio + label .e-label {
435
+ padding-left: 0;
436
+ padding-right: 25px;
437
+ }
438
+
439
+ .e-bigger.e-responsive-dialog .e-xlflmenu .e-xlfl-dlgfields,
440
+ .e-bigger.e-responsive-dialog .e-xlflmenu .e-xlfl-fieldset {
441
+ font-weight: 500;
442
+ padding-top: 8px;
443
+ }
444
+ .e-bigger.e-responsive-dialog .e-xlflmenu .e-xlfl-optr:first-child {
445
+ width: 70%;
446
+ }
447
+ .e-bigger.e-responsive-dialog .e-xlflmenu .e-xlfl-radio,
448
+ .e-bigger.e-responsive-dialog .e-xlflmenu .e-xlfl-mtcase {
449
+ padding-top: 24px;
450
+ }
451
+ .e-bigger.e-responsive-dialog .e-xlflmenu .e-xlfl-optr,
452
+ .e-bigger.e-responsive-dialog .e-xlflmenu .e-xlfl-value {
453
+ padding-top: 24px;
454
+ }
455
+
456
+ .e-bigger .e-xlflmenu {
457
+ min-height: 362px;
458
+ }
459
+ .e-bigger .e-xlflmenu .e-xlfl-table {
460
+ border-spacing: 0;
461
+ width: 100%;
462
+ }
463
+ .e-bigger .e-xlflmenu .e-dlg-content {
464
+ padding-bottom: 10px;
465
+ }
466
+ .e-bigger .e-xlflmenu .e-radio + label .e-label {
467
+ padding-left: 27px;
468
+ padding-right: 6px;
469
+ }
470
+ .e-bigger .e-xlflmenu .e-checkbox-wrapper .e-frame + .e-label {
471
+ margin-left: 8px;
472
+ }
473
+ .e-bigger .e-xlflmenu .e-xlfl-radiodiv {
474
+ width: 141px;
475
+ }
476
+ .e-bigger .e-xlflmenu .e-xlfl-radio-or,
477
+ .e-bigger .e-xlflmenu .e-xlfl-matchcasediv {
478
+ margin-left: 18px;
479
+ }
480
+ .e-bigger .e-xlflmenu .e-xlfl-optr:first-child {
481
+ padding-right: 10px;
482
+ }
483
+ .e-bigger .e-xlflmenu .e-xlfl-dlgfields {
484
+ font-size: 16px;
485
+ }
486
+ .e-bigger .e-xlflmenu .e-xlfl-fieldset {
487
+ font-size: 12px;
488
+ padding-top: 22px;
489
+ }
490
+ .e-bigger .e-xlflmenu .e-xlfl-optr,
491
+ .e-bigger .e-xlflmenu .e-xlfl-value {
492
+ padding-top: 32px;
493
+ }
494
+ .e-bigger .e-xlflmenu .e-xlfl-radio,
495
+ .e-bigger .e-xlflmenu .e-xlfl-mtcase {
496
+ padding-top: 18px;
497
+ }
498
+
499
+ .e-bigger .e-excelfilter .e-xlflmenu,
500
+ .e-excelfilter.e-bigger .e-xlflmenu {
501
+ min-height: 362px;
502
+ }
503
+ .e-bigger .e-excelfilter .e-ftrchk,
504
+ .e-excelfilter.e-bigger .e-ftrchk {
505
+ padding-bottom: 9px;
506
+ padding-top: 9px;
507
+ }
508
+ .e-bigger .e-excelfilter .e-contextmenu-wrapper ul li,
509
+ .e-bigger .e-excelfilter .e-contextmenu-container ul li,
510
+ .e-excelfilter.e-bigger .e-contextmenu-wrapper ul li,
511
+ .e-excelfilter.e-bigger .e-contextmenu-container ul li {
512
+ height: 40px;
513
+ line-height: 40px;
514
+ }
515
+ .e-bigger .e-excelfilter .e-contextmenu-wrapper ul li .e-menu-icon,
516
+ .e-bigger .e-excelfilter .e-contextmenu-container ul li .e-menu-icon,
517
+ .e-excelfilter.e-bigger .e-contextmenu-wrapper ul li .e-menu-icon,
518
+ .e-excelfilter.e-bigger .e-contextmenu-container ul li .e-menu-icon {
519
+ height: 40px;
520
+ line-height: 40px;
521
+ margin-right: 13px;
522
+ }
523
+ .e-bigger .e-excelfilter .e-contextmenu-wrapper ul .e-menu-item .e-caret,
524
+ .e-excelfilter.e-bigger .e-contextmenu-wrapper ul .e-menu-item .e-caret {
525
+ height: 40px;
526
+ line-height: 40px;
527
+ font-size: 20px;
528
+ margin-right: 19px;
529
+ }
530
+ .e-bigger .e-excelfilter.e-rtl .e-contextmenu-wrapper ul .e-menu-item .e-caret,
531
+ .e-excelfilter.e-bigger.e-rtl .e-contextmenu-wrapper ul .e-menu-item .e-caret {
532
+ margin-left: 17px;
533
+ }
534
+ .e-bigger .e-excelfilter.e-dialog .e-dlg-content,
535
+ .e-excelfilter.e-bigger.e-dialog .e-dlg-content {
536
+ padding-left: 7px;
537
+ }
538
+ .e-bigger .e-excelfilter .e-ftrchk,
539
+ .e-bigger .e-excelfilter .e-searchbox,
540
+ .e-excelfilter.e-bigger .e-ftrchk,
541
+ .e-excelfilter.e-bigger .e-searchbox {
542
+ padding-left: 9px;
543
+ }
544
+ .e-bigger .e-excelfilter.e-rtl .e-dlg-content,
545
+ .e-excelfilter.e-bigger.e-rtl .e-dlg-content {
546
+ padding-left: 16px;
547
+ padding-right: 7px;
548
+ }
549
+ .e-bigger .e-excelfilter.e-rtl .e-ftrchk,
550
+ .e-bigger .e-excelfilter.e-rtl .e-searchbox,
551
+ .e-excelfilter.e-bigger.e-rtl .e-ftrchk,
552
+ .e-excelfilter.e-bigger.e-rtl .e-searchbox {
553
+ padding-left: 0;
554
+ padding-right: 9px;
555
+ }
556
+
557
+ .e-excelfilter .e-checkboxlist {
558
+ height: 200px;
559
+ margin-top: 5px;
560
+ min-height: 160px;
561
+ overflow-y: auto;
562
+ }
563
+ .e-excelfilter .e-checkboxfiltertext {
564
+ width: 150px;
565
+ word-break: normal;
566
+ }
567
+ .e-responsive-dialog .e-excelfilter .e-checkboxfiltertext {
568
+ width: 180px;
569
+ }
570
+ .e-excelfilter .e-chk-hidden {
571
+ -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
572
+ height: 1px;
573
+ opacity: 0;
574
+ width: 1px;
575
+ }
576
+ .e-excelfilter .e-contextmenu-wrapper,
577
+ .e-excelfilter .e-contextmenu-wrapper ul {
578
+ display: block;
579
+ }
580
+ .e-excelfilter .e-contextmenu-wrapper ul {
581
+ padding-bottom: 4px;
582
+ position: static;
583
+ }
584
+ .e-excelfilter .e-contextmenu-wrapper ul li,
585
+ .e-excelfilter .e-contextmenu-container ul li {
586
+ height: 36px;
587
+ line-height: 36px;
588
+ }
589
+ .e-excelfilter .e-contextmenu-wrapper ul li .e-menu-icon,
590
+ .e-excelfilter .e-contextmenu-container ul li .e-menu-icon {
591
+ height: 36px;
592
+ line-height: 36px;
593
+ margin-right: 10px;
594
+ }
595
+ .e-excelfilter.e-rtl .e-contextmenu-wrapper ul li .e-menu-icon {
596
+ margin-right: 0;
597
+ }
598
+ .e-excelfilter .e-contextmenu-wrapper ul .e-menu-item .e-caret {
599
+ height: 36px;
600
+ line-height: 36px;
601
+ }
602
+ .e-excelfilter .e-contextmenu-wrapper ul,
603
+ .e-excelfilter .e-contextmenu-container ul:not(.e-ul) {
604
+ border: 0;
605
+ border-radius: 5px 5px 0 0;
606
+ box-shadow: none;
607
+ max-width: 300px;
608
+ padding-bottom: 4px;
609
+ position: static;
610
+ }
611
+ .e-excelfilter .e-footer-content {
612
+ border-style: solid;
613
+ border-width: 1px 0 0;
614
+ }
615
+ .e-excelfilter .e-excel-menu {
616
+ z-index: 1000;
617
+ }
618
+ .e-excelfilter .e-dlg-content {
619
+ background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
620
+ padding-top: 0;
621
+ }
622
+ .e-excelfilter .e-contextmenu-wrapper,
623
+ .e-excelfilter .e-contextmenu-wrapper ul {
624
+ display: block;
625
+ }
626
+ .e-excelfilter .e-contextmenu-wrapper ul {
627
+ padding-bottom: 4px;
628
+ position: static;
629
+ }
630
+ .e-excelfilter .e-contextmenu-wrapper ul li .e-contextmenu-container ul li {
631
+ height: 36px;
632
+ line-height: 36px;
633
+ }
634
+ .e-excelfilter .e-contextmenu-wrapper ul li .e-menu-icon,
635
+ .e-excelfilter .e-contextmenu-container ul li .e-menu-icon {
636
+ height: 36px;
637
+ line-height: 36px;
638
+ margin-right: 10px;
639
+ }
640
+ .e-excelfilter.e-rtl .e-contextmenu-wrapper ul li .e-menu-icon {
641
+ margin-right: 0;
642
+ }
643
+ .e-excelfilter .e-contextmenu-wrapper ul .e-menu-item .e-caret {
644
+ height: 36px;
645
+ line-height: 36px;
646
+ margin-right: 17px;
647
+ }
648
+ .e-excelfilter.e-rtl .e-contextmenu-wrapper ul .e-menu-item .e-caret {
649
+ margin-left: 14px;
650
+ }
651
+ .e-excelfilter .e-footer-content {
652
+ border-style: solid;
653
+ border-width: 1px 0 0;
654
+ }
655
+ .e-excelfilter .e-excel-menu {
656
+ z-index: 1000;
657
+ }
658
+ .e-excelfilter .e-dlg-content {
659
+ padding-top: 12px;
660
+ }
661
+ .e-excelfilter .e-xlsel {
662
+ border: 0 solid;
663
+ position: absolute;
664
+ -webkit-user-select: none;
665
+ -ms-user-select: none;
666
+ user-select: none;
667
+ }
668
+ .e-excelfilter.e-dialog .e-dlg-content {
669
+ padding-left: 8px;
670
+ padding-right: 16px;
671
+ }
672
+ .e-excelfilter .e-ftrchk,
673
+ .e-excelfilter .e-searchbox {
674
+ padding-left: 8px;
675
+ }
676
+ .e-excelfilter.e-rtl .e-dlg-content {
677
+ padding-left: 14px;
678
+ padding-right: 8px;
679
+ }
680
+ .e-excelfilter.e-rtl .e-ftrchk,
681
+ .e-excelfilter.e-rtl .e-searchbox {
682
+ padding-left: 0;
683
+ padding-right: 8px;
684
+ }
685
+ .e-excelfilter .e-searchbox {
686
+ display: block;
687
+ }
688
+
689
+ .e-ftrchk {
690
+ padding-bottom: 8px;
691
+ padding-top: 8px;
692
+ }
693
+
694
+ .e-excel-menu.e-contextmenu.e-menu-parent {
695
+ max-height: 298px;
696
+ overflow-y: auto;
697
+ }
698
+
699
+ .e-bigger .e-excel-menu.e-contextmenu.e-menu-parent {
700
+ max-height: 355px;
701
+ }
702
+
703
+ /*! Excel-Filter theme */
704
+ .e-excelfilter .e-footer-content {
705
+ border-color: rgba(var(--color-sf-on-surface-variant), 0.12);
706
+ opacity: 1;
707
+ }
708
+ .e-excelfilter .e-filtered::before {
709
+ color: rgba(var(--color-sf-primary));
710
+ }
711
+ .e-excelfilter .e-dlg-content {
712
+ padding-bottom: 10px;
713
+ border-radius: 0;
714
+ }
715
+
716
+ li.e-separator.e-menu-item.e-excel-separator {
717
+ margin-bottom: 0;
718
+ margin-top: 0;
719
+ }
720
+
721
+ .e-xlsel {
722
+ background-color: rgba(var(--color-sf-primary));
723
+ border-color: rgba(var(--color-sf-primary));
724
+ }