@ukic/canary-web-components 3.0.0-canary.13 → 3.0.0-canary.15
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.
- package/dist/cjs/core.cjs.js +2 -2
- package/dist/cjs/{date-helpers-c9551119.js → date-helpers-6f70dd03.js} +20 -66
- package/dist/cjs/date-helpers-6f70dd03.js.map +1 -0
- package/dist/cjs/{helpers-fc51fdcb.js → helpers-bec0dbd4.js} +2 -2
- package/dist/cjs/{helpers-fc51fdcb.js.map → helpers-bec0dbd4.js.map} +1 -1
- package/dist/cjs/{helpers-0e4c4fdd.js → helpers-d01564f7.js} +35 -17
- package/dist/cjs/helpers-d01564f7.js.map +1 -0
- package/dist/cjs/ic-accordion-group.cjs.entry.js +2 -2
- package/dist/cjs/ic-accordion.cjs.entry.js +2 -2
- package/dist/cjs/ic-alert.cjs.entry.js +2 -2
- package/dist/cjs/ic-back-to-top.cjs.entry.js +2 -2
- package/dist/cjs/ic-badge.cjs.entry.js +3 -3
- package/dist/cjs/ic-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +2 -2
- package/dist/cjs/ic-breadcrumb.cjs.entry.js +2 -2
- package/dist/cjs/ic-button_3.cjs.entry.js +61 -3
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-card-horizontal.cjs.entry.js +16 -12
- package/dist/cjs/ic-card-horizontal.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-card-vertical.cjs.entry.js +3 -3
- package/dist/cjs/ic-card-vertical.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox-group.cjs.entry.js +7 -7
- package/dist/cjs/ic-checkbox-group.cjs.entry.js.map +1 -1
- package/dist/cjs/{ic-empty-state_2.cjs.entry.js → ic-checkbox_3.cjs.entry.js} +158 -24
- package/dist/cjs/ic-checkbox_3.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-chip.cjs.entry.js +3 -3
- package/dist/cjs/ic-chip.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-classification-banner.cjs.entry.js +3 -3
- package/dist/cjs/ic-classification-banner.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-data-list.cjs.entry.js +1 -1
- package/dist/cjs/ic-data-row.cjs.entry.js +2 -2
- package/dist/cjs/ic-data-table-title-bar.cjs.entry.js +7 -7
- package/dist/cjs/ic-data-table-title-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-data-table.cjs.entry.js +310 -276
- package/dist/cjs/ic-data-table.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-date-input.cjs.entry.js +175 -160
- package/dist/cjs/ic-date-input.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-date-picker.cjs.entry.js +92 -70
- package/dist/cjs/ic-date-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-dialog.cjs.entry.js +38 -47
- package/dist/cjs/ic-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-divider.cjs.entry.js +2 -2
- package/dist/cjs/ic-footer-link-group.cjs.entry.js +2 -2
- package/dist/cjs/ic-footer-link.cjs.entry.js +2 -2
- package/dist/cjs/ic-footer.cjs.entry.js +2 -2
- package/dist/cjs/ic-hero.cjs.entry.js +2 -2
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +2 -2
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js +3 -3
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-label_2.cjs.entry.js +2 -2
- package/dist/cjs/ic-link.cjs.entry.js +2 -2
- package/dist/cjs/ic-menu-group.cjs.entry.js +2 -2
- package/dist/cjs/ic-menu-item.cjs.entry.js +3 -3
- package/dist/cjs/ic-menu-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-button.cjs.entry.js +2 -2
- package/dist/cjs/ic-navigation-group.cjs.entry.js +23 -17
- package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-item.cjs.entry.js +2 -2
- package/dist/cjs/ic-navigation-menu.cjs.entry.js +38 -24
- package/dist/cjs/ic-navigation-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-page-header.cjs.entry.js +12 -11
- package/dist/cjs/ic-page-header.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-pagination_4.cjs.entry.js +53 -32
- package/dist/cjs/ic-pagination_4.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-popover-menu.cjs.entry.js +7 -6
- package/dist/cjs/ic-popover-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-group.cjs.entry.js +7 -7
- package/dist/cjs/ic-radio-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-option.cjs.entry.js +2 -2
- package/dist/cjs/ic-search-bar.cjs.entry.js +3 -3
- package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-section-container.cjs.entry.js +3 -3
- package/dist/cjs/ic-section-container.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-side-navigation.cjs.entry.js +10 -7
- package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-skeleton.cjs.entry.js +3 -3
- package/dist/cjs/ic-skeleton.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-skip-link.cjs.entry.js +11 -10
- package/dist/cjs/ic-skip-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-status-tag.cjs.entry.js +5 -5
- package/dist/cjs/ic-status-tag.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-step.cjs.entry.js +17 -16
- package/dist/cjs/ic-step.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-stepper.cjs.entry.js +4 -4
- package/dist/cjs/ic-stepper.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-switch.cjs.entry.js +6 -6
- package/dist/cjs/ic-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-context.cjs.entry.js +2 -2
- package/dist/cjs/ic-tab-context.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-group.cjs.entry.js +4 -4
- package/dist/cjs/ic-tab-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-panel.cjs.entry.js +3 -3
- package/dist/cjs/ic-tab-panel.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab.cjs.entry.js +3 -3
- package/dist/cjs/ic-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-theme.cjs.entry.js +3 -3
- package/dist/cjs/ic-theme.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toast-region.cjs.entry.js +2 -2
- package/dist/cjs/ic-toast-region.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toast.cjs.entry.js +6 -6
- package/dist/cjs/ic-toast.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js +4 -4
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toggle-button.cjs.entry.js +5 -5
- package/dist/cjs/ic-toggle-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-top-navigation.cjs.entry.js +5 -9
- package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tree-item.cjs.entry.js +56 -42
- package/dist/cjs/ic-tree-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tree-view.cjs.entry.js +127 -22
- package/dist/cjs/ic-tree-view.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-typography.cjs.entry.js +2 -2
- package/dist/cjs/{index-8a24b20c.js → index-d337cd8a.js} +6 -11
- package/dist/cjs/index-d337cd8a.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.css +1 -1
- package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.js +27 -23
- package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.js.map +1 -1
- package/dist/collection/components/ic-data-table/ic-data-table.css +19 -2
- package/dist/collection/components/ic-data-table/ic-data-table.js +385 -330
- package/dist/collection/components/ic-data-table/ic-data-table.js.map +1 -1
- package/dist/collection/components/ic-data-table/ic-data-table.stories.js +8 -9
- package/dist/collection/components/ic-data-table/ic-data-table.stories.js.map +1 -1
- package/dist/collection/components/ic-data-table/story-data.js +13 -14
- package/dist/collection/components/ic-data-table/story-data.js.map +1 -1
- package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js +9 -9
- package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js.map +1 -1
- package/dist/collection/components/ic-date-input/ic-date-input.js +240 -198
- package/dist/collection/components/ic-date-input/ic-date-input.js.map +1 -1
- package/dist/collection/components/ic-date-input/ic-date-input.stories.js +19 -1
- package/dist/collection/components/ic-date-input/ic-date-input.stories.js.map +1 -1
- package/dist/collection/components/ic-date-input/test/helpers/ic-date-input.js +6 -3
- package/dist/collection/components/ic-date-input/test/helpers/ic-date-input.js.map +1 -1
- package/dist/collection/components/ic-date-picker/ic-date-picker.js +133 -91
- package/dist/collection/components/ic-date-picker/ic-date-picker.js.map +1 -1
- package/dist/collection/components/ic-date-picker/ic-date-picker.stories.js +9 -1
- package/dist/collection/components/ic-date-picker/ic-date-picker.stories.js.map +1 -1
- package/dist/collection/components/ic-date-picker/ic-day-button.js +1 -1
- package/dist/collection/components/ic-date-picker/ic-day-button.js.map +1 -1
- package/dist/collection/components/ic-date-picker/ic-month-picker.js.map +1 -1
- package/dist/collection/components/ic-date-picker/ic-year-picker.js.map +1 -1
- package/dist/collection/components/ic-date-picker/story-data.js +16 -1
- package/dist/collection/components/ic-date-picker/story-data.js.map +1 -1
- package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.js +41 -38
- package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.js.map +1 -1
- package/dist/collection/components/ic-tree-item/ic-tree-item.js +86 -50
- package/dist/collection/components/ic-tree-item/ic-tree-item.js.map +1 -1
- package/dist/collection/components/ic-tree-view/ic-tree-view.js +165 -31
- package/dist/collection/components/ic-tree-view/ic-tree-view.js.map +1 -1
- package/dist/collection/components/ic-tree-view/ic-tree-view.stories.js +384 -12
- package/dist/collection/components/ic-tree-view/ic-tree-view.stories.js.map +1 -1
- package/dist/collection/components/ic-tree-view/ic-tree-view.types.js +2 -0
- package/dist/collection/components/ic-tree-view/ic-tree-view.types.js.map +1 -0
- package/dist/collection/utils/date-helpers.js +19 -61
- package/dist/collection/utils/date-helpers.js.map +1 -1
- package/dist/collection/utils/helpers.js +44 -61
- package/dist/collection/utils/helpers.js.map +1 -1
- package/dist/collection/utils/testa11y.helpers.js +2 -1
- package/dist/collection/utils/testa11y.helpers.js.map +1 -1
- package/dist/components/helpers.js +1 -1
- package/dist/components/helpers2.js +32 -16
- package/dist/components/helpers2.js.map +1 -1
- package/dist/components/ic-badge.js +1 -1
- package/dist/components/ic-badge.js.map +1 -1
- package/dist/components/ic-button2.js +59 -1
- package/dist/components/ic-button2.js.map +1 -1
- package/dist/components/ic-card-horizontal.js +14 -10
- package/dist/components/ic-card-horizontal.js.map +1 -1
- package/dist/components/ic-card-vertical.js +1 -1
- package/dist/components/ic-card-vertical.js.map +1 -1
- package/dist/components/ic-checkbox-group.js +5 -5
- package/dist/components/ic-checkbox-group.js.map +1 -1
- package/dist/components/ic-checkbox.js +1 -175
- package/dist/components/ic-checkbox.js.map +1 -1
- package/dist/{esm/ic-checkbox.entry.js → components/ic-checkbox2.js} +53 -11
- package/dist/components/ic-checkbox2.js.map +1 -0
- package/dist/components/ic-chip.js +1 -1
- package/dist/components/ic-chip.js.map +1 -1
- package/dist/components/ic-classification-banner.js +2 -2
- package/dist/components/ic-classification-banner.js.map +1 -1
- package/dist/components/ic-data-table-title-bar.js +5 -5
- package/dist/components/ic-data-table-title-bar.js.map +1 -1
- package/dist/components/ic-data-table.js +319 -279
- package/dist/components/ic-data-table.js.map +1 -1
- package/dist/components/ic-date-input2.js +198 -225
- package/dist/components/ic-date-input2.js.map +1 -1
- package/dist/components/ic-date-picker.js +90 -67
- package/dist/components/ic-date-picker.js.map +1 -1
- package/dist/components/ic-dialog.js +38 -47
- package/dist/components/ic-dialog.js.map +1 -1
- package/dist/components/ic-input-component-container2.js +1 -1
- package/dist/components/ic-input-component-container2.js.map +1 -1
- package/dist/components/ic-menu-item2.js +1 -1
- package/dist/components/ic-menu-item2.js.map +1 -1
- package/dist/components/ic-navigation-group.js +22 -15
- package/dist/components/ic-navigation-group.js.map +1 -1
- package/dist/components/ic-navigation-menu2.js +37 -23
- package/dist/components/ic-navigation-menu2.js.map +1 -1
- package/dist/components/ic-page-header.js +10 -9
- package/dist/components/ic-page-header.js.map +1 -1
- package/dist/components/ic-pagination-bar2.js +22 -20
- package/dist/components/ic-pagination-bar2.js.map +1 -1
- package/dist/components/ic-pagination-item2.js +2 -2
- package/dist/components/ic-pagination-item2.js.map +1 -1
- package/dist/components/ic-pagination2.js +5 -5
- package/dist/components/ic-pagination2.js.map +1 -1
- package/dist/components/ic-popover-menu.js +5 -4
- package/dist/components/ic-popover-menu.js.map +1 -1
- package/dist/components/ic-radio-group.js +5 -5
- package/dist/components/ic-radio-group.js.map +1 -1
- package/dist/components/ic-search-bar.js +1 -1
- package/dist/components/ic-search-bar.js.map +1 -1
- package/dist/components/ic-section-container2.js +2 -2
- package/dist/components/ic-section-container2.js.map +1 -1
- package/dist/components/ic-select2.js +13 -10
- package/dist/components/ic-select2.js.map +1 -1
- package/dist/components/ic-side-navigation.js +8 -5
- package/dist/components/ic-side-navigation.js.map +1 -1
- package/dist/components/ic-skeleton.js +2 -2
- package/dist/components/ic-skeleton.js.map +1 -1
- package/dist/components/ic-skip-link.js +10 -9
- package/dist/components/ic-skip-link.js.map +1 -1
- package/dist/components/ic-status-tag.js +3 -3
- package/dist/components/ic-status-tag.js.map +1 -1
- package/dist/components/ic-step.js +15 -14
- package/dist/components/ic-step.js.map +1 -1
- package/dist/components/ic-stepper.js +2 -2
- package/dist/components/ic-stepper.js.map +1 -1
- package/dist/components/ic-switch.js +4 -4
- package/dist/components/ic-switch.js.map +1 -1
- package/dist/components/ic-tab-context.js +1 -1
- package/dist/components/ic-tab-context.js.map +1 -1
- package/dist/components/ic-tab-group.js +2 -2
- package/dist/components/ic-tab-group.js.map +1 -1
- package/dist/components/ic-tab-panel.js +2 -2
- package/dist/components/ic-tab-panel.js.map +1 -1
- package/dist/components/ic-tab.js +1 -1
- package/dist/components/ic-tab.js.map +1 -1
- package/dist/components/ic-text-field2.js +35 -13
- package/dist/components/ic-text-field2.js.map +1 -1
- package/dist/components/ic-theme.js +1 -1
- package/dist/components/ic-theme.js.map +1 -1
- package/dist/components/ic-toast-region.js +1 -1
- package/dist/components/ic-toast-region.js.map +1 -1
- package/dist/components/ic-toast.js +5 -5
- package/dist/components/ic-toast.js.map +1 -1
- package/dist/components/ic-toggle-button-group.js +2 -2
- package/dist/components/ic-toggle-button-group.js.map +1 -1
- package/dist/components/ic-toggle-button.js +3 -3
- package/dist/components/ic-toggle-button.js.map +1 -1
- package/dist/components/ic-top-navigation.js +4 -8
- package/dist/components/ic-top-navigation.js.map +1 -1
- package/dist/components/ic-tree-item.js +55 -40
- package/dist/components/ic-tree-item.js.map +1 -1
- package/dist/components/ic-tree-view.js +132 -23
- package/dist/components/ic-tree-view.js.map +1 -1
- package/dist/core/core.css +353 -245
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/{p-8d73a3cc.entry.js → p-0616dfbe.entry.js} +2 -2
- package/dist/core/p-0616dfbe.entry.js.map +1 -0
- package/dist/core/{p-b17e7059.entry.js → p-06bf2cea.entry.js} +2 -2
- package/dist/core/{p-b17e7059.entry.js.map → p-06bf2cea.entry.js.map} +1 -1
- package/dist/core/{p-f2f7299b.entry.js → p-071f4748.entry.js} +2 -2
- package/dist/core/{p-f2f7299b.entry.js.map → p-071f4748.entry.js.map} +1 -1
- package/dist/core/p-09e8b002.entry.js +2 -0
- package/dist/core/p-09e8b002.entry.js.map +1 -0
- package/dist/core/{p-b18a5861.entry.js → p-110486f0.entry.js} +2 -2
- package/dist/core/{p-b18a5861.entry.js.map → p-110486f0.entry.js.map} +1 -1
- package/dist/core/p-19ecd2a6.entry.js +2 -0
- package/dist/core/p-19ecd2a6.entry.js.map +1 -0
- package/dist/core/p-1a2b4803.entry.js +2 -0
- package/dist/core/p-1a2b4803.entry.js.map +1 -0
- package/dist/core/{p-32720276.entry.js → p-1bbae4b3.entry.js} +2 -2
- package/dist/core/{p-0fd762bf.entry.js → p-1f415138.entry.js} +2 -2
- package/dist/core/p-1f415138.entry.js.map +1 -0
- package/dist/core/{p-b8aa37f9.entry.js → p-20bd48cf.entry.js} +2 -2
- package/dist/core/{p-be5ad372.entry.js → p-21193099.entry.js} +2 -2
- package/dist/core/p-264335c5.entry.js +2 -0
- package/dist/core/p-264335c5.entry.js.map +1 -0
- package/dist/core/{p-a214a9f8.entry.js → p-30a5b319.entry.js} +2 -2
- package/dist/core/{p-a214a9f8.entry.js.map → p-30a5b319.entry.js.map} +1 -1
- package/dist/core/{p-9f4fa820.entry.js → p-3244a174.entry.js} +2 -2
- package/dist/core/{p-9f4fa820.entry.js.map → p-3244a174.entry.js.map} +1 -1
- package/dist/core/{p-5dc25d11.entry.js → p-37df68fe.entry.js} +2 -2
- package/dist/core/{p-5dc25d11.entry.js.map → p-37df68fe.entry.js.map} +1 -1
- package/dist/core/{p-3e9564b5.entry.js → p-39269b62.entry.js} +2 -2
- package/dist/core/p-3955fa94.entry.js +2 -0
- package/dist/core/p-3955fa94.entry.js.map +1 -0
- package/dist/core/p-3f185257.entry.js +2 -0
- package/dist/core/p-3f185257.entry.js.map +1 -0
- package/dist/core/p-401f0043.entry.js +2 -0
- package/dist/core/{p-144b1dee.entry.js.map → p-401f0043.entry.js.map} +1 -1
- package/dist/core/{p-da798f58.entry.js → p-44ac8f8a.entry.js} +2 -2
- package/dist/core/{p-afc4ce53.entry.js → p-4d39cab8.entry.js} +2 -2
- package/dist/core/{p-fd006a9b.entry.js → p-4e187a11.entry.js} +2 -2
- package/dist/core/{p-d154b26c.entry.js → p-50324682.entry.js} +2 -2
- package/dist/core/{p-cd9e1ffa.entry.js → p-50f4d151.entry.js} +2 -2
- package/dist/core/{p-cd9e1ffa.entry.js.map → p-50f4d151.entry.js.map} +1 -1
- package/dist/core/{p-22e0ed96.entry.js → p-5796b6cd.entry.js} +2 -2
- package/dist/core/{p-96551ddf.entry.js → p-57c80527.entry.js} +2 -2
- package/dist/core/p-59aed40c.entry.js +2 -0
- package/dist/core/p-59aed40c.entry.js.map +1 -0
- package/dist/core/{p-b6db0cc1.entry.js → p-60d15d35.entry.js} +2 -2
- package/dist/core/p-65d3a515.entry.js +2 -0
- package/dist/core/p-65d3a515.entry.js.map +1 -0
- package/dist/core/{p-272352cb.entry.js → p-6aa1e928.entry.js} +2 -2
- package/dist/core/p-6e0f93c5.entry.js +2 -0
- package/dist/core/p-6e0f93c5.entry.js.map +1 -0
- package/dist/core/p-6f6d793f.entry.js +2 -0
- package/dist/core/p-6f6d793f.entry.js.map +1 -0
- package/dist/core/{p-507ec499.entry.js → p-701696aa.entry.js} +2 -2
- package/dist/core/{p-507ec499.entry.js.map → p-701696aa.entry.js.map} +1 -1
- package/dist/core/{p-1334a78f.entry.js → p-73e41eac.entry.js} +2 -2
- package/dist/core/p-7bbd9fcb.entry.js +2 -0
- package/dist/core/p-7bbd9fcb.entry.js.map +1 -0
- package/dist/core/p-7d054704.js +2 -0
- package/dist/core/p-7d054704.js.map +1 -0
- package/dist/core/{p-08fd225f.entry.js → p-857c46c0.entry.js} +2 -2
- package/dist/core/p-858dd362.entry.js +2 -0
- package/dist/core/p-858dd362.entry.js.map +1 -0
- package/dist/core/{p-0e3cb8d0.entry.js → p-8856dff4.entry.js} +2 -2
- package/dist/core/p-8c5a23b4.entry.js +2 -0
- package/dist/core/p-8c5a23b4.entry.js.map +1 -0
- package/dist/core/{p-00135a74.js → p-8e4e97b4.js} +3 -3
- package/dist/core/p-8e4e97b4.js.map +1 -0
- package/dist/core/p-91dc6ad3.entry.js +2 -0
- package/dist/core/p-91dc6ad3.entry.js.map +1 -0
- package/dist/core/{p-0c3bd9e6.entry.js → p-94427b50.entry.js} +2 -2
- package/dist/core/{p-e13b43b1.entry.js → p-9cf7494c.entry.js} +2 -2
- package/dist/core/{p-0848efa2.entry.js → p-a2671eb0.entry.js} +2 -2
- package/dist/core/p-a2fcea60.entry.js +2 -0
- package/dist/core/p-a2fcea60.entry.js.map +1 -0
- package/dist/core/p-a5ee9c8d.entry.js +2 -0
- package/dist/core/p-a5ee9c8d.entry.js.map +1 -0
- package/dist/core/{p-a4582939.entry.js → p-a88369e1.entry.js} +2 -2
- package/dist/core/p-a88369e1.entry.js.map +1 -0
- package/dist/core/{p-a30d165d.entry.js → p-af405fc0.entry.js} +2 -2
- package/dist/core/p-af405fc0.entry.js.map +1 -0
- package/dist/core/p-b953b22f.entry.js +2 -0
- package/dist/core/p-b953b22f.entry.js.map +1 -0
- package/dist/core/p-bb9142fe.entry.js +2 -0
- package/dist/core/{p-67f3bf1a.entry.js.map → p-bb9142fe.entry.js.map} +1 -1
- package/dist/core/{p-60a0c711.entry.js → p-bfdefe7a.entry.js} +2 -2
- package/dist/core/{p-60a0c711.entry.js.map → p-bfdefe7a.entry.js.map} +1 -1
- package/dist/core/p-c4baa405.entry.js +2 -0
- package/dist/core/p-c4baa405.entry.js.map +1 -0
- package/dist/core/p-c86ca475.js +2 -0
- package/dist/core/p-c86ca475.js.map +1 -0
- package/dist/core/p-cda2a461.entry.js +2 -0
- package/dist/core/p-cda2a461.entry.js.map +1 -0
- package/dist/core/{p-f6013934.entry.js → p-ce83c802.entry.js} +2 -2
- package/dist/core/p-ce83c802.entry.js.map +1 -0
- package/dist/core/p-cea17764.entry.js +2 -0
- package/dist/core/{p-4e5934f3.entry.js.map → p-cea17764.entry.js.map} +1 -1
- package/dist/core/{p-f541034c.entry.js → p-d0768256.entry.js} +2 -2
- package/dist/core/p-d2d6f1eb.entry.js +2 -0
- package/dist/core/p-d2d6f1eb.entry.js.map +1 -0
- package/dist/core/{p-c6f1e205.entry.js → p-d4628704.entry.js} +2 -2
- package/dist/core/p-d4628704.entry.js.map +1 -0
- package/dist/core/{p-0f6b9686.js → p-e246d84b.js} +2 -2
- package/dist/core/p-e4fa4ee5.entry.js +2 -0
- package/dist/core/p-e4fa4ee5.entry.js.map +1 -0
- package/dist/core/{p-3d1ba098.entry.js → p-e6779171.entry.js} +2 -2
- package/dist/core/{p-fd42f129.entry.js → p-e8bb1522.entry.js} +2 -2
- package/dist/core/p-e8bb1522.entry.js.map +1 -0
- package/dist/core/{p-4da17eda.entry.js → p-f42ca69f.entry.js} +2 -2
- package/dist/core/{p-3dc4e128.entry.js → p-f5e9c8c8.entry.js} +2 -2
- package/dist/core/p-f5e9c8c8.entry.js.map +1 -0
- package/dist/core/{p-0e119312.entry.js → p-fa02a267.entry.js} +2 -2
- package/dist/core/{p-0e119312.entry.js.map → p-fa02a267.entry.js.map} +1 -1
- package/dist/esm/core.js +3 -3
- package/dist/esm/{date-helpers-0e5e32a7.js → date-helpers-3b8c39ab.js} +20 -66
- package/dist/esm/date-helpers-3b8c39ab.js.map +1 -0
- package/dist/esm/{helpers-bbab69a2.js → helpers-bf471ace.js} +3 -3
- package/dist/esm/{helpers-bbab69a2.js.map → helpers-bf471ace.js.map} +1 -1
- package/dist/esm/{helpers-4e38ba2b.js → helpers-ddc2008a.js} +34 -18
- package/dist/esm/helpers-ddc2008a.js.map +1 -0
- package/dist/esm/ic-accordion-group.entry.js +2 -2
- package/dist/esm/ic-accordion.entry.js +2 -2
- package/dist/esm/ic-alert.entry.js +2 -2
- package/dist/esm/ic-back-to-top.entry.js +2 -2
- package/dist/esm/ic-badge.entry.js +3 -3
- package/dist/esm/ic-badge.entry.js.map +1 -1
- package/dist/esm/ic-breadcrumb-group.entry.js +2 -2
- package/dist/esm/ic-breadcrumb.entry.js +2 -2
- package/dist/esm/ic-button_3.entry.js +61 -3
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-card-horizontal.entry.js +16 -12
- package/dist/esm/ic-card-horizontal.entry.js.map +1 -1
- package/dist/esm/ic-card-vertical.entry.js +3 -3
- package/dist/esm/ic-card-vertical.entry.js.map +1 -1
- package/dist/esm/ic-checkbox-group.entry.js +7 -7
- package/dist/esm/ic-checkbox-group.entry.js.map +1 -1
- package/dist/esm/{ic-empty-state_2.entry.js → ic-checkbox_3.entry.js} +158 -25
- package/dist/esm/ic-checkbox_3.entry.js.map +1 -0
- package/dist/esm/ic-chip.entry.js +3 -3
- package/dist/esm/ic-chip.entry.js.map +1 -1
- package/dist/esm/ic-classification-banner.entry.js +3 -3
- package/dist/esm/ic-classification-banner.entry.js.map +1 -1
- package/dist/esm/ic-data-list.entry.js +1 -1
- package/dist/esm/ic-data-row.entry.js +2 -2
- package/dist/esm/ic-data-table-title-bar.entry.js +7 -7
- package/dist/esm/ic-data-table-title-bar.entry.js.map +1 -1
- package/dist/esm/ic-data-table.entry.js +310 -276
- package/dist/esm/ic-data-table.entry.js.map +1 -1
- package/dist/esm/ic-date-input.entry.js +175 -160
- package/dist/esm/ic-date-input.entry.js.map +1 -1
- package/dist/esm/ic-date-picker.entry.js +92 -70
- package/dist/esm/ic-date-picker.entry.js.map +1 -1
- package/dist/esm/ic-dialog.entry.js +38 -47
- package/dist/esm/ic-dialog.entry.js.map +1 -1
- package/dist/esm/ic-divider.entry.js +2 -2
- package/dist/esm/ic-footer-link-group.entry.js +2 -2
- package/dist/esm/ic-footer-link.entry.js +2 -2
- package/dist/esm/ic-footer.entry.js +2 -2
- package/dist/esm/ic-hero.entry.js +2 -2
- package/dist/esm/ic-horizontal-scroll.entry.js +2 -2
- package/dist/esm/ic-input-component-container_3.entry.js +3 -3
- package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
- package/dist/esm/ic-input-label_2.entry.js +2 -2
- package/dist/esm/ic-link.entry.js +2 -2
- package/dist/esm/ic-menu-group.entry.js +2 -2
- package/dist/esm/ic-menu-item.entry.js +3 -3
- package/dist/esm/ic-menu-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-button.entry.js +2 -2
- package/dist/esm/ic-navigation-group.entry.js +23 -17
- package/dist/esm/ic-navigation-group.entry.js.map +1 -1
- package/dist/esm/ic-navigation-item.entry.js +2 -2
- package/dist/esm/ic-navigation-menu.entry.js +38 -24
- package/dist/esm/ic-navigation-menu.entry.js.map +1 -1
- package/dist/esm/ic-page-header.entry.js +12 -11
- package/dist/esm/ic-page-header.entry.js.map +1 -1
- package/dist/esm/ic-pagination_4.entry.js +53 -32
- package/dist/esm/ic-pagination_4.entry.js.map +1 -1
- package/dist/esm/ic-popover-menu.entry.js +7 -6
- package/dist/esm/ic-popover-menu.entry.js.map +1 -1
- package/dist/esm/ic-radio-group.entry.js +7 -7
- package/dist/esm/ic-radio-group.entry.js.map +1 -1
- package/dist/esm/ic-radio-option.entry.js +2 -2
- package/dist/esm/ic-search-bar.entry.js +3 -3
- package/dist/esm/ic-search-bar.entry.js.map +1 -1
- package/dist/esm/ic-section-container.entry.js +3 -3
- package/dist/esm/ic-section-container.entry.js.map +1 -1
- package/dist/esm/ic-side-navigation.entry.js +10 -7
- package/dist/esm/ic-side-navigation.entry.js.map +1 -1
- package/dist/esm/ic-skeleton.entry.js +3 -3
- package/dist/esm/ic-skeleton.entry.js.map +1 -1
- package/dist/esm/ic-skip-link.entry.js +11 -10
- package/dist/esm/ic-skip-link.entry.js.map +1 -1
- package/dist/esm/ic-status-tag.entry.js +5 -5
- package/dist/esm/ic-status-tag.entry.js.map +1 -1
- package/dist/esm/ic-step.entry.js +17 -16
- package/dist/esm/ic-step.entry.js.map +1 -1
- package/dist/esm/ic-stepper.entry.js +4 -4
- package/dist/esm/ic-stepper.entry.js.map +1 -1
- package/dist/esm/ic-switch.entry.js +6 -6
- package/dist/esm/ic-switch.entry.js.map +1 -1
- package/dist/esm/ic-tab-context.entry.js +2 -2
- package/dist/esm/ic-tab-context.entry.js.map +1 -1
- package/dist/esm/ic-tab-group.entry.js +4 -4
- package/dist/esm/ic-tab-group.entry.js.map +1 -1
- package/dist/esm/ic-tab-panel.entry.js +3 -3
- package/dist/esm/ic-tab-panel.entry.js.map +1 -1
- package/dist/esm/ic-tab.entry.js +3 -3
- package/dist/esm/ic-tab.entry.js.map +1 -1
- package/dist/esm/ic-theme.entry.js +3 -3
- package/dist/esm/ic-theme.entry.js.map +1 -1
- package/dist/esm/ic-toast-region.entry.js +2 -2
- package/dist/esm/ic-toast-region.entry.js.map +1 -1
- package/dist/esm/ic-toast.entry.js +6 -6
- package/dist/esm/ic-toast.entry.js.map +1 -1
- package/dist/esm/ic-toggle-button-group.entry.js +4 -4
- package/dist/esm/ic-toggle-button-group.entry.js.map +1 -1
- package/dist/esm/ic-toggle-button.entry.js +5 -5
- package/dist/esm/ic-toggle-button.entry.js.map +1 -1
- package/dist/esm/ic-top-navigation.entry.js +5 -9
- package/dist/esm/ic-top-navigation.entry.js.map +1 -1
- package/dist/esm/ic-tree-item.entry.js +56 -42
- package/dist/esm/ic-tree-item.entry.js.map +1 -1
- package/dist/esm/ic-tree-view.entry.js +127 -22
- package/dist/esm/ic-tree-view.entry.js.map +1 -1
- package/dist/esm/ic-typography.entry.js +2 -2
- package/dist/esm/{index-163fe708.js → index-a7a720e7.js} +6 -11
- package/dist/esm/index-a7a720e7.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/types/components/ic-card-horizontal/ic-card-horizontal.d.ts +3 -3
- package/dist/types/components/ic-data-table/ic-data-table.d.ts +30 -20
- package/dist/types/components/ic-data-table/ic-data-table.stories.d.ts +3 -9
- package/dist/types/components/ic-data-table/story-data.d.ts +15 -4
- package/dist/types/components/ic-date-input/ic-date-input.d.ts +46 -29
- package/dist/types/components/ic-date-input/ic-date-input.stories.d.ts +6 -0
- package/dist/types/components/ic-date-picker/ic-date-picker.d.ts +18 -12
- package/dist/types/components/ic-date-picker/ic-date-picker.stories.d.ts +8 -0
- package/dist/types/components/ic-date-picker/ic-day-button.d.ts +2 -2
- package/dist/types/components/ic-date-picker/ic-month-picker.d.ts +3 -3
- package/dist/types/components/ic-date-picker/ic-year-picker.d.ts +3 -3
- package/dist/types/components/ic-date-picker/story-data.d.ts +1 -0
- package/dist/types/components/ic-pagination-bar/ic-pagination-bar.d.ts +2 -2
- package/dist/types/components/ic-tree-item/ic-tree-item.d.ts +8 -2
- package/dist/types/components/ic-tree-view/ic-tree-view.d.ts +21 -4
- package/dist/types/components/ic-tree-view/ic-tree-view.stories.d.ts +91 -13
- package/dist/types/components/ic-tree-view/ic-tree-view.types.d.ts +12 -0
- package/dist/types/components.d.ts +129 -73
- package/dist/types/utils/date-helpers.d.ts +4 -4
- package/dist/types/utils/helpers.d.ts +8 -17
- package/hydrate/index.js +1223 -955
- package/hydrate/index.mjs +1223 -955
- package/package.json +3 -3
- package/dist/cjs/date-helpers-c9551119.js.map +0 -1
- package/dist/cjs/helpers-0e4c4fdd.js.map +0 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js +0 -141
- package/dist/cjs/ic-checkbox.cjs.entry.js.map +0 -1
- package/dist/cjs/ic-empty-state_2.cjs.entry.js.map +0 -1
- package/dist/cjs/index-8a24b20c.js.map +0 -1
- package/dist/core/p-00135a74.js.map +0 -1
- package/dist/core/p-0efeab8a.entry.js +0 -2
- package/dist/core/p-0efeab8a.entry.js.map +0 -1
- package/dist/core/p-0fd762bf.entry.js.map +0 -1
- package/dist/core/p-144b1dee.entry.js +0 -2
- package/dist/core/p-1cf61bf2.entry.js +0 -2
- package/dist/core/p-1cf61bf2.entry.js.map +0 -1
- package/dist/core/p-33dd24eb.js +0 -2
- package/dist/core/p-33dd24eb.js.map +0 -1
- package/dist/core/p-3dc4e128.entry.js.map +0 -1
- package/dist/core/p-44ffa951.entry.js +0 -2
- package/dist/core/p-44ffa951.entry.js.map +0 -1
- package/dist/core/p-47962514.entry.js +0 -2
- package/dist/core/p-47962514.entry.js.map +0 -1
- package/dist/core/p-4e5934f3.entry.js +0 -2
- package/dist/core/p-5329e478.entry.js +0 -2
- package/dist/core/p-5329e478.entry.js.map +0 -1
- package/dist/core/p-5b2a7c1a.entry.js +0 -2
- package/dist/core/p-5b2a7c1a.entry.js.map +0 -1
- package/dist/core/p-67f3bf1a.entry.js +0 -2
- package/dist/core/p-6eaf585a.entry.js +0 -2
- package/dist/core/p-6eaf585a.entry.js.map +0 -1
- package/dist/core/p-8c4f212a.entry.js +0 -2
- package/dist/core/p-8c4f212a.entry.js.map +0 -1
- package/dist/core/p-8d73a3cc.entry.js.map +0 -1
- package/dist/core/p-9265efef.entry.js +0 -2
- package/dist/core/p-9265efef.entry.js.map +0 -1
- package/dist/core/p-95f2c59a.entry.js +0 -2
- package/dist/core/p-95f2c59a.entry.js.map +0 -1
- package/dist/core/p-a30d165d.entry.js.map +0 -1
- package/dist/core/p-a35cdfc3.entry.js +0 -2
- package/dist/core/p-a35cdfc3.entry.js.map +0 -1
- package/dist/core/p-a4582939.entry.js.map +0 -1
- package/dist/core/p-a7f95a61.entry.js +0 -2
- package/dist/core/p-a7f95a61.entry.js.map +0 -1
- package/dist/core/p-a81c9048.entry.js +0 -2
- package/dist/core/p-a81c9048.entry.js.map +0 -1
- package/dist/core/p-ac74cdac.entry.js +0 -2
- package/dist/core/p-ac74cdac.entry.js.map +0 -1
- package/dist/core/p-ad3e543e.entry.js +0 -2
- package/dist/core/p-ad3e543e.entry.js.map +0 -1
- package/dist/core/p-ae2bae87.entry.js +0 -2
- package/dist/core/p-ae2bae87.entry.js.map +0 -1
- package/dist/core/p-afde50b8.js +0 -2
- package/dist/core/p-afde50b8.js.map +0 -1
- package/dist/core/p-b84213d1.entry.js +0 -2
- package/dist/core/p-b84213d1.entry.js.map +0 -1
- package/dist/core/p-c2aef5cc.entry.js +0 -2
- package/dist/core/p-c2aef5cc.entry.js.map +0 -1
- package/dist/core/p-c6f1e205.entry.js.map +0 -1
- package/dist/core/p-cd59dc16.entry.js +0 -2
- package/dist/core/p-cd59dc16.entry.js.map +0 -1
- package/dist/core/p-e86c1c95.entry.js +0 -2
- package/dist/core/p-e86c1c95.entry.js.map +0 -1
- package/dist/core/p-f6013934.entry.js.map +0 -1
- package/dist/core/p-fba58c42.entry.js +0 -2
- package/dist/core/p-fba58c42.entry.js.map +0 -1
- package/dist/core/p-fd42f129.entry.js.map +0 -1
- package/dist/core/p-fde3bbb2.entry.js +0 -2
- package/dist/core/p-fde3bbb2.entry.js.map +0 -1
- package/dist/esm/date-helpers-0e5e32a7.js.map +0 -1
- package/dist/esm/helpers-4e38ba2b.js.map +0 -1
- package/dist/esm/ic-checkbox.entry.js.map +0 -1
- package/dist/esm/ic-empty-state_2.entry.js.map +0 -1
- package/dist/esm/index-163fe708.js.map +0 -1
- /package/dist/core/{p-32720276.entry.js.map → p-1bbae4b3.entry.js.map} +0 -0
- /package/dist/core/{p-b8aa37f9.entry.js.map → p-20bd48cf.entry.js.map} +0 -0
- /package/dist/core/{p-be5ad372.entry.js.map → p-21193099.entry.js.map} +0 -0
- /package/dist/core/{p-3e9564b5.entry.js.map → p-39269b62.entry.js.map} +0 -0
- /package/dist/core/{p-da798f58.entry.js.map → p-44ac8f8a.entry.js.map} +0 -0
- /package/dist/core/{p-afc4ce53.entry.js.map → p-4d39cab8.entry.js.map} +0 -0
- /package/dist/core/{p-fd006a9b.entry.js.map → p-4e187a11.entry.js.map} +0 -0
- /package/dist/core/{p-d154b26c.entry.js.map → p-50324682.entry.js.map} +0 -0
- /package/dist/core/{p-22e0ed96.entry.js.map → p-5796b6cd.entry.js.map} +0 -0
- /package/dist/core/{p-96551ddf.entry.js.map → p-57c80527.entry.js.map} +0 -0
- /package/dist/core/{p-b6db0cc1.entry.js.map → p-60d15d35.entry.js.map} +0 -0
- /package/dist/core/{p-272352cb.entry.js.map → p-6aa1e928.entry.js.map} +0 -0
- /package/dist/core/{p-1334a78f.entry.js.map → p-73e41eac.entry.js.map} +0 -0
- /package/dist/core/{p-08fd225f.entry.js.map → p-857c46c0.entry.js.map} +0 -0
- /package/dist/core/{p-0e3cb8d0.entry.js.map → p-8856dff4.entry.js.map} +0 -0
- /package/dist/core/{p-0c3bd9e6.entry.js.map → p-94427b50.entry.js.map} +0 -0
- /package/dist/core/{p-e13b43b1.entry.js.map → p-9cf7494c.entry.js.map} +0 -0
- /package/dist/core/{p-0848efa2.entry.js.map → p-a2671eb0.entry.js.map} +0 -0
- /package/dist/core/{p-f541034c.entry.js.map → p-d0768256.entry.js.map} +0 -0
- /package/dist/core/{p-0f6b9686.js.map → p-e246d84b.js.map} +0 -0
- /package/dist/core/{p-3d1ba098.entry.js.map → p-e6779171.entry.js.map} +0 -0
- /package/dist/core/{p-4da17eda.entry.js.map → p-f42ca69f.entry.js.map} +0 -0
@@ -1,5 +1,5 @@
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-
|
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-
|
1
|
+
import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-a7a720e7.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-ddc2008a.js';
|
3
3
|
|
4
4
|
const unsortedIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">
|
5
5
|
<path d="M9 3 5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z"></path>
|
@@ -13,13 +13,14 @@ const descendingIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 2
|
|
13
13
|
<path d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"></path>
|
14
14
|
</svg>`;
|
15
15
|
|
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);--ic-typography-color:var(--ic-data-table-text-default-emphasis)}.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-space-1px) solid var(--ic-data-table-border)}.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-data-table-cell-background-selected) !important}.table-row:hover{background-color:var(--ic-data-table-cell-background-hover) !important}.table-row-selected:hover{background-color:var(\n --ic-data-table-cell-background-selected-hover\n ) !important}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-data-table-icon-button-background-hover)}.sort-button:active{background-color:var(--ic-data-table-icon-button-background-pressed)}.sort-button svg{color:var(--ic-data-table-sort-toggle-icon)}.sort-button-unsorted svg{color:var(--ic-data-table-sort-toggle-icon-default)}.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-data-table-header-background);border-right:var(--ic-space-1px) solid var(--ic-data-table-header-keyline);border-bottom:var(--ic-space-1px) solid var(--ic-data-table-header-keyline);color:var(--ic-data-table-header-text)}.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-space-1px) solid var(--ic-data-table-header-keyline) !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{background-color:var(--ic-data-table-cell-background)}.table-row:nth-child(even){background-color:var(--ic-data-table-cell-background-stripe)}.table-cell{padding:var(--ic-space-xs);border-bottom:solid var(--ic-data-table-cell-keyline) 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 ic-typography{--ic-typography-color:var(--ic-data-table-text-low-emphasis)}.cell-emphasis-high ic-typography{--ic-typography-color:var(--ic-data-table-text-high-emphasis);font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-data-table-pagination-bar-background-color);border-top:var(--ic-space-1px) solid\n var(--ic-data-table-pagination-bar-keyline)}.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-space-1px) solid var(--ic-data-table-header-keyline)}.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);background-color:var(--ic-data-table-overlay-background);border:var(--ic-space-1px) solid var(--ic-data-table-overlay-border)}.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 .icon>svg,.column-header ::slotted(svg){fill:var(--ic-data-table-icon)}.table-cell .icon>svg,.table-cell ::slotted(svg){fill:var(--ic-data-table-icon-default-emphasis)}.cell-emphasis-high .icon>svg,.cell-emphasis-high ::slotted(svg){fill:var(--ic-data-table-icon-high-emphasis)}.cell-emphasis-low .icon>svg,.cell-emphasis-low ::slotted(svg){fill:var(--ic-data-table-icon-low-emphasis)}.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-data-table-loading-indicator-overlay-background);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-
|
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);--ic-typography-color:var(--ic-data-table-text-default-emphasis)}.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-space-1px) solid var(--ic-data-table-border)}.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-data-table-cell-background-selected) !important}.table-row:hover{background-color:var(--ic-data-table-cell-background-hover) !important}.table-row-selected:hover{background-color:var(\n --ic-data-table-cell-background-selected-hover\n ) !important}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-data-table-icon-button-background-hover)}.sort-button:active{background-color:var(--ic-data-table-icon-button-background-pressed)}.sort-button svg{color:var(--ic-data-table-sort-toggle-icon)}.sort-button-unsorted svg{color:var(--ic-data-table-sort-toggle-icon-default)}.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-data-table-header-background);border-right:var(--ic-space-1px) solid var(--ic-data-table-header-keyline);border-bottom:var(--ic-space-1px) solid var(--ic-data-table-header-keyline);color:var(--ic-data-table-header-text)}.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-space-1px) solid var(--ic-data-table-header-keyline) !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{background-color:var(--ic-data-table-cell-background)}.table-row:nth-child(even){background-color:var(--ic-data-table-cell-background-stripe)}.table-cell{padding:var(--ic-space-xs);border-bottom:solid var(--ic-data-table-cell-keyline) 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 ic-typography{--ic-typography-color:var(--ic-data-table-text-low-emphasis)}.cell-emphasis-high ic-typography{--ic-typography-color:var(--ic-data-table-text-high-emphasis);font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-data-table-pagination-bar-background-color);border-top:var(--ic-space-1px) solid\n var(--ic-data-table-pagination-bar-keyline)}.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-space-1px) solid var(--ic-data-table-header-keyline)}.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);background-color:var(--ic-data-table-overlay-background);border:var(--ic-space-1px) solid var(--ic-data-table-overlay-border)}.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 .icon>svg,.column-header ::slotted(svg){fill:var(--ic-data-table-icon)}.table-cell .icon>svg,.table-cell ::slotted(svg),.cell-description-icon>svg{fill:var(--ic-data-table-icon-default-emphasis)}.cell-emphasis-high .icon>svg,.cell-emphasis-high ::slotted(svg){fill:var(--ic-data-table-icon-high-emphasis)}.cell-emphasis-low .icon>svg,.cell-emphasis-low ::slotted(svg){fill:var(--ic-data-table-icon-low-emphasis)}.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}.checkbox-cell{--column-width:var(--ic-space-xxl);align-content:center;border-right:none}.table-density-dense.checkbox-cell{--column-width:2.5rem}.checkbox-wrapper{display:flex;justify-content:center}.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-data-table-loading-indicator-overlay-background);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-data-table-cell-description-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}}";
|
17
17
|
const IcDataTableStyle0 = icDataTableCss;
|
18
18
|
|
19
19
|
const DataTable = class {
|
20
20
|
constructor(hostRef) {
|
21
21
|
registerInstance(this, hostRef);
|
22
22
|
this.icRowHeightChange = createEvent(this, "icRowHeightChange", 7);
|
23
|
+
this.icSelectAllRows = createEvent(this, "icSelectAllRows", 7);
|
23
24
|
this.icSelectedRowChange = createEvent(this, "icSelectedRowChange", 7);
|
24
25
|
this.icSortChange = createEvent(this, "icSortChange", 7);
|
25
26
|
this.DENSITY_HEIGHT_MULTIPLIER = {
|
@@ -67,6 +68,7 @@ const DataTable = class {
|
|
67
68
|
this.fromRow = 0;
|
68
69
|
this.scrollable = false;
|
69
70
|
this.scrollOffset = 0;
|
71
|
+
this.selectedRows = [];
|
70
72
|
this.debounceDelay = 0;
|
71
73
|
/**
|
72
74
|
* Determines whether the column header should be truncated and display a tooltip. Default is `false`.
|
@@ -88,10 +90,6 @@ const DataTable = class {
|
|
88
90
|
* Sets the row height on all rows in the table that aren't set using the `variableRowHeight` method.
|
89
91
|
*/
|
90
92
|
this.globalRowHeight = "auto";
|
91
|
-
/**
|
92
|
-
* If `true`, the selected row is highlighted using a background colour.
|
93
|
-
*/
|
94
|
-
this.highlightSelectedRow = true;
|
95
93
|
/**
|
96
94
|
* If `true`, column headers will not be visible.
|
97
95
|
*/
|
@@ -126,6 +124,10 @@ const DataTable = class {
|
|
126
124
|
showItemsPerPageControl: true,
|
127
125
|
type: "simple",
|
128
126
|
};
|
127
|
+
/**
|
128
|
+
* If `true`, a checkbox column will be displayed to the left of the table which allows multiple rows to be selected.
|
129
|
+
*/
|
130
|
+
this.rowSelection = false;
|
129
131
|
/**
|
130
132
|
* If `true`, adds a pagination bar to the bottom of the table.
|
131
133
|
*/
|
@@ -168,11 +170,12 @@ const DataTable = class {
|
|
168
170
|
this.headerResizeObserver.observe(this.el);
|
169
171
|
};
|
170
172
|
this.headerResizeCallback = () => {
|
173
|
+
var _a, _b, _c;
|
171
174
|
if (!this.hideColumnHeaders && this.columnHeaderTruncation) {
|
172
|
-
const tableContainerWidth = this.el.shadowRoot.querySelector(".table-container").clientWidth;
|
173
|
-
if (tableContainerWidth
|
174
|
-
|
175
|
-
|
175
|
+
const tableContainerWidth = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".table-container")) === null || _b === void 0 ? void 0 : _b.clientWidth;
|
176
|
+
if (tableContainerWidth &&
|
177
|
+
tableContainerWidth !== this.prevTableContainerWidth) {
|
178
|
+
(_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll("th.column-header").forEach((header) => {
|
176
179
|
const tooltip = header.querySelector(this.IC_TOOLTIP_STRING);
|
177
180
|
const typographyEls = header.querySelectorAll(this.IC_TYPOGRAPHY_STRING);
|
178
181
|
if (tooltip && typographyEls && typographyEls.length === 2) {
|
@@ -186,49 +189,46 @@ const DataTable = class {
|
|
186
189
|
}
|
187
190
|
}
|
188
191
|
};
|
192
|
+
this.getRowHeight = (cellContainer) => parseInt(getComputedStyle(document.documentElement).fontSize) *
|
193
|
+
parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING) || "");
|
189
194
|
this.updateSetRowHeight = (typographyEl) => {
|
190
|
-
const
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
|
195
|
-
if (typographyEl.scrollHeight > rowHeight) {
|
195
|
+
const removeRowHeightVariable = (element) => {
|
196
|
+
const cellContainer = this.getCellContainer(element);
|
197
|
+
if (cellContainer &&
|
198
|
+
element.scrollHeight > this.getRowHeight(cellContainer)) {
|
196
199
|
cellContainer.style.removeProperty(this.ROW_HEIGHT_CSS_VARIABLE);
|
197
200
|
}
|
201
|
+
};
|
202
|
+
if (typographyEl) {
|
203
|
+
removeRowHeightVariable(typographyEl);
|
198
204
|
}
|
199
205
|
else {
|
200
206
|
this.getTypographyElements().forEach((typographyEl) => {
|
201
|
-
|
202
|
-
const rowHeight = fontSize *
|
203
|
-
parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
|
204
|
-
if (typographyEl.scrollHeight > rowHeight) {
|
205
|
-
cellContainer.style.removeProperty(this.ROW_HEIGHT_CSS_VARIABLE);
|
206
|
-
}
|
207
|
+
removeRowHeightVariable(typographyEl);
|
207
208
|
});
|
208
209
|
}
|
209
210
|
};
|
210
211
|
this.debounceDataTruncation = () => {
|
211
212
|
this.getTypographyElements().forEach((typographyEl) => {
|
212
213
|
const cellContainer = this.getCellContainer(typographyEl);
|
213
|
-
if (
|
214
|
+
if (cellContainer &&
|
215
|
+
!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
|
214
216
|
this.resizeObserver = new ResizeObserver(
|
215
217
|
// This gets triggered twice due to updated data and see more/see less button
|
216
218
|
dynamicDebounce(() => {
|
217
219
|
this.dataTruncation(typographyEl);
|
218
220
|
if (!this.isNewDebounceDelaySet) {
|
219
|
-
this.
|
221
|
+
this.debounceDelay = 200;
|
222
|
+
this.isNewDebounceDelaySet = true;
|
220
223
|
}
|
221
224
|
}, () => this.debounceDelay));
|
222
225
|
this.resizeObserver.observe(typographyEl);
|
223
226
|
}
|
224
227
|
});
|
225
228
|
};
|
226
|
-
this.setNewDebounceDelay = (delay) => {
|
227
|
-
this.debounceDelay = delay;
|
228
|
-
this.isNewDebounceDelaySet = true;
|
229
|
-
};
|
230
229
|
this.getLines = (height) => Math.floor(height / this.DEFAULT_LINE_HEIGHT);
|
231
230
|
this.truncate = (typographyEl, cellContainer, tooltip) => {
|
231
|
+
var _a;
|
232
232
|
if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
|
233
233
|
//24 is the height of a single line
|
234
234
|
if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
|
@@ -243,33 +243,36 @@ const DataTable = class {
|
|
243
243
|
else {
|
244
244
|
if (this.truncationPattern === this.TOOLTIP_STRING && tooltip) {
|
245
245
|
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
|
246
|
-
|
247
|
-
|
246
|
+
(_a = cellContainer
|
247
|
+
.querySelector(this.CELL_TEXT_WRAPPER_STRING)) === null || _a === void 0 ? void 0 : _a.prepend(typographyEl);
|
248
248
|
tooltip.remove();
|
249
249
|
}
|
250
250
|
if (this.truncationPattern === this.SHOW_HIDE_STRING &&
|
251
|
-
!isEmptyString(typographyEl.getAttribute("max-lines"))) {
|
251
|
+
!isEmptyString(typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.getAttribute("max-lines"))) {
|
252
252
|
this.resetShowHideTruncation(typographyEl);
|
253
253
|
}
|
254
254
|
}
|
255
255
|
};
|
256
256
|
this.dataTruncation = (typographyEl) => {
|
257
|
+
var _a;
|
257
258
|
// Tooltip truncation mentioned in AC. Will need revisiting
|
258
259
|
const tooltip = this.getTooltip(typographyEl);
|
259
260
|
const cellContainer = this.getCellContainer(typographyEl);
|
260
|
-
if (
|
261
|
+
if (!cellContainer ||
|
262
|
+
cellContainer.classList.contains("data-type-element") ||
|
261
263
|
this.dataUpdated) {
|
262
264
|
return;
|
263
265
|
}
|
264
266
|
if (this.truncationPattern === this.SHOW_HIDE_STRING &&
|
265
|
-
typographyEl.shadowRoot.querySelector("button")) {
|
267
|
+
((_a = typographyEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button"))) {
|
266
268
|
const showHideBtn = typographyEl.shadowRoot.querySelector("button");
|
267
269
|
// If the see more/see less is present and the max lines is equal to the cell container
|
268
270
|
// remove the see more/see less button
|
269
271
|
if (showHideBtn) {
|
270
272
|
const truncWrapper = this.getTruncWrapper(typographyEl);
|
271
|
-
if (
|
272
|
-
|
273
|
+
if (truncWrapper &&
|
274
|
+
this.getLines(truncWrapper.scrollHeight) ===
|
275
|
+
Number(typographyEl.getAttribute("max-lines"))) {
|
273
276
|
this.resetShowHideTruncation(typographyEl);
|
274
277
|
}
|
275
278
|
}
|
@@ -299,18 +302,16 @@ const DataTable = class {
|
|
299
302
|
}
|
300
303
|
this.truncate(typographyEl, cellContainer, tooltip);
|
301
304
|
};
|
302
|
-
this.getTruncWrapper = (typographyEl) => typographyEl.shadowRoot.querySelector(".trunc-wrapper");
|
305
|
+
this.getTruncWrapper = (typographyEl) => { var _a; return (_a = typographyEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".trunc-wrapper"); };
|
303
306
|
this.removeTextWrap = () => {
|
304
307
|
this.getTypographyElements().forEach((typographyEl) => {
|
305
308
|
const tableCell = typographyEl.closest("td");
|
306
|
-
if (tableCell.classList.contains(this.TEXT_WRAP_STRING)) {
|
309
|
+
if (tableCell === null || tableCell === void 0 ? void 0 : tableCell.classList.contains(this.TEXT_WRAP_STRING)) {
|
307
310
|
tableCell.classList.remove(this.TEXT_WRAP_STRING);
|
308
311
|
}
|
309
312
|
});
|
310
313
|
};
|
311
|
-
this.getCellContainer = (typographyEl) =>
|
312
|
-
return typographyEl.closest(".cell-container");
|
313
|
-
};
|
314
|
+
this.getCellContainer = (typographyEl) => typographyEl.closest(".cell-container");
|
314
315
|
this.deleteTextWrapDataKey = (array) => Array.isArray(array) &&
|
315
316
|
array.forEach((val) => val.textWrap && delete val.textWrap);
|
316
317
|
this.startLoadingTimer = () => {
|
@@ -318,7 +319,7 @@ const DataTable = class {
|
|
318
319
|
this.timerStarted = Date.now();
|
319
320
|
setTimeout(() => {
|
320
321
|
this.hasLoadedForOneSecond = true;
|
321
|
-
this.timerStarted =
|
322
|
+
this.timerStarted = 0;
|
322
323
|
}, this.minimumLoadingDisplayDuration);
|
323
324
|
};
|
324
325
|
this.isObject = (value) => value !== undefined && value !== null && typeof value === "object";
|
@@ -347,32 +348,28 @@ const DataTable = class {
|
|
347
348
|
const { description, max, min, progress, monochrome } = this.updatingOptions || {};
|
348
349
|
return (h("th", { colSpan: this.columns.length, class: "updating-state" }, h("ic-loading-indicator", { theme: this.theme, monochrome: monochrome, description: description || "Updating table data", fullWidth: true, max: max, min: min, progress: progress, type: "linear", size: "small" })));
|
349
350
|
};
|
350
|
-
this.setRowHeight = (height) => {
|
351
|
-
|
352
|
-
this.DENSITY_PADDING_HEIGHT_DIFF[this.density]}px`);
|
353
|
-
};
|
351
|
+
this.setRowHeight = (height) => pxToRem(`${height * this.DENSITY_HEIGHT_MULTIPLIER[this.density] -
|
352
|
+
this.DENSITY_PADDING_HEIGHT_DIFF[this.density]}px`);
|
354
353
|
this.setTruncationClass = () => this.truncationPattern
|
355
354
|
? { [`truncation-${this.truncationPattern}`]: true }
|
356
355
|
: {};
|
357
356
|
this.getColumnWidth = (columnWidth) => {
|
358
357
|
// TODO: Setting max width on columns
|
359
358
|
let columnWidthStyling = {};
|
360
|
-
if (columnWidth) {
|
361
|
-
|
362
|
-
|
359
|
+
if (typeof columnWidth === "string") {
|
360
|
+
columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-width"]: columnWidth });
|
361
|
+
}
|
362
|
+
else if (columnWidth && Object.keys(columnWidth).length > 0) {
|
363
|
+
if (columnWidth.minWidth) {
|
364
|
+
columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-min-width"]: columnWidth.minWidth });
|
363
365
|
}
|
364
|
-
if (
|
365
|
-
|
366
|
-
columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-min-width"]: columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.minWidth });
|
367
|
-
}
|
368
|
-
if (columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.maxWidth) {
|
369
|
-
columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-max-width"]: columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.maxWidth });
|
370
|
-
}
|
366
|
+
if (columnWidth.maxWidth) {
|
367
|
+
columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-max-width"]: columnWidth.maxWidth });
|
371
368
|
}
|
372
369
|
}
|
373
370
|
return columnWidthStyling;
|
374
371
|
};
|
375
|
-
this.
|
372
|
+
this.getCalculatedRowHeight = (columnProps, rowTextWrap, cell, currentRowHeight) => {
|
376
373
|
if ((this.truncationPattern || currentRowHeight) &&
|
377
374
|
!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.textWrap) &&
|
378
375
|
!rowTextWrap &&
|
@@ -385,20 +382,22 @@ const DataTable = class {
|
|
385
382
|
return {};
|
386
383
|
};
|
387
384
|
this.adjustWidthForActionElement = () => {
|
388
|
-
|
389
|
-
elements.
|
385
|
+
var _a;
|
386
|
+
const elements = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".action-element");
|
387
|
+
elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
|
390
388
|
const width = element.firstChild.getBoundingClientRect()
|
391
389
|
.width;
|
392
390
|
const gridWrapper = element.closest(".cell-grid-wrapper");
|
393
|
-
|
391
|
+
if (gridWrapper)
|
392
|
+
gridWrapper.style.gridTemplateColumns = `auto calc(${width}px + var(--ic-space-xs))`;
|
394
393
|
});
|
395
394
|
};
|
396
|
-
this.createCellContent = (columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon,
|
395
|
+
this.createCellContent = (columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, cellValue, rowEmphasis, currentRowHeight) => {
|
397
396
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
398
397
|
return (h("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
|
399
398
|
!isSlotUsed(this.el, cellSlotName)
|
400
399
|
? cell
|
401
|
-
:
|
400
|
+
: undefined, 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) ||
|
402
401
|
((_b = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
|
403
402
|
rowAlignment ||
|
404
403
|
this.getCellAlignment(cell, "vertical")}`]: !!((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.vertical) ||
|
@@ -414,7 +413,7 @@ const DataTable = class {
|
|
414
413
|
(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
|
415
414
|
rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
|
416
415
|
!!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
|
417
|
-
!!rowEmphasis }, this.setTruncationClass()), { [this.CELL_CONTAINER_WITH_DESCRIPTION_STRING]: this.isObject(cell) && Object.keys(cell).includes("description") }), style: Object.assign(Object.assign({}, this.
|
416
|
+
!!rowEmphasis }, this.setTruncationClass()), { [this.CELL_CONTAINER_WITH_DESCRIPTION_STRING]: this.isObject(cell) && Object.keys(cell).includes("description") }), style: Object.assign(Object.assign({}, this.getCalculatedRowHeight(columnProps, rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap, cell, currentRowHeight)), this.getColumnWidth(columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnWidth)), "data-row-height": this.truncationPattern || currentRowHeight
|
418
417
|
? this.setRowHeight(currentRowHeight)
|
419
418
|
: 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)) &&
|
420
419
|
(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" &&
|
@@ -462,17 +461,18 @@ const DataTable = class {
|
|
462
461
|
["row-header-sticky"]: this.stickyRowHeaders,
|
463
462
|
} }, cellValue("title")));
|
464
463
|
}
|
464
|
+
const CellContent = this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, cellValue, rowEmphasis, currentRowHeight || undefined);
|
465
465
|
if (rowKeys[index] !== "rowOptions") {
|
466
466
|
return (h("td", { class: {
|
467
467
|
["table-cell"]: true,
|
468
468
|
[`table-density-${this.density}`]: this.notDefaultDensity(),
|
469
469
|
["with-overflow"]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element",
|
470
470
|
}, style: Object.assign({}, this.getColumnWidth(columnProps.columnWidth)) }, this.isObject(cell) &&
|
471
|
-
Object.keys(cell).includes("actionElement") ? (h("div", { class: "cell-grid-wrapper" },
|
471
|
+
Object.keys(cell).includes("actionElement") ? (h("div", { class: "cell-grid-wrapper" }, CellContent, h("span", { class: "action-element", innerHTML: cellValue("actionElement"),
|
472
472
|
// eslint-disable-next-line react/jsx-no-bind
|
473
473
|
onClick: cell.actionOnClick
|
474
474
|
? (event) => this.handleClick(event, cell.actionOnClick)
|
475
|
-
: undefined }))) : (
|
475
|
+
: undefined }))) : (CellContent)));
|
476
476
|
}
|
477
477
|
});
|
478
478
|
};
|
@@ -505,16 +505,28 @@ const DataTable = class {
|
|
505
505
|
[`text-${this.density}`]: this.notDefaultDensity(),
|
506
506
|
} }, title)))));
|
507
507
|
this.onRowClick = (row) => {
|
508
|
-
|
509
|
-
|
510
|
-
|
511
|
-
|
512
|
-
|
508
|
+
const notCurrentlySelected = !this.selectedRows.includes(row);
|
509
|
+
this.selectedRows = notCurrentlySelected
|
510
|
+
? [...this.selectedRows, row]
|
511
|
+
: this.selectedRows.filter((selectedRow) => selectedRow !== row);
|
512
|
+
this.icSelectedRowChange.emit({
|
513
|
+
row: notCurrentlySelected ? row : null,
|
514
|
+
selectedRows: this.selectedRows,
|
515
|
+
});
|
516
|
+
};
|
517
|
+
this.selectAllRows = () => {
|
518
|
+
this.selectedRows =
|
519
|
+
this.organisedData &&
|
520
|
+
this.selectedRows.length !== this.organisedData.length
|
521
|
+
? [...this.organisedData]
|
522
|
+
: [];
|
523
|
+
this.icSelectAllRows.emit(this.selectedRows);
|
513
524
|
};
|
514
525
|
this.createRows = () => {
|
526
|
+
var _a, _b, _c;
|
515
527
|
const data = this.showPagination
|
516
|
-
? this.data.slice(this.fromRow, this.toRow)
|
517
|
-
: this.data.slice();
|
528
|
+
? (_a = this.data) === null || _a === void 0 ? void 0 : _a.slice(this.fromRow, this.toRow)
|
529
|
+
: (_b = this.data) === null || _b === void 0 ? void 0 : _b.slice();
|
518
530
|
const paginationOffset = this.showPagination ? this.fromRow : 0;
|
519
531
|
/**
|
520
532
|
* Ensures that createCells has a value in data to map over to actually render the slot.
|
@@ -522,7 +534,7 @@ const DataTable = class {
|
|
522
534
|
* `addDataToPosition` used to add the element in the correct column order.
|
523
535
|
* Adding empty string value in to give `createCells` something to loop over.
|
524
536
|
*/
|
525
|
-
|
537
|
+
this.organisedData = data === null || data === void 0 ? void 0 : data.map((row, rowIndex) => {
|
526
538
|
const slottedColumns = this.columns
|
527
539
|
.map(({ key }, index) => isSlotUsed(this.el, `${key}-${rowIndex + paginationOffset}`) && {
|
528
540
|
key,
|
@@ -535,18 +547,19 @@ const DataTable = class {
|
|
535
547
|
? addDataToPosition(row, slottedColumns, "")
|
536
548
|
: row;
|
537
549
|
});
|
538
|
-
return organisedData
|
539
|
-
.sort(!this.sortable || this.disableAutoSort
|
550
|
+
return (_c = this.organisedData) === null || _c === void 0 ? void 0 : _c.sort(!this.sortable || this.disableAutoSort
|
540
551
|
? undefined
|
541
|
-
: this.getSortFunction())
|
542
|
-
.
|
543
|
-
|
544
|
-
|
545
|
-
|
546
|
-
|
547
|
-
|
548
|
-
|
549
|
-
|
552
|
+
: this.getSortFunction()).map((row, index) => {
|
553
|
+
const isRowSelected = this.rowSelection && this.selectedRows.includes(row);
|
554
|
+
const cellIndex = index + paginationOffset;
|
555
|
+
return (h("tr", { class: {
|
556
|
+
"table-row": true,
|
557
|
+
"table-row-selected": isRowSelected,
|
558
|
+
} }, this.rowSelection && (h("td", { class: {
|
559
|
+
"table-cell": true,
|
560
|
+
"checkbox-cell": true,
|
561
|
+
[`table-density-${this.density}`]: this.notDefaultDensity(),
|
562
|
+
} }, h("div", { class: "checkbox-wrapper" }, h("ic-checkbox", { class: "ic-data-table-checkbox", checked: isRowSelected, disabled: this.updating || this.loading, hideLabel: true, label: `${isRowSelected ? "Deselect" : "Select"} row ${cellIndex}`, onIcCheck: () => this.onRowClick(row), size: this.density === "dense" ? "small" : "medium", value: cellIndex })))), this.createCells(row, cellIndex)));
|
550
563
|
});
|
551
564
|
};
|
552
565
|
this.getObjectValue = (cell, key) => Object.values(cell)[Object.keys(cell).indexOf(key)];
|
@@ -589,12 +602,11 @@ const DataTable = class {
|
|
589
602
|
}
|
590
603
|
};
|
591
604
|
this.sortRows = (column) => {
|
592
|
-
|
605
|
+
var _a, _b, _c, _d;
|
593
606
|
const sortOrders = this.sortOptions.sortOrders;
|
594
607
|
if (column !== this.sortedColumn) {
|
595
608
|
if (this.sortedColumn) {
|
596
|
-
|
597
|
-
previousSortedButton.setAttribute("aria-label", this.getSortButtonLabel(column)); // Passing through unsorted column returns correct label for newly unsorted column
|
609
|
+
(_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`#sort-button-${this.sortedColumn}`)) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-label", this.getSortButtonLabel(column)); // Passing through unsorted column returns correct label for newly unsorted column
|
598
610
|
}
|
599
611
|
this.sortedColumn = column;
|
600
612
|
this.sortedColumnOrder = "unsorted";
|
@@ -604,50 +616,57 @@ const DataTable = class {
|
|
604
616
|
nextSortOrderIndex = 0;
|
605
617
|
}
|
606
618
|
this.sortedColumnOrder = sortOrders[nextSortOrderIndex];
|
607
|
-
|
619
|
+
(_d = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(`#sort-button-${column}`)) === null || _d === void 0 ? void 0 : _d.setAttribute("aria-label", this.getSortButtonLabel(column));
|
608
620
|
this.tableSorted = true;
|
609
621
|
this.icSortChange.emit({
|
610
622
|
columnName: column,
|
611
623
|
sorted: this.sortedColumnOrder,
|
612
624
|
});
|
613
625
|
};
|
626
|
+
/** Gets all `ic-typography`elements within the data table, excluding column headers and cell descriptions */
|
614
627
|
this.getTypographyElements = () => {
|
615
|
-
|
616
|
-
return Array.from(this.el.shadowRoot.querySelectorAll("ic-typography:not(.column-header-text,.cell-description-text)"));
|
617
|
-
};
|
618
|
-
this.getTooltip = (typographyEl) => {
|
619
|
-
return typographyEl.closest(this.TOOLTIP);
|
628
|
+
var _a;
|
629
|
+
return Array.from(((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("ic-typography:not(.column-header-text,.cell-description-text)")) || []);
|
620
630
|
};
|
631
|
+
this.getTooltip = (typographyEl) => typographyEl.closest(this.TOOLTIP);
|
621
632
|
this.updateTruncationTooltip = (removeTooltipOnly = false) => {
|
622
633
|
this.getTypographyElements().forEach((typographyEl) => {
|
623
634
|
const tooltip = this.getTooltip(typographyEl);
|
624
635
|
const cellContainer = this.getCellContainer(typographyEl);
|
625
|
-
if (
|
626
|
-
this.
|
627
|
-
|
628
|
-
|
636
|
+
if (cellContainer) {
|
637
|
+
if (typographyEl.closest(this.TEXT_WRAP_CLASS)) {
|
638
|
+
this.removeTooltip(cellContainer, typographyEl, tooltip);
|
639
|
+
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
|
640
|
+
return;
|
641
|
+
}
|
642
|
+
this.regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly);
|
629
643
|
}
|
630
|
-
this.regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly);
|
631
644
|
});
|
632
645
|
};
|
633
646
|
this.updateScrollOffset = () => {
|
634
|
-
|
647
|
+
var _a;
|
648
|
+
const tableRowContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".table-row-container");
|
649
|
+
if (tableRowContainer)
|
650
|
+
this.scrollOffset = tableRowContainer.scrollTop;
|
635
651
|
};
|
636
652
|
this.updateRowHeightForDescriptions = (rowHeight, cellContainer) => {
|
637
|
-
cellContainer.setAttribute(
|
653
|
+
cellContainer.setAttribute(this.DATA_ROW_HEIGHT_STRING, rowHeight.toString());
|
638
654
|
cellContainer.setAttribute("style", `${this.ROW_HEIGHT_CSS_VARIABLE}: ${rowHeight}px`);
|
639
655
|
};
|
640
|
-
|
656
|
+
/** Method to update the row heights on cells with descriptions and tooltip truncation */
|
641
657
|
this.updateCellHeightsWithDescriptions = () => {
|
642
|
-
|
643
|
-
|
658
|
+
var _a, _b;
|
659
|
+
(_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.CELL_DESCRIPTION_STRING)) === null || _b === void 0 ? void 0 : _b.forEach((description) => {
|
644
660
|
const cellContainer = description.closest(`.${this.CELL_CONTAINER_WITH_DESCRIPTION_STRING}`);
|
645
|
-
const typography = cellContainer.querySelector(this.IC_TYPOGRAPHY_STRING);
|
661
|
+
const typography = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.querySelector(this.IC_TYPOGRAPHY_STRING);
|
646
662
|
const descriptionMarginTop = window
|
647
663
|
.getComputedStyle(description)
|
648
664
|
.getPropertyValue("margin-top");
|
649
665
|
const descriptionHeight = description.clientHeight + parseInt(descriptionMarginTop, 10);
|
650
|
-
if (
|
666
|
+
if (typography &&
|
667
|
+
cellContainer &&
|
668
|
+
this.globalRowHeight &&
|
669
|
+
this.globalRowHeight !== "auto") {
|
651
670
|
if (!typography.textContent &&
|
652
671
|
descriptionHeight + this.DEFAULT_LINE_HEIGHT > this.globalRowHeight) {
|
653
672
|
this.updateRowHeightForDescriptions(descriptionHeight, cellContainer);
|
@@ -655,7 +674,7 @@ const DataTable = class {
|
|
655
674
|
else if (this.truncationPattern === this.TOOLTIP_STRING) {
|
656
675
|
if (descriptionHeight + this.DEFAULT_LINE_HEIGHT >
|
657
676
|
this.globalRowHeight) {
|
658
|
-
const cellIcon = cellContainer
|
677
|
+
const cellIcon = cellContainer.querySelector(".icon");
|
659
678
|
if (deviceSizeMatches(IC_DEVICE_SIZES.XS) && cellIcon) {
|
660
679
|
// recalculate descriptionHeight as when a word break occurs this value changes
|
661
680
|
// Additional spacing given for 300-400% zoom
|
@@ -672,7 +691,8 @@ const DataTable = class {
|
|
672
691
|
// isn't overflowing the cell to trigger the show more button to appear.
|
673
692
|
}
|
674
693
|
else if (this.truncationPattern === this.SHOW_HIDE_STRING &&
|
675
|
-
descriptionHeight + this.DEFAULT_LINE_HEIGHT >
|
694
|
+
descriptionHeight + this.DEFAULT_LINE_HEIGHT >
|
695
|
+
this.globalRowHeight &&
|
676
696
|
typography.style.getPropertyValue("--truncation-max-lines") !==
|
677
697
|
"initial") {
|
678
698
|
this.updateRowHeightForDescriptions(descriptionHeight + this.DEFAULT_LINE_HEIGHT, cellContainer);
|
@@ -700,40 +720,36 @@ const DataTable = class {
|
|
700
720
|
return tableHostDimensions;
|
701
721
|
};
|
702
722
|
this.fixCellTooltip = (element) => {
|
703
|
-
var _a, _b
|
704
|
-
let tooltip;
|
723
|
+
var _a, _b;
|
724
|
+
let tooltip = null;
|
725
|
+
const tooltipChildElement = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.IC_TOOLTIP_STRING);
|
705
726
|
if (element.tagName === "IC-TOOLTIP") {
|
706
727
|
tooltip = element;
|
707
728
|
}
|
708
|
-
else if (
|
709
|
-
tooltip =
|
710
|
-
}
|
711
|
-
else {
|
712
|
-
if (((_c = element.children) === null || _c === void 0 ? void 0 : _c.length) > 0) {
|
713
|
-
Array.from(element.children).forEach((el) => {
|
714
|
-
this.fixCellTooltip(el);
|
715
|
-
});
|
716
|
-
}
|
717
|
-
else {
|
718
|
-
return;
|
719
|
-
}
|
729
|
+
else if (tooltipChildElement) {
|
730
|
+
tooltip = tooltipChildElement;
|
720
731
|
}
|
721
|
-
if (
|
722
|
-
|
723
|
-
|
732
|
+
else if (((_b = element.children) === null || _b === void 0 ? void 0 : _b.length) > 0) {
|
733
|
+
Array.from(element.children).forEach((el) => {
|
734
|
+
this.fixCellTooltip(el);
|
724
735
|
});
|
725
736
|
}
|
737
|
+
else {
|
738
|
+
return;
|
739
|
+
}
|
740
|
+
tooltip === null || tooltip === void 0 ? void 0 : tooltip.setExternalPopperProps({
|
741
|
+
strategy: "fixed",
|
742
|
+
});
|
726
743
|
};
|
727
744
|
this.fixCellTooltips = () => {
|
728
|
-
|
729
|
-
|
745
|
+
var _a, _b, _c, _d;
|
746
|
+
(_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".data-type-element")) === null || _b === void 0 ? void 0 : _b.forEach((element) => {
|
730
747
|
const slotElements = getSlotElements(element);
|
731
748
|
slotElements === null || slotElements === void 0 ? void 0 : slotElements.forEach((slottedEl) => {
|
732
749
|
this.fixCellTooltip(slottedEl);
|
733
750
|
});
|
734
751
|
});
|
735
|
-
|
736
|
-
actionElements === null || actionElements === void 0 ? void 0 : actionElements.forEach((actionElementSpan) => {
|
752
|
+
(_d = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(".action-element")) === null || _d === void 0 ? void 0 : _d.forEach((actionElementSpan) => {
|
737
753
|
const actionElement = actionElementSpan.firstChild;
|
738
754
|
if (actionElement) {
|
739
755
|
this.fixCellTooltip(actionElement);
|
@@ -741,7 +757,7 @@ const DataTable = class {
|
|
741
757
|
});
|
742
758
|
};
|
743
759
|
this.handleClick = (event, callback) => callback(event);
|
744
|
-
this.renderTableBody = (
|
760
|
+
this.renderTableBody = (loading, data, overlay) => {
|
745
761
|
if (!(data === null || data === void 0 ? void 0 : data.length))
|
746
762
|
return;
|
747
763
|
if (overlay && loading) {
|
@@ -760,7 +776,7 @@ const DataTable = class {
|
|
760
776
|
return (h(Fragment, null, h("div", { class: "loading-overlay", ref: (el) => (this.loadingOverlay = el) }), h("ic-loading-indicator", { theme: this.theme, monochrome: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.monochrome, class: {
|
761
777
|
"loading-empty": isLoading,
|
762
778
|
loading: true,
|
763
|
-
}, 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) })));
|
779
|
+
}, description: (loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.description) || "Loading table data", label: (loadingOptions === null || loadingOptions === void 0 ? void 0 : 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) })));
|
764
780
|
};
|
765
781
|
this.renderAriaLiveLoading = () => {
|
766
782
|
var _a, _b;
|
@@ -774,7 +790,7 @@ const DataTable = class {
|
|
774
790
|
return "";
|
775
791
|
}
|
776
792
|
};
|
777
|
-
this.renderEmptyState = (
|
793
|
+
this.renderEmptyState = (loading, data, overlay) => {
|
778
794
|
const emptyStateEl = isSlotUsed(this.el, "empty-state") ? (h("slot", { name: "empty-state" })) : (h("ic-empty-state", { aligned: "center", heading: "No Data", class: "loading-empty" }));
|
779
795
|
if (loading && !(data === null || data === void 0 ? void 0 : data.length) && overlay) {
|
780
796
|
return emptyStateEl;
|
@@ -788,16 +804,15 @@ const DataTable = class {
|
|
788
804
|
};
|
789
805
|
}
|
790
806
|
headerTruncationChangeHandler() {
|
807
|
+
var _a, _b;
|
791
808
|
if (this.columnHeaderTruncation) {
|
792
809
|
this.prevTableContainerWidth = 0;
|
793
810
|
}
|
794
811
|
else {
|
795
|
-
|
796
|
-
|
797
|
-
|
798
|
-
|
799
|
-
tooltip.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
|
800
|
-
}
|
812
|
+
(_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("th.column-header")) === null || _b === void 0 ? void 0 : _b.forEach((header) => {
|
813
|
+
var _a;
|
814
|
+
(_a = header
|
815
|
+
.querySelector(this.IC_TOOLTIP_STRING)) === null || _a === void 0 ? void 0 : _a.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
|
801
816
|
});
|
802
817
|
}
|
803
818
|
}
|
@@ -817,14 +832,17 @@ const DataTable = class {
|
|
817
832
|
this.previousItemsPerPage = this.rowsPerPage;
|
818
833
|
}
|
819
834
|
componentDidLoad() {
|
820
|
-
|
821
|
-
const
|
835
|
+
var _a, _b;
|
836
|
+
const tableElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("table");
|
837
|
+
const tableContainer = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(".table-container");
|
822
838
|
checkResizeObserver(this.runHeaderResizeObserver);
|
823
839
|
if (this.dataUpdated) {
|
824
840
|
this.dataUpdated = false;
|
825
841
|
}
|
826
|
-
if (
|
827
|
-
|
842
|
+
if (tableElement &&
|
843
|
+
tableContainer &&
|
844
|
+
(tableElement.clientHeight > tableContainer.clientHeight ||
|
845
|
+
tableElement.clientWidth > tableContainer.clientWidth)) {
|
828
846
|
this.scrollable = true;
|
829
847
|
}
|
830
848
|
if (this.loading) {
|
@@ -834,7 +852,8 @@ const DataTable = class {
|
|
834
852
|
if (this.truncationPattern) {
|
835
853
|
this.getTypographyElements().forEach((typographyEl) => {
|
836
854
|
const cellContainer = this.getCellContainer(typographyEl);
|
837
|
-
if (
|
855
|
+
if (cellContainer &&
|
856
|
+
!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
|
838
857
|
this.dataTruncation(typographyEl);
|
839
858
|
}
|
840
859
|
});
|
@@ -859,19 +878,23 @@ const DataTable = class {
|
|
859
878
|
this.adjustWidthForActionElement();
|
860
879
|
}
|
861
880
|
truncateUpdatedData() {
|
881
|
+
var _a;
|
862
882
|
if (this.dataUpdated) {
|
863
883
|
if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
864
884
|
this.getTypographyElements().forEach((typographyEl) => {
|
865
885
|
const truncWrapper = this.getTruncWrapper(typographyEl);
|
866
886
|
const cellContainer = this.getCellContainer(typographyEl);
|
867
|
-
if (
|
868
|
-
|
887
|
+
if (truncWrapper &&
|
888
|
+
cellContainer &&
|
889
|
+
cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >=
|
890
|
+
truncWrapper.scrollHeight) {
|
869
891
|
this.resetShowHideTruncation(typographyEl);
|
870
892
|
return;
|
871
893
|
}
|
872
894
|
setTimeout(() => {
|
873
895
|
// slight delay due to data rendering
|
874
|
-
if (
|
896
|
+
if (cellContainer &&
|
897
|
+
typographyEl.scrollHeight > cellContainer.clientHeight) {
|
875
898
|
this.addShowHideTruncation(cellContainer, typographyEl);
|
876
899
|
}
|
877
900
|
}, 150);
|
@@ -889,13 +912,15 @@ const DataTable = class {
|
|
889
912
|
if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
890
913
|
this.getTypographyElements().forEach((typographyEl) => {
|
891
914
|
const cellContainer = this.getCellContainer(typographyEl);
|
892
|
-
if (
|
893
|
-
this.
|
894
|
-
|
895
|
-
|
896
|
-
|
897
|
-
|
898
|
-
|
915
|
+
if (cellContainer) {
|
916
|
+
if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
|
917
|
+
this.createShowHideTruncation(typographyEl, cellContainer);
|
918
|
+
}
|
919
|
+
else {
|
920
|
+
typographyEl.resetTruncation().then(() => {
|
921
|
+
cellContainer.removeAttribute("style");
|
922
|
+
});
|
923
|
+
}
|
899
924
|
}
|
900
925
|
});
|
901
926
|
}
|
@@ -904,49 +929,48 @@ const DataTable = class {
|
|
904
929
|
// This function recalculates the tooltip truncation when the rowHeight has been set.
|
905
930
|
// This is in componentDidUpdate so a setTimeout is not used to wait for the render to be complete
|
906
931
|
if (this.rowHeightSet) {
|
907
|
-
const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
|
908
|
-
const hasAutoRowHeight = this.globalRowHeight === "auto";
|
909
932
|
this.getTypographyElements().forEach((typographyEl) => {
|
910
|
-
var _a;
|
933
|
+
var _a, _b;
|
911
934
|
const cellContainer = this.getCellContainer(typographyEl);
|
912
935
|
const tooltipEl = this.getTooltip(typographyEl);
|
913
|
-
if (
|
914
|
-
|
915
|
-
|
916
|
-
this.
|
917
|
-
|
936
|
+
if (cellContainer) {
|
937
|
+
if (this.globalRowHeight === "auto") {
|
938
|
+
cellContainer.style.height = "";
|
939
|
+
if (this.truncationPattern === this.TOOLTIP_STRING) {
|
940
|
+
this.removeTooltip(cellContainer, typographyEl, tooltipEl);
|
941
|
+
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
|
942
|
+
}
|
943
|
+
else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
944
|
+
this.resetShowHideTruncation(typographyEl);
|
945
|
+
}
|
946
|
+
return;
|
918
947
|
}
|
919
|
-
|
920
|
-
|
948
|
+
// If the set row height is bigger than the cell container even
|
949
|
+
// with textWrap, set the row height
|
950
|
+
if (!cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
|
951
|
+
!((_a = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.style) === null || _a === void 0 ? void 0 : _a.height) &&
|
952
|
+
this.getRowHeight(cellContainer) > cellContainer.clientHeight &&
|
953
|
+
!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
|
954
|
+
cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
|
921
955
|
}
|
922
|
-
|
923
|
-
|
924
|
-
|
925
|
-
|
926
|
-
|
927
|
-
|
928
|
-
|
929
|
-
|
930
|
-
|
931
|
-
|
932
|
-
|
933
|
-
|
934
|
-
if (this.truncationPattern) {
|
935
|
-
// If the set row height is bigger than the typography truncation wrapper
|
936
|
-
// scroll height, remove see more / see less button
|
937
|
-
if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
938
|
-
const truncWrapper = this.getTruncWrapper(typographyEl);
|
939
|
-
const showHideBtn = typographyEl.shadowRoot.querySelector("button");
|
940
|
-
if (showHideBtn &&
|
941
|
-
(truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight) <= cellContainer.clientHeight) {
|
942
|
-
this.resetShowHideTruncation(typographyEl);
|
943
|
-
return;
|
956
|
+
if (this.truncationPattern) {
|
957
|
+
// If the set row height is bigger than the typography truncation wrapper
|
958
|
+
// scroll height, remove see more / see less button
|
959
|
+
if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
960
|
+
const truncWrapper = this.getTruncWrapper(typographyEl);
|
961
|
+
const showHideBtn = (_b = typographyEl.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("button");
|
962
|
+
if (showHideBtn &&
|
963
|
+
truncWrapper &&
|
964
|
+
truncWrapper.scrollHeight <= cellContainer.clientHeight) {
|
965
|
+
this.resetShowHideTruncation(typographyEl);
|
966
|
+
return;
|
967
|
+
}
|
944
968
|
}
|
969
|
+
this.truncate(typographyEl, cellContainer, tooltipEl);
|
970
|
+
}
|
971
|
+
else {
|
972
|
+
this.updateSetRowHeight(typographyEl);
|
945
973
|
}
|
946
|
-
this.truncate(typographyEl, cellContainer, tooltipEl);
|
947
|
-
}
|
948
|
-
else {
|
949
|
-
this.updateSetRowHeight(typographyEl);
|
950
974
|
}
|
951
975
|
});
|
952
976
|
this.rowHeightSet = false;
|
@@ -954,16 +978,15 @@ const DataTable = class {
|
|
954
978
|
// Only run truncation on the new rows
|
955
979
|
// when the number of items per page has increased
|
956
980
|
if (this.itemsPerPageChange) {
|
957
|
-
const allRows = this.el.shadowRoot.querySelectorAll(".table-row");
|
958
|
-
if (this.rowsPerPage > this.previousItemsPerPage) {
|
981
|
+
const allRows = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".table-row");
|
982
|
+
if (allRows && this.rowsPerPage > this.previousItemsPerPage) {
|
959
983
|
const newRows = Array.from(allRows).slice(this.previousItemsPerPage);
|
960
984
|
newRows.forEach((row) => {
|
961
|
-
row
|
962
|
-
.querySelectorAll(this.IC_TYPOGRAPHY_STRING)
|
963
|
-
.forEach((typographyEl) => {
|
985
|
+
row.querySelectorAll("ic-typography").forEach((typographyEl) => {
|
964
986
|
const cellContainer = this.getCellContainer(typographyEl);
|
965
987
|
const tooltipEl = this.getTooltip(typographyEl);
|
966
|
-
|
988
|
+
if (cellContainer)
|
989
|
+
this.truncate(typographyEl, cellContainer, tooltipEl);
|
967
990
|
});
|
968
991
|
});
|
969
992
|
}
|
@@ -977,9 +1000,11 @@ const DataTable = class {
|
|
977
1000
|
// set truncation to see more if opened and next/previous page is pressed
|
978
1001
|
if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
979
1002
|
this.getTypographyElements().forEach((typographyEl) => {
|
1003
|
+
var _a;
|
980
1004
|
const cellContainer = this.getCellContainer(typographyEl);
|
981
|
-
const showHideBtn = typographyEl.shadowRoot.querySelector("button");
|
982
|
-
if (
|
1005
|
+
const showHideBtn = (_a = typographyEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button");
|
1006
|
+
if (cellContainer &&
|
1007
|
+
(typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > cellContainer.clientHeight &&
|
983
1008
|
!showHideBtn) {
|
984
1009
|
this.addShowHideTruncation(cellContainer, typographyEl);
|
985
1010
|
}
|
@@ -991,7 +1016,8 @@ const DataTable = class {
|
|
991
1016
|
this.getTypographyElements().forEach((typographyEl) => {
|
992
1017
|
const cellContainer = this.getCellContainer(typographyEl);
|
993
1018
|
const tooltipEl = this.getTooltip(typographyEl);
|
994
|
-
|
1019
|
+
if (cellContainer)
|
1020
|
+
this.truncate(typographyEl, cellContainer, tooltipEl);
|
995
1021
|
});
|
996
1022
|
this.densityUpdate = false;
|
997
1023
|
}
|
@@ -1000,7 +1026,8 @@ const DataTable = class {
|
|
1000
1026
|
this.getTypographyElements().forEach((typographyEl) => {
|
1001
1027
|
const cellContainer = this.getCellContainer(typographyEl);
|
1002
1028
|
const tooltipEl = this.getTooltip(typographyEl);
|
1003
|
-
if (
|
1029
|
+
if (cellContainer &&
|
1030
|
+
typographyEl.scrollHeight > cellContainer.clientHeight) {
|
1004
1031
|
this.addTooltipTruncation(typographyEl, cellContainer, tooltipEl);
|
1005
1032
|
}
|
1006
1033
|
});
|
@@ -1009,29 +1036,24 @@ const DataTable = class {
|
|
1009
1036
|
this.getTypographyElements().forEach((typographyEl) => {
|
1010
1037
|
const truncWrapper = this.getTruncWrapper(typographyEl);
|
1011
1038
|
const cellContainer = this.getCellContainer(typographyEl);
|
1012
|
-
if (
|
1013
|
-
(truncWrapper
|
1014
|
-
|
1015
|
-
|
1016
|
-
|
1017
|
-
|
1018
|
-
|
1039
|
+
if (cellContainer) {
|
1040
|
+
if (truncWrapper &&
|
1041
|
+
(cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >
|
1042
|
+
truncWrapper.scrollHeight) {
|
1043
|
+
this.resetShowHideTruncation(typographyEl);
|
1044
|
+
return;
|
1045
|
+
}
|
1046
|
+
if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
|
1047
|
+
this.addShowHideTruncation(cellContainer, typographyEl);
|
1048
|
+
}
|
1019
1049
|
}
|
1020
1050
|
});
|
1021
1051
|
}
|
1022
1052
|
}
|
1023
1053
|
}
|
1024
|
-
createShowHideTruncation(typographyEl, cellContainer, descriptionHeight) {
|
1054
|
+
createShowHideTruncation(typographyEl, cellContainer, descriptionHeight = 0) {
|
1025
1055
|
typographyEl.checkMaxLines(typographyEl.scrollHeight);
|
1026
|
-
typographyEl.setAttribute("max-lines", `${
|
1027
|
-
if (cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
|
1028
|
-
descriptionHeight) {
|
1029
|
-
typographyEl.setAttribute("max-lines", `${Math.floor(((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - descriptionHeight) /
|
1030
|
-
this.DEFAULT_LINE_HEIGHT)}`);
|
1031
|
-
}
|
1032
|
-
else {
|
1033
|
-
typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
|
1034
|
-
}
|
1056
|
+
typographyEl.setAttribute("max-lines", `${this.getLines(cellContainer.clientHeight - descriptionHeight)}`);
|
1035
1057
|
typographyEl.setShowHideExpanded(false);
|
1036
1058
|
cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
|
1037
1059
|
}
|
@@ -1050,26 +1072,30 @@ const DataTable = class {
|
|
1050
1072
|
handleTypographyTruncationExpandToggle({ detail, }) {
|
1051
1073
|
const { expanded, typographyEl } = detail;
|
1052
1074
|
const cellContainer = this.getCellContainer(typographyEl);
|
1053
|
-
if (cellContainer.style.getPropertyValue(this.ROW_HEIGHT_CSS_VARIABLE) &&
|
1075
|
+
if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.style.getPropertyValue(this.ROW_HEIGHT_CSS_VARIABLE)) &&
|
1054
1076
|
expanded) {
|
1055
1077
|
cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, "inherit");
|
1056
1078
|
}
|
1057
1079
|
}
|
1058
1080
|
handlePageChange({ detail, target }) {
|
1081
|
+
var _a;
|
1059
1082
|
if (target.parentElement !== this.el) {
|
1060
1083
|
this.fromRow = (detail.value - 1) * this.rowsPerPage;
|
1061
1084
|
this.toRow = this.fromRow + this.rowsPerPage;
|
1062
|
-
const tableRowsContainer = this.el.shadowRoot.querySelector(".table-row-container");
|
1063
|
-
if (
|
1064
|
-
|
1065
|
-
|
1066
|
-
|
1067
|
-
|
1068
|
-
|
1069
|
-
|
1070
|
-
|
1071
|
-
|
1085
|
+
const tableRowsContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".table-row-container");
|
1086
|
+
if (tableRowsContainer) {
|
1087
|
+
if (this.previousRowsPerPage === this.rowsPerPage) {
|
1088
|
+
tableRowsContainer.scrollTop = 0;
|
1089
|
+
}
|
1090
|
+
else if (this.previousRowsPerPage < this.rowsPerPage) {
|
1091
|
+
tableRowsContainer.scrollTop = this.scrollOffset;
|
1092
|
+
this.previousRowsPerPage = this.rowsPerPage;
|
1093
|
+
}
|
1094
|
+
else {
|
1095
|
+
this.previousRowsPerPage = this.rowsPerPage;
|
1096
|
+
}
|
1072
1097
|
}
|
1098
|
+
this.selectedRows = [];
|
1073
1099
|
}
|
1074
1100
|
if (!this.initialLoad && this.previousPaginationPage !== detail.value) {
|
1075
1101
|
// This is to prevent icPageChange from triggering truncation on first load
|
@@ -1088,10 +1114,6 @@ const DataTable = class {
|
|
1088
1114
|
handleDensityChange(ev) {
|
1089
1115
|
this.density = ev.detail.value;
|
1090
1116
|
}
|
1091
|
-
clickListener(ev) {
|
1092
|
-
if (ev.target !== this.el)
|
1093
|
-
this.selectedRow = undefined;
|
1094
|
-
}
|
1095
1117
|
loadingHandler(newValue) {
|
1096
1118
|
if (newValue)
|
1097
1119
|
this.startLoadingTimer();
|
@@ -1109,7 +1131,8 @@ const DataTable = class {
|
|
1109
1131
|
this.getTypographyElements().forEach((typographyEl) => {
|
1110
1132
|
const cellContainer = this.getCellContainer(typographyEl);
|
1111
1133
|
const tooltip = this.getTooltip(typographyEl);
|
1112
|
-
|
1134
|
+
if (cellContainer)
|
1135
|
+
this.truncate(typographyEl, cellContainer, tooltip);
|
1113
1136
|
});
|
1114
1137
|
}
|
1115
1138
|
if (newValue === this.SHOW_HIDE_STRING) {
|
@@ -1119,17 +1142,20 @@ const DataTable = class {
|
|
1119
1142
|
this.getTypographyElements().forEach((typographyEl) => {
|
1120
1143
|
const truncWrapper = this.getTruncWrapper(typographyEl);
|
1121
1144
|
const cellContainer = this.getCellContainer(typographyEl);
|
1122
|
-
if (
|
1123
|
-
(truncWrapper
|
1124
|
-
|
1125
|
-
|
1126
|
-
|
1127
|
-
|
1128
|
-
// slight delay due to data rendering
|
1129
|
-
if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
|
1130
|
-
this.addShowHideTruncation(cellContainer, typographyEl);
|
1145
|
+
if (cellContainer) {
|
1146
|
+
if (truncWrapper &&
|
1147
|
+
cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >
|
1148
|
+
truncWrapper.scrollHeight) {
|
1149
|
+
this.resetShowHideTruncation(typographyEl);
|
1150
|
+
return;
|
1131
1151
|
}
|
1132
|
-
|
1152
|
+
setTimeout(() => {
|
1153
|
+
// slight delay due to data rendering
|
1154
|
+
if (typographyEl.scrollHeight > cellContainer.clientHeight) {
|
1155
|
+
this.addShowHideTruncation(cellContainer, typographyEl);
|
1156
|
+
}
|
1157
|
+
}, 150);
|
1158
|
+
}
|
1133
1159
|
});
|
1134
1160
|
}
|
1135
1161
|
this.truncationPatternUpdated = true;
|
@@ -1153,10 +1179,12 @@ const DataTable = class {
|
|
1153
1179
|
if (typographyEl) {
|
1154
1180
|
const truncWrapper = this.getTruncWrapper(typographyEl);
|
1155
1181
|
const cellContainer = this.getCellContainer(typographyEl);
|
1156
|
-
if ((
|
1182
|
+
if (!(cellContainer && truncWrapper))
|
1183
|
+
return;
|
1184
|
+
if (truncWrapper.scrollHeight > cellContainer.clientHeight &&
|
1157
1185
|
!isEmptyString(typographyEl.getAttribute("max-lines")) &&
|
1158
1186
|
Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT) !==
|
1159
|
-
|
1187
|
+
Number(typographyEl.getAttribute("max-lines"))) {
|
1160
1188
|
typographyEl.checkMaxLines(truncWrapper.scrollHeight);
|
1161
1189
|
typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
|
1162
1190
|
typographyEl.setShowHideExpanded(false);
|
@@ -1174,7 +1202,7 @@ const DataTable = class {
|
|
1174
1202
|
this.getTypographyElements().forEach((typographyEl) => {
|
1175
1203
|
const cellContainer = this.getCellContainer(typographyEl);
|
1176
1204
|
typographyEl.resetTruncation().then(() => {
|
1177
|
-
if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
|
1205
|
+
if (cellContainer && !typographyEl.closest(this.TEXT_WRAP_CLASS)) {
|
1178
1206
|
cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
|
1179
1207
|
}
|
1180
1208
|
});
|
@@ -1195,7 +1223,7 @@ const DataTable = class {
|
|
1195
1223
|
*/
|
1196
1224
|
async resetRowHeights(rowHeight) {
|
1197
1225
|
this.globalRowHeight = rowHeight || "auto";
|
1198
|
-
this.variableRowHeight =
|
1226
|
+
this.variableRowHeight = undefined;
|
1199
1227
|
}
|
1200
1228
|
showLoadingIndicator() {
|
1201
1229
|
var _a, _b, _c;
|
@@ -1239,35 +1267,28 @@ const DataTable = class {
|
|
1239
1267
|
}
|
1240
1268
|
}
|
1241
1269
|
removeTooltip(cellContainer, typographyEl, tooltip) {
|
1242
|
-
|
1243
|
-
|
1244
|
-
|
1245
|
-
|
1246
|
-
}
|
1270
|
+
var _a;
|
1271
|
+
(_a = cellContainer
|
1272
|
+
.querySelector(this.CELL_TEXT_WRAPPER_STRING)) === null || _a === void 0 ? void 0 : _a.prepend(typographyEl);
|
1273
|
+
tooltip === null || tooltip === void 0 ? void 0 : tooltip.remove();
|
1247
1274
|
}
|
1248
1275
|
addLineClampCSS(typographyEl, cellContainer) {
|
1249
1276
|
var _a, _b;
|
1250
1277
|
const descriptionCellHeight = (_a = cellContainer.querySelector(this.CELL_DESCRIPTION_STRING)) === null || _a === void 0 ? void 0 : _a.clientHeight;
|
1278
|
+
const cellContainerHeight = cellContainer.clientHeight;
|
1279
|
+
let totalHeight = cellContainerHeight;
|
1251
1280
|
if (cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
|
1252
|
-
|
1253
|
-
|
1254
|
-
|
1255
|
-
|
1256
|
-
|
1257
|
-
|
1258
|
-
else {
|
1259
|
-
iconHeight = 0;
|
1260
|
-
}
|
1261
|
-
const height = (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) -
|
1262
|
-
((_b = cellContainer.querySelector(this.CELL_DESCRIPTION_STRING)) === null || _b === void 0 ? void 0 : _b.clientHeight) -
|
1263
|
-
iconHeight;
|
1264
|
-
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: ${this.getLines(height || 0)}`);
|
1265
|
-
}
|
1266
|
-
else {
|
1267
|
-
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: ${this.getLines(cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)}`);
|
1281
|
+
descriptionCellHeight &&
|
1282
|
+
cellContainerHeight > descriptionCellHeight) {
|
1283
|
+
const iconHeight = (deviceSizeMatches(IC_DEVICE_SIZES.XS) &&
|
1284
|
+
((_b = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.querySelector(".icon")) === null || _b === void 0 ? void 0 : _b.clientHeight)) ||
|
1285
|
+
0;
|
1286
|
+
totalHeight = totalHeight - descriptionCellHeight - iconHeight;
|
1268
1287
|
}
|
1288
|
+
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: ${this.getLines(totalHeight || 0)}`);
|
1269
1289
|
}
|
1270
1290
|
createTruncationTooltip(typographyEl, cellContainer) {
|
1291
|
+
var _a;
|
1271
1292
|
const tooltipEl = document.createElement(this.IC_TOOLTIP_STRING);
|
1272
1293
|
tooltipEl.setAttribute("target", typographyEl.id);
|
1273
1294
|
tooltipEl.setAttribute("label", typographyEl.textContent);
|
@@ -1276,25 +1297,38 @@ const DataTable = class {
|
|
1276
1297
|
// This might need reverting back to absolute if the tooltip doesn't dynamically position itself correctly
|
1277
1298
|
strategy: "fixed",
|
1278
1299
|
});
|
1279
|
-
|
1280
|
-
|
1300
|
+
(_a = cellContainer
|
1301
|
+
.querySelector(this.CELL_TEXT_WRAPPER_STRING)) === null || _a === void 0 ? void 0 : _a.prepend(tooltipEl);
|
1281
1302
|
tooltipEl.prepend(typographyEl);
|
1282
1303
|
}
|
1283
1304
|
render() {
|
1284
1305
|
var _a, _b;
|
1285
|
-
const { caption, createColumnHeaders, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationBarOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumn, sortedColumnOrder, stickyColumnHeaders, updateScrollOffset, updating, theme, } = this;
|
1286
|
-
|
1306
|
+
const { caption, columns, createColumnHeaders, createUpdatingIndicator, data, density, hideColumnHeaders, rowSelection, loading, loadingOptions, paginationBarOptions, rowsPerPage, scrollable, scrollOffset, selectAllRows, selectedRows, showPagination, sortable, sortedColumn, sortedColumnOrder, stickyColumnHeaders, updateScrollOffset, updating, tableLayout, theme, } = this;
|
1307
|
+
const rowsSelected = selectedRows.length > 0;
|
1308
|
+
const allRowsSelected = selectedRows.length === (showPagination ? rowsPerPage : data === null || data === void 0 ? void 0 : data.length);
|
1309
|
+
const headerCheckboxLabelState = rowsSelected
|
1310
|
+
? allRowsSelected
|
1311
|
+
? "deselect all"
|
1312
|
+
: "select all remaining"
|
1313
|
+
: "select all";
|
1314
|
+
return (h(Host, { key: 'c70d98425c01e5f0d7b23d12a0a22fcde6bfa8aa', style: Object.assign({}, this.setTableDimensions()), class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: 'b7411965f1bd64038922da836d86791d9fce0766', class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { key: 'de14d3c9613fc5f216f9318c8b584a4fe6d7d0b9', name: "title-bar" }), h("div", { key: 'c28d8074bb81266c7104ce842b2ea0e415ea7576', class: {
|
1287
1315
|
["table-row-container"]: true,
|
1288
1316
|
scrollable,
|
1289
|
-
}, tabIndex: scrollable ? 0 :
|
1290
|
-
|
1291
|
-
} }, h("caption", { key: '
|
1317
|
+
}, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: '283aac0915752eb13c7651fe2594cbbce7eb1164', style: {
|
1318
|
+
"--table-layout": tableLayout,
|
1319
|
+
} }, h("caption", { key: '9d49941bb4a1f14337af61c35057895a32466c0e', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: '970d0ecda5d04b06b394f0f1cf1e58dfdd93660f', class: {
|
1292
1320
|
["column-header-sticky"]: stickyColumnHeaders,
|
1293
1321
|
["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
|
1294
|
-
} }, h("tr", { key: '
|
1322
|
+
} }, h("tr", { key: 'dd2b7e0e731a8652d726b98c4d4b53de1d4bc89a' }, rowSelection && data && (h("th", { key: 'd1c97faa5830737aa4c9d7020b7bf89a2357d127', class: {
|
1323
|
+
"column-header": true,
|
1324
|
+
"checkbox-cell": true,
|
1325
|
+
"updating-state-headers": updating && !loading,
|
1326
|
+
[`table-density-${density}`]: this.notDefaultDensity(),
|
1327
|
+
} }, h("div", { key: '93aad327435bc6bc944fc3c7e141c0281beb421b', class: "checkbox-wrapper" }, h("ic-checkbox", { key: '9f984d73bf5172d756d1553c631a571adad238f6', class: "ic-data-table-checkbox", checked: rowsSelected && allRowsSelected, disabled: updating || loading, hideLabel: true, indeterminate: rowsSelected && !allRowsSelected, label: `${caption} ${headerCheckboxLabelState} rows`, nativeIndeterminateBehaviour: true, onIcCheck: () => selectAllRows(), size: density === "dense" ? "small" : "medium", value: caption })))), createColumnHeaders()))), updating &&
|
1295
1328
|
!loading &&
|
1296
|
-
(hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(
|
1297
|
-
? `${((_b =
|
1329
|
+
(hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), this.renderEmptyState(loading, data, loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.overlay)), h("div", { key: '3b3d4811530dabad832180f06631b32724b7c3c8', "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { key: '4efe794f7f5e48ff1ad762780b5a8e3f291cb8f0', class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { alignment: paginationBarOptions.alignment, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, hideRangeLabel: paginationBarOptions.hideRangeLabel, itemLabel: paginationBarOptions.itemLabel, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, monochrome: paginationBarOptions.monochrome, pageLabel: paginationBarOptions.pageLabel, rangeLabelType: paginationBarOptions.rangeLabelType, selectedItemsPerPage: paginationBarOptions.selectedItemsPerPage, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange, showGoToPageControl: paginationBarOptions.showGoToPageControl, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, theme: theme, totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type })))), sortable && (h("div", { key: '2eadf2de56bcbccfdb70707846a5eaa920cba050', class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
|
1330
|
+
? `${((_b = columns.find((col) => col.key === sortedColumn)) === null || _b === void 0 ? void 0 : _b.title) ||
|
1331
|
+
sortedColumn} sorted ${sortedColumnOrder}`
|
1298
1332
|
: "table unsorted")))));
|
1299
1333
|
}
|
1300
1334
|
get el() { return getElement(this); }
|