@ukic/canary-web-components 2.0.0-canary.4 → 2.0.0-canary.41

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 (832) hide show
  1. package/README.md +7 -2
  2. package/dist/cjs/core.cjs.js +1 -1
  3. package/dist/cjs/date-helpers-c9551119.js +150 -0
  4. package/dist/cjs/date-helpers-c9551119.js.map +1 -0
  5. package/dist/cjs/helpers-951fb33a.js +433 -0
  6. package/dist/cjs/helpers-951fb33a.js.map +1 -0
  7. package/dist/cjs/{helpers-bbe55215.js → helpers-eabe59b6.js} +147 -100
  8. package/dist/cjs/helpers-eabe59b6.js.map +1 -0
  9. package/dist/cjs/ic-accordion-group.cjs.entry.js +31 -4
  10. package/dist/cjs/ic-accordion-group.cjs.entry.js.map +1 -1
  11. package/dist/cjs/ic-accordion.cjs.entry.js +11 -4
  12. package/dist/cjs/ic-accordion.cjs.entry.js.map +1 -1
  13. package/dist/cjs/ic-alert.cjs.entry.js +20 -6
  14. package/dist/cjs/ic-alert.cjs.entry.js.map +1 -1
  15. package/dist/cjs/ic-back-to-top.cjs.entry.js +26 -17
  16. package/dist/cjs/ic-back-to-top.cjs.entry.js.map +1 -1
  17. package/dist/cjs/ic-badge.cjs.entry.js +86 -83
  18. package/dist/cjs/ic-badge.cjs.entry.js.map +1 -1
  19. package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +62 -25
  20. package/dist/cjs/ic-breadcrumb-group.cjs.entry.js.map +1 -1
  21. package/dist/cjs/ic-breadcrumb.cjs.entry.js +2 -2
  22. package/dist/cjs/ic-breadcrumb.cjs.entry.js.map +1 -1
  23. package/dist/cjs/ic-button_3.cjs.entry.js +145 -103
  24. package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
  25. package/dist/cjs/ic-card-horizontal.cjs.entry.js +130 -0
  26. package/dist/cjs/ic-card-horizontal.cjs.entry.js.map +1 -0
  27. package/dist/cjs/ic-card.cjs.entry.js +30 -7
  28. package/dist/cjs/ic-card.cjs.entry.js.map +1 -1
  29. package/dist/cjs/ic-checkbox-group.cjs.entry.js +28 -17
  30. package/dist/cjs/ic-checkbox-group.cjs.entry.js.map +1 -1
  31. package/dist/cjs/ic-checkbox.cjs.entry.js +50 -31
  32. package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
  33. package/dist/cjs/ic-chip.cjs.entry.js +45 -21
  34. package/dist/cjs/ic-chip.cjs.entry.js.map +1 -1
  35. package/dist/cjs/ic-classification-banner.cjs.entry.js +14 -5
  36. package/dist/cjs/ic-classification-banner.cjs.entry.js.map +1 -1
  37. package/dist/cjs/ic-data-entity.cjs.entry.js +3 -6
  38. package/dist/cjs/ic-data-entity.cjs.entry.js.map +1 -1
  39. package/dist/cjs/ic-data-row.cjs.entry.js +21 -35
  40. package/dist/cjs/ic-data-row.cjs.entry.js.map +1 -1
  41. package/dist/cjs/ic-data-table-title-bar.cjs.entry.js +57 -0
  42. package/dist/cjs/ic-data-table-title-bar.cjs.entry.js.map +1 -0
  43. package/dist/cjs/ic-data-table.cjs.entry.js +1079 -84
  44. package/dist/cjs/ic-data-table.cjs.entry.js.map +1 -1
  45. package/dist/cjs/ic-date-input.cjs.entry.js +1123 -0
  46. package/dist/cjs/ic-date-input.cjs.entry.js.map +1 -0
  47. package/dist/cjs/ic-date-picker.cjs.entry.js +1129 -0
  48. package/dist/cjs/ic-date-picker.cjs.entry.js.map +1 -0
  49. package/dist/cjs/ic-dialog.cjs.entry.js +54 -12
  50. package/dist/cjs/ic-dialog.cjs.entry.js.map +1 -1
  51. package/dist/cjs/ic-divider.cjs.entry.js +1 -1
  52. package/dist/cjs/ic-empty-state_2.cjs.entry.js +388 -0
  53. package/dist/cjs/ic-empty-state_2.cjs.entry.js.map +1 -0
  54. package/dist/cjs/ic-footer-link-group.cjs.entry.js +4 -4
  55. package/dist/cjs/ic-footer-link-group.cjs.entry.js.map +1 -1
  56. package/dist/cjs/ic-footer-link.cjs.entry.js +3 -3
  57. package/dist/cjs/ic-footer-link.cjs.entry.js.map +1 -1
  58. package/dist/cjs/ic-footer.cjs.entry.js +18 -7
  59. package/dist/cjs/ic-footer.cjs.entry.js.map +1 -1
  60. package/dist/cjs/ic-hero.cjs.entry.js +12 -2
  61. package/dist/cjs/ic-hero.cjs.entry.js.map +1 -1
  62. package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +5 -5
  63. package/dist/cjs/ic-horizontal-scroll.cjs.entry.js.map +1 -1
  64. package/dist/cjs/ic-input-component-container_4.cjs.entry.js +164 -0
  65. package/dist/cjs/ic-input-component-container_4.cjs.entry.js.map +1 -0
  66. package/dist/cjs/ic-link.cjs.entry.js +34 -16
  67. package/dist/cjs/ic-link.cjs.entry.js.map +1 -1
  68. package/dist/cjs/ic-menu-group.cjs.entry.js +2 -2
  69. package/dist/cjs/ic-menu-group.cjs.entry.js.map +1 -1
  70. package/dist/cjs/ic-menu-item.cjs.entry.js +21 -20
  71. package/dist/cjs/ic-menu-item.cjs.entry.js.map +1 -1
  72. package/dist/cjs/ic-menu-with-multi.cjs.entry.js +2740 -0
  73. package/dist/cjs/ic-menu-with-multi.cjs.entry.js.map +1 -0
  74. package/dist/cjs/{ic-input-component-container_3.cjs.entry.js → ic-menu.cjs.entry.js} +17 -80
  75. package/dist/cjs/ic-menu.cjs.entry.js.map +1 -0
  76. package/dist/cjs/ic-navigation-button.cjs.entry.js +28 -7
  77. package/dist/cjs/ic-navigation-button.cjs.entry.js.map +1 -1
  78. package/dist/cjs/ic-navigation-group.cjs.entry.js +32 -22
  79. package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
  80. package/dist/cjs/ic-navigation-item.cjs.entry.js +82 -36
  81. package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
  82. package/dist/cjs/ic-navigation-menu.cjs.entry.js +1 -1
  83. package/dist/cjs/ic-page-header.cjs.entry.js +10 -10
  84. package/dist/cjs/ic-page-header.cjs.entry.js.map +1 -1
  85. package/dist/cjs/ic-pagination_4.cjs.entry.js +231 -116
  86. package/dist/cjs/ic-pagination_4.cjs.entry.js.map +1 -1
  87. package/dist/cjs/ic-popover-menu.cjs.entry.js +40 -36
  88. package/dist/cjs/ic-popover-menu.cjs.entry.js.map +1 -1
  89. package/dist/cjs/ic-radio-group.cjs.entry.js +100 -59
  90. package/dist/cjs/ic-radio-group.cjs.entry.js.map +1 -1
  91. package/dist/cjs/ic-radio-option.cjs.entry.js +59 -42
  92. package/dist/cjs/ic-radio-option.cjs.entry.js.map +1 -1
  93. package/dist/cjs/ic-search-bar.cjs.entry.js +22 -30
  94. package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
  95. package/dist/cjs/ic-section-container.cjs.entry.js +1 -1
  96. package/dist/cjs/ic-section-container.cjs.entry.js.map +1 -1
  97. package/dist/cjs/ic-select-with-multi.cjs.entry.js +796 -0
  98. package/dist/cjs/ic-select-with-multi.cjs.entry.js.map +1 -0
  99. package/dist/cjs/ic-side-navigation.cjs.entry.js +53 -73
  100. package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
  101. package/dist/cjs/ic-skeleton.cjs.entry.js +16 -35
  102. package/dist/cjs/ic-skeleton.cjs.entry.js.map +1 -1
  103. package/dist/cjs/ic-status-tag.cjs.entry.js +4 -2
  104. package/dist/cjs/ic-status-tag.cjs.entry.js.map +1 -1
  105. package/dist/cjs/ic-step.cjs.entry.js +5 -2
  106. package/dist/cjs/ic-step.cjs.entry.js.map +1 -1
  107. package/dist/cjs/ic-stepper.cjs.entry.js +31 -9
  108. package/dist/cjs/ic-stepper.cjs.entry.js.map +1 -1
  109. package/dist/cjs/ic-switch.cjs.entry.js +7 -3
  110. package/dist/cjs/ic-switch.cjs.entry.js.map +1 -1
  111. package/dist/cjs/ic-tab-context.cjs.entry.js +78 -130
  112. package/dist/cjs/ic-tab-context.cjs.entry.js.map +1 -1
  113. package/dist/cjs/ic-tab-group.cjs.entry.js +1 -1
  114. package/dist/cjs/ic-tab-panel.cjs.entry.js +5 -13
  115. package/dist/cjs/ic-tab-panel.cjs.entry.js.map +1 -1
  116. package/dist/cjs/ic-tab.cjs.entry.js +16 -14
  117. package/dist/cjs/ic-tab.cjs.entry.js.map +1 -1
  118. package/dist/cjs/ic-theme.cjs.entry.js +13 -22
  119. package/dist/cjs/ic-theme.cjs.entry.js.map +1 -1
  120. package/dist/cjs/ic-toast-region.cjs.entry.js +6 -0
  121. package/dist/cjs/ic-toast-region.cjs.entry.js.map +1 -1
  122. package/dist/cjs/ic-toast.cjs.entry.js +21 -18
  123. package/dist/cjs/ic-toast.cjs.entry.js.map +1 -1
  124. package/dist/cjs/ic-toggle-button-group.cjs.entry.js +201 -0
  125. package/dist/cjs/ic-toggle-button-group.cjs.entry.js.map +1 -0
  126. package/dist/cjs/ic-toggle-button.cjs.entry.js +97 -0
  127. package/dist/cjs/ic-toggle-button.cjs.entry.js.map +1 -0
  128. package/dist/cjs/ic-top-navigation.cjs.entry.js +60 -82
  129. package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
  130. package/dist/cjs/ic-tree-item.cjs.entry.js +253 -0
  131. package/dist/cjs/ic-tree-item.cjs.entry.js.map +1 -0
  132. package/dist/cjs/ic-tree-view.cjs.entry.js +215 -0
  133. package/dist/cjs/ic-tree-view.cjs.entry.js.map +1 -0
  134. package/dist/cjs/ic-typography.cjs.entry.js +51 -14
  135. package/dist/cjs/ic-typography.cjs.entry.js.map +1 -1
  136. package/dist/cjs/index-4cf27b16.js +48 -12
  137. package/dist/cjs/loader.cjs.js +1 -1
  138. package/dist/collection/assets/arrow-dropdown.svg +3 -0
  139. package/dist/collection/assets/calendar.svg +3 -0
  140. package/dist/collection/collection-manifest.json +11 -1
  141. package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.css +658 -0
  142. package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.js +375 -0
  143. package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.js.map +1 -0
  144. package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.stories.js +605 -0
  145. package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.stories.js.map +1 -0
  146. package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.types.js +2 -0
  147. package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.types.js.map +1 -0
  148. package/dist/collection/components/ic-card-horizontal/test/basic/ic-card-horizontal.spec.js +140 -0
  149. package/dist/collection/components/ic-card-horizontal/test/basic/ic-card-horizontal.spec.js.map +1 -0
  150. package/dist/collection/components/ic-data-table/ic-data-table.css +286 -10
  151. package/dist/collection/components/ic-data-table/ic-data-table.js +1533 -123
  152. package/dist/collection/components/ic-data-table/ic-data-table.js.map +1 -1
  153. package/dist/collection/components/ic-data-table/ic-data-table.stories.js +414 -0
  154. package/dist/collection/components/ic-data-table/ic-data-table.stories.js.map +1 -0
  155. package/dist/collection/components/ic-data-table/ic-data-table.types.js.map +1 -1
  156. package/dist/collection/components/ic-data-table/story-data.js +1326 -43
  157. package/dist/collection/components/ic-data-table/story-data.js.map +1 -1
  158. package/dist/collection/components/ic-data-table/test/basic/ic-data-table.spec.js +460 -3
  159. package/dist/collection/components/ic-data-table/test/basic/ic-data-table.spec.js.map +1 -1
  160. package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.css +91 -0
  161. package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js +160 -0
  162. package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js.map +1 -0
  163. package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.stories.js +98 -0
  164. package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.stories.js.map +1 -0
  165. package/dist/collection/components/ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.js +11 -0
  166. package/dist/collection/components/ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.js.map +1 -0
  167. package/dist/collection/components/ic-data-table-title-bar/test/basic/ic-data-table-title-bar.spec.js +70 -0
  168. package/dist/collection/components/ic-data-table-title-bar/test/basic/ic-data-table-title-bar.spec.js.map +1 -0
  169. package/dist/collection/components/ic-date-input/ic-date-input.css +564 -0
  170. package/dist/collection/components/ic-date-input/ic-date-input.js +1808 -0
  171. package/dist/collection/components/ic-date-input/ic-date-input.js.map +1 -0
  172. package/dist/collection/components/ic-date-input/ic-date-input.stories.js +341 -0
  173. package/dist/collection/components/ic-date-input/ic-date-input.stories.js.map +1 -0
  174. package/dist/collection/components/ic-date-input/story-data.js +28 -0
  175. package/dist/collection/components/ic-date-input/story-data.js.map +1 -0
  176. package/dist/collection/components/ic-date-input/test/basic/ic-date-input.spec.js +1158 -0
  177. package/dist/collection/components/ic-date-input/test/basic/ic-date-input.spec.js.map +1 -0
  178. package/dist/collection/components/ic-date-input/test/helpers/ic-date-input.js +42 -0
  179. package/dist/collection/components/ic-date-input/test/helpers/ic-date-input.js.map +1 -0
  180. package/dist/collection/components/ic-date-picker/ic-date-picker.css +885 -0
  181. package/dist/collection/components/ic-date-picker/ic-date-picker.js +1688 -0
  182. package/dist/collection/components/ic-date-picker/ic-date-picker.js.map +1 -0
  183. package/dist/collection/components/ic-date-picker/ic-date-picker.stories.js +167 -0
  184. package/dist/collection/components/ic-date-picker/ic-date-picker.stories.js.map +1 -0
  185. package/dist/collection/components/ic-date-picker/ic-day-button.js +36 -0
  186. package/dist/collection/components/ic-date-picker/ic-day-button.js.map +1 -0
  187. package/dist/collection/components/ic-date-picker/ic-month-picker.js +29 -0
  188. package/dist/collection/components/ic-date-picker/ic-month-picker.js.map +1 -0
  189. package/dist/collection/components/ic-date-picker/ic-year-picker.js +39 -0
  190. package/dist/collection/components/ic-date-picker/ic-year-picker.js.map +1 -0
  191. package/dist/collection/components/ic-date-picker/story-data.js +179 -0
  192. package/dist/collection/components/ic-date-picker/story-data.js.map +1 -0
  193. package/dist/collection/components/ic-date-picker/test/a11y/ic-date-picker.test.a11y.js +13 -0
  194. package/dist/collection/components/ic-date-picker/test/a11y/ic-date-picker.test.a11y.js.map +1 -0
  195. package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker-utils.spec.js +207 -0
  196. package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker-utils.spec.js.map +1 -0
  197. package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker.spec.js +1030 -0
  198. package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker.spec.js.map +1 -0
  199. package/dist/collection/components/ic-menu-with-multi/ic-menu.css +701 -0
  200. package/dist/collection/components/ic-menu-with-multi/ic-menu.js +1599 -0
  201. package/dist/collection/components/ic-menu-with-multi/ic-menu.js.map +1 -0
  202. package/dist/collection/components/ic-menu-with-multi/test/basic/ic-menu.spec.js +1057 -0
  203. package/dist/collection/components/ic-menu-with-multi/test/basic/ic-menu.spec.js.map +1 -0
  204. package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.js +346 -166
  205. package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.js.map +1 -1
  206. package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.stories.js +260 -0
  207. package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.stories.js.map +1 -0
  208. package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.types.js +2 -0
  209. package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.types.js.map +1 -0
  210. package/dist/collection/components/ic-pagination-bar/test/a11y/ic-pagination-bar.test.a11y.js +8 -1
  211. package/dist/collection/components/ic-pagination-bar/test/a11y/ic-pagination-bar.test.a11y.js.map +1 -1
  212. package/dist/collection/components/ic-pagination-bar/test/basic/ic-pagination-bar.spec.js +75 -12
  213. package/dist/collection/components/ic-pagination-bar/test/basic/ic-pagination-bar.spec.js.map +1 -1
  214. package/dist/collection/components/ic-select-with-multi/assets/Check.svg +3 -0
  215. package/dist/collection/components/ic-select-with-multi/assets/Clear.svg +3 -0
  216. package/dist/collection/components/ic-select-with-multi/assets/Expand.svg +3 -0
  217. package/dist/collection/components/ic-select-with-multi/ic-select-multi.stories.js +144 -0
  218. package/dist/collection/components/ic-select-with-multi/ic-select-multi.stories.js.map +1 -0
  219. package/dist/collection/components/ic-select-with-multi/ic-select.css +693 -0
  220. package/dist/collection/components/ic-select-with-multi/ic-select.js +1649 -0
  221. package/dist/collection/components/ic-select-with-multi/ic-select.js.map +1 -0
  222. package/dist/collection/components/ic-select-with-multi/story-data.js +216 -0
  223. package/dist/collection/components/ic-select-with-multi/story-data.js.map +1 -0
  224. package/dist/collection/components/ic-select-with-multi/test/basic/ic-select.spec.js +1518 -0
  225. package/dist/collection/components/ic-select-with-multi/test/basic/ic-select.spec.js.map +1 -0
  226. package/dist/collection/components/ic-tree-item/ic-tree-item.css +186 -0
  227. package/dist/collection/components/ic-tree-item/ic-tree-item.js +620 -0
  228. package/dist/collection/components/ic-tree-item/ic-tree-item.js.map +1 -0
  229. package/dist/collection/components/ic-tree-item/test/basic/ic-tree-item.spec.js +117 -0
  230. package/dist/collection/components/ic-tree-item/test/basic/ic-tree-item.spec.js.map +1 -0
  231. package/dist/collection/components/ic-tree-view/ic-tree-view.css +74 -0
  232. package/dist/collection/components/ic-tree-view/ic-tree-view.js +346 -0
  233. package/dist/collection/components/ic-tree-view/ic-tree-view.js.map +1 -0
  234. package/dist/collection/components/ic-tree-view/ic-tree-view.stories.js +456 -0
  235. package/dist/collection/components/ic-tree-view/ic-tree-view.stories.js.map +1 -0
  236. package/dist/collection/components/ic-tree-view/test/basic/ic-tree-view.spec.js +85 -0
  237. package/dist/collection/components/ic-tree-view/test/basic/ic-tree-view.spec.js.map +1 -0
  238. package/dist/collection/utils/constants.js +83 -0
  239. package/dist/collection/utils/constants.js.map +1 -0
  240. package/dist/collection/utils/date-helpers.js +133 -0
  241. package/dist/collection/utils/date-helpers.js.map +1 -0
  242. package/dist/collection/utils/helpers.js +473 -5
  243. package/dist/collection/utils/helpers.js.map +1 -1
  244. package/dist/collection/utils/types.js +58 -0
  245. package/dist/collection/utils/types.js.map +1 -0
  246. package/dist/components/helpers.js +141 -98
  247. package/dist/components/helpers.js.map +1 -1
  248. package/dist/components/helpers2.js +403 -0
  249. package/dist/components/helpers2.js.map +1 -0
  250. package/dist/components/ic-accordion-group.js +38 -7
  251. package/dist/components/ic-accordion-group.js.map +1 -1
  252. package/dist/components/ic-accordion.js +12 -4
  253. package/dist/components/ic-accordion.js.map +1 -1
  254. package/dist/components/ic-alert2.js +21 -6
  255. package/dist/components/ic-alert2.js.map +1 -1
  256. package/dist/components/ic-back-to-top.js +34 -18
  257. package/dist/components/ic-back-to-top.js.map +1 -1
  258. package/dist/components/ic-badge.js +91 -84
  259. package/dist/components/ic-badge.js.map +1 -1
  260. package/dist/components/ic-breadcrumb-group.js +66 -25
  261. package/dist/components/ic-breadcrumb-group.js.map +1 -1
  262. package/dist/components/ic-breadcrumb2.js +2 -2
  263. package/dist/components/ic-breadcrumb2.js.map +1 -1
  264. package/dist/components/ic-button2.js +104 -74
  265. package/dist/components/ic-button2.js.map +1 -1
  266. package/dist/components/ic-card-horizontal.d.ts +11 -0
  267. package/dist/components/ic-card-horizontal.js +168 -0
  268. package/dist/components/ic-card-horizontal.js.map +1 -0
  269. package/dist/components/ic-card.js +34 -21
  270. package/dist/components/ic-card.js.map +1 -1
  271. package/dist/components/ic-checkbox-group.js +33 -18
  272. package/dist/components/ic-checkbox-group.js.map +1 -1
  273. package/dist/components/ic-checkbox.js +58 -33
  274. package/dist/components/ic-checkbox.js.map +1 -1
  275. package/dist/components/ic-chip.js +52 -23
  276. package/dist/components/ic-chip.js.map +1 -1
  277. package/dist/components/ic-classification-banner.js +14 -5
  278. package/dist/components/ic-classification-banner.js.map +1 -1
  279. package/dist/components/ic-data-entity.js +3 -6
  280. package/dist/components/ic-data-entity.js.map +1 -1
  281. package/dist/components/ic-data-row.js +21 -35
  282. package/dist/components/ic-data-row.js.map +1 -1
  283. package/dist/components/ic-data-table-title-bar.d.ts +11 -0
  284. package/dist/components/ic-data-table-title-bar.js +136 -0
  285. package/dist/components/ic-data-table-title-bar.js.map +1 -0
  286. package/dist/components/ic-data-table.js +1119 -91
  287. package/dist/components/ic-data-table.js.map +1 -1
  288. package/dist/components/ic-date-input.d.ts +11 -0
  289. package/dist/components/ic-date-input.js +8 -0
  290. package/dist/components/ic-date-input.js.map +1 -0
  291. package/dist/components/ic-date-input2.js +1359 -0
  292. package/dist/components/ic-date-input2.js.map +1 -0
  293. package/dist/components/ic-date-picker.d.ts +11 -0
  294. package/dist/components/ic-date-picker.js +1258 -0
  295. package/dist/components/ic-date-picker.js.map +1 -0
  296. package/dist/components/ic-dialog.js +55 -12
  297. package/dist/components/ic-dialog.js.map +1 -1
  298. package/dist/components/ic-divider2.js +1 -1
  299. package/dist/components/ic-empty-state.js +1 -57
  300. package/dist/components/ic-empty-state.js.map +1 -1
  301. package/dist/{esm/ic-empty-state.entry.js → components/ic-empty-state2.js} +47 -11
  302. package/dist/components/ic-empty-state2.js.map +1 -0
  303. package/dist/components/ic-footer-link-group.js +4 -4
  304. package/dist/components/ic-footer-link-group.js.map +1 -1
  305. package/dist/components/ic-footer-link.js +3 -3
  306. package/dist/components/ic-footer-link.js.map +1 -1
  307. package/dist/components/ic-footer.js +18 -7
  308. package/dist/components/ic-footer.js.map +1 -1
  309. package/dist/components/ic-hero.js +12 -2
  310. package/dist/components/ic-hero.js.map +1 -1
  311. package/dist/components/ic-horizontal-scroll2.js +5 -5
  312. package/dist/components/ic-horizontal-scroll2.js.map +1 -1
  313. package/dist/components/ic-input-component-container2.js +24 -8
  314. package/dist/components/ic-input-component-container2.js.map +1 -1
  315. package/dist/components/ic-input-label2.js +7 -5
  316. package/dist/components/ic-input-label2.js.map +1 -1
  317. package/dist/components/ic-input-validation2.js +1 -1
  318. package/dist/components/ic-link2.js +35 -17
  319. package/dist/components/ic-link2.js.map +1 -1
  320. package/dist/components/ic-loading-indicator2.js +2 -2
  321. package/dist/components/ic-loading-indicator2.js.map +1 -1
  322. package/dist/components/ic-menu-group.js +2 -2
  323. package/dist/components/ic-menu-group.js.map +1 -1
  324. package/dist/components/ic-menu-item2.js +26 -23
  325. package/dist/components/ic-menu-item2.js.map +1 -1
  326. package/dist/components/ic-menu-with-multi.d.ts +11 -0
  327. package/dist/components/ic-menu-with-multi.js +8 -0
  328. package/dist/components/ic-menu-with-multi.js.map +1 -0
  329. package/dist/components/ic-menu2.js +14 -14
  330. package/dist/components/ic-menu2.js.map +1 -1
  331. package/dist/components/ic-menu3.js +2806 -0
  332. package/dist/components/ic-menu3.js.map +1 -0
  333. package/dist/components/ic-navigation-button.js +29 -8
  334. package/dist/components/ic-navigation-button.js.map +1 -1
  335. package/dist/components/ic-navigation-group.js +34 -24
  336. package/dist/components/ic-navigation-group.js.map +1 -1
  337. package/dist/components/ic-navigation-item.js +84 -37
  338. package/dist/components/ic-navigation-item.js.map +1 -1
  339. package/dist/components/ic-navigation-menu2.js +1 -1
  340. package/dist/components/ic-page-header.js +10 -10
  341. package/dist/components/ic-page-header.js.map +1 -1
  342. package/dist/components/ic-pagination-bar2.js +244 -161
  343. package/dist/components/ic-pagination-bar2.js.map +1 -1
  344. package/dist/components/ic-pagination-item2.js +27 -12
  345. package/dist/components/ic-pagination-item2.js.map +1 -1
  346. package/dist/components/ic-pagination2.js +30 -10
  347. package/dist/components/ic-pagination2.js.map +1 -1
  348. package/dist/components/ic-popover-menu.js +43 -38
  349. package/dist/components/ic-popover-menu.js.map +1 -1
  350. package/dist/components/ic-radio-group.js +101 -59
  351. package/dist/components/ic-radio-group.js.map +1 -1
  352. package/dist/components/ic-radio-option.js +63 -44
  353. package/dist/components/ic-radio-option.js.map +1 -1
  354. package/dist/components/ic-search-bar.js +23 -30
  355. package/dist/components/ic-search-bar.js.map +1 -1
  356. package/dist/components/ic-section-container2.js +1 -1
  357. package/dist/components/ic-section-container2.js.map +1 -1
  358. package/dist/components/ic-select-with-multi.d.ts +11 -0
  359. package/dist/components/ic-select-with-multi.js +921 -0
  360. package/dist/components/ic-select-with-multi.js.map +1 -0
  361. package/dist/components/ic-select2.js +77 -30
  362. package/dist/components/ic-select2.js.map +1 -1
  363. package/dist/components/ic-side-navigation.js +56 -74
  364. package/dist/components/ic-side-navigation.js.map +1 -1
  365. package/dist/components/ic-skeleton.js +17 -40
  366. package/dist/components/ic-skeleton.js.map +1 -1
  367. package/dist/components/ic-status-tag.js +3 -1
  368. package/dist/components/ic-status-tag.js.map +1 -1
  369. package/dist/components/ic-step.js +5 -2
  370. package/dist/components/ic-step.js.map +1 -1
  371. package/dist/components/ic-stepper.js +35 -9
  372. package/dist/components/ic-stepper.js.map +1 -1
  373. package/dist/components/ic-switch.js +9 -4
  374. package/dist/components/ic-switch.js.map +1 -1
  375. package/dist/components/ic-tab-context.js +79 -130
  376. package/dist/components/ic-tab-context.js.map +1 -1
  377. package/dist/components/ic-tab-panel.js +6 -17
  378. package/dist/components/ic-tab-panel.js.map +1 -1
  379. package/dist/components/ic-tab.js +16 -14
  380. package/dist/components/ic-tab.js.map +1 -1
  381. package/dist/components/ic-text-field2.js +120 -72
  382. package/dist/components/ic-text-field2.js.map +1 -1
  383. package/dist/components/ic-theme.js +13 -22
  384. package/dist/components/ic-theme.js.map +1 -1
  385. package/dist/components/ic-toast-region.js +6 -0
  386. package/dist/components/ic-toast-region.js.map +1 -1
  387. package/dist/components/ic-toast.js +24 -19
  388. package/dist/components/ic-toast.js.map +1 -1
  389. package/dist/components/ic-toggle-button-group.js +230 -0
  390. package/dist/components/ic-toggle-button-group.js.map +1 -0
  391. package/dist/components/ic-toggle-button.js +148 -0
  392. package/dist/components/ic-toggle-button.js.map +1 -0
  393. package/dist/components/ic-tooltip2.js +52 -30
  394. package/dist/components/ic-tooltip2.js.map +1 -1
  395. package/dist/components/ic-top-navigation.js +61 -83
  396. package/dist/components/ic-top-navigation.js.map +1 -1
  397. package/dist/components/ic-tree-item.d.ts +11 -0
  398. package/dist/components/ic-tree-item.js +300 -0
  399. package/dist/components/ic-tree-item.js.map +1 -0
  400. package/dist/components/ic-tree-view.d.ts +11 -0
  401. package/dist/components/ic-tree-view.js +252 -0
  402. package/dist/components/ic-tree-view.js.map +1 -0
  403. package/dist/components/ic-typography2.js +57 -17
  404. package/dist/components/ic-typography2.js.map +1 -1
  405. package/dist/core/core.css +8 -5
  406. package/dist/core/core.esm.js +1 -1
  407. package/dist/core/core.esm.js.map +1 -1
  408. package/dist/core/p-0229eb46.entry.js +2 -0
  409. package/dist/core/p-0229eb46.entry.js.map +1 -0
  410. package/dist/core/p-04fe848d.entry.js +2 -0
  411. package/dist/core/p-04fe848d.entry.js.map +1 -0
  412. package/dist/core/p-05ae9a59.entry.js +2 -0
  413. package/dist/core/p-05ae9a59.entry.js.map +1 -0
  414. package/dist/core/p-074e64d0.entry.js +2 -0
  415. package/dist/core/p-074e64d0.entry.js.map +1 -0
  416. package/dist/core/p-0f1706e8.entry.js +2 -0
  417. package/dist/core/p-0f1706e8.entry.js.map +1 -0
  418. package/dist/core/p-11877d23.entry.js +2 -0
  419. package/dist/core/p-11877d23.entry.js.map +1 -0
  420. package/dist/core/p-1e450833.entry.js +2 -0
  421. package/dist/core/p-1e450833.entry.js.map +1 -0
  422. package/dist/core/{p-4409f656.entry.js → p-23408776.entry.js} +2 -2
  423. package/dist/core/p-23408776.entry.js.map +1 -0
  424. package/dist/core/p-26fa17fb.entry.js +2 -0
  425. package/dist/core/p-26fa17fb.entry.js.map +1 -0
  426. package/dist/core/p-2b15ea77.entry.js +2 -0
  427. package/dist/core/p-2b15ea77.entry.js.map +1 -0
  428. package/dist/core/p-2d44b81a.entry.js +2 -0
  429. package/dist/core/p-2d44b81a.entry.js.map +1 -0
  430. package/dist/core/p-2ea7af8b.entry.js +2 -0
  431. package/dist/core/p-2ea7af8b.entry.js.map +1 -0
  432. package/dist/core/p-33dd24eb.js +2 -0
  433. package/dist/core/p-33dd24eb.js.map +1 -0
  434. package/dist/core/p-38f329ab.entry.js +2 -0
  435. package/dist/core/p-38f329ab.entry.js.map +1 -0
  436. package/dist/core/p-3cd2056f.entry.js +2 -0
  437. package/dist/core/p-3cd2056f.entry.js.map +1 -0
  438. package/dist/core/p-3d00ad9e.entry.js +2 -0
  439. package/dist/core/p-3d00ad9e.entry.js.map +1 -0
  440. package/dist/core/p-3ebd4703.entry.js +2 -0
  441. package/dist/core/p-3ebd4703.entry.js.map +1 -0
  442. package/dist/core/p-44036532.entry.js +2 -0
  443. package/dist/core/p-44036532.entry.js.map +1 -0
  444. package/dist/core/p-44680720.entry.js +2 -0
  445. package/dist/core/p-44680720.entry.js.map +1 -0
  446. package/dist/core/{p-24945ee5.entry.js → p-452985d9.entry.js} +2 -2
  447. package/dist/core/p-452985d9.entry.js.map +1 -0
  448. package/dist/core/{p-b97dc365.entry.js → p-487fd924.entry.js} +2 -2
  449. package/dist/core/p-56db5123.entry.js +2 -0
  450. package/dist/core/p-56db5123.entry.js.map +1 -0
  451. package/dist/core/p-5a90eaa8.entry.js +2 -0
  452. package/dist/core/p-5a90eaa8.entry.js.map +1 -0
  453. package/dist/core/p-5dd6381a.entry.js +2 -0
  454. package/dist/core/p-5dd6381a.entry.js.map +1 -0
  455. package/dist/core/p-5f149106.entry.js +2 -0
  456. package/dist/core/p-5f149106.entry.js.map +1 -0
  457. package/dist/core/p-61848e6b.entry.js +2 -0
  458. package/dist/core/p-61848e6b.entry.js.map +1 -0
  459. package/dist/core/{p-d77960f6.entry.js → p-656378ba.entry.js} +2 -2
  460. package/dist/core/p-6a920114.entry.js +2 -0
  461. package/dist/core/p-6a920114.entry.js.map +1 -0
  462. package/dist/core/p-6cdf5de2.entry.js +2 -0
  463. package/dist/core/p-6cdf5de2.entry.js.map +1 -0
  464. package/dist/core/p-70ad364c.entry.js +2 -0
  465. package/dist/core/p-70ad364c.entry.js.map +1 -0
  466. package/dist/core/p-70c659ec.entry.js +2 -0
  467. package/dist/core/p-70c659ec.entry.js.map +1 -0
  468. package/dist/core/p-74b42302.entry.js +2 -0
  469. package/dist/core/p-74b42302.entry.js.map +1 -0
  470. package/dist/core/p-75bd12f8.entry.js +2 -0
  471. package/dist/core/p-75bd12f8.entry.js.map +1 -0
  472. package/dist/core/p-780294b8.entry.js +2 -0
  473. package/dist/core/p-780294b8.entry.js.map +1 -0
  474. package/dist/core/{p-baf81f30.entry.js → p-787ffd96.entry.js} +2 -2
  475. package/dist/core/p-787ffd96.entry.js.map +1 -0
  476. package/dist/core/p-7edc19be.entry.js +2 -0
  477. package/dist/core/p-7edc19be.entry.js.map +1 -0
  478. package/dist/core/p-8ab58daa.js +2 -0
  479. package/dist/core/p-8ab58daa.js.map +1 -0
  480. package/dist/core/p-8ced1495.entry.js +2 -0
  481. package/dist/core/p-8ced1495.entry.js.map +1 -0
  482. package/dist/core/{p-939baa93.entry.js → p-95545b4c.entry.js} +2 -2
  483. package/dist/core/p-95545b4c.entry.js.map +1 -0
  484. package/dist/core/p-95d057b8.entry.js +2 -0
  485. package/dist/core/p-95d057b8.entry.js.map +1 -0
  486. package/dist/core/p-987cd821.entry.js +2 -0
  487. package/dist/core/p-987cd821.entry.js.map +1 -0
  488. package/dist/core/{p-41aa0ed3.entry.js → p-9b386822.entry.js} +2 -2
  489. package/dist/core/p-9b386822.entry.js.map +1 -0
  490. package/dist/core/{p-39e20b87.entry.js → p-9bbe221f.entry.js} +2 -2
  491. package/dist/core/{p-39e20b87.entry.js.map → p-9bbe221f.entry.js.map} +1 -1
  492. package/dist/core/p-9f157649.entry.js +2 -0
  493. package/dist/core/p-9f157649.entry.js.map +1 -0
  494. package/dist/core/{p-356b8a4c.entry.js → p-9f3cf053.entry.js} +2 -2
  495. package/dist/core/{p-356b8a4c.entry.js.map → p-9f3cf053.entry.js.map} +1 -1
  496. package/dist/core/p-9f58998d.entry.js +2 -0
  497. package/dist/core/p-9f58998d.entry.js.map +1 -0
  498. package/dist/core/p-a4f28ef1.entry.js +2 -0
  499. package/dist/core/p-a4f28ef1.entry.js.map +1 -0
  500. package/dist/core/p-ac8090a5.entry.js +2 -0
  501. package/dist/core/p-ac8090a5.entry.js.map +1 -0
  502. package/dist/core/p-b1f89f44.entry.js +2 -0
  503. package/dist/core/p-b1f89f44.entry.js.map +1 -0
  504. package/dist/core/p-bc350ec5.entry.js +2 -0
  505. package/dist/core/p-bc350ec5.entry.js.map +1 -0
  506. package/dist/core/p-bd0328f3.entry.js +2 -0
  507. package/dist/core/p-bd0328f3.entry.js.map +1 -0
  508. package/dist/core/p-bf06977d.js +2 -0
  509. package/dist/core/p-bf06977d.js.map +1 -0
  510. package/dist/core/p-c0a2a040.entry.js +2 -0
  511. package/dist/core/p-c0a2a040.entry.js.map +1 -0
  512. package/dist/core/p-cc0e0b46.entry.js +2 -0
  513. package/dist/core/p-cc0e0b46.entry.js.map +1 -0
  514. package/dist/core/p-d0020f6f.entry.js +2 -0
  515. package/dist/core/p-d0020f6f.entry.js.map +1 -0
  516. package/dist/core/{p-3d618bc2.entry.js → p-d1045cd5.entry.js} +2 -2
  517. package/dist/core/p-d56248df.entry.js +2 -0
  518. package/dist/core/p-d56248df.entry.js.map +1 -0
  519. package/dist/core/p-d921dc2c.entry.js +2 -0
  520. package/dist/core/p-d921dc2c.entry.js.map +1 -0
  521. package/dist/core/p-da398a5d.entry.js +2 -0
  522. package/dist/core/p-da398a5d.entry.js.map +1 -0
  523. package/dist/core/{p-2e9e8e7c.entry.js → p-db5af9f7.entry.js} +2 -2
  524. package/dist/core/p-db5af9f7.entry.js.map +1 -0
  525. package/dist/core/p-dd4c83ad.entry.js +2 -0
  526. package/dist/core/p-dd4c83ad.entry.js.map +1 -0
  527. package/dist/core/p-e362b5f3.entry.js +2 -0
  528. package/dist/core/p-e362b5f3.entry.js.map +1 -0
  529. package/dist/core/p-e89c2feb.entry.js +2 -0
  530. package/dist/core/p-e89c2feb.entry.js.map +1 -0
  531. package/dist/core/p-eaeaa096.entry.js +2 -0
  532. package/dist/core/p-eaeaa096.entry.js.map +1 -0
  533. package/dist/core/{p-c2b5e7b1.entry.js → p-eb87b43b.entry.js} +2 -2
  534. package/dist/core/{p-c2b5e7b1.entry.js.map → p-eb87b43b.entry.js.map} +1 -1
  535. package/dist/core/p-f5dfcf4f.entry.js +2 -0
  536. package/dist/core/p-f5dfcf4f.entry.js.map +1 -0
  537. package/dist/core/p-f5fbfbc9.entry.js +2 -0
  538. package/dist/core/p-f5fbfbc9.entry.js.map +1 -0
  539. package/dist/core/p-fac387e8.entry.js +2 -0
  540. package/dist/core/p-fac387e8.entry.js.map +1 -0
  541. package/dist/esm/core.js +1 -1
  542. package/dist/esm/date-helpers-0e5e32a7.js +136 -0
  543. package/dist/esm/date-helpers-0e5e32a7.js.map +1 -0
  544. package/dist/esm/helpers-948df101.js +403 -0
  545. package/dist/esm/helpers-948df101.js.map +1 -0
  546. package/dist/esm/{helpers-268c2b7f.js → helpers-cd64688a.js} +142 -99
  547. package/dist/esm/helpers-cd64688a.js.map +1 -0
  548. package/dist/esm/ic-accordion-group.entry.js +31 -4
  549. package/dist/esm/ic-accordion-group.entry.js.map +1 -1
  550. package/dist/esm/ic-accordion.entry.js +11 -4
  551. package/dist/esm/ic-accordion.entry.js.map +1 -1
  552. package/dist/esm/ic-alert.entry.js +20 -6
  553. package/dist/esm/ic-alert.entry.js.map +1 -1
  554. package/dist/esm/ic-back-to-top.entry.js +26 -17
  555. package/dist/esm/ic-back-to-top.entry.js.map +1 -1
  556. package/dist/esm/ic-badge.entry.js +86 -83
  557. package/dist/esm/ic-badge.entry.js.map +1 -1
  558. package/dist/esm/ic-breadcrumb-group.entry.js +62 -25
  559. package/dist/esm/ic-breadcrumb-group.entry.js.map +1 -1
  560. package/dist/esm/ic-breadcrumb.entry.js +2 -2
  561. package/dist/esm/ic-breadcrumb.entry.js.map +1 -1
  562. package/dist/esm/ic-button_3.entry.js +145 -103
  563. package/dist/esm/ic-button_3.entry.js.map +1 -1
  564. package/dist/esm/ic-card-horizontal.entry.js +126 -0
  565. package/dist/esm/ic-card-horizontal.entry.js.map +1 -0
  566. package/dist/esm/ic-card.entry.js +30 -7
  567. package/dist/esm/ic-card.entry.js.map +1 -1
  568. package/dist/esm/ic-checkbox-group.entry.js +28 -17
  569. package/dist/esm/ic-checkbox-group.entry.js.map +1 -1
  570. package/dist/esm/ic-checkbox.entry.js +50 -31
  571. package/dist/esm/ic-checkbox.entry.js.map +1 -1
  572. package/dist/esm/ic-chip.entry.js +45 -21
  573. package/dist/esm/ic-chip.entry.js.map +1 -1
  574. package/dist/esm/ic-classification-banner.entry.js +14 -5
  575. package/dist/esm/ic-classification-banner.entry.js.map +1 -1
  576. package/dist/esm/ic-data-entity.entry.js +3 -6
  577. package/dist/esm/ic-data-entity.entry.js.map +1 -1
  578. package/dist/esm/ic-data-row.entry.js +21 -35
  579. package/dist/esm/ic-data-row.entry.js.map +1 -1
  580. package/dist/esm/ic-data-table-title-bar.entry.js +53 -0
  581. package/dist/esm/ic-data-table-title-bar.entry.js.map +1 -0
  582. package/dist/esm/ic-data-table.entry.js +1080 -85
  583. package/dist/esm/ic-data-table.entry.js.map +1 -1
  584. package/dist/esm/ic-date-input.entry.js +1119 -0
  585. package/dist/esm/ic-date-input.entry.js.map +1 -0
  586. package/dist/esm/ic-date-picker.entry.js +1125 -0
  587. package/dist/esm/ic-date-picker.entry.js.map +1 -0
  588. package/dist/esm/ic-dialog.entry.js +54 -12
  589. package/dist/esm/ic-dialog.entry.js.map +1 -1
  590. package/dist/esm/ic-divider.entry.js +1 -1
  591. package/dist/esm/ic-empty-state_2.entry.js +383 -0
  592. package/dist/esm/ic-empty-state_2.entry.js.map +1 -0
  593. package/dist/esm/ic-footer-link-group.entry.js +4 -4
  594. package/dist/esm/ic-footer-link-group.entry.js.map +1 -1
  595. package/dist/esm/ic-footer-link.entry.js +3 -3
  596. package/dist/esm/ic-footer-link.entry.js.map +1 -1
  597. package/dist/esm/ic-footer.entry.js +18 -7
  598. package/dist/esm/ic-footer.entry.js.map +1 -1
  599. package/dist/esm/ic-hero.entry.js +12 -2
  600. package/dist/esm/ic-hero.entry.js.map +1 -1
  601. package/dist/esm/ic-horizontal-scroll.entry.js +5 -5
  602. package/dist/esm/ic-horizontal-scroll.entry.js.map +1 -1
  603. package/dist/esm/ic-input-component-container_4.entry.js +157 -0
  604. package/dist/esm/ic-input-component-container_4.entry.js.map +1 -0
  605. package/dist/esm/ic-link.entry.js +35 -17
  606. package/dist/esm/ic-link.entry.js.map +1 -1
  607. package/dist/esm/ic-menu-group.entry.js +2 -2
  608. package/dist/esm/ic-menu-group.entry.js.map +1 -1
  609. package/dist/esm/ic-menu-item.entry.js +21 -20
  610. package/dist/esm/ic-menu-item.entry.js.map +1 -1
  611. package/dist/esm/ic-menu-with-multi.entry.js +2736 -0
  612. package/dist/esm/ic-menu-with-multi.entry.js.map +1 -0
  613. package/dist/esm/{ic-input-component-container_3.entry.js → ic-menu.entry.js} +19 -80
  614. package/dist/esm/ic-menu.entry.js.map +1 -0
  615. package/dist/esm/ic-navigation-button.entry.js +29 -8
  616. package/dist/esm/ic-navigation-button.entry.js.map +1 -1
  617. package/dist/esm/ic-navigation-group.entry.js +33 -23
  618. package/dist/esm/ic-navigation-group.entry.js.map +1 -1
  619. package/dist/esm/ic-navigation-item.entry.js +83 -37
  620. package/dist/esm/ic-navigation-item.entry.js.map +1 -1
  621. package/dist/esm/ic-navigation-menu.entry.js +1 -1
  622. package/dist/esm/ic-page-header.entry.js +10 -10
  623. package/dist/esm/ic-page-header.entry.js.map +1 -1
  624. package/dist/esm/ic-pagination_4.entry.js +232 -117
  625. package/dist/esm/ic-pagination_4.entry.js.map +1 -1
  626. package/dist/esm/ic-popover-menu.entry.js +40 -36
  627. package/dist/esm/ic-popover-menu.entry.js.map +1 -1
  628. package/dist/esm/ic-radio-group.entry.js +100 -59
  629. package/dist/esm/ic-radio-group.entry.js.map +1 -1
  630. package/dist/esm/ic-radio-option.entry.js +59 -42
  631. package/dist/esm/ic-radio-option.entry.js.map +1 -1
  632. package/dist/esm/ic-search-bar.entry.js +22 -30
  633. package/dist/esm/ic-search-bar.entry.js.map +1 -1
  634. package/dist/esm/ic-section-container.entry.js +1 -1
  635. package/dist/esm/ic-section-container.entry.js.map +1 -1
  636. package/dist/esm/ic-select-with-multi.entry.js +792 -0
  637. package/dist/esm/ic-select-with-multi.entry.js.map +1 -0
  638. package/dist/esm/ic-side-navigation.entry.js +53 -73
  639. package/dist/esm/ic-side-navigation.entry.js.map +1 -1
  640. package/dist/esm/ic-skeleton.entry.js +16 -35
  641. package/dist/esm/ic-skeleton.entry.js.map +1 -1
  642. package/dist/esm/ic-status-tag.entry.js +4 -2
  643. package/dist/esm/ic-status-tag.entry.js.map +1 -1
  644. package/dist/esm/ic-step.entry.js +5 -2
  645. package/dist/esm/ic-step.entry.js.map +1 -1
  646. package/dist/esm/ic-stepper.entry.js +31 -9
  647. package/dist/esm/ic-stepper.entry.js.map +1 -1
  648. package/dist/esm/ic-switch.entry.js +7 -3
  649. package/dist/esm/ic-switch.entry.js.map +1 -1
  650. package/dist/esm/ic-tab-context.entry.js +78 -130
  651. package/dist/esm/ic-tab-context.entry.js.map +1 -1
  652. package/dist/esm/ic-tab-group.entry.js +1 -1
  653. package/dist/esm/ic-tab-panel.entry.js +5 -13
  654. package/dist/esm/ic-tab-panel.entry.js.map +1 -1
  655. package/dist/esm/ic-tab.entry.js +16 -14
  656. package/dist/esm/ic-tab.entry.js.map +1 -1
  657. package/dist/esm/ic-theme.entry.js +13 -22
  658. package/dist/esm/ic-theme.entry.js.map +1 -1
  659. package/dist/esm/ic-toast-region.entry.js +6 -0
  660. package/dist/esm/ic-toast-region.entry.js.map +1 -1
  661. package/dist/esm/ic-toast.entry.js +21 -18
  662. package/dist/esm/ic-toast.entry.js.map +1 -1
  663. package/dist/esm/ic-toggle-button-group.entry.js +197 -0
  664. package/dist/esm/ic-toggle-button-group.entry.js.map +1 -0
  665. package/dist/esm/ic-toggle-button.entry.js +93 -0
  666. package/dist/esm/ic-toggle-button.entry.js.map +1 -0
  667. package/dist/esm/ic-top-navigation.entry.js +60 -82
  668. package/dist/esm/ic-top-navigation.entry.js.map +1 -1
  669. package/dist/esm/ic-tree-item.entry.js +249 -0
  670. package/dist/esm/ic-tree-item.entry.js.map +1 -0
  671. package/dist/esm/ic-tree-view.entry.js +211 -0
  672. package/dist/esm/ic-tree-view.entry.js.map +1 -0
  673. package/dist/esm/ic-typography.entry.js +52 -15
  674. package/dist/esm/ic-typography.entry.js.map +1 -1
  675. package/dist/esm/index-93509377.js +48 -12
  676. package/dist/esm/loader.js +1 -1
  677. package/dist/types/components/ic-card-horizontal/ic-card-horizontal.d.ts +71 -0
  678. package/dist/types/components/ic-card-horizontal/ic-card-horizontal.stories.d.ts +82 -0
  679. package/dist/types/components/ic-card-horizontal/ic-card-horizontal.types.d.ts +1 -0
  680. package/dist/types/components/ic-data-table/ic-data-table.d.ts +218 -19
  681. package/dist/types/components/ic-data-table/ic-data-table.stories.d.ts +239 -0
  682. package/dist/types/components/ic-data-table/ic-data-table.types.d.ts +43 -0
  683. package/dist/types/components/ic-data-table/story-data.d.ts +492 -2
  684. package/dist/types/components/ic-data-table-title-bar/ic-data-table-title-bar.d.ts +36 -0
  685. package/dist/types/components/ic-data-table-title-bar/ic-data-table-title-bar.stories.d.ts +47 -0
  686. package/dist/types/components/ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.d.ts +1 -0
  687. package/dist/types/components/ic-date-input/ic-date-input.d.ts +264 -0
  688. package/dist/types/components/ic-date-input/ic-date-input.stories.d.ts +124 -0
  689. package/dist/types/components/ic-date-input/story-data.d.ts +1 -0
  690. package/dist/types/components/ic-date-input/test/helpers/ic-date-input.d.ts +23 -0
  691. package/dist/types/components/ic-date-picker/ic-date-picker.d.ts +262 -0
  692. package/dist/types/components/ic-date-picker/ic-date-picker.stories.d.ts +153 -0
  693. package/dist/types/components/ic-date-picker/ic-day-button.d.ts +16 -0
  694. package/dist/types/components/ic-date-picker/ic-month-picker.d.ts +14 -0
  695. package/dist/types/components/ic-date-picker/ic-year-picker.d.ts +16 -0
  696. package/dist/types/components/ic-date-picker/story-data.d.ts +24 -0
  697. package/dist/types/components/ic-date-picker/test/a11y/ic-date-picker.test.a11y.d.ts +1 -0
  698. package/dist/types/components/ic-menu-with-multi/ic-menu.d.ts +218 -0
  699. package/dist/types/components/ic-pagination-bar/ic-pagination-bar.d.ts +65 -23
  700. package/dist/types/components/ic-pagination-bar/ic-pagination-bar.stories.d.ts +106 -0
  701. package/dist/types/components/ic-pagination-bar/ic-pagination-bar.types.d.ts +4 -0
  702. package/dist/types/components/ic-select-with-multi/ic-select-multi.stories.d.ts +106 -0
  703. package/dist/types/components/ic-select-with-multi/ic-select.d.ts +289 -0
  704. package/dist/types/components/ic-select-with-multi/story-data.d.ts +32 -0
  705. package/dist/types/components/ic-tree-item/ic-tree-item.d.ts +101 -0
  706. package/dist/types/components/ic-tree-view/ic-tree-view.d.ts +51 -0
  707. package/dist/types/components/ic-tree-view/ic-tree-view.stories.d.ts +99 -0
  708. package/dist/types/components.d.ts +1711 -127
  709. package/dist/types/interface.d.ts +1 -0
  710. package/dist/types/utils/constants.d.ts +38 -0
  711. package/dist/types/utils/date-helpers.d.ts +22 -0
  712. package/dist/types/utils/helpers.d.ts +144 -2
  713. package/dist/types/utils/types.d.ts +126 -0
  714. package/hydrate/index.js +18298 -9132
  715. package/package.json +27 -17
  716. package/dist/cjs/helpers-bbe55215.js.map +0 -1
  717. package/dist/cjs/ic-empty-state.cjs.entry.js +0 -38
  718. package/dist/cjs/ic-empty-state.cjs.entry.js.map +0 -1
  719. package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +0 -1
  720. package/dist/cjs/ic-input-label_2.cjs.entry.js +0 -86
  721. package/dist/cjs/ic-input-label_2.cjs.entry.js.map +0 -1
  722. package/dist/cjs/ic-pagination-bar.cjs.entry.js +0 -285
  723. package/dist/cjs/ic-pagination-bar.cjs.entry.js.map +0 -1
  724. package/dist/collection/components/ic-pagination/ic-pagination.types.js +0 -2
  725. package/dist/collection/components/ic-pagination/ic-pagination.types.js.map +0 -1
  726. package/dist/core/p-0083465b.entry.js +0 -2
  727. package/dist/core/p-0083465b.entry.js.map +0 -1
  728. package/dist/core/p-03487f12.entry.js +0 -2
  729. package/dist/core/p-03487f12.entry.js.map +0 -1
  730. package/dist/core/p-03f8fa1a.entry.js +0 -2
  731. package/dist/core/p-03f8fa1a.entry.js.map +0 -1
  732. package/dist/core/p-0c18b6a0.entry.js +0 -2
  733. package/dist/core/p-0c18b6a0.entry.js.map +0 -1
  734. package/dist/core/p-1bc034aa.entry.js +0 -2
  735. package/dist/core/p-1bc034aa.entry.js.map +0 -1
  736. package/dist/core/p-20a76d1d.entry.js +0 -2
  737. package/dist/core/p-20a76d1d.entry.js.map +0 -1
  738. package/dist/core/p-24945ee5.entry.js.map +0 -1
  739. package/dist/core/p-2dc35696.entry.js +0 -2
  740. package/dist/core/p-2dc35696.entry.js.map +0 -1
  741. package/dist/core/p-2e9e8e7c.entry.js.map +0 -1
  742. package/dist/core/p-3ee25a6d.entry.js +0 -2
  743. package/dist/core/p-3ee25a6d.entry.js.map +0 -1
  744. package/dist/core/p-41aa0ed3.entry.js.map +0 -1
  745. package/dist/core/p-4314aa0e.entry.js +0 -2
  746. package/dist/core/p-4314aa0e.entry.js.map +0 -1
  747. package/dist/core/p-4409f656.entry.js.map +0 -1
  748. package/dist/core/p-47abbd06.entry.js +0 -2
  749. package/dist/core/p-47abbd06.entry.js.map +0 -1
  750. package/dist/core/p-485823b6.entry.js +0 -2
  751. package/dist/core/p-485823b6.entry.js.map +0 -1
  752. package/dist/core/p-4ee59448.entry.js +0 -2
  753. package/dist/core/p-4ee59448.entry.js.map +0 -1
  754. package/dist/core/p-5157cfab.entry.js +0 -2
  755. package/dist/core/p-5157cfab.entry.js.map +0 -1
  756. package/dist/core/p-53083575.entry.js +0 -2
  757. package/dist/core/p-53083575.entry.js.map +0 -1
  758. package/dist/core/p-55d5541f.entry.js +0 -2
  759. package/dist/core/p-55d5541f.entry.js.map +0 -1
  760. package/dist/core/p-5bb32ee6.entry.js +0 -2
  761. package/dist/core/p-5bb32ee6.entry.js.map +0 -1
  762. package/dist/core/p-67eea079.entry.js +0 -2
  763. package/dist/core/p-67eea079.entry.js.map +0 -1
  764. package/dist/core/p-6bd0e984.entry.js +0 -2
  765. package/dist/core/p-6bd0e984.entry.js.map +0 -1
  766. package/dist/core/p-75bf6162.entry.js +0 -2
  767. package/dist/core/p-75bf6162.entry.js.map +0 -1
  768. package/dist/core/p-76959313.entry.js +0 -2
  769. package/dist/core/p-76959313.entry.js.map +0 -1
  770. package/dist/core/p-7de813a3.entry.js +0 -2
  771. package/dist/core/p-7de813a3.entry.js.map +0 -1
  772. package/dist/core/p-7eae5f70.entry.js +0 -2
  773. package/dist/core/p-7eae5f70.entry.js.map +0 -1
  774. package/dist/core/p-85508347.entry.js +0 -2
  775. package/dist/core/p-85508347.entry.js.map +0 -1
  776. package/dist/core/p-8da152c4.entry.js +0 -2
  777. package/dist/core/p-8da152c4.entry.js.map +0 -1
  778. package/dist/core/p-8fd4ca0a.js +0 -2
  779. package/dist/core/p-8fd4ca0a.js.map +0 -1
  780. package/dist/core/p-939baa93.entry.js.map +0 -1
  781. package/dist/core/p-9777ebb1.entry.js +0 -2
  782. package/dist/core/p-9777ebb1.entry.js.map +0 -1
  783. package/dist/core/p-9c27b73e.entry.js +0 -2
  784. package/dist/core/p-9c27b73e.entry.js.map +0 -1
  785. package/dist/core/p-9fa6844f.entry.js +0 -2
  786. package/dist/core/p-9fa6844f.entry.js.map +0 -1
  787. package/dist/core/p-9fdd7d73.entry.js +0 -2
  788. package/dist/core/p-9fdd7d73.entry.js.map +0 -1
  789. package/dist/core/p-a3ab9f4c.entry.js +0 -2
  790. package/dist/core/p-a3ab9f4c.entry.js.map +0 -1
  791. package/dist/core/p-a51e5c7c.entry.js +0 -2
  792. package/dist/core/p-a51e5c7c.entry.js.map +0 -1
  793. package/dist/core/p-a7481232.entry.js +0 -2
  794. package/dist/core/p-a7481232.entry.js.map +0 -1
  795. package/dist/core/p-ab9f8a3f.entry.js +0 -2
  796. package/dist/core/p-ab9f8a3f.entry.js.map +0 -1
  797. package/dist/core/p-b2aa3d7c.entry.js +0 -2
  798. package/dist/core/p-b2aa3d7c.entry.js.map +0 -1
  799. package/dist/core/p-b5cf6d65.entry.js +0 -2
  800. package/dist/core/p-b5cf6d65.entry.js.map +0 -1
  801. package/dist/core/p-baf81f30.entry.js.map +0 -1
  802. package/dist/core/p-bc187bb5.entry.js +0 -2
  803. package/dist/core/p-bc187bb5.entry.js.map +0 -1
  804. package/dist/core/p-bd9cecce.entry.js +0 -2
  805. package/dist/core/p-bd9cecce.entry.js.map +0 -1
  806. package/dist/core/p-be980606.entry.js +0 -2
  807. package/dist/core/p-be980606.entry.js.map +0 -1
  808. package/dist/core/p-c1256810.entry.js +0 -2
  809. package/dist/core/p-c1256810.entry.js.map +0 -1
  810. package/dist/core/p-d76cfa5a.entry.js +0 -2
  811. package/dist/core/p-d76cfa5a.entry.js.map +0 -1
  812. package/dist/core/p-e189f1d0.entry.js +0 -2
  813. package/dist/core/p-e189f1d0.entry.js.map +0 -1
  814. package/dist/core/p-e9e145aa.entry.js +0 -2
  815. package/dist/core/p-e9e145aa.entry.js.map +0 -1
  816. package/dist/core/p-f0e9a83f.entry.js +0 -2
  817. package/dist/core/p-f0e9a83f.entry.js.map +0 -1
  818. package/dist/core/p-f23d2102.entry.js +0 -2
  819. package/dist/core/p-f23d2102.entry.js.map +0 -1
  820. package/dist/core/p-f87e8411.entry.js +0 -2
  821. package/dist/core/p-f87e8411.entry.js.map +0 -1
  822. package/dist/esm/helpers-268c2b7f.js.map +0 -1
  823. package/dist/esm/ic-empty-state.entry.js.map +0 -1
  824. package/dist/esm/ic-input-component-container_3.entry.js.map +0 -1
  825. package/dist/esm/ic-input-label_2.entry.js +0 -81
  826. package/dist/esm/ic-input-label_2.entry.js.map +0 -1
  827. package/dist/esm/ic-pagination-bar.entry.js +0 -281
  828. package/dist/esm/ic-pagination-bar.entry.js.map +0 -1
  829. package/dist/types/components/ic-pagination/ic-pagination.types.d.ts +0 -6
  830. /package/dist/core/{p-b97dc365.entry.js.map → p-487fd924.entry.js.map} +0 -0
  831. /package/dist/core/{p-d77960f6.entry.js.map → p-656378ba.entry.js.map} +0 -0
  832. /package/dist/core/{p-3d618bc2.entry.js.map → p-d1045cd5.entry.js.map} +0 -0
@@ -1,15 +1,223 @@
1
- import { h } from "@stencil/core";
1
+ /* eslint-disable @typescript-eslint/no-explicit-any */
2
+ import { h, Fragment, Host, } from "@stencil/core";
2
3
  import unsortedIcon from "./assets/unsorted-icon.svg";
3
4
  import ascendingIcon from "./assets/ascending-icon.svg";
4
5
  import descendingIcon from "./assets/descending-icon.svg";
6
+ // Unable to import helper functions via @ukic/web-components
7
+ import { isEmptyString, isSlotUsed, pxToRem, addDataToPosition, dynamicDebounce, getSlotElements, checkResizeObserver, deviceSizeMatches, } from "../../utils/helpers";
8
+ import { IC_DEVICE_SIZES } from "../../utils/constants";
9
+ /**
10
+ * @slot empty-state - Content is slotted below the table header when there is no data and the table is not loading.
11
+ * @slot {COLUMN_KEY}-{ROW_INDEX}[-icon] - Each cell should have its own slot, named using the column tag and the row index, allowing for custom elements to be displayed. Include `-icon` at the end for that cell's icon slot.
12
+ * @slot {COLUMN_KEY}-column-icon - The icon slot for a column header.
13
+ * @slot title-bar - A custom ic-data-table-title-bar can be slotted above the column headers to display additional information about the table.
14
+ * @slot pagination-bar - A custom ic-pagination-bar can be slotted below the data to provide enhanced control over how the data is interacted with when being fetched externally.
15
+ */
5
16
  export class DataTable {
6
17
  constructor() {
18
+ this.DENSITY_HEIGHT_MULTIPLIER = {
19
+ dense: 0.8,
20
+ default: 1,
21
+ spacious: 1.2,
22
+ };
23
+ this.DENSITY_PADDING_HEIGHT_DIFF = {
24
+ dense: 8,
25
+ default: 16,
26
+ spacious: 20,
27
+ };
7
28
  this.SORT_ICONS = {
8
29
  unsorted: unsortedIcon,
9
30
  ascending: ascendingIcon,
10
31
  descending: descendingIcon,
11
32
  };
12
- this.isObject = (value) => typeof value === "object";
33
+ this.hasLoadedForOneSecond = true;
34
+ this.resizeObserver = null;
35
+ this.SHOW_HIDE_STRING = "show-hide";
36
+ this.SHOW_HIDE_CSS_CLASS = `${this.SHOW_HIDE_STRING}-wrap`;
37
+ this.TOOLTIP_STRING = "tooltip";
38
+ this.TOOLTIP = `ic-${this.TOOLTIP_STRING}`;
39
+ this.TEXT_WRAP_STRING = "text-wrap";
40
+ this.TEXT_WRAP_CLASS = `.${this.TEXT_WRAP_STRING}`;
41
+ this.dataUpdated = false;
42
+ this.rowHeightSet = false;
43
+ this.initialLoad = false;
44
+ this.icPageChangeEvent = false;
45
+ this.itemsPerPageChange = false;
46
+ this.DATA_ROW_HEIGHT_STRING = "data-row-height";
47
+ this.ROW_HEIGHT_CSS_VARIABLE = "--row-height";
48
+ this.LINE_CLAMP_CSS_VARIABLE = "--ic-line-clamp";
49
+ this.DEFAULT_LINE_HEIGHT = 24;
50
+ this.densityUpdate = false;
51
+ this.truncationPatternUpdated = false;
52
+ this.isNewDebounceDelaySet = false;
53
+ this.headerResizeObserver = null;
54
+ this.IC_TOOLTIP_STRING = "ic-tooltip";
55
+ this.SHOW_TRUNC_TOOLTIP_STRING = "show-trunc-tooltip";
56
+ this.CELL_DESCRIPTION_STRING = ".cell-description";
57
+ this.CELL_CONTAINER_WITH_DESCRIPTION_STRING = "cell-container-with-description";
58
+ this.CELL_TEXT_WRAPPER_STRING = ".cell-text-wrapper";
59
+ this.IC_TYPOGRAPHY_STRING = "ic-typography";
60
+ this.runHeaderResizeObserver = () => {
61
+ this.headerResizeObserver = new ResizeObserver(() => {
62
+ this.headerResizeCallback();
63
+ });
64
+ this.headerResizeObserver.observe(this.el);
65
+ };
66
+ this.headerResizeCallback = () => {
67
+ if (!this.hideColumnHeaders && this.columnHeaderTruncation) {
68
+ const tableContainerWidth = this.el.shadowRoot.querySelector(".table-container").clientWidth;
69
+ if (tableContainerWidth !== this.prevTableContainerWidth) {
70
+ const headers = this.el.shadowRoot.querySelectorAll("th.column-header");
71
+ headers.forEach((header) => {
72
+ const tooltip = header.querySelector(this.IC_TOOLTIP_STRING);
73
+ const typographyEls = header.querySelectorAll(this.IC_TYPOGRAPHY_STRING);
74
+ if (tooltip && typographyEls && typographyEls.length === 2) {
75
+ tooltip.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
76
+ if (typographyEls[1].clientWidth > typographyEls[0].clientWidth) {
77
+ tooltip.classList.add(this.SHOW_TRUNC_TOOLTIP_STRING);
78
+ }
79
+ }
80
+ });
81
+ this.prevTableContainerWidth = tableContainerWidth;
82
+ }
83
+ }
84
+ };
85
+ this.updateSetRowHeight = (typographyEl) => {
86
+ const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
87
+ if (typographyEl) {
88
+ const cellContainer = this.getCellContainer(typographyEl);
89
+ const rowHeight = fontSize *
90
+ parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
91
+ if (typographyEl.scrollHeight > rowHeight) {
92
+ cellContainer.style.removeProperty(this.ROW_HEIGHT_CSS_VARIABLE);
93
+ }
94
+ }
95
+ else {
96
+ this.getTypographyElements().forEach((typographyEl) => {
97
+ const cellContainer = this.getCellContainer(typographyEl);
98
+ const rowHeight = fontSize *
99
+ parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
100
+ if (typographyEl.scrollHeight > rowHeight) {
101
+ cellContainer.style.removeProperty(this.ROW_HEIGHT_CSS_VARIABLE);
102
+ }
103
+ });
104
+ }
105
+ };
106
+ this.debounceDataTruncation = () => {
107
+ this.getTypographyElements().forEach((typographyEl) => {
108
+ const cellContainer = this.getCellContainer(typographyEl);
109
+ if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
110
+ this.resizeObserver = new ResizeObserver(
111
+ // This gets triggered twice due to updated data and see more/see less button
112
+ dynamicDebounce(() => {
113
+ this.dataTruncation(typographyEl);
114
+ if (!this.isNewDebounceDelaySet) {
115
+ this.setNewDebounceDelay(200);
116
+ }
117
+ }, () => this.debounceDelay));
118
+ this.resizeObserver.observe(typographyEl);
119
+ }
120
+ });
121
+ };
122
+ this.setNewDebounceDelay = (delay) => {
123
+ this.debounceDelay = delay;
124
+ this.isNewDebounceDelaySet = true;
125
+ };
126
+ this.getLines = (height) => Math.floor(height / this.DEFAULT_LINE_HEIGHT);
127
+ this.truncate = (typographyEl, cellContainer, tooltip) => {
128
+ if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
129
+ //24 is the height of a single line
130
+ if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
131
+ if (this.truncationPattern === this.TOOLTIP_STRING) {
132
+ this.addTooltipTruncation(typographyEl, cellContainer, tooltip);
133
+ }
134
+ if (this.truncationPattern === this.SHOW_HIDE_STRING) {
135
+ this.addShowHideTruncation(cellContainer, typographyEl);
136
+ }
137
+ }
138
+ }
139
+ else {
140
+ if (this.truncationPattern === this.TOOLTIP_STRING && tooltip) {
141
+ typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
142
+ const cellTextWrapper = cellContainer.querySelector(this.CELL_TEXT_WRAPPER_STRING);
143
+ cellTextWrapper.prepend(typographyEl);
144
+ tooltip.remove();
145
+ }
146
+ if (this.truncationPattern === this.SHOW_HIDE_STRING &&
147
+ !isEmptyString(typographyEl.getAttribute("max-lines"))) {
148
+ this.resetShowHideTruncation(typographyEl);
149
+ }
150
+ }
151
+ };
152
+ this.dataTruncation = (typographyEl) => {
153
+ // Tooltip truncation mentioned in AC. Will need revisiting
154
+ const tooltip = this.getTooltip(typographyEl);
155
+ const cellContainer = this.getCellContainer(typographyEl);
156
+ if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.classList.contains("data-type-element")) ||
157
+ this.dataUpdated) {
158
+ return;
159
+ }
160
+ if (this.truncationPattern === this.SHOW_HIDE_STRING &&
161
+ typographyEl.shadowRoot.querySelector("button")) {
162
+ const showHideBtn = typographyEl.shadowRoot.querySelector("button");
163
+ // If the see more/see less is present and the max lines is equal to the cell container
164
+ // remove the see more/see less button
165
+ if (showHideBtn) {
166
+ const truncWrapper = this.getTruncWrapper(typographyEl);
167
+ if (this.getLines(truncWrapper.scrollHeight) ===
168
+ +typographyEl.getAttribute("max-lines")) {
169
+ this.resetShowHideTruncation(typographyEl);
170
+ }
171
+ }
172
+ }
173
+ // Deals with setting and resetting row height and re-truncating data
174
+ if (this.rowHeightSet && this.truncationPattern === this.SHOW_HIDE_STRING) {
175
+ const truncWrapper = this.getTruncWrapper(typographyEl);
176
+ // cellContainer.clientHeight - 24 removes the extra line by see more/see less
177
+ if (truncWrapper &&
178
+ cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >
179
+ truncWrapper.scrollHeight) {
180
+ this.resetShowHideTruncation(typographyEl);
181
+ return;
182
+ }
183
+ if (typographyEl.scrollHeight > cellContainer.clientHeight) {
184
+ this.addShowHideTruncation(cellContainer, typographyEl);
185
+ return;
186
+ }
187
+ }
188
+ if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > 0 &&
189
+ (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) > 0 &&
190
+ (typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) === (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
191
+ if (tooltip) {
192
+ this.removeTooltip(cellContainer, typographyEl, tooltip);
193
+ }
194
+ return;
195
+ }
196
+ this.truncate(typographyEl, cellContainer, tooltip);
197
+ };
198
+ this.getTruncWrapper = (typographyEl) => typographyEl.shadowRoot.querySelector(".trunc-wrapper");
199
+ this.removeTextWrap = () => {
200
+ this.getTypographyElements().forEach((typographyEl) => {
201
+ const tableCell = typographyEl.closest("td");
202
+ if (tableCell.classList.contains(this.TEXT_WRAP_STRING)) {
203
+ tableCell.classList.remove(this.TEXT_WRAP_STRING);
204
+ }
205
+ });
206
+ };
207
+ this.getCellContainer = (typographyEl) => {
208
+ return typographyEl.closest(".cell-container");
209
+ };
210
+ this.deleteTextWrapDataKey = (array) => Array.isArray(array) &&
211
+ array.forEach((val) => val.textWrap && delete val.textWrap);
212
+ this.startLoadingTimer = () => {
213
+ this.hasLoadedForOneSecond = false;
214
+ this.timerStarted = Date.now();
215
+ setTimeout(() => {
216
+ this.hasLoadedForOneSecond = true;
217
+ this.timerStarted = null;
218
+ }, this.minimumLoadingDisplayDuration);
219
+ };
220
+ this.isObject = (value) => value !== undefined && value !== null && typeof value === "object";
13
221
  this.notDefaultDensity = () => this.density !== "default";
14
222
  this.getCellContent = (cell, dataType) => {
15
223
  switch (dataType) {
@@ -26,9 +234,103 @@ export class DataTable {
26
234
  return this.getObjectValue(this.getObjectValue(cell, "cellAlignment"), alignment);
27
235
  }
28
236
  };
29
- this.createCells = (row) => {
237
+ this.getCellOptions = (cell, key) => {
238
+ if (!(this.isObject(cell) && Object.keys(cell).includes(key)))
239
+ return;
240
+ return this.getObjectValue(cell, key);
241
+ };
242
+ this.createUpdatingIndicator = () => {
243
+ const { appearance, description, max, min, progress } = this.updatingOptions || {};
244
+ return (h("th", { colSpan: this.columns.length, class: "updating-state" }, h("ic-loading-indicator", { appearance: appearance, description: description || "Updating table data", fullWidth: true, max: max, min: min, progress: progress, type: "linear", size: "small" })));
245
+ };
246
+ this.setRowHeight = (height) => {
247
+ return pxToRem(`${height * this.DENSITY_HEIGHT_MULTIPLIER[this.density] -
248
+ this.DENSITY_PADDING_HEIGHT_DIFF[this.density]}px`);
249
+ };
250
+ this.setTruncationClass = () => this.truncationPattern
251
+ ? { [`truncation-${this.truncationPattern}`]: true }
252
+ : {};
253
+ this.getColumnWidth = (columnWidth) => {
254
+ // TODO: Setting max width on columns
255
+ let columnWidthStyling = {};
256
+ if (columnWidth) {
257
+ if (typeof columnWidth === "string") {
258
+ columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-width"]: columnWidth });
259
+ }
260
+ if (typeof columnWidth === "object" && !!Object.keys(columnWidth)) {
261
+ if (columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.minWidth) {
262
+ columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-min-width"]: columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.minWidth });
263
+ }
264
+ if (columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.maxWidth) {
265
+ columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-max-width"]: columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.maxWidth });
266
+ }
267
+ }
268
+ }
269
+ return columnWidthStyling;
270
+ };
271
+ this.getRowHeight = (currentRowHeight, columnProps, rowTextWrap, cell) => {
272
+ if ((this.truncationPattern || currentRowHeight) &&
273
+ !(columnProps === null || columnProps === void 0 ? void 0 : columnProps.textWrap) &&
274
+ !rowTextWrap &&
275
+ !this.getCellOptions(cell, "textWrap") &&
276
+ (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element") {
277
+ return {
278
+ [this.ROW_HEIGHT_CSS_VARIABLE]: this.setRowHeight(currentRowHeight),
279
+ };
280
+ }
281
+ return {};
282
+ };
283
+ this.adjustWidthForActionElement = () => {
284
+ const elements = this.el.shadowRoot.querySelectorAll(".action-element");
285
+ elements.forEach((element) => {
286
+ const width = element.firstChild.getBoundingClientRect()
287
+ .width;
288
+ const gridWrapper = element.closest(".cell-grid-wrapper");
289
+ gridWrapper.style.gridTemplateColumns = `auto calc(${width}px + var(--ic-space-xs))`;
290
+ });
291
+ };
292
+ this.createCellContent = (columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis) => {
293
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
294
+ return (h("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
295
+ !isSlotUsed(this.el, cellSlotName)
296
+ ? cell
297
+ : null, class: Object.assign(Object.assign({ "cell-container": (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element", [`cell-alignment-${((_a = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _a === void 0 ? void 0 : _a.vertical) ||
298
+ ((_b = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
299
+ rowAlignment ||
300
+ this.getCellAlignment(cell, "vertical")}`]: !!((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.vertical) ||
301
+ !!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.vertical) ||
302
+ !!rowAlignment ||
303
+ !!this.getCellAlignment(cell, "vertical"), [`cell-alignment-${((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _e === void 0 ? void 0 : _e.horizontal) ||
304
+ ((_f = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _f === void 0 ? void 0 : _f.horizontal) ||
305
+ this.getCellAlignment(cell, "horizontal")}`]: !!((_g = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _g === void 0 ? void 0 : _g.horizontal) ||
306
+ !!((_h = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _h === void 0 ? void 0 : _h.horizontal) ||
307
+ !!this.getCellAlignment(cell, "horizontal"), [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true, [this.TEXT_WRAP_STRING]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.textWrap) ||
308
+ (rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap) ||
309
+ !!this.getCellOptions(cell, "textWrap"), ["cell-icon"]: hasIcon || !!((_j = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _j === void 0 ? void 0 : _j.icon) }, this.setTruncationClass()), { [this.CELL_CONTAINER_WITH_DESCRIPTION_STRING]: this.isObject(cell) && Object.keys(cell).includes("description") }), style: Object.assign(Object.assign({}, this.getRowHeight(currentRowHeight, columnProps, rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap, cell)), this.getColumnWidth(columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnWidth)), "data-row-height": this.truncationPattern || currentRowHeight
310
+ ? this.setRowHeight(currentRowHeight)
311
+ : null }, isSlotUsed(this.el, cellSlotName) ? (h("slot", { name: cellSlotName })) : (h(Fragment, null, isSlotUsed(this.el, `${cellSlotName}-icon`) ? (h("slot", { name: `${cellSlotName}-icon` })) : ((hasIcon || ((_k = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _k === void 0 ? void 0 : _k.onAllCells)) &&
312
+ (cellValue("icon") || ((_l = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _l === void 0 ? void 0 : _l.icon)) && (h("span", { class: "icon", innerHTML: cellValue("icon") || ((_m = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _m === void 0 ? void 0 : _m.icon) }))), (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element" &&
313
+ !isSlotUsed(this.el, cellSlotName) && (h("div", { class: {
314
+ "cell-text-wrapper": true,
315
+ "cell-text-no-wrap": !this.truncationPattern,
316
+ } }, h("ic-typography", { variant: "body", class: {
317
+ [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
318
+ (columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
319
+ rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
320
+ !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
321
+ !!rowEmphasis,
322
+ [`text-${this.density}`]: this.notDefaultDensity(),
323
+ } }, this.isObject(cell) && (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (h("ic-link", { href: cellValue("href"), target: cellValue("target") || undefined, rel: cellValue("rel") || undefined }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType))), this.isObject(cell) &&
324
+ Object.keys(cell).includes("description") && (h("div", { class: {
325
+ ["cell-description"]: true,
326
+ [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true,
327
+ } }, ((_o = cellValue("description")) === null || _o === void 0 ? void 0 : _o.icon) && (h("span", { class: "cell-description-icon", innerHTML: cellValue("description").icon })), h("ic-typography", { variant: "caption", class: "cell-description-text" }, (_q = (_p = cellValue("description")) === null || _p === void 0 ? void 0 : _p.data) !== null && _q !== void 0 ? _q : cellValue("description"))))))))));
328
+ };
329
+ this.createCells = (row, rowIndex) => {
330
+ var _a;
30
331
  const rowValues = Object.values(row);
31
332
  const rowKeys = Object.keys(row);
333
+ const rowOptions = this.getRowOptions(rowKeys, rowValues);
32
334
  let rowAlignment;
33
335
  let rowEmphasis;
34
336
  const headerIndex = rowKeys.indexOf("header");
@@ -36,70 +338,110 @@ export class DataTable {
36
338
  rowAlignment = this.getObjectValue(rowValues[headerIndex], "rowAlignment");
37
339
  rowEmphasis = this.getObjectValue(rowValues[headerIndex], "emphasis");
38
340
  }
341
+ const variableRowHeightVal = (_a = this.variableRowHeight) === null || _a === void 0 ? void 0 : _a.call(this, Object.assign(Object.assign({}, row), { index: rowIndex }));
342
+ const currentRowHeight = variableRowHeightVal
343
+ ? variableRowHeightVal !== "auto" && variableRowHeightVal
344
+ : this.globalRowHeight !== "auto" && this.globalRowHeight;
39
345
  return rowValues.map((cell, index) => {
40
- const { columnAlignment, dataType, emphasis } = this.columns[index];
346
+ const columnProps = this.columns[index];
347
+ const cellSlotName = `${columnProps === null || columnProps === void 0 ? void 0 : columnProps.key}-${rowIndex}`;
348
+ const hasIcon = this.isObject(cell) && Object.keys(cell).includes("icon");
41
349
  const cellValue = (key) => this.getObjectValue(cell, key);
42
- return rowKeys[index] === "header" ? (h("th", { scope: "row", colSpan: cellValue("colspan"), class: {
43
- ["row-header"]: true,
44
- [`row-header-alignment-${cellValue("cellAlignment")}`]: !!cellValue("cellAlignment"),
45
- ["row-header-sticky"]: this.stickyRowHeaders,
46
- } }, cellValue("title"))) : (h("td", { innerHTML: dataType === "element" ? cell : null, class: {
47
- ["table-cell"]: true,
48
- [`table-density-${this.density}`]: this.notDefaultDensity(),
49
- [`data-type-${dataType}`]: true,
50
- [`cell-alignment-${(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.horizontal) ||
51
- this.getCellAlignment(cell, "horizontal")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.horizontal) ||
52
- !!this.getCellAlignment(cell, "horizontal"),
53
- [`cell-alignment-${(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
54
- rowAlignment ||
55
- this.getCellAlignment(cell, "vertical")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
56
- !!rowAlignment ||
57
- !!this.getCellAlignment(cell, "vertical"),
58
- } }, h("ic-typography", { variant: "body", class: {
59
- [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
60
- emphasis ||
61
- rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
62
- !!emphasis ||
63
- !!rowEmphasis,
64
- [`text-${this.density}`]: this.notDefaultDensity(),
65
- } }, this.isObject(cell) && dataType !== "date" ? (Object.keys(cell).includes("href") ? (h("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, dataType)))));
350
+ if (rowKeys[index] === "header") {
351
+ return (h("th", { scope: "row", colSpan: cellValue("colspan"), class: {
352
+ ["row-header"]: true,
353
+ [`row-header-alignment-${cellValue("cellAlignment")}`]: !!cellValue("cellAlignment"),
354
+ ["row-header-sticky"]: this.stickyRowHeaders,
355
+ } }, cellValue("title")));
356
+ }
357
+ if (rowKeys[index] !== "rowOptions") {
358
+ return (h("td", { class: {
359
+ ["table-cell"]: true,
360
+ [`table-density-${this.density}`]: this.notDefaultDensity(),
361
+ ["with-overflow"]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element",
362
+ }, style: Object.assign({}, this.getColumnWidth(columnProps.columnWidth)) }, this.isObject(cell) &&
363
+ Object.keys(cell).includes("actionElement") ? (h("div", { class: "cell-grid-wrapper" }, this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis), h("span", { class: "action-element", innerHTML: cellValue("actionElement"),
364
+ // eslint-disable-next-line react/jsx-no-bind
365
+ onClick: cell.actionOnClick
366
+ ? (event) => this.handleClick(event, cell.actionOnClick)
367
+ : undefined }))) : (this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis))));
368
+ }
66
369
  });
67
370
  };
68
- this.createColumnHeaders = () => {
69
- return this.columns.map(({ cellAlignment, colspan, key, title }) => (h("th", { scope: "col", class: {
70
- ["column-header"]: true,
71
- [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,
72
- [`table-density-${this.density}`]: this.notDefaultDensity(),
73
- }, colSpan: colspan }, this.sortable ? (h("div", { class: "column-header-inner-container" }, h("ic-typography", { variant: "body", class: {
74
- ["column-header-text"]: true,
75
- [`text-${this.density}`]: this.notDefaultDensity(),
76
- } }, title), h("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
77
- // eslint-disable-next-line react/jsx-no-bind
78
- onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
79
- ? this.sortedColumnOrder
80
- : "unsorted"], class: {
81
- ["sort-button"]: true,
82
- ["sort-button-unsorted"]: this.sortedColumn !== key ||
83
- this.sortedColumnOrder === "unsorted",
84
- } }))) : (h("ic-typography", { variant: "body", class: {
85
- ["column-header-text"]: true,
86
- [`text-${this.density}`]: this.notDefaultDensity(),
87
- } }, title)))));
371
+ this.createColumnHeaders = () => (this.columns || []).map(({ cellAlignment, colspan, icon, key, title, columnWidth, excludeColumnFromSort, }, index) => (h("th", { scope: "col", class: {
372
+ ["column-header"]: true,
373
+ [`table-density-${this.density}`]: this.notDefaultDensity(),
374
+ ["updating-state-headers"]: this.updating && !this.loading,
375
+ }, style: Object.assign({}, this.getColumnWidth(columnWidth)), colSpan: colspan }, h("div", { class: {
376
+ "column-header-inner-container": true,
377
+ "truncation-tooltip": this.columnHeaderTruncation,
378
+ [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,
379
+ } }, isSlotUsed(this.el, `${key}-column-icon`) ? (h("slot", { name: `${key}-column-icon` })) : (icon &&
380
+ !icon.hideOnHeader && (h("span", { class: "icon", innerHTML: icon.icon }))), this.columnHeaderTruncation ? (h("ic-tooltip", { label: title, target: `column-header-${index}` }, h("ic-typography", { id: `column-header-${index}`, variant: "body", class: {
381
+ ["column-header-text"]: true,
382
+ [`text-${this.density}`]: this.notDefaultDensity(),
383
+ } }, title))) : (h("ic-typography", { variant: "body", class: {
384
+ ["column-header-text"]: true,
385
+ [`text-${this.density}`]: this.notDefaultDensity(),
386
+ } }, title)), this.sortable && !excludeColumnFromSort && (h("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
387
+ // eslint-disable-next-line react/jsx-no-bind
388
+ onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
389
+ ? this.sortedColumnOrder
390
+ : "unsorted"], class: {
391
+ ["sort-button"]: true,
392
+ ["sort-button-unsorted"]: this.sortedColumn !== key ||
393
+ this.sortedColumnOrder === "unsorted",
394
+ } }))), this.columnHeaderTruncation && (h("ic-typography", { variant: "body", "aria-hidden": "true", class: {
395
+ ["column-header-text"]: true,
396
+ ["dummy-column-header-text"]: this.columnHeaderTruncation,
397
+ [`text-${this.density}`]: this.notDefaultDensity(),
398
+ } }, title)))));
399
+ this.onRowClick = (row) => {
400
+ if (!this.loading && !this.updating) {
401
+ this.icSelectedRowChange.emit(this.selectedRow !== row ? row : null);
402
+ }
403
+ this.selectedRow =
404
+ this.selectedRow !== row && !this.loading && !this.updating && row;
88
405
  };
89
406
  this.createRows = () => {
90
407
  const data = this.showPagination
91
408
  ? this.data.slice(this.fromRow, this.toRow)
92
409
  : this.data.slice();
93
- return data
94
- .sort(!this.sortable ? undefined : this.getSortFunction())
95
- .map((row) => (h("tr", { onClick: () => (this.selectedRow = this.selectedRow !== row && row), class: {
96
- ["table-row"]: true,
97
- ["table-row-selected"]: this.selectedRow === row,
98
- } }, this.createCells(row))));
99
- };
100
- this.getObjectValue = (cell, key) => {
101
- return Object.values(cell)[Object.keys(cell).indexOf(key)];
410
+ const paginationOffset = this.showPagination ? this.fromRow : 0;
411
+ /**
412
+ * Ensures that createCells has a value in data to map over to actually render the slot.
413
+ * Removes the need for the user to add it multiple times.
414
+ * `addDataToPosition` used to add the element in the correct column order.
415
+ * Adding empty string value in to give `createCells` something to loop over.
416
+ */
417
+ const organisedData = data.map((row, rowIndex) => {
418
+ const slottedColumns = this.columns
419
+ .map(({ key }, index) => isSlotUsed(this.el, `${key}-${rowIndex + paginationOffset}`) && {
420
+ key,
421
+ index,
422
+ })
423
+ .filter((col) => !!col &&
424
+ // skip the column if its already in the row
425
+ !Object.prototype.hasOwnProperty.call(row, col.key));
426
+ return slottedColumns.length > 0
427
+ ? addDataToPosition(row, slottedColumns, "")
428
+ : row;
429
+ });
430
+ return organisedData
431
+ .sort(!this.sortable || this.disableAutoSort
432
+ ? undefined
433
+ : this.getSortFunction())
434
+ .map((row, index) => {
435
+ return (h("tr", {
436
+ // eslint-disable-next-line react/jsx-no-bind
437
+ onClick: () => this.onRowClick(row), class: {
438
+ ["table-row"]: true,
439
+ ["table-row-selected"]: this.highlightSelectedRow && this.selectedRow === row,
440
+ }
441
+ }, this.createCells(row, index + paginationOffset)));
442
+ });
102
443
  };
444
+ this.getObjectValue = (cell, key) => Object.values(cell)[Object.keys(cell).indexOf(key)];
103
445
  this.getSortButtonLabel = (key) => {
104
446
  let label = "";
105
447
  const getNextSortOption = (option) => {
@@ -155,10 +497,174 @@ export class DataTable {
155
497
  }
156
498
  this.sortedColumnOrder = sortOrders[nextSortOrderIndex];
157
499
  sortButton.setAttribute("aria-label", this.getSortButtonLabel(column));
500
+ this.tableSorted = true;
501
+ this.icSortChange.emit({
502
+ columnName: column,
503
+ sorted: this.sortedColumnOrder,
504
+ });
505
+ };
506
+ this.getTypographyElements = () => {
507
+ // Filter out column headers and cell descriptions
508
+ return Array.from(this.el.shadowRoot.querySelectorAll("ic-typography:not(.column-header-text,.cell-description-text)"));
509
+ };
510
+ this.getTooltip = (typographyEl) => {
511
+ return typographyEl.closest(this.TOOLTIP);
512
+ };
513
+ this.updateTruncationTooltip = (removeTooltipOnly = false) => {
514
+ this.getTypographyElements().forEach((typographyEl) => {
515
+ const tooltip = this.getTooltip(typographyEl);
516
+ const cellContainer = this.getCellContainer(typographyEl);
517
+ if (typographyEl.closest(this.TEXT_WRAP_CLASS)) {
518
+ this.removeTooltip(cellContainer, typographyEl, tooltip);
519
+ typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
520
+ return;
521
+ }
522
+ this.regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly);
523
+ });
158
524
  };
159
525
  this.updateScrollOffset = () => {
160
526
  this.scrollOffset = this.el.shadowRoot.querySelector(".table-row-container").scrollTop;
161
527
  };
528
+ this.updateRowHeightForDescriptions = (rowHeight, cellContainer) => {
529
+ cellContainer.setAttribute("data-row-height", rowHeight.toString());
530
+ cellContainer.setAttribute("style", `${this.ROW_HEIGHT_CSS_VARIABLE}: ${rowHeight}px`);
531
+ };
532
+ // Method to update the row heights on cells with descriptions and tooltip truncation
533
+ this.updateCellHeightsWithDescriptions = () => {
534
+ const descriptions = this.el.shadowRoot.querySelectorAll(this.CELL_DESCRIPTION_STRING);
535
+ descriptions.forEach((description) => {
536
+ const cellContainer = description.closest(`.${this.CELL_CONTAINER_WITH_DESCRIPTION_STRING}`);
537
+ const typography = cellContainer.querySelector(this.IC_TYPOGRAPHY_STRING);
538
+ const descriptionMarginTop = window
539
+ .getComputedStyle(description)
540
+ .getPropertyValue("margin-top");
541
+ const descriptionHeight = description.clientHeight + parseInt(descriptionMarginTop, 10);
542
+ if (this.globalRowHeight && this.globalRowHeight !== "auto") {
543
+ if (!typography.textContent &&
544
+ descriptionHeight + this.DEFAULT_LINE_HEIGHT > this.globalRowHeight) {
545
+ this.updateRowHeightForDescriptions(descriptionHeight, cellContainer);
546
+ }
547
+ else if (this.truncationPattern === this.TOOLTIP_STRING) {
548
+ if (descriptionHeight + this.DEFAULT_LINE_HEIGHT >
549
+ this.globalRowHeight) {
550
+ const cellIcon = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.querySelector(".icon");
551
+ if (deviceSizeMatches(IC_DEVICE_SIZES.XS) && cellIcon) {
552
+ // recalculate descriptionHeight as when a word break occurs this value changes
553
+ // Additional spacing given for 300-400% zoom
554
+ this.updateRowHeightForDescriptions(descriptionHeight +
555
+ this.DEFAULT_LINE_HEIGHT +
556
+ cellIcon.clientHeight, cellContainer);
557
+ }
558
+ else {
559
+ this.updateRowHeightForDescriptions(descriptionHeight + this.DEFAULT_LINE_HEIGHT, cellContainer);
560
+ }
561
+ }
562
+ this.addLineClampCSS(typography, cellContainer);
563
+ // Additional case for show/hide truncation for when a description is present, but the text
564
+ // isn't overflowing the cell to trigger the show more button to appear.
565
+ }
566
+ else if (this.truncationPattern === this.SHOW_HIDE_STRING &&
567
+ descriptionHeight + this.DEFAULT_LINE_HEIGHT > this.globalRowHeight &&
568
+ typography.style.getPropertyValue("--truncation-max-lines") !==
569
+ "initial") {
570
+ this.updateRowHeightForDescriptions(descriptionHeight + this.DEFAULT_LINE_HEIGHT, cellContainer);
571
+ if (descriptionHeight) {
572
+ this.createShowHideTruncation(typography, cellContainer, descriptionHeight);
573
+ }
574
+ }
575
+ }
576
+ });
577
+ };
578
+ this.setTableDimensions = () => {
579
+ let tableHostDimensions = {};
580
+ if (this.width) {
581
+ tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-width"]: this.width });
582
+ }
583
+ if (this.height) {
584
+ tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-height"]: this.height });
585
+ }
586
+ if (this.maxWidth) {
587
+ tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-max-width"]: this.maxWidth });
588
+ }
589
+ if (this.minWidth) {
590
+ tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-min-width"]: this.minWidth });
591
+ }
592
+ return tableHostDimensions;
593
+ };
594
+ this.fixCellTooltip = (element) => {
595
+ var _a;
596
+ const tooltipEl = (element.tagName === "IC-TOOLTIP"
597
+ ? element
598
+ : (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.IC_TOOLTIP_STRING));
599
+ if (tooltipEl) {
600
+ tooltipEl.setExternalPopperProps({
601
+ strategy: "fixed",
602
+ });
603
+ }
604
+ };
605
+ this.fixCellTooltips = () => {
606
+ const elements = this.el.shadowRoot.querySelectorAll(".data-type-element");
607
+ elements.forEach((element) => {
608
+ const slotElements = getSlotElements(element);
609
+ slotElements === null || slotElements === void 0 ? void 0 : slotElements.forEach((slottedEl) => {
610
+ this.fixCellTooltip(slottedEl);
611
+ });
612
+ });
613
+ const actionElements = this.el.shadowRoot.querySelectorAll(".action-element");
614
+ actionElements === null || actionElements === void 0 ? void 0 : actionElements.forEach((actionElementSpan) => {
615
+ const actionElement = actionElementSpan.firstChild;
616
+ if (actionElement) {
617
+ this.fixCellTooltip(actionElement);
618
+ }
619
+ });
620
+ };
621
+ this.handleClick = (event, callback) => callback(event);
622
+ this.renderTableBody = (data, loading, overlay) => {
623
+ if (!(data === null || data === void 0 ? void 0 : data.length))
624
+ return;
625
+ if (overlay && loading) {
626
+ return h("tbody", null, this.createRows());
627
+ }
628
+ else if (loading && !overlay) {
629
+ return null;
630
+ }
631
+ else {
632
+ return h("tbody", null, this.createRows());
633
+ }
634
+ };
635
+ this.renderLoadingIndicator = (isLoading, loadingOptions) => {
636
+ if (!isLoading)
637
+ return null;
638
+ return (h(Fragment, null, h("div", { class: "loading-overlay", ref: (el) => (this.loadingOverlay = el) }), h("ic-loading-indicator", { appearance: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.appearance, class: {
639
+ "loading-empty": isLoading,
640
+ loading: true,
641
+ "show-background": loadingOptions.showBackground || loadingOptions.overlay,
642
+ }, description: loadingOptions.description || "Loading table data", label: loadingOptions.label || "Loading...", labelDuration: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.labelDuration, max: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.max, min: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.min, progress: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.progress, ref: (el) => (this.loadingIndicator = el) })));
643
+ };
644
+ this.renderAriaLiveLoading = () => {
645
+ var _a, _b;
646
+ if (this.loading) {
647
+ return ((_a = this.loadingOptions) === null || _a === void 0 ? void 0 : _a.label) || "Loading...";
648
+ }
649
+ else if (this.updating) {
650
+ return ((_b = this.updatingOptions) === null || _b === void 0 ? void 0 : _b.description) || "Updating table data";
651
+ }
652
+ else {
653
+ return "";
654
+ }
655
+ };
656
+ this.renderEmptyState = (data, loading, overlay) => {
657
+ const emptyStateEl = isSlotUsed(this.el, "empty-state") ? (h("slot", { name: "empty-state" })) : (h("ic-empty-state", { aligned: "center", heading: "No Data", class: "loading-empty" }));
658
+ if (loading && !(data === null || data === void 0 ? void 0 : data.length) && overlay) {
659
+ return emptyStateEl;
660
+ }
661
+ else if (!loading && !(data === null || data === void 0 ? void 0 : data.length)) {
662
+ return emptyStateEl;
663
+ }
664
+ else {
665
+ return null;
666
+ }
667
+ };
162
668
  this.fromRow = 0;
163
669
  this.previousRowsPerPage = undefined;
164
670
  this.rowsPerPage = undefined;
@@ -168,23 +674,42 @@ export class DataTable {
168
674
  this.sortedColumn = undefined;
169
675
  this.sortedColumnOrder = undefined;
170
676
  this.toRow = undefined;
677
+ this.currentRowHeight = undefined;
678
+ this.debounceDelay = 0;
171
679
  this.caption = undefined;
680
+ this.columnHeaderTruncation = false;
172
681
  this.columns = undefined;
173
682
  this.data = undefined;
683
+ this.disableAutoSort = false;
174
684
  this.density = "default";
175
685
  this.embedded = false;
686
+ this.globalRowHeight = "auto";
687
+ this.height = undefined;
688
+ this.highlightSelectedRow = true;
176
689
  this.hideColumnHeaders = false;
177
- this.paginationOptions = {
178
- itemsPerPage: [
690
+ this.loading = false;
691
+ this.loadingOptions = undefined;
692
+ this.maxWidth = undefined;
693
+ this.minWidth = undefined;
694
+ this.minimumLoadingDisplayDuration = 1000;
695
+ this.paginationBarOptions = {
696
+ alignment: "right",
697
+ appearance: "default",
698
+ hideAllFromItemsPerPage: false,
699
+ hideRangeLabel: false,
700
+ itemLabel: "Item",
701
+ itemsPerPageOptions: [
179
702
  { label: "10", value: "10" },
180
703
  { label: "25", value: "25" },
181
704
  { label: "50", value: "50" },
182
705
  ],
183
- type: "page",
184
- control: "simple",
185
- itemsPerPageControl: true,
186
- goToPageControl: true,
187
- alignment: "right",
706
+ pageLabel: "Page",
707
+ rangeLabelType: "page",
708
+ selectedItemsPerPage: 10,
709
+ setToFirstPageOnPaginationChange: false,
710
+ showGoToPageControl: true,
711
+ showItemsPerPageControl: true,
712
+ type: "simple",
188
713
  };
189
714
  this.showPagination = false;
190
715
  this.sortable = false;
@@ -194,56 +719,524 @@ export class DataTable {
194
719
  };
195
720
  this.stickyColumnHeaders = false;
196
721
  this.stickyRowHeaders = false;
722
+ this.tableLayout = "fixed";
723
+ this.truncationPattern = undefined;
724
+ this.updating = false;
725
+ this.updatingOptions = undefined;
726
+ this.variableRowHeight = undefined;
727
+ this.width = undefined;
728
+ }
729
+ headerTruncationChangeHandler() {
730
+ if (this.columnHeaderTruncation) {
731
+ this.prevTableContainerWidth = 0;
732
+ }
733
+ else {
734
+ const headers = this.el.shadowRoot.querySelectorAll("th.column-header");
735
+ headers.forEach((header) => {
736
+ const tooltip = header.querySelector(this.IC_TOOLTIP_STRING);
737
+ if (tooltip) {
738
+ tooltip.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
739
+ }
740
+ });
741
+ }
742
+ }
743
+ disconnectedCallback() {
744
+ var _a, _b;
745
+ (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
746
+ (_b = this.headerResizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
197
747
  }
198
748
  componentWillLoad() {
199
- this.rowsPerPage = Number(this.paginationOptions.itemsPerPage[0].value);
749
+ var _a, _b;
750
+ this.rowsPerPage = Number(this.paginationBarOptions.itemsPerPageOptions[0].value);
200
751
  this.previousRowsPerPage = this.rowsPerPage;
201
752
  this.toRow = this.rowsPerPage;
202
753
  this.sortedColumn = this.sortOptions.defaultColumn;
203
754
  this.sortedColumnOrder = this.sortOptions.sortOrders[0];
755
+ this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 || !!((_b = this.loadingOptions) === null || _b === void 0 ? void 0 : _b.overlay) });
756
+ this.initialLoad = true;
757
+ this.previousItemsPerPage = this.rowsPerPage;
204
758
  }
205
759
  componentDidLoad() {
206
760
  const tableElement = this.el.shadowRoot.querySelector("table");
207
761
  const tableContainer = this.el.shadowRoot.querySelector(".table-container");
762
+ checkResizeObserver(this.runHeaderResizeObserver);
763
+ if (this.dataUpdated) {
764
+ this.dataUpdated = false;
765
+ }
208
766
  if ((tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientHeight) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientHeight) ||
209
767
  (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientWidth) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientWidth)) {
210
768
  this.scrollable = true;
211
769
  }
770
+ if (this.loading) {
771
+ this.startLoadingTimer();
772
+ this.showLoadingIndicator();
773
+ }
774
+ if (this.truncationPattern) {
775
+ this.getTypographyElements().forEach((typographyEl) => {
776
+ const cellContainer = this.getCellContainer(typographyEl);
777
+ if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
778
+ this.dataTruncation(typographyEl);
779
+ }
780
+ });
781
+ this.debounceDataTruncation();
782
+ }
783
+ if (this.globalRowHeight !== "auto") {
784
+ this.updateSetRowHeight();
785
+ }
786
+ window.addEventListener("resize", this.updateCellHeightsWithDescriptions);
212
787
  }
213
- handleItemsPerPageChange(ev) {
214
- this.previousRowsPerPage = this.rowsPerPage;
215
- this.rowsPerPage = ev.detail.value;
788
+ componentDidUpdate() {
789
+ // truncation updates invoked here once new/updated data has
790
+ // rendered to take into account updated .cell-container/ic-typography box model updates.
791
+ if (this.truncationPattern === this.SHOW_HIDE_STRING ||
792
+ this.truncationPattern === this.TOOLTIP_STRING) {
793
+ this.truncateUpdatedData();
794
+ }
216
795
  }
217
- handlePageChange(ev) {
218
- this.fromRow = (ev.detail.value - 1) * this.rowsPerPage;
219
- this.toRow = this.fromRow + this.rowsPerPage;
220
- const tableRowsContainer = this.el.shadowRoot.querySelector(".table-row-container");
221
- if (this.previousRowsPerPage === this.rowsPerPage) {
222
- tableRowsContainer.scrollTop = 0;
796
+ componentDidRender() {
797
+ this.fixCellTooltips();
798
+ this.updateCellHeightsWithDescriptions();
799
+ this.adjustWidthForActionElement();
800
+ }
801
+ truncateUpdatedData() {
802
+ if (this.dataUpdated) {
803
+ if (this.truncationPattern === this.SHOW_HIDE_STRING) {
804
+ this.getTypographyElements().forEach((typographyEl) => {
805
+ const truncWrapper = this.getTruncWrapper(typographyEl);
806
+ const cellContainer = this.getCellContainer(typographyEl);
807
+ if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >=
808
+ (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight)) {
809
+ this.resetShowHideTruncation(typographyEl);
810
+ return;
811
+ }
812
+ setTimeout(() => {
813
+ // slight delay due to data rendering
814
+ if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
815
+ this.addShowHideTruncation(cellContainer, typographyEl);
816
+ }
817
+ }, 150);
818
+ });
819
+ }
820
+ if (this.truncationPattern === this.TOOLTIP_STRING) {
821
+ this.updateTruncationTooltip();
822
+ }
823
+ this.dataUpdated = false;
223
824
  }
224
- else if (this.previousRowsPerPage < this.rowsPerPage) {
225
- tableRowsContainer.scrollTop = this.scrollOffset;
226
- this.previousRowsPerPage = this.rowsPerPage;
825
+ if (this.tableSorted) {
826
+ if (this.truncationPattern === this.TOOLTIP_STRING) {
827
+ this.updateTruncationTooltip();
828
+ }
829
+ if (this.truncationPattern === this.SHOW_HIDE_STRING) {
830
+ this.getTypographyElements().forEach((typographyEl) => {
831
+ const cellContainer = this.getCellContainer(typographyEl);
832
+ if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
833
+ this.createShowHideTruncation(typographyEl, cellContainer);
834
+ }
835
+ else {
836
+ typographyEl.resetTruncation().then(() => {
837
+ cellContainer.removeAttribute("style");
838
+ });
839
+ }
840
+ });
841
+ }
842
+ this.tableSorted = false;
843
+ }
844
+ // This function recalculates the tooltip truncation when the rowHeight has been set.
845
+ // This is in componentDidUpdate so a setTimeout is not used to wait for the render to be complete
846
+ if (this.rowHeightSet) {
847
+ const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
848
+ const hasAutoRowHeight = this.globalRowHeight === "auto";
849
+ this.getTypographyElements().forEach((typographyEl) => {
850
+ var _a;
851
+ const cellContainer = this.getCellContainer(typographyEl);
852
+ const tooltipEl = this.getTooltip(typographyEl);
853
+ if (hasAutoRowHeight) {
854
+ cellContainer.style.height = null;
855
+ if (this.truncationPattern === this.TOOLTIP_STRING) {
856
+ this.removeTooltip(cellContainer, typographyEl, tooltipEl);
857
+ typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
858
+ }
859
+ else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
860
+ this.resetShowHideTruncation(typographyEl);
861
+ }
862
+ return;
863
+ }
864
+ const rowHeight = fontSize *
865
+ parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
866
+ // If the set row height is bigger than the cell container even
867
+ // with textWrap, set the row height
868
+ if (!cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
869
+ !((_a = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.style) === null || _a === void 0 ? void 0 : _a.height) &&
870
+ rowHeight > cellContainer.clientHeight &&
871
+ !cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
872
+ cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
873
+ }
874
+ if (this.truncationPattern) {
875
+ // If the set row height is bigger than the typography truncation wrapper
876
+ // scroll height, remove see more / see less button
877
+ if (this.truncationPattern === this.SHOW_HIDE_STRING) {
878
+ const truncWrapper = this.getTruncWrapper(typographyEl);
879
+ const showHideBtn = typographyEl.shadowRoot.querySelector("button");
880
+ if (showHideBtn &&
881
+ (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight) <= cellContainer.clientHeight) {
882
+ this.resetShowHideTruncation(typographyEl);
883
+ return;
884
+ }
885
+ }
886
+ this.truncate(typographyEl, cellContainer, tooltipEl);
887
+ }
888
+ else {
889
+ this.updateSetRowHeight(typographyEl);
890
+ }
891
+ });
892
+ this.rowHeightSet = false;
893
+ }
894
+ // Only run truncation on the new rows
895
+ // when the number of items per page has increased
896
+ if (this.itemsPerPageChange) {
897
+ const allRows = this.el.shadowRoot.querySelectorAll(".table-row");
898
+ if (this.rowsPerPage > this.previousItemsPerPage) {
899
+ const newRows = Array.from(allRows).slice(this.previousItemsPerPage);
900
+ newRows.forEach((row) => {
901
+ row
902
+ .querySelectorAll(this.IC_TYPOGRAPHY_STRING)
903
+ .forEach((typographyEl) => {
904
+ const cellContainer = this.getCellContainer(typographyEl);
905
+ const tooltipEl = this.getTooltip(typographyEl);
906
+ this.truncate(typographyEl, cellContainer, tooltipEl);
907
+ });
908
+ });
909
+ }
910
+ this.previousItemsPerPage = this.rowsPerPage;
911
+ this.itemsPerPageChange = false;
912
+ }
913
+ if (!this.initialLoad && this.icPageChangeEvent) {
914
+ if (this.truncationPattern === this.TOOLTIP_STRING) {
915
+ this.updateTruncationTooltip();
916
+ }
917
+ // set truncation to see more if opened and next/previous page is pressed
918
+ if (this.truncationPattern === this.SHOW_HIDE_STRING) {
919
+ this.getTypographyElements().forEach((typographyEl) => {
920
+ const cellContainer = this.getCellContainer(typographyEl);
921
+ const showHideBtn = typographyEl.shadowRoot.querySelector("button");
922
+ if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > cellContainer.clientHeight &&
923
+ !showHideBtn) {
924
+ this.addShowHideTruncation(cellContainer, typographyEl);
925
+ }
926
+ });
927
+ }
928
+ this.icPageChangeEvent = false;
929
+ }
930
+ if (this.densityUpdate) {
931
+ this.getTypographyElements().forEach((typographyEl) => {
932
+ const cellContainer = this.getCellContainer(typographyEl);
933
+ const tooltipEl = this.getTooltip(typographyEl);
934
+ this.truncate(typographyEl, cellContainer, tooltipEl);
935
+ });
936
+ this.densityUpdate = false;
937
+ }
938
+ if (this.truncationPatternUpdated) {
939
+ if (this.truncationPattern === this.TOOLTIP_STRING) {
940
+ this.getTypographyElements().forEach((typographyEl) => {
941
+ const cellContainer = this.getCellContainer(typographyEl);
942
+ const tooltipEl = this.getTooltip(typographyEl);
943
+ if (typographyEl.scrollHeight > cellContainer.clientHeight) {
944
+ this.addTooltipTruncation(typographyEl, cellContainer, tooltipEl);
945
+ }
946
+ });
947
+ }
948
+ else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
949
+ this.getTypographyElements().forEach((typographyEl) => {
950
+ const truncWrapper = this.getTruncWrapper(typographyEl);
951
+ const cellContainer = this.getCellContainer(typographyEl);
952
+ if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >
953
+ (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight)) {
954
+ this.resetShowHideTruncation(typographyEl);
955
+ return;
956
+ }
957
+ if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
958
+ this.addShowHideTruncation(cellContainer, typographyEl);
959
+ }
960
+ });
961
+ }
962
+ }
963
+ }
964
+ createShowHideTruncation(typographyEl, cellContainer, descriptionHeight) {
965
+ typographyEl.checkMaxLines(typographyEl.scrollHeight);
966
+ typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
967
+ if (cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
968
+ descriptionHeight) {
969
+ typographyEl.setAttribute("max-lines", `${Math.floor(((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - descriptionHeight) /
970
+ this.DEFAULT_LINE_HEIGHT)}`);
227
971
  }
228
972
  else {
973
+ typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
974
+ }
975
+ typographyEl.setShowHideExpanded(false);
976
+ cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
977
+ }
978
+ addTooltipTruncation(typographyEl, cellContainer, tooltip) {
979
+ this.addLineClampCSS(typographyEl, cellContainer);
980
+ if (!tooltip) {
981
+ this.createTruncationTooltip(typographyEl, cellContainer);
982
+ }
983
+ }
984
+ addShowHideTruncation(cellContainer, typographyEl) {
985
+ cellContainer.classList.add(this.SHOW_HIDE_CSS_CLASS);
986
+ this.createShowHideTruncation(typographyEl, cellContainer);
987
+ }
988
+ // Set the height to initial if row height is set and the show / hide truncation
989
+ // is clicked
990
+ handleTypographyTruncationExpandToggle({ detail, }) {
991
+ const { expanded, typographyEl } = detail;
992
+ const cellContainer = this.getCellContainer(typographyEl);
993
+ if (cellContainer.style.getPropertyValue(this.ROW_HEIGHT_CSS_VARIABLE) &&
994
+ expanded) {
995
+ cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, "inherit");
996
+ }
997
+ }
998
+ handlePageChange({ detail, target }) {
999
+ if (target.parentElement !== this.el) {
1000
+ this.fromRow = (detail.value - 1) * this.rowsPerPage;
1001
+ this.toRow = this.fromRow + this.rowsPerPage;
1002
+ const tableRowsContainer = this.el.shadowRoot.querySelector(".table-row-container");
1003
+ if (this.previousRowsPerPage === this.rowsPerPage) {
1004
+ tableRowsContainer.scrollTop = 0;
1005
+ }
1006
+ else if (this.previousRowsPerPage < this.rowsPerPage) {
1007
+ tableRowsContainer.scrollTop = this.scrollOffset;
1008
+ this.previousRowsPerPage = this.rowsPerPage;
1009
+ }
1010
+ else {
1011
+ this.previousRowsPerPage = this.rowsPerPage;
1012
+ }
1013
+ }
1014
+ if (!this.initialLoad && this.previousPaginationPage !== detail.value) {
1015
+ // This is to prevent icPageChange from triggering truncation on first load
1016
+ this.icPageChangeEvent = true;
1017
+ }
1018
+ this.previousPaginationPage = detail.value;
1019
+ this.initialLoad = false;
1020
+ }
1021
+ handleItemsPerPageChange({ detail, target, }) {
1022
+ if (target.parentElement !== this.el) {
229
1023
  this.previousRowsPerPage = this.rowsPerPage;
1024
+ this.rowsPerPage = detail.value;
230
1025
  }
1026
+ this.itemsPerPageChange = true;
1027
+ }
1028
+ handleDensityChange(ev) {
1029
+ this.density = ev.detail.value;
231
1030
  }
232
1031
  clickListener(ev) {
233
1032
  if (ev.target !== this.el)
234
1033
  this.selectedRow = undefined;
235
1034
  }
1035
+ loadingHandler(newValue) {
1036
+ if (newValue)
1037
+ this.startLoadingTimer();
1038
+ if (this.loading) {
1039
+ setTimeout(() => {
1040
+ this.showLoadingIndicator();
1041
+ }, 500);
1042
+ }
1043
+ }
1044
+ truncationPatternHandler(newValue) {
1045
+ if (newValue === this.TOOLTIP_STRING) {
1046
+ this.resetShowHideTruncation();
1047
+ this.updateTruncationTooltip(true);
1048
+ // Not using debounceDataTruncation here due to resizeObserver not being triggered
1049
+ this.getTypographyElements().forEach((typographyEl) => {
1050
+ const cellContainer = this.getCellContainer(typographyEl);
1051
+ const tooltip = this.getTooltip(typographyEl);
1052
+ this.truncate(typographyEl, cellContainer, tooltip);
1053
+ });
1054
+ }
1055
+ if (newValue === this.SHOW_HIDE_STRING) {
1056
+ // ResizeObserver is trigger here due to the see more/see less links being removed.
1057
+ // The resizeObserver will also apply the tooltip where relevant
1058
+ this.updateTruncationTooltip(true);
1059
+ this.getTypographyElements().forEach((typographyEl) => {
1060
+ const truncWrapper = this.getTruncWrapper(typographyEl);
1061
+ const cellContainer = this.getCellContainer(typographyEl);
1062
+ if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >
1063
+ (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight)) {
1064
+ this.resetShowHideTruncation(typographyEl);
1065
+ return;
1066
+ }
1067
+ setTimeout(() => {
1068
+ // slight delay due to data rendering
1069
+ if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
1070
+ this.addShowHideTruncation(cellContainer, typographyEl);
1071
+ }
1072
+ }, 150);
1073
+ });
1074
+ }
1075
+ this.truncationPatternUpdated = true;
1076
+ }
1077
+ async dataHandler(newData) {
1078
+ var _a;
1079
+ this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: (newData === null || newData === void 0 ? void 0 : newData.length) > 0 || !!((_a = this.loadingOptions) === null || _a === void 0 ? void 0 : _a.overlay) });
1080
+ if (this.loading) {
1081
+ !this.hasLoadedForOneSecond
1082
+ ? setTimeout(() => (this.loading = false), this.minimumLoadingDisplayDuration -
1083
+ (Date.now() - this.timerStarted))
1084
+ : (this.loading = false);
1085
+ }
1086
+ if (this.updating)
1087
+ this.updating = false;
1088
+ this.dataUpdated = true;
1089
+ }
1090
+ async densityHandler() {
1091
+ this.densityUpdate = true;
1092
+ }
1093
+ resetShowHideTruncation(typographyEl) {
1094
+ if (typographyEl) {
1095
+ const truncWrapper = this.getTruncWrapper(typographyEl);
1096
+ const cellContainer = this.getCellContainer(typographyEl);
1097
+ if ((truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) &&
1098
+ !isEmptyString(typographyEl.getAttribute("max-lines")) &&
1099
+ Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT) !==
1100
+ +typographyEl.getAttribute("max-lines")) {
1101
+ typographyEl.checkMaxLines(truncWrapper.scrollHeight);
1102
+ typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
1103
+ typographyEl.setShowHideExpanded(false);
1104
+ cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
1105
+ }
1106
+ else if (!cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING)) {
1107
+ typographyEl.resetTruncation().then(() => {
1108
+ if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
1109
+ cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
1110
+ }
1111
+ });
1112
+ }
1113
+ }
1114
+ else {
1115
+ this.getTypographyElements().forEach((typographyEl) => {
1116
+ const cellContainer = this.getCellContainer(typographyEl);
1117
+ typographyEl.resetTruncation().then(() => {
1118
+ if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
1119
+ cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
1120
+ }
1121
+ });
1122
+ });
1123
+ }
1124
+ }
1125
+ rowHeightChangeHandler(newValue, oldValue) {
1126
+ if (+newValue !== +oldValue) {
1127
+ this.deleteTextWrapDataKey(this.data);
1128
+ this.deleteTextWrapDataKey(this.columns);
1129
+ this.removeTextWrap();
1130
+ this.icRowHeightChange.emit();
1131
+ this.rowHeightSet = true;
1132
+ }
1133
+ }
1134
+ /**
1135
+ * Resets the `globalRowHeight` prop to number or auto and sets the `variableRowHeight` prop to `null`.
1136
+ */
1137
+ async resetRowHeights(rowHeight) {
1138
+ this.globalRowHeight = rowHeight || "auto";
1139
+ this.variableRowHeight = null;
1140
+ }
1141
+ showLoadingIndicator() {
1142
+ var _a, _b, _c;
1143
+ if ((_a = this.loadingOptions) === null || _a === void 0 ? void 0 : _a.overlay) {
1144
+ (_b = this.loadingOverlay) === null || _b === void 0 ? void 0 : _b.classList.add("show");
1145
+ }
1146
+ (_c = this.loadingIndicator) === null || _c === void 0 ? void 0 : _c.classList.add("show");
1147
+ }
1148
+ getRowOptions(rowKeys, rowValues) {
1149
+ const rowOptionsIndex = rowKeys.indexOf("rowOptions");
1150
+ return rowOptionsIndex > -1 && rowValues[rowOptionsIndex];
1151
+ }
1152
+ regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly) {
1153
+ // When sorting the table, instead of regenerating the tooltip,
1154
+ // the tooltip details are updated
1155
+ if (tooltip) {
1156
+ if (this.tableSorted) {
1157
+ tooltip.setAttribute("target", typographyEl.id);
1158
+ tooltip.setAttribute("label", typographyEl.textContent);
1159
+ }
1160
+ else {
1161
+ this.removeTooltip(cellContainer, typographyEl, tooltip);
1162
+ }
1163
+ if (removeTooltipOnly) {
1164
+ return;
1165
+ }
1166
+ }
1167
+ // This add line clamp to data only when
1168
+ // the data object has been updated
1169
+ if (!typographyEl.getAttribute("style") && this.dataUpdated) {
1170
+ this.addLineClampCSS(typographyEl, cellContainer);
1171
+ }
1172
+ if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) &&
1173
+ this.truncationPattern === this.TOOLTIP_STRING) {
1174
+ if (!typographyEl.getAttribute("style") ||
1175
+ typographyEl.style.cssText.includes(`${this.LINE_CLAMP_CSS_VARIABLE}: 0;`)) {
1176
+ this.addLineClampCSS(typographyEl, cellContainer);
1177
+ }
1178
+ if (!cellContainer.querySelector(this.IC_TOOLTIP_STRING))
1179
+ this.createTruncationTooltip(typographyEl, cellContainer);
1180
+ }
1181
+ }
1182
+ removeTooltip(cellContainer, typographyEl, tooltip) {
1183
+ const cellTextWrapper = cellContainer.querySelector(this.CELL_TEXT_WRAPPER_STRING);
1184
+ cellTextWrapper.prepend(typographyEl);
1185
+ if (tooltip) {
1186
+ tooltip.remove();
1187
+ }
1188
+ }
1189
+ addLineClampCSS(typographyEl, cellContainer) {
1190
+ var _a, _b;
1191
+ const descriptionCellHeight = (_a = cellContainer.querySelector(this.CELL_DESCRIPTION_STRING)) === null || _a === void 0 ? void 0 : _a.clientHeight;
1192
+ if (cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
1193
+ (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) > descriptionCellHeight) {
1194
+ let iconHeight;
1195
+ if (deviceSizeMatches(IC_DEVICE_SIZES.XS)) {
1196
+ const cellIcon = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.querySelector(".icon");
1197
+ iconHeight = cellIcon ? cellIcon.clientHeight : 0;
1198
+ }
1199
+ else {
1200
+ iconHeight = 0;
1201
+ }
1202
+ const height = (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) -
1203
+ ((_b = cellContainer.querySelector(this.CELL_DESCRIPTION_STRING)) === null || _b === void 0 ? void 0 : _b.clientHeight) -
1204
+ iconHeight;
1205
+ typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: ${this.getLines(height || 0)}`);
1206
+ }
1207
+ else {
1208
+ typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: ${this.getLines(cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)}`);
1209
+ }
1210
+ }
1211
+ createTruncationTooltip(typographyEl, cellContainer) {
1212
+ const tooltipEl = document.createElement(this.IC_TOOLTIP_STRING);
1213
+ tooltipEl.setAttribute("target", typographyEl.id);
1214
+ tooltipEl.setAttribute("label", typographyEl.textContent);
1215
+ tooltipEl.classList.add("ic-tooltip-overflow");
1216
+ tooltipEl.setExternalPopperProps({
1217
+ // This might need reverting back to absolute if the tooltip doesn't dynamically position itself correctly
1218
+ strategy: "fixed",
1219
+ });
1220
+ const cellTextWrapper = cellContainer.querySelector(this.CELL_TEXT_WRAPPER_STRING);
1221
+ cellTextWrapper.prepend(tooltipEl);
1222
+ tooltipEl.prepend(typographyEl);
1223
+ }
236
1224
  render() {
237
- const { caption, createColumnHeaders, createRows, data, hideColumnHeaders, paginationOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumnOrder, sortedColumn, stickyColumnHeaders, updateScrollOffset, } = this;
238
- return (h("div", { class: "table-container" }, h("div", { class: {
1225
+ var _a, _b;
1226
+ const { caption, createColumnHeaders, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationBarOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumn, sortedColumnOrder, stickyColumnHeaders, updateScrollOffset, updating, } = this;
1227
+ return (h(Host, { style: Object.assign({}, this.setTableDimensions()) }, h("div", { class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { name: "title-bar" }), h("div", { class: {
239
1228
  ["table-row-container"]: true,
240
1229
  scrollable,
241
- }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, h("table", null, h("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { class: {
1230
+ }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, isSlotUsed(this.el, "title-bar") && h("slot", { name: "title-bar" }), h("table", { style: {
1231
+ ["--table-layout"]: this.tableLayout,
1232
+ } }, h("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { class: {
242
1233
  ["column-header-sticky"]: stickyColumnHeaders,
243
1234
  ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
244
- } }, h("tr", null, createColumnHeaders()))), (data === null || data === void 0 ? void 0 : data.length) > 0 && h("tbody", null, createRows()))), showPagination && (h("div", { class: "pagination-container" }, h("ic-pagination-bar", { totalItems: data.length, paginationType: paginationOptions.type, paginationControl: paginationOptions.control, showItemsPerPageControl: paginationOptions.itemsPerPageControl, showGoToPageControl: paginationOptions.goToPageControl, itemsPerPageOptions: paginationOptions.itemsPerPage, alignment: paginationOptions.alignment }))), sortable && (h("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
245
- ? `${sortedColumn} sorted ${sortedColumnOrder}`
246
- : "table unsorted"))));
1235
+ } }, h("tr", null, createColumnHeaders()))), updating &&
1236
+ !loading &&
1237
+ (hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(data, loading, loadingOptions.overlay)), this.renderEmptyState(data, loading, loadingOptions.overlay)), h("div", { "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { alignment: paginationBarOptions.alignment, appearance: paginationBarOptions.appearance, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, hideRangeLabel: paginationBarOptions.hideRangeLabel, itemLabel: paginationBarOptions.itemLabel, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, pageLabel: paginationBarOptions.pageLabel, rangeLabelType: paginationBarOptions.rangeLabelType, selectedItemsPerPage: paginationBarOptions.selectedItemsPerPage, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange, showGoToPageControl: paginationBarOptions.showGoToPageControl, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type })))), sortable && (h("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
1238
+ ? `${((_b = this.columns.find((col) => col.key === sortedColumn)) === null || _b === void 0 ? void 0 : _b.title) || sortedColumn} sorted ${sortedColumnOrder}`
1239
+ : "table unsorted")))));
247
1240
  }
248
1241
  static get is() { return "ic-data-table"; }
249
1242
  static get encapsulation() { return "shadow"; }
@@ -276,6 +1269,24 @@ export class DataTable {
276
1269
  "attribute": "caption",
277
1270
  "reflect": false
278
1271
  },
1272
+ "columnHeaderTruncation": {
1273
+ "type": "boolean",
1274
+ "mutable": false,
1275
+ "complexType": {
1276
+ "original": "boolean",
1277
+ "resolved": "boolean",
1278
+ "references": {}
1279
+ },
1280
+ "required": false,
1281
+ "optional": false,
1282
+ "docs": {
1283
+ "tags": [],
1284
+ "text": "Determines whether the column header should be truncated and display a tooltip. Default is `false`."
1285
+ },
1286
+ "attribute": "column-header-truncation",
1287
+ "reflect": false,
1288
+ "defaultValue": "false"
1289
+ },
279
1290
  "columns": {
280
1291
  "type": "unknown",
281
1292
  "mutable": false,
@@ -301,28 +1312,13 @@ export class DataTable {
301
1312
  "type": "unknown",
302
1313
  "mutable": false,
303
1314
  "complexType": {
304
- "original": "{ [key: string]: any }[]",
305
- "resolved": "{ [key: string]: any; }[]",
306
- "references": {}
307
- },
308
- "required": false,
309
- "optional": false,
310
- "docs": {
311
- "tags": [],
312
- "text": "The row content for the table."
313
- }
314
- },
315
- "density": {
316
- "type": "string",
317
- "mutable": false,
318
- "complexType": {
319
- "original": "IcDataTableDensityOptions",
320
- "resolved": "\"default\" | \"dense\" | \"spacious\"",
1315
+ "original": "IcDataTableDataType[]",
1316
+ "resolved": "IcDataTableDataType[]",
321
1317
  "references": {
322
- "IcDataTableDensityOptions": {
1318
+ "IcDataTableDataType": {
323
1319
  "location": "import",
324
1320
  "path": "./ic-data-table.types",
325
- "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableDensityOptions"
1321
+ "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableDataType"
326
1322
  }
327
1323
  }
328
1324
  },
@@ -330,7 +1326,46 @@ export class DataTable {
330
1326
  "optional": true,
331
1327
  "docs": {
332
1328
  "tags": [],
333
- "text": "Set the density of the table including font and padding."
1329
+ "text": "The row content for the table."
1330
+ }
1331
+ },
1332
+ "disableAutoSort": {
1333
+ "type": "boolean",
1334
+ "mutable": false,
1335
+ "complexType": {
1336
+ "original": "boolean",
1337
+ "resolved": "boolean",
1338
+ "references": {}
1339
+ },
1340
+ "required": false,
1341
+ "optional": true,
1342
+ "docs": {
1343
+ "tags": [],
1344
+ "text": "If `true`, the built in sort functionality will be disabled. For example, if rows will already be sorted from an external source."
1345
+ },
1346
+ "attribute": "disable-auto-sort",
1347
+ "reflect": false,
1348
+ "defaultValue": "false"
1349
+ },
1350
+ "density": {
1351
+ "type": "string",
1352
+ "mutable": true,
1353
+ "complexType": {
1354
+ "original": "IcDataTableDensityOptions",
1355
+ "resolved": "\"default\" | \"dense\" | \"spacious\"",
1356
+ "references": {
1357
+ "IcDataTableDensityOptions": {
1358
+ "location": "import",
1359
+ "path": "./ic-data-table.types",
1360
+ "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableDensityOptions"
1361
+ }
1362
+ }
1363
+ },
1364
+ "required": false,
1365
+ "optional": true,
1366
+ "docs": {
1367
+ "tags": [],
1368
+ "text": "Set the density of the table including font and padding."
334
1369
  },
335
1370
  "attribute": "density",
336
1371
  "reflect": false,
@@ -354,6 +1389,65 @@ export class DataTable {
354
1389
  "reflect": false,
355
1390
  "defaultValue": "false"
356
1391
  },
1392
+ "globalRowHeight": {
1393
+ "type": "any",
1394
+ "mutable": true,
1395
+ "complexType": {
1396
+ "original": "IcDataTableRowHeights",
1397
+ "resolved": "\"auto\" | number",
1398
+ "references": {
1399
+ "IcDataTableRowHeights": {
1400
+ "location": "import",
1401
+ "path": "./ic-data-table.types",
1402
+ "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableRowHeights"
1403
+ }
1404
+ }
1405
+ },
1406
+ "required": false,
1407
+ "optional": true,
1408
+ "docs": {
1409
+ "tags": [],
1410
+ "text": "Sets the row height on all rows in the table that aren't set using the `variableRowHeight` method."
1411
+ },
1412
+ "attribute": "global-row-height",
1413
+ "reflect": false,
1414
+ "defaultValue": "\"auto\""
1415
+ },
1416
+ "height": {
1417
+ "type": "string",
1418
+ "mutable": false,
1419
+ "complexType": {
1420
+ "original": "string",
1421
+ "resolved": "string",
1422
+ "references": {}
1423
+ },
1424
+ "required": false,
1425
+ "optional": true,
1426
+ "docs": {
1427
+ "tags": [],
1428
+ "text": "Sets the table height. Can be set to `auto` or a specific value in `px`, `rem`, or `%`."
1429
+ },
1430
+ "attribute": "height",
1431
+ "reflect": false
1432
+ },
1433
+ "highlightSelectedRow": {
1434
+ "type": "boolean",
1435
+ "mutable": false,
1436
+ "complexType": {
1437
+ "original": "boolean",
1438
+ "resolved": "boolean",
1439
+ "references": {}
1440
+ },
1441
+ "required": false,
1442
+ "optional": true,
1443
+ "docs": {
1444
+ "tags": [],
1445
+ "text": "If `true`, the selected row is highlighted using a background colour."
1446
+ },
1447
+ "attribute": "highlight-selected-row",
1448
+ "reflect": false,
1449
+ "defaultValue": "true"
1450
+ },
357
1451
  "hideColumnHeaders": {
358
1452
  "type": "boolean",
359
1453
  "mutable": false,
@@ -372,27 +1466,108 @@ export class DataTable {
372
1466
  "reflect": false,
373
1467
  "defaultValue": "false"
374
1468
  },
375
- "paginationOptions": {
1469
+ "loading": {
1470
+ "type": "boolean",
1471
+ "mutable": true,
1472
+ "complexType": {
1473
+ "original": "boolean",
1474
+ "resolved": "boolean",
1475
+ "references": {}
1476
+ },
1477
+ "required": false,
1478
+ "optional": true,
1479
+ "docs": {
1480
+ "tags": [],
1481
+ "text": "When set to `true`, the full table will show a loading state, featuring a radial indicator."
1482
+ },
1483
+ "attribute": "loading",
1484
+ "reflect": false,
1485
+ "defaultValue": "false"
1486
+ },
1487
+ "loadingOptions": {
376
1488
  "type": "unknown",
377
1489
  "mutable": false,
378
1490
  "complexType": {
379
- "original": "{\n itemsPerPage?: { label: string; value: string }[];\n type?: IcPaginationTypes;\n control?: IcPaginationControlTypes;\n itemsPerPageControl?: boolean;\n goToPageControl?: boolean;\n alignment?: IcPaginationAlignmentOptions;\n }",
380
- "resolved": "{ itemsPerPage?: { label: string; value: string; }[]; type?: IcPaginationTypes; control?: IcPaginationControlTypes; itemsPerPageControl?: boolean; goToPageControl?: boolean; alignment?: IcPaginationAlignmentOptions; }",
1491
+ "original": "{\n appearance?: IcThemeForegroundNoDefault;\n description?: string;\n label?: string;\n labelDuration?: number;\n max?: number;\n min?: number;\n progress?: number;\n showBackground?: boolean;\n overlay?: boolean;\n }",
1492
+ "resolved": "{ appearance?: IcThemeForegroundNoDefault; description?: string; label?: string; labelDuration?: number; max?: number; min?: number; progress?: number; showBackground?: boolean; overlay?: boolean; }",
381
1493
  "references": {
382
- "IcPaginationTypes": {
383
- "location": "import",
384
- "path": "../ic-pagination/ic-pagination.types",
385
- "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationTypes"
386
- },
387
- "IcPaginationControlTypes": {
1494
+ "IcThemeForegroundNoDefault": {
388
1495
  "location": "import",
389
- "path": "../ic-pagination/ic-pagination.types",
390
- "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationControlTypes"
391
- },
392
- "IcPaginationAlignmentOptions": {
1496
+ "path": "@ukic/web-components/dist/types/utils/types",
1497
+ "id": "../web-components/dist/types/utils/types.d.ts::IcThemeForegroundNoDefault"
1498
+ }
1499
+ }
1500
+ },
1501
+ "required": false,
1502
+ "optional": true,
1503
+ "docs": {
1504
+ "tags": [],
1505
+ "text": "Sets the props for the circular loading indicator used in the loading state."
1506
+ }
1507
+ },
1508
+ "maxWidth": {
1509
+ "type": "string",
1510
+ "mutable": false,
1511
+ "complexType": {
1512
+ "original": "string",
1513
+ "resolved": "string",
1514
+ "references": {}
1515
+ },
1516
+ "required": false,
1517
+ "optional": true,
1518
+ "docs": {
1519
+ "tags": [],
1520
+ "text": "Sets the maximum width of the data table. Can be set in `px`, `rem`, or `%`."
1521
+ },
1522
+ "attribute": "max-width",
1523
+ "reflect": false
1524
+ },
1525
+ "minWidth": {
1526
+ "type": "string",
1527
+ "mutable": false,
1528
+ "complexType": {
1529
+ "original": "string",
1530
+ "resolved": "string",
1531
+ "references": {}
1532
+ },
1533
+ "required": false,
1534
+ "optional": true,
1535
+ "docs": {
1536
+ "tags": [],
1537
+ "text": "Sets the minimum width of the data table. Can be set in `px`, `rem`, or `%`."
1538
+ },
1539
+ "attribute": "min-width",
1540
+ "reflect": false
1541
+ },
1542
+ "minimumLoadingDisplayDuration": {
1543
+ "type": "number",
1544
+ "mutable": false,
1545
+ "complexType": {
1546
+ "original": "number",
1547
+ "resolved": "number",
1548
+ "references": {}
1549
+ },
1550
+ "required": false,
1551
+ "optional": true,
1552
+ "docs": {
1553
+ "tags": [],
1554
+ "text": "The minimum amount of time the `loading` state displays for before showing the data. Used to prevent flashing in the component."
1555
+ },
1556
+ "attribute": "minimum-loading-display-duration",
1557
+ "reflect": false,
1558
+ "defaultValue": "1000"
1559
+ },
1560
+ "paginationBarOptions": {
1561
+ "type": "unknown",
1562
+ "mutable": false,
1563
+ "complexType": {
1564
+ "original": "IcPaginationBarOptions",
1565
+ "resolved": "IcPaginationBarOptions",
1566
+ "references": {
1567
+ "IcPaginationBarOptions": {
393
1568
  "location": "import",
394
- "path": "../ic-pagination/ic-pagination.types",
395
- "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationAlignmentOptions"
1569
+ "path": "../../utils/types",
1570
+ "id": "src/utils/types.ts::IcPaginationBarOptions"
396
1571
  }
397
1572
  }
398
1573
  },
@@ -400,9 +1575,9 @@ export class DataTable {
400
1575
  "optional": true,
401
1576
  "docs": {
402
1577
  "tags": [],
403
- "text": "Sets the props for the pagination bar."
1578
+ "text": "Sets the props for the built-in pagination bar. If the `pagination-bar` slot is used then this prop is ignored."
404
1579
  },
405
- "defaultValue": "{\n itemsPerPage: [\n { label: \"10\", value: \"10\" },\n { label: \"25\", value: \"25\" },\n { label: \"50\", value: \"50\" },\n ],\n type: \"page\",\n control: \"simple\",\n itemsPerPageControl: true,\n goToPageControl: true,\n alignment: \"right\",\n }"
1580
+ "defaultValue": "{\n alignment: \"right\",\n appearance: \"default\",\n hideAllFromItemsPerPage: false,\n hideRangeLabel: false,\n itemLabel: \"Item\",\n itemsPerPageOptions: [\n { label: \"10\", value: \"10\" },\n { label: \"25\", value: \"25\" },\n { label: \"50\", value: \"50\" },\n ],\n pageLabel: \"Page\",\n rangeLabelType: \"page\",\n selectedItemsPerPage: 10,\n setToFirstPageOnPaginationChange: false,\n showGoToPageControl: true,\n showItemsPerPageControl: true,\n type: \"simple\",\n }"
406
1581
  },
407
1582
  "showPagination": {
408
1583
  "type": "boolean",
@@ -497,6 +1672,124 @@ export class DataTable {
497
1672
  "attribute": "sticky-row-headers",
498
1673
  "reflect": false,
499
1674
  "defaultValue": "false"
1675
+ },
1676
+ "tableLayout": {
1677
+ "type": "string",
1678
+ "mutable": false,
1679
+ "complexType": {
1680
+ "original": "\"fixed\" | \"auto\"",
1681
+ "resolved": "\"auto\" | \"fixed\"",
1682
+ "references": {}
1683
+ },
1684
+ "required": false,
1685
+ "optional": true,
1686
+ "docs": {
1687
+ "tags": [],
1688
+ "text": "Sets the layout of the table"
1689
+ },
1690
+ "attribute": "table-layout",
1691
+ "reflect": false,
1692
+ "defaultValue": "\"fixed\""
1693
+ },
1694
+ "truncationPattern": {
1695
+ "type": "string",
1696
+ "mutable": false,
1697
+ "complexType": {
1698
+ "original": "IcDataTableTruncationTypes",
1699
+ "resolved": "\"show-hide\" | \"tooltip\"",
1700
+ "references": {
1701
+ "IcDataTableTruncationTypes": {
1702
+ "location": "import",
1703
+ "path": "./ic-data-table.types",
1704
+ "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableTruncationTypes"
1705
+ }
1706
+ }
1707
+ },
1708
+ "required": false,
1709
+ "optional": true,
1710
+ "docs": {
1711
+ "tags": [],
1712
+ "text": "Sets the method used to truncate long text in cells where textWrap is `false`. The `tooltip` truncation pattern allows the overflowing text to be seen in a tooltip. The `show-hide` truncation pattern allows the overflowing text to be shown and hidden using the ic-typography \"See more\"/\"See less\" buttons."
1713
+ },
1714
+ "attribute": "truncation-pattern",
1715
+ "reflect": false
1716
+ },
1717
+ "updating": {
1718
+ "type": "boolean",
1719
+ "mutable": false,
1720
+ "complexType": {
1721
+ "original": "boolean",
1722
+ "resolved": "boolean",
1723
+ "references": {}
1724
+ },
1725
+ "required": false,
1726
+ "optional": true,
1727
+ "docs": {
1728
+ "tags": [],
1729
+ "text": "If `true`, the table displays a linear loading indicator below the header row to indicate an updating state."
1730
+ },
1731
+ "attribute": "updating",
1732
+ "reflect": false,
1733
+ "defaultValue": "false"
1734
+ },
1735
+ "updatingOptions": {
1736
+ "type": "unknown",
1737
+ "mutable": false,
1738
+ "complexType": {
1739
+ "original": "{\n appearance?: IcThemeForegroundNoDefault;\n description?: string;\n max?: number;\n min?: number;\n progress?: number;\n }",
1740
+ "resolved": "{ appearance?: IcThemeForegroundNoDefault; description?: string; max?: number; min?: number; progress?: number; }",
1741
+ "references": {
1742
+ "IcThemeForegroundNoDefault": {
1743
+ "location": "import",
1744
+ "path": "@ukic/web-components/dist/types/utils/types",
1745
+ "id": "../web-components/dist/types/utils/types.d.ts::IcThemeForegroundNoDefault"
1746
+ }
1747
+ }
1748
+ },
1749
+ "required": false,
1750
+ "optional": true,
1751
+ "docs": {
1752
+ "tags": [],
1753
+ "text": "Sets the props for the linear loading indicator used in the updating state."
1754
+ }
1755
+ },
1756
+ "variableRowHeight": {
1757
+ "type": "unknown",
1758
+ "mutable": true,
1759
+ "complexType": {
1760
+ "original": "(params: {\n [key: string]: any;\n index: number;\n }) => IcDataTableRowHeights | null",
1761
+ "resolved": "(params: { [key: string]: any; index: number; }) => IcDataTableRowHeights",
1762
+ "references": {
1763
+ "IcDataTableRowHeights": {
1764
+ "location": "import",
1765
+ "path": "./ic-data-table.types",
1766
+ "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableRowHeights"
1767
+ }
1768
+ }
1769
+ },
1770
+ "required": false,
1771
+ "optional": true,
1772
+ "docs": {
1773
+ "tags": [],
1774
+ "text": "Allows for custom setting of row heights on individual rows based on an individual value from the `data` prop and the row index.\nIf the function returns `null`, that row's height will be set to the `globalRowHeight` property."
1775
+ }
1776
+ },
1777
+ "width": {
1778
+ "type": "string",
1779
+ "mutable": false,
1780
+ "complexType": {
1781
+ "original": "string",
1782
+ "resolved": "string",
1783
+ "references": {}
1784
+ },
1785
+ "required": false,
1786
+ "optional": true,
1787
+ "docs": {
1788
+ "tags": [],
1789
+ "text": "Sets the table width. Can be set to `auto` or a specific value in `px`, `rem`, or `%`."
1790
+ },
1791
+ "attribute": "width",
1792
+ "reflect": false
500
1793
  }
501
1794
  };
502
1795
  }
@@ -510,14 +1803,119 @@ export class DataTable {
510
1803
  "selectedRow": {},
511
1804
  "sortedColumn": {},
512
1805
  "sortedColumnOrder": {},
513
- "toRow": {}
1806
+ "toRow": {},
1807
+ "currentRowHeight": {},
1808
+ "debounceDelay": {}
1809
+ };
1810
+ }
1811
+ static get events() {
1812
+ return [{
1813
+ "method": "icRowHeightChange",
1814
+ "name": "icRowHeightChange",
1815
+ "bubbles": true,
1816
+ "cancelable": true,
1817
+ "composed": true,
1818
+ "docs": {
1819
+ "tags": [],
1820
+ "text": "Emitted when the `globalRowHeight` or `variableRowHeight` properties change in the data table."
1821
+ },
1822
+ "complexType": {
1823
+ "original": "void",
1824
+ "resolved": "void",
1825
+ "references": {}
1826
+ }
1827
+ }, {
1828
+ "method": "icSelectedRowChange",
1829
+ "name": "icSelectedRowChange",
1830
+ "bubbles": true,
1831
+ "cancelable": true,
1832
+ "composed": true,
1833
+ "docs": {
1834
+ "tags": [],
1835
+ "text": "Emitted when the selected row changes in the data table."
1836
+ },
1837
+ "complexType": {
1838
+ "original": "object",
1839
+ "resolved": "object",
1840
+ "references": {}
1841
+ }
1842
+ }, {
1843
+ "method": "icSortChange",
1844
+ "name": "icSortChange",
1845
+ "bubbles": true,
1846
+ "cancelable": true,
1847
+ "composed": true,
1848
+ "docs": {
1849
+ "tags": [],
1850
+ "text": "Emitted when a column sort button is clicked."
1851
+ },
1852
+ "complexType": {
1853
+ "original": "IcSortEventDetail",
1854
+ "resolved": "IcSortEventDetail",
1855
+ "references": {
1856
+ "IcSortEventDetail": {
1857
+ "location": "import",
1858
+ "path": "./ic-data-table.types",
1859
+ "id": "src/components/ic-data-table/ic-data-table.types.tsx::IcSortEventDetail"
1860
+ }
1861
+ }
1862
+ }
1863
+ }];
1864
+ }
1865
+ static get methods() {
1866
+ return {
1867
+ "resetRowHeights": {
1868
+ "complexType": {
1869
+ "signature": "(rowHeight?: number | \"auto\") => Promise<void>",
1870
+ "parameters": [{
1871
+ "name": "rowHeight",
1872
+ "type": "number | \"auto\"",
1873
+ "docs": ""
1874
+ }],
1875
+ "references": {
1876
+ "Promise": {
1877
+ "location": "global",
1878
+ "id": "global::Promise"
1879
+ }
1880
+ },
1881
+ "return": "Promise<void>"
1882
+ },
1883
+ "docs": {
1884
+ "text": "Resets the `globalRowHeight` prop to number or auto and sets the `variableRowHeight` prop to `null`.",
1885
+ "tags": []
1886
+ }
1887
+ }
514
1888
  };
515
1889
  }
516
1890
  static get elementRef() { return "el"; }
1891
+ static get watchers() {
1892
+ return [{
1893
+ "propName": "columnHeaderTruncation",
1894
+ "methodName": "headerTruncationChangeHandler"
1895
+ }, {
1896
+ "propName": "loading",
1897
+ "methodName": "loadingHandler"
1898
+ }, {
1899
+ "propName": "truncationPattern",
1900
+ "methodName": "truncationPatternHandler"
1901
+ }, {
1902
+ "propName": "data",
1903
+ "methodName": "dataHandler"
1904
+ }, {
1905
+ "propName": "density",
1906
+ "methodName": "densityHandler"
1907
+ }, {
1908
+ "propName": "globalRowHeight",
1909
+ "methodName": "rowHeightChangeHandler"
1910
+ }, {
1911
+ "propName": "variableRowHeight",
1912
+ "methodName": "rowHeightChangeHandler"
1913
+ }];
1914
+ }
517
1915
  static get listeners() {
518
1916
  return [{
519
- "name": "icItemsPerPageChange",
520
- "method": "handleItemsPerPageChange",
1917
+ "name": "typographyTruncationExpandToggle",
1918
+ "method": "handleTypographyTruncationExpandToggle",
521
1919
  "target": undefined,
522
1920
  "capture": false,
523
1921
  "passive": false
@@ -527,6 +1925,18 @@ export class DataTable {
527
1925
  "target": undefined,
528
1926
  "capture": false,
529
1927
  "passive": false
1928
+ }, {
1929
+ "name": "icItemsPerPageChange",
1930
+ "method": "handleItemsPerPageChange",
1931
+ "target": undefined,
1932
+ "capture": false,
1933
+ "passive": false
1934
+ }, {
1935
+ "name": "icTableDensityUpdate",
1936
+ "method": "handleDensityChange",
1937
+ "target": undefined,
1938
+ "capture": false,
1939
+ "passive": false
530
1940
  }, {
531
1941
  "name": "click",
532
1942
  "method": "clickListener",