@rededor/cura 1.0.0-alpha.7 → 1.0.0

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 (267) hide show
  1. package/dist/assets/assets/icons/iconset-default-list.ts +1 -1
  2. package/dist/assets/assets/icons/iconset-default-tmp.svg +4 -0
  3. package/dist/assets/assets/icons/iconset-default.svg +1 -1
  4. package/dist/cjs/{app-globals-bcffd819.js → app-globals-b77d5b06.js} +7 -7
  5. package/dist/cjs/{app-globals-bcffd819.js.map → app-globals-b77d5b06.js.map} +1 -1
  6. package/dist/cjs/cura-accordion_12.cjs.entry.js +30 -16
  7. package/dist/cjs/cura-accordion_12.cjs.entry.js.map +1 -1
  8. package/dist/cjs/cura-alert.cjs.entry.js +1 -1
  9. package/dist/cjs/cura-avatar.cjs.entry.js +1 -1
  10. package/dist/cjs/cura-badge-distance.cjs.entry.js +46 -0
  11. package/dist/cjs/cura-badge-distance.cjs.entry.js.map +1 -0
  12. package/dist/cjs/cura-button-outline.cjs.entry.js +10 -6
  13. package/dist/cjs/cura-button-outline.cjs.entry.js.map +1 -1
  14. package/dist/cjs/cura-button-select.cjs.entry.js +2 -2
  15. package/dist/cjs/cura-button-select.cjs.entry.js.map +1 -1
  16. package/dist/cjs/cura-button-transparent.cjs.entry.js +11 -7
  17. package/dist/cjs/cura-button-transparent.cjs.entry.js.map +1 -1
  18. package/dist/cjs/cura-button.definitions-f036371c.js +12 -0
  19. package/dist/cjs/cura-button.definitions-f036371c.js.map +1 -0
  20. package/dist/cjs/cura-calendar.cjs.entry.js +99 -10
  21. package/dist/cjs/cura-calendar.cjs.entry.js.map +1 -1
  22. package/dist/cjs/cura-card.cjs.entry.js +1 -1
  23. package/dist/cjs/cura-checkbox.cjs.entry.js +1 -1
  24. package/dist/cjs/cura-display.cjs.entry.js +19 -10
  25. package/dist/cjs/cura-display.cjs.entry.js.map +1 -1
  26. package/dist/cjs/cura-dropdown-search-option-title.cjs.entry.js +1 -1
  27. package/dist/cjs/cura-dropdown-search-option.cjs.entry.js +5 -3
  28. package/dist/cjs/cura-dropdown-search-option.cjs.entry.js.map +1 -1
  29. package/dist/cjs/cura-dropdown-search.cjs.entry.js +3 -3
  30. package/dist/cjs/cura-dropdown-search.cjs.entry.js.map +1 -1
  31. package/dist/cjs/cura-icons-view.cjs.entry.js +4 -4
  32. package/dist/cjs/cura-icons-view.cjs.entry.js.map +1 -1
  33. package/dist/cjs/cura-loader-bar.cjs.entry.js +1 -1
  34. package/dist/cjs/cura-radio.cjs.entry.js +1 -1
  35. package/dist/cjs/cura-switch.cjs.entry.js +1 -1
  36. package/dist/cjs/cura-toast.cjs.entry.js +1 -1
  37. package/dist/cjs/cura.cjs.js +2 -2
  38. package/dist/cjs/loader.cjs.js +2 -2
  39. package/dist/collection/api/theme-presets/theme-maternity.js +6 -6
  40. package/dist/collection/api/theme-presets/theme-maternity.js.map +1 -1
  41. package/dist/collection/assets/icons/iconset-default-list.js +1 -1
  42. package/dist/collection/assets/icons/iconset-default-list.js.map +1 -1
  43. package/dist/collection/assets/icons/iconset-default-tmp.svg +4 -0
  44. package/dist/collection/assets/icons/iconset-default.svg +1 -1
  45. package/dist/collection/assets-raw/icons/default/drug.svg +3 -0
  46. package/dist/collection/collection-manifest.json +1 -0
  47. package/dist/collection/components/badges/cura-badge-distance/cura-badge-distance.css +28 -0
  48. package/dist/collection/components/badges/cura-badge-distance/cura-badge-distance.js +94 -0
  49. package/dist/collection/components/badges/cura-badge-distance/cura-badge-distance.js.map +1 -0
  50. package/dist/collection/components/badges/cura-badge-distance/cura-badge-distance.stories.js +56 -0
  51. package/dist/collection/components/badges/cura-badge-distance/cura-badge-distance.stories.js.map +1 -0
  52. package/dist/collection/components/buttons/cura-button/cura-button.css +61 -65
  53. package/dist/collection/components/buttons/cura-button/cura-button.js +26 -3
  54. package/dist/collection/components/buttons/cura-button/cura-button.js.map +1 -1
  55. package/dist/collection/components/buttons/cura-button/cura-button.stories.js +28 -2
  56. package/dist/collection/components/buttons/cura-button/cura-button.stories.js.map +1 -1
  57. package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.css +50 -53
  58. package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.js +28 -6
  59. package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.js.map +1 -1
  60. package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.stories.js +28 -2
  61. package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.stories.js.map +1 -1
  62. package/dist/collection/components/buttons/cura-button-select/cura-button-select.css +29 -33
  63. package/dist/collection/components/buttons/cura-button-select/cura-button-select.js +1 -1
  64. package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.css +37 -54
  65. package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js +31 -9
  66. package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js.map +1 -1
  67. package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.stories.js +16 -6
  68. package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.stories.js.map +1 -1
  69. package/dist/collection/components/buttons/cura-button.definitions.js +7 -0
  70. package/dist/collection/components/buttons/cura-button.definitions.js.map +1 -0
  71. package/dist/collection/components/cura-alert/cura-alert.js +1 -1
  72. package/dist/collection/components/cura-avatar/cura-avatar.js +1 -1
  73. package/dist/collection/components/cura-calendar/cura-calendar.css +18 -1
  74. package/dist/collection/components/cura-calendar/cura-calendar.js +93 -17
  75. package/dist/collection/components/cura-calendar/cura-calendar.js.map +1 -1
  76. package/dist/collection/components/cura-calendar/cura-calendar.stories.js +24 -4
  77. package/dist/collection/components/cura-calendar/cura-calendar.stories.js.map +1 -1
  78. package/dist/collection/components/cura-card/cura-card.js +1 -1
  79. package/dist/collection/components/cura-icon/cura-icon.js +1 -1
  80. package/dist/collection/components/cura-icons-view/cura-icons-view.js +3 -3
  81. package/dist/collection/components/cura-page-template/cura-page-template.js +1 -1
  82. package/dist/collection/components/cura-toast/cura-toast.js +1 -1
  83. package/dist/collection/components/forms/cura-checkbox/cura-checkbox.js +1 -1
  84. package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.css +48 -29
  85. package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.js +4 -2
  86. package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.js.map +1 -1
  87. package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option-title/cura-dropdown-search-option-title.js +1 -1
  88. package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js +3 -3
  89. package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js.map +1 -1
  90. package/dist/collection/components/forms/cura-input-text/cura-input-text.js +1 -1
  91. package/dist/collection/components/forms/cura-label/cura-label.js +3 -3
  92. package/dist/collection/components/forms/cura-label/cura-label.js.map +1 -1
  93. package/dist/collection/components/forms/cura-radio/cura-radio.js +1 -1
  94. package/dist/collection/components/forms/cura-select/cura-select.js +14 -3
  95. package/dist/collection/components/forms/cura-select/cura-select.js.map +1 -1
  96. package/dist/collection/components/forms/cura-select-options/cura-select-option.js +1 -1
  97. package/dist/collection/components/forms/cura-switch/cura-switch.js +1 -1
  98. package/dist/collection/components/loaders/cura-loader-bar/cura-loader-bar.js +1 -1
  99. package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.js +1 -1
  100. package/dist/collection/components/text/cura-display/cura-display.css +16 -0
  101. package/dist/collection/components/text/cura-display/cura-display.js +37 -10
  102. package/dist/collection/components/text/cura-display/cura-display.js.map +1 -1
  103. package/dist/collection/components/text/cura-display/cura-display.stories.js +13 -2
  104. package/dist/collection/components/text/cura-display/cura-display.stories.js.map +1 -1
  105. package/dist/collection/components/text/cura-heading/cura-heading.js +1 -1
  106. package/dist/collection/components/text/cura-paragraph/cura-paragraph.css +9 -1
  107. package/dist/collection/components/text/cura-paragraph/cura-paragraph.js +1 -1
  108. package/dist/collection/components/text/cura-paragraph/cura-paragraph.stories.js +1 -1
  109. package/dist/collection/components/text/cura-paragraph/cura-paragraph.stories.js.map +1 -1
  110. package/dist/components/cura-alert.js +1 -1
  111. package/dist/components/cura-avatar.js +1 -1
  112. package/dist/components/cura-badge-distance.d.ts +11 -0
  113. package/dist/components/cura-badge-distance.js +73 -0
  114. package/dist/components/cura-badge-distance.js.map +1 -0
  115. package/dist/components/cura-button-outline.js +11 -6
  116. package/dist/components/cura-button-outline.js.map +1 -1
  117. package/dist/components/cura-button-select.js +2 -2
  118. package/dist/components/cura-button-select.js.map +1 -1
  119. package/dist/components/cura-button-transparent2.js +13 -8
  120. package/dist/components/cura-button-transparent2.js.map +1 -1
  121. package/dist/components/cura-button.definitions.js +10 -0
  122. package/dist/components/cura-button.definitions.js.map +1 -0
  123. package/dist/components/cura-button.js +10 -4
  124. package/dist/components/cura-button.js.map +1 -1
  125. package/dist/components/cura-calendar.js +118 -15
  126. package/dist/components/cura-calendar.js.map +1 -1
  127. package/dist/components/cura-card.js +1 -1
  128. package/dist/components/cura-checkbox.js +1 -1
  129. package/dist/components/cura-display.js +21 -11
  130. package/dist/components/cura-display.js.map +1 -1
  131. package/dist/components/cura-dropdown-search-option-title.js +1 -1
  132. package/dist/components/cura-dropdown-search-option.js +5 -3
  133. package/dist/components/cura-dropdown-search-option.js.map +1 -1
  134. package/dist/components/cura-dropdown-search.js +3 -3
  135. package/dist/components/cura-dropdown-search.js.map +1 -1
  136. package/dist/components/cura-heading2.js +1 -1
  137. package/dist/components/cura-icon2.js +1 -1
  138. package/dist/components/cura-icons-view.js +4 -4
  139. package/dist/components/cura-icons-view.js.map +1 -1
  140. package/dist/components/cura-label2.js +1 -1
  141. package/dist/components/cura-label2.js.map +1 -1
  142. package/dist/components/cura-loader-bar2.js +1 -1
  143. package/dist/components/cura-loader-circle2.js +1 -1
  144. package/dist/components/cura-page-template.js +1 -1
  145. package/dist/components/cura-paragraph2.js +2 -2
  146. package/dist/components/cura-paragraph2.js.map +1 -1
  147. package/dist/components/cura-radio.js +1 -1
  148. package/dist/components/cura-select-option2.js +1 -1
  149. package/dist/components/cura-select2.js +15 -5
  150. package/dist/components/cura-select2.js.map +1 -1
  151. package/dist/components/cura-switch.js +1 -1
  152. package/dist/components/cura-toast.js +1 -1
  153. package/dist/components/index.js +8 -6
  154. package/dist/components/index.js.map +1 -1
  155. package/dist/cura/cura.esm.js +1 -1
  156. package/dist/cura/cura.esm.js.map +1 -1
  157. package/dist/cura/p-0a923806.entry.js +2 -0
  158. package/dist/cura/p-0a923806.entry.js.map +1 -0
  159. package/dist/cura/{p-260edb61.entry.js → p-0d435e42.entry.js} +2 -2
  160. package/dist/cura/{p-8433fec9.entry.js → p-0dd837cf.entry.js} +2 -2
  161. package/dist/cura/{p-c63f4695.entry.js → p-2203e829.entry.js} +2 -2
  162. package/dist/cura/{p-6373c7cd.entry.js → p-4c7a2419.entry.js} +2 -2
  163. package/dist/cura/p-4ef24fbd.entry.js +2 -0
  164. package/dist/cura/p-4ef24fbd.entry.js.map +1 -0
  165. package/dist/cura/p-57b8b468.entry.js +2 -0
  166. package/dist/cura/p-57b8b468.entry.js.map +1 -0
  167. package/dist/cura/p-599acc84.entry.js +2 -0
  168. package/dist/cura/p-599acc84.entry.js.map +1 -0
  169. package/dist/cura/p-6682619b.entry.js +2 -0
  170. package/dist/cura/p-6682619b.entry.js.map +1 -0
  171. package/dist/cura/{p-5fcfbf32.entry.js → p-66c5cf5f.entry.js} +2 -2
  172. package/dist/cura/{p-4eaeb590.entry.js → p-84d8c67d.entry.js} +2 -2
  173. package/dist/cura/p-a00d2c68.entry.js +2 -0
  174. package/dist/cura/p-a00d2c68.entry.js.map +1 -0
  175. package/dist/cura/{p-a9dad622.entry.js → p-a5cf0fd6.entry.js} +2 -2
  176. package/dist/cura/{p-70c369b1.js → p-a6c3c0ea.js} +2 -2
  177. package/dist/cura/{p-70c369b1.js.map → p-a6c3c0ea.js.map} +1 -1
  178. package/dist/cura/{p-f016eb62.entry.js → p-ad8a7e0f.entry.js} +2 -2
  179. package/dist/cura/p-b301a1ef.entry.js +2 -0
  180. package/dist/cura/p-b301a1ef.entry.js.map +1 -0
  181. package/dist/cura/{p-0b1829ed.entry.js → p-dc5d0c29.entry.js} +2 -2
  182. package/dist/cura/p-dc5d0c29.entry.js.map +1 -0
  183. package/dist/cura/p-df5c3a86.entry.js +2 -0
  184. package/dist/cura/{p-17a878d4.entry.js.map → p-df5c3a86.entry.js.map} +1 -1
  185. package/dist/cura/p-dfc65f66.entry.js +2 -0
  186. package/dist/cura/p-efcb32eb.js +2 -0
  187. package/dist/cura/p-efcb32eb.js.map +1 -0
  188. package/dist/cura/p-f9433d24.entry.js +2 -0
  189. package/dist/cura/p-f9433d24.entry.js.map +1 -0
  190. package/dist/esm/{app-globals-f2da2b14.js → app-globals-488bf508.js} +7 -7
  191. package/dist/esm/{app-globals-f2da2b14.js.map → app-globals-488bf508.js.map} +1 -1
  192. package/dist/esm/cura-accordion_12.entry.js +30 -16
  193. package/dist/esm/cura-accordion_12.entry.js.map +1 -1
  194. package/dist/esm/cura-alert.entry.js +1 -1
  195. package/dist/esm/cura-avatar.entry.js +1 -1
  196. package/dist/esm/cura-badge-distance.entry.js +42 -0
  197. package/dist/esm/cura-badge-distance.entry.js.map +1 -0
  198. package/dist/esm/cura-button-outline.entry.js +10 -6
  199. package/dist/esm/cura-button-outline.entry.js.map +1 -1
  200. package/dist/esm/cura-button-select.entry.js +2 -2
  201. package/dist/esm/cura-button-select.entry.js.map +1 -1
  202. package/dist/esm/cura-button-transparent.entry.js +11 -7
  203. package/dist/esm/cura-button-transparent.entry.js.map +1 -1
  204. package/dist/esm/cura-button.definitions-617d3bad.js +10 -0
  205. package/dist/esm/cura-button.definitions-617d3bad.js.map +1 -0
  206. package/dist/esm/cura-calendar.entry.js +99 -10
  207. package/dist/esm/cura-calendar.entry.js.map +1 -1
  208. package/dist/esm/cura-card.entry.js +1 -1
  209. package/dist/esm/cura-checkbox.entry.js +1 -1
  210. package/dist/esm/cura-display.entry.js +19 -10
  211. package/dist/esm/cura-display.entry.js.map +1 -1
  212. package/dist/esm/cura-dropdown-search-option-title.entry.js +1 -1
  213. package/dist/esm/cura-dropdown-search-option.entry.js +5 -3
  214. package/dist/esm/cura-dropdown-search-option.entry.js.map +1 -1
  215. package/dist/esm/cura-dropdown-search.entry.js +3 -3
  216. package/dist/esm/cura-dropdown-search.entry.js.map +1 -1
  217. package/dist/esm/cura-icons-view.entry.js +4 -4
  218. package/dist/esm/cura-icons-view.entry.js.map +1 -1
  219. package/dist/esm/cura-loader-bar.entry.js +1 -1
  220. package/dist/esm/cura-radio.entry.js +1 -1
  221. package/dist/esm/cura-switch.entry.js +1 -1
  222. package/dist/esm/cura-toast.entry.js +1 -1
  223. package/dist/esm/cura.js +2 -2
  224. package/dist/esm/loader.js +2 -2
  225. package/dist/types/components/badges/cura-badge-distance/cura-badge-distance.d.ts +12 -0
  226. package/dist/types/components/badges/cura-badge-distance/cura-badge-distance.stories.d.ts +39 -0
  227. package/dist/types/components/buttons/cura-button/cura-button.d.ts +5 -0
  228. package/dist/types/components/buttons/cura-button/cura-button.stories.d.ts +23 -0
  229. package/dist/types/components/buttons/cura-button-outline/cura-button-outline.d.ts +6 -1
  230. package/dist/types/components/buttons/cura-button-outline/cura-button-outline.stories.d.ts +23 -0
  231. package/dist/types/components/buttons/cura-button-transparent/cura-button-transparent.d.ts +6 -0
  232. package/dist/types/components/buttons/cura-button-transparent/cura-button-transparent.stories.d.ts +11 -0
  233. package/dist/types/components/buttons/cura-button.definitions.d.ts +6 -0
  234. package/dist/types/components/cura-calendar/cura-calendar.d.ts +13 -7
  235. package/dist/types/components/cura-calendar/cura-calendar.stories.d.ts +23 -1
  236. package/dist/types/components/forms/cura-label/cura-label.d.ts +1 -1
  237. package/dist/types/components/forms/cura-select/cura-select.d.ts +1 -0
  238. package/dist/types/components/text/cura-display/cura-display.d.ts +6 -0
  239. package/dist/types/components/text/cura-display/cura-display.stories.d.ts +14 -0
  240. package/dist/types/components.d.ts +67 -14
  241. package/package.json +2 -2
  242. package/dist/cura/p-0b1829ed.entry.js.map +0 -1
  243. package/dist/cura/p-17a878d4.entry.js +0 -2
  244. package/dist/cura/p-335323b5.entry.js +0 -2
  245. package/dist/cura/p-335323b5.entry.js.map +0 -1
  246. package/dist/cura/p-67e34464.entry.js +0 -2
  247. package/dist/cura/p-67e34464.entry.js.map +0 -1
  248. package/dist/cura/p-79fa3b97.entry.js +0 -2
  249. package/dist/cura/p-79fa3b97.entry.js.map +0 -1
  250. package/dist/cura/p-89014323.entry.js +0 -2
  251. package/dist/cura/p-89014323.entry.js.map +0 -1
  252. package/dist/cura/p-9a4094e3.entry.js +0 -2
  253. package/dist/cura/p-9a4094e3.entry.js.map +0 -1
  254. package/dist/cura/p-af2036a7.entry.js +0 -2
  255. package/dist/cura/p-b0d66386.entry.js +0 -2
  256. package/dist/cura/p-b0d66386.entry.js.map +0 -1
  257. package/dist/cura/p-c518a91c.entry.js +0 -2
  258. package/dist/cura/p-c518a91c.entry.js.map +0 -1
  259. /package/dist/cura/{p-260edb61.entry.js.map → p-0d435e42.entry.js.map} +0 -0
  260. /package/dist/cura/{p-8433fec9.entry.js.map → p-0dd837cf.entry.js.map} +0 -0
  261. /package/dist/cura/{p-c63f4695.entry.js.map → p-2203e829.entry.js.map} +0 -0
  262. /package/dist/cura/{p-6373c7cd.entry.js.map → p-4c7a2419.entry.js.map} +0 -0
  263. /package/dist/cura/{p-5fcfbf32.entry.js.map → p-66c5cf5f.entry.js.map} +0 -0
  264. /package/dist/cura/{p-4eaeb590.entry.js.map → p-84d8c67d.entry.js.map} +0 -0
  265. /package/dist/cura/{p-a9dad622.entry.js.map → p-a5cf0fd6.entry.js.map} +0 -0
  266. /package/dist/cura/{p-f016eb62.entry.js.map → p-ad8a7e0f.entry.js.map} +0 -0
  267. /package/dist/cura/{p-af2036a7.entry.js.map → p-dfc65f66.entry.js.map} +0 -0
@@ -7,6 +7,27 @@
7
7
  * --font-weight-medium
8
8
  * --text-align
9
9
  */
10
+ /**
11
+ * Spacing sass vars
12
+ */
13
+ /**
14
+ * Global Spacing Definitions.
15
+ * Required CSS Properties:
16
+ * --base-spacing
17
+ */
18
+ /* None: 0px */
19
+ /* Tiny default: 4px */
20
+ /* Mini default: 8px */
21
+ /* XXXS default: 12px */
22
+ /* XXS default: 16px */
23
+ /* XS default: 20px */
24
+ /* S default: 20px */
25
+ /* M default: 32px */
26
+ /* L default: 40px */
27
+ /* XL default: 48px */
28
+ /* XXL default: 64px */
29
+ /* XXXL default: 72px */
30
+ /* Huge default: 96px */
10
31
  /**
11
32
  * Buttons Host element definitions.
12
33
  * Use: @include button-host() { ... }
@@ -72,41 +93,22 @@
72
93
  border-radius: var(--border-radius);
73
94
  position: relative;
74
95
  background-color: transparent;
75
- border-width: 0px;
76
- border: 2px solid transparent;
96
+ border: none;
77
97
  }
78
98
  :host button:focus, :host a:focus {
79
99
  outline: 2px solid #6EA8FF;
80
100
  }
81
101
  :host button.large, :host a.large {
82
- padding: calc(var(--base-spacing) * 6.12px) calc(var(--base-spacing) * 9.96px);
83
- min-height: calc(var(--base-spacing) * 13px);
84
- min-width: calc(var(--base-spacing) * 33.7px);
102
+ padding: calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 4px);
103
+ min-height: calc(var(--base-spacing) * 11px);
85
104
  }
86
105
  :host button.medium, :host a.medium {
87
- padding: calc(var(--base-spacing) * 3.44px) calc(var(--base-spacing) * 9.96px);
88
- min-height: calc(var(--base-spacing) * 11px);
89
- min-width: calc(var(--base-spacing) * 29.95px);
106
+ padding: calc(var(--base-spacing) * 3px);
107
+ min-height: calc(var(--base-spacing) * 10px);
90
108
  }
91
109
  :host button.small, :host a.small {
92
- padding: calc(var(--base-spacing) * 3.24px) calc(var(--base-spacing) * 7.44px);
93
- min-height: calc(var(--base-spacing) * 8px);
94
- min-width: calc(var(--base-spacing) * 21.67px);
95
- }
96
- :host button:not(.isLoading).large, :host a:not(.isLoading).large {
97
- padding: calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);
98
- min-height: calc(var(--base-spacing) * 13px);
99
- min-width: calc(var(--base-spacing) * 13px);
100
- }
101
- :host button:not(.isLoading).medium, :host a:not(.isLoading).medium {
102
- padding: calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);
103
- min-height: calc(var(--base-spacing) * 11px);
104
- min-width: calc(var(--base-spacing) * 11px);
105
- }
106
- :host button:not(.isLoading).small, :host a:not(.isLoading).small {
107
- padding: calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);
110
+ padding: calc(var(--base-spacing) * 2px);
108
111
  min-height: calc(var(--base-spacing) * 8px);
109
- min-width: calc(var(--base-spacing) * 8px);
110
112
  }
111
113
  :host button .button-container, :host a .button-container {
112
114
  display: flex;
@@ -118,43 +120,30 @@
118
120
  :host button.icon-right .button-container, :host a.icon-right .button-container {
119
121
  flex-direction: row-reverse;
120
122
  }
123
+ :host button.justify .button-container, :host a.justify .button-container {
124
+ width: 100%;
125
+ }
121
126
  :host button cura-label, :host a cura-label {
122
127
  flex: 1;
123
- font-family: var(--font-family);
124
- font-weight: var(--font-weight-medium);
125
- font-size: 1.43em;
126
- line-height: 1.2em;
127
128
  text-align: var(--text-align, "left");
128
129
  }
129
- :host button.medium cura-label, :host a.medium cura-label {
130
- font-size: 1.14em;
131
- }
132
- :host button.small cura-label, :host a.small cura-label {
133
- font-size: 1em;
134
- }
135
130
  :host button.icon-left cura-icon, :host a.icon-left cura-icon {
136
131
  margin-right: calc(var(--base-spacing) * 3px);
137
132
  }
138
133
  :host button.icon-right cura-icon, :host a.icon-right cura-icon {
139
134
  margin-left: calc(var(--base-spacing) * 3px);
140
135
  }
141
- :host button.medium.icon-left cura-icon, :host a.medium.icon-left cura-icon {
142
- margin-right: calc(var(--base-spacing) * 2.7px);
136
+ :host button.medium.icon-left cura-icon, :host button.small.icon-left cura-icon, :host a.medium.icon-left cura-icon, :host a.small.icon-left cura-icon {
137
+ margin-right: calc(var(--base-spacing) * 2px);
143
138
  }
144
- :host button.medium.icon-right cura-icon, :host a.medium.icon-right cura-icon {
145
- margin-left: calc(var(--base-spacing) * 2.7px);
146
- }
147
- :host button.small.icon-left cura-icon, :host a.small.icon-left cura-icon {
148
- margin-right: calc(var(--base-spacing) * 2.5px);
149
- }
150
- :host button.small.icon-right cura-icon, :host a.small.icon-right cura-icon {
151
- margin-left: calc(var(--base-spacing) * 2.5px);
139
+ :host button.medium.icon-right cura-icon, :host button.small.icon-right cura-icon, :host a.medium.icon-right cura-icon, :host a.small.icon-right cura-icon {
140
+ margin-left: calc(var(--base-spacing) * 2px);
152
141
  }
153
142
  :host button.disabled, :host a.disabled {
154
143
  cursor: not-allowed;
155
144
  }
156
145
  :host button.icon-only, :host a.icon-only {
157
- padding: calc(var(--base-spacing) * 3.5px);
146
+ padding: calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px);
158
147
  }
159
148
  :host button.icon-only cura-label, :host a.icon-only cura-label {
160
149
  display: none;
@@ -164,10 +153,10 @@
164
153
  margin-right: 0 !important;
165
154
  }
166
155
  :host button.icon-only.medium, :host a.icon-only.medium {
167
- padding: calc(var(--base-spacing) * 2.75px);
156
+ padding: calc(var(--base-spacing) * 3px);
168
157
  }
169
158
  :host button.icon-only.small, :host a.icon-only.small {
170
- padding: calc(var(--base-spacing) * 1.5px);
159
+ padding: calc(var(--base-spacing) * 2px);
171
160
  }
172
161
  :host button cura-loader-circle, :host a cura-loader-circle {
173
162
  position: absolute;
@@ -177,14 +166,8 @@
177
166
  cursor: wait;
178
167
  }
179
168
  :host button.isLoading .button-container, :host a.isLoading .button-container {
180
- opacity: 0.3;
181
- }
182
- :host button.isLoading.icon-only .button-container, :host a.isLoading.icon-only .button-container {
183
169
  opacity: 0;
184
170
  }
185
171
  :host button.isLoading cura-loader-circle, :host a.isLoading cura-loader-circle {
186
172
  display: block;
187
- }
188
- :host button.isLoading cura-label, :host a.isLoading cura-label {
189
- display: none;
190
173
  }
@@ -1,4 +1,5 @@
1
1
  import { Host, h } from "@stencil/core";
2
+ import { labelSizes } from "../cura-button.definitions";
2
3
  export class CuraButtonTransparent {
3
4
  constructor() {
4
5
  this.type = 'button';
@@ -12,8 +13,9 @@ export class CuraButtonTransparent {
12
13
  this.href = undefined;
13
14
  this.target = "_self";
14
15
  this.color = 'primary';
15
- this.fontColor = 'light';
16
+ this.fontColor = 'dark';
16
17
  this.textAlign = 'left';
18
+ this.justify = false;
17
19
  this.hovered = false;
18
20
  this.styles = {};
19
21
  }
@@ -35,12 +37,13 @@ export class CuraButtonTransparent {
35
37
  classes[`icon-only`] = this.iconOnly;
36
38
  classes['disabled'] = this.disabled;
37
39
  classes['isLoading'] = this.isLoading;
40
+ classes['justify'] = this.justify;
38
41
  return classes;
39
42
  }
40
43
  getIcon() {
41
- if (!this.iconName || this.isLoading)
44
+ if (!this.iconName)
42
45
  return null;
43
- const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
46
+ const iconSize = this.size === 'large' ? 20 : 16;
44
47
  return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: this.getSymbolColor() });
45
48
  }
46
49
  handleMouseEnter() {
@@ -56,8 +59,7 @@ export class CuraButtonTransparent {
56
59
  return 'neutral-dark';
57
60
  if (this.hovered && !this.isLoading)
58
61
  return this.fontColor === 'light' ? `${this.color}-light` : `${this.color}-darker`;
59
- if (this.isLoading && this.fontColor === 'light' ? 'neutral-white' : `${this.color}-dark`)
60
- return this.fontColor === 'light' ? 'neutral-white' : `${this.color}-darker`;
62
+ return this.fontColor === 'light' ? 'neutral-white' : `${this.color}-dark`;
61
63
  }
62
64
  handleClick(e) {
63
65
  if (this.disabled || this.isLoading) {
@@ -72,7 +74,9 @@ export class CuraButtonTransparent {
72
74
  }
73
75
  }
74
76
  render() {
75
- return (h(Host, { key: 'ea7af4f9a2f511b6c58e266ab7eee6b6e76d4b07' }, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
77
+ const symbolColor = this.getSymbolColor();
78
+ const labelSize = labelSizes[this.size] || labelSizes["default"];
79
+ return (h(Host, { key: 'a149c7f0dd3a413c563f891c9298d66cde905f5e' }, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '118%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '118%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
76
80
  }
77
81
  static get is() { return "cura-button-transparent"; }
78
82
  static get encapsulation() { return "shadow"; }
@@ -282,7 +286,7 @@ export class CuraButtonTransparent {
282
286
  "text": "Color base from color scheme. Default: accent."
283
287
  },
284
288
  "attribute": "color",
285
- "reflect": false,
289
+ "reflect": true,
286
290
  "defaultValue": "'primary'"
287
291
  },
288
292
  "fontColor": {
@@ -297,11 +301,11 @@ export class CuraButtonTransparent {
297
301
  "optional": false,
298
302
  "docs": {
299
303
  "tags": [],
300
- "text": "Set the font color to dark or light."
304
+ "text": "Set the font color to dark or light.\nDefault: dark."
301
305
  },
302
306
  "attribute": "font-color",
303
307
  "reflect": true,
304
- "defaultValue": "'light'"
308
+ "defaultValue": "'dark'"
305
309
  },
306
310
  "textAlign": {
307
311
  "type": "string",
@@ -320,6 +324,24 @@ export class CuraButtonTransparent {
320
324
  "attribute": "text-align",
321
325
  "reflect": true,
322
326
  "defaultValue": "'left'"
327
+ },
328
+ "justify": {
329
+ "type": "boolean",
330
+ "mutable": false,
331
+ "complexType": {
332
+ "original": "boolean",
333
+ "resolved": "boolean",
334
+ "references": {}
335
+ },
336
+ "required": false,
337
+ "optional": false,
338
+ "docs": {
339
+ "tags": [],
340
+ "text": "Justify icons and label inside the button.\nVales: false (default) | true."
341
+ },
342
+ "attribute": "justify",
343
+ "reflect": true,
344
+ "defaultValue": "false"
323
345
  }
324
346
  };
325
347
  }
@@ -1 +1 @@
1
- {"version":3,"file":"cura-button-transparent.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-transparent/cura-button-transparent.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch, AttachInternals } from '@stencil/core';\n\n@Component({\n tag: 'cura-button-transparent',\n styleUrl: 'cura-button-transparent.scss',\n shadow: true,\n formAssociated: true\n})\nexport class CuraButtonTransparent {\n\n @AttachInternals() internals: ElementInternals;\n\n /**\n * Button type: button (default) | submit | reset\n */\n @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit' = 'button';\n\n /**\n * Button size: small | medium | large (default)\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n /**\n * Disabled state. Boolean.\n */\n @Prop({ reflect: true }) disabled = false;\n /**\n * Loading state. Boolean.\n */\n @Prop({ reflect: true }) isLoading = false;\n\n /**\n * Name of the icon to be used from iconset.\n */\n @Prop({ reflect: true }) iconName: string;\n /**\n * Custom iconset if needed.\n */\n @Prop({ reflect: true }) iconset = 'default';\n /**\n * Icon position: left (default) | right.\n */\n @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'left';\n /**\n * Set button to FAB/icon only.\n */\n @Prop({ reflect: true }) iconOnly = false;\n\n /**\n * Property href switch button to link.\n */\n @Prop({ reflect: true }) href: string;\n /**\n * Set target if link.\n */\n @Prop({ reflect: true }) target = \"_self\";\n\n /**\n * Color base from color scheme. Default: accent.\n */\n @Prop() color = 'primary';\n\n /**\n * Set the font color to dark or light.\n */\n @Prop({ reflect: true }) fontColor: 'dark' | 'light' = 'light';\n /**\n * Set text aligment for the button label.\n * Vales: left (default) | center | right.\n */\n @Prop({ reflect: true }) textAlign: 'left' | 'center' | 'right' = 'left';\n\n @State() hovered = false;\n\n @State() styles = {};\n\n weights;\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n this.styles['--text-align'] = this.textAlign;\n }\n\n getClasses() {\n const classes = {};\n classes[`${this.size.toLowerCase()}`] = true;\n classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n classes[`icon-only`] = this.iconOnly;\n classes['disabled'] = this.disabled;\n classes['isLoading'] = this.isLoading;\n return classes;\n }\n\n\n getIcon() {\n if (!this.iconName || this.isLoading) return null;\n const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={this.getSymbolColor()}></cura-icon>;\n }\n\n handleMouseEnter() {\n if (this.disabled) return;\n this.hovered = true;\n }\n\n handleMouseLeave() {\n this.hovered = false;\n }\n\n @Watch('fontColor')\n @Watch('color')\n getSymbolColor() {\n if (this.disabled) return 'neutral-dark'\n if (this.hovered && !this.isLoading) return this.fontColor === 'light' ? `${this.color}-light` : `${this.color}-darker`\n if (this.isLoading && this.fontColor === 'light' ? 'neutral-white' : `${this.color}-dark`)\n return this.fontColor === 'light' ? 'neutral-white' : `${this.color}-darker`\n }\n\n handleClick(e: Event) {\n if (this.disabled || this.isLoading) {\n e.preventDefault();\n return;\n }\n if (!this.href) {\n if (this.type === 'submit' && this.internals.form) this.internals.form.submit();\n if (this.type === 'reset' && this.internals.form) this.internals.form.reset();\n }\n }\n\n render() {\n return (\n <Host>\n {this.href ? (\n <a href={this.disabled ? '' : this.href}\n target={this.target}\n class={this.getClasses()}\n style={this.styles}\n onClick={(e) => this.handleClick(e)}\n onMouseEnter={() => this.handleMouseEnter()}\n onMouseLeave={() => this.handleMouseLeave()}>\n <span class=\"button-container\">\n {this.getIcon()}\n <cura-label lineHeight='0%' color={this.getSymbolColor()}><slot></slot></cura-label>\n </span>\n <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n </a>\n ) : (\n <button class={this.getClasses()}\n style={this.styles}\n disabled={this.disabled || null}\n onClick={(e) => this.handleClick(e)}\n onMouseEnter={() => this.handleMouseEnter()}\n onMouseLeave={() => this.handleMouseLeave()}\n type={this.type}>\n <span class=\"button-container\">\n {this.getIcon()}\n <cura-label lineHeight='0%' color={this.getSymbolColor()}><slot></slot></cura-label>\n </span>\n <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n </button>\n )}\n </Host>\n );\n }\n\n}\n"]}
1
+ {"version":3,"file":"cura-button-transparent.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-transparent/cura-button-transparent.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch, AttachInternals } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n tag: 'cura-button-transparent',\n styleUrl: 'cura-button-transparent.scss',\n shadow: true,\n formAssociated: true\n})\nexport class CuraButtonTransparent {\n\n @AttachInternals() internals: ElementInternals;\n\n /**\n * Button type: button (default) | submit | reset\n */\n @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit' = 'button';\n\n /**\n * Button size: small | medium | large (default)\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n /**\n * Disabled state. Boolean.\n */\n @Prop({ reflect: true }) disabled = false;\n /**\n * Loading state. Boolean.\n */\n @Prop({ reflect: true }) isLoading = false;\n\n /**\n * Name of the icon to be used from iconset.\n */\n @Prop({ reflect: true }) iconName: string;\n /**\n * Custom iconset if needed.\n */\n @Prop({ reflect: true }) iconset = 'default';\n /**\n * Icon position: left (default) | right.\n */\n @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'left';\n /**\n * Set button to FAB/icon only.\n */\n @Prop({ reflect: true }) iconOnly = false;\n\n /**\n * Property href switch button to link.\n */\n @Prop({ reflect: true }) href: string;\n /**\n * Set target if link.\n */\n @Prop({ reflect: true }) target = \"_self\";\n\n /**\n * Color base from color scheme. Default: accent.\n */\n @Prop({ reflect: true }) color = 'primary';\n\n /**\n * Set the font color to dark or light.\n * Default: dark.\n */\n @Prop({ reflect: true }) fontColor: 'dark' | 'light' = 'dark';\n /**\n * Set text aligment for the button label.\n * Vales: left (default) | center | right.\n */\n @Prop({ reflect: true }) textAlign: 'left' | 'center' | 'right' = 'left';\n\n /**\n * Justify icons and label inside the button.\n * Vales: false (default) | true.\n */\n @Prop({ reflect: true }) justify = false;\n\n @State() hovered = false;\n\n @State() styles = {};\n\n weights;\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n this.styles['--text-align'] = this.textAlign;\n }\n\n getClasses() {\n const classes = {};\n classes[`${this.size.toLowerCase()}`] = true;\n classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n classes[`icon-only`] = this.iconOnly;\n classes['disabled'] = this.disabled;\n classes['isLoading'] = this.isLoading;\n classes['justify'] = this.justify;\n return classes;\n }\n\n\n getIcon() {\n if (!this.iconName) return null;\n const iconSize = this.size === 'large' ? 20 : 16;\n return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={this.getSymbolColor()}></cura-icon>;\n }\n\n handleMouseEnter() {\n if (this.disabled) return;\n this.hovered = true;\n }\n\n handleMouseLeave() {\n this.hovered = false;\n }\n\n @Watch('fontColor')\n @Watch('color')\n getSymbolColor() {\n if (this.disabled) return 'neutral-dark';\n if (this.hovered && !this.isLoading) return this.fontColor === 'light' ? `${this.color}-light` : `${this.color}-darker`;\n return this.fontColor === 'light' ? 'neutral-white' : `${this.color}-dark`;\n }\n\n handleClick(e: Event) {\n if (this.disabled || this.isLoading) {\n e.preventDefault();\n return;\n }\n if (!this.href) {\n if (this.type === 'submit' && this.internals.form) this.internals.form.submit();\n if (this.type === 'reset' && this.internals.form) this.internals.form.reset();\n }\n }\n\n render() {\n const symbolColor = this.getSymbolColor();\n const labelSize = labelSizes[this.size] || labelSizes[\"default\"];\n return (\n <Host>\n {this.href ? (\n <a href={this.disabled ? '' : this.href}\n target={this.target}\n class={this.getClasses()}\n style={this.styles}\n onClick={(e) => this.handleClick(e)}\n onMouseEnter={() => this.handleMouseEnter()}\n onMouseLeave={() => this.handleMouseLeave()}>\n <span class=\"button-container\">\n {this.getIcon()}\n <cura-label size={labelSize} lineHeight='118%' color={symbolColor}><slot></slot></cura-label>\n </span>\n <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n </a>\n ) : (\n <button class={this.getClasses()}\n style={this.styles}\n disabled={this.disabled || null}\n onClick={(e) => this.handleClick(e)}\n onMouseEnter={() => this.handleMouseEnter()}\n onMouseLeave={() => this.handleMouseLeave()}\n type={this.type}>\n <span class=\"button-container\">\n {this.getIcon()}\n <cura-label size={labelSize} lineHeight='118%' color={symbolColor}><slot></slot></cura-label>\n </span>\n <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n </button>\n )}\n </Host>\n );\n }\n\n}\n"]}
@@ -13,18 +13,19 @@ var __rest = (this && this.__rest) || function (s, e) {
13
13
  import iconNames from "../../../assets/icons/iconset-default-list";
14
14
  const renderCuraButtonTransparent = (label, args) => {
15
15
  const block = `<cura-button-transparent${args.size && args.size !== 'large' ? `
16
- size="${args.size}"` : ''}
17
- ${args.type ? ` type="${args.type}"` : ''}${args.color ? `
16
+ size="${args.size}"` : ''}${args.type ? `
17
+ type="${args.type}"` : ''}${args.color ? `
18
18
  color="${args.color}"` : ''}${args.disabled ? `
19
19
  disabled` : ''}${args.isLoading ? `
20
- is-loading` : ''}${args.fontColor && args.fontColor !== 'light' ? `
20
+ is-loading` : ''}${args.fontColor && args.fontColor !== 'dark' ? `
21
21
  font-color="${args.fontColor}"` : ''}${args.iconName ? `
22
22
  icon-name="${args.iconName}"` : ''}${args.iconPosition && args.iconPosition !== 'left' ? `
23
23
  icon-position="${args.iconPosition}"` : ''}${args.iconOnly ? `
24
24
  icon-only` : ''}${args.href ? `
25
25
  href="${args.href}"` : ''}${args.target ? `
26
26
  target="${args.target}"` : ''}${args.textAlign && args.textAlign !== 'left' ? `
27
- text-align="${args.textAlign}"` : ''}${args.fullWidth ? `
27
+ text-align="${args.textAlign}"` : ''}${args.justify ? `
28
+ justify="${args.justify}"` : ''}${args.fullWidth ? `
28
29
  style="width: 100%;"` : ''}>
29
30
  ${label}
30
31
  </cura-button-transparent>`;
@@ -93,7 +94,7 @@ export default {
93
94
  description: 'Define cor clara ou escura do tema de acordo com contexto.',
94
95
  table: {
95
96
  category: 'Properties',
96
- defaultValue: { summary: 'light' }
97
+ defaultValue: { summary: 'dark' }
97
98
  },
98
99
  name: 'font-color'
99
100
  },
@@ -107,6 +108,14 @@ export default {
107
108
  },
108
109
  name: 'text-align'
109
110
  },
111
+ justify: {
112
+ control: 'boolean',
113
+ description: 'Expande os elementos internos para a dimensão do botão.',
114
+ table: {
115
+ category: 'Properties',
116
+ defaultValue: { summary: false }
117
+ }
118
+ },
110
119
  fullWidth: {
111
120
  control: 'boolean',
112
121
  description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em largura total',
@@ -166,8 +175,9 @@ export const ButtonTransparent = {
166
175
  type: 'button',
167
176
  size: 'medium',
168
177
  color: 'primary',
169
- fontColor: 'light',
178
+ fontColor: 'dark',
170
179
  textAlign: 'left',
180
+ justify: false,
171
181
  iconName: '',
172
182
  iconPosition: 'left',
173
183
  iconOnly: false,
@@ -1 +1 @@
1
- {"version":3,"file":"cura-button-transparent.stories.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-transparent/cura-button-transparent.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nconst renderCuraButtonTransparent = (label: string, args: any) => {\n const block = `<cura-button-transparent${args.size && args.size !== 'large' ? `\n size=\"${args.size}\"` : ''}\n ${args.type ? ` type=\"${args.type}\"` : ''}${args.color ? `\n color=\"${args.color}\"` : ''}${args.disabled ? `\n disabled` : ''}${args.isLoading ? `\n is-loading` : ''}${args.fontColor && args.fontColor !== 'light' ? `\n font-color=\"${args.fontColor}\"` : ''}${args.iconName ? `\n icon-name=\"${args.iconName}\"` : ''}${args.iconPosition && args.iconPosition !== 'left' ? `\n icon-position=\"${args.iconPosition}\"` : ''}${args.iconOnly ? `\n icon-only` : ''}${args.href ? `\n href=\"${args.href}\"` : ''}${args.target ? `\n target=\"${args.target}\"` : ''}${args.textAlign && args.textAlign !== 'left' ? `\n text-align=\"${args.textAlign}\"` : ''}${args.fullWidth ? `\n style=\"width: 100%;\"` : ''}>\n ${label}\n</cura-button-transparent>`;\n\n return `${block}`;\n};\n\nexport default {\n title: 'Componentes/Buttons/Button Transparent',\n tags: ['autodocs'],\n render: ({ label, ...args }) => {\n return renderCuraButtonTransparent(label, args);\n },\n argTypes: {\n label: {\n control: 'text',\n description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',\n name: 'Label'\n },\n disabled: {\n control: 'boolean',\n description: 'Estado desabilitado.',\n table: {\n category: 'State',\n defaultValue: { summary: false }\n }\n },\n isLoading: {\n control: 'boolean',\n description: 'Estado de carregamento. Também desabilita ação do botão e pode ser usado em conjunto com a propriedade disabled.',\n table: {\n category: 'State',\n defaultValue: { summary: false }\n },\n name: 'is-loading'\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: 'Tamanhos disponíveis.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'large' }\n }\n },\n type: {\n control: { type: 'inline-radio' },\n options: ['button', 'submit', 'reset'],\n description: 'Tipo do botão.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'button' }\n }\n },\n color: {\n control: { type: 'select' },\n options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'accent' }\n }\n },\n fontColor: {\n control: { type: 'inline-radio' },\n options: ['dark', 'light'],\n description: 'Define cor clara ou escura do tema de acordo com contexto.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'light' }\n },\n name: 'font-color'\n },\n textAlign: {\n control: { type: 'inline-radio' },\n options: ['left', 'center', 'right'],\n description: 'Alinha texto de múltiplas linhas.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'left' }\n },\n name: 'text-align'\n },\n fullWidth: {\n control: 'boolean',\n description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em largura total',\n table: {\n category: 'CSS',\n defaultValue: { summary: false }\n }\n },\n iconName: {\n control: { type: 'select' },\n options: ['', ...iconNames],\n description: 'Nome do ícone a ser utilizado no iconset.',\n table: {\n category: 'Icons'\n },\n name: 'icon-name'\n },\n iconPosition: {\n control: { type: 'inline-radio' },\n options: ['left', 'right'],\n description: 'Posição do ícone no botão.',\n table: {\n category: 'Icons',\n defaultValue: { summary: 'left' }\n },\n name: 'icon-position'\n },\n iconOnly: {\n control: 'boolean',\n description: 'Oculta o label do botão exibindo somente o ícone.',\n table: {\n category: 'Icons',\n defaultValue: { summary: false }\n },\n name: 'icon-only'\n },\n href: {\n control: 'text',\n description: `Se definido o elemento de ação renderizado internamente será um link.`,\n table: {\n category: 'Properties'\n }\n },\n target: {\n control: 'text',\n description: 'Define o comportamento de abertura do link quando href for informado.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '_self' }\n }\n }\n },\n};\n\nexport const ButtonTransparent = {\n args: {\n label: 'Button',\n type: 'button',\n size: 'medium',\n color: 'primary',\n fontColor: 'light',\n textAlign: 'left',\n iconName: '',\n iconPosition: 'left',\n iconOnly: false,\n disabled: false,\n isLoading: false,\n href: '',\n target: '_self',\n fullWidth: false,\n },\n};\n"]}
1
+ {"version":3,"file":"cura-button-transparent.stories.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-transparent/cura-button-transparent.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nconst renderCuraButtonTransparent = (label: string, args: any) => {\n const block = `<cura-button-transparent${args.size && args.size !== 'large' ? `\n size=\"${args.size}\"` : ''}${args.type ? `\n type=\"${args.type}\"` : ''}${args.color ? `\n color=\"${args.color}\"` : ''}${args.disabled ? `\n disabled` : ''}${args.isLoading ? `\n is-loading` : ''}${args.fontColor && args.fontColor !== 'dark' ? `\n font-color=\"${args.fontColor}\"` : ''}${args.iconName ? `\n icon-name=\"${args.iconName}\"` : ''}${args.iconPosition && args.iconPosition !== 'left' ? `\n icon-position=\"${args.iconPosition}\"` : ''}${args.iconOnly ? `\n icon-only` : ''}${args.href ? `\n href=\"${args.href}\"` : ''}${args.target ? `\n target=\"${args.target}\"` : ''}${args.textAlign && args.textAlign !== 'left' ? `\n text-align=\"${args.textAlign}\"` : ''}${args.justify ? `\n justify=\"${args.justify}\"` : ''}${args.fullWidth ? `\n style=\"width: 100%;\"` : ''}>\n ${label}\n</cura-button-transparent>`;\n\n return `${block}`;\n};\n\nexport default {\n title: 'Componentes/Buttons/Button Transparent',\n tags: ['autodocs'],\n render: ({ label, ...args }) => {\n return renderCuraButtonTransparent(label, args);\n },\n argTypes: {\n label: {\n control: 'text',\n description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',\n name: 'Label'\n },\n disabled: {\n control: 'boolean',\n description: 'Estado desabilitado.',\n table: {\n category: 'State',\n defaultValue: { summary: false }\n }\n },\n isLoading: {\n control: 'boolean',\n description: 'Estado de carregamento. Também desabilita ação do botão e pode ser usado em conjunto com a propriedade disabled.',\n table: {\n category: 'State',\n defaultValue: { summary: false }\n },\n name: 'is-loading'\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: 'Tamanhos disponíveis.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'large' }\n }\n },\n type: {\n control: { type: 'inline-radio' },\n options: ['button', 'submit', 'reset'],\n description: 'Tipo do botão.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'button' }\n }\n },\n color: {\n control: { type: 'select' },\n options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'accent' }\n }\n },\n fontColor: {\n control: { type: 'inline-radio' },\n options: ['dark', 'light'],\n description: 'Define cor clara ou escura do tema de acordo com contexto.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'dark' }\n },\n name: 'font-color'\n },\n textAlign: {\n control: { type: 'inline-radio' },\n options: ['left', 'center', 'right'],\n description: 'Alinha texto de múltiplas linhas.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'left' }\n },\n name: 'text-align'\n },\n justify: {\n control: 'boolean',\n description: 'Expande os elementos internos para a dimensão do botão.',\n table: {\n category: 'Properties',\n defaultValue: { summary: false }\n }\n },\n fullWidth: {\n control: 'boolean',\n description: 'Não é uma propriedade do componente. Aplicado como estilo CSS diretamente para visualização em largura total',\n table: {\n category: 'CSS',\n defaultValue: { summary: false }\n }\n },\n iconName: {\n control: { type: 'select' },\n options: ['', ...iconNames],\n description: 'Nome do ícone a ser utilizado no iconset.',\n table: {\n category: 'Icons'\n },\n name: 'icon-name'\n },\n iconPosition: {\n control: { type: 'inline-radio' },\n options: ['left', 'right'],\n description: 'Posição do ícone no botão.',\n table: {\n category: 'Icons',\n defaultValue: { summary: 'left' }\n },\n name: 'icon-position'\n },\n iconOnly: {\n control: 'boolean',\n description: 'Oculta o label do botão exibindo somente o ícone.',\n table: {\n category: 'Icons',\n defaultValue: { summary: false }\n },\n name: 'icon-only'\n },\n href: {\n control: 'text',\n description: `Se definido o elemento de ação renderizado internamente será um link.`,\n table: {\n category: 'Properties'\n }\n },\n target: {\n control: 'text',\n description: 'Define o comportamento de abertura do link quando href for informado.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '_self' }\n }\n }\n },\n};\n\nexport const ButtonTransparent = {\n args: {\n label: 'Button',\n type: 'button',\n size: 'medium',\n color: 'primary',\n fontColor: 'dark',\n textAlign: 'left',\n justify: false,\n iconName: '',\n iconPosition: 'left',\n iconOnly: false,\n disabled: false,\n isLoading: false,\n href: '',\n target: '_self',\n fullWidth: false,\n },\n};\n"]}
@@ -0,0 +1,7 @@
1
+ export const labelSizes = {
2
+ "small": "xsmall",
3
+ "medium": "small",
4
+ "large": "medium",
5
+ "default": "medium"
6
+ };
7
+ //# sourceMappingURL=cura-button.definitions.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cura-button.definitions.js","sourceRoot":"","sources":["../../../src/components/buttons/cura-button.definitions.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,OAAO,EAAE,QAAQ;IACjB,QAAQ,EAAE,OAAO;IACjB,OAAO,EAAE,QAAQ;IACjB,SAAS,EAAE,QAAQ;CACpB,CAAC","sourcesContent":["export const labelSizes = {\n \"small\": \"xsmall\",\n \"medium\": \"small\",\n \"large\": \"medium\",\n \"default\": \"medium\"\n};\n"]}
@@ -43,7 +43,7 @@ export class CuraAlert {
43
43
  return this.icon ? this.icon : iconMapping[this.type];
44
44
  }
45
45
  render() {
46
- return (h(Host, { key: '874149c03df4a705e618cfdbfe98294cd1e3ef13' }, h("div", { key: 'ded92424295ffe7f082dc0152689f0bf6d862466', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'cac5d460fa77bb519d0cbdc2a651e52e024f2b80', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '9b7770169053ca34d9a96ef44f6c110d36ee1f87', class: "content" }, h("cura-label", { key: 'b131071ad2e29b165ce767e2c3ef68bb5464a57c', class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label), h("cura-paragraph", { key: 'aa027c5e80769cf3a1446a9f629493eae2bd7263', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '3ca047a4f9a25c8f060bcd5e14adf0a1c66c7a25' })), h("div", { key: '0c2e0f5e6b88b780236aecedbc9b68413600e6be', class: "actions" }, h("slot", { key: '3866c4c4629f22fa76c034c5ba0bf9ef8f8bdf8b', name: "actions" }))), this.closeable ?
46
+ return (h(Host, { key: 'b7b63129f2d0c1d2f8b451a7f795befc9e085238' }, h("div", { key: 'b8450a11d65f0bbb3c9f688fccbb38efc7bf223c', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '9a5dc4295f7c40362a86f77fe805127590812f15', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '6bbe4799d3f73df0cda2e94da2d71cdc1bfc855a', class: "content" }, h("cura-label", { key: '8b761ec2804bb5633893af8ed91f5de268bbf029', class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label), h("cura-paragraph", { key: '4e7e7726758c26f1f397e8efc84d5eba1c88b428', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'f589c6fb9016b43b3557492a3ef1b4ede4a807a6' })), h("div", { key: 'b212e9255855b96d5c069dd7544675386f00b372', class: "actions" }, h("slot", { key: '174dfcc7dfc4ff3e29185843e010dddae75463f5', name: "actions" }))), this.closeable ?
47
47
  (h("cura-icon", { name: "close", size: 16, color: "error-dark", class: "icon-right", onClick: this.handleClose }))
48
48
  : '')));
49
49
  }
@@ -39,7 +39,7 @@ export class CuraAvatar {
39
39
  this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;
40
40
  }
41
41
  render() {
42
- return (h(Host, { key: '170c3fa2c218520d9689be5c1da0be4757dd1064', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '10b179acec89411c17d44125310658a9fc65a647', class: this.getClasses(), style: this.styles }, h("img", { key: 'cbbfccaab84e08bb08fa37f08c46b625121d339f', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
42
+ return (h(Host, { key: 'fc8fbe9cdcab86398c83a55d006badb870ee959a', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '6a107805cd770b98e74f7b0475c9896f59e51832', class: this.getClasses(), style: this.styles }, h("img", { key: '4bd7991bd32b0aa6f87d0725303960b0b4c3b0b9', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
43
43
  }
44
44
  static get is() { return "cura-avatar"; }
45
45
  static get encapsulation() { return "shadow"; }
@@ -8,7 +8,7 @@
8
8
  gap: 5px;
9
9
  width: var(--width);
10
10
  padding: 0 12px 12px 12px;
11
- min-width: 300px;
11
+ min-width: 280px;
12
12
  border: 1px solid var(--neutral-light);
13
13
  border-radius: 4px;
14
14
  overflow: hidden;
@@ -109,6 +109,23 @@
109
109
  :host .icon:active {
110
110
  transform: scale(1);
111
111
  }
112
+ :host .collapsed-container {
113
+ text-align: center;
114
+ position: relative;
115
+ display: flex;
116
+ align-items: center;
117
+ justify-content: center;
118
+ padding-top: 10px;
119
+ }
120
+ :host .collapsed-container::before {
121
+ content: "";
122
+ position: absolute;
123
+ bottom: 0;
124
+ top: 0;
125
+ left: 2px;
126
+ right: 2px;
127
+ border-top: 2px dotted var(--neutral-light);
128
+ }
112
129
  :host .date {
113
130
  display: flex;
114
131
  justify-content: center;