@syncfusion/ej2-angular-layouts 24.1.41-ngcc → 24.1.41

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 (313) hide show
  1. package/esm2020/public_api.mjs +3 -0
  2. package/esm2020/src/dashboard-layout/dashboardlayout-all.module.mjs +23 -0
  3. package/esm2020/src/dashboard-layout/dashboardlayout.component.mjs +64 -0
  4. package/esm2020/src/dashboard-layout/dashboardlayout.module.mjs +34 -0
  5. package/esm2020/src/dashboard-layout/panels.directive.mjs +72 -0
  6. package/esm2020/src/index.mjs +10 -0
  7. package/esm2020/src/splitter/panesettings.directive.mjs +66 -0
  8. package/esm2020/src/splitter/splitter-all.module.mjs +23 -0
  9. package/esm2020/src/splitter/splitter.component.mjs +64 -0
  10. package/esm2020/src/splitter/splitter.module.mjs +34 -0
  11. package/esm2020/syncfusion-ej2-angular-layouts.mjs +5 -0
  12. package/fesm2015/syncfusion-ej2-angular-layouts.mjs +354 -0
  13. package/fesm2015/syncfusion-ej2-angular-layouts.mjs.map +1 -0
  14. package/fesm2020/syncfusion-ej2-angular-layouts.mjs +354 -0
  15. package/fesm2020/syncfusion-ej2-angular-layouts.mjs.map +1 -0
  16. package/package.json +26 -12
  17. package/src/dashboard-layout/dashboardlayout-all.module.d.ts +6 -0
  18. package/src/dashboard-layout/dashboardlayout.component.d.ts +3 -0
  19. package/src/dashboard-layout/dashboardlayout.module.d.ts +7 -0
  20. package/src/dashboard-layout/panels.directive.d.ts +5 -0
  21. package/src/splitter/panesettings.directive.d.ts +5 -0
  22. package/src/splitter/splitter-all.module.d.ts +6 -0
  23. package/src/splitter/splitter.component.d.ts +3 -0
  24. package/src/splitter/splitter.module.d.ts +7 -0
  25. package/styles/avatar/_all.scss +1 -0
  26. package/styles/avatar/_bootstrap-dark-definition.scss +18 -0
  27. package/styles/avatar/_bootstrap-definition.scss +18 -0
  28. package/styles/avatar/_bootstrap4-definition.scss +18 -0
  29. package/styles/avatar/_bootstrap5-dark-definition.scss +1 -0
  30. package/styles/avatar/_bootstrap5-definition.scss +26 -0
  31. package/styles/avatar/_fabric-dark-definition.scss +18 -0
  32. package/styles/avatar/_fabric-definition.scss +18 -0
  33. package/styles/avatar/_fluent-dark-definition.scss +1 -0
  34. package/styles/avatar/_fluent-definition.scss +25 -0
  35. package/styles/avatar/_fusionnew-definition.scss +26 -0
  36. package/styles/avatar/_highcontrast-definition.scss +18 -0
  37. package/styles/avatar/_highcontrast-light-definition.scss +18 -0
  38. package/styles/avatar/_layout.scss +79 -0
  39. package/styles/avatar/_material-dark-definition.scss +18 -0
  40. package/styles/avatar/_material-definition.scss +18 -0
  41. package/styles/avatar/_material3-dark-definition.scss +1 -0
  42. package/styles/avatar/_material3-definition.scss +26 -0
  43. package/styles/avatar/_tailwind-dark-definition.scss +1 -0
  44. package/styles/avatar/_tailwind-definition.scss +25 -0
  45. package/styles/avatar/_theme.scss +1 -0
  46. package/styles/avatar/bootstrap-dark.css +45 -1
  47. package/styles/avatar/bootstrap-dark.scss +3 -1
  48. package/styles/avatar/bootstrap.css +45 -1
  49. package/styles/avatar/bootstrap.scss +3 -1
  50. package/styles/avatar/bootstrap4.css +45 -1
  51. package/styles/avatar/bootstrap4.scss +3 -1
  52. package/styles/avatar/bootstrap5-dark.css +60 -1
  53. package/styles/avatar/bootstrap5-dark.scss +3 -1
  54. package/styles/avatar/bootstrap5.css +60 -1
  55. package/styles/avatar/bootstrap5.scss +3 -1
  56. package/styles/avatar/fabric-dark.css +45 -1
  57. package/styles/avatar/fabric-dark.scss +3 -1
  58. package/styles/avatar/fabric.css +45 -1
  59. package/styles/avatar/fabric.scss +3 -1
  60. package/styles/avatar/fluent-dark.css +58 -1
  61. package/styles/avatar/fluent-dark.scss +3 -1
  62. package/styles/avatar/fluent.css +58 -1
  63. package/styles/avatar/fluent.scss +3 -1
  64. package/styles/avatar/highcontrast-light.css +45 -1
  65. package/styles/avatar/highcontrast-light.scss +3 -1
  66. package/styles/avatar/highcontrast.css +45 -1
  67. package/styles/avatar/highcontrast.scss +3 -1
  68. package/styles/avatar/material-dark.css +45 -1
  69. package/styles/avatar/material-dark.scss +3 -1
  70. package/styles/avatar/material.css +45 -1
  71. package/styles/avatar/material.scss +3 -1
  72. package/styles/avatar/material3-dark.css +113 -1
  73. package/styles/avatar/material3-dark.scss +3 -1
  74. package/styles/avatar/material3.css +169 -1
  75. package/styles/avatar/material3.scss +3 -1
  76. package/styles/avatar/tailwind-dark.css +58 -1
  77. package/styles/avatar/tailwind-dark.scss +3 -1
  78. package/styles/avatar/tailwind.css +58 -1
  79. package/styles/avatar/tailwind.scss +3 -1
  80. package/styles/bootstrap-dark.css +1351 -1
  81. package/styles/bootstrap.css +1352 -1
  82. package/styles/bootstrap4.css +1357 -1
  83. package/styles/bootstrap5-dark.css +1368 -1
  84. package/styles/bootstrap5.css +1368 -1
  85. package/styles/card/_all.scss +2 -0
  86. package/styles/card/_bootstrap-dark-definition.scss +245 -0
  87. package/styles/card/_bootstrap-definition.scss +125 -0
  88. package/styles/card/_bootstrap4-definition.scss +127 -0
  89. package/styles/card/_bootstrap5-dark-definition.scss +1 -0
  90. package/styles/card/_bootstrap5-definition.scss +125 -0
  91. package/styles/card/_fabric-dark-definition.scss +233 -0
  92. package/styles/card/_fabric-definition.scss +124 -0
  93. package/styles/card/_fluent-dark-definition.scss +1 -0
  94. package/styles/card/_fluent-definition.scss +130 -0
  95. package/styles/card/_fusionnew-definition.scss +125 -0
  96. package/styles/card/_highcontrast-definition.scss +125 -0
  97. package/styles/card/_highcontrast-light-definition.scss +246 -0
  98. package/styles/card/_layout.scss +528 -0
  99. package/styles/card/_material-dark-definition.scss +240 -0
  100. package/styles/card/_material-definition.scss +124 -0
  101. package/styles/card/_material3-dark-definition.scss +1 -0
  102. package/styles/card/_material3-definition.scss +125 -0
  103. package/styles/card/_tailwind-dark-definition.scss +1 -0
  104. package/styles/card/_tailwind-definition.scss +123 -0
  105. package/styles/card/_theme.scss +104 -0
  106. package/styles/card/bootstrap-dark.css +513 -1
  107. package/styles/card/bootstrap-dark.scss +3 -1
  108. package/styles/card/bootstrap.css +514 -1
  109. package/styles/card/bootstrap.scss +3 -1
  110. package/styles/card/bootstrap4.css +520 -1
  111. package/styles/card/bootstrap4.scss +3 -1
  112. package/styles/card/bootstrap5-dark.css +513 -1
  113. package/styles/card/bootstrap5-dark.scss +3 -1
  114. package/styles/card/bootstrap5.css +513 -1
  115. package/styles/card/bootstrap5.scss +3 -1
  116. package/styles/card/fabric-dark.css +513 -1
  117. package/styles/card/fabric-dark.scss +3 -1
  118. package/styles/card/fabric.css +524 -1
  119. package/styles/card/fabric.scss +3 -1
  120. package/styles/card/fluent-dark.css +534 -1
  121. package/styles/card/fluent-dark.scss +3 -1
  122. package/styles/card/fluent.css +534 -1
  123. package/styles/card/fluent.scss +3 -1
  124. package/styles/card/highcontrast-light.css +513 -1
  125. package/styles/card/highcontrast-light.scss +3 -1
  126. package/styles/card/highcontrast.css +525 -1
  127. package/styles/card/highcontrast.scss +3 -1
  128. package/styles/card/material-dark.css +513 -1
  129. package/styles/card/material-dark.scss +3 -1
  130. package/styles/card/material.css +513 -1
  131. package/styles/card/material.scss +3 -1
  132. package/styles/card/material3-dark.css +566 -1
  133. package/styles/card/material3-dark.scss +3 -1
  134. package/styles/card/material3.css +622 -1
  135. package/styles/card/material3.scss +3 -1
  136. package/styles/card/tailwind-dark.css +514 -1
  137. package/styles/card/tailwind-dark.scss +3 -1
  138. package/styles/card/tailwind.css +514 -1
  139. package/styles/card/tailwind.scss +3 -1
  140. package/styles/dashboard-layout/_all.scss +2 -0
  141. package/styles/dashboard-layout/_bootstrap-dark-definition.scss +102 -0
  142. package/styles/dashboard-layout/_bootstrap-definition.scss +102 -0
  143. package/styles/dashboard-layout/_bootstrap4-definition.scss +102 -0
  144. package/styles/dashboard-layout/_bootstrap5-dark-definition.scss +1 -0
  145. package/styles/dashboard-layout/_bootstrap5-definition.scss +108 -0
  146. package/styles/dashboard-layout/_fabric-dark-definition.scss +103 -0
  147. package/styles/dashboard-layout/_fabric-definition.scss +102 -0
  148. package/styles/dashboard-layout/_fluent-dark-definition.scss +1 -0
  149. package/styles/dashboard-layout/_fluent-definition.scss +111 -0
  150. package/styles/dashboard-layout/_fusionnew-definition.scss +108 -0
  151. package/styles/dashboard-layout/_highcontrast-definition.scss +100 -0
  152. package/styles/dashboard-layout/_highcontrast-light-definition.scss +100 -0
  153. package/styles/dashboard-layout/_layout.scss +263 -0
  154. package/styles/dashboard-layout/_material-dark-definition.scss +103 -0
  155. package/styles/dashboard-layout/_material-definition.scss +102 -0
  156. package/styles/dashboard-layout/_material3-dark-definition.scss +1 -0
  157. package/styles/dashboard-layout/_material3-definition.scss +108 -0
  158. package/styles/dashboard-layout/_tailwind-dark-definition.scss +1 -0
  159. package/styles/dashboard-layout/_tailwind-definition.scss +109 -0
  160. package/styles/dashboard-layout/_theme.scss +128 -0
  161. package/styles/dashboard-layout/bootstrap-dark.css +296 -1
  162. package/styles/dashboard-layout/bootstrap-dark.scss +4 -1
  163. package/styles/dashboard-layout/bootstrap.css +296 -1
  164. package/styles/dashboard-layout/bootstrap.scss +4 -1
  165. package/styles/dashboard-layout/bootstrap4.css +296 -1
  166. package/styles/dashboard-layout/bootstrap4.scss +4 -1
  167. package/styles/dashboard-layout/bootstrap5-dark.css +305 -1
  168. package/styles/dashboard-layout/bootstrap5-dark.scss +4 -1
  169. package/styles/dashboard-layout/bootstrap5.css +305 -1
  170. package/styles/dashboard-layout/bootstrap5.scss +4 -1
  171. package/styles/dashboard-layout/fabric-dark.css +296 -1
  172. package/styles/dashboard-layout/fabric-dark.scss +4 -1
  173. package/styles/dashboard-layout/fabric.css +296 -1
  174. package/styles/dashboard-layout/fabric.scss +4 -1
  175. package/styles/dashboard-layout/fluent-dark.css +300 -1
  176. package/styles/dashboard-layout/fluent-dark.scss +4 -1
  177. package/styles/dashboard-layout/fluent.css +300 -1
  178. package/styles/dashboard-layout/fluent.scss +4 -1
  179. package/styles/dashboard-layout/highcontrast-light.css +234 -1
  180. package/styles/dashboard-layout/highcontrast-light.scss +3 -1
  181. package/styles/dashboard-layout/highcontrast.css +292 -1
  182. package/styles/dashboard-layout/highcontrast.scss +4 -1
  183. package/styles/dashboard-layout/icons/_bootstrap-dark.scss +80 -0
  184. package/styles/dashboard-layout/icons/_bootstrap.scss +80 -0
  185. package/styles/dashboard-layout/icons/_bootstrap4.scss +80 -0
  186. package/styles/dashboard-layout/icons/_bootstrap5-dark.scss +1 -0
  187. package/styles/dashboard-layout/icons/_bootstrap5.scss +80 -0
  188. package/styles/dashboard-layout/icons/_fabric-dark.scss +80 -0
  189. package/styles/dashboard-layout/icons/_fabric.scss +80 -0
  190. package/styles/dashboard-layout/icons/_fluent-dark.scss +1 -0
  191. package/styles/dashboard-layout/icons/_fluent.scss +80 -0
  192. package/styles/dashboard-layout/icons/_fusionnew.scss +80 -0
  193. package/styles/dashboard-layout/icons/_highcontrast.scss +80 -0
  194. package/styles/dashboard-layout/icons/_material-dark.scss +80 -0
  195. package/styles/dashboard-layout/icons/_material.scss +80 -0
  196. package/styles/dashboard-layout/icons/_material3-dark.scss +1 -0
  197. package/styles/dashboard-layout/icons/_material3.scss +80 -0
  198. package/styles/dashboard-layout/icons/_tailwind-dark.scss +80 -0
  199. package/styles/dashboard-layout/icons/_tailwind.scss +80 -0
  200. package/styles/dashboard-layout/material-dark.css +296 -1
  201. package/styles/dashboard-layout/material-dark.scss +4 -1
  202. package/styles/dashboard-layout/material.css +296 -1
  203. package/styles/dashboard-layout/material.scss +4 -1
  204. package/styles/dashboard-layout/material3-dark.css +356 -1
  205. package/styles/dashboard-layout/material3-dark.scss +4 -1
  206. package/styles/dashboard-layout/material3.css +412 -1
  207. package/styles/dashboard-layout/material3.scss +4 -1
  208. package/styles/dashboard-layout/tailwind-dark.css +317 -1
  209. package/styles/dashboard-layout/tailwind-dark.scss +4 -1
  210. package/styles/dashboard-layout/tailwind.css +317 -1
  211. package/styles/dashboard-layout/tailwind.scss +4 -1
  212. package/styles/fabric-dark.css +1351 -1
  213. package/styles/fabric.css +1362 -1
  214. package/styles/fluent-dark.css +1382 -1
  215. package/styles/fluent.css +1382 -1
  216. package/styles/highcontrast-light.css +1289 -1
  217. package/styles/highcontrast.css +1359 -1
  218. package/styles/material-dark.css +1350 -1
  219. package/styles/material.css +1351 -1
  220. package/styles/material3-dark.css +1415 -1
  221. package/styles/material3-dark.scss +1 -0
  222. package/styles/material3.css +1471 -1
  223. package/styles/material3.scss +1 -0
  224. package/styles/splitter/_all.scss +3 -0
  225. package/styles/splitter/_bootstrap-dark-definition.scss +26 -0
  226. package/styles/splitter/_bootstrap-definition.scss +26 -0
  227. package/styles/splitter/_bootstrap4-definition.scss +26 -0
  228. package/styles/splitter/_bootstrap5-dark-definition.scss +1 -0
  229. package/styles/splitter/_bootstrap5-definition.scss +31 -0
  230. package/styles/splitter/_definition.scss +1 -0
  231. package/styles/splitter/_fabric-dark-definition.scss +26 -0
  232. package/styles/splitter/_fabric-definition.scss +26 -0
  233. package/styles/splitter/_fluent-dark-definition.scss +1 -0
  234. package/styles/splitter/_fluent-definition.scss +31 -0
  235. package/styles/splitter/_fusionnew-definition.scss +31 -0
  236. package/styles/splitter/_highcontrast-definition.scss +26 -0
  237. package/styles/splitter/_highcontrast-light-definition.scss +26 -0
  238. package/styles/splitter/_layout.scss +416 -0
  239. package/styles/splitter/_material-dark-definition.scss +26 -0
  240. package/styles/splitter/_material-definition.scss +27 -0
  241. package/styles/splitter/_material3-dark-definition.scss +1 -0
  242. package/styles/splitter/_material3-definition.scss +31 -0
  243. package/styles/splitter/_responsive.scss +1 -0
  244. package/styles/splitter/_tailwind-dark-definition.scss +1 -0
  245. package/styles/splitter/_tailwind-definition.scss +31 -0
  246. package/styles/splitter/_theme.scss +207 -0
  247. package/styles/splitter/bootstrap-dark.css +496 -1
  248. package/styles/splitter/bootstrap-dark.scss +4 -1
  249. package/styles/splitter/bootstrap.css +496 -1
  250. package/styles/splitter/bootstrap.scss +4 -1
  251. package/styles/splitter/bootstrap4.css +495 -1
  252. package/styles/splitter/bootstrap4.scss +4 -1
  253. package/styles/splitter/bootstrap5-dark.css +489 -1
  254. package/styles/splitter/bootstrap5-dark.scss +4 -1
  255. package/styles/splitter/bootstrap5.css +489 -1
  256. package/styles/splitter/bootstrap5.scss +4 -1
  257. package/styles/splitter/fabric-dark.css +496 -1
  258. package/styles/splitter/fabric-dark.scss +4 -1
  259. package/styles/splitter/fabric.css +496 -1
  260. package/styles/splitter/fabric.scss +4 -1
  261. package/styles/splitter/fluent-dark.css +489 -1
  262. package/styles/splitter/fluent-dark.scss +4 -1
  263. package/styles/splitter/fluent.css +489 -1
  264. package/styles/splitter/fluent.scss +4 -1
  265. package/styles/splitter/highcontrast-light.css +496 -1
  266. package/styles/splitter/highcontrast-light.scss +4 -1
  267. package/styles/splitter/highcontrast.css +496 -1
  268. package/styles/splitter/highcontrast.scss +4 -1
  269. package/styles/splitter/icons/_bootstrap-dark.scss +52 -0
  270. package/styles/splitter/icons/_bootstrap.scss +52 -0
  271. package/styles/splitter/icons/_bootstrap4.scss +51 -0
  272. package/styles/splitter/icons/_bootstrap5-dark.scss +1 -0
  273. package/styles/splitter/icons/_bootstrap5.scss +39 -0
  274. package/styles/splitter/icons/_fabric-dark.scss +52 -0
  275. package/styles/splitter/icons/_fabric.scss +52 -0
  276. package/styles/splitter/icons/_fluent-dark.scss +1 -0
  277. package/styles/splitter/icons/_fluent.scss +39 -0
  278. package/styles/splitter/icons/_fusionnew.scss +39 -0
  279. package/styles/splitter/icons/_highcontrast-light.scss +52 -0
  280. package/styles/splitter/icons/_highcontrast.scss +52 -0
  281. package/styles/splitter/icons/_material-dark.scss +51 -0
  282. package/styles/splitter/icons/_material.scss +51 -0
  283. package/styles/splitter/icons/_material3-dark.scss +1 -0
  284. package/styles/splitter/icons/_material3.scss +39 -0
  285. package/styles/splitter/icons/_tailwind-dark.scss +1 -0
  286. package/styles/splitter/icons/_tailwind.scss +39 -0
  287. package/styles/splitter/material-dark.css +495 -1
  288. package/styles/splitter/material-dark.scss +4 -1
  289. package/styles/splitter/material.css +496 -1
  290. package/styles/splitter/material.scss +4 -1
  291. package/styles/splitter/material3-dark.css +544 -1
  292. package/styles/splitter/material3-dark.scss +4 -1
  293. package/styles/splitter/material3.css +600 -1
  294. package/styles/splitter/material3.scss +4 -1
  295. package/styles/splitter/tailwind-dark.css +489 -1
  296. package/styles/splitter/tailwind-dark.scss +4 -1
  297. package/styles/splitter/tailwind.css +489 -1
  298. package/styles/splitter/tailwind.scss +4 -1
  299. package/styles/tailwind-dark.css +1379 -1
  300. package/styles/tailwind.css +1379 -1
  301. package/syncfusion-ej2-angular-layouts.d.ts +5 -0
  302. package/@syncfusion/ej2-angular-layouts.es5.js +0 -495
  303. package/@syncfusion/ej2-angular-layouts.es5.js.map +0 -1
  304. package/@syncfusion/ej2-angular-layouts.js +0 -447
  305. package/@syncfusion/ej2-angular-layouts.js.map +0 -1
  306. package/CHANGELOG.md +0 -575
  307. package/dist/ej2-angular-layouts.umd.js +0 -522
  308. package/dist/ej2-angular-layouts.umd.js.map +0 -1
  309. package/dist/ej2-angular-layouts.umd.min.js +0 -11
  310. package/dist/ej2-angular-layouts.umd.min.js.map +0 -1
  311. package/ej2-angular-layouts.d.ts +0 -6
  312. package/ej2-angular-layouts.metadata.json +0 -1
  313. package/postinstall/tagchange.js +0 -18
@@ -0,0 +1,18 @@
1
+ // Avatar Base
2
+ $avatar-base-border-radius: 5px !default;
3
+ $avatar-base-font-size: 1em !default;
4
+ $avatar-base-width: 3em !default;
5
+ $avatar-base-height: 3em !default;
6
+ $avatar-base-background-color: #bcbcbc !default;
7
+ $avatar-base-text-color: #fff !default;
8
+ $avatar-base-font-weight: 400 !default;
9
+ $avatar-base-img-height: 100% !default;
10
+
11
+ // Circle Avatar
12
+ $avatar-circle-border-radius: 50% !default;
13
+
14
+ // Avatar size
15
+ $avatar-xsmall-font-size: .6em !default;
16
+ $avatar-small-font-size: .8em !default;
17
+ $avatar-large-font-size: 1.2em !default;
18
+ $avatar-xlarge-font-size: 1.4em !default;
@@ -0,0 +1,18 @@
1
+ // Avatar Base
2
+ $avatar-base-border-radius: 5px !default;
3
+ $avatar-base-font-size: 1em !default;
4
+ $avatar-base-width: 3em !default;
5
+ $avatar-base-height: 3em !default;
6
+ $avatar-base-background-color: #bcbcbc !default;
7
+ $avatar-base-text-color: #fff !default;
8
+ $avatar-base-font-weight: 400 !default;
9
+ $avatar-base-img-height: 100% !default;
10
+
11
+ // Circle Avatar
12
+ $avatar-circle-border-radius: 50% !default;
13
+
14
+ // Avatar size
15
+ $avatar-xsmall-font-size: .6em !default;
16
+ $avatar-small-font-size: .8em !default;
17
+ $avatar-large-font-size: 1.2em !default;
18
+ $avatar-xlarge-font-size: 1.4em !default;
@@ -0,0 +1,18 @@
1
+ // Avatar Base
2
+ $avatar-base-border-radius: 4px !default;
3
+ $avatar-base-font-size: 1.05em !default;
4
+ $avatar-base-width: 2.5em !default;
5
+ $avatar-base-height: 2.5em !default;
6
+ $avatar-base-background-color: $gray-200 !default;
7
+ $avatar-base-text-color: $gray-900 !default;
8
+ $avatar-base-font-weight: 400 !default;
9
+ $avatar-base-img-height: 100% !default;
10
+
11
+ // Circle Avatar
12
+ $avatar-circle-border-radius: 50% !default;
13
+
14
+ // Avatar size
15
+ $avatar-xsmall-font-size: .65em !default;
16
+ $avatar-small-font-size: .85em !default;
17
+ $avatar-large-font-size: 1.25em !default;
18
+ $avatar-xlarge-font-size: 1.45em !default;
@@ -0,0 +1 @@
1
+ @import './bootstrap5-definition.scss';
@@ -0,0 +1,26 @@
1
+ // Avatar Base
2
+ $avatar-base-border-radius: 2px !default;
3
+ $avatar-base-background-color: $content-bg-color-alt3 !default;
4
+ $avatar-base-font-size: $text-sm !default;
5
+ $avatar-base-width: 40px !default;
6
+ $avatar-base-height: 40px !default;
7
+ $avatar-base-line-height: 22px !default;
8
+ $avatar-base-text-color: $icon-color !default;
9
+ $avatar-base-font-weight: $font-weight-medium !default;
10
+ $avatar-base-img-height: 100% !default;
11
+
12
+ // Circle Avatar
13
+ $avatar-circle-border-radius: 50% !default;
14
+
15
+ // Avatar size
16
+ $avatar-xsmall-font-size: $text-xxs !default;
17
+ $avatar-small-font-size: $text-xs !default;
18
+ $avatar-large-font-size: $text-lg !default;
19
+ $avatar-xlarge-font-size: $text-xl !default;
20
+ $avatar-large-border-radius: 4px !default;
21
+
22
+ // Avatar Line Height
23
+ $avatar-base-xsmall-line-height: 16px !default;
24
+ $avatar-base-small-line-height: 18px !default;
25
+ $avatar-base-large-line-height: 28px !default;
26
+ $avatar-base-xlarge-line-height: 28px !default;
@@ -0,0 +1,18 @@
1
+ // Avatar Base
2
+ $avatar-base-border-radius: 5px !default;
3
+ $avatar-base-font-size: 1em !default;
4
+ $avatar-base-width: 3em !default;
5
+ $avatar-base-height: 3em !default;
6
+ $avatar-base-background-color: #bcbcbc !default;
7
+ $avatar-base-text-color: #fff !default;
8
+ $avatar-base-font-weight: 400 !default;
9
+ $avatar-base-img-height: 100% !default;
10
+
11
+ // Circle Avatar
12
+ $avatar-circle-border-radius: 50% !default;
13
+
14
+ // Avatar size
15
+ $avatar-xsmall-font-size: .6em !default;
16
+ $avatar-small-font-size: .8em !default;
17
+ $avatar-large-font-size: 1.2em !default;
18
+ $avatar-xlarge-font-size: 1.4em !default;
@@ -0,0 +1,18 @@
1
+ // Avatar Base
2
+ $avatar-base-border-radius: 5px !default;
3
+ $avatar-base-font-size: 1em !default;
4
+ $avatar-base-width: 3em !default;
5
+ $avatar-base-height: 3em !default;
6
+ $avatar-base-background-color: #bcbcbc !default;
7
+ $avatar-base-text-color: #fff !default;
8
+ $avatar-base-font-weight: 400 !default;
9
+ $avatar-base-img-height: 100% !default;
10
+
11
+ // Circle Avatar
12
+ $avatar-circle-border-radius: 50% !default;
13
+
14
+ // Avatar size
15
+ $avatar-xsmall-font-size: .6em !default;
16
+ $avatar-small-font-size: .8em !default;
17
+ $avatar-large-font-size: 1.2em !default;
18
+ $avatar-xlarge-font-size: 1.4em !default;
@@ -0,0 +1 @@
1
+ @import './fluent-definition.scss';
@@ -0,0 +1,25 @@
1
+ // Avatar Base
2
+ $avatar-base-border-radius: 4px !default;
3
+ $avatar-base-background-color: $content-bg-color-alt3 !default;
4
+ $avatar-base-font-size: $text-base !default;
5
+ $avatar-base-width: 40px !default;
6
+ $avatar-base-height: 40px !default;
7
+ $avatar-base-line-height: 24px !default;
8
+ $avatar-base-text-color: $icon-color !default;
9
+ $avatar-base-font-weight: $font-weight-normal !default;
10
+ $avatar-base-img-height: 100% !default;
11
+
12
+ // Circle Avatar
13
+ $avatar-circle-border-radius: 50% !default;
14
+
15
+ // Avatar size
16
+ $avatar-xsmall-font-size: $text-xxs !default;
17
+ $avatar-small-font-size: $text-xs !default;
18
+ $avatar-large-font-size: $text-xl !default;
19
+ $avatar-xlarge-font-size: $text-2xl !default;
20
+
21
+ // Avatar Line Height
22
+ $avatar-base-xsmall-line-height: 16px !default;
23
+ $avatar-base-small-line-height: 18px !default;
24
+ $avatar-base-large-line-height: 28px !default;
25
+ $avatar-base-xlarge-line-height: 28px !default;
@@ -0,0 +1,26 @@
1
+ // Avatar Base
2
+ $avatar-base-border-radius: 2px !default;
3
+ $avatar-base-background-color: $content-bg-color-alt3 !default;
4
+ $avatar-base-font-size: $text-sm !default;
5
+ $avatar-base-width: 40px !default;
6
+ $avatar-base-height: 40px !default;
7
+ $avatar-base-line-height: 22px !default;
8
+ $avatar-base-text-color: $icon-color !default;
9
+ $avatar-base-font-weight: $font-weight-medium !default;
10
+ $avatar-base-img-height: 100% !default;
11
+
12
+ // Circle Avatar
13
+ $avatar-circle-border-radius: 50% !default;
14
+
15
+ // Avatar size
16
+ $avatar-xsmall-font-size: $text-xxs !default;
17
+ $avatar-small-font-size: $text-xs !default;
18
+ $avatar-large-font-size: $text-lg !default;
19
+ $avatar-xlarge-font-size: $text-xl !default;
20
+ $avatar-large-border-radius: 4px !default;
21
+
22
+ // Avatar Line Height
23
+ $avatar-base-xsmall-line-height: 16px !default;
24
+ $avatar-base-small-line-height: 18px !default;
25
+ $avatar-base-large-line-height: 28px !default;
26
+ $avatar-base-xlarge-line-height: 28px !default;
@@ -0,0 +1,18 @@
1
+ // Avatar Base
2
+ $avatar-base-border-radius: 5px !default;
3
+ $avatar-base-font-size: 1em !default;
4
+ $avatar-base-width: 3em !default;
5
+ $avatar-base-height: 3em !default;
6
+ $avatar-base-background-color: #bcbcbc !default;
7
+ $avatar-base-text-color: #fff !default;
8
+ $avatar-base-font-weight: 400 !default;
9
+ $avatar-base-img-height: 100% !default;
10
+
11
+ // Circle Avatar
12
+ $avatar-circle-border-radius: 50% !default;
13
+
14
+ // Avatar size
15
+ $avatar-xsmall-font-size: .6em !default;
16
+ $avatar-small-font-size: .8em !default;
17
+ $avatar-large-font-size: 1.2em !default;
18
+ $avatar-xlarge-font-size: 1.4em !default;
@@ -0,0 +1,18 @@
1
+ // Avatar Base
2
+ $avatar-base-border-radius: 5px !default;
3
+ $avatar-base-font-size: 1em !default;
4
+ $avatar-base-width: 3em !default;
5
+ $avatar-base-height: 3em !default;
6
+ $avatar-base-background-color: #bcbcbc !default;
7
+ $avatar-base-text-color: #fff !default;
8
+ $avatar-base-font-weight: 400 !default;
9
+ $avatar-base-img-height: 100% !default;
10
+
11
+ // Circle Avatar
12
+ $avatar-circle-border-radius: 50% !default;
13
+
14
+ // Avatar size
15
+ $avatar-xsmall-font-size: .6em !default;
16
+ $avatar-small-font-size: .8em !default;
17
+ $avatar-large-font-size: 1.2em !default;
18
+ $avatar-xlarge-font-size: 1.4em !default;
@@ -0,0 +1,79 @@
1
+ @include export-module('avatar-layout') {
2
+ .e-avatar {
3
+ align-content: center;
4
+ align-items: center;
5
+ background-color: $avatar-base-background-color;
6
+ background-position: center;
7
+ background-repeat: no-repeat;
8
+ background-size: cover;
9
+ border-radius: $avatar-base-border-radius;
10
+ color: $avatar-base-text-color;
11
+ display: inline-flex;
12
+ font-family: $font-family;
13
+ font-size: $avatar-base-font-size;
14
+ font-weight: $avatar-base-font-weight;
15
+ height: $avatar-base-height;
16
+ justify-content: center;
17
+ overflow: hidden;
18
+ position: relative;
19
+ width: $avatar-base-width;
20
+ @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
21
+ line-height: $avatar-base-line-height;
22
+ }
23
+
24
+ img {
25
+ height: $avatar-base-img-height;
26
+ width: auto;
27
+ }
28
+
29
+ &.e-avatar-circle {
30
+ border-radius: $avatar-circle-border-radius;
31
+ &.e-avatar-large,
32
+ &.e-avatar-xlarge {
33
+ border-radius: $avatar-circle-border-radius;
34
+ }
35
+ }
36
+
37
+ &.e-avatar-xsmall {
38
+ font-size: $avatar-xsmall-font-size;
39
+ @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
40
+ height: 24px;
41
+ line-height: $avatar-base-xsmall-line-height;
42
+ width: 24px;
43
+ }
44
+ }
45
+
46
+ &.e-avatar-small {
47
+ font-size: $avatar-small-font-size;
48
+ @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
49
+ height: 32px;
50
+ line-height: $avatar-base-small-line-height;
51
+ width: 32px;
52
+ }
53
+ }
54
+
55
+ &.e-avatar-large {
56
+ font-size: $avatar-large-font-size;
57
+ @if ($skin-name == 'bootstrap5') {
58
+ border-radius: $avatar-large-border-radius;
59
+ }
60
+ @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
61
+ height: 48px;
62
+ line-height: $avatar-base-large-line-height;
63
+ width: 48px;
64
+ }
65
+ }
66
+
67
+ &.e-avatar-xlarge {
68
+ font-size: $avatar-xlarge-font-size;
69
+ @if ($skin-name == 'bootstrap5') {
70
+ border-radius: $avatar-large-border-radius;
71
+ }
72
+ @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark'or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
73
+ height: 56px;
74
+ line-height: $avatar-base-xlarge-line-height;
75
+ width: 56px;
76
+ }
77
+ }
78
+ }
79
+ }
@@ -0,0 +1,18 @@
1
+ // Avatar Base
2
+ $avatar-base-border-radius: 5px !default;
3
+ $avatar-base-font-size: 1em !default;
4
+ $avatar-base-width: 3em !default;
5
+ $avatar-base-height: 3em !default;
6
+ $avatar-base-background-color: #bcbcbc !default;
7
+ $avatar-base-text-color: #fff !default;
8
+ $avatar-base-font-weight: 400 !default;
9
+ $avatar-base-img-height: 100% !default;
10
+
11
+ // Circle Avatar
12
+ $avatar-circle-border-radius: 50% !default;
13
+
14
+ // Avatar size
15
+ $avatar-xsmall-font-size: .6em !default;
16
+ $avatar-small-font-size: .8em !default;
17
+ $avatar-large-font-size: 1.2em !default;
18
+ $avatar-xlarge-font-size: 1.4em !default;
@@ -0,0 +1,18 @@
1
+ // Avatar Base
2
+ $avatar-base-border-radius: 5px !default;
3
+ $avatar-base-font-size: 1em !default;
4
+ $avatar-base-width: 3em !default;
5
+ $avatar-base-height: 3em !default;
6
+ $avatar-base-background-color: #bcbcbc !default;
7
+ $avatar-base-text-color: #fff !default;
8
+ $avatar-base-font-weight: 400 !default;
9
+ $avatar-base-img-height: 100% !default;
10
+
11
+ // Circle Avatar
12
+ $avatar-circle-border-radius: 50% !default;
13
+
14
+ // Avatar size
15
+ $avatar-xsmall-font-size: .6em !default;
16
+ $avatar-small-font-size: .8em !default;
17
+ $avatar-large-font-size: 1.2em !default;
18
+ $avatar-xlarge-font-size: 1.4em !default;
@@ -0,0 +1 @@
1
+ @import './material3-definition.scss';
@@ -0,0 +1,26 @@
1
+ // Avatar Base
2
+ $avatar-base-border-radius: 4px !default;
3
+ $avatar-base-background-color: rgba($primary-light) !default;
4
+ $avatar-base-font-size: $text-xl !default;
5
+ $avatar-base-width: 40px !default;
6
+ $avatar-base-height: 40px !default;
7
+ $avatar-base-line-height: 20px !default;
8
+ $avatar-base-text-color: rgba($primary-darker) !default;
9
+ $avatar-base-font-weight: 500 !default;
10
+ $avatar-base-img-height: 100% !default;
11
+
12
+ // Circle Avatar
13
+ $avatar-circle-border-radius: 50% !default;
14
+
15
+ // Avatar size
16
+ $avatar-xsmall-font-size: 14px !default;
17
+ $avatar-small-font-size: 18px !default;
18
+ $avatar-large-font-size: 26px !default;
19
+ $avatar-xlarge-font-size: 30px !default;
20
+ $avatar-large-border-radius: 4px !default;
21
+
22
+ // Avatar Line Height
23
+ $avatar-base-xsmall-line-height: 14px !default;
24
+ $avatar-base-small-line-height: 18px !default;
25
+ $avatar-base-large-line-height: 26px !default;
26
+ $avatar-base-xlarge-line-height: 30px !default;
@@ -0,0 +1 @@
1
+ @import './tailwind-definition.scss';
@@ -0,0 +1,25 @@
1
+ // Avatar Base
2
+ $avatar-base-border-radius: 4px !default;
3
+ $avatar-base-background-color: $content-bg-color-alt3 !default;
4
+ $avatar-base-font-size: $text-sm !default;
5
+ $avatar-base-width: 40px !default;
6
+ $avatar-base-height: 40px !default;
7
+ $avatar-base-line-height: 22px !default;
8
+ $avatar-base-text-color: $content-text-color-alt2 !default;
9
+ $avatar-base-font-weight: $font-weight-medium !default;
10
+ $avatar-base-img-height: 100% !default;
11
+
12
+ // Circle Avatar
13
+ $avatar-circle-border-radius: 50% !default;
14
+
15
+ // Avatar size
16
+ $avatar-xsmall-font-size: $text-xxs !default;
17
+ $avatar-small-font-size: $text-xs !default;
18
+ $avatar-large-font-size: $text-lg !default;
19
+ $avatar-xlarge-font-size: $text-xl !default;
20
+
21
+ // Avatar Line Height
22
+ $avatar-base-xsmall-line-height: 16px !default;
23
+ $avatar-base-small-line-height: 18px !default;
24
+ $avatar-base-large-line-height: 28px !default;
25
+ $avatar-base-xlarge-line-height: 28px !default;
@@ -0,0 +1 @@
1
+ /* stylelint-disable-line no-empty-source */
@@ -1 +1,45 @@
1
- @import '@syncfusion/ej2-layouts/styles/avatar/bootstrap-dark.css';
1
+ .e-avatar {
2
+ -ms-flex-line-pack: center;
3
+ align-content: center;
4
+ -ms-flex-align: center;
5
+ align-items: center;
6
+ background-color: #bcbcbc;
7
+ background-position: center;
8
+ background-repeat: no-repeat;
9
+ background-size: cover;
10
+ border-radius: 5px;
11
+ color: #fff;
12
+ display: -ms-inline-flexbox;
13
+ display: inline-flex;
14
+ font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
15
+ font-size: 1em;
16
+ font-weight: 400;
17
+ height: 3em;
18
+ -ms-flex-pack: center;
19
+ justify-content: center;
20
+ overflow: hidden;
21
+ position: relative;
22
+ width: 3em;
23
+ }
24
+ .e-avatar img {
25
+ height: 100%;
26
+ width: auto;
27
+ }
28
+ .e-avatar.e-avatar-circle {
29
+ border-radius: 50%;
30
+ }
31
+ .e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
32
+ border-radius: 50%;
33
+ }
34
+ .e-avatar.e-avatar-xsmall {
35
+ font-size: 0.6em;
36
+ }
37
+ .e-avatar.e-avatar-small {
38
+ font-size: 0.8em;
39
+ }
40
+ .e-avatar.e-avatar-large {
41
+ font-size: 1.2em;
42
+ }
43
+ .e-avatar.e-avatar-xlarge {
44
+ font-size: 1.4em;
45
+ }
@@ -1 +1,3 @@
1
- @import 'ej2-layouts/styles/avatar/bootstrap-dark.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap-dark.scss';
2
+ @import 'bootstrap-dark-definition.scss';
3
+ @import 'all.scss';
@@ -1 +1,45 @@
1
- @import '@syncfusion/ej2-layouts/styles/avatar/bootstrap.css';
1
+ .e-avatar {
2
+ -ms-flex-line-pack: center;
3
+ align-content: center;
4
+ -ms-flex-align: center;
5
+ align-items: center;
6
+ background-color: #bcbcbc;
7
+ background-position: center;
8
+ background-repeat: no-repeat;
9
+ background-size: cover;
10
+ border-radius: 5px;
11
+ color: #fff;
12
+ display: -ms-inline-flexbox;
13
+ display: inline-flex;
14
+ font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
15
+ font-size: 1em;
16
+ font-weight: 400;
17
+ height: 3em;
18
+ -ms-flex-pack: center;
19
+ justify-content: center;
20
+ overflow: hidden;
21
+ position: relative;
22
+ width: 3em;
23
+ }
24
+ .e-avatar img {
25
+ height: 100%;
26
+ width: auto;
27
+ }
28
+ .e-avatar.e-avatar-circle {
29
+ border-radius: 50%;
30
+ }
31
+ .e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
32
+ border-radius: 50%;
33
+ }
34
+ .e-avatar.e-avatar-xsmall {
35
+ font-size: 0.6em;
36
+ }
37
+ .e-avatar.e-avatar-small {
38
+ font-size: 0.8em;
39
+ }
40
+ .e-avatar.e-avatar-large {
41
+ font-size: 1.2em;
42
+ }
43
+ .e-avatar.e-avatar-xlarge {
44
+ font-size: 1.4em;
45
+ }
@@ -1 +1,3 @@
1
- @import 'ej2-layouts/styles/avatar/bootstrap.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap.scss';
2
+ @import 'bootstrap-definition.scss';
3
+ @import 'all.scss';
@@ -1 +1,45 @@
1
- @import '@syncfusion/ej2-layouts/styles/avatar/bootstrap4.css';
1
+ .e-avatar {
2
+ -ms-flex-line-pack: center;
3
+ align-content: center;
4
+ -ms-flex-align: center;
5
+ align-items: center;
6
+ background-color: #e9ecef;
7
+ background-position: center;
8
+ background-repeat: no-repeat;
9
+ background-size: cover;
10
+ border-radius: 4px;
11
+ color: #212529;
12
+ display: -ms-inline-flexbox;
13
+ display: inline-flex;
14
+ font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif, "-apple-system", "BlinkMacSystemFont";
15
+ font-size: 1.05em;
16
+ font-weight: 400;
17
+ height: 2.5em;
18
+ -ms-flex-pack: center;
19
+ justify-content: center;
20
+ overflow: hidden;
21
+ position: relative;
22
+ width: 2.5em;
23
+ }
24
+ .e-avatar img {
25
+ height: 100%;
26
+ width: auto;
27
+ }
28
+ .e-avatar.e-avatar-circle {
29
+ border-radius: 50%;
30
+ }
31
+ .e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
32
+ border-radius: 50%;
33
+ }
34
+ .e-avatar.e-avatar-xsmall {
35
+ font-size: 0.65em;
36
+ }
37
+ .e-avatar.e-avatar-small {
38
+ font-size: 0.85em;
39
+ }
40
+ .e-avatar.e-avatar-large {
41
+ font-size: 1.25em;
42
+ }
43
+ .e-avatar.e-avatar-xlarge {
44
+ font-size: 1.45em;
45
+ }
@@ -1 +1,3 @@
1
- @import 'ej2-layouts/styles/avatar/bootstrap4.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap4.scss';
2
+ @import 'bootstrap4-definition.scss';
3
+ @import 'all.scss';
@@ -1 +1,60 @@
1
- @import '@syncfusion/ej2-layouts/styles/avatar/bootstrap5-dark.css';
1
+ .e-avatar {
2
+ -ms-flex-line-pack: center;
3
+ align-content: center;
4
+ -ms-flex-align: center;
5
+ align-items: center;
6
+ background-color: #495057;
7
+ background-position: center;
8
+ background-repeat: no-repeat;
9
+ background-size: cover;
10
+ border-radius: 2px;
11
+ color: #adb5bd;
12
+ display: -ms-inline-flexbox;
13
+ display: inline-flex;
14
+ 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";
15
+ font-size: 14px;
16
+ font-weight: 500;
17
+ height: 40px;
18
+ -ms-flex-pack: center;
19
+ justify-content: center;
20
+ overflow: hidden;
21
+ position: relative;
22
+ width: 40px;
23
+ line-height: 22px;
24
+ }
25
+ .e-avatar img {
26
+ height: 100%;
27
+ width: auto;
28
+ }
29
+ .e-avatar.e-avatar-circle {
30
+ border-radius: 50%;
31
+ }
32
+ .e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
33
+ border-radius: 50%;
34
+ }
35
+ .e-avatar.e-avatar-xsmall {
36
+ font-size: 10px;
37
+ height: 24px;
38
+ line-height: 16px;
39
+ width: 24px;
40
+ }
41
+ .e-avatar.e-avatar-small {
42
+ font-size: 12px;
43
+ height: 32px;
44
+ line-height: 18px;
45
+ width: 32px;
46
+ }
47
+ .e-avatar.e-avatar-large {
48
+ font-size: 18px;
49
+ border-radius: 4px;
50
+ height: 48px;
51
+ line-height: 28px;
52
+ width: 48px;
53
+ }
54
+ .e-avatar.e-avatar-xlarge {
55
+ font-size: 20px;
56
+ border-radius: 4px;
57
+ height: 56px;
58
+ line-height: 28px;
59
+ width: 56px;
60
+ }
@@ -1 +1,3 @@
1
- @import 'ej2-layouts/styles/avatar/bootstrap5-dark.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap5-dark.scss';
2
+ @import 'bootstrap5-dark-definition.scss';
3
+ @import 'all.scss';