@syncfusion/ej2-lists 25.2.3 → 26.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/.eslintrc.json +3 -2
  2. package/dist/ej2-lists.min.js +2 -2
  3. package/dist/ej2-lists.umd.min.js +2 -2
  4. package/dist/ej2-lists.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-lists.es2015.js +255 -279
  6. package/dist/es6/ej2-lists.es2015.js.map +1 -1
  7. package/dist/es6/ej2-lists.es5.js +241 -265
  8. package/dist/es6/ej2-lists.es5.js.map +1 -1
  9. package/dist/global/ej2-lists.min.js +2 -2
  10. package/dist/global/ej2-lists.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +10 -10
  13. package/src/common/list-base.d.ts +61 -30
  14. package/src/common/list-base.js +167 -94
  15. package/src/list-view/list-view.d.ts +7 -9
  16. package/src/list-view/list-view.js +42 -75
  17. package/src/list-view/virtualization.d.ts +0 -1
  18. package/src/list-view/virtualization.js +10 -66
  19. package/src/sortable/sortable.d.ts +5 -0
  20. package/src/sortable/sortable.js +14 -7
  21. package/styles/bootstrap-dark.css +100 -122
  22. package/styles/bootstrap-dark.scss +8 -2
  23. package/styles/bootstrap.css +100 -122
  24. package/styles/bootstrap.scss +8 -2
  25. package/styles/bootstrap4.css +139 -161
  26. package/styles/bootstrap4.scss +8 -2
  27. package/styles/bootstrap5-dark.css +101 -125
  28. package/styles/bootstrap5-dark.scss +8 -2
  29. package/styles/bootstrap5.css +101 -125
  30. package/styles/bootstrap5.scss +8 -2
  31. package/styles/fabric-dark.css +100 -122
  32. package/styles/fabric-dark.scss +8 -2
  33. package/styles/fabric.css +100 -122
  34. package/styles/fabric.scss +8 -2
  35. package/styles/fluent-dark.css +143 -165
  36. package/styles/fluent-dark.scss +8 -2
  37. package/styles/fluent.css +143 -165
  38. package/styles/fluent.scss +8 -2
  39. package/styles/fluent2.css +1485 -0
  40. package/styles/fluent2.scss +8 -0
  41. package/styles/highcontrast-light.css +100 -122
  42. package/styles/highcontrast-light.scss +8 -2
  43. package/styles/highcontrast.css +100 -122
  44. package/styles/highcontrast.scss +8 -2
  45. package/styles/list-view/_bootstrap4-definition.scss +5 -0
  46. package/styles/list-view/_bootstrap5.3-definition.scss +132 -0
  47. package/styles/list-view/_fluent2-definition.scss +132 -0
  48. package/styles/list-view/_layout.scss +377 -393
  49. package/styles/list-view/_material3-definition.scss +0 -7
  50. package/styles/list-view/_theme.scss +85 -96
  51. package/styles/list-view/bootstrap-dark.css +97 -121
  52. package/styles/list-view/bootstrap.css +97 -121
  53. package/styles/list-view/bootstrap4.css +136 -160
  54. package/styles/list-view/bootstrap5-dark.css +98 -124
  55. package/styles/list-view/bootstrap5.css +98 -124
  56. package/styles/list-view/fabric-dark.css +97 -121
  57. package/styles/list-view/fabric.css +97 -121
  58. package/styles/list-view/fluent-dark.css +140 -164
  59. package/styles/list-view/fluent.css +140 -164
  60. package/styles/list-view/fluent2.css +1455 -0
  61. package/styles/list-view/fluent2.scss +5 -0
  62. package/styles/list-view/highcontrast-light.css +97 -121
  63. package/styles/list-view/highcontrast.css +97 -121
  64. package/styles/list-view/icons/_bootstrap5.3.scss +8 -0
  65. package/styles/list-view/icons/_fluent2.scss +10 -0
  66. package/styles/list-view/material-dark.css +97 -121
  67. package/styles/list-view/material.css +97 -121
  68. package/styles/list-view/material3-dark.css +113 -137
  69. package/styles/list-view/material3.css +113 -137
  70. package/styles/list-view/tailwind-dark.css +207 -235
  71. package/styles/list-view/tailwind.css +207 -235
  72. package/styles/material-dark.css +100 -122
  73. package/styles/material-dark.scss +8 -2
  74. package/styles/material.css +100 -122
  75. package/styles/material.scss +8 -2
  76. package/styles/material3-dark.css +116 -138
  77. package/styles/material3-dark.scss +8 -2
  78. package/styles/material3.css +116 -138
  79. package/styles/material3.scss +8 -2
  80. package/styles/sortable/_bootstrap5.3-definition.scss +1 -0
  81. package/styles/sortable/_fluent2-definition.scss +1 -0
  82. package/styles/sortable/bootstrap-dark.css +3 -1
  83. package/styles/sortable/bootstrap.css +3 -1
  84. package/styles/sortable/bootstrap4.css +3 -1
  85. package/styles/sortable/bootstrap5-dark.css +3 -1
  86. package/styles/sortable/bootstrap5.css +3 -1
  87. package/styles/sortable/fabric-dark.css +3 -1
  88. package/styles/sortable/fabric.css +3 -1
  89. package/styles/sortable/fluent-dark.css +3 -1
  90. package/styles/sortable/fluent.css +3 -1
  91. package/styles/sortable/fluent2.css +1063 -0
  92. package/styles/sortable/fluent2.scss +3 -0
  93. package/styles/sortable/highcontrast-light.css +3 -1
  94. package/styles/sortable/highcontrast.css +3 -1
  95. package/styles/sortable/material-dark.css +3 -1
  96. package/styles/sortable/material.css +3 -1
  97. package/styles/sortable/material3-dark.css +4 -2
  98. package/styles/sortable/material3.css +4 -2
  99. package/styles/sortable/tailwind-dark.css +3 -1
  100. package/styles/sortable/tailwind.css +3 -1
  101. package/styles/tailwind-dark.css +210 -236
  102. package/styles/tailwind-dark.scss +8 -2
  103. package/styles/tailwind.css +210 -236
  104. package/styles/tailwind.scss +8 -2
  105. package/CHANGELOG.md +0 -544
@@ -8,54 +8,6 @@
8
8
  }
9
9
 
10
10
  /* stylelint-disable property-no-vendor-prefix */
11
- .e-bigger .e-listview .e-list-item,
12
- .e-listview.e-bigger .e-list-item {
13
- border-bottom: 1px solid #444c54;
14
- border-left: 0 solid transparent;
15
- border-right: 0 solid transparent;
16
- border-top: 0 solid transparent;
17
- }
18
- .e-bigger .e-listview:not(.e-list-template) .e-list-item,
19
- .e-listview.e-bigger:not(.e-list-template) .e-list-item {
20
- height: 40px;
21
- line-height: 24px;
22
- position: relative;
23
- }
24
- .e-bigger .e-listview .e-text-content,
25
- .e-listview.e-bigger .e-text-content {
26
- font-size: 16px;
27
- }
28
- .e-bigger .e-listview .e-list-group-item,
29
- .e-listview.e-bigger .e-list-group-item {
30
- height: 40px;
31
- line-height: 20px;
32
- }
33
- .e-bigger .e-listview .e-list-header,
34
- .e-listview.e-bigger .e-list-header {
35
- -ms-flex-align: center;
36
- align-items: center;
37
- display: -ms-flexbox;
38
- display: flex;
39
- font-weight: 500;
40
- height: 40px;
41
- }
42
- .e-bigger .e-listview .e-list-header .e-text.header,
43
- .e-listview.e-bigger .e-list-header .e-text.header {
44
- display: none;
45
- }
46
- .e-bigger .e-listview .e-list-header .e-headertemplate-text.nested-header,
47
- .e-listview.e-bigger .e-list-header .e-headertemplate-text.nested-header {
48
- display: none;
49
- }
50
- .e-bigger .e-listview .e-list-header .e-text,
51
- .e-listview.e-bigger .e-list-header .e-text {
52
- font-size: 14px;
53
- }
54
- .e-bigger .e-listview .e-text-content.e-checkbox .e-list-text,
55
- .e-listview.e-bigger .e-text-content.e-checkbox .e-list-text {
56
- width: calc(100% - 40px);
57
- }
58
-
59
11
  .e-listview {
60
12
  -webkit-overflow-scrolling: touch;
61
13
  border: 1px solid;
@@ -68,8 +20,8 @@
68
20
  .e-listview:not(.e-list-template) .e-list-item {
69
21
  height: 36px;
70
22
  line-height: 18px;
71
- padding: 7px 9px 7px 12px;
72
23
  position: relative;
24
+ padding: 7px 9px 7px 12px;
73
25
  }
74
26
  .e-listview .e-list-item {
75
27
  border-bottom: 1px solid;
@@ -81,21 +33,15 @@
81
33
  padding: 0;
82
34
  }
83
35
 
84
- .e-listview .e-list-header .e-text.header {
85
- display: none;
86
- }
87
-
88
36
  .e-listview .e-icon-back {
89
37
  margin-top: 0;
90
38
  }
91
39
 
92
- .e-listview .e-list-header .e-headertemplate-text.nested-header {
93
- display: none;
94
- }
95
-
96
40
  .e-listview .e-list-header {
97
- -ms-flex-align: center;
98
- align-items: center;
41
+ -webkit-box-align: center;
42
+ -ms-flex-align: center;
43
+ align-items: center;
44
+ display: -webkit-box;
99
45
  display: -ms-flexbox;
100
46
  display: flex;
101
47
  font-weight: 500;
@@ -103,6 +49,17 @@
103
49
  border-bottom: 1px solid;
104
50
  padding: 0 12px;
105
51
  }
52
+ .e-listview .e-list-header .e-text.header,
53
+ .e-listview .e-list-header .e-headertemplate-text.nested-header {
54
+ display: none;
55
+ }
56
+ .e-listview .e-list-header.e-list-navigation .e-text {
57
+ cursor: pointer;
58
+ }
59
+ .e-listview .e-list-header .e-text {
60
+ cursor: default;
61
+ text-indent: 0;
62
+ }
106
63
 
107
64
  .e-listview .e-has-header > .e-view {
108
65
  top: 45px;
@@ -113,11 +70,6 @@
113
70
  padding-right: 8px;
114
71
  }
115
72
 
116
- .e-listview .e-list-group-item:first-child {
117
- border: 0;
118
- border-bottom: 1px solid #444c54;
119
- }
120
-
121
73
  .e-listview .e-list-group-item {
122
74
  border-bottom: 1px solid #444c54;
123
75
  border-top: 0 solid;
@@ -129,6 +81,10 @@
129
81
  .e-listview .e-list-group-item .e-list-text {
130
82
  cursor: default;
131
83
  }
84
+ .e-listview .e-list-group-item:first-child {
85
+ border: 0;
86
+ border-bottom: 1px solid #444c54;
87
+ }
132
88
 
133
89
  .e-listview .e-icon-collapsible {
134
90
  cursor: pointer;
@@ -136,7 +92,8 @@
136
92
  position: absolute;
137
93
  right: 0%;
138
94
  top: 50%;
139
- transform: translateY(-50%);
95
+ -webkit-transform: translateY(-50%);
96
+ transform: translateY(-50%);
140
97
  }
141
98
 
142
99
  .e-listview .e-text-content {
@@ -144,24 +101,21 @@
144
101
  position: relative;
145
102
  vertical-align: middle;
146
103
  }
147
-
148
- .e-listview .e-text-content * {
149
- display: inline-block;
150
- vertical-align: middle;
151
- }
152
-
153
104
  .e-listview .e-text-content.e-checkbox .e-list-text {
154
105
  width: calc(100% - 40px);
155
106
  }
156
-
157
107
  .e-listview .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
158
108
  width: calc(100% - 90px);
159
109
  }
160
-
161
110
  .e-listview .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
162
111
  width: calc(100% - 80px);
163
112
  }
164
113
 
114
+ .e-listview .e-text-content * {
115
+ display: inline-block;
116
+ vertical-align: middle;
117
+ }
118
+
165
119
  .e-listview .e-list-item.e-checklist.e-has-child .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
166
120
  width: calc(100% - 92px);
167
121
  }
@@ -169,7 +123,6 @@
169
123
  .e-listview .e-checkbox .e-checkbox-left {
170
124
  margin: 0 8px 0 0;
171
125
  }
172
-
173
126
  .e-listview .e-checkbox .e-checkbox-right {
174
127
  margin: -2px 0 0 8px;
175
128
  }
@@ -184,15 +137,7 @@
184
137
  width: 100%;
185
138
  }
186
139
 
187
- .e-listview .e-list-icon + .e-list-text {
188
- width: calc(100% - 60px);
189
- }
190
-
191
- .e-listview .e-icon-wrapper .e-list-text {
192
- width: calc(100% - 60px);
193
- }
194
-
195
- .e-listview .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
140
+ .e-listview .e-list-icon + .e-list-text, .e-listview .e-icon-wrapper .e-list-text, .e-listview .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
196
141
  width: calc(100% - 60px);
197
142
  }
198
143
 
@@ -207,15 +152,6 @@
207
152
  position: relative;
208
153
  }
209
154
 
210
- .e-listview .e-list-header.e-list-navigation .e-text {
211
- cursor: pointer;
212
- }
213
-
214
- .e-listview .e-list-header .e-text {
215
- cursor: default;
216
- text-indent: 0;
217
- }
218
-
219
155
  .e-listview .e-text .e-headertext {
220
156
  display: inline-block;
221
157
  line-height: 18px;
@@ -232,13 +168,15 @@
232
168
  left: 0%;
233
169
  right: initial;
234
170
  top: 50%;
235
- transform: translateY(-50%) rotate(180deg);
171
+ -webkit-transform: translateY(-50%) rotate(180deg);
172
+ transform: translateY(-50%) rotate(180deg);
236
173
  }
237
174
  .e-listview.e-rtl .e-list-header .e-text {
238
175
  cursor: pointer;
239
176
  }
240
177
  .e-listview.e-rtl .e-back-button {
241
- transform: rotate(180deg);
178
+ -webkit-transform: rotate(180deg);
179
+ transform: rotate(180deg);
242
180
  }
243
181
  .e-listview.e-rtl .e-icon-back {
244
182
  margin-top: 0;
@@ -250,6 +188,54 @@
250
188
  margin: -2px 8px 0 0;
251
189
  }
252
190
 
191
+ .e-bigger .e-listview .e-list-item,
192
+ .e-listview.e-bigger .e-list-item {
193
+ border-bottom: 1px solid #444c54;
194
+ border-left: 0 solid transparent;
195
+ border-right: 0 solid transparent;
196
+ border-top: 0 solid transparent;
197
+ }
198
+ .e-bigger .e-listview:not(.e-list-template) .e-list-item,
199
+ .e-listview.e-bigger:not(.e-list-template) .e-list-item {
200
+ height: 40px;
201
+ line-height: 24px;
202
+ position: relative;
203
+ }
204
+ .e-bigger .e-listview .e-text-content,
205
+ .e-listview.e-bigger .e-text-content {
206
+ font-size: 16px;
207
+ }
208
+ .e-bigger .e-listview .e-list-group-item,
209
+ .e-listview.e-bigger .e-list-group-item {
210
+ height: 40px;
211
+ line-height: 20px;
212
+ }
213
+ .e-bigger .e-listview .e-list-header,
214
+ .e-listview.e-bigger .e-list-header {
215
+ -webkit-box-align: center;
216
+ -ms-flex-align: center;
217
+ align-items: center;
218
+ display: -webkit-box;
219
+ display: -ms-flexbox;
220
+ display: flex;
221
+ font-weight: 500;
222
+ height: 40px;
223
+ }
224
+ .e-bigger .e-listview .e-list-header .e-text.header,
225
+ .e-bigger .e-listview .e-list-header .e-headertemplate-text.nested-header,
226
+ .e-listview.e-bigger .e-list-header .e-text.header,
227
+ .e-listview.e-bigger .e-list-header .e-headertemplate-text.nested-header {
228
+ display: none;
229
+ }
230
+ .e-bigger .e-listview .e-list-header .e-text,
231
+ .e-listview.e-bigger .e-list-header .e-text {
232
+ font-size: 14px;
233
+ }
234
+ .e-bigger .e-listview .e-text-content.e-checkbox .e-list-text,
235
+ .e-listview.e-bigger .e-text-content.e-checkbox .e-list-text {
236
+ width: calc(100% - 40px);
237
+ }
238
+
253
239
  .e-listview {
254
240
  border-color: #444c54;
255
241
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -257,8 +243,8 @@
257
243
  }
258
244
  .e-listview .e-list-header {
259
245
  background-color: transparent;
260
- border-color: #444c54;
261
246
  color: #7b848d;
247
+ border-color: #444c54;
262
248
  font-size: 12px;
263
249
  }
264
250
 
@@ -273,45 +259,40 @@
273
259
  }
274
260
 
275
261
  .e-listview .e-list-item {
276
- background-color: transparent;
277
262
  border-bottom: 1px solid #444c54;
278
263
  border-left: 0 solid transparent;
279
264
  border-right: 0 solid transparent;
280
265
  border-top: 0 solid transparent;
266
+ background-color: transparent;
281
267
  color: #fff;
282
268
  }
283
-
284
269
  .e-listview .e-list-item.e-hover, .e-listview .e-list-item.e-hover.e-active.e-checklist {
285
270
  background-color: #31373d;
286
- border-color: #444c54;
287
271
  color: #fff;
272
+ border-color: #444c54;
288
273
  }
289
-
290
274
  .e-listview .e-list-item.e-active {
291
275
  background-color: #0d6efd;
292
276
  color: #fff;
293
277
  }
294
-
295
278
  .e-listview .e-list-item.e-active.e-checklist {
296
279
  background-color: transparent;
297
280
  color: #fff;
298
281
  }
299
-
300
282
  .e-listview .e-list-item.e-focused, .e-listview .e-list-item.e-focused.e-active.e-checklist {
301
283
  background-color: #0d6efd;
302
284
  color: #fff;
303
285
  }
304
-
305
286
  .e-listview .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check, .e-listview .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
306
287
  background-color: #212529;
307
- border-color: #212529;
308
288
  color: #0d6efd;
289
+ border-color: #212529;
309
290
  }
310
291
 
311
292
  .e-listview .e-list-group-item {
312
293
  background-color: transparent;
313
- border-color: #444c54;
314
294
  color: #7b848d;
295
+ border-color: #444c54;
315
296
  font-size: 12px;
316
297
  }
317
298
 
@@ -361,10 +342,10 @@
361
342
  }
362
343
  .e-listview.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
363
344
  height: 40px;
345
+ width: 40px;
346
+ top: 0;
364
347
  left: 0;
365
348
  position: absolute;
366
- top: 0;
367
- width: 40px;
368
349
  margin: 7px 16px 7px 12px;
369
350
  }
370
351
  .e-listview.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
@@ -377,10 +358,10 @@
377
358
  }
378
359
  .e-listview.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
379
360
  height: 40px;
380
- position: absolute;
381
- right: 0;
382
- top: 0;
383
361
  width: 40px;
362
+ top: 0;
363
+ right: 0;
364
+ position: absolute;
384
365
  }
385
366
  .e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
386
367
  top: 0;
@@ -391,13 +372,14 @@
391
372
  .e-listview.e-list-template .e-list-wrapper.e-list-badge .e-badge {
392
373
  font-size: 10px;
393
374
  height: 18px;
375
+ width: 20px;
376
+ top: 50%;
377
+ right: 12px;
394
378
  line-height: 16px;
395
379
  padding: 0;
396
380
  position: absolute;
397
- right: 12px;
398
- top: 50%;
399
- transform: translateY(-50%);
400
- width: 20px;
381
+ -webkit-transform: translateY(-50%);
382
+ transform: translateY(-50%);
401
383
  border-radius: 10px;
402
384
  }
403
385
  .e-listview.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
@@ -418,22 +400,14 @@
418
400
  font-size: 14px;
419
401
  line-height: 18px;
420
402
  }
421
- .e-listview.e-list-template .e-list-item.e-focused .e-list-wrapper.e-list-multi-line .e-list-item-header {
422
- color: #fff;
423
- }
403
+ .e-listview.e-list-template .e-list-item.e-focused .e-list-wrapper.e-list-multi-line .e-list-item-header,
424
404
  .e-listview.e-list-template .e-list-item.e-focused .e-list-wrapper.e-list-multi-line .e-list-content {
425
405
  color: #fff;
426
406
  }
427
- .e-listview.e-list-template .e-list-item.e-hover .e-list-item-header {
428
- color: #fff;
429
- }
430
- .e-listview.e-list-template .e-list-item.e-hover .e-list-content {
431
- color: #fff;
432
- }
433
- .e-listview.e-list-template .e-list-item.e-active .e-list-item-header {
407
+ .e-listview.e-list-template .e-list-item.e-hover .e-list-item-header, .e-listview.e-list-template .e-list-item.e-hover .e-list-content {
434
408
  color: #fff;
435
409
  }
436
- .e-listview.e-list-template .e-list-item.e-active .e-list-content {
410
+ .e-listview.e-list-template .e-list-item.e-active .e-list-item-header, .e-listview.e-list-template .e-list-item.e-active .e-list-content {
437
411
  color: #fff;
438
412
  }
439
413
  .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {