@scania/tegel 0.0.1-beta.7 → 0.0.2

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 (491) hide show
  1. package/dist/cjs/{index-e1c79686.js → index-b98965c7.js} +7 -0
  2. package/dist/cjs/loader.cjs.js +2 -2
  3. package/dist/cjs/sdds-accordion-item.cjs.entry.js +21 -21
  4. package/dist/cjs/sdds-accordion.cjs.entry.js +12 -12
  5. package/dist/cjs/sdds-badges.cjs.entry.js +45 -46
  6. package/dist/cjs/sdds-banner.cjs.entry.js +79 -0
  7. package/dist/cjs/sdds-block.cjs.entry.js +32 -0
  8. package/dist/cjs/sdds-body-cell_2.cjs.entry.js +160 -160
  9. package/dist/cjs/sdds-breadcrumb-item.cjs.entry.js +25 -0
  10. package/dist/cjs/sdds-breadcrumb.cjs.entry.js +23 -0
  11. package/dist/cjs/sdds-button.cjs.entry.js +25 -24
  12. package/dist/cjs/sdds-card.cjs.entry.js +56 -0
  13. package/dist/cjs/sdds-checkbox.cjs.entry.js +55 -0
  14. package/dist/cjs/sdds-datetime.cjs.entry.js +78 -49
  15. package/dist/cjs/sdds-dropdown-filter.cjs.entry.js +83 -83
  16. package/dist/cjs/sdds-dropdown_2.cjs.entry.js +327 -321
  17. package/dist/cjs/sdds-header-cell.cjs.entry.js +130 -132
  18. package/dist/cjs/sdds-icon.cjs.entry.js +30 -30
  19. package/dist/cjs/sdds-inline-tab.cjs.entry.js +22 -0
  20. package/dist/cjs/sdds-inline-tabs-fullbleed.cjs.entry.js +89 -87
  21. package/dist/cjs/sdds-inline-tabs.cjs.entry.js +212 -202
  22. package/dist/cjs/sdds-link.cjs.entry.js +28 -0
  23. package/dist/cjs/sdds-message.cjs.entry.js +41 -0
  24. package/dist/cjs/sdds-modal.cjs.entry.js +42 -40
  25. package/dist/cjs/sdds-navigation-tabs.cjs.entry.js +89 -86
  26. package/dist/cjs/sdds-popover-canvas.cjs.entry.js +74 -66
  27. package/dist/cjs/sdds-popover-menu.cjs.entry.js +75 -65
  28. package/dist/cjs/sdds-radio-button.cjs.entry.js +32 -0
  29. package/dist/cjs/sdds-slider.cjs.entry.js +348 -327
  30. package/dist/cjs/sdds-spinner.cjs.entry.js +11 -11
  31. package/dist/cjs/sdds-table-body-row-expandable.cjs.entry.js +73 -72
  32. package/dist/cjs/sdds-table-body.cjs.entry.js +235 -235
  33. package/dist/cjs/sdds-table-footer.cjs.entry.js +155 -156
  34. package/dist/cjs/sdds-table-header.cjs.entry.js +90 -91
  35. package/dist/cjs/sdds-table-toolbar.cjs.entry.js +56 -57
  36. package/dist/cjs/sdds-table.cjs.entry.js +58 -59
  37. package/dist/cjs/sdds-textarea.cjs.entry.js +57 -44
  38. package/dist/cjs/sdds-textfield.cjs.entry.js +73 -64
  39. package/dist/cjs/sdds-toast.cjs.entry.js +86 -0
  40. package/dist/cjs/sdds-toggle.cjs.entry.js +44 -0
  41. package/dist/cjs/sdds-tooltip.cjs.entry.js +94 -85
  42. package/dist/cjs/tegel.cjs.js +2 -2
  43. package/dist/collection/collection-manifest.json +12 -0
  44. package/dist/collection/components/accordion/accordion-item/accordion-item.css +30 -11
  45. package/dist/collection/components/accordion/accordion-item/accordion-item.js +142 -142
  46. package/dist/collection/components/accordion/accordion.css +2 -16
  47. package/dist/collection/components/accordion/accordion.js +62 -62
  48. package/dist/collection/components/accordion/accordion.stories.js +90 -0
  49. package/dist/collection/components/badge/badge.stories.js +102 -0
  50. package/dist/collection/components/badge/badges.css +2 -2
  51. package/dist/collection/components/badge/badges.js +147 -150
  52. package/dist/collection/components/banner/banner.stories.js +92 -0
  53. package/dist/collection/components/banner/sdds-banner.css +88 -0
  54. package/dist/collection/components/banner/sdds-banner.js +330 -0
  55. package/dist/collection/components/banner/sdds-banner.stories.js +129 -0
  56. package/dist/collection/components/block/block-native.stories.js +48 -0
  57. package/dist/collection/components/block/sdds-block.css +22 -0
  58. package/dist/collection/components/block/sdds-block.js +55 -0
  59. package/dist/collection/components/block/sdds-block.stories.js +48 -0
  60. package/dist/collection/components/breadcrumb/breadcrumb-component.css +30 -0
  61. package/dist/collection/components/breadcrumb/breadcrumb-item/breadcrumb-item.css +43 -0
  62. package/dist/collection/components/breadcrumb/breadcrumb-item/breadcrumb-item.js +83 -0
  63. package/dist/collection/components/breadcrumb/breadcrumb.js +22 -0
  64. package/dist/collection/components/breadcrumb/breadcrumb.stories.js +26 -0
  65. package/dist/collection/components/button/button-component.js +152 -151
  66. package/dist/collection/components/button/button-native.stories.js +187 -0
  67. package/dist/collection/components/button/button-webcomponent.stories.js +189 -0
  68. package/dist/collection/components/button/button.css +63 -51
  69. package/dist/collection/components/card/card.stories.js +167 -0
  70. package/dist/collection/components/card/sdds-card.css +78 -0
  71. package/dist/collection/components/card/sdds-card.js +276 -0
  72. package/dist/collection/components/card/sdds-card.stories.js +168 -0
  73. package/dist/collection/components/checkbox/checkbox.stories.js +54 -0
  74. package/dist/collection/components/checkbox/sdds-checkbox.css +95 -0
  75. package/dist/collection/components/checkbox/sdds-checkbox.js +239 -0
  76. package/dist/collection/components/checkbox/sdds-checkbox.stories.js +71 -0
  77. package/dist/collection/components/chips/chips.stories.js +106 -0
  78. package/dist/collection/components/data-table/native-table.stories.js +160 -0
  79. package/dist/collection/components/data-table/table/table.js +252 -253
  80. package/dist/collection/components/data-table/table-body/table-body.css +1 -1
  81. package/dist/collection/components/data-table/table-body/table-body.js +425 -425
  82. package/dist/collection/components/data-table/table-body-cell/table-body-cell.css +3 -3
  83. package/dist/collection/components/data-table/table-body-cell/table-body-cell.js +168 -169
  84. package/dist/collection/components/data-table/table-body-row/table-body-row.css +24 -45
  85. package/dist/collection/components/data-table/table-body-row/table-body-row.js +165 -164
  86. package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.css +23 -24
  87. package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.js +156 -155
  88. package/dist/collection/components/data-table/table-component-basic.stories.js +161 -0
  89. package/dist/collection/components/data-table/table-component-batch-actions.stories.js +128 -0
  90. package/dist/collection/components/data-table/table-component-bodydata.stories.js +58 -0
  91. package/dist/collection/components/data-table/table-component-custom-width.stories.js +197 -0
  92. package/dist/collection/components/data-table/table-component-event-listeners.stories.js +151 -0
  93. package/dist/collection/components/data-table/table-component-expandable-rows.stories.js +135 -0
  94. package/dist/collection/components/data-table/table-component-filtering.stories.js +137 -0
  95. package/dist/collection/components/data-table/table-component-multiselect.stories.js +158 -0
  96. package/dist/collection/components/data-table/table-component-pagination.stories.js +127 -0
  97. package/dist/collection/components/data-table/table-component-sorting.stories.js +126 -0
  98. package/dist/collection/components/data-table/table-footer/table-footer.css +9 -5
  99. package/dist/collection/components/data-table/table-footer/table-footer.js +354 -355
  100. package/dist/collection/components/data-table/table-header/table-header.css +22 -36
  101. package/dist/collection/components/data-table/table-header/table-header.js +152 -153
  102. package/dist/collection/components/data-table/table-header-cell/table-header-cell.css +9 -8
  103. package/dist/collection/components/data-table/table-header-cell/table-header-cell.js +317 -320
  104. package/dist/collection/components/data-table/table-toolbar/table-toolbar.css +7 -6
  105. package/dist/collection/components/data-table/table-toolbar/table-toolbar.js +141 -142
  106. package/dist/collection/components/datetime/datetime.css +68 -58
  107. package/dist/collection/components/datetime/datetime.js +344 -243
  108. package/dist/collection/components/datetime/datetime.stories.js +207 -0
  109. package/dist/collection/components/divider/divider.stories.js +133 -0
  110. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.js +339 -339
  111. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js +130 -0
  112. package/dist/collection/components/dropdown/dropdown-native.stories.js +90 -0
  113. package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js +185 -185
  114. package/dist/collection/components/dropdown/dropdown-wc-default.stories.js +167 -0
  115. package/dist/collection/components/dropdown/dropdown-wc-multiselect.stories.js +146 -0
  116. package/dist/collection/components/dropdown/dropdown.css +146 -86
  117. package/dist/collection/components/dropdown/dropdown.js +576 -553
  118. package/dist/collection/components/footer/footer.stories.js +117 -0
  119. package/dist/collection/components/header/header-all.stories.js +217 -0
  120. package/dist/collection/components/header/header-default.stories.js +47 -0
  121. package/dist/collection/components/header/header-inline.stories.js +113 -0
  122. package/dist/collection/components/header/header-search.stories.js +263 -0
  123. package/dist/collection/components/header/header-toolbar.stories.js +204 -0
  124. package/dist/collection/components/icon/icon-font.stories.js +57 -0
  125. package/dist/collection/components/icon/icon-web-component.stories.js +51 -0
  126. package/dist/collection/components/icon/icon.js +89 -89
  127. package/dist/collection/components/link/link.stories.js +45 -0
  128. package/dist/collection/components/link/sdds-link.css +36 -0
  129. package/dist/collection/components/link/sdds-link.js +121 -0
  130. package/dist/collection/components/link/sdds-link.stories.js +70 -0
  131. package/dist/collection/components/message/message.stories.js +108 -0
  132. package/dist/collection/components/message/sdds-message.css +70 -0
  133. package/dist/collection/components/message/sdds-message.js +135 -0
  134. package/dist/collection/components/message/sdds-message.stories.js +106 -0
  135. package/dist/collection/components/modal/modal-native.stories.js +129 -0
  136. package/dist/collection/components/modal/modal-webcomponent.stories.js +86 -0
  137. package/dist/collection/components/modal/modal.css +63 -37
  138. package/dist/collection/components/modal/modal.js +148 -146
  139. package/dist/collection/components/popover-canvas/popover-canvas.css +3 -3
  140. package/dist/collection/components/popover-canvas/popover-canvas.js +219 -190
  141. package/dist/collection/components/popover-canvas/popover-canvas.stories.js +89 -0
  142. package/dist/collection/components/popover-menu/popover-menu-icons.stories.js +121 -0
  143. package/dist/collection/components/popover-menu/popover-menu.css +2 -2
  144. package/dist/collection/components/popover-menu/popover-menu.js +220 -189
  145. package/dist/collection/components/popover-menu/popover-menu.stories.js +114 -0
  146. package/dist/collection/components/radio-button/radio-button-component.css +123 -0
  147. package/dist/collection/components/radio-button/radio-button-component.stories.js +91 -0
  148. package/dist/collection/components/radio-button/radio-button.js +160 -0
  149. package/dist/collection/components/radio-button/radio-button.stories.js +68 -0
  150. package/dist/collection/components/side-menu/side-menu.stories.js +182 -0
  151. package/dist/collection/components/slider/slider.css +56 -19
  152. package/dist/collection/components/slider/slider.js +721 -682
  153. package/dist/collection/components/slider/slider.stories.js +208 -0
  154. package/dist/collection/components/spinner/spinner.js +61 -61
  155. package/dist/collection/components/spinner/spinner.stories.js +59 -0
  156. package/dist/collection/components/stepper/stepper.stories.js +139 -0
  157. package/dist/collection/components/tabs/inline-tabs-default/inline-tab/inline-tab.css +3 -0
  158. package/dist/collection/components/tabs/inline-tabs-default/inline-tab/inline-tab.js +80 -0
  159. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.css +21 -24
  160. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.js +312 -302
  161. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js +71 -0
  162. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.css +36 -67
  163. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js +128 -126
  164. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js +46 -0
  165. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +22 -18
  166. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js +128 -103
  167. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js +32 -0
  168. package/dist/collection/components/textarea/textarea.css +60 -45
  169. package/dist/collection/components/textarea/textarea.js +394 -328
  170. package/dist/collection/components/textarea/textarea.stories.js +169 -0
  171. package/dist/collection/components/textfield/textfield.css +92 -84
  172. package/dist/collection/components/textfield/textfield.js +430 -350
  173. package/dist/collection/components/textfield/textfield.stories.js +239 -0
  174. package/dist/collection/components/toast/sdds-toast.css +102 -0
  175. package/dist/collection/components/toast/sdds-toast.js +256 -0
  176. package/dist/collection/components/toast/sdds-toast.stories.js +86 -0
  177. package/dist/collection/components/toast/toast.stories.js +129 -0
  178. package/dist/collection/components/toggle/sdds-toggle.css +104 -0
  179. package/dist/collection/components/toggle/sdds-toggle.js +261 -0
  180. package/dist/collection/components/toggle/sdds-toggle.stories.js +92 -0
  181. package/dist/collection/components/toggle/toggle.stories.js +72 -0
  182. package/dist/collection/components/tooltip/tooltip.css +3 -3
  183. package/dist/collection/components/tooltip/tooltip.js +229 -200
  184. package/dist/collection/components/tooltip/tooltip.stories.js +115 -0
  185. package/dist/collection/components/utility/colour/background-color.stories.js +96 -0
  186. package/dist/collection/components/utility/colour/text-color.stories.js +94 -0
  187. package/dist/collection/foundations-stories/colour/colour-brand.stories.js +38 -0
  188. package/dist/collection/foundations-stories/colour/colour-scales.stories.js +71 -0
  189. package/dist/collection/foundations-stories/colour/colour-semantic.stories.js +40 -0
  190. package/dist/collection/foundations-stories/grid/grid.stories.js +386 -0
  191. package/dist/collection/foundations-stories/spacing/spacing-element.stories.js +100 -0
  192. package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js +94 -0
  193. package/dist/collection/foundations-stories/typography/typography-body.stories.js +16 -0
  194. package/dist/collection/foundations-stories/typography/typography-detail.stories.js +17 -0
  195. package/dist/collection/foundations-stories/typography/typography-headline.stories.js +39 -0
  196. package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js +12 -0
  197. package/dist/collection/index.js +1 -1
  198. package/dist/collection/utils/utils.js +12 -12
  199. package/dist/components/dropdown-option.js +94 -94
  200. package/dist/components/dropdown.js +296 -289
  201. package/dist/components/icon.js +49 -49
  202. package/dist/components/index.d.ts +12 -0
  203. package/dist/components/index.js +12 -0
  204. package/dist/components/sdds-accordion-item.js +46 -46
  205. package/dist/components/sdds-accordion.js +29 -29
  206. package/dist/components/sdds-badges.js +66 -67
  207. package/dist/components/sdds-banner.d.ts +11 -0
  208. package/dist/components/sdds-banner.js +119 -0
  209. package/dist/components/sdds-block.d.ts +11 -0
  210. package/dist/components/sdds-block.js +48 -0
  211. package/dist/components/sdds-breadcrumb-item.d.ts +11 -0
  212. package/dist/components/sdds-breadcrumb-item.js +43 -0
  213. package/dist/components/sdds-breadcrumb.d.ts +11 -0
  214. package/dist/components/sdds-breadcrumb.js +37 -0
  215. package/dist/components/sdds-button.js +48 -47
  216. package/dist/components/sdds-card.d.ts +11 -0
  217. package/dist/components/sdds-card.js +84 -0
  218. package/dist/components/sdds-checkbox.d.ts +11 -0
  219. package/dist/components/sdds-checkbox.js +76 -0
  220. package/dist/components/sdds-datetime.js +112 -73
  221. package/dist/components/sdds-dropdown-filter.js +127 -127
  222. package/dist/components/sdds-header-cell.js +161 -164
  223. package/dist/components/sdds-inline-tab.d.ts +11 -0
  224. package/dist/components/sdds-inline-tab.js +40 -0
  225. package/dist/components/sdds-inline-tabs-fullbleed.js +108 -106
  226. package/dist/components/sdds-inline-tabs.js +236 -226
  227. package/dist/components/sdds-link.d.ts +11 -0
  228. package/dist/components/sdds-link.js +6 -0
  229. package/dist/components/sdds-link2.js +44 -0
  230. package/dist/components/sdds-message.d.ts +11 -0
  231. package/dist/components/sdds-message.js +67 -0
  232. package/dist/components/sdds-modal.js +68 -60
  233. package/dist/components/sdds-navigation-tabs.js +108 -104
  234. package/dist/components/sdds-popover-canvas.js +98 -87
  235. package/dist/components/sdds-popover-menu.js +99 -86
  236. package/dist/components/sdds-radio-button.d.ts +11 -0
  237. package/dist/components/sdds-radio-button.js +52 -0
  238. package/dist/components/sdds-slider.js +385 -357
  239. package/dist/components/sdds-spinner.js +27 -27
  240. package/dist/components/sdds-table-body-row-expandable.js +96 -95
  241. package/dist/components/sdds-table-body.js +281 -281
  242. package/dist/components/sdds-table-footer.js +186 -187
  243. package/dist/components/sdds-table-header.js +115 -116
  244. package/dist/components/sdds-table-toolbar.js +78 -79
  245. package/dist/components/sdds-table.js +81 -82
  246. package/dist/components/sdds-textarea.js +92 -73
  247. package/dist/components/sdds-textfield.js +109 -93
  248. package/dist/components/sdds-toast.d.ts +11 -0
  249. package/dist/components/sdds-toast.js +117 -0
  250. package/dist/components/sdds-toggle.d.ts +11 -0
  251. package/dist/components/sdds-toggle.js +69 -0
  252. package/dist/components/sdds-tooltip.js +117 -106
  253. package/dist/components/table-body-cell.js +95 -96
  254. package/dist/components/table-body-row.js +114 -113
  255. package/dist/esm/{index-b67b15a6.js → index-32571711.js} +7 -0
  256. package/dist/esm/loader.js +2 -2
  257. package/dist/esm/polyfills/core-js.js +0 -0
  258. package/dist/esm/polyfills/dom.js +0 -0
  259. package/dist/esm/polyfills/es5-html-element.js +0 -0
  260. package/dist/esm/polyfills/index.js +0 -0
  261. package/dist/esm/polyfills/system.js +0 -0
  262. package/dist/esm/sdds-accordion-item.entry.js +21 -21
  263. package/dist/esm/sdds-accordion.entry.js +12 -12
  264. package/dist/esm/sdds-badges.entry.js +45 -46
  265. package/dist/esm/sdds-banner.entry.js +75 -0
  266. package/dist/esm/sdds-block.entry.js +28 -0
  267. package/dist/esm/sdds-body-cell_2.entry.js +160 -160
  268. package/dist/esm/sdds-breadcrumb-item.entry.js +21 -0
  269. package/dist/esm/sdds-breadcrumb.entry.js +19 -0
  270. package/dist/esm/sdds-button.entry.js +25 -24
  271. package/dist/esm/sdds-card.entry.js +52 -0
  272. package/dist/esm/sdds-checkbox.entry.js +51 -0
  273. package/dist/esm/sdds-datetime.entry.js +78 -49
  274. package/dist/esm/sdds-dropdown-filter.entry.js +83 -83
  275. package/dist/esm/sdds-dropdown_2.entry.js +327 -321
  276. package/dist/esm/sdds-header-cell.entry.js +130 -132
  277. package/dist/esm/sdds-icon.entry.js +30 -30
  278. package/dist/esm/sdds-inline-tab.entry.js +18 -0
  279. package/dist/esm/sdds-inline-tabs-fullbleed.entry.js +89 -87
  280. package/dist/esm/sdds-inline-tabs.entry.js +212 -202
  281. package/dist/esm/sdds-link.entry.js +24 -0
  282. package/dist/esm/sdds-message.entry.js +37 -0
  283. package/dist/esm/sdds-modal.entry.js +42 -40
  284. package/dist/esm/sdds-navigation-tabs.entry.js +89 -86
  285. package/dist/esm/sdds-popover-canvas.entry.js +74 -66
  286. package/dist/esm/sdds-popover-menu.entry.js +75 -65
  287. package/dist/esm/sdds-radio-button.entry.js +28 -0
  288. package/dist/esm/sdds-slider.entry.js +348 -327
  289. package/dist/esm/sdds-spinner.entry.js +11 -11
  290. package/dist/esm/sdds-table-body-row-expandable.entry.js +73 -72
  291. package/dist/esm/sdds-table-body.entry.js +235 -235
  292. package/dist/esm/sdds-table-footer.entry.js +155 -156
  293. package/dist/esm/sdds-table-header.entry.js +90 -91
  294. package/dist/esm/sdds-table-toolbar.entry.js +56 -57
  295. package/dist/esm/sdds-table.entry.js +58 -59
  296. package/dist/esm/sdds-textarea.entry.js +57 -44
  297. package/dist/esm/sdds-textfield.entry.js +73 -64
  298. package/dist/esm/sdds-toast.entry.js +82 -0
  299. package/dist/esm/sdds-toggle.entry.js +40 -0
  300. package/dist/esm/sdds-tooltip.entry.js +94 -85
  301. package/dist/esm/tegel.js +2 -2
  302. package/dist/tegel/p-05d3cfc8.entry.js +1 -0
  303. package/dist/tegel/p-13a25c7f.entry.js +1 -0
  304. package/dist/tegel/p-13b783f1.js +2 -0
  305. package/dist/tegel/p-1dda8de9.entry.js +1 -0
  306. package/dist/tegel/p-2248b59e.entry.js +1 -0
  307. package/dist/tegel/p-232e5c9a.entry.js +1 -0
  308. package/dist/tegel/p-2375f0eb.entry.js +1 -0
  309. package/dist/tegel/p-29deedc6.entry.js +1 -0
  310. package/dist/tegel/p-2f52021b.entry.js +1 -0
  311. package/dist/tegel/p-3344582d.entry.js +1 -0
  312. package/dist/tegel/{p-040efb32.entry.js → p-4b14324d.entry.js} +1 -1
  313. package/dist/tegel/p-561fbe77.entry.js +1 -0
  314. package/dist/tegel/p-5a215722.entry.js +1 -0
  315. package/dist/tegel/p-5f7b1539.entry.js +1 -0
  316. package/dist/tegel/p-6f382b38.entry.js +1 -0
  317. package/dist/tegel/p-765e2719.entry.js +1 -0
  318. package/dist/tegel/p-76f60546.entry.js +1 -0
  319. package/dist/tegel/p-7a5244b6.entry.js +1 -0
  320. package/dist/tegel/p-816ff5f7.entry.js +1 -0
  321. package/dist/tegel/p-81d2d57b.entry.js +1 -0
  322. package/dist/tegel/p-87650f36.entry.js +1 -0
  323. package/dist/tegel/p-8e6f885c.entry.js +1 -0
  324. package/dist/tegel/p-8e9dcc20.entry.js +1 -0
  325. package/dist/tegel/p-997fc919.entry.js +1 -0
  326. package/dist/tegel/p-9a057c9a.entry.js +1 -0
  327. package/dist/tegel/p-9a95e92c.entry.js +1 -0
  328. package/dist/tegel/p-a75ff060.entry.js +1 -0
  329. package/dist/tegel/p-bf1216f9.entry.js +1 -0
  330. package/dist/tegel/p-bf597564.entry.js +1 -0
  331. package/dist/tegel/p-d2217bf0.entry.js +1 -0
  332. package/dist/tegel/p-e335137d.entry.js +1 -0
  333. package/dist/tegel/p-e34cce75.entry.js +1 -0
  334. package/dist/tegel/p-e55d09f2.entry.js +1 -0
  335. package/dist/tegel/p-ebbffa8a.entry.js +1 -0
  336. package/dist/tegel/{p-a5919930.entry.js → p-ed076d47.entry.js} +1 -1
  337. package/dist/tegel/p-ef887910.entry.js +1 -0
  338. package/dist/tegel/p-f4b70868.entry.js +1 -0
  339. package/dist/tegel/p-f52a0b63.entry.js +1 -0
  340. package/dist/tegel/p-f5bf214b.entry.js +1 -0
  341. package/dist/tegel/p-fd1b5923.entry.js +1 -0
  342. package/dist/tegel/tegel.css +13 -5
  343. package/dist/tegel/tegel.esm.js +1 -1
  344. package/dist/types/components/accordion/accordion-item/accordion-item.d.ts +17 -17
  345. package/dist/types/components/accordion/accordion.d.ts +7 -7
  346. package/dist/types/components/accordion/accordion.stories.d.ts +77 -0
  347. package/dist/types/components/badge/badge.stories.d.ts +66 -0
  348. package/dist/types/components/badge/badges.d.ts +16 -16
  349. package/dist/types/components/banner/banner.stories.d.ts +68 -0
  350. package/dist/types/components/banner/sdds-banner.d.ts +48 -0
  351. package/dist/types/components/banner/sdds-banner.stories.d.ts +109 -0
  352. package/dist/types/components/block/block-native.stories.d.ts +31 -0
  353. package/dist/types/components/block/sdds-block.d.ts +9 -0
  354. package/dist/types/components/block/sdds-block.stories.d.ts +32 -0
  355. package/dist/types/components/breadcrumb/breadcrumb-item/breadcrumb-item.d.ts +9 -0
  356. package/dist/types/components/breadcrumb/breadcrumb.d.ts +5 -0
  357. package/dist/types/components/breadcrumb/breadcrumb.stories.d.ts +12 -0
  358. package/dist/types/components/button/button-component.d.ts +18 -15
  359. package/dist/types/components/button/button-native.stories.d.ts +148 -0
  360. package/dist/types/components/button/button-webcomponent.stories.d.ts +147 -0
  361. package/dist/types/components/card/card.stories.d.ts +138 -0
  362. package/dist/types/components/card/sdds-card.d.ts +39 -0
  363. package/dist/types/components/card/sdds-card.stories.d.ts +139 -0
  364. package/dist/types/components/checkbox/checkbox.stories.d.ts +39 -0
  365. package/dist/types/components/checkbox/sdds-checkbox.d.ts +38 -0
  366. package/dist/types/components/checkbox/sdds-checkbox.stories.d.ts +40 -0
  367. package/dist/types/components/chips/chips.stories.d.ts +77 -0
  368. package/dist/types/components/data-table/native-table.stories.d.ts +133 -0
  369. package/dist/types/components/data-table/table/table.d.ts +47 -47
  370. package/dist/types/components/data-table/table-body/table-body.d.ts +54 -54
  371. package/dist/types/components/data-table/table-body-cell/table-body-cell.d.ts +24 -24
  372. package/dist/types/components/data-table/table-body-row/table-body-row.d.ts +27 -27
  373. package/dist/types/components/data-table/table-body-row-expandable/table-body-row-expandable.d.ts +27 -27
  374. package/dist/types/components/data-table/table-component-basic.stories.d.ts +101 -0
  375. package/dist/types/components/data-table/table-component-batch-actions.stories.d.ts +99 -0
  376. package/dist/types/components/data-table/table-component-bodydata.stories.d.ts +38 -0
  377. package/dist/types/components/data-table/table-component-custom-width.stories.d.ts +148 -0
  378. package/dist/types/components/data-table/table-component-event-listeners.stories.d.ts +88 -0
  379. package/dist/types/components/data-table/table-component-expandable-rows.stories.d.ts +88 -0
  380. package/dist/types/components/data-table/table-component-filtering.stories.d.ts +101 -0
  381. package/dist/types/components/data-table/table-component-multiselect.stories.d.ts +101 -0
  382. package/dist/types/components/data-table/table-component-pagination.stories.d.ts +101 -0
  383. package/dist/types/components/data-table/table-component-sorting.stories.d.ts +100 -0
  384. package/dist/types/components/data-table/table-footer/table-footer.d.ts +50 -50
  385. package/dist/types/components/data-table/table-header/table-header.d.ts +27 -27
  386. package/dist/types/components/data-table/table-header-cell/table-header-cell.d.ts +44 -45
  387. package/dist/types/components/data-table/table-toolbar/table-toolbar.d.ts +22 -22
  388. package/dist/types/components/datetime/datetime.d.ts +42 -32
  389. package/dist/types/components/datetime/datetime.stories.d.ts +127 -0
  390. package/dist/types/components/divider/divider.stories.d.ts +65 -0
  391. package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.d.ts +42 -42
  392. package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.stories.d.ts +73 -0
  393. package/dist/types/components/dropdown/dropdown-native.stories.d.ts +57 -0
  394. package/dist/types/components/dropdown/dropdown-option/dropdown-option.d.ts +19 -19
  395. package/dist/types/components/dropdown/dropdown-wc-default.stories.d.ts +129 -0
  396. package/dist/types/components/dropdown/dropdown-wc-multiselect.stories.d.ts +115 -0
  397. package/dist/types/components/dropdown/dropdown.d.ts +58 -56
  398. package/dist/types/components/footer/footer.stories.d.ts +45 -0
  399. package/dist/types/components/header/header-all.stories.d.ts +29 -0
  400. package/dist/types/components/header/header-default.stories.d.ts +29 -0
  401. package/dist/types/components/header/header-inline.stories.d.ts +29 -0
  402. package/dist/types/components/header/header-search.stories.d.ts +29 -0
  403. package/dist/types/components/header/header-toolbar.stories.d.ts +29 -0
  404. package/dist/types/components/icon/icon-font.stories.d.ts +38 -0
  405. package/dist/types/components/icon/icon-web-component.stories.d.ts +38 -0
  406. package/dist/types/components/icon/icon.d.ts +12 -12
  407. package/dist/types/components/link/link.stories.d.ts +33 -0
  408. package/dist/types/components/link/sdds-link.d.ts +13 -0
  409. package/dist/types/components/link/sdds-link.stories.d.ts +58 -0
  410. package/dist/types/components/message/message.stories.d.ts +69 -0
  411. package/dist/types/components/message/sdds-message.d.ts +14 -0
  412. package/dist/types/components/message/sdds-message.stories.d.ts +87 -0
  413. package/dist/types/components/modal/modal-native.stories.d.ts +59 -0
  414. package/dist/types/components/modal/modal-webcomponent.stories.d.ts +52 -0
  415. package/dist/types/components/modal/modal.d.ts +17 -16
  416. package/dist/types/components/popover-canvas/popover-canvas.d.ts +24 -18
  417. package/dist/types/components/popover-canvas/popover-canvas.stories.d.ts +25 -0
  418. package/dist/types/components/popover-menu/popover-menu-icons.stories.d.ts +27 -0
  419. package/dist/types/components/popover-menu/popover-menu.d.ts +24 -18
  420. package/dist/types/components/popover-menu/popover-menu.stories.d.ts +27 -0
  421. package/dist/types/components/radio-button/radio-button-component.stories.d.ts +39 -0
  422. package/dist/types/components/radio-button/radio-button.d.ts +26 -0
  423. package/dist/types/components/radio-button/radio-button.stories.d.ts +33 -0
  424. package/dist/types/components/side-menu/side-menu.stories.d.ts +42 -0
  425. package/dist/types/components/slider/slider.d.ts +86 -82
  426. package/dist/types/components/slider/slider.stories.d.ts +169 -0
  427. package/dist/types/components/spinner/spinner.d.ts +7 -7
  428. package/dist/types/components/spinner/spinner.stories.d.ts +37 -0
  429. package/dist/types/components/stepper/stepper.stories.d.ts +56 -0
  430. package/dist/types/components/tabs/inline-tabs-default/inline-tab/inline-tab.d.ts +6 -0
  431. package/dist/types/components/tabs/inline-tabs-default/inline-tabs.d.ts +40 -41
  432. package/dist/types/components/tabs/inline-tabs-default/inline-tabs.stories.d.ts +49 -0
  433. package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.d.ts +20 -20
  434. package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.d.ts +30 -0
  435. package/dist/types/components/tabs/navigation-tabs/navigation-tabs.d.ts +20 -18
  436. package/dist/types/components/tabs/navigation-tabs/navigation-tabs.stories.d.ts +13 -0
  437. package/dist/types/components/textarea/textarea.d.ts +48 -41
  438. package/dist/types/components/textarea/textarea.stories.d.ts +116 -0
  439. package/dist/types/components/textfield/textfield.d.ts +52 -42
  440. package/dist/types/components/textfield/textfield.stories.d.ts +180 -0
  441. package/dist/types/components/toast/sdds-toast.d.ts +36 -0
  442. package/dist/types/components/toast/sdds-toast.stories.d.ts +56 -0
  443. package/dist/types/components/toast/toast.stories.d.ts +69 -0
  444. package/dist/types/components/toggle/sdds-toggle.d.ts +34 -0
  445. package/dist/types/components/toggle/sdds-toggle.stories.d.ts +74 -0
  446. package/dist/types/components/toggle/toggle.stories.d.ts +55 -0
  447. package/dist/types/components/tooltip/tooltip.d.ts +24 -20
  448. package/dist/types/components/tooltip/tooltip.stories.d.ts +54 -0
  449. package/dist/types/components/utility/colour/background-color.stories.d.ts +58 -0
  450. package/dist/types/components/utility/colour/text-color.stories.d.ts +58 -0
  451. package/dist/types/components.d.ts +939 -48
  452. package/dist/types/foundations-stories/colour/colour-brand.stories.d.ts +13 -0
  453. package/dist/types/foundations-stories/colour/colour-scales.stories.d.ts +13 -0
  454. package/dist/types/foundations-stories/colour/colour-semantic.stories.d.ts +13 -0
  455. package/dist/types/foundations-stories/grid/grid.stories.d.ts +35 -0
  456. package/dist/types/foundations-stories/spacing/spacing-element.stories.d.ts +8 -0
  457. package/dist/types/foundations-stories/spacing/spacing-layout.stories.d.ts +8 -0
  458. package/dist/types/foundations-stories/typography/typography-body.stories.d.ts +8 -0
  459. package/dist/types/foundations-stories/typography/typography-detail.stories.d.ts +8 -0
  460. package/dist/types/foundations-stories/typography/typography-headline.stories.d.ts +21 -0
  461. package/dist/types/foundations-stories/typography/typography-paragraph.stories.d.ts +8 -0
  462. package/dist/types/index.d.ts +1 -1
  463. package/dist/types/utils/utils.d.ts +2 -2
  464. package/package.json +1 -1
  465. package/readme.md +41 -8
  466. package/dist/tegel/p-12ca5cfa.entry.js +0 -1
  467. package/dist/tegel/p-157e1618.js +0 -2
  468. package/dist/tegel/p-1fe61cf6.entry.js +0 -1
  469. package/dist/tegel/p-2f376504.entry.js +0 -1
  470. package/dist/tegel/p-44ced895.entry.js +0 -1
  471. package/dist/tegel/p-4880f03d.entry.js +0 -1
  472. package/dist/tegel/p-4aba73a3.entry.js +0 -1
  473. package/dist/tegel/p-4b58a02c.entry.js +0 -1
  474. package/dist/tegel/p-4cb85347.entry.js +0 -1
  475. package/dist/tegel/p-52031b5a.entry.js +0 -1
  476. package/dist/tegel/p-677baf7f.entry.js +0 -1
  477. package/dist/tegel/p-71797eaf.entry.js +0 -1
  478. package/dist/tegel/p-7373284c.entry.js +0 -1
  479. package/dist/tegel/p-7451779b.entry.js +0 -1
  480. package/dist/tegel/p-77aeea3b.entry.js +0 -1
  481. package/dist/tegel/p-8582d6a7.entry.js +0 -1
  482. package/dist/tegel/p-96021bd0.entry.js +0 -1
  483. package/dist/tegel/p-9d8caf51.entry.js +0 -1
  484. package/dist/tegel/p-b01cface.entry.js +0 -1
  485. package/dist/tegel/p-bf896643.entry.js +0 -1
  486. package/dist/tegel/p-c311725c.entry.js +0 -1
  487. package/dist/tegel/p-cf72dfd9.entry.js +0 -1
  488. package/dist/tegel/p-d91caec6.entry.js +0 -1
  489. package/dist/tegel/p-e10eec33.entry.js +0 -1
  490. package/dist/tegel/p-f2262a69.entry.js +0 -1
  491. package/dist/tegel/p-f2f7aa45.entry.js +0 -1
@@ -1,355 +1,354 @@
1
- import { h, Host, } from '@stencil/core';
2
- const relevantTableProps = [
3
- 'compactDesign',
4
- 'noMinWidth',
5
- 'verticalDividers',
6
- 'whiteBackground',
7
- ];
8
- function removeShakeAnimation(e) {
9
- e.target.classList.remove('sdds-table__page-selector-input--shake');
10
- }
11
- export class TableFooter {
12
- constructor() {
13
- this.paginationPrev = (event) => {
14
- event.preventDefault();
15
- // Enable lowering until 1st page
16
- if (this.paginationValue >= 2) {
17
- this.paginationValue--;
18
- this.runPagination();
19
- }
20
- };
21
- this.paginationNext = (event) => {
22
- event.preventDefault();
23
- // Enable increasing until the max number of pages
24
- if (this.paginationValue <= this.numberOfPages) {
25
- this.paginationValue++;
26
- this.runPagination();
27
- }
28
- };
29
- this.runPagination = () => {
30
- if (!this.disablePaginationFunction) {
31
- // grab all rows in body
32
- const dataRowsPagination = this.host.parentNode
33
- .querySelector('sdds-table-body')
34
- .querySelectorAll('.sdds-table__row');
35
- dataRowsPagination.forEach((item, i) => {
36
- // for making logic easier 1st result, 2nd result...
37
- const index = i + 1;
38
- if (this.tempPaginationDisable) {
39
- this.paginationValue = 1;
40
- }
41
- else {
42
- const lastResult = this.rowsPerPage * this.paginationValue;
43
- const firstResult = lastResult - this.rowsPerPage;
44
- if (index > firstResult && index <= lastResult) {
45
- item.classList.remove('sdds-table__row--hidden');
46
- }
47
- else {
48
- item.classList.add('sdds-table__row--hidden');
49
- }
50
- }
51
- });
52
- }
53
- };
54
- this.clientPaginationPrev = (event) => {
55
- event.preventDefault();
56
- // Enable lowering until 1st page
57
- if (this.clientPaginationValue >= 2) {
58
- this.clientPaginationValue--;
59
- this.sendPaginationValue(this.clientPaginationValue);
60
- }
61
- };
62
- this.clientPaginationNext = (event) => {
63
- event.preventDefault();
64
- // Enable increasing until the max number of pages
65
- if (this.clientPaginationValue <= this.clientMaxPages) {
66
- this.clientPaginationValue++;
67
- this.sendPaginationValue(this.clientPaginationValue);
68
- }
69
- };
70
- this.enablePagination = false;
71
- this.rowsPerPage = 5;
72
- this.enableClientPagination = false;
73
- this.clientPaginationValue = 1;
74
- this.clientMaxPages = 1;
75
- this.clientSetColumnsNumber = null;
76
- this.disablePaginationFunction = false;
77
- this.columnsNumber = 0;
78
- this.numberOfPages = 0;
79
- this.paginationValue = 1;
80
- this.tempPaginationDisable = false;
81
- this.verticalDividers = false;
82
- this.compactDesign = false;
83
- this.noMinWidth = false;
84
- this.whiteBackground = false;
85
- this.tableId = '';
86
- }
87
- tablePropsChangedEventListener(event) {
88
- if (this.tableId === event.detail.tableId) {
89
- event.detail.changed
90
- .filter((changedProp) => relevantTableProps.includes(changedProp))
91
- .forEach((changedProp) => {
92
- if (typeof this[changedProp] === 'undefined') {
93
- throw new Error(`Table prop is not supported: ${changedProp}`);
94
- }
95
- this[changedProp] = event.detail[changedProp];
96
- });
97
- }
98
- }
99
- connectedCallback() {
100
- this.tableEl = this.host.closest('sdds-table');
101
- this.tableId = this.tableEl.tableId;
102
- }
103
- componentWillLoad() {
104
- relevantTableProps.forEach((tablePropName) => {
105
- this[tablePropName] = this.tableEl[tablePropName];
106
- });
107
- const numberOfRows = this.host.parentElement.querySelector('sdds-table-body').childElementCount;
108
- const numberOfColumns = this.host.parentElement.querySelector('sdds-table-header').childElementCount;
109
- this.numberOfPages = Math.ceil(numberOfRows / this.rowsPerPage);
110
- if (this.clientSetColumnsNumber !== null) {
111
- this.columnsNumber = this.clientSetColumnsNumber;
112
- }
113
- else {
114
- this.columnsNumber = numberOfColumns;
115
- }
116
- this.enablePaginationEvent.emit(this.tableId);
117
- }
118
- paginationInputChange(event) {
119
- const insertedValue = event.target.value;
120
- if (insertedValue > this.numberOfPages || insertedValue < 1) {
121
- event.target.classList.add('sdds-table__page-selector-input--shake');
122
- this.paginationValue = event.target.max;
123
- }
124
- else {
125
- this.paginationValue = event.target.value;
126
- }
127
- this.runPagination();
128
- }
129
- runPaginationEventListener(event) {
130
- if (this.tableId === event.detail) {
131
- this.runPagination();
132
- }
133
- }
134
- sendPaginationValue(value) {
135
- this.currentPageValueEvent.emit([this.tableId, value]);
136
- }
137
- clientPaginationInputChange(event) {
138
- const insertedValue = event.target.value;
139
- if (insertedValue > this.clientMaxPages || insertedValue < 1) {
140
- event.target.classList.add('sdds-table__page-selector-input--shake');
141
- this.clientPaginationValue = event.target.max;
142
- }
143
- else {
144
- this.clientPaginationValue = event.target.value;
145
- }
146
- this.sendPaginationValue(this.clientPaginationValue);
147
- }
148
- render() {
149
- return (h(Host, { class: this.compactDesign ? 'sdds-table--compact' : '' }, h("tr", { class: "sdds-table__footer-row" }, h("td", { class: "sdds-table__footer-cell", colSpan: this.columnsNumber }, this.enablePagination && !this.enableClientPagination && (h("div", { class: "sdds-table__pagination" }, h("div", { class: "sdds-table__row-selector" }), h("div", { class: "sdds-table__page-selector" }, h("input", { class: "sdds-table__page-selector-input", type: "number", min: "1", max: this.numberOfPages, value: this.paginationValue, pattern: "[0-9]+", dir: "rtl", onChange: (event) => this.paginationInputChange(event), onFocusout: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation, disabled: this.tempPaginationDisable }), h("p", { class: "sdds-table__footer-text" }, "of ", h("span", null, this.tempPaginationDisable ? 1 : this.numberOfPages), " pages"), h("button", { class: "sdds-table__footer-btn", disabled: this.paginationValue <= 1 || this.tempPaginationDisable, onClick: (event) => this.paginationPrev(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z", fill: "currentColor" }))), h("button", { class: "sdds-table__footer-btn", disabled: this.paginationValue >= this.numberOfPages || this.tempPaginationDisable, onClick: (event) => this.paginationNext(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z", fill: "currentColor" })))))), this.enableClientPagination && !this.enablePagination && (h("div", { class: "sdds-table__pagination" }, h("div", { class: "sdds-table__row-selector" }), h("div", { class: "sdds-table__page-selector" }, h("input", { class: "sdds-table__page-selector-input", type: "number", min: "1", max: this.clientMaxPages, value: this.clientPaginationValue, pattern: "[0-9]+", dir: "rtl", onChange: (event) => this.clientPaginationInputChange(event), onFocusout: (event) => this.clientPaginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { class: "sdds-table__footer-text" }, "of ", h("span", null, this.clientMaxPages), " pages"), h("button", { class: "sdds-table__footer-btn", disabled: this.clientPaginationValue <= 1, onClick: (event) => this.clientPaginationPrev(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z", fill: "currentColor" }))), h("button", { class: "sdds-table__footer-btn", disabled: this.clientPaginationValue >= this.clientMaxPages, onClick: (event) => this.clientPaginationNext(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z", fill: "currentColor" }))))))))));
150
- }
151
- static get is() { return "sdds-table-footer"; }
152
- static get encapsulation() { return "shadow"; }
153
- static get originalStyleUrls() {
154
- return {
155
- "$": ["table-footer.scss"]
156
- };
157
- }
158
- static get styleUrls() {
159
- return {
160
- "$": ["table-footer.css"]
161
- };
162
- }
163
- static get properties() {
164
- return {
165
- "enablePagination": {
166
- "type": "boolean",
167
- "mutable": false,
168
- "complexType": {
169
- "original": "boolean",
170
- "resolved": "boolean",
171
- "references": {}
172
- },
173
- "required": false,
174
- "optional": false,
175
- "docs": {
176
- "tags": [],
177
- "text": "Enable pagination and show pagination controls"
178
- },
179
- "attribute": "enable-pagination",
180
- "reflect": true,
181
- "defaultValue": "false"
182
- },
183
- "rowsPerPage": {
184
- "type": "number",
185
- "mutable": false,
186
- "complexType": {
187
- "original": "number",
188
- "resolved": "number",
189
- "references": {}
190
- },
191
- "required": false,
192
- "optional": false,
193
- "docs": {
194
- "tags": [],
195
- "text": "Sets how many rows to display when pagination is enabled"
196
- },
197
- "attribute": "rows-per-page",
198
- "reflect": true,
199
- "defaultValue": "5"
200
- },
201
- "enableClientPagination": {
202
- "type": "boolean",
203
- "mutable": false,
204
- "complexType": {
205
- "original": "boolean",
206
- "resolved": "boolean",
207
- "references": {}
208
- },
209
- "required": false,
210
- "optional": false,
211
- "docs": {
212
- "tags": [],
213
- "text": "Prop to enable client controlled pagination"
214
- },
215
- "attribute": "enable-client-pagination",
216
- "reflect": true,
217
- "defaultValue": "false"
218
- },
219
- "clientPaginationValue": {
220
- "type": "number",
221
- "mutable": false,
222
- "complexType": {
223
- "original": "number",
224
- "resolved": "number",
225
- "references": {}
226
- },
227
- "required": false,
228
- "optional": false,
229
- "docs": {
230
- "tags": [],
231
- "text": "Prop for client to set current page number"
232
- },
233
- "attribute": "client-pagination-value",
234
- "reflect": true,
235
- "defaultValue": "1"
236
- },
237
- "clientMaxPages": {
238
- "type": "number",
239
- "mutable": false,
240
- "complexType": {
241
- "original": "number",
242
- "resolved": "number",
243
- "references": {}
244
- },
245
- "required": false,
246
- "optional": false,
247
- "docs": {
248
- "tags": [],
249
- "text": "Prop for client to set max number of pages"
250
- },
251
- "attribute": "client-max-pages",
252
- "reflect": true,
253
- "defaultValue": "1"
254
- },
255
- "clientSetColumnsNumber": {
256
- "type": "number",
257
- "mutable": false,
258
- "complexType": {
259
- "original": "number",
260
- "resolved": "number",
261
- "references": {}
262
- },
263
- "required": false,
264
- "optional": false,
265
- "docs": {
266
- "tags": [],
267
- "text": "In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too"
268
- },
269
- "attribute": "client-set-columns-number",
270
- "reflect": false,
271
- "defaultValue": "null"
272
- },
273
- "disablePaginationFunction": {
274
- "type": "boolean",
275
- "mutable": false,
276
- "complexType": {
277
- "original": "boolean",
278
- "resolved": "boolean",
279
- "references": {}
280
- },
281
- "required": false,
282
- "optional": false,
283
- "docs": {
284
- "tags": [],
285
- "text": "Disables inbuilt pagination logic, leaving user an option to create own pagination functionality while listening to events from sdds-table-footer component"
286
- },
287
- "attribute": "disable-pagination-function",
288
- "reflect": false,
289
- "defaultValue": "false"
290
- }
291
- };
292
- }
293
- static get states() {
294
- return {
295
- "columnsNumber": {},
296
- "numberOfPages": {},
297
- "paginationValue": {},
298
- "tempPaginationDisable": {},
299
- "verticalDividers": {},
300
- "compactDesign": {},
301
- "noMinWidth": {},
302
- "whiteBackground": {},
303
- "tableId": {}
304
- };
305
- }
306
- static get events() {
307
- return [{
308
- "method": "enablePaginationEvent",
309
- "name": "enablePaginationEvent",
310
- "bubbles": true,
311
- "cancelable": true,
312
- "composed": true,
313
- "docs": {
314
- "tags": [],
315
- "text": "Event that footer sends out in order to receive other necessary information from other subcomponents"
316
- },
317
- "complexType": {
318
- "original": "any",
319
- "resolved": "any",
320
- "references": {}
321
- }
322
- }, {
323
- "method": "currentPageValueEvent",
324
- "name": "currentPageValueEvent",
325
- "bubbles": true,
326
- "cancelable": true,
327
- "composed": true,
328
- "docs": {
329
- "tags": [],
330
- "text": "Event to send current page value back to sdds-table-body component"
331
- },
332
- "complexType": {
333
- "original": "any",
334
- "resolved": "any",
335
- "references": {}
336
- }
337
- }];
338
- }
339
- static get elementRef() { return "host"; }
340
- static get listeners() {
341
- return [{
342
- "name": "tablePropsChangedEvent",
343
- "method": "tablePropsChangedEventListener",
344
- "target": "body",
345
- "capture": false,
346
- "passive": false
347
- }, {
348
- "name": "runPaginationEvent",
349
- "method": "runPaginationEventListener",
350
- "target": "body",
351
- "capture": false,
352
- "passive": false
353
- }];
354
- }
355
- }
1
+ import { h, Host, } from '@stencil/core';
2
+ const relevantTableProps = [
3
+ 'compactDesign',
4
+ 'noMinWidth',
5
+ 'verticalDividers',
6
+ ];
7
+ function removeShakeAnimation(e) {
8
+ e.target.classList.remove('sdds-table__page-selector-input--shake');
9
+ }
10
+ export class TableFooter {
11
+ constructor() {
12
+ this.paginationPrev = (event) => {
13
+ event.preventDefault();
14
+ // Enable lowering until 1st page
15
+ if (this.paginationValue >= 2) {
16
+ this.paginationValue--;
17
+ this.runPagination();
18
+ }
19
+ };
20
+ this.paginationNext = (event) => {
21
+ event.preventDefault();
22
+ // Enable increasing until the max number of pages
23
+ if (this.paginationValue <= this.numberOfPages) {
24
+ this.paginationValue++;
25
+ this.runPagination();
26
+ }
27
+ };
28
+ this.runPagination = () => {
29
+ if (!this.disablePaginationFunction) {
30
+ // grab all rows in body
31
+ const dataRowsPagination = this.host.parentNode
32
+ .querySelector('sdds-table-body')
33
+ .querySelectorAll('.sdds-table__row');
34
+ dataRowsPagination.forEach((item, i) => {
35
+ // for making logic easier 1st result, 2nd result...
36
+ const index = i + 1;
37
+ if (this.tempPaginationDisable) {
38
+ this.paginationValue = 1;
39
+ }
40
+ else {
41
+ const lastResult = this.rowsPerPage * this.paginationValue;
42
+ const firstResult = lastResult - this.rowsPerPage;
43
+ if (index > firstResult && index <= lastResult) {
44
+ item.classList.remove('sdds-table__row--hidden');
45
+ }
46
+ else {
47
+ item.classList.add('sdds-table__row--hidden');
48
+ }
49
+ }
50
+ });
51
+ }
52
+ };
53
+ this.clientPaginationPrev = (event) => {
54
+ event.preventDefault();
55
+ // Enable lowering until 1st page
56
+ if (this.clientPaginationValue >= 2) {
57
+ this.clientPaginationValue--;
58
+ this.sendPaginationValue(this.clientPaginationValue);
59
+ }
60
+ };
61
+ this.clientPaginationNext = (event) => {
62
+ event.preventDefault();
63
+ // Enable increasing until the max number of pages
64
+ if (this.clientPaginationValue <= this.clientMaxPages) {
65
+ this.clientPaginationValue++;
66
+ this.sendPaginationValue(this.clientPaginationValue);
67
+ }
68
+ };
69
+ this.enablePagination = false;
70
+ this.rowsPerPage = 5;
71
+ this.enableClientPagination = false;
72
+ this.clientPaginationValue = 1;
73
+ this.clientMaxPages = 1;
74
+ this.clientSetColumnsNumber = null;
75
+ this.disablePaginationFunction = false;
76
+ this.columnsNumber = 0;
77
+ this.numberOfPages = 0;
78
+ this.paginationValue = 1;
79
+ this.tempPaginationDisable = false;
80
+ this.verticalDividers = false;
81
+ this.compactDesign = false;
82
+ this.noMinWidth = false;
83
+ this.whiteBackground = false;
84
+ this.tableId = '';
85
+ }
86
+ tablePropsChangedEventListener(event) {
87
+ if (this.tableId === event.detail.tableId) {
88
+ event.detail.changed
89
+ .filter((changedProp) => relevantTableProps.includes(changedProp))
90
+ .forEach((changedProp) => {
91
+ if (typeof this[changedProp] === 'undefined') {
92
+ throw new Error(`Table prop is not supported: ${changedProp}`);
93
+ }
94
+ this[changedProp] = event.detail[changedProp];
95
+ });
96
+ }
97
+ }
98
+ connectedCallback() {
99
+ this.tableEl = this.host.closest('sdds-table');
100
+ this.tableId = this.tableEl.tableId;
101
+ }
102
+ componentWillLoad() {
103
+ relevantTableProps.forEach((tablePropName) => {
104
+ this[tablePropName] = this.tableEl[tablePropName];
105
+ });
106
+ const numberOfRows = this.host.parentElement.querySelector('sdds-table-body').childElementCount;
107
+ const numberOfColumns = this.host.parentElement.querySelector('sdds-table-header').childElementCount;
108
+ this.numberOfPages = Math.ceil(numberOfRows / this.rowsPerPage);
109
+ if (this.clientSetColumnsNumber !== null) {
110
+ this.columnsNumber = this.clientSetColumnsNumber;
111
+ }
112
+ else {
113
+ this.columnsNumber = numberOfColumns;
114
+ }
115
+ this.enablePaginationEvent.emit(this.tableId);
116
+ }
117
+ paginationInputChange(event) {
118
+ const insertedValue = event.target.value;
119
+ if (insertedValue > this.numberOfPages || insertedValue < 1) {
120
+ event.target.classList.add('sdds-table__page-selector-input--shake');
121
+ this.paginationValue = event.target.max;
122
+ }
123
+ else {
124
+ this.paginationValue = event.target.value;
125
+ }
126
+ this.runPagination();
127
+ }
128
+ runPaginationEventListener(event) {
129
+ if (this.tableId === event.detail) {
130
+ this.runPagination();
131
+ }
132
+ }
133
+ sendPaginationValue(value) {
134
+ this.currentPageValueEvent.emit([this.tableId, value]);
135
+ }
136
+ clientPaginationInputChange(event) {
137
+ const insertedValue = event.target.value;
138
+ if (insertedValue > this.clientMaxPages || insertedValue < 1) {
139
+ event.target.classList.add('sdds-table__page-selector-input--shake');
140
+ this.clientPaginationValue = event.target.max;
141
+ }
142
+ else {
143
+ this.clientPaginationValue = event.target.value;
144
+ }
145
+ this.sendPaginationValue(this.clientPaginationValue);
146
+ }
147
+ render() {
148
+ return (h(Host, { class: this.compactDesign ? 'sdds-table--compact' : '' }, h("tr", { class: "sdds-table__footer-row" }, h("td", { class: "sdds-table__footer-cell", colSpan: this.columnsNumber }, this.enablePagination && !this.enableClientPagination && (h("div", { class: "sdds-table__pagination" }, h("div", { class: "sdds-table__row-selector" }), h("div", { class: "sdds-table__page-selector" }, h("input", { class: "sdds-table__page-selector-input", type: "number", min: "1", max: this.numberOfPages, value: this.paginationValue, pattern: "[0-9]+", dir: "rtl", onChange: (event) => this.paginationInputChange(event), onFocusout: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation, disabled: this.tempPaginationDisable }), h("p", { class: "sdds-table__footer-text" }, "of ", h("span", null, this.tempPaginationDisable ? 1 : this.numberOfPages), " pages"), h("button", { class: "sdds-table__footer-btn", disabled: this.paginationValue <= 1 || this.tempPaginationDisable, onClick: (event) => this.paginationPrev(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z" }))), h("button", { class: "sdds-table__footer-btn", disabled: this.paginationValue >= this.numberOfPages || this.tempPaginationDisable, onClick: (event) => this.paginationNext(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z" })))))), this.enableClientPagination && !this.enablePagination && (h("div", { class: "sdds-table__pagination" }, h("div", { class: "sdds-table__row-selector" }), h("div", { class: "sdds-table__page-selector" }, h("input", { class: "sdds-table__page-selector-input", type: "number", min: "1", max: this.clientMaxPages, value: this.clientPaginationValue, pattern: "[0-9]+", dir: "rtl", onChange: (event) => this.clientPaginationInputChange(event), onFocusout: (event) => this.clientPaginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { class: "sdds-table__footer-text" }, "of ", h("span", null, this.clientMaxPages), " pages"), h("button", { class: "sdds-table__footer-btn", disabled: this.clientPaginationValue <= 1, onClick: (event) => this.clientPaginationPrev(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z" }))), h("button", { class: "sdds-table__footer-btn", disabled: this.clientPaginationValue >= this.clientMaxPages, onClick: (event) => this.clientPaginationNext(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z" }))))))))));
149
+ }
150
+ static get is() { return "sdds-table-footer"; }
151
+ static get encapsulation() { return "shadow"; }
152
+ static get originalStyleUrls() {
153
+ return {
154
+ "$": ["table-footer.scss"]
155
+ };
156
+ }
157
+ static get styleUrls() {
158
+ return {
159
+ "$": ["table-footer.css"]
160
+ };
161
+ }
162
+ static get properties() {
163
+ return {
164
+ "enablePagination": {
165
+ "type": "boolean",
166
+ "mutable": false,
167
+ "complexType": {
168
+ "original": "boolean",
169
+ "resolved": "boolean",
170
+ "references": {}
171
+ },
172
+ "required": false,
173
+ "optional": false,
174
+ "docs": {
175
+ "tags": [],
176
+ "text": "Enable pagination and show pagination controls"
177
+ },
178
+ "attribute": "enable-pagination",
179
+ "reflect": true,
180
+ "defaultValue": "false"
181
+ },
182
+ "rowsPerPage": {
183
+ "type": "number",
184
+ "mutable": false,
185
+ "complexType": {
186
+ "original": "number",
187
+ "resolved": "number",
188
+ "references": {}
189
+ },
190
+ "required": false,
191
+ "optional": false,
192
+ "docs": {
193
+ "tags": [],
194
+ "text": "Sets how many rows to display when pagination is enabled"
195
+ },
196
+ "attribute": "rows-per-page",
197
+ "reflect": true,
198
+ "defaultValue": "5"
199
+ },
200
+ "enableClientPagination": {
201
+ "type": "boolean",
202
+ "mutable": false,
203
+ "complexType": {
204
+ "original": "boolean",
205
+ "resolved": "boolean",
206
+ "references": {}
207
+ },
208
+ "required": false,
209
+ "optional": false,
210
+ "docs": {
211
+ "tags": [],
212
+ "text": "Prop to enable client controlled pagination"
213
+ },
214
+ "attribute": "enable-client-pagination",
215
+ "reflect": true,
216
+ "defaultValue": "false"
217
+ },
218
+ "clientPaginationValue": {
219
+ "type": "number",
220
+ "mutable": false,
221
+ "complexType": {
222
+ "original": "number",
223
+ "resolved": "number",
224
+ "references": {}
225
+ },
226
+ "required": false,
227
+ "optional": false,
228
+ "docs": {
229
+ "tags": [],
230
+ "text": "Prop for client to set current page number"
231
+ },
232
+ "attribute": "client-pagination-value",
233
+ "reflect": true,
234
+ "defaultValue": "1"
235
+ },
236
+ "clientMaxPages": {
237
+ "type": "number",
238
+ "mutable": false,
239
+ "complexType": {
240
+ "original": "number",
241
+ "resolved": "number",
242
+ "references": {}
243
+ },
244
+ "required": false,
245
+ "optional": false,
246
+ "docs": {
247
+ "tags": [],
248
+ "text": "Prop for client to set max number of pages"
249
+ },
250
+ "attribute": "client-max-pages",
251
+ "reflect": true,
252
+ "defaultValue": "1"
253
+ },
254
+ "clientSetColumnsNumber": {
255
+ "type": "number",
256
+ "mutable": false,
257
+ "complexType": {
258
+ "original": "number",
259
+ "resolved": "number",
260
+ "references": {}
261
+ },
262
+ "required": false,
263
+ "optional": false,
264
+ "docs": {
265
+ "tags": [],
266
+ "text": "In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too"
267
+ },
268
+ "attribute": "client-set-columns-number",
269
+ "reflect": false,
270
+ "defaultValue": "null"
271
+ },
272
+ "disablePaginationFunction": {
273
+ "type": "boolean",
274
+ "mutable": false,
275
+ "complexType": {
276
+ "original": "boolean",
277
+ "resolved": "boolean",
278
+ "references": {}
279
+ },
280
+ "required": false,
281
+ "optional": false,
282
+ "docs": {
283
+ "tags": [],
284
+ "text": "Disables inbuilt pagination logic, leaving user an option to create own pagination functionality while listening to events from sdds-table-footer component"
285
+ },
286
+ "attribute": "disable-pagination-function",
287
+ "reflect": false,
288
+ "defaultValue": "false"
289
+ }
290
+ };
291
+ }
292
+ static get states() {
293
+ return {
294
+ "columnsNumber": {},
295
+ "numberOfPages": {},
296
+ "paginationValue": {},
297
+ "tempPaginationDisable": {},
298
+ "verticalDividers": {},
299
+ "compactDesign": {},
300
+ "noMinWidth": {},
301
+ "whiteBackground": {},
302
+ "tableId": {}
303
+ };
304
+ }
305
+ static get events() {
306
+ return [{
307
+ "method": "enablePaginationEvent",
308
+ "name": "enablePaginationEvent",
309
+ "bubbles": true,
310
+ "cancelable": true,
311
+ "composed": true,
312
+ "docs": {
313
+ "tags": [],
314
+ "text": "Event that footer sends out in order to receive other necessary information from other subcomponents"
315
+ },
316
+ "complexType": {
317
+ "original": "any",
318
+ "resolved": "any",
319
+ "references": {}
320
+ }
321
+ }, {
322
+ "method": "currentPageValueEvent",
323
+ "name": "currentPageValueEvent",
324
+ "bubbles": true,
325
+ "cancelable": true,
326
+ "composed": true,
327
+ "docs": {
328
+ "tags": [],
329
+ "text": "Event to send current page value back to sdds-table-body component"
330
+ },
331
+ "complexType": {
332
+ "original": "any",
333
+ "resolved": "any",
334
+ "references": {}
335
+ }
336
+ }];
337
+ }
338
+ static get elementRef() { return "host"; }
339
+ static get listeners() {
340
+ return [{
341
+ "name": "tablePropsChangedEvent",
342
+ "method": "tablePropsChangedEventListener",
343
+ "target": "body",
344
+ "capture": false,
345
+ "passive": false
346
+ }, {
347
+ "name": "runPaginationEvent",
348
+ "method": "runPaginationEventListener",
349
+ "target": "body",
350
+ "capture": false,
351
+ "passive": false
352
+ }];
353
+ }
354
+ }