@infineon/infineon-design-system-stencil 31.0.0--canary.1697.223df0ff1431a5398fd1261ed013c9dd2a89e7a0.0 → 31.0.0--canary.1640.e80c846ce332e4ddd95d97b8ad01c8da2d639e74.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 (630) hide show
  1. package/dist/cjs/ifx-accordion_2.cjs.entry.js +8 -8
  2. package/dist/cjs/ifx-accordion_2.cjs.entry.js.map +1 -1
  3. package/dist/cjs/ifx-alert.cjs.entry.js +1 -1
  4. package/dist/cjs/ifx-badge.cjs.entry.js +1 -1
  5. package/dist/cjs/ifx-basic-table.cjs.entry.js +1 -1
  6. package/dist/cjs/ifx-breadcrumb-item-label.cjs.entry.js +2 -2
  7. package/dist/cjs/ifx-breadcrumb-item-label.cjs.entry.js.map +1 -1
  8. package/dist/cjs/ifx-breadcrumb-item.cjs.entry.js +1 -1
  9. package/dist/cjs/ifx-breadcrumb.cjs.entry.js +4 -4
  10. package/dist/cjs/ifx-breadcrumb.cjs.entry.js.map +1 -1
  11. package/dist/cjs/ifx-button.cjs.entry.js +1 -1
  12. package/dist/cjs/ifx-card-headline.cjs.entry.js +1 -1
  13. package/dist/cjs/ifx-card-image.cjs.entry.js +1 -1
  14. package/dist/cjs/ifx-card-links.cjs.entry.js +1 -1
  15. package/dist/cjs/ifx-card-overline.cjs.entry.js +1 -1
  16. package/dist/cjs/ifx-card-text.cjs.entry.js +1 -1
  17. package/dist/cjs/ifx-card.cjs.entry.js +1 -1
  18. package/dist/cjs/ifx-checkbox.cjs.entry.js +1 -1
  19. package/dist/cjs/ifx-chip_3.cjs.entry.js +26 -28
  20. package/dist/cjs/ifx-chip_3.cjs.entry.js.map +1 -1
  21. package/dist/cjs/ifx-content-switcher-item.cjs.entry.js +1 -1
  22. package/dist/cjs/ifx-content-switcher.cjs.entry.js +1 -1
  23. package/dist/cjs/ifx-date-picker.cjs.entry.js +1 -1
  24. package/dist/cjs/ifx-dropdown-header.cjs.entry.js +1 -1
  25. package/dist/cjs/ifx-dropdown-item.cjs.entry.js +1 -1
  26. package/dist/cjs/ifx-dropdown-menu.cjs.entry.js +1 -1
  27. package/dist/cjs/ifx-dropdown-separator.cjs.entry.js +1 -1
  28. package/dist/cjs/ifx-dropdown-trigger-button.cjs.entry.js +1 -1
  29. package/dist/cjs/ifx-dropdown-trigger.cjs.entry.js +1 -1
  30. package/dist/cjs/ifx-dropdown.cjs.entry.js +1 -1
  31. package/dist/cjs/ifx-faq.cjs.entry.js +1 -1
  32. package/dist/cjs/ifx-filter-accordion.cjs.entry.js +1 -1
  33. package/dist/cjs/ifx-filter-bar.cjs.entry.js +1 -1
  34. package/dist/cjs/ifx-filter-search.cjs.entry.js +1 -1
  35. package/dist/cjs/ifx-filter-type-group.cjs.entry.js +1 -1
  36. package/dist/cjs/ifx-footer-column.cjs.entry.js +1 -1
  37. package/dist/cjs/ifx-footer.cjs.entry.js +1 -1
  38. package/dist/cjs/ifx-icon-button.cjs.entry.js +1 -1
  39. package/dist/cjs/ifx-icon.cjs.entry.js +1 -1
  40. package/dist/cjs/ifx-icons-preview.cjs.entry.js +1 -1
  41. package/dist/cjs/ifx-link.cjs.entry.js +1 -1
  42. package/dist/cjs/ifx-list-entry.cjs.entry.js +1 -1
  43. package/dist/cjs/ifx-list.cjs.entry.js +1 -1
  44. package/dist/cjs/ifx-modal.cjs.entry.js +9 -9
  45. package/dist/cjs/ifx-modal.cjs.entry.js.map +1 -1
  46. package/dist/cjs/ifx-multiselect_2.cjs.entry.js +5 -5
  47. package/dist/cjs/ifx-multiselect_2.cjs.entry.js.map +1 -1
  48. package/dist/cjs/ifx-navbar-item.cjs.entry.js +1 -1
  49. package/dist/cjs/ifx-navbar-profile.cjs.entry.js +1 -1
  50. package/dist/cjs/ifx-navbar.cjs.entry.js +4 -4
  51. package/dist/cjs/ifx-navbar.cjs.entry.js.map +1 -1
  52. package/dist/cjs/ifx-notification.cjs.entry.js +1 -1
  53. package/dist/cjs/ifx-number-indicator.cjs.entry.js +1 -1
  54. package/dist/cjs/ifx-overview-table.cjs.entry.js +1 -1
  55. package/dist/cjs/ifx-progress-bar.cjs.entry.js +1 -1
  56. package/dist/cjs/ifx-radio-button.cjs.entry.js +1 -1
  57. package/dist/cjs/ifx-search-bar.cjs.entry.js +6 -6
  58. package/dist/cjs/ifx-search-bar.cjs.entry.js.map +1 -1
  59. package/dist/cjs/ifx-search-field.cjs.entry.js +1 -1
  60. package/dist/cjs/ifx-segment.cjs.entry.js +1 -1
  61. package/dist/cjs/ifx-segmented-control.cjs.entry.js +1 -1
  62. package/dist/cjs/ifx-select.cjs.entry.js +1 -1
  63. package/dist/cjs/ifx-set-filter.cjs.entry.js +1 -1
  64. package/dist/cjs/ifx-sidebar-item.cjs.entry.js +10 -11
  65. package/dist/cjs/ifx-sidebar-item.cjs.entry.js.map +1 -1
  66. package/dist/cjs/ifx-sidebar-title.cjs.entry.js +1 -1
  67. package/dist/cjs/ifx-sidebar.cjs.entry.js +1 -1
  68. package/dist/cjs/ifx-slider.cjs.entry.js +1 -1
  69. package/dist/cjs/ifx-spinner.cjs.entry.js +1 -1
  70. package/dist/cjs/ifx-status.cjs.entry.js +1 -1
  71. package/dist/cjs/ifx-step.cjs.entry.js +1 -1
  72. package/dist/cjs/ifx-stepper.cjs.entry.js +1 -1
  73. package/dist/cjs/ifx-switch.cjs.entry.js +1 -1
  74. package/dist/cjs/ifx-tab.cjs.entry.js +1 -1
  75. package/dist/cjs/ifx-table.cjs.entry.js +23 -21
  76. package/dist/cjs/ifx-table.cjs.entry.js.map +1 -1
  77. package/dist/cjs/ifx-tabs.cjs.entry.js +7 -7
  78. package/dist/cjs/ifx-tabs.cjs.entry.js.map +1 -1
  79. package/dist/cjs/ifx-tag.cjs.entry.js +1 -1
  80. package/dist/cjs/ifx-textarea.cjs.entry.js +1 -1
  81. package/dist/cjs/ifx-tooltip.cjs.entry.js +1 -1
  82. package/dist/cjs/{index-68ed35ac.js → index-051c2b85.js} +12 -6
  83. package/dist/cjs/index-051c2b85.js.map +1 -0
  84. package/dist/cjs/infineon-design-system-stencil.cjs.js +3 -3
  85. package/dist/cjs/infineon-design-system-stencil.cjs.js.map +1 -1
  86. package/dist/cjs/loader.cjs.js +2 -2
  87. package/dist/collection/collection-manifest.json +1 -1
  88. package/dist/collection/components/accordion/accordion.js +2 -2
  89. package/dist/collection/components/accordion/accordion.js.map +1 -1
  90. package/dist/collection/components/accordion/accordion.stories.js +81 -7
  91. package/dist/collection/components/accordion/accordion.stories.js.map +1 -1
  92. package/dist/collection/components/accordion/accordionItem.js +10 -10
  93. package/dist/collection/components/accordion/accordionItem.js.map +1 -1
  94. package/dist/collection/components/alert/alert.stories.js +45 -12
  95. package/dist/collection/components/alert/alert.stories.js.map +1 -1
  96. package/dist/collection/components/badge/badge.stories.js +28 -7
  97. package/dist/collection/components/badge/badge.stories.js.map +1 -1
  98. package/dist/collection/components/breadcrumb/breadcrumb-item-label.js +3 -3
  99. package/dist/collection/components/breadcrumb/breadcrumb-item-label.js.map +1 -1
  100. package/dist/collection/components/breadcrumb/breadcrumb.js +3 -3
  101. package/dist/collection/components/breadcrumb/breadcrumb.js.map +1 -1
  102. package/dist/collection/components/breadcrumb/breadcrumb.stories.js +87 -13
  103. package/dist/collection/components/breadcrumb/breadcrumb.stories.js.map +1 -1
  104. package/dist/collection/components/button/button.stories.js +101 -9
  105. package/dist/collection/components/button/button.stories.js.map +1 -1
  106. package/dist/collection/components/card/card.stories.js +85 -4
  107. package/dist/collection/components/card/card.stories.js.map +1 -1
  108. package/dist/collection/components/checkbox/checkbox.stories.js +72 -14
  109. package/dist/collection/components/checkbox/checkbox.stories.js.map +1 -1
  110. package/dist/collection/components/chip/chip-item/chip-item.js +4 -4
  111. package/dist/collection/components/chip/chip-item/chip-item.js.map +1 -1
  112. package/dist/collection/components/chip/chip.js +15 -15
  113. package/dist/collection/components/chip/chip.js.map +1 -1
  114. package/dist/collection/components/chip/chip.stories.js +21 -26
  115. package/dist/collection/components/chip/chip.stories.js.map +1 -1
  116. package/dist/collection/components/chip/interfaces.js.map +1 -1
  117. package/dist/collection/components/content-switcher/content-switcher.stories.js +65 -3
  118. package/dist/collection/components/content-switcher/content-switcher.stories.js.map +1 -1
  119. package/dist/collection/components/date-picker/date-picker.stories.js +97 -7
  120. package/dist/collection/components/date-picker/date-picker.stories.js.map +1 -1
  121. package/dist/collection/components/dropdown/dropdown.stories.js +222 -64
  122. package/dist/collection/components/dropdown/dropdown.stories.js.map +1 -1
  123. package/dist/collection/components/footer/footer.stories.js +31 -1
  124. package/dist/collection/components/footer/footer.stories.js.map +1 -1
  125. package/dist/collection/components/icon/infineonIconStencil.stories.js +7 -2
  126. package/dist/collection/components/icon/infineonIconStencil.stories.js.map +1 -1
  127. package/dist/collection/components/icon-button/icon-button.stories.js +61 -5
  128. package/dist/collection/components/icon-button/icon-button.stories.js.map +1 -1
  129. package/dist/collection/components/link/link.stories.js +53 -4
  130. package/dist/collection/components/link/link.stories.js.map +1 -1
  131. package/dist/collection/components/modal/modal.js +10 -10
  132. package/dist/collection/components/modal/modal.js.map +1 -1
  133. package/dist/collection/components/modal/modal.stories.js +96 -19
  134. package/dist/collection/components/modal/modal.stories.js.map +1 -1
  135. package/dist/collection/components/navigation/navbar/navbar.js +4 -4
  136. package/dist/collection/components/navigation/navbar/navbar.js.map +1 -1
  137. package/dist/collection/components/navigation/navbar/navbar.stories.js +176 -12
  138. package/dist/collection/components/navigation/navbar/navbar.stories.js.map +1 -1
  139. package/dist/collection/components/navigation/sidebar/sidebar-item.js +11 -32
  140. package/dist/collection/components/navigation/sidebar/sidebar-item.js.map +1 -1
  141. package/dist/collection/components/navigation/sidebar/sidebar.stories.js +184 -19
  142. package/dist/collection/components/navigation/sidebar/sidebar.stories.js.map +1 -1
  143. package/dist/collection/components/notification/notification.stories.js +55 -8
  144. package/dist/collection/components/notification/notification.stories.js.map +1 -1
  145. package/dist/collection/components/number-indicator/number-indicator.stories.js +19 -0
  146. package/dist/collection/components/number-indicator/number-indicator.stories.js.map +1 -1
  147. package/dist/collection/components/pagination/pagination.js +8 -57
  148. package/dist/collection/components/pagination/pagination.js.map +1 -1
  149. package/dist/collection/components/pagination/pagination.stories.js +19 -16
  150. package/dist/collection/components/pagination/pagination.stories.js.map +1 -1
  151. package/dist/collection/components/progress-bar/progress-bar.stories.js +31 -8
  152. package/dist/collection/components/progress-bar/progress-bar.stories.js.map +1 -1
  153. package/dist/collection/components/radio-button/radio-button.stories.js +66 -13
  154. package/dist/collection/components/radio-button/radio-button.stories.js.map +1 -1
  155. package/dist/collection/components/search-bar/search-bar.js +6 -6
  156. package/dist/collection/components/search-bar/search-bar.js.map +1 -1
  157. package/dist/collection/components/search-bar/search-bar.stories.js +58 -9
  158. package/dist/collection/components/search-bar/search-bar.stories.js.map +1 -1
  159. package/dist/collection/components/search-field/search-field.stories.js +54 -8
  160. package/dist/collection/components/search-field/search-field.stories.js.map +1 -1
  161. package/dist/collection/components/segmented-control/segmented-control.stories.js +1 -10
  162. package/dist/collection/components/segmented-control/segmented-control.stories.js.map +1 -1
  163. package/dist/collection/components/select/multi-select/multiselect.js +5 -5
  164. package/dist/collection/components/select/multi-select/multiselect.js.map +1 -1
  165. package/dist/collection/components/select/multi-select/multiselect.stories.js +131 -5
  166. package/dist/collection/components/select/multi-select/multiselect.stories.js.map +1 -1
  167. package/dist/collection/components/select/single-select/select.stories.js +83 -26
  168. package/dist/collection/components/select/single-select/select.stories.js.map +1 -1
  169. package/dist/collection/components/slider/slider.stories.js +97 -13
  170. package/dist/collection/components/slider/slider.stories.js.map +1 -1
  171. package/dist/collection/components/spinner/spinner.stories.js +34 -2
  172. package/dist/collection/components/spinner/spinner.stories.js.map +1 -1
  173. package/dist/collection/components/status/status.stories.js +25 -1
  174. package/dist/collection/components/status/status.stories.js.map +1 -1
  175. package/dist/collection/components/stepper/stepper.stories.js +54 -25
  176. package/dist/collection/components/stepper/stepper.stories.js.map +1 -1
  177. package/dist/collection/components/switch/switch.stories.js +51 -4
  178. package/dist/collection/components/switch/switch.stories.js.map +1 -1
  179. package/dist/collection/components/table-advanced-version/table.js +23 -21
  180. package/dist/collection/components/table-advanced-version/table.js.map +1 -1
  181. package/dist/collection/components/table-advanced-version/table.stories.js +124 -39
  182. package/dist/collection/components/table-advanced-version/table.stories.js.map +1 -1
  183. package/dist/collection/components/table-basic-version/table.stories.js +31 -4
  184. package/dist/collection/components/table-basic-version/table.stories.js.map +1 -1
  185. package/dist/collection/components/tabs/tabs.js +7 -7
  186. package/dist/collection/components/tabs/tabs.js.map +1 -1
  187. package/dist/collection/components/tabs/tabs.stories.js +104 -29
  188. package/dist/collection/components/tabs/tabs.stories.js.map +1 -1
  189. package/dist/collection/components/tag/tag.stories.js +18 -0
  190. package/dist/collection/components/tag/tag.stories.js.map +1 -1
  191. package/dist/collection/components/text-field/text-field.stories.js +116 -13
  192. package/dist/collection/components/text-field/text-field.stories.js.map +1 -1
  193. package/dist/collection/components/textarea/textarea.stories.js +1 -3
  194. package/dist/collection/components/textarea/textarea.stories.js.map +1 -1
  195. package/dist/collection/components/tooltip/tooltip.stories.js +48 -4
  196. package/dist/collection/components/tooltip/tooltip.stories.js.map +1 -1
  197. package/dist/components/ifx-accordion-item.js +1 -1
  198. package/dist/components/ifx-accordion.js +1 -1
  199. package/dist/components/ifx-alert.js +2 -2
  200. package/dist/components/ifx-badge.js +1 -1
  201. package/dist/components/ifx-basic-table.js +1 -1
  202. package/dist/components/ifx-breadcrumb-item-label.js +4 -4
  203. package/dist/components/ifx-breadcrumb-item-label.js.map +1 -1
  204. package/dist/components/ifx-breadcrumb-item.js +1 -1
  205. package/dist/components/ifx-breadcrumb.js +4 -4
  206. package/dist/components/ifx-breadcrumb.js.map +1 -1
  207. package/dist/components/ifx-button.js +1 -1
  208. package/dist/components/ifx-card-headline.js +1 -1
  209. package/dist/components/ifx-card-image.js +1 -1
  210. package/dist/components/ifx-card-links.js +1 -1
  211. package/dist/components/ifx-card-overline.js +1 -1
  212. package/dist/components/ifx-card-text.js +1 -1
  213. package/dist/components/ifx-card.js +1 -1
  214. package/dist/components/ifx-checkbox.js +1 -1
  215. package/dist/components/ifx-chip-item.js +1 -1
  216. package/dist/components/ifx-chip.js +1 -1
  217. package/dist/components/ifx-content-switcher-item.js +1 -1
  218. package/dist/components/ifx-content-switcher.js +1 -1
  219. package/dist/components/ifx-date-picker.js +2 -2
  220. package/dist/components/ifx-dropdown-header.js +1 -1
  221. package/dist/components/ifx-dropdown-item.js +2 -2
  222. package/dist/components/ifx-dropdown-menu.js +1 -1
  223. package/dist/components/ifx-dropdown-separator.js +1 -1
  224. package/dist/components/ifx-dropdown-trigger-button.js +3 -3
  225. package/dist/components/ifx-dropdown-trigger.js +1 -1
  226. package/dist/components/ifx-dropdown.js +1 -1
  227. package/dist/components/ifx-faq.js +4 -4
  228. package/dist/components/ifx-filter-accordion.js +3 -3
  229. package/dist/components/ifx-filter-bar.js +3 -3
  230. package/dist/components/ifx-filter-search.js +3 -3
  231. package/dist/components/ifx-filter-type-group.js +1 -1
  232. package/dist/components/ifx-footer-column.js +1 -1
  233. package/dist/components/ifx-footer.js +1 -1
  234. package/dist/components/ifx-icon-button.js +1 -1
  235. package/dist/components/ifx-icon.js +1 -1
  236. package/dist/components/ifx-icons-preview.js +4 -4
  237. package/dist/components/ifx-link.js +1 -1
  238. package/dist/components/ifx-list-entry.js +4 -4
  239. package/dist/components/ifx-list.js +3 -3
  240. package/dist/components/ifx-modal.js +11 -11
  241. package/dist/components/ifx-modal.js.map +1 -1
  242. package/dist/components/ifx-multiselect.js +1 -1
  243. package/dist/components/ifx-navbar-item.js +2 -2
  244. package/dist/components/ifx-navbar-profile.js +1 -1
  245. package/dist/components/ifx-navbar.js +6 -6
  246. package/dist/components/ifx-navbar.js.map +1 -1
  247. package/dist/components/ifx-notification.js +1 -1
  248. package/dist/components/ifx-number-indicator.js +1 -1
  249. package/dist/components/ifx-overview-table.js +4 -4
  250. package/dist/components/ifx-pagination.js +1 -1
  251. package/dist/components/ifx-progress-bar.js +1 -1
  252. package/dist/components/ifx-radio-button.js +1 -1
  253. package/dist/components/ifx-search-bar.js +8 -8
  254. package/dist/components/ifx-search-bar.js.map +1 -1
  255. package/dist/components/ifx-search-field.js +1 -1
  256. package/dist/components/ifx-segment.js +2 -2
  257. package/dist/components/ifx-segmented-control.js +2 -2
  258. package/dist/components/ifx-select.js +1 -1
  259. package/dist/components/ifx-set-filter.js +7 -7
  260. package/dist/components/ifx-sidebar-item.js +14 -16
  261. package/dist/components/ifx-sidebar-item.js.map +1 -1
  262. package/dist/components/ifx-sidebar-title.js +1 -1
  263. package/dist/components/ifx-sidebar.js +1 -1
  264. package/dist/components/ifx-slider.js +2 -2
  265. package/dist/components/ifx-spinner.js +1 -1
  266. package/dist/components/ifx-status.js +1 -1
  267. package/dist/components/ifx-step.js +2 -2
  268. package/dist/components/ifx-stepper.js +1 -1
  269. package/dist/components/ifx-switch.js +1 -1
  270. package/dist/components/ifx-tab.js +1 -1
  271. package/dist/components/ifx-table.js +33 -31
  272. package/dist/components/ifx-table.js.map +1 -1
  273. package/dist/components/ifx-tabs.js +8 -8
  274. package/dist/components/ifx-tabs.js.map +1 -1
  275. package/dist/components/ifx-tag.js +2 -2
  276. package/dist/components/ifx-text-field.js +1 -1
  277. package/dist/components/ifx-textarea.js +1 -1
  278. package/dist/components/ifx-tooltip.js +2 -2
  279. package/dist/components/index.js +1 -1
  280. package/dist/components/{p-9c024a54.js → p-0e357e6f.js} +3 -3
  281. package/dist/components/{p-9c024a54.js.map → p-0e357e6f.js.map} +1 -1
  282. package/dist/components/{p-f4d50678.js → p-1704ea58.js} +3 -3
  283. package/dist/components/{p-f4d50678.js.map → p-1704ea58.js.map} +1 -1
  284. package/dist/components/{p-6fd6d1a9.js → p-23308a28.js} +3 -3
  285. package/dist/components/{p-6fd6d1a9.js.map → p-23308a28.js.map} +1 -1
  286. package/dist/components/{p-ec9d64bf.js → p-2e231e98.js} +2 -2
  287. package/dist/components/{p-ec9d64bf.js.map → p-2e231e98.js.map} +1 -1
  288. package/dist/components/{p-1bb86196.js → p-3f813ba7.js} +3 -3
  289. package/dist/components/{p-1bb86196.js.map → p-3f813ba7.js.map} +1 -1
  290. package/dist/components/{p-3ee20ed5.js → p-434f667f.js} +2 -5
  291. package/dist/components/p-434f667f.js.map +1 -0
  292. package/dist/components/{p-232d5fcd.js → p-468371aa.js} +4 -4
  293. package/dist/components/{p-232d5fcd.js.map → p-468371aa.js.map} +1 -1
  294. package/dist/components/{p-e8836259.js → p-4b44b9bb.js} +2 -2
  295. package/dist/components/{p-e8836259.js.map → p-4b44b9bb.js.map} +1 -1
  296. package/dist/components/{p-d3904b2f.js → p-55f0c583.js} +9 -9
  297. package/dist/components/p-55f0c583.js.map +1 -0
  298. package/dist/components/{p-73a1df17.js → p-5e9d239f.js} +2 -2
  299. package/dist/components/{p-73a1df17.js.map → p-5e9d239f.js.map} +1 -1
  300. package/dist/components/{p-ff48962a.js → p-6d09225b.js} +10 -10
  301. package/dist/components/{p-ff48962a.js.map → p-6d09225b.js.map} +1 -1
  302. package/dist/components/{p-a0ee8035.js → p-810b4f96.js} +2 -2
  303. package/dist/components/{p-a0ee8035.js.map → p-810b4f96.js.map} +1 -1
  304. package/dist/components/{p-654ff7d8.js → p-8b04d988.js} +4 -4
  305. package/dist/components/{p-654ff7d8.js.map → p-8b04d988.js.map} +1 -1
  306. package/dist/components/{p-e74c8dfd.js → p-8e6edff2.js} +3 -3
  307. package/dist/components/{p-e74c8dfd.js.map → p-8e6edff2.js.map} +1 -1
  308. package/dist/components/{p-0fce434b.js → p-9c4bd9ce.js} +18 -18
  309. package/dist/components/p-9c4bd9ce.js.map +1 -0
  310. package/dist/components/{p-a7e5035e.js → p-c2dad511.js} +13 -16
  311. package/dist/components/p-c2dad511.js.map +1 -0
  312. package/dist/components/{p-5bc6d67d.js → p-c344fb60.js} +2 -2
  313. package/dist/components/{p-5bc6d67d.js.map → p-c344fb60.js.map} +1 -1
  314. package/dist/components/{p-e57d6c00.js → p-c5056a89.js} +8 -8
  315. package/dist/components/p-c5056a89.js.map +1 -0
  316. package/dist/components/{p-828bbb25.js → p-d2bece93.js} +2 -2
  317. package/dist/components/{p-828bbb25.js.map → p-d2bece93.js.map} +1 -1
  318. package/dist/esm/ifx-accordion_2.entry.js +8 -8
  319. package/dist/esm/ifx-accordion_2.entry.js.map +1 -1
  320. package/dist/esm/ifx-alert.entry.js +1 -1
  321. package/dist/esm/ifx-badge.entry.js +1 -1
  322. package/dist/esm/ifx-basic-table.entry.js +1 -1
  323. package/dist/esm/ifx-breadcrumb-item-label.entry.js +2 -2
  324. package/dist/esm/ifx-breadcrumb-item-label.entry.js.map +1 -1
  325. package/dist/esm/ifx-breadcrumb-item.entry.js +1 -1
  326. package/dist/esm/ifx-breadcrumb.entry.js +4 -4
  327. package/dist/esm/ifx-breadcrumb.entry.js.map +1 -1
  328. package/dist/esm/ifx-button.entry.js +1 -1
  329. package/dist/esm/ifx-card-headline.entry.js +1 -1
  330. package/dist/esm/ifx-card-image.entry.js +1 -1
  331. package/dist/esm/ifx-card-links.entry.js +1 -1
  332. package/dist/esm/ifx-card-overline.entry.js +1 -1
  333. package/dist/esm/ifx-card-text.entry.js +1 -1
  334. package/dist/esm/ifx-card.entry.js +1 -1
  335. package/dist/esm/ifx-checkbox.entry.js +1 -1
  336. package/dist/esm/ifx-chip_3.entry.js +26 -28
  337. package/dist/esm/ifx-chip_3.entry.js.map +1 -1
  338. package/dist/esm/ifx-content-switcher-item.entry.js +1 -1
  339. package/dist/esm/ifx-content-switcher.entry.js +1 -1
  340. package/dist/esm/ifx-date-picker.entry.js +1 -1
  341. package/dist/esm/ifx-dropdown-header.entry.js +1 -1
  342. package/dist/esm/ifx-dropdown-item.entry.js +1 -1
  343. package/dist/esm/ifx-dropdown-menu.entry.js +1 -1
  344. package/dist/esm/ifx-dropdown-separator.entry.js +1 -1
  345. package/dist/esm/ifx-dropdown-trigger-button.entry.js +1 -1
  346. package/dist/esm/ifx-dropdown-trigger.entry.js +1 -1
  347. package/dist/esm/ifx-dropdown.entry.js +1 -1
  348. package/dist/esm/ifx-faq.entry.js +1 -1
  349. package/dist/esm/ifx-filter-accordion.entry.js +1 -1
  350. package/dist/esm/ifx-filter-bar.entry.js +1 -1
  351. package/dist/esm/ifx-filter-search.entry.js +1 -1
  352. package/dist/esm/ifx-filter-type-group.entry.js +1 -1
  353. package/dist/esm/ifx-footer-column.entry.js +1 -1
  354. package/dist/esm/ifx-footer.entry.js +1 -1
  355. package/dist/esm/ifx-icon-button.entry.js +1 -1
  356. package/dist/esm/ifx-icon.entry.js +1 -1
  357. package/dist/esm/ifx-icons-preview.entry.js +1 -1
  358. package/dist/esm/ifx-link.entry.js +1 -1
  359. package/dist/esm/ifx-list-entry.entry.js +1 -1
  360. package/dist/esm/ifx-list.entry.js +1 -1
  361. package/dist/esm/ifx-modal.entry.js +9 -9
  362. package/dist/esm/ifx-modal.entry.js.map +1 -1
  363. package/dist/esm/ifx-multiselect_2.entry.js +5 -5
  364. package/dist/esm/ifx-multiselect_2.entry.js.map +1 -1
  365. package/dist/esm/ifx-navbar-item.entry.js +1 -1
  366. package/dist/esm/ifx-navbar-profile.entry.js +1 -1
  367. package/dist/esm/ifx-navbar.entry.js +4 -4
  368. package/dist/esm/ifx-navbar.entry.js.map +1 -1
  369. package/dist/esm/ifx-notification.entry.js +1 -1
  370. package/dist/esm/ifx-number-indicator.entry.js +1 -1
  371. package/dist/esm/ifx-overview-table.entry.js +1 -1
  372. package/dist/esm/ifx-progress-bar.entry.js +1 -1
  373. package/dist/esm/ifx-radio-button.entry.js +1 -1
  374. package/dist/esm/ifx-search-bar.entry.js +6 -6
  375. package/dist/esm/ifx-search-bar.entry.js.map +1 -1
  376. package/dist/esm/ifx-search-field.entry.js +1 -1
  377. package/dist/esm/ifx-segment.entry.js +1 -1
  378. package/dist/esm/ifx-segmented-control.entry.js +1 -1
  379. package/dist/esm/ifx-select.entry.js +1 -1
  380. package/dist/esm/ifx-set-filter.entry.js +1 -1
  381. package/dist/esm/ifx-sidebar-item.entry.js +10 -11
  382. package/dist/esm/ifx-sidebar-item.entry.js.map +1 -1
  383. package/dist/esm/ifx-sidebar-title.entry.js +1 -1
  384. package/dist/esm/ifx-sidebar.entry.js +1 -1
  385. package/dist/esm/ifx-slider.entry.js +1 -1
  386. package/dist/esm/ifx-spinner.entry.js +1 -1
  387. package/dist/esm/ifx-status.entry.js +1 -1
  388. package/dist/esm/ifx-step.entry.js +1 -1
  389. package/dist/esm/ifx-stepper.entry.js +1 -1
  390. package/dist/esm/ifx-switch.entry.js +1 -1
  391. package/dist/esm/ifx-tab.entry.js +1 -1
  392. package/dist/esm/ifx-table.entry.js +23 -21
  393. package/dist/esm/ifx-table.entry.js.map +1 -1
  394. package/dist/esm/ifx-tabs.entry.js +7 -7
  395. package/dist/esm/ifx-tabs.entry.js.map +1 -1
  396. package/dist/esm/ifx-tag.entry.js +1 -1
  397. package/dist/esm/ifx-textarea.entry.js +1 -1
  398. package/dist/esm/ifx-tooltip.entry.js +1 -1
  399. package/dist/esm/{index-f6e95f3d.js → index-835fed6c.js} +12 -6
  400. package/dist/esm/index-835fed6c.js.map +1 -0
  401. package/dist/esm/infineon-design-system-stencil.js +4 -4
  402. package/dist/esm/infineon-design-system-stencil.js.map +1 -1
  403. package/dist/esm/loader.js +3 -3
  404. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
  405. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js.map +1 -1
  406. package/dist/infineon-design-system-stencil/p-014d2c5a.js +3 -0
  407. package/dist/infineon-design-system-stencil/p-014d2c5a.js.map +1 -0
  408. package/dist/infineon-design-system-stencil/p-095f26a2.entry.js +2 -0
  409. package/dist/infineon-design-system-stencil/p-095f26a2.entry.js.map +1 -0
  410. package/dist/infineon-design-system-stencil/{p-62c705f1.entry.js → p-0b9c7ab7.entry.js} +2 -2
  411. package/dist/infineon-design-system-stencil/{p-03f5d7d6.entry.js → p-0cbb7404.entry.js} +2 -2
  412. package/dist/infineon-design-system-stencil/p-114f04b4.entry.js +2 -0
  413. package/dist/infineon-design-system-stencil/p-114f04b4.entry.js.map +1 -0
  414. package/dist/infineon-design-system-stencil/{p-258c4e35.entry.js → p-1293841a.entry.js} +2 -2
  415. package/dist/infineon-design-system-stencil/p-1293841a.entry.js.map +1 -0
  416. package/dist/infineon-design-system-stencil/{p-96e3c31e.entry.js → p-13951b60.entry.js} +2 -2
  417. package/dist/infineon-design-system-stencil/{p-4349f994.entry.js → p-16023b8a.entry.js} +2 -2
  418. package/dist/infineon-design-system-stencil/{p-0fdd8cca.entry.js → p-189d4d1f.entry.js} +2 -2
  419. package/dist/infineon-design-system-stencil/{p-12db6350.entry.js → p-1f17cbfe.entry.js} +2 -2
  420. package/dist/infineon-design-system-stencil/{p-f20951d0.entry.js → p-2ab2c5cf.entry.js} +2 -2
  421. package/dist/infineon-design-system-stencil/{p-d8cc865a.entry.js → p-2cd1bc96.entry.js} +2 -2
  422. package/dist/infineon-design-system-stencil/{p-82f9da03.entry.js → p-317304e2.entry.js} +2 -2
  423. package/dist/infineon-design-system-stencil/{p-814da9fd.entry.js → p-332a86b5.entry.js} +2 -2
  424. package/dist/infineon-design-system-stencil/{p-4bf95d5b.entry.js → p-3479b38d.entry.js} +2 -2
  425. package/dist/infineon-design-system-stencil/{p-01a1f6d0.entry.js → p-356db73e.entry.js} +2 -2
  426. package/dist/infineon-design-system-stencil/{p-3384179d.entry.js → p-35ee2105.entry.js} +2 -2
  427. package/dist/infineon-design-system-stencil/{p-c7607cbd.entry.js → p-364bcc43.entry.js} +2 -2
  428. package/dist/infineon-design-system-stencil/{p-7a0b2fd1.entry.js → p-3c0396d6.entry.js} +2 -2
  429. package/dist/infineon-design-system-stencil/{p-3af201db.entry.js → p-3cf45ded.entry.js} +2 -2
  430. package/dist/infineon-design-system-stencil/p-408c049a.entry.js +2 -0
  431. package/dist/infineon-design-system-stencil/p-408c049a.entry.js.map +1 -0
  432. package/dist/infineon-design-system-stencil/{p-4faad7d7.entry.js → p-40f16247.entry.js} +2 -2
  433. package/dist/infineon-design-system-stencil/{p-c85d7577.entry.js → p-480d7667.entry.js} +2 -2
  434. package/dist/infineon-design-system-stencil/{p-8df0dd12.entry.js → p-4c2b5642.entry.js} +2 -2
  435. package/dist/infineon-design-system-stencil/{p-1fad8ea5.entry.js → p-4d315bca.entry.js} +2 -2
  436. package/dist/infineon-design-system-stencil/{p-f42bc9c8.entry.js → p-4e07c00d.entry.js} +2 -2
  437. package/dist/infineon-design-system-stencil/{p-c2ff66ea.entry.js → p-54911d95.entry.js} +2 -2
  438. package/dist/infineon-design-system-stencil/{p-672bcd0b.entry.js → p-56e54271.entry.js} +2 -2
  439. package/dist/infineon-design-system-stencil/{p-1ad03102.entry.js → p-59d0f2d9.entry.js} +2 -2
  440. package/dist/infineon-design-system-stencil/{p-b3882dc0.entry.js → p-5e954f0b.entry.js} +2 -2
  441. package/dist/infineon-design-system-stencil/{p-0b79cb38.entry.js → p-6b61e09e.entry.js} +2 -2
  442. package/dist/infineon-design-system-stencil/{p-eeccb158.entry.js → p-6d9c1cd0.entry.js} +2 -2
  443. package/dist/infineon-design-system-stencil/{p-347a1e85.entry.js → p-7415f5bf.entry.js} +2 -2
  444. package/dist/infineon-design-system-stencil/{p-39fb5fb9.entry.js → p-75556b75.entry.js} +2 -2
  445. package/dist/infineon-design-system-stencil/{p-234d0bed.entry.js → p-8252f9c7.entry.js} +2 -2
  446. package/dist/infineon-design-system-stencil/{p-88bd6a1e.entry.js → p-8640d834.entry.js} +2 -2
  447. package/dist/infineon-design-system-stencil/{p-cb3a70ad.entry.js → p-8a349fb4.entry.js} +2 -2
  448. package/dist/infineon-design-system-stencil/{p-53e75622.entry.js → p-8cf5d054.entry.js} +2 -2
  449. package/dist/infineon-design-system-stencil/{p-934704d9.entry.js → p-8ee88c7e.entry.js} +2 -2
  450. package/dist/infineon-design-system-stencil/{p-3f5c3424.entry.js → p-8f2cc008.entry.js} +2 -2
  451. package/dist/infineon-design-system-stencil/{p-b37f692b.entry.js → p-8fc46f6c.entry.js} +2 -2
  452. package/dist/infineon-design-system-stencil/{p-e2ad853d.entry.js → p-9297efbe.entry.js} +2 -2
  453. package/dist/infineon-design-system-stencil/{p-1f004047.entry.js → p-9435833d.entry.js} +2 -2
  454. package/dist/infineon-design-system-stencil/p-9435833d.entry.js.map +1 -0
  455. package/dist/infineon-design-system-stencil/{p-1f0bc888.entry.js → p-961b12af.entry.js} +2 -2
  456. package/dist/infineon-design-system-stencil/p-97854fec.entry.js +2 -0
  457. package/dist/infineon-design-system-stencil/p-97854fec.entry.js.map +1 -0
  458. package/dist/infineon-design-system-stencil/{p-aa5f89b6.entry.js → p-a4d2a1b0.entry.js} +2 -2
  459. package/dist/infineon-design-system-stencil/{p-407c4329.entry.js → p-a722dd38.entry.js} +2 -2
  460. package/dist/infineon-design-system-stencil/{p-a2f7459e.entry.js → p-a74a35d2.entry.js} +2 -2
  461. package/dist/infineon-design-system-stencil/p-ac4825f2.entry.js +2 -0
  462. package/dist/infineon-design-system-stencil/{p-500bc0ed.entry.js.map → p-ac4825f2.entry.js.map} +1 -1
  463. package/dist/infineon-design-system-stencil/{p-6c18926e.entry.js → p-afeba5e9.entry.js} +2 -2
  464. package/dist/infineon-design-system-stencil/p-afeba5e9.entry.js.map +1 -0
  465. package/dist/infineon-design-system-stencil/p-b09a9f07.entry.js +2 -0
  466. package/dist/infineon-design-system-stencil/p-b09a9f07.entry.js.map +1 -0
  467. package/dist/infineon-design-system-stencil/{p-5a3c5cce.entry.js → p-b372fe7d.entry.js} +2 -2
  468. package/dist/infineon-design-system-stencil/p-b4ed1b8b.entry.js +2 -0
  469. package/dist/infineon-design-system-stencil/{p-fb455026.entry.js.map → p-b4ed1b8b.entry.js.map} +1 -1
  470. package/dist/infineon-design-system-stencil/p-b642a0c9.entry.js +2 -0
  471. package/dist/infineon-design-system-stencil/{p-598ec153.entry.js → p-b78de976.entry.js} +2 -2
  472. package/dist/infineon-design-system-stencil/{p-c646ffcc.entry.js → p-c0698c6a.entry.js} +2 -2
  473. package/dist/infineon-design-system-stencil/{p-2f12adbc.entry.js → p-c2ed0a00.entry.js} +2 -2
  474. package/dist/infineon-design-system-stencil/{p-21c07ef9.entry.js → p-cee407bb.entry.js} +2 -2
  475. package/dist/infineon-design-system-stencil/{p-d2630254.entry.js → p-d0b64bca.entry.js} +2 -2
  476. package/dist/infineon-design-system-stencil/{p-7cc1beed.entry.js → p-d2dbc80b.entry.js} +2 -2
  477. package/dist/infineon-design-system-stencil/p-d2dbc80b.entry.js.map +1 -0
  478. package/dist/infineon-design-system-stencil/p-d3051bbf.entry.js +2 -0
  479. package/dist/infineon-design-system-stencil/p-d3051bbf.entry.js.map +1 -0
  480. package/dist/infineon-design-system-stencil/{p-b120a552.entry.js → p-d630716a.entry.js} +2 -2
  481. package/dist/infineon-design-system-stencil/{p-d57b5e31.entry.js → p-e06dc41b.entry.js} +2 -2
  482. package/dist/infineon-design-system-stencil/{p-33f5c7b8.entry.js → p-e2d80669.entry.js} +2 -2
  483. package/dist/infineon-design-system-stencil/{p-85468723.entry.js → p-e6212e02.entry.js} +2 -2
  484. package/dist/infineon-design-system-stencil/{p-3b02b076.entry.js → p-ea180cce.entry.js} +2 -2
  485. package/dist/infineon-design-system-stencil/p-ef18e376.entry.js +2 -0
  486. package/dist/infineon-design-system-stencil/{p-22496889.entry.js.map → p-ef18e376.entry.js.map} +1 -1
  487. package/dist/infineon-design-system-stencil/p-efde6e57.entry.js +2 -0
  488. package/dist/infineon-design-system-stencil/p-f0067aa9.entry.js +2 -0
  489. package/dist/infineon-design-system-stencil/{p-392f1655.entry.js → p-f86f7020.entry.js} +2 -2
  490. package/dist/infineon-design-system-stencil/{p-f9bf9346.entry.js → p-f9ca49f1.entry.js} +2 -2
  491. package/dist/types/components/accordion/accordion.stories.d.ts +67 -1
  492. package/dist/types/components/accordion/accordionItem.d.ts +3 -3
  493. package/dist/types/components/alert/alert.stories.d.ts +38 -11
  494. package/dist/types/components/badge/badge.stories.d.ts +23 -3
  495. package/dist/types/components/breadcrumb/breadcrumb-item-label.d.ts +1 -1
  496. package/dist/types/components/breadcrumb/breadcrumb.stories.d.ts +83 -1
  497. package/dist/types/components/button/button.stories.d.ts +92 -16
  498. package/dist/types/components/card/card.stories.d.ts +95 -1
  499. package/dist/types/components/checkbox/checkbox.stories.d.ts +65 -10
  500. package/dist/types/components/chip/chip-item/chip-item.d.ts +1 -1
  501. package/dist/types/components/chip/chip.d.ts +1 -1
  502. package/dist/types/components/chip/chip.stories.d.ts +11 -4
  503. package/dist/types/components/chip/interfaces.d.ts +1 -1
  504. package/dist/types/components/content-switcher/content-switcher.stories.d.ts +66 -0
  505. package/dist/types/components/date-picker/date-picker.stories.d.ts +89 -2
  506. package/dist/types/components/dropdown/dropdown.stories.d.ts +90 -33
  507. package/dist/types/components/footer/footer.stories.d.ts +26 -0
  508. package/dist/types/components/icon/infineonIconStencil.stories.d.ts +5 -0
  509. package/dist/types/components/icon-button/icon-button.stories.d.ts +56 -8
  510. package/dist/types/components/link/link.stories.d.ts +49 -6
  511. package/dist/types/components/modal/modal.d.ts +2 -2
  512. package/dist/types/components/modal/modal.stories.d.ts +77 -3
  513. package/dist/types/components/navigation/navbar/navbar.stories.d.ts +222 -6
  514. package/dist/types/components/navigation/sidebar/sidebar-item.d.ts +2 -3
  515. package/dist/types/components/navigation/sidebar/sidebar.stories.d.ts +161 -7
  516. package/dist/types/components/notification/notification.stories.d.ts +46 -2
  517. package/dist/types/components/number-indicator/number-indicator.stories.d.ts +19 -0
  518. package/dist/types/components/pagination/pagination.d.ts +1 -4
  519. package/dist/types/components/pagination/pagination.stories.d.ts +12 -8
  520. package/dist/types/components/progress-bar/progress-bar.stories.d.ts +25 -4
  521. package/dist/types/components/radio-button/radio-button.stories.d.ts +59 -8
  522. package/dist/types/components/search-bar/search-bar.d.ts +1 -1
  523. package/dist/types/components/search-bar/search-bar.stories.d.ts +60 -3
  524. package/dist/types/components/search-field/search-field.stories.d.ts +45 -6
  525. package/dist/types/components/segmented-control/segmented-control.stories.d.ts +0 -3
  526. package/dist/types/components/select/multi-select/multiselect.d.ts +1 -1
  527. package/dist/types/components/select/multi-select/multiselect.stories.d.ts +125 -0
  528. package/dist/types/components/select/single-select/select.stories.d.ts +67 -24
  529. package/dist/types/components/slider/slider.stories.d.ts +110 -0
  530. package/dist/types/components/spinner/spinner.stories.d.ts +32 -0
  531. package/dist/types/components/status/status.stories.d.ts +24 -2
  532. package/dist/types/components/stepper/stepper.stories.d.ts +30 -6
  533. package/dist/types/components/switch/switch.stories.d.ts +47 -1
  534. package/dist/types/components/table-advanced-version/table.stories.d.ts +50 -11
  535. package/dist/types/components/table-basic-version/table.stories.d.ts +21 -1
  536. package/dist/types/components/tabs/tabs.d.ts +1 -1
  537. package/dist/types/components/tabs/tabs.stories.d.ts +88 -9
  538. package/dist/types/components/tag/tag.stories.d.ts +20 -0
  539. package/dist/types/components/text-field/text-field.stories.d.ts +106 -10
  540. package/dist/types/components/tooltip/tooltip.stories.d.ts +41 -6
  541. package/dist/types/components.d.ts +20 -28
  542. package/package.json +3 -2
  543. package/dist/cjs/index-68ed35ac.js.map +0 -1
  544. package/dist/components/p-0fce434b.js.map +0 -1
  545. package/dist/components/p-3ee20ed5.js.map +0 -1
  546. package/dist/components/p-a7e5035e.js.map +0 -1
  547. package/dist/components/p-d3904b2f.js.map +0 -1
  548. package/dist/components/p-e57d6c00.js.map +0 -1
  549. package/dist/esm/index-f6e95f3d.js.map +0 -1
  550. package/dist/infineon-design-system-stencil/p-1f004047.entry.js.map +0 -1
  551. package/dist/infineon-design-system-stencil/p-22496889.entry.js +0 -2
  552. package/dist/infineon-design-system-stencil/p-258c4e35.entry.js.map +0 -1
  553. package/dist/infineon-design-system-stencil/p-500bc0ed.entry.js +0 -2
  554. package/dist/infineon-design-system-stencil/p-5acdecf6.entry.js +0 -2
  555. package/dist/infineon-design-system-stencil/p-5acdecf6.entry.js.map +0 -1
  556. package/dist/infineon-design-system-stencil/p-6c18926e.entry.js.map +0 -1
  557. package/dist/infineon-design-system-stencil/p-6c89883f.entry.js +0 -2
  558. package/dist/infineon-design-system-stencil/p-77a8fc5e.entry.js +0 -2
  559. package/dist/infineon-design-system-stencil/p-77a8fc5e.entry.js.map +0 -1
  560. package/dist/infineon-design-system-stencil/p-7cc1beed.entry.js.map +0 -1
  561. package/dist/infineon-design-system-stencil/p-98c50956.entry.js +0 -2
  562. package/dist/infineon-design-system-stencil/p-98c50956.entry.js.map +0 -1
  563. package/dist/infineon-design-system-stencil/p-abba423a.entry.js +0 -2
  564. package/dist/infineon-design-system-stencil/p-c6ff49d7.entry.js +0 -2
  565. package/dist/infineon-design-system-stencil/p-c6ff49d7.entry.js.map +0 -1
  566. package/dist/infineon-design-system-stencil/p-d61ab729.entry.js +0 -2
  567. package/dist/infineon-design-system-stencil/p-d61ab729.entry.js.map +0 -1
  568. package/dist/infineon-design-system-stencil/p-e07ca773.entry.js +0 -2
  569. package/dist/infineon-design-system-stencil/p-e244bae4.js +0 -3
  570. package/dist/infineon-design-system-stencil/p-e244bae4.js.map +0 -1
  571. package/dist/infineon-design-system-stencil/p-f63ce1bc.entry.js +0 -2
  572. package/dist/infineon-design-system-stencil/p-f63ce1bc.entry.js.map +0 -1
  573. package/dist/infineon-design-system-stencil/p-fb455026.entry.js +0 -2
  574. /package/dist/infineon-design-system-stencil/{p-62c705f1.entry.js.map → p-0b9c7ab7.entry.js.map} +0 -0
  575. /package/dist/infineon-design-system-stencil/{p-03f5d7d6.entry.js.map → p-0cbb7404.entry.js.map} +0 -0
  576. /package/dist/infineon-design-system-stencil/{p-96e3c31e.entry.js.map → p-13951b60.entry.js.map} +0 -0
  577. /package/dist/infineon-design-system-stencil/{p-4349f994.entry.js.map → p-16023b8a.entry.js.map} +0 -0
  578. /package/dist/infineon-design-system-stencil/{p-0fdd8cca.entry.js.map → p-189d4d1f.entry.js.map} +0 -0
  579. /package/dist/infineon-design-system-stencil/{p-12db6350.entry.js.map → p-1f17cbfe.entry.js.map} +0 -0
  580. /package/dist/infineon-design-system-stencil/{p-f20951d0.entry.js.map → p-2ab2c5cf.entry.js.map} +0 -0
  581. /package/dist/infineon-design-system-stencil/{p-d8cc865a.entry.js.map → p-2cd1bc96.entry.js.map} +0 -0
  582. /package/dist/infineon-design-system-stencil/{p-82f9da03.entry.js.map → p-317304e2.entry.js.map} +0 -0
  583. /package/dist/infineon-design-system-stencil/{p-814da9fd.entry.js.map → p-332a86b5.entry.js.map} +0 -0
  584. /package/dist/infineon-design-system-stencil/{p-4bf95d5b.entry.js.map → p-3479b38d.entry.js.map} +0 -0
  585. /package/dist/infineon-design-system-stencil/{p-01a1f6d0.entry.js.map → p-356db73e.entry.js.map} +0 -0
  586. /package/dist/infineon-design-system-stencil/{p-3384179d.entry.js.map → p-35ee2105.entry.js.map} +0 -0
  587. /package/dist/infineon-design-system-stencil/{p-c7607cbd.entry.js.map → p-364bcc43.entry.js.map} +0 -0
  588. /package/dist/infineon-design-system-stencil/{p-7a0b2fd1.entry.js.map → p-3c0396d6.entry.js.map} +0 -0
  589. /package/dist/infineon-design-system-stencil/{p-3af201db.entry.js.map → p-3cf45ded.entry.js.map} +0 -0
  590. /package/dist/infineon-design-system-stencil/{p-4faad7d7.entry.js.map → p-40f16247.entry.js.map} +0 -0
  591. /package/dist/infineon-design-system-stencil/{p-c85d7577.entry.js.map → p-480d7667.entry.js.map} +0 -0
  592. /package/dist/infineon-design-system-stencil/{p-8df0dd12.entry.js.map → p-4c2b5642.entry.js.map} +0 -0
  593. /package/dist/infineon-design-system-stencil/{p-1fad8ea5.entry.js.map → p-4d315bca.entry.js.map} +0 -0
  594. /package/dist/infineon-design-system-stencil/{p-f42bc9c8.entry.js.map → p-4e07c00d.entry.js.map} +0 -0
  595. /package/dist/infineon-design-system-stencil/{p-c2ff66ea.entry.js.map → p-54911d95.entry.js.map} +0 -0
  596. /package/dist/infineon-design-system-stencil/{p-672bcd0b.entry.js.map → p-56e54271.entry.js.map} +0 -0
  597. /package/dist/infineon-design-system-stencil/{p-1ad03102.entry.js.map → p-59d0f2d9.entry.js.map} +0 -0
  598. /package/dist/infineon-design-system-stencil/{p-b3882dc0.entry.js.map → p-5e954f0b.entry.js.map} +0 -0
  599. /package/dist/infineon-design-system-stencil/{p-0b79cb38.entry.js.map → p-6b61e09e.entry.js.map} +0 -0
  600. /package/dist/infineon-design-system-stencil/{p-eeccb158.entry.js.map → p-6d9c1cd0.entry.js.map} +0 -0
  601. /package/dist/infineon-design-system-stencil/{p-347a1e85.entry.js.map → p-7415f5bf.entry.js.map} +0 -0
  602. /package/dist/infineon-design-system-stencil/{p-39fb5fb9.entry.js.map → p-75556b75.entry.js.map} +0 -0
  603. /package/dist/infineon-design-system-stencil/{p-234d0bed.entry.js.map → p-8252f9c7.entry.js.map} +0 -0
  604. /package/dist/infineon-design-system-stencil/{p-88bd6a1e.entry.js.map → p-8640d834.entry.js.map} +0 -0
  605. /package/dist/infineon-design-system-stencil/{p-cb3a70ad.entry.js.map → p-8a349fb4.entry.js.map} +0 -0
  606. /package/dist/infineon-design-system-stencil/{p-53e75622.entry.js.map → p-8cf5d054.entry.js.map} +0 -0
  607. /package/dist/infineon-design-system-stencil/{p-934704d9.entry.js.map → p-8ee88c7e.entry.js.map} +0 -0
  608. /package/dist/infineon-design-system-stencil/{p-3f5c3424.entry.js.map → p-8f2cc008.entry.js.map} +0 -0
  609. /package/dist/infineon-design-system-stencil/{p-b37f692b.entry.js.map → p-8fc46f6c.entry.js.map} +0 -0
  610. /package/dist/infineon-design-system-stencil/{p-e2ad853d.entry.js.map → p-9297efbe.entry.js.map} +0 -0
  611. /package/dist/infineon-design-system-stencil/{p-1f0bc888.entry.js.map → p-961b12af.entry.js.map} +0 -0
  612. /package/dist/infineon-design-system-stencil/{p-aa5f89b6.entry.js.map → p-a4d2a1b0.entry.js.map} +0 -0
  613. /package/dist/infineon-design-system-stencil/{p-407c4329.entry.js.map → p-a722dd38.entry.js.map} +0 -0
  614. /package/dist/infineon-design-system-stencil/{p-a2f7459e.entry.js.map → p-a74a35d2.entry.js.map} +0 -0
  615. /package/dist/infineon-design-system-stencil/{p-5a3c5cce.entry.js.map → p-b372fe7d.entry.js.map} +0 -0
  616. /package/dist/infineon-design-system-stencil/{p-abba423a.entry.js.map → p-b642a0c9.entry.js.map} +0 -0
  617. /package/dist/infineon-design-system-stencil/{p-598ec153.entry.js.map → p-b78de976.entry.js.map} +0 -0
  618. /package/dist/infineon-design-system-stencil/{p-c646ffcc.entry.js.map → p-c0698c6a.entry.js.map} +0 -0
  619. /package/dist/infineon-design-system-stencil/{p-2f12adbc.entry.js.map → p-c2ed0a00.entry.js.map} +0 -0
  620. /package/dist/infineon-design-system-stencil/{p-21c07ef9.entry.js.map → p-cee407bb.entry.js.map} +0 -0
  621. /package/dist/infineon-design-system-stencil/{p-d2630254.entry.js.map → p-d0b64bca.entry.js.map} +0 -0
  622. /package/dist/infineon-design-system-stencil/{p-b120a552.entry.js.map → p-d630716a.entry.js.map} +0 -0
  623. /package/dist/infineon-design-system-stencil/{p-d57b5e31.entry.js.map → p-e06dc41b.entry.js.map} +0 -0
  624. /package/dist/infineon-design-system-stencil/{p-33f5c7b8.entry.js.map → p-e2d80669.entry.js.map} +0 -0
  625. /package/dist/infineon-design-system-stencil/{p-85468723.entry.js.map → p-e6212e02.entry.js.map} +0 -0
  626. /package/dist/infineon-design-system-stencil/{p-3b02b076.entry.js.map → p-ea180cce.entry.js.map} +0 -0
  627. /package/dist/infineon-design-system-stencil/{p-6c89883f.entry.js.map → p-efde6e57.entry.js.map} +0 -0
  628. /package/dist/infineon-design-system-stencil/{p-e07ca773.entry.js.map → p-f0067aa9.entry.js.map} +0 -0
  629. /package/dist/infineon-design-system-stencil/{p-392f1655.entry.js.map → p-f86f7020.entry.js.map} +0 -0
  630. /package/dist/infineon-design-system-stencil/{p-f9bf9346.entry.js.map → p-f9ca49f1.entry.js.map} +0 -0
@@ -4,25 +4,22 @@ export default {
4
4
  title: 'Components/Dropdown',
5
5
  tags: ['autodocs'],
6
6
  args: {
7
- Label: 'Dropdown',
8
- variant: 'primary',
7
+ label: 'Dropdown',
9
8
  disabled: false,
10
- icon: 'c-check-16',
11
- size: 'm',
12
- Search: false,
13
- Header: false,
14
- href: '',
15
- target: '_self',
16
- Separator: false,
17
- DropDownMenuItemIcon: false,
18
9
  defaultOpen: false,
19
10
  noCloseOnOutsideClick: false,
20
11
  noCloseOnMenuClick: false,
21
12
  noAppendToBody: false,
13
+ variant: 'primary',
22
14
  placement: 'bottom-start',
15
+ size: 'm',
16
+ href: '',
17
+ target: '_self',
18
+ icon: 'c-info-16',
23
19
  },
24
20
  argTypes: {
25
21
  placement: {
22
+ description: 'Specifies the position of the dropdown relative to its trigger element.',
26
23
  options: [
27
24
  'auto',
28
25
  'auto-start',
@@ -40,57 +37,132 @@ export default {
40
37
  'left-start',
41
38
  'left-end',
42
39
  ],
43
- control: { type: 'select' },
40
+ control: 'select',
41
+ table: {
42
+ category: 'ifx-dropdown props',
43
+ defaultValue: {
44
+ summary: 'bottom-start'
45
+ }
46
+ }
44
47
  },
45
- Label: {
46
- description: 'The visible name or label for the dropdown button',
48
+ label: {
49
+ name: 'Label of Dropdown Trigger Button',
50
+ description: 'Set the label displayed on the *<ifx-dropdown-trigger-button>*.',
51
+ table: {
52
+ category: 'story controls',
53
+ defaultValue: {
54
+ summary: 'Dropdown'
55
+ }
56
+ }
47
57
  // if: { arg: 'Type', eq: 'Default' }
48
58
  },
49
59
  size: {
50
- description: 'Font Size options for menu items: s (14px) and m (16px) - default: m',
60
+ description: 'Font Size options for menu items: s (14px) and m (16px) - default: m.',
51
61
  options: ['s', 'm'],
52
- control: { type: 'radio' },
62
+ control: 'radio',
63
+ table: {
64
+ category: 'ifx-dropdown-menu props',
65
+ defaultValue: {
66
+ summary: 'm'
67
+ }
68
+ }
69
+ },
70
+ disabled: {
71
+ description: 'Determines if the dropdown button should be disabled.',
72
+ control: 'boolean',
73
+ table: {
74
+ category: 'ifx-dropdown props',
75
+ defaultValue: {
76
+ summary: false
77
+ }
78
+ }
53
79
  },
54
- disabled: { description: 'Determines if the dropdown button should be disabled' },
55
80
  variant: {
56
- description: 'The visual style of the dropdown button. Accepted values are "primary", "secondary", "tertiary"',
81
+ description: 'The visual style of the dropdown button. Accepted values are "primary", "secondary", "tertiary".',
57
82
  options: ['primary', 'secondary', 'tertiary'],
58
- control: { type: 'radio' },
83
+ control: 'radio',
84
+ table: {
85
+ category: 'ifx-dropdown-trigger-button props',
86
+ defaultValue: {
87
+ summary: 'primary'
88
+ }
89
+ }
59
90
  // if: { arg: 'Type', eq: 'Default' }
60
91
  },
61
92
  target: {
93
+ description: 'Determines where to open the linked document when the dropdown item is clicked.',
62
94
  options: ['_self', '_blank'],
63
- control: { type: 'radio' },
95
+ control: 'radio',
96
+ table: {
97
+ category: 'ifx-dropdown-item props',
98
+ defaultValue: {
99
+ summary: '_self'
100
+ }
101
+ }
64
102
  },
65
103
  href: {
66
- description: 'href link to menu item'
104
+ description: 'href link to menu item.',
105
+ table: {
106
+ category: 'ifx-dropdown-item props'
107
+ }
67
108
  },
68
109
  icon: {
69
- description: 'The icon to be displayed on the dropdown button',
70
- options: Object.values(icons).map(i => i['name']),
71
- control: { type: 'select' },
110
+ description: 'The icon to be displayed on the dropdown items.',
111
+ options: ['none', ...Object.values(icons).map(i => i['name'])],
112
+ control: 'select',
113
+ table: {
114
+ category: 'ifx-dropdown-item props',
115
+ defaultValue: {
116
+ summary: 'c-info-16'
117
+ }
118
+ }
72
119
  // if: { arg: 'Type', eq: 'Label Trigger' }
73
120
  },
74
- Search: {
75
- description: 'Show Search Bar'
121
+ defaultOpen: {
122
+ description: 'Determines if the dropdown should be open by default.',
123
+ control: 'boolean',
124
+ table: {
125
+ category: 'ifx-dropdown props',
126
+ defaultValue: {
127
+ summary: false
128
+ }
129
+ }
76
130
  },
77
- Header: {
78
- description: 'Add Header Text'
131
+ noCloseOnOutsideClick: {
132
+ description: 'Determines if the dropdown should not close when a click outside the dropdown happens.',
133
+ control: 'boolean',
134
+ table: {
135
+ category: 'ifx-dropdown props',
136
+ defaultValue: {
137
+ summary: false
138
+ }
139
+ }
79
140
  },
80
- Separator: {
81
- description: 'Use seperator in dropdown'
141
+ noCloseOnMenuClick: {
142
+ description: 'Determines if the dropdown should not close when a click inside the dropdown menu happens.',
143
+ control: 'boolean',
144
+ table: {
145
+ category: 'ifx-dropdown props',
146
+ defaultValue: {
147
+ summary: false
148
+ }
149
+ }
82
150
  },
83
- DropDownMenuItemIcon: {
84
- description: 'Show menu item icon in dropdown'
151
+ noAppendToBody: {
152
+ description: 'Determines if the dropdown should not be appended to the body.',
153
+ control: 'boolean',
154
+ table: {
155
+ category: 'ifx-dropdown props',
156
+ defaultValue: {
157
+ summary: false
158
+ }
159
+ }
85
160
  },
86
- defaultOpen: { description: 'Determines if the dropdown should be open by default' },
87
- noCloseOnOutsideClick: { description: 'Determines if the dropdown should not close when a click outside the dropdown happens' },
88
- noCloseOnMenuClick: { description: 'Determines if the dropdown should not close when a click inside the dropdown menu happens' },
89
- noAppendToBody: { description: 'Determines if the dropdown should not be appended to the body' },
90
161
  ifxOpen: {
91
162
  action: 'ifxOpen',
92
- description: 'Custom event that is emitted when the dropdown opens',
163
+ description: 'Custom event that is emitted when the dropdown opens.',
93
164
  table: {
165
+ category: 'custom events',
94
166
  type: {
95
167
  summary: 'Framework integration',
96
168
  detail: 'React: onIfxOpen={handleChange}\nVue:@ifxOpen="handleChange"\nAngular:(ifxOpen)="handleChange()"\nVanillaJs:.addEventListener("ifxOpen", (event) => {//handle change});',
@@ -99,8 +171,9 @@ export default {
99
171
  },
100
172
  ifxClose: {
101
173
  action: 'ifxClose',
102
- description: 'Custom event emitted when dropdown closes',
174
+ description: 'Custom event emitted when dropdown closes.',
103
175
  table: {
176
+ category: 'custom events',
104
177
  type: {
105
178
  summary: 'Framework integration',
106
179
  detail: 'React: onIfxClose={handleChange}\nVue:@ifxClose="handleChange"\nAngular:(ifxClose)="handleChange()"\nVanillaJs:.addEventListener("ifxClose", (event) => {//handle change});',
@@ -109,8 +182,9 @@ export default {
109
182
  },
110
183
  ifxDropdownMenuItem: {
111
184
  action: 'ifxDropdownMenuItem',
112
- description: 'Custom event emitted when an item is selected',
185
+ description: 'Custom event emitted by ifx-dropdown-menu when an item is selected.',
113
186
  table: {
187
+ category: 'custom events',
114
188
  type: {
115
189
  summary: 'Framework integration',
116
190
  detail: 'React: onIfxDropdownMenuItem={handleChange}\nVue:@ifxDropdownMenuItem="handleChange"\nAngular:(ifxDropdownMenuItem)="handleChange()"\nVanillaJs:.addEventListener("ifxDropdownMenuItem", (event) => {//handle change});',
@@ -129,18 +203,15 @@ const DefaultTemplate = args => {
129
203
  no-append-to-body="${args.noAppendToBody}">
130
204
 
131
205
  <ifx-dropdown-trigger-button variant="${args.variant}">
132
- ${args.Label}
206
+ ${args.label}
133
207
  </ifx-dropdown-trigger-button>
134
208
 
135
209
  <ifx-dropdown-menu size="${args.size}">
136
- ${args.Header ? `<ifx-dropdown-header>Header Text</ifx-dropdown-header>` : ''}
137
- ${args.Search ? `<ifx-search-field show-delete-icon="false"></ifx-search-field>` : ''}
138
- <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
139
- <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
140
- <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
141
- <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
142
- ${args.Separator ? `<ifx-dropdown-separator></ifx-dropdown-separator>` : ''}
143
- <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
210
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
211
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
212
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
213
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
214
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
144
215
  </ifx-dropdown-menu>
145
216
  </ifx-dropdown>`;
146
217
  const dropdown = wrapper.querySelector('ifx-dropdown');
@@ -151,13 +222,6 @@ const DefaultTemplate = args => {
151
222
  return wrapper;
152
223
  };
153
224
  export const Default = DefaultTemplate.bind({});
154
- Default.argTypes = {
155
- icon: {
156
- table: {
157
- disable: true
158
- }
159
- }
160
- };
161
225
  const LabelTriggerTemplate = args => {
162
226
  const wrapper = document.createElement('div');
163
227
  wrapper.innerHTML = `<ifx-dropdown
@@ -170,18 +234,15 @@ const LabelTriggerTemplate = args => {
170
234
  >
171
235
  Hello World! Click on the text to open the dropdown
172
236
  <ifx-dropdown-trigger>
173
- <ifx-icon icon="${args.icon}"></ifx-icon>
237
+ <ifx-icon icon="${'c-check-16'}"></ifx-icon>
174
238
  </ifx-dropdown-trigger>
175
239
  Some more text
176
240
  <ifx-dropdown-menu size="${args.size}">
177
- ${args.Header ? `<ifx-dropdown-header>Header Text</ifx-dropdown-header>` : ''}
178
- ${args.Search ? `<ifx-search-field show-delete-icon="false"></ifx-search-field>` : ''}
179
- <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
180
- <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
181
- <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
182
- <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
183
- ${args.Separator ? `<ifx-dropdown-separator></ifx-dropdown-separator>` : ''}
184
- <ifx-dropdown-item icon="${args.DropDownMenuItemIcon ? 'c-info-16' : ''}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
241
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
242
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
243
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
244
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
245
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
185
246
  </ifx-dropdown-menu>
186
247
  </ifx-dropdown>`;
187
248
  const dropdown = wrapper.querySelector('ifx-dropdown');
@@ -193,7 +254,7 @@ const LabelTriggerTemplate = args => {
193
254
  };
194
255
  export const LabelTrigger = LabelTriggerTemplate.bind({});
195
256
  LabelTrigger.argTypes = {
196
- Label: {
257
+ label: {
197
258
  table: {
198
259
  disable: true
199
260
  }
@@ -204,4 +265,101 @@ LabelTrigger.argTypes = {
204
265
  }
205
266
  }
206
267
  };
268
+ const HeaderTemplate = args => {
269
+ const wrapper = document.createElement('div');
270
+ wrapper.innerHTML = `<ifx-dropdown
271
+ placement="${args.placement}"
272
+ default-open="${args.defaultOpen}"
273
+ no-close-on-outside-click="${args.noCloseOnOutsideClick}"
274
+ no-close-on-menu-click="${args.noCloseOnOutsideClick}"
275
+ no-append-to-body="${args.noAppendToBody}">
276
+ <ifx-dropdown-header>Dropdown Header</ifx-dropdown-header>
277
+ <ifx-dropdown-trigger-button variant="${args.variant}">
278
+ ${args.label}
279
+ </ifx-dropdown-trigger-button>
280
+ <ifx-dropdown-menu size="${args.size}">
281
+ <ifx-dropdown-header>Header Text</ifx-dropdown-header>
282
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
283
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
284
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
285
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
286
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
287
+ </ifx-dropdown-menu>
288
+ </ifx-dropdown>`;
289
+ const dropdown = wrapper.querySelector('ifx-dropdown');
290
+ const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');
291
+ dropdown.addEventListener('ifxOpen', action('ifxOpen'));
292
+ dropdown.addEventListener('ifxClose', action('ifxClose'));
293
+ dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));
294
+ return wrapper;
295
+ };
296
+ export const Header = HeaderTemplate.bind({});
297
+ Header.argTypes = {
298
+ label: {
299
+ table: {
300
+ disable: true
301
+ }
302
+ },
303
+ variant: {
304
+ table: {
305
+ disable: true
306
+ }
307
+ },
308
+ };
309
+ const SearchTemplate = args => {
310
+ const wrapper = document.createElement('div');
311
+ wrapper.innerHTML = `<ifx-dropdown
312
+ placement="${args.placement}"
313
+ default-open="${args.defaultOpen}"
314
+ no-close-on-outside-click="${args.noCloseOnOutsideClick}"
315
+ no-close-on-menu-click="${args.noCloseOnOutsideClick}"
316
+ no-append-to-body="${args.noAppendToBody}">
317
+ <ifx-dropdown-trigger-button variant="${args.variant}">
318
+ ${args.label}
319
+ </ifx-dropdown-trigger-button>
320
+ <ifx-dropdown-menu size="${args.size}">
321
+ <ifx-search-field show-delete-icon="false"></ifx-search-field>
322
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
323
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
324
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
325
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
326
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
327
+ </ifx-dropdown-menu>
328
+ </ifx-dropdown>`;
329
+ const dropdown = wrapper.querySelector('ifx-dropdown');
330
+ const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');
331
+ dropdown.addEventListener('ifxOpen', action('ifxOpen'));
332
+ dropdown.addEventListener('ifxClose', action('ifxClose'));
333
+ dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));
334
+ return wrapper;
335
+ };
336
+ export const SearchField = SearchTemplate.bind({});
337
+ const SeparatorTemplate = args => {
338
+ const wrapper = document.createElement('div');
339
+ wrapper.innerHTML = `<ifx-dropdown
340
+ placement="${args.placement}"
341
+ default-open="${args.defaultOpen}"
342
+ no-close-on-outside-click="${args.noCloseOnOutsideClick}"
343
+ no-close-on-menu-click="${args.noCloseOnOutsideClick}"
344
+ no-append-to-body="${args.noAppendToBody}">
345
+ <ifx-dropdown-trigger-button variant="${args.variant}">
346
+ ${args.label}
347
+ </ifx-dropdown-trigger-button>
348
+ <ifx-dropdown-menu size="${args.size}">
349
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
350
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
351
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
352
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
353
+ <ifx-dropdown-separator></ifx-dropdown-separator>
354
+ <ifx-dropdown-item icon="${args.icon === 'none' ? '' : args.icon}" target="${args.target}" href="${args.href !== '' ? args.href : ''}">Menu Item</ifx-dropdown-item>
355
+ </ifx-dropdown-menu>
356
+ </ifx-dropdown>`;
357
+ const dropdown = wrapper.querySelector('ifx-dropdown');
358
+ const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');
359
+ dropdown.addEventListener('ifxOpen', action('ifxOpen'));
360
+ dropdown.addEventListener('ifxClose', action('ifxClose'));
361
+ dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));
362
+ return wrapper;
363
+ };
364
+ export const Separator = SeparatorTemplate.bind({});
207
365
  //# sourceMappingURL=dropdown.stories.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Dropdown',\n tags: ['autodocs'],\n args: {\n Label: 'Dropdown',\n variant: 'primary',\n disabled: false,\n icon: 'c-check-16',\n size: 'm',\n Search: false,\n Header: false,\n href: '',\n target: '_self',\n Separator: false,\n DropDownMenuItemIcon: false,\n defaultOpen: false,\n noCloseOnOutsideClick: false,\n noCloseOnMenuClick: false,\n noAppendToBody: false,\n placement: 'bottom-start',\n },\n argTypes: {\n placement: {\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'right',\n 'right-start',\n 'right-end',\n 'left',\n 'left-start',\n 'left-end',\n ],\n control: { type: 'select' },\n },\n Label: { \n description: 'The visible name or label for the dropdown button',\n // if: { arg: 'Type', eq: 'Default' }\n },\n size: {\n description: 'Font Size options for menu items: s (14px) and m (16px) - default: m',\n options: ['s', 'm'],\n control: { type: 'radio' },\n },\n disabled: { description: 'Determines if the dropdown button should be disabled' },\n variant: {\n description: 'The visual style of the dropdown button. Accepted values are \"primary\", \"secondary\", \"tertiary\"',\n options: ['primary', 'secondary', 'tertiary'],\n control: { type: 'radio' },\n // if: { arg: 'Type', eq: 'Default' }\n },\n\n target: {\n options: ['_self', '_blank'],\n control: { type: 'radio' },\n },\n href: {\n description: 'href link to menu item'\n },\n icon: {\n description: 'The icon to be displayed on the dropdown button',\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' },\n // if: { arg: 'Type', eq: 'Label Trigger' }\n },\n Search :{\n description: 'Show Search Bar'\n },\n Header: {\n description: 'Add Header Text'\n },\n Separator:{\n description: 'Use seperator in dropdown'\n },\n DropDownMenuItemIcon: {\n description: 'Show menu item icon in dropdown'\n },\n defaultOpen: { description: 'Determines if the dropdown should be open by default' },\n noCloseOnOutsideClick: { description: 'Determines if the dropdown should not close when a click outside the dropdown happens' },\n noCloseOnMenuClick: { description: 'Determines if the dropdown should not close when a click inside the dropdown menu happens' },\n noAppendToBody: { description: 'Determines if the dropdown should not be appended to the body' },\n ifxOpen: {\n action: 'ifxOpen',\n description: 'Custom event that is emitted when the dropdown opens',\n table: {\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxOpen={handleChange}\\nVue:@ifxOpen=\"handleChange\"\\nAngular:(ifxOpen)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxOpen\", (event) => {//handle change});',\n },\n },\n },\n ifxClose: {\n action: 'ifxClose',\n description: 'Custom event emitted when dropdown closes',\n table: {\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxClose={handleChange}\\nVue:@ifxClose=\"handleChange\"\\nAngular:(ifxClose)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxClose\", (event) => {//handle change});',\n },\n },\n },\n ifxDropdownMenuItem: {\n action: 'ifxDropdownMenuItem',\n description: 'Custom event emitted when an item is selected',\n table: {\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxDropdownMenuItem={handleChange}\\nVue:@ifxDropdownMenuItem=\"handleChange\"\\nAngular:(ifxDropdownMenuItem)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxDropdownMenuItem\", (event) => {//handle change});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = args => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `<ifx-dropdown placement=\"${args.placement}\" \n disabled=\"${args.disabled}\" \n default-open=\"${args.defaultOpen}\"\n no-close-on-outside-click=\"${args.noCloseOnOutsideClick}\"\n no-close-on-menu-click=\"${args.noCloseOnOutsideClick}\"\n no-append-to-body=\"${args.noAppendToBody}\">\n\n <ifx-dropdown-trigger-button variant=\"${args.variant}\">\n ${args.Label}\n </ifx-dropdown-trigger-button>\n\n <ifx-dropdown-menu size=\"${args.size}\">\n ${args.Header ? `<ifx-dropdown-header>Header Text</ifx-dropdown-header>` : ''}\n ${args.Search ? `<ifx-search-field show-delete-icon=\"false\"></ifx-search-field>` : ''}\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n ${args.Separator ? `<ifx-dropdown-separator></ifx-dropdown-separator>` : ''}\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n </ifx-dropdown-menu>\n</ifx-dropdown>`;\n\n const dropdown = wrapper.querySelector('ifx-dropdown') as HTMLElement;\n const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');\n\n dropdown.addEventListener('ifxOpen', action('ifxOpen'));\n dropdown.addEventListener('ifxClose', action('ifxClose'));\n dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n\n return wrapper;\n};\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {\n icon: {\n table: {\n disable: true\n }\n }\n}\n\n\n\nconst LabelTriggerTemplate = args => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `<ifx-dropdown\n placement=\"${args.placement}\"\n default-open=\"${args.defaultOpen}\"\n no-close-on-outside-click=\"${args.noCloseOnOutsideClick}\"\n no-close-on-menu-click=\"${args.noCloseOnOutsideClick}\"\n disabled=\"${args.disabled}\"\n no-append-to-body=\"${args.noAppendToBody}\"\n >\n Hello World! Click on the text to open the dropdown\n <ifx-dropdown-trigger>\n <ifx-icon icon=\"${args.icon}\"></ifx-icon>\n </ifx-dropdown-trigger>\n Some more text\n <ifx-dropdown-menu size=\"${args.size}\">\n ${args.Header ? `<ifx-dropdown-header>Header Text</ifx-dropdown-header>` : ''}\n ${args.Search ? `<ifx-search-field show-delete-icon=\"false\"></ifx-search-field>` : ''}\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n ${args.Separator ? `<ifx-dropdown-separator></ifx-dropdown-separator>` : ''}\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n </ifx-dropdown-menu>\n</ifx-dropdown>`;\n\n const dropdown = wrapper.querySelector('ifx-dropdown') as HTMLElement;\n const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');\n\n dropdown.addEventListener('ifxOpen', action('ifxOpen'));\n dropdown.addEventListener('ifxClose', action('ifxClose'));\n dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n\n return wrapper;\n};\n\nexport const LabelTrigger = LabelTriggerTemplate.bind({});\nLabelTrigger.argTypes = {\n Label: {\n table: {\n disable: true\n }\n },\n variant: {\n table: {\n disable: true\n }\n }\n}\n"]}
1
+ {"version":3,"file":"dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Dropdown',\n tags: ['autodocs'],\n args: {\n label: 'Dropdown',\n disabled: false,\n defaultOpen: false,\n noCloseOnOutsideClick: false,\n noCloseOnMenuClick: false,\n noAppendToBody: false,\n variant: 'primary',\n placement: 'bottom-start',\n size: 'm',\n href: '',\n target: '_self',\n icon: 'c-info-16',\n },\n argTypes: {\n placement: {\n description: 'Specifies the position of the dropdown relative to its trigger element.',\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'right',\n 'right-start',\n 'right-end',\n 'left',\n 'left-start',\n 'left-end',\n ],\n control: 'select',\n table: {\n category: 'ifx-dropdown props',\n defaultValue: {\n summary: 'bottom-start'\n }\n }\n },\n label: {\n name: 'Label of Dropdown Trigger Button',\n description: 'Set the label displayed on the *<ifx-dropdown-trigger-button>*.',\n table: {\n category: 'story controls',\n defaultValue: {\n summary: 'Dropdown'\n }\n }\n // if: { arg: 'Type', eq: 'Default' }\n },\n size: {\n description: 'Font Size options for menu items: s (14px) and m (16px) - default: m.',\n options: ['s', 'm'],\n control: 'radio',\n table: {\n category: 'ifx-dropdown-menu props',\n defaultValue: {\n summary: 'm'\n }\n }\n },\n disabled: {\n description: 'Determines if the dropdown button should be disabled.',\n control: 'boolean',\n table: {\n category: 'ifx-dropdown props',\n defaultValue: {\n summary: false\n }\n }\n },\n variant: {\n description: 'The visual style of the dropdown button. Accepted values are \"primary\", \"secondary\", \"tertiary\".',\n options: ['primary', 'secondary', 'tertiary'],\n control: 'radio',\n table: {\n category: 'ifx-dropdown-trigger-button props',\n defaultValue: {\n summary: 'primary'\n }\n }\n // if: { arg: 'Type', eq: 'Default' }\n },\n\n target: {\n description: 'Determines where to open the linked document when the dropdown item is clicked.',\n options: ['_self', '_blank'],\n control: 'radio',\n table: {\n category: 'ifx-dropdown-item props',\n defaultValue: {\n summary: '_self'\n }\n }\n },\n href: {\n description: 'href link to menu item.',\n table: {\n category: 'ifx-dropdown-item props'\n }\n },\n icon: {\n description: 'The icon to be displayed on the dropdown items.',\n options: ['none', ...Object.values(icons).map(i => i['name'])],\n control: 'select',\n table: {\n category: 'ifx-dropdown-item props',\n defaultValue: {\n summary: 'c-info-16'\n }\n }\n // if: { arg: 'Type', eq: 'Label Trigger' }\n },\n defaultOpen: {\n description: 'Determines if the dropdown should be open by default.',\n control: 'boolean',\n table: {\n category: 'ifx-dropdown props',\n defaultValue: {\n summary: false\n }\n }\n },\n noCloseOnOutsideClick: {\n description: 'Determines if the dropdown should not close when a click outside the dropdown happens.',\n control: 'boolean',\n table: {\n category: 'ifx-dropdown props',\n defaultValue: {\n summary: false\n }\n }\n },\n noCloseOnMenuClick: {\n description: 'Determines if the dropdown should not close when a click inside the dropdown menu happens.',\n control: 'boolean',\n table: {\n category: 'ifx-dropdown props',\n defaultValue: {\n summary: false\n }\n }\n },\n noAppendToBody: {\n description: 'Determines if the dropdown should not be appended to the body.',\n control: 'boolean',\n table: {\n category: 'ifx-dropdown props',\n defaultValue: {\n summary: false\n }\n }\n },\n ifxOpen: {\n action: 'ifxOpen',\n description: 'Custom event that is emitted when the dropdown opens.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxOpen={handleChange}\\nVue:@ifxOpen=\"handleChange\"\\nAngular:(ifxOpen)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxOpen\", (event) => {//handle change});',\n },\n },\n },\n ifxClose: {\n action: 'ifxClose',\n description: 'Custom event emitted when dropdown closes.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxClose={handleChange}\\nVue:@ifxClose=\"handleChange\"\\nAngular:(ifxClose)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxClose\", (event) => {//handle change});',\n },\n },\n },\n ifxDropdownMenuItem: {\n action: 'ifxDropdownMenuItem',\n description: 'Custom event emitted by ifx-dropdown-menu when an item is selected.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxDropdownMenuItem={handleChange}\\nVue:@ifxDropdownMenuItem=\"handleChange\"\\nAngular:(ifxDropdownMenuItem)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxDropdownMenuItem\", (event) => {//handle change});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = args => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `<ifx-dropdown placement=\"${args.placement}\" \n disabled=\"${args.disabled}\" \n default-open=\"${args.defaultOpen}\"\n no-close-on-outside-click=\"${args.noCloseOnOutsideClick}\"\n no-close-on-menu-click=\"${args.noCloseOnOutsideClick}\"\n no-append-to-body=\"${args.noAppendToBody}\">\n\n <ifx-dropdown-trigger-button variant=\"${args.variant}\">\n ${args.label}\n </ifx-dropdown-trigger-button>\n\n <ifx-dropdown-menu size=\"${args.size}\">\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n </ifx-dropdown-menu>\n</ifx-dropdown>`;\n\n const dropdown = wrapper.querySelector('ifx-dropdown') as HTMLElement;\n const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');\n\n dropdown.addEventListener('ifxOpen', action('ifxOpen'));\n dropdown.addEventListener('ifxClose', action('ifxClose'));\n dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n\n return wrapper;\n};\n\nexport const Default = DefaultTemplate.bind({});\n\n\nconst LabelTriggerTemplate = args => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `<ifx-dropdown\n placement=\"${args.placement}\"\n default-open=\"${args.defaultOpen}\"\n no-close-on-outside-click=\"${args.noCloseOnOutsideClick}\"\n no-close-on-menu-click=\"${args.noCloseOnOutsideClick}\"\n disabled=\"${args.disabled}\"\n no-append-to-body=\"${args.noAppendToBody}\"\n >\n Hello World! Click on the text to open the dropdown\n <ifx-dropdown-trigger>\n <ifx-icon icon=\"${'c-check-16'}\"></ifx-icon>\n </ifx-dropdown-trigger>\n Some more text\n <ifx-dropdown-menu size=\"${args.size}\">\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n </ifx-dropdown-menu>\n</ifx-dropdown>`;\n\n const dropdown = wrapper.querySelector('ifx-dropdown') as HTMLElement;\n const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');\n\n dropdown.addEventListener('ifxOpen', action('ifxOpen'));\n dropdown.addEventListener('ifxClose', action('ifxClose'));\n dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n\n return wrapper;\n};\n\nexport const LabelTrigger = LabelTriggerTemplate.bind({});\nLabelTrigger.argTypes = {\n label: {\n table: {\n disable: true\n }\n },\n variant: {\n table: {\n disable: true\n }\n }\n}\n\nconst HeaderTemplate = args => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `<ifx-dropdown\n placement=\"${args.placement}\"\n default-open=\"${args.defaultOpen}\"\n no-close-on-outside-click=\"${args.noCloseOnOutsideClick}\"\n no-close-on-menu-click=\"${args.noCloseOnOutsideClick}\"\n no-append-to-body=\"${args.noAppendToBody}\">\n <ifx-dropdown-header>Dropdown Header</ifx-dropdown-header>\n <ifx-dropdown-trigger-button variant=\"${args.variant}\">\n ${args.label}\n </ifx-dropdown-trigger-button>\n <ifx-dropdown-menu size=\"${args.size}\">\n <ifx-dropdown-header>Header Text</ifx-dropdown-header>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n </ifx-dropdown-menu>\n</ifx-dropdown>`;\n\n const dropdown = wrapper.querySelector('ifx-dropdown') as HTMLElement;\n const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');\n\n dropdown.addEventListener('ifxOpen', action('ifxOpen'));\n dropdown.addEventListener('ifxClose', action('ifxClose'));\n dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n\n return wrapper;\n}\n\nexport const Header = HeaderTemplate.bind({});\nHeader.argTypes = {\n label: {\n table: {\n disable: true\n }\n },\n variant: {\n table: {\n disable: true\n }\n },\n}\n\nconst SearchTemplate = args => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `<ifx-dropdown\n placement=\"${args.placement}\"\n default-open=\"${args.defaultOpen}\"\n no-close-on-outside-click=\"${args.noCloseOnOutsideClick}\"\n no-close-on-menu-click=\"${args.noCloseOnOutsideClick}\"\n no-append-to-body=\"${args.noAppendToBody}\">\n <ifx-dropdown-trigger-button variant=\"${args.variant}\">\n ${args.label}\n </ifx-dropdown-trigger-button>\n <ifx-dropdown-menu size=\"${args.size}\">\n <ifx-search-field show-delete-icon=\"false\"></ifx-search-field>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n </ifx-dropdown-menu>\n</ifx-dropdown>`;\n\n const dropdown = wrapper.querySelector('ifx-dropdown') as HTMLElement;\n const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');\n\n dropdown.addEventListener('ifxOpen', action('ifxOpen'));\n dropdown.addEventListener('ifxClose', action('ifxClose'));\n dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n\n return wrapper;\n}\n\nexport const SearchField = SearchTemplate.bind({});\n\nconst SeparatorTemplate = args => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `<ifx-dropdown\n placement=\"${args.placement}\"\n default-open=\"${args.defaultOpen}\"\n no-close-on-outside-click=\"${args.noCloseOnOutsideClick}\"\n no-close-on-menu-click=\"${args.noCloseOnOutsideClick}\"\n no-append-to-body=\"${args.noAppendToBody}\">\n <ifx-dropdown-trigger-button variant=\"${args.variant}\">\n ${args.label}\n </ifx-dropdown-trigger-button>\n <ifx-dropdown-menu size=\"${args.size}\">\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-separator></ifx-dropdown-separator>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n </ifx-dropdown-menu>\n</ifx-dropdown>`;\n\n const dropdown = wrapper.querySelector('ifx-dropdown') as HTMLElement;\n const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');\n\n dropdown.addEventListener('ifxOpen', action('ifxOpen'));\n dropdown.addEventListener('ifxClose', action('ifxClose'));\n dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n\n return wrapper;\n}\n\nexport const Separator = SeparatorTemplate.bind({});\n\n"]}
@@ -1,17 +1,47 @@
1
+ import { icons } from "@infineon/infineon-icons";
1
2
  export default {
2
3
  title: 'Components/Footer',
3
4
  tags: ['autodocs'],
4
5
  args: {
5
6
  copyrightText: '© 1999 - 2024 Infineon Technologies AG',
7
+ href: 'http://infineon.com',
8
+ icon: 'home-16'
6
9
  },
7
10
  argTypes: {
8
- copyrightText: { control: 'text' },
11
+ copyrightText: {
12
+ description: 'Sets the text for the copyright.',
13
+ control: 'text',
14
+ table: {
15
+ category: 'ifx-footer props',
16
+ }
17
+ },
18
+ icon: {
19
+ description: 'Sets the icon for the footer.',
20
+ options: Object.values(icons).map(i => i['name']),
21
+ control: { type: 'select' },
22
+ table: {
23
+ category: 'ifx-icon props',
24
+ type: {
25
+ summary: 'string'
26
+ }
27
+ }
28
+ },
29
+ href: {
30
+ description: 'Sets the link for the footer.',
31
+ control: 'text',
32
+ table: {
33
+ category: 'ifx-link props',
34
+ },
35
+ },
9
36
  },
10
37
  };
11
38
  const DefaultTemplate = args => {
12
39
  return `
13
40
  <ifx-footer copyright-text="${args.copyrightText}">
14
41
  <div slot="socials">
42
+ <ifx-link variant="title" href=${args.href}>
43
+ <ifx-icon icon=${args.icon}></ifx-icon>
44
+ </ifx-link>
15
45
  <ifx-link variant="title" href="http://facebook.com/infineon">
16
46
  <ifx-icon icon="facebook"></ifx-icon>
17
47
  </ifx-link>
@@ -1 +1 @@
1
- {"version":3,"file":"footer.stories.js","sourceRoot":"","sources":["../../../src/components/footer/footer.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,aAAa,EAAE,wCAAwC;KACxD;IACD,QAAQ,EAAE;QACR,aAAa,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KACnC;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,OAAO;kCACyB,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA2BpC,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE/C,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC;;;;;;;gBAOZ,CAAC;AAEjB,MAAM,CAAC,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5C,MAAM,aAAa,GAAG,GAAG,EAAE,CACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAuDY,CAAC;AAEf,MAAM,CAAC,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["export default {\n title: 'Components/Footer',\n tags: ['autodocs'],\n args: {\n copyrightText: '© 1999 - 2024 Infineon Technologies AG',\n },\n argTypes: {\n copyrightText: { control: 'text' },\n },\n};\n\nconst DefaultTemplate = args => {\n return `\n <ifx-footer copyright-text=\"${args.copyrightText}\">\n <div slot=\"socials\">\n <ifx-link variant=\"title\" href=\"http://facebook.com/infineon\">\n <ifx-icon icon=\"facebook\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://youtube.com/infineon\">\n <ifx-icon icon=\"youtube\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://instagram.com/infineon\">\n <ifx-icon icon=\"instagram\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://linkedin.com/infineon\">\n <ifx-icon icon=\"linkedin\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://twitter.com/infineon\">\n <ifx-icon icon=\"twitter\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://xing.com/infineon\">\n <ifx-icon icon=\"xing\"></ifx-icon>\n </ifx-link>\n </div>\n <div slot=\"info\">\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n </div>\n </ifx-footer>`;\n};\n\nexport const Medium = DefaultTemplate.bind({});\n\nconst SmallTemplate = () => `<ifx-footer>\n <div slot=\"info\">\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n </div>\n </ifx-footer>`;\n\nexport const Small = SmallTemplate.bind({});\n\nconst LargeTemplate = () =>\n `<ifx-footer>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <div slot=\"socials\">\n <ifx-link variant=\"title\" href=\"http://facebook.com/infineon\">\n <ifx-icon icon=\"facebook\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://youtube.com/infineon\">\n <ifx-icon icon=\"youtube\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://instagram.com/infineon\">\n <ifx-icon icon=\"instagram\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://linkedin.com/infineon\">\n <ifx-icon icon=\"linkedin\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://twitter.com/infineon\">\n <ifx-icon icon=\"twitter\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://xing.com/infineon\">\n <ifx-icon icon=\"xing\"></ifx-icon>\n </ifx-link>\n </div>\n <div slot=\"info\">\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n </div>\n</ifx-footer>`;\n\nexport const Large = LargeTemplate.bind({});\n"]}
1
+ {"version":3,"file":"footer.stories.js","sourceRoot":"","sources":["../../../src/components/footer/footer.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,aAAa,EAAE,wCAAwC;QACvD,IAAI,EAAE,qBAAqB;QAC3B,IAAI,EAAE,SAAS;KAChB;IACD,QAAQ,EAAE;QACR,aAAa,EAAE;YACb,WAAW,EAAE,kCAAkC;YAC/C,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;aAC7B;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,+BAA+B;YAC5C,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,+BAA+B;YAC5C,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,OAAO;kCACyB,IAAI,CAAC,aAAa;;qCAEf,IAAI,CAAC,IAAI;yBACrB,IAAI,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA2BlB,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE/C,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC;;;;;;;gBAOZ,CAAC;AAEjB,MAAM,CAAC,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5C,MAAM,aAAa,GAAG,GAAG,EAAE,CACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAuDY,CAAC;AAEf,MAAM,CAAC,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\nexport default {\n title: 'Components/Footer',\n tags: ['autodocs'],\n args: {\n copyrightText: '© 1999 - 2024 Infineon Technologies AG',\n href: 'http://infineon.com',\n icon: 'home-16'\n },\n argTypes: {\n copyrightText: {\n description: 'Sets the text for the copyright.',\n control: 'text',\n table: {\n category: 'ifx-footer props',\n }\n },\n icon: {\n description: 'Sets the icon for the footer.',\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' },\n table: {\n category: 'ifx-icon props',\n type: {\n summary: 'string'\n }\n }\n },\n href: {\n description: 'Sets the link for the footer.',\n control: 'text',\n table: {\n category: 'ifx-link props',\n },\n },\n },\n};\n\nconst DefaultTemplate = args => {\n return `\n <ifx-footer copyright-text=\"${args.copyrightText}\">\n <div slot=\"socials\">\n <ifx-link variant=\"title\" href=${args.href}>\n <ifx-icon icon=${args.icon}></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://facebook.com/infineon\">\n <ifx-icon icon=\"facebook\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://youtube.com/infineon\">\n <ifx-icon icon=\"youtube\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://instagram.com/infineon\">\n <ifx-icon icon=\"instagram\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://linkedin.com/infineon\">\n <ifx-icon icon=\"linkedin\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://twitter.com/infineon\">\n <ifx-icon icon=\"twitter\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://xing.com/infineon\">\n <ifx-icon icon=\"xing\"></ifx-icon>\n </ifx-link>\n </div>\n <div slot=\"info\">\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n </div>\n </ifx-footer>`;\n};\n\nexport const Medium = DefaultTemplate.bind({});\n\nconst SmallTemplate = () => `<ifx-footer>\n <div slot=\"info\">\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n </div>\n </ifx-footer>`;\n\nexport const Small = SmallTemplate.bind({});\n\nconst LargeTemplate = () =>\n `<ifx-footer>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <div slot=\"socials\">\n <ifx-link variant=\"title\" href=\"http://facebook.com/infineon\">\n <ifx-icon icon=\"facebook\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://youtube.com/infineon\">\n <ifx-icon icon=\"youtube\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://instagram.com/infineon\">\n <ifx-icon icon=\"instagram\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://linkedin.com/infineon\">\n <ifx-icon icon=\"linkedin\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://twitter.com/infineon\">\n <ifx-icon icon=\"twitter\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://xing.com/infineon\">\n <ifx-icon icon=\"xing\"></ifx-icon>\n </ifx-link>\n </div>\n <div slot=\"info\">\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n </div>\n</ifx-footer>`;\n\nexport const Large = LargeTemplate.bind({});\n"]}
@@ -8,16 +8,21 @@ export default {
8
8
  },
9
9
  argTypes: {
10
10
  icon: {
11
+ description: 'Set the icon.',
11
12
  options: Object.values(icons).map(i => i['name']),
12
13
  control: { type: 'select' },
14
+ table: {
15
+ category: 'ifx-icon props',
16
+ }
13
17
  },
14
18
  consoleError: {
15
19
  action: 'consoleError',
16
- description: 'Custom event emitted when icon is invalid',
20
+ description: 'Custom event emitted when icon is invalid.',
17
21
  table: {
22
+ category: 'custom events',
18
23
  type: {
19
24
  summary: 'Framework integration',
20
- detail: 'React: onConsoleError={handleChange}\nVue:@consoleError="handleChange"\nAngular:(consoleError)="handleChange()"\nVanillaJs:.addEventListener("consoleError", (event) => {//handle change});',
25
+ detail: 'React: onConsoleError={handleError}\nVue:@consoleError="handleError"\nAngular:(consoleError)="handleError()"\nVanillaJs:.addEventListener("consoleError", (event) => {//handle error});',
21
26
  },
22
27
  },
23
28
  },