@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
@@ -7,54 +7,6 @@
7
7
  }
8
8
 
9
9
  /* stylelint-disable property-no-vendor-prefix */
10
- .e-bigger .e-listview .e-list-item,
11
- .e-listview.e-bigger .e-list-item {
12
- border-bottom: 1px solid #414141;
13
- border-left: 0 solid transparent;
14
- border-right: 0 solid transparent;
15
- border-top: 0 solid transparent;
16
- }
17
- .e-bigger .e-listview:not(.e-list-template) .e-list-item,
18
- .e-listview.e-bigger:not(.e-list-template) .e-list-item {
19
- height: 48px;
20
- line-height: 45px;
21
- position: relative;
22
- }
23
- .e-bigger .e-listview .e-text-content,
24
- .e-listview.e-bigger .e-text-content {
25
- font-size: 15px;
26
- }
27
- .e-bigger .e-listview .e-list-group-item,
28
- .e-listview.e-bigger .e-list-group-item {
29
- height: 48px;
30
- line-height: 45px;
31
- }
32
- .e-bigger .e-listview .e-list-header,
33
- .e-listview.e-bigger .e-list-header {
34
- -ms-flex-align: center;
35
- align-items: center;
36
- display: -ms-flexbox;
37
- display: flex;
38
- font-weight: bold;
39
- height: 48px;
40
- }
41
- .e-bigger .e-listview .e-list-header .e-text.header,
42
- .e-listview.e-bigger .e-list-header .e-text.header {
43
- display: none;
44
- }
45
- .e-bigger .e-listview .e-list-header .e-headertemplate-text.nested-header,
46
- .e-listview.e-bigger .e-list-header .e-headertemplate-text.nested-header {
47
- display: none;
48
- }
49
- .e-bigger .e-listview .e-list-header .e-text,
50
- .e-listview.e-bigger .e-list-header .e-text {
51
- font-size: 15px;
52
- }
53
- .e-bigger .e-listview .e-text-content.e-checkbox .e-list-text,
54
- .e-listview.e-bigger .e-text-content.e-checkbox .e-list-text {
55
- width: calc(100% - 40px);
56
- }
57
-
58
10
  .e-listview {
59
11
  -webkit-overflow-scrolling: touch;
60
12
  border: 0 solid;
@@ -67,8 +19,8 @@
67
19
  .e-listview:not(.e-list-template) .e-list-item {
68
20
  height: 40px;
69
21
  line-height: 36px;
70
- padding: 0 15px;
71
22
  position: relative;
23
+ padding: 0 15px;
72
24
  }
73
25
  .e-listview .e-list-item {
74
26
  border-bottom: 0 solid;
@@ -80,21 +32,15 @@
80
32
  padding: 0;
81
33
  }
82
34
 
83
- .e-listview .e-list-header .e-text.header {
84
- display: none;
85
- }
86
-
87
35
  .e-listview .e-icon-back {
88
36
  margin-top: -2px;
89
37
  }
90
38
 
91
- .e-listview .e-list-header .e-headertemplate-text.nested-header {
92
- display: none;
93
- }
94
-
95
39
  .e-listview .e-list-header {
96
- -ms-flex-align: center;
97
- align-items: center;
40
+ -webkit-box-align: center;
41
+ -ms-flex-align: center;
42
+ align-items: center;
43
+ display: -webkit-box;
98
44
  display: -ms-flexbox;
99
45
  display: flex;
100
46
  font-weight: bold;
@@ -102,6 +48,17 @@
102
48
  border-bottom: 1px solid;
103
49
  padding: 0 20px;
104
50
  }
51
+ .e-listview .e-list-header .e-text.header,
52
+ .e-listview .e-list-header .e-headertemplate-text.nested-header {
53
+ display: none;
54
+ }
55
+ .e-listview .e-list-header.e-list-navigation .e-text {
56
+ cursor: pointer;
57
+ }
58
+ .e-listview .e-list-header .e-text {
59
+ cursor: default;
60
+ text-indent: 0;
61
+ }
105
62
 
106
63
  .e-listview .e-has-header > .e-view {
107
64
  top: 45px;
@@ -112,11 +69,6 @@
112
69
  padding-right: 10px;
113
70
  }
114
71
 
115
- .e-listview .e-list-group-item:first-child {
116
- border: 0;
117
- border-bottom: 1px solid #414141;
118
- }
119
-
120
72
  .e-listview .e-list-group-item {
121
73
  border-bottom: 1px solid #414141;
122
74
  border-top: 0 solid;
@@ -128,6 +80,10 @@
128
80
  .e-listview .e-list-group-item .e-list-text {
129
81
  cursor: default;
130
82
  }
83
+ .e-listview .e-list-group-item:first-child {
84
+ border: 0;
85
+ border-bottom: 1px solid #414141;
86
+ }
131
87
 
132
88
  .e-listview .e-icon-collapsible {
133
89
  cursor: pointer;
@@ -135,7 +91,8 @@
135
91
  position: absolute;
136
92
  right: 0%;
137
93
  top: 50%;
138
- transform: translateY(-50%);
94
+ -webkit-transform: translateY(-50%);
95
+ transform: translateY(-50%);
139
96
  }
140
97
 
141
98
  .e-listview .e-text-content {
@@ -143,24 +100,21 @@
143
100
  position: relative;
144
101
  vertical-align: middle;
145
102
  }
146
-
147
- .e-listview .e-text-content * {
148
- display: inline-block;
149
- vertical-align: middle;
150
- }
151
-
152
103
  .e-listview .e-text-content.e-checkbox .e-list-text {
153
104
  width: calc(100% - 40px);
154
105
  }
155
-
156
106
  .e-listview .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
157
107
  width: calc(100% - 90px);
158
108
  }
159
-
160
109
  .e-listview .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
161
110
  width: calc(100% - 80px);
162
111
  }
163
112
 
113
+ .e-listview .e-text-content * {
114
+ display: inline-block;
115
+ vertical-align: middle;
116
+ }
117
+
164
118
  .e-listview .e-list-item.e-checklist.e-has-child .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
165
119
  width: calc(100% - 92px);
166
120
  }
@@ -168,7 +122,6 @@
168
122
  .e-listview .e-checkbox .e-checkbox-left {
169
123
  margin: -4px 10px 0 0;
170
124
  }
171
-
172
125
  .e-listview .e-checkbox .e-checkbox-right {
173
126
  margin: -4px 0 0 10px;
174
127
  }
@@ -183,15 +136,7 @@
183
136
  width: 100%;
184
137
  }
185
138
 
186
- .e-listview .e-list-icon + .e-list-text {
187
- width: calc(100% - 60px);
188
- }
189
-
190
- .e-listview .e-icon-wrapper .e-list-text {
191
- width: calc(100% - 60px);
192
- }
193
-
194
- .e-listview .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
139
+ .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 {
195
140
  width: calc(100% - 60px);
196
141
  }
197
142
 
@@ -206,15 +151,6 @@
206
151
  position: relative;
207
152
  }
208
153
 
209
- .e-listview .e-list-header.e-list-navigation .e-text {
210
- cursor: pointer;
211
- }
212
-
213
- .e-listview .e-list-header .e-text {
214
- cursor: default;
215
- text-indent: 0;
216
- }
217
-
218
154
  .e-listview .e-text .e-headertext {
219
155
  display: inline-block;
220
156
  line-height: 1px;
@@ -231,13 +167,15 @@
231
167
  left: 0%;
232
168
  right: initial;
233
169
  top: 50%;
234
- transform: translateY(-50%) rotate(180deg);
170
+ -webkit-transform: translateY(-50%) rotate(180deg);
171
+ transform: translateY(-50%) rotate(180deg);
235
172
  }
236
173
  .e-listview.e-rtl .e-list-header .e-text {
237
174
  cursor: pointer;
238
175
  }
239
176
  .e-listview.e-rtl .e-back-button {
240
- transform: rotate(180deg);
177
+ -webkit-transform: rotate(180deg);
178
+ transform: rotate(180deg);
241
179
  }
242
180
  .e-listview.e-rtl .e-icon-back {
243
181
  margin-top: -1px;
@@ -249,6 +187,54 @@
249
187
  margin: -4px 10px 0 0;
250
188
  }
251
189
 
190
+ .e-bigger .e-listview .e-list-item,
191
+ .e-listview.e-bigger .e-list-item {
192
+ border-bottom: 1px solid #414141;
193
+ border-left: 0 solid transparent;
194
+ border-right: 0 solid transparent;
195
+ border-top: 0 solid transparent;
196
+ }
197
+ .e-bigger .e-listview:not(.e-list-template) .e-list-item,
198
+ .e-listview.e-bigger:not(.e-list-template) .e-list-item {
199
+ height: 48px;
200
+ line-height: 45px;
201
+ position: relative;
202
+ }
203
+ .e-bigger .e-listview .e-text-content,
204
+ .e-listview.e-bigger .e-text-content {
205
+ font-size: 15px;
206
+ }
207
+ .e-bigger .e-listview .e-list-group-item,
208
+ .e-listview.e-bigger .e-list-group-item {
209
+ height: 48px;
210
+ line-height: 45px;
211
+ }
212
+ .e-bigger .e-listview .e-list-header,
213
+ .e-listview.e-bigger .e-list-header {
214
+ -webkit-box-align: center;
215
+ -ms-flex-align: center;
216
+ align-items: center;
217
+ display: -webkit-box;
218
+ display: -ms-flexbox;
219
+ display: flex;
220
+ font-weight: bold;
221
+ height: 48px;
222
+ }
223
+ .e-bigger .e-listview .e-list-header .e-text.header,
224
+ .e-bigger .e-listview .e-list-header .e-headertemplate-text.nested-header,
225
+ .e-listview.e-bigger .e-list-header .e-text.header,
226
+ .e-listview.e-bigger .e-list-header .e-headertemplate-text.nested-header {
227
+ display: none;
228
+ }
229
+ .e-bigger .e-listview .e-list-header .e-text,
230
+ .e-listview.e-bigger .e-list-header .e-text {
231
+ font-size: 15px;
232
+ }
233
+ .e-bigger .e-listview .e-text-content.e-checkbox .e-list-text,
234
+ .e-listview.e-bigger .e-text-content.e-checkbox .e-list-text {
235
+ width: calc(100% - 40px);
236
+ }
237
+
252
238
  .e-listview {
253
239
  border-color: rgba(26, 26, 26, 0.1);
254
240
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
@@ -256,8 +242,8 @@
256
242
  }
257
243
  .e-listview .e-list-header {
258
244
  background-color: #6e6e6e;
259
- border-color: #414141;
260
245
  color: rgba(255, 255, 255, 0.95);
246
+ border-color: #414141;
261
247
  font-size: 14px;
262
248
  }
263
249
 
@@ -266,45 +252,40 @@
266
252
  }
267
253
 
268
254
  .e-listview .e-list-item {
269
- background-color: #1a1a1a;
270
255
  border-bottom: 1px solid #414141;
271
256
  border-left: 0 solid transparent;
272
257
  border-right: 0 solid transparent;
273
258
  border-top: 0 solid transparent;
259
+ background-color: #1a1a1a;
274
260
  color: #f0f0f0;
275
261
  }
276
-
277
262
  .e-listview .e-list-item.e-hover, .e-listview .e-list-item.e-hover.e-active.e-checklist {
278
263
  background-color: #313131;
279
- border-color: transparent;
280
264
  color: rgba(255, 255, 255, 0.87);
265
+ border-color: transparent;
281
266
  }
282
-
283
267
  .e-listview .e-list-item.e-active {
284
268
  background-color: #414141;
285
269
  color: rgba(255, 255, 255, 0.87);
286
270
  }
287
-
288
271
  .e-listview .e-list-item.e-active.e-checklist {
289
272
  background-color: #1a1a1a;
290
273
  color: #f0f0f0;
291
274
  }
292
-
293
275
  .e-listview .e-list-item.e-focused, .e-listview .e-list-item.e-focused.e-active.e-checklist {
294
276
  background-color: #414141;
295
277
  color: rgba(255, 255, 255, 0.87);
296
278
  }
297
-
298
279
  .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 {
299
280
  background-color: #1a1a1a;
300
- border-color: #f0f0f0;
301
281
  color: #f0f0f0;
282
+ border-color: #f0f0f0;
302
283
  }
303
284
 
304
285
  .e-listview .e-list-group-item {
305
286
  background-color: #1a1a1a;
306
- border-color: #414141;
307
287
  color: #3e98ff;
288
+ border-color: #414141;
308
289
  font-size: 14px;
309
290
  }
310
291
 
@@ -344,10 +325,10 @@
344
325
  }
345
326
  .e-listview.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
346
327
  height: 2.8571em;
328
+ width: 2.8571em;
329
+ top: 0.7142em;
347
330
  left: 1.0667em;
348
331
  position: absolute;
349
- top: 0.7142em;
350
- width: 2.8571em;
351
332
  }
352
333
  .e-listview.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
353
334
  padding-left: 4.6428em;
@@ -359,10 +340,10 @@
359
340
  }
360
341
  .e-listview.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
361
342
  height: 2.8571em;
362
- position: absolute;
363
- right: 1.0667em;
364
- top: 0.7142em;
365
343
  width: 2.8571em;
344
+ top: 0.7142em;
345
+ right: 1.0667em;
346
+ position: absolute;
366
347
  }
367
348
  .e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
368
349
  top: 0.7142em;
@@ -373,13 +354,14 @@
373
354
  .e-listview.e-list-template .e-list-wrapper.e-list-badge .e-badge {
374
355
  font-size: 15px;
375
356
  height: 1.333em;
357
+ width: 2em;
358
+ top: 50%;
359
+ right: 1em;
376
360
  line-height: 1.433em;
377
361
  padding: 0;
378
362
  position: absolute;
379
- right: 1em;
380
- top: 50%;
381
- transform: translateY(-50%);
382
- width: 2em;
363
+ -webkit-transform: translateY(-50%);
364
+ transform: translateY(-50%);
383
365
  }
384
366
  .e-listview.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
385
367
  padding-left: 4.6428em;
@@ -397,16 +379,10 @@
397
379
  text-overflow: ellipsis;
398
380
  white-space: nowrap;
399
381
  }
400
- .e-listview.e-list-template .e-list-item.e-hover .e-list-item-header {
401
- color: rgba(255, 255, 255, 0.87);
402
- }
403
- .e-listview.e-list-template .e-list-item.e-hover .e-list-content {
404
- color: rgba(255, 255, 255, 0.87);
405
- }
406
- .e-listview.e-list-template .e-list-item.e-active .e-list-item-header {
382
+ .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 {
407
383
  color: rgba(255, 255, 255, 0.87);
408
384
  }
409
- .e-listview.e-list-template .e-list-item.e-active .e-list-content {
385
+ .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 {
410
386
  color: rgba(255, 255, 255, 0.87);
411
387
  }
412
388
  .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {