@syncfusion/ej2-vue-lists 19.4.55 → 20.2.36

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 +0 -2
  2. package/dist/ej2-vue-lists.umd.min.js +11 -2
  3. package/dist/es6/ej2-vue-lists.es2015.js +16 -2
  4. package/dist/es6/ej2-vue-lists.es2015.js.map +1 -1
  5. package/dist/es6/ej2-vue-lists.es5.js +10 -1
  6. package/dist/es6/ej2-vue-lists.es5.js.map +1 -1
  7. package/dist/global/ej2-vue-lists.min.js +2 -2
  8. package/package.json +8 -8
  9. package/src/list-view/listview.component.d.ts +1 -0
  10. package/src/list-view/listview.component.js +10 -1
  11. package/styles/bootstrap-dark.css +21 -60
  12. package/styles/bootstrap.css +21 -59
  13. package/styles/bootstrap4.css +23 -69
  14. package/styles/bootstrap5-dark.css +30 -73
  15. package/styles/bootstrap5.css +30 -73
  16. package/styles/fabric-dark.css +21 -60
  17. package/styles/fabric.css +21 -59
  18. package/styles/fluent-dark.css +519 -0
  19. package/styles/fluent-dark.scss +2 -0
  20. package/styles/fluent.css +519 -0
  21. package/styles/fluent.scss +2 -0
  22. package/styles/highcontrast-light.css +21 -60
  23. package/styles/highcontrast.css +21 -59
  24. package/styles/list-view/bootstrap-dark.css +20 -56
  25. package/styles/list-view/bootstrap.css +20 -55
  26. package/styles/list-view/bootstrap4.css +22 -65
  27. package/styles/list-view/bootstrap5-dark.css +29 -69
  28. package/styles/list-view/bootstrap5.css +29 -69
  29. package/styles/list-view/fabric-dark.css +20 -56
  30. package/styles/list-view/fabric.css +20 -55
  31. package/styles/list-view/fluent-dark.css +495 -0
  32. package/styles/list-view/fluent-dark.scss +1 -0
  33. package/styles/list-view/fluent.css +495 -0
  34. package/styles/list-view/fluent.scss +1 -0
  35. package/styles/list-view/highcontrast-light.css +20 -56
  36. package/styles/list-view/highcontrast.css +20 -55
  37. package/styles/list-view/material-dark.css +20 -56
  38. package/styles/list-view/material.css +20 -55
  39. package/styles/list-view/tailwind-dark.css +32 -95
  40. package/styles/list-view/tailwind.css +32 -95
  41. package/styles/material-dark.css +21 -60
  42. package/styles/material.css +21 -59
  43. package/styles/sortable/bootstrap-dark.css +2 -5
  44. package/styles/sortable/bootstrap.css +2 -5
  45. package/styles/sortable/bootstrap4.css +2 -5
  46. package/styles/sortable/bootstrap5-dark.css +2 -5
  47. package/styles/sortable/bootstrap5.css +2 -5
  48. package/styles/sortable/fabric-dark.css +2 -5
  49. package/styles/sortable/fabric.css +2 -5
  50. package/styles/sortable/fluent-dark.css +23 -0
  51. package/styles/sortable/fluent-dark.scss +1 -0
  52. package/styles/sortable/fluent.css +23 -0
  53. package/styles/sortable/fluent.scss +1 -0
  54. package/styles/sortable/highcontrast-light.css +2 -5
  55. package/styles/sortable/highcontrast.css +2 -5
  56. package/styles/sortable/material-dark.css +2 -5
  57. package/styles/sortable/material.css +2 -5
  58. package/styles/sortable/tailwind-dark.css +2 -5
  59. package/styles/sortable/tailwind.css +2 -5
  60. package/styles/tailwind-dark.css +33 -99
  61. package/styles/tailwind.css +33 -99
@@ -1,9 +1,9 @@
1
1
  .e-icon-collapsible::before {
2
- content: '\e748';
2
+ content: "\e748";
3
3
  }
4
4
 
5
5
  .e-icon-back::before {
6
- content: '\e773';
6
+ content: "\e773";
7
7
  font-size: 12px;
8
8
  }
9
9
 
@@ -14,25 +14,21 @@
14
14
  border-right: 0 solid transparent;
15
15
  border-top: 0 solid transparent;
16
16
  }
17
-
18
17
  .e-bigger .e-listview:not(.e-list-template) .e-list-item,
19
18
  .e-listview.e-bigger:not(.e-list-template) .e-list-item {
20
19
  height: 40px;
21
- line-height: 20px;
20
+ line-height: 21px;
22
21
  position: relative;
23
22
  }
24
-
25
23
  .e-bigger .e-listview .e-text-content,
26
24
  .e-listview.e-bigger .e-text-content {
27
25
  font-size: 16px;
28
26
  }
29
-
30
27
  .e-bigger .e-listview .e-list-group-item,
31
28
  .e-listview.e-bigger .e-list-group-item {
32
29
  height: 40px;
33
30
  line-height: 20px;
34
31
  }
35
-
36
32
  .e-bigger .e-listview .e-list-header,
37
33
  .e-listview.e-bigger .e-list-header {
38
34
  -ms-flex-align: center;
@@ -40,23 +36,24 @@
40
36
  display: -ms-flexbox;
41
37
  display: flex;
42
38
  font-weight: 500;
43
- height: 38px;
39
+ height: 40px;
44
40
  }
45
-
46
41
  .e-bigger .e-listview .e-list-header .e-text.header,
47
42
  .e-listview.e-bigger .e-list-header .e-text.header {
48
43
  display: none;
49
44
  }
50
-
51
45
  .e-bigger .e-listview .e-list-header .e-headertemplate-text.nested-header,
52
46
  .e-listview.e-bigger .e-list-header .e-headertemplate-text.nested-header {
53
47
  display: none;
54
48
  }
55
-
56
49
  .e-bigger .e-listview .e-list-header .e-text,
57
50
  .e-listview.e-bigger .e-list-header .e-text {
58
51
  font-size: 14px;
59
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
+ }
60
57
 
61
58
  .e-listview {
62
59
  -webkit-overflow-scrolling: touch;
@@ -67,14 +64,12 @@
67
64
  position: relative;
68
65
  width: 100%;
69
66
  }
70
-
71
67
  .e-listview:not(.e-list-template) .e-list-item {
72
68
  height: 36px;
73
69
  line-height: 18px;
74
70
  padding: 7px 9px 7px 12px;
75
71
  position: relative;
76
72
  }
77
-
78
73
  .e-listview .e-list-item {
79
74
  border-bottom: 1px solid;
80
75
  cursor: pointer;
@@ -103,7 +98,7 @@
103
98
  display: -ms-flexbox;
104
99
  display: flex;
105
100
  font-weight: 500;
106
- height: 30px;
101
+ height: 36px;
107
102
  border-bottom: 1px solid;
108
103
  padding: 0 12px;
109
104
  }
@@ -112,7 +107,7 @@
112
107
  top: 45px;
113
108
  }
114
109
 
115
- .e-listview .e-but-back {
110
+ .e-listview .e-back-button {
116
111
  cursor: pointer;
117
112
  padding-right: 8px;
118
113
  }
@@ -130,6 +125,9 @@
130
125
  font-weight: 600;
131
126
  padding: 7px 9px 7px 12px;
132
127
  }
128
+ .e-listview .e-list-group-item .e-list-text {
129
+ cursor: default;
130
+ }
133
131
 
134
132
  .e-listview .e-icon-collapsible {
135
133
  cursor: pointer;
@@ -208,8 +206,12 @@
208
206
  position: relative;
209
207
  }
210
208
 
211
- .e-listview .e-list-header .e-text {
209
+ .e-listview .e-list-header.e-list-navigation .e-text {
212
210
  cursor: pointer;
211
+ }
212
+
213
+ .e-listview .e-list-header .e-text {
214
+ cursor: default;
213
215
  text-indent: 0;
214
216
  }
215
217
 
@@ -221,35 +223,28 @@
221
223
  .e-listview.e-rtl {
222
224
  direction: rtl;
223
225
  }
224
-
225
226
  .e-listview.e-rtl .e-list-icon {
226
227
  margin-left: 16px;
227
228
  margin-right: 0;
228
229
  }
229
-
230
230
  .e-listview.e-rtl .e-icon-collapsible {
231
231
  left: 0%;
232
232
  right: initial;
233
233
  top: 50%;
234
234
  transform: translateY(-50%) rotate(180deg);
235
235
  }
236
-
237
236
  .e-listview.e-rtl .e-list-header .e-text {
238
237
  cursor: pointer;
239
238
  }
240
-
241
- .e-listview.e-rtl .e-but-back {
239
+ .e-listview.e-rtl .e-back-button {
242
240
  transform: rotate(180deg);
243
241
  }
244
-
245
242
  .e-listview.e-rtl .e-icon-back {
246
243
  margin-top: 0;
247
244
  }
248
-
249
245
  .e-listview.e-rtl .e-checkbox .e-checkbox-left {
250
246
  margin: -2px 0 0 8px;
251
247
  }
252
-
253
248
  .e-listview.e-rtl .e-checkbox .e-checkbox-right {
254
249
  margin: -2px 8px 0 0;
255
250
  }
@@ -259,10 +254,9 @@
259
254
  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";
260
255
  font-size: 14px;
261
256
  }
262
-
263
257
  .e-listview .e-list-header {
264
258
  background-color: transparent;
265
- border-color: #6c757d;
259
+ border-color: #444c54;
266
260
  color: #7b848d;
267
261
  font-size: 12px;
268
262
  }
@@ -270,12 +264,10 @@
270
264
  .e-listview .e-icons {
271
265
  color: #adb5bd;
272
266
  }
273
-
274
- .e-listview .e-icons .e-but-back:hover {
267
+ .e-listview .e-icons.e-back-button:hover {
275
268
  color: #dee2e6;
276
269
  }
277
-
278
- .e-listview .e-icons .e-but-back:active {
270
+ .e-listview .e-icons.e-back-button:active {
279
271
  color: #f8f9fa;
280
272
  }
281
273
 
@@ -288,8 +280,7 @@
288
280
  color: #fff;
289
281
  }
290
282
 
291
- .e-listview .e-list-item.e-hover,
292
- .e-listview .e-list-item.e-hover.e-active.e-checklist {
283
+ .e-listview .e-list-item.e-hover, .e-listview .e-list-item.e-hover.e-active.e-checklist {
293
284
  background-color: #31373d;
294
285
  border-color: #444c54;
295
286
  color: #fff;
@@ -305,14 +296,12 @@
305
296
  color: #fff;
306
297
  }
307
298
 
308
- .e-listview .e-list-item.e-focused,
309
- .e-listview .e-list-item.e-focused.e-active.e-checklist {
299
+ .e-listview .e-list-item.e-focused, .e-listview .e-list-item.e-focused.e-active.e-checklist {
310
300
  background-color: #0d6efd;
311
301
  color: #fff;
312
302
  }
313
303
 
314
- .e-listview .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
315
- .e-listview .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
304
+ .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 {
316
305
  background-color: #212529;
317
306
  border-color: #212529;
318
307
  color: #0d6efd;
@@ -320,7 +309,7 @@
320
309
 
321
310
  .e-listview .e-list-group-item {
322
311
  background-color: transparent;
323
- border-color: #6c757d;
312
+ border-color: #444c54;
324
313
  color: #7b848d;
325
314
  font-size: 12px;
326
315
  }
@@ -333,19 +322,15 @@
333
322
  height: inherit;
334
323
  position: relative;
335
324
  }
336
-
337
325
  .e-listview.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
338
- padding: 8px 16px;
326
+ padding: 10px 16px;
339
327
  }
340
-
341
328
  .e-listview.e-list-template .e-list-wrapper:not(.e-list-multi-line).e-list-badge:not(.e-list-avatar) {
342
- padding: 0 10px 0 16px;
329
+ padding: 0 8px 0 12px;
343
330
  }
344
-
345
331
  .e-listview.e-list-template .e-list-wrapper.e-list-multi-line {
346
332
  padding: 4px;
347
333
  }
348
-
349
334
  .e-listview.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
350
335
  color: #fff;
351
336
  display: block;
@@ -358,7 +343,6 @@
358
343
  text-overflow: ellipsis;
359
344
  white-space: nowrap;
360
345
  }
361
-
362
346
  .e-listview.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
363
347
  color: #7b848d;
364
348
  display: block;
@@ -369,13 +353,11 @@
369
353
  padding: 2px 0 0 0;
370
354
  word-wrap: break-word;
371
355
  }
372
-
373
356
  .e-listview.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
374
357
  overflow: hidden;
375
358
  text-overflow: ellipsis;
376
359
  white-space: nowrap;
377
360
  }
378
-
379
361
  .e-listview.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
380
362
  height: 40px;
381
363
  left: 0;
@@ -384,17 +366,14 @@
384
366
  width: 40px;
385
367
  margin: 7px 16px 7px 12px;
386
368
  }
387
-
388
369
  .e-listview.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
389
370
  padding-left: 68px;
390
371
  padding-right: 16px;
391
372
  }
392
-
393
373
  .e-listview.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
394
374
  padding-left: 16px;
395
375
  padding-right: 68px;
396
376
  }
397
-
398
377
  .e-listview.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
399
378
  height: 40px;
400
379
  position: absolute;
@@ -402,15 +381,12 @@
402
381
  top: 0;
403
382
  width: 40px;
404
383
  }
405
-
406
384
  .e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
407
385
  top: 0;
408
386
  }
409
-
410
387
  .e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
411
388
  top: 0;
412
389
  }
413
-
414
390
  .e-listview.e-list-template .e-list-wrapper.e-list-badge .e-badge {
415
391
  font-size: 10px;
416
392
  height: 18px;
@@ -423,17 +399,14 @@
423
399
  width: 20px;
424
400
  border-radius: 10px;
425
401
  }
426
-
427
402
  .e-listview.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
428
403
  padding-left: 68px;
429
404
  padding-right: 10px;
430
405
  }
431
-
432
406
  .e-listview.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
433
407
  padding-left: 16px;
434
408
  padding-right: 10px;
435
409
  }
436
-
437
410
  .e-listview.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
438
411
  display: block;
439
412
  margin: 0;
@@ -444,62 +417,49 @@
444
417
  font-size: 14px;
445
418
  line-height: 18px;
446
419
  }
447
-
448
420
  .e-listview.e-list-template .e-list-item.e-focused .e-list-wrapper.e-list-multi-line .e-list-item-header {
449
421
  color: #fff;
450
422
  }
451
-
452
423
  .e-listview.e-list-template .e-list-item.e-focused .e-list-wrapper.e-list-multi-line .e-list-content {
453
424
  color: #fff;
454
425
  }
455
-
456
426
  .e-listview.e-list-template .e-list-item.e-hover .e-list-item-header {
457
427
  color: #fff;
458
428
  }
459
-
460
429
  .e-listview.e-list-template .e-list-item.e-hover .e-list-content {
461
430
  color: #fff;
462
431
  }
463
-
464
432
  .e-listview.e-list-template .e-list-item.e-active .e-list-item-header {
465
433
  color: #fff;
466
434
  }
467
-
468
435
  .e-listview.e-list-template .e-list-item.e-active .e-list-content {
469
436
  color: #fff;
470
437
  }
471
-
472
438
  .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
473
439
  left: inherit;
474
440
  margin: 7px 12px 7px 16px;
475
441
  right: 0;
476
442
  }
477
-
478
443
  .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
479
444
  padding-left: 16px;
480
445
  padding-right: 68px;
481
446
  }
482
-
483
447
  .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
484
448
  padding-left: 68px;
485
449
  padding-right: 16px;
486
450
  }
487
-
488
451
  .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
489
452
  left: 0;
490
453
  right: inherit;
491
454
  }
492
-
493
455
  .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
494
456
  left: 12px;
495
457
  right: inherit;
496
458
  }
497
-
498
459
  .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
499
460
  padding-left: 10px;
500
461
  padding-right: 68px;
501
462
  }
502
-
503
463
  .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
504
464
  padding-left: 10px;
505
465
  padding-right: 16px;
@@ -512,22 +472,19 @@
512
472
  -ms-user-select: none;
513
473
  user-select: none;
514
474
  }
515
-
516
475
  .e-sortable .e-disabled {
517
476
  background-image: none;
518
477
  cursor: default;
519
478
  filter: alpha(Opacity=35);
520
- opacity: .35;
479
+ opacity: 0.35;
521
480
  }
522
-
523
481
  .e-sortable * {
524
482
  box-sizing: border-box;
525
483
  }
526
-
527
484
  .e-sortable *:focus {
528
485
  outline: none;
529
486
  }
530
487
 
531
488
  .e-sortableclone {
532
489
  position: fixed !important;
533
- }
490
+ }