@syncfusion/ej2-layouts 26.2.9 → 27.1.48

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 (274) hide show
  1. package/README.md +33 -33
  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 +3 -1
  6. package/dist/es6/ej2-layouts.es2015.js.map +1 -1
  7. package/dist/es6/ej2-layouts.es5.js +3 -1
  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 +8 -7
  13. package/src/splitter/splitter.js +3 -1
  14. package/styles/avatar/_layout.scss +6 -6
  15. package/styles/avatar/bootstrap5.3.css +66 -0
  16. package/styles/avatar/bootstrap5.3.scss +3 -0
  17. package/styles/bootstrap-dark-lite.css +1521 -0
  18. package/styles/bootstrap-dark-lite.scss +14 -0
  19. package/styles/bootstrap-dark.css +213 -211
  20. package/styles/bootstrap-dark.scss +5 -1
  21. package/styles/bootstrap-lite.css +1521 -0
  22. package/styles/bootstrap-lite.scss +14 -0
  23. package/styles/bootstrap.css +214 -212
  24. package/styles/bootstrap.scss +5 -1
  25. package/styles/bootstrap4-lite.css +1517 -0
  26. package/styles/bootstrap4-lite.scss +14 -0
  27. package/styles/bootstrap4.css +222 -220
  28. package/styles/bootstrap4.scss +5 -1
  29. package/styles/bootstrap5-dark-lite.css +1538 -0
  30. package/styles/bootstrap5-dark-lite.scss +14 -0
  31. package/styles/bootstrap5-dark.css +214 -212
  32. package/styles/bootstrap5-dark.scss +5 -1
  33. package/styles/bootstrap5-lite.css +1538 -0
  34. package/styles/bootstrap5-lite.scss +14 -0
  35. package/styles/bootstrap5.3-lite.css +1530 -0
  36. package/styles/bootstrap5.3-lite.scss +14 -0
  37. package/styles/bootstrap5.3.css +1764 -0
  38. package/styles/bootstrap5.3.scss +18 -0
  39. package/styles/bootstrap5.css +214 -212
  40. package/styles/bootstrap5.scss +5 -1
  41. package/styles/card/_bigger.scss +165 -0
  42. package/styles/card/_layout.scss +2 -164
  43. package/styles/card/bootstrap-dark.css +135 -135
  44. package/styles/card/bootstrap-dark.scss +1 -0
  45. package/styles/card/bootstrap.css +136 -136
  46. package/styles/card/bootstrap.scss +1 -0
  47. package/styles/card/bootstrap4.css +144 -144
  48. package/styles/card/bootstrap4.scss +1 -0
  49. package/styles/card/bootstrap5-dark.css +136 -136
  50. package/styles/card/bootstrap5-dark.scss +1 -0
  51. package/styles/card/bootstrap5.3.css +560 -0
  52. package/styles/card/bootstrap5.3.scss +4 -0
  53. package/styles/card/bootstrap5.css +136 -136
  54. package/styles/card/bootstrap5.scss +1 -0
  55. package/styles/card/fabric-dark.css +135 -135
  56. package/styles/card/fabric-dark.scss +1 -0
  57. package/styles/card/fabric.css +136 -136
  58. package/styles/card/fabric.scss +1 -0
  59. package/styles/card/fluent-dark.css +143 -143
  60. package/styles/card/fluent-dark.scss +1 -0
  61. package/styles/card/fluent.css +143 -143
  62. package/styles/card/fluent.scss +1 -0
  63. package/styles/card/fluent2.css +138 -138
  64. package/styles/card/fluent2.scss +1 -0
  65. package/styles/card/highcontrast-light.css +135 -135
  66. package/styles/card/highcontrast-light.scss +1 -0
  67. package/styles/card/highcontrast.css +136 -136
  68. package/styles/card/highcontrast.scss +1 -0
  69. package/styles/card/material-dark.css +135 -135
  70. package/styles/card/material-dark.scss +1 -0
  71. package/styles/card/material.css +135 -135
  72. package/styles/card/material.scss +1 -0
  73. package/styles/card/material3-dark.css +135 -135
  74. package/styles/card/material3-dark.scss +1 -0
  75. package/styles/card/material3.css +135 -135
  76. package/styles/card/material3.scss +1 -0
  77. package/styles/card/tailwind-dark.css +135 -135
  78. package/styles/card/tailwind-dark.scss +1 -0
  79. package/styles/card/tailwind.css +135 -135
  80. package/styles/card/tailwind.scss +1 -0
  81. package/styles/dashboard-layout/_bigger.scss +39 -0
  82. package/styles/dashboard-layout/_bootstrap5.3-definition.scss +5 -5
  83. package/styles/dashboard-layout/_fluent2-definition.scss +3 -4
  84. package/styles/dashboard-layout/_layout.scss +0 -32
  85. package/styles/dashboard-layout/_theme.scss +0 -6
  86. package/styles/dashboard-layout/bootstrap-dark.css +14 -13
  87. package/styles/dashboard-layout/bootstrap-dark.scss +1 -0
  88. package/styles/dashboard-layout/bootstrap.css +14 -13
  89. package/styles/dashboard-layout/bootstrap.scss +1 -0
  90. package/styles/dashboard-layout/bootstrap4.css +14 -13
  91. package/styles/dashboard-layout/bootstrap4.scss +1 -0
  92. package/styles/dashboard-layout/bootstrap5-dark.css +14 -13
  93. package/styles/dashboard-layout/bootstrap5-dark.scss +1 -0
  94. package/styles/dashboard-layout/bootstrap5.3.css +300 -0
  95. package/styles/dashboard-layout/bootstrap5.3.scss +5 -0
  96. package/styles/dashboard-layout/bootstrap5.css +14 -13
  97. package/styles/dashboard-layout/bootstrap5.scss +1 -0
  98. package/styles/dashboard-layout/fabric-dark.css +14 -13
  99. package/styles/dashboard-layout/fabric-dark.scss +1 -0
  100. package/styles/dashboard-layout/fabric.css +14 -13
  101. package/styles/dashboard-layout/fabric.scss +1 -0
  102. package/styles/dashboard-layout/fluent-dark.css +14 -13
  103. package/styles/dashboard-layout/fluent-dark.scss +1 -0
  104. package/styles/dashboard-layout/fluent.css +14 -13
  105. package/styles/dashboard-layout/fluent.scss +1 -0
  106. package/styles/dashboard-layout/fluent2.css +18 -17
  107. package/styles/dashboard-layout/fluent2.scss +1 -0
  108. package/styles/dashboard-layout/highcontrast-light.css +14 -13
  109. package/styles/dashboard-layout/highcontrast-light.scss +1 -0
  110. package/styles/dashboard-layout/highcontrast.css +14 -13
  111. package/styles/dashboard-layout/highcontrast.scss +1 -0
  112. package/styles/dashboard-layout/material-dark.css +14 -13
  113. package/styles/dashboard-layout/material-dark.scss +1 -0
  114. package/styles/dashboard-layout/material.css +14 -13
  115. package/styles/dashboard-layout/material.scss +1 -0
  116. package/styles/dashboard-layout/material3-dark.css +14 -13
  117. package/styles/dashboard-layout/material3-dark.scss +1 -0
  118. package/styles/dashboard-layout/material3.css +14 -13
  119. package/styles/dashboard-layout/material3.scss +1 -0
  120. package/styles/dashboard-layout/tailwind-dark.css +21 -19
  121. package/styles/dashboard-layout/tailwind-dark.scss +1 -0
  122. package/styles/dashboard-layout/tailwind.css +21 -19
  123. package/styles/dashboard-layout/tailwind.scss +1 -0
  124. package/styles/fabric-dark-lite.css +1521 -0
  125. package/styles/fabric-dark-lite.scss +14 -0
  126. package/styles/fabric-dark.css +213 -211
  127. package/styles/fabric-dark.scss +5 -1
  128. package/styles/fabric-lite.css +1531 -0
  129. package/styles/fabric-lite.scss +14 -0
  130. package/styles/fabric.css +214 -212
  131. package/styles/fabric.scss +5 -1
  132. package/styles/fluent-dark-lite.css +1546 -0
  133. package/styles/fluent-dark-lite.scss +14 -0
  134. package/styles/fluent-dark.css +221 -219
  135. package/styles/fluent-dark.scss +5 -1
  136. package/styles/fluent-lite.css +1546 -0
  137. package/styles/fluent-lite.scss +14 -0
  138. package/styles/fluent.css +221 -219
  139. package/styles/fluent.scss +5 -1
  140. package/styles/fluent2-lite.css +1545 -0
  141. package/styles/fluent2-lite.scss +14 -0
  142. package/styles/fluent2.css +225 -219
  143. package/styles/fluent2.scss +5 -1
  144. package/styles/highcontrast-light-lite.css +1458 -0
  145. package/styles/highcontrast-light-lite.scss +13 -0
  146. package/styles/highcontrast-light.css +213 -211
  147. package/styles/highcontrast-light.scss +5 -1
  148. package/styles/highcontrast-lite.css +1530 -0
  149. package/styles/highcontrast-lite.scss +14 -0
  150. package/styles/highcontrast.css +214 -212
  151. package/styles/highcontrast.scss +5 -1
  152. package/styles/material-dark-lite.css +1519 -0
  153. package/styles/material-dark-lite.scss +14 -0
  154. package/styles/material-dark.css +213 -211
  155. package/styles/material-dark.scss +5 -1
  156. package/styles/material-lite.css +1521 -0
  157. package/styles/material-lite.scss +14 -0
  158. package/styles/material.css +213 -211
  159. package/styles/material.scss +5 -1
  160. package/styles/material3-dark-lite.css +1536 -0
  161. package/styles/material3-dark-lite.scss +14 -0
  162. package/styles/material3-dark.css +213 -211
  163. package/styles/material3-dark.scss +5 -1
  164. package/styles/material3-lite.css +1538 -0
  165. package/styles/material3-lite.scss +14 -0
  166. package/styles/material3.css +213 -211
  167. package/styles/material3.scss +5 -1
  168. package/styles/splitter/_bigger.scss +78 -0
  169. package/styles/splitter/_layout.scss +0 -58
  170. package/styles/splitter/bootstrap-dark.css +40 -41
  171. package/styles/splitter/bootstrap-dark.scss +1 -0
  172. package/styles/splitter/bootstrap.css +40 -41
  173. package/styles/splitter/bootstrap.scss +1 -0
  174. package/styles/splitter/bootstrap4.css +40 -41
  175. package/styles/splitter/bootstrap4.scss +1 -0
  176. package/styles/splitter/bootstrap5-dark.css +40 -41
  177. package/styles/splitter/bootstrap5-dark.scss +1 -0
  178. package/styles/splitter/bootstrap5.3.css +547 -0
  179. package/styles/splitter/bootstrap5.3.scss +5 -0
  180. package/styles/splitter/bootstrap5.css +40 -41
  181. package/styles/splitter/bootstrap5.scss +1 -0
  182. package/styles/splitter/fabric-dark.css +40 -41
  183. package/styles/splitter/fabric-dark.scss +1 -0
  184. package/styles/splitter/fabric.css +40 -41
  185. package/styles/splitter/fabric.scss +1 -0
  186. package/styles/splitter/fluent-dark.css +40 -41
  187. package/styles/splitter/fluent-dark.scss +1 -0
  188. package/styles/splitter/fluent.css +40 -41
  189. package/styles/splitter/fluent.scss +1 -0
  190. package/styles/splitter/fluent2.css +40 -41
  191. package/styles/splitter/fluent2.scss +1 -0
  192. package/styles/splitter/highcontrast-light.css +40 -41
  193. package/styles/splitter/highcontrast-light.scss +1 -0
  194. package/styles/splitter/highcontrast.css +40 -41
  195. package/styles/splitter/highcontrast.scss +1 -0
  196. package/styles/splitter/icons/_bds.scss +0 -18
  197. package/styles/splitter/icons/_bootstrap-dark.scss +0 -18
  198. package/styles/splitter/icons/_bootstrap.scss +0 -18
  199. package/styles/splitter/icons/_bootstrap4.scss +0 -18
  200. package/styles/splitter/icons/_bootstrap5.3.scss +0 -18
  201. package/styles/splitter/icons/_bootstrap5.scss +0 -18
  202. package/styles/splitter/icons/_fabric-dark.scss +0 -18
  203. package/styles/splitter/icons/_fabric.scss +0 -18
  204. package/styles/splitter/icons/_fluent.scss +0 -18
  205. package/styles/splitter/icons/_fluent2.scss +0 -18
  206. package/styles/splitter/icons/_fusionnew.scss +0 -18
  207. package/styles/splitter/icons/_highcontrast-light.scss +0 -18
  208. package/styles/splitter/icons/_highcontrast.scss +0 -18
  209. package/styles/splitter/icons/_material-dark.scss +0 -18
  210. package/styles/splitter/icons/_material.scss +0 -18
  211. package/styles/splitter/icons/_material3.scss +0 -18
  212. package/styles/splitter/icons/_tailwind.scss +0 -18
  213. package/styles/splitter/material-dark.css +40 -41
  214. package/styles/splitter/material-dark.scss +1 -0
  215. package/styles/splitter/material.css +40 -41
  216. package/styles/splitter/material.scss +1 -0
  217. package/styles/splitter/material3-dark.css +40 -41
  218. package/styles/splitter/material3-dark.scss +1 -0
  219. package/styles/splitter/material3.css +40 -41
  220. package/styles/splitter/material3.scss +1 -0
  221. package/styles/splitter/tailwind-dark.css +40 -41
  222. package/styles/splitter/tailwind-dark.scss +1 -0
  223. package/styles/splitter/tailwind.css +40 -41
  224. package/styles/splitter/tailwind.scss +1 -0
  225. package/styles/tailwind-dark-lite.css +1546 -0
  226. package/styles/tailwind-dark-lite.scss +14 -0
  227. package/styles/tailwind-dark.css +220 -217
  228. package/styles/tailwind-dark.scss +5 -1
  229. package/styles/tailwind-lite.css +1546 -0
  230. package/styles/tailwind-lite.scss +14 -0
  231. package/styles/tailwind.css +220 -217
  232. package/styles/tailwind.scss +5 -1
  233. package/styles/timeline/_bigger.scss +48 -0
  234. package/styles/timeline/_layout.scss +6 -42
  235. package/styles/timeline/_theme.scss +13 -1
  236. package/styles/timeline/bootstrap-dark.css +24 -23
  237. package/styles/timeline/bootstrap-dark.scss +1 -0
  238. package/styles/timeline/bootstrap.css +24 -23
  239. package/styles/timeline/bootstrap.scss +1 -0
  240. package/styles/timeline/bootstrap4.css +24 -23
  241. package/styles/timeline/bootstrap4.scss +1 -0
  242. package/styles/timeline/bootstrap5-dark.css +24 -23
  243. package/styles/timeline/bootstrap5-dark.scss +1 -0
  244. package/styles/timeline/bootstrap5.3.css +303 -0
  245. package/styles/timeline/bootstrap5.3.scss +4 -0
  246. package/styles/timeline/bootstrap5.css +24 -23
  247. package/styles/timeline/bootstrap5.scss +1 -0
  248. package/styles/timeline/fabric-dark.css +24 -23
  249. package/styles/timeline/fabric-dark.scss +1 -0
  250. package/styles/timeline/fabric.css +24 -23
  251. package/styles/timeline/fabric.scss +1 -0
  252. package/styles/timeline/fluent-dark.css +24 -23
  253. package/styles/timeline/fluent-dark.scss +1 -0
  254. package/styles/timeline/fluent.css +24 -23
  255. package/styles/timeline/fluent.scss +1 -0
  256. package/styles/timeline/fluent2.css +29 -24
  257. package/styles/timeline/fluent2.scss +1 -0
  258. package/styles/timeline/highcontrast-light.css +24 -23
  259. package/styles/timeline/highcontrast-light.scss +1 -0
  260. package/styles/timeline/highcontrast.css +24 -23
  261. package/styles/timeline/highcontrast.scss +1 -0
  262. package/styles/timeline/material-dark.css +24 -23
  263. package/styles/timeline/material-dark.scss +1 -0
  264. package/styles/timeline/material.css +24 -23
  265. package/styles/timeline/material.scss +1 -0
  266. package/styles/timeline/material3-dark.css +24 -23
  267. package/styles/timeline/material3-dark.scss +1 -0
  268. package/styles/timeline/material3.css +24 -23
  269. package/styles/timeline/material3.scss +1 -0
  270. package/styles/timeline/tailwind-dark.css +24 -23
  271. package/styles/timeline/tailwind-dark.scss +1 -0
  272. package/styles/timeline/tailwind.css +24 -23
  273. package/styles/timeline/tailwind.scss +1 -0
  274. package/hotfix/26.1.35_Vol2.txt +0 -1
package/README.md CHANGED
@@ -14,7 +14,7 @@ The layout package contains cards, avatars, splitter, timeline and Dashboard Lay
14
14
 
15
15
  ![Layout](https://ej2.syncfusion.com/products/images/layout/readme.png)
16
16
 
17
- > This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at [https://www.syncfusion.com/sales/products](https://www.syncfusion.com/sales/products/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm) or start a free 30-day trial [here](https://www.syncfusion.com/account/manage-trials/start-trials/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm).
17
+ > This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license, you can [purchase](https://www.syncfusion.com/sales/products/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm) or start a free 30-day trial [here](https://www.syncfusion.com/account/manage-trials/start-trials/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm).
18
18
 
19
19
  > A free [community license](https://www.syncfusion.com/products/communitylicense/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
20
20
 
@@ -32,23 +32,23 @@ Following list of controls are available in the package
32
32
 
33
33
  * [JavaScript Card](https://www.syncfusion.com/javascript-ui-controls/js-card?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm) - Container used to display content in specific structure.
34
34
  * [Getting Started](https://ej2.syncfusion.com/documentation/card/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm)
35
- * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/card/basic.html)
35
+ * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/card/basic.html)
36
36
 
37
37
  * [JavaScript Avatar](https://www.syncfusion.com/javascript-ui-controls/js-avatar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm) - Used to add images or initials or icons in different shapes and sizes to your application.
38
38
  * [Getting Started](https://ej2.syncfusion.com/documentation/avatar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm)
39
- * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/avatar/default.html)
39
+ * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/avatar/default.html)
40
40
 
41
41
  * [JavaScript Splitter](https://www.syncfusion.com/javascript-ui-controls/js-splitter?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm) - Used to construct a different layout using its multiple and nested panes with resizable.
42
42
  * [Getting Started](https://ej2.syncfusion.com/documentation/splitter/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm)
43
- * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/splitter/default.html)
43
+ * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/splitter/default.html)
44
44
 
45
45
  * [JavaScript Timeline](https://www.syncfusion.com/javascript-ui-controls/js-timeline?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm) - Used to build timelines to showcases user activities, tracking progress, narrating historical timelines, and more.
46
46
  * [Getting Started](https://ej2.syncfusion.com/documentation/timeline/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm)
47
- * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/timeline/default.html)
47
+ * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/timeline/default.html)
48
48
 
49
49
  * [JavaScript Dashboard Layout](https://www.syncfusion.com/javascript-ui-controls/js-dashboard-layout?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm) - Used to build dashboards with panels that holds the UI components and allow resize, reorder, drag-n-drop, remove and add options.
50
50
  * [Getting Started](https://ej2.syncfusion.com/documentation/dashboard-layout/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm)
51
- * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/dashboard-layout/default.html)
51
+ * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/dashboard-layout/default.html)
52
52
 
53
53
  ## Supported Frameworks
54
54
 
@@ -63,30 +63,30 @@ These components are available in following list of:
63
63
  ## Use Case samples
64
64
 
65
65
  * IT Asset Management ([Live Demo](https://ej2.syncfusion.com/showcase/vue/assetmanagement/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm))
66
- * Swipeable Card ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/card/swipeable.html))
67
- * Flip Card ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/card/flip.html))
68
- * Tile View ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/card/tile.html))
69
- * Contact Application ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/avatar/listview.html))
70
- * Avatar Badge ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/avatar/badge.html))
71
- * Avatar Card ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/avatar/card.html))
72
- * SEO Analysis Dashboard ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/dashboardlayout/analytics-dashboard.html))
66
+ * Swipeable Card ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/card/swipeable.html))
67
+ * Flip Card ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/card/flip.html))
68
+ * Tile View ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/card/tile.html))
69
+ * Contact Application ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/avatar/listview.html))
70
+ * Avatar Badge ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/avatar/badge.html))
71
+ * Avatar Card ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/avatar/card.html))
72
+ * SEO Analysis Dashboard ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/dashboard-layout/analytics-dashboard.html))
73
73
 
74
74
  ## Key Features
75
75
 
76
76
  * Card
77
77
 
78
- * [Header](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/card/basic.html) - Header supports to include title, subtitle along with image.
78
+ * [Header](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/card/basic.html) - Header supports to include title, subtitle along with image.
79
79
 
80
- * [Images and Title](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/card/reveal.html) - Support to include images with customizable caption positions in it.
80
+ * [Images and Title](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/card/reveal.html) - Support to include images with customizable caption positions in it.
81
81
 
82
- * [Action Buttons](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/card/vertical.html) - Supports to add buttons within the card either in vertical or horizontal alignment.
82
+ * [Action Buttons](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/card/vertical.html) - Supports to add buttons within the card either in vertical or horizontal alignment.
83
83
 
84
- * [Horizontal Card](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/card/horizontal.html) - Allows to align card elements horizontally and also allows to stack the content vertically within horizontal alignment.
84
+ * [Horizontal Card](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/card/horizontal.html) - Allows to align card elements horizontally and also allows to stack the content vertically within horizontal alignment.
85
85
 
86
86
  * Avatar
87
- * [Types](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/avatar/default.html) - Provided `2` types of avatars such as `default` and `circle`.
87
+ * [Types](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/avatar/default.html) - Provided `2` types of avatars such as `default` and `circle`.
88
88
 
89
- * [Sizes](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/avatar/types.html) - Supports `7` different sizes to adapt the various application scenario.
89
+ * [Sizes](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/avatar/types.html) - Supports `7` different sizes to adapt the various application scenario.
90
90
 
91
91
  * xsmall
92
92
  * small
@@ -96,37 +96,37 @@ These components are available in following list of:
96
96
 
97
97
  * Splitter
98
98
 
99
- * [Multiple Panes](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/splitter/default.html) - Provided an option to configure more than two panes.
99
+ * [Multiple Panes](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/splitter/default.html) - Provided an option to configure more than two panes.
100
100
 
101
- * [Resizable Panes](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/splitter/code-editor-layout.html) - Supports resizable to adjust its pane size dynamically.
101
+ * [Resizable Panes](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/splitter/code-editor-layout.html) - Supports resizable to adjust its pane size dynamically.
102
102
 
103
- * [Orientation](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/splitter/default.html) - The panes can orient either `horizontally` or `vertically`.
103
+ * [Orientation](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/splitter/default.html) - The panes can orient either `horizontally` or `vertically`.
104
104
 
105
- * [Integration](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/splitter/accordion-navigation-menu.html) - Other JavaScript UI controls can be integrated within panes.
105
+ * [Integration](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/splitter/accordion-navigation-menu.html) - Other JavaScript UI controls can be integrated within panes.
106
106
 
107
- * [Nested Panes](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/splitter/code-editor-layout.html) - Another splitter can be integrated within panes to create a complex layout.
107
+ * [Nested Panes](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/splitter/code-editor-layout.html) - Another splitter can be integrated within panes to create a complex layout.
108
108
 
109
109
  * Timeline
110
110
 
111
- * [Orientation](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/timeline/api.html) - Display items in a horizontal or vertical orientation.
111
+ * [Orientation](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/timeline/api.html) - Display items in a horizontal or vertical orientation.
112
112
 
113
- * [Opposite content](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/timeline/api.html) - Display additional information opposite to the item content.
113
+ * [Opposite content](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/timeline/api.html) - Display additional information opposite to the item content.
114
114
 
115
- * [Items alignment](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/timeline/api.html) - Items content and opposite content can be aligned - before, after, alternate, or alternate reverse.
115
+ * [Items alignment](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/timeline/api.html) - Items content and opposite content can be aligned - before, after, alternate, or alternate reverse.
116
116
 
117
- * [Reverse timeline](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/timeline/api.html) - Shows the timeline items in the reverse order.
117
+ * [Reverse timeline](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/timeline/api.html) - Shows the timeline items in the reverse order.
118
118
 
119
- * [Templates](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/timeline/template.html) - Customize the default appearance, including styling the dot item, templated content, and more.
119
+ * [Templates](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/timeline/template.html) - Customize the default appearance, including styling the dot item, templated content, and more.
120
120
 
121
121
  * Dashboard Layout
122
122
 
123
- * [Drag and Drop](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/dashboardlayout/properties.html) - Allows drag and drop of panels at the desired location within the dashboard.
123
+ * [Drag and Drop](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/dashboard-layout/properties.html) - Allows drag and drop of panels at the desired location within the dashboard.
124
124
 
125
- * [Floating](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/dashboardlayout/properties.html) - Floats the panels upward when the dragging option is enabled.
125
+ * [Floating](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/dashboard-layout/properties.html) - Floats the panels upward when the dragging option is enabled.
126
126
 
127
- * [Resizing](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/dashboardlayout/properties.html) - Support to resize the panels in any direction as per the requirement.
127
+ * [Resizing](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/dashboard-layout/properties.html) - Support to resize the panels in any direction as per the requirement.
128
128
 
129
- * [MediaQuery](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/material/dashboardlayout/default.html) - Allows the panels to be stacked when the specified resolution is met.
129
+ * [MediaQuery](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/dashboard-layout/default.html) - Allows the panels to be stacked when the specified resolution is met.
130
130
 
131
131
  ## Support
132
132