@ukic/canary-web-components 3.0.0-canary.14 → 3.0.0-canary.16
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/README.md +1 -1
- 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-199b92d5.js} +42 -2
- package/dist/cjs/helpers-199b92d5.js.map +1 -0
- package/dist/cjs/{helpers-32016c21.js → helpers-d01564f7.js} +15 -15
- 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 +3 -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 +130 -148
- package/dist/cjs/ic-date-input.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-date-picker.cjs.entry.js +87 -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 +2 -2
- package/dist/cjs/ic-navigation-button.cjs.entry.js +2 -2
- package/dist/cjs/ic-navigation-group.cjs.entry.js +25 -22
- 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 +7 -7
- 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 +52 -29
- package/dist/cjs/ic-pagination_4.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-popover-menu.cjs.entry.js +6 -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 +7 -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 +3 -3
- 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 +16 -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 +35 -42
- package/dist/cjs/ic-tree-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tree-view.cjs.entry.js +25 -21
- 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 +16 -0
- 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 +166 -183
- 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 +1 -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 +109 -92
- package/dist/collection/components/ic-date-picker/ic-date-picker.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.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 +45 -52
- 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 +29 -25
- package/dist/collection/components/ic-tree-view/ic-tree-view.js.map +1 -1
- 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 +40 -1
- package/dist/components/helpers.js.map +1 -1
- package/dist/components/helpers2.js +13 -13
- 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 +1 -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 +146 -210
- package/dist/components/ic-date-input2.js.map +1 -1
- package/dist/components/ic-date-picker.js +84 -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-footer.js +1 -1
- package/dist/components/ic-horizontal-scroll2.js +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-navigation-group.js +25 -21
- package/dist/components/ic-navigation-group.js.map +1 -1
- package/dist/components/ic-navigation-item.js +1 -1
- package/dist/components/ic-navigation-menu2.js +6 -6
- 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 +4 -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 +2 -2
- 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 +6 -6
- package/dist/components/ic-select2.js.map +1 -1
- package/dist/components/ic-side-navigation.js +6 -6
- 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 +2 -2
- 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 +14 -14
- package/dist/components/ic-step.js.map +1 -1
- package/dist/components/ic-stepper.js +3 -3
- 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 +42 -15
- package/dist/components/ic-text-field2.js.map +1 -1
- package/dist/components/ic-theme.js +2 -2
- 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 +4 -4
- 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 +33 -40
- package/dist/components/ic-tree-item.js.map +1 -1
- package/dist/components/ic-tree-view.js +23 -19
- package/dist/components/ic-tree-view.js.map +1 -1
- package/dist/core/core.css +358 -250
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.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-a30d165d.entry.js → p-123bd8ce.entry.js} +2 -2
- package/dist/core/p-123bd8ce.entry.js.map +1 -0
- package/dist/core/{p-1334a78f.entry.js → p-12d4803e.entry.js} +2 -2
- package/dist/core/{p-8d73a3cc.entry.js → p-19c4cc6c.entry.js} +2 -2
- package/dist/core/p-19c4cc6c.entry.js.map +1 -0
- package/dist/core/p-19ecd2a6.entry.js +2 -0
- package/dist/core/p-19ecd2a6.entry.js.map +1 -0
- package/dist/core/{p-d154b26c.entry.js → p-1b31a720.entry.js} +2 -2
- package/dist/core/{p-a4582939.entry.js → p-1bfead5b.entry.js} +2 -2
- package/dist/core/p-1bfead5b.entry.js.map +1 -0
- package/dist/core/{p-08fd225f.entry.js → p-214a48c6.entry.js} +2 -2
- package/dist/core/p-236dc1a6.entry.js +2 -0
- package/dist/core/p-236dc1a6.entry.js.map +1 -0
- package/dist/core/{p-0848efa2.entry.js → p-2c7e9e71.entry.js} +2 -2
- package/dist/core/{p-ef25bb6d.entry.js → p-2d9c36a6.entry.js} +2 -2
- package/dist/core/{p-ef25bb6d.entry.js.map → p-2d9c36a6.entry.js.map} +1 -1
- package/dist/core/{p-b8aa37f9.entry.js → p-336be00c.entry.js} +2 -2
- 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-272352cb.entry.js → p-38f612b0.entry.js} +2 -2
- package/dist/core/p-3cf6ca89.entry.js +2 -0
- package/dist/core/p-3cf6ca89.entry.js.map +1 -0
- package/dist/core/{p-4da17eda.entry.js → p-3ee70c45.entry.js} +2 -2
- package/dist/core/{p-762a4d7c.entry.js → p-46f64dc5.entry.js} +2 -2
- package/dist/core/p-48465394.entry.js +2 -0
- package/dist/core/{p-4e5934f3.entry.js.map → p-48465394.entry.js.map} +1 -1
- 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-520dce89.entry.js +2 -0
- package/dist/core/p-520dce89.entry.js.map +1 -0
- package/dist/core/{p-22e0ed96.entry.js → p-5bd43e19.entry.js} +2 -2
- package/dist/core/{p-da798f58.entry.js → p-5ec11974.entry.js} +2 -2
- package/dist/core/p-643a94c2.entry.js +2 -0
- package/dist/core/p-643a94c2.entry.js.map +1 -0
- package/dist/core/{p-be5ad372.entry.js → p-65ddc948.entry.js} +2 -2
- package/dist/core/p-69f6db9f.entry.js +2 -0
- package/dist/core/p-69f6db9f.entry.js.map +1 -0
- package/dist/core/p-6cfd6b56.entry.js +2 -0
- package/dist/core/{p-144b1dee.entry.js.map → p-6cfd6b56.entry.js.map} +1 -1
- 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-7b13ccd0.entry.js +2 -0
- package/dist/core/p-7b13ccd0.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-e13b43b1.entry.js → p-8402fcf7.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-87c92ab1.entry.js +2 -0
- package/dist/core/p-87c92ab1.entry.js.map +1 -0
- package/dist/core/{p-0e3cb8d0.entry.js → p-8856dff4.entry.js} +2 -2
- package/dist/core/{p-00135a74.js → p-8e4e97b4.js} +3 -3
- package/dist/core/p-8e4e97b4.js.map +1 -0
- package/dist/core/{p-32720276.entry.js → p-91b8ee39.entry.js} +2 -2
- package/dist/core/{p-fd42f129.entry.js → p-91d5efc0.entry.js} +2 -2
- package/dist/core/p-91d5efc0.entry.js.map +1 -0
- package/dist/core/p-944ea274.entry.js +2 -0
- package/dist/core/p-944ea274.entry.js.map +1 -0
- package/dist/core/p-951669ca.entry.js +2 -0
- package/dist/core/p-951669ca.entry.js.map +1 -0
- package/dist/core/{p-b6db0cc1.entry.js → p-9bf0ce9e.entry.js} +2 -2
- package/dist/core/{p-afc4ce53.entry.js → p-9e5e6070.entry.js} +2 -2
- package/dist/core/{p-a214a9f8.entry.js → p-a12dd148.entry.js} +2 -2
- package/dist/core/{p-a214a9f8.entry.js.map → p-a12dd148.entry.js.map} +1 -1
- package/dist/core/p-a2fcea60.entry.js +2 -0
- package/dist/core/p-a2fcea60.entry.js.map +1 -0
- package/dist/core/{p-60a0c711.entry.js → p-a6031c41.entry.js} +2 -2
- package/dist/core/{p-60a0c711.entry.js.map → p-a6031c41.entry.js.map} +1 -1
- package/dist/core/{p-3d1ba098.entry.js → p-b006976c.entry.js} +2 -2
- package/dist/core/p-b17f6b1d.entry.js +2 -0
- package/dist/core/p-b17f6b1d.entry.js.map +1 -0
- package/dist/core/{p-0c3bd9e6.entry.js → p-b334a20d.entry.js} +2 -2
- package/dist/core/p-b603b9ef.entry.js +2 -0
- package/dist/core/p-b603b9ef.entry.js.map +1 -0
- package/dist/core/{p-3e9564b5.entry.js → p-b88ae211.entry.js} +2 -2
- package/dist/core/{p-5d85bd73.entry.js → p-b953b22f.entry.js} +2 -2
- package/dist/core/{p-5d85bd73.entry.js.map → p-b953b22f.entry.js.map} +1 -1
- package/dist/core/p-b9e73154.js +2 -0
- package/dist/core/p-b9e73154.js.map +1 -0
- package/dist/core/p-bb9142fe.entry.js +2 -0
- package/dist/core/{p-a13dc5ba.entry.js.map → p-bb9142fe.entry.js.map} +1 -1
- package/dist/core/{p-48163a2a.entry.js → p-c1dbb35b.entry.js} +2 -2
- package/dist/core/{p-48163a2a.entry.js.map → p-c1dbb35b.entry.js.map} +1 -1
- package/dist/core/{p-0fd762bf.entry.js → p-c1f653d4.entry.js} +2 -2
- package/dist/core/p-c1f653d4.entry.js.map +1 -0
- package/dist/core/{p-96551ddf.entry.js → p-c3f26b24.entry.js} +2 -2
- package/dist/core/p-c86ca475.js +2 -0
- package/dist/core/p-c86ca475.js.map +1 -0
- package/dist/core/{p-fd006a9b.entry.js → p-ca5d3a21.entry.js} +2 -2
- package/dist/core/{p-f541034c.entry.js → p-cd0dbcea.entry.js} +2 -2
- package/dist/core/p-cda2a461.entry.js +2 -0
- package/dist/core/p-cda2a461.entry.js.map +1 -0
- package/dist/core/p-ed416362.entry.js +2 -0
- package/dist/core/p-ed416362.entry.js.map +1 -0
- package/dist/core/{p-b17e7059.entry.js → p-f2beca5c.entry.js} +2 -2
- package/dist/core/{p-b17e7059.entry.js.map → p-f2beca5c.entry.js.map} +1 -1
- package/dist/core/p-f3bb5006.entry.js +2 -0
- package/dist/core/p-f3bb5006.entry.js.map +1 -0
- package/dist/core/{p-895a3eb1.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/core/{p-9f4fa820.entry.js → p-fa18f9c6.entry.js} +2 -2
- package/dist/core/{p-9f4fa820.entry.js.map → p-fa18f9c6.entry.js.map} +1 -1
- package/dist/core/p-fb01a001.entry.js +2 -0
- package/dist/core/p-fb01a001.entry.js.map +1 -0
- 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-9fe45194.js} +42 -3
- package/dist/esm/helpers-9fe45194.js.map +1 -0
- package/dist/esm/{helpers-5479985d.js → helpers-ddc2008a.js} +16 -16
- 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 +3 -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 +130 -148
- package/dist/esm/ic-date-input.entry.js.map +1 -1
- package/dist/esm/ic-date-picker.entry.js +87 -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 +2 -2
- package/dist/esm/ic-navigation-button.entry.js +2 -2
- package/dist/esm/ic-navigation-group.entry.js +25 -22
- 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 +7 -7
- 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 +52 -29
- package/dist/esm/ic-pagination_4.entry.js.map +1 -1
- package/dist/esm/ic-popover-menu.entry.js +6 -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 +7 -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 +3 -3
- 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 +16 -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 +35 -42
- package/dist/esm/ic-tree-item.entry.js.map +1 -1
- package/dist/esm/ic-tree-view.entry.js +25 -21
- 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 +34 -28
- package/dist/types/components/ic-date-picker/ic-date-picker.d.ts +14 -12
- 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-pagination-bar/ic-pagination-bar.d.ts +2 -2
- package/dist/types/components/ic-tree-item/ic-tree-item.d.ts +3 -3
- package/dist/types/components/ic-tree-view/ic-tree-view.d.ts +4 -4
- package/dist/types/components.d.ts +95 -72
- package/dist/types/utils/date-helpers.d.ts +4 -4
- package/dist/types/utils/helpers.d.ts +6 -15
- package/hydrate/index.js +898 -851
- package/hydrate/index.mjs +898 -851
- package/package.json +3 -3
- package/dist/cjs/date-helpers-c9551119.js.map +0 -1
- package/dist/cjs/helpers-32016c21.js.map +0 -1
- package/dist/cjs/helpers-fc51fdcb.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-0ad472d0.entry.js +0 -2
- package/dist/core/p-0ad472d0.entry.js.map +0 -1
- package/dist/core/p-0c97a53d.entry.js +0 -2
- package/dist/core/p-0c97a53d.entry.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-0f6b9686.js +0 -2
- package/dist/core/p-0f6b9686.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-250bf568.entry.js +0 -2
- package/dist/core/p-250bf568.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-4e5934f3.entry.js +0 -2
- package/dist/core/p-4f00aa91.entry.js +0 -2
- package/dist/core/p-4f00aa91.entry.js.map +0 -1
- package/dist/core/p-54e01fad.entry.js +0 -2
- package/dist/core/p-54e01fad.entry.js.map +0 -1
- package/dist/core/p-6040a025.entry.js +0 -2
- package/dist/core/p-6040a025.entry.js.map +0 -1
- package/dist/core/p-62f7f2bd.entry.js +0 -2
- package/dist/core/p-62f7f2bd.entry.js.map +0 -1
- package/dist/core/p-6eaf585a.entry.js +0 -2
- package/dist/core/p-6eaf585a.entry.js.map +0 -1
- package/dist/core/p-72310da8.js +0 -2
- package/dist/core/p-72310da8.js.map +0 -1
- package/dist/core/p-836d302a.entry.js +0 -2
- package/dist/core/p-836d302a.entry.js.map +0 -1
- package/dist/core/p-881bb783.entry.js +0 -2
- package/dist/core/p-881bb783.entry.js.map +0 -1
- package/dist/core/p-895a3eb1.entry.js.map +0 -1
- package/dist/core/p-8d73a3cc.entry.js.map +0 -1
- package/dist/core/p-9a46b1e5.entry.js +0 -2
- package/dist/core/p-9a46b1e5.entry.js.map +0 -1
- package/dist/core/p-a13dc5ba.entry.js +0 -2
- package/dist/core/p-a30d165d.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-c0687222.entry.js +0 -2
- package/dist/core/p-c0687222.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-c4f7e479.entry.js +0 -2
- package/dist/core/p-c4f7e479.entry.js.map +0 -1
- package/dist/core/p-fb11ce9b.entry.js +0 -2
- package/dist/core/p-fb11ce9b.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/esm/date-helpers-0e5e32a7.js.map +0 -1
- package/dist/esm/helpers-5479985d.js.map +0 -1
- package/dist/esm/helpers-bbab69a2.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-1334a78f.entry.js.map → p-12d4803e.entry.js.map} +0 -0
- /package/dist/core/{p-d154b26c.entry.js.map → p-1b31a720.entry.js.map} +0 -0
- /package/dist/core/{p-08fd225f.entry.js.map → p-214a48c6.entry.js.map} +0 -0
- /package/dist/core/{p-0848efa2.entry.js.map → p-2c7e9e71.entry.js.map} +0 -0
- /package/dist/core/{p-b8aa37f9.entry.js.map → p-336be00c.entry.js.map} +0 -0
- /package/dist/core/{p-272352cb.entry.js.map → p-38f612b0.entry.js.map} +0 -0
- /package/dist/core/{p-4da17eda.entry.js.map → p-3ee70c45.entry.js.map} +0 -0
- /package/dist/core/{p-762a4d7c.entry.js.map → p-46f64dc5.entry.js.map} +0 -0
- /package/dist/core/{p-22e0ed96.entry.js.map → p-5bd43e19.entry.js.map} +0 -0
- /package/dist/core/{p-da798f58.entry.js.map → p-5ec11974.entry.js.map} +0 -0
- /package/dist/core/{p-be5ad372.entry.js.map → p-65ddc948.entry.js.map} +0 -0
- /package/dist/core/{p-e13b43b1.entry.js.map → p-8402fcf7.entry.js.map} +0 -0
- /package/dist/core/{p-0e3cb8d0.entry.js.map → p-8856dff4.entry.js.map} +0 -0
- /package/dist/core/{p-32720276.entry.js.map → p-91b8ee39.entry.js.map} +0 -0
- /package/dist/core/{p-b6db0cc1.entry.js.map → p-9bf0ce9e.entry.js.map} +0 -0
- /package/dist/core/{p-afc4ce53.entry.js.map → p-9e5e6070.entry.js.map} +0 -0
- /package/dist/core/{p-3d1ba098.entry.js.map → p-b006976c.entry.js.map} +0 -0
- /package/dist/core/{p-0c3bd9e6.entry.js.map → p-b334a20d.entry.js.map} +0 -0
- /package/dist/core/{p-3e9564b5.entry.js.map → p-b88ae211.entry.js.map} +0 -0
- /package/dist/core/{p-96551ddf.entry.js.map → p-c3f26b24.entry.js.map} +0 -0
- /package/dist/core/{p-fd006a9b.entry.js.map → p-ca5d3a21.entry.js.map} +0 -0
- /package/dist/core/{p-f541034c.entry.js.map → p-cd0dbcea.entry.js.map} +0 -0
@@ -1,3 +1,4 @@
|
|
1
|
+
/* eslint-disable react/jsx-no-bind */
|
1
2
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
2
3
|
import { h, Fragment, Host, } from "@stencil/core";
|
3
4
|
import unsortedIcon from "./assets/unsorted-icon.svg";
|
@@ -60,6 +61,7 @@ export class DataTable {
|
|
60
61
|
this.fromRow = 0;
|
61
62
|
this.scrollable = false;
|
62
63
|
this.scrollOffset = 0;
|
64
|
+
this.selectedRows = [];
|
63
65
|
this.debounceDelay = 0;
|
64
66
|
/**
|
65
67
|
* Determines whether the column header should be truncated and display a tooltip. Default is `false`.
|
@@ -81,10 +83,6 @@ export class DataTable {
|
|
81
83
|
* Sets the row height on all rows in the table that aren't set using the `variableRowHeight` method.
|
82
84
|
*/
|
83
85
|
this.globalRowHeight = "auto";
|
84
|
-
/**
|
85
|
-
* If `true`, the selected row is highlighted using a background colour.
|
86
|
-
*/
|
87
|
-
this.highlightSelectedRow = true;
|
88
86
|
/**
|
89
87
|
* If `true`, column headers will not be visible.
|
90
88
|
*/
|
@@ -119,6 +117,10 @@ export class DataTable {
|
|
119
117
|
showItemsPerPageControl: true,
|
120
118
|
type: "simple",
|
121
119
|
};
|
120
|
+
/**
|
121
|
+
* If `true`, a checkbox column will be displayed to the left of the table which allows multiple rows to be selected.
|
122
|
+
*/
|
123
|
+
this.rowSelection = false;
|
122
124
|
/**
|
123
125
|
* If `true`, adds a pagination bar to the bottom of the table.
|
124
126
|
*/
|
@@ -161,11 +163,12 @@ export class DataTable {
|
|
161
163
|
this.headerResizeObserver.observe(this.el);
|
162
164
|
};
|
163
165
|
this.headerResizeCallback = () => {
|
166
|
+
var _a, _b, _c;
|
164
167
|
if (!this.hideColumnHeaders && this.columnHeaderTruncation) {
|
165
|
-
const tableContainerWidth = this.el.shadowRoot.querySelector(".table-container").clientWidth;
|
166
|
-
if (tableContainerWidth
|
167
|
-
|
168
|
-
|
168
|
+
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;
|
169
|
+
if (tableContainerWidth &&
|
170
|
+
tableContainerWidth !== this.prevTableContainerWidth) {
|
171
|
+
(_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll("th.column-header").forEach((header) => {
|
169
172
|
const tooltip = header.querySelector(this.IC_TOOLTIP_STRING);
|
170
173
|
const typographyEls = header.querySelectorAll(this.IC_TYPOGRAPHY_STRING);
|
171
174
|
if (tooltip && typographyEls && typographyEls.length === 2) {
|
@@ -179,49 +182,46 @@ export class DataTable {
|
|
179
182
|
}
|
180
183
|
}
|
181
184
|
};
|
185
|
+
this.getRowHeight = (cellContainer) => parseInt(getComputedStyle(document.documentElement).fontSize) *
|
186
|
+
parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING) || "");
|
182
187
|
this.updateSetRowHeight = (typographyEl) => {
|
183
|
-
const
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
|
188
|
-
if (typographyEl.scrollHeight > rowHeight) {
|
188
|
+
const removeRowHeightVariable = (element) => {
|
189
|
+
const cellContainer = this.getCellContainer(element);
|
190
|
+
if (cellContainer &&
|
191
|
+
element.scrollHeight > this.getRowHeight(cellContainer)) {
|
189
192
|
cellContainer.style.removeProperty(this.ROW_HEIGHT_CSS_VARIABLE);
|
190
193
|
}
|
194
|
+
};
|
195
|
+
if (typographyEl) {
|
196
|
+
removeRowHeightVariable(typographyEl);
|
191
197
|
}
|
192
198
|
else {
|
193
199
|
this.getTypographyElements().forEach((typographyEl) => {
|
194
|
-
|
195
|
-
const rowHeight = fontSize *
|
196
|
-
parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
|
197
|
-
if (typographyEl.scrollHeight > rowHeight) {
|
198
|
-
cellContainer.style.removeProperty(this.ROW_HEIGHT_CSS_VARIABLE);
|
199
|
-
}
|
200
|
+
removeRowHeightVariable(typographyEl);
|
200
201
|
});
|
201
202
|
}
|
202
203
|
};
|
203
204
|
this.debounceDataTruncation = () => {
|
204
205
|
this.getTypographyElements().forEach((typographyEl) => {
|
205
206
|
const cellContainer = this.getCellContainer(typographyEl);
|
206
|
-
if (
|
207
|
+
if (cellContainer &&
|
208
|
+
!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
|
207
209
|
this.resizeObserver = new ResizeObserver(
|
208
210
|
// This gets triggered twice due to updated data and see more/see less button
|
209
211
|
dynamicDebounce(() => {
|
210
212
|
this.dataTruncation(typographyEl);
|
211
213
|
if (!this.isNewDebounceDelaySet) {
|
212
|
-
this.
|
214
|
+
this.debounceDelay = 200;
|
215
|
+
this.isNewDebounceDelaySet = true;
|
213
216
|
}
|
214
217
|
}, () => this.debounceDelay));
|
215
218
|
this.resizeObserver.observe(typographyEl);
|
216
219
|
}
|
217
220
|
});
|
218
221
|
};
|
219
|
-
this.setNewDebounceDelay = (delay) => {
|
220
|
-
this.debounceDelay = delay;
|
221
|
-
this.isNewDebounceDelaySet = true;
|
222
|
-
};
|
223
222
|
this.getLines = (height) => Math.floor(height / this.DEFAULT_LINE_HEIGHT);
|
224
223
|
this.truncate = (typographyEl, cellContainer, tooltip) => {
|
224
|
+
var _a;
|
225
225
|
if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
|
226
226
|
//24 is the height of a single line
|
227
227
|
if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
|
@@ -236,33 +236,36 @@ export class DataTable {
|
|
236
236
|
else {
|
237
237
|
if (this.truncationPattern === this.TOOLTIP_STRING && tooltip) {
|
238
238
|
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
|
239
|
-
|
240
|
-
|
239
|
+
(_a = cellContainer
|
240
|
+
.querySelector(this.CELL_TEXT_WRAPPER_STRING)) === null || _a === void 0 ? void 0 : _a.prepend(typographyEl);
|
241
241
|
tooltip.remove();
|
242
242
|
}
|
243
243
|
if (this.truncationPattern === this.SHOW_HIDE_STRING &&
|
244
|
-
!isEmptyString(typographyEl.getAttribute("max-lines"))) {
|
244
|
+
!isEmptyString(typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.getAttribute("max-lines"))) {
|
245
245
|
this.resetShowHideTruncation(typographyEl);
|
246
246
|
}
|
247
247
|
}
|
248
248
|
};
|
249
249
|
this.dataTruncation = (typographyEl) => {
|
250
|
+
var _a;
|
250
251
|
// Tooltip truncation mentioned in AC. Will need revisiting
|
251
252
|
const tooltip = this.getTooltip(typographyEl);
|
252
253
|
const cellContainer = this.getCellContainer(typographyEl);
|
253
|
-
if (
|
254
|
+
if (!cellContainer ||
|
255
|
+
cellContainer.classList.contains("data-type-element") ||
|
254
256
|
this.dataUpdated) {
|
255
257
|
return;
|
256
258
|
}
|
257
259
|
if (this.truncationPattern === this.SHOW_HIDE_STRING &&
|
258
|
-
typographyEl.shadowRoot.querySelector("button")) {
|
260
|
+
((_a = typographyEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button"))) {
|
259
261
|
const showHideBtn = typographyEl.shadowRoot.querySelector("button");
|
260
262
|
// If the see more/see less is present and the max lines is equal to the cell container
|
261
263
|
// remove the see more/see less button
|
262
264
|
if (showHideBtn) {
|
263
265
|
const truncWrapper = this.getTruncWrapper(typographyEl);
|
264
|
-
if (
|
265
|
-
|
266
|
+
if (truncWrapper &&
|
267
|
+
this.getLines(truncWrapper.scrollHeight) ===
|
268
|
+
Number(typographyEl.getAttribute("max-lines"))) {
|
266
269
|
this.resetShowHideTruncation(typographyEl);
|
267
270
|
}
|
268
271
|
}
|
@@ -292,18 +295,16 @@ export class DataTable {
|
|
292
295
|
}
|
293
296
|
this.truncate(typographyEl, cellContainer, tooltip);
|
294
297
|
};
|
295
|
-
this.getTruncWrapper = (typographyEl) => typographyEl.shadowRoot.querySelector(".trunc-wrapper");
|
298
|
+
this.getTruncWrapper = (typographyEl) => { var _a; return (_a = typographyEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".trunc-wrapper"); };
|
296
299
|
this.removeTextWrap = () => {
|
297
300
|
this.getTypographyElements().forEach((typographyEl) => {
|
298
301
|
const tableCell = typographyEl.closest("td");
|
299
|
-
if (tableCell.classList.contains(this.TEXT_WRAP_STRING)) {
|
302
|
+
if (tableCell === null || tableCell === void 0 ? void 0 : tableCell.classList.contains(this.TEXT_WRAP_STRING)) {
|
300
303
|
tableCell.classList.remove(this.TEXT_WRAP_STRING);
|
301
304
|
}
|
302
305
|
});
|
303
306
|
};
|
304
|
-
this.getCellContainer = (typographyEl) =>
|
305
|
-
return typographyEl.closest(".cell-container");
|
306
|
-
};
|
307
|
+
this.getCellContainer = (typographyEl) => typographyEl.closest(".cell-container");
|
307
308
|
this.deleteTextWrapDataKey = (array) => Array.isArray(array) &&
|
308
309
|
array.forEach((val) => val.textWrap && delete val.textWrap);
|
309
310
|
this.startLoadingTimer = () => {
|
@@ -311,7 +312,7 @@ export class DataTable {
|
|
311
312
|
this.timerStarted = Date.now();
|
312
313
|
setTimeout(() => {
|
313
314
|
this.hasLoadedForOneSecond = true;
|
314
|
-
this.timerStarted =
|
315
|
+
this.timerStarted = 0;
|
315
316
|
}, this.minimumLoadingDisplayDuration);
|
316
317
|
};
|
317
318
|
this.isObject = (value) => value !== undefined && value !== null && typeof value === "object";
|
@@ -340,32 +341,28 @@ export class DataTable {
|
|
340
341
|
const { description, max, min, progress, monochrome } = this.updatingOptions || {};
|
341
342
|
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" })));
|
342
343
|
};
|
343
|
-
this.setRowHeight = (height) => {
|
344
|
-
|
345
|
-
this.DENSITY_PADDING_HEIGHT_DIFF[this.density]}px`);
|
346
|
-
};
|
344
|
+
this.setRowHeight = (height) => pxToRem(`${height * this.DENSITY_HEIGHT_MULTIPLIER[this.density] -
|
345
|
+
this.DENSITY_PADDING_HEIGHT_DIFF[this.density]}px`);
|
347
346
|
this.setTruncationClass = () => this.truncationPattern
|
348
347
|
? { [`truncation-${this.truncationPattern}`]: true }
|
349
348
|
: {};
|
350
349
|
this.getColumnWidth = (columnWidth) => {
|
351
350
|
// TODO: Setting max width on columns
|
352
351
|
let columnWidthStyling = {};
|
353
|
-
if (columnWidth) {
|
354
|
-
|
355
|
-
|
352
|
+
if (typeof columnWidth === "string") {
|
353
|
+
columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-width"]: columnWidth });
|
354
|
+
}
|
355
|
+
else if (columnWidth && Object.keys(columnWidth).length > 0) {
|
356
|
+
if (columnWidth.minWidth) {
|
357
|
+
columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-min-width"]: columnWidth.minWidth });
|
356
358
|
}
|
357
|
-
if (
|
358
|
-
|
359
|
-
columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-min-width"]: columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.minWidth });
|
360
|
-
}
|
361
|
-
if (columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.maxWidth) {
|
362
|
-
columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-max-width"]: columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.maxWidth });
|
363
|
-
}
|
359
|
+
if (columnWidth.maxWidth) {
|
360
|
+
columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-max-width"]: columnWidth.maxWidth });
|
364
361
|
}
|
365
362
|
}
|
366
363
|
return columnWidthStyling;
|
367
364
|
};
|
368
|
-
this.
|
365
|
+
this.getCalculatedRowHeight = (columnProps, rowTextWrap, cell, currentRowHeight) => {
|
369
366
|
if ((this.truncationPattern || currentRowHeight) &&
|
370
367
|
!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.textWrap) &&
|
371
368
|
!rowTextWrap &&
|
@@ -378,20 +375,22 @@ export class DataTable {
|
|
378
375
|
return {};
|
379
376
|
};
|
380
377
|
this.adjustWidthForActionElement = () => {
|
381
|
-
|
382
|
-
elements.
|
378
|
+
var _a;
|
379
|
+
const elements = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".action-element");
|
380
|
+
elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
|
383
381
|
const width = element.firstChild.getBoundingClientRect()
|
384
382
|
.width;
|
385
383
|
const gridWrapper = element.closest(".cell-grid-wrapper");
|
386
|
-
|
384
|
+
if (gridWrapper)
|
385
|
+
gridWrapper.style.gridTemplateColumns = `auto calc(${width}px + var(--ic-space-xs))`;
|
387
386
|
});
|
388
387
|
};
|
389
|
-
this.createCellContent = (columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon,
|
388
|
+
this.createCellContent = (columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, cellValue, rowEmphasis, currentRowHeight) => {
|
390
389
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
391
390
|
return (h("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
|
392
391
|
!isSlotUsed(this.el, cellSlotName)
|
393
392
|
? cell
|
394
|
-
:
|
393
|
+
: 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) ||
|
395
394
|
((_b = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
|
396
395
|
rowAlignment ||
|
397
396
|
this.getCellAlignment(cell, "vertical")}`]: !!((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.vertical) ||
|
@@ -407,7 +406,7 @@ export class DataTable {
|
|
407
406
|
(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
|
408
407
|
rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
|
409
408
|
!!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
|
410
|
-
!!rowEmphasis }, this.setTruncationClass()), { [this.CELL_CONTAINER_WITH_DESCRIPTION_STRING]: this.isObject(cell) && Object.keys(cell).includes("description") }), style: Object.assign(Object.assign({}, this.
|
409
|
+
!!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
|
411
410
|
? this.setRowHeight(currentRowHeight)
|
412
411
|
: 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)) &&
|
413
412
|
(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" &&
|
@@ -455,17 +454,18 @@ export class DataTable {
|
|
455
454
|
["row-header-sticky"]: this.stickyRowHeaders,
|
456
455
|
} }, cellValue("title")));
|
457
456
|
}
|
457
|
+
const CellContent = this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, cellValue, rowEmphasis, currentRowHeight || undefined);
|
458
458
|
if (rowKeys[index] !== "rowOptions") {
|
459
459
|
return (h("td", { class: {
|
460
460
|
["table-cell"]: true,
|
461
461
|
[`table-density-${this.density}`]: this.notDefaultDensity(),
|
462
462
|
["with-overflow"]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element",
|
463
463
|
}, style: Object.assign({}, this.getColumnWidth(columnProps.columnWidth)) }, this.isObject(cell) &&
|
464
|
-
Object.keys(cell).includes("actionElement") ? (h("div", { class: "cell-grid-wrapper" },
|
464
|
+
Object.keys(cell).includes("actionElement") ? (h("div", { class: "cell-grid-wrapper" }, CellContent, h("span", { class: "action-element", innerHTML: cellValue("actionElement"),
|
465
465
|
// eslint-disable-next-line react/jsx-no-bind
|
466
466
|
onClick: cell.actionOnClick
|
467
467
|
? (event) => this.handleClick(event, cell.actionOnClick)
|
468
|
-
: undefined }))) : (
|
468
|
+
: undefined }))) : (CellContent)));
|
469
469
|
}
|
470
470
|
});
|
471
471
|
};
|
@@ -498,16 +498,28 @@ export class DataTable {
|
|
498
498
|
[`text-${this.density}`]: this.notDefaultDensity(),
|
499
499
|
} }, title)))));
|
500
500
|
this.onRowClick = (row) => {
|
501
|
-
|
502
|
-
|
503
|
-
|
504
|
-
|
505
|
-
|
501
|
+
const notCurrentlySelected = !this.selectedRows.includes(row);
|
502
|
+
this.selectedRows = notCurrentlySelected
|
503
|
+
? [...this.selectedRows, row]
|
504
|
+
: this.selectedRows.filter((selectedRow) => selectedRow !== row);
|
505
|
+
this.icSelectedRowChange.emit({
|
506
|
+
row: notCurrentlySelected ? row : null,
|
507
|
+
selectedRows: this.selectedRows,
|
508
|
+
});
|
509
|
+
};
|
510
|
+
this.selectAllRows = () => {
|
511
|
+
this.selectedRows =
|
512
|
+
this.organisedData &&
|
513
|
+
this.selectedRows.length !== this.organisedData.length
|
514
|
+
? [...this.organisedData]
|
515
|
+
: [];
|
516
|
+
this.icSelectAllRows.emit(this.selectedRows);
|
506
517
|
};
|
507
518
|
this.createRows = () => {
|
519
|
+
var _a, _b, _c;
|
508
520
|
const data = this.showPagination
|
509
|
-
? this.data.slice(this.fromRow, this.toRow)
|
510
|
-
: this.data.slice();
|
521
|
+
? (_a = this.data) === null || _a === void 0 ? void 0 : _a.slice(this.fromRow, this.toRow)
|
522
|
+
: (_b = this.data) === null || _b === void 0 ? void 0 : _b.slice();
|
511
523
|
const paginationOffset = this.showPagination ? this.fromRow : 0;
|
512
524
|
/**
|
513
525
|
* Ensures that createCells has a value in data to map over to actually render the slot.
|
@@ -515,7 +527,7 @@ export class DataTable {
|
|
515
527
|
* `addDataToPosition` used to add the element in the correct column order.
|
516
528
|
* Adding empty string value in to give `createCells` something to loop over.
|
517
529
|
*/
|
518
|
-
|
530
|
+
this.organisedData = data === null || data === void 0 ? void 0 : data.map((row, rowIndex) => {
|
519
531
|
const slottedColumns = this.columns
|
520
532
|
.map(({ key }, index) => isSlotUsed(this.el, `${key}-${rowIndex + paginationOffset}`) && {
|
521
533
|
key,
|
@@ -528,18 +540,19 @@ export class DataTable {
|
|
528
540
|
? addDataToPosition(row, slottedColumns, "")
|
529
541
|
: row;
|
530
542
|
});
|
531
|
-
return organisedData
|
532
|
-
.sort(!this.sortable || this.disableAutoSort
|
543
|
+
return (_c = this.organisedData) === null || _c === void 0 ? void 0 : _c.sort(!this.sortable || this.disableAutoSort
|
533
544
|
? undefined
|
534
|
-
: this.getSortFunction())
|
535
|
-
.
|
536
|
-
|
537
|
-
|
538
|
-
|
539
|
-
|
540
|
-
|
541
|
-
|
542
|
-
|
545
|
+
: this.getSortFunction()).map((row, index) => {
|
546
|
+
const isRowSelected = this.rowSelection && this.selectedRows.includes(row);
|
547
|
+
const cellIndex = index + paginationOffset;
|
548
|
+
return (h("tr", { class: {
|
549
|
+
"table-row": true,
|
550
|
+
"table-row-selected": isRowSelected,
|
551
|
+
} }, this.rowSelection && (h("td", { class: {
|
552
|
+
"table-cell": true,
|
553
|
+
"checkbox-cell": true,
|
554
|
+
[`table-density-${this.density}`]: this.notDefaultDensity(),
|
555
|
+
} }, 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)));
|
543
556
|
});
|
544
557
|
};
|
545
558
|
this.getObjectValue = (cell, key) => Object.values(cell)[Object.keys(cell).indexOf(key)];
|
@@ -582,12 +595,11 @@ export class DataTable {
|
|
582
595
|
}
|
583
596
|
};
|
584
597
|
this.sortRows = (column) => {
|
585
|
-
|
598
|
+
var _a, _b, _c, _d;
|
586
599
|
const sortOrders = this.sortOptions.sortOrders;
|
587
600
|
if (column !== this.sortedColumn) {
|
588
601
|
if (this.sortedColumn) {
|
589
|
-
|
590
|
-
previousSortedButton.setAttribute("aria-label", this.getSortButtonLabel(column)); // Passing through unsorted column returns correct label for newly unsorted column
|
602
|
+
(_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
|
591
603
|
}
|
592
604
|
this.sortedColumn = column;
|
593
605
|
this.sortedColumnOrder = "unsorted";
|
@@ -597,50 +609,57 @@ export class DataTable {
|
|
597
609
|
nextSortOrderIndex = 0;
|
598
610
|
}
|
599
611
|
this.sortedColumnOrder = sortOrders[nextSortOrderIndex];
|
600
|
-
|
612
|
+
(_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));
|
601
613
|
this.tableSorted = true;
|
602
614
|
this.icSortChange.emit({
|
603
615
|
columnName: column,
|
604
616
|
sorted: this.sortedColumnOrder,
|
605
617
|
});
|
606
618
|
};
|
619
|
+
/** Gets all `ic-typography`elements within the data table, excluding column headers and cell descriptions */
|
607
620
|
this.getTypographyElements = () => {
|
608
|
-
|
609
|
-
return Array.from(this.el.shadowRoot.querySelectorAll("ic-typography:not(.column-header-text,.cell-description-text)"));
|
610
|
-
};
|
611
|
-
this.getTooltip = (typographyEl) => {
|
612
|
-
return typographyEl.closest(this.TOOLTIP);
|
621
|
+
var _a;
|
622
|
+
return Array.from(((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("ic-typography:not(.column-header-text,.cell-description-text)")) || []);
|
613
623
|
};
|
624
|
+
this.getTooltip = (typographyEl) => typographyEl.closest(this.TOOLTIP);
|
614
625
|
this.updateTruncationTooltip = (removeTooltipOnly = false) => {
|
615
626
|
this.getTypographyElements().forEach((typographyEl) => {
|
616
627
|
const tooltip = this.getTooltip(typographyEl);
|
617
628
|
const cellContainer = this.getCellContainer(typographyEl);
|
618
|
-
if (
|
619
|
-
this.
|
620
|
-
|
621
|
-
|
629
|
+
if (cellContainer) {
|
630
|
+
if (typographyEl.closest(this.TEXT_WRAP_CLASS)) {
|
631
|
+
this.removeTooltip(cellContainer, typographyEl, tooltip);
|
632
|
+
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
|
633
|
+
return;
|
634
|
+
}
|
635
|
+
this.regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly);
|
622
636
|
}
|
623
|
-
this.regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly);
|
624
637
|
});
|
625
638
|
};
|
626
639
|
this.updateScrollOffset = () => {
|
627
|
-
|
640
|
+
var _a;
|
641
|
+
const tableRowContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".table-row-container");
|
642
|
+
if (tableRowContainer)
|
643
|
+
this.scrollOffset = tableRowContainer.scrollTop;
|
628
644
|
};
|
629
645
|
this.updateRowHeightForDescriptions = (rowHeight, cellContainer) => {
|
630
|
-
cellContainer.setAttribute(
|
646
|
+
cellContainer.setAttribute(this.DATA_ROW_HEIGHT_STRING, rowHeight.toString());
|
631
647
|
cellContainer.setAttribute("style", `${this.ROW_HEIGHT_CSS_VARIABLE}: ${rowHeight}px`);
|
632
648
|
};
|
633
|
-
|
649
|
+
/** Method to update the row heights on cells with descriptions and tooltip truncation */
|
634
650
|
this.updateCellHeightsWithDescriptions = () => {
|
635
|
-
|
636
|
-
|
651
|
+
var _a, _b;
|
652
|
+
(_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) => {
|
637
653
|
const cellContainer = description.closest(`.${this.CELL_CONTAINER_WITH_DESCRIPTION_STRING}`);
|
638
|
-
const typography = cellContainer.querySelector(this.IC_TYPOGRAPHY_STRING);
|
654
|
+
const typography = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.querySelector(this.IC_TYPOGRAPHY_STRING);
|
639
655
|
const descriptionMarginTop = window
|
640
656
|
.getComputedStyle(description)
|
641
657
|
.getPropertyValue("margin-top");
|
642
658
|
const descriptionHeight = description.clientHeight + parseInt(descriptionMarginTop, 10);
|
643
|
-
if (
|
659
|
+
if (typography &&
|
660
|
+
cellContainer &&
|
661
|
+
this.globalRowHeight &&
|
662
|
+
this.globalRowHeight !== "auto") {
|
644
663
|
if (!typography.textContent &&
|
645
664
|
descriptionHeight + this.DEFAULT_LINE_HEIGHT > this.globalRowHeight) {
|
646
665
|
this.updateRowHeightForDescriptions(descriptionHeight, cellContainer);
|
@@ -648,7 +667,7 @@ export class DataTable {
|
|
648
667
|
else if (this.truncationPattern === this.TOOLTIP_STRING) {
|
649
668
|
if (descriptionHeight + this.DEFAULT_LINE_HEIGHT >
|
650
669
|
this.globalRowHeight) {
|
651
|
-
const cellIcon = cellContainer
|
670
|
+
const cellIcon = cellContainer.querySelector(".icon");
|
652
671
|
if (deviceSizeMatches(IC_DEVICE_SIZES.XS) && cellIcon) {
|
653
672
|
// recalculate descriptionHeight as when a word break occurs this value changes
|
654
673
|
// Additional spacing given for 300-400% zoom
|
@@ -665,7 +684,8 @@ export class DataTable {
|
|
665
684
|
// isn't overflowing the cell to trigger the show more button to appear.
|
666
685
|
}
|
667
686
|
else if (this.truncationPattern === this.SHOW_HIDE_STRING &&
|
668
|
-
descriptionHeight + this.DEFAULT_LINE_HEIGHT >
|
687
|
+
descriptionHeight + this.DEFAULT_LINE_HEIGHT >
|
688
|
+
this.globalRowHeight &&
|
669
689
|
typography.style.getPropertyValue("--truncation-max-lines") !==
|
670
690
|
"initial") {
|
671
691
|
this.updateRowHeightForDescriptions(descriptionHeight + this.DEFAULT_LINE_HEIGHT, cellContainer);
|
@@ -693,40 +713,36 @@ export class DataTable {
|
|
693
713
|
return tableHostDimensions;
|
694
714
|
};
|
695
715
|
this.fixCellTooltip = (element) => {
|
696
|
-
var _a, _b
|
697
|
-
let tooltip;
|
716
|
+
var _a, _b;
|
717
|
+
let tooltip = null;
|
718
|
+
const tooltipChildElement = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.IC_TOOLTIP_STRING);
|
698
719
|
if (element.tagName === "IC-TOOLTIP") {
|
699
720
|
tooltip = element;
|
700
721
|
}
|
701
|
-
else if (
|
702
|
-
tooltip =
|
722
|
+
else if (tooltipChildElement) {
|
723
|
+
tooltip = tooltipChildElement;
|
703
724
|
}
|
704
|
-
else {
|
705
|
-
|
706
|
-
|
707
|
-
this.fixCellTooltip(el);
|
708
|
-
});
|
709
|
-
}
|
710
|
-
else {
|
711
|
-
return;
|
712
|
-
}
|
713
|
-
}
|
714
|
-
if (tooltip) {
|
715
|
-
tooltip.setExternalPopperProps({
|
716
|
-
strategy: "fixed",
|
725
|
+
else if (((_b = element.children) === null || _b === void 0 ? void 0 : _b.length) > 0) {
|
726
|
+
Array.from(element.children).forEach((el) => {
|
727
|
+
this.fixCellTooltip(el);
|
717
728
|
});
|
718
729
|
}
|
730
|
+
else {
|
731
|
+
return;
|
732
|
+
}
|
733
|
+
tooltip === null || tooltip === void 0 ? void 0 : tooltip.setExternalPopperProps({
|
734
|
+
strategy: "fixed",
|
735
|
+
});
|
719
736
|
};
|
720
737
|
this.fixCellTooltips = () => {
|
721
|
-
|
722
|
-
|
738
|
+
var _a, _b, _c, _d;
|
739
|
+
(_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) => {
|
723
740
|
const slotElements = getSlotElements(element);
|
724
741
|
slotElements === null || slotElements === void 0 ? void 0 : slotElements.forEach((slottedEl) => {
|
725
742
|
this.fixCellTooltip(slottedEl);
|
726
743
|
});
|
727
744
|
});
|
728
|
-
|
729
|
-
actionElements === null || actionElements === void 0 ? void 0 : actionElements.forEach((actionElementSpan) => {
|
745
|
+
(_d = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(".action-element")) === null || _d === void 0 ? void 0 : _d.forEach((actionElementSpan) => {
|
730
746
|
const actionElement = actionElementSpan.firstChild;
|
731
747
|
if (actionElement) {
|
732
748
|
this.fixCellTooltip(actionElement);
|
@@ -734,7 +750,7 @@ export class DataTable {
|
|
734
750
|
});
|
735
751
|
};
|
736
752
|
this.handleClick = (event, callback) => callback(event);
|
737
|
-
this.renderTableBody = (
|
753
|
+
this.renderTableBody = (loading, data, overlay) => {
|
738
754
|
if (!(data === null || data === void 0 ? void 0 : data.length))
|
739
755
|
return;
|
740
756
|
if (overlay && loading) {
|
@@ -753,7 +769,7 @@ export class DataTable {
|
|
753
769
|
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: {
|
754
770
|
"loading-empty": isLoading,
|
755
771
|
loading: true,
|
756
|
-
}, 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) })));
|
772
|
+
}, 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) })));
|
757
773
|
};
|
758
774
|
this.renderAriaLiveLoading = () => {
|
759
775
|
var _a, _b;
|
@@ -767,7 +783,7 @@ export class DataTable {
|
|
767
783
|
return "";
|
768
784
|
}
|
769
785
|
};
|
770
|
-
this.renderEmptyState = (
|
786
|
+
this.renderEmptyState = (loading, data, overlay) => {
|
771
787
|
const emptyStateEl = isSlotUsed(this.el, "empty-state") ? (h("slot", { name: "empty-state" })) : (h("ic-empty-state", { aligned: "center", heading: "No Data", class: "loading-empty" }));
|
772
788
|
if (loading && !(data === null || data === void 0 ? void 0 : data.length) && overlay) {
|
773
789
|
return emptyStateEl;
|
@@ -781,16 +797,15 @@ export class DataTable {
|
|
781
797
|
};
|
782
798
|
}
|
783
799
|
headerTruncationChangeHandler() {
|
800
|
+
var _a, _b;
|
784
801
|
if (this.columnHeaderTruncation) {
|
785
802
|
this.prevTableContainerWidth = 0;
|
786
803
|
}
|
787
804
|
else {
|
788
|
-
|
789
|
-
|
790
|
-
|
791
|
-
|
792
|
-
tooltip.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
|
793
|
-
}
|
805
|
+
(_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) => {
|
806
|
+
var _a;
|
807
|
+
(_a = header
|
808
|
+
.querySelector(this.IC_TOOLTIP_STRING)) === null || _a === void 0 ? void 0 : _a.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
|
794
809
|
});
|
795
810
|
}
|
796
811
|
}
|
@@ -810,14 +825,17 @@ export class DataTable {
|
|
810
825
|
this.previousItemsPerPage = this.rowsPerPage;
|
811
826
|
}
|
812
827
|
componentDidLoad() {
|
813
|
-
|
814
|
-
const
|
828
|
+
var _a, _b;
|
829
|
+
const tableElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("table");
|
830
|
+
const tableContainer = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(".table-container");
|
815
831
|
checkResizeObserver(this.runHeaderResizeObserver);
|
816
832
|
if (this.dataUpdated) {
|
817
833
|
this.dataUpdated = false;
|
818
834
|
}
|
819
|
-
if (
|
820
|
-
|
835
|
+
if (tableElement &&
|
836
|
+
tableContainer &&
|
837
|
+
(tableElement.clientHeight > tableContainer.clientHeight ||
|
838
|
+
tableElement.clientWidth > tableContainer.clientWidth)) {
|
821
839
|
this.scrollable = true;
|
822
840
|
}
|
823
841
|
if (this.loading) {
|
@@ -827,7 +845,8 @@ export class DataTable {
|
|
827
845
|
if (this.truncationPattern) {
|
828
846
|
this.getTypographyElements().forEach((typographyEl) => {
|
829
847
|
const cellContainer = this.getCellContainer(typographyEl);
|
830
|
-
if (
|
848
|
+
if (cellContainer &&
|
849
|
+
!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
|
831
850
|
this.dataTruncation(typographyEl);
|
832
851
|
}
|
833
852
|
});
|
@@ -852,19 +871,23 @@ export class DataTable {
|
|
852
871
|
this.adjustWidthForActionElement();
|
853
872
|
}
|
854
873
|
truncateUpdatedData() {
|
874
|
+
var _a;
|
855
875
|
if (this.dataUpdated) {
|
856
876
|
if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
857
877
|
this.getTypographyElements().forEach((typographyEl) => {
|
858
878
|
const truncWrapper = this.getTruncWrapper(typographyEl);
|
859
879
|
const cellContainer = this.getCellContainer(typographyEl);
|
860
|
-
if (
|
861
|
-
|
880
|
+
if (truncWrapper &&
|
881
|
+
cellContainer &&
|
882
|
+
cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >=
|
883
|
+
truncWrapper.scrollHeight) {
|
862
884
|
this.resetShowHideTruncation(typographyEl);
|
863
885
|
return;
|
864
886
|
}
|
865
887
|
setTimeout(() => {
|
866
888
|
// slight delay due to data rendering
|
867
|
-
if (
|
889
|
+
if (cellContainer &&
|
890
|
+
typographyEl.scrollHeight > cellContainer.clientHeight) {
|
868
891
|
this.addShowHideTruncation(cellContainer, typographyEl);
|
869
892
|
}
|
870
893
|
}, 150);
|
@@ -882,13 +905,15 @@ export class DataTable {
|
|
882
905
|
if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
883
906
|
this.getTypographyElements().forEach((typographyEl) => {
|
884
907
|
const cellContainer = this.getCellContainer(typographyEl);
|
885
|
-
if (
|
886
|
-
this.
|
887
|
-
|
888
|
-
|
889
|
-
|
890
|
-
|
891
|
-
|
908
|
+
if (cellContainer) {
|
909
|
+
if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
|
910
|
+
this.createShowHideTruncation(typographyEl, cellContainer);
|
911
|
+
}
|
912
|
+
else {
|
913
|
+
typographyEl.resetTruncation().then(() => {
|
914
|
+
cellContainer.removeAttribute("style");
|
915
|
+
});
|
916
|
+
}
|
892
917
|
}
|
893
918
|
});
|
894
919
|
}
|
@@ -897,49 +922,48 @@ export class DataTable {
|
|
897
922
|
// This function recalculates the tooltip truncation when the rowHeight has been set.
|
898
923
|
// This is in componentDidUpdate so a setTimeout is not used to wait for the render to be complete
|
899
924
|
if (this.rowHeightSet) {
|
900
|
-
const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
|
901
|
-
const hasAutoRowHeight = this.globalRowHeight === "auto";
|
902
925
|
this.getTypographyElements().forEach((typographyEl) => {
|
903
|
-
var _a;
|
926
|
+
var _a, _b;
|
904
927
|
const cellContainer = this.getCellContainer(typographyEl);
|
905
928
|
const tooltipEl = this.getTooltip(typographyEl);
|
906
|
-
if (
|
907
|
-
|
908
|
-
|
909
|
-
this.
|
910
|
-
|
929
|
+
if (cellContainer) {
|
930
|
+
if (this.globalRowHeight === "auto") {
|
931
|
+
cellContainer.style.height = "";
|
932
|
+
if (this.truncationPattern === this.TOOLTIP_STRING) {
|
933
|
+
this.removeTooltip(cellContainer, typographyEl, tooltipEl);
|
934
|
+
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
|
935
|
+
}
|
936
|
+
else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
937
|
+
this.resetShowHideTruncation(typographyEl);
|
938
|
+
}
|
939
|
+
return;
|
911
940
|
}
|
912
|
-
|
913
|
-
|
941
|
+
// If the set row height is bigger than the cell container even
|
942
|
+
// with textWrap, set the row height
|
943
|
+
if (!cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
|
944
|
+
!((_a = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.style) === null || _a === void 0 ? void 0 : _a.height) &&
|
945
|
+
this.getRowHeight(cellContainer) > cellContainer.clientHeight &&
|
946
|
+
!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
|
947
|
+
cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
|
914
948
|
}
|
915
|
-
|
916
|
-
|
917
|
-
|
918
|
-
|
919
|
-
|
920
|
-
|
921
|
-
|
922
|
-
|
923
|
-
|
924
|
-
|
925
|
-
|
926
|
-
|
927
|
-
if (this.truncationPattern) {
|
928
|
-
// If the set row height is bigger than the typography truncation wrapper
|
929
|
-
// scroll height, remove see more / see less button
|
930
|
-
if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
931
|
-
const truncWrapper = this.getTruncWrapper(typographyEl);
|
932
|
-
const showHideBtn = typographyEl.shadowRoot.querySelector("button");
|
933
|
-
if (showHideBtn &&
|
934
|
-
(truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight) <= cellContainer.clientHeight) {
|
935
|
-
this.resetShowHideTruncation(typographyEl);
|
936
|
-
return;
|
949
|
+
if (this.truncationPattern) {
|
950
|
+
// If the set row height is bigger than the typography truncation wrapper
|
951
|
+
// scroll height, remove see more / see less button
|
952
|
+
if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
953
|
+
const truncWrapper = this.getTruncWrapper(typographyEl);
|
954
|
+
const showHideBtn = (_b = typographyEl.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("button");
|
955
|
+
if (showHideBtn &&
|
956
|
+
truncWrapper &&
|
957
|
+
truncWrapper.scrollHeight <= cellContainer.clientHeight) {
|
958
|
+
this.resetShowHideTruncation(typographyEl);
|
959
|
+
return;
|
960
|
+
}
|
937
961
|
}
|
962
|
+
this.truncate(typographyEl, cellContainer, tooltipEl);
|
963
|
+
}
|
964
|
+
else {
|
965
|
+
this.updateSetRowHeight(typographyEl);
|
938
966
|
}
|
939
|
-
this.truncate(typographyEl, cellContainer, tooltipEl);
|
940
|
-
}
|
941
|
-
else {
|
942
|
-
this.updateSetRowHeight(typographyEl);
|
943
967
|
}
|
944
968
|
});
|
945
969
|
this.rowHeightSet = false;
|
@@ -947,16 +971,15 @@ export class DataTable {
|
|
947
971
|
// Only run truncation on the new rows
|
948
972
|
// when the number of items per page has increased
|
949
973
|
if (this.itemsPerPageChange) {
|
950
|
-
const allRows = this.el.shadowRoot.querySelectorAll(".table-row");
|
951
|
-
if (this.rowsPerPage > this.previousItemsPerPage) {
|
974
|
+
const allRows = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".table-row");
|
975
|
+
if (allRows && this.rowsPerPage > this.previousItemsPerPage) {
|
952
976
|
const newRows = Array.from(allRows).slice(this.previousItemsPerPage);
|
953
977
|
newRows.forEach((row) => {
|
954
|
-
row
|
955
|
-
.querySelectorAll(this.IC_TYPOGRAPHY_STRING)
|
956
|
-
.forEach((typographyEl) => {
|
978
|
+
row.querySelectorAll("ic-typography").forEach((typographyEl) => {
|
957
979
|
const cellContainer = this.getCellContainer(typographyEl);
|
958
980
|
const tooltipEl = this.getTooltip(typographyEl);
|
959
|
-
|
981
|
+
if (cellContainer)
|
982
|
+
this.truncate(typographyEl, cellContainer, tooltipEl);
|
960
983
|
});
|
961
984
|
});
|
962
985
|
}
|
@@ -970,9 +993,11 @@ export class DataTable {
|
|
970
993
|
// set truncation to see more if opened and next/previous page is pressed
|
971
994
|
if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
972
995
|
this.getTypographyElements().forEach((typographyEl) => {
|
996
|
+
var _a;
|
973
997
|
const cellContainer = this.getCellContainer(typographyEl);
|
974
|
-
const showHideBtn = typographyEl.shadowRoot.querySelector("button");
|
975
|
-
if (
|
998
|
+
const showHideBtn = (_a = typographyEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("button");
|
999
|
+
if (cellContainer &&
|
1000
|
+
(typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > cellContainer.clientHeight &&
|
976
1001
|
!showHideBtn) {
|
977
1002
|
this.addShowHideTruncation(cellContainer, typographyEl);
|
978
1003
|
}
|
@@ -984,7 +1009,8 @@ export class DataTable {
|
|
984
1009
|
this.getTypographyElements().forEach((typographyEl) => {
|
985
1010
|
const cellContainer = this.getCellContainer(typographyEl);
|
986
1011
|
const tooltipEl = this.getTooltip(typographyEl);
|
987
|
-
|
1012
|
+
if (cellContainer)
|
1013
|
+
this.truncate(typographyEl, cellContainer, tooltipEl);
|
988
1014
|
});
|
989
1015
|
this.densityUpdate = false;
|
990
1016
|
}
|
@@ -993,7 +1019,8 @@ export class DataTable {
|
|
993
1019
|
this.getTypographyElements().forEach((typographyEl) => {
|
994
1020
|
const cellContainer = this.getCellContainer(typographyEl);
|
995
1021
|
const tooltipEl = this.getTooltip(typographyEl);
|
996
|
-
if (
|
1022
|
+
if (cellContainer &&
|
1023
|
+
typographyEl.scrollHeight > cellContainer.clientHeight) {
|
997
1024
|
this.addTooltipTruncation(typographyEl, cellContainer, tooltipEl);
|
998
1025
|
}
|
999
1026
|
});
|
@@ -1002,29 +1029,24 @@ export class DataTable {
|
|
1002
1029
|
this.getTypographyElements().forEach((typographyEl) => {
|
1003
1030
|
const truncWrapper = this.getTruncWrapper(typographyEl);
|
1004
1031
|
const cellContainer = this.getCellContainer(typographyEl);
|
1005
|
-
if (
|
1006
|
-
(truncWrapper
|
1007
|
-
|
1008
|
-
|
1009
|
-
|
1010
|
-
|
1011
|
-
|
1032
|
+
if (cellContainer) {
|
1033
|
+
if (truncWrapper &&
|
1034
|
+
(cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >
|
1035
|
+
truncWrapper.scrollHeight) {
|
1036
|
+
this.resetShowHideTruncation(typographyEl);
|
1037
|
+
return;
|
1038
|
+
}
|
1039
|
+
if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
|
1040
|
+
this.addShowHideTruncation(cellContainer, typographyEl);
|
1041
|
+
}
|
1012
1042
|
}
|
1013
1043
|
});
|
1014
1044
|
}
|
1015
1045
|
}
|
1016
1046
|
}
|
1017
|
-
createShowHideTruncation(typographyEl, cellContainer, descriptionHeight) {
|
1047
|
+
createShowHideTruncation(typographyEl, cellContainer, descriptionHeight = 0) {
|
1018
1048
|
typographyEl.checkMaxLines(typographyEl.scrollHeight);
|
1019
|
-
typographyEl.setAttribute("max-lines", `${
|
1020
|
-
if (cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
|
1021
|
-
descriptionHeight) {
|
1022
|
-
typographyEl.setAttribute("max-lines", `${Math.floor(((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - descriptionHeight) /
|
1023
|
-
this.DEFAULT_LINE_HEIGHT)}`);
|
1024
|
-
}
|
1025
|
-
else {
|
1026
|
-
typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
|
1027
|
-
}
|
1049
|
+
typographyEl.setAttribute("max-lines", `${this.getLines(cellContainer.clientHeight - descriptionHeight)}`);
|
1028
1050
|
typographyEl.setShowHideExpanded(false);
|
1029
1051
|
cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
|
1030
1052
|
}
|
@@ -1043,26 +1065,30 @@ export class DataTable {
|
|
1043
1065
|
handleTypographyTruncationExpandToggle({ detail, }) {
|
1044
1066
|
const { expanded, typographyEl } = detail;
|
1045
1067
|
const cellContainer = this.getCellContainer(typographyEl);
|
1046
|
-
if (cellContainer.style.getPropertyValue(this.ROW_HEIGHT_CSS_VARIABLE) &&
|
1068
|
+
if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.style.getPropertyValue(this.ROW_HEIGHT_CSS_VARIABLE)) &&
|
1047
1069
|
expanded) {
|
1048
1070
|
cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, "inherit");
|
1049
1071
|
}
|
1050
1072
|
}
|
1051
1073
|
handlePageChange({ detail, target }) {
|
1074
|
+
var _a;
|
1052
1075
|
if (target.parentElement !== this.el) {
|
1053
1076
|
this.fromRow = (detail.value - 1) * this.rowsPerPage;
|
1054
1077
|
this.toRow = this.fromRow + this.rowsPerPage;
|
1055
|
-
const tableRowsContainer = this.el.shadowRoot.querySelector(".table-row-container");
|
1056
|
-
if (
|
1057
|
-
|
1058
|
-
|
1059
|
-
|
1060
|
-
|
1061
|
-
|
1062
|
-
|
1063
|
-
|
1064
|
-
|
1078
|
+
const tableRowsContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".table-row-container");
|
1079
|
+
if (tableRowsContainer) {
|
1080
|
+
if (this.previousRowsPerPage === this.rowsPerPage) {
|
1081
|
+
tableRowsContainer.scrollTop = 0;
|
1082
|
+
}
|
1083
|
+
else if (this.previousRowsPerPage < this.rowsPerPage) {
|
1084
|
+
tableRowsContainer.scrollTop = this.scrollOffset;
|
1085
|
+
this.previousRowsPerPage = this.rowsPerPage;
|
1086
|
+
}
|
1087
|
+
else {
|
1088
|
+
this.previousRowsPerPage = this.rowsPerPage;
|
1089
|
+
}
|
1065
1090
|
}
|
1091
|
+
this.selectedRows = [];
|
1066
1092
|
}
|
1067
1093
|
if (!this.initialLoad && this.previousPaginationPage !== detail.value) {
|
1068
1094
|
// This is to prevent icPageChange from triggering truncation on first load
|
@@ -1081,10 +1107,6 @@ export class DataTable {
|
|
1081
1107
|
handleDensityChange(ev) {
|
1082
1108
|
this.density = ev.detail.value;
|
1083
1109
|
}
|
1084
|
-
clickListener(ev) {
|
1085
|
-
if (ev.target !== this.el)
|
1086
|
-
this.selectedRow = undefined;
|
1087
|
-
}
|
1088
1110
|
loadingHandler(newValue) {
|
1089
1111
|
if (newValue)
|
1090
1112
|
this.startLoadingTimer();
|
@@ -1102,7 +1124,8 @@ export class DataTable {
|
|
1102
1124
|
this.getTypographyElements().forEach((typographyEl) => {
|
1103
1125
|
const cellContainer = this.getCellContainer(typographyEl);
|
1104
1126
|
const tooltip = this.getTooltip(typographyEl);
|
1105
|
-
|
1127
|
+
if (cellContainer)
|
1128
|
+
this.truncate(typographyEl, cellContainer, tooltip);
|
1106
1129
|
});
|
1107
1130
|
}
|
1108
1131
|
if (newValue === this.SHOW_HIDE_STRING) {
|
@@ -1112,17 +1135,20 @@ export class DataTable {
|
|
1112
1135
|
this.getTypographyElements().forEach((typographyEl) => {
|
1113
1136
|
const truncWrapper = this.getTruncWrapper(typographyEl);
|
1114
1137
|
const cellContainer = this.getCellContainer(typographyEl);
|
1115
|
-
if (
|
1116
|
-
(truncWrapper
|
1117
|
-
|
1118
|
-
|
1119
|
-
|
1120
|
-
|
1121
|
-
// slight delay due to data rendering
|
1122
|
-
if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
|
1123
|
-
this.addShowHideTruncation(cellContainer, typographyEl);
|
1138
|
+
if (cellContainer) {
|
1139
|
+
if (truncWrapper &&
|
1140
|
+
cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >
|
1141
|
+
truncWrapper.scrollHeight) {
|
1142
|
+
this.resetShowHideTruncation(typographyEl);
|
1143
|
+
return;
|
1124
1144
|
}
|
1125
|
-
|
1145
|
+
setTimeout(() => {
|
1146
|
+
// slight delay due to data rendering
|
1147
|
+
if (typographyEl.scrollHeight > cellContainer.clientHeight) {
|
1148
|
+
this.addShowHideTruncation(cellContainer, typographyEl);
|
1149
|
+
}
|
1150
|
+
}, 150);
|
1151
|
+
}
|
1126
1152
|
});
|
1127
1153
|
}
|
1128
1154
|
this.truncationPatternUpdated = true;
|
@@ -1146,10 +1172,12 @@ export class DataTable {
|
|
1146
1172
|
if (typographyEl) {
|
1147
1173
|
const truncWrapper = this.getTruncWrapper(typographyEl);
|
1148
1174
|
const cellContainer = this.getCellContainer(typographyEl);
|
1149
|
-
if ((
|
1175
|
+
if (!(cellContainer && truncWrapper))
|
1176
|
+
return;
|
1177
|
+
if (truncWrapper.scrollHeight > cellContainer.clientHeight &&
|
1150
1178
|
!isEmptyString(typographyEl.getAttribute("max-lines")) &&
|
1151
1179
|
Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT) !==
|
1152
|
-
|
1180
|
+
Number(typographyEl.getAttribute("max-lines"))) {
|
1153
1181
|
typographyEl.checkMaxLines(truncWrapper.scrollHeight);
|
1154
1182
|
typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
|
1155
1183
|
typographyEl.setShowHideExpanded(false);
|
@@ -1167,7 +1195,7 @@ export class DataTable {
|
|
1167
1195
|
this.getTypographyElements().forEach((typographyEl) => {
|
1168
1196
|
const cellContainer = this.getCellContainer(typographyEl);
|
1169
1197
|
typographyEl.resetTruncation().then(() => {
|
1170
|
-
if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
|
1198
|
+
if (cellContainer && !typographyEl.closest(this.TEXT_WRAP_CLASS)) {
|
1171
1199
|
cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
|
1172
1200
|
}
|
1173
1201
|
});
|
@@ -1188,7 +1216,7 @@ export class DataTable {
|
|
1188
1216
|
*/
|
1189
1217
|
async resetRowHeights(rowHeight) {
|
1190
1218
|
this.globalRowHeight = rowHeight || "auto";
|
1191
|
-
this.variableRowHeight =
|
1219
|
+
this.variableRowHeight = undefined;
|
1192
1220
|
}
|
1193
1221
|
showLoadingIndicator() {
|
1194
1222
|
var _a, _b, _c;
|
@@ -1232,35 +1260,28 @@ export class DataTable {
|
|
1232
1260
|
}
|
1233
1261
|
}
|
1234
1262
|
removeTooltip(cellContainer, typographyEl, tooltip) {
|
1235
|
-
|
1236
|
-
|
1237
|
-
|
1238
|
-
|
1239
|
-
}
|
1263
|
+
var _a;
|
1264
|
+
(_a = cellContainer
|
1265
|
+
.querySelector(this.CELL_TEXT_WRAPPER_STRING)) === null || _a === void 0 ? void 0 : _a.prepend(typographyEl);
|
1266
|
+
tooltip === null || tooltip === void 0 ? void 0 : tooltip.remove();
|
1240
1267
|
}
|
1241
1268
|
addLineClampCSS(typographyEl, cellContainer) {
|
1242
1269
|
var _a, _b;
|
1243
1270
|
const descriptionCellHeight = (_a = cellContainer.querySelector(this.CELL_DESCRIPTION_STRING)) === null || _a === void 0 ? void 0 : _a.clientHeight;
|
1271
|
+
const cellContainerHeight = cellContainer.clientHeight;
|
1272
|
+
let totalHeight = cellContainerHeight;
|
1244
1273
|
if (cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
|
1245
|
-
|
1246
|
-
|
1247
|
-
|
1248
|
-
|
1249
|
-
|
1250
|
-
|
1251
|
-
else {
|
1252
|
-
iconHeight = 0;
|
1253
|
-
}
|
1254
|
-
const height = (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) -
|
1255
|
-
((_b = cellContainer.querySelector(this.CELL_DESCRIPTION_STRING)) === null || _b === void 0 ? void 0 : _b.clientHeight) -
|
1256
|
-
iconHeight;
|
1257
|
-
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: ${this.getLines(height || 0)}`);
|
1258
|
-
}
|
1259
|
-
else {
|
1260
|
-
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: ${this.getLines(cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)}`);
|
1274
|
+
descriptionCellHeight &&
|
1275
|
+
cellContainerHeight > descriptionCellHeight) {
|
1276
|
+
const iconHeight = (deviceSizeMatches(IC_DEVICE_SIZES.XS) &&
|
1277
|
+
((_b = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.querySelector(".icon")) === null || _b === void 0 ? void 0 : _b.clientHeight)) ||
|
1278
|
+
0;
|
1279
|
+
totalHeight = totalHeight - descriptionCellHeight - iconHeight;
|
1261
1280
|
}
|
1281
|
+
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: ${this.getLines(totalHeight || 0)}`);
|
1262
1282
|
}
|
1263
1283
|
createTruncationTooltip(typographyEl, cellContainer) {
|
1284
|
+
var _a;
|
1264
1285
|
const tooltipEl = document.createElement(this.IC_TOOLTIP_STRING);
|
1265
1286
|
tooltipEl.setAttribute("target", typographyEl.id);
|
1266
1287
|
tooltipEl.setAttribute("label", typographyEl.textContent);
|
@@ -1269,25 +1290,38 @@ export class DataTable {
|
|
1269
1290
|
// This might need reverting back to absolute if the tooltip doesn't dynamically position itself correctly
|
1270
1291
|
strategy: "fixed",
|
1271
1292
|
});
|
1272
|
-
|
1273
|
-
|
1293
|
+
(_a = cellContainer
|
1294
|
+
.querySelector(this.CELL_TEXT_WRAPPER_STRING)) === null || _a === void 0 ? void 0 : _a.prepend(tooltipEl);
|
1274
1295
|
tooltipEl.prepend(typographyEl);
|
1275
1296
|
}
|
1276
1297
|
render() {
|
1277
1298
|
var _a, _b;
|
1278
|
-
const { caption, createColumnHeaders, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationBarOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumn, sortedColumnOrder, stickyColumnHeaders, updateScrollOffset, updating, theme, } = this;
|
1279
|
-
|
1299
|
+
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;
|
1300
|
+
const rowsSelected = selectedRows.length > 0;
|
1301
|
+
const allRowsSelected = selectedRows.length === (showPagination ? rowsPerPage : data === null || data === void 0 ? void 0 : data.length);
|
1302
|
+
const headerCheckboxLabelState = rowsSelected
|
1303
|
+
? allRowsSelected
|
1304
|
+
? "deselect all"
|
1305
|
+
: "select all remaining"
|
1306
|
+
: "select all";
|
1307
|
+
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: {
|
1280
1308
|
["table-row-container"]: true,
|
1281
1309
|
scrollable,
|
1282
|
-
}, tabIndex: scrollable ? 0 :
|
1283
|
-
|
1284
|
-
} }, h("caption", { key: '
|
1310
|
+
}, tabIndex: scrollable ? 0 : undefined, onScroll: updateScrollOffset }, h("table", { key: '283aac0915752eb13c7651fe2594cbbce7eb1164', style: {
|
1311
|
+
"--table-layout": tableLayout,
|
1312
|
+
} }, h("caption", { key: '9d49941bb4a1f14337af61c35057895a32466c0e', class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { key: '970d0ecda5d04b06b394f0f1cf1e58dfdd93660f', class: {
|
1285
1313
|
["column-header-sticky"]: stickyColumnHeaders,
|
1286
1314
|
["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
|
1287
|
-
} }, h("tr", { key: '
|
1315
|
+
} }, h("tr", { key: 'dd2b7e0e731a8652d726b98c4d4b53de1d4bc89a' }, rowSelection && data && (h("th", { key: 'd1c97faa5830737aa4c9d7020b7bf89a2357d127', class: {
|
1316
|
+
"column-header": true,
|
1317
|
+
"checkbox-cell": true,
|
1318
|
+
"updating-state-headers": updating && !loading,
|
1319
|
+
[`table-density-${density}`]: this.notDefaultDensity(),
|
1320
|
+
} }, 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 &&
|
1288
1321
|
!loading &&
|
1289
|
-
(hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(
|
1290
|
-
? `${((_b =
|
1322
|
+
(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
|
1323
|
+
? `${((_b = columns.find((col) => col.key === sortedColumn)) === null || _b === void 0 ? void 0 : _b.title) ||
|
1324
|
+
sortedColumn} sorted ${sortedColumnOrder}`
|
1291
1325
|
: "table unsorted")))));
|
1292
1326
|
}
|
1293
1327
|
static get is() { return "ic-data-table"; }
|
@@ -1371,7 +1405,7 @@ export class DataTable {
|
|
1371
1405
|
"mutable": false,
|
1372
1406
|
"complexType": {
|
1373
1407
|
"original": "IcDataTableDataType[]",
|
1374
|
-
"resolved": "IcDataTableDataType[]",
|
1408
|
+
"resolved": "IcDataTableDataType[] | undefined",
|
1375
1409
|
"references": {
|
1376
1410
|
"IcDataTableDataType": {
|
1377
1411
|
"location": "import",
|
@@ -1394,7 +1428,7 @@ export class DataTable {
|
|
1394
1428
|
"mutable": false,
|
1395
1429
|
"complexType": {
|
1396
1430
|
"original": "boolean",
|
1397
|
-
"resolved": "boolean",
|
1431
|
+
"resolved": "boolean | undefined",
|
1398
1432
|
"references": {}
|
1399
1433
|
},
|
1400
1434
|
"required": false,
|
@@ -1424,7 +1458,7 @@ export class DataTable {
|
|
1424
1458
|
}
|
1425
1459
|
},
|
1426
1460
|
"required": false,
|
1427
|
-
"optional":
|
1461
|
+
"optional": false,
|
1428
1462
|
"docs": {
|
1429
1463
|
"tags": [],
|
1430
1464
|
"text": "Set the density of the table including font and padding."
|
@@ -1444,7 +1478,7 @@ export class DataTable {
|
|
1444
1478
|
"references": {}
|
1445
1479
|
},
|
1446
1480
|
"required": false,
|
1447
|
-
"optional":
|
1481
|
+
"optional": false,
|
1448
1482
|
"docs": {
|
1449
1483
|
"tags": [],
|
1450
1484
|
"text": "Applies a border to the table container."
|
@@ -1470,7 +1504,7 @@ export class DataTable {
|
|
1470
1504
|
}
|
1471
1505
|
},
|
1472
1506
|
"required": false,
|
1473
|
-
"optional":
|
1507
|
+
"optional": false,
|
1474
1508
|
"docs": {
|
1475
1509
|
"tags": [],
|
1476
1510
|
"text": "Sets the row height on all rows in the table that aren't set using the `variableRowHeight` method."
|
@@ -1486,7 +1520,7 @@ export class DataTable {
|
|
1486
1520
|
"mutable": false,
|
1487
1521
|
"complexType": {
|
1488
1522
|
"original": "string",
|
1489
|
-
"resolved": "string",
|
1523
|
+
"resolved": "string | undefined",
|
1490
1524
|
"references": {}
|
1491
1525
|
},
|
1492
1526
|
"required": false,
|
@@ -1500,32 +1534,12 @@ export class DataTable {
|
|
1500
1534
|
"attribute": "height",
|
1501
1535
|
"reflect": false
|
1502
1536
|
},
|
1503
|
-
"highlightSelectedRow": {
|
1504
|
-
"type": "boolean",
|
1505
|
-
"mutable": false,
|
1506
|
-
"complexType": {
|
1507
|
-
"original": "boolean",
|
1508
|
-
"resolved": "boolean",
|
1509
|
-
"references": {}
|
1510
|
-
},
|
1511
|
-
"required": false,
|
1512
|
-
"optional": true,
|
1513
|
-
"docs": {
|
1514
|
-
"tags": [],
|
1515
|
-
"text": "If `true`, the selected row is highlighted using a background colour."
|
1516
|
-
},
|
1517
|
-
"getter": false,
|
1518
|
-
"setter": false,
|
1519
|
-
"attribute": "highlight-selected-row",
|
1520
|
-
"reflect": false,
|
1521
|
-
"defaultValue": "true"
|
1522
|
-
},
|
1523
1537
|
"hideColumnHeaders": {
|
1524
1538
|
"type": "boolean",
|
1525
1539
|
"mutable": false,
|
1526
1540
|
"complexType": {
|
1527
1541
|
"original": "boolean",
|
1528
|
-
"resolved": "boolean",
|
1542
|
+
"resolved": "boolean | undefined",
|
1529
1543
|
"references": {}
|
1530
1544
|
},
|
1531
1545
|
"required": false,
|
@@ -1549,7 +1563,7 @@ export class DataTable {
|
|
1549
1563
|
"references": {}
|
1550
1564
|
},
|
1551
1565
|
"required": false,
|
1552
|
-
"optional":
|
1566
|
+
"optional": false,
|
1553
1567
|
"docs": {
|
1554
1568
|
"tags": [],
|
1555
1569
|
"text": "When set to `true`, the full table will show a loading state, featuring a radial indicator."
|
@@ -1565,7 +1579,7 @@ export class DataTable {
|
|
1565
1579
|
"mutable": false,
|
1566
1580
|
"complexType": {
|
1567
1581
|
"original": "{\n description?: string;\n label?: string;\n labelDuration?: number;\n max?: number;\n min?: number;\n progress?: number;\n monochrome?: boolean;\n overlay?: boolean;\n }",
|
1568
|
-
"resolved": "{ description?: string; label?: string; labelDuration?: number; max?: number; min?: number; progress?: number; monochrome?: boolean; overlay?: boolean; }",
|
1582
|
+
"resolved": "undefined | { description?: string | undefined; label?: string | undefined; labelDuration?: number | undefined; max?: number | undefined; min?: number | undefined; progress?: number | undefined; monochrome?: boolean | undefined; overlay?: boolean | undefined; }",
|
1569
1583
|
"references": {}
|
1570
1584
|
},
|
1571
1585
|
"required": false,
|
@@ -1582,7 +1596,7 @@ export class DataTable {
|
|
1582
1596
|
"mutable": false,
|
1583
1597
|
"complexType": {
|
1584
1598
|
"original": "string",
|
1585
|
-
"resolved": "string",
|
1599
|
+
"resolved": "string | undefined",
|
1586
1600
|
"references": {}
|
1587
1601
|
},
|
1588
1602
|
"required": false,
|
@@ -1601,7 +1615,7 @@ export class DataTable {
|
|
1601
1615
|
"mutable": false,
|
1602
1616
|
"complexType": {
|
1603
1617
|
"original": "string",
|
1604
|
-
"resolved": "string",
|
1618
|
+
"resolved": "string | undefined",
|
1605
1619
|
"references": {}
|
1606
1620
|
},
|
1607
1621
|
"required": false,
|
@@ -1624,7 +1638,7 @@ export class DataTable {
|
|
1624
1638
|
"references": {}
|
1625
1639
|
},
|
1626
1640
|
"required": false,
|
1627
|
-
"optional":
|
1641
|
+
"optional": false,
|
1628
1642
|
"docs": {
|
1629
1643
|
"tags": [],
|
1630
1644
|
"text": "The minimum amount of time the `loading` state displays for before showing the data. Used to prevent flashing in the component."
|
@@ -1650,7 +1664,7 @@ export class DataTable {
|
|
1650
1664
|
}
|
1651
1665
|
},
|
1652
1666
|
"required": false,
|
1653
|
-
"optional":
|
1667
|
+
"optional": false,
|
1654
1668
|
"docs": {
|
1655
1669
|
"tags": [],
|
1656
1670
|
"text": "Sets the props for the built-in pagination bar. If the `pagination-bar` slot is used then this prop is ignored."
|
@@ -1659,7 +1673,7 @@ export class DataTable {
|
|
1659
1673
|
"setter": false,
|
1660
1674
|
"defaultValue": "{\n alignment: \"right\",\n hideAllFromItemsPerPage: false,\n hideRangeLabel: false,\n itemLabel: \"Item\",\n itemsPerPageOptions: [\n { label: \"10\", value: \"10\" },\n { label: \"25\", value: \"25\" },\n { label: \"50\", value: \"50\" },\n ],\n monochrome: false,\n pageLabel: \"Page\",\n rangeLabelType: \"page\",\n selectedItemsPerPage: 10,\n setToFirstPageOnPaginationChange: false,\n showGoToPageControl: true,\n showItemsPerPageControl: true,\n type: \"simple\",\n }"
|
1661
1675
|
},
|
1662
|
-
"
|
1676
|
+
"rowSelection": {
|
1663
1677
|
"type": "boolean",
|
1664
1678
|
"mutable": false,
|
1665
1679
|
"complexType": {
|
@@ -1668,6 +1682,26 @@ export class DataTable {
|
|
1668
1682
|
"references": {}
|
1669
1683
|
},
|
1670
1684
|
"required": false,
|
1685
|
+
"optional": false,
|
1686
|
+
"docs": {
|
1687
|
+
"tags": [],
|
1688
|
+
"text": "If `true`, a checkbox column will be displayed to the left of the table which allows multiple rows to be selected."
|
1689
|
+
},
|
1690
|
+
"getter": false,
|
1691
|
+
"setter": false,
|
1692
|
+
"attribute": "row-selection",
|
1693
|
+
"reflect": false,
|
1694
|
+
"defaultValue": "false"
|
1695
|
+
},
|
1696
|
+
"showPagination": {
|
1697
|
+
"type": "boolean",
|
1698
|
+
"mutable": false,
|
1699
|
+
"complexType": {
|
1700
|
+
"original": "boolean",
|
1701
|
+
"resolved": "boolean | undefined",
|
1702
|
+
"references": {}
|
1703
|
+
},
|
1704
|
+
"required": false,
|
1671
1705
|
"optional": true,
|
1672
1706
|
"docs": {
|
1673
1707
|
"tags": [],
|
@@ -1684,7 +1718,7 @@ export class DataTable {
|
|
1684
1718
|
"mutable": false,
|
1685
1719
|
"complexType": {
|
1686
1720
|
"original": "boolean",
|
1687
|
-
"resolved": "boolean",
|
1721
|
+
"resolved": "boolean | undefined",
|
1688
1722
|
"references": {}
|
1689
1723
|
},
|
1690
1724
|
"required": false,
|
@@ -1704,7 +1738,7 @@ export class DataTable {
|
|
1704
1738
|
"mutable": false,
|
1705
1739
|
"complexType": {
|
1706
1740
|
"original": "{\n sortOrders: IcDataTableSortOrderOptions[];\n defaultColumn?: string;\n }",
|
1707
|
-
"resolved": "{ sortOrders: IcDataTableSortOrderOptions[]; defaultColumn?: string; }",
|
1741
|
+
"resolved": "{ sortOrders: IcDataTableSortOrderOptions[]; defaultColumn?: string | undefined; }",
|
1708
1742
|
"references": {
|
1709
1743
|
"IcDataTableSortOrderOptions": {
|
1710
1744
|
"location": "import",
|
@@ -1714,7 +1748,7 @@ export class DataTable {
|
|
1714
1748
|
}
|
1715
1749
|
},
|
1716
1750
|
"required": false,
|
1717
|
-
"optional":
|
1751
|
+
"optional": false,
|
1718
1752
|
"docs": {
|
1719
1753
|
"tags": [],
|
1720
1754
|
"text": "Sets the order columns will be sorted in and allows for 'default' sorts to be added."
|
@@ -1732,7 +1766,7 @@ export class DataTable {
|
|
1732
1766
|
"references": {}
|
1733
1767
|
},
|
1734
1768
|
"required": false,
|
1735
|
-
"optional":
|
1769
|
+
"optional": false,
|
1736
1770
|
"docs": {
|
1737
1771
|
"tags": [],
|
1738
1772
|
"text": "If `true`, column headers will remain at the top of the table when scrolling vertically."
|
@@ -1752,7 +1786,7 @@ export class DataTable {
|
|
1752
1786
|
"references": {}
|
1753
1787
|
},
|
1754
1788
|
"required": false,
|
1755
|
-
"optional":
|
1789
|
+
"optional": false,
|
1756
1790
|
"docs": {
|
1757
1791
|
"tags": [],
|
1758
1792
|
"text": "If `true`, row headers will remain to the left when scrolling horizontally."
|
@@ -1768,7 +1802,7 @@ export class DataTable {
|
|
1768
1802
|
"mutable": false,
|
1769
1803
|
"complexType": {
|
1770
1804
|
"original": "\"fixed\" | \"auto\"",
|
1771
|
-
"resolved": "\"auto\" | \"fixed\"",
|
1805
|
+
"resolved": "\"auto\" | \"fixed\" | undefined",
|
1772
1806
|
"references": {}
|
1773
1807
|
},
|
1774
1808
|
"required": false,
|
@@ -1788,7 +1822,7 @@ export class DataTable {
|
|
1788
1822
|
"mutable": false,
|
1789
1823
|
"complexType": {
|
1790
1824
|
"original": "IcThemeMode",
|
1791
|
-
"resolved": "\"dark\" | \"inherit\" | \"light\"",
|
1825
|
+
"resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
|
1792
1826
|
"references": {
|
1793
1827
|
"IcThemeMode": {
|
1794
1828
|
"location": "import",
|
@@ -1814,7 +1848,7 @@ export class DataTable {
|
|
1814
1848
|
"mutable": false,
|
1815
1849
|
"complexType": {
|
1816
1850
|
"original": "IcDataTableTruncationTypes",
|
1817
|
-
"resolved": "\"show-hide\" | \"tooltip\"",
|
1851
|
+
"resolved": "\"show-hide\" | \"tooltip\" | undefined",
|
1818
1852
|
"references": {
|
1819
1853
|
"IcDataTableTruncationTypes": {
|
1820
1854
|
"location": "import",
|
@@ -1843,7 +1877,7 @@ export class DataTable {
|
|
1843
1877
|
"references": {}
|
1844
1878
|
},
|
1845
1879
|
"required": false,
|
1846
|
-
"optional":
|
1880
|
+
"optional": false,
|
1847
1881
|
"docs": {
|
1848
1882
|
"tags": [],
|
1849
1883
|
"text": "If `true`, the table displays a linear loading indicator below the header row to indicate an updating state."
|
@@ -1859,7 +1893,7 @@ export class DataTable {
|
|
1859
1893
|
"mutable": false,
|
1860
1894
|
"complexType": {
|
1861
1895
|
"original": "{\n description?: string;\n max?: number;\n min?: number;\n progress?: number;\n monochrome?: boolean;\n }",
|
1862
|
-
"resolved": "{ description?: string; max?: number; min?: number; progress?: number; monochrome?: boolean; }",
|
1896
|
+
"resolved": "undefined | { description?: string | undefined; max?: number | undefined; min?: number | undefined; progress?: number | undefined; monochrome?: boolean | undefined; }",
|
1863
1897
|
"references": {}
|
1864
1898
|
},
|
1865
1899
|
"required": false,
|
@@ -1876,7 +1910,7 @@ export class DataTable {
|
|
1876
1910
|
"mutable": true,
|
1877
1911
|
"complexType": {
|
1878
1912
|
"original": "(params: {\n [key: string]: any;\n index: number;\n }) => IcDataTableRowHeights | null",
|
1879
|
-
"resolved": "(params: { [key: string]: any; index: number; }) => IcDataTableRowHeights",
|
1913
|
+
"resolved": "((params: { [key: string]: any; index: number; }) => IcDataTableRowHeights | null) | undefined",
|
1880
1914
|
"references": {
|
1881
1915
|
"IcDataTableRowHeights": {
|
1882
1916
|
"location": "import",
|
@@ -1899,7 +1933,7 @@ export class DataTable {
|
|
1899
1933
|
"mutable": false,
|
1900
1934
|
"complexType": {
|
1901
1935
|
"original": "string",
|
1902
|
-
"resolved": "string",
|
1936
|
+
"resolved": "string | undefined",
|
1903
1937
|
"references": {}
|
1904
1938
|
},
|
1905
1939
|
"required": false,
|
@@ -1922,7 +1956,7 @@ export class DataTable {
|
|
1922
1956
|
"rowsPerPage": {},
|
1923
1957
|
"scrollable": {},
|
1924
1958
|
"scrollOffset": {},
|
1925
|
-
"
|
1959
|
+
"selectedRows": {},
|
1926
1960
|
"sortedColumn": {},
|
1927
1961
|
"sortedColumnOrder": {},
|
1928
1962
|
"toRow": {},
|
@@ -1946,6 +1980,27 @@ export class DataTable {
|
|
1946
1980
|
"resolved": "void",
|
1947
1981
|
"references": {}
|
1948
1982
|
}
|
1983
|
+
}, {
|
1984
|
+
"method": "icSelectAllRows",
|
1985
|
+
"name": "icSelectAllRows",
|
1986
|
+
"bubbles": true,
|
1987
|
+
"cancelable": true,
|
1988
|
+
"composed": true,
|
1989
|
+
"docs": {
|
1990
|
+
"tags": [],
|
1991
|
+
"text": "Emitted when all rows are selected or deselected in the data table via the \"select all\" checkbox."
|
1992
|
+
},
|
1993
|
+
"complexType": {
|
1994
|
+
"original": "IcDataTableDataType[]",
|
1995
|
+
"resolved": "IcDataTableDataType[]",
|
1996
|
+
"references": {
|
1997
|
+
"IcDataTableDataType": {
|
1998
|
+
"location": "import",
|
1999
|
+
"path": "./ic-data-table.types",
|
2000
|
+
"id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableDataType"
|
2001
|
+
}
|
2002
|
+
}
|
2003
|
+
}
|
1949
2004
|
}, {
|
1950
2005
|
"method": "icSelectedRowChange",
|
1951
2006
|
"name": "icSelectedRowChange",
|
@@ -1957,9 +2012,15 @@ export class DataTable {
|
|
1957
2012
|
"text": "Emitted when the selected row changes in the data table."
|
1958
2013
|
},
|
1959
2014
|
"complexType": {
|
1960
|
-
"original": "
|
1961
|
-
"resolved": "
|
1962
|
-
"references": {
|
2015
|
+
"original": "{\n row: IcDataTableDataType | null;\n selectedRows: IcDataTableDataType[];\n }",
|
2016
|
+
"resolved": "{ row: IcDataTableDataType | null; selectedRows: IcDataTableDataType[]; }",
|
2017
|
+
"references": {
|
2018
|
+
"IcDataTableDataType": {
|
2019
|
+
"location": "import",
|
2020
|
+
"path": "./ic-data-table.types",
|
2021
|
+
"id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableDataType"
|
2022
|
+
}
|
2023
|
+
}
|
1963
2024
|
}
|
1964
2025
|
}, {
|
1965
2026
|
"method": "icSortChange",
|
@@ -1991,7 +2052,7 @@ export class DataTable {
|
|
1991
2052
|
"signature": "(rowHeight?: number | \"auto\") => Promise<void>",
|
1992
2053
|
"parameters": [{
|
1993
2054
|
"name": "rowHeight",
|
1994
|
-
"type": "number | \"auto\"",
|
2055
|
+
"type": "number | \"auto\" | undefined",
|
1995
2056
|
"docs": ""
|
1996
2057
|
}],
|
1997
2058
|
"references": {
|
@@ -2059,12 +2120,6 @@ export class DataTable {
|
|
2059
2120
|
"target": undefined,
|
2060
2121
|
"capture": false,
|
2061
2122
|
"passive": false
|
2062
|
-
}, {
|
2063
|
-
"name": "click",
|
2064
|
-
"method": "clickListener",
|
2065
|
-
"target": "window",
|
2066
|
-
"capture": false,
|
2067
|
-
"passive": false
|
2068
2123
|
}];
|
2069
2124
|
}
|
2070
2125
|
}
|