@syncfusion/ej2-lists 25.1.41 → 26.1.35-750253

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