@ukic/canary-web-components 3.0.0-canary.1 → 3.0.0-canary.10
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 +3 -2
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/{helpers-6817cfbb.js → helpers-02b23286.js} +65 -155
- package/dist/cjs/helpers-02b23286.js.map +1 -0
- package/dist/cjs/{helpers-33b42cd6.js → helpers-ce248d54.js} +80 -29
- package/dist/cjs/helpers-ce248d54.js.map +1 -0
- package/dist/cjs/ic-accordion-group.cjs.entry.js +10 -10
- package/dist/cjs/ic-accordion-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-accordion.cjs.entry.js +12 -5
- package/dist/cjs/ic-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-alert.cjs.entry.js +9 -14
- package/dist/cjs/ic-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-back-to-top.cjs.entry.js +8 -5
- package/dist/cjs/ic-back-to-top.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-badge.cjs.entry.js +26 -3
- package/dist/cjs/ic-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +43 -20
- package/dist/cjs/ic-breadcrumb-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-breadcrumb.cjs.entry.js +47 -3
- package/dist/cjs/ic-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js +28 -26
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-card-horizontal.cjs.entry.js +33 -35
- package/dist/cjs/ic-card-horizontal.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-card-vertical.cjs.entry.js +48 -47
- package/dist/cjs/ic-card-vertical.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox-group.cjs.entry.js +21 -6
- package/dist/cjs/ic-checkbox-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js +10 -4
- package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-chip.cjs.entry.js +27 -15
- package/dist/cjs/ic-chip.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-classification-banner.cjs.entry.js +1 -1
- package/dist/cjs/ic-classification-banner.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-data-row.cjs.entry.js +1 -1
- package/dist/cjs/ic-data-table-title-bar.cjs.entry.js +7 -7
- package/dist/cjs/ic-data-table-title-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-data-table.cjs.entry.js +378 -108
- package/dist/cjs/ic-data-table.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-date-input.cjs.entry.js +23 -18
- package/dist/cjs/ic-date-input.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-date-picker.cjs.entry.js +16 -5
- package/dist/cjs/ic-date-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-dialog.cjs.entry.js +13 -5
- package/dist/cjs/ic-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-divider.cjs.entry.js +73 -9
- package/dist/cjs/ic-divider.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-empty-state_2.cjs.entry.js +101 -43
- package/dist/cjs/ic-empty-state_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer-link-group.cjs.entry.js +6 -7
- package/dist/cjs/ic-footer-link-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer-link.cjs.entry.js +7 -6
- package/dist/cjs/ic-footer-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-footer.cjs.entry.js +24 -14
- package/dist/cjs/ic-footer.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-hero.cjs.entry.js +7 -15
- package/dist/cjs/ic-hero.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +17 -9
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js +1016 -0
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-input-label_2.cjs.entry.js +82 -0
- package/dist/cjs/ic-input-label_2.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-link.cjs.entry.js +10 -12
- package/dist/cjs/ic-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-menu-group.cjs.entry.js +3 -3
- package/dist/cjs/ic-menu-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-menu-item.cjs.entry.js +25 -18
- package/dist/cjs/ic-menu-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-button.cjs.entry.js +11 -8
- package/dist/cjs/ic-navigation-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-group.cjs.entry.js +10 -8
- package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-item.cjs.entry.js +60 -8
- package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-menu.cjs.entry.js +5 -4
- package/dist/cjs/ic-navigation-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-page-header.cjs.entry.js +8 -6
- package/dist/cjs/ic-page-header.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-pagination_4.cjs.entry.js +267 -112
- package/dist/cjs/ic-pagination_4.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-popover-menu.cjs.entry.js +47 -25
- package/dist/cjs/ic-popover-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-group.cjs.entry.js +58 -28
- package/dist/cjs/ic-radio-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-radio-option.cjs.entry.js +42 -22
- package/dist/cjs/ic-radio-option.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-search-bar.cjs.entry.js +54 -56
- package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-side-navigation.cjs.entry.js +16 -11
- package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-skeleton.cjs.entry.js +4 -4
- package/dist/cjs/ic-skeleton.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-status-tag.cjs.entry.js +5 -4
- package/dist/cjs/ic-status-tag.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-step.cjs.entry.js +4 -5
- package/dist/cjs/ic-step.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-stepper.cjs.entry.js +12 -2
- package/dist/cjs/ic-stepper.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-switch.cjs.entry.js +21 -16
- package/dist/cjs/ic-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-context.cjs.entry.js +60 -123
- package/dist/cjs/ic-tab-context.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-group.cjs.entry.js +3 -19
- package/dist/cjs/ic-tab-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab-panel.cjs.entry.js +2 -2
- package/dist/cjs/ic-tab-panel.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tab.cjs.entry.js +10 -8
- package/dist/cjs/ic-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-theme.cjs.entry.js +20 -20
- package/dist/cjs/ic-theme.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toast.cjs.entry.js +4 -4
- package/dist/cjs/ic-toast.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js +62 -12
- package/dist/cjs/ic-toggle-button-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-toggle-button.cjs.entry.js +64 -9
- package/dist/cjs/ic-toggle-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-top-navigation.cjs.entry.js +13 -7
- package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tree-item.cjs.entry.js +22 -16
- package/dist/cjs/ic-tree-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-tree-view.cjs.entry.js +45 -23
- package/dist/cjs/ic-tree-view.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-typography.cjs.entry.js +5 -3
- package/dist/cjs/ic-typography.cjs.entry.js.map +1 -1
- package/dist/cjs/index-4cf27b16.js +4 -12
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +0 -2
- package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.css +26 -26
- package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.js +63 -38
- package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.js.map +1 -1
- package/dist/collection/components/ic-card-horizontal/test/basic/ic-card-horizontal.spec.js +10 -0
- package/dist/collection/components/ic-card-horizontal/test/basic/ic-card-horizontal.spec.js.map +1 -1
- package/dist/collection/components/ic-data-table/ic-data-table.css +177 -23
- package/dist/collection/components/ic-data-table/ic-data-table.js +480 -127
- package/dist/collection/components/ic-data-table/ic-data-table.js.map +1 -1
- 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 +425 -7
- 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 +123 -2
- 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 +9 -4
- package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js +5 -5
- package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js.map +1 -1
- package/dist/collection/components/ic-date-input/ic-date-input.css +74 -9
- package/dist/collection/components/ic-date-input/ic-date-input.js +67 -18
- package/dist/collection/components/ic-date-input/ic-date-input.js.map +1 -1
- package/dist/collection/components/ic-date-picker/ic-date-picker.css +18 -16
- package/dist/collection/components/ic-date-picker/ic-date-picker.js +59 -4
- package/dist/collection/components/ic-date-picker/ic-date-picker.js.map +1 -1
- package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.css +4 -7
- package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.js +213 -46
- package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.js.map +1 -1
- 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/basic/ic-pagination-bar.spec.js +20 -2
- package/dist/collection/components/ic-pagination-bar/test/basic/ic-pagination-bar.spec.js.map +1 -1
- package/dist/collection/components/ic-tree-item/ic-tree-item.css +51 -26
- package/dist/collection/components/ic-tree-item/ic-tree-item.js +84 -44
- package/dist/collection/components/ic-tree-item/ic-tree-item.js.map +1 -1
- package/dist/collection/components/ic-tree-item/test/basic/ic-tree-item.spec.js +3 -0
- package/dist/collection/components/ic-tree-item/test/basic/ic-tree-item.spec.js.map +1 -1
- package/dist/collection/components/ic-tree-view/ic-tree-view.css +31 -8
- package/dist/collection/components/ic-tree-view/ic-tree-view.js +117 -37
- package/dist/collection/components/ic-tree-view/ic-tree-view.js.map +1 -1
- package/dist/collection/utils/helpers.js +53 -34
- package/dist/collection/utils/helpers.js.map +1 -1
- package/dist/collection/utils/types.js +6 -6
- package/dist/collection/utils/types.js.map +1 -1
- package/dist/components/helpers.js +73 -26
- package/dist/components/helpers.js.map +1 -1
- package/dist/components/helpers2.js +60 -145
- package/dist/components/helpers2.js.map +1 -1
- package/dist/components/ic-accordion-group.js +11 -11
- package/dist/components/ic-accordion-group.js.map +1 -1
- package/dist/components/ic-accordion.js +14 -6
- package/dist/components/ic-accordion.js.map +1 -1
- package/dist/components/ic-alert.js +12 -16
- package/dist/components/ic-alert.js.map +1 -1
- package/dist/components/ic-back-to-top.js +9 -5
- package/dist/components/ic-back-to-top.js.map +1 -1
- package/dist/components/ic-badge.js +28 -5
- package/dist/components/ic-badge.js.map +1 -1
- package/dist/components/ic-breadcrumb-group.js +44 -20
- package/dist/components/ic-breadcrumb-group.js.map +1 -1
- package/dist/components/ic-breadcrumb2.js +49 -3
- package/dist/components/ic-breadcrumb2.js.map +1 -1
- package/dist/components/ic-button2.js +21 -20
- package/dist/components/ic-button2.js.map +1 -1
- package/dist/components/ic-card-horizontal.js +38 -37
- package/dist/components/ic-card-horizontal.js.map +1 -1
- package/dist/components/ic-card-vertical.js +54 -50
- package/dist/components/ic-card-vertical.js.map +1 -1
- package/dist/components/ic-checkbox-group.js +25 -7
- package/dist/components/ic-checkbox-group.js.map +1 -1
- package/dist/components/ic-checkbox.js +12 -4
- package/dist/components/ic-checkbox.js.map +1 -1
- package/dist/components/ic-chip.js +32 -16
- package/dist/components/ic-chip.js.map +1 -1
- package/dist/components/ic-classification-banner.js +1 -1
- package/dist/components/ic-classification-banner.js.map +1 -1
- package/dist/components/ic-data-row.js +1 -1
- package/dist/components/ic-data-table-title-bar.js +6 -6
- package/dist/components/ic-data-table-title-bar.js.map +1 -1
- package/dist/components/ic-data-table.js +383 -108
- package/dist/components/ic-data-table.js.map +1 -1
- package/dist/components/ic-date-input2.js +26 -18
- package/dist/components/ic-date-input2.js.map +1 -1
- package/dist/components/ic-date-picker.js +19 -5
- package/dist/components/ic-date-picker.js.map +1 -1
- package/dist/components/ic-dialog.js +13 -4
- package/dist/components/ic-dialog.js.map +1 -1
- package/dist/components/ic-divider2.js +89 -12
- package/dist/components/ic-divider2.js.map +1 -1
- package/dist/components/ic-empty-state2.js +10 -17
- package/dist/components/ic-empty-state2.js.map +1 -1
- package/dist/components/ic-footer-link-group.js +7 -8
- package/dist/components/ic-footer-link-group.js.map +1 -1
- package/dist/components/ic-footer-link.js +8 -7
- package/dist/components/ic-footer-link.js.map +1 -1
- package/dist/components/ic-footer.js +25 -15
- package/dist/components/ic-footer.js.map +1 -1
- package/dist/components/ic-hero.js +9 -17
- package/dist/components/ic-hero.js.map +1 -1
- package/dist/components/ic-horizontal-scroll2.js +19 -9
- package/dist/components/ic-horizontal-scroll2.js.map +1 -1
- package/dist/components/ic-input-component-container2.js +23 -32
- package/dist/components/ic-input-component-container2.js.map +1 -1
- package/dist/components/ic-input-label2.js +19 -20
- package/dist/components/ic-input-label2.js.map +1 -1
- package/dist/components/ic-input-validation2.js +9 -9
- package/dist/components/ic-input-validation2.js.map +1 -1
- package/dist/components/ic-link2.js +13 -15
- package/dist/components/ic-link2.js.map +1 -1
- package/dist/components/ic-loading-indicator2.js +11 -9
- 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 +30 -21
- package/dist/components/ic-menu-item2.js.map +1 -1
- package/dist/components/ic-menu2.js +472 -175
- package/dist/components/ic-menu2.js.map +1 -1
- package/dist/components/ic-navigation-button.js +13 -9
- package/dist/components/ic-navigation-button.js.map +1 -1
- package/dist/components/ic-navigation-group.js +12 -9
- package/dist/components/ic-navigation-group.js.map +1 -1
- package/dist/components/ic-navigation-item.js +64 -10
- package/dist/components/ic-navigation-item.js.map +1 -1
- package/dist/components/ic-navigation-menu2.js +6 -4
- package/dist/components/ic-navigation-menu2.js.map +1 -1
- package/dist/components/ic-page-header.js +9 -6
- package/dist/components/ic-page-header.js.map +1 -1
- package/dist/components/ic-pagination-bar2.js +106 -32
- package/dist/components/ic-pagination-bar2.js.map +1 -1
- package/dist/components/ic-pagination-item2.js +15 -12
- package/dist/components/ic-pagination-item2.js.map +1 -1
- package/dist/components/ic-pagination2.js +25 -15
- package/dist/components/ic-pagination2.js.map +1 -1
- package/dist/components/ic-popover-menu.js +50 -26
- package/dist/components/ic-popover-menu.js.map +1 -1
- package/dist/components/ic-radio-group.js +61 -29
- package/dist/components/ic-radio-group.js.map +1 -1
- package/dist/components/ic-radio-option.js +45 -23
- package/dist/components/ic-radio-option.js.map +1 -1
- package/dist/components/ic-search-bar.js +70 -81
- package/dist/components/ic-search-bar.js.map +1 -1
- package/dist/components/ic-select2.js +196 -67
- package/dist/components/ic-select2.js.map +1 -1
- package/dist/components/ic-side-navigation.js +17 -12
- package/dist/components/ic-side-navigation.js.map +1 -1
- package/dist/components/ic-skeleton.js +5 -5
- package/dist/components/ic-skeleton.js.map +1 -1
- package/dist/components/ic-status-tag.js +5 -3
- package/dist/components/ic-status-tag.js.map +1 -1
- package/dist/components/ic-step.js +4 -4
- package/dist/components/ic-step.js.map +1 -1
- package/dist/components/ic-stepper.js +14 -3
- package/dist/components/ic-stepper.js.map +1 -1
- package/dist/components/ic-switch.js +24 -18
- package/dist/components/ic-switch.js.map +1 -1
- package/dist/components/ic-tab-context.js +60 -123
- package/dist/components/ic-tab-context.js.map +1 -1
- package/dist/components/ic-tab-group.js +2 -18
- package/dist/components/ic-tab-group.js.map +1 -1
- package/dist/components/ic-tab-panel.js +1 -1
- package/dist/components/ic-tab-panel.js.map +1 -1
- package/dist/components/ic-tab.js +10 -8
- package/dist/components/ic-tab.js.map +1 -1
- package/dist/components/ic-text-field2.js +46 -24
- package/dist/components/ic-text-field2.js.map +1 -1
- package/dist/components/ic-theme.js +22 -22
- package/dist/components/ic-theme.js.map +1 -1
- package/dist/components/ic-toast.js +4 -4
- package/dist/components/ic-toast.js.map +1 -1
- package/dist/components/ic-toggle-button-group.js +75 -14
- package/dist/components/ic-toggle-button-group.js.map +1 -1
- package/dist/components/ic-toggle-button.js +76 -17
- package/dist/components/ic-toggle-button.js.map +1 -1
- package/dist/components/ic-tooltip2.js +1 -1
- package/dist/components/ic-tooltip2.js.map +1 -1
- package/dist/components/ic-top-navigation.js +15 -8
- package/dist/components/ic-top-navigation.js.map +1 -1
- package/dist/components/ic-tree-item.js +27 -18
- package/dist/components/ic-tree-item.js.map +1 -1
- package/dist/components/ic-tree-view.js +54 -27
- package/dist/components/ic-tree-view.js.map +1 -1
- package/dist/components/ic-typography2.js +4 -2
- package/dist/components/ic-typography2.js.map +1 -1
- package/dist/core/core.css +1601 -77
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/p-0054bdc2.entry.js +2 -0
- package/dist/core/p-0054bdc2.entry.js.map +1 -0
- package/dist/core/p-01a23e24.entry.js +2 -0
- package/dist/core/p-01a23e24.entry.js.map +1 -0
- package/dist/core/{p-5f5403e2.entry.js → p-01ab3a15.entry.js} +2 -2
- package/dist/core/{p-5f5403e2.entry.js.map → p-01ab3a15.entry.js.map} +1 -1
- package/dist/core/p-063911a8.entry.js +2 -0
- package/dist/core/p-063911a8.entry.js.map +1 -0
- package/dist/core/{p-bf670360.entry.js → p-0c5d45e1.entry.js} +2 -2
- package/dist/core/p-0c5d45e1.entry.js.map +1 -0
- package/dist/core/p-0c9155f4.entry.js +2 -0
- package/dist/core/p-0c9155f4.entry.js.map +1 -0
- package/dist/core/p-14098257.entry.js +2 -0
- package/dist/core/p-14098257.entry.js.map +1 -0
- package/dist/core/p-157b47bc.entry.js +2 -0
- package/dist/core/p-157b47bc.entry.js.map +1 -0
- package/dist/core/{p-266341f5.entry.js → p-15a5cce5.entry.js} +2 -2
- package/dist/core/{p-266341f5.entry.js.map → p-15a5cce5.entry.js.map} +1 -1
- package/dist/core/{p-306def43.entry.js → p-1658e577.entry.js} +2 -2
- package/dist/core/p-1658e577.entry.js.map +1 -0
- package/dist/core/p-2169e75b.entry.js +2 -0
- package/dist/core/p-2169e75b.entry.js.map +1 -0
- package/dist/core/p-26aff39e.entry.js +2 -0
- package/dist/core/p-26aff39e.entry.js.map +1 -0
- package/dist/core/p-27b1223d.entry.js +2 -0
- package/dist/core/p-27b1223d.entry.js.map +1 -0
- package/dist/core/p-32726b89.entry.js +2 -0
- package/dist/core/p-32726b89.entry.js.map +1 -0
- package/dist/core/p-33110185.entry.js +2 -0
- package/dist/core/p-33110185.entry.js.map +1 -0
- package/dist/core/p-3963201d.entry.js +2 -0
- package/dist/core/p-3963201d.entry.js.map +1 -0
- package/dist/core/p-41bfa3e5.entry.js +2 -0
- package/dist/core/p-41bfa3e5.entry.js.map +1 -0
- package/dist/core/p-4347f05c.entry.js +2 -0
- package/dist/core/p-4347f05c.entry.js.map +1 -0
- package/dist/core/{p-d8563643.entry.js → p-45177148.entry.js} +2 -2
- package/dist/core/p-45177148.entry.js.map +1 -0
- package/dist/core/p-47a1ce8d.entry.js +2 -0
- package/dist/core/p-47a1ce8d.entry.js.map +1 -0
- package/dist/core/p-4f96bec1.entry.js +2 -0
- package/dist/core/p-4f96bec1.entry.js.map +1 -0
- package/dist/core/p-51058719.entry.js +2 -0
- package/dist/core/p-51058719.entry.js.map +1 -0
- package/dist/core/p-5193184c.entry.js +2 -0
- package/dist/core/p-5193184c.entry.js.map +1 -0
- package/dist/core/p-51faa4ba.entry.js +2 -0
- package/dist/core/p-51faa4ba.entry.js.map +1 -0
- package/dist/core/p-54dc696e.entry.js +2 -0
- package/dist/core/p-54dc696e.entry.js.map +1 -0
- package/dist/core/p-6188f029.entry.js +2 -0
- package/dist/core/p-6188f029.entry.js.map +1 -0
- package/dist/core/p-6ac8e09b.entry.js +2 -0
- package/dist/core/p-6ac8e09b.entry.js.map +1 -0
- package/dist/core/p-71496305.entry.js +2 -0
- package/dist/core/p-71496305.entry.js.map +1 -0
- package/dist/core/p-77157922.entry.js +2 -0
- package/dist/core/p-77157922.entry.js.map +1 -0
- package/dist/core/p-78ed3070.entry.js +2 -0
- package/dist/core/p-78ed3070.entry.js.map +1 -0
- package/dist/core/p-794ff553.entry.js +2 -0
- package/dist/core/p-794ff553.entry.js.map +1 -0
- package/dist/core/p-82b408ad.entry.js +2 -0
- package/dist/core/p-82b408ad.entry.js.map +1 -0
- package/dist/core/p-88913402.entry.js +2 -0
- package/dist/core/p-88913402.entry.js.map +1 -0
- package/dist/core/p-897fac99.js +2 -0
- package/dist/core/p-897fac99.js.map +1 -0
- package/dist/core/p-8e56516a.entry.js +2 -0
- package/dist/core/p-8e56516a.entry.js.map +1 -0
- package/dist/core/p-8ebd64ae.entry.js +2 -0
- package/dist/core/p-8ebd64ae.entry.js.map +1 -0
- package/dist/core/{p-c21d0db8.entry.js → p-9462f294.entry.js} +2 -2
- package/dist/core/p-9462f294.entry.js.map +1 -0
- package/dist/core/p-94efa0d2.entry.js +2 -0
- package/dist/core/p-94efa0d2.entry.js.map +1 -0
- package/dist/core/p-9a392c41.entry.js +2 -0
- package/dist/core/p-9a392c41.entry.js.map +1 -0
- package/dist/core/p-a04712b9.js +2 -0
- package/dist/core/p-a04712b9.js.map +1 -0
- package/dist/core/p-a1cf5884.entry.js +2 -0
- package/dist/core/p-a1cf5884.entry.js.map +1 -0
- package/dist/core/{p-73b40c79.entry.js → p-a1d5fff2.entry.js} +2 -2
- package/dist/core/p-a1d5fff2.entry.js.map +1 -0
- package/dist/core/p-a69ef3eb.entry.js +2 -0
- package/dist/core/p-a69ef3eb.entry.js.map +1 -0
- package/dist/core/p-abda7e21.entry.js +2 -0
- package/dist/core/p-abda7e21.entry.js.map +1 -0
- package/dist/core/p-abdd8560.entry.js +2 -0
- package/dist/core/p-abdd8560.entry.js.map +1 -0
- package/dist/core/p-ace8126b.entry.js +2 -0
- package/dist/core/p-ace8126b.entry.js.map +1 -0
- package/dist/core/p-b2a6f0dd.entry.js +2 -0
- package/dist/core/p-b2a6f0dd.entry.js.map +1 -0
- package/dist/core/p-b5a5fe39.entry.js +2 -0
- package/dist/core/p-b5a5fe39.entry.js.map +1 -0
- package/dist/core/{p-d03374fc.entry.js → p-b717ae40.entry.js} +2 -2
- package/dist/core/p-b85466a7.entry.js +2 -0
- package/dist/core/p-b85466a7.entry.js.map +1 -0
- package/dist/core/p-bd4401d5.entry.js +2 -0
- package/dist/core/p-bd4401d5.entry.js.map +1 -0
- package/dist/core/p-bd87bf33.entry.js +2 -0
- package/dist/core/p-bd87bf33.entry.js.map +1 -0
- package/dist/core/{p-5f313e1a.entry.js → p-be1ec9aa.entry.js} +2 -2
- package/dist/core/p-be1ec9aa.entry.js.map +1 -0
- package/dist/core/p-c035d7b9.entry.js +2 -0
- package/dist/core/p-c035d7b9.entry.js.map +1 -0
- package/dist/core/p-ce923b92.entry.js +2 -0
- package/dist/core/p-ce923b92.entry.js.map +1 -0
- package/dist/core/p-d2b2b7df.entry.js +2 -0
- package/dist/core/p-d2b2b7df.entry.js.map +1 -0
- package/dist/core/p-e1df1b9a.entry.js +2 -0
- package/dist/core/p-e1df1b9a.entry.js.map +1 -0
- package/dist/core/p-e3e0cf46.entry.js +2 -0
- package/dist/core/p-e3e0cf46.entry.js.map +1 -0
- package/dist/core/p-f3d2af04.entry.js +2 -0
- package/dist/core/p-f3d2af04.entry.js.map +1 -0
- package/dist/core/{p-f1072c28.entry.js → p-f64abdff.entry.js} +2 -2
- package/dist/core/p-f64abdff.entry.js.map +1 -0
- package/dist/core/p-fc155ae2.entry.js +2 -0
- package/dist/core/p-fc155ae2.entry.js.map +1 -0
- package/dist/core/p-ffb11ad1.entry.js +2 -0
- package/dist/core/p-ffb11ad1.entry.js.map +1 -0
- package/dist/esm/core.js +1 -1
- package/dist/esm/{helpers-5bd2012a.js → helpers-0f42cb46.js} +61 -146
- package/dist/esm/helpers-0f42cb46.js.map +1 -0
- package/dist/esm/{helpers-dab8ddfe.js → helpers-56c75bf4.js} +74 -27
- package/dist/esm/helpers-56c75bf4.js.map +1 -0
- package/dist/esm/ic-accordion-group.entry.js +10 -10
- package/dist/esm/ic-accordion-group.entry.js.map +1 -1
- package/dist/esm/ic-accordion.entry.js +12 -5
- package/dist/esm/ic-accordion.entry.js.map +1 -1
- package/dist/esm/ic-alert.entry.js +10 -15
- package/dist/esm/ic-alert.entry.js.map +1 -1
- package/dist/esm/ic-back-to-top.entry.js +9 -6
- package/dist/esm/ic-back-to-top.entry.js.map +1 -1
- package/dist/esm/ic-badge.entry.js +26 -3
- package/dist/esm/ic-badge.entry.js.map +1 -1
- package/dist/esm/ic-breadcrumb-group.entry.js +43 -20
- package/dist/esm/ic-breadcrumb-group.entry.js.map +1 -1
- package/dist/esm/ic-breadcrumb.entry.js +47 -3
- package/dist/esm/ic-breadcrumb.entry.js.map +1 -1
- package/dist/esm/ic-button_3.entry.js +28 -26
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-card-horizontal.entry.js +34 -36
- package/dist/esm/ic-card-horizontal.entry.js.map +1 -1
- package/dist/esm/ic-card-vertical.entry.js +49 -48
- package/dist/esm/ic-card-vertical.entry.js.map +1 -1
- package/dist/esm/ic-checkbox-group.entry.js +21 -6
- package/dist/esm/ic-checkbox-group.entry.js.map +1 -1
- package/dist/esm/ic-checkbox.entry.js +10 -4
- package/dist/esm/ic-checkbox.entry.js.map +1 -1
- package/dist/esm/ic-chip.entry.js +28 -16
- package/dist/esm/ic-chip.entry.js.map +1 -1
- package/dist/esm/ic-classification-banner.entry.js +1 -1
- package/dist/esm/ic-classification-banner.entry.js.map +1 -1
- package/dist/esm/ic-data-row.entry.js +1 -1
- package/dist/esm/ic-data-table-title-bar.entry.js +7 -7
- package/dist/esm/ic-data-table-title-bar.entry.js.map +1 -1
- package/dist/esm/ic-data-table.entry.js +378 -108
- package/dist/esm/ic-data-table.entry.js.map +1 -1
- package/dist/esm/ic-date-input.entry.js +23 -18
- package/dist/esm/ic-date-input.entry.js.map +1 -1
- package/dist/esm/ic-date-picker.entry.js +16 -5
- package/dist/esm/ic-date-picker.entry.js.map +1 -1
- package/dist/esm/ic-dialog.entry.js +13 -5
- package/dist/esm/ic-dialog.entry.js.map +1 -1
- package/dist/esm/ic-divider.entry.js +74 -10
- package/dist/esm/ic-divider.entry.js.map +1 -1
- package/dist/esm/ic-empty-state_2.entry.js +102 -44
- package/dist/esm/ic-empty-state_2.entry.js.map +1 -1
- package/dist/esm/ic-footer-link-group.entry.js +6 -7
- package/dist/esm/ic-footer-link-group.entry.js.map +1 -1
- package/dist/esm/ic-footer-link.entry.js +7 -6
- package/dist/esm/ic-footer-link.entry.js.map +1 -1
- package/dist/esm/ic-footer.entry.js +24 -14
- package/dist/esm/ic-footer.entry.js.map +1 -1
- package/dist/esm/ic-hero.entry.js +8 -16
- package/dist/esm/ic-hero.entry.js.map +1 -1
- package/dist/esm/ic-horizontal-scroll.entry.js +17 -9
- package/dist/esm/ic-horizontal-scroll.entry.js.map +1 -1
- package/dist/{collection/components/ic-menu-with-multi/ic-menu.js → esm/ic-input-component-container_3.entry.js} +173 -739
- package/dist/esm/ic-input-component-container_3.entry.js.map +1 -0
- package/dist/esm/ic-input-label_2.entry.js +77 -0
- package/dist/esm/ic-input-label_2.entry.js.map +1 -0
- package/dist/esm/ic-link.entry.js +10 -12
- package/dist/esm/ic-link.entry.js.map +1 -1
- package/dist/esm/ic-menu-group.entry.js +3 -3
- package/dist/esm/ic-menu-group.entry.js.map +1 -1
- package/dist/esm/ic-menu-item.entry.js +25 -18
- package/dist/esm/ic-menu-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-button.entry.js +11 -8
- package/dist/esm/ic-navigation-button.entry.js.map +1 -1
- package/dist/esm/ic-navigation-group.entry.js +10 -8
- package/dist/esm/ic-navigation-group.entry.js.map +1 -1
- package/dist/esm/ic-navigation-item.entry.js +61 -9
- package/dist/esm/ic-navigation-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-menu.entry.js +5 -4
- package/dist/esm/ic-navigation-menu.entry.js.map +1 -1
- package/dist/esm/ic-page-header.entry.js +8 -6
- package/dist/esm/ic-page-header.entry.js.map +1 -1
- package/dist/esm/ic-pagination_4.entry.js +267 -112
- package/dist/esm/ic-pagination_4.entry.js.map +1 -1
- package/dist/esm/ic-popover-menu.entry.js +47 -25
- package/dist/esm/ic-popover-menu.entry.js.map +1 -1
- package/dist/esm/ic-radio-group.entry.js +58 -28
- package/dist/esm/ic-radio-group.entry.js.map +1 -1
- package/dist/esm/ic-radio-option.entry.js +42 -22
- package/dist/esm/ic-radio-option.entry.js.map +1 -1
- package/dist/esm/ic-search-bar.entry.js +54 -56
- package/dist/esm/ic-search-bar.entry.js.map +1 -1
- package/dist/esm/ic-side-navigation.entry.js +16 -11
- package/dist/esm/ic-side-navigation.entry.js.map +1 -1
- package/dist/esm/ic-skeleton.entry.js +4 -4
- package/dist/esm/ic-skeleton.entry.js.map +1 -1
- package/dist/esm/ic-status-tag.entry.js +5 -4
- package/dist/esm/ic-status-tag.entry.js.map +1 -1
- package/dist/esm/ic-step.entry.js +4 -5
- package/dist/esm/ic-step.entry.js.map +1 -1
- package/dist/esm/ic-stepper.entry.js +12 -2
- package/dist/esm/ic-stepper.entry.js.map +1 -1
- package/dist/esm/ic-switch.entry.js +21 -16
- package/dist/esm/ic-switch.entry.js.map +1 -1
- package/dist/esm/ic-tab-context.entry.js +60 -123
- package/dist/esm/ic-tab-context.entry.js.map +1 -1
- package/dist/esm/ic-tab-group.entry.js +3 -19
- package/dist/esm/ic-tab-group.entry.js.map +1 -1
- package/dist/esm/ic-tab-panel.entry.js +2 -2
- package/dist/esm/ic-tab-panel.entry.js.map +1 -1
- package/dist/esm/ic-tab.entry.js +10 -8
- package/dist/esm/ic-tab.entry.js.map +1 -1
- package/dist/esm/ic-theme.entry.js +20 -20
- package/dist/esm/ic-theme.entry.js.map +1 -1
- package/dist/esm/ic-toast.entry.js +4 -4
- package/dist/esm/ic-toast.entry.js.map +1 -1
- package/dist/esm/ic-toggle-button-group.entry.js +62 -12
- package/dist/esm/ic-toggle-button-group.entry.js.map +1 -1
- package/dist/esm/ic-toggle-button.entry.js +64 -9
- package/dist/esm/ic-toggle-button.entry.js.map +1 -1
- package/dist/esm/ic-top-navigation.entry.js +13 -7
- package/dist/esm/ic-top-navigation.entry.js.map +1 -1
- package/dist/esm/ic-tree-item.entry.js +23 -17
- package/dist/esm/ic-tree-item.entry.js.map +1 -1
- package/dist/esm/ic-tree-view.entry.js +46 -24
- package/dist/esm/ic-tree-view.entry.js.map +1 -1
- package/dist/esm/ic-typography.entry.js +5 -3
- package/dist/esm/ic-typography.entry.js.map +1 -1
- package/dist/esm/index-93509377.js +4 -12
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/ic-card-horizontal/ic-card-horizontal.d.ts +8 -4
- package/dist/types/components/ic-data-table/ic-data-table.d.ts +50 -5
- package/dist/types/components/ic-data-table/ic-data-table.types.d.ts +11 -0
- package/dist/types/components/ic-data-table/story-data.d.ts +223 -0
- package/dist/types/components/ic-date-input/ic-date-input.d.ts +10 -1
- package/dist/types/components/ic-date-picker/ic-date-picker.d.ts +10 -1
- package/dist/types/components/ic-pagination-bar/ic-pagination-bar.d.ts +33 -8
- package/dist/types/components/ic-pagination-bar/ic-pagination-bar.types.d.ts +4 -0
- package/dist/types/components/ic-tree-item/ic-tree-item.d.ts +16 -7
- package/dist/types/components/ic-tree-view/ic-tree-view.d.ts +19 -5
- package/dist/types/components.d.ts +189 -488
- package/dist/types/utils/helpers.d.ts +14 -11
- package/dist/types/utils/types.d.ts +17 -12
- package/hydrate/index.js +5118 -7475
- package/package.json +12 -10
- package/dist/cjs/helpers-33b42cd6.js.map +0 -1
- package/dist/cjs/helpers-6817cfbb.js.map +0 -1
- package/dist/cjs/ic-input-component-container_4.cjs.entry.js +0 -156
- package/dist/cjs/ic-input-component-container_4.cjs.entry.js.map +0 -1
- package/dist/cjs/ic-menu-with-multi.cjs.entry.js +0 -2738
- package/dist/cjs/ic-menu-with-multi.cjs.entry.js.map +0 -1
- package/dist/cjs/ic-menu.cjs.entry.js +0 -658
- package/dist/cjs/ic-menu.cjs.entry.js.map +0 -1
- package/dist/cjs/ic-select-with-multi.cjs.entry.js +0 -788
- package/dist/cjs/ic-select-with-multi.cjs.entry.js.map +0 -1
- package/dist/collection/components/ic-menu-with-multi/ic-menu.css +0 -712
- package/dist/collection/components/ic-menu-with-multi/ic-menu.js.map +0 -1
- package/dist/collection/components/ic-menu-with-multi/test/basic/ic-menu.spec.js +0 -1057
- package/dist/collection/components/ic-menu-with-multi/test/basic/ic-menu.spec.js.map +0 -1
- package/dist/collection/components/ic-select-with-multi/assets/Check.svg +0 -3
- package/dist/collection/components/ic-select-with-multi/assets/Clear.svg +0 -3
- package/dist/collection/components/ic-select-with-multi/assets/Expand.svg +0 -3
- package/dist/collection/components/ic-select-with-multi/ic-select.css +0 -695
- package/dist/collection/components/ic-select-with-multi/ic-select.js +0 -1520
- package/dist/collection/components/ic-select-with-multi/ic-select.js.map +0 -1
- package/dist/collection/components/ic-select-with-multi/story-data.js +0 -216
- package/dist/collection/components/ic-select-with-multi/story-data.js.map +0 -1
- package/dist/collection/components/ic-select-with-multi/test/basic/ic-select.spec.js +0 -1518
- package/dist/collection/components/ic-select-with-multi/test/basic/ic-select.spec.js.map +0 -1
- package/dist/components/ic-menu-with-multi.d.ts +0 -11
- package/dist/components/ic-menu-with-multi.js +0 -8
- package/dist/components/ic-menu-with-multi.js.map +0 -1
- package/dist/components/ic-menu3.js +0 -2803
- package/dist/components/ic-menu3.js.map +0 -1
- package/dist/components/ic-select-with-multi.d.ts +0 -11
- package/dist/components/ic-select-with-multi.js +0 -906
- package/dist/components/ic-select-with-multi.js.map +0 -1
- package/dist/core/p-06eeb7f2.entry.js +0 -2
- package/dist/core/p-06eeb7f2.entry.js.map +0 -1
- package/dist/core/p-0922c552.entry.js +0 -2
- package/dist/core/p-0922c552.entry.js.map +0 -1
- package/dist/core/p-0bc0e852.entry.js +0 -2
- package/dist/core/p-0bc0e852.entry.js.map +0 -1
- package/dist/core/p-108a9029.entry.js +0 -2
- package/dist/core/p-108a9029.entry.js.map +0 -1
- package/dist/core/p-13100d3c.entry.js +0 -2
- package/dist/core/p-13100d3c.entry.js.map +0 -1
- package/dist/core/p-1769df1d.entry.js +0 -2
- package/dist/core/p-1769df1d.entry.js.map +0 -1
- package/dist/core/p-202bc922.entry.js +0 -2
- package/dist/core/p-202bc922.entry.js.map +0 -1
- package/dist/core/p-297e99cf.js +0 -2
- package/dist/core/p-297e99cf.js.map +0 -1
- package/dist/core/p-306def43.entry.js.map +0 -1
- package/dist/core/p-30b046b2.entry.js +0 -2
- package/dist/core/p-30b046b2.entry.js.map +0 -1
- package/dist/core/p-3778cc5e.entry.js +0 -2
- package/dist/core/p-3778cc5e.entry.js.map +0 -1
- package/dist/core/p-383a5a76.entry.js +0 -2
- package/dist/core/p-383a5a76.entry.js.map +0 -1
- package/dist/core/p-3a0510e2.entry.js +0 -2
- package/dist/core/p-3a0510e2.entry.js.map +0 -1
- package/dist/core/p-3ace51f5.entry.js +0 -2
- package/dist/core/p-3ace51f5.entry.js.map +0 -1
- package/dist/core/p-3f0391c1.entry.js +0 -2
- package/dist/core/p-3f0391c1.entry.js.map +0 -1
- package/dist/core/p-41fecc61.entry.js +0 -2
- package/dist/core/p-41fecc61.entry.js.map +0 -1
- package/dist/core/p-46cb94a2.entry.js +0 -2
- package/dist/core/p-46cb94a2.entry.js.map +0 -1
- package/dist/core/p-4e67f127.entry.js +0 -2
- package/dist/core/p-4e67f127.entry.js.map +0 -1
- package/dist/core/p-505250cf.entry.js +0 -2
- package/dist/core/p-505250cf.entry.js.map +0 -1
- package/dist/core/p-50e48f4d.entry.js +0 -2
- package/dist/core/p-50e48f4d.entry.js.map +0 -1
- package/dist/core/p-56e7459a.entry.js +0 -2
- package/dist/core/p-56e7459a.entry.js.map +0 -1
- package/dist/core/p-59028160.entry.js +0 -2
- package/dist/core/p-59028160.entry.js.map +0 -1
- package/dist/core/p-5cfb5821.entry.js +0 -2
- package/dist/core/p-5cfb5821.entry.js.map +0 -1
- package/dist/core/p-5e6fd734.entry.js +0 -2
- package/dist/core/p-5e6fd734.entry.js.map +0 -1
- package/dist/core/p-5f313e1a.entry.js.map +0 -1
- package/dist/core/p-710c6a42.entry.js +0 -2
- package/dist/core/p-710c6a42.entry.js.map +0 -1
- package/dist/core/p-73b40c79.entry.js.map +0 -1
- package/dist/core/p-77a32de5.entry.js +0 -2
- package/dist/core/p-77a32de5.entry.js.map +0 -1
- package/dist/core/p-7a9de008.entry.js +0 -2
- package/dist/core/p-7a9de008.entry.js.map +0 -1
- package/dist/core/p-801414e2.entry.js +0 -2
- package/dist/core/p-801414e2.entry.js.map +0 -1
- package/dist/core/p-82ba744d.entry.js +0 -2
- package/dist/core/p-82ba744d.entry.js.map +0 -1
- package/dist/core/p-897b8d16.entry.js +0 -2
- package/dist/core/p-897b8d16.entry.js.map +0 -1
- package/dist/core/p-9397b15b.js +0 -2
- package/dist/core/p-9397b15b.js.map +0 -1
- package/dist/core/p-9af6adb1.entry.js +0 -2
- package/dist/core/p-9af6adb1.entry.js.map +0 -1
- package/dist/core/p-9b54feca.entry.js +0 -2
- package/dist/core/p-9b54feca.entry.js.map +0 -1
- package/dist/core/p-a57cd616.entry.js +0 -2
- package/dist/core/p-a57cd616.entry.js.map +0 -1
- package/dist/core/p-a5eaed1a.entry.js +0 -2
- package/dist/core/p-a5eaed1a.entry.js.map +0 -1
- package/dist/core/p-a78cf2cb.entry.js +0 -2
- package/dist/core/p-a78cf2cb.entry.js.map +0 -1
- package/dist/core/p-a91340b4.entry.js +0 -2
- package/dist/core/p-a91340b4.entry.js.map +0 -1
- package/dist/core/p-aee8d45b.entry.js +0 -2
- package/dist/core/p-aee8d45b.entry.js.map +0 -1
- package/dist/core/p-badd4c8d.entry.js +0 -2
- package/dist/core/p-badd4c8d.entry.js.map +0 -1
- package/dist/core/p-bf670360.entry.js.map +0 -1
- package/dist/core/p-c033e7d6.entry.js +0 -2
- package/dist/core/p-c033e7d6.entry.js.map +0 -1
- package/dist/core/p-c07af2d8.entry.js +0 -2
- package/dist/core/p-c07af2d8.entry.js.map +0 -1
- package/dist/core/p-c21d0db8.entry.js.map +0 -1
- package/dist/core/p-c678f73d.entry.js +0 -2
- package/dist/core/p-c678f73d.entry.js.map +0 -1
- package/dist/core/p-c6ae9bad.entry.js +0 -2
- package/dist/core/p-c6ae9bad.entry.js.map +0 -1
- package/dist/core/p-c6c1e08e.entry.js +0 -2
- package/dist/core/p-c6c1e08e.entry.js.map +0 -1
- package/dist/core/p-cb6cebdd.entry.js +0 -2
- package/dist/core/p-cb6cebdd.entry.js.map +0 -1
- package/dist/core/p-d16f364a.entry.js +0 -2
- package/dist/core/p-d16f364a.entry.js.map +0 -1
- package/dist/core/p-d239c33b.entry.js +0 -2
- package/dist/core/p-d239c33b.entry.js.map +0 -1
- package/dist/core/p-d8563643.entry.js.map +0 -1
- package/dist/core/p-da40757f.entry.js +0 -2
- package/dist/core/p-da40757f.entry.js.map +0 -1
- package/dist/core/p-de052137.entry.js +0 -2
- package/dist/core/p-de052137.entry.js.map +0 -1
- package/dist/core/p-e5d99316.entry.js +0 -2
- package/dist/core/p-e5d99316.entry.js.map +0 -1
- package/dist/core/p-e89bb650.entry.js +0 -2
- package/dist/core/p-e89bb650.entry.js.map +0 -1
- package/dist/core/p-f1072c28.entry.js.map +0 -1
- package/dist/core/p-f37df214.entry.js +0 -2
- package/dist/core/p-f37df214.entry.js.map +0 -1
- package/dist/core/p-f743b0eb.entry.js +0 -2
- package/dist/core/p-f743b0eb.entry.js.map +0 -1
- package/dist/core/p-f98b1afc.entry.js +0 -2
- package/dist/core/p-f98b1afc.entry.js.map +0 -1
- package/dist/core/p-fe13f1ba.entry.js +0 -2
- package/dist/core/p-fe13f1ba.entry.js.map +0 -1
- package/dist/esm/helpers-5bd2012a.js.map +0 -1
- package/dist/esm/helpers-dab8ddfe.js.map +0 -1
- package/dist/esm/ic-input-component-container_4.entry.js +0 -149
- package/dist/esm/ic-input-component-container_4.entry.js.map +0 -1
- package/dist/esm/ic-menu-with-multi.entry.js +0 -2734
- package/dist/esm/ic-menu-with-multi.entry.js.map +0 -1
- package/dist/esm/ic-menu.entry.js +0 -654
- package/dist/esm/ic-menu.entry.js.map +0 -1
- package/dist/esm/ic-select-with-multi.entry.js +0 -784
- package/dist/esm/ic-select-with-multi.entry.js.map +0 -1
- package/dist/types/components/ic-menu-with-multi/ic-menu.d.ts +0 -214
- package/dist/types/components/ic-select-with-multi/ic-select.d.ts +0 -259
- package/dist/types/components/ic-select-with-multi/story-data.d.ts +0 -32
- /package/dist/core/{p-d03374fc.entry.js.map → p-b717ae40.entry.js.map} +0 -0
@@ -4,7 +4,8 @@ import unsortedIcon from "./assets/unsorted-icon.svg";
|
|
4
4
|
import ascendingIcon from "./assets/ascending-icon.svg";
|
5
5
|
import descendingIcon from "./assets/descending-icon.svg";
|
6
6
|
// Unable to import helper functions via @ukic/web-components
|
7
|
-
import { isEmptyString, isSlotUsed, pxToRem, addDataToPosition, dynamicDebounce, } from "../../utils/helpers";
|
7
|
+
import { isEmptyString, isSlotUsed, pxToRem, addDataToPosition, dynamicDebounce, getSlotElements, checkResizeObserver, deviceSizeMatches, } from "../../utils/helpers";
|
8
|
+
import { IC_DEVICE_SIZES } from "../../utils/constants";
|
8
9
|
/**
|
9
10
|
* @slot empty-state - Content is slotted below the table header when there is no data and the table is not loading.
|
10
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.
|
@@ -44,10 +45,43 @@ export class DataTable {
|
|
44
45
|
this.itemsPerPageChange = false;
|
45
46
|
this.DATA_ROW_HEIGHT_STRING = "data-row-height";
|
46
47
|
this.ROW_HEIGHT_CSS_VARIABLE = "--row-height";
|
48
|
+
this.LINE_CLAMP_CSS_VARIABLE = "--ic-line-clamp";
|
47
49
|
this.DEFAULT_LINE_HEIGHT = 24;
|
48
50
|
this.densityUpdate = false;
|
49
51
|
this.truncationPatternUpdated = false;
|
50
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
|
+
};
|
51
85
|
this.updateSetRowHeight = (typographyEl) => {
|
52
86
|
const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
|
53
87
|
if (typographyEl) {
|
@@ -104,8 +138,9 @@ export class DataTable {
|
|
104
138
|
}
|
105
139
|
else {
|
106
140
|
if (this.truncationPattern === this.TOOLTIP_STRING && tooltip) {
|
107
|
-
typographyEl.setAttribute("style",
|
108
|
-
cellContainer.
|
141
|
+
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
|
142
|
+
const cellTextWrapper = cellContainer.querySelector(this.CELL_TEXT_WRAPPER_STRING);
|
143
|
+
cellTextWrapper.prepend(typographyEl);
|
109
144
|
tooltip.remove();
|
110
145
|
}
|
111
146
|
if (this.truncationPattern === this.SHOW_HIDE_STRING &&
|
@@ -160,6 +195,7 @@ export class DataTable {
|
|
160
195
|
}
|
161
196
|
this.truncate(typographyEl, cellContainer, tooltip);
|
162
197
|
};
|
198
|
+
this.getTruncWrapper = (typographyEl) => typographyEl.shadowRoot.querySelector(".trunc-wrapper");
|
163
199
|
this.removeTextWrap = () => {
|
164
200
|
this.getTypographyElements().forEach((typographyEl) => {
|
165
201
|
const tableCell = typographyEl.closest("td");
|
@@ -181,7 +217,7 @@ export class DataTable {
|
|
181
217
|
this.timerStarted = null;
|
182
218
|
}, this.minimumLoadingDisplayDuration);
|
183
219
|
};
|
184
|
-
this.isObject = (value) => typeof value === "object";
|
220
|
+
this.isObject = (value) => value !== undefined && value !== null && typeof value === "object";
|
185
221
|
this.notDefaultDensity = () => this.density !== "default";
|
186
222
|
this.getCellContent = (cell, dataType) => {
|
187
223
|
switch (dataType) {
|
@@ -204,19 +240,16 @@ export class DataTable {
|
|
204
240
|
return this.getObjectValue(cell, key);
|
205
241
|
};
|
206
242
|
this.createUpdatingIndicator = () => {
|
207
|
-
const {
|
208
|
-
return (h("th", { colSpan: this.columns.length, class: "updating-state" }, h("ic-loading-indicator", {
|
243
|
+
const { description, max, min, progress, monochrome } = this.updatingOptions || {};
|
244
|
+
return (h("th", { colSpan: this.columns.length, class: "updating-state" }, h("ic-loading-indicator", { theme: this.theme, monochrome: monochrome, description: description || "Updating table data", fullWidth: true, max: max, min: min, progress: progress, type: "linear", size: "small" })));
|
209
245
|
};
|
210
246
|
this.setRowHeight = (height) => {
|
211
247
|
return pxToRem(`${height * this.DENSITY_HEIGHT_MULTIPLIER[this.density] -
|
212
248
|
this.DENSITY_PADDING_HEIGHT_DIFF[this.density]}px`);
|
213
249
|
};
|
214
|
-
this.setTruncationClass = () =>
|
215
|
-
|
216
|
-
|
217
|
-
}
|
218
|
-
return {};
|
219
|
-
};
|
250
|
+
this.setTruncationClass = () => this.truncationPattern
|
251
|
+
? { [`truncation-${this.truncationPattern}`]: true }
|
252
|
+
: {};
|
220
253
|
this.getColumnWidth = (columnWidth) => {
|
221
254
|
// TODO: Setting max width on columns
|
222
255
|
let columnWidthStyling = {};
|
@@ -247,6 +280,56 @@ export class DataTable {
|
|
247
280
|
}
|
248
281
|
return {};
|
249
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), [`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
|
310
|
+
(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
|
311
|
+
rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
|
312
|
+
!!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
|
313
|
+
!!rowEmphasis }, 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
|
314
|
+
? this.setRowHeight(currentRowHeight)
|
315
|
+
: 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)) &&
|
316
|
+
(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" &&
|
317
|
+
!isSlotUsed(this.el, cellSlotName) && (h("div", { class: {
|
318
|
+
"cell-text-wrapper": true,
|
319
|
+
"cell-text-no-wrap": !this.truncationPattern,
|
320
|
+
} }, h("ic-typography", { variant: "body", class: {
|
321
|
+
[`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
|
322
|
+
(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
|
323
|
+
rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
|
324
|
+
!!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
|
325
|
+
!!rowEmphasis,
|
326
|
+
[`text-${this.density}`]: this.notDefaultDensity(),
|
327
|
+
} }, this.isObject(cell) && (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (h("ic-link", { href: cellValue("href"), theme: this.theme, 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) &&
|
328
|
+
Object.keys(cell).includes("description") && (h("div", { class: {
|
329
|
+
["cell-description"]: true,
|
330
|
+
[`data-type-${columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType}`]: true,
|
331
|
+
} }, ((_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"))))))))));
|
332
|
+
};
|
250
333
|
this.createCells = (row, rowIndex) => {
|
251
334
|
var _a;
|
252
335
|
const rowValues = Object.values(row);
|
@@ -264,7 +347,6 @@ export class DataTable {
|
|
264
347
|
? variableRowHeightVal !== "auto" && variableRowHeightVal
|
265
348
|
: this.globalRowHeight !== "auto" && this.globalRowHeight;
|
266
349
|
return rowValues.map((cell, index) => {
|
267
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
268
350
|
const columnProps = this.columns[index];
|
269
351
|
const cellSlotName = `${columnProps === null || columnProps === void 0 ? void 0 : columnProps.key}-${rowIndex}`;
|
270
352
|
const hasIcon = this.isObject(cell) && Object.keys(cell).includes("icon");
|
@@ -280,59 +362,48 @@ export class DataTable {
|
|
280
362
|
return (h("td", { class: {
|
281
363
|
["table-cell"]: true,
|
282
364
|
[`table-density-${this.density}`]: this.notDefaultDensity(),
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
!!((_d = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _d === void 0 ? void 0 : _d.vertical) ||
|
291
|
-
!!rowAlignment ||
|
292
|
-
!!this.getCellAlignment(cell, "vertical"), [`cell-alignment-${((_e = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _e === void 0 ? void 0 : _e.horizontal) ||
|
293
|
-
((_f = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _f === void 0 ? void 0 : _f.horizontal) ||
|
294
|
-
this.getCellAlignment(cell, "horizontal")}`]: !!((_g = columnProps === null || columnProps === void 0 ? void 0 : columnProps.columnAlignment) === null || _g === void 0 ? void 0 : _g.horizontal) ||
|
295
|
-
!!((_h = rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.rowAlignment) === null || _h === void 0 ? void 0 : _h.horizontal) ||
|
296
|
-
!!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) ||
|
297
|
-
(rowOptions === null || rowOptions === void 0 ? void 0 : rowOptions.textWrap) ||
|
298
|
-
!!this.getCellOptions(cell, "textWrap"), ["cell-icon"]: hasIcon || !!((_j = columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon) === null || _j === void 0 ? void 0 : _j.icon) }, this.setTruncationClass()), style: 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
|
299
|
-
? this.setRowHeight(currentRowHeight)
|
300
|
-
: 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)) && (h("span", { class: "icon", innerHTML: cellValue("icon") || (columnProps === null || columnProps === void 0 ? void 0 : columnProps.icon.icon) }))), (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "element" &&
|
301
|
-
!isSlotUsed(this.el, cellSlotName) && (h("ic-typography", { variant: "body", class: {
|
302
|
-
[`cell-emphasis-${(this.isObject(cell) && cellValue("emphasis")) ||
|
303
|
-
(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
|
304
|
-
rowEmphasis}`]: (this.isObject(cell) && !!cellValue("emphasis")) ||
|
305
|
-
!!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
|
306
|
-
!!rowEmphasis,
|
307
|
-
[`text-${this.density}`]: this.notDefaultDensity(),
|
308
|
-
} }, this.isObject(cell) &&
|
309
|
-
(columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (h("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType)))))))));
|
365
|
+
["with-overflow"]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element",
|
366
|
+
}, style: Object.assign({}, this.getColumnWidth(columnProps.columnWidth)) }, this.isObject(cell) &&
|
367
|
+
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"),
|
368
|
+
// eslint-disable-next-line react/jsx-no-bind
|
369
|
+
onClick: cell.actionOnClick
|
370
|
+
? (event) => this.handleClick(event, cell.actionOnClick)
|
371
|
+
: undefined }))) : (this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis))));
|
310
372
|
}
|
311
373
|
});
|
312
374
|
};
|
313
|
-
this.createColumnHeaders = () => {
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
375
|
+
this.createColumnHeaders = () => (this.columns || []).map(({ cellAlignment, colspan, icon, key, title, columnWidth }, index) => (h("th", { scope: "col", class: {
|
376
|
+
["column-header"]: true,
|
377
|
+
[`table-density-${this.density}`]: this.notDefaultDensity(),
|
378
|
+
["updating-state-headers"]: this.updating && !this.loading,
|
379
|
+
}, style: Object.assign({}, this.getColumnWidth(columnWidth)), colSpan: colspan }, h("div", { class: {
|
380
|
+
"column-header-inner-container": true,
|
381
|
+
"truncation-tooltip": this.columnHeaderTruncation,
|
382
|
+
[`column-header-alignment-${cellAlignment}`]: !!cellAlignment,
|
383
|
+
} }, isSlotUsed(this.el, `${key}-column-icon`) ? (h("slot", { name: `${key}-column-icon` })) : (icon &&
|
384
|
+
!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: {
|
385
|
+
["column-header-text"]: true,
|
386
|
+
[`text-${this.density}`]: this.notDefaultDensity(),
|
387
|
+
} }, title))) : (h("ic-typography", { variant: "body", class: {
|
388
|
+
["column-header-text"]: true,
|
389
|
+
[`text-${this.density}`]: this.notDefaultDensity(),
|
390
|
+
} }, title)), this.sortable && (h("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
|
391
|
+
// eslint-disable-next-line react/jsx-no-bind
|
392
|
+
onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
|
393
|
+
? this.sortedColumnOrder
|
394
|
+
: "unsorted"], class: {
|
395
|
+
["sort-button"]: true,
|
396
|
+
["sort-button-unsorted"]: this.sortedColumn !== key ||
|
397
|
+
this.sortedColumnOrder === "unsorted",
|
398
|
+
} }))), this.columnHeaderTruncation && (h("ic-typography", { variant: "body", "aria-hidden": "true", class: {
|
399
|
+
["column-header-text"]: true,
|
400
|
+
["dummy-column-header-text"]: this.columnHeaderTruncation,
|
401
|
+
[`text-${this.density}`]: this.notDefaultDensity(),
|
402
|
+
} }, title)))));
|
335
403
|
this.onRowClick = (row) => {
|
404
|
+
if (!this.loading && !this.updating) {
|
405
|
+
this.icSelectedRowChange.emit(this.selectedRow !== row ? row : null);
|
406
|
+
}
|
336
407
|
this.selectedRow =
|
337
408
|
this.selectedRow !== row && !this.loading && !this.updating && row;
|
338
409
|
};
|
@@ -349,26 +420,28 @@ export class DataTable {
|
|
349
420
|
const organisedData = data.map((row, rowIndex) => {
|
350
421
|
const slottedColumns = this.columns
|
351
422
|
.map(({ key }, index) => isSlotUsed(this.el, `${key}-${rowIndex}`) && { key, index })
|
352
|
-
.filter((col) => !!col
|
423
|
+
.filter((col) => !!col &&
|
424
|
+
// skip the column if its already in the row
|
425
|
+
!Object.prototype.hasOwnProperty.call(row, col.key));
|
353
426
|
return slottedColumns.length > 0
|
354
427
|
? addDataToPosition(row, slottedColumns, "")
|
355
428
|
: row;
|
356
429
|
});
|
357
430
|
return organisedData
|
358
|
-
.sort(!this.sortable
|
431
|
+
.sort(!this.sortable || this.disableAutoSort
|
432
|
+
? undefined
|
433
|
+
: this.getSortFunction())
|
359
434
|
.map((row, index) => {
|
360
435
|
return (h("tr", {
|
361
436
|
// eslint-disable-next-line react/jsx-no-bind
|
362
437
|
onClick: () => this.onRowClick(row), class: {
|
363
438
|
["table-row"]: true,
|
364
|
-
["table-row-selected"]: this.selectedRow === row,
|
439
|
+
["table-row-selected"]: this.highlightSelectedRow && this.selectedRow === row,
|
365
440
|
}
|
366
441
|
}, this.createCells(row, index)));
|
367
442
|
});
|
368
443
|
};
|
369
|
-
this.getObjectValue = (cell, key) =>
|
370
|
-
return Object.values(cell)[Object.keys(cell).indexOf(key)];
|
371
|
-
};
|
444
|
+
this.getObjectValue = (cell, key) => Object.values(cell)[Object.keys(cell).indexOf(key)];
|
372
445
|
this.getSortButtonLabel = (key) => {
|
373
446
|
let label = "";
|
374
447
|
const getNextSortOption = (option) => {
|
@@ -431,7 +504,8 @@ export class DataTable {
|
|
431
504
|
});
|
432
505
|
};
|
433
506
|
this.getTypographyElements = () => {
|
434
|
-
|
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)"));
|
435
509
|
};
|
436
510
|
this.getTooltip = (typographyEl) => {
|
437
511
|
return typographyEl.closest(this.TOOLTIP);
|
@@ -442,7 +516,7 @@ export class DataTable {
|
|
442
516
|
const cellContainer = this.getCellContainer(typographyEl);
|
443
517
|
if (typographyEl.closest(this.TEXT_WRAP_CLASS)) {
|
444
518
|
this.removeTooltip(cellContainer, typographyEl, tooltip);
|
445
|
-
typographyEl.setAttribute("style",
|
519
|
+
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
|
446
520
|
return;
|
447
521
|
}
|
448
522
|
this.regenerateTooltip(cellContainer, typographyEl, tooltip, removeTooltipOnly);
|
@@ -451,6 +525,56 @@ export class DataTable {
|
|
451
525
|
this.updateScrollOffset = () => {
|
452
526
|
this.scrollOffset = this.el.shadowRoot.querySelector(".table-row-container").scrollTop;
|
453
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
|
+
};
|
454
578
|
this.setTableDimensions = () => {
|
455
579
|
let tableHostDimensions = {};
|
456
580
|
if (this.width) {
|
@@ -467,6 +591,94 @@ export class DataTable {
|
|
467
591
|
}
|
468
592
|
return tableHostDimensions;
|
469
593
|
};
|
594
|
+
this.fixCellTooltip = (element) => {
|
595
|
+
var _a, _b, _c;
|
596
|
+
let tooltip;
|
597
|
+
if (element.tagName === "IC-TOOLTIP") {
|
598
|
+
tooltip = element;
|
599
|
+
}
|
600
|
+
else if ((_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.IC_TOOLTIP_STRING)) {
|
601
|
+
tooltip = (_b = element.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(this.IC_TOOLTIP_STRING);
|
602
|
+
}
|
603
|
+
else {
|
604
|
+
if (((_c = element.children) === null || _c === void 0 ? void 0 : _c.length) > 0) {
|
605
|
+
Array.from(element.children).forEach((el) => {
|
606
|
+
this.fixCellTooltip(el);
|
607
|
+
});
|
608
|
+
}
|
609
|
+
else {
|
610
|
+
return;
|
611
|
+
}
|
612
|
+
}
|
613
|
+
if (tooltip) {
|
614
|
+
tooltip.setExternalPopperProps({
|
615
|
+
strategy: "fixed",
|
616
|
+
});
|
617
|
+
}
|
618
|
+
};
|
619
|
+
this.fixCellTooltips = () => {
|
620
|
+
const elements = this.el.shadowRoot.querySelectorAll(".data-type-element");
|
621
|
+
elements.forEach((element) => {
|
622
|
+
const slotElements = getSlotElements(element);
|
623
|
+
slotElements === null || slotElements === void 0 ? void 0 : slotElements.forEach((slottedEl) => {
|
624
|
+
this.fixCellTooltip(slottedEl);
|
625
|
+
});
|
626
|
+
});
|
627
|
+
const actionElements = this.el.shadowRoot.querySelectorAll(".action-element");
|
628
|
+
actionElements === null || actionElements === void 0 ? void 0 : actionElements.forEach((actionElementSpan) => {
|
629
|
+
const actionElement = actionElementSpan.firstChild;
|
630
|
+
if (actionElement) {
|
631
|
+
this.fixCellTooltip(actionElement);
|
632
|
+
}
|
633
|
+
});
|
634
|
+
};
|
635
|
+
this.handleClick = (event, callback) => callback(event);
|
636
|
+
this.renderTableBody = (data, loading, overlay) => {
|
637
|
+
if (!(data === null || data === void 0 ? void 0 : data.length))
|
638
|
+
return;
|
639
|
+
if (overlay && loading) {
|
640
|
+
return h("tbody", null, this.createRows());
|
641
|
+
}
|
642
|
+
else if (loading && !overlay) {
|
643
|
+
return null;
|
644
|
+
}
|
645
|
+
else {
|
646
|
+
return h("tbody", null, this.createRows());
|
647
|
+
}
|
648
|
+
};
|
649
|
+
this.renderLoadingIndicator = (isLoading, loadingOptions) => {
|
650
|
+
if (!isLoading)
|
651
|
+
return null;
|
652
|
+
return (h(Fragment, null, h("div", { class: "loading-overlay", ref: (el) => (this.loadingOverlay = el) }), h("ic-loading-indicator", { theme: this.theme, monochrome: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.monochrome, class: {
|
653
|
+
"loading-empty": isLoading,
|
654
|
+
loading: true,
|
655
|
+
"show-background": loadingOptions.showBackground || loadingOptions.overlay,
|
656
|
+
}, 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) })));
|
657
|
+
};
|
658
|
+
this.renderAriaLiveLoading = () => {
|
659
|
+
var _a, _b;
|
660
|
+
if (this.loading) {
|
661
|
+
return ((_a = this.loadingOptions) === null || _a === void 0 ? void 0 : _a.label) || "Loading...";
|
662
|
+
}
|
663
|
+
else if (this.updating) {
|
664
|
+
return ((_b = this.updatingOptions) === null || _b === void 0 ? void 0 : _b.description) || "Updating table data";
|
665
|
+
}
|
666
|
+
else {
|
667
|
+
return "";
|
668
|
+
}
|
669
|
+
};
|
670
|
+
this.renderEmptyState = (data, loading, overlay) => {
|
671
|
+
const emptyStateEl = isSlotUsed(this.el, "empty-state") ? (h("slot", { name: "empty-state" })) : (h("ic-empty-state", { aligned: "center", heading: "No Data", class: "loading-empty" }));
|
672
|
+
if (loading && !(data === null || data === void 0 ? void 0 : data.length) && overlay) {
|
673
|
+
return emptyStateEl;
|
674
|
+
}
|
675
|
+
else if (!loading && !(data === null || data === void 0 ? void 0 : data.length)) {
|
676
|
+
return emptyStateEl;
|
677
|
+
}
|
678
|
+
else {
|
679
|
+
return null;
|
680
|
+
}
|
681
|
+
};
|
470
682
|
this.fromRow = 0;
|
471
683
|
this.previousRowsPerPage = undefined;
|
472
684
|
this.rowsPerPage = undefined;
|
@@ -479,12 +691,15 @@ export class DataTable {
|
|
479
691
|
this.currentRowHeight = undefined;
|
480
692
|
this.debounceDelay = 0;
|
481
693
|
this.caption = undefined;
|
694
|
+
this.columnHeaderTruncation = false;
|
482
695
|
this.columns = undefined;
|
483
696
|
this.data = undefined;
|
697
|
+
this.disableAutoSort = false;
|
484
698
|
this.density = "default";
|
485
699
|
this.embedded = false;
|
486
700
|
this.globalRowHeight = "auto";
|
487
701
|
this.height = undefined;
|
702
|
+
this.highlightSelectedRow = true;
|
488
703
|
this.hideColumnHeaders = false;
|
489
704
|
this.loading = false;
|
490
705
|
this.loadingOptions = undefined;
|
@@ -492,20 +707,23 @@ export class DataTable {
|
|
492
707
|
this.minWidth = undefined;
|
493
708
|
this.minimumLoadingDisplayDuration = 1000;
|
494
709
|
this.paginationBarOptions = {
|
710
|
+
alignment: "right",
|
711
|
+
hideAllFromItemsPerPage: false,
|
712
|
+
hideRangeLabel: false,
|
713
|
+
itemLabel: "Item",
|
495
714
|
itemsPerPageOptions: [
|
496
715
|
{ label: "10", value: "10" },
|
497
716
|
{ label: "25", value: "25" },
|
498
717
|
{ label: "50", value: "50" },
|
499
718
|
],
|
719
|
+
monochrome: false,
|
720
|
+
pageLabel: "Page",
|
500
721
|
rangeLabelType: "page",
|
501
|
-
|
502
|
-
|
722
|
+
selectedItemsPerPage: 10,
|
723
|
+
setToFirstPageOnPaginationChange: false,
|
503
724
|
showGoToPageControl: true,
|
504
|
-
|
505
|
-
|
506
|
-
itemLabel: "Item",
|
507
|
-
pageLabel: "Page",
|
508
|
-
hideRangeLabel: false,
|
725
|
+
showItemsPerPageControl: true,
|
726
|
+
type: "simple",
|
509
727
|
};
|
510
728
|
this.showPagination = false;
|
511
729
|
this.sortable = false;
|
@@ -516,30 +734,47 @@ export class DataTable {
|
|
516
734
|
this.stickyColumnHeaders = false;
|
517
735
|
this.stickyRowHeaders = false;
|
518
736
|
this.tableLayout = "fixed";
|
737
|
+
this.theme = "inherit";
|
519
738
|
this.truncationPattern = undefined;
|
520
739
|
this.updating = false;
|
521
740
|
this.updatingOptions = undefined;
|
522
741
|
this.variableRowHeight = undefined;
|
523
742
|
this.width = undefined;
|
524
743
|
}
|
744
|
+
headerTruncationChangeHandler() {
|
745
|
+
if (this.columnHeaderTruncation) {
|
746
|
+
this.prevTableContainerWidth = 0;
|
747
|
+
}
|
748
|
+
else {
|
749
|
+
const headers = this.el.shadowRoot.querySelectorAll("th.column-header");
|
750
|
+
headers.forEach((header) => {
|
751
|
+
const tooltip = header.querySelector(this.IC_TOOLTIP_STRING);
|
752
|
+
if (tooltip) {
|
753
|
+
tooltip.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
|
754
|
+
}
|
755
|
+
});
|
756
|
+
}
|
757
|
+
}
|
525
758
|
disconnectedCallback() {
|
526
|
-
var _a;
|
759
|
+
var _a, _b;
|
527
760
|
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
761
|
+
(_b = this.headerResizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
|
528
762
|
}
|
529
763
|
componentWillLoad() {
|
530
|
-
var _a;
|
764
|
+
var _a, _b;
|
531
765
|
this.rowsPerPage = Number(this.paginationBarOptions.itemsPerPageOptions[0].value);
|
532
766
|
this.previousRowsPerPage = this.rowsPerPage;
|
533
767
|
this.toRow = this.rowsPerPage;
|
534
768
|
this.sortedColumn = this.sortOptions.defaultColumn;
|
535
769
|
this.sortedColumnOrder = this.sortOptions.sortOrders[0];
|
536
|
-
this.loadingOptions = Object.assign(Object.assign({}, this.loadingOptions), { showBackground: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 });
|
770
|
+
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) });
|
537
771
|
this.initialLoad = true;
|
538
772
|
this.previousItemsPerPage = this.rowsPerPage;
|
539
773
|
}
|
540
774
|
componentDidLoad() {
|
541
775
|
const tableElement = this.el.shadowRoot.querySelector("table");
|
542
776
|
const tableContainer = this.el.shadowRoot.querySelector(".table-container");
|
777
|
+
checkResizeObserver(this.runHeaderResizeObserver);
|
543
778
|
if (this.dataUpdated) {
|
544
779
|
this.dataUpdated = false;
|
545
780
|
}
|
@@ -563,6 +798,7 @@ export class DataTable {
|
|
563
798
|
if (this.globalRowHeight !== "auto") {
|
564
799
|
this.updateSetRowHeight();
|
565
800
|
}
|
801
|
+
window.addEventListener("resize", this.updateCellHeightsWithDescriptions);
|
566
802
|
}
|
567
803
|
componentDidUpdate() {
|
568
804
|
// truncation updates invoked here once new/updated data has
|
@@ -572,6 +808,11 @@ export class DataTable {
|
|
572
808
|
this.truncateUpdatedData();
|
573
809
|
}
|
574
810
|
}
|
811
|
+
componentDidRender() {
|
812
|
+
this.fixCellTooltips();
|
813
|
+
this.updateCellHeightsWithDescriptions();
|
814
|
+
this.adjustWidthForActionElement();
|
815
|
+
}
|
575
816
|
truncateUpdatedData() {
|
576
817
|
if (this.dataUpdated) {
|
577
818
|
if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
@@ -628,7 +869,7 @@ export class DataTable {
|
|
628
869
|
cellContainer.style.height = null;
|
629
870
|
if (this.truncationPattern === this.TOOLTIP_STRING) {
|
630
871
|
this.removeTooltip(cellContainer, typographyEl, tooltipEl);
|
631
|
-
typographyEl.setAttribute("style",
|
872
|
+
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: 0`);
|
632
873
|
}
|
633
874
|
else if (this.truncationPattern === this.SHOW_HIDE_STRING) {
|
634
875
|
this.resetShowHideTruncation(typographyEl);
|
@@ -639,7 +880,8 @@ export class DataTable {
|
|
639
880
|
parseFloat(cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
|
640
881
|
// If the set row height is bigger than the cell container even
|
641
882
|
// with textWrap, set the row height
|
642
|
-
if (!
|
883
|
+
if (!cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
|
884
|
+
!((_a = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.style) === null || _a === void 0 ? void 0 : _a.height) &&
|
643
885
|
rowHeight > cellContainer.clientHeight &&
|
644
886
|
!cellContainer.classList.contains(this.TEXT_WRAP_STRING)) {
|
645
887
|
cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
|
@@ -672,7 +914,7 @@ export class DataTable {
|
|
672
914
|
const newRows = Array.from(allRows).slice(this.previousItemsPerPage);
|
673
915
|
newRows.forEach((row) => {
|
674
916
|
row
|
675
|
-
.querySelectorAll(
|
917
|
+
.querySelectorAll(this.IC_TYPOGRAPHY_STRING)
|
676
918
|
.forEach((typographyEl) => {
|
677
919
|
const cellContainer = this.getCellContainer(typographyEl);
|
678
920
|
const tooltipEl = this.getTooltip(typographyEl);
|
@@ -734,9 +976,17 @@ export class DataTable {
|
|
734
976
|
}
|
735
977
|
}
|
736
978
|
}
|
737
|
-
createShowHideTruncation(typographyEl, cellContainer) {
|
979
|
+
createShowHideTruncation(typographyEl, cellContainer, descriptionHeight) {
|
738
980
|
typographyEl.checkMaxLines(typographyEl.scrollHeight);
|
739
981
|
typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
|
982
|
+
if (cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
|
983
|
+
descriptionHeight) {
|
984
|
+
typographyEl.setAttribute("max-lines", `${Math.floor(((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) - descriptionHeight) /
|
985
|
+
this.DEFAULT_LINE_HEIGHT)}`);
|
986
|
+
}
|
987
|
+
else {
|
988
|
+
typographyEl.setAttribute("max-lines", `${Math.floor((cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) / this.DEFAULT_LINE_HEIGHT)}`);
|
989
|
+
}
|
740
990
|
typographyEl.setShowHideExpanded(false);
|
741
991
|
cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
|
742
992
|
}
|
@@ -750,9 +1000,6 @@ export class DataTable {
|
|
750
1000
|
cellContainer.classList.add(this.SHOW_HIDE_CSS_CLASS);
|
751
1001
|
this.createShowHideTruncation(typographyEl, cellContainer);
|
752
1002
|
}
|
753
|
-
getTruncWrapper(typographyEl) {
|
754
|
-
return typographyEl.shadowRoot.querySelector(".trunc-wrapper");
|
755
|
-
}
|
756
1003
|
// Set the height to initial if row height is set and the show / hide truncation
|
757
1004
|
// is clicked
|
758
1005
|
handleTypographyTruncationExpandToggle({ detail, }) {
|
@@ -843,7 +1090,8 @@ export class DataTable {
|
|
843
1090
|
this.truncationPatternUpdated = true;
|
844
1091
|
}
|
845
1092
|
async dataHandler(newData) {
|
846
|
-
|
1093
|
+
var _a;
|
1094
|
+
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) });
|
847
1095
|
if (this.loading) {
|
848
1096
|
!this.hasLoadedForOneSecond
|
849
1097
|
? setTimeout(() => (this.loading = false), this.minimumLoadingDisplayDuration -
|
@@ -870,7 +1118,7 @@ export class DataTable {
|
|
870
1118
|
typographyEl.setShowHideExpanded(false);
|
871
1119
|
cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, null);
|
872
1120
|
}
|
873
|
-
else {
|
1121
|
+
else if (!cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING)) {
|
874
1122
|
typographyEl.resetTruncation().then(() => {
|
875
1123
|
if (!typographyEl.closest(this.TEXT_WRAP_CLASS)) {
|
876
1124
|
cellContainer.style.setProperty(this.ROW_HEIGHT_CSS_VARIABLE, cellContainer.getAttribute(this.DATA_ROW_HEIGHT_STRING));
|
@@ -906,7 +1154,11 @@ export class DataTable {
|
|
906
1154
|
this.variableRowHeight = null;
|
907
1155
|
}
|
908
1156
|
showLoadingIndicator() {
|
909
|
-
|
1157
|
+
var _a, _b, _c;
|
1158
|
+
if ((_a = this.loadingOptions) === null || _a === void 0 ? void 0 : _a.overlay) {
|
1159
|
+
(_b = this.loadingOverlay) === null || _b === void 0 ? void 0 : _b.classList.add("show");
|
1160
|
+
}
|
1161
|
+
(_c = this.loadingIndicator) === null || _c === void 0 ? void 0 : _c.classList.add("show");
|
910
1162
|
}
|
911
1163
|
getRowOptions(rowKeys, rowValues) {
|
912
1164
|
const rowOptionsIndex = rowKeys.indexOf("rowOptions");
|
@@ -935,23 +1187,44 @@ export class DataTable {
|
|
935
1187
|
if ((typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.scrollHeight) > (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) &&
|
936
1188
|
this.truncationPattern === this.TOOLTIP_STRING) {
|
937
1189
|
if (!typographyEl.getAttribute("style") ||
|
938
|
-
typographyEl.style.cssText.includes(
|
1190
|
+
typographyEl.style.cssText.includes(`${this.LINE_CLAMP_CSS_VARIABLE}: 0;`)) {
|
939
1191
|
this.addLineClampCSS(typographyEl, cellContainer);
|
940
1192
|
}
|
941
|
-
this.
|
1193
|
+
if (!cellContainer.querySelector(this.IC_TOOLTIP_STRING))
|
1194
|
+
this.createTruncationTooltip(typographyEl, cellContainer);
|
942
1195
|
}
|
943
1196
|
}
|
944
1197
|
removeTooltip(cellContainer, typographyEl, tooltip) {
|
945
|
-
cellContainer.
|
1198
|
+
const cellTextWrapper = cellContainer.querySelector(this.CELL_TEXT_WRAPPER_STRING);
|
1199
|
+
cellTextWrapper.prepend(typographyEl);
|
946
1200
|
if (tooltip) {
|
947
1201
|
tooltip.remove();
|
948
1202
|
}
|
949
1203
|
}
|
950
1204
|
addLineClampCSS(typographyEl, cellContainer) {
|
951
|
-
|
1205
|
+
var _a, _b;
|
1206
|
+
const descriptionCellHeight = (_a = cellContainer.querySelector(this.CELL_DESCRIPTION_STRING)) === null || _a === void 0 ? void 0 : _a.clientHeight;
|
1207
|
+
if (cellContainer.classList.contains(this.CELL_CONTAINER_WITH_DESCRIPTION_STRING) &&
|
1208
|
+
(cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) > descriptionCellHeight) {
|
1209
|
+
let iconHeight;
|
1210
|
+
if (deviceSizeMatches(IC_DEVICE_SIZES.XS)) {
|
1211
|
+
const cellIcon = cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.querySelector(".icon");
|
1212
|
+
iconHeight = cellIcon ? cellIcon.clientHeight : 0;
|
1213
|
+
}
|
1214
|
+
else {
|
1215
|
+
iconHeight = 0;
|
1216
|
+
}
|
1217
|
+
const height = (cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight) -
|
1218
|
+
((_b = cellContainer.querySelector(this.CELL_DESCRIPTION_STRING)) === null || _b === void 0 ? void 0 : _b.clientHeight) -
|
1219
|
+
iconHeight;
|
1220
|
+
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: ${this.getLines(height || 0)}`);
|
1221
|
+
}
|
1222
|
+
else {
|
1223
|
+
typographyEl.setAttribute("style", `${this.LINE_CLAMP_CSS_VARIABLE}: ${this.getLines(cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)}`);
|
1224
|
+
}
|
952
1225
|
}
|
953
1226
|
createTruncationTooltip(typographyEl, cellContainer) {
|
954
|
-
const tooltipEl = document.createElement(
|
1227
|
+
const tooltipEl = document.createElement(this.IC_TOOLTIP_STRING);
|
955
1228
|
tooltipEl.setAttribute("target", typographyEl.id);
|
956
1229
|
tooltipEl.setAttribute("label", typographyEl.textContent);
|
957
1230
|
tooltipEl.classList.add("ic-tooltip-overflow");
|
@@ -959,28 +1232,24 @@ export class DataTable {
|
|
959
1232
|
// This might need reverting back to absolute if the tooltip doesn't dynamically position itself correctly
|
960
1233
|
strategy: "fixed",
|
961
1234
|
});
|
962
|
-
cellContainer.
|
963
|
-
|
1235
|
+
const cellTextWrapper = cellContainer.querySelector(this.CELL_TEXT_WRAPPER_STRING);
|
1236
|
+
cellTextWrapper.prepend(tooltipEl);
|
1237
|
+
tooltipEl.prepend(typographyEl);
|
964
1238
|
}
|
965
1239
|
render() {
|
966
|
-
|
967
|
-
|
1240
|
+
var _a;
|
1241
|
+
const { caption, createColumnHeaders, createUpdatingIndicator, data, hideColumnHeaders, loading, loadingOptions, paginationBarOptions, scrollable, scrollOffset, showPagination, sortable, sortedColumn, sortedColumnOrder, stickyColumnHeaders, updateScrollOffset, updating, theme, } = this;
|
1242
|
+
return (h(Host, { style: Object.assign({}, this.setTableDimensions()), class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { class: "table-container" }, isSlotUsed(this.el, "title-bar") && h("slot", { name: "title-bar" }), h("div", { class: {
|
968
1243
|
["table-row-container"]: true,
|
969
1244
|
scrollable,
|
970
|
-
}, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset },
|
1245
|
+
}, tabIndex: scrollable ? 0 : null, onScroll: updateScrollOffset }, h("table", { style: {
|
971
1246
|
["--table-layout"]: this.tableLayout,
|
972
1247
|
} }, h("caption", { class: "table-caption" }, caption), !hideColumnHeaders && (h("thead", { class: {
|
973
1248
|
["column-header-sticky"]: stickyColumnHeaders,
|
974
1249
|
["column-header-overlay"]: stickyColumnHeaders && scrollOffset !== 0,
|
975
1250
|
} }, h("tr", null, createColumnHeaders()))), updating &&
|
976
1251
|
!loading &&
|
977
|
-
(hideColumnHeaders ? (h("thead", null, createUpdatingIndicator())) : (createUpdatingIndicator())), (data
|
978
|
-
!loading &&
|
979
|
-
(isSlotUsed(this.el, "empty-state") ? (h("slot", { name: "empty-state" })) : (h("ic-empty-state", { aligned: "center", heading: "No Data", class: "loading-empty" })))), loading && (h("ic-loading-indicator", { appearance: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.appearance, class: {
|
980
|
-
"loading-empty": loading,
|
981
|
-
loading: true,
|
982
|
-
"show-background": loadingOptions.showBackground,
|
983
|
-
}, 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) })), (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", { totalItems: data.length, type: paginationBarOptions.type, rangeLabelType: paginationBarOptions.rangeLabelType, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, showGoToPageControl: paginationBarOptions.showGoToPageControl, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, alignment: paginationBarOptions.alignment, appearance: paginationBarOptions.appearance, itemLabel: paginationBarOptions.itemLabel, pageLabel: paginationBarOptions.pageLabel, hideRangeLabel: paginationBarOptions.hideRangeLabel })))), sortable && (h("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
|
1252
|
+
(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, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage, hideRangeLabel: paginationBarOptions.hideRangeLabel, itemLabel: paginationBarOptions.itemLabel, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, monochrome: paginationBarOptions.monochrome, pageLabel: paginationBarOptions.pageLabel, rangeLabelType: paginationBarOptions.rangeLabelType, selectedItemsPerPage: paginationBarOptions.selectedItemsPerPage, setToFirstPageOnPaginationChange: paginationBarOptions.setToFirstPageOnPaginationChange, showGoToPageControl: paginationBarOptions.showGoToPageControl, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, theme: theme, totalItems: (_a = data === null || data === void 0 ? void 0 : data.length) !== null && _a !== void 0 ? _a : 0, type: paginationBarOptions.type })))), sortable && (h("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
|
984
1253
|
? `${sortedColumn} sorted ${sortedColumnOrder}`
|
985
1254
|
: "table unsorted")))));
|
986
1255
|
}
|
@@ -1015,6 +1284,24 @@ export class DataTable {
|
|
1015
1284
|
"attribute": "caption",
|
1016
1285
|
"reflect": false
|
1017
1286
|
},
|
1287
|
+
"columnHeaderTruncation": {
|
1288
|
+
"type": "boolean",
|
1289
|
+
"mutable": false,
|
1290
|
+
"complexType": {
|
1291
|
+
"original": "boolean",
|
1292
|
+
"resolved": "boolean",
|
1293
|
+
"references": {}
|
1294
|
+
},
|
1295
|
+
"required": false,
|
1296
|
+
"optional": false,
|
1297
|
+
"docs": {
|
1298
|
+
"tags": [],
|
1299
|
+
"text": "Determines whether the column header should be truncated and display a tooltip. Default is `false`."
|
1300
|
+
},
|
1301
|
+
"attribute": "column-header-truncation",
|
1302
|
+
"reflect": false,
|
1303
|
+
"defaultValue": "false"
|
1304
|
+
},
|
1018
1305
|
"columns": {
|
1019
1306
|
"type": "unknown",
|
1020
1307
|
"mutable": false,
|
@@ -1051,12 +1338,30 @@ export class DataTable {
|
|
1051
1338
|
}
|
1052
1339
|
},
|
1053
1340
|
"required": false,
|
1054
|
-
"optional":
|
1341
|
+
"optional": true,
|
1055
1342
|
"docs": {
|
1056
1343
|
"tags": [],
|
1057
1344
|
"text": "The row content for the table."
|
1058
1345
|
}
|
1059
1346
|
},
|
1347
|
+
"disableAutoSort": {
|
1348
|
+
"type": "boolean",
|
1349
|
+
"mutable": false,
|
1350
|
+
"complexType": {
|
1351
|
+
"original": "boolean",
|
1352
|
+
"resolved": "boolean",
|
1353
|
+
"references": {}
|
1354
|
+
},
|
1355
|
+
"required": false,
|
1356
|
+
"optional": true,
|
1357
|
+
"docs": {
|
1358
|
+
"tags": [],
|
1359
|
+
"text": "If `true`, the built in sort functionality will be disabled. For example, if rows will already be sorted from an external source."
|
1360
|
+
},
|
1361
|
+
"attribute": "disable-auto-sort",
|
1362
|
+
"reflect": false,
|
1363
|
+
"defaultValue": "false"
|
1364
|
+
},
|
1060
1365
|
"density": {
|
1061
1366
|
"type": "string",
|
1062
1367
|
"mutable": true,
|
@@ -1140,6 +1445,24 @@ export class DataTable {
|
|
1140
1445
|
"attribute": "height",
|
1141
1446
|
"reflect": false
|
1142
1447
|
},
|
1448
|
+
"highlightSelectedRow": {
|
1449
|
+
"type": "boolean",
|
1450
|
+
"mutable": false,
|
1451
|
+
"complexType": {
|
1452
|
+
"original": "boolean",
|
1453
|
+
"resolved": "boolean",
|
1454
|
+
"references": {}
|
1455
|
+
},
|
1456
|
+
"required": false,
|
1457
|
+
"optional": true,
|
1458
|
+
"docs": {
|
1459
|
+
"tags": [],
|
1460
|
+
"text": "If `true`, the selected row is highlighted using a background colour."
|
1461
|
+
},
|
1462
|
+
"attribute": "highlight-selected-row",
|
1463
|
+
"reflect": false,
|
1464
|
+
"defaultValue": "true"
|
1465
|
+
},
|
1143
1466
|
"hideColumnHeaders": {
|
1144
1467
|
"type": "boolean",
|
1145
1468
|
"mutable": false,
|
@@ -1180,15 +1503,9 @@ export class DataTable {
|
|
1180
1503
|
"type": "unknown",
|
1181
1504
|
"mutable": false,
|
1182
1505
|
"complexType": {
|
1183
|
-
"original": "{\n
|
1184
|
-
"resolved": "{
|
1185
|
-
"references": {
|
1186
|
-
"IcThemeForegroundNoDefault": {
|
1187
|
-
"location": "import",
|
1188
|
-
"path": "@ukic/web-components/dist/types/utils/types",
|
1189
|
-
"id": "../web-components/dist/types/utils/types.d.ts::IcThemeForegroundNoDefault"
|
1190
|
-
}
|
1191
|
-
}
|
1506
|
+
"original": "{\n description?: string;\n label?: string;\n labelDuration?: number;\n max?: number;\n min?: number;\n progress?: number;\n showBackground?: boolean;\n monochrome?: boolean;\n overlay?: boolean;\n }",
|
1507
|
+
"resolved": "{ description?: string; label?: string; labelDuration?: number; max?: number; min?: number; progress?: number; showBackground?: boolean; monochrome?: boolean; overlay?: boolean; }",
|
1508
|
+
"references": {}
|
1192
1509
|
},
|
1193
1510
|
"required": false,
|
1194
1511
|
"optional": true,
|
@@ -1269,7 +1586,7 @@ export class DataTable {
|
|
1269
1586
|
"tags": [],
|
1270
1587
|
"text": "Sets the props for the built-in pagination bar. If the `pagination-bar` slot is used then this prop is ignored."
|
1271
1588
|
},
|
1272
|
-
"defaultValue": "{\n itemsPerPageOptions: [\n { label: \"10\", value: \"10\" },\n { label: \"25\", value: \"25\" },\n { label: \"50\", value: \"50\" },\n ],\n
|
1589
|
+
"defaultValue": "{\n alignment: \"right\",\n hideAllFromItemsPerPage: false,\n hideRangeLabel: false,\n itemLabel: \"Item\",\n itemsPerPageOptions: [\n { label: \"10\", value: \"10\" },\n { label: \"25\", value: \"25\" },\n { label: \"50\", value: \"50\" },\n ],\n monochrome: false,\n pageLabel: \"Page\",\n rangeLabelType: \"page\",\n selectedItemsPerPage: 10,\n setToFirstPageOnPaginationChange: false,\n showGoToPageControl: true,\n showItemsPerPageControl: true,\n type: \"simple\",\n }"
|
1273
1590
|
},
|
1274
1591
|
"showPagination": {
|
1275
1592
|
"type": "boolean",
|
@@ -1383,6 +1700,30 @@ export class DataTable {
|
|
1383
1700
|
"reflect": false,
|
1384
1701
|
"defaultValue": "\"fixed\""
|
1385
1702
|
},
|
1703
|
+
"theme": {
|
1704
|
+
"type": "string",
|
1705
|
+
"mutable": false,
|
1706
|
+
"complexType": {
|
1707
|
+
"original": "IcThemeMode",
|
1708
|
+
"resolved": "\"dark\" | \"inherit\" | \"light\"",
|
1709
|
+
"references": {
|
1710
|
+
"IcThemeMode": {
|
1711
|
+
"location": "import",
|
1712
|
+
"path": "../../utils/types",
|
1713
|
+
"id": "src/utils/types.ts::IcThemeMode"
|
1714
|
+
}
|
1715
|
+
}
|
1716
|
+
},
|
1717
|
+
"required": false,
|
1718
|
+
"optional": true,
|
1719
|
+
"docs": {
|
1720
|
+
"tags": [],
|
1721
|
+
"text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
|
1722
|
+
},
|
1723
|
+
"attribute": "theme",
|
1724
|
+
"reflect": false,
|
1725
|
+
"defaultValue": "\"inherit\""
|
1726
|
+
},
|
1386
1727
|
"truncationPattern": {
|
1387
1728
|
"type": "string",
|
1388
1729
|
"mutable": false,
|
@@ -1428,15 +1769,9 @@ export class DataTable {
|
|
1428
1769
|
"type": "unknown",
|
1429
1770
|
"mutable": false,
|
1430
1771
|
"complexType": {
|
1431
|
-
"original": "{\n
|
1432
|
-
"resolved": "{
|
1433
|
-
"references": {
|
1434
|
-
"IcThemeForegroundNoDefault": {
|
1435
|
-
"location": "import",
|
1436
|
-
"path": "@ukic/web-components/dist/types/utils/types",
|
1437
|
-
"id": "../web-components/dist/types/utils/types.d.ts::IcThemeForegroundNoDefault"
|
1438
|
-
}
|
1439
|
-
}
|
1772
|
+
"original": "{\n description?: string;\n max?: number;\n min?: number;\n progress?: number;\n monochrome?: boolean;\n }",
|
1773
|
+
"resolved": "{ description?: string; max?: number; min?: number; progress?: number; monochrome?: boolean; }",
|
1774
|
+
"references": {}
|
1440
1775
|
},
|
1441
1776
|
"required": false,
|
1442
1777
|
"optional": true,
|
@@ -1516,6 +1851,21 @@ export class DataTable {
|
|
1516
1851
|
"resolved": "void",
|
1517
1852
|
"references": {}
|
1518
1853
|
}
|
1854
|
+
}, {
|
1855
|
+
"method": "icSelectedRowChange",
|
1856
|
+
"name": "icSelectedRowChange",
|
1857
|
+
"bubbles": true,
|
1858
|
+
"cancelable": true,
|
1859
|
+
"composed": true,
|
1860
|
+
"docs": {
|
1861
|
+
"tags": [],
|
1862
|
+
"text": "Emitted when the selected row changes in the data table."
|
1863
|
+
},
|
1864
|
+
"complexType": {
|
1865
|
+
"original": "object",
|
1866
|
+
"resolved": "object",
|
1867
|
+
"references": {}
|
1868
|
+
}
|
1519
1869
|
}, {
|
1520
1870
|
"method": "icSortChange",
|
1521
1871
|
"name": "icSortChange",
|
@@ -1567,6 +1917,9 @@ export class DataTable {
|
|
1567
1917
|
static get elementRef() { return "el"; }
|
1568
1918
|
static get watchers() {
|
1569
1919
|
return [{
|
1920
|
+
"propName": "columnHeaderTruncation",
|
1921
|
+
"methodName": "headerTruncationChangeHandler"
|
1922
|
+
}, {
|
1570
1923
|
"propName": "loading",
|
1571
1924
|
"methodName": "loadingHandler"
|
1572
1925
|
}, {
|