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