@ukic/canary-web-components 2.0.0-canary.4 → 2.0.0-canary.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -2
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/date-helpers-c9551119.js +150 -0
- package/dist/cjs/date-helpers-c9551119.js.map +1 -0
- package/dist/cjs/helpers-951fb33a.js +433 -0
- package/dist/cjs/helpers-951fb33a.js.map +1 -0
- package/dist/cjs/{helpers-bbe55215.js → helpers-eabe59b6.js} +147 -100
- package/dist/cjs/helpers-eabe59b6.js.map +1 -0
- package/dist/cjs/ic-accordion-group.cjs.entry.js +31 -4
- package/dist/cjs/ic-accordion-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-accordion.cjs.entry.js +11 -4
- package/dist/cjs/ic-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-alert.cjs.entry.js +20 -6
- package/dist/cjs/ic-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-back-to-top.cjs.entry.js +26 -17
- package/dist/cjs/ic-back-to-top.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-badge.cjs.entry.js +86 -83
- package/dist/cjs/ic-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +62 -25
- package/dist/cjs/ic-breadcrumb-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-breadcrumb.cjs.entry.js +2 -2
- package/dist/cjs/ic-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js +145 -103
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-card-horizontal.cjs.entry.js +130 -0
- package/dist/cjs/ic-card-horizontal.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-card.cjs.entry.js +30 -7
- package/dist/cjs/ic-card.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox-group.cjs.entry.js +28 -17
- package/dist/cjs/ic-checkbox-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js +50 -31
- package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-chip.cjs.entry.js +45 -21
- package/dist/cjs/ic-chip.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-classification-banner.cjs.entry.js +14 -5
- package/dist/cjs/ic-classification-banner.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-data-entity.cjs.entry.js +3 -6
- package/dist/cjs/ic-data-entity.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-data-row.cjs.entry.js +21 -35
- package/dist/cjs/ic-data-row.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-data-table-title-bar.cjs.entry.js +57 -0
- package/dist/cjs/ic-data-table-title-bar.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-data-table.cjs.entry.js +1079 -84
- package/dist/cjs/ic-data-table.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-date-input.cjs.entry.js +1123 -0
- package/dist/cjs/ic-date-input.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-date-picker.cjs.entry.js +1129 -0
- package/dist/cjs/ic-date-picker.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-dialog.cjs.entry.js +54 -12
- package/dist/cjs/ic-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-divider.cjs.entry.js +1 -1
- package/dist/cjs/ic-empty-state_2.cjs.entry.js +388 -0
- package/dist/cjs/ic-empty-state_2.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-footer-link-group.cjs.entry.js +4 -4
- package/dist/cjs/ic-footer-link-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer-link.cjs.entry.js +3 -3
- package/dist/cjs/ic-footer-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer.cjs.entry.js +18 -7
- package/dist/cjs/ic-footer.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-hero.cjs.entry.js +12 -2
- package/dist/cjs/ic-hero.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +5 -5
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-component-container_4.cjs.entry.js +164 -0
- package/dist/cjs/ic-input-component-container_4.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-link.cjs.entry.js +34 -16
- package/dist/cjs/ic-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-menu-group.cjs.entry.js +2 -2
- package/dist/cjs/ic-menu-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-menu-item.cjs.entry.js +21 -20
- package/dist/cjs/ic-menu-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-menu-with-multi.cjs.entry.js +2740 -0
- package/dist/cjs/ic-menu-with-multi.cjs.entry.js.map +1 -0
- package/dist/cjs/{ic-input-component-container_3.cjs.entry.js → ic-menu.cjs.entry.js} +17 -80
- package/dist/cjs/ic-menu.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-navigation-button.cjs.entry.js +28 -7
- package/dist/cjs/ic-navigation-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-group.cjs.entry.js +32 -22
- package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-item.cjs.entry.js +82 -36
- package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-menu.cjs.entry.js +1 -1
- package/dist/cjs/ic-page-header.cjs.entry.js +10 -10
- package/dist/cjs/ic-page-header.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-pagination_4.cjs.entry.js +231 -116
- package/dist/cjs/ic-pagination_4.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-popover-menu.cjs.entry.js +40 -36
- package/dist/cjs/ic-popover-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-group.cjs.entry.js +100 -59
- package/dist/cjs/ic-radio-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-option.cjs.entry.js +59 -42
- package/dist/cjs/ic-radio-option.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-search-bar.cjs.entry.js +22 -30
- package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-section-container.cjs.entry.js +1 -1
- package/dist/cjs/ic-section-container.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-select-with-multi.cjs.entry.js +796 -0
- package/dist/cjs/ic-select-with-multi.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-side-navigation.cjs.entry.js +53 -73
- package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-skeleton.cjs.entry.js +16 -35
- package/dist/cjs/ic-skeleton.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-status-tag.cjs.entry.js +4 -2
- package/dist/cjs/ic-status-tag.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-step.cjs.entry.js +5 -2
- package/dist/cjs/ic-step.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-stepper.cjs.entry.js +31 -9
- package/dist/cjs/ic-stepper.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-switch.cjs.entry.js +7 -3
- package/dist/cjs/ic-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-context.cjs.entry.js +78 -130
- package/dist/cjs/ic-tab-context.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-tab-panel.cjs.entry.js +5 -13
- package/dist/cjs/ic-tab-panel.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab.cjs.entry.js +16 -14
- package/dist/cjs/ic-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-theme.cjs.entry.js +13 -22
- package/dist/cjs/ic-theme.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toast-region.cjs.entry.js +6 -0
- package/dist/cjs/ic-toast-region.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toast.cjs.entry.js +21 -18
- package/dist/cjs/ic-toast.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js +201 -0
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-toggle-button.cjs.entry.js +97 -0
- package/dist/cjs/ic-toggle-button.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-top-navigation.cjs.entry.js +60 -82
- package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tree-item.cjs.entry.js +253 -0
- package/dist/cjs/ic-tree-item.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-tree-view.cjs.entry.js +215 -0
- package/dist/cjs/ic-tree-view.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-typography.cjs.entry.js +51 -14
- package/dist/cjs/ic-typography.cjs.entry.js.map +1 -1
- package/dist/cjs/index-4cf27b16.js +48 -12
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/assets/arrow-dropdown.svg +3 -0
- package/dist/collection/assets/calendar.svg +3 -0
- package/dist/collection/collection-manifest.json +11 -1
- package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.css +658 -0
- package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.js +375 -0
- package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.js.map +1 -0
- package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.stories.js +605 -0
- package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.stories.js.map +1 -0
- package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.types.js +2 -0
- package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.types.js.map +1 -0
- package/dist/collection/components/ic-card-horizontal/test/basic/ic-card-horizontal.spec.js +140 -0
- package/dist/collection/components/ic-card-horizontal/test/basic/ic-card-horizontal.spec.js.map +1 -0
- package/dist/collection/components/ic-data-table/ic-data-table.css +286 -10
- package/dist/collection/components/ic-data-table/ic-data-table.js +1533 -123
- 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 +414 -0
- package/dist/collection/components/ic-data-table/ic-data-table.stories.js.map +1 -0
- package/dist/collection/components/ic-data-table/ic-data-table.types.js.map +1 -1
- package/dist/collection/components/ic-data-table/story-data.js +1326 -43
- package/dist/collection/components/ic-data-table/story-data.js.map +1 -1
- package/dist/collection/components/ic-data-table/test/basic/ic-data-table.spec.js +460 -3
- package/dist/collection/components/ic-data-table/test/basic/ic-data-table.spec.js.map +1 -1
- package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.css +91 -0
- package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js +160 -0
- package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js.map +1 -0
- package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.stories.js +98 -0
- package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.stories.js.map +1 -0
- package/dist/collection/components/ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.js +11 -0
- package/dist/collection/components/ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.js.map +1 -0
- package/dist/collection/components/ic-data-table-title-bar/test/basic/ic-data-table-title-bar.spec.js +70 -0
- package/dist/collection/components/ic-data-table-title-bar/test/basic/ic-data-table-title-bar.spec.js.map +1 -0
- package/dist/collection/components/ic-date-input/ic-date-input.css +564 -0
- package/dist/collection/components/ic-date-input/ic-date-input.js +1808 -0
- package/dist/collection/components/ic-date-input/ic-date-input.js.map +1 -0
- package/dist/collection/components/ic-date-input/ic-date-input.stories.js +341 -0
- package/dist/collection/components/ic-date-input/ic-date-input.stories.js.map +1 -0
- package/dist/collection/components/ic-date-input/story-data.js +28 -0
- package/dist/collection/components/ic-date-input/story-data.js.map +1 -0
- package/dist/collection/components/ic-date-input/test/basic/ic-date-input.spec.js +1158 -0
- package/dist/collection/components/ic-date-input/test/basic/ic-date-input.spec.js.map +1 -0
- package/dist/collection/components/ic-date-input/test/helpers/ic-date-input.js +42 -0
- package/dist/collection/components/ic-date-input/test/helpers/ic-date-input.js.map +1 -0
- package/dist/collection/components/ic-date-picker/ic-date-picker.css +885 -0
- package/dist/collection/components/ic-date-picker/ic-date-picker.js +1688 -0
- package/dist/collection/components/ic-date-picker/ic-date-picker.js.map +1 -0
- package/dist/collection/components/ic-date-picker/ic-date-picker.stories.js +167 -0
- package/dist/collection/components/ic-date-picker/ic-date-picker.stories.js.map +1 -0
- package/dist/collection/components/ic-date-picker/ic-day-button.js +36 -0
- package/dist/collection/components/ic-date-picker/ic-day-button.js.map +1 -0
- package/dist/collection/components/ic-date-picker/ic-month-picker.js +29 -0
- package/dist/collection/components/ic-date-picker/ic-month-picker.js.map +1 -0
- package/dist/collection/components/ic-date-picker/ic-year-picker.js +39 -0
- package/dist/collection/components/ic-date-picker/ic-year-picker.js.map +1 -0
- package/dist/collection/components/ic-date-picker/story-data.js +179 -0
- package/dist/collection/components/ic-date-picker/story-data.js.map +1 -0
- package/dist/collection/components/ic-date-picker/test/a11y/ic-date-picker.test.a11y.js +13 -0
- package/dist/collection/components/ic-date-picker/test/a11y/ic-date-picker.test.a11y.js.map +1 -0
- package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker-utils.spec.js +207 -0
- package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker-utils.spec.js.map +1 -0
- package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker.spec.js +1030 -0
- package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker.spec.js.map +1 -0
- package/dist/collection/components/ic-menu-with-multi/ic-menu.css +701 -0
- package/dist/collection/components/ic-menu-with-multi/ic-menu.js +1599 -0
- package/dist/collection/components/ic-menu-with-multi/ic-menu.js.map +1 -0
- package/dist/collection/components/ic-menu-with-multi/test/basic/ic-menu.spec.js +1057 -0
- package/dist/collection/components/ic-menu-with-multi/test/basic/ic-menu.spec.js.map +1 -0
- package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.js +346 -166
- package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.js.map +1 -1
- package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.stories.js +260 -0
- package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.stories.js.map +1 -0
- package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.types.js +2 -0
- package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.types.js.map +1 -0
- package/dist/collection/components/ic-pagination-bar/test/a11y/ic-pagination-bar.test.a11y.js +8 -1
- package/dist/collection/components/ic-pagination-bar/test/a11y/ic-pagination-bar.test.a11y.js.map +1 -1
- package/dist/collection/components/ic-pagination-bar/test/basic/ic-pagination-bar.spec.js +75 -12
- package/dist/collection/components/ic-pagination-bar/test/basic/ic-pagination-bar.spec.js.map +1 -1
- package/dist/collection/components/ic-select-with-multi/assets/Check.svg +3 -0
- package/dist/collection/components/ic-select-with-multi/assets/Clear.svg +3 -0
- package/dist/collection/components/ic-select-with-multi/assets/Expand.svg +3 -0
- package/dist/collection/components/ic-select-with-multi/ic-select-multi.stories.js +144 -0
- package/dist/collection/components/ic-select-with-multi/ic-select-multi.stories.js.map +1 -0
- package/dist/collection/components/ic-select-with-multi/ic-select.css +693 -0
- package/dist/collection/components/ic-select-with-multi/ic-select.js +1649 -0
- package/dist/collection/components/ic-select-with-multi/ic-select.js.map +1 -0
- package/dist/collection/components/ic-select-with-multi/story-data.js +216 -0
- package/dist/collection/components/ic-select-with-multi/story-data.js.map +1 -0
- package/dist/collection/components/ic-select-with-multi/test/basic/ic-select.spec.js +1518 -0
- package/dist/collection/components/ic-select-with-multi/test/basic/ic-select.spec.js.map +1 -0
- package/dist/collection/components/ic-tree-item/ic-tree-item.css +186 -0
- package/dist/collection/components/ic-tree-item/ic-tree-item.js +620 -0
- package/dist/collection/components/ic-tree-item/ic-tree-item.js.map +1 -0
- package/dist/collection/components/ic-tree-item/test/basic/ic-tree-item.spec.js +117 -0
- package/dist/collection/components/ic-tree-item/test/basic/ic-tree-item.spec.js.map +1 -0
- package/dist/collection/components/ic-tree-view/ic-tree-view.css +74 -0
- package/dist/collection/components/ic-tree-view/ic-tree-view.js +346 -0
- package/dist/collection/components/ic-tree-view/ic-tree-view.js.map +1 -0
- package/dist/collection/components/ic-tree-view/ic-tree-view.stories.js +456 -0
- package/dist/collection/components/ic-tree-view/ic-tree-view.stories.js.map +1 -0
- package/dist/collection/components/ic-tree-view/test/basic/ic-tree-view.spec.js +85 -0
- package/dist/collection/components/ic-tree-view/test/basic/ic-tree-view.spec.js.map +1 -0
- package/dist/collection/utils/constants.js +83 -0
- package/dist/collection/utils/constants.js.map +1 -0
- package/dist/collection/utils/date-helpers.js +133 -0
- package/dist/collection/utils/date-helpers.js.map +1 -0
- package/dist/collection/utils/helpers.js +473 -5
- package/dist/collection/utils/helpers.js.map +1 -1
- package/dist/collection/utils/types.js +58 -0
- package/dist/collection/utils/types.js.map +1 -0
- package/dist/components/helpers.js +141 -98
- package/dist/components/helpers.js.map +1 -1
- package/dist/components/helpers2.js +403 -0
- package/dist/components/helpers2.js.map +1 -0
- package/dist/components/ic-accordion-group.js +38 -7
- package/dist/components/ic-accordion-group.js.map +1 -1
- package/dist/components/ic-accordion.js +12 -4
- package/dist/components/ic-accordion.js.map +1 -1
- package/dist/components/ic-alert2.js +21 -6
- package/dist/components/ic-alert2.js.map +1 -1
- package/dist/components/ic-back-to-top.js +34 -18
- package/dist/components/ic-back-to-top.js.map +1 -1
- package/dist/components/ic-badge.js +91 -84
- package/dist/components/ic-badge.js.map +1 -1
- package/dist/components/ic-breadcrumb-group.js +66 -25
- package/dist/components/ic-breadcrumb-group.js.map +1 -1
- package/dist/components/ic-breadcrumb2.js +2 -2
- package/dist/components/ic-breadcrumb2.js.map +1 -1
- package/dist/components/ic-button2.js +104 -74
- package/dist/components/ic-button2.js.map +1 -1
- package/dist/components/ic-card-horizontal.d.ts +11 -0
- package/dist/components/ic-card-horizontal.js +168 -0
- package/dist/components/ic-card-horizontal.js.map +1 -0
- package/dist/components/ic-card.js +34 -21
- package/dist/components/ic-card.js.map +1 -1
- package/dist/components/ic-checkbox-group.js +33 -18
- package/dist/components/ic-checkbox-group.js.map +1 -1
- package/dist/components/ic-checkbox.js +58 -33
- package/dist/components/ic-checkbox.js.map +1 -1
- package/dist/components/ic-chip.js +52 -23
- package/dist/components/ic-chip.js.map +1 -1
- package/dist/components/ic-classification-banner.js +14 -5
- package/dist/components/ic-classification-banner.js.map +1 -1
- package/dist/components/ic-data-entity.js +3 -6
- package/dist/components/ic-data-entity.js.map +1 -1
- package/dist/components/ic-data-row.js +21 -35
- package/dist/components/ic-data-row.js.map +1 -1
- package/dist/components/ic-data-table-title-bar.d.ts +11 -0
- package/dist/components/ic-data-table-title-bar.js +136 -0
- package/dist/components/ic-data-table-title-bar.js.map +1 -0
- package/dist/components/ic-data-table.js +1119 -91
- package/dist/components/ic-data-table.js.map +1 -1
- package/dist/components/ic-date-input.d.ts +11 -0
- package/dist/components/ic-date-input.js +8 -0
- package/dist/components/ic-date-input.js.map +1 -0
- package/dist/components/ic-date-input2.js +1359 -0
- package/dist/components/ic-date-input2.js.map +1 -0
- package/dist/components/ic-date-picker.d.ts +11 -0
- package/dist/components/ic-date-picker.js +1258 -0
- package/dist/components/ic-date-picker.js.map +1 -0
- package/dist/components/ic-dialog.js +55 -12
- package/dist/components/ic-dialog.js.map +1 -1
- package/dist/components/ic-divider2.js +1 -1
- package/dist/components/ic-empty-state.js +1 -57
- package/dist/components/ic-empty-state.js.map +1 -1
- package/dist/{esm/ic-empty-state.entry.js → components/ic-empty-state2.js} +47 -11
- package/dist/components/ic-empty-state2.js.map +1 -0
- package/dist/components/ic-footer-link-group.js +4 -4
- package/dist/components/ic-footer-link-group.js.map +1 -1
- package/dist/components/ic-footer-link.js +3 -3
- package/dist/components/ic-footer-link.js.map +1 -1
- package/dist/components/ic-footer.js +18 -7
- package/dist/components/ic-footer.js.map +1 -1
- package/dist/components/ic-hero.js +12 -2
- package/dist/components/ic-hero.js.map +1 -1
- package/dist/components/ic-horizontal-scroll2.js +5 -5
- package/dist/components/ic-horizontal-scroll2.js.map +1 -1
- package/dist/components/ic-input-component-container2.js +24 -8
- package/dist/components/ic-input-component-container2.js.map +1 -1
- package/dist/components/ic-input-label2.js +7 -5
- package/dist/components/ic-input-label2.js.map +1 -1
- package/dist/components/ic-input-validation2.js +1 -1
- package/dist/components/ic-link2.js +35 -17
- package/dist/components/ic-link2.js.map +1 -1
- package/dist/components/ic-loading-indicator2.js +2 -2
- package/dist/components/ic-loading-indicator2.js.map +1 -1
- package/dist/components/ic-menu-group.js +2 -2
- package/dist/components/ic-menu-group.js.map +1 -1
- package/dist/components/ic-menu-item2.js +26 -23
- package/dist/components/ic-menu-item2.js.map +1 -1
- package/dist/components/ic-menu-with-multi.d.ts +11 -0
- package/dist/components/ic-menu-with-multi.js +8 -0
- package/dist/components/ic-menu-with-multi.js.map +1 -0
- package/dist/components/ic-menu2.js +14 -14
- package/dist/components/ic-menu2.js.map +1 -1
- package/dist/components/ic-menu3.js +2806 -0
- package/dist/components/ic-menu3.js.map +1 -0
- package/dist/components/ic-navigation-button.js +29 -8
- package/dist/components/ic-navigation-button.js.map +1 -1
- package/dist/components/ic-navigation-group.js +34 -24
- package/dist/components/ic-navigation-group.js.map +1 -1
- package/dist/components/ic-navigation-item.js +84 -37
- package/dist/components/ic-navigation-item.js.map +1 -1
- package/dist/components/ic-navigation-menu2.js +1 -1
- package/dist/components/ic-page-header.js +10 -10
- package/dist/components/ic-page-header.js.map +1 -1
- package/dist/components/ic-pagination-bar2.js +244 -161
- package/dist/components/ic-pagination-bar2.js.map +1 -1
- package/dist/components/ic-pagination-item2.js +27 -12
- package/dist/components/ic-pagination-item2.js.map +1 -1
- package/dist/components/ic-pagination2.js +30 -10
- package/dist/components/ic-pagination2.js.map +1 -1
- package/dist/components/ic-popover-menu.js +43 -38
- package/dist/components/ic-popover-menu.js.map +1 -1
- package/dist/components/ic-radio-group.js +101 -59
- package/dist/components/ic-radio-group.js.map +1 -1
- package/dist/components/ic-radio-option.js +63 -44
- package/dist/components/ic-radio-option.js.map +1 -1
- package/dist/components/ic-search-bar.js +23 -30
- package/dist/components/ic-search-bar.js.map +1 -1
- package/dist/components/ic-section-container2.js +1 -1
- package/dist/components/ic-section-container2.js.map +1 -1
- package/dist/components/ic-select-with-multi.d.ts +11 -0
- package/dist/components/ic-select-with-multi.js +921 -0
- package/dist/components/ic-select-with-multi.js.map +1 -0
- package/dist/components/ic-select2.js +77 -30
- package/dist/components/ic-select2.js.map +1 -1
- package/dist/components/ic-side-navigation.js +56 -74
- package/dist/components/ic-side-navigation.js.map +1 -1
- package/dist/components/ic-skeleton.js +17 -40
- package/dist/components/ic-skeleton.js.map +1 -1
- package/dist/components/ic-status-tag.js +3 -1
- package/dist/components/ic-status-tag.js.map +1 -1
- package/dist/components/ic-step.js +5 -2
- package/dist/components/ic-step.js.map +1 -1
- package/dist/components/ic-stepper.js +35 -9
- package/dist/components/ic-stepper.js.map +1 -1
- package/dist/components/ic-switch.js +9 -4
- package/dist/components/ic-switch.js.map +1 -1
- package/dist/components/ic-tab-context.js +79 -130
- package/dist/components/ic-tab-context.js.map +1 -1
- package/dist/components/ic-tab-panel.js +6 -17
- package/dist/components/ic-tab-panel.js.map +1 -1
- package/dist/components/ic-tab.js +16 -14
- package/dist/components/ic-tab.js.map +1 -1
- package/dist/components/ic-text-field2.js +120 -72
- package/dist/components/ic-text-field2.js.map +1 -1
- package/dist/components/ic-theme.js +13 -22
- package/dist/components/ic-theme.js.map +1 -1
- package/dist/components/ic-toast-region.js +6 -0
- package/dist/components/ic-toast-region.js.map +1 -1
- package/dist/components/ic-toast.js +24 -19
- package/dist/components/ic-toast.js.map +1 -1
- package/dist/components/ic-toggle-button-group.js +230 -0
- package/dist/components/ic-toggle-button-group.js.map +1 -0
- package/dist/components/ic-toggle-button.js +148 -0
- package/dist/components/ic-toggle-button.js.map +1 -0
- package/dist/components/ic-tooltip2.js +52 -30
- package/dist/components/ic-tooltip2.js.map +1 -1
- package/dist/components/ic-top-navigation.js +61 -83
- package/dist/components/ic-top-navigation.js.map +1 -1
- package/dist/components/ic-tree-item.d.ts +11 -0
- package/dist/components/ic-tree-item.js +300 -0
- package/dist/components/ic-tree-item.js.map +1 -0
- package/dist/components/ic-tree-view.d.ts +11 -0
- package/dist/components/ic-tree-view.js +252 -0
- package/dist/components/ic-tree-view.js.map +1 -0
- package/dist/components/ic-typography2.js +57 -17
- package/dist/components/ic-typography2.js.map +1 -1
- package/dist/core/core.css +8 -5
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/p-0229eb46.entry.js +2 -0
- package/dist/core/p-0229eb46.entry.js.map +1 -0
- package/dist/core/p-04fe848d.entry.js +2 -0
- package/dist/core/p-04fe848d.entry.js.map +1 -0
- package/dist/core/p-05ae9a59.entry.js +2 -0
- package/dist/core/p-05ae9a59.entry.js.map +1 -0
- package/dist/core/p-074e64d0.entry.js +2 -0
- package/dist/core/p-074e64d0.entry.js.map +1 -0
- package/dist/core/p-0f1706e8.entry.js +2 -0
- package/dist/core/p-0f1706e8.entry.js.map +1 -0
- package/dist/core/p-11877d23.entry.js +2 -0
- package/dist/core/p-11877d23.entry.js.map +1 -0
- package/dist/core/p-1e450833.entry.js +2 -0
- package/dist/core/p-1e450833.entry.js.map +1 -0
- package/dist/core/{p-4409f656.entry.js → p-23408776.entry.js} +2 -2
- package/dist/core/p-23408776.entry.js.map +1 -0
- package/dist/core/p-26fa17fb.entry.js +2 -0
- package/dist/core/p-26fa17fb.entry.js.map +1 -0
- package/dist/core/p-2b15ea77.entry.js +2 -0
- package/dist/core/p-2b15ea77.entry.js.map +1 -0
- package/dist/core/p-2d44b81a.entry.js +2 -0
- package/dist/core/p-2d44b81a.entry.js.map +1 -0
- package/dist/core/p-2ea7af8b.entry.js +2 -0
- package/dist/core/p-2ea7af8b.entry.js.map +1 -0
- package/dist/core/p-33dd24eb.js +2 -0
- package/dist/core/p-33dd24eb.js.map +1 -0
- package/dist/core/p-38f329ab.entry.js +2 -0
- package/dist/core/p-38f329ab.entry.js.map +1 -0
- package/dist/core/p-3cd2056f.entry.js +2 -0
- package/dist/core/p-3cd2056f.entry.js.map +1 -0
- package/dist/core/p-3d00ad9e.entry.js +2 -0
- package/dist/core/p-3d00ad9e.entry.js.map +1 -0
- package/dist/core/p-3ebd4703.entry.js +2 -0
- package/dist/core/p-3ebd4703.entry.js.map +1 -0
- package/dist/core/p-44036532.entry.js +2 -0
- package/dist/core/p-44036532.entry.js.map +1 -0
- package/dist/core/p-44680720.entry.js +2 -0
- package/dist/core/p-44680720.entry.js.map +1 -0
- package/dist/core/{p-24945ee5.entry.js → p-452985d9.entry.js} +2 -2
- package/dist/core/p-452985d9.entry.js.map +1 -0
- package/dist/core/{p-b97dc365.entry.js → p-487fd924.entry.js} +2 -2
- package/dist/core/p-56db5123.entry.js +2 -0
- package/dist/core/p-56db5123.entry.js.map +1 -0
- package/dist/core/p-5a90eaa8.entry.js +2 -0
- package/dist/core/p-5a90eaa8.entry.js.map +1 -0
- package/dist/core/p-5dd6381a.entry.js +2 -0
- package/dist/core/p-5dd6381a.entry.js.map +1 -0
- package/dist/core/p-5f149106.entry.js +2 -0
- package/dist/core/p-5f149106.entry.js.map +1 -0
- package/dist/core/p-61848e6b.entry.js +2 -0
- package/dist/core/p-61848e6b.entry.js.map +1 -0
- package/dist/core/{p-d77960f6.entry.js → p-656378ba.entry.js} +2 -2
- package/dist/core/p-6a920114.entry.js +2 -0
- package/dist/core/p-6a920114.entry.js.map +1 -0
- package/dist/core/p-6cdf5de2.entry.js +2 -0
- package/dist/core/p-6cdf5de2.entry.js.map +1 -0
- package/dist/core/p-70ad364c.entry.js +2 -0
- package/dist/core/p-70ad364c.entry.js.map +1 -0
- package/dist/core/p-70c659ec.entry.js +2 -0
- package/dist/core/p-70c659ec.entry.js.map +1 -0
- package/dist/core/p-74b42302.entry.js +2 -0
- package/dist/core/p-74b42302.entry.js.map +1 -0
- package/dist/core/p-75bd12f8.entry.js +2 -0
- package/dist/core/p-75bd12f8.entry.js.map +1 -0
- package/dist/core/p-780294b8.entry.js +2 -0
- package/dist/core/p-780294b8.entry.js.map +1 -0
- package/dist/core/{p-baf81f30.entry.js → p-787ffd96.entry.js} +2 -2
- package/dist/core/p-787ffd96.entry.js.map +1 -0
- package/dist/core/p-7edc19be.entry.js +2 -0
- package/dist/core/p-7edc19be.entry.js.map +1 -0
- package/dist/core/p-8ab58daa.js +2 -0
- package/dist/core/p-8ab58daa.js.map +1 -0
- package/dist/core/p-8ced1495.entry.js +2 -0
- package/dist/core/p-8ced1495.entry.js.map +1 -0
- package/dist/core/{p-939baa93.entry.js → p-95545b4c.entry.js} +2 -2
- package/dist/core/p-95545b4c.entry.js.map +1 -0
- package/dist/core/p-95d057b8.entry.js +2 -0
- package/dist/core/p-95d057b8.entry.js.map +1 -0
- package/dist/core/p-987cd821.entry.js +2 -0
- package/dist/core/p-987cd821.entry.js.map +1 -0
- package/dist/core/{p-41aa0ed3.entry.js → p-9b386822.entry.js} +2 -2
- package/dist/core/p-9b386822.entry.js.map +1 -0
- package/dist/core/{p-39e20b87.entry.js → p-9bbe221f.entry.js} +2 -2
- package/dist/core/{p-39e20b87.entry.js.map → p-9bbe221f.entry.js.map} +1 -1
- package/dist/core/p-9f157649.entry.js +2 -0
- package/dist/core/p-9f157649.entry.js.map +1 -0
- package/dist/core/{p-356b8a4c.entry.js → p-9f3cf053.entry.js} +2 -2
- package/dist/core/{p-356b8a4c.entry.js.map → p-9f3cf053.entry.js.map} +1 -1
- package/dist/core/p-9f58998d.entry.js +2 -0
- package/dist/core/p-9f58998d.entry.js.map +1 -0
- package/dist/core/p-a4f28ef1.entry.js +2 -0
- package/dist/core/p-a4f28ef1.entry.js.map +1 -0
- package/dist/core/p-ac8090a5.entry.js +2 -0
- package/dist/core/p-ac8090a5.entry.js.map +1 -0
- package/dist/core/p-b1f89f44.entry.js +2 -0
- package/dist/core/p-b1f89f44.entry.js.map +1 -0
- package/dist/core/p-bc350ec5.entry.js +2 -0
- package/dist/core/p-bc350ec5.entry.js.map +1 -0
- package/dist/core/p-bd0328f3.entry.js +2 -0
- package/dist/core/p-bd0328f3.entry.js.map +1 -0
- package/dist/core/p-bf06977d.js +2 -0
- package/dist/core/p-bf06977d.js.map +1 -0
- package/dist/core/p-c0a2a040.entry.js +2 -0
- package/dist/core/p-c0a2a040.entry.js.map +1 -0
- package/dist/core/p-cc0e0b46.entry.js +2 -0
- package/dist/core/p-cc0e0b46.entry.js.map +1 -0
- package/dist/core/p-d0020f6f.entry.js +2 -0
- package/dist/core/p-d0020f6f.entry.js.map +1 -0
- package/dist/core/{p-3d618bc2.entry.js → p-d1045cd5.entry.js} +2 -2
- package/dist/core/p-d56248df.entry.js +2 -0
- package/dist/core/p-d56248df.entry.js.map +1 -0
- package/dist/core/p-d921dc2c.entry.js +2 -0
- package/dist/core/p-d921dc2c.entry.js.map +1 -0
- package/dist/core/p-da398a5d.entry.js +2 -0
- package/dist/core/p-da398a5d.entry.js.map +1 -0
- package/dist/core/{p-2e9e8e7c.entry.js → p-db5af9f7.entry.js} +2 -2
- package/dist/core/p-db5af9f7.entry.js.map +1 -0
- package/dist/core/p-dd4c83ad.entry.js +2 -0
- package/dist/core/p-dd4c83ad.entry.js.map +1 -0
- package/dist/core/p-e362b5f3.entry.js +2 -0
- package/dist/core/p-e362b5f3.entry.js.map +1 -0
- package/dist/core/p-e89c2feb.entry.js +2 -0
- package/dist/core/p-e89c2feb.entry.js.map +1 -0
- package/dist/core/p-eaeaa096.entry.js +2 -0
- package/dist/core/p-eaeaa096.entry.js.map +1 -0
- package/dist/core/{p-c2b5e7b1.entry.js → p-eb87b43b.entry.js} +2 -2
- package/dist/core/{p-c2b5e7b1.entry.js.map → p-eb87b43b.entry.js.map} +1 -1
- package/dist/core/p-f5dfcf4f.entry.js +2 -0
- package/dist/core/p-f5dfcf4f.entry.js.map +1 -0
- package/dist/core/p-f5fbfbc9.entry.js +2 -0
- package/dist/core/p-f5fbfbc9.entry.js.map +1 -0
- package/dist/core/p-fac387e8.entry.js +2 -0
- package/dist/core/p-fac387e8.entry.js.map +1 -0
- package/dist/esm/core.js +1 -1
- package/dist/esm/date-helpers-0e5e32a7.js +136 -0
- package/dist/esm/date-helpers-0e5e32a7.js.map +1 -0
- package/dist/esm/helpers-948df101.js +403 -0
- package/dist/esm/helpers-948df101.js.map +1 -0
- package/dist/esm/{helpers-268c2b7f.js → helpers-cd64688a.js} +142 -99
- package/dist/esm/helpers-cd64688a.js.map +1 -0
- package/dist/esm/ic-accordion-group.entry.js +31 -4
- package/dist/esm/ic-accordion-group.entry.js.map +1 -1
- package/dist/esm/ic-accordion.entry.js +11 -4
- package/dist/esm/ic-accordion.entry.js.map +1 -1
- package/dist/esm/ic-alert.entry.js +20 -6
- package/dist/esm/ic-alert.entry.js.map +1 -1
- package/dist/esm/ic-back-to-top.entry.js +26 -17
- package/dist/esm/ic-back-to-top.entry.js.map +1 -1
- package/dist/esm/ic-badge.entry.js +86 -83
- package/dist/esm/ic-badge.entry.js.map +1 -1
- package/dist/esm/ic-breadcrumb-group.entry.js +62 -25
- package/dist/esm/ic-breadcrumb-group.entry.js.map +1 -1
- package/dist/esm/ic-breadcrumb.entry.js +2 -2
- package/dist/esm/ic-breadcrumb.entry.js.map +1 -1
- package/dist/esm/ic-button_3.entry.js +145 -103
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-card-horizontal.entry.js +126 -0
- package/dist/esm/ic-card-horizontal.entry.js.map +1 -0
- package/dist/esm/ic-card.entry.js +30 -7
- package/dist/esm/ic-card.entry.js.map +1 -1
- package/dist/esm/ic-checkbox-group.entry.js +28 -17
- package/dist/esm/ic-checkbox-group.entry.js.map +1 -1
- package/dist/esm/ic-checkbox.entry.js +50 -31
- package/dist/esm/ic-checkbox.entry.js.map +1 -1
- package/dist/esm/ic-chip.entry.js +45 -21
- package/dist/esm/ic-chip.entry.js.map +1 -1
- package/dist/esm/ic-classification-banner.entry.js +14 -5
- package/dist/esm/ic-classification-banner.entry.js.map +1 -1
- package/dist/esm/ic-data-entity.entry.js +3 -6
- package/dist/esm/ic-data-entity.entry.js.map +1 -1
- package/dist/esm/ic-data-row.entry.js +21 -35
- package/dist/esm/ic-data-row.entry.js.map +1 -1
- package/dist/esm/ic-data-table-title-bar.entry.js +53 -0
- package/dist/esm/ic-data-table-title-bar.entry.js.map +1 -0
- package/dist/esm/ic-data-table.entry.js +1080 -85
- package/dist/esm/ic-data-table.entry.js.map +1 -1
- package/dist/esm/ic-date-input.entry.js +1119 -0
- package/dist/esm/ic-date-input.entry.js.map +1 -0
- package/dist/esm/ic-date-picker.entry.js +1125 -0
- package/dist/esm/ic-date-picker.entry.js.map +1 -0
- package/dist/esm/ic-dialog.entry.js +54 -12
- package/dist/esm/ic-dialog.entry.js.map +1 -1
- package/dist/esm/ic-divider.entry.js +1 -1
- package/dist/esm/ic-empty-state_2.entry.js +383 -0
- package/dist/esm/ic-empty-state_2.entry.js.map +1 -0
- package/dist/esm/ic-footer-link-group.entry.js +4 -4
- package/dist/esm/ic-footer-link-group.entry.js.map +1 -1
- package/dist/esm/ic-footer-link.entry.js +3 -3
- package/dist/esm/ic-footer-link.entry.js.map +1 -1
- package/dist/esm/ic-footer.entry.js +18 -7
- package/dist/esm/ic-footer.entry.js.map +1 -1
- package/dist/esm/ic-hero.entry.js +12 -2
- package/dist/esm/ic-hero.entry.js.map +1 -1
- package/dist/esm/ic-horizontal-scroll.entry.js +5 -5
- package/dist/esm/ic-horizontal-scroll.entry.js.map +1 -1
- package/dist/esm/ic-input-component-container_4.entry.js +157 -0
- package/dist/esm/ic-input-component-container_4.entry.js.map +1 -0
- package/dist/esm/ic-link.entry.js +35 -17
- package/dist/esm/ic-link.entry.js.map +1 -1
- package/dist/esm/ic-menu-group.entry.js +2 -2
- package/dist/esm/ic-menu-group.entry.js.map +1 -1
- package/dist/esm/ic-menu-item.entry.js +21 -20
- package/dist/esm/ic-menu-item.entry.js.map +1 -1
- package/dist/esm/ic-menu-with-multi.entry.js +2736 -0
- package/dist/esm/ic-menu-with-multi.entry.js.map +1 -0
- package/dist/esm/{ic-input-component-container_3.entry.js → ic-menu.entry.js} +19 -80
- package/dist/esm/ic-menu.entry.js.map +1 -0
- package/dist/esm/ic-navigation-button.entry.js +29 -8
- package/dist/esm/ic-navigation-button.entry.js.map +1 -1
- package/dist/esm/ic-navigation-group.entry.js +33 -23
- package/dist/esm/ic-navigation-group.entry.js.map +1 -1
- package/dist/esm/ic-navigation-item.entry.js +83 -37
- package/dist/esm/ic-navigation-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-menu.entry.js +1 -1
- package/dist/esm/ic-page-header.entry.js +10 -10
- package/dist/esm/ic-page-header.entry.js.map +1 -1
- package/dist/esm/ic-pagination_4.entry.js +232 -117
- package/dist/esm/ic-pagination_4.entry.js.map +1 -1
- package/dist/esm/ic-popover-menu.entry.js +40 -36
- package/dist/esm/ic-popover-menu.entry.js.map +1 -1
- package/dist/esm/ic-radio-group.entry.js +100 -59
- package/dist/esm/ic-radio-group.entry.js.map +1 -1
- package/dist/esm/ic-radio-option.entry.js +59 -42
- package/dist/esm/ic-radio-option.entry.js.map +1 -1
- package/dist/esm/ic-search-bar.entry.js +22 -30
- package/dist/esm/ic-search-bar.entry.js.map +1 -1
- package/dist/esm/ic-section-container.entry.js +1 -1
- package/dist/esm/ic-section-container.entry.js.map +1 -1
- package/dist/esm/ic-select-with-multi.entry.js +792 -0
- package/dist/esm/ic-select-with-multi.entry.js.map +1 -0
- package/dist/esm/ic-side-navigation.entry.js +53 -73
- package/dist/esm/ic-side-navigation.entry.js.map +1 -1
- package/dist/esm/ic-skeleton.entry.js +16 -35
- package/dist/esm/ic-skeleton.entry.js.map +1 -1
- package/dist/esm/ic-status-tag.entry.js +4 -2
- package/dist/esm/ic-status-tag.entry.js.map +1 -1
- package/dist/esm/ic-step.entry.js +5 -2
- package/dist/esm/ic-step.entry.js.map +1 -1
- package/dist/esm/ic-stepper.entry.js +31 -9
- package/dist/esm/ic-stepper.entry.js.map +1 -1
- package/dist/esm/ic-switch.entry.js +7 -3
- package/dist/esm/ic-switch.entry.js.map +1 -1
- package/dist/esm/ic-tab-context.entry.js +78 -130
- package/dist/esm/ic-tab-context.entry.js.map +1 -1
- package/dist/esm/ic-tab-group.entry.js +1 -1
- package/dist/esm/ic-tab-panel.entry.js +5 -13
- package/dist/esm/ic-tab-panel.entry.js.map +1 -1
- package/dist/esm/ic-tab.entry.js +16 -14
- package/dist/esm/ic-tab.entry.js.map +1 -1
- package/dist/esm/ic-theme.entry.js +13 -22
- package/dist/esm/ic-theme.entry.js.map +1 -1
- package/dist/esm/ic-toast-region.entry.js +6 -0
- package/dist/esm/ic-toast-region.entry.js.map +1 -1
- package/dist/esm/ic-toast.entry.js +21 -18
- package/dist/esm/ic-toast.entry.js.map +1 -1
- package/dist/esm/ic-toggle-button-group.entry.js +197 -0
- package/dist/esm/ic-toggle-button-group.entry.js.map +1 -0
- package/dist/esm/ic-toggle-button.entry.js +93 -0
- package/dist/esm/ic-toggle-button.entry.js.map +1 -0
- package/dist/esm/ic-top-navigation.entry.js +60 -82
- package/dist/esm/ic-top-navigation.entry.js.map +1 -1
- package/dist/esm/ic-tree-item.entry.js +249 -0
- package/dist/esm/ic-tree-item.entry.js.map +1 -0
- package/dist/esm/ic-tree-view.entry.js +211 -0
- package/dist/esm/ic-tree-view.entry.js.map +1 -0
- package/dist/esm/ic-typography.entry.js +52 -15
- package/dist/esm/ic-typography.entry.js.map +1 -1
- package/dist/esm/index-93509377.js +48 -12
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/ic-card-horizontal/ic-card-horizontal.d.ts +71 -0
- package/dist/types/components/ic-card-horizontal/ic-card-horizontal.stories.d.ts +82 -0
- package/dist/types/components/ic-card-horizontal/ic-card-horizontal.types.d.ts +1 -0
- package/dist/types/components/ic-data-table/ic-data-table.d.ts +218 -19
- package/dist/types/components/ic-data-table/ic-data-table.stories.d.ts +239 -0
- package/dist/types/components/ic-data-table/ic-data-table.types.d.ts +43 -0
- package/dist/types/components/ic-data-table/story-data.d.ts +492 -2
- package/dist/types/components/ic-data-table-title-bar/ic-data-table-title-bar.d.ts +36 -0
- package/dist/types/components/ic-data-table-title-bar/ic-data-table-title-bar.stories.d.ts +47 -0
- package/dist/types/components/ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.d.ts +1 -0
- package/dist/types/components/ic-date-input/ic-date-input.d.ts +264 -0
- package/dist/types/components/ic-date-input/ic-date-input.stories.d.ts +124 -0
- package/dist/types/components/ic-date-input/story-data.d.ts +1 -0
- package/dist/types/components/ic-date-input/test/helpers/ic-date-input.d.ts +23 -0
- package/dist/types/components/ic-date-picker/ic-date-picker.d.ts +262 -0
- package/dist/types/components/ic-date-picker/ic-date-picker.stories.d.ts +153 -0
- package/dist/types/components/ic-date-picker/ic-day-button.d.ts +16 -0
- package/dist/types/components/ic-date-picker/ic-month-picker.d.ts +14 -0
- package/dist/types/components/ic-date-picker/ic-year-picker.d.ts +16 -0
- package/dist/types/components/ic-date-picker/story-data.d.ts +24 -0
- package/dist/types/components/ic-date-picker/test/a11y/ic-date-picker.test.a11y.d.ts +1 -0
- package/dist/types/components/ic-menu-with-multi/ic-menu.d.ts +218 -0
- package/dist/types/components/ic-pagination-bar/ic-pagination-bar.d.ts +65 -23
- package/dist/types/components/ic-pagination-bar/ic-pagination-bar.stories.d.ts +106 -0
- package/dist/types/components/ic-pagination-bar/ic-pagination-bar.types.d.ts +4 -0
- package/dist/types/components/ic-select-with-multi/ic-select-multi.stories.d.ts +106 -0
- package/dist/types/components/ic-select-with-multi/ic-select.d.ts +289 -0
- package/dist/types/components/ic-select-with-multi/story-data.d.ts +32 -0
- package/dist/types/components/ic-tree-item/ic-tree-item.d.ts +101 -0
- package/dist/types/components/ic-tree-view/ic-tree-view.d.ts +51 -0
- package/dist/types/components/ic-tree-view/ic-tree-view.stories.d.ts +99 -0
- package/dist/types/components.d.ts +1711 -127
- package/dist/types/interface.d.ts +1 -0
- package/dist/types/utils/constants.d.ts +38 -0
- package/dist/types/utils/date-helpers.d.ts +22 -0
- package/dist/types/utils/helpers.d.ts +144 -2
- package/dist/types/utils/types.d.ts +126 -0
- package/hydrate/index.js +18298 -9132
- package/package.json +27 -17
- package/dist/cjs/helpers-bbe55215.js.map +0 -1
- package/dist/cjs/ic-empty-state.cjs.entry.js +0 -38
- package/dist/cjs/ic-empty-state.cjs.entry.js.map +0 -1
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +0 -1
- package/dist/cjs/ic-input-label_2.cjs.entry.js +0 -86
- package/dist/cjs/ic-input-label_2.cjs.entry.js.map +0 -1
- package/dist/cjs/ic-pagination-bar.cjs.entry.js +0 -285
- package/dist/cjs/ic-pagination-bar.cjs.entry.js.map +0 -1
- package/dist/collection/components/ic-pagination/ic-pagination.types.js +0 -2
- package/dist/collection/components/ic-pagination/ic-pagination.types.js.map +0 -1
- package/dist/core/p-0083465b.entry.js +0 -2
- package/dist/core/p-0083465b.entry.js.map +0 -1
- package/dist/core/p-03487f12.entry.js +0 -2
- package/dist/core/p-03487f12.entry.js.map +0 -1
- package/dist/core/p-03f8fa1a.entry.js +0 -2
- package/dist/core/p-03f8fa1a.entry.js.map +0 -1
- package/dist/core/p-0c18b6a0.entry.js +0 -2
- package/dist/core/p-0c18b6a0.entry.js.map +0 -1
- package/dist/core/p-1bc034aa.entry.js +0 -2
- package/dist/core/p-1bc034aa.entry.js.map +0 -1
- package/dist/core/p-20a76d1d.entry.js +0 -2
- package/dist/core/p-20a76d1d.entry.js.map +0 -1
- package/dist/core/p-24945ee5.entry.js.map +0 -1
- package/dist/core/p-2dc35696.entry.js +0 -2
- package/dist/core/p-2dc35696.entry.js.map +0 -1
- package/dist/core/p-2e9e8e7c.entry.js.map +0 -1
- package/dist/core/p-3ee25a6d.entry.js +0 -2
- package/dist/core/p-3ee25a6d.entry.js.map +0 -1
- package/dist/core/p-41aa0ed3.entry.js.map +0 -1
- package/dist/core/p-4314aa0e.entry.js +0 -2
- package/dist/core/p-4314aa0e.entry.js.map +0 -1
- package/dist/core/p-4409f656.entry.js.map +0 -1
- package/dist/core/p-47abbd06.entry.js +0 -2
- package/dist/core/p-47abbd06.entry.js.map +0 -1
- package/dist/core/p-485823b6.entry.js +0 -2
- package/dist/core/p-485823b6.entry.js.map +0 -1
- package/dist/core/p-4ee59448.entry.js +0 -2
- package/dist/core/p-4ee59448.entry.js.map +0 -1
- package/dist/core/p-5157cfab.entry.js +0 -2
- package/dist/core/p-5157cfab.entry.js.map +0 -1
- package/dist/core/p-53083575.entry.js +0 -2
- package/dist/core/p-53083575.entry.js.map +0 -1
- package/dist/core/p-55d5541f.entry.js +0 -2
- package/dist/core/p-55d5541f.entry.js.map +0 -1
- package/dist/core/p-5bb32ee6.entry.js +0 -2
- package/dist/core/p-5bb32ee6.entry.js.map +0 -1
- package/dist/core/p-67eea079.entry.js +0 -2
- package/dist/core/p-67eea079.entry.js.map +0 -1
- package/dist/core/p-6bd0e984.entry.js +0 -2
- package/dist/core/p-6bd0e984.entry.js.map +0 -1
- package/dist/core/p-75bf6162.entry.js +0 -2
- package/dist/core/p-75bf6162.entry.js.map +0 -1
- package/dist/core/p-76959313.entry.js +0 -2
- package/dist/core/p-76959313.entry.js.map +0 -1
- package/dist/core/p-7de813a3.entry.js +0 -2
- package/dist/core/p-7de813a3.entry.js.map +0 -1
- package/dist/core/p-7eae5f70.entry.js +0 -2
- package/dist/core/p-7eae5f70.entry.js.map +0 -1
- package/dist/core/p-85508347.entry.js +0 -2
- package/dist/core/p-85508347.entry.js.map +0 -1
- package/dist/core/p-8da152c4.entry.js +0 -2
- package/dist/core/p-8da152c4.entry.js.map +0 -1
- package/dist/core/p-8fd4ca0a.js +0 -2
- package/dist/core/p-8fd4ca0a.js.map +0 -1
- package/dist/core/p-939baa93.entry.js.map +0 -1
- package/dist/core/p-9777ebb1.entry.js +0 -2
- package/dist/core/p-9777ebb1.entry.js.map +0 -1
- package/dist/core/p-9c27b73e.entry.js +0 -2
- package/dist/core/p-9c27b73e.entry.js.map +0 -1
- package/dist/core/p-9fa6844f.entry.js +0 -2
- package/dist/core/p-9fa6844f.entry.js.map +0 -1
- package/dist/core/p-9fdd7d73.entry.js +0 -2
- package/dist/core/p-9fdd7d73.entry.js.map +0 -1
- package/dist/core/p-a3ab9f4c.entry.js +0 -2
- package/dist/core/p-a3ab9f4c.entry.js.map +0 -1
- package/dist/core/p-a51e5c7c.entry.js +0 -2
- package/dist/core/p-a51e5c7c.entry.js.map +0 -1
- package/dist/core/p-a7481232.entry.js +0 -2
- package/dist/core/p-a7481232.entry.js.map +0 -1
- package/dist/core/p-ab9f8a3f.entry.js +0 -2
- package/dist/core/p-ab9f8a3f.entry.js.map +0 -1
- package/dist/core/p-b2aa3d7c.entry.js +0 -2
- package/dist/core/p-b2aa3d7c.entry.js.map +0 -1
- package/dist/core/p-b5cf6d65.entry.js +0 -2
- package/dist/core/p-b5cf6d65.entry.js.map +0 -1
- package/dist/core/p-baf81f30.entry.js.map +0 -1
- package/dist/core/p-bc187bb5.entry.js +0 -2
- package/dist/core/p-bc187bb5.entry.js.map +0 -1
- package/dist/core/p-bd9cecce.entry.js +0 -2
- package/dist/core/p-bd9cecce.entry.js.map +0 -1
- package/dist/core/p-be980606.entry.js +0 -2
- package/dist/core/p-be980606.entry.js.map +0 -1
- package/dist/core/p-c1256810.entry.js +0 -2
- package/dist/core/p-c1256810.entry.js.map +0 -1
- package/dist/core/p-d76cfa5a.entry.js +0 -2
- package/dist/core/p-d76cfa5a.entry.js.map +0 -1
- package/dist/core/p-e189f1d0.entry.js +0 -2
- package/dist/core/p-e189f1d0.entry.js.map +0 -1
- package/dist/core/p-e9e145aa.entry.js +0 -2
- package/dist/core/p-e9e145aa.entry.js.map +0 -1
- package/dist/core/p-f0e9a83f.entry.js +0 -2
- package/dist/core/p-f0e9a83f.entry.js.map +0 -1
- package/dist/core/p-f23d2102.entry.js +0 -2
- package/dist/core/p-f23d2102.entry.js.map +0 -1
- package/dist/core/p-f87e8411.entry.js +0 -2
- package/dist/core/p-f87e8411.entry.js.map +0 -1
- package/dist/esm/helpers-268c2b7f.js.map +0 -1
- package/dist/esm/ic-empty-state.entry.js.map +0 -1
- package/dist/esm/ic-input-component-container_3.entry.js.map +0 -1
- package/dist/esm/ic-input-label_2.entry.js +0 -81
- package/dist/esm/ic-input-label_2.entry.js.map +0 -1
- package/dist/esm/ic-pagination-bar.entry.js +0 -281
- package/dist/esm/ic-pagination-bar.entry.js.map +0 -1
- package/dist/types/components/ic-pagination/ic-pagination.types.d.ts +0 -6
- /package/dist/core/{p-b97dc365.entry.js.map → p-487fd924.entry.js.map} +0 -0
- /package/dist/core/{p-d77960f6.entry.js.map → p-656378ba.entry.js.map} +0 -0
- /package/dist/core/{p-3d618bc2.entry.js.map → p-d1045cd5.entry.js.map} +0 -0
@@ -1,15 +1,223 @@
|
|
1
|
-
|
1
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
2
|
+
import { h, Fragment, Host, } from "@stencil/core";
|
2
3
|
import unsortedIcon from "./assets/unsorted-icon.svg";
|
3
4
|
import ascendingIcon from "./assets/ascending-icon.svg";
|
4
5
|
import descendingIcon from "./assets/descending-icon.svg";
|
6
|
+
// Unable to import helper functions via @ukic/web-components
|
7
|
+
import { isEmptyString, isSlotUsed, pxToRem, addDataToPosition, dynamicDebounce, getSlotElements, checkResizeObserver, deviceSizeMatches, } from "../../utils/helpers";
|
8
|
+
import { IC_DEVICE_SIZES } from "../../utils/constants";
|
9
|
+
/**
|
10
|
+
* @slot empty-state - Content is slotted below the table header when there is no data and the table is not loading.
|
11
|
+
* @slot {COLUMN_KEY}-{ROW_INDEX}[-icon] - Each cell should have its own slot, named using the column tag and the row index, allowing for custom elements to be displayed. Include `-icon` at the end for that cell's icon slot.
|
12
|
+
* @slot {COLUMN_KEY}-column-icon - The icon slot for a column header.
|
13
|
+
* @slot title-bar - A custom ic-data-table-title-bar can be slotted above the column headers to display additional information about the table.
|
14
|
+
* @slot pagination-bar - A custom ic-pagination-bar can be slotted below the data to provide enhanced control over how the data is interacted with when being fetched externally.
|
15
|
+
*/
|
5
16
|
export class DataTable {
|
6
17
|
constructor() {
|
18
|
+
this.DENSITY_HEIGHT_MULTIPLIER = {
|
19
|
+
dense: 0.8,
|
20
|
+
default: 1,
|
21
|
+
spacious: 1.2,
|
22
|
+
};
|
23
|
+
this.DENSITY_PADDING_HEIGHT_DIFF = {
|
24
|
+
dense: 8,
|
25
|
+
default: 16,
|
26
|
+
spacious: 20,
|
27
|
+
};
|
7
28
|
this.SORT_ICONS = {
|
8
29
|
unsorted: unsortedIcon,
|
9
30
|
ascending: ascendingIcon,
|
10
31
|
descending: descendingIcon,
|
11
32
|
};
|
12
|
-
this.
|
33
|
+
this.hasLoadedForOneSecond = true;
|
34
|
+
this.resizeObserver = null;
|
35
|
+
this.SHOW_HIDE_STRING = "show-hide";
|
36
|
+
this.SHOW_HIDE_CSS_CLASS = `${this.SHOW_HIDE_STRING}-wrap`;
|
37
|
+
this.TOOLTIP_STRING = "tooltip";
|
38
|
+
this.TOOLTIP = `ic-${this.TOOLTIP_STRING}`;
|
39
|
+
this.TEXT_WRAP_STRING = "text-wrap";
|
40
|
+
this.TEXT_WRAP_CLASS = `.${this.TEXT_WRAP_STRING}`;
|
41
|
+
this.dataUpdated = false;
|
42
|
+
this.rowHeightSet = false;
|
43
|
+
this.initialLoad = false;
|
44
|
+
this.icPageChangeEvent = false;
|
45
|
+
this.itemsPerPageChange = false;
|
46
|
+
this.DATA_ROW_HEIGHT_STRING = "data-row-height";
|
47
|
+
this.ROW_HEIGHT_CSS_VARIABLE = "--row-height";
|
48
|
+
this.LINE_CLAMP_CSS_VARIABLE = "--ic-line-clamp";
|
49
|
+
this.DEFAULT_LINE_HEIGHT = 24;
|
50
|
+
this.densityUpdate = false;
|
51
|
+
this.truncationPatternUpdated = false;
|
52
|
+
this.isNewDebounceDelaySet = false;
|
53
|
+
this.headerResizeObserver = null;
|
54
|
+
this.IC_TOOLTIP_STRING = "ic-tooltip";
|
55
|
+
this.SHOW_TRUNC_TOOLTIP_STRING = "show-trunc-tooltip";
|
56
|
+
this.CELL_DESCRIPTION_STRING = ".cell-description";
|
57
|
+
this.CELL_CONTAINER_WITH_DESCRIPTION_STRING = "cell-container-with-description";
|
58
|
+
this.CELL_TEXT_WRAPPER_STRING = ".cell-text-wrapper";
|
59
|
+
this.IC_TYPOGRAPHY_STRING = "ic-typography";
|
60
|
+
this.runHeaderResizeObserver = () => {
|
61
|
+
this.headerResizeObserver = new ResizeObserver(() => {
|
62
|
+
this.headerResizeCallback();
|
63
|
+
});
|
64
|
+
this.headerResizeObserver.observe(this.el);
|
65
|
+
};
|
66
|
+
this.headerResizeCallback = () => {
|
67
|
+
if (!this.hideColumnHeaders && this.columnHeaderTruncation) {
|
68
|
+
const tableContainerWidth = this.el.shadowRoot.querySelector(".table-container").clientWidth;
|
69
|
+
if (tableContainerWidth !== this.prevTableContainerWidth) {
|
70
|
+
const headers = this.el.shadowRoot.querySelectorAll("th.column-header");
|
71
|
+
headers.forEach((header) => {
|
72
|
+
const tooltip = header.querySelector(this.IC_TOOLTIP_STRING);
|
73
|
+
const typographyEls = header.querySelectorAll(this.IC_TYPOGRAPHY_STRING);
|
74
|
+
if (tooltip && typographyEls && typographyEls.length === 2) {
|
75
|
+
tooltip.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
|
76
|
+
if (typographyEls[1].clientWidth > typographyEls[0].clientWidth) {
|
77
|
+
tooltip.classList.add(this.SHOW_TRUNC_TOOLTIP_STRING);
|
78
|
+
}
|
79
|
+
}
|
80
|
+
});
|
81
|
+
this.prevTableContainerWidth = tableContainerWidth;
|
82
|
+
}
|
83
|
+
}
|
84
|
+
};
|
85
|
+
this.updateSetRowHeight = (typographyEl) => {
|
86
|
+
const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
|
87
|
+
if (typographyEl) {
|
88
|
+
const cellContainer = this.getCellContainer(typographyEl);
|
89
|
+
const rowHeight = fontSize *
|
90
|
+
parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
|
91
|
+
if (typographyEl.scrollHeight > rowHeight) {
|
92
|
+
cellContainer.style.removeProperty(this.ROW_HEIGHT_CSS_VARIABLE);
|
93
|
+
}
|
94
|
+
}
|
95
|
+
else {
|
96
|
+
this.getTypographyElements().forEach((typographyEl) => {
|
97
|
+
const cellContainer = this.getCellContainer(typographyEl);
|
98
|
+
const rowHeight = fontSize *
|
99
|
+
parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
|
100
|
+
if (typographyEl.scrollHeight > rowHeight) {
|
101
|
+
cellContainer.style.removeProperty(this.ROW_HEIGHT_CSS_VARIABLE);
|
102
|
+
}
|
103
|
+
});
|
104
|
+
}
|
105
|
+
};
|
106
|
+
this.debounceDataTruncation = () => {
|
107
|
+
this.getTypographyElements().forEach((typographyEl) => {
|
108
|
+
const cellContainer = this.getCellContainer(typographyEl);
|
109
|
+
if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
|
110
|
+
this.resizeObserver = new ResizeObserver(
|
111
|
+
// This gets triggered twice due to updated data and see more/see less button
|
112
|
+
dynamicDebounce(() => {
|
113
|
+
this.dataTruncation(typographyEl);
|
114
|
+
if (!this.isNewDebounceDelaySet) {
|
115
|
+
this.setNewDebounceDelay(200);
|
116
|
+
}
|
117
|
+
}, () => this.debounceDelay));
|
118
|
+
this.resizeObserver.observe(typographyEl);
|
119
|
+
}
|
120
|
+
});
|
121
|
+
};
|
122
|
+
this.setNewDebounceDelay = (delay) => {
|
123
|
+
this.debounceDelay = delay;
|
124
|
+
this.isNewDebounceDelaySet = true;
|
125
|
+
};
|
126
|
+
this.getLines = (height) => Math.floor(height / this.DEFAULT_LINE_HEIGHT);
|
127
|
+
this.truncate = (typographyEl, cellContainer, tooltip) => {
|
128
|
+
if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
|
129
|
+
//24 is the height of a single line
|
130
|
+
if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
|
131
|
+
if (this.truncationPattern === this.TOOLTIP_STRING) {
|
132
|
+
this.addTooltipTruncation(typographyEl, cellContainer, tooltip);
|
133
|
+
}
|
134
|
+
if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
135
|
+
this.addShowHideTruncation(cellContainer, typographyEl);
|
136
|
+
}
|
137
|
+
}
|
138
|
+
}
|
139
|
+
else {
|
140
|
+
if (this.truncationPattern === this.TOOLTIP_STRING && tooltip) {
|
141
|
+
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
|
142
|
+
const cellTextWrapper = cellContainer.querySelector(this.CELL_TEXT_WRAPPER_STRING);
|
143
|
+
cellTextWrapper.prepend(typographyEl);
|
144
|
+
tooltip.remove();
|
145
|
+
}
|
146
|
+
if (this.truncationPattern === this.SHOW_HIDE_STRING &&
|
147
|
+
!isEmptyString(typographyEl.getAttribute("max-lines"))) {
|
148
|
+
this.resetShowHideTruncation(typographyEl);
|
149
|
+
}
|
150
|
+
}
|
151
|
+
};
|
152
|
+
this.dataTruncation = (typographyEl) => {
|
153
|
+
// Tooltip truncation mentioned in AC. Will need revisiting
|
154
|
+
const tooltip = this.getTooltip(typographyEl);
|
155
|
+
const cellContainer = this.getCellContainer(typographyEl);
|
156
|
+
if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.classList.contains("data-type-element")) ||
|
157
|
+
this.dataUpdated) {
|
158
|
+
return;
|
159
|
+
}
|
160
|
+
if (this.truncationPattern === this.SHOW_HIDE_STRING &&
|
161
|
+
typographyEl.shadowRoot.querySelector("button")) {
|
162
|
+
const showHideBtn = typographyEl.shadowRoot.querySelector("button");
|
163
|
+
// If the see more/see less is present and the max lines is equal to the cell container
|
164
|
+
// remove the see more/see less button
|
165
|
+
if (showHideBtn) {
|
166
|
+
const truncWrapper = this.getTruncWrapper(typographyEl);
|
167
|
+
if (this.getLines(truncWrapper.scrollHeight) ===
|
168
|
+
+typographyEl.getAttribute("max-lines")) {
|
169
|
+
this.resetShowHideTruncation(typographyEl);
|
170
|
+
}
|
171
|
+
}
|
172
|
+
}
|
173
|
+
// Deals with setting and resetting row height and re-truncating data
|
174
|
+
if (this.rowHeightSet && this.truncationPattern === this.SHOW_HIDE_STRING) {
|
175
|
+
const truncWrapper = this.getTruncWrapper(typographyEl);
|
176
|
+
// cellContainer.clientHeight - 24 removes the extra line by see more/see less
|
177
|
+
if (truncWrapper &&
|
178
|
+
cellContainer.clientHeight - this.DEFAULT_LINE_HEIGHT >
|
179
|
+
truncWrapper.scrollHeight) {
|
180
|
+
this.resetShowHideTruncation(typographyEl);
|
181
|
+
return;
|
182
|
+
}
|
183
|
+
if (typographyEl.scrollHeight > cellContainer.clientHeight) {
|
184
|
+
this.addShowHideTruncation(cellContainer, typographyEl);
|
185
|
+
return;
|
186
|
+
}
|
187
|
+
}
|
188
|
+
if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > 0 &&
|
189
|
+
(cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) > 0 &&
|
190
|
+
(typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) === (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
|
191
|
+
if (tooltip) {
|
192
|
+
this.removeTooltip(cellContainer, typographyEl, tooltip);
|
193
|
+
}
|
194
|
+
return;
|
195
|
+
}
|
196
|
+
this.truncate(typographyEl, cellContainer, tooltip);
|
197
|
+
};
|
198
|
+
this.getTruncWrapper = (typographyEl) => typographyEl.shadowRoot.querySelector(".trunc-wrapper");
|
199
|
+
this.removeTextWrap = () => {
|
200
|
+
this.getTypographyElements().forEach((typographyEl) => {
|
201
|
+
const tableCell = typographyEl.closest("td");
|
202
|
+
if (tableCell.classList.contains(this.TEXT_WRAP_STRING)) {
|
203
|
+
tableCell.classList.remove(this.TEXT_WRAP_STRING);
|
204
|
+
}
|
205
|
+
});
|
206
|
+
};
|
207
|
+
this.getCellContainer = (typographyEl) => {
|
208
|
+
return typographyEl.closest(".cell-container");
|
209
|
+
};
|
210
|
+
this.deleteTextWrapDataKey = (array) => Array.isArray(array) &&
|
211
|
+
array.forEach((val) => val.textWrap && delete val.textWrap);
|
212
|
+
this.startLoadingTimer = () => {
|
213
|
+
this.hasLoadedForOneSecond = false;
|
214
|
+
this.timerStarted = Date.now();
|
215
|
+
setTimeout(() => {
|
216
|
+
this.hasLoadedForOneSecond = true;
|
217
|
+
this.timerStarted = null;
|
218
|
+
}, this.minimumLoadingDisplayDuration);
|
219
|
+
};
|
220
|
+
this.isObject = (value) => value !== undefined && value !== null && typeof value === "object";
|
13
221
|
this.notDefaultDensity = () => this.density !== "default";
|
14
222
|
this.getCellContent = (cell, dataType) => {
|
15
223
|
switch (dataType) {
|
@@ -26,9 +234,103 @@ export class DataTable {
|
|
26
234
|
return this.getObjectValue(this.getObjectValue(cell, "cellAlignment"), alignment);
|
27
235
|
}
|
28
236
|
};
|
29
|
-
this.
|
237
|
+
this.getCellOptions = (cell, key) => {
|
238
|
+
if (!(this.isObject(cell) && Object.keys(cell).includes(key)))
|
239
|
+
return;
|
240
|
+
return this.getObjectValue(cell, key);
|
241
|
+
};
|
242
|
+
this.createUpdatingIndicator = () => {
|
243
|
+
const { appearance, description, max, min, progress } = this.updatingOptions || {};
|
244
|
+
return (h("th", { colSpan: this.columns.length, class: "updating-state" }, h("ic-loading-indicator", { appearance: appearance, description: description || "Updating table data", fullWidth: true, max: max, min: min, progress: progress, type: "linear", size: "small" })));
|
245
|
+
};
|
246
|
+
this.setRowHeight = (height) => {
|
247
|
+
return pxToRem(`${height * this.DENSITY_HEIGHT_MULTIPLIER[this.density] -
|
248
|
+
this.DENSITY_PADDING_HEIGHT_DIFF[this.density]}px`);
|
249
|
+
};
|
250
|
+
this.setTruncationClass = () => this.truncationPattern
|
251
|
+
? { [`truncation-${this.truncationPattern}`]: true }
|
252
|
+
: {};
|
253
|
+
this.getColumnWidth = (columnWidth) => {
|
254
|
+
// TODO: Setting max width on columns
|
255
|
+
let columnWidthStyling = {};
|
256
|
+
if (columnWidth) {
|
257
|
+
if (typeof columnWidth === "string") {
|
258
|
+
columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-width"]: columnWidth });
|
259
|
+
}
|
260
|
+
if (typeof columnWidth === "object" && !!Object.keys(columnWidth)) {
|
261
|
+
if (columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.minWidth) {
|
262
|
+
columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-min-width"]: columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.minWidth });
|
263
|
+
}
|
264
|
+
if (columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.maxWidth) {
|
265
|
+
columnWidthStyling = Object.assign(Object.assign({}, columnWidthStyling), { ["--column-max-width"]: columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth.maxWidth });
|
266
|
+
}
|
267
|
+
}
|
268
|
+
}
|
269
|
+
return columnWidthStyling;
|
270
|
+
};
|
271
|
+
this.getRowHeight = (currentRowHeight, columnProps, rowTextWrap, cell) => {
|
272
|
+
if ((this.truncationPattern || currentRowHeight) &&
|
273
|
+
!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.textWrap) &&
|
274
|
+
!rowTextWrap &&
|
275
|
+
!this.getCellOptions(cell, "textWrap") &&
|
276
|
+
(columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element") {
|
277
|
+
return {
|
278
|
+
[this.ROW_HEIGHT_CSS_VARIABLE]: this.setRowHeight(currentRowHeight),
|
279
|
+
};
|
280
|
+
}
|
281
|
+
return {};
|
282
|
+
};
|
283
|
+
this.adjustWidthForActionElement = () => {
|
284
|
+
const elements = this.el.shadowRoot.querySelectorAll(".action-element");
|
285
|
+
elements.forEach((element) => {
|
286
|
+
const width = element.firstChild.getBoundingClientRect()
|
287
|
+
.width;
|
288
|
+
const gridWrapper = element.closest(".cell-grid-wrapper");
|
289
|
+
gridWrapper.style.gridTemplateColumns = `auto calc(${width}px + var(--ic-space-xs))`;
|
290
|
+
});
|
291
|
+
};
|
292
|
+
this.createCellContent = (columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis) => {
|
293
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
294
|
+
return (h("div", { innerHTML: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element" &&
|
295
|
+
!isSlotUsed(this.el, cellSlotName)
|
296
|
+
? cell
|
297
|
+
: null, class: Object.assign(Object.assign({ "cell-container": (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element", [`cell-alignment-${((_a = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _a === void 0 ? void 0 : _a.vertical) ||
|
298
|
+
((_b = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _b === void 0 ? void 0 : _b.vertical) ||
|
299
|
+
rowAlignment ||
|
300
|
+
this.getCellAlignment(cell, "vertical")}`]: !!((_c = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _c === void 0 ? void 0 : _c.vertical) ||
|
301
|
+
!!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.vertical) ||
|
302
|
+
!!rowAlignment ||
|
303
|
+
!!this.getCellAlignment(cell, "vertical"), [`cell-alignment-${((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _e === void 0 ? void 0 : _e.horizontal) ||
|
304
|
+
((_f = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _f === void 0 ? void 0 : _f.horizontal) ||
|
305
|
+
this.getCellAlignment(cell, "horizontal")}`]: !!((_g = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _g === void 0 ? void 0 : _g.horizontal) ||
|
306
|
+
!!((_h = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _h === void 0 ? void 0 : _h.horizontal) ||
|
307
|
+
!!this.getCellAlignment(cell, "horizontal"), [`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true, [this.TEXT_WRAP_STRING]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.textWrap) ||
|
308
|
+
(rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap) ||
|
309
|
+
!!this.getCellOptions(cell, "textWrap"), ["cell-icon"]: hasIcon || !!((_j = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _j === void 0 ? void 0 : _j.icon) }, this.setTruncationClass()), { [this.CELL_CONTAINER_WITH_DESCRIPTION_STRING]: this.isObject(cell) && Object.keys(cell).includes("description") }), style: Object.assign(Object.assign({}, this.getRowHeight(currentRowHeight, columnProps, rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap, cell)), this.getColumnWidth(columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnWidth)), "data-row-height": this.truncationPattern || currentRowHeight
|
310
|
+
? this.setRowHeight(currentRowHeight)
|
311
|
+
: 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)) &&
|
312
|
+
(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" &&
|
313
|
+
!isSlotUsed(this.el, cellSlotName) && (h("div", { class: {
|
314
|
+
"cell-text-wrapper": true,
|
315
|
+
"cell-text-no-wrap": !this.truncationPattern,
|
316
|
+
} }, h("ic-typography", { variant: "body", class: {
|
317
|
+
[`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
|
318
|
+
(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
|
319
|
+
rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
|
320
|
+
!!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
|
321
|
+
!!rowEmphasis,
|
322
|
+
[`text-${this.density}`]: this.notDefaultDensity(),
|
323
|
+
} }, this.isObject(cell) && (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (h("ic-link", { href: cellValue("href"), target: cellValue("target") || undefined, rel: cellValue("rel") || undefined }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType))), this.isObject(cell) &&
|
324
|
+
Object.keys(cell).includes("description") && (h("div", { class: {
|
325
|
+
["cell-description"]: true,
|
326
|
+
[`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true,
|
327
|
+
} }, ((_o = cellValue("description")) === null || _o === void 0 ? void 0 : _o.icon) && (h("span", { class: "cell-description-icon", innerHTML: cellValue("description").icon })), h("ic-typography", { variant: "caption", class: "cell-description-text" }, (_q = (_p = cellValue("description")) === null || _p === void 0 ? void 0 : _p.data) !== null && _q !== void 0 ? _q : cellValue("description"))))))))));
|
328
|
+
};
|
329
|
+
this.createCells = (row, rowIndex) => {
|
330
|
+
var _a;
|
30
331
|
const rowValues = Object.values(row);
|
31
332
|
const rowKeys = Object.keys(row);
|
333
|
+
const rowOptions = this.getRowOptions(rowKeys, rowValues);
|
32
334
|
let rowAlignment;
|
33
335
|
let rowEmphasis;
|
34
336
|
const headerIndex = rowKeys.indexOf("header");
|
@@ -36,70 +338,110 @@ export class DataTable {
|
|
36
338
|
rowAlignment = this.getObjectValue(rowValues[headerIndex], "rowAlignment");
|
37
339
|
rowEmphasis = this.getObjectValue(rowValues[headerIndex], "emphasis");
|
38
340
|
}
|
341
|
+
const variableRowHeightVal = (_a = this.variableRowHeight) === null || _a === void 0 ? void 0 : _a.call(this, Object.assign(Object.assign({}, row), { index: rowIndex }));
|
342
|
+
const currentRowHeight = variableRowHeightVal
|
343
|
+
? variableRowHeightVal !== "auto" && variableRowHeightVal
|
344
|
+
: this.globalRowHeight !== "auto" && this.globalRowHeight;
|
39
345
|
return rowValues.map((cell, index) => {
|
40
|
-
const
|
346
|
+
const columnProps = this.columns[index];
|
347
|
+
const cellSlotName = `${columnProps === null || columnProps === void 0 ? void 0 : columnProps.key}-${rowIndex}`;
|
348
|
+
const hasIcon = this.isObject(cell) && Object.keys(cell).includes("icon");
|
41
349
|
const cellValue = (key) => this.getObjectValue(cell, key);
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
|
62
|
-
!!emphasis ||
|
63
|
-
!!rowEmphasis,
|
64
|
-
[`text-${this.density}`]: this.notDefaultDensity(),
|
65
|
-
} }, this.isObject(cell) && dataType !== "date" ? (Object.keys(cell).includes("href") ? (h("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, dataType)))));
|
350
|
+
if (rowKeys[index] === "header") {
|
351
|
+
return (h("th", { scope: "row", colSpan: cellValue("colspan"), class: {
|
352
|
+
["row-header"]: true,
|
353
|
+
[`row-header-alignment-${cellValue("cellAlignment")}`]: !!cellValue("cellAlignment"),
|
354
|
+
["row-header-sticky"]: this.stickyRowHeaders,
|
355
|
+
} }, cellValue("title")));
|
356
|
+
}
|
357
|
+
if (rowKeys[index] !== "rowOptions") {
|
358
|
+
return (h("td", { class: {
|
359
|
+
["table-cell"]: true,
|
360
|
+
[`table-density-${this.density}`]: this.notDefaultDensity(),
|
361
|
+
["with-overflow"]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element",
|
362
|
+
}, style: Object.assign({}, this.getColumnWidth(columnProps.columnWidth)) }, this.isObject(cell) &&
|
363
|
+
Object.keys(cell).includes("actionElement") ? (h("div", { class: "cell-grid-wrapper" }, this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis), h("span", { class: "action-element", innerHTML: cellValue("actionElement"),
|
364
|
+
// eslint-disable-next-line react/jsx-no-bind
|
365
|
+
onClick: cell.actionOnClick
|
366
|
+
? (event) => this.handleClick(event, cell.actionOnClick)
|
367
|
+
: undefined }))) : (this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis))));
|
368
|
+
}
|
66
369
|
});
|
67
370
|
};
|
68
|
-
this.createColumnHeaders = () => {
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
371
|
+
this.createColumnHeaders = () => (this.columns || []).map(({ cellAlignment, colspan, icon, key, title, columnWidth, excludeColumnFromSort, }, index) => (h("th", { scope: "col", class: {
|
372
|
+
["column-header"]: true,
|
373
|
+
[`table-density-${this.density}`]: this.notDefaultDensity(),
|
374
|
+
["updating-state-headers"]: this.updating && !this.loading,
|
375
|
+
}, style: Object.assign({}, this.getColumnWidth(columnWidth)), colSpan: colspan }, h("div", { class: {
|
376
|
+
"column-header-inner-container": true,
|
377
|
+
"truncation-tooltip": this.columnHeaderTruncation,
|
378
|
+
[`column-header-alignment-${cellAlignment}`]: !!cellAlignment,
|
379
|
+
} }, isSlotUsed(this.el, `${key}-column-icon`) ? (h("slot", { name: `${key}-column-icon` })) : (icon &&
|
380
|
+
!icon.hideOnHeader && (h("span", { class: "icon", innerHTML: icon.icon }))), this.columnHeaderTruncation ? (h("ic-tooltip", { label: title, target: `column-header-${index}` }, h("ic-typography", { id: `column-header-${index}`, variant: "body", class: {
|
381
|
+
["column-header-text"]: true,
|
382
|
+
[`text-${this.density}`]: this.notDefaultDensity(),
|
383
|
+
} }, title))) : (h("ic-typography", { variant: "body", class: {
|
384
|
+
["column-header-text"]: true,
|
385
|
+
[`text-${this.density}`]: this.notDefaultDensity(),
|
386
|
+
} }, title)), this.sortable && !excludeColumnFromSort && (h("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
|
387
|
+
// eslint-disable-next-line react/jsx-no-bind
|
388
|
+
onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
|
389
|
+
? this.sortedColumnOrder
|
390
|
+
: "unsorted"], class: {
|
391
|
+
["sort-button"]: true,
|
392
|
+
["sort-button-unsorted"]: this.sortedColumn !== key ||
|
393
|
+
this.sortedColumnOrder === "unsorted",
|
394
|
+
} }))), this.columnHeaderTruncation && (h("ic-typography", { variant: "body", "aria-hidden": "true", class: {
|
395
|
+
["column-header-text"]: true,
|
396
|
+
["dummy-column-header-text"]: this.columnHeaderTruncation,
|
397
|
+
[`text-${this.density}`]: this.notDefaultDensity(),
|
398
|
+
} }, title)))));
|
399
|
+
this.onRowClick = (row) => {
|
400
|
+
if (!this.loading && !this.updating) {
|
401
|
+
this.icSelectedRowChange.emit(this.selectedRow !== row ? row : null);
|
402
|
+
}
|
403
|
+
this.selectedRow =
|
404
|
+
this.selectedRow !== row && !this.loading && !this.updating && row;
|
88
405
|
};
|
89
406
|
this.createRows = () => {
|
90
407
|
const data = this.showPagination
|
91
408
|
? this.data.slice(this.fromRow, this.toRow)
|
92
409
|
: this.data.slice();
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
410
|
+
const paginationOffset = this.showPagination ? this.fromRow : 0;
|
411
|
+
/**
|
412
|
+
* Ensures that createCells has a value in data to map over to actually render the slot.
|
413
|
+
* Removes the need for the user to add it multiple times.
|
414
|
+
* `addDataToPosition` used to add the element in the correct column order.
|
415
|
+
* Adding empty string value in to give `createCells` something to loop over.
|
416
|
+
*/
|
417
|
+
const organisedData = data.map((row, rowIndex) => {
|
418
|
+
const slottedColumns = this.columns
|
419
|
+
.map(({ key }, index) => isSlotUsed(this.el, `${key}-${rowIndex + paginationOffset}`) && {
|
420
|
+
key,
|
421
|
+
index,
|
422
|
+
})
|
423
|
+
.filter((col) => !!col &&
|
424
|
+
// skip the column if its already in the row
|
425
|
+
!Object.prototype.hasOwnProperty.call(row, col.key));
|
426
|
+
return slottedColumns.length > 0
|
427
|
+
? addDataToPosition(row, slottedColumns, "")
|
428
|
+
: row;
|
429
|
+
});
|
430
|
+
return organisedData
|
431
|
+
.sort(!this.sortable || this.disableAutoSort
|
432
|
+
? undefined
|
433
|
+
: this.getSortFunction())
|
434
|
+
.map((row, index) => {
|
435
|
+
return (h("tr", {
|
436
|
+
// eslint-disable-next-line react/jsx-no-bind
|
437
|
+
onClick: () => this.onRowClick(row), class: {
|
438
|
+
["table-row"]: true,
|
439
|
+
["table-row-selected"]: this.highlightSelectedRow && this.selectedRow === row,
|
440
|
+
}
|
441
|
+
}, this.createCells(row, index + paginationOffset)));
|
442
|
+
});
|
102
443
|
};
|
444
|
+
this.getObjectValue = (cell, key) => Object.values(cell)[Object.keys(cell).indexOf(key)];
|
103
445
|
this.getSortButtonLabel = (key) => {
|
104
446
|
let label = "";
|
105
447
|
const getNextSortOption = (option) => {
|
@@ -155,10 +497,174 @@ export class DataTable {
|
|
155
497
|
}
|
156
498
|
this.sortedColumnOrder = sortOrders[nextSortOrderIndex];
|
157
499
|
sortButton.setAttribute("aria-label", this.getSortButtonLabel(column));
|
500
|
+
this.tableSorted = true;
|
501
|
+
this.icSortChange.emit({
|
502
|
+
columnName: column,
|
503
|
+
sorted: this.sortedColumnOrder,
|
504
|
+
});
|
505
|
+
};
|
506
|
+
this.getTypographyElements = () => {
|
507
|
+
// Filter out column headers and cell descriptions
|
508
|
+
return Array.from(this.el.shadowRoot.querySelectorAll("ic-typography:not(.column-header-text,.cell-description-text)"));
|
509
|
+
};
|
510
|
+
this.getTooltip = (typographyEl) => {
|
511
|
+
return typographyEl.closest(this.TOOLTIP);
|
512
|
+
};
|
513
|
+
this.updateTruncationTooltip = (removeTooltipOnly = false) => {
|
514
|
+
this.getTypographyElements().forEach((typographyEl) => {
|
515
|
+
const tooltip = this.getTooltip(typographyEl);
|
516
|
+
const cellContainer = this.getCellContainer(typographyEl);
|
517
|
+
if (typographyEl.closest(this.TEXT_WRAP_CLASS)) {
|
518
|
+
this.removeTooltip(cellContainer, typographyEl, tooltip);
|
519
|
+
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
|
520
|
+
return;
|
521
|
+
}
|
522
|
+
this.regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly);
|
523
|
+
});
|
158
524
|
};
|
159
525
|
this.updateScrollOffset = () => {
|
160
526
|
this.scrollOffset = this.el.shadowRoot.querySelector(".table-row-container").scrollTop;
|
161
527
|
};
|
528
|
+
this.updateRowHeightForDescriptions = (rowHeight, cellContainer) => {
|
529
|
+
cellContainer.setAttribute("data-row-height", rowHeight.toString());
|
530
|
+
cellContainer.setAttribute("style", `${this.ROW_HEIGHT_CSS_VARIABLE}: ${rowHeight}px`);
|
531
|
+
};
|
532
|
+
// Method to update the row heights on cells with descriptions and tooltip truncation
|
533
|
+
this.updateCellHeightsWithDescriptions = () => {
|
534
|
+
const descriptions = this.el.shadowRoot.querySelectorAll(this.CELL_DESCRIPTION_STRING);
|
535
|
+
descriptions.forEach((description) => {
|
536
|
+
const cellContainer = description.closest(`.${this.CELL_CONTAINER_WITH_DESCRIPTION_STRING}`);
|
537
|
+
const typography = cellContainer.querySelector(this.IC_TYPOGRAPHY_STRING);
|
538
|
+
const descriptionMarginTop = window
|
539
|
+
.getComputedStyle(description)
|
540
|
+
.getPropertyValue("margin-top");
|
541
|
+
const descriptionHeight = description.clientHeight + parseInt(descriptionMarginTop, 10);
|
542
|
+
if (this.globalRowHeight && this.globalRowHeight !== "auto") {
|
543
|
+
if (!typography.textContent &&
|
544
|
+
descriptionHeight + this.DEFAULT_LINE_HEIGHT > this.globalRowHeight) {
|
545
|
+
this.updateRowHeightForDescriptions(descriptionHeight, cellContainer);
|
546
|
+
}
|
547
|
+
else if (this.truncationPattern === this.TOOLTIP_STRING) {
|
548
|
+
if (descriptionHeight + this.DEFAULT_LINE_HEIGHT >
|
549
|
+
this.globalRowHeight) {
|
550
|
+
const cellIcon = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.querySelector(".icon");
|
551
|
+
if (deviceSizeMatches(IC_DEVICE_SIZES.XS) && cellIcon) {
|
552
|
+
// recalculate descriptionHeight as when a word break occurs this value changes
|
553
|
+
// Additional spacing given for 300-400% zoom
|
554
|
+
this.updateRowHeightForDescriptions(descriptionHeight +
|
555
|
+
this.DEFAULT_LINE_HEIGHT +
|
556
|
+
cellIcon.clientHeight, cellContainer);
|
557
|
+
}
|
558
|
+
else {
|
559
|
+
this.updateRowHeightForDescriptions(descriptionHeight + this.DEFAULT_LINE_HEIGHT, cellContainer);
|
560
|
+
}
|
561
|
+
}
|
562
|
+
this.addLineClampCSS(typography, cellContainer);
|
563
|
+
// Additional case for show/hide truncation for when a description is present, but the text
|
564
|
+
// isn't overflowing the cell to trigger the show more button to appear.
|
565
|
+
}
|
566
|
+
else if (this.truncationPattern === this.SHOW_HIDE_STRING &&
|
567
|
+
descriptionHeight + this.DEFAULT_LINE_HEIGHT > this.globalRowHeight &&
|
568
|
+
typography.style.getPropertyValue("--truncation-max-lines") !==
|
569
|
+
"initial") {
|
570
|
+
this.updateRowHeightForDescriptions(descriptionHeight + this.DEFAULT_LINE_HEIGHT, cellContainer);
|
571
|
+
if (descriptionHeight) {
|
572
|
+
this.createShowHideTruncation(typography, cellContainer, descriptionHeight);
|
573
|
+
}
|
574
|
+
}
|
575
|
+
}
|
576
|
+
});
|
577
|
+
};
|
578
|
+
this.setTableDimensions = () => {
|
579
|
+
let tableHostDimensions = {};
|
580
|
+
if (this.width) {
|
581
|
+
tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-width"]: this.width });
|
582
|
+
}
|
583
|
+
if (this.height) {
|
584
|
+
tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-height"]: this.height });
|
585
|
+
}
|
586
|
+
if (this.maxWidth) {
|
587
|
+
tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-max-width"]: this.maxWidth });
|
588
|
+
}
|
589
|
+
if (this.minWidth) {
|
590
|
+
tableHostDimensions = Object.assign(Object.assign({}, tableHostDimensions), { ["--table-min-width"]: this.minWidth });
|
591
|
+
}
|
592
|
+
return tableHostDimensions;
|
593
|
+
};
|
594
|
+
this.fixCellTooltip = (element) => {
|
595
|
+
var _a;
|
596
|
+
const tooltipEl = (element.tagName === "IC-TOOLTIP"
|
597
|
+
? element
|
598
|
+
: (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.IC_TOOLTIP_STRING));
|
599
|
+
if (tooltipEl) {
|
600
|
+
tooltipEl.setExternalPopperProps({
|
601
|
+
strategy: "fixed",
|
602
|
+
});
|
603
|
+
}
|
604
|
+
};
|
605
|
+
this.fixCellTooltips = () => {
|
606
|
+
const elements = this.el.shadowRoot.querySelectorAll(".data-type-element");
|
607
|
+
elements.forEach((element) => {
|
608
|
+
const slotElements = getSlotElements(element);
|
609
|
+
slotElements === null || slotElements === void 0 ? void 0 : slotElements.forEach((slottedEl) => {
|
610
|
+
this.fixCellTooltip(slottedEl);
|
611
|
+
});
|
612
|
+
});
|
613
|
+
const actionElements = this.el.shadowRoot.querySelectorAll(".action-element");
|
614
|
+
actionElements === null || actionElements === void 0 ? void 0 : actionElements.forEach((actionElementSpan) => {
|
615
|
+
const actionElement = actionElementSpan.firstChild;
|
616
|
+
if (actionElement) {
|
617
|
+
this.fixCellTooltip(actionElement);
|
618
|
+
}
|
619
|
+
});
|
620
|
+
};
|
621
|
+
this.handleClick = (event, callback) => callback(event);
|
622
|
+
this.renderTableBody = (data, loading, overlay) => {
|
623
|
+
if (!(data === null || data === void 0 ? void 0 : data.length))
|
624
|
+
return;
|
625
|
+
if (overlay && loading) {
|
626
|
+
return h("tbody", null, this.createRows());
|
627
|
+
}
|
628
|
+
else if (loading && !overlay) {
|
629
|
+
return null;
|
630
|
+
}
|
631
|
+
else {
|
632
|
+
return h("tbody", null, this.createRows());
|
633
|
+
}
|
634
|
+
};
|
635
|
+
this.renderLoadingIndicator = (isLoading, loadingOptions) => {
|
636
|
+
if (!isLoading)
|
637
|
+
return null;
|
638
|
+
return (h(Fragment, null, h("div", { class: "loading-overlay", ref: (el) => (this.loadingOverlay = el) }), h("ic-loading-indicator", { appearance: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.appearance, class: {
|
639
|
+
"loading-empty": isLoading,
|
640
|
+
loading: true,
|
641
|
+
"show-background": loadingOptions.showBackground || loadingOptions.overlay,
|
642
|
+
}, 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) })));
|
643
|
+
};
|
644
|
+
this.renderAriaLiveLoading = () => {
|
645
|
+
var _a, _b;
|
646
|
+
if (this.loading) {
|
647
|
+
return ((_a = this.loadingOptions) === null || _a === void 0 ? void 0 : _a.label) || "Loading...";
|
648
|
+
}
|
649
|
+
else if (this.updating) {
|
650
|
+
return ((_b = this.updatingOptions) === null || _b === void 0 ? void 0 : _b.description) || "Updating table data";
|
651
|
+
}
|
652
|
+
else {
|
653
|
+
return "";
|
654
|
+
}
|
655
|
+
};
|
656
|
+
this.renderEmptyState = (data, loading, overlay) => {
|
657
|
+
const emptyStateEl = isSlotUsed(this.el, "empty-state") ? (h("slot", { name: "empty-state" })) : (h("ic-empty-state", { aligned: "center", heading: "No Data", class: "loading-empty" }));
|
658
|
+
if (loading && !(data === null || data === void 0 ? void 0 : data.length) && overlay) {
|
659
|
+
return emptyStateEl;
|
660
|
+
}
|
661
|
+
else if (!loading && !(data === null || data === void 0 ? void 0 : data.length)) {
|
662
|
+
return emptyStateEl;
|
663
|
+
}
|
664
|
+
else {
|
665
|
+
return null;
|
666
|
+
}
|
667
|
+
};
|
162
668
|
this.fromRow = 0;
|
163
669
|
this.previousRowsPerPage = undefined;
|
164
670
|
this.rowsPerPage = undefined;
|
@@ -168,23 +674,42 @@ export class DataTable {
|
|
168
674
|
this.sortedColumn = undefined;
|
169
675
|
this.sortedColumnOrder = undefined;
|
170
676
|
this.toRow = undefined;
|
677
|
+
this.currentRowHeight = undefined;
|
678
|
+
this.debounceDelay = 0;
|
171
679
|
this.caption = undefined;
|
680
|
+
this.columnHeaderTruncation = false;
|
172
681
|
this.columns = undefined;
|
173
682
|
this.data = undefined;
|
683
|
+
this.disableAutoSort = false;
|
174
684
|
this.density = "default";
|
175
685
|
this.embedded = false;
|
686
|
+
this.globalRowHeight = "auto";
|
687
|
+
this.height = undefined;
|
688
|
+
this.highlightSelectedRow = true;
|
176
689
|
this.hideColumnHeaders = false;
|
177
|
-
this.
|
178
|
-
|
690
|
+
this.loading = false;
|
691
|
+
this.loadingOptions = undefined;
|
692
|
+
this.maxWidth = undefined;
|
693
|
+
this.minWidth = undefined;
|
694
|
+
this.minimumLoadingDisplayDuration = 1000;
|
695
|
+
this.paginationBarOptions = {
|
696
|
+
alignment: "right",
|
697
|
+
appearance: "default",
|
698
|
+
hideAllFromItemsPerPage: false,
|
699
|
+
hideRangeLabel: false,
|
700
|
+
itemLabel: "Item",
|
701
|
+
itemsPerPageOptions: [
|
179
702
|
{ label: "10", value: "10" },
|
180
703
|
{ label: "25", value: "25" },
|
181
704
|
{ label: "50", value: "50" },
|
182
705
|
],
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
706
|
+
pageLabel: "Page",
|
707
|
+
rangeLabelType: "page",
|
708
|
+
selectedItemsPerPage: 10,
|
709
|
+
setToFirstPageOnPaginationChange: false,
|
710
|
+
showGoToPageControl: true,
|
711
|
+
showItemsPerPageControl: true,
|
712
|
+
type: "simple",
|
188
713
|
};
|
189
714
|
this.showPagination = false;
|
190
715
|
this.sortable = false;
|
@@ -194,56 +719,524 @@ export class DataTable {
|
|
194
719
|
};
|
195
720
|
this.stickyColumnHeaders = false;
|
196
721
|
this.stickyRowHeaders = false;
|
722
|
+
this.tableLayout = "fixed";
|
723
|
+
this.truncationPattern = undefined;
|
724
|
+
this.updating = false;
|
725
|
+
this.updatingOptions = undefined;
|
726
|
+
this.variableRowHeight = undefined;
|
727
|
+
this.width = undefined;
|
728
|
+
}
|
729
|
+
headerTruncationChangeHandler() {
|
730
|
+
if (this.columnHeaderTruncation) {
|
731
|
+
this.prevTableContainerWidth = 0;
|
732
|
+
}
|
733
|
+
else {
|
734
|
+
const headers = this.el.shadowRoot.querySelectorAll("th.column-header");
|
735
|
+
headers.forEach((header) => {
|
736
|
+
const tooltip = header.querySelector(this.IC_TOOLTIP_STRING);
|
737
|
+
if (tooltip) {
|
738
|
+
tooltip.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
|
739
|
+
}
|
740
|
+
});
|
741
|
+
}
|
742
|
+
}
|
743
|
+
disconnectedCallback() {
|
744
|
+
var _a, _b;
|
745
|
+
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
746
|
+
(_b = this.headerResizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
|
197
747
|
}
|
198
748
|
componentWillLoad() {
|
199
|
-
|
749
|
+
var _a, _b;
|
750
|
+
this.rowsPerPage = Number(this.paginationBarOptions.itemsPerPageOptions[0].value);
|
200
751
|
this.previousRowsPerPage = this.rowsPerPage;
|
201
752
|
this.toRow = this.rowsPerPage;
|
202
753
|
this.sortedColumn = this.sortOptions.defaultColumn;
|
203
754
|
this.sortedColumnOrder = this.sortOptions.sortOrders[0];
|
755
|
+
this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 || !!((_b = this.loadingOptions) === null || _b === void 0 ? void 0 : _b.overlay) });
|
756
|
+
this.initialLoad = true;
|
757
|
+
this.previousItemsPerPage = this.rowsPerPage;
|
204
758
|
}
|
205
759
|
componentDidLoad() {
|
206
760
|
const tableElement = this.el.shadowRoot.querySelector("table");
|
207
761
|
const tableContainer = this.el.shadowRoot.querySelector(".table-container");
|
762
|
+
checkResizeObserver(this.runHeaderResizeObserver);
|
763
|
+
if (this.dataUpdated) {
|
764
|
+
this.dataUpdated = false;
|
765
|
+
}
|
208
766
|
if ((tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientHeight) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientHeight) ||
|
209
767
|
(tableElement === null || tableElement === void 0 ? void 0 : tableElement.clientWidth) > (tableContainer === null || tableContainer === void 0 ? void 0 : tableContainer.clientWidth)) {
|
210
768
|
this.scrollable = true;
|
211
769
|
}
|
770
|
+
if (this.loading) {
|
771
|
+
this.startLoadingTimer();
|
772
|
+
this.showLoadingIndicator();
|
773
|
+
}
|
774
|
+
if (this.truncationPattern) {
|
775
|
+
this.getTypographyElements().forEach((typographyEl) => {
|
776
|
+
const cellContainer = this.getCellContainer(typographyEl);
|
777
|
+
if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
|
778
|
+
this.dataTruncation(typographyEl);
|
779
|
+
}
|
780
|
+
});
|
781
|
+
this.debounceDataTruncation();
|
782
|
+
}
|
783
|
+
if (this.globalRowHeight !== "auto") {
|
784
|
+
this.updateSetRowHeight();
|
785
|
+
}
|
786
|
+
window.addEventListener("resize", this.updateCellHeightsWithDescriptions);
|
212
787
|
}
|
213
|
-
|
214
|
-
|
215
|
-
|
788
|
+
componentDidUpdate() {
|
789
|
+
// truncation updates invoked here once new/updated data has
|
790
|
+
// rendered to take into account updated .cell-container/ic-typography box model updates.
|
791
|
+
if (this.truncationPattern === this.SHOW_HIDE_STRING ||
|
792
|
+
this.truncationPattern === this.TOOLTIP_STRING) {
|
793
|
+
this.truncateUpdatedData();
|
794
|
+
}
|
216
795
|
}
|
217
|
-
|
218
|
-
this.
|
219
|
-
this.
|
220
|
-
|
221
|
-
|
222
|
-
|
796
|
+
componentDidRender() {
|
797
|
+
this.fixCellTooltips();
|
798
|
+
this.updateCellHeightsWithDescriptions();
|
799
|
+
this.adjustWidthForActionElement();
|
800
|
+
}
|
801
|
+
truncateUpdatedData() {
|
802
|
+
if (this.dataUpdated) {
|
803
|
+
if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
804
|
+
this.getTypographyElements().forEach((typographyEl) => {
|
805
|
+
const truncWrapper = this.getTruncWrapper(typographyEl);
|
806
|
+
const cellContainer = this.getCellContainer(typographyEl);
|
807
|
+
if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >=
|
808
|
+
(truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight)) {
|
809
|
+
this.resetShowHideTruncation(typographyEl);
|
810
|
+
return;
|
811
|
+
}
|
812
|
+
setTimeout(() => {
|
813
|
+
// slight delay due to data rendering
|
814
|
+
if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
|
815
|
+
this.addShowHideTruncation(cellContainer, typographyEl);
|
816
|
+
}
|
817
|
+
}, 150);
|
818
|
+
});
|
819
|
+
}
|
820
|
+
if (this.truncationPattern === this.TOOLTIP_STRING) {
|
821
|
+
this.updateTruncationTooltip();
|
822
|
+
}
|
823
|
+
this.dataUpdated = false;
|
223
824
|
}
|
224
|
-
|
225
|
-
|
226
|
-
|
825
|
+
if (this.tableSorted) {
|
826
|
+
if (this.truncationPattern === this.TOOLTIP_STRING) {
|
827
|
+
this.updateTruncationTooltip();
|
828
|
+
}
|
829
|
+
if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
830
|
+
this.getTypographyElements().forEach((typographyEl) => {
|
831
|
+
const cellContainer = this.getCellContainer(typographyEl);
|
832
|
+
if (!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
|
833
|
+
this.createShowHideTruncation(typographyEl, cellContainer);
|
834
|
+
}
|
835
|
+
else {
|
836
|
+
typographyEl.resetTruncation().then(() => {
|
837
|
+
cellContainer.removeAttribute("style");
|
838
|
+
});
|
839
|
+
}
|
840
|
+
});
|
841
|
+
}
|
842
|
+
this.tableSorted = false;
|
843
|
+
}
|
844
|
+
// This function recalculates the tooltip truncation when the rowHeight has been set.
|
845
|
+
// This is in componentDidUpdate so a setTimeout is not used to wait for the render to be complete
|
846
|
+
if (this.rowHeightSet) {
|
847
|
+
const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
|
848
|
+
const hasAutoRowHeight = this.globalRowHeight === "auto";
|
849
|
+
this.getTypographyElements().forEach((typographyEl) => {
|
850
|
+
var _a;
|
851
|
+
const cellContainer = this.getCellContainer(typographyEl);
|
852
|
+
const tooltipEl = this.getTooltip(typographyEl);
|
853
|
+
if (hasAutoRowHeight) {
|
854
|
+
cellContainer.style.height = null;
|
855
|
+
if (this.truncationPattern === this.TOOLTIP_STRING) {
|
856
|
+
this.removeTooltip(cellContainer, typographyEl, tooltipEl);
|
857
|
+
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
|
858
|
+
}
|
859
|
+
else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
860
|
+
this.resetShowHideTruncation(typographyEl);
|
861
|
+
}
|
862
|
+
return;
|
863
|
+
}
|
864
|
+
const rowHeight = fontSize *
|
865
|
+
parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
|
866
|
+
// If the set row height is bigger than the cell container even
|
867
|
+
// with textWrap, set the row height
|
868
|
+
if (!cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
|
869
|
+
!((_a = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.style) === null || _a === void 0 ? void 0 : _a.height) &&
|
870
|
+
rowHeight > cellContainer.clientHeight &&
|
871
|
+
!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
|
872
|
+
cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
|
873
|
+
}
|
874
|
+
if (this.truncationPattern) {
|
875
|
+
// If the set row height is bigger than the typography truncation wrapper
|
876
|
+
// scroll height, remove see more / see less button
|
877
|
+
if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
878
|
+
const truncWrapper = this.getTruncWrapper(typographyEl);
|
879
|
+
const showHideBtn = typographyEl.shadowRoot.querySelector("button");
|
880
|
+
if (showHideBtn &&
|
881
|
+
(truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight) <= cellContainer.clientHeight) {
|
882
|
+
this.resetShowHideTruncation(typographyEl);
|
883
|
+
return;
|
884
|
+
}
|
885
|
+
}
|
886
|
+
this.truncate(typographyEl, cellContainer, tooltipEl);
|
887
|
+
}
|
888
|
+
else {
|
889
|
+
this.updateSetRowHeight(typographyEl);
|
890
|
+
}
|
891
|
+
});
|
892
|
+
this.rowHeightSet = false;
|
893
|
+
}
|
894
|
+
// Only run truncation on the new rows
|
895
|
+
// when the number of items per page has increased
|
896
|
+
if (this.itemsPerPageChange) {
|
897
|
+
const allRows = this.el.shadowRoot.querySelectorAll(".table-row");
|
898
|
+
if (this.rowsPerPage > this.previousItemsPerPage) {
|
899
|
+
const newRows = Array.from(allRows).slice(this.previousItemsPerPage);
|
900
|
+
newRows.forEach((row) => {
|
901
|
+
row
|
902
|
+
.querySelectorAll(this.IC_TYPOGRAPHY_STRING)
|
903
|
+
.forEach((typographyEl) => {
|
904
|
+
const cellContainer = this.getCellContainer(typographyEl);
|
905
|
+
const tooltipEl = this.getTooltip(typographyEl);
|
906
|
+
this.truncate(typographyEl, cellContainer, tooltipEl);
|
907
|
+
});
|
908
|
+
});
|
909
|
+
}
|
910
|
+
this.previousItemsPerPage = this.rowsPerPage;
|
911
|
+
this.itemsPerPageChange = false;
|
912
|
+
}
|
913
|
+
if (!this.initialLoad && this.icPageChangeEvent) {
|
914
|
+
if (this.truncationPattern === this.TOOLTIP_STRING) {
|
915
|
+
this.updateTruncationTooltip();
|
916
|
+
}
|
917
|
+
// set truncation to see more if opened and next/previous page is pressed
|
918
|
+
if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
919
|
+
this.getTypographyElements().forEach((typographyEl) => {
|
920
|
+
const cellContainer = this.getCellContainer(typographyEl);
|
921
|
+
const showHideBtn = typographyEl.shadowRoot.querySelector("button");
|
922
|
+
if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > cellContainer.clientHeight &&
|
923
|
+
!showHideBtn) {
|
924
|
+
this.addShowHideTruncation(cellContainer, typographyEl);
|
925
|
+
}
|
926
|
+
});
|
927
|
+
}
|
928
|
+
this.icPageChangeEvent = false;
|
929
|
+
}
|
930
|
+
if (this.densityUpdate) {
|
931
|
+
this.getTypographyElements().forEach((typographyEl) => {
|
932
|
+
const cellContainer = this.getCellContainer(typographyEl);
|
933
|
+
const tooltipEl = this.getTooltip(typographyEl);
|
934
|
+
this.truncate(typographyEl, cellContainer, tooltipEl);
|
935
|
+
});
|
936
|
+
this.densityUpdate = false;
|
937
|
+
}
|
938
|
+
if (this.truncationPatternUpdated) {
|
939
|
+
if (this.truncationPattern === this.TOOLTIP_STRING) {
|
940
|
+
this.getTypographyElements().forEach((typographyEl) => {
|
941
|
+
const cellContainer = this.getCellContainer(typographyEl);
|
942
|
+
const tooltipEl = this.getTooltip(typographyEl);
|
943
|
+
if (typographyEl.scrollHeight > cellContainer.clientHeight) {
|
944
|
+
this.addTooltipTruncation(typographyEl, cellContainer, tooltipEl);
|
945
|
+
}
|
946
|
+
});
|
947
|
+
}
|
948
|
+
else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
949
|
+
this.getTypographyElements().forEach((typographyEl) => {
|
950
|
+
const truncWrapper = this.getTruncWrapper(typographyEl);
|
951
|
+
const cellContainer = this.getCellContainer(typographyEl);
|
952
|
+
if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >
|
953
|
+
(truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight)) {
|
954
|
+
this.resetShowHideTruncation(typographyEl);
|
955
|
+
return;
|
956
|
+
}
|
957
|
+
if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
|
958
|
+
this.addShowHideTruncation(cellContainer, typographyEl);
|
959
|
+
}
|
960
|
+
});
|
961
|
+
}
|
962
|
+
}
|
963
|
+
}
|
964
|
+
createShowHideTruncation(typographyEl, cellContainer, descriptionHeight) {
|
965
|
+
typographyEl.checkMaxLines(typographyEl.scrollHeight);
|
966
|
+
typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
|
967
|
+
if (cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
|
968
|
+
descriptionHeight) {
|
969
|
+
typographyEl.setAttribute("max-lines", `${Math.floor(((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - descriptionHeight) /
|
970
|
+
this.DEFAULT_LINE_HEIGHT)}`);
|
227
971
|
}
|
228
972
|
else {
|
973
|
+
typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
|
974
|
+
}
|
975
|
+
typographyEl.setShowHideExpanded(false);
|
976
|
+
cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
|
977
|
+
}
|
978
|
+
addTooltipTruncation(typographyEl, cellContainer, tooltip) {
|
979
|
+
this.addLineClampCSS(typographyEl, cellContainer);
|
980
|
+
if (!tooltip) {
|
981
|
+
this.createTruncationTooltip(typographyEl, cellContainer);
|
982
|
+
}
|
983
|
+
}
|
984
|
+
addShowHideTruncation(cellContainer, typographyEl) {
|
985
|
+
cellContainer.classList.add(this.SHOW_HIDE_CSS_CLASS);
|
986
|
+
this.createShowHideTruncation(typographyEl, cellContainer);
|
987
|
+
}
|
988
|
+
// Set the height to initial if row height is set and the show / hide truncation
|
989
|
+
// is clicked
|
990
|
+
handleTypographyTruncationExpandToggle({ detail, }) {
|
991
|
+
const { expanded, typographyEl } = detail;
|
992
|
+
const cellContainer = this.getCellContainer(typographyEl);
|
993
|
+
if (cellContainer.style.getPropertyValue(this.ROW_HEIGHT_CSS_VARIABLE) &&
|
994
|
+
expanded) {
|
995
|
+
cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, "inherit");
|
996
|
+
}
|
997
|
+
}
|
998
|
+
handlePageChange({ detail, target }) {
|
999
|
+
if (target.parentElement !== this.el) {
|
1000
|
+
this.fromRow = (detail.value - 1) * this.rowsPerPage;
|
1001
|
+
this.toRow = this.fromRow + this.rowsPerPage;
|
1002
|
+
const tableRowsContainer = this.el.shadowRoot.querySelector(".table-row-container");
|
1003
|
+
if (this.previousRowsPerPage === this.rowsPerPage) {
|
1004
|
+
tableRowsContainer.scrollTop = 0;
|
1005
|
+
}
|
1006
|
+
else if (this.previousRowsPerPage < this.rowsPerPage) {
|
1007
|
+
tableRowsContainer.scrollTop = this.scrollOffset;
|
1008
|
+
this.previousRowsPerPage = this.rowsPerPage;
|
1009
|
+
}
|
1010
|
+
else {
|
1011
|
+
this.previousRowsPerPage = this.rowsPerPage;
|
1012
|
+
}
|
1013
|
+
}
|
1014
|
+
if (!this.initialLoad && this.previousPaginationPage !== detail.value) {
|
1015
|
+
// This is to prevent icPageChange from triggering truncation on first load
|
1016
|
+
this.icPageChangeEvent = true;
|
1017
|
+
}
|
1018
|
+
this.previousPaginationPage = detail.value;
|
1019
|
+
this.initialLoad = false;
|
1020
|
+
}
|
1021
|
+
handleItemsPerPageChange({ detail, target, }) {
|
1022
|
+
if (target.parentElement !== this.el) {
|
229
1023
|
this.previousRowsPerPage = this.rowsPerPage;
|
1024
|
+
this.rowsPerPage = detail.value;
|
230
1025
|
}
|
1026
|
+
this.itemsPerPageChange = true;
|
1027
|
+
}
|
1028
|
+
handleDensityChange(ev) {
|
1029
|
+
this.density = ev.detail.value;
|
231
1030
|
}
|
232
1031
|
clickListener(ev) {
|
233
1032
|
if (ev.target !== this.el)
|
234
1033
|
this.selectedRow = undefined;
|
235
1034
|
}
|
1035
|
+
loadingHandler(newValue) {
|
1036
|
+
if (newValue)
|
1037
|
+
this.startLoadingTimer();
|
1038
|
+
if (this.loading) {
|
1039
|
+
setTimeout(() => {
|
1040
|
+
this.showLoadingIndicator();
|
1041
|
+
}, 500);
|
1042
|
+
}
|
1043
|
+
}
|
1044
|
+
truncationPatternHandler(newValue) {
|
1045
|
+
if (newValue === this.TOOLTIP_STRING) {
|
1046
|
+
this.resetShowHideTruncation();
|
1047
|
+
this.updateTruncationTooltip(true);
|
1048
|
+
// Not using debounceDataTruncation here due to resizeObserver not being triggered
|
1049
|
+
this.getTypographyElements().forEach((typographyEl) => {
|
1050
|
+
const cellContainer = this.getCellContainer(typographyEl);
|
1051
|
+
const tooltip = this.getTooltip(typographyEl);
|
1052
|
+
this.truncate(typographyEl, cellContainer, tooltip);
|
1053
|
+
});
|
1054
|
+
}
|
1055
|
+
if (newValue === this.SHOW_HIDE_STRING) {
|
1056
|
+
// ResizeObserver is trigger here due to the see more/see less links being removed.
|
1057
|
+
// The resizeObserver will also apply the tooltip where relevant
|
1058
|
+
this.updateTruncationTooltip(true);
|
1059
|
+
this.getTypographyElements().forEach((typographyEl) => {
|
1060
|
+
const truncWrapper = this.getTruncWrapper(typographyEl);
|
1061
|
+
const cellContainer = this.getCellContainer(typographyEl);
|
1062
|
+
if ((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - this.DEFAULT_LINE_HEIGHT >
|
1063
|
+
(truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight)) {
|
1064
|
+
this.resetShowHideTruncation(typographyEl);
|
1065
|
+
return;
|
1066
|
+
}
|
1067
|
+
setTimeout(() => {
|
1068
|
+
// slight delay due to data rendering
|
1069
|
+
if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)) {
|
1070
|
+
this.addShowHideTruncation(cellContainer, typographyEl);
|
1071
|
+
}
|
1072
|
+
}, 150);
|
1073
|
+
});
|
1074
|
+
}
|
1075
|
+
this.truncationPatternUpdated = true;
|
1076
|
+
}
|
1077
|
+
async dataHandler(newData) {
|
1078
|
+
var _a;
|
1079
|
+
this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: (newData === null || newData === void 0 ? void 0 : newData.length) > 0 || !!((_a = this.loadingOptions) === null || _a === void 0 ? void 0 : _a.overlay) });
|
1080
|
+
if (this.loading) {
|
1081
|
+
!this.hasLoadedForOneSecond
|
1082
|
+
? setTimeout(() => (this.loading = false), this.minimumLoadingDisplayDuration -
|
1083
|
+
(Date.now() - this.timerStarted))
|
1084
|
+
: (this.loading = false);
|
1085
|
+
}
|
1086
|
+
if (this.updating)
|
1087
|
+
this.updating = false;
|
1088
|
+
this.dataUpdated = true;
|
1089
|
+
}
|
1090
|
+
async densityHandler() {
|
1091
|
+
this.densityUpdate = true;
|
1092
|
+
}
|
1093
|
+
resetShowHideTruncation(typographyEl) {
|
1094
|
+
if (typographyEl) {
|
1095
|
+
const truncWrapper = this.getTruncWrapper(typographyEl);
|
1096
|
+
const cellContainer = this.getCellContainer(typographyEl);
|
1097
|
+
if ((truncWrapper === null || truncWrapper === void 0 ? void 0 : truncWrapper.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) &&
|
1098
|
+
!isEmptyString(typographyEl.getAttribute("max-lines")) &&
|
1099
|
+
Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT) !==
|
1100
|
+
+typographyEl.getAttribute("max-lines")) {
|
1101
|
+
typographyEl.checkMaxLines(truncWrapper.scrollHeight);
|
1102
|
+
typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
|
1103
|
+
typographyEl.setShowHideExpanded(false);
|
1104
|
+
cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
|
1105
|
+
}
|
1106
|
+
else if (!cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING)) {
|
1107
|
+
typographyEl.resetTruncation().then(() => {
|
1108
|
+
if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
|
1109
|
+
cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
|
1110
|
+
}
|
1111
|
+
});
|
1112
|
+
}
|
1113
|
+
}
|
1114
|
+
else {
|
1115
|
+
this.getTypographyElements().forEach((typographyEl) => {
|
1116
|
+
const cellContainer = this.getCellContainer(typographyEl);
|
1117
|
+
typographyEl.resetTruncation().then(() => {
|
1118
|
+
if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
|
1119
|
+
cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
|
1120
|
+
}
|
1121
|
+
});
|
1122
|
+
});
|
1123
|
+
}
|
1124
|
+
}
|
1125
|
+
rowHeightChangeHandler(newValue, oldValue) {
|
1126
|
+
if (+newValue !== +oldValue) {
|
1127
|
+
this.deleteTextWrapDataKey(this.data);
|
1128
|
+
this.deleteTextWrapDataKey(this.columns);
|
1129
|
+
this.removeTextWrap();
|
1130
|
+
this.icRowHeightChange.emit();
|
1131
|
+
this.rowHeightSet = true;
|
1132
|
+
}
|
1133
|
+
}
|
1134
|
+
/**
|
1135
|
+
* Resets the `globalRowHeight` prop to number or auto and sets the `variableRowHeight` prop to `null`.
|
1136
|
+
*/
|
1137
|
+
async resetRowHeights(rowHeight) {
|
1138
|
+
this.globalRowHeight = rowHeight || "auto";
|
1139
|
+
this.variableRowHeight = null;
|
1140
|
+
}
|
1141
|
+
showLoadingIndicator() {
|
1142
|
+
var _a, _b, _c;
|
1143
|
+
if ((_a = this.loadingOptions) === null || _a === void 0 ? void 0 : _a.overlay) {
|
1144
|
+
(_b = this.loadingOverlay) === null || _b === void 0 ? void 0 : _b.classList.add("show");
|
1145
|
+
}
|
1146
|
+
(_c = this.loadingIndicator) === null || _c === void 0 ? void 0 : _c.classList.add("show");
|
1147
|
+
}
|
1148
|
+
getRowOptions(rowKeys, rowValues) {
|
1149
|
+
const rowOptionsIndex = rowKeys.indexOf("rowOptions");
|
1150
|
+
return rowOptionsIndex > -1 && rowValues[rowOptionsIndex];
|
1151
|
+
}
|
1152
|
+
regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly) {
|
1153
|
+
// When sorting the table, instead of regenerating the tooltip,
|
1154
|
+
// the tooltip details are updated
|
1155
|
+
if (tooltip) {
|
1156
|
+
if (this.tableSorted) {
|
1157
|
+
tooltip.setAttribute("target", typographyEl.id);
|
1158
|
+
tooltip.setAttribute("label", typographyEl.textContent);
|
1159
|
+
}
|
1160
|
+
else {
|
1161
|
+
this.removeTooltip(cellContainer, typographyEl, tooltip);
|
1162
|
+
}
|
1163
|
+
if (removeTooltipOnly) {
|
1164
|
+
return;
|
1165
|
+
}
|
1166
|
+
}
|
1167
|
+
// This add line clamp to data only when
|
1168
|
+
// the data object has been updated
|
1169
|
+
if (!typographyEl.getAttribute("style") && this.dataUpdated) {
|
1170
|
+
this.addLineClampCSS(typographyEl, cellContainer);
|
1171
|
+
}
|
1172
|
+
if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) &&
|
1173
|
+
this.truncationPattern === this.TOOLTIP_STRING) {
|
1174
|
+
if (!typographyEl.getAttribute("style") ||
|
1175
|
+
typographyEl.style.cssText.includes(`${this.LINE_CLAMP_CSS_VARIABLE}: 0;`)) {
|
1176
|
+
this.addLineClampCSS(typographyEl, cellContainer);
|
1177
|
+
}
|
1178
|
+
if (!cellContainer.querySelector(this.IC_TOOLTIP_STRING))
|
1179
|
+
this.createTruncationTooltip(typographyEl, cellContainer);
|
1180
|
+
}
|
1181
|
+
}
|
1182
|
+
removeTooltip(cellContainer, typographyEl, tooltip) {
|
1183
|
+
const cellTextWrapper = cellContainer.querySelector(this.CELL_TEXT_WRAPPER_STRING);
|
1184
|
+
cellTextWrapper.prepend(typographyEl);
|
1185
|
+
if (tooltip) {
|
1186
|
+
tooltip.remove();
|
1187
|
+
}
|
1188
|
+
}
|
1189
|
+
addLineClampCSS(typographyEl, cellContainer) {
|
1190
|
+
var _a, _b;
|
1191
|
+
const descriptionCellHeight = (_a = cellContainer.querySelector(this.CELL_DESCRIPTION_STRING)) === null || _a === void 0 ? void 0 : _a.clientHeight;
|
1192
|
+
if (cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
|
1193
|
+
(cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) > descriptionCellHeight) {
|
1194
|
+
let iconHeight;
|
1195
|
+
if (deviceSizeMatches(IC_DEVICE_SIZES.XS)) {
|
1196
|
+
const cellIcon = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.querySelector(".icon");
|
1197
|
+
iconHeight = cellIcon ? cellIcon.clientHeight : 0;
|
1198
|
+
}
|
1199
|
+
else {
|
1200
|
+
iconHeight = 0;
|
1201
|
+
}
|
1202
|
+
const height = (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) -
|
1203
|
+
((_b = cellContainer.querySelector(this.CELL_DESCRIPTION_STRING)) === null || _b === void 0 ? void 0 : _b.clientHeight) -
|
1204
|
+
iconHeight;
|
1205
|
+
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: ${this.getLines(height || 0)}`);
|
1206
|
+
}
|
1207
|
+
else {
|
1208
|
+
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: ${this.getLines(cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)}`);
|
1209
|
+
}
|
1210
|
+
}
|
1211
|
+
createTruncationTooltip(typographyEl, cellContainer) {
|
1212
|
+
const tooltipEl = document.createElement(this.IC_TOOLTIP_STRING);
|
1213
|
+
tooltipEl.setAttribute("target", typographyEl.id);
|
1214
|
+
tooltipEl.setAttribute("label", typographyEl.textContent);
|
1215
|
+
tooltipEl.classList.add("ic-tooltip-overflow");
|
1216
|
+
tooltipEl.setExternalPopperProps({
|
1217
|
+
// This might need reverting back to absolute if the tooltip doesn't dynamically position itself correctly
|
1218
|
+
strategy: "fixed",
|
1219
|
+
});
|
1220
|
+
const cellTextWrapper = cellContainer.querySelector(this.CELL_TEXT_WRAPPER_STRING);
|
1221
|
+
cellTextWrapper.prepend(tooltipEl);
|
1222
|
+
tooltipEl.prepend(typographyEl);
|
1223
|
+
}
|
236
1224
|
render() {
|
237
|
-
|
238
|
-
|
1225
|
+
var _a, _b;
|
1226
|
+
const { caption, createColumnHeaders, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationBarOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumn, sortedColumnOrder, stickyColumnHeaders, updateScrollOffset, updating, } = this;
|
1227
|
+
return (h(Host, { style: Object.assign({}, this.setTableDimensions()) }, h("div", { class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { name: "title-bar" }), h("div", { class: {
|
239
1228
|
["table-row-container"]: true,
|
240
1229
|
scrollable,
|
241
|
-
}, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset },
|
1230
|
+
}, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, isSlotUsed(this.el, "title-bar") && h("slot", { name: "title-bar" }), h("table", { style: {
|
1231
|
+
["--table-layout"]: this.tableLayout,
|
1232
|
+
} }, h("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { class: {
|
242
1233
|
["column-header-sticky"]: stickyColumnHeaders,
|
243
1234
|
["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
|
244
|
-
} }, h("tr", null, createColumnHeaders()))),
|
245
|
-
|
246
|
-
: "
|
1235
|
+
} }, h("tr", null, createColumnHeaders()))), updating &&
|
1236
|
+
!loading &&
|
1237
|
+
(hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), this.renderTableBody(data, loading, loadingOptions.overlay)), this.renderEmptyState(data, loading, loadingOptions.overlay)), h("div", { "aria-live": "assertive", class: "sr-only" }, this.renderAriaLiveLoading()), this.renderLoadingIndicator(loading, loadingOptions), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { alignment: paginationBarOptions.alignment, appearance: paginationBarOptions.appearance, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, hideRangeLabel: paginationBarOptions.hideRangeLabel, itemLabel: paginationBarOptions.itemLabel, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, pageLabel: paginationBarOptions.pageLabel, rangeLabelType: paginationBarOptions.rangeLabelType, selectedItemsPerPage: paginationBarOptions.selectedItemsPerPage, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange, showGoToPageControl: paginationBarOptions.showGoToPageControl, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type })))), sortable && (h("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
|
1238
|
+
? `${((_b = this.columns.find((col) => col.key === sortedColumn)) === null || _b === void 0 ? void 0 : _b.title) || sortedColumn} sorted ${sortedColumnOrder}`
|
1239
|
+
: "table unsorted")))));
|
247
1240
|
}
|
248
1241
|
static get is() { return "ic-data-table"; }
|
249
1242
|
static get encapsulation() { return "shadow"; }
|
@@ -276,6 +1269,24 @@ export class DataTable {
|
|
276
1269
|
"attribute": "caption",
|
277
1270
|
"reflect": false
|
278
1271
|
},
|
1272
|
+
"columnHeaderTruncation": {
|
1273
|
+
"type": "boolean",
|
1274
|
+
"mutable": false,
|
1275
|
+
"complexType": {
|
1276
|
+
"original": "boolean",
|
1277
|
+
"resolved": "boolean",
|
1278
|
+
"references": {}
|
1279
|
+
},
|
1280
|
+
"required": false,
|
1281
|
+
"optional": false,
|
1282
|
+
"docs": {
|
1283
|
+
"tags": [],
|
1284
|
+
"text": "Determines whether the column header should be truncated and display a tooltip. Default is `false`."
|
1285
|
+
},
|
1286
|
+
"attribute": "column-header-truncation",
|
1287
|
+
"reflect": false,
|
1288
|
+
"defaultValue": "false"
|
1289
|
+
},
|
279
1290
|
"columns": {
|
280
1291
|
"type": "unknown",
|
281
1292
|
"mutable": false,
|
@@ -301,28 +1312,13 @@ export class DataTable {
|
|
301
1312
|
"type": "unknown",
|
302
1313
|
"mutable": false,
|
303
1314
|
"complexType": {
|
304
|
-
"original": "
|
305
|
-
"resolved": "
|
306
|
-
"references": {}
|
307
|
-
},
|
308
|
-
"required": false,
|
309
|
-
"optional": false,
|
310
|
-
"docs": {
|
311
|
-
"tags": [],
|
312
|
-
"text": "The row content for the table."
|
313
|
-
}
|
314
|
-
},
|
315
|
-
"density": {
|
316
|
-
"type": "string",
|
317
|
-
"mutable": false,
|
318
|
-
"complexType": {
|
319
|
-
"original": "IcDataTableDensityOptions",
|
320
|
-
"resolved": "\"default\" | \"dense\" | \"spacious\"",
|
1315
|
+
"original": "IcDataTableDataType[]",
|
1316
|
+
"resolved": "IcDataTableDataType[]",
|
321
1317
|
"references": {
|
322
|
-
"
|
1318
|
+
"IcDataTableDataType": {
|
323
1319
|
"location": "import",
|
324
1320
|
"path": "./ic-data-table.types",
|
325
|
-
"id": "src/components/ic-data-table/ic-data-table.types.tsx::
|
1321
|
+
"id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableDataType"
|
326
1322
|
}
|
327
1323
|
}
|
328
1324
|
},
|
@@ -330,7 +1326,46 @@ export class DataTable {
|
|
330
1326
|
"optional": true,
|
331
1327
|
"docs": {
|
332
1328
|
"tags": [],
|
333
|
-
"text": "
|
1329
|
+
"text": "The row content for the table."
|
1330
|
+
}
|
1331
|
+
},
|
1332
|
+
"disableAutoSort": {
|
1333
|
+
"type": "boolean",
|
1334
|
+
"mutable": false,
|
1335
|
+
"complexType": {
|
1336
|
+
"original": "boolean",
|
1337
|
+
"resolved": "boolean",
|
1338
|
+
"references": {}
|
1339
|
+
},
|
1340
|
+
"required": false,
|
1341
|
+
"optional": true,
|
1342
|
+
"docs": {
|
1343
|
+
"tags": [],
|
1344
|
+
"text": "If `true`, the built in sort functionality will be disabled. For example, if rows will already be sorted from an external source."
|
1345
|
+
},
|
1346
|
+
"attribute": "disable-auto-sort",
|
1347
|
+
"reflect": false,
|
1348
|
+
"defaultValue": "false"
|
1349
|
+
},
|
1350
|
+
"density": {
|
1351
|
+
"type": "string",
|
1352
|
+
"mutable": true,
|
1353
|
+
"complexType": {
|
1354
|
+
"original": "IcDataTableDensityOptions",
|
1355
|
+
"resolved": "\"default\" | \"dense\" | \"spacious\"",
|
1356
|
+
"references": {
|
1357
|
+
"IcDataTableDensityOptions": {
|
1358
|
+
"location": "import",
|
1359
|
+
"path": "./ic-data-table.types",
|
1360
|
+
"id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableDensityOptions"
|
1361
|
+
}
|
1362
|
+
}
|
1363
|
+
},
|
1364
|
+
"required": false,
|
1365
|
+
"optional": true,
|
1366
|
+
"docs": {
|
1367
|
+
"tags": [],
|
1368
|
+
"text": "Set the density of the table including font and padding."
|
334
1369
|
},
|
335
1370
|
"attribute": "density",
|
336
1371
|
"reflect": false,
|
@@ -354,6 +1389,65 @@ export class DataTable {
|
|
354
1389
|
"reflect": false,
|
355
1390
|
"defaultValue": "false"
|
356
1391
|
},
|
1392
|
+
"globalRowHeight": {
|
1393
|
+
"type": "any",
|
1394
|
+
"mutable": true,
|
1395
|
+
"complexType": {
|
1396
|
+
"original": "IcDataTableRowHeights",
|
1397
|
+
"resolved": "\"auto\" | number",
|
1398
|
+
"references": {
|
1399
|
+
"IcDataTableRowHeights": {
|
1400
|
+
"location": "import",
|
1401
|
+
"path": "./ic-data-table.types",
|
1402
|
+
"id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableRowHeights"
|
1403
|
+
}
|
1404
|
+
}
|
1405
|
+
},
|
1406
|
+
"required": false,
|
1407
|
+
"optional": true,
|
1408
|
+
"docs": {
|
1409
|
+
"tags": [],
|
1410
|
+
"text": "Sets the row height on all rows in the table that aren't set using the `variableRowHeight` method."
|
1411
|
+
},
|
1412
|
+
"attribute": "global-row-height",
|
1413
|
+
"reflect": false,
|
1414
|
+
"defaultValue": "\"auto\""
|
1415
|
+
},
|
1416
|
+
"height": {
|
1417
|
+
"type": "string",
|
1418
|
+
"mutable": false,
|
1419
|
+
"complexType": {
|
1420
|
+
"original": "string",
|
1421
|
+
"resolved": "string",
|
1422
|
+
"references": {}
|
1423
|
+
},
|
1424
|
+
"required": false,
|
1425
|
+
"optional": true,
|
1426
|
+
"docs": {
|
1427
|
+
"tags": [],
|
1428
|
+
"text": "Sets the table height. Can be set to `auto` or a specific value in `px`, `rem`, or `%`."
|
1429
|
+
},
|
1430
|
+
"attribute": "height",
|
1431
|
+
"reflect": false
|
1432
|
+
},
|
1433
|
+
"highlightSelectedRow": {
|
1434
|
+
"type": "boolean",
|
1435
|
+
"mutable": false,
|
1436
|
+
"complexType": {
|
1437
|
+
"original": "boolean",
|
1438
|
+
"resolved": "boolean",
|
1439
|
+
"references": {}
|
1440
|
+
},
|
1441
|
+
"required": false,
|
1442
|
+
"optional": true,
|
1443
|
+
"docs": {
|
1444
|
+
"tags": [],
|
1445
|
+
"text": "If `true`, the selected row is highlighted using a background colour."
|
1446
|
+
},
|
1447
|
+
"attribute": "highlight-selected-row",
|
1448
|
+
"reflect": false,
|
1449
|
+
"defaultValue": "true"
|
1450
|
+
},
|
357
1451
|
"hideColumnHeaders": {
|
358
1452
|
"type": "boolean",
|
359
1453
|
"mutable": false,
|
@@ -372,27 +1466,108 @@ export class DataTable {
|
|
372
1466
|
"reflect": false,
|
373
1467
|
"defaultValue": "false"
|
374
1468
|
},
|
375
|
-
"
|
1469
|
+
"loading": {
|
1470
|
+
"type": "boolean",
|
1471
|
+
"mutable": true,
|
1472
|
+
"complexType": {
|
1473
|
+
"original": "boolean",
|
1474
|
+
"resolved": "boolean",
|
1475
|
+
"references": {}
|
1476
|
+
},
|
1477
|
+
"required": false,
|
1478
|
+
"optional": true,
|
1479
|
+
"docs": {
|
1480
|
+
"tags": [],
|
1481
|
+
"text": "When set to `true`, the full table will show a loading state, featuring a radial indicator."
|
1482
|
+
},
|
1483
|
+
"attribute": "loading",
|
1484
|
+
"reflect": false,
|
1485
|
+
"defaultValue": "false"
|
1486
|
+
},
|
1487
|
+
"loadingOptions": {
|
376
1488
|
"type": "unknown",
|
377
1489
|
"mutable": false,
|
378
1490
|
"complexType": {
|
379
|
-
"original": "{\n
|
380
|
-
"resolved": "{
|
1491
|
+
"original": "{\n appearance?: IcThemeForegroundNoDefault;\n description?: string;\n label?: string;\n labelDuration?: number;\n max?: number;\n min?: number;\n progress?: number;\n showBackground?: boolean;\n overlay?: boolean;\n }",
|
1492
|
+
"resolved": "{ appearance?: IcThemeForegroundNoDefault; description?: string; label?: string; labelDuration?: number; max?: number; min?: number; progress?: number; showBackground?: boolean; overlay?: boolean; }",
|
381
1493
|
"references": {
|
382
|
-
"
|
383
|
-
"location": "import",
|
384
|
-
"path": "../ic-pagination/ic-pagination.types",
|
385
|
-
"id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationTypes"
|
386
|
-
},
|
387
|
-
"IcPaginationControlTypes": {
|
1494
|
+
"IcThemeForegroundNoDefault": {
|
388
1495
|
"location": "import",
|
389
|
-
"path": "
|
390
|
-
"id": "
|
391
|
-
}
|
392
|
-
|
1496
|
+
"path": "@ukic/web-components/dist/types/utils/types",
|
1497
|
+
"id": "../web-components/dist/types/utils/types.d.ts::IcThemeForegroundNoDefault"
|
1498
|
+
}
|
1499
|
+
}
|
1500
|
+
},
|
1501
|
+
"required": false,
|
1502
|
+
"optional": true,
|
1503
|
+
"docs": {
|
1504
|
+
"tags": [],
|
1505
|
+
"text": "Sets the props for the circular loading indicator used in the loading state."
|
1506
|
+
}
|
1507
|
+
},
|
1508
|
+
"maxWidth": {
|
1509
|
+
"type": "string",
|
1510
|
+
"mutable": false,
|
1511
|
+
"complexType": {
|
1512
|
+
"original": "string",
|
1513
|
+
"resolved": "string",
|
1514
|
+
"references": {}
|
1515
|
+
},
|
1516
|
+
"required": false,
|
1517
|
+
"optional": true,
|
1518
|
+
"docs": {
|
1519
|
+
"tags": [],
|
1520
|
+
"text": "Sets the maximum width of the data table. Can be set in `px`, `rem`, or `%`."
|
1521
|
+
},
|
1522
|
+
"attribute": "max-width",
|
1523
|
+
"reflect": false
|
1524
|
+
},
|
1525
|
+
"minWidth": {
|
1526
|
+
"type": "string",
|
1527
|
+
"mutable": false,
|
1528
|
+
"complexType": {
|
1529
|
+
"original": "string",
|
1530
|
+
"resolved": "string",
|
1531
|
+
"references": {}
|
1532
|
+
},
|
1533
|
+
"required": false,
|
1534
|
+
"optional": true,
|
1535
|
+
"docs": {
|
1536
|
+
"tags": [],
|
1537
|
+
"text": "Sets the minimum width of the data table. Can be set in `px`, `rem`, or `%`."
|
1538
|
+
},
|
1539
|
+
"attribute": "min-width",
|
1540
|
+
"reflect": false
|
1541
|
+
},
|
1542
|
+
"minimumLoadingDisplayDuration": {
|
1543
|
+
"type": "number",
|
1544
|
+
"mutable": false,
|
1545
|
+
"complexType": {
|
1546
|
+
"original": "number",
|
1547
|
+
"resolved": "number",
|
1548
|
+
"references": {}
|
1549
|
+
},
|
1550
|
+
"required": false,
|
1551
|
+
"optional": true,
|
1552
|
+
"docs": {
|
1553
|
+
"tags": [],
|
1554
|
+
"text": "The minimum amount of time the `loading` state displays for before showing the data. Used to prevent flashing in the component."
|
1555
|
+
},
|
1556
|
+
"attribute": "minimum-loading-display-duration",
|
1557
|
+
"reflect": false,
|
1558
|
+
"defaultValue": "1000"
|
1559
|
+
},
|
1560
|
+
"paginationBarOptions": {
|
1561
|
+
"type": "unknown",
|
1562
|
+
"mutable": false,
|
1563
|
+
"complexType": {
|
1564
|
+
"original": "IcPaginationBarOptions",
|
1565
|
+
"resolved": "IcPaginationBarOptions",
|
1566
|
+
"references": {
|
1567
|
+
"IcPaginationBarOptions": {
|
393
1568
|
"location": "import",
|
394
|
-
"path": "
|
395
|
-
"id": "src/
|
1569
|
+
"path": "../../utils/types",
|
1570
|
+
"id": "src/utils/types.ts::IcPaginationBarOptions"
|
396
1571
|
}
|
397
1572
|
}
|
398
1573
|
},
|
@@ -400,9 +1575,9 @@ export class DataTable {
|
|
400
1575
|
"optional": true,
|
401
1576
|
"docs": {
|
402
1577
|
"tags": [],
|
403
|
-
"text": "Sets the props for the pagination bar."
|
1578
|
+
"text": "Sets the props for the built-in pagination bar. If the `pagination-bar` slot is used then this prop is ignored."
|
404
1579
|
},
|
405
|
-
"defaultValue": "{\n
|
1580
|
+
"defaultValue": "{\n alignment: \"right\",\n appearance: \"default\",\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 pageLabel: \"Page\",\n rangeLabelType: \"page\",\n selectedItemsPerPage: 10,\n setToFirstPageOnPaginationChange: false,\n showGoToPageControl: true,\n showItemsPerPageControl: true,\n type: \"simple\",\n }"
|
406
1581
|
},
|
407
1582
|
"showPagination": {
|
408
1583
|
"type": "boolean",
|
@@ -497,6 +1672,124 @@ export class DataTable {
|
|
497
1672
|
"attribute": "sticky-row-headers",
|
498
1673
|
"reflect": false,
|
499
1674
|
"defaultValue": "false"
|
1675
|
+
},
|
1676
|
+
"tableLayout": {
|
1677
|
+
"type": "string",
|
1678
|
+
"mutable": false,
|
1679
|
+
"complexType": {
|
1680
|
+
"original": "\"fixed\" | \"auto\"",
|
1681
|
+
"resolved": "\"auto\" | \"fixed\"",
|
1682
|
+
"references": {}
|
1683
|
+
},
|
1684
|
+
"required": false,
|
1685
|
+
"optional": true,
|
1686
|
+
"docs": {
|
1687
|
+
"tags": [],
|
1688
|
+
"text": "Sets the layout of the table"
|
1689
|
+
},
|
1690
|
+
"attribute": "table-layout",
|
1691
|
+
"reflect": false,
|
1692
|
+
"defaultValue": "\"fixed\""
|
1693
|
+
},
|
1694
|
+
"truncationPattern": {
|
1695
|
+
"type": "string",
|
1696
|
+
"mutable": false,
|
1697
|
+
"complexType": {
|
1698
|
+
"original": "IcDataTableTruncationTypes",
|
1699
|
+
"resolved": "\"show-hide\" | \"tooltip\"",
|
1700
|
+
"references": {
|
1701
|
+
"IcDataTableTruncationTypes": {
|
1702
|
+
"location": "import",
|
1703
|
+
"path": "./ic-data-table.types",
|
1704
|
+
"id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableTruncationTypes"
|
1705
|
+
}
|
1706
|
+
}
|
1707
|
+
},
|
1708
|
+
"required": false,
|
1709
|
+
"optional": true,
|
1710
|
+
"docs": {
|
1711
|
+
"tags": [],
|
1712
|
+
"text": "Sets the method used to truncate long text in cells where textWrap is `false`. The `tooltip` truncation pattern allows the overflowing text to be seen in a tooltip. The `show-hide` truncation pattern allows the overflowing text to be shown and hidden using the ic-typography \"See more\"/\"See less\" buttons."
|
1713
|
+
},
|
1714
|
+
"attribute": "truncation-pattern",
|
1715
|
+
"reflect": false
|
1716
|
+
},
|
1717
|
+
"updating": {
|
1718
|
+
"type": "boolean",
|
1719
|
+
"mutable": false,
|
1720
|
+
"complexType": {
|
1721
|
+
"original": "boolean",
|
1722
|
+
"resolved": "boolean",
|
1723
|
+
"references": {}
|
1724
|
+
},
|
1725
|
+
"required": false,
|
1726
|
+
"optional": true,
|
1727
|
+
"docs": {
|
1728
|
+
"tags": [],
|
1729
|
+
"text": "If `true`, the table displays a linear loading indicator below the header row to indicate an updating state."
|
1730
|
+
},
|
1731
|
+
"attribute": "updating",
|
1732
|
+
"reflect": false,
|
1733
|
+
"defaultValue": "false"
|
1734
|
+
},
|
1735
|
+
"updatingOptions": {
|
1736
|
+
"type": "unknown",
|
1737
|
+
"mutable": false,
|
1738
|
+
"complexType": {
|
1739
|
+
"original": "{\n appearance?: IcThemeForegroundNoDefault;\n description?: string;\n max?: number;\n min?: number;\n progress?: number;\n }",
|
1740
|
+
"resolved": "{ appearance?: IcThemeForegroundNoDefault; description?: string; max?: number; min?: number; progress?: number; }",
|
1741
|
+
"references": {
|
1742
|
+
"IcThemeForegroundNoDefault": {
|
1743
|
+
"location": "import",
|
1744
|
+
"path": "@ukic/web-components/dist/types/utils/types",
|
1745
|
+
"id": "../web-components/dist/types/utils/types.d.ts::IcThemeForegroundNoDefault"
|
1746
|
+
}
|
1747
|
+
}
|
1748
|
+
},
|
1749
|
+
"required": false,
|
1750
|
+
"optional": true,
|
1751
|
+
"docs": {
|
1752
|
+
"tags": [],
|
1753
|
+
"text": "Sets the props for the linear loading indicator used in the updating state."
|
1754
|
+
}
|
1755
|
+
},
|
1756
|
+
"variableRowHeight": {
|
1757
|
+
"type": "unknown",
|
1758
|
+
"mutable": true,
|
1759
|
+
"complexType": {
|
1760
|
+
"original": "(params: {\n [key: string]: any;\n index: number;\n }) => IcDataTableRowHeights | null",
|
1761
|
+
"resolved": "(params: { [key: string]: any; index: number; }) => IcDataTableRowHeights",
|
1762
|
+
"references": {
|
1763
|
+
"IcDataTableRowHeights": {
|
1764
|
+
"location": "import",
|
1765
|
+
"path": "./ic-data-table.types",
|
1766
|
+
"id": "src/components/ic-data-table/ic-data-table.types.tsx::IcDataTableRowHeights"
|
1767
|
+
}
|
1768
|
+
}
|
1769
|
+
},
|
1770
|
+
"required": false,
|
1771
|
+
"optional": true,
|
1772
|
+
"docs": {
|
1773
|
+
"tags": [],
|
1774
|
+
"text": "Allows for custom setting of row heights on individual rows based on an individual value from the `data` prop and the row index.\nIf the function returns `null`, that row's height will be set to the `globalRowHeight` property."
|
1775
|
+
}
|
1776
|
+
},
|
1777
|
+
"width": {
|
1778
|
+
"type": "string",
|
1779
|
+
"mutable": false,
|
1780
|
+
"complexType": {
|
1781
|
+
"original": "string",
|
1782
|
+
"resolved": "string",
|
1783
|
+
"references": {}
|
1784
|
+
},
|
1785
|
+
"required": false,
|
1786
|
+
"optional": true,
|
1787
|
+
"docs": {
|
1788
|
+
"tags": [],
|
1789
|
+
"text": "Sets the table width. Can be set to `auto` or a specific value in `px`, `rem`, or `%`."
|
1790
|
+
},
|
1791
|
+
"attribute": "width",
|
1792
|
+
"reflect": false
|
500
1793
|
}
|
501
1794
|
};
|
502
1795
|
}
|
@@ -510,14 +1803,119 @@ export class DataTable {
|
|
510
1803
|
"selectedRow": {},
|
511
1804
|
"sortedColumn": {},
|
512
1805
|
"sortedColumnOrder": {},
|
513
|
-
"toRow": {}
|
1806
|
+
"toRow": {},
|
1807
|
+
"currentRowHeight": {},
|
1808
|
+
"debounceDelay": {}
|
1809
|
+
};
|
1810
|
+
}
|
1811
|
+
static get events() {
|
1812
|
+
return [{
|
1813
|
+
"method": "icRowHeightChange",
|
1814
|
+
"name": "icRowHeightChange",
|
1815
|
+
"bubbles": true,
|
1816
|
+
"cancelable": true,
|
1817
|
+
"composed": true,
|
1818
|
+
"docs": {
|
1819
|
+
"tags": [],
|
1820
|
+
"text": "Emitted when the `globalRowHeight` or `variableRowHeight` properties change in the data table."
|
1821
|
+
},
|
1822
|
+
"complexType": {
|
1823
|
+
"original": "void",
|
1824
|
+
"resolved": "void",
|
1825
|
+
"references": {}
|
1826
|
+
}
|
1827
|
+
}, {
|
1828
|
+
"method": "icSelectedRowChange",
|
1829
|
+
"name": "icSelectedRowChange",
|
1830
|
+
"bubbles": true,
|
1831
|
+
"cancelable": true,
|
1832
|
+
"composed": true,
|
1833
|
+
"docs": {
|
1834
|
+
"tags": [],
|
1835
|
+
"text": "Emitted when the selected row changes in the data table."
|
1836
|
+
},
|
1837
|
+
"complexType": {
|
1838
|
+
"original": "object",
|
1839
|
+
"resolved": "object",
|
1840
|
+
"references": {}
|
1841
|
+
}
|
1842
|
+
}, {
|
1843
|
+
"method": "icSortChange",
|
1844
|
+
"name": "icSortChange",
|
1845
|
+
"bubbles": true,
|
1846
|
+
"cancelable": true,
|
1847
|
+
"composed": true,
|
1848
|
+
"docs": {
|
1849
|
+
"tags": [],
|
1850
|
+
"text": "Emitted when a column sort button is clicked."
|
1851
|
+
},
|
1852
|
+
"complexType": {
|
1853
|
+
"original": "IcSortEventDetail",
|
1854
|
+
"resolved": "IcSortEventDetail",
|
1855
|
+
"references": {
|
1856
|
+
"IcSortEventDetail": {
|
1857
|
+
"location": "import",
|
1858
|
+
"path": "./ic-data-table.types",
|
1859
|
+
"id": "src/components/ic-data-table/ic-data-table.types.tsx::IcSortEventDetail"
|
1860
|
+
}
|
1861
|
+
}
|
1862
|
+
}
|
1863
|
+
}];
|
1864
|
+
}
|
1865
|
+
static get methods() {
|
1866
|
+
return {
|
1867
|
+
"resetRowHeights": {
|
1868
|
+
"complexType": {
|
1869
|
+
"signature": "(rowHeight?: number | \"auto\") => Promise<void>",
|
1870
|
+
"parameters": [{
|
1871
|
+
"name": "rowHeight",
|
1872
|
+
"type": "number | \"auto\"",
|
1873
|
+
"docs": ""
|
1874
|
+
}],
|
1875
|
+
"references": {
|
1876
|
+
"Promise": {
|
1877
|
+
"location": "global",
|
1878
|
+
"id": "global::Promise"
|
1879
|
+
}
|
1880
|
+
},
|
1881
|
+
"return": "Promise<void>"
|
1882
|
+
},
|
1883
|
+
"docs": {
|
1884
|
+
"text": "Resets the `globalRowHeight` prop to number or auto and sets the `variableRowHeight` prop to `null`.",
|
1885
|
+
"tags": []
|
1886
|
+
}
|
1887
|
+
}
|
514
1888
|
};
|
515
1889
|
}
|
516
1890
|
static get elementRef() { return "el"; }
|
1891
|
+
static get watchers() {
|
1892
|
+
return [{
|
1893
|
+
"propName": "columnHeaderTruncation",
|
1894
|
+
"methodName": "headerTruncationChangeHandler"
|
1895
|
+
}, {
|
1896
|
+
"propName": "loading",
|
1897
|
+
"methodName": "loadingHandler"
|
1898
|
+
}, {
|
1899
|
+
"propName": "truncationPattern",
|
1900
|
+
"methodName": "truncationPatternHandler"
|
1901
|
+
}, {
|
1902
|
+
"propName": "data",
|
1903
|
+
"methodName": "dataHandler"
|
1904
|
+
}, {
|
1905
|
+
"propName": "density",
|
1906
|
+
"methodName": "densityHandler"
|
1907
|
+
}, {
|
1908
|
+
"propName": "globalRowHeight",
|
1909
|
+
"methodName": "rowHeightChangeHandler"
|
1910
|
+
}, {
|
1911
|
+
"propName": "variableRowHeight",
|
1912
|
+
"methodName": "rowHeightChangeHandler"
|
1913
|
+
}];
|
1914
|
+
}
|
517
1915
|
static get listeners() {
|
518
1916
|
return [{
|
519
|
-
"name": "
|
520
|
-
"method": "
|
1917
|
+
"name": "typographyTruncationExpandToggle",
|
1918
|
+
"method": "handleTypographyTruncationExpandToggle",
|
521
1919
|
"target": undefined,
|
522
1920
|
"capture": false,
|
523
1921
|
"passive": false
|
@@ -527,6 +1925,18 @@ export class DataTable {
|
|
527
1925
|
"target": undefined,
|
528
1926
|
"capture": false,
|
529
1927
|
"passive": false
|
1928
|
+
}, {
|
1929
|
+
"name": "icItemsPerPageChange",
|
1930
|
+
"method": "handleItemsPerPageChange",
|
1931
|
+
"target": undefined,
|
1932
|
+
"capture": false,
|
1933
|
+
"passive": false
|
1934
|
+
}, {
|
1935
|
+
"name": "icTableDensityUpdate",
|
1936
|
+
"method": "handleDensityChange",
|
1937
|
+
"target": undefined,
|
1938
|
+
"capture": false,
|
1939
|
+
"passive": false
|
530
1940
|
}, {
|
531
1941
|
"name": "click",
|
532
1942
|
"method": "clickListener",
|