@scania/tegel 0.0.4 → 0.0.5

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 (745) hide show
  1. package/dist/cjs/{index-18eb94f0.js → index-5ad19933.js} +36 -9
  2. package/dist/cjs/index-5ad19933.js.map +1 -0
  3. package/dist/cjs/loader.cjs.js +2 -2
  4. package/dist/cjs/sdds-accordion-item.cjs.entry.js +1 -1
  5. package/dist/cjs/sdds-accordion.cjs.entry.js +2 -3
  6. package/dist/cjs/sdds-accordion.cjs.entry.js.map +1 -1
  7. package/dist/cjs/sdds-badges.cjs.entry.js +1 -1
  8. package/dist/cjs/sdds-banner.cjs.entry.js +2 -2
  9. package/dist/cjs/sdds-banner.cjs.entry.js.map +1 -1
  10. package/dist/cjs/sdds-block.cjs.entry.js +1 -1
  11. package/dist/cjs/sdds-body-cell_2.cjs.entry.js +12 -12
  12. package/dist/cjs/sdds-body-cell_2.cjs.entry.js.map +1 -1
  13. package/dist/cjs/sdds-breadcrumb-link.cjs.entry.js +27 -0
  14. package/dist/cjs/sdds-breadcrumb-link.cjs.entry.js.map +1 -0
  15. package/dist/cjs/sdds-breadcrumb.cjs.entry.js +4 -4
  16. package/dist/cjs/sdds-breadcrumb.cjs.entry.js.map +1 -1
  17. package/dist/cjs/sdds-button.cjs.entry.js +2 -2
  18. package/dist/cjs/sdds-button.cjs.entry.js.map +1 -1
  19. package/dist/cjs/sdds-card.cjs.entry.js +2 -2
  20. package/dist/cjs/sdds-card.cjs.entry.js.map +1 -1
  21. package/dist/cjs/sdds-checkbox.cjs.entry.js +1 -1
  22. package/dist/cjs/sdds-datetime.cjs.entry.js +15 -6
  23. package/dist/cjs/sdds-datetime.cjs.entry.js.map +1 -1
  24. package/dist/cjs/sdds-divider.cjs.entry.js +22 -0
  25. package/dist/cjs/sdds-divider.cjs.entry.js.map +1 -0
  26. package/dist/cjs/sdds-dropdown-filter.cjs.entry.js +10 -7
  27. package/dist/cjs/sdds-dropdown-filter.cjs.entry.js.map +1 -1
  28. package/dist/cjs/sdds-dropdown_2.cjs.entry.js +20 -20
  29. package/dist/cjs/sdds-dropdown_2.cjs.entry.js.map +1 -1
  30. package/dist/cjs/sdds-folder-tabs-button.cjs.entry.js +29 -0
  31. package/dist/cjs/sdds-folder-tabs-button.cjs.entry.js.map +1 -0
  32. package/dist/cjs/sdds-folder-tabs-link.cjs.entry.js +34 -0
  33. package/dist/cjs/sdds-folder-tabs-link.cjs.entry.js.map +1 -0
  34. package/dist/cjs/sdds-folder-tabs.cjs.entry.js +180 -0
  35. package/dist/cjs/sdds-folder-tabs.cjs.entry.js.map +1 -0
  36. package/dist/cjs/sdds-footer-link-group.cjs.entry.js +1 -1
  37. package/dist/cjs/sdds-footer-link.cjs.entry.js +1 -1
  38. package/dist/cjs/sdds-footer.cjs.entry.js +1 -1
  39. package/dist/cjs/sdds-header-cell.cjs.entry.js +9 -13
  40. package/dist/cjs/sdds-header-cell.cjs.entry.js.map +1 -1
  41. package/dist/cjs/sdds-icon.cjs.entry.js +1 -1
  42. package/dist/cjs/sdds-inline-tabs-button.cjs.entry.js +24 -0
  43. package/dist/cjs/sdds-inline-tabs-button.cjs.entry.js.map +1 -0
  44. package/dist/cjs/sdds-inline-tabs-link.cjs.entry.js +29 -0
  45. package/dist/cjs/sdds-inline-tabs-link.cjs.entry.js.map +1 -0
  46. package/dist/cjs/sdds-inline-tabs.cjs.entry.js +113 -148
  47. package/dist/cjs/sdds-inline-tabs.cjs.entry.js.map +1 -1
  48. package/dist/cjs/sdds-link.cjs.entry.js +1 -1
  49. package/dist/cjs/sdds-message.cjs.entry.js +1 -1
  50. package/dist/cjs/sdds-modal.cjs.entry.js +67 -22
  51. package/dist/cjs/sdds-modal.cjs.entry.js.map +1 -1
  52. package/dist/cjs/sdds-navigation-tabs-button.cjs.entry.js +24 -0
  53. package/dist/cjs/sdds-navigation-tabs-button.cjs.entry.js.map +1 -0
  54. package/dist/cjs/sdds-navigation-tabs-link.cjs.entry.js +29 -0
  55. package/dist/cjs/sdds-navigation-tabs-link.cjs.entry.js.map +1 -0
  56. package/dist/cjs/sdds-navigation-tabs.cjs.entry.js +69 -24
  57. package/dist/cjs/sdds-navigation-tabs.cjs.entry.js.map +1 -1
  58. package/dist/cjs/sdds-popover-canvas.cjs.entry.js +68 -41
  59. package/dist/cjs/sdds-popover-canvas.cjs.entry.js.map +1 -1
  60. package/dist/cjs/sdds-popover-menu.cjs.entry.js +1 -1
  61. package/dist/cjs/sdds-radio-button.cjs.entry.js +6 -2
  62. package/dist/cjs/sdds-radio-button.cjs.entry.js.map +1 -1
  63. package/dist/cjs/sdds-slider.cjs.entry.js +9 -9
  64. package/dist/cjs/sdds-slider.cjs.entry.js.map +1 -1
  65. package/dist/cjs/sdds-spinner.cjs.entry.js +1 -1
  66. package/dist/cjs/sdds-stepper-item.cjs.entry.js +1 -1
  67. package/dist/cjs/sdds-stepper.cjs.entry.js +1 -1
  68. package/dist/cjs/sdds-table-body-row-expandable.cjs.entry.js +6 -6
  69. package/dist/cjs/sdds-table-body-row-expandable.cjs.entry.js.map +1 -1
  70. package/dist/cjs/sdds-table-body.cjs.entry.js +13 -13
  71. package/dist/cjs/sdds-table-body.cjs.entry.js.map +1 -1
  72. package/dist/cjs/sdds-table-footer.cjs.entry.js +7 -7
  73. package/dist/cjs/sdds-table-footer.cjs.entry.js.map +1 -1
  74. package/dist/cjs/sdds-table-header.cjs.entry.js +6 -6
  75. package/dist/cjs/sdds-table-header.cjs.entry.js.map +1 -1
  76. package/dist/cjs/sdds-table-toolbar.cjs.entry.js +4 -4
  77. package/dist/cjs/sdds-table-toolbar.cjs.entry.js.map +1 -1
  78. package/dist/cjs/sdds-table.cjs.entry.js +10 -10
  79. package/dist/cjs/sdds-table.cjs.entry.js.map +1 -1
  80. package/dist/cjs/sdds-textarea.cjs.entry.js +12 -12
  81. package/dist/cjs/sdds-textarea.cjs.entry.js.map +1 -1
  82. package/dist/cjs/sdds-textfield.cjs.entry.js +13 -24
  83. package/dist/cjs/sdds-textfield.cjs.entry.js.map +1 -1
  84. package/dist/cjs/sdds-toast.cjs.entry.js +1 -1
  85. package/dist/cjs/sdds-toggle.cjs.entry.js +2 -2
  86. package/dist/cjs/sdds-toggle.cjs.entry.js.map +1 -1
  87. package/dist/cjs/sdds-tooltip.cjs.entry.js +1 -1
  88. package/dist/cjs/tegel.cjs.js +2 -2
  89. package/dist/collection/collection-manifest.json +10 -4
  90. package/dist/collection/components/accordion/accordion.js +1 -20
  91. package/dist/collection/components/accordion/accordion.js.map +1 -1
  92. package/dist/collection/components/accordion/accordion.stories.js +2 -2
  93. package/dist/collection/components/accordion/accordion.stories.js.map +1 -1
  94. package/dist/collection/components/badge/badge.stories.js +0 -3
  95. package/dist/collection/components/badge/badge.stories.js.map +1 -1
  96. package/dist/collection/components/banner/sdds-banner.css +1 -0
  97. package/dist/collection/components/banner/sdds-banner.stories.js +2 -5
  98. package/dist/collection/components/banner/sdds-banner.stories.js.map +1 -1
  99. package/dist/collection/components/breadcrumb/{sdds-breadcrumb-item/sdds-breadcrumb-item.css → sdds-breadcrumb-link/sdds-breadcrumb-link.css} +10 -10
  100. package/dist/collection/components/breadcrumb/{sdds-breadcrumb-item/sdds-breadcrumb-item.js → sdds-breadcrumb-link/sdds-breadcrumb-link.js} +7 -7
  101. package/dist/collection/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.js.map +1 -0
  102. package/dist/collection/components/breadcrumb/sdds-breadcrumb.css +5 -20
  103. package/dist/collection/components/breadcrumb/sdds-breadcrumb.js +2 -2
  104. package/dist/collection/components/breadcrumb/sdds-breadcrumb.js.map +1 -1
  105. package/dist/collection/components/breadcrumb/sdds-breadcrumb.stories.js +6 -5
  106. package/dist/collection/components/breadcrumb/sdds-breadcrumb.stories.js.map +1 -1
  107. package/dist/collection/components/button/button-native.stories.js +39 -32
  108. package/dist/collection/components/button/button-native.stories.js.map +1 -1
  109. package/dist/collection/components/button/button-webcomponent.stories.js +36 -33
  110. package/dist/collection/components/button/button-webcomponent.stories.js.map +1 -1
  111. package/dist/collection/components/button/button.css +1 -1
  112. package/dist/collection/components/card/card.stories.js +48 -51
  113. package/dist/collection/components/card/card.stories.js.map +1 -1
  114. package/dist/collection/components/card/sdds-card.css +1 -0
  115. package/dist/collection/components/card/sdds-card.stories.js +27 -36
  116. package/dist/collection/components/card/sdds-card.stories.js.map +1 -1
  117. package/dist/collection/components/checkbox/checkbox.stories.js +20 -12
  118. package/dist/collection/components/checkbox/checkbox.stories.js.map +1 -1
  119. package/dist/collection/components/checkbox/sdds-checkbox.stories.js +20 -12
  120. package/dist/collection/components/checkbox/sdds-checkbox.stories.js.map +1 -1
  121. package/dist/collection/components/chips/chips.stories.js +51 -31
  122. package/dist/collection/components/chips/chips.stories.js.map +1 -1
  123. package/dist/collection/components/data-table/native-table.stories.js +44 -67
  124. package/dist/collection/components/data-table/native-table.stories.js.map +1 -1
  125. package/dist/collection/components/data-table/table/table.js +17 -14
  126. package/dist/collection/components/data-table/table/table.js.map +1 -1
  127. package/dist/collection/components/data-table/table-body/table-body.js +37 -28
  128. package/dist/collection/components/data-table/table-body/table-body.js.map +1 -1
  129. package/dist/collection/components/data-table/table-body-cell/table-body-cell.js +10 -10
  130. package/dist/collection/components/data-table/table-body-cell/table-body-cell.js.map +1 -1
  131. package/dist/collection/components/data-table/table-body-row/table-body-row.js +24 -18
  132. package/dist/collection/components/data-table/table-body-row/table-body-row.js.map +1 -1
  133. package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.js +19 -13
  134. package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.js.map +1 -1
  135. package/dist/collection/components/data-table/table-component-basic.stories.js +61 -39
  136. package/dist/collection/components/data-table/table-component-basic.stories.js.map +1 -1
  137. package/dist/collection/components/data-table/table-component-batch-actions.stories.js +61 -40
  138. package/dist/collection/components/data-table/table-component-batch-actions.stories.js.map +1 -1
  139. package/dist/collection/components/data-table/table-component-bodydata.stories.js +0 -6
  140. package/dist/collection/components/data-table/table-component-bodydata.stories.js.map +1 -1
  141. package/dist/collection/components/data-table/table-component-custom-width.stories.js +31 -55
  142. package/dist/collection/components/data-table/table-component-custom-width.stories.js.map +1 -1
  143. package/dist/collection/components/data-table/table-component-event-listeners.stories.js +65 -41
  144. package/dist/collection/components/data-table/table-component-event-listeners.stories.js.map +1 -1
  145. package/dist/collection/components/data-table/table-component-expandable-rows.stories.js +59 -35
  146. package/dist/collection/components/data-table/table-component-expandable-rows.stories.js.map +1 -1
  147. package/dist/collection/components/data-table/table-component-filtering.stories.js +63 -44
  148. package/dist/collection/components/data-table/table-component-filtering.stories.js.map +1 -1
  149. package/dist/collection/components/data-table/table-component-multiselect.stories.js +67 -45
  150. package/dist/collection/components/data-table/table-component-multiselect.stories.js.map +1 -1
  151. package/dist/collection/components/data-table/table-component-pagination.stories.js +65 -43
  152. package/dist/collection/components/data-table/table-component-pagination.stories.js.map +1 -1
  153. package/dist/collection/components/data-table/table-component-sorting.stories.js +87 -31
  154. package/dist/collection/components/data-table/table-component-sorting.stories.js.map +1 -1
  155. package/dist/collection/components/data-table/table-footer/table-footer.js +18 -15
  156. package/dist/collection/components/data-table/table-footer/table-footer.js.map +1 -1
  157. package/dist/collection/components/data-table/table-header/table-header.js +17 -14
  158. package/dist/collection/components/data-table/table-header/table-header.js.map +1 -1
  159. package/dist/collection/components/data-table/table-header-cell/table-header-cell.js +27 -31
  160. package/dist/collection/components/data-table/table-header-cell/table-header-cell.js.map +1 -1
  161. package/dist/collection/components/data-table/table-toolbar/table-toolbar.js +7 -7
  162. package/dist/collection/components/data-table/table-toolbar/table-toolbar.js.map +1 -1
  163. package/dist/collection/components/datetime/datetime.js +56 -11
  164. package/dist/collection/components/datetime/datetime.js.map +1 -1
  165. package/dist/collection/components/datetime/datetime.stories.js +62 -62
  166. package/dist/collection/components/datetime/datetime.stories.js.map +1 -1
  167. package/dist/collection/components/divider/divider-component.css +16 -0
  168. package/dist/collection/components/divider/divider-webcomponent.stories.js +62 -0
  169. package/dist/collection/components/divider/divider-webcomponent.stories.js.map +1 -0
  170. package/dist/collection/components/divider/divider.js +44 -0
  171. package/dist/collection/components/divider/divider.js.map +1 -0
  172. package/dist/collection/components/divider/divider.stories.js +13 -16
  173. package/dist/collection/components/divider/divider.stories.js.map +1 -1
  174. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.js +35 -13
  175. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.js.map +1 -1
  176. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js +78 -26
  177. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js.map +1 -1
  178. package/dist/collection/components/dropdown/dropdown-native.stories.js +35 -22
  179. package/dist/collection/components/dropdown/dropdown-native.stories.js.map +1 -1
  180. package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js +21 -16
  181. package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js.map +1 -1
  182. package/dist/collection/components/dropdown/dropdown-wc-default.stories.js +58 -51
  183. package/dist/collection/components/dropdown/dropdown-wc-default.stories.js.map +1 -1
  184. package/dist/collection/components/dropdown/dropdown-wc-multiselect.stories.js +73 -50
  185. package/dist/collection/components/dropdown/dropdown-wc-multiselect.stories.js.map +1 -1
  186. package/dist/collection/components/dropdown/dropdown.css +6 -161
  187. package/dist/collection/components/dropdown/dropdown.js +22 -17
  188. package/dist/collection/components/dropdown/dropdown.js.map +1 -1
  189. package/dist/collection/components/footer/footer.stories.js +5 -5
  190. package/dist/collection/components/footer/footer.stories.js.map +1 -1
  191. package/dist/collection/components/footer/webcomponent/sdds-footer.stories.js +3 -3
  192. package/dist/collection/components/footer/webcomponent/sdds-footer.stories.js.map +1 -1
  193. package/dist/collection/components/header/header-all.stories.js +4 -2
  194. package/dist/collection/components/header/header-all.stories.js.map +1 -1
  195. package/dist/collection/components/header/header-default.stories.js +4 -2
  196. package/dist/collection/components/header/header-default.stories.js.map +1 -1
  197. package/dist/collection/components/header/header-inline.stories.js +4 -2
  198. package/dist/collection/components/header/header-inline.stories.js.map +1 -1
  199. package/dist/collection/components/header/header-search.stories.js +4 -2
  200. package/dist/collection/components/header/header-search.stories.js.map +1 -1
  201. package/dist/collection/components/header/header-toolbar.stories.js +4 -2
  202. package/dist/collection/components/header/header-toolbar.stories.js.map +1 -1
  203. package/dist/collection/components/link/link.stories.js +15 -9
  204. package/dist/collection/components/link/link.stories.js.map +1 -1
  205. package/dist/collection/components/link/sdds-link.stories.js +15 -15
  206. package/dist/collection/components/link/sdds-link.stories.js.map +1 -1
  207. package/dist/collection/components/message/message.stories.js +50 -32
  208. package/dist/collection/components/message/message.stories.js.map +1 -1
  209. package/dist/collection/components/message/sdds-message.stories.js +23 -22
  210. package/dist/collection/components/message/sdds-message.stories.js.map +1 -1
  211. package/dist/collection/components/modal/modal-native.stories.js +28 -20
  212. package/dist/collection/components/modal/modal-native.stories.js.map +1 -1
  213. package/dist/collection/components/modal/modal-webcomponent.stories.js +33 -22
  214. package/dist/collection/components/modal/modal-webcomponent.stories.js.map +1 -1
  215. package/dist/collection/components/modal/modal.js +147 -29
  216. package/dist/collection/components/modal/modal.js.map +1 -1
  217. package/dist/collection/components/popover-canvas/popover-canvas.css +0 -4
  218. package/dist/collection/components/popover-canvas/popover-canvas.js +99 -46
  219. package/dist/collection/components/popover-canvas/popover-canvas.js.map +1 -1
  220. package/dist/collection/components/popover-canvas/popover-canvas.stories.js +16 -14
  221. package/dist/collection/components/popover-canvas/popover-canvas.stories.js.map +1 -1
  222. package/dist/collection/components/popover-menu/popover-menu-icons.stories.js +7 -3
  223. package/dist/collection/components/popover-menu/popover-menu-icons.stories.js.map +1 -1
  224. package/dist/collection/components/popover-menu/popover-menu.stories.js +7 -3
  225. package/dist/collection/components/popover-menu/popover-menu.stories.js.map +1 -1
  226. package/dist/collection/components/radio-button/radio-button-component.stories.js +1 -6
  227. package/dist/collection/components/radio-button/radio-button-component.stories.js.map +1 -1
  228. package/dist/collection/components/radio-button/radio-button.js +5 -1
  229. package/dist/collection/components/radio-button/radio-button.js.map +1 -1
  230. package/dist/collection/components/radio-button/radio-button.stories.js +9 -6
  231. package/dist/collection/components/radio-button/radio-button.stories.js.map +1 -1
  232. package/dist/collection/components/slider/slider.js +19 -19
  233. package/dist/collection/components/slider/slider.js.map +1 -1
  234. package/dist/collection/components/slider/slider.stories.js +93 -67
  235. package/dist/collection/components/slider/slider.stories.js.map +1 -1
  236. package/dist/collection/components/spinner/spinner.stories.js +8 -2
  237. package/dist/collection/components/spinner/spinner.stories.js.map +1 -1
  238. package/dist/collection/components/stepper/stepper.stories.js +29 -17
  239. package/dist/collection/components/stepper/stepper.stories.js.map +1 -1
  240. package/dist/collection/components/tabs/folder-tabs/folder-tabs-button/sdds-folder-tabs-button.css +79 -0
  241. package/dist/collection/components/tabs/folder-tabs/folder-tabs-button/sdds-folder-tabs-button.js +100 -0
  242. package/dist/collection/components/tabs/folder-tabs/folder-tabs-button/sdds-folder-tabs-button.js.map +1 -0
  243. package/dist/collection/components/tabs/folder-tabs/folder-tabs-link/sdds-folder-tabs-link.css +77 -0
  244. package/dist/collection/components/tabs/folder-tabs/folder-tabs-link/sdds-folder-tabs-link.js +158 -0
  245. package/dist/collection/components/tabs/folder-tabs/folder-tabs-link/sdds-folder-tabs-link.js.map +1 -0
  246. package/dist/collection/components/tabs/folder-tabs/folder-tabs.css +64 -0
  247. package/dist/collection/components/tabs/folder-tabs/folder-tabs.js +256 -0
  248. package/dist/collection/components/tabs/folder-tabs/folder-tabs.js.map +1 -0
  249. package/dist/collection/components/tabs/folder-tabs/folder-tabs.stories.js +114 -0
  250. package/dist/collection/components/tabs/folder-tabs/folder-tabs.stories.js.map +1 -0
  251. package/dist/collection/components/tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.css +73 -0
  252. package/dist/collection/components/tabs/{inline-tabs-default/inline-tab/inline-tab.js → inline-tabs/inline-tabs-button/sdds-inline-tabs-button.js} +12 -29
  253. package/dist/collection/components/tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.js.map +1 -0
  254. package/dist/collection/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.css +75 -0
  255. package/dist/collection/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.js +122 -0
  256. package/dist/collection/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.js.map +1 -0
  257. package/dist/collection/components/tabs/inline-tabs/inline-tabs.css +76 -0
  258. package/dist/collection/components/tabs/inline-tabs/inline-tabs.js +261 -0
  259. package/dist/collection/components/tabs/inline-tabs/inline-tabs.js.map +1 -0
  260. package/dist/collection/components/tabs/inline-tabs/inline-tabs.stories.js +109 -0
  261. package/dist/collection/components/tabs/inline-tabs/inline-tabs.stories.js.map +1 -0
  262. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.css +73 -0
  263. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.js +64 -0
  264. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.js.map +1 -0
  265. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.css +73 -0
  266. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.js +122 -0
  267. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.js.map +1 -0
  268. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +37 -118
  269. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js +114 -26
  270. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js.map +1 -1
  271. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js +79 -9
  272. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js.map +1 -1
  273. package/dist/collection/components/textarea/textarea.css +42 -123
  274. package/dist/collection/components/textarea/textarea.js +11 -10
  275. package/dist/collection/components/textarea/textarea.js.map +1 -1
  276. package/dist/collection/components/textarea/textarea.stories.js +59 -53
  277. package/dist/collection/components/textarea/textarea.stories.js.map +1 -1
  278. package/dist/collection/components/textfield/textfield.css +91 -175
  279. package/dist/collection/components/textfield/textfield.js +12 -22
  280. package/dist/collection/components/textfield/textfield.js.map +1 -1
  281. package/dist/collection/components/textfield/textfield.stories.js +87 -74
  282. package/dist/collection/components/textfield/textfield.stories.js.map +1 -1
  283. package/dist/collection/components/toast/sdds-toast.stories.js +6 -6
  284. package/dist/collection/components/toast/sdds-toast.stories.js.map +1 -1
  285. package/dist/collection/components/toast/toast.stories.js +19 -17
  286. package/dist/collection/components/toast/toast.stories.js.map +1 -1
  287. package/dist/collection/components/toggle/sdds-toggle.js +1 -1
  288. package/dist/collection/components/toggle/sdds-toggle.js.map +1 -1
  289. package/dist/collection/components/toggle/sdds-toggle.stories.js +19 -19
  290. package/dist/collection/components/toggle/sdds-toggle.stories.js.map +1 -1
  291. package/dist/collection/components/toggle/toggle.stories.js +19 -14
  292. package/dist/collection/components/toggle/toggle.stories.js.map +1 -1
  293. package/dist/collection/components/tooltip/tooltip.stories.js +30 -18
  294. package/dist/collection/components/tooltip/tooltip.stories.js.map +1 -1
  295. package/dist/components/dropdown-option.js +9 -11
  296. package/dist/components/dropdown-option.js.map +1 -1
  297. package/dist/components/dropdown.js +13 -10
  298. package/dist/components/dropdown.js.map +1 -1
  299. package/dist/components/sdds-accordion.js +1 -3
  300. package/dist/components/sdds-accordion.js.map +1 -1
  301. package/dist/components/sdds-banner.js +1 -1
  302. package/dist/components/sdds-banner.js.map +1 -1
  303. package/dist/components/{sdds-breadcrumb-item.d.ts → sdds-breadcrumb-link.d.ts} +4 -4
  304. package/dist/components/sdds-breadcrumb-link.js +47 -0
  305. package/dist/components/sdds-breadcrumb-link.js.map +1 -0
  306. package/dist/components/sdds-breadcrumb.js +3 -3
  307. package/dist/components/sdds-breadcrumb.js.map +1 -1
  308. package/dist/components/sdds-button.js +1 -1
  309. package/dist/components/sdds-button.js.map +1 -1
  310. package/dist/components/sdds-card.js +1 -1
  311. package/dist/components/sdds-card.js.map +1 -1
  312. package/dist/components/sdds-datetime.js +14 -5
  313. package/dist/components/sdds-datetime.js.map +1 -1
  314. package/dist/components/{sdds-inline-tab.d.ts → sdds-divider.d.ts} +4 -4
  315. package/dist/components/sdds-divider.js +38 -0
  316. package/dist/components/sdds-divider.js.map +1 -0
  317. package/dist/components/sdds-dropdown-filter.js +12 -8
  318. package/dist/components/sdds-dropdown-filter.js.map +1 -1
  319. package/dist/components/sdds-folder-tabs-button.d.ts +11 -0
  320. package/dist/components/sdds-folder-tabs-button.js +48 -0
  321. package/dist/components/sdds-folder-tabs-button.js.map +1 -0
  322. package/dist/components/sdds-folder-tabs-link.d.ts +11 -0
  323. package/dist/components/sdds-folder-tabs-link.js +56 -0
  324. package/dist/components/sdds-folder-tabs-link.js.map +1 -0
  325. package/dist/components/sdds-folder-tabs.d.ts +11 -0
  326. package/dist/components/sdds-folder-tabs.js +208 -0
  327. package/dist/components/sdds-folder-tabs.js.map +1 -0
  328. package/dist/components/sdds-header-cell.js +9 -13
  329. package/dist/components/sdds-header-cell.js.map +1 -1
  330. package/dist/components/sdds-inline-tabs-button.d.ts +11 -0
  331. package/dist/components/sdds-inline-tabs-button.js +41 -0
  332. package/dist/components/sdds-inline-tabs-button.js.map +1 -0
  333. package/dist/components/sdds-inline-tabs-link.d.ts +11 -0
  334. package/dist/components/sdds-inline-tabs-link.js +49 -0
  335. package/dist/components/sdds-inline-tabs-link.js.map +1 -0
  336. package/dist/components/sdds-inline-tabs.js +123 -155
  337. package/dist/components/sdds-inline-tabs.js.map +1 -1
  338. package/dist/components/sdds-modal.js +73 -24
  339. package/dist/components/sdds-modal.js.map +1 -1
  340. package/dist/components/sdds-navigation-tabs-button.d.ts +11 -0
  341. package/dist/components/sdds-navigation-tabs-button.js +41 -0
  342. package/dist/components/sdds-navigation-tabs-button.js.map +1 -0
  343. package/dist/components/sdds-navigation-tabs-link.d.ts +11 -0
  344. package/dist/components/sdds-navigation-tabs-link.js +49 -0
  345. package/dist/components/sdds-navigation-tabs-link.js.map +1 -0
  346. package/dist/components/sdds-navigation-tabs.js +79 -27
  347. package/dist/components/sdds-navigation-tabs.js.map +1 -1
  348. package/dist/components/sdds-popover-canvas.js +71 -42
  349. package/dist/components/sdds-popover-canvas.js.map +1 -1
  350. package/dist/components/sdds-radio-button.js +5 -1
  351. package/dist/components/sdds-radio-button.js.map +1 -1
  352. package/dist/components/sdds-slider.js +9 -9
  353. package/dist/components/sdds-slider.js.map +1 -1
  354. package/dist/components/sdds-table-body-row-expandable.js +6 -6
  355. package/dist/components/sdds-table-body-row-expandable.js.map +1 -1
  356. package/dist/components/sdds-table-body.js +13 -13
  357. package/dist/components/sdds-table-body.js.map +1 -1
  358. package/dist/components/sdds-table-footer.js +7 -7
  359. package/dist/components/sdds-table-footer.js.map +1 -1
  360. package/dist/components/sdds-table-header.js +6 -6
  361. package/dist/components/sdds-table-header.js.map +1 -1
  362. package/dist/components/sdds-table-toolbar.js +4 -4
  363. package/dist/components/sdds-table-toolbar.js.map +1 -1
  364. package/dist/components/sdds-table.js +9 -9
  365. package/dist/components/sdds-table.js.map +1 -1
  366. package/dist/components/sdds-textarea.js +12 -12
  367. package/dist/components/sdds-textarea.js.map +1 -1
  368. package/dist/components/sdds-textfield.js +13 -24
  369. package/dist/components/sdds-textfield.js.map +1 -1
  370. package/dist/components/sdds-toggle.js +1 -1
  371. package/dist/components/sdds-toggle.js.map +1 -1
  372. package/dist/components/table-body-cell.js +5 -5
  373. package/dist/components/table-body-cell.js.map +1 -1
  374. package/dist/components/table-body-row.js +8 -8
  375. package/dist/components/table-body-row.js.map +1 -1
  376. package/dist/esm/{index-96563708.js → index-fdfb114c.js} +36 -9
  377. package/dist/esm/index-fdfb114c.js.map +1 -0
  378. package/dist/esm/loader.js +3 -3
  379. package/dist/esm/sdds-accordion-item.entry.js +1 -1
  380. package/dist/esm/sdds-accordion.entry.js +2 -3
  381. package/dist/esm/sdds-accordion.entry.js.map +1 -1
  382. package/dist/esm/sdds-badges.entry.js +1 -1
  383. package/dist/esm/sdds-banner.entry.js +2 -2
  384. package/dist/esm/sdds-banner.entry.js.map +1 -1
  385. package/dist/esm/sdds-block.entry.js +1 -1
  386. package/dist/esm/sdds-body-cell_2.entry.js +12 -12
  387. package/dist/esm/sdds-body-cell_2.entry.js.map +1 -1
  388. package/dist/esm/sdds-breadcrumb-link.entry.js +23 -0
  389. package/dist/esm/sdds-breadcrumb-link.entry.js.map +1 -0
  390. package/dist/esm/sdds-breadcrumb.entry.js +4 -4
  391. package/dist/esm/sdds-breadcrumb.entry.js.map +1 -1
  392. package/dist/esm/sdds-button.entry.js +2 -2
  393. package/dist/esm/sdds-button.entry.js.map +1 -1
  394. package/dist/esm/sdds-card.entry.js +2 -2
  395. package/dist/esm/sdds-card.entry.js.map +1 -1
  396. package/dist/esm/sdds-checkbox.entry.js +1 -1
  397. package/dist/esm/sdds-datetime.entry.js +15 -6
  398. package/dist/esm/sdds-datetime.entry.js.map +1 -1
  399. package/dist/esm/sdds-divider.entry.js +18 -0
  400. package/dist/esm/sdds-divider.entry.js.map +1 -0
  401. package/dist/esm/sdds-dropdown-filter.entry.js +10 -7
  402. package/dist/esm/sdds-dropdown-filter.entry.js.map +1 -1
  403. package/dist/esm/sdds-dropdown_2.entry.js +20 -20
  404. package/dist/esm/sdds-dropdown_2.entry.js.map +1 -1
  405. package/dist/esm/sdds-folder-tabs-button.entry.js +25 -0
  406. package/dist/esm/sdds-folder-tabs-button.entry.js.map +1 -0
  407. package/dist/esm/sdds-folder-tabs-link.entry.js +30 -0
  408. package/dist/esm/sdds-folder-tabs-link.entry.js.map +1 -0
  409. package/dist/esm/sdds-folder-tabs.entry.js +176 -0
  410. package/dist/esm/sdds-folder-tabs.entry.js.map +1 -0
  411. package/dist/esm/sdds-footer-link-group.entry.js +1 -1
  412. package/dist/esm/sdds-footer-link.entry.js +1 -1
  413. package/dist/esm/sdds-footer.entry.js +1 -1
  414. package/dist/esm/sdds-header-cell.entry.js +9 -13
  415. package/dist/esm/sdds-header-cell.entry.js.map +1 -1
  416. package/dist/esm/sdds-icon.entry.js +1 -1
  417. package/dist/esm/sdds-inline-tabs-button.entry.js +20 -0
  418. package/dist/esm/sdds-inline-tabs-button.entry.js.map +1 -0
  419. package/dist/esm/sdds-inline-tabs-link.entry.js +25 -0
  420. package/dist/esm/sdds-inline-tabs-link.entry.js.map +1 -0
  421. package/dist/esm/sdds-inline-tabs.entry.js +113 -148
  422. package/dist/esm/sdds-inline-tabs.entry.js.map +1 -1
  423. package/dist/esm/sdds-link.entry.js +1 -1
  424. package/dist/esm/sdds-message.entry.js +1 -1
  425. package/dist/esm/sdds-modal.entry.js +67 -22
  426. package/dist/esm/sdds-modal.entry.js.map +1 -1
  427. package/dist/esm/sdds-navigation-tabs-button.entry.js +20 -0
  428. package/dist/esm/sdds-navigation-tabs-button.entry.js.map +1 -0
  429. package/dist/esm/sdds-navigation-tabs-link.entry.js +25 -0
  430. package/dist/esm/sdds-navigation-tabs-link.entry.js.map +1 -0
  431. package/dist/esm/sdds-navigation-tabs.entry.js +69 -24
  432. package/dist/esm/sdds-navigation-tabs.entry.js.map +1 -1
  433. package/dist/esm/sdds-popover-canvas.entry.js +68 -41
  434. package/dist/esm/sdds-popover-canvas.entry.js.map +1 -1
  435. package/dist/esm/sdds-popover-menu.entry.js +1 -1
  436. package/dist/esm/sdds-radio-button.entry.js +6 -2
  437. package/dist/esm/sdds-radio-button.entry.js.map +1 -1
  438. package/dist/esm/sdds-slider.entry.js +9 -9
  439. package/dist/esm/sdds-slider.entry.js.map +1 -1
  440. package/dist/esm/sdds-spinner.entry.js +1 -1
  441. package/dist/esm/sdds-stepper-item.entry.js +1 -1
  442. package/dist/esm/sdds-stepper.entry.js +1 -1
  443. package/dist/esm/sdds-table-body-row-expandable.entry.js +6 -6
  444. package/dist/esm/sdds-table-body-row-expandable.entry.js.map +1 -1
  445. package/dist/esm/sdds-table-body.entry.js +13 -13
  446. package/dist/esm/sdds-table-body.entry.js.map +1 -1
  447. package/dist/esm/sdds-table-footer.entry.js +7 -7
  448. package/dist/esm/sdds-table-footer.entry.js.map +1 -1
  449. package/dist/esm/sdds-table-header.entry.js +6 -6
  450. package/dist/esm/sdds-table-header.entry.js.map +1 -1
  451. package/dist/esm/sdds-table-toolbar.entry.js +4 -4
  452. package/dist/esm/sdds-table-toolbar.entry.js.map +1 -1
  453. package/dist/esm/sdds-table.entry.js +10 -10
  454. package/dist/esm/sdds-table.entry.js.map +1 -1
  455. package/dist/esm/sdds-textarea.entry.js +12 -12
  456. package/dist/esm/sdds-textarea.entry.js.map +1 -1
  457. package/dist/esm/sdds-textfield.entry.js +13 -24
  458. package/dist/esm/sdds-textfield.entry.js.map +1 -1
  459. package/dist/esm/sdds-toast.entry.js +1 -1
  460. package/dist/esm/sdds-toggle.entry.js +2 -2
  461. package/dist/esm/sdds-toggle.entry.js.map +1 -1
  462. package/dist/esm/sdds-tooltip.entry.js +1 -1
  463. package/dist/esm/tegel.js +3 -3
  464. package/dist/node_modules/@types/jest/index.d.ts +1512 -0
  465. package/dist/tegel/{p-68fca08c.entry.js → p-067789d2.entry.js} +2 -2
  466. package/dist/tegel/{p-c5537ff7.entry.js → p-12f566b7.entry.js} +2 -2
  467. package/dist/tegel/p-15c44320.entry.js +2 -0
  468. package/dist/tegel/p-15c44320.entry.js.map +1 -0
  469. package/dist/tegel/{p-525ec252.entry.js → p-1a7f94d3.entry.js} +2 -2
  470. package/dist/tegel/p-1a7f94d3.entry.js.map +1 -0
  471. package/dist/tegel/p-1baafb40.entry.js +2 -0
  472. package/dist/tegel/p-1baafb40.entry.js.map +1 -0
  473. package/dist/tegel/p-2080db62.entry.js +2 -0
  474. package/dist/tegel/p-2080db62.entry.js.map +1 -0
  475. package/dist/tegel/p-21e426f2.entry.js +2 -0
  476. package/dist/tegel/p-21e426f2.entry.js.map +1 -0
  477. package/dist/tegel/p-2c57f4bb.entry.js +2 -0
  478. package/dist/tegel/p-2c57f4bb.entry.js.map +1 -0
  479. package/dist/tegel/p-387e1798.js +3 -0
  480. package/dist/tegel/p-387e1798.js.map +1 -0
  481. package/dist/tegel/p-3a9db8c4.entry.js +2 -0
  482. package/dist/tegel/p-3a9db8c4.entry.js.map +1 -0
  483. package/dist/tegel/{p-6bdce8c1.entry.js → p-400d74c2.entry.js} +2 -2
  484. package/dist/tegel/{p-f51fe381.entry.js → p-4499e5cd.entry.js} +2 -2
  485. package/dist/tegel/p-479b1c4e.entry.js +2 -0
  486. package/dist/tegel/p-479b1c4e.entry.js.map +1 -0
  487. package/dist/tegel/p-52ecce88.entry.js +2 -0
  488. package/dist/tegel/p-52ecce88.entry.js.map +1 -0
  489. package/dist/tegel/p-58bc7a27.entry.js +2 -0
  490. package/dist/tegel/p-58bc7a27.entry.js.map +1 -0
  491. package/dist/tegel/{p-aff4d273.entry.js → p-5dc33f45.entry.js} +2 -2
  492. package/dist/tegel/p-5f6fe516.entry.js +2 -0
  493. package/dist/tegel/p-5f6fe516.entry.js.map +1 -0
  494. package/dist/tegel/{p-2fad34c4.entry.js → p-64dd37d4.entry.js} +2 -2
  495. package/dist/tegel/p-64dd37d4.entry.js.map +1 -0
  496. package/dist/tegel/{p-e5e10d8f.entry.js → p-750b7e5f.entry.js} +2 -2
  497. package/dist/tegel/{p-f9dacc11.entry.js → p-792e8c5d.entry.js} +2 -2
  498. package/dist/tegel/{p-b9ec54c5.entry.js → p-7991d22f.entry.js} +2 -2
  499. package/dist/tegel/p-7d2f2f58.entry.js +2 -0
  500. package/dist/tegel/p-7d2f2f58.entry.js.map +1 -0
  501. package/dist/tegel/{p-b2f1ec40.entry.js → p-7f10356d.entry.js} +2 -2
  502. package/dist/tegel/p-7f22cee6.entry.js +2 -0
  503. package/dist/tegel/p-7f22cee6.entry.js.map +1 -0
  504. package/dist/tegel/p-872bef70.entry.js +2 -0
  505. package/dist/tegel/p-872bef70.entry.js.map +1 -0
  506. package/dist/tegel/{p-5c390692.entry.js → p-8ee9e2f5.entry.js} +2 -2
  507. package/dist/tegel/p-8ee9e2f5.entry.js.map +1 -0
  508. package/dist/tegel/{p-9904d7ec.entry.js → p-90af19c6.entry.js} +2 -2
  509. package/dist/tegel/p-90af19c6.entry.js.map +1 -0
  510. package/dist/tegel/{p-262dca00.entry.js → p-a2cbef2c.entry.js} +2 -2
  511. package/dist/tegel/{p-b2e46497.entry.js → p-a5cd0006.entry.js} +2 -2
  512. package/dist/tegel/{p-72099402.entry.js → p-a61db32b.entry.js} +2 -2
  513. package/dist/tegel/p-a905302b.entry.js +2 -0
  514. package/dist/tegel/p-a905302b.entry.js.map +1 -0
  515. package/dist/tegel/p-aa487e40.entry.js +2 -0
  516. package/dist/tegel/p-aa487e40.entry.js.map +1 -0
  517. package/dist/tegel/p-ae631412.entry.js +2 -0
  518. package/dist/tegel/p-ae631412.entry.js.map +1 -0
  519. package/dist/tegel/p-b2269b6b.entry.js +2 -0
  520. package/dist/tegel/p-b2269b6b.entry.js.map +1 -0
  521. package/dist/tegel/{p-92869ad1.entry.js → p-b6fc0de7.entry.js} +2 -2
  522. package/dist/tegel/{p-92869ad1.entry.js.map → p-b6fc0de7.entry.js.map} +1 -1
  523. package/dist/tegel/{p-cd08f5f0.entry.js → p-b9b329c0.entry.js} +2 -2
  524. package/dist/tegel/{p-fc96cf21.entry.js → p-bd09c184.entry.js} +2 -2
  525. package/dist/tegel/{p-675d10c6.entry.js → p-bdae6bc9.entry.js} +2 -2
  526. package/dist/tegel/{p-675d10c6.entry.js.map → p-bdae6bc9.entry.js.map} +1 -1
  527. package/dist/tegel/p-bdaf0bc2.entry.js +2 -0
  528. package/dist/tegel/p-bdaf0bc2.entry.js.map +1 -0
  529. package/dist/tegel/p-bdceb07c.entry.js +2 -0
  530. package/dist/tegel/p-bdceb07c.entry.js.map +1 -0
  531. package/dist/tegel/{p-ebffa726.entry.js → p-c3351320.entry.js} +2 -2
  532. package/dist/tegel/p-c3351320.entry.js.map +1 -0
  533. package/dist/tegel/{p-e662e68d.entry.js → p-c4d28002.entry.js} +2 -2
  534. package/dist/tegel/p-c6c75439.entry.js +2 -0
  535. package/dist/tegel/p-c6c75439.entry.js.map +1 -0
  536. package/dist/tegel/{p-25af32a7.entry.js → p-ccb82bc3.entry.js} +2 -2
  537. package/dist/tegel/p-ccb82bc3.entry.js.map +1 -0
  538. package/dist/tegel/p-cfacd8e6.entry.js +2 -0
  539. package/dist/tegel/p-cfacd8e6.entry.js.map +1 -0
  540. package/dist/tegel/p-d517eaef.entry.js +2 -0
  541. package/dist/tegel/p-d517eaef.entry.js.map +1 -0
  542. package/dist/tegel/p-d87ce5e9.entry.js +2 -0
  543. package/dist/tegel/p-d87ce5e9.entry.js.map +1 -0
  544. package/dist/tegel/p-dffd418e.entry.js +2 -0
  545. package/dist/tegel/p-dffd418e.entry.js.map +1 -0
  546. package/dist/tegel/{p-a4127075.entry.js → p-e60b9366.entry.js} +2 -2
  547. package/dist/tegel/{p-5e50ce81.entry.js → p-ef5487a3.entry.js} +2 -2
  548. package/dist/tegel/p-ef5487a3.entry.js.map +1 -0
  549. package/dist/tegel/p-fcb9e2c1.entry.js +2 -0
  550. package/dist/tegel/p-fcb9e2c1.entry.js.map +1 -0
  551. package/dist/tegel/tegel.css +10 -22
  552. package/dist/tegel/tegel.esm.js +1 -1
  553. package/dist/tegel/tegel.esm.js.map +1 -1
  554. package/dist/types/components/accordion/accordion.d.ts +0 -2
  555. package/dist/types/components/accordion/accordion.stories.d.ts +2 -2
  556. package/dist/types/components/badge/badge.stories.d.ts +0 -5
  557. package/dist/types/components/banner/sdds-banner.stories.d.ts +1 -6
  558. package/dist/types/components/breadcrumb/{sdds-breadcrumb-item/sdds-breadcrumb-item.d.ts → sdds-breadcrumb-link/sdds-breadcrumb-link.d.ts} +1 -1
  559. package/dist/types/components/breadcrumb/sdds-breadcrumb.stories.d.ts +2 -1
  560. package/dist/types/components/button/button-native.stories.d.ts +36 -25
  561. package/dist/types/components/button/button-webcomponent.stories.d.ts +30 -26
  562. package/dist/types/components/card/card.stories.d.ts +29 -30
  563. package/dist/types/components/card/sdds-card.stories.d.ts +13 -24
  564. package/dist/types/components/checkbox/checkbox.stories.d.ts +17 -5
  565. package/dist/types/components/checkbox/sdds-checkbox.stories.d.ts +17 -5
  566. package/dist/types/components/chips/chips.stories.d.ts +42 -18
  567. package/dist/types/components/data-table/native-table.stories.d.ts +17 -31
  568. package/dist/types/components/data-table/table/table.d.ts +5 -4
  569. package/dist/types/components/data-table/table-body/table-body.d.ts +9 -9
  570. package/dist/types/components/data-table/table-body-cell/table-body-cell.d.ts +4 -4
  571. package/dist/types/components/data-table/table-body-row/table-body-row.d.ts +7 -7
  572. package/dist/types/components/data-table/table-body-row-expandable/table-body-row-expandable.d.ts +6 -6
  573. package/dist/types/components/data-table/table-component-basic.stories.d.ts +54 -11
  574. package/dist/types/components/data-table/table-component-batch-actions.stories.d.ts +54 -14
  575. package/dist/types/components/data-table/table-component-bodydata.stories.d.ts +0 -5
  576. package/dist/types/components/data-table/table-component-custom-width.stories.d.ts +15 -32
  577. package/dist/types/components/data-table/table-component-event-listeners.stories.d.ts +54 -11
  578. package/dist/types/components/data-table/table-component-expandable-rows.stories.d.ts +54 -11
  579. package/dist/types/components/data-table/table-component-filtering.stories.d.ts +54 -16
  580. package/dist/types/components/data-table/table-component-multiselect.stories.d.ts +57 -14
  581. package/dist/types/components/data-table/table-component-pagination.stories.d.ts +58 -15
  582. package/dist/types/components/data-table/table-component-sorting.stories.d.ts +93 -10
  583. package/dist/types/components/data-table/table-footer/table-footer.d.ts +7 -7
  584. package/dist/types/components/data-table/table-header/table-header.d.ts +6 -6
  585. package/dist/types/components/data-table/table-header-cell/table-header-cell.d.ts +9 -10
  586. package/dist/types/components/data-table/table-toolbar/table-toolbar.d.ts +4 -4
  587. package/dist/types/components/datetime/datetime.d.ts +11 -5
  588. package/dist/types/components/datetime/datetime.stories.d.ts +36 -35
  589. package/dist/types/components/divider/divider-webcomponent.stories.d.ts +58 -0
  590. package/dist/types/components/divider/divider.d.ts +5 -0
  591. package/dist/types/components/divider/divider.stories.d.ts +9 -14
  592. package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.d.ts +4 -2
  593. package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.stories.d.ts +76 -12
  594. package/dist/types/components/dropdown/dropdown-native.stories.d.ts +26 -11
  595. package/dist/types/components/dropdown/dropdown-option/dropdown-option.d.ts +7 -2
  596. package/dist/types/components/dropdown/dropdown-wc-default.stories.d.ts +48 -33
  597. package/dist/types/components/dropdown/dropdown-wc-multiselect.stories.d.ts +61 -32
  598. package/dist/types/components/dropdown/dropdown.d.ts +4 -3
  599. package/dist/types/components/footer/footer.stories.d.ts +4 -4
  600. package/dist/types/components/footer/webcomponent/sdds-footer.stories.d.ts +1 -1
  601. package/dist/types/components/header/header-all.stories.d.ts +3 -1
  602. package/dist/types/components/header/header-default.stories.d.ts +3 -1
  603. package/dist/types/components/header/header-inline.stories.d.ts +3 -1
  604. package/dist/types/components/header/header-search.stories.d.ts +3 -1
  605. package/dist/types/components/header/header-toolbar.stories.d.ts +3 -1
  606. package/dist/types/components/link/link.stories.d.ts +13 -3
  607. package/dist/types/components/link/sdds-link.stories.d.ts +9 -9
  608. package/dist/types/components/message/message.stories.d.ts +32 -12
  609. package/dist/types/components/message/sdds-message.stories.d.ts +9 -8
  610. package/dist/types/components/modal/modal-native.stories.d.ts +23 -8
  611. package/dist/types/components/modal/modal-webcomponent.stories.d.ts +22 -4
  612. package/dist/types/components/modal/modal.d.ts +27 -7
  613. package/dist/types/components/popover-canvas/popover-canvas.d.ts +13 -4
  614. package/dist/types/components/popover-canvas/popover-canvas.stories.d.ts +5 -3
  615. package/dist/types/components/popover-menu/popover-menu-icons.stories.d.ts +5 -0
  616. package/dist/types/components/popover-menu/popover-menu.stories.d.ts +5 -0
  617. package/dist/types/components/radio-button/radio-button-component.stories.d.ts +1 -1
  618. package/dist/types/components/radio-button/radio-button.stories.d.ts +6 -1
  619. package/dist/types/components/slider/slider.d.ts +1 -1
  620. package/dist/types/components/slider/slider.stories.d.ts +90 -24
  621. package/dist/types/components/spinner/spinner.stories.d.ts +12 -2
  622. package/dist/types/components/stepper/sdds-stepper.d.ts +17 -0
  623. package/dist/types/components/stepper/stepper-item/sdds-stepper-item.d.ts +17 -0
  624. package/dist/types/components/stepper/stepper.stories.d.ts +24 -4
  625. package/dist/types/components/tabs/folder-tabs/folder-tabs-button/sdds-folder-tabs-button.d.ts +10 -0
  626. package/dist/types/components/tabs/folder-tabs/folder-tabs-link/sdds-folder-tabs-link.d.ts +16 -0
  627. package/dist/types/components/tabs/folder-tabs/folder-tabs.d.ts +38 -0
  628. package/dist/types/components/tabs/{inline-tabs-default/inline-tabs.stories.d.ts → folder-tabs/folder-tabs.stories.d.ts} +14 -11
  629. package/dist/types/components/tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.d.ts +7 -0
  630. package/dist/types/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.d.ts +13 -0
  631. package/dist/types/components/tabs/inline-tabs/inline-tabs.d.ts +40 -0
  632. package/dist/types/components/tabs/{inline-tabs-fullbleed/inline-tabs-fullbleed.stories.d.ts → inline-tabs/inline-tabs.stories.d.ts} +16 -2
  633. package/dist/types/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.d.ts +7 -0
  634. package/dist/types/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.d.ts +13 -0
  635. package/dist/types/components/tabs/navigation-tabs/navigation-tabs.d.ts +25 -10
  636. package/dist/types/components/tabs/navigation-tabs/navigation-tabs.stories.d.ts +32 -1
  637. package/dist/types/components/textarea/textarea.stories.d.ts +39 -29
  638. package/dist/types/components/textfield/textfield.stories.d.ts +68 -47
  639. package/dist/types/components/toast/toast.stories.d.ts +8 -9
  640. package/dist/types/components/toggle/sdds-toggle.stories.d.ts +9 -9
  641. package/dist/types/components/toggle/toggle.stories.d.ts +10 -7
  642. package/dist/types/components/tooltip/tooltip.stories.d.ts +15 -3
  643. package/dist/types/components.d.ts +424 -153
  644. package/package.json +1 -1
  645. package/readme.md +23 -1
  646. package/dist/cjs/index-18eb94f0.js.map +0 -1
  647. package/dist/cjs/sdds-breadcrumb-item.cjs.entry.js +0 -27
  648. package/dist/cjs/sdds-breadcrumb-item.cjs.entry.js.map +0 -1
  649. package/dist/cjs/sdds-inline-tab.cjs.entry.js +0 -24
  650. package/dist/cjs/sdds-inline-tab.cjs.entry.js.map +0 -1
  651. package/dist/cjs/sdds-inline-tabs-fullbleed.cjs.entry.js +0 -100
  652. package/dist/cjs/sdds-inline-tabs-fullbleed.cjs.entry.js.map +0 -1
  653. package/dist/collection/components/breadcrumb/sdds-breadcrumb-item/sdds-breadcrumb-item.js.map +0 -1
  654. package/dist/collection/components/tabs/inline-tabs-default/inline-tab/inline-tab.css +0 -3
  655. package/dist/collection/components/tabs/inline-tabs-default/inline-tab/inline-tab.js.map +0 -1
  656. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.css +0 -156
  657. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.js +0 -313
  658. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.js.map +0 -1
  659. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js +0 -72
  660. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js.map +0 -1
  661. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.css +0 -141
  662. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js +0 -129
  663. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js.map +0 -1
  664. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js +0 -47
  665. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js.map +0 -1
  666. package/dist/components/sdds-breadcrumb-item.js +0 -47
  667. package/dist/components/sdds-breadcrumb-item.js.map +0 -1
  668. package/dist/components/sdds-inline-tab.js +0 -42
  669. package/dist/components/sdds-inline-tab.js.map +0 -1
  670. package/dist/components/sdds-inline-tabs-fullbleed.d.ts +0 -11
  671. package/dist/components/sdds-inline-tabs-fullbleed.js +0 -119
  672. package/dist/components/sdds-inline-tabs-fullbleed.js.map +0 -1
  673. package/dist/esm/index-96563708.js.map +0 -1
  674. package/dist/esm/sdds-breadcrumb-item.entry.js +0 -23
  675. package/dist/esm/sdds-breadcrumb-item.entry.js.map +0 -1
  676. package/dist/esm/sdds-inline-tab.entry.js +0 -20
  677. package/dist/esm/sdds-inline-tab.entry.js.map +0 -1
  678. package/dist/esm/sdds-inline-tabs-fullbleed.entry.js +0 -96
  679. package/dist/esm/sdds-inline-tabs-fullbleed.entry.js.map +0 -1
  680. package/dist/tegel/p-0953710b.entry.js +0 -2
  681. package/dist/tegel/p-0953710b.entry.js.map +0 -1
  682. package/dist/tegel/p-0b4eba86.js +0 -3
  683. package/dist/tegel/p-0b4eba86.js.map +0 -1
  684. package/dist/tegel/p-1eb8dd92.entry.js +0 -2
  685. package/dist/tegel/p-1eb8dd92.entry.js.map +0 -1
  686. package/dist/tegel/p-22c49f25.entry.js +0 -2
  687. package/dist/tegel/p-22c49f25.entry.js.map +0 -1
  688. package/dist/tegel/p-25af32a7.entry.js.map +0 -1
  689. package/dist/tegel/p-2d45bffe.entry.js +0 -2
  690. package/dist/tegel/p-2d45bffe.entry.js.map +0 -1
  691. package/dist/tegel/p-2fad34c4.entry.js.map +0 -1
  692. package/dist/tegel/p-336efb27.entry.js +0 -2
  693. package/dist/tegel/p-336efb27.entry.js.map +0 -1
  694. package/dist/tegel/p-33e7f7e5.entry.js +0 -2
  695. package/dist/tegel/p-33e7f7e5.entry.js.map +0 -1
  696. package/dist/tegel/p-458cda76.entry.js +0 -2
  697. package/dist/tegel/p-458cda76.entry.js.map +0 -1
  698. package/dist/tegel/p-525ec252.entry.js.map +0 -1
  699. package/dist/tegel/p-5c390692.entry.js.map +0 -1
  700. package/dist/tegel/p-5e50ce81.entry.js.map +0 -1
  701. package/dist/tegel/p-62ed6fdc.entry.js +0 -2
  702. package/dist/tegel/p-62ed6fdc.entry.js.map +0 -1
  703. package/dist/tegel/p-6e54f5a2.entry.js +0 -2
  704. package/dist/tegel/p-6e54f5a2.entry.js.map +0 -1
  705. package/dist/tegel/p-77a4950d.entry.js +0 -2
  706. package/dist/tegel/p-77a4950d.entry.js.map +0 -1
  707. package/dist/tegel/p-84e5d141.entry.js +0 -2
  708. package/dist/tegel/p-84e5d141.entry.js.map +0 -1
  709. package/dist/tegel/p-913cb5e9.entry.js +0 -2
  710. package/dist/tegel/p-913cb5e9.entry.js.map +0 -1
  711. package/dist/tegel/p-93571e36.entry.js +0 -2
  712. package/dist/tegel/p-93571e36.entry.js.map +0 -1
  713. package/dist/tegel/p-9904d7ec.entry.js.map +0 -1
  714. package/dist/tegel/p-a3741fdd.entry.js +0 -2
  715. package/dist/tegel/p-a3741fdd.entry.js.map +0 -1
  716. package/dist/tegel/p-ba975249.entry.js +0 -2
  717. package/dist/tegel/p-ba975249.entry.js.map +0 -1
  718. package/dist/tegel/p-c79b3861.entry.js +0 -2
  719. package/dist/tegel/p-c79b3861.entry.js.map +0 -1
  720. package/dist/tegel/p-d910763a.entry.js +0 -2
  721. package/dist/tegel/p-d910763a.entry.js.map +0 -1
  722. package/dist/tegel/p-e25424af.entry.js +0 -2
  723. package/dist/tegel/p-e25424af.entry.js.map +0 -1
  724. package/dist/tegel/p-ebffa726.entry.js.map +0 -1
  725. package/dist/tegel/p-fa3dbeec.entry.js +0 -2
  726. package/dist/tegel/p-fa3dbeec.entry.js.map +0 -1
  727. package/dist/types/components/tabs/inline-tabs-default/inline-tab/inline-tab.d.ts +0 -6
  728. package/dist/types/components/tabs/inline-tabs-default/inline-tabs.d.ts +0 -40
  729. package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.d.ts +0 -20
  730. /package/dist/tegel/{p-68fca08c.entry.js.map → p-067789d2.entry.js.map} +0 -0
  731. /package/dist/tegel/{p-c5537ff7.entry.js.map → p-12f566b7.entry.js.map} +0 -0
  732. /package/dist/tegel/{p-6bdce8c1.entry.js.map → p-400d74c2.entry.js.map} +0 -0
  733. /package/dist/tegel/{p-f51fe381.entry.js.map → p-4499e5cd.entry.js.map} +0 -0
  734. /package/dist/tegel/{p-aff4d273.entry.js.map → p-5dc33f45.entry.js.map} +0 -0
  735. /package/dist/tegel/{p-e5e10d8f.entry.js.map → p-750b7e5f.entry.js.map} +0 -0
  736. /package/dist/tegel/{p-f9dacc11.entry.js.map → p-792e8c5d.entry.js.map} +0 -0
  737. /package/dist/tegel/{p-b9ec54c5.entry.js.map → p-7991d22f.entry.js.map} +0 -0
  738. /package/dist/tegel/{p-b2f1ec40.entry.js.map → p-7f10356d.entry.js.map} +0 -0
  739. /package/dist/tegel/{p-262dca00.entry.js.map → p-a2cbef2c.entry.js.map} +0 -0
  740. /package/dist/tegel/{p-b2e46497.entry.js.map → p-a5cd0006.entry.js.map} +0 -0
  741. /package/dist/tegel/{p-72099402.entry.js.map → p-a61db32b.entry.js.map} +0 -0
  742. /package/dist/tegel/{p-cd08f5f0.entry.js.map → p-b9b329c0.entry.js.map} +0 -0
  743. /package/dist/tegel/{p-fc96cf21.entry.js.map → p-bd09c184.entry.js.map} +0 -0
  744. /package/dist/tegel/{p-e662e68d.entry.js.map → p-c4d28002.entry.js.map} +0 -0
  745. /package/dist/tegel/{p-a4127075.entry.js.map → p-e60b9366.entry.js.map} +0 -0
@@ -21,7 +21,7 @@ export default {
21
21
  argTypes: {
22
22
  menuPosition: {
23
23
  name: 'Menu position',
24
- description: 'Position of the Popover menu',
24
+ description: 'Sets the position of the popover menu.',
25
25
  control: {
26
26
  type: 'select',
27
27
  },
@@ -38,11 +38,15 @@ export default {
38
38
  'Right',
39
39
  'Right start',
40
40
  'Right end',
41
+ 'Auto',
41
42
  ],
43
+ table: {
44
+ defaultValue: { summary: 'auto' },
45
+ },
42
46
  },
43
47
  },
44
48
  args: {
45
- menuPosition: 'Bottom start',
49
+ menuPosition: 'Auto',
46
50
  },
47
51
  };
48
52
  const Template = ({ menuPosition }) => {
@@ -59,6 +63,7 @@ const Template = ({ menuPosition }) => {
59
63
  'Right': 'right',
60
64
  'Right start': 'right-start',
61
65
  'Right end': 'right-end',
66
+ 'Auto': 'auto',
62
67
  };
63
68
  return formatHtmlPreview(`
64
69
  <style>
@@ -118,5 +123,4 @@ const Template = ({ menuPosition }) => {
118
123
  `);
119
124
  };
120
125
  export const WithIcons = Template.bind({});
121
- WithIcons.args = {};
122
126
  //# sourceMappingURL=popover-menu-icons.stories.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"popover-menu-icons.stories.js","sourceRoot":"","sources":["../../../src/components/popover-menu/popover-menu-icons.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,YAAY,EAAE;MACZ,IAAI,EAAE,eAAe;MACrB,WAAW,EAAE,8BAA8B;MAC3C,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE;QACP,QAAQ;QACR,cAAc;QACd,YAAY;QACZ,KAAK;QACL,WAAW;QACX,SAAS;QACT,MAAM;QACN,YAAY;QACZ,UAAU;QACV,OAAO;QACP,aAAa;QACb,WAAW;OACZ;KACF;GACF;EACD,IAAI,EAAE;IACJ,YAAY,EAAE,cAAc;GAC7B;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;EACpC,MAAM,aAAa,GAAG;IACpB,QAAQ,EAAE,QAAQ;IAClB,cAAc,EAAE,cAAc;IAC9B,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,WAAW;IACxB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,WAAW,EAAE,YAAY;IACzB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,OAAO;IAChB,aAAa,EAAE,aAAa;IAC5B,WAAW,EAAE,WAAW;GACzB,CAAC;EAEF,OAAO,iBAAiB,CACtB;;;;;;;;;;;mBAWe,aAAa,CAAC,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4CzC,CACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n title: 'Components/Popover Menu',\n parameters: {\n layout: 'centered',\n notes: readme,\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n menuPosition: {\n name: 'Menu position',\n description: 'Position of the Popover menu',\n control: {\n type: 'select',\n },\n options: [\n 'Bottom',\n 'Bottom start',\n 'Bottom end',\n 'Top',\n 'Top start',\n 'Top end',\n 'Left',\n 'Left-start',\n 'Left end',\n 'Right',\n 'Right start',\n 'Right end',\n ],\n },\n },\n args: {\n menuPosition: 'Bottom start',\n },\n};\n\nconst Template = ({ menuPosition }) => {\n const menuPosLookup = {\n 'Bottom': 'bottom',\n 'Bottom start': 'bottom-start',\n 'Bottom end': 'bottom-end',\n 'Top': 'top',\n 'Top start': 'top-start',\n 'Top end': 'top-end',\n 'Left': 'left',\n 'Left star': 'left-start',\n 'Left end': 'left-end',\n 'Right': 'right',\n 'Right start': 'right-start',\n 'Right end': 'right-end',\n };\n\n return formatHtmlPreview(\n `\n <style>\n /* demo-wrapper styles is for demonstration purposes only */\n .demo-wrapper {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n }\n </style>\n\n <sdds-popover-menu\n placement=\"${menuPosLookup[menuPosition]}\"\n id=\"my-popover-menu\">\n <ul class=\"sdds-popover-menu-wrapper\">\n <li>\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">\n <i>\n <sdds-icon name=\"save\" size=\"16px\"></sdds-icon>\n </i>\n Menu item 1\n </a>\n </li>\n <li>\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">\n <i>\n <sdds-icon name=\"save\" size=\"16px\"></sdds-icon>\n </i>\n Menu item 2\n </a>\n </li>\n <li class=\"divider\"></li>\n <li>\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">\n <i>\n <sdds-icon name=\"save\" size=\"16px\"></sdds-icon>\n </i>\n Menu item 4\n </a>\n </li>\n </ul>\n </sdds-popover-menu>\n\n <!-- demo-wrapper code below is for demonstration purposes only -->\n <div class=\"demo-wrapper\">\n <span class=\"sdds-u-mr2\">Click icon for popover menu</span>\n \n <sdds-button aria-label=\"menu\" onlyIcon id=\"my-popover-button\" type=\"ghost\" size=\"sm\">\n <sdds-icon slot=\"icon\" class=\"sdds-btn-icon\" size=\"16px\" name=\"kebab\"></sdds-icon>\n </sdds-button>\n </div>\n\n <script>\n // The 'selector' prop on Popover-Menu can be used instead, but it might be less ideal in frameworks like React \n document.getElementById('my-popover-menu').referenceEl = document.getElementById('my-popover-button');\n </script>\n `,\n );\n};\n\nexport const WithIcons = Template.bind({});\nWithIcons.args = {};\n"]}
1
+ {"version":3,"file":"popover-menu-icons.stories.js","sourceRoot":"","sources":["../../../src/components/popover-menu/popover-menu-icons.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,YAAY,EAAE;MACZ,IAAI,EAAE,eAAe;MACrB,WAAW,EAAE,wCAAwC;MACrD,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE;QACP,QAAQ;QACR,cAAc;QACd,YAAY;QACZ,KAAK;QACL,WAAW;QACX,SAAS;QACT,MAAM;QACN,YAAY;QACZ,UAAU;QACV,OAAO;QACP,aAAa;QACb,WAAW;QACX,MAAM;OACP;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;OAClC;KACF;GACF;EACD,IAAI,EAAE;IACJ,YAAY,EAAE,MAAM;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;EACpC,MAAM,aAAa,GAAG;IACpB,QAAQ,EAAE,QAAQ;IAClB,cAAc,EAAE,cAAc;IAC9B,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,WAAW;IACxB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,WAAW,EAAE,YAAY;IACzB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,OAAO;IAChB,aAAa,EAAE,aAAa;IAC5B,WAAW,EAAE,WAAW;IACxB,MAAM,EAAE,MAAM;GACf,CAAC;EAEF,OAAO,iBAAiB,CACtB;;;;;;;;;;;mBAWe,aAAa,CAAC,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4CzC,CACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n title: 'Components/Popover Menu',\n parameters: {\n layout: 'centered',\n notes: readme,\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n menuPosition: {\n name: 'Menu position',\n description: 'Sets the position of the popover menu.',\n control: {\n type: 'select',\n },\n options: [\n 'Bottom',\n 'Bottom start',\n 'Bottom end',\n 'Top',\n 'Top start',\n 'Top end',\n 'Left',\n 'Left-start',\n 'Left end',\n 'Right',\n 'Right start',\n 'Right end',\n 'Auto',\n ],\n table: {\n defaultValue: { summary: 'auto' },\n },\n },\n },\n args: {\n menuPosition: 'Auto',\n },\n};\n\nconst Template = ({ menuPosition }) => {\n const menuPosLookup = {\n 'Bottom': 'bottom',\n 'Bottom start': 'bottom-start',\n 'Bottom end': 'bottom-end',\n 'Top': 'top',\n 'Top start': 'top-start',\n 'Top end': 'top-end',\n 'Left': 'left',\n 'Left star': 'left-start',\n 'Left end': 'left-end',\n 'Right': 'right',\n 'Right start': 'right-start',\n 'Right end': 'right-end',\n 'Auto': 'auto',\n };\n\n return formatHtmlPreview(\n `\n <style>\n /* demo-wrapper styles is for demonstration purposes only */\n .demo-wrapper {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n }\n </style>\n\n <sdds-popover-menu\n placement=\"${menuPosLookup[menuPosition]}\"\n id=\"my-popover-menu\">\n <ul class=\"sdds-popover-menu-wrapper\">\n <li>\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">\n <i>\n <sdds-icon name=\"save\" size=\"16px\"></sdds-icon>\n </i>\n Menu item 1\n </a>\n </li>\n <li>\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">\n <i>\n <sdds-icon name=\"save\" size=\"16px\"></sdds-icon>\n </i>\n Menu item 2\n </a>\n </li>\n <li class=\"divider\"></li>\n <li>\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">\n <i>\n <sdds-icon name=\"save\" size=\"16px\"></sdds-icon>\n </i>\n Menu item 4\n </a>\n </li>\n </ul>\n </sdds-popover-menu>\n\n <!-- demo-wrapper code below is for demonstration purposes only -->\n <div class=\"demo-wrapper\">\n <span class=\"sdds-u-mr2\">Click icon for popover menu</span>\n \n <sdds-button aria-label=\"menu\" onlyIcon id=\"my-popover-button\" type=\"ghost\" size=\"sm\">\n <sdds-icon slot=\"icon\" class=\"sdds-btn-icon\" size=\"16px\" name=\"kebab\"></sdds-icon>\n </sdds-button>\n </div>\n\n <script>\n // The 'selector' prop on Popover-Menu can be used instead, but it might be less ideal in frameworks like React \n document.getElementById('my-popover-menu').referenceEl = document.getElementById('my-popover-button');\n </script>\n `,\n );\n};\n\nexport const WithIcons = Template.bind({});"]}
@@ -21,7 +21,7 @@ export default {
21
21
  argTypes: {
22
22
  menuPosition: {
23
23
  name: 'Menu position',
24
- description: 'Position of the Popover menu',
24
+ description: 'Sets the position of the popover menu.',
25
25
  control: {
26
26
  type: 'select',
27
27
  },
@@ -38,11 +38,15 @@ export default {
38
38
  'Right',
39
39
  'Right start',
40
40
  'Right end',
41
+ 'Auto',
41
42
  ],
43
+ table: {
44
+ defaultValue: { summary: 'auto' },
45
+ },
42
46
  },
43
47
  },
44
48
  args: {
45
- menuPosition: 'Bottom start',
49
+ menuPosition: 'Auto',
46
50
  },
47
51
  };
48
52
  const Template = ({ menuPosition }) => {
@@ -59,6 +63,7 @@ const Template = ({ menuPosition }) => {
59
63
  'Right': 'right',
60
64
  'Right start': 'right-start',
61
65
  'Right end': 'right-end',
66
+ 'Auto': 'auto',
62
67
  };
63
68
  return formatHtmlPreview(`
64
69
  <style>
@@ -111,5 +116,4 @@ const Template = ({ menuPosition }) => {
111
116
  `);
112
117
  };
113
118
  export const Default = Template.bind({});
114
- Default.args = {};
115
119
  //# sourceMappingURL=popover-menu.stories.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"popover-menu.stories.js","sourceRoot":"","sources":["../../../src/components/popover-menu/popover-menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,YAAY,EAAE;MACZ,IAAI,EAAE,eAAe;MACrB,WAAW,EAAE,8BAA8B;MAC3C,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE;QACP,QAAQ;QACR,cAAc;QACd,YAAY;QACZ,KAAK;QACL,WAAW;QACX,SAAS;QACT,MAAM;QACN,YAAY;QACZ,UAAU;QACV,OAAO;QACP,aAAa;QACb,WAAW;OACZ;KACF;GACF;EACD,IAAI,EAAE;IACJ,YAAY,EAAE,cAAc;GAC7B;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;EACpC,MAAM,aAAa,GAAG;IACpB,QAAQ,EAAE,QAAQ;IAClB,cAAc,EAAE,cAAc;IAC9B,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,WAAW;IACxB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,WAAW,EAAE,YAAY;IACzB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,OAAO;IAChB,aAAa,EAAE,aAAa;IAC5B,WAAW,EAAE,WAAW;GACzB,CAAC;EAEF,OAAO,iBAAiB,CACtB;;;;;;;;;;;;mBAYe,aAAa,CAAC,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoCzC,CACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n title: 'Components/Popover Menu',\n parameters: {\n layout: 'centered',\n notes: readme,\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n menuPosition: {\n name: 'Menu position',\n description: 'Position of the Popover menu',\n control: {\n type: 'select',\n },\n options: [\n 'Bottom',\n 'Bottom start',\n 'Bottom end',\n 'Top',\n 'Top start',\n 'Top end',\n 'Left',\n 'Left-start',\n 'Left end',\n 'Right',\n 'Right start',\n 'Right end',\n ],\n },\n },\n args: {\n menuPosition: 'Bottom start',\n },\n};\n\nconst Template = ({ menuPosition }) => {\n const menuPosLookup = {\n 'Bottom': 'bottom',\n 'Bottom start': 'bottom-start',\n 'Bottom end': 'bottom-end',\n 'Top': 'top',\n 'Top start': 'top-start',\n 'Top end': 'top-end',\n 'Left': 'left',\n 'Left star': 'left-start',\n 'Left end': 'left-end',\n 'Right': 'right',\n 'Right start': 'right-start',\n 'Right end': 'right-end',\n };\n\n return formatHtmlPreview(\n `\n <style>\n /* demo-wrapper styles is for demonstration purposes only */\n .demo-wrapper {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n }\n </style>\n\n <sdds-popover-menu\n id=\"my-popover-menu\"\n placement=\"${menuPosLookup[menuPosition]}\">\n <ul class=\"sdds-popover-menu-wrapper\">\n <li>\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">Menu item 1</a>\n </li>\n <li>\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">\n Menu item 2\n </a>\n </li>\n <li>\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">Menu item 3</a>\n </li>\n <li class=\"divider\"></li>\n <li>\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">Menu item 4</a>\n </li>\n <li>\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">Menu item 5</a>\n </li>\n </ul>\n </sdds-popover-menu>\n\n <!-- demo-wrapper code below is for demonstration purposes only -->\n <div class=\"demo-wrapper\">\n <span class=\"sdds-u-mr2\">Click icon for popover menu</span>\n \n <sdds-button aria-label=\"menu\" onlyIcon id=\"my-popover-button\" type=\"ghost\" size=\"sm\">\n <sdds-icon slot=\"icon\" class=\"sdds-btn-icon\" size=\"16px\" name=\"kebab\"></sdds-icon>\n </sdds-button>\n </div>\n\n <script>\n // The 'selector' prop on Popover-Menu can be used instead, but it might be less ideal in frameworks like React \n document.getElementById('my-popover-menu').referenceEl = document.getElementById('my-popover-button');\n </script>\n `,\n );\n};\n\nexport const Default = Template.bind({});\nDefault.args = {};\n"]}
1
+ {"version":3,"file":"popover-menu.stories.js","sourceRoot":"","sources":["../../../src/components/popover-menu/popover-menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,YAAY,EAAE;MACZ,IAAI,EAAE,eAAe;MACrB,WAAW,EAAE,wCAAwC;MACrD,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE;QACP,QAAQ;QACR,cAAc;QACd,YAAY;QACZ,KAAK;QACL,WAAW;QACX,SAAS;QACT,MAAM;QACN,YAAY;QACZ,UAAU;QACV,OAAO;QACP,aAAa;QACb,WAAW;QACX,MAAM;OACP;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;OAClC;KACF;GACF;EACD,IAAI,EAAE;IACJ,YAAY,EAAE,MAAM;GACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;EACpC,MAAM,aAAa,GAAG;IACpB,QAAQ,EAAE,QAAQ;IAClB,cAAc,EAAE,cAAc;IAC9B,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,WAAW;IACxB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,WAAW,EAAE,YAAY;IACzB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,OAAO;IAChB,aAAa,EAAE,aAAa;IAC5B,WAAW,EAAE,WAAW;IACxB,MAAM,EAAE,MAAM;GACf,CAAC;EAEF,OAAO,iBAAiB,CACtB;;;;;;;;;;;;mBAYe,aAAa,CAAC,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoCzC,CACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n title: 'Components/Popover Menu',\n parameters: {\n layout: 'centered',\n notes: readme,\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n menuPosition: {\n name: 'Menu position',\n description: 'Sets the position of the popover menu.',\n control: {\n type: 'select',\n },\n options: [\n 'Bottom',\n 'Bottom start',\n 'Bottom end',\n 'Top',\n 'Top start',\n 'Top end',\n 'Left',\n 'Left-start',\n 'Left end',\n 'Right',\n 'Right start',\n 'Right end',\n 'Auto',\n ],\n table: {\n defaultValue: { summary: 'auto' },\n },\n },\n },\n args: {\n menuPosition: 'Auto',\n },\n};\n\nconst Template = ({ menuPosition }) => {\n const menuPosLookup = {\n 'Bottom': 'bottom',\n 'Bottom start': 'bottom-start',\n 'Bottom end': 'bottom-end',\n 'Top': 'top',\n 'Top start': 'top-start',\n 'Top end': 'top-end',\n 'Left': 'left',\n 'Left star': 'left-start',\n 'Left end': 'left-end',\n 'Right': 'right',\n 'Right start': 'right-start',\n 'Right end': 'right-end',\n 'Auto': 'auto',\n };\n\n return formatHtmlPreview(\n `\n <style>\n /* demo-wrapper styles is for demonstration purposes only */\n .demo-wrapper {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n }\n </style>\n\n <sdds-popover-menu\n id=\"my-popover-menu\"\n placement=\"${menuPosLookup[menuPosition]}\">\n <ul class=\"sdds-popover-menu-wrapper\">\n <li>\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">Menu item 1</a>\n </li>\n <li>\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">\n Menu item 2\n </a>\n </li>\n <li>\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">Menu item 3</a>\n </li>\n <li class=\"divider\"></li>\n <li>\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">Menu item 4</a>\n </li>\n <li>\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">Menu item 5</a>\n </li>\n </ul>\n </sdds-popover-menu>\n\n <!-- demo-wrapper code below is for demonstration purposes only -->\n <div class=\"demo-wrapper\">\n <span class=\"sdds-u-mr2\">Click icon for popover menu</span>\n \n <sdds-button aria-label=\"menu\" onlyIcon id=\"my-popover-button\" type=\"ghost\" size=\"sm\">\n <sdds-icon slot=\"icon\" class=\"sdds-btn-icon\" size=\"16px\" name=\"kebab\"></sdds-icon>\n </sdds-button>\n </div>\n\n <script>\n // The 'selector' prop on Popover-Menu can be used instead, but it might be less ideal in frameworks like React \n document.getElementById('my-popover-menu').referenceEl = document.getElementById('my-popover-button');\n </script>\n `,\n );\n};\n\nexport const Default = Template.bind({});"]}
@@ -33,7 +33,7 @@ export default {
33
33
  type: 'boolean',
34
34
  },
35
35
  table: {
36
- defaultValue: { summary: 'false' },
36
+ defaultValue: { summary: false },
37
37
  },
38
38
  },
39
39
  },
@@ -57,8 +57,6 @@ const Template = ({ label, disabled }) => formatHtmlPreview(`
57
57
  name="rb-example"
58
58
  value="option1"
59
59
  radio-id="option-1"
60
- aria-labelled-by="option-1"
61
- aria-describedby="option-1"
62
60
  required=false
63
61
  ${disabled ? 'disabled' : ''}
64
62
  checked="true"
@@ -70,9 +68,6 @@ const Template = ({ label, disabled }) => formatHtmlPreview(`
70
68
  name="rb-example"
71
69
  value="option2"
72
70
  radio-id="option-2"
73
- aria-labelled-by="option-2"
74
- aria-described-by="option-2"
75
- ${label ? `label="${label} 2"` : ''}
76
71
  required=false
77
72
  ${disabled ? 'disabled' : ''}
78
73
  >
@@ -1 +1 @@
1
- {"version":3,"file":"radio-button-component.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button-component.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,sCAAsC;MACnD,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;GACF;EACD,IAAI,EAAE;IACJ,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,EAAE,EAAE,CACrC,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;MAkBd,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;MAG1B,KAAK;;;;;;;;;MASL,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE;;MAEjC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;MAE1B,KAAK;;;;;;;;;;;GAWR,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n title: 'Components/Radio Button',\n parameters: {\n notes: readme,\n layout: 'centered',\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n label: {\n name: 'Label',\n description: 'Sets the label for the radio button.',\n controls: {\n type: 'text',\n },\n },\n disabled: {\n name: 'Disabled',\n description: 'Disables the radio button.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: 'false' },\n },\n },\n },\n args: {\n label: 'Label text',\n disabled: false,\n },\n};\n\nconst Template = ({label, disabled}) =>\n formatHtmlPreview(`\n <style>\n .demo-fieldset-reset { \n border: 0;\n margin: 0;\n min-width: 0;\n padding: 0; \n }\n</style>\n\n <fieldset class=\"demo-fieldset-reset\">\n <sdds-radio-button \n name=\"rb-example\"\n value=\"option1\"\n radio-id=\"option-1\"\n aria-labelled-by=\"option-1\"\n aria-describedby=\"option-1\"\n required=false\n ${disabled ? 'disabled' : ''}\n checked=\"true\" \n >\n ${label} 1\n </sdds-radio-button>\n\n <sdds-radio-button\n name=\"rb-example\"\n value=\"option2\"\n radio-id=\"option-2\"\n aria-labelled-by=\"option-2\"\n aria-described-by=\"option-2\"\n ${label ? `label=\"${label} 2\"` : ''}\n required=false\n ${disabled ? 'disabled' : ''} \n >\n ${label} 2\n </sdds-radio-button>\n \n </fieldset>\n\n <!-- Script tag with eventlistener for demo purposes. -->\n <script>\n document.addEventListener('sddsChange', (event) => {\n console.log('Radio button with id: ', event.detail.radioId, ' with value:', event.detail.value, ' was selected.')\n })\n </script>\n `);\n\nexport const WebComponent = Template.bind({});\n"]}
1
+ {"version":3,"file":"radio-button-component.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button-component.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,sCAAsC;MACnD,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,EAAE,EAAE,CACrC,iBAAiB,CAAC;;;;;;;;;;;;;;;;MAgBd,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;MAG1B,KAAK;;;;;;;;MAQL,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;MAE1B,KAAK;;;;;;;;;;;GAWR,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n title: 'Components/Radio Button',\n parameters: {\n notes: readme,\n layout: 'centered',\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n label: {\n name: 'Label',\n description: 'Sets the label for the radio button.',\n controls: {\n type: 'text',\n },\n },\n disabled: {\n name: 'Disabled',\n description: 'Disables the radio button.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n },\n args: {\n label: 'Label text',\n disabled: false,\n },\n};\n\nconst Template = ({label, disabled}) =>\n formatHtmlPreview(`\n <style>\n .demo-fieldset-reset { \n border: 0;\n margin: 0;\n min-width: 0;\n padding: 0; \n }\n</style>\n\n <fieldset class=\"demo-fieldset-reset\">\n <sdds-radio-button \n name=\"rb-example\"\n value=\"option1\"\n radio-id=\"option-1\"\n required=false\n ${disabled ? 'disabled' : ''}\n checked=\"true\" \n >\n ${label} 1\n </sdds-radio-button>\n\n <sdds-radio-button\n name=\"rb-example\"\n value=\"option2\"\n radio-id=\"option-2\"\n required=false\n ${disabled ? 'disabled' : ''} \n >\n ${label} 2\n </sdds-radio-button>\n \n </fieldset>\n\n <!-- Script tag with eventlistener for demo purposes. -->\n <script>\n document.addEventListener('sddsChange', (event) => {\n console.log('Radio button with id: ', event.detail.radioId, ' with value:', event.detail.value, ' was selected.')\n })\n </script>\n `);\n\nexport const WebComponent = Template.bind({});\n"]}
@@ -9,7 +9,11 @@ export class RadioButton {
9
9
  this.disabled = false;
10
10
  }
11
11
  render() {
12
- return (h("div", { class: "sdds-radio-button" }, h("input", { class: "sdds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, "aria-describedby": this.host.getAttribute('aria-describedby'), required: this.required, disabled: this.disabled, onChange: () => {
12
+ return (h("div", { class: "sdds-radio-button" }, h("input", { class: "sdds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked,
13
+ // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!
14
+ // aria-labelledby={this.ariaLabelledBy}
15
+ // aria-describedby={this.host.getAttribute('aria-describedby')}
16
+ required: this.required, disabled: this.disabled, onChange: () => {
13
17
  this.sddsChange.emit({
14
18
  radioId: this.radioId,
15
19
  value: this.value,
@@ -1 +1 @@
1
- {"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AASjF,MAAM,OAAO,WAAW;;;;mBAiBI,MAAM,CAAC,UAAU,EAAE;mBAGD,KAAK;oBAGrB,KAAK;oBAGL,KAAK;;EAgBjC,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,mBAAmB;MAC5B,aACA,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,kBACP,IAAI,CAAC,OAAO,sBAIR,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAC5D,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,GAAG,EAAE;UACb,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YAClB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;WACnB,CAAC,CAAA;QACJ,CAAC,GAAI;MACL,aAAO,OAAO,EAAE,IAAI,CAAC,OAAO;QAC1B,eAAa,CACP,CACF,CACT,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-radio-button',\n styleUrl: 'radio-button-component.scss',\n shadow: false,\n scoped: true,\n})\nexport class RadioButton {\n\n /** Name of radio button, used for reference. */\n @Prop() name: string;\n\n /** Value of input. */\n @Prop() value: string;\n\n /** REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMET HAS BEEN MADE! */\n\n /** Label mainly used for accesibility tools. */\n // @Prop() ariaLabelledBy: string;\n\n /** Label mainly used for accesibility tools. */\n // @Prop() ariaDescribedBy: string;\n\n /** Unique radio button identifier. */\n @Prop() radioId: string = crypto.randomUUID();\n \n /** Decides if the radio button is checked or not. */\n @Prop({ reflect: true }) checked: boolean = false;\n \n /** Decides if the radio button is required or not. */\n @Prop() required: boolean = false;\n \n /** Decides if the radio button is disabled or not. */\n @Prop() disabled: boolean = false;\n\n @Element() host: HostElement;\n\n /** Sends unique radio button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing. */\n @Event({\n eventName: 'sddsChange',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsChange: EventEmitter<{\n radioId: string;\n value: string;\n }>;\n\n render() {\n return (\n <div class=\"sdds-radio-button\">\n <input \n class=\"sdds-form-input\" \n type=\"radio\" \n name={this.name}\n id={this.radioId} \n value={this.value}\n checked={this.checked} \n aria-checked={this.checked} \n\n // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!\n // aria-labelledby={this.ariaLabelledBy} \n aria-describedby={this.host.getAttribute('aria-describedby')}\n required={this.required} \n disabled={this.disabled}\n onChange={() => {\n this.sddsChange.emit({\n radioId: this.radioId,\n value: this.value,\n })\n }} />\n <label htmlFor={this.radioId}>\n <slot></slot>\n </label>\n </div>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AASjF,MAAM,OAAO,WAAW;;;;mBAiBI,MAAM,CAAC,UAAU,EAAE;mBAGD,KAAK;oBAGrB,KAAK;oBAGL,KAAK;;EAgBjC,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,mBAAmB;MAC5B,aACA,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,kBACP,IAAI,CAAC,OAAO;QAE1B,8DAA8D;QAC9D,yCAAyC;QACzC,gEAAgE;QAChE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,GAAG,EAAE;UACb,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YAClB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;WACnB,CAAC,CAAA;QACJ,CAAC,GAAI;MACL,aAAO,OAAO,EAAE,IAAI,CAAC,OAAO;QAC1B,eAAa,CACP,CACF,CACT,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-radio-button',\n styleUrl: 'radio-button-component.scss',\n shadow: false,\n scoped: true,\n})\nexport class RadioButton {\n\n /** Name of radio button, used for reference. */\n @Prop() name: string;\n\n /** Value of input. */\n @Prop() value: string;\n\n /** REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMET HAS BEEN MADE! */\n\n /** Label mainly used for accesibility tools. */\n // @Prop() ariaLabelledBy: string;\n\n /** Label mainly used for accesibility tools. */\n // @Prop() ariaDescribedBy: string;\n\n /** Unique radio button identifier. */\n @Prop() radioId: string = crypto.randomUUID();\n \n /** Decides if the radio button is checked or not. */\n @Prop({ reflect: true }) checked: boolean = false;\n \n /** Decides if the radio button is required or not. */\n @Prop() required: boolean = false;\n \n /** Decides if the radio button is disabled or not. */\n @Prop() disabled: boolean = false;\n\n @Element() host: HostElement;\n\n /** Sends unique radio button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing. */\n @Event({\n eventName: 'sddsChange',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsChange: EventEmitter<{\n radioId: string;\n value: string;\n }>;\n\n render() {\n return (\n <div class=\"sdds-radio-button\">\n <input \n class=\"sdds-form-input\" \n type=\"radio\" \n name={this.name}\n id={this.radioId} \n value={this.value}\n checked={this.checked} \n aria-checked={this.checked} \n\n // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!\n // aria-labelledby={this.ariaLabelledBy} \n // aria-describedby={this.host.getAttribute('aria-describedby')}\n required={this.required} \n disabled={this.disabled}\n onChange={() => {\n this.sddsChange.emit({\n radioId: this.radioId,\n value: this.value,\n })\n }} />\n <label htmlFor={this.radioId}>\n <slot></slot>\n </label>\n </div>\n );\n }\n}\n"]}
@@ -20,8 +20,8 @@ export default {
20
20
  label: {
21
21
  name: 'Label',
22
22
  description: 'Sets the label for the radio button.',
23
- controls: {
24
- type: 'string',
23
+ control: {
24
+ type: 'text',
25
25
  },
26
26
  },
27
27
  disabled: {
@@ -30,6 +30,9 @@ export default {
30
30
  control: {
31
31
  type: 'boolean',
32
32
  },
33
+ table: {
34
+ defaultValue: { summary: 'false' },
35
+ },
33
36
  },
34
37
  },
35
38
  args: {
@@ -37,7 +40,7 @@ export default {
37
40
  disabled: false,
38
41
  },
39
42
  };
40
- const Template = (args) => formatHtmlPreview(`
43
+ const Template = ({ label, disabled }) => formatHtmlPreview(`
41
44
  <style>
42
45
  .demo-fieldset-reset {
43
46
  border: 0;
@@ -46,12 +49,12 @@ const Template = (args) => formatHtmlPreview(`
46
49
  padding: 0;
47
50
  }
48
51
  </style>
49
- <fieldset class="demo-fieldset-reset" ${args.disabled ? 'disabled' : ''}>
52
+ <fieldset class="demo-fieldset-reset" ${disabled ? 'disabled' : ''}>
50
53
  <div class="sdds-radio-button-group">
51
54
  <div class="sdds-radio-item">
52
55
  <input class="sdds-form-input" type="radio" name="rb-example" id="rb-option-1" checked>
53
56
  <label class="sdds-form-label" for="rb-option-1">
54
- ${args.label} 1
57
+ ${label} 1
55
58
  </label>
56
59
  </div>
57
60
  </div>
@@ -59,7 +62,7 @@ const Template = (args) => formatHtmlPreview(`
59
62
  <div class="sdds-radio-item">
60
63
  <input class="sdds-form-input" type="radio" name="rb-example" id="rb-option-2">
61
64
  <label class="sdds-form-label" for="rb-option-2">
62
- ${args.label} 2
65
+ ${label} 2
63
66
  </label>
64
67
  </div>
65
68
  </div>
@@ -1 +1 @@
1
- {"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,sCAAsC;MACnD,QAAQ,EAAE;QACR,IAAI,EAAE,QAAQ;OACf;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CACxB,iBAAiB,CAAC;;;;;;;;;0CASsB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;;;YAK7D,IAAI,CAAC,KAAK;;;;;;;;YAQV,IAAI,CAAC,KAAK;;;;;GAKnB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n title: 'Components/Radio Button',\n parameters: {\n layout: 'centered',\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n label: {\n name: 'Label',\n description: 'Sets the label for the radio button.',\n controls: {\n type: 'string',\n },\n },\n disabled: {\n name: 'Disabled',\n description: 'Disables the radio button.',\n control: {\n type: 'boolean',\n },\n },\n },\n args: {\n label: 'Label text',\n disabled: false,\n },\n};\n\nconst Template = (args) =>\n formatHtmlPreview(`\n <style>\n .demo-fieldset-reset { \n border: 0;\n margin: 0;\n min-width: 0;\n padding: 0; \n }\n </style>\n <fieldset class=\"demo-fieldset-reset\" ${args.disabled ? 'disabled' : ''}>\n <div class=\"sdds-radio-button-group\">\n <div class=\"sdds-radio-item\">\n <input class=\"sdds-form-input\" type=\"radio\" name=\"rb-example\" id=\"rb-option-1\" checked>\n <label class=\"sdds-form-label\" for=\"rb-option-1\">\n ${args.label} 1\n </label>\n </div>\n </div>\n <div class=\"sdds-radio-button-group\">\n <div class=\"sdds-radio-item\">\n <input class=\"sdds-form-input\" type=\"radio\" name=\"rb-example\" id=\"rb-option-2\">\n <label class=\"sdds-form-label\" for=\"rb-option-2\">\n ${args.label} 2\n </label>\n </div>\n </div>\n </fieldset>\n `);\n\n export const Native = Template.bind({});\n"]}
1
+ {"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,sCAAsC;MACnD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;GACF;EACD,IAAI,EAAE;IACJ,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,EAAE,EAAE,CACrC,iBAAiB,CAAC;;;;;;;;;0CASsB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;;;YAKxD,KAAK;;;;;;;;YAQL,KAAK;;;;;GAKd,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n title: 'Components/Radio Button',\n parameters: {\n layout: 'centered',\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n label: {\n name: 'Label',\n description: 'Sets the label for the radio button.',\n control: {\n type: 'text',\n },\n },\n disabled: {\n name: 'Disabled',\n description: 'Disables the radio button.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: 'false' },\n },\n },\n },\n args: {\n label: 'Label text',\n disabled: false,\n },\n};\n\nconst Template = ({label, disabled}) =>\n formatHtmlPreview(`\n <style>\n .demo-fieldset-reset { \n border: 0;\n margin: 0;\n min-width: 0;\n padding: 0; \n }\n </style>\n <fieldset class=\"demo-fieldset-reset\" ${disabled ? 'disabled' : ''}>\n <div class=\"sdds-radio-button-group\">\n <div class=\"sdds-radio-item\">\n <input class=\"sdds-form-input\" type=\"radio\" name=\"rb-example\" id=\"rb-option-1\" checked>\n <label class=\"sdds-form-label\" for=\"rb-option-1\">\n ${label} 1\n </label>\n </div>\n </div>\n <div class=\"sdds-radio-button-group\">\n <div class=\"sdds-radio-item\">\n <input class=\"sdds-form-input\" type=\"radio\" name=\"rb-example\" id=\"rb-option-2\">\n <label class=\"sdds-form-label\" for=\"rb-option-2\">\n ${label} 2\n </label>\n </div>\n </div>\n </fieldset>\n `);\n\n export const Native = Template.bind({});\n"]}
@@ -30,15 +30,15 @@ export class Slider {
30
30
  this.max = '100';
31
31
  this.ticks = '0';
32
32
  this.showTickNumbers = false;
33
- this.tooltip = null;
34
- this.disabled = null;
35
- this.readOnly = null;
36
- this.controls = null;
37
- this.input = null;
33
+ this.tooltip = false;
34
+ this.disabled = false;
35
+ this.readOnly = false;
36
+ this.controls = false;
37
+ this.input = false;
38
38
  this.step = '1';
39
39
  this.name = '';
40
- this.size = '';
41
- this.snap = null;
40
+ this.scrubberSize = 'lg';
41
+ this.snap = false;
42
42
  this.sliderId = crypto.randomUUID();
43
43
  }
44
44
  /** Public method to re-initialise the slider if some configuration props are changed */
@@ -302,7 +302,7 @@ export class Slider {
302
302
  this.useInput = true;
303
303
  }
304
304
  this.useSmall = false;
305
- if (this.size === 'sm') {
305
+ if (this.scrubberSize === 'sm') {
306
306
  this.useSmall = true;
307
307
  }
308
308
  this.useSnapping = false;
@@ -481,7 +481,7 @@ export class Slider {
481
481
  },
482
482
  "attribute": "tooltip",
483
483
  "reflect": false,
484
- "defaultValue": "null"
484
+ "defaultValue": "false"
485
485
  },
486
486
  "disabled": {
487
487
  "type": "boolean",
@@ -499,7 +499,7 @@ export class Slider {
499
499
  },
500
500
  "attribute": "disabled",
501
501
  "reflect": false,
502
- "defaultValue": "null"
502
+ "defaultValue": "false"
503
503
  },
504
504
  "readOnly": {
505
505
  "type": "boolean",
@@ -517,7 +517,7 @@ export class Slider {
517
517
  },
518
518
  "attribute": "read-only",
519
519
  "reflect": false,
520
- "defaultValue": "null"
520
+ "defaultValue": "false"
521
521
  },
522
522
  "controls": {
523
523
  "type": "boolean",
@@ -535,7 +535,7 @@ export class Slider {
535
535
  },
536
536
  "attribute": "controls",
537
537
  "reflect": false,
538
- "defaultValue": "null"
538
+ "defaultValue": "false"
539
539
  },
540
540
  "input": {
541
541
  "type": "boolean",
@@ -553,7 +553,7 @@ export class Slider {
553
553
  },
554
554
  "attribute": "input",
555
555
  "reflect": false,
556
- "defaultValue": "null"
556
+ "defaultValue": "false"
557
557
  },
558
558
  "step": {
559
559
  "type": "string",
@@ -591,12 +591,12 @@ export class Slider {
591
591
  "reflect": false,
592
592
  "defaultValue": "''"
593
593
  },
594
- "size": {
594
+ "scrubberSize": {
595
595
  "type": "string",
596
596
  "mutable": false,
597
597
  "complexType": {
598
- "original": "'sm' | ''",
599
- "resolved": "\"\" | \"sm\"",
598
+ "original": "'sm' | 'lg'",
599
+ "resolved": "\"lg\" | \"sm\"",
600
600
  "references": {}
601
601
  },
602
602
  "required": false,
@@ -605,9 +605,9 @@ export class Slider {
605
605
  "tags": [],
606
606
  "text": "Sets the size of the scrubber"
607
607
  },
608
- "attribute": "size",
608
+ "attribute": "scrubber-size",
609
609
  "reflect": false,
610
- "defaultValue": "''"
610
+ "defaultValue": "'lg'"
611
611
  },
612
612
  "snap": {
613
613
  "type": "boolean",
@@ -625,7 +625,7 @@ export class Slider {
625
625
  },
626
626
  "attribute": "snap",
627
627
  "reflect": false,
628
- "defaultValue": "null"
628
+ "defaultValue": "false"
629
629
  },
630
630
  "sliderId": {
631
631
  "type": "string",
@@ -1 +1 @@
1
- {"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Listen, EventEmitter, Event, Method } from '@stencil/core';\n\n@Component({\n tag: 'sdds-slider',\n styleUrl: 'slider.scss',\n shadow: false,\n})\nexport class Slider {\n /** Text for label */\n @Prop() label: string = '';\n\n /** Initial value */\n @Prop() value: string = '0';\n\n /** Minimum value */\n @Prop() min: string = '0';\n\n /** Maximum value */\n @Prop() max: string = '100';\n\n /** Number of tick markers (tick for min- and max-value will be added automatically) */\n @Prop() ticks: string = '0';\n\n /** Decide to show numbers above the tick markers or not */\n @Prop() showTickNumbers: boolean = false;\n\n /** Decide to show the tooltip or not */\n @Prop() tooltip: boolean = null;\n\n /** Sets the disabled state for the whole component */\n @Prop() disabled: boolean = null;\n\n /** Sets the read only state for the whole component */\n @Prop() readOnly: boolean = null;\n\n /** Decide to show the controls or not */\n @Prop() controls: boolean = null;\n\n /** Decide to show the input field or not */\n @Prop() input: boolean = null;\n\n /** Defines how much to increment/decrement the value when using controls */\n @Prop() step: string = '1';\n\n /** Name property (will be inherited by the native slider component) */\n @Prop() name: string = '';\n\n /** Sets the size of the scrubber */\n @Prop() size: 'sm' | '' = '';\n\n /** Snap to the ticks grid */\n @Prop() snap: boolean = null;\n\n /** Id for the sliders input element, randomly generated if not specified. */\n @Prop() sliderId: string = crypto.randomUUID();\n\n wrapperElement: HTMLElement = null;\n\n scrubberElement: HTMLElement = null;\n\n scrubberInnerElement: HTMLElement = null;\n\n dividersElement: HTMLElement = null;\n\n trackElement: HTMLElement = null;\n\n trackFillElement: HTMLElement = null;\n\n minusElement: HTMLElement = null;\n\n plusElement: HTMLElement = null;\n\n inputElement: HTMLInputElement = null;\n\n nativeRangeInputElement: HTMLInputElement = null;\n\n scrubberGrabPos: object = { x: 0, y: 0 };\n\n scrubberGrabbed: boolean = false;\n\n scrubberLeft: number = 0;\n\n tickValues: Array<number> = [];\n\n disabledState: boolean = false;\n\n readonlyState: boolean = false;\n\n useControls: boolean = false;\n\n useInput: boolean = false;\n\n useSmall: boolean = false;\n\n useSnapping: boolean = false;\n\n supposedValueSlot: number = -1;\n\n eventListenersAdded: boolean = false;\n\n resizeObserverAdded: boolean = false;\n\n /** Sends unique checkbox identifier and value when the slider has a change in value. */\n @Event({\n eventName: 'sddsChange',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsChange: EventEmitter<{\n value: string;\n }>;\n\n /** Public method to re-initialise the slider if some configuration props are changed */\n @Method() async reset() {\n // @TODO: maybe refactor to use watch-decorators instead\n this.componentWillLoad();\n this.componentDidLoad();\n }\n\n @Listen('keydown')\n handleKeydown(event) {\n switch (event.key) {\n case 'ArrowLeft':\n this.stepLeft();\n break;\n\n case 'ArrowRight':\n this.stepRight();\n break;\n\n default:\n break;\n }\n }\n\n @Listen('mouseup', { target: 'window' })\n handleMouseUp() {\n if (!this.scrubberGrabbed) {\n return;\n }\n\n this.scrubberGrabbed = false;\n this.scrubberInnerElement.classList.remove('pressed');\n this.updateValue();\n\n this.trackElement.focus();\n }\n\n @Listen('touchend', { target: 'window' })\n handleTouchEnd() {\n if (!this.scrubberGrabbed) {\n return;\n }\n\n this.scrubberGrabbed = false;\n this.scrubberInnerElement.classList.remove('pressed');\n this.updateValue();\n\n this.trackElement.focus();\n }\n\n @Listen('mousemove', { target: 'window' })\n handleMouseMove(event) {\n if (!this.scrubberGrabbed) {\n return;\n }\n\n const numTicks = parseInt(this.ticks);\n const trackRect = this.trackElement.getBoundingClientRect();\n let localLeft = event.clientX - trackRect.left;\n this.supposedValueSlot = -1;\n\n if (this.useSnapping && numTicks > 0) {\n const v = Math.round(this.getTrackWidth() / (numTicks + 1));\n localLeft = Math.round(localLeft / v) * v;\n\n this.supposedValueSlot = Math.round(localLeft / v);\n }\n\n this.scrubberLeft = this.constrainScrubber(localLeft);\n this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n\n this.updateValue();\n this.updateTrack();\n }\n\n @Listen('touchmove', { target: 'window' })\n handleTouchMove(event) {\n event.preventDefault();\n\n if (!this.scrubberGrabbed) {\n return;\n }\n\n const numTicks = parseInt(this.ticks);\n const trackRect = this.trackElement.getBoundingClientRect();\n let localLeft = event.touches[0].clientX - trackRect.left;\n\n this.supposedValueSlot = -1;\n\n if (this.useSnapping && numTicks > 0) {\n const v = Math.round(this.getTrackWidth() / (numTicks + 1));\n localLeft = Math.round(localLeft / v) * v;\n\n this.supposedValueSlot = Math.round(localLeft / v);\n }\n\n this.scrubberLeft = this.constrainScrubber(localLeft);\n this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n\n this.updateValue();\n this.updateTrack();\n }\n\n updateTrack() {\n const trackWidth = this.getTrackWidth();\n const percentageFilled = (this.scrubberLeft / trackWidth) * 100;\n\n this.trackFillElement.style.width = `${percentageFilled}%`;\n }\n\n dispatchChangeEvent() {\n this.sddsChange.emit({ value: this.value });\n }\n\n updateValue() {\n const trackWidth = this.getTrackWidth();\n\n /* if snapping (supposedValueSlot > 0) is enabled, make sure we display the supposed value (instead of maybe getting a -1/+1 depending on rounding) */\n if (this.supposedValueSlot > 0) {\n const supposedValue = this.tickValues[this.supposedValueSlot];\n this.value = `${supposedValue}`;\n } else {\n const percentage = this.scrubberLeft / trackWidth;\n this.value = `${Math.trunc(this.getMin() + percentage * (this.getMax() - this.getMin()))}`;\n }\n\n this.dispatchChangeEvent();\n }\n\n updateValueForced(value) {\n this.value = value;\n this.dispatchChangeEvent();\n }\n\n getMin() {\n return parseFloat(this.min);\n }\n\n getMax() {\n return parseFloat(this.max);\n }\n\n constrainScrubber(x) {\n const width = this.getTrackWidth();\n\n if (x < 0) {\n return 0;\n }\n\n if (x > width) {\n return width;\n }\n\n return x;\n }\n\n getTrackWidth() {\n const trackRect = this.trackElement.getBoundingClientRect();\n return trackRect.right - trackRect.left;\n }\n\n calculateScrubberLeftFromValue(value) {\n const initValue = value;\n const trackWidth = this.getTrackWidth();\n\n const normalizedValue = initValue - this.getMin();\n const normalizedMax = this.getMax() - this.getMin();\n\n const calculatedLeft = (normalizedValue / normalizedMax) * trackWidth;\n\n this.scrubberLeft = calculatedLeft;\n\n this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n }\n\n componentDidLoad() {\n if (!this.resizeObserverAdded) {\n this.resizeObserverAdded = true;\n\n const resizeObserver = new ResizeObserver((/* entries */) => {\n this.calculateScrubberLeftFromValue(this.value);\n this.updateTrack();\n });\n\n resizeObserver.observe(this.wrapperElement);\n }\n\n if (!this.eventListenersAdded) {\n this.eventListenersAdded = true;\n\n this.scrubberElement.addEventListener('mousedown', (event) => {\n event.preventDefault();\n this.grabScrubber(event.offsetX, event.offsetY);\n });\n\n this.scrubberElement.addEventListener('touchstart', (event) => {\n const rect = this.scrubberElement.getBoundingClientRect();\n const x = event.targetTouches[0].pageX - rect.left;\n const y = event.targetTouches[0].pageY - rect.top;\n this.grabScrubber(x, y);\n });\n\n if (this.useControls) {\n this.minusElement.addEventListener('click', () => {\n this.stepLeft();\n });\n\n this.plusElement.addEventListener('click', () => {\n this.stepRight();\n });\n }\n\n if (this.inputElement) {\n this.inputElement.addEventListener('keydown', (event) => {\n event.stopPropagation();\n\n if (event.key === 'Enter') {\n let newValue = parseInt(this.inputElement.value);\n\n if (newValue < this.getMin()) {\n newValue = this.getMin();\n } else if (newValue > this.getMax()) {\n newValue = this.getMax();\n }\n\n this.calculateScrubberLeftFromValue(newValue);\n this.updateValueForced(newValue);\n this.updateTrack();\n\n this.inputElement.blur();\n this.wrapperElement.focus();\n }\n });\n }\n }\n\n this.calculateScrubberLeftFromValue(this.value);\n this.updateTrack();\n }\n\n grabScrubber(xOffset, yOffset) {\n if (this.readonlyState) {\n return;\n }\n\n this.scrubberGrabPos = {\n x: xOffset,\n y: yOffset,\n };\n\n this.scrubberGrabbed = true;\n this.scrubberInnerElement.classList.add('pressed');\n }\n\n calculateInputSizeFromMax() {\n return this.max.length;\n }\n\n controlsStep(delta) {\n if (this.readonlyState || this.disabled) {\n return;\n }\n\n const trackWidth = this.getTrackWidth();\n const percentage = this.scrubberLeft / trackWidth;\n const numTicks = parseInt(this.ticks);\n\n let currentValue = this.getMin() + percentage * (this.getMax() - this.getMin());\n\n currentValue += delta;\n\n if (currentValue < this.getMin()) {\n currentValue = this.getMin();\n } else if (currentValue > this.getMax()) {\n currentValue = this.getMax();\n }\n\n this.value = `${currentValue}`;\n\n /* if snapping is enabled, instead just increment or decrement the current \"fixed\" value from our ticknumber array */\n if (this.useSnapping && numTicks > 0) {\n const stepDir = delta > 0 ? 1 : -1;\n this.supposedValueSlot += stepDir;\n\n if (this.supposedValueSlot < 0) {\n this.supposedValueSlot = 0;\n } else if (this.supposedValueSlot > numTicks + 1) {\n this.supposedValueSlot = numTicks + 1;\n }\n }\n\n this.calculateScrubberLeftFromValue(currentValue);\n this.updateTrack();\n this.updateValue();\n }\n\n stepLeft() {\n this.controlsStep(-parseInt(this.step));\n }\n\n stepRight() {\n this.controlsStep(parseInt(this.step));\n }\n\n componentWillLoad() {\n const numTicks = parseInt(this.ticks);\n\n if (numTicks > 0) {\n this.tickValues = [this.getMin()];\n\n const step = (this.getMax() - this.getMin()) / (numTicks + 1);\n\n for (let i = 1; i < numTicks + 1; i++) {\n this.tickValues.push(this.getMin() + Math.round(step * i));\n }\n\n this.tickValues.push(this.getMax());\n }\n\n if (this.disabled !== null) {\n this.disabledState = true;\n } else {\n this.disabledState = false;\n }\n\n if (this.readOnly !== null) {\n this.readonlyState = true;\n } else {\n this.readonlyState = false;\n }\n\n this.useInput = false;\n this.useControls = false;\n\n if (this.controls !== null) {\n this.useControls = true;\n } else if (this.input !== null) {\n this.useInput = true;\n }\n\n this.useSmall = false;\n\n if (this.size === 'sm') {\n this.useSmall = true;\n }\n\n this.useSnapping = false;\n\n if (this.snap !== null) {\n this.useSnapping = true;\n }\n\n const min = this.getMin();\n const max = this.getMax();\n\n if (min > max) {\n console.warn(\n 'min-prop must have a higher value than max-prop for the component to work correctly.',\n );\n this.disabledState = true;\n }\n }\n\n render() {\n return (\n <div class={`sdds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}`}>\n <input\n ref={(el) => {\n this.nativeRangeInputElement = el as HTMLInputElement;\n }}\n class=\"sdds-slider-native-element\"\n type=\"range\"\n value={this.value}\n name={this.name}\n min={this.min}\n max={this.max}\n disabled={this.disabled}\n id={this.sliderId}\n ></input>\n\n <div\n class={`sdds-slider ${this.disabledState ? 'disabled' : ''} ${\n this.useSmall ? 'sdds-slider-small' : ''\n }`}\n ref={(el) => {\n this.wrapperElement = el as HTMLElement;\n }}\n >\n {this.useInput && (\n <div class=\"sdds-slider__input-values\">\n <div\n ref={(el) => {\n this.minusElement = el as HTMLElement;\n }}\n class=\"sdds-slider__input-value\"\n >\n {this.min}\n </div>\n </div>\n )}\n\n {this.useControls && (\n <div class=\"sdds-slider__controls\">\n <div\n ref={(el) => (this.minusElement = el as HTMLElement)}\n class=\"sdds-slider__control sdds-slider__control-minus\"\n >\n <sdds-icon name=\"minus\" size=\"16px\"></sdds-icon>\n </div>\n </div>\n )}\n\n <div class=\"sdds-slider-inner\">\n <label class={this.tickValues.length > 0 && 'offset'}>{this.label}</label>\n\n {this.tickValues.length > 0 && (\n <div class=\"sdds-slider__value-dividers-wrapper\">\n <div\n ref={(el) => {\n this.dividersElement = el as HTMLElement;\n }}\n class=\"sdds-slider__value-dividers\"\n >\n {this.tickValues.map((value) => (\n <div class=\"sdds-slider__value-divider\">\n {this.showTickNumbers && <span>{value}</span>}\n </div>\n ))}\n </div>\n </div>\n )}\n\n <div\n class=\"sdds-slider__track\"\n ref={(el) => {\n this.trackElement = el as HTMLElement;\n }}\n tabindex={this.disabled ? '-1' : '0'}\n >\n <div\n class=\"sdds-slider__track-fill\"\n ref={(el) => {\n this.trackFillElement = el as HTMLElement;\n }}\n ></div>\n\n <div\n class=\"sdds-slider__scrubber\"\n ref={(el) => {\n this.scrubberElement = el as HTMLElement;\n }}\n >\n {this.tooltip !== null && (\n <div class=\"sdds-slider__value\">\n {this.value}\n <svg\n width=\"18\"\n height=\"14\"\n viewBox=\"0 0 18 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z\"\n fill=\"#37414F\"\n />\n </svg>\n </div>\n )}\n\n <div\n class=\"sdds-slider__scrubber-inner\"\n ref={(el) => {\n this.scrubberInnerElement = el as HTMLElement;\n }}\n ></div>\n </div>\n </div>\n </div>\n\n {this.useInput && (\n <div class=\"sdds-slider__input-values\">\n <div\n ref={(el) => {\n this.minusElement = el as HTMLElement;\n }}\n class=\"sdds-slider__input-value\"\n >\n {this.max}\n </div>\n <div class=\"sdds-slider__input-field-wrapper\">\n <input\n onFocus={(e) => {\n if (this.readonlyState) {\n e.preventDefault();\n this.inputElement.blur();\n }\n }}\n size={this.calculateInputSizeFromMax()}\n class=\"sdds-slider__input-field\"\n value={this.value}\n ref={(el) => {\n this.inputElement = el as HTMLInputElement;\n }}\n />\n </div>\n </div>\n )}\n\n {this.useControls && (\n <div class=\"sdds-slider__controls\">\n <div\n ref={(el) => (this.plusElement = el as HTMLElement)}\n class=\"sdds-slider__control sdds-slider__control-plus\"\n >\n <sdds-icon name=\"plus\" size=\"16px\"></sdds-icon>\n </div>\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Listen, EventEmitter, Event, Method } from '@stencil/core';\n\n@Component({\n tag: 'sdds-slider',\n styleUrl: 'slider.scss',\n shadow: false,\n})\nexport class Slider {\n /** Text for label */\n @Prop() label: string = '';\n\n /** Initial value */\n @Prop() value: string = '0';\n\n /** Minimum value */\n @Prop() min: string = '0';\n\n /** Maximum value */\n @Prop() max: string = '100';\n\n /** Number of tick markers (tick for min- and max-value will be added automatically) */\n @Prop() ticks: string = '0';\n\n /** Decide to show numbers above the tick markers or not */\n @Prop() showTickNumbers: boolean = false;\n\n /** Decide to show the tooltip or not */\n @Prop() tooltip: boolean = false;\n\n /** Sets the disabled state for the whole component */\n @Prop() disabled: boolean = false;\n\n /** Sets the read only state for the whole component */\n @Prop() readOnly: boolean = false;\n\n /** Decide to show the controls or not */\n @Prop() controls: boolean = false;\n\n /** Decide to show the input field or not */\n @Prop() input: boolean = false;\n\n /** Defines how much to increment/decrement the value when using controls */\n @Prop() step: string = '1';\n\n /** Name property (will be inherited by the native slider component) */\n @Prop() name: string = '';\n\n /** Sets the size of the scrubber */\n @Prop() scrubberSize: 'sm' | 'lg' = 'lg';\n\n /** Snap to the ticks grid */\n @Prop() snap: boolean = false;\n\n /** Id for the sliders input element, randomly generated if not specified. */\n @Prop() sliderId: string = crypto.randomUUID();\n\n wrapperElement: HTMLElement = null;\n\n scrubberElement: HTMLElement = null;\n\n scrubberInnerElement: HTMLElement = null;\n\n dividersElement: HTMLElement = null;\n\n trackElement: HTMLElement = null;\n\n trackFillElement: HTMLElement = null;\n\n minusElement: HTMLElement = null;\n\n plusElement: HTMLElement = null;\n\n inputElement: HTMLInputElement = null;\n\n nativeRangeInputElement: HTMLInputElement = null;\n\n scrubberGrabPos: object = { x: 0, y: 0 };\n\n scrubberGrabbed: boolean = false;\n\n scrubberLeft: number = 0;\n\n tickValues: Array<number> = [];\n\n disabledState: boolean = false;\n\n readonlyState: boolean = false;\n\n useControls: boolean = false;\n\n useInput: boolean = false;\n\n useSmall: boolean = false;\n\n useSnapping: boolean = false;\n\n supposedValueSlot: number = -1;\n\n eventListenersAdded: boolean = false;\n\n resizeObserverAdded: boolean = false;\n\n /** Sends unique checkbox identifier and value when the slider has a change in value. */\n @Event({\n eventName: 'sddsChange',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsChange: EventEmitter<{\n value: string;\n }>;\n\n /** Public method to re-initialise the slider if some configuration props are changed */\n @Method() async reset() {\n // @TODO: maybe refactor to use watch-decorators instead\n this.componentWillLoad();\n this.componentDidLoad();\n }\n\n @Listen('keydown')\n handleKeydown(event) {\n switch (event.key) {\n case 'ArrowLeft':\n this.stepLeft();\n break;\n\n case 'ArrowRight':\n this.stepRight();\n break;\n\n default:\n break;\n }\n }\n\n @Listen('mouseup', { target: 'window' })\n handleMouseUp() {\n if (!this.scrubberGrabbed) {\n return;\n }\n\n this.scrubberGrabbed = false;\n this.scrubberInnerElement.classList.remove('pressed');\n this.updateValue();\n\n this.trackElement.focus();\n }\n\n @Listen('touchend', { target: 'window' })\n handleTouchEnd() {\n if (!this.scrubberGrabbed) {\n return;\n }\n\n this.scrubberGrabbed = false;\n this.scrubberInnerElement.classList.remove('pressed');\n this.updateValue();\n\n this.trackElement.focus();\n }\n\n @Listen('mousemove', { target: 'window' })\n handleMouseMove(event) {\n if (!this.scrubberGrabbed) {\n return;\n }\n\n const numTicks = parseInt(this.ticks);\n const trackRect = this.trackElement.getBoundingClientRect();\n let localLeft = event.clientX - trackRect.left;\n this.supposedValueSlot = -1;\n\n if (this.useSnapping && numTicks > 0) {\n const v = Math.round(this.getTrackWidth() / (numTicks + 1));\n localLeft = Math.round(localLeft / v) * v;\n\n this.supposedValueSlot = Math.round(localLeft / v);\n }\n\n this.scrubberLeft = this.constrainScrubber(localLeft);\n this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n\n this.updateValue();\n this.updateTrack();\n }\n\n @Listen('touchmove', { target: 'window' })\n handleTouchMove(event) {\n event.preventDefault();\n\n if (!this.scrubberGrabbed) {\n return;\n }\n\n const numTicks = parseInt(this.ticks);\n const trackRect = this.trackElement.getBoundingClientRect();\n let localLeft = event.touches[0].clientX - trackRect.left;\n\n this.supposedValueSlot = -1;\n\n if (this.useSnapping && numTicks > 0) {\n const v = Math.round(this.getTrackWidth() / (numTicks + 1));\n localLeft = Math.round(localLeft / v) * v;\n\n this.supposedValueSlot = Math.round(localLeft / v);\n }\n\n this.scrubberLeft = this.constrainScrubber(localLeft);\n this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n\n this.updateValue();\n this.updateTrack();\n }\n\n updateTrack() {\n const trackWidth = this.getTrackWidth();\n const percentageFilled = (this.scrubberLeft / trackWidth) * 100;\n\n this.trackFillElement.style.width = `${percentageFilled}%`;\n }\n\n dispatchChangeEvent() {\n this.sddsChange.emit({ value: this.value });\n }\n\n updateValue() {\n const trackWidth = this.getTrackWidth();\n\n /* if snapping (supposedValueSlot > 0) is enabled, make sure we display the supposed value (instead of maybe getting a -1/+1 depending on rounding) */\n if (this.supposedValueSlot > 0) {\n const supposedValue = this.tickValues[this.supposedValueSlot];\n this.value = `${supposedValue}`;\n } else {\n const percentage = this.scrubberLeft / trackWidth;\n this.value = `${Math.trunc(this.getMin() + percentage * (this.getMax() - this.getMin()))}`;\n }\n\n this.dispatchChangeEvent();\n }\n\n updateValueForced(value) {\n this.value = value;\n this.dispatchChangeEvent();\n }\n\n getMin() {\n return parseFloat(this.min);\n }\n\n getMax() {\n return parseFloat(this.max);\n }\n\n constrainScrubber(x) {\n const width = this.getTrackWidth();\n\n if (x < 0) {\n return 0;\n }\n\n if (x > width) {\n return width;\n }\n\n return x;\n }\n\n getTrackWidth() {\n const trackRect = this.trackElement.getBoundingClientRect();\n return trackRect.right - trackRect.left;\n }\n\n calculateScrubberLeftFromValue(value) {\n const initValue = value;\n const trackWidth = this.getTrackWidth();\n\n const normalizedValue = initValue - this.getMin();\n const normalizedMax = this.getMax() - this.getMin();\n\n const calculatedLeft = (normalizedValue / normalizedMax) * trackWidth;\n\n this.scrubberLeft = calculatedLeft;\n\n this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n }\n\n componentDidLoad() {\n if (!this.resizeObserverAdded) {\n this.resizeObserverAdded = true;\n\n const resizeObserver = new ResizeObserver((/* entries */) => {\n this.calculateScrubberLeftFromValue(this.value);\n this.updateTrack();\n });\n\n resizeObserver.observe(this.wrapperElement);\n }\n\n if (!this.eventListenersAdded) {\n this.eventListenersAdded = true;\n\n this.scrubberElement.addEventListener('mousedown', (event) => {\n event.preventDefault();\n this.grabScrubber(event.offsetX, event.offsetY);\n });\n\n this.scrubberElement.addEventListener('touchstart', (event) => {\n const rect = this.scrubberElement.getBoundingClientRect();\n const x = event.targetTouches[0].pageX - rect.left;\n const y = event.targetTouches[0].pageY - rect.top;\n this.grabScrubber(x, y);\n });\n\n if (this.useControls) {\n this.minusElement.addEventListener('click', () => {\n this.stepLeft();\n });\n\n this.plusElement.addEventListener('click', () => {\n this.stepRight();\n });\n }\n\n if (this.inputElement) {\n this.inputElement.addEventListener('keydown', (event) => {\n event.stopPropagation();\n\n if (event.key === 'Enter') {\n let newValue = parseInt(this.inputElement.value);\n\n if (newValue < this.getMin()) {\n newValue = this.getMin();\n } else if (newValue > this.getMax()) {\n newValue = this.getMax();\n }\n\n this.calculateScrubberLeftFromValue(newValue);\n this.updateValueForced(newValue);\n this.updateTrack();\n\n this.inputElement.blur();\n this.wrapperElement.focus();\n }\n });\n }\n }\n\n this.calculateScrubberLeftFromValue(this.value);\n this.updateTrack();\n }\n\n grabScrubber(xOffset, yOffset) {\n if (this.readonlyState) {\n return;\n }\n\n this.scrubberGrabPos = {\n x: xOffset,\n y: yOffset,\n };\n\n this.scrubberGrabbed = true;\n this.scrubberInnerElement.classList.add('pressed');\n }\n\n calculateInputSizeFromMax() {\n return this.max.length;\n }\n\n controlsStep(delta) {\n if (this.readonlyState || this.disabled) {\n return;\n }\n\n const trackWidth = this.getTrackWidth();\n const percentage = this.scrubberLeft / trackWidth;\n const numTicks = parseInt(this.ticks);\n\n let currentValue = this.getMin() + percentage * (this.getMax() - this.getMin());\n\n currentValue += delta;\n\n if (currentValue < this.getMin()) {\n currentValue = this.getMin();\n } else if (currentValue > this.getMax()) {\n currentValue = this.getMax();\n }\n\n this.value = `${currentValue}`;\n\n /* if snapping is enabled, instead just increment or decrement the current \"fixed\" value from our ticknumber array */\n if (this.useSnapping && numTicks > 0) {\n const stepDir = delta > 0 ? 1 : -1;\n this.supposedValueSlot += stepDir;\n\n if (this.supposedValueSlot < 0) {\n this.supposedValueSlot = 0;\n } else if (this.supposedValueSlot > numTicks + 1) {\n this.supposedValueSlot = numTicks + 1;\n }\n }\n\n this.calculateScrubberLeftFromValue(currentValue);\n this.updateTrack();\n this.updateValue();\n }\n\n stepLeft() {\n this.controlsStep(-parseInt(this.step));\n }\n\n stepRight() {\n this.controlsStep(parseInt(this.step));\n }\n\n componentWillLoad() {\n const numTicks = parseInt(this.ticks);\n\n if (numTicks > 0) {\n this.tickValues = [this.getMin()];\n\n const step = (this.getMax() - this.getMin()) / (numTicks + 1);\n\n for (let i = 1; i < numTicks + 1; i++) {\n this.tickValues.push(this.getMin() + Math.round(step * i));\n }\n\n this.tickValues.push(this.getMax());\n }\n\n if (this.disabled !== null) {\n this.disabledState = true;\n } else {\n this.disabledState = false;\n }\n\n if (this.readOnly !== null) {\n this.readonlyState = true;\n } else {\n this.readonlyState = false;\n }\n\n this.useInput = false;\n this.useControls = false;\n\n if (this.controls !== null) {\n this.useControls = true;\n } else if (this.input !== null) {\n this.useInput = true;\n }\n\n this.useSmall = false;\n\n if (this.scrubberSize === 'sm') {\n this.useSmall = true;\n }\n\n this.useSnapping = false;\n\n if (this.snap !== null) {\n this.useSnapping = true;\n }\n\n const min = this.getMin();\n const max = this.getMax();\n\n if (min > max) {\n console.warn(\n 'min-prop must have a higher value than max-prop for the component to work correctly.',\n );\n this.disabledState = true;\n }\n }\n\n render() {\n return (\n <div class={`sdds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}`}>\n <input\n ref={(el) => {\n this.nativeRangeInputElement = el as HTMLInputElement;\n }}\n class=\"sdds-slider-native-element\"\n type=\"range\"\n value={this.value}\n name={this.name}\n min={this.min}\n max={this.max}\n disabled={this.disabled}\n id={this.sliderId}\n ></input>\n\n <div\n class={`sdds-slider ${this.disabledState ? 'disabled' : ''} ${\n this.useSmall ? 'sdds-slider-small' : ''\n }`}\n ref={(el) => {\n this.wrapperElement = el as HTMLElement;\n }}\n >\n {this.useInput && (\n <div class=\"sdds-slider__input-values\">\n <div\n ref={(el) => {\n this.minusElement = el as HTMLElement;\n }}\n class=\"sdds-slider__input-value\"\n >\n {this.min}\n </div>\n </div>\n )}\n\n {this.useControls && (\n <div class=\"sdds-slider__controls\">\n <div\n ref={(el) => (this.minusElement = el as HTMLElement)}\n class=\"sdds-slider__control sdds-slider__control-minus\"\n >\n <sdds-icon name=\"minus\" size=\"16px\"></sdds-icon>\n </div>\n </div>\n )}\n\n <div class=\"sdds-slider-inner\">\n <label class={this.tickValues.length > 0 && 'offset'}>{this.label}</label>\n\n {this.tickValues.length > 0 && (\n <div class=\"sdds-slider__value-dividers-wrapper\">\n <div\n ref={(el) => {\n this.dividersElement = el as HTMLElement;\n }}\n class=\"sdds-slider__value-dividers\"\n >\n {this.tickValues.map((value) => (\n <div class=\"sdds-slider__value-divider\">\n {this.showTickNumbers && <span>{value}</span>}\n </div>\n ))}\n </div>\n </div>\n )}\n\n <div\n class=\"sdds-slider__track\"\n ref={(el) => {\n this.trackElement = el as HTMLElement;\n }}\n tabindex={this.disabled ? '-1' : '0'}\n >\n <div\n class=\"sdds-slider__track-fill\"\n ref={(el) => {\n this.trackFillElement = el as HTMLElement;\n }}\n ></div>\n\n <div\n class=\"sdds-slider__scrubber\"\n ref={(el) => {\n this.scrubberElement = el as HTMLElement;\n }}\n >\n {this.tooltip !== null && (\n <div class=\"sdds-slider__value\">\n {this.value}\n <svg\n width=\"18\"\n height=\"14\"\n viewBox=\"0 0 18 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z\"\n fill=\"#37414F\"\n />\n </svg>\n </div>\n )}\n\n <div\n class=\"sdds-slider__scrubber-inner\"\n ref={(el) => {\n this.scrubberInnerElement = el as HTMLElement;\n }}\n ></div>\n </div>\n </div>\n </div>\n\n {this.useInput && (\n <div class=\"sdds-slider__input-values\">\n <div\n ref={(el) => {\n this.minusElement = el as HTMLElement;\n }}\n class=\"sdds-slider__input-value\"\n >\n {this.max}\n </div>\n <div class=\"sdds-slider__input-field-wrapper\">\n <input\n onFocus={(e) => {\n if (this.readonlyState) {\n e.preventDefault();\n this.inputElement.blur();\n }\n }}\n size={this.calculateInputSizeFromMax()}\n class=\"sdds-slider__input-field\"\n value={this.value}\n ref={(el) => {\n this.inputElement = el as HTMLInputElement;\n }}\n />\n </div>\n </div>\n )}\n\n {this.useControls && (\n <div class=\"sdds-slider__controls\">\n <div\n ref={(el) => (this.plusElement = el as HTMLElement)}\n class=\"sdds-slider__control sdds-slider__control-plus\"\n >\n <sdds-icon name=\"plus\" size=\"16px\"></sdds-icon>\n </div>\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"]}