@infineon/infineon-design-system-stencil 35.5.0--canary.1904.0d4b003852c0b770dd57c6a1f84fbed5c045769e.0 → 36.0.0--canary.1926.3b76d5defe8b9a743d9ec0dd5e6879c04e8055c0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ifx-accordion_2.cjs.entry.js +26 -33
- package/dist/cjs/ifx-accordion_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-alert_2.cjs.entry.js +1 -7
- package/dist/cjs/ifx-alert_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-badge.cjs.entry.js +1 -9
- package/dist/cjs/ifx-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-basic-table.cjs.entry.js +4 -9
- package/dist/cjs/ifx-basic-table.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-breadcrumb.cjs.entry.js +1 -8
- package/dist/cjs/ifx-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-button.cjs.entry.js +1 -6
- package/dist/cjs/ifx-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-card.cjs.entry.js +3 -8
- package/dist/cjs/ifx-card.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-checkbox-group.cjs.entry.js +1 -6
- package/dist/cjs/ifx-checkbox-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-checkbox.cjs.entry.js +3 -8
- package/dist/cjs/ifx-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-chip_3.cjs.entry.js +9 -17
- package/dist/cjs/ifx-chip_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-content-switcher.cjs.entry.js +1 -6
- package/dist/cjs/ifx-content-switcher.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-date-picker.cjs.entry.js +2 -9
- package/dist/cjs/ifx-date-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-dropdown.cjs.entry.js +1 -6
- package/dist/cjs/ifx-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-faq.cjs.entry.js +1 -1
- package/dist/cjs/ifx-file-upload.cjs.entry.js +2 -9
- package/dist/cjs/ifx-file-upload.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-filter-accordion.cjs.entry.js +2 -2
- package/dist/cjs/ifx-filter-bar.cjs.entry.js +1 -1
- package/dist/cjs/ifx-filter-search.cjs.entry.js +1 -1
- package/dist/cjs/ifx-filter-type-group.cjs.entry.js +1 -1
- package/dist/cjs/ifx-footer.cjs.entry.js +4 -9
- package/dist/cjs/ifx-footer.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-icon-button.cjs.entry.js +1 -6
- package/dist/cjs/ifx-icon-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-icon.cjs.entry.js +3 -36
- package/dist/cjs/ifx-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-indicator.cjs.entry.js +2 -7
- package/dist/cjs/ifx-indicator.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-link.cjs.entry.js +1 -9
- package/dist/cjs/ifx-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-list-entry.cjs.entry.js +1 -1
- package/dist/cjs/ifx-modal.cjs.entry.js +2 -9
- package/dist/cjs/ifx-modal.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-multiselect_2.cjs.entry.js +932 -0
- package/dist/cjs/ifx-multiselect_2.cjs.entry.js.map +1 -0
- package/dist/cjs/ifx-navbar.cjs.entry.js +3 -5
- package/dist/cjs/ifx-navbar.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-notification.cjs.entry.js +2 -10
- package/dist/cjs/ifx-notification.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-progress-bar.cjs.entry.js +1 -7
- package/dist/cjs/ifx-progress-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-radio-button-group.cjs.entry.js +1 -6
- package/dist/cjs/ifx-radio-button-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-radio-button.cjs.entry.js +2 -7
- package/dist/cjs/ifx-radio-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-search-bar.cjs.entry.js +1 -6
- package/dist/cjs/ifx-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-search-field.cjs.entry.js +1 -9
- package/dist/cjs/ifx-search-field.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-segmented-control.cjs.entry.js +2 -9
- package/dist/cjs/ifx-segmented-control.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-select.cjs.entry.js +2 -7
- package/dist/cjs/ifx-select.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-set-filter.cjs.entry.js +19 -2
- package/dist/cjs/ifx-set-filter.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-sidebar.cjs.entry.js +5 -7
- package/dist/cjs/ifx-sidebar.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-slider.cjs.entry.js +3 -8
- package/dist/cjs/ifx-slider.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-spinner_2.cjs.entry.js +6 -17
- package/dist/cjs/ifx-spinner_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-status.cjs.entry.js +1 -9
- package/dist/cjs/ifx-status.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-step.cjs.entry.js +4 -4
- package/dist/cjs/ifx-step.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-stepper.cjs.entry.js +2 -7
- package/dist/cjs/ifx-stepper.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-switch.cjs.entry.js +1 -6
- package/dist/cjs/ifx-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-tab.cjs.entry.js +1 -1
- package/dist/cjs/ifx-table.cjs.entry.js +5 -10
- package/dist/cjs/ifx-table.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-tabs.cjs.entry.js +2 -7
- package/dist/cjs/ifx-tabs.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-tag.cjs.entry.js +1 -9
- package/dist/cjs/ifx-tag.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-templates-ui.cjs.entry.js +1 -1
- package/dist/cjs/ifx-textarea.cjs.entry.js +1 -6
- package/dist/cjs/ifx-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-tooltip.cjs.entry.js +4 -9
- package/dist/cjs/ifx-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-tree-view-item.cjs.entry.js +2 -2
- package/dist/cjs/ifx-tree-view.cjs.entry.js +1 -9
- package/dist/cjs/ifx-tree-view.cjs.entry.js.map +1 -1
- package/dist/cjs/index-7f4df11a.js +14 -14
- package/dist/cjs/infineon-design-system-stencil.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/accordion/accordion.js +2 -8
- package/dist/collection/components/accordion/accordion.js.map +1 -1
- package/dist/collection/components/accordion/accordionItem.css +4 -0
- package/dist/collection/components/accordion/accordionItem.js +24 -24
- package/dist/collection/components/accordion/accordionItem.js.map +1 -1
- package/dist/collection/components/alert/alert.js +0 -6
- package/dist/collection/components/alert/alert.js.map +1 -1
- package/dist/collection/components/badge/badge.js +1 -9
- package/dist/collection/components/badge/badge.js.map +1 -1
- package/dist/collection/components/breadcrumb/breadcrumb.js +1 -8
- package/dist/collection/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/collection/components/button/button.js +1 -6
- package/dist/collection/components/button/button.js.map +1 -1
- package/dist/collection/components/card/card.js +3 -8
- package/dist/collection/components/card/card.js.map +1 -1
- package/dist/collection/components/checkbox/checkbox.js +3 -8
- package/dist/collection/components/checkbox/checkbox.js.map +1 -1
- package/dist/collection/components/checkbox-group/checkbox-group.js +1 -6
- package/dist/collection/components/checkbox-group/checkbox-group.js.map +1 -1
- package/dist/collection/components/chip/chip.js +8 -13
- package/dist/collection/components/chip/chip.js.map +1 -1
- package/dist/collection/components/content-switcher/content-switcher.js +1 -6
- package/dist/collection/components/content-switcher/content-switcher.js.map +1 -1
- package/dist/collection/components/date-picker/date-picker.js +2 -9
- package/dist/collection/components/date-picker/date-picker.js.map +1 -1
- package/dist/collection/components/dropdown/dropdown.js +1 -6
- package/dist/collection/components/dropdown/dropdown.js.map +1 -1
- package/dist/collection/components/file-upload/file-upload.js +2 -9
- package/dist/collection/components/file-upload/file-upload.js.map +1 -1
- package/dist/collection/components/footer/footer.js +4 -9
- package/dist/collection/components/footer/footer.js.map +1 -1
- package/dist/collection/components/footer/footer.stories.js +4 -4
- package/dist/collection/components/footer/footer.stories.js.map +1 -1
- package/dist/collection/components/icon/infineonIconStencil.js +3 -36
- package/dist/collection/components/icon/infineonIconStencil.js.map +1 -1
- package/dist/collection/components/icon-button/icon-button.js +1 -6
- package/dist/collection/components/icon-button/icon-button.js.map +1 -1
- package/dist/collection/components/indicator/indicator.js +2 -7
- package/dist/collection/components/indicator/indicator.js.map +1 -1
- package/dist/collection/components/link/link.js +1 -9
- package/dist/collection/components/link/link.js.map +1 -1
- package/dist/collection/components/modal/modal.js +2 -9
- package/dist/collection/components/modal/modal.js.map +1 -1
- package/dist/collection/components/navigation/navbar/navbar.js +3 -5
- package/dist/collection/components/navigation/navbar/navbar.js.map +1 -1
- package/dist/collection/components/navigation/sidebar/sidebar.js +5 -7
- package/dist/collection/components/navigation/sidebar/sidebar.js.map +1 -1
- package/dist/collection/components/notification/notification.js +2 -10
- package/dist/collection/components/notification/notification.js.map +1 -1
- package/dist/collection/components/pagination/pagination.js +1 -6
- package/dist/collection/components/pagination/pagination.js.map +1 -1
- package/dist/collection/components/progress-bar/progress-bar.js +1 -7
- package/dist/collection/components/progress-bar/progress-bar.js.map +1 -1
- package/dist/collection/components/radio-button/radio-button.js +2 -7
- package/dist/collection/components/radio-button/radio-button.js.map +1 -1
- package/dist/collection/components/radio-button-group/radio-button-group.js +1 -6
- package/dist/collection/components/radio-button-group/radio-button-group.js.map +1 -1
- package/dist/collection/components/search-bar/search-bar.js +1 -6
- package/dist/collection/components/search-bar/search-bar.js.map +1 -1
- package/dist/collection/components/search-field/search-field.js +1 -9
- package/dist/collection/components/search-field/search-field.js.map +1 -1
- package/dist/collection/components/segmented-control/segmented-control.js +2 -9
- package/dist/collection/components/segmented-control/segmented-control.js.map +1 -1
- package/dist/collection/components/select/multi-select/interfaces.js.map +1 -1
- package/dist/collection/components/select/multi-select/multiselect-option.css +112 -0
- package/dist/collection/components/select/multi-select/multiselect-option.js +505 -0
- package/dist/collection/components/select/multi-select/multiselect-option.js.map +1 -0
- package/dist/collection/components/select/multi-select/multiselect.css +56 -67
- package/dist/collection/components/select/multi-select/multiselect.js +678 -432
- package/dist/collection/components/select/multi-select/multiselect.js.map +1 -1
- package/dist/collection/components/select/multi-select/multiselect.stories.js +439 -135
- package/dist/collection/components/select/multi-select/multiselect.stories.js.map +1 -1
- package/dist/collection/components/select/single-select/select.js +2 -7
- package/dist/collection/components/select/single-select/select.js.map +1 -1
- package/dist/collection/components/slider/slider.css +2 -2
- package/dist/collection/components/slider/slider.js +2 -7
- package/dist/collection/components/slider/slider.js.map +1 -1
- package/dist/collection/components/spinner/spinner.js +2 -10
- package/dist/collection/components/spinner/spinner.js.map +1 -1
- package/dist/collection/components/status/status.js +1 -9
- package/dist/collection/components/status/status.js.map +1 -1
- package/dist/collection/components/stepper/step/step.js +4 -4
- package/dist/collection/components/stepper/step/step.js.map +1 -1
- package/dist/collection/components/stepper/stepper.js +2 -7
- package/dist/collection/components/stepper/stepper.js.map +1 -1
- package/dist/collection/components/switch/switch.js +1 -6
- package/dist/collection/components/switch/switch.js.map +1 -1
- package/dist/collection/components/table-advanced-version/filter-bar/filter-bar.js +1 -1
- package/dist/collection/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.js +2 -2
- package/dist/collection/components/table-advanced-version/filter-type-group/filter-search/filter-search.js +1 -1
- package/dist/collection/components/table-advanced-version/filter-type-group/filter-type-group.js +1 -1
- package/dist/collection/components/table-advanced-version/list/list-entry/list-entry.js +1 -1
- package/dist/collection/components/table-advanced-version/set-filter/setFilter.js +19 -2
- package/dist/collection/components/table-advanced-version/set-filter/setFilter.js.map +1 -1
- package/dist/collection/components/table-advanced-version/table.js +5 -10
- package/dist/collection/components/table-advanced-version/table.js.map +1 -1
- package/dist/collection/components/table-advanced-version/table.stories.js +2 -3
- package/dist/collection/components/table-advanced-version/table.stories.js.map +1 -1
- package/dist/collection/components/table-basic-version/table.js +4 -9
- package/dist/collection/components/table-basic-version/table.js.map +1 -1
- package/dist/collection/components/tabs/tab.js +1 -1
- package/dist/collection/components/tabs/tabs.js +3 -7
- package/dist/collection/components/tabs/tabs.js.map +1 -1
- package/dist/collection/components/tag/tag.js +1 -9
- package/dist/collection/components/tag/tag.js.map +1 -1
- package/dist/collection/components/templates/template/template.js +1 -1
- package/dist/collection/components/templates/templates-ui/templates-ui.js +1 -1
- package/dist/collection/components/text-field/text-field.js +4 -9
- package/dist/collection/components/text-field/text-field.js.map +1 -1
- package/dist/collection/components/textarea/textarea.js +1 -6
- package/dist/collection/components/textarea/textarea.js.map +1 -1
- package/dist/collection/components/tooltip/tooltip.js +4 -9
- package/dist/collection/components/tooltip/tooltip.js.map +1 -1
- package/dist/collection/components/tree-view/tree-view-item.js +2 -2
- package/dist/collection/components/tree-view/tree-view.js +1 -9
- package/dist/collection/components/tree-view/tree-view.js.map +1 -1
- package/dist/collection/stories/setup-and-installation/faq/faq.js +1 -1
- package/dist/components/ifx-accordion-item.js +1 -1
- package/dist/components/ifx-accordion.js +1 -1
- package/dist/components/ifx-alert.js +1 -1
- package/dist/components/ifx-badge.js +1 -9
- package/dist/components/ifx-badge.js.map +1 -1
- package/dist/components/ifx-basic-table.js +4 -9
- package/dist/components/ifx-basic-table.js.map +1 -1
- package/dist/components/ifx-breadcrumb-item-label.js +1 -1
- package/dist/components/ifx-breadcrumb.js +1 -8
- package/dist/components/ifx-breadcrumb.js.map +1 -1
- package/dist/components/ifx-button.js +1 -1
- package/dist/components/ifx-card.js +3 -8
- package/dist/components/ifx-card.js.map +1 -1
- package/dist/components/ifx-checkbox-group.js +2 -7
- package/dist/components/ifx-checkbox-group.js.map +1 -1
- package/dist/components/ifx-checkbox.js +1 -1
- package/dist/components/ifx-chip-item.js +1 -1
- package/dist/components/ifx-chip.js +1 -1
- package/dist/components/ifx-content-switcher.js +1 -6
- package/dist/components/ifx-content-switcher.js.map +1 -1
- package/dist/components/ifx-date-picker.js +3 -10
- package/dist/components/ifx-date-picker.js.map +1 -1
- package/dist/components/ifx-download.js +1 -1
- package/dist/components/ifx-dropdown-item.js +1 -1
- package/dist/components/ifx-dropdown-separator.js +29 -1
- package/dist/components/ifx-dropdown-separator.js.map +1 -1
- package/dist/components/ifx-dropdown-trigger-button.js +2 -2
- package/dist/components/ifx-dropdown.js +1 -6
- package/dist/components/ifx-dropdown.js.map +1 -1
- package/dist/components/ifx-faq.js +4 -4
- package/dist/components/ifx-file-upload.js +6 -13
- package/dist/components/ifx-file-upload.js.map +1 -1
- package/dist/components/ifx-filter-accordion.js +4 -4
- package/dist/components/ifx-filter-bar.js +3 -3
- package/dist/components/ifx-filter-search.js +3 -3
- package/dist/components/ifx-filter-type-group.js +1 -1
- package/dist/components/ifx-footer.js +4 -9
- package/dist/components/ifx-footer.js.map +1 -1
- package/dist/components/ifx-icon-button.js +1 -1
- package/dist/components/ifx-icon.js +1 -1
- package/dist/components/ifx-icons-preview.js +4 -4
- package/dist/components/ifx-indicator.js +1 -1
- package/dist/components/ifx-link.js +1 -1
- package/dist/components/ifx-list-entry.js +4 -4
- package/dist/components/ifx-list.js +2 -2
- package/dist/components/ifx-modal.js +4 -11
- package/dist/components/ifx-modal.js.map +1 -1
- package/dist/components/ifx-multiselect-option.d.ts +11 -0
- package/dist/components/ifx-multiselect-option.js +8 -0
- package/dist/components/ifx-multiselect-option.js.map +1 -0
- package/dist/components/ifx-multiselect.js +1 -1
- package/dist/components/ifx-navbar-item.js +2 -2
- package/dist/components/ifx-navbar.js +4 -6
- package/dist/components/ifx-navbar.js.map +1 -1
- package/dist/components/ifx-notification.js +1 -1
- package/dist/components/ifx-overview-table.js +3 -3
- package/dist/components/ifx-pagination.js +1 -1
- package/dist/components/ifx-progress-bar.js +1 -1
- package/dist/components/ifx-radio-button-group.js +2 -7
- package/dist/components/ifx-radio-button-group.js.map +1 -1
- package/dist/components/ifx-radio-button.js +1 -1
- package/dist/components/ifx-search-bar.js +3 -8
- package/dist/components/ifx-search-bar.js.map +1 -1
- package/dist/components/ifx-search-field.js +1 -1
- package/dist/components/ifx-segment.js +1 -1
- package/dist/components/ifx-segmented-control.js +3 -10
- package/dist/components/ifx-segmented-control.js.map +1 -1
- package/dist/components/ifx-select.js +1 -1
- package/dist/components/ifx-set-filter.js +35 -12
- package/dist/components/ifx-set-filter.js.map +1 -1
- package/dist/components/ifx-sidebar-item.js +2 -2
- package/dist/components/ifx-sidebar.js +5 -7
- package/dist/components/ifx-sidebar.js.map +1 -1
- package/dist/components/ifx-slider.js +4 -9
- package/dist/components/ifx-slider.js.map +1 -1
- package/dist/components/ifx-spinner.js +1 -1
- package/dist/components/ifx-status.js +1 -9
- package/dist/components/ifx-status.js.map +1 -1
- package/dist/components/ifx-step.js +5 -5
- package/dist/components/ifx-step.js.map +1 -1
- package/dist/components/ifx-stepper.js +2 -7
- package/dist/components/ifx-stepper.js.map +1 -1
- package/dist/components/ifx-switch.js +1 -6
- package/dist/components/ifx-switch.js.map +1 -1
- package/dist/components/ifx-tab.js +1 -1
- package/dist/components/ifx-table.js +14 -19
- package/dist/components/ifx-table.js.map +1 -1
- package/dist/components/ifx-tabs.js +3 -8
- package/dist/components/ifx-tabs.js.map +1 -1
- package/dist/components/ifx-tag.js +2 -10
- package/dist/components/ifx-tag.js.map +1 -1
- package/dist/components/ifx-template.js +1 -1
- package/dist/components/ifx-templates-ui.js +9 -9
- package/dist/components/ifx-text-field.js +1 -1
- package/dist/components/ifx-textarea.js +1 -6
- package/dist/components/ifx-textarea.js.map +1 -1
- package/dist/components/ifx-tooltip.js +5 -10
- package/dist/components/ifx-tooltip.js.map +1 -1
- package/dist/components/ifx-tree-view-item.js +4 -4
- package/dist/components/ifx-tree-view.js +1 -9
- package/dist/components/ifx-tree-view.js.map +1 -1
- package/dist/components/p-09673a59.js +119 -0
- package/dist/components/p-09673a59.js.map +1 -0
- package/dist/components/{p-816b2612.js → p-17df0350.js} +2 -7
- package/dist/components/p-17df0350.js.map +1 -0
- package/dist/components/p-1bb40944.js +602 -0
- package/dist/components/p-1bb40944.js.map +1 -0
- package/dist/components/{p-e126ea6f.js → p-351949f1.js} +3 -11
- package/dist/components/p-351949f1.js.map +1 -0
- package/dist/components/{p-54b39a91.js → p-357107c5.js} +3 -8
- package/dist/components/p-357107c5.js.map +1 -0
- package/dist/components/p-3f51d740.js +432 -0
- package/dist/components/p-3f51d740.js.map +1 -0
- package/dist/components/{p-9ea9e274.js → p-53d4339c.js} +2 -10
- package/dist/components/p-53d4339c.js.map +1 -0
- package/dist/components/{p-6d95b3c1.js → p-5e9d3450.js} +2 -8
- package/dist/components/p-5e9d3450.js.map +1 -0
- package/dist/components/{p-465d3172.js → p-8a645052.js} +3 -11
- package/dist/components/p-8a645052.js.map +1 -0
- package/dist/components/{p-94da6823.js → p-9142f93b.js} +3 -8
- package/dist/components/p-9142f93b.js.map +1 -0
- package/dist/components/{p-4fc475c9.js → p-9a258534.js} +4 -37
- package/dist/components/p-9a258534.js.map +1 -0
- package/dist/components/{p-1ad917f9.js → p-9bdb8233.js} +4 -9
- package/dist/components/p-9bdb8233.js.map +1 -0
- package/dist/components/{p-830057b3.js → p-ba627b54.js} +2 -8
- package/dist/components/p-ba627b54.js.map +1 -0
- package/dist/components/{p-24382260.js → p-c90a8438.js} +6 -11
- package/dist/components/p-c90a8438.js.map +1 -0
- package/dist/components/{p-cf109552.js → p-cdac7da6.js} +5 -10
- package/dist/components/p-cdac7da6.js.map +1 -0
- package/dist/components/{p-8cb991f4.js → p-cf9adb93.js} +5 -13
- package/dist/components/p-cf9adb93.js.map +1 -0
- package/dist/components/{p-13578a85.js → p-dda8b55f.js} +7 -7
- package/dist/components/{p-13578a85.js.map → p-dda8b55f.js.map} +1 -1
- package/dist/components/{p-0905733d.js → p-e4c0ba88.js} +11 -16
- package/dist/components/p-e4c0ba88.js.map +1 -0
- package/dist/components/{p-cca71d97.js → p-ed739e86.js} +2 -9
- package/dist/components/p-ed739e86.js.map +1 -0
- package/dist/components/{p-0d6ca0f6.js → p-eebb75a8.js} +3 -8
- package/dist/components/p-eebb75a8.js.map +1 -0
- package/dist/components/{p-ee0f87ac.js → p-f38c3009.js} +3 -3
- package/dist/components/{p-ee0f87ac.js.map → p-f38c3009.js.map} +1 -1
- package/dist/components/{p-13126216.js → p-f5675de2.js} +5 -10
- package/dist/components/p-f5675de2.js.map +1 -0
- package/dist/esm/ifx-accordion_2.entry.js +26 -33
- package/dist/esm/ifx-accordion_2.entry.js.map +1 -1
- package/dist/esm/ifx-alert_2.entry.js +1 -7
- package/dist/esm/ifx-alert_2.entry.js.map +1 -1
- package/dist/esm/ifx-badge.entry.js +2 -10
- package/dist/esm/ifx-badge.entry.js.map +1 -1
- package/dist/esm/ifx-basic-table.entry.js +4 -9
- package/dist/esm/ifx-basic-table.entry.js.map +1 -1
- package/dist/esm/ifx-breadcrumb.entry.js +1 -8
- package/dist/esm/ifx-breadcrumb.entry.js.map +1 -1
- package/dist/esm/ifx-button.entry.js +1 -6
- package/dist/esm/ifx-button.entry.js.map +1 -1
- package/dist/esm/ifx-card.entry.js +3 -8
- package/dist/esm/ifx-card.entry.js.map +1 -1
- package/dist/esm/ifx-checkbox-group.entry.js +1 -6
- package/dist/esm/ifx-checkbox-group.entry.js.map +1 -1
- package/dist/esm/ifx-checkbox.entry.js +3 -8
- package/dist/esm/ifx-checkbox.entry.js.map +1 -1
- package/dist/esm/ifx-chip_3.entry.js +9 -17
- package/dist/esm/ifx-chip_3.entry.js.map +1 -1
- package/dist/esm/ifx-content-switcher.entry.js +1 -6
- package/dist/esm/ifx-content-switcher.entry.js.map +1 -1
- package/dist/esm/ifx-date-picker.entry.js +2 -9
- package/dist/esm/ifx-date-picker.entry.js.map +1 -1
- package/dist/esm/ifx-dropdown.entry.js +1 -6
- package/dist/esm/ifx-dropdown.entry.js.map +1 -1
- package/dist/esm/ifx-faq.entry.js +1 -1
- package/dist/esm/ifx-file-upload.entry.js +2 -9
- package/dist/esm/ifx-file-upload.entry.js.map +1 -1
- package/dist/esm/ifx-filter-accordion.entry.js +2 -2
- package/dist/esm/ifx-filter-bar.entry.js +1 -1
- package/dist/esm/ifx-filter-search.entry.js +1 -1
- package/dist/esm/ifx-filter-type-group.entry.js +1 -1
- package/dist/esm/ifx-footer.entry.js +4 -9
- package/dist/esm/ifx-footer.entry.js.map +1 -1
- package/dist/esm/ifx-icon-button.entry.js +1 -6
- package/dist/esm/ifx-icon-button.entry.js.map +1 -1
- package/dist/esm/ifx-icon.entry.js +4 -37
- package/dist/esm/ifx-icon.entry.js.map +1 -1
- package/dist/esm/ifx-indicator.entry.js +2 -7
- package/dist/esm/ifx-indicator.entry.js.map +1 -1
- package/dist/esm/ifx-link.entry.js +2 -10
- package/dist/esm/ifx-link.entry.js.map +1 -1
- package/dist/esm/ifx-list-entry.entry.js +1 -1
- package/dist/esm/ifx-modal.entry.js +2 -9
- package/dist/esm/ifx-modal.entry.js.map +1 -1
- package/dist/esm/ifx-multiselect_2.entry.js +927 -0
- package/dist/esm/ifx-multiselect_2.entry.js.map +1 -0
- package/dist/esm/ifx-navbar.entry.js +3 -5
- package/dist/esm/ifx-navbar.entry.js.map +1 -1
- package/dist/esm/ifx-notification.entry.js +3 -11
- package/dist/esm/ifx-notification.entry.js.map +1 -1
- package/dist/esm/ifx-progress-bar.entry.js +2 -8
- package/dist/esm/ifx-progress-bar.entry.js.map +1 -1
- package/dist/esm/ifx-radio-button-group.entry.js +1 -6
- package/dist/esm/ifx-radio-button-group.entry.js.map +1 -1
- package/dist/esm/ifx-radio-button.entry.js +2 -7
- package/dist/esm/ifx-radio-button.entry.js.map +1 -1
- package/dist/esm/ifx-search-bar.entry.js +1 -6
- package/dist/esm/ifx-search-bar.entry.js.map +1 -1
- package/dist/esm/ifx-search-field.entry.js +2 -10
- package/dist/esm/ifx-search-field.entry.js.map +1 -1
- package/dist/esm/ifx-segmented-control.entry.js +2 -9
- package/dist/esm/ifx-segmented-control.entry.js.map +1 -1
- package/dist/esm/ifx-select.entry.js +2 -7
- package/dist/esm/ifx-select.entry.js.map +1 -1
- package/dist/esm/ifx-set-filter.entry.js +19 -2
- package/dist/esm/ifx-set-filter.entry.js.map +1 -1
- package/dist/esm/ifx-sidebar.entry.js +5 -7
- package/dist/esm/ifx-sidebar.entry.js.map +1 -1
- package/dist/esm/ifx-slider.entry.js +3 -8
- package/dist/esm/ifx-slider.entry.js.map +1 -1
- package/dist/esm/ifx-spinner_2.entry.js +7 -18
- package/dist/esm/ifx-spinner_2.entry.js.map +1 -1
- package/dist/esm/ifx-status.entry.js +2 -10
- package/dist/esm/ifx-status.entry.js.map +1 -1
- package/dist/esm/ifx-step.entry.js +4 -4
- package/dist/esm/ifx-step.entry.js.map +1 -1
- package/dist/esm/ifx-stepper.entry.js +2 -7
- package/dist/esm/ifx-stepper.entry.js.map +1 -1
- package/dist/esm/ifx-switch.entry.js +1 -6
- package/dist/esm/ifx-switch.entry.js.map +1 -1
- package/dist/esm/ifx-tab.entry.js +1 -1
- package/dist/esm/ifx-table.entry.js +5 -10
- package/dist/esm/ifx-table.entry.js.map +1 -1
- package/dist/esm/ifx-tabs.entry.js +2 -7
- package/dist/esm/ifx-tabs.entry.js.map +1 -1
- package/dist/esm/ifx-tag.entry.js +2 -10
- package/dist/esm/ifx-tag.entry.js.map +1 -1
- package/dist/esm/ifx-templates-ui.entry.js +1 -1
- package/dist/esm/ifx-textarea.entry.js +1 -6
- package/dist/esm/ifx-textarea.entry.js.map +1 -1
- package/dist/esm/ifx-tooltip.entry.js +4 -9
- package/dist/esm/ifx-tooltip.entry.js.map +1 -1
- package/dist/esm/ifx-tree-view-item.entry.js +2 -2
- package/dist/esm/ifx-tree-view.entry.js +2 -10
- package/dist/esm/ifx-tree-view.entry.js.map +1 -1
- package/dist/esm/index-6c9eba32.js +14 -14
- package/dist/esm/infineon-design-system-stencil.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/p-02496917.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-02496917.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-f2bea855.entry.js → p-04d8ea38.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-061bfdb1.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-061bfdb1.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-87fbd617.entry.js → p-0c1c831c.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-135110b2.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-135110b2.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-13c107bf.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-13c107bf.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-17f3f2f5.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-17f3f2f5.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-1bf2d4f8.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-1bf2d4f8.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-2006c7a0.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-2006c7a0.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-292cff35.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-292cff35.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-2d89c5e0.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-2d89c5e0.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-33a4fd0a.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-33a4fd0a.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-a9cfb70d.entry.js → p-36dcebde.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-37d6c639.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-37d6c639.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-0f096cf1.entry.js → p-3d037fa4.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-3d23deba.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-3d23deba.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-3ff96710.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-3ff96710.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-4764665d.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-4764665d.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-47a3e831.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-47a3e831.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-487d2155.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-487d2155.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-4f82fcfd.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-4f82fcfd.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-5e376887.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-5e376887.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-5f38cace.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-5f38cace.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-6250b9f6.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-6250b9f6.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-6790d912.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-6790d912.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-6bdca580.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-6bdca580.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-babf3f2d.entry.js → p-6c2698a3.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-6c999b11.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-6c999b11.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-9c28f35f.entry.js → p-6e7b0250.entry.js} +3 -3
- package/dist/infineon-design-system-stencil/p-6e7b0250.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-70f4fd1b.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-70f4fd1b.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-741ee6fd.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-741ee6fd.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-7619bd75.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-7619bd75.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-76e0c34f.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-76e0c34f.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-6d99d01d.entry.js → p-7adee2dd.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-99faadcf.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-99faadcf.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-9fc0f50d.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-9fc0f50d.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-a2a44fbe.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-a356a82d.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-a356a82d.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-a80e321b.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-a80e321b.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-aadd1a9d.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-aadd1a9d.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-ad1ec9d6.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-ad1ec9d6.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-b73a5f18.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-b73a5f18.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-2b38c405.entry.js → p-b7cb706f.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-2b38c405.entry.js.map → p-b7cb706f.entry.js.map} +1 -1
- package/dist/infineon-design-system-stencil/p-b9c761d3.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-b9c761d3.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-7b7ac7fa.entry.js → p-c7e86c7c.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-c84ef603.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-c84ef603.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-d890b0de.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-d890b0de.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-dd28f3a1.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-dd28f3a1.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-e571c002.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-e72e5fb2.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-e72e5fb2.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-ef6d0dc6.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-ef6d0dc6.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-f338fb85.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-f338fb85.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-f9a7ae20.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-f9a7ae20.entry.js.map +1 -0
- package/dist/types/components/accordion/accordion.d.ts +0 -1
- package/dist/types/components/accordion/accordionItem.d.ts +1 -2
- package/dist/types/components/alert/alert.d.ts +0 -1
- package/dist/types/components/badge/badge.d.ts +0 -2
- package/dist/types/components/breadcrumb/breadcrumb.d.ts +0 -1
- package/dist/types/components/date-picker/date-picker.d.ts +0 -1
- package/dist/types/components/file-upload/file-upload.d.ts +0 -1
- package/dist/types/components/icon/infineonIconStencil.d.ts +0 -3
- package/dist/types/components/link/link.d.ts +0 -2
- package/dist/types/components/modal/modal.d.ts +0 -1
- package/dist/types/components/notification/notification.d.ts +0 -2
- package/dist/types/components/progress-bar/progress-bar.d.ts +0 -1
- package/dist/types/components/search-field/search-field.d.ts +0 -2
- package/dist/types/components/segmented-control/segmented-control.d.ts +0 -1
- package/dist/types/components/select/multi-select/interfaces.d.ts +1 -1
- package/dist/types/components/select/multi-select/multiselect-option.d.ts +36 -0
- package/dist/types/components/select/multi-select/multiselect.d.ts +38 -61
- package/dist/types/components/select/multi-select/multiselect.stories.d.ts +219 -30
- package/dist/types/components/spinner/spinner.d.ts +0 -2
- package/dist/types/components/status/status.d.ts +0 -2
- package/dist/types/components/tag/tag.d.ts +0 -2
- package/dist/types/components/tree-view/tree-view.d.ts +0 -2
- package/dist/types/components.d.ts +54 -8
- package/package.json +2 -2
- package/dist/cjs/dom-utils-2c4573c2.js +0 -20
- package/dist/cjs/dom-utils-2c4573c2.js.map +0 -1
- package/dist/cjs/ifx-multiselect.cjs.entry.js +0 -550
- package/dist/cjs/ifx-multiselect.cjs.entry.js.map +0 -1
- package/dist/cjs/tracking-f00364dc.js +0 -41
- package/dist/cjs/tracking-f00364dc.js.map +0 -1
- package/dist/collection/global/utils/dom-utils.js +0 -15
- package/dist/collection/global/utils/dom-utils.js.map +0 -1
- package/dist/collection/global/utils/tracking.js +0 -37
- package/dist/collection/global/utils/tracking.js.map +0 -1
- package/dist/components/p-0905733d.js.map +0 -1
- package/dist/components/p-0d6ca0f6.js.map +0 -1
- package/dist/components/p-13126216.js.map +0 -1
- package/dist/components/p-1ad917f9.js.map +0 -1
- package/dist/components/p-1ecafb97.js +0 -18
- package/dist/components/p-1ecafb97.js.map +0 -1
- package/dist/components/p-24382260.js.map +0 -1
- package/dist/components/p-347a1b14.js +0 -603
- package/dist/components/p-347a1b14.js.map +0 -1
- package/dist/components/p-465d3172.js.map +0 -1
- package/dist/components/p-4fc475c9.js.map +0 -1
- package/dist/components/p-54b39a91.js.map +0 -1
- package/dist/components/p-68016aea.js +0 -33
- package/dist/components/p-68016aea.js.map +0 -1
- package/dist/components/p-6d95b3c1.js.map +0 -1
- package/dist/components/p-6ecb6a6f.js +0 -39
- package/dist/components/p-6ecb6a6f.js.map +0 -1
- package/dist/components/p-816b2612.js.map +0 -1
- package/dist/components/p-830057b3.js.map +0 -1
- package/dist/components/p-8cb991f4.js.map +0 -1
- package/dist/components/p-94da6823.js.map +0 -1
- package/dist/components/p-9ea9e274.js.map +0 -1
- package/dist/components/p-cca71d97.js.map +0 -1
- package/dist/components/p-cf109552.js.map +0 -1
- package/dist/components/p-e126ea6f.js.map +0 -1
- package/dist/components/p-fe90e932.js +0 -119
- package/dist/components/p-fe90e932.js.map +0 -1
- package/dist/esm/dom-utils-1988cdf1.js +0 -18
- package/dist/esm/dom-utils-1988cdf1.js.map +0 -1
- package/dist/esm/ifx-multiselect.entry.js +0 -546
- package/dist/esm/ifx-multiselect.entry.js.map +0 -1
- package/dist/esm/tracking-a7efdbcd.js +0 -39
- package/dist/esm/tracking-a7efdbcd.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-0c60ce87.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-0c60ce87.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-14842bbb.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-14842bbb.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-19fcf1db.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-19fcf1db.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-1ecafb97.js +0 -2
- package/dist/infineon-design-system-stencil/p-1ecafb97.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-1fd80576.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-1fd80576.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-227fa186.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-227fa186.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-26c73456.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-26c73456.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-296f215f.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-296f215f.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-32b0dfda.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-32b0dfda.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-34738a10.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-45ac2698.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-45ac2698.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-4eda4ef3.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-4eda4ef3.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-52420868.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-52420868.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-5493e6f5.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-5493e6f5.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-5a12d20a.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-5a12d20a.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-65255c40.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-65255c40.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-65e57b85.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-68423787.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-68423787.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-6d72ad32.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-6d72ad32.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-6ecb6a6f.js +0 -2
- package/dist/infineon-design-system-stencil/p-6ecb6a6f.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-73d39ed6.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-73d39ed6.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-76914839.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-76914839.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-796675ed.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-796675ed.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-79b7d7a2.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-79b7d7a2.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-82c59e6b.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-82c59e6b.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-82dd7e7d.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-82dd7e7d.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-877e1d37.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-877e1d37.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-8a7bfe65.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-8a7bfe65.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-98532a0e.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-98532a0e.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-9c28f35f.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-a0006775.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-a0006775.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-ac7db8d1.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-ac7db8d1.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-ae8110b7.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-ae8110b7.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-aeaa6d0b.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-aeaa6d0b.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-b110d5d4.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-b110d5d4.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-b17a0e8c.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-b17a0e8c.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-bb7b2a3c.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-bb7b2a3c.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-c164c83b.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-c164c83b.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-c220733b.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-c220733b.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-c88876dc.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-c88876dc.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-e0978af0.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-e0978af0.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-e5018880.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-e5018880.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-ed869b07.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-ed869b07.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-eeb59f76.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-eeb59f76.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-f3f8d603.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-f3f8d603.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-fb6a813b.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-fb6a813b.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-fe22fc31.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-fe22fc31.entry.js.map +0 -1
- package/dist/types/global/utils/dom-utils.d.ts +0 -1
- package/dist/types/global/utils/tracking.d.ts +0 -9
- /package/dist/infineon-design-system-stencil/{p-f2bea855.entry.js.map → p-04d8ea38.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-87fbd617.entry.js.map → p-0c1c831c.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-a9cfb70d.entry.js.map → p-36dcebde.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-0f096cf1.entry.js.map → p-3d037fa4.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-babf3f2d.entry.js.map → p-6c2698a3.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-6d99d01d.entry.js.map → p-7adee2dd.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-65e57b85.entry.js.map → p-a2a44fbe.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-7b7ac7fa.entry.js.map → p-c7e86c7c.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-34738a10.entry.js.map → p-e571c002.entry.js.map} +0 -0
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["ButtonCellRenderer","init","params","this","createButton","getGui","eGui","refresh","updateButton","config","data","button","options","colDef","cellRendererParams","document","createElement","eButton","hasRequiredKeys","setButtonAttributes","appendChild","attachEventListener","innerHTML","detachEventListener","setAttribute","disabled","toString","variant","theme","type","size","fullWidth","target","href","textContent","text","eventListener","event","onButtonClick","addEventListener","removeEventListener","CustomNoRowsOverlay","noRowsMessageFunc","_params","CustomLoadingOverlay","tableCss","IfxTableStyle0","Table","constructor","hostRef","currentPage","rowData","colData","filterOptions","currentFilters","allRowData","rowHeight","tableHeight","pagination","paginationPageSize","filterOrientation","showSidebarFilters","matchingResultsCount","showLoading","originalRowData","handleChipChange","name","currentSelection","previousSelection","detail","updatedFilters","Object","assign","length","customEvent","CustomEvent","filterName","bubbles","composed","host","dispatchEvent","filterValues","map","selection","value","applyAllFilters","updateTableView","onButtonRendererOptionsChanged","getColData","gridApi","setColumnDefs","toggleSidebarFilters","updateFilterOptions","col","field","Set","row","handleSidebarFilterChange","filterGroups","forEach","filterGroup","filterGroupName","selectedItems","item","label","handleTopbarFilterChange","filters","filter","filterInfo","selectedValues","toLowerCase","textFilterMatched","property","hasOwnProperty","rowValue","String","some","filterValue","startsWith","includesUndefined","includes","startIndex","endIndex","visibleRowData","slice","setGridOption","clearAllFilters","onBtShowLoading","showLoadingOverlay","componentWillLoad","uniqueKey","Math","floor","random","getRowData","gridOptions","headerHeight","defaultColDef","resizable","suppressDragLeaveHidesColumns","enableCellTextSelection","onFirstDataRendered","bind","columnDefs","loadingOverlayComponent","noRowsOverlayComponent","noRowsOverlayComponentParams","icons","sortAscending","sortDescending","sortUnSort","rowDragManaged","dndSource","animateRows","componentDidRender","componentDidLoad","container","createGrid","sizeColumnsToFit","defaultMinWidth","paginationElement","shadowRoot","querySelector","handlePageChange","sidebarFilterElements","querySelectorAll","sidebarFilterElement","topbarFilterElements","topbarFilterElement","componentWillUnmount","sidebarFilters","sidebarFilter","topbarFilters","topbarFilter","isJSONParseable","str","JSON","parse","e","rows","undefined","Array","isArray","console","error","cols","buttonColumn","find","column","cellRenderer","valueFormatter","buttonRendererOptions","api","handleResetButtonClick","resetEvent","window","disconnectedCallback","resetButton","getTableClassNames","classNames","render","style","height","filterClass","h","Host","key","class","onClick","icon","keys","isMultiSelect","placeholder","readOnly","selected","id","ref","el","total","hasButtonCol","onDragOver","dragSupported","dataTransfer","dropEffect","preventDefault","onDrop","jsonData","getData","eJsonRow","classList","add","innerText","eJsonDisplay"],"sources":["src/components/table-advanced-version/buttonCellRenderer.ts","src/components/table-advanced-version/customNoRowsOverlay.ts","src/components/table-advanced-version/customLoadingOverlay.ts","src/components/table-advanced-version/table.scss?tag=ifx-table&encapsulation=shadow","src/components/table-advanced-version/table.tsx"],"sourcesContent":["import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\nimport { ButtonInterface } from './interfaces';\n\nexport class ButtonCellRenderer implements ICellRendererComp {\n eGui!: HTMLDivElement;\n eButton!: HTMLElement; // Change to a generic HTMLElement to accommodate custom elements\n eventListener!: (event: Event) => void;\n\n init(params: ICellRendererParams) {\n this.createButton(params);\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(params: ICellRendererParams) {\n this.updateButton(params);\n return true;\n }\n\n private createButton(params: ICellRendererParams) {\n const config = params.data.button;\n const options = params.colDef.cellRendererParams || {};\n \n this.eGui = document.createElement('div');\n this.eButton = document.createElement('ifx-button') as HTMLElement;\n \n if (this.hasRequiredKeys(config)) {\n this.setButtonAttributes(config);\n this.eGui.appendChild(this.eButton);\n this.attachEventListener(options, params);\n } else {\n this.eGui.innerHTML = `<span>${config}</span>`;\n }\n }\n\n private updateButton(params: ICellRendererParams) {\n const config = params.data.button;\n const options = params.colDef.cellRendererParams || {};\n \n if (this.hasRequiredKeys(config)) {\n this.setButtonAttributes(config);\n this.detachEventListener();\n this.attachEventListener(options, params);\n } else {\n this.eGui.innerHTML = `<span>${config}</span>`;\n }\n }\n\n private setButtonAttributes(config: ButtonInterface) {\n this.eButton.setAttribute('disabled', config.disabled.toString());\n this.eButton.setAttribute('variant', config.variant);\n this.eButton.setAttribute('theme', config.theme);\n this.eButton.setAttribute('type', config.type);\n this.eButton.setAttribute('size', config.size);\n this.eButton.setAttribute('full-width', config.fullWidth.toString());\n this.eButton.setAttribute('target', config.target);\n this.eButton.setAttribute('href', config.href);\n this.eButton.textContent = config.text;\n }\n\n private attachEventListener(options: any, params: ICellRendererParams) {\n this.eventListener = (event: Event) => {\n if (options.onButtonClick) {\n options.onButtonClick(params, event);\n }\n };\n this.eButton.addEventListener('click', this.eventListener);\n }\n\n private detachEventListener() {\n if (this.eventListener) {\n this.eButton.removeEventListener('click', this.eventListener);\n }\n }\n\n private hasRequiredKeys(config: ButtonInterface): boolean {\n return config && config.text !== '' && config.variant !== '' && config.size !== '' && config.type !== '';\n }\n}\n","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomNoRowsOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(params: ICellRendererParams & { noRowsMessageFunc: () => string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `\n <div role=\"presentation\" class=\"ag-overlay-loading-center\" >\n ${params.noRowsMessageFunc()}\n </div>\n `;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomLoadingOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(_params: ICellRendererParams & { loadingMessage: string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `<div class=\"ag-overlay-loading-center\" role=\"presentation\">\n<ifx-spinner></ifx-spinner>\n </div>`;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n@import \"~ag-grid-community/styles/ag-grid.css\";\n\n.zebra { \n & .ag-row-odd { \n background-color: tokens.$ifxColorEngineering100!important;\n }\n\n & .ag-row { \n border-bottom: none!important;\n }\n}\n\n.ag-header-viewport { \n background-color: tokens.$ifxColorEngineering200!important;\n}\n\n\n.table-container {\n display: block;\n}\n\n.sidebar-btn {\n margin-bottom: 24px;\n}\n\n.sidebar-container {\n margin-right: 24px;\n}\n\n.sidebar-layout {\n display: flex;\n flex-direction: row;\n}\n\n.topbar-layout {\n display: flex;\n flex-direction: column;\n}\n\n.table-pagination-wrapper {\n display: flex;\n flex-direction: column;\n align-items: stretch; // stretches items to fill the container horizontally\n width: 100%; // ensures the wrapper takes up the full width of its parent\n}\n\n#table-wrapper {\n flex: 1; // allows the table to take up the remaining space\n padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.table-wrapper .ag-root-wrapper-body {\n height: auto !important;\n min-height: 100px !important;\n min-width: 100px;\n}\n\n.filter-chips { \n display:flex;\n gap:tokens.$ifxSpace100;\n margin-bottom: 12px;\n}\n\n.filter-chips > ifx-button { // ifx-button with icon and text has a paddingof 16 px. This is to remove the padding to align with the filter-chips container definition\n margin-left: -8px;\n}\n\n.set-filter-wrapper-sidebar {\n display: flex;\n flex-direction: column;\n margin-bottom: tokens.$ifxSpace100;\n}\n\n.set-filter-wrapper-topbar {\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n margin-bottom: tokens.$ifxSpace100;\n background: tokens.$ifxColorEngineering100;\n padding-top: 32px;\n padding-bottom: 32px;\n gap: 24px;\n }\n\n\n.ifx-ag-grid {\n display: grid;\n height: 100%;\n width: 100%;\n min-width: 100px;\n //padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.ifx-ag-grid .ag-header-cell::after {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n}\n\n.ifx-ag-grid .ag-header-cell:focus {\n outline: none !important;\n}\n\n.ifx-ag-grid *:not(.ag-header-cell):focus {\n outline: none;\n}\n\n\n.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\n content: '';\n position: absolute;\n right: 0;\n top: calc(50% - 12px);\n height: 24px; \n width: 1px;\n background-color: tokens.$ifxColorEngineering300; \n}\n\n\n.ag-overlay-loading-center {\n border: none;\n background: none;\n border-radius: none;\n box-shadow: none;\n}\n\n\n.ag-root-wrapper {\n border: 1px solid tokens.$ifxColorEngineering200;\n}\n\n\n\n.ag-header {\n background-color: tokens.$ifxColorEngineering100;\n border-bottom: none;\n\n &.ag-header-active {\n outline: none !important;\n border-color: #0A8276 !important;\n }\n}\n\n.ag-header-cell {\n padding-left: 16px;\n padding-right: 16px;\n gap: 4px;\n}\n\n\n.ag-header-cell-focus {\n border: none !important;\n outline: none !important;\n}\n\n.ag-header-cell-text {\n font-size: 13px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n}\n\n.ag-row-focus {\n background-color: inherit !important;\n /* Reset the hover color to the row's original color */\n}\n\n.ag-row-hover {\n background-color: tokens.$ifxColorBaseWhite !important; //inherit !important;\n /* Reset the hover color to the row's original color */\n}\n\n\n.ag-cell-focus {\n border: none !important;\n outline: none !important;\n background-color: inherit !important;\n}\n\n\n\n.ag-row {\n background-color: tokens.$ifxColorBaseWhite;\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n z-index: 1; //ensure the stacking order when used inside js frameworks\n}\n\n.ag-row-odd {\n background-color: tokens.$ifxColorBaseWhite;\n}\n\n.ag-cell {\n display: flex;\n padding-left: 16px;\n padding-right: 16px;\n align-items: center;\n\n}\n\n.ag-ltr .ag-sort-indicator-icon {\n padding-left: 0px;\n vertical-align: bottom;\n line-height: 12px;\n}\n\n.ag-sort-indicator-container .ag-sort-order { \n display: none;\n}\n\n.unsort-icon-custom-color {\n color: tokens.$ifxColorEngineering400;\n}\n\n\n// Table with set filters in sidebar orientation\n\n\n.filters-title {\n font-size: 24px;\n font-weight: 600;\n}\n\n\n.matching-results-container {\n display: flex;\n gap: 4px;\n font-size: 14px;\n}\n\n.matching-results-count {\n font-weight: 600;\n}\n\n.matching-results-text {\n font-weight: 400;\n}","import { Component, h, Host, Method, Element, Prop, State, Listen, Watch } from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\nimport { ButtonCellRenderer } from './buttonCellRenderer';\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\n\n\n@Component({\n tag: 'ifx-table',\n styleUrl: 'table.scss',\n shadow: true\n})\nexport class Table {\n gridOptions: GridOptions;\n gridApi: GridApi;\n @State() currentPage: number = 1;\n @Prop() cols: any;\n @Prop() rows: any;\n @Prop() buttonRendererOptions?: { onButtonClick?: (params: any, event: Event) => void;}; \n @State() rowData: any[] = [];\n @State() colData: any[] = [];\n @State() filterOptions: { [key: string]: string[] } = {};\n @State() currentFilters = {};\n @State() uniqueKey: string;\n allRowData: any[] = [];\n @Prop() rowHeight: string = 'default';\n @Prop() tableHeight: string = 'auto';\n @Prop() pagination: boolean = true;\n @Prop() paginationPageSize: number = 10;\n @Prop() filterOrientation: string = 'sidebar'; // topbar / none\n @State() showSidebarFilters: boolean = true;\n @State() matchingResultsCount: number = 0;\n @Prop() variant: string = 'default'\n\n @Prop() showLoading: boolean = false;\n private container: HTMLDivElement;\n @Element() host: HTMLElement;\n originalRowData: any[] = [];\n\n @Listen('ifxChange')\n handleChipChange(event: CustomEvent<{ previousSelection: Array<any>, currentSelection: Array<any>, name: string }>) {\n const { name, currentSelection, previousSelection } = event.detail;\n if(currentSelection && previousSelection) { \n // Clone the current filters state\n const updatedFilters = { ...this.currentFilters };\n \n if (currentSelection.length === 0) {\n // If there are no selections for this filter, delete the filter\n delete updatedFilters[name];\n \n // Emit event with specific filter name\n const customEvent = new CustomEvent('ifxUpdateSidebarFilter', { detail: { filterName: name }, bubbles: true, composed: true });\n this.host.dispatchEvent(customEvent);\n } else {\n // Otherwise, update the filter values with the current selection\n updatedFilters[name].filterValues = currentSelection.map(selection => selection.value);\n }\n \n // Update the component's filters\n this.currentFilters = updatedFilters;\n \n // Ensure table data is updated\n this.allRowData = this.applyAllFilters(this.originalRowData, this.currentFilters);\n this.updateTableView();\n }\n }\n\n @Watch('buttonRendererOptions')\n onButtonRendererOptionsChanged() {\n this.colData = this.getColData(); // Re-fetch column data to apply new renderer options\n if (this.gridApi) {\n this.gridApi.setColumnDefs(this.colData); // Update column definitions in the grid API\n }\n }\n\n toggleSidebarFilters() {\n this.showSidebarFilters = !this.showSidebarFilters;\n }\n\n updateFilterOptions() {\n const options = {};\n for (let col of this.colData) {\n options[col.field] = [...new Set(this.rowData.map(row => row[col.field]))];\n }\n this.filterOptions = options;\n }\n\n handleSidebarFilterChange(event: CustomEvent) {\n const filterGroups = event.detail;\n const updatedFilters = {};\n\n filterGroups.forEach(filterGroup => {\n const filterName = filterGroup.filterGroupName;\n let filterValues;\n let type;\n\n if (filterGroup.selectedItems && filterGroup.selectedItems.length > 0) {\n filterValues = filterGroup.selectedItems.map(item => item.label);\n type = 'multi-select';\n } else if (filterGroup.value) {\n filterValues = [filterGroup.value];\n type = 'text';\n } else {\n filterValues = [];\n }\n\n if (!(filterValues.length === 0 || (filterValues.length === 1 && type === 'text' && filterValues[0] === ''))) {\n updatedFilters[filterName] = { filterValues, type };\n }\n });\n\n this.allRowData = this.applyAllFilters(this.originalRowData, updatedFilters);\n this.updateTableView();\n this.currentFilters = updatedFilters;\n }\n\n\n handleTopbarFilterChange(event: CustomEvent) {\n const filters = event.detail;\n\n // Start by resetting the filter conditions to a blank object\n this.currentFilters = {};\n\n // Loop through each filter group provided in the event detail\n filters.forEach(filter => {\n const filterName = filter.filterName;\n let filterValues;\n\n let type = filter.type;\n\n if (type === 'text') {\n // Search/Text filter\n filterValues = filter.filterValues\n } else {\n // Multi-select/Single-Select\n filterValues = filter.filterValues.map(item => item.label);\n }\n\n // If there are no filter values, or the filter is a text filter with an empty value, remove the filter\n if (!(filterValues.length === 0 || (filterValues.length === 1 && type === 'text' && filterValues[0] === ''))) {\n // Add or update the filter in the currentFilters object\n this.currentFilters[filterName] = { filterValues, type };\n }\n });\n\n\n // Now that the currentFilters object has been updated, apply all filters to the data\n this.allRowData = this.applyAllFilters(this.originalRowData, this.currentFilters);\n\n // After filtering, update the table view with the new filtered data\n this.updateTableView();\n }\n\n\n applyAllFilters(data, filters) {\n return data.filter(row => {\n for (const filterName in filters) {\n const filterInfo = filters[filterName];\n let selectedValues = (filterInfo.filterValues || []).map(value => {\n if (typeof value === 'string') {\n return value.toLowerCase();\n } else if (typeof value === 'number' || typeof value === 'boolean') {\n return value.toString();\n }\n return '';\n });\n\n // For text filters, check if row values start with any of the selectedValues\n if (filterInfo.type === 'text') {\n let textFilterMatched = false;\n for (let property in row) {\n if (row.hasOwnProperty(property)) {\n let rowValue = row[property] != null ? String(row[property]).toLowerCase() : '';\n if (selectedValues.some(filterValue => rowValue.startsWith(filterValue))) {\n textFilterMatched = true;\n break;\n }\n }\n }\n if (!textFilterMatched) return false;\n }\n // For multi-select filters, this remains unchanged\n else if (filterInfo.type === 'multi-select') {\n let rowValue = row[filterName] != null ? String(row[filterName]).toLowerCase() : '';\n // Check if 'undefined' is a selected value and include rows with empty values in that case\n let includesUndefined = selectedValues.includes('undefined');\n if (!selectedValues.includes(rowValue) && !(includesUndefined && rowValue === '')) {\n return false;\n }\n }\n }\n return true;\n });\n }\n\n\n\n updateTableView() {\n // Calculate the slice of data to display based on pagination\n const startIndex = (this.currentPage - 1) * this.paginationPageSize;\n const endIndex = startIndex + this.paginationPageSize;\n const visibleRowData = this.allRowData.slice(startIndex, endIndex);\n\n // Update the row data in the table\n this.rowData = visibleRowData;\n this.gridApi.setGridOption('rowData', this.rowData);\n\n // Update matching results count\n this.matchingResultsCount = this.allRowData.length;\n }\n\n\n clearAllFilters() {\n this.currentFilters = {};\n this.allRowData = [...this.originalRowData];\n }\n\n\n @Method()\n async onBtShowLoading() {\n this.gridApi.showLoadingOverlay();\n }\n\n componentWillLoad() {\n this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;\n\n this.rowData = this.getRowData();\n this.colData = this.getColData();\n this.updateFilterOptions();\n\n this.gridOptions = {\n\n rowHeight: this.rowHeight === 'default' ? 40 : 32,\n headerHeight: 40,\n defaultColDef: {\n resizable: true,\n },\n suppressDragLeaveHidesColumns: true,\n enableCellTextSelection: true,\n onFirstDataRendered: this.onFirstDataRendered.bind(this),\n columnDefs: this.colData,\n rowData: this.rowData,\n loadingOverlayComponent: CustomLoadingOverlay,\n noRowsOverlayComponent: CustomNoRowsOverlay,\n noRowsOverlayComponentParams: {\n noRowsMessageFunc: () =>\n 'No rows found' //at: ' + new Date().toLocaleTimeString(),\n },\n icons: {\n sortAscending: '<ifx-icon icon=\"arrowtriangleup16\"></ifx-icon>',\n sortDescending: '<ifx-icon icon=\"arrowtriangledown16\"></ifx-icon>',\n sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrowtrianglevertikal16\"></ifx-icon></a>'\n },\n rowDragManaged: this.colData.some(col => col.dndSource === true) ? true : false,\n animateRows: this.colData.some(col => col.dndSource === true) ? true : false,\n };\n\n }\n\n componentDidRender() {\n if (this.gridApi) {\n this.gridApi.setGridOption('columnDefs', this.colData);\n }\n }\n\n\n\n componentDidLoad() {\n if (this.container) {\n this.gridApi = createGrid(this.container, this.gridOptions);\n if (this.gridApi) {\n this.gridApi.sizeColumnsToFit({\n defaultMinWidth: 100,\n });\n this.gridApi.setGridOption('columnDefs', this.colData);\n this.gridApi.setGridOption('rowData', this.rowData);\n\n if (this.pagination) {\n const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n if (paginationElement) {\n paginationElement.addEventListener('ifxPageChange', this.handlePageChange.bind(this));\n }\n }\n const sidebarFilterElements = this.host.querySelectorAll('ifx-filter-type-group');\n // Add an event listener to each SetFilter component\n sidebarFilterElements.forEach(sidebarFilterElement => {\n sidebarFilterElement.addEventListener('ifxSidebarFilterChange', this.handleSidebarFilterChange.bind(this));\n });\n const topbarFilterElements = this.host.querySelectorAll('ifx-filter-bar');\n // Add an event listener to each SetFilter component\n topbarFilterElements.forEach(topbarFilterElement => {\n topbarFilterElement.addEventListener('ifxTopbarFilterChange', this.handleTopbarFilterChange.bind(this));\n });\n }\n }\n }\n\n componentWillUnmount() {\n if (this.pagination) {\n const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n if (paginationElement) {\n paginationElement.removeEventListener('ifxPageChange', this.handlePageChange.bind(this));\n }\n }\n const sidebarFilters = this.host.shadowRoot.querySelectorAll('ifx-filter-type-group');\n // Remove the event listener from each SetFilter component\n sidebarFilters.forEach(sidebarFilter => {\n sidebarFilter.removeEventListener('ifxSidebarFilterChange', this.handleSidebarFilterChange.bind(this));\n });\n const topbarFilters = this.host.shadowRoot.querySelectorAll('ifx-filter-type-group');\n // Remove the event listener from each SetFilter component\n topbarFilters.forEach(topbarFilter => {\n topbarFilter.removeEventListener('ifxTopbarFilterChange', this.handleTopbarFilterChange.bind(this));\n });\n }\n\n handlePageChange(event) {\n this.currentPage = event.detail.currentPage;\n const startIndex = (this.currentPage - 1) * this.paginationPageSize;\n const endIndex = startIndex + this.paginationPageSize;\n const visibleRowData = this.allRowData.slice(startIndex, endIndex);\n // Update the data in the grid\n if (this.gridApi) {\n this.gridApi.setGridOption('rowData', visibleRowData);\n }\n }\n\n isJSONParseable(str) {\n try {\n JSON.parse(str);\n return true;\n } catch (e) {\n return false;\n }\n }\n\n\n getRowData() {\n let rows: any[] = [];\n if (this.rows === undefined || this.rows === null) {\n return rows;\n }\n \n if (this.isJSONParseable(this.rows)) {\n rows = [...JSON.parse(this.rows)];\n }\n else if (Array.isArray(this.rows) || typeof this.rows === 'object') {\n rows = [...this.rows];\n }\n else {\n console.error('Unexpected value for rows: ', this.rows);\n }\n\n this.allRowData = rows;\n this.originalRowData = [...rows]; // Deep copy the original data\n this.matchingResultsCount = this.allRowData.length;\n\n return rows.slice(0, this.paginationPageSize);\n }\n\n\n getColData() {\n let cols: any[] = [];\n if (this.cols === undefined || this.cols === null) {\n return cols;\n }\n \n if (this.isJSONParseable(this.cols)) {\n cols = [...JSON.parse(this.cols)];\n } else if (Array.isArray(this.cols) || typeof this.cols === 'object') {\n cols = [...this.cols];\n } else {\n console.error('Unexpected value for cols: ', this.cols);\n }\n \n const buttonColumn = cols.find(column => column.field === 'button');\n if (buttonColumn) {\n buttonColumn.cellRenderer = ButtonCellRenderer;\n buttonColumn.valueFormatter = params => params.value.text;\n \n // No JSON.parse needed now\n if (this.buttonRendererOptions && typeof this.buttonRendererOptions === 'object') {\n if (this.buttonRendererOptions.onButtonClick) {\n buttonColumn.cellRendererParams = {\n onButtonClick: this.buttonRendererOptions.onButtonClick\n };\n }\n }\n }\n \n return cols;\n }\n \n\n onFirstDataRendered(params: FirstDataRenderedEvent) {\n params.api.sizeColumnsToFit();\n }\n\n handleResetButtonClick() {\n const resetEvent = new CustomEvent('ifxResetFiltersEvent', { bubbles: true, composed: true });\n window.dispatchEvent(resetEvent); // Dispatch from the window object\n\n this.clearAllFilters();\n this.updateTableView(); // Update table view with the original data\n }\n\n\n disconnectedCallback() {\n if (this.pagination) {\n const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n if (paginationElement) {\n paginationElement.removeEventListener('ifxPageChange', this.handlePageChange);\n }\n }\n\n const resetButton = this.host.shadowRoot.querySelector('#reset-filters-button');\n if (resetButton) {\n resetButton.removeEventListener('click', this.handleResetButtonClick.bind(this));\n }\n }\n\n\n\n getTableClassNames() {\n return classNames(\n this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\n 'table-wrapper',\n );\n }\n\n\n render() {\n let style = {};\n if (this.tableHeight !== 'auto') {\n style = {\n 'height': this.tableHeight\n };\n }\n const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';\n return (\n <Host>\n <div class=\"table-container\">\n {this.filterOrientation === 'sidebar' && (\n <div class=\"sidebar-btn\">\n <ifx-button\n type=\"button\"\n disabled={false}\n variant=\"secondary\"\n size=\"m\"\n target=\"_blank\"\n theme=\"default\"\n full-width=\"false\"\n onClick={() => this.toggleSidebarFilters()}\n >\n <ifx-icon icon=\"cross-16\"></ifx-icon>{this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'}\n </ifx-button>\n </div>\n )}\n\n <div class={filterClass}>\n {this.filterOrientation === 'sidebar' && this.showSidebarFilters && (\n <div class=\"sidebar-container\">\n <div class=\"filters-title-container\">\n <span class=\"filters-title\">Filters</span>\n </div>\n <div class=\"set-filter-wrapper-sidebar\">\n {(this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (\n <slot name=\"sidebar-filter\"></slot>\n )}\n </div>\n </div>\n )}\n\n {this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (\n <div class=\"set-filter-wrapper-topbar\">\n {(this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (\n <slot name=\"topbar-filter\"></slot>\n )}\n </div>\n )}\n\n <div class=\"table-pagination-wrapper\">\n <div class=\"filter-chips\">\n {this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (\n Object.keys(this.currentFilters).map(name => {\n const filter = this.currentFilters[name];\n const filterValues = filter.filterValues;\n const isMultiSelect = filter.type !== 'text';\n\n return filterValues.length > 0 ? (\n <ifx-chip\n placeholder={name}\n size=\"large\"\n variant={isMultiSelect ? \"multi\" : \"single\"}\n readOnly={true}\n value={filterValues} // Ensure value prop is set\n key={name}\n >\n {filterValues.map(filterValue => (\n <ifx-chip-item value={filterValue} selected={true} key={filterValue}>\n {filterValue}\n </ifx-chip-item>\n ))}\n </ifx-chip>\n ) : null;\n })\n )}\n\n {this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (\n <ifx-button type=\"button\" disabled={false} variant=\"tertiary\" size=\"m\" target=\"_blank\" theme=\"default\" full-width=\"false\" onClick={() => this.handleResetButtonClick()}\n >\n <ifx-icon icon=\"curved-arrow-left-16\"></ifx-icon>Reset all\n </ifx-button>\n )}\n </div>\n\n {this.filterOrientation !== 'none' && (\n <div class=\"matching-results-container\">\n <span class=\"matching-results-count\">\n {this.matchingResultsCount}\n </span>\n <span class=\"matching-results-text\">\n matching results\n </span>\n </div>\n )}\n\n <div id=\"table-wrapper\" class={this.getTableClassNames()}>\n <div id={`ifxTable-${this.uniqueKey}`} class={`ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : \"\"}`} style={style} ref={(el) => this.container = el}>\n </div>\n </div>\n {this.pagination ? <ifx-pagination total={this.allRowData.length} current-page={this.currentPage} items-per-page='[{\"value\":\"ten\",\"label\":\"10\",\"selected\":true}, {\"value\":\"Twenty\",\"label\":\"20\",\"selected\":false}, {\"value\":\"Thirty\",\"label\":\"30\",\"selected\":false}]'></ifx-pagination> : null}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n\n hasButtonCol(): boolean {\n return this.getColData().some(column => column.field === 'button');\n }\n\n onDragOver(event) {\n var dragSupported = event.dataTransfer.length;\n\n if (dragSupported) {\n event.dataTransfer.dropEffect = 'move';\n }\n\n event.preventDefault();\n }\n\n onDrop(event) {\n var jsonData = event.dataTransfer.getData('application/json');\n\n var eJsonRow = document.createElement('div');\n eJsonRow.classList.add('json-row');\n eJsonRow.innerText = jsonData;\n\n var eJsonDisplay = document.querySelector('#eJsonDisplay');\n\n eJsonDisplay.appendChild(eJsonRow);\n event.preventDefault();\n }\n\n}\n"],"mappings":"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","ignoreList":[]}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as e,c as a,h as t}from"./p-b7a462e5.js";const s=':host{display:block}.tree-view{font-family:var(--ifx-font-family, sans-serif);font-size:14px;color:var(--ifx-color-text, #1a1a1a);display:flex;flex-wrap:wrap;flex-direction:column;overflow-x:auto;overflow-y:hidden}.tree-view__label{font:600 1.125rem/1.625rem "Source Sans 3";margin-bottom:8px}';const l=s;const i=class{constructor(t){e(this,t);this.ifxTreeViewExpandAllChange=a(this,"ifxTreeViewExpandAllChange",7);this.ifxTreeViewDisableAllChange=a(this,"ifxTreeViewDisableAllChange",7);this.disableAllItems=false;this.expandAllItems=false;this.handleSlotRef=e=>{if(e){if(this.disableAllItems){e.setAttribute("data-disable-all-items","true")}else{e.removeAttribute("data-disable-all-items")}if(this.expandAllItems){e.setAttribute("data-expand-all-items","true")}else{e.removeAttribute("data-expand-all-items")}}}}handleExpandAllItemsChange(e){this.ifxTreeViewExpandAllChange.emit(e)}handleDisableAllItemsChange(e){this.ifxTreeViewDisableAllChange.emit(e)}render(){return t("div",{key:"972a1b59fb596afbc0aa61269130adf1aac77d7a",class:`tree-view ${this.disableAllItems?" tree-view--disabled":""}`,role:"tree","aria-label":this.ariaLabel},this.label&&this.label.trim()!==""&&t("div",{key:"16b92cf0720371b359bdf7eb6f65bd97d8c01fd6",class:"tree-view__label"},this.label),t("slot",{key:"625792b041e9ba011b3babe92a6ba850b6cd4394",ref:this.handleSlotRef}))}static get watchers(){return{expandAllItems:["handleExpandAllItemsChange"],disableAllItems:["handleDisableAllItemsChange"]}}};i.style=l;export{i as ifx_tree_view};
|
2
|
+
//# sourceMappingURL=p-5e376887.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["treeViewCss","IfxTreeViewStyle0","TreeView","constructor","hostRef","this","disableAllItems","expandAllItems","handleSlotRef","el","setAttribute","removeAttribute","handleExpandAllItemsChange","newValue","ifxTreeViewExpandAllChange","emit","handleDisableAllItemsChange","ifxTreeViewDisableAllChange","render","h","key","class","role","ariaLabel","label","trim","ref"],"sources":["src/components/tree-view/tree-view.scss?tag=ifx-tree-view&encapsulation=shadow","src/components/tree-view/tree-view.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: block;\n}\n\n.tree-view {\n font-family: var(--ifx-font-family, sans-serif);\n font-size: 14px;\n color: var(--ifx-color-text, #1a1a1a);\n\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n overflow-x: auto;\n overflow-y: hidden;\n\n &__label {\n font: tokens.$ifxHeadingHeading06;\n margin-bottom: tokens.$ifxSpace100;\n }\n}\n","import { Component, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n tag: 'ifx-tree-view',\n styleUrl: 'tree-view.scss',\n shadow: true,\n})\nexport class TreeView {\n @Prop() label?: string;\n @Prop() disableAllItems: boolean = false;\n @Prop() expandAllItems: boolean = false;\n @Prop() ariaLabel: string | null;\n\n @Event() ifxTreeViewExpandAllChange: EventEmitter<boolean>;\n @Event() ifxTreeViewDisableAllChange: EventEmitter<boolean>;\n\n @Watch('expandAllItems')\n handleExpandAllItemsChange(newValue: boolean) {\n this.ifxTreeViewExpandAllChange.emit(newValue);\n }\n\n @Watch('disableAllItems')\n handleDisableAllItemsChange(newValue: boolean) {\n this.ifxTreeViewDisableAllChange.emit(newValue);\n }\n\n private handleSlotRef = (el: HTMLSlotElement | null) => {\n if (el) {\n if (this.disableAllItems) {\n el.setAttribute('data-disable-all-items', 'true');\n } else {\n el.removeAttribute('data-disable-all-items');\n }\n if (this.expandAllItems) {\n el.setAttribute('data-expand-all-items', 'true');\n } else {\n el.removeAttribute('data-expand-all-items');\n }\n }\n };\n\n render() {\n return (\n <div\n class={`tree-view ${this.disableAllItems ? ' tree-view--disabled' : ''}`}\n role=\"tree\"\n aria-label={this.ariaLabel}\n >\n {this.label && this.label.trim() !== '' && <div class=\"tree-view__label\">{this.label}</div>}\n <slot ref={this.handleSlotRef}></slot>\n </div>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAc,wSACpB,MAAAC,EAAeD,E,MCMFE,EAAQ,MALrB,WAAAC,CAAAC,G,0JAOUC,KAAAC,gBAA2B,MAC3BD,KAAAE,eAA0B,MAgB1BF,KAAAG,cAAiBC,IACvB,GAAIA,EAAI,CACN,GAAIJ,KAAKC,gBAAiB,CACxBG,EAAGC,aAAa,yBAA0B,O,KACrC,CACLD,EAAGE,gBAAgB,yB,CAErB,GAAIN,KAAKE,eAAgB,CACvBE,EAAGC,aAAa,wBAAyB,O,KACpC,CACLD,EAAGE,gBAAgB,wB,IAnBzB,0BAAAC,CAA2BC,GACzBR,KAAKS,2BAA2BC,KAAKF,E,CAIvC,2BAAAG,CAA4BH,GAC1BR,KAAKY,4BAA4BF,KAAKF,E,CAkBxC,MAAAK,GACE,OACEC,EAAA,OAAAC,IAAA,2CACEC,MAAO,aAAahB,KAAKC,gBAAkB,uBAAyB,KACpEgB,KAAK,OAAM,aACCjB,KAAKkB,WAEhBlB,KAAKmB,OAASnB,KAAKmB,MAAMC,SAAW,IAAMN,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBAAoBhB,KAAKmB,OAC/EL,EAAA,QAAAC,IAAA,2CAAMM,IAAKrB,KAAKG,gB","ignoreList":[]}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as t,h as o,g as e}from"./p-b7a462e5.js";import{c as i}from"./p-e459974a.js";const s=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1D1D1D;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:absolute;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#FFFFFF;width:max-content;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:start}.tooltip-dismissible .close-button{all:unset;cursor:pointer;position:relative;order:2;margin-top:12px;margin-right:12px;line-height:0px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:50%;transform:rotate(180deg) translateX(-50%)}[data-placement=top-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-start].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:10px;transform:rotate(180deg)}[data-placement=top-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-end].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;right:10px;transform:rotate(180deg)}[data-placement=bottom].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:50%;transform:translateX(-50%)}[data-placement=bottom-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:10px}[data-placement=bottom-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-compact>.tooltip-arrow-svg{top:-7px;right:10px}[data-placement=left].tooltip-extended>.tooltip-arrow-svg,[data-placement=left].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=left].tooltip-compact>.tooltip-arrow-svg{right:-3px;top:50%;transform:rotate(90deg) translateY(-50%) translateX(-50%)}[data-placement=right].tooltip-extended>.tooltip-arrow-svg,[data-placement=right].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=right].tooltip-compact>.tooltip-arrow-svg{left:-3px;top:50%;transform:rotate(270deg) translateY(-50%) translateX(50%)}.tooltip-compact{min-width:28px !important;max-width:145px !important}.tooltip-dismissible{min-width:145px !important;max-width:310px !important}.tooltip-extended{min-width:145px !important;max-width:310px !important}';const a=s;const l=class{constructor(o){t(this,o);this.tooltipVisible=false;this.header="";this.text="";this.position="auto";this.internalPosition="auto";this.variant="compact";this.popperInstance=null;this.onMouseEnter=()=>{var t,o;(t=this.popperInstance)===null||t===void 0?void 0:t.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:true}]})));this.initializePopper();this.tooltipVisible=true;this.tooltipEl.style.display="block";(o=this.popperInstance)===null||o===void 0?void 0:o.update()};this.onMouseLeave=()=>{this.tooltipVisible=false;this.tooltipEl.style.display="none"};this.onClick=()=>{var t;if(this.variant.toLowerCase()==="dismissible"){this.initializePopper();this.tooltipVisible=!this.tooltipVisible;this.tooltipEl.style.display=this.tooltipVisible?"block":"none";(t=this.popperInstance)===null||t===void 0?void 0:t.update()}};this.onDismissClick=()=>{this.tooltipVisible=false;this.tooltipEl.style.display="none"}}componentWillLoad(){if(this.variant.toLowerCase().trim()===""){this.variant="compact"}}componentDidLoad(){const t=this.el.shadowRoot.querySelector(".tooltip__container").firstChild;if(this.variant.toLowerCase()==="compact"||this.variant.toLowerCase()==="extended"){t.addEventListener("mouseenter",this.onMouseEnter);t.addEventListener("mouseleave",this.onMouseLeave)}else{t.addEventListener("click",this.onClick)}}initializePopper(){if(this.popperInstance)return;this.referenceEl=this.el;if(this.variant.toLowerCase()==="compact"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-compact")}else if(this.variant.toLowerCase()==="dismissible"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-dismissible")}else{this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-extended")}const t=this.position==="auto"?this.determineBestPosition():this.position;this.internalPosition=t;if(this.tooltipEl&&this.referenceEl){this.popperInstance=i(this.referenceEl,this.tooltipEl,{placement:this.internalPosition,modifiers:[{name:"offset",options:{offset:[0,8]}},{name:"arrow",options:{element:".tooltip-arrow-svg"}}]})}this.tooltipEl.setAttribute("data-placement",t)}determineBestPosition(){const t=this.referenceEl.getBoundingClientRect();const o=window.scrollY;const e=window.scrollX;const i=t.top+o+t.height/2;const s=t.left+e+t.width/2;if(this.position==="auto"){if(i>window.innerHeight/2){if(s>window.innerWidth/2){return"top-end"}else{return"top-start"}}else{if(s>window.innerWidth/2){return"bottom-end"}else{return"bottom-start"}}}else{return this.position}}positionChanged(t){var o;this.internalPosition=t;(o=this.popperInstance)===null||o===void 0?void 0:o.destroy();this.popperInstance=null}disconnectedCallback(){var t;(t=this.popperInstance)===null||t===void 0?void 0:t.destroy()}render(){const t={"tooltip-dismissible":true,visible:this.tooltipVisible};const e={"tooltip-compact":true,visible:this.tooltipVisible};const i={"tooltip-extended":true,visible:this.tooltipVisible};return o("div",{key:"79e5795550b354ad4c9de87882c20cd424bc9ce4","aria-label":"a tooltip showing important information","aria-value":this.header,class:"tooltip__container"},o("slot",{key:"e88124ef7638ef382447be3a00703f91d0eb85d9"}),this.variant.toLowerCase()==="dismissible"&&o("div",{key:"af329e08b8a279ad4d3e00c5d6651eacc9c10334",class:t},o("button",{key:"0acac4c6e495c1bde212c12a7f94e1f3fe57846c","aria-label":"Close Tooltip",class:"close-button",onClick:this.onDismissClick},o("ifx-icon",{key:"39b6c4d7d9a0f8cd6cc69d734048e9ae6a2ddccf",icon:"cross16"})),o("div",{key:"c644b211ee9232aa259fead59e4ff478a1dceae4",class:"tooltip-dismissible-content"},this.header&&o("div",{key:"ab54a13034a56e749fd30f7908ff354a75da054b",class:"tooltip-dismissible-header"},this.header),o("div",{key:"be9461076bc462cea981b09abcc958d75c05e4e7",class:"tooltip-dismissible-body"},this.text)),o("svg",{key:"1aec3b49d17818c86dedb09716060e17be5be211",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"018fb635ff70bdc3c48d86b380cbf74d69ed2d44",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="compact"&&o("div",{key:"306db15667f9de0f461e20e967d501a49692017b",class:e},this.text,o("svg",{key:"b75ae6faf83808d6183a7f2134e7517da5df3b47",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"14455a3c6bb493d7020742e40e9f04e6a9588dc5",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="extended"&&o("div",{key:"0e6eedf0fcbed712d8e43b191d6c5cba79c00db7",class:i},o("slot",{key:"deee89573031a32c987573b6e41a50d80c080326",name:"icon"},this.icon?o("div",{class:"extended_icon"},o("ifx-icon",{icon:this.icon})):o("svg",{class:"extended_icon",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none",viewBox:"0 0 24 24"},o("path",{stroke:"#fff","stroke-linecap":"round","stroke-linejoin":"round",d:"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z"}),o("path",{stroke:"#fff",d:"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z"}),o("path",{fill:"#fff",d:"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"}))),o("div",{key:"963585b8e36eec83487cc58b2f2e4b6633cc2813",class:"tooltip-extended-content"},this.header&&o("div",{key:"ecfb9f2dc013161adbc6d6e79035edf7746504ac",class:"tooltip-extended-header"},this.header),o("div",{key:"abdd7c89a2e0d0e0408ed59ff201b69e7757efaf",class:"tooltip-extended-body"},this.text)),o("svg",{key:"efc2d6685e50a4484b51421046095f1e2987029a",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"0a430af58349e55fccc57d66cadea1a2bb7a295c",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))))}get el(){return e(this)}static get watchers(){return{position:["positionChanged"]}}};l.style=a;export{l as ifx_tooltip};
|
2
|
+
//# sourceMappingURL=p-5f38cace.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["tooltipCss","IfxTooltipStyle0","Tooltip","constructor","hostRef","this","tooltipVisible","header","text","position","internalPosition","variant","popperInstance","onMouseEnter","_a","setOptions","options","Object","assign","modifiers","name","enabled","initializePopper","tooltipEl","style","display","_b","update","onMouseLeave","onClick","toLowerCase","onDismissClick","componentWillLoad","trim","componentDidLoad","slotElement","el","shadowRoot","querySelector","firstChild","addEventListener","referenceEl","effectivePosition","determineBestPosition","createPopper","placement","offset","element","setAttribute","rect","getBoundingClientRect","yOffset","window","scrollY","xOffset","scrollX","verticalHalfwayPoint","top","height","horizontalHalfwayPoint","left","width","innerHeight","innerWidth","positionChanged","newVal","destroy","disconnectedCallback","render","tooltipDismissible","visible","tooltipCompact","tooltipExtended","h","key","class","icon","viewBox","fill","xmlns","id","d","stroke"],"sources":["src/components/tooltip/tooltip.scss?tag=ifx-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.tooltip__container {\n display: inline-flex;\n flex-direction: column;\n position: relative;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n}\n\n%tooltip-common {\n background-color: tokens.$ifxColorBaseBlack;\n border: 1px solid black;\n z-index: 1080;\n display: none;\n transition: opacity 0.3s;\n position: absolute;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n color: tokens.$ifxColorBaseWhite;\n width: max-content;\n box-sizing: border-box;\n\n white-space: pre-wrap; /* wraps text at spaces and within words */\n word-wrap: break-word; /* breaks text within a word if necessary */\n overflow-wrap: anywhere; /* breaks text at arbitrary points when needed */\n\n &.visible {\n display: flex !important;\n align-items: start;\n //min-width: 100px;\n //width: auto;\n }\n}\n\n\n\n.tooltip-dismissible {\n @extend %tooltip-common;\n\n .close-button {\n all: unset;\n //position: absolute;\n //top: tokens.$ifxSpace150;\n //right: tokens.$ifxSpace150;\n cursor: pointer;\n position: relative;\n order: 2;\n margin-top: 12px;\n margin-right: 12px;\n line-height: 0px;\n }\n\n .tooltip-dismissible-content {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace150;\n padding: tokens.$ifxSpace150;\n flex-grow: 1;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n\n }\n\n .tooltip-dismissible-header,\n .tooltip-dismissible-body {\n font-size: 14px;\n font-style: normal;\n line-height: 20px;\n }\n\n .tooltip-dismissible-header {\n font-weight: tokens.$ifxFontWeightSemibold;\n }\n\n .tooltip-dismissible-body {\n font-weight: tokens.$ifxFontWeightRegular;\n }\n}\n\n.tooltip-compact {\n @extend %tooltip-common;\n padding: 4px 8px;\n text-align: center;\n flex-grow: 1;\n}\n\n\n.tooltip-extended {\n @extend %tooltip-common;\n //padding-left: 36px; // Added this line, adjust as per your icon width\n //padding-left: tokens.$ifxSpace150; // Added this line, adjust as per your icon width\n align-items: center;\n padding: tokens.$ifxSpace150;\n gap: 10px;\n\n .extended_icon {\n display: flex;\n align-self: flex-start;\n align-items: center;\n //padding-top: tokens.$ifxSpace150;\n cursor: pointer;\n }\n\n\n\n .tooltip-extended-content {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace150;\n //padding: tokens.$ifxSpace150;\n flex-grow: 1;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n }\n\n .tooltip-extended-header,\n .tooltip-extended-body {\n font-size: 14px;\n font-style: normal;\n line-height: 20px;\n }\n\n .tooltip-extended-header {\n font-weight: tokens.$ifxFontWeightSemibold;\n }\n\n .tooltip-extended-body {\n font-weight: tokens.$ifxFontWeightRegular;\n }\n}\n\n\n.tooltip__container .tooltip-arrow-svg {\n position: absolute;\n width: 8px;\n height: 8px;\n}\n\n\n%tooltip-arrow-positions {\n\n // For 'top' placement\n &[data-placement=\"top\"]>.tooltip-arrow-svg {\n bottom: -7px;\n left: 50%;\n transform: rotate(180deg) translateX(-50%);\n }\n\n // For 'top-start' placement\n &[data-placement=\"top-start\"]>.tooltip-arrow-svg {\n bottom: -7px;\n left: 10px; // Adjust as needed\n transform: rotate(180deg)\n }\n\n // For 'top-end' placement\n &[data-placement=\"top-end\"]>.tooltip-arrow-svg {\n bottom: -7px;\n right: 10px; // Adjust as needed\n transform: rotate(180deg);\n }\n\n // For 'bottom' placement\n &[data-placement=\"bottom\"]>.tooltip-arrow-svg {\n top: -7px;\n left: 50%;\n transform: translateX(-50%);\n }\n\n // For 'bottom-start' placement\n &[data-placement=\"bottom-start\"]>.tooltip-arrow-svg {\n top: -7px;\n left: 10px; // Adjust as needed\n }\n\n // For 'bottom-end' placement\n &[data-placement=\"bottom-end\"]>.tooltip-arrow-svg {\n top: -7px;\n right: 10px; // Adjust as needed\n }\n\n // For 'left' placement\n &[data-placement=\"left\"]>.tooltip-arrow-svg {\n right: -3px;\n top: 50%;\n transform: rotate(90deg) translateY(-50%) translateX(-50%);\n }\n\n // For 'right' placement\n &[data-placement=\"right\"]>.tooltip-arrow-svg {\n left: -3px;\n top: 50%;\n transform: rotate(270deg) translateY(-50%) translateX(50%);\n }\n}\n\n\n.tooltip-compact {\n @extend %tooltip-arrow-positions;\n min-width: 28px !important;\n max-width: 145px !important;\n}\n\n.tooltip-dismissible {\n @extend %tooltip-arrow-positions;\n min-width: 145px !important;\n max-width: 310px !important;\n}\n\n.tooltip-extended {\n @extend %tooltip-arrow-positions;\n min-width: 145px !important;\n max-width: 310px !important;\n}\n","import { Component, Prop, h, Element, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\n \n\n@Component({\n tag: 'ifx-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true\n})\nexport class Tooltip {\n\n @Element() el: HTMLElement;\n @State() tooltipVisible: boolean = false;\n @Prop() header: string = '';\n @Prop() text: string = '';\n @Prop() position: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n @State() internalPosition: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n\n @Prop() variant: 'compact' | 'dismissible' | 'extended' = 'compact';\n @Prop() icon: string;\n\n tooltipEl: HTMLElement;\n referenceEl: HTMLElement;\n popperInstance: any = null;\n\n\n componentWillLoad() { \n if(this.variant.toLowerCase().trim() === \"\") { \n this.variant = 'compact'\n }\n }\n \n componentDidLoad() {\n const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;\n \n if(this.variant.toLowerCase() === 'compact' || this.variant.toLowerCase() === 'extended') {\n slotElement.addEventListener('mouseenter', this.onMouseEnter)\n slotElement.addEventListener('mouseleave', this.onMouseLeave)\n }else{\n slotElement.addEventListener('click', this.onClick);\n }\n\n }\n\n initializePopper() {\n if (this.popperInstance) return;\n\n this.referenceEl = this.el;\n this.tooltipEl;\n if (this.variant.toLowerCase() === 'compact') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');\n }\n else if (this.variant.toLowerCase() === 'dismissible') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');\n }\n else {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');\n\n }\n\n const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;\n\n // Set the internalPosition\n this.internalPosition = effectivePosition;\n\n if (this.tooltipEl && this.referenceEl) {\n\n this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {\n placement: this.internalPosition,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8] // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element\n }\n },\n {\n name: 'arrow',\n options: {\n element: '.tooltip-arrow-svg'\n }\n }\n ]\n });\n\n }\n\n // Add this line to set the 'data-placement' attribute on the tooltip\n this.tooltipEl.setAttribute('data-placement', effectivePosition);\n\n\n }\n\n determineBestPosition() {\n // This is a simplified version, you can enhance this based on available viewport space.\n const rect = this.referenceEl.getBoundingClientRect();\n const yOffset = window.scrollY; // Get current scroll position\n const xOffset = window.scrollX; // Get current horizontal scroll position\n\n const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;\n const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;\n\n if (this.position === 'auto') {\n if (verticalHalfwayPoint > window.innerHeight / 2) {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'top-end';\n } else {\n return 'top-start';\n }\n } else {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'bottom-end';\n } else {\n return 'bottom-start';\n }\n }\n } else {\n return this.position;\n }\n }\n\n @Watch('position')\n positionChanged(newVal: any) {\n this.internalPosition = newVal;\n this.popperInstance?.destroy();\n this.popperInstance = null; // Force re-initialization on next mouse enter\n }\n\n\n\n onMouseEnter = () => {\n // Enable the event listeners immediately\n this.popperInstance?.setOptions((options) => ({\n ...options,\n modifiers: [\n ...options.modifiers,\n { name: 'eventListeners', enabled: true },\n ],\n }));\n\n // Initialize the popper instance\n this.initializePopper();\n\n // Make the tooltip visible\n this.tooltipVisible = true;\n this.tooltipEl.style.display = 'block';\n\n // Update the popper instance immediately after initialization\n this.popperInstance?.update();\n }\n\n\n onMouseLeave = () => {\n this.tooltipVisible = false;\n this.tooltipEl.style.display = 'none';\n\n }\n\n disconnectedCallback() {\n this.popperInstance?.destroy();\n }\n\n onClick = () => {\n if (this.variant.toLowerCase() === 'dismissible') {\n this.initializePopper();\n this.tooltipVisible = !this.tooltipVisible;\n this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';\n this.popperInstance?.update();\n }\n }\n\n onDismissClick = () => {\n this.tooltipVisible = false;\n this.tooltipEl.style.display = 'none';\n }\n\n render() {\n const tooltipDismissible = {\n 'tooltip-dismissible': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipCompact = {\n 'tooltip-compact': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipExtended = {\n 'tooltip-extended': true,\n 'visible': this.tooltipVisible,\n };\n\n return (\n <div aria-label=\"a tooltip showing important information\" aria-value={this.header} class=\"tooltip__container\" >\n <slot></slot>\n\n {this.variant.toLowerCase() === 'dismissible' && <div class={tooltipDismissible}>\n <button aria-label=\"Close Tooltip\" class=\"close-button\" onClick={this.onDismissClick}>\n <ifx-icon icon=\"cross16\"></ifx-icon>\n </button>\n <div class=\"tooltip-dismissible-content\">\n {this.header && <div class=\"tooltip-dismissible-header\">{this.header}</div>}\n <div class=\"tooltip-dismissible-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'compact' &&\n <div class={tooltipCompact}>\n {this.text}\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'extended' &&\n <div class={tooltipExtended}>\n <slot name=\"icon\">\n {this.icon ? <div class=\"extended_icon\"><ifx-icon icon={this.icon}></ifx-icon></div> :\n <svg class=\"extended_icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"#fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z\" />\n <path stroke=\"#fff\" d=\"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z\" />\n <path fill=\"#fff\" d=\"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\" />\n </svg>\n }\n </slot>\n <div class=\"tooltip-extended-content\">\n {this.header && <div class=\"tooltip-extended-header\">{this.header}</div>}\n <div class=\"tooltip-extended-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div >\n }\n </div>\n );\n }\n\n\n}"],"mappings":"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","ignoreList":[]}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as t,c as e,h as s,g as i}from"./p-b7a462e5.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.stepper{display:flex;align-items:center}.stepper.compact{align-items:center;gap:8px}.stepper.compact.compact-right{flex-direction:row-reverse;text-align:left}.stepper.compact .stepper-wrapper{width:unset;flex-direction:column}.stepper.vertical{height:100%}.stepper.vertical .stepper-wrapper{flex-direction:column;width:unset;height:100%}.stepper-wrapper{display:flex;flex-direction:row;width:100%}.stepper-wrapper ::slotted(*){display:flex;flex:1;justify-content:flex-start}.stepper-progress{display:flex;justify-content:center;align-items:center;font:600 0.875rem/1.25rem "Source Sans 3";min-width:56px;height:56px;border-radius:9999px;background:conic-gradient(#0A8276 var(--pb, 0%), #8D8786 0)}.stepper-progress .progress-detail{display:flex;justify-content:center;align-items:center;text-align:center;width:48px;height:48px;border-radius:9999px;background:white}';const a=r;const p=class{constructor(s){t(this,s);this.ifxChange=e(this,"ifxChange",7);this.activeStep=1;this.indicatorPosition="left";this.showStepNumber=false;this.variant="default";this.shouldEmitEvent=true;this.emittedByClick=false}onStepChange(t){const e=this.getSteps();const s=e[t.detail.previousActiveStep-1];if(s&&!s.complete){s.setAttribute("error","true")}}handleActiveStep(t,e){const s=this.getSteps();if(!this.shouldEmitEvent){this.shouldEmitEvent=true;return}if(s[t-1]){if(!s[t-1].disabled){this.emitIfxChange(t,e)}else{if(t<e){let i=t;this.shouldEmitEvent=false;while(i>=1&&s[i-1].disabled)i--;if(i<1){this.activeStep=e}else{this.emitIfxChange(i,e);this.activeStep=i}}else{let i=t;this.shouldEmitEvent=false;while(i<=this.stepsCount&&s[i-1].disabled)i++;if(i>this.stepsCount){this.activeStep=e}else{this.emitIfxChange(i,e);this.activeStep=i}}}}}emitIfxChange(t,e){this.ifxChange.emit({activeStep:t,previousActiveStep:e,totalSteps:this.stepsCount,emittedByClick:this.emittedByClick});this.emittedByClick=false}getSteps(){const t=this.el.querySelectorAll("ifx-step");return t}addStepIdsToStepsAndCountSteps(){const t=this.getSteps();t[t.length-1].lastStep=true;for(let e=0;e<t.length;e++){t[e].stepId=e+1}this.stepsCount=t.length}setActiveStep(t,e=false){this.emittedByClick=e;this.activeStep=t}setStepsBeforeActiveToComplete(){const t=this.getSteps();t.forEach(((t,e)=>{if(e+1<this.activeStep)t.complete=true}))}syncIfxSteps(){const t=this.getSteps();for(let e=0;e<t.length;e++){const s={activeStep:this.activeStep,indicatorPosition:this.indicatorPosition!=="right"?"left":"right",showStepNumber:this.showStepNumber,variant:this.variant!=="compact"&&this.variant!=="vertical"?"default":this.variant,setActiveStep:this.setActiveStep.bind(this)};t[e].stepperState=s}}setInitialActiveStep(){this.activeStep=Math.max(1,Math.min(this.stepsCount+(this.variant!=="compact"?1:0),this.activeStep))}componentWillLoad(){this.addStepIdsToStepsAndCountSteps();this.setInitialActiveStep();this.setStepsBeforeActiveToComplete()}componentDidLoad(){this.syncIfxSteps()}componentWillUpdate(){this.syncIfxSteps()}render(){return s("div",{key:"9f4a96df48255b146d0a3075a4bb08aa80fd16be","aria-label":"a stepper",role:"navigation",class:`stepper ${this.variant!=="compact"&&this.variant!=="vertical"?"default":this.variant} ${this.variant==="compact"?"compact-"+this.indicatorPosition:""}`},this.variant==="compact"&&s("div",{key:"25d7ccc872572db8d9711f8bb39da19121eff4f8",class:"stepper-progress"},s("div",{key:"05ce3bbcbe2fecc4c3da87073ba7f3bee37da0a6",class:"progress-detail"},`${Math.min(this.activeStep,this.stepsCount)} of ${this.stepsCount}`)),s("div",{key:"5b0835756e0e372fdab5a448ac2fbede05afc64b",class:`stepper-wrapper`},s("slot",{key:"a9fdefe464858e7384419c2cfcecf8273129d91c"})))}componentDidRender(){if(this.variant=="compact"){const t=this.el.shadowRoot.querySelector(".stepper-progress");t.style.setProperty("--pb",`${this.activeStep/this.stepsCount*100}%`)}}get el(){return i(this)}static get watchers(){return{activeStep:["handleActiveStep"]}}};p.style=a;export{p as ifx_stepper};
|
2
|
+
//# sourceMappingURL=p-6250b9f6.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["stepperCss","IfxStepperStyle0","Stepper","constructor","hostRef","this","activeStep","indicatorPosition","showStepNumber","variant","shouldEmitEvent","emittedByClick","onStepChange","event","steps","getSteps","previousActiveStep","detail","complete","setAttribute","handleActiveStep","newStep","oldStep","disabled","emitIfxChange","i","stepsCount","ifxChange","emit","totalSteps","el","querySelectorAll","addStepIdsToStepsAndCountSteps","length","lastStep","stepId","setActiveStep","setByClick","setStepsBeforeActiveToComplete","forEach","step","syncIfxSteps","stepperState","bind","setInitialActiveStep","Math","max","min","componentWillLoad","componentDidLoad","componentWillUpdate","render","h","key","role","class","componentDidRender","progressBar","shadowRoot","querySelector","style","setProperty"],"sources":["src/components/stepper/stepper.scss?tag=ifx-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.stepper {\n display: flex;\n align-items: center;\n \n &.compact {\n align-items: center;\n gap: 8px;\n \n &.compact-right {\n flex-direction: row-reverse;\n text-align: left;\n }\n \n .stepper-wrapper{\n width: unset;\n flex-direction: column;\n }\n }\n\n &.vertical {\n height: 100%;\n\n .stepper-wrapper {\n flex-direction: column;\n width: unset;\n height: 100%;\n }\n }\n}\n\n.stepper-wrapper {\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n\n.stepper-wrapper ::slotted(*){\n display: flex;\n flex: 1;\n justify-content: flex-start;\n}\n\n.stepper-progress {\n display: flex;\n justify-content: center;\n align-items: center;\n font: tokens.$ifxBodyBodySemibold04;\n min-width: tokens.$ifxSize700;\n height: tokens.$ifxSize700;\n border-radius: tokens.$ifxBorderRadiusRound;\n background: conic-gradient(tokens.$ifxColorOcean500 var(--pb, 0%), tokens.$ifxColorEngineering400 0);\n \n .progress-detail {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n width: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n height: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n border-radius: tokens.$ifxBorderRadiusRound;\n background: white;\n }\n}\n\n","import { h, \n Component, \n Element, \n Event, \n EventEmitter, \n Listen, \n Prop, \n State, \n Watch } from \"@stencil/core\";\nimport { StepperState } from \"./interfaces\";\n \n\n@Component({\n tag: 'ifx-stepper',\n styleUrl: 'stepper.scss',\n shadow: true\n})\n\nexport class Stepper {\n @Element() el: HTMLElement;\n\n @Event() ifxChange: EventEmitter;\n\n @Prop({ mutable: true }) activeStep: number = 1;\n @Prop() indicatorPosition?: 'left' | 'right' = 'left';\n @Prop() showStepNumber?: boolean = false;\n @Prop() variant?: 'default' | 'compact' | 'vertical' = 'default';\n\n\n @State() stepsCount: number;\n @State() shouldEmitEvent: boolean = true;\n @State() emittedByClick: boolean = false;\n\n @Listen('ifxChange') \n onStepChange(event: CustomEvent) {\n const steps = this.getSteps();\n const previousActiveStep = steps[event.detail.previousActiveStep-1];\n if (previousActiveStep && !previousActiveStep.complete) {\n previousActiveStep.setAttribute('error', 'true');\n }\n } \n\n @Watch('activeStep')\n handleActiveStep(newStep: number, oldStep: number) {\n const steps = this.getSteps();\n if (!this.shouldEmitEvent) {\n this.shouldEmitEvent = true;\n return;\n }\n // Skipping until the enabled step is found \n if(steps[newStep-1]) { \n if (!steps[newStep-1].disabled) {\n this.emitIfxChange(newStep, oldStep);\n } else {\n // If coming from higher step number to the lower step number\n if (newStep < oldStep) {\n let i = newStep;\n this.shouldEmitEvent = false;\n while (i >= 1 && steps[i-1].disabled) i--;\n // if all the steps are disabled no change.\n if (i < 1) {\n this.activeStep = oldStep;\n } else {\n this.emitIfxChange(i, oldStep);\n this.activeStep = i;\n }\n } \n // If coming from lower step number to the higher step number\n else {\n let i = newStep;\n this.shouldEmitEvent = false;\n while (i <= this.stepsCount && steps[i-1].disabled) i++;\n if (i > this.stepsCount) {\n this.activeStep = oldStep;\n } else {\n this.emitIfxChange(i, oldStep);\n this.activeStep = i;\n }\n }\n }\n }\n }\n \n emitIfxChange(activeStep: number, previousActiveStep: number) {\n this.ifxChange.emit({activeStep: activeStep, \n previousActiveStep: previousActiveStep, \n totalSteps: this.stepsCount,\n emittedByClick: this.emittedByClick\n });\n this.emittedByClick = false;\n }\n\n getSteps() {\n const steps: NodeListOf<HTMLIfxStepElement> = this.el.querySelectorAll('ifx-step');\n return steps;\n }\n\n\n addStepIdsToStepsAndCountSteps() {\n const steps = this.getSteps()\n steps[steps.length - 1].lastStep = true;\n for (let i = 0; i < steps.length; i++) {\n steps[i].stepId = i + 1;\n }\n this.stepsCount = steps.length;\n }\n\n\n setActiveStep(stepId: number, setByClick: boolean = false) {\n this.emittedByClick = setByClick;\n this.activeStep = stepId;\n }\n\n setStepsBeforeActiveToComplete() {\n const steps = this.getSteps();\n steps.forEach( (step, stepId) => {\n if (stepId+1 < this.activeStep) step.complete = true;\n });\n }\n\n syncIfxSteps() {\n const steps = this.getSteps()\n for (let i = 0; i < steps.length; i++) {\n const stepperState: StepperState = { \n activeStep: this.activeStep,\n indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'), \n showStepNumber: this.showStepNumber, \n variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant), \n setActiveStep: this.setActiveStep.bind(this)\n };\n steps[i].stepperState = stepperState;\n }\n }\n\n setInitialActiveStep() {\n this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));\n }\n\n\n componentWillLoad() {\n this.addStepIdsToStepsAndCountSteps();\n this.setInitialActiveStep();\n this.setStepsBeforeActiveToComplete();\n }\n \n componentDidLoad() {\n this.syncIfxSteps();\n }\n\n componentWillUpdate() {\n this.syncIfxSteps();\n }\n\n render() {\n return (\n <div aria-label = 'a stepper' \n role = 'navigation' \n class = {`stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-'+this.indicatorPosition: ''}`}>\n {\n /* Progress bar for compact variant. */\n (this.variant === 'compact') && \n <div class = 'stepper-progress'>\n <div class = 'progress-detail'>\n {`${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`}\n </div>\n </div>\n }\n \n {/* Slot for ifx-steps. */}\n <div class = {`stepper-wrapper`}>\n <slot />\n </div>\n </div>\n );\n };\n\n componentDidRender() {\n /* Updating progress bar in compact version. */\n if (this.variant == 'compact') {\n const progressBar: HTMLElement = this.el.shadowRoot.querySelector('.stepper-progress');\n progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) * 100}%`);\n }\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAa,m6BACnB,MAAAC,EAAeD,E,MCiBFE,EAAO,MANpB,WAAAC,CAAAC,G,+CAW6BC,KAAAC,WAAqB,EACtCD,KAAAE,kBAAuC,OACvCF,KAAAG,eAA2B,MAC3BH,KAAAI,QAA+C,UAI9CJ,KAAAK,gBAA2B,KAC3BL,KAAAM,eAA0B,K,CAGnC,YAAAC,CAAaC,GACT,MAAMC,EAAQT,KAAKU,WACnB,MAAMC,EAAqBF,EAAMD,EAAMI,OAAOD,mBAAmB,GACjE,GAAIA,IAAuBA,EAAmBE,SAAU,CACpDF,EAAmBG,aAAa,QAAS,O,EAKjD,gBAAAC,CAAiBC,EAAiBC,GAC9B,MAAMR,EAAQT,KAAKU,WACnB,IAAKV,KAAKK,gBAAiB,CACvBL,KAAKK,gBAAkB,KACvB,M,CAGJ,GAAGI,EAAMO,EAAQ,GAAI,CACjB,IAAKP,EAAMO,EAAQ,GAAGE,SAAU,CAC5BlB,KAAKmB,cAAcH,EAASC,E,KACzB,CAEH,GAAID,EAAUC,EAAS,CACnB,IAAIG,EAAIJ,EACRhB,KAAKK,gBAAkB,MACvB,MAAOe,GAAK,GAAKX,EAAMW,EAAE,GAAGF,SAAUE,IAEtC,GAAIA,EAAI,EAAG,CACPpB,KAAKC,WAAagB,C,KACf,CACHjB,KAAKmB,cAAcC,EAAGH,GACtBjB,KAAKC,WAAamB,C,MAIrB,CACD,IAAIA,EAAIJ,EACRhB,KAAKK,gBAAkB,MACvB,MAAOe,GAAKpB,KAAKqB,YAAcZ,EAAMW,EAAE,GAAGF,SAAUE,IACpD,GAAIA,EAAIpB,KAAKqB,WAAY,CACrBrB,KAAKC,WAAagB,C,KACf,CACHjB,KAAKmB,cAAcC,EAAGH,GACtBjB,KAAKC,WAAamB,C,KAOtC,aAAAD,CAAclB,EAAoBU,GAC9BX,KAAKsB,UAAUC,KAAK,CAACtB,WAAYA,EAC7BU,mBAAoBA,EACpBa,WAAYxB,KAAKqB,WACjBf,eAAgBN,KAAKM,iBAEzBN,KAAKM,eAAiB,K,CAG1B,QAAAI,GACI,MAAMD,EAAwCT,KAAKyB,GAAGC,iBAAiB,YACvE,OAAOjB,C,CAIX,8BAAAkB,GACI,MAAMlB,EAAQT,KAAKU,WACnBD,EAAMA,EAAMmB,OAAS,GAAGC,SAAW,KACnC,IAAK,IAAIT,EAAI,EAAGA,EAAIX,EAAMmB,OAAQR,IAAK,CACnCX,EAAMW,GAAGU,OAASV,EAAI,C,CAE1BpB,KAAKqB,WAAaZ,EAAMmB,M,CAI5B,aAAAG,CAAcD,EAAgBE,EAAsB,OAChDhC,KAAKM,eAAiB0B,EACtBhC,KAAKC,WAAa6B,C,CAGtB,8BAAAG,GACI,MAAMxB,EAAQT,KAAKU,WACnBD,EAAMyB,SAAS,CAACC,EAAML,KAClB,GAAIA,EAAO,EAAI9B,KAAKC,WAAYkC,EAAKtB,SAAW,IAAI,G,CAI5D,YAAAuB,GACI,MAAM3B,EAAQT,KAAKU,WACnB,IAAK,IAAIU,EAAI,EAAGA,EAAIX,EAAMmB,OAAQR,IAAK,CACnC,MAAMiB,EAA6B,CAC/BpC,WAAYD,KAAKC,WACjBC,kBAAoBF,KAAKE,oBAAsB,QAAU,OAAS,QAClEC,eAAgBH,KAAKG,eACrBC,QAAWJ,KAAKI,UAAY,WAAaJ,KAAKI,UAAY,WAAc,UAAYJ,KAAKI,QACzF2B,cAAe/B,KAAK+B,cAAcO,KAAKtC,OAE3CS,EAAMW,GAAGiB,aAAeA,C,EAIhC,oBAAAE,GACIvC,KAAKC,WAAauC,KAAKC,IAAI,EAAGD,KAAKE,IAAI1C,KAAKqB,YAAcrB,KAAKI,UAAY,UAAY,EAAI,GAAIJ,KAAKC,Y,CAIxG,iBAAA0C,GACI3C,KAAK2B,iCACL3B,KAAKuC,uBACLvC,KAAKiC,gC,CAGT,gBAAAW,GACI5C,KAAKoC,c,CAGT,mBAAAS,GACI7C,KAAKoC,c,CAGT,MAAAU,GACI,OACIC,EAAA,OAAAC,IAAA,wDAAkB,YACdC,KAAO,aACPC,MAAS,WAAYlD,KAAKI,UAAY,WAAaJ,KAAKI,UAAY,WAAc,UAAYJ,KAAKI,WAAWJ,KAAKI,UAAY,UAAY,WAAWJ,KAAKE,kBAAmB,MAGzKF,KAAKI,UAAY,WAClB2C,EAAA,OAAAC,IAAA,2CAAKE,MAAQ,oBACTH,EAAA,OAAAC,IAAA,2CAAKE,MAAQ,mBACR,GAAGV,KAAKE,IAAI1C,KAAKC,WAAYD,KAAKqB,kBAAkBrB,KAAKqB,eAMtE0B,EAAA,OAAAC,IAAA,2CAAKE,MAAS,mBACVH,EAAA,QAAAC,IAAA,8C,CAMhB,kBAAAG,GAEI,GAAInD,KAAKI,SAAW,UAAW,CAC3B,MAAMgD,EAA2BpD,KAAKyB,GAAG4B,WAAWC,cAAc,qBAClEF,EAAYG,MAAMC,YAAY,OAAQ,GAAIxD,KAAKC,WAAcD,KAAe,WAAK,O","ignoreList":[]}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as a,h as e,a as r,g as o}from"./p-b7a462e5.js";const d=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:1px solid #EEEDED;border-radius:1px;width:350px;height:auto;font-family:var(--ifx-font-family)}.card:has(.card-href:focus),.card:has(.card-href:hover){outline:none;border-color:#0A8276}.card:has(.card-href:focus) ::slotted(ifx-card-headline),.card:has(.card-href:hover) ::slotted(ifx-card-headline){color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card .card-href:focus{outline:none}';const i=d;const t=class{constructor(e){a(this,e);this.direction="vertical";this.href="";this.internalHref="";this.target="_self"}setImgPosition(a){this.alignment=a.detail}handleComponentAdjustment(){const a=this.el.querySelector("ifx-card-image");const e=this.el.querySelector("ifx-card-links");if(!a){this.noImg=true}else this.noImg=false;if(!e){this.noBtns=true}else this.noBtns=false;if(this.href.trim()===""){this.internalHref=undefined}else this.internalHref=this.href}handleClassList(a,e,r){a.classList[e](r)}componentWillLoad(){this.handleComponentAdjustment()}componentWillUpdate(){this.handleComponentAdjustment()}render(){return e(r,{key:"aac222aafe681f2024929060a46f5b044b65e772"},e("div",{key:"9c2f93b40bad857af634c16a9a0459763fada288","aria-label":this.ariaLabel,class:`card \n ${this.noBtns?"noBtns":""}\n ${this.direction} \n ${this.alignment}`,role:"region"},this.direction==="horizontal"&&e("div",{key:"a9ecc08c4a5f7c2f7830256e289f485f6422160a",class:"horizontal"},e("a",{key:"09b1ebffcb703fe8c72224575dd5fe172b741533",class:`card-img ${this.noImg?"noImage":""} ${this.internalHref?"card-href":""}`,href:this.internalHref},e("slot",{key:"1e7bf2700feecf9e35a2aed787f476317252413e",name:"img"})),e("div",{key:"15dda4cdf697bd72673fecc3ad939d30136ca82f",class:"lower__body-wrapper"},e("a",{key:"6a20bfbed8fb327cb8f2df9caa7197966362a98f",class:`upper-body ${this.internalHref?"card-href":""}`,href:this.internalHref},e("slot",{key:"a8d8aa70a1ec0e06f6dcea7e34cab24563465d50"})),e("div",{key:"70697a5b69ba9588cd6d81fcdf47cb59d3537461"},e("slot",{key:"186152dfa577d47b1edf242a27044de3470f8ae5",name:"buttons"})))),this.direction==="vertical"&&e("div",{key:"7e213f66b9c1ce9d0ab67623a3c125783dd0035b",class:"vertical"},e("a",{key:"3431f72726f0e0019f3dd67fb3290c7003c22ed4",class:`upper__body-wrapper ${this.internalHref?"card-href":""}`,href:this.internalHref,target:this.target},e("div",{key:"1ec3dcd109dda21e13aa45ca679159f5b7b6e91d",class:`card-img ${this.noImg?"noImage":""}`},e("slot",{key:"64a6aae3e828e1741fd55d6fc8b53de5fbf5b3b9",name:"img"})),e("div",{key:"128d6712a7792d33ad77c3761aa3a9c4702cbd49",class:"upper-body"},e("slot",{key:"8e8ea25bfb8409692b0579393045a0f5e117e0f3"}))),e("div",{key:"5989e1234a290faf4e1676dc53a5c009eb1e35b4",class:"lower__body-wrapper"},e("slot",{key:"c06013bd5b0db5b8b40251bf6a2960d60205f2a0",name:"buttons"})))))}get el(){return o(this)}};t.style=i;export{t as ifx_card};
|
2
|
+
//# sourceMappingURL=p-6790d912.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["cardCss","IfxCardStyle0","Card","constructor","hostRef","this","direction","href","internalHref","target","setImgPosition","event","alignment","detail","handleComponentAdjustment","image","el","querySelector","links","noImg","noBtns","trim","undefined","handleClassList","type","className","classList","componentWillLoad","componentWillUpdate","render","h","Host","key","ariaLabel","class","role","name"],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.card {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n word-wrap: break-word;\n background-color: tokens.$ifxColorBaseWhite;\n background-clip: border-box;\n border: 1px solid tokens.$ifxColorEngineering200;\n border-radius: 1px;\n //width: 22rem;\n width: 350px;\n height: auto;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n // when the link is focused or hovered, the border color changes\n &:has(.card-href:focus), &:has(.card-href:hover) {\n outline: none;\n border-color: tokens.$ifxColorOcean500;\n\n ::slotted(ifx-card-headline) {\n color: tokens.$ifxColorOcean500;\n }\n }\n\n &.noBtns {\n & .vertical {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n\n & .horizontal {\n & .lower__body-wrapper {\n padding-bottom: 24px;\n }\n }\n }\n\n & .horizontal {\n display: flex;\n flex-direction: row;\n min-height: 218px;\n\n & .card-img {\n flex: 1;\n text-decoration: none;\n\n &.noImage {\n display: none;\n }\n\n & ::slotted([slot=img]) {\n width: 100%;\n vertical-align: bottom;\n }\n }\n\n & .lower__body-wrapper {\n flex: 1;\n display: grid;\n grid-template-rows: 1fr auto;\n\n & .upper-body {\n display: flex;\n flex-direction: column;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n padding: 24px 24px 0px 24px;\n }\n }\n }\n\n & .vertical {\n & .upper__body-wrapper {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n\n & .card-img {\n height: 190px;\n\n &.noImage {\n display: none;\n }\n }\n\n & .upper-body {\n padding: 24px 24px 0px 24px;\n }\n }\n\n & .lower__body-wrapper {\n &:hover {\n border-color: tokens.$ifxColorEngineering200;\n }\n }\n }\n\n &.horizontal {\n flex-direction: row;\n width: 538px;\n\n & .card-img {\n flex: 1;\n order: 2;\n\n & ::slotted([slot=img]) {\n width: 100%;\n height: 100%;\n vertical-align: bottom;\n object-fit: cover;\n }\n }\n\n &.left {\n & .horizontal {\n & .card-img {\n order: 1;\n }\n\n & .lower__body-wrapper {\n order: 2;\n }\n }\n }\n }\n\n & .card-href:focus {\n outline: none;\n }\n}","import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\n \n\n@Component({\n tag: 'ifx-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\n\nexport class Card {\n @Element() el;\n @State() noBtns: boolean;\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @State() alignment: string;\n @State() noImg: boolean;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\"\n @Prop() target: string = \"_self\";\n @Prop() ariaLabel: string | null;\n\n @Listen('imgPosition')\n setImgPosition(event) {\n this.alignment = event.detail\n }\n\n handleComponentAdjustment() {\n const image = this.el.querySelector('ifx-card-image')\n const links = this.el.querySelector('ifx-card-links')\n\n if (!image) {\n this.noImg = true;\n } else this.noImg = false;\n\n if (!links) {\n this.noBtns = true;\n } else this.noBtns = false;\n\n if (this.href.trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n }\n\n\n componentWillLoad() {\n this.handleComponentAdjustment()\n }\n\n componentWillUpdate() {\n this.handleComponentAdjustment()\n }\n\nrender() {\n return (\n <Host>\n <div aria-label={this.ariaLabel} class={\n `card \n ${this.noBtns ? 'noBtns' : \"\"}\n ${this.direction} \n ${this.alignment}`\n }\n role=\"region\">\n\n {this.direction === 'horizontal' &&\n <div class=\"horizontal\">\n <a class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n <slot name=\"img\" />\n </a>\n\n <div class='lower__body-wrapper'>\n <a class={`upper-body ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n <slot />\n </a>\n <div>\n <slot name='buttons' />\n </div>\n </div>\n </div>}\n\n {this.direction === 'vertical' &&\n <div class=\"vertical\">\n <a class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref} target={this.target}>\n <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n <slot name=\"img\" />\n </div>\n\n <div class='upper-body'>\n <slot />\n </div>\n </a>\n\n <div class='lower__body-wrapper'>\n <slot name='buttons' />\n </div>\n </div>}\n </div>\n </Host>\n );\n }\n}"],"mappings":"yDAAA,MAAMA,EAAU,q0DAChB,MAAAC,EAAeD,E,MCQFE,EAAI,MANjB,WAAAC,CAAAC,G,UASUC,KAAAC,UAAuC,WAGvCD,KAAAE,KAAe,GACdF,KAAAG,aAAuB,GACxBH,KAAAI,OAAiB,O,CAIzB,cAAAC,CAAeC,GACbN,KAAKO,UAAYD,EAAME,M,CAGzB,yBAAAC,GACE,MAAMC,EAAQV,KAAKW,GAAGC,cAAc,kBACpC,MAAMC,EAAQb,KAAKW,GAAGC,cAAc,kBAEpC,IAAKF,EAAO,CACVV,KAAKc,MAAQ,I,MACRd,KAAKc,MAAQ,MAEpB,IAAKD,EAAO,CACVb,KAAKe,OAAS,I,MACTf,KAAKe,OAAS,MAErB,GAAIf,KAAKE,KAAKc,SAAW,GAAI,CAC3BhB,KAAKG,aAAec,S,MACfjB,KAAKG,aAAeH,KAAKE,I,CAGlC,eAAAgB,CAAgBP,EAAIQ,EAAMC,GACxBT,EAAGU,UAAUF,GAAMC,E,CAIrB,iBAAAE,GACEtB,KAAKS,2B,CAGP,mBAAAc,GACEvB,KAAKS,2B,CAGT,MAAAe,GACI,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,wDAAiB3B,KAAK4B,UAAWC,MAC/B,oBACE7B,KAAKe,OAAS,SAAW,iBACzBf,KAAKC,yBACLD,KAAKO,YAETuB,KAAK,UAEF9B,KAAKC,YAAc,cAClBwB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,cACTJ,EAAA,KAAAE,IAAA,2CAAGE,MAAO,YAAY7B,KAAKc,MAAQ,UAAY,MAAMd,KAAKG,aAAe,YAAc,KAAMD,KAAMF,KAAKG,cACtGsB,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SAGbN,EAAA,OAAAE,IAAA,2CAAKE,MAAM,uBACTJ,EAAA,KAAAE,IAAA,2CAAGE,MAAO,cAAc7B,KAAKG,aAAe,YAAc,KAAMD,KAAMF,KAAKG,cACzEsB,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMI,KAAK,eAKlB/B,KAAKC,YAAc,YAClBwB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,YACTJ,EAAA,KAAAE,IAAA,2CAAGE,MAAO,uBAAuB7B,KAAKG,aAAe,YAAc,KAAMD,KAAMF,KAAKG,aAAcC,OAAQJ,KAAKI,QAC7GqB,EAAA,OAAAE,IAAA,2CAAKE,MAAO,YAAY7B,KAAKc,MAAQ,UAAY,MAC/CW,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SAGbN,EAAA,OAAAE,IAAA,2CAAKE,MAAM,cACTJ,EAAA,QAAAE,IAAA,+CAIJF,EAAA,OAAAE,IAAA,2CAAKE,MAAM,uBACTJ,EAAA,QAAAE,IAAA,2CAAMI,KAAK,e","ignoreList":[]}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as i,c as e,h as s,g as t}from"./p-b7a462e5.js";const l=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{font-family:var(--ifx-font-family, sans-serif)}.file-upload-wrapper{display:flex;flex-direction:column}.file-upload-wrapper.disabled{pointer-events:none}.file-upload-wrapper.disabled label,.file-upload-wrapper.disabled .file-upload-info{color:#575352}.file-upload-label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;color:#1D1D1D}.file-upload-label .required{display:inline-block;margin-left:4px}.file-upload-label .required.error{color:#CD002F}.upload-dropzone{border:1px dashed #BFBBBB;padding:40px;text-align:center;cursor:pointer;color:#1D1D1D;transition:border-color 0.3s ease;border-radius:1px;background:#FFFFFF}.upload-dropzone ifx-icon{color:#0A8276}.upload-dropzone:hover{border:1px dashed #8D8786}.upload-dropzone.drag-over{border:1px solid #0A8276;background:#F7F7F7}.upload-dropzone.drag-over.error{border:1px solid #0A8276}.upload-dropzone.error{border-color:#CD002F}.disabled .upload-dropzone{pointer-events:none;border-color:#BFBBBB;color:#BFBBBB}.disabled .upload-dropzone ifx-icon{color:#BFBBBB}.upload-dropzone input{display:none}.file-upload-info{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0em;color:#1D1D1D;margin:0;margin-top:4px}.file-upload-status{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0.2px;margin-top:8px}.file-upload-status.file-upload-status__error{display:flex;align-items:center;color:#CD002F}.file-upload-status.file-upload-status__error ifx-icon{position:relative;top:-1px;color:#CD002F;margin-right:8px}.upload-heading{font:600 1.125rem/1.625rem "Source Sans 3";margin-bottom:8px}.file-list-wrapper{margin-top:16px}.file-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}.file-item{border:1px solid #BFBBBB;padding-top:12px;padding-right:16px;padding-bottom:8px;padding-left:16px;display:flex;gap:8px}.file-info{width:100%;min-width:0}.file-top-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:-8px}.file-top-row ifx-icon{flex-shrink:0}.file-name-wrapper{display:flex;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;font-weight:400;font-size:0.875rem}.file-name-base{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.file-name-ext{flex-shrink:0;margin-left:0}.file-middle-row{display:flex;align-items:center;font-size:0.75rem;line-height:1rem;flex-wrap:wrap;color:#575352}.file-middle-row .file-status{margin-left:12px}.file-middle-row .file-status ifx-icon{margin-right:8px}.file-progress-row{margin-top:4px}.file-progress-row ifx-progress-bar{width:100%}.upload-success{border-color:#0A8276}.upload-success .file-status ifx-icon{position:relative;top:1px;color:#4CA460}.upload-failed{border-color:#CD002F}.upload-failed .file-status{color:#CD002F;margin-left:0}';const a=l;const o=class{constructor(s){i(this,s);this.ifxFileUploadAdd=e(this,"ifxFileUploadAdd",7);this.ifxFileUploadRemove=e(this,"ifxFileUploadRemove",7);this.ifxFileUploadChange=e(this,"ifxFileUploadChange",7);this.ifxFileUploadError=e(this,"ifxFileUploadError",7);this.ifxFileUploadInvalid=e(this,"ifxFileUploadInvalid",7);this.ifxFileUploadStart=e(this,"ifxFileUploadStart",7);this.ifxFileUploadComplete=e(this,"ifxFileUploadComplete",7);this.ifxFileUploadAllComplete=e(this,"ifxFileUploadAllComplete",7);this.ifxFileUploadAbort=e(this,"ifxFileUploadAbort",7);this.ifxFileUploadDrop=e(this,"ifxFileUploadDrop",7);this.ifxFileUploadClick=e(this,"ifxFileUploadClick",7);this.ifxFileUploadMaxFilesExceeded=e(this,"ifxFileUploadMaxFilesExceeded",7);this.ifxFileUploadValidation=e(this,"ifxFileUploadValidation",7);this.ifxFileUploadRetry=e(this,"ifxFileUploadRetry",7);this.dragAndDrop=false;this.required=false;this.disabled=false;this.maxFileSizeMB=7;this.allowedFileTypes=["jpg","jpeg","png","pdf","mov","mp3","mp4"];this.additionalAllowedFileTypes=[];this.label="Label";this.labelRequiredError="At least one file must be uploaded";this.labelBrowseFiles="Browse files";this.labelDragAndDrop="Drag & Drop or browse files to upload";this.labelUploadedFilesHeading="Uploaded files";this.labelFileTooLarge="Upload failed. Max file size: {{size}}MB.";this.labelUnsupportedFileType="Unsupported file type.";this.labelUploaded="Successfully uploaded";this.labelUploadFailed="Upload failed. Please try again.";this.labelSupportedFormatsTemplate="Supported file formats: {{types}}. Max file size: {{size}}MB.";this.labelFileSingular="file";this.labelFilePlural="files";this.labelMaxFilesInfo="Up to {{count}} {{files}}.";this.labelMaxFilesExceeded="Upload limit exceeded. Only {{count}} {{files}} allowed.";this.ariaLabelBrowseFiles="Browse files";this.ariaLabelDropzone="Upload area. Click to browse or drag and drop files.";this.ariaLabelFileInput="Upload file";this.ariaLabelRemoveFile="Remove file";this.ariaLabelCancelUpload="Cancel upload";this.ariaLabelRetryUpload="Retry upload";this.ariaLabelUploadingStatus="Upload in progress";this.ariaLabelUploadedStatus="Upload completed";this.ariaLabelUploadFailedStatus="Upload failed";this.internalId=`ifx-file-upload-${Math.random().toString(36).substr(2,9)}`;this.isDragOver=false;this.files=[];this.uploadTasks=[];this.rejectedSizeFiles=[];this.rejectedTypeFiles=[];this.requiredError=false;this.statusMessage=null;this.fileInputEl=null;this.extensionToMimeMap={jpg:"image/jpeg",jpeg:"image/jpeg",png:"image/png",gif:"image/gif",svg:"image/svg+xml",webp:"image/webp",pdf:"application/pdf",doc:"application/msword",docx:"application/vnd.openxmlformats-officedocument.wordprocessingml.document",xls:"application/vnd.ms-excel",xlsx:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",ppt:"application/vnd.ms-powerpoint",pptx:"application/vnd.openxmlformats-officedocument.presentationml.presentation",txt:"text/plain",csv:"text/csv",json:"application/json",mp3:"audio/mpeg",wav:"audio/wav",mp4:"video/mp4",mov:"video/quicktime",webm:"video/webm",zip:"application/zip",rar:"application/vnd.rar",tar:"application/x-tar",gz:"application/gzip",xml:"application/xml",html:"text/html",css:"text/css",js:"application/javascript"}}get maxFiles(){return this._maxFiles}set maxFiles(i){if(typeof i==="number"&&i<1){console.warn("Invalid `maxFiles` value. Must be >= 1. Value ignored.");this._maxFiles=undefined}else{this._maxFiles=i}}validateRequired(){var i,e;if(this.required&&this.files.length===0){this.requiredError=true;if(((i=this.statusMessage)===null||i===void 0?void 0:i.text)!==this.labelRequiredError){this.statusMessage={type:"error",text:this.labelRequiredError}}this.ifxFileUploadValidation.emit({valid:false})}else{this.requiredError=false;if(((e=this.statusMessage)===null||e===void 0?void 0:e.text)===this.labelRequiredError){this.statusMessage=null}this.ifxFileUploadValidation.emit({valid:true})}}pluralize(i){return i===1?this.labelFileSingular:this.labelFilePlural}getNormalizedFileTypes(){if(Array.isArray(this.allowedFileTypes)){return this.allowedFileTypes}try{return JSON.parse(this.allowedFileTypes)}catch(i){return this.allowedFileTypes.split(",").map((i=>i.trim()))}}getLabelFromMimeType(i){for(const[e,s]of Object.entries(this.extensionToMimeMap)){if(s===i){return e.toUpperCase()}}return i}handleFileChange(i){const e=i.target;if(!e.files)return;this.processFiles(e.files)}handleDrop(i){var e;if(this.disabled)return;i.preventDefault();i.stopPropagation();this.isDragOver=false;if((e=i.dataTransfer)===null||e===void 0?void 0:e.files){const e=Array.from(i.dataTransfer.files);const s=[...this.getNormalizedFileTypes().map((i=>this.extensionToMimeMap[i.toLowerCase()])).filter(Boolean),...this.getAdditionalMimeTypes()];const t=[];const l=[];e.forEach((i=>{const e=s.includes(i.type);const a=i.size<=this.maxFileSizeMB*1024*1024;if(e&&a)t.push(i);else l.push(i)}));this.ifxFileUploadDrop.emit({droppedFiles:e,acceptedFiles:t,rejectedFiles:l});this.processFiles(i.dataTransfer.files)}}handleDragOver(i){if(this.disabled)return;i.preventDefault();this.isDragOver=true}handleDragLeave(i){if(this.disabled)return;i.preventDefault();this.isDragOver=false}processFiles(i){const e=Array.from(i);const s=[...this.getNormalizedFileTypes().map((i=>this.extensionToMimeMap[i.toLowerCase()])).filter(Boolean),...this.getAdditionalMimeTypes()];const t=[];const l=[];const a=[];e.forEach((i=>{const e=s.includes(i.type);const o=i.size<=this.maxFileSizeMB*1024*1024;const r=this.files.some((e=>e.name===i.name&&e.size===i.size));if(r){this.ifxFileUploadInvalid.emit({file:i,reason:"duplicate"});this.ifxFileUploadError.emit({file:i,errorType:"duplicate",message:`File "${i.name}" is already added`,reason:"duplicate"});return}if(e&&o){t.push(i)}else{if(!e){a.push(i.name);this.ifxFileUploadInvalid.emit({file:i,reason:"invalid-type"})}if(!o){l.push(i.name);this.ifxFileUploadInvalid.emit({file:i,reason:"invalid-size"})}this.ifxFileUploadError.emit({file:i,errorType:!e?"invalid-type":"file-too-large",message:"Invalid file rejected",reason:!e?"unsupported-type":"file-too-large"})}}));this.rejectedSizeFiles=[...this.rejectedSizeFiles,...l];this.rejectedTypeFiles=[...this.rejectedTypeFiles,...a];if(this.maxFiles&&this.files.length+t.length>this.maxFiles){const i=this.maxFiles-this.files.length;const e=t.slice(0,Math.max(i,0));const s=t.slice(i);this.files=[...this.files,...e];e.forEach((i=>this.startUpload(i)));if(e.length>0){this.ifxFileUploadAdd.emit({addedFiles:e,files:this.files});this.ifxFileUploadChange.emit({files:this.files})}s.forEach((i=>{this.ifxFileUploadInvalid.emit({file:i,reason:"too-many-files"});this.ifxFileUploadError.emit({file:i,errorType:"too-many-files",message:`Upload limit exceeded. Max ${this.maxFiles} files allowed.`,reason:"too-many-files"})}));if(s.length>0){this.statusMessage={type:"error",text:this.labelMaxFilesExceeded.replace("{{count}}",this.maxFiles.toString()).replace("{{files}}",this.pluralize(this.maxFiles))};this.ifxFileUploadMaxFilesExceeded.emit({maxFiles:this.maxFiles,attempted:this.files.length+t.length})}return}t.forEach((i=>this.startUpload(i)));this.files=[...this.files,...t];if(t.length>0){this.ifxFileUploadAdd.emit({addedFiles:t,files:this.files});this.ifxFileUploadChange.emit({files:this.files})}this.validateRequired()}retryUpload(i){const e=this.uploadTasks.findIndex((e=>e.file.name===i.name));if(e!==-1){this.uploadTasks.splice(e,1);this.uploadTasks=[...this.uploadTasks]}this.ifxFileUploadRetry.emit({file:i});this.startUpload(i)}startUpload(i){this.ifxFileUploadStart.emit({file:i});const e={file:i,progress:3,intervalId:null,completed:false};this.uploadTasks=[...this.uploadTasks,e];if(this.uploadHandler){this.uploadHandler(i,(i=>{if(i>e.progress){e.progress=Math.min(100,i);this.uploadTasks=[...this.uploadTasks]}})).then((()=>{e.progress=100;e.completed=true;this.uploadTasks=[...this.uploadTasks];this.ifxFileUploadComplete.emit({file:i});this.ifxFileUploadChange.emit({files:this.files});if(this.uploadTasks.every((i=>i.completed))){this.ifxFileUploadAllComplete.emit({files:this.files})}})).catch((()=>{e.error=true;this.uploadTasks=[...this.uploadTasks];this.ifxFileUploadError.emit({file:i,errorType:"upload-failed",message:"Upload handler rejected file",reason:"custom"})}))}else{const s=i.size;const t=1e5;let l=0;e.intervalId=window.setInterval((()=>{l+=t/5;const a=Math.min(100,Math.round(l/s*100));e.progress=a;this.uploadTasks=[...this.uploadTasks];if(a>=100){clearInterval(e.intervalId);e.completed=true;e.intervalId=null;this.uploadTasks=[...this.uploadTasks];this.ifxFileUploadComplete.emit({file:i});this.ifxFileUploadChange.emit({files:this.files});if(this.uploadTasks.every((i=>i.completed))){this.ifxFileUploadAllComplete.emit({files:this.files})}}}),200)}this.uploadTasks=[...this.uploadTasks,e]}cancelUpload(i){const e=this.uploadTasks.findIndex((e=>e.file.name===i.name));if(e!==-1){const i=this.uploadTasks[e];if((i===null||i===void 0?void 0:i.intervalId)!==null){clearInterval(i.intervalId)}this.uploadTasks=this.uploadTasks.filter(((i,s)=>s!==e))}this.files=this.files.filter((e=>e.name!==i.name));this.ifxFileUploadAbort.emit({file:i});this.ifxFileUploadChange.emit({files:this.files});if(this.fileInputEl){this.fileInputEl.value=""}this.validateRequired()}removeFile(i){var e;this.uploadTasks=this.uploadTasks.filter((e=>e.file.name!==i.name));this.files=this.files.filter((e=>e.name!==i.name));this.ifxFileUploadRemove.emit({removedFile:i,files:this.files});this.ifxFileUploadChange.emit({files:this.files});this.validateRequired();if(this.fileInputEl){this.fileInputEl.value=""}if(this.maxFiles&&this.files.length<this.maxFiles&&((e=this.statusMessage)===null||e===void 0?void 0:e.text)!==this.labelRequiredError){this.statusMessage=null}}clearRejectedFile(i,e){if(e==="size"){this.rejectedSizeFiles=this.rejectedSizeFiles.filter((e=>e!==i))}else{this.rejectedTypeFiles=this.rejectedTypeFiles.filter((e=>e!==i))}if(this.fileInputEl){this.fileInputEl.value=""}if(this.maxFiles&&this.files.length<this.maxFiles){this.statusMessage=null}this.validateRequired()}splitFileNameParts(i){const e=i.name;const s=e.lastIndexOf(".");if(s===-1)return{base:e,ext:""};return{base:e.substring(0,s),ext:e.substring(s)}}getFileIcon(i){var e;const s=(e=i.name.split(".").pop())===null||e===void 0?void 0:e.toLowerCase();switch(s){case"pdf":return"file-pdf-16";case"jpg":case"jpeg":return"file-jpg-16";case"png":return"file-png-16";case"mov":return"file-mov-16";case"mp3":return"file-mp3-16";case"mp4":return"file-mp4-16";default:return"file-16"}}formatSize(i){if(i>=1024*1024*1024){return`${(i/(1024*1024*1024)).toFixed(1)} GB`}else if(i>=1024*1024){return`${(i/(1024*1024)).toFixed(1)} MB`}else if(i>=1024){return`${(i/1024).toFixed(0)} KB`}else{return`${i} B`}}getAcceptAttribute(){const i=this.getNormalizedFileTypes().map((i=>"."+i.toLowerCase()));const e=this.getAdditionalMimeTypes();return[...i,...e].join(",")}getFormattedProgressText(i){const e=Math.round(i.progress/100*i.file.size);const s=this.formatSize(e);const t=this.formatSize(i.file.size);return`${s} / ${t} uploaded`}getAdditionalMimeTypes(){if(!this.additionalAllowedFileTypes)return[];if(Array.isArray(this.additionalAllowedFileTypes))return this.additionalAllowedFileTypes;return this.additionalAllowedFileTypes.split(",").map((i=>i.trim()))}getSupportedFileText(){const i=this.getNormalizedFileTypes().map((i=>i.toUpperCase()));const e=this.getAdditionalMimeTypes().map((i=>this.getLabelFromMimeType(i)));const s=[...i,...e];const t=s.join(", ");let l=this.labelSupportedFormatsTemplate.replace("{{types}}",t).replace("{{size}}",this.maxFileSizeMB.toString());if(this.labelMaxFilesInfo&&this.maxFiles){const i=this.pluralize(this.maxFiles);const e=this.labelMaxFilesInfo.replace("{{count}}",this.maxFiles.toString()).replace("{{files}}",i);l+=` ${e}`}return l}getFormattedFileTooLargeText(){return this.labelFileTooLarge.replace("{{size}}",this.maxFileSizeMB.toString())}renderStatusMessage(){if(!this.statusMessage)return null;return s("div",{class:`file-upload-status file-upload-status__${this.statusMessage.type}`},this.statusMessage.type==="error"&&s("ifx-icon",{icon:"c-warning-16"}),this.statusMessage.text)}isInputDisabled(){return this.disabled||this.maxFiles!==undefined&&this.files.length>=this.maxFiles}componentDidLoad(){if(this.hostElement.hasAttribute("show-demo-states")){this.showDemoStates=true}if(this.showDemoStates){this.injectDemoState()}}async injectDemoState(){const i=new Array(5e4).fill("a").join("");const e=i+i;const s=new File([i],"Image.jpg",{type:"image/jpeg"});const t=new File([e],"File.pdf",{type:"application/pdf"});const l=new File([i],"Text.docx",{type:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"});const a=new File([e+e+e],"Video.mp4",{type:"video/mp4"});const o=new File(["demo"],"Script.exe",{type:"application/x-msdownload"});this.files=[t,s,l];this.uploadTasks=[{file:t,progress:100,intervalId:null,completed:true},{file:s,progress:40,intervalId:null,completed:false},{file:l,progress:80,intervalId:null,completed:false,error:true}];this.rejectedSizeFiles=[a.name];this.rejectedTypeFiles=[o.name]}async triggerDemoValidation(){this.validateRequired()}render(){return s("div",{key:"f8edbd56edf372f509c97c7e162f9c247c91110d",class:{"file-upload-wrapper":true,disabled:this.disabled}},this.label&&s("label",{key:"9258dd4a34a28443665e798845cefe87ab471abb",class:"file-upload-label",htmlFor:this.internalId},this.label,this.required&&s("span",{key:"62e786769e41ddb7d412a22157e4504719ac3900",class:`required ${this.requiredError?"error":""}`},"*")),this.dragAndDrop?this.renderDragAndDropArea():this.renderUploadArea(),(this.files.length>0||this.rejectedSizeFiles.length>0||this.rejectedTypeFiles.length>0)&&s("div",{key:"f07d24d2f3cf47e44e244d85fede4d5c5a7ea4ff",class:"file-list-wrapper"},s("div",{key:"a2d6c4ce19e828d44dbf1f54e86d3964ad3cd442",class:"upload-heading"},this.labelUploadedFilesHeading),s("ul",{key:"2c76503b9c39be82596f869e46052762f6ab7ac1",class:"file-list"},this.rejectedSizeFiles.map((i=>s("li",{class:"file-item upload-failed",key:`rejected-size-${i}`},s("div",{class:"file-icon"},s("ifx-icon",{icon:"file-16"})),s("div",{class:"file-info"},s("div",{class:"file-top-row"},s("span",{class:"file-name-wrapper"},s("span",{class:"file-name-base"},this.splitFileNameParts({name:i}).base),s("span",{class:"file-name-ext"},this.splitFileNameParts({name:i}).ext)),s("div",{class:"file-actions"},s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"delete-forever-16",size:"s","aria-label":this.ariaLabelRemoveFile,onClick:()=>this.clearRejectedFile(i,"size")}))),s("div",{class:"file-middle-row"},s("span",{class:"file-status","aria-label":this.labelFileTooLarge.replace("{{size}}",this.maxFileSizeMB.toString())},this.getFormattedFileTooLargeText())))))),this.rejectedTypeFiles.map((i=>s("li",{class:"file-item upload-failed",key:`rejected-type-${i}`},s("div",{class:"file-icon"},s("ifx-icon",{icon:"file-16"})),s("div",{class:"file-info"},s("div",{class:"file-top-row"},s("span",{class:"file-name-wrapper"},s("span",{class:"file-name-base"},this.splitFileNameParts({name:i}).base),s("span",{class:"file-name-ext"},this.splitFileNameParts({name:i}).ext)),s("div",{class:"file-actions"},s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"delete-forever-16",size:"s","aria-label":this.ariaLabelRemoveFile,onClick:()=>this.clearRejectedFile(i,"type")}))),s("div",{class:"file-middle-row"},s("span",{class:"file-status","aria-label":this.labelUnsupportedFileType},this.labelUnsupportedFileType)))))),this.files.map((i=>{var e;const t=this.uploadTasks.find((e=>e.file.name===i.name));const l=(e=t===null||t===void 0?void 0:t.progress)!==null&&e!==void 0?e:100;const a=t&&!t.completed;const o=(t===null||t===void 0?void 0:t.error)===true;const r=o?"file-item upload-failed":a?"file-item uploading":"file-item upload-success";const n=`${i.name}-${i.size}`;const{base:h,ext:d}=this.splitFileNameParts(i);return s("li",{class:r,key:n},s("div",{class:"file-icon"},s("ifx-icon",{icon:this.getFileIcon(i)})),s("div",{class:"file-info"},s("div",{class:"file-top-row"},s("span",{class:"file-name-wrapper"},s("span",{class:"file-name-base"},h),s("span",{class:"file-name-ext"},d)),s("div",{class:"file-actions"},s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"refresh-16",size:"s","aria-label":this.ariaLabelRetryUpload,onClick:()=>this.retryUpload(i),style:{display:o?"inline-flex":"none"}}),s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"cross-16",size:"s","aria-label":this.ariaLabelCancelUpload,onClick:()=>this.cancelUpload(i),style:{display:a?"inline-flex":"none"}}),s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"delete-forever-16",size:"s","aria-label":this.ariaLabelRemoveFile,onClick:()=>this.removeFile(i),style:{display:!a?"inline-flex":"none"}}))),s("div",{class:"file-middle-row"},a&&t&&!t.error&&s("span",{class:"file-uploading","aria-label":this.ariaLabelUploadingStatus},this.getFormattedProgressText(t)),!a&&!o&&s("span",null,s("span",{class:"file-size"},this.formatSize(i.size)),s("span",{class:"file-status","aria-label":this.ariaLabelUploadedStatus},s("ifx-icon",{icon:"check-16"}),this.labelUploaded)),o&&s("span",{class:"file-status","aria-label":this.ariaLabelUploadFailedStatus},this.labelUploadFailed)),a&&t&&!t.error&&s("div",{class:"file-progress-row"},s("ifx-progress-bar",{size:"s",value:l,"show-label":"true"}))))})))))}renderUploadArea(){const i=i=>{this.fileInputEl=i};return s("div",{class:{"upload-button":true}},s("ifx-button",{variant:"secondary",onClick:()=>{var i;return(i=this.fileInputEl)===null||i===void 0?void 0:i.click()},disabled:this.isInputDisabled(),"aria-label":this.ariaLabelBrowseFiles},s("ifx-icon",{icon:"upload-16"}),this.labelBrowseFiles),s("input",{id:this.internalId,ref:i,type:"file",accept:this.getAcceptAttribute(),multiple:true,onChange:i=>this.handleFileChange(i),style:{display:"none"},disabled:this.isInputDisabled(),"aria-label":this.ariaLabelFileInput}),s("p",{class:"file-upload-info"},this.getSupportedFileText()),this.renderStatusMessage())}renderDragAndDropArea(){const i=i=>{this.fileInputEl=i};const e=()=>{if(this.fileInputEl){this.fileInputEl.click()}};return s("div",{class:{disabled:this.isInputDisabled()}},s("div",{class:{"upload-dropzone":true,"drag-over":this.isDragOver,error:this.requiredError},onClick:e,onDragOver:i=>this.handleDragOver(i),onDragLeave:i=>this.handleDragLeave(i),onDrop:i=>this.handleDrop(i),role:"button",tabIndex:0,"aria-label":this.ariaLabelDropzone},s("ifx-icon",{icon:"upload-16",class:"custom-icon"}),s("p",null,this.labelDragAndDrop),s("p",{class:"file-upload-info"},this.getSupportedFileText()),s("div",{style:{height:"0px",overflow:"hidden"}},s("input",{id:this.internalId,ref:i,type:"file",accept:this.getAcceptAttribute(),multiple:true,onChange:i=>this.handleFileChange(i),disabled:this.isInputDisabled(),"aria-label":this.ariaLabelFileInput}))),this.renderStatusMessage())}get hostElement(){return t(this)}};o.style=a;export{o as ifx_file_upload};
|
2
|
+
//# sourceMappingURL=p-6bdca580.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["fileUploadCss","IfxFileUploadStyle0","FileUpload","constructor","hostRef","this","dragAndDrop","required","disabled","maxFileSizeMB","allowedFileTypes","additionalAllowedFileTypes","label","labelRequiredError","labelBrowseFiles","labelDragAndDrop","labelUploadedFilesHeading","labelFileTooLarge","labelUnsupportedFileType","labelUploaded","labelUploadFailed","labelSupportedFormatsTemplate","labelFileSingular","labelFilePlural","labelMaxFilesInfo","labelMaxFilesExceeded","ariaLabelBrowseFiles","ariaLabelDropzone","ariaLabelFileInput","ariaLabelRemoveFile","ariaLabelCancelUpload","ariaLabelRetryUpload","ariaLabelUploadingStatus","ariaLabelUploadedStatus","ariaLabelUploadFailedStatus","internalId","Math","random","toString","substr","isDragOver","files","uploadTasks","rejectedSizeFiles","rejectedTypeFiles","requiredError","statusMessage","fileInputEl","extensionToMimeMap","jpg","jpeg","png","gif","svg","webp","pdf","doc","docx","xls","xlsx","ppt","pptx","txt","csv","json","mp3","wav","mp4","mov","webm","zip","rar","tar","gz","xml","html","css","js","maxFiles","_maxFiles","value","console","warn","undefined","validateRequired","length","_a","text","type","ifxFileUploadValidation","emit","valid","_b","pluralize","count","getNormalizedFileTypes","Array","isArray","JSON","parse","split","map","t","trim","getLabelFromMimeType","mime","ext","knownMime","Object","entries","toUpperCase","handleFileChange","event","input","target","processFiles","handleDrop","preventDefault","stopPropagation","dataTransfer","droppedFiles","from","allowedMimes","toLowerCase","filter","Boolean","getAdditionalMimeTypes","acceptedFiles","rejectedFiles","forEach","file","isValidType","includes","isValidSize","size","push","ifxFileUploadDrop","handleDragOver","handleDragLeave","fileList","selectedFiles","validFiles","rejectedSize","rejectedType","isDuplicate","some","existing","name","ifxFileUploadInvalid","reason","ifxFileUploadError","errorType","message","availableSlots","limitedFiles","slice","max","overflowFiles","startUpload","ifxFileUploadAdd","addedFiles","ifxFileUploadChange","replace","ifxFileUploadMaxFilesExceeded","attempted","retryUpload","taskIndex","findIndex","splice","ifxFileUploadRetry","ifxFileUploadStart","task","progress","intervalId","completed","uploadHandler","percent","min","then","ifxFileUploadComplete","every","ifxFileUploadAllComplete","catch","error","totalSize","fakeUploadSpeed","uploaded","window","setInterval","round","clearInterval","cancelUpload","_","i","f","ifxFileUploadAbort","removeFile","ifxFileUploadRemove","removedFile","clearRejectedFile","fileName","splitFileNameParts","dotIndex","lastIndexOf","base","substring","getFileIcon","extension","pop","formatSize","bytes","toFixed","getAcceptAttribute","extensionTypes","mimeTypes","join","getFormattedProgressText","uploadedSize","uploadedText","totalText","getSupportedFileText","extensions","allTypes","typesLabel","fileWord","maxFilesText","getFormattedFileTooLargeText","renderStatusMessage","h","class","icon","isInputDisabled","componentDidLoad","hostElement","hasAttribute","showDemoStates","injectDemoState","dummyContent","fill","bigContent","uploading","File","failed","tooLarge","unsupported","triggerDemoValidation","render","key","htmlFor","renderDragAndDropArea","renderUploadArea","shape","variant","onClick","find","isUploading","isError","itemClass","uniqueKey","style","display","handleInputRef","el","click","id","ref","accept","multiple","onChange","e","triggerInputClick","onDragOver","onDragLeave","onDrop","role","tabIndex","height","overflow"],"sources":["src/components/file-upload/file-upload.scss?tag=ifx-file-upload&encapsulation=shadow","src/components/file-upload/file-upload.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n // TODO remove\n font-family: var(--ifx-font-family, sans-serif);\n}\n\n.file-upload-wrapper {\n display: flex;\n flex-direction: column;\n\n &.disabled {\n pointer-events: none;\n\n label,\n .file-upload-info {\n color: tokens.$ifxColorEngineering500;\n }\n }\n}\n\n.file-upload-label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n color: tokens.$ifxColorBaseBlack;\n\n .required {\n display: inline-block;\n margin-left: 4px;\n\n &.error {\n color: tokens.$ifxColorRed500;\n }\n }\n}\n\n.upload-dropzone {\n border: 1px dashed tokens.$ifxColorEngineering300;\n padding: tokens.$ifxSpace500;\n text-align: center;\n cursor: pointer;\n color: tokens.$ifxColorBaseBlack;\n transition: border-color 0.3s ease;\n border-radius: tokens.$ifxBorderRadius12;\n background: tokens.$ifxColorBaseWhite;\n\n ifx-icon {\n color: tokens.$ifxColorOcean500;\n }\n\n &:hover {\n border: 1px dashed tokens.$ifxColorEngineering400;\n }\n\n &.drag-over {\n border: 1px solid tokens.$ifxColorOcean500;\n background: tokens.$ifxColorEngineering100;\n\n &.error {\n border: 1px solid tokens.$ifxColorOcean500;\n }\n }\n\n &.error {\n border-color: tokens.$ifxColorRed500;\n }\n\n .disabled & {\n pointer-events: none;\n border-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorEngineering300;\n\n ifx-icon {\n color: tokens.$ifxColorEngineering300;\n }\n }\n}\n\n.upload-dropzone input {\n display: none;\n}\n\n.file-upload-info {\n font-style: normal;\n font-weight: tokens.$ifxFontWeightRegular;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n letter-spacing: tokens.$ifxLetterSpacingDefault;\n color: tokens.$ifxColorBaseBlack;\n margin: 0;\n margin-top: tokens.$ifxSpace50;\n}\n\n.file-upload-status {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n letter-spacing: 0.2px;\n margin-top: tokens.$ifxSpace100;\n\n &.file-upload-status__error {\n display: flex;\n align-items: center;\n color: tokens.$ifxColorRed500;\n\n ifx-icon {\n position: relative;\n top: - tokens.$ifxSpace12;\n color: tokens.$ifxColorRed500;\n margin-right: tokens.$ifxSpace100;\n }\n }\n}\n\n.upload-heading {\n font: tokens.$ifxHeadingHeading06;\n margin-bottom: tokens.$ifxSpace100;\n}\n\n.file-list-wrapper {\n margin-top: tokens.$ifxSpace200;\n}\n\n.file-list {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace200;\n}\n\n.file-item {\n border: 1px solid tokens.$ifxColorEngineering300;\n padding-top: tokens.$ifxSpace150;\n padding-right: tokens.$ifxSpace200;\n padding-bottom: tokens.$ifxSpace100;\n padding-left: tokens.$ifxSpace200;\n display: flex;\n gap: tokens.$ifxSpace100;\n}\n\n.file-info {\n width: 100%;\n min-width: 0;\n}\n\n.file-top-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: tokens.$ifxSpace200;\n margin-top: - tokens.$ifxSpace100;\n}\n\n.file-top-row ifx-icon {\n flex-shrink: 0;\n}\n\n.file-name-wrapper {\n display: flex;\n min-width: 0;\n max-width: 100%;\n white-space: nowrap;\n overflow: hidden;\n font-weight: tokens.$ifxFontWeightRegular;\n font-size: tokens.$ifxFontSizeS;\n}\n\n.file-name-base {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex-shrink: 1;\n min-width: 0;\n}\n\n.file-name-ext {\n flex-shrink: 0;\n margin-left: 0;\n}\n\n.file-middle-row {\n display: flex;\n align-items: center;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n flex-wrap: wrap;\n color: tokens.$ifxColorEngineering500;\n\n .file-status {\n margin-left: tokens.$ifxSpace150;\n\n ifx-icon {\n margin-right: tokens.$ifxSpace100;\n }\n }\n}\n\n.file-progress-row {\n margin-top: tokens.$ifxSpace50;\n}\n\n.file-progress-row ifx-progress-bar {\n width: 100%;\n}\n\n.upload-success {\n border-color: tokens.$ifxColorOcean500;\n\n .file-status {\n ifx-icon {\n position: relative;\n top: tokens.$ifxSpace12;\n color: tokens.$ifxColorGreen500;\n }\n }\n}\n\n.upload-failed {\n border-color: tokens.$ifxColorRed500;\n\n .file-status {\n color: tokens.$ifxColorRed500;\n margin-left: 0;\n }\n}\n","import { Component, h, State, Event, EventEmitter, Prop, Method, Element } from '@stencil/core';\n\ninterface UploadTask {\n file: File;\n progress: number;\n intervalId: number | null;\n completed: boolean;\n error?: boolean;\n}\n\nexport type FileUploadErrorReason =\n | 'network-error'\n | 'timeout'\n | 'file-too-large'\n | 'unsupported-type'\n | 'invalid-type'\n | 'custom'\n | (string & {});\n\n@Component({\n tag: 'ifx-file-upload',\n styleUrl: 'file-upload.scss',\n shadow: true\n})\nexport class FileUpload {\n @Element() hostElement: HTMLElement;\n\n @Prop() dragAndDrop: boolean = false;\n @Prop() required: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() maxFileSizeMB: number = 7;\n /** Default set of allowed file extensions (used internally). Can be extended using `additionalAllowedFileTypes`. */\n @Prop() allowedFileTypes: string | string[] = ['jpg', 'jpeg', 'png', 'pdf', 'mov', 'mp3', 'mp4'];\n @Prop() additionalAllowedFileTypes?: string | string[] = [];\n @Prop() uploadHandler?: (file: File, onProgress?: (progress: number) => void) => Promise<void>;\n\n private _maxFiles?: number;\n @Prop()\n get maxFiles(): number | undefined {\n return this._maxFiles;\n }\n set maxFiles(value: number | undefined) {\n if (typeof value === 'number' && value < 1) {\n console.warn('Invalid `maxFiles` value. Must be >= 1. Value ignored.');\n this._maxFiles = undefined;\n } else {\n this._maxFiles = value;\n }\n }\n\n @Prop() label: string = 'Label';\n @Prop() labelRequiredError: string = 'At least one file must be uploaded';\n @Prop() labelBrowseFiles: string = 'Browse files';\n @Prop() labelDragAndDrop: string = 'Drag & Drop or browse files to upload';\n @Prop() labelUploadedFilesHeading: string = 'Uploaded files';\n @Prop() labelFileTooLarge: string = 'Upload failed. Max file size: {{size}}MB.';\n @Prop() labelUnsupportedFileType: string = 'Unsupported file type.';\n @Prop() labelUploaded: string = 'Successfully uploaded';\n @Prop() labelUploadFailed: string = 'Upload failed. Please try again.';\n @Prop() labelSupportedFormatsTemplate: string = 'Supported file formats: {{types}}. Max file size: {{size}}MB.';\n @Prop() labelFileSingular: string = 'file';\n @Prop() labelFilePlural: string = 'files';\n @Prop() labelMaxFilesInfo?: string = 'Up to {{count}} {{files}}.';\n @Prop() labelMaxFilesExceeded: string = 'Upload limit exceeded. Only {{count}} {{files}} allowed.';\n\n @Prop() ariaLabelBrowseFiles: string = 'Browse files';\n @Prop() ariaLabelDropzone: string = 'Upload area. Click to browse or drag and drop files.';\n @Prop() ariaLabelFileInput: string = 'Upload file';\n @Prop() ariaLabelRemoveFile: string = 'Remove file';\n @Prop() ariaLabelCancelUpload: string = 'Cancel upload';\n @Prop() ariaLabelRetryUpload: string = 'Retry upload';\n @Prop() ariaLabelUploadingStatus: string = 'Upload in progress';\n @Prop() ariaLabelUploadedStatus: string = 'Upload completed';\n @Prop() ariaLabelUploadFailedStatus: string = 'Upload failed';\n\n private showDemoStates?: boolean;\n private internalId = `ifx-file-upload-${Math.random().toString(36).substr(2, 9)}`;\n\n @State() isDragOver: boolean = false;\n @State() files: File[] = [];\n @State() uploadTasks: UploadTask[] = [];\n @State() rejectedSizeFiles: string[] = [];\n @State() rejectedTypeFiles: string[] = [];\n @State() requiredError: boolean = false;\n @State() statusMessage: { type: 'error' | 'info' | 'success'; text: string } | null = null;\n\n\n @Event() ifxFileUploadAdd: EventEmitter<{ addedFiles: File[]; files: File[] }>;\n @Event() ifxFileUploadRemove: EventEmitter<{ removedFile: File; files: File[] }>;\n @Event() ifxFileUploadChange: EventEmitter<{ files: File[] }>;\n @Event() ifxFileUploadError: EventEmitter<{ errorType: string; file: File; message: string; reason?: string; }>;\n @Event() ifxFileUploadInvalid: EventEmitter<{ file: File; reason: string }>;\n @Event() ifxFileUploadStart: EventEmitter<{ file: File }>;\n @Event() ifxFileUploadComplete: EventEmitter<{ file: File }>;\n @Event() ifxFileUploadAllComplete: EventEmitter<{ files: File[] }>;\n @Event() ifxFileUploadAbort: EventEmitter<{ file: File }>;\n @Event() ifxFileUploadDrop: EventEmitter<{ droppedFiles: File[]; acceptedFiles: File[]; rejectedFiles: File[] }>;\n @Event() ifxFileUploadClick: EventEmitter<void>;\n @Event() ifxFileUploadMaxFilesExceeded: EventEmitter<{ maxFiles: number; attempted: number }>;\n @Event() ifxFileUploadValidation: EventEmitter<{ valid: boolean }>;\n @Event() ifxFileUploadRetry: EventEmitter<{ file: File }>;\n\n private fileInputEl: HTMLInputElement | null = null;\n\n private extensionToMimeMap: Record<string, string> = {\n /**\n * Maps file extensions to MIME types.\n * This is only used for translating `allowedFileTypes` (extensions) into MIME types,\n * and for labeling in the UI. It does NOT define which files are globally allowed.\n */\n\n // Images\n jpg: 'image/jpeg',\n jpeg: 'image/jpeg',\n png: 'image/png',\n gif: 'image/gif',\n svg: 'image/svg+xml',\n webp: 'image/webp',\n\n // Documents\n pdf: 'application/pdf',\n doc: 'application/msword',\n docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n xls: 'application/vnd.ms-excel',\n xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n ppt: 'application/vnd.ms-powerpoint',\n pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',\n txt: 'text/plain',\n csv: 'text/csv',\n json: 'application/json',\n\n // Audio/Video\n mp3: 'audio/mpeg',\n wav: 'audio/wav',\n mp4: 'video/mp4',\n mov: 'video/quicktime',\n webm: 'video/webm',\n\n // Archive / Code\n zip: 'application/zip',\n rar: 'application/vnd.rar',\n tar: 'application/x-tar',\n gz: 'application/gzip',\n\n // Sonstiges\n xml: 'application/xml',\n html: 'text/html',\n css: 'text/css',\n js: 'application/javascript'\n };\n\n private validateRequired(): void {\n if (this.required && this.files.length === 0) {\n this.requiredError = true;\n\n if (this.statusMessage?.text !== this.labelRequiredError) {\n this.statusMessage = {\n type: 'error',\n text: this.labelRequiredError\n };\n }\n\n this.ifxFileUploadValidation.emit({ valid: false });\n } else {\n this.requiredError = false;\n\n if (this.statusMessage?.text === this.labelRequiredError) {\n this.statusMessage = null;\n }\n\n this.ifxFileUploadValidation.emit({ valid: true });\n }\n }\n\n private pluralize(count: number): string {\n return count === 1 ? this.labelFileSingular : this.labelFilePlural;\n }\n\n private getNormalizedFileTypes(): string[] {\n if (Array.isArray(this.allowedFileTypes)) {\n return this.allowedFileTypes;\n }\n try {\n return JSON.parse(this.allowedFileTypes);\n } catch {\n return this.allowedFileTypes.split(',').map(t => t.trim());\n }\n }\n\n private getLabelFromMimeType(mime: string): string {\n for (const [ext, knownMime] of Object.entries(this.extensionToMimeMap)) {\n if (knownMime === mime) {\n return ext.toUpperCase();\n }\n }\n return mime; // fallback: show raw MIME\n }\n\n handleFileChange(event: Event) {\n const input = event.target as HTMLInputElement;\n if (!input.files) return;\n this.processFiles(input.files);\n }\n\n handleDrop(event: DragEvent) {\n if (this.disabled) return;\n event.preventDefault();\n event.stopPropagation();\n this.isDragOver = false;\n if (event.dataTransfer?.files) {\n const droppedFiles = Array.from(event.dataTransfer.files);\n const allowedMimes = [\n ...this.getNormalizedFileTypes()\n .map(ext => this.extensionToMimeMap[ext.toLowerCase()])\n .filter(Boolean),\n ...this.getAdditionalMimeTypes()\n ];\n\n const acceptedFiles: File[] = [];\n const rejectedFiles: File[] = [];\n\n droppedFiles.forEach(file => {\n const isValidType = allowedMimes.includes(file.type);\n const isValidSize = file.size <= this.maxFileSizeMB * 1024 * 1024;\n if (isValidType && isValidSize) acceptedFiles.push(file);\n else rejectedFiles.push(file);\n });\n\n this.ifxFileUploadDrop.emit({\n droppedFiles,\n acceptedFiles,\n rejectedFiles\n });\n\n this.processFiles(event.dataTransfer.files);\n }\n }\n\n handleDragOver(event: DragEvent) {\n if (this.disabled) return;\n event.preventDefault();\n this.isDragOver = true;\n }\n\n handleDragLeave(event: DragEvent) {\n if (this.disabled) return;\n event.preventDefault();\n this.isDragOver = false;\n }\n\n processFiles(fileList: FileList) {\n const selectedFiles = Array.from(fileList);\n const allowedMimes = [\n ...this.getNormalizedFileTypes()\n .map(ext => this.extensionToMimeMap[ext.toLowerCase()])\n .filter(Boolean),\n ...this.getAdditionalMimeTypes()\n ];\n\n const validFiles: File[] = [];\n const rejectedSize: string[] = [];\n const rejectedType: string[] = [];\n\n selectedFiles.forEach(file => {\n const isValidType = allowedMimes.includes(file.type);\n const isValidSize = file.size <= this.maxFileSizeMB * 1024 * 1024;\n const isDuplicate = this.files.some(existing =>\n existing.name === file.name && existing.size === file.size\n );\n\n if (isDuplicate) {\n this.ifxFileUploadInvalid.emit({ file, reason: 'duplicate' });\n this.ifxFileUploadError.emit({\n file,\n errorType: 'duplicate',\n message: `File \"${file.name}\" is already added`,\n reason: 'duplicate'\n });\n return;\n }\n\n if (isValidType && isValidSize) {\n validFiles.push(file);\n } else {\n if (!isValidType) {\n rejectedType.push(file.name);\n this.ifxFileUploadInvalid.emit({ file, reason: 'invalid-type' });\n }\n if (!isValidSize) {\n rejectedSize.push(file.name);\n this.ifxFileUploadInvalid.emit({ file, reason: 'invalid-size' });\n }\n this.ifxFileUploadError.emit({\n file,\n errorType: !isValidType ? 'invalid-type' : 'file-too-large',\n message: 'Invalid file rejected',\n reason: !isValidType ? 'unsupported-type' : 'file-too-large'\n });\n }\n });\n\n this.rejectedSizeFiles = [...this.rejectedSizeFiles, ...rejectedSize];\n this.rejectedTypeFiles = [...this.rejectedTypeFiles, ...rejectedType];\n\n if (this.maxFiles && this.files.length + validFiles.length > this.maxFiles) {\n const availableSlots = this.maxFiles - this.files.length;\n const limitedFiles = validFiles.slice(0, Math.max(availableSlots, 0));\n const overflowFiles = validFiles.slice(availableSlots);\n\n this.files = [...this.files, ...limitedFiles];\n\n limitedFiles.forEach(file => this.startUpload(file));\n\n if (limitedFiles.length > 0) {\n this.ifxFileUploadAdd.emit({ addedFiles: limitedFiles, files: this.files });\n this.ifxFileUploadChange.emit({ files: this.files });\n }\n\n overflowFiles.forEach(file => {\n this.ifxFileUploadInvalid.emit({ file, reason: 'too-many-files' });\n this.ifxFileUploadError.emit({\n file,\n errorType: 'too-many-files',\n message: `Upload limit exceeded. Max ${this.maxFiles} files allowed.`,\n reason: 'too-many-files'\n });\n });\n\n if (overflowFiles.length > 0) {\n this.statusMessage = {\n type: 'error',\n text: this.labelMaxFilesExceeded\n .replace('{{count}}', this.maxFiles.toString())\n .replace('{{files}}', this.pluralize(this.maxFiles))\n };\n this.ifxFileUploadMaxFilesExceeded.emit({\n maxFiles: this.maxFiles,\n attempted: this.files.length + validFiles.length\n });\n }\n\n return;\n }\n\n\n validFiles.forEach(file => this.startUpload(file));\n this.files = [...this.files, ...validFiles];\n\n if (validFiles.length > 0) {\n this.ifxFileUploadAdd.emit({ addedFiles: validFiles, files: this.files });\n this.ifxFileUploadChange.emit({ files: this.files });\n }\n\n this.validateRequired();\n }\n\n retryUpload(file: File) {\n const taskIndex = this.uploadTasks.findIndex(t => t.file.name === file.name);\n if (taskIndex !== -1) {\n this.uploadTasks.splice(taskIndex, 1);\n this.uploadTasks = [...this.uploadTasks];\n }\n this.ifxFileUploadRetry.emit({ file });\n this.startUpload(file);\n }\n\n startUpload(file: File) {\n this.ifxFileUploadStart.emit({ file });\n\n const task: UploadTask = {\n file,\n progress: 3, // Start with initial progress for better UX\n intervalId: null,\n completed: false,\n };\n\n this.uploadTasks = [...this.uploadTasks, task];\n\n if (this.uploadHandler) {\n this.uploadHandler(file, (percent: number) => {\n if (percent > task.progress) {\n task.progress = Math.min(100, percent);\n this.uploadTasks = [...this.uploadTasks];\n }\n }).then(() => {\n task.progress = 100;\n task.completed = true;\n this.uploadTasks = [...this.uploadTasks];\n this.ifxFileUploadComplete.emit({ file });\n this.ifxFileUploadChange.emit({ files: this.files });\n\n if (this.uploadTasks.every(t => t.completed)) {\n this.ifxFileUploadAllComplete.emit({ files: this.files });\n }\n }).catch(() => {\n task.error = true;\n this.uploadTasks = [...this.uploadTasks];\n this.ifxFileUploadError.emit({\n file,\n errorType: 'upload-failed',\n message: 'Upload handler rejected file',\n reason: 'custom'\n });\n });\n } else {\n const totalSize = file.size;\n const fakeUploadSpeed = 100000;\n let uploaded = 0;\n\n task.intervalId = window.setInterval(() => {\n uploaded += fakeUploadSpeed / 5;\n const progress = Math.min(100, Math.round((uploaded / totalSize) * 100));\n task.progress = progress;\n this.uploadTasks = [...this.uploadTasks];\n\n if (progress >= 100) {\n clearInterval(task.intervalId!);\n task.completed = true;\n task.intervalId = null;\n this.uploadTasks = [...this.uploadTasks];\n this.ifxFileUploadComplete.emit({ file });\n this.ifxFileUploadChange.emit({ files: this.files });\n\n if (this.uploadTasks.every(t => t.completed)) {\n this.ifxFileUploadAllComplete.emit({ files: this.files });\n }\n }\n }, 200);\n }\n\n this.uploadTasks = [...this.uploadTasks, task];\n }\n\n cancelUpload(file: File) {\n const taskIndex = this.uploadTasks.findIndex(t => t.file.name === file.name);\n if (taskIndex !== -1) {\n const task = this.uploadTasks[taskIndex];\n if (task?.intervalId !== null) {\n clearInterval(task.intervalId);\n }\n this.uploadTasks = this.uploadTasks.filter((_, i) => i !== taskIndex);\n }\n this.files = this.files.filter(f => f.name !== file.name);\n this.ifxFileUploadAbort.emit({ file });\n this.ifxFileUploadChange.emit({ files: this.files });\n if (this.fileInputEl) {\n this.fileInputEl.value = '';\n }\n this.validateRequired();\n }\n\n removeFile(file: File) {\n this.uploadTasks = this.uploadTasks.filter(task => task.file.name !== file.name);\n this.files = this.files.filter(f => f.name !== file.name);\n this.ifxFileUploadRemove.emit({ removedFile: file, files: this.files });\n this.ifxFileUploadChange.emit({ files: this.files });\n this.validateRequired();\n\n if (this.fileInputEl) {\n this.fileInputEl.value = '';\n }\n\n if (\n this.maxFiles &&\n this.files.length < this.maxFiles &&\n this.statusMessage?.text !== this.labelRequiredError\n ) {\n this.statusMessage = null;\n }\n }\n\n\n clearRejectedFile(fileName: string, type: 'size' | 'type') {\n if (type === 'size') {\n this.rejectedSizeFiles = this.rejectedSizeFiles.filter(f => f !== fileName);\n } else {\n this.rejectedTypeFiles = this.rejectedTypeFiles.filter(f => f !== fileName);\n }\n\n if (this.fileInputEl) {\n this.fileInputEl.value = '';\n }\n\n if (this.maxFiles && this.files.length < this.maxFiles) {\n this.statusMessage = null;\n }\n\n this.validateRequired();\n }\n\n splitFileNameParts(file: File): { base: string; ext: string } {\n const name = file.name;\n const dotIndex = name.lastIndexOf('.');\n if (dotIndex === -1) return { base: name, ext: '' };\n return {\n base: name.substring(0, dotIndex),\n ext: name.substring(dotIndex)\n };\n }\n\n getFileIcon(file: File): string {\n const extension = file.name.split('.').pop()?.toLowerCase();\n switch (extension) {\n case 'pdf': return 'file-pdf-16';\n case 'jpg':\n case 'jpeg': return 'file-jpg-16';\n case 'png': return 'file-png-16';\n case 'mov': return 'file-mov-16';\n case 'mp3': return 'file-mp3-16';\n case 'mp4': return 'file-mp4-16';\n default: return 'file-16';\n }\n }\n\n formatSize(bytes: number): string {\n if (bytes >= 1024 * 1024 * 1024) {\n return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;\n } else if (bytes >= 1024 * 1024) {\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n } else if (bytes >= 1024) {\n return `${(bytes / 1024).toFixed(0)} KB`;\n } else {\n return `${bytes} B`;\n }\n }\n\n getAcceptAttribute(): string {\n const extensionTypes = this.getNormalizedFileTypes().map(ext => '.' + ext.toLowerCase());\n const mimeTypes = this.getAdditionalMimeTypes();\n\n return [...extensionTypes, ...mimeTypes].join(',');\n }\n\n private getFormattedProgressText(task: UploadTask): string {\n const uploadedSize = Math.round((task.progress / 100) * task.file.size);\n const uploadedText = this.formatSize(uploadedSize);\n const totalText = this.formatSize(task.file.size);\n return `${uploadedText} / ${totalText} uploaded`;\n }\n\n private getAdditionalMimeTypes(): string[] {\n if (!this.additionalAllowedFileTypes) return [];\n if (Array.isArray(this.additionalAllowedFileTypes)) return this.additionalAllowedFileTypes;\n return this.additionalAllowedFileTypes.split(',').map(t => t.trim());\n }\n\n private getSupportedFileText(): string {\n const extensions = this.getNormalizedFileTypes().map(ext => ext.toUpperCase());\n const mimeTypes = this.getAdditionalMimeTypes().map(mime => this.getLabelFromMimeType(mime));\n const allTypes = [...extensions, ...mimeTypes];\n const typesLabel = allTypes.join(', ');\n\n let text = this.labelSupportedFormatsTemplate\n .replace('{{types}}', typesLabel)\n .replace('{{size}}', this.maxFileSizeMB.toString());\n\n if (this.labelMaxFilesInfo && this.maxFiles) {\n const fileWord = this.pluralize(this.maxFiles);\n const maxFilesText = this.labelMaxFilesInfo\n .replace('{{count}}', this.maxFiles.toString())\n .replace('{{files}}', fileWord);\n text += ` ${maxFilesText}`;\n }\n\n return text;\n }\n\n private getFormattedFileTooLargeText(): string {\n return this.labelFileTooLarge.replace('{{size}}', this.maxFileSizeMB.toString());\n }\n\n private renderStatusMessage() {\n if (!this.statusMessage) return null;\n\n return (\n <div class={`file-upload-status file-upload-status__${this.statusMessage.type}`}>\n {this.statusMessage.type === 'error' && (\n <ifx-icon icon=\"c-warning-16\"></ifx-icon>\n )}\n {this.statusMessage.text}\n </div>\n );\n }\n\n private isInputDisabled(): boolean {\n return this.disabled || (this.maxFiles !== undefined && this.files.length >= this.maxFiles);\n }\n\n componentDidLoad() {\n if (this.hostElement.hasAttribute('show-demo-states')) {\n this.showDemoStates = true;\n }\n\n if (this.showDemoStates) {\n this.injectDemoState();\n }\n }\n\n // Storybook Demo\n @Method()\n async injectDemoState() {\n const dummyContent = new Array(50000).fill('a').join(''); // ~50 KB\n const bigContent = dummyContent + dummyContent; // ~100 KB\n\n const uploading = new File([dummyContent], 'Image.jpg', { type: 'image/jpeg' }); // ~50 KB\n const uploaded = new File([bigContent], 'File.pdf', { type: 'application/pdf' }); // ~100 KB\n const failed = new File([dummyContent], 'Text.docx', { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }); // ~50 KB\n const tooLarge = new File([bigContent + bigContent + bigContent], 'Video.mp4', { type: 'video/mp4' }); // ~300 KB\n const unsupported = new File(['demo'], 'Script.exe', { type: 'application/x-msdownload' }); // very small\n\n this.files = [uploaded, uploading, failed];\n this.uploadTasks = [\n { file: uploaded, progress: 100, intervalId: null, completed: true },\n { file: uploading, progress: 40, intervalId: null, completed: false },\n { file: failed, progress: 80, intervalId: null, completed: false, error: true }\n ];\n this.rejectedSizeFiles = [tooLarge.name];\n this.rejectedTypeFiles = [unsupported.name];\n }\n\n\n\n // Storybook Demo\n @Method()\n async triggerDemoValidation(): Promise<void> {\n this.validateRequired();\n }\n\n render() {\n return (\n <div\n class={{\n 'file-upload-wrapper': true,\n 'disabled': this.disabled\n }}\n >\n {this.label && (\n <label class=\"file-upload-label\" htmlFor={this.internalId}>\n {this.label}\n {this.required && (\n <span class={`required ${this.requiredError ? 'error' : ''}`}>*</span>\n )}\n </label>\n )}\n\n {this.dragAndDrop ? this.renderDragAndDropArea() : this.renderUploadArea()}\n\n {(this.files.length > 0 || this.rejectedSizeFiles.length > 0 || this.rejectedTypeFiles.length > 0) && (\n <div class=\"file-list-wrapper\">\n <div class=\"upload-heading\">{this.labelUploadedFilesHeading}</div>\n <ul class=\"file-list\">\n {this.rejectedSizeFiles.map(fileName => (\n <li class=\"file-item upload-failed\" key={`rejected-size-${fileName}`}>\n <div class=\"file-icon\">\n <ifx-icon icon=\"file-16\"></ifx-icon>\n </div>\n <div class=\"file-info\">\n <div class=\"file-top-row\">\n <span class=\"file-name-wrapper\">\n <span class=\"file-name-base\">{this.splitFileNameParts({ name: fileName } as File).base}</span>\n <span class=\"file-name-ext\">{this.splitFileNameParts({ name: fileName } as File).ext}</span>\n </span>\n <div class=\"file-actions\">\n <ifx-icon-button\n shape=\"square\"\n variant=\"tertiary\"\n icon=\"delete-forever-16\"\n size=\"s\"\n aria-label={this.ariaLabelRemoveFile}\n onClick={() => this.clearRejectedFile(fileName, 'size')}\n ></ifx-icon-button>\n </div>\n </div>\n <div class=\"file-middle-row\">\n <span class=\"file-status\" aria-label={this.labelFileTooLarge.replace('{{size}}', this.maxFileSizeMB.toString())}>\n {this.getFormattedFileTooLargeText()}\n </span>\n </div>\n </div>\n </li>\n ))}\n\n {this.rejectedTypeFiles.map(fileName => (\n <li class=\"file-item upload-failed\" key={`rejected-type-${fileName}`}>\n <div class=\"file-icon\">\n <ifx-icon icon=\"file-16\"></ifx-icon>\n </div>\n <div class=\"file-info\">\n <div class=\"file-top-row\">\n <span class=\"file-name-wrapper\">\n <span class=\"file-name-base\">{this.splitFileNameParts({ name: fileName } as File).base}</span>\n <span class=\"file-name-ext\">{this.splitFileNameParts({ name: fileName } as File).ext}</span>\n </span>\n <div class=\"file-actions\">\n <ifx-icon-button\n shape=\"square\"\n variant=\"tertiary\"\n icon=\"delete-forever-16\"\n size=\"s\"\n aria-label={this.ariaLabelRemoveFile}\n onClick={() => this.clearRejectedFile(fileName, 'type')}\n ></ifx-icon-button>\n </div>\n </div>\n <div class=\"file-middle-row\">\n <span class=\"file-status\" aria-label={this.labelUnsupportedFileType}>\n {this.labelUnsupportedFileType}\n </span>\n </div>\n </div>\n </li>\n ))}\n\n {this.files.map((file) => {\n const task = this.uploadTasks.find(t => t.file.name === file.name);\n const progress = task?.progress ?? 100;\n const isUploading = task && !task.completed;\n const isError = task?.error === true;\n const itemClass = isError ? 'file-item upload-failed' : isUploading ? 'file-item uploading' : 'file-item upload-success';\n const uniqueKey = `${file.name}-${file.size}`;\n const { base, ext } = this.splitFileNameParts(file);\n\n return (\n <li class={itemClass} key={uniqueKey}>\n <div class=\"file-icon\">\n <ifx-icon icon={this.getFileIcon(file)}></ifx-icon>\n </div>\n <div class=\"file-info\">\n <div class=\"file-top-row\">\n <span class=\"file-name-wrapper\">\n <span class=\"file-name-base\">{base}</span>\n <span class=\"file-name-ext\">{ext}</span>\n </span>\n <div class=\"file-actions\">\n <ifx-icon-button\n shape=\"square\"\n variant=\"tertiary\"\n icon=\"refresh-16\"\n size=\"s\"\n aria-label={this.ariaLabelRetryUpload}\n onClick={() => this.retryUpload(file)}\n style={{ display: isError ? 'inline-flex' : 'none' }}\n ></ifx-icon-button>\n <ifx-icon-button\n shape=\"square\"\n variant=\"tertiary\"\n icon=\"cross-16\"\n size=\"s\"\n aria-label={this.ariaLabelCancelUpload}\n onClick={() => this.cancelUpload(file)}\n style={{ display: isUploading ? 'inline-flex' : 'none' }}\n ></ifx-icon-button>\n <ifx-icon-button\n shape=\"square\"\n variant=\"tertiary\"\n icon=\"delete-forever-16\"\n size=\"s\"\n aria-label={this.ariaLabelRemoveFile}\n onClick={() => this.removeFile(file)}\n style={{ display: !isUploading ? 'inline-flex' : 'none' }}\n ></ifx-icon-button>\n </div>\n </div>\n\n <div class=\"file-middle-row\">\n {isUploading && task && !task.error && (\n <span class=\"file-uploading\" aria-label={this.ariaLabelUploadingStatus}>\n {this.getFormattedProgressText(task)}\n </span>\n )}\n {!isUploading && !isError && (\n <span>\n <span class=\"file-size\">{this.formatSize(file.size)}</span>\n <span class=\"file-status\" aria-label={this.ariaLabelUploadedStatus}>\n <ifx-icon icon=\"check-16\"></ifx-icon>\n {this.labelUploaded}\n </span>\n </span>\n )}\n {isError && (\n <span class=\"file-status\" aria-label={this.ariaLabelUploadFailedStatus}>\n {this.labelUploadFailed}\n </span>\n )}\n </div>\n\n {isUploading && task && !task.error && (\n <div class=\"file-progress-row\">\n <ifx-progress-bar\n size=\"s\"\n value={progress}\n show-label=\"true\"\n ></ifx-progress-bar>\n </div>\n )}\n </div>\n </li>\n );\n })}\n </ul>\n </div>\n )}\n </div>\n );\n }\n\n renderUploadArea() {\n const handleInputRef = (el: HTMLInputElement | null) => {\n this.fileInputEl = el;\n };\n\n return (\n <div class={{ 'upload-button': true }}>\n <ifx-button\n variant=\"secondary\"\n onClick={() => this.fileInputEl?.click()}\n disabled={this.isInputDisabled()}\n aria-label={this.ariaLabelBrowseFiles}\n >\n <ifx-icon icon=\"upload-16\"></ifx-icon>\n {this.labelBrowseFiles}\n </ifx-button>\n <input\n id={this.internalId}\n ref={handleInputRef}\n type=\"file\"\n accept={this.getAcceptAttribute()}\n multiple\n onChange={(e) => this.handleFileChange(e)}\n style={{ display: 'none' }}\n disabled={this.isInputDisabled()}\n aria-label={this.ariaLabelFileInput}\n />\n <p class=\"file-upload-info\">\n {this.getSupportedFileText()}\n </p>\n {this.renderStatusMessage()}\n </div>\n );\n }\n\n\n renderDragAndDropArea() {\n const handleInputRef = (el: HTMLInputElement | null) => {\n this.fileInputEl = el;\n };\n\n const triggerInputClick = () => {\n if (this.fileInputEl) {\n this.fileInputEl.click();\n }\n };\n\n return (\n <div class={{ 'disabled': this.isInputDisabled() }}>\n <div\n class={{ 'upload-dropzone': true, 'drag-over': this.isDragOver, 'error': this.requiredError }}\n onClick={triggerInputClick}\n onDragOver={(e) => this.handleDragOver(e)}\n onDragLeave={(e) => this.handleDragLeave(e)}\n onDrop={(e) => this.handleDrop(e)}\n role=\"button\"\n tabIndex={0}\n aria-label={this.ariaLabelDropzone}\n >\n <ifx-icon icon=\"upload-16\" class=\"custom-icon\"></ifx-icon>\n <p>{this.labelDragAndDrop}</p>\n <p class=\"file-upload-info\">\n {this.getSupportedFileText()}\n </p>\n <div style={{ height: '0px', overflow: 'hidden' }}>\n <input\n id={this.internalId}\n ref={handleInputRef}\n type=\"file\"\n accept={this.getAcceptAttribute()}\n multiple\n onChange={(e) => this.handleFileChange(e)}\n disabled={this.isInputDisabled()}\n aria-label={this.ariaLabelFileInput}\n />\n </div>\n </div>\n {this.renderStatusMessage()}\n </div>\n );\n }\n\n}\n"],"mappings":"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","ignoreList":[]}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as e,c as t,h as i,F as s,g as a}from"./p-b7a462e5.js";const n='.tree-item{position:relative;cursor:pointer;list-style:none}.tree-item.tree-item--expanded{position:relative}.tree-item.tree-item--has-children{position:relative}.tree-item.tree-item--has-children .tree-item__header>.tree-item__chevron-container{display:flex}.tree-item.tree-item--has-children.tree-item--expanded .tree-item__header>.tree-item__chevron-container::after{display:block}.tree-item--disabled{cursor:not-allowed;pointer-events:none;color:#BFBBBB}.tree-item__content{display:flex;flex-direction:row}.tree-item__content:hover .tree-item__checkbox-container,.tree-item__content:hover .tree-item__header{background-color:#F7F7F7}.tree-item__checkbox-container{position:sticky;left:0;z-index:10;padding:4px;background-color:#FFFFFF}.tree-item__header{flex-grow:1;display:flex;align-items:center;white-space:nowrap;height:20px;padding-top:4px;padding-right:16px;padding-bottom:4px;padding-left:8px}.tree-item__chevron-container{display:none;align-items:center;margin-right:8px;height:20px}.tree-item__chevron-container::after{--height-line-start:28px;display:none;content:"";position:absolute;z-index:1;top:var(--height-line-start);left:auto;margin-left:8px;width:1px;height:calc(100% - var(--height-line-start));background-color:#EEEDED}.tree-item--disabled .tree-item__chevron-container::after{color:#EEEDED}.tree-item__chevron.chevron-down{transform:rotate(90deg)}.tree-item__chevron.chevron-right{transform:rotate(0)}.tree-item__label-icon-container{display:flex;align-items:center}.tree-item__label-icon-container:focus{outline:none}.tree-item__label-icon-container:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.tree-item__icon-container{position:relative;width:16px;height:16px}.tree-item__icon-container ifx-icon{position:absolute;left:0;top:0;opacity:1;transition:opacity 0.2s ease-in-out}.tree-item__icon-container ifx-icon.icon--hidden{opacity:0}.tree-item__label{padding-left:8px}.tree-item__children{display:none}.tree-item[aria-expanded=true]>.tree-item__children{display:block}';const r=n;const h=class{constructor(i){e(this,i);this.ifxTreeViewItemExpandChange=t(this,"ifxTreeViewItemExpandChange",7);this.ifxTreeViewItemCheckChange=t(this,"ifxTreeViewItemCheckChange",7);this.ifxTreeViewItemDisableChange=t(this,"ifxTreeViewItemDisableChange",7);this.expanded=false;this.initiallyExpanded=false;this.disableItem=false;this.initiallySelected=false;this.hasChildren=false;this.isChecked=false;this.partialChecked=false;this.level=0;this.disableAllItems=false;this.expandAllItems=false;this.suppressExpandEvents=false;this.findChildren=()=>Array.from(this.host.children).filter((e=>e instanceof HTMLElement&&e.tagName==="IFX-TREE-VIEW-ITEM"));this.calculateNodeLevel=()=>{let e=0,t=this.host.parentElement;while(t){if(t.tagName==="IFX-TREE-VIEW-ITEM")e++;t=t.parentElement}return e};this.handleStateChange=e=>{if(this.disabled)return;e.stopPropagation();this.updateCheckState(e.detail.checked)};this.handleCheckboxChange=e=>{var t,i;if(this.disabled)return;this.updateCheckState((i=(t=e.detail)===null||t===void 0?void 0:t.checked)!==null&&i!==void 0?i:!this.isChecked)};this.handleHeaderClick=({target:e})=>{if(this.disabled)return;if(!e.closest(".tree-item__checkbox-container, .tree-item__chevron-container")){if(this.hasChildren){const e=!this.isChecked;this.updateCheckState(e);const t=e?this.expandOrCollapseAllDescendants(true):this.expandOrCollapseAllDescendants(false);this.ifxTreeViewItemExpandChange.emit({expanded:e,affectedItems:t,component:this})}else{this.updateCheckState(!this.isChecked)}}};this.toggleExpand=()=>{if(this.disabled||!this.hasChildren)return;this.expanded=!this.expanded};this.handleKeyDown=e=>{var t,i,s,a,n,r;const h=Array.from(((t=this.host.closest("ifx-tree-view"))===null||t===void 0?void 0:t.querySelectorAll("ifx-tree-view-item"))||[]);const o=h.filter((e=>{var t,i;let s=(t=e.parentElement)===null||t===void 0?void 0:t.closest("ifx-tree-view-item");while(s){const e=s;if(!(e.expandAllItems||e.expanded))return false;s=(i=s.parentElement)===null||i===void 0?void 0:i.closest("ifx-tree-view-item")}return true}));const c=o.findIndex((e=>e===this.host));const l=e=>e===null||e===void 0?void 0:e.focus();switch(e.key){case"ArrowDown":{e.preventDefault();for(let e=c+1;e<o.length;e++){const t=o[e];if(!t.disabled){l((i=t.shadowRoot)===null||i===void 0?void 0:i.querySelector(".tree-item__label-icon-container"));break}}break}case"ArrowUp":{e.preventDefault();for(let e=c-1;e>=0;e--){const t=o[e];if(!t.disabled){l((s=t.shadowRoot)===null||s===void 0?void 0:s.querySelector(".tree-item__label-icon-container"));break}}break}case"ArrowRight":{e.preventDefault();if(!this.isExpanded&&this.hasChildren){this.expanded=true}else if(this.isExpanded&&this.hasChildren){const e=this.host.querySelector("ifx-tree-view-item");if(e&&!e.disabled){l((a=e.shadowRoot)===null||a===void 0?void 0:a.querySelector(".tree-item__label-icon-container"))}}break}case"ArrowLeft":{e.preventDefault();if(this.isExpanded&&this.hasChildren){this.expanded=false}else{const e=(n=this.host.parentElement)===null||n===void 0?void 0:n.closest("ifx-tree-view-item");if(e&&!e.disabled){l((r=e.shadowRoot)===null||r===void 0?void 0:r.querySelector(".tree-item__label-icon-container"))}}break}case" ":case"Enter":{e.preventDefault();if(this.hasChildren){const e=!this.isChecked;this.updateCheckState(e);const t=e?this.expandOrCollapseAllDescendants(true):this.expandOrCollapseAllDescendants(false);this.ifxTreeViewItemExpandChange.emit({expanded:e,affectedItems:t,component:this})}else{this.updateCheckState(!this.isChecked)}break}}}}get disabled(){return this.disableAllItems||this.disableItem}get isExpanded(){return this.expandAllItems||this.expanded}componentWillLoad(){this.expanded=this.initiallyExpanded;this.hasChildren=this.findChildren().length>0;this.level=this.calculateNodeLevel();this.host.setAttribute("data-level",this.level.toString());this.isChecked=this.initiallySelected;this.host.addEventListener("internal-check-state-change",this.handleStateChange)}componentDidLoad(){this.observeParentAttribute("disable-all-items",(e=>this.disableAllItems=e));this.observeParentAttribute("data-expand-all-items",(e=>this.expandAllItems=e),true);if(this.shouldExpandFromParent())this.expandAllDescendants();this.host["__stencil_instance"]=this;if(this.initiallySelected)setTimeout((()=>this.updateParentState()),0)}observeParentAttribute(e,t,i=false){let s=this.host.parentElement;while(s){if(s.tagName==="IFX-TREE-VIEW"||i&&s.hasAttribute(e)){const i=new MutationObserver((()=>t(s.hasAttribute(e))));i.observe(s,{attributes:true});t(s.hasAttribute(e));break}s=s.parentElement}}shouldExpandFromParent(){let e=this.host.parentElement;while(e){if(e.tagName==="IFX-TREE-VIEW"&&(e.hasAttribute("expand-all-items")||e.hasAttribute("data-expand-all-items")))return true;e=e.parentElement}return false}expandAllDescendants(){this.expanded=true;this.findChildren().forEach((e=>{var t,i;e.expanded=true;(i=(t=e).expandAllDescendants)===null||i===void 0?void 0:i.call(t)}))}expandOrCollapseAllDescendants(e){this.suppressExpandEvents=true;const t=[];this.expanded=e;if(this.hasChildren)t.push({expanded:e,value:this.value});this.findChildren().forEach((i=>{const s=i["__stencil_instance"];if(s&&s.hasChildren){s.suppressExpandEvents=true;s.expanded=e;t.push({expanded:e,value:s.value});if(s.hasChildren){const i=s.expandOrCollapseAllDescendants(e);t.push(...i)}}}));this.suppressExpandEvents=false;return t}async updateCheckState(e,t=false){if(this.disabled)return;if(!t&&this.hasChildren){const t=this.collectDescendantStates(e);this.setNodeState({isChecked:e,partialChecked:false},false);await this.updateChildrenSilently(e);this.ifxTreeViewItemCheckChange.emit({checked:e,indeterminate:false,value:this.value,affectedChildItems:t,component:this});this.updateParentState()}else if(t){this.setNodeState({isChecked:e,partialChecked:false},false)}else{this.setNodeState({isChecked:e,partialChecked:false});await this.updateChildrenState(e);this.updateParentState()}}async updateChildrenSilently(e){for(const t of this.findChildren()){const i=t["__stencil_instance"];if(i&&!i.disabled){i.setNodeState({isChecked:e,partialChecked:false},false);await i.updateChildrenSilently(e)}}}handleExpandedChange(e){if(!this.suppressExpandEvents){this.ifxTreeViewItemExpandChange.emit({expanded:e,value:this.value,affectedItems:[{expanded:e,value:this.value}],component:this})}}handleDisableItemChange(e){this.ifxTreeViewItemDisableChange.emit({disabled:e,component:this})}setNodeState(e,t=true){this.isChecked=e.isChecked;this.partialChecked=e.partialChecked;if(t){this.ifxTreeViewItemCheckChange.emit({checked:this.isChecked,indeterminate:this.partialChecked,value:this.value,level:this.level,disabled:this.disabled,component:this})}}collectDescendantStates(e){const t=[];const i=(s,a=false)=>{let n=s===this.host?this:s["__stencil_instance"];if(!a&&!(n===null||n===void 0?void 0:n.disabled)){t.push({checked:e,indeterminate:false,value:n===null||n===void 0?void 0:n.value})}Array.from(s.children).forEach((e=>{if(e.tagName==="IFX-TREE-VIEW-ITEM")i(e,false)}))};Array.from(this.host.children).forEach((e=>{if(e.tagName==="IFX-TREE-VIEW-ITEM")i(e,false)}));return t}async updateChildrenState(e){for(const t of this.findChildren()){const i=t["__stencil_instance"];if(i&&!i.disabled){await t.componentOnReady();t.dispatchEvent(new CustomEvent("internal-check-state-change",{detail:{checked:e},bubbles:false,composed:true}))}}}findSiblingNodes(e){return Array.from(e.children).filter((e=>e instanceof HTMLElement&&e.tagName==="IFX-TREE-VIEW-ITEM"))}updateParentState(){var e;const t=(e=this.host.parentElement)===null||e===void 0?void 0:e.closest("ifx-tree-view-item");if(!t)return;setTimeout((()=>{const e=t["__stencil_instance"];if(!e)return;const i=this.findSiblingNodes(t);const{allChecked:s,someChecked:a}=this.calculateSiblingStates(i);e.setNodeState({isChecked:s,partialChecked:!s&&a},false);e.updateParentState()}),0)}calculateSiblingStates(e){const t=e.map((e=>{const t=e["__stencil_instance"];return{checked:t===null||t===void 0?void 0:t.isChecked,partial:t===null||t===void 0?void 0:t.partialChecked}}));const i=t.filter((e=>e.checked)).length;const s=t.filter((e=>e.partial)).length;return{allChecked:t.length>0&&i===t.length&&s===0,someChecked:i>0||s>0}}render(){return i("div",{key:"5de1d25102639e4726b76c41453d00bdc282a9c9",class:{"tree-item":true,"tree-item--expanded":this.isExpanded,"tree-item--has-children":this.hasChildren,"tree-item--disabled":this.disabled},role:"treeitem","aria-expanded":this.isExpanded?"true":"false","data-level":this.level,"aria-disabled":this.disabled?"true":undefined,"aria-label":this.ariaLabel},i("div",{key:"cbfdafcc0937554ec4915926268019aee9a071df",class:"tree-item__content"},i("div",{key:"9a8e6b36a9a741f0f31b3d7865c9fa0046491f7a",class:"tree-item__checkbox-container",onClick:e=>e.stopPropagation()},i("ifx-checkbox",{key:"1102bcc9f70aaf2fb213f157840c867b227b6bcb",size:"s",checked:this.partialChecked?false:this.isChecked,indeterminate:this.partialChecked,onIfxChange:this.handleCheckboxChange,disabled:this.disabled})),i("div",{key:"d4d74e0c4a1feaac7fccd97c8fcaa9461b585036",class:"tree-item__header",style:{paddingLeft:`${this.level*24+10}px`},onClick:this.handleHeaderClick,tabIndex:-1,"aria-disabled":this.disabled?"true":undefined},this.hasChildren&&i("div",{key:"7b0d12de5def87778134e4a4194a4ac496ef712d",class:"tree-item__chevron-container",onClick:this.toggleExpand},i("ifx-icon",{key:"1454aad868e6499f08a12358d9ee29adba2615ab",class:`tree-item__chevron ${this.isExpanded?"chevron-down":"chevron-right"}`,icon:"chevron-right-16"}),i("div",{key:"25b68a105342dd0c916ec884834501ba64eb21cb",class:"tree-item__line"})),i("div",{key:"a7df8f5be51cf40debaf958669e1b3ec183811a7",class:"tree-item__label-icon-container",tabIndex:this.disabled?-1:0,onKeyDown:this.handleKeyDown},i("div",{key:"267f3f96ed712c3161b8dc1e8f50056e8dce076d",class:"tree-item__icon-container"},this.hasChildren?i(s,null,i("ifx-icon",{class:{"icon--hidden":this.isExpanded},icon:"folder-16"}),i("ifx-icon",{class:{"icon--hidden":!this.isExpanded},icon:"folder-open-16"})):i("ifx-icon",{icon:"file-16"})),i("span",{key:"a285c8989fec5a33c5ebd4507eb46239a789a775",class:"tree-item__label"},i("slot",{key:"bc637a75a1fc9e2a1f2ac8ec28144b789e9dc58b"}))))),this.isExpanded&&i("div",{key:"e131a8835bc3b4674b60c6620cca2072b0196630",class:"tree-item__children"},i("slot",{key:"c309641ce26171af7bdd0338122ea0aefa077864",name:"children"})))}get host(){return a(this)}static get watchers(){return{expanded:["handleExpandedChange"],disableItem:["handleDisableItemChange"]}}};h.style=r;export{h as ifx_tree_view_item};
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as e,c as t,h as i,F as s,g as n}from"./p-b7a462e5.js";const a='.tree-item{position:relative;cursor:pointer;list-style:none}.tree-item.tree-item--expanded{position:relative}.tree-item.tree-item--has-children{position:relative}.tree-item.tree-item--has-children .tree-item__header>.tree-item__chevron-container{display:flex}.tree-item.tree-item--has-children.tree-item--expanded .tree-item__header>.tree-item__chevron-container::after{display:block}.tree-item--disabled{cursor:not-allowed;pointer-events:none;color:#BFBBBB}.tree-item__content{display:flex;flex-direction:row}.tree-item__content:hover .tree-item__checkbox-container,.tree-item__content:hover .tree-item__header{background-color:#F7F7F7}.tree-item__checkbox-container{position:sticky;left:0;z-index:10;padding:4px;background-color:#FFFFFF}.tree-item__header{flex-grow:1;display:flex;align-items:center;white-space:nowrap;height:20px;padding-top:4px;padding-right:16px;padding-bottom:4px;padding-left:8px}.tree-item__chevron-container{display:none;align-items:center;margin-right:8px;height:20px}.tree-item__chevron-container::after{--height-line-start:28px;display:none;content:"";position:absolute;z-index:1;top:var(--height-line-start);left:auto;margin-left:8px;width:1px;height:calc(100% - var(--height-line-start));background-color:#EEEDED}.tree-item--disabled .tree-item__chevron-container::after{color:#EEEDED}.tree-item__chevron.chevron-down{transform:rotate(90deg)}.tree-item__chevron.chevron-right{transform:rotate(0)}.tree-item__label-icon-container{display:flex;align-items:center}.tree-item__label-icon-container:focus{outline:none}.tree-item__label-icon-container:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.tree-item__icon-container{position:relative;width:16px;height:16px}.tree-item__icon-container ifx-icon{position:absolute;left:0;top:0;opacity:1;transition:opacity 0.2s ease-in-out}.tree-item__icon-container ifx-icon.icon--hidden{opacity:0}.tree-item__label{padding-left:8px}.tree-item__children{display:none}.tree-item[aria-expanded=true]>.tree-item__children{display:block}';const r=a;const h=class{constructor(i){e(this,i);this.ifxTreeViewItemExpandChange=t(this,"ifxTreeViewItemExpandChange",7);this.ifxTreeViewItemCheckChange=t(this,"ifxTreeViewItemCheckChange",7);this.ifxTreeViewItemDisableChange=t(this,"ifxTreeViewItemDisableChange",7);this.expanded=false;this.initiallyExpanded=false;this.disableItem=false;this.initiallySelected=false;this.hasChildren=false;this.isChecked=false;this.partialChecked=false;this.level=0;this.disableAllItems=false;this.expandAllItems=false;this.suppressExpandEvents=false;this.findChildren=()=>Array.from(this.host.children).filter((e=>e instanceof HTMLElement&&e.tagName==="IFX-TREE-VIEW-ITEM"));this.calculateNodeLevel=()=>{let e=0,t=this.host.parentElement;while(t){if(t.tagName==="IFX-TREE-VIEW-ITEM")e++;t=t.parentElement}return e};this.handleStateChange=e=>{if(this.disabled)return;e.stopPropagation();this.updateCheckState(e.detail.checked)};this.handleCheckboxChange=e=>{var t,i;if(this.disabled)return;this.updateCheckState((i=(t=e.detail)===null||t===void 0?void 0:t.checked)!==null&&i!==void 0?i:!this.isChecked)};this.handleHeaderClick=({target:e})=>{if(this.disabled)return;if(!e.closest(".tree-item__checkbox-container, .tree-item__chevron-container")){if(this.hasChildren){const e=!this.isChecked;this.updateCheckState(e);const t=e?this.expandOrCollapseAllDescendants(true):this.expandOrCollapseAllDescendants(false);this.ifxTreeViewItemExpandChange.emit({expanded:e,affectedItems:t,component:this})}else{this.updateCheckState(!this.isChecked)}}};this.toggleExpand=()=>{if(this.disabled||!this.hasChildren)return;this.expanded=!this.expanded};this.handleKeyDown=e=>{var t,i,s,n,a,r;const h=Array.from(((t=this.host.closest("ifx-tree-view"))===null||t===void 0?void 0:t.querySelectorAll("ifx-tree-view-item"))||[]);const o=h.filter((e=>{var t,i;let s=(t=e.parentElement)===null||t===void 0?void 0:t.closest("ifx-tree-view-item");while(s){const e=s;if(!(e.expandAllItems||e.expanded))return false;s=(i=s.parentElement)===null||i===void 0?void 0:i.closest("ifx-tree-view-item")}return true}));const c=o.findIndex((e=>e===this.host));const l=e=>e===null||e===void 0?void 0:e.focus();switch(e.key){case"ArrowDown":{e.preventDefault();for(let e=c+1;e<o.length;e++){const t=o[e];if(!t.disabled){l((i=t.shadowRoot)===null||i===void 0?void 0:i.querySelector(".tree-item__label-icon-container"));break}}break}case"ArrowUp":{e.preventDefault();for(let e=c-1;e>=0;e--){const t=o[e];if(!t.disabled){l((s=t.shadowRoot)===null||s===void 0?void 0:s.querySelector(".tree-item__label-icon-container"));break}}break}case"ArrowRight":{e.preventDefault();if(!this.isExpanded&&this.hasChildren){this.expanded=true}else if(this.isExpanded&&this.hasChildren){const e=this.host.querySelector("ifx-tree-view-item");if(e&&!e.disabled){l((n=e.shadowRoot)===null||n===void 0?void 0:n.querySelector(".tree-item__label-icon-container"))}}break}case"ArrowLeft":{e.preventDefault();if(this.isExpanded&&this.hasChildren){this.expanded=false}else{const e=(a=this.host.parentElement)===null||a===void 0?void 0:a.closest("ifx-tree-view-item");if(e&&!e.disabled){l((r=e.shadowRoot)===null||r===void 0?void 0:r.querySelector(".tree-item__label-icon-container"))}}break}case" ":case"Enter":{e.preventDefault();if(this.hasChildren){const e=!this.isChecked;this.updateCheckState(e);const t=e?this.expandOrCollapseAllDescendants(true):this.expandOrCollapseAllDescendants(false);this.ifxTreeViewItemExpandChange.emit({expanded:e,affectedItems:t,component:this})}else{this.updateCheckState(!this.isChecked)}break}}}}get disabled(){return this.disableAllItems||this.disableItem}get isExpanded(){return this.expandAllItems||this.expanded}componentWillLoad(){this.expanded=this.initiallyExpanded;this.hasChildren=this.findChildren().length>0;this.level=this.calculateNodeLevel();this.host.setAttribute("data-level",this.level.toString());this.isChecked=this.initiallySelected;this.host.addEventListener("internal-check-state-change",this.handleStateChange)}componentDidLoad(){this.observeParentAttribute("disable-all-items",(e=>this.disableAllItems=e));this.observeParentAttribute("data-expand-all-items",(e=>this.expandAllItems=e),true);if(this.shouldExpandFromParent())this.expandAllDescendants();this.host["__stencil_instance"]=this;if(this.initiallySelected)setTimeout((()=>this.updateParentState()),0)}observeParentAttribute(e,t,i=false){let s=this.host.parentElement;while(s){if(s.tagName==="IFX-TREE-VIEW"||i&&s.hasAttribute(e)){const i=new MutationObserver((()=>t(s.hasAttribute(e))));i.observe(s,{attributes:true});t(s.hasAttribute(e));break}s=s.parentElement}}shouldExpandFromParent(){let e=this.host.parentElement;while(e){if(e.tagName==="IFX-TREE-VIEW"&&(e.hasAttribute("expand-all-items")||e.hasAttribute("data-expand-all-items")))return true;e=e.parentElement}return false}expandAllDescendants(){this.expanded=true;this.findChildren().forEach((e=>{var t,i;e.expanded=true;(i=(t=e).expandAllDescendants)===null||i===void 0?void 0:i.call(t)}))}expandOrCollapseAllDescendants(e){this.suppressExpandEvents=true;const t=[];this.expanded=e;if(this.hasChildren)t.push({expanded:e,value:this.value});this.findChildren().forEach((i=>{const s=i["__stencil_instance"];if(s&&s.hasChildren){s.suppressExpandEvents=true;s.expanded=e;t.push({expanded:e,value:s.value});if(s.hasChildren){const i=s.expandOrCollapseAllDescendants(e);t.push(...i)}}}));this.suppressExpandEvents=false;return t}async updateCheckState(e,t=false){if(this.disabled)return;if(!t&&this.hasChildren){const t=this.collectDescendantStates(e);this.setNodeState({isChecked:e,partialChecked:false},false);await this.updateChildrenSilently(e);this.ifxTreeViewItemCheckChange.emit({checked:e,indeterminate:false,value:this.value,affectedChildItems:t,component:this});this.updateParentState()}else if(t){this.setNodeState({isChecked:e,partialChecked:false},false)}else{this.setNodeState({isChecked:e,partialChecked:false});await this.updateChildrenState(e);this.updateParentState()}}async updateChildrenSilently(e){for(const t of this.findChildren()){const i=t["__stencil_instance"];if(i&&!i.disabled){i.setNodeState({isChecked:e,partialChecked:false},false);await i.updateChildrenSilently(e)}}}handleExpandedChange(e){if(!this.suppressExpandEvents){this.ifxTreeViewItemExpandChange.emit({expanded:e,value:this.value,affectedItems:[{expanded:e,value:this.value}],component:this})}}handleDisableItemChange(e){this.ifxTreeViewItemDisableChange.emit({disabled:e,component:this})}setNodeState(e,t=true){this.isChecked=e.isChecked;this.partialChecked=e.partialChecked;if(t){this.ifxTreeViewItemCheckChange.emit({checked:this.isChecked,indeterminate:this.partialChecked,value:this.value,level:this.level,disabled:this.disabled,component:this})}}collectDescendantStates(e){const t=[];const i=(s,n=false)=>{let a=s===this.host?this:s["__stencil_instance"];if(!n&&!(a===null||a===void 0?void 0:a.disabled)){t.push({checked:e,indeterminate:false,value:a===null||a===void 0?void 0:a.value})}Array.from(s.children).forEach((e=>{if(e.tagName==="IFX-TREE-VIEW-ITEM")i(e,false)}))};Array.from(this.host.children).forEach((e=>{if(e.tagName==="IFX-TREE-VIEW-ITEM")i(e,false)}));return t}async updateChildrenState(e){for(const t of this.findChildren()){const i=t["__stencil_instance"];if(i&&!i.disabled){await t.componentOnReady();t.dispatchEvent(new CustomEvent("internal-check-state-change",{detail:{checked:e},bubbles:false,composed:true}))}}}findSiblingNodes(e){return Array.from(e.children).filter((e=>e instanceof HTMLElement&&e.tagName==="IFX-TREE-VIEW-ITEM"))}updateParentState(){var e;const t=(e=this.host.parentElement)===null||e===void 0?void 0:e.closest("ifx-tree-view-item");if(!t)return;setTimeout((()=>{const e=t["__stencil_instance"];if(!e)return;const i=this.findSiblingNodes(t);const{allChecked:s,someChecked:n}=this.calculateSiblingStates(i);e.setNodeState({isChecked:s,partialChecked:!s&&n},false);e.updateParentState()}),0)}calculateSiblingStates(e){const t=e.map((e=>{const t=e["__stencil_instance"];return{checked:t===null||t===void 0?void 0:t.isChecked,partial:t===null||t===void 0?void 0:t.partialChecked}}));const i=t.filter((e=>e.checked)).length;const s=t.filter((e=>e.partial)).length;return{allChecked:t.length>0&&i===t.length&&s===0,someChecked:i>0||s>0}}render(){return i("div",{key:"61969870010ebef0e12724d011e7ef58ce815cd6",class:{"tree-item":true,"tree-item--expanded":this.isExpanded,"tree-item--has-children":this.hasChildren,"tree-item--disabled":this.disabled},role:"treeitem","aria-expanded":this.isExpanded?"true":"false","data-level":this.level,"aria-disabled":this.disabled?"true":undefined,"aria-label":this.ariaLabel},i("div",{key:"e8df740d394011bfc086a8bb4b68d4d702438fdb",class:"tree-item__content"},i("div",{key:"783f6bf2777af34d01597ac6829263c5d9a12b4e",class:"tree-item__checkbox-container",onClick:e=>e.stopPropagation()},i("ifx-checkbox",{key:"823852982d4f45c7e42e57e1613f48bdc0684cfa",size:"s",checked:this.partialChecked?false:this.isChecked,indeterminate:this.partialChecked,onIfxChange:this.handleCheckboxChange,disabled:this.disabled})),i("div",{key:"33c74b45489e4ea1f80ac0956ecfcf353ff60e2c",class:"tree-item__header",style:{paddingLeft:`${this.level*24+10}px`},onClick:this.handleHeaderClick,tabIndex:-1,"aria-disabled":this.disabled?"true":undefined},this.hasChildren&&i("div",{key:"970232dff0e2843639c0af43e7e18ab4fb32926c",class:"tree-item__chevron-container",onClick:this.toggleExpand},i("ifx-icon",{key:"fb2ce847b14c44e41166f1648faec8b962b8bc16",class:`tree-item__chevron ${this.isExpanded?"chevron-down":"chevron-right"}`,icon:"chevron-right-16"}),i("div",{key:"0806b28a854465f17d8e4c6497cbfef4af1f2905",class:"tree-item__line"})),i("div",{key:"ecedfdc0d16a83e24cfbab0b71231de80274b8cc",class:"tree-item__label-icon-container",tabIndex:this.disabled?-1:0,onKeyDown:this.handleKeyDown},i("div",{key:"205559dc9e1f31ea79d2e4adb77a67797257b816",class:"tree-item__icon-container"},this.hasChildren?i(s,null,i("ifx-icon",{class:{"icon--hidden":this.isExpanded},icon:"folder-16"}),i("ifx-icon",{class:{"icon--hidden":!this.isExpanded},icon:"folder-open-16"})):i("ifx-icon",{icon:"file-16"})),i("span",{key:"893317125ca11298c530ec13816cc99d89b0dddd",class:"tree-item__label"},i("slot",{key:"96a616920d731bb998bd98d105be6589d980f43a"}))))),this.isExpanded&&i("div",{key:"4be50533bf36eef6d82c9766980b88d3de4fe760",class:"tree-item__children"},i("slot",{key:"ebe6023d1f745b072033ad80ed0b4969801935e4",name:"children"})))}get host(){return n(this)}static get watchers(){return{expanded:["handleExpandedChange"],disableItem:["handleDisableItemChange"]}}};h.style=r;export{h as ifx_tree_view_item};
|
2
|
+
//# sourceMappingURL=p-6c2698a3.entry.js.map
|