@infineon/infineon-design-system-stencil 36.0.1--canary.1935.77c36513858c80d14aa68b5d03acece9da06c973.0 → 36.1.0--canary.1904.271bdcd0dfd5e73c0033e8c6aaf1cf8e19d645b2.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 (615) hide show
  1. package/dist/cjs/dom-utils-2c4573c2.js +20 -0
  2. package/dist/cjs/dom-utils-2c4573c2.js.map +1 -0
  3. package/dist/cjs/ifx-accordion_2.cjs.entry.js +8 -1
  4. package/dist/cjs/ifx-accordion_2.cjs.entry.js.map +1 -1
  5. package/dist/cjs/ifx-alert_2.cjs.entry.js +6 -0
  6. package/dist/cjs/ifx-alert_2.cjs.entry.js.map +1 -1
  7. package/dist/cjs/ifx-badge.cjs.entry.js +9 -1
  8. package/dist/cjs/ifx-badge.cjs.entry.js.map +1 -1
  9. package/dist/cjs/ifx-basic-table.cjs.entry.js +6 -1
  10. package/dist/cjs/ifx-basic-table.cjs.entry.js.map +1 -1
  11. package/dist/cjs/ifx-breadcrumb.cjs.entry.js +8 -1
  12. package/dist/cjs/ifx-breadcrumb.cjs.entry.js.map +1 -1
  13. package/dist/cjs/ifx-button.cjs.entry.js +6 -1
  14. package/dist/cjs/ifx-button.cjs.entry.js.map +1 -1
  15. package/dist/cjs/ifx-card.cjs.entry.js +8 -3
  16. package/dist/cjs/ifx-card.cjs.entry.js.map +1 -1
  17. package/dist/cjs/ifx-checkbox-group.cjs.entry.js +6 -1
  18. package/dist/cjs/ifx-checkbox-group.cjs.entry.js.map +1 -1
  19. package/dist/cjs/ifx-checkbox.cjs.entry.js +8 -3
  20. package/dist/cjs/ifx-checkbox.cjs.entry.js.map +1 -1
  21. package/dist/cjs/ifx-chip_3.cjs.entry.js +17 -9
  22. package/dist/cjs/ifx-chip_3.cjs.entry.js.map +1 -1
  23. package/dist/cjs/ifx-content-switcher.cjs.entry.js +6 -1
  24. package/dist/cjs/ifx-content-switcher.cjs.entry.js.map +1 -1
  25. package/dist/cjs/ifx-date-picker.cjs.entry.js +9 -2
  26. package/dist/cjs/ifx-date-picker.cjs.entry.js.map +1 -1
  27. package/dist/cjs/ifx-dropdown.cjs.entry.js +6 -1
  28. package/dist/cjs/ifx-dropdown.cjs.entry.js.map +1 -1
  29. package/dist/cjs/ifx-file-upload.cjs.entry.js +9 -2
  30. package/dist/cjs/ifx-file-upload.cjs.entry.js.map +1 -1
  31. package/dist/cjs/ifx-footer.cjs.entry.js +9 -4
  32. package/dist/cjs/ifx-footer.cjs.entry.js.map +1 -1
  33. package/dist/cjs/ifx-icon-button.cjs.entry.js +6 -1
  34. package/dist/cjs/ifx-icon-button.cjs.entry.js.map +1 -1
  35. package/dist/cjs/ifx-icon.cjs.entry.js +31 -1
  36. package/dist/cjs/ifx-icon.cjs.entry.js.map +1 -1
  37. package/dist/cjs/ifx-indicator.cjs.entry.js +7 -2
  38. package/dist/cjs/ifx-indicator.cjs.entry.js.map +1 -1
  39. package/dist/cjs/ifx-link.cjs.entry.js +9 -1
  40. package/dist/cjs/ifx-link.cjs.entry.js.map +1 -1
  41. package/dist/cjs/ifx-modal.cjs.entry.js +9 -2
  42. package/dist/cjs/ifx-modal.cjs.entry.js.map +1 -1
  43. package/dist/cjs/ifx-multiselect.cjs.entry.js +5 -0
  44. package/dist/cjs/ifx-multiselect.cjs.entry.js.map +1 -1
  45. package/dist/cjs/ifx-navbar.cjs.entry.js +5 -3
  46. package/dist/cjs/ifx-navbar.cjs.entry.js.map +1 -1
  47. package/dist/cjs/ifx-notification.cjs.entry.js +10 -2
  48. package/dist/cjs/ifx-notification.cjs.entry.js.map +1 -1
  49. package/dist/cjs/ifx-progress-bar.cjs.entry.js +7 -1
  50. package/dist/cjs/ifx-progress-bar.cjs.entry.js.map +1 -1
  51. package/dist/cjs/ifx-radio-button-group.cjs.entry.js +6 -1
  52. package/dist/cjs/ifx-radio-button-group.cjs.entry.js.map +1 -1
  53. package/dist/cjs/ifx-radio-button.cjs.entry.js +7 -2
  54. package/dist/cjs/ifx-radio-button.cjs.entry.js.map +1 -1
  55. package/dist/cjs/ifx-search-bar.cjs.entry.js +6 -1
  56. package/dist/cjs/ifx-search-bar.cjs.entry.js.map +1 -1
  57. package/dist/cjs/ifx-search-field.cjs.entry.js +9 -1
  58. package/dist/cjs/ifx-search-field.cjs.entry.js.map +1 -1
  59. package/dist/cjs/ifx-segmented-control.cjs.entry.js +9 -2
  60. package/dist/cjs/ifx-segmented-control.cjs.entry.js.map +1 -1
  61. package/dist/cjs/ifx-select.cjs.entry.js +7 -2
  62. package/dist/cjs/ifx-select.cjs.entry.js.map +1 -1
  63. package/dist/cjs/ifx-sidebar.cjs.entry.js +7 -5
  64. package/dist/cjs/ifx-sidebar.cjs.entry.js.map +1 -1
  65. package/dist/cjs/ifx-slider.cjs.entry.js +7 -2
  66. package/dist/cjs/ifx-slider.cjs.entry.js.map +1 -1
  67. package/dist/cjs/ifx-spinner_2.cjs.entry.js +17 -6
  68. package/dist/cjs/ifx-spinner_2.cjs.entry.js.map +1 -1
  69. package/dist/cjs/ifx-status.cjs.entry.js +9 -1
  70. package/dist/cjs/ifx-status.cjs.entry.js.map +1 -1
  71. package/dist/cjs/ifx-stepper.cjs.entry.js +7 -2
  72. package/dist/cjs/ifx-stepper.cjs.entry.js.map +1 -1
  73. package/dist/cjs/ifx-switch.cjs.entry.js +6 -1
  74. package/dist/cjs/ifx-switch.cjs.entry.js.map +1 -1
  75. package/dist/cjs/ifx-table.cjs.entry.js +7 -2
  76. package/dist/cjs/ifx-table.cjs.entry.js.map +1 -1
  77. package/dist/cjs/ifx-tabs.cjs.entry.js +7 -2
  78. package/dist/cjs/ifx-tabs.cjs.entry.js.map +1 -1
  79. package/dist/cjs/ifx-tag.cjs.entry.js +9 -1
  80. package/dist/cjs/ifx-tag.cjs.entry.js.map +1 -1
  81. package/dist/cjs/ifx-textarea.cjs.entry.js +6 -1
  82. package/dist/cjs/ifx-textarea.cjs.entry.js.map +1 -1
  83. package/dist/cjs/ifx-tooltip.cjs.entry.js +9 -4
  84. package/dist/cjs/ifx-tooltip.cjs.entry.js.map +1 -1
  85. package/dist/cjs/ifx-tree-view.cjs.entry.js +9 -1
  86. package/dist/cjs/ifx-tree-view.cjs.entry.js.map +1 -1
  87. package/dist/cjs/tracking-f00364dc.js +41 -0
  88. package/dist/cjs/tracking-f00364dc.js.map +1 -0
  89. package/dist/collection/components/accordion/accordion.js +8 -2
  90. package/dist/collection/components/accordion/accordion.js.map +1 -1
  91. package/dist/collection/components/alert/alert.js +6 -0
  92. package/dist/collection/components/alert/alert.js.map +1 -1
  93. package/dist/collection/components/badge/badge.js +9 -1
  94. package/dist/collection/components/badge/badge.js.map +1 -1
  95. package/dist/collection/components/breadcrumb/breadcrumb.js +8 -1
  96. package/dist/collection/components/breadcrumb/breadcrumb.js.map +1 -1
  97. package/dist/collection/components/button/button.js +6 -1
  98. package/dist/collection/components/button/button.js.map +1 -1
  99. package/dist/collection/components/card/card.js +8 -3
  100. package/dist/collection/components/card/card.js.map +1 -1
  101. package/dist/collection/components/checkbox/checkbox.js +8 -3
  102. package/dist/collection/components/checkbox/checkbox.js.map +1 -1
  103. package/dist/collection/components/checkbox-group/checkbox-group.js +6 -1
  104. package/dist/collection/components/checkbox-group/checkbox-group.js.map +1 -1
  105. package/dist/collection/components/chip/chip.js +13 -8
  106. package/dist/collection/components/chip/chip.js.map +1 -1
  107. package/dist/collection/components/content-switcher/content-switcher.js +6 -1
  108. package/dist/collection/components/content-switcher/content-switcher.js.map +1 -1
  109. package/dist/collection/components/date-picker/date-picker.js +9 -2
  110. package/dist/collection/components/date-picker/date-picker.js.map +1 -1
  111. package/dist/collection/components/dropdown/dropdown.js +6 -1
  112. package/dist/collection/components/dropdown/dropdown.js.map +1 -1
  113. package/dist/collection/components/file-upload/file-upload.js +9 -2
  114. package/dist/collection/components/file-upload/file-upload.js.map +1 -1
  115. package/dist/collection/components/footer/footer.js +9 -4
  116. package/dist/collection/components/footer/footer.js.map +1 -1
  117. package/dist/collection/components/icon/infineonIconStencil.js +31 -1
  118. package/dist/collection/components/icon/infineonIconStencil.js.map +1 -1
  119. package/dist/collection/components/icon-button/icon-button.js +6 -1
  120. package/dist/collection/components/icon-button/icon-button.js.map +1 -1
  121. package/dist/collection/components/indicator/indicator.js +7 -2
  122. package/dist/collection/components/indicator/indicator.js.map +1 -1
  123. package/dist/collection/components/link/link.js +9 -1
  124. package/dist/collection/components/link/link.js.map +1 -1
  125. package/dist/collection/components/modal/modal.js +9 -2
  126. package/dist/collection/components/modal/modal.js.map +1 -1
  127. package/dist/collection/components/navigation/navbar/navbar.js +5 -3
  128. package/dist/collection/components/navigation/navbar/navbar.js.map +1 -1
  129. package/dist/collection/components/navigation/sidebar/sidebar.js +7 -5
  130. package/dist/collection/components/navigation/sidebar/sidebar.js.map +1 -1
  131. package/dist/collection/components/notification/notification.js +10 -2
  132. package/dist/collection/components/notification/notification.js.map +1 -1
  133. package/dist/collection/components/pagination/pagination.js +6 -1
  134. package/dist/collection/components/pagination/pagination.js.map +1 -1
  135. package/dist/collection/components/progress-bar/progress-bar.js +7 -1
  136. package/dist/collection/components/progress-bar/progress-bar.js.map +1 -1
  137. package/dist/collection/components/radio-button/radio-button.js +7 -2
  138. package/dist/collection/components/radio-button/radio-button.js.map +1 -1
  139. package/dist/collection/components/radio-button-group/radio-button-group.js +6 -1
  140. package/dist/collection/components/radio-button-group/radio-button-group.js.map +1 -1
  141. package/dist/collection/components/search-bar/search-bar.js +6 -1
  142. package/dist/collection/components/search-bar/search-bar.js.map +1 -1
  143. package/dist/collection/components/search-field/search-field.js +9 -1
  144. package/dist/collection/components/search-field/search-field.js.map +1 -1
  145. package/dist/collection/components/segmented-control/segmented-control.js +9 -2
  146. package/dist/collection/components/segmented-control/segmented-control.js.map +1 -1
  147. package/dist/collection/components/select/multi-select/multiselect.js +5 -0
  148. package/dist/collection/components/select/multi-select/multiselect.js.map +1 -1
  149. package/dist/collection/components/select/single-select/select.js +7 -2
  150. package/dist/collection/components/select/single-select/select.js.map +1 -1
  151. package/dist/collection/components/slider/slider.js +7 -2
  152. package/dist/collection/components/slider/slider.js.map +1 -1
  153. package/dist/collection/components/spinner/spinner.js +10 -2
  154. package/dist/collection/components/spinner/spinner.js.map +1 -1
  155. package/dist/collection/components/status/status.js +9 -1
  156. package/dist/collection/components/status/status.js.map +1 -1
  157. package/dist/collection/components/stepper/stepper.js +7 -2
  158. package/dist/collection/components/stepper/stepper.js.map +1 -1
  159. package/dist/collection/components/switch/switch.js +6 -1
  160. package/dist/collection/components/switch/switch.js.map +1 -1
  161. package/dist/collection/components/table-advanced-version/table.js +7 -2
  162. package/dist/collection/components/table-advanced-version/table.js.map +1 -1
  163. package/dist/collection/components/table-basic-version/table.js +6 -1
  164. package/dist/collection/components/table-basic-version/table.js.map +1 -1
  165. package/dist/collection/components/tabs/tabs.js +7 -3
  166. package/dist/collection/components/tabs/tabs.js.map +1 -1
  167. package/dist/collection/components/tag/tag.js +9 -1
  168. package/dist/collection/components/tag/tag.js.map +1 -1
  169. package/dist/collection/components/text-field/text-field.js +9 -4
  170. package/dist/collection/components/text-field/text-field.js.map +1 -1
  171. package/dist/collection/components/textarea/textarea.js +6 -1
  172. package/dist/collection/components/textarea/textarea.js.map +1 -1
  173. package/dist/collection/components/tooltip/tooltip.js +9 -4
  174. package/dist/collection/components/tooltip/tooltip.js.map +1 -1
  175. package/dist/collection/components/tree-view/tree-view.js +9 -1
  176. package/dist/collection/components/tree-view/tree-view.js.map +1 -1
  177. package/dist/collection/global/utils/dom-utils.js +15 -0
  178. package/dist/collection/global/utils/dom-utils.js.map +1 -0
  179. package/dist/collection/global/utils/tracking.js +37 -0
  180. package/dist/collection/global/utils/tracking.js.map +1 -0
  181. package/dist/components/ifx-accordion-item.js +1 -1
  182. package/dist/components/ifx-accordion.js +1 -1
  183. package/dist/components/ifx-alert.js +1 -1
  184. package/dist/components/ifx-badge.js +9 -1
  185. package/dist/components/ifx-badge.js.map +1 -1
  186. package/dist/components/ifx-basic-table.js +6 -1
  187. package/dist/components/ifx-basic-table.js.map +1 -1
  188. package/dist/components/ifx-breadcrumb-item-label.js +1 -1
  189. package/dist/components/ifx-breadcrumb.js +8 -1
  190. package/dist/components/ifx-breadcrumb.js.map +1 -1
  191. package/dist/components/ifx-button.js +1 -1
  192. package/dist/components/ifx-card.js +8 -3
  193. package/dist/components/ifx-card.js.map +1 -1
  194. package/dist/components/ifx-checkbox-group.js +7 -2
  195. package/dist/components/ifx-checkbox-group.js.map +1 -1
  196. package/dist/components/ifx-checkbox.js +1 -1
  197. package/dist/components/ifx-chip-item.js +1 -1
  198. package/dist/components/ifx-chip.js +1 -1
  199. package/dist/components/ifx-content-switcher.js +6 -1
  200. package/dist/components/ifx-content-switcher.js.map +1 -1
  201. package/dist/components/ifx-date-picker.js +10 -3
  202. package/dist/components/ifx-date-picker.js.map +1 -1
  203. package/dist/components/ifx-download.js +1 -1
  204. package/dist/components/ifx-dropdown-item.js +1 -1
  205. package/dist/components/ifx-dropdown-trigger-button.js +2 -2
  206. package/dist/components/ifx-dropdown.js +6 -1
  207. package/dist/components/ifx-dropdown.js.map +1 -1
  208. package/dist/components/ifx-faq.js +3 -3
  209. package/dist/components/ifx-file-upload.js +13 -6
  210. package/dist/components/ifx-file-upload.js.map +1 -1
  211. package/dist/components/ifx-filter-accordion.js +2 -2
  212. package/dist/components/ifx-filter-bar.js +2 -2
  213. package/dist/components/ifx-filter-search.js +2 -2
  214. package/dist/components/ifx-footer.js +9 -4
  215. package/dist/components/ifx-footer.js.map +1 -1
  216. package/dist/components/ifx-icon-button.js +1 -1
  217. package/dist/components/ifx-icon.js +1 -1
  218. package/dist/components/ifx-icons-preview.js +4 -4
  219. package/dist/components/ifx-indicator.js +1 -1
  220. package/dist/components/ifx-link.js +1 -1
  221. package/dist/components/ifx-list-entry.js +3 -3
  222. package/dist/components/ifx-list.js +2 -2
  223. package/dist/components/ifx-modal.js +11 -4
  224. package/dist/components/ifx-modal.js.map +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 +6 -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 +7 -2
  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 -3
  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 +10 -3
  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 +5 -5
  244. package/dist/components/ifx-sidebar-item.js +2 -2
  245. package/dist/components/ifx-sidebar.js +7 -5
  246. package/dist/components/ifx-sidebar.js.map +1 -1
  247. package/dist/components/ifx-slider.js +8 -3
  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 +9 -1
  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 +7 -2
  254. package/dist/components/ifx-stepper.js.map +1 -1
  255. package/dist/components/ifx-switch.js +6 -1
  256. package/dist/components/ifx-switch.js.map +1 -1
  257. package/dist/components/ifx-table.js +16 -11
  258. package/dist/components/ifx-table.js.map +1 -1
  259. package/dist/components/ifx-tabs.js +8 -3
  260. package/dist/components/ifx-tabs.js.map +1 -1
  261. package/dist/components/ifx-tag.js +10 -2
  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 +6 -1
  267. package/dist/components/ifx-textarea.js.map +1 -1
  268. package/dist/components/ifx-tooltip.js +10 -5
  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 +9 -1
  272. package/dist/components/ifx-tree-view.js.map +1 -1
  273. package/dist/components/{p-d1790232.js → p-0590639e.js} +2 -2
  274. package/dist/components/{p-d1790232.js.map → p-0590639e.js.map} +1 -1
  275. package/dist/components/{p-bb4de57d.js → p-0e4632d4.js} +32 -2
  276. package/dist/components/p-0e4632d4.js.map +1 -0
  277. package/dist/components/p-1ecafb97.js +18 -0
  278. package/dist/components/p-1ecafb97.js.map +1 -0
  279. package/dist/components/{p-186dacc8.js → p-331ca3f3.js} +10 -5
  280. package/dist/components/p-331ca3f3.js.map +1 -0
  281. package/dist/components/{p-c9aec5fa.js → p-39859c18.js} +9 -4
  282. package/dist/components/p-39859c18.js.map +1 -0
  283. package/dist/components/{p-357107c5.js → p-54b39a91.js} +8 -3
  284. package/dist/components/p-54b39a91.js.map +1 -0
  285. package/dist/components/{p-5e9d3450.js → p-6d95b3c1.js} +8 -2
  286. package/dist/components/p-6d95b3c1.js.map +1 -0
  287. package/dist/components/p-6ecb6a6f.js +39 -0
  288. package/dist/components/p-6ecb6a6f.js.map +1 -0
  289. package/dist/components/{p-17df0350.js → p-816b2612.js} +7 -2
  290. package/dist/components/p-816b2612.js.map +1 -0
  291. package/dist/components/{p-a8d0ef73.js → p-927d5fd1.js} +16 -11
  292. package/dist/components/p-927d5fd1.js.map +1 -0
  293. package/dist/components/{p-cd913238.js → p-940ee336.js} +3 -3
  294. package/dist/components/{p-cd913238.js.map → p-940ee336.js.map} +1 -1
  295. package/dist/components/{p-9142f93b.js → p-94da6823.js} +8 -3
  296. package/dist/components/p-94da6823.js.map +1 -0
  297. package/dist/components/{p-2a65d85a.js → p-9b236210.js} +6 -6
  298. package/dist/components/{p-2a65d85a.js.map → p-9b236210.js.map} +1 -1
  299. package/dist/components/{p-53d4339c.js → p-9ea9e274.js} +10 -2
  300. package/dist/components/p-9ea9e274.js.map +1 -0
  301. package/dist/components/{p-6d12f845.js → p-ab4beff7.js} +13 -5
  302. package/dist/components/p-ab4beff7.js.map +1 -0
  303. package/dist/components/{p-0c449780.js → p-b1ca5daf.js} +8 -3
  304. package/dist/components/p-b1ca5daf.js.map +1 -0
  305. package/dist/components/{p-67573b5f.js → p-b4630d0d.js} +11 -6
  306. package/dist/components/p-b4630d0d.js.map +1 -0
  307. package/dist/components/{p-cc5bd74b.js → p-be3268af.js} +10 -5
  308. package/dist/components/p-be3268af.js.map +1 -0
  309. package/dist/components/{p-38396fe7.js → p-c6e5f94d.js} +11 -3
  310. package/dist/components/p-c6e5f94d.js.map +1 -0
  311. package/dist/components/{p-ed739e86.js → p-cca71d97.js} +9 -2
  312. package/dist/components/p-cca71d97.js.map +1 -0
  313. package/dist/components/{p-cd833a9b.js → p-df486632.js} +8 -3
  314. package/dist/components/p-df486632.js.map +1 -0
  315. package/dist/components/{p-a4922416.js → p-e126ea6f.js} +11 -3
  316. package/dist/components/p-e126ea6f.js.map +1 -0
  317. package/dist/components/{p-b0039ef1.js → p-f9815000.js} +8 -2
  318. package/dist/components/p-f9815000.js.map +1 -0
  319. package/dist/esm/dom-utils-1988cdf1.js +18 -0
  320. package/dist/esm/dom-utils-1988cdf1.js.map +1 -0
  321. package/dist/esm/ifx-accordion_2.entry.js +8 -1
  322. package/dist/esm/ifx-accordion_2.entry.js.map +1 -1
  323. package/dist/esm/ifx-alert_2.entry.js +6 -0
  324. package/dist/esm/ifx-alert_2.entry.js.map +1 -1
  325. package/dist/esm/ifx-badge.entry.js +10 -2
  326. package/dist/esm/ifx-badge.entry.js.map +1 -1
  327. package/dist/esm/ifx-basic-table.entry.js +6 -1
  328. package/dist/esm/ifx-basic-table.entry.js.map +1 -1
  329. package/dist/esm/ifx-breadcrumb.entry.js +8 -1
  330. package/dist/esm/ifx-breadcrumb.entry.js.map +1 -1
  331. package/dist/esm/ifx-button.entry.js +6 -1
  332. package/dist/esm/ifx-button.entry.js.map +1 -1
  333. package/dist/esm/ifx-card.entry.js +8 -3
  334. package/dist/esm/ifx-card.entry.js.map +1 -1
  335. package/dist/esm/ifx-checkbox-group.entry.js +6 -1
  336. package/dist/esm/ifx-checkbox-group.entry.js.map +1 -1
  337. package/dist/esm/ifx-checkbox.entry.js +8 -3
  338. package/dist/esm/ifx-checkbox.entry.js.map +1 -1
  339. package/dist/esm/ifx-chip_3.entry.js +17 -9
  340. package/dist/esm/ifx-chip_3.entry.js.map +1 -1
  341. package/dist/esm/ifx-content-switcher.entry.js +6 -1
  342. package/dist/esm/ifx-content-switcher.entry.js.map +1 -1
  343. package/dist/esm/ifx-date-picker.entry.js +9 -2
  344. package/dist/esm/ifx-date-picker.entry.js.map +1 -1
  345. package/dist/esm/ifx-dropdown.entry.js +6 -1
  346. package/dist/esm/ifx-dropdown.entry.js.map +1 -1
  347. package/dist/esm/ifx-file-upload.entry.js +9 -2
  348. package/dist/esm/ifx-file-upload.entry.js.map +1 -1
  349. package/dist/esm/ifx-footer.entry.js +9 -4
  350. package/dist/esm/ifx-footer.entry.js.map +1 -1
  351. package/dist/esm/ifx-icon-button.entry.js +6 -1
  352. package/dist/esm/ifx-icon-button.entry.js.map +1 -1
  353. package/dist/esm/ifx-icon.entry.js +32 -2
  354. package/dist/esm/ifx-icon.entry.js.map +1 -1
  355. package/dist/esm/ifx-indicator.entry.js +7 -2
  356. package/dist/esm/ifx-indicator.entry.js.map +1 -1
  357. package/dist/esm/ifx-link.entry.js +10 -2
  358. package/dist/esm/ifx-link.entry.js.map +1 -1
  359. package/dist/esm/ifx-modal.entry.js +9 -2
  360. package/dist/esm/ifx-modal.entry.js.map +1 -1
  361. package/dist/esm/ifx-multiselect.entry.js +5 -0
  362. package/dist/esm/ifx-multiselect.entry.js.map +1 -1
  363. package/dist/esm/ifx-navbar.entry.js +5 -3
  364. package/dist/esm/ifx-navbar.entry.js.map +1 -1
  365. package/dist/esm/ifx-notification.entry.js +11 -3
  366. package/dist/esm/ifx-notification.entry.js.map +1 -1
  367. package/dist/esm/ifx-progress-bar.entry.js +8 -2
  368. package/dist/esm/ifx-progress-bar.entry.js.map +1 -1
  369. package/dist/esm/ifx-radio-button-group.entry.js +6 -1
  370. package/dist/esm/ifx-radio-button-group.entry.js.map +1 -1
  371. package/dist/esm/ifx-radio-button.entry.js +7 -2
  372. package/dist/esm/ifx-radio-button.entry.js.map +1 -1
  373. package/dist/esm/ifx-search-bar.entry.js +6 -1
  374. package/dist/esm/ifx-search-bar.entry.js.map +1 -1
  375. package/dist/esm/ifx-search-field.entry.js +10 -2
  376. package/dist/esm/ifx-search-field.entry.js.map +1 -1
  377. package/dist/esm/ifx-segmented-control.entry.js +9 -2
  378. package/dist/esm/ifx-segmented-control.entry.js.map +1 -1
  379. package/dist/esm/ifx-select.entry.js +7 -2
  380. package/dist/esm/ifx-select.entry.js.map +1 -1
  381. package/dist/esm/ifx-sidebar.entry.js +7 -5
  382. package/dist/esm/ifx-sidebar.entry.js.map +1 -1
  383. package/dist/esm/ifx-slider.entry.js +7 -2
  384. package/dist/esm/ifx-slider.entry.js.map +1 -1
  385. package/dist/esm/ifx-spinner_2.entry.js +18 -7
  386. package/dist/esm/ifx-spinner_2.entry.js.map +1 -1
  387. package/dist/esm/ifx-status.entry.js +10 -2
  388. package/dist/esm/ifx-status.entry.js.map +1 -1
  389. package/dist/esm/ifx-stepper.entry.js +7 -2
  390. package/dist/esm/ifx-stepper.entry.js.map +1 -1
  391. package/dist/esm/ifx-switch.entry.js +6 -1
  392. package/dist/esm/ifx-switch.entry.js.map +1 -1
  393. package/dist/esm/ifx-table.entry.js +7 -2
  394. package/dist/esm/ifx-table.entry.js.map +1 -1
  395. package/dist/esm/ifx-tabs.entry.js +7 -2
  396. package/dist/esm/ifx-tabs.entry.js.map +1 -1
  397. package/dist/esm/ifx-tag.entry.js +10 -2
  398. package/dist/esm/ifx-tag.entry.js.map +1 -1
  399. package/dist/esm/ifx-textarea.entry.js +6 -1
  400. package/dist/esm/ifx-textarea.entry.js.map +1 -1
  401. package/dist/esm/ifx-tooltip.entry.js +9 -4
  402. package/dist/esm/ifx-tooltip.entry.js.map +1 -1
  403. package/dist/esm/ifx-tree-view.entry.js +10 -2
  404. package/dist/esm/ifx-tree-view.entry.js.map +1 -1
  405. package/dist/esm/tracking-a7efdbcd.js +39 -0
  406. package/dist/esm/tracking-a7efdbcd.js.map +1 -0
  407. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
  408. package/dist/infineon-design-system-stencil/p-0c60ce87.entry.js +2 -0
  409. package/dist/infineon-design-system-stencil/p-0c60ce87.entry.js.map +1 -0
  410. package/dist/infineon-design-system-stencil/p-14525860.entry.js +2 -0
  411. package/dist/infineon-design-system-stencil/p-14525860.entry.js.map +1 -0
  412. package/dist/infineon-design-system-stencil/p-14842bbb.entry.js +2 -0
  413. package/dist/infineon-design-system-stencil/p-14842bbb.entry.js.map +1 -0
  414. package/dist/infineon-design-system-stencil/p-19fcf1db.entry.js +2 -0
  415. package/dist/infineon-design-system-stencil/p-19fcf1db.entry.js.map +1 -0
  416. package/dist/infineon-design-system-stencil/p-1ecafb97.js +2 -0
  417. package/dist/infineon-design-system-stencil/p-1ecafb97.js.map +1 -0
  418. package/dist/infineon-design-system-stencil/p-1fd80576.entry.js +2 -0
  419. package/dist/infineon-design-system-stencil/p-1fd80576.entry.js.map +1 -0
  420. package/dist/infineon-design-system-stencil/p-227fa186.entry.js +2 -0
  421. package/dist/infineon-design-system-stencil/p-227fa186.entry.js.map +1 -0
  422. package/dist/infineon-design-system-stencil/p-26c73456.entry.js +2 -0
  423. package/dist/infineon-design-system-stencil/p-26c73456.entry.js.map +1 -0
  424. package/dist/infineon-design-system-stencil/p-296f215f.entry.js +2 -0
  425. package/dist/infineon-design-system-stencil/p-296f215f.entry.js.map +1 -0
  426. package/dist/infineon-design-system-stencil/p-32b0dfda.entry.js +2 -0
  427. package/dist/infineon-design-system-stencil/p-32b0dfda.entry.js.map +1 -0
  428. package/dist/infineon-design-system-stencil/p-4eda4ef3.entry.js +2 -0
  429. package/dist/infineon-design-system-stencil/p-4eda4ef3.entry.js.map +1 -0
  430. package/dist/infineon-design-system-stencil/p-52420868.entry.js +2 -0
  431. package/dist/infineon-design-system-stencil/p-52420868.entry.js.map +1 -0
  432. package/dist/infineon-design-system-stencil/p-5493e6f5.entry.js +2 -0
  433. package/dist/infineon-design-system-stencil/p-5493e6f5.entry.js.map +1 -0
  434. package/dist/infineon-design-system-stencil/p-5a12d20a.entry.js +2 -0
  435. package/dist/infineon-design-system-stencil/p-5a12d20a.entry.js.map +1 -0
  436. package/dist/infineon-design-system-stencil/p-65255c40.entry.js +2 -0
  437. package/dist/infineon-design-system-stencil/p-65255c40.entry.js.map +1 -0
  438. package/dist/infineon-design-system-stencil/p-68423787.entry.js +2 -0
  439. package/dist/infineon-design-system-stencil/p-68423787.entry.js.map +1 -0
  440. package/dist/infineon-design-system-stencil/p-6d72ad32.entry.js +2 -0
  441. package/dist/infineon-design-system-stencil/p-6d72ad32.entry.js.map +1 -0
  442. package/dist/infineon-design-system-stencil/p-6ecb6a6f.js +2 -0
  443. package/dist/infineon-design-system-stencil/p-6ecb6a6f.js.map +1 -0
  444. package/dist/infineon-design-system-stencil/p-73d39ed6.entry.js +2 -0
  445. package/dist/infineon-design-system-stencil/p-73d39ed6.entry.js.map +1 -0
  446. package/dist/infineon-design-system-stencil/{p-0d3e5a0d.entry.js → p-76914839.entry.js} +2 -2
  447. package/dist/infineon-design-system-stencil/p-76914839.entry.js.map +1 -0
  448. package/dist/infineon-design-system-stencil/p-796675ed.entry.js +2 -0
  449. package/dist/infineon-design-system-stencil/p-796675ed.entry.js.map +1 -0
  450. package/dist/infineon-design-system-stencil/p-79b7d7a2.entry.js +2 -0
  451. package/dist/infineon-design-system-stencil/p-79b7d7a2.entry.js.map +1 -0
  452. package/dist/infineon-design-system-stencil/p-82c59e6b.entry.js +2 -0
  453. package/dist/infineon-design-system-stencil/p-82c59e6b.entry.js.map +1 -0
  454. package/dist/infineon-design-system-stencil/p-82dd7e7d.entry.js +2 -0
  455. package/dist/infineon-design-system-stencil/p-82dd7e7d.entry.js.map +1 -0
  456. package/dist/infineon-design-system-stencil/p-877e1d37.entry.js +2 -0
  457. package/dist/infineon-design-system-stencil/p-877e1d37.entry.js.map +1 -0
  458. package/dist/infineon-design-system-stencil/p-8a7bfe65.entry.js +2 -0
  459. package/dist/infineon-design-system-stencil/p-8a7bfe65.entry.js.map +1 -0
  460. package/dist/infineon-design-system-stencil/p-98532a0e.entry.js +2 -0
  461. package/dist/infineon-design-system-stencil/p-98532a0e.entry.js.map +1 -0
  462. package/dist/infineon-design-system-stencil/{p-7440ea9d.entry.js → p-9c28f35f.entry.js} +3 -3
  463. package/dist/infineon-design-system-stencil/p-9c28f35f.entry.js.map +1 -0
  464. package/dist/infineon-design-system-stencil/p-a0006775.entry.js +2 -0
  465. package/dist/infineon-design-system-stencil/p-a0006775.entry.js.map +1 -0
  466. package/dist/infineon-design-system-stencil/p-ac7db8d1.entry.js +2 -0
  467. package/dist/infineon-design-system-stencil/p-ac7db8d1.entry.js.map +1 -0
  468. package/dist/infineon-design-system-stencil/p-ae8110b7.entry.js +2 -0
  469. package/dist/infineon-design-system-stencil/p-ae8110b7.entry.js.map +1 -0
  470. package/dist/infineon-design-system-stencil/p-aeaa6d0b.entry.js +2 -0
  471. package/dist/infineon-design-system-stencil/p-aeaa6d0b.entry.js.map +1 -0
  472. package/dist/infineon-design-system-stencil/p-b17a0e8c.entry.js +2 -0
  473. package/dist/infineon-design-system-stencil/p-b17a0e8c.entry.js.map +1 -0
  474. package/dist/infineon-design-system-stencil/p-bb7b2a3c.entry.js +2 -0
  475. package/dist/infineon-design-system-stencil/p-bb7b2a3c.entry.js.map +1 -0
  476. package/dist/infineon-design-system-stencil/p-c164c83b.entry.js +2 -0
  477. package/dist/infineon-design-system-stencil/p-c164c83b.entry.js.map +1 -0
  478. package/dist/infineon-design-system-stencil/p-c220733b.entry.js +2 -0
  479. package/dist/infineon-design-system-stencil/p-c220733b.entry.js.map +1 -0
  480. package/dist/infineon-design-system-stencil/p-c88876dc.entry.js +2 -0
  481. package/dist/infineon-design-system-stencil/p-c88876dc.entry.js.map +1 -0
  482. package/dist/infineon-design-system-stencil/p-e0978af0.entry.js +2 -0
  483. package/dist/infineon-design-system-stencil/p-e0978af0.entry.js.map +1 -0
  484. package/dist/infineon-design-system-stencil/p-e5018880.entry.js +2 -0
  485. package/dist/infineon-design-system-stencil/p-e5018880.entry.js.map +1 -0
  486. package/dist/infineon-design-system-stencil/p-ed869b07.entry.js +2 -0
  487. package/dist/infineon-design-system-stencil/p-ed869b07.entry.js.map +1 -0
  488. package/dist/infineon-design-system-stencil/p-eeb59f76.entry.js +2 -0
  489. package/dist/infineon-design-system-stencil/p-eeb59f76.entry.js.map +1 -0
  490. package/dist/infineon-design-system-stencil/p-f3f8d603.entry.js +2 -0
  491. package/dist/infineon-design-system-stencil/p-f3f8d603.entry.js.map +1 -0
  492. package/dist/infineon-design-system-stencil/p-fb6a813b.entry.js +2 -0
  493. package/dist/infineon-design-system-stencil/p-fb6a813b.entry.js.map +1 -0
  494. package/dist/infineon-design-system-stencil/p-fe22fc31.entry.js +2 -0
  495. package/dist/infineon-design-system-stencil/p-fe22fc31.entry.js.map +1 -0
  496. package/dist/types/components/accordion/accordion.d.ts +1 -0
  497. package/dist/types/components/alert/alert.d.ts +1 -0
  498. package/dist/types/components/badge/badge.d.ts +2 -0
  499. package/dist/types/components/breadcrumb/breadcrumb.d.ts +1 -0
  500. package/dist/types/components/date-picker/date-picker.d.ts +1 -0
  501. package/dist/types/components/file-upload/file-upload.d.ts +1 -0
  502. package/dist/types/components/icon/infineonIconStencil.d.ts +3 -0
  503. package/dist/types/components/link/link.d.ts +2 -0
  504. package/dist/types/components/modal/modal.d.ts +1 -0
  505. package/dist/types/components/notification/notification.d.ts +2 -0
  506. package/dist/types/components/progress-bar/progress-bar.d.ts +1 -0
  507. package/dist/types/components/search-field/search-field.d.ts +2 -0
  508. package/dist/types/components/segmented-control/segmented-control.d.ts +1 -0
  509. package/dist/types/components/spinner/spinner.d.ts +2 -0
  510. package/dist/types/components/status/status.d.ts +2 -0
  511. package/dist/types/components/tag/tag.d.ts +2 -0
  512. package/dist/types/components/tree-view/tree-view.d.ts +2 -0
  513. package/dist/types/global/utils/dom-utils.d.ts +1 -0
  514. package/dist/types/global/utils/tracking.d.ts +9 -0
  515. package/package.json +1 -1
  516. package/dist/components/p-0c449780.js.map +0 -1
  517. package/dist/components/p-17df0350.js.map +0 -1
  518. package/dist/components/p-186dacc8.js.map +0 -1
  519. package/dist/components/p-357107c5.js.map +0 -1
  520. package/dist/components/p-38396fe7.js.map +0 -1
  521. package/dist/components/p-53d4339c.js.map +0 -1
  522. package/dist/components/p-5e9d3450.js.map +0 -1
  523. package/dist/components/p-67573b5f.js.map +0 -1
  524. package/dist/components/p-6d12f845.js.map +0 -1
  525. package/dist/components/p-9142f93b.js.map +0 -1
  526. package/dist/components/p-a4922416.js.map +0 -1
  527. package/dist/components/p-a8d0ef73.js.map +0 -1
  528. package/dist/components/p-b0039ef1.js.map +0 -1
  529. package/dist/components/p-bb4de57d.js.map +0 -1
  530. package/dist/components/p-c9aec5fa.js.map +0 -1
  531. package/dist/components/p-cc5bd74b.js.map +0 -1
  532. package/dist/components/p-cd833a9b.js.map +0 -1
  533. package/dist/components/p-ed739e86.js.map +0 -1
  534. package/dist/infineon-design-system-stencil/p-061bfdb1.entry.js +0 -2
  535. package/dist/infineon-design-system-stencil/p-061bfdb1.entry.js.map +0 -1
  536. package/dist/infineon-design-system-stencil/p-06bfabcf.entry.js +0 -2
  537. package/dist/infineon-design-system-stencil/p-06bfabcf.entry.js.map +0 -1
  538. package/dist/infineon-design-system-stencil/p-0d3e5a0d.entry.js.map +0 -1
  539. package/dist/infineon-design-system-stencil/p-1048ee19.entry.js +0 -2
  540. package/dist/infineon-design-system-stencil/p-1048ee19.entry.js.map +0 -1
  541. package/dist/infineon-design-system-stencil/p-142878ee.entry.js +0 -2
  542. package/dist/infineon-design-system-stencil/p-142878ee.entry.js.map +0 -1
  543. package/dist/infineon-design-system-stencil/p-17f3f2f5.entry.js +0 -2
  544. package/dist/infineon-design-system-stencil/p-17f3f2f5.entry.js.map +0 -1
  545. package/dist/infineon-design-system-stencil/p-2006c7a0.entry.js +0 -2
  546. package/dist/infineon-design-system-stencil/p-2006c7a0.entry.js.map +0 -1
  547. package/dist/infineon-design-system-stencil/p-292cff35.entry.js +0 -2
  548. package/dist/infineon-design-system-stencil/p-292cff35.entry.js.map +0 -1
  549. package/dist/infineon-design-system-stencil/p-2d89c5e0.entry.js +0 -2
  550. package/dist/infineon-design-system-stencil/p-2d89c5e0.entry.js.map +0 -1
  551. package/dist/infineon-design-system-stencil/p-33a4fd0a.entry.js +0 -2
  552. package/dist/infineon-design-system-stencil/p-33a4fd0a.entry.js.map +0 -1
  553. package/dist/infineon-design-system-stencil/p-37d6c639.entry.js +0 -2
  554. package/dist/infineon-design-system-stencil/p-37d6c639.entry.js.map +0 -1
  555. package/dist/infineon-design-system-stencil/p-3d23deba.entry.js +0 -2
  556. package/dist/infineon-design-system-stencil/p-3d23deba.entry.js.map +0 -1
  557. package/dist/infineon-design-system-stencil/p-3ff96710.entry.js +0 -2
  558. package/dist/infineon-design-system-stencil/p-3ff96710.entry.js.map +0 -1
  559. package/dist/infineon-design-system-stencil/p-47a3e831.entry.js +0 -2
  560. package/dist/infineon-design-system-stencil/p-47a3e831.entry.js.map +0 -1
  561. package/dist/infineon-design-system-stencil/p-487d2155.entry.js +0 -2
  562. package/dist/infineon-design-system-stencil/p-487d2155.entry.js.map +0 -1
  563. package/dist/infineon-design-system-stencil/p-49252616.entry.js +0 -2
  564. package/dist/infineon-design-system-stencil/p-49252616.entry.js.map +0 -1
  565. package/dist/infineon-design-system-stencil/p-5b5c144f.entry.js +0 -2
  566. package/dist/infineon-design-system-stencil/p-5b5c144f.entry.js.map +0 -1
  567. package/dist/infineon-design-system-stencil/p-65fe2246.entry.js +0 -2
  568. package/dist/infineon-design-system-stencil/p-65fe2246.entry.js.map +0 -1
  569. package/dist/infineon-design-system-stencil/p-676fb63a.entry.js +0 -2
  570. package/dist/infineon-design-system-stencil/p-676fb63a.entry.js.map +0 -1
  571. package/dist/infineon-design-system-stencil/p-6790d912.entry.js +0 -2
  572. package/dist/infineon-design-system-stencil/p-6790d912.entry.js.map +0 -1
  573. package/dist/infineon-design-system-stencil/p-6bdca580.entry.js +0 -2
  574. package/dist/infineon-design-system-stencil/p-6bdca580.entry.js.map +0 -1
  575. package/dist/infineon-design-system-stencil/p-702a48f8.entry.js +0 -2
  576. package/dist/infineon-design-system-stencil/p-702a48f8.entry.js.map +0 -1
  577. package/dist/infineon-design-system-stencil/p-741ee6fd.entry.js +0 -2
  578. package/dist/infineon-design-system-stencil/p-741ee6fd.entry.js.map +0 -1
  579. package/dist/infineon-design-system-stencil/p-7440ea9d.entry.js.map +0 -1
  580. package/dist/infineon-design-system-stencil/p-885adc48.entry.js +0 -2
  581. package/dist/infineon-design-system-stencil/p-885adc48.entry.js.map +0 -1
  582. package/dist/infineon-design-system-stencil/p-9149a20a.entry.js +0 -2
  583. package/dist/infineon-design-system-stencil/p-9149a20a.entry.js.map +0 -1
  584. package/dist/infineon-design-system-stencil/p-959285a7.entry.js +0 -2
  585. package/dist/infineon-design-system-stencil/p-959285a7.entry.js.map +0 -1
  586. package/dist/infineon-design-system-stencil/p-9fc0f50d.entry.js +0 -2
  587. package/dist/infineon-design-system-stencil/p-9fc0f50d.entry.js.map +0 -1
  588. package/dist/infineon-design-system-stencil/p-aadd1a9d.entry.js +0 -2
  589. package/dist/infineon-design-system-stencil/p-aadd1a9d.entry.js.map +0 -1
  590. package/dist/infineon-design-system-stencil/p-acf0f4ed.entry.js +0 -2
  591. package/dist/infineon-design-system-stencil/p-acf0f4ed.entry.js.map +0 -1
  592. package/dist/infineon-design-system-stencil/p-ad1ec9d6.entry.js +0 -2
  593. package/dist/infineon-design-system-stencil/p-ad1ec9d6.entry.js.map +0 -1
  594. package/dist/infineon-design-system-stencil/p-b637c44c.entry.js +0 -2
  595. package/dist/infineon-design-system-stencil/p-b637c44c.entry.js.map +0 -1
  596. package/dist/infineon-design-system-stencil/p-b73a5f18.entry.js +0 -2
  597. package/dist/infineon-design-system-stencil/p-b73a5f18.entry.js.map +0 -1
  598. package/dist/infineon-design-system-stencil/p-c2791360.entry.js +0 -2
  599. package/dist/infineon-design-system-stencil/p-c2791360.entry.js.map +0 -1
  600. package/dist/infineon-design-system-stencil/p-c5a785d7.entry.js +0 -2
  601. package/dist/infineon-design-system-stencil/p-c5a785d7.entry.js.map +0 -1
  602. package/dist/infineon-design-system-stencil/p-c84ef603.entry.js +0 -2
  603. package/dist/infineon-design-system-stencil/p-c84ef603.entry.js.map +0 -1
  604. package/dist/infineon-design-system-stencil/p-dd28f3a1.entry.js +0 -2
  605. package/dist/infineon-design-system-stencil/p-dd28f3a1.entry.js.map +0 -1
  606. package/dist/infineon-design-system-stencil/p-e98d2280.entry.js +0 -2
  607. package/dist/infineon-design-system-stencil/p-e98d2280.entry.js.map +0 -1
  608. package/dist/infineon-design-system-stencil/p-ecc17497.entry.js +0 -2
  609. package/dist/infineon-design-system-stencil/p-ecc17497.entry.js.map +0 -1
  610. package/dist/infineon-design-system-stencil/p-ef6d0dc6.entry.js +0 -2
  611. package/dist/infineon-design-system-stencil/p-ef6d0dc6.entry.js.map +0 -1
  612. package/dist/infineon-design-system-stencil/p-f25f014d.entry.js +0 -2
  613. package/dist/infineon-design-system-stencil/p-f25f014d.entry.js.map +0 -1
  614. package/dist/infineon-design-system-stencil/p-f338fb85.entry.js +0 -2
  615. package/dist/infineon-design-system-stencil/p-f338fb85.entry.js.map +0 -1
@@ -1,4 +1,6 @@
1
1
  import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
2
+ import { t as trackComponent } from './p-6ecb6a6f.js';
3
+ import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
2
4
  import { c as classNames } from './p-5cdc6210.js';
3
5
 
4
6
  const linkCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex}.link{display:inline-flex;align-items:center;font-weight:400;font-size:1rem;text-decoration:none;color:#0A8276;gap:8px;line-height:1.6;font-family:var(--ifx-font-family)}.link:hover{cursor:pointer}.link:focus{outline-width:2px;outline-style:solid;outline-color:#0A8276;outline-offset:4px;border-radius:3px}.link.bold{font-weight:600}.link.bold:hover{text-decoration:underline}.link.bold:active{color:#08665C;font-style:normal;font-weight:600;text-decoration:underline}.link.underlined{text-decoration:underline;text-decoration-color:#0A8276;color:#1D1D1D;text-underline-offset:8px}.link.underlined:hover{color:#0A8276}.link.underlined:active{color:#0A8276}.link.underlined:disabled,.link.underlined.disabled{text-decoration-color:#BFBBBB}.link.title{text-decoration:none;font-weight:600;color:#1D1D1D}.link.title:hover{color:#0A8276}.link.title:active{color:#08665C}.link.menu{font-weight:400;font-style:normal;line-height:26px;color:#1D1D1D}.link.menu:hover{color:#0A8276}.link.menu:active{color:#08665C}.link.small{font-size:0.875rem}.link.medium{font-size:1rem}.link.large{font-size:1.125rem}.link.extraLarge{font-size:1.25rem}.link.underline{text-decoration:underline}.link:disabled,.link.disabled{color:#BFBBBB;cursor:default;pointer-events:none}";
@@ -38,8 +40,13 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends H {
38
40
  event.preventDefault();
39
41
  }
40
42
  }
43
+ componentWillLoad() {
44
+ if (!isNestedInIfxComponent(this.el)) {
45
+ trackComponent('ifx-link');
46
+ }
47
+ }
41
48
  render() {
42
- return (h("a", { key: 'f9fa681a791a4184c448d7072425c014a83020bd', role: "link", "aria-label": this.ariaLabel, "aria-disabled": this.disabled || !this.internalHref, href: this.disabled ? undefined : this.internalHref, download: this.download, target: this.internalTarget, class: this.linkClassNames() }, h("slot", { key: '2e6a023c4693eedfa03e8440e5e62e76386ec2ef' })));
49
+ return (h("a", { key: '34501f54b71028a9886ba198979aa55f88171921', role: "link", "aria-label": this.ariaLabel, "aria-disabled": this.disabled || !this.internalHref, href: this.disabled ? undefined : this.internalHref, download: this.download, target: this.internalTarget, class: this.linkClassNames() }, h("slot", { key: '5d1e1ff267036c8dfc2fbef139db404d9edf4300' })));
43
50
  }
44
51
  getSizeClass() {
45
52
  const small = this.size === 's' ? 'small' : null;
@@ -87,6 +94,7 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends H {
87
94
  linkClassNames() {
88
95
  return classNames('link', 'primary', this.getVariantClass(), this.getSizeClass(), this.disabled ? 'disabled' : '');
89
96
  }
97
+ get el() { return this; }
90
98
  static get style() { return IfxLinkStyle0; }
91
99
  }, [1, "ifx-link", {
92
100
  "href": [1],
@@ -116,4 +124,4 @@ function defineCustomElement() {
116
124
 
117
125
  export { Link as L, defineCustomElement as d };
118
126
 
119
- //# sourceMappingURL=p-53d4339c.js.map
127
+ //# sourceMappingURL=p-9ea9e274.js.map
@@ -0,0 +1 @@
1
+ {"file":"p-9ea9e274.js","mappings":"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","names":[],"sources":["src/components/link/link.scss?tag=ifx-link&encapsulation=shadow","src/components/link/link.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.link {\n display: inline-flex;\n align-items: center;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n text-decoration: none;\n color: tokens.$ifxColorOcean500;\n gap: tokens.$ifxSpace100;\n line-height: 1.6;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &:hover { \n cursor: pointer;\n }\n\n &:focus {\n outline-width: 2px;\n outline-style: solid;\n outline-color: #0A8276;\n outline-offset: 4px;\n border-radius: 3px;\n }\n\n &.bold {\n font-weight: tokens.$ifxFontWeightSemibold;\n\n &:hover {\n text-decoration: underline;\n }\n\n &:active {\n color: #08665C;\n font-style: normal;\n font-weight: 600;\n text-decoration: underline;\n }\n\n }\n\n &.underlined {\n text-decoration: underline;\n text-decoration-color: tokens.$ifxColorOcean500;\n color: #1D1D1D;\n text-underline-offset: 8px;\n \n &:hover {\n color: tokens.$ifxColorOcean500;;\n }\n \n &:active {\n color: #0A8276;\n }\n\n &:disabled,\n &.disabled {\n text-decoration-color: tokens.$ifxColorEngineering300;\n }\n }\n\n &.title {\n text-decoration: none;\n font-weight: tokens.$ifxFontWeightSemibold;\n color: #1D1D1D;\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n }\n\n &:active {\n color: #08665C;\n }\n }\n\n &.menu {\n font-weight: 400;\n font-style: normal;\n line-height: 26px;\n color: #1D1D1D;\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n }\n\n &:active {\n color: #08665C;\n }\n }\n\n &.small {\n font-size: tokens.$ifxFontSizeS;\n }\n\n &.medium {\n font-size: tokens.$ifxFontSizeM;\n }\n\n &.large {\n font-size: tokens.$ifxFontSizeL;\n }\n\n &.extraLarge {\n font-size: tokens.$ifxFontSizeXl;\n }\n\n &.underline {\n text-decoration: underline;\n }\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n cursor: default;\n pointer-events: none;\n }\n\n}","import { Component, Prop, h, State, Element } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport classNames from 'classnames';\n \n@Component({\n tag: 'ifx-link',\n styleUrl: 'link.scss',\n shadow: true\n})\n\nexport class Link {\n @Element() el;\n @Prop() href: string = undefined;\n @Prop() target: string = '_self';\n @Prop() variant: string = 'bold';\n @Prop() size: string;\n @Prop() disabled: boolean = false;\n @Prop() download: string;\n @Prop() ariaLabel: string | null;\n @State() internalHref: string ='';\n @State() internalTarget: string = '';\n @State() internalVariant: string = '';\n\n setInternalStates() {\n if(this.href){\n this.internalHref = this.href.trim();\n }else{\n this.internalHref = undefined;\n }\n this.internalTarget = this.target.trim();\n this.internalVariant = this.variant.trim().toLowerCase();\n }\n\n componentWillRender(){\n this.setInternalStates();\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) {\n event.preventDefault();\n } else if (event.key === 'Enter') {\n event.preventDefault();\n }\n }\n\n componentWillLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n trackComponent('ifx-link')\n }\n }\n\n render() {\n return (\n <a\n role=\"link\"\n aria-label={this.ariaLabel}\n aria-disabled={this.disabled || !this.internalHref}\n href={this.disabled ? undefined : this.internalHref}\n download={this.download}\n target={this.internalTarget}\n class={this.linkClassNames()}>\n <slot></slot>\n </a>)\n }\n\n getSizeClass() {\n const small = this.size === 's' ? 'small' : null;\n const medium = this.size === 'm' ? 'medium' : null;\n const large = this.size === 'l' ? 'large' : null;\n const extraLarge = this.size === 'xl' ? 'extraLarge' : null;\n\n if (small) {\n return small;\n } else if (medium) {\n return medium;\n } else if (large) {\n return large;\n } else if (extraLarge && this.internalVariant === 'underlined') {\n return 'large';\n } else if (extraLarge && this.internalVariant !== 'underlined') {\n return extraLarge;\n } else return \"\";\n }\n\n getVariantClass() {\n const bold = this.internalVariant === 'bold' ? 'bold' : null;\n const title = this.internalVariant === 'title' ? 'title' : null;\n const underlined = this.internalVariant === 'underlined' ? 'underlined' : null;\n const menu = this.internalVariant === 'menu' ? 'menu' : null;\n\n if (bold) {\n return bold\n } else if (title) {\n return title;\n } else if (underlined) {\n return underlined;\n } else if (menu) {\n return menu;\n } else return bold;\n }\n\n linkClassNames() {\n return classNames(\n 'link',\n 'primary',\n this.getVariantClass(),\n this.getSizeClass(),\n this.disabled ? 'disabled' : '',\n );\n }\n}"],"version":3}
@@ -1,6 +1,8 @@
1
1
  import { p as proxyCustomElement, H, h, d as Host } from './p-f8e6a4ef.js';
2
- import { d as defineCustomElement$2 } from './p-bb4de57d.js';
3
- import { d as defineCustomElement$1 } from './p-53d4339c.js';
2
+ import { t as trackComponent } from './p-6ecb6a6f.js';
3
+ import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
4
+ import { d as defineCustomElement$2 } from './p-0e4632d4.js';
5
+ import { d as defineCustomElement$1 } from './p-9ea9e274.js';
4
6
 
5
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}}";
6
8
  const IfxNotificationStyle0 = notificationCss;
@@ -13,6 +15,11 @@ const Notification = /*@__PURE__*/ proxyCustomElement(class Notification extends
13
15
  this.variant = 'success';
14
16
  this.linkTarget = '_blank';
15
17
  }
18
+ componentWillLoad() {
19
+ if (!isNestedInIfxComponent(this.el)) {
20
+ trackComponent('ifx-notification');
21
+ }
22
+ }
16
23
  getClassName() {
17
24
  switch (this.variant) {
18
25
  case 'success':
@@ -28,9 +35,10 @@ const Notification = /*@__PURE__*/ proxyCustomElement(class Notification extends
28
35
  }
29
36
  }
30
37
  render() {
31
- return (h(Host, { key: 'e2ab3e7cd454516b3c9bacded8acd514f8acf6bb' }, h("div", { key: 'd697282d6b47fed553f2130b63b32858adb6e69a', class: "ifx-notification__wrapper " + this.getClassName() }, h("div", { key: '9380c5dc81b6be5fe94f135e68af584c0be33999', class: "ifx-notification__icon" }, h("ifx-icon", { key: 'd93f47c6edf12e5578f681a1e2833e13cf316a73', icon: this.icon })), h("div", { key: 'cb4074d0f34c00043da6a25d86e9a7f0026fc0f3', class: "ifx-notification__body" }, h("div", { key: '8d6c5a5fb3e7dc4a17fec88b0f0e5818c5c4dacd', class: "ifx-notification__slot" }, h("slot", { key: 'ddc531bff82a4f0503dc5a31a44936bc06278a30' })), this.linkText && this.linkHref &&
32
- h("div", { key: '5a04c972588dcad668fe4f177b2dfe1073ea1a8a', class: "ifx-notification__link" }, h("ifx-link", { key: 'e1a479722c277eec76e5d2f77fd1308047d1ed15', href: this.linkHref, target: this.linkTarget }, this.linkText, h("ifx-icon", { key: '68d0ab0162a138cafdca9bfe26ae321b510ed8fe', icon: "arrow-right-16" })))))));
38
+ return (h(Host, { key: 'f4778d8c9d176d004af0356716b3f7dd6bdaaf2e' }, h("div", { key: 'be795f7d0819ad1f6847a5dd44e5c4d87f712956', class: "ifx-notification__wrapper " + this.getClassName() }, h("div", { key: 'c016988ac10a8f5b5bd7c808eb9a32ab624a88ec', class: "ifx-notification__icon" }, h("ifx-icon", { key: '52b0087e6be1fb1a2a53b7dc911a1f9cb82e241c', icon: this.icon })), h("div", { key: 'b474db0e0f1e233439efd5c296902a6e003f4da7', class: "ifx-notification__body" }, h("div", { key: 'ffa148a9926bb29a4b111e64c9a9a3f57f41a5a2', class: "ifx-notification__slot" }, h("slot", { key: '570ec61f92ff65c2cac316c6edcf2df46276ae51' })), this.linkText && this.linkHref &&
39
+ h("div", { key: 'dad0818ba2662f839a68a34e57a48e653fbae0c4', class: "ifx-notification__link" }, h("ifx-link", { key: '595e62d8ebeb1e71bbd5e963e06a7d8f6beffbfa', href: this.linkHref, target: this.linkTarget }, this.linkText, h("ifx-icon", { key: '63a580c022a66faaf91f7f92ff23d61158944555', icon: "arrow-right-16" })))))));
33
40
  }
41
+ get el() { return this; }
34
42
  static get style() { return IfxNotificationStyle0; }
35
43
  }, [1, "ifx-notification", {
36
44
  "icon": [1],
@@ -65,4 +73,4 @@ function defineCustomElement() {
65
73
 
66
74
  export { Notification as N, defineCustomElement as d };
67
75
 
68
- //# sourceMappingURL=p-6d12f845.js.map
76
+ //# sourceMappingURL=p-ab4beff7.js.map
@@ -0,0 +1 @@
1
+ {"file":"p-ab4beff7.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,uoDAAuoD,CAAC;AAChqD,8BAAe,eAAe;;MCSjB,YAAY;IALzB;;;;QAQU,YAAO,GAAwB,SAAS,CAAC;QAGzC,eAAU,GAAW,QAAQ,CAAC;KA+CvC;IA7CC,iBAAiB;QACf,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,cAAc,CAAC,kBAAkB,CAAC,CAAA;SACnC;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';\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 trackComponent('ifx-notification')\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,6 +1,8 @@
1
1
  import { p as proxyCustomElement, H, h, d as Host } from './p-f8e6a4ef.js';
2
+ import { t as trackComponent } from './p-6ecb6a6f.js';
3
+ import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
2
4
  import { c as classNames } from './p-5cdc6210.js';
3
- import { d as defineCustomElement$1 } from './p-bb4de57d.js';
5
+ import { d as defineCustomElement$1 } from './p-0e4632d4.js';
4
6
 
5
7
  const iconButtonCss = ":host{display:inline-flex}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px;gap:8px;color:#FFFFFF;flex-direction:row;font-weight:600;border-radius:1px;line-height:1.5rem;outline:none;font-family:var(--ifx-font-family);text-decoration:none;user-select:none;border:1px solid rgba(0, 0, 0, 0);font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}.btn:not(.disabled){cursor:pointer}.btn-primary{color:#FFFFFF;background-color:#0A8276}.btn-primary:disabled,.btn-primary.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary{color:#0A8276;background-color:#FFFFFF;border-color:#0A8276}.btn-secondary:disabled,.btn-secondary.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary{background-color:transparent;color:#1D1D1D}.btn-tertiary:disabled,.btn-tertiary.disabled{color:#BFBBBB;pointer-events:none}.btn.icon-button{min-width:initial;min-height:initial;width:40px;height:40px;padding:0;justify-content:center}.btn.icon-button.btn-round{border-radius:100px}.btn.icon-button.btn-square{border-radius:1px}.btn.icon-button.btn-s{width:32px;height:32px;padding:8px}.btn.icon-button.btn-l{width:48px;height:48px;padding:8px}.btn.btn-primary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-primary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C}.btn.btn-primary:not(:disabled,.disabled):active,.btn.btn-primary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C;color:#FFFFFF}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-tertiary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;color:#1D1D1D;box-shadow:0 0 0 0px #FFFFFF, 0 0 0 2px #0A8276}.btn.btn-tertiary:not(:disabled,.disabled):hover{color:#0A8276}.btn.btn-tertiary:not(:disabled,.disabled):active,.btn.btn-tertiary:not(:disabled,.disabled).active{color:#08665C}";
6
8
  const IfxIconButtonStyle0 = iconButtonCss;
@@ -29,9 +31,12 @@ const IconButton = /*@__PURE__*/ proxyCustomElement(class IconButton extends H {
29
31
  this.shape = 'round';
30
32
  }
31
33
  this.internalIcon = this.icon;
34
+ if (!isNestedInIfxComponent(this.el)) {
35
+ trackComponent('ifx-icon-button');
36
+ }
32
37
  }
33
38
  render() {
34
- return (h(Host, { key: '2ab6931d60697470c7e3bebc06ab238b2383fe0b', "aria-disabled": this.disabled, "aria-label": this.ariaLabel }, this.href ? (h("a", { ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.href : undefined, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined }, h("ifx-icon", { icon: this.internalIcon }))) : (h("button", { class: this.getClassNames(), type: "button", disabled: this.disabled }, h("ifx-icon", { icon: this.internalIcon })))));
39
+ return (h(Host, { key: '1ccbca77a6102927f7206f9762e44be10a17dd0f', "aria-disabled": this.disabled, "aria-label": this.ariaLabel }, this.href ? (h("a", { ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.href : undefined, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined }, h("ifx-icon", { icon: this.internalIcon }))) : (h("button", { class: this.getClassNames(), type: "button", disabled: this.disabled }, h("ifx-icon", { icon: this.internalIcon })))));
35
40
  }
36
41
  getVariantClass() {
37
42
  return `${this.variant}` === "secondary"
@@ -96,4 +101,4 @@ function defineCustomElement() {
96
101
 
97
102
  export { IconButton as I, defineCustomElement as d };
98
103
 
99
- //# sourceMappingURL=p-0c449780.js.map
104
+ //# sourceMappingURL=p-b1ca5daf.js.map
@@ -0,0 +1 @@
1
+ {"file":"p-b1ca5daf.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,w4EAAw4E,CAAC;AAC/5E,4BAAe,aAAa;;MCUf,UAAU;IANvB;;;;QAYU,WAAM,GAAW,OAAO,CAAC;QACzB,UAAK,GAAW,OAAO,CAAC;KA4FjC;IApFC,WAAW,CAAC,KAAY;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,wBAAwB,EAAE,CAAC;SAClC;KACF;IAGD,UAAU,CAAC,OAAe;QACxB,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;KAC7B;IAGD,MAAM,QAAQ;QACZ,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;KAC/B;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;YACrB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;SACtB;QACD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;QAC9B,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,cAAc,CAAC,iBAAiB,CAAC,CAAA;SAClC;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,sEACY,IAAI,CAAC,QAAQ,gBAChB,IAAI,CAAC,SAAS,IACzB,IAAI,CAAC,IAAI,IACR,SACE,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,IAAI,GAAG,SAAS,EAC5C,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,IAEjE,gBAAU,IAAI,EAAE,IAAI,CAAC,YAAY,GAAa,CAC5C,KAEJ,cACE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAC3B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,gBAAU,IAAI,EAAE,IAAI,CAAC,YAAY,GAAa,CACvC,CACV,CACI,EACP;KACH;IAED,eAAe;QACb,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,WAAW;cACpC,WAAW;cACX,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,UAAU;kBAC9B,UAAU;kBACV,SAAS,CAAC;KACjB;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,iBAAiB,EACjB,OAAO,IAAI,CAAC,KAAK,EAAE,EACnB,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/icon-button/icon-button.scss?tag=ifx-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-flex;\n}\n\n.btn {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: tokens.$ifxSize500;\n padding: 8px;\n gap: tokens.$ifxSpace100;\n color: tokens.$ifxColorBaseWhite;\n flex-direction: row;\n font-weight: tokens.$ifxFontWeightSemibold;\n border-radius: tokens.$ifxBorderRadius12;\n line-height: tokens.$ifxLineHeightM;\n outline: none;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n text-decoration: none;\n user-select: none;\n border: 1px solid rgba(0, 0, 0, 0);\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}\n\n.btn:not(.disabled) {\n cursor: pointer;\n}\n\n.btn-primary {\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\n.btn-secondary {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border-color: 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 {\n background-color: transparent;\n color: tokens.$ifxColorBaseBlack;\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n }\n}\n\n\n.btn {\n\n &.icon-button {\n min-width: initial;\n min-height: initial;\n width: tokens.$ifxSize500;\n height: tokens.$ifxSize500;\n padding: 0;\n justify-content: center;\n\n &.btn-round {\n border-radius: 100px;\n }\n\n &.btn-square {\n border-radius: tokens.$ifxBorderRadius12;\n }\n\n &.btn-s {\n width: tokens.$ifxSize400;\n height: tokens.$ifxSize400;\n padding: 8px;\n }\n\n\n &.btn-l {\n width: tokens.$ifxSize600;\n height: tokens.$ifxSize600;\n padding: 8px;\n }\n }\n\n &.btn-primary: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 border-color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n border-color: tokens.$ifxColorOcean700;\n }\n }\n\n\n &.btn-secondary: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 border-color: tokens.$ifxColorOcean600;\n color: tokens.$ifxColorBaseWhite;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n border-color: tokens.$ifxColorOcean700;\n }\n }\n\n &.btn-tertiary:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n color: tokens.$ifxColorBaseBlack;\n box-shadow: 0 0 0 0px tokens.$ifxColorBaseWhite, 0 0 0 2px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean600;\n }\n }\n}","import { Component, Prop, h, Host, Method, Element, Listen, Watch, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-icon-button',\n styleUrl: 'icon-button.scss',\n shadow: true,\n})\n\nexport class IconButton {\n @Prop() variant: 'primary' | 'secondary' | 'tertiary';\n @Prop() size: string;\n @Prop() disabled: boolean;\n @Prop() icon: string;\n @Prop() href: string;\n @Prop() target: string = '_self';\n @Prop() shape: string = 'round';\n @Prop() ariaLabel: string | null;\n @State() internalIcon: string;\n @Element() el;\n\n private focusableElement: HTMLElement;\n \n @Listen('click', { capture: true })\n handleClick(event: Event) {\n if (this.disabled) {\n event.stopImmediatePropagation();\n }\n }\n\n @Watch('icon')\n updateIcon(newIcon: string) { \n this.internalIcon = newIcon;\n }\n\n @Method()\n async setFocus() {\n this.focusableElement.focus();\n }\n\n componentWillLoad() {\n if (this.shape === '') {\n this.shape = 'round';\n }\n this.internalIcon = this.icon;\n if(!isNestedInIfxComponent(this.el)) { \n trackComponent('ifx-icon-button')\n }\n }\n\n render() {\n return (\n <Host \n aria-disabled={this.disabled}\n aria-label={this.ariaLabel}> \n {this.href ? (\n <a\n ref={(el) => (this.focusableElement = el)}\n class={this.getClassNames()}\n href={!this.disabled ? this.href : undefined} \n target={this.target}\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n >\n <ifx-icon icon={this.internalIcon}></ifx-icon>\n </a>\n ) : (\n <button\n class={this.getClassNames()}\n type=\"button\"\n disabled={this.disabled}\n >\n <ifx-icon icon={this.internalIcon}></ifx-icon>\n </button>\n )}\n </Host>\n );\n }\n\n getVariantClass() {\n return `${this.variant}` === \"secondary\"\n ? `secondary`\n : `${this.variant}` === 'tertiary'\n ? `tertiary`\n : `primary`;\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 icon-button',\n `btn-${this.shape}`,\n this.size && `btn-${this.getSizeClass()}`,\n `btn-${this.getVariantClass()}`,\n this.disabled ? 'disabled' : ''\n );\n }\n}"],"version":3}
@@ -1,5 +1,7 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
2
- import { d as defineCustomElement$1 } from './p-bb4de57d.js';
2
+ import { t as trackComponent } from './p-6ecb6a6f.js';
3
+ import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
4
+ import { d as defineCustomElement$1 } from './p-0e4632d4.js';
3
5
 
4
6
  const textFieldCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex}.textInput__container{display:flex;flex-direction:column;align-items:flex-start;padding:0px;width:100%;flex:none;order:0;align-self:stretch;flex-grow:0;font-family:var(--ifx-font-family)}.textInput__container.disabled .textInput__top-wrapper label{color:#575352}.textInput__container.disabled .textInput__bottom-wrapper input{border:1px solid #575352;background-color:#EEEDED}.textInput__container.disabled .textInput__bottom-wrapper input::placeholder{font-size:0.875rem;color:#575352}.textInput__container .textInput__top-wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:0px;gap:4px;flex:none;order:0;align-self:stretch;flex-grow:0}.textInput__container .textInput__top-wrapper label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;color:#1D1D1D;flex:none;order:0;flex-grow:0}.textInput__container .textInput__top-wrapper label .optional-required{margin-left:4px}.textInput__container .textInput__top-wrapper label .optional{margin-left:4px}.textInput__container .textInput__top-wrapper label .required{margin-left:4px}.textInput__container .textInput__top-wrapper label .required.error{color:#CD002F}.textInput__container .input-container{position:relative;display:flex;align-items:center;width:100%}.textInput__container .textInput__bottom-wrapper{flex-grow:1;position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:4px;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper input{width:100%;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;padding:8px 16px;gap:8px;height:40px;background-color:#FFFFFF;color:#1D1D1D;font-family:var(--ifx-font-family);font-size:1rem;line-height:1.5rem;border:1px solid #8D8786;border-radius:1px;flex:none;order:0;align-self:stretch;flex-grow:0;text-overflow:ellipsis}.textInput__container .textInput__bottom-wrapper input.input-s{height:36px;font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.input-s::placeholder{font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.icon{padding-left:40px}.textInput__container .textInput__bottom-wrapper input.error{border:1px solid #CD002F}.textInput__container .textInput__bottom-wrapper input.error:focus{outline:none}.textInput__container .textInput__bottom-wrapper input.success{border:1px solid #4CA460}.textInput__container .textInput__bottom-wrapper input.success:focus{outline:none}.textInput__container .textInput__bottom-wrapper input:focus:not(.error,.success){outline:none;border:1px solid #0A8276}.textInput__container .textInput__bottom-wrapper input:hover:not(:disabled,:focus,.error,.success){border:1px solid #575352}.textInput__container .textInput__bottom-wrapper input::placeholder{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;color:#8D8786;flex:none;order:1;flex-grow:1}.textInput__container .textInput__bottom-wrapper .input-icon{position:absolute;top:50%;transform:translateY(-50%);left:16px;transition:0.3s;color:#8D8786}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0.2px;color:#1D1D1D;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.error{color:#CD002F}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.disabled{color:#575352}.textInput__container .delete-icon{position:absolute;right:16px}.textInput__container .delete-icon :hover{cursor:pointer}";
5
7
  const IfxTextFieldStyle0 = textFieldCss;
@@ -54,15 +56,18 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends H {
54
56
  this.internals.setFormValue("");
55
57
  }
56
58
  componentWillLoad() {
59
+ if (!isNestedInIfxComponent(this.el)) {
60
+ trackComponent('ifx-text-field');
61
+ }
57
62
  this.handleTypeProp();
58
63
  }
59
64
  render() {
60
- return (h("div", { key: '597efeba3e10b6550f1b8de39502b85bb170c873', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, h("div", { key: '4b705913732e503ee735081aafa6336b8d4435a7', class: "textInput__top-wrapper" }, h("label", { key: '33ee2954bbe2cfde7957b28dda1aee099f9d81b0', htmlFor: this.internalId }, h("slot", { key: 'a38c2c00e1c236c036cf2d64bc7a28db2afe45a2' }), this.optional && this.required ? (h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (h("span", { class: "optional" }, "(optional)")) : this.required ? (h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), h("div", { key: '94ba742c9ec8a04df44d5bf14e03f91401688367', class: "textInput__bottom-wrapper" }, h("div", { key: '6dd7c491a798dae351f1cd25f085a473f83a6eb9', class: "input-container" }, this.icon && (h("ifx-icon", { key: 'f80c38244c33fd0e3337d50dc40ed3c02693348a', class: 'input-icon', icon: this.icon })), h("input", { key: 'a639ec62f30d100b35c452e2bbbfa5abe134eed6', ref: (el) => (this.inputElement = el), disabled: this.disabled, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
65
+ return (h("div", { key: '90c91e0f48e309cb22ec297c8a58d3b4cf463b47', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, h("div", { key: '0253d226dd7a7d403cadd756c41e8f64abc3c5fa', class: "textInput__top-wrapper" }, h("label", { key: '82f3fc69f50222c97dcf3ac8e721b1fa1009775b', htmlFor: this.internalId }, h("slot", { key: 'c59dd8bd987946944ce216e605c0eff6a8002e04' }), this.optional && this.required ? (h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (h("span", { class: "optional" }, "(optional)")) : this.required ? (h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), h("div", { key: '47b74b65d7700e7f85e328fdfcf42d929b763f75', class: "textInput__bottom-wrapper" }, h("div", { key: '63050336a9989dcbfd1d4fa7ff0c9e9d65ff8708', class: "input-container" }, this.icon && (h("ifx-icon", { key: '7528bf901b9f6f5ebf56851334885cc36806f923', class: 'input-icon', icon: this.icon })), h("input", { key: 'e6eefe13d1b70f5166cce2ca7978155707c75909', ref: (el) => (this.inputElement = el), disabled: this.disabled, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
61
66
  ${this.error ? 'error' : ""}
62
67
  ${this.size === "s" ? "input-s" : ""}
63
- ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (h("ifx-icon", { key: '9ef57617c8f1a227ce0053f3aaecb93c20fb8a72', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
64
- h("div", { key: '0e3ab81b4b14c9a47f77b5b3fd65cc957e00ef6f', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
65
- h("div", { key: '4455db6ddff04ed0615c2e4f295614ed66a3d12f', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
68
+ ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (h("ifx-icon", { key: '752cf422732168c7aa6ac8d33ec00813e74f0848', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
69
+ h("div", { key: '9bd4fb69119c920c957a933ba3d9c30927feaa35', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
70
+ h("div", { key: 'b41ade4b3db695e6238e8549ed933f65fdce974d', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
66
71
  }
67
72
  static get formAssociated() { return true; }
68
73
  get el() { return this; }
@@ -113,4 +118,4 @@ function defineCustomElement() {
113
118
 
114
119
  export { TextField as T, defineCustomElement as d };
115
120
 
116
- //# sourceMappingURL=p-67573b5f.js.map
121
+ //# sourceMappingURL=p-b4630d0d.js.map
@@ -0,0 +1 @@
1
+ {"file":"p-b4630d0d.js","mappings":"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","names":[],"sources":["src/components/text-field/text-field.scss?tag=ifx-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.textInput__container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n width: 100%;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n &.disabled {\n & .textInput__top-wrapper {\n & label {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n & .textInput__bottom-wrapper {\n input {\n border: 1px solid tokens.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\n\n &::placeholder {\n font-size: tokens.$ifxFontSizeS;\n color: tokens.$ifxColorEngineering500;\n }\n }\n }\n }\n\n & .textInput__top-wrapper {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 0px;\n gap: 4px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n\n & label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .optional-required {\n margin-left: 4px;\n }\n\n & .optional {\n margin-left: 4px;\n }\n\n & .required {\n margin-left: 4px;\n \n &.error {\n color: #CD002F;\n }\n }\n }\n }\n\n .input-container {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n }\n\n\n & .textInput__bottom-wrapper {\n flex-grow: 1;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n gap: 4px;\n flex: none;\n order: 1;\n align-self: stretch;\n flex-grow: 0;\n\n & input {\n width: 100%;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace100;\n height: tokens.$ifxSize500;\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n border: 1px solid tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n text-overflow: ellipsis;\n\n &.input-s {\n height: tokens.$ifxSize450;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n\n &::placeholder {\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n }\n\n &.icon {\n padding-left: tokens.$ifxSpace500;\n }\n\n &.error {\n border: 1px solid #CD002F;\n\n &:focus {\n outline: none;\n }\n }\n\n &.success {\n border: 1px solid #4CA460;\n\n &:focus {\n outline: none;\n }\n }\n\n\n &:focus:not(.error, .success) {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border: 1px solid tokens.$ifxColorEngineering500;\n }\n\n &::placeholder {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n color: #8D8786;\n flex: none;\n order: 1;\n flex-grow: 1;\n }\n }\n\n & .input-icon {\n // Position the icon within the icon container\n // Adjust the positioning as needed\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: tokens.$ifxSpace200;\n /* Adjust this value to control the icon's left offset */\n transition: .3s;\n color: tokens.$ifxColorEngineering400;\n }\n\n & .textInput__bottom-wrapper-caption {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n letter-spacing: 0.2px;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n align-self: stretch;\n flex-grow: 0;\n\n &.error {\n color: #CD002F;\n\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n \n }\n .delete-icon {\n position: absolute;\n right: tokens.$ifxSpace200;\n\n :hover {\n cursor: pointer;\n }\n }\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n tag: 'ifx-text-field',\n styleUrl: 'text-field.scss',\n shadow: true,\n formAssociated: true\n})\n\nexport class TextField {\n private inputElement: HTMLInputElement;\n @Element() el;\n @Prop() placeholder: string = \"Placeholder\"\n @Prop({ mutable: true }) value: string = '';\n @Prop() error: boolean = false;\n @Prop() label: string = \"\";\n @Prop() icon: string = \"\";\n @Prop() caption: string = \"\";\n @Prop() size: string = 'm';\n @Prop() required: boolean = false;\n @Prop() optional: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() maxlength?: number;\n @Prop() showDeleteIcon: boolean = false;\n @Prop() autocomplete: string = 'on'\n @Prop() type: 'text' | 'password' = 'text';\n @Prop() internalId: string = \"text-field\"\n @State() internalType: string;\n @Event() ifxInput: EventEmitter<String>;\n // @Prop({ reflect: true })\n // resetOnSubmit: boolean = false;\n\n @AttachInternals() internals: ElementInternals;\n\n\n @Watch('value')\n valueWatcher(newValue: string) {\n if (newValue !== this.inputElement.value) {\n this.inputElement.value = newValue;\n }\n }\n\n @Method()\n async reset() {\n this.value = '';\n this.inputElement.value = '';\n }\n\n handleDeleteContent() {\n this.reset();\n this.ifxInput.emit(this.value);\n }\n\n handleInput() {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\n this.internals.setFormValue(query) // update form value\n this.ifxInput.emit(this.value);\n }\n\n handleTypeProp() { \n this.internalType = this.type === 'text' || this.type === 'password' ? this.type : 'text'\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n\n componentWillLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n trackComponent('ifx-text-field')\n }\n this.handleTypeProp()\n }\n\n render() {\n return (\n <div aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n <div class=\"textInput__top-wrapper\">\n <label htmlFor={this.internalId}>\n <slot></slot>\n {this.optional && this.required ? (\n <span class=\"optional-required\">(optional) *</span>\n ) : this.optional ? (\n <span class=\"optional\">(optional)</span>\n ) : this.required ? (\n <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n ) : null}\n </label>\n </div>\n\n <div class=\"textInput__bottom-wrapper\">\n <div class=\"input-container\">\n {this.icon && (\n <ifx-icon class='input-icon' icon={this.icon} />\n )}\n <input\n ref={(el) => (this.inputElement = el)}\n disabled={this.disabled}\n autocomplete={this.autocomplete}\n type={this.internalType}\n id={this.internalId}\n value={this.value}\n onInput={() => this.handleInput()}\n placeholder={this.placeholder}\n maxlength={this.maxlength}\n class={\n `${this.icon ? 'icon' : \"\"}\n ${this.error ? 'error' : \"\"} \n ${this.size === \"s\" ? \"input-s\" : \"\"}\n ${this.success ? \"success\" : \"\"}`} />\n\n { (this.showDeleteIcon && this.value) && (\n <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n )}\n </div>\n {this.caption && !this.error &&\n <div class={`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : \"\"`}>\n {this.caption}\n </div>}\n {this.error &&\n <div class=\"textInput__bottom-wrapper-caption error\">\n {this.caption}\n </div>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
@@ -1,7 +1,9 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
2
- import { d as defineCustomElement$3 } from './p-bb4de57d.js';
3
- import { d as defineCustomElement$2 } from './p-0c449780.js';
4
- import { d as defineCustomElement$1 } from './p-c9aec5fa.js';
2
+ import { t as trackComponent } from './p-6ecb6a6f.js';
3
+ import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
4
+ import { d as defineCustomElement$3 } from './p-0e4632d4.js';
5
+ import { d as defineCustomElement$2 } from './p-b1ca5daf.js';
6
+ import { d as defineCustomElement$1 } from './p-39859c18.js';
5
7
 
6
8
  const paginationCss = "@charset \"UTF-8\";:root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex}.container{display:inline-flex;justify-content:center;align-items:center;gap:32px;font-family:var(--ifx-font-family)}.container .items__per-page-wrapper{display:flex;align-items:center;gap:16px}.container .items__per-page-wrapper .items__per-page-label{color:#1D1D1D;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.container .items__per-page-wrapper .items__per-page-field{display:flex;flex-direction:column;align-items:flex-start}.container .items__per-page-wrapper .items__per-page-field ifx-select{width:92px}.container .items__total-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .items__total-button{display:flex;width:40px;height:40px;justify-content:center;align-items:center;border-radius:100px;border:1px solid #BFBBBB;background:#FFF}.container .items__total-wrapper .page__numbers-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item{display:flex;padding:6px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:100px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active{background-color:#0A8276}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active span{color:#fff}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover{cursor:pointer}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover:not(.active){background-color:#ddd}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:active:not(.active){background-color:#575352}.container .items__total-wrapper .page__numbers-wrapper .page__number-item span{display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px}.pagination{display:flex}.pagination ifx-icon-button:first-of-type{margin-right:12px}.pagination ifx-icon-button:last-of-type{margin-left:12px}a{padding:8px;border-radius:100px}ol{list-style-type:none;padding:0;margin:0;display:inline-flex;align-items:center;gap:12px}li{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:100px}li:hover:not(.active) a{background-color:#EEEDED}li:active:not(.active) a{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active a{color:#fff}li:hover{cursor:pointer}li a{text-decoration:none;display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px;align-items:center}.prev.disabled,.next.disabled{cursor:default}.prev.disabled:hover,.next.disabled:hover{cursor:default;text-decoration:none}.prev{margin-right:2.5px}.next{margin-left:2.5px}@media (min-width: 400px){li:first-child,li.active-sibling,li.active,li.active+li,li:last-child{display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8)~li{display:none}li:first-child:nth-last-child(n+8)~li.active-sibling:before{content:\"…\";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li.active+li:after{content:\"…\";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+5){display:inline-flex;flex-direction:row}li:first-child:nth-last-child(n+8)~li:nth-last-child(5):before{content:\"…\";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):after,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):after,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):before,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):after{display:none !important}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5){display:none}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5):before,li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5):before{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+5){display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+4):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+4):after{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(5):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(5):after{content:\"…\";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8).active:before,li:first-child:nth-last-child(n+8).active:after,li:first-child:nth-last-child(n+8)~li.active:before,li:first-child:nth-last-child(n+8)~li.active:after{display:none}}";
7
9
  const IfxPaginationStyle0 = paginationCss;
@@ -81,6 +83,9 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends H {
81
83
  this.filteredItemsPerPage = items.map(item => (Object.assign(Object.assign({}, item), { label: item.label || item.value })));
82
84
  }
83
85
  componentWillLoad() {
86
+ if (!isNestedInIfxComponent(this.el)) {
87
+ trackComponent('ifx-pagination');
88
+ }
84
89
  this.calculateNumberOfPages();
85
90
  this.filterOptionsArray();
86
91
  this.updateVisiblePages();
@@ -132,7 +137,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends H {
132
137
  this.initPagination();
133
138
  }
134
139
  render() {
135
- return (h("div", { key: 'f34d51257e81560aec1de209b91a18f8d3b80909', class: "container" }, h("div", { key: 'b437f38a7c494793ef43392a5200602d1ea280f7', class: "items__per-page-wrapper" }, h("div", { key: '54fb7a4952ad76351188a3177611bf4bca95b007', class: "items__per-page-label" }, "Results per Page"), h("div", { key: 'd0bc72f83111f631485da2b6fe52b29c98208c83', class: "items__per-page-field" }, h("ifx-select", { key: '62eea5b69a124994a159f04119cdcf5e54cb6e8e', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), h("div", { key: '689680c6df19027528fffd8e9ff4938952e9245f', class: "items__total-wrapper" }, h("div", { key: 'be26d81808f23878a51cf1fb9992433c6abeed26', class: "pagination" }, h("ifx-icon-button", { key: '6abeed920c4f97763170459f714a3c2a0f7b144c', class: "prev", icon: "arrow-left-16", onClick: () => this.changePage(this.internalPage - 1) }), h("ol", { key: 'bce48e8aed58fa1f92a04a294fa1dcffd04ed42c' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("a", { href: "javascript:void(0)" }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", null, "..."))))), h("ifx-icon-button", { key: '7e63ce955d14f7f19219bc856ca0bce02b180e08', class: "next", icon: "arrow-right-16", onClick: () => this.changePage(this.internalPage + 1) })))));
140
+ return (h("div", { key: '120f6db1f0899a6cf1a0c8418c1712e1b50726d2', class: "container" }, h("div", { key: 'd21a7b940b7235c1d67c3ffa2bbb87463e9e0e1f', class: "items__per-page-wrapper" }, h("div", { key: '1747ac5690181c57305189fd2ace9e9651a01d28', class: "items__per-page-label" }, "Results per Page"), h("div", { key: 'a437b3410a46f1059b57ba2c9b7d3ac96a73d0b1', class: "items__per-page-field" }, h("ifx-select", { key: '6f01aaf8efecbbdeeb7180077e98dcf1851b130f', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), h("div", { key: '45379d16c815cb271eab074bfb334256d0b8293e', class: "items__total-wrapper" }, h("div", { key: '8c567a2f79cee9affcd7002fcf6808dca68945d3', class: "pagination" }, h("ifx-icon-button", { key: '681ffc9a5f5d61520176fb2e4dfe44035d566a41', class: "prev", icon: "arrow-left-16", onClick: () => this.changePage(this.internalPage - 1) }), h("ol", { key: '19e46d1c5f3846f13186d587d5a01e1e2169db4f' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("a", { href: "javascript:void(0)" }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", null, "..."))))), h("ifx-icon-button", { key: '65b5dfd4edde059345875a0443edb218cde7d6ac', class: "next", icon: "arrow-right-16", onClick: () => this.changePage(this.internalPage + 1) })))));
136
141
  }
137
142
  get el() { return this; }
138
143
  static get style() { return IfxPaginationStyle0; }
@@ -177,4 +182,4 @@ function defineCustomElement() {
177
182
 
178
183
  export { Pagination as P, defineCustomElement as d };
179
184
 
180
- //# sourceMappingURL=p-cc5bd74b.js.map
185
+ //# sourceMappingURL=p-be3268af.js.map
@@ -0,0 +1 @@
1
+ {"file":"p-be3268af.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.container {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n gap: 32px;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n & .items__per-page-wrapper {\n display: flex;\n align-items: center;\n gap: 16px;\n\n & .items__per-page-label {\n color: #1D1D1D;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px;\n }\n\n & .items__per-page-field {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n\n & ifx-select {\n width: 92px;\n }\n }\n }\n\n & .items__total-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .items__total-button {\n display: flex;\n width: 40px;\n height: 40px;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n border: 1px solid #BFBBBB;\n background: #FFF;\n }\n\n & .page__numbers-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n & .page__number-item {\n display: flex;\n padding: 6px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 100px;\n\n &.active {\n background-color: #0A8276;\n\n & span {\n color: #fff;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:hover:not(.active) {\n background-color: #ddd;\n\n }\n\n &:active:not(.active) {\n background-color: #575352;\n }\n\n & span {\n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n }\n }\n }\n }\n}\n\n\n.pagination {\n display: flex;\n\n & ifx-icon-button:first-of-type {\n margin-right: 12px;\n }\n\n & ifx-icon-button:last-of-type {\n margin-left: 12px;\n }\n}\n\na {\n padding: 8px;\n border-radius: 100px;\n}\n\nol {\n list-style-type: none;\n padding: 0;\n margin: 0;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n\nli {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 100px;\n\n &:hover:not(.active) {\n & a {\n background-color: #EEEDED;\n }\n }\n\n &:active:not(.active) {\n & a {\n background-color: #575352;\n color: #fff;\n }\n }\n\n &.active {\n background-color: #0A8276;\n\n & a {\n color: #fff;\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n & a {\n text-decoration: none;\n display: flex;\n width: 16px;\n height: 16px;\n flex-direction: column;\n justify-content: center;\n color: #1D1D1D;\n text-align: center;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n align-items: center;\n }\n}\n\n.prev,\n.next {\n &.disabled {\n cursor: default;\n\n &:hover {\n cursor: default;\n text-decoration: none;\n }\n }\n}\n\n.prev {\n margin-right: 2.5px;\n}\n\n.next {\n margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before: true) {\n content: \"\\2026\";\n font-size: 13px;\n display: inline-block;\n\n @if($before) {\n margin-right: 6px;\n }\n\n @else {\n margin-left: 6px;\n }\n}\n\n\n// @media(max-width:460px) {\n// li {\n\n// &:first-child,\n// &.active,\n// &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n// &:last-child {\n// //display: inline-block !important;\n// display: inline-flex !important;\n// flex-direction: row;\n// }\n\n// $how-many-on-ends: 3; // 1,2,3,...,10 || 1,...,8,9,10\n// // There are >= 5 pages\n// &:first-child:nth-last-child(n+6) {\n\n// &~li {\n// // Start out with all siblings hidden\n// display: none;\n\n// // Show the last children in the list by default\n// &:nth-last-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n\n// }\n\n// // The child at the beginning of the last group shows ellipsis for the group\n// &:nth-last-child(#{$how-many-on-ends}) {\n// &:before {\n// @include ellipsis(true);\n// }\n// }\n\n// // The very beginning elements do not need to show ellipsis\n// // The very end elements do not need to show ellipsis\n// }\n\n\n// &.active,\n// &~li.active {\n\n// // Show ellipsis before and after the active element\n// &:before {\n// @include ellipsis(true);\n// }\n// &:after {\n// @include ellipsis(false);\n// }\n\n\n// // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n// &:nth-child(-n+#{$how-many-on-ends - 1}),\n// &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n// &:before, &:after {\n// display: none;\n// }\n// }\n\n// // Hide the last group if \"active\" comes before them\n// &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n// display: none;\n// }\n\n// // Show the first group together if \"active\" comes before them\n// &~li:nth-child(-n+#{$how-many-on-ends}) {\n// //display: inline-block;\n// display: inline-flex;\n// flex-direction: row;\n// }\n\n// // If \"active\" is before the last member in the group, don't show ellipsis\n// &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n// &:after {\n// display: none;\n// }\n// }\n\n\n// // The child at the end of the first group shows ellipsis for the group\n// &~li:nth-child(#{$how-many-on-ends}) {\n// &:after {\n// @include ellipsis(false);\n// }\n// }\n// }\n// }\n// }\n// }\n\n@media (min-width: 400px) {\n li {\n\n &:first-child,\n &.active-sibling,\n &.active,\n &.active+li,\n &:last-child {\n //display: inline-block!important;\n display: inline-flex !important;\n flex-direction: row;\n }\n\n // There are >= 7 pages\n &:first-child:nth-last-child(n+8) {\n $how-many-on-ends: 5; // 1,2,3,4,5,...,10 || 1,...6,7,8,9,10\n\n &~li {\n // Start out with all siblings hidden\n display: none;\n\n // Show ellipsis before the previous one\n &.active-sibling:before {\n @include ellipsis(true);\n }\n\n // Show ellipsis after the next one\n &.active+li:after {\n @include ellipsis(false);\n }\n\n // Show the last children in the list by default\n &:nth-last-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex;\n flex-direction: row;\n }\n\n // The child at the beginning of the last group shows ellipsis for the group\n &:nth-last-child(#{$how-many-on-ends}) {\n &:before {\n @include ellipsis(true);\n }\n }\n\n // The very beginning elements do not need to show ellipsis\n &:nth-child(-n+#{$how-many-on-ends - 3}),\n // The very end elements do not need to show ellipsis\n &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n // Even if it's a sibling to \"active\"\n &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n\n &:before,\n &:after {\n display: none !important;\n }\n }\n }\n\n &.active,\n &~li.active {\n\n // Hide the last group if \"active\" comes before them\n &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n display: none;\n\n // If there is overlap, the element will show, but hide it's ellipsis\n &:before {\n display: none;\n }\n }\n\n // Show the first group together if \"active\" comes before them\n &~li:nth-child(-n+#{$how-many-on-ends}) {\n //display: inline-block;\n display: inline-flex !important;\n flex-direction: row;\n }\n\n // If \"active\" is before the last member in the group, don't show ellipsis\n &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n &:after {\n display: none;\n }\n }\n\n\n // The child at the end of the first group shows ellipsis for the group\n &~li:nth-child(#{$how-many-on-ends}) {\n &:after {\n @include ellipsis(false);\n }\n }\n\n // \"active\" should never show ellipsis\n &:before,\n &:after {\n display: none;\n }\n }\n }\n }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n tag: 'ifx-pagination',\n styleUrl: 'pagination.scss',\n shadow: true\n})\nexport class Pagination {\n @Element() el: HTMLElement;\n @Event() ifxPageChange: EventEmitter;\n @Prop() currentPage: number = 1;\n @State() internalPage: number = 1;\n @State() internalItemsPerPage: number = 10;\n @State() numberOfPages: number[] = [];\n @Prop() total: number = 1;\n @Prop() itemsPerPage: any[] | string;\n @State() filteredItemsPerPage: any[] = [];\n @State() visiblePages: (number | string)[] = [];\n\n private CLASS_DISABLED = \"disabled\";\n private CLASS_ACTIVE = \"active\";\n private prevInternalPage: number;\n\n @Listen('ifxSelect')\n setItemsPerPage(e: CustomEvent) {\n const selectedValue = e.detail?.value || e.detail?.label; \n const newItemsPerPage = parseInt(selectedValue) || 10;\n\n if (newItemsPerPage === this.internalItemsPerPage) {\n return;\n }\n\n this.internalItemsPerPage = newItemsPerPage;\n this.internalPage = 1; \n this.calculateNumberOfPages();\n this.updateVisiblePages();\n this.handleEventEmission();\n }\n\n componentDidLoad() {\n this.initPagination();\n }\n\n updateVisiblePages() {\n const buffer = 2;\n const totalPages = this.numberOfPages.length;\n const current = this.internalPage;\n let pages: (number | string)[] = [];\n \n if (totalPages <= 5) {\n pages = [...this.numberOfPages];\n } else {\n pages.push(1);\n \n if (current > buffer + 1) pages.push('...');\n \n let start = Math.max(2, current - buffer);\n let end = Math.min(totalPages - 1, current + buffer);\n \n if (current <= buffer + 1) end = buffer * 2 + 1;\n if (current >= totalPages - buffer) start = totalPages - buffer * 2;\n \n for (let i = start; i <= end; i++) pages.push(i);\n \n if (current < totalPages - buffer) pages.push('...');\n pages.push(totalPages);\n }\n \n this.visiblePages = [...new Set(pages)];\n }\n\n calculateNumberOfPages() {\n const totalPages = Math.ceil(this.total / this.internalItemsPerPage);\n this.numberOfPages = Array.from({ length: totalPages }, (_, i) => i + 1);\n this.internalPage = Math.max(1, Math.min(this.currentPage, totalPages));\n }\n\n filterOptionsArray() { \n const items = typeof this.itemsPerPage === 'string' ? \n JSON.parse(this.itemsPerPage) : this.itemsPerPage;\n this.filteredItemsPerPage = items.map(item => ({\n ...item,\n label: item.label || item.value\n }));\n }\n\n componentWillLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n trackComponent('ifx-pagination')\n }\n this.calculateNumberOfPages();\n this.filterOptionsArray();\n this.updateVisiblePages();\n }\n\n componentWillUpdate() { \n if (this.prevInternalPage !== this.internalPage) {\n this.updateVisiblePages();\n this.prevInternalPage = this.internalPage;\n }\n }\n\n componentDidUpdate() {\n this.initPagination();\n }\n\n handleEventEmission() {\n this.ifxPageChange.emit({\n currentPage: this.internalPage,\n totalPages: this.numberOfPages.length,\n itemsPerPage: this.internalItemsPerPage\n });\n }\n\n initPagination() {\n const pagination = this.el.shadowRoot.querySelector('.pagination');\n if (!pagination) return;\n\n const updateButtons = () => {\n const prev = pagination.querySelector<HTMLButtonElement>('.prev');\n const next = pagination.querySelector<HTMLButtonElement>('.next');\n if (prev) {\n prev.disabled = this.internalPage === 1;\n prev.classList.toggle(this.CLASS_DISABLED, this.internalPage === 1);\n }\n if (next) {\n next.disabled = this.internalPage === this.numberOfPages.length;\n next.classList.toggle(this.CLASS_DISABLED, this.internalPage === this.numberOfPages.length);\n }\n };\n\n pagination.querySelectorAll('li').forEach(li => {\n li.removeEventListener('click', this.handlePageClick);\n li.addEventListener('click', this.handlePageClick);\n });\n\n updateButtons();\n }\n\n private handlePageClick = (e: Event) => {\n const li = e.currentTarget as HTMLLIElement;\n const page = parseInt(li.dataset.page);\n if (!isNaN(page)) this.changePage(page);\n };\n\n changePage(newPage: number) {\n newPage = Math.max(1, Math.min(newPage, this.numberOfPages.length));\n if (newPage === this.internalPage) return;\n \n this.internalPage = newPage;\n this.handleEventEmission();\n this.initPagination();\n }\n\n render() {\n return (\n <div class=\"container\">\n <div class=\"items__per-page-wrapper\">\n <div class=\"items__per-page-label\">Results per Page</div>\n <div class=\"items__per-page-field\">\n <ifx-select\n placeholder='false'\n show-search='false'\n value={undefined}\n disabled={false}\n error={false}\n size=\"s\"\n options={this.filteredItemsPerPage}\n placeholder-value=\"Select\"\n ></ifx-select>\n </div>\n </div>\n \n <div class=\"items__total-wrapper\">\n <div class=\"pagination\">\n <ifx-icon-button\n class=\"prev\"\n icon=\"arrow-left-16\"\n onClick={() => this.changePage(this.internalPage - 1)}\n ></ifx-icon-button>\n \n <ol>\n {this.visiblePages.map((page, i) => typeof page === 'number' ? (\n <li \n key={`page-${page}`}\n class={{ [this.CLASS_ACTIVE]: page === this.internalPage }}\n data-page={page}\n >\n <a href=\"javascript:void(0)\">{page}</a>\n </li>\n ) : (\n <li class=\"ellipsis\" key={`ellipsis-${i}`}>\n <span>...</span>\n </li>\n ))}\n </ol>\n \n <ifx-icon-button\n class=\"next\"\n icon=\"arrow-right-16\"\n onClick={() => this.changePage(this.internalPage + 1)}\n ></ifx-icon-button>\n </div>\n </div>\n </div>\n );\n }\n}"],"version":3}
@@ -1,6 +1,8 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
2
+ import { t as trackComponent } from './p-6ecb6a6f.js';
3
+ import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
2
4
  import { c as classNames } from './p-5cdc6210.js';
3
- import { d as defineCustomElement$1 } from './p-bb4de57d.js';
5
+ import { d as defineCustomElement$1 } from './p-0e4632d4.js';
4
6
 
5
7
  const searchFieldCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex}.search-field{box-sizing:border-box;background-color:#FFFFFF;width:100%;font-family:var(--ifx-font-family)}.search-field .search-field__wrapper{box-sizing:border-box;height:40px;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;padding:8px 16px;gap:12px;flex:none;order:0;align-self:stretch;flex-grow:0;position:relative;width:100%;outline:none;color:#8D8786}.search-field .search-field__wrapper.focused{border:1px solid #0A8276}.search-field .search-field__wrapper.focused ifx-icon{color:#575352}.search-field .search-field__wrapper.search-field__wrapper-s{height:36px}.search-field .search-field__wrapper:hover:not(.focused,:focus){border:1px solid #3C3A39}.search-field .search-field__wrapper:focus{outline:none;border:1px solid #0A8276}.search-field .search-field__wrapper .delete-icon{right:12px;cursor:pointer}.search-field .search-field__wrapper input[type=text]{font-style:normal;font-weight:400;font-size:16px;color:#8D8786;border:none;width:100%;outline:none;height:16px}.search-field .search-field__wrapper input[type=text]:focus{outline:none;color:#1d1d1d}.search-field .search-field__wrapper input[type=text]:disabled{background-color:#EEEDED}.search-field .search-field__wrapper:has(input[disabled]){background-color:#EEEDED}";
6
8
  const IfxSearchFieldStyle0 = searchFieldCss;
@@ -47,6 +49,11 @@ const SearchField = /*@__PURE__*/ proxyCustomElement(class SearchField extends H
47
49
  this.inputElement.focus();
48
50
  this.isFocused = true;
49
51
  }
52
+ componentWillLoad() {
53
+ if (!isNestedInIfxComponent(this.el)) {
54
+ trackComponent('ifx-search-field');
55
+ }
56
+ }
50
57
  componentWillUpdate() {
51
58
  if (this.value !== "") {
52
59
  this.showDeleteIconInternalState = true;
@@ -55,7 +62,7 @@ const SearchField = /*@__PURE__*/ proxyCustomElement(class SearchField extends H
55
62
  this.showDeleteIconInternalState = false;
56
63
  }
57
64
  render() {
58
- return (h("div", { key: '1c934e49ec338b1143beb1b38cbc81fc4b9143f7', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: 'ee18e7140c47744ac35f15afef353162e36743df', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '80b1068a48da7f09ba2587889b121acdaeee4559', icon: "search-16", class: "search-icon" }), h("input", { key: '006e6806d44fe10331b051b1f44f310276026ffe', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
65
+ return (h("div", { key: '751f042d0ec4d4a532d77de87b022c9eb1c47e7c', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '48e4b6518cdd4fd66fc6d4f24459fd729bd6d3a7', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '71353ae1d54505b0e50d248695f20059c0d0a44d', icon: "search-16", class: "search-icon" }), h("input", { key: 'c8d3c24435218e4219be7cb2bc7ee14ab314a728', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
59
66
  }
60
67
  getSizeClass() {
61
68
  return `${this.size}` === "s"
@@ -65,6 +72,7 @@ const SearchField = /*@__PURE__*/ proxyCustomElement(class SearchField extends H
65
72
  getWrapperClassNames() {
66
73
  return classNames(`search-field__wrapper`, `search-field__wrapper ${this.getSizeClass()}`, `${this.isFocused ? 'focused' : ""}`);
67
74
  }
75
+ get el() { return this; }
68
76
  static get watchers() { return {
69
77
  "value": ["valueWatcher"]
70
78
  }; }
@@ -104,4 +112,4 @@ function defineCustomElement() {
104
112
 
105
113
  export { SearchField as S, defineCustomElement as d };
106
114
 
107
- //# sourceMappingURL=p-38396fe7.js.map
115
+ //# sourceMappingURL=p-c6e5f94d.js.map
@@ -0,0 +1 @@
1
+ {"file":"p-c6e5f94d.js","mappings":"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","names":[],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.search-field {\n box-sizing: border-box;\n background-color: tokens.$ifxColorBaseWhite;\n width: 100%;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n .search-field__wrapper {\n box-sizing: border-box;\n height: tokens.$ifxSize500;\n display: flex;\n align-items: center;\n border: 1px solid #8D8786;\n border-radius: tokens.$ifxBorderRadius12;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n position: relative;\n width: 100%;\n outline: none;\n color: tokens.$ifxColorEngineering400;\n\n &.focused {\n border: 1px solid tokens.$ifxColorOcean500;\n\n & ifx-icon {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n &.search-field__wrapper-s {\n height: 36px;\n }\n\n\n &:hover:not(.focused, :focus) {\n border: 1px solid #3C3A39;\n }\n\n &:focus {\n outline: none;\n border: 1px solid #0A8276;\n }\n\n\n .delete-icon {\n right: 12px;\n cursor: pointer;\n }\n\n input[type='text'] {\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n //line-height: 24px;\n color: #8D8786;\n border: none;\n width: 100%;\n outline: none;\n //height: 100%;\n height: 16px;\n\n &:focus {\n outline: none;\n color: #1d1d1d;\n }\n\n &:disabled {\n background-color: #EEEDED;\n }\n }\n\n &:has(input[disabled]) {\n background-color: #EEEDED;\n }\n }\n}","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-search-field',\n styleUrl: 'search-field.scss',\n shadow: true\n})\n\n\nexport class SearchField {\n @Element() el;\n private inputElement: HTMLInputElement;\n @Prop({ mutable: true }) value: string = '';\n\n @Event() ifxInput: EventEmitter<String>;\n @State() insideDropdown: boolean = false;\n\n @Prop() showDeleteIcon: boolean = false;\n @State() showDeleteIconInternalState: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() size: string = 'l';\n @State() isFocused: boolean = false;\n @Prop() placeholder: string = \"Search...\";\n @Prop() autocomplete: string = \"on\";\n @Prop() maxlength?: number = null; \n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.inputElement)) {\n this.isFocused = false;\n }\n }\n\n @Watch('value')\n valueWatcher(newValue: string) {\n if (newValue !== this.inputElement.value) {\n this.inputElement.value = newValue;\n }\n }\n\n\n handleInput = () => {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\n this.ifxInput.emit(this.value);\n };\n\n handleDelete = () => {\n this.inputElement.value = '';\n this.value = \"\";\n this.ifxInput.emit(this.value);\n }\n\n focusInput() {\n this.inputElement.focus();\n this.isFocused = true;\n }\n\n componentWillLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n trackComponent('ifx-search-field')\n }\n }\n \n componentWillUpdate() {\n if (this.value !== \"\") {\n this.showDeleteIconInternalState = true;\n } else this.showDeleteIconInternalState = false;\n }\n\n render() {\n return (\n <div aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n <div class={this.getWrapperClassNames()}\n tabindex={1}\n onFocus={() => this.focusInput()}\n onClick={() => this.focusInput()}\n >\n <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n <input\n ref={(el) => (this.inputElement = el)}\n type=\"text\"\n autocomplete={this.autocomplete}\n onInput={() => this.handleInput()}\n placeholder={this.placeholder}\n disabled={this.disabled}\n maxlength={this.maxlength}\n value={this.value} // bind the value property to input element\n />\n {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n <ifx-icon icon=\"cRemove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n </ifx-icon>\n ) : null}\n </div>\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"search-field__wrapper-s\"\n : \"\";\n }\n\n\n getWrapperClassNames() {\n return classNames(\n `search-field__wrapper`,\n `search-field__wrapper ${this.getSizeClass()}`,\n `${this.isFocused ? 'focused' : \"\"}`\n );\n }\n}"],"version":3}
@@ -1,4 +1,6 @@
1
1
  import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
2
+ import { t as trackComponent } from './p-6ecb6a6f.js';
3
+ import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
2
4
 
3
5
  const accordionCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}";
4
6
  const IfxAccordionStyle0 = accordionCss;
@@ -10,6 +12,11 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends H {
10
12
  this.__attachShadow();
11
13
  this.autoCollapse = false;
12
14
  }
15
+ componentWillLoad() {
16
+ if (!isNestedInIfxComponent(this.el)) {
17
+ trackComponent('ifx-accordion');
18
+ }
19
+ }
13
20
  async onItemOpen(event) {
14
21
  if (this.autoCollapse) {
15
22
  const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));
@@ -22,7 +29,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends H {
22
29
  }
23
30
  }
24
31
  render() {
25
- return (h("div", { key: '663e6aac2f3002d3898856b854dbfd96d9519a68', class: "accordion-wrapper" }, h("slot", { key: '0f54044bc1e0d2860ccd3096ee2711eb0a1cb927' })));
32
+ return (h("div", { key: '09e451a9b0b348566d74ad71741d57bd48d3ec3a', class: "accordion-wrapper" }, h("slot", { key: '9338154dc8adc933eb6b6b6cbd1396adf839e80a' })));
26
33
  }
27
34
  static get delegatesFocus() { return true; }
28
35
  get el() { return this; }
@@ -46,4 +53,4 @@ function defineCustomElement() {
46
53
 
47
54
  export { Accordion as A, defineCustomElement as d };
48
55
 
49
- //# sourceMappingURL=p-ed739e86.js.map
56
+ //# sourceMappingURL=p-cca71d97.js.map
@@ -0,0 +1 @@
1
+ {"file":"p-cca71d97.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,wLAAwL,CAAC;AAC9M,2BAAe,YAAY;;MCQd,SAAS;IALtB;;;;QAOU,iBAAY,GAAY,KAAK,CAAC;KA4BvC;IA1BC,iBAAiB;QACf,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,cAAc,CAAC,eAAe,CAAC,CAAA;SAChC;KACF;IAGD,MAAM,UAAU,CAAC,KAAkB;QACjC,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;YACzE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACxB,MAAM,WAAW,GAAG,IAAmC,CAAC;gBACxD,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE;oBAC5D,WAAW,CAAC,IAAI,GAAG,KAAK,CAAC;iBAC1B;aACF;SACF;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.accordion-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n}","import { Component, h, Listen, Element, Prop } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n tag: 'ifx-accordion',\n styleUrl: 'accordion.scss',\n shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n @Element() el: HTMLElement;\n @Prop() autoCollapse: boolean = false;\n\n componentWillLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n trackComponent('ifx-accordion')\n }\n }\n\n @Listen('ifxOpen')\n async onItemOpen(event: CustomEvent) {\n if (this.autoCollapse) {\n const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n for (const item of items) {\n const itemElement = item as HTMLIfxAccordionItemElement;\n if (itemElement !== event.target && (await itemElement.open)) {\n itemElement.open = false;\n }\n }\n }\n }\n\n render() {\n return (\n <div class=\"accordion-wrapper\">\n <slot />\n </div>\n );\n }\n}\n"],"version":3}
@@ -1,7 +1,9 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
2
- import { d as defineCustomElement$3 } from './p-186dacc8.js';
2
+ import { t as trackComponent } from './p-6ecb6a6f.js';
3
+ import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
4
+ import { d as defineCustomElement$3 } from './p-331ca3f3.js';
3
5
  import { d as defineCustomElement$2 } from './p-68016aea.js';
4
- import { d as defineCustomElement$1 } from './p-bb4de57d.js';
6
+ import { d as defineCustomElement$1 } from './p-0e4632d4.js';
5
7
 
6
8
  const multiselectCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.ifx-multiselect-container{position:relative;box-sizing:border-box;font-family:var(--ifx-font-family)}.ifx-multiselect-container.small-select{height:36px}.ifx-multiselect-container.medium-select{height:40px}.ifx-multiselect-container:hover{cursor:pointer}.ifx-multiselect-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-error-message-wrapper{color:#CD002F;font-size:0.75rem;line-height:1rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-multiselect-wrapper{background-color:#FFFFFF;box-sizing:border-box;position:relative;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;width:100%;font-weight:400;font-style:normal}.ifx-multiselect-container .ifx-multiselect-wrapper.small-select{height:36px;padding:8px 12px;font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .ifx-multiselect-wrapper.medium-select{height:40px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible{outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active)::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:2px}.ifx-multiselect-container .ifx-multiselect-wrapper.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-multiselect-container .ifx-multiselect-wrapper.error{border-color:#CD002F}.ifx-multiselect-container .ifx-multiselect-wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-multiselect-container .ifx-multiselect-wrapper.active{border-color:#0A8276 !important}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu{top:auto;bottom:100%}.ifx-multiselect-container .ifx-multiselect-input{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-multiselect-container .ifx-multiselect-input.placeholder{opacity:0.5}.ifx-multiselect-container .ifx-multiselect-icon-container{margin-left:auto;align-items:center;display:flex}.ifx-multiselect-container .ifx-clear-button{display:flex}.ifx-multiselect-container .ifx-clear-button.hide{display:none}.ifx-multiselect-container .ifx-multiselect-dropdown-menu{position:absolute;top:100%;left:0;width:100%;margin-top:2px;background-color:#fff;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1);max-height:300px;overflow-y:auto;z-index:1000}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input{position:sticky;top:0;left:0;z-index:1;width:100%;padding:8px 16px;font-size:1rem;line-height:1.5rem;font-style:normal;font-weight:400;box-sizing:border-box;background-color:#FFFFFF;border:none;border-bottom:1px solid #8D8786}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input:focus{outline:none;border:1px solid #0A8276}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input::placeholder{color:#999}.ifx-multiselect-container .option{position:relative;padding:8px 16px;gap:8px;align-items:center;display:flex;font-style:normal;font-weight:400}.ifx-multiselect-container .option.small-select{font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .option.medium-select{font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .option:hover{background-color:#EEEDED}.ifx-multiselect-container .option:focus:not(.disabled){background-color:#BFBBBB;outline:none}.ifx-multiselect-container .option.is-highlighted{background-color:#EEEDED}.ifx-multiselect-container .option.sub-option{padding-left:30px;}.ifx-multiselect-container .option.disabled:hover{cursor:default}.ifx-multiselect-container .option label{cursor:inherit}.select-all-wrapper{padding-top:8px}";
7
9
  const IfxMultiselectStyle0 = multiselectCss;
@@ -200,6 +202,9 @@ const Multiselect = /*@__PURE__*/ proxyCustomElement(class Multiselect extends H
200
202
  // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)
201
203
  }
202
204
  componentWillLoad() {
205
+ if (!isNestedInIfxComponent(this.el)) {
206
+ trackComponent('ifx-multiselect');
207
+ }
203
208
  this.loadInitialOptions();
204
209
  this.filteredOptions = [...this.loadedOptions];
205
210
  }
@@ -595,4 +600,4 @@ function defineCustomElement() {
595
600
 
596
601
  export { Multiselect as M, defineCustomElement as d };
597
602
 
598
- //# sourceMappingURL=p-cd833a9b.js.map
603
+ //# sourceMappingURL=p-df486632.js.map