@infineon/infineon-design-system-stencil 36.0.0--canary.1926.3384b08beedd4bd0bf0894c709a0e3eb8096602d.0 → 36.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (289) hide show
  1. package/dist/cjs/{icons-2cd72a7d.js → icons-0d4d096d.js} +1 -4
  2. package/dist/cjs/icons-0d4d096d.js.map +1 -0
  3. package/dist/cjs/ifx-alert_2.cjs.entry.js +1 -1
  4. package/dist/cjs/ifx-basic-table.cjs.entry.js +1 -1
  5. package/dist/cjs/ifx-faq.cjs.entry.js +1 -1
  6. package/dist/cjs/ifx-filter-accordion.cjs.entry.js +2 -2
  7. package/dist/cjs/ifx-filter-bar.cjs.entry.js +1 -1
  8. package/dist/cjs/ifx-filter-search.cjs.entry.js +1 -1
  9. package/dist/cjs/ifx-filter-type-group.cjs.entry.js +1 -1
  10. package/dist/cjs/ifx-icon.cjs.entry.js +1 -1
  11. package/dist/cjs/ifx-icons-preview.cjs.entry.js +1 -1
  12. package/dist/cjs/ifx-list-entry.cjs.entry.js +1 -1
  13. package/dist/cjs/ifx-multiselect.cjs.entry.js +545 -0
  14. package/dist/cjs/ifx-multiselect.cjs.entry.js.map +1 -0
  15. package/dist/cjs/ifx-select.cjs.entry.js +2 -2
  16. package/dist/cjs/ifx-set-filter.cjs.entry.js +2 -19
  17. package/dist/cjs/ifx-set-filter.cjs.entry.js.map +1 -1
  18. package/dist/cjs/ifx-slider.cjs.entry.js +2 -2
  19. package/dist/cjs/ifx-spinner_2.cjs.entry.js +6 -6
  20. package/dist/cjs/ifx-status.cjs.entry.js +1 -1
  21. package/dist/cjs/ifx-step.cjs.entry.js +4 -4
  22. package/dist/cjs/ifx-stepper.cjs.entry.js +2 -2
  23. package/dist/cjs/ifx-switch.cjs.entry.js +1 -1
  24. package/dist/cjs/ifx-tab.cjs.entry.js +1 -1
  25. package/dist/cjs/ifx-table.cjs.entry.js +2 -2
  26. package/dist/cjs/ifx-tabs.cjs.entry.js +2 -2
  27. package/dist/cjs/ifx-tag.cjs.entry.js +1 -1
  28. package/dist/cjs/ifx-templates-ui.cjs.entry.js +1 -1
  29. package/dist/cjs/ifx-textarea.cjs.entry.js +1 -1
  30. package/dist/cjs/ifx-tooltip.cjs.entry.js +4 -4
  31. package/dist/cjs/ifx-tree-view-item.cjs.entry.js +2 -2
  32. package/dist/cjs/ifx-tree-view.cjs.entry.js +1 -1
  33. package/dist/cjs/index-7f4df11a.js +14 -14
  34. package/dist/cjs/infineon-design-system-stencil.cjs.js +1 -1
  35. package/dist/cjs/loader.cjs.js +1 -1
  36. package/dist/collection/collection-manifest.json +0 -1
  37. package/dist/collection/components/breadcrumb/breadcrumb.stories.js +1 -1
  38. package/dist/collection/components/breadcrumb/breadcrumb.stories.js.map +1 -1
  39. package/dist/collection/components/select/multi-select/interfaces.js.map +1 -1
  40. package/dist/collection/components/select/multi-select/multiselect.css +65 -60
  41. package/dist/collection/components/select/multi-select/multiselect.js +427 -675
  42. package/dist/collection/components/select/multi-select/multiselect.js.map +1 -1
  43. package/dist/collection/components/select/multi-select/multiselect.stories.js +135 -439
  44. package/dist/collection/components/select/multi-select/multiselect.stories.js.map +1 -1
  45. package/dist/collection/components/select/single-select/select.js +2 -2
  46. package/dist/collection/components/slider/slider.js +2 -2
  47. package/dist/collection/components/spinner/spinner.js +2 -2
  48. package/dist/collection/components/status/status.js +1 -1
  49. package/dist/collection/components/stepper/step/step.js +4 -4
  50. package/dist/collection/components/stepper/stepper.js +2 -2
  51. package/dist/collection/components/switch/switch.js +1 -1
  52. package/dist/collection/components/table-advanced-version/filter-bar/filter-bar.js +1 -1
  53. package/dist/collection/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.js +2 -2
  54. package/dist/collection/components/table-advanced-version/filter-type-group/filter-search/filter-search.js +1 -1
  55. package/dist/collection/components/table-advanced-version/filter-type-group/filter-type-group.js +1 -1
  56. package/dist/collection/components/table-advanced-version/list/list-entry/list-entry.js +1 -1
  57. package/dist/collection/components/table-advanced-version/set-filter/setFilter.js +2 -19
  58. package/dist/collection/components/table-advanced-version/set-filter/setFilter.js.map +1 -1
  59. package/dist/collection/components/table-advanced-version/table.js +2 -2
  60. package/dist/collection/components/table-advanced-version/table.stories.js +3 -2
  61. package/dist/collection/components/table-advanced-version/table.stories.js.map +1 -1
  62. package/dist/collection/components/table-basic-version/table.js +1 -1
  63. package/dist/collection/components/tabs/tab.js +1 -1
  64. package/dist/collection/components/tabs/tabs.js +2 -2
  65. package/dist/collection/components/tag/tag.js +1 -1
  66. package/dist/collection/components/templates/template/template.js +1 -1
  67. package/dist/collection/components/templates/templates-ui/templates-ui.js +1 -1
  68. package/dist/collection/components/text-field/text-field.js +4 -4
  69. package/dist/collection/components/textarea/textarea.js +1 -1
  70. package/dist/collection/components/tooltip/tooltip.js +4 -4
  71. package/dist/collection/components/tree-view/tree-view-item.js +2 -2
  72. package/dist/collection/components/tree-view/tree-view.js +1 -1
  73. package/dist/collection/stories/setup-and-installation/faq/faq.js +1 -1
  74. package/dist/components/ifx-accordion-item.js +1 -1
  75. package/dist/components/ifx-alert.js +1 -1
  76. package/dist/components/ifx-basic-table.js +1 -1
  77. package/dist/components/ifx-breadcrumb-item-label.js +1 -1
  78. package/dist/components/ifx-checkbox-group.js +1 -1
  79. package/dist/components/ifx-checkbox.js +1 -1
  80. package/dist/components/ifx-chip-item.js +1 -1
  81. package/dist/components/ifx-chip.js +1 -1
  82. package/dist/components/ifx-date-picker.js +1 -1
  83. package/dist/components/ifx-dropdown-item.js +1 -1
  84. package/dist/components/ifx-dropdown-separator.js +1 -29
  85. package/dist/components/ifx-dropdown-separator.js.map +1 -1
  86. package/dist/components/ifx-dropdown-trigger-button.js +1 -1
  87. package/dist/components/ifx-faq.js +3 -3
  88. package/dist/components/ifx-file-upload.js +2 -2
  89. package/dist/components/ifx-filter-accordion.js +3 -3
  90. package/dist/components/ifx-filter-bar.js +2 -2
  91. package/dist/components/ifx-filter-search.js +3 -3
  92. package/dist/components/ifx-filter-type-group.js +1 -1
  93. package/dist/components/ifx-icon-button.js +1 -1
  94. package/dist/components/ifx-icon.js +1 -1
  95. package/dist/components/ifx-icons-preview.js +3 -3
  96. package/dist/components/ifx-list-entry.js +3 -3
  97. package/dist/components/ifx-list.js +1 -1
  98. package/dist/components/ifx-modal.js +2 -2
  99. package/dist/components/ifx-multiselect.js +1 -1
  100. package/dist/components/ifx-navbar-item.js +1 -1
  101. package/dist/components/ifx-navbar.js +1 -1
  102. package/dist/components/ifx-notification.js +1 -1
  103. package/dist/components/ifx-overview-table.js +1 -1
  104. package/dist/components/ifx-pagination.js +1 -1
  105. package/dist/components/ifx-radio-button-group.js +1 -1
  106. package/dist/components/ifx-search-bar.js +2 -2
  107. package/dist/components/ifx-search-field.js +1 -1
  108. package/dist/components/ifx-segment.js +1 -1
  109. package/dist/components/ifx-segmented-control.js +1 -1
  110. package/dist/components/ifx-select.js +1 -1
  111. package/dist/components/ifx-set-filter.js +12 -35
  112. package/dist/components/ifx-set-filter.js.map +1 -1
  113. package/dist/components/ifx-sidebar-item.js +1 -1
  114. package/dist/components/ifx-slider.js +3 -3
  115. package/dist/components/ifx-spinner.js +1 -1
  116. package/dist/components/ifx-status.js +1 -1
  117. package/dist/components/ifx-step.js +5 -5
  118. package/dist/components/ifx-stepper.js +2 -2
  119. package/dist/components/ifx-switch.js +1 -1
  120. package/dist/components/ifx-tab.js +1 -1
  121. package/dist/components/ifx-table.js +9 -9
  122. package/dist/components/ifx-tabs.js +3 -3
  123. package/dist/components/ifx-tag.js +2 -2
  124. package/dist/components/ifx-template.js +1 -1
  125. package/dist/components/ifx-templates-ui.js +7 -7
  126. package/dist/components/ifx-text-field.js +1 -1
  127. package/dist/components/ifx-textarea.js +1 -1
  128. package/dist/components/ifx-tooltip.js +5 -5
  129. package/dist/components/ifx-tree-view-item.js +4 -4
  130. package/dist/components/ifx-tree-view.js +1 -1
  131. package/dist/components/{p-f2f58eb1.js → p-0c449780.js} +2 -2
  132. package/dist/components/{p-f2f58eb1.js.map → p-0c449780.js.map} +1 -1
  133. package/dist/components/{p-b6b0d09b.js → p-186dacc8.js} +2 -2
  134. package/dist/components/{p-b6b0d09b.js.map → p-186dacc8.js.map} +1 -1
  135. package/dist/components/{p-34a36730.js → p-2a65d85a.js} +5 -5
  136. package/dist/components/{p-34a36730.js.map → p-2a65d85a.js.map} +1 -1
  137. package/dist/components/{p-afd6d4f5.js → p-38396fe7.js} +2 -2
  138. package/dist/components/{p-afd6d4f5.js.map → p-38396fe7.js.map} +1 -1
  139. package/dist/components/{p-fe3f24e7.js → p-67573b5f.js} +6 -6
  140. package/dist/components/{p-fe3f24e7.js.map → p-67573b5f.js.map} +1 -1
  141. package/dist/components/p-68016aea.js +33 -0
  142. package/dist/components/p-68016aea.js.map +1 -0
  143. package/dist/components/{p-20d6a006.js → p-6d12f845.js} +2 -2
  144. package/dist/components/{p-20d6a006.js.map → p-6d12f845.js.map} +1 -1
  145. package/dist/components/{p-351949f1.js → p-a4922416.js} +3 -3
  146. package/dist/components/{p-351949f1.js.map → p-a4922416.js.map} +1 -1
  147. package/dist/components/{p-b293963f.js → p-a8d0ef73.js} +2 -2
  148. package/dist/components/{p-b293963f.js.map → p-a8d0ef73.js.map} +1 -1
  149. package/dist/components/{p-6c0ec65a.js → p-b0039ef1.js} +2 -2
  150. package/dist/components/{p-6c0ec65a.js.map → p-b0039ef1.js.map} +1 -1
  151. package/dist/components/{p-12e75dad.js → p-bb4de57d.js} +1 -4
  152. package/dist/components/p-bb4de57d.js.map +1 -0
  153. package/dist/components/{p-98c86d16.js → p-c9aec5fa.js} +4 -4
  154. package/dist/components/{p-98c86d16.js.map → p-c9aec5fa.js.map} +1 -1
  155. package/dist/components/{p-1bfd69f4.js → p-cc5bd74b.js} +4 -4
  156. package/dist/components/{p-1bfd69f4.js.map → p-cc5bd74b.js.map} +1 -1
  157. package/dist/components/p-cd833a9b.js +598 -0
  158. package/dist/components/p-cd833a9b.js.map +1 -0
  159. package/dist/components/{p-2a500ed7.js → p-cd913238.js} +3 -3
  160. package/dist/components/{p-2a500ed7.js.map → p-cd913238.js.map} +1 -1
  161. package/dist/components/{p-5c96860f.js → p-d1790232.js} +2 -2
  162. package/dist/components/{p-5c96860f.js.map → p-d1790232.js.map} +1 -1
  163. package/dist/esm/{icons-75858876.js → icons-788fe290.js} +1 -4
  164. package/dist/esm/icons-788fe290.js.map +1 -0
  165. package/dist/esm/ifx-alert_2.entry.js +1 -1
  166. package/dist/esm/ifx-basic-table.entry.js +1 -1
  167. package/dist/esm/ifx-faq.entry.js +1 -1
  168. package/dist/esm/ifx-filter-accordion.entry.js +2 -2
  169. package/dist/esm/ifx-filter-bar.entry.js +1 -1
  170. package/dist/esm/ifx-filter-search.entry.js +1 -1
  171. package/dist/esm/ifx-filter-type-group.entry.js +1 -1
  172. package/dist/esm/ifx-icon.entry.js +1 -1
  173. package/dist/esm/ifx-icons-preview.entry.js +1 -1
  174. package/dist/esm/ifx-list-entry.entry.js +1 -1
  175. package/dist/esm/ifx-multiselect.entry.js +541 -0
  176. package/dist/esm/ifx-multiselect.entry.js.map +1 -0
  177. package/dist/esm/ifx-select.entry.js +2 -2
  178. package/dist/esm/ifx-set-filter.entry.js +2 -19
  179. package/dist/esm/ifx-set-filter.entry.js.map +1 -1
  180. package/dist/esm/ifx-slider.entry.js +2 -2
  181. package/dist/esm/ifx-spinner_2.entry.js +6 -6
  182. package/dist/esm/ifx-status.entry.js +1 -1
  183. package/dist/esm/ifx-step.entry.js +4 -4
  184. package/dist/esm/ifx-stepper.entry.js +2 -2
  185. package/dist/esm/ifx-switch.entry.js +1 -1
  186. package/dist/esm/ifx-tab.entry.js +1 -1
  187. package/dist/esm/ifx-table.entry.js +2 -2
  188. package/dist/esm/ifx-tabs.entry.js +2 -2
  189. package/dist/esm/ifx-tag.entry.js +1 -1
  190. package/dist/esm/ifx-templates-ui.entry.js +1 -1
  191. package/dist/esm/ifx-textarea.entry.js +1 -1
  192. package/dist/esm/ifx-tooltip.entry.js +4 -4
  193. package/dist/esm/ifx-tree-view-item.entry.js +2 -2
  194. package/dist/esm/ifx-tree-view.entry.js +1 -1
  195. package/dist/esm/index-6c9eba32.js +14 -14
  196. package/dist/esm/infineon-design-system-stencil.js +1 -1
  197. package/dist/esm/loader.js +1 -1
  198. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
  199. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js.map +1 -1
  200. package/dist/infineon-design-system-stencil/p-06bfabcf.entry.js +2 -0
  201. package/dist/infineon-design-system-stencil/{p-76e0c34f.entry.js.map → p-06bfabcf.entry.js.map} +1 -1
  202. package/dist/infineon-design-system-stencil/{p-3d037fa4.entry.js → p-0f096cf1.entry.js} +2 -2
  203. package/dist/infineon-design-system-stencil/{p-ad7b58c3.entry.js → p-1048ee19.entry.js} +2 -2
  204. package/dist/infineon-design-system-stencil/{p-d890b0de.entry.js → p-142878ee.entry.js} +2 -2
  205. package/dist/infineon-design-system-stencil/{p-4d96fed0.js → p-27d2afb4.js} +2 -2
  206. package/dist/infineon-design-system-stencil/p-27d2afb4.js.map +1 -0
  207. package/dist/infineon-design-system-stencil/{p-18a81f5f.entry.js → p-2b38c405.entry.js} +2 -2
  208. package/dist/infineon-design-system-stencil/p-34738a10.entry.js +2 -0
  209. package/dist/infineon-design-system-stencil/p-45ac2698.entry.js +2 -0
  210. package/dist/infineon-design-system-stencil/p-45ac2698.entry.js.map +1 -0
  211. package/dist/infineon-design-system-stencil/{p-4d9a4329.entry.js → p-49252616.entry.js} +2 -2
  212. package/dist/infineon-design-system-stencil/p-65e57b85.entry.js +2 -0
  213. package/dist/infineon-design-system-stencil/{p-74bee1c8.entry.js → p-65fe2246.entry.js} +2 -2
  214. package/dist/infineon-design-system-stencil/{p-7adee2dd.entry.js → p-6d99d01d.entry.js} +2 -2
  215. package/dist/infineon-design-system-stencil/{p-4764665d.entry.js → p-702a48f8.entry.js} +2 -2
  216. package/dist/infineon-design-system-stencil/{p-b6dd2ac0.entry.js → p-7440ea9d.entry.js} +2 -2
  217. package/dist/infineon-design-system-stencil/{p-c7e86c7c.entry.js → p-7b7ac7fa.entry.js} +2 -2
  218. package/dist/infineon-design-system-stencil/{p-0c1c831c.entry.js → p-87fbd617.entry.js} +2 -2
  219. package/dist/infineon-design-system-stencil/p-885adc48.entry.js +2 -0
  220. package/dist/infineon-design-system-stencil/p-885adc48.entry.js.map +1 -0
  221. package/dist/infineon-design-system-stencil/{p-aaf08082.entry.js → p-88af2e64.entry.js} +2 -2
  222. package/dist/infineon-design-system-stencil/{p-13c107bf.entry.js → p-959285a7.entry.js} +2 -2
  223. package/dist/infineon-design-system-stencil/{p-36dcebde.entry.js → p-a9cfb70d.entry.js} +2 -2
  224. package/dist/infineon-design-system-stencil/{p-6250b9f6.entry.js → p-acf0f4ed.entry.js} +2 -2
  225. package/dist/infineon-design-system-stencil/{p-02496917.entry.js → p-b637c44c.entry.js} +2 -2
  226. package/dist/infineon-design-system-stencil/{p-6c2698a3.entry.js → p-babf3f2d.entry.js} +2 -2
  227. package/dist/infineon-design-system-stencil/{p-5e376887.entry.js → p-c2791360.entry.js} +2 -2
  228. package/dist/infineon-design-system-stencil/{p-a80e321b.entry.js → p-c5a785d7.entry.js} +2 -2
  229. package/dist/infineon-design-system-stencil/{p-2e7d87ed.entry.js → p-e98d2280.entry.js} +2 -2
  230. package/dist/infineon-design-system-stencil/{p-5f38cace.entry.js → p-ecc17497.entry.js} +2 -2
  231. package/dist/infineon-design-system-stencil/{p-5285ca40.entry.js → p-f25f014d.entry.js} +2 -2
  232. package/dist/infineon-design-system-stencil/{p-04d8ea38.entry.js → p-f2bea855.entry.js} +2 -2
  233. package/dist/types/components/breadcrumb/breadcrumb.stories.d.ts +1 -1
  234. package/dist/types/components/select/multi-select/interfaces.d.ts +1 -1
  235. package/dist/types/components/select/multi-select/multiselect.d.ts +61 -39
  236. package/dist/types/components/select/multi-select/multiselect.stories.d.ts +30 -219
  237. package/dist/types/components.d.ts +8 -54
  238. package/package.json +2 -2
  239. package/dist/cjs/icons-2cd72a7d.js.map +0 -1
  240. package/dist/cjs/ifx-multiselect_2.cjs.entry.js +0 -929
  241. package/dist/cjs/ifx-multiselect_2.cjs.entry.js.map +0 -1
  242. package/dist/collection/components/select/multi-select/multiselect-option.css +0 -112
  243. package/dist/collection/components/select/multi-select/multiselect-option.js +0 -505
  244. package/dist/collection/components/select/multi-select/multiselect-option.js.map +0 -1
  245. package/dist/components/ifx-multiselect-option.d.ts +0 -11
  246. package/dist/components/ifx-multiselect-option.js +0 -8
  247. package/dist/components/ifx-multiselect-option.js.map +0 -1
  248. package/dist/components/p-12e75dad.js.map +0 -1
  249. package/dist/components/p-3906f639.js +0 -432
  250. package/dist/components/p-3906f639.js.map +0 -1
  251. package/dist/components/p-aedd7be5.js +0 -599
  252. package/dist/components/p-aedd7be5.js.map +0 -1
  253. package/dist/esm/icons-75858876.js.map +0 -1
  254. package/dist/esm/ifx-multiselect_2.entry.js +0 -924
  255. package/dist/esm/ifx-multiselect_2.entry.js.map +0 -1
  256. package/dist/infineon-design-system-stencil/p-25204a1e.entry.js +0 -2
  257. package/dist/infineon-design-system-stencil/p-25204a1e.entry.js.map +0 -1
  258. package/dist/infineon-design-system-stencil/p-4d96fed0.js.map +0 -1
  259. package/dist/infineon-design-system-stencil/p-6c999b11.entry.js +0 -2
  260. package/dist/infineon-design-system-stencil/p-6c999b11.entry.js.map +0 -1
  261. package/dist/infineon-design-system-stencil/p-76e0c34f.entry.js +0 -2
  262. package/dist/infineon-design-system-stencil/p-a2a44fbe.entry.js +0 -2
  263. package/dist/infineon-design-system-stencil/p-e571c002.entry.js +0 -2
  264. package/dist/types/components/select/multi-select/multiselect-option.d.ts +0 -36
  265. /package/dist/infineon-design-system-stencil/{p-3d037fa4.entry.js.map → p-0f096cf1.entry.js.map} +0 -0
  266. /package/dist/infineon-design-system-stencil/{p-ad7b58c3.entry.js.map → p-1048ee19.entry.js.map} +0 -0
  267. /package/dist/infineon-design-system-stencil/{p-d890b0de.entry.js.map → p-142878ee.entry.js.map} +0 -0
  268. /package/dist/infineon-design-system-stencil/{p-18a81f5f.entry.js.map → p-2b38c405.entry.js.map} +0 -0
  269. /package/dist/infineon-design-system-stencil/{p-e571c002.entry.js.map → p-34738a10.entry.js.map} +0 -0
  270. /package/dist/infineon-design-system-stencil/{p-4d9a4329.entry.js.map → p-49252616.entry.js.map} +0 -0
  271. /package/dist/infineon-design-system-stencil/{p-a2a44fbe.entry.js.map → p-65e57b85.entry.js.map} +0 -0
  272. /package/dist/infineon-design-system-stencil/{p-74bee1c8.entry.js.map → p-65fe2246.entry.js.map} +0 -0
  273. /package/dist/infineon-design-system-stencil/{p-7adee2dd.entry.js.map → p-6d99d01d.entry.js.map} +0 -0
  274. /package/dist/infineon-design-system-stencil/{p-4764665d.entry.js.map → p-702a48f8.entry.js.map} +0 -0
  275. /package/dist/infineon-design-system-stencil/{p-b6dd2ac0.entry.js.map → p-7440ea9d.entry.js.map} +0 -0
  276. /package/dist/infineon-design-system-stencil/{p-c7e86c7c.entry.js.map → p-7b7ac7fa.entry.js.map} +0 -0
  277. /package/dist/infineon-design-system-stencil/{p-0c1c831c.entry.js.map → p-87fbd617.entry.js.map} +0 -0
  278. /package/dist/infineon-design-system-stencil/{p-aaf08082.entry.js.map → p-88af2e64.entry.js.map} +0 -0
  279. /package/dist/infineon-design-system-stencil/{p-13c107bf.entry.js.map → p-959285a7.entry.js.map} +0 -0
  280. /package/dist/infineon-design-system-stencil/{p-36dcebde.entry.js.map → p-a9cfb70d.entry.js.map} +0 -0
  281. /package/dist/infineon-design-system-stencil/{p-6250b9f6.entry.js.map → p-acf0f4ed.entry.js.map} +0 -0
  282. /package/dist/infineon-design-system-stencil/{p-02496917.entry.js.map → p-b637c44c.entry.js.map} +0 -0
  283. /package/dist/infineon-design-system-stencil/{p-6c2698a3.entry.js.map → p-babf3f2d.entry.js.map} +0 -0
  284. /package/dist/infineon-design-system-stencil/{p-5e376887.entry.js.map → p-c2791360.entry.js.map} +0 -0
  285. /package/dist/infineon-design-system-stencil/{p-a80e321b.entry.js.map → p-c5a785d7.entry.js.map} +0 -0
  286. /package/dist/infineon-design-system-stencil/{p-2e7d87ed.entry.js.map → p-e98d2280.entry.js.map} +0 -0
  287. /package/dist/infineon-design-system-stencil/{p-5f38cace.entry.js.map → p-ecc17497.entry.js.map} +0 -0
  288. /package/dist/infineon-design-system-stencil/{p-5285ca40.entry.js.map → p-f25f014d.entry.js.map} +0 -0
  289. /package/dist/infineon-design-system-stencil/{p-04d8ea38.entry.js.map → p-f2bea855.entry.js.map} +0 -0
@@ -1,47 +1,97 @@
1
1
  import { action } from "@storybook/addon-actions";
2
+ const options = [
3
+ {
4
+ value: 'a',
5
+ label: 'Option a',
6
+ selected: false,
7
+ },
8
+ {
9
+ value: 'b',
10
+ label: 'Option b',
11
+ selected: false,
12
+ },
13
+ {
14
+ value: 'c',
15
+ label: 'Option c',
16
+ selected: false,
17
+ children: [
18
+ {
19
+ value: 'z1',
20
+ label: 'Option c1',
21
+ selected: false,
22
+ },
23
+ {
24
+ value: 'z2',
25
+ label: 'Option c2',
26
+ selected: false,
27
+ },
28
+ ],
29
+ },
30
+ ];
31
+ const longOptions = [];
32
+ for (let i = 1; i <= 50; i++) {
33
+ let children = undefined;
34
+ if (i % 3 == 0) {
35
+ children = [{
36
+ "value": `${i}.1`,
37
+ "label": `Option ${i}.1`,
38
+ "selected": i % 2 == 0 ? true : false
39
+ }, {
40
+ "value": `${i}.2`,
41
+ "label": `Option ${i}.2`,
42
+ "selected": i % 4 == 0 ? true : false
43
+ }];
44
+ }
45
+ longOptions.push({
46
+ "value": i,
47
+ "label": `Option ${i}`,
48
+ "selected": i % 2 == 0 ? true : false,
49
+ "children": children
50
+ });
51
+ }
2
52
  export default {
3
53
  title: 'Components/Select/Multi Select',
4
- parameters: {
5
- controls: {
6
- expanded: true,
7
- sort: 'alpha'
8
- }
9
- },
54
+ // tags: ['autodocs'],
10
55
  args: {
11
56
  name: 'multiselect',
57
+ size: 'm',
12
58
  disabled: false,
59
+ batchSize: 10,
60
+ maxItemCount: 10,
13
61
  showSearch: true,
14
62
  showSelectAll: true,
15
- showExpandCollapse: true,
16
63
  error: false,
17
64
  errorMessage: 'Some error',
18
65
  label: '',
19
66
  placeholder: 'Placeholder',
20
- showClearButton: true,
21
- noResultsMessage: 'No results found.',
22
- showNoResultsMessage: true,
23
- searchPlaceholder: 'Search',
24
- selectAllLabel: 'Select all',
25
- expandLabel: 'Expand',
26
- collapseLabel: 'Collapse',
27
- ariaMultiSelectLabel: 'Multi-select dropdown',
28
- ariaMultiSelectLabelledBy: '',
29
- ariaMultiSelectDescribedBy: '',
30
- ariaSearchLabel: 'Search options',
31
- ariaClearLabel: 'Clear all selections',
32
- ariaToggleLabel: 'Toggle dropdown',
33
- ariaSelectAllLabel: 'Select all options',
34
- ariaExpandAllLabel: 'Expand all categories',
35
- ariaCollapseAllLabel: 'Collapse all categories'
67
+ showClearButton: true
36
68
  },
37
69
  argTypes: {
38
- // Function
70
+ size: {
71
+ description: 'Size of the input field.',
72
+ options: {
73
+ 'small (36px)': 's',
74
+ 'medium (40px)': 'm',
75
+ },
76
+ control: {
77
+ type: 'radio',
78
+ },
79
+ table: {
80
+ category: 'ifx-multiselect props',
81
+ defaultValue: {
82
+ summary: 'medium (40px)',
83
+ },
84
+ type: {
85
+ summary: '36px | 40px',
86
+ },
87
+ },
88
+ },
39
89
  disabled: {
40
90
  description: 'Disable the input field.',
41
91
  options: [true, false],
42
92
  control: { type: 'boolean' },
43
93
  table: {
44
- category: 'Function',
94
+ category: 'ifx-multiselect props',
45
95
  defaultValue: {
46
96
  summary: 'false',
47
97
  },
@@ -54,35 +104,43 @@ export default {
54
104
  description: `For a <*form*> element, the name attribute is used as a reference when the data is submitted.`,
55
105
  control: 'text',
56
106
  table: {
57
- category: 'Function',
58
- defaultValue: {
59
- summary: 'undefined',
60
- },
107
+ category: 'ifx-multiselect props',
61
108
  type: {
62
109
  summary: 'string',
63
110
  },
64
111
  },
65
112
  },
66
- showSearch: {
67
- description: 'Show a search input.',
68
- options: [true, false],
69
- control: { type: 'boolean' },
113
+ batchSize: {
114
+ description: 'Batch size used during lazy loading options.',
115
+ control: {
116
+ type: 'number',
117
+ },
70
118
  table: {
71
- category: 'Function',
119
+ category: 'ifx-multiselect props',
72
120
  defaultValue: {
73
- summary: 'true',
121
+ summary: '50',
74
122
  },
75
123
  type: {
76
- summary: 'boolean',
124
+ summary: 'number',
77
125
  },
78
126
  },
79
127
  },
80
- showSelectAll: {
81
- description: 'Show a checkbox to select all options.',
128
+ maxItemCount: {
129
+ control: { type: 'number' },
130
+ description: 'Number of maximum selectable items.',
131
+ table: {
132
+ category: 'ifx-multiselect props',
133
+ type: {
134
+ summary: 'number'
135
+ }
136
+ }
137
+ },
138
+ showSearch: {
139
+ description: 'Show a search input.',
82
140
  options: [true, false],
83
- control: { type: 'boolean' },
141
+ control: { type: 'radio' },
84
142
  table: {
85
- category: 'Function',
143
+ category: 'ifx-multiselect props',
86
144
  defaultValue: {
87
145
  summary: 'true',
88
146
  },
@@ -91,12 +149,12 @@ export default {
91
149
  },
92
150
  },
93
151
  },
94
- showExpandCollapse: {
95
- description: 'Show expand/collapse controls for nested options.',
152
+ showSelectAll: {
153
+ description: 'Show a checkbox to select all options.',
96
154
  options: [true, false],
97
- control: { type: 'boolean' },
155
+ control: { type: 'radio' },
98
156
  table: {
99
- category: 'Function',
157
+ category: 'ifx-multiselect props',
100
158
  defaultValue: {
101
159
  summary: 'true',
102
160
  },
@@ -109,35 +167,18 @@ export default {
109
167
  description: 'Shows the clear icon button.',
110
168
  control: 'boolean',
111
169
  table: {
112
- category: 'Function',
170
+ category: 'ifx-multiselect props',
113
171
  defaultValue: {
114
- summary: 'true',
115
- },
116
- type: {
117
- summary: 'boolean',
118
- },
172
+ summary: true
173
+ }
119
174
  }
120
175
  },
121
- showNoResultsMessage: {
122
- description: 'Show/hide the no results message when search has no matches.',
123
- options: [true, false],
124
- control: { type: 'boolean' },
125
- table: {
126
- category: 'Function',
127
- defaultValue: {
128
- summary: 'true',
129
- },
130
- type: {
131
- summary: 'boolean',
132
- },
133
- },
134
- },
135
176
  error: {
136
177
  description: 'Show error state.',
137
178
  options: [true, false],
138
- control: { type: 'boolean' },
179
+ control: { type: 'radio' },
139
180
  table: {
140
- category: 'Function',
181
+ category: 'ifx-multiselect props',
141
182
  defaultValue: {
142
183
  summary: 'false',
143
184
  },
@@ -146,38 +187,11 @@ export default {
146
187
  },
147
188
  },
148
189
  },
149
- // Label
150
- label: {
151
- description: 'Label over the input field.',
152
- control: 'text',
153
- table: {
154
- category: 'Label',
155
- defaultValue: {
156
- summary: '""',
157
- },
158
- type: {
159
- summary: 'string',
160
- },
161
- },
162
- },
163
- placeholder: {
164
- description: 'Label inside the input field.',
165
- control: 'text',
166
- table: {
167
- category: 'Label',
168
- defaultValue: {
169
- summary: '""',
170
- },
171
- type: {
172
- summary: 'string',
173
- },
174
- },
175
- },
176
190
  errorMessage: {
177
191
  control: 'text',
178
192
  description: 'Error message to display.',
179
193
  table: {
180
- category: 'Label',
194
+ category: 'ifx-multiselect props',
181
195
  defaultValue: {
182
196
  summary: 'Error',
183
197
  },
@@ -186,195 +200,41 @@ export default {
186
200
  },
187
201
  },
188
202
  },
189
- noResultsMessage: {
190
- description: 'Custom message to display when search has no results.',
191
- control: 'text',
192
- table: {
193
- category: 'Label',
194
- defaultValue: {
195
- summary: 'No results found.',
196
- },
197
- type: {
198
- summary: 'string',
199
- },
200
- },
201
- },
202
- searchPlaceholder: {
203
- description: 'Placeholder text for the search input field.',
204
- control: 'text',
205
- table: {
206
- category: 'Label',
207
- defaultValue: {
208
- summary: 'Search',
209
- },
210
- type: {
211
- summary: 'string',
212
- },
213
- },
214
- },
215
- selectAllLabel: {
216
- description: 'Label text for the select all checkbox.',
217
- control: 'text',
218
- table: {
219
- category: 'Label',
220
- defaultValue: {
221
- summary: 'Select all',
222
- },
223
- type: {
224
- summary: 'string',
225
- },
226
- },
227
- },
228
- expandLabel: {
229
- description: 'Label text for the expand all control.',
230
- control: 'text',
231
- table: {
232
- category: 'Label',
233
- defaultValue: {
234
- summary: 'Expand',
235
- },
236
- type: {
237
- summary: 'string',
238
- },
239
- },
240
- },
241
- collapseLabel: {
242
- description: 'Label text for the collapse all control.',
243
- control: 'text',
244
- table: {
245
- category: 'Label',
246
- defaultValue: {
247
- summary: 'Collapse',
248
- },
249
- type: {
250
- summary: 'string',
251
- },
252
- },
253
- },
254
- // ARIA Labels
255
- ariaMultiSelectLabel: {
256
- description: 'ARIA label for the multiselect component.',
257
- control: 'text',
258
- table: {
259
- category: 'ARIA Labels',
260
- defaultValue: {
261
- summary: 'Multi-select dropdown',
262
- },
263
- type: {
264
- summary: 'string',
265
- },
266
- },
267
- },
268
- ariaMultiSelectLabelledBy: {
269
- description: 'ID of element that labels the multiselect.',
270
- control: 'text',
271
- table: {
272
- category: 'ARIA Labels',
273
- defaultValue: {
274
- summary: '""',
275
- },
276
- type: {
277
- summary: 'string',
278
- },
279
- },
280
- },
281
- ariaMultiSelectDescribedBy: {
282
- description: 'ID of element that describes the multiselect.',
283
- control: 'text',
284
- table: {
285
- category: 'ARIA Labels',
286
- defaultValue: {
287
- summary: '""',
288
- },
289
- type: {
290
- summary: 'string',
291
- },
292
- },
293
- },
294
- ariaSearchLabel: {
295
- description: 'ARIA label for the search input field.',
296
- control: 'text',
297
- table: {
298
- category: 'ARIA Labels',
299
- defaultValue: {
300
- summary: 'Search options',
301
- },
302
- type: {
303
- summary: 'string',
304
- },
305
- },
306
- },
307
- ariaClearLabel: {
308
- description: 'ARIA label for the clear all button.',
309
- control: 'text',
310
- table: {
311
- category: 'ARIA Labels',
312
- defaultValue: {
313
- summary: 'Clear all selections',
314
- },
315
- type: {
316
- summary: 'string',
317
- },
318
- },
319
- },
320
- ariaToggleLabel: {
321
- description: 'ARIA label for the dropdown toggle button.',
203
+ label: {
204
+ description: 'Label over the input field.',
322
205
  control: 'text',
323
206
  table: {
324
- category: 'ARIA Labels',
325
- defaultValue: {
326
- summary: 'Toggle dropdown',
327
- },
207
+ category: 'ifx-multiselect props',
328
208
  type: {
329
209
  summary: 'string',
330
210
  },
331
211
  },
332
212
  },
333
- ariaSelectAllLabel: {
334
- description: 'ARIA label for the select all checkbox.',
213
+ placeholder: {
214
+ description: 'Label inside the input field.',
335
215
  control: 'text',
336
216
  table: {
337
- category: 'ARIA Labels',
338
- defaultValue: {
339
- summary: 'Select all options',
340
- },
217
+ category: 'ifx-multiselect props',
341
218
  type: {
342
219
  summary: 'string',
343
220
  },
344
221
  },
345
222
  },
346
- ariaExpandAllLabel: {
347
- description: 'ARIA label for the expand all control.',
348
- control: 'text',
223
+ options: {
224
+ description: 'Takes an array of objects in the following format.',
349
225
  table: {
350
- category: 'ARIA Labels',
351
- defaultValue: {
352
- summary: 'Expand all categories',
353
- },
226
+ category: 'ifx-multiselect props',
354
227
  type: {
355
- summary: 'string',
228
+ summary: 'Details',
229
+ detail: `'Array<{ value: string, label: string, selected: boolean, children?: Array<{ value: string, label: string, selected: boolean }> }>'`,
356
230
  },
357
231
  },
358
232
  },
359
- ariaCollapseAllLabel: {
360
- description: 'ARIA label for the collapse all control.',
361
- control: 'text',
362
- table: {
363
- category: 'ARIA Labels',
364
- defaultValue: {
365
- summary: 'Collapse all categories',
366
- },
367
- type: {
368
- summary: 'string',
369
- },
370
- },
371
- },
372
- // Custom Events
373
233
  ifxSelect: {
374
234
  action: 'ifxSelect',
375
235
  description: 'Custom event emitted when item is selected or unselected.',
376
236
  table: {
377
- category: 'Custom Events',
237
+ category: 'custom events',
378
238
  type: {
379
239
  summary: 'Framework integration',
380
240
  detail: 'React: onIfxSelect={handleInput}\nVue:@ifxSelect="handleInput"\nAngular:(ifxSelect)="handleInput()"\nVanillaJs:.addEventListener("ifxSelect", (event) => {//handle input});',
@@ -385,7 +245,7 @@ export default {
385
245
  action: 'ifxOpen',
386
246
  description: 'Custom event emitted when multiselect is opened.',
387
247
  table: {
388
- category: 'Custom Events',
248
+ category: 'custom events',
389
249
  type: {
390
250
  summary: 'Framework integration',
391
251
  detail: 'React: onIfxOpen={handleChange}\nVue:@ifxOpen="handleChange"\nAngular:(ifxOpen)="handleChange()"\nVanillaJs:.addEventListener("ifxOpen", (event) => {//handle change});',
@@ -394,125 +254,21 @@ export default {
394
254
  }
395
255
  },
396
256
  };
397
- const SlotBasedTemplate = args => {
398
- const template = `<ifx-multiselect
257
+ const Template = args => {
258
+ const template = `<ifx-multiselect
399
259
  name='${args.name}'
260
+ options='${JSON.stringify(args.options)}'
261
+ batch-size='${args.batchSize}'
262
+ size='${args.size}'
400
263
  disabled='${args.disabled}'
264
+ max-item-count='${args.maxItemCount}'
401
265
  error='${args.error}'
402
266
  error-message='${args.errorMessage}'
403
267
  label='${args.label}'
404
268
  placeholder='${args.placeholder}'
405
269
  show-search='${args.showSearch}'
406
270
  show-select-all='${args.showSelectAll}'
407
- show-expand-collapse='${args.showExpandCollapse}'
408
- show-clear-button='${args.showClearButton}'
409
- no-results-message='${args.noResultsMessage}'
410
- show-no-results-message='${args.showNoResultsMessage}'
411
- search-placeholder='${args.searchPlaceholder}'
412
- select-all-label='${args.selectAllLabel}'
413
- expand-label='${args.expandLabel}'
414
- collapse-label='${args.collapseLabel}'
415
- aria-multi-select-label='${args.ariaMultiSelectLabel}'
416
- aria-multi-select-labelled-by='${args.ariaMultiSelectLabelledBy}'
417
- aria-multi-select-described-by='${args.ariaMultiSelectDescribedBy}'
418
- aria-search-label='${args.ariaSearchLabel}'
419
- aria-clear-label='${args.ariaClearLabel}'
420
- aria-toggle-label='${args.ariaToggleLabel}'
421
- aria-select-all-label='${args.ariaSelectAllLabel}'
422
- aria-expand-all-label='${args.ariaExpandAllLabel}'
423
- aria-collapse-all-label='${args.ariaCollapseAllLabel}'>
424
-
425
- <ifx-multiselect-option value="category-a">
426
- Category A - Main Section
427
-
428
- <ifx-multiselect-option value="category-a-1" slot="children">
429
- Category A.1 - First Subsection
430
- <ifx-multiselect-option value="option-a-1-1" slot="children">Option A.1.1 - Basic Item</ifx-multiselect-option>
431
- <ifx-multiselect-option value="option-a-1-2" selected slot="children">Option A.1.2 - Preselected Item</ifx-multiselect-option>
432
- <ifx-multiselect-option value="option-a-1-3" slot="children">Option A.1.3 - Another Item</ifx-multiselect-option>
433
- </ifx-multiselect-option>
434
-
435
- <ifx-multiselect-option value="category-a-2" slot="children">
436
- Category A.2 - Second Subsection
437
- <ifx-multiselect-option value="option-a-2-1" slot="children">Option A.2.1 - Nested Item</ifx-multiselect-option>
438
- <ifx-multiselect-option value="option-a-2-2" slot="children">
439
- Option A.2.2 - Deep Nested Parent
440
- <ifx-multiselect-option value="option-a-2-2-1" slot="children">Option A.2.2.1 - Level 4 Item</ifx-multiselect-option>
441
- <ifx-multiselect-option value="option-a-2-2-2" slot="children">Option A.2.2.2 - Level 4 Item</ifx-multiselect-option>
442
- <ifx-multiselect-option value="option-a-2-2-3" slot="children">
443
- Option A.2.2.3 - Even Deeper
444
- <ifx-multiselect-option value="option-a-2-2-3-1" slot="children">Option A.2.2.3.1 - Level 5 Item</ifx-multiselect-option>
445
- <ifx-multiselect-option value="option-a-2-2-3-2" slot="children">Option A.2.2.3.2 - Level 5 Item</ifx-multiselect-option>
446
- </ifx-multiselect-option>
447
- </ifx-multiselect-option>
448
- <ifx-multiselect-option value="option-a-2-3" slot="children">Option A.2.3 - Final Nested</ifx-multiselect-option>
449
- </ifx-multiselect-option>
450
-
451
- <ifx-multiselect-option value="option-a-3" slot="children">Option A.3 - Direct Child</ifx-multiselect-option>
452
- <ifx-multiselect-option value="option-a-4" slot="children">Option A.4 - Another Direct Child</ifx-multiselect-option>
453
- </ifx-multiselect-option>
454
-
455
- <ifx-multiselect-option value="category-b">
456
- Category B - Secondary Section
457
-
458
- <ifx-multiselect-option value="category-b-1" slot="children">
459
- Category B.1 - Mixed Content
460
- <ifx-multiselect-option value="option-b-1-1" slot="children">Option B.1.1 - Standard Item</ifx-multiselect-option>
461
- <ifx-multiselect-option value="category-b-1-2" slot="children">
462
- Category B.1.2 - Sub-Category
463
- <ifx-multiselect-option value="option-b-1-2-1" slot="children">Option B.1.2.1 - Nested Choice</ifx-multiselect-option>
464
- <ifx-multiselect-option value="option-b-1-2-2" slot="children">Option B.1.2.2 - Nested Choice</ifx-multiselect-option>
465
- <ifx-multiselect-option value="option-b-1-2-3" slot="children">Option B.1.2.3 - Nested Choice</ifx-multiselect-option>
466
- </ifx-multiselect-option>
467
- <ifx-multiselect-option value="option-b-1-3" slot="children">Option B.1.3 - Standard Item</ifx-multiselect-option>
468
- </ifx-multiselect-option>
469
-
470
- <ifx-multiselect-option value="option-b-2" slot="children">Option B.2 - Standalone Item</ifx-multiselect-option>
471
- <ifx-multiselect-option value="option-b-3" slot="children">Option B.3 - Standalone Item</ifx-multiselect-option>
472
- </ifx-multiselect-option>
473
-
474
- <ifx-multiselect-option value="category-c">
475
- Category C - Complex Structure
476
-
477
- <ifx-multiselect-option value="category-c-1" slot="children">
478
- Category C.1 - Multi-Level Group
479
- <ifx-multiselect-option value="category-c-1-1" slot="children">
480
- Category C.1.1 - Sub-Group Alpha
481
- <ifx-multiselect-option value="option-c-1-1-1" slot="children">Option C.1.1.1 - Alpha Item 1</ifx-multiselect-option>
482
- <ifx-multiselect-option value="option-c-1-1-2" slot="children">Option C.1.1.2 - Alpha Item 2</ifx-multiselect-option>
483
- </ifx-multiselect-option>
484
- <ifx-multiselect-option value="category-c-1-2" slot="children">
485
- Category C.1.2 - Sub-Group Beta
486
- <ifx-multiselect-option value="option-c-1-2-1" slot="children">Option C.1.2.1 - Beta Item 1</ifx-multiselect-option>
487
- <ifx-multiselect-option value="option-c-1-2-2" slot="children">Option C.1.2.2 - Beta Item 2</ifx-multiselect-option>
488
- <ifx-multiselect-option value="option-c-1-2-3" slot="children">Option C.1.2.3 - Beta Item 3</ifx-multiselect-option>
489
- </ifx-multiselect-option>
490
- <ifx-multiselect-option value="option-c-1-3" slot="children">Option C.1.3 - Direct Item</ifx-multiselect-option>
491
- </ifx-multiselect-option>
492
-
493
- <ifx-multiselect-option value="category-c-2" slot="children">
494
- Category C.2 - Another Group
495
- <ifx-multiselect-option value="option-c-2-1" slot="children">Option C.2.1 - Group Item</ifx-multiselect-option>
496
- <ifx-multiselect-option value="option-c-2-2" slot="children">Option C.2.2 - Group Item</ifx-multiselect-option>
497
- </ifx-multiselect-option>
498
- </ifx-multiselect-option>
499
-
500
- <ifx-multiselect-option value="option-d">Option D - Top-Level Standalone</ifx-multiselect-option>
501
-
502
- <ifx-multiselect-option value="option-e">Option E - Top-Level Standalone</ifx-multiselect-option>
503
-
504
- <ifx-multiselect-option value="category-f">
505
- Category F - Final Section
506
-
507
- <ifx-multiselect-option value="option-f-1" slot="children">Option F.1 - Simple Item</ifx-multiselect-option>
508
- <ifx-multiselect-option value="option-f-2" slot="children">Option F.2 - Simple Item</ifx-multiselect-option>
509
- <ifx-multiselect-option value="category-f-3" slot="children">
510
- Category F.3 - Last Group
511
- <ifx-multiselect-option value="option-f-3-1" slot="children">Option F.3.1 - Final Nested</ifx-multiselect-option>
512
- <ifx-multiselect-option value="option-f-3-2" slot="children">Option F.3.2 - Final Nested</ifx-multiselect-option>
513
- <ifx-multiselect-option value="option-f-3-3" slot="children">Option F.3.3 - Final Nested</ifx-multiselect-option>
514
- </ifx-multiselect-option>
515
- </ifx-multiselect-option>
271
+ show-clear-button='${args.showClearButton}'>
516
272
  </ifx-multiselect>`;
517
273
  setTimeout(() => {
518
274
  document.querySelector('ifx-multiselect').addEventListener('ifxSelect', action('ifxSelect'));
@@ -520,74 +276,14 @@ const SlotBasedTemplate = args => {
520
276
  }, 0);
521
277
  return template;
522
278
  };
523
- export const Default = SlotBasedTemplate.bind({});
279
+ export const Default = Template.bind({});
524
280
  Default.args = {
525
- label: 'Generic Multi-Level Selection',
526
- placeholder: 'Select options...',
281
+ options: options,
527
282
  };
528
- Default.parameters = {
529
- docs: {
530
- description: {
531
- story: 'The multiselect component supports nested hierarchical options with search, select all, and expand/collapse functionality. Use slot-based syntax for defining options and their nested structure.'
532
- }
533
- }
534
- };
535
- const FlatTemplate = args => {
536
- const template = `<ifx-multiselect
537
- name='${args.name}'
538
- disabled='${args.disabled}'
539
- error='${args.error}'
540
- error-message='${args.errorMessage}'
541
- label='${args.label}'
542
- placeholder='${args.placeholder}'
543
- show-search='${args.showSearch}'
544
- show-select-all='${args.showSelectAll}'
545
- show-expand-collapse='${args.showExpandCollapse}'
546
- show-clear-button='${args.showClearButton}'
547
- no-results-message='${args.noResultsMessage}'
548
- show-no-results-message='${args.showNoResultsMessage}'
549
- search-placeholder='${args.searchPlaceholder}'
550
- select-all-label='${args.selectAllLabel}'
551
- expand-label='${args.expandLabel}'
552
- collapse-label='${args.collapseLabel}'
553
- aria-multi-select-label='${args.ariaMultiSelectLabel}'
554
- aria-multi-select-labelled-by='${args.ariaMultiSelectLabelledBy}'
555
- aria-multi-select-described-by='${args.ariaMultiSelectDescribedBy}'
556
- aria-search-label='${args.ariaSearchLabel}'
557
- aria-clear-label='${args.ariaClearLabel}'
558
- aria-toggle-label='${args.ariaToggleLabel}'
559
- aria-select-all-label='${args.ariaSelectAllLabel}'
560
- aria-expand-all-label='${args.ariaExpandAllLabel}'
561
- aria-collapse-all-label='${args.ariaCollapseAllLabel}'>
562
-
563
- <ifx-multiselect-option value="option-1">Option 1</ifx-multiselect-option>
564
- <ifx-multiselect-option value="option-2">Option 2</ifx-multiselect-option>
565
- <ifx-multiselect-option value="option-3">Option 3</ifx-multiselect-option>
566
- <ifx-multiselect-option value="option-4">Option 4</ifx-multiselect-option>
567
- <ifx-multiselect-option value="option-5">Option 5</ifx-multiselect-option>
568
- <ifx-multiselect-option value="option-6">Option 6</ifx-multiselect-option>
569
- <ifx-multiselect-option value="option-7">Option 7</ifx-multiselect-option>
570
- <ifx-multiselect-option value="option-8">Option 8</ifx-multiselect-option>
571
- <ifx-multiselect-option value="option-9">Option 9</ifx-multiselect-option>
572
- <ifx-multiselect-option value="option-10">Option 10</ifx-multiselect-option>
573
- </ifx-multiselect>`;
574
- setTimeout(() => {
575
- const multiselect = document.querySelectorAll('ifx-multiselect')[document.querySelectorAll('ifx-multiselect').length - 1];
576
- multiselect.addEventListener('ifxSelect', action('ifxSelect'));
577
- multiselect.addEventListener('ifxOpen', action('ifxOpen'));
578
- }, 0);
579
- return template;
580
- };
581
- export const SingleLevel = FlatTemplate.bind({});
582
- SingleLevel.args = {
583
- label: 'Single Level Selection',
584
- placeholder: 'Select options...',
585
- };
586
- SingleLevel.parameters = {
587
- docs: {
588
- description: {
589
- story: 'A simple multiselect with single-level options - no nesting or hierarchical structure. Expand/Collapse controls are automatically hidden for single-level option lists.'
590
- }
591
- }
283
+ export const WithLazyLoading = Template.bind({});
284
+ WithLazyLoading.args = {
285
+ options: longOptions,
286
+ batchSize: 5,
287
+ maxItemCount: undefined
592
288
  };
593
289
  //# sourceMappingURL=multiselect.stories.js.map