@rededor/cura 1.4.0 → 1.5.0-alpha.1

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 (281) hide show
  1. package/dist/cjs/{cura-accordion_12.cjs.entry.js → cura-accordion_13.cjs.entry.js} +107 -29
  2. package/dist/cjs/cura-accordion_13.cjs.entry.js.map +1 -0
  3. package/dist/cjs/cura-alert.cjs.entry.js +1 -1
  4. package/dist/cjs/cura-avatar.cjs.entry.js +1 -1
  5. package/dist/cjs/cura-badge-counter.cjs.entry.js +2 -2
  6. package/dist/cjs/cura-badge-counter.cjs.entry.js.map +1 -1
  7. package/dist/cjs/cura-badge-distance.cjs.entry.js +1 -1
  8. package/dist/cjs/cura-badge-distance.cjs.entry.js.map +1 -1
  9. package/dist/cjs/cura-badge-dot.cjs.entry.js +44 -0
  10. package/dist/cjs/cura-badge-dot.cjs.entry.js.map +1 -0
  11. package/dist/cjs/cura-badge-pill.cjs.entry.js +2 -1
  12. package/dist/cjs/cura-badge-pill.cjs.entry.js.map +1 -1
  13. package/dist/cjs/cura-button-outline.cjs.entry.js +1 -1
  14. package/dist/cjs/cura-button-select.cjs.entry.js +1 -1
  15. package/dist/cjs/cura-button-transparent.cjs.entry.js +1 -1
  16. package/dist/cjs/cura-calendar.cjs.entry.js +1 -1
  17. package/dist/cjs/cura-card.cjs.entry.js +1 -1
  18. package/dist/cjs/cura-checkbox.cjs.entry.js +1 -1
  19. package/dist/cjs/cura-display.cjs.entry.js +1 -1
  20. package/dist/cjs/cura-dropdown-search-option-title.cjs.entry.js +1 -1
  21. package/dist/cjs/cura-dropdown-search-option.cjs.entry.js +2 -2
  22. package/dist/cjs/cura-dropdown-search.cjs.entry.js +27 -21
  23. package/dist/cjs/cura-dropdown-search.cjs.entry.js.map +1 -1
  24. package/dist/cjs/cura-icons-view.cjs.entry.js +1 -1
  25. package/dist/cjs/cura-input-date.cjs.entry.js +1 -1
  26. package/dist/cjs/cura-loader-bar.cjs.entry.js +1 -1
  27. package/dist/cjs/cura-progress-bar_2.cjs.entry.js +98 -0
  28. package/dist/cjs/cura-progress-bar_2.cjs.entry.js.map +1 -0
  29. package/dist/cjs/cura-radio.cjs.entry.js +1 -1
  30. package/dist/cjs/cura-stepper.cjs.entry.js +123 -0
  31. package/dist/cjs/cura-stepper.cjs.entry.js.map +1 -0
  32. package/dist/cjs/cura-switch.cjs.entry.js +1 -1
  33. package/dist/cjs/cura-toast.cjs.entry.js +1 -1
  34. package/dist/cjs/cura-tooltip.cjs.entry.js +9 -8
  35. package/dist/cjs/cura-tooltip.cjs.entry.js.map +1 -1
  36. package/dist/cjs/cura.cjs.js +1 -1
  37. package/dist/cjs/loader.cjs.js +1 -1
  38. package/dist/collection/collection-manifest.json +4 -0
  39. package/dist/collection/components/badges/cura-badge-counter/cura-badge-counter.js +2 -2
  40. package/dist/collection/components/badges/cura-badge-counter/cura-badge-counter.js.map +1 -1
  41. package/dist/collection/components/badges/cura-badge-distance/cura-badge-distance.css +2 -2
  42. package/dist/collection/components/badges/cura-badge-dot/cura-badge-dot.css +61 -0
  43. package/dist/collection/components/badges/cura-badge-dot/cura-badge-dot.js +108 -0
  44. package/dist/collection/components/badges/cura-badge-dot/cura-badge-dot.js.map +1 -0
  45. package/dist/collection/components/badges/cura-badge-dot/cura-badge-dot.stories.js +65 -0
  46. package/dist/collection/components/badges/cura-badge-dot/cura-badge-dot.stories.js.map +1 -0
  47. package/dist/collection/components/badges/cura-badge-pill/cura-badge-pill.js +2 -1
  48. package/dist/collection/components/badges/cura-badge-pill/cura-badge-pill.js.map +1 -1
  49. package/dist/collection/components/buttons/cura-button/cura-button.js +1 -1
  50. package/dist/collection/components/buttons/cura-button-outline/cura-button-outline.js +1 -1
  51. package/dist/collection/components/buttons/cura-button-select/cura-button-select.js +1 -1
  52. package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js +1 -1
  53. package/dist/collection/components/cura-alert/cura-alert.js +1 -1
  54. package/dist/collection/components/cura-avatar/cura-avatar.js +1 -1
  55. package/dist/collection/components/cura-calendar/cura-calendar.js +1 -1
  56. package/dist/collection/components/cura-card/cura-card.js +1 -1
  57. package/dist/collection/components/cura-icon/cura-icon.js +1 -1
  58. package/dist/collection/components/cura-icons-view/cura-icons-view.js +1 -1
  59. package/dist/collection/components/cura-modal/cura-modal.css +3 -3
  60. package/dist/collection/components/cura-modal/cura-modal.js +39 -1
  61. package/dist/collection/components/cura-modal/cura-modal.js.map +1 -1
  62. package/dist/collection/components/cura-modal/cura-modal.stories.js +18 -0
  63. package/dist/collection/components/cura-modal/cura-modal.stories.js.map +1 -1
  64. package/dist/collection/components/cura-page-template/cura-page-template.js +1 -1
  65. package/dist/collection/components/cura-stepper/cura-progress-bar/cura-progress-bar.css +15 -0
  66. package/dist/collection/components/cura-stepper/cura-progress-bar/cura-progress-bar.js +121 -0
  67. package/dist/collection/components/cura-stepper/cura-progress-bar/cura-progress-bar.js.map +1 -0
  68. package/dist/collection/components/cura-stepper/cura-stepper-item/cura-stepper-item.css +10 -0
  69. package/dist/collection/components/cura-stepper/cura-stepper-item/cura-stepper-item.js +153 -0
  70. package/dist/collection/components/cura-stepper/cura-stepper-item/cura-stepper-item.js.map +1 -0
  71. package/dist/collection/components/cura-stepper/cura-stepper.css +72 -0
  72. package/dist/collection/components/cura-stepper/cura-stepper.js +227 -0
  73. package/dist/collection/components/cura-stepper/cura-stepper.js.map +1 -0
  74. package/dist/collection/components/cura-stepper/cura-stepper.stories.js +97 -0
  75. package/dist/collection/components/cura-stepper/cura-stepper.stories.js.map +1 -0
  76. package/dist/collection/components/cura-stepper/stepper.type.js +2 -0
  77. package/dist/collection/components/cura-stepper/stepper.type.js.map +1 -0
  78. package/dist/collection/components/cura-toast/cura-toast.js +1 -1
  79. package/dist/collection/components/cura-tooltip/cura-tooltip.js +9 -8
  80. package/dist/collection/components/cura-tooltip/cura-tooltip.js.map +1 -1
  81. package/dist/collection/components/forms/cura-checkbox/cura-checkbox.js +1 -1
  82. package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.js +2 -2
  83. package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option-title/cura-dropdown-search-option-title.js +1 -1
  84. package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.css +4 -2
  85. package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js +28 -21
  86. package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js.map +1 -1
  87. package/dist/collection/components/forms/cura-input-date/cura-input-date.js +1 -1
  88. package/dist/collection/components/forms/cura-label/cura-label.js +1 -1
  89. package/dist/collection/components/forms/cura-radio/cura-radio.js +1 -1
  90. package/dist/collection/components/forms/cura-select/cura-select.css +5 -1
  91. package/dist/collection/components/forms/cura-select/cura-select.js +32 -19
  92. package/dist/collection/components/forms/cura-select/cura-select.js.map +1 -1
  93. package/dist/collection/components/forms/cura-select/cura-select.stories.js +1 -1
  94. package/dist/collection/components/forms/cura-select/cura-select.stories.js.map +1 -1
  95. package/dist/collection/components/forms/cura-select-options/cura-select-option.js +1 -1
  96. package/dist/collection/components/forms/cura-switch/cura-switch.js +1 -1
  97. package/dist/collection/components/loaders/cura-loader-bar/cura-loader-bar.js +1 -1
  98. package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.js +1 -1
  99. package/dist/collection/components/text/cura-display/cura-display.js +1 -1
  100. package/dist/collection/components/text/cura-heading/cura-heading.js +1 -1
  101. package/dist/collection/components/text/cura-paragraph/cura-paragraph.js +1 -1
  102. package/dist/components/cura-alert.js +1 -1
  103. package/dist/components/cura-avatar.js +1 -1
  104. package/dist/components/cura-badge-counter2.js +2 -2
  105. package/dist/components/cura-badge-counter2.js.map +1 -1
  106. package/dist/components/cura-badge-distance.js +1 -1
  107. package/dist/components/cura-badge-distance.js.map +1 -1
  108. package/dist/components/cura-badge-dot.d.ts +11 -0
  109. package/dist/components/cura-badge-dot.js +63 -0
  110. package/dist/components/cura-badge-dot.js.map +1 -0
  111. package/dist/components/cura-badge-pill.js +1 -113
  112. package/dist/components/cura-badge-pill.js.map +1 -1
  113. package/dist/components/cura-badge-pill2.js +118 -0
  114. package/dist/components/cura-badge-pill2.js.map +1 -0
  115. package/dist/components/cura-button-outline.js +1 -1
  116. package/dist/components/cura-button-select.js +1 -1
  117. package/dist/components/cura-button-transparent2.js +1 -1
  118. package/dist/components/cura-button.js +1 -1
  119. package/dist/components/cura-calendar2.js +1 -1
  120. package/dist/components/cura-card.js +1 -1
  121. package/dist/components/cura-checkbox.js +1 -1
  122. package/dist/components/cura-display.js +1 -1
  123. package/dist/components/cura-dropdown-search-option-title.js +1 -1
  124. package/dist/components/cura-dropdown-search-option.js +2 -2
  125. package/dist/components/cura-dropdown-search.js +29 -22
  126. package/dist/components/cura-dropdown-search.js.map +1 -1
  127. package/dist/components/cura-heading2.js +1 -1
  128. package/dist/components/cura-icon2.js +1 -1
  129. package/dist/components/cura-icons-view.js +1 -1
  130. package/dist/components/cura-input-date.js +1 -1
  131. package/dist/components/cura-label2.js +1 -1
  132. package/dist/components/cura-loader-bar2.js +1 -1
  133. package/dist/components/cura-loader-circle2.js +1 -1
  134. package/dist/components/cura-modal.js +6 -2
  135. package/dist/components/cura-modal.js.map +1 -1
  136. package/dist/components/cura-page-template.js +1 -1
  137. package/dist/components/cura-paragraph2.js +1 -1
  138. package/dist/components/cura-progress-bar.d.ts +11 -0
  139. package/dist/components/cura-progress-bar.js +8 -0
  140. package/dist/components/cura-progress-bar.js.map +1 -0
  141. package/dist/components/cura-progress-bar2.js +48 -0
  142. package/dist/components/cura-progress-bar2.js.map +1 -0
  143. package/dist/components/cura-radio.js +1 -1
  144. package/dist/components/cura-select-option2.js +1 -1
  145. package/dist/components/cura-select2.js +33 -20
  146. package/dist/components/cura-select2.js.map +1 -1
  147. package/dist/components/cura-stepper-item.d.ts +11 -0
  148. package/dist/components/cura-stepper-item.js +8 -0
  149. package/dist/components/cura-stepper-item.js.map +1 -0
  150. package/dist/components/cura-stepper-item2.js +116 -0
  151. package/dist/components/cura-stepper-item2.js.map +1 -0
  152. package/dist/components/cura-stepper.d.ts +11 -0
  153. package/dist/components/cura-stepper.js +187 -0
  154. package/dist/components/cura-stepper.js.map +1 -0
  155. package/dist/components/cura-switch.js +1 -1
  156. package/dist/components/cura-toast.js +1 -1
  157. package/dist/components/cura-tooltip.js +9 -8
  158. package/dist/components/cura-tooltip.js.map +1 -1
  159. package/dist/components/index.js +8 -0
  160. package/dist/components/index.js.map +1 -1
  161. package/dist/cura/cura.esm.js +1 -1
  162. package/dist/cura/cura.esm.js.map +1 -1
  163. package/dist/cura/{p-a91d451f.entry.js → p-04006a3e.entry.js} +2 -2
  164. package/dist/cura/{p-576c65b4.entry.js → p-0a133399.entry.js} +2 -2
  165. package/dist/cura/{p-116a1cd6.entry.js → p-164ddb46.entry.js} +2 -2
  166. package/dist/cura/{p-36dbec98.entry.js → p-235ac0b4.entry.js} +2 -2
  167. package/dist/cura/p-23fa2246.entry.js +2 -0
  168. package/dist/cura/p-23fa2246.entry.js.map +1 -0
  169. package/dist/cura/{p-c4da4c44.entry.js → p-2af6216a.entry.js} +2 -2
  170. package/dist/cura/{p-42258230.entry.js → p-3030774e.entry.js} +2 -2
  171. package/dist/cura/{p-3d958d45.entry.js → p-3c0931d3.entry.js} +2 -2
  172. package/dist/cura/{p-ef593f12.entry.js → p-46eaee31.entry.js} +2 -2
  173. package/dist/cura/p-46eaee31.entry.js.map +1 -0
  174. package/dist/cura/{p-bdb1a0c5.entry.js → p-4aefe237.entry.js} +2 -2
  175. package/dist/cura/{p-aa65cb50.entry.js → p-529332d3.entry.js} +2 -2
  176. package/dist/cura/{p-aa65cb50.entry.js.map → p-529332d3.entry.js.map} +1 -1
  177. package/dist/cura/{p-19f28fa8.entry.js → p-545e8e55.entry.js} +2 -2
  178. package/dist/cura/p-557b90c4.entry.js +2 -0
  179. package/dist/cura/p-557b90c4.entry.js.map +1 -0
  180. package/dist/cura/p-6624108e.entry.js +2 -0
  181. package/dist/cura/p-6b627841.entry.js +2 -0
  182. package/dist/cura/p-6b627841.entry.js.map +1 -0
  183. package/dist/cura/{p-3eca0f0c.entry.js → p-70adcf7b.entry.js} +2 -2
  184. package/dist/cura/{p-52f854e0.entry.js → p-7ba80d78.entry.js} +2 -2
  185. package/dist/cura/{p-52f854e0.entry.js.map → p-7ba80d78.entry.js.map} +1 -1
  186. package/dist/cura/p-8622c492.entry.js +2 -0
  187. package/dist/cura/p-8622c492.entry.js.map +1 -0
  188. package/dist/cura/p-935eeb7b.entry.js +2 -0
  189. package/dist/cura/p-935eeb7b.entry.js.map +1 -0
  190. package/dist/cura/{p-2545cfc7.entry.js → p-b3e93e74.entry.js} +2 -2
  191. package/dist/cura/{p-dcd2e5bb.entry.js → p-bce10f9b.entry.js} +2 -2
  192. package/dist/cura/p-cfbe2bce.entry.js +2 -0
  193. package/dist/cura/p-cfbe2bce.entry.js.map +1 -0
  194. package/dist/cura/{p-818c581f.entry.js → p-d13e3295.entry.js} +2 -2
  195. package/dist/cura/{p-e1a41792.entry.js → p-ec7876d3.entry.js} +2 -2
  196. package/dist/cura/{p-b1a51e81.entry.js → p-ee8db3dc.entry.js} +2 -2
  197. package/dist/cura/{p-4b496c51.entry.js → p-f96b0923.entry.js} +2 -2
  198. package/dist/esm/{cura-accordion_12.entry.js → cura-accordion_13.entry.js} +107 -30
  199. package/dist/esm/cura-accordion_13.entry.js.map +1 -0
  200. package/dist/esm/cura-alert.entry.js +1 -1
  201. package/dist/esm/cura-avatar.entry.js +1 -1
  202. package/dist/esm/cura-badge-counter.entry.js +2 -2
  203. package/dist/esm/cura-badge-counter.entry.js.map +1 -1
  204. package/dist/esm/cura-badge-distance.entry.js +1 -1
  205. package/dist/esm/cura-badge-distance.entry.js.map +1 -1
  206. package/dist/esm/cura-badge-dot.entry.js +40 -0
  207. package/dist/esm/cura-badge-dot.entry.js.map +1 -0
  208. package/dist/esm/cura-badge-pill.entry.js +2 -1
  209. package/dist/esm/cura-badge-pill.entry.js.map +1 -1
  210. package/dist/esm/cura-button-outline.entry.js +1 -1
  211. package/dist/esm/cura-button-select.entry.js +1 -1
  212. package/dist/esm/cura-button-transparent.entry.js +1 -1
  213. package/dist/esm/cura-calendar.entry.js +1 -1
  214. package/dist/esm/cura-card.entry.js +1 -1
  215. package/dist/esm/cura-checkbox.entry.js +1 -1
  216. package/dist/esm/cura-display.entry.js +1 -1
  217. package/dist/esm/cura-dropdown-search-option-title.entry.js +1 -1
  218. package/dist/esm/cura-dropdown-search-option.entry.js +2 -2
  219. package/dist/esm/cura-dropdown-search.entry.js +27 -21
  220. package/dist/esm/cura-dropdown-search.entry.js.map +1 -1
  221. package/dist/esm/cura-icons-view.entry.js +1 -1
  222. package/dist/esm/cura-input-date.entry.js +1 -1
  223. package/dist/esm/cura-loader-bar.entry.js +1 -1
  224. package/dist/esm/cura-progress-bar_2.entry.js +93 -0
  225. package/dist/esm/cura-progress-bar_2.entry.js.map +1 -0
  226. package/dist/esm/cura-radio.entry.js +1 -1
  227. package/dist/esm/cura-stepper.entry.js +119 -0
  228. package/dist/esm/cura-stepper.entry.js.map +1 -0
  229. package/dist/esm/cura-switch.entry.js +1 -1
  230. package/dist/esm/cura-toast.entry.js +1 -1
  231. package/dist/esm/cura-tooltip.entry.js +9 -8
  232. package/dist/esm/cura-tooltip.entry.js.map +1 -1
  233. package/dist/esm/cura.js +1 -1
  234. package/dist/esm/loader.js +1 -1
  235. package/dist/types/components/badges/cura-badge-dot/cura-badge-dot.d.ts +24 -0
  236. package/dist/types/components/badges/cura-badge-dot/cura-badge-dot.stories.d.ts +53 -0
  237. package/dist/types/components/cura-modal/cura-modal.d.ts +10 -0
  238. package/dist/types/components/cura-modal/cura-modal.stories.d.ts +20 -0
  239. package/dist/types/components/cura-stepper/cura-progress-bar/cura-progress-bar.d.ts +23 -0
  240. package/dist/types/components/cura-stepper/cura-stepper-item/cura-stepper-item.d.ts +60 -0
  241. package/dist/types/components/cura-stepper/cura-stepper.d.ts +62 -0
  242. package/dist/types/components/cura-stepper/cura-stepper.stories.d.ts +77 -0
  243. package/dist/types/components/cura-stepper/stepper.type.d.ts +4 -0
  244. package/dist/types/components/forms/cura-dropdown-search/cura-dropdown-search.d.ts +3 -1
  245. package/dist/types/components/forms/cura-select/cura-select.d.ts +8 -8
  246. package/dist/types/components/forms/cura-select/cura-select.stories.d.ts +1 -1
  247. package/dist/types/components.d.ts +206 -0
  248. package/package.json +2 -2
  249. package/dist/cjs/cura-accordion_12.cjs.entry.js.map +0 -1
  250. package/dist/cjs/cura-modal.cjs.entry.js +0 -71
  251. package/dist/cjs/cura-modal.cjs.entry.js.map +0 -1
  252. package/dist/cura/p-35920ac0.entry.js +0 -2
  253. package/dist/cura/p-35920ac0.entry.js.map +0 -1
  254. package/dist/cura/p-3e4ca7e7.entry.js +0 -2
  255. package/dist/cura/p-3e4ca7e7.entry.js.map +0 -1
  256. package/dist/cura/p-6e4f4fbf.entry.js +0 -2
  257. package/dist/cura/p-6e4f4fbf.entry.js.map +0 -1
  258. package/dist/cura/p-ef593f12.entry.js.map +0 -1
  259. package/dist/cura/p-f23c4ed8.entry.js +0 -2
  260. package/dist/cura/p-f23c4ed8.entry.js.map +0 -1
  261. package/dist/cura/p-f5d45776.entry.js +0 -2
  262. package/dist/esm/cura-accordion_12.entry.js.map +0 -1
  263. package/dist/esm/cura-modal.entry.js +0 -67
  264. package/dist/esm/cura-modal.entry.js.map +0 -1
  265. /package/dist/cura/{p-a91d451f.entry.js.map → p-04006a3e.entry.js.map} +0 -0
  266. /package/dist/cura/{p-576c65b4.entry.js.map → p-0a133399.entry.js.map} +0 -0
  267. /package/dist/cura/{p-116a1cd6.entry.js.map → p-164ddb46.entry.js.map} +0 -0
  268. /package/dist/cura/{p-36dbec98.entry.js.map → p-235ac0b4.entry.js.map} +0 -0
  269. /package/dist/cura/{p-c4da4c44.entry.js.map → p-2af6216a.entry.js.map} +0 -0
  270. /package/dist/cura/{p-42258230.entry.js.map → p-3030774e.entry.js.map} +0 -0
  271. /package/dist/cura/{p-3d958d45.entry.js.map → p-3c0931d3.entry.js.map} +0 -0
  272. /package/dist/cura/{p-bdb1a0c5.entry.js.map → p-4aefe237.entry.js.map} +0 -0
  273. /package/dist/cura/{p-19f28fa8.entry.js.map → p-545e8e55.entry.js.map} +0 -0
  274. /package/dist/cura/{p-f5d45776.entry.js.map → p-6624108e.entry.js.map} +0 -0
  275. /package/dist/cura/{p-3eca0f0c.entry.js.map → p-70adcf7b.entry.js.map} +0 -0
  276. /package/dist/cura/{p-2545cfc7.entry.js.map → p-b3e93e74.entry.js.map} +0 -0
  277. /package/dist/cura/{p-dcd2e5bb.entry.js.map → p-bce10f9b.entry.js.map} +0 -0
  278. /package/dist/cura/{p-818c581f.entry.js.map → p-d13e3295.entry.js.map} +0 -0
  279. /package/dist/cura/{p-e1a41792.entry.js.map → p-ec7876d3.entry.js.map} +0 -0
  280. /package/dist/cura/{p-b1a51e81.entry.js.map → p-ee8db3dc.entry.js.map} +0 -0
  281. /package/dist/cura/{p-4b496c51.entry.js.map → p-f96b0923.entry.js.map} +0 -0
@@ -82,7 +82,7 @@ export class CuraSelect {
82
82
  this.textInput = '';
83
83
  }
84
84
  updateOptionHighlights(newActiveINdex) {
85
- this.options.forEach((option, index) => option.active = index === newActiveINdex);
85
+ this.options.forEach((option, index) => (option.active = index === newActiveINdex));
86
86
  }
87
87
  /**
88
88
  * Filters the options based on the current input value.
@@ -99,21 +99,21 @@ export class CuraSelect {
99
99
  });
100
100
  }
101
101
  /**
102
- * Callback for form association.
103
- */
102
+ * Callback for form association.
103
+ */
104
104
  formAssociatedCallback(form) {
105
105
  form.ariaLabel = this.label;
106
106
  }
107
107
  /**
108
- * Callback to restore the switch state from the form.
109
- */
108
+ * Callback to restore the switch state from the form.
109
+ */
110
110
  formStateRestoreCallback(state) {
111
111
  this.textInput = state.value;
112
112
  this.updateSelectedOption();
113
113
  }
114
114
  /**
115
- * Callback to reset the switch state when the form is reset.
116
- */
115
+ * Callback to reset the switch state when the form is reset.
116
+ */
117
117
  formResetCallback() {
118
118
  this.textInput = '';
119
119
  this.clearSelectedAttributes();
@@ -121,8 +121,8 @@ export class CuraSelect {
121
121
  this.internals.setValidity({});
122
122
  }
123
123
  /**
124
- * Callback to update the switch's disabled state when the form's disabled state changes.
125
- */
124
+ * Callback to update the switch's disabled state when the form's disabled state changes.
125
+ */
126
126
  formDisabledCallback(disabled) {
127
127
  this.disabled = disabled;
128
128
  }
@@ -177,9 +177,22 @@ export class CuraSelect {
177
177
  const fontWeights = fonts.getWeights();
178
178
  this.styles = Object.assign(Object.assign({}, this.styles), { '--font-weight-medium': fontWeights.medium, '--font-weight-bold': fontWeights.bold, '--font-weight-regular': fontWeights.regular, '--font-color': fonts.getColor(), '--font-family': fonts.getFamily(), '--font-size': fonts.getSize() });
179
179
  const colorKeys = [
180
- 'primary-base', 'neutral-purewhite', 'neutral-white', 'neutral-black', 'neutral-medium', 'neutral-light',
181
- 'neutral-base', 'neutral-dark', 'success-dark', 'success-darker', 'success-lighter',
182
- 'error-lighter', 'error-dark', 'error-darker', 'error-base', 'info-base'
180
+ 'primary-base',
181
+ 'neutral-purewhite',
182
+ 'neutral-white',
183
+ 'neutral-black',
184
+ 'neutral-medium',
185
+ 'neutral-light',
186
+ 'neutral-base',
187
+ 'neutral-dark',
188
+ 'success-dark',
189
+ 'success-darker',
190
+ 'success-lighter',
191
+ 'error-lighter',
192
+ 'error-dark',
193
+ 'error-darker',
194
+ 'error-base',
195
+ 'info-base',
183
196
  ];
184
197
  colorKeys.forEach(key => {
185
198
  this.styles[`--${key}`] = colors.getColor(key);
@@ -262,16 +275,16 @@ export class CuraSelect {
262
275
  if (this.status === 'default')
263
276
  return null;
264
277
  const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];
265
- return (h("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
278
+ return h("cura-icon", { class: "feedback-icon", name: icon, iconset: "default", size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles });
266
279
  }
267
280
  render() {
268
- return (h(Host, { key: 'cb2962534d4f39e83739c14396bf7ada6389f4e2', style: this.styles }, h("div", { key: '2b09c26a8f5e1dd8f11b8624c4fbc4d840cdb9fd', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: 'c6585f4b4024a42ce4e105acec9f1710b7c0eb71', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '4dcc4a50529b1521b43a7e8bbeee62d0bbc12dc7', class: 'required' }, "* "))), h("div", { key: '189da945bff9d9e946ef5b46d2a021b29b508214', class: {
281
+ return (h(Host, { key: 'd0433e214411ca390ff69ffbfdc2d8d3f6364b9c', style: this.styles }, h("div", { key: 'e644f2ff6f37867ab5d6737f99d772c72fdf17b9', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: '7f382f95d58b6e90b9e7f82ade4d55a4ae74a952', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: 'e782b69050063221f9f8c011c753f03bff1b2fed', class: "required" }, "* "))), h("div", { key: 'b9b1c4a4ad3b19bbec7640bbbe7921fc2e2dc2a9', class: {
269
282
  'cura-input-field': true,
270
- 'open': this.isOpen
271
- } }, this.renderIcon(), h("input", { key: '13cc7d03a4770819a84239ab934f7a73f10434db', type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("cura-icon", { key: 'c0ccb27b7de0849b0e960e69ef472463a4b9d02b', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: '5b093234b507fe6a2c350e9bee5e9a24eba2e5d6', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'c051fa93257f3d68945fa15edd2ab10e9ca75087' })), this.isOpen && (h("div", { key: '8a20447dee35780853e3560c86975ead069e9369', class: {
272
- 'menu': true,
273
- 'open': this.isOpen
274
- } }, h("slot", { key: 'dff5e6b54842ed9a6e458414977080069a0c4b5c', name: 'option' }))))));
283
+ 'open': this.isOpen,
284
+ } }, this.renderIcon(), h("input", { key: 'f107ce1837c7eb5e2be8e21073bc514861e36de5', type: "text", autocomplete: "off", onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("button", { key: '2d535a37f67c28eee7a868de1d5fe5297aa91a1d', class: "up-down-button" }, h("cura-icon", { key: '9292fb9f72d3c4f67b0cffaafdc3c0cceefb5b07', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), h("cura-label", { key: '344572553d1920a66cab43912cae5f24200789c5', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'a2dd9204ad33c6fb2518dca1bfaa18cc51c19d2a' })), this.isOpen && (h("div", { key: '73fd79fd3073b0a9a4537e104e9e1721129da480', class: {
285
+ menu: true,
286
+ open: this.isOpen,
287
+ } }, h("slot", { key: 'dfd5a1f698dddeab8efec68beb5ff038024571dd', name: "option" }))))));
275
288
  }
276
289
  static get is() { return "cura-select"; }
277
290
  static get encapsulation() { return "shadow"; }
@@ -1 +1 @@
1
- {"version":3,"file":"cura-select.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-select/cura-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h, Event, EventEmitter, AttachInternals, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-select',\n styleUrl: 'cura-select.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraSelect {\n /**\n * The label text for the select component.\n * Reflects as an attribute in the DOM.\n */\n @Prop({ reflect: true }) label: string = '';\n\n /**\n * Placeholder text for the input field.\n * Reflects as an attribute in the DOM.\n */\n @Prop({ reflect: true }) placeholder: string = '';\n\n /**\n * Current value of the select component.\n * Reflects as an attribute in the DOM and is mutable.\n */\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /**\n * Display mode of the select component.\n * Can be 'default' or 'transparent'.\n */\n @Prop({ reflect: true }) mode: 'default' | 'transparent' = 'default';\n\n /**\n * Size of the select component.\n * Can be 'small', 'medium', or 'large'.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Status of the select component.\n * Can be 'success', 'error', or 'default'.\n */\n @Prop({ reflect: true, mutable: true }) status: 'success' | 'error' | 'default' = 'default';\n\n /**\n * Whether the select component is disabled.\n * Reflects as an attribute in the DOM.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Whether the select component is required.\n * Reflects as an attribute in the DOM.\n */\n @Prop({ reflect: true }) required: boolean = false;\n\n /**\n * Enable / Disable search at options by term.\n * Default: false\n */\n @Prop({ reflect: true}) searchBehavior: boolean = false;\n\n /**\n * Internal state: Whether the input is hovered.\n * Default: false\n */\n @State() isHovered: boolean = false;\n\n /**\n * Internal state: Whether the input is focused.\n * Default: false\n */\n @State() isFocused: boolean = false;\n\n /**\n * Internal state: Whether the dropdown menu is open.\n * Default: false\n */\n @State() isOpen: boolean = false;\n\n /**\n * Internal state: Collection of options for the select component.\n */\n @State() options: NodeListOf<HTMLCuraSelectOptionElement>;\n\n\n @State() activeIndex = -1\n\n @Watch('activeIndex')\n updateOptionHighlights(newActiveINdex: number) {\n this.options.forEach((option, index) => (option as any).active = index === newActiveINdex);\n }\n\n @State() textInput = ''\n\n @Watch('textInput')\n /**\n * Filters the options based on the current input value.\n */\n filterOptions(newText) {\n if (!this.isOpen || !this.searchBehavior) {\n return\n }\n\n this.options.forEach(option => {\n const optionValue = option.textContent?.toLowerCase() || '';\n const isVisible = optionValue.includes(newText.toLocaleLowerCase())\n option.style.display = isVisible ? 'block' : 'none';\n });\n }\n\n /**\n * Reference to the host element of the component.\n */\n @Element() host: HTMLElement;\n\n /**\n * Event emitted when an option is selected.\n */\n @Event() selected: EventEmitter;\n\n /**\n * MutationObserver to watch changes in the component.\n */\n mutationObserver: MutationObserver;\n\n /**\n * Styles to be applied to the component.\n */\n styles = {};\n\n /**\n * Theme object containing font and color information.\n */\n theme = window.CuraAPI.theme;\n\n @AttachInternals() internals: ElementInternals;\n\n /**\n * Callback for form association.\n */\n formAssociatedCallback(form: { ariaLabel: string; }) {\n form.ariaLabel = this.label;\n }\n\n /**\n * Callback to restore the switch state from the form.\n */\n formStateRestoreCallback(state: { value: string }) {\n this.textInput = state.value;\n this.updateSelectedOption();\n }\n\n /**\n * Callback to reset the switch state when the form is reset.\n */\n formResetCallback() {\n this.textInput = '';\n this.clearSelectedAttributes()\n this.internals.setFormValue('');\n this.internals.setValidity({});\n }\n\n /**\n * Callback to update the switch's disabled state when the form's disabled state changes.\n */\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n /**\n * Lifecycle method called before the component is rendered.\n * Initializes the options for the select component.\n */\n componentWillLoad() {\n this.initializeOptions();\n }\n /**\n * Lifecycle method called after the component is rendered.\n * Initializes select-related functionality.\n */\n componentDidLoad() {\n this.setupMutationObserver();\n }\n /**\n * Lifecycle method called when the component is connected to the DOM.\n * Applies styles based on the theme.\n */\n connectedCallback() {\n this.applyStyles();\n }\n /**\n * Lifecycle method called when the component is disconnected from the DOM.\n * Disconnects the MutationObserver if it exists.\n */\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n initializeOptions() {\n this.options = this.host.querySelectorAll<HTMLCuraSelectOptionElement>('cura-select-option');\n this.options.forEach(option => {\n option.setAttribute('size', this.size);\n\n const isSelected = this.value === option.value\n option.setAttribute('selected', JSON.stringify(isSelected));\n\n if (isSelected) {\n this.value = option.value\n this.internals.setFormValue(option.value)\n }\n });\n\n this.textInput = Array.from(this.options).find(option => option.value === this.value)?.textContent || this.textInput\n }\n /**\n * Applies styles to the component based on the theme.\n */\n applyStyles() {\n const { fonts, colors } = this.theme;\n const fontWeights = fonts.getWeights();\n\n this.styles = {\n ...this.styles,\n '--font-weight-medium': fontWeights.medium,\n '--font-weight-bold': fontWeights.bold,\n '--font-weight-regular': fontWeights.regular,\n '--font-color': fonts.getColor(),\n '--font-family': fonts.getFamily(),\n '--font-size': fonts.getSize(),\n };\n\n const colorKeys = [\n 'primary-base', 'neutral-purewhite', 'neutral-white', 'neutral-black', 'neutral-medium', 'neutral-light',\n 'neutral-base', 'neutral-dark', 'success-dark', 'success-darker', 'success-lighter',\n 'error-lighter', 'error-dark', 'error-darker', 'error-base', 'info-base'\n ];\n\n colorKeys.forEach(key => {\n this.styles[`--${key}`] = colors.getColor(key);\n });\n }\n /**\n * Sets up a MutationObserver to watch for changes in the component.\n */\n setupMutationObserver() {\n this.mutationObserver = new MutationObserver(this.handleMutations);\n this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });\n }\n /**\n * Handles mutations observed by the MutationObserver.\n * Updates the selected option or filters options based on the mutation type.\n */\n handleMutations = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.type === 'attributes') {\n if (mutation.attributeName === 'selected') this.updateSelectedOption();\n }\n });\n };\n /**\n * Handles the selection of an option.\n */\n onOptiselected = (event: Event) => {\n const selectedOption = event.target as HTMLElement;\n this.clearSelectedAttributes();\n selectedOption.setAttribute('selected', 'true');\n };\n\n @Watch('value')\n handleValueChange(newValue: string) {\n this.clearSelectedAttributes();\n\n const selectedOption = this.host.querySelector(`cura-select-option[value=\"${newValue}\"]`);\n\n if(!selectedOption) {\n return\n }\n\n selectedOption.setAttribute('selected', 'true');\n }\n\n updateSelectedOption() {\n const selectedOptionElement = this.host.querySelector<HTMLCuraSelectOptionElement>('cura-select-option[selected]');\n\n if (!selectedOptionElement) {\n return\n }\n\n this.value = selectedOptionElement.value\n this.internals.setFormValue(this.value)\n\n if (this.textInput !== selectedOptionElement.textContent) {\n this.textInput = selectedOptionElement.textContent ;\n this.isOpen = false;\n this.selected.emit(selectedOptionElement.value);\n }\n }\n\n /**\n * Clears the 'selected' attribute from all options.\n */\n clearSelectedAttributes() {\n this.options.forEach(option => option.removeAttribute('selected'));\n }\n\n handleKeyNavigation = (event: KeyboardEvent) => {\n const { code: keyCode } = event\n\n if (!this.isOpen && keyCode === 'ArrowDown') {\n this.isOpen = true\n this.activeIndex = 0\n\n return\n }\n\n if (keyCode === 'ArrowDown') {\n event.preventDefault();\n this.updateActiveIndex(1);\n }\n\n if (keyCode === 'ArrowUp') {\n event.preventDefault();\n this.updateActiveIndex(-1);\n }\n\n if (keyCode === 'Enter' || keyCode === 'Space') {\n this.options[this.activeIndex]?.click();\n }\n\n if (keyCode === 'Escape') {\n this.isOpen = false\n }\n }\n\n updateActiveIndex(direction: number) {\n if (this.options.length === 0) return;\n this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;\n }\n\n handleInputChange = (e: Event) => {\n this.textInput = (e.target as HTMLInputElement).value;\n this.isOpen = this.textInput.length > 0;\n this.internals.setFormValue(this.textInput);\n };\n\n\n getClasses() {\n return {\n wrapper: true,\n label: !!this.label,\n disabled: this.disabled,\n transparent: this.mode === 'transparent',\n [this.size.toLowerCase()]: true,\n [this.status.toLowerCase()]: true,\n };\n }\n\n /**\n * Determines the color based on the item type and component state.\n */\n getColor(item: 'label' | 'text' | 'icon') {\n if (this.disabled) return 'neutral-medium';\n\n const isStatusDefault = this.status === 'default';\n const isHoveredOrFocused = this.isFocused || this.isHovered;\n\n if (item === 'label') {\n if (!isStatusDefault || isHoveredOrFocused) return 'neutral-black';\n return 'neutral-dark';\n }\n\n if (isHoveredOrFocused && isStatusDefault) return 'neutral-black';\n if (this.status === 'success') return 'success-dark';\n if (this.status === 'error') return 'error-dark';\n\n return 'neutral-dark';\n }\n\n /**\n * Renders the icon based on the component's status.\n */\n renderIcon() {\n if (this.status === 'default') return null;\n const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];\n return (\n <cura-icon\n class='feedback-icon'\n name={icon}\n iconset='default'\n size={this.size === 'large' ? 20 : 16}\n color={this.getColor('icon')}\n style={this.styles}\n />\n );\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.disabled) return event.preventDefault();\n const target = event.target as HTMLElement;\n\n if (target.tagName === 'CURA-SELECT-OPTION') return this.onOptiselected(event);\n this.isOpen = !this.isOpen;\n };\n\n\n render() {\n return (\n <Host style={this.styles}>\n <div\n class={this.getClasses()}\n onMouseEnter={() => (this.isHovered = true)}\n onMouseLeave={() => (this.isHovered = false)}\n onClick={this.handleClick}\n >\n {this.label && (\n <cura-label\n class='label'\n weight='bold'\n size={this.size === 'large' ? 'small' : 'xsmall'}\n color={this.getColor('label')}\n >\n {this.label} {this.required && <span class='required'>* </span>}\n </cura-label>\n )}\n\n <div class={{\n 'cura-input-field': true,\n 'open': this.isOpen\n }}>\n {this.renderIcon()}\n <input\n type=\"text\"\n autocomplete='off'\n onFocus={() => (this.isFocused = true)}\n onBlur={() => (this.isFocused = false)}\n onKeyDown={this.handleKeyNavigation}\n aria-required={String(this.required)}\n aria-disabled={String(this.disabled)}\n aria-invalid={String(this.status === 'error')}\n onInput={this.handleInputChange}\n style={this.styles}\n placeholder={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n value={this.textInput}\n readonly={this.searchBehavior ? null : true}\n />\n <cura-icon\n name={this.isOpen ? 'up' : 'down'}\n class=\"up-down-icon\"\n color={this.disabled ? 'neutral-dark' : 'primary-base'}\n size={16}\n iconset='default'\n />\n </div>\n <cura-label\n class=\"helper-text\"\n size='xsmall'\n color={this.getColor('text')}\n weight={this.mode === 'transparent' ? 'bold' : 'regular'} >\n <slot></slot>\n </cura-label>\n {this.isOpen && (\n <div class={{\n 'menu': true,\n 'open': this.isOpen\n }}>\n <slot name='option'></slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"cura-select.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-select/cura-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h, Event, EventEmitter, AttachInternals, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-select',\n styleUrl: 'cura-select.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraSelect {\n /**\n * The label text for the select component.\n * Reflects as an attribute in the DOM.\n */\n @Prop({ reflect: true }) label: string = '';\n\n /**\n * Placeholder text for the input field.\n * Reflects as an attribute in the DOM.\n */\n @Prop({ reflect: true }) placeholder: string = '';\n\n /**\n * Current value of the select component.\n * Reflects as an attribute in the DOM and is mutable.\n */\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /**\n * Display mode of the select component.\n * Can be 'default' or 'transparent'.\n */\n @Prop({ reflect: true }) mode: 'default' | 'transparent' = 'default';\n\n /**\n * Size of the select component.\n * Can be 'small', 'medium', or 'large'.\n */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /**\n * Status of the select component.\n * Can be 'success', 'error', or 'default'.\n */\n @Prop({ reflect: true, mutable: true }) status: 'success' | 'error' | 'default' = 'default';\n\n /**\n * Whether the select component is disabled.\n * Reflects as an attribute in the DOM.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Whether the select component is required.\n * Reflects as an attribute in the DOM.\n */\n @Prop({ reflect: true }) required: boolean = false;\n\n /**\n * Enable / Disable search at options by term.\n * Default: false\n */\n @Prop({ reflect: true }) searchBehavior: boolean = false;\n\n /**\n * Internal state: Whether the input is hovered.\n * Default: false\n */\n @State() isHovered: boolean = false;\n\n /**\n * Internal state: Whether the input is focused.\n * Default: false\n */\n @State() isFocused: boolean = false;\n\n /**\n * Internal state: Whether the dropdown menu is open.\n * Default: false\n */\n @State() isOpen: boolean = false;\n\n /**\n * Internal state: Collection of options for the select component.\n */\n @State() options: NodeListOf<HTMLCuraSelectOptionElement>;\n\n @State() activeIndex = -1;\n\n @Watch('activeIndex')\n updateOptionHighlights(newActiveINdex: number) {\n this.options.forEach((option, index) => ((option as any).active = index === newActiveINdex));\n }\n\n @State() textInput = '';\n\n @Watch('textInput')\n /**\n * Filters the options based on the current input value.\n */\n filterOptions(newText) {\n if (!this.isOpen || !this.searchBehavior) {\n return;\n }\n\n this.options.forEach(option => {\n const optionValue = option.textContent?.toLowerCase() || '';\n const isVisible = optionValue.includes(newText.toLocaleLowerCase());\n option.style.display = isVisible ? 'block' : 'none';\n });\n }\n\n /**\n * Reference to the host element of the component.\n */\n @Element() host: HTMLElement;\n\n /**\n * Event emitted when an option is selected.\n */\n @Event() selected: EventEmitter;\n\n /**\n * MutationObserver to watch changes in the component.\n */\n mutationObserver: MutationObserver;\n\n /**\n * Styles to be applied to the component.\n */\n styles = {};\n\n /**\n * Theme object containing font and color information.\n */\n theme = window.CuraAPI.theme;\n\n @AttachInternals() internals: ElementInternals;\n\n /**\n * Callback for form association.\n */\n formAssociatedCallback(form: { ariaLabel: string }) {\n form.ariaLabel = this.label;\n }\n\n /**\n * Callback to restore the switch state from the form.\n */\n formStateRestoreCallback(state: { value: string }) {\n this.textInput = state.value;\n this.updateSelectedOption();\n }\n\n /**\n * Callback to reset the switch state when the form is reset.\n */\n formResetCallback() {\n this.textInput = '';\n this.clearSelectedAttributes();\n this.internals.setFormValue('');\n this.internals.setValidity({});\n }\n\n /**\n * Callback to update the switch's disabled state when the form's disabled state changes.\n */\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n /**\n * Lifecycle method called before the component is rendered.\n * Initializes the options for the select component.\n */\n componentWillLoad() {\n this.initializeOptions();\n }\n /**\n * Lifecycle method called after the component is rendered.\n * Initializes select-related functionality.\n */\n componentDidLoad() {\n this.setupMutationObserver();\n }\n /**\n * Lifecycle method called when the component is connected to the DOM.\n * Applies styles based on the theme.\n */\n connectedCallback() {\n this.applyStyles();\n }\n /**\n * Lifecycle method called when the component is disconnected from the DOM.\n * Disconnects the MutationObserver if it exists.\n */\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n initializeOptions() {\n this.options = this.host.querySelectorAll<HTMLCuraSelectOptionElement>('cura-select-option');\n this.options.forEach(option => {\n option.setAttribute('size', this.size);\n\n const isSelected = this.value === option.value;\n option.setAttribute('selected', JSON.stringify(isSelected));\n\n if (isSelected) {\n this.value = option.value;\n this.internals.setFormValue(option.value);\n }\n });\n\n this.textInput = Array.from(this.options).find(option => option.value === this.value)?.textContent || this.textInput;\n }\n /**\n * Applies styles to the component based on the theme.\n */\n applyStyles() {\n const { fonts, colors } = this.theme;\n const fontWeights = fonts.getWeights();\n\n this.styles = {\n ...this.styles,\n '--font-weight-medium': fontWeights.medium,\n '--font-weight-bold': fontWeights.bold,\n '--font-weight-regular': fontWeights.regular,\n '--font-color': fonts.getColor(),\n '--font-family': fonts.getFamily(),\n '--font-size': fonts.getSize(),\n };\n\n const colorKeys = [\n 'primary-base',\n 'neutral-purewhite',\n 'neutral-white',\n 'neutral-black',\n 'neutral-medium',\n 'neutral-light',\n 'neutral-base',\n 'neutral-dark',\n 'success-dark',\n 'success-darker',\n 'success-lighter',\n 'error-lighter',\n 'error-dark',\n 'error-darker',\n 'error-base',\n 'info-base',\n ];\n\n colorKeys.forEach(key => {\n this.styles[`--${key}`] = colors.getColor(key);\n });\n }\n /**\n * Sets up a MutationObserver to watch for changes in the component.\n */\n setupMutationObserver() {\n this.mutationObserver = new MutationObserver(this.handleMutations);\n this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });\n }\n /**\n * Handles mutations observed by the MutationObserver.\n * Updates the selected option or filters options based on the mutation type.\n */\n handleMutations = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.type === 'attributes') {\n if (mutation.attributeName === 'selected') this.updateSelectedOption();\n }\n });\n };\n /**\n * Handles the selection of an option.\n */\n onOptiselected = (event: Event) => {\n const selectedOption = event.target as HTMLElement;\n this.clearSelectedAttributes();\n selectedOption.setAttribute('selected', 'true');\n };\n\n @Watch('value')\n handleValueChange(newValue: string) {\n this.clearSelectedAttributes();\n\n const selectedOption = this.host.querySelector(`cura-select-option[value=\"${newValue}\"]`);\n\n if (!selectedOption) {\n return;\n }\n\n selectedOption.setAttribute('selected', 'true');\n }\n\n updateSelectedOption() {\n const selectedOptionElement = this.host.querySelector<HTMLCuraSelectOptionElement>('cura-select-option[selected]');\n\n if (!selectedOptionElement) {\n return;\n }\n\n this.value = selectedOptionElement.value;\n this.internals.setFormValue(this.value);\n\n if (this.textInput !== selectedOptionElement.textContent) {\n this.textInput = selectedOptionElement.textContent;\n this.isOpen = false;\n this.selected.emit(selectedOptionElement.value);\n }\n }\n\n /**\n * Clears the 'selected' attribute from all options.\n */\n clearSelectedAttributes() {\n this.options.forEach(option => option.removeAttribute('selected'));\n }\n\n handleKeyNavigation = (event: KeyboardEvent) => {\n const { code: keyCode } = event;\n\n if (!this.isOpen && keyCode === 'ArrowDown') {\n this.isOpen = true;\n this.activeIndex = 0;\n\n return;\n }\n\n if (keyCode === 'ArrowDown') {\n event.preventDefault();\n this.updateActiveIndex(1);\n }\n\n if (keyCode === 'ArrowUp') {\n event.preventDefault();\n this.updateActiveIndex(-1);\n }\n\n if (keyCode === 'Enter' || keyCode === 'Space') {\n this.options[this.activeIndex]?.click();\n }\n\n if (keyCode === 'Escape') {\n this.isOpen = false;\n }\n };\n\n updateActiveIndex(direction: number) {\n if (this.options.length === 0) return;\n this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;\n }\n\n handleInputChange = (e: Event) => {\n this.textInput = (e.target as HTMLInputElement).value;\n this.isOpen = this.textInput.length > 0;\n this.internals.setFormValue(this.textInput);\n };\n\n getClasses() {\n return {\n wrapper: true,\n label: !!this.label,\n disabled: this.disabled,\n transparent: this.mode === 'transparent',\n [this.size.toLowerCase()]: true,\n [this.status.toLowerCase()]: true,\n };\n }\n\n /**\n * Determines the color based on the item type and component state.\n */\n getColor(item: 'label' | 'text' | 'icon') {\n if (this.disabled) return 'neutral-medium';\n\n const isStatusDefault = this.status === 'default';\n const isHoveredOrFocused = this.isFocused || this.isHovered;\n\n if (item === 'label') {\n if (!isStatusDefault || isHoveredOrFocused) return 'neutral-black';\n return 'neutral-dark';\n }\n\n if (isHoveredOrFocused && isStatusDefault) return 'neutral-black';\n if (this.status === 'success') return 'success-dark';\n if (this.status === 'error') return 'error-dark';\n\n return 'neutral-dark';\n }\n\n /**\n * Renders the icon based on the component's status.\n */\n renderIcon() {\n if (this.status === 'default') return null;\n const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];\n return <cura-icon class=\"feedback-icon\" name={icon} iconset=\"default\" size={this.size === 'large' ? 20 : 16} color={this.getColor('icon')} style={this.styles} />;\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.disabled) return event.preventDefault();\n const target = event.target as HTMLElement;\n\n if (target.tagName === 'CURA-SELECT-OPTION') return this.onOptiselected(event);\n this.isOpen = !this.isOpen;\n };\n\n render() {\n return (\n <Host style={this.styles}>\n <div class={this.getClasses()} onMouseEnter={() => (this.isHovered = true)} onMouseLeave={() => (this.isHovered = false)} onClick={this.handleClick}>\n {this.label && (\n <cura-label class=\"label\" weight=\"bold\" size={this.size === 'large' ? 'small' : 'xsmall'} color={this.getColor('label')}>\n {this.label} {this.required && <span class=\"required\">* </span>}\n </cura-label>\n )}\n\n <div\n class={{\n 'cura-input-field': true,\n 'open': this.isOpen,\n }}\n >\n {this.renderIcon()}\n <input\n type=\"text\"\n autocomplete=\"off\"\n onFocus={() => (this.isFocused = true)}\n onBlur={() => (this.isFocused = false)}\n onKeyDown={this.handleKeyNavigation}\n aria-required={String(this.required)}\n aria-disabled={String(this.disabled)}\n aria-invalid={String(this.status === 'error')}\n onInput={this.handleInputChange}\n style={this.styles}\n placeholder={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n value={this.textInput}\n readonly={this.searchBehavior ? null : true}\n />\n <button class=\"up-down-button\">\n <cura-icon name={this.isOpen ? 'up' : 'down'} class=\"up-down-icon\" color={this.disabled ? 'neutral-dark' : 'primary-base'} size={16} iconset=\"default\" />\n </button>\n </div>\n <cura-label class=\"helper-text\" size=\"xsmall\" color={this.getColor('text')} weight={this.mode === 'transparent' ? 'bold' : 'regular'}>\n <slot></slot>\n </cura-label>\n {this.isOpen && (\n <div\n class={{\n menu: true,\n open: this.isOpen,\n }}\n >\n <slot name=\"option\"></slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
@@ -114,7 +114,7 @@ export default {
114
114
  defaultValue: { summary: '' },
115
115
  },
116
116
  },
117
- onselect: {
117
+ selected: {
118
118
  description: 'Emite um evento via Listener quando um valor é selecionado. { value: string , selected: boolean }',
119
119
  table: {
120
120
  category: 'Evento',
@@ -1 +1 @@
1
- {"version":3,"file":"cura-select.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-select/cura-select.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["const renderCuraSelect = (args) => {\n const optionsMarkup = args.options.map(option =>\n `<cura-select-option value=\"${option.value}\">${option.label}</cura-select-option>`\n ).join('');\n\n const block = `<cura-select${args.label ? `\n label=\"${args.label}\"` : ''}${args.placeholder ? `\n placeholder=\"${args.placeholder}\"` : ''}${args.defaultValue ? `\n default-value=\"${args.defaultValue}\"` : ''}${args.value ? `\n value=\"${args.value}\"` : ''}${args.mode ? `\n mode=\"${args.mode}\"` : ''}${args.size ? `\n size=\"${args.size}\"` : ''}${args.status ? `\n status=\"${args.status}\"` : ''}${args.disabled ? `\n disabled` : ''}${args.required ? `\n required` : ''}${args.searchBehavior ? `\n search-behavior=\"${args.searchBehavior}\"` : ''}>\n ${args.helperText}\n ${optionsMarkup}\n</cura-select>`;\n\n return `<div style=\"height: 200px; padding: 20px;\">${block}</div>`;\n};\n\n\n\nexport default {\n title: 'Componentes/Forms/Select',\n component: 'cura-select',\n tags: ['autodocs'],\n render: (args) => renderCuraSelect(args),\n argTypes: {\n label: {\n control: 'text',\n description: 'Texto do rótulo para o componente select.',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n placeholder: {\n control: 'text',\n description: 'Texto de espaço reservado para o campo de entrada.',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n defaultValue: {\n control: 'text',\n description: 'Valor padrão para o componente select.',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n value: {\n control: 'text',\n description: 'Valor atual do componente select. Ao inicar a busca o mesmo se refere ao option relacionado',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n mode: {\n control: { type: 'inline-radio' },\n options: ['default', 'transparent'],\n description: \"Modo de exibição do componente select. Pode ser 'default' ou 'transparent'.\",\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'default' },\n },\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: \"Tamanho do componente select. Pode ser 'small', 'medium' ou 'large'.\",\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'medium' },\n },\n },\n status: {\n control: { type: 'inline-radio' },\n options: ['default', 'success', 'error'],\n description: \"Status do componente select. Pode ser 'success', 'error' ou 'default'.\",\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'default' },\n },\n },\n disabled: {\n control: 'boolean',\n description: 'Indica se o componente select está desabilitado.',\n table: {\n category: 'states',\n defaultValue: { summary: 'false' },\n },\n },\n required: {\n control: 'boolean',\n description: 'Indica se o componente select é obrigatório.',\n table: {\n category: 'states',\n defaultValue: { summary: 'false' },\n },\n },\n searchBehavior: {\n control: 'boolean',\n description: 'Habilita o modo de digitação e busca nas opções a partir do termo.',\n table: {\n category: 'states',\n defaultValue: { summary: 'false' },\n }\n },\n helperText: {\n name: 'content',\n control: 'text',\n description: 'Define o texto de ajuda do input, renderizado dentro do slot num elemento <cura-label>. Aceita tags HTML.',\n table: {\n category: 'Slots',\n defaultValue: { summary: '' },\n },\n },\n onselect: {\n description: 'Emite um evento via Listener quando um valor é selecionado. { value: string , selected: boolean }',\n table: {\n category: 'Evento',\n defaultValue: { summary: '' },\n },\n },\n options: {\n control: 'array',\n description: 'Lista de opções definido pela aplicação para cura-select-option.',\n table: {\n category: 'aplication',\n defaultValue: { summary: '[]' },\n },\n },\n },\n};\n\nexport const CuraSelect = {\n args: {\n options: [\n { value: '1', label: 'Opção 1' },\n { value: '2', label: 'Escolha 2' },\n { value: '3', label: 'Exemplo 3' },\n ],\n label: 'Escolha uma opção',\n placeholder: 'Selecione...',\n defaultValue: '',\n value: '',\n mode: 'default',\n size: 'medium',\n status: 'default',\n disabled: false,\n required: false,\n searchBehavior: false,\n helperText: 'Texto de ajuda'\n },\n};\n"]}
1
+ {"version":3,"file":"cura-select.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-select/cura-select.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["const renderCuraSelect = (args) => {\n const optionsMarkup = args.options.map(option =>\n `<cura-select-option value=\"${option.value}\">${option.label}</cura-select-option>`\n ).join('');\n\n const block = `<cura-select${args.label ? `\n label=\"${args.label}\"` : ''}${args.placeholder ? `\n placeholder=\"${args.placeholder}\"` : ''}${args.defaultValue ? `\n default-value=\"${args.defaultValue}\"` : ''}${args.value ? `\n value=\"${args.value}\"` : ''}${args.mode ? `\n mode=\"${args.mode}\"` : ''}${args.size ? `\n size=\"${args.size}\"` : ''}${args.status ? `\n status=\"${args.status}\"` : ''}${args.disabled ? `\n disabled` : ''}${args.required ? `\n required` : ''}${args.searchBehavior ? `\n search-behavior=\"${args.searchBehavior}\"` : ''}>\n ${args.helperText}\n ${optionsMarkup}\n</cura-select>`;\n\n return `<div style=\"height: 200px; padding: 20px;\">${block}</div>`;\n};\n\n\n\nexport default {\n title: 'Componentes/Forms/Select',\n component: 'cura-select',\n tags: ['autodocs'],\n render: (args) => renderCuraSelect(args),\n argTypes: {\n label: {\n control: 'text',\n description: 'Texto do rótulo para o componente select.',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n placeholder: {\n control: 'text',\n description: 'Texto de espaço reservado para o campo de entrada.',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n defaultValue: {\n control: 'text',\n description: 'Valor padrão para o componente select.',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n value: {\n control: 'text',\n description: 'Valor atual do componente select. Ao inicar a busca o mesmo se refere ao option relacionado',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n mode: {\n control: { type: 'inline-radio' },\n options: ['default', 'transparent'],\n description: \"Modo de exibição do componente select. Pode ser 'default' ou 'transparent'.\",\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'default' },\n },\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: \"Tamanho do componente select. Pode ser 'small', 'medium' ou 'large'.\",\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'medium' },\n },\n },\n status: {\n control: { type: 'inline-radio' },\n options: ['default', 'success', 'error'],\n description: \"Status do componente select. Pode ser 'success', 'error' ou 'default'.\",\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'default' },\n },\n },\n disabled: {\n control: 'boolean',\n description: 'Indica se o componente select está desabilitado.',\n table: {\n category: 'states',\n defaultValue: { summary: 'false' },\n },\n },\n required: {\n control: 'boolean',\n description: 'Indica se o componente select é obrigatório.',\n table: {\n category: 'states',\n defaultValue: { summary: 'false' },\n },\n },\n searchBehavior: {\n control: 'boolean',\n description: 'Habilita o modo de digitação e busca nas opções a partir do termo.',\n table: {\n category: 'states',\n defaultValue: { summary: 'false' },\n }\n },\n helperText: {\n name: 'content',\n control: 'text',\n description: 'Define o texto de ajuda do input, renderizado dentro do slot num elemento <cura-label>. Aceita tags HTML.',\n table: {\n category: 'Slots',\n defaultValue: { summary: '' },\n },\n },\n selected: {\n description: 'Emite um evento via Listener quando um valor é selecionado. { value: string , selected: boolean }',\n table: {\n category: 'Evento',\n defaultValue: { summary: '' },\n },\n },\n options: {\n control: 'array',\n description: 'Lista de opções definido pela aplicação para cura-select-option.',\n table: {\n category: 'aplication',\n defaultValue: { summary: '[]' },\n },\n },\n },\n};\n\nexport const CuraSelect = {\n args: {\n options: [\n { value: '1', label: 'Opção 1' },\n { value: '2', label: 'Escolha 2' },\n { value: '3', label: 'Exemplo 3' },\n ],\n label: 'Escolha uma opção',\n placeholder: 'Selecione...',\n defaultValue: '',\n value: '',\n mode: 'default',\n size: 'medium',\n status: 'default',\n disabled: false,\n required: false,\n searchBehavior: false,\n helperText: 'Texto de ajuda'\n },\n};\n"]}
@@ -33,7 +33,7 @@ export class CuraSelectOption {
33
33
  };
34
34
  }
35
35
  render() {
36
- return (h(Host, { key: 'cf0489e6e396d60d4a4f71e306727ac12b3fbb7a', slot: "option" }, h("div", { key: 'e970f361bff2c54e0324e43a612d3fa45a83b2bd', class: this.getClasses(), style: this.styles }, h("cura-label", { key: '7bbcc39a51c2c9e14f233c94ea2dcf20543e11eb', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: 'f5a54eaf4e2ef19239ca185b39897f98d11f05c7' })), this.selected && h("cura-icon", { key: '8a1560793da12ec6f5d3e9dc2db7e242a440267c', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
36
+ return (h(Host, { key: '7633d57e0ab5ba265c31e53dde513bdb0bc934e8', slot: "option" }, h("div", { key: 'aa301dd963ffde79251ad79428934609ba70d713', class: this.getClasses(), style: this.styles }, h("cura-label", { key: '2a55fc05a9bb9a47a4a4b191e85ce5fdb6c7d5cf', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: '4f28e0d1142cf847174f72614470b89ac3495197' })), this.selected && h("cura-icon", { key: '189b1b8877e68648f5282281df144ead39b64441', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
37
37
  }
38
38
  static get is() { return "cura-select-option"; }
39
39
  static get encapsulation() { return "shadow"; }
@@ -92,7 +92,7 @@ export class CuraSwitch {
92
92
  return classes;
93
93
  }
94
94
  render() {
95
- return (h(Host, { key: 'd7aee391a4604acfae345b3645543c6b27efc033' }, h("div", { key: '446f921b82386fb0f9d8d8551f6128a2891cd27e', class: this.getClasses(), style: this.styles }, h("div", { key: 'a6528ac65f396a40ea92556183d047212b4c678f', class: "info" }, h("cura-label", { key: '0d404e3d0310c985b03cc29d4b9495331ce87c2a', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: '833c04b96bf358b2991b618f4089e7ce31e96e30', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '3cb25210dbc16055660d612b78940e5b53cf6f96' }))), h("div", { key: 'db87f67c29558a05704a5baae728bfaa4db217d1', onClick: this.toggleSwitch, class: "control" }, h("div", { key: 'cdafeccd3cd11f5b7bfabf73ce8e2a3476febe99', class: `track ${this.size.toLowerCase()}` }, h("div", { key: 'da8ef012bcb02afe21d22b0e6145a129a9282f25', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
95
+ return (h(Host, { key: '11257c8df21e4d88ef7a1e26b72f8c53fd316edd' }, h("div", { key: '358b9bf587443350fd092abb179b2207064c9278', class: this.getClasses(), style: this.styles }, h("div", { key: 'acc517d68a7fde4a83653a7fadbdb337e6175498', class: "info" }, h("cura-label", { key: 'dede214a31292a72e8f55adb50060628a1a101c0', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: 'a96960a7e898e8f9d7151c468d18e52860d589d1', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: 'de46f003bf8046e3742d831cc45d22471e19c0a4' }))), h("div", { key: 'ae0c72cd68ed42fec1338d6ded49d7b535157476', onClick: this.toggleSwitch, class: "control" }, h("div", { key: '3aa0e60235071541289ea6a430966094a2753520', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '419866ba2b46a394428f83e6824ebb315e6671a1', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
96
96
  }
97
97
  static get is() { return "cura-switch"; }
98
98
  static get encapsulation() { return "shadow"; }
@@ -16,7 +16,7 @@ export class CuraLoaderBar {
16
16
  this.setProgress();
17
17
  }
18
18
  render() {
19
- return (h(Host, { key: '2cffac94bdca65aa8ddff9d57c085a6b2eb30410' }, h("div", { key: 'cfdcf79c63a6c40f24088a71f96986ba46e6d7b7', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: 'ae0cd539ddc63db0d0adae566788501b2042d82b', class: "progress-bar-fill" }))));
19
+ return (h(Host, { key: '4dc7ef7b17bfb408fa7ff9a74509637bb9045353' }, h("div", { key: 'cd2654377f0b45c5b6fa6aa57940f5d81cfd0cce', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: '5d7b4a058162b840f167adb81843403f6c488c4e', class: "progress-bar-fill" }))));
20
20
  }
21
21
  setColor() {
22
22
  this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--color-base': window.CuraAPI.theme.colors.getColor(this.color) });
@@ -19,7 +19,7 @@ export class CuraLoaderCircle {
19
19
  };
20
20
  }
21
21
  render() {
22
- return (h(Host, { key: 'b54c7d6fb5f297776c415fc6320dcc56a8d8e23f', style: this.getStyles() }, h("svg", { key: '678e5b6959113b39bbd99cfa1cc24fe3476f88f5', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'f644ac82003dc4a59944d75d315c0e0e857de2c0' }, h("circle", { key: 'edf0ee851a9baf6f4928f961b296de9b82652aba', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: '60892a122ff4036ca29e550794ab1ce06c221359', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '3b9a54760fe0bab2e8fe6139b8c7365d11e1d966' }, h("linearGradient", { key: '447ab3c5dd38685173404c775c7fd993f6ffd696', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'df6855ea0c534bd6a623580573f999f1e078f77f' }), h("stop", { key: '8a76e2928a39673780ad5561dbc5b4204af62fcb', offset: "1" }))))));
22
+ return (h(Host, { key: '627023f3e413d6a28e802eaf011f0ca39ccc17d9', style: this.getStyles() }, h("svg", { key: '1f7dab1ef6e82d81ffacf336660c508c039e7430', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '4baeff0f8c83335be93cd067dbed2cfa5d0be88a' }, h("circle", { key: '7929b1120288af1f17976a69463bf8965f2e4fae', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: '832582680715bedebca8f025d141d40785832a86', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: 'ad393945da8c664faed05c17ed1c51cae3a02edb' }, h("linearGradient", { key: 'bf42d208d369c60bbdad5adf81c4c61144ad34eb', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '445c119c6cebcfb057826ebd090b883aa479a8cd' }), h("stop", { key: '47555985163574e69556490d1d09c6283d31845c', offset: "1" }))))));
23
23
  }
24
24
  static get is() { return "cura-loader-circle"; }
25
25
  static get encapsulation() { return "shadow"; }
@@ -60,7 +60,7 @@ export class CuraDisplay {
60
60
  return tags[`${this.level}`] || tags['default'];
61
61
  }
62
62
  render() {
63
- return (h(Host, { key: '32758f666bb547d7cd3646694e8cc132a795bc44', style: this.hostCSSProperties() }, this.getHeadingTag()));
63
+ return (h(Host, { key: '01876449797c600a4fa37c9b4addd80855e6fc83', style: this.hostCSSProperties() }, this.getHeadingTag()));
64
64
  }
65
65
  static get is() { return "cura-display"; }
66
66
  static get encapsulation() { return "shadow"; }
@@ -62,7 +62,7 @@ export class CuraHeading {
62
62
  return tags[`${this.level}`] || tags['default'];
63
63
  }
64
64
  render() {
65
- return (h(Host, { key: '16f2897c60b5a41256f326d520277480e2800f17', style: this.hostCSSProperties() }, this.getHeadingTag()));
65
+ return (h(Host, { key: '6384b5f7302399cca695c7c51d403ee704c95a48', style: this.hostCSSProperties() }, this.getHeadingTag()));
66
66
  }
67
67
  static get is() { return "cura-heading"; }
68
68
  static get encapsulation() { return "shadow"; }
@@ -45,7 +45,7 @@ export class CuraParagraph {
45
45
  };
46
46
  }
47
47
  render() {
48
- return (h(Host, { key: '237ff05930df443e9e8c2cb618554525c2312e35', style: this.hostCSSProperties() }, h("p", { key: '71afec31842fc60f17881613ab2f36f4cffd358b', style: this.styles, class: this.setsizeClass() }, h("slot", { key: '07fa9781d53113b7d4f9b7732b48d6836f700406' }))));
48
+ return (h(Host, { key: '2ca388b3d1c31588765768ece303decb6e421a81', style: this.hostCSSProperties() }, h("p", { key: '1f31f6b9831cceed88606754581f282a515e3598', style: this.styles, class: this.setsizeClass() }, h("slot", { key: 'f50ffaf10f933daac9e2ae901556bbfc62ac8a72' }))));
49
49
  }
50
50
  static get is() { return "cura-paragraph"; }
51
51
  static get encapsulation() { return "shadow"; }
@@ -55,7 +55,7 @@ const CuraAlert$1 = /*@__PURE__*/ proxyCustomElement(class CuraAlert extends HTM
55
55
  return this.icon ? this.icon : iconMapping[this.type];
56
56
  }
57
57
  render() {
58
- return (h(Host, { key: 'c7d36a87c8ca4ea44a53d90edf5028e27d4ab631' }, h("div", { key: 'c54f199ba48a8a0e0549c5f046cf7dc128d8108e', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'f1607925bceeaf29a8bee7a021b1bf9e9be5b0e6', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '6ccb322b9594a0c963cf8fa873b4a66642d69357', class: "content" }, this.label ? (h("cura-label", { class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label)) : '', h("cura-paragraph", { key: 'e70495f19e2eac2b0c593d156436061aba50c295', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '043f67d199324f668aced318a81e6ecdbd3ac97a' })), h("slot", { key: '83cc65b83514bdbc77a3676d2fab55ebb20aa5dc', name: "actions" })), this.closeable ?
58
+ return (h(Host, { key: 'a0b22404673b1568b9cb937150dda71ce4c99d50' }, h("div", { key: 'c30bf1b97d1e1ffaf334ef3bca6cdd1f081c679c', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '1bd88c8a19e073d7b9d967d8df38bb74063cd110', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '0df09a27c27c7e1743f7cfb9e71c96b102ff4484', class: "content" }, this.label ? (h("cura-label", { class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label)) : '', h("cura-paragraph", { key: '687cc7ab050299f0878c2d10ccd28e92708db85d', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'e2d85d40e65029ea71a43aa23e7298d6dcc7efa9' })), h("slot", { key: 'a28fe90c9bfe2b9fb22f196eab7bb2e09e408dbf', name: "actions" })), this.closeable ?
59
59
  (h("cura-icon", { name: "close", size: 16, color: "error-dark", class: "icon-right", onClick: this.handleClose }))
60
60
  : '')));
61
61
  }
@@ -52,7 +52,7 @@ const CuraAvatar$1 = /*@__PURE__*/ proxyCustomElement(class CuraAvatar extends H
52
52
  this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;
53
53
  }
54
54
  render() {
55
- return (h(Host, { key: '2760534555a0483e7e30c5f3009ec0cf68d0973b', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '3daf6dd066983dc63525c38b7da498147c0bf387', class: this.getClasses(), style: this.styles }, h("img", { key: 'a5f4de7983722fc3f750404fa985c312590b5e98', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
55
+ return (h(Host, { key: '467e74004b400e80a2d7f8e1a40cd9d7e782ff8a', style: this.hostCSSProperties(), role: "img" }, h("div", { key: 'c38a163b8aeebd07f8aece7aea9889c336df92a5', class: this.getClasses(), style: this.styles }, h("img", { key: 'a22868d4aae4029afb9b325a5c8f5556fa8984ea', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
56
56
  }
57
57
  get host() { return this; }
58
58
  static get watchers() { return {
@@ -41,13 +41,13 @@ const CuraBadgeNumber = /*@__PURE__*/ proxyCustomElement(class CuraBadgeNumber e
41
41
  }
42
42
  getClasses() {
43
43
  const classes = {
44
- 'container': true,
44
+ 'container': true
45
45
  };
46
46
  classes[this.type.toLowerCase()] = true;
47
47
  return classes;
48
48
  }
49
49
  render() {
50
- return (h(Host, { key: 'bb6ab35685970eadac6962b3a01f158ebac05515' }, this.number && this.number <= 0 ? '' : (h("div", { class: this.getClasses(), style: this.styles }, h("cura-label", { size: "xsmall", "line-height": "none", color: this.labelColor }, this.number >= 100 ? '99+' : this.number)))));
50
+ return (h(Host, { key: '8b67f2b913a10de53a519cdafcfbcb140b2adda5' }, this.number && this.number <= 0 ? '' : (h("div", { class: this.getClasses(), style: this.styles }, h("cura-label", { size: "xsmall", "line-height": "none", color: this.labelColor }, this.number >= 100 ? '99+' : this.number)))));
51
51
  }
52
52
  static get watchers() { return {
53
53
  "disabled": ["handleColorChange"],
@@ -1 +1 @@
1
- {"file":"cura-badge-counter2.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,uvBAAuvB,CAAC;AACpxB,+BAAe,mBAAmB;;MCMrB,eAAe;;;;;QAE1B,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;QAqB7B,eAAU,GAAG,gBAAgB,CAAC;QAC9B,gBAAW,GAAG,iBAAiB,CAAC;;qBAZR,SAAS;wBAIL,KAAK;oBAI4B,OAAO;sBAElD,EAAE;;IAOpB,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,SAAS;QACP,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;;QAEvC,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE;YAC1D,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,GAAG,gBAAgB,GAAG,GAAG,KAAK,OAAO,CAAC;YACtE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;;SAEpC;aAAM;YACL,IAAI,CAAC,WAAW,GAAG,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,GAAG,cAAc,GAAG,GAAG,KAAK,UAAU,CAAC;YAC9F,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,GAAG,gBAAgB,GAAG,GAAG,KAAK,OAAO,CAAC;SACtE;QACD,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,GACxE,CAAA;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAChE,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,UAAU;QACR,MAAM,OAAO,GAAG;YACd,WAAW,EAAE,IAAI;SAClB,CAAC;QACF,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;QACxC,OAAO,OAAO,CAAC;KAChB;IAGD,MAAM;QACJ,QACE,EAAC,IAAI,uDACD,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE,IACtC,WAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,kBAAY,IAAI,EAAC,QAAQ,iBAAa,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,IAChE,IAAI,CAAC,MAAM,IAAI,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC,MAAM,CAC9B,CACT,CACL,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/badges/cura-badge-counter/cura-badge-counter.scss?tag=cura-badge-counter&encapsulation=shadow","src/components/badges/cura-badge-counter/cura-badge-counter.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n\n:host {\n width: fit-content;\n display: inline-block;\n height: #{$spacing-xxs};\n position: relative;\n\n .container {\n display: flex;\n min-width: #{$spacing-xxs};\n width: fit-content;\n height: #{$spacing-xxs};\n justify-content: center;\n align-items: center;\n border-radius: calc(#{$spacing-xxs} / 2);\n background: var(--background-color);\n box-sizing: border-box;\n padding: 0 #{$spacing-tiny};\n position: relative;\n\n &.outline,\n &.transparent {\n background: transparent !important;\n }\n\n &.outline {\n &::before {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0px;\n top: 0px;\n box-sizing: border-box;\n border: 1px solid var(--background-color);\n border-radius: calc(#{$spacing-xxs} / 2);\n }\n }\n }\n\n}\n","import { Component, Host, Prop, h, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-badge-counter',\n styleUrl: 'cura-badge-counter.scss',\n shadow: true,\n})\nexport class CuraBadgeNumber {\n\n theme = window.CuraAPI.theme;\n\n /** Número a ser representado no badge.\n * Apresentará 99+ para números acima desse valor.\n */\n @Prop({ reflect: true }) number: number | null;\n /**\n * Cor fundamental do design system sem profundidade.\n * Ex.: primary (padrão)\n */\n @Prop() color: string = 'primary';\n /**\n * Define o estado do badge como desabilitado ou habilitado.\n */\n @Prop() disabled: boolean = false;\n /**\n * Define o estilo visual entre solid (default), outline ou transparent.\n */\n @Prop() type: 'solid' | 'outline' | 'transparent' | string = 'solid';\n\n @State() styles = {};\n labelColor = 'primary-darker';\n bgColorName = 'primary-lighter';\n\n @Watch(\"disabled\")\n @Watch(\"color\")\n @Watch(\"type\")\n handleColorChange() {\n this.setColors();\n }\n\n setColors() {\n const color = this.color.toLowerCase();\n /** type outline and transparent */\n if (this.type === 'outline' || this.type === 'transparent') {\n this.bgColorName = this.disabled ? `neutral-medium` : `${color}-dark`;\n this.labelColor = this.bgColorName;\n /** type solid - default */\n } else {\n this.bgColorName = color === 'neutral' || this.disabled ? `neutral-pale` : `${color}-lighter`;\n this.labelColor = this.disabled ? 'neutral-medium' : `${color}-dark`;\n }\n this.styles = {\n ...this.styles,\n '--background-color': this.theme.colors.getColor(`${this.bgColorName}`),\n }\n }\n\n connectedCallback() {\n this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n this.setColors();\n }\n\n getClasses() {\n const classes = {\n 'container': true,\n };\n classes[this.type.toLowerCase()] = true;\n return classes;\n }\n\n\n render() {\n return (\n <Host>\n { this.number && this.number <= 0 ? '' : (\n <div class={this.getClasses()} style={this.styles}>\n <cura-label size=\"xsmall\" line-height=\"none\" color={this.labelColor}>\n {this.number >= 100 ? '99+' : this.number}\n </cura-label>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"cura-badge-counter2.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,uvBAAuvB,CAAC;AACpxB,+BAAe,mBAAmB;;MCMrB,eAAe;;;;;QAE1B,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;QAqB7B,eAAU,GAAG,gBAAgB,CAAC;QAC9B,gBAAW,GAAG,iBAAiB,CAAC;;qBAZR,SAAS;wBAIL,KAAK;oBAI4B,OAAO;sBAElD,EAAE;;IAOpB,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,SAAS;QACP,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;;QAEvC,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE;YAC1D,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,GAAG,gBAAgB,GAAG,GAAG,KAAK,OAAO,CAAC;YACtE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;;SAEpC;aAAM;YACL,IAAI,CAAC,WAAW,GAAG,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,GAAG,cAAc,GAAG,GAAG,KAAK,UAAU,CAAC;YAC9F,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,GAAG,gBAAgB,GAAG,GAAG,KAAK,OAAO,CAAC;SACtE;QACD,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,GACxE,CAAA;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAChE,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,UAAU;QACR,MAAM,OAAO,GAAG;YACd,WAAW,EAAE,IAAI;SAClB,CAAC;QACF,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;QACxC,OAAO,OAAO,CAAC;KAChB;IAGD,MAAM;QACJ,QACE,EAAC,IAAI,uDACD,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE,IACtC,WAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,kBAAY,IAAI,EAAC,QAAQ,iBAAa,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,IAChE,IAAI,CAAC,MAAM,IAAI,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC,MAAM,CAC9B,CACT,CACL,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/badges/cura-badge-counter/cura-badge-counter.scss?tag=cura-badge-counter&encapsulation=shadow","src/components/badges/cura-badge-counter/cura-badge-counter.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n\n:host {\n width: fit-content;\n display: inline-block;\n height: #{$spacing-xxs};\n position: relative;\n\n .container {\n display: flex;\n min-width: #{$spacing-xxs};\n width: fit-content;\n height: #{$spacing-xxs};\n justify-content: center;\n align-items: center;\n border-radius: calc(#{$spacing-xxs} / 2);\n background: var(--background-color);\n box-sizing: border-box;\n padding: 0 #{$spacing-tiny};\n position: relative;\n\n &.outline,\n &.transparent {\n background: transparent !important;\n }\n\n &.outline {\n &::before {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0px;\n top: 0px;\n box-sizing: border-box;\n border: 1px solid var(--background-color);\n border-radius: calc(#{$spacing-xxs} / 2);\n }\n }\n }\n\n}\n","import { Component, Host, Prop, h, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-badge-counter',\n styleUrl: 'cura-badge-counter.scss',\n shadow: true,\n})\nexport class CuraBadgeNumber {\n\n theme = window.CuraAPI.theme;\n\n /** Número a ser representado no badge.\n * Apresentará 99+ para números acima desse valor.\n */\n @Prop({ reflect: true }) number: number | null;\n /**\n * Cor fundamental do design system sem profundidade.\n * Ex.: primary (padrão)\n */\n @Prop() color: string = 'primary';\n /**\n * Define o estado do badge como desabilitado ou habilitado.\n */\n @Prop() disabled: boolean = false;\n /**\n * Define o estilo visual entre solid (default), outline ou transparent.\n */\n @Prop() type: 'solid' | 'outline' | 'transparent' | string = 'solid';\n\n @State() styles = {};\n labelColor = 'primary-darker';\n bgColorName = 'primary-lighter';\n\n @Watch(\"disabled\")\n @Watch(\"color\")\n @Watch(\"type\")\n handleColorChange() {\n this.setColors();\n }\n\n setColors() {\n const color = this.color.toLowerCase();\n /** type outline and transparent */\n if (this.type === 'outline' || this.type === 'transparent') {\n this.bgColorName = this.disabled ? `neutral-medium` : `${color}-dark`;\n this.labelColor = this.bgColorName;\n /** type solid - default */\n } else {\n this.bgColorName = color === 'neutral' || this.disabled ? `neutral-pale` : `${color}-lighter`;\n this.labelColor = this.disabled ? 'neutral-medium' : `${color}-dark`;\n }\n this.styles = {\n ...this.styles,\n '--background-color': this.theme.colors.getColor(`${this.bgColorName}`),\n }\n }\n\n connectedCallback() {\n this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n this.setColors();\n }\n\n getClasses() {\n const classes = {\n 'container': true\n };\n classes[this.type.toLowerCase()] = true;\n return classes;\n }\n\n\n render() {\n return (\n <Host>\n { this.number && this.number <= 0 ? '' : (\n <div class={this.getClasses()} style={this.styles}>\n <cura-label size=\"xsmall\" line-height=\"none\" color={this.labelColor}>\n {this.number >= 100 ? '99+' : this.number}\n </cura-label>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
2
  import { d as defineCustomElement$2 } from './cura-label2.js';
3
3
 
4
- const curaBadgeDistanceCss = ":host .container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:calc(var(--base-spacing) * 8px);height:calc(var(--base-spacing) * 8px);border-radius:calc(var(--base-spacing) * 1px);background:var(--neutral-pale)}";
4
+ const curaBadgeDistanceCss = ":host .container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:calc(var(--base-spacing) * 10px);height:calc(var(--base-spacing) * 10px);border-radius:calc(var(--base-spacing) * 1px);background:var(--neutral-pale)}";
5
5
  const CuraBadgeDistanceStyle0 = curaBadgeDistanceCss;
6
6
 
7
7
  const CuraDistance = /*@__PURE__*/ proxyCustomElement(class CuraDistance extends HTMLElement {
@@ -1 +1 @@
1
- {"file":"cura-badge-distance.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,0PAA0P,CAAC;AACxR,gCAAe,oBAAoB;;MCMtB,YAAY;;;;;QAMvB,sBAAiB,GAAG,KAAK,CAAC;QAE1B,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;wBANV,CAAC;qBACa,IAAI;sBACnB,EAAE;+BACO,CAAC;;IAM5B,cAAc;QACZ,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACvG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC;QAC3D,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,iBAAiB,GAAG,UAAU,CAAC,CAAC,eAAe,GAAG,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC;KACnH;IAGD,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACvC,mEAAY,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,IAC1D,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,iBAAiB,GAAG,GAAG,GAAG,EAAE,CAC7C,EACb,mEAAY,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,IACzD,IAAI,CAAC,KAAK,CACA,CACT,CACD,EACP;KACH;IAED,gBAAgB;QACd,IAAI,CAAC,MAAM,GAAG;YACZ,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC;YAC5D,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE;SAClD,CAAA;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/badges/cura-badge-distance/cura-badge-distance.scss?tag=cura-badge-distance&encapsulation=shadow","src/components/badges/cura-badge-distance/cura-badge-distance.tsx"],"sourcesContent":["@import \"../../../scss/mixins/spacing.scss\";\n\n:host {\n .container{\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: calc(#{$base-spacing} * 8px);\n height: calc(#{$base-spacing} * 8px);\n border-radius: calc(#{$base-spacing} * 1px);\n background: var(--neutral-pale);\n }\n}\n","import { Component, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-badge-distance',\n styleUrl: 'cura-badge-distance.scss',\n shadow: true,\n})\nexport class CuraDistance {\n\n @Prop() distance = 0;\n @Prop({ reflect: true }) label = 'km';\n @State() styles = {};\n @State() displayDistance = 0;\n isThousandRounded = false;\n\n theme = window.CuraAPI.theme;\n\n @Watch('distance')\n formatDistance() {\n const roundedDistance = this.distance % 1 !== 0 ? parseFloat(this.distance.toFixed(1)) : this.distance; \n this.isThousandRounded = Math.abs(roundedDistance) >= 1000;\n this.displayDistance = this.isThousandRounded ? parseFloat((roundedDistance / 1000).toFixed(1)) : roundedDistance;\n }\n\n\n connectedCallback(){\n this.setCssProperties();\n this.formatDistance(); \n }\n\n render() {\n return (\n <Host>\n <div class=\"container\" style={this.styles}>\n <cura-label size='xsmall' weight='bold' color='neutral-black'>\n {this.displayDistance}{this.isThousandRounded ? 'K' : ''}\n </cura-label>\n <cura-label size='xsmall' weight='bold' color='neutral-dark'>\n {this.label}\n </cura-label>\n </div>\n </Host>\n );\n }\n\n setCssProperties() {\n this.styles = {\n '--neutral-pale': this.theme.colors.getColor(`neutral-pale`),\n '--base-spacing': this.theme.spacing.getSpacing()\n }\n }\n\n}\n"],"version":3}
1
+ {"file":"cura-badge-distance.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,4PAA4P,CAAC;AAC1R,gCAAe,oBAAoB;;MCMtB,YAAY;;;;;QAMvB,sBAAiB,GAAG,KAAK,CAAC;QAE1B,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;wBANV,CAAC;qBACa,IAAI;sBACnB,EAAE;+BACO,CAAC;;IAM5B,cAAc;QACZ,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACvG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC;QAC3D,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,iBAAiB,GAAG,UAAU,CAAC,CAAC,eAAe,GAAG,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC;KACnH;IAGD,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACvC,mEAAY,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,IAC1D,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,iBAAiB,GAAG,GAAG,GAAG,EAAE,CAC7C,EACb,mEAAY,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,IACzD,IAAI,CAAC,KAAK,CACA,CACT,CACD,EACP;KACH;IAED,gBAAgB;QACd,IAAI,CAAC,MAAM,GAAG;YACZ,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC;YAC5D,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE;SAClD,CAAA;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/badges/cura-badge-distance/cura-badge-distance.scss?tag=cura-badge-distance&encapsulation=shadow","src/components/badges/cura-badge-distance/cura-badge-distance.tsx"],"sourcesContent":["@import \"../../../scss/mixins/spacing.scss\";\n\n:host {\n .container{\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: calc(#{$base-spacing} * 10px);\n height: calc(#{$base-spacing} * 10px);\n border-radius: calc(#{$base-spacing} * 1px);\n background: var(--neutral-pale);\n }\n}\n","import { Component, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-badge-distance',\n styleUrl: 'cura-badge-distance.scss',\n shadow: true,\n})\nexport class CuraDistance {\n\n @Prop() distance = 0;\n @Prop({ reflect: true }) label = 'km';\n @State() styles = {};\n @State() displayDistance = 0;\n isThousandRounded = false;\n\n theme = window.CuraAPI.theme;\n\n @Watch('distance')\n formatDistance() {\n const roundedDistance = this.distance % 1 !== 0 ? parseFloat(this.distance.toFixed(1)) : this.distance; \n this.isThousandRounded = Math.abs(roundedDistance) >= 1000;\n this.displayDistance = this.isThousandRounded ? parseFloat((roundedDistance / 1000).toFixed(1)) : roundedDistance;\n }\n\n\n connectedCallback(){\n this.setCssProperties();\n this.formatDistance(); \n }\n\n render() {\n return (\n <Host>\n <div class=\"container\" style={this.styles}>\n <cura-label size='xsmall' weight='bold' color='neutral-black'>\n {this.displayDistance}{this.isThousandRounded ? 'K' : ''}\n </cura-label>\n <cura-label size='xsmall' weight='bold' color='neutral-dark'>\n {this.label}\n </cura-label>\n </div>\n </Host>\n );\n }\n\n setCssProperties() {\n this.styles = {\n '--neutral-pale': this.theme.colors.getColor(`neutral-pale`),\n '--base-spacing': this.theme.spacing.getSpacing()\n }\n }\n\n}\n"],"version":3}
@@ -0,0 +1,11 @@
1
+ import type { Components, JSX } from "../types/components";
2
+
3
+ interface CuraBadgeDot extends Components.CuraBadgeDot, HTMLElement {}
4
+ export const CuraBadgeDot: {
5
+ prototype: CuraBadgeDot;
6
+ new (): CuraBadgeDot;
7
+ };
8
+ /**
9
+ * Used to define this component and all nested components recursively.
10
+ */
11
+ export const defineCustomElement: () => void;
@@ -0,0 +1,63 @@
1
+ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
+
3
+ const curaBadgeDotCss = ":host{display:block;position:relative;width:fit-content;height:fit-content}:host .container{width:calc(var(--base-spacing) * 2px);height:calc(var(--base-spacing) * 2px);position:relative;box-sizing:border-box}:host .container::before{width:100%;height:100%;position:absolute;left:0;top:0;content:\"\";box-sizing:border-box;border-radius:50%;border:1px solid var(--color-dark);background:var(--color)}:host .container.disabled::before{background:var(--neutral-pale);border:1px solid var(--neutral-medium)}:host .container.outline::before{background:transparent;border:2px solid var(--color)}:host .container.outline.disabled::before{border:2px solid var(--neutral-medium)}:host .container.transparent::before{background:var(--color-dark);border:none}:host .container.transparent.disabled::before{background:var(--neutral-medium);border:none}";
4
+ const CuraBadgeDotStyle0 = curaBadgeDotCss;
5
+
6
+ const CuraBadgeDot$1 = /*@__PURE__*/ proxyCustomElement(class CuraBadgeDot extends HTMLElement {
7
+ constructor() {
8
+ super();
9
+ this.__registerHost();
10
+ this.__attachShadow();
11
+ this.theme = window.CuraAPI.theme;
12
+ this.color = 'primary';
13
+ this.disabled = false;
14
+ this.type = 'solid';
15
+ this.styles = {};
16
+ }
17
+ connectedCallback() {
18
+ this.styles['--base-spacing'] = this.theme.spacing.getSpacing();
19
+ this.styles['--neutral-medium'] = this.theme.colors.getColor('neutral-dark');
20
+ this.styles['--neutral-pale'] = this.theme.colors.getColor('neutral-pale');
21
+ this.setColors();
22
+ }
23
+ setColors() {
24
+ this.styles = Object.assign(Object.assign({}, this.styles), { '--color': this.theme.colors.getColor(`${this.color}`), '--color-dark': this.theme.colors.getColor(`${this.color}-dark`) });
25
+ }
26
+ getClasses() {
27
+ const classes = {
28
+ 'container': true,
29
+ 'disabled': this.disabled
30
+ };
31
+ classes[`${this.type}`] = true;
32
+ return classes;
33
+ }
34
+ render() {
35
+ return (h(Host, { key: '00e335977fbb0677db9d95bab901a012ba8a5c06' }, h("div", { key: 'e828743793731c986f37dd6a9f7abdc78b63932b', class: this.getClasses(), style: this.styles })));
36
+ }
37
+ static get style() { return CuraBadgeDotStyle0; }
38
+ }, [1, "cura-badge-dot", {
39
+ "color": [1],
40
+ "disabled": [516],
41
+ "type": [513],
42
+ "styles": [32]
43
+ }]);
44
+ function defineCustomElement$1() {
45
+ if (typeof customElements === "undefined") {
46
+ return;
47
+ }
48
+ const components = ["cura-badge-dot"];
49
+ components.forEach(tagName => { switch (tagName) {
50
+ case "cura-badge-dot":
51
+ if (!customElements.get(tagName)) {
52
+ customElements.define(tagName, CuraBadgeDot$1);
53
+ }
54
+ break;
55
+ } });
56
+ }
57
+
58
+ const CuraBadgeDot = CuraBadgeDot$1;
59
+ const defineCustomElement = defineCustomElement$1;
60
+
61
+ export { CuraBadgeDot, defineCustomElement };
62
+
63
+ //# sourceMappingURL=cura-badge-dot.js.map
@@ -0,0 +1 @@
1
+ {"file":"cura-badge-dot.js","mappings":";;AAAA,MAAM,eAAe,GAAG,00BAA00B,CAAC;AACn2B,2BAAe,eAAe;;MCMjBA,cAAY;;;;;QAEvB,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;qBAML,SAAS;wBAIU,KAAK;oBAI4B,OAAO;sBAEjE,EAAE;;IAGpB,iBAAiB;QACf,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAChE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QAC7E,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QAC3E,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,SAAS;QACP,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,EACtD,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,KAAK,OAAO,CAAC,GACjE,CAAA;KACF;IAED,UAAU;QACR,MAAM,OAAO,GAAG;YACd,WAAW,EAAE,IAAI;YACjB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QACF,OAAO,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;QAC/B,OAAO,OAAO,CAAC;KAChB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,GAAQ,CACpD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraBadgeDot"],"sources":["src/components/badges/cura-badge-dot/cura-badge-dot.scss?tag=cura-badge-dot&encapsulation=shadow","src/components/badges/cura-badge-dot/cura-badge-dot.tsx"],"sourcesContent":["@import \"../../../scss/mixins/spacing.scss\";\n\n:host {\n display: block;\n position: relative;\n width: fit-content;\n height: fit-content;\n\n .container {\n width: #{$spacing-mini};\n height: #{$spacing-mini};\n position: relative;\n box-sizing: border-box;\n\n &::before {\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0;\n top: 0;\n content: \"\";\n box-sizing: border-box;\n border-radius: 50%;\n border: 1px solid var(--color-dark);\n background: var(--color);\n }\n\n &.disabled::before {\n background: var(--neutral-pale);\n border: 1px solid var(--neutral-medium);\n }\n\n &.outline::before {\n background: transparent;\n border: 2px solid var(--color);\n }\n &.outline.disabled::before {\n border: 2px solid var(--neutral-medium);\n }\n\n &.transparent::before {\n background: var(--color-dark);\n border: none;\n }\n &.transparent.disabled::before {\n background: var(--neutral-medium);\n border: none;\n }\n\n }\n}\n","import { Component, Host, h, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'cura-badge-dot',\n styleUrl: 'cura-badge-dot.scss',\n shadow: true,\n})\nexport class CuraBadgeDot {\n\n theme = window.CuraAPI.theme;\n\n /**\n * Cor fundamental do design system sem profundidade.\n * Ex.: primary (padrão)\n */\n @Prop() color: string = 'primary';\n /**\n * Define o estado do badge como desabilitado ou habilitado.\n */\n @Prop({reflect: true}) disabled: boolean = false;\n /**\n * Define o estilo visual entre solid (default), outline ou transparent.\n */\n @Prop({reflect: true}) type: 'solid' | 'outline' | 'transparent' | string = 'solid';\n\n @State() styles = {};\n\n\n connectedCallback() {\n this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n this.styles['--neutral-medium'] = this.theme.colors.getColor('neutral-dark');;\n this.styles['--neutral-pale'] = this.theme.colors.getColor('neutral-pale');;\n this.setColors();\n }\n\n setColors() {\n this.styles = {\n ...this.styles,\n '--color': this.theme.colors.getColor(`${this.color}`),\n '--color-dark': this.theme.colors.getColor(`${this.color}-dark`)\n }\n }\n\n getClasses() {\n const classes = {\n 'container': true,\n 'disabled': this.disabled\n };\n classes[`${this.type}`] = true;\n return classes;\n }\n\n render() {\n return (\n <Host>\n <div class={this.getClasses()} style={this.styles}></div>\n </Host>\n );\n }\n}\n"],"version":3}