@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,5 +1,7 @@
1
- import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
- import { d as defineCustomElement$g } from './ic-button2.js';
1
+ import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
2
+ import { d as dynamicDebounce, b as isEmptyString, p as pxToRem, i as isSlotUsed, c as addDataToPosition, e as deviceSizeMatches, f as getSlotElements, h as checkResizeObserver, j as IC_DEVICE_SIZES } from './helpers2.js';
3
+ import { d as defineCustomElement$h } from './ic-button2.js';
4
+ import { d as defineCustomElement$g } from './ic-empty-state2.js';
3
5
  import { d as defineCustomElement$f } from './ic-input-component-container2.js';
4
6
  import { d as defineCustomElement$e } from './ic-input-container2.js';
5
7
  import { d as defineCustomElement$d } from './ic-input-label2.js';
@@ -27,19 +29,219 @@ const descendingIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 2
27
29
  <path d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"></path>
28
30
  </svg>`;
29
31
 
30
- const icDataTableCss = ":host{position:relative;display:block;height:100%;max-height:100%}.table-container{position:relative;height:calc(100% - var(--ic-space-xxxs))}.table-row-container{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}:host([show-pagination=\"true\"]) .table-row-container{height:calc(100% - 3.5625rem)}table{table-layout:fixed;border-spacing:0;width:100%}.table-row-container:focus{outline:none;box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast);z-index:1}:host([embedded=\"true\"]) .table-container{border:var(--ic-border-light)}.column-header-sticky{position:sticky;top:0;z-index:1}.column-header-overlay{position:sticky;top:0;z-index:1;box-shadow:0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n rgb(0 0 0 / 20%)}.row-header-sticky{position:sticky;left:0}.column-header,.table-row{box-sizing:border-box}.table-row-selected{background-color:var(--ic-table-row-selected) !important}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-action-dark-bg-hover)}.sort-button:active{background-color:var(--ic-action-dark-bg-active)}.sort-button svg{color:var(--ic-architectural-black)}.sort-button-unsorted svg{color:var(--ic-color-tertiary-text)}.table-density-dense{padding:var(--ic-space-xxs) var(--ic-space-xs) !important}.text-dense{font-size:var(--ic-font-size-label)}.table-density-spacious{padding:0.625rem var(--ic-space-xs) !important}.text-spacious{font-size:1.125rem}.column-header-text{font-weight:var(--ic-font-weight-bold)}.column-header,.row-header{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-architectural-40);border-right:var(--ic-border-light);border-bottom:var(--ic-border-light)}.column-header:last-child{border-right:none}.scrollable .column-header:last-child{border-right:var(--ic-border-light) !important}:host([embedded=\"true\"]) tr:last-child .table-cell,:host([embedded=\"true\"]) tr:last-child .row-header{border-bottom:none}.column-header-alignment-left,.row-header-alignment-left,.cell-alignment-left{text-align:left !important}.column-header-alignment-right,.row-header-alignment-right,.cell-alignment-right{text-align:right !important}.column-header-alignment-center,.row-header-alignment-center,.cell-alignment-center{text-align:center !important}.table-row:nth-child(even){background-color:var(--ic-architectural-20)}.table-cell{padding:var(--ic-space-xs);border-bottom:solid var(--ic-architectural-100) var(--ic-space-1px)}.data-type-string{text-align:left;vertical-align:top}.data-type-number,.data-type-date{text-align:right;vertical-align:top}.cell-alignment-top{vertical-align:top}.cell-alignment-middle{vertical-align:middle}.cell-alignment-bottom{vertical-align:bottom}.cell-emphasis-low{color:var(--ic-color-secondary-text)}.cell-emphasis-high{font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-architectural-40);border-top:var(--ic-border-light)}.screen-reader-sort-text,.table-caption{position:absolute;left:-100rem}.table-cell,.column-header,.row-header{word-wrap:break-word;white-space:pre-wrap}@media screen and (min-width: 576px){.column-header-inner-container{display:flex;align-items:center}}";
32
+ const icDataTableCss = ":host{position:relative;display:inline-flex;max-height:100%;width:var(--table-width, 100%);height:100%;min-width:var(--table-min-width);max-width:var(--table-max-width)}tbody{vertical-align:top}.table-container{position:relative;height:calc(100% - var(--ic-space-xxxs));display:flex;flex-direction:column;width:100%}.cell-container{display:flex;min-height:1.5rem;overflow-y:hidden;height:var(--row-height)}.truncation-show-hide{display:block}.cell-icon.truncation-show-hide{display:flex}.cell-container:not(.data-type-element,.truncation-show-hide){overflow-x:hidden}ic-loading-indicator{position:sticky;top:20px}.table-row-container{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}:host([show-pagination=\"true\"]) .table-row-container{height:calc(100% - 3.5625rem)}table{table-layout:var(--table-layout, \"fixed\");border-spacing:0;width:100%;height:var(--table-height, auto)}.table-row-container:focus{outline:none;box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast);z-index:1}:host([embedded=\"true\"]) .table-row-container{border:var(--ic-border-light)}.column-header-inner-container{padding:var(--ic-space-xs);box-sizing:border-box}.column-header-inner-container ic-tooltip{pointer-events:none}.column-header-inner-container ic-tooltip.show-trunc-tooltip{pointer-events:auto}.column-header-inner-container ic-tooltip .column-header-text{--ic-line-clamp:1}.column-header-sticky{position:sticky;top:0;z-index:1}.column-header-overlay{position:sticky;top:0;z-index:1;box-shadow:0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n rgb(0 0 0 / 20%)}.row-header-sticky{position:sticky;left:0}.column-header,.table-row{box-sizing:border-box}.table-row-selected{background-color:var(--ic-table-row-selected) !important}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-action-dark-bg-hover)}.sort-button:active{background-color:var(--ic-action-dark-bg-active)}.sort-button svg{color:var(--ic-architectural-black)}.sort-button-unsorted svg{color:var(--ic-color-tertiary-text)}.table-density-dense .column-header-inner-container,td.table-density-dense{padding:var(--ic-space-xxs) var(--ic-space-xs) !important}.text-dense{font-size:var(--ic-font-size-label)}.table-density-spacious .column-header-inner-container,td.table-density-spacious{padding:0.625rem var(--ic-space-xs) !important}.text-spacious{font-size:1.125rem}.column-header-text{font-weight:var(--ic-font-weight-bold)}.dummy-column-header-text{white-space:nowrap;overflow:hidden;height:0;width:-moz-fit-content;width:fit-content}.row-header,.column-header{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-architectural-40);border-right:var(--ic-border-light);border-bottom:var(--ic-border-light)}.column-header{padding:0;width:var(--column-width);min-width:var(--column-min-width, 4rem);max-width:var(--column-max-width)}.column-header:last-child{border-right:none}.scrollable .column-header:last-child{border-right:var(--ic-border-light) !important}:host([embedded=\"true\"]) tr:last-child .table-cell,:host([embedded=\"true\"]) tr:last-child .row-header{border-bottom:none}.column-header-alignment-left,.row-header-alignment-left,.cell-alignment-left{text-align:left !important;justify-content:start !important}.column-header-alignment-right,.row-header-alignment-right,.cell-alignment-right{text-align:right !important;justify-content:end !important}.cell-alignment-right.truncation-tooltip ic-tooltip ic-typography{padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.cell-alignment-right.truncation-show-hide ic-typography{--ellipsis-padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.column-header-alignment-center,.row-header-alignment-center,.cell-alignment-center{text-align:center !important;justify-content:center !important}.table-row:nth-child(even){background-color:var(--ic-architectural-20)}.table-cell{padding:var(--ic-space-xs);border-bottom:solid var(--ic-architectural-100) var(--ic-space-1px);overflow:hidden;box-sizing:border-box;max-width:var(--column-max-width);min-width:var(--column-min-width)}.table-cell.with-overflow{overflow:visible}.data-type-string,.data-type-address{text-align:left;vertical-align:top}.data-type-number,.data-type-date{text-align:right;justify-content:end;vertical-align:top}.cell-alignment-top{vertical-align:top;align-items:flex-start}.cell-alignment-middle{vertical-align:middle;align-items:center}.cell-alignment-bottom{vertical-align:bottom;align-items:flex-end}.cell-emphasis-low{color:var(--ic-color-secondary-text)}.cell-emphasis-high{font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-architectural-40);border-top:var(--ic-border-light)}.screen-reader-sort-text,.table-caption{position:absolute;left:-100rem}.table-cell,.column-header,.row-header{word-wrap:break-word;white-space:pre-wrap}.loading-empty{padding:var(--ic-space-xl) var(--ic-space-xxl);margin-top:var(--ic-space-xl)}.updating-state{padding:0;border-bottom:var(--ic-border-light)}.updating-state-headers{border-bottom:none}.loading{position:absolute;left:calc(50% - 5.9741rem);opacity:0;transition:opacity var(--ic-transition-duration-slow);z-index:calc(var(--ic-z-index-dialog) - 1)}.loading.show-background{background-color:var(--ic-architectural-white);border:var(--ic-border-light)}.loading.show{opacity:1}.icon,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);margin-right:var(--ic-space-xxs)}.column-header-alignment-right>.icon,.row-header-alignment-right>.icon,.cell-alignment-right>.icon,.column-header-alignment-right>::slotted(svg),.row-header-alignment-right>::slotted(svg),.cell-alignment-right>::slotted(svg){margin-right:auto}.column-header-alignment-center>ic-typography,.column-header-alignment-center>.cell-text-wrapper,.row-header-alignment-right>ic-typography,.row-header-alignment-right>.cell-text-wrapper,.cell-alignment-center>ic-typography,.cell-alignment-center>.cell-text-wrapper{flex:1}.icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}.truncation-tooltip ic-typography{display:-webkit-box;-webkit-line-clamp:var(--ic-line-clamp, 0);-webkit-box-orient:vertical;overflow:hidden}.truncation-tooltip ic-typography,.truncation-show-hide ic-typography{white-space:normal}.ic-tooltip-overflow{overflow:hidden;width:100%}.action-element{display:flex;justify-content:right}.cell-grid-wrapper{display:grid;grid-template-columns:auto auto}.loading-overlay{visibility:hidden;position:absolute;top:0;left:0;width:100%;height:100%;background:var(--ic-architectural-black);z-index:calc(var(--ic-z-index-dialog) - 2);opacity:0;transition:opacity var(--ic-transition-duration-slow)}.loading-overlay.show{visibility:visible;opacity:0.6}.sr-only{position:absolute;left:-9999px}@media (prefers-reduced-motion: reduce){.loading-overlay{transition:none}}.cell-text-wrapper{overflow:hidden}.cell-text-wrapper>ic-typography{margin-left:2px}.cell-text-no-wrap{word-wrap:initial}.cell-container-with-description{display:flex;flex-direction:row}.cell-description{display:flex;flex-direction:row;margin-top:var(--ic-space-xxs);word-break:break-all}.cell-description-text{color:var(--ic-color-secondary-text)}.cell-description-icon{padding-right:var(--ic-space-xs)}.cell-description-icon>svg{height:calc(var(--ic-space-lg) - var(--ic-space-xxs));width:calc(var(--ic-space-lg) - var(--ic-space-xxs));display:flex}@media (min-width: 577px){.column-header-inner-container{display:flex;align-items:center}}@media (max-width: 577px){.cell-icon{flex-wrap:wrap}.cell-description-icon{padding-right:0}}@media (forced-colors: active){.icon,::slotted(svg),.cell-description-icon>svg{fill:currentcolor}.sort-button svg{color:currentcolor}.table-row-selected{background-color:Highlight !important}}";
31
33
 
32
34
  const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLElement {
33
35
  constructor() {
34
36
  super();
35
37
  this.__registerHost();
36
38
  this.__attachShadow();
39
+ this.icRowHeightChange = createEvent(this, "icRowHeightChange", 7);
40
+ this.icSelectedRowChange = createEvent(this, "icSelectedRowChange", 7);
41
+ this.icSortChange = createEvent(this, "icSortChange", 7);
42
+ this.DENSITY_HEIGHT_MULTIPLIER = {
43
+ dense: 0.8,
44
+ default: 1,
45
+ spacious: 1.2,
46
+ };
47
+ this.DENSITY_PADDING_HEIGHT_DIFF = {
48
+ dense: 8,
49
+ default: 16,
50
+ spacious: 20,
51
+ };
37
52
  this.SORT_ICONS = {
38
53
  unsorted: unsortedIcon,
39
54
  ascending: ascendingIcon,
40
55
  descending: descendingIcon,
41
56
  };
42
- this.isObject = (value) => typeof value === "object";
57
+ this.hasLoadedForOneSecond = true;
58
+ this.resizeObserver = null;
59
+ this.SHOW_HIDE_STRING = "show-hide";
60
+ this.SHOW_HIDE_CSS_CLASS = `${this.SHOW_HIDE_STRING}-wrap`;
61
+ this.TOOLTIP_STRING = "tooltip";
62
+ this.TOOLTIP = `ic-${this.TOOLTIP_STRING}`;
63
+ this.TEXT_WRAP_STRING = "text-wrap";
64
+ this.TEXT_WRAP_CLASS = `.${this.TEXT_WRAP_STRING}`;
65
+ this.dataUpdated = false;
66
+ this.rowHeightSet = false;
67
+ this.initialLoad = false;
68
+ this.icPageChangeEvent = false;
69
+ this.itemsPerPageChange = false;
70
+ this.DATA_ROW_HEIGHT_STRING = "data-row-height";
71
+ this.ROW_HEIGHT_CSS_VARIABLE = "--row-height";
72
+ this.LINE_CLAMP_CSS_VARIABLE = "--ic-line-clamp";
73
+ this.DEFAULT_LINE_HEIGHT = 24;
74
+ this.densityUpdate = false;
75
+ this.truncationPatternUpdated = false;
76
+ this.isNewDebounceDelaySet = false;
77
+ this.headerResizeObserver = null;
78
+ this.IC_TOOLTIP_STRING = "ic-tooltip";
79
+ this.SHOW_TRUNC_TOOLTIP_STRING = "show-trunc-tooltip";
80
+ this.CELL_DESCRIPTION_STRING = ".cell-description";
81
+ this.CELL_CONTAINER_WITH_DESCRIPTION_STRING = "cell-container-with-description";
82
+ this.CELL_TEXT_WRAPPER_STRING = ".cell-text-wrapper";
83
+ this.IC_TYPOGRAPHY_STRING = "ic-typography";
84
+ this.runHeaderResizeObserver = () => {
85
+ this.headerResizeObserver = new ResizeObserver(() => {
86
+ this.headerResizeCallback();
87
+ });
88
+ this.headerResizeObserver.observe(this.el);
89
+ };
90
+ this.headerResizeCallback = () => {
91
+ if (!this.hideColumnHeaders && this.columnHeaderTruncation) {
92
+ const tableContainerWidth = this.el.shadowRoot.querySelector(".table-container").clientWidth;
93
+ if (tableContainerWidth !== this.prevTableContainerWidth) {
94
+ const headers = this.el.shadowRoot.querySelectorAll("th.column-header");
95
+ headers.forEach((header) => {
96
+ const tooltip = header.querySelector(this.IC_TOOLTIP_STRING);
97
+ const typographyEls = header.querySelectorAll(this.IC_TYPOGRAPHY_STRING);
98
+ if (tooltip && typographyEls && typographyEls.length === 2) {
99
+ tooltip.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
100
+ if (typographyEls[1].clientWidth > typographyEls[0].clientWidth) {
101
+ tooltip.classList.add(this.SHOW_TRUNC_TOOLTIP_STRING);
102
+ }
103
+ }
104
+ });
105
+ this.prevTableContainerWidth = tableContainerWidth;
106
+ }
107
+ }
108
+ };
109
+ this.updateSetRowHeight = (typographyEl) => {
110
+ const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
111
+ if (typographyEl) {
112
+ const cellContainer = this.getCellContainer(typographyEl);
113
+ const rowHeight = fontSize *
114
+ parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
115
+ if (typographyEl.scrollHeight > rowHeight) {
116
+ cellContainer.style.removeProperty(this.ROW_HEIGHT_CSS_VARIABLE);
117
+ }
118
+ }
119
+ else {
120
+ this.getTypographyElements().forEach((typographyEl) => {
121
+ const cellContainer = this.getCellContainer(typographyEl);
122
+ const rowHeight = fontSize *
123
+ parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
124
+ if (typographyEl.scrollHeight > rowHeight) {
125
+ cellContainer.style.removeProperty(this.ROW_HEIGHT_CSS_VARIABLE);
126
+ }
127
+ });
128
+ }
129
+ };
130
+ this.debounceDataTruncation = () => {
131
+ this.getTypographyElements().forEach((typographyEl) => {
132
+ const cellContainer = this.getCellContainer(typographyEl);
133
+ if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
134
+ this.resizeObserver = new ResizeObserver(
135
+ // This gets triggered twice due to updated data and see more/see less button
136
+ dynamicDebounce(() => {
137
+ this.dataTruncation(typographyEl);
138
+ if (!this.isNewDebounceDelaySet) {
139
+ this.setNewDebounceDelay(200);
140
+ }
141
+ }, () => this.debounceDelay));
142
+ this.resizeObserver.observe(typographyEl);
143
+ }
144
+ });
145
+ };
146
+ this.setNewDebounceDelay = (delay) => {
147
+ this.debounceDelay = delay;
148
+ this.isNewDebounceDelaySet = true;
149
+ };
150
+ this.getLines = (height) => Math.floor(height / this.DEFAULT_LINE_HEIGHT);
151
+ this.truncate = (typographyEl, cellContainer, tooltip) => {
152
+ if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
153
+ //24 is the height of a single line
154
+ if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
155
+ if (this.truncationPattern === this.TOOLTIP_STRING) {
156
+ this.addTooltipTruncation(typographyEl, cellContainer, tooltip);
157
+ }
158
+ if (this.truncationPattern === this.SHOW_HIDE_STRING) {
159
+ this.addShowHideTruncation(cellContainer, typographyEl);
160
+ }
161
+ }
162
+ }
163
+ else {
164
+ if (this.truncationPattern === this.TOOLTIP_STRING && tooltip) {
165
+ typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
166
+ const cellTextWrapper = cellContainer.querySelector(this.CELL_TEXT_WRAPPER_STRING);
167
+ cellTextWrapper.prepend(typographyEl);
168
+ tooltip.remove();
169
+ }
170
+ if (this.truncationPattern === this.SHOW_HIDE_STRING &&
171
+ !isEmptyString(typographyEl.getAttribute("max-lines"))) {
172
+ this.resetShowHideTruncation(typographyEl);
173
+ }
174
+ }
175
+ };
176
+ this.dataTruncation = (typographyEl) => {
177
+ // Tooltip truncation mentioned in AC. Will need revisiting
178
+ const tooltip = this.getTooltip(typographyEl);
179
+ const cellContainer = this.getCellContainer(typographyEl);
180
+ if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.classList.contains("data-type-element")) ||
181
+ this.dataUpdated) {
182
+ return;
183
+ }
184
+ if (this.truncationPattern === this.SHOW_HIDE_STRING &&
185
+ typographyEl.shadowRoot.querySelector("button")) {
186
+ const showHideBtn = typographyEl.shadowRoot.querySelector("button");
187
+ // If the see more/see less is present and the max lines is equal to the cell container
188
+ // remove the see more/see less button
189
+ if (showHideBtn) {
190
+ const truncWrapper = this.getTruncWrapper(typographyEl);
191
+ if (this.getLines(truncWrapper.scrollHeight) ===
192
+ +typographyEl.getAttribute("max-lines")) {
193
+ this.resetShowHideTruncation(typographyEl);
194
+ }
195
+ }
196
+ }
197
+ // Deals with setting and resetting row height and re-truncating data
198
+ if (this.rowHeightSet && this.truncationPattern === this.SHOW_HIDE_STRING) {
199
+ const truncWrapper = this.getTruncWrapper(typographyEl);
200
+ // cellContainer.clientHeight - 24 removes the extra line by see more/see less
201
+ if (truncWrapper &&
202
+ cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >
203
+ truncWrapper.scrollHeight) {
204
+ this.resetShowHideTruncation(typographyEl);
205
+ return;
206
+ }
207
+ if (typographyEl.scrollHeight > cellContainer.clientHeight) {
208
+ this.addShowHideTruncation(cellContainer, typographyEl);
209
+ return;
210
+ }
211
+ }
212
+ if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > 0 &&
213
+ (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) > 0 &&
214
+ (typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) === (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
215
+ if (tooltip) {
216
+ this.removeTooltip(cellContainer, typographyEl, tooltip);
217
+ }
218
+ return;
219
+ }
220
+ this.truncate(typographyEl, cellContainer, tooltip);
221
+ };
222
+ this.getTruncWrapper = (typographyEl) => typographyEl.shadowRoot.querySelector(".trunc-wrapper");
223
+ this.removeTextWrap = () => {
224
+ this.getTypographyElements().forEach((typographyEl) => {
225
+ const tableCell = typographyEl.closest("td");
226
+ if (tableCell.classList.contains(this.TEXT_WRAP_STRING)) {
227
+ tableCell.classList.remove(this.TEXT_WRAP_STRING);
228
+ }
229
+ });
230
+ };
231
+ this.getCellContainer = (typographyEl) => {
232
+ return typographyEl.closest(".cell-container");
233
+ };
234
+ this.deleteTextWrapDataKey = (array) => Array.isArray(array) &&
235
+ array.forEach((val) => val.textWrap && delete val.textWrap);
236
+ this.startLoadingTimer = () => {
237
+ this.hasLoadedForOneSecond = false;
238
+ this.timerStarted = Date.now();
239
+ setTimeout(() => {
240
+ this.hasLoadedForOneSecond = true;
241
+ this.timerStarted = null;
242
+ }, this.minimumLoadingDisplayDuration);
243
+ };
244
+ this.isObject = (value) => value !== undefined && value !== null && typeof value === "object";
43
245
  this.notDefaultDensity = () => this.density !== "default";
44
246
  this.getCellContent = (cell, dataType) => {
45
247
  switch (dataType) {
@@ -56,9 +258,103 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
56
258
  return this.getObjectValue(this.getObjectValue(cell, "cellAlignment"), alignment);
57
259
  }
58
260
  };
59
- this.createCells = (row) => {
261
+ this.getCellOptions = (cell, key) => {
262
+ if (!(this.isObject(cell) && Object.keys(cell).includes(key)))
263
+ return;
264
+ return this.getObjectValue(cell, key);
265
+ };
266
+ this.createUpdatingIndicator = () => {
267
+ const { appearance, description, max, min, progress } = this.updatingOptions || {};
268
+ 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" })));
269
+ };
270
+ this.setRowHeight = (height) => {
271
+ return pxToRem(`${height * this.DENSITY_HEIGHT_MULTIPLIER[this.density] -
272
+ this.DENSITY_PADDING_HEIGHT_DIFF[this.density]}px`);
273
+ };
274
+ this.setTruncationClass = () => this.truncationPattern
275
+ ? { [`truncation-${this.truncationPattern}`]: true }
276
+ : {};
277
+ this.getColumnWidth = (columnWidth) => {
278
+ // TODO: Setting max width on columns
279
+ let columnWidthStyling = {};
280
+ if (columnWidth) {
281
+ if (typeof columnWidth === "string") {
282
+ columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-width"]: columnWidth });
283
+ }
284
+ if (typeof columnWidth === "object" && !!Object.keys(columnWidth)) {
285
+ if (columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.minWidth) {
286
+ columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-min-width"]: columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.minWidth });
287
+ }
288
+ if (columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.maxWidth) {
289
+ columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-max-width"]: columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.maxWidth });
290
+ }
291
+ }
292
+ }
293
+ return columnWidthStyling;
294
+ };
295
+ this.getRowHeight = (currentRowHeight, columnProps, rowTextWrap, cell) => {
296
+ if ((this.truncationPattern || currentRowHeight) &&
297
+ !(columnProps === null || columnProps === void 0 ? void 0 : columnProps.textWrap) &&
298
+ !rowTextWrap &&
299
+ !this.getCellOptions(cell, "textWrap") &&
300
+ (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element") {
301
+ return {
302
+ [this.ROW_HEIGHT_CSS_VARIABLE]: this.setRowHeight(currentRowHeight),
303
+ };
304
+ }
305
+ return {};
306
+ };
307
+ this.adjustWidthForActionElement = () => {
308
+ const elements = this.el.shadowRoot.querySelectorAll(".action-element");
309
+ elements.forEach((element) => {
310
+ const width = element.firstChild.getBoundingClientRect()
311
+ .width;
312
+ const gridWrapper = element.closest(".cell-grid-wrapper");
313
+ gridWrapper.style.gridTemplateColumns = `auto calc(${width}px + var(--ic-space-xs))`;
314
+ });
315
+ };
316
+ this.createCellContent = (columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis) => {
317
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
318
+ return (h("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
319
+ !isSlotUsed(this.el, cellSlotName)
320
+ ? cell
321
+ : 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) ||
322
+ ((_b = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
323
+ rowAlignment ||
324
+ this.getCellAlignment(cell, "vertical")}`]: !!((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.vertical) ||
325
+ !!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.vertical) ||
326
+ !!rowAlignment ||
327
+ !!this.getCellAlignment(cell, "vertical"), [`cell-alignment-${((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _e === void 0 ? void 0 : _e.horizontal) ||
328
+ ((_f = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _f === void 0 ? void 0 : _f.horizontal) ||
329
+ this.getCellAlignment(cell, "horizontal")}`]: !!((_g = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _g === void 0 ? void 0 : _g.horizontal) ||
330
+ !!((_h = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _h === void 0 ? void 0 : _h.horizontal) ||
331
+ !!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) ||
332
+ (rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap) ||
333
+ !!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
334
+ ? this.setRowHeight(currentRowHeight)
335
+ : 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)) &&
336
+ (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" &&
337
+ !isSlotUsed(this.el, cellSlotName) && (h("div", { class: {
338
+ "cell-text-wrapper": true,
339
+ "cell-text-no-wrap": !this.truncationPattern,
340
+ } }, h("ic-typography", { variant: "body", class: {
341
+ [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
342
+ (columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
343
+ rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
344
+ !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
345
+ !!rowEmphasis,
346
+ [`text-${this.density}`]: this.notDefaultDensity(),
347
+ } }, 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) &&
348
+ Object.keys(cell).includes("description") && (h("div", { class: {
349
+ ["cell-description"]: true,
350
+ [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true,
351
+ } }, ((_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"))))))))));
352
+ };
353
+ this.createCells = (row, rowIndex) => {
354
+ var _a;
60
355
  const rowValues = Object.values(row);
61
356
  const rowKeys = Object.keys(row);
357
+ const rowOptions = this.getRowOptions(rowKeys, rowValues);
62
358
  let rowAlignment;
63
359
  let rowEmphasis;
64
360
  const headerIndex = rowKeys.indexOf("header");
@@ -66,70 +362,110 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
66
362
  rowAlignment = this.getObjectValue(rowValues[headerIndex], "rowAlignment");
67
363
  rowEmphasis = this.getObjectValue(rowValues[headerIndex], "emphasis");
68
364
  }
365
+ const variableRowHeightVal = (_a = this.variableRowHeight) === null || _a === void 0 ? void 0 : _a.call(this, Object.assign(Object.assign({}, row), { index: rowIndex }));
366
+ const currentRowHeight = variableRowHeightVal
367
+ ? variableRowHeightVal !== "auto" && variableRowHeightVal
368
+ : this.globalRowHeight !== "auto" && this.globalRowHeight;
69
369
  return rowValues.map((cell, index) => {
70
- const { columnAlignment, dataType, emphasis } = this.columns[index];
370
+ const columnProps = this.columns[index];
371
+ const cellSlotName = `${columnProps === null || columnProps === void 0 ? void 0 : columnProps.key}-${rowIndex}`;
372
+ const hasIcon = this.isObject(cell) && Object.keys(cell).includes("icon");
71
373
  const cellValue = (key) => this.getObjectValue(cell, key);
72
- return rowKeys[index] === "header" ? (h("th", { scope: "row", colSpan: cellValue("colspan"), class: {
73
- ["row-header"]: true,
74
- [`row-header-alignment-${cellValue("cellAlignment")}`]: !!cellValue("cellAlignment"),
75
- ["row-header-sticky"]: this.stickyRowHeaders,
76
- } }, cellValue("title"))) : (h("td", { innerHTML: dataType === "element" ? cell : null, class: {
77
- ["table-cell"]: true,
78
- [`table-density-${this.density}`]: this.notDefaultDensity(),
79
- [`data-type-${dataType}`]: true,
80
- [`cell-alignment-${(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.horizontal) ||
81
- this.getCellAlignment(cell, "horizontal")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.horizontal) ||
82
- !!this.getCellAlignment(cell, "horizontal"),
83
- [`cell-alignment-${(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
84
- rowAlignment ||
85
- this.getCellAlignment(cell, "vertical")}`]: !!(columnAlignment === null || columnAlignment === void 0 ? void 0 : columnAlignment.vertical) ||
86
- !!rowAlignment ||
87
- !!this.getCellAlignment(cell, "vertical"),
88
- } }, h("ic-typography", { variant: "body", class: {
89
- [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
90
- emphasis ||
91
- rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
92
- !!emphasis ||
93
- !!rowEmphasis,
94
- [`text-${this.density}`]: this.notDefaultDensity(),
95
- } }, this.isObject(cell) && dataType !== "date" ? (Object.keys(cell).includes("href") ? (h("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, dataType)))));
374
+ if (rowKeys[index] === "header") {
375
+ return (h("th", { scope: "row", colSpan: cellValue("colspan"), class: {
376
+ ["row-header"]: true,
377
+ [`row-header-alignment-${cellValue("cellAlignment")}`]: !!cellValue("cellAlignment"),
378
+ ["row-header-sticky"]: this.stickyRowHeaders,
379
+ } }, cellValue("title")));
380
+ }
381
+ if (rowKeys[index] !== "rowOptions") {
382
+ return (h("td", { class: {
383
+ ["table-cell"]: true,
384
+ [`table-density-${this.density}`]: this.notDefaultDensity(),
385
+ ["with-overflow"]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element",
386
+ }, style: Object.assign({}, this.getColumnWidth(columnProps.columnWidth)) }, this.isObject(cell) &&
387
+ 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"),
388
+ // eslint-disable-next-line react/jsx-no-bind
389
+ onClick: cell.actionOnClick
390
+ ? (event) => this.handleClick(event, cell.actionOnClick)
391
+ : undefined }))) : (this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis))));
392
+ }
96
393
  });
97
394
  };
98
- this.createColumnHeaders = () => {
99
- return this.columns.map(({ cellAlignment, colspan, key, title }) => (h("th", { scope: "col", class: {
100
- ["column-header"]: true,
101
- [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,
102
- [`table-density-${this.density}`]: this.notDefaultDensity(),
103
- }, colSpan: colspan }, this.sortable ? (h("div", { class: "column-header-inner-container" }, h("ic-typography", { variant: "body", class: {
104
- ["column-header-text"]: true,
105
- [`text-${this.density}`]: this.notDefaultDensity(),
106
- } }, title), h("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
107
- // eslint-disable-next-line react/jsx-no-bind
108
- onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
109
- ? this.sortedColumnOrder
110
- : "unsorted"], class: {
111
- ["sort-button"]: true,
112
- ["sort-button-unsorted"]: this.sortedColumn !== key ||
113
- this.sortedColumnOrder === "unsorted",
114
- } }))) : (h("ic-typography", { variant: "body", class: {
115
- ["column-header-text"]: true,
116
- [`text-${this.density}`]: this.notDefaultDensity(),
117
- } }, title)))));
395
+ this.createColumnHeaders = () => (this.columns || []).map(({ cellAlignment, colspan, icon, key, title, columnWidth, excludeColumnFromSort, }, index) => (h("th", { scope: "col", class: {
396
+ ["column-header"]: true,
397
+ [`table-density-${this.density}`]: this.notDefaultDensity(),
398
+ ["updating-state-headers"]: this.updating && !this.loading,
399
+ }, style: Object.assign({}, this.getColumnWidth(columnWidth)), colSpan: colspan }, h("div", { class: {
400
+ "column-header-inner-container": true,
401
+ "truncation-tooltip": this.columnHeaderTruncation,
402
+ [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,
403
+ } }, isSlotUsed(this.el, `${key}-column-icon`) ? (h("slot", { name: `${key}-column-icon` })) : (icon &&
404
+ !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: {
405
+ ["column-header-text"]: true,
406
+ [`text-${this.density}`]: this.notDefaultDensity(),
407
+ } }, title))) : (h("ic-typography", { variant: "body", class: {
408
+ ["column-header-text"]: true,
409
+ [`text-${this.density}`]: this.notDefaultDensity(),
410
+ } }, title)), this.sortable && !excludeColumnFromSort && (h("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
411
+ // eslint-disable-next-line react/jsx-no-bind
412
+ onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
413
+ ? this.sortedColumnOrder
414
+ : "unsorted"], class: {
415
+ ["sort-button"]: true,
416
+ ["sort-button-unsorted"]: this.sortedColumn !== key ||
417
+ this.sortedColumnOrder === "unsorted",
418
+ } }))), this.columnHeaderTruncation && (h("ic-typography", { variant: "body", "aria-hidden": "true", class: {
419
+ ["column-header-text"]: true,
420
+ ["dummy-column-header-text"]: this.columnHeaderTruncation,
421
+ [`text-${this.density}`]: this.notDefaultDensity(),
422
+ } }, title)))));
423
+ this.onRowClick = (row) => {
424
+ if (!this.loading && !this.updating) {
425
+ this.icSelectedRowChange.emit(this.selectedRow !== row ? row : null);
426
+ }
427
+ this.selectedRow =
428
+ this.selectedRow !== row && !this.loading && !this.updating && row;
118
429
  };
119
430
  this.createRows = () => {
120
431
  const data = this.showPagination
121
432
  ? this.data.slice(this.fromRow, this.toRow)
122
433
  : this.data.slice();
123
- return data
124
- .sort(!this.sortable ? undefined : this.getSortFunction())
125
- .map((row) => (h("tr", { onClick: () => (this.selectedRow = this.selectedRow !== row && row), class: {
126
- ["table-row"]: true,
127
- ["table-row-selected"]: this.selectedRow === row,
128
- } }, this.createCells(row))));
129
- };
130
- this.getObjectValue = (cell, key) => {
131
- return Object.values(cell)[Object.keys(cell).indexOf(key)];
434
+ const paginationOffset = this.showPagination ? this.fromRow : 0;
435
+ /**
436
+ * Ensures that createCells has a value in data to map over to actually render the slot.
437
+ * Removes the need for the user to add it multiple times.
438
+ * `addDataToPosition` used to add the element in the correct column order.
439
+ * Adding empty string value in to give `createCells` something to loop over.
440
+ */
441
+ const organisedData = data.map((row, rowIndex) => {
442
+ const slottedColumns = this.columns
443
+ .map(({ key }, index) => isSlotUsed(this.el, `${key}-${rowIndex + paginationOffset}`) && {
444
+ key,
445
+ index,
446
+ })
447
+ .filter((col) => !!col &&
448
+ // skip the column if its already in the row
449
+ !Object.prototype.hasOwnProperty.call(row, col.key));
450
+ return slottedColumns.length > 0
451
+ ? addDataToPosition(row, slottedColumns, "")
452
+ : row;
453
+ });
454
+ return organisedData
455
+ .sort(!this.sortable || this.disableAutoSort
456
+ ? undefined
457
+ : this.getSortFunction())
458
+ .map((row, index) => {
459
+ return (h("tr", {
460
+ // eslint-disable-next-line react/jsx-no-bind
461
+ onClick: () => this.onRowClick(row), class: {
462
+ ["table-row"]: true,
463
+ ["table-row-selected"]: this.highlightSelectedRow && this.selectedRow === row,
464
+ }
465
+ }, this.createCells(row, index + paginationOffset)));
466
+ });
132
467
  };
468
+ this.getObjectValue = (cell, key) => Object.values(cell)[Object.keys(cell).indexOf(key)];
133
469
  this.getSortButtonLabel = (key) => {
134
470
  let label = "";
135
471
  const getNextSortOption = (option) => {
@@ -185,10 +521,174 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
185
521
  }
186
522
  this.sortedColumnOrder = sortOrders[nextSortOrderIndex];
187
523
  sortButton.setAttribute("aria-label", this.getSortButtonLabel(column));
524
+ this.tableSorted = true;
525
+ this.icSortChange.emit({
526
+ columnName: column,
527
+ sorted: this.sortedColumnOrder,
528
+ });
529
+ };
530
+ this.getTypographyElements = () => {
531
+ // Filter out column headers and cell descriptions
532
+ return Array.from(this.el.shadowRoot.querySelectorAll("ic-typography:not(.column-header-text,.cell-description-text)"));
533
+ };
534
+ this.getTooltip = (typographyEl) => {
535
+ return typographyEl.closest(this.TOOLTIP);
536
+ };
537
+ this.updateTruncationTooltip = (removeTooltipOnly = false) => {
538
+ this.getTypographyElements().forEach((typographyEl) => {
539
+ const tooltip = this.getTooltip(typographyEl);
540
+ const cellContainer = this.getCellContainer(typographyEl);
541
+ if (typographyEl.closest(this.TEXT_WRAP_CLASS)) {
542
+ this.removeTooltip(cellContainer, typographyEl, tooltip);
543
+ typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
544
+ return;
545
+ }
546
+ this.regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly);
547
+ });
188
548
  };
189
549
  this.updateScrollOffset = () => {
190
550
  this.scrollOffset = this.el.shadowRoot.querySelector(".table-row-container").scrollTop;
191
551
  };
552
+ this.updateRowHeightForDescriptions = (rowHeight, cellContainer) => {
553
+ cellContainer.setAttribute("data-row-height", rowHeight.toString());
554
+ cellContainer.setAttribute("style", `${this.ROW_HEIGHT_CSS_VARIABLE}: ${rowHeight}px`);
555
+ };
556
+ // Method to update the row heights on cells with descriptions and tooltip truncation
557
+ this.updateCellHeightsWithDescriptions = () => {
558
+ const descriptions = this.el.shadowRoot.querySelectorAll(this.CELL_DESCRIPTION_STRING);
559
+ descriptions.forEach((description) => {
560
+ const cellContainer = description.closest(`.${this.CELL_CONTAINER_WITH_DESCRIPTION_STRING}`);
561
+ const typography = cellContainer.querySelector(this.IC_TYPOGRAPHY_STRING);
562
+ const descriptionMarginTop = window
563
+ .getComputedStyle(description)
564
+ .getPropertyValue("margin-top");
565
+ const descriptionHeight = description.clientHeight + parseInt(descriptionMarginTop, 10);
566
+ if (this.globalRowHeight && this.globalRowHeight !== "auto") {
567
+ if (!typography.textContent &&
568
+ descriptionHeight + this.DEFAULT_LINE_HEIGHT > this.globalRowHeight) {
569
+ this.updateRowHeightForDescriptions(descriptionHeight, cellContainer);
570
+ }
571
+ else if (this.truncationPattern === this.TOOLTIP_STRING) {
572
+ if (descriptionHeight + this.DEFAULT_LINE_HEIGHT >
573
+ this.globalRowHeight) {
574
+ const cellIcon = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.querySelector(".icon");
575
+ if (deviceSizeMatches(IC_DEVICE_SIZES.XS) && cellIcon) {
576
+ // recalculate descriptionHeight as when a word break occurs this value changes
577
+ // Additional spacing given for 300-400% zoom
578
+ this.updateRowHeightForDescriptions(descriptionHeight +
579
+ this.DEFAULT_LINE_HEIGHT +
580
+ cellIcon.clientHeight, cellContainer);
581
+ }
582
+ else {
583
+ this.updateRowHeightForDescriptions(descriptionHeight + this.DEFAULT_LINE_HEIGHT, cellContainer);
584
+ }
585
+ }
586
+ this.addLineClampCSS(typography, cellContainer);
587
+ // Additional case for show/hide truncation for when a description is present, but the text
588
+ // isn't overflowing the cell to trigger the show more button to appear.
589
+ }
590
+ else if (this.truncationPattern === this.SHOW_HIDE_STRING &&
591
+ descriptionHeight + this.DEFAULT_LINE_HEIGHT > this.globalRowHeight &&
592
+ typography.style.getPropertyValue("--truncation-max-lines") !==
593
+ "initial") {
594
+ this.updateRowHeightForDescriptions(descriptionHeight + this.DEFAULT_LINE_HEIGHT, cellContainer);
595
+ if (descriptionHeight) {
596
+ this.createShowHideTruncation(typography, cellContainer, descriptionHeight);
597
+ }
598
+ }
599
+ }
600
+ });
601
+ };
602
+ this.setTableDimensions = () => {
603
+ let tableHostDimensions = {};
604
+ if (this.width) {
605
+ tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-width"]: this.width });
606
+ }
607
+ if (this.height) {
608
+ tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-height"]: this.height });
609
+ }
610
+ if (this.maxWidth) {
611
+ tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-max-width"]: this.maxWidth });
612
+ }
613
+ if (this.minWidth) {
614
+ tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-min-width"]: this.minWidth });
615
+ }
616
+ return tableHostDimensions;
617
+ };
618
+ this.fixCellTooltip = (element) => {
619
+ var _a;
620
+ const tooltipEl = (element.tagName === "IC-TOOLTIP"
621
+ ? element
622
+ : (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.IC_TOOLTIP_STRING));
623
+ if (tooltipEl) {
624
+ tooltipEl.setExternalPopperProps({
625
+ strategy: "fixed",
626
+ });
627
+ }
628
+ };
629
+ this.fixCellTooltips = () => {
630
+ const elements = this.el.shadowRoot.querySelectorAll(".data-type-element");
631
+ elements.forEach((element) => {
632
+ const slotElements = getSlotElements(element);
633
+ slotElements === null || slotElements === void 0 ? void 0 : slotElements.forEach((slottedEl) => {
634
+ this.fixCellTooltip(slottedEl);
635
+ });
636
+ });
637
+ const actionElements = this.el.shadowRoot.querySelectorAll(".action-element");
638
+ actionElements === null || actionElements === void 0 ? void 0 : actionElements.forEach((actionElementSpan) => {
639
+ const actionElement = actionElementSpan.firstChild;
640
+ if (actionElement) {
641
+ this.fixCellTooltip(actionElement);
642
+ }
643
+ });
644
+ };
645
+ this.handleClick = (event, callback) => callback(event);
646
+ this.renderTableBody = (data, loading, overlay) => {
647
+ if (!(data === null || data === void 0 ? void 0 : data.length))
648
+ return;
649
+ if (overlay && loading) {
650
+ return h("tbody", null, this.createRows());
651
+ }
652
+ else if (loading && !overlay) {
653
+ return null;
654
+ }
655
+ else {
656
+ return h("tbody", null, this.createRows());
657
+ }
658
+ };
659
+ this.renderLoadingIndicator = (isLoading, loadingOptions) => {
660
+ if (!isLoading)
661
+ return null;
662
+ 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: {
663
+ "loading-empty": isLoading,
664
+ loading: true,
665
+ "show-background": loadingOptions.showBackground || loadingOptions.overlay,
666
+ }, 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) })));
667
+ };
668
+ this.renderAriaLiveLoading = () => {
669
+ var _a, _b;
670
+ if (this.loading) {
671
+ return ((_a = this.loadingOptions) === null || _a === void 0 ? void 0 : _a.label) || "Loading...";
672
+ }
673
+ else if (this.updating) {
674
+ return ((_b = this.updatingOptions) === null || _b === void 0 ? void 0 : _b.description) || "Updating table data";
675
+ }
676
+ else {
677
+ return "";
678
+ }
679
+ };
680
+ this.renderEmptyState = (data, loading, overlay) => {
681
+ const emptyStateEl = isSlotUsed(this.el, "empty-state") ? (h("slot", { name: "empty-state" })) : (h("ic-empty-state", { aligned: "center", heading: "No Data", class: "loading-empty" }));
682
+ if (loading && !(data === null || data === void 0 ? void 0 : data.length) && overlay) {
683
+ return emptyStateEl;
684
+ }
685
+ else if (!loading && !(data === null || data === void 0 ? void 0 : data.length)) {
686
+ return emptyStateEl;
687
+ }
688
+ else {
689
+ return null;
690
+ }
691
+ };
192
692
  this.fromRow = 0;
193
693
  this.previousRowsPerPage = undefined;
194
694
  this.rowsPerPage = undefined;
@@ -198,23 +698,42 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
198
698
  this.sortedColumn = undefined;
199
699
  this.sortedColumnOrder = undefined;
200
700
  this.toRow = undefined;
701
+ this.currentRowHeight = undefined;
702
+ this.debounceDelay = 0;
201
703
  this.caption = undefined;
704
+ this.columnHeaderTruncation = false;
202
705
  this.columns = undefined;
203
706
  this.data = undefined;
707
+ this.disableAutoSort = false;
204
708
  this.density = "default";
205
709
  this.embedded = false;
710
+ this.globalRowHeight = "auto";
711
+ this.height = undefined;
712
+ this.highlightSelectedRow = true;
206
713
  this.hideColumnHeaders = false;
207
- this.paginationOptions = {
208
- itemsPerPage: [
714
+ this.loading = false;
715
+ this.loadingOptions = undefined;
716
+ this.maxWidth = undefined;
717
+ this.minWidth = undefined;
718
+ this.minimumLoadingDisplayDuration = 1000;
719
+ this.paginationBarOptions = {
720
+ alignment: "right",
721
+ appearance: "default",
722
+ hideAllFromItemsPerPage: false,
723
+ hideRangeLabel: false,
724
+ itemLabel: "Item",
725
+ itemsPerPageOptions: [
209
726
  { label: "10", value: "10" },
210
727
  { label: "25", value: "25" },
211
728
  { label: "50", value: "50" },
212
729
  ],
213
- type: "page",
214
- control: "simple",
215
- itemsPerPageControl: true,
216
- goToPageControl: true,
217
- alignment: "right",
730
+ pageLabel: "Page",
731
+ rangeLabelType: "page",
732
+ selectedItemsPerPage: 10,
733
+ setToFirstPageOnPaginationChange: false,
734
+ showGoToPageControl: true,
735
+ showItemsPerPageControl: true,
736
+ type: "simple",
218
737
  };
219
738
  this.showPagination = false;
220
739
  this.sortable = false;
@@ -224,72 +743,565 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
224
743
  };
225
744
  this.stickyColumnHeaders = false;
226
745
  this.stickyRowHeaders = false;
746
+ this.tableLayout = "fixed";
747
+ this.truncationPattern = undefined;
748
+ this.updating = false;
749
+ this.updatingOptions = undefined;
750
+ this.variableRowHeight = undefined;
751
+ this.width = undefined;
752
+ }
753
+ headerTruncationChangeHandler() {
754
+ if (this.columnHeaderTruncation) {
755
+ this.prevTableContainerWidth = 0;
756
+ }
757
+ else {
758
+ const headers = this.el.shadowRoot.querySelectorAll("th.column-header");
759
+ headers.forEach((header) => {
760
+ const tooltip = header.querySelector(this.IC_TOOLTIP_STRING);
761
+ if (tooltip) {
762
+ tooltip.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
763
+ }
764
+ });
765
+ }
766
+ }
767
+ disconnectedCallback() {
768
+ var _a, _b;
769
+ (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
770
+ (_b = this.headerResizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
227
771
  }
228
772
  componentWillLoad() {
229
- this.rowsPerPage = Number(this.paginationOptions.itemsPerPage[0].value);
773
+ var _a, _b;
774
+ this.rowsPerPage = Number(this.paginationBarOptions.itemsPerPageOptions[0].value);
230
775
  this.previousRowsPerPage = this.rowsPerPage;
231
776
  this.toRow = this.rowsPerPage;
232
777
  this.sortedColumn = this.sortOptions.defaultColumn;
233
778
  this.sortedColumnOrder = this.sortOptions.sortOrders[0];
779
+ 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) });
780
+ this.initialLoad = true;
781
+ this.previousItemsPerPage = this.rowsPerPage;
234
782
  }
235
783
  componentDidLoad() {
236
784
  const tableElement = this.el.shadowRoot.querySelector("table");
237
785
  const tableContainer = this.el.shadowRoot.querySelector(".table-container");
786
+ checkResizeObserver(this.runHeaderResizeObserver);
787
+ if (this.dataUpdated) {
788
+ this.dataUpdated = false;
789
+ }
238
790
  if ((tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientHeight) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientHeight) ||
239
791
  (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientWidth) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientWidth)) {
240
792
  this.scrollable = true;
241
793
  }
794
+ if (this.loading) {
795
+ this.startLoadingTimer();
796
+ this.showLoadingIndicator();
797
+ }
798
+ if (this.truncationPattern) {
799
+ this.getTypographyElements().forEach((typographyEl) => {
800
+ const cellContainer = this.getCellContainer(typographyEl);
801
+ if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
802
+ this.dataTruncation(typographyEl);
803
+ }
804
+ });
805
+ this.debounceDataTruncation();
806
+ }
807
+ if (this.globalRowHeight !== "auto") {
808
+ this.updateSetRowHeight();
809
+ }
810
+ window.addEventListener("resize", this.updateCellHeightsWithDescriptions);
242
811
  }
243
- handleItemsPerPageChange(ev) {
244
- this.previousRowsPerPage = this.rowsPerPage;
245
- this.rowsPerPage = ev.detail.value;
812
+ componentDidUpdate() {
813
+ // truncation updates invoked here once new/updated data has
814
+ // rendered to take into account updated .cell-container/ic-typography box model updates.
815
+ if (this.truncationPattern === this.SHOW_HIDE_STRING ||
816
+ this.truncationPattern === this.TOOLTIP_STRING) {
817
+ this.truncateUpdatedData();
818
+ }
246
819
  }
247
- handlePageChange(ev) {
248
- this.fromRow = (ev.detail.value - 1) * this.rowsPerPage;
249
- this.toRow = this.fromRow + this.rowsPerPage;
250
- const tableRowsContainer = this.el.shadowRoot.querySelector(".table-row-container");
251
- if (this.previousRowsPerPage === this.rowsPerPage) {
252
- tableRowsContainer.scrollTop = 0;
253
- }
254
- else if (this.previousRowsPerPage < this.rowsPerPage) {
255
- tableRowsContainer.scrollTop = this.scrollOffset;
256
- this.previousRowsPerPage = this.rowsPerPage;
820
+ componentDidRender() {
821
+ this.fixCellTooltips();
822
+ this.updateCellHeightsWithDescriptions();
823
+ this.adjustWidthForActionElement();
824
+ }
825
+ truncateUpdatedData() {
826
+ if (this.dataUpdated) {
827
+ if (this.truncationPattern === this.SHOW_HIDE_STRING) {
828
+ this.getTypographyElements().forEach((typographyEl) => {
829
+ const truncWrapper = this.getTruncWrapper(typographyEl);
830
+ const cellContainer = this.getCellContainer(typographyEl);
831
+ if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >=
832
+ (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight)) {
833
+ this.resetShowHideTruncation(typographyEl);
834
+ return;
835
+ }
836
+ setTimeout(() => {
837
+ // slight delay due to data rendering
838
+ if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
839
+ this.addShowHideTruncation(cellContainer, typographyEl);
840
+ }
841
+ }, 150);
842
+ });
843
+ }
844
+ if (this.truncationPattern === this.TOOLTIP_STRING) {
845
+ this.updateTruncationTooltip();
846
+ }
847
+ this.dataUpdated = false;
848
+ }
849
+ if (this.tableSorted) {
850
+ if (this.truncationPattern === this.TOOLTIP_STRING) {
851
+ this.updateTruncationTooltip();
852
+ }
853
+ if (this.truncationPattern === this.SHOW_HIDE_STRING) {
854
+ this.getTypographyElements().forEach((typographyEl) => {
855
+ const cellContainer = this.getCellContainer(typographyEl);
856
+ if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
857
+ this.createShowHideTruncation(typographyEl, cellContainer);
858
+ }
859
+ else {
860
+ typographyEl.resetTruncation().then(() => {
861
+ cellContainer.removeAttribute("style");
862
+ });
863
+ }
864
+ });
865
+ }
866
+ this.tableSorted = false;
867
+ }
868
+ // This function recalculates the tooltip truncation when the rowHeight has been set.
869
+ // This is in componentDidUpdate so a setTimeout is not used to wait for the render to be complete
870
+ if (this.rowHeightSet) {
871
+ const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
872
+ const hasAutoRowHeight = this.globalRowHeight === "auto";
873
+ this.getTypographyElements().forEach((typographyEl) => {
874
+ var _a;
875
+ const cellContainer = this.getCellContainer(typographyEl);
876
+ const tooltipEl = this.getTooltip(typographyEl);
877
+ if (hasAutoRowHeight) {
878
+ cellContainer.style.height = null;
879
+ if (this.truncationPattern === this.TOOLTIP_STRING) {
880
+ this.removeTooltip(cellContainer, typographyEl, tooltipEl);
881
+ typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
882
+ }
883
+ else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
884
+ this.resetShowHideTruncation(typographyEl);
885
+ }
886
+ return;
887
+ }
888
+ const rowHeight = fontSize *
889
+ parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
890
+ // If the set row height is bigger than the cell container even
891
+ // with textWrap, set the row height
892
+ if (!cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
893
+ !((_a = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.style) === null || _a === void 0 ? void 0 : _a.height) &&
894
+ rowHeight > cellContainer.clientHeight &&
895
+ !cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
896
+ cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
897
+ }
898
+ if (this.truncationPattern) {
899
+ // If the set row height is bigger than the typography truncation wrapper
900
+ // scroll height, remove see more / see less button
901
+ if (this.truncationPattern === this.SHOW_HIDE_STRING) {
902
+ const truncWrapper = this.getTruncWrapper(typographyEl);
903
+ const showHideBtn = typographyEl.shadowRoot.querySelector("button");
904
+ if (showHideBtn &&
905
+ (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight) <= cellContainer.clientHeight) {
906
+ this.resetShowHideTruncation(typographyEl);
907
+ return;
908
+ }
909
+ }
910
+ this.truncate(typographyEl, cellContainer, tooltipEl);
911
+ }
912
+ else {
913
+ this.updateSetRowHeight(typographyEl);
914
+ }
915
+ });
916
+ this.rowHeightSet = false;
917
+ }
918
+ // Only run truncation on the new rows
919
+ // when the number of items per page has increased
920
+ if (this.itemsPerPageChange) {
921
+ const allRows = this.el.shadowRoot.querySelectorAll(".table-row");
922
+ if (this.rowsPerPage > this.previousItemsPerPage) {
923
+ const newRows = Array.from(allRows).slice(this.previousItemsPerPage);
924
+ newRows.forEach((row) => {
925
+ row
926
+ .querySelectorAll(this.IC_TYPOGRAPHY_STRING)
927
+ .forEach((typographyEl) => {
928
+ const cellContainer = this.getCellContainer(typographyEl);
929
+ const tooltipEl = this.getTooltip(typographyEl);
930
+ this.truncate(typographyEl, cellContainer, tooltipEl);
931
+ });
932
+ });
933
+ }
934
+ this.previousItemsPerPage = this.rowsPerPage;
935
+ this.itemsPerPageChange = false;
936
+ }
937
+ if (!this.initialLoad && this.icPageChangeEvent) {
938
+ if (this.truncationPattern === this.TOOLTIP_STRING) {
939
+ this.updateTruncationTooltip();
940
+ }
941
+ // set truncation to see more if opened and next/previous page is pressed
942
+ if (this.truncationPattern === this.SHOW_HIDE_STRING) {
943
+ this.getTypographyElements().forEach((typographyEl) => {
944
+ const cellContainer = this.getCellContainer(typographyEl);
945
+ const showHideBtn = typographyEl.shadowRoot.querySelector("button");
946
+ if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > cellContainer.clientHeight &&
947
+ !showHideBtn) {
948
+ this.addShowHideTruncation(cellContainer, typographyEl);
949
+ }
950
+ });
951
+ }
952
+ this.icPageChangeEvent = false;
953
+ }
954
+ if (this.densityUpdate) {
955
+ this.getTypographyElements().forEach((typographyEl) => {
956
+ const cellContainer = this.getCellContainer(typographyEl);
957
+ const tooltipEl = this.getTooltip(typographyEl);
958
+ this.truncate(typographyEl, cellContainer, tooltipEl);
959
+ });
960
+ this.densityUpdate = false;
961
+ }
962
+ if (this.truncationPatternUpdated) {
963
+ if (this.truncationPattern === this.TOOLTIP_STRING) {
964
+ this.getTypographyElements().forEach((typographyEl) => {
965
+ const cellContainer = this.getCellContainer(typographyEl);
966
+ const tooltipEl = this.getTooltip(typographyEl);
967
+ if (typographyEl.scrollHeight > cellContainer.clientHeight) {
968
+ this.addTooltipTruncation(typographyEl, cellContainer, tooltipEl);
969
+ }
970
+ });
971
+ }
972
+ else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
973
+ this.getTypographyElements().forEach((typographyEl) => {
974
+ const truncWrapper = this.getTruncWrapper(typographyEl);
975
+ const cellContainer = this.getCellContainer(typographyEl);
976
+ if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >
977
+ (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight)) {
978
+ this.resetShowHideTruncation(typographyEl);
979
+ return;
980
+ }
981
+ if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
982
+ this.addShowHideTruncation(cellContainer, typographyEl);
983
+ }
984
+ });
985
+ }
986
+ }
987
+ }
988
+ createShowHideTruncation(typographyEl, cellContainer, descriptionHeight) {
989
+ typographyEl.checkMaxLines(typographyEl.scrollHeight);
990
+ typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
991
+ if (cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
992
+ descriptionHeight) {
993
+ typographyEl.setAttribute("max-lines", `${Math.floor(((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - descriptionHeight) /
994
+ this.DEFAULT_LINE_HEIGHT)}`);
257
995
  }
258
996
  else {
997
+ typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
998
+ }
999
+ typographyEl.setShowHideExpanded(false);
1000
+ cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
1001
+ }
1002
+ addTooltipTruncation(typographyEl, cellContainer, tooltip) {
1003
+ this.addLineClampCSS(typographyEl, cellContainer);
1004
+ if (!tooltip) {
1005
+ this.createTruncationTooltip(typographyEl, cellContainer);
1006
+ }
1007
+ }
1008
+ addShowHideTruncation(cellContainer, typographyEl) {
1009
+ cellContainer.classList.add(this.SHOW_HIDE_CSS_CLASS);
1010
+ this.createShowHideTruncation(typographyEl, cellContainer);
1011
+ }
1012
+ // Set the height to initial if row height is set and the show / hide truncation
1013
+ // is clicked
1014
+ handleTypographyTruncationExpandToggle({ detail, }) {
1015
+ const { expanded, typographyEl } = detail;
1016
+ const cellContainer = this.getCellContainer(typographyEl);
1017
+ if (cellContainer.style.getPropertyValue(this.ROW_HEIGHT_CSS_VARIABLE) &&
1018
+ expanded) {
1019
+ cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, "inherit");
1020
+ }
1021
+ }
1022
+ handlePageChange({ detail, target }) {
1023
+ if (target.parentElement !== this.el) {
1024
+ this.fromRow = (detail.value - 1) * this.rowsPerPage;
1025
+ this.toRow = this.fromRow + this.rowsPerPage;
1026
+ const tableRowsContainer = this.el.shadowRoot.querySelector(".table-row-container");
1027
+ if (this.previousRowsPerPage === this.rowsPerPage) {
1028
+ tableRowsContainer.scrollTop = 0;
1029
+ }
1030
+ else if (this.previousRowsPerPage < this.rowsPerPage) {
1031
+ tableRowsContainer.scrollTop = this.scrollOffset;
1032
+ this.previousRowsPerPage = this.rowsPerPage;
1033
+ }
1034
+ else {
1035
+ this.previousRowsPerPage = this.rowsPerPage;
1036
+ }
1037
+ }
1038
+ if (!this.initialLoad && this.previousPaginationPage !== detail.value) {
1039
+ // This is to prevent icPageChange from triggering truncation on first load
1040
+ this.icPageChangeEvent = true;
1041
+ }
1042
+ this.previousPaginationPage = detail.value;
1043
+ this.initialLoad = false;
1044
+ }
1045
+ handleItemsPerPageChange({ detail, target, }) {
1046
+ if (target.parentElement !== this.el) {
259
1047
  this.previousRowsPerPage = this.rowsPerPage;
1048
+ this.rowsPerPage = detail.value;
260
1049
  }
1050
+ this.itemsPerPageChange = true;
1051
+ }
1052
+ handleDensityChange(ev) {
1053
+ this.density = ev.detail.value;
261
1054
  }
262
1055
  clickListener(ev) {
263
1056
  if (ev.target !== this.el)
264
1057
  this.selectedRow = undefined;
265
1058
  }
1059
+ loadingHandler(newValue) {
1060
+ if (newValue)
1061
+ this.startLoadingTimer();
1062
+ if (this.loading) {
1063
+ setTimeout(() => {
1064
+ this.showLoadingIndicator();
1065
+ }, 500);
1066
+ }
1067
+ }
1068
+ truncationPatternHandler(newValue) {
1069
+ if (newValue === this.TOOLTIP_STRING) {
1070
+ this.resetShowHideTruncation();
1071
+ this.updateTruncationTooltip(true);
1072
+ // Not using debounceDataTruncation here due to resizeObserver not being triggered
1073
+ this.getTypographyElements().forEach((typographyEl) => {
1074
+ const cellContainer = this.getCellContainer(typographyEl);
1075
+ const tooltip = this.getTooltip(typographyEl);
1076
+ this.truncate(typographyEl, cellContainer, tooltip);
1077
+ });
1078
+ }
1079
+ if (newValue === this.SHOW_HIDE_STRING) {
1080
+ // ResizeObserver is trigger here due to the see more/see less links being removed.
1081
+ // The resizeObserver will also apply the tooltip where relevant
1082
+ this.updateTruncationTooltip(true);
1083
+ this.getTypographyElements().forEach((typographyEl) => {
1084
+ const truncWrapper = this.getTruncWrapper(typographyEl);
1085
+ const cellContainer = this.getCellContainer(typographyEl);
1086
+ if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >
1087
+ (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight)) {
1088
+ this.resetShowHideTruncation(typographyEl);
1089
+ return;
1090
+ }
1091
+ setTimeout(() => {
1092
+ // slight delay due to data rendering
1093
+ if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
1094
+ this.addShowHideTruncation(cellContainer, typographyEl);
1095
+ }
1096
+ }, 150);
1097
+ });
1098
+ }
1099
+ this.truncationPatternUpdated = true;
1100
+ }
1101
+ async dataHandler(newData) {
1102
+ var _a;
1103
+ 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) });
1104
+ if (this.loading) {
1105
+ !this.hasLoadedForOneSecond
1106
+ ? setTimeout(() => (this.loading = false), this.minimumLoadingDisplayDuration -
1107
+ (Date.now() - this.timerStarted))
1108
+ : (this.loading = false);
1109
+ }
1110
+ if (this.updating)
1111
+ this.updating = false;
1112
+ this.dataUpdated = true;
1113
+ }
1114
+ async densityHandler() {
1115
+ this.densityUpdate = true;
1116
+ }
1117
+ resetShowHideTruncation(typographyEl) {
1118
+ if (typographyEl) {
1119
+ const truncWrapper = this.getTruncWrapper(typographyEl);
1120
+ const cellContainer = this.getCellContainer(typographyEl);
1121
+ if ((truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) &&
1122
+ !isEmptyString(typographyEl.getAttribute("max-lines")) &&
1123
+ Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT) !==
1124
+ +typographyEl.getAttribute("max-lines")) {
1125
+ typographyEl.checkMaxLines(truncWrapper.scrollHeight);
1126
+ typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
1127
+ typographyEl.setShowHideExpanded(false);
1128
+ cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
1129
+ }
1130
+ else if (!cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING)) {
1131
+ typographyEl.resetTruncation().then(() => {
1132
+ if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
1133
+ cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
1134
+ }
1135
+ });
1136
+ }
1137
+ }
1138
+ else {
1139
+ this.getTypographyElements().forEach((typographyEl) => {
1140
+ const cellContainer = this.getCellContainer(typographyEl);
1141
+ typographyEl.resetTruncation().then(() => {
1142
+ if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
1143
+ cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
1144
+ }
1145
+ });
1146
+ });
1147
+ }
1148
+ }
1149
+ rowHeightChangeHandler(newValue, oldValue) {
1150
+ if (+newValue !== +oldValue) {
1151
+ this.deleteTextWrapDataKey(this.data);
1152
+ this.deleteTextWrapDataKey(this.columns);
1153
+ this.removeTextWrap();
1154
+ this.icRowHeightChange.emit();
1155
+ this.rowHeightSet = true;
1156
+ }
1157
+ }
1158
+ /**
1159
+ * Resets the `globalRowHeight` prop to number or auto and sets the `variableRowHeight` prop to `null`.
1160
+ */
1161
+ async resetRowHeights(rowHeight) {
1162
+ this.globalRowHeight = rowHeight || "auto";
1163
+ this.variableRowHeight = null;
1164
+ }
1165
+ showLoadingIndicator() {
1166
+ var _a, _b, _c;
1167
+ if ((_a = this.loadingOptions) === null || _a === void 0 ? void 0 : _a.overlay) {
1168
+ (_b = this.loadingOverlay) === null || _b === void 0 ? void 0 : _b.classList.add("show");
1169
+ }
1170
+ (_c = this.loadingIndicator) === null || _c === void 0 ? void 0 : _c.classList.add("show");
1171
+ }
1172
+ getRowOptions(rowKeys, rowValues) {
1173
+ const rowOptionsIndex = rowKeys.indexOf("rowOptions");
1174
+ return rowOptionsIndex > -1 && rowValues[rowOptionsIndex];
1175
+ }
1176
+ regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly) {
1177
+ // When sorting the table, instead of regenerating the tooltip,
1178
+ // the tooltip details are updated
1179
+ if (tooltip) {
1180
+ if (this.tableSorted) {
1181
+ tooltip.setAttribute("target", typographyEl.id);
1182
+ tooltip.setAttribute("label", typographyEl.textContent);
1183
+ }
1184
+ else {
1185
+ this.removeTooltip(cellContainer, typographyEl, tooltip);
1186
+ }
1187
+ if (removeTooltipOnly) {
1188
+ return;
1189
+ }
1190
+ }
1191
+ // This add line clamp to data only when
1192
+ // the data object has been updated
1193
+ if (!typographyEl.getAttribute("style") && this.dataUpdated) {
1194
+ this.addLineClampCSS(typographyEl, cellContainer);
1195
+ }
1196
+ if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) &&
1197
+ this.truncationPattern === this.TOOLTIP_STRING) {
1198
+ if (!typographyEl.getAttribute("style") ||
1199
+ typographyEl.style.cssText.includes(`${this.LINE_CLAMP_CSS_VARIABLE}: 0;`)) {
1200
+ this.addLineClampCSS(typographyEl, cellContainer);
1201
+ }
1202
+ if (!cellContainer.querySelector(this.IC_TOOLTIP_STRING))
1203
+ this.createTruncationTooltip(typographyEl, cellContainer);
1204
+ }
1205
+ }
1206
+ removeTooltip(cellContainer, typographyEl, tooltip) {
1207
+ const cellTextWrapper = cellContainer.querySelector(this.CELL_TEXT_WRAPPER_STRING);
1208
+ cellTextWrapper.prepend(typographyEl);
1209
+ if (tooltip) {
1210
+ tooltip.remove();
1211
+ }
1212
+ }
1213
+ addLineClampCSS(typographyEl, cellContainer) {
1214
+ var _a, _b;
1215
+ const descriptionCellHeight = (_a = cellContainer.querySelector(this.CELL_DESCRIPTION_STRING)) === null || _a === void 0 ? void 0 : _a.clientHeight;
1216
+ if (cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
1217
+ (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) > descriptionCellHeight) {
1218
+ let iconHeight;
1219
+ if (deviceSizeMatches(IC_DEVICE_SIZES.XS)) {
1220
+ const cellIcon = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.querySelector(".icon");
1221
+ iconHeight = cellIcon ? cellIcon.clientHeight : 0;
1222
+ }
1223
+ else {
1224
+ iconHeight = 0;
1225
+ }
1226
+ const height = (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) -
1227
+ ((_b = cellContainer.querySelector(this.CELL_DESCRIPTION_STRING)) === null || _b === void 0 ? void 0 : _b.clientHeight) -
1228
+ iconHeight;
1229
+ typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: ${this.getLines(height || 0)}`);
1230
+ }
1231
+ else {
1232
+ typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: ${this.getLines(cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)}`);
1233
+ }
1234
+ }
1235
+ createTruncationTooltip(typographyEl, cellContainer) {
1236
+ const tooltipEl = document.createElement(this.IC_TOOLTIP_STRING);
1237
+ tooltipEl.setAttribute("target", typographyEl.id);
1238
+ tooltipEl.setAttribute("label", typographyEl.textContent);
1239
+ tooltipEl.classList.add("ic-tooltip-overflow");
1240
+ tooltipEl.setExternalPopperProps({
1241
+ // This might need reverting back to absolute if the tooltip doesn't dynamically position itself correctly
1242
+ strategy: "fixed",
1243
+ });
1244
+ const cellTextWrapper = cellContainer.querySelector(this.CELL_TEXT_WRAPPER_STRING);
1245
+ cellTextWrapper.prepend(tooltipEl);
1246
+ tooltipEl.prepend(typographyEl);
1247
+ }
266
1248
  render() {
267
- const { caption, createColumnHeaders, createRows, data, hideColumnHeaders, paginationOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumnOrder, sortedColumn, stickyColumnHeaders, updateScrollOffset, } = this;
268
- return (h("div", { class: "table-container" }, h("div", { class: {
1249
+ var _a, _b;
1250
+ const { caption, createColumnHeaders, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationBarOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumn, sortedColumnOrder, stickyColumnHeaders, updateScrollOffset, updating, } = this;
1251
+ 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: {
269
1252
  ["table-row-container"]: true,
270
1253
  scrollable,
271
- }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, h("table", null, h("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { class: {
1254
+ }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, isSlotUsed(this.el, "title-bar") && h("slot", { name: "title-bar" }), h("table", { style: {
1255
+ ["--table-layout"]: this.tableLayout,
1256
+ } }, h("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { class: {
272
1257
  ["column-header-sticky"]: stickyColumnHeaders,
273
1258
  ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
274
- } }, 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
275
- ? `${sortedColumn} sorted ${sortedColumnOrder}`
276
- : "table unsorted"))));
1259
+ } }, h("tr", null, createColumnHeaders()))), updating &&
1260
+ !loading &&
1261
+ (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
1262
+ ? `${((_b = this.columns.find((col) => col.key === sortedColumn)) === null || _b === void 0 ? void 0 : _b.title) || sortedColumn} sorted ${sortedColumnOrder}`
1263
+ : "table unsorted")))));
277
1264
  }
278
1265
  get el() { return this; }
1266
+ static get watchers() { return {
1267
+ "columnHeaderTruncation": ["headerTruncationChangeHandler"],
1268
+ "loading": ["loadingHandler"],
1269
+ "truncationPattern": ["truncationPatternHandler"],
1270
+ "data": ["dataHandler"],
1271
+ "density": ["densityHandler"],
1272
+ "globalRowHeight": ["rowHeightChangeHandler"],
1273
+ "variableRowHeight": ["rowHeightChangeHandler"]
1274
+ }; }
279
1275
  static get style() { return icDataTableCss; }
280
1276
  }, [1, "ic-data-table", {
281
1277
  "caption": [1],
1278
+ "columnHeaderTruncation": [4, "column-header-truncation"],
282
1279
  "columns": [16],
283
1280
  "data": [16],
284
- "density": [1],
1281
+ "disableAutoSort": [4, "disable-auto-sort"],
1282
+ "density": [1025],
285
1283
  "embedded": [4],
1284
+ "globalRowHeight": [1032, "global-row-height"],
1285
+ "height": [1],
1286
+ "highlightSelectedRow": [4, "highlight-selected-row"],
286
1287
  "hideColumnHeaders": [4, "hide-column-headers"],
287
- "paginationOptions": [16],
1288
+ "loading": [1028],
1289
+ "loadingOptions": [16],
1290
+ "maxWidth": [1, "max-width"],
1291
+ "minWidth": [1, "min-width"],
1292
+ "minimumLoadingDisplayDuration": [2, "minimum-loading-display-duration"],
1293
+ "paginationBarOptions": [16],
288
1294
  "showPagination": [4, "show-pagination"],
289
1295
  "sortable": [4],
290
1296
  "sortOptions": [16],
291
1297
  "stickyColumnHeaders": [4, "sticky-column-headers"],
292
1298
  "stickyRowHeaders": [4, "sticky-row-headers"],
1299
+ "tableLayout": [1, "table-layout"],
1300
+ "truncationPattern": [1, "truncation-pattern"],
1301
+ "updating": [4],
1302
+ "updatingOptions": [16],
1303
+ "variableRowHeight": [1040],
1304
+ "width": [1],
293
1305
  "fromRow": [32],
294
1306
  "previousRowsPerPage": [32],
295
1307
  "rowsPerPage": [32],
@@ -298,13 +1310,24 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
298
1310
  "selectedRow": [32],
299
1311
  "sortedColumn": [32],
300
1312
  "sortedColumnOrder": [32],
301
- "toRow": [32]
302
- }, [[0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icPageChange", "handlePageChange"], [8, "click", "clickListener"]]]);
1313
+ "toRow": [32],
1314
+ "currentRowHeight": [32],
1315
+ "debounceDelay": [32],
1316
+ "resetRowHeights": [64]
1317
+ }, [[0, "typographyTruncationExpandToggle", "handleTypographyTruncationExpandToggle"], [0, "icPageChange", "handlePageChange"], [0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icTableDensityUpdate", "handleDensityChange"], [8, "click", "clickListener"]], {
1318
+ "columnHeaderTruncation": ["headerTruncationChangeHandler"],
1319
+ "loading": ["loadingHandler"],
1320
+ "truncationPattern": ["truncationPatternHandler"],
1321
+ "data": ["dataHandler"],
1322
+ "density": ["densityHandler"],
1323
+ "globalRowHeight": ["rowHeightChangeHandler"],
1324
+ "variableRowHeight": ["rowHeightChangeHandler"]
1325
+ }]);
303
1326
  function defineCustomElement$1() {
304
1327
  if (typeof customElements === "undefined") {
305
1328
  return;
306
1329
  }
307
- const components = ["ic-data-table", "ic-button", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-link", "ic-loading-indicator", "ic-menu", "ic-pagination", "ic-pagination-bar", "ic-pagination-item", "ic-select", "ic-text-field", "ic-tooltip", "ic-typography"];
1330
+ const components = ["ic-data-table", "ic-button", "ic-empty-state", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-link", "ic-loading-indicator", "ic-menu", "ic-pagination", "ic-pagination-bar", "ic-pagination-item", "ic-select", "ic-text-field", "ic-tooltip", "ic-typography"];
308
1331
  components.forEach(tagName => { switch (tagName) {
309
1332
  case "ic-data-table":
310
1333
  if (!customElements.get(tagName)) {
@@ -312,6 +1335,11 @@ function defineCustomElement$1() {
312
1335
  }
313
1336
  break;
314
1337
  case "ic-button":
1338
+ if (!customElements.get(tagName)) {
1339
+ defineCustomElement$h();
1340
+ }
1341
+ break;
1342
+ case "ic-empty-state":
315
1343
  if (!customElements.get(tagName)) {
316
1344
  defineCustomElement$g();
317
1345
  }