@syncfusion/ej2-layouts 25.2.3 → 26.1.38

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 (177) hide show
  1. package/.eslintrc.json +3 -2
  2. package/dist/ej2-layouts.min.js +2 -2
  3. package/dist/ej2-layouts.umd.min.js +2 -2
  4. package/dist/ej2-layouts.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-layouts.es2015.js +215 -140
  6. package/dist/es6/ej2-layouts.es2015.js.map +1 -1
  7. package/dist/es6/ej2-layouts.es5.js +243 -167
  8. package/dist/es6/ej2-layouts.es5.js.map +1 -1
  9. package/dist/global/ej2-layouts.min.js +2 -2
  10. package/dist/global/ej2-layouts.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +7 -7
  13. package/src/dashboard-layout/dashboard-layout.d.ts +2 -2
  14. package/src/dashboard-layout/dashboard-layout.js +55 -76
  15. package/src/splitter/splitter.js +81 -41
  16. package/src/timeline/timeline-model.d.ts +5 -5
  17. package/src/timeline/timeline.d.ts +6 -3
  18. package/src/timeline/timeline.js +107 -33
  19. package/styles/avatar/_bootstrap5.3-definition.scss +26 -0
  20. package/styles/avatar/_fluent2-definition.scss +28 -0
  21. package/styles/avatar/_layout.scss +22 -18
  22. package/styles/avatar/_material3-definition.scss +0 -7
  23. package/styles/avatar/bootstrap-dark.css +7 -4
  24. package/styles/avatar/bootstrap.css +7 -4
  25. package/styles/avatar/bootstrap4.css +7 -4
  26. package/styles/avatar/bootstrap5-dark.css +13 -10
  27. package/styles/avatar/bootstrap5.css +13 -10
  28. package/styles/avatar/fabric-dark.css +7 -4
  29. package/styles/avatar/fabric.css +7 -4
  30. package/styles/avatar/fluent-dark.css +11 -8
  31. package/styles/avatar/fluent.css +11 -8
  32. package/styles/avatar/fluent2.css +1097 -0
  33. package/styles/avatar/fluent2.scss +3 -0
  34. package/styles/avatar/highcontrast-light.css +7 -4
  35. package/styles/avatar/highcontrast.css +7 -4
  36. package/styles/avatar/material-dark.css +7 -4
  37. package/styles/avatar/material.css +7 -4
  38. package/styles/avatar/material3-dark.css +12 -9
  39. package/styles/avatar/material3.css +12 -9
  40. package/styles/avatar/tailwind-dark.css +11 -8
  41. package/styles/avatar/tailwind.css +11 -8
  42. package/styles/bootstrap-dark.css +359 -197
  43. package/styles/bootstrap-dark.scss +14 -5
  44. package/styles/bootstrap.css +359 -197
  45. package/styles/bootstrap.scss +14 -5
  46. package/styles/bootstrap4.css +357 -196
  47. package/styles/bootstrap4.scss +14 -5
  48. package/styles/bootstrap5-dark.css +370 -207
  49. package/styles/bootstrap5-dark.scss +14 -5
  50. package/styles/bootstrap5.css +370 -207
  51. package/styles/bootstrap5.scss +14 -5
  52. package/styles/card/_bootstrap5.3-definition.scss +125 -0
  53. package/styles/card/_fluent2-definition.scss +123 -0
  54. package/styles/card/_layout.scss +13 -4
  55. package/styles/card/_material3-definition.scss +0 -13
  56. package/styles/card/_theme.scss +4 -16
  57. package/styles/card/bootstrap-dark.css +95 -52
  58. package/styles/card/bootstrap.css +95 -52
  59. package/styles/card/bootstrap4.css +95 -52
  60. package/styles/card/bootstrap5-dark.css +95 -52
  61. package/styles/card/bootstrap5.css +95 -52
  62. package/styles/card/fabric-dark.css +95 -52
  63. package/styles/card/fabric.css +95 -52
  64. package/styles/card/fluent-dark.css +99 -54
  65. package/styles/card/fluent.css +99 -54
  66. package/styles/card/fluent2.css +1593 -0
  67. package/styles/card/fluent2.scss +3 -0
  68. package/styles/card/highcontrast-light.css +95 -52
  69. package/styles/card/highcontrast.css +95 -52
  70. package/styles/card/material-dark.css +95 -52
  71. package/styles/card/material.css +97 -53
  72. package/styles/card/material3-dark.css +99 -53
  73. package/styles/card/material3.css +99 -53
  74. package/styles/card/tailwind-dark.css +95 -52
  75. package/styles/card/tailwind.css +95 -52
  76. package/styles/dashboard-layout/_bootstrap5.3-definition.scss +108 -0
  77. package/styles/dashboard-layout/_fluent2-definition.scss +111 -0
  78. package/styles/dashboard-layout/_highcontrast-definition.scss +1 -1
  79. package/styles/dashboard-layout/_layout.scss +62 -60
  80. package/styles/dashboard-layout/_material3-definition.scss +0 -47
  81. package/styles/dashboard-layout/_theme.scss +19 -32
  82. package/styles/dashboard-layout/bootstrap-dark.css +41 -42
  83. package/styles/dashboard-layout/bootstrap.css +41 -42
  84. package/styles/dashboard-layout/bootstrap4.css +41 -42
  85. package/styles/dashboard-layout/bootstrap5-dark.css +48 -47
  86. package/styles/dashboard-layout/bootstrap5.css +48 -47
  87. package/styles/dashboard-layout/fabric-dark.css +41 -42
  88. package/styles/dashboard-layout/fabric.css +41 -42
  89. package/styles/dashboard-layout/fluent-dark.css +46 -46
  90. package/styles/dashboard-layout/fluent.css +46 -46
  91. package/styles/dashboard-layout/fluent2.css +1336 -0
  92. package/styles/dashboard-layout/fluent2.scss +4 -0
  93. package/styles/dashboard-layout/highcontrast-light.css +39 -41
  94. package/styles/dashboard-layout/highcontrast.css +43 -42
  95. package/styles/dashboard-layout/icons/_bootstrap5.3.scss +80 -0
  96. package/styles/dashboard-layout/icons/_fluent2.scss +80 -0
  97. package/styles/dashboard-layout/material-dark.css +41 -42
  98. package/styles/dashboard-layout/material.css +41 -42
  99. package/styles/dashboard-layout/material3-dark.css +48 -47
  100. package/styles/dashboard-layout/material3.css +48 -47
  101. package/styles/dashboard-layout/tailwind-dark.css +57 -55
  102. package/styles/dashboard-layout/tailwind.css +57 -55
  103. package/styles/fabric-dark.css +359 -197
  104. package/styles/fabric-dark.scss +14 -5
  105. package/styles/fabric.css +359 -197
  106. package/styles/fabric.scss +14 -5
  107. package/styles/fluent-dark.css +370 -206
  108. package/styles/fluent-dark.scss +14 -5
  109. package/styles/fluent.css +370 -206
  110. package/styles/fluent.scss +14 -5
  111. package/styles/fluent2.css +2803 -0
  112. package/styles/fluent2.scss +14 -0
  113. package/styles/highcontrast-light.css +357 -196
  114. package/styles/highcontrast-light.scss +13 -5
  115. package/styles/highcontrast.css +361 -197
  116. package/styles/highcontrast.scss +14 -5
  117. package/styles/material-dark.css +357 -196
  118. package/styles/material-dark.scss +14 -5
  119. package/styles/material.css +359 -197
  120. package/styles/material.scss +14 -5
  121. package/styles/material3-dark.css +370 -204
  122. package/styles/material3-dark.scss +14 -5
  123. package/styles/material3.css +370 -204
  124. package/styles/material3.scss +14 -5
  125. package/styles/splitter/_bootstrap5.3-definition.scss +31 -0
  126. package/styles/splitter/_fluent2-definition.scss +31 -0
  127. package/styles/splitter/_layout.scss +0 -4
  128. package/styles/splitter/_material3-definition.scss +0 -7
  129. package/styles/splitter/_theme.scss +0 -4
  130. package/styles/splitter/bootstrap-dark.css +115 -59
  131. package/styles/splitter/bootstrap.css +115 -59
  132. package/styles/splitter/bootstrap4.css +113 -58
  133. package/styles/splitter/bootstrap5-dark.css +113 -58
  134. package/styles/splitter/bootstrap5.css +113 -58
  135. package/styles/splitter/fabric-dark.css +115 -59
  136. package/styles/splitter/fabric.css +115 -59
  137. package/styles/splitter/fluent-dark.css +113 -58
  138. package/styles/splitter/fluent.css +113 -58
  139. package/styles/splitter/fluent2.css +1578 -0
  140. package/styles/splitter/fluent2.scss +4 -0
  141. package/styles/splitter/highcontrast-light.css +115 -59
  142. package/styles/splitter/highcontrast.css +115 -59
  143. package/styles/splitter/icons/_bootstrap5.3.scss +39 -0
  144. package/styles/splitter/icons/_fluent2.scss +39 -0
  145. package/styles/splitter/material-dark.css +113 -58
  146. package/styles/splitter/material.css +113 -58
  147. package/styles/splitter/material3-dark.css +114 -59
  148. package/styles/splitter/material3.css +114 -59
  149. package/styles/splitter/tailwind-dark.css +113 -58
  150. package/styles/splitter/tailwind.css +113 -58
  151. package/styles/tailwind-dark.css +377 -213
  152. package/styles/tailwind-dark.scss +14 -5
  153. package/styles/tailwind.css +377 -213
  154. package/styles/tailwind.scss +14 -5
  155. package/styles/timeline/_bootstrap5.3-definition.scss +18 -0
  156. package/styles/timeline/_fluent2-definition.scss +18 -0
  157. package/styles/timeline/_layout.scss +46 -7
  158. package/styles/timeline/bootstrap-dark.css +99 -39
  159. package/styles/timeline/bootstrap.css +99 -39
  160. package/styles/timeline/bootstrap4.css +99 -39
  161. package/styles/timeline/bootstrap5-dark.css +99 -39
  162. package/styles/timeline/bootstrap5.css +99 -39
  163. package/styles/timeline/fabric-dark.css +99 -39
  164. package/styles/timeline/fabric.css +99 -39
  165. package/styles/timeline/fluent-dark.css +99 -39
  166. package/styles/timeline/fluent.css +99 -39
  167. package/styles/timeline/fluent2.css +1332 -0
  168. package/styles/timeline/fluent2.scss +3 -0
  169. package/styles/timeline/highcontrast-light.css +99 -39
  170. package/styles/timeline/highcontrast.css +99 -39
  171. package/styles/timeline/material-dark.css +99 -39
  172. package/styles/timeline/material.css +99 -39
  173. package/styles/timeline/material3-dark.css +100 -40
  174. package/styles/timeline/material3.css +100 -40
  175. package/styles/timeline/tailwind-dark.css +99 -39
  176. package/styles/timeline/tailwind.css +99 -39
  177. package/CHANGELOG.md +0 -601
@@ -1,4 +1,3 @@
1
- /*! card layout */
2
1
  .e-bigger .e-card,
3
2
  .e-bigger.e-card {
4
3
  line-height: 48px;
@@ -144,15 +143,20 @@
144
143
 
145
144
  .e-card {
146
145
  border-radius: 2px;
147
- box-sizing: border-box;
146
+ -webkit-box-sizing: border-box;
147
+ box-sizing: border-box;
148
+ display: -webkit-box;
148
149
  display: -ms-flexbox;
149
150
  display: flex;
150
- -ms-flex-direction: column;
151
- flex-direction: column;
151
+ -webkit-box-orient: vertical;
152
+ -webkit-box-direction: normal;
153
+ -ms-flex-direction: column;
154
+ flex-direction: column;
152
155
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
153
156
  font-size: 15px;
154
- -ms-flex-pack: center;
155
- justify-content: center;
157
+ -webkit-box-pack: center;
158
+ -ms-flex-pack: center;
159
+ justify-content: center;
156
160
  line-height: 36px;
157
161
  min-height: 36px;
158
162
  overflow: hidden;
@@ -162,11 +166,13 @@
162
166
  width: 100%;
163
167
  }
164
168
  .e-card > * {
165
- -ms-flex-pack: center;
166
- justify-content: center;
169
+ -webkit-box-pack: center;
170
+ -ms-flex-pack: center;
171
+ justify-content: center;
167
172
  }
168
173
  .e-card > .e-card-header-title {
169
- box-sizing: border-box;
174
+ -webkit-box-sizing: border-box;
175
+ box-sizing: border-box;
170
176
  font-size: 16px;
171
177
  line-height: 1.5;
172
178
  padding: 12px;
@@ -199,22 +205,30 @@
199
205
  font-size: 12px;
200
206
  }
201
207
  .e-card .e-card-stacked {
208
+ display: -webkit-box;
202
209
  display: -ms-flexbox;
203
210
  display: flex;
204
- -ms-flex-direction: column;
205
- flex-direction: column;
206
- -ms-flex-pack: center;
207
- justify-content: center;
211
+ -webkit-box-orient: vertical;
212
+ -webkit-box-direction: normal;
213
+ -ms-flex-direction: column;
214
+ flex-direction: column;
215
+ -webkit-box-pack: center;
216
+ -ms-flex-pack: center;
217
+ justify-content: center;
208
218
  overflow: hidden;
209
219
  }
210
220
  .e-card.e-card-horizontal,
211
221
  .e-card .e-card-horizontal {
222
+ display: -webkit-box;
212
223
  display: -ms-flexbox;
213
224
  display: flex;
214
- -ms-flex-direction: row;
215
- flex-direction: row;
216
- -ms-flex-pack: center;
217
- justify-content: center;
225
+ -webkit-box-orient: horizontal;
226
+ -webkit-box-direction: normal;
227
+ -ms-flex-direction: row;
228
+ flex-direction: row;
229
+ -webkit-box-pack: center;
230
+ -ms-flex-pack: center;
231
+ justify-content: center;
218
232
  }
219
233
  .e-card.e-card-horizontal .e-card-image,
220
234
  .e-card.e-card-horizontal img,
@@ -227,21 +241,27 @@
227
241
  padding: 2px;
228
242
  }
229
243
  .e-card.e-card-horizontal > * {
230
- -ms-flex: 1;
231
- flex: 1;
244
+ -webkit-box-flex: 1;
245
+ -ms-flex: 1;
246
+ flex: 1;
232
247
  }
233
248
  .e-card.e-card-horizontal .e-card-stacked {
249
+ display: -webkit-box;
234
250
  display: -ms-flexbox;
235
251
  display: flex;
236
- -ms-flex: 1;
237
- flex: 1;
238
- -ms-flex-direction: column;
239
- flex-direction: column;
252
+ -webkit-box-flex: 1;
253
+ -ms-flex: 1;
254
+ flex: 1;
255
+ -webkit-box-orient: vertical;
256
+ -webkit-box-direction: normal;
257
+ -ms-flex-direction: column;
258
+ flex-direction: column;
240
259
  overflow: hidden;
241
260
  }
242
261
  .e-card.e-card-horizontal .e-card-stacked > :first-child {
243
- -ms-flex-positive: 1;
244
- flex-grow: 1;
262
+ -webkit-box-flex: 1;
263
+ -ms-flex-positive: 1;
264
+ flex-grow: 1;
245
265
  }
246
266
  .e-card .e-card-separator {
247
267
  display: block;
@@ -250,13 +270,18 @@
250
270
  border-radius: 50%;
251
271
  }
252
272
  .e-card .e-card-header {
253
- box-sizing: border-box;
273
+ -webkit-box-sizing: border-box;
274
+ box-sizing: border-box;
275
+ display: -webkit-box;
254
276
  display: -ms-flexbox;
255
277
  display: flex;
256
- -ms-flex-direction: row;
257
- flex-direction: row;
258
- -ms-flex-pack: center;
259
- justify-content: center;
278
+ -webkit-box-orient: horizontal;
279
+ -webkit-box-direction: normal;
280
+ -ms-flex-direction: row;
281
+ flex-direction: row;
282
+ -webkit-box-pack: center;
283
+ -ms-flex-pack: center;
284
+ justify-content: center;
260
285
  line-height: normal;
261
286
  min-height: 22.5px;
262
287
  padding: 16px 16px 0 16px;
@@ -267,24 +292,30 @@
267
292
  padding-right: 0;
268
293
  }
269
294
  .e-card .e-card-header .e-card-actions {
270
- -ms-flex-pack: start;
271
- justify-content: flex-start;
295
+ -webkit-box-pack: start;
296
+ -ms-flex-pack: start;
297
+ justify-content: flex-start;
272
298
  }
273
299
  .e-card .e-card-header .e-card-header-image {
274
300
  -ms-flex-item-align: center;
275
301
  align-self: center;
302
+ display: -webkit-box;
276
303
  display: -ms-flexbox;
277
304
  display: flex;
278
305
  }
279
306
  .e-card .e-card-header .e-card-header-caption {
280
307
  -ms-flex-item-align: center;
281
308
  align-self: center;
309
+ display: -webkit-box;
282
310
  display: -ms-flexbox;
283
311
  display: flex;
284
- -ms-flex: 1;
285
- flex: 1;
286
- -ms-flex-direction: column;
287
- flex-direction: column;
312
+ -webkit-box-flex: 1;
313
+ -ms-flex: 1;
314
+ flex: 1;
315
+ -webkit-box-orient: vertical;
316
+ -webkit-box-direction: normal;
317
+ -ms-flex-direction: column;
318
+ flex-direction: column;
288
319
  overflow: hidden;
289
320
  padding: 0 0 0 12px;
290
321
  }
@@ -329,7 +360,8 @@
329
360
  }
330
361
  .e-card .e-card-image .e-card-title {
331
362
  bottom: 0;
332
- box-sizing: border-box;
363
+ -webkit-box-sizing: border-box;
364
+ box-sizing: border-box;
333
365
  font-size: 16px;
334
366
  line-height: 30px;
335
367
  min-height: 30px;
@@ -350,28 +382,34 @@
350
382
  text-align: right;
351
383
  }
352
384
  .e-card .e-card-actions {
353
- box-sizing: border-box;
385
+ -webkit-box-sizing: border-box;
386
+ box-sizing: border-box;
354
387
  display: inline-block;
355
- -ms-flex-pack: start;
356
- justify-content: flex-start;
388
+ -webkit-box-pack: start;
389
+ -ms-flex-pack: start;
390
+ justify-content: flex-start;
357
391
  padding: 16px;
358
392
  }
359
393
  .e-card .e-card-actions.e-card-vertical {
394
+ display: -webkit-box;
360
395
  display: -ms-flexbox;
361
396
  display: flex;
362
- -ms-flex-direction: column;
363
- flex-direction: column;
397
+ -webkit-box-orient: vertical;
398
+ -webkit-box-direction: normal;
399
+ -ms-flex-direction: column;
400
+ flex-direction: column;
364
401
  padding: 12px;
365
402
  }
366
403
  .e-card .e-card-actions.e-card-vertical .e-card-btn,
367
404
  .e-card .e-card-actions.e-card-vertical a {
368
405
  -ms-flex-item-align: initial;
369
- -ms-grid-row-align: initial;
370
406
  align-self: initial;
371
- box-sizing: border-box;
407
+ -webkit-box-sizing: border-box;
408
+ box-sizing: border-box;
372
409
  display: inline-block;
373
- -ms-flex-pack: center;
374
- justify-content: center;
410
+ -webkit-box-pack: center;
411
+ -ms-flex-pack: center;
412
+ justify-content: center;
375
413
  margin: 0 0 6px 0;
376
414
  text-align: center;
377
415
  width: 100%;
@@ -382,11 +420,13 @@
382
420
  }
383
421
  .e-card .e-card-actions button,
384
422
  .e-card .e-card-actions a {
385
- -ms-flex-align: center;
386
- align-items: center;
423
+ -webkit-box-align: center;
424
+ -ms-flex-align: center;
425
+ align-items: center;
387
426
  -ms-flex-item-align: center;
388
427
  align-self: center;
389
428
  cursor: pointer;
429
+ display: -webkit-inline-box;
390
430
  display: -ms-inline-flexbox;
391
431
  display: inline-flex;
392
432
  overflow: hidden;
@@ -395,6 +435,7 @@
395
435
  }
396
436
  .e-card .e-card-actions .e-card-btn span,
397
437
  .e-card .e-card-actions .e-card-btn span.e-icons {
438
+ display: -webkit-box;
398
439
  display: -ms-flexbox;
399
440
  display: flex;
400
441
  font-size: 18px;
@@ -405,10 +446,12 @@
405
446
  .e-card .e-card-actions .e-card-btn span.e-icons::before {
406
447
  -ms-flex-item-align: center;
407
448
  align-self: center;
449
+ display: -webkit-box;
408
450
  display: -ms-flexbox;
409
451
  display: flex;
410
- -ms-flex-pack: center;
411
- justify-content: center;
452
+ -webkit-box-pack: center;
453
+ -ms-flex-pack: center;
454
+ justify-content: center;
412
455
  width: inherit;
413
456
  }
414
457
  .e-card .e-card-actions .e-card-btn > * {
@@ -456,13 +499,13 @@
456
499
  text-overflow: ellipsis;
457
500
  }
458
501
 
459
- /*! card theme */
460
502
  /* stylelint-disable property-no-vendor-prefix */
461
503
  .e-card {
462
504
  -webkit-tap-highlight-color: #0078d4;
463
505
  background: #fff;
464
506
  border: 0 solid #edebe9;
465
- box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
507
+ -webkit-box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
508
+ box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
466
509
  color: #201f1e;
467
510
  outline: none;
468
511
  }
@@ -525,10 +568,12 @@
525
568
  }
526
569
 
527
570
  .e-card-hover:hover {
528
- box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
571
+ -webkit-box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
572
+ box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
529
573
  }
530
574
 
531
575
  .e-card-active:active {
532
576
  border: 1px solid #d2d0ce;
533
- box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
577
+ -webkit-box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
578
+ box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
534
579
  }