@ukic/canary-web-components 2.0.0-canary.20 → 2.0.0-canary.22

Sign up to get free protection for your applications and to get access to all the features.
Files changed (449) hide show
  1. package/dist/cjs/core.cjs.js +1 -1
  2. package/dist/cjs/{helpers-73d277d1.js → helpers-093368be.js} +6 -2
  3. package/dist/cjs/helpers-093368be.js.map +1 -0
  4. package/dist/cjs/{helpers-fc9441f8.js → helpers-85c5ca15.js} +94 -1
  5. package/dist/cjs/helpers-85c5ca15.js.map +1 -0
  6. package/dist/cjs/ic-accordion-group.cjs.entry.js +1 -1
  7. package/dist/cjs/ic-accordion.cjs.entry.js +1 -1
  8. package/dist/cjs/ic-alert.cjs.entry.js +17 -1
  9. package/dist/cjs/ic-alert.cjs.entry.js.map +1 -1
  10. package/dist/cjs/ic-back-to-top.cjs.entry.js +1 -1
  11. package/dist/cjs/ic-badge.cjs.entry.js +1 -1
  12. package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +1 -1
  13. package/dist/cjs/ic-breadcrumb.cjs.entry.js +1 -1
  14. package/dist/cjs/ic-button_3.cjs.entry.js +11 -6
  15. package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
  16. package/dist/cjs/ic-card-horizontal.cjs.entry.js +131 -0
  17. package/dist/cjs/ic-card-horizontal.cjs.entry.js.map +1 -0
  18. package/dist/cjs/ic-card.cjs.entry.js +25 -1
  19. package/dist/cjs/ic-card.cjs.entry.js.map +1 -1
  20. package/dist/cjs/ic-checkbox-group.cjs.entry.js +1 -1
  21. package/dist/cjs/ic-checkbox.cjs.entry.js +1 -1
  22. package/dist/cjs/ic-chip.cjs.entry.js +9 -3
  23. package/dist/cjs/ic-chip.cjs.entry.js.map +1 -1
  24. package/dist/cjs/ic-classification-banner.cjs.entry.js +12 -3
  25. package/dist/cjs/ic-classification-banner.cjs.entry.js.map +1 -1
  26. package/dist/cjs/ic-data-row.cjs.entry.js +1 -1
  27. package/dist/cjs/ic-data-table-title-bar.cjs.entry.js +1 -1
  28. package/dist/cjs/ic-data-table.cjs.entry.js +526 -71
  29. package/dist/cjs/ic-data-table.cjs.entry.js.map +1 -1
  30. package/dist/cjs/ic-date-input.cjs.entry.js +4 -3
  31. package/dist/cjs/ic-date-input.cjs.entry.js.map +1 -1
  32. package/dist/cjs/ic-date-picker.cjs.entry.js +15 -4
  33. package/dist/cjs/ic-date-picker.cjs.entry.js.map +1 -1
  34. package/dist/cjs/ic-dialog.cjs.entry.js +1 -1
  35. package/dist/cjs/ic-divider.cjs.entry.js +1 -1
  36. package/dist/cjs/ic-empty-state_2.cjs.entry.js +21 -2
  37. package/dist/cjs/ic-empty-state_2.cjs.entry.js.map +1 -1
  38. package/dist/cjs/ic-footer-link-group.cjs.entry.js +1 -1
  39. package/dist/cjs/ic-footer-link.cjs.entry.js +1 -1
  40. package/dist/cjs/ic-footer.cjs.entry.js +1 -1
  41. package/dist/cjs/ic-hero.cjs.entry.js +17 -1
  42. package/dist/cjs/ic-hero.cjs.entry.js.map +1 -1
  43. package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +1 -1
  44. package/dist/cjs/ic-input-component-container_4.cjs.entry.js +1 -1
  45. package/dist/cjs/ic-link.cjs.entry.js +1 -1
  46. package/dist/cjs/ic-menu-group.cjs.entry.js +1 -1
  47. package/dist/cjs/ic-menu-item.cjs.entry.js +1 -1
  48. package/dist/cjs/ic-menu-with-multi.cjs.entry.js +1 -1
  49. package/dist/cjs/ic-menu.cjs.entry.js +1 -1
  50. package/dist/cjs/ic-navigation-button.cjs.entry.js +1 -1
  51. package/dist/cjs/ic-navigation-group.cjs.entry.js +1 -1
  52. package/dist/cjs/ic-navigation-item.cjs.entry.js +1 -1
  53. package/dist/cjs/ic-navigation-menu.cjs.entry.js +1 -1
  54. package/dist/cjs/ic-page-header.cjs.entry.js +1 -1
  55. package/dist/cjs/ic-pagination_4.cjs.entry.js +1 -1
  56. package/dist/cjs/ic-popover-menu.cjs.entry.js +1 -1
  57. package/dist/cjs/ic-radio-group.cjs.entry.js +41 -22
  58. package/dist/cjs/ic-radio-group.cjs.entry.js.map +1 -1
  59. package/dist/cjs/ic-radio-option.cjs.entry.js +1 -1
  60. package/dist/cjs/ic-search-bar.cjs.entry.js +1 -1
  61. package/dist/cjs/ic-select-with-multi.cjs.entry.js +2 -30
  62. package/dist/cjs/ic-select-with-multi.cjs.entry.js.map +1 -1
  63. package/dist/cjs/ic-side-navigation.cjs.entry.js +1 -1
  64. package/dist/cjs/ic-status-tag.cjs.entry.js +1 -1
  65. package/dist/cjs/ic-step.cjs.entry.js +1 -1
  66. package/dist/cjs/ic-stepper.cjs.entry.js +1 -1
  67. package/dist/cjs/ic-switch.cjs.entry.js +1 -1
  68. package/dist/cjs/ic-tab-group.cjs.entry.js +1 -1
  69. package/dist/cjs/ic-tab-panel.cjs.entry.js +1 -1
  70. package/dist/cjs/ic-tab.cjs.entry.js +1 -1
  71. package/dist/cjs/ic-theme.cjs.entry.js +1 -1
  72. package/dist/cjs/ic-toast.cjs.entry.js +1 -1
  73. package/dist/cjs/ic-toggle-button.cjs.entry.js +1 -1
  74. package/dist/cjs/ic-top-navigation.cjs.entry.js +1 -1
  75. package/dist/cjs/ic-tree-item.cjs.entry.js +241 -0
  76. package/dist/cjs/ic-tree-item.cjs.entry.js.map +1 -0
  77. package/dist/cjs/ic-tree-view.cjs.entry.js +203 -0
  78. package/dist/cjs/ic-tree-view.cjs.entry.js.map +1 -0
  79. package/dist/cjs/ic-typography.cjs.entry.js +47 -12
  80. package/dist/cjs/ic-typography.cjs.entry.js.map +1 -1
  81. package/dist/cjs/index-4cf27b16.js +12 -0
  82. package/dist/cjs/loader.cjs.js +1 -1
  83. package/dist/collection/assets/arrow-dropdown.svg +3 -0
  84. package/dist/collection/collection-manifest.json +4 -1
  85. package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.css +655 -0
  86. package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.js +373 -0
  87. package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.js.map +1 -0
  88. package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.types.js +2 -0
  89. package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.types.js.map +1 -0
  90. package/dist/collection/components/ic-card-horizontal/test/basic/ic-card-horizontal.spec.js +130 -0
  91. package/dist/collection/components/ic-card-horizontal/test/basic/ic-card-horizontal.spec.js.map +1 -0
  92. package/dist/collection/components/ic-data-table/ic-data-table.css +55 -5
  93. package/dist/collection/components/ic-data-table/ic-data-table.js +570 -77
  94. package/dist/collection/components/ic-data-table/ic-data-table.js.map +1 -1
  95. package/dist/collection/components/ic-data-table/ic-data-table.types.js.map +1 -1
  96. package/dist/collection/components/ic-data-table/story-data.js +364 -21
  97. package/dist/collection/components/ic-data-table/story-data.js.map +1 -1
  98. package/dist/collection/components/ic-data-table/test/basic/ic-data-table.spec.js +1 -1
  99. package/dist/collection/components/ic-data-table/test/basic/ic-data-table.spec.js.map +1 -1
  100. package/dist/collection/components/ic-date-input/ic-date-input.js +21 -2
  101. package/dist/collection/components/ic-date-input/ic-date-input.js.map +1 -1
  102. package/dist/collection/components/ic-date-input/test/basic/ic-date-input.spec.js +7 -0
  103. package/dist/collection/components/ic-date-input/test/basic/ic-date-input.spec.js.map +1 -1
  104. package/dist/collection/components/ic-date-picker/ic-date-picker.js +34 -3
  105. package/dist/collection/components/ic-date-picker/ic-date-picker.js.map +1 -1
  106. package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker.spec.js +29 -0
  107. package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker.spec.js.map +1 -1
  108. package/dist/collection/components/ic-tree-item/ic-tree-item.css +150 -0
  109. package/dist/collection/components/ic-tree-item/ic-tree-item.js +592 -0
  110. package/dist/collection/components/ic-tree-item/ic-tree-item.js.map +1 -0
  111. package/dist/collection/components/ic-tree-item/test/basic/ic-tree-item.spec.js +114 -0
  112. package/dist/collection/components/ic-tree-item/test/basic/ic-tree-item.spec.js.map +1 -0
  113. package/dist/collection/components/ic-tree-view/ic-tree-view.css +56 -0
  114. package/dist/collection/components/ic-tree-view/ic-tree-view.js +296 -0
  115. package/dist/collection/components/ic-tree-view/ic-tree-view.js.map +1 -0
  116. package/dist/collection/components/ic-tree-view/test/basic/ic-tree-view.spec.js +85 -0
  117. package/dist/collection/components/ic-tree-view/test/basic/ic-tree-view.spec.js.map +1 -0
  118. package/dist/collection/utils/helpers.js +4 -0
  119. package/dist/collection/utils/helpers.js.map +1 -1
  120. package/dist/components/helpers.js +5 -2
  121. package/dist/components/helpers.js.map +1 -1
  122. package/dist/components/helpers2.js +88 -1
  123. package/dist/components/helpers2.js.map +1 -1
  124. package/dist/components/ic-alert2.js +18 -2
  125. package/dist/components/ic-alert2.js.map +1 -1
  126. package/dist/components/ic-back-to-top.js +1 -1
  127. package/dist/components/ic-badge.js +1 -1
  128. package/dist/components/ic-breadcrumb-group.js +1 -1
  129. package/dist/components/ic-breadcrumb2.js +1 -1
  130. package/dist/components/ic-button2.js +1 -1
  131. package/dist/components/ic-card-horizontal.d.ts +11 -0
  132. package/dist/components/ic-card-horizontal.js +167 -0
  133. package/dist/components/ic-card-horizontal.js.map +1 -0
  134. package/dist/components/ic-card.js +26 -2
  135. package/dist/components/ic-card.js.map +1 -1
  136. package/dist/components/ic-checkbox-group.js +1 -1
  137. package/dist/components/ic-checkbox.js +1 -1
  138. package/dist/components/ic-chip.js +9 -3
  139. package/dist/components/ic-chip.js.map +1 -1
  140. package/dist/components/ic-classification-banner.js +12 -3
  141. package/dist/components/ic-classification-banner.js.map +1 -1
  142. package/dist/components/ic-data-row.js +1 -1
  143. package/dist/components/ic-data-table.js +531 -72
  144. package/dist/components/ic-data-table.js.map +1 -1
  145. package/dist/components/ic-date-input2.js +5 -3
  146. package/dist/components/ic-date-input2.js.map +1 -1
  147. package/dist/components/ic-date-picker.js +17 -4
  148. package/dist/components/ic-date-picker.js.map +1 -1
  149. package/dist/components/ic-dialog.js +1 -1
  150. package/dist/components/ic-divider2.js +1 -1
  151. package/dist/components/ic-empty-state2.js +21 -2
  152. package/dist/components/ic-empty-state2.js.map +1 -1
  153. package/dist/components/ic-footer-link-group.js +1 -1
  154. package/dist/components/ic-footer-link.js +1 -1
  155. package/dist/components/ic-footer.js +1 -1
  156. package/dist/components/ic-hero.js +18 -2
  157. package/dist/components/ic-hero.js.map +1 -1
  158. package/dist/components/ic-horizontal-scroll2.js +1 -1
  159. package/dist/components/ic-input-component-container2.js +1 -1
  160. package/dist/components/ic-input-label2.js +1 -1
  161. package/dist/components/ic-input-validation2.js +1 -1
  162. package/dist/components/ic-link2.js +1 -1
  163. package/dist/components/ic-loading-indicator2.js +1 -1
  164. package/dist/components/ic-menu-group.js +1 -1
  165. package/dist/components/ic-menu-item2.js +1 -1
  166. package/dist/components/ic-menu3.js +1 -1
  167. package/dist/components/ic-navigation-button.js +1 -1
  168. package/dist/components/ic-navigation-group.js +1 -1
  169. package/dist/components/ic-navigation-item.js +1 -1
  170. package/dist/components/ic-navigation-menu2.js +1 -1
  171. package/dist/components/ic-page-header.js +1 -1
  172. package/dist/components/ic-pagination-bar2.js +1 -1
  173. package/dist/components/ic-pagination-item2.js +1 -1
  174. package/dist/components/ic-popover-menu.js +1 -1
  175. package/dist/components/ic-radio-group.js +41 -22
  176. package/dist/components/ic-radio-group.js.map +1 -1
  177. package/dist/components/ic-radio-option.js +1 -1
  178. package/dist/components/ic-search-bar.js +1 -1
  179. package/dist/components/ic-select-with-multi.js +1 -29
  180. package/dist/components/ic-select-with-multi.js.map +1 -1
  181. package/dist/components/ic-select2.js +1 -1
  182. package/dist/components/ic-side-navigation.js +1 -1
  183. package/dist/components/ic-step.js +1 -1
  184. package/dist/components/ic-stepper.js +1 -1
  185. package/dist/components/ic-switch.js +1 -1
  186. package/dist/components/ic-tab-panel.js +1 -1
  187. package/dist/components/ic-text-field2.js +1 -1
  188. package/dist/components/ic-theme.js +1 -1
  189. package/dist/components/ic-toast.js +1 -1
  190. package/dist/components/ic-tooltip2.js +12 -5
  191. package/dist/components/ic-tooltip2.js.map +1 -1
  192. package/dist/components/ic-top-navigation.js +1 -1
  193. package/dist/components/ic-tree-item.d.ts +11 -0
  194. package/dist/components/ic-tree-item.js +286 -0
  195. package/dist/components/ic-tree-item.js.map +1 -0
  196. package/dist/components/ic-tree-view.d.ts +11 -0
  197. package/dist/components/ic-tree-view.js +237 -0
  198. package/dist/components/ic-tree-view.js.map +1 -0
  199. package/dist/components/ic-typography2.js +53 -15
  200. package/dist/components/ic-typography2.js.map +1 -1
  201. package/dist/core/core.esm.js +1 -1
  202. package/dist/core/core.esm.js.map +1 -1
  203. package/dist/core/{p-0cdd4c93.entry.js → p-0180e00a.entry.js} +2 -2
  204. package/dist/core/{p-0970c8a1.entry.js → p-046f4de6.entry.js} +2 -2
  205. package/dist/core/{p-2536b95b.entry.js → p-06732eaf.entry.js} +2 -2
  206. package/dist/core/p-0ec04c16.entry.js +2 -0
  207. package/dist/core/p-0ec04c16.entry.js.map +1 -0
  208. package/dist/core/{p-4c57eef0.entry.js → p-13993bf3.entry.js} +2 -2
  209. package/dist/core/p-16a48a63.entry.js +2 -0
  210. package/dist/core/p-16a48a63.entry.js.map +1 -0
  211. package/dist/core/{p-12120521.entry.js → p-216fbd5e.entry.js} +2 -2
  212. package/dist/core/{p-14b363d0.entry.js → p-2d063032.entry.js} +2 -2
  213. package/dist/core/{p-e2387530.entry.js → p-2ee5d3fb.entry.js} +2 -2
  214. package/dist/core/p-355c8532.entry.js +2 -0
  215. package/dist/core/p-355c8532.entry.js.map +1 -0
  216. package/dist/core/p-3a59391f.entry.js +2 -0
  217. package/dist/core/{p-2b9b9f6e.entry.js.map → p-3a59391f.entry.js.map} +1 -1
  218. package/dist/core/{p-edf3411a.entry.js → p-3f2723aa.entry.js} +2 -2
  219. package/dist/core/p-401d0c66.entry.js +2 -0
  220. package/dist/core/p-401d0c66.entry.js.map +1 -0
  221. package/dist/core/p-413e68be.entry.js +2 -0
  222. package/dist/core/{p-60ca1000.entry.js.map → p-413e68be.entry.js.map} +1 -1
  223. package/dist/core/{p-a484c41c.entry.js → p-418a84d4.entry.js} +2 -2
  224. package/dist/core/{p-a1369740.entry.js → p-41916ef7.entry.js} +2 -2
  225. package/dist/core/p-4309460f.entry.js +2 -0
  226. package/dist/core/p-4309460f.entry.js.map +1 -0
  227. package/dist/core/{p-7168b71a.entry.js → p-486a6957.entry.js} +2 -2
  228. package/dist/core/{p-87868dd2.entry.js → p-5348af01.entry.js} +2 -2
  229. package/dist/core/p-57043b1e.entry.js +2 -0
  230. package/dist/core/p-57043b1e.entry.js.map +1 -0
  231. package/dist/core/p-59993f36.entry.js +2 -0
  232. package/dist/core/p-59993f36.entry.js.map +1 -0
  233. package/dist/core/{p-c2b5e7b1.entry.js → p-5fea8f1c.entry.js} +2 -2
  234. package/dist/core/{p-c2b5e7b1.entry.js.map → p-5fea8f1c.entry.js.map} +1 -1
  235. package/dist/core/{p-eeae7272.entry.js → p-6398a726.entry.js} +2 -2
  236. package/dist/core/{p-0629691b.entry.js → p-648fb902.entry.js} +2 -2
  237. package/dist/core/{p-7e850bad.entry.js → p-673a4a62.entry.js} +2 -2
  238. package/dist/core/{p-0ecde7a8.entry.js → p-67ae9d37.entry.js} +2 -2
  239. package/dist/core/{p-d3e186a3.entry.js → p-6b01e096.entry.js} +2 -2
  240. package/dist/core/{p-92a858f7.entry.js → p-6b1fcf87.entry.js} +2 -2
  241. package/dist/core/{p-94ce6f29.entry.js → p-6fb3d61e.entry.js} +2 -2
  242. package/dist/core/{p-47c91e08.entry.js → p-789ae7f5.entry.js} +2 -2
  243. package/dist/core/{p-1440cdd1.js → p-8128572e.js} +2 -2
  244. package/dist/core/p-8128572e.js.map +1 -0
  245. package/dist/core/p-84eaa486.entry.js +2 -0
  246. package/dist/core/p-84eaa486.entry.js.map +1 -0
  247. package/dist/core/{p-24f9f6d4.entry.js → p-89c7ea3e.entry.js} +2 -2
  248. package/dist/core/{p-992b6161.entry.js → p-8d276e8f.entry.js} +2 -2
  249. package/dist/core/{p-db5c4969.entry.js → p-91cf89c8.entry.js} +2 -2
  250. package/dist/core/p-91cf89c8.entry.js.map +1 -0
  251. package/dist/core/p-969cadfa.entry.js +2 -0
  252. package/dist/core/p-969cadfa.entry.js.map +1 -0
  253. package/dist/core/p-97f141a6.entry.js +2 -0
  254. package/dist/core/p-97f141a6.entry.js.map +1 -0
  255. package/dist/core/{p-cb7793b0.entry.js → p-99185fd5.entry.js} +2 -2
  256. package/dist/core/{p-4883e147.entry.js → p-99f96c33.entry.js} +2 -2
  257. package/dist/core/p-a052bb95.entry.js +2 -0
  258. package/dist/core/p-a052bb95.entry.js.map +1 -0
  259. package/dist/core/{p-8100f45c.entry.js → p-a72af8db.entry.js} +2 -2
  260. package/dist/core/{p-6eafa62e.entry.js → p-a787bba7.entry.js} +2 -2
  261. package/dist/core/{p-6c5c6aaf.entry.js → p-aa72f551.entry.js} +2 -2
  262. package/dist/core/{p-781e8391.entry.js → p-aaaa9261.entry.js} +2 -2
  263. package/dist/core/p-adbe0d89.js +2 -0
  264. package/dist/core/p-adbe0d89.js.map +1 -0
  265. package/dist/core/{p-646b886c.entry.js → p-b29e96b5.entry.js} +2 -2
  266. package/dist/core/p-b97eba08.entry.js +2 -0
  267. package/dist/core/p-b97eba08.entry.js.map +1 -0
  268. package/dist/core/{p-3245554e.entry.js → p-bfc5f3f4.entry.js} +2 -2
  269. package/dist/core/{p-e1e04f34.entry.js → p-cb3afdbf.entry.js} +2 -2
  270. package/dist/core/{p-6cf5343b.entry.js → p-ccf72538.entry.js} +2 -2
  271. package/dist/core/{p-3eb33ef4.entry.js → p-ce0999f1.entry.js} +2 -2
  272. package/dist/core/{p-0a99994a.entry.js → p-d02a4d1b.entry.js} +2 -2
  273. package/dist/core/{p-b7161816.entry.js → p-d8322108.entry.js} +2 -2
  274. package/dist/core/{p-d67a5c90.entry.js → p-d86cdbc8.entry.js} +2 -2
  275. package/dist/core/{p-a5bb7bb0.entry.js → p-da8255b8.entry.js} +2 -2
  276. package/dist/core/{p-6a7a5ed5.entry.js → p-e9f5ebb3.entry.js} +2 -2
  277. package/dist/core/p-e9f5ebb3.entry.js.map +1 -0
  278. package/dist/core/p-ede631c5.entry.js +2 -0
  279. package/dist/core/p-ede631c5.entry.js.map +1 -0
  280. package/dist/core/{p-66c26240.entry.js → p-f09b2041.entry.js} +2 -2
  281. package/dist/core/{p-b8d3f121.entry.js → p-f1044e4d.entry.js} +2 -2
  282. package/dist/core/{p-af21360a.entry.js → p-f10f7f37.entry.js} +2 -2
  283. package/dist/core/{p-34cc7b3d.entry.js → p-fa77211d.entry.js} +2 -2
  284. package/dist/esm/core.js +1 -1
  285. package/dist/esm/{helpers-4e2e4787.js → helpers-886489d5.js} +6 -3
  286. package/dist/esm/helpers-886489d5.js.map +1 -0
  287. package/dist/esm/{helpers-1cd71f8a.js → helpers-f543bc77.js} +89 -2
  288. package/dist/{cjs/helpers-fc9441f8.js.map → esm/helpers-f543bc77.js.map} +1 -1
  289. package/dist/esm/ic-accordion-group.entry.js +1 -1
  290. package/dist/esm/ic-accordion.entry.js +1 -1
  291. package/dist/esm/ic-alert.entry.js +18 -2
  292. package/dist/esm/ic-alert.entry.js.map +1 -1
  293. package/dist/esm/ic-back-to-top.entry.js +1 -1
  294. package/dist/esm/ic-badge.entry.js +1 -1
  295. package/dist/esm/ic-breadcrumb-group.entry.js +1 -1
  296. package/dist/esm/ic-breadcrumb.entry.js +1 -1
  297. package/dist/esm/ic-button_3.entry.js +11 -6
  298. package/dist/esm/ic-button_3.entry.js.map +1 -1
  299. package/dist/esm/ic-card-horizontal.entry.js +127 -0
  300. package/dist/esm/ic-card-horizontal.entry.js.map +1 -0
  301. package/dist/esm/ic-card.entry.js +26 -2
  302. package/dist/esm/ic-card.entry.js.map +1 -1
  303. package/dist/esm/ic-checkbox-group.entry.js +1 -1
  304. package/dist/esm/ic-checkbox.entry.js +1 -1
  305. package/dist/esm/ic-chip.entry.js +9 -3
  306. package/dist/esm/ic-chip.entry.js.map +1 -1
  307. package/dist/esm/ic-classification-banner.entry.js +12 -3
  308. package/dist/esm/ic-classification-banner.entry.js.map +1 -1
  309. package/dist/esm/ic-data-row.entry.js +1 -1
  310. package/dist/esm/ic-data-table-title-bar.entry.js +1 -1
  311. package/dist/esm/ic-data-table.entry.js +526 -71
  312. package/dist/esm/ic-data-table.entry.js.map +1 -1
  313. package/dist/esm/ic-date-input.entry.js +4 -3
  314. package/dist/esm/ic-date-input.entry.js.map +1 -1
  315. package/dist/esm/ic-date-picker.entry.js +15 -4
  316. package/dist/esm/ic-date-picker.entry.js.map +1 -1
  317. package/dist/esm/ic-dialog.entry.js +1 -1
  318. package/dist/esm/ic-divider.entry.js +1 -1
  319. package/dist/esm/ic-empty-state_2.entry.js +22 -3
  320. package/dist/esm/ic-empty-state_2.entry.js.map +1 -1
  321. package/dist/esm/ic-footer-link-group.entry.js +1 -1
  322. package/dist/esm/ic-footer-link.entry.js +1 -1
  323. package/dist/esm/ic-footer.entry.js +1 -1
  324. package/dist/esm/ic-hero.entry.js +18 -2
  325. package/dist/esm/ic-hero.entry.js.map +1 -1
  326. package/dist/esm/ic-horizontal-scroll.entry.js +1 -1
  327. package/dist/esm/ic-input-component-container_4.entry.js +1 -1
  328. package/dist/esm/ic-link.entry.js +1 -1
  329. package/dist/esm/ic-menu-group.entry.js +1 -1
  330. package/dist/esm/ic-menu-item.entry.js +1 -1
  331. package/dist/esm/ic-menu-with-multi.entry.js +1 -1
  332. package/dist/esm/ic-menu.entry.js +1 -1
  333. package/dist/esm/ic-navigation-button.entry.js +1 -1
  334. package/dist/esm/ic-navigation-group.entry.js +1 -1
  335. package/dist/esm/ic-navigation-item.entry.js +1 -1
  336. package/dist/esm/ic-navigation-menu.entry.js +1 -1
  337. package/dist/esm/ic-page-header.entry.js +1 -1
  338. package/dist/esm/ic-pagination_4.entry.js +1 -1
  339. package/dist/esm/ic-popover-menu.entry.js +1 -1
  340. package/dist/esm/ic-radio-group.entry.js +41 -22
  341. package/dist/esm/ic-radio-group.entry.js.map +1 -1
  342. package/dist/esm/ic-radio-option.entry.js +1 -1
  343. package/dist/esm/ic-search-bar.entry.js +1 -1
  344. package/dist/esm/ic-select-with-multi.entry.js +1 -29
  345. package/dist/esm/ic-select-with-multi.entry.js.map +1 -1
  346. package/dist/esm/ic-side-navigation.entry.js +1 -1
  347. package/dist/esm/ic-status-tag.entry.js +1 -1
  348. package/dist/esm/ic-step.entry.js +1 -1
  349. package/dist/esm/ic-stepper.entry.js +1 -1
  350. package/dist/esm/ic-switch.entry.js +1 -1
  351. package/dist/esm/ic-tab-group.entry.js +1 -1
  352. package/dist/esm/ic-tab-panel.entry.js +1 -1
  353. package/dist/esm/ic-tab.entry.js +1 -1
  354. package/dist/esm/ic-theme.entry.js +1 -1
  355. package/dist/esm/ic-toast.entry.js +1 -1
  356. package/dist/esm/ic-toggle-button.entry.js +1 -1
  357. package/dist/esm/ic-top-navigation.entry.js +1 -1
  358. package/dist/esm/ic-tree-item.entry.js +237 -0
  359. package/dist/esm/ic-tree-item.entry.js.map +1 -0
  360. package/dist/esm/ic-tree-view.entry.js +199 -0
  361. package/dist/esm/ic-tree-view.entry.js.map +1 -0
  362. package/dist/esm/ic-typography.entry.js +48 -13
  363. package/dist/esm/ic-typography.entry.js.map +1 -1
  364. package/dist/esm/index-93509377.js +12 -0
  365. package/dist/esm/loader.js +1 -1
  366. package/dist/types/components/ic-card-horizontal/ic-card-horizontal.d.ts +71 -0
  367. package/dist/types/components/ic-card-horizontal/ic-card-horizontal.types.d.ts +1 -0
  368. package/dist/types/components/ic-data-table/ic-data-table.d.ts +68 -7
  369. package/dist/types/components/ic-data-table/ic-data-table.types.d.ts +9 -0
  370. package/dist/types/components/ic-data-table/story-data.d.ts +112 -0
  371. package/dist/types/components/ic-date-input/ic-date-input.d.ts +4 -0
  372. package/dist/types/components/ic-date-picker/ic-date-picker.d.ts +5 -0
  373. package/dist/types/components/ic-tree-item/ic-tree-item.d.ts +95 -0
  374. package/dist/types/components/ic-tree-view/ic-tree-view.d.ts +40 -0
  375. package/dist/types/components.d.ts +272 -6
  376. package/dist/types/utils/helpers.d.ts +1 -0
  377. package/hydrate/index.js +2198 -899
  378. package/package.json +3 -3
  379. package/dist/cjs/helpers-73d277d1.js.map +0 -1
  380. package/dist/core/p-06e0b5b6.entry.js +0 -2
  381. package/dist/core/p-06e0b5b6.entry.js.map +0 -1
  382. package/dist/core/p-0b14be10.entry.js +0 -2
  383. package/dist/core/p-0b14be10.entry.js.map +0 -1
  384. package/dist/core/p-1440cdd1.js.map +0 -1
  385. package/dist/core/p-20d4ded5.js +0 -2
  386. package/dist/core/p-20d4ded5.js.map +0 -1
  387. package/dist/core/p-2b9b9f6e.entry.js +0 -2
  388. package/dist/core/p-34e72f79.entry.js +0 -2
  389. package/dist/core/p-34e72f79.entry.js.map +0 -1
  390. package/dist/core/p-352b9c17.entry.js +0 -2
  391. package/dist/core/p-352b9c17.entry.js.map +0 -1
  392. package/dist/core/p-3fa986f8.entry.js +0 -2
  393. package/dist/core/p-3fa986f8.entry.js.map +0 -1
  394. package/dist/core/p-4ec1ce96.entry.js +0 -2
  395. package/dist/core/p-4ec1ce96.entry.js.map +0 -1
  396. package/dist/core/p-60ca1000.entry.js +0 -2
  397. package/dist/core/p-6a7a5ed5.entry.js.map +0 -1
  398. package/dist/core/p-9769c195.entry.js +0 -2
  399. package/dist/core/p-9769c195.entry.js.map +0 -1
  400. package/dist/core/p-cb15d0b6.entry.js +0 -2
  401. package/dist/core/p-cb15d0b6.entry.js.map +0 -1
  402. package/dist/core/p-db5c4969.entry.js.map +0 -1
  403. package/dist/core/p-e32cce28.entry.js +0 -2
  404. package/dist/core/p-e32cce28.entry.js.map +0 -1
  405. package/dist/core/p-ef996e40.entry.js +0 -2
  406. package/dist/core/p-ef996e40.entry.js.map +0 -1
  407. package/dist/esm/helpers-1cd71f8a.js.map +0 -1
  408. package/dist/esm/helpers-4e2e4787.js.map +0 -1
  409. /package/dist/core/{p-0cdd4c93.entry.js.map → p-0180e00a.entry.js.map} +0 -0
  410. /package/dist/core/{p-0970c8a1.entry.js.map → p-046f4de6.entry.js.map} +0 -0
  411. /package/dist/core/{p-2536b95b.entry.js.map → p-06732eaf.entry.js.map} +0 -0
  412. /package/dist/core/{p-4c57eef0.entry.js.map → p-13993bf3.entry.js.map} +0 -0
  413. /package/dist/core/{p-12120521.entry.js.map → p-216fbd5e.entry.js.map} +0 -0
  414. /package/dist/core/{p-14b363d0.entry.js.map → p-2d063032.entry.js.map} +0 -0
  415. /package/dist/core/{p-e2387530.entry.js.map → p-2ee5d3fb.entry.js.map} +0 -0
  416. /package/dist/core/{p-edf3411a.entry.js.map → p-3f2723aa.entry.js.map} +0 -0
  417. /package/dist/core/{p-a484c41c.entry.js.map → p-418a84d4.entry.js.map} +0 -0
  418. /package/dist/core/{p-a1369740.entry.js.map → p-41916ef7.entry.js.map} +0 -0
  419. /package/dist/core/{p-7168b71a.entry.js.map → p-486a6957.entry.js.map} +0 -0
  420. /package/dist/core/{p-87868dd2.entry.js.map → p-5348af01.entry.js.map} +0 -0
  421. /package/dist/core/{p-eeae7272.entry.js.map → p-6398a726.entry.js.map} +0 -0
  422. /package/dist/core/{p-0629691b.entry.js.map → p-648fb902.entry.js.map} +0 -0
  423. /package/dist/core/{p-7e850bad.entry.js.map → p-673a4a62.entry.js.map} +0 -0
  424. /package/dist/core/{p-0ecde7a8.entry.js.map → p-67ae9d37.entry.js.map} +0 -0
  425. /package/dist/core/{p-d3e186a3.entry.js.map → p-6b01e096.entry.js.map} +0 -0
  426. /package/dist/core/{p-92a858f7.entry.js.map → p-6b1fcf87.entry.js.map} +0 -0
  427. /package/dist/core/{p-94ce6f29.entry.js.map → p-6fb3d61e.entry.js.map} +0 -0
  428. /package/dist/core/{p-47c91e08.entry.js.map → p-789ae7f5.entry.js.map} +0 -0
  429. /package/dist/core/{p-24f9f6d4.entry.js.map → p-89c7ea3e.entry.js.map} +0 -0
  430. /package/dist/core/{p-992b6161.entry.js.map → p-8d276e8f.entry.js.map} +0 -0
  431. /package/dist/core/{p-cb7793b0.entry.js.map → p-99185fd5.entry.js.map} +0 -0
  432. /package/dist/core/{p-4883e147.entry.js.map → p-99f96c33.entry.js.map} +0 -0
  433. /package/dist/core/{p-8100f45c.entry.js.map → p-a72af8db.entry.js.map} +0 -0
  434. /package/dist/core/{p-6eafa62e.entry.js.map → p-a787bba7.entry.js.map} +0 -0
  435. /package/dist/core/{p-6c5c6aaf.entry.js.map → p-aa72f551.entry.js.map} +0 -0
  436. /package/dist/core/{p-781e8391.entry.js.map → p-aaaa9261.entry.js.map} +0 -0
  437. /package/dist/core/{p-646b886c.entry.js.map → p-b29e96b5.entry.js.map} +0 -0
  438. /package/dist/core/{p-3245554e.entry.js.map → p-bfc5f3f4.entry.js.map} +0 -0
  439. /package/dist/core/{p-e1e04f34.entry.js.map → p-cb3afdbf.entry.js.map} +0 -0
  440. /package/dist/core/{p-6cf5343b.entry.js.map → p-ccf72538.entry.js.map} +0 -0
  441. /package/dist/core/{p-3eb33ef4.entry.js.map → p-ce0999f1.entry.js.map} +0 -0
  442. /package/dist/core/{p-0a99994a.entry.js.map → p-d02a4d1b.entry.js.map} +0 -0
  443. /package/dist/core/{p-b7161816.entry.js.map → p-d8322108.entry.js.map} +0 -0
  444. /package/dist/core/{p-d67a5c90.entry.js.map → p-d86cdbc8.entry.js.map} +0 -0
  445. /package/dist/core/{p-a5bb7bb0.entry.js.map → p-da8255b8.entry.js.map} +0 -0
  446. /package/dist/core/{p-66c26240.entry.js.map → p-f09b2041.entry.js.map} +0 -0
  447. /package/dist/core/{p-b8d3f121.entry.js.map → p-f1044e4d.entry.js.map} +0 -0
  448. /package/dist/core/{p-af21360a.entry.js.map → p-f10f7f37.entry.js.map} +0 -0
  449. /package/dist/core/{p-34cc7b3d.entry.js.map → p-fa77211d.entry.js.map} +0 -0
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-4cf27b16.js');
6
- const helpers = require('./helpers-fc9441f8.js');
6
+ const helpers = require('./helpers-85c5ca15.js');
7
7
 
8
8
  const unsortedIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">
9
9
  <path d="M9 3 5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z"></path>
@@ -17,23 +17,161 @@ const descendingIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 2
17
17
  <path d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"></path>
18
18
  </svg>`;
19
19
 
20
- const icDataTableCss = ":host{position:relative;display:block;height:100%;max-height:100%}.table-container{position:relative;height:calc(100% - var(--ic-space-xxxs))}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: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-row-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;justify-content:start !important}.column-header-alignment-right,.row-header-alignment-right,.cell-alignment-right{text-align:right !important;justify-content:end !important}.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)}.data-type-string{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}.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}.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)}.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,.row-header-alignment-right>ic-typography,.cell-alignment-center>ic-typography{flex:1}.icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}@media screen and (min-width: 576px){.column-header-inner-container{display:flex;align-items:center}.cell-container{display:flex}}";
20
+ const icDataTableCss = ":host{position:relative;display:block;height:100%;max-height:100%}tbody{vertical-align:top}.table-container{position:relative;height:calc(100% - var(--ic-space-xxxs));display:flex;flex-direction:column}.cell-container{display:flex;min-height:1.5rem;overflow-y:hidden}.truncation-show-hide{overflow:visible;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: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-row-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;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}.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)}.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,.row-header-alignment-right>ic-typography,.cell-alignment-center>ic-typography{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}@media screen and (min-width: 576px){.column-header-inner-container{display:flex;align-items:center}}";
21
21
 
22
- const DENSITY_HEIGHT_MULTIPLIER = {
23
- dense: 0.8,
24
- default: 1,
25
- spacious: 1.2,
26
- };
27
- const SORT_ICONS = {
28
- unsorted: unsortedIcon,
29
- ascending: ascendingIcon,
30
- descending: descendingIcon,
31
- };
32
22
  const DataTable = class {
33
23
  constructor(hostRef) {
34
24
  index.registerInstance(this, hostRef);
35
25
  this.icRowHeightChange = index.createEvent(this, "icRowHeightChange", 7);
26
+ this.DENSITY_HEIGHT_MULTIPLIER = {
27
+ dense: 0.8,
28
+ default: 1,
29
+ spacious: 1.2,
30
+ };
31
+ this.DENSITY_PADDING_HEIGHT_DIFF = {
32
+ dense: 8,
33
+ default: 16,
34
+ spacious: 20,
35
+ };
36
+ this.SORT_ICONS = {
37
+ unsorted: unsortedIcon,
38
+ ascending: ascendingIcon,
39
+ descending: descendingIcon,
40
+ };
36
41
  this.hasLoadedForOneSecond = true;
42
+ this.resizeObserver = null;
43
+ this.SHOW_HIDE_STRING = "show-hide";
44
+ this.SHOW_HIDE_CSS_CLASS = `${this.SHOW_HIDE_STRING}-wrap`;
45
+ this.TOOLTIP_STRING = "tooltip";
46
+ this.TOOLTIP = `ic-${this.TOOLTIP_STRING}`;
47
+ this.TEXT_WRAP_STRING = "text-wrap";
48
+ this.TEXT_WRAP_CLASS = `.${this.TEXT_WRAP_STRING}`;
49
+ this.dataUpdated = false;
50
+ this.rowHeightSet = false;
51
+ this.initialLoad = false;
52
+ this.icPageChangeEvent = false;
53
+ this.itemsPerPageChange = false;
54
+ this.DATA_ROW_HEIGHT_STRING = "data-row-height";
55
+ this.DEFAULT_LINE_HEIGHT = 24;
56
+ this.densityUpdate = false;
57
+ this.updateSetRowHeight = (typographyEl) => {
58
+ const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
59
+ if (typographyEl) {
60
+ const cellContainer = this.getCellContainer(typographyEl);
61
+ const rowHeight = fontSize *
62
+ parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
63
+ if (typographyEl.scrollHeight > rowHeight) {
64
+ cellContainer.style.removeProperty("height");
65
+ }
66
+ }
67
+ else {
68
+ this.getTypographyElements().forEach((typographyEl) => {
69
+ const cellContainer = this.getCellContainer(typographyEl);
70
+ const rowHeight = fontSize *
71
+ parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
72
+ if (typographyEl.scrollHeight > rowHeight) {
73
+ cellContainer.style.removeProperty("height");
74
+ }
75
+ });
76
+ }
77
+ };
78
+ this.debounceDataTruncation = () => {
79
+ this.getTypographyElements().forEach((typographyEl) => {
80
+ if (!typographyEl.classList.contains(this.TEXT_WRAP_STRING)) {
81
+ this.resizeObserver = new ResizeObserver(
82
+ // This gets triggered twice due to updated data and see more/see less button
83
+ helpers.debounce(() => {
84
+ // console.log("resizeObserver triggered");
85
+ this.dataTruncation(typographyEl);
86
+ }, 200));
87
+ this.resizeObserver.observe(typographyEl);
88
+ }
89
+ });
90
+ };
91
+ this.getLines = (height) => Math.floor(height / this.DEFAULT_LINE_HEIGHT);
92
+ this.truncate = (typographyEl, cellContainer, tooltip) => {
93
+ if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
94
+ //24 is the height of a single line
95
+ if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
96
+ if (this.truncationPattern === this.TOOLTIP_STRING) {
97
+ this.addTooltipTruncation(typographyEl, cellContainer, tooltip);
98
+ }
99
+ if (this.truncationPattern === this.SHOW_HIDE_STRING) {
100
+ this.addShowHideTruncation(cellContainer, typographyEl);
101
+ }
102
+ }
103
+ }
104
+ else {
105
+ if (this.truncationPattern === this.TOOLTIP_STRING && tooltip) {
106
+ typographyEl.setAttribute("style", `--ic-line-clamp: 0`);
107
+ cellContainer.appendChild(typographyEl);
108
+ tooltip.remove();
109
+ }
110
+ if (this.truncationPattern === this.SHOW_HIDE_STRING &&
111
+ !helpers.isEmptyString(typographyEl.getAttribute("max-lines"))) {
112
+ this.resetShowHideTruncation(typographyEl);
113
+ }
114
+ }
115
+ };
116
+ this.dataTruncation = (typographyEl) => {
117
+ // Tooltip truncation mentioned in AC. Will need revisiting
118
+ const tooltip = this.getTooltip(typographyEl);
119
+ const cellContainer = this.getCellContainer(typographyEl);
120
+ if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.classList.contains("data-type-element")) ||
121
+ this.dataUpdated) {
122
+ return;
123
+ }
124
+ if (this.truncationPattern === this.SHOW_HIDE_STRING &&
125
+ typographyEl.shadowRoot.querySelector("button")) {
126
+ const showHideBtn = typographyEl.shadowRoot.querySelector("button");
127
+ // If the see more/see less is present and the max lines is equal to the cell container
128
+ // remove the see more/see less button
129
+ if (showHideBtn) {
130
+ const truncWrapper = this.getTruncWrapper(typographyEl);
131
+ if (this.getLines(truncWrapper.scrollHeight) ===
132
+ +typographyEl.getAttribute("max-lines")) {
133
+ this.resetShowHideTruncation(typographyEl);
134
+ }
135
+ }
136
+ }
137
+ // Deals with setting and resetting row height and re-truncating data
138
+ if (this.rowHeightSet && this.truncationPattern === this.SHOW_HIDE_STRING) {
139
+ const truncWrapper = this.getTruncWrapper(typographyEl);
140
+ // cellContainer.clientHeight - 24 removes the extra line by see more/see less
141
+ if (truncWrapper &&
142
+ cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >
143
+ truncWrapper.scrollHeight) {
144
+ this.resetShowHideTruncation(typographyEl);
145
+ return;
146
+ }
147
+ if (typographyEl.scrollHeight > cellContainer.clientHeight) {
148
+ this.addShowHideTruncation(cellContainer, typographyEl);
149
+ return;
150
+ }
151
+ }
152
+ if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > 0 &&
153
+ (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) > 0 &&
154
+ (typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) === (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
155
+ if (tooltip) {
156
+ this.removeTooltip(cellContainer, typographyEl, tooltip);
157
+ }
158
+ return;
159
+ }
160
+ this.truncate(typographyEl, cellContainer, tooltip);
161
+ };
162
+ this.removeTextWrap = () => {
163
+ this.getTypographyElements().forEach((typographyEl) => {
164
+ const tableCell = typographyEl.closest("td");
165
+ if (tableCell.classList.contains(this.TEXT_WRAP_STRING)) {
166
+ tableCell.classList.remove(this.TEXT_WRAP_STRING);
167
+ }
168
+ });
169
+ };
170
+ this.getCellContainer = (typographyEl) => {
171
+ return typographyEl.closest(".cell-container");
172
+ };
173
+ this.deleteTextWrapDataKey = (array) => Array.isArray(array) &&
174
+ array.forEach((val) => val.textWrap && delete val.textWrap);
37
175
  this.startLoadingTimer = () => {
38
176
  this.hasLoadedForOneSecond = false;
39
177
  this.timerStarted = Date.now();
@@ -59,13 +197,31 @@ const DataTable = class {
59
197
  return this.getObjectValue(this.getObjectValue(cell, "cellAlignment"), alignment);
60
198
  }
61
199
  };
200
+ this.getCellOptions = (cell, key) => {
201
+ if (!(this.isObject(cell) && Object.keys(cell).includes(key)))
202
+ return;
203
+ return this.getObjectValue(cell, key);
204
+ };
62
205
  this.createUpdatingIndicator = () => {
63
206
  const { appearance, description, max, min, progress } = this.updatingOptions || {};
64
207
  return (index.h("th", { colSpan: this.columns.length, class: "updating-state" }, index.h("ic-loading-indicator", { appearance: appearance, description: description || "Updating table data", fullWidth: true, max: max, min: min, progress: progress, type: "linear", size: "small" })));
65
208
  };
209
+ this.setRowHeight = (height) => {
210
+ return helpers.pxToRem(`${height * this.DENSITY_HEIGHT_MULTIPLIER[this.density] -
211
+ this.DENSITY_PADDING_HEIGHT_DIFF[this.density]}px`);
212
+ };
213
+ this.setTruncationClass = () => {
214
+ if (this.truncationPattern) {
215
+ return { [`truncation-${this.truncationPattern}`]: true };
216
+ }
217
+ return {};
218
+ };
66
219
  this.createCells = (row, rowIndex) => {
220
+ var _a;
67
221
  const rowValues = Object.values(row);
68
222
  const rowKeys = Object.keys(row);
223
+ const index$1 = rowIndex;
224
+ const rowOptions = this.getRowOptions(rowKeys, rowValues);
69
225
  let rowAlignment;
70
226
  let rowEmphasis;
71
227
  const headerIndex = rowKeys.indexOf("header");
@@ -73,42 +229,63 @@ const DataTable = class {
73
229
  rowAlignment = this.getObjectValue(rowValues[headerIndex], "rowAlignment");
74
230
  rowEmphasis = this.getObjectValue(rowValues[headerIndex], "emphasis");
75
231
  }
232
+ const variableRowHeightVal = (_a = this.variableRowHeight) === null || _a === void 0 ? void 0 : _a.call(this, Object.assign(Object.assign({}, row), { index: index$1 }));
233
+ const currentRowHeight = variableRowHeightVal
234
+ ? variableRowHeightVal !== "auto" && variableRowHeightVal
235
+ : this.globalRowHeight !== "auto" && this.globalRowHeight;
76
236
  return rowValues.map((cell, index$1) => {
77
- var _a, _b, _c, _d, _e;
237
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
78
238
  const columnProps = this.columns[index$1];
79
239
  const cellSlotName = `${columnProps === null || columnProps === void 0 ? void 0 : columnProps.key}-${rowIndex}`;
80
240
  const hasIcon = this.isObject(cell) && Object.keys(cell).includes("icon");
81
241
  const cellValue = (key) => this.getObjectValue(cell, key);
82
- return rowKeys[index$1] === "header" ? (index.h("th", { scope: "row", colSpan: cellValue("colspan"), class: {
83
- ["row-header"]: true,
84
- [`row-header-alignment-${cellValue("cellAlignment")}`]: !!cellValue("cellAlignment"),
85
- ["row-header-sticky"]: this.stickyRowHeaders,
86
- } }, cellValue("title"))) : (index.h("td", { class: {
87
- ["table-cell"]: true,
88
- [`table-density-${this.density}`]: this.notDefaultDensity(),
89
- [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true,
90
- [`cell-alignment-${((_a = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _a === void 0 ? void 0 : _a.vertical) ||
91
- rowAlignment ||
92
- this.getCellAlignment(cell, "vertical")}`]: !!((_b = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
93
- !!rowAlignment ||
94
- !!this.getCellAlignment(cell, "vertical"),
95
- } }, index.h("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
96
- !helpers.isSlotUsed(this.el, cellSlotName)
97
- ? cell
98
- : null, class: {
99
- "cell-container": (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element",
100
- [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true,
101
- [`cell-alignment-${((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.horizontal) ||
102
- this.getCellAlignment(cell, "horizontal")}`]: !!((_d = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _d === void 0 ? void 0 : _d.horizontal) ||
103
- !!this.getCellAlignment(cell, "horizontal"),
104
- } }, helpers.isSlotUsed(this.el, cellSlotName) ? (index.h("slot", { name: cellSlotName })) : (index.h(index.Fragment, null, helpers.isSlotUsed(this.el, `${cellSlotName}-icon`) ? (index.h("slot", { name: `${cellSlotName}-icon` })) : ((hasIcon || ((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _e === void 0 ? void 0 : _e.onAllCells)) && (index.h("span", { class: "icon", innerHTML: cellValue("icon") || (columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon.icon) }))), index.h("ic-typography", { variant: "body", class: {
105
- [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
106
- (columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
107
- rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
108
- !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
109
- !!rowEmphasis,
110
- [`text-${this.density}`]: this.notDefaultDensity(),
111
- } }, this.isObject(cell) && (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (index.h("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType))))))));
242
+ if (rowKeys[index$1] === "header") {
243
+ return (index.h("th", { scope: "row", colSpan: cellValue("colspan"), class: {
244
+ ["row-header"]: true,
245
+ [`row-header-alignment-${cellValue("cellAlignment")}`]: !!cellValue("cellAlignment"),
246
+ ["row-header-sticky"]: this.stickyRowHeaders,
247
+ } }, cellValue("title")));
248
+ }
249
+ if (rowKeys[index$1] !== "rowOptions") {
250
+ return (index.h("td", { class: {
251
+ ["table-cell"]: true,
252
+ [`table-density-${this.density}`]: this.notDefaultDensity(),
253
+ } }, index.h("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
254
+ !helpers.isSlotUsed(this.el, cellSlotName)
255
+ ? cell
256
+ : null, class: 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) ||
257
+ ((_b = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
258
+ rowAlignment ||
259
+ this.getCellAlignment(cell, "vertical")}`]: !!((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.vertical) ||
260
+ !!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.vertical) ||
261
+ !!rowAlignment ||
262
+ !!this.getCellAlignment(cell, "vertical"), [`cell-alignment-${((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _e === void 0 ? void 0 : _e.horizontal) ||
263
+ ((_f = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _f === void 0 ? void 0 : _f.horizontal) ||
264
+ this.getCellAlignment(cell, "horizontal")}`]: !!((_g = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _g === void 0 ? void 0 : _g.horizontal) ||
265
+ !!((_h = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _h === void 0 ? void 0 : _h.horizontal) ||
266
+ !!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) ||
267
+ (rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap) ||
268
+ !!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()), style: {
269
+ height: (this.truncationPattern || currentRowHeight) &&
270
+ !columnProps.textWrap &&
271
+ !rowOptions.textWrap &&
272
+ !this.getCellOptions(cell, "textWrap") &&
273
+ (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element"
274
+ ? this.setRowHeight(currentRowHeight)
275
+ : null,
276
+ }, "data-row-height": this.truncationPattern || currentRowHeight
277
+ ? this.setRowHeight(currentRowHeight)
278
+ : null }, helpers.isSlotUsed(this.el, cellSlotName) ? (index.h("slot", { name: cellSlotName })) : (index.h(index.Fragment, null, helpers.isSlotUsed(this.el, `${cellSlotName}-icon`) ? (index.h("slot", { name: `${cellSlotName}-icon` })) : ((hasIcon || ((_k = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _k === void 0 ? void 0 : _k.onAllCells)) && (index.h("span", { class: "icon", innerHTML: cellValue("icon") || (columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon.icon) }))), (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element" &&
279
+ !helpers.isSlotUsed(this.el, cellSlotName) && (index.h("ic-typography", { variant: "body", class: {
280
+ [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
281
+ (columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
282
+ rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
283
+ !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
284
+ !!rowEmphasis,
285
+ [`text-${this.density}`]: this.notDefaultDensity(),
286
+ } }, this.isObject(cell) &&
287
+ (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (index.h("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType)))))))));
288
+ }
112
289
  });
113
290
  };
114
291
  this.createColumnHeaders = () => {
@@ -125,7 +302,7 @@ const DataTable = class {
125
302
  [`text-${this.density}`]: this.notDefaultDensity(),
126
303
  } }, title), this.sortable && (index.h("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
127
304
  // eslint-disable-next-line react/jsx-no-bind
128
- onClick: () => this.sortRows(key), innerHTML: SORT_ICONS[this.sortedColumn === key
305
+ onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
129
306
  ? this.sortedColumnOrder
130
307
  : "unsorted"], class: {
131
308
  ["sort-button"]: true,
@@ -133,6 +310,10 @@ const DataTable = class {
133
310
  this.sortedColumnOrder === "unsorted",
134
311
  } }))))));
135
312
  };
313
+ this.onRowClick = (row) => {
314
+ this.selectedRow =
315
+ this.selectedRow !== row && !this.loading && !this.updating && row;
316
+ };
136
317
  this.createRows = () => {
137
318
  const data = this.showPagination
138
319
  ? this.data.slice(this.fromRow, this.toRow)
@@ -152,24 +333,11 @@ const DataTable = class {
152
333
  return data
153
334
  .sort(!this.sortable ? undefined : this.getSortFunction())
154
335
  .map((row, index$1) => {
155
- var _a;
156
- const variableRowHeightVal = (_a = this.variableRowHeight) === null || _a === void 0 ? void 0 : _a.call(this, Object.assign(Object.assign({}, row), { index: index$1 }));
157
- const findRowHeight = variableRowHeightVal
158
- ? variableRowHeightVal !== "auto" && variableRowHeightVal
159
- : this.globalRowHeight !== "auto" && this.globalRowHeight;
160
336
  return (index.h("tr", {
161
337
  // eslint-disable-next-line react/jsx-no-bind
162
- onClick: () => (this.selectedRow =
163
- this.selectedRow !== row &&
164
- !this.loading &&
165
- !this.updating &&
166
- row), class: {
338
+ onClick: () => this.onRowClick(row), class: {
167
339
  ["table-row"]: true,
168
340
  ["table-row-selected"]: this.selectedRow === row,
169
- }, style: {
170
- height: findRowHeight
171
- ? `${findRowHeight * DENSITY_HEIGHT_MULTIPLIER[this.density]}px`
172
- : null,
173
341
  }
174
342
  }, this.createCells(row, index$1)));
175
343
  });
@@ -232,6 +400,25 @@ const DataTable = class {
232
400
  }
233
401
  this.sortedColumnOrder = sortOrders[nextSortOrderIndex];
234
402
  sortButton.setAttribute("aria-label", this.getSortButtonLabel(column));
403
+ this.tableSorted = true;
404
+ };
405
+ this.getTypographyElements = () => {
406
+ return Array.from(this.el.shadowRoot.querySelectorAll("ic-typography:not(.column-header-text)"));
407
+ };
408
+ this.getTooltip = (typographyEl) => {
409
+ return typographyEl.closest(this.TOOLTIP);
410
+ };
411
+ this.updateTruncationTooltip = (removeTooltipOnly = false) => {
412
+ this.getTypographyElements().forEach((typographyEl) => {
413
+ const tooltip = this.getTooltip(typographyEl);
414
+ const cellContainer = this.getCellContainer(typographyEl);
415
+ if (typographyEl.closest(this.TEXT_WRAP_CLASS)) {
416
+ this.removeTooltip(cellContainer, typographyEl, tooltip);
417
+ typographyEl.setAttribute("style", `--ic-line-clamp: 0`);
418
+ return;
419
+ }
420
+ this.regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly);
421
+ });
235
422
  };
236
423
  this.updateScrollOffset = () => {
237
424
  this.scrollOffset = this.el.shadowRoot.querySelector(".table-row-container").scrollTop;
@@ -245,12 +432,13 @@ const DataTable = class {
245
432
  this.sortedColumn = undefined;
246
433
  this.sortedColumnOrder = undefined;
247
434
  this.toRow = undefined;
435
+ this.currentRowHeight = undefined;
248
436
  this.caption = undefined;
249
437
  this.columns = undefined;
250
438
  this.data = undefined;
251
439
  this.density = "default";
252
440
  this.embedded = false;
253
- this.globalRowHeight = 40;
441
+ this.globalRowHeight = "auto";
254
442
  this.hideColumnHeaders = false;
255
443
  this.loading = false;
256
444
  this.loadingOptions = undefined;
@@ -279,10 +467,15 @@ const DataTable = class {
279
467
  };
280
468
  this.stickyColumnHeaders = false;
281
469
  this.stickyRowHeaders = false;
470
+ this.truncationPattern = undefined;
282
471
  this.updating = false;
283
472
  this.updatingOptions = undefined;
284
473
  this.variableRowHeight = undefined;
285
474
  }
475
+ disconnectedCallback() {
476
+ var _a;
477
+ (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
478
+ }
286
479
  componentWillLoad() {
287
480
  var _a;
288
481
  this.rowsPerPage = Number(this.paginationBarOptions.itemsPerPageOptions[0].value);
@@ -291,10 +484,15 @@ const DataTable = class {
291
484
  this.sortedColumn = this.sortOptions.defaultColumn;
292
485
  this.sortedColumnOrder = this.sortOptions.sortOrders[0];
293
486
  this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 });
487
+ this.initialLoad = true;
488
+ this.previousItemsPerPage = this.rowsPerPage;
294
489
  }
295
490
  componentDidLoad() {
296
491
  const tableElement = this.el.shadowRoot.querySelector("table");
297
492
  const tableContainer = this.el.shadowRoot.querySelector(".table-container");
493
+ if (this.dataUpdated) {
494
+ this.dataUpdated = false;
495
+ }
298
496
  if ((tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientHeight) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientHeight) ||
299
497
  (tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientWidth) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientWidth)) {
300
498
  this.scrollable = true;
@@ -303,11 +501,144 @@ const DataTable = class {
303
501
  this.startLoadingTimer();
304
502
  this.showLoadingIndicator();
305
503
  }
504
+ if (this.truncationPattern) {
505
+ this.getTypographyElements().forEach((typographyEl) => {
506
+ if (!typographyEl.classList.contains(this.TEXT_WRAP_STRING)) {
507
+ this.dataTruncation(typographyEl);
508
+ }
509
+ });
510
+ this.debounceDataTruncation();
511
+ }
512
+ if (this.globalRowHeight !== "auto") {
513
+ this.updateSetRowHeight();
514
+ }
306
515
  }
307
- handleItemsPerPageChange({ detail, target, }) {
308
- if (target.parentElement !== this.el) {
309
- this.previousRowsPerPage = this.rowsPerPage;
310
- this.rowsPerPage = detail.value;
516
+ componentDidUpdate() {
517
+ this.truncateUpdatedData();
518
+ }
519
+ truncateUpdatedData() {
520
+ if (this.dataUpdated) {
521
+ if (this.truncationPattern === this.SHOW_HIDE_STRING) {
522
+ this.resetShowHideTruncation();
523
+ }
524
+ if (this.truncationPattern === this.TOOLTIP_STRING) {
525
+ this.updateTruncationTooltip();
526
+ }
527
+ this.dataUpdated = false;
528
+ }
529
+ if (this.tableSorted) {
530
+ if (this.truncationPattern === this.TOOLTIP_STRING) {
531
+ this.updateTruncationTooltip();
532
+ }
533
+ this.tableSorted = false;
534
+ }
535
+ // This function recalculates the tooltip truncation when the rowHeight has been set.
536
+ // This is in componentDidUpdate so a setTimeout is not used to wait for the render to be complete
537
+ if (this.rowHeightSet) {
538
+ const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
539
+ this.getTypographyElements().forEach((typographyEl) => {
540
+ var _a;
541
+ const cellContainer = this.getCellContainer(typographyEl);
542
+ const tooltipEl = this.getTooltip(typographyEl);
543
+ const rowHeight = fontSize *
544
+ parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
545
+ // If the set row height is bigger than the cell container even
546
+ // with textWrap, set the row height
547
+ if (!((_a = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.style) === null || _a === void 0 ? void 0 : _a.height) &&
548
+ rowHeight > cellContainer.clientHeight) {
549
+ cellContainer.style.setProperty("height", cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
550
+ }
551
+ if (this.truncationPattern) {
552
+ // If the set row height is bigger than the typography truncation wrapper
553
+ // scroll height, remove see more / see less button
554
+ if (this.truncationPattern === this.SHOW_HIDE_STRING) {
555
+ const truncWrapper = this.getTruncWrapper(typographyEl);
556
+ const showHideBtn = typographyEl.shadowRoot.querySelector("button");
557
+ if (showHideBtn &&
558
+ (truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight) <= cellContainer.clientHeight) {
559
+ this.resetShowHideTruncation(typographyEl);
560
+ return;
561
+ }
562
+ }
563
+ this.truncate(typographyEl, cellContainer, tooltipEl);
564
+ }
565
+ else {
566
+ this.updateSetRowHeight(typographyEl);
567
+ }
568
+ });
569
+ this.rowHeightSet = false;
570
+ }
571
+ // Only run truncation on the new rows
572
+ // when the number of items per page has increased
573
+ if (this.itemsPerPageChange) {
574
+ const allRows = this.el.shadowRoot.querySelectorAll(".table-row");
575
+ if (this.rowsPerPage > this.previousItemsPerPage) {
576
+ const newRows = Array.from(allRows).slice(this.previousItemsPerPage);
577
+ newRows.forEach((row) => {
578
+ row
579
+ .querySelectorAll("ic-typography")
580
+ .forEach((typographyEl) => {
581
+ const cellContainer = this.getCellContainer(typographyEl);
582
+ const tooltipEl = this.getTooltip(typographyEl);
583
+ this.truncate(typographyEl, cellContainer, tooltipEl);
584
+ });
585
+ });
586
+ }
587
+ this.previousItemsPerPage = this.rowsPerPage;
588
+ this.itemsPerPageChange = false;
589
+ }
590
+ if (!this.initialLoad && this.icPageChangeEvent) {
591
+ if (this.truncationPattern === this.TOOLTIP_STRING) {
592
+ this.updateTruncationTooltip();
593
+ }
594
+ // set truncation to see more if opened and next/previous page is pressed
595
+ if (this.truncationPattern === this.SHOW_HIDE_STRING) {
596
+ this.getTypographyElements().forEach((typographyEl) => {
597
+ const cellContainer = this.getCellContainer(typographyEl);
598
+ const showHideBtn = typographyEl.shadowRoot.querySelector("button");
599
+ if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > cellContainer.clientHeight &&
600
+ !showHideBtn) {
601
+ this.addShowHideTruncation(cellContainer, typographyEl);
602
+ }
603
+ });
604
+ }
605
+ this.icPageChangeEvent = false;
606
+ }
607
+ if (this.densityUpdate) {
608
+ this.getTypographyElements().forEach((typographyEl) => {
609
+ const cellContainer = this.getCellContainer(typographyEl);
610
+ const tooltipEl = this.getTooltip(typographyEl);
611
+ this.truncate(typographyEl, cellContainer, tooltipEl);
612
+ });
613
+ this.densityUpdate = false;
614
+ }
615
+ }
616
+ createShowHideTruncation(typographyEl, cellContainer) {
617
+ typographyEl.checkMaxLines(typographyEl.scrollHeight);
618
+ typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
619
+ typographyEl.setShowHideExpanded(false);
620
+ cellContainer.style.height = null;
621
+ }
622
+ addTooltipTruncation(typographyEl, cellContainer, tooltip) {
623
+ this.addLineClampCSS(typographyEl, cellContainer);
624
+ if (!tooltip) {
625
+ this.createTruncationTooltip(typographyEl, cellContainer);
626
+ }
627
+ }
628
+ addShowHideTruncation(cellContainer, typographyEl) {
629
+ cellContainer.classList.add(this.SHOW_HIDE_CSS_CLASS);
630
+ this.createShowHideTruncation(typographyEl, cellContainer);
631
+ }
632
+ getTruncWrapper(typographyEl) {
633
+ return typographyEl.shadowRoot.querySelector(".trunc-wrapper");
634
+ }
635
+ // Set the height to initial if row height is set and the show / hide truncation
636
+ // is clicked
637
+ handleTypographyTruncationExpandToggle({ detail, }) {
638
+ const { expanded, typographyEl } = detail;
639
+ const cellContainer = this.getCellContainer(typographyEl);
640
+ if (cellContainer.style.height && expanded) {
641
+ cellContainer.style.height = "inherit";
311
642
  }
312
643
  }
313
644
  handlePageChange({ detail, target }) {
@@ -326,6 +657,19 @@ const DataTable = class {
326
657
  this.previousRowsPerPage = this.rowsPerPage;
327
658
  }
328
659
  }
660
+ if (!this.initialLoad && this.previousPaginationPage !== detail.value) {
661
+ // This is to prevent icPageChange from triggering truncation on first load
662
+ this.icPageChangeEvent = true;
663
+ }
664
+ this.previousPaginationPage = detail.value;
665
+ this.initialLoad = false;
666
+ }
667
+ handleItemsPerPageChange({ detail, target, }) {
668
+ if (target.parentElement !== this.el) {
669
+ this.previousRowsPerPage = this.rowsPerPage;
670
+ this.rowsPerPage = detail.value;
671
+ }
672
+ this.itemsPerPageChange = true;
329
673
  }
330
674
  handleDensityChange(ev) {
331
675
  this.density = ev.detail.value;
@@ -343,7 +687,23 @@ const DataTable = class {
343
687
  }, 500);
344
688
  }
345
689
  }
346
- dataHandler(newData) {
690
+ truncationPatternHandler(newValue) {
691
+ if (newValue === this.SHOW_HIDE_STRING) {
692
+ this.updateTruncationTooltip(true);
693
+ // Not using debounceDataTruncation here due to resizeObserver not being triggered
694
+ this.getTypographyElements().forEach((typographyEl) => {
695
+ const cellContainer = this.getCellContainer(typographyEl);
696
+ const tooltip = this.getTooltip(typographyEl);
697
+ this.truncate(typographyEl, cellContainer, tooltip);
698
+ });
699
+ }
700
+ if (newValue === this.TOOLTIP_STRING) {
701
+ // ResizeObserver is trigger here due to the see more/see less links being removed.
702
+ // The resizeObserver will also apply the tooltip where relevant
703
+ this.resetShowHideTruncation();
704
+ }
705
+ }
706
+ async dataHandler(newData) {
347
707
  this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: (newData === null || newData === void 0 ? void 0 : newData.length) > 0 });
348
708
  if (this.loading) {
349
709
  !this.hasLoadedForOneSecond
@@ -353,31 +713,124 @@ const DataTable = class {
353
713
  }
354
714
  if (this.updating)
355
715
  this.updating = false;
716
+ this.dataUpdated = true;
356
717
  }
357
- rowHeightChangeHandler() {
358
- this.icRowHeightChange.emit();
718
+ async densityHandler() {
719
+ this.densityUpdate = true;
720
+ }
721
+ resetShowHideTruncation(typographyEl) {
722
+ if (typographyEl) {
723
+ const truncWrapper = this.getTruncWrapper(typographyEl);
724
+ const cellContainer = this.getCellContainer(typographyEl);
725
+ if ((truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) &&
726
+ !helpers.isEmptyString(typographyEl.getAttribute("max-lines")) &&
727
+ Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT) !==
728
+ +typographyEl.getAttribute("max-lines")) {
729
+ typographyEl.checkMaxLines(truncWrapper.scrollHeight);
730
+ typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
731
+ typographyEl.setShowHideExpanded(false);
732
+ cellContainer.style.height = null;
733
+ }
734
+ else {
735
+ typographyEl.resetTruncation().then(() => {
736
+ cellContainer.style.setProperty("height", cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
737
+ });
738
+ }
739
+ }
740
+ else {
741
+ this.getTypographyElements().forEach((typographyEl) => {
742
+ const cellContainer = this.getCellContainer(typographyEl);
743
+ typographyEl.resetTruncation().then(() => {
744
+ cellContainer.style.setProperty("height", cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
745
+ });
746
+ });
747
+ }
748
+ }
749
+ rowHeightChangeHandler(newValue, oldValue) {
750
+ if (+newValue !== +oldValue) {
751
+ this.deleteTextWrapDataKey(this.data);
752
+ this.deleteTextWrapDataKey(this.columns);
753
+ this.removeTextWrap();
754
+ this.icRowHeightChange.emit();
755
+ this.rowHeightSet = true;
756
+ }
359
757
  }
360
758
  /**
361
- * Resets the `globalRowHeight` prop to `40px` and sets the `variableRowHeight` prop to `null`.
759
+ * Resets the `globalRowHeight` prop to number or auto and sets the `variableRowHeight` prop to `null`.
362
760
  */
363
- async resetRowHeights() {
364
- this.globalRowHeight = 40;
761
+ async resetRowHeights(rowHeight) {
762
+ this.globalRowHeight = rowHeight || "auto";
365
763
  this.variableRowHeight = null;
366
764
  }
367
765
  showLoadingIndicator() {
368
766
  this.loadingIndicator.classList.add("show");
369
767
  }
768
+ getRowOptions(rowKeys, rowValues) {
769
+ const rowOptionsIndex = rowKeys.indexOf("rowOptions");
770
+ return rowOptionsIndex > -1 && rowValues[rowOptionsIndex];
771
+ }
772
+ regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly) {
773
+ // When sorting the table, instead of regenerating the tooltip,
774
+ // the tooltip details are updated
775
+ if (tooltip) {
776
+ if (this.tableSorted) {
777
+ tooltip.setAttribute("target", typographyEl.id);
778
+ tooltip.setAttribute("label", typographyEl.textContent);
779
+ }
780
+ else {
781
+ this.removeTooltip(cellContainer, typographyEl, tooltip);
782
+ }
783
+ if (removeTooltipOnly) {
784
+ return;
785
+ }
786
+ }
787
+ // This add line clamp to data only when
788
+ // the data object has been updated
789
+ if (!typographyEl.getAttribute("style") && this.dataUpdated) {
790
+ this.addLineClampCSS(typographyEl, cellContainer);
791
+ }
792
+ // Adding the tableSorted boolean prevents the tooltip
793
+ // being regenerated and flashing
794
+ if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) &&
795
+ !this.tableSorted) {
796
+ if (!typographyEl.getAttribute("style")) {
797
+ this.addLineClampCSS(typographyEl, cellContainer);
798
+ }
799
+ this.createTruncationTooltip(typographyEl, cellContainer);
800
+ }
801
+ }
802
+ removeTooltip(cellContainer, typographyEl, tooltip) {
803
+ cellContainer.appendChild(typographyEl);
804
+ if (tooltip) {
805
+ tooltip.remove();
806
+ }
807
+ }
808
+ addLineClampCSS(typographyEl, cellContainer) {
809
+ typographyEl.setAttribute("style", `--ic-line-clamp: ${this.getLines(cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)}`);
810
+ }
811
+ createTruncationTooltip(typographyEl, cellContainer) {
812
+ const tooltipEl = document.createElement("ic-tooltip");
813
+ tooltipEl.setAttribute("target", typographyEl.id);
814
+ tooltipEl.setAttribute("label", typographyEl.textContent);
815
+ tooltipEl.classList.add("ic-tooltip-overflow");
816
+ tooltipEl.setExternalPopperProps({
817
+ // This might need reverting back to absolute if the tooltip doesn't dynamically position itself correctly
818
+ strategy: "fixed",
819
+ });
820
+ cellContainer.appendChild(tooltipEl);
821
+ tooltipEl.appendChild(typographyEl);
822
+ }
370
823
  render() {
371
824
  const { caption, createColumnHeaders, createRows, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationBarOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumnOrder, sortedColumn, stickyColumnHeaders, updateScrollOffset, updating, } = this;
372
825
  return (index.h("div", { class: "table-container" }, helpers.isSlotUsed(this.el, "title-bar") && index.h("slot", { name: "title-bar" }), index.h("div", { class: {
373
826
  ["table-row-container"]: true,
374
827
  scrollable,
375
- }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, index.h("table", null, index.h("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (index.h("thead", { class: {
828
+ }, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, helpers.isSlotUsed(this.el, "title-bar") && index.h("slot", { name: "title-bar" }), index.h("table", null, index.h("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (index.h("thead", { class: {
376
829
  ["column-header-sticky"]: stickyColumnHeaders,
377
830
  ["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
378
831
  } }, index.h("tr", null, createColumnHeaders()))), updating &&
379
832
  !loading &&
380
- (hideColumnHeaders ? (index.h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), (data === null || data === void 0 ? void 0 : data.length) > 0 && index.h("tbody", null, createRows())), !(data === null || data === void 0 ? void 0 : data.length) &&
833
+ (hideColumnHeaders ? (index.h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), (data === null || data === void 0 ? void 0 : data.length) > 0 && !loading && index.h("tbody", null, createRows())), !(data === null || data === void 0 ? void 0 : data.length) &&
381
834
  !loading &&
382
835
  (helpers.isSlotUsed(this.el, "empty-state") ? (index.h("slot", { name: "empty-state" })) : (index.h("ic-empty-state", { aligned: "center", heading: "No Data", class: "loading-empty" })))), loading && (index.h("ic-loading-indicator", { appearance: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.appearance, class: {
383
836
  "loading-empty": loading,
@@ -390,7 +843,9 @@ const DataTable = class {
390
843
  get el() { return index.getElement(this); }
391
844
  static get watchers() { return {
392
845
  "loading": ["loadingHandler"],
846
+ "truncationPattern": ["truncationPatternHandler"],
393
847
  "data": ["dataHandler"],
848
+ "density": ["densityHandler"],
394
849
  "globalRowHeight": ["rowHeightChangeHandler"],
395
850
  "variableRowHeight": ["rowHeightChangeHandler"]
396
851
  }; }