@infineon/infineon-design-system-stencil 37.3.1--canary.1964.a13e9fd3d50207996530dec0a2bc440df10befa3.0 → 37.3.1--canary.1962.eae2ad927b3d70a4934c8c6a16c9f6e92d2a2fd4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (593) hide show
  1. package/dist/cjs/framework-detection-6001d22c.js +148 -0
  2. package/dist/cjs/framework-detection-6001d22c.js.map +1 -0
  3. package/dist/cjs/ifx-accordion_2.cjs.entry.js +3 -3
  4. package/dist/cjs/ifx-accordion_2.cjs.entry.js.map +1 -1
  5. package/dist/cjs/ifx-alert_2.cjs.entry.js +3 -1
  6. package/dist/cjs/ifx-alert_2.cjs.entry.js.map +1 -1
  7. package/dist/cjs/ifx-badge.cjs.entry.js +3 -3
  8. package/dist/cjs/ifx-badge.cjs.entry.js.map +1 -1
  9. package/dist/cjs/ifx-basic-table.cjs.entry.js +6 -6
  10. package/dist/cjs/ifx-basic-table.cjs.entry.js.map +1 -1
  11. package/dist/cjs/ifx-breadcrumb.cjs.entry.js +3 -5
  12. package/dist/cjs/ifx-breadcrumb.cjs.entry.js.map +1 -1
  13. package/dist/cjs/ifx-button.cjs.entry.js +4 -2
  14. package/dist/cjs/ifx-button.cjs.entry.js.map +1 -1
  15. package/dist/cjs/ifx-card.cjs.entry.js +6 -4
  16. package/dist/cjs/ifx-card.cjs.entry.js.map +1 -1
  17. package/dist/cjs/ifx-checkbox-group.cjs.entry.js +4 -2
  18. package/dist/cjs/ifx-checkbox-group.cjs.entry.js.map +1 -1
  19. package/dist/cjs/ifx-checkbox.cjs.entry.js +6 -4
  20. package/dist/cjs/ifx-checkbox.cjs.entry.js.map +1 -1
  21. package/dist/cjs/ifx-chip_3.cjs.entry.js +15 -13
  22. package/dist/cjs/ifx-chip_3.cjs.entry.js.map +1 -1
  23. package/dist/cjs/ifx-content-switcher.cjs.entry.js +4 -2
  24. package/dist/cjs/ifx-content-switcher.cjs.entry.js.map +1 -1
  25. package/dist/cjs/ifx-date-picker.cjs.entry.js +4 -6
  26. package/dist/cjs/ifx-date-picker.cjs.entry.js.map +1 -1
  27. package/dist/cjs/ifx-dropdown.cjs.entry.js +4 -2
  28. package/dist/cjs/ifx-dropdown.cjs.entry.js.map +1 -1
  29. package/dist/cjs/ifx-file-upload.cjs.entry.js +4 -6
  30. package/dist/cjs/ifx-file-upload.cjs.entry.js.map +1 -1
  31. package/dist/cjs/ifx-footer.cjs.entry.js +7 -5
  32. package/dist/cjs/ifx-footer.cjs.entry.js.map +1 -1
  33. package/dist/cjs/ifx-icon-button.cjs.entry.js +4 -2
  34. package/dist/cjs/ifx-icon-button.cjs.entry.js.map +1 -1
  35. package/dist/cjs/ifx-icon.cjs.entry.js +4 -2
  36. package/dist/cjs/ifx-icon.cjs.entry.js.map +1 -1
  37. package/dist/cjs/ifx-indicator.cjs.entry.js +5 -3
  38. package/dist/cjs/ifx-indicator.cjs.entry.js.map +1 -1
  39. package/dist/cjs/ifx-link.cjs.entry.js +3 -3
  40. package/dist/cjs/ifx-link.cjs.entry.js.map +1 -1
  41. package/dist/cjs/ifx-modal.cjs.entry.js +4 -6
  42. package/dist/cjs/ifx-modal.cjs.entry.js.map +1 -1
  43. package/dist/cjs/ifx-multiselect_2.cjs.entry.js +5 -5
  44. package/dist/cjs/ifx-multiselect_2.cjs.entry.js.map +1 -1
  45. package/dist/cjs/ifx-navbar.cjs.entry.js +3 -3
  46. package/dist/cjs/ifx-navbar.cjs.entry.js.map +1 -1
  47. package/dist/cjs/ifx-notification.cjs.entry.js +4 -4
  48. package/dist/cjs/ifx-notification.cjs.entry.js.map +1 -1
  49. package/dist/cjs/ifx-progress-bar.cjs.entry.js +5 -3
  50. package/dist/cjs/ifx-progress-bar.cjs.entry.js.map +1 -1
  51. package/dist/cjs/ifx-radio-button-group.cjs.entry.js +5 -3
  52. package/dist/cjs/ifx-radio-button-group.cjs.entry.js.map +1 -1
  53. package/dist/cjs/ifx-radio-button.cjs.entry.js +9 -7
  54. package/dist/cjs/ifx-radio-button.cjs.entry.js.map +1 -1
  55. package/dist/cjs/ifx-search-bar.cjs.entry.js +6 -4
  56. package/dist/cjs/ifx-search-bar.cjs.entry.js.map +1 -1
  57. package/dist/cjs/ifx-search-field.cjs.entry.js +3 -3
  58. package/dist/cjs/ifx-search-field.cjs.entry.js.map +1 -1
  59. package/dist/cjs/ifx-segmented-control.cjs.entry.js +5 -7
  60. package/dist/cjs/ifx-segmented-control.cjs.entry.js.map +1 -1
  61. package/dist/cjs/ifx-select.cjs.entry.js +5 -5
  62. package/dist/cjs/ifx-select.cjs.entry.js.map +1 -1
  63. package/dist/cjs/ifx-sidebar.cjs.entry.js +3 -3
  64. package/dist/cjs/ifx-sidebar.cjs.entry.js.map +1 -1
  65. package/dist/cjs/ifx-slider.cjs.entry.js +7 -7
  66. package/dist/cjs/ifx-slider.cjs.entry.js.map +1 -1
  67. package/dist/cjs/ifx-spinner_2.cjs.entry.js +11 -9
  68. package/dist/cjs/ifx-spinner_2.cjs.entry.js.map +1 -1
  69. package/dist/cjs/ifx-status.cjs.entry.js +3 -3
  70. package/dist/cjs/ifx-status.cjs.entry.js.map +1 -1
  71. package/dist/cjs/ifx-stepper.cjs.entry.js +5 -5
  72. package/dist/cjs/ifx-stepper.cjs.entry.js.map +1 -1
  73. package/dist/cjs/ifx-switch.cjs.entry.js +6 -6
  74. package/dist/cjs/ifx-switch.cjs.entry.js.map +1 -1
  75. package/dist/cjs/ifx-table.cjs.entry.js +7 -7
  76. package/dist/cjs/ifx-table.cjs.entry.js.map +1 -1
  77. package/dist/cjs/ifx-tabs.cjs.entry.js +5 -5
  78. package/dist/cjs/ifx-tabs.cjs.entry.js.map +1 -1
  79. package/dist/cjs/ifx-tag.cjs.entry.js +3 -3
  80. package/dist/cjs/ifx-tag.cjs.entry.js.map +1 -1
  81. package/dist/cjs/ifx-textarea.cjs.entry.js +5 -3
  82. package/dist/cjs/ifx-textarea.cjs.entry.js.map +1 -1
  83. package/dist/cjs/ifx-tooltip.cjs.entry.js +5 -5
  84. package/dist/cjs/ifx-tooltip.cjs.entry.js.map +1 -1
  85. package/dist/cjs/ifx-tree-view.cjs.entry.js +3 -3
  86. package/dist/cjs/ifx-tree-view.cjs.entry.js.map +1 -1
  87. package/dist/collection/components/accordion/accordion.js +2 -2
  88. package/dist/collection/components/accordion/accordion.js.map +1 -1
  89. package/dist/collection/components/alert/alert.js +2 -0
  90. package/dist/collection/components/alert/alert.js.map +1 -1
  91. package/dist/collection/components/badge/badge.js +2 -2
  92. package/dist/collection/components/badge/badge.js.map +1 -1
  93. package/dist/collection/components/breadcrumb/breadcrumb.js +2 -4
  94. package/dist/collection/components/breadcrumb/breadcrumb.js.map +1 -1
  95. package/dist/collection/components/button/button.js +3 -1
  96. package/dist/collection/components/button/button.js.map +1 -1
  97. package/dist/collection/components/card/card.js +5 -3
  98. package/dist/collection/components/card/card.js.map +1 -1
  99. package/dist/collection/components/checkbox/checkbox.js +5 -3
  100. package/dist/collection/components/checkbox/checkbox.js.map +1 -1
  101. package/dist/collection/components/checkbox-group/checkbox-group.js +3 -1
  102. package/dist/collection/components/checkbox-group/checkbox-group.js.map +1 -1
  103. package/dist/collection/components/chip/chip.js +10 -8
  104. package/dist/collection/components/chip/chip.js.map +1 -1
  105. package/dist/collection/components/content-switcher/content-switcher.js +3 -1
  106. package/dist/collection/components/content-switcher/content-switcher.js.map +1 -1
  107. package/dist/collection/components/date-picker/date-picker.js +3 -5
  108. package/dist/collection/components/date-picker/date-picker.js.map +1 -1
  109. package/dist/collection/components/dropdown/dropdown.js +3 -1
  110. package/dist/collection/components/dropdown/dropdown.js.map +1 -1
  111. package/dist/collection/components/file-upload/file-upload.js +3 -5
  112. package/dist/collection/components/file-upload/file-upload.js.map +1 -1
  113. package/dist/collection/components/footer/footer.js +6 -4
  114. package/dist/collection/components/footer/footer.js.map +1 -1
  115. package/dist/collection/components/icon/infineonIconStencil.js +3 -1
  116. package/dist/collection/components/icon/infineonIconStencil.js.map +1 -1
  117. package/dist/collection/components/icon-button/icon-button.js +3 -1
  118. package/dist/collection/components/icon-button/icon-button.js.map +1 -1
  119. package/dist/collection/components/indicator/indicator.js +4 -2
  120. package/dist/collection/components/indicator/indicator.js.map +1 -1
  121. package/dist/collection/components/link/link.js +2 -2
  122. package/dist/collection/components/link/link.js.map +1 -1
  123. package/dist/collection/components/modal/modal.js +3 -5
  124. package/dist/collection/components/modal/modal.js.map +1 -1
  125. package/dist/collection/components/navigation/navbar/navbar.js +2 -2
  126. package/dist/collection/components/navigation/navbar/navbar.js.map +1 -1
  127. package/dist/collection/components/navigation/sidebar/sidebar.js +2 -2
  128. package/dist/collection/components/navigation/sidebar/sidebar.js.map +1 -1
  129. package/dist/collection/components/notification/notification.js +3 -3
  130. package/dist/collection/components/notification/notification.js.map +1 -1
  131. package/dist/collection/components/pagination/pagination.js +4 -4
  132. package/dist/collection/components/pagination/pagination.js.map +1 -1
  133. package/dist/collection/components/progress-bar/progress-bar.js +4 -2
  134. package/dist/collection/components/progress-bar/progress-bar.js.map +1 -1
  135. package/dist/collection/components/radio-button/radio-button.js +8 -6
  136. package/dist/collection/components/radio-button/radio-button.js.map +1 -1
  137. package/dist/collection/components/radio-button-group/radio-button-group.js +4 -2
  138. package/dist/collection/components/radio-button-group/radio-button-group.js.map +1 -1
  139. package/dist/collection/components/search-bar/search-bar.js +5 -3
  140. package/dist/collection/components/search-bar/search-bar.js.map +1 -1
  141. package/dist/collection/components/search-field/search-field.js +2 -2
  142. package/dist/collection/components/search-field/search-field.js.map +1 -1
  143. package/dist/collection/components/segmented-control/segmented-control.css +1 -3
  144. package/dist/collection/components/segmented-control/segmented-control.js +3 -5
  145. package/dist/collection/components/segmented-control/segmented-control.js.map +1 -1
  146. package/dist/collection/components/select/multi-select/multiselect.js +4 -4
  147. package/dist/collection/components/select/multi-select/multiselect.js.map +1 -1
  148. package/dist/collection/components/select/single-select/select.js +4 -4
  149. package/dist/collection/components/select/single-select/select.js.map +1 -1
  150. package/dist/collection/components/slider/slider.js +6 -6
  151. package/dist/collection/components/slider/slider.js.map +1 -1
  152. package/dist/collection/components/spinner/spinner.js +3 -3
  153. package/dist/collection/components/spinner/spinner.js.map +1 -1
  154. package/dist/collection/components/status/status.js +2 -2
  155. package/dist/collection/components/status/status.js.map +1 -1
  156. package/dist/collection/components/stepper/stepper.js +4 -4
  157. package/dist/collection/components/stepper/stepper.js.map +1 -1
  158. package/dist/collection/components/switch/switch.js +5 -5
  159. package/dist/collection/components/switch/switch.js.map +1 -1
  160. package/dist/collection/components/table-advanced-version/table.js +6 -6
  161. package/dist/collection/components/table-advanced-version/table.js.map +1 -1
  162. package/dist/collection/components/table-basic-version/table.js +5 -5
  163. package/dist/collection/components/table-basic-version/table.js.map +1 -1
  164. package/dist/collection/components/tabs/tabs.js +4 -4
  165. package/dist/collection/components/tabs/tabs.js.map +1 -1
  166. package/dist/collection/components/tag/tag.js +2 -2
  167. package/dist/collection/components/tag/tag.js.map +1 -1
  168. package/dist/collection/components/text-field/text-field.js +7 -5
  169. package/dist/collection/components/text-field/text-field.js.map +1 -1
  170. package/dist/collection/components/textarea/textarea.js +4 -2
  171. package/dist/collection/components/textarea/textarea.js.map +1 -1
  172. package/dist/collection/components/tooltip/tooltip.js +4 -4
  173. package/dist/collection/components/tooltip/tooltip.js.map +1 -1
  174. package/dist/collection/components/tree-view/tree-view.js +2 -2
  175. package/dist/collection/components/tree-view/tree-view.js.map +1 -1
  176. package/dist/collection/global/utils/framework-detection.js +71 -32
  177. package/dist/collection/global/utils/framework-detection.js.map +1 -1
  178. package/dist/collection/global/utils/tracking.js +19 -3
  179. package/dist/collection/global/utils/tracking.js.map +1 -1
  180. package/dist/components/ifx-accordion-item.js +1 -1
  181. package/dist/components/ifx-accordion.js +1 -1
  182. package/dist/components/ifx-alert.js +1 -1
  183. package/dist/components/ifx-badge.js +3 -3
  184. package/dist/components/ifx-badge.js.map +1 -1
  185. package/dist/components/ifx-basic-table.js +6 -6
  186. package/dist/components/ifx-basic-table.js.map +1 -1
  187. package/dist/components/ifx-breadcrumb-item-label.js +1 -1
  188. package/dist/components/ifx-breadcrumb.js +3 -5
  189. package/dist/components/ifx-breadcrumb.js.map +1 -1
  190. package/dist/components/ifx-button.js +1 -1
  191. package/dist/components/ifx-card.js +6 -4
  192. package/dist/components/ifx-card.js.map +1 -1
  193. package/dist/components/ifx-checkbox-group.js +5 -3
  194. package/dist/components/ifx-checkbox-group.js.map +1 -1
  195. package/dist/components/ifx-checkbox.js +1 -1
  196. package/dist/components/ifx-chip-item.js +1 -1
  197. package/dist/components/ifx-chip.js +1 -1
  198. package/dist/components/ifx-content-switcher.js +4 -2
  199. package/dist/components/ifx-content-switcher.js.map +1 -1
  200. package/dist/components/ifx-date-picker.js +5 -7
  201. package/dist/components/ifx-date-picker.js.map +1 -1
  202. package/dist/components/ifx-download.js +1 -1
  203. package/dist/components/ifx-dropdown-item.js +1 -1
  204. package/dist/components/ifx-dropdown-trigger-button.js +2 -2
  205. package/dist/components/ifx-dropdown.js +4 -2
  206. package/dist/components/ifx-dropdown.js.map +1 -1
  207. package/dist/components/ifx-faq.js +3 -3
  208. package/dist/components/ifx-file-upload.js +8 -10
  209. package/dist/components/ifx-file-upload.js.map +1 -1
  210. package/dist/components/ifx-filter-accordion.js +2 -2
  211. package/dist/components/ifx-filter-bar.js +2 -2
  212. package/dist/components/ifx-filter-search.js +2 -2
  213. package/dist/components/ifx-footer.js +7 -5
  214. package/dist/components/ifx-footer.js.map +1 -1
  215. package/dist/components/ifx-icon-button.js +1 -1
  216. package/dist/components/ifx-icon.js +1 -1
  217. package/dist/components/ifx-icons-preview.js +4 -4
  218. package/dist/components/ifx-indicator.js +1 -1
  219. package/dist/components/ifx-link.js +1 -1
  220. package/dist/components/ifx-list-entry.js +3 -3
  221. package/dist/components/ifx-list.js +2 -2
  222. package/dist/components/ifx-modal.js +6 -8
  223. package/dist/components/ifx-modal.js.map +1 -1
  224. package/dist/components/ifx-multiselect-option.js +1 -1
  225. package/dist/components/ifx-multiselect.js +1 -1
  226. package/dist/components/ifx-navbar-item.js +2 -2
  227. package/dist/components/ifx-navbar.js +4 -4
  228. package/dist/components/ifx-navbar.js.map +1 -1
  229. package/dist/components/ifx-notification.js +1 -1
  230. package/dist/components/ifx-overview-table.js +3 -3
  231. package/dist/components/ifx-pagination.js +1 -1
  232. package/dist/components/ifx-progress-bar.js +1 -1
  233. package/dist/components/ifx-radio-button-group.js +6 -4
  234. package/dist/components/ifx-radio-button-group.js.map +1 -1
  235. package/dist/components/ifx-radio-button.js +1 -1
  236. package/dist/components/ifx-search-bar.js +8 -6
  237. package/dist/components/ifx-search-bar.js.map +1 -1
  238. package/dist/components/ifx-search-field.js +1 -1
  239. package/dist/components/ifx-segment.js +1 -1
  240. package/dist/components/ifx-segmented-control.js +6 -8
  241. package/dist/components/ifx-segmented-control.js.map +1 -1
  242. package/dist/components/ifx-select.js +1 -1
  243. package/dist/components/ifx-set-filter.js +7 -7
  244. package/dist/components/ifx-sidebar-item.js +2 -2
  245. package/dist/components/ifx-sidebar.js +3 -3
  246. package/dist/components/ifx-sidebar.js.map +1 -1
  247. package/dist/components/ifx-slider.js +8 -8
  248. package/dist/components/ifx-slider.js.map +1 -1
  249. package/dist/components/ifx-spinner.js +1 -1
  250. package/dist/components/ifx-status.js +3 -3
  251. package/dist/components/ifx-status.js.map +1 -1
  252. package/dist/components/ifx-step.js +1 -1
  253. package/dist/components/ifx-stepper.js +5 -5
  254. package/dist/components/ifx-stepper.js.map +1 -1
  255. package/dist/components/ifx-switch.js +6 -6
  256. package/dist/components/ifx-switch.js.map +1 -1
  257. package/dist/components/ifx-table.js +16 -16
  258. package/dist/components/ifx-table.js.map +1 -1
  259. package/dist/components/ifx-tabs.js +6 -6
  260. package/dist/components/ifx-tabs.js.map +1 -1
  261. package/dist/components/ifx-tag.js +4 -4
  262. package/dist/components/ifx-tag.js.map +1 -1
  263. package/dist/components/ifx-template.js +1 -1
  264. package/dist/components/ifx-templates-ui.js +8 -8
  265. package/dist/components/ifx-text-field.js +1 -1
  266. package/dist/components/ifx-textarea.js +5 -3
  267. package/dist/components/ifx-textarea.js.map +1 -1
  268. package/dist/components/ifx-tooltip.js +6 -6
  269. package/dist/components/ifx-tooltip.js.map +1 -1
  270. package/dist/components/ifx-tree-view-item.js +2 -2
  271. package/dist/components/ifx-tree-view.js +3 -3
  272. package/dist/components/ifx-tree-view.js.map +1 -1
  273. package/dist/components/{p-01a2a671.js → p-02d51cb4.js} +10 -8
  274. package/dist/components/p-02d51cb4.js.map +1 -0
  275. package/dist/components/{p-bfd161fb.js → p-5e160859.js} +10 -8
  276. package/dist/components/p-5e160859.js.map +1 -0
  277. package/dist/components/{p-88385a57.js → p-6234a7c7.js} +6 -4
  278. package/dist/components/p-6234a7c7.js.map +1 -0
  279. package/dist/components/{p-72aae821.js → p-6cdb54a6.js} +8 -6
  280. package/dist/components/p-6cdb54a6.js.map +1 -0
  281. package/dist/components/{p-e7f270c1.js → p-7469727b.js} +5 -3
  282. package/dist/components/p-7469727b.js.map +1 -0
  283. package/dist/components/{p-307b57c7.js → p-75cf9c68.js} +7 -7
  284. package/dist/components/{p-307b57c7.js.map → p-75cf9c68.js.map} +1 -1
  285. package/dist/components/{p-150988ec.js → p-89bd3f13.js} +6 -6
  286. package/dist/components/{p-150988ec.js.map → p-89bd3f13.js.map} +1 -1
  287. package/dist/components/{p-8eaa55a1.js → p-8aab7989.js} +3 -3
  288. package/dist/components/{p-8eaa55a1.js.map → p-8aab7989.js.map} +1 -1
  289. package/dist/components/{p-862de1e8.js → p-9bacfb4f.js} +3 -3
  290. package/dist/components/{p-862de1e8.js.map → p-9bacfb4f.js.map} +1 -1
  291. package/dist/components/{p-4f6ab2e4.js → p-9dbcca51.js} +6 -4
  292. package/dist/components/p-9dbcca51.js.map +1 -0
  293. package/dist/components/{p-29a39b8c.js → p-a64baa6c.js} +4 -4
  294. package/dist/components/{p-29a39b8c.js.map → p-a64baa6c.js.map} +1 -1
  295. package/dist/components/{p-28bc54da.js → p-b72cf91c.js} +5 -3
  296. package/dist/components/p-b72cf91c.js.map +1 -0
  297. package/dist/components/{p-5084c36c.js → p-be4633dc.js} +5 -3
  298. package/dist/components/p-be4633dc.js.map +1 -0
  299. package/dist/components/{p-80bd74d1.js → p-bf46e92b.js} +4 -4
  300. package/dist/components/{p-80bd74d1.js.map → p-bf46e92b.js.map} +1 -1
  301. package/dist/components/{p-ed0f491c.js → p-d3d3eb63.js} +5 -5
  302. package/dist/components/{p-ed0f491c.js.map → p-d3d3eb63.js.map} +1 -1
  303. package/dist/components/{p-b8d74876.js → p-dc421a52.js} +14 -12
  304. package/dist/components/p-dc421a52.js.map +1 -0
  305. package/dist/components/{p-6ff767df.js → p-dc6975ec.js} +2 -2
  306. package/dist/components/{p-6ff767df.js.map → p-dc6975ec.js.map} +1 -1
  307. package/dist/components/{p-d202acba.js → p-de80aee8.js} +9 -9
  308. package/dist/components/{p-d202acba.js.map → p-de80aee8.js.map} +1 -1
  309. package/dist/components/{p-7531ab3a.js → p-e08b34d7.js} +9 -9
  310. package/dist/components/{p-7531ab3a.js.map → p-e08b34d7.js.map} +1 -1
  311. package/dist/components/{p-1f61ec38.js → p-ec4680b1.js} +7 -7
  312. package/dist/components/{p-1f61ec38.js.map → p-ec4680b1.js.map} +1 -1
  313. package/dist/components/{p-1256041d.js → p-f5f2b031.js} +5 -5
  314. package/dist/components/{p-1256041d.js.map → p-f5f2b031.js.map} +1 -1
  315. package/dist/components/{p-bb9b541f.js → p-f952879b.js} +6 -4
  316. package/dist/components/p-f952879b.js.map +1 -0
  317. package/dist/components/p-fd1c9465.js +145 -0
  318. package/dist/components/p-fd1c9465.js.map +1 -0
  319. package/dist/esm/framework-detection-22e0b561.js +145 -0
  320. package/dist/esm/framework-detection-22e0b561.js.map +1 -0
  321. package/dist/esm/ifx-accordion_2.entry.js +3 -3
  322. package/dist/esm/ifx-accordion_2.entry.js.map +1 -1
  323. package/dist/esm/ifx-alert_2.entry.js +3 -1
  324. package/dist/esm/ifx-alert_2.entry.js.map +1 -1
  325. package/dist/esm/ifx-badge.entry.js +3 -3
  326. package/dist/esm/ifx-badge.entry.js.map +1 -1
  327. package/dist/esm/ifx-basic-table.entry.js +6 -6
  328. package/dist/esm/ifx-basic-table.entry.js.map +1 -1
  329. package/dist/esm/ifx-breadcrumb.entry.js +3 -5
  330. package/dist/esm/ifx-breadcrumb.entry.js.map +1 -1
  331. package/dist/esm/ifx-button.entry.js +4 -2
  332. package/dist/esm/ifx-button.entry.js.map +1 -1
  333. package/dist/esm/ifx-card.entry.js +6 -4
  334. package/dist/esm/ifx-card.entry.js.map +1 -1
  335. package/dist/esm/ifx-checkbox-group.entry.js +4 -2
  336. package/dist/esm/ifx-checkbox-group.entry.js.map +1 -1
  337. package/dist/esm/ifx-checkbox.entry.js +6 -4
  338. package/dist/esm/ifx-checkbox.entry.js.map +1 -1
  339. package/dist/esm/ifx-chip_3.entry.js +15 -13
  340. package/dist/esm/ifx-chip_3.entry.js.map +1 -1
  341. package/dist/esm/ifx-content-switcher.entry.js +4 -2
  342. package/dist/esm/ifx-content-switcher.entry.js.map +1 -1
  343. package/dist/esm/ifx-date-picker.entry.js +4 -6
  344. package/dist/esm/ifx-date-picker.entry.js.map +1 -1
  345. package/dist/esm/ifx-dropdown.entry.js +4 -2
  346. package/dist/esm/ifx-dropdown.entry.js.map +1 -1
  347. package/dist/esm/ifx-file-upload.entry.js +4 -6
  348. package/dist/esm/ifx-file-upload.entry.js.map +1 -1
  349. package/dist/esm/ifx-footer.entry.js +7 -5
  350. package/dist/esm/ifx-footer.entry.js.map +1 -1
  351. package/dist/esm/ifx-icon-button.entry.js +4 -2
  352. package/dist/esm/ifx-icon-button.entry.js.map +1 -1
  353. package/dist/esm/ifx-icon.entry.js +4 -2
  354. package/dist/esm/ifx-icon.entry.js.map +1 -1
  355. package/dist/esm/ifx-indicator.entry.js +5 -3
  356. package/dist/esm/ifx-indicator.entry.js.map +1 -1
  357. package/dist/esm/ifx-link.entry.js +3 -3
  358. package/dist/esm/ifx-link.entry.js.map +1 -1
  359. package/dist/esm/ifx-modal.entry.js +4 -6
  360. package/dist/esm/ifx-modal.entry.js.map +1 -1
  361. package/dist/esm/ifx-multiselect_2.entry.js +5 -5
  362. package/dist/esm/ifx-multiselect_2.entry.js.map +1 -1
  363. package/dist/esm/ifx-navbar.entry.js +3 -3
  364. package/dist/esm/ifx-navbar.entry.js.map +1 -1
  365. package/dist/esm/ifx-notification.entry.js +4 -4
  366. package/dist/esm/ifx-notification.entry.js.map +1 -1
  367. package/dist/esm/ifx-progress-bar.entry.js +5 -3
  368. package/dist/esm/ifx-progress-bar.entry.js.map +1 -1
  369. package/dist/esm/ifx-radio-button-group.entry.js +5 -3
  370. package/dist/esm/ifx-radio-button-group.entry.js.map +1 -1
  371. package/dist/esm/ifx-radio-button.entry.js +9 -7
  372. package/dist/esm/ifx-radio-button.entry.js.map +1 -1
  373. package/dist/esm/ifx-search-bar.entry.js +6 -4
  374. package/dist/esm/ifx-search-bar.entry.js.map +1 -1
  375. package/dist/esm/ifx-search-field.entry.js +3 -3
  376. package/dist/esm/ifx-search-field.entry.js.map +1 -1
  377. package/dist/esm/ifx-segmented-control.entry.js +5 -7
  378. package/dist/esm/ifx-segmented-control.entry.js.map +1 -1
  379. package/dist/esm/ifx-select.entry.js +5 -5
  380. package/dist/esm/ifx-select.entry.js.map +1 -1
  381. package/dist/esm/ifx-sidebar.entry.js +3 -3
  382. package/dist/esm/ifx-sidebar.entry.js.map +1 -1
  383. package/dist/esm/ifx-slider.entry.js +7 -7
  384. package/dist/esm/ifx-slider.entry.js.map +1 -1
  385. package/dist/esm/ifx-spinner_2.entry.js +11 -9
  386. package/dist/esm/ifx-spinner_2.entry.js.map +1 -1
  387. package/dist/esm/ifx-status.entry.js +3 -3
  388. package/dist/esm/ifx-status.entry.js.map +1 -1
  389. package/dist/esm/ifx-stepper.entry.js +5 -5
  390. package/dist/esm/ifx-stepper.entry.js.map +1 -1
  391. package/dist/esm/ifx-switch.entry.js +6 -6
  392. package/dist/esm/ifx-switch.entry.js.map +1 -1
  393. package/dist/esm/ifx-table.entry.js +7 -7
  394. package/dist/esm/ifx-table.entry.js.map +1 -1
  395. package/dist/esm/ifx-tabs.entry.js +5 -5
  396. package/dist/esm/ifx-tabs.entry.js.map +1 -1
  397. package/dist/esm/ifx-tag.entry.js +3 -3
  398. package/dist/esm/ifx-tag.entry.js.map +1 -1
  399. package/dist/esm/ifx-textarea.entry.js +5 -3
  400. package/dist/esm/ifx-textarea.entry.js.map +1 -1
  401. package/dist/esm/ifx-tooltip.entry.js +5 -5
  402. package/dist/esm/ifx-tooltip.entry.js.map +1 -1
  403. package/dist/esm/ifx-tree-view.entry.js +3 -3
  404. package/dist/esm/ifx-tree-view.entry.js.map +1 -1
  405. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
  406. package/dist/infineon-design-system-stencil/p-09e1f3fe.entry.js +2 -0
  407. package/dist/infineon-design-system-stencil/p-09e1f3fe.entry.js.map +1 -0
  408. package/dist/infineon-design-system-stencil/{p-5c2386f1.entry.js → p-0a54d1f2.entry.js} +3 -3
  409. package/dist/infineon-design-system-stencil/{p-5c2386f1.entry.js.map → p-0a54d1f2.entry.js.map} +1 -1
  410. package/dist/infineon-design-system-stencil/p-0e08a2b6.entry.js +2 -0
  411. package/dist/infineon-design-system-stencil/p-0e08a2b6.entry.js.map +1 -0
  412. package/dist/infineon-design-system-stencil/{p-0b4463ab.entry.js → p-0f138939.entry.js} +2 -2
  413. package/dist/infineon-design-system-stencil/p-0f138939.entry.js.map +1 -0
  414. package/dist/infineon-design-system-stencil/{p-77cbcda1.entry.js → p-108b7539.entry.js} +2 -2
  415. package/dist/infineon-design-system-stencil/{p-77cbcda1.entry.js.map → p-108b7539.entry.js.map} +1 -1
  416. package/dist/infineon-design-system-stencil/{p-0feebdea.entry.js → p-1774ffb5.entry.js} +2 -2
  417. package/dist/infineon-design-system-stencil/{p-0feebdea.entry.js.map → p-1774ffb5.entry.js.map} +1 -1
  418. package/dist/infineon-design-system-stencil/p-1e99d8fd.entry.js +2 -0
  419. package/dist/infineon-design-system-stencil/p-1e99d8fd.entry.js.map +1 -0
  420. package/dist/infineon-design-system-stencil/{p-bba99322.entry.js → p-20b96166.entry.js} +2 -2
  421. package/dist/infineon-design-system-stencil/p-20b96166.entry.js.map +1 -0
  422. package/dist/infineon-design-system-stencil/{p-ef7802f4.entry.js → p-25b7d4cc.entry.js} +2 -2
  423. package/dist/infineon-design-system-stencil/p-25b7d4cc.entry.js.map +1 -0
  424. package/dist/infineon-design-system-stencil/{p-7097e349.entry.js → p-3789de1f.entry.js} +2 -2
  425. package/dist/infineon-design-system-stencil/p-3789de1f.entry.js.map +1 -0
  426. package/dist/infineon-design-system-stencil/{p-bc216f6d.entry.js → p-463fadea.entry.js} +2 -2
  427. package/dist/infineon-design-system-stencil/{p-bc216f6d.entry.js.map → p-463fadea.entry.js.map} +1 -1
  428. package/dist/infineon-design-system-stencil/{p-ce0db9fb.entry.js → p-4760cdb4.entry.js} +2 -2
  429. package/dist/infineon-design-system-stencil/p-4760cdb4.entry.js.map +1 -0
  430. package/dist/infineon-design-system-stencil/{p-a1d02e8e.entry.js → p-486e255f.entry.js} +2 -2
  431. package/dist/infineon-design-system-stencil/p-486e255f.entry.js.map +1 -0
  432. package/dist/infineon-design-system-stencil/p-4fad6021.entry.js +2 -0
  433. package/dist/infineon-design-system-stencil/p-4fad6021.entry.js.map +1 -0
  434. package/dist/infineon-design-system-stencil/{p-51a70ef9.entry.js → p-53606792.entry.js} +2 -2
  435. package/dist/infineon-design-system-stencil/{p-51a70ef9.entry.js.map → p-53606792.entry.js.map} +1 -1
  436. package/dist/infineon-design-system-stencil/{p-8f3c079e.entry.js → p-56eee46c.entry.js} +2 -2
  437. package/dist/infineon-design-system-stencil/{p-8f3c079e.entry.js.map → p-56eee46c.entry.js.map} +1 -1
  438. package/dist/infineon-design-system-stencil/p-5cf56fa3.entry.js +2 -0
  439. package/dist/infineon-design-system-stencil/p-5cf56fa3.entry.js.map +1 -0
  440. package/dist/infineon-design-system-stencil/p-5d3e1733.entry.js +2 -0
  441. package/dist/infineon-design-system-stencil/p-5d3e1733.entry.js.map +1 -0
  442. package/dist/infineon-design-system-stencil/p-6479f069.entry.js +2 -0
  443. package/dist/infineon-design-system-stencil/p-6479f069.entry.js.map +1 -0
  444. package/dist/infineon-design-system-stencil/p-6b69db7d.entry.js +2 -0
  445. package/dist/infineon-design-system-stencil/p-6b69db7d.entry.js.map +1 -0
  446. package/dist/infineon-design-system-stencil/{p-9f4f024a.entry.js → p-77f8d47b.entry.js} +2 -2
  447. package/dist/infineon-design-system-stencil/p-77f8d47b.entry.js.map +1 -0
  448. package/dist/infineon-design-system-stencil/p-79817498.entry.js +2 -0
  449. package/dist/infineon-design-system-stencil/p-79817498.entry.js.map +1 -0
  450. package/dist/infineon-design-system-stencil/{p-47e35811.entry.js → p-80d1cc75.entry.js} +2 -2
  451. package/dist/infineon-design-system-stencil/p-80d1cc75.entry.js.map +1 -0
  452. package/dist/infineon-design-system-stencil/{p-507107be.entry.js → p-8a7a7589.entry.js} +2 -2
  453. package/dist/infineon-design-system-stencil/p-8a7a7589.entry.js.map +1 -0
  454. package/dist/infineon-design-system-stencil/{p-f47071d5.entry.js → p-98a2d242.entry.js} +2 -2
  455. package/dist/infineon-design-system-stencil/p-98a2d242.entry.js.map +1 -0
  456. package/dist/infineon-design-system-stencil/{p-c3acb336.entry.js → p-9d632192.entry.js} +2 -2
  457. package/dist/infineon-design-system-stencil/p-9d632192.entry.js.map +1 -0
  458. package/dist/infineon-design-system-stencil/p-abd24e4b.entry.js +2 -0
  459. package/dist/infineon-design-system-stencil/p-abd24e4b.entry.js.map +1 -0
  460. package/dist/infineon-design-system-stencil/p-af4c976b.entry.js +2 -0
  461. package/dist/infineon-design-system-stencil/p-af4c976b.entry.js.map +1 -0
  462. package/dist/infineon-design-system-stencil/{p-5976c2b0.entry.js → p-aff230fd.entry.js} +2 -2
  463. package/dist/infineon-design-system-stencil/p-aff230fd.entry.js.map +1 -0
  464. package/dist/infineon-design-system-stencil/{p-2a4642d0.entry.js → p-b8827e47.entry.js} +2 -2
  465. package/dist/infineon-design-system-stencil/p-b8827e47.entry.js.map +1 -0
  466. package/dist/infineon-design-system-stencil/p-bb0c5ad8.entry.js +2 -0
  467. package/dist/infineon-design-system-stencil/p-bb0c5ad8.entry.js.map +1 -0
  468. package/dist/infineon-design-system-stencil/p-bd3dcb26.entry.js +2 -0
  469. package/dist/infineon-design-system-stencil/p-bd3dcb26.entry.js.map +1 -0
  470. package/dist/infineon-design-system-stencil/{p-431d50b8.entry.js → p-c66630eb.entry.js} +2 -2
  471. package/dist/infineon-design-system-stencil/p-c66630eb.entry.js.map +1 -0
  472. package/dist/infineon-design-system-stencil/{p-44a61708.entry.js → p-c68bbcca.entry.js} +2 -2
  473. package/dist/infineon-design-system-stencil/{p-44a61708.entry.js.map → p-c68bbcca.entry.js.map} +1 -1
  474. package/dist/infineon-design-system-stencil/p-c85b8c84.entry.js +2 -0
  475. package/dist/infineon-design-system-stencil/p-c85b8c84.entry.js.map +1 -0
  476. package/dist/infineon-design-system-stencil/{p-13ae34b7.entry.js → p-cbd77b81.entry.js} +2 -2
  477. package/dist/infineon-design-system-stencil/p-cbd77b81.entry.js.map +1 -0
  478. package/dist/infineon-design-system-stencil/{p-b51937f3.entry.js → p-ccce2af4.entry.js} +2 -2
  479. package/dist/infineon-design-system-stencil/{p-b51937f3.entry.js.map → p-ccce2af4.entry.js.map} +1 -1
  480. package/dist/infineon-design-system-stencil/{p-29f36497.entry.js → p-d0a6141c.entry.js} +2 -2
  481. package/dist/infineon-design-system-stencil/p-d0a6141c.entry.js.map +1 -0
  482. package/dist/infineon-design-system-stencil/p-e00c10f7.entry.js +2 -0
  483. package/dist/infineon-design-system-stencil/p-e00c10f7.entry.js.map +1 -0
  484. package/dist/infineon-design-system-stencil/p-e1dc0eb6.entry.js +2 -0
  485. package/dist/infineon-design-system-stencil/p-e1dc0eb6.entry.js.map +1 -0
  486. package/dist/infineon-design-system-stencil/p-e35c77d9.entry.js +2 -0
  487. package/dist/infineon-design-system-stencil/p-e35c77d9.entry.js.map +1 -0
  488. package/dist/infineon-design-system-stencil/{p-5f433868.entry.js → p-e99d8905.entry.js} +2 -2
  489. package/dist/infineon-design-system-stencil/p-e99d8905.entry.js.map +1 -0
  490. package/dist/infineon-design-system-stencil/p-fd1c9465.js +2 -0
  491. package/dist/infineon-design-system-stencil/p-fd1c9465.js.map +1 -0
  492. package/dist/types/components/accordion/accordion.d.ts +1 -1
  493. package/dist/types/components/alert/alert.d.ts +1 -0
  494. package/dist/types/components/badge/badge.d.ts +1 -1
  495. package/dist/types/components/breadcrumb/breadcrumb.d.ts +0 -1
  496. package/dist/types/components/button/button.d.ts +1 -0
  497. package/dist/types/components/card/card.d.ts +1 -0
  498. package/dist/types/components/checkbox/checkbox.d.ts +1 -0
  499. package/dist/types/components/checkbox-group/checkbox-group.d.ts +1 -0
  500. package/dist/types/components/chip/chip.d.ts +1 -0
  501. package/dist/types/components/content-switcher/content-switcher.d.ts +1 -0
  502. package/dist/types/components/date-picker/date-picker.d.ts +0 -1
  503. package/dist/types/components/dropdown/dropdown.d.ts +1 -0
  504. package/dist/types/components/file-upload/file-upload.d.ts +0 -1
  505. package/dist/types/components/footer/footer.d.ts +1 -0
  506. package/dist/types/components/icon/infineonIconStencil.d.ts +1 -0
  507. package/dist/types/components/icon-button/icon-button.d.ts +1 -0
  508. package/dist/types/components/indicator/indicator.d.ts +1 -0
  509. package/dist/types/components/link/link.d.ts +1 -1
  510. package/dist/types/components/modal/modal.d.ts +0 -1
  511. package/dist/types/components/notification/notification.d.ts +1 -1
  512. package/dist/types/components/progress-bar/progress-bar.d.ts +1 -0
  513. package/dist/types/components/radio-button/radio-button.d.ts +1 -0
  514. package/dist/types/components/radio-button-group/radio-button-group.d.ts +1 -0
  515. package/dist/types/components/search-bar/search-bar.d.ts +1 -0
  516. package/dist/types/components/search-field/search-field.d.ts +1 -1
  517. package/dist/types/components/segmented-control/segmented-control.d.ts +0 -1
  518. package/dist/types/components/spinner/spinner.d.ts +1 -1
  519. package/dist/types/components/status/status.d.ts +1 -1
  520. package/dist/types/components/tag/tag.d.ts +1 -1
  521. package/dist/types/components/text-field/text-field.d.ts +1 -0
  522. package/dist/types/components/textarea/textarea.d.ts +1 -0
  523. package/dist/types/components/tree-view/tree-view.d.ts +1 -1
  524. package/package.json +1 -1
  525. package/dist/cjs/framework-detection-78986016.js +0 -93
  526. package/dist/cjs/framework-detection-78986016.js.map +0 -1
  527. package/dist/components/p-01a2a671.js.map +0 -1
  528. package/dist/components/p-28bc54da.js.map +0 -1
  529. package/dist/components/p-4f6ab2e4.js.map +0 -1
  530. package/dist/components/p-5084c36c.js.map +0 -1
  531. package/dist/components/p-72aae821.js.map +0 -1
  532. package/dist/components/p-88385a57.js.map +0 -1
  533. package/dist/components/p-b8d74876.js.map +0 -1
  534. package/dist/components/p-bb9b541f.js.map +0 -1
  535. package/dist/components/p-bfd161fb.js.map +0 -1
  536. package/dist/components/p-e7f270c1.js.map +0 -1
  537. package/dist/components/p-e8504e6b.js +0 -90
  538. package/dist/components/p-e8504e6b.js.map +0 -1
  539. package/dist/esm/framework-detection-198a17af.js +0 -90
  540. package/dist/esm/framework-detection-198a17af.js.map +0 -1
  541. package/dist/infineon-design-system-stencil/p-0b4463ab.entry.js.map +0 -1
  542. package/dist/infineon-design-system-stencil/p-13ae34b7.entry.js.map +0 -1
  543. package/dist/infineon-design-system-stencil/p-218c8275.entry.js +0 -2
  544. package/dist/infineon-design-system-stencil/p-218c8275.entry.js.map +0 -1
  545. package/dist/infineon-design-system-stencil/p-24fa4b84.entry.js +0 -2
  546. package/dist/infineon-design-system-stencil/p-24fa4b84.entry.js.map +0 -1
  547. package/dist/infineon-design-system-stencil/p-29f36497.entry.js.map +0 -1
  548. package/dist/infineon-design-system-stencil/p-2a4642d0.entry.js.map +0 -1
  549. package/dist/infineon-design-system-stencil/p-2b6fa7ea.entry.js +0 -2
  550. package/dist/infineon-design-system-stencil/p-2b6fa7ea.entry.js.map +0 -1
  551. package/dist/infineon-design-system-stencil/p-40be6362.entry.js +0 -2
  552. package/dist/infineon-design-system-stencil/p-40be6362.entry.js.map +0 -1
  553. package/dist/infineon-design-system-stencil/p-431d50b8.entry.js.map +0 -1
  554. package/dist/infineon-design-system-stencil/p-47e35811.entry.js.map +0 -1
  555. package/dist/infineon-design-system-stencil/p-486f1f73.entry.js +0 -2
  556. package/dist/infineon-design-system-stencil/p-486f1f73.entry.js.map +0 -1
  557. package/dist/infineon-design-system-stencil/p-507107be.entry.js.map +0 -1
  558. package/dist/infineon-design-system-stencil/p-5976c2b0.entry.js.map +0 -1
  559. package/dist/infineon-design-system-stencil/p-5f433868.entry.js.map +0 -1
  560. package/dist/infineon-design-system-stencil/p-6417bc5b.entry.js +0 -2
  561. package/dist/infineon-design-system-stencil/p-6417bc5b.entry.js.map +0 -1
  562. package/dist/infineon-design-system-stencil/p-7097e349.entry.js.map +0 -1
  563. package/dist/infineon-design-system-stencil/p-74190965.entry.js +0 -2
  564. package/dist/infineon-design-system-stencil/p-74190965.entry.js.map +0 -1
  565. package/dist/infineon-design-system-stencil/p-754c7267.entry.js +0 -2
  566. package/dist/infineon-design-system-stencil/p-754c7267.entry.js.map +0 -1
  567. package/dist/infineon-design-system-stencil/p-7f9e8260.entry.js +0 -2
  568. package/dist/infineon-design-system-stencil/p-7f9e8260.entry.js.map +0 -1
  569. package/dist/infineon-design-system-stencil/p-816d8d89.entry.js +0 -2
  570. package/dist/infineon-design-system-stencil/p-816d8d89.entry.js.map +0 -1
  571. package/dist/infineon-design-system-stencil/p-97c37974.entry.js +0 -2
  572. package/dist/infineon-design-system-stencil/p-97c37974.entry.js.map +0 -1
  573. package/dist/infineon-design-system-stencil/p-9e9f166d.entry.js +0 -2
  574. package/dist/infineon-design-system-stencil/p-9e9f166d.entry.js.map +0 -1
  575. package/dist/infineon-design-system-stencil/p-9f4f024a.entry.js.map +0 -1
  576. package/dist/infineon-design-system-stencil/p-a1d02e8e.entry.js.map +0 -1
  577. package/dist/infineon-design-system-stencil/p-b1f276a9.entry.js +0 -2
  578. package/dist/infineon-design-system-stencil/p-b1f276a9.entry.js.map +0 -1
  579. package/dist/infineon-design-system-stencil/p-b7c74d53.entry.js +0 -2
  580. package/dist/infineon-design-system-stencil/p-b7c74d53.entry.js.map +0 -1
  581. package/dist/infineon-design-system-stencil/p-bb8d7729.entry.js +0 -2
  582. package/dist/infineon-design-system-stencil/p-bb8d7729.entry.js.map +0 -1
  583. package/dist/infineon-design-system-stencil/p-bba99322.entry.js.map +0 -1
  584. package/dist/infineon-design-system-stencil/p-c3acb336.entry.js.map +0 -1
  585. package/dist/infineon-design-system-stencil/p-ce0db9fb.entry.js.map +0 -1
  586. package/dist/infineon-design-system-stencil/p-d448d22c.entry.js +0 -2
  587. package/dist/infineon-design-system-stencil/p-d448d22c.entry.js.map +0 -1
  588. package/dist/infineon-design-system-stencil/p-d70c221a.entry.js +0 -2
  589. package/dist/infineon-design-system-stencil/p-d70c221a.entry.js.map +0 -1
  590. package/dist/infineon-design-system-stencil/p-e8504e6b.js +0 -2
  591. package/dist/infineon-design-system-stencil/p-e8504e6b.js.map +0 -1
  592. package/dist/infineon-design-system-stencil/p-ef7802f4.entry.js.map +0 -1
  593. package/dist/infineon-design-system-stencil/p-f47071d5.entry.js.map +0 -1
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
2
- import { d as detectFramework, t as trackComponent } from './p-e8504e6b.js';
2
+ import { d as detectFramework, t as trackComponent } from './p-fd1c9465.js';
3
3
  import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
4
4
 
5
5
  const radioButtonCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex;--_ifx-fallback-display:none !important}._ifx-radiobutton-fallback{display:var(--_ifx-fallback-display);position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.error::after{border-color:#CD002F;background-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}";
@@ -19,10 +19,6 @@ const RadioButton = /*@__PURE__*/ proxyCustomElement(class RadioButton extends H
19
19
  this.hasSlot = false;
20
20
  }
21
21
  componentWillLoad() {
22
- if (!isNestedInIfxComponent(this.el)) {
23
- const framework = detectFramework();
24
- trackComponent('ifx-radio-button', framework);
25
- }
26
22
  // Fallback for form association
27
23
  this.fallbackInput = document.createElement('input');
28
24
  this.fallbackInput.type = 'radio';
@@ -52,6 +48,12 @@ const RadioButton = /*@__PURE__*/ proxyCustomElement(class RadioButton extends H
52
48
  this.internalChecked = this.checked || false;
53
49
  this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';
54
50
  }
51
+ componentDidLoad() {
52
+ if (!isNestedInIfxComponent(this.el)) {
53
+ const framework = detectFramework();
54
+ trackComponent('ifx-radio-button', framework);
55
+ }
56
+ }
55
57
  handleCheckedChange(newValue) {
56
58
  this.internalChecked = newValue;
57
59
  }
@@ -102,10 +104,10 @@ const RadioButton = /*@__PURE__*/ proxyCustomElement(class RadioButton extends H
102
104
  }
103
105
  }
104
106
  render() {
105
- return (h("div", { key: 'fd24cefee24acfa95408fa678c392f8ffe2e8d31', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: (e) => this.handleRadioButtonClick(e), tabindex: this.disabled ? -1 : 0 }, h("div", { key: 'b772b58995ba09ee27c452156b999d3f38d16308', class: `radioButton__wrapper
107
+ return (h("div", { key: '6820a31dcfcdee4ae332fcc67b31b99c09d0d95e', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: (e) => this.handleRadioButtonClick(e), tabindex: this.disabled ? -1 : 0 }, h("div", { key: 'ff8f081ab3cf365f5d193198c4cf4b59687bc4e1', class: `radioButton__wrapper
106
108
  ${this.internalChecked ? 'checked' : ''}
107
109
  ${this.disabled ? 'disabled' : ''}
108
- ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: 'b61958654a910ee90f030948c8771c50f287a62a', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: 'ced2361cf68a493412cc867294d25823269d1426', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'd99922c668e8ec29e81824c486988c18ae294fee' }))), h("input", { key: '9f2defbbf33ad4a4a71497426332d91ae0d90cf9', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
110
+ ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: 'b78654a5a798ab13045ec4e8028c88ac2156be33', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '823e4beb13c85adf100abd9d1cef54469609a404', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '7792803c43ace6002f603dc410a731d78cdd6cfa' }))), h("input", { key: '514758f188c0c243c22d825e1ed9333344eb615a', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
109
111
  }
110
112
  static get formAssociated() { return true; }
111
113
  get el() { return this; }
@@ -145,4 +147,4 @@ function defineCustomElement() {
145
147
 
146
148
  export { RadioButton as R, defineCustomElement as d };
147
149
 
148
- //# sourceMappingURL=p-bfd161fb.js.map
150
+ //# sourceMappingURL=p-5e160859.js.map
@@ -0,0 +1 @@
1
+ {"file":"p-5e160859.js","mappings":"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","names":["HTMLElement"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n --_ifx-fallback-display: none !important;\n}\n\n._ifx-radiobutton-fallback {\n display: var(--_ifx-fallback-display);\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0,0,0,0) !important;\n border: 0 !important;\n }\n\n.radioButton__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n cursor: pointer;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &.m .radioButton__wrapper {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n\n .radioButton__wrapper {\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n position: relative;\n display: block;\n border-radius: 50%;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid #575352;\n\n &:focus {\n outline: none;\n\n &::before {\n content: '';\n position: absolute;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 50%;\n }\n }\n\n .radioButton__wrapper-mark {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #0A8276;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n border-color: tokens.$ifxColorBaseTransparent;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n\n &.error {\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n &.checked {\n border-color: #0A8276;\n\n &::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n background-color: #0A8276;\n border-radius: 50%;\n }\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n\n &:hover {\n border-color: tokens.$ifxColorOcean600;\n\n & .radioButton__wrapper-mark {\n background-color: tokens.$ifxColorOcean600;\n }\n }\n\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border-color: #BFBBBB;\n\n &.disabled::after {\n background-color: #BFBBBB;\n }\n\n & .radioButton__wrapper-mark {\n background-color: #BFBBBB;\n }\n }\n &.error::after {\n border-color: #CD002F;\n background-color: #CD002F;\n }\n }\n\n &.error:not(.disabled) {\n border-color: #CD002F;\n\n &:hover,\n &:focus-visible {\n border-color: #CD002F;\n }\n }\n }\n\n .label {\n display: flex;\n align-items: center;\n height: tokens.$ifxSize250;\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.label-m {\n height: tokens.$ifxSize300;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &.disabled {\n color: #BFBBBB;\n }\n\n\n\n &:hover {\n cursor: pointer;\n }\n }\n}\n\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-radio-button',\n styleUrl: 'radio-button.scss',\n shadow: true,\n formAssociated: true\n})\nexport class RadioButton {\n @Element() el: HTMLElement;\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @Prop() error: boolean = false;\n @Prop({ reflect: true }) size: \"s\" | \"m\" = \"s\";\n @Prop({ reflect: true }) name: string;\n @Prop({ mutable: true }) checked: boolean;\n @State() internalChecked: boolean = false;\n @State() hasSlot: boolean = false;\n\n private inputElement: HTMLInputElement;\n private internals: ElementInternals;\n private fallbackInput: HTMLInputElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\n\n componentWillLoad() {\n // Fallback for form association\n this.fallbackInput = document.createElement('input');\n this.fallbackInput.type = 'radio';\n this.fallbackInput.hidden = true;\n this.fallbackInput.className = '_ifx-radiobutton-fallback';\n this.fallbackInput.style.cssText = `\n display: none !important;\n position: absolute !important;\n opacity: 0 !important;\n pointer-events: none !important;\n width: 0 !important;\n height: 0 !important;\n `;\n this.fallbackInput.setAttribute('aria-hidden', 'true');\n this.fallbackInput.tabIndex = -1;\n this.el.appendChild(this.fallbackInput);\n\n // Initialize ElementInternals if supported\n if ('attachInternals' in HTMLElement.prototype) {\n try {\n this.internals = this.el.attachInternals();\n } catch (e) {\n console.warn('ElementInternals not supported');\n }\n }\n\n // Initial state\n this.internalChecked = this.checked || false;\n this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';\n }\n\n componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-radio-button', framework)\n }\n }\n\n @Watch('checked')\n handleCheckedChange(newValue: boolean) {\n this.internalChecked = newValue;\n }\n\n @Watch('internalChecked')\n updateFormValue() {\n // Update both ElementInternals and fallback input\n if (this.internals?.setFormValue) {\n this.internals.setFormValue(this.internalChecked ? this.value : null);\n }\n this.fallbackInput.checked = this.internalChecked;\n this.fallbackInput.name = this.name;\n this.fallbackInput.value = this.value;\n this.fallbackInput.disabled = this.disabled;\n }\n\n @Watch('error')\n errorChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.ifxError.emit(newValue);\n }\n }\n\n handleRadioButtonClick(event: Event) {\n if (this.disabled) {\n event.stopPropagation();\n return;\n }\n\n this.inputElement.click();\n this.internalChecked = this.inputElement.checked;\n this.checked = this.internalChecked;\n this.ifxChange.emit(this.internalChecked);\n\n const changeEvent = new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { checked: this.internalChecked }\n });\n this.el.dispatchEvent(changeEvent);\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ([' ', 'Enter'].includes(ev.key)) {\n ev.preventDefault();\n this.handleRadioButtonClick(new PointerEvent('click'));\n }\n }\n\n @Listen('change', { target: 'document' })\n handleExternalChange(event: Event) {\n const target = event.target as HTMLElement;\n if (target === this.el || target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n \n if (target.getAttribute('name') === this.name) {\n this.internalChecked = false;\n }\n }\n\n render() {\n return (\n <div\n role=\"radio\"\n aria-checked={String(this.internalChecked)}\n aria-disabled={String(this.disabled)}\n class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n onClick={(e) => this.handleRadioButtonClick(e)}\n tabindex={this.disabled ? -1 : 0}\n >\n <div\n class={`radioButton__wrapper \n ${this.internalChecked ? 'checked' : ''} \n ${this.disabled ? 'disabled' : ''} \n ${this.error ? 'error' : ''}`}\n >\n {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n </div>\n\n {this.hasSlot && (\n <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n <slot />\n </div>\n )}\n\n <input\n type=\"radio\"\n hidden\n ref={el => this.inputElement = el}\n name={this.name}\n value={this.value}\n checked={this.internalChecked}\n disabled={this.disabled}\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n );\n }\n}"],"version":3}
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
2
- import { d as detectFramework, t as trackComponent } from './p-e8504e6b.js';
2
+ import { d as detectFramework, t as trackComponent } from './p-fd1c9465.js';
3
3
  import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
4
4
 
5
5
  const indicatorCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex}.indicator__container .dot__wrapper{display:flex;width:8px;height:8px;justify-content:center;align-items:center;flex-shrink:0;border-radius:50%;background-color:#0A8276}.indicator__container .number__container{height:16px;display:inline-flex;padding:0;min-width:16px;justify-content:center;align-items:center;border-radius:100px;background-color:#0A8276}.indicator__container .number__container .number__wrapper{padding:0 4px;color:#FFFFFF;text-align:center;font-size:0.875rem;font-style:normal;font-weight:600;line-height:16px}.indicator__container .number__container.inverted{background-color:#FFFFFF}.indicator__container .number__container.inverted .number__wrapper{color:#0A8276}";
@@ -19,6 +19,8 @@ const Indicator = /*@__PURE__*/ proxyCustomElement(class Indicator extends H {
19
19
  }
20
20
  componentWillLoad() {
21
21
  this.handleNumber();
22
+ }
23
+ componentDidLoad() {
22
24
  if (!isNestedInIfxComponent(this.el)) {
23
25
  const framework = detectFramework();
24
26
  trackComponent('ifx-indicator', framework);
@@ -28,8 +30,8 @@ const Indicator = /*@__PURE__*/ proxyCustomElement(class Indicator extends H {
28
30
  this.handleNumber();
29
31
  }
30
32
  render() {
31
- return (h("div", { key: 'ba1896b6c337c3aa31108c4177254eec3146166c', "aria-label": this.ariaLabel, class: 'indicator__container' }, this.variant === 'number' &&
32
- h("div", { key: '237541cb1dc4039587eea4fc62e98fb12d60cbbb', class: `number__container ${this.inverted ? 'inverted' : ""}` }, h("div", { key: '7cb63c9b7ac4cf81bb4f2584696a02c7615e3884', class: "number__wrapper" }, this.filteredNumber)), this.variant === 'dot' && h("div", { key: '7abfdc1a4a21f3d475baaf0c7d3d4f7546517303', class: "dot__wrapper" })));
33
+ return (h("div", { key: 'b84bdef7b1d306b5f80525441155a92d6df8f257', "aria-label": this.ariaLabel, class: 'indicator__container' }, this.variant === 'number' &&
34
+ h("div", { key: 'd7176eb85e4ad329e4a205524d1db171db5411b5', class: `number__container ${this.inverted ? 'inverted' : ""}` }, h("div", { key: '57d0058b768f16f552a5acc6afdb52c28f0276e9', class: "number__wrapper" }, this.filteredNumber)), this.variant === 'dot' && h("div", { key: '01e2ecae3feac842c2e635ddd4821bd10f796680', class: "dot__wrapper" })));
33
35
  }
34
36
  get el() { return this; }
35
37
  static get style() { return IfxIndicatorStyle0; }
@@ -56,4 +58,4 @@ function defineCustomElement() {
56
58
 
57
59
  export { Indicator as I, defineCustomElement as d };
58
60
 
59
- //# sourceMappingURL=p-88385a57.js.map
61
+ //# sourceMappingURL=p-6234a7c7.js.map
@@ -0,0 +1 @@
1
+ {"file":"p-6234a7c7.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,ywBAAywB,CAAC;AAC/xB,2BAAe,YAAY;;MCSd,SAAS;IALtB;;;;QAQU,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAW,QAAQ,CAAA;QAC1B,WAAM,GAAW,CAAC,CAAC;KAkC5B;IAhCC,YAAY;QACV,IAAI,CAAC,cAAc,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;KACrF;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,EAAE,CAAA;KACpB;IAED,gBAAgB;QACd,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,eAAe,EAAE,SAAS,CAAC,CAAA;SAC3C;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,YAAY,EAAE,CAAA;KACpB;IAED,MAAM;QACJ,QACE,0EAAiB,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,sBAAsB,IAC3D,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1B,4DAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAC/D,4DAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,cAAc,CAChB,CACH,EACL,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,4DAAK,KAAK,EAAC,cAAc,GAAO,CACtD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/indicator/indicator.scss?tag=ifx-indicator&encapsulation=shadow","src/components/indicator/indicator.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.indicator__container { \n & .dot__wrapper { \n display: flex;\n width: 8px;\n height: 8px;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n border-radius: 50%;\n background-color: tokens.$ifxColorOcean500;\n }\n\n & .number__container {\n height: 16px;\n display: inline-flex;\n padding: 0; \n min-width: 16px; \n justify-content: center;\n align-items: center;\n border-radius: 100px;\n background-color: tokens.$ifxColorOcean500;\n\n & .number__wrapper {\n padding: 0 4px;\n color: tokens.$ifxColorBaseWhite;\n text-align: center;\n font-size: tokens.$ifxFontSizeS;\n font-style: normal;\n font-weight: tokens.$ifxFontWeightSemibold;\n line-height: 16px;\n }\n\n &.inverted {\n background-color: tokens.$ifxColorBaseWhite;\n\n & .number__wrapper {\n color: tokens.$ifxColorOcean500;\n }\n }\n }\n}\n\n\n","import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-indicator',\n styleUrl: 'indicator.scss',\n shadow: true\n})\nexport class Indicator {\n @Element() el;\n @State() filteredNumber: string | number;\n @Prop() inverted: boolean = false;\n @Prop() ariaLabel: string | null;\n @Prop() variant: string = 'number'\n @Prop() number: number = 0;\n\n handleNumber() {\n this.filteredNumber = !isNaN(this.number) && this.number > 99 ? '99+' : this.number;\n }\n\n componentWillLoad() { \n this.handleNumber()\n }\n\n componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-indicator', framework)\n }\n }\n\n componentWillUpdate() {\n this.handleNumber()\n }\n\n render() {\n return (\n <div aria-label={this.ariaLabel} class='indicator__container'>\n {this.variant === 'number' && \n <div class={`number__container ${this.inverted ? 'inverted' : \"\"}`}>\n <div class=\"number__wrapper\">\n {this.filteredNumber}\n </div> \n </div>}\n {this.variant === 'dot' && <div class=\"dot__wrapper\"></div>}\n </div>\n );\n }\n}"],"version":3}
@@ -1,7 +1,7 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
2
- import { d as detectFramework, t as trackComponent } from './p-e8504e6b.js';
2
+ import { d as detectFramework, t as trackComponent } from './p-fd1c9465.js';
3
3
  import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
4
- import { d as defineCustomElement$1 } from './p-28bc54da.js';
4
+ import { d as defineCustomElement$1 } from './p-b72cf91c.js';
5
5
 
6
6
  const checkboxCss = ":host{display:inline-flex;vertical-align:top}.checkbox__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:top;padding:0px;gap:8px;font-family:\"Source Sans 3\";vertical-align:bottom}.checkbox__container .checkbox__wrapper{box-sizing:border-box;display:flex;position:relative;justify-content:center;align-items:center;width:20px;height:20px;background-color:#FFFFFF;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0;align-self:flex-start}.checkbox__container .checkbox__wrapper.checkbox-m{height:24px;width:24px}.checkbox__container .checkbox__wrapper.error{border-color:#CD002F}.checkbox__container .checkbox__wrapper:focus-visible{border:1px solid #575352;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper:hover{background-color:#EEEDED;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate){background-color:#0A8276;border-radius:1px;border-color:transparent;flex:none;order:0;flex-grow:0;color:#FFFFFF}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).error{background-color:#CD002F}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate):focus-visible{border:1px solid transparent;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate):hover{background-color:#08665C;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).disabled{background:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.indeterminate:before{content:\"\";display:block;width:70%;height:2px;background-color:#08665C;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox__container .label{font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;max-width:100%}.checkbox__container .label.label-m{font-size:1rem;line-height:1.5rem}.checkbox__container .label.disabled{color:#BFBBBB}.checkbox__container .checkbox__wrapper:hover,.checkbox__container .label:hover{cursor:pointer}";
7
7
  const IfxCheckboxStyle0 = checkboxCss;
@@ -72,6 +72,8 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends H {
72
72
  componentWillLoad() {
73
73
  this.internalChecked = this.checked;
74
74
  this.internalIndeterminate = this.indeterminate;
75
+ }
76
+ componentDidLoad() {
75
77
  if (!isNestedInIfxComponent(this.el)) {
76
78
  const framework = detectFramework();
77
79
  trackComponent('ifx-checkbox', framework);
@@ -108,12 +110,12 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends H {
108
110
  if (slot) {
109
111
  hasSlot = true;
110
112
  }
111
- return (h("div", { key: 'a6bba5f328719a82320f18bbc958c5daa362149d', class: "checkbox__container" }, h("input", { key: '0c1929fabffda01177fc247f275071e3fe68adc5', type: "checkbox", hidden: true, ref: (el) => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleCheckbox.bind(this), id: 'checkbox', value: `${this.value}`, disabled: this.disabled ? true : undefined }), h("div", { key: '98fd3919902c25fe01debf2206f9594c2e4d2841', tabindex: "0", onClick: this.handleCheckbox.bind(this), onKeyDown: this.handleKeydown.bind(this), role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.internalChecked.toString(), "aria-disabled": this.disabled, "aria-labelledby": "label", class: `checkbox__wrapper
113
+ return (h("div", { key: '82f30cd2fd3a158ca2b663d605e72446438d52c7', class: "checkbox__container" }, h("input", { key: '1a7c8ded3704b165bf07bf3191a3947f6b9c5500', type: "checkbox", hidden: true, ref: (el) => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleCheckbox.bind(this), id: 'checkbox', value: `${this.value}`, disabled: this.disabled ? true : undefined }), h("div", { key: '8211694e956d379b06e69ed4911ed887d36ffa32', tabindex: "0", onClick: this.handleCheckbox.bind(this), onKeyDown: this.handleKeydown.bind(this), role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.internalChecked.toString(), "aria-disabled": this.disabled, "aria-labelledby": "label", class: `checkbox__wrapper
112
114
  ${this.getCheckedClassName()}
113
115
  ${this.size === "m" ? "checkbox-m" : ""}
114
116
  ${this.indeterminate ? 'indeterminate' : ""}
115
- ${this.disabled ? 'disabled' : ""}` }, this.internalChecked && !this.internalIndeterminate && h("ifx-icon", { key: 'b180fdd792e07ce24050c599a42aea123e12138d', icon: "check-16", "aria-hidden": "true" })), hasSlot &&
116
- h("div", { key: 'c14393edb7e4c24863637f0f35c760a9d2415465', id: "label", class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ""} `, onClick: this.handleCheckbox.bind(this) }, h("slot", { key: '631b6bfd057ed7101d2318815ef19eaa3f894015' }))));
117
+ ${this.disabled ? 'disabled' : ""}` }, this.internalChecked && !this.internalIndeterminate && h("ifx-icon", { key: '9ff292a8463d3fa2ce776e010c5469e7df1b53d2', icon: "check-16", "aria-hidden": "true" })), hasSlot &&
118
+ h("div", { key: '560ce872fe8e02b07c52104b0037592701b56515', id: "label", class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ""} `, onClick: this.handleCheckbox.bind(this) }, h("slot", { key: '90d689b0eb0d10d5907f514bca533a6485fc1b43' }))));
117
119
  }
118
120
  static get formAssociated() { return true; }
119
121
  get el() { return this; }
@@ -160,4 +162,4 @@ function defineCustomElement() {
160
162
 
161
163
  export { Checkbox as C, defineCustomElement as d };
162
164
 
163
- //# sourceMappingURL=p-72aae821.js.map
165
+ //# sourceMappingURL=p-6cdb54a6.js.map
@@ -0,0 +1 @@
1
+ {"file":"p-6cdb54a6.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,m1EAAm1E,CAAC;AACx2E,0BAAe,WAAW;;MCWb,QAAQ;IAPrB;;;;;;;QAWU,aAAQ,GAAY,KAAK,CAAC;QAC1B,YAAO,GAAY,KAAK,CAAC;QACzB,UAAK,GAAY,KAAK,CAAC;QACvB,SAAI,GAAW,GAAG,CAAC;QACnB,kBAAa,GAAY,KAAK,CAAC;KAkJxC;IAxIC,cAAc;QACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE;gBACpC,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;aAC9C;YACD,IAAI,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE;gBACvD,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;oBAC5B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBACzC;qBAAM;oBACL,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;iBAClC;aACF;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;aAClC;YACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAC3C;KACF;IAGD,MAAM,SAAS;QACb,OAAO,IAAI,CAAC,eAAe,CAAC;KAC7B;IAGD,MAAM,kBAAkB,CAAC,MAAe;QACtC,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC;KAC/B;IAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;QAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;YAChC,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;SAClD;KACF;IAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;QAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC9B;KACF;IAGD,oBAAoB,CAAC,QAAiB,EAAE,QAAiB;QACvD,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,IAAI,CAAC,qBAAqB,GAAG,QAAQ,CAAC;YACtC,IAAI,CAAC,YAAY,CAAC,aAAa,GAAG,IAAI,CAAC,qBAAqB,CAAC;SAC9D;KACF;IAED,aAAa,CAAC,KAAK;;QAEjB,IAAI,KAAK,CAAC,OAAO,KAAK,EAAE,IAAI,KAAK,CAAC,OAAO,KAAK,EAAE,EAAE;YAChD,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACpC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,aAAa,CAAC;KACjD;IAED,gBAAgB;QACd,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,cAAc,EAAE,SAAS,CAAC,CAAA;SAC1C;KACF;IAED,kBAAkB;QAChB,IAAI,CAAC,YAAY,CAAC,aAAa,GAAG,IAAI,CAAC,qBAAqB,CAAC;KAC9D;;;;;IAMD,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;KACnC;IAED,mBAAmB;QACjB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,IAAI,CAAC,eAAe,EAAE;gBACxB,OAAO,eAAe,CAAA;aACvB;iBAAM;gBACL,OAAO,OAAO,CAAA;aACf;SACF;aAAM,IAAI,IAAI,CAAC,eAAe,EAAE;YAC/B,OAAO,SAAS,CAAC;SAClB;;YAAM,OAAO,EAAE,CAAA;KACjB;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;QAC/B,IAAI,OAAO,GAAG,KAAK,CAAC;QACpB,IAAI,IAAI,EAAE;YACR,OAAO,GAAG,IAAI,CAAC;SAChB;QACD,QACE,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,8DACE,IAAI,EAAC,UAAU,EACf,MAAM,QACN,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EACxC,EAAE,EAAC,UAAU,EACb,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,SAAS,GAC1C,EACF,4DACE,QAAQ,EAAC,GAAG,EACZ,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EACvC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EACxC,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,aAAa,GAAG,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,mBAC7D,IAAI,CAAC,QAAQ,qBACZ,OAAO,EACvB,KAAK,EAAE;YACL,IAAI,CAAC,mBAAmB,EAAE;UAC5B,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,YAAY,GAAG,EAAE;UACrC,IAAI,CAAC,aAAa,GAAG,eAAe,GAAG,EAAE;UACzC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAEhC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,qBAAqB,IAAI,iEAAU,IAAI,EAAC,UAAU,iBAAa,MAAM,GAAY,CAC5G,EACL,OAAO;YACN,4DAAK,EAAE,EAAC,OAAO,EAAC,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,IAC/I,8DAAQ,CACJ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-flex;\n vertical-align: top;\n}\n\n.checkbox__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: top;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n font-family: tokens.$ifxFontFamilyBody;\n vertical-align: bottom;\n\n & .checkbox__wrapper {\n box-sizing: border-box;\n display: flex;\n position: relative; //needs to be added for the indeterminate state of the checkbox\n justify-content: center;\n align-items: center;\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid #575352;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n align-self: flex-start;\n\n &.checkbox-m {\n height: tokens.$ifxSize300;\n width: tokens.$ifxSize300;\n }\n\n &.error {\n border-color: #CD002F;\n }\n\n &:focus-visible {\n border: 1px solid #575352;\n outline: 2px solid #0A8276;\n outline-offset: 2px;\n }\n\n &:hover {\n background-color: #EEEDED;\n border: 1px solid #575352;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n &.checked:not(.indeterminate) {\n background-color: #0A8276;\n border-radius: tokens.$ifxBorderRadius12;\n border-color: tokens.$ifxColorBaseTransparent;\n flex: none;\n order: 0;\n flex-grow: 0;\n color: tokens.$ifxColorBaseWhite;\n\n &.error {\n background-color: #CD002F;\n }\n\n &:focus-visible {\n border: 1px solid transparent;\n outline: 2px solid #0A8276;\n outline-offset: 2px;\n }\n\n &:hover {\n background-color: #08665C;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n &.disabled {\n background: #BFBBBB;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n }\n\n &.indeterminate {\n &:before {\n content: \"\";\n display: block;\n width: 70%; // Adjust as needed for the width of the minus sign\n height: 2px; // Adjust for thickness of the minus sign\n background-color: #08665C; // Color of the minus sign\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n }\n\n }\n\n & .label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-all;\n max-width: 100%;\n\n &.label-m {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &.disabled {\n color: #BFBBBB;\n }\n }\n\n & .checkbox__wrapper,\n & .label {\n &:hover {\n cursor: pointer;\n }\n }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-checkbox',\n styleUrl: 'checkbox.scss',\n shadow: true,\n formAssociated: true\n})\n\nexport class Checkbox {\n private inputElement: HTMLInputElement;\n\n @Element() el;\n @Prop() disabled: boolean = false;\n @Prop() checked: boolean = false;\n @Prop() error: boolean = false;\n @Prop() size: string = 'm';\n @Prop() indeterminate: boolean = false;\n @Prop() value: string;\n @State() internalChecked: boolean;\n @State() internalIndeterminate: boolean;\n\n @AttachInternals() internals: ElementInternals;\n\n @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxError: EventEmitter;\n\n handleCheckbox() {\n if (!this.disabled) {\n if (!this.inputElement.indeterminate) {\n this.internalChecked = !this.internalChecked;\n } \n if (this.internalChecked && !this.internalIndeterminate) {\n if (this.value !== undefined) {\n this.internals.setFormValue(this.value);\n } else {\n this.internals.setFormValue(\"on\")\n }\n } else {\n this.internals.setFormValue(null)\n }\n this.ifxChange.emit(this.internalChecked);\n }\n }\n\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n\n @Method()\n async toggleCheckedState(newVal: boolean) {\n this.internalChecked = newVal;\n }\n\n @Watch('checked')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalChecked = newValue;\n this.inputElement.checked = this.internalChecked; // update the checkbox's checked property\n }\n }\n\n @Watch('error')\n errorChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.ifxError.emit(newValue);\n }\n }\n\n @Watch('indeterminate')\n indeterminateChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalIndeterminate = newValue;\n this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\n }\n }\n\n handleKeydown(event) {\n // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n if (event.keyCode === 32 || event.keyCode === 13) {\n this.handleCheckbox();\n event.preventDefault(); // prevent the default action when space or enter is pressed\n }\n }\n\n componentWillLoad() {\n this.internalChecked = this.checked;\n this.internalIndeterminate = this.indeterminate;\n }\n\n componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-checkbox', framework)\n }\n }\n\n componentDidRender() {\n this.inputElement.indeterminate = this.internalIndeterminate;\n }\n\n /**\n * Callback for form association.\n * Called whenever the form is reset.\n */\n formResetCallback() {\n this.internals.setFormValue(null);\n }\n\n getCheckedClassName() {\n if (this.error) {\n if (this.internalChecked) {\n return \"checked error\"\n } else {\n return \"error\"\n }\n } else if (this.internalChecked) {\n return \"checked\";\n } else return \"\"\n }\n\n render() {\n const slot = this.el.innerHTML;\n let hasSlot = false;\n if (slot) {\n hasSlot = true;\n }\n return (\n <div class=\"checkbox__container\">\n <input\n type=\"checkbox\"\n hidden\n ref={(el) => (this.inputElement = el)}\n checked={this.internalChecked}\n onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n id='checkbox'\n value={`${this.value}`}\n disabled={this.disabled ? true : undefined}\n />\n <div\n tabindex=\"0\"\n onClick={this.handleCheckbox.bind(this)}\n onKeyDown={this.handleKeydown.bind(this)}\n role=\"checkbox\"\n aria-checked={this.indeterminate ? 'mixed' : this.internalChecked.toString()}\n aria-disabled={this.disabled}\n aria-labelledby=\"label\"\n class={`checkbox__wrapper \n ${this.getCheckedClassName()}\n ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n ${this.indeterminate ? 'indeterminate' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n >\n {this.internalChecked && !this.internalIndeterminate && <ifx-icon icon=\"check-16\" aria-hidden=\"true\"></ifx-icon>}\n </div>\n {hasSlot &&\n <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n <slot />\n </div>}\n </div>\n );\n }\n}"],"version":3}
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, h, d as Host } from './p-f8e6a4ef.js';
2
- import { d as detectFramework, t as trackComponent } from './p-e8504e6b.js';
2
+ import { d as detectFramework, t as trackComponent } from './p-fd1c9465.js';
3
3
  import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
4
4
  import { c as classNames } from './p-5cdc6210.js';
5
5
 
@@ -74,6 +74,8 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends H {
74
74
  }
75
75
  componentWillLoad() {
76
76
  this.handleFormAndInternalHref();
77
+ }
78
+ componentDidLoad() {
77
79
  if (!isNestedInIfxComponent(this.el)) {
78
80
  const framework = detectFramework();
79
81
  trackComponent('ifx-button', framework);
@@ -106,7 +108,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends H {
106
108
  }
107
109
  }
108
110
  render() {
109
- return (h(Host, { key: '4f6edce27cacd5d9859790e028cabf756b65463b' }, h("a", { key: 'd3a7759dbd2ed5128c5919e187c70ee82abfc643', role: this.href ? 'link' : 'button', tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.internalHref : undefined, target: this.target, onClick: this.handleClick, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled ? 'true' : null, "aria-describedby": this.theme === 'danger' ? 'Dangerous action' : undefined, "aria-label": this.ariaLabel || undefined }, h("slot", { key: '54e7e801f580008fc48688446cf58b304c283067' }))));
111
+ return (h(Host, { key: 'f576e333ecb33a35bfe8418ecdc6fa0616380bd7' }, h("a", { key: '625ac29c56e789fcdf6b56d7bead8aba1b287afa', role: this.href ? 'link' : 'button', tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.internalHref : undefined, target: this.target, onClick: this.handleClick, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled ? 'true' : null, "aria-describedby": this.theme === 'danger' ? 'Dangerous action' : undefined, "aria-label": this.ariaLabel || undefined }, h("slot", { key: 'ff594217326742db7bc06b25a6f30c1a4b45be04' }))));
110
112
  }
111
113
  getVariantClass() {
112
114
  return `${this.variant}` === "secondary"
@@ -167,4 +169,4 @@ function defineCustomElement() {
167
169
 
168
170
  export { Button as B, defineCustomElement as d };
169
171
 
170
- //# sourceMappingURL=p-e7f270c1.js.map
172
+ //# sourceMappingURL=p-7469727b.js.map
@@ -0,0 +1 @@
1
+ {"file":"p-7469727b.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,uuLAAuuL,CAAC;AAC1vL,wBAAe,SAAS;;MCUX,MAAM;IALnB;;;;QAMU,YAAO,GAAyC,SAAS,CAAC;QAC1D,UAAK,GAAqC,SAAS,CAAC;QACpD,SAAI,GAAW,GAAG,CAAC;QACnB,aAAQ,GAAY,KAAK,CAAC;QAG1B,WAAM,GAAW,OAAO,CAAC;QACzB,SAAI,GAAkC,QAAQ,CAAC;QAC/C,cAAS,GAAY,KAAK,CAAC;QA4DnC,gBAAW,GAAG,CAAC,EAAS;YACtB,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE;gBACtB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;gBAC3C,IAAI,UAAU,EAAE;oBACd,EAAE,CAAC,cAAc,EAAE,CAAC;oBAEpB,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;;wBAEzB,IAAI,CAAC,iBAAiB,EAAE,CAAC;qBAC1B;yBAAM;wBACL,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;wBACpD,IAAI,IAAI,CAAC,IAAI,EAAE;4BACb,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;yBAC7B;wBACD,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;wBAClC,UAAU,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;wBACnC,UAAU,CAAC,KAAK,EAAE,CAAC;wBACnB,UAAU,CAAC,MAAM,EAAE,CAAC;qBACrB;iBACF;aACF;SACF,CAAA;KAoFF;IA7JC,eAAe,CAAC,QAAgB;QAC9B,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;KAC9B;IAGD,MAAM,QAAQ;QACZ,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;KAC/B;IAED,kBAAkB;QAChB,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACrD,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACnC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACzC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACxD;IAED,yBAAyB;QACvB,IAAI,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YAC3B,IAAI,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE;gBAChB,IAAI,CAAC,EAAE,CAAC,YAAY,GAAG,SAAS,CAAC;aAClC;YACD,IAAI,CAAC,kBAAkB,EAAE,CAAA;SAC1B;aAAM;YACL,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;SAC/B;KACF;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;SAC3C;aAAM;YACL,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;SAClD;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,yBAAyB,EAAE,CAAA;KACjC;IAED,gBAAgB;QACd,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,YAAY,EAAE,SAAS,CAAC,CAAA;SACxC;KACF;IAED,mBAAmB;QACjB,IAAI,CAAC,iBAAiB,EAAE,CAAA;KACzB;IA2BD,iBAAiB;QACf,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAC5C,MAAM,cAAc,GAAG,WAAW,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,CAAC;QACpF,cAAc,CAAC,OAAO,CAAC,OAAO;YAC5B,OAAO,CAAC,KAAK,EAAE,CAAC;SACjB,CAAC,CAAC;KACJ;IAGD,aAAa,CAAC,EAAiB;QAC7B,IAAK,EAAE,CAAC,GAAG,KAAK,GAAG,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC3D,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;SAC/B;KACF;IAGD,eAAe,CAAC,KAAY;QAC1B,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE;YAC1B,KAAK,CAAC,wBAAwB,EAAE,CAAC;SAClC;KACF;IAED,WAAW,CAAC,KAAiB;QAC3B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;SAC9B;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,0DACE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAChC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,EACzC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAC3B,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,GAAG,SAAS,EACpD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,GAAG,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,EACjE,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,mBAC5B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,sBAC1B,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,kBAAkB,GAAG,SAAS,gBAC9D,IAAI,CAAC,SAAS,IAAI,SAAS,IAEvC,8DAAa,CACX,CACC,EACP;KACH;IAGD,eAAe;QACb,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,WAAW;cACpC,aAAa,IAAI,CAAC,KAAK,EAAE;cACzB,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,UAAU;kBAC9B,YAAY,IAAI,CAAC,KAAK,EAAE;kBACxB,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;KACvB;IAED,YAAY;QACV,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI,EAAE;YAC3B,OAAO,IAAI,CAAA;SACZ;aACI,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,EAAE;YAC/B,OAAO,GAAG,CAAA;SACX;aACI,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,EAAE;YAC/B,OAAO,GAAG,CAAA;SACX;;YACI,OAAO,EAAE,CAAC;KAChB;IAED,aAAa;QACX,OAAO,UAAU,CACf,KAAK,EACL,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,YAAY,EAAE,EAAE,EACzC,OAAO,IAAI,CAAC,eAAe,EAAE,EAAE,EAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAChC,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n vertical-align: bottom;\n display: inline-flex;\n width: var(--bw, fit-content);\n}\n\n.btn {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: tokens.$ifxSize500;\n padding: 0px tokens.$ifxSpace200;\n gap: tokens.$ifxSpace100;\n color: tokens.$ifxColorBaseWhite;\n font-weight: tokens.$ifxFontWeightSemibold;\n border-radius: tokens.$ifxBorderRadius12;\n line-height: tokens.$ifxLineHeightM;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n font-style: normal;\n text-decoration: none;\n user-select: none;\n font-size: tokens.$ifxFontSizeM;\n transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n width: var(--bw, fit-content);\n}\n\n.btn:not(.disabled) {\n cursor: pointer;\n}\n\n.btn.disabled {\n pointer-events: none;\n}\n\n.btn-default {\n //default variant=primary; default color=default\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n.btn-secondary-default {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorOcean500;\n border: 1px solid tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-tertiary-default {\n background-color: tokens.$ifxColorBaseTransparent;\n color: tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n\n.btn-danger {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorRed500;\n border-color: tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n.btn-secondary-danger {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorRed500;\n border: 1px solid tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-tertiary-danger {\n //combination tertiary + danger not in design\n background-color: tokens.$ifxColorBaseTransparent;\n color: tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-inverse {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n opacity: tokens.$ifxOpacity100;\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorOcean500;\n pointer-events: none;\n }\n}\n\n.btn-secondary-inverse {\n color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n border: 1px solid tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n\n.btn-tertiary-inverse {\n color: tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorBaseWhite;\n opacity: tokens.$ifxOpacity100;\n pointer-events: none;\n\n }\n}\n\n.btn {\n & ifx-icon:empty {\n display: none;\n }\n\n &.btn-xs {\n font-size: tokens.$ifxFontSizeS;\n height: tokens.$ifxSize400;\n line-height: tokens.$ifxLineHeightXs;\n }\n\n &.btn-s {\n font-size: tokens.$ifxFontSizeS;\n height: tokens.$ifxSize450;\n line-height: tokens.$ifxLineHeightS;\n }\n\n // &.btn-m { //default\n // font-size: tokens.$ifxFontSizeM;\n // height: tokens.$ifxSize400;\n // line-height: tokens.$ifxLineHeightM;\n // }\n\n\n &.btn-l {\n font-size: tokens.$ifxFontSizeXl;\n height: tokens.$ifxSize600;\n line-height: tokens.$ifxLineHeightXl;\n }\n\n\n\n &.btn-default:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n background-color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n }\n }\n\n &.btn-secondary-default:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n }\n }\n\n &.btn-secondary:not(:disabled, .disabled) {\n\n &:hover {\n background-color: tokens.$ifxColorBerry500;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorBerry500;\n }\n }\n\n\n\n &.btn-danger:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n background-color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorRed700;\n }\n }\n\n &.btn-secondary-danger:not(:disabled, .disabled) {\n\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorRed700;\n }\n }\n\n\n &.btn-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n\n &.btn-secondary-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n\n\n\n &.btn-tertiary-default:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean600;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean700;\n }\n\n\n }\n\n\n\n\n\n &.btn-tertiary-danger:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorRed600;\n }\n\n &:hover {\n color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorRed700;\n }\n\n }\n\n\n &.btn-tertiary-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n color: tokens.$ifxColorEngineering200;\n\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorEngineering300;\n }\n }\n}","import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n tag: 'ifx-button',\n styleUrl: 'button.scss',\n shadow: true,\n})\nexport class Button {\n @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';\n @Prop() size: string = 'm';\n @Prop() disabled: boolean = false;\n @State() internalHref: string;\n @Prop() href: string;\n @Prop() target: string = '_self';\n @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n @Prop() fullWidth: boolean = false;\n @Prop() ariaLabel: string | null;\n @Element() el;\n\n private focusableElement: HTMLElement;\n private nativeButton: HTMLButtonElement | HTMLInputElement;\n\n @Watch('href')\n setInternalHref(newValue: string) {\n this.internalHref = newValue;\n }\n\n @Method()\n async setFocus() {\n this.focusableElement.focus();\n }\n\n insertNativeButton() {\n this.nativeButton = document.createElement('button');\n this.nativeButton.type = this.type;\n this.nativeButton.style.display = 'none';\n this.el.closest('form').appendChild(this.nativeButton);\n }\n\n handleFormAndInternalHref() {\n if (this.el.closest('form')) {\n if (this.el.href) {\n this.el.internalHref = undefined;\n }\n this.insertNativeButton()\n } else {\n this.internalHref = this.href;\n }\n }\n\n handleButtonWidth() {\n if (this.fullWidth) {\n this.el.style.setProperty('--bw', '100%');\n } else {\n this.el.style.setProperty('--bw', 'fit-content');\n }\n }\n\n componentWillLoad() {\n this.handleFormAndInternalHref()\n }\n\n componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-button', framework)\n }\n }\n\n componentWillRender() {\n this.handleButtonWidth()\n }\n\n\n\n handleClick = (ev: Event) => {\n if (this.el.shadowRoot) {\n const parentForm = this.el.closest('form');\n if (parentForm) {\n ev.preventDefault();\n\n if (this.type === 'reset') {\n // If the button type is 'reset', manually reset all custom form fields\n this.resetClickHandler(); //this will reset all ifx-text-fields within a form\n } else {\n const fakeButton = document.createElement('button');\n if (this.type) {\n fakeButton.type = this.type;\n }\n fakeButton.style.display = 'none';\n parentForm.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n }\n\n resetClickHandler() {\n const formElement = this.el.closest('form');\n const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\n customElements.forEach(element => {\n element.reset();\n });\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ( ev.key === \" \" || ev.key === 'Enter' && !this.disabled) {\n this.focusableElement.click();\n }\n }\n\n @Listen('click', { capture: true })\n handleHostClick(event: Event) {\n if (this.disabled === true) {\n event.stopImmediatePropagation();\n }\n }\n\n handleFocus(event: FocusEvent) {\n if (this.disabled) {\n event.preventDefault();\n this.focusableElement.blur();\n }\n }\n\n render() {\n return (\n <Host>\n <a\n role={this.href ? 'link' : 'button'}\n tabIndex={this.disabled ? -1 : 0}\n ref={(el) => (this.focusableElement = el)}\n class={this.getClassNames()}\n href={!this.disabled ? this.internalHref : undefined}\n target={this.target}\n onClick={this.handleClick}\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n onFocus={(event) => this.handleFocus(event)}\n aria-disabled={this.disabled ? 'true' : null}\n aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\n aria-label={this.ariaLabel || undefined}\n >\n <slot></slot>\n </a>\n </Host>\n );\n }\n\n\n getVariantClass() {\n return `${this.variant}` === \"secondary\"\n ? `secondary-${this.theme}`\n : `${this.variant}` === 'tertiary'\n ? `tertiary-${this.theme}`\n : `${this.theme}`;\n }\n\n getSizeClass() {\n if (`${this.size}` === \"xs\") {\n return \"xs\"\n }\n else if (`${this.size}` === \"s\") {\n return \"s\"\n }\n else if (`${this.size}` === \"l\") {\n return \"l\"\n }\n else return \"\";\n }\n\n getClassNames() {\n return classNames(\n 'btn',\n this.size && `btn-${this.getSizeClass()}`,\n `btn-${this.getVariantClass()}`,\n this.disabled ? 'disabled' : ''\n );\n }\n}"],"version":3}
@@ -1,8 +1,8 @@
1
1
  import { p as proxyCustomElement, H, h, d as Host } from './p-f8e6a4ef.js';
2
- import { d as detectFramework, t as trackComponent } from './p-e8504e6b.js';
2
+ import { d as detectFramework, t as trackComponent } from './p-fd1c9465.js';
3
3
  import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
4
- import { d as defineCustomElement$2 } from './p-28bc54da.js';
5
- import { d as defineCustomElement$1 } from './p-80bd74d1.js';
4
+ import { d as defineCustomElement$2 } from './p-b72cf91c.js';
5
+ import { d as defineCustomElement$1 } from './p-bf46e92b.js';
6
6
 
7
7
  const notificationCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.ifx-notification__wrapper{display:flex;flex-direction:row;align-items:center;padding:8px 16px;background-color:#FFFFFF;font-family:var(--ifx-font-family);color:#1D1D1D;border:1px solid #EEEDED}.ifx-notification__wrapper.ifx-notification__wrapper--success{border-left:4px solid #4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--success .ifx-notification__icon{color:#4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--locked{border-left:4px solid #E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--locked .ifx-notification__icon{color:#E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--error{border-left:4px solid #CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--error .ifx-notification__icon{color:#CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--neutral{border-left:4px solid #0A8276}.ifx-notification__wrapper.ifx-notification__wrapper--neutral .ifx-notification__icon{color:#0A8276}.ifx-notification__wrapper .ifx-notification__icon{margin-right:8px;display:flex;align-self:center}.ifx-notification__wrapper .ifx-notification__body{display:flex;flex-direction:row;flex-grow:1;font-size:0.875rem}.ifx-notification__wrapper .ifx-notification__body .ifx-notification__slot{flex-grow:1;display:inline-flex;align-items:center}.ifx-notification__wrapper .ifx-notification__link{font-size:0.875rem}@media (max-width: 576px){.ifx-notification__wrapper .ifx-notification__icon{align-self:flex-start}.ifx-notification__wrapper .ifx-notification__body{flex-direction:column}.ifx-notification__wrapper .ifx-notification__link{margin-top:8px}}";
8
8
  const IfxNotificationStyle0 = notificationCss;
@@ -15,7 +15,7 @@ const Notification = /*@__PURE__*/ proxyCustomElement(class Notification extends
15
15
  this.variant = 'success';
16
16
  this.linkTarget = '_blank';
17
17
  }
18
- componentWillLoad() {
18
+ componentDidLoad() {
19
19
  if (!isNestedInIfxComponent(this.el)) {
20
20
  const framework = detectFramework();
21
21
  trackComponent('ifx-notification', framework);
@@ -36,8 +36,8 @@ const Notification = /*@__PURE__*/ proxyCustomElement(class Notification extends
36
36
  }
37
37
  }
38
38
  render() {
39
- return (h(Host, { key: 'c17bf027743a67188f8f2d5939c32d1291cd5d17' }, h("div", { key: '5b94bafadb00ff880d921968aebabdc1dc4a046a', class: "ifx-notification__wrapper " + this.getClassName() }, h("div", { key: '883a1fa61c49c3cb9851a76f0b6e6ab40e08a578', class: "ifx-notification__icon" }, h("ifx-icon", { key: '966365d2eae1eaeaef8cdbd9c656d56cc6d09ee1', icon: this.icon })), h("div", { key: '50a4c1af8864397efd1cd7b7c04444fdb3860eaf', class: "ifx-notification__body" }, h("div", { key: '587eddd49c9006fed4dcf588b0ba04f17ca88677', class: "ifx-notification__slot" }, h("slot", { key: '83e4cac618bad6c4e0e52297214013cd8f6c268e' })), this.linkText && this.linkHref &&
40
- h("div", { key: '5e477f0dbc503f0cff2fbe0c72673939e41f7222', class: "ifx-notification__link" }, h("ifx-link", { key: '4609e684a086bacb401ba57f011f064679c5f094', href: this.linkHref, target: this.linkTarget }, this.linkText, h("ifx-icon", { key: '2b9bce01568ad57abc570fbcfaf401380c97c8ba', icon: "arrow-right-16" })))))));
39
+ return (h(Host, { key: 'feb1f668acaee03c11e9b13375f109e24797c796' }, h("div", { key: 'c703f08f127a401b749ff61ca1cc644ba142cbc7', class: "ifx-notification__wrapper " + this.getClassName() }, h("div", { key: '6c18213cf6ffa38345eb6e91b67b13b5e7515ae9', class: "ifx-notification__icon" }, h("ifx-icon", { key: '875db2a87fb5bf57b7ebdcf9e6d775a8437a0301', icon: this.icon })), h("div", { key: '409d3d76a7b25d28a66ea96e0d7bb67ff2c32a4e', class: "ifx-notification__body" }, h("div", { key: 'd74630e8d8ca028dd6933c2d2ec21c53b3126a84', class: "ifx-notification__slot" }, h("slot", { key: 'd9733028952ed651e2a157fff0b1a59fdab8dd55' })), this.linkText && this.linkHref &&
40
+ h("div", { key: '79fd07e524ba0bd1c4912d8a06fa2150ecce2968', class: "ifx-notification__link" }, h("ifx-link", { key: '0d837c96e414528e9f3af9098c3797bf18030b1a', href: this.linkHref, target: this.linkTarget }, this.linkText, h("ifx-icon", { key: 'ab2659a8065cf3786bb4107875e55cfc8753c017', icon: "arrow-right-16" })))))));
41
41
  }
42
42
  get el() { return this; }
43
43
  static get style() { return IfxNotificationStyle0; }
@@ -74,4 +74,4 @@ function defineCustomElement() {
74
74
 
75
75
  export { Notification as N, defineCustomElement as d };
76
76
 
77
- //# sourceMappingURL=p-307b57c7.js.map
77
+ //# sourceMappingURL=p-75cf9c68.js.map
@@ -1 +1 @@
1
- {"file":"p-307b57c7.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,uoDAAuoD,CAAC;AAChqD,8BAAe,eAAe;;MCUjB,YAAY;IALzB;;;;QAQU,YAAO,GAAwB,SAAS,CAAC;QAGzC,eAAU,GAAW,QAAQ,CAAC;KAgDvC;IA9CC,iBAAiB;QACf,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAA;SAC9C;KACF;IAEO,YAAY;QAClB,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C,KAAK,QAAQ;gBACX,OAAO,mCAAmC,CAAC;YAC7C,KAAK,OAAO;gBACV,OAAO,kCAAkC,CAAC;YAC5C,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C;gBACE,OAAO,oCAAoC,CAAC;SAC/C;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,EAAE,IAC5D,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC,EACN,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,8DAAO,CACH,EACJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,IACnD,IAAI,CAAC,QAAQ,EAAC,iEAAU,IAAI,EAAC,gBAAgB,GACrC,CACA,CACP,CAEF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.ifx-notification__wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n color: tokens.$ifxColorBaseBlack;\n\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n\n &.ifx-notification__wrapper--success {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorGreen500;\n }\n }\n\n &.ifx-notification__wrapper--locked {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorOrange500;\n }\n }\n\n &.ifx-notification__wrapper--error {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.ifx-notification__wrapper--neutral{\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorOcean500;\n }\n }\n\n & .ifx-notification__icon {\n margin-right: tokens.$ifxSpace100;\n display: flex;\n align-self: center;\n }\n\n & .ifx-notification__body {\n display: flex;\n flex-direction: row;\n flex-grow: 1;\n font-size: tokens.$ifxFontSizeS;\n\n & .ifx-notification__slot {\n flex-grow: 1;\n display: inline-flex;\n align-items: center;\n }\n }\n\n & .ifx-notification__link {\n font-size: tokens.$ifxFontSizeS;\n }\n\n @media (max-width: tokens.$ifxBreakpointXs) {\n & .ifx-notification__icon {\n align-self: flex-start;\n }\n\n & .ifx-notification__body {\n flex-direction: column;\n }\n\n & .ifx-notification__link {\n margin-top: tokens.$ifxSpace100;\n }\n }\n}","import { Component, h, Host, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nexport type NotificationVariant = 'success' | 'locked' | 'error' | 'neutral';\n\n@Component({\n tag: 'ifx-notification',\n styleUrl: 'notification.scss',\n shadow: true\n})\nexport class Notification {\n @Element() el;\n @Prop() icon: string;\n @Prop() variant: NotificationVariant = 'success';\n @Prop() linkText: string; \n @Prop() linkHref: string;\n @Prop() linkTarget: string = '_blank';\n\n componentWillLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-notification', framework)\n }\n }\n\n private getClassName(): string {\n switch (this.variant) {\n case 'success':\n return 'ifx-notification__wrapper--success';\n case 'locked':\n return 'ifx-notification__wrapper--locked';\n case 'error':\n return 'ifx-notification__wrapper--error';\n case 'neutral':\n return 'ifx-notification__wrapper--neutral';\n default:\n return 'ifx-notification__wrapper--success';\n }\n }\n\n render() {\n return (\n <Host>\n <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n <div class=\"ifx-notification__icon\">\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>\n <div class=\"ifx-notification__body\">\n <div class=\"ifx-notification__slot\">\n <slot/>\n </div>\n { this.linkText && this.linkHref && \n <div class=\"ifx-notification__link\">\n <ifx-link href={this.linkHref} target={this.linkTarget}>\n {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n </ifx-icon>\n </ifx-link>\n </div>\n }\n </div>\n </div>\n </Host>\n );\n }\n}"],"version":3}
1
+ {"file":"p-75cf9c68.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,uoDAAuoD,CAAC;AAChqD,8BAAe,eAAe;;MCUjB,YAAY;IALzB;;;;QAQU,YAAO,GAAwB,SAAS,CAAC;QAGzC,eAAU,GAAW,QAAQ,CAAC;KAgDvC;IA9CC,gBAAgB;QACd,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAA;SAC9C;KACF;IAEO,YAAY;QAClB,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C,KAAK,QAAQ;gBACX,OAAO,mCAAmC,CAAC;YAC7C,KAAK,OAAO;gBACV,OAAO,kCAAkC,CAAC;YAC5C,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C;gBACE,OAAO,oCAAoC,CAAC;SAC/C;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,EAAE,IAC5D,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC,EACN,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,8DAAO,CACH,EACJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,IACnD,IAAI,CAAC,QAAQ,EAAC,iEAAU,IAAI,EAAC,gBAAgB,GACrC,CACA,CACP,CAEF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.ifx-notification__wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n color: tokens.$ifxColorBaseBlack;\n\n border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n\n &.ifx-notification__wrapper--success {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorGreen500;\n }\n }\n\n &.ifx-notification__wrapper--locked {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorOrange500;\n }\n }\n\n &.ifx-notification__wrapper--error {\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.ifx-notification__wrapper--neutral{\n border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\n\n & .ifx-notification__icon {\n color: tokens.$ifxColorOcean500;\n }\n }\n\n & .ifx-notification__icon {\n margin-right: tokens.$ifxSpace100;\n display: flex;\n align-self: center;\n }\n\n & .ifx-notification__body {\n display: flex;\n flex-direction: row;\n flex-grow: 1;\n font-size: tokens.$ifxFontSizeS;\n\n & .ifx-notification__slot {\n flex-grow: 1;\n display: inline-flex;\n align-items: center;\n }\n }\n\n & .ifx-notification__link {\n font-size: tokens.$ifxFontSizeS;\n }\n\n @media (max-width: tokens.$ifxBreakpointXs) {\n & .ifx-notification__icon {\n align-self: flex-start;\n }\n\n & .ifx-notification__body {\n flex-direction: column;\n }\n\n & .ifx-notification__link {\n margin-top: tokens.$ifxSpace100;\n }\n }\n}","import { Component, h, Host, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nexport type NotificationVariant = 'success' | 'locked' | 'error' | 'neutral';\n\n@Component({\n tag: 'ifx-notification',\n styleUrl: 'notification.scss',\n shadow: true\n})\nexport class Notification {\n @Element() el;\n @Prop() icon: string;\n @Prop() variant: NotificationVariant = 'success';\n @Prop() linkText: string; \n @Prop() linkHref: string;\n @Prop() linkTarget: string = '_blank';\n\n componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-notification', framework)\n }\n }\n\n private getClassName(): string {\n switch (this.variant) {\n case 'success':\n return 'ifx-notification__wrapper--success';\n case 'locked':\n return 'ifx-notification__wrapper--locked';\n case 'error':\n return 'ifx-notification__wrapper--error';\n case 'neutral':\n return 'ifx-notification__wrapper--neutral';\n default:\n return 'ifx-notification__wrapper--success';\n }\n }\n\n render() {\n return (\n <Host>\n <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n <div class=\"ifx-notification__icon\">\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>\n <div class=\"ifx-notification__body\">\n <div class=\"ifx-notification__slot\">\n <slot/>\n </div>\n { this.linkText && this.linkHref && \n <div class=\"ifx-notification__link\">\n <ifx-link href={this.linkHref} target={this.linkTarget}>\n {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n </ifx-icon>\n </ifx-link>\n </div>\n }\n </div>\n </div>\n </Host>\n );\n }\n}"],"version":3}
@@ -1,9 +1,9 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
2
- import { d as defineCustomElement$5 } from './p-e7f270c1.js';
3
- import { d as defineCustomElement$4 } from './p-28bc54da.js';
4
- import { d as defineCustomElement$3 } from './p-80bd74d1.js';
5
- import { d as defineCustomElement$2 } from './p-ed0f491c.js';
6
- import { d as defineCustomElement$1 } from './p-01a2a671.js';
2
+ import { d as defineCustomElement$5 } from './p-7469727b.js';
3
+ import { d as defineCustomElement$4 } from './p-b72cf91c.js';
4
+ import { d as defineCustomElement$3 } from './p-bf46e92b.js';
5
+ import { d as defineCustomElement$2 } from './p-d3d3eb63.js';
6
+ import { d as defineCustomElement$1 } from './p-02d51cb4.js';
7
7
 
8
8
  const templateCss = ".react__template-wrapper{display:flex;width:300px;height:200px;border-radius:3px;border:1px solid #ccc}.react__template-wrapper.hide{display:none}.react__template-wrapper:hover{cursor:pointer}.template__page-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.template__page-wrapper .repository__url{text-decoration:none}.input__fields-wrapper{display:flex;flex-direction:column;gap:10px}.details__wrapper{display:flex;flex-direction:column;gap:10px}.selection__buttons-wrapper{display:flex;gap:10px;padding-top:10px;align-items:center}.selection__buttons-wrapper .vue__label{color:#ccc}.selection__buttons-wrapper label:not(.vue__label):hover{cursor:pointer}.selection__buttons-wrapper .selection__input{display:flex;align-items:center;gap:5px}.selection__buttons-wrapper .selection__input input{margin:0;height:20px;width:20px}.selection__buttons-wrapper .selection__input input:hover:not(.vue__input){cursor:pointer}.image__wrapper img{position:relative;width:300px;height:100%;border-radius:3px;object-fit:contain;transition:transform 0.2s}.image__wrapper img:hover{transform:scale(2);top:50px;z-index:100}";
9
9
  const IfxTemplateStyle0 = templateCss;
@@ -204,4 +204,4 @@ function defineCustomElement() {
204
204
 
205
205
  export { Template as T, defineCustomElement as d };
206
206
 
207
- //# sourceMappingURL=p-150988ec.js.map
207
+ //# sourceMappingURL=p-89bd3f13.js.map
@@ -1 +1 @@
1
- {"file":"p-150988ec.js","mappings":"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","names":[],"sources":["src/components/templates/template/template.scss?tag=ifx-template&encapsulation=shadow","src/components/templates/template/template.tsx"],"sourcesContent":["\n.react__template-wrapper { \n display: flex;\n width: 300px;\n height: 200px;\n border-radius: 3px;\n border: 1px solid #ccc;\n\n &.hide { \n display: none;\n }\n \n &:hover { \n cursor: pointer;\n }\n}\n\n.template__page-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n\n & .repository__url { \n text-decoration: none;\n }\n}\n\n.input__fields-wrapper { \n display: flex;\n flex-direction: column;\n gap: 10px;\n\n}\n\n.details__wrapper { \n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.selection__buttons-wrapper { \n display: flex;\n gap: 10px;\n padding-top: 10px;\n align-items: center;\n & .vue__label { \n color: #ccc;\n }\n\n & label:not(.vue__label) { \n &:hover { \n cursor: pointer;\n }\n }\n\n & .selection__input { \n display: flex;\n align-items: center;\n gap: 5px;\n & input { \n margin: 0;\n height: 20px;\n width: 20px;\n &:hover:not(.vue__input) { \n cursor: pointer;\n }\n }\n }\n}\n\n.image__wrapper { \n img { \n position: relative;\n width: 300px;\n height: 100%;\n border-radius: 3px;\n object-fit: contain;\n transition: transform .2s;\n &:hover { \n transform: scale(2);\n top: 50px;\n z-index: 100;\n }\n }\n}","import { Component, h, Element, State, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-template',\n styleUrl: 'template.scss',\n shadow: true,\n})\nexport class Template {\n @Element() el: HTMLElement;\n @State() repoDetails: { name: string, desc: string, framework: string } = { name: \"\", desc: \"\", framework: \"\" };\n @State() repoUrl: string;\n @State() showDetails: boolean = false;\n @State() isTemplatePage: boolean = false;\n @State() isLoading: boolean = true;\n @State() repoError: string;\n @Prop() name: string;\n @Event() toggleTemplates: EventEmitter;\n @Event() fieldError: EventEmitter;\n @Prop() thumbnail: string;\n \n private clientId = 'Ov23lixmXiNTTNb6V5W6'\n private redirectUri = 'https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development';\n private scope = 'repo workflow'\n private state = 'template123'\n\n authUser() { \n const authorizationUrl = `https://github.com/login/oauth/authorize?` +\n `client_id=${this.clientId}&` +\n `redirect_uri=${this.redirectUri}&` +\n `scope=${this.scope}&` +\n `state=${this.state}`;\n \n window.open(authorizationUrl, '_blank'); \n }\n\n componentDidLoad() { \n const url = new URL(window.location.href);\n const code = url.searchParams.get('code');\n const { templateName } = this.getLocalStorageValues()\n if(code && this.name === templateName) { \n this.isTemplatePage = true;\n this.toggleTemplates.emit('details')\n this.getUserToken(code)\n } \n }\n\n getLocalStorageValues() { \n const repoName = localStorage.getItem('repo_name');\n const repoDesc = localStorage.getItem('repo_desc');\n const repoFramework = localStorage.getItem('repo_framework');\n const templateName = localStorage.getItem('selectedTemplate');\n return { repoName, repoDesc, repoFramework, templateName }\n }\n\n async getUserToken(authCode) {\n const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();\n\n fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)\n .then(response => {\n if (response.ok) {\n return response.text();\n } else {\n return response.text().then(errorMessage => {\n throw new Error(errorMessage);\n });\n }\n })\n .then(data => { \n if(data) { \n this.isLoading = false;\n this.repoUrl = data;\n localStorage.clear();\n } \n })\n .catch(error => {\n this.repoError = error.message;\n console.error('Error:', error.message)\n });\n }\n\n handleUserInput(e, type) { \n if (type === 'name') {\n this.repoDetails = { ...this.repoDetails, name: e.target.value };\n } else if (type === 'desc') {\n this.repoDetails = { ...this.repoDetails, desc: e.target.value };\n } else if(type === 'framework') { \n this.repoDetails = { ...this.repoDetails, framework: e.target.value };\n }\n }\n\n submitUserData() { \n if(this.repoDetails.name && this.repoDetails.desc && this.repoDetails.framework) { \n localStorage.setItem('repo_name', this.repoDetails.name);\n localStorage.setItem('repo_desc', this.repoDetails.desc);\n localStorage.setItem('repo_framework', this.repoDetails.framework);\n localStorage.setItem('selectedTemplate', this.name);\n this.fieldError.emit(false)\n this.authUser()\n } else { \n this.fieldError.emit('All fields are mandatory')\n }\n }\n\n togglePadding(action) { \n let parent = this.el.parentElement;\n if (parent) {\n const rootNode = parent.getRootNode();\n if (rootNode instanceof ShadowRoot) {\n parent = rootNode.host.parentElement;\n } else {\n parent = parent.parentElement;\n }\n if(action === 'remove') { \n parent.parentElement.style.padding = '0px';\n } else if(action === 'add') { \n parent.parentElement.style.padding = '4rem 20px';\n }\n }\n }\n\n handleCurrentTemplate(e) { \n if(e && !this.showDetails) { \n this.togglePadding('remove')\n const targetTemplate = e.currentTarget;\n this.toggleTemplates.emit(targetTemplate)\n this.showDetails = true;\n } \n }\n\n @Method()\n async toggleTemplate(currTemp) { \n const templateWrapper = this.el.shadowRoot.querySelector('.react__template-wrapper');\n if(templateWrapper) { \n if(!templateWrapper.classList.contains('hide') && currTemp ) { \n if(templateWrapper !== currTemp) {\n templateWrapper.classList.add('hide')\n }\n } else { \n if(this.showDetails) { \n this.showDetails = false;\n }\n this.togglePadding('add')\n templateWrapper.classList.remove('hide')\n }\n }\n }\n\n \n render() {\n return (\n <div>\n {this.isTemplatePage \n ? \n <div class=\"template__page-wrapper\">\n {!this.repoUrl && !this.repoError && \n <div>\n <h3>Your repository is getting ready..</h3>\n <p>This will only take a minute.</p>\n </div>}\n {this.isLoading && !this.repoError && <div><ifx-spinner variant='default' size='s' /></div>}\n {this.repoUrl && <ifx-link href={this.repoUrl} target=\"_parent\" size=\"m\" variant=\"underlined\">Your repository</ifx-link>}\n {this.repoError && <div>{this.repoError}</div>}\n </div> \n : \n <div class=\"react__template-container\">\n <div class=\"react__template-wrapper\" onClick={(e) => this.handleCurrentTemplate(e)}>\n <div class=\"image__wrapper\">\n <img src={this.thumbnail} />\n </div>\n </div>\n {this.showDetails && \n <div class=\"details__wrapper\">\n <div class=\"selection__buttons-wrapper\">\n <div class=\"selection__input\">\n <input type=\"radio\" id=\"react\" name=\"chosen_framework\" value=\"react\" onInput={(e) => this.handleUserInput(e, 'framework')} />\n <label htmlFor=\"react\">React</label>\n </div>\n <div class=\"selection__input vue\">\n <input class=\"vue__input\" disabled type=\"radio\" id=\"vue\" name=\"chosen_framework\" value=\"vue\" onInput={(e) => this.handleUserInput(e, 'framework')}/>\n <label class=\"vue__label\" htmlFor=\"vue\">Vue</label> (Soon)\n </div>\n </div>\n \n\n <div class=\"input__fields-wrapper\">\n <ifx-text-field required={true} onInput={(e) => this.handleUserInput(e, 'name')} size=\"m\" icon=\"c-info-16\" placeholder=\"Your repository name\">Repository Name</ifx-text-field>\n\n <ifx-text-field required={true} size=\"m\" icon=\"c-info-16\" onInput={(e) => this.handleUserInput(e, 'desc')} placeholder=\"Your repository description\">Repository Description</ifx-text-field>\n\n <ifx-button fullWidth={true} onClick={() => this.submitUserData()} variant='primary'>Generate template</ifx-button>\n </div>\n \n </div>}\n </div>}\n </div>\n );\n }\n}"],"version":3}
1
+ {"file":"p-89bd3f13.js","mappings":"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","names":[],"sources":["src/components/templates/template/template.scss?tag=ifx-template&encapsulation=shadow","src/components/templates/template/template.tsx"],"sourcesContent":["\n.react__template-wrapper { \n display: flex;\n width: 300px;\n height: 200px;\n border-radius: 3px;\n border: 1px solid #ccc;\n\n &.hide { \n display: none;\n }\n \n &:hover { \n cursor: pointer;\n }\n}\n\n.template__page-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n\n & .repository__url { \n text-decoration: none;\n }\n}\n\n.input__fields-wrapper { \n display: flex;\n flex-direction: column;\n gap: 10px;\n\n}\n\n.details__wrapper { \n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.selection__buttons-wrapper { \n display: flex;\n gap: 10px;\n padding-top: 10px;\n align-items: center;\n & .vue__label { \n color: #ccc;\n }\n\n & label:not(.vue__label) { \n &:hover { \n cursor: pointer;\n }\n }\n\n & .selection__input { \n display: flex;\n align-items: center;\n gap: 5px;\n & input { \n margin: 0;\n height: 20px;\n width: 20px;\n &:hover:not(.vue__input) { \n cursor: pointer;\n }\n }\n }\n}\n\n.image__wrapper { \n img { \n position: relative;\n width: 300px;\n height: 100%;\n border-radius: 3px;\n object-fit: contain;\n transition: transform .2s;\n &:hover { \n transform: scale(2);\n top: 50px;\n z-index: 100;\n }\n }\n}","import { Component, h, Element, State, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-template',\n styleUrl: 'template.scss',\n shadow: true,\n})\nexport class Template {\n @Element() el: HTMLElement;\n @State() repoDetails: { name: string, desc: string, framework: string } = { name: \"\", desc: \"\", framework: \"\" };\n @State() repoUrl: string;\n @State() showDetails: boolean = false;\n @State() isTemplatePage: boolean = false;\n @State() isLoading: boolean = true;\n @State() repoError: string;\n @Prop() name: string;\n @Event() toggleTemplates: EventEmitter;\n @Event() fieldError: EventEmitter;\n @Prop() thumbnail: string;\n \n private clientId = 'Ov23lixmXiNTTNb6V5W6'\n private redirectUri = 'https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development';\n private scope = 'repo workflow'\n private state = 'template123'\n\n authUser() { \n const authorizationUrl = `https://github.com/login/oauth/authorize?` +\n `client_id=${this.clientId}&` +\n `redirect_uri=${this.redirectUri}&` +\n `scope=${this.scope}&` +\n `state=${this.state}`;\n \n window.open(authorizationUrl, '_blank'); \n }\n\n componentDidLoad() { \n const url = new URL(window.location.href);\n const code = url.searchParams.get('code');\n const { templateName } = this.getLocalStorageValues()\n if(code && this.name === templateName) { \n this.isTemplatePage = true;\n this.toggleTemplates.emit('details')\n this.getUserToken(code)\n } \n }\n\n getLocalStorageValues() { \n const repoName = localStorage.getItem('repo_name');\n const repoDesc = localStorage.getItem('repo_desc');\n const repoFramework = localStorage.getItem('repo_framework');\n const templateName = localStorage.getItem('selectedTemplate');\n return { repoName, repoDesc, repoFramework, templateName }\n }\n\n async getUserToken(authCode) {\n const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();\n\n fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)\n .then(response => {\n if (response.ok) {\n return response.text();\n } else {\n return response.text().then(errorMessage => {\n throw new Error(errorMessage);\n });\n }\n })\n .then(data => { \n if(data) { \n this.isLoading = false;\n this.repoUrl = data;\n localStorage.clear();\n } \n })\n .catch(error => {\n this.repoError = error.message;\n console.error('Error:', error.message)\n });\n }\n\n handleUserInput(e, type) { \n if (type === 'name') {\n this.repoDetails = { ...this.repoDetails, name: e.target.value };\n } else if (type === 'desc') {\n this.repoDetails = { ...this.repoDetails, desc: e.target.value };\n } else if(type === 'framework') { \n this.repoDetails = { ...this.repoDetails, framework: e.target.value };\n }\n }\n\n submitUserData() { \n if(this.repoDetails.name && this.repoDetails.desc && this.repoDetails.framework) { \n localStorage.setItem('repo_name', this.repoDetails.name);\n localStorage.setItem('repo_desc', this.repoDetails.desc);\n localStorage.setItem('repo_framework', this.repoDetails.framework);\n localStorage.setItem('selectedTemplate', this.name);\n this.fieldError.emit(false)\n this.authUser()\n } else { \n this.fieldError.emit('All fields are mandatory')\n }\n }\n\n togglePadding(action) { \n let parent = this.el.parentElement;\n if (parent) {\n const rootNode = parent.getRootNode();\n if (rootNode instanceof ShadowRoot) {\n parent = rootNode.host.parentElement;\n } else {\n parent = parent.parentElement;\n }\n if(action === 'remove') { \n parent.parentElement.style.padding = '0px';\n } else if(action === 'add') { \n parent.parentElement.style.padding = '4rem 20px';\n }\n }\n }\n\n handleCurrentTemplate(e) { \n if(e && !this.showDetails) { \n this.togglePadding('remove')\n const targetTemplate = e.currentTarget;\n this.toggleTemplates.emit(targetTemplate)\n this.showDetails = true;\n } \n }\n\n @Method()\n async toggleTemplate(currTemp) { \n const templateWrapper = this.el.shadowRoot.querySelector('.react__template-wrapper');\n if(templateWrapper) { \n if(!templateWrapper.classList.contains('hide') && currTemp ) { \n if(templateWrapper !== currTemp) {\n templateWrapper.classList.add('hide')\n }\n } else { \n if(this.showDetails) { \n this.showDetails = false;\n }\n this.togglePadding('add')\n templateWrapper.classList.remove('hide')\n }\n }\n }\n\n \n render() {\n return (\n <div>\n {this.isTemplatePage \n ? \n <div class=\"template__page-wrapper\">\n {!this.repoUrl && !this.repoError && \n <div>\n <h3>Your repository is getting ready..</h3>\n <p>This will only take a minute.</p>\n </div>}\n {this.isLoading && !this.repoError && <div><ifx-spinner variant='default' size='s' /></div>}\n {this.repoUrl && <ifx-link href={this.repoUrl} target=\"_parent\" size=\"m\" variant=\"underlined\">Your repository</ifx-link>}\n {this.repoError && <div>{this.repoError}</div>}\n </div> \n : \n <div class=\"react__template-container\">\n <div class=\"react__template-wrapper\" onClick={(e) => this.handleCurrentTemplate(e)}>\n <div class=\"image__wrapper\">\n <img src={this.thumbnail} />\n </div>\n </div>\n {this.showDetails && \n <div class=\"details__wrapper\">\n <div class=\"selection__buttons-wrapper\">\n <div class=\"selection__input\">\n <input type=\"radio\" id=\"react\" name=\"chosen_framework\" value=\"react\" onInput={(e) => this.handleUserInput(e, 'framework')} />\n <label htmlFor=\"react\">React</label>\n </div>\n <div class=\"selection__input vue\">\n <input class=\"vue__input\" disabled type=\"radio\" id=\"vue\" name=\"chosen_framework\" value=\"vue\" onInput={(e) => this.handleUserInput(e, 'framework')}/>\n <label class=\"vue__label\" htmlFor=\"vue\">Vue</label> (Soon)\n </div>\n </div>\n \n\n <div class=\"input__fields-wrapper\">\n <ifx-text-field required={true} onInput={(e) => this.handleUserInput(e, 'name')} size=\"m\" icon=\"c-info-16\" placeholder=\"Your repository name\">Repository Name</ifx-text-field>\n\n <ifx-text-field required={true} size=\"m\" icon=\"c-info-16\" onInput={(e) => this.handleUserInput(e, 'desc')} placeholder=\"Your repository description\">Repository Description</ifx-text-field>\n\n <ifx-button fullWidth={true} onClick={() => this.submitUserData()} variant='primary'>Generate template</ifx-button>\n </div>\n \n </div>}\n </div>}\n </div>\n );\n }\n}"],"version":3}
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, h, d as Host } from './p-f8e6a4ef.js';
2
- import { d as defineCustomElement$2 } from './p-72aae821.js';
3
- import { d as defineCustomElement$1 } from './p-28bc54da.js';
2
+ import { d as defineCustomElement$2 } from './p-6cdb54a6.js';
3
+ import { d as defineCustomElement$1 } from './p-b72cf91c.js';
4
4
 
5
5
  const multiselectOptionCss = ":host{display:block;width:100%}.option{display:flex;flex-direction:column;position:relative;cursor:pointer;list-style:none}.option.option--expanded{position:relative}.option.option--has-children{position:relative}.option.option--has-children .option-item>.chevron-wrapper{display:flex}.option--disabled{cursor:not-allowed;pointer-events:none;color:#BFBBBB}.option.search-hidden{display:none !important}.option.search-match .option-item .option-label .search-highlight{font-weight:bold}.option-item{display:flex;flex-direction:row;align-items:center;white-space:nowrap;min-height:20px;padding:4px 16px;background-color:#FFFFFF;transition:background-color 0.2s ease-in-out}.option-item:hover{background-color:#F7F7F7}.option--disabled .option-item:hover{background-color:transparent}.option-children{display:block}.chevron-wrapper{display:none;align-items:center;justify-content:center;margin-right:8px;width:20px;height:20px;flex-shrink:0}.chevron-wrapper:focus{outline:none}.chevron-wrapper:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.option--has-children .chevron-wrapper{display:flex}.chevron-wrapper .chevron{transition:transform 0.2s ease-in-out;color:#3C3A39}.chevron-wrapper .chevron.chevron--expanded{transform:rotate(90deg)}.chevron-wrapper .chevron.chevron--collapsed{transform:rotate(0deg)}.checkbox-wrapper{display:flex;align-items:center;margin-right:8px;flex-shrink:0}.option-label{flex-grow:1;display:flex;align-items:center;cursor:pointer;padding:2px 0;font-size:0.875rem}.option-label:focus{outline:none}.option-label:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.option--disabled .option-label{cursor:not-allowed;color:#BFBBBB}";
6
6
  const IfxMultiselectOptionStyle0 = multiselectOptionCss;
@@ -429,4 +429,4 @@ function defineCustomElement() {
429
429
 
430
430
  export { MultiselectOption as M, defineCustomElement as d };
431
431
 
432
- //# sourceMappingURL=p-8eaa55a1.js.map
432
+ //# sourceMappingURL=p-8aab7989.js.map